profile-pane 3.2.0 → 3.2.2-test.0

package/lib/sections/heading/HeadingSection.css

@@ -0,0 +1,862 @@
+.profile__avatar {
+  flex: 0 0 auto;
+  grid-area: avatar;
+}
+
+/* Header grid */
+.profile__heading-top {
+  --profile-heading-header-bar-gap: 0.125rem;
+  --profile-heading-desktop-details-offset: var(--spacing-lg, 1.5625rem);
+  --profile-heading-desktop-detail-row-gap: var(--spacing-xxs, 0.3125rem);
+  --profile-heading-identity-inline-gap: 0.4375rem;
+  --profile-heading-name-offset-x: -4px;
+  --profile-heading-detail-column-gap: 2rem;
+  --profile-heading-detail-grid-column-gap: clamp(0.75rem, 2vw, 1.5rem);
+  --profile-heading-detail-grid-max-width: 34rem;
+  --profile-heading-detail-icon-size: var(--icon-xxs, 1rem);
+  --profile-heading-prefix-icon-gap: 0.125rem;
+  --profile-heading-action-item-flex: 0 0 auto;
+  --profile-heading-action-label-font-size: inherit;
+  --profile-heading-action-label-white-space: normal;
+  --profile-heading-action-contact-icon-size: var(--icon-xxs, 1rem);
+  --profile-heading-action-contact-icon-gap: var(--spacing-xxs, 0.3125rem);
+  --profile-heading-action-full-label-display: inline;
+  --profile-heading-action-short-label-display: none;
+  --profile-heading-medium-column-gap: var(--spacing-sm, 0.75rem);
+  --profile-heading-hero-size: 8.75rem;
+  --profile-heading-hero-alt-padding-inline: 2.275rem;
+  --profile-heading-medium-hero-size: 6.5rem;
+  --profile-heading-medium-hero-alt-padding-inline: 1.6875rem;
+  --profile-heading-medium-action-gap: 0.25rem;
+  --profile-heading-medium-button-padding: 0.3125rem 0.5625rem;
+  --profile-heading-medium-button-padding-x: 0.5625rem;
+  --profile-heading-medium-button-font-size: var(--font-size-xs, 0.8125rem);
+  --profile-heading-medium-contact-icon-size: 0.6875rem;
+  --profile-heading-medium-contact-icon-gap: 0.25rem;
+  --profile-heading-medium-actions-max-inline-size: 10.5rem;
+  --profile-heading-narrow-column-gap: 0.5rem;
+  --profile-heading-narrow-action-gap: 0.25rem;
+  --profile-heading-narrow-actions-justify-self: center;
+  --profile-heading-narrow-actions-margin-left: auto;
+  --profile-heading-narrow-actions-margin-right: auto;
+  --profile-heading-narrow-actions-justify-content: center;
+  --profile-heading-compact-column-gap: 0.5rem;
+  --profile-heading-compact-row-gap: var(--spacing-sm, 0.75rem);
+  --profile-heading-compact-action-gap: 0.25rem;
+  --profile-heading-compact-actions-justify-self: start;
+  --profile-heading-compact-actions-margin-left: 0;
+  --profile-heading-compact-actions-margin-right: auto;
+  --profile-heading-compact-actions-justify-content: flex-start;
+  --profile-heading-secondary-edit-justify-self: end;
+  --profile-heading-secondary-edit-align-self: flex-start;
+  --profile-heading-secondary-edit-margin-left: auto;
+  --profile-heading-secondary-edit-margin-right: 0;
+  --profile-heading-secondary-edit-justify-content: flex-end;
+  --profile-heading-compact-button-padding: 0.25rem 0.3125rem;
+  --profile-heading-compact-button-padding-x: 0.3125rem;
+  --profile-heading-compact-button-font-size: var(--font-size-xxs, 0.75rem);
+  --profile-heading-compact-contact-icon-size: 0.625rem;
+  --profile-heading-compact-contact-icon-gap: 0.1875rem;
+  --profile-heading-compact-button-hover-background: var(--color-primary, #7C4DFF);
+  --profile-heading-compact-button-hover-border: var(--color-primary, #7C4DFF);
+  --profile-heading-compact-button-hover-text: var(--color-text-on-action, var(--white, #FFF));
+  --profile-heading-compact-detail-column-gap: 0.25rem;
+  --profile-heading-compact-detail-size: var(--profile-mobile-header-detail-size, var(--font-size-xxs, 0.75rem));
+  --profile-heading-compact-details-gap: var(--spacing-xs, 0.5rem);
+  --profile-heading-compact-identity-gap: 0.125rem;
+  --profile-heading-compact-hero-icon-size: 3rem;
+  --profile-heading-compact-image-size: var(--profile-mobile-header-image-size, 4.375rem);
+  --profile-heading-compact-name-size: var(--profile-mobile-header-name-size, var(--font-size-xl, 1.375rem));
+  --profile-heading-compact-name-line-height: 1.15;
+  --profile-heading-compact-pronouns-size: var(--profile-mobile-header-pronouns-size, var(--font-size-2xs, 0.6875rem));
+  --profile-heading-compact-pronouns-line-height: 1.1;
+  --profile-heading-compact-role-size: var(--profile-mobile-header-job-title-size, var(--font-size-md, 1rem));
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto auto;
+  grid-template-areas:
+    "avatar info actions edit"
+    "avatar details details details";
+  column-gap: var(--spacing-md, 1.25rem);
+  row-gap: var(--profile-heading-desktop-details-offset, var(--spacing-lg, 1.5625rem));
+  align-items: start;
+  width: 100%;
+}
+
+.profile__name {
+  display: block;
+  color: var(--color-text-heading, #000);
+  font-size: var(--font-size-xxl, 1.75rem); /* 28px */
+  font-weight: var(--font-weight-bold, 600);
+  margin: 0;
+  padding: 0;
+  text-indent: 0;
+  line-height: 1.2;
+  text-align: left;
+  overflow-wrap: anywhere;
+  transform: translateX(var(--profile-heading-name-offset-x, -4px));
+}
+
+.profile__info {
+  display: flex;
+  flex-direction: column;
+  grid-area: info;
+  flex: 1 1 auto;
+  min-width: 0;
+  align-items: flex-start;
+}
+
+.profile__details {
+  grid-area: details;
+  color: var(--color-text-secondary, #4A5565);
+  font-size: var(--font-size-sm, 0.875rem); /* 14px */
+  display: flex;
+  width: 100%;
+  align-content: flex-start;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: var(--profile-heading-desktop-detail-row-gap, var(--spacing-xxs, 0.3125rem)) var(--profile-heading-detail-column-gap, 2rem);
+}
+
+.profile__info > .profile__header-bar {
+  margin-left: 0;
+  padding-left: 0;
+  align-self: stretch;
+}
+
+.profile__header-bar {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--profile-heading-header-bar-gap, 0.125rem);
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.profile__actions {
+  color: var(--color-text-secondary, #4A5565);
+  font-size: var(--font-size-base, 1rem);
+  margin-bottom: var(--spacing-xs, 0.75rem);
+}
+
+.profile__heading-actions {
+  grid-area: actions;
+  margin-left: auto;
+  margin-bottom: 0;
+  align-self: flex-start;
+  justify-self: end;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-xs, 0.5rem);
+  flex-wrap: wrap;
+}
+
+.profile__heading-actions .profile__btn-friends-label,
+.profile__heading-actions #add-to-contacts-button-container .profile__btn-contacts-label {
+  font-size: var(--profile-heading-action-label-font-size, inherit);
+  white-space: var(--profile-heading-action-label-white-space, normal);
+}
+
+.profile__heading-actions #add-to-contacts-button-container .profile__btn-contacts-icon,
+.profile__heading-actions #add-to-contacts-button-container .profile__btn-contacts-icon svg {
+  width: var(--profile-heading-action-contact-icon-size, var(--icon-xxs, 1rem));
+  height: var(--profile-heading-action-contact-icon-size, var(--icon-xxs, 1rem));
+}
+
+.profile__heading-actions #add-to-contacts-button-container .profile__btn-contacts-icon {
+  margin-right: var(--profile-heading-action-contact-icon-gap, var(--spacing-xxs, 0.3125rem));
+}
+
+.profile__heading-actions solid-ui-button.profile__btn-friends[data-friends-short-label='true'] .profile__btn-friends-label--full {
+  display: var(--profile-heading-action-full-label-display, inline);
+}
+
+.profile__heading-actions solid-ui-button.profile__btn-friends[data-friends-short-label='true'] .profile__btn-friends-label--short {
+  display: var(--profile-heading-action-short-label-display, none);
+}
+
+.profile__heading-edit-action {
+  grid-area: edit;
+  margin-left: auto;
+  margin-right: var(--profile-heading-secondary-edit-margin-right, 0);
+  margin-bottom: 0;
+  align-self: flex-start;
+  justify-self: end;
+  display: flex;
+  justify-content: var(--profile-heading-secondary-edit-justify-content, flex-end);
+  align-items: flex-start;
+  padding: 0;
+}
+
+.profile__heading-actions > .profile-friends-button__section,
+.profile__heading-actions > #add-to-contacts-button-container {
+  width: auto;
+  min-width: 0;
+  flex: var(--profile-heading-action-item-flex, 0 0 auto);
+}
+
+.profile__heading-actions > #add-to-contacts-button-container {
+  display: none !important;
+}
+
+.profile__heading-actions > .profile-friends-button__section > solid-ui-button.profile__btn-friends,
+.profile__heading-actions > #add-to-contacts-button-container > solid-ui-button.profile__btn-contacts {
+  width: auto;
+  max-width: 100%;
+}
+
+.profile__heading-action-button {
+  position: static;
+  min-width: 0;
+  width: auto;
+  max-width: none;
+  padding: 0;
+  --button-padding-sm: 0;
+}
+
+.profile__heading-edit-action > solid-ui-button.profile__heading-action-button::part(button) {
+  padding: 0;
+}
+
+/* Identity details */
+.profile__identity {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  gap: var(--profile-heading-identity-inline-gap, 0.4375rem);
+  justify-content: flex-start;
+  width: 100%;
+  flex-wrap: nowrap;
+}
+
+.profile__pronouns {
+  color: var(--color-text-secondary, #4A5565);
+  font-size: var(--font-size-sm, 0.875rem); /* 14px */
+  font-weight: var(--font-weight-regular, 400);
+  line-height: 1.2;
+}
+
+.profile__role-org {
+  margin: 0;
+  width: 100%;
+  white-space: normal;
+  color: var(--color-text-subheading, #101828);
+  font-size: var(--font-size-lg, 1.125rem);
+  font-weight: var(--font-weight-md, 500);
+  line-height: 1.25;
+  text-align: left;
+}
+
+.profile__meta-row,
+.profile__contact-row {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  justify-content: flex-start;
+  column-gap: var(--profile-heading-detail-grid-column-gap, clamp(0.75rem, 2vw, 1.5rem));
+  row-gap: var(--spacing-xs, 0.5rem);
+  align-items: start;
+  margin: 0;
+  padding: 0;
+  width: min(100%, var(--profile-heading-detail-grid-max-width, 34rem));
+  max-width: 100%;
+}
+
+.profile__meta-row .profile__item,
+.profile__contact-row .profile__item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2xs, 0.625rem);
+  min-width: 0;
+}
+
+.profile__meta-row .profile__value,
+.profile__contact-row .profile__value,
+.profile__meta-row .profile__value-text,
+.profile__contact-row .profile__value-text {
+  min-width: 0;
+  white-space: normal !important;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.profile__meta-row .profile__value,
+.profile__contact-row .profile__value {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-xxs, 0.3125rem);
+}
+
+.profile__prefix-icon {
+  display: inline-flex;
+  align-items: center;
+  margin-right: var(--profile-heading-prefix-icon-gap, 0.125rem);
+}
+
+.profile__detail-icon {
+  display: block;
+  width: var(--profile-heading-detail-icon-size, var(--icon-xxs, 1rem));
+  height: var(--profile-heading-detail-icon-size, var(--icon-xxs, 1rem));
+}
+
+.profile__hero,
+.profile__hero-alt {
+  width: var(--profile-heading-hero-size, 8.75rem);
+  height: var(--profile-heading-hero-size, 8.75rem);
+  border-radius: var(--border-radius-full, 0.625rem); /* 10px */
+}
+
+.profile__image-frame:not(.profile__image-frame--fallback) .profile__hero-alt {
+  display: none;
+}
+
+.profile__image-frame--fallback .profile__hero {
+  display: none;
+}
+
+/* Profile image */
+.profile__hero {
+  border: var(--border-width-sm, 0.1rem) solid var(--color-primary, #7C4DFF);
+  background: var(--color-surface-placeholder, var(--gray-300, #D1D5DC)) 50% / cover no-repeat;
+  background-position: 50%;
+  object-fit: cover;
+  object-position: center;
+}
+
+.profile__hero-alt {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 var(--profile-heading-hero-alt-padding-inline, 2.275rem);
+  border: var(--border-width-sm, 0.1rem) dashed var(--color-border-lighter, var(--slate-200, #E2E8F0));
+  background: var(--color-surface-overlay-header, #F8FAFC);
+  box-sizing: border-box;
+}
+
+/* Counteracts mashlib alignment so the placeholder icon stays centered. */
+.profile__hero-alt .profile__hero-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+
+.profile__hero-alt .profile__hero-icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/* Responsive: medium widths */
+@media (max-width: 1200px) {
+  .profile__heading-top {
+    column-gap: var(--profile-heading-medium-column-gap, var(--spacing-sm, 0.75rem));
+  }
+
+  .profile__hero,
+  .profile__hero-alt {
+    width: var(--profile-heading-medium-hero-size, 6.5rem);
+    height: var(--profile-heading-medium-hero-size, 6.5rem);
+  }
+
+  .profile__hero-alt {
+    padding: 0 var(--profile-heading-medium-hero-alt-padding-inline, 1.6875rem);
+  }
+
+  .profile__heading-actions {
+    --profile-heading-action-item-flex: 0 1 auto;
+    --profile-heading-action-label-font-size: var(--profile-heading-medium-button-font-size);
+    --profile-heading-action-contact-icon-size: var(--profile-heading-medium-contact-icon-size);
+    --profile-heading-action-contact-icon-gap: var(--profile-heading-medium-contact-icon-gap);
+    justify-self: end;
+    margin-bottom: 0;
+    max-inline-size: var(--profile-heading-medium-actions-max-inline-size, 10.5rem);
+    justify-content: flex-end;
+    align-items: flex-start;
+    align-content: flex-end;
+    gap: var(--profile-heading-medium-action-gap, 0.25rem);
+  }
+  .profile__heading-actions > .profile-friends-button__section > solid-ui-button.profile__btn-friends,
+  .profile__heading-actions > #add-to-contacts-button-container > solid-ui-button.profile__btn-contacts {
+    --button-padding-sm: var(--profile-heading-medium-button-padding, 0.3125rem 0.5625rem);
+    --button-padding-x-sm: var(--profile-heading-medium-button-padding-x, 0.5625rem);
+    --button-font-size-sm: var(--profile-heading-medium-button-font-size, var(--font-size-xs, 0.8125rem));
+  }
+
+}
+
+@container profile-pane (max-width: 1200px) {
+  .profile__heading-top {
+    column-gap: var(--profile-heading-medium-column-gap, var(--spacing-sm, 0.75rem));
+  }
+
+  .profile__hero,
+  .profile__hero-alt {
+    width: var(--profile-heading-medium-hero-size, 6.5rem);
+    height: var(--profile-heading-medium-hero-size, 6.5rem);
+  }
+
+  .profile__hero-alt {
+    padding: 0 var(--profile-heading-medium-hero-alt-padding-inline, 1.6875rem);
+  }
+
+  .profile__heading-actions {
+    --profile-heading-action-item-flex: 0 1 auto;
+    --profile-heading-action-label-font-size: var(--profile-heading-medium-button-font-size);
+    --profile-heading-action-contact-icon-size: var(--profile-heading-medium-contact-icon-size);
+    --profile-heading-action-contact-icon-gap: var(--profile-heading-medium-contact-icon-gap);
+    justify-self: end;
+    margin-bottom: 0;
+    max-inline-size: var(--profile-heading-medium-actions-max-inline-size, 10.5rem);
+    justify-content: flex-end;
+    align-items: flex-start;
+    align-content: flex-end;
+    gap: var(--profile-heading-medium-action-gap, 0.25rem);
+  }
+  .profile__heading-actions > .profile-friends-button__section > solid-ui-button.profile__btn-friends,
+  .profile__heading-actions > #add-to-contacts-button-container > solid-ui-button.profile__btn-contacts {
+    --button-padding-sm: var(--profile-heading-medium-button-padding, 0.3125rem 0.5625rem);
+    --button-padding-x-sm: var(--profile-heading-medium-button-padding-x, 0.5625rem);
+    --button-font-size-sm: var(--profile-heading-medium-button-font-size, var(--font-size-xs, 0.8125rem));
+  }
+
+}
+
+@media (max-width: 768px) {
+  .profile__heading-top {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    grid-template-areas:
+      "avatar info edit"
+      "details details details"
+      "actions actions actions";
+    column-gap: var(--profile-heading-narrow-column-gap, 0.5rem);
+    row-gap: var(--spacing-sm, 0.75rem);
+  }
+
+  .profile__heading-actions {
+    justify-self: var(--profile-heading-narrow-actions-justify-self, center);
+    margin-left: var(--profile-heading-narrow-actions-margin-left, auto);
+    margin-right: var(--profile-heading-narrow-actions-margin-right, auto);
+    max-inline-size: none;
+    justify-content: var(--profile-heading-narrow-actions-justify-content, center);
+    align-items: center;
+    align-content: center;
+    gap: var(--profile-heading-narrow-action-gap, 0.25rem);
+    flex-wrap: nowrap;
+  }
+
+  .profile__heading-edit-action > solid-ui-button.profile__heading-action-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);
+    --button-background: transparent;
+    --button-border-width: 0;
+    --button-border: transparent;
+    --button-text: var(--profile-section-collapsible-action-button-text, var(--color-primary, #7C4DFF));
+    --button-hover-background: var(--profile-section-collapsible-action-button-hover-background, var(--color-surface-accent-subtle, var(--lavender-300, #e6dcff)));
+    --button-hover-border: transparent;
+    --button-hover-text: var(--profile-section-collapsible-action-button-text, var(--color-primary, #7C4DFF));
+  }
+
+  .profile__heading-edit-action > solid-ui-button.profile__heading-action-button::part(button):hover,
+  .profile__heading-edit-action > solid-ui-button.profile__heading-action-button::part(button):focus,
+  .profile__heading-edit-action > solid-ui-button.profile__heading-action-button::part(button):focus-visible {
+    background: var(--profile-section-collapsible-action-button-hover-background, var(--color-surface-accent-subtle, var(--lavender-300, #e6dcff)));
+    text-decoration: none;
+  }
+
+}
+
+@container profile-pane (max-width: 768px) {
+  .profile__heading-top {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    grid-template-areas:
+      "avatar info edit"
+      "details details details"
+      "actions actions actions";
+    column-gap: var(--profile-heading-narrow-column-gap, 0.5rem);
+    row-gap: var(--spacing-sm, 0.75rem);
+  }
+
+  .profile__heading-actions {
+    justify-self: var(--profile-heading-narrow-actions-justify-self, center);
+    margin-left: var(--profile-heading-narrow-actions-margin-left, auto);
+    margin-right: var(--profile-heading-narrow-actions-margin-right, auto);
+    max-inline-size: none;
+    justify-content: var(--profile-heading-narrow-actions-justify-content, center);
+    align-items: center;
+    align-content: center;
+    gap: var(--profile-heading-narrow-action-gap, 0.25rem);
+    flex-wrap: nowrap;
+  }
+
+  .profile__heading-edit-action > solid-ui-button.profile__heading-action-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);
+    --button-background: transparent;
+    --button-border-width: 0;
+    --button-border: transparent;
+    --button-text: var(--profile-section-collapsible-action-button-text, var(--color-primary, #7C4DFF));
+    --button-hover-background: var(--profile-section-collapsible-action-button-hover-background, var(--color-surface-accent-subtle, var(--lavender-300, #e6dcff)));
+    --button-hover-border: transparent;
+    --button-hover-text: var(--profile-section-collapsible-action-button-text, var(--color-primary, #7C4DFF));
+  }
+
+  .profile__heading-edit-action > solid-ui-button.profile__heading-action-button::part(button):hover,
+  .profile__heading-edit-action > solid-ui-button.profile__heading-action-button::part(button):focus,
+  .profile__heading-edit-action > solid-ui-button.profile__heading-action-button::part(button):focus-visible {
+    background: var(--profile-section-collapsible-action-button-hover-background, var(--color-surface-accent-subtle, var(--lavender-300, #e6dcff)));
+    text-decoration: none;
+  }
+
+}
+/* Responsive: compact widths */
+/* layout = mobile */
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__heading-top {
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  grid-template-areas:
+    "avatar info edit"
+    "details details details"
+    "actions actions actions";
+  column-gap: var(--profile-heading-compact-column-gap, 0.5rem);
+  row-gap: var(--profile-heading-compact-row-gap, var(--spacing-sm, 0.75rem));
+}
+
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__info {
+  grid-column: 2 / -1;
+  align-self: stretch;
+  justify-content: flex-end;
+}
+
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__avatar {
+  align-self: flex-end;
+}
+
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__heading-actions {
+  --profile-heading-action-item-flex: 0 1 auto;
+  --profile-heading-action-label-font-size: var(--profile-heading-compact-button-font-size);
+  --profile-heading-action-label-white-space: nowrap;
+  --profile-heading-action-contact-icon-size: var(--profile-heading-compact-contact-icon-size);
+  --profile-heading-action-contact-icon-gap: var(--profile-heading-compact-contact-icon-gap);
+  --profile-heading-action-full-label-display: none;
+  --profile-heading-action-short-label-display: inline;
+  justify-self: var(--profile-heading-compact-actions-justify-self, start);
+  margin-left: var(--profile-heading-compact-actions-margin-left, 0);
+  margin-right: var(--profile-heading-compact-actions-margin-right, auto);
+  max-inline-size: none;
+  justify-content: var(--profile-heading-compact-actions-justify-content, flex-start);
+  align-items: center;
+  align-content: center;
+  gap: var(--profile-heading-compact-action-gap, 0.25rem);
+  flex-wrap: nowrap;
+}
+
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__heading-edit-action > solid-ui-button.profile__heading-action-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);
+  --button-background: transparent;
+  --button-border-width: 0;
+  --button-border: transparent;
+  --button-text: var(--profile-section-collapsible-action-button-text, var(--color-primary, #7C4DFF));
+  --button-hover-background: var(--profile-section-collapsible-action-button-hover-background, var(--color-surface-accent-subtle, var(--lavender-300, #e6dcff)));
+  --button-hover-border: transparent;
+  --button-hover-text: var(--profile-section-collapsible-action-button-text, var(--color-primary, #7C4DFF));
+}
+
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__heading-edit-action > solid-ui-button.profile__heading-action-button::part(button):hover,
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__heading-edit-action > solid-ui-button.profile__heading-action-button::part(button):focus,
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__heading-edit-action > solid-ui-button.profile__heading-action-button::part(button):focus-visible {
+  background: var(--profile-section-collapsible-action-button-hover-background, var(--color-surface-accent-subtle, var(--lavender-300, #e6dcff)));
+  text-decoration: none;
+}
+
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__heading-actions > .profile-friends-button__section > solid-ui-button.profile__btn-friends,
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__heading-actions > #add-to-contacts-button-container > solid-ui-button.profile__btn-contacts {
+  min-width: 0;
+  inline-size: auto;
+  min-height: var(--button-height-sm, 1.75rem);
+  --button-padding-sm: var(--profile-heading-compact-button-padding, 0.25rem 0.3125rem);
+  --button-padding-x-sm: var(--profile-heading-compact-button-padding-x, 0.3125rem);
+  --button-font-size-sm: var(--profile-heading-compact-button-font-size, var(--font-size-xxs, 0.75rem));
+  --button-hover-background: var(--profile-heading-compact-button-hover-background, var(--color-primary, #7C4DFF));
+  --button-hover-border: var(--profile-heading-compact-button-hover-border, var(--color-primary, #7C4DFF));
+  --button-hover-text: var(--profile-heading-compact-button-hover-text, var(--color-text-on-action, var(--white, #FFF)));
+}
+
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__heading-actions > #add-to-contacts-button-container > solid-ui-button.profile__btn-contacts {
+  --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)));
+}
+
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__name {
+  display: inline;
+  font-size: var(--profile-heading-compact-name-size, var(--profile-mobile-header-name-size, var(--font-size-xl, 1.375rem)));
+  line-height: var(--profile-heading-compact-name-line-height, 1.15);
+}
+
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__identity {
+  display: flow-root;
+}
+
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__identity::before {
+  content: '';
+  float: right;
+  width: calc(var(--profile-heading-mobile-edit-rail-width, 2.75rem) + var(--profile-heading-mobile-edit-rail-gap, var(--spacing-xxs, 0.3125rem)));
+  height: var(--profile-heading-mobile-identity-rail-height, 2rem);
+}
+
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__pronouns {
+  font-size: var(--profile-heading-compact-pronouns-size, var(--profile-mobile-header-pronouns-size, 0.6875rem));
+  line-height: var(--profile-heading-compact-pronouns-line-height, 1.1);
+  margin-left: var(--profile-heading-compact-identity-gap, 0.125rem);
+  white-space: nowrap;
+}
+
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__role-org {
+  font-size: var(--profile-heading-compact-role-size, var(--profile-mobile-header-job-title-size, var(--font-size-md, 1rem)));
+}
+
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__hero,
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__hero-alt {
+  width: var(--profile-heading-compact-image-size, var(--profile-mobile-header-image-size, 4.375rem));
+  height: var(--profile-heading-compact-image-size, var(--profile-mobile-header-image-size, 4.375rem));
+  aspect-ratio: 1 / 1;
+}
+
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__hero-alt {
+  padding: 0;
+}
+
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__image-frame--fallback .profile__hero-alt {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__hero-icon {
+  display: block;
+  margin: 0 auto;
+  width: var(--profile-heading-compact-hero-icon-size, 3rem);
+  height: var(--profile-heading-compact-hero-icon-size, 3rem);
+}
+
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__details {
+  font-size: var(--profile-heading-compact-detail-size, var(--profile-mobile-header-detail-size, var(--font-size-xxs, 0.75rem)));
+  gap: var(--profile-heading-compact-details-gap, var(--spacing-xs, 0.5rem));
+}
+
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__meta-row,
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__contact-row {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  column-gap: var(--profile-heading-compact-detail-column-gap, 0.25rem);
+}
+
+@media (max-width: 576px) {
+  .profile__heading-top {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    grid-template-areas:
+      "avatar info edit"
+      "details details details"
+      "actions actions actions";
+    column-gap: var(--profile-heading-compact-column-gap, 0.5rem);
+    row-gap: var(--profile-heading-compact-row-gap, var(--spacing-sm, 0.75rem));
+  }
+
+  .profile__info {
+    grid-column: 2 / -1;
+    align-self: stretch;
+    justify-content: flex-end;
+  }
+
+  .profile__avatar {
+    align-self: flex-end;
+  }
+
+  .profile__heading-actions {
+    --profile-heading-action-item-flex: 0 1 auto;
+    --profile-heading-action-label-font-size: var(--profile-heading-compact-button-font-size);
+    --profile-heading-action-label-white-space: nowrap;
+    --profile-heading-action-contact-icon-size: var(--profile-heading-compact-contact-icon-size);
+    --profile-heading-action-contact-icon-gap: var(--profile-heading-compact-contact-icon-gap);
+    --profile-heading-action-full-label-display: none;
+    --profile-heading-action-short-label-display: inline;
+    justify-self: var(--profile-heading-compact-actions-justify-self, start);
+    margin-left: var(--profile-heading-compact-actions-margin-left, 0);
+    margin-right: var(--profile-heading-compact-actions-margin-right, auto);
+    max-inline-size: none;
+    justify-content: var(--profile-heading-compact-actions-justify-content, flex-start);
+    align-items: center;
+    align-content: center;
+    gap: var(--profile-heading-compact-action-gap, 0.25rem);
+    flex-wrap: nowrap;
+  }
+
+  .profile__heading-actions > .profile-friends-button__section > solid-ui-button.profile__btn-friends,
+  .profile__heading-actions > #add-to-contacts-button-container > solid-ui-button.profile__btn-contacts {
+    min-width: 0;
+    inline-size: auto;
+    min-height: var(--button-height-sm, 1.75rem);
+    --button-padding-sm: var(--profile-heading-compact-button-padding, 0.25rem 0.3125rem);
+    --button-padding-x-sm: var(--profile-heading-compact-button-padding-x, 0.3125rem);
+    --button-font-size-sm: var(--profile-heading-compact-button-font-size, var(--font-size-xxs, 0.75rem));
+    --button-hover-background: var(--profile-heading-compact-button-hover-background, var(--color-primary, #7C4DFF));
+    --button-hover-border: var(--profile-heading-compact-button-hover-border, var(--color-primary, #7C4DFF));
+    --button-hover-text: var(--profile-heading-compact-button-hover-text, var(--color-text-on-action, var(--white, #FFF)));
+  }
+
+  .profile__heading-actions > #add-to-contacts-button-container > solid-ui-button.profile__btn-contacts {
+    --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)));
+  }
+
+  .profile__name {
+    display: inline;
+    font-size: var(--profile-heading-compact-name-size, var(--profile-mobile-header-name-size, var(--font-size-xl, 1.375rem)));
+    line-height: var(--profile-heading-compact-name-line-height, 1.15);
+  }
+
+  .profile__identity {
+    display: flow-root;
+  }
+
+  .profile__role-org {
+    font-size: var(--profile-heading-compact-role-size, var(--profile-mobile-header-job-title-size, var(--font-size-md, 1rem)));
+  }
+
+  .profile__hero-alt {
+    padding: 0;
+  }
+
+  .profile__image-frame--fallback .profile__hero-alt {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .profile__hero-icon {
+    display: block;
+    margin: 0 auto;
+    width: var(--profile-heading-compact-hero-icon-size, 3rem);
+    height: var(--profile-heading-compact-hero-icon-size, 3rem);
+  }
+
+  .profile__details {
+    font-size: var(--profile-heading-compact-detail-size, var(--profile-mobile-header-detail-size, var(--font-size-xxs, 0.75rem)));
+    gap: var(--profile-heading-compact-details-gap, var(--spacing-xs, 0.5rem));
+  }
+
+  .profile__meta-row,
+  .profile__contact-row {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    column-gap: var(--profile-heading-compact-detail-column-gap, 0.25rem);
+  }
+}
+
+@container profile-pane (max-width: 576px) {
+  .profile__heading-top {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    grid-template-areas:
+      "avatar info edit"
+      "details details details"
+      "actions actions actions";
+    column-gap: var(--profile-heading-compact-column-gap, 0.5rem);
+    row-gap: var(--profile-heading-compact-row-gap, var(--spacing-sm, 0.75rem));
+  }
+
+  .profile__info {
+    grid-column: 2 / -1;
+    align-self: stretch;
+    justify-content: flex-end;
+  }
+
+  .profile__avatar {
+    align-self: flex-end;
+  }
+
+  .profile__heading-actions {
+    --profile-heading-action-item-flex: 0 1 auto;
+    --profile-heading-action-label-font-size: var(--profile-heading-compact-button-font-size);
+    --profile-heading-action-label-white-space: nowrap;
+    --profile-heading-action-contact-icon-size: var(--profile-heading-compact-contact-icon-size);
+    --profile-heading-action-contact-icon-gap: var(--profile-heading-compact-contact-icon-gap);
+    --profile-heading-action-full-label-display: none;
+    --profile-heading-action-short-label-display: inline;
+    justify-self: var(--profile-heading-compact-actions-justify-self, start);
+    margin-left: var(--profile-heading-compact-actions-margin-left, 0);
+    margin-right: var(--profile-heading-compact-actions-margin-right, auto);
+    max-inline-size: none;
+    justify-content: var(--profile-heading-compact-actions-justify-content, flex-start);
+    align-items: center;
+    align-content: center;
+    gap: var(--profile-heading-compact-action-gap, 0.25rem);
+    flex-wrap: nowrap;
+  }
+
+  .profile__heading-actions > .profile-friends-button__section > solid-ui-button.profile__btn-friends,
+  .profile__heading-actions > #add-to-contacts-button-container > solid-ui-button.profile__btn-contacts {
+    min-width: 0;
+    inline-size: auto;
+    min-height: var(--button-height-sm, 1.75rem);
+    --button-padding-sm: var(--profile-heading-compact-button-padding, 0.25rem 0.3125rem);
+    --button-padding-x-sm: var(--profile-heading-compact-button-padding-x, 0.3125rem);
+    --button-font-size-sm: var(--profile-heading-compact-button-font-size, var(--font-size-xxs, 0.75rem));
+    --button-hover-background: var(--profile-heading-compact-button-hover-background, var(--color-primary, #7C4DFF));
+    --button-hover-border: var(--profile-heading-compact-button-hover-border, var(--color-primary, #7C4DFF));
+    --button-hover-text: var(--profile-heading-compact-button-hover-text, var(--color-text-on-action, var(--white, #FFF)));
+  }
+
+  .profile__heading-actions > #add-to-contacts-button-container > solid-ui-button.profile__btn-contacts {
+    --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)));
+  }
+
+  .profile__name {
+    display: inline;
+    font-size: var(--profile-heading-compact-name-size, var(--profile-mobile-header-name-size, var(--font-size-xl, 1.375rem)));
+    line-height: var(--profile-heading-compact-name-line-height, 1.15);
+  }
+
+  .profile__identity {
+    display: flow-root;
+  }
+
+  .profile__role-org {
+    font-size: var(--profile-heading-compact-role-size, var(--profile-mobile-header-job-title-size, var(--font-size-md, 1rem)));
+  }
+
+  .profile__hero-alt {
+    padding: 0;
+  }
+
+  .profile__image-frame--fallback .profile__hero-alt {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .profile__hero-icon {
+    display: block;
+    margin: 0 auto;
+    width: var(--profile-heading-compact-hero-icon-size, 3rem);
+    height: var(--profile-heading-compact-hero-icon-size, 3rem);
+  }
+
+  .profile__details {
+    font-size: var(--profile-heading-compact-detail-size, var(--profile-mobile-header-detail-size, var(--font-size-xxs, 0.75rem)));
+    gap: var(--profile-heading-compact-details-gap, var(--spacing-xs, 0.5rem));
+  }
+
+  .profile__meta-row,
+  .profile__contact-row {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    column-gap: var(--profile-heading-compact-detail-column-gap, 0.25rem);
+  }
+}
+