profile-pane 3.2.3-0 → 3.2.3-2

package/lib/sections/resume/ResumeSection.css

@@ -1,72 +1,14 @@
-/* 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);
+  --resume-card-item-gap: 12px;
+  --resume-card-title-size: var(--solid-ui-font-size-lg, 1.125rem);
+  --resume-card-organization-size: var(--solid-ui-font-size-md, 1rem);
+  --resume-card-location-size: var(--solid-ui-font-size-sm, 0.875rem);
+  --resume-card-period-size: var(--solid-ui-font-size-sm, 0.875rem);
+  --resume-card-description-size: var(--solid-ui-font-size-sm, 0.875rem);
 }
 
-/* Section layout */
 .resume-card__section {
-  margin-bottom: var(--resume-card-section-gap);
+  margin-bottom: 20px;
 }
 
 .resume-card__section > ul {
@@ -82,12 +24,12 @@ solid-ui-button.resume__edit-button:focus-visible::part(button) {
     "title period"
     "organization organization"
     "description description";
-  column-gap: var(--resume-card-column-gap);
-  row-gap: var(--resume-card-row-gap);
+  column-gap: 20px;
+  row-gap: 10px;
   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);
+  font-size: var(--solid-ui-font-size-md, 1rem);
+  line-height: 1.5;
   gap: 0;
 }
 
@@ -99,7 +41,7 @@ solid-ui-button.resume__edit-button:focus-visible::part(button) {
   grid-area: title;
   display: flex;
   align-items: baseline;
-  gap: var(--resume-card-header-gap);
+  gap: 15px;
   min-width: 0;
 }
 
