profile-pane 3.2.0 → 3.2.2-test.0

package/lib/sections/projects/ProjectSection.css

@@ -0,0 +1,368 @@
+/* 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-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-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-more-button-margin-top: 0;
+  --project-card-collapsed-extra-display: flex;
+  --project-card-more-icon-transform: rotate(0deg);
+}
+
+/* Rail and cards */
+.project-card__rail {
+  display: flex;
+  gap: var(--project-card-rail-gap);
+  overflow-x: var(--project-card-rail-overflow-x, auto);
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  flex-wrap: var(--project-card-rail-wrap, nowrap);
+  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;
+  gap: var(--project-card-follow-label-gap);
+}
+
+.project-card__follow-label--hover {
+  display: none;
+}
+
+.project-card__follow-label--loading {
+  display: none;
+  align-items: center;
+  gap: var(--project-card-follow-label-gap);
+}
+
+solid-ui-button.project-card__follow-button:hover .project-card__follow-label--default,
+solid-ui-button.project-card__follow-button:focus-visible .project-card__follow-label--default,
+solid-ui-button.project-card__follow-button:focus-within .project-card__follow-label--default {
+  display: none;
+}
+
+solid-ui-button.project-card__follow-button:hover .project-card__follow-label--hover,
+solid-ui-button.project-card__follow-button:focus-visible .project-card__follow-label--hover,
+solid-ui-button.project-card__follow-button:focus-within .project-card__follow-label--hover {
+  display: inline-flex;
+}
+
+solid-ui-button.project-card__follow-button[data-loading='true'] {
+  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 {
+  display: none;
+}
+
+solid-ui-button.project-card__follow-button[data-loading='true'] .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);
+}
+
+.project-card__rail::-webkit-scrollbar-thumb {
+  background: var(--color-icon-muted, #90A1B9);
+  border-radius: 999px;
+}
+
+.project-card {
+  display: flex;
+  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);
+  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);
+  justify-content: center;
+  align-items: flex-start;
+  gap: var(--spacing-sm, 0.938rem);
+  flex-shrink: 0;
+}
+
+.project-card__link {
+  display: block;
+  width: 100%;
+  align-self: stretch;
+  color: inherit;
+  text-decoration: none;
+}
+
+.project-card__link:hover .project-card__title,
+.project-card__link:focus-visible .project-card__title {
+  text-decoration: underline;
+}
+
+.project-card__wrapper {
+  display: grid;
+  grid-template-columns: var(--project-card-thumb-column-width) 1fr;
+  gap: var(--project-card-wrapper-gap);
+  width: 100%;
+  align-items: start;
+  border-radius: var(--border-radius-md, 0.5rem);
+  border-bottom: 1px solid var(--color-border, var(--gray-200, #E5E7EB));
+}
+
+.project-card__thumb {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--project-card-thumb-size);
+  height: var(--project-card-thumb-size);
+  overflow: hidden;
+  border-radius: var(--border-radius-base, 0.3125rem);
+  background: var(--color-surface-placeholder, var(--gray-200, #E5E7EB));
+  padding: 0.656rem var(--spacing-2xs, 0.625rem);
+  aspect-ratio: 1/1;
+}
+
+.project-card__thumb-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.project-card__thumb-fallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  font-size: 0.72rem;
+  color: var(--color-text-detail, var(--slate-500, #62748E));
+  text-transform: uppercase;
+  letter-spacing: 0.04rem;
+}
+
+.project-card__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--project-card-content-gap);
+  min-width: 0;
+}
+
+.project-card__heading-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--project-card-heading-gap);
+  min-width: 0;
+}
+
+.project-card__title,
+.project-card__organization,
+.project-card__category,
+.project-card__meta,
+.project-card__description {
+  margin: 0;
+}
+
+.project-card__title {
+  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);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  align-self: stretch;
+}
+
+.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);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  line-height: 1.35;
+  align-self: stretch;
+}
+
+.project-card__category {
+  font-size: var(--font-size-xxs, 0.75rem);
+  font-weight: var(--font-weight-md, 500);
+}
+
+.project-card__category--project {
+  color: var(--purple-500, #AD46FF);
+}
+
+.project-card__category--community {
+  color: var(--yellow-700, #A65F00);
+}
+
+.project-card__category--unknown {
+  color: var(--color-text-control, var(--slate-700, #314158));
+}
+
+.project-card__meta {
+  margin-top: var(--project-card-meta-margin-top);
+  overflow-wrap: anywhere;
+  font-size: var(--project-card-meta-font-size, 0.86rem);
+}
+
+.project-card__footer {
+  display: flex;
+  justify-content: flex-start;
+  align-self: stretch;
+  margin-top: auto;
+  padding: var(--spacing-sm, 0.938rem) 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);
+  border: 1px solid var(--dialog-error-border, var(--pink-700, #ff98b3));
+  border-radius: var(--border-radius-base, 0.3125rem);
+  background: var(--dialog-error-background, var(--pink-500, #ffdde6));
+  color: var(--dialog-error-text, var(--red-600, #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;
+  justify-content: center;
+  transform: var(--project-card-more-icon-transform, rotate(0deg));
+  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'] {
+  --project-card-rail-wrap: wrap;
+  --project-card-rail-overflow-x: visible;
+  --project-card-rail-scroll-snap-type: none;
+  --project-card-flex: 1 1 100%;
+  --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));
+}
+
+.profile-section-collapsible[data-mobile-expanded="false"] .project-card:nth-child(n + 3) {
+  display: var(--project-card-collapsed-extra-display, flex);
+}
+
+solid-ui-button.project-card__more-button[data-mobile-expanded="true"] .project-card__more-icon {
+  --project-card-more-icon-transform: rotate(180deg);
+}
+
+@media (max-width: 576px) {
+  .profile__section[data-profile-section='projects'],
+  .profile__section--empty[data-profile-section='projects'] {
+    --project-card-rail-wrap: wrap;
+    --project-card-rail-overflow-x: visible;
+    --project-card-rail-scroll-snap-type: none;
+    --project-card-flex: 1 1 100%;
+    --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-collapsed-extra-display: none;
+  }
+}
+
+@container profile-pane (max-width: 576px) {
+  .profile__section[data-profile-section='projects'],
+  .profile__section--empty[data-profile-section='projects'] {
+    --project-card-rail-wrap: wrap;
+    --project-card-rail-overflow-x: visible;
+    --project-card-rail-scroll-snap-type: none;
+    --project-card-flex: 1 1 100%;
+    --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-collapsed-extra-display: none;
+  }
+}

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

@@ -1,6 +1,7 @@
+import 'solid-ui/components/actions/button';
 import { LiveStore, NamedNode } from 'rdflib';
 import { ViewerMode } from '../../types';
 import { ProjectDetails } from './types';
-import '../../styles/ProjectsCard.css';
+import './ProjectSection.css';
 export declare function renderProjectSection(store: LiveStore, subject: NamedNode, projects: ProjectDetails[], viewerMode: ViewerMode, 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,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,+BAA+B,CAAA;AAmRtC,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,oCAAoC,CAAA;AAC3C,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"}

package/lib/sections/projects/ProjectSection.js

@@ -5,13 +5,30 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.renderProjectSection = renderProjectSection;
 var _litHtml = require("lit-html");
+require("solid-ui/components/actions/button");
 var _texts = require("../../texts");
 var _ProjectEditDialog = require("./ProjectEditDialog");
 var _mutations = require("./mutations");
 var _profileIcons = require("../../icons-svg/profileIcons");
-require("../../styles/ProjectsCard.css");
+require("./ProjectSection.css");
 var _collapsibleSection = require("../shared/collapsibleSection");
+var _spinner = require("../../ui/spinner");
+var _errorDisplay = require("../../utils/errorDisplay");
 const MAX_VISIBLE_PROJECTS_MOBILE = 2;
+function setProjectsSectionError(section, message) {
+  const errorBox = section.querySelector('.profile-section-inline-error');
+  if (!errorBox) return;
+  if (!message) {
+    errorBox.textContent = '';
+    errorBox.hidden = true;
+    errorBox.setAttribute('aria-hidden', 'true');
+    return;
+  }
+  errorBox.textContent = message;
+  errorBox.hidden = false;
+  errorBox.setAttribute('aria-hidden', 'false');
+  errorBox.focus();
+}
 function toggleProjectsMobileList(event) {
   const button = event.currentTarget;
   const section = button?.closest('.profile-section-collapsible');
@@ -34,7 +51,7 @@ function renderProjectImage(src, altText) {
           loading="lazy"
         />
       ` : (0, _litHtml.html)`
-        <div class="project-card__thumb-fallback flex-center" role="img" aria-label=${altText} tabindex="0">
+        <div class="project-card__thumb-fallback" role="img" aria-label=${altText}>
           ${altText}
         </div>
       `;
@@ -55,22 +72,41 @@ function renderProject(project, store, subject, viewerMode, onSaved) {
   if (!project) return (0, _litHtml.html)``;
   const handleUnfollow = async event => {
     event.preventDefault();
+    event.stopPropagation();
     if (viewerMode !== 'owner') return;
+    const unfollowButton = event.currentTarget;
+    const section = event.currentTarget?.closest('[data-profile-section="projects"]');
     const removePlan = {
       create: [],
       update: [],
       remove: [toProjectRow(project, 'deleted')]
     };
-    await (0, _mutations.processProjectsMutations)(store, subject, removePlan);
-    if (onSaved) {
-      await onSaved();
+    try {
+      unfollowButton?.setAttribute('disabled', '');
+      unfollowButton?.setAttribute('data-loading', 'true');
+      unfollowButton?.setAttribute('aria-busy', 'true');
+      await (0, _mutations.processProjectsMutations)(store, subject, removePlan);
+      if (section) {
+        setProjectsSectionError(section, null);
+      }
+      if (onSaved) {
+        await onSaved();
+      }
+    } catch (error) {
+      if (section) {
+        setProjectsSectionError(section, (0, _errorDisplay.formatDisplayError)(error, _texts.unfollowProjectFailedMessageText));
+      }
+    } finally {
+      unfollowButton?.removeAttribute('disabled');
+      unfollowButton?.removeAttribute('data-loading');
+      unfollowButton?.setAttribute('aria-busy', 'false');
     }
   };
   const normalizedCategory = (project.category || '').trim().toLowerCase();
   const categoryModifier = normalizedCategory === 'project' ? 'project' : normalizedCategory === 'community' ? 'community' : 'unknown';
   const categoryLabel = normalizedCategory && normalizedCategory !== 'unknown' ? normalizedCategory.charAt(0).toUpperCase() + normalizedCategory.slice(1) : 'Uncategorized';
   return (0, _litHtml.html)`
-    <li class="project-card flex-column" role="listitem">
+    <li class="project-card" role="listitem">
       <a
         class="project-card__link"
         href=${project.url}
@@ -79,26 +115,33 @@ function renderProject(project, store, subject, viewerMode, onSaved) {
         aria-label=${project.title ? `Open ${project.title}` : 'Open project link'}
       >
         <div class="project-card__wrapper">
-          <div class="project-card__thumb flex-center">
+          <div class="project-card__thumb">
             ${renderProjectImage(project.imageUrl, project.title || 'Project preview')}
           </div>
           <div class="project-card__content">
-            <p class="project-card__title"><strong>${project.title || project.url}</strong></p>
-            <p class="project-card__organization">${project.orgName || 'Organization unknown'}</p>
+            <div class="project-card__heading-group">
+              <h3 class="project-card__title">${project.title || project.url}</h3>
+              <p class="project-card__organization">${project.orgName || 'Organization unknown'}</p>
+            </div>
             <p class="project-card__category project-card__category--${categoryModifier}">${categoryLabel}</p>
           </div>
         </div>
       </a>
       ${viewerMode === 'owner' ? (0, _litHtml.html)`
         <div class="project-card__footer">
-          <button
+          <solid-ui-button
             type="button"
-            class="project-card__follow-button flex-center gap-xxs"
+            variant="secondary"
+            size="sm"
+            label="Following"
+            class="project-card__follow-button"
             aria-label="Unfollow project"
             @click=${handleUnfollow}
           >
-            <span>${_profileIcons.checkMarkIcon} Following</span>
-          </button>
+            <span class="project-card__follow-label project-card__follow-label--default">${_profileIcons.checkMarkIcon} 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>
+          </solid-ui-button>
         </div>
       ` : (0, _litHtml.html)``}
     </li>
@@ -107,14 +150,16 @@ function renderProject(project, store, subject, viewerMode, onSaved) {
 function renderOwnerEmptyProjectsContent(store, subject, projectData, viewerMode, onSaved) {
   const projectDetails = projectData;
   return (0, _litHtml.html)`
-    <div class="profile__empty-state-content flex-column-center" role="group" aria-label="Empty projects section">
+    <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>
-    <button
+    <solid-ui-button
       type="button"
+      variant="secondary"
+      size="sm"
       class="profile__action-button--empty"
       aria-label="Add project details"
       @click=${event => {
@@ -122,7 +167,7 @@ function renderOwnerEmptyProjectsContent(store, subject, projectData, viewerMode
   }}
     >
       <span class="profile__action-icon" aria-hidden="true">${_profileIcons.plusDarkIcon} Add Project</span>
-    </button>
+    </solid-ui-button>
 
   `;
 }
@@ -131,11 +176,31 @@ function renderOwnerEmptyProjectSection(store, subject, projectData, viewerMode,
     <section 
       aria-labelledby="projects-heading" 
       data-profile-section="projects"
-      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"
     >
-      ${renderOwnerEmptyProjectsContent(store, subject, projectData, viewerMode, onSaved)}
+      <header class="profile__section-header profile-section-collapsible__header">
+        <h2 id="projects-heading" tabindex="-1">${_texts.projectsHeadingText}</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 projects section"
+            aria-controls="projects-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="projects-panel" class="profile-section-collapsible__content">
+        ${renderOwnerEmptyProjectsContent(store, subject, projectData, viewerMode, onSaved)}
+      </div>
     </section>
   `;
 }
@@ -149,7 +214,8 @@ function renderProjectSectionDefault(store, subject, projects, viewerMode, onSav
   const isOwner = viewerMode === 'owner';
   return (0, _litHtml.html)`
       <section
-        class="profile__section border-lighter profile-section-collapsible profile-section-collapsible--inline-mobile-actions"
+        class="profile__section profile-section-collapsible profile-section-collapsible--inline-mobile-actions"
+        data-profile-section="projects"
         aria-labelledby="projects-heading"
         role="region"
         tabindex="-1"
@@ -158,43 +224,50 @@ function renderProjectSectionDefault(store, subject, projects, viewerMode, onSav
       >
         <header class="profile__section-header profile-section-collapsible__header">
           <h2 id="projects-heading">${_texts.projectsHeadingText}</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 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 inline-flex-row">
-                  <span class="profile__add-more-icon inline-flex-row" aria-hidden="true">${_profileIcons.addIcon}</span>
-                  Add More
+                <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 profile-section-collapsible__edit-icon--add profile-section-collapsible__edit-icon--projects" aria-hidden="true">${_profileIcons.plusDarkIcon}</span>
-              </button>
+                <span class="profile-section-collapsible__edit-icon" aria-hidden="true">${_profileIcons.editIcon}</span>
+              </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 projects section"
               aria-controls="projects-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="projects-panel" class="profile-section-collapsible__content" aria-hidden="true">
+        <div id="projects-panel" class="profile-section-collapsible__content">
           ${hasProjects ? (0, _litHtml.html)`
                 <ul id="projects-rail" class="project-card__rail" role="list" aria-label="Known projects">
                   ${renderProjectSectionContent(projects, store, subject, viewerMode, onSaved)}
                 </ul>
                 ${hiddenProjectsCount > 0 ? (0, _litHtml.html)`
-                      <button
+                      <solid-ui-button
                         type="button"
+                        variant="secondary"
+                        size="sm"
+                        label="View More"
                         class="project-card__more-button"
                         aria-controls="projects-rail"
                         aria-expanded="false"
@@ -203,8 +276,17 @@ function renderProjectSectionDefault(store, subject, projects, viewerMode, onSav
                       >
                         <span class="project-card__more-icon" aria-hidden="true">${_profileIcons.twoDownArrowsIcon}</span>
                         <span class="project-card__more-label">View More</span>
-                      </button>
+                      </solid-ui-button>
                     ` : (0, _litHtml.html)``}
+                <div
+                  class="profile-section-inline-error"
+                  role="alert"
+                  aria-live="assertive"
+                  aria-atomic="true"
+                  aria-hidden="true"
+                  tabindex="-1"
+                  hidden
+                ></div>
               ` : (0, _litHtml.html)`<p>No projects added yet.</p>`}
         </div>
       </section>

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

@@ -1 +1 @@
-{"version":3,"file":"mutations.d.ts","sourceRoot":"","sources":["../../../src/sections/projects/mutations.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAW,MAAM,QAAQ,CAAA;AAEtD,OAAO,EAAE,mBAAmB,EAAc,MAAM,SAAS,CAAA;AAiNzD,wBAAsB,wBAAwB,CAAC,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,mBAAmB,iBAOrH"}
+{"version":3,"file":"mutations.d.ts","sourceRoot":"","sources":["../../../src/sections/projects/mutations.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAiB,MAAM,QAAQ,CAAA;AAE5D,OAAO,EAAE,mBAAmB,EAAc,MAAM,SAAS,CAAA;AAqLzD,wBAAsB,wBAAwB,CAAC,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,mBAAmB,iBAQrH"}