profile-pane 3.2.1 → 3.2.2-test.0

package/lib/sections/contactInfo/ContactInfoEditDialog.js

@@ -6,8 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.createContactInfoEditDialog = createContactInfoEditDialog;
 var _dialog = require("../../ui/dialog");
 var _litHtml = require("lit-html");
+require("solid-ui/components/actions/button");
+require("solid-ui/components/forms/select");
 require("../../styles/EditDialogs.css");
-require("../../styles/ContactInfoEditDialog.css");
+require("./ContactInfoEditDialog.css");
 var _mutations = require("./mutations");
 var _phoneCountries = require("../shared/phoneCountries");
 var _contactTypeUtils = require("../shared/contactTypeUtils");
@@ -24,6 +26,58 @@ var _contactIcons = require("../../icons-svg/contactIcons");
               the phone numbers? 
            3. can you write functions to sanitize the input values for emails, phones, and addresses? */
 
+const PHONE_TYPE_OPTIONS = [{
+  label: 'Mobile',
+  value: 'Cell'
+}, {
+  label: 'Home',
+  value: 'Home'
+}, {
+  label: 'Work',
+  value: 'Work'
+}];
+const EMAIL_TYPE_OPTIONS = [{
+  label: 'Personal',
+  value: 'Home'
+}, {
+  label: 'Office',
+  value: 'Office'
+}];
+function normalizeContactTypeValue(value, options) {
+  return options.some(option => option.value === value) ? value : options[0]?.value || '';
+}
+function readContactTypeChange(event) {
+  const customEvent = event;
+  if (typeof customEvent.detail?.value === 'string') {
+    return customEvent.detail.value;
+  }
+  const target = event.target;
+  return typeof target?.value === 'string' ? target.value : '';
+}
+function getContactTypeOptions(kind) {
+  return kind === 'phone' ? PHONE_TYPE_OPTIONS : EMAIL_TYPE_OPTIONS;
+}
+function getContactTypeValue(kind, formState, rowIndex) {
+  const row = kind === 'phone' ? formState.phones[rowIndex] : formState.emails[rowIndex];
+  return normalizeContactTypeValue(row?.type || '', getContactTypeOptions(kind));
+}
+function withDefaultContactType(row, kind) {
+  return {
+    ...row,
+    type: normalizeContactTypeValue(row.type || '', getContactTypeOptions(kind))
+  };
+}
+function initializeContactTypeSelects(form, formState) {
+  const selectElements = form.querySelectorAll('solid-ui-select[data-contact-type-kind]');
+  selectElements.forEach(selectElement => {
+    const kind = selectElement.dataset.contactTypeKind;
+    const rowIndex = Number(selectElement.dataset.rowIndex);
+    if (!kind || Number.isNaN(rowIndex)) return;
+    selectElement.options = getContactTypeOptions(kind);
+    selectElement.value = getContactTypeValue(kind, formState, rowIndex);
+    selectElement.label = '';
+  });
+}
 function isContactPointRow(row) {
   return 'value' in row;
 }
