profile-pane 3.2.3-0 → 3.2.3-2

package/lib/sections/social/SocialSection.js

@@ -12,6 +12,7 @@ var _texts = require("../../texts");
 var _SocialEditDialog = require("./SocialEditDialog");
 var _collapsibleSection = require("../shared/collapsibleSection");
 var _profileIcons = require("../../icons-svg/profileIcons");
+var _responsiveActionButton = require("../../ui/responsiveActionButton");
 const MAX_VISIBLE_SOCIAL_ACCOUNTS_MOBILE = 10;
 function isRenderableAccount(account) {
   return Boolean(account?.homepage && account?.name && account?.icon);
@@ -42,10 +43,7 @@ const SocialCard = (SocialData, _viewerMode) => {
         </nav>
         ${hiddenAccountsCount > 0 ? (0, _litHtml.html)`
               <solid-ui-button
-                type="button"
-                variant="secondary"
-                size="sm"
-                label=${`${hiddenAccountsCount} more`}
+                variant="tertiary"
                 class="social-card__more-button"
                 aria-controls="social-media"
                 aria-expanded="false"
@@ -88,14 +86,9 @@ function renderSocialSectionContent(socialData, viewerMode) {
     ${hasAccounts ? SocialCard(socialData, viewerMode) : (0, _litHtml.html)`<p>No social accounts added yet.</p>`}
   `;
 }
-function renderSocialSectionDefault(store, subject, socialData, viewerMode, onSaved) {
-  // const hasAccounts = socialData.accounts && socialData.accounts.length > 0
-  const showSection = true;
+function renderSocialSectionDefault(store, subject, socialData, viewerMode, layout, onSaved) {
   const isOwner = viewerMode === 'owner';
-  const handleEdit = event => {
-    return (0, _SocialEditDialog.createSocialEditDialog)(event, store, subject, socialData.accounts, viewerMode, onSaved);
-  };
-  return showSection ? (0, _litHtml.html)`
+  return (0, _litHtml.html)`
         <section 
           aria-labelledby="social-heading" 
           data-profile-section="social"
@@ -107,26 +100,19 @@ function renderSocialSectionDefault(store, subject, socialData, viewerMode, onSa
           <header class="profile__section-header profile-section-collapsible__header">
             <h3 id="social-heading" tabindex="-1">${_texts.socialAccountsHeadingText}</h3>
             <div class="profile-section-collapsible__actions">
-              ${isOwner ? (0, _litHtml.html)`
-                <solid-ui-button
-                  type="button"
-                  variant="secondary"
-                  size="sm"
-                  class="profile__action-button profile-action-text profile-section-collapsible__edit-button"
-                  aria-label="Edit social accounts"
-                  @click=${handleEdit}
-                >
-                  <span class="profile-section-collapsible__edit-label profile__add-more-content">
-                    <span class="profile__add-more-icon" aria-hidden="true">${_profileIcons.addIcon}</span>
-                    <span>Add More</span>
-                  </span>
-                  <span class="profile-section-collapsible__edit-icon" aria-hidden="true">${_profileIcons.editIcon}</span>
-                </solid-ui-button>
-              ` : (0, _litHtml.html)``}
+             ${isOwner ? (0, _litHtml.html)`
+                ${(0, _responsiveActionButton.renderResponsiveActionButton)({
+    layout,
+    className: 'profile-section-collapsible__edit-button',
+    ariaLabel: 'Edit social accounts',
+    onClick: event => (0, _SocialEditDialog.createSocialEditDialog)(event, store, subject, socialData.accounts, viewerMode, onSaved),
+    desktopIcon: (0, _litHtml.html)`<span slot="left-icon" class="profile-section-collapsible__action-label profile__add-more-icon" aria-hidden="true">${_profileIcons.addIcon}</span>`,
+    desktopLabel: 'Add More',
+    mobileIcon: (0, _litHtml.html)`<span slot="icon" class="profile-section-collapsible__edit-icon" aria-hidden="true">${_profileIcons.editIcon}</span>`
+  })}
+              ` : _litHtml.nothing}
               <solid-ui-button
-                type="button"
-                variant="icon"
-                size="sm"
+                variant="ghost"
                 class="profile-section-collapsible__toggle-button"
                 aria-label="Toggle social accounts section"
                 aria-controls="social-panel"
@@ -141,21 +127,18 @@ function renderSocialSectionDefault(store, subject, socialData, viewerMode, onSa
             ${renderSocialSectionContent(socialData, viewerMode)}
           </div>
         </section>
-      ` : (0, _litHtml.html)``;
+      `;
 }
-function renderOwnerEmptySocialContent(_store, _subject, _socialData, _viewerMode, _onSaved) {
+function renderOwnerEmptySocialContent() {
   return (0, _litHtml.html)`
       <div class="profile__empty-state-content" role="group" aria-label="Empty social accounts section">
         <div class="social__empty-icon-wrapper">
           <span class="social__empty-icon">${_profileIcons.globeIcon}</span>
         </div>
-        <p class="profile__empty-state-message social__empty-message">
-            No social media links added yet.
-        </p>
       </div>
   `;
 }
-function renderOwnerEmptySocialSection(store, subject, socialData, viewerMode, onSaved) {
+function renderOwnerEmptySocialSection(store, subject, socialData, viewerMode, layout, onSaved) {
   return (0, _litHtml.html)`
     <section 
       aria-labelledby="social-heading" 
@@ -168,26 +151,19 @@ function renderOwnerEmptySocialSection(store, subject, socialData, viewerMode, o
       <header class="profile__section-header profile-section-collapsible__header">
         <h3 id="social-heading" tabindex="-1">${_texts.socialAccountsHeadingText}</h3>
         <div class="profile-section-collapsible__actions">
+          ${(0, _responsiveActionButton.renderResponsiveActionButton)({
+    layout,
+    className: 'profile-section-collapsible__edit-button',
+    ariaLabel: 'Add social accounts',
+    onClick: event => {
+      return (0, _SocialEditDialog.createSocialEditDialog)(event, store, subject, socialData.accounts, viewerMode, onSaved);
+    },
+    desktopIcon: (0, _litHtml.html)`<span slot="left-icon" class="profile-section-collapsible__action-label profile__add-more-icon" aria-hidden="true">${_profileIcons.addIcon}</span>`,
+    desktopLabel: 'Add More',
+    mobileIcon: (0, _litHtml.html)`<span slot="icon" class="profile-section-collapsible__edit-icon" aria-hidden="true">${_profileIcons.editIcon}</span>`
+  })}
           <solid-ui-button
-            type="button"
-            variant="secondary"
-            size="sm"
-            class="profile__action-button profile-action-text profile-section-collapsible__edit-button"
-            aria-label="Add social accounts"
-            @click=${event => {
-    return (0, _SocialEditDialog.createSocialEditDialog)(event, store, subject, socialData.accounts, viewerMode, onSaved);
-  }}
-          >
-            <span class="profile-section-collapsible__edit-label profile__add-more-content">
-              <span class="profile__add-more-icon" aria-hidden="true">${_profileIcons.addIcon}</span>
-              <span>Add More</span>
-            </span>
-            <span class="profile-section-collapsible__edit-icon" aria-hidden="true">${_profileIcons.editIcon}</span>
-          </solid-ui-button>
-          <solid-ui-button
-            type="button"
-            variant="icon"
-            size="sm"
+            variant="ghost"
             class="profile-section-collapsible__toggle-button"
             aria-label="Toggle social accounts section"
             aria-controls="social-panel"
@@ -199,19 +175,19 @@ function renderOwnerEmptySocialSection(store, subject, socialData, viewerMode, o
         </div>
       </header>
       <div id="social-panel" class="profile-section-collapsible__content">
-        ${renderOwnerEmptySocialContent(store, subject, socialData, viewerMode, onSaved)}
+        ${renderOwnerEmptySocialContent()}
       </div>
     </section>
   `;
 }
-function renderSocialSection(store, subject, socialData, viewerMode, onSaved) {
+function renderSocialSection(store, subject, socialData, viewerMode, layout, onSaved) {
+  const currentLayout = layout || 'desktop';
   const safeSocialData = socialData || {
     accounts: []
   };
   const hasAccounts = Array.isArray(safeSocialData.accounts) && safeSocialData.accounts.length > 0;
   const showOwnerEmptyAccounts = !hasAccounts && viewerMode === 'owner';
-  const showSection = true;
-  return showSection ? (0, _litHtml.html)`
-    ${showOwnerEmptyAccounts ? renderOwnerEmptySocialSection(store, subject, safeSocialData, viewerMode, onSaved) : renderSocialSectionDefault(store, subject, safeSocialData, viewerMode, onSaved)}
-  ` : '';
+  return (0, _litHtml.html)`
+    ${showOwnerEmptyAccounts ? renderOwnerEmptySocialSection(store, subject, safeSocialData, viewerMode, currentLayout, onSaved) : renderSocialSectionDefault(store, subject, safeSocialData, viewerMode, currentLayout, onSaved)}
+  `;
 }

package/lib/specialButtons/addMeToYourFriends.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"addMeToYourFriends.d.ts","sourceRoot":"","sources":["../../src/specialButtons/addMeToYourFriends.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,UAAU,CAAA;AAC/C,OAAO,4BAA4B,CAAA;AACnC,OAAO,KAAK,EAAE,MAAM,IAAI,oBAAoB,EAAE,MAAM,4BAA4B,CAAA;AAChF,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAElD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAM,MAAM,QAAQ,CAAA;AASjD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAErC,OAAO,0BAA0B,CAAA;AAyBjC,QAAA,MAAM,qBAAqB,GACzB,SAAS,SAAS,EAClB,SAAS,kBAAkB,EAC3B,aAAa,UAAU,KACtB,cAkBF,CAAA;AAED,QAAA,MAAM,8BAA8B,GAClC,SAAS,SAAS,EAClB,SAAS,kBAAkB,KAC1B,oBA8DF,CAAA;AAED,iBAAe,YAAY,CACzB,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,kBAAkB,EAC3B,SAAS,EAAE,SAAS,GACnB,OAAO,CAAC,IAAI,CAAC,CAqBf;AAOD,iBAAe,kBAAkB,CAC/B,KAAK,EAAE,SAAS,EAChB,EAAE,EAAE,SAAS,EACb,OAAO,EAAE,SAAS,EAClB,SAAS,EAAE,SAAS,GACnB,OAAO,CAAC,OAAO,CAAC,CAKlB;AAED,OAAO,EACL,qBAAqB,EACrB,8BAA8B,EAC9B,YAAY,EACZ,kBAAkB,EACnB,CAAA"}
+{"version":3,"file":"addMeToYourFriends.d.ts","sourceRoot":"","sources":["../../src/specialButtons/addMeToYourFriends.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,UAAU,CAAA;AAC/C,OAAO,4BAA4B,CAAA;AACnC,OAAO,KAAK,EAAE,MAAM,IAAI,oBAAoB,EAAE,MAAM,4BAA4B,CAAA;AAChF,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAElD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAM,MAAM,QAAQ,CAAA;AASjD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAErC,OAAO,0BAA0B,CAAA;AAyBjC,QAAA,MAAM,qBAAqB,GACzB,SAAS,SAAS,EAClB,SAAS,kBAAkB,EAC3B,aAAa,UAAU,KACtB,cAkBF,CAAA;AAED,QAAA,MAAM,8BAA8B,GAClC,SAAS,SAAS,EAClB,SAAS,kBAAkB,KAC1B,oBA4DF,CAAA;AAED,iBAAe,YAAY,CACzB,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,kBAAkB,EAC3B,SAAS,EAAE,SAAS,GACnB,OAAO,CAAC,IAAI,CAAC,CAqBf;AAOD,iBAAe,kBAAkB,CAC/B,KAAK,EAAE,SAAS,EAChB,EAAE,EAAE,SAAS,EACb,OAAO,EAAE,SAAS,EAClB,SAAS,EAAE,SAAS,GACnB,OAAO,CAAC,OAAO,CAAC,CAKlB;AAED,OAAO,EACL,qBAAqB,EACrB,8BAA8B,EAC9B,YAAY,EACZ,kBAAkB,EACnB,CAAA"}

package/lib/specialButtons/addMeToYourFriends.js

@@ -56,9 +56,7 @@ exports.addMeToYourFriendsDiv = addMeToYourFriendsDiv;
 const createAddMeToYourFriendsButton = (subject, context) => {
   let label = _texts.addMeToYourFriendsButtonText;
   const button = context.dom.createElement('solid-ui-button');
-  button.setAttribute('type', 'button');
   button.setAttribute('variant', 'secondary');
-  button.setAttribute('size', 'sm');
   setAddToFriendsButtonLabel(button, label);
   button.addEventListener('click', setButtonHandler);
   function setButtonHandler(event) {

package/lib/styles/CollapsibleSection.css

@@ -1,13 +1,10 @@
-/* Collapsible section styles for the main profile pane. */
-
-/* Base structure */
 .profile-section-collapsible {
   display: block;
 }
 
 .profile__section--empty.profile-section-collapsible {
-  gap: var(--spacing-lg, 1.5625rem);
-  border-radius: var(--border-radius-md, 0.5rem);
+  gap: 25px;
+  border-radius: 8px;
 }
 
 .profile-section-collapsible__header {
@@ -31,49 +28,22 @@
 
 /* Actions */
 .profile-section-collapsible__actions {
-  --profile-section-collapsible-action-button-text: var(--color-primary, #7C4DFF);
-  --profile-section-collapsible-action-button-hover-background: var(--color-surface-accent-subtle, var(--lavender-300, #e6dcff));
-  --profile-section-collapsible-edit-icon-size: 0.75rem;
-  --profile-section-collapsible-mobile-action-gap: 0.25rem;
-  --profile-section-collapsible-chevron-width: 0.75rem;
-  --profile-section-collapsible-chevron-height: 0.4375rem;
+  --profile-section-collapsible-mobile-action-gap: 4px;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  gap: var(--spacing-xs, 0.75rem);
-  margin-top: -0.25rem;
+  gap: 12px;
+  margin-top: -4px;
 }
 
 .profile-section-collapsible__edit-button {
   min-width: 0;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--border-radius-sm, 0.2rem);
-  --button-border-radius: var(--border-radius-sm, 0.2rem);
 }
 
 .profile-section-collapsible__toggle-button {
   display: none !important;
-  align-items: center;
-  justify-content: center;
-  min-height: auto;
-  min-width: auto;
-  padding: var(--spacing-xxs, 0.3125rem);
-  border-radius: var(--border-radius-sm, 0.2rem);
-  border: none;
-  background: none;
-  color: var(--profile-section-collapsible-action-button-text);
-  cursor: var(--profile-interactive-cursor, pointer);
-  --button-border-radius: var(--border-radius-sm, 0.2rem);
-  --button-height-sm: 0;
-  --button-padding-sm: var(--spacing-xxs, 0.3125rem);
-  --button-background: transparent;
-  --button-border-width: 0;
-  --button-border: transparent;
-  --button-text: var(--profile-section-collapsible-action-button-text);
-  --button-hover-background: var(--profile-section-collapsible-action-button-hover-background);
-  --button-hover-border: transparent;
-  --button-hover-text: var(--profile-section-collapsible-action-button-text);
+  width: var(--solid-ui-clickable-area, 42px);
+  height: var(--solid-ui-clickable-area, 42px);
 }
 
 /* Icons */
@@ -81,18 +51,10 @@
   display: none;
 }
 
-.profile-section-collapsible__edit-icon,
-.profile-section-collapsible__edit-icon svg {
-  line-height: 0;
-}
-
 .profile-section-collapsible__chevron {
-  display: inline-flex;
   flex: 0 0 auto;
-  align-items: center;
-  justify-content: center;
-  width: var(--profile-section-collapsible-chevron-width);
-  height: var(--profile-section-collapsible-chevron-height);
+  width: 0.75rem;
+  height: 0.4375rem;
   line-height: 0;
   transition: transform var(--animation-duration, 0.2s) ease;
 }
@@ -104,14 +66,7 @@
 }
 
 .profile-section-collapsible__edit-icon--add svg path {
-  fill: var(--color-text-strong, var(--gray-800, #1E2939)) !important;
-  stroke: var(--color-text-strong, var(--gray-800, #1E2939)) !important;
-}
-
-.profile-section-collapsible__edit-icon--projects svg path {
-  stroke-width: 1.714px !important;
-  stroke: var(--color-text-strong, var(--gray-800, #1E2939)) !important;
-  fill: none !important;
+  fill: var(--solid-ui-color-gray-800, #1E2939) !important;
 }
 
 /* App-driven mobile layout when the host/root explicitly sets data-layout. */
@@ -129,82 +84,39 @@
   flex: 0 0 auto;
 }
 
-:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible__edit-button,
-:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button {
-  --button-background: transparent;
-  --button-border-width: 0;
-  --button-border: transparent;
-  --button-text: var(--profile-section-collapsible-action-button-text);
-  --button-hover-background: var(--profile-section-collapsible-action-button-hover-background);
-  --button-hover-border: transparent;
-  --button-hover-text: var(--profile-section-collapsible-action-button-text);
-}
-
 :is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button {
   display: inline-flex !important;
   order: 1;
 }
 
-:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button,
-:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible[data-expanded="true"] .profile-section-collapsible__edit-button,
-:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible__toggle-button {
-  min-width: var(--min-touch-target, 44px);
-  min-height: var(--min-touch-target, 44px);
-  --button-width-sm: var(--min-touch-target, 44px);
-  --button-height-sm: var(--min-touch-target, 44px);
-}
-
-:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] solid-ui-button.profile-section-collapsible__edit-button::part(button) {
-  width: var(--min-touch-target, 44px);
-  min-width: var(--min-touch-target, 44px);
-}
-
-:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] solid-ui-button.profile-action-text.profile-section-collapsible__edit-button::part(button):hover,
-:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] solid-ui-button.profile-action-text.profile-section-collapsible__edit-button::part(button):focus,
-:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] solid-ui-button.profile-action-text.profile-section-collapsible__edit-button::part(button):focus-visible {
-  background: var(--profile-section-collapsible-action-button-hover-background);
-  text-decoration: none;
-}
-
-:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] solid-ui-button.profile-action-text.profile-section-collapsible__edit-button {
-  --button-hover-background: var(--profile-section-collapsible-action-button-hover-background);
-}
-
-:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button:active,
-:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button:focus,
-:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button:focus-visible {
-  border: none !important;
-  outline: none !important;
-  box-shadow: none !important;
-  background: transparent !important;
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible__actions.flex-column {
+  gap: var(--profile-section-collapsible-mobile-action-gap);
 }
 
 :is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__toggle-button {
   order: 2;
 }
 
-:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible[data-expanded="false"] .profile-section-collapsible__content {
-  display: none;
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible__edit-button,
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible__toggle-button {
+  width: var(--solid-ui-clickable-area, 42px);
+  height: var(--solid-ui-clickable-area, 42px);
 }
 
-:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible__actions.flex-column {
-  gap: var(--profile-section-collapsible-mobile-action-gap);
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible[data-expanded="false"] .profile-section-collapsible__content {
+  display: none;
 }
 
 :is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible[data-expanded="true"] .profile-section-collapsible__chevron {
   transform: rotate(180deg);
 }
 
-:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible__edit-label {
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible__action-label {
   display: none !important;
 }
 
 :is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible__edit-icon {
   display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--profile-section-collapsible-edit-icon-size);
-  height: var(--profile-section-collapsible-edit-icon-size);
 }
 
 :is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible .profile-section-collapsible__edit-button {
@@ -230,7 +142,7 @@
     display: block;
   }
 
-  .profile-section-collapsible__edit-label svg,
+  .profile-section-collapsible__action-label svg,
   .profile__action-icon svg {
     width: 0.75rem;
     height: 0.75rem;
@@ -238,15 +150,11 @@
     top: 0;
   }
 
-  .profile-section-collapsible__edit-label {
-    color: var(--profile-section-collapsible-action-button-text);
-  }
-
-  .profile-section-collapsible__edit-label svg path {
+  .profile-section-collapsible__action-label svg path {
     fill: currentColor;
   }
 
-  .profile-section-collapsible__edit-label {
+  .profile-section-collapsible__action-label {
     display: inline-flex;
     align-items: center;
     gap: var(--spacing-xxs, 0.3125rem);
@@ -264,7 +172,7 @@
     display: block;
   }
 
-  .profile-section-collapsible__edit-label svg,
+  .profile-section-collapsible__action-label svg,
   .profile__action-icon svg {
     width: 0.75rem;
     height: 0.75rem;
@@ -272,15 +180,11 @@
     top: 0;
   }
 
-  .profile-section-collapsible__edit-label {
-    color: var(--profile-section-collapsible-action-button-text);
-  }
-
-  .profile-section-collapsible__edit-label svg path {
+  .profile-section-collapsible__action-label svg path {
     fill: currentColor;
   }
 
-  .profile-section-collapsible__edit-label {
+  .profile-section-collapsible__action-label {
     display: inline-flex;
     align-items: center;
     gap: var(--spacing-xxs, 0.3125rem);
@@ -308,61 +212,21 @@
     flex: 0 0 auto;
   }
 
-  .profile-section-collapsible__edit-button,
-  .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button {
-    --button-background: transparent;
-    --button-border-width: 0;
-    --button-border: transparent;
-    --button-text: var(--profile-section-collapsible-action-button-text);
-    --button-hover-background: var(--profile-section-collapsible-action-button-hover-background);
-    --button-hover-border: transparent;
-    --button-hover-text: var(--profile-section-collapsible-action-button-text);
-  }
-
   .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button {
     display: inline-flex !important;
     order: 1;
   }
 
-  .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button,
-  .profile-section-collapsible[data-expanded="true"] .profile-section-collapsible__edit-button,
-  .profile-section-collapsible__toggle-button {
-    min-width: var(--min-touch-target, 44px);
-    min-height: var(--min-touch-target, 44px);
-    --button-width-sm: var(--min-touch-target, 44px);
-    --button-height-sm: var(--min-touch-target, 44px);
-  }
-
-  .profile-section-collapsible--inline-mobile-actions solid-ui-button.profile-section-collapsible__edit-button::part(button),
-  .profile-section-collapsible[data-expanded="true"] solid-ui-button.profile-section-collapsible__edit-button::part(button) {
-    width: var(--min-touch-target, 44px);
-    min-width: var(--min-touch-target, 44px);
-  }
-
-  solid-ui-button.profile-action-text.profile-section-collapsible__edit-button::part(button):hover,
-  solid-ui-button.profile-action-text.profile-section-collapsible__edit-button::part(button):focus,
-  solid-ui-button.profile-action-text.profile-section-collapsible__edit-button::part(button):focus-visible {
-    background: var(--profile-section-collapsible-action-button-hover-background);
-    text-decoration: none;
-  }
-
-  solid-ui-button.profile-action-text.profile-section-collapsible__edit-button {
-    --button-hover-background: var(--profile-section-collapsible-action-button-hover-background);
-  }
-
-  .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button:active,
-  .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button:focus,
-  .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button:focus-visible {
-    border: none !important;
-    outline: none !important;
-    box-shadow: none !important;
-    background: transparent !important;
-  }
-
   .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__toggle-button {
     order: 2;
   }
 
+  .profile-section-collapsible__edit-button,
+  .profile-section-collapsible__toggle-button {
+    width: var(--solid-ui-clickable-area, 42px);
+    height: var(--solid-ui-clickable-area, 42px);
+  }
+
   .profile-section-collapsible[data-expanded="false"] .profile-section-collapsible__content {
     display: none;
   }
@@ -375,16 +239,12 @@
     transform: rotate(180deg);
   }
 
-  .profile-section-collapsible__edit-label {
+  .profile-section-collapsible__action-label {
     display: none !important;
   }
 
   .profile-section-collapsible__edit-icon {
     display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--profile-section-collapsible-edit-icon-size);
-    height: var(--profile-section-collapsible-edit-icon-size);
   }
 
   .profile-section-collapsible .profile-section-collapsible__edit-button {
@@ -421,61 +281,21 @@
     flex: 0 0 auto;
   }
 
-  .profile-section-collapsible__edit-button,
-  .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button {
-    --button-background: transparent;
-    --button-border-width: 0;
-    --button-border: transparent;
-    --button-text: var(--profile-section-collapsible-action-button-text);
-    --button-hover-background: var(--profile-section-collapsible-action-button-hover-background);
-    --button-hover-border: transparent;
-    --button-hover-text: var(--profile-section-collapsible-action-button-text);
-  }
-
   .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button {
     display: inline-flex !important;
     order: 1;
   }
 
-  .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button,
-  .profile-section-collapsible[data-expanded="true"] .profile-section-collapsible__edit-button,
-  .profile-section-collapsible__toggle-button {
-    min-width: var(--min-touch-target, 44px);
-    min-height: var(--min-touch-target, 44px);
-    --button-width-sm: var(--min-touch-target, 44px);
-    --button-height-sm: var(--min-touch-target, 44px);
-  }
-
-  .profile-section-collapsible--inline-mobile-actions solid-ui-button.profile-section-collapsible__edit-button::part(button),
-  .profile-section-collapsible[data-expanded="true"] solid-ui-button.profile-section-collapsible__edit-button::part(button) {
-    width: var(--min-touch-target, 44px);
-    min-width: var(--min-touch-target, 44px);
-  }
-
-  solid-ui-button.profile-action-text.profile-section-collapsible__edit-button::part(button):hover,
-  solid-ui-button.profile-action-text.profile-section-collapsible__edit-button::part(button):focus,
-  solid-ui-button.profile-action-text.profile-section-collapsible__edit-button::part(button):focus-visible {
-    background: var(--profile-section-collapsible-action-button-hover-background);
-    text-decoration: none;
-  }
-
-  solid-ui-button.profile-action-text.profile-section-collapsible__edit-button {
-    --button-hover-background: var(--profile-section-collapsible-action-button-hover-background);
-  }
-
-  .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button:active,
-  .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button:focus,
-  .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button:focus-visible {
-    border: none !important;
-    outline: none !important;
-    box-shadow: none !important;
-    background: transparent !important;
-  }
-
   .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__toggle-button {
     order: 2;
   }
 
+  .profile-section-collapsible__edit-button,
+  .profile-section-collapsible__toggle-button {
+    width: var(--solid-ui-clickable-area, 42px);
+    height: var(--solid-ui-clickable-area, 42px);
+  }
+
   .profile-section-collapsible[data-expanded="false"] .profile-section-collapsible__content {
     display: none;
   }
@@ -488,16 +308,12 @@
     transform: rotate(180deg);
   }
 
-  .profile-section-collapsible__edit-label {
+  .profile-section-collapsible__action-label {
     display: none !important;
   }
 
   .profile-section-collapsible__edit-icon {
     display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--profile-section-collapsible-edit-icon-size);
-    height: var(--profile-section-collapsible-edit-icon-size);
   }
 
   .profile-section-collapsible .profile-section-collapsible__edit-button {