profile-pane 3.2.3-1 → 3.2.3-2

package/lib/ui/dialog.css

@@ -4,14 +4,14 @@
 /* dialog host */
 #profile-modal {
   --profile-modal-backdrop: var(--overlay-bg-muted, rgba(0, 0, 0, 0.5));
-  --profile-modal-panel-inline-padding: var(--spacing-lg, 1.5625rem);
-  --profile-modal-panel-block-padding: var(--spacing-md, 1.25rem);
-  --profile-modal-compact-padding: var(--spacing-sm, 0.9375rem);
-  --profile-modal-button-gap: var(--spacing-sm, 0.938rem);
-  --profile-modal-error-padding: var(--spacing-xs, 0.75rem);
-  --profile-modal-panel-width: min(37.5rem, calc(100vw - 2rem));
-  --profile-modal-panel-max-width: 37.5rem;
-  --profile-modal-panel-max-height: calc(100dvh - 2rem);
+  --profile-modal-panel-inline-padding: 25px;
+  --profile-modal-panel-block-padding: 20px;
+  --profile-modal-compact-padding: 15px;
+  --profile-modal-button-gap: 15px;
+  --profile-modal-error-padding: 12px;
+  --profile-modal-panel-width: min(600px, calc(100vw - 32px));
+  --profile-modal-panel-max-width: 600px;
+  --profile-modal-panel-max-height: calc(100dvh - 32px);
   margin: 0;
   padding: 0;
   border: none;
@@ -29,7 +29,7 @@
   overscroll-behavior: contain;
   padding-top: env(safe-area-inset-top);
   padding-right: 0;
-  padding-bottom: max(var(--spacing-lg, 1.5625rem), env(safe-area-inset-bottom));
+  padding-bottom: max(25px, env(safe-area-inset-bottom));
   padding-left: 0;
 }
 
@@ -48,7 +48,7 @@
   grid-template-rows: auto minmax(0, 1fr) auto auto;
   margin: 0;
   background: var(--color-background);
-  border-radius: var(--border-radius-base);
+  border-radius: 5px;
   max-width: var(--profile-modal-panel-max-width);
   width: var(--profile-modal-panel-width);
   max-height: var(--profile-modal-panel-max-height);
@@ -63,9 +63,9 @@
   min-width: 0;
   padding: var(--profile-modal-panel-block-padding) var(--profile-modal-panel-inline-padding); 
   box-sizing: border-box;