@@ -112,10 +54,10 @@ solid-ui-button.resume__edit-button:focus-visible::part(button) {
 .resume-card__item-header h3,
 .resume-card__item-header h4 {
   min-width: 0;
-  color: var(--resume-card-title-color);
+  color: var(--color-text-subheading, var(--gray-900, #101828));
   font-size: var(--resume-card-title-size);
-  font-weight: var(--resume-card-title-weight);
-  line-height: var(--line-height-tight, 1.4);
+  font-weight: 600;
+  line-height: 1.4;
 }
 
 .resume-card__item-period {
@@ -123,39 +65,35 @@ solid-ui-button.resume__edit-button:focus-visible::part(button) {
   justify-self: end;
   text-align: right;
   margin: 0;
-  color: var(--resume-card-period-color);
+  color: var(--solid-ui-color-gray-600, #4A5565);
   font-size: var(--resume-card-period-size);
-  font-weight: var(--resume-card-period-weight);
-  line-height: var(--line-height-tight, 1.4);
+  font-weight: 400;
+  line-height: 1.4;
 }
 
 .resume-card__organization {
   grid-area: organization;
   margin: 0;
-  line-height: var(--line-height-base, 1.5);
+  line-height: 1.5;
 }
 
 .resume-card__organization-name {
-  color: var(--resume-card-organization-color);
+  color: var(--solid-ui-color-gray-600, #4A5565);
   font-size: var(--resume-card-organization-size);
-  font-weight: var(--resume-card-organization-weight);
+  font-weight: 500;
 }
 
 .resume-card__organization-separator,
 .resume-card__organization-location {
-  color: var(--resume-card-location-color);
+  color: var(--solid-ui-color-gray-600, #4A5565);
   font-size: var(--resume-card-location-size);
-  font-weight: var(--resume-card-location-weight);
+  font-weight: 400;
 }
 
 /* Description toggle */
 .resume-card__description-wrap {
+  --resume-card-description-offset: 15px;
   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;
@@ -169,15 +107,15 @@ solid-ui-button.resume__edit-button:focus-visible::part(button) {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   line-clamp: 2;
-  color: var(--resume-card-description-color);
+  color: var(--solid-ui-color-gray-700, #364153);
   font-size: var(--resume-card-description-size);
-  font-weight: var(--resume-card-description-weight);
-  line-height: var(--line-height-base, 1.5);
+  font-weight: 400;
+  line-height: 1.5;
   overflow: hidden;
 }
 
 .resume-card__description-text--overflowing {
-  padding-right: var(--resume-description-overflow-padding-inline-end);
+  padding-right: 72px;
 }
 
 .resume-card__description-text--expanded {
@@ -193,9 +131,9 @@ solid-ui-button.resume-card__description-toggle {
   margin: 0;
   padding: 0;
   position: absolute;
-  right: var(--resume-description-toggle-inline-offset);
+  right: 0;
   bottom: 0;
-  background-color: var(--color-card-bg, #FFF);
+  background-color: var(--solid-ui-color-white, #FFF);
   white-space: nowrap;
   z-index: 0;
 }
@@ -203,36 +141,25 @@ solid-ui-button.resume-card__description-toggle {
 .resume-card__description-toggle {
   border: 0;
   background: transparent;
-  color: var(--color-primary, #7C4DFF);
+  color: var(--solid-ui-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);
+  font-size: var(--solid-ui-font-size-sm, 0.875rem);
+  line-height: 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);
+solid-ui-button.resume-card__description-toggle[hidden],
+.resume-card__description-toggle[hidden] {
+  display: none !important;
 }
 
 .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);
+  top: calc(100% - 1.5em + 0.28em - 11px);
   bottom: auto;
-  transform: translateY(var(--resume-description-toggle-line-translate-y));
+  transform: translateY(7px);
 }
 
 .resume-card__description-text--expanded + .resume-card__description-toggle,
@@ -258,27 +185,24 @@ solid-ui-button.resume-card__description-toggle {
 .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);
+  font-size: var(--solid-ui-font-size-md, 1rem);
+  line-height: 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);
+  color: var(--solid-ui-color-gray-800, #101828);
+  font-size: 1.375rem;
+  font-weight: 500;
+  line-height: 1.4;
   margin-bottom: var(--resume-card-item-gap);
-  border-bottom: 1px solid var(--resume-card-heading-border);
+  border-bottom: 1px solid var(--color-border-pale, #eee);
   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-location-size: var(--solid-ui-font-size-sm, 0.875rem);
+  --resume-card-period-size: 0.75rem;
   --resume-card-description-offset: 0rem;
   grid-template-columns: minmax(0, 1fr);
   grid-template-areas:
@@ -299,11 +223,8 @@ solid-ui-button.resume-card__description-toggle {
 
 @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-location-size: var(--solid-ui-font-size-sm, 0.875rem);
+    --resume-card-period-size: 0.75rem;
     --resume-card-description-offset: 0rem;
     grid-template-columns: minmax(0, 1fr);
     grid-template-areas:
@@ -325,11 +246,8 @@ solid-ui-button.resume-card__description-toggle {
 
 @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-location-size: var(--solid-ui-font-size-sm, 0.875rem);
+    --resume-card-period-size: 0.75rem;
     --resume-card-description-offset: 0rem;
     grid-template-columns: minmax(0, 1fr);
     grid-template-areas:

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

@@ -1,8 +1,8 @@
 import 'solid-ui/components/button';
 import { RoleDetails } from './types';
-import { ViewerMode } from '../../types';
+import { Layout, ViewerMode } from '../../types';
 import './ResumeSection.css';
 import { LiveStore, NamedNode } from 'rdflib';
-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> | "";
+export declare const CVCard: (cvData: RoleDetails[]) => import("lit-html").TemplateResult<1>;
+export declare function renderCVSection(store: LiveStore, subject: NamedNode, roles: RoleDetails[], viewerMode: ViewerMode, layout: Layout, 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,4BAA4B,CAAA;AACnC,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"}
+{"version":3,"file":"ResumeSection.d.ts","sourceRoot":"","sources":["../../../src/sections/resume/ResumeSection.ts"],"names":[],"mappings":"AACA,OAAO,4BAA4B,CAAA;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AACrC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAChD,OAAO,qBAAqB,CAAA;AAE5B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AA8D7C,eAAO,MAAM,MAAM,GACjB,QAAQ,WAAW,EAAE,yCActB,CAAA;AA+HD,wBAAgB,eAAe,CAC7B,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,KAAK,EAAE,WAAW,EAAE,EACpB,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,wCAYrC"}

package/lib/sections/resume/ResumeSection.js

@@ -13,6 +13,7 @@ var _ResumeEditDialog = require("./ResumeEditDialog");
 var _sectionCardHelpers = require("../shared/sectionCardHelpers");
 var _collapsibleSection = require("../shared/collapsibleSection");
 var _profileIcons = require("../../icons-svg/profileIcons");
+var _responsiveActionButton = require("../../ui/responsiveActionButton");
 function renderRole(role, index) {
   if (!role) return (0, _litHtml.html)``;
   const roleTitleId = `cv-role-title-${index}`;
@@ -37,20 +38,17 @@ function renderRole(role, index) {
       <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"
+          variant="tertiary"
           class="resume-card__description-toggle"
           aria-controls=${roleDescriptionId}
-          aria-expanded="false"
+          aria-expanded=${'false'}
           hidden
           @click=${_sectionCardHelpers.toggleDescription}
         >
           ...more
         </solid-ui-button>
       </div>
-    ` : ''}
+    ` : _litHtml.nothing}
     </li>
   `;
 }
@@ -58,7 +56,7 @@ 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) => {
+const CVCard = cvData => {
   const hasRoles = Array.isArray(cvData) && cvData.length > 0;
   if (!hasRoles) return (0, _litHtml.html)``;
   return (0, _litHtml.html)`
@@ -72,13 +70,12 @@ const CVCard = (cvData, _viewerMode) => {
   `;
 };
 exports.CVCard = CVCard;
-function renderResumeSectionDefault(store, subject, resumeDetails, viewerMode, onSaved) {
+function renderResumeSectionDefault(store, subject, resumeDetails, viewerMode, layout, onSaved) {
   (0, _sectionCardHelpers.scheduleDescriptionOverflowCheck)();
   const hasResume = resumeDetails.length > 0;
-  const showSection = true;
-  const cv = hasResume ? CVCard(resumeDetails, viewerMode) : (0, _litHtml.html)``;
+  const cv = hasResume ? CVCard(resumeDetails) : _litHtml.nothing;
   const isOwner = viewerMode === 'owner';
-  return showSection ? (0, _litHtml.html)`
+  return (0, _litHtml.html)`
     <section 
       aria-labelledby="cv-heading" 
       data-profile-section="resume"
@@ -91,22 +88,18 @@ function renderResumeSectionDefault(store, subject, resumeDetails, viewerMode, o
         <h2 id="cv-heading" tabindex="-1">${_texts.resumeHeadingText}</h2>
         <div class="profile-section-collapsible__actions">
           ${isOwner ? (0, _litHtml.html)`
-            <solid-ui-button
-              type="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>
-            </solid-ui-button>
-          ` : (0, _litHtml.html)``}
+            ${(0, _responsiveActionButton.renderResponsiveActionButton)({
+    layout,
+    className: 'profile-section-collapsible__edit-button',
+    ariaLabel: 'Edit resume details',
+    onClick: event => (0, _ResumeEditDialog.createResumeEditDialog)(event, store, subject, resumeDetails, viewerMode, onSaved),
+    desktopIcon: (0, _litHtml.html)`<span slot="left-icon" class="profile-section-collapsible__action-label profile__add-more-icon" aria-hidden="true">${_profileIcons.editIcon}</span>`,
+    desktopLabel: 'Edit',
+    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 resume section"
             aria-controls="cv-panel"
@@ -121,28 +114,23 @@ function renderResumeSectionDefault(store, subject, resumeDetails, viewerMode, o
         ${hasResume ? cv : (0, _litHtml.html)`<p>No resume details added yet.</p>`}
       </div>
     </section>
-  ` : '';
+  `;
 }
 function renderOwnerEmptyResumeContent(store, subject, resumeDetails, viewerMode, onSaved) {
   return (0, _litHtml.html)`
     <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>
     <solid-ui-button
-      type="button"
       variant="secondary"
-      size="sm"
       class="profile__action-button--empty"
       @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>
+      <span slot="left-icon" class="profile__action-icon" aria-hidden="true">${_profileIcons.plusDarkIcon}</span>
+       Add Resume
     </solid-ui-button>
-
   `;
 }
 function renderOwnerEmptyResumeSection(store, subject, resumeDetails, viewerMode, onSaved) {
@@ -159,9 +147,7 @@ function renderOwnerEmptyResumeSection(store, subject, resumeDetails, viewerMode
         <h2 id="resume-heading" tabindex="-1">${_texts.resumeHeadingText}</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 resume section"
             aria-controls="cv-panel"
@@ -178,12 +164,12 @@ function renderOwnerEmptyResumeSection(store, subject, resumeDetails, viewerMode
     </section>
   `;
 }
-function renderCVSection(store, subject, roles, viewerMode, onSaved) {
+function renderCVSection(store, subject, roles, viewerMode, layout, onSaved) {
+  const currentLayout = layout || 'desktop';
   const resumeDetails = roles || [];
   const hasResume = resumeDetails.length > 0;
   const showOwnerEmptyResume = !hasResume && viewerMode === 'owner';
-  const showSection = true;
-  return showSection ? (0, _litHtml.html)`
-    ${showOwnerEmptyResume ? renderOwnerEmptyResumeSection(store, subject, resumeDetails, viewerMode, onSaved) : renderResumeSectionDefault(store, subject, resumeDetails, viewerMode, onSaved)}
-  ` : '';
+  return (0, _litHtml.html)`
+    ${showOwnerEmptyResume ? renderOwnerEmptyResumeSection(store, subject, resumeDetails, viewerMode, onSaved) : renderResumeSectionDefault(store, subject, resumeDetails, viewerMode, currentLayout, onSaved)}
+  `;
 }

package/lib/sections/shared/sectionCardHelpers.js

@@ -11,17 +11,6 @@ exports.toggleDescription = toggleDescription;
 exports.updateDescriptionOverflow = updateDescriptionOverflow;
 let descriptionResizeBound = false;
 const DESCRIPTION_MAX_LINES = 2;
-function getLineHeightPx(computed) {
-  const parsedLineHeight = Number.parseFloat(computed.lineHeight);
-  if (Number.isFinite(parsedLineHeight)) {
-    return parsedLineHeight;
-  }
-  const parsedFontSize = Number.parseFloat(computed.fontSize);
-  if (Number.isFinite(parsedFontSize)) {
-    return parsedFontSize * 1.5;
-  }
-  return 24;
-}
 function getExpandedTextHeight(textEl) {
   const previousDisplay = textEl.style.display;
   const previousOverflow = textEl.style.overflow;
@@ -49,6 +38,17 @@ function getExpandedTextHeight(textEl) {
   }
   return naturalHeight;
 }
+function getLineHeightPx(computed) {
+  const parsedLineHeight = Number.parseFloat(computed.lineHeight);
+  if (Number.isFinite(parsedLineHeight)) {
+    return parsedLineHeight;
+  }
+  const parsedFontSize = Number.parseFloat(computed.fontSize);
+  if (Number.isFinite(parsedFontSize)) {
+    return parsedFontSize * 1.5;
+  }
+  return 24;
+}
 function isTextOverflowingClamp(textEl, maxLines) {
   const computed = window.getComputedStyle(textEl);
   const lineHeight = getLineHeightPx(computed);
@@ -137,10 +137,10 @@ function toggleDescription(event) {
   if (!button) return;
   const descriptionId = button.getAttribute('aria-controls');
   if (!descriptionId) return;
-  const textEl = document.getElementById(descriptionId);
-  if (!textEl) return;
-  const expandedClass = textEl.matches('.resume-card__description-text') ? 'resume-card__description-text--expanded' : textEl.matches('.education-card__description-text') ? 'education-card__description-text--expanded' : textEl.matches('.bio-card__description-text') ? 'bio-card__description-text--expanded' : 'isExpanded';
-  const isExpanded = textEl.classList.toggle(expandedClass);
+  const textElement = document.getElementById(descriptionId);
+  if (!textElement) return;
+  const expandedClass = textElement.matches('.resume-card__description-text') ? 'resume-card__description-text--expanded' : textElement.matches('.education-card__description-text') ? 'education-card__description-text--expanded' : textElement.matches('.bio-card__description-text') ? 'bio-card__description-text--expanded' : 'isExpanded';
+  const isExpanded = textElement.classList.toggle(expandedClass);
   button.setAttribute('aria-expanded', isExpanded ? 'true' : 'false');
   button.textContent = isExpanded ? '...less' : '...more';
   if (!isExpanded) {

package/lib/sections/skills/SkillsEditDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SkillsEditDialog.d.ts","sourceRoot":"","sources":["../../../src/sections/skills/SkillsEditDialog.ts"],"names":[],"mappings":"AAEA,OAAO,4BAA4B,CAAA;AACnC,OAAO,8BAA8B,CAAA;AACrC,OAAO,EAAE,YAAY,EAAY,MAAM,SAAS,CAAA;AAChD,OAAO,8BAA8B,CAAA;AACrC,OAAO,0CAA0C,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AA8YxC,wBAAsB,sBAAsB,CAC1C,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,MAAM,EAAE,YAAY,EAAE,EACtB,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,iBAkDrC"}
+{"version":3,"file":"SkillsEditDialog.d.ts","sourceRoot":"","sources":["../../../src/sections/skills/SkillsEditDialog.ts"],"names":[],"mappings":"AAEA,OAAO,4BAA4B,CAAA;AACnC,OAAO,8BAA8B,CAAA;AACrC,OAAO,EAAE,YAAY,EAAY,MAAM,SAAS,CAAA;AAChD,OAAO,8BAA8B,CAAA;AACrC,OAAO,0CAA0C,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AA4YxC,wBAAsB,sBAAsB,CAC1C,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,MAAM,EAAE,YAAY,EAAE,EACtB,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,iBAkDrC"}

package/lib/sections/skills/SkillsEditDialog.js

@@ -230,9 +230,7 @@ function renderSkillInputRow({
       </label>
       <div class="profile-edit-dialog__actions profile-edit-dialog__actions--edge">
         <solid-ui-button
-          type="button"
-          variant="icon"
-          size="md"
+          variant="ghost"
           class="profile-edit-dialog__delete-button"
           aria-label=${`Delete skill ${displayIndex + 1}`}
           title=${_texts.deleteEntryButtonTitleText}