profile-pane 3.2.0 → 3.2.2-test.0

package/lib/sections/resume/ResumeSection.css

@@ -0,0 +1,350 @@
+/* Resume section styles. */
+
+/* Section actions */
+.resume__edit-button {
+  width: auto;
+  min-width: 0;
+  max-width: none;
+  padding: var(--spacing-xxs, 0.3125rem);
+  border: none;
+  background: none;
+  color: var(--color-primary, #7C4DFF);
+  cursor: var(--profile-interactive-cursor, pointer);
+  font-size: var(--font-size-sm, 0.875rem);
+}
+
+solid-ui-button.resume__edit-button {
+  width: auto;
+  min-width: 0;
+  max-width: none;
+  --button-height-sm: 0;
+  --button-padding-sm: var(--spacing-xxs, 0.3125rem);
+  --button-font-size-sm: var(--font-size-sm, 0.875rem);
+  --button-font-weight: var(--font-weight-regular, 400);
+  --button-background: transparent;
+  --button-border-width: 0;
+  --button-border: transparent;
+  --button-text: var(--color-primary, #7C4DFF);
+  --button-hover-background: transparent;
+  --button-hover-border: transparent;
+  --button-hover-text: var(--color-primary, #7C4DFF);
+}
+
+.resume__edit-button:hover {
+  text-decoration: underline;
+}
+
+solid-ui-button.resume__edit-button:hover::part(button),
+solid-ui-button.resume__edit-button:focus-visible::part(button) {
+  text-decoration: underline;
+}
+
+.resume-card {
+  --resume-card-section-gap: var(--spacing-md, 1.25rem);
+  --resume-card-item-gap: var(--spacing-xs, 0.75rem);
+  --resume-card-header-gap: var(--spacing-sm, 0.75rem);
+  --resume-card-column-gap: var(--spacing-md, 1.25rem);
+  --resume-card-row-gap: var(--spacing-2xs, 0.625rem);
+  --resume-card-title-color: var(--color-text-subheading, var(--gray-900, #101828));
+  --resume-card-title-size: var(--font-size-lg, 1.125rem);
+  --resume-card-title-weight: var(--font-weight-bold, 600);
+  --resume-card-organization-color: var(--color-text-secondary, var(--gray-600, #4A5565));
+  --resume-card-organization-size: var(--font-size-md, 1rem);
+  --resume-card-organization-weight: var(--font-weight-md, 500);
+  --resume-card-location-color: var(--color-text-secondary, var(--gray-600, #4A5565));
+  --resume-card-location-size: var(--font-size-sm, 0.875rem);
+  --resume-card-location-weight: var(--font-weight-normal, 400);
+  --resume-card-period-color: var(--color-text-secondary, var(--gray-600, #4A5565));
+  --resume-card-period-size: var(--font-size-sm, 0.875rem);
+  --resume-card-period-weight: var(--font-weight-normal, 400);
+  --resume-card-description-color: var(--color-text-primary, var(--gray-700, #364153));
+  --resume-card-description-size: var(--font-size-sm, 0.875rem);
+  --resume-card-description-weight: var(--font-weight-normal, 400);
+  --resume-card-heading-color: var(--color-text-subheading, #101828);
+  --resume-card-heading-border: var(--color-border-pale, #eee);
+}
+
+/* Section layout */
+.resume-card__section {
+  margin-bottom: var(--resume-card-section-gap);
+}
+
+.resume-card__section > ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.resume-card__item {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-areas:
+    "title period"
+    "organization organization"
+    "description description";
+  column-gap: var(--resume-card-column-gap);
+  row-gap: var(--resume-card-row-gap);
+  align-items: start;
+  margin: 0 0 var(--resume-card-item-gap) 0;
+  font-size: var(--font-size-base, 1rem);
+  line-height: var(--line-height-base, 1.5);
+  gap: 0;
+}
+
+.resume-card__item:last-child {
+  margin-bottom: 0;
+}
+
+.resume-card__item-header {
+  grid-area: title;
+  display: flex;
+  align-items: baseline;
+  gap: var(--resume-card-header-gap);
+  min-width: 0;
+}
+
+.resume-card__item-header h3,
+.resume-card__item-header h4,
+.resume-card__item-header time {
+  margin: 0;
+}
+
+.resume-card__item-header h3,
+.resume-card__item-header h4 {
+  min-width: 0;
+  color: var(--resume-card-title-color);
+  font-size: var(--resume-card-title-size);
+  font-weight: var(--resume-card-title-weight);
+  line-height: var(--line-height-tight, 1.4);
+}
+
+.resume-card__item-period {
+  grid-area: period;
+  justify-self: end;
+  text-align: right;
+  margin: 0;
+  color: var(--resume-card-period-color);
+  font-size: var(--resume-card-period-size);
+  font-weight: var(--resume-card-period-weight);
+  line-height: var(--line-height-tight, 1.4);
+}
+
+.resume-card__organization {
+  grid-area: organization;
+  margin: 0;
+  line-height: var(--line-height-base, 1.5);
+}
+
+.resume-card__organization-name {
+  color: var(--resume-card-organization-color);
+  font-size: var(--resume-card-organization-size);
+  font-weight: var(--resume-card-organization-weight);
+}
+
+.resume-card__organization-separator,
+.resume-card__organization-location {
+  color: var(--resume-card-location-color);
+  font-size: var(--resume-card-location-size);
+  font-weight: var(--resume-card-location-weight);
+}
+
+/* Description toggle */
+.resume-card__description-wrap {
+  grid-area: description;
+  --resume-card-description-offset: var(--spacing-sm, 0.938rem);
+  --resume-description-toggle-inline-offset: 0;
+  --resume-description-toggle-line-top: calc(100% - 1.5em + 0.28em - 11px);
+  --resume-description-toggle-line-translate-y: 7px;
+  --resume-description-overflow-padding-inline-end: 4.5rem;
+  margin: var(--resume-card-description-offset) 0 0;
+  position: relative;
+  isolation: isolate;
+}
+
+.resume-card__description-text {
+  margin: 0;
+  width: 100%;
+  max-width: none;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  color: var(--resume-card-description-color);
+  font-size: var(--resume-card-description-size);
+  font-weight: var(--resume-card-description-weight);
+  line-height: var(--line-height-base, 1.5);
+  overflow: hidden;
+}
+
+.resume-card__description-text--overflowing {
+  padding-right: var(--resume-description-overflow-padding-inline-end);
+}
+
+.resume-card__description-text--expanded {
+  display: block;
+  -webkit-line-clamp: unset;
+  line-clamp: unset;
+  padding-right: 0;
+  overflow: visible;
+}
+
+.resume-card__description-toggle,
+solid-ui-button.resume-card__description-toggle {
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  right: var(--resume-description-toggle-inline-offset);
+  bottom: 0;
+  background-color: var(--color-card-bg, #FFF);
+  white-space: nowrap;
+  z-index: 0;
+}
+
+.resume-card__description-toggle {
+  border: 0;
+  background: transparent;
+  color: var(--color-primary, #7C4DFF);
+  cursor: var(--profile-interactive-cursor, pointer);
+  font: inherit;
+  font-size: var(--font-size-sm, 0.875rem);
+  line-height: var(--line-height-base, 1.5);
+  min-height: auto;
+  min-width: auto;
+}
+
+solid-ui-button.resume-card__description-toggle {
+  min-height: 0;
+  min-width: 0;
+  --button-height-sm: 0;
+  --button-padding-sm: 0;
+  --button-font-size-sm: var(--font-size-sm, 0.875rem);
+  --button-line-height: var(--line-height-base, 1.5);
+  --button-background: transparent;
+  --button-border-width: 0;
+  --button-border: transparent;
+  --button-text: var(--color-primary, #7C4DFF);
+  --button-hover-background: transparent;
+  --button-hover-border: transparent;
+  --button-hover-text: var(--color-primary, #7C4DFF);
+}
+
+.resume-card__description-wrap .resume-card__description-text:not(.resume-card__description-text--expanded) + .resume-card__description-toggle,
+.resume-card__description-wrap .resume-card__description-text:not(.resume-card__description-text--expanded) + solid-ui-button.resume-card__description-toggle {
+  top: var(--resume-description-toggle-line-top);
+  bottom: auto;
+  transform: translateY(var(--resume-description-toggle-line-translate-y));
+}
+
+.resume-card__description-text--expanded + .resume-card__description-toggle,
+.resume-card__description-text--expanded + solid-ui-button.resume-card__description-toggle {
+  position: static;
+  display: block;
+  width: fit-content;
+  margin-left: auto;
+  top: auto;
+  bottom: auto;
+  transform: none;
+}
+
+.resume-card__description-text--expanded + solid-ui-button.resume-card__description-toggle::part(button) {
+  position: static;
+  display: inline-flex;
+  top: auto;
+  bottom: auto;
+  transform: none;
+}
+
+.resume-card__skill,
+.resume-card__language {
+  text-align: left;
+  margin: var(--resume-card-item-gap) 0;
+  font-size: var(--font-size-base, 1rem);
+  line-height: var(--line-height-base, 1.5);
+}
+
+.resume-card__section > h3 {
+  color: var(--resume-card-heading-color);
+  font-size: var(--font-size-xl, 1.375rem);
+  font-weight: var(--font-weight-md, 500);
+  line-height: var(--line-height-tight, 1.4);
+  margin-bottom: var(--resume-card-item-gap);
+  border-bottom: 1px solid var(--resume-card-heading-border);
+  padding-bottom: var(--resume-card-item-gap);
+}
+
+/* Compact layout */
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .resume-card__item {
+  --resume-card-title-size: var(--font-size-lg, 1.125rem);
+  --resume-card-organization-size: var(--font-size-md, 1rem);
+  --resume-card-location-size: var(--font-size-sm, 0.875rem);
+  --resume-card-period-size: var(--font-size-xxs, 0.75rem);
+  --resume-card-description-size: var(--font-size-sm, 0.875rem);
+  --resume-card-description-offset: 0rem;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-areas:
+    "title"
+    "organization"
+    "period"
+    "description";
+}
+
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .resume-card__item-header {
+  align-items: flex-start;
+}
+
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .resume-card__item-period {
+  justify-self: start;
+  text-align: left;
+}
+
+@media (max-width: 576px) {
+  .resume-card__item {
+    --resume-card-title-size: var(--font-size-lg, 1.125rem);
+    --resume-card-organization-size: var(--font-size-md, 1rem);
+    --resume-card-location-size: var(--font-size-sm, 0.875rem);
+    --resume-card-period-size: var(--font-size-xxs, 0.75rem);
+    --resume-card-description-size: var(--font-size-sm, 0.875rem);
+    --resume-card-description-offset: 0rem;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas:
+      "title"
+      "organization"
+      "period"
+      "description";
+  }
+
+  .resume-card__item-header {
+    align-items: flex-start;
+  }
+
+  .resume-card__item-period {
+    justify-self: start;
+    text-align: left;
+  }
+}
+
+@container profile-pane (max-width: 576px) {
+  .resume-card__item {
+    --resume-card-title-size: var(--font-size-lg, 1.125rem);
+    --resume-card-organization-size: var(--font-size-md, 1rem);
+    --resume-card-location-size: var(--font-size-sm, 0.875rem);
+    --resume-card-period-size: var(--font-size-xxs, 0.75rem);
+    --resume-card-description-size: var(--font-size-sm, 0.875rem);
+    --resume-card-description-offset: 0rem;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas:
+      "title"
+      "organization"
+      "period"
+      "description";
+  }
+
+  .resume-card__item-header {
+    align-items: flex-start;
+  }
+
+  .resume-card__item-period {
+    justify-self: start;
+    text-align: left;
+  }
+}

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

@@ -1,7 +1,8 @@
+import 'solid-ui/components/actions/button';
 import { RoleDetails } from './types';
 import { ViewerMode } from '../../types';
-import '../../styles/CVCard.css';
+import './ResumeSection.css';
 import { LiveStore, NamedNode } from 'rdflib';
-export declare const CVCard: (cvData: RoleDetails[], viewerMode: ViewerMode) => import("lit-html").TemplateResult<1>;
+export declare const CVCard: (cvData: RoleDetails[], _viewerMode: ViewerMode) => import("lit-html").TemplateResult<1>;
 export declare function renderCVSection(store: LiveStore, subject: NamedNode, roles: RoleDetails[], viewerMode: ViewerMode, onSaved?: () => Promise<void> | void): import("lit-html").TemplateResult<1> | "";
 //# sourceMappingURL=ResumeSection.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ResumeSection.d.ts","sourceRoot":"","sources":["../../../src/sections/resume/ResumeSection.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AACxC,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AA6D7C,eAAO,MAAM,MAAM,GACjB,QAAQ,WAAW,EAAE,EACrB,YAAY,UAAU,yCAevB,CAAA;AA+GD,wBAAgB,eAAe,CAC7B,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,KAAK,EAAE,WAAW,EAAE,EACpB,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,6CAarC"}
+{"version":3,"file":"ResumeSection.d.ts","sourceRoot":"","sources":["../../../src/sections/resume/ResumeSection.ts"],"names":[],"mappings":"AACA,OAAO,oCAAoC,CAAA;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AACxC,OAAO,qBAAqB,CAAA;AAE5B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAgE7C,eAAO,MAAM,MAAM,GACjB,QAAQ,WAAW,EAAE,EACrB,aAAa,UAAU,yCAcxB,CAAA;AA0ID,wBAAgB,eAAe,CAC7B,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,KAAK,EAAE,WAAW,EAAE,EACpB,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,6CAarC"}

package/lib/sections/resume/ResumeSection.js

@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.CVCard = void 0;
 exports.renderCVSection = renderCVSection;
 var _litHtml = require("lit-html");
-require("../../styles/CVCard.css");
+require("solid-ui/components/actions/button");
+require("./ResumeSection.css");
 var _texts = require("../../texts");
 var _ResumeEditDialog = require("./ResumeEditDialog");
 var _sectionCardHelpers = require("../shared/sectionCardHelpers");
@@ -18,35 +19,38 @@ function renderRole(role, index) {
   const rolePeriodId = `cv-role-period-${index}`;
   const roleOrgId = `cv-role-org-${index}`;
   const roleDescriptionId = `cv-role-description-${index}`;
-  const ariaDescribedBy = role.description ? `${rolePeriodId} ${roleOrgId} ${roleDescriptionId}` : `${rolePeriodId} ${roleOrgId}`;
+  const ariaDescribedBy = role.description ? `${roleOrgId} ${rolePeriodId} ${roleDescriptionId}` : `${roleOrgId} ${rolePeriodId}`;
   return (0, _litHtml.html)`
-    <li class="cvRole" role="listitem" aria-labelledby=${roleTitleId} aria-describedby=${ariaDescribedBy}>
-    <div class="cvRoleHeader">
-      <h4 id=${roleTitleId}>${role.title}</h4>
-      <p id=${rolePeriodId} class="cvRolePeriod">
-        <time datetime=${(0, _sectionCardHelpers.toMonthDateTime)(role.startDate)}>${(0, _sectionCardHelpers.formatMonthYear)(role.startDate)}</time>
-        <span aria-hidden="true"> to </span>
-        ${role.endDate ? (0, _litHtml.html)`<time datetime=${(0, _sectionCardHelpers.toMonthDateTime)(role.endDate)}>${(0, _sectionCardHelpers.formatMonthYear)(role.endDate)}</time>` : (0, _litHtml.html)`<span>Present</span>`}
-      </p>
+    <li class="resume-card__item" role="listitem" aria-labelledby=${roleTitleId} aria-describedby=${ariaDescribedBy}>
+    <div class="resume-card__item-header">
+      <h3 id=${roleTitleId}>${role.title}</h3>
     </div>
-      <p class="cvOrg" id=${roleOrgId}>
-        <strong>${role.orgName}</strong>${role.orgLocation ? (0, _litHtml.html)` | ${role.orgLocation}` : ''}
-      </p>
-      ${role.description ? (0, _litHtml.html)`
-        <div class="cvDescriptionWrap">
-          <p class="cvDescriptionText" id=${roleDescriptionId}>${role.description}</p>
-          <button
-            type="button"
-            class="cvDescriptionToggle"
-            aria-controls=${roleDescriptionId}
-            aria-expanded="false"
-            hidden
-            @click=${_sectionCardHelpers.toggleDescription}
-          >
-            ...more
-          </button>
-        </div>
-      ` : ''}
+    <p class="resume-card__organization" id=${roleOrgId}>
+      <strong class="resume-card__organization-name">${role.orgName}</strong>${role.orgLocation ? (0, _litHtml.html)`<span class="resume-card__organization-separator" aria-hidden="true"> | </span><span class="resume-card__organization-location">${role.orgLocation}</span>` : ''}
+    </p>
+    <p id=${rolePeriodId} class="resume-card__item-period">
+      <time datetime=${(0, _sectionCardHelpers.toMonthDateTime)(role.startDate)}>${(0, _sectionCardHelpers.formatMonthYear)(role.startDate)}</time>
+      <span> to </span>
+      ${role.endDate ? (0, _litHtml.html)`<time datetime=${(0, _sectionCardHelpers.toMonthDateTime)(role.endDate)}>${(0, _sectionCardHelpers.formatMonthYear)(role.endDate)}</time>` : (0, _litHtml.html)`<span>Present</span>`}
+    </p>
+    ${role.description ? (0, _litHtml.html)`
+      <div class="resume-card__description-wrap">
+        <p class="resume-card__description-text" id=${roleDescriptionId}>${role.description}</p>
+        <solid-ui-button
+          type="button"
+          variant="secondary"
+          size="sm"
+          label="...more"
+          class="resume-card__description-toggle"
+          aria-controls=${roleDescriptionId}
+          aria-expanded="false"
+          hidden
+          @click=${_sectionCardHelpers.toggleDescription}
+        >
+          ...more
+        </solid-ui-button>
+      </div>
+    ` : ''}
     </li>
   `;
 }
@@ -54,13 +58,12 @@ function renderRoles(roles) {
   if (!roles || !roles.length) return (0, _litHtml.html)``;
   return (0, _litHtml.html)`${roles.map((role, index) => renderRole(role, index))}`;
 }
-const CVCard = (cvData, viewerMode) => {
-  void viewerMode;
+const CVCard = (cvData, _viewerMode) => {
   const hasRoles = Array.isArray(cvData) && cvData.length > 0;
   if (!hasRoles) return (0, _litHtml.html)``;
   return (0, _litHtml.html)`
-    <article class="cvCard" aria-label="Resume" data-testid="curriculum-vitae">
-      <section class="cvSection">
+    <article class="resume-card" aria-label="Resume" data-testid="curriculum-vitae">
+      <section class="resume-card__section">
         <ul role="list" aria-label="Work experience in chronological order">
           ${renderRoles(cvData)}
         </ul>
@@ -78,38 +81,43 @@ function renderResumeSectionDefault(store, subject, resumeDetails, viewerMode, o
   return showSection ? (0, _litHtml.html)`
     <section 
       aria-labelledby="cv-heading" 
-      class="profile__section border-lighter profile-section-collapsible profile-section-collapsible--inline-mobile-actions" 
+      data-profile-section="resume"
+      class="profile__section profile-section-collapsible profile-section-collapsible--inline-mobile-actions" 
       role="region"
       tabindex="-1"
       data-expanded="false"
     >
       <header class="profile__section-header profile-section-collapsible__header">
         <h2 id="cv-heading" tabindex="-1">${_texts.resumeHeadingText}</h2>
-        <div class="profile-section-collapsible__actions flex-column">
+        <div class="profile-section-collapsible__actions">
           ${isOwner ? (0, _litHtml.html)`
-            <button
+            <solid-ui-button
               type="button"
-              class="profile__action-button profile-action-text flex-center profile-section-collapsible__edit-button"
+              variant="secondary"
+              size="sm"
+              class="profile__action-button resume__edit-button profile-section-collapsible__edit-button"
               aria-label="Edit resume details"
               @click=${event => (0, _ResumeEditDialog.createResumeEditDialog)(event, store, subject, resumeDetails, viewerMode, onSaved)}
             >
               <span class="profile-section-collapsible__edit-label">${_profileIcons.editIcon} Edit</span>
               <span class="profile-section-collapsible__edit-icon" aria-hidden="true">${_profileIcons.editIcon}</span>
-            </button>
+            </solid-ui-button>
           ` : (0, _litHtml.html)``}
-          <button
+          <solid-ui-button
             type="button"
-            class="inline-flex-row"
+            variant="icon"
+            size="sm"
+            class="profile-section-collapsible__toggle-button"
             aria-label="Toggle resume section"
             aria-controls="cv-panel"
             aria-expanded="false"
             @click=${_collapsibleSection.toggleCollapsibleSection}
           >
-            <span class="profile-section-collapsible__chevron" aria-hidden="true">⌄</span>
-          </button>
+            <span slot="icon" class="profile-section-collapsible__chevron" aria-hidden="true">${_profileIcons.chevronDownIcon}</span>
+          </solid-ui-button>
         </div>
       </header>
-      <div id="cv-panel" class="profile-section-collapsible__content" aria-hidden="true">
+      <div id="cv-panel" class="profile-section-collapsible__content">
         ${hasResume ? cv : (0, _litHtml.html)`<p>No resume details added yet.</p>`}
       </div>
     </section>
@@ -117,35 +125,56 @@ function renderResumeSectionDefault(store, subject, resumeDetails, viewerMode, o
 }
 function renderOwnerEmptyResumeContent(store, subject, resumeDetails, viewerMode, onSaved) {
   return (0, _litHtml.html)`
-    <div class="profile__empty-state-content flex-column-center" role="group" aria-label="Empty resume section">
+    <div class="profile__empty-state-content" role="group" aria-label="Empty resume section">
       <h2 id="resume-heading" tabindex="-1">${_texts.resumeHeadingText}</h2>
       <p class="profile__empty-state-message">
         You haven't included any professional experience yet. Consider adding your work history to enhance your resume.
       </p>
     </div>
-    <button
+    <solid-ui-button
       type="button"
+      variant="secondary"
+      size="sm"
       class="profile__action-button--empty"
-      aria-label="Add resume details"
       @click=${event => {
     return (0, _ResumeEditDialog.createResumeEditDialog)(event, store, subject, resumeDetails, viewerMode, onSaved);
   }}
     >
       <span class="profile__action-icon" aria-hidden="true">${_profileIcons.plusDarkIcon} Add Resume</span>
-    </button>
+    </solid-ui-button>
 
   `;
 }
 function renderOwnerEmptyResumeSection(store, subject, resumeDetails, viewerMode, onSaved) {
   return (0, _litHtml.html)`
-    <section 
+    <section
       aria-labelledby="resume-heading" 
       data-profile-section="resume"
-      class="profile__section--empty border-lighter flex-column-center rounded-md gap-lg" 
+      class="profile__section--empty profile__section--empty-main profile-section-collapsible profile-section-collapsible--inline-mobile-actions profile-section-collapsible--empty-mobile-no-edit" 
       role="region"
       tabindex="-1"
+      data-expanded="false"
     >
-      ${renderOwnerEmptyResumeContent(store, subject, resumeDetails, viewerMode, onSaved)}
+      <header class="profile__section-header profile-section-collapsible__header">
+        <h2 id="resume-heading" tabindex="-1">${_texts.resumeHeadingText}</h2>
+        <div class="profile-section-collapsible__actions">
+          <solid-ui-button
+            type="button"
+            variant="icon"
+            size="sm"
+            class="profile-section-collapsible__toggle-button"
+            aria-label="Toggle resume section"
+            aria-controls="cv-panel"
+            aria-expanded="false"
+            @click=${_collapsibleSection.toggleCollapsibleSection}
+          >
+            <span slot="icon" class="profile-section-collapsible__chevron" aria-hidden="true">${_profileIcons.chevronDownIcon}</span>
+          </solid-ui-button>
+        </div>
+      </header>
+      <div id="cv-panel" class="profile-section-collapsible__content">
+        ${renderOwnerEmptyResumeContent(store, subject, resumeDetails, viewerMode, onSaved)}
+      </div>
     </section>
   `;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"mutations.d.ts","sourceRoot":"","sources":["../../../src/sections/resume/mutations.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAA0B,MAAM,QAAQ,CAAA;AAErE,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAkM7C,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAC,SAAS,CAAC,CAAA;AAEvD,wBAAsB,sBAAsB,CAAC,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,kBAAkB,iBAQlH"}
+{"version":3,"file":"mutations.d.ts","sourceRoot":"","sources":["../../../src/sections/resume/mutations.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAA0B,MAAM,QAAQ,CAAA;AAErE,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAmN7C,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAC,SAAS,CAAC,CAAA;AAEvD,wBAAsB,sBAAsB,CAAC,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,kBAAkB,iBASlH"}

package/lib/sections/resume/mutations.js

@@ -9,6 +9,7 @@ var _solidUi = require("solid-ui");
 var _rdfMutationHelpers = require("../shared/rdfMutationHelpers");
 var _idNodeFactory = require("../shared/idNodeFactory");
 var _texts = require("../../texts");
+var _debug = require("../../utils/debug");
 function asXsdDateLiteral(dateLike) {
   const value = (dateLike?.value || '').trim();
   if (!value) return null;
@@ -91,6 +92,9 @@ function buildOrganizationStatements(doc, membershipNode, resumeData) {
   if (resumeData.orgHomePage) {
     inserts.push((0, _rdflib.st)(organizationNode, _solidUi.ns.schema('uri'), (0, _rdflib.literal)(resumeData.orgHomePage), doc));
   }
+  if ((resumeData.orgPublicId || '').trim()) {
+    inserts.push((0, _rdflib.st)(organizationNode, _solidUi.ns.solid('publicId'), (0, _rdflib.sym)((resumeData.orgPublicId || '').trim()), doc));
+  }
   return inserts;
 }
 function buildResumeStatements(subject, doc, node, resumeData, includeMembershipLink = true) {
@@ -160,13 +164,23 @@ async function mutateResumeEntries(store, subject, resumeOps) {
   resumeOps.create.forEach(resume => {
     insertions.push(...buildResumeStatements(subject, doc, (0, _idNodeFactory.createIdNode)(doc), resume));
   });
-  await (0, _rdfMutationHelpers.applyUpdaterPatch)(store, deletions, insertions);
+  const shouldSerializeDocument = await (0, _rdfMutationHelpers.shouldForceDocumentPutForStatements)(store, doc, insertions);
+  await (0, _rdfMutationHelpers.runUpdateTransport)(store, doc, deletions, insertions, {
+    unsupportedMessage: _texts.updaterUnsupportedStoreErrorMessageText,
+    failureMessage: 'Failed to save resume updates',
+    useDavFallback: false,
+    usePutFallback: shouldSerializeDocument,
+    forcePut: shouldSerializeDocument
+  });
 }
 async function processResumeMutations(store, subject, mutationPlan) {
   try {
     await mutateResumeEntries(store, subject, mutationPlan);
   } catch (error) {
-    const message = error instanceof Error ? error.message : String(error);
-    throw new Error(`${_texts.mutationSaveResumeFailedPrefixText} ${message}`);
+    const rootError = error instanceof Error ? error : new Error(String(error));
+    (0, _debug.error)(_texts.resumeMutationSaveFailedDebugText, rootError);
+    throw new Error(_texts.saveResumeUpdatesFailedMessageText, {
+      cause: rootError
+    });
   }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"selectors.d.ts","sourceRoot":"","sources":["../../../src/sections/resume/selectors.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAiB,MAAM,QAAQ,CAAA;AAE5D,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAwKrC,wBAAgB,SAAS,CACvB,OAAO,EAAE,SAAS,EAClB,KAAK,EAAE,SAAS,GACf,WAAW,EAAE,CAOf"}
+{"version":3,"file":"selectors.d.ts","sourceRoot":"","sources":["../../../src/sections/resume/selectors.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAiB,MAAM,QAAQ,CAAA;AAE5D,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAyKrC,wBAAgB,SAAS,CACvB,OAAO,EAAE,SAAS,EAClB,KAAK,EAAE,SAAS,GACf,WAAW,EAAE,CAOf"}

package/lib/sections/resume/selectors.js

@@ -100,6 +100,7 @@ function getRoles(store, subject) {
       endDate,
       isCurrentRole,
       orgName,
+      orgPublicId: publicId?.value || '',
       orgType,
       orgLocation,
       orgHomePage,

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

@@ -16,6 +16,7 @@ export interface Role {
     endDate?: Literal;
     isCurrentRole?: boolean;
     orgName: string;
+    orgPublicId?: string;
     orgType?: string;
     orgLocation?: string;
     orgHomePage?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/sections/resume/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAE3C,MAAM,WAAW,aAAc,SAAQ,WAAW;CAAG;AAErD,MAAM,WAAW,WAAY,SAAQ,IAAI;IACvC,SAAS,EAAE,IAAI,CAAA;CAChB;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,SAAS,CAAA;CAClB;AAED,MAAM,WAAW,IAAI;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAGD,eAAO,MAAM,WAAW,UAA4C,CAAA;AAEpE,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,WAAW,EAAE,CAAC;CACtB;AAED,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,WAAW,EAAE,WAAW,EAAE,CAAC;IAC3B,UAAU,EAAE,WAAW,EAAE,CAAC;CAC3B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/sections/resume/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAE3C,MAAM,WAAW,aAAc,SAAQ,WAAW;CAAG;AAErD,MAAM,WAAW,WAAY,SAAQ,IAAI;IACvC,SAAS,EAAE,IAAI,CAAA;CAChB;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,SAAS,CAAA;CAClB;AAED,MAAM,WAAW,IAAI;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAGD,eAAO,MAAM,WAAW,UAA4C,CAAA;AAEpE,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,WAAW,EAAE,CAAC;CACtB;AAED,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,WAAW,EAAE,WAAW,EAAE,CAAC;IAC3B,UAAU,EAAE,WAAW,EAAE,CAAC;CAC3B"}

package/lib/sections/shared/collapsibleSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collapsibleSection.d.ts","sourceRoot":"","sources":["../../../src/sections/shared/collapsibleSection.ts"],"names":[],"mappings":"AAEA,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAkB3D"}
+{"version":3,"file":"collapsibleSection.d.ts","sourceRoot":"","sources":["../../../src/sections/shared/collapsibleSection.ts"],"names":[],"mappings":"AAEA,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAmB3D"}