-  border-radius: var(--border-radius-base, 0.3125rem) var(--border-radius-base, 0.3125rem) 0 0;
-  border-bottom: var(--border-width-sm, 0.1rem) solid var(--color-border-lighter, var(--slate-200, #E2E8F0));
-  background: var(--color-surface-overlay-header, var(--slate-50, #F8FAFC));
+  border-radius: 5px 5px 0 0;
+  border-bottom: 1px solid var(--solid-ui-color-slate-200, #E2E8F0);
+  background: var(--solid-ui-color-slate-50, #F8FAFC);
 }
 
 #profile-modal .modal #modal-desc {
@@ -79,7 +79,7 @@
 }
 
 #profile-modal .modal #modal-desc:has(> .profile__edit-form--projects) {
-  padding: var(--spacing-2xs, 0.625rem) var(--profile-modal-panel-inline-padding);
+  padding: 10px var(--profile-modal-panel-inline-padding);
 }
 
 #profile-modal .modal #modal-desc:has(> #contacts-addressbook-picker-dialog) {
@@ -89,7 +89,7 @@
 #profile-modal #modal-desc > .profile__edit-form--projects {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-2xs, 0.625rem);
+  gap: 10px;
 }
 
 #profile-modal .modal #modal-title {
@@ -97,59 +97,11 @@
   color: var(--color-text-subheading, var(--gray-900, #101828));
 }
 
-#profile-modal .modal #modal-header-action > solid-ui-button[aria-label="Close dialog"] {
-  --button-height-sm: var(--icon-base, 2rem);
-  --button-width-sm: var(--icon-base, 2rem);
-  --button-padding-sm: 0;
-  --button-background: transparent;
-  --button-border-width: 0;
-  --button-border: transparent;
-  --button-text: var(--color-text);
-  --button-border-radius: 999px;
-  --button-box-shadow: none;
-  --button-hover-background: rgba(0, 0, 0, 0.04);
-  --button-hover-border: transparent;
-  --button-hover-text: var(--color-primary);
-  --button-hover-box-shadow: none;
-  --button-active-box-shadow: none;
-  --button-active-transform: none;
-  --button-icon-size-sm: var(--icon-xxs, 1rem);
-}
-
-#profile-modal .modal #modal-header-action > solid-ui-button[aria-label="Close dialog"]:hover {
-  --button-hover-background: rgba(0, 0, 0, 0.04);
-  --button-hover-border: transparent;
-  --button-hover-text: var(--color-primary);
-}
-
-#profile-modal .modal #modal-header-action > solid-ui-button[aria-label="Close dialog"]:focus-visible::part(button) {
-  outline: var(--focus-indicator-width) solid var(--color-primary);
-  outline-offset: var(--outline-offset-sm);
-  box-shadow: var(--box-shadow-focus-accessible, 0 0 0 var(--focus-ring-width) var(--color-background), 0 0 0 calc(var(--focus-ring-width) + var(--focus-indicator-width)) var(--color-primary-alpha));
-}
-
 #profile-modal .modal:has(#modal-desc > .profile__edit-form--projects) #modal-header-action,
 #profile-modal .modal:has(#modal-desc > .profile__edit-form--contact-info) #modal-header-action {
   display: none;
 }
 
-#profile-modal .modal solid-ui-button.modal__header-action-button {
-  --button-height-sm: 0;
-  --button-padding-sm: var(--spacing-xxs);
-  --button-background: transparent;
-  --button-border-width: 0;
-  --button-border: transparent;
-  --button-font-weight: var(--font-weight-md, 500);
-  --button-text: var(--color-primary);
-  --button-hover-background: transparent;
-  --button-hover-border: transparent;
-  --button-hover-text: var(--color-primary);
-}
-
-#profile-modal .modal solid-ui-button.modal__header-action-button:hover::part(button) {
-  text-decoration: underline;
-}
-
 /* button container: center buttons horizontally (uses id in markup) */
 #profile-modal #modal-buttons {
   width: 100%;
@@ -158,7 +110,7 @@
   gap: var(--profile-modal-button-gap);
   align-self: stretch;
   box-sizing: border-box;
