profile-pane 3.2.3-0 → 3.2.3-2

package/lib/sections/projects/ProjectSection.css

@@ -1,28 +1,23 @@
-/* Projects section styles. */
-
 .profile__section[data-profile-section='projects'],
 .profile__section--empty[data-profile-section='projects'] {
-  --project-card-rail-gap: var(--spacing-md, 1rem);
   --project-card-rail-wrap: nowrap;
   --project-card-rail-overflow-x: auto;
   --project-card-rail-scroll-snap-type: x proximity;
   --project-card-flex-basis: min(420px, 88vw);
   --project-card-flex: 0 0 var(--project-card-flex-basis);
   --project-card-max-width: none;
-  --project-card-scrollbar-height: 0.5rem;
+  --project-card-scrollbar-height: 8px;
   --project-card-thumb-column-width: 88px;
   --project-card-thumb-size: 4.125rem;
-  --project-card-follow-label-gap: var(--spacing-xxs, 0.3125rem);
-  --project-card-wrapper-gap: var(--spacing-2xs, 0.625rem);
-  --project-card-content-gap: var(--spacing-xxs, 0.3125rem);
-  --project-card-heading-gap: 0.1875rem;
-  --project-card-meta-margin-top: var(--spacing-xs, 0.75rem);
+  --project-card-follow-label-gap: 5px;
+  --project-card-wrapper-gap: 10px;
+  --project-card-content-gap: 5px;
+  --project-card-heading-gap: 3px;
+  --project-card-meta-margin-top: 12px;
   --project-card-meta-font-size: 0.86rem;
-  --project-card-footer-padding: var(--spacing-xs, 0.75rem);
-  --project-card-more-button-gap: var(--spacing-xs, 0.375rem);
   --project-card-more-button-width: auto;
   --project-card-more-button-part-width: auto;
-  --project-card-mobile-more-button-margin-top: var(--spacing-xs, 0.75rem);
+  --project-card-mobile-more-button-margin-top: 12px;
   --project-card-more-button-margin-top: 0;
   --project-card-collapsed-extra-display: flex;
   --project-card-more-icon-transform: rotate(0deg);
@@ -31,7 +26,7 @@
 /* Rail and cards */
 .project-card__rail {
   display: flex;
-  gap: var(--project-card-rail-gap);
+  gap: 20px;
   overflow-x: var(--project-card-rail-overflow-x, auto);
   padding: 0;
   margin: 0;
@@ -40,24 +35,6 @@
   scroll-snap-type: var(--project-card-rail-scroll-snap-type, x proximity);
 }
 
-solid-ui-button.project-card__follow-button {
-  width: auto;
-  min-width: 0;
-  max-width: none;
-  gap: var(--project-card-follow-label-gap);
-  --button-border-width: var(--border-width-sm, 0.1rem);
-  --button-font-size-sm: var(--font-size-sm, 0.875rem);
-  --button-font-weight: var(--font-weight-md, 500);
-  --button-padding-sm: var(--spacing-base, 0.5rem) var(--spacing-2xs, 0.625rem);
-  --button-border-radius: var(--border-radius-md, 0.5rem);
-  --button-background: var(--color-card-bg, var(--white, #FFF));
-  --button-text: var(--color-primary, #7C4DFF);
-  --button-border: var(--color-primary, #7C4DFF);
-  --button-hover-background: var(--color-primary, #7C4DFF);
-  --button-hover-text: var(--color-text-on-action, var(--white, #FFF));
-  --button-hover-border: var(--color-primary, #7C4DFF);
-}
-
 .project-card__follow-label {
   display: inline-flex;
   align-items: center;
@@ -86,25 +63,19 @@ solid-ui-button.project-card__follow-button:focus-within .project-card__follow-l
   display: inline-flex;
 }
 
-solid-ui-button.project-card__follow-button[data-loading='true'] {
+solid-ui-button.project-card__follow-button[loading] {
   pointer-events: none;
 }
 
-solid-ui-button.project-card__follow-button[data-loading='true'] .project-card__follow-label--default,
-solid-ui-button.project-card__follow-button[data-loading='true'] .project-card__follow-label--hover {
+solid-ui-button.project-card__follow-button[loading] .project-card__follow-label--default,
+solid-ui-button.project-card__follow-button[loading] .project-card__follow-label--hover {
   display: none;
 }
 
-solid-ui-button.project-card__follow-button[data-loading='true'] .project-card__follow-label--loading {
+solid-ui-button.project-card__follow-button[loading] .project-card__follow-label--loading {
   display: inline-flex;
 }
 
-solid-ui-button.project-card__follow-button[data-loading='true'] .loading-spinner {
-  width: var(--icon-xxs, 1rem);
-  height: var(--icon-xxs, 1rem);
-  border-width: 0.125rem;
-}
-
 .project-card__rail::-webkit-scrollbar {
   height: var(--project-card-scrollbar-height);
 }
@@ -119,16 +90,16 @@ solid-ui-button.project-card__follow-button[data-loading='true'] .loading-spinne
   flex-direction: column;
   flex: var(--project-card-flex, 0 0 var(--project-card-flex-basis));
   width: 100%;
-  max-width: var(--project-card-max-width, none);
+  max-width: var(--project-card-max-width);
   min-width: 0;
   box-sizing: border-box;
   scroll-snap-align: start;
-  border-radius: var(--border-radius-md, 0.5rem);
-  border: var(--border-width-sm, 0.1rem) solid var(--color-border, var(--gray-200, #E5E7EB));
-  padding: var(--spacing-md, 1.25rem);
+  border-radius: 8px;
+  border: 1px solid var(--color-border, var(--gray-200, #E5E7EB));
+  padding: 20px;
   justify-content: center;
   align-items: flex-start;
-  gap: var(--spacing-sm, 0.938rem);
+  gap: 15px;
   flex-shrink: 0;
 }
 
@@ -151,7 +122,7 @@ solid-ui-button.project-card__follow-button[data-loading='true'] .loading-spinne
   gap: var(--project-card-wrapper-gap);
   width: 100%;
   align-items: start;
-  border-radius: var(--border-radius-md, 0.5rem);
+  border-radius: 8px;
   border-bottom: 1px solid var(--color-border, var(--gray-200, #E5E7EB));
 }
 
@@ -162,9 +133,9 @@ solid-ui-button.project-card__follow-button[data-loading='true'] .loading-spinne
   width: var(--project-card-thumb-size);
   height: var(--project-card-thumb-size);
   overflow: hidden;
-  border-radius: var(--border-radius-base, 0.3125rem);
+  border-radius: 8px;
   background: var(--color-surface-placeholder, var(--gray-200, #E5E7EB));
-  padding: 0.656rem var(--spacing-2xs, 0.625rem);
+  padding: 10.5px 10px;
   aspect-ratio: 1/1;
 }
 
@@ -213,8 +184,8 @@ solid-ui-button.project-card__follow-button[data-loading='true'] .loading-spinne
   overflow: hidden;
   color: var(--color-text-subheading, var(--gray-900, #101828));
   text-overflow: ellipsis;
-  font-size: var(--font-size-lg, 1.125rem);
-  font-weight: var(--font-weight-bold, 600);
+  font-size: var(--solid-ui-font-size-lg, 1.125rem);
+  font-weight: 600;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
@@ -223,9 +194,9 @@ solid-ui-button.project-card__follow-button[data-loading='true'] .loading-spinne
 }
 
 .project-card__organization {
-  color: var(--color-text-primary, var(--gray-700, #364153));
-  font-size: var(--font-size-sm, 0.875rem);
-  font-weight: var(--font-weight-md, 500);
+  color: var(--solid-ui-color-gray-700, #364153);
+  font-size: var(--solid-ui-font-size-sm, 0.875rem);
+  font-weight: 500;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
@@ -237,8 +208,8 @@ solid-ui-button.project-card__follow-button[data-loading='true'] .loading-spinne
 }
 
 .project-card__category {
-  font-size: var(--font-size-xxs, 0.75rem);
-  font-weight: var(--font-weight-md, 500);
+  font-size: 0.75rem;
+  font-weight: 500;
 }
 
 .project-card__category--project {
@@ -256,7 +227,7 @@ solid-ui-button.project-card__follow-button[data-loading='true'] .loading-spinne
 .project-card__meta {
   margin-top: var(--project-card-meta-margin-top);
   overflow-wrap: anywhere;
-  font-size: var(--project-card-meta-font-size, 0.86rem);
+  font-size: var(--project-card-meta-font-size);
 }
 
 .project-card__footer {
@@ -264,36 +235,21 @@ solid-ui-button.project-card__follow-button[data-loading='true'] .loading-spinne
   justify-content: flex-start;
   align-self: stretch;
   margin-top: auto;
-  padding: var(--spacing-sm, 0.938rem) 0 0;
+  padding: 15px 0 0;
 }
 
 .profile__section[data-profile-section='projects'] .profile-section-inline-error {
-  margin-top: var(--spacing-sm, 0.938rem);
-  padding: var(--spacing-xs, 0.75rem);
+  margin-top: 15px;
+  padding: 12px;
   border: 1px solid var(--dialog-error-border, var(--pink-700, #ff98b3));
-  border-radius: var(--border-radius-base, 0.3125rem);
+  border-radius: 5px;
   background: var(--dialog-error-background, var(--pink-500, #ffdde6));
-  color: var(--dialog-error-text, var(--red-600, #B00020));
+  color: var(--solid-ui-color-error, #B00020);
   text-align: left;
   white-space: pre-wrap;
   overflow-wrap: anywhere;
 }
 
-/* Action buttons */
-
-solid-ui-button.project-card__more-button {
-  width: var(--project-card-more-button-width, auto);
-  margin-top: var(--project-card-more-button-margin-top, 0);
-  --button-height-sm: 0;
-  --button-padding-x-sm: 0;
-  --button-background: transparent;
-  --button-border: transparent;
-  --button-text: var(--color-primary, #7C4DFF);
-  --button-hover-background: transparent;
-  --button-hover-border: transparent;
-  --button-hover-text: var(--color-primary, #7C4DFF);
-}
-
 .project-card__more-icon {
   display: inline-flex;
   align-items: center;
@@ -302,20 +258,6 @@ solid-ui-button.project-card__more-button {
   transition: transform var(--animation-duration, 0.2s) ease;
 }
 
-solid-ui-button.project-card__more-button::part(button) {
-  align-items: center;
-  justify-content: center;
-  width: var(--project-card-more-button-part-width, auto);
-  gap: var(--project-card-more-button-gap, 0.375rem);
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: var(--color-primary, #7C4DFF);
-  font-size: var(--font-size-sm, 0.875rem);
-  font-weight: var(--font-weight-bold, 600);
-  cursor: var(--profile-interactive-cursor, pointer);
-}
-
 /* Compact layout */
 :is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__section[data-profile-section='projects'],
 :is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__section--empty[data-profile-section='projects'] {
@@ -330,7 +272,7 @@ solid-ui-button.project-card__more-button::part(button) {
 }
 
 .profile-section-collapsible[data-mobile-expanded="false"] .project-card:nth-child(n + 3) {
-  display: var(--project-card-collapsed-extra-display, flex);
+  display: var(--project-card-collapsed-extra-display);
 }
 
 solid-ui-button.project-card__more-button[data-mobile-expanded="true"] .project-card__more-icon {
@@ -347,7 +289,7 @@ solid-ui-button.project-card__more-button[data-mobile-expanded="true"] .project-
     --project-card-max-width: 100%;
     --project-card-more-button-width: 100%;
     --project-card-more-button-part-width: 100%;
-    --project-card-more-button-margin-top: var(--project-card-mobile-more-button-margin-top, var(--spacing-xs, 0.75rem));
+    --project-card-more-button-margin-top: var(--project-card-mobile-more-button-margin-top);
     --project-card-collapsed-extra-display: none;
   }
 }
@@ -362,7 +304,7 @@ solid-ui-button.project-card__more-button[data-mobile-expanded="true"] .project-
     --project-card-max-width: 100%;
     --project-card-more-button-width: 100%;
     --project-card-more-button-part-width: 100%;
-    --project-card-more-button-margin-top: var(--project-card-mobile-more-button-margin-top, var(--spacing-xs, 0.75rem));
+    --project-card-more-button-margin-top: var(--project-card-mobile-more-button-margin-top);
     --project-card-collapsed-extra-display: none;
   }
 }

package/lib/sections/projects/ProjectSection.d.ts

@@ -1,7 +1,7 @@
 import 'solid-ui/components/button';
 import { LiveStore, NamedNode } from 'rdflib';
-import { ViewerMode } from '../../types';
+import { Layout, ViewerMode } from '../../types';
 import { ProjectDetails } from './types';
 import './ProjectSection.css';
-export declare function renderProjectSection(store: LiveStore, subject: NamedNode, projects: ProjectDetails[], viewerMode: ViewerMode, onSaved?: () => Promise<void> | void): import("lit-html").TemplateResult<1> | "";
+export declare function renderProjectSection(store: LiveStore, subject: NamedNode, projects: ProjectDetails[], viewerMode: ViewerMode, layout: Layout, onSaved?: () => Promise<void> | void): import("lit-html").TemplateResult<1>;
 //# sourceMappingURL=ProjectSection.d.ts.map

package/lib/sections/projects/ProjectSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProjectSection.d.ts","sourceRoot":"","sources":["../../../src/sections/projects/ProjectSection.ts"],"names":[],"mappings":"AACA,OAAO,4BAA4B,CAAA;AACnC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AACxC,OAAO,EAAE,cAAc,EAAc,MAAM,SAAS,CAAA;AAMpD,OAAO,sBAAsB,CAAA;AAuW7B,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,cAAc,EAAE,EAC1B,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,6CAYrC"}
+{"version":3,"file":"ProjectSection.d.ts","sourceRoot":"","sources":["../../../src/sections/projects/ProjectSection.ts"],"names":[],"mappings":"AACA,OAAO,4BAA4B,CAAA;AACnC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAChD,OAAO,EAAE,cAAc,EAAc,MAAM,SAAS,CAAA;AAMpD,OAAO,sBAAsB,CAAA;AAmV7B,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,cAAc,EAAE,EAC1B,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,wCAWrC"}

package/lib/sections/projects/ProjectSection.js

@@ -12,8 +12,8 @@ var _mutations = require("./mutations");
 var _profileIcons = require("../../icons-svg/profileIcons");
 require("./ProjectSection.css");
 var _collapsibleSection = require("../shared/collapsibleSection");
-var _spinner = require("../../ui/spinner");
 var _errorDisplay = require("../../utils/errorDisplay");
+var _responsiveActionButton = require("../../ui/responsiveActionButton");
 const MAX_VISIBLE_PROJECTS_MOBILE = 2;
 function setProjectsSectionError(section, message) {
   const errorBox = section.querySelector('.profile-section-inline-error');
@@ -83,7 +83,7 @@ function renderProject(project, store, subject, viewerMode, onSaved) {
     };
     try {
       unfollowButton?.setAttribute('disabled', '');
-      unfollowButton?.setAttribute('data-loading', 'true');
+      unfollowButton?.setAttribute('loading', '');
       unfollowButton?.setAttribute('aria-busy', 'true');
       await (0, _mutations.processProjectsMutations)(store, subject, removePlan);
       if (section) {
@@ -98,7 +98,7 @@ function renderProject(project, store, subject, viewerMode, onSaved) {
       }
     } finally {
       unfollowButton?.removeAttribute('disabled');
-      unfollowButton?.removeAttribute('data-loading');
+      unfollowButton?.removeAttribute('loading');
       unfollowButton?.setAttribute('aria-busy', 'false');
     }
   };
@@ -130,17 +130,15 @@ function renderProject(project, store, subject, viewerMode, onSaved) {
       ${viewerMode === 'owner' ? (0, _litHtml.html)`
         <div class="project-card__footer">
           <solid-ui-button
-            type="button"
             variant="secondary"
-            size="sm"
-            label="Following"
             class="project-card__follow-button"
             aria-label="Unfollow project"
             @click=${handleUnfollow}
           >
-            <span class="project-card__follow-label project-card__follow-label--default">${_profileIcons.checkMarkIcon} Following</span>
+            <span slot="left-icon" class="project-card__follow-label project-card__follow-label--default">${_profileIcons.checkMarkIcon}</span>
+            <span class="project-card__follow-label project-card__follow-label--default">Following</span>
             <span class="project-card__follow-label project-card__follow-label--hover">Unfollow</span>
-            <span class="project-card__follow-label project-card__follow-label--loading">${(0, _spinner.createSpinner)()}<span>Unfollowing...</span></span>
+            <span class="project-card__follow-label project-card__follow-label--loading">Unfollowing...</span>
           </solid-ui-button>
         </div>
       ` : (0, _litHtml.html)``}
@@ -152,23 +150,18 @@ function renderOwnerEmptyProjectsContent(store, subject, projectData, viewerMode
   return (0, _litHtml.html)`
     <div class="profile__empty-state-content" role="group" aria-label="Empty projects section">
       <h2 id="projects-heading" tabindex="-1">${_texts.projectsHeadingText}</h2>
-      <p class="profile__empty-state-message">
-        You haven't added any projects yet. Consider adding a project to boost your profile.
-      </p>
     </div>
     <solid-ui-button
-      type="button"
       variant="secondary"
-      size="sm"
       class="profile__action-button--empty"
       aria-label="Add project details"
       @click=${event => {
     return (0, _ProjectEditDialog.createProjectsEditDialog)(event, store, subject, projectDetails, viewerMode, onSaved);
   }}
     >
-      <span class="profile__action-icon" aria-hidden="true">${_profileIcons.plusDarkIcon} Add Project</span>
+      <span slot="left-icon" class="profile__action-icon" aria-hidden="true">${_profileIcons.plusDarkIcon}</span>
+       Add Project
     </solid-ui-button>
-
   `;
 }
 function renderOwnerEmptyProjectSection(store, subject, projectData, viewerMode, onSaved) {
@@ -185,9 +178,7 @@ function renderOwnerEmptyProjectSection(store, subject, projectData, viewerMode,
         <h2 id="projects-heading" tabindex="-1">${_texts.projectsHeadingText}</h2>
         <div class="profile-section-collapsible__actions">
           <solid-ui-button
-            type="button"
-            variant="icon"
-            size="sm"
+            variant="ghost"
             class="profile-section-collapsible__toggle-button"
             aria-label="Toggle projects section"
             aria-controls="projects-panel"
@@ -208,7 +199,7 @@ function renderProjectSectionContent(projects, store, subject, viewerMode, onSav
   if (!projects || !projects.length || !projects[0]) return (0, _litHtml.html)``;
   return (0, _litHtml.html)`${renderProject(projects[0], store, subject, viewerMode, onSaved)}${projects.length > 1 ? renderProjectSectionContent(projects.slice(1), store, subject, viewerMode, onSaved) : (0, _litHtml.html)``}`;
 }
-function renderProjectSectionDefault(store, subject, projects, viewerMode, onSaved) {
+function renderProjectSectionDefault(store, subject, projects, viewerMode, layout, onSaved) {
   const hasProjects = Array.isArray(projects) && projects.length > 0;
   const hiddenProjectsCount = Math.max(0, projects.length - MAX_VISIBLE_PROJECTS_MOBILE);
   const isOwner = viewerMode === 'owner';
@@ -226,27 +217,18 @@ function renderProjectSectionDefault(store, subject, projects, viewerMode, onSav
           <h2 id="projects-heading">${_texts.projectsHeadingText}</h2>
           <div class="profile-section-collapsible__actions">
             ${isOwner ? (0, _litHtml.html)`
-              <solid-ui-button
-                type="button"
-                variant="secondary"
-                size="sm"
-                class="profile__action-button profile-action-text profile-section-collapsible__edit-button"
-                aria-label="Add or edit projects"
-                @click=${event => {
-    return (0, _ProjectEditDialog.createProjectsEditDialog)(event, store, subject, projects, viewerMode, onSaved);
-  }}
-              >
-                <span class="profile-section-collapsible__edit-label profile__add-more-content">
-                  <span class="profile__add-more-icon" aria-hidden="true">${_profileIcons.addIcon}</span>
-                  <span>Add More</span>
-                </span>
-                <span class="profile-section-collapsible__edit-icon" aria-hidden="true">${_profileIcons.editIcon}</span>
-              </solid-ui-button>
-            ` : (0, _litHtml.html)``}
+              ${(0, _responsiveActionButton.renderResponsiveActionButton)({
+    layout,
+    className: 'profile-section-collapsible__edit-button',
+    ariaLabel: 'Add or edit projects',
+    onClick: event => (0, _ProjectEditDialog.createProjectsEditDialog)(event, store, subject, projects, viewerMode, onSaved),
+    desktopIcon: (0, _litHtml.html)`<span slot="left-icon" class="profile-section-collapsible__action-label profile__add-more-icon" aria-hidden="true">${_profileIcons.addIcon}</span>`,
+    desktopLabel: 'Add More',
+    mobileIcon: (0, _litHtml.html)`<span slot="icon" class="profile-section-collapsible__edit-icon" aria-hidden="true">${_profileIcons.editIcon}</span>`
+  })}
+            ` : _litHtml.nothing}
             <solid-ui-button
-              type="button"
-              variant="icon"
-              size="sm"
+              variant="ghost"
               class="profile-section-collapsible__toggle-button"
               aria-label="Toggle projects section"
               aria-controls="projects-panel"
@@ -264,17 +246,14 @@ function renderProjectSectionDefault(store, subject, projects, viewerMode, onSav
                 </ul>
                 ${hiddenProjectsCount > 0 ? (0, _litHtml.html)`
                       <solid-ui-button
-                        type="button"
-                        variant="secondary"
-                        size="sm"
-                        label="View More"
+                        variant="tertiary"
                         class="project-card__more-button"
                         aria-controls="projects-rail"
                         aria-expanded="false"
                         data-mobile-expanded="false"
                         @click=${toggleProjectsMobileList}
                       >
-                        <span class="project-card__more-icon" aria-hidden="true">${_profileIcons.twoDownArrowsIcon}</span>
+                        <span slot="left-icon" class="project-card__more-icon" aria-hidden="true">${_profileIcons.twoDownArrowsIcon}</span>
                         <span class="project-card__more-label">View More</span>
                       </solid-ui-button>
                     ` : (0, _litHtml.html)``}
@@ -292,11 +271,11 @@ function renderProjectSectionDefault(store, subject, projects, viewerMode, onSav
       </section>
     `;
 }
-function renderProjectSection(store, subject, projects, viewerMode, onSaved) {
+function renderProjectSection(store, subject, projects, viewerMode, layout, onSaved) {
+  const currentLayout = layout || 'desktop';
   const hasProjects = Array.isArray(projects) && projects.length > 0;
   const showOwnerEmptyProject = !hasProjects && viewerMode === 'owner';
-  const showSection = true;
-  return showSection ? (0, _litHtml.html)`
-    ${showOwnerEmptyProject ? renderOwnerEmptyProjectSection(store, subject, projects, viewerMode, onSaved) : renderProjectSectionDefault(store, subject, projects, viewerMode, onSaved)}
-  ` : '';
+  return (0, _litHtml.html)`
+    ${showOwnerEmptyProject ? renderOwnerEmptyProjectSection(store, subject, projects, viewerMode, onSaved) : renderProjectSectionDefault(store, subject, projects, viewerMode, currentLayout, onSaved)}
+  `;
 }

package/lib/sections/resume/ResumeEditDialog.d.ts

@@ -3,7 +3,6 @@ import 'solid-ui/components/combobox';
 import 'solid-ui/components/select';
 import { RoleDetails } from './types';
 import '../../styles/EditDialogs.css';
-import '../contactInfo/ContactInfoEditDialog.css';
 import { LiveStore, NamedNode } from 'rdflib';
 import { ViewerMode } from '../../types';
 type ResumeOrganizationSuggestion = {

package/lib/sections/resume/ResumeEditDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResumeEditDialog.d.ts","sourceRoot":"","sources":["../../../src/sections/resume/ResumeEditDialog.ts"],"names":[],"mappings":"AAEA,OAAO,4BAA4B,CAAA;AACnC,OAAO,8BAA8B,CAAA;AACrC,OAAO,4BAA4B,CAAA;AACnC,OAAO,EAAE,WAAW,EAAa,MAAM,SAAS,CAAA;AAChD,OAAO,8BAA8B,CAAA;AACrC,OAAO,0CAA0C,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAW,MAAM,QAAQ,CAAA;AAEtD,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AA4BxC,KAAK,4BAA4B,GAAG;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAuPD,wBAAsB,oCAAoC,CACxD,IAAI,EAAE,MAAM,EACZ,YAAY,EAAE,MAAM,GACnB,OAAO,CAAC,4BAA4B,EAAE,CAAC,CA+CzC;AAi3BD,wBAAsB,sBAAsB,CAC1C,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,UAAU,EAAE,WAAW,EAAE,EACzB,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,iBAoDrC"}
+{"version":3,"file":"ResumeEditDialog.d.ts","sourceRoot":"","sources":["../../../src/sections/resume/ResumeEditDialog.ts"],"names":[],"mappings":"AAEA,OAAO,4BAA4B,CAAA;AACnC,OAAO,8BAA8B,CAAA;AACrC,OAAO,4BAA4B,CAAA;AACnC,OAAO,EAAE,WAAW,EAAa,MAAM,SAAS,CAAA;AAChD,OAAO,8BAA8B,CAAA;AACrC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAW,MAAM,QAAQ,CAAA;AAEtD,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AA4BxC,KAAK,4BAA4B,GAAG;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAoOD,wBAAsB,oCAAoC,CACxD,IAAI,EAAE,MAAM,EACZ,YAAY,EAAE,MAAM,GACnB,OAAO,CAAC,4BAA4B,EAAE,CAAC,CA+CzC;AA82BD,wBAAsB,sBAAsB,CAC1C,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,UAAU,EAAE,WAAW,EAAE,EACzB,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,iBAoDrC"}

package/lib/sections/resume/ResumeEditDialog.js

@@ -11,7 +11,6 @@ require("solid-ui/components/button");
 require("solid-ui/components/combobox");
 require("solid-ui/components/select");
 require("../../styles/EditDialogs.css");
-require("../contactInfo/ContactInfoEditDialog.css");
 var _rdflib = require("rdflib");
 var _mutations = require("./mutations");
 var _rowState = require("../shared/rowState");
@@ -101,22 +100,6 @@ const RESUME_ORGANIZATION_TYPE_WIKIDATA_CLASS_URIS = {
 };
 const RESUME_ORGANIZATION_SEARCH_CLASS_URIS = Array.from(new Set(RESUME_ORGANIZATION_TYPE_OPTIONS.flatMap(option => RESUME_ORGANIZATION_TYPE_WIKIDATA_CLASS_URIS[option.value] || [])));
 const RESUME_PRESENT_MONTH_VALUE = '__present__';
-function sanitizeResumeFieldValue(value) {
-  return (0, _textUtils.sanitizeTextValue)(value);
-}
-function normalizeResumeOrganizationPublicId(value) {
-  const cleaned = sanitizeResumeFieldValue(value);
-  return isAbsoluteUri(cleaned) ? cleaned : '';
-}
-function isAbsoluteUri(value) {
-  if (!value) return false;
-  try {
-    new URL(value);
-    return true;
-  } catch {
-    return false;
-  }
-}
 function buildWikidataOrganizationSearchUrl(name) {
   return WIKIDATA_ORGANIZATION_SEARCH_URI.replace('$(language)', encodeURIComponent(WIKIDATA_ORGANIZATION_SEARCH_LANGUAGE)).replace('$(limit)', encodeURIComponent(String(WIKIDATA_ORGANIZATION_SEARCH_CANDIDATE_LIMIT))).replace('$(name)', encodeURIComponent(name));
 }
@@ -124,7 +107,7 @@ function buildWikidataEntityLookupUrl(ids) {
   return WIKIDATA_ENTITY_LOOKUP_URI.replace('$(ids)', encodeURIComponent(ids.join('|')));
 }
 function getWikidataIdFromUri(value) {
-  const trimmed = sanitizeResumeFieldValue(value);
+  const trimmed = (0, _textUtils.sanitizeTextValue)(value);
   const match = trimmed.match(/Q\d+/);
   return match ? match[0] : '';
 }
@@ -180,8 +163,8 @@ function toResumeOrganizationLabel(result) {
   return result?.label || result?.match?.text || result?.id || '';
 }
 function toResumeOrganizationSuggestion(result) {
-  const label = sanitizeResumeFieldValue(toResumeOrganizationLabel(result));
-  const publicId = normalizeResumeOrganizationPublicId(typeof result?.concepturi === 'string' ? result.concepturi : typeof result?.url === 'string' ? result.url : '');
+  const label = (0, _textUtils.sanitizeTextValue)(toResumeOrganizationLabel(result));
+  const publicId = (0, _textUtils.sanitizeTextValue)(typeof result?.concepturi === 'string' ? result.concepturi : typeof result?.url === 'string' ? result.url : '');
   return {
     label,
     publicId
@@ -198,7 +181,7 @@ function dedupeResumeOrganizationSuggestions(suggestions) {
   });
 }
 async function fetchWikidataOrganizationSuggestions(name, selectedType) {
-  const query = sanitizeResumeFieldValue(name);
+  const query = (0, _textUtils.sanitizeTextValue)(name);
   if (query.length < 2 || typeof fetch !== 'function') return [];
   try {
     const response = await fetch(buildWikidataOrganizationSearchUrl(query));
@@ -359,17 +342,17 @@ function rowHasContent(row) {
 }
 function toFormState(resumeData) {
   const roles = (resumeData || []).map(role => ({
-    title: sanitizeResumeFieldValue((0, _textUtils.toText)(role.title)),
-    roleType: sanitizeResumeFieldValue((0, _textUtils.toText)(role.roleType)),
+    title: (0, _textUtils.sanitizeTextValue)((0, _textUtils.toText)(role.title)),
+    roleType: (0, _textUtils.sanitizeTextValue)((0, _textUtils.toText)(role.roleType)),
     startDate: role.startDate,
     endDate: role.endDate,
     isCurrentRole: role.isCurrentRole ?? !role.endDate,
-    orgName: sanitizeResumeFieldValue((0, _textUtils.toText)(role.orgName)),
-    orgPublicId: normalizeResumeOrganizationPublicId(sanitizeResumeFieldValue((0, _textUtils.toText)(role.orgPublicId))),
-    orgType: normalizeResumeOrganizationTypeValue(sanitizeResumeFieldValue((0, _textUtils.toText)(role.orgType))),
-    orgLocation: sanitizeResumeFieldValue((0, _textUtils.toText)(role.orgLocation)),
-    orgHomePage: sanitizeResumeFieldValue((0, _textUtils.toText)(role.orgHomePage)),
-    description: sanitizeResumeFieldValue((0, _textUtils.toText)(role.description)),
+    orgName: (0, _textUtils.sanitizeTextValue)((0, _textUtils.toText)(role.orgName)),
+    orgPublicId: (0, _textUtils.sanitizeTextValue)((0, _textUtils.toText)(role.orgPublicId)),
+    orgType: normalizeResumeOrganizationTypeValue((0, _textUtils.sanitizeTextValue)((0, _textUtils.toText)(role.orgType))),
+    orgLocation: (0, _textUtils.sanitizeTextValue)((0, _textUtils.toText)(role.orgLocation)),
+    orgHomePage: (0, _textUtils.sanitizeTextValue)((0, _textUtils.toText)(role.orgHomePage)),
+    description: (0, _textUtils.sanitizeTextValue)((0, _textUtils.toText)(role.description)),
     entryNode: (0, _textUtils.toText)(role.entryNode),
     status: (0, _textUtils.toText)(role.entryNode) ? 'existing' : 'new'
   })).filter(role => rowHasContent(role) || Boolean(role.entryNode));
@@ -446,8 +429,8 @@ function syncResumeOrganizationRowsFromComboboxes(form, resumeData) {
     const rowIndex = Number(comboboxElement.dataset.resumeOrganizationIndex);
     if (Number.isNaN(rowIndex) || !resumeData[rowIndex]) return;
     const comboboxInput = comboboxElement.shadowRoot?.querySelector('input');
-    const nextName = sanitizeResumeFieldValue(comboboxInput?.value || comboboxElement.inputValue || '');
-    const nextPublicId = normalizeResumeOrganizationPublicId(comboboxElement.value || '');
+    const nextName = (0, _textUtils.sanitizeTextValue)(comboboxInput?.value || comboboxElement.inputValue || '');
+    const nextPublicId = (0, _textUtils.sanitizeTextValue)(comboboxElement.value || '');
     (0, _rowState.applyRowFieldChange)(resumeData[rowIndex], 'orgName', nextName, rowHasContent);
     resumeData[rowIndex].orgPublicId = nextPublicId;
   });
@@ -513,7 +496,7 @@ function renderResumeInputRow({
   const selectedYears = [startYearText, endYearParsedText];
   const handleResumeInput = field => e => {
     const target = e.target;
-    const nextValue = sanitizeResumeFieldValue(target.value);
+    const nextValue = (0, _textUtils.sanitizeTextValue)(target.value);
     if (resumeRow) {
       (0, _rowState.applyRowFieldChange)(resumeRow, field, nextValue, rowHasContent);
       onChange();
@@ -570,7 +553,7 @@ function renderResumeInputRow({
   };
   const handleDescriptionInput = event => {
     const target = event.target;
-    const nextValue = sanitizeResumeFieldValue(target.value.slice(0, descriptionMaxLength));
+    const nextValue = (0, _textUtils.sanitizeTextValue)(target.value.slice(0, descriptionMaxLength));
     if (resumeData[index]) {
       (0, _rowState.applyRowFieldChange)(resumeData[index], 'description', nextValue, rowHasContent);
       onChange();
@@ -595,7 +578,7 @@ function renderResumeInputRow({
     }
   };
   const handleOrganizationNameInput = e => {
-    const nextValue = sanitizeResumeFieldValue(readResumeOrganizationComboboxInputValue(e));
+    const nextValue = (0, _textUtils.sanitizeTextValue)(readResumeOrganizationComboboxInputValue(e));
     if (resumeRow) {
       (0, _rowState.applyRowFieldChange)(resumeRow, 'orgName', nextValue, rowHasContent);
       resumeRow.orgPublicId = '';
@@ -604,7 +587,7 @@ function renderResumeInputRow({
   const handleOrganizationNameChange = e => {
     const selectedOption = readResumeOrganizationComboboxChange(e);
     if (!resumeRow || !selectedOption?.publicId) return;
-    (0, _rowState.applyRowFieldChange)(resumeRow, 'orgName', sanitizeResumeFieldValue(selectedOption.label), rowHasContent);
+    (0, _rowState.applyRowFieldChange)(resumeRow, 'orgName', (0, _textUtils.sanitizeTextValue)(selectedOption.label), rowHasContent);
     resumeRow.orgPublicId = selectedOption.publicId;
   };
   return (0, _litHtml.html)`
@@ -612,15 +595,12 @@ function renderResumeInputRow({
       <h3 id=${experienceHeadingId} class="profile-edit-dialog__entry-heading">${label}</h3>
       <div class="profile-edit-dialog__actions profile-edit-dialog__actions--edge">
         <solid-ui-button
-          type="button"
-          variant="icon"
-          size="md"
-          class="profile-edit-dialog__delete-button"
+          variant="ghost"
           aria-label=${`Delete resume ${displayIndex + 1}`}
           title=${_texts.deleteEntryButtonTitleText}
           @click=${handleDelete}
         >
-          <span slot="icon" class="profile-edit-dialog__delete-icon" aria-hidden="true">${_profileIcons.trashIcon}</span>
+          <span slot="icon" aria-hidden="true">${_profileIcons.trashIcon}</span>
         </solid-ui-button>
       </div>
     </div>