profile-pane 3.2.3-0 → 3.2.3-2

package/lib/sections/bio/BioSection.css

@@ -8,8 +8,9 @@
 
 .profile-grid [data-profile-section='bio'].profile__section,
 .profile-grid [data-profile-section='bio'].profile__section--empty {
-	--bio-section-content-gap-desktop: var(--spacing-lg, 1.5625rem);
-	--bio-section-content-gap-mobile: var(--spacing-sm, 0.9375rem);
+	--bio-section-content-gap-desktop: 25px;
+	--bio-section-content-gap-mobile: 15px;
+	--line-height: 1.5;
 }
 
 .bio-card__description-wrap {
@@ -20,15 +21,8 @@
 	--bio-description-toggle-transform: translateY(7px);
 }
 
-.bio-section__edit-button,
-solid-ui-button.bio-section__edit-button {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-}
-
 .bio-section--empty {
-	border-radius: var(--border-radius-md, 0.5rem);
+	border-radius: 8px;
 	gap: var(--bio-section-content-gap-desktop);
 }
 
@@ -37,7 +31,7 @@ solid-ui-button.bio-section__edit-button {
 }
 
 .profile-grid [data-profile-section='bio'].profile__section--empty .profile__empty-state-content {
-	gap: var(--spacing-2xs, 0.625rem);
+	gap: 10px;
 }
 
 :is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .bio-section--empty {
@@ -53,33 +47,6 @@ solid-ui-button.bio-section__edit-button {
 	gap: var(--bio-section-content-gap-mobile);
 }
 
-:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .bio-section__edit-button.profile-section-collapsible__edit-button,
-:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] solid-ui-button.bio-section__edit-button.profile-section-collapsible__edit-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'] solid-ui-button.bio-section__edit-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.bio-section__edit-button.profile-section-collapsible__edit-button::part(button):hover,
-:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] solid-ui-button.bio-section__edit-button.profile-section-collapsible__edit-button::part(button):focus,
-:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] solid-ui-button.bio-section__edit-button.profile-section-collapsible__edit-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;
-}
-
 .bio-card__description-text {
 	margin: 0;
 	width: 100%;
@@ -88,7 +55,7 @@ solid-ui-button.bio-section__edit-button {
 	-webkit-box-orient: vertical;
 	-webkit-line-clamp: 2;
 	line-clamp: 2;
-	line-height: var(--line-height-base, 1.5);
+	line-height: var(--line-height);
 	overflow: hidden;
 }
 
@@ -104,6 +71,7 @@ solid-ui-button.bio-section__edit-button {
 	overflow: visible;
 }
 
+
 .bio-card__description-toggle,
 solid-ui-button.bio-card__description-toggle {
 	margin: 0;
@@ -111,43 +79,26 @@ solid-ui-button.bio-card__description-toggle {
 	position: absolute;
 	right: 0;
 	bottom: 0;
-	background-color: var(--color-card-bg, #FFFFFF);
+	background-color: var(--color-card-bg, #FFF);
 	white-space: nowrap;
 	z-index: 0;
 }
 
 .bio-card__description-toggle {
 	border: 0;
-	background: none;
+	background: transparent;
 	color: var(--color-primary, #7C4DFF);
-	cursor: var(--profile-interactive-cursor, pointer);
 	font: inherit;
 	font-size: var(--font-size-sm, 0.875rem);
 	line-height: var(--line-height-base, 1.5);
 	min-height: auto;
 	min-width: auto;
-	padding-left: 0;
-	padding-right: 0;
-	padding-top: 0;
-	padding-bottom: 0;
-	margin-left: 0;
-	margin-right: 0;
+	cursor: var(--profile-interactive-cursor, pointer);
 }
 
-solid-ui-button.bio-card__description-toggle {
-	min-height: 0;
-	min-width: 0;
-	--button-height-sm: 0;
-	--button-padding-sm: 0;
-	--button-font-size-sm: var(--font-size-sm, 0.875rem);
-	--button-line-height: var(--line-height-base, 1.5);
-	--button-background: none;
-	--button-border-width: 0;
-	--button-border: transparent;
-	--button-text: var(--color-primary, #7C4DFF);
-	--button-hover-background: none;
-	--button-hover-border: transparent;
-	--button-hover-text: var(--color-primary, #7C4DFF);
+solid-ui-button.bio-card__description-toggle[hidden],
+.bio-card__description-toggle[hidden] {
+	display: none !important;
 }
 
 .bio-card__description-wrap .bio-card__description-text:not(.bio-card__description-text--expanded) + .bio-card__description-toggle {
@@ -179,7 +130,7 @@ solid-ui-button.bio-card__description-toggle {
 
 :is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .bio-card__description-text {
 	font-size: var(--font-size-sm, 0.875rem);
-	line-height: var(--line-height-base, 1.5);
+	line-height: var(--line-height);
 	-webkit-line-clamp: 2;
 	line-clamp: 2;
 }
@@ -199,7 +150,7 @@ solid-ui-button.bio-card__description-toggle {
 
 	.bio-card__description-text {
 		font-size: var(--font-size-sm, 0.875rem);
-		line-height: var(--line-height-base, 1.5);
+		line-height: var(--line-height);
 		-webkit-line-clamp: 2;
 		line-clamp: 2;
 	}
@@ -230,7 +181,7 @@ solid-ui-button.bio-card__description-toggle {
 
 	.bio-card__description-text {
 		font-size: var(--font-size-sm, 0.875rem);
-		line-height: var(--line-height-base, 1.5);
+		line-height: var(--line-height);
 		-webkit-line-clamp: 2;
 		line-clamp: 2;
 	}
@@ -240,61 +191,3 @@ solid-ui-button.bio-card__description-toggle {
 		--bio-description-toggle-transform: none;
 	}
 }
-
-@media (max-width: 768px) {
-	.bio-section__edit-button.profile-section-collapsible__edit-button,
-	solid-ui-button.bio-section__edit-button.profile-section-collapsible__edit-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));
-	}
-
-	solid-ui-button.bio-section__edit-button.profile-section-collapsible__edit-button::part(button) {
-		width: var(--min-touch-target, 44px);
-		min-width: var(--min-touch-target, 44px);
-	}
-
-	solid-ui-button.bio-section__edit-button.profile-section-collapsible__edit-button::part(button):hover,
-	solid-ui-button.bio-section__edit-button.profile-section-collapsible__edit-button::part(button):focus,
-	solid-ui-button.bio-section__edit-button.profile-section-collapsible__edit-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) {
-	.bio-section__edit-button.profile-section-collapsible__edit-button,
-	solid-ui-button.bio-section__edit-button.profile-section-collapsible__edit-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));
-	}
-
-	solid-ui-button.bio-section__edit-button.profile-section-collapsible__edit-button::part(button) {
-		width: var(--min-touch-target, 44px);
-		min-width: var(--min-touch-target, 44px);
-	}
-
-	solid-ui-button.bio-section__edit-button.profile-section-collapsible__edit-button::part(button):hover,
-	solid-ui-button.bio-section__edit-button.profile-section-collapsible__edit-button::part(button):focus,
-	solid-ui-button.bio-section__edit-button.profile-section-collapsible__edit-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;
-	}
-}

package/lib/sections/bio/BioSection.d.ts

@@ -1,8 +1,8 @@
 import 'solid-ui/components/button';
 import { BioDetails } from './types';
-import { ViewerMode } from '../../types';
+import { Layout, ViewerMode } from '../../types';
 import './BioSection.css';
 import { LiveStore, NamedNode } from 'rdflib';
 export declare const BioCard: (bioData: BioDetails) => import("lit-html").TemplateResult<1>;
-export declare function renderBioSection(store: LiveStore, subject: NamedNode, bioData: BioDetails, viewerMode: ViewerMode, onSaved?: () => Promise<void> | void): import("lit-html").TemplateResult<1> | "";
+export declare function renderBioSection(store: LiveStore, subject: NamedNode, bioData: BioDetails, viewerMode: ViewerMode, layout: Layout, onSaved?: () => Promise<void> | void): import("lit-html").TemplateResult<1>;
 //# sourceMappingURL=BioSection.d.ts.map

package/lib/sections/bio/BioSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BioSection.d.ts","sourceRoot":"","sources":["../../../src/sections/bio/BioSection.ts"],"names":[],"mappings":"AACA,OAAO,4BAA4B,CAAA;AACnC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AACxC,OAAO,kBAAkB,CAAA;AAEzB,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAwC7C,eAAO,MAAM,OAAO,GAClB,SAAS,UAAU,yCASpB,CAAA;AA4HD,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,UAAU,EACnB,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,6CAcrC"}
+{"version":3,"file":"BioSection.d.ts","sourceRoot":"","sources":["../../../src/sections/bio/BioSection.ts"],"names":[],"mappings":"AACA,OAAO,4BAA4B,CAAA;AACnC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AACpC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAChD,OAAO,kBAAkB,CAAA;AAEzB,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAsC7C,eAAO,MAAM,OAAO,GAClB,SAAS,UAAU,yCASpB,CAAA;AAgHD,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,UAAU,EACnB,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,wCAYrC"}

package/lib/sections/bio/BioSection.js

@@ -12,6 +12,7 @@ var _texts = require("../../texts");
 var _sectionCardHelpers = require("../shared/sectionCardHelpers");
 var _BioEditDialog = require("./BioEditDialog");
 var _profileIcons = require("../../icons-svg/profileIcons");
+var _responsiveActionButton = require("../../ui/responsiveActionButton");
 function renderBio(bioData) {
   if (!bioData) return (0, _litHtml.html)``;
   const bioDescriptionId = 'bio-description';
@@ -20,10 +21,7 @@ function renderBio(bioData) {
         <div class="bio-card__description-wrap">
           <p class="bio-card__description-text" id=${bioDescriptionId}>${bioData.description}</p>
           <solid-ui-button
-            type="button"
-            variant="secondary"
-            size="sm"
-            label="...more"
+            variant="tertiary"
             class="bio-card__description-toggle"
             aria-controls=${bioDescriptionId}
             aria-expanded="false"
@@ -49,35 +47,31 @@ const BioCard = bioData => {
   `;
 };
 exports.BioCard = BioCard;
-function renderBioSectionContent(store, subject, bioData, viewerMode, onSaved) {
+function renderBioSectionContent(store, subject, bioData, viewerMode, layout, onSaved) {
   const bio = BioCard(bioData);
   const bioDetails = bioData;
   const isOwner = viewerMode === 'owner';
   return (0, _litHtml.html)`
     <header class="profile__section-header profile-section-collapsible__header">
       <h2 id="bio-heading" tabindex="-1">${_texts.bioHeadingText}</h2>
-      ${isOwner ? (0, _litHtml.html)`
-        <solid-ui-button
-          type="button"
-          variant="secondary"
-          size="sm"
-          class="profile__action-button profile-action-text bio-section__edit-button profile-section-collapsible__edit-button"
-          aria-label="Edit bio details"
-          @click=${event => {
-    return (0, _BioEditDialog.createBioEditDialog)(event, store, subject, bioDetails, viewerMode, onSaved);
-  }}
-        >
-          <span class="profile-section-collapsible__edit-label profile__action-icon">${_profileIcons.editIcon} Edit</span>
-          <span class="profile-section-collapsible__edit-icon profile__action-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 bio',
+    onClick: event => (0, _BioEditDialog.createBioEditDialog)(event, store, subject, bioDetails, viewerMode, onSaved),
+    desktopIcon: (0, _litHtml.html)`<span slot="left-icon" class="profile-section-collapsible__action-label profile__add-more-icon" aria-hidden="true">${_profileIcons.editIcon}</span>`,
+    desktopLabel: 'Edit',
+    mobileIcon: (0, _litHtml.html)`<span slot="icon" class="profile-section-collapsible__edit-icon" aria-hidden="true">${_profileIcons.editIcon}</span>`
+  })}
+            ` : _litHtml.nothing}
     </header>
     <div class="profile-section-collapsible__content">
       ${bio}
     </div>
   `;
 }
-function renderBioSectionDefault(store, subject, bioData, viewerMode, onSaved) {
+function renderBioSectionDefault(store, subject, bioData, viewerMode, layout, onSaved) {
   return (0, _litHtml.html)`
     <section 
       aria-labelledby="bio-heading" 
@@ -86,7 +80,7 @@ function renderBioSectionDefault(store, subject, bioData, viewerMode, onSaved) {
       role="region"
       tabindex="-1"
     >
-      ${renderBioSectionContent(store, subject, bioData, viewerMode, onSaved)}
+      ${renderBioSectionContent(store, subject, bioData, viewerMode, layout, onSaved)}
     </section>
   `;
 }
@@ -100,18 +94,15 @@ function renderOwnerEmptyBioContent(store, subject, bioData, viewerMode, onSaved
       </p>
     </div>
     <solid-ui-button
-      type="button"
       variant="secondary"
-      size="sm"
       class="profile__action-button--empty"
-      aria-label="Add bio details"
       @click=${event => {
     return (0, _BioEditDialog.createBioEditDialog)(event, store, subject, bioDetails, viewerMode, onSaved);
   }}
     >
-      <span class="profile__action-icon" aria-hidden="true">${_profileIcons.plusDarkIcon} Add Bio</span>
+      <span slot="left-icon" class="profile__action-icon" aria-hidden="true">${_profileIcons.plusDarkIcon}</span>
+      <span class="profile__action-icon">Add Bio</span>
     </solid-ui-button>
-
   `;
 }
 function renderOwnerEmptyBioSection(store, subject, bioData, viewerMode, onSaved) {
@@ -127,12 +118,12 @@ function renderOwnerEmptyBioSection(store, subject, bioData, viewerMode, onSaved
     </section>
   `;
 }
-function renderBioSection(store, subject, bioData, viewerMode, onSaved) {
+function renderBioSection(store, subject, bioData, viewerMode, layout, onSaved) {
   (0, _sectionCardHelpers.scheduleDescriptionOverflowCheck)();
+  const currentLayout = layout || 'desktop';
   const hasBio = hasBioContent(bioData);
   const showOwnerEmptyBio = !hasBio && viewerMode === 'owner';
-  const showSection = true;
-  return showSection ? (0, _litHtml.html)`
-    ${showOwnerEmptyBio ? renderOwnerEmptyBioSection(store, subject, bioData, viewerMode, onSaved) : renderBioSectionDefault(store, subject, bioData, viewerMode, onSaved)}
-  ` : '';
+  return (0, _litHtml.html)`
+    ${showOwnerEmptyBio ? renderOwnerEmptyBioSection(store, subject, bioData, viewerMode, onSaved) : renderBioSectionDefault(store, subject, bioData, viewerMode, currentLayout, onSaved)}
+  `;
 }

package/lib/sections/contactInfo/ContactInfoEditDialog.css

@@ -1,10 +1,10 @@
 .profile__edit-form--contact-info .profile-edit-dialog__section {
-  --contact-info-dialog-contact-point-row-gap: var(--spacing-sm, 0.9375rem);
+  --contact-info-dialog-contact-point-row-gap: 15px;
   --contact-info-dialog-contact-point-row-align: flex-start;
   --contact-info-dialog-contact-point-row-direction: row;
   --contact-info-dialog-contact-point-row-wrap: wrap;
   --contact-info-dialog-contact-point-field-flex: 1 1 auto;
-  --contact-info-dialog-contact-point-type-width: 6.5rem;
+  --contact-info-dialog-contact-point-type-width: 104px;
   --contact-info-dialog-contact-point-type-max-width: none;
   --contact-info-dialog-contact-point-actions-flex: 0 1 auto;
   --contact-info-dialog-contact-point-actions-margin-left: auto;
@@ -15,26 +15,26 @@
 }
 
 .profile__edit-form--contact-info .profile-edit-dialog__section + .profile-edit-dialog__section {
-  border-top: var(--border-width-sm, 0.1rem) solid var(--color-border-lighter, var(--slate-200, #E2E8F0));
-  padding-top: var(--spacing-xs, 0.75rem);
+  border-top: 1px solid var(--solid-ui-color-slate-200, #E2E8F0);
+  padding-top: 12px;
 }
 
 .profile__edit-form--contact-info .profile-edit-dialog__contact-section-header {
   padding: 0;
-  gap: 1.875rem;
+  gap: 30px;
   margin-bottom: 0;
 }
 
 .profile__edit-form--contact-info .profile-edit-dialog__section fieldset {
-  margin-top: 0.25rem;
-  gap: var(--spacing-xs, 0.75rem);
+  margin-top: 4px;
+  gap: 12px;
 }
 
 .profile__edit-form--contact-info .profile-edit-dialog__section-heading {
   margin: 0;
-  color: var(--gray-700, #364153);
-  font-size: var(--font-size-md, 1rem); /* 16px */
-  font-weight: var(--font-weight-md, 500);
+  color: var(--solid-ui-color-gray-700, #364153);
+  font-size: var(--solid-ui-font-size-md, 1rem);
+  font-weight: 500;
   line-height: normal;
 }
 
@@ -65,11 +65,11 @@
 }
 
 .profile-edit-dialog__section fieldset > .profile-edit-dialog__row--contact-point {
-  margin-bottom: var(--spacing-xs, 0.75rem);
+  margin-bottom: 12px;
 }
 
 .profile-edit-dialog__section fieldset > .profile-edit-dialog__row--contact-point:last-child {
-  margin-bottom: var(--spacing-sm, 0.9375rem);
+  margin-bottom: 15px;
 }
 
 .profile-edit-dialog__row--contact-point > .profile-edit-dialog__field,
@@ -143,16 +143,11 @@
   align-self: center;
 }
 
-.profile-edit-dialog__row--address-header.profile-edit-dialog__row--full .profile-edit-dialog__delete-button {
-  min-height: 1.75rem;
-  min-width: 1.75rem;
-}
-
 .profile-edit-dialog__address-title {
   margin: 0;
-  font-size: var(--font-size-sm, 0.875rem);
-  font-weight: var(--font-weight-medium, 500);
-  line-height: var(--line-height-base, 1.5);
+  font-size: var(--solid-ui-font-size-sm, 0.875rem);
+  font-weight: 500;
+  line-height: 1.5;
 }
 
 /* layout = mobile */
@@ -161,8 +156,8 @@ html[data-layout='mobile'] #profile-modal .modal .profile__edit-form--contact-in
 }
 
 html[data-layout='mobile'] #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__section-heading{
-  font-size: var(--font-size-md, 1rem);
-  line-height: var(--line-height-base, 1.5);
+  font-size: var(--solid-ui-font-size-md, 1rem);
+  line-height: 1.5;
 }
 
 /* Media and container rules are needed so that the phone and email rows
@@ -170,8 +165,8 @@ stay as one row instead of wrapping */
 @media (max-width: 768px) {
   #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__section-heading,
   .profile__edit-form--contact-info .profile-edit-dialog__section-heading {
-    font-size: var(--font-size-md, 1rem);
-    line-height: var(--line-height-base, 1.5);
+    font-size: var(--solid-ui-font-size-md, 1rem);
+    line-height: 1.5;
   }
 
   #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point,
@@ -182,7 +177,7 @@ stay as one row instead of wrapping */
       minmax(var(--contact-info-dialog-contact-point-type-width), var(--contact-info-dialog-contact-point-type-width))
       minmax(var(--min-touch-target, 44px), auto);
     align-items: start;
-    column-gap: var(--spacing-2xs, 0.625rem);
+    column-gap: 10px;
   }
 
   #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point > .profile-edit-dialog__field,
@@ -213,26 +208,26 @@ stay as one row instead of wrapping */
   }
 
   .profile__edit-form--contact-info .profile-edit-dialog__section {
-    --contact-info-dialog-contact-point-row-gap: var(--spacing-2xs, 0.625rem);
+    --contact-info-dialog-contact-point-row-gap: 10px;
     --contact-info-dialog-contact-point-row-align: center;
     --contact-info-dialog-contact-point-row-direction: row;
     --contact-info-dialog-contact-point-row-wrap: nowrap;
     --contact-info-dialog-contact-point-field-flex: 1 1 0;
-    --contact-info-dialog-contact-point-type-width: 5.5rem;
-    --contact-info-dialog-contact-point-type-max-width: 5.5rem;
+    --contact-info-dialog-contact-point-type-width: 88px;
+    --contact-info-dialog-contact-point-type-max-width: 88px;
     --contact-info-dialog-contact-point-actions-flex: 0 0 auto;
     --contact-info-dialog-contact-point-actions-margin-left: 0;
     --contact-info-dialog-contact-point-actions-justify: flex-end;
-    --contact-info-dialog-contact-point-select-font-size: var(--font-size-xxs, 0.75rem);
-    --contact-info-dialog-contact-point-select-line-height: var(--line-height-base, 1.5);
+    --contact-info-dialog-contact-point-select-font-size: 0.75rem;
+    --contact-info-dialog-contact-point-select-line-height: 1.5;
   }
 }
 
 @container profile-pane (max-width: 768px) {
   #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__section-heading,
   .profile__edit-form--contact-info .profile-edit-dialog__section-heading {
-    font-size: var(--font-size-md, 1rem);
-    line-height: var(--line-height-base, 1.5);
+    font-size: var(--solid-ui-font-size-md, 1rem);
+    line-height: 1.5;
   }
 
   #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point,
@@ -243,7 +238,7 @@ stay as one row instead of wrapping */
       minmax(var(--contact-info-dialog-contact-point-type-width), var(--contact-info-dialog-contact-point-type-width))
       minmax(var(--min-touch-target, 44px), auto);
     align-items: start;
-    column-gap: var(--spacing-2xs, 0.625rem);
+    column-gap: 10px;
   }
 
   #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__row--contact-point > .profile-edit-dialog__field,
@@ -274,18 +269,18 @@ stay as one row instead of wrapping */
   }
 
   .profile__edit-form--contact-info .profile-edit-dialog__section {
-    --contact-info-dialog-contact-point-row-gap: var(--spacing-2xs, 0.625rem);
+    --contact-info-dialog-contact-point-row-gap: 10px;
     --contact-info-dialog-contact-point-row-align: center;
     --contact-info-dialog-contact-point-row-direction: row;
     --contact-info-dialog-contact-point-row-wrap: nowrap;
     --contact-info-dialog-contact-point-field-flex: 1 1 0;
-    --contact-info-dialog-contact-point-type-width: 5.5rem;
-    --contact-info-dialog-contact-point-type-max-width: 5.5rem;
+    --contact-info-dialog-contact-point-type-width: 88px;
+    --contact-info-dialog-contact-point-type-max-width: 88px;
     --contact-info-dialog-contact-point-actions-flex: 0 0 auto;
     --contact-info-dialog-contact-point-actions-margin-left: 0;
     --contact-info-dialog-contact-point-actions-justify: flex-end;
-    --contact-info-dialog-contact-point-select-font-size: var(--font-size-xxs, 0.75rem);
-    --contact-info-dialog-contact-point-select-line-height: var(--line-height-base, 1.5);
+    --contact-info-dialog-contact-point-select-font-size: 0.75rem;
+    --contact-info-dialog-contact-point-select-line-height: 1.5;
   }
 }
 
@@ -294,22 +289,8 @@ stay as one row instead of wrapping */
     padding: 0;
   }
 
-  #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__contact-section-header .profile-edit-dialog__section-title-icon {
-    width: 0.8333rem;
-    height: 0.8333rem;
-    flex-basis: 0.8333rem;
-    flex-shrink: 0;
-    aspect-ratio: 1 / 1;
-  }
-
-  #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__contact-section-header .profile__add-more-content {
-    font-size: var(--font-size-sm, 0.875rem);
-  }
-
   #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__contact-section-header .profile__add-more-icon {
     display: inline-flex;
-    width: var(--font-size-xxs, 0.75rem);
-    height: var(--font-size-xxs, 0.75rem);
     flex-shrink: 0;
     aspect-ratio: 1 / 1;
     padding: 0;
@@ -326,22 +307,8 @@ stay as one row instead of wrapping */
     padding: 0;
   }
 
-  #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__contact-section-header .profile-edit-dialog__section-title-icon {
-    width: 0.8333rem;
-    height: 0.8333rem;
-    flex-basis: 0.8333rem;
-    flex-shrink: 0;
-    aspect-ratio: 1 / 1;
-  }
-
-  #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__contact-section-header .profile__add-more-content {
-    font-size: var(--font-size-sm, 0.875rem);
-  }
-
   #profile-modal .modal .profile__edit-form--contact-info .profile-edit-dialog__contact-section-header .profile__add-more-icon {
     display: inline-flex;
-    width: var(--font-size-xxs, 0.75rem);
-    height: var(--font-size-xxs, 0.75rem);
     flex-shrink: 0;
     aspect-ratio: 1 / 1;
     padding: 0;

package/lib/sections/contactInfo/ContactInfoEditDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContactInfoEditDialog.d.ts","sourceRoot":"","sources":["../../../src/sections/contactInfo/ContactInfoEditDialog.ts"],"names":[],"mappings":"AAEA,OAAO,4BAA4B,CAAA;AACnC,OAAO,4BAA4B,CAAA;AACnC,OAAO,EAAqB,WAAW,EAAwC,MAAM,SAAS,CAAA;AAC9F,OAAO,8BAA8B,CAAA;AACrC,OAAO,6BAA6B,CAAA;AACpC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAE7C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AA0vBxC,wBAAsB,2BAA2B,CAC/C,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,iBA0DrC"}
+{"version":3,"file":"ContactInfoEditDialog.d.ts","sourceRoot":"","sources":["../../../src/sections/contactInfo/ContactInfoEditDialog.ts"],"names":[],"mappings":"AAEA,OAAO,4BAA4B,CAAA;AACnC,OAAO,4BAA4B,CAAA;AACnC,OAAO,EAAqB,WAAW,EAAwC,MAAM,SAAS,CAAA;AAC9F,OAAO,8BAA8B,CAAA;AACrC,OAAO,6BAA6B,CAAA;AACpC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAE7C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAkuBxC,wBAAsB,2BAA2B,CAC/C,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,iBA0DrC"}