-  border-top: var(--border-width-sm, 0.1rem) solid var(--color-border-lighter, var(--slate-200, #E2E8F0));
+  border-top: 1px solid var(--solid-ui-color-slate-200, #E2E8F0);
   background: var(--color-surface-tertiary, var(--gray-50, #F9FAFB));
 }
 
@@ -170,37 +122,14 @@
   width: 10.8rem;
 }
 
-#profile-modal #modal-buttons solid-ui-button[data-dialog-primary='true'] {
-  --button-font-size-md: var(--font-size-md, 1rem);
-}
-
-#profile-modal #modal-buttons solid-ui-button[data-cancel='true'] {
-  --button-font-weight: var(--font-weight-normal, normal);
-  --button-text: var(--dialog-cancel-button-text, var(--gray-800, #1E2939));
-  --button-border: var(--dialog-cancel-button-border, var(--gray-300, #D1D5DC));
-  --button-background: var(--dialog-cancel-button-background, transparent);
-  --button-hover-background: var(--dialog-cancel-button-hover-background, var(--blue-900, #083575));
-  --button-hover-border: var(--dialog-cancel-button-hover-border, var(--blue-900, #083575));
-  --button-hover-text: var(--dialog-cancel-button-hover-text, var(--color-text-on-action, var(--white, #FFF)));
-  --button-font-size-md: var(--font-size-md, 1rem);
-}
-
-#profile-modal #modal-buttons solid-ui-button[data-cancel='true']:hover::part(button),
-#profile-modal #modal-buttons solid-ui-button[data-cancel='true']:focus-visible::part(button),
-#profile-modal #modal-buttons solid-ui-button[data-cancel='true']:focus-within::part(button) {
-  background: var(--dialog-cancel-button-hover-background, var(--blue-900, #083575));
-  border-color: var(--dialog-cancel-button-hover-border, var(--blue-900, #083575));
-  color: var(--dialog-cancel-button-hover-text, var(--color-text-on-action, var(--white, #FFF)));
-}
-
 #profile-modal .modal__error-section {
   margin-top: var(--spacing-sm);
   margin-bottom: 0;
   padding: var(--profile-modal-error-padding);
   border: 1px solid var(--dialog-error-border, var(--pink-700, #ff98b3));
-  border-radius: var(--border-radius-base);
+  border-radius: 5px;
   background: var(--dialog-error-background, var(--pink-500, #ffdde6));
-  color: var(--dialog-error-text, var(--red-600, #B00020));
+  color: var(--solid-ui-color-error, #B00020);
   text-align: center;
   white-space: pre-wrap;
   overflow-wrap: anywhere;

package/lib/ui/dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/ui/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAA;AACrB,OAAO,4BAA4B,CAAA;AA+FnC,KAAK,iBAAiB,GAAG,OAAO,GAAG,MAAM,GAAG,IAAI,CAAA;AAShD,KAAK,kBAAkB,GACnB;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,GACjB;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAChB;IACE,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;CACrC,CAAA;AAYL,KAAK,mBAAmB,GAAG,WAAW,GAAG;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,UAAU,CAAC,EAAE,UAAU,GAAG,IAAI,CAAA;CAC/B,CAAA;AAyBD,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,UAAU,GAAG,mBAAmB,GAAG,IAAI,CAEtF;AAED,wBAAgB,2BAA2B,CAAC,IAAI,EAAE,UAAU,GAAG,mBAAmB,GAAG,IAAI,CAExF;AAuRD,wBAAgB,iBAAiB,IAAI,IAAI,CAExC;AAED,wBAAgB,WAAW,CAAE,OAAO,EAAE,MAAM,EAAE,KAAK,QAAgB,EAAE,GAAG,EAAE,QAAQ,8BAOjF;AAwCD,wBAAgB,0BAA0B,CAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,SAAmB,GAAG,IAAI,CAGlH;AAED,KAAK,qBAAqB,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,QAAQ,CAAC;IACd,IAAI,EAAE,eAAe,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,sBAAsB,CAAC,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;IAC1D,QAAQ,CAAC,EAAE,MAAM,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,MAAM,GAAG,IAAI,CAAC;IACxD,MAAM,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACpC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,MAAM,CAAA;CAC7C,CAAA;AAED,KAAK,iBAAiB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AAK/C,wBAAgB,eAAe,CAAE,OAAO,EAAE,qBAAqB,GAAG,OAAO,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAoFlG"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/ui/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAA;AACrB,OAAO,4BAA4B,CAAA;AA+FnC,KAAK,iBAAiB,GAAG,OAAO,GAAG,MAAM,GAAG,IAAI,CAAA;AAShD,KAAK,kBAAkB,GACnB;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,GACjB;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAChB;IACE,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;CACrC,CAAA;AAYL,KAAK,mBAAmB,GAAG,WAAW,GAAG;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,UAAU,CAAC,EAAE,UAAU,GAAG,IAAI,CAAA;CAC/B,CAAA;AAyBD,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,UAAU,GAAG,mBAAmB,GAAG,IAAI,CAEtF;AAED,wBAAgB,2BAA2B,CAAC,IAAI,EAAE,UAAU,GAAG,mBAAmB,GAAG,IAAI,CAExF;AAiRD,wBAAgB,iBAAiB,IAAI,IAAI,CAExC;AAED,wBAAgB,WAAW,CAAE,OAAO,EAAE,MAAM,EAAE,KAAK,QAAgB,EAAE,GAAG,EAAE,QAAQ,8BAOjF;AAwCD,wBAAgB,0BAA0B,CAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,SAAmB,GAAG,IAAI,CAGlH;AAED,KAAK,qBAAqB,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,QAAQ,CAAC;IACd,IAAI,EAAE,eAAe,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,sBAAsB,CAAC,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;IAC1D,QAAQ,CAAC,EAAE,MAAM,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,MAAM,GAAG,IAAI,CAAC;IACxD,MAAM,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACpC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,MAAM,CAAA;CAC7C,CAAA;AAED,KAAK,iBAAiB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AAK/C,wBAAgB,eAAe,CAAE,OAAO,EAAE,qBAAqB,GAAG,OAAO,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAsFlG"}

package/lib/ui/dialog.js

@@ -280,9 +280,7 @@ function openModal({
     };
     if (resolvedHeaderAction.type === 'close') {
       const closeButton = dom.createElement('solid-ui-button');
-      closeButton.setAttribute('type', 'button');
-      closeButton.setAttribute('variant', 'icon');
-      closeButton.setAttribute('size', 'sm');
+      closeButton.setAttribute('variant', 'ghost');
       closeButton.setAttribute('aria-label', 'Close dialog');
       const iconSlot = dom.createElement('span');
       iconSlot.setAttribute('slot', 'icon');
@@ -292,10 +290,8 @@ function openModal({
       elements.headerAction.appendChild(closeButton);
     } else if (resolvedHeaderAction.type === 'button') {
       const actionButton = dom.createElement('solid-ui-button');
-      actionButton.setAttribute('type', 'button');
-      actionButton.setAttribute('variant', 'secondary');
-      actionButton.setAttribute('size', 'sm');
-      actionButton.className = resolvedHeaderAction.className || 'modal__header-action-button profile__action-button profile-action-text flex-center';
+      actionButton.setAttribute('variant', 'tertiary');
+      actionButton.className = resolvedHeaderAction.className || '';
       actionButton.textContent = resolvedHeaderAction.label;
       actionButton.setAttribute('label', resolvedHeaderAction.label);
       actionButton.setAttribute('aria-label', resolvedHeaderAction.ariaLabel || resolvedHeaderAction.label);
@@ -308,9 +304,7 @@ function openModal({
     }
     buttons.forEach(btn => {
       const b = dom.createElement('solid-ui-button');
-      b.setAttribute('type', 'button');
       b.setAttribute('label', btn.label);
-      b.setAttribute('size', 'md');
       b.setAttribute('variant', btn.primary ? 'primary' : 'secondary');
       b.textContent = btn.label;
       if (btn.primary) {
@@ -405,6 +399,8 @@ function openInputDialog(options) {
   const submitProxy = options.dom.createElement('button');
   submitProxy.type = 'submit';
   submitProxy.hidden = true;
+  submitProxy.style.display = 'none';
+  submitProxy.setAttribute('aria-hidden', 'true');
   submitProxy.tabIndex = -1;
   options.form.appendChild(submitProxy);
   const handleSubmit = event => {

package/lib/ui/dialog.responsive.css

@@ -2,15 +2,15 @@
 
 #profile-modal .modal:has(.profile-edit-dialog__social-account-select[popup-open]) #modal-desc,
 #profile-modal .modal:has(#modal-desc > .profile__edit-form solid-ui-combobox:focus-within) #modal-desc {
-  padding-bottom: calc(var(--profile-modal-panel-inline-padding) + 1.875rem);
+  padding-bottom: calc(var(--profile-modal-panel-inline-padding) + 30px);
 }
 
 @media (max-width: 576px) {
   #profile-modal {
-    --profile-modal-panel-max-height: calc(100dvh - 4 * var(--spacing-sm));
+    --profile-modal-panel-max-height: calc(100dvh - 4 * 15px);
     padding-top: env(safe-area-inset-top);
     padding-right: 0;
-    padding-bottom: max(var(--spacing-sm), env(safe-area-inset-bottom));
+    padding-bottom: max(15px, env(safe-area-inset-bottom));
     padding-left: 0;
     place-items: center;
   }
@@ -20,7 +20,7 @@
     max-width: var(--profile-modal-panel-max-width);
     min-width: 0;
     padding: 0;
-    border-radius: var(--border-radius-base);
+    border-radius: 5px;
     overscroll-behavior: contain;
     justify-self: center;
     align-self: center;
@@ -28,27 +28,27 @@
   }
 
   #profile-modal .modal .modal-header {
-    gap: var(--spacing-lg, 1.5625rem);
-    padding: var(--spacing-sm, 0.938rem);
+    gap: 25px;
+    padding: 15px;
   }
 
   #profile-modal .modal #modal-title {
-    font-size: var(--font-size-lg, 1.125rem);
-    line-height: var(--line-height-tight, 1.4);
+    font-size: var(--solid-ui-font-size-lg, 1.125rem);
+    line-height: 1.4;
   }
 
   #profile-modal .modal #modal-desc {
-    padding: var(--spacing-sm, 0.938rem) var(--spacing-sm, 0.938rem) var(--spacing-lg, 1.5625rem);
+    padding: 15px 15px 25px;
   }
 
   #profile-modal .modal #modal-desc:has(> .profile__edit-form--projects) {
-    padding: var(--spacing-sm, 0.938rem) var(--spacing-sm, 0.938rem) var(--spacing-lg, 1.5625rem);
+    padding: 15px 15px 25px;
   }
 
   #profile-modal #modal-desc > .profile__edit-form--bio {
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-md, 1.25rem);
+    gap: 20px;
   }
 
   #profile-modal #modal-buttons {
@@ -64,15 +64,14 @@
     flex: 1 0 0;
     width: auto;
     min-width: 0;
-    --button-font-size-md: var(--font-size-md, 1rem);
   }
 }
 
 html[data-layout='mobile'] #profile-modal {
-  --profile-modal-panel-max-height: calc(100dvh - 4 * var(--spacing-sm));
+  --profile-modal-panel-max-height: calc(100dvh - 4 * 15px);
   padding-top: env(safe-area-inset-top);
   padding-right: 0;
-  padding-bottom: max(var(--spacing-sm), env(safe-area-inset-bottom));
+  padding-bottom: max(15px, env(safe-area-inset-bottom));
   padding-left: 0;
   place-items: center;
 }
@@ -84,7 +83,7 @@ html[data-layout='mobile'] #profile-modal .modal {
   max-width: var(--profile-modal-panel-max-width);
   min-width: 0;
   padding: 0;
-  border-radius: var(--border-radius-base);
+  border-radius: 5px;
   overscroll-behavior: contain;
   justify-self: center;
   align-self: center;
@@ -92,27 +91,27 @@ html[data-layout='mobile'] #profile-modal .modal {
 }
 
 html[data-layout='mobile'] #profile-modal .modal .modal-header {
-  gap: var(--spacing-lg, 1.5625rem);
-  padding: var(--spacing-sm, 0.938rem);
+  gap: 25px;
+  padding: 15px;
 }
 
 html[data-layout='mobile'] #profile-modal .modal #modal-title {
-  font-size: var(--font-size-lg, 1.125rem);
-  line-height: var(--line-height-tight, 1.4);
+  font-size: var(--solid-ui-font-size-lg, 1.125rem);
+  line-height: 1.4;
 }
 
 html[data-layout='mobile'] #profile-modal .modal #modal-desc {
-  padding: var(--spacing-sm, 0.938rem) var(--spacing-sm, 0.938rem) var(--spacing-lg, 1.5625rem);
+  padding: 15px 15px 25px;
 }
 
 html[data-layout='mobile'] #profile-modal .modal #modal-desc:has(> .profile__edit-form--projects) {
-  padding: var(--spacing-sm, 0.938rem) var(--spacing-sm, 0.938rem) var(--spacing-lg, 1.5625rem);
+  padding: 10px 15px 25px;
 }
 
 html[data-layout='mobile'] #profile-modal #modal-desc > .profile__edit-form--bio {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-md, 1.25rem);
+  gap: 20px;
 }
 
 html[data-layout='mobile'] #profile-modal #modal-buttons {
@@ -128,15 +127,14 @@ html[data-layout='mobile'] #profile-modal #modal-buttons > solid-ui-button {
   flex: 1 0 0;
   width: auto;
   min-width: 0;
-  --button-font-size-md: var(--font-size-md, 1rem);
 }
 
 @container profile-pane (max-width: 576px) {
   #profile-modal {
-    --profile-modal-panel-max-height: calc(100dvh - 4 * var(--spacing-sm));
+    --profile-modal-panel-max-height: calc(100dvh - 4 * 15px);
     padding-top: env(safe-area-inset-top);
     padding-right: 0;
-    padding-bottom: max(var(--spacing-sm), env(safe-area-inset-bottom));
+    padding-bottom: max(15px, env(safe-area-inset-bottom));
     padding-left: 0;
     place-items: center;
   }
@@ -146,7 +144,7 @@ html[data-layout='mobile'] #profile-modal #modal-buttons > solid-ui-button {
     max-width: var(--profile-modal-panel-max-width);
     min-width: 0;
     padding: 0;
-    border-radius: var(--border-radius-base);
+    border-radius: 5px;
     overscroll-behavior: contain;
     justify-self: center;
     align-self: center;
@@ -154,27 +152,27 @@ html[data-layout='mobile'] #profile-modal #modal-buttons > solid-ui-button {
   }
 
   #profile-modal .modal .modal-header {
-    gap: var(--spacing-lg, 1.5625rem);
-    padding: var(--spacing-sm, 0.938rem);
+    gap: 25px;
+    padding: 15px;
   }
 
   #profile-modal .modal #modal-title {
-    font-size: var(--font-size-lg, 1.125rem);
-    line-height: var(--line-height-tight, 1.4);
+    font-size: var(--solid-ui-font-size-lg, 1.125rem);
+    line-height: 1.4;
   }
 
   #profile-modal .modal #modal-desc {
-    padding: var(--spacing-sm, 0.938rem) var(--spacing-sm, 0.938rem) var(--spacing-lg, 1.5625rem);
+    padding: 15px 15px 25px;
   }
 
   #profile-modal .modal #modal-desc:has(> .profile__edit-form--projects) {
-    padding: var(--spacing-sm, 0.938rem) var(--spacing-sm, 0.938rem) var(--spacing-lg, 1.5625rem);
+    padding: 10px 15px 25px;
   }
 
   #profile-modal #modal-desc > .profile__edit-form--bio {
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-md, 1.25rem);
+    gap: 20px;
   }
 
   #profile-modal #modal-buttons {
@@ -190,6 +188,5 @@ html[data-layout='mobile'] #profile-modal #modal-buttons > solid-ui-button {
     flex: 1 0 0;
     width: auto;
     min-width: 0;
-    --button-font-size-md: var(--font-size-md, 1rem);
   }
 }

package/lib/ui/responsiveActionButton.d.ts

@@ -0,0 +1,19 @@
+import { nothing, TemplateResult } from 'lit-html';
+import 'solid-ui/components/button';
+import { Layout } from '../types';
+type ResponsiveActionButtonOptions = {
+    layout?: Layout;
+    className: string;
+    ariaLabel: string;
+    variant?: {
+        desktop: string;
+        mobile: string;
+    };
+    onClick: (event: Event) => void;
+    desktopIcon?: TemplateResult | typeof nothing;
+    desktopLabel?: string;
+    mobileIcon?: TemplateResult | typeof nothing;
+};
+export declare function renderResponsiveActionButton({ layout, className, ariaLabel, variant, onClick, desktopIcon, desktopLabel, mobileIcon }: ResponsiveActionButtonOptions): TemplateResult;
+export {};
+//# sourceMappingURL=responsiveActionButton.d.ts.map

package/lib/ui/responsiveActionButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsiveActionButton.d.ts","sourceRoot":"","sources":["../../src/ui/responsiveActionButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AACxD,OAAO,4BAA4B,CAAA;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,KAAK,6BAA6B,GAAG;IACnC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE;QACR,OAAO,EAAE,MAAM,CAAA;QACf,MAAM,EAAE,MAAM,CAAA;KACf,CAAA;IACD,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IAC/B,WAAW,CAAC,EAAE,cAAc,GAAG,OAAO,OAAO,CAAA;IAC7C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,cAAc,GAAG,OAAO,OAAO,CAAA;CAC7C,CAAA;AAED,wBAAgB,4BAA4B,CAAC,EAC3C,MAAkB,EAClB,SAAS,EACT,SAAS,EACT,OAGC,EACD,OAAO,EACP,WAAqB,EACrB,YAAY,EACZ,UAAoB,EACrB,EAAE,6BAA6B,GAAG,cAAc,CAahD"}

package/lib/ui/responsiveActionButton.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderResponsiveActionButton = renderResponsiveActionButton;
+var _litHtml = require("lit-html");
+require("solid-ui/components/button");
+function renderResponsiveActionButton({
+  layout = 'desktop',
+  className,
+  ariaLabel,
+  variant = {
+    desktop: 'tertiary',
+    mobile: 'ghost'
+  },
+  onClick,
+  desktopIcon = _litHtml.nothing,
+  desktopLabel,
+  mobileIcon = _litHtml.nothing
+}) {
+  return (0, _litHtml.html)`
+    <solid-ui-button
+      variant=${layout === 'desktop' ? variant.desktop : variant.mobile}
+      class=${className}
+      aria-label=${ariaLabel}
+      @click=${onClick}
+    >
+      ${layout === 'desktop' ? desktopIcon : _litHtml.nothing}
+      ${layout === 'desktop' && desktopLabel ? (0, _litHtml.html)`<span class="profile-section-collapsible__action-label">${desktopLabel}</span>` : _litHtml.nothing}
+      ${layout === 'mobile' ? mobileIcon : _litHtml.nothing}
+    </solid-ui-button>
+  `;
+}

package/lib/utils/resize.d.ts

@@ -0,0 +1,2 @@
+export declare function createResizeDrivenSync(update: () => void, observedElements: Array<HTMLElement | null | undefined>): () => void;
+//# sourceMappingURL=resize.d.ts.map

package/lib/utils/resize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resize.d.ts","sourceRoot":"","sources":["../../src/utils/resize.ts"],"names":[],"mappings":"AAAA,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,MAAM,IAAI,EAClB,gBAAgB,EAAE,KAAK,CAAC,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC,GACtD,MAAM,IAAI,CA0CZ"}

package/lib/utils/resize.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createResizeDrivenSync = createResizeDrivenSync;
+function createResizeDrivenSync(update, observedElements) {
+  let animationFrameId = 0;
+  const scheduleUpdate = () => {
+    if (animationFrameId !== 0) {
+      return;
+    }
+    animationFrameId = window.requestAnimationFrame(() => {
+      animationFrameId = 0;
+      update();
+    });
+  };
+  update();
+  if (typeof ResizeObserver === 'undefined') {
+    window.addEventListener('resize', scheduleUpdate);
+    return () => {
+      if (animationFrameId !== 0) {
+        window.cancelAnimationFrame(animationFrameId);
+      }
+      window.removeEventListener('resize', scheduleUpdate);
+    };
+  }
+  const resizeObserver = new ResizeObserver(scheduleUpdate);
+  for (const observedElement of observedElements) {
+    if (observedElement) {
+      resizeObserver.observe(observedElement);
+    }
+  }
+  return () => {
+    if (animationFrameId !== 0) {
+      window.cancelAnimationFrame(animationFrameId);
+    }
+    resizeObserver.disconnect();
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "profile-pane",
-  "version": "3.2.3-1",
+  "version": "3.2.3-2",
   "description": "A SolidOS compatible pane to display a personal profile page",
   "sideEffects": [
     "*.css"
@@ -19,15 +19,13 @@
   ],
   "scripts": {
     "clean": "rm -rf lib",
-    "build": "npm run clean && npm run typecheck && npm run build-dist && npm run build-js",
+    "build": "npm run clean && npm run typecheck && npm run build-js && npm run build-dist",
     "build-js": "babel src --out-dir lib --extensions '.ts' --copy-files && tsc --emitDeclarationOnly",
     "build-dist": "webpack --progress",
     "dev": "sh -c 'npm run watch & npm run start'",
-    "watch": "sh -c 'npm run watch:solid-ui & npm run watch-js & npm run watch-styles & npm run watch-dist & wait'",
-    "watch:workspace": "sh -c 'npm run watch-js & npm run watch-styles & npm run watch-dist & wait'",
-    "watch:solid-ui": "sh -c 'cd ../solid-ui && npm run watch'",
+    "watch": "sh -c 'npm run watch-js & npm run watch-dist & wait'",
+    "watch:workspace": "sh -c 'npm run watch-js & npm run watch-dist & wait'",
     "watch-js": "babel src --out-dir lib --extensions '.ts' --copy-files --watch",
-    "watch-styles": "node scripts/watch-styles.mjs",
     "watch-dist": "webpack --watch",
     "lint": "eslint",
     "lint-fix": "eslint --fix",
@@ -56,7 +54,7 @@
   "dependencies": {
     "@solid-data-modules/contacts-rdflib": "^0.7.1",
     "lit-html": "^3.3.3",
-    "pane-registry": "3.1.2-0",
+    "pane-registry": "3.1.2-1",
     "patch-package": "^8.0.1",
     "qrcode": "^1.5.4",
     "validate-color": "^2.2.4"
@@ -74,6 +72,7 @@
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@types/jest": "^30.0.0",
+    "@types/node": "^24.13.2",
     "@typescript-eslint/eslint-plugin": "^8.59.3",
     "@typescript-eslint/parser": "^8.59.3",
     "axe-core": "^4.11.4",
@@ -82,7 +81,6 @@
     "babel-plugin-inline-import": "^3.0.0",
     "babel-plugin-transform-import-meta": "^2.3.3",
     "chat-pane": "3.0.4-1",
-    "contacts-pane": "3.2.1-2",
     "copy-webpack-plugin": "^14.0.0",
     "css-loader": "^7.1.4",
     "eslint": "^9.39.4",
@@ -92,13 +90,14 @@
     "jest-fetch-mock": "^3.0.3",
     "jsdom": "^29.1.1",
     "node-polyfill-webpack-plugin": "^4.1.0",
-    "rdflib": "2.3.9",
-    "solid-logic": "4.0.8-0",
-    "solid-ui": "3.1.3-5",
+    "rdflib": "2.4.0",
+    "solid-logic": "4.0.8-1",
+    "solid-ui": "3.1.3-9",
     "style-loader": "^4.0.0",
     "terser-webpack-plugin": "^5.6.0",
     "ts-loader": "^9.5.7",
     "typescript": "^6.0.3",
+    "undici-types": "^7.18.2",
     "webpack": "^5.106.2",
     "webpack-cli": "^7.0.2",
     "webpack-dev-server": "^5.2.4"
@@ -108,7 +107,6 @@
     "solid-logic",
     "solid-ui",
     "pane-registry",
-    "chat-pane",
-    "contacts-pane"
+    "chat-pane"
   ]
 }