@@ -36,13 +90,13 @@ function rowHasContent(row) {
 function toFormState(contactInfo) {
   const emails = (contactInfo.emails || []).map(email => ({
     value: (0, _sanitizeUtils.sanitizeEmailValue)((0, _textUtils.toText)(email.valueNode).replace(/^mailto:/i, '')),
-    type: (0, _contactTypeUtils.normalizeEmailTypeForContactInfoEdit)(email.type),
+    type: normalizeContactTypeValue((0, _contactTypeUtils.normalizeEmailTypeForContactInfoEdit)(email.type), EMAIL_TYPE_OPTIONS),
     entryNode: (0, _textUtils.toText)(email.entryNode),
     status: (0, _textUtils.toText)(email.entryNode) ? 'existing' : 'new'
   })).filter(email => Boolean(email.value || email.entryNode || email.type));
   const phones = (contactInfo.phones || []).map(phone => ({
     value: (0, _textUtils.sanitizeTextValue)((0, _textUtils.toText)(phone.valueNode).replace(/^tel:/i, '')),
-    type: (0, _contactTypeUtils.normalizePhoneTypeForContactInfoEdit)(phone.type),
+    type: normalizeContactTypeValue((0, _contactTypeUtils.normalizePhoneTypeForContactInfoEdit)(phone.type), PHONE_TYPE_OPTIONS),
     entryNode: (0, _textUtils.toText)(phone.entryNode),
     status: 'existing'
   })).filter(phone => Boolean(phone.value));
@@ -59,13 +113,13 @@ function toFormState(contactInfo) {
   return {
     emails: emails.length ? emails : [{
       value: '',
-      type: '',
+      type: EMAIL_TYPE_OPTIONS[0].value,
       entryNode: '',
       status: 'new'
     }],
     phones: phones.length ? phones : [{
       value: '',
-      type: '',
+      type: PHONE_TYPE_OPTIONS[0].value,
       entryNode: '',
       status: 'new'
     }],
@@ -81,26 +135,6 @@ function toFormState(contactInfo) {
     }]
   };
 }
-/* not needed for now
-function renderCountryPrefixSelect(
-  name: string,
-  value: string,
-  label: string,
-  onChange: (event: Event) => void
-) {
-  return html`
-    <label class="label profile-edit-dialog__phone-prefix-field" aria-label=${label}>
-      <select class="phonePrefixSelect" name=${name} .value=${value} @change=${onChange}>
-        ${COUNTRY_PREFIX_OPTIONS.map((option) => html`
-          <option value=${option.dialCode}>
-            ${countryCodeToFlag(option.iso2)} ${option.dialCode}
-          </option>
-        `)}
-      </select>
-    </label>
-  `
-} */
-
 function renderContactPhoneInputRow({
   phones,
   index,
@@ -109,11 +143,8 @@ function renderContactPhoneInputRow({
 }) {
   const phoneRow = phones[index];
   const label = `Phone Number ${displayIndex + 1}`;
-  // const countryCodeLabel = `Country Calling Code ${displayIndex + 1}`
   const typeLabel = `Phone Type ${displayIndex + 1}`;
-  // const prefixInputName = `phone-prefix-${index}`
   const inputName = `phone-value-${index}`;
-  const typeInputName = `phone-type-${index}`;
   const splitValue = (0, _phoneCountries.splitPhoneValue)(phoneRow?.value || '');
   let selectedDialCode = splitValue.dialCode;
   const handleValueInput = e => {
@@ -123,20 +154,8 @@ function renderContactPhoneInputRow({
       (0, _rowState.applyRowFieldChange)(phones[index], 'value', (0, _phoneCountries.combinePhoneValue)(selectedDialCode, nextValue), rowHasContent);
     }
   };
-  /* Not needed for now
-    const handleCountryCodeInput = (e: Event) => {
-      const target = e.target as HTMLSelectElement
-      selectedDialCode = target.value
-  
-      if (phones[index]) {
-        const localNumber = splitPhoneValue(phones[index].value).localNumber
-        applyRowFieldChange(phones[index], 'value', combinePhoneValue(selectedDialCode, localNumber), rowHasContent)
-      }
-    } */
-
   const handleTypeInput = e => {
-    const target = e.target;
-    const nextType = target.value;
+    const nextType = readContactTypeChange(e);
     if (phones[index]) {
       (0, _rowState.applyRowSelectChange)(phones[index], 'type', nextType);
     }
@@ -158,7 +177,7 @@ function renderContactPhoneInputRow({
             data-contact-field="value"
             data-entry-node=${phoneRow?.entryNode || ''}
             data-row-status=${phoneRow?.status || 'n/a'}
-            placeholder="Phone Number"
+            placeholder=${label}
             autocomplete="tel-national"
             inputmode="tel"
             @input=${handleValueInput}
@@ -166,22 +185,30 @@ function renderContactPhoneInputRow({
         </label>
       </div>
       <label aria-label=${typeLabel} class="label profile-edit-dialog__field-type profile-edit-dialog__phone-type-row">
-        <select name=${typeInputName} id="phone-type-select-${inputName}" @change=${handleTypeInput} .value=${phoneRow?.type || ''}>
-          <option value="Cell">Mobile</option>
-          <option value="Home">Home</option>
-          <option value="Work">Work</option>
-        </select>
+        <solid-ui-select
+          class="profile-edit-dialog__type-select"
+          id=${`phone-type-select-${inputName}`}
+          data-contact-type-kind="phone"
+          data-row-index=${String(index)}
+          aria-label=${typeLabel}
+          .label=${''}
+          .options=${PHONE_TYPE_OPTIONS}
+          .value=${normalizeContactTypeValue(phoneRow?.type || '', PHONE_TYPE_OPTIONS)}
+          @change=${handleTypeInput}
+        ></solid-ui-select>
       </label>
       <div class="profile-edit-dialog__actions">
-        <button
+        <solid-ui-button
           type="button"
+          variant="icon"
+          size="md"
           class="profile-edit-dialog__delete-button"
           aria-label=${`Delete phone number ${displayIndex + 1}`}
           title=${_texts.deleteEntryButtonTitleText}
           @click=${handleDelete}
         >
-          <span class="profile-edit-dialog__delete-icon" aria-hidden="true">${_profileIcons.trashIcon}</span>
-        </button>
+          <span slot="icon" class="profile-edit-dialog__delete-icon" aria-hidden="true">${_profileIcons.trashIcon}</span>
+        </solid-ui-button>
       </div>
     </div>
   `;
@@ -191,7 +218,7 @@ function renderContactInfoPhoneSection(phones, onAddRow) {
     event.preventDefault();
     phones.unshift({
       value: '',
-      type: '',
+      type: PHONE_TYPE_OPTIONS[0].value,
       entryNode: '',
       status: 'new'
     });
@@ -209,22 +236,24 @@ function renderContactInfoPhoneSection(phones, onAddRow) {
     <section 
       aria-labelledby="phone-numbers-heading" 
       class="profile-edit-dialog__section">
-      <header class="profile__section-header">
+      <header class="profile__section-header profile-edit-dialog__contact-section-header">
         <h3 id="phone-numbers-heading" class="profile-edit-dialog__section-heading">
-          <span class="sectionTitleIcon" aria-hidden="true">${_contactIcons.phoneIcon}</span>
+          <span class="profile-edit-dialog__section-title-icon" aria-hidden="true">${_contactIcons.phoneIcon}</span>
           Phone Numbers
         </h3>
-        <button
+        <solid-ui-button
           type="button"
-          class="profile__action-button profile-action-text flex-center"
+          variant="secondary"
+          size="sm"
+          class="profile__action-button profile-action-text profile-edit-dialog__add-button"
           aria-label="Add another phone number"
           @click=${createNewRow}
         >
-          <span class="profile__add-more-content inline-flex-row">
-            <span class="profile__add-more-icon inline-flex-row" aria-hidden="true">${_profileIcons.addIcon}</span>
-            Add More
+          <span class="profile__add-more-content">
+            <span class="profile__add-more-icon" aria-hidden="true">${_profileIcons.addIcon}</span>
+            <span>Add More</span>
           </span>
-        </button>
+        </solid-ui-button>
       </header>
       <fieldset>
         <legend class="sr-only">Phone number entries</legend>
@@ -253,7 +282,6 @@ function renderContactEmailInputRow({
   const label = `Email Address ${displayIndex + 1}`;
   const typeLabel = `Email Type ${displayIndex + 1}`;
   const inputName = `email-value-${index}`;
-  const typeInputName = `email-type-${index}`;
   const handleValueInput = e => {
     const target = e.target;
     const nextValue = (0, _sanitizeUtils.sanitizeEmailValue)(target.value);
@@ -262,8 +290,7 @@ function renderContactEmailInputRow({
     }
   };
   const handleTypeInput = e => {
-    const target = e.target;
-    const nextType = target.value;
+    const nextType = readContactTypeChange(e);
     if (emails[index]) {
       (0, _rowState.applyRowSelectChange)(emails[index], 'type', nextType);
     }
@@ -291,21 +318,30 @@ function renderContactEmailInputRow({
         />
       </label>
       <label aria-label=${typeLabel} class="label profile-edit-dialog__field-type emailTypeRow">
-        <select name=${typeInputName} id="email-type-select-${inputName}" @change=${handleTypeInput} .value=${emailRow?.type || ''}>
-          <option value="Home">Personal</option>
-          <option value="Office">Office</option>
-        </select>
+        <solid-ui-select
+          class="profile-edit-dialog__type-select"
+          id=${`email-type-select-${inputName}`}
+          data-contact-type-kind="email"
+          data-row-index=${String(index)}
+          aria-label=${typeLabel}
+          .label=${''}
+          .options=${EMAIL_TYPE_OPTIONS}
+          .value=${normalizeContactTypeValue(emailRow?.type || '', EMAIL_TYPE_OPTIONS)}
+          @change=${handleTypeInput}
+        ></solid-ui-select>
       </label>
       <div class="profile-edit-dialog__actions">
-        <button
+        <solid-ui-button
           type="button"
+          variant="icon"
+          size="md"
           class="profile-edit-dialog__delete-button"
           aria-label=${`Delete email address ${displayIndex + 1}`}
           title=${_texts.deleteEntryButtonTitleText}
           @click=${handleDelete}
         >
-          <span class="profile-edit-dialog__delete-icon" aria-hidden="true">${_profileIcons.trashIcon}</span>
-        </button>
+          <span slot="icon" class="profile-edit-dialog__delete-icon" aria-hidden="true">${_profileIcons.trashIcon}</span>
+        </solid-ui-button>
       </div>
     </div>
   `;
@@ -315,7 +351,7 @@ function renderContactInfoEmailSection(emails, onAddRow) {
     event.preventDefault();
     emails.unshift({
       value: '',
-      type: '',
+      type: EMAIL_TYPE_OPTIONS[0].value,
       entryNode: '',
       status: 'new'
     });
@@ -333,22 +369,24 @@ function renderContactInfoEmailSection(emails, onAddRow) {
     <section 
       aria-labelledby="email-addresses-heading" 
       class="profile-edit-dialog__section">
-      <header class="profile__section-header">
+      <header class="profile__section-header profile-edit-dialog__contact-section-header">
         <h3 id="email-addresses-heading" class="profile-edit-dialog__section-heading">
-          <span class="sectionTitleIcon" aria-hidden="true">${_contactIcons.emailIcon}</span>
+          <span class="profile-edit-dialog__section-title-icon" aria-hidden="true">${_contactIcons.emailIcon}</span>
           Email Addresses
         </h3>
-        <button
+        <solid-ui-button
           type="button"
-          class="profile__action-button profile-action-text flex-center"
+          variant="secondary"
+          size="sm"
+          class="profile__action-button profile-action-text profile-edit-dialog__add-button"
           aria-label="Add another email address"
           @click=${createNewRow}
         >
-          <span class="profile__add-more-content inline-flex-row">
-            <span class="profile__add-more-icon inline-flex-row" aria-hidden="true">${_profileIcons.addIcon}</span>
-            Add More
+          <span class="profile__add-more-content">
+            <span class="profile__add-more-icon" aria-hidden="true">${_profileIcons.addIcon}</span>
+            <span>Add More</span>
           </span>
-        </button>
+        </solid-ui-button>
       </header>
       <fieldset>
         <legend class="sr-only">Email address entries</legend>
@@ -412,15 +450,17 @@ function renderContactAddressInputRow({
         </select>
       </label>
       <div class="profile-edit-dialog__actions profile-edit-dialog__actions--edge">
-        <button
+        <solid-ui-button
           type="button"
+          variant="icon"
+          size="md"
           class="profile-edit-dialog__delete-button"
           aria-label=${`Delete address ${displayIndex + 1}`}
           title=${_texts.deleteEntryButtonTitleText}
           @click=${handleDelete}
         >
-          <span class="profile-edit-dialog__delete-icon" aria-hidden="true">${_profileIcons.trashIcon}</span>
-        </button>
+          <span slot="icon" class="profile-edit-dialog__delete-icon" aria-hidden="true">${_profileIcons.trashIcon}</span>
+        </solid-ui-button>
       </div>
     </div>
     <div class="profile-edit-dialog__row profile-edit-dialog__row--full">
@@ -540,22 +580,24 @@ function renderContactInfoAddressSection(addresses, onAddRow) {
     <section 
       aria-labelledby="address-heading" 
       class="profile-edit-dialog__section">
-      <header class="profile__section-header">
+      <header class="profile__section-header profile-edit-dialog__contact-section-header">
         <h3 id="address-heading" class="profile-edit-dialog__section-heading">
-          <span class="sectionTitleIcon" aria-hidden="true">${_profileIcons.locationIcon}</span>
+          <span class="profile-edit-dialog__section-title-icon" aria-hidden="true">${_profileIcons.locationIcon}</span>
           Addresses
         </h3>
-        <button
+        <solid-ui-button
           type="button"
-          class="profile__action-button profile-action-text flex-center"
+          variant="secondary"
+          size="sm"
+          class="profile__action-button profile-action-text profile-edit-dialog__add-button"
           aria-label="Add another address"
           @click=${createNewRow}
         >
-          <span class="profile__add-more-content inline-flex-row">
-            <span class="profile__add-more-icon inline-flex-row" aria-hidden="true">${_profileIcons.addIcon}</span>
-            Add More
+          <span class="profile__add-more-content">
+            <span class="profile__add-more-icon" aria-hidden="true">${_profileIcons.addIcon}</span>
+            <span>Add More</span>
           </span>
-        </button>
+        </solid-ui-button>
       </header>
       <fieldset>
         <legend class="sr-only">Address entries</legend>
@@ -577,6 +619,15 @@ function renderContactInfoAddressSection(addresses, onAddRow) {
 function focusContactInfoField(form, selector) {
   const nextField = form.querySelector(selector);
   if (!nextField || typeof nextField.focus !== 'function') return;
+  const view = form.ownerDocument.defaultView;
+  const shouldAvoidFocus = Boolean(view?.matchMedia && (view.matchMedia('(pointer: coarse)').matches || view.matchMedia('(max-width: 640px)').matches));
+  if (shouldAvoidFocus) {
+    nextField.scrollIntoView({
+      block: 'nearest',
+      behavior: 'auto'
+    });
+    return;
+  }
   nextField.scrollIntoView({
     block: 'nearest',
     behavior: 'auto'
@@ -594,6 +645,7 @@ function renderContactInfoEditTemplate(form, formState, viewerMode, options = {}
     ${renderContactInfoAddressSection(formState.addresses, rerender)}
     ${viewerMode !== 'owner' ? (0, _litHtml.html)`<p class="profile-edit-dialog__login-message">${_texts.ownerLoginRequiredDialogMessageText}</p>` : null}
   `, form);
+  initializeContactTypeSelects(form, formState);
   if (options.focusSelector) {
     focusContactInfoField(form, options.focusSelector);
   }
@@ -609,12 +661,30 @@ function createContactInfoEditForm(contactInfo, viewerMode) {
     formState
   };
 }
+function isValidEmailAddress(value) {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
+}
+function isValidPhoneNumber(value) {
+  return /^\d+$/.test(value);
+}
 function validateContactInfoBeforeSave(formState) {
-  const phoneOps = (0, _rowState.summarizeRowOps)(formState.phones, rowHasContent);
-  const emailOps = (0, _rowState.summarizeRowOps)(formState.emails, rowHasContent);
-  const addressOps = (0, _rowState.summarizeRowOps)(formState.addresses, rowHasContent);
-  const hasChanges = phoneOps.create.length > 0 || phoneOps.update.length > 0 || phoneOps.remove.length > 0 || emailOps.create.length > 0 || emailOps.update.length > 0 || emailOps.remove.length > 0 || addressOps.create.length > 0 || addressOps.update.length > 0 || addressOps.remove.length > 0;
-  if (!hasChanges) return 'No contact info changes detected.';
+  const visiblePhones = formState.phones.filter(phone => phone.status !== 'deleted');
+  for (const [index, phone] of visiblePhones.entries()) {
+    if (!rowHasContent(phone)) continue;
+    const {
+      localNumber
+    } = (0, _phoneCountries.splitPhoneValue)(phone.value || '');
+    if (!isValidPhoneNumber(localNumber)) {
+      return `Phone Number ${index + 1} should contain only numbers.`;
+    }
+  }
+  const visibleEmails = formState.emails.filter(email => email.status !== 'deleted');
+  for (const [index, email] of visibleEmails.entries()) {
+    if (!rowHasContent(email)) continue;
+    if (!isValidEmailAddress(email.value || '')) {
+      return `Email address ${index + 1} must be a valid email address.`;
+    }
+  }
   return null;
 }
 async function createContactInfoEditDialog(event, store, subject, contactInfo, viewerMode, onSaved) {
@@ -632,6 +702,12 @@ async function createContactInfoEditDialog(event, store, subject, contactInfo, v
     },
     submitLabel: _texts.dialogSubmitLabelText,
     cancelLabel: _texts.dialogCancelLabelText,
+    shouldCloseWithoutSave: () => {
+      const phoneOps = (0, _rowState.summarizeRowOps)(formState.phones, rowHasContent);
+      const emailOps = (0, _rowState.summarizeRowOps)(formState.emails, rowHasContent);
+      const addressOps = (0, _rowState.summarizeRowOps)(formState.addresses, rowHasContent);
+      return phoneOps.create.length === 0 && phoneOps.update.length === 0 && phoneOps.remove.length === 0 && emailOps.create.length === 0 && emailOps.update.length === 0 && emailOps.remove.length === 0 && addressOps.create.length === 0 && addressOps.update.length === 0 && addressOps.remove.length === 0;
+    },
     validate: () => {
       if (viewerMode !== 'owner') {
         return _texts.ownerLoginRequiredDialogMessageText;
@@ -639,16 +715,25 @@ async function createContactInfoEditDialog(event, store, subject, contactInfo, v
       return validateContactInfoBeforeSave(formState);
     },
     onSave: async () => {
+      const phoneOps = (0, _rowState.summarizeRowOps)(formState.phones, rowHasContent);
+      const emailOps = (0, _rowState.summarizeRowOps)(formState.emails, rowHasContent);
       const plan = {
-        phoneOps: (0, _rowState.summarizeRowOps)(formState.phones, rowHasContent),
-        emailOps: (0, _rowState.summarizeRowOps)(formState.emails, rowHasContent),
+        phoneOps: {
+          create: phoneOps.create.map(row => withDefaultContactType(row, 'phone')),
+          update: phoneOps.update.map(row => withDefaultContactType(row, 'phone')),
+          remove: phoneOps.remove
+        },
+        emailOps: {
+          create: emailOps.create.map(row => withDefaultContactType(row, 'email')),
+          update: emailOps.update.map(row => withDefaultContactType(row, 'email')),
+          remove: emailOps.remove
+        },
         addressOps: (0, _rowState.summarizeRowOps)(formState.addresses, rowHasContent)
       };
       await (0, _mutations.processContactInfoMutations)(store, subject, plan);
     },
     formatSaveError: error => {
-      const message = error instanceof Error ? error.message : String(error);
-      return `${_texts.saveContactUpdatesFailedPrefixText} ${message}`;
+      return error instanceof Error ? error.message : _texts.saveContactUpdatesFailedMessageText;
     }
   });
   if (!result) return;

package/lib/sections/contactInfo/ContactInfoSection.css

@@ -0,0 +1,125 @@
+.profile__section[data-profile-section='contact-info'],
+.profile__section--empty[data-profile-section='contact-info'] {
+  --contact-info-icon-padding-inline: 0.575rem;
+  --contact-info-icon-size: var(--icon-xxs, 1rem);
+  --contact-info-contact-point-value-size: var(--font-size-sm, 0.875rem);
+  --contact-info-contact-point-type-size: var(--font-size-xxs, 0.75rem);
+}
+
+/* Contact rows */
+.contact-info__icon-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  padding: 0 var(--contact-info-icon-padding-inline, 0.575rem);
+  flex-shrink: 0;
+}
+
+.contact-info__item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-2xs, 0.625rem);
+  margin-inline-start: 0;
+}
+
+.contact-info__item-body {
+  display: flex;
+  flex-direction: column;
+}
+
+.contact-info__icon {
+  width: var(--contact-info-icon-size, var(--icon-xxs, 1rem));
+  height: var(--contact-info-icon-size, var(--icon-xxs, 1rem));
+  flex-shrink: 0;
+  stroke-width: 1.333px;
+  stroke: var(--color-icon-muted, var(--slate-400, #90A1B9));
+}
+
+.contact-info__contact-point-value,
+.contact-info__address {
+  color: var(--color-text-strong-secondary, var(--slate-800, #1D293D));
+  font-size: var(--contact-info-contact-point-value-size, var(--font-size-sm, 0.875rem));
+  font-weight: var(--font-weight-bold, 600);
+}
+
+.contact-info__contact-point-value {
+  white-space: normal !important;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.contact-info__contact-point-type {
+  color: var(--color-text-detail, var(--slate-500, #62748E));
+  font-size: var(--contact-info-contact-point-type-size, var(--font-size-xxs, 0.75rem));
+  font-weight: var(--font-weight-md, 500);
+}
+
+/* Lists */
+.contact-info__list {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  list-style: none;
+  margin: 0;
+  padding: 0 0 var(--spacing-2xs, 0.625rem) 0;
+  gap: var(--spacing-2xs, 0.625rem);
+}
+
+.contact-info__list:last-of-type {
+  padding-bottom: 0;
+}
+
+.contact-info__list + .contact-info__list {
+  margin-top: var(--spacing-2xs, 0.625rem);
+}
+
+/* Empty state */
+.contact-info__empty-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.contact-info__empty-icon svg {
+  width: var(--icon-md, 2.5rem);
+  height: var(--icon-md, 2.5rem);
+  display: block;
+}
+
+.contact-info__empty-icon svg path {
+  stroke-width: 0.25rem;
+  stroke: var(--color-border, #E5E7EB);
+}
+
+.contact-info__empty-message {
+  text-align: center;
+  font-size: var(--font-size-xs, 0.813rem);
+  font-weight: var(--font-weight-normal, 400);
+  line-height: var(--line-height-tight, 1.4);
+}
+
+.contact-info__empty-icon-wrapper {
+  width: 3rem;
+  flex: 1 0 0;
+}
+
+@media (max-width: 576px) {
+  .profile__section[data-profile-section='contact-info'],
+  .profile__section--empty[data-profile-section='contact-info'] {
+    --contact-info-icon-padding-inline: 0;
+    --contact-info-icon-size: 0.8295rem;
+  }
+}
+
+@container profile-pane (max-width: 576px) {
+  .profile__section[data-profile-section='contact-info'],
+  .profile__section--empty[data-profile-section='contact-info'] {
+    --contact-info-icon-padding-inline: 0;
+    --contact-info-icon-size: 0.8295rem;
+  }
+}

package/lib/sections/contactInfo/ContactInfoSection.d.ts

@@ -1,5 +1,7 @@
+import 'solid-ui/components/actions/button';
 import { ViewerMode } from '../../types';
 import { LiveStore, NamedNode } from 'rdflib';
+import './ContactInfoSection.css';
 import { ContactInfo } from './types';
 export declare function renderContactInfoSection(store: LiveStore, subject: NamedNode, contactInfo: ContactInfo, viewerMode: ViewerMode, onSaved?: () => Promise<void> | void): import("lit-html").TemplateResult<1> | "";
 //# sourceMappingURL=ContactInfoSection.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ContactInfoSection.d.ts","sourceRoot":"","sources":["../../../src/sections/contactInfo/ContactInfoSection.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAExC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAI7C,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAgRrC,wBAAgB,wBAAwB,CACtC,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,6CAoBrC"}
+{"version":3,"file":"ContactInfoSection.d.ts","sourceRoot":"","sources":["../../../src/sections/contactInfo/ContactInfoSection.ts"],"names":[],"mappings":"AACA,OAAO,oCAAoC,CAAA;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAExC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAE7C,OAAO,0BAA0B,CAAA;AAGjC,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAkSrC,wBAAgB,wBAAwB,CACtC,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,6CAoBrC"}