contacts-pane 3.1.0 → 3.2.0

package/dist/styles/contactsPane.css

@@ -19,22 +19,22 @@
   flex-direction: column;
   align-items: stretch;
   flex: 1 1 0; /* allow it to grow but not force wrap */
-  min-width: 300px;
+  min-width: 0; /* allow sections to collapse when stacked */
   box-sizing: border-box;
   background: var(--color-section-bg);
 }
 
 .contactPane .detailsSectionContent {
   flex: 1 1 auto;
-  min-height: 200px;
+  min-height: 12.5rem; /* 200px */
   padding: var(--spacing-lg);
-  max-width: 900px;
+  max-width: 56.25rem; /* 900px */
   width: 100%;
   box-sizing: border-box;
 }
 
 .contactPane .detailsSectionContent--wide {
-  max-width: 900px;
+  max-width: 56.25rem; /* 900px */
 }
 
 .contactPane .cardFooter {
@@ -56,7 +56,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
-  max-width: 360px;
+  max-width: 22.5rem; /* 360px */
 }
 
 .contactPane .contactTypeChooser h3 {
@@ -66,7 +66,7 @@
 
 .contactPane .contactTypeSelect {
   height: var(--min-touch-target);
-  border: 1px solid var(--color-border-pale);
+  border: var(--border-width-sm, 1px) solid var(--color-border-pale);
   border-radius: var(--border-radius-base);
   padding: 0 var(--spacing-sm);
   font-size: var(--font-size-sm);
@@ -86,14 +86,14 @@
 
 .contactPane .searchInput {
   height: var(--min-touch-target);
-  border: 1px solid var(--color-border-pale);
+  border: var(--border-width-sm, 1px) solid var(--color-border-pale);
   background-color: var(--color-section-bg);
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23999' viewBox='0 0 24 24' width='20' height='20'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99c.41.41 1.09.41 1.5 0s.41-1.09 0-1.5l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
-  background-position: 8px center;
-  background-size: 20px 20px;
+  background-position: 0.5rem center; /* 8px */
+  background-size: 1.25rem 1.25rem; /* 20px 20px */
   border-radius: var(--border-radius-base);
-  padding: 0 var(--spacing-sm) 0 34px;
+  padding: 0 var(--spacing-sm) 0 2.125rem; /* 34px */
   font-size: var(--font-size-base);
   width: 100%;
   box-sizing: border-box;
@@ -132,20 +132,20 @@
 }
 
 .contactPane .contact-toolbar a {
-  margin: 0.3em;
+  margin: 0.3rem;
 }
 
 .contactPane .contact-toolbar a img {
-  width: 1.3em;
-  height: 1em;
+  width: 1.3rem;
+  height: 1rem;
   margin: 0;
 }
 
 .contact-toolbar .deleteButton {
   margin-left: auto; /* keeps delete icon on the right */
-  margin-right: 0.2em;
-  width: 1em;
-  height: 1em;
+  margin-right: var(--spacing-xxxs, 0.2rem);
+  width: var(--icon-xxs, 1rem);
+  height: var(--icon-xxs, 1rem);
   float: none; /* important: prevents overlap behavior */
 }
 
@@ -169,11 +169,6 @@
   background-color: var(--color-primary);
 }
 
-/* ── Selection & visibility states ───────────────────────────── */
-
-.contactPane .group-loading {
-}
-
 /* ── Mint new address book ───────────────────────────────────── */
 
 .contactPane .claimSuccess {
@@ -183,18 +178,18 @@
 .contactPane {
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
+  min-height: 0;
 }
 
 .contactPane .addressBook-grid {
   display: flex;
   flex-wrap: nowrap; /* keep sections side-by-side */
   flex: 1;
-  min-width: 50%;
+  min-width: 0; /* allow it to shrink */
   align-items: stretch;
   width: 100%;
   box-sizing: border-box;
-  overflow-x: auto; /* allow horizontal scroll if needed */
+  overflow-x: hidden;
 }
 
 @media ((min-width: 500px) and (max-width: 900px)) {
@@ -206,13 +201,15 @@
   }
 }
 
-.contactPane .contactPane--narrow .addressBook-grid {
+.contactPane.contactPane--narrow .addressBook-grid {
   flex-direction: column !important;
-  flex-wrap: wrap !important;
+  flex-wrap: nowrap !important;
+  min-width: 0 !important;
+  overflow-x: hidden !important;
 }
 
-.contactPane .contactPane--narrow .addressBookSection,
-.contactPane .contactPane--narrow .detailSection {
+.contactPane.contactPane--narrow .addressBookSection,
+.contactPane.contactPane--narrow .detailSection {
   flex: 1 1 100% !important;
   max-width: 100% !important;
   min-width: 0 !important;
@@ -241,11 +238,20 @@
     min-width: 0 !important;
   }
 
+
   .contactPane .addressBookSection {
-    max-height: 60vh !important;
+    max-height: none !important;
     min-height: auto !important;
-    overflow-y: auto !important;
+    overflow-y: visible !important;
     padding-bottom: var(--spacing-lg) !important;
+    display: flex !important;
+    flex-direction: column !important;
+    height: auto !important;
+  }
+
+  .contactPane .peopleSection ul {
+    max-height: 50vh;
+    overflow-y: auto;
   }
 
   .contactPane .detailSection {
@@ -270,10 +276,11 @@
   }
 
   /* Keep a normal mobile text scale while preserving comfortable touch targets */
-  .contactPane,
-  .contactPane * {
+  /* The following rule made all text much larger on mobile; comment out to restore normal font size for non-buttons.
+   .contactPane,
+   .contactPane * {
     font-size: 1.5rem !important;
-  }
+  } */
 
   .contactPane .actionButton,
   .contactPane .searchInput,
@@ -296,7 +303,7 @@
 
 
 /* Card Section Background */
-.contactPane .section-bg {
+.contactPane .addressBookSection.section-bg {
   background: var(--color-section-bg);
   padding: var(--spacing-md);
   box-sizing: border-box;
@@ -321,6 +328,7 @@
 
 /* ── Button section: horizontal scrollable row ──────────────── */
 
+
 .contactPane .buttonSection {
   display: flex;
   flex-wrap: nowrap;
@@ -334,6 +342,16 @@
   margin-bottom: 0;
 }
 
+@media (max-width: 1000px) {
+  .contactPane .buttonSection {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    background: var(--color-section-bg);
+    box-shadow: 0 2px 4px -2px rgba(0,0,0,0.04);
+  }
+}
+
 .contactPane .buttonSection::-webkit-scrollbar {
   height: 6px;
 }
@@ -510,7 +528,7 @@
 
 .contactPane .dottedHr {
   border: none;
-  border-top: 1px dotted var(--color-text-muted);
+  border-top: var(--border-width-sm, 0.1rem) dotted var(--color-text-muted);
   margin: 0;
 }
 
@@ -541,7 +559,7 @@
 }
 
 .contactPane .peopleSection li {
-  border-top: 1px solid var(--color-border-pale);
+  border-top: var(--border-width-sm, 0.1rem) solid var(--color-border-pale);
   padding: var(--spacing-xs);
 }
 
@@ -554,8 +572,8 @@
 }
 
 .contactPane .personLi-avatar {
-  width: 45px;
-  height: 45px;
+  width: 2.813rem /* 45px */;
+  height: 2.813rem /* 45px */;
   flex-shrink: 0;
   display: flex;
   align-items: center;
@@ -563,16 +581,16 @@
 }
 
 .contactPane .personLi-avatar .avatar-placeholder {
-  width: 36px;
-  height: 36px;
+  width: 2.25rem /* 36px */;
+  height: 2.25rem /* 36px */;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .contactPane .personLi-avatar img {
-  width: 40px;
-  height: 40px;
+  width: 2.5rem /* 40px */;
+  height: 2.5rem /* 40px */;
   border-radius: 50%;
   object-fit: cover;
 }

package/dist/styles/contactsRDFFormsEnforced.css

@@ -21,7 +21,7 @@
    Make the cell grow and keep the delete icon right-aligned (no overlap). */
 .contactPane td.hoverControl:has(> a) {
   width: auto !important;
-  min-width: 4em !important;
+  min-width: 4rem !important;
   justify-content: space-between !important;
 }
 
@@ -86,8 +86,8 @@
 .contactPane img[src$="go-to-this.png"],
 .individualPane img[src$="red.svg"],
 .individualPane img[src$="go-to-this.png"] {
-  width: 1.2em !important;
-  height: 1.2em !important;
+  width: 1.2rem !important;
+  height: 1.2rem !important;
   max-width: none !important;
   max-height: none !important;
   object-fit: contain;
@@ -116,8 +116,8 @@
 }
 
 .contactPane .detailSection .detailsSectionContent img[title="Continue"] {
-  width: 2em !important;
-  height: 2em !important;
+  width: var(--icon-base, 2rem) !important;
+  height: var(--icon-base, 2rem) !important;
 }
 
 /* Allow “Continue” buttons inside contactFormContainer to be visible. */
@@ -151,7 +151,7 @@
   font: inherit;
   color: var(--color-text);
   background-color: var(--color-card-bg) !important;
-  border: 1px solid var(--color-border-pale);
+  border: var(--border-width-sm) solid var(--color-border-pale);
   margin-left: 0 !important;
   margin-right: 0 !important;
 }
@@ -185,7 +185,7 @@
   font: inherit;
   color: var(--color-text);
   background-color: var(--color-card-bg) !important;
-  border: 1px solid var(--color-border-pale);
+  border: var(--border-width-sm) solid var(--color-border-pale);
 }
 
 .individualPane input[type="date"],
@@ -322,7 +322,7 @@
 
 .individualPane .choiceBox .choiceBox-selectBox select,
 .contactPane .choiceBox .choiceBox-selectBox select {
-  margin-left: 2.1em !important;
+  margin-left: 2.1rem !important;
 }
 
 /* for the Resume orga details */
@@ -331,7 +331,7 @@
 .contactPane .classifierBox .classifierBox-label {
   margin-right: 0;
   padding-left: var(--spacing-xxs);
-  width: 8em;
+  width: 8rem;
   padding: var(--spacing-xxs);
   vertical-align: middle;
 }
@@ -489,8 +489,8 @@
 .individualPane .hoverControl [data-testid="deleteButtonWithCheck"] {
   position: absolute !important;
   right: var(--spacing-xxxs) !important;
-  width: 1.5em !important;
-  height: 1.5em !important;
+  width: var(--icon-xs, 1.5rem) !important;
+  height: var(--icon-xs, 1.5rem) !important;
   display: none !important;
   align-items: center;
   justify-content: center;

package/dist/styles/groupMembership.css

@@ -24,7 +24,7 @@
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  max-width: 256px;
+  max-width: 16rem; /* 256px */
 }
 
 .contactPane .group-membership-item > button {
@@ -45,13 +45,13 @@
 }
 
 .contactPane .group-membership-item .group-membership-toolbar a {
-  margin: 0.3em;
-  margin-left: 1em;
+  margin: 0.3rem;
+  margin-left: 1rem;
 }
 
 .contactPane .group-membership-item .group-membership-toolbar a img {
-  width: 1.3em;
-  height: 1em;
+  width: 1.3rem;
+  height: 1rem;
   margin: 0;
 }
 
@@ -74,8 +74,8 @@
   top: 0 !important;
   left: 50% !important;
   transform: translateX(-50%) !important;
-  width: min(90vw, 440px) !important;
-  min-width: 280px !important;
+  width: min(90vw, 27.5rem) !important; /* 440px */
+  min-width: 17.5rem !important; /* 280px */
   max-width: 90vw !important;
   display: flex;
   align-items: center;
@@ -86,7 +86,7 @@
 .contactPane .detailsSectionContent .group-membership-item .group-membership-toolbar > div[style*="position: relative"] > div {
   position: relative !important;
   top: auto !important;
-  min-width: 280px !important;
+  min-width: 17.5rem !important; /* 280px */ 
   background: var(--color-background);
   border-radius: var(--border-radius-full);
   padding: var(--spacing-lg);

package/dist/styles/localUtils.css

@@ -37,7 +37,7 @@
   padding: var(--spacing-sm) var(--spacing-md);
   border: 1px solid var(--color-primary);
   border-radius: var(--border-radius-base);
-  font-weight: 600;
+  font-weight: var(--font-weight-bold, 600);
   cursor: pointer;
   transition: all var(--animation-duration) ease;
 }

package/dist/styles/mugshotGallery.css

@@ -4,7 +4,7 @@
 /* ── Mugshot image ───────────────────────────────────────────── */
 
 .contactPane .mugshotImage {
-  max-height: 10em;
+  max-height: 10rem;
   border-radius: var(--border-radius-full);
   margin: var(--spacing-sm);
 }

package/dist/styles/utilities.css

@@ -4,66 +4,7 @@
 */
 
 /* Utility helper classes */
-.hidden {
-  display: none !important;
-}
 
-.btn-primary {
-  min-height: var(--min-touch-target);
-  padding: var(--spacing-sm) var(--spacing-md);
-  border: 1px solid var(--color-primary);
-  border-radius: var(--border-radius-base);
-  background: var(--color-primary);
-  color: var(--color-background);
-  font-weight: 600;
-  cursor: pointer;
-  transition: all var(--animation-duration) ease;
-}
-
-.btn-primary:hover {
-  background: color-mix(in srgb, var(--color-primary) 90%, black);
-  box-shadow: var(--box-shadow-hover);
-}
-
-.btn-primary:active {
+/* different from mashlib .btn-primary:active {
   box-shadow: var(--box-shadow-active);
-}
-
-.btn-primary:disabled {
-  opacity: var(--opacity-disabled);
-  cursor: not-allowed;
-  transform: none;
-}
-
-.btn-secondary {
-  min-height: var(--min-touch-target);
-  padding: var(--spacing-sm) var(--spacing-md);
-  border: var(--border-width-thin) solid var(--color-secondary);
-  border-radius: var(--border-radius-base);
-  background: var(--color-secondary);
-  color: var(--color-background);
-  font-weight: var(--font-weight-bold);
-  cursor: pointer;
-  transition: all var(--animation-duration) ease;
-  text-decoration: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.btn-secondary:hover {
-  background: color-mix(in srgb, var(--color-secondary) 85%, black);
-}
-
-.btn-secondary:disabled {
-  opacity: var(--opacity-disabled);
-  cursor: not-allowed;
-}
-
-.action-button-focus:focus,
-.action-button-focus:focus-visible {
-  outline: 3px solid var(--color-primary) !important;
-  outline-offset: 2px !important;
-  box-shadow: 0 0 0 2px var(--color-background), var(--box-shadow-focus) !important;
-  z-index: 1;
-}
+} */

package/dist/styles/webidControl.css

@@ -83,6 +83,168 @@
   white-space: pre-wrap;
 }
 
+.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane,
+.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) table td div.contactPane.namedPane {
+  display: block;
+  width: 100% !important;
+  max-width: none !important;
+  min-width: 0 !important;
+  box-sizing: border-box;
+  container-type: inline-size;
+  container-name: nested-profile-pane;
+  margin-top: var(--spacing-sm);
+}
+
+.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profile-grid,
+.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane #main-content.profile-grid {
+  display: flex !important;
+  flex-direction: column !important;
+  gap: var(--spacing-sm) !important;
+}
+
+.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profile__main,
+.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profile__sidebar,
+.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profile__section {
+  width: 100% !important;
+  min-width: 0 !important;
+  max-width: 100% !important;
+  box-sizing: border-box;
+  overflow-wrap: anywhere;
+}
+
+.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profile__sidebar,
+.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profile__section,
+.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profile__main {
+  padding: var(--spacing-sm) !important;
+}
+
+.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profileSectionCollapsible[data-expanded="false"] .profileSectionCollapsible__content {
+  display: none !important;
+}
+
+.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profileSectionCollapsible__toggle {
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
+  min-height: auto !important;
+  min-width: auto !important;
+  padding: var(--spacing-xxs) !important;
+  border: none !important;
+  background: none !important;
+  color: var(--color-text) !important;
+}
+
+.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profileSectionCollapsible[data-expanded="true"] .profileSectionCollapsible__chevron {
+  transform: rotate(180deg);
+}
+
+.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profileSectionCollapsible__editLabel {
+  display: none !important;
+}
+
+.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .profileSectionCollapsible__editIcon {
+  display: inline !important;
+}
+
+.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .socialItem {
+  display: flex !important;
+  align-items: center !important;
+  flex: 0 0 auto !important;
+}
+
+.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .socialItem a {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  flex: 0 0 auto !important;
+  width: auto !important;
+  min-width: var(--min-touch-target) !important;
+  min-height: var(--min-touch-target) !important;
+  line-height: 0 !important;
+}
+
+.contactPane :is(.contactPane--narrow .webidControl, .webidControl.webidControl--mobile) .namedPane .socialIcon {
+  display: block !important;
+  width: 40px !important;
+  height: 40px !important;
+  min-width: 40px !important;
+  min-height: 40px !important;
+  max-width: 40px !important;
+  max-height: 40px !important;
+  object-fit: contain !important;
+  flex-shrink: 0 !important;
+}
+
+@media (max-width: 1000px) {
+  .contactPane .webidControl,
+  .contactPane .webidControl table,
+  .contactPane .webidControl tbody,
+  .contactPane .webidControl tr,
+  .contactPane .webidControl td {
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
+  }
+
+  .contactPane .webidControl table {
+    table-layout: fixed;
+  }
+
+  .contactPane .webidControl .personaRow--webid td {
+    vertical-align: top;
+  }
+
+  .contactPane .webidControl .contactPane,
+  .contactPane .webidControl .contactPane .addressBook-grid,
+  .contactPane .webidControl .contactPane .detailSection,
+  .contactPane .webidControl .contactPane .detailsSectionContent {
+    width: 100% !important;
+    max-width: 100% !important;
+    min-width: 0 !important;
+    box-sizing: border-box;
+  }
+
+  .contactPane .webidControl .contactPane .addressBook-grid {
+    flex-direction: column !important;
+    flex-wrap: nowrap !important;
+  }
+
+  .contactPane .webidControl .contactPane .detailSection,
+  .contactPane .webidControl .contactPane .addressBookSection {
+    flex: none !important;
+  }
+
+  .contactPane .webidControl .contactPane .detailsSectionContent,
+  .contactPane .webidControl .contactPane .detailsSectionContent--wide {
+    padding: var(--spacing-sm) !important;
+    overflow-y: visible !important;
+  }
+
+}
+
+@container nested-profile-pane (max-width: 900px) {
+  .contactPane .webidControl .profile-grid {
+    display: flex !important;
+    flex-direction: column !important;
+    gap: var(--spacing-sm) !important;
+  }
+
+  .contactPane .webidControl .profile-grid > * {
+    min-width: 0 !important;
+    max-width: 100% !important;
+  }
+
+  .contactPane .webidControl .profile__main,
+  .contactPane .webidControl .profile__sidebar,
+  .contactPane .webidControl .profile__section {
+    width: 100% !important;
+    min-width: 0 !important;
+    max-width: 100% !important;
+    overflow-wrap: anywhere;
+  }
+}
+
 /* ── Visibility / display helpers ────────────────────────────── */
 
 .contactPane .collapsed {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contacts-pane",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "Contacts Pane: Contacts manager for Address Book, Groups, and Individuals.",
   "main": "dist/contactsPane.js",
   "files": [
@@ -12,6 +12,8 @@
     "clean": "rm -rf dist",
     "build": "npm run clean && npm run build-dist",
     "build-dist": "webpack --progress",
+    "watch-dist": "webpack --watch",
+    "watch": "npm run watch-dist",
     "lint": "eslint",
     "lint-fix": "eslint --fix",
     "typecheck-test": "tsc --noEmit -p tsconfig.test.json",
@@ -68,6 +70,7 @@
     "css-loader": "^7.1.4",
     "eslint": "^9.39.2",
     "eslint-plugin-import": "^2.32.0",
+    "file-loader": "^6.2.0",
     "globals": "^17.1.0",
     "html-webpack-plugin": "^5.6.6",
     "jest": "^30.2.0",