solid-panes 4.2.4-test.5 → 4.2.4-test.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/schedule/schedulePane.js +39 -4
  2. package/dist/solid-panes.js +1820 -753
  3. package/dist/solid-panes.js.map +1 -1
  4. package/dist/solid-panes.min.js +38 -39
  5. package/dist/solid-panes.min.js.map +1 -1
  6. package/dist/versionInfo.js +22 -16
  7. package/package.json +6 -6
package/dist/solid-panes.js CHANGED
@@ -1033,7 +1033,11 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
1033
1033
  background-color: var(--color-info-bg) !important;
1034
1034
  }
1035
1035
 
1036
- .contactPane .detailSection {
1036
+ .contactPane .detailSection,
1037
+ .contactPane .addressBookSection {
1038
+ display: flex;
1039
+ flex-direction: column;
1040
+ align-items: stretch;
1037
1041
  flex: 1 1 0; /* allow it to grow but not force wrap */
1038
1042
  min-width: 300px;
1039
1043
  box-sizing: border-box;
@@ -1041,6 +1045,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
1041
1045
  }
1042
1046
 
1043
1047
  .contactPane .detailsSectionContent {
1048
+ flex: 1 1 auto;
1044
1049
  min-height: 200px;
1045
1050
  padding: var(--spacing-lg);
1046
1051
  max-width: 900px;
@@ -1178,10 +1183,6 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
1178
1183
  .contactPane .group-loading {
1179
1184
  }
1180
1185
 
1181
- .contactPane .hidden {
1182
- display: none;
1183
- }
1184
-
1185
1186
  /* ── Mint new address book ───────────────────────────────────── */
1186
1187
 
1187
1188
  .contactPane .claimSuccess {
@@ -1220,12 +1221,95 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
1220
1221
  }
1221
1222
  }
1222
1223
 
1223
- @media (max-width: 500px) {
1224
+ .contactPane.contactPane--narrow .addressBook-grid {
1225
+ flex-direction: column !important;
1226
+ flex-wrap: wrap !important;
1227
+ }
1228
+
1229
+ .contactPane.contactPane--narrow .addressBookSection,
1230
+ .contactPane.contactPane--narrow .detailSection {
1231
+ flex: 1 1 100% !important;
1232
+ max-width: 100% !important;
1233
+ min-width: 0 !important;
1234
+ width: 100% !important;
1235
+ }
1236
+
1237
+ @media (max-width: 1000px) {
1238
+ /* Stack sidebar + details vertically on narrow screens */
1239
+ .contactPane {
1240
+ min-height: auto !important;
1241
+ }
1242
+
1243
+ .contactPane .addressBook-grid {
1244
+ flex-direction: column !important;
1245
+ flex-wrap: nowrap !important;
1246
+ min-height: auto !important;
1247
+ height: auto !important;
1248
+ }
1249
+
1250
+ .contactPane .addressBookSection,
1251
+ .contactPane .detailSection {
1252
+ order: initial !important;
1253
+ flex: none !important;
1254
+ width: 100% !important;
1255
+ max-width: 100% !important;
1256
+ min-width: 0 !important;
1257
+ }
1258
+
1224
1259
  .contactPane .addressBookSection {
1225
- max-width: 485px;
1260
+ max-height: 60vh !important;
1261
+ min-height: auto !important;
1262
+ overflow-y: auto !important;
1263
+ padding-bottom: var(--spacing-lg) !important;
1264
+ }
1265
+
1266
+ .contactPane .detailSection {
1267
+ max-height: none !important;
1268
+ min-height: auto !important;
1269
+ overflow-y: visible !important;
1270
+ }
1271
+
1272
+ .contactPane .detailsSectionContent {
1273
+ display: flex !important;
1274
+ flex-direction: column !important;
1275
+ justify-content: flex-start !important;
1276
+ align-items: stretch !important;
1277
+ min-height: auto !important;
1278
+ height: auto !important;
1279
+ overflow-y: visible !important;
1280
+ }
1281
+
1282
+ .contactPane .detailSection > .detailsSectionContent {
1283
+ padding-top: var(--spacing-sm) !important;
1284
+ box-sizing: border-box !important;
1285
+ }
1286
+
1287
+ /* Small-screen larger text and spacing */
1288
+ .contactPane,
1289
+ .contactPane * {
1290
+ font-size: 2rem !important;
1291
+ }
1292
+
1293
+ .contactPane .actionButton,
1294
+ .contactPane .searchInput,
1295
+ .contactPane .flatButton,
1296
+ .contactPane .buttonSection button,
1297
+ .contactPane .groupButtonsList button {
1298
+ min-height: calc(var(--min-touch-target) + 0.5em) !important;
1299
+ font-size: 2rem !important;
1300
+ padding: 1em 1em !important;
1301
+ }
1302
+
1303
+ .contactPane .group-membership-item .group-membership-toolbar > img.hoverControlHide, .contactPane .group-membership-item .group-membership-toolbar > [data-testid="deleteButtonWithCheck"],
1304
+ .individualPane .hoverControl img.hoverControlHide,
1305
+ .individualPane .hoverControl [data-testid="deleteButtonWithCheck"] {
1306
+ display: inline-flex !important;
1307
+ visibility: visible !important;
1308
+ opacity: 1 !important;
1226
1309
  }
1227
1310
  }
1228
1311
 
1312
+
1229
1313
  /* Card Section Background */
1230
1314
  .contactPane .section-bg {
1231
1315
  background: var(--color-section-bg);
@@ -1235,67 +1319,19 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
1235
1319
  border-radius: 0 !important;
1236
1320
  }
1237
1321
 
1238
- /* Primary Button */
1239
- .contactPane .btn-primary {
1240
- min-height: var(--min-touch-target);
1241
- padding: var(--spacing-sm) var(--spacing-md);
1242
- border: 1px solid var(--color-primary);
1243
- border-radius: var(--border-radius-base);
1244
- background: var(--color-primary);
1245
- color: var(--color-background);
1246
- font-weight: 600;
1247
- cursor: pointer;
1248
- transition: all var(--animation-duration) ease;
1249
- }
1250
-
1251
- .contactPane .btn-primary:hover {
1252
- background: color-mix(in srgb, var(--color-primary) 90%, black);
1253
- box-shadow: 0 2px 4px rgba(124, 77, 255, 0.2);
1254
- }
1255
-
1256
- .contactPane .btn-primary:active {
1257
- box-shadow: 0 1px 2px rgba(124, 77, 255, 0.2);
1258
- }
1259
-
1260
- .contactPane .btn-primary:disabled {
1261
- opacity: var(--opacity-disabled, 0.6);
1262
- cursor: not-allowed;
1263
- transform: none;
1264
- }
1265
-
1266
- /* Secondary button */
1267
- .contactPane .btn-secondary {
1268
- min-height: var(--min-touch-target);
1269
- padding: var(--spacing-sm) var(--spacing-md);
1270
- border: var(--border-width-thin) solid var(--color-secondary);
1271
- border-radius: var(--border-radius-base);
1272
- background: var(--color-secondary);
1273
- color: var(--color-background);
1274
- font-weight: var(--font-weight-bold);
1275
- cursor: pointer;
1276
- transition: all var(--animation-duration) ease;
1277
- text-decoration: none;
1278
- display: inline-flex;
1279
- align-items: center;
1280
- justify-content: center;
1281
- }
1282
-
1283
- .contactPane .btn-secondary:hover {
1284
- background: color-mix(in srgb, var(--color-secondary) 85%, black);
1285
- }
1286
-
1287
- .contactPane .btn-secondary:disabled {
1288
- opacity: var(--opacity-disabled);
1289
- cursor: not-allowed;
1322
+ /* Keep detail section content anchored at top */
1323
+ .contactPane .detailSection {
1324
+ display: flex;
1325
+ flex-direction: column;
1326
+ justify-content: flex-start;
1327
+ align-items: stretch;
1290
1328
  }
1291
1329
 
1292
- /* Action Button Focus - used by ChatWithMe, ProfileCard */
1293
- .contactPane .action-button-focus:focus,
1294
- .contactPane .action-button-focus:focus-visible {
1295
- outline: 3px solid var(--color-primary) !important;
1296
- outline-offset: 2px !important;
1297
- box-shadow: 0 0 0 2px var(--color-background), 0 0 0 5px rgba(124, 77, 255, 0.25) !important;
1298
- z-index: 1;
1330
+ .contactPane .detailsSectionContent {
1331
+ display: flex;
1332
+ flex-direction: column;
1333
+ justify-content: flex-start;
1334
+ align-items: stretch;
1299
1335
  }
1300
1336
 
1301
1337
  /* ── Button section: horizontal scrollable row ──────────────── */
@@ -1327,7 +1363,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
1327
1363
  }
1328
1364
 
1329
1365
  .contactPane .buttonSection .selected {
1330
- background: vnone !important;
1366
+ background: none !important;
1331
1367
  }
1332
1368
 
1333
1369
  .contactPane .groupButtonsList {
@@ -1415,34 +1451,37 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
1415
1451
  position: relative;
1416
1452
  }
1417
1453
 
1418
- .contactPane .webidControl .personaRow--webid td > div[style*="position: relative"],
1419
- .contactPane .detailsSectionContent .groupButtonsList li > div[style*="position: relative"],
1420
- .contactPane .detailsSectionContent .contact-toolbar > div[style*="position: relative"],
1421
- .contactPane .detailsSectionContent .group-membership-toolbar > div[style*="position: relative"] {
1422
- position: absolute !important;
1423
- top: 0 !important;
1424
- left: 0 !important;
1425
- right: 0;
1426
- bottom: 0;
1427
- width: 100%;
1428
- height: 100%;
1429
- display: flex;
1430
- align-items: center;
1431
- justify-content: center;
1432
- background: rgba(0, 0, 0, 0.3);
1433
- z-index: 1000;
1454
+ .contactPane .webidControl div[style*="position: relative"]:has(> div[style*="display: grid"]) {
1455
+ position: static !important;
1434
1456
  }
1457
+
1458
+
1435
1459
  .contactPane .webidControl .personaRow--webid td > div[style*="position: relative"] > div,
1436
1460
  .contactPane .detailsSectionContent .groupButtonsList li > div[style*="position: relative"] > div,
1437
- .contactPane .detailsSectionContent .contact-toolbar > div[style*="position: relative"] > div,
1438
- .contactPane .detailsSectionContent .group-membership-toolbar > div[style*="position: relative"] > div {
1439
- position: relative !important;
1440
- top: auto !important;
1441
- background: var(--color-background);
1442
- border-radius: var(--border-radius-full);
1443
- padding: var(--spacing-lg);
1444
- box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
1445
- z-index: 1001;
1461
+ .contactPane .detailsSectionContent .contact-toolbar > div[style*="position: relative"] > div {
1462
+ position: absolute !important;
1463
+ top: 0 !important;
1464
+ right: 0 !important;
1465
+ left: auto !important;
1466
+ z-index: 9999 !important;
1467
+ display: grid !important;
1468
+ pointer-events: auto !important;
1469
+ opacity: 1 !important;
1470
+ visibility: visible !important;
1471
+ padding: var(--spacing-btn) !important;
1472
+ min-width: 12em !important;
1473
+ background: var(--color-background) !important;
1474
+ border: var(--border-width-sm) solid var(--color-primary) !important;
1475
+ border-radius: var(--border-radius-base) !important;
1476
+ box-shadow: var(--box-shadow-popup) !important;
1477
+ grid-template-columns: auto auto !important;
1478
+ gap: var(--spacing-xxs) !important;
1479
+ }
1480
+
1481
+ .contactPane .detailsSectionContent .contact-toolbar > div[style*="position: relative"] > div > button:has(> img[src\$=".svg"]),
1482
+ .contactPane .detailsSectionContent .group-membership-item .group-membership-toolbar > div[style*="position: relative"] > div > button:has(> img[src\$=".svg"]),
1483
+ .contactPane .webidControl .personaRow--webid td > div[style*="position: relative"] > div > button:has(> img[src\$=".svg"]) {
1484
+ background-color: transparent !important;
1446
1485
  }
1447
1486
 
1448
1487
  /* Selected state for All contacts button */
@@ -1565,271 +1604,23 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Focus indicator for keyboard naviga
1565
1604
 
1566
1605
  .contactPane .personLi--error {
1567
1606
  opacity: 0.5;
1568
- }`, "",{"version":3,"sources":["webpack://./src/styles/contactsPane.css"],"names":[],"mappings":"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","sourcesContent":["/* Focus indicator for keyboard navigation */\n.contactPane table tr[tabindex=\"0\"]:focus {\n outline: var(--focus-ring-width) solid var(--color-primary);\n outline-offset: 2px;\n background: var(--color-info-bg);\n}\n/* contactsPane styles — extracted from inline styles in contactsPane.js */\n/* Uses CSS custom properties from the global stylesheet (dev-global.css / mashlib) */\n\n/* ── Layout: Three-column browser ────────────────────────────── */\n\n.contactPane .peopleSection .selected {\n background-color: var(--color-info-bg) !important;\n}\n\n.contactPane .detailSection {\n flex: 1 1 0; /* allow it to grow but not force wrap */\n min-width: 300px;\n box-sizing: border-box;\n background: var(--color-section-bg);\n}\n\n.contactPane .detailsSectionContent {\n min-height: 200px;\n padding: var(--spacing-lg);\n max-width: 900px;\n width: 100%;\n box-sizing: border-box;\n}\n\n.contactPane .detailsSectionContent--wide {\n max-width: 900px;\n}\n\n.contactPane .cardFooter {\n display: flex;\n flex-wrap: nowrap; /* keep buttons inline */\n align-items: center; /* vertical centering if varied heights */\n gap: var(--spacing-xs);\n padding-top: var(--spacing-md);\n margin-top: var(--spacing-md);\n}\n\n.contactPane .detailsSectionContent {\n margin: 0;\n}\n\n/* ── Contact type chooser ───────────────────────────────────── */\n\n.contactPane .contactTypeChooser {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-sm);\n max-width: 360px;\n}\n\n.contactPane .contactTypeChooser h3 {\n margin: 0 0 var(--spacing-xs) 0;\n font-size: var(--font-size-lg);\n}\n\n.contactPane .contactTypeSelect {\n height: var(--min-touch-target);\n border: 1px solid var(--color-border-pale);\n border-radius: var(--border-radius-base);\n padding: 0 var(--spacing-sm);\n font-size: var(--font-size-sm);\n background: var(--color-section-bg);\n}\n\n/* ── Search ──────────────────────────────────────────────────── */\n\n.contactPane .allGroupsButton {\n border-radius: var(--border-radius-full) !important;\n /* existing styles */\n}\n/* wrapper to position clear icon/button */\n.contactPane .searchDiv {\n position: relative;\n}\n\n.contactPane .searchInput {\n height: var(--min-touch-target);\n border: 1px solid var(--color-border-pale);\n background-color: var(--color-section-bg);\n 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\");\n background-repeat: no-repeat;\n background-position: 8px center;\n background-size: 20px 20px;\n border-radius: var(--border-radius-base);\n padding: 0 var(--spacing-sm) 0 34px;\n font-size: var(--font-size-base);\n width: 100%;\n box-sizing: border-box;\n}\n\n/* clear button inside search input */\n.contactPane .searchClearButton {\n position: absolute;\n right: var(--spacing-sm);\n top: 50%;\n transform: translateY(-50%);\n border: none;\n background: transparent;\n font-size: var(--font-size-base);\n line-height: 1;\n padding: 0;\n cursor: pointer;\n color: var(--color-text-muted);\n /* visibility is controlled via the generic `.hidden` utility class */\n display: block;\n}\n.contactPane .searchClearButton.hidden {\n display: none;\n}\n.contactPane .searchClearButton:hover {\n color: var(--color-text);\n}\n\n/* ── Contact toolbar (top-right link + delete) ──────────────── */\n\n.contactPane .contact-toolbar {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n gap: var(--spacing-sm);\n padding: var(--spacing-xs) 0;\n}\n\n.contactPane .contact-toolbar a img {\n width: 1.3em;\n height: 1em;\n margin: 0;\n}\n\n/* ── \"All\" groups button ─────────────────────────────────────── */\n\n.contactPane .allGroupsButton {\n margin-left: var(--spacing-md);\n font-size: var(--font-size-base);\n}\n\n.contactPane .allGroupsButton--loading {\n background-color: var(--color-primary);\n}\n\n.contactPane .allGroupsButton--active {\n background-color: var(--color-primary);\n color: var(--color-background);\n}\n\n.contactPane .allGroupsButton--loaded {\n background-color: var(--color-primary);\n}\n\n/* ── Selection & visibility states ───────────────────────────── */\n\n.contactPane .group-loading {\n}\n\n.contactPane .hidden {\n display: none;\n}\n\n/* ── Mint new address book ───────────────────────────────────── */\n\n.contactPane .claimSuccess {\n font-size: var(--font-size-xl);\n}\n\n.contactPane {\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n}\n\n.contactPane .addressBook-grid {\n display: flex;\n flex-wrap: nowrap; /* keep sections side-by-side */\n flex: 1;\n min-width: 50%;\n align-items: stretch;\n width: 100%;\n box-sizing: border-box;\n overflow-x: auto; /* allow horizontal scroll if needed */\n}\n\n.contactPane .addressBookSection {\n flex: 1 1 350px;\n max-width: 485px;\n box-sizing: border-box;\n}\n\n@media ((min-width: 500px) and (max-width: 900px)) {\n .contactPane .addressBookSection {\n max-width: 900px;\n }\n .contactPane .addressBookSection section {\n max-width: 485px;\n }\n}\n\n@media (max-width: 500px) {\n .contactPane .addressBookSection {\n max-width: 485px;\n }\n}\n\n/* Card Section Background */\n.contactPane .section-bg {\n background: var(--color-section-bg);\n padding: var(--spacing-md);\n box-sizing: border-box;\n border: none !important;\n border-radius: 0 !important;\n}\n\n/* Primary Button */\n.contactPane .btn-primary {\n min-height: var(--min-touch-target);\n padding: var(--spacing-sm) var(--spacing-md);\n border: 1px solid var(--color-primary);\n border-radius: var(--border-radius-base);\n background: var(--color-primary);\n color: var(--color-background);\n font-weight: 600;\n cursor: pointer;\n transition: all var(--animation-duration) ease;\n}\n\n.contactPane .btn-primary:hover {\n background: color-mix(in srgb, var(--color-primary) 90%, black);\n box-shadow: 0 2px 4px rgba(124, 77, 255, 0.2);\n}\n\n.contactPane .btn-primary:active {\n box-shadow: 0 1px 2px rgba(124, 77, 255, 0.2);\n}\n\n.contactPane .btn-primary:disabled {\n opacity: var(--opacity-disabled, 0.6);\n cursor: not-allowed;\n transform: none;\n}\n\n/* Secondary button */\n.contactPane .btn-secondary {\n min-height: var(--min-touch-target);\n padding: var(--spacing-sm) var(--spacing-md);\n border: var(--border-width-thin) solid var(--color-secondary);\n border-radius: var(--border-radius-base);\n background: var(--color-secondary);\n color: var(--color-background);\n font-weight: var(--font-weight-bold);\n cursor: pointer;\n transition: all var(--animation-duration) ease;\n text-decoration: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.contactPane .btn-secondary:hover {\n background: color-mix(in srgb, var(--color-secondary) 85%, black);\n}\n\n.contactPane .btn-secondary:disabled {\n opacity: var(--opacity-disabled);\n cursor: not-allowed;\n}\n\n/* Action Button Focus - used by ChatWithMe, ProfileCard */\n.contactPane .action-button-focus:focus,\n.contactPane .action-button-focus:focus-visible {\n outline: 3px solid var(--color-primary) !important;\n outline-offset: 2px !important;\n box-shadow: 0 0 0 2px var(--color-background), 0 0 0 5px rgba(124, 77, 255, 0.25) !important;\n z-index: 1;\n}\n\n/* ── Button section: horizontal scrollable row ──────────────── */\n\n.contactPane .buttonSection {\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n padding: var(--spacing-sm);\n padding-bottom: 0;\n overflow-x: auto;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: thin;\n margin-bottom: 0;\n}\n\n.contactPane .buttonSection::-webkit-scrollbar {\n height: 6px;\n}\n\n.contactPane .buttonSection::-webkit-scrollbar-thumb {\n background: var(--color-border-pale);\n border-radius: var(--border-radius-base);\n}\n\n.contactPane .buttonSection::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.contactPane .buttonSection .selected {\n background: vnone !important;\n}\n\n.contactPane .groupButtonsList {\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n gap: var(--spacing-xs);\n list-style: none;\n}\n\n.contactPane .buttonSection .groupButtonsList {\n margin-left: var(--spacing-xs);\n margin-right: var(--spacing-xs);\n padding-left: 0;\n}\n\n.contactPane .groupButtonsList li {\n flex-shrink: 0;\n}\n\n.contactPane .groupButtonsList button {\n white-space: nowrap;\n flex-shrink: 0;\n min-width: max-content;\n margin-left: 0;\n}\n\n/* Groups list in details section — flexible 2-column grid */\n.contactPane .detailsSectionContent .groupButtonsList {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: var(--spacing-sm);\n list-style: none;\n padding: 0;\n width: 100%;\n box-sizing: border-box;\n}\n\n.contactPane .detailsSectionContent .groupButtonsList li {\n width: 100%;\n aspect-ratio: 1 / 1;\n}\n\n.contactPane .detailsSectionContent .groupButtonsList button {\n width: 100%;\n height: 100%;\n text-align: center;\n border-radius: var(--border-radius-base);\n word-wrap: break-word;\n overflow-wrap: break-word;\n}\n\n@media (max-width: 599px) {\n .contactPane .detailsSectionContent .groupButtonsList {\n grid-template-columns: repeat(2, 1fr);\n gap: var(--spacing-xs);\n }\n\n .contactPane .detailsSectionContent .groupButtonsList button {\n font-size: var(--font-size-sm);\n border-radius: var(--border-radius-base);\n }\n}\n\n@media (min-width: 900px) {\n .contactPane .detailsSectionContent .groupButtonsList {\n grid-template-columns: repeat(3, 1fr);\n }\n}\n\n.contactPane .detailsSectionContent .newGroupBtn {\n width: 100%;\n box-sizing: border-box;\n margin-top: var(--spacing-sm);\n}\n\n.contactPane .detailsSectionContent h3 {\n font-size: var(--font-size-xl);\n margin-bottom: var(--spacing-sm);\n padding-left: 0;\n}\n\n/* Delete confirmation POPUP — centered overlay in details section */\n.contactPane .detailSection {\n position: relative;\n}\n\n.contactPane .webidControl .personaRow--webid td > div[style*=\"position: relative\"],\n.contactPane .detailsSectionContent .groupButtonsList li > div[style*=\"position: relative\"],\n.contactPane .detailsSectionContent .contact-toolbar > div[style*=\"position: relative\"],\n.contactPane .detailsSectionContent .group-membership-toolbar > div[style*=\"position: relative\"] {\n position: absolute !important;\n top: 0 !important;\n left: 0 !important;\n right: 0;\n bottom: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(0, 0, 0, 0.3);\n z-index: 1000;\n}\n.contactPane .webidControl .personaRow--webid td > div[style*=\"position: relative\"] > div,\n.contactPane .detailsSectionContent .groupButtonsList li > div[style*=\"position: relative\"] > div,\n.contactPane .detailsSectionContent .contact-toolbar > div[style*=\"position: relative\"] > div,\n.contactPane .detailsSectionContent .group-membership-toolbar > div[style*=\"position: relative\"] > div {\n position: relative !important;\n top: auto !important;\n background: var(--color-background);\n border-radius: var(--border-radius-full);\n padding: var(--spacing-lg);\n box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);\n z-index: 1001;\n}\n\n/* Selected state for All contacts button */\n.contactPane .allGroupsButton--selected {\n background-color: var(--color-primary);\n color: var(--color-background);\n}\n\n/* ── Header section ──────────────────────────────────────────── */\n\n.contactPane .headerSection {\n background: var(--color-background);\n padding: var(--spacing-sm);\n border-top-left-radius: var(--border-radius-full);\n border-top-right-radius: var(--border-radius-full);\n margin-bottom: 0;\n}\n\n.contactPane .headerSection header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 0;\n}\n\n.contactPane .headerSection h2 {\n margin-bottom: 0;\n}\n\n/* ── Dotted horizontal rule ─────────────────────────────────── */\n\n.contactPane .dottedHr {\n border: none;\n border-top: 1px dotted var(--color-text-muted);\n margin: 0;\n}\n\n/* ── Search section ─────────────────────────────────────────── */\n\n.contactPane .searchSection {\n padding: var(--spacing-sm);\n padding-bottom: 0;\n margin-bottom: 0;\n}\n\n/* ── People list section ────────────────────────────────────── */\n\n.contactPane .peopleSection {\n display: flex;\n background: var(--color-background);\n border-top: 1px dotted var(--color-text-muted);\n margin-bottom: 0;\n}\n\n.contactPane .peopleSection ul {\n list-style: none;\n padding: 0;\n margin: 0;\n width: 100%;\n max-height: 70vh;\n overflow-y: auto;\n}\n\n.contactPane .peopleSection li {\n border-top: 1px solid var(--color-border-pale);\n padding: var(--spacing-xs);\n}\n\n/* ── Person list item (addressBookPresenter) ─────────────────── */\n\n.contactPane .personLi-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.contactPane .personLi-avatar {\n width: 45px;\n height: 45px;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.contactPane .personLi-avatar .avatar-placeholder {\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.contactPane .personLi-avatar img {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n object-fit: cover;\n}\n\n.contactPane .personLi-info {\n flex: 1;\n margin-left: var(--spacing-sm);\n overflow: hidden;\n}\n\n.contactPane .personLi-name {\n font-weight: bold;\n font-size: var(--font-size-base);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.contactPane .personLi-arrow {\n margin-left: auto;\n display: flex;\n align-items: center;\n}\n\n.contactPane .personLi--error {\n opacity: 0.5;\n}"],"sourceRoot":""}]);
1607
+ }`, "",{"version":3,"sources":["webpack://./src/styles/contactsPane.css"],"names":[],"mappings":"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","sourcesContent":["/* Focus indicator for keyboard navigation */\n.contactPane table tr[tabindex=\"0\"]:focus {\n outline: var(--focus-ring-width) solid var(--color-primary);\n outline-offset: 2px;\n background: var(--color-info-bg);\n}\n/* contactsPane styles — extracted from inline styles in contactsPane.js */\n/* Uses CSS custom properties from the global stylesheet (dev-global.css / mashlib) */\n\n/* ── Layout: Three-column browser ────────────────────────────── */\n\n.contactPane .peopleSection .selected {\n background-color: var(--color-info-bg) !important;\n}\n\n.contactPane .detailSection,\n.contactPane .addressBookSection {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n flex: 1 1 0; /* allow it to grow but not force wrap */\n min-width: 300px;\n box-sizing: border-box;\n background: var(--color-section-bg);\n}\n\n.contactPane .detailsSectionContent {\n flex: 1 1 auto;\n min-height: 200px;\n padding: var(--spacing-lg);\n max-width: 900px;\n width: 100%;\n box-sizing: border-box;\n}\n\n.contactPane .detailsSectionContent--wide {\n max-width: 900px;\n}\n\n.contactPane .cardFooter {\n display: flex;\n flex-wrap: nowrap; /* keep buttons inline */\n align-items: center; /* vertical centering if varied heights */\n gap: var(--spacing-xs);\n padding-top: var(--spacing-md);\n margin-top: var(--spacing-md);\n}\n\n.contactPane .detailsSectionContent {\n margin: 0;\n}\n\n/* ── Contact type chooser ───────────────────────────────────── */\n\n.contactPane .contactTypeChooser {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-sm);\n max-width: 360px;\n}\n\n.contactPane .contactTypeChooser h3 {\n margin: 0 0 var(--spacing-xs) 0;\n font-size: var(--font-size-lg);\n}\n\n.contactPane .contactTypeSelect {\n height: var(--min-touch-target);\n border: 1px solid var(--color-border-pale);\n border-radius: var(--border-radius-base);\n padding: 0 var(--spacing-sm);\n font-size: var(--font-size-sm);\n background: var(--color-section-bg);\n}\n\n/* ── Search ──────────────────────────────────────────────────── */\n\n.contactPane .allGroupsButton {\n border-radius: var(--border-radius-full) !important;\n /* existing styles */\n}\n/* wrapper to position clear icon/button */\n.contactPane .searchDiv {\n position: relative;\n}\n\n.contactPane .searchInput {\n height: var(--min-touch-target);\n border: 1px solid var(--color-border-pale);\n background-color: var(--color-section-bg);\n 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\");\n background-repeat: no-repeat;\n background-position: 8px center;\n background-size: 20px 20px;\n border-radius: var(--border-radius-base);\n padding: 0 var(--spacing-sm) 0 34px;\n font-size: var(--font-size-base);\n width: 100%;\n box-sizing: border-box;\n}\n\n/* clear button inside search input */\n.contactPane .searchClearButton {\n position: absolute;\n right: var(--spacing-sm);\n top: 50%;\n transform: translateY(-50%);\n border: none;\n background: transparent;\n font-size: var(--font-size-base);\n line-height: 1;\n padding: 0;\n cursor: pointer;\n color: var(--color-text-muted);\n /* visibility is controlled via the generic `.hidden` utility class */\n display: block;\n}\n.contactPane .searchClearButton.hidden {\n display: none;\n}\n.contactPane .searchClearButton:hover {\n color: var(--color-text);\n}\n\n/* ── Contact toolbar (top-right link + delete) ──────────────── */\n\n.contactPane .contact-toolbar {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n gap: var(--spacing-sm);\n padding: var(--spacing-xs) 0;\n}\n\n.contactPane .contact-toolbar a img {\n width: 1.3em;\n height: 1em;\n margin: 0;\n}\n\n/* ── \"All\" groups button ─────────────────────────────────────── */\n\n.contactPane .allGroupsButton {\n margin-left: var(--spacing-md);\n font-size: var(--font-size-base);\n}\n\n.contactPane .allGroupsButton--loading {\n background-color: var(--color-primary);\n}\n\n.contactPane .allGroupsButton--active {\n background-color: var(--color-primary);\n color: var(--color-background);\n}\n\n.contactPane .allGroupsButton--loaded {\n background-color: var(--color-primary);\n}\n\n/* ── Selection & visibility states ───────────────────────────── */\n\n.contactPane .group-loading {\n}\n\n/* ── Mint new address book ───────────────────────────────────── */\n\n.contactPane .claimSuccess {\n font-size: var(--font-size-xl);\n}\n\n.contactPane {\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n}\n\n.contactPane .addressBook-grid {\n display: flex;\n flex-wrap: nowrap; /* keep sections side-by-side */\n flex: 1;\n min-width: 50%;\n align-items: stretch;\n width: 100%;\n box-sizing: border-box;\n overflow-x: auto; /* allow horizontal scroll if needed */\n}\n\n.contactPane .addressBookSection {\n flex: 1 1 350px;\n max-width: 485px;\n box-sizing: border-box;\n}\n\n@media ((min-width: 500px) and (max-width: 900px)) {\n .contactPane .addressBookSection {\n max-width: 900px;\n }\n .contactPane .addressBookSection section {\n max-width: 485px;\n }\n}\n\n.contactPane.contactPane--narrow .addressBook-grid {\n flex-direction: column !important;\n flex-wrap: wrap !important;\n}\n\n.contactPane.contactPane--narrow .addressBookSection,\n.contactPane.contactPane--narrow .detailSection {\n flex: 1 1 100% !important;\n max-width: 100% !important;\n min-width: 0 !important;\n width: 100% !important;\n}\n\n@media (max-width: 1000px) {\n /* Stack sidebar + details vertically on narrow screens */\n .contactPane {\n min-height: auto !important;\n }\n\n .contactPane .addressBook-grid {\n flex-direction: column !important;\n flex-wrap: nowrap !important;\n min-height: auto !important;\n height: auto !important;\n }\n\n .contactPane .addressBookSection,\n .contactPane .detailSection {\n order: initial !important;\n flex: none !important;\n width: 100% !important;\n max-width: 100% !important;\n min-width: 0 !important;\n }\n\n .contactPane .addressBookSection {\n max-height: 60vh !important;\n min-height: auto !important;\n overflow-y: auto !important;\n padding-bottom: var(--spacing-lg) !important;\n }\n\n .contactPane .detailSection {\n max-height: none !important;\n min-height: auto !important;\n overflow-y: visible !important;\n }\n\n .contactPane .detailsSectionContent {\n display: flex !important;\n flex-direction: column !important;\n justify-content: flex-start !important;\n align-items: stretch !important;\n min-height: auto !important;\n height: auto !important;\n overflow-y: visible !important;\n }\n\n .contactPane .detailSection > .detailsSectionContent {\n padding-top: var(--spacing-sm) !important;\n box-sizing: border-box !important;\n }\n\n /* Small-screen larger text and spacing */\n .contactPane,\n .contactPane * {\n font-size: 2rem !important;\n }\n\n .contactPane .actionButton,\n .contactPane .searchInput,\n .contactPane .flatButton,\n .contactPane .buttonSection button,\n .contactPane .groupButtonsList button {\n min-height: calc(var(--min-touch-target) + 0.5em) !important;\n font-size: 2rem !important;\n padding: 1em 1em !important;\n }\n\n .contactPane .group-membership-item .group-membership-toolbar > img.hoverControlHide, .contactPane .group-membership-item .group-membership-toolbar > [data-testid=\"deleteButtonWithCheck\"],\n .individualPane .hoverControl img.hoverControlHide, \n .individualPane .hoverControl [data-testid=\"deleteButtonWithCheck\"] {\n display: inline-flex !important;\n visibility: visible !important;\n opacity: 1 !important;\n }\n}\n\n\n/* Card Section Background */\n.contactPane .section-bg {\n background: var(--color-section-bg);\n padding: var(--spacing-md);\n box-sizing: border-box;\n border: none !important;\n border-radius: 0 !important;\n}\n\n/* Keep detail section content anchored at top */\n.contactPane .detailSection {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: stretch;\n}\n\n.contactPane .detailsSectionContent {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: stretch;\n}\n\n/* ── Button section: horizontal scrollable row ──────────────── */\n\n.contactPane .buttonSection {\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n padding: var(--spacing-sm);\n padding-bottom: 0;\n overflow-x: auto;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: thin;\n margin-bottom: 0;\n}\n\n.contactPane .buttonSection::-webkit-scrollbar {\n height: 6px;\n}\n\n.contactPane .buttonSection::-webkit-scrollbar-thumb {\n background: var(--color-border-pale);\n border-radius: var(--border-radius-base);\n}\n\n.contactPane .buttonSection::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.contactPane .buttonSection .selected {\n background: none !important;\n}\n\n.contactPane .groupButtonsList {\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n gap: var(--spacing-xs);\n list-style: none;\n}\n\n.contactPane .buttonSection .groupButtonsList {\n margin-left: var(--spacing-xs);\n margin-right: var(--spacing-xs);\n padding-left: 0;\n}\n\n.contactPane .groupButtonsList li {\n flex-shrink: 0;\n}\n\n.contactPane .groupButtonsList button {\n white-space: nowrap;\n flex-shrink: 0;\n min-width: max-content;\n margin-left: 0;\n}\n\n/* Groups list in details section — flexible 2-column grid */\n.contactPane .detailsSectionContent .groupButtonsList {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: var(--spacing-sm);\n list-style: none;\n padding: 0;\n width: 100%;\n box-sizing: border-box;\n}\n\n.contactPane .detailsSectionContent .groupButtonsList li {\n width: 100%;\n aspect-ratio: 1 / 1;\n}\n\n.contactPane .detailsSectionContent .groupButtonsList button {\n width: 100%;\n height: 100%;\n text-align: center;\n border-radius: var(--border-radius-base);\n word-wrap: break-word;\n overflow-wrap: break-word;\n}\n\n@media (max-width: 599px) {\n .contactPane .detailsSectionContent .groupButtonsList {\n grid-template-columns: repeat(2, 1fr);\n gap: var(--spacing-xs);\n }\n\n .contactPane .detailsSectionContent .groupButtonsList button {\n font-size: var(--font-size-sm);\n border-radius: var(--border-radius-base);\n }\n}\n\n@media (min-width: 900px) {\n .contactPane .detailsSectionContent .groupButtonsList {\n grid-template-columns: repeat(3, 1fr);\n }\n}\n\n.contactPane .detailsSectionContent .newGroupBtn {\n width: 100%;\n box-sizing: border-box;\n margin-top: var(--spacing-sm);\n}\n\n.contactPane .detailsSectionContent h3 {\n font-size: var(--font-size-xl);\n margin-bottom: var(--spacing-sm);\n padding-left: 0;\n}\n\n/* Delete confirmation POPUP — centered overlay in details section */\n.contactPane .detailSection {\n position: relative;\n}\n\n.contactPane .webidControl div[style*=\"position: relative\"]:has(> div[style*=\"display: grid\"]) {\n position: static !important;\n}\n\n\n.contactPane .webidControl .personaRow--webid td > div[style*=\"position: relative\"] > div,\n.contactPane .detailsSectionContent .groupButtonsList li > div[style*=\"position: relative\"] > div,\n.contactPane .detailsSectionContent .contact-toolbar > div[style*=\"position: relative\"] > div {\n position: absolute !important;\n top: 0 !important;\n right: 0 !important;\n left: auto !important;\n z-index: 9999 !important;\n display: grid !important;\n pointer-events: auto !important;\n opacity: 1 !important;\n visibility: visible !important;\n padding: var(--spacing-btn) !important;\n min-width: 12em !important;\n background: var(--color-background) !important;\n border: var(--border-width-sm) solid var(--color-primary) !important;\n border-radius: var(--border-radius-base) !important;\n box-shadow: var(--box-shadow-popup) !important;\n grid-template-columns: auto auto !important;\n gap: var(--spacing-xxs) !important;\n}\n\n.contactPane .detailsSectionContent .contact-toolbar > div[style*=\"position: relative\"] > div > button:has(> img[src$=\".svg\"]),\n.contactPane .detailsSectionContent .group-membership-item .group-membership-toolbar > div[style*=\"position: relative\"] > div > button:has(> img[src$=\".svg\"]),\n.contactPane .webidControl .personaRow--webid td > div[style*=\"position: relative\"] > div > button:has(> img[src$=\".svg\"]) {\n background-color: transparent !important;\n}\n\n/* Selected state for All contacts button */\n.contactPane .allGroupsButton--selected {\n background-color: var(--color-primary);\n color: var(--color-background);\n}\n\n/* ── Header section ──────────────────────────────────────────── */\n\n.contactPane .headerSection {\n background: var(--color-background);\n padding: var(--spacing-sm);\n border-top-left-radius: var(--border-radius-full);\n border-top-right-radius: var(--border-radius-full);\n margin-bottom: 0;\n}\n\n.contactPane .headerSection header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 0;\n}\n\n.contactPane .headerSection h2 {\n margin-bottom: 0;\n}\n\n/* ── Dotted horizontal rule ─────────────────────────────────── */\n\n.contactPane .dottedHr {\n border: none;\n border-top: 1px dotted var(--color-text-muted);\n margin: 0;\n}\n\n/* ── Search section ─────────────────────────────────────────── */\n\n.contactPane .searchSection {\n padding: var(--spacing-sm);\n padding-bottom: 0;\n margin-bottom: 0;\n}\n\n/* ── People list section ────────────────────────────────────── */\n\n.contactPane .peopleSection {\n display: flex;\n background: var(--color-background);\n border-top: 1px dotted var(--color-text-muted);\n margin-bottom: 0;\n}\n\n.contactPane .peopleSection ul {\n list-style: none;\n padding: 0;\n margin: 0;\n width: 100%;\n max-height: 70vh;\n overflow-y: auto;\n}\n\n.contactPane .peopleSection li {\n border-top: 1px solid var(--color-border-pale);\n padding: var(--spacing-xs);\n}\n\n/* ── Person list item (addressBookPresenter) ─────────────────── */\n\n.contactPane .personLi-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.contactPane .personLi-avatar {\n width: 45px;\n height: 45px;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.contactPane .personLi-avatar .avatar-placeholder {\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.contactPane .personLi-avatar img {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n object-fit: cover;\n}\n\n.contactPane .personLi-info {\n flex: 1;\n margin-left: var(--spacing-sm);\n overflow: hidden;\n}\n\n.contactPane .personLi-name {\n font-weight: bold;\n font-size: var(--font-size-base);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.contactPane .personLi-arrow {\n margin-left: auto;\n display: flex;\n align-items: center;\n}\n\n.contactPane .personLi--error {\n opacity: 0.5;\n}"],"sourceRoot":""}]);
1569
1608
  // Exports
1570
1609
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
1571
1610
 
1572
1611
 
1573
1612
  /***/ },
1574
1613
 
1575
- /***/ 93
1576
- (module, __nested_webpack_exports__, __nested_webpack_require_35077__) {
1614
+ /***/ 686
1615
+ (module, __nested_webpack_exports__, __nested_webpack_require_37866__) {
1577
1616
 
1578
- /* harmony export */ __nested_webpack_require_35077__.d(__nested_webpack_exports__, {
1617
+ /* harmony export */ __nested_webpack_require_37866__.d(__nested_webpack_exports__, {
1579
1618
  /* harmony export */ A: () => (__WEBPACK_DEFAULT_EXPORT__)
1580
1619
  /* harmony export */ });
1581
- /* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __nested_webpack_require_35077__(354);
1582
- /* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_35077__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
1583
- /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __nested_webpack_require_35077__(314);
1584
- /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_35077__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
1585
- // Imports
1586
-
1587
-
1588
- var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
1589
- // Module
1590
- ___CSS_LOADER_EXPORT___.push([module.id, `/* ── Group Membership Section ──────────────────────────────── */
1591
-
1592
- .contactPane .group-membership-container {
1593
- padding: var(--spacing-sm) 0;
1594
- }
1595
-
1596
- /* Grid wrapper — matches detailsSectionContent groupButtonsList */
1597
- .contactPane .group-pills-wrapper {
1598
- display: grid;
1599
- grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
1600
- gap: var(--spacing-sm);
1601
- list-style: none;
1602
- padding: 0;
1603
- margin: 0;
1604
- width: 100%;
1605
- }
1606
-
1607
- .contactPane .group-pills-wrapper span {
1608
- width: max-content;
1609
- }
1610
-
1611
- /* Each group item: button on top, toolbar below */
1612
- .contactPane .group-membership-item {
1613
- display: flex;
1614
- flex-direction: column;
1615
- align-items: stretch;
1616
- max-width: 256px;
1617
- }
1618
-
1619
- .contactPane .group-membership-item > button {
1620
- width: 100%;
1621
- text-align: center;
1622
- border-radius: var(--border-radius-base);
1623
- word-wrap: break-word;
1624
- overflow-wrap: break-word;
1625
- min-height: var(--min-touch-target);
1626
- }
1627
-
1628
- /* Toolbar with link icon and delete button below each group button */
1629
- .contactPane .group-membership-toolbar {
1630
- display: flex;
1631
- justify-content: flex-end;
1632
- align-items: center;
1633
- gap: var(--spacing-xs);
1634
- padding: var(--spacing-xs) 0 0 0;
1635
- }
1636
-
1637
- .contactPane .group-membership-toolbar a img {
1638
- width: 1.3em;
1639
- height: 1em;
1640
- margin: 0;
1641
- }
1642
-
1643
- @media (max-width: 599px) {
1644
- .contactPane .group-pills-wrapper {
1645
- grid-template-columns: repeat(2, 1fr);
1646
- gap: var(--spacing-xs);
1647
- max-width: 100%;
1648
- }
1649
-
1650
- .contactPane .group-membership-item > button {
1651
- font-size: var(--font-size-sm);
1652
- border-radius: var(--border-radius-base);
1653
- }
1654
- }
1655
-
1656
- @media (min-width: 900px) {
1657
- .contactPane .group-pills-wrapper {
1658
- grid-template-columns: repeat(3, 1fr);
1659
- gap: var(--spacing-sm);
1660
- }
1661
- }
1662
- `, "",{"version":3,"sources":["webpack://./src/styles/groupMembership.css"],"names":[],"mappings":"AAAA,iEAAiE;;AAEjE;EACE,4BAA4B;AAC9B;;AAEA,kEAAkE;AAClE;EACE,aAAa;EACb,2DAA2D;EAC3D,sBAAsB;EACtB,gBAAgB;EAChB,UAAU;EACV,SAAS;EACT,WAAW;AACb;;AAEA;EACE,kBAAkB;AACpB;;AAEA,kDAAkD;AAClD;EACE,aAAa;EACb,sBAAsB;EACtB,oBAAoB;EACpB,gBAAgB;AAClB;;AAEA;EACE,WAAW;EACX,kBAAkB;EAClB,wCAAwC;EACxC,qBAAqB;EACrB,yBAAyB;EACzB,mCAAmC;AACrC;;AAEA,qEAAqE;AACrE;EACE,aAAa;EACb,yBAAyB;EACzB,mBAAmB;EACnB,sBAAsB;EACtB,gCAAgC;AAClC;;AAEA;EACE,YAAY;EACZ,WAAW;EACX,SAAS;AACX;;AAEA;EACE;IACE,qCAAqC;IACrC,sBAAsB;IACtB,eAAe;EACjB;;EAEA;IACE,8BAA8B;IAC9B,wCAAwC;EAC1C;AACF;;AAEA;EACE;IACE,qCAAqC;IACrC,sBAAsB;EACxB;AACF","sourcesContent":["/* ── Group Membership Section ──────────────────────────────── */\n\n.contactPane .group-membership-container {\n padding: var(--spacing-sm) 0;\n}\n\n/* Grid wrapper — matches detailsSectionContent groupButtonsList */\n.contactPane .group-pills-wrapper {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: var(--spacing-sm);\n list-style: none;\n padding: 0;\n margin: 0;\n width: 100%;\n}\n\n.contactPane .group-pills-wrapper span {\n width: max-content;\n}\n\n/* Each group item: button on top, toolbar below */\n.contactPane .group-membership-item {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n max-width: 256px;\n}\n\n.contactPane .group-membership-item > button {\n width: 100%;\n text-align: center;\n border-radius: var(--border-radius-base);\n word-wrap: break-word;\n overflow-wrap: break-word;\n min-height: var(--min-touch-target);\n}\n\n/* Toolbar with link icon and delete button below each group button */\n.contactPane .group-membership-toolbar {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n gap: var(--spacing-xs);\n padding: var(--spacing-xs) 0 0 0;\n}\n\n.contactPane .group-membership-toolbar a img {\n width: 1.3em;\n height: 1em;\n margin: 0;\n}\n\n@media (max-width: 599px) {\n .contactPane .group-pills-wrapper {\n grid-template-columns: repeat(2, 1fr);\n gap: var(--spacing-xs);\n max-width: 100%;\n }\n\n .contactPane .group-membership-item > button {\n font-size: var(--font-size-sm);\n border-radius: var(--border-radius-base);\n }\n}\n\n@media (min-width: 900px) {\n .contactPane .group-pills-wrapper {\n grid-template-columns: repeat(3, 1fr);\n gap: var(--spacing-sm);\n }\n}\n"],"sourceRoot":""}]);
1663
- // Exports
1664
- /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
1665
-
1666
-
1667
- /***/ },
1668
-
1669
- /***/ 479
1670
- (module, __nested_webpack_exports__, __nested_webpack_require_40552__) {
1671
-
1672
- /* harmony export */ __nested_webpack_require_40552__.d(__nested_webpack_exports__, {
1673
- /* harmony export */ A: () => (__WEBPACK_DEFAULT_EXPORT__)
1674
- /* harmony export */ });
1675
- /* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __nested_webpack_require_40552__(354);
1676
- /* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_40552__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
1677
- /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __nested_webpack_require_40552__(314);
1678
- /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_40552__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
1679
- // Imports
1680
-
1681
-
1682
- var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
1683
- // Module
1684
- ___CSS_LOADER_EXPORT___.push([module.id, `/* individual.js styles — extracted from inline styles */
1685
-
1686
- /* ── Individual pane container ───────────────────────────────── */
1687
-
1688
- .individualPane {
1689
- padding: var(--spacing-xs) var(--spacing-lg) var(--spacing-md) var(--spacing-lg);
1690
- background: var(--color-section-bg);
1691
- border-radius: var(--border-radius-full);
1692
- box-shadow: var(--box-shadow);
1693
- box-sizing: border-box;
1694
- max-width: 100%;
1695
- }`, "",{"version":3,"sources":["webpack://./src/styles/individual.css"],"names":[],"mappings":"AAAA,wDAAwD;;AAExD,mEAAmE;;AAEnE;EACE,gFAAgF;EAChF,mCAAmC;EACnC,wCAAwC;EACxC,6BAA6B;EAC7B,sBAAsB;EACtB,eAAe;AACjB","sourcesContent":["/* individual.js styles — extracted from inline styles */\n\n/* ── Individual pane container ───────────────────────────────── */\n\n.individualPane {\n padding: var(--spacing-xs) var(--spacing-lg) var(--spacing-md) var(--spacing-lg);\n background: var(--color-section-bg);\n border-radius: var(--border-radius-full);\n box-shadow: var(--box-shadow);\n box-sizing: border-box;\n max-width: 100%;\n}"],"sourceRoot":""}]);
1696
- // Exports
1697
- /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
1698
-
1699
-
1700
- /***/ },
1701
-
1702
- /***/ 546
1703
- (module, __nested_webpack_exports__, __nested_webpack_require_42919__) {
1704
-
1705
- /* harmony export */ __nested_webpack_require_42919__.d(__nested_webpack_exports__, {
1706
- /* harmony export */ A: () => (__WEBPACK_DEFAULT_EXPORT__)
1707
- /* harmony export */ });
1708
- /* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __nested_webpack_require_42919__(354);
1709
- /* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_42919__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
1710
- /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __nested_webpack_require_42919__(314);
1711
- /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_42919__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
1712
- // Imports
1713
-
1714
-
1715
- var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
1716
- // Module
1717
- ___CSS_LOADER_EXPORT___.push([module.id, `/* CSS for the accessible modal dialogs created by localUtils.js */
1718
-
1719
- /* backdrop / focus trap container */
1720
- .focus-trap {
1721
- position: fixed;
1722
- top: 0;
1723
- left: 0;
1724
- width: 100%;
1725
- height: 100%;
1726
- z-index: 9999;
1727
- background: rgba(0, 0, 0, 0.5);
1728
- display: flex;
1729
- justify-content: center;
1730
- align-items: center;
1731
- }
1732
-
1733
- .focus-trap.hidden {
1734
- display: none;
1735
- }
1736
-
1737
- /* inner dialog box */
1738
- .focus-trap .modal {
1739
- background: var(--color-background);
1740
- padding: var(--spacing-lg);
1741
- border-radius: var(--border-radius-base);
1742
- max-width: 90%;
1743
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
1744
- }
1745
-
1746
- /* button container: center buttons horizontally (uses id in markup) */
1747
- #contacts-modal #modal-buttons {
1748
- margin-top: var(--spacing-md);
1749
- display: flex;
1750
- justify-content: center;
1751
- gap: var(--spacing-sm);
1752
- }
1753
-
1754
- /* buttons themselves use the shared btn-primary rules */
1755
- #contacts-modal .modal button {
1756
- min-height: var(--min-touch-target);
1757
- padding: var(--spacing-sm) var(--spacing-md);
1758
- border: 1px solid var(--color-primary);
1759
- border-radius: var(--border-radius-base);
1760
- font-weight: 600;
1761
- cursor: pointer;
1762
- transition: all var(--animation-duration) ease;
1763
- }
1764
-
1765
- #contacts-modal .modal button.btn-primary {
1766
- background: var(--color-primary);
1767
- color: var(--color-background);
1768
- }
1769
-
1770
- #contacts-modal .modal button.btn-primary:hover {
1771
- background: color-mix(in srgb, var(--color-primary) 90%, black);
1772
- box-shadow: 0 2px 4px rgba(124, 77, 255, 0.2);
1773
- }
1774
-
1775
- #contacts-modal .modal button.btn-primary:active {
1776
- box-shadow: 0 1px 2px rgba(124, 77, 255, 0.2);
1777
- }
1778
-
1779
- #contacts-modal .modal button:disabled {
1780
- opacity: var(--opacity-disabled, 0.6);
1781
- cursor: not-allowed;
1782
- transform: none;
1783
- }
1784
- `, "",{"version":3,"sources":["webpack://./src/styles/localUtils.css"],"names":[],"mappings":"AAAA,kEAAkE;;AAElE,oCAAoC;AACpC;EACE,eAAe;EACf,MAAM;EACN,OAAO;EACP,WAAW;EACX,YAAY;EACZ,aAAa;EACb,8BAA8B;EAC9B,aAAa;EACb,uBAAuB;EACvB,mBAAmB;AACrB;;AAEA;EACE,aAAa;AACf;;AAEA,qBAAqB;AACrB;EACE,mCAAmC;EACnC,0BAA0B;EAC1B,wCAAwC;EACxC,cAAc;EACd,yCAAyC;AAC3C;;AAEA,sEAAsE;AACtE;EACE,6BAA6B;EAC7B,aAAa;EACb,uBAAuB;EACvB,sBAAsB;AACxB;;AAEA,wDAAwD;AACxD;EACE,mCAAmC;EACnC,4CAA4C;EAC5C,sCAAsC;EACtC,wCAAwC;EACxC,gBAAgB;EAChB,eAAe;EACf,8CAA8C;AAChD;;AAEA;EACE,gCAAgC;EAChC,8BAA8B;AAChC;;AAEA;EACE,+DAA+D;EAC/D,6CAA6C;AAC/C;;AAEA;EACE,6CAA6C;AAC/C;;AAEA;EACE,qCAAqC;EACrC,mBAAmB;EACnB,eAAe;AACjB","sourcesContent":["/* CSS for the accessible modal dialogs created by localUtils.js */\n\n/* backdrop / focus trap container */\n.focus-trap {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 9999;\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.focus-trap.hidden {\n display: none;\n}\n\n/* inner dialog box */\n.focus-trap .modal {\n background: var(--color-background);\n padding: var(--spacing-lg);\n border-radius: var(--border-radius-base);\n max-width: 90%;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);\n}\n\n/* button container: center buttons horizontally (uses id in markup) */\n#contacts-modal #modal-buttons {\n margin-top: var(--spacing-md);\n display: flex;\n justify-content: center;\n gap: var(--spacing-sm);\n}\n\n/* buttons themselves use the shared btn-primary rules */\n#contacts-modal .modal button {\n min-height: var(--min-touch-target);\n padding: var(--spacing-sm) var(--spacing-md);\n border: 1px solid var(--color-primary);\n border-radius: var(--border-radius-base);\n font-weight: 600;\n cursor: pointer;\n transition: all var(--animation-duration) ease;\n}\n\n#contacts-modal .modal button.btn-primary {\n background: var(--color-primary);\n color: var(--color-background);\n}\n\n#contacts-modal .modal button.btn-primary:hover {\n background: color-mix(in srgb, var(--color-primary) 90%, black);\n box-shadow: 0 2px 4px rgba(124, 77, 255, 0.2);\n}\n\n#contacts-modal .modal button.btn-primary:active {\n box-shadow: 0 1px 2px rgba(124, 77, 255, 0.2);\n}\n\n#contacts-modal .modal button:disabled {\n opacity: var(--opacity-disabled, 0.6);\n cursor: not-allowed;\n transform: none;\n}\n"],"sourceRoot":""}]);
1785
- // Exports
1786
- /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
1787
-
1788
-
1789
- /***/ },
1790
-
1791
- /***/ 715
1792
- (module, __nested_webpack_exports__, __nested_webpack_require_48342__) {
1793
-
1794
- /* harmony export */ __nested_webpack_require_48342__.d(__nested_webpack_exports__, {
1795
- /* harmony export */ A: () => (__WEBPACK_DEFAULT_EXPORT__)
1796
- /* harmony export */ });
1797
- /* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __nested_webpack_require_48342__(354);
1798
- /* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_48342__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
1799
- /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __nested_webpack_require_48342__(314);
1800
- /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_48342__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
1801
- // Imports
1802
-
1803
-
1804
- var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
1805
- // Module
1806
- ___CSS_LOADER_EXPORT___.push([module.id, `/* mugshotGallery.js styles — extracted from inline styles */
1807
- /* Uses CSS custom properties from the global stylesheet (dev-global.css / mashlib) */
1808
-
1809
- /* ── Mugshot image ───────────────────────────────────────────── */
1810
-
1811
- .contactPane .mugshotImage {
1812
- max-height: 10em;
1813
- border-radius: var(--border-radius-full);
1814
- margin: var(--spacing-sm);
1815
- }
1816
- `, "",{"version":3,"sources":["webpack://./src/styles/mugshotGallery.css"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,qFAAqF;;AAErF,mEAAmE;;AAEnE;EACE,gBAAgB;EAChB,wCAAwC;EACxC,yBAAyB;AAC3B","sourcesContent":["/* mugshotGallery.js styles — extracted from inline styles */\n/* Uses CSS custom properties from the global stylesheet (dev-global.css / mashlib) */\n\n/* ── Mugshot image ───────────────────────────────────────────── */\n\n.contactPane .mugshotImage {\n max-height: 10em;\n border-radius: var(--border-radius-full);\n margin: var(--spacing-sm);\n}\n"],"sourceRoot":""}]);
1817
- // Exports
1818
- /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
1819
-
1820
-
1821
- /***/ },
1822
-
1823
- /***/ 434
1824
- (module, __nested_webpack_exports__, __nested_webpack_require_50590__) {
1825
-
1826
- /* harmony export */ __nested_webpack_require_50590__.d(__nested_webpack_exports__, {
1827
- /* harmony export */ A: () => (__WEBPACK_DEFAULT_EXPORT__)
1828
- /* harmony export */ });
1829
- /* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __nested_webpack_require_50590__(354);
1830
- /* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_50590__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
1831
- /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __nested_webpack_require_50590__(314);
1832
- /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_50590__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
1620
+ /* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __nested_webpack_require_37866__(354);
1621
+ /* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_37866__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
1622
+ /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __nested_webpack_require_37866__(314);
1623
+ /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_37866__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
1833
1624
  // Imports
1834
1625
 
1835
1626
 
@@ -1849,13 +1640,34 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
1849
1640
  vertical-align: middle;
1850
1641
  }
1851
1642
 
1643
+ .individualPane .hoverControl,
1644
+ .contactPane .hoverControl {
1645
+ position: relative;
1646
+ }
1647
+
1648
+ /* In contactPane, hover controls in table cells may contain a link + delete icon.
1649
+ Make the cell grow and keep the delete icon right-aligned (no overlap). */
1650
+ .contactPane td.hoverControl:has(> a) {
1651
+ width: auto !important;
1652
+ min-width: 4em !important;
1653
+ justify-content: space-between !important;
1654
+ }
1655
+
1656
+ .contactPane td.hoverControl:has(> a) > a {
1657
+ flex: 1 1 auto;
1658
+ min-width: 0;
1659
+ overflow-wrap: anywhere;
1660
+ word-break: break-word;
1661
+ white-space: normal;
1662
+ }
1663
+
1852
1664
  .individualPane .hoverControl:has(> img:first-child),
1853
1665
  .contactPane .hoverControl:has(> img:first-child) {
1854
1666
  background-color: transparent !important;
1855
1667
  border: none !important;
1856
1668
  margin: 0 !important;
1857
1669
  border-radius: 0 !important;
1858
- padding: 0.7em !important;
1670
+ padding: var(--spacing-btn) !important;
1859
1671
  min-height: var(--min-touch-target);
1860
1672
  min-width: var(--min-touch-target);
1861
1673
  cursor: pointer;
@@ -1864,22 +1676,11 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
1864
1676
  justify-content: center;
1865
1677
  }
1866
1678
 
1867
- .individualPane .hoverControlHide,
1868
- .contactPane .hoverControlHide {
1869
- width: 1.5em !important;
1870
- height: 1.5em !important;
1871
- display: block;
1872
- margin-top: 0 !important;
1873
- margin-left: 0 !important;
1874
- margin-right: 0 !important;
1875
- margin-bottom: 0.3em !important;
1876
- }
1877
-
1878
1679
  .individualPane .hoverControl:has(> img:first-child) > span,
1879
1680
  .contactPane .hoverControl:has(> img:first-child) > span {
1880
1681
  display: inline-flex;
1881
1682
  align-items: center;
1882
- margin-left: 0.3em;
1683
+ margin-left: var(--spacing-xxs);
1883
1684
  }
1884
1685
 
1885
1686
  .individualPane div[style*="padding: 0.5em"]:has(> img),
@@ -1890,20 +1691,65 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
1890
1691
 
1891
1692
  .individualPane div[style*="padding: 0.5em"]:has(> img) > span,
1892
1693
  .contactPane div[style*="padding: 0.5em"]:has(> img) > span {
1893
- margin-left: 0.3em;
1694
+ margin-left: var(--spacing-xxs);
1894
1695
  }
1895
1696
 
1896
1697
  .individualPane .hoverControl:has(> img:first-child):hover,
1897
1698
  .contactPane .hoverControl:has(> img:first-child):hover {
1898
- background-color: transparent !important;
1699
+ background-color: var(--color-section-bg) !important;
1899
1700
  }
1900
1701
 
1901
1702
  .individualPane button:has(> img[src\$=".svg"]),
1902
1703
  .contactPane button:has(> img[src\$=".svg"]) {
1903
- background-color: transparent !important;
1704
+ background-color: var(--color-section-bg) !important;
1904
1705
  border: none !important;
1905
1706
  margin: 0 !important;
1906
1707
  border-radius: 0 !important;
1708
+ box-shadow: none !important;
1709
+ transition: background-color 0.2s ease, box-shadow 0.2s ease;
1710
+ }
1711
+
1712
+ /* Ensure certain icon images render at a consistent size and align nicely when adjacent. */
1713
+ img[src\$="red.svg"],
1714
+ img[src\$="go-to-this.png"] {
1715
+ width: 1.2em !important;
1716
+ height: 1.2em !important;
1717
+ max-width: none !important;
1718
+ max-height: none !important;
1719
+ object-fit: contain;
1720
+ display: inline-block;
1721
+ vertical-align: middle;
1722
+ }
1723
+
1724
+ /* If the SVG button is inside a statsLog wrapper, add pink background to the button only. */
1725
+ .individualPane .statsLog button:has(> img[src\$=".svg"]),
1726
+ .contactPane .statsLog button:has(> img[src\$=".svg"]) {
1727
+ background-color: var(--color-info-bg) !important;
1728
+ border: initial !important;
1729
+ margin: initial !important;
1730
+ border-radius: initial !important;
1731
+ }
1732
+
1733
+ /* Hide the “Continue” icon button that Solid-UI sometimes renders below textareas. */
1734
+ .individualPane button:has(> img[title="Continue"]),
1735
+ .contactPane button:has(> img[title="Continue"]) {
1736
+ display: none !important;
1737
+ }
1738
+
1739
+ /* Allow “Continue” buttons inside contactFormContainer to be visible. */
1740
+ .individualPane .contactFormContainer button:has(> img[src\$="noun_1180158.svg"]),
1741
+ .contactPane .contactFormContainer button:has(> img[src\$="noun_1180158.svg"]),
1742
+ .individualPane .contactFormContainer button:has(> img[title="Continue"]),
1743
+ .contactPane .contactFormContainer button:has(> img[title="Continue"]) {
1744
+ display: inline-flex !important;
1745
+ }
1746
+
1747
+ /* Exception: allow “Continue” buttons inside statsLog to remain visible. */
1748
+ .individualPane .statsLog button:has(> img[title="Continue"]),
1749
+ .contactPane .statsLog button:has(> img[title="Continue"]),
1750
+ .individualPane .webidControl button:has(> img[title="Continue"]),
1751
+ .contactPane .webidControl button:has(> img[title="Continue"]){
1752
+ display: inline-flex !important;
1907
1753
  }
1908
1754
 
1909
1755
  .individualPane button,
@@ -1913,25 +1759,49 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
1913
1759
  }
1914
1760
 
1915
1761
  .individualPane input:not([type="color"]),
1916
- .contactPane input:not([type="color"]),
1917
- .individualPane textarea,
1918
- .contactPane textarea,
1919
- .individualPane select,
1920
- .contactPane select {
1921
- max-width: 100%;
1762
+ .contactPane input:not([type="color"]) {
1763
+ width: 99%;
1764
+ max-width: 99%;
1922
1765
  min-width: 0;
1923
- box-sizing: border-box ;
1766
+ box-sizing: border-box;
1924
1767
  font: inherit;
1925
1768
  color: var(--color-text);
1926
1769
  background-color: var(--color-card-bg) !important;
1927
1770
  border: 1px solid var(--color-border-pale);
1771
+ margin-left: 0 !important;
1772
+ margin-right: 0 !important;
1928
1773
  }
1929
1774
 
1930
1775
  .individualPane textarea,
1931
- .contactPane textarea {
1932
- border-color: var(--color-border-pale) !important;
1776
+ .contactPane textarea,
1777
+ .individualPane .formFieldValue textarea,
1778
+ .contactPane .formFieldValue textarea {
1779
+ appearance: none;
1780
+ -webkit-appearance: none;
1781
+ border-radius: var(--border-radius-sm) !important;
1782
+ border: var(--border-width-xthin) solid var(--color-border-accent) !important;
1783
+ width: 99%;
1784
+ max-width: 99%;
1785
+ box-sizing: border-box;
1786
+ font: inherit;
1787
+ color: var(--color-text);
1788
+ background-color: var(--color-card-bg) !important;
1933
1789
  margin: 0 !important;
1934
- padding: 0 !important;
1790
+ margin-top: var(--spacing-xs);
1791
+ margin-left: 0 !important;
1792
+ margin-right: 0 !important;
1793
+ padding: var(--spacing-xs) !important;
1794
+ }
1795
+
1796
+ .individualPane select,
1797
+ .contactPane select {
1798
+ max-width: 99%;
1799
+ min-width: 0;
1800
+ box-sizing: border-box;
1801
+ font: inherit;
1802
+ color: var(--color-text);
1803
+ background-color: var(--color-card-bg) !important;
1804
+ border: 1px solid var(--color-border-pale);
1935
1805
  }
1936
1806
 
1937
1807
  .individualPane input[type="date"],
@@ -1964,7 +1834,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
1964
1834
 
1965
1835
  .individualPane input[type="url"],
1966
1836
  .contactPane input[type="url"] {
1967
- width: 100%;
1837
+ width: 99%;
1968
1838
  }
1969
1839
 
1970
1840
  .individualPane .formFieldValue,
@@ -1994,21 +1864,28 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
1994
1864
  .contactPane .formFieldValue input:not([type="color"]),
1995
1865
  .individualPane .formFieldValue textarea,
1996
1866
  .contactPane .formFieldValue textarea {
1997
- width: 100%;
1998
- max-width: 100%;
1867
+ width: 99% !important;
1868
+ max-width: 99%;
1869
+ }
1870
+
1871
+ /* Email and phone value inputs: do not stretch full width */
1872
+ .individualPane .formFieldName:has(a[href="http://www.w3.org/2006/vcard/ns#value"]) + .formFieldValue input:not([type="color"]),
1873
+ .contactPane .formFieldName:has(a[href="http://www.w3.org/2006/vcard/ns#value"]) + .formFieldValue input:not([type="color"]) {
1874
+ width: 98% !important;
1875
+ max-width: 98%;
1999
1876
  }
2000
1877
 
2001
1878
  .individualPane .formFieldValue select,
2002
1879
  .contactPane .formFieldValue select {
2003
- width: 100%;
1880
+ width: 99%;
2004
1881
  display: inline-block;
2005
1882
  max-width: none !important;
2006
1883
  }
2007
1884
 
2008
1885
  .individualPane select#formSelect,
2009
1886
  .contactPane select#formSelect {
2010
- width: 100%;
2011
- max-width: 97%;
1887
+ width: 99%;
1888
+ max-width: 98%;
2012
1889
  box-sizing: border-box;
2013
1890
  margin-left: 0 !important;
2014
1891
  margin-right: 0 !important;
@@ -2056,7 +1933,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
2056
1933
  .individualPane .choiceBox .classifierBox-label,
2057
1934
  .contactPane .choiceBox .classifierBox-label {
2058
1935
  margin-right: 0;
2059
- padding-left: 0.3em;
1936
+ padding-left: var(--spacing-xxs);
2060
1937
  }
2061
1938
 
2062
1939
  .individualPane .choiceBox .choiceBox-selectBox select,
@@ -2069,9 +1946,9 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
2069
1946
  .individualPane .classifierBox .classifierBox-label,
2070
1947
  .contactPane .classifierBox .classifierBox-label {
2071
1948
  margin-right: 0;
2072
- padding-left: 0.3em;
1949
+ padding-left: var(--spacing-xxs);
2073
1950
  width: 8em;
2074
- padding: 0.3em;
1951
+ padding: var(--spacing-xxs);
2075
1952
  vertical-align: middle;
2076
1953
  }
2077
1954
 
@@ -2127,27 +2004,6 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
2127
2004
  min-width: 0;
2128
2005
  }
2129
2006
 
2130
- .individualPane textarea,
2131
- .contactPane textarea,
2132
- .individualPane .formFieldValue textarea,
2133
- .contactPane .formFieldValue textarea {
2134
- appearance: none;
2135
- -webkit-appearance: none;
2136
- border-radius: 0.2em !important;
2137
- border: 0.05em solid #88c !important;
2138
- width: 100%;
2139
- box-sizing: border-box;
2140
- margin-top: var(--spacing-xs);
2141
- margin-left: 0 !important;
2142
- margin-right: 0 !important;
2143
- }
2144
-
2145
- /* Add horizontal gap between label and textarea for all label+textarea pairs. */
2146
- .individualPane div:has(> a) + div:has(textarea),
2147
- .contactPane div:has(> a) + div:has(textarea) {
2148
- margin-left: var(--spacing-sm);
2149
- }
2150
-
2151
2007
  /* Center textarea label vertically in flex rows. */
2152
2008
  .individualPane div[style*="display: flex"][style*="flex-direction: row"]:has(textarea),
2153
2009
  .contactPane div[style*="display: flex"][style*="flex-direction: row"]:has(textarea) {
@@ -2188,13 +2044,6 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
2188
2044
  vertical-align: baseline;
2189
2045
  }
2190
2046
 
2191
- .individualPane input:not([type="color"]),
2192
- .contactPane input:not([type="color"]) {
2193
- width: 100%;
2194
- margin-left: 0 !important;
2195
- margin-right: 0 !important;
2196
- }
2197
-
2198
2047
  .individualPane input:disabled,
2199
2048
  .contactPane input:disabled,
2200
2049
  .individualPane textarea:disabled,
@@ -2211,15 +2060,8 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
2211
2060
  .contactPane textarea:read-only {
2212
2061
  background-color: var(--color-background) !important;
2213
2062
  cursor: not-allowed;
2214
- opacity: 0.75;
2215
- border: 0.05em solid var(--color-background) !important;
2216
- }
2217
-
2218
- .individualPane textarea,
2219
- .contactPane textarea,
2220
- .individualPane .formFieldValue textarea,
2221
- .contactPane .formFieldValue textarea {
2222
- padding: var(--spacing-xs) !important;
2063
+ opacity: var(--opacity-input-disabled);
2064
+ border: var(--border-width-xthin) solid var(--color-background) !important;
2223
2065
  }
2224
2066
 
2225
2067
  .contactPane .webidControl table td div.contactPane.namedPane {
@@ -2233,21 +2075,337 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
2233
2075
 
2234
2076
  /* selectors that match the old inline-styled markup when no classes can be added */
2235
2077
 
2236
- /* outer container: position relative containing an absolute grid popup */
2237
- .contactPane div[style*="position: relative"] > div[style*="position: absolute"][style*="display: grid"] {
2078
+ /* Delete pop up */
2079
+ /* Remove the intermediate positioned ancestor so the popup anchors to .hoverControl instead */
2080
+ .individualPane div[style*="position: relative"]:has(> div[style*="display: grid"]) {
2081
+ position: static !important;
2082
+ }
2083
+
2084
+ .individualPane div[style*="position: relative"] > div[style*="display: grid"] {
2238
2085
  /* override inline values with theme variables */
2239
- position: absolute;
2240
- top: -1em;
2241
- padding: 0.7em !important;
2086
+ position: absolute !important;
2087
+ top: 0 !important;
2088
+ right: 0 !important;
2089
+ left: auto !important;
2090
+ z-index: 9999 !important;
2091
+ display: grid !important;
2092
+ pointer-events: auto !important;
2093
+ opacity: 1 !important;
2094
+ visibility: visible !important;
2095
+ padding: var(--spacing-btn) !important;
2242
2096
  background: var(--color-background) !important;
2243
- border: 0.1em solid var(--color-primary) !important;
2097
+ border: var(--border-width-sm) solid var(--color-primary) !important;
2244
2098
  border-radius: var(--border-radius-base) !important;
2245
- box-shadow: 0 0.5em 0.9em rgba(0, 0, 0, 0.2) !important;
2246
- display: grid;
2247
- grid-template-columns: auto auto;
2248
- gap: 0.3em;
2249
- z-index: 10;
2250
- }`, "",{"version":3,"sources":["webpack://./src/styles/rdfFormsEnforced.css"],"names":[],"mappings":"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","sourcesContent":["/* Solid-UI form */\n\n/* Vertically center autocomplete input in .formFieldValue */\n.individualPane .formFieldValue > div[style*=\"flex-direction: row\"],\n.contactPane .formFieldValue > div[style*=\"flex-direction: row\"] {\n align-items: center;\n display: flex;\n}\n\n.individualPane .formFieldValue input[data-testid=\"autocomplete-input\"],\n.contactPane .formFieldValue input[data-testid=\"autocomplete-input\"] {\n vertical-align: middle;\n}\n\n.individualPane .hoverControl:has(> img:first-child),\n.contactPane .hoverControl:has(> img:first-child) {\n background-color: transparent !important;\n border: none !important;\n margin: 0 !important;\n border-radius: 0 !important;\n padding: 0.7em !important;\n min-height: var(--min-touch-target);\n min-width: var(--min-touch-target);\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.individualPane .hoverControlHide,\n.contactPane .hoverControlHide {\n width: 1.5em !important;\n height: 1.5em !important;\n display: block;\n margin-top: 0 !important;\n margin-left: 0 !important;\n margin-right: 0 !important;\n margin-bottom: 0.3em !important;\n}\n\n.individualPane .hoverControl:has(> img:first-child) > span,\n.contactPane .hoverControl:has(> img:first-child) > span {\n display: inline-flex;\n align-items: center;\n margin-left: 0.3em;\n}\n\n.individualPane div[style*=\"padding: 0.5em\"]:has(> img),\n.contactPane div[style*=\"padding: 0.5em\"]:has(> img) {\n display: inline-flex;\n align-items: center;\n}\n\n.individualPane div[style*=\"padding: 0.5em\"]:has(> img) > span,\n.contactPane div[style*=\"padding: 0.5em\"]:has(> img) > span {\n margin-left: 0.3em;\n}\n\n.individualPane .hoverControl:has(> img:first-child):hover,\n.contactPane .hoverControl:has(> img:first-child):hover {\n background-color: transparent !important;\n}\n\n.individualPane button:has(> img[src$=\".svg\"]),\n.contactPane button:has(> img[src$=\".svg\"]) {\n background-color: transparent !important;\n border: none !important;\n margin: 0 !important;\n border-radius: 0 !important;\n}\n\n.individualPane button,\n.contactPane button {\n min-height: var(--min-touch-target);\n min-width: var(--min-touch-target);\n}\n\n.individualPane input:not([type=\"color\"]),\n.contactPane input:not([type=\"color\"]),\n.individualPane textarea,\n.contactPane textarea,\n.individualPane select,\n.contactPane select {\n max-width: 100%;\n min-width: 0;\n box-sizing: border-box ;\n font: inherit;\n color: var(--color-text);\n background-color: var(--color-card-bg) !important;\n border: 1px solid var(--color-border-pale);\n}\n\n.individualPane textarea,\n.contactPane textarea {\n border-color: var(--color-border-pale) !important;\n margin: 0 !important;\n padding: 0 !important;\n}\n\n.individualPane input[type=\"date\"],\n.contactPane input[type=\"date\"],\n.individualPane input[type=\"month\"],\n.contactPane input[type=\"month\"],\n.individualPane input[type=\"week\"],\n.contactPane input[type=\"week\"],\n.individualPane input[type=\"time\"],\n.contactPane input[type=\"time\"],\n.individualPane input[type=\"datetime-local\"],\n.contactPane input[type=\"datetime-local\"] {\n min-height: var(--min-touch-target);\n}\n\n.individualPane .hoverControl:has(> img:first-child):focus-visible,\n.contactPane .hoverControl:has(> img:first-child):focus-visible,\n.individualPane button:focus-visible,\n.contactPane button:focus-visible,\n.individualPane input:not([type=\"color\"]):focus-visible,\n.contactPane input:not([type=\"color\"]):focus-visible,\n.individualPane textarea:focus-visible,\n.contactPane textarea:focus-visible,\n.individualPane select:focus-visible,\n.contactPane select:focus-visible {\n outline: var(--focus-ring-width) solid var(--color-primary) !important;\n outline-offset: 2px;\n box-shadow: 0 0 0 1px var(--color-background);\n}\n\n.individualPane input[type=\"url\"],\n.contactPane input[type=\"url\"] {\n width: 100%;\n}\n\n.individualPane .formFieldValue,\n.contactPane .formFieldValue {\n min-width: 0;\n margin-bottom: var(--spacing-sm);\n}\n\n.individualPane .formFieldValue table,\n.contactPane .formFieldValue table {\n margin: 0 !important;\n padding: 0 !important;\n}\n\n.individualPane .formFieldValue td,\n.contactPane .formFieldValue td {\n padding: 0 !important;\n vertical-align: middle;\n}\n\n.individualPane .formFieldValue table[data-testid=\"autocomplete-table\"],\n.contactPane .formFieldValue table[data-testid=\"autocomplete-table\"] {\n height: 100%;\n}\n\n.individualPane .formFieldValue input:not([type=\"color\"]),\n.contactPane .formFieldValue input:not([type=\"color\"]),\n.individualPane .formFieldValue textarea,\n.contactPane .formFieldValue textarea {\n width: 100%;\n max-width: 100%;\n}\n\n.individualPane .formFieldValue select,\n.contactPane .formFieldValue select {\n width: 100%;\n display: inline-block;\n max-width: none !important;\n}\n\n.individualPane select#formSelect,\n.contactPane select#formSelect {\n width: 100%;\n max-width: 97%;\n box-sizing: border-box;\n margin-left: 0 !important;\n margin-right: 0 !important;\n}\n\n.individualPane span select,\n.contactPane span select {\n max-width: 96% !important;\n box-sizing: border-box;\n margin: 0 !important;\n}\n\n.individualPane .formFieldValue span select,\n.contactPane .formFieldValue span select {\n margin-left: 0 !important;\n margin-right: 0 !important;\n}\n\n/* Remove border/padding from the first wrapper div (and its first child wrapper). */\n.individualPane > div:first-of-type,\n.contactPane > div:first-of-type,\n.individualPane > div:first-of-type > div:first-of-type,\n.contactPane > div:first-of-type > div:first-of-type {\n border: none !important;\n padding: 0 !important;\n}\n\n/* In contactPane, remove border/padding from all direct child divs. */\n.individualPane > div,\n.contactPane > div {\n border: none !important;\n padding: 0 !important;\n}\n\n/* Align schema.org, solid terms, FOAF, vCard, and org field labels with their input values. */\n.individualPane :not(.choiceBox):has(> .formFieldName):has(> .formFieldValue),\n.contactPane :not(.choiceBox):has(> .formFieldName):has(> .formFieldValue) {\n display: flex;\n align-items: baseline;\n margin-bottom: var(--spacing-sm);\n}\n\n/* for the Resume inside corporation choice */\n/* Add space between classifierBox label and select box */\n.individualPane .choiceBox .classifierBox-label,\n.contactPane .choiceBox .classifierBox-label {\n margin-right: 0;\n padding-left: 0.3em;\n}\n\n.individualPane .choiceBox .choiceBox-selectBox select,\n.contactPane .choiceBox .choiceBox-selectBox select {\n margin-left: 2.1em !important;\n}\n\n/* for the Resume orga details */\n/* Add space between classifierBox label and select box */\n.individualPane .classifierBox .classifierBox-label,\n.contactPane .classifierBox .classifierBox-label {\n margin-right: 0;\n padding-left: 0.3em;\n width: 8em;\n padding: 0.3em;\n vertical-align: middle;\n}\n\n.individualPane .classifierBox .classifierBox-selectBox,\n.contactPane .classifierBox .classifierBox-selectBox {\n margin-left: 0 !important;\n}\n\n.individualPane .classifierBox .classifierBox-selectBox select,\n.contactPane .classifierBox .classifierBox-selectBox select {\n margin-left: 0 !important;\n}\n\n.individualPane .formFieldValue > span > select,\n.contactPane .formFieldValue > span > select {\n margin-left: 0 !important;\n}\n\n.individualPane :not(.choiceBox):has(> .formFieldName):has(> .formFieldValue) > .formFieldValue,\n.contactPane :not(.choiceBox):has(> .formFieldName):has(> .formFieldValue) > .formFieldValue {\n margin-bottom: 0;\n}\n\n.individualPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://schema.org/\"]),\n.contactPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://schema.org/\"]),\n.individualPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/solid/terms#\"]),\n.contactPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/solid/terms#\"]),\n.individualPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://xmlns.com/foaf/0.1/\"]),\n.contactPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://xmlns.com/foaf/0.1/\"]),\n.individualPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/2006/vcard/ns\"]),\n.contactPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/2006/vcard/ns\"]),\n.individualPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/org#\"]),\n.contactPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/org#\"]) {\n display: inline-flex;\n align-items: center;\n vertical-align: middle;\n}\n\n.individualPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://schema.org/\"]) + .formFieldValue,\n.contactPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://schema.org/\"]) + .formFieldValue,\n.individualPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/solid/terms#\"]) + .formFieldValue,\n.contactPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/solid/terms#\"]) + .formFieldValue,\n.individualPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://xmlns.com/foaf/0.1/\"]) + .formFieldValue,\n.contactPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://xmlns.com/foaf/0.1/\"]) + .formFieldValue,\n.individualPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/2006/vcard/ns\"]) + .formFieldValue,\n.contactPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/2006/vcard/ns\"]) + .formFieldValue,\n.individualPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/org#\"]) + .formFieldValue,\n.contactPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/org#\"]) + .formFieldValue {\n display: inline-flex;\n align-items: center;\n vertical-align: middle;\n flex: 1;\n min-width: 0;\n}\n\n.individualPane textarea,\n.contactPane textarea,\n.individualPane .formFieldValue textarea,\n.contactPane .formFieldValue textarea {\n appearance: none;\n -webkit-appearance: none;\n border-radius: 0.2em !important;\n border: 0.05em solid #88c !important;\n width: 100%;\n box-sizing: border-box;\n margin-top: var(--spacing-xs);\n margin-left: 0 !important;\n margin-right: 0 !important;\n}\n\n/* Add horizontal gap between label and textarea for all label+textarea pairs. */\n.individualPane div:has(> a) + div:has(textarea),\n.contactPane div:has(> a) + div:has(textarea) {\n margin-left: var(--spacing-sm);\n}\n\n/* Center textarea label vertically in flex rows. */\n.individualPane div[style*=\"display: flex\"][style*=\"flex-direction: row\"]:has(textarea),\n.contactPane div[style*=\"display: flex\"][style*=\"flex-direction: row\"]:has(textarea) {\n align-items: flex-start;\n}\n\n.individualPane div[style*=\"display: flex\"][style*=\"flex-direction: row\"]:has(textarea) > div:has(> a),\n.contactPane div[style*=\"display: flex\"][style*=\"flex-direction: row\"]:has(textarea) > div:has(> a) {\n padding-left: var(--spacing-xs);\n padding-top: var(--spacing-sm);\n}\n\n/* Keep autocomplete/table-based fields (e.g. Occupation) aligned to label text baseline. */\n.individualPane :not(.choiceBox):has(> .formFieldValue input[data-testid=\"autocomplete-input\"]),\n.contactPane :not(.choiceBox):has(> .formFieldValue input[data-testid=\"autocomplete-input\"]) {\n align-items: flex-start;\n}\n\n.individualPane :not(.choiceBox):has(> .formFieldValue input[data-testid=\"autocomplete-input\"]) > .formFieldName,\n.contactPane :not(.choiceBox):has(> .formFieldValue input[data-testid=\"autocomplete-input\"]) > .formFieldName {\n padding-top: var(--spacing-xs) !important;\n}\n\n.individualPane .formFieldValue:has(input[data-testid=\"autocomplete-input\"]),\n.contactPane .formFieldValue:has(input[data-testid=\"autocomplete-input\"]) {\n align-self: flex-start;\n}\n\n.individualPane .formFieldValue table[data-testid=\"autocomplete-table\"],\n.contactPane .formFieldValue table[data-testid=\"autocomplete-table\"],\n.individualPane .formFieldValue input[data-testid=\"autocomplete-input\"],\n.contactPane .formFieldValue input[data-testid=\"autocomplete-input\"] {\n margin: 0 !important;\n}\n\n.individualPane .formFieldValue table[data-testid=\"autocomplete-table\"],\n.contactPane .formFieldValue table[data-testid=\"autocomplete-table\"] {\n vertical-align: baseline;\n}\n\n.individualPane input:not([type=\"color\"]),\n.contactPane input:not([type=\"color\"]) {\n width: 100%;\n margin-left: 0 !important;\n margin-right: 0 !important;\n}\n\n.individualPane input:disabled,\n.contactPane input:disabled,\n.individualPane textarea:disabled,\n.contactPane textarea:disabled,\n.individualPane select:disabled,\n.contactPane select:disabled,\n.individualPane input[readonly],\n.contactPane input[readonly],\n.individualPane textarea[readonly],\n.contactPane textarea[readonly],\n.individualPane input:read-only,\n.contactPane input:read-only,\n.individualPane textarea:read-only,\n.contactPane textarea:read-only {\n background-color: var(--color-background) !important;\n cursor: not-allowed;\n opacity: 0.75;\n border: 0.05em solid var(--color-background) !important;\n}\n\n.individualPane textarea,\n.contactPane textarea,\n.individualPane .formFieldValue textarea,\n.contactPane .formFieldValue textarea {\n padding: var(--spacing-xs) !important;\n}\n\n.contactPane .webidControl table td div.contactPane.namedPane {\n border: none !important;\n}\n\n/* ------------------------------------------------------------------ */\n/* inline popup used for small confirmation flows (like the new confirmDialog) */\n/* apply the class `rdf-inline-modal` on the outer wrapper and give the\n inner box the class `popup` instead of using the old inline styles. */\n\n/* selectors that match the old inline-styled markup when no classes can be added */\n\n/* outer container: position relative containing an absolute grid popup */\n.contactPane div[style*=\"position: relative\"] > div[style*=\"position: absolute\"][style*=\"display: grid\"] {\n /* override inline values with theme variables */\n position: absolute;\n top: -1em;\n padding: 0.7em !important;\n background: var(--color-background) !important;\n border: 0.1em solid var(--color-primary) !important;\n border-radius: var(--border-radius-base) !important;\n box-shadow: 0 0.5em 0.9em rgba(0, 0, 0, 0.2) !important;\n display: grid;\n grid-template-columns: auto auto;\n gap: 0.3em;\n z-index: 10;\n}"],"sourceRoot":""}]);
2099
+ box-shadow: var(--box-shadow-popup) !important;
2100
+ grid-template-columns: auto auto !important;
2101
+ gap: var(--spacing-xxs) !important;
2102
+ }
2103
+
2104
+ .individualPane .hoverControl img.hoverControlHide,
2105
+ .individualPane .hoverControl [data-testid="deleteButtonWithCheck"] {
2106
+ position: absolute !important;
2107
+ right: var(--spacing-xxxs) !important;
2108
+ width: 1.5em !important;
2109
+ height: 1.5em !important;
2110
+ display: none !important;
2111
+ align-items: center;
2112
+ justify-content: center;
2113
+ margin: 0 !important;
2114
+ float: none !important;
2115
+ z-index: 2 !important;
2116
+ }
2117
+
2118
+ /* Show delete icon only on hover */
2119
+ .individualPane .hoverControl:hover img.hoverControlHide,
2120
+ .individualPane .hoverControl:hover [data-testid="deleteButtonWithCheck"] {
2121
+ display: inline-flex !important;
2122
+ }
2123
+
2124
+ /* If the hoverControl has exactly one div + the delete icon, keep the icon vertically centered but right-aligned */
2125
+ .individualPane .hoverControl:has(> div:nth-child(1):nth-last-child(2)):hover > img.hoverControlHide,
2126
+ .individualPane .hoverControl:has(> div:nth-child(1):nth-last-child(2)):hover > [data-testid="deleteButtonWithCheck"] {
2127
+ top: 50% !important;
2128
+ right: var(--spacing-xxxs) !important;
2129
+ left: auto !important;
2130
+ transform: translateY(-50%) !important;
2131
+ }`, "",{"version":3,"sources":["webpack://./src/styles/contactsRDFFormsEnforced.css"],"names":[],"mappings":"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","sourcesContent":["/* Solid-UI form */\n\n/* Vertically center autocomplete input in .formFieldValue */\n.individualPane .formFieldValue > div[style*=\"flex-direction: row\"],\n.contactPane .formFieldValue > div[style*=\"flex-direction: row\"] {\n align-items: center;\n display: flex;\n}\n\n.individualPane .formFieldValue input[data-testid=\"autocomplete-input\"],\n.contactPane .formFieldValue input[data-testid=\"autocomplete-input\"] {\n vertical-align: middle;\n}\n\n.individualPane .hoverControl,\n.contactPane .hoverControl {\n position: relative;\n}\n\n/* In contactPane, hover controls in table cells may contain a link + delete icon.\n Make the cell grow and keep the delete icon right-aligned (no overlap). */\n.contactPane td.hoverControl:has(> a) {\n width: auto !important;\n min-width: 4em !important;\n justify-content: space-between !important;\n}\n\n.contactPane td.hoverControl:has(> a) > a {\n flex: 1 1 auto;\n min-width: 0;\n overflow-wrap: anywhere;\n word-break: break-word;\n white-space: normal;\n}\n\n.individualPane .hoverControl:has(> img:first-child),\n.contactPane .hoverControl:has(> img:first-child) {\n background-color: transparent !important;\n border: none !important;\n margin: 0 !important;\n border-radius: 0 !important;\n padding: var(--spacing-btn) !important;\n min-height: var(--min-touch-target);\n min-width: var(--min-touch-target);\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.individualPane .hoverControl:has(> img:first-child) > span,\n.contactPane .hoverControl:has(> img:first-child) > span {\n display: inline-flex;\n align-items: center;\n margin-left: var(--spacing-xxs);\n}\n\n.individualPane div[style*=\"padding: 0.5em\"]:has(> img),\n.contactPane div[style*=\"padding: 0.5em\"]:has(> img) {\n display: inline-flex;\n align-items: center;\n}\n\n.individualPane div[style*=\"padding: 0.5em\"]:has(> img) > span,\n.contactPane div[style*=\"padding: 0.5em\"]:has(> img) > span {\n margin-left: var(--spacing-xxs);\n}\n\n.individualPane .hoverControl:has(> img:first-child):hover,\n.contactPane .hoverControl:has(> img:first-child):hover {\n background-color: var(--color-section-bg) !important;\n}\n\n.individualPane button:has(> img[src$=\".svg\"]),\n.contactPane button:has(> img[src$=\".svg\"]) {\n background-color: var(--color-section-bg) !important;\n border: none !important;\n margin: 0 !important;\n border-radius: 0 !important;\n box-shadow: none !important;\n transition: background-color 0.2s ease, box-shadow 0.2s ease;\n}\n\n/* Ensure certain icon images render at a consistent size and align nicely when adjacent. */\nimg[src$=\"red.svg\"],\nimg[src$=\"go-to-this.png\"] {\n width: 1.2em !important;\n height: 1.2em !important;\n max-width: none !important;\n max-height: none !important;\n object-fit: contain;\n display: inline-block;\n vertical-align: middle;\n}\n\n/* If the SVG button is inside a statsLog wrapper, add pink background to the button only. */\n.individualPane .statsLog button:has(> img[src$=\".svg\"]),\n.contactPane .statsLog button:has(> img[src$=\".svg\"]) {\n background-color: var(--color-info-bg) !important;\n border: initial !important;\n margin: initial !important;\n border-radius: initial !important;\n}\n\n/* Hide the “Continue” icon button that Solid-UI sometimes renders below textareas. */\n.individualPane button:has(> img[title=\"Continue\"]),\n.contactPane button:has(> img[title=\"Continue\"]) {\n display: none !important;\n}\n\n/* Allow “Continue” buttons inside contactFormContainer to be visible. */\n.individualPane .contactFormContainer button:has(> img[src$=\"noun_1180158.svg\"]),\n.contactPane .contactFormContainer button:has(> img[src$=\"noun_1180158.svg\"]),\n.individualPane .contactFormContainer button:has(> img[title=\"Continue\"]),\n.contactPane .contactFormContainer button:has(> img[title=\"Continue\"]) {\n display: inline-flex !important;\n}\n\n/* Exception: allow “Continue” buttons inside statsLog to remain visible. */\n.individualPane .statsLog button:has(> img[title=\"Continue\"]),\n.contactPane .statsLog button:has(> img[title=\"Continue\"]),\n.individualPane .webidControl button:has(> img[title=\"Continue\"]),\n.contactPane .webidControl button:has(> img[title=\"Continue\"]){\n display: inline-flex !important;\n}\n\n.individualPane button,\n.contactPane button {\n min-height: var(--min-touch-target);\n min-width: var(--min-touch-target);\n}\n\n.individualPane input:not([type=\"color\"]),\n.contactPane input:not([type=\"color\"]) {\n width: 99%;\n max-width: 99%;\n min-width: 0;\n box-sizing: border-box;\n font: inherit;\n color: var(--color-text);\n background-color: var(--color-card-bg) !important;\n border: 1px solid var(--color-border-pale);\n margin-left: 0 !important;\n margin-right: 0 !important;\n}\n\n.individualPane textarea,\n.contactPane textarea,\n.individualPane .formFieldValue textarea,\n.contactPane .formFieldValue textarea {\n appearance: none;\n -webkit-appearance: none;\n border-radius: var(--border-radius-sm) !important;\n border: var(--border-width-xthin) solid var(--color-border-accent) !important;\n width: 99%;\n max-width: 99%;\n box-sizing: border-box;\n font: inherit;\n color: var(--color-text);\n background-color: var(--color-card-bg) !important;\n margin: 0 !important;\n margin-top: var(--spacing-xs);\n margin-left: 0 !important;\n margin-right: 0 !important;\n padding: var(--spacing-xs) !important;\n}\n\n.individualPane select,\n.contactPane select {\n max-width: 99%;\n min-width: 0;\n box-sizing: border-box;\n font: inherit;\n color: var(--color-text);\n background-color: var(--color-card-bg) !important;\n border: 1px solid var(--color-border-pale);\n}\n\n.individualPane input[type=\"date\"],\n.contactPane input[type=\"date\"],\n.individualPane input[type=\"month\"],\n.contactPane input[type=\"month\"],\n.individualPane input[type=\"week\"],\n.contactPane input[type=\"week\"],\n.individualPane input[type=\"time\"],\n.contactPane input[type=\"time\"],\n.individualPane input[type=\"datetime-local\"],\n.contactPane input[type=\"datetime-local\"] {\n min-height: var(--min-touch-target);\n}\n\n.individualPane .hoverControl:has(> img:first-child):focus-visible,\n.contactPane .hoverControl:has(> img:first-child):focus-visible,\n.individualPane button:focus-visible,\n.contactPane button:focus-visible,\n.individualPane input:not([type=\"color\"]):focus-visible,\n.contactPane input:not([type=\"color\"]):focus-visible,\n.individualPane textarea:focus-visible,\n.contactPane textarea:focus-visible,\n.individualPane select:focus-visible,\n.contactPane select:focus-visible {\n outline: var(--focus-ring-width) solid var(--color-primary) !important;\n outline-offset: 2px;\n box-shadow: 0 0 0 1px var(--color-background);\n}\n\n.individualPane input[type=\"url\"],\n.contactPane input[type=\"url\"] {\n width: 99%;\n}\n\n.individualPane .formFieldValue,\n.contactPane .formFieldValue {\n min-width: 0;\n margin-bottom: var(--spacing-sm);\n}\n\n.individualPane .formFieldValue table,\n.contactPane .formFieldValue table {\n margin: 0 !important;\n padding: 0 !important;\n}\n\n.individualPane .formFieldValue td,\n.contactPane .formFieldValue td {\n padding: 0 !important;\n vertical-align: middle;\n}\n\n.individualPane .formFieldValue table[data-testid=\"autocomplete-table\"],\n.contactPane .formFieldValue table[data-testid=\"autocomplete-table\"] {\n height: 100%;\n}\n\n.individualPane .formFieldValue input:not([type=\"color\"]),\n.contactPane .formFieldValue input:not([type=\"color\"]),\n.individualPane .formFieldValue textarea,\n.contactPane .formFieldValue textarea {\n width: 99% !important;\n max-width: 99%;\n}\n\n/* Email and phone value inputs: do not stretch full width */\n.individualPane .formFieldName:has(a[href=\"http://www.w3.org/2006/vcard/ns#value\"]) + .formFieldValue input:not([type=\"color\"]),\n.contactPane .formFieldName:has(a[href=\"http://www.w3.org/2006/vcard/ns#value\"]) + .formFieldValue input:not([type=\"color\"]) {\n width: 98% !important;\n max-width: 98%;\n}\n\n.individualPane .formFieldValue select,\n.contactPane .formFieldValue select {\n width: 99%;\n display: inline-block;\n max-width: none !important;\n}\n\n.individualPane select#formSelect,\n.contactPane select#formSelect {\n width: 99%;\n max-width: 98%;\n box-sizing: border-box;\n margin-left: 0 !important;\n margin-right: 0 !important;\n}\n\n.individualPane span select,\n.contactPane span select {\n max-width: 96% !important;\n box-sizing: border-box;\n margin: 0 !important;\n}\n\n.individualPane .formFieldValue span select,\n.contactPane .formFieldValue span select {\n margin-left: 0 !important;\n margin-right: 0 !important;\n}\n\n/* Remove border/padding from the first wrapper div (and its first child wrapper). */\n.individualPane > div:first-of-type,\n.contactPane > div:first-of-type,\n.individualPane > div:first-of-type > div:first-of-type,\n.contactPane > div:first-of-type > div:first-of-type {\n border: none !important;\n padding: 0 !important;\n}\n\n/* In contactPane, remove border/padding from all direct child divs. */\n.individualPane > div,\n.contactPane > div {\n border: none !important;\n padding: 0 !important;\n}\n\n/* Align schema.org, solid terms, FOAF, vCard, and org field labels with their input values. */\n.individualPane :not(.choiceBox):has(> .formFieldName):has(> .formFieldValue),\n.contactPane :not(.choiceBox):has(> .formFieldName):has(> .formFieldValue) {\n display: flex;\n align-items: baseline;\n margin-bottom: var(--spacing-sm);\n}\n\n/* for the Resume inside corporation choice */\n/* Add space between classifierBox label and select box */\n.individualPane .choiceBox .classifierBox-label,\n.contactPane .choiceBox .classifierBox-label {\n margin-right: 0;\n padding-left: var(--spacing-xxs);\n}\n\n.individualPane .choiceBox .choiceBox-selectBox select,\n.contactPane .choiceBox .choiceBox-selectBox select {\n margin-left: 2.1em !important;\n}\n\n/* for the Resume orga details */\n/* Add space between classifierBox label and select box */\n.individualPane .classifierBox .classifierBox-label,\n.contactPane .classifierBox .classifierBox-label {\n margin-right: 0;\n padding-left: var(--spacing-xxs);\n width: 8em;\n padding: var(--spacing-xxs);\n vertical-align: middle;\n}\n\n.individualPane .classifierBox .classifierBox-selectBox,\n.contactPane .classifierBox .classifierBox-selectBox {\n margin-left: 0 !important;\n}\n\n.individualPane .classifierBox .classifierBox-selectBox select,\n.contactPane .classifierBox .classifierBox-selectBox select {\n margin-left: 0 !important;\n}\n\n.individualPane .formFieldValue > span > select,\n.contactPane .formFieldValue > span > select {\n margin-left: 0 !important;\n}\n\n.individualPane :not(.choiceBox):has(> .formFieldName):has(> .formFieldValue) > .formFieldValue,\n.contactPane :not(.choiceBox):has(> .formFieldName):has(> .formFieldValue) > .formFieldValue {\n margin-bottom: 0;\n}\n\n.individualPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://schema.org/\"]),\n.contactPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://schema.org/\"]),\n.individualPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/solid/terms#\"]),\n.contactPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/solid/terms#\"]),\n.individualPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://xmlns.com/foaf/0.1/\"]),\n.contactPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://xmlns.com/foaf/0.1/\"]),\n.individualPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/2006/vcard/ns\"]),\n.contactPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/2006/vcard/ns\"]),\n.individualPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/org#\"]),\n.contactPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/org#\"]) {\n display: inline-flex;\n align-items: center;\n vertical-align: middle;\n}\n\n.individualPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://schema.org/\"]) + .formFieldValue,\n.contactPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://schema.org/\"]) + .formFieldValue,\n.individualPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/solid/terms#\"]) + .formFieldValue,\n.contactPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/solid/terms#\"]) + .formFieldValue,\n.individualPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://xmlns.com/foaf/0.1/\"]) + .formFieldValue,\n.contactPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://xmlns.com/foaf/0.1/\"]) + .formFieldValue,\n.individualPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/2006/vcard/ns\"]) + .formFieldValue,\n.contactPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/2006/vcard/ns\"]) + .formFieldValue,\n.individualPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/org#\"]) + .formFieldValue,\n.contactPane :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/org#\"]) + .formFieldValue {\n display: inline-flex;\n align-items: center;\n vertical-align: middle;\n flex: 1;\n min-width: 0;\n}\n\n/* Center textarea label vertically in flex rows. */\n.individualPane div[style*=\"display: flex\"][style*=\"flex-direction: row\"]:has(textarea),\n.contactPane div[style*=\"display: flex\"][style*=\"flex-direction: row\"]:has(textarea) {\n align-items: flex-start;\n}\n\n.individualPane div[style*=\"display: flex\"][style*=\"flex-direction: row\"]:has(textarea) > div:has(> a),\n.contactPane div[style*=\"display: flex\"][style*=\"flex-direction: row\"]:has(textarea) > div:has(> a) {\n padding-left: var(--spacing-xs);\n padding-top: var(--spacing-sm);\n}\n\n/* Keep autocomplete/table-based fields (e.g. Occupation) aligned to label text baseline. */\n.individualPane :not(.choiceBox):has(> .formFieldValue input[data-testid=\"autocomplete-input\"]),\n.contactPane :not(.choiceBox):has(> .formFieldValue input[data-testid=\"autocomplete-input\"]) {\n align-items: flex-start;\n}\n\n.individualPane :not(.choiceBox):has(> .formFieldValue input[data-testid=\"autocomplete-input\"]) > .formFieldName,\n.contactPane :not(.choiceBox):has(> .formFieldValue input[data-testid=\"autocomplete-input\"]) > .formFieldName {\n padding-top: var(--spacing-xs) !important;\n}\n\n.individualPane .formFieldValue:has(input[data-testid=\"autocomplete-input\"]),\n.contactPane .formFieldValue:has(input[data-testid=\"autocomplete-input\"]) {\n align-self: flex-start;\n}\n\n.individualPane .formFieldValue table[data-testid=\"autocomplete-table\"],\n.contactPane .formFieldValue table[data-testid=\"autocomplete-table\"],\n.individualPane .formFieldValue input[data-testid=\"autocomplete-input\"],\n.contactPane .formFieldValue input[data-testid=\"autocomplete-input\"] {\n margin: 0 !important;\n}\n\n.individualPane .formFieldValue table[data-testid=\"autocomplete-table\"],\n.contactPane .formFieldValue table[data-testid=\"autocomplete-table\"] {\n vertical-align: baseline;\n}\n\n.individualPane input:disabled,\n.contactPane input:disabled,\n.individualPane textarea:disabled,\n.contactPane textarea:disabled,\n.individualPane select:disabled,\n.contactPane select:disabled,\n.individualPane input[readonly],\n.contactPane input[readonly],\n.individualPane textarea[readonly],\n.contactPane textarea[readonly],\n.individualPane input:read-only,\n.contactPane input:read-only,\n.individualPane textarea:read-only,\n.contactPane textarea:read-only {\n background-color: var(--color-background) !important;\n cursor: not-allowed;\n opacity: var(--opacity-input-disabled);\n border: var(--border-width-xthin) solid var(--color-background) !important;\n}\n\n.contactPane .webidControl table td div.contactPane.namedPane {\n border: none !important;\n}\n\n/* ------------------------------------------------------------------ */\n/* inline popup used for small confirmation flows (like the new confirmDialog) */\n/* apply the class `rdf-inline-modal` on the outer wrapper and give the\n inner box the class `popup` instead of using the old inline styles. */\n\n/* selectors that match the old inline-styled markup when no classes can be added */\n\n/* Delete pop up */\n/* Remove the intermediate positioned ancestor so the popup anchors to .hoverControl instead */\n.individualPane div[style*=\"position: relative\"]:has(> div[style*=\"display: grid\"]) {\n position: static !important;\n}\n\n.individualPane div[style*=\"position: relative\"] > div[style*=\"display: grid\"] {\n /* override inline values with theme variables */\n position: absolute !important;\n top: 0 !important;\n right: 0 !important;\n left: auto !important;\n z-index: 9999 !important;\n display: grid !important;\n pointer-events: auto !important;\n opacity: 1 !important;\n visibility: visible !important;\n padding: var(--spacing-btn) !important;\n background: var(--color-background) !important;\n border: var(--border-width-sm) solid var(--color-primary) !important;\n border-radius: var(--border-radius-base) !important;\n box-shadow: var(--box-shadow-popup) !important;\n grid-template-columns: auto auto !important;\n gap: var(--spacing-xxs) !important;\n}\n\n.individualPane .hoverControl img.hoverControlHide,\n.individualPane .hoverControl [data-testid=\"deleteButtonWithCheck\"] {\n position: absolute !important;\n right: var(--spacing-xxxs) !important;\n width: 1.5em !important;\n height: 1.5em !important;\n display: none !important;\n align-items: center;\n justify-content: center;\n margin: 0 !important;\n float: none !important;\n z-index: 2 !important;\n}\n\n/* Show delete icon only on hover */\n.individualPane .hoverControl:hover img.hoverControlHide,\n.individualPane .hoverControl:hover [data-testid=\"deleteButtonWithCheck\"] {\n display: inline-flex !important;\n}\n\n/* If the hoverControl has exactly one div + the delete icon, keep the icon vertically centered but right-aligned */\n.individualPane .hoverControl:has(> div:nth-child(1):nth-last-child(2)):hover > img.hoverControlHide,\n.individualPane .hoverControl:has(> div:nth-child(1):nth-last-child(2)):hover > [data-testid=\"deleteButtonWithCheck\"] {\n top: 50% !important;\n right: var(--spacing-xxxs) !important;\n left: auto !important;\n transform: translateY(-50%) !important;\n}"],"sourceRoot":""}]);
2132
+ // Exports
2133
+ /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
2134
+
2135
+
2136
+ /***/ },
2137
+
2138
+ /***/ 93
2139
+ (module, __nested_webpack_exports__, __nested_webpack_require_79190__) {
2140
+
2141
+ /* harmony export */ __nested_webpack_require_79190__.d(__nested_webpack_exports__, {
2142
+ /* harmony export */ A: () => (__WEBPACK_DEFAULT_EXPORT__)
2143
+ /* harmony export */ });
2144
+ /* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __nested_webpack_require_79190__(354);
2145
+ /* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_79190__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
2146
+ /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __nested_webpack_require_79190__(314);
2147
+ /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_79190__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
2148
+ // Imports
2149
+
2150
+
2151
+ var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
2152
+ // Module
2153
+ ___CSS_LOADER_EXPORT___.push([module.id, `/* ── Group Membership Section ──────────────────────────────── */
2154
+
2155
+ .contactPane .group-membership-container {
2156
+ padding: var(--spacing-sm) 0;
2157
+ }
2158
+
2159
+ /* Grid wrapper — matches detailsSectionContent groupButtonsList */
2160
+ .contactPane .group-pills-wrapper {
2161
+ display: grid !important;
2162
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
2163
+ gap: var(--spacing-sm) !important;
2164
+ list-style: none;
2165
+ padding: 0;
2166
+ margin: 0;
2167
+ width: 100% !important;
2168
+ }
2169
+
2170
+ .contactPane .group-pills-wrapper span {
2171
+ width: max-content !important;
2172
+ }
2173
+
2174
+ /* Each group item: button on top, toolbar below */
2175
+ .contactPane .group-membership-item {
2176
+ display: flex;
2177
+ flex-direction: column;
2178
+ align-items: stretch;
2179
+ max-width: 256px;
2180
+ }
2181
+
2182
+ .contactPane .group-membership-item > button {
2183
+ width: 100%;
2184
+ text-align: center;
2185
+ border-radius: var(--border-radius-base);
2186
+ word-wrap: break-word;
2187
+ overflow-wrap: break-word;
2188
+ min-height: var(--min-touch-target);
2189
+ }
2190
+
2191
+ /* Toolbar with link icon and delete button below each group button */
2192
+ .contactPane .group-membership-item .group-membership-toolbar {
2193
+ display: flex;
2194
+ justify-content: flex-end;
2195
+ align-items: center;
2196
+ gap: var(--spacing-xs);
2197
+ padding: var(--spacing-xs) 0 0 0;
2198
+ }
2199
+
2200
+ .contactPane .group-membership-item .group-membership-toolbar a img {
2201
+ width: 1.3em;
2202
+ height: 1em;
2203
+ margin: 0;
2204
+ }
2205
+
2206
+ /* Cancel float:right and any absolute positioning injected by solid-ui */
2207
+ .contactPane .group-membership-item .group-membership-toolbar > img.hoverControlHide,
2208
+ .contactPane .group-membership-item .group-membership-toolbar > [data-testid="deleteButtonWithCheck"] {
2209
+ float: none !important;
2210
+ position: static !important;
2211
+ display: inline-flex !important;
2212
+ visibility: hidden !important;
2213
+ margin: 0 !important;
2214
+ }
2215
+
2216
+ .contactPane .group-membership-item .group-membership-toolbar:hover > img.hoverControlHide,
2217
+ .contactPane .group-membership-item .group-membership-toolbar:hover > [data-testid="deleteButtonWithCheck"] {
2218
+ visibility: visible !important;
2219
+ }
2220
+
2221
+ .contactPane .detailsSectionContent .group-membership-item .group-membership-toolbar > div[style*="position: relative"] {
2222
+ position: absolute !important;
2223
+ top: 0 !important;
2224
+ left: 50% !important;
2225
+ transform: translateX(-50%) !important;
2226
+ width: min(90vw, 440px) !important;
2227
+ min-width: 280px !important;
2228
+ max-width: 90vw !important;
2229
+ display: flex;
2230
+ align-items: center;
2231
+ justify-content: center;
2232
+ z-index: 1000;
2233
+ }
2234
+
2235
+ .contactPane .detailsSectionContent .group-membership-item .group-membership-toolbar > div[style*="position: relative"] > div {
2236
+ position: relative !important;
2237
+ top: auto !important;
2238
+ min-width: 280px !important;
2239
+ background: var(--color-background);
2240
+ border-radius: var(--border-radius-full);
2241
+ padding: var(--spacing-lg);
2242
+ box-shadow: var(--box-shadow-overlay);
2243
+ z-index: 1001;
2244
+ }
2245
+
2246
+ @media (max-width: 599px) {
2247
+ .contactPane .group-membership-item .group-pills-wrapper {
2248
+ grid-template-columns: repeat(2, 1fr) !important;
2249
+ gap: var(--spacing-xs) !important;
2250
+ max-width: 100% !important;
2251
+ }
2252
+
2253
+ .contactPane .group-membership-item .group-membership-item > button {
2254
+ font-size: var(--font-size-sm) !important;
2255
+ border-radius: var(--border-radius-base) !important;
2256
+ }
2257
+ }
2258
+
2259
+ @media (min-width: 900px) {
2260
+ .contactPane .group-membership-item .group-pills-wrapper {
2261
+ grid-template-columns: repeat(3, 1fr) !important;
2262
+ gap: var(--spacing-sm) !important;
2263
+ }
2264
+ }
2265
+ `, "",{"version":3,"sources":["webpack://./src/styles/groupMembership.css"],"names":[],"mappings":"AAAA,iEAAiE;;AAEjE;EACE,4BAA4B;AAC9B;;AAEA,kEAAkE;AAClE;EACE,wBAAwB;EACxB,sEAAsE;EACtE,iCAAiC;EACjC,gBAAgB;EAChB,UAAU;EACV,SAAS;EACT,sBAAsB;AACxB;;AAEA;EACE,6BAA6B;AAC/B;;AAEA,kDAAkD;AAClD;EACE,aAAa;EACb,sBAAsB;EACtB,oBAAoB;EACpB,gBAAgB;AAClB;;AAEA;EACE,WAAW;EACX,kBAAkB;EAClB,wCAAwC;EACxC,qBAAqB;EACrB,yBAAyB;EACzB,mCAAmC;AACrC;;AAEA,qEAAqE;AACrE;EACE,aAAa;EACb,yBAAyB;EACzB,mBAAmB;EACnB,sBAAsB;EACtB,gCAAgC;AAClC;;AAEA;EACE,YAAY;EACZ,WAAW;EACX,SAAS;AACX;;AAEA,yEAAyE;AACzE;;EAEE,sBAAsB;EACtB,2BAA2B;EAC3B,+BAA+B;EAC/B,6BAA6B;EAC7B,oBAAoB;AACtB;;AAEA;;EAEE,8BAA8B;AAChC;;AAEA;EACE,6BAA6B;EAC7B,iBAAiB;EACjB,oBAAoB;EACpB,sCAAsC;EACtC,kCAAkC;EAClC,2BAA2B;EAC3B,0BAA0B;EAC1B,aAAa;EACb,mBAAmB;EACnB,uBAAuB;EACvB,aAAa;AACf;;AAEA;EACE,6BAA6B;EAC7B,oBAAoB;EACpB,2BAA2B;EAC3B,mCAAmC;EACnC,wCAAwC;EACxC,0BAA0B;EAC1B,qCAAqC;EACrC,aAAa;AACf;;AAEA;EACE;IACE,gDAAgD;IAChD,iCAAiC;IACjC,0BAA0B;EAC5B;;EAEA;IACE,yCAAyC;IACzC,mDAAmD;EACrD;AACF;;AAEA;EACE;IACE,gDAAgD;IAChD,iCAAiC;EACnC;AACF","sourcesContent":["/* ── Group Membership Section ──────────────────────────────── */\n\n.contactPane .group-membership-container {\n padding: var(--spacing-sm) 0;\n}\n\n/* Grid wrapper — matches detailsSectionContent groupButtonsList */\n.contactPane .group-pills-wrapper {\n display: grid !important;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;\n gap: var(--spacing-sm) !important;\n list-style: none;\n padding: 0;\n margin: 0;\n width: 100% !important;\n}\n\n.contactPane .group-pills-wrapper span {\n width: max-content !important;\n}\n\n/* Each group item: button on top, toolbar below */\n.contactPane .group-membership-item {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n max-width: 256px;\n}\n\n.contactPane .group-membership-item > button {\n width: 100%;\n text-align: center;\n border-radius: var(--border-radius-base);\n word-wrap: break-word;\n overflow-wrap: break-word;\n min-height: var(--min-touch-target);\n}\n\n/* Toolbar with link icon and delete button below each group button */\n.contactPane .group-membership-item .group-membership-toolbar {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n gap: var(--spacing-xs);\n padding: var(--spacing-xs) 0 0 0;\n}\n\n.contactPane .group-membership-item .group-membership-toolbar a img {\n width: 1.3em;\n height: 1em;\n margin: 0;\n}\n\n/* Cancel float:right and any absolute positioning injected by solid-ui */\n.contactPane .group-membership-item .group-membership-toolbar > img.hoverControlHide,\n.contactPane .group-membership-item .group-membership-toolbar > [data-testid=\"deleteButtonWithCheck\"] {\n float: none !important;\n position: static !important;\n display: inline-flex !important;\n visibility: hidden !important;\n margin: 0 !important;\n}\n\n.contactPane .group-membership-item .group-membership-toolbar:hover > img.hoverControlHide,\n.contactPane .group-membership-item .group-membership-toolbar:hover > [data-testid=\"deleteButtonWithCheck\"] {\n visibility: visible !important;\n}\n\n.contactPane .detailsSectionContent .group-membership-item .group-membership-toolbar > div[style*=\"position: relative\"] {\n position: absolute !important;\n top: 0 !important;\n left: 50% !important;\n transform: translateX(-50%) !important;\n width: min(90vw, 440px) !important;\n min-width: 280px !important;\n max-width: 90vw !important;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n}\n\n.contactPane .detailsSectionContent .group-membership-item .group-membership-toolbar > div[style*=\"position: relative\"] > div {\n position: relative !important;\n top: auto !important;\n min-width: 280px !important;\n background: var(--color-background);\n border-radius: var(--border-radius-full);\n padding: var(--spacing-lg);\n box-shadow: var(--box-shadow-overlay);\n z-index: 1001;\n}\n\n@media (max-width: 599px) {\n .contactPane .group-membership-item .group-pills-wrapper {\n grid-template-columns: repeat(2, 1fr) !important;\n gap: var(--spacing-xs) !important;\n max-width: 100% !important;\n }\n\n .contactPane .group-membership-item .group-membership-item > button {\n font-size: var(--font-size-sm) !important;\n border-radius: var(--border-radius-base) !important;\n }\n}\n\n@media (min-width: 900px) {\n .contactPane .group-membership-item .group-pills-wrapper {\n grid-template-columns: repeat(3, 1fr) !important;\n gap: var(--spacing-sm) !important;\n }\n}\n"],"sourceRoot":""}]);
2266
+ // Exports
2267
+ /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
2268
+
2269
+
2270
+ /***/ },
2271
+
2272
+ /***/ 479
2273
+ (module, __nested_webpack_exports__, __nested_webpack_require_88538__) {
2274
+
2275
+ /* harmony export */ __nested_webpack_require_88538__.d(__nested_webpack_exports__, {
2276
+ /* harmony export */ A: () => (__WEBPACK_DEFAULT_EXPORT__)
2277
+ /* harmony export */ });
2278
+ /* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __nested_webpack_require_88538__(354);
2279
+ /* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_88538__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
2280
+ /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __nested_webpack_require_88538__(314);
2281
+ /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_88538__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
2282
+ // Imports
2283
+
2284
+
2285
+ var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
2286
+ // Module
2287
+ ___CSS_LOADER_EXPORT___.push([module.id, `/* individual.js styles — extracted from inline styles */
2288
+
2289
+ /* ── Individual pane container ───────────────────────────────── */
2290
+
2291
+ .individualPane {
2292
+ padding: var(--spacing-xs) var(--spacing-lg) var(--spacing-md) var(--spacing-lg);
2293
+ background: var(--color-section-bg);
2294
+ border-radius: var(--border-radius-full);
2295
+ box-shadow: var(--box-shadow);
2296
+ box-sizing: border-box;
2297
+ max-width: 100%;
2298
+ }`, "",{"version":3,"sources":["webpack://./src/styles/individual.css"],"names":[],"mappings":"AAAA,wDAAwD;;AAExD,mEAAmE;;AAEnE;EACE,gFAAgF;EAChF,mCAAmC;EACnC,wCAAwC;EACxC,6BAA6B;EAC7B,sBAAsB;EACtB,eAAe;AACjB","sourcesContent":["/* individual.js styles — extracted from inline styles */\n\n/* ── Individual pane container ───────────────────────────────── */\n\n.individualPane {\n padding: var(--spacing-xs) var(--spacing-lg) var(--spacing-md) var(--spacing-lg);\n background: var(--color-section-bg);\n border-radius: var(--border-radius-full);\n box-shadow: var(--box-shadow);\n box-sizing: border-box;\n max-width: 100%;\n}"],"sourceRoot":""}]);
2299
+ // Exports
2300
+ /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
2301
+
2302
+
2303
+ /***/ },
2304
+
2305
+ /***/ 546
2306
+ (module, __nested_webpack_exports__, __nested_webpack_require_90905__) {
2307
+
2308
+ /* harmony export */ __nested_webpack_require_90905__.d(__nested_webpack_exports__, {
2309
+ /* harmony export */ A: () => (__WEBPACK_DEFAULT_EXPORT__)
2310
+ /* harmony export */ });
2311
+ /* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __nested_webpack_require_90905__(354);
2312
+ /* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_90905__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
2313
+ /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __nested_webpack_require_90905__(314);
2314
+ /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_90905__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
2315
+ // Imports
2316
+
2317
+
2318
+ var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
2319
+ // Module
2320
+ ___CSS_LOADER_EXPORT___.push([module.id, `/* CSS for the accessible modal dialogs created by localUtils.js */
2321
+
2322
+ /* backdrop / focus trap container */
2323
+ .focus-trap {
2324
+ position: fixed;
2325
+ top: 0;
2326
+ left: 0;
2327
+ width: 100%;
2328
+ height: 100%;
2329
+ z-index: 9999;
2330
+ background: var(--overlay-bg);
2331
+ display: flex;
2332
+ justify-content: center;
2333
+ align-items: center;
2334
+ }
2335
+
2336
+ /* inner dialog box */
2337
+ .focus-trap .modal {
2338
+ background: var(--color-background);
2339
+ padding: var(--spacing-lg);
2340
+ border-radius: var(--border-radius-base);
2341
+ max-width: 90%;
2342
+ box-shadow: var(--box-shadow-modal);
2343
+ }
2344
+
2345
+ /* button container: center buttons horizontally (uses id in markup) */
2346
+ #contacts-modal #modal-buttons {
2347
+ margin-top: var(--spacing-md);
2348
+ display: flex;
2349
+ justify-content: center;
2350
+ gap: var(--spacing-sm);
2351
+ }
2352
+
2353
+ /* buttons themselves use the shared btn-primary rules */
2354
+ #contacts-modal .modal button {
2355
+ min-height: var(--min-touch-target);
2356
+ padding: var(--spacing-sm) var(--spacing-md);
2357
+ border: 1px solid var(--color-primary);
2358
+ border-radius: var(--border-radius-base);
2359
+ font-weight: 600;
2360
+ cursor: pointer;
2361
+ transition: all var(--animation-duration) ease;
2362
+ }
2363
+
2364
+ #contacts-modal .modal button:disabled {
2365
+ opacity: var(--opacity-disabled);
2366
+ cursor: not-allowed;
2367
+ transform: none;
2368
+ }
2369
+ `, "",{"version":3,"sources":["webpack://./src/styles/localUtils.css"],"names":[],"mappings":"AAAA,kEAAkE;;AAElE,oCAAoC;AACpC;EACE,eAAe;EACf,MAAM;EACN,OAAO;EACP,WAAW;EACX,YAAY;EACZ,aAAa;EACb,6BAA6B;EAC7B,aAAa;EACb,uBAAuB;EACvB,mBAAmB;AACrB;;AAEA,qBAAqB;AACrB;EACE,mCAAmC;EACnC,0BAA0B;EAC1B,wCAAwC;EACxC,cAAc;EACd,mCAAmC;AACrC;;AAEA,sEAAsE;AACtE;EACE,6BAA6B;EAC7B,aAAa;EACb,uBAAuB;EACvB,sBAAsB;AACxB;;AAEA,wDAAwD;AACxD;EACE,mCAAmC;EACnC,4CAA4C;EAC5C,sCAAsC;EACtC,wCAAwC;EACxC,gBAAgB;EAChB,eAAe;EACf,8CAA8C;AAChD;;AAEA;EACE,gCAAgC;EAChC,mBAAmB;EACnB,eAAe;AACjB","sourcesContent":["/* CSS for the accessible modal dialogs created by localUtils.js */\n\n/* backdrop / focus trap container */\n.focus-trap {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 9999;\n background: var(--overlay-bg);\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n/* inner dialog box */\n.focus-trap .modal {\n background: var(--color-background);\n padding: var(--spacing-lg);\n border-radius: var(--border-radius-base);\n max-width: 90%;\n box-shadow: var(--box-shadow-modal);\n}\n\n/* button container: center buttons horizontally (uses id in markup) */\n#contacts-modal #modal-buttons {\n margin-top: var(--spacing-md);\n display: flex;\n justify-content: center;\n gap: var(--spacing-sm);\n}\n\n/* buttons themselves use the shared btn-primary rules */\n#contacts-modal .modal button {\n min-height: var(--min-touch-target);\n padding: var(--spacing-sm) var(--spacing-md);\n border: 1px solid var(--color-primary);\n border-radius: var(--border-radius-base);\n font-weight: 600;\n cursor: pointer;\n transition: all var(--animation-duration) ease;\n}\n\n#contacts-modal .modal button:disabled {\n opacity: var(--opacity-disabled);\n cursor: not-allowed;\n transform: none;\n}\n"],"sourceRoot":""}]);
2370
+ // Exports
2371
+ /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
2372
+
2373
+
2374
+ /***/ },
2375
+
2376
+ /***/ 715
2377
+ (module, __nested_webpack_exports__, __nested_webpack_require_95307__) {
2378
+
2379
+ /* harmony export */ __nested_webpack_require_95307__.d(__nested_webpack_exports__, {
2380
+ /* harmony export */ A: () => (__WEBPACK_DEFAULT_EXPORT__)
2381
+ /* harmony export */ });
2382
+ /* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __nested_webpack_require_95307__(354);
2383
+ /* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_95307__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
2384
+ /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __nested_webpack_require_95307__(314);
2385
+ /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_95307__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
2386
+ // Imports
2387
+
2388
+
2389
+ var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
2390
+ // Module
2391
+ ___CSS_LOADER_EXPORT___.push([module.id, `/* mugshotGallery.js styles — extracted from inline styles */
2392
+ /* Uses CSS custom properties from the global stylesheet (dev-global.css / mashlib) */
2393
+
2394
+ /* ── Mugshot image ───────────────────────────────────────────── */
2395
+
2396
+ .contactPane .mugshotImage {
2397
+ max-height: 10em;
2398
+ border-radius: var(--border-radius-full);
2399
+ margin: var(--spacing-sm);
2400
+ }
2401
+
2402
+ .contactPane button:has(> img[src\$=".svg"]) {
2403
+ background-color: var(--color-section-bg) !important;
2404
+ border: none !important;
2405
+ margin: 0 !important;
2406
+ border-radius: 0 !important;
2407
+ }
2408
+ `, "",{"version":3,"sources":["webpack://./src/styles/mugshotGallery.css"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,qFAAqF;;AAErF,mEAAmE;;AAEnE;EACE,gBAAgB;EAChB,wCAAwC;EACxC,yBAAyB;AAC3B;;AAEA;EACE,oDAAoD;EACpD,uBAAuB;EACvB,oBAAoB;EACpB,2BAA2B;AAC7B","sourcesContent":["/* mugshotGallery.js styles — extracted from inline styles */\n/* Uses CSS custom properties from the global stylesheet (dev-global.css / mashlib) */\n\n/* ── Mugshot image ───────────────────────────────────────────── */\n\n.contactPane .mugshotImage {\n max-height: 10em;\n border-radius: var(--border-radius-full);\n margin: var(--spacing-sm);\n}\n\n.contactPane button:has(> img[src$=\".svg\"]) {\n background-color: var(--color-section-bg) !important;\n border: none !important;\n margin: 0 !important;\n border-radius: 0 !important;\n}\n"],"sourceRoot":""}]);
2251
2409
  // Exports
2252
2410
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
2253
2411
 
@@ -2255,15 +2413,15 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Solid-UI form */
2255
2413
  /***/ },
2256
2414
 
2257
2415
  /***/ 295
2258
- (module, __nested_webpack_exports__, __nested_webpack_require_83259__) {
2416
+ (module, __nested_webpack_exports__, __nested_webpack_require_98002__) {
2259
2417
 
2260
- /* harmony export */ __nested_webpack_require_83259__.d(__nested_webpack_exports__, {
2418
+ /* harmony export */ __nested_webpack_require_98002__.d(__nested_webpack_exports__, {
2261
2419
  /* harmony export */ A: () => (__WEBPACK_DEFAULT_EXPORT__)
2262
2420
  /* harmony export */ });
2263
- /* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __nested_webpack_require_83259__(354);
2264
- /* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_83259__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
2265
- /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __nested_webpack_require_83259__(314);
2266
- /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_83259__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
2421
+ /* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __nested_webpack_require_98002__(354);
2422
+ /* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_98002__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
2423
+ /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __nested_webpack_require_98002__(314);
2424
+ /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_98002__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
2267
2425
  // Imports
2268
2426
 
2269
2427
 
@@ -2305,9 +2463,6 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* toolsPane.js styles — extracted f
2305
2463
 
2306
2464
  /* ── Load index button states ──────────────────────────────── */
2307
2465
 
2308
- .contactPane .toolsButton--loading {
2309
- }
2310
-
2311
2466
  .contactPane .toolsButton--error {
2312
2467
  background-color: var(--color-error);
2313
2468
  }
@@ -2315,7 +2470,128 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* toolsPane.js styles — extracted f
2315
2470
  .contactPane .toolsButton--success {
2316
2471
  background-color: var(--color-primary);
2317
2472
  }
2318
- `, "",{"version":3,"sources":["webpack://./src/styles/toolsPane.css"],"names":[],"mappings":"AAAA,uDAAuD;AACvD,qFAAqF;;AAErF,mEAAmE;;AAEnE;EACE,8BAA8B;EAC9B,yBAAyB;EACzB,yCAAyC;AAC3C;;AAEA;EACE,0BAA0B;EAC1B,qBAAqB;EACrB,qBAAqB;EACrB,yBAAyB;EACzB,gBAAgB;EAChB,eAAe;AACjB;;AAEA,oEAAoE;;AAEpE;EACE,aAAa;EACb,sBAAsB;EACtB,sBAAsB;AACxB;;AAEA;EACE,aAAa;EACb,eAAe;EACf,sBAAsB;AACxB;;AAEA,iEAAiE;;AAEjE;AACA;;AAEA;EACE,oCAAoC;AACtC;;AAEA;EACE,sCAAsC;AACxC","sourcesContent":["/* toolsPane.js styles — extracted from inline styles */\n/* Uses CSS custom properties from the global stylesheet (dev-global.css / mashlib) */\n\n/* ── Tools pane table ────────────────────────────────────────── */\n\n.contactPane .statsLog {\n font-size: var(--font-size-lg);\n margin: var(--spacing-md);\n background-color: var(--color-background);\n}\n\n.contactPane .statsLog pre {\n padding: var(--spacing-md);\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow-wrap: break-word;\n overflow: hidden;\n max-width: 100%;\n}\n\n/* ── Tools pane layout ────────────────────────────────────────── */\n\n.contactPane .toolsPane {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-xs);\n}\n\n.contactPane .toolsButtonsContainer {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing-xs);\n}\n\n/* ── Load index button states ──────────────────────────────── */\n\n.contactPane .toolsButton--loading {\n}\n\n.contactPane .toolsButton--error {\n background-color: var(--color-error);\n}\n\n.contactPane .toolsButton--success {\n background-color: var(--color-primary);\n}\n"],"sourceRoot":""}]);
2473
+ `, "",{"version":3,"sources":["webpack://./src/styles/toolsPane.css"],"names":[],"mappings":"AAAA,uDAAuD;AACvD,qFAAqF;;AAErF,mEAAmE;;AAEnE;EACE,8BAA8B;EAC9B,yBAAyB;EACzB,yCAAyC;AAC3C;;AAEA;EACE,0BAA0B;EAC1B,qBAAqB;EACrB,qBAAqB;EACrB,yBAAyB;EACzB,gBAAgB;EAChB,eAAe;AACjB;;AAEA,oEAAoE;;AAEpE;EACE,aAAa;EACb,sBAAsB;EACtB,sBAAsB;AACxB;;AAEA;EACE,aAAa;EACb,eAAe;EACf,sBAAsB;AACxB;;AAEA,iEAAiE;;AAEjE;EACE,oCAAoC;AACtC;;AAEA;EACE,sCAAsC;AACxC","sourcesContent":["/* toolsPane.js styles — extracted from inline styles */\n/* Uses CSS custom properties from the global stylesheet (dev-global.css / mashlib) */\n\n/* ── Tools pane table ────────────────────────────────────────── */\n\n.contactPane .statsLog {\n font-size: var(--font-size-lg);\n margin: var(--spacing-md);\n background-color: var(--color-background);\n}\n\n.contactPane .statsLog pre {\n padding: var(--spacing-md);\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow-wrap: break-word;\n overflow: hidden;\n max-width: 100%;\n}\n\n/* ── Tools pane layout ────────────────────────────────────────── */\n\n.contactPane .toolsPane {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-xs);\n}\n\n.contactPane .toolsButtonsContainer {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing-xs);\n}\n\n/* ── Load index button states ──────────────────────────────── */\n\n.contactPane .toolsButton--error {\n background-color: var(--color-error);\n}\n\n.contactPane .toolsButton--success {\n background-color: var(--color-primary);\n}\n"],"sourceRoot":""}]);
2474
+ // Exports
2475
+ /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
2476
+
2477
+
2478
+ /***/ },
2479
+
2480
+ /***/ 92
2481
+ (module, __nested_webpack_exports__, __nested_webpack_require_101903__) {
2482
+
2483
+ /* harmony export */ __nested_webpack_require_101903__.d(__nested_webpack_exports__, {
2484
+ /* harmony export */ A: () => (__WEBPACK_DEFAULT_EXPORT__)
2485
+ /* harmony export */ });
2486
+ /* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __nested_webpack_require_101903__(354);
2487
+ /* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_101903__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
2488
+ /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __nested_webpack_require_101903__(314);
2489
+ /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_101903__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
2490
+ // Imports
2491
+
2492
+
2493
+ var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
2494
+ // Module
2495
+ ___CSS_LOADER_EXPORT___.push([module.id, `/* Shared utility variables for component styles.
2496
+ These are kept here (instead of in dev-global.css) so they can be
2497
+ bundled with component styles and reused consistently across the app.
2498
+ */
2499
+
2500
+ :root {
2501
+ /* Global utility tokens */
2502
+ --opacity-disabled: 0.6;
2503
+ --opacity-input-disabled: 0.75;
2504
+ --font-weight-bold: 700;
2505
+
2506
+ --border-width-xthin: 0.05em;
2507
+ --border-width-sm: 0.1em;
2508
+ --border-width-thin: 1px;
2509
+
2510
+ --border-radius-xs: 0.1em;
2511
+ --border-radius-sm: 0.2em;
2512
+
2513
+ --spacing-xxs: 0.3em;
2514
+ --spacing-xxxs: 0.2em;
2515
+ --spacing-btn: 0.7em;
2516
+
2517
+ --box-shadow-hover: 0 2px 4px rgba(124, 77, 255, 0.2);
2518
+ --box-shadow-active: 0 1px 2px rgba(124, 77, 255, 0.2);
2519
+ --box-shadow-focus: 0 0 0 5px rgba(124, 77, 255, 0.25);
2520
+ --box-shadow-overlay: 0 4px 24px rgba(0, 0, 0, 0.2);
2521
+ --box-shadow-modal: 0 2px 10px rgba(0, 0, 0, 0.3);
2522
+ --box-shadow-popup: 0 0.5em 0.9em rgba(0, 0, 0, 0.2);
2523
+
2524
+ --overlay-bg: rgba(0, 0, 0, 0.5);
2525
+ --overlay-bg-muted: rgba(0, 0, 0, 0.3);
2526
+
2527
+ --color-border-accent: #88c;
2528
+ }
2529
+
2530
+ /* Utility helper classes */
2531
+ .hidden {
2532
+ display: none !important;
2533
+ }
2534
+
2535
+ .btn-primary {
2536
+ min-height: var(--min-touch-target);
2537
+ padding: var(--spacing-sm) var(--spacing-md);
2538
+ border: 1px solid var(--color-primary);
2539
+ border-radius: var(--border-radius-base);
2540
+ background: var(--color-primary);
2541
+ color: var(--color-background);
2542
+ font-weight: 600;
2543
+ cursor: pointer;
2544
+ transition: all var(--animation-duration) ease;
2545
+ }
2546
+
2547
+ .btn-primary:hover {
2548
+ background: color-mix(in srgb, var(--color-primary) 90%, black);
2549
+ box-shadow: var(--box-shadow-hover);
2550
+ }
2551
+
2552
+ .btn-primary:active {
2553
+ box-shadow: var(--box-shadow-active);
2554
+ }
2555
+
2556
+ .btn-primary:disabled {
2557
+ opacity: var(--opacity-disabled);
2558
+ cursor: not-allowed;
2559
+ transform: none;
2560
+ }
2561
+
2562
+ .btn-secondary {
2563
+ min-height: var(--min-touch-target);
2564
+ padding: var(--spacing-sm) var(--spacing-md);
2565
+ border: var(--border-width-thin) solid var(--color-secondary);
2566
+ border-radius: var(--border-radius-base);
2567
+ background: var(--color-secondary);
2568
+ color: var(--color-background);
2569
+ font-weight: var(--font-weight-bold);
2570
+ cursor: pointer;
2571
+ transition: all var(--animation-duration) ease;
2572
+ text-decoration: none;
2573
+ display: inline-flex;
2574
+ align-items: center;
2575
+ justify-content: center;
2576
+ }
2577
+
2578
+ .btn-secondary:hover {
2579
+ background: color-mix(in srgb, var(--color-secondary) 85%, black);
2580
+ }
2581
+
2582
+ .btn-secondary:disabled {
2583
+ opacity: var(--opacity-disabled);
2584
+ cursor: not-allowed;
2585
+ }
2586
+
2587
+ .action-button-focus:focus,
2588
+ .action-button-focus:focus-visible {
2589
+ outline: 3px solid var(--color-primary) !important;
2590
+ outline-offset: 2px !important;
2591
+ box-shadow: 0 0 0 2px var(--color-background), var(--box-shadow-focus) !important;
2592
+ z-index: 1;
2593
+ }
2594
+ `, "",{"version":3,"sources":["webpack://./src/styles/utilities.css"],"names":[],"mappings":"AAAA;;;CAGC;;AAED;EACE,0BAA0B;EAC1B,uBAAuB;EACvB,8BAA8B;EAC9B,uBAAuB;;EAEvB,4BAA4B;EAC5B,wBAAwB;EACxB,wBAAwB;;EAExB,yBAAyB;EACzB,yBAAyB;;EAEzB,oBAAoB;EACpB,qBAAqB;EACrB,oBAAoB;;EAEpB,qDAAqD;EACrD,sDAAsD;EACtD,sDAAsD;EACtD,mDAAmD;EACnD,iDAAiD;EACjD,oDAAoD;;EAEpD,gCAAgC;EAChC,sCAAsC;;EAEtC,2BAA2B;AAC7B;;AAEA,2BAA2B;AAC3B;EACE,wBAAwB;AAC1B;;AAEA;EACE,mCAAmC;EACnC,4CAA4C;EAC5C,sCAAsC;EACtC,wCAAwC;EACxC,gCAAgC;EAChC,8BAA8B;EAC9B,gBAAgB;EAChB,eAAe;EACf,8CAA8C;AAChD;;AAEA;EACE,+DAA+D;EAC/D,mCAAmC;AACrC;;AAEA;EACE,oCAAoC;AACtC;;AAEA;EACE,gCAAgC;EAChC,mBAAmB;EACnB,eAAe;AACjB;;AAEA;EACE,mCAAmC;EACnC,4CAA4C;EAC5C,6DAA6D;EAC7D,wCAAwC;EACxC,kCAAkC;EAClC,8BAA8B;EAC9B,oCAAoC;EACpC,eAAe;EACf,8CAA8C;EAC9C,qBAAqB;EACrB,oBAAoB;EACpB,mBAAmB;EACnB,uBAAuB;AACzB;;AAEA;EACE,iEAAiE;AACnE;;AAEA;EACE,gCAAgC;EAChC,mBAAmB;AACrB;;AAEA;;EAEE,kDAAkD;EAClD,8BAA8B;EAC9B,iFAAiF;EACjF,UAAU;AACZ","sourcesContent":["/* Shared utility variables for component styles.\n These are kept here (instead of in dev-global.css) so they can be\n bundled with component styles and reused consistently across the app.\n*/\n\n:root {\n /* Global utility tokens */\n --opacity-disabled: 0.6;\n --opacity-input-disabled: 0.75;\n --font-weight-bold: 700;\n\n --border-width-xthin: 0.05em;\n --border-width-sm: 0.1em;\n --border-width-thin: 1px;\n\n --border-radius-xs: 0.1em;\n --border-radius-sm: 0.2em;\n\n --spacing-xxs: 0.3em;\n --spacing-xxxs: 0.2em;\n --spacing-btn: 0.7em;\n\n --box-shadow-hover: 0 2px 4px rgba(124, 77, 255, 0.2);\n --box-shadow-active: 0 1px 2px rgba(124, 77, 255, 0.2);\n --box-shadow-focus: 0 0 0 5px rgba(124, 77, 255, 0.25);\n --box-shadow-overlay: 0 4px 24px rgba(0, 0, 0, 0.2);\n --box-shadow-modal: 0 2px 10px rgba(0, 0, 0, 0.3);\n --box-shadow-popup: 0 0.5em 0.9em rgba(0, 0, 0, 0.2);\n\n --overlay-bg: rgba(0, 0, 0, 0.5);\n --overlay-bg-muted: rgba(0, 0, 0, 0.3);\n\n --color-border-accent: #88c;\n}\n\n/* Utility helper classes */\n.hidden {\n display: none !important;\n}\n\n.btn-primary {\n min-height: var(--min-touch-target);\n padding: var(--spacing-sm) var(--spacing-md);\n border: 1px solid var(--color-primary);\n border-radius: var(--border-radius-base);\n background: var(--color-primary);\n color: var(--color-background);\n font-weight: 600;\n cursor: pointer;\n transition: all var(--animation-duration) ease;\n}\n\n.btn-primary:hover {\n background: color-mix(in srgb, var(--color-primary) 90%, black);\n box-shadow: var(--box-shadow-hover);\n}\n\n.btn-primary:active {\n box-shadow: var(--box-shadow-active);\n}\n\n.btn-primary:disabled {\n opacity: var(--opacity-disabled);\n cursor: not-allowed;\n transform: none;\n}\n\n.btn-secondary {\n min-height: var(--min-touch-target);\n padding: var(--spacing-sm) var(--spacing-md);\n border: var(--border-width-thin) solid var(--color-secondary);\n border-radius: var(--border-radius-base);\n background: var(--color-secondary);\n color: var(--color-background);\n font-weight: var(--font-weight-bold);\n cursor: pointer;\n transition: all var(--animation-duration) ease;\n text-decoration: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.btn-secondary:hover {\n background: color-mix(in srgb, var(--color-secondary) 85%, black);\n}\n\n.btn-secondary:disabled {\n opacity: var(--opacity-disabled);\n cursor: not-allowed;\n}\n\n.action-button-focus:focus,\n.action-button-focus:focus-visible {\n outline: 3px solid var(--color-primary) !important;\n outline-offset: 2px !important;\n box-shadow: 0 0 0 2px var(--color-background), var(--box-shadow-focus) !important;\n z-index: 1;\n}\n"],"sourceRoot":""}]);
2319
2595
  // Exports
2320
2596
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
2321
2597
 
@@ -2323,15 +2599,15 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* toolsPane.js styles — extracted f
2323
2599
  /***/ },
2324
2600
 
2325
2601
  /***/ 886
2326
- (module, __nested_webpack_exports__, __nested_webpack_require_87255__) {
2602
+ (module, __nested_webpack_exports__, __nested_webpack_require_109627__) {
2327
2603
 
2328
- /* harmony export */ __nested_webpack_require_87255__.d(__nested_webpack_exports__, {
2604
+ /* harmony export */ __nested_webpack_require_109627__.d(__nested_webpack_exports__, {
2329
2605
  /* harmony export */ A: () => (__WEBPACK_DEFAULT_EXPORT__)
2330
2606
  /* harmony export */ });
2331
- /* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __nested_webpack_require_87255__(354);
2332
- /* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_87255__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
2333
- /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __nested_webpack_require_87255__(314);
2334
- /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_87255__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
2607
+ /* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __nested_webpack_require_109627__(354);
2608
+ /* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_109627__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
2609
+ /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __nested_webpack_require_109627__(314);
2610
+ /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_109627__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
2335
2611
  // Imports
2336
2612
 
2337
2613
 
@@ -2339,7 +2615,7 @@ var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBP
2339
2615
  // Module
2340
2616
  ___CSS_LOADER_EXPORT___.push([module.id, `/* ── Named pane (rendered sub-pane) ──────────────────────────── */
2341
2617
  .contactPane .namedPane {
2342
- border: 0.1em solid var(--color-text-muted);
2618
+ border: var(--border-width-sm) solid var(--color-text-muted);
2343
2619
  border-radius: var(--border-radius-base);
2344
2620
  }
2345
2621
 
@@ -2349,8 +2625,15 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* ── Named pane (rendered sub-pan
2349
2625
  padding: var(--spacing-xs);
2350
2626
  }
2351
2627
 
2352
- .contactPane .personaRow--webid {
2353
- background-color: var(--color-info-bg);
2628
+ .contactPane .personaRow--webid,
2629
+ .contactPane .personaRow--webid td,
2630
+ .contactPane .personaRow--webid button,
2631
+ .contactPane .personaRow--webid button:hover,
2632
+ .contactPane .personaRow--webid .hoverControl:has(> img:first-child),
2633
+ .contactPane .personaRow--webid .hoverControl:has(> img:first-child):hover,
2634
+ .contactPane .personaRow--webid .personaOpenButton:has(> img:first-child),
2635
+ .contactPane .personaRow--webid .personaOpenButton:has(> img:first-child):hover {
2636
+ background-color: var(--color-info-bg) !important;
2354
2637
  }
2355
2638
 
2356
2639
  /* ── Full-width elements ─────────────────────────────────────── */
@@ -2367,13 +2650,42 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* ── Named pane (rendered sub-pan
2367
2650
  border: none;
2368
2651
  }
2369
2652
 
2653
+ /* hoverControl layout overrides are now enforced in contactsRDFFormsEnforced.css */
2654
+
2655
+ /* ── Delete confirmation popup in webidControl ───────────────── */
2656
+
2657
+ /* Remove intermediate positioned ancestor so popup anchors to .hoverControl */
2658
+ .contactPane .webidControl div[style*="position: relative"]:has(> div[style*="display: grid"]) {
2659
+ position: static !important;
2660
+ }
2661
+
2662
+ /* Position the popup absolutely so it never participates in the flex row */
2663
+ .contactPane .webidControl div[style*="position: relative"] > div[style*="display: grid"] {
2664
+ position: absolute !important;
2665
+ top: 0 !important;
2666
+ right: 0 !important;
2667
+ left: auto !important;
2668
+ z-index: 9999 !important;
2669
+ display: grid !important;
2670
+ pointer-events: auto !important;
2671
+ opacity: 1 !important;
2672
+ visibility: visible !important;
2673
+ padding: var(--spacing-btn) !important;
2674
+ min-width: 12em !important;
2675
+ background: var(--color-background) !important;
2676
+ border: var(--border-width-sm) solid var(--color-primary) !important;
2677
+ border-radius: var(--border-radius-base) !important;
2678
+ box-shadow: var(--box-shadow-popup) !important;
2679
+ grid-template-columns: auto auto !important;
2680
+ gap: var(--spacing-xxs) !important;
2681
+ }
2682
+
2370
2683
  /* ── Section heading ─────────────────────────────────────────── */
2371
2684
 
2372
- .contactPane .webidHeading {
2685
+ .contactPane .contactPanedHeading {
2373
2686
  font-size: var(--font-size-lg);
2374
2687
  font-weight: bold;
2375
2688
  color: var(--color-primary);
2376
- padding: var(--spacing-xs);
2377
2689
  margin: var(--spacing-sm) 0;
2378
2690
  }
2379
2691
 
@@ -2388,14 +2700,10 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* ── Named pane (rendered sub-pan
2388
2700
 
2389
2701
  /* ── Visibility / display helpers ────────────────────────────── */
2390
2702
 
2391
- .contactPane .hidden {
2392
- display: none;
2393
- }
2394
-
2395
2703
  .contactPane .collapsed {
2396
2704
  visibility: collapse;
2397
2705
  }
2398
- `, "",{"version":3,"sources":["webpack://./src/styles/webidControl.css"],"names":[],"mappings":"AAAA,mEAAmE;AACnE;EACE,2CAA2C;EAC3C,wCAAwC;AAC1C;;AAEA,mEAAmE;;AAEnE;EACE,0BAA0B;AAC5B;;AAEA;EACE,sCAAsC;AACxC;;AAEA,mEAAmE;;AAEnE;EACE,WAAW;AACb;;AAEA,mEAAmE;;AAEnE;EACE,YAAY;EACZ,6BAA6B;EAC7B,YAAY;AACd;;AAEA,mEAAmE;;AAEnE;EACE,8BAA8B;EAC9B,iBAAiB;EACjB,2BAA2B;EAC3B,0BAA0B;EAC1B,2BAA2B;AAC7B;;AAEA,mEAAmE;;AAEnE;EACE,0BAA0B;EAC1B,YAAY;EACZ,gCAAgC;EAChC,qBAAqB;AACvB;;AAEA,mEAAmE;;AAEnE;EACE,aAAa;AACf;;AAEA;EACE,oBAAoB;AACtB","sourcesContent":["/* ── Named pane (rendered sub-pane) ──────────────────────────── */\n.contactPane .namedPane {\n border: 0.1em solid var(--color-text-muted);\n border-radius: var(--border-radius-base);\n}\n\n/* ── Persona row ─────────────────────────────────────────────── */\n\n.contactPane .personaRow {\n padding: var(--spacing-xs);\n}\n\n.contactPane .personaRow--webid {\n background-color: var(--color-info-bg);\n}\n\n/* ── Full-width elements ─────────────────────────────────────── */\n\n.contactPane .fullWidth {\n width: 100%;\n}\n\n/* ── Open/close profile button ───────────────────────────────── */\n\n.contactPane .personaOpenButton {\n float: right;\n background-color: transparent;\n border: none;\n}\n\n/* ── Section heading ─────────────────────────────────────────── */\n\n.contactPane .webidHeading {\n font-size: var(--font-size-lg);\n font-weight: bold;\n color: var(--color-primary);\n padding: var(--spacing-xs);\n margin: var(--spacing-sm) 0;\n}\n\n/* ── Prompt text ─────────────────────────────────────────────── */\n\n.contactPane .webidPrompt {\n padding: var(--spacing-sm);\n border: none;\n font-size: var(--font-size-base);\n white-space: pre-wrap;\n}\n\n/* ── Visibility / display helpers ────────────────────────────── */\n\n.contactPane .hidden {\n display: none;\n}\n\n.contactPane .collapsed {\n visibility: collapse;\n}\n"],"sourceRoot":""}]);
2706
+ `, "",{"version":3,"sources":["webpack://./src/styles/webidControl.css"],"names":[],"mappings":"AAAA,mEAAmE;AACnE;EACE,4DAA4D;EAC5D,wCAAwC;AAC1C;;AAEA,mEAAmE;;AAEnE;EACE,0BAA0B;AAC5B;;AAEA;;;;;;;;EAQE,iDAAiD;AACnD;;AAEA,mEAAmE;;AAEnE;EACE,WAAW;AACb;;AAEA,mEAAmE;;AAEnE;EACE,YAAY;EACZ,6BAA6B;EAC7B,YAAY;AACd;;AAEA,mFAAmF;;AAEnF,mEAAmE;;AAEnE,8EAA8E;AAC9E;EACE,2BAA2B;AAC7B;;AAEA,2EAA2E;AAC3E;EACE,6BAA6B;EAC7B,iBAAiB;EACjB,mBAAmB;EACnB,qBAAqB;EACrB,wBAAwB;EACxB,wBAAwB;EACxB,+BAA+B;EAC/B,qBAAqB;EACrB,8BAA8B;EAC9B,sCAAsC;EACtC,0BAA0B;EAC1B,8CAA8C;EAC9C,oEAAoE;EACpE,mDAAmD;EACnD,8CAA8C;EAC9C,2CAA2C;EAC3C,kCAAkC;AACpC;;AAEA,mEAAmE;;AAEnE;EACE,8BAA8B;EAC9B,iBAAiB;EACjB,2BAA2B;EAC3B,2BAA2B;AAC7B;;AAEA,mEAAmE;;AAEnE;EACE,0BAA0B;EAC1B,YAAY;EACZ,gCAAgC;EAChC,qBAAqB;AACvB;;AAEA,mEAAmE;;AAEnE;EACE,oBAAoB;AACtB","sourcesContent":["/* ── Named pane (rendered sub-pane) ──────────────────────────── */\n.contactPane .namedPane {\n border: var(--border-width-sm) solid var(--color-text-muted);\n border-radius: var(--border-radius-base);\n}\n\n/* ── Persona row ─────────────────────────────────────────────── */\n\n.contactPane .personaRow {\n padding: var(--spacing-xs);\n}\n\n.contactPane .personaRow--webid,\n.contactPane .personaRow--webid td,\n.contactPane .personaRow--webid button,\n.contactPane .personaRow--webid button:hover,\n.contactPane .personaRow--webid .hoverControl:has(> img:first-child),\n.contactPane .personaRow--webid .hoverControl:has(> img:first-child):hover,\n.contactPane .personaRow--webid .personaOpenButton:has(> img:first-child),\n.contactPane .personaRow--webid .personaOpenButton:has(> img:first-child):hover {\n background-color: var(--color-info-bg) !important;\n}\n\n/* ── Full-width elements ─────────────────────────────────────── */\n\n.contactPane .fullWidth {\n width: 100%;\n}\n\n/* ── Open/close profile button ───────────────────────────────── */\n\n.contactPane .personaOpenButton {\n float: right;\n background-color: transparent;\n border: none;\n}\n\n/* hoverControl layout overrides are now enforced in contactsRDFFormsEnforced.css */\n\n/* ── Delete confirmation popup in webidControl ───────────────── */\n\n/* Remove intermediate positioned ancestor so popup anchors to .hoverControl */\n.contactPane .webidControl div[style*=\"position: relative\"]:has(> div[style*=\"display: grid\"]) {\n position: static !important;\n}\n\n/* Position the popup absolutely so it never participates in the flex row */\n.contactPane .webidControl div[style*=\"position: relative\"] > div[style*=\"display: grid\"] {\n position: absolute !important;\n top: 0 !important;\n right: 0 !important;\n left: auto !important;\n z-index: 9999 !important;\n display: grid !important;\n pointer-events: auto !important;\n opacity: 1 !important;\n visibility: visible !important;\n padding: var(--spacing-btn) !important;\n min-width: 12em !important;\n background: var(--color-background) !important;\n border: var(--border-width-sm) solid var(--color-primary) !important;\n border-radius: var(--border-radius-base) !important;\n box-shadow: var(--box-shadow-popup) !important;\n grid-template-columns: auto auto !important;\n gap: var(--spacing-xxs) !important;\n}\n\n/* ── Section heading ─────────────────────────────────────────── */\n\n.contactPane .contactPanedHeading {\n font-size: var(--font-size-lg);\n font-weight: bold;\n color: var(--color-primary);\n margin: var(--spacing-sm) 0;\n}\n\n/* ── Prompt text ─────────────────────────────────────────────── */\n\n.contactPane .webidPrompt {\n padding: var(--spacing-sm);\n border: none;\n font-size: var(--font-size-base);\n white-space: pre-wrap;\n}\n\n/* ── Visibility / display helpers ────────────────────────────── */\n\n.contactPane .collapsed {\n visibility: collapse;\n}\n"],"sourceRoot":""}]);
2399
2707
  // Exports
2400
2708
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
2401
2709
 
@@ -2694,13 +3002,13 @@ module.exports = insertStyleElement;
2694
3002
  /***/ },
2695
3003
 
2696
3004
  /***/ 56
2697
- (module, __unused_webpack_exports, __nested_webpack_require_99112__) {
3005
+ (module, __unused_webpack_exports, __nested_webpack_require_124929__) {
2698
3006
 
2699
3007
 
2700
3008
 
2701
3009
  /* istanbul ignore next */
2702
3010
  function setAttributesWithoutAttributes(styleElement) {
2703
- var nonce = true ? __nested_webpack_require_99112__.nc : 0;
3011
+ var nonce = true ? __nested_webpack_require_124929__.nc : 0;
2704
3012
  if (nonce) {
2705
3013
  styleElement.setAttribute("nonce", nonce);
2706
3014
  }
@@ -2830,7 +3138,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__104__;
2830
3138
  /******/ var __webpack_module_cache__ = {};
2831
3139
  /******/
2832
3140
  /******/ // The require function
2833
- /******/ function __nested_webpack_require_102277__(moduleId) {
3141
+ /******/ function __nested_webpack_require_128094__(moduleId) {
2834
3142
  /******/ // Check if module is in cache
2835
3143
  /******/ var cachedModule = __webpack_module_cache__[moduleId];
2836
3144
  /******/ if (cachedModule !== undefined) {
@@ -2844,24 +3152,24 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__104__;
2844
3152
  /******/ };
2845
3153
  /******/
2846
3154
  /******/ // Execute the module function
2847
- /******/ __webpack_modules__[moduleId](module, module.exports, __nested_webpack_require_102277__);
3155
+ /******/ __webpack_modules__[moduleId](module, module.exports, __nested_webpack_require_128094__);
2848
3156
  /******/
2849
3157
  /******/ // Return the exports of the module
2850
3158
  /******/ return module.exports;
2851
3159
  /******/ }
2852
3160
  /******/
2853
3161
  /******/ // expose the modules object (__webpack_modules__)
2854
- /******/ __nested_webpack_require_102277__.m = __webpack_modules__;
3162
+ /******/ __nested_webpack_require_128094__.m = __webpack_modules__;
2855
3163
  /******/
2856
3164
  /************************************************************************/
2857
3165
  /******/ /* webpack/runtime/compat get default export */
2858
3166
  /******/ (() => {
2859
3167
  /******/ // getDefaultExport function for compatibility with non-harmony modules
2860
- /******/ __nested_webpack_require_102277__.n = (module) => {
3168
+ /******/ __nested_webpack_require_128094__.n = (module) => {
2861
3169
  /******/ var getter = module && module.__esModule ?
2862
3170
  /******/ () => (module['default']) :
2863
3171
  /******/ () => (module);
2864
- /******/ __nested_webpack_require_102277__.d(getter, { a: getter });
3172
+ /******/ __nested_webpack_require_128094__.d(getter, { a: getter });
2865
3173
  /******/ return getter;
2866
3174
  /******/ };
2867
3175
  /******/ })();
@@ -2869,9 +3177,9 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__104__;
2869
3177
  /******/ /* webpack/runtime/define property getters */
2870
3178
  /******/ (() => {
2871
3179
  /******/ // define getter functions for harmony exports
2872
- /******/ __nested_webpack_require_102277__.d = (exports, definition) => {
3180
+ /******/ __nested_webpack_require_128094__.d = (exports, definition) => {
2873
3181
  /******/ for(var key in definition) {
2874
- /******/ if(__nested_webpack_require_102277__.o(definition, key) && !__nested_webpack_require_102277__.o(exports, key)) {
3182
+ /******/ if(__nested_webpack_require_128094__.o(definition, key) && !__nested_webpack_require_128094__.o(exports, key)) {
2875
3183
  /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
2876
3184
  /******/ }
2877
3185
  /******/ }
@@ -2880,12 +3188,12 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__104__;
2880
3188
  /******/
2881
3189
  /******/ /* webpack/runtime/hasOwnProperty shorthand */
2882
3190
  /******/ (() => {
2883
- /******/ __nested_webpack_require_102277__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
3191
+ /******/ __nested_webpack_require_128094__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
2884
3192
  /******/ })();
2885
3193
  /******/
2886
3194
  /******/ /* webpack/runtime/jsonp chunk loading */
2887
3195
  /******/ (() => {
2888
- /******/ __nested_webpack_require_102277__.b = (typeof document !== 'undefined' && document.baseURI) || self.location.href;
3196
+ /******/ __nested_webpack_require_128094__.b = (typeof document !== 'undefined' && document.baseURI) || self.location.href;
2889
3197
  /******/
2890
3198
  /******/ // object to store loaded and loading chunks
2891
3199
  /******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
@@ -2911,45 +3219,45 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__104__;
2911
3219
  /******/
2912
3220
  /******/ /* webpack/runtime/nonce */
2913
3221
  /******/ (() => {
2914
- /******/ __nested_webpack_require_102277__.nc = undefined;
3222
+ /******/ __nested_webpack_require_128094__.nc = undefined;
2915
3223
  /******/ })();
2916
3224
  /******/
2917
3225
  /************************************************************************/
2918
3226
  var __nested_webpack_exports__ = {};
2919
3227
 
2920
3228
  // EXPORTS
2921
- __nested_webpack_require_102277__.d(__nested_webpack_exports__, {
3229
+ __nested_webpack_require_128094__.d(__nested_webpack_exports__, {
2922
3230
  "default": () => (/* binding */ src_contactsPane)
2923
3231
  });
2924
3232
 
2925
3233
  // UNUSED EXPORTS: addPersonToGroup, addWebIDToContacts, getPersonas, groupMembers, removeWebIDFromContacts, saveNewContact, saveNewGroup
2926
3234
 
2927
3235
  // EXTERNAL MODULE: external {"commonjs":"solid-logic","commonjs2":"solid-logic","amd":"solid-logic","root":"SolidLogic"}
2928
- var external_commonjs_solid_logic_commonjs2_solid_logic_amd_solid_logic_root_SolidLogic_ = __nested_webpack_require_102277__(941);
3236
+ var external_commonjs_solid_logic_commonjs2_solid_logic_amd_solid_logic_root_SolidLogic_ = __nested_webpack_require_128094__(941);
2929
3237
  // EXTERNAL MODULE: external {"commonjs":"solid-ui","commonjs2":"solid-ui","amd":"solid-ui","root":"UI"}
2930
- var external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_ = __nested_webpack_require_102277__(104);
3238
+ var external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_ = __nested_webpack_require_128094__(104);
2931
3239
  // EXTERNAL MODULE: external {"commonjs":"rdflib","commonjs2":"rdflib","amd":"rdflib","root":"$rdf"}
2932
- var external_commonjs_rdflib_commonjs2_rdflib_amd_rdflib_root_$rdf_ = __nested_webpack_require_102277__(53);
3240
+ var external_commonjs_rdflib_commonjs2_rdflib_amd_rdflib_root_$rdf_ = __nested_webpack_require_128094__(53);
2933
3241
  // EXTERNAL MODULE: ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js
2934
- var injectStylesIntoStyleTag = __nested_webpack_require_102277__(72);
2935
- var injectStylesIntoStyleTag_default = /*#__PURE__*/__nested_webpack_require_102277__.n(injectStylesIntoStyleTag);
3242
+ var injectStylesIntoStyleTag = __nested_webpack_require_128094__(72);
3243
+ var injectStylesIntoStyleTag_default = /*#__PURE__*/__nested_webpack_require_128094__.n(injectStylesIntoStyleTag);
2936
3244
  // EXTERNAL MODULE: ./node_modules/style-loader/dist/runtime/styleDomAPI.js
2937
- var styleDomAPI = __nested_webpack_require_102277__(825);
2938
- var styleDomAPI_default = /*#__PURE__*/__nested_webpack_require_102277__.n(styleDomAPI);
3245
+ var styleDomAPI = __nested_webpack_require_128094__(825);
3246
+ var styleDomAPI_default = /*#__PURE__*/__nested_webpack_require_128094__.n(styleDomAPI);
2939
3247
  // EXTERNAL MODULE: ./node_modules/style-loader/dist/runtime/insertBySelector.js
2940
- var insertBySelector = __nested_webpack_require_102277__(659);
2941
- var insertBySelector_default = /*#__PURE__*/__nested_webpack_require_102277__.n(insertBySelector);
3248
+ var insertBySelector = __nested_webpack_require_128094__(659);
3249
+ var insertBySelector_default = /*#__PURE__*/__nested_webpack_require_128094__.n(insertBySelector);
2942
3250
  // EXTERNAL MODULE: ./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js
2943
- var setAttributesWithoutAttributes = __nested_webpack_require_102277__(56);
2944
- var setAttributesWithoutAttributes_default = /*#__PURE__*/__nested_webpack_require_102277__.n(setAttributesWithoutAttributes);
3251
+ var setAttributesWithoutAttributes = __nested_webpack_require_128094__(56);
3252
+ var setAttributesWithoutAttributes_default = /*#__PURE__*/__nested_webpack_require_128094__.n(setAttributesWithoutAttributes);
2945
3253
  // EXTERNAL MODULE: ./node_modules/style-loader/dist/runtime/insertStyleElement.js
2946
- var insertStyleElement = __nested_webpack_require_102277__(540);
2947
- var insertStyleElement_default = /*#__PURE__*/__nested_webpack_require_102277__.n(insertStyleElement);
3254
+ var insertStyleElement = __nested_webpack_require_128094__(540);
3255
+ var insertStyleElement_default = /*#__PURE__*/__nested_webpack_require_128094__.n(insertStyleElement);
2948
3256
  // EXTERNAL MODULE: ./node_modules/style-loader/dist/runtime/styleTagTransform.js
2949
- var styleTagTransform = __nested_webpack_require_102277__(113);
2950
- var styleTagTransform_default = /*#__PURE__*/__nested_webpack_require_102277__.n(styleTagTransform);
3257
+ var styleTagTransform = __nested_webpack_require_128094__(113);
3258
+ var styleTagTransform_default = /*#__PURE__*/__nested_webpack_require_128094__.n(styleTagTransform);
2951
3259
  // EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./src/styles/webidControl.css
2952
- var webidControl = __nested_webpack_require_102277__(886);
3260
+ var webidControl = __nested_webpack_require_128094__(886);
2953
3261
  ;// ./src/styles/webidControl.css
2954
3262
 
2955
3263
 
@@ -2978,6 +3286,8 @@ var update = injectStylesIntoStyleTag_default()(webidControl/* default */.A, opt
2978
3286
  /* harmony default export */ const styles_webidControl = (webidControl/* default */.A && webidControl/* default */.A.locals ? webidControl/* default */.A.locals : undefined);
2979
3287
 
2980
3288
  ;// ./src/debug.js
3289
+ /* eslint-disable no-console */
3290
+
2981
3291
  function log (...args) {
2982
3292
  console.log(...args)
2983
3293
  }
@@ -3268,7 +3578,6 @@ async function renderIdControl (person, dataBrowserContext, options) {
3268
3578
 
3269
3579
  async function refreshWebIDTable () {
3270
3580
  const personas = getPersonas(kb, person)
3271
- prompt.classList.toggle('hidden', personas.length > 0)
3272
3581
  utils.syncTableToArrayReOrdered(profileArea, personas, persona => renderPersona(dom, persona, kb))
3273
3582
  }
3274
3583
  async function addOneIdAndRefresh (person, webid) {
@@ -3276,7 +3585,7 @@ async function renderIdControl (person, dataBrowserContext, options) {
3276
3585
  await addWebIDToContacts(person, webid, options.urlType, kb)
3277
3586
  } catch (err) {
3278
3587
  error('Error adding webId ' + webid + ' to ' + person + '. Stack: ' + err)
3279
- div.appendChild(widgets.errorMessageBlock(dom, 'Error adding WebID to profile. If it persists, contact admin.'))
3588
+ div.appendChild(widgets.errorMessageBlock(dom, 'This is not a valid WebID.'))
3280
3589
  }
3281
3590
  await refreshWebIDTable()
3282
3591
  }
@@ -3293,12 +3602,9 @@ async function renderIdControl (person, dataBrowserContext, options) {
3293
3602
  }
3294
3603
 
3295
3604
  const h3 = div.appendChild(dom.createElement('h3'))
3296
- h3.textContent = options.idNoun
3297
- h3.classList.add('webidHeading')
3605
+ h3.textContent = 'Link to a ' + options.idNoun
3606
+ h3.classList.add('contactPanedHeading')
3298
3607
 
3299
- const prompt = div.appendChild(dom.createElement('p'))
3300
- prompt.classList.add('webidPrompt')
3301
- prompt.textContent = options.longPrompt
3302
3608
  const table = div.appendChild(dom.createElement('table'))
3303
3609
  table.classList.add('fullWidth')
3304
3610
 
@@ -3327,7 +3633,7 @@ async function renderIdControl (person, dataBrowserContext, options) {
3327
3633
  }
3328
3634
 
3329
3635
  // EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./src/styles/localUtils.css
3330
- var localUtils = __nested_webpack_require_102277__(546);
3636
+ var localUtils = __nested_webpack_require_128094__(546);
3331
3637
  ;// ./src/styles/localUtils.css
3332
3638
 
3333
3639
 
@@ -3370,7 +3676,10 @@ function setDom (d) {
3370
3676
  }
3371
3677
 
3372
3678
  // ---------- Accessible modal dialog helpers ----------
3373
- // Maintains a singleton overlay element and returns promises similar to
3679
+ // This code was generated by Generative AI (Raptor mini in GitHub Copilot) based on the following prompt:
3680
+ // Regarding accessibility, how should I replace alert()/confirm() with accessible modal dialogs?
3681
+ // Let us implement the modals in the localUtils.
3682
+
3374
3683
  // alert()/confirm(). The implementation ensures focus trapping, keyboard
3375
3684
  // support, and hides the rest of the page from screen readers while the
3376
3685
  // dialog is visible.
@@ -3606,6 +3915,107 @@ function nameFor (x) {
3606
3915
  return name ? name.value : '???'
3607
3916
  }
3608
3917
 
3918
+ /**
3919
+ * Prevent keyboard tabbing into labels/label-like links created by rdflib/solid-ui forms.
3920
+ * @param {HTMLElement} root
3921
+ */
3922
+ function skipLabelsFromTabbing (root) {
3923
+ // Many Solid-UI forms render field labels as focusable links (hrefs).
3924
+ // Make sure keyboard tabbing skips these label links entirely.
3925
+ const selectors = [
3926
+ 'label',
3927
+ '.formFieldName a',
3928
+ '.classifierBox-label a',
3929
+ '.choiceBox-label a',
3930
+ '.label a',
3931
+ // Skip focusable label-like links created by Solid-UI forms, including the vcard note link
3932
+ 'a[href="http://www.w3.org/2006/vcard/ns#note"]',
3933
+ 'a[href$="#note"]',
3934
+ ].join(', ')
3935
+
3936
+ // Some environments have NodeLists without forEach (e.g., older Safari).
3937
+ const nodes = root?.querySelectorAll?.(selectors)
3938
+ if (!nodes) return
3939
+
3940
+ Array.from(nodes).forEach(el => {
3941
+ // Some browsers may return null for tabIndex, and some elements may not
3942
+ // expose tabIndex at all (e.g., SVG elements), so guard before setting.
3943
+ if (typeof el.tabIndex === 'number' && el.tabIndex !== -1) {
3944
+ el.tabIndex = -1
3945
+ }
3946
+ // Ensure those label links are not announced as focusable elements
3947
+ if (el.getAttribute('aria-hidden') !== 'true') {
3948
+ el.setAttribute('aria-hidden', 'true')
3949
+ }
3950
+ })
3951
+ }
3952
+
3953
+ function isAWebID (subject) {
3954
+ const t = localUtils_kb.findTypeURIs(subject.doc())
3955
+ return !!t[localUtils_ns.foaf('PersonalProfileDocument').uri]
3956
+ }
3957
+
3958
+
3959
+ // Make the layout stack vertically when the containing pane gets narrow
3960
+ function setupResponsiveStacking (paneDiv, breakpoint = 900) {
3961
+ function updateFromPane () {
3962
+ const width = paneDiv.getBoundingClientRect().width
3963
+ const isNarrow = width <= breakpoint
3964
+ // Always track viewport fallback even if pane is not in DOM yet
3965
+ const viewportNarrow = (typeof window !== 'undefined' && typeof window.matchMedia === 'function')
3966
+ ? window.matchMedia('(max-width: ' + breakpoint + 'px)').matches
3967
+ : false
3968
+
3969
+ if (width > 0) {
3970
+ paneDiv.classList.toggle('contactPane--narrow', isNarrow)
3971
+ paneDiv.dataset.paneWidth = Math.round(width).toString()
3972
+ paneDiv.dataset.paneNarrow = isNarrow ? 'true' : 'false'
3973
+ } else {
3974
+ // If not inserted yet, apply viewport mode until placed.
3975
+ paneDiv.classList.toggle('contactPane--narrow', viewportNarrow)
3976
+ paneDiv.dataset.paneWidth = '0'
3977
+ paneDiv.dataset.paneNarrow = viewportNarrow ? 'true' : 'false'
3978
+ }
3979
+
3980
+ paneDiv.dataset.viewportNarrow = viewportNarrow ? 'true' : 'false'
3981
+
3982
+ return isNarrow
3983
+ }
3984
+
3985
+ function updateFromViewport () {
3986
+ const isNarrow = (typeof window !== 'undefined' && typeof window.matchMedia === 'function')
3987
+ ? window.matchMedia('(max-width: ' + breakpoint + 'px)').matches
3988
+ : false
3989
+ paneDiv.classList.toggle('contactPane--narrow', isNarrow)
3990
+ paneDiv.dataset.viewportNarrow = isNarrow ? 'true' : 'false'
3991
+ return isNarrow
3992
+ }
3993
+
3994
+ const resizeObserverAvailable = typeof ResizeObserver !== 'undefined'
3995
+ if (resizeObserverAvailable) {
3996
+ const ro = new ResizeObserver(() => updateFromPane())
3997
+ ro.observe(paneDiv)
3998
+ }
3999
+
4000
+ if (typeof window !== 'undefined' && typeof window.addEventListener === 'function') {
4001
+ window.addEventListener('resize', () => {
4002
+ updateFromPane()
4003
+ updateFromViewport()
4004
+ })
4005
+ }
4006
+
4007
+ // Initial state
4008
+ function ensureInitialUpdate () {
4009
+ const paneNarrow = updateFromPane()
4010
+ const viewportNarrow = updateFromViewport()
4011
+ // If we are not in the document yet, re-run until connected
4012
+ if (!paneDiv.isConnected) {
4013
+ requestAnimationFrame(ensureInitialUpdate)
4014
+ }
4015
+ }
4016
+
4017
+ ensureInitialUpdate()
4018
+ }
3609
4019
  ;// ./src/contactLogic.js
3610
4020
 
3611
4021
 
@@ -4026,7 +4436,7 @@ function mintNewAddressBook (dataBrowserContext, context) {
4026
4436
  }
4027
4437
 
4028
4438
  // EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./src/styles/mugshotGallery.css
4029
- var mugshotGallery = __nested_webpack_require_102277__(715);
4439
+ var mugshotGallery = __nested_webpack_require_128094__(715);
4030
4440
  ;// ./src/styles/mugshotGallery.css
4031
4441
 
4032
4442
 
@@ -4392,7 +4802,7 @@ function renderMugshotGallery (dom, subject) {
4392
4802
  }
4393
4803
 
4394
4804
  // EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./src/styles/groupMembership.css
4395
- var groupMembership = __nested_webpack_require_102277__(93);
4805
+ var groupMembership = __nested_webpack_require_128094__(93);
4396
4806
  ;// ./src/styles/groupMembership.css
4397
4807
 
4398
4808
 
@@ -4978,11 +5388,11 @@ const groupMembershipControl_ns = external_commonjs_solid_ui_commonjs2_solid_ui_
4978
5388
  const groupMembershipControl_kb = external_commonjs_solid_logic_commonjs2_solid_logic_amd_solid_logic_root_SolidLogic_.store
4979
5389
 
4980
5390
  // Groups the person is a member of
4981
- function groupMembershipControl_groupMembership (person) {
4982
- let groups = groupMembershipControl_kb.statementsMatching(null, groupMembershipControl_ns.owl('sameAs'), person).map(st => st.why)
4983
- .concat(groupMembershipControl_kb.each(null, groupMembershipControl_ns.vcard('hasMember'), person))
5391
+ function groupMembershipControl_groupMembership (person, store = groupMembershipControl_kb) {
5392
+ let groups = store.statementsMatching(null, groupMembershipControl_ns.owl('sameAs'), person).map(st => st.why)
5393
+ .concat(store.each(null, groupMembershipControl_ns.vcard('hasMember'), person))
4984
5394
  const strings = new Set(groups.map(group => normalizeGroupUri(group.uri))) // remove dups with normalized URIs
4985
- groups = [...strings].map(uri => groupMembershipControl_kb.sym(uri))
5395
+ groups = [...strings].map(uri => store.sym(uri))
4986
5396
  return groups
4987
5397
  }
4988
5398
 
@@ -5100,9 +5510,21 @@ async function renderGroupMemberships (person, context, ulPeople) {
5100
5510
  return li
5101
5511
  }
5102
5512
 
5103
- function syncGroupPills () {
5104
- const groups = groupMembershipControl_groupMembership(person)
5105
- const pillsWrapper = container.querySelector('.group-pills-wrapper')
5513
+ function syncGroupPills (groups = null) {
5514
+ // Clear previous render so we don't keep appending duplicate headers / lists
5515
+ container.innerHTML = ''
5516
+
5517
+ const header = dom.createElement('h3')
5518
+ header.classList.add('group-membership-header')
5519
+ header.textContent = 'Part of groups'
5520
+ container.appendChild(header)
5521
+
5522
+ const pillsWrapper = dom.createElement('ul')
5523
+ pillsWrapper.classList.add('group-pills-wrapper')
5524
+ container.appendChild(pillsWrapper)
5525
+
5526
+ groups = groups || groupMembershipControl_groupMembership(person, kb)
5527
+
5106
5528
  if (groups.length === 0) {
5107
5529
  pillsWrapper.innerHTML = '<span>Not part of any Address Book group.</span>'
5108
5530
  } else {
@@ -5118,12 +5540,13 @@ async function renderGroupMemberships (person, context, ulPeople) {
5118
5540
  if (!book) {
5119
5541
  book = kb.any(undefined, groupMembershipControl_ns.vcard('includesGroup'))
5120
5542
  if (!book) {
5121
- return // no book => no groups
5543
+ return [] // no book => no groups
5122
5544
  }
5123
5545
  }
5124
5546
  const groupIndex = kb.any(book, groupMembershipControl_ns.vcard('groupIndex'))
5125
5547
  const gs = book ? kb.each(book, groupMembershipControl_ns.vcard('includesGroup'), null, groupIndex) : []
5126
5548
  await kb.fetcher.load(gs)
5549
+ return gs
5127
5550
  }
5128
5551
 
5129
5552
  const { dom } = context
@@ -5132,30 +5555,21 @@ async function renderGroupMemberships (person, context, ulPeople) {
5132
5555
  const container = dom.createElement('div')
5133
5556
  container.classList.add('group-membership-container')
5134
5557
 
5135
- // Header
5136
- const header = dom.createElement('h3')
5137
- header.classList.add('group-membership-header')
5138
- header.textContent = 'Part of groups'
5139
- container.appendChild(header)
5140
-
5141
- const pillsWrapper = dom.createElement('ul')
5142
- pillsWrapper.classList.add('group-pills-wrapper')
5143
- container.appendChild(pillsWrapper)
5144
-
5145
- // find book any group and load all groups
5558
+ // find book any group and load all groups (so membership checks have the data they need)
5146
5559
  await loadGroupsFromBook()
5147
5560
 
5561
+ // renders the Part of Group
5148
5562
  container.refresh = syncGroupPills
5149
5563
  syncGroupPills()
5150
5564
  return container
5151
5565
  }
5152
5566
 
5153
5567
  ;// ./src/ontology/individualAndOrganizationForm.ttl
5154
- const individualAndOrganizationForm_namespaceObject = "# This turtle file defines the forms used in the contacts management\n#\n# Individuals and orgs are in one file as they both\n# share some forms (address etc) and also interactions (roles)\n\n# Forms documentation: https://solidos.github.io/solid-ui/docs/forms-intro.html\n\n@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>.\n@prefix dct: <http://purl.org/dc/terms/>.\n@prefix foaf: <http://xmlns.com/foaf/0.1/>.\n@prefix owl: <http://www.w3.org/2002/07/owl#>.\n@prefix prov: <http://www.w3.org/ns/prov#>.\n@prefix ui: <http://www.w3.org/ns/ui#>.\n@prefix schema: <http://schema.org/>.\n@prefix solid: <http://www.w3.org/ns/solid/terms#>.\n@prefix vcard: <http://www.w3.org/2006/vcard/ns#>.\n@prefix : <#>.\n\n\n############# For individual:\n:individualForm a ui:Form ;\n dct:title \"Contact details for a person\" ;\n ui:parts (\n :fullNameField\n :nicknameGroup\n :pronounsGroup\n :roleField\n :orgNameField\n # :addressesComment\n :addresses\n # :emailComment\n :eMails\n # :telephoneComment\n :telephones\n :birthdayField\n # :noteComment\n :noteField \n ) .\n\n :fullNameField\n a ui:SingleLineTextField ;\n ui:label \"Name\";\n ui:maxLength \"128\" ;\n ui:property vcard:fn .\n\n # Nickname\n\n :nicknameGroup a ui:Group; ui:weight 0; \n ui:parts (:nicknameField) .\n\n :nicknameField a ui:SingleLineTextField; \n ui:property foaf:nick;\n ui:label \"Nickname\"@en, \"Nom court\"@fr.\n\n # Pronouns\n\n :pronounsGroup a ui:Group; ui:weight 0; \n ui:parts ( :subjectPronounForm :objectPronounForm :relativePronounForm) .\n\n :subjectPronounForm a ui:SingleLineTextField; ui:property solid:preferredSubjectPronoun;\n ui:label \"He/she/they\" .\n :objectPronounForm a ui:SingleLineTextField; ui:property solid:preferredObjectPronoun;\n ui:label \"Him/her/them\" .\n :relativePronounForm a ui:SingleLineTextField; ui:property solid:preferredRelativePronoun;\n ui:label \"His/hers/theirs\" .\n \n :roleField\n a ui:SingleLineTextField ;\n ui:suppressEmptyUneditable true;\n ui:maxLength \"128\" ;\n ui:property vcard:role .\n\n :orgNameField\n a ui:SingleLineTextField ;\n ui:suppressEmptyUneditable true;\n ui:maxLength \"128\" ;\n ui:property vcard:organization-name .\n\n :addresses a ui:Multiple ;\n dct:title \"Address details\" ;\n ui:part :oneAddress ;\n ui:property vcard:hasAddress .\n\n :oneAddress a ui:Group ;\n ui:parts ( \n :id1409437207443 :id1409437292400 \n :id1409437421996 :id1409437467649 \n :id1409437569420 ). \n\n :id1409437207443\n a ui:SingleLineTextField ;\n ui:maxLength \"128\" ;\n ui:property vcard:street-address .\n\n :id1409437292400\n a ui:SingleLineTextField ;\n ui:maxLength \"128\" ;\n ui:property vcard:locality .\n\n :id1409437421996\n a ui:SingleLineTextField ;\n ui:maxLength \"25\" ;\n ui:property vcard:postal-code .\n\n :id1409437467649\n a ui:SingleLineTextField ;\n ui:maxLength \"128\" ;\n ui:property vcard:region .\n\n :id1409437569420\n a ui:SingleLineTextField ;\n ui:maxLength \"128\" ;\n ui:property vcard:country-name .\n\n\n :eMails a ui:Multiple ;\n ui:part :oneEMail ;\n ui:property vcard:hasEmail .\n\n :oneEMail a ui:Group ; # hint: side by side is good\n ui:part :emailValue, :emailType ;\n ui:parts ( :emailType :emailValue ).\n\n :emailValue\n a ui:EmailField ; ui:label \"email\";\n ui:property vcard:value .\n\n :emailType\n a ui:Classifier ;\n ui:canMintNew \"0\" ;\n ui:category vcard:Type ;\n ui:from vcard:Type ;\n ui:property rdf:type .\n\n :telephones a ui:Multiple ;\n ui:part :onetelephone ;\n ui:property vcard:hasTelephone .\n\n :onetelephone\n a ui:Group ;\n ui:part :telephoneValue, :telephoneType ;\n ui:parts ( :telephoneType :telephoneValue ).\n\n :telephoneValue\n a ui:PhoneField ;\n ui:property vcard:value .\n\n :telephoneType\n a ui:Classifier ;\n ui:canMintNew \"0\" ;\n ui:category vcard:TelephoneType ;\n ui:from vcard:Type ;\n ui:property rdf:type .\n\n :birthdayField a ui:DateField;\n ui:label \"Born\"@en;\n ui:suppressEmptyUneditable true;\n ui:property vcard:bday .\n\n :noteField\n a ui:MultiLineTextField ;\n ui:suppressEmptyUneditable true;\n ui:property vcard:note .\n\n# Ontology additions or interpretations needed for the form to work well\n\n# The ontology file doesn't make them disjoint. This makes the selector be a choice.\nvcard:TelephoneType owl:disjointUnionOf ( vcard:Cell vcard:Home vcard:Work) .\nvcard:Type owl:disjointUnionOf (vcard:Home vcard:Work) . # for email\n\n# Better field labels\nvcard:Cell ui:label \"mobile\"@en . # app will make initial caps if necessary\nvcard:hasAddress ui:label \"address\"@en .\nvcard:bday ui:label \"born\"@en.\nvcard:hasEmail ui:label \"email\"@en .\nvcard:hasTelephone ui:label \"phone\"@en .\nvcard:note ui:label \"notes\"@en .\n\n\n############ For organizations\n\n:organizationForm a ui:Form ; \n dct:title \"Contact details for an organization\";\n ui:parts (\n :OrgClassifier\n :fullNameField\n :homePageURIField\n :addresses\n :eMails\n :telephones\n :noteField ) .\n\n :OrgClassifier a ui:Classifier; \n ui:label \"What sort of organization?\"@en;\n ui:category solid:InterestingOrganization .\n\n :homePageURIField a ui:NamedNodeURIField;\n ui:label \"Homepage\"@en;\n ui:property schema:url .\n\n# Ontology data to drive the :OrgClassifier classifier\n solid:InterestingOrganization owl:disjointUnionOf (\n # Airline - a Corporation\n # Consortium - a Corporation or a NGO\n schema:Corporation\n schema:EducationalOrganization\n schema:ResearchOrganization # Proposed. https://github.com/schemaorg/schemaorg/issues/2877\n # FundingScheme - eh?\n schema:GovernmentOrganization\n # LibrarySystem\n # LocalBusiness - Corporation\n # MedicalOrganization - a Corporation or a NGO\n schema:NGO\n # NewsMediaOrganization - a Corporation or a NGO\n schema:PerformingGroup # a band\n schema:Project # like Solid\n schema:SportsOrganization) .\n";
5568
+ const individualAndOrganizationForm_namespaceObject = "# This turtle file defines the forms used in the contacts management\n#\n# Individuals and orgs are in one file as they both\n# share some forms (address etc) and also interactions (roles)\n\n# Forms documentation: https://solidos.github.io/solid-ui/docs/forms-intro.html\n\n@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>.\n@prefix dct: <http://purl.org/dc/terms/>.\n@prefix foaf: <http://xmlns.com/foaf/0.1/>.\n@prefix owl: <http://www.w3.org/2002/07/owl#>.\n@prefix prov: <http://www.w3.org/ns/prov#>.\n@prefix ui: <http://www.w3.org/ns/ui#>.\n@prefix schema: <http://schema.org/>.\n@prefix solid: <http://www.w3.org/ns/solid/terms#>.\n@prefix vcard: <http://www.w3.org/2006/vcard/ns#>.\n@prefix : <#>.\n\n\n############# For individual:\n:individualForm a ui:Form ;\n dct:title \"Contact details for a person\" ;\n ui:parts (\n :fullNameField\n :nicknameGroup\n :pronounsGroup\n :roleField\n :orgNameField\n # :addressesComment\n :addresses\n # :emailComment\n :eMails\n # :telephoneComment\n :telephones\n :birthdayField\n # :noteComment\n :noteField \n ) .\n\n :fullNameField\n a ui:SingleLineTextField ;\n ui:label \"Name\";\n ui:maxLength \"128\" ;\n ui:property vcard:fn .\n\n # Nickname\n\n :nicknameGroup a ui:Group; ui:weight 0; \n ui:parts (:nicknameField) .\n\n :nicknameField a ui:SingleLineTextField; \n ui:property foaf:nick;\n ui:label \"Nickname\"@en, \"Nom court\"@fr.\n\n # Pronouns\n\n :pronounsGroup a ui:Group; ui:weight 0; \n ui:parts ( :subjectPronounForm :objectPronounForm :relativePronounForm) .\n\n :subjectPronounForm a ui:SingleLineTextField; ui:property solid:preferredSubjectPronoun;\n ui:label \"he/she/they\" .\n :objectPronounForm a ui:SingleLineTextField; ui:property solid:preferredObjectPronoun;\n ui:label \"him/her/them\" .\n :relativePronounForm a ui:SingleLineTextField; ui:property solid:preferredRelativePronoun;\n ui:label \"his/hers/theirs\" .\n \n :roleField\n a ui:SingleLineTextField ;\n ui:suppressEmptyUneditable true;\n ui:maxLength \"128\" ;\n ui:property vcard:role .\n\n :orgNameField\n a ui:SingleLineTextField ;\n ui:suppressEmptyUneditable true;\n ui:maxLength \"128\" ;\n ui:property vcard:organization-name .\n\n :addresses a ui:Multiple ;\n dct:title \"Address details\" ;\n ui:part :oneAddress ;\n ui:property vcard:hasAddress .\n\n :oneAddress a ui:Group ;\n ui:parts ( \n :id1409437207443 :id1409437292400 \n :id1409437421996 :id1409437467649 \n :id1409437569420 ). \n\n :id1409437207443\n a ui:SingleLineTextField ;\n ui:maxLength \"128\" ;\n ui:property vcard:street-address .\n\n :id1409437292400\n a ui:SingleLineTextField ;\n ui:maxLength \"128\" ;\n ui:property vcard:locality .\n\n :id1409437421996\n a ui:SingleLineTextField ;\n ui:maxLength \"25\" ;\n ui:property vcard:postal-code .\n\n :id1409437467649\n a ui:SingleLineTextField ;\n ui:maxLength \"128\" ;\n ui:property vcard:region .\n\n :id1409437569420\n a ui:SingleLineTextField ;\n ui:maxLength \"128\" ;\n ui:property vcard:country-name .\n\n\n :eMails a ui:Multiple ;\n ui:part :oneEMail ;\n ui:property vcard:hasEmail .\n\n :oneEMail a ui:Group ; # hint: side by side is good\n ui:part :emailValue, :emailType ;\n ui:parts ( :emailType :emailValue ).\n\n :emailValue\n a ui:EmailField ; ui:label \"email\";\n ui:property vcard:value .\n\n :emailType\n a ui:Classifier ;\n ui:canMintNew \"0\" ;\n ui:category vcard:Type ;\n ui:from vcard:Type ;\n ui:property rdf:type .\n\n :telephones a ui:Multiple ;\n ui:part :onetelephone ;\n ui:property vcard:hasTelephone .\n\n :onetelephone\n a ui:Group ;\n ui:part :telephoneValue, :telephoneType ;\n ui:parts ( :telephoneType :telephoneValue ).\n\n :telephoneValue\n a ui:PhoneField ;\n ui:property vcard:value .\n\n :telephoneType\n a ui:Classifier ;\n ui:canMintNew \"0\" ;\n ui:category vcard:TelephoneType ;\n ui:from vcard:Type ;\n ui:property rdf:type .\n\n :birthdayField a ui:DateField;\n ui:label \"Born\"@en;\n ui:suppressEmptyUneditable true;\n ui:property vcard:bday .\n\n :noteField\n a ui:MultiLineTextField ;\n ui:suppressEmptyUneditable true;\n ui:property vcard:note .\n\n# Ontology additions or interpretations needed for the form to work well\n\n# The ontology file doesn't make them disjoint. This makes the selector be a choice.\nvcard:TelephoneType owl:disjointUnionOf ( vcard:Cell vcard:Home vcard:Work) .\nvcard:Type owl:disjointUnionOf (vcard:Home vcard:Work) . # for email\n\n# Better field labels\nvcard:Cell ui:label \"mobile\"@en . # app will make initial caps if necessary\nvcard:hasAddress ui:label \"address\"@en .\nvcard:bday ui:label \"born\"@en.\nvcard:hasEmail ui:label \"email\"@en .\nvcard:hasTelephone ui:label \"phone\"@en .\nvcard:note ui:label \"notes\"@en .\n\n\n############ For organizations\n\n:organizationForm a ui:Form ; \n dct:title \"Contact details for an organization\";\n ui:parts (\n :OrgClassifier\n :fullNameField\n :homePageURIField\n :addresses\n :eMails\n :telephones\n :noteField ) .\n\n :OrgClassifier a ui:Classifier; \n ui:label \"What sort of organization?\"@en;\n ui:category solid:InterestingOrganization .\n\n :homePageURIField a ui:NamedNodeURIField;\n ui:label \"Homepage\"@en;\n ui:property schema:url .\n\n# Ontology data to drive the :OrgClassifier classifier\n solid:InterestingOrganization owl:disjointUnionOf (\n # Airline - a Corporation\n # Consortium - a Corporation or a NGO\n schema:Corporation\n schema:EducationalOrganization\n schema:ResearchOrganization # Proposed. https://github.com/schemaorg/schemaorg/issues/2877\n # FundingScheme - eh?\n schema:GovernmentOrganization\n # LibrarySystem\n # LocalBusiness - Corporation\n # MedicalOrganization - a Corporation or a NGO\n schema:NGO\n # NewsMediaOrganization - a Corporation or a NGO\n schema:PerformingGroup # a band\n schema:Project # like Solid\n schema:SportsOrganization) .\n";
5155
5569
  ;// ./src/ontology/vcard.ttl
5156
5570
  const vcard_namespaceObject = "@prefix : <http://www.w3.org/2006/vcard/ns#> .\n@prefix owl: <http://www.w3.org/2002/07/owl#> .\n@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .\n@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#> .\n@prefix xml: <http://www.w3.org/XML/1998/namespace> .\n@prefix xsd: <http://www.w3.org/2001/XMLSchema#> .\n\n:Acquaintance a owl:Class ;\n rdfs:label \"Acquaintance\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :RelatedType .\n\n:Agent a owl:Class ;\n rdfs:label \"Agent\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :RelatedType .\n\n:BBS a owl:Class ;\n rdfs:label \"BBS\"@en ;\n rdfs:comment \"This class is deprecated\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :TelephoneType ;\n owl:deprecated true .\n\n:Car a owl:Class ;\n rdfs:label \"Car\"@en ;\n rdfs:comment \"This class is deprecated\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :TelephoneType ;\n owl:deprecated true .\n\n:Cell a owl:Class ;\n rdfs:label \"Cell\"@en ;\n rdfs:comment \"Also called mobile telephone\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :TelephoneType .\n\n:Child a owl:Class ;\n rdfs:label \"Child\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :RelatedType .\n\n:Colleague a owl:Class ;\n rdfs:label \"Colleague\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :RelatedType .\n\n:Contact a owl:Class ;\n rdfs:label \"Contact\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :RelatedType .\n\n:Coresident a owl:Class ;\n rdfs:label \"Coresident\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :RelatedType .\n\n:Coworker a owl:Class ;\n rdfs:label \"Coworker\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :RelatedType .\n\n:Crush a owl:Class ;\n rdfs:label \"Crush\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :RelatedType .\n\n:Date a owl:Class ;\n rdfs:label \"Date\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :RelatedType .\n\n:Dom a owl:Class ;\n rdfs:label \"Dom\"@en ;\n rdfs:comment \"This class is deprecated\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :Type ;\n owl:deprecated true .\n\n:Emergency a owl:Class ;\n rdfs:label \"Emergency\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :RelatedType .\n\n:Fax a owl:Class ;\n rdfs:label \"Fax\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :TelephoneType .\n\n:Female a owl:Class ;\n rdfs:label \"Female\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :Gender .\n\n:Friend a owl:Class ;\n rdfs:label \"Friend\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :RelatedType .\n\n:Home a owl:Class ;\n rdfs:label \"Home\"@en ;\n rdfs:comment \"This implies that the property is related to an individual's personal life\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :Type .\n\n:ISDN a owl:Class ;\n rdfs:label \"ISDN\"@en ;\n rdfs:comment \"This class is deprecated\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :Type ;\n owl:deprecated true .\n\n:Internet a owl:Class ;\n rdfs:label \"Internet\"@en ;\n rdfs:comment \"This class is deprecated\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :Type ;\n owl:deprecated true .\n\n:Intl a owl:Class ;\n rdfs:label \"Intl\"@en ;\n rdfs:comment \"This class is deprecated\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :Type ;\n owl:deprecated true .\n\n:Kin a owl:Class ;\n rdfs:label \"Kin\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :RelatedType .\n\n:Label a owl:Class ;\n rdfs:label \"Label\"@en ;\n rdfs:comment \"This class is deprecated\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :Type ;\n owl:deprecated true .\n\n:Male a owl:Class ;\n rdfs:label \"Male\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :Gender .\n\n:Me a owl:Class ;\n rdfs:label \"Me\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :RelatedType .\n\n:Met a owl:Class ;\n rdfs:label \"Met\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :RelatedType .\n\n:Modem a owl:Class ;\n rdfs:label \"Modem\"@en ;\n rdfs:comment \"This class is deprecated\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :TelephoneType ;\n owl:deprecated true .\n\n:Msg a owl:Class ;\n rdfs:label \"Msg\"@en ;\n rdfs:comment \"This class is deprecated\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :TelephoneType ;\n owl:deprecated true .\n\n:Muse a owl:Class ;\n rdfs:label \"Muse\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :RelatedType .\n\n:Neighbor a owl:Class ;\n rdfs:label \"Neighbor\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :RelatedType .\n\n:None a owl:Class ;\n rdfs:label \"None\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :Gender .\n\n:Other a owl:Class ;\n rdfs:label \"Other\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :Gender .\n\n:PCS a owl:Class ;\n rdfs:label \"PCS\"@en ;\n rdfs:comment \"This class is deprecated\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :TelephoneType ;\n owl:deprecated true .\n\n:Pager a owl:Class ;\n rdfs:label \"Pager\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :TelephoneType .\n\n:Parcel a owl:Class ;\n rdfs:label \"Parcel\"@en ;\n rdfs:comment \"This class is deprecated\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :Type ;\n owl:deprecated true .\n\n:Parent a owl:Class ;\n rdfs:label \"Parent\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :RelatedType .\n\n:Postal a owl:Class ;\n rdfs:label \"Postal\"@en ;\n rdfs:comment \"This class is deprecated\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :Type ;\n owl:deprecated true .\n\n:Pref a owl:Class ;\n rdfs:label \"Pref\"@en ;\n rdfs:comment \"This class is deprecated\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :Type ;\n owl:deprecated true .\n\n:Sibling a owl:Class ;\n rdfs:label \"Sibling\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :RelatedType .\n\n:Spouse a owl:Class ;\n rdfs:label \"Spouse\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :RelatedType .\n\n:Sweetheart a owl:Class ;\n rdfs:label \"Sweetheart\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :RelatedType .\n\n:Tel a owl:Class ;\n rdfs:label \"Tel\"@en ;\n rdfs:comment \"This class is deprecated. Use the hasTelephone object property.\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n owl:deprecated true .\n\n:Text a owl:Class ;\n rdfs:label \"Text\"@en ;\n rdfs:comment \"Also called sms telephone\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :TelephoneType .\n\n:TextPhone a owl:Class ;\n rdfs:label \"Text phone\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :TelephoneType .\n\n:Unknown a owl:Class ;\n rdfs:label \"Unknown\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :Gender .\n\n:Video a owl:Class ;\n rdfs:label \"Video\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :TelephoneType .\n\n:Voice a owl:Class ;\n rdfs:label \"Voice\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :TelephoneType .\n\n:Work a owl:Class ;\n rdfs:label \"Work\"@en ;\n rdfs:comment \"This implies that the property is related to an individual's work place\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :Type .\n\n:X400 a owl:Class ;\n rdfs:label \"X400\"@en ;\n rdfs:comment \"This class is deprecated\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :Type ;\n owl:deprecated true .\n\n:adr a owl:ObjectProperty ;\n rdfs:label \"address\"@en ;\n rdfs:comment \"This object property has been mapped\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n owl:equivalentProperty :hasAddress .\n\n:agent a owl:ObjectProperty ;\n rdfs:label \"agent\"@en ;\n rdfs:comment \"This object property has been deprecated\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n owl:deprecated true .\n\n:anniversary a owl:DatatypeProperty ;\n rdfs:label \"anniversary\"@en ;\n rdfs:comment \"The date of marriage, or equivalent, of the object\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:range [ a rdfs:Datatype ;\n owl:unionOf ( xsd:dateTime xsd:gYear ) ] .\n\n:bday a owl:DatatypeProperty ;\n rdfs:label \"birth date\"@en ;\n rdfs:comment \"To specify the birth date of the object\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:range [ a rdfs:Datatype ;\n owl:unionOf ( xsd:dateTime xsd:dateTimeStamp xsd:gYear ) ] .\n\n:category a owl:DatatypeProperty ;\n rdfs:label \"category\"@en ;\n rdfs:comment \"The category information about the object, also known as tags\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:range xsd:string .\n\n:class a owl:DatatypeProperty ;\n rdfs:label \"class\"@en ;\n rdfs:comment \"This data property has been deprecated\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n owl:deprecated true .\n\n:email a owl:ObjectProperty ;\n rdfs:label \"email\"@en ;\n rdfs:comment \"This object property has been mapped\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n owl:equivalentProperty :hasEmail .\n\n:extended-address a owl:DatatypeProperty ;\n rdfs:label \"extended address\"@en ;\n rdfs:comment \"This data property has been deprecated\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n owl:deprecated true .\n\n:geo a owl:ObjectProperty ;\n rdfs:label \"geo\"@en ;\n rdfs:comment \"This object property has been mapped\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n owl:equivalentProperty :hasGeo .\n\n:hasAdditionalName a owl:ObjectProperty ;\n rdfs:label \"has additional name\"@en ;\n rdfs:comment \"Used to support property parameters for the additional name data property\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasCalendarBusy a owl:ObjectProperty ;\n rdfs:label \"has calendar busy\"@en ;\n rdfs:comment \"To specify the busy time associated with the object. (Was called FBURL in RFC6350)\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasCalendarLink a owl:ObjectProperty ;\n rdfs:label \"has calendar link\"@en ;\n rdfs:comment \"To specify the calendar associated with the object. (Was called CALURI in RFC6350)\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasCalendarRequest a owl:ObjectProperty ;\n rdfs:label \"has calendar request\"@en ;\n rdfs:comment \"To specify the calendar user address to which a scheduling request be sent for the object. (Was called CALADRURI in RFC6350)\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasCategory a owl:ObjectProperty ;\n rdfs:label \"has category\"@en ;\n rdfs:comment \"Used to support property parameters for the category data property\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasCountryName a owl:ObjectProperty ;\n rdfs:label \"has country name\"@en ;\n rdfs:comment \"Used to support property parameters for the country name data property\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasFN a owl:ObjectProperty ;\n rdfs:label \"has formatted name\"@en ;\n rdfs:comment \"Used to support property parameters for the formatted name data property\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasFamilyName a owl:ObjectProperty ;\n rdfs:label \"has family name\"@en ;\n rdfs:comment \"Used to support property parameters for the family name data property\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasGender a owl:ObjectProperty ;\n rdfs:label \"has gender\"@en ;\n rdfs:comment \"To specify the sex or gender identity of the object. URIs are recommended to enable interoperable sex and gender codes to be used.\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasGivenName a owl:ObjectProperty ;\n rdfs:label \"has given name\"@en ;\n rdfs:comment \"Used to support property parameters for the given name data property\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasHonorificPrefix a owl:ObjectProperty ;\n rdfs:label \"has honorific prefix\"@en ;\n rdfs:comment \"Used to support property parameters for the honorific prefix data property\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasHonorificSuffix a owl:ObjectProperty ;\n rdfs:label \"has honorific suffix\"@en ;\n rdfs:comment \"Used to support property parameters for the honorific suffix data property\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasInstantMessage a owl:ObjectProperty ;\n rdfs:label \"has messaging\"@en ;\n rdfs:comment \"To specify the instant messaging and presence protocol communications with the object. (Was called IMPP in RFC6350)\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasLanguage a owl:ObjectProperty ;\n rdfs:label \"has language\"@en ;\n rdfs:comment \"Used to support property parameters for the language data property\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasLocality a owl:ObjectProperty ;\n rdfs:label \"has locality\"@en ;\n rdfs:comment \"Used to support property parameters for the locality data property\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasNickname a owl:ObjectProperty ;\n rdfs:label \"has nickname\"@en ;\n rdfs:comment \"Used to support property parameters for the nickname data property\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:seeAlso :nickname .\n\n:hasNote a owl:ObjectProperty ;\n rdfs:label \"has note\"@en ;\n rdfs:comment \"Used to support property parameters for the note data property\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasOrganizationName a owl:ObjectProperty ;\n rdfs:label \"has organization name\"@en ;\n rdfs:comment \"Used to support property parameters for the organization name data property\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasOrganizationUnit a owl:ObjectProperty ;\n rdfs:label \"has organization unit name\"@en ;\n rdfs:comment \"Used to support property parameters for the organization unit name data property\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasPostalCode a owl:ObjectProperty ;\n rdfs:label \"has postal code\"@en ;\n rdfs:comment \"Used to support property parameters for the postal code data property\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasRegion a owl:ObjectProperty ;\n rdfs:label \"has region\"@en ;\n rdfs:comment \"Used to support property parameters for the region data property\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasRelated a owl:ObjectProperty ;\n rdfs:label \"has related\"@en ;\n rdfs:comment \"To specify a relationship between another entity and the entity represented by this object\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasRole a owl:ObjectProperty ;\n rdfs:label \"has role\"@en ;\n rdfs:comment \"Used to support property parameters for the role data property\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasSource a owl:ObjectProperty ;\n rdfs:label \"has source\"@en ;\n rdfs:comment \"To identify the source of directory information of the object\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasStreetAddress a owl:ObjectProperty ;\n rdfs:label \"has street address\"@en ;\n rdfs:comment \"Used to support property parameters for the street address data property\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasTitle a owl:ObjectProperty ;\n rdfs:label \"has title\"@en ;\n rdfs:comment \"Used to support property parameters for the title data property\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasUID a owl:ObjectProperty ;\n rdfs:label \"has uid\"@en ;\n rdfs:comment \"To specify a value that represents a globally unique identifier corresponding to the object\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasValue a owl:ObjectProperty ;\n rdfs:label \"has value\"@en ;\n rdfs:comment \"Used to indicate the resource value of an object property that requires property parameters\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:label a owl:DatatypeProperty ;\n rdfs:label \"label\"@en ;\n rdfs:comment \"This data property has been deprecated\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n owl:deprecated true .\n\n:language a owl:DatatypeProperty ;\n rdfs:label \"language\"@en ;\n rdfs:comment \"To specify the language that may be used for contacting the object. May also be used as a property parameter.\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:latitude a owl:DatatypeProperty ;\n rdfs:label \"latitude\"@en ;\n rdfs:comment \"This data property has been deprecated. See hasGeo\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n owl:deprecated true .\n\n:longitude a owl:DatatypeProperty ;\n rdfs:label \"longitude\"@en ;\n rdfs:comment \"This data property has been deprecated. See hasGeo\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n owl:deprecated true .\n\n:mailer a owl:DatatypeProperty ;\n rdfs:label \"mailer\"@en ;\n rdfs:comment \"This data property has been deprecated\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n owl:deprecated true .\n\n:note a owl:DatatypeProperty ;\n rdfs:label \"note\"@en ;\n rdfs:comment \"A note associated with the object\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:range xsd:string .\n\n:org a owl:ObjectProperty ;\n rdfs:label \"organization\"@en ;\n rdfs:comment \"This object property has been mapped. Use the organization-name data property.\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n owl:equivalentProperty :organization-name .\n\n:organization-unit a owl:DatatypeProperty ;\n rdfs:label \"organizational unit name\"@en ;\n rdfs:comment \"To specify the organizational unit name associated with the object\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:range xsd:string ;\n rdfs:subPropertyOf :organization-name .\n\n:post-office-box a owl:DatatypeProperty ;\n rdfs:label \"post office box\"@en ;\n rdfs:comment \"This data property has been deprecated\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n owl:deprecated true .\n\n:prodid a owl:DatatypeProperty ;\n rdfs:label \"product id\"@en ;\n rdfs:comment \"To specify the identifier for the product that created the object\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:range xsd:string .\n\n:rev a owl:DatatypeProperty ;\n rdfs:label \"revision\"@en ;\n rdfs:comment \"To specify revision information about the object\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:range xsd:dateTime .\n\n:role a owl:DatatypeProperty ;\n rdfs:label \"role\"@en ;\n rdfs:comment \"To specify the function or part played in a particular situation by the object\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:range xsd:string .\n\n:sort-string a owl:DatatypeProperty ;\n rdfs:label \"sort as\"@en ;\n rdfs:comment \"To specify the string to be used for national-language-specific sorting. Used as a property parameter only.\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:range xsd:string .\n\n:title a owl:DatatypeProperty ;\n rdfs:label \"title\"@en ;\n rdfs:comment \"To specify the position or job of the object\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:range xsd:string .\n\n:tz a owl:DatatypeProperty ;\n rdfs:label \"time zone\"@en ;\n rdfs:comment \"To indicate time zone information that is specific to the object. May also be used as a property parameter.\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:range xsd:string .\n\n:value a owl:DatatypeProperty ;\n rdfs:label \"value\"@en ;\n rdfs:comment \"Used to indicate the literal value of a data property that requires property parameters\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:Address a owl:Class ;\n rdfs:label \"Address\"@en ;\n rdfs:comment \"To specify the components of the delivery address for the object\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n owl:equivalentClass [ a owl:Class ;\n owl:unionOf ( [ a owl:Class ;\n owl:intersectionOf ( [ a owl:Restriction ;\n owl:onProperty :country-name ;\n owl:someValuesFrom xsd:string ] [ a owl:Restriction ;\n owl:maxCardinality \"1\"^^xsd:nonNegativeInteger ;\n owl:onProperty :country-name ] ) ] [ a owl:Class ;\n owl:intersectionOf ( [ a owl:Restriction ;\n owl:onProperty :locality ;\n owl:someValuesFrom xsd:string ] [ a owl:Restriction ;\n owl:maxCardinality \"1\"^^xsd:nonNegativeInteger ;\n owl:onProperty :locality ] ) ] [ a owl:Class ;\n owl:intersectionOf ( [ a owl:Restriction ;\n owl:onProperty :postal-code ;\n owl:someValuesFrom xsd:string ] [ a owl:Restriction ;\n owl:maxCardinality \"1\"^^xsd:nonNegativeInteger ;\n owl:onProperty :postal-code ] ) ] [ a owl:Class ;\n owl:intersectionOf ( [ a owl:Restriction ;\n owl:onProperty :region ;\n owl:someValuesFrom xsd:string ] [ a owl:Restriction ;\n owl:maxCardinality \"1\"^^xsd:nonNegativeInteger ;\n owl:onProperty :region ] ) ] [ a owl:Class ;\n owl:intersectionOf ( [ a owl:Restriction ;\n owl:onProperty :street-address ;\n owl:someValuesFrom xsd:string ] [ a owl:Restriction ;\n owl:maxCardinality \"1\"^^xsd:nonNegativeInteger ;\n owl:onProperty :street-address ] ) ] ) ] .\n\n:Email a owl:Class ;\n rdfs:label \"Email\"@en ;\n rdfs:comment \"To specify the electronic mail address for communication with the object the vCard represents. Use the hasEmail object property.\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n owl:deprecated true .\n\n:Group a owl:Class ;\n rdfs:label \"Group\"@en ;\n rdfs:comment \"Object representing a group of persons or entities. A group object will usually contain hasMember properties to specify the members of the group.\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :Kind ;\n owl:disjointWith :Individual,\n :Location,\n :Organization ;\n owl:equivalentClass [ a owl:Class ;\n owl:intersectionOf ( [ a owl:Restriction ;\n owl:onProperty :hasMember ;\n owl:someValuesFrom :Kind ] [ a owl:Restriction ;\n owl:minQualifiedCardinality \"1\"^^xsd:nonNegativeInteger ;\n owl:onClass :Kind ;\n owl:onProperty :hasMember ] ) ] .\n\n:Individual a owl:Class ;\n rdfs:label \"Individual\"@en ;\n rdfs:comment \"An object representing a single person or entity\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :Kind ;\n owl:disjointWith :Location,\n :Organization .\n\n:Name a owl:Class ;\n rdfs:label \"Name\"@en ;\n rdfs:comment \"To specify the components of the name of the object\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n owl:equivalentClass [ a owl:Class ;\n owl:unionOf ( [ a owl:Class ;\n owl:intersectionOf ( [ a owl:Restriction ;\n owl:onProperty :additional-name ;\n owl:someValuesFrom xsd:string ] [ a owl:Restriction ;\n owl:minCardinality \"0\"^^xsd:nonNegativeInteger ;\n owl:onProperty :additional-name ] ) ] [ a owl:Class ;\n owl:intersectionOf ( [ a owl:Restriction ;\n owl:onProperty :family-name ;\n owl:someValuesFrom xsd:string ] [ a owl:Restriction ;\n owl:maxCardinality \"1\"^^xsd:nonNegativeInteger ;\n owl:onProperty :family-name ] ) ] [ a owl:Class ;\n owl:intersectionOf ( [ a owl:Restriction ;\n owl:onProperty :given-name ;\n owl:someValuesFrom xsd:string ] [ a owl:Restriction ;\n owl:maxCardinality \"1\"^^xsd:nonNegativeInteger ;\n owl:onProperty :given-name ] ) ] [ a owl:Class ;\n owl:intersectionOf ( [ a owl:Restriction ;\n owl:onProperty :honorific-prefix ;\n owl:someValuesFrom xsd:string ] [ a owl:Restriction ;\n owl:minCardinality \"0\"^^xsd:nonNegativeInteger ;\n owl:onProperty :honorific-prefix ] ) ] [ a owl:Class ;\n owl:intersectionOf ( [ a owl:Restriction ;\n owl:onProperty :honorific-suffix ;\n owl:someValuesFrom xsd:string ] [ a owl:Restriction ;\n owl:minCardinality \"0\"^^xsd:nonNegativeInteger ;\n owl:onProperty :honorific-suffix ] ) ] ) ] .\n\n:VCard a owl:Class ;\n rdfs:label \"VCard\"@en ;\n rdfs:comment \"The vCard class is equivalent to the new Kind class, which is the parent for the four explicit types of vCards (Individual, Organization, Location, Group)\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n owl:equivalentClass :Kind .\n\n:fn a owl:DatatypeProperty ;\n rdfs:label \"formatted name\"@en ;\n rdfs:comment \"The formatted text corresponding to the name of the object\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:range xsd:string .\n\n:hasAddress a owl:ObjectProperty ;\n rdfs:label \"has address\"@en ;\n rdfs:comment \"To specify the components of the delivery address for the object\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:range :Address .\n\n:hasEmail a owl:ObjectProperty ;\n rdfs:label \"has email\"@en ;\n rdfs:comment \"To specify the electronic mail address for communication with the object\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:range :Email .\n\n:hasGeo a owl:ObjectProperty ;\n rdfs:label \"has geo\"@en ;\n rdfs:comment \"To specify information related to the global positioning of the object. May also be used as a property parameter.\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:hasKey a owl:ObjectProperty ;\n rdfs:label \"has key\"@en ;\n rdfs:comment \"To specify a public key or authentication certificate associated with the object\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n owl:equivalentProperty :key .\n\n:hasLogo a owl:ObjectProperty ;\n rdfs:label \"has logo\"@en ;\n rdfs:comment \"To specify a graphic image of a logo associated with the object \"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n owl:equivalentProperty :logo .\n\n:hasName a owl:ObjectProperty ;\n rdfs:label \"has name\"@en ;\n rdfs:comment \"To specify the components of the name of the object\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:range :Name ;\n owl:equivalentProperty :n .\n\n:hasPhoto a owl:ObjectProperty ;\n rdfs:label \"has photo\"@en ;\n rdfs:comment \"To specify an image or photograph information that annotates some aspect of the object\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n owl:equivalentProperty :photo .\n\n:hasSound a owl:ObjectProperty ;\n rdfs:label \"has sound\"@en ;\n rdfs:comment \"To specify a digital sound content information that annotates some aspect of the object\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n owl:equivalentProperty :sound .\n\n:hasTelephone a owl:ObjectProperty ;\n rdfs:label \"has telephone\"@en ;\n rdfs:comment \"To specify the telephone number for telephony communication with the object\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n owl:equivalentProperty :tel .\n\n:hasURL a owl:ObjectProperty ;\n rdfs:label \"has url\"@en ;\n rdfs:comment \"To specify a uniform resource locator associated with the object\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n owl:equivalentProperty :url .\n\n:key a owl:ObjectProperty ;\n rdfs:label \"key\"@en ;\n rdfs:comment \"This object property has been mapped\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n owl:equivalentProperty :hasKey .\n\n:logo a owl:ObjectProperty ;\n rdfs:label \"logo\"@en ;\n rdfs:comment \"This object property has been mapped\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n owl:equivalentProperty :hasLogo .\n\n:n a owl:ObjectProperty ;\n rdfs:label \"name\"@en ;\n rdfs:comment \"This object property has been mapped\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n owl:equivalentProperty :hasName .\n\n:nickname a owl:DatatypeProperty ;\n rdfs:label \"nickname\"@en ;\n rdfs:comment \"The nick name associated with the object\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:range xsd:string .\n\n:photo a owl:ObjectProperty ;\n rdfs:label \"photo\"@en ;\n rdfs:comment \"This object property has been mapped\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n owl:equivalentProperty :hasPhoto .\n\n:sound a owl:ObjectProperty ;\n rdfs:label \"sound\"@en ;\n rdfs:comment \"This object property has been mapped\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n owl:equivalentProperty :hasSound .\n\n:tel a owl:ObjectProperty ;\n rdfs:label \"telephone\"@en ;\n rdfs:comment \"This object property has been mapped\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n owl:equivalentProperty :hasTelephone .\n\n:url a owl:ObjectProperty ;\n rdfs:label \"url\"@en ;\n rdfs:comment \"This object property has been mapped\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n owl:equivalentProperty :hasURL .\n\n:Location a owl:Class ;\n rdfs:label \"Location\"@en ;\n rdfs:comment \"An object representing a named geographical place\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :Kind ;\n owl:disjointWith :Organization .\n\n:additional-name a owl:DatatypeProperty ;\n rdfs:label \"additional name\"@en ;\n rdfs:comment \"The additional name associated with the object\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:range xsd:string .\n\n:country-name a owl:DatatypeProperty ;\n rdfs:label \"country name\"@en ;\n rdfs:comment \"The country name associated with the address of the object\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:range xsd:string .\n\n:family-name a owl:DatatypeProperty ;\n rdfs:label \"family name\"@en ;\n rdfs:comment \"The family name associated with the object\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:range xsd:string .\n\n:given-name a owl:DatatypeProperty ;\n rdfs:label \"given name\"@en ;\n rdfs:comment \"The given name associated with the object\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:range xsd:string .\n\n:hasMember a owl:ObjectProperty ;\n rdfs:label \"has member\"@en ;\n rdfs:comment \"To include a member in the group this object represents. (This property can only be used by Group individuals)\"@en ;\n rdfs:domain :Group ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:range :Kind .\n\n:honorific-prefix a owl:DatatypeProperty ;\n rdfs:label \"honorific prefix\"@en ;\n rdfs:comment \"The honorific prefix of the name associated with the object\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:range xsd:string .\n\n:honorific-suffix a owl:DatatypeProperty ;\n rdfs:label \"honorific suffix\"@en ;\n rdfs:comment \"The honorific suffix of the name associated with the object\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:range xsd:string .\n\n:locality a owl:DatatypeProperty ;\n rdfs:label \"locality\"@en ;\n rdfs:comment \"The locality (e.g. city or town) associated with the address of the object\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:range xsd:string .\n\n:organization-name a owl:DatatypeProperty ;\n rdfs:label \"organization name\"@en ;\n rdfs:comment \"To specify the organizational name associated with the object\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:range xsd:string .\n\n:postal-code a owl:DatatypeProperty ;\n rdfs:label \"postal code\"@en ;\n rdfs:comment \"The postal code associated with the address of the object\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:range xsd:string .\n\n:region a owl:DatatypeProperty ;\n rdfs:label \"region\"@en ;\n rdfs:comment \"The region (e.g. state or province) associated with the address of the object\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:range xsd:string .\n\n:street-address a owl:DatatypeProperty ;\n rdfs:label \"street address\"@en ;\n rdfs:comment \"The street address associated with the address of the object\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:range xsd:string .\n\n:Organization a owl:Class ;\n rdfs:label \"Organization\"@en ;\n rdfs:comment \"\"\"An object representing an organization. An organization is a single entity, and might represent a business or government, a department or division within a business or government, a club, an association, or the like.\n\"\"\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n rdfs:subClassOf :Kind .\n\n:Gender a owl:Class ;\n rdfs:label \"Gender\"@en ;\n rdfs:comment \"Used for gender codes. The URI of the gender code must be used as the value for Gender.\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:Kind a owl:Class ;\n rdfs:label \"Kind\"@en ;\n rdfs:comment \"The parent class for all objects\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> ;\n owl:equivalentClass [ a owl:Restriction ;\n owl:minQualifiedCardinality \"1\"^^xsd:nonNegativeInteger ;\n owl:onDataRange xsd:string ;\n owl:onProperty :fn ],\n :VCard .\n\n:Type a owl:Class ;\n rdfs:label \"Type\"@en ;\n rdfs:comment \"Used for type codes. The URI of the type code must be used as the value for Type.\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:TelephoneType a owl:Class ;\n rdfs:label \"Phone\"@en ;\n rdfs:comment \"Used for telephone type codes. The URI of the telephone type code must be used as the value for the Telephone Type.\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n:RelatedType a owl:Class ;\n rdfs:label \"Relation Type\"@en ;\n rdfs:comment \"Used for relation type codes. The URI of the relation type code must be used as the value for the Relation Type.\"@en ;\n rdfs:isDefinedBy <http://www.w3.org/2006/vcard/ns> .\n\n<http://www.w3.org/2006/vcard/ns> a owl:Ontology ;\n rdfs:label \"Ontology for vCard\"@en ;\n rdfs:comment \"Ontology for vCard based on RFC6350\"@en ;\n owl:versionInfo \"Final\"@en .\n\n\n";
5157
5571
  // EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./src/styles/individual.css
5158
- var individual = __nested_webpack_require_102277__(479);
5572
+ var individual = __nested_webpack_require_128094__(479);
5159
5573
  ;// ./src/styles/individual.css
5160
5574
 
5161
5575
 
@@ -5183,9 +5597,9 @@ var individual_update = injectStylesIntoStyleTag_default()(individual/* default
5183
5597
 
5184
5598
  /* harmony default export */ const styles_individual = (individual/* default */.A && individual/* default */.A.locals ? individual/* default */.A.locals : undefined);
5185
5599
 
5186
- // EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./src/styles/rdfFormsEnforced.css
5187
- var rdfFormsEnforced = __nested_webpack_require_102277__(434);
5188
- ;// ./src/styles/rdfFormsEnforced.css
5600
+ // EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./src/styles/contactsRDFFormsEnforced.css
5601
+ var contactsRDFFormsEnforced = __nested_webpack_require_128094__(686);
5602
+ ;// ./src/styles/contactsRDFFormsEnforced.css
5189
5603
 
5190
5604
 
5191
5605
 
@@ -5197,20 +5611,20 @@ var rdfFormsEnforced = __nested_webpack_require_102277__(434);
5197
5611
 
5198
5612
 
5199
5613
 
5200
- var rdfFormsEnforced_options = {};
5614
+ var contactsRDFFormsEnforced_options = {};
5201
5615
 
5202
- rdfFormsEnforced_options.styleTagTransform = (styleTagTransform_default());
5203
- rdfFormsEnforced_options.setAttributes = (setAttributesWithoutAttributes_default());
5204
- rdfFormsEnforced_options.insert = insertBySelector_default().bind(null, "head");
5205
- rdfFormsEnforced_options.domAPI = (styleDomAPI_default());
5206
- rdfFormsEnforced_options.insertStyleElement = (insertStyleElement_default());
5616
+ contactsRDFFormsEnforced_options.styleTagTransform = (styleTagTransform_default());
5617
+ contactsRDFFormsEnforced_options.setAttributes = (setAttributesWithoutAttributes_default());
5618
+ contactsRDFFormsEnforced_options.insert = insertBySelector_default().bind(null, "head");
5619
+ contactsRDFFormsEnforced_options.domAPI = (styleDomAPI_default());
5620
+ contactsRDFFormsEnforced_options.insertStyleElement = (insertStyleElement_default());
5207
5621
 
5208
- var rdfFormsEnforced_update = injectStylesIntoStyleTag_default()(rdfFormsEnforced/* default */.A, rdfFormsEnforced_options);
5622
+ var contactsRDFFormsEnforced_update = injectStylesIntoStyleTag_default()(contactsRDFFormsEnforced/* default */.A, contactsRDFFormsEnforced_options);
5209
5623
 
5210
5624
 
5211
5625
 
5212
5626
 
5213
- /* harmony default export */ const styles_rdfFormsEnforced = (rdfFormsEnforced/* default */.A && rdfFormsEnforced/* default */.A.locals ? rdfFormsEnforced/* default */.A.locals : undefined);
5627
+ /* harmony default export */ const styles_contactsRDFFormsEnforced = (contactsRDFFormsEnforced/* default */.A && contactsRDFFormsEnforced/* default */.A.locals ? contactsRDFFormsEnforced/* default */.A.locals : undefined);
5214
5628
 
5215
5629
  ;// ./src/rdfFormsHelper.js
5216
5630
 
@@ -5277,6 +5691,7 @@ function loadDocument (
5277
5691
 
5278
5692
 
5279
5693
 
5694
+
5280
5695
  const individual_ns = external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.ns
5281
5696
  const individual_kb = external_commonjs_solid_logic_commonjs2_solid_logic_amd_solid_logic_root_SolidLogic_.store
5282
5697
 
@@ -5311,38 +5726,44 @@ async function renderIndividual (dom, div, subject, dataBrowserContext) {
5311
5726
  const whichForm = isOrganization ? 'organizationForm' : 'individualForm'
5312
5727
 
5313
5728
  renderForm(div, subject, individualAndOrganizationForm_namespaceObject, formsName, external_commonjs_solid_logic_commonjs2_solid_logic_amd_solid_logic_root_SolidLogic_.store, dom, subject.doc(), whichForm)
5729
+ // Improve keyboard navigation: prevent tabbing into label links created by rdflib/solid-ui forms
5730
+ skipLabelsFromTabbing(div)
5314
5731
 
5315
5732
  // forward list element from context if available; some callers (such as
5316
5733
  // the contacts pane) attach `ulPeople` so that group membership control can
5317
5734
  // refresh the master list when a membership is removed.
5318
- div.appendChild(await renderGroupMemberships(
5319
- subject,
5320
- dataBrowserContext,
5321
- dataBrowserContext.ulPeople
5322
- ))
5735
+ if (!isAWebID(subject)) {
5736
+ div.appendChild(await renderGroupMemberships(
5737
+ subject,
5738
+ dataBrowserContext,
5739
+ dataBrowserContext.ulPeople
5740
+ ))
5741
+ }
5323
5742
 
5324
5743
  if (external_commonjs_solid_logic_commonjs2_solid_logic_amd_solid_logic_root_SolidLogic_.authn.currentUser()) {
5325
5744
  // Allow to attach documents etc to the profile card
5745
+ // creates a
5326
5746
  const h3 = div.appendChild(dom.createElement('h3'))
5327
- h3.textContent = 'Attach a document'
5328
- h3.classList.add('webidHeading')
5747
+ h3.textContent = 'Attach a link to any file'
5748
+ h3.classList.add('contactPanedHeading')
5329
5749
 
5330
5750
  external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.widgets.attachmentList(dom, subject, div, {
5331
5751
  modify: editable
5332
5752
  // promptIcon: UI.icons.iconBase + 'noun_681601.svg',
5333
- // predicate: UI.ns.vcard('url') // @@@@@@@@@ ,--- no, the vcard ontology structure uses a bnode.
5753
+ // predicate: default <http://www.w3.org/2005/01/wf/flow#attachment>
5334
5754
  })
5335
5755
  }
5336
5756
 
5337
5757
  if (isOrganization) {
5338
5758
  div.appendChild(await renderPublicIdControl(subject, dataBrowserContext))
5339
- } else {
5759
+ } else if (!isAWebID(subject)) {
5760
+ // Only render WebID control for a contact and not. WebID.
5340
5761
  div.appendChild(await renderWebIdControl(subject, dataBrowserContext))
5341
5762
  }
5342
5763
  } // renderIndividual
5343
5764
 
5344
5765
  // EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./src/styles/toolsPane.css
5345
- var toolsPane = __nested_webpack_require_102277__(295);
5766
+ var toolsPane = __nested_webpack_require_128094__(295);
5346
5767
  ;// ./src/styles/toolsPane.css
5347
5768
 
5348
5769
 
@@ -6186,8 +6607,37 @@ async function fixToOldDataModel (book) {
6186
6607
  }
6187
6608
  */
6188
6609
 
6610
+ // EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./src/styles/utilities.css
6611
+ var utilities = __nested_webpack_require_128094__(92);
6612
+ ;// ./src/styles/utilities.css
6613
+
6614
+
6615
+
6616
+
6617
+
6618
+
6619
+
6620
+
6621
+
6622
+
6623
+
6624
+ var utilities_options = {};
6625
+
6626
+ utilities_options.styleTagTransform = (styleTagTransform_default());
6627
+ utilities_options.setAttributes = (setAttributesWithoutAttributes_default());
6628
+ utilities_options.insert = insertBySelector_default().bind(null, "head");
6629
+ utilities_options.domAPI = (styleDomAPI_default());
6630
+ utilities_options.insertStyleElement = (insertStyleElement_default());
6631
+
6632
+ var utilities_update = injectStylesIntoStyleTag_default()(utilities/* default */.A, utilities_options);
6633
+
6634
+
6635
+
6636
+
6637
+ /* harmony default export */ const styles_utilities = (utilities/* default */.A && utilities/* default */.A.locals ? utilities/* default */.A.locals : undefined);
6638
+
6189
6639
  // EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./src/styles/contactsPane.css
6190
- var contactsPane = __nested_webpack_require_102277__(903);
6640
+ var contactsPane = __nested_webpack_require_128094__(903);
6191
6641
  ;// ./src/styles/contactsPane.css
6192
6642
 
6193
6643
 
@@ -6240,6 +6690,7 @@ to change its state according to an ontology, comment on it, etc.
6240
6690
 
6241
6691
 
6242
6692
 
6693
+
6243
6694
  const contactsPane_ns = external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.ns
6244
6695
  const contactsPane_utils = external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.utils
6245
6696
 
@@ -6289,11 +6740,16 @@ const contactsPane_utils = external_commonjs_solid_ui_commonjs2_solid_ui_amd_sol
6289
6740
  external_commonjs_solid_ui_commonjs2_solid_ui_amd_solid_ui_root_UI_.aclControl.preventBrowserDropEvents(dom) // protect drag and drop
6290
6741
 
6291
6742
  div.setAttribute('class', 'contactPane')
6743
+ // Make the pane stack vertically (sidebar -> details) when narrow
6744
+ // Set breakpoint to 1000 so it triggers at 980 width too.
6745
+ setupResponsiveStacking(div, 1000)
6292
6746
 
6293
6747
  asyncRender().then(
6294
6748
  () => log('Contacts pane rendered for ' + subject),
6295
6749
  err => complain(div, dom, err.message || '' + err)
6296
- )
6750
+ ).catch(err => {
6751
+ complain(div, dom, err.message || '' + err)
6752
+ })
6297
6753
  return div
6298
6754
 
6299
6755
  // Async part of render. Maybe API will later allow render to be async
@@ -6310,11 +6766,12 @@ const contactsPane_utils = external_commonjs_solid_ui_commonjs2_solid_ui_amd_sol
6310
6766
  t[contactsPane_ns.vcard('Organization').uri] ||
6311
6767
  t[contactsPane_ns.schema('Organization').uri]
6312
6768
  ) {
6313
- renderIndividual(dom, div, subject, dataBrowserContext)
6314
- .then(() => log('(individual rendered)'))
6315
- .catch(() => {
6316
- throw new Error('Failed to render contact.')
6317
- })
6769
+ try {
6770
+ await renderIndividual(dom, div, subject, dataBrowserContext)
6771
+ } catch (err) {
6772
+ error('Error rendering contact. Stack: ' + err)
6773
+ throw new Error('Failed to render contact: ' + (err.message || err))
6774
+ }
6318
6775
  /*
6319
6776
  // Render a Group instance
6320
6777
  }
@@ -7307,6 +7764,12 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* ProfileCard.css */
7307
7764
  min-width: 0;
7308
7765
  }
7309
7766
 
7767
+ /* Ensure prompt inputs stretch to fit their container */
7768
+ .add-friend-button-container input[type="text"] {
7769
+ width: 100%;
7770
+ box-sizing: border-box;
7771
+ }
7772
+
7310
7773
  .qrCodeSection {
7311
7774
  color: var(--color-text-secondary);
7312
7775
  font-size: 1em;
@@ -7328,7 +7791,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* ProfileCard.css */
7328
7791
  padding: 16px;
7329
7792
  background: white;
7330
7793
  }
7331
- `, "",{"version":3,"sources":["webpack://./node_modules/profile-pane/lib/styles/ProfileCard.css"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,oKAAoK;;AAEpK;EACE,wBAAwB;AAC1B;;AAEA;EACE,YAAY;EACZ,aAAa;EACb,kBAAkB;EAClB,iBAAiB;EACjB,gCAAgC;EAChC,gCAAgC;EAChC,sCAAsC;EACtC,gCAAgC;EAChC,sBAAsB;AACxB;;AAEA;EACE,YAAY;EACZ,aAAa;EACb,aAAa;EACb,mBAAmB;EACnB,uBAAuB;EACvB,kBAAkB;EAClB,gCAAgC;EAChC,gCAAgC;EAChC,sCAAsC;EACtC,gCAAgC;EAChC,sBAAsB;EACtB,kCAAkC;AACpC;;AAEA;EACE,8BAA8B;EAC9B,gBAAgB;EAChB,qCAAqC;EACrC,0BAA0B;EAC1B,4BAA4B;EAC5B,SAAS;EACT,0CAA0C;AAC5C;;AAEA;EACE,kCAAkC;EAClC,gCAAgC;EAChC,oCAAoC;EACpC,gCAAgC;EAChC,eAAe;EACf,iBAAiB;EACjB,kBAAkB;AACpB;;AAEA;EACE,kCAAkC;EAClC,cAAc;EACd,gCAAgC;AAClC;;AAEA;EACE,WAAW;EACX,YAAY;EACZ,aAAa;AACf;;AAEA;EACE,WAAW;EACX,YAAY;AACd;;AAEA;EACE,kCAAkC;EAClC,cAAc;EACd,gCAAgC;AAClC;;AAEA;EACE,8BAA8B;EAC9B,gCAAgC;EAChC,oCAAoC;EACpC,eAAe;EACf,iBAAiB;EACjB,kBAAkB;AACpB;;AAEA,sCAAsC;AACtC;EACE,sBAAsB;EACtB,aAAa;EACb,iBAAiB;AACnB","sourcesContent":["/* ProfileCard.css */\n/* Uses utilities: .action-button-focus, .btn-primary, .flex-column-center, .text-truncate, .text-center, .text-wrap-anywhere, .section-centered, .btn-transparent */\n\n.profileCard {\n /* Component container */\n}\n\n.image {\n width: 160px;\n height: 160px;\n border-radius: 50%;\n object-fit: cover;\n margin-bottom: var(--spacing-sm);\n box-shadow: var(--box-shadow-sm);\n border: 3px solid var(--color-primary);\n background: var(--color-card-bg);\n box-sizing: border-box;\n}\n\n.image-alt {\n width: 160px;\n height: 160px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n margin-bottom: var(--spacing-sm);\n box-shadow: var(--box-shadow-sm);\n border: 3px solid var(--color-primary);\n background: var(--color-card-bg);\n box-sizing: border-box;\n color: var(--color-text-secondary);\n}\n\n.name {\n font-size: var(--font-size-xl);\n font-weight: 700;\n line-height: var(--line-height-tight);\n text-decoration: underline;\n text-underline-offset: 0.2em;\n margin: 0;\n letter-spacing: var(--letter-spacing-wide);\n}\n\n.intro {\n color: var(--color-text-secondary);\n font-size: var(--font-size-base);\n line-height: var(--line-height-base);\n margin-bottom: var(--spacing-xs);\n max-width: 40ch;\n margin-left: auto;\n margin-right: auto;\n}\n\n.buttonSection {\n color: var(--color-text-secondary);\n font-size: 1em;\n margin-bottom: var(--spacing-xs);\n}\n\n.buttonSubSection {\n width: 100%;\n min-width: 0;\n display: grid;\n}\n\n.buttonSubSection button {\n width: 100%;\n min-width: 0;\n}\n\n.qrCodeSection {\n color: var(--color-text-secondary);\n font-size: 1em;\n margin-bottom: var(--spacing-xs);\n}\n\n.details {\n color: var(--color-text-muted);\n font-size: var(--font-size-base);\n line-height: var(--line-height-base);\n max-width: 45ch;\n margin-left: auto;\n margin-right: auto;\n}\n\n/* ProfileCard styles as regular CSS */\n.profile-card {\n border: 1px solid #ccc;\n padding: 16px;\n background: white;\n}\n"],"sourceRoot":""}]);
7794
+ `, "",{"version":3,"sources":["webpack://./node_modules/profile-pane/lib/styles/ProfileCard.css"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,oKAAoK;;AAEpK;EACE,wBAAwB;AAC1B;;AAEA;EACE,YAAY;EACZ,aAAa;EACb,kBAAkB;EAClB,iBAAiB;EACjB,gCAAgC;EAChC,gCAAgC;EAChC,sCAAsC;EACtC,gCAAgC;EAChC,sBAAsB;AACxB;;AAEA;EACE,YAAY;EACZ,aAAa;EACb,aAAa;EACb,mBAAmB;EACnB,uBAAuB;EACvB,kBAAkB;EAClB,gCAAgC;EAChC,gCAAgC;EAChC,sCAAsC;EACtC,gCAAgC;EAChC,sBAAsB;EACtB,kCAAkC;AACpC;;AAEA;EACE,8BAA8B;EAC9B,gBAAgB;EAChB,qCAAqC;EACrC,0BAA0B;EAC1B,4BAA4B;EAC5B,SAAS;EACT,0CAA0C;AAC5C;;AAEA;EACE,kCAAkC;EAClC,gCAAgC;EAChC,oCAAoC;EACpC,gCAAgC;EAChC,eAAe;EACf,iBAAiB;EACjB,kBAAkB;AACpB;;AAEA;EACE,kCAAkC;EAClC,cAAc;EACd,gCAAgC;AAClC;;AAEA;EACE,WAAW;EACX,YAAY;EACZ,aAAa;AACf;;AAEA;EACE,WAAW;EACX,YAAY;AACd;;AAEA,wDAAwD;AACxD;EACE,WAAW;EACX,sBAAsB;AACxB;;AAEA;EACE,kCAAkC;EAClC,cAAc;EACd,gCAAgC;AAClC;;AAEA;EACE,8BAA8B;EAC9B,gCAAgC;EAChC,oCAAoC;EACpC,eAAe;EACf,iBAAiB;EACjB,kBAAkB;AACpB;;AAEA,sCAAsC;AACtC;EACE,sBAAsB;EACtB,aAAa;EACb,iBAAiB;AACnB","sourcesContent":["/* ProfileCard.css */\n/* Uses utilities: .action-button-focus, .btn-primary, .flex-column-center, .text-truncate, .text-center, .text-wrap-anywhere, .section-centered, .btn-transparent */\n\n.profileCard {\n /* Component container */\n}\n\n.image {\n width: 160px;\n height: 160px;\n border-radius: 50%;\n object-fit: cover;\n margin-bottom: var(--spacing-sm);\n box-shadow: var(--box-shadow-sm);\n border: 3px solid var(--color-primary);\n background: var(--color-card-bg);\n box-sizing: border-box;\n}\n\n.image-alt {\n width: 160px;\n height: 160px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n margin-bottom: var(--spacing-sm);\n box-shadow: var(--box-shadow-sm);\n border: 3px solid var(--color-primary);\n background: var(--color-card-bg);\n box-sizing: border-box;\n color: var(--color-text-secondary);\n}\n\n.name {\n font-size: var(--font-size-xl);\n font-weight: 700;\n line-height: var(--line-height-tight);\n text-decoration: underline;\n text-underline-offset: 0.2em;\n margin: 0;\n letter-spacing: var(--letter-spacing-wide);\n}\n\n.intro {\n color: var(--color-text-secondary);\n font-size: var(--font-size-base);\n line-height: var(--line-height-base);\n margin-bottom: var(--spacing-xs);\n max-width: 40ch;\n margin-left: auto;\n margin-right: auto;\n}\n\n.buttonSection {\n color: var(--color-text-secondary);\n font-size: 1em;\n margin-bottom: var(--spacing-xs);\n}\n\n.buttonSubSection {\n width: 100%;\n min-width: 0;\n display: grid;\n}\n\n.buttonSubSection button {\n width: 100%;\n min-width: 0;\n}\n\n/* Ensure prompt inputs stretch to fit their container */\n.add-friend-button-container input[type=\"text\"] {\n width: 100%;\n box-sizing: border-box;\n}\n\n.qrCodeSection {\n color: var(--color-text-secondary);\n font-size: 1em;\n margin-bottom: var(--spacing-xs);\n}\n\n.details {\n color: var(--color-text-muted);\n font-size: var(--font-size-base);\n line-height: var(--line-height-base);\n max-width: 45ch;\n margin-left: auto;\n margin-right: auto;\n}\n\n/* ProfileCard styles as regular CSS */\n.profile-card {\n border: 1px solid #ccc;\n padding: 16px;\n background: white;\n}\n"],"sourceRoot":""}]);
7332
7795
  // Exports
7333
7796
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
7334
7797
 
@@ -7358,10 +7821,12 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* ProfileView.css */
7358
7821
  .profile-grid .profileSection {
7359
7822
  width: 100%;
7360
7823
  max-width: 100%;
7824
+ min-width: 0;
7361
7825
  box-sizing: border-box;
7362
7826
  margin-bottom: var(--spacing-md);
7363
7827
  box-sizing: border-box;
7364
7828
  margin-bottom: var(--spacing-md);
7829
+ overflow-wrap: anywhere;
7365
7830
  }
7366
7831
 
7367
7832
  @media (min-width: 900px) {
@@ -7369,7 +7834,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* ProfileView.css */
7369
7834
  margin-bottom: 0;
7370
7835
  }
7371
7836
  }
7372
- `, "",{"version":3,"sources":["webpack://./node_modules/profile-pane/lib/styles/ProfileView.css"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,8CAA8C;;AAE9C,gCAAgC;AAChC;EACE,WAAW;EACX,eAAe;EACf,sBAAsB;EACtB,gCAAgC;EAChC,sBAAsB;EACtB,gCAAgC;AAClC;;AAEA;EACE;IACE,gBAAgB;EAClB;AACF","sourcesContent":["/* ProfileView.css */\n/* Uses utilities: .section-bg, .text-center */\n\n/* Horizontal layout for cards */\n.profile-grid .profileSection {\n width: 100%;\n max-width: 100%;\n box-sizing: border-box;\n margin-bottom: var(--spacing-md);\n box-sizing: border-box;\n margin-bottom: var(--spacing-md);\n}\n\n@media (min-width: 900px) {\n .profile-grid .profileSection {\n margin-bottom: 0;\n }\n}\n"],"sourceRoot":""}]);
7837
+ `, "",{"version":3,"sources":["webpack://./node_modules/profile-pane/lib/styles/ProfileView.css"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,8CAA8C;;AAE9C,gCAAgC;AAChC;EACE,WAAW;EACX,eAAe;EACf,YAAY;EACZ,sBAAsB;EACtB,gCAAgC;EAChC,sBAAsB;EACtB,gCAAgC;EAChC,uBAAuB;AACzB;;AAEA;EACE;IACE,gBAAgB;EAClB;AACF","sourcesContent":["/* ProfileView.css */\n/* Uses utilities: .section-bg, .text-center */\n\n/* Horizontal layout for cards */\n.profile-grid .profileSection {\n width: 100%;\n max-width: 100%;\n min-width: 0;\n box-sizing: border-box;\n margin-bottom: var(--spacing-md);\n box-sizing: border-box;\n margin-bottom: var(--spacing-md);\n overflow-wrap: anywhere;\n}\n\n@media (min-width: 900px) {\n .profile-grid .profileSection {\n margin-bottom: 0;\n }\n}\n"],"sourceRoot":""}]);
7373
7838
  // Exports
7374
7839
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
7375
7840
 
@@ -7552,7 +8017,83 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* StuffCard.css */
7552
8017
 
7553
8018
  /***/ },
7554
8019
 
7555
- /***/ 2024
8020
+ /***/ 9340
8021
+ (module, __webpack_exports__, __webpack_require__) {
8022
+
8023
+ "use strict";
8024
+ /* harmony export */ __webpack_require__.d(__webpack_exports__, {
8025
+ /* harmony export */ A: () => (__WEBPACK_DEFAULT_EXPORT__)
8026
+ /* harmony export */ });
8027
+ /* harmony import */ var _css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1354);
8028
+ /* harmony import */ var _css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
8029
+ /* harmony import */ var _css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6314);
8030
+ /* harmony import */ var _css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
8031
+ // Imports
8032
+
8033
+
8034
+ var ___CSS_LOADER_EXPORT___ = _css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
8035
+ // Module
8036
+ ___CSS_LOADER_EXPORT___.push([module.id, `.profile-grid .add-friend-button-container,
8037
+ .profile-grid .add-community-button-container {
8038
+ display: inline-flex;
8039
+ align-items: center;
8040
+ gap: var(--spacing-xxs);
8041
+ flex-wrap: wrap;
8042
+ justify-content: flex-start;
8043
+ }
8044
+
8045
+ /* Ensure the button container can shrink properly in narrow layouts */
8046
+ .profile-grid .add-community-button-container {
8047
+ min-width: 0;
8048
+ max-width: 100%;
8049
+ }
8050
+
8051
+ /* Allow any direct children to shrink so no element forces overflow */
8052
+ .profile-grid .add-community-button-container > * {
8053
+ min-width: 0;
8054
+ max-width: 100%;
8055
+ }
8056
+
8057
+ .profile-grid table {
8058
+ margin: 0 !important;
8059
+ }
8060
+
8061
+ .profile-grid td {
8062
+ padding: 0;
8063
+ }
8064
+
8065
+ .profile-grid .add-friend-button-container .span,
8066
+ .profile-grid .add-community-button-container .span {
8067
+ display: inline-flex;
8068
+ align-items: center;
8069
+ }
8070
+
8071
+ .profile-grid .add-friend-button-container > div,
8072
+ .profile-grid .add-community-button-container > div {
8073
+ flex-basis: 100%;
8074
+ }
8075
+
8076
+ /* Prevent the add-community input from overflowing its flex container */
8077
+ .profile-grid .add-community-button-container input {
8078
+ min-width: 0;
8079
+ max-width: 96%;
8080
+ flex: 1 1 0;
8081
+ word-break: break-word;
8082
+ }
8083
+
8084
+ .profile-grid .profile-image {
8085
+ width: var( --profile-image-size);
8086
+ height: var( --profile-image-size);
8087
+ margin: var(--spacing-xxxs);
8088
+ border-radius: var(--spacing-lg);
8089
+ }`, "",{"version":3,"sources":["webpack://./node_modules/profile-pane/lib/styles/editProfile.css"],"names":[],"mappings":"AAAA;;EAEE,oBAAoB;EACpB,mBAAmB;EACnB,uBAAuB;EACvB,eAAe;EACf,2BAA2B;AAC7B;;AAEA,sEAAsE;AACtE;EACE,YAAY;EACZ,eAAe;AACjB;;AAEA,sEAAsE;AACtE;EACE,YAAY;EACZ,eAAe;AACjB;;AAEA;EACE,oBAAoB;AACtB;;AAEA;EACE,UAAU;AACZ;;AAEA;;EAEE,oBAAoB;EACpB,mBAAmB;AACrB;;AAEA;;EAEE,gBAAgB;AAClB;;AAEA,wEAAwE;AACxE;EACE,YAAY;EACZ,cAAc;EACd,WAAW;EACX,sBAAsB;AACxB;;AAEA;EACE,iCAAiC;EACjC,kCAAkC;EAClC,2BAA2B;EAC3B,gCAAgC;AAClC","sourcesContent":[".profile-grid .add-friend-button-container,\n.profile-grid .add-community-button-container {\n display: inline-flex;\n align-items: center;\n gap: var(--spacing-xxs);\n flex-wrap: wrap;\n justify-content: flex-start;\n}\n\n/* Ensure the button container can shrink properly in narrow layouts */\n.profile-grid .add-community-button-container {\n min-width: 0;\n max-width: 100%;\n}\n\n/* Allow any direct children to shrink so no element forces overflow */\n.profile-grid .add-community-button-container > * {\n min-width: 0;\n max-width: 100%;\n}\n\n.profile-grid table {\n margin: 0 !important;\n}\n\n.profile-grid td {\n padding: 0;\n}\n\n.profile-grid .add-friend-button-container .span,\n.profile-grid .add-community-button-container .span {\n display: inline-flex;\n align-items: center;\n}\n\n.profile-grid .add-friend-button-container > div,\n.profile-grid .add-community-button-container > div {\n flex-basis: 100%;\n}\n\n/* Prevent the add-community input from overflowing its flex container */\n.profile-grid .add-community-button-container input {\n min-width: 0;\n max-width: 96%;\n flex: 1 1 0;\n word-break: break-word;\n}\n\n.profile-grid .profile-image {\n width: var( --profile-image-size);\n height: var( --profile-image-size);\n margin: var(--spacing-xxxs);\n border-radius: var(--spacing-lg);\n}"],"sourceRoot":""}]);
8090
+ // Exports
8091
+ /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
8092
+
8093
+
8094
+ /***/ },
8095
+
8096
+ /***/ 7347
7556
8097
  (module, __webpack_exports__, __webpack_require__) {
7557
8098
 
7558
8099
  "use strict";
@@ -7568,23 +8109,66 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* StuffCard.css */
7568
8109
 
7569
8110
  var ___CSS_LOADER_EXPORT___ = _css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
7570
8111
  // Module
7571
- ___CSS_LOADER_EXPORT___.push([module.id, `/* this overrides a style coming from contacts-pane*/
8112
+ ___CSS_LOADER_EXPORT___.push([module.id, `/* Delete pop up*/
8113
+ /* Make the Solid-UI delete confirmation popup appear near the last click position.
8114
+ Keep the built-in Solid-UI styling (orange border, white background) so it looks like the original.
8115
+ */
8116
+ .profile-grid div[style*="position: relative"] > div[style*="display: grid"] {
8117
+ /* only override positioning; keep styling (border/background/etc) from solid-ui */
8118
+ position: absolute !important;
8119
+ z-index: 9999 !important;
8120
+ top: 0 !important;
8121
+ right: 0 !important;
8122
+ left: auto !important;
8123
+ display: grid !important;
8124
+ pointer-events: auto !important;
8125
+ opacity: 1 !important;
8126
+ visibility: visible !important;
8127
+ padding: 0.7em !important;
8128
+ min-width: 280px !important;
8129
+ max-width: 90vw !important;
8130
+ background: var(--color-background) !important;
8131
+ border: 0.1em solid var(--color-primary) !important;
8132
+ border-radius: var(--border-radius-base) !important;
8133
+ box-shadow: 0 0.5em 0.9em rgba(0, 0, 0, 0.2) !important;
8134
+ grid-template-columns: auto auto !important;
8135
+ gap: 0.3em !important;
8136
+ }
8137
+
8138
+ /* Ensure SVG icons and their buttons inside the Solid-UI delete popup have transparent backgrounds */
8139
+ .profile-grid div[style*="position: relative"] > div[style*="display: grid"] img[src\$=".svg"],
8140
+ .profile-grid div[style*="position: relative"] > div[style*="display: grid"] button {
8141
+ background: transparent !important;
8142
+ }
8143
+
7572
8144
  .profile-form .individualPane {
7573
8145
  box-shadow: none !important;
7574
8146
  }
7575
8147
 
7576
- /* Vertically center autocomplete input in .formFieldValue */
7577
- .profile-form .formFieldValue > div[style*="flex-direction: row"] {
7578
- align-items: center;
7579
- display: flex;
8148
+ .profile-form p {
8149
+ padding: 0 !important;
7580
8150
  }
7581
8151
 
7582
- .profile-form .formFieldValue input[data-testid="autocomplete-input"] {
7583
- vertical-align: middle;
8152
+ .profile-form .mb-md {
8153
+ margin-bottom: 0 !important;
8154
+ }
8155
+
8156
+ .profile-form h2 {
8157
+ margin-bottom: 1em !important;
7584
8158
  }
8159
+
8160
+ .profile-form h3 {
8161
+ color: var(--color-primary) !important;
8162
+ padding: 0 !important;
8163
+ font-size: 1em !important;
8164
+ font-weight: 600 !important;
8165
+ }
8166
+
8167
+ /* Shared form layout rules are imported from rdfFormsCommon.css */
7585
8168
  /* Solid-UI form sizing fixes scoped to Edit CV section */
7586
8169
  .profile-form .hoverControl:not(:has(> img:first-child)) {
7587
8170
  border: 0.1em solid rgb(136, 136, 136) !important;
8171
+ flex-direction: column !important;
7588
8172
  }
7589
8173
 
7590
8174
  .profile-form .hoverControl:has(> img:first-child) {
@@ -7601,40 +8185,107 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* this overrides a style coming from
7601
8185
  justify-content: center;
7602
8186
  }
7603
8187
 
7604
- .profile-form .hoverControlHide {
8188
+ /* Make sure the delete icon floats in the top-right corner of the full hoverControl wrapper */
8189
+ .profile-form .hoverControl,
8190
+ .profile-grid .hoverControl {
8191
+ position: relative !important;
8192
+ }
8193
+
8194
+ .hoverControl > img.hoverControlHide,
8195
+ .hoverControl > [data-testid="deleteButtonWithCheck"] {
8196
+ position: absolute !important;
8197
+ top: 0.2em !important;
8198
+ right: 0.2em !important;
7605
8199
  width: 1.5em !important;
7606
8200
  height: 1.5em !important;
7607
- display: block;
7608
- margin-top: 0 !important;
7609
- margin-left: 0 !important;
7610
- margin-right: 0 !important;
7611
- margin-bottom: 0.3em !important;
8201
+ display: none !important;
8202
+ align-items: center;
8203
+ justify-content: center;
8204
+ margin: 0 !important;
8205
+ float: none !important;
8206
+ transform: none !important;
7612
8207
  }
7613
8208
 
7614
- .profile-form .hoverControl:has(> img:first-child) > span {
7615
- display: inline-flex;
7616
- align-items: center;
7617
- margin-left: 0.3em;
8209
+ /* When icon is 2nd or 3rd child (i.e. sibling elements exist), align it vertically to the previous item */
8210
+ .hoverControl > img.hoverControlHide:nth-child(1),
8211
+ .hoverControl > img.hoverControlHide:nth-child(2),
8212
+ .hoverControl > [data-testid="deleteButtonWithCheck"]:nth-child(1),
8213
+ .hoverControl > [data-testid="deleteButtonWithCheck"]:nth-child(2) {
8214
+ top: 50% !important;
8215
+ transform: translateY(-50%) !important;
8216
+ }
8217
+
8218
+ /* Show the delete icon only when the container is hovered */
8219
+ .profile-grid .hoverControl:hover > img.hoverControlHide,
8220
+ .profile-grid .hoverControl:hover > [data-testid="deleteButtonWithCheck"] {
8221
+ display: inline-flex !important;
7618
8222
  }
7619
8223
 
7620
- .profile-form div[style*="padding: 0.5em"]:has(> img) {
8224
+ /* Also show the delete icon when the entire row is hovered */
8225
+ .profile-grid .attachmentTable tr:hover .hoverControl > img.hoverControlHide,
8226
+ .profile-grid .attachmentTable tr:hover .hoverControl > [data-testid="deleteButtonWithCheck"] {
8227
+ display: inline-flex !important;
8228
+ }
8229
+
8230
+ /* Make the hover-control cell easier to hit */
8231
+ .profile-grid .hoverControl {
8232
+ padding: 0.75em !important;
8233
+ min-width: 2.5em !important;
8234
+ min-height: 2.5em !important;
8235
+ }
8236
+
8237
+ /* When the hoverControl only contains the hidden delete icon, keep it out of layout so it doesn't create empty space */
8238
+ .profile-form .formFieldValue .hoverControl:has(> img.hoverControlHide) {
8239
+ min-width: 0 !important;
8240
+ min-height: 0 !important;
8241
+ width: 0 !important;
8242
+ height: 0 !important;
8243
+ padding: 0 !important;
8244
+ margin: 0 !important;
8245
+ overflow: visible !important;
8246
+ }
8247
+
8248
+ /* Hide delete icon only in autocomplete fields */
8249
+ .profile-grid .formFieldValue:has(input[data-testid="autocomplete-input"]) [data-testid="delete-button"] {
8250
+ display: none !important;
8251
+ }
8252
+
8253
+ /* Keep autocomplete cancel button hidden when the user is not interacting.
8254
+ This avoids the cancel button remaining visible when focus moves away. */
8255
+ .profile-grid .formFieldValue:not(:focus-within) [data-testid="cancel-button"] {
8256
+ display: none !important;
8257
+ }
8258
+
8259
+ .profile-grid .hoverControl:has(> img:first-child) > span {
7621
8260
  display: inline-flex;
7622
8261
  align-items: center;
8262
+ margin-left: 0.3em;
7623
8263
  }
7624
8264
 
7625
- .profile-form div[style*="padding: 0.5em"]:has(> img) > span {
8265
+ .profile-grid div[style*="padding: 0.5em"]:has(> img) > span {
7626
8266
  margin-left: 0.3em;
8267
+ vertical-align: super !important;
7627
8268
  }
7628
8269
 
7629
- .profile-form .hoverControl:has(> img:first-child):hover {
8270
+ .profile-grid .hoverControl:has(> img:first-child):hover {
7630
8271
  background-color: transparent !important;
7631
8272
  }
7632
8273
 
7633
- .profile-form button:has(> img[src\$=".svg"]) {
7634
- background-color: transparent !important;
8274
+ .profile-grid button:has(> img[src\$=".svg"]),
8275
+ .profile-grid .formFieldValue input[type ="color"] {
8276
+ background-color: var(--color-section-bg) !important;
7635
8277
  border: none !important;
7636
8278
  margin: 0 !important;
7637
8279
  border-radius: 0 !important;
8280
+ box-shadow: none !important;
8281
+ padding: 0.5em !important;
8282
+ transition: background-color 0.2s ease, box-shadow 0.2s ease;
8283
+ padding: 0 !important;
8284
+ }
8285
+
8286
+ /* Specific icon button should have no extra padding */
8287
+ .profile-grid button:has(> img[src="https://solidos.github.io/solid-ui/src/icons/noun_1369241.svg"]) {
8288
+ padding: 0 !important;
7638
8289
  }
7639
8290
 
7640
8291
  .profile-form button {
@@ -7642,10 +8293,16 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* this overrides a style coming from
7642
8293
  min-width: var(--min-touch-target);
7643
8294
  }
7644
8295
 
8296
+ .profile-form input:not([type="color"]) {
8297
+ width: 99%;
8298
+ margin-left: 0 !important;
8299
+ margin-right: 0 !important;
8300
+ }
8301
+
7645
8302
  .profile-form input:not([type="color"]),
7646
8303
  .profile-form textarea,
7647
8304
  .profile-form select {
7648
- max-width: 100%;
8305
+ max-width: 96%;
7649
8306
  min-width: 0;
7650
8307
  box-sizing: border-box ;
7651
8308
  font: inherit;
@@ -7680,32 +8337,6 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* this overrides a style coming from
7680
8337
  width: 100%;
7681
8338
  }
7682
8339
 
7683
- .profile-form .formFieldValue {
7684
- min-width: 0;
7685
- margin-bottom: var(--spacing-sm);
7686
- }
7687
-
7688
- .profile-form .formFieldValue table {
7689
- margin: 0 !important;
7690
- padding: 0 !important;
7691
- }
7692
-
7693
- .profile-form .formFieldValue td {
7694
- padding: 0 !important;
7695
- vertical-align: middle;
7696
- }
7697
-
7698
- .profile-form .formFieldValue table[data-testid="autocomplete-table"] {
7699
- height: 100%;
7700
- }
7701
-
7702
- .profile-form .formFieldValue input:not([type="color"]),
7703
- .profile-form .formFieldValue textarea,
7704
- .profile-form .formFieldValue select {
7705
- width: 100%;
7706
- max-width: 100%;
7707
- }
7708
-
7709
8340
  .profile-form select#formSelect {
7710
8341
  width: 100%;
7711
8342
  max-width: 97%;
@@ -7714,11 +8345,6 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* this overrides a style coming from
7714
8345
  margin-right: 0 !important;
7715
8346
  }
7716
8347
 
7717
- .profile-form .formFieldValue span select {
7718
- margin-left: 0 !important;
7719
- margin-right: 0 !important;
7720
- }
7721
-
7722
8348
  /* Remove border/padding from the first wrapper div (and its first child wrapper). */
7723
8349
  .profile-form > div:first-of-type,
7724
8350
  .profile-form > div:first-of-type > div:first-of-type {
@@ -7741,7 +8367,6 @@ section[aria-labelledby="edit-profile-contact-heading"] .profile-form > div:firs
7741
8367
  /* Align schema.org, solid terms, FOAF, vCard, and org field labels with their input values. */
7742
8368
  .profile-form :not(.choiceBox):has(> .formFieldName):has(> .formFieldValue) {
7743
8369
  display: flex;
7744
- margin-bottom: var(--spacing-sm);
7745
8370
  }
7746
8371
 
7747
8372
  /* for the Resume inside corporation choice */
@@ -7773,10 +8398,6 @@ section[aria-labelledby="edit-profile-contact-heading"] .profile-form > div:firs
7773
8398
  margin-left: 0 !important;
7774
8399
  }
7775
8400
 
7776
- .profile-form .formFieldValue > span > select {
7777
- margin-left: 0 !important;
7778
- }
7779
-
7780
8401
  /* for the social media */
7781
8402
  /* Add space between classifierBox label and select box */
7782
8403
  section[data-testid="edit-social-section"] .classifierBox-label {
@@ -7823,7 +8444,7 @@ section[data-testid="edit-social-section"] .classifierBox-selectBox select {
7823
8444
  border-width: .05em !important;
7824
8445
  border-color: #88c !important;
7825
8446
  border-radius: 0.2em !important;
7826
- width: 100%;
8447
+ width: 99%;
7827
8448
  box-sizing: border-box;
7828
8449
  margin-top: var(--spacing-xs);
7829
8450
  margin-left: 0 !important;
@@ -7845,33 +8466,11 @@ section[data-testid="edit-social-section"] .classifierBox-selectBox select {
7845
8466
  padding-top: var(--spacing-sm);
7846
8467
  }
7847
8468
 
7848
- /* Keep autocomplete/table-based fields (e.g. Occupation) aligned to label text baseline. */
7849
- .profile-form :not(.choiceBox):has(> .formFieldValue input[data-testid="autocomplete-input"]) {
7850
- align-items: flex-start;
7851
- }
7852
8469
 
7853
8470
  .profile-form :not(.choiceBox):has(> .formFieldValue input[data-testid="autocomplete-input"]) > .formFieldName {
7854
8471
  padding-top: 0.55em !important;
7855
8472
  }
7856
8473
 
7857
- .profile-form .formFieldValue:has(input[data-testid="autocomplete-input"]) {
7858
- align-self: flex-start;
7859
- }
7860
-
7861
- .profile-form .formFieldValue table[data-testid="autocomplete-table"],
7862
- .profile-form .formFieldValue input[data-testid="autocomplete-input"] {
7863
- margin: 0 !important;
7864
- }
7865
-
7866
- .profile-form .formFieldValue table[data-testid="autocomplete-table"] {
7867
- vertical-align: baseline;
7868
- }
7869
-
7870
- .profile-form input:not([type="color"]) {
7871
- width: 100%;
7872
- margin-left: 0 !important;
7873
- margin-right: 0 !important;
7874
- }
7875
8474
 
7876
8475
  .profile-form input:disabled,
7877
8476
  .profile-form textarea:disabled,
@@ -7889,7 +8488,55 @@ section[data-testid="edit-social-section"] .classifierBox-selectBox select {
7889
8488
  .webidControl table td div.contactPane.namedPane {
7890
8489
  border: none !important;
7891
8490
  }
7892
- `, "",{"version":3,"sources":["webpack://./node_modules/profile-pane/lib/styles/rdfFormsEnforced.css"],"names":[],"mappings":"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","sourcesContent":["/* this overrides a style coming from contacts-pane*/\n.profile-form .individualPane {\n box-shadow: none !important;\n}\n\n/* Vertically center autocomplete input in .formFieldValue */\n.profile-form .formFieldValue > div[style*=\"flex-direction: row\"] {\n align-items: center;\n display: flex;\n}\n\n.profile-form .formFieldValue input[data-testid=\"autocomplete-input\"] {\n vertical-align: middle;\n}\n/* Solid-UI form sizing fixes scoped to Edit CV section */\n.profile-form .hoverControl:not(:has(> img:first-child)) {\n border: 0.1em solid rgb(136, 136, 136) !important;\n}\n\n.profile-form .hoverControl:has(> img:first-child) {\n background-color: transparent !important;\n border: none !important;\n margin: 0 !important;\n border-radius: 0 !important;\n padding: 0.7em !important;\n min-height: var(--min-touch-target);\n min-width: var(--min-touch-target);\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.profile-form .hoverControlHide {\n width: 1.5em !important;\n height: 1.5em !important;\n display: block;\n margin-top: 0 !important;\n margin-left: 0 !important;\n margin-right: 0 !important;\n margin-bottom: 0.3em !important;\n}\n\n.profile-form .hoverControl:has(> img:first-child) > span {\n display: inline-flex;\n align-items: center;\n margin-left: 0.3em;\n}\n\n.profile-form div[style*=\"padding: 0.5em\"]:has(> img) {\n display: inline-flex;\n align-items: center;\n}\n\n.profile-form div[style*=\"padding: 0.5em\"]:has(> img) > span {\n margin-left: 0.3em;\n}\n\n.profile-form .hoverControl:has(> img:first-child):hover {\n background-color: transparent !important;\n}\n\n.profile-form button:has(> img[src$=\".svg\"]) {\n background-color: transparent !important;\n border: none !important;\n margin: 0 !important;\n border-radius: 0 !important;\n}\n\n.profile-form button {\n min-height: var(--min-touch-target);\n min-width: var(--min-touch-target);\n}\n\n.profile-form input:not([type=\"color\"]),\n.profile-form textarea,\n.profile-form select {\n max-width: 100%;\n min-width: 0;\n box-sizing: border-box ;\n font: inherit;\n color: var(--color-text);\n background-color: var(--color-card-bg) !important;\n border: 1px solid var(--color-border-pale);\n}\n\n.profile-form textarea {\n border-color: var(--color-border-pale) !important;\n}\n\n.profile-form input[type=\"date\"],\n.profile-form input[type=\"month\"],\n.profile-form input[type=\"week\"],\n.profile-form input[type=\"time\"],\n.profile-form input[type=\"datetime-local\"] {\n min-height: var(--min-touch-target);\n}\n\n.profile-form .hoverControl:has(> img:first-child):focus-visible,\n.profile-form button:focus-visible,\n.profile-form input:not([type=\"color\"]):focus-visible,\n.profile-form textarea:focus-visible,\n.profile-form select:focus-visible {\n outline: var(--focus-ring-width) solid var(--color-primary) !important;\n outline-offset: 2px;\n box-shadow: 0 0 0 1px var(--color-background);\n}\n\n.profile-form input[type=\"url\"] {\n width: 100%;\n}\n\n.profile-form .formFieldValue {\n min-width: 0;\n margin-bottom: var(--spacing-sm);\n}\n\n.profile-form .formFieldValue table {\n margin: 0 !important;\n padding: 0 !important;\n}\n\n.profile-form .formFieldValue td {\n padding: 0 !important;\n vertical-align: middle;\n}\n\n.profile-form .formFieldValue table[data-testid=\"autocomplete-table\"] {\n height: 100%;\n}\n\n.profile-form .formFieldValue input:not([type=\"color\"]),\n.profile-form .formFieldValue textarea,\n.profile-form .formFieldValue select {\n width: 100%;\n max-width: 100%;\n}\n\n.profile-form select#formSelect {\n width: 100%;\n max-width: 97%;\n box-sizing: border-box;\n margin-left: 0 !important;\n margin-right: 0 !important;\n}\n\n.profile-form .formFieldValue span select {\n margin-left: 0 !important;\n margin-right: 0 !important;\n}\n\n/* Remove border/padding from the first wrapper div (and its first child wrapper). */\n.profile-form > div:first-of-type,\n.profile-form > div:first-of-type > div:first-of-type {\n border: none !important;\n padding: 0 !important;\n}\n\n/* Remove border/padding from the inner div of the first wrapper in the contact section. */\nsection[aria-labelledby=\"edit-profile-contact-heading\"] .profile-form > div:first-of-type > div:first-of-type {\n border: none !important;\n padding: 0 !important;\n}\n\n/* In contactPane, remove border/padding from all direct child divs. */\n.contactPane > div {\n border: none !important;\n padding: 0 !important;\n}\n\n/* Align schema.org, solid terms, FOAF, vCard, and org field labels with their input values. */\n.profile-form :not(.choiceBox):has(> .formFieldName):has(> .formFieldValue) {\n display: flex;\n margin-bottom: var(--spacing-sm);\n}\n\n/* for the Resume inside corporation choice */\n/* Add space between classifierBox label and select box */\n.profile-form .choiceBox .classifierBox-label {\n /* Optional: ensure label doesn't have extra margin */\n margin-right: 0;\n padding-left: 0.3em;\n}\n.profile-form .choiceBox .choiceBox-selectBox select {\n margin-left: 2.1em !important;\n}\n\n/* for the Resume orga details */\n/* Add space between classifierBox label and select box */\n.profile-form .classifierBox .classifierBox-label {\n /* Match .formFieldName for alignment */\n margin-right: 0;\n padding-left: 0.3em;\n width: 8em;\n padding: 0.3em;\n vertical-align: middle;\n}\n.profile-form .classifierBox .classifierBox-selectBox {\n margin-left: 0 !important;\n}\n\n.profile-form .classifierBox .classifierBox-selectBox select {\n margin-left: 0 !important;\n}\n\n.profile-form .formFieldValue > span > select {\n margin-left: 0 !important;\n}\n\n/* for the social media */\n/* Add space between classifierBox label and select box */\nsection[data-testid=\"edit-social-section\"] .classifierBox-label {\n /* Optional: ensure label doesn't have extra margin */\n margin-right: 0;\n padding-left: 0.3em;\n}\nsection[data-testid=\"edit-social-section\"] .classifierBox-selectBox select {\n margin-left: 0.7em !important;\n}\n\n.profile-form :not(.choiceBox):has(> .formFieldName):has(> .formFieldValue) > .formFieldValue {\n margin-bottom: 0;\n}\n\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://schema.org/\"]),\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/solid/terms#\"]),\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://xmlns.com/foaf/0.1/\"]),\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/2006/vcard/ns\"]),\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/org#\"]) {\n display: inline-flex;\n align-items: center;\n vertical-align: middle;\n}\n\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://schema.org/\"]) + .formFieldValue,\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/solid/terms#\"]) + .formFieldValue,\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://xmlns.com/foaf/0.1/\"]) + .formFieldValue,\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/2006/vcard/ns\"]) + .formFieldValue,\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/org#\"]) + .formFieldValue {\n display: inline-flex;\n align-items: center;\n vertical-align: middle;\n flex: 1;\n min-width: 0;\n}\n\n.profile-form textarea,\n.profile-form .formFieldValue textarea {\n appearance: none;\n -webkit-appearance: none;\n border: .05em solid #88c !important;\n border-style: solid !important;\n border-width: .05em !important;\n border-color: #88c !important;\n border-radius: 0.2em !important;\n width: 100%;\n box-sizing: border-box;\n margin-top: var(--spacing-xs);\n margin-left: 0 !important;\n margin-right: 0 !important;\n}\n\n/* Add horizontal gap between label and textarea for all label+textarea pairs. */\n.profile-form div:has(> a) + div:has(textarea) {\n margin-left: var(--spacing-sm);\n}\n\n/* Center textarea label vertically in flex rows. */\n.profile-form div[style*=\"display: flex\"][style*=\"flex-direction: row\"]:has(textarea) {\n align-items: flex-start;\n}\n\n.profile-form div[style*=\"display: flex\"][style*=\"flex-direction: row\"]:has(textarea) > div:has(> a) {\n padding-left: var(--spacing-xs);\n padding-top: var(--spacing-sm);\n}\n\n/* Keep autocomplete/table-based fields (e.g. Occupation) aligned to label text baseline. */\n.profile-form :not(.choiceBox):has(> .formFieldValue input[data-testid=\"autocomplete-input\"]) {\n align-items: flex-start;\n}\n\n.profile-form :not(.choiceBox):has(> .formFieldValue input[data-testid=\"autocomplete-input\"]) > .formFieldName {\n padding-top: 0.55em !important;\n}\n\n.profile-form .formFieldValue:has(input[data-testid=\"autocomplete-input\"]) {\n align-self: flex-start;\n}\n\n.profile-form .formFieldValue table[data-testid=\"autocomplete-table\"],\n.profile-form .formFieldValue input[data-testid=\"autocomplete-input\"] {\n margin: 0 !important;\n}\n\n.profile-form .formFieldValue table[data-testid=\"autocomplete-table\"] {\n vertical-align: baseline;\n}\n\n.profile-form input:not([type=\"color\"]) {\n width: 100%;\n margin-left: 0 !important;\n margin-right: 0 !important;\n}\n\n.profile-form input:disabled,\n.profile-form textarea:disabled,\n.profile-form select:disabled,\n.profile-form input[readonly],\n.profile-form textarea[readonly],\n.profile-form input:read-only,\n.profile-form textarea:read-only {\n background-color: var(--color-background) !important;\n cursor: not-allowed;\n opacity: 0.75;\n border: 0.05em solid white !important;\n}\n\n.webidControl table td div.contactPane.namedPane {\n border: none !important;\n}\n"],"sourceRoot":""}]);
8491
+
8492
+ /* Hide the edit icon used by solid-ui (noun_253504.svg and noun_1180158.svg) when it appears as an <img> */
8493
+ img[src*="noun_253504.svg"],
8494
+ img[src*="noun_1180158.svg"] {
8495
+ display: none !important;
8496
+ width: 0 !important;
8497
+ height: 0 !important;
8498
+ margin: 0 !important;
8499
+ padding: 0 !important;
8500
+ }
8501
+
8502
+ /* Ensure the parent button for that icon doesn't add padding/margin or affect layout */
8503
+ button:has(> img[src*="noun_253504.svg"]),
8504
+ button:has(> img[src*="noun_1180158.svg"]) {
8505
+ display: none !important;
8506
+ padding: 0 !important;
8507
+ margin: 0 !important;
8508
+ border: none !important;
8509
+ background: none !important;
8510
+ width: 0 !important;
8511
+ height: 0 !important;
8512
+ overflow: hidden !important;
8513
+ }
8514
+
8515
+ /* Exceptions: allow these icons (and their buttons) when they're part of the add-friend or add-community flows. */
8516
+ .profile-grid .profileSection .add-friend-button-container img[src="https://solidos.github.io/solid-ui/src/icons/noun_253504.svg"],
8517
+ .profile-grid .profileSection .add-community-button-container img[src="https://solidos.github.io/solid-ui/src/icons/noun_253504.svg"],
8518
+ .profile-grid .profileSection .add-friend-button-container button:has(> img[src="https://solidos.github.io/solid-ui/src/icons/noun_253504.svg"]),
8519
+ .profile-grid .profileSection .add-community-button-container button:has(> img[src="https://solidos.github.io/solid-ui/src/icons/noun_253504.svg"]) {
8520
+ display: inline-flex !important;
8521
+ width: auto !important;
8522
+ height: auto !important;
8523
+ overflow: visible !important;
8524
+ }
8525
+
8526
+
8527
+ /* Exception: allow “Continue” buttons inside add-friend and add-community button containers. */
8528
+ .profile-grid .profileSection .add-friend-button-container button:has(> img[title="Continue"]),
8529
+ .profile-grid .profileSection .add-community-button-container button:has(> img[title="Continue"]),
8530
+ .profile-grid .profileSection .add-friend-button-container button:has(> img[src="https://solidos.github.io/solid-ui/src/icons/noun_1180158.svg"]),
8531
+ .profile-grid .profileSection .add-community-button-container button:has(> img[src="https://solidos.github.io/solid-ui/src/icons/noun_1180158.svg"]),
8532
+ .profile-grid .profileSection .add-friend-button-container img[src="https://solidos.github.io/solid-ui/src/icons/noun_1180158.svg"],
8533
+ .profile-grid .profileSection .add-community-button-container img[src="https://solidos.github.io/solid-ui/src/icons/noun_1180158.svg"] {
8534
+ display: inline-flex !important;
8535
+ width: 2em !important;
8536
+ height: 2em !important;
8537
+ overflow: visible !important;
8538
+ }
8539
+ `, "",{"version":3,"sources":["webpack://./node_modules/profile-pane/lib/styles/profileRDFFormsEnforced.css"],"names":[],"mappings":"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","sourcesContent":["/* Delete pop up*/\n/* Make the Solid-UI delete confirmation popup appear near the last click position.\n Keep the built-in Solid-UI styling (orange border, white background) so it looks like the original.\n*/\n.profile-grid div[style*=\"position: relative\"] > div[style*=\"display: grid\"] {\n/* only override positioning; keep styling (border/background/etc) from solid-ui */\n position: absolute !important;\n z-index: 9999 !important;\n top: 0 !important;\n right: 0 !important;\n left: auto !important;\n display: grid !important;\n pointer-events: auto !important;\n opacity: 1 !important;\n visibility: visible !important;\n padding: 0.7em !important;\n min-width: 280px !important;\n max-width: 90vw !important;\n background: var(--color-background) !important;\n border: 0.1em solid var(--color-primary) !important;\n border-radius: var(--border-radius-base) !important;\n box-shadow: 0 0.5em 0.9em rgba(0, 0, 0, 0.2) !important;\n grid-template-columns: auto auto !important;\n gap: 0.3em !important;\n}\n\n/* Ensure SVG icons and their buttons inside the Solid-UI delete popup have transparent backgrounds */\n.profile-grid div[style*=\"position: relative\"] > div[style*=\"display: grid\"] img[src$=\".svg\"],\n.profile-grid div[style*=\"position: relative\"] > div[style*=\"display: grid\"] button {\n background: transparent !important;\n}\n\n.profile-form .individualPane {\n box-shadow: none !important;\n}\n\n.profile-form p {\n padding: 0 !important;\n}\n\n.profile-form .mb-md {\n margin-bottom: 0 !important;\n}\n\n.profile-form h2 {\n margin-bottom: 1em !important;\n}\n\n.profile-form h3 {\n color: var(--color-primary) !important;\n padding: 0 !important;\n font-size: 1em !important;\n font-weight: 600 !important;\n}\n\n/* Shared form layout rules are imported from rdfFormsCommon.css */\n/* Solid-UI form sizing fixes scoped to Edit CV section */\n.profile-form .hoverControl:not(:has(> img:first-child)) {\n border: 0.1em solid rgb(136, 136, 136) !important;\n flex-direction: column !important;\n}\n\n.profile-form .hoverControl:has(> img:first-child) {\n background-color: transparent !important;\n border: none !important;\n margin: 0 !important;\n border-radius: 0 !important;\n padding: 0.7em !important;\n min-height: var(--min-touch-target);\n min-width: var(--min-touch-target);\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n/* Make sure the delete icon floats in the top-right corner of the full hoverControl wrapper */\n.profile-form .hoverControl,\n.profile-grid .hoverControl {\n position: relative !important;\n}\n\n.hoverControl > img.hoverControlHide,\n.hoverControl > [data-testid=\"deleteButtonWithCheck\"] {\n position: absolute !important;\n top: 0.2em !important;\n right: 0.2em !important;\n width: 1.5em !important;\n height: 1.5em !important;\n display: none !important;\n align-items: center;\n justify-content: center;\n margin: 0 !important;\n float: none !important;\n transform: none !important;\n}\n\n/* When icon is 2nd or 3rd child (i.e. sibling elements exist), align it vertically to the previous item */\n.hoverControl > img.hoverControlHide:nth-child(1),\n.hoverControl > img.hoverControlHide:nth-child(2),\n.hoverControl > [data-testid=\"deleteButtonWithCheck\"]:nth-child(1),\n.hoverControl > [data-testid=\"deleteButtonWithCheck\"]:nth-child(2) {\n top: 50% !important;\n transform: translateY(-50%) !important;\n}\n\n/* Show the delete icon only when the container is hovered */\n.profile-grid .hoverControl:hover > img.hoverControlHide,\n.profile-grid .hoverControl:hover > [data-testid=\"deleteButtonWithCheck\"] {\n display: inline-flex !important;\n}\n\n/* Also show the delete icon when the entire row is hovered */\n.profile-grid .attachmentTable tr:hover .hoverControl > img.hoverControlHide,\n.profile-grid .attachmentTable tr:hover .hoverControl > [data-testid=\"deleteButtonWithCheck\"] {\n display: inline-flex !important;\n}\n\n/* Make the hover-control cell easier to hit */\n.profile-grid .hoverControl {\n padding: 0.75em !important;\n min-width: 2.5em !important;\n min-height: 2.5em !important;\n}\n\n/* When the hoverControl only contains the hidden delete icon, keep it out of layout so it doesn't create empty space */\n.profile-form .formFieldValue .hoverControl:has(> img.hoverControlHide) {\n min-width: 0 !important;\n min-height: 0 !important;\n width: 0 !important;\n height: 0 !important;\n padding: 0 !important;\n margin: 0 !important;\n overflow: visible !important;\n}\n\n/* Hide delete icon only in autocomplete fields */\n.profile-grid .formFieldValue:has(input[data-testid=\"autocomplete-input\"]) [data-testid=\"delete-button\"] {\n display: none !important;\n}\n\n/* Keep autocomplete cancel button hidden when the user is not interacting.\n This avoids the cancel button remaining visible when focus moves away. */\n.profile-grid .formFieldValue:not(:focus-within) [data-testid=\"cancel-button\"] {\n display: none !important;\n}\n\n.profile-grid .hoverControl:has(> img:first-child) > span {\n display: inline-flex;\n align-items: center;\n margin-left: 0.3em;\n}\n\n.profile-grid div[style*=\"padding: 0.5em\"]:has(> img) > span {\n margin-left: 0.3em;\n vertical-align: super !important;\n}\n\n.profile-grid .hoverControl:has(> img:first-child):hover {\n background-color: transparent !important;\n}\n\n.profile-grid button:has(> img[src$=\".svg\"]),\n.profile-grid .formFieldValue input[type =\"color\"] {\n background-color: var(--color-section-bg) !important;\n border: none !important;\n margin: 0 !important;\n border-radius: 0 !important;\n box-shadow: none !important;\n padding: 0.5em !important;\n transition: background-color 0.2s ease, box-shadow 0.2s ease;\n padding: 0 !important;\n}\n\n/* Specific icon button should have no extra padding */\n.profile-grid button:has(> img[src=\"https://solidos.github.io/solid-ui/src/icons/noun_1369241.svg\"]) {\n padding: 0 !important;\n}\n\n.profile-form button {\n min-height: var(--min-touch-target);\n min-width: var(--min-touch-target);\n}\n\n.profile-form input:not([type=\"color\"]) {\n width: 99%;\n margin-left: 0 !important;\n margin-right: 0 !important;\n}\n\n.profile-form input:not([type=\"color\"]),\n.profile-form textarea,\n.profile-form select {\n max-width: 96%;\n min-width: 0;\n box-sizing: border-box ;\n font: inherit;\n color: var(--color-text);\n background-color: var(--color-card-bg) !important;\n border: 1px solid var(--color-border-pale);\n}\n\n.profile-form textarea {\n border-color: var(--color-border-pale) !important;\n}\n\n.profile-form input[type=\"date\"],\n.profile-form input[type=\"month\"],\n.profile-form input[type=\"week\"],\n.profile-form input[type=\"time\"],\n.profile-form input[type=\"datetime-local\"] {\n min-height: var(--min-touch-target);\n}\n\n.profile-form .hoverControl:has(> img:first-child):focus-visible,\n.profile-form button:focus-visible,\n.profile-form input:not([type=\"color\"]):focus-visible,\n.profile-form textarea:focus-visible,\n.profile-form select:focus-visible {\n outline: var(--focus-ring-width) solid var(--color-primary) !important;\n outline-offset: 2px;\n box-shadow: 0 0 0 1px var(--color-background);\n}\n\n.profile-form input[type=\"url\"] {\n width: 100%;\n}\n\n.profile-form select#formSelect {\n width: 100%;\n max-width: 97%;\n box-sizing: border-box;\n margin-left: 0 !important;\n margin-right: 0 !important;\n}\n\n/* Remove border/padding from the first wrapper div (and its first child wrapper). */\n.profile-form > div:first-of-type,\n.profile-form > div:first-of-type > div:first-of-type {\n border: none !important;\n padding: 0 !important;\n}\n\n/* Remove border/padding from the inner div of the first wrapper in the contact section. */\nsection[aria-labelledby=\"edit-profile-contact-heading\"] .profile-form > div:first-of-type > div:first-of-type {\n border: none !important;\n padding: 0 !important;\n}\n\n/* In contactPane, remove border/padding from all direct child divs. */\n.contactPane > div {\n border: none !important;\n padding: 0 !important;\n}\n\n/* Align schema.org, solid terms, FOAF, vCard, and org field labels with their input values. */\n.profile-form :not(.choiceBox):has(> .formFieldName):has(> .formFieldValue) {\n display: flex;\n}\n\n/* for the Resume inside corporation choice */\n/* Add space between classifierBox label and select box */\n.profile-form .choiceBox .classifierBox-label {\n /* Optional: ensure label doesn't have extra margin */\n margin-right: 0;\n padding-left: 0.3em;\n}\n.profile-form .choiceBox .choiceBox-selectBox select {\n margin-left: 2.1em !important;\n}\n\n/* for the Resume orga details */\n/* Add space between classifierBox label and select box */\n.profile-form .classifierBox .classifierBox-label {\n /* Match .formFieldName for alignment */\n margin-right: 0;\n padding-left: 0.3em;\n width: 8em;\n padding: 0.3em;\n vertical-align: middle;\n}\n.profile-form .classifierBox .classifierBox-selectBox {\n margin-left: 0 !important;\n}\n\n.profile-form .classifierBox .classifierBox-selectBox select {\n margin-left: 0 !important;\n}\n\n/* for the social media */\n/* Add space between classifierBox label and select box */\nsection[data-testid=\"edit-social-section\"] .classifierBox-label {\n /* Optional: ensure label doesn't have extra margin */\n margin-right: 0;\n padding-left: 0.3em;\n}\nsection[data-testid=\"edit-social-section\"] .classifierBox-selectBox select {\n margin-left: 0.7em !important;\n}\n\n.profile-form :not(.choiceBox):has(> .formFieldName):has(> .formFieldValue) > .formFieldValue {\n margin-bottom: 0;\n}\n\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://schema.org/\"]),\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/solid/terms#\"]),\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://xmlns.com/foaf/0.1/\"]),\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/2006/vcard/ns\"]),\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/org#\"]) {\n display: inline-flex;\n align-items: center;\n vertical-align: middle;\n}\n\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://schema.org/\"]) + .formFieldValue,\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/solid/terms#\"]) + .formFieldValue,\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://xmlns.com/foaf/0.1/\"]) + .formFieldValue,\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/2006/vcard/ns\"]) + .formFieldValue,\n.profile-form :not(.choiceBox) > .formFieldName:has(a[href*=\"http://www.w3.org/ns/org#\"]) + .formFieldValue {\n display: inline-flex;\n align-items: center;\n vertical-align: middle;\n flex: 1;\n min-width: 0;\n}\n\n.profile-form textarea,\n.profile-form .formFieldValue textarea {\n appearance: none;\n -webkit-appearance: none;\n border: .05em solid #88c !important;\n border-style: solid !important;\n border-width: .05em !important;\n border-color: #88c !important;\n border-radius: 0.2em !important;\n width: 99%;\n box-sizing: border-box;\n margin-top: var(--spacing-xs);\n margin-left: 0 !important;\n margin-right: 0 !important;\n}\n\n/* Add horizontal gap between label and textarea for all label+textarea pairs. */\n.profile-form div:has(> a) + div:has(textarea) {\n margin-left: var(--spacing-sm);\n}\n\n/* Center textarea label vertically in flex rows. */\n.profile-form div[style*=\"display: flex\"][style*=\"flex-direction: row\"]:has(textarea) {\n align-items: flex-start;\n}\n\n.profile-form div[style*=\"display: flex\"][style*=\"flex-direction: row\"]:has(textarea) > div:has(> a) {\n padding-left: var(--spacing-xs);\n padding-top: var(--spacing-sm);\n}\n\n\n.profile-form :not(.choiceBox):has(> .formFieldValue input[data-testid=\"autocomplete-input\"]) > .formFieldName {\n padding-top: 0.55em !important;\n}\n\n\n.profile-form input:disabled,\n.profile-form textarea:disabled,\n.profile-form select:disabled,\n.profile-form input[readonly],\n.profile-form textarea[readonly],\n.profile-form input:read-only,\n.profile-form textarea:read-only {\n background-color: var(--color-background) !important;\n cursor: not-allowed;\n opacity: 0.75;\n border: 0.05em solid white !important;\n}\n\n.webidControl table td div.contactPane.namedPane {\n border: none !important;\n}\n\n/* Hide the edit icon used by solid-ui (noun_253504.svg and noun_1180158.svg) when it appears as an <img> */\nimg[src*=\"noun_253504.svg\"],\nimg[src*=\"noun_1180158.svg\"] {\n display: none !important;\n width: 0 !important;\n height: 0 !important;\n margin: 0 !important;\n padding: 0 !important;\n}\n\n/* Ensure the parent button for that icon doesn't add padding/margin or affect layout */\nbutton:has(> img[src*=\"noun_253504.svg\"]),\nbutton:has(> img[src*=\"noun_1180158.svg\"]) {\n display: none !important;\n padding: 0 !important;\n margin: 0 !important;\n border: none !important;\n background: none !important;\n width: 0 !important;\n height: 0 !important;\n overflow: hidden !important;\n}\n\n/* Exceptions: allow these icons (and their buttons) when they're part of the add-friend or add-community flows. */\n.profile-grid .profileSection .add-friend-button-container img[src=\"https://solidos.github.io/solid-ui/src/icons/noun_253504.svg\"],\n.profile-grid .profileSection .add-community-button-container img[src=\"https://solidos.github.io/solid-ui/src/icons/noun_253504.svg\"],\n.profile-grid .profileSection .add-friend-button-container button:has(> img[src=\"https://solidos.github.io/solid-ui/src/icons/noun_253504.svg\"]),\n.profile-grid .profileSection .add-community-button-container button:has(> img[src=\"https://solidos.github.io/solid-ui/src/icons/noun_253504.svg\"]) {\n display: inline-flex !important;\n width: auto !important;\n height: auto !important;\n overflow: visible !important;\n}\n\n\n/* Exception: allow “Continue” buttons inside add-friend and add-community button containers. */\n.profile-grid .profileSection .add-friend-button-container button:has(> img[title=\"Continue\"]),\n.profile-grid .profileSection .add-community-button-container button:has(> img[title=\"Continue\"]),\n.profile-grid .profileSection .add-friend-button-container button:has(> img[src=\"https://solidos.github.io/solid-ui/src/icons/noun_1180158.svg\"]),\n.profile-grid .profileSection .add-community-button-container button:has(> img[src=\"https://solidos.github.io/solid-ui/src/icons/noun_1180158.svg\"]),\n.profile-grid .profileSection .add-friend-button-container img[src=\"https://solidos.github.io/solid-ui/src/icons/noun_1180158.svg\"],\n.profile-grid .profileSection .add-community-button-container img[src=\"https://solidos.github.io/solid-ui/src/icons/noun_1180158.svg\"] {\n display: inline-flex !important;\n width: 2em !important;\n height: 2em !important;\n overflow: visible !important;\n}\n"],"sourceRoot":""}]);
7893
8540
  // Exports
7894
8541
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
7895
8542
 
@@ -7914,6 +8561,30 @@ var ___CSS_LOADER_EXPORT___ = _css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_
7914
8561
  // Module
7915
8562
  ___CSS_LOADER_EXPORT___.push([module.id, `/* Utility-first CSS classes for layout, spacing, and responsiveness */
7916
8563
 
8564
+ :root {
8565
+ /* Added for profile-pane (editProfile) layout sizing */
8566
+ --spacing-xxs: 0.4em;
8567
+ --spacing-xxxs: 0.1em;
8568
+ --profile-image-size: 3em;
8569
+ }
8570
+
8571
+ @media (max-width: 1000px) {
8572
+ .profile-grid,
8573
+ .profile-grid * {
8574
+ font-size: 2rem !important;
8575
+ }
8576
+
8577
+ .profile-grid .actionButton,
8578
+ .profile-grid .searchInput,
8579
+ .profile-grid .flatButton,
8580
+ .profile-grid .buttonSection button,
8581
+ .profile-grid .groupButtonsList button {
8582
+ min-height: calc(var(--min-touch-target) + 0.5em) !important;
8583
+ font-size: 2rem !important;
8584
+ padding: 1em 1em !important;
8585
+ }
8586
+ }
8587
+
7917
8588
  .actionButton {
7918
8589
  width: 100%;
7919
8590
  min-width: 180px;
@@ -7928,7 +8599,8 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Utility-first CSS classes for layou
7928
8599
 
7929
8600
  .profile-grid {
7930
8601
  display: grid;
7931
- grid-template-columns: repeat(auto-fit, minmax(30em, 1fr));
8602
+ /* Allow the grid to shrink below 30em on small viewports to avoid overflow */
8603
+ grid-template-columns: repeat(auto-fit, minmax(min(100%, 30em), 1fr));
7932
8604
  gap: var(--spacing-lg);
7933
8605
  background: var(--color-background);
7934
8606
  }
@@ -8121,6 +8793,13 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Utility-first CSS classes for layou
8121
8793
  box-shadow: none;
8122
8794
  }
8123
8795
 
8796
+ /* Prevent labels from appearing focusable to keyboard users. */
8797
+ label:focus,
8798
+ label:focus-visible {
8799
+ outline: none !important;
8800
+ box-shadow: none !important;
8801
+ }
8802
+
8124
8803
  /* Better focus for text elements */
8125
8804
  .focusable-text:focus {
8126
8805
  background-color: rgba(124, 77, 255, 0.1);
@@ -8241,7 +8920,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Utility-first CSS classes for layou
8241
8920
  .btn-transparent:hover {
8242
8921
  background-color: transparent;
8243
8922
  }
8244
- `, "",{"version":3,"sources":["webpack://./node_modules/profile-pane/lib/styles/utilities.css"],"names":[],"mappings":"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","sourcesContent":["/* Utility-first CSS classes for layout, spacing, and responsiveness */\n\n.actionButton {\n width: 100%;\n min-width: 180px;\n max-width: 320px;\n box-sizing: border-box;\n display: inline-block;\n}\n\n/* ===========================================\n PROFILE GRID LAYOUT\n =========================================== */\n\n.profile-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(30em, 1fr));\n gap: var(--spacing-lg);\n background: var(--color-background);\n}\n\n.profile-header,\n.profile-footer {\n grid-column: 1 / -1;\n}\n\n.center {\n justify-content: center;\n align-items: center;\n}\n\n.flex {\n display: flex;\n}\n.grid {\n display: grid;\n}\n\n/* Spacing utilities using CSS variables */\n.gap-xs { gap: var(--spacing-xs); }\n.gap-sm { gap: var(--spacing-sm); }\n.gap-md { gap: var(--spacing-md); }\n.gap-lg { gap: var(--spacing-lg); }\n.gap-xl { gap: var(--spacing-xl); }\n\n.mt-xs { margin-top: var(--spacing-xs); }\n.mt-sm { margin-top: var(--spacing-sm); }\n.mt-md { margin-top: var(--spacing-md); }\n.mt-lg { margin-top: var(--spacing-lg); }\n\n.mb-xs { margin-bottom: var(--spacing-xs); }\n.mb-sm { margin-bottom: var(--spacing-sm); }\n.mb-md { margin-bottom: var(--spacing-md); }\n.mb-lg { margin-bottom: var(--spacing-lg); }\n\n.p-xs { padding: var(--spacing-xs); }\n.p-sm { padding: var(--spacing-sm); }\n.p-md { padding: var(--spacing-md); }\n.p-lg { padding: var(--spacing-lg); }\n\n.rounded { border-radius: var(--border-radius-full); }\n.rounded-sm { border-radius: var(--border-radius-base); }\n\n.shadow { box-shadow: var(--box-shadow); }\n.shadow-sm { box-shadow: var(--box-shadow-sm); }\n\n.bg-primary {\n background: var(--color-primary);\n color: #fff;\n}\n.bg-card {\n background: var(--color-card-bg);\n}\n\n/* Accessibility utilities */\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n\n.min-touch-target {\n min-height: var(--min-touch-target);\n min-width: var(--min-touch-target);\n}\n\n/* Enhanced accessibility utilities */\n.visually-hidden {\n position: absolute !important;\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n margin: -1px !important;\n overflow: hidden !important;\n clip: rect(0, 0, 0, 0) !important;\n white-space: nowrap !important;\n border: 0 !important;\n}\n\n.visually-hidden.focusable:focus,\n.visually-hidden.focusable:active {\n position: static !important;\n width: auto !important;\n height: auto !important;\n padding: inherit !important;\n margin: inherit !important;\n overflow: visible !important;\n clip: auto !important;\n white-space: inherit !important;\n}\n\n/* Skip links utility */\n.skip-links {\n position: absolute;\n top: -100px;\n left: 0;\n z-index: 1000;\n}\n\n.skip-links a {\n position: absolute;\n left: 6px;\n top: 6px;\n padding: var(--spacing-sm);\n background: var(--color-primary);\n color: white;\n text-decoration: none;\n border-radius: var(--border-radius-base);\n}\n\n.skip-links a:focus {\n top: 6px;\n}\n\n.reduced-motion {\n animation: none !important;\n transition: none !important;\n}\n\n/* Focus management */\n.focus-ring {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n.no-focus-ring {\n outline: none;\n}\n\n.no-focus-ring:focus-visible {\n outline: none;\n box-shadow: none;\n}\n\n/* ARIA live regions */\n.live-region {\n position: absolute;\n left: -10000px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n}\n\n/* Note: Use aria-live=\"polite\" or aria-live=\"assertive\" HTML attributes with .live-region */\n\n/* Text scaling utilities */\n.text-scale-friendly {\n line-height: 1.5;\n max-width: 70ch; /* Optimal reading length */\n}\n\n/* Text accessibility utilities */\n.text-readable {\n line-height: var(--line-height-base);\n max-width: 65ch;\n}\n\n.text-lg {\n font-size: var(--font-size-lg);\n line-height: var(--line-height-base);\n}\n\n.text-small {\n font-size: max(var(--font-size-sm), var(--min-font-size));\n line-height: var(--min-line-height);\n}\n\n.text-contrast-high {\n color: var(--color-text);\n font-weight: 600;\n}\n\n:focus-visible {\n outline: var(--focus-ring-width) solid var(--color-primary);\n outline-offset: 2px;\n box-shadow: 0 0 0 1px var(--color-background);\n}\n\n:focus:not(:focus-visible) {\n outline: none;\n box-shadow: none;\n}\n\n/* Better focus for text elements */\n.focusable-text:focus {\n background-color: rgba(124, 77, 255, 0.1);\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n border-radius: 2px;\n}\n\n/* High contrast text */\n.high-contrast {\n color: var(--color-text);\n background: var(--color-background);\n border: 1px solid var(--color-border-pale);\n}\n\n/* ===========================================\n CONSOLIDATED COMPONENT PATTERNS\n =========================================== */\n\n/* Primary Button - used by ChatWithMe, ProfileCard */\n.btn-primary {\n min-height: var(--min-touch-target);\n padding: var(--spacing-sm) var(--spacing-md);\n border: 1px solid var(--color-primary);\n border-radius: var(--border-radius-base);\n background: var(--color-primary);\n color: white;\n font-weight: 600;\n cursor: pointer;\n transition: all var(--animation-duration) ease;\n}\n\n.btn-primary:hover {\n background: color-mix(in srgb, var(--color-primary) 90%, black);\n box-shadow: 0 2px 4px rgba(124, 77, 255, 0.2);\n}\n\n.btn-primary:active {\n box-shadow: 0 1px 2px rgba(124, 77, 255, 0.2);\n}\n\n.btn-primary:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n transform: none;\n}\n\n/* Action Button Focus - used by ChatWithMe, ProfileCard */\n.action-button-focus:focus,\n.action-button-focus:focus-visible {\n outline: 3px solid var(--color-primary) !important;\n outline-offset: 2px !important;\n box-shadow: 0 0 0 2px var(--color-background), 0 0 0 5px rgba(124, 77, 255, 0.25) !important;\n z-index: 1;\n}\n\n/* List Reset - used by FriendList, SocialCard, nav */\n.list-reset {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n/* Zebra Striping - used by FriendList, StuffCard tables */\n.zebra-stripe tr:nth-child(even),\n.zebra-stripe > *:nth-child(even) {\n background-color: rgba(0, 0, 0, 0.02);\n}\n\n/* Section Title - primary colored heading */\n.section-title {\n font-size: 1.25em;\n font-weight: 600;\n color: var(--color-primary);\n margin: 0;\n}\n\n/* Text Overflow - used by ProfileCard, SocialCard */\n.text-truncate {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n\n.text-wrap-anywhere {\n overflow-wrap: anywhere;\n word-break: break-word;\n}\n\n/* Loading Text - primary colored centered loading indicator */\n.loading-text {\n color: var(--color-primary);\n text-align: center;\n margin: var(--spacing-md) 0;\n}\n\n/* Centered Section - flex column with center alignment */\n.section-centered {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n/* Card Section Background */\n.section-bg {\n background: var(--color-section-bg);\n border-radius: var(--border-radius-full);\n box-shadow: var(--box-shadow);\n padding: var(--spacing-md);\n}\n\n\n/* Transparent button override (for solid-ui integration) */\n.btn-transparent {\n background-color: transparent;\n}\n\n.btn-transparent:hover {\n background-color: transparent;\n}\n"],"sourceRoot":""}]);
8923
+ `, "",{"version":3,"sources":["webpack://./node_modules/profile-pane/lib/styles/utilities.css"],"names":[],"mappings":"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","sourcesContent":["/* Utility-first CSS classes for layout, spacing, and responsiveness */\n\n:root {\n /* Added for profile-pane (editProfile) layout sizing */\n --spacing-xxs: 0.4em;\n --spacing-xxxs: 0.1em;\n --profile-image-size: 3em;\n}\n\n@media (max-width: 1000px) {\n .profile-grid,\n .profile-grid * {\n font-size: 2rem !important;\n }\n\n .profile-grid .actionButton,\n .profile-grid .searchInput,\n .profile-grid .flatButton,\n .profile-grid .buttonSection button,\n .profile-grid .groupButtonsList button {\n min-height: calc(var(--min-touch-target) + 0.5em) !important;\n font-size: 2rem !important;\n padding: 1em 1em !important;\n }\n}\n\n.actionButton {\n width: 100%;\n min-width: 180px;\n max-width: 320px;\n box-sizing: border-box;\n display: inline-block;\n}\n\n/* ===========================================\n PROFILE GRID LAYOUT\n =========================================== */\n\n.profile-grid {\n display: grid;\n /* Allow the grid to shrink below 30em on small viewports to avoid overflow */\n grid-template-columns: repeat(auto-fit, minmax(min(100%, 30em), 1fr));\n gap: var(--spacing-lg);\n background: var(--color-background);\n}\n\n.profile-header,\n.profile-footer {\n grid-column: 1 / -1;\n}\n\n.center {\n justify-content: center;\n align-items: center;\n}\n\n.flex {\n display: flex;\n}\n.grid {\n display: grid;\n}\n\n/* Spacing utilities using CSS variables */\n.gap-xs { gap: var(--spacing-xs); }\n.gap-sm { gap: var(--spacing-sm); }\n.gap-md { gap: var(--spacing-md); }\n.gap-lg { gap: var(--spacing-lg); }\n.gap-xl { gap: var(--spacing-xl); }\n\n.mt-xs { margin-top: var(--spacing-xs); }\n.mt-sm { margin-top: var(--spacing-sm); }\n.mt-md { margin-top: var(--spacing-md); }\n.mt-lg { margin-top: var(--spacing-lg); }\n\n.mb-xs { margin-bottom: var(--spacing-xs); }\n.mb-sm { margin-bottom: var(--spacing-sm); }\n.mb-md { margin-bottom: var(--spacing-md); }\n.mb-lg { margin-bottom: var(--spacing-lg); }\n\n.p-xs { padding: var(--spacing-xs); }\n.p-sm { padding: var(--spacing-sm); }\n.p-md { padding: var(--spacing-md); }\n.p-lg { padding: var(--spacing-lg); }\n\n.rounded { border-radius: var(--border-radius-full); }\n.rounded-sm { border-radius: var(--border-radius-base); }\n\n.shadow { box-shadow: var(--box-shadow); }\n.shadow-sm { box-shadow: var(--box-shadow-sm); }\n\n.bg-primary {\n background: var(--color-primary);\n color: #fff;\n}\n.bg-card {\n background: var(--color-card-bg);\n}\n\n/* Accessibility utilities */\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n\n.min-touch-target {\n min-height: var(--min-touch-target);\n min-width: var(--min-touch-target);\n}\n\n/* Enhanced accessibility utilities */\n.visually-hidden {\n position: absolute !important;\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n margin: -1px !important;\n overflow: hidden !important;\n clip: rect(0, 0, 0, 0) !important;\n white-space: nowrap !important;\n border: 0 !important;\n}\n\n.visually-hidden.focusable:focus,\n.visually-hidden.focusable:active {\n position: static !important;\n width: auto !important;\n height: auto !important;\n padding: inherit !important;\n margin: inherit !important;\n overflow: visible !important;\n clip: auto !important;\n white-space: inherit !important;\n}\n\n/* Skip links utility */\n.skip-links {\n position: absolute;\n top: -100px;\n left: 0;\n z-index: 1000;\n}\n\n.skip-links a {\n position: absolute;\n left: 6px;\n top: 6px;\n padding: var(--spacing-sm);\n background: var(--color-primary);\n color: white;\n text-decoration: none;\n border-radius: var(--border-radius-base);\n}\n\n.skip-links a:focus {\n top: 6px;\n}\n\n.reduced-motion {\n animation: none !important;\n transition: none !important;\n}\n\n/* Focus management */\n.focus-ring {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n.no-focus-ring {\n outline: none;\n}\n\n.no-focus-ring:focus-visible {\n outline: none;\n box-shadow: none;\n}\n\n/* ARIA live regions */\n.live-region {\n position: absolute;\n left: -10000px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n}\n\n/* Note: Use aria-live=\"polite\" or aria-live=\"assertive\" HTML attributes with .live-region */\n\n/* Text scaling utilities */\n.text-scale-friendly {\n line-height: 1.5;\n max-width: 70ch; /* Optimal reading length */\n}\n\n/* Text accessibility utilities */\n.text-readable {\n line-height: var(--line-height-base);\n max-width: 65ch;\n}\n\n.text-lg {\n font-size: var(--font-size-lg);\n line-height: var(--line-height-base);\n}\n\n.text-small {\n font-size: max(var(--font-size-sm), var(--min-font-size));\n line-height: var(--min-line-height);\n}\n\n.text-contrast-high {\n color: var(--color-text);\n font-weight: 600;\n}\n\n:focus-visible {\n outline: var(--focus-ring-width) solid var(--color-primary);\n outline-offset: 2px;\n box-shadow: 0 0 0 1px var(--color-background);\n}\n\n:focus:not(:focus-visible) {\n outline: none;\n box-shadow: none;\n}\n\n/* Prevent labels from appearing focusable to keyboard users. */\nlabel:focus,\nlabel:focus-visible {\n outline: none !important;\n box-shadow: none !important;\n}\n\n/* Better focus for text elements */\n.focusable-text:focus {\n background-color: rgba(124, 77, 255, 0.1);\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n border-radius: 2px;\n}\n\n/* High contrast text */\n.high-contrast {\n color: var(--color-text);\n background: var(--color-background);\n border: 1px solid var(--color-border-pale);\n}\n\n/* ===========================================\n CONSOLIDATED COMPONENT PATTERNS\n =========================================== */\n\n/* Primary Button - used by ChatWithMe, ProfileCard */\n.btn-primary {\n min-height: var(--min-touch-target);\n padding: var(--spacing-sm) var(--spacing-md);\n border: 1px solid var(--color-primary);\n border-radius: var(--border-radius-base);\n background: var(--color-primary);\n color: white;\n font-weight: 600;\n cursor: pointer;\n transition: all var(--animation-duration) ease;\n}\n\n.btn-primary:hover {\n background: color-mix(in srgb, var(--color-primary) 90%, black);\n box-shadow: 0 2px 4px rgba(124, 77, 255, 0.2);\n}\n\n.btn-primary:active {\n box-shadow: 0 1px 2px rgba(124, 77, 255, 0.2);\n}\n\n.btn-primary:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n transform: none;\n}\n\n/* Action Button Focus - used by ChatWithMe, ProfileCard */\n.action-button-focus:focus,\n.action-button-focus:focus-visible {\n outline: 3px solid var(--color-primary) !important;\n outline-offset: 2px !important;\n box-shadow: 0 0 0 2px var(--color-background), 0 0 0 5px rgba(124, 77, 255, 0.25) !important;\n z-index: 1;\n}\n\n/* List Reset - used by FriendList, SocialCard, nav */\n.list-reset {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n/* Zebra Striping - used by FriendList, StuffCard tables */\n.zebra-stripe tr:nth-child(even),\n.zebra-stripe > *:nth-child(even) {\n background-color: rgba(0, 0, 0, 0.02);\n}\n\n/* Section Title - primary colored heading */\n.section-title {\n font-size: 1.25em;\n font-weight: 600;\n color: var(--color-primary);\n margin: 0;\n}\n\n/* Text Overflow - used by ProfileCard, SocialCard */\n.text-truncate {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n\n.text-wrap-anywhere {\n overflow-wrap: anywhere;\n word-break: break-word;\n}\n\n/* Loading Text - primary colored centered loading indicator */\n.loading-text {\n color: var(--color-primary);\n text-align: center;\n margin: var(--spacing-md) 0;\n}\n\n/* Centered Section - flex column with center alignment */\n.section-centered {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n/* Card Section Background */\n.section-bg {\n background: var(--color-section-bg);\n border-radius: var(--border-radius-full);\n box-shadow: var(--box-shadow);\n padding: var(--spacing-md);\n}\n\n\n/* Transparent button override (for solid-ui integration) */\n.btn-transparent {\n background-color: transparent;\n}\n\n.btn-transparent:hover {\n background-color: transparent;\n}\n"],"sourceRoot":""}]);
8245
8924
  // Exports
8246
8925
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
8247
8926
 
@@ -9519,20 +10198,19 @@ exports.ChatWithMe = ChatWithMe;
9519
10198
  Object.defineProperty(exports, "__esModule", ({
9520
10199
  value: true
9521
10200
  }));
9522
- exports.extractFriends = exports.FriendList = void 0;
9523
- var _solidUi = __webpack_require__(9426);
10201
+ exports.FriendList = void 0;
9524
10202
  var _litHtml = __webpack_require__(6752);
9525
10203
  __webpack_require__(9480);
10204
+ var _addMeToYourFriends = __webpack_require__(4695);
9526
10205
  const FriendList = (subject, context) => {
9527
- const friends = extractFriends(subject, context);
10206
+ const friends = (0, _addMeToYourFriends.extractFriends)(false, subject, context);
9528
10207
  if (!friends || !friends.textContent?.trim()) return null;
9529
10208
  return (0, _litHtml.html)`
9530
10209
  <section
9531
10210
  class="friendListSection"
9532
- role="region"
9533
- aria-labelledby="friends-section-title"
9534
10211
  data-testid="friend-list"
9535
10212
  >
10213
+ <h2 id="friends-section-title" class="sr-only">Friends</h2>
9536
10214
  <nav aria-label="Friend profiles">
9537
10215
  <ul class="list-reset zebra-stripe" role="list">
9538
10216
  ${friends}
@@ -9542,33 +10220,6 @@ const FriendList = (subject, context) => {
9542
10220
  `;
9543
10221
  };
9544
10222
  exports.FriendList = FriendList;
9545
- const extractFriends = (subject, {
9546
- dom
9547
- }) => {
9548
- const target = dom.createElement('div');
9549
- _solidUi.widgets.attachmentList(dom, subject, target, {
9550
- doc: subject.doc(),
9551
- modify: false,
9552
- predicate: _solidUi.ns.foaf('knows'),
9553
- noun: 'friend'
9554
- });
9555
- if (target.textContent === '') return null;
9556
- // Add 'friendItem' class and unique aria-label to each <li> for accessibility
9557
- target.querySelectorAll('li').forEach((li, idx) => {
9558
- li.classList.add('friendItem');
9559
- // Try to find a link or text to use as a label
9560
- const link = li.querySelector('a');
9561
- if (link && link.textContent) {
9562
- li.setAttribute('aria-label', `Friend: ${link.textContent.trim()}`);
9563
- } else if (li.textContent) {
9564
- li.setAttribute('aria-label', `Friend: ${li.textContent.trim()}`);
9565
- } else {
9566
- li.setAttribute('aria-label', `Friend ${idx + 1}`);
9567
- }
9568
- });
9569
- return target;
9570
- };
9571
- exports.extractFriends = extractFriends;
9572
10223
 
9573
10224
  /***/ },
9574
10225
 
@@ -10228,9 +10879,10 @@ Object.defineProperty(exports, "__esModule", ({
10228
10879
  value: true
10229
10880
  }));
10230
10881
  exports.addMeToYourFriendsDiv = void 0;
10231
- exports.checkIfFriendExists = checkIfFriendExists;
10882
+ exports.checkIfThingExists = checkIfThingExists;
10232
10883
  exports.createAddMeToYourFriendsButton = void 0;
10233
- exports.saveNewFriend = saveNewFriend;
10884
+ exports.extractFriends = extractFriends;
10885
+ exports.saveNewThing = saveNewThing;
10234
10886
  var _litHtml = __webpack_require__(6752);
10235
10887
  var _solidLogic = __webpack_require__(5663);
10236
10888
  var _rdflib = __webpack_require__(5491);
@@ -10267,7 +10919,7 @@ const createAddMeToYourFriendsButton = (subject, context) => {
10267
10919
  });
10268
10920
  function setButtonHandler(event) {
10269
10921
  event.preventDefault();
10270
- saveNewFriend(subject, context).then(() => {
10922
+ saveNewThing(subject, context, _solidUi.ns.foaf('knows')).then(() => {
10271
10923
  (0, _buttonsHelper.clearPreviousMessage)(buttonContainer);
10272
10924
  (0, _buttonsHelper.mention)(buttonContainer, _texts.friendWasAddedSuccesMessage);
10273
10925
  refreshButton();
@@ -10282,7 +10934,7 @@ const createAddMeToYourFriendsButton = (subject, context) => {
10282
10934
  const me = _solidLogic.authn.currentUser();
10283
10935
  const store = context.session.store;
10284
10936
  if (checkIfAnyUserLoggedIn(me)) {
10285
- checkIfFriendExists(store, me, subject).then(friendExists => {
10937
+ checkIfThingExists(store, me, subject, _solidUi.ns.foaf('knows')).then(friendExists => {
10286
10938
  if (friendExists) {
10287
10939
  //logged in and friend exists or friend was just added
10288
10940
  button.innerHTML = _texts.friendExistsAlreadyButtonText.toUpperCase();
@@ -10299,15 +10951,15 @@ const createAddMeToYourFriendsButton = (subject, context) => {
10299
10951
  return button;
10300
10952
  };
10301
10953
  exports.createAddMeToYourFriendsButton = createAddMeToYourFriendsButton;
10302
- async function saveNewFriend(subject, context) {
10954
+ async function saveNewThing(subject, context, predicate) {
10303
10955
  const me = _solidLogic.authn.currentUser();
10304
10956
  const store = context.session.store;
10305
10957
  if (checkIfAnyUserLoggedIn(me)) {
10306
- if (!(await checkIfFriendExists(store, me, subject))) {
10958
+ if (!(await checkIfThingExists(store, me, subject, predicate))) {
10307
10959
  //if friend does not exist, we add her/him
10308
10960
  await store.fetcher.load(me);
10309
10961
  const updater = store.updater;
10310
- const toBeInserted = [(0, _rdflib.st)(me, _solidUi.ns.foaf('knows'), subject, me.doc())];
10962
+ const toBeInserted = [(0, _rdflib.st)(me, predicate, subject, me.doc())];
10311
10963
  try {
10312
10964
  await updater.update([], toBeInserted);
10313
10965
  } catch (error) {
@@ -10321,9 +10973,24 @@ async function saveNewFriend(subject, context) {
10321
10973
  function checkIfAnyUserLoggedIn(me) {
10322
10974
  if (me) return true;else return false;
10323
10975
  }
10324
- async function checkIfFriendExists(store, me, subject) {
10976
+ async function checkIfThingExists(store, me, subject, predicate) {
10325
10977
  await store.fetcher.load(me);
10326
- if (store.whether(me, _solidUi.ns.foaf('knows'), subject, me.doc()) === 0) return false;else return true;
10978
+ if (store.whether(me, predicate, subject, me.doc()) === 0) return false;else return true;
10979
+ }
10980
+ function extractFriends(editable, subject, {
10981
+ dom
10982
+ }) {
10983
+ const target = dom.createElement('div');
10984
+ console.log('Extracting friends for subject:', subject.doc()); // Debug log to check the subject
10985
+ _solidUi.widgets.attachmentList(dom, subject, target, {
10986
+ doc: subject.doc(),
10987
+ modify: editable,
10988
+ predicate: _solidUi.ns.foaf('knows'),
10989
+ noun: 'friend'
10990
+ });
10991
+ if (target.textContent === '') return null;
10992
+ console.log('Extracted friends:', target.innerHTML); // Debug log to check the generated HTML
10993
+ return target;
10327
10994
  }
10328
10995
 
10329
10996
  /***/ },
@@ -10393,7 +11060,7 @@ var _rdfFormsHelper = _interopRequireDefault(__webpack_require__(7824));
10393
11060
  var _texts = __webpack_require__(1363);
10394
11061
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
10395
11062
  /* babel-plugin-inline-import '../ontology/resumeForm.ttl' */
10396
- const resumeForm = "@prefix os: <http://www.w3.org/2000/10/swap/os#> .\n@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>.\n@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#>.\n@prefix foaf: <http://xmlns.com/foaf/0.1/>.\n@prefix owl: <http://www.w3.org/2002/07/owl#>.\n@prefix solid: <http://www.w3.org/ns/solid/terms#>.\n@prefix ui: <http://www.w3.org/ns/ui#>.\n@prefix schema: <http://schema.org/>.\n@prefix vcard: <http://www.w3.org/2006/vcard/ns#>.\n@prefix org: <http://www.w3.org/ns/org#>.\n@prefix esco: <http://data.europa.eu/esco/model#>.\n@prefix wd: <http://www.wikidata.org/entity/>.\n@prefix wdt: <http://www.wikidata.org/prop/direct/>.\n\n@prefix : <#>.\n\n:this\n <http://purl.org/dc/elements/1.1/title> \"Resume form\" ;\n a ui:Form ;\n ui:parts (\n :CVGroup\n :SkillsHeading :SkillsForm\n :LanguagesHeading :LanguagesForm\n ).\n\n# Curriculum Vitae: membership of organizations\n\n:CVGroup a ui:Group; \n ui:weight 1; \n ui:parts ( \n :CVPrompt \n :involvementWithOrganizationsForm \n ).\n\n:CVPrompt a ui:Comment; ui:contents \"What organizations have you been involved with?\" .\n\n:involvementWithOrganizationsForm a ui:Multiple;\n ui:label \"Involvement with organization\";\n ui:property org:member; \n ui:reverse true; # link back from role to member\n ui:ordered false; # Allow user to order CV secions rather than force date order? No.\n ui:part :RoleMembershipForm.\n\norg:member owl:inverse [ ui:label \"Involvement with organization\" ]. # timelimited involvement\n\n# This is a big important form for one of a series of roles in the list.\n\n:RoleMembershipForm a ui:Group; \n ui:weight 3; \n ui:parts ( \n :MembershipFormHeading\n :RoleClassifier \n :roleNameField\n :escoOccupationField \n :orgField \n :RoleDatesForm \n :RoleDescriptionForm).\n\n:MembershipFormHeading a ui:Heading; \n ui:contents \"Details of the role\"@en, \"D\xE9tailes de ce r\xF4le\"@fr .\n\n:roleNameField a ui:SingleLineTextField;\n ui:label \"Job title\";\n ui:property vcard:role .\n\n:escoOccupationField a ui:AutocompleteField;\n ui:label \"Occupation in ESCO\";\n ui:property org:role;\n ui:dataSource :ESCO_Occupation_DataSource;\n ui:targetClass schema:Occupation .\n\n :ESCO_Occupation_DataSource a ui:DataSource;\n schema:name \"ESCO\";\n ui:targetClass schema:Occupation ;\n schema:logo <https://ec.europa.eu/esco/portal/static_resource2/images/logo/logo_en.gif>;\n ui:searchByNameURI \"https://ec.europa.eu/esco/api/search?language=$(language)&type=occupation&text=$(name)\".\n\n:orgField a ui:Choice; \n ui:label \"For organization\"@en, \"Pour l'organisation\"@fr;\n ui:canMintNew true; \n ui:use :OrganizationCreationForm ;\n ui:property org:organization;\n ui:from vcard:Organization .\n\nvcard:Organization ui:creationForm :OrganizationCreationForm .\n\n###### eposodes in one's career - Roles\n\n:RoleClassifier a ui:Classifier; \n ui:label \"Job type\"@en;\n ui:category solid:Role .\n\n:RoleDatesForm a ui:Options; \n ui:dependingOn rdf:type; \n ui:case\n [ ui:for solid:PastRole; ui:use :TwoDateForm ],\n [ ui:for solid:CurrentRole; ui:use :StartDateForm ],\n [ ui:for solid:FutureRole; ui:use :StartDateForm ].\n\n :TwoDateForm a ui:Group; \n ui:weight 0; \n ui:parts ( :StartDateForm :EndDateForm ) .\n :StartDateForm a ui:DateField; \n ui:label \"Start\"@en,\"D\xE9but\"@fr;\n ui:property schema:startDate .\n :EndDateForm a ui:DateField; \n ui:label \"End\"@en,\"Fin\"@fr;\n ui:property schema:endDate .\n\nsolid:Role a rdfs:Class;\n owl:disjointUnionOf ( solid:PastRole solid:CurrentRole solid:FutureRole ) ;\n owl:oneOf ( solid:CurrentRole solid:PastRole solid:FutureRole ). # Future Role too?\n\nsolid:PastRole a rdfs:Class; rdfs:label \"Former role\"@en, \"Ancien r\xF4le\"@fr, \"Vergangene Rolle\"@de, \"Rol anterior\"@es .\nsolid:CurrentRole a rdfs:Class; rdfs:label \"Current role\"@en, \"R\xF4le actuel\"@fr, \"Momentane Rolle\"@de , \"Rol actual\"@es .\nsolid:FutureRole a rdfs:Class; rdfs:label \"Future role\"@en, \"R\xF4le \xE0 venir\"@fr, \"Zuk\xFCnftige Rolle\"@de, \"Rol futuro\"@es .\n\n:RoleDescriptionForm a ui:MultiLineTextField; \n ui:property schema:description;\n ui:label \"Describe your role\" .\n\n###### Organizations\n\n:OrganizationCreationForm a ui:Form; \n schema:name \"Form for editing an organization using public data\" ;\n ui:parts ( \n :OrgClassifier \n :OrganizationNameField\n :OrgSwitch\n :homePageURIField ) .\n\n:OrgClassifier a ui:Classifier; \n ui:label \"Type\"@en;\n ui:category solid:InterestingOrganization .\n\n:OrgSwitch a ui:Options; \n ui:dependingOn rdf:type;\n ui:case\n [ ui:for schema:Corporation; ui:use :CorporationForm ],\n [ ui:for schema:GovernmentOrganization; ui:use :GovernmentOrganizationForm ],\n [ ui:for schema:PerformingGroup; ui:use :PerformingGroupForm ],\n [ ui:for schema:Project; ui:use :ProjectForm ],\n [ ui:for schema:NGO; ui:use :NGOForm ],\n [ ui:for schema:EducationalOrganization; ui:use :EducationalOrganizationForm ],\n [ ui:for schema:ResearchOrganization; ui:use :ResearchOrganizationForm ],\n [ ui:for schema:SportsOrganization; ui:use :SportsOrganizationForm ].\n\n:OrganizationNameField a ui:SingleLineTextField ;\n ui:label \"Name\";\n ui:maxLength \"200\" ;\n ui:property schema:name .\n\n:homePageURIField a ui:NamedNodeURIField;\n ui:label \"Homepage\"@en;\n ui:property schema:uri .\n\n# Ontology data to drive the :OrgClassifier classifier\nsolid:InterestingOrganization owl:disjointUnionOf (\n # Airline - a Corporation\n # Consortium - a Corporation or a NGO\n schema:Corporation\n schema:EducationalOrganization\n schema:ResearchOrganization # Proposed. https://github.com/schemaorg/schemaorg/issues/2877\n # FundingScheme - eh?\n schema:GovernmentOrganization\n # LibrarySystem\n # LocalBusiness - Corporation\n # MedicalOrganization - a Corporation or a NGO\n schema:NGO\n # NewsMediaOrganization - a Corporation or a NGO\n schema:PerformingGroup # a band\n schema:Project # like Solid\n schema:SportsOrganization) .\n\n# This until the schema.org ontology adopts it\nschema:ResearchOrganization a rdfs:Class; \n rdfs:label \"Research Organization\"@en, \"Organization de Recherche\"@fr ,\"organizaci\xF3n de investigaci\xF3n\"@es, \n \"\u0645\u0646\u0638\u0645\u0629 \u0627\u0644\u0628\u062D\u062B\"@ar, \"\u0905\u0928\u0941\u0938\u0902\u0927\u093E\u0928 \u0938\u0902\u0917\u0920\u0928\"@hi, \"Forschungsorganisation\"@de, \"shirika la utafiti\"@sw .\n\n##### Depending on the type of org, chose a different form\n\n#### Corporation\n:CorporationForm a ui:Group; \n ui:weight 0; \n ui:parts ( \n :CorporationAutocomplete ) .\n\n :CorporationAutocomplete a ui:AutocompleteField; \n ui:label \"Find in wikidata\";\n ui:targetClass <http://www.wikidata.org/entity/Q6881511>; # Enterprise\n ui:property solid:publicId; \n ui:dataSource :WikidataInstancesByName.\n\n :WikidataInstancesByName a ui:DataSource ;\n schema:name \"Wikidata instances by name\";\n ui:endpoint \"https://query.wikidata.org/sparql\" ;\n ui:searchByNameQuery \"\"\"SELECT ?subject ?name\n WHERE {\n ?klass wdt:P279* $(targetClass) .\n ?subject wdt:P31 ?klass .\n ?subject rdfs:label ?name.\n FILTER regex(?name, \"$(name)\", \"i\")\n } LIMIT $(limit) \"\"\" ;\n\n # Note this form of the query is very experimental\n ui:searchByName [ ui:construct { ?subject schema:name ?name } ;\n ui:where { ?klass wdt:P279 ?targetClass .\n ?subject wdt:P31 ?klass; rdfs:label ?name .\n };\n ].\n\n#### Gouvernment\n:GovernmentOrganizationForm a ui:Group; \n ui:weight 0; \n ui:parts ( \n :GovernmentOrganizationAutocomplete ) .\n\n :GovernmentOrganizationAutocomplete\n a ui:AutocompleteField; ui:label \"Find in wikidata\";\n ui:targetClass <http://www.wikidata.org/entity/Q327333>; # GovernmentOrganization\n ui:property solid:publicId; \n ui:dataSource :WikidataInstancesByName.\n\n#### Educational\n:EducationalOrganizationForm a ui:Group; \n ui:weight 1; \n ui:parts ( \n :EducationalOrganizationAutocomplete ) .\n\n :EducationalOrganizationAutocomplete\n a ui:AutocompleteField; ui:label \"Find in wikidata\";\n ui:targetClass <http://www.wikidata.org/entity/Q2385804>; # EducationalOrganization\n ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#### Research Group\n:ResearchOrganizationForm a ui:Group; \n ui:weight 0; \n ui:parts ( \n :ResearchOrganizationAutocomplete ) .\n\n :ResearchOrganizationAutocomplete\n a ui:AutocompleteField; ui:label \"Find in wikidata\";\n ui:targetClass <http://www.wikidata.org/entity/Q31855>; # research institute\n ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#### NGO\n:NGOForm a ui:Group; ui:weight 0; \n ui:parts ( \n :NGOAutocomplete ) .\n\n :NGOAutocomplete\n a ui:AutocompleteField; ui:label \"Find in wikidata\";\n ui:targetClass <http://www.wikidata.org/entity/Q163740>; # Non-profit org\n ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#### Performing group\n:PerformingGroupForm a ui:Group; \n ui:weight 0; \n ui:parts ( \n :PerformingGroupAutocomplete ) .\n\n :PerformingGroupAutocomplete\n a ui:AutocompleteField; ui:label \"Find in wikidata\";\n ui:targetClass <http://www.wikidata.org/entity/Q32178211>; # Music Org\n ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#### Project\n:ProjectForm a ui:Group; \n ui:weight 0; \n ui:parts ( \n :ProjectAutocomplete ) . # :ProjectAutocomplete - no: supress, as not in WD\n\n :ProjectAutocomplete\n a ui:AutocompleteField; ui:label \"Find in wikidata\";\n ui:targetClass <http://www.wikidata.org/entity/Q170584>; # Project\n ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#### Sports Organization\n :SportsOrganizationForm a ui:Group; \n ui:weight 0; \n ui:parts ( \n :SportsOrganizationAutocomplete ) .\n\n :SportsOrganizationAutocomplete\n a ui:AutocompleteField; ui:label \"Find in wikidata\";\n ui:targetClass <http://www.wikidata.org/entity/Q4438121>; # SportsOrganization\n ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#################### Skills\n\n:SkillsHeading a ui:Heading; \n ui:contents \"Add your skills\" .\n\n:SkillsForm a ui:Multiple;\n ui:label \"Skills\";\n ui:property schema:skills;\n ui:ordered false; # Allow reader to order skills\n ui:part :SkillForm.\n\n:SkillForm a ui:Group; ui:weight 1; ui:parts ( :escoSkillField ).\n\n :escoSkillField a ui:AutocompleteField;\n ui:label \"Find in ESCO\";\n ui:property solid:publicId;\n ui:dataSource :ESCO_Skill_DataSource;\n ui:targetClass schema:Skill .\n\n :ESCO_Skill_DataSource a ui:DataSource;\n schema:name \"ESCO skill\";\n ui:targetClass esco:Skill ;\n schema:logo <https://ec.europa.eu/esco/portal/static_resource2/images/logo/logo_en.gif>;\n ui:searchByNameURI \"https://ec.europa.eu/esco/api/search?language=$(language)&limit=$(limit)&type=skill&text=$(name)\".\n\n#################### Languages\n\n:LanguagesHeading a ui:Heading; ui:contents \"Add your languages\" .\n\n:LanguagesForm a ui:Multiple;\n ui:label \"Languages\";\n ui:property schema:knowsLanguage; \n ui:ordered true; # Allow user to order languages most important first.\n ui:part :LanguageForm.\n\n:LanguageForm a ui:Group; ui:weight 1; ui:parts ( :WikidataLanguageField ).\n\n :WikidataLanguageField a ui:AutocompleteField;\n ui:label \"Language\";\n ui:property solid:publicId; \n ui:dataSource :WikidataLanguageDataSource;\n ui:targetClass schema:Language .\n\n :WikidataLanguageDataSource\n schema:name \"Find in wikidata\";\n ui:endpoint \"https://query.wikidata.org/sparql\" ;\n ui:objectURIBase <https://www.w3.org/ns/iana/language-code/>;\n # Add this to any literal string returned as ?subject\n ui:searchByNameQuery \"\"\"SELECT ?item ?subject ?name\n WHERE\n { ?item wdt:P305 ?subject .\n OPTIONAL {?item rdfs:label ?name}\n OPTIONAL {?item wdt:P1705 ?name}\n FILTER regex(?name, \"$(name)\", \"i\")\n FILTER regex(?subject, \"^..$\", \"i\")\n }\"\"\" .\n # Note we restrict code to two-letter codes with the second regex, so as to limit the deluge of languages\n # Hope there are not any important ones which have three-letter codes.\n # Omitted: SERVICE wikibase:label { bd:serviceParam wikibase:language \"$(languages)\". }";
11063
+ const resumeForm = "@prefix os: <http://www.w3.org/2000/10/swap/os#> .\n@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>.\n@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#>.\n@prefix foaf: <http://xmlns.com/foaf/0.1/>.\n@prefix owl: <http://www.w3.org/2002/07/owl#>.\n@prefix solid: <http://www.w3.org/ns/solid/terms#>.\n@prefix ui: <http://www.w3.org/ns/ui#>.\n@prefix schema: <http://schema.org/>.\n@prefix vcard: <http://www.w3.org/2006/vcard/ns#>.\n@prefix org: <http://www.w3.org/ns/org#>.\n@prefix esco: <http://data.europa.eu/esco/model#>.\n@prefix wd: <http://www.wikidata.org/entity/>.\n@prefix wdt: <http://www.wikidata.org/prop/direct/>.\n\n@prefix : <#>.\n\n:this\n <http://purl.org/dc/elements/1.1/title> \"Resume form\" ;\n a ui:Form ;\n ui:parts (\n :CVGroup\n :SkillsHeading :SkillsForm\n :LanguagesHeading :LanguagesForm\n ).\n\n# Curriculum Vitae: membership of organizations\n\n:CVGroup a ui:Group; \n ui:weight 1; \n ui:parts ( \n :ResumeHeading \n :involvementWithOrganizationsForm \n ).\n\n:ResumeHeading a ui:Heading; \n ui:contents \"Add your work experience\" .\n\n:involvementWithOrganizationsForm a ui:Multiple;\n ui:label \"work experience\";\n ui:property org:member; \n ui:reverse true; # link back from role to member\n ui:ordered false; # Allow user to order CV secions rather than force date order? No.\n ui:part :RoleMembershipForm.\n\norg:member owl:inverse [ ui:label \"Work experience\" ]. # timelimited involvement\n\n# This is a big important form for one of a series of roles in the list.\n\n:RoleMembershipForm a ui:Group; \n ui:weight 3; \n ui:parts ( \n :MembershipFormHeading\n :RoleClassifier \n :roleNameField\n :escoOccupationField \n :orgField \n :RoleDatesForm \n :RoleDescriptionForm).\n\n:MembershipFormHeading a ui:Heading; \n ui:contents \"Details of the role\"@en, \"D\xE9tailes de ce r\xF4le\"@fr .\n\n:roleNameField a ui:SingleLineTextField;\n ui:label \"Job title\";\n ui:property vcard:role .\n\n:escoOccupationField a ui:AutocompleteField;\n ui:label \"Find in occupation catalog\";\n ui:property org:role;\n ui:dataSource :ESCO_Occupation_DataSource;\n ui:targetClass schema:Occupation .\n\n :ESCO_Occupation_DataSource a ui:DataSource;\n schema:name \"ESCO\";\n ui:targetClass schema:Occupation ;\n schema:logo <https://ec.europa.eu/esco/portal/static_resource2/images/logo/logo_en.gif>;\n ui:searchByNameURI \"https://ec.europa.eu/esco/api/search?language=$(language)&type=occupation&text=$(name)\".\n\n:orgField a ui:Choice; \n ui:label \"For organization\"@en, \"Pour l'organisation\"@fr;\n ui:canMintNew true; \n ui:use :OrganizationCreationForm ;\n ui:property org:organization;\n ui:from vcard:Organization .\n\nvcard:Organization ui:creationForm :OrganizationCreationForm .\n\n###### eposodes in one's career - Roles\n\n:RoleClassifier a ui:Classifier; \n ui:label \"Job type\"@en;\n ui:category solid:Role .\n\n:RoleDatesForm a ui:Options; \n ui:dependingOn rdf:type; \n ui:case\n [ ui:for solid:PastRole; ui:use :TwoDateForm ],\n [ ui:for solid:CurrentRole; ui:use :StartDateForm ],\n [ ui:for solid:FutureRole; ui:use :StartDateForm ].\n\n :TwoDateForm a ui:Group; \n ui:weight 0; \n ui:parts ( :StartDateForm :EndDateForm ) .\n :StartDateForm a ui:DateField; \n ui:label \"Start\"@en,\"D\xE9but\"@fr;\n ui:property schema:startDate .\n :EndDateForm a ui:DateField; \n ui:label \"End\"@en,\"Fin\"@fr;\n ui:property schema:endDate .\n\nsolid:Role a rdfs:Class;\n owl:disjointUnionOf ( solid:PastRole solid:CurrentRole solid:FutureRole ) ;\n owl:oneOf ( solid:CurrentRole solid:PastRole solid:FutureRole ). # Future Role too?\n\nsolid:PastRole a rdfs:Class; rdfs:label \"Former role\"@en, \"Ancien r\xF4le\"@fr, \"Vergangene Rolle\"@de, \"Rol anterior\"@es .\nsolid:CurrentRole a rdfs:Class; rdfs:label \"Current role\"@en, \"R\xF4le actuel\"@fr, \"Momentane Rolle\"@de , \"Rol actual\"@es .\nsolid:FutureRole a rdfs:Class; rdfs:label \"Future role\"@en, \"R\xF4le \xE0 venir\"@fr, \"Zuk\xFCnftige Rolle\"@de, \"Rol futuro\"@es .\n\n:RoleDescriptionForm a ui:MultiLineTextField; \n ui:property schema:description;\n ui:label \"Describe your role\" .\n\n###### Organizations\n\n:OrganizationCreationForm a ui:Form; \n schema:name \"Form for editing an organization using public data\" ;\n ui:parts ( \n :OrgClassifier \n :OrganizationNameField\n :OrgSwitch\n :homePageURIField ) .\n\n:OrgClassifier a ui:Classifier; \n ui:label \"Type\"@en;\n ui:category solid:InterestingOrganization .\n\n:OrgSwitch a ui:Options; \n ui:dependingOn rdf:type;\n ui:case\n [ ui:for schema:Corporation; ui:use :CorporationForm ],\n [ ui:for schema:GovernmentOrganization; ui:use :GovernmentOrganizationForm ],\n [ ui:for schema:PerformingGroup; ui:use :PerformingGroupForm ],\n [ ui:for schema:Project; ui:use :ProjectForm ],\n [ ui:for schema:NGO; ui:use :NGOForm ],\n [ ui:for schema:EducationalOrganization; ui:use :EducationalOrganizationForm ],\n [ ui:for schema:ResearchOrganization; ui:use :ResearchOrganizationForm ],\n [ ui:for schema:SportsOrganization; ui:use :SportsOrganizationForm ].\n\n:OrganizationNameField a ui:SingleLineTextField ;\n ui:label \"Name\";\n ui:maxLength \"200\" ;\n ui:property schema:name .\n\n:homePageURIField a ui:NamedNodeURIField;\n ui:label \"Homepage\"@en;\n ui:property schema:uri .\n\n# Ontology data to drive the :OrgClassifier classifier\nsolid:InterestingOrganization owl:disjointUnionOf (\n # Airline - a Corporation\n # Consortium - a Corporation or a NGO\n schema:Corporation\n schema:EducationalOrganization\n schema:ResearchOrganization # Proposed. https://github.com/schemaorg/schemaorg/issues/2877\n # FundingScheme - eh?\n schema:GovernmentOrganization\n # LibrarySystem\n # LocalBusiness - Corporation\n # MedicalOrganization - a Corporation or a NGO\n schema:NGO\n # NewsMediaOrganization - a Corporation or a NGO\n schema:PerformingGroup # a band\n schema:Project # like Solid\n schema:SportsOrganization) .\n\n# This until the schema.org ontology adopts it\nschema:ResearchOrganization a rdfs:Class; \n rdfs:label \"Research Organization\"@en, \"Organization de Recherche\"@fr ,\"organizaci\xF3n de investigaci\xF3n\"@es, \n \"\u0645\u0646\u0638\u0645\u0629 \u0627\u0644\u0628\u062D\u062B\"@ar, \"\u0905\u0928\u0941\u0938\u0902\u0927\u093E\u0928 \u0938\u0902\u0917\u0920\u0928\"@hi, \"Forschungsorganisation\"@de, \"shirika la utafiti\"@sw .\n\n##### Depending on the type of org, chose a different form\n\n#### Corporation\n:CorporationForm a ui:Group; \n ui:weight 0; \n ui:parts ( \n :CorporationAutocomplete ) .\n\n :CorporationAutocomplete a ui:AutocompleteField; \n ui:label \"Find in wikidata\";\n ui:targetClass <http://www.wikidata.org/entity/Q6881511>; # Enterprise\n ui:property solid:publicId; \n ui:dataSource :WikidataInstancesByName.\n\n :WikidataInstancesByName a ui:DataSource ;\n schema:name \"Wikidata instances by name\";\n ui:endpoint \"https://query.wikidata.org/sparql\" ;\n ui:searchByNameQuery \"\"\"SELECT ?subject ?name\n WHERE {\n ?klass wdt:P279* $(targetClass) .\n ?subject wdt:P31 ?klass .\n ?subject rdfs:label ?name.\n FILTER regex(?name, \"$(name)\", \"i\")\n } LIMIT $(limit) \"\"\" ;\n\n # Note this form of the query is very experimental\n ui:searchByName [ ui:construct { ?subject schema:name ?name } ;\n ui:where { ?klass wdt:P279 ?targetClass .\n ?subject wdt:P31 ?klass; rdfs:label ?name .\n };\n ].\n\n#### Gouvernment\n:GovernmentOrganizationForm a ui:Group; \n ui:weight 0; \n ui:parts ( \n :GovernmentOrganizationAutocomplete ) .\n\n :GovernmentOrganizationAutocomplete\n a ui:AutocompleteField; ui:label \"Find in wikidata\";\n ui:targetClass <http://www.wikidata.org/entity/Q327333>; # GovernmentOrganization\n ui:property solid:publicId; \n ui:dataSource :WikidataInstancesByName.\n\n#### Educational\n:EducationalOrganizationForm a ui:Group; \n ui:weight 1; \n ui:parts ( \n :EducationalOrganizationAutocomplete ) .\n\n :EducationalOrganizationAutocomplete\n a ui:AutocompleteField; ui:label \"Find in wikidata\";\n ui:targetClass <http://www.wikidata.org/entity/Q2385804>; # EducationalOrganization\n ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#### Research Group\n:ResearchOrganizationForm a ui:Group; \n ui:weight 0; \n ui:parts ( \n :ResearchOrganizationAutocomplete ) .\n\n :ResearchOrganizationAutocomplete\n a ui:AutocompleteField; ui:label \"Find in wikidata\";\n ui:targetClass <http://www.wikidata.org/entity/Q31855>; # research institute\n ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#### NGO\n:NGOForm a ui:Group; ui:weight 0; \n ui:parts ( \n :NGOAutocomplete ) .\n\n :NGOAutocomplete\n a ui:AutocompleteField; ui:label \"Find in wikidata\";\n ui:targetClass <http://www.wikidata.org/entity/Q163740>; # Non-profit org\n ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#### Performing group\n:PerformingGroupForm a ui:Group; \n ui:weight 0; \n ui:parts ( \n :PerformingGroupAutocomplete ) .\n\n :PerformingGroupAutocomplete\n a ui:AutocompleteField; ui:label \"Find in wikidata\";\n ui:targetClass <http://www.wikidata.org/entity/Q32178211>; # Music Org\n ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#### Project\n:ProjectForm a ui:Group; \n ui:weight 0; \n ui:parts ( \n :ProjectAutocomplete ) . # :ProjectAutocomplete - no: supress, as not in WD\n\n :ProjectAutocomplete\n a ui:AutocompleteField; ui:label \"Find in wikidata\";\n ui:targetClass <http://www.wikidata.org/entity/Q170584>; # Project\n ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#### Sports Organization\n :SportsOrganizationForm a ui:Group; \n ui:weight 0; \n ui:parts ( \n :SportsOrganizationAutocomplete ) .\n\n :SportsOrganizationAutocomplete\n a ui:AutocompleteField; ui:label \"Find in wikidata\";\n ui:targetClass <http://www.wikidata.org/entity/Q4438121>; # SportsOrganization\n ui:property solid:publicId; ui:dataSource :WikidataInstancesByName.\n\n#################### Skills\n\n:SkillsHeading a ui:Heading; \n ui:contents \"Add your skills\" .\n\n:SkillsForm a ui:Multiple;\n ui:label \"skill\";\n ui:property schema:skills;\n ui:ordered false; # Allow reader to order skills\n ui:part :SkillForm.\n\n:SkillForm a ui:Group; ui:weight 1; ui:parts ( :escoSkillField ).\n\n :escoSkillField a ui:AutocompleteField;\n ui:label \"Find in skills catalog\";\n ui:property solid:publicId;\n ui:dataSource :ESCO_Skill_DataSource;\n ui:targetClass schema:Skill .\n\n :ESCO_Skill_DataSource a ui:DataSource;\n schema:name \"ESCO skill\";\n ui:targetClass esco:Skill ;\n schema:logo <https://ec.europa.eu/esco/portal/static_resource2/images/logo/logo_en.gif>;\n ui:searchByNameURI \"https://ec.europa.eu/esco/api/search?language=$(language)&limit=$(limit)&type=skill&text=$(name)\".\n\n#################### Languages\n\n:LanguagesHeading a ui:Heading; ui:contents \"Add your languages\" .\n\n:LanguagesForm a ui:Multiple;\n ui:label \"language\";\n ui:property schema:knowsLanguage; \n ui:ordered true; # Allow user to order languages most important first.\n ui:part :LanguageForm.\n\n:LanguageForm a ui:Group; ui:weight 1; ui:parts ( :WikidataLanguageField ).\n\n :WikidataLanguageField a ui:AutocompleteField;\n ui:label \"Language\";\n ui:property solid:publicId; \n ui:dataSource :WikidataLanguageDataSource;\n ui:targetClass schema:Language .\n\n :WikidataLanguageDataSource\n schema:name \"Find in wikidata\";\n ui:endpoint \"https://query.wikidata.org/sparql\" ;\n ui:objectURIBase <https://www.w3.org/ns/iana/language-code/>;\n # Add this to any literal string returned as ?subject\n ui:searchByNameQuery \"\"\"SELECT ?item ?subject ?name\n WHERE\n { ?item wdt:P305 ?subject .\n OPTIONAL {?item rdfs:label ?name}\n OPTIONAL {?item wdt:P1705 ?name}\n FILTER regex(?name, \"$(name)\", \"i\")\n FILTER regex(?subject, \"^..$\", \"i\")\n }\"\"\" .\n # Note we restrict code to two-letter codes with the second regex, so as to limit the deluge of languages\n # Hope there are not any important ones which have three-letter codes.\n # Omitted: SERVICE wikibase:label { bd:serviceParam wikibase:language \"$(languages)\". }";
10397
11064
  const resumeFormName = 'resumeForm.ttl'; // The name of the form file
10398
11065
 
10399
11066
  function EditCVSection(context, me, editableProfile, store) {
@@ -10409,12 +11076,7 @@ function EditCVSection(context, me, editableProfile, store) {
10409
11076
  heading.textContent = _texts.resumeHeadingText;
10410
11077
  header.appendChild(heading);
10411
11078
  section.appendChild(header);
10412
- if (editableProfile) {
10413
- const comment2 = context.dom.createElement('p');
10414
- comment2.classList.add('p-md');
10415
- comment2.textContent = 'Edit your resume. These will be publicly visible on your profile.';
10416
- section.appendChild(comment2);
10417
- } else {
11079
+ if (!editableProfile) {
10418
11080
  const comment1 = context.dom.createElement('p');
10419
11081
  comment1.classList.add('p-md');
10420
11082
  comment1.textContent = 'Login to add resume information to your profile.';
@@ -10438,7 +11100,14 @@ Object.defineProperty(exports, "__esModule", ({
10438
11100
  exports.EditProfileCommunitiesSection = EditProfileCommunitiesSection;
10439
11101
  var _solidUi = __webpack_require__(9426);
10440
11102
  var _texts = __webpack_require__(1363);
10441
- function EditProfileCommunitiesSection(context, me, editableProfile, profile) {
11103
+ var _solidLogic = __webpack_require__(5663);
11104
+ __webpack_require__(6433);
11105
+ __webpack_require__(8434);
11106
+ var _buttonsHelper = __webpack_require__(4198);
11107
+ var _addMeToYourFriends = __webpack_require__(4695);
11108
+ var _editProfilePresenter = __webpack_require__(6444);
11109
+ const GREEN_PLUS = _solidUi.icons.iconBase + 'noun_34653_green.svg';
11110
+ function EditProfileCommunitiesSection(context, me, editableProfile) {
10442
11111
  const section = context.dom.createElement('section');
10443
11112
  section.setAttribute('aria-labelledby', 'edit-profile-communities-heading');
10444
11113
  section.classList.add('profileSection', 'section-bg');
@@ -10450,31 +11119,43 @@ function EditProfileCommunitiesSection(context, me, editableProfile, profile) {
10450
11119
  heading.textContent = _texts.communitiesHeadingText;
10451
11120
  header.appendChild(heading);
10452
11121
  section.appendChild(header);
10453
- const comment1 = context.dom.createElement('p');
10454
- comment1.id = 'edit-profile-communities-description';
10455
- comment1.classList.add('p-md');
10456
- comment1.textContent = 'These are organizations and projects whose stuff you share';
10457
- section.appendChild(comment1);
10458
- let comment2 = null;
10459
11122
  if (editableProfile) {
10460
- comment2 = context.dom.createElement('p');
10461
- comment2.id = 'edit-profile-communities-help';
10462
- comment2.classList.add('p-md');
10463
- comment2.textContent = 'Drag organizations onto the target below to add organizations.';
10464
- section.appendChild(comment2);
10465
- }
10466
- const attachmentList = _solidUi.widgets.attachmentList(context.dom, me, section, {
10467
- doc: profile,
10468
- modify: !!editableProfile,
10469
- predicate: _solidUi.ns.solid('community'),
10470
- noun: 'community'
10471
- });
10472
- const descriptions = [comment1.id];
10473
- if (comment2?.id) {
10474
- descriptions.push(comment2.id);
11123
+ let plusButtonDiv = context.dom.createElement('div');
11124
+ plusButtonDiv.classList.add('add-community-button-container');
11125
+ createAddButton(plusButtonDiv, context);
11126
+ section.appendChild(plusButtonDiv);
11127
+ }
11128
+ const attachmentOuter = section.appendChild(context.dom.createElement('table'));
11129
+ attachmentOuter.classList.add('edit-community-attachment-outer');
11130
+ const attachmentOne = attachmentOuter.appendChild(context.dom.createElement('tr'));
11131
+ const attachmentRight = attachmentOne.appendChild(context.dom.createElement('td'));
11132
+ const attachmentTable = attachmentRight.appendChild(context.dom.createElement('table'));
11133
+ attachmentTable.classList.add('attachmentTable', 'table', 'table-striped', 'table-hover');
11134
+ attachmentOuter.refresh = (0, _editProfilePresenter.refresh)(context.dom, attachmentTable, me, editableProfile, _solidUi.ns.solid('community')); // Participate in downstream changes
11135
+
11136
+ (0, _editProfilePresenter.refresh)(context.dom, attachmentTable, me, editableProfile, _solidUi.ns.solid('community'));
11137
+ function createAddButton(buttonContainer, context) {
11138
+ const plus = buttonContainer.appendChild(_solidUi.widgets.button(context.dom, GREEN_PLUS, 'Add a project or community', greenButtonHandler));
11139
+ const predicate = _solidUi.ns.solid('community');
11140
+ plus.setAttribute('class', 'add-button');
11141
+ plus.setAttribute('aria-label', 'Add a new community');
11142
+ const span = context.dom.createElement('span');
11143
+ span.textContent = 'Add a community or project'; // for screen readers
11144
+ span.setAttribute('class', 'span');
11145
+ buttonContainer.appendChild(span);
11146
+ async function greenButtonHandler(_event) {
11147
+ const webid = await _solidUi.widgets.askName(context.dom, _solidLogic.store, buttonContainer, predicate, undefined, 'WebID of');
11148
+ if (!webid || !(0, _editProfilePresenter.isAWebID)(webid)) {
11149
+ return; // cancelled by user
11150
+ }
11151
+ return (0, _addMeToYourFriends.saveNewThing)(webid, context, predicate).then(() => {
11152
+ (0, _editProfilePresenter.refresh)(context.dom, attachmentTable, me, editableProfile, predicate); // Update the button state after adding a community
11153
+ }).catch(error => {
11154
+ (0, _buttonsHelper.clearPreviousMessage)(buttonContainer);
11155
+ (0, _buttonsHelper.complain)(buttonContainer, context, error);
11156
+ });
11157
+ }
10475
11158
  }
10476
- attachmentList.setAttribute('aria-describedby', descriptions.join(' '));
10477
- section.appendChild(attachmentList);
10478
11159
  return section;
10479
11160
  }
10480
11161
 
@@ -10548,7 +11229,14 @@ Object.defineProperty(exports, "__esModule", ({
10548
11229
  exports.EditFriendsSection = EditFriendsSection;
10549
11230
  var _solidUi = __webpack_require__(9426);
10550
11231
  var _texts = __webpack_require__(1363);
10551
- function EditFriendsSection(context, me, editableProfile, profile) {
11232
+ var _addMeToYourFriends = __webpack_require__(4695);
11233
+ __webpack_require__(8434);
11234
+ __webpack_require__(6433);
11235
+ var _solidLogic = __webpack_require__(5663);
11236
+ var _buttonsHelper = __webpack_require__(4198);
11237
+ var _editProfilePresenter = __webpack_require__(6444);
11238
+ const GREEN_PLUS = _solidUi.icons.iconBase + 'noun_34653_green.svg';
11239
+ function EditFriendsSection(context, me, editableProfile) {
10552
11240
  const section = context.dom.createElement('section');
10553
11241
  section.setAttribute('aria-labelledby', 'edit-profile-friends-heading');
10554
11242
  section.classList.add('profileSection', 'section-bg');
@@ -10560,31 +11248,59 @@ function EditFriendsSection(context, me, editableProfile, profile) {
10560
11248
  heading.textContent = _texts.friendsHeadingText;
10561
11249
  header.appendChild(heading);
10562
11250
  section.appendChild(header);
10563
- const comment1 = context.dom.createElement('p');
10564
- comment1.id = 'edit-profile-friends-description';
10565
- comment1.classList.add('p-md');
10566
- comment1.textContent = 'This is your public social network. Only put people here to whom you are happy to be publicly connected. (You can always keep private track of friends and family in your contacts.)';
10567
- section.appendChild(comment1);
10568
- let comment2 = null;
10569
11251
  if (editableProfile) {
10570
- comment2 = context.dom.createElement('p');
10571
- comment2.id = 'edit-profile-friends-help';
10572
- comment2.classList.add('p-md');
10573
- comment2.textContent = 'Drag people onto the target below to add people.';
10574
- section.appendChild(comment2);
10575
- }
10576
- const attachmentList = _solidUi.widgets.attachmentList(context.dom, me, section, {
10577
- doc: profile,
10578
- modify: !!editableProfile,
10579
- predicate: _solidUi.ns.foaf('knows'),
10580
- noun: 'friend'
10581
- });
10582
- const descriptions = [comment1.id];
10583
- if (comment2?.id) {
10584
- descriptions.push(comment2.id);
11252
+ let plusButtonDiv = context.dom.createElement('div');
11253
+ plusButtonDiv.classList.add('add-friend-button-container');
11254
+ createAddButton(plusButtonDiv, context);
11255
+ section.appendChild(plusButtonDiv);
11256
+ }
11257
+ const attachmentOuter = section.appendChild(context.dom.createElement('table'));
11258
+ attachmentOuter.classList.add('edit-friends-attachment-outer');
11259
+ const attachmentOne = attachmentOuter.appendChild(context.dom.createElement('tr'));
11260
+ const attachmentRight = attachmentOne.appendChild(context.dom.createElement('td'));
11261
+ const attachmentTable = attachmentRight.appendChild(context.dom.createElement('table'));
11262
+ attachmentTable.classList.add('attachmentTable', 'table', 'table-striped', 'table-hover');
11263
+ attachmentOuter.refresh = (0, _editProfilePresenter.refresh)(context.dom, attachmentTable, me, editableProfile, _solidUi.ns.foaf('knows')); // Participate in downstream changes
11264
+
11265
+ (0, _editProfilePresenter.refresh)(context.dom, attachmentTable, me, editableProfile, _solidUi.ns.foaf('knows'));
11266
+ function createAddButton(buttonContainer, context) {
11267
+ const plus = buttonContainer.appendChild(_solidUi.widgets.button(context.dom, GREEN_PLUS, 'Add a friend', greenButtonHandler));
11268
+ const predicate = _solidUi.ns.foaf('knows');
11269
+ plus.setAttribute('class', 'add-button');
11270
+ plus.setAttribute('aria-label', 'Add a friend');
11271
+ const span = context.dom.createElement('span');
11272
+ span.textContent = 'Add a friend'; // for screen readers
11273
+ span.setAttribute('class', 'span');
11274
+ buttonContainer.appendChild(span);
11275
+ async function greenButtonHandler(_event) {
11276
+ const webid = await _solidUi.widgets.askName(context.dom, _solidLogic.store, buttonContainer, predicate, undefined, 'WebID of the friend you');
11277
+ if (!webid) {
11278
+ return;
11279
+ }
11280
+ try {
11281
+ new URL(webid);
11282
+ } catch {
11283
+ (0, _buttonsHelper.complain)(buttonContainer, context, 'Not a URL');
11284
+ return;
11285
+ }
11286
+ try {
11287
+ await _solidLogic.store.fetcher.load(_solidLogic.store.sym(webid));
11288
+ } catch {
11289
+ (0, _buttonsHelper.complain)(buttonContainer, context, 'Not a valid WebID');
11290
+ return;
11291
+ }
11292
+ if (!(0, _editProfilePresenter.isAWebID)(_solidLogic.store.sym(webid))) {
11293
+ (0, _buttonsHelper.complain)(buttonContainer, context, 'WebID does not seem to exist');
11294
+ return;
11295
+ }
11296
+ return (0, _addMeToYourFriends.saveNewThing)(webid, context, predicate).then(() => {
11297
+ (0, _editProfilePresenter.refresh)(context.dom, attachmentTable, me, editableProfile, predicate); // Update the button state after adding a friend
11298
+ }).catch(error => {
11299
+ (0, _buttonsHelper.clearPreviousMessage)(buttonContainer);
11300
+ (0, _buttonsHelper.complain)(buttonContainer, context, error);
11301
+ });
11302
+ }
10585
11303
  }
10586
- attachmentList.setAttribute('aria-describedby', descriptions.join(' '));
10587
- section.appendChild(attachmentList);
10588
11304
  return section;
10589
11305
  }
10590
11306
 
@@ -10604,7 +11320,7 @@ var _rdfFormsHelper = _interopRequireDefault(__webpack_require__(7824));
10604
11320
  var _texts = __webpack_require__(1363);
10605
11321
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
10606
11322
  /* babel-plugin-inline-import '../ontology/otherPreferencesForm.ttl' */
10607
- const otherPreferencesForm = "@prefix os: <http://www.w3.org/2000/10/swap/os#> .\n@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>.\n@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#>.\n\n@prefix owl: <http://www.w3.org/2002/07/owl#>.\n@prefix solid: <http://www.w3.org/ns/solid/terms#>.\n@prefix ui: <http://www.w3.org/ns/ui#>.\n@prefix schema: <http://schema.org/>.\n@prefix foaf: <http://xmlns.com/foaf/0.1/>.\n@prefix vcard: <http://www.w3.org/2006/vcard/ns#>.\n@prefix wd: <http://www.wikidata.org/entity/>.\n@prefix wdt: <http://www.wikidata.org/prop/direct/>.\n\n@prefix : <#>.\n\n\n:this\n <http://purl.org/dc/elements/1.1/title> \"Other preferences form\" ;\n a ui:Form ;\n ui:parts (\n :styleGroup\n ).\n\n:styleGroup a ui:Group; ui:weight 0; \n ui:parts ( :styleHeading :backgroundColor :highlightColor ).\n\n:styleHeading a ui:Heading; ui:contents \"The style of your public profile.\".\n\n:backgroundColor a ui:ColorField; ui:property solid:profileBackgroundColor;\n ui:label \"Background color\"; ui:default \"#ffffff\".\n:highlightColor a ui:ColorField; ui:property solid:profileHighlightColor;\n ui:label \"Highlight color\"; ui:default \"#000000\".";
11323
+ const otherPreferencesForm = "@prefix os: <http://www.w3.org/2000/10/swap/os#> .\n@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>.\n@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#>.\n\n@prefix owl: <http://www.w3.org/2002/07/owl#>.\n@prefix solid: <http://www.w3.org/ns/solid/terms#>.\n@prefix ui: <http://www.w3.org/ns/ui#>.\n@prefix schema: <http://schema.org/>.\n@prefix foaf: <http://xmlns.com/foaf/0.1/>.\n@prefix vcard: <http://www.w3.org/2006/vcard/ns#>.\n@prefix wd: <http://www.wikidata.org/entity/>.\n@prefix wdt: <http://www.wikidata.org/prop/direct/>.\n\n@prefix : <#>.\n\n\n:this\n <http://purl.org/dc/elements/1.1/title> \"Other preferences form\" ;\n a ui:Form ;\n ui:parts (\n :styleGroup\n ).\n\n:styleGroup a ui:Group; ui:weight 0; \n ui:parts ( :styleHeading :backgroundColor :highlightColor ).\n\n:styleHeading a ui:Heading; ui:contents \"The style of your public profile\".\n\n:backgroundColor a ui:ColorField; ui:property solid:profileBackgroundColor;\n ui:label \"Background color\"; ui:default \"#ffffff\".\n:highlightColor a ui:ColorField; ui:property solid:profileHighlightColor;\n ui:label \"Highlight color\"; ui:default \"#000000\".";
10608
11324
  const otherPreferencesFormName = 'otherPreferencesForm.ttl'; // The name of the form file
10609
11325
 
10610
11326
  function EditOtherPreferencesSection(context, me, editableProfile, store) {
@@ -10642,9 +11358,10 @@ var _EditFriendsCard = __webpack_require__(8308);
10642
11358
  var _EditSocialCard = __webpack_require__(9410);
10643
11359
  var _EditCommunitiesCard = __webpack_require__(8188);
10644
11360
  __webpack_require__(1930);
10645
- __webpack_require__(855);
11361
+ __webpack_require__(8434);
10646
11362
  var _EditCVCard = __webpack_require__(6016);
10647
11363
  var _EditOtherPreferences = __webpack_require__(7643);
11364
+ var _rdfFormsHelper = __webpack_require__(7824);
10648
11365
  /**
10649
11366
  * Profile Editing App Pane
10650
11367
  *
@@ -10733,10 +11450,13 @@ const editProfileView = {
10733
11450
  main.appendChild((0, _EditOtherPreferences.EditOtherPreferencesSection)(context, me, editableProfile, store));
10734
11451
 
10735
11452
  // People you know Section
10736
- main.appendChild((0, _EditFriendsCard.EditFriendsSection)(context, me, editableProfile, profile));
11453
+ main.appendChild((0, _EditFriendsCard.EditFriendsSection)(context, me, editableProfile));
10737
11454
 
10738
11455
  // Communities you participate in Section
10739
- main.appendChild((0, _EditCommunitiesCard.EditProfileCommunitiesSection)(context, me, editableProfile, profile));
11456
+ main.appendChild((0, _EditCommunitiesCard.EditProfileCommunitiesSection)(context, me, editableProfile));
11457
+
11458
+ // Ensure keyboard navigation skips labels (including those rendered as links).
11459
+ (0, _rdfFormsHelper.skipLabelsFromTabbing)(main);
10740
11460
  main.setAttribute('aria-busy', 'false');
10741
11461
  main.focus();
10742
11462
  }).catch(error => {
@@ -10781,12 +11501,7 @@ function EditSocialSection(context, me, editableProfile, store) {
10781
11501
  heading.textContent = _texts.socialAccountsHeadingText;
10782
11502
  header.appendChild(heading);
10783
11503
  section.appendChild(header);
10784
- if (editableProfile) {
10785
- const comment2 = context.dom.createElement('p');
10786
- comment2.classList.add('p-md');
10787
- comment2.textContent = 'Add links to your social media accounts here. These will be publicly visible on your profile.';
10788
- section.appendChild(comment2);
10789
- } else {
11504
+ if (!editableProfile) {
10790
11505
  const comment1 = context.dom.createElement('p');
10791
11506
  comment1.classList.add('p-md');
10792
11507
  comment1.textContent = 'Login to add social media accounts to your profile.';
@@ -10798,6 +11513,111 @@ function EditSocialSection(context, me, editableProfile, store) {
10798
11513
 
10799
11514
  /***/ },
10800
11515
 
11516
+ /***/ 6444
11517
+ (__unused_webpack_module, exports, __webpack_require__) {
11518
+
11519
+ "use strict";
11520
+
11521
+
11522
+ Object.defineProperty(exports, "__esModule", ({
11523
+ value: true
11524
+ }));
11525
+ exports.isAWebID = isAWebID;
11526
+ exports.refresh = refresh;
11527
+ var _rdflib = __webpack_require__(5491);
11528
+ var _solidLogic = __webpack_require__(5663);
11529
+ var _solidUi = __webpack_require__(9426);
11530
+ function refresh(dom, attachmentTable, me, editableProfile, predicate) {
11531
+ // Keep the RDF terms so downstream Solid-UI helpers (e.g. findImage) can call term.sameTerm().
11532
+ // We still sort by string value so the list order is stable.
11533
+ const friendsList = _solidLogic.store.each(me, predicate);
11534
+ // Ensure profiles are loaded before we render rows, otherwise widgets.findImage / utils.label may return empty.
11535
+ void (async () => {
11536
+ if (_solidLogic.store.fetcher) {
11537
+ await Promise.all(friendsList.map(friend => {
11538
+ if (!_solidLogic.store.holds(friend, null, null, null)) {
11539
+ return _solidLogic.store.fetcher?.load(friend.value).catch(() => undefined);
11540
+ }
11541
+ return Promise.resolve();
11542
+ }));
11543
+ }
11544
+ friendsList.sort((a, b) => a.value > b.value ? 1 : a.value < b.value ? -1 : 0);
11545
+ _solidUi.utils.syncTableToArray(attachmentTable, friendsList, target => createNewRow(dom, attachmentTable, target, me, editableProfile, predicate));
11546
+ })();
11547
+ }
11548
+ function createNewRow(dom, attachmentTable, target, me, editableProfile, predicate) {
11549
+ const theTarget = target;
11550
+ const profileImg = dom.createElement('img');
11551
+ profileImg.classList.add('profile-image');
11552
+ profileImg.src = _solidUi.widgets.findImage((0, _rdflib.sym)(target));
11553
+ profileImg.alt = `Image of ${_solidUi.utils.label((0, _rdflib.sym)(target))}`;
11554
+ const opt = {
11555
+ image: profileImg,
11556
+ title: _solidUi.utils.label((0, _rdflib.sym)(target)),
11557
+ link: true
11558
+ };
11559
+ if (!!editableProfile) {
11560
+ opt.deleteFunction = function () {
11561
+ deleteAttachment(dom, attachmentTable, me, editableProfile, theTarget, predicate);
11562
+ };
11563
+ }
11564
+ return _solidUi.widgets.renderAsRow(dom, predicate, target, opt);
11565
+ }
11566
+ async function deleteAttachment(dom, attachmentTable, me, editableProfile, target, predicate) {
11567
+ if (!_solidLogic.store.updater) {
11568
+ throw new Error('Store has no updater.');
11569
+ }
11570
+
11571
+ // Delete the exact statements in the store so we don't rely on doc() matching
11572
+ const statementsToDelete = _solidLogic.store.statementsMatching(me, predicate, target, null);
11573
+ if (!statementsToDelete.length) {
11574
+ console.warn('No matching statement found to delete for', target.value);
11575
+ refresh(dom, attachmentTable, me, editableProfile, predicate);
11576
+ return;
11577
+ }
11578
+ try {
11579
+ await _solidLogic.store.updater.update(statementsToDelete, []);
11580
+
11581
+ // UpdateManager may mutate store asynchronously, so only remove locally if it still exists
11582
+ if (typeof _solidLogic.store.removeStatements === 'function') {
11583
+ const stillThere = _solidLogic.store.holds(me, predicate, target, null);
11584
+ if (stillThere) {
11585
+ try {
11586
+ _solidLogic.store.removeStatements(statementsToDelete);
11587
+ } catch (e) {
11588
+ // Ignore if already gone
11589
+ }
11590
+ }
11591
+ }
11592
+
11593
+ // Ensure store is up-to-date before re-rendering
11594
+ if (_solidLogic.store.fetcher) await _solidLogic.store.fetcher.load(me.doc());
11595
+ refresh(dom, attachmentTable, me, editableProfile, predicate);
11596
+ } catch (error) {
11597
+ console.error('Error deleting:', error);
11598
+
11599
+ // If update failed, try to keep UI in sync anyway
11600
+ if (typeof _solidLogic.store.removeStatements === 'function') {
11601
+ try {
11602
+ _solidLogic.store.removeStatements(statementsToDelete);
11603
+ } catch (e) {
11604
+ /* ignore */
11605
+ }
11606
+ }
11607
+ if (_solidLogic.store.fetcher) await _solidLogic.store.fetcher.load(me.doc());
11608
+ refresh(dom, attachmentTable, me, editableProfile, predicate);
11609
+ }
11610
+ }
11611
+ function isAWebID(subject) {
11612
+ if (subject && subject.doc) {
11613
+ const t = _solidLogic.store.findTypeURIs(subject.doc());
11614
+ return !!t[_solidUi.ns.foaf('PersonalProfileDocument').uri];
11615
+ }
11616
+ return false;
11617
+ }
11618
+
11619
+ /***/ },
11620
+
10801
11621
  /***/ 2643
10802
11622
  (__unused_webpack_module, exports, __webpack_require__) {
10803
11623
 
@@ -10970,6 +11790,7 @@ Object.defineProperty(exports, "__esModule", ({
10970
11790
  }));
10971
11791
  exports["default"] = renderForm;
10972
11792
  exports.loadDocument = loadDocument;
11793
+ exports.skipLabelsFromTabbing = skipLabelsFromTabbing;
10973
11794
  var _rdflib = __webpack_require__(5491);
10974
11795
  var _solidUi = __webpack_require__(9426);
10975
11796
  const baseUri = 'https://solidos.github.io/profile-pane/src/ontology/';
@@ -10990,8 +11811,112 @@ store, dom, editableProfile, whichForm) {
10990
11811
  _solidUi.widgets.appendForm(dom, div, {}, subject, formThis, editableProfile, (ok, mes) => {
10991
11812
  if (!ok) _solidUi.widgets.errorMessageBlock(dom, mes);
10992
11813
  });
11814
+
11815
+ // Ensure that when a user clicks “Add skill” or “Add language”, the newly
11816
+ // created input receives focus. Solid-UI provides only a generic "Add" button.
11817
+ // We detect the "add" control by the plus icon it uses and focus the last
11818
+ // text input in the surrounding multiple-field container.
11819
+ enableFocusOnAdd(div);
11820
+
11821
+ // Track the last click/tap position so popups (like solid-ui delete confirmations)
11822
+ // can be positioned closer to where the user clicked.
11823
+ let lastClick = {
11824
+ x: 0,
11825
+ y: 0
11826
+ };
11827
+ div.addEventListener('pointerdown', event => {
11828
+ lastClick = {
11829
+ x: event.clientX,
11830
+ y: event.clientY
11831
+ };
11832
+ }, {
11833
+ capture: true
11834
+ });
11835
+
11836
+ // Solid-UI injects a popup DIV (position:absolute, top:-1em) under a relative container.
11837
+ // Detect it and reposition it using last click coordinates.
11838
+ const repositionPopup = popup => {
11839
+ const win = dom.defaultView || window;
11840
+ const padding = 10;
11841
+ const maxWidth = win.innerWidth - padding;
11842
+ const maxHeight = win.innerHeight - padding;
11843
+
11844
+ // Force fixed positioning, then clamp to viewport so it doesn't get cut off.
11845
+ popup.style.position = 'fixed';
11846
+ popup.style.zIndex = '9999';
11847
+ popup.style.pointerEvents = 'auto';
11848
+ popup.style.opacity = '1';
11849
+ popup.style.visibility = 'visible';
11850
+
11851
+ // Use getBoundingClientRect after it is in DOM; if it is 0x0, fall back to default offset.
11852
+ const rect = popup.getBoundingClientRect();
11853
+ const popupWidth = rect.width || 200;
11854
+ const popupHeight = rect.height || 100;
11855
+ const left = Math.min(Math.max(lastClick.x + padding, padding), maxWidth - popupWidth);
11856
+ const top = Math.min(Math.max(lastClick.y + padding, padding), maxHeight - popupHeight);
11857
+ popup.style.left = `${left}px`;
11858
+ popup.style.top = `${top}px`;
11859
+ };
11860
+ const observer = new MutationObserver(mutations => {
11861
+ for (const mutation of mutations) {
11862
+ for (const node of Array.from(mutation.addedNodes)) {
11863
+ if (!(node instanceof HTMLElement)) continue;
11864
+ // Solid-UI popups are divs with inline position:absolute and grid display
11865
+ if (node.style.position === 'absolute' && node.style.display === 'grid' && node.style.top === '-1em') {
11866
+ repositionPopup(node);
11867
+ continue;
11868
+ }
11869
+ // Also handle nested cases where the popup is not the direct added node
11870
+ const popup = node.querySelector('div[style*="position:absolute"][style*="display:grid"][style*="top:-1em"]');
11871
+ if (popup) repositionPopup(popup);
11872
+ }
11873
+ }
11874
+ });
11875
+ observer.observe(div, {
11876
+ childList: true,
11877
+ subtree: true
11878
+ });
10993
11879
  } // renderForm
10994
11880
 
11881
+ function enableFocusOnAdd(root) {
11882
+ const PLUS_ICON = 'noun_19460_green.svg';
11883
+ const isAddButton = el => {
11884
+ const img = el.querySelector('img');
11885
+ const label = el.querySelector('span');
11886
+ return img?.src.includes(PLUS_ICON) && label?.textContent?.trim().toLowerCase().startsWith('add ');
11887
+ };
11888
+ const buttons = Array.from(root.querySelectorAll('div')).filter(isAddButton);
11889
+ buttons.forEach(btn => {
11890
+ btn.addEventListener('click', () => {
11891
+ const scope = function findScope(el) {
11892
+ let cur = el;
11893
+ while (cur && cur !== root) {
11894
+ if (cur.querySelector('input[data-testid="autocomplete-input"]')) return cur;
11895
+ cur = cur.parentElement;
11896
+ }
11897
+ return root;
11898
+ }(btn);
11899
+ const before = new Set(Array.from(scope.querySelectorAll('input[data-testid="autocomplete-input"]')));
11900
+ const start = Date.now();
11901
+ const interval = setInterval(() => {
11902
+ const current = Array.from(scope.querySelectorAll('input[data-testid="autocomplete-input"]'));
11903
+ const newInput = current.find(el => !before.has(el));
11904
+ if (newInput) {
11905
+ // New inputs are usually wrapped in a label/link; make sure focus jumps
11906
+ // straight to the input rather than the label link.
11907
+ skipLabelsFromTabbing(scope);
11908
+ newInput.focus();
11909
+ clearInterval(interval);
11910
+ return;
11911
+ }
11912
+ if (Date.now() - start > 1000) {
11913
+ clearInterval(interval);
11914
+ }
11915
+ }, 50);
11916
+ });
11917
+ });
11918
+ }
11919
+
10995
11920
  // we need to load into the store some additional information about Social Media accounts
10996
11921
  function loadDocument(store, documentSource, documentName, documentURI) {
10997
11922
  const finalDocumentUri = documentURI || baseUri + documentName; // Full URI to the file
@@ -11003,6 +11928,26 @@ function loadDocument(store, documentSource, documentName, documentURI) {
11003
11928
  (0, _rdflib.parse)(documentSource, store, finalDocumentUri, 'text/turtle', () => null); // Load doc directly
11004
11929
  }
11005
11930
  }
11931
+ function skipLabelsFromTabbing(root) {
11932
+ // Many Solid-UI forms render field labels as focusable links (hrefs).
11933
+ // Make sure keyboard tabbing skips these label links entirely.
11934
+ const selectors = ['label', '.formFieldName a', '.classifierBox-label a', '.choiceBox-label a', '.label a',
11935
+ // Skip focusable label-like links created by Solid-UI forms, including the vcard note link
11936
+ 'a[href="http://www.w3.org/2006/vcard/ns#note"]', 'a[href$="#note"]'].join(', ');
11937
+
11938
+ // querySelectorAll<HTMLElement> ensures the elements are typed correctly so we can access tabIndex.
11939
+ const nodes = root?.querySelectorAll(selectors);
11940
+ if (!nodes) return;
11941
+ Array.from(nodes).forEach(el => {
11942
+ if (typeof el.tabIndex === 'number' && el.tabIndex !== -1) {
11943
+ el.tabIndex = -1;
11944
+ }
11945
+ // Ensure those label links are not announced as focusable elements
11946
+ if (el.getAttribute('aria-hidden') !== 'true') {
11947
+ el.setAttribute('aria-hidden', 'true');
11948
+ }
11949
+ });
11950
+ }
11006
11951
 
11007
11952
  /***/ },
11008
11953
 
@@ -31968,7 +32913,57 @@ var update = _style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMP
31968
32913
 
31969
32914
  /***/ },
31970
32915
 
31971
- /***/ 855
32916
+ /***/ 6433
32917
+ (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
32918
+
32919
+ "use strict";
32920
+ __webpack_require__.r(__webpack_exports__);
32921
+ /* harmony export */ __webpack_require__.d(__webpack_exports__, {
32922
+ /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
32923
+ /* harmony export */ });
32924
+ /* harmony import */ var _style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5072);
32925
+ /* harmony import */ var _style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__);
32926
+ /* harmony import */ var _style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(7825);
32927
+ /* harmony import */ var _style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__);
32928
+ /* harmony import */ var _style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7659);
32929
+ /* harmony import */ var _style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__);
32930
+ /* harmony import */ var _style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(5056);
32931
+ /* harmony import */ var _style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__);
32932
+ /* harmony import */ var _style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(540);
32933
+ /* harmony import */ var _style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__);
32934
+ /* harmony import */ var _style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(1113);
32935
+ /* harmony import */ var _style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__);
32936
+ /* harmony import */ var _css_loader_dist_cjs_js_editProfile_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(9340);
32937
+
32938
+
32939
+
32940
+
32941
+
32942
+
32943
+
32944
+
32945
+
32946
+
32947
+
32948
+ var options = {};
32949
+
32950
+ options.styleTagTransform = (_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default());
32951
+ options.setAttributes = (_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default());
32952
+ options.insert = _style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default().bind(null, "head");
32953
+ options.domAPI = (_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default());
32954
+ options.insertStyleElement = (_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default());
32955
+
32956
+ var update = _style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_css_loader_dist_cjs_js_editProfile_css__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A, options);
32957
+
32958
+
32959
+
32960
+
32961
+ /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_css_loader_dist_cjs_js_editProfile_css__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A && _css_loader_dist_cjs_js_editProfile_css__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A.locals ? _css_loader_dist_cjs_js_editProfile_css__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A.locals : undefined);
32962
+
32963
+
32964
+ /***/ },
32965
+
32966
+ /***/ 8434
31972
32967
  (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
31973
32968
 
31974
32969
  "use strict";
@@ -31988,7 +32983,7 @@ __webpack_require__.r(__webpack_exports__);
31988
32983
  /* harmony import */ var _style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__);
31989
32984
  /* harmony import */ var _style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(1113);
31990
32985
  /* harmony import */ var _style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__);
31991
- /* harmony import */ var _css_loader_dist_cjs_js_rdfFormsEnforced_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(2024);
32986
+ /* harmony import */ var _css_loader_dist_cjs_js_profileRDFFormsEnforced_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(7347);
31992
32987
 
31993
32988
 
31994
32989
 
@@ -32008,12 +33003,12 @@ options.insert = _style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTE
32008
33003
  options.domAPI = (_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default());
32009
33004
  options.insertStyleElement = (_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default());
32010
33005
 
32011
- var update = _style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_css_loader_dist_cjs_js_rdfFormsEnforced_css__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A, options);
33006
+ var update = _style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_css_loader_dist_cjs_js_profileRDFFormsEnforced_css__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A, options);
32012
33007
 
32013
33008
 
32014
33009
 
32015
33010
 
32016
- /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_css_loader_dist_cjs_js_rdfFormsEnforced_css__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A && _css_loader_dist_cjs_js_rdfFormsEnforced_css__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A.locals ? _css_loader_dist_cjs_js_rdfFormsEnforced_css__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A.locals : undefined);
33011
+ /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_css_loader_dist_cjs_js_profileRDFFormsEnforced_css__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A && _css_loader_dist_cjs_js_profileRDFFormsEnforced_css__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A.locals ? _css_loader_dist_cjs_js_profileRDFFormsEnforced_css__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A.locals : undefined);
32017
33012
 
32018
33013
 
32019
33014
  /***/ },
@@ -46611,9 +47606,53 @@ const schedulePane = {
46611
47606
  const showForms = function () {
46612
47607
  clearElement(naviCenter) // Remove refresh button if nec
46613
47608
  const div = naviMain
47609
+
47610
+ // form2 depends on sched:allDay; seed a local default for new polls
47611
+ if (!kb.any(subject, ns.sched('allDay'))) {
47612
+ kb.add(
47613
+ subject,
47614
+ ns.sched('allDay'),
47615
+ external_rdflib_.literal(
47616
+ 'true',
47617
+ undefined,
47618
+ external_rdflib_.sym('http://www.w3.org/2001/XMLSchema#boolean')
47619
+ ),
47620
+ detailsDoc
47621
+ )
47622
+ }
47623
+
46614
47624
  const wizard = true
46615
47625
  let currentSlide = 0
46616
47626
  let gotDoneButton = false
47627
+
47628
+ const hasFormControls = function (container) {
47629
+ return !!container.querySelector('input, select, textarea, button')
47630
+ }
47631
+
47632
+ const asBoolean = function (term, fallback) {
47633
+ if (!term) return fallback
47634
+ const value = (term.value || '').toLowerCase()
47635
+ if (value === 'true' || value === '1') return true
47636
+ if (value === 'false' || value === '0') return false
47637
+ return fallback
47638
+ }
47639
+
47640
+ const renderTimeProposalFallback = function (slide) {
47641
+ const allDayValue = asBoolean(kb.any(subject, ns.sched('allDay')), true)
47642
+ const fallbackForm = kb.sym(
47643
+ formsURI + (allDayValue ? '#AllDayForm2' : '#NotAllDayForm2')
47644
+ )
47645
+ external_UI_.widgets.appendForm(
47646
+ document,
47647
+ slide,
47648
+ {},
47649
+ subject,
47650
+ fallbackForm,
47651
+ detailsDoc,
47652
+ complainIfBad
47653
+ )
47654
+ }
47655
+
46617
47656
  if (wizard) {
46618
47657
  const forms = [form1, form2, form3]
46619
47658
  const slides = []
@@ -46629,6 +47668,12 @@ const schedulePane = {
46629
47668
  detailsDoc,
46630
47669
  complainIfBad
46631
47670
  )
47671
+
47672
+ // Some stores end up with form2's ui:Options unresolved; force a usable input form.
47673
+ if (f === 1 && !hasFormControls(slide)) {
47674
+ renderTimeProposalFallback(slide)
47675
+ }
47676
+
46632
47677
  slides.push(slide)
46633
47678
  }
46634
47679
 
@@ -46936,7 +47981,7 @@ const schedulePane = {
46936
47981
 
46937
47982
  // Read or create empty results file
46938
47983
  function getResults () {
46939
- fetcher.nowOrWhenFetched(resultsDoc.uri, (ok, body, response) => {
47984
+ fetcher.nowOrWhenFetched(resultsDoc.uri, undefined, (ok, body, response) => {
46940
47985
  if (!ok) {
46941
47986
  if (response.status === 404) {
46942
47987
  // / Check explicitly for 404 error
@@ -47022,11 +48067,15 @@ const schedulePane = {
47022
48067
  options.set_x = kb.each(subject, ns.sched('option')) // @@@@@ option -> dtstart in future
47023
48068
  options.set_x = options.set_x.map(function (opt) {
47024
48069
  return kb.any(opt, ns.cal('dtstart'))
48070
+ }).filter(function (time) {
48071
+ return !!time
47025
48072
  })
47026
48073
 
47027
48074
  options.set_y = kb.each(subject, ns.sched('response'))
47028
48075
  options.set_y = options.set_y.map(function (resp) {
47029
48076
  return kb.any(resp, ns.dc('author'))
48077
+ }).filter(function (author) {
48078
+ return !!author
47030
48079
  })
47031
48080
 
47032
48081
  const possibleTimes = kb
@@ -47034,6 +48083,9 @@ const schedulePane = {
47034
48083
  .map(function (opt) {
47035
48084
  return kb.any(opt, ns.cal('dtstart'))
47036
48085
  })
48086
+ .filter(function (time) {
48087
+ return !!time
48088
+ })
47037
48089
 
47038
48090
  const displayTheMatrix = function () {
47039
48091
  const matrix = div.appendChild(
@@ -47109,6 +48161,7 @@ const schedulePane = {
47109
48161
  } // @@ may need that
47110
48162
  const selectOptions = {}
47111
48163
  const predicate = ns.sched('availabilty')
48164
+ if (!x) return
47112
48165
  const cellSubject = dataPointForNT[x.toNT()]
47113
48166
  const selector = external_UI_.widgets.makeSelectForOptions(
47114
48167
  dom,
@@ -47147,19 +48200,22 @@ const schedulePane = {
47147
48200
  const dps = kb.each(myResponse, ns.sched('cell'))
47148
48201
  dps.forEach(function (dataPoint) {
47149
48202
  const time = kb.any(dataPoint, ns.cal('dtstart'))
48203
+ if (!time) return
47150
48204
  dataPointForNT[time.toNT()] = dataPoint
47151
48205
  })
47152
48206
  }
47153
48207
  for (let j = 0; j < possibleTimes.length; j++) {
47154
- if (dataPointForNT[possibleTimes[j].toNT()]) continue
48208
+ const possibleTime = possibleTimes[j]
48209
+ if (!possibleTime) continue
48210
+ if (dataPointForNT[possibleTime.toNT()]) continue
47155
48211
  const dataPoint = external_rdflib_.sym(id + '_' + j)
47156
48212
  insertables.push(
47157
48213
  external_rdflib_.st(myResponse, ns.sched('cell'), dataPoint, doc)
47158
48214
  )
47159
48215
  insertables.push(
47160
- external_rdflib_.st(dataPoint, ns.cal('dtstart'), possibleTimes[j], doc)
48216
+ external_rdflib_.st(dataPoint, ns.cal('dtstart'), possibleTime, doc)
47161
48217
  ) // @@
47162
- dataPointForNT[possibleTimes[j].toNT()] = dataPoint
48218
+ dataPointForNT[possibleTime.toNT()] = dataPoint
47163
48219
  }
47164
48220
  if (insertables.length) {
47165
48221
  kb.updater.update([], insertables, function (
@@ -48968,7 +50024,7 @@ Please report this to https://github.com/markedjs/marked.`,e){let r="<p>An error
48968
50024
  //# sourceMappingURL=marked.esm.js.map
48969
50025
 
48970
50026
  ;// ./node_modules/dompurify/dist/purify.es.mjs
48971
- /*! @license DOMPurify 3.3.1 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.3.1/LICENSE */
50027
+ /*! @license DOMPurify 3.3.3 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.3.3/LICENSE */
48972
50028
 
48973
50029
  const {
48974
50030
  entries,
@@ -49275,7 +50331,7 @@ const _createHooksMap = function _createHooksMap() {
49275
50331
  function createDOMPurify() {
49276
50332
  let window = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getGlobal();
49277
50333
  const DOMPurify = root => createDOMPurify(root);
49278
- DOMPurify.version = '3.3.1';
50334
+ DOMPurify.version = '3.3.3';
49279
50335
  DOMPurify.removed = [];
49280
50336
  if (!window || !window.document || window.document.nodeType !== NODE_TYPE.document || !window.Element) {
49281
50337
  // Not running in a browser, provide a factory function
@@ -49570,7 +50626,7 @@ function createDOMPurify() {
49570
50626
  /* Parse profile info */
49571
50627
  if (USE_PROFILES) {
49572
50628
  ALLOWED_TAGS = addToSet({}, purify_es_text);
49573
- ALLOWED_ATTR = [];
50629
+ ALLOWED_ATTR = purify_es_create(null);
49574
50630
  if (USE_PROFILES.html === true) {
49575
50631
  addToSet(ALLOWED_TAGS, html$1);
49576
50632
  addToSet(ALLOWED_ATTR, html);
@@ -49591,6 +50647,13 @@ function createDOMPurify() {
49591
50647
  addToSet(ALLOWED_ATTR, xml);
49592
50648
  }
49593
50649
  }
50650
+ /* Prevent function-based ADD_ATTR / ADD_TAGS from leaking across calls */
50651
+ if (!objectHasOwnProperty(cfg, 'ADD_TAGS')) {
50652
+ EXTRA_ELEMENT_HANDLING.tagCheck = null;
50653
+ }
50654
+ if (!objectHasOwnProperty(cfg, 'ADD_ATTR')) {
50655
+ EXTRA_ELEMENT_HANDLING.attributeCheck = null;
50656
+ }
49594
50657
  /* Merge configuration parameters */
49595
50658
  if (cfg.ADD_TAGS) {
49596
50659
  if (typeof cfg.ADD_TAGS === 'function') {
@@ -49988,6 +51051,10 @@ function createDOMPurify() {
49988
51051
  */
49989
51052
  // eslint-disable-next-line complexity
49990
51053
  const _isValidAttribute = function _isValidAttribute(lcTag, lcName, value) {
51054
+ /* FORBID_ATTR must always win, even if ADD_ATTR predicate would allow it */
51055
+ if (FORBID_ATTR[lcName]) {
51056
+ return false;
51057
+ }
49991
51058
  /* Make sure attribute cannot clobber */
49992
51059
  if (SANITIZE_DOM && (lcName === 'id' || lcName === 'name') && (value in document || value in formElement)) {
49993
51060
  return false;
@@ -50080,7 +51147,7 @@ function createDOMPurify() {
50080
51147
  value = SANITIZE_NAMED_PROPS_PREFIX + value;
50081
51148
  }
50082
51149
  /* Work around a security issue with comments inside attributes */
50083
- if (SAFE_FOR_XML && regExpTest(/((--!?|])>)|<\/(style|title|textarea)/i, value)) {
51150
+ if (SAFE_FOR_XML && regExpTest(/((--!?|])>)|<\/(style|script|title|xmp|textarea|noscript|iframe|noembed|noframes)/i, value)) {
50084
51151
  _removeAttribute(name, currentNode);
50085
51152
  continue;
50086
51153
  }