profile-pane 3.2.3-0 → 3.2.3-2

package/lib/sections/skills/SkillsSection.css

@@ -1,4 +1,3 @@
-/* Skills list */
 .skills__list {
   display: flex;
   flex-direction: row;
@@ -11,13 +10,7 @@
   list-style: none;
   margin: 0;
   padding: 0;
-  gap: var(--spacing-base, 0.5rem);
-}
-
-.skills__item,
-.skills__remove-button svg,
-solid-ui-button.skills__remove-button {
-  --skills-remove-icon-size: var(--icon-xxs, 1rem);
+  gap: 8px;
 }
 
 /* Skill chip */
@@ -25,10 +18,10 @@ solid-ui-button.skills__remove-button {
   display: inline-flex;
   align-items: center;
   justify-content: flex-start;
-  gap: 0.375rem;
-  padding: var(--spacing-base, 0.5rem) var(--spacing-2xs, 0.625rem);
-  border-radius: var(--border-radius-base, 0.3125rem);
-  background: var(--color-surface-chip, var(--gray-100, #F3F4F6));
+  gap: 6px;
+  padding: 8px 10px;
+  border-radius: 5px;
+  background: var(--solid-ui-color-gray-100, #F3F4F6);
   width: fit-content;
   max-width: 100%;
 }
@@ -40,8 +33,8 @@ solid-ui-button.skills__remove-button {
 .skills__item-label {
   display: inline;
   color: var(--color-text-strong, var(--slate-900, #0F172B));
-  font-size: var(--font-size-sm, 0.875rem);
-  font-weight: var(--font-weight-md, 500);
+  font-size: var(--solid-ui-font-size-sm, 0.875rem);
+  font-weight: 500;
   line-height: 1.2;
   overflow-wrap: anywhere;
 }
@@ -52,51 +45,23 @@ solid-ui-button.skills__remove-button {
   white-space: nowrap;
 }
 
-.skills__item-tail::before {
-  content: '\00a0';
-}
-
 .skills__empty-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
 
-/* Remove button */
-solid-ui-button.skills__remove-button {
-  width: var(--skills-remove-icon-size);
-  height: var(--skills-remove-icon-size);
-  line-height: 0;
-  vertical-align: text-top;
-  --button-height-sm: var(--skills-remove-icon-size);
-  --button-padding-sm: 0;
-  --button-icon-size-sm: var(--skills-remove-icon-size);
-  --button-background: transparent;
-  --button-border-width: 0;
-  --button-border: transparent;
-  --button-text: currentColor;
-  --button-hover-background: transparent;
-  --button-hover-border: transparent;
-  --button-hover-text: currentColor;
-}
-
 solid-ui-button.skills__remove-button[data-loading='true'] {
   pointer-events: none;
 }
 
-.skills__remove-button svg {
-  display: block;
-  width: var(--skills-remove-icon-size);
-  height: var(--skills-remove-icon-size);
-}
-
 .profile__section[data-profile-section='skills'] .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;
@@ -110,18 +75,14 @@ solid-ui-button.skills__remove-button[data-loading='true'] {
   display: inline-flex;
   align-items: center;
   justify-content: flex-start;
-  gap: 0.375rem;
-  padding: var(--spacing-base, 0.5rem) var(--spacing-2xs, 0.625rem);
+  gap: 6px;
+  padding: 8px 10px;
   width: fit-content;
   max-width: 100%;
 }
 
 :is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .skills__item-label {
-  font-size: var(--font-size-sm, 0.875rem);
-}
-
-:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .skills__item-tail::before {
-  content: none;
+  font-size: var(--solid-ui-font-size-sm, 0.875rem);
 }
 
 @media (max-width: 576px) {
@@ -133,18 +94,14 @@ solid-ui-button.skills__remove-button[data-loading='true'] {
     display: inline-flex;
     align-items: center;
     justify-content: flex-start;
-    gap: 0.375rem;
-    padding: var(--spacing-base, 0.5rem) var(--spacing-2xs, 0.625rem);
+    gap: 6px;
+    padding: 8px 10px;
     width: fit-content;
     max-width: 100%;
   }
 
   .skills__item-label {
-    font-size: var(--font-size-sm, 0.875rem);
-  }
-
-  .skills__item-tail::before {
-    content: none;
+    font-size: var(--solid-ui-font-size-sm, 0.875rem);
   }
 }
 
@@ -157,17 +114,13 @@ solid-ui-button.skills__remove-button[data-loading='true'] {
     display: inline-flex;
     align-items: center;
     justify-content: flex-start;
-    gap: 0.375rem;
-    padding: var(--spacing-base, 0.5rem) var(--spacing-2xs, 0.625rem);
+    gap: 6px;
+    padding: 8px 10px;
     width: fit-content;
     max-width: 100%;
   }
 
   .skills__item-label {
-    font-size: var(--font-size-sm, 0.875rem);
-  }
-
-  .skills__item-tail::before {
-    content: none;
+    font-size: var(--solid-ui-font-size-sm, 0.875rem);
   }
 }

package/lib/sections/skills/SkillsSection.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 './SkillsSection.css';
 import { SkillDetails } from './types';
-export declare function renderSkillsSection(store: LiveStore, subject: NamedNode, skills: SkillDetails[], viewerMode: ViewerMode, onSaved?: () => Promise<void> | void): import("lit-html").TemplateResult<1> | "";
+export declare function renderSkillsSection(store: LiveStore, subject: NamedNode, skills: SkillDetails[], viewerMode: ViewerMode, layout: Layout, onSaved?: () => Promise<void> | void): import("lit-html").TemplateResult<1>;
 //# sourceMappingURL=SkillsSection.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SkillsSection.d.ts","sourceRoot":"","sources":["../../../src/sections/skills/SkillsSection.ts"],"names":[],"mappings":"AACA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AACxC,OAAO,qBAAqB,CAAA;AAE5B,OAAO,EAAE,YAAY,EAAY,MAAM,SAAS,CAAA;AA6PhD,wBAAgB,mBAAmB,CACjC,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,6CAYrC"}
+{"version":3,"file":"SkillsSection.d.ts","sourceRoot":"","sources":["../../../src/sections/skills/SkillsSection.ts"],"names":[],"mappings":"AACA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAChD,OAAO,qBAAqB,CAAA;AAE5B,OAAO,EAAE,YAAY,EAAY,MAAM,SAAS,CAAA;AAsOhD,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,MAAM,EAAE,YAAY,EAAE,EACtB,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,wCAYrC"}

package/lib/sections/skills/SkillsSection.js

@@ -14,6 +14,7 @@ var _texts = require("../../texts");
 var _collapsibleSection = require("../shared/collapsibleSection");
 var _mutations = require("./mutations");
 var _errorDisplay = require("../../utils/errorDisplay");
+var _responsiveActionButton = require("../../ui/responsiveActionButton");
 const removeSkillFailedMessageText = 'Unable to remove your skill.';
 function setSkillsSectionError(section, message) {
   const errorBox = section.querySelector('.profile-section-inline-error');
@@ -36,7 +37,7 @@ function renderSkillItem(detail, store, subject, viewerMode, onSaved) {
     if (viewerMode !== 'owner') return;
     const removeButton = event.currentTarget;
     const skillRow = removeButton?.closest('.skills__item');
-    const section = event.currentTarget?.closest('[data-profile-section="skills"]');
+    const section = removeButton?.closest('[data-profile-section="skills"]');
     const removeRow = {
       name: detail.name,
       publicId: detail.publicId,
@@ -76,21 +77,18 @@ function renderSkillItem(detail, store, subject, viewerMode, onSaved) {
       ${viewerMode === 'owner' ? (0, _litHtml.html)`
             <span class="skills__item-tail">
               <solid-ui-button
-                type="button"
-                variant="icon"
-                size="sm"
-                class="skills__remove-button"
+                variant="ghost"
                 aria-label=${`Remove ${detail.name} skill`}
                 @click=${handleRemove}
               >
                 <span slot="icon" aria-hidden="true">${_profileIcons.deleteIcon}</span>
               </solid-ui-button>
             </span>
-          ` : ''}
+          ` : _litHtml.nothing}
     </li>
   `;
 }
-function renderSkillsSectionDefault(store, subject, skills, viewerMode, onSaved) {
+function renderSkillsSectionDefault(store, subject, skills, viewerMode, layout, onSaved) {
   const hasSkills = Array.isArray(skills) && skills.length > 0;
   const isOwner = viewerMode === 'owner';
   return (0, _litHtml.html)`
@@ -106,25 +104,18 @@ function renderSkillsSectionDefault(store, subject, skills, viewerMode, onSaved)
         <h3 id="skills-heading">${_texts.skillsHeadingText}</h3>
         <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 skills"
-              @click=${event => (0, _SkillsEditDialog.createSkillsEditDialog)(event, store, subject, skills, 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 skills',
+    onClick: event => (0, _SkillsEditDialog.createSkillsEditDialog)(event, store, subject, skills, 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 skills section"
             aria-controls="skills-panel"
@@ -157,19 +148,16 @@ function renderSkillsSectionDefault(store, subject, skills, viewerMode, onSaved)
     </section>
   `;
 }
-function renderOwnerEmptySkillsContent(_store, _subject, _skills, _viewerMode, _onSaved) {
+function renderOwnerEmptySkillsContent() {
   return (0, _litHtml.html)`
       <div class="profile__empty-state-content" role="group" aria-label="Empty skills section">    
         <div class="skills__empty-icon-wrapper">
           <span class="skills__empty-icon">${_profileIcons.lighteningIcon}</span>
         </div>
-        <p class="profile__empty-state-message skills__empty-message">
-            No skills added yet.
-        </p>
       </div>
   `;
 }
-function renderOwnerEmptySkillsSection(store, subject, skills, viewerMode, onSaved) {
+function renderOwnerEmptySkillsSection(store, subject, skills, viewerMode, layout, onSaved) {
   return (0, _litHtml.html)`
     <section 
       aria-labelledby="skills-heading" 
@@ -182,26 +170,19 @@ function renderOwnerEmptySkillsSection(store, subject, skills, viewerMode, onSav
       <header class="profile__section-header profile-section-collapsible__header">
         <h3 id="skills-heading" tabindex="-1">${_texts.skillsHeadingText}</h3>
         <div class="profile-section-collapsible__actions">
+          ${(0, _responsiveActionButton.renderResponsiveActionButton)({
+    layout,
+    className: 'profile-section-collapsible__edit-button',
+    ariaLabel: 'Add skills',
+    onClick: event => {
+      return (0, _SkillsEditDialog.createSkillsEditDialog)(event, store, subject, skills, 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>`
+  })}
           <solid-ui-button
-            type="button"
-            variant="secondary"
-            size="sm"
-            class="profile__action-button profile-action-text profile-section-collapsible__edit-button"
-            aria-label="Add skills"
-            @click=${event => {
-    return (0, _SkillsEditDialog.createSkillsEditDialog)(event, store, subject, skills, 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>
-          <solid-ui-button
-            type="button"
-            variant="icon"
-            size="sm"
+            variant="ghost"
             class="profile-section-collapsible__toggle-button"
             aria-label="Toggle skills section"
             aria-controls="skills-panel"
@@ -213,17 +194,17 @@ function renderOwnerEmptySkillsSection(store, subject, skills, viewerMode, onSav
         </div>
       </header>
       <div id="skills-panel" class="profile-section-collapsible__content">
-        ${renderOwnerEmptySkillsContent(store, subject, skills, viewerMode, onSaved)}
+        ${renderOwnerEmptySkillsContent()}
       </div>
     </section>
   `;
 }
-function renderSkillsSection(store, subject, skills, viewerMode, onSaved) {
+function renderSkillsSection(store, subject, skills, viewerMode, layout, onSaved) {
+  const currentLayout = layout || 'desktop';
   const safeSkills = skills || [];
   const hasSkills = Array.isArray(safeSkills) && safeSkills.length > 0;
   const showOwnerEmptySkills = !hasSkills && viewerMode === 'owner';
-  const showSection = true;
-  return showSection ? (0, _litHtml.html)`
-    ${showOwnerEmptySkills ? renderOwnerEmptySkillsSection(store, subject, safeSkills, viewerMode, onSaved) : renderSkillsSectionDefault(store, subject, safeSkills, viewerMode, onSaved)}
-  ` : '';
+  return (0, _litHtml.html)`
+    ${showOwnerEmptySkills ? renderOwnerEmptySkillsSection(store, subject, safeSkills, viewerMode, currentLayout, onSaved) : renderSkillsSectionDefault(store, subject, safeSkills, viewerMode, currentLayout, onSaved)}
+  `;
 }

package/lib/sections/social/SocialEditDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SocialEditDialog.d.ts","sourceRoot":"","sources":["../../../src/sections/social/SocialEditDialog.ts"],"names":[],"mappings":"AAEA,OAAO,4BAA4B,CAAA;AACnC,OAAO,4BAA4B,CAAA;AACnC,OAAO,KAAK,EAAE,OAAO,EAAa,MAAM,SAAS,CAAA;AACjD,OAAO,0CAA0C,CAAA;AACjD,OAAO,8BAA8B,CAAA;AACrC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AA4hBxC,wBAAsB,sBAAsB,CAC1C,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,cAAc,EAAE,OAAO,EAAE,EACzB,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,iBAgDrC"}
+{"version":3,"file":"SocialEditDialog.d.ts","sourceRoot":"","sources":["../../../src/sections/social/SocialEditDialog.ts"],"names":[],"mappings":"AAEA,OAAO,4BAA4B,CAAA;AACnC,OAAO,4BAA4B,CAAA;AACnC,OAAO,KAAK,EAAE,OAAO,EAAa,MAAM,SAAS,CAAA;AACjD,OAAO,0CAA0C,CAAA;AACjD,OAAO,8BAA8B,CAAA;AACrC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAuhBxC,wBAAsB,sBAAsB,CAC1C,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,cAAc,EAAE,OAAO,EAAE,EACzB,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,iBAgDrC"}

package/lib/sections/social/SocialEditDialog.js

@@ -197,10 +197,8 @@ function renderSocialInputRow({
       @drop=${event => onDrop(event, index)}
     >
       <solid-ui-button
-        type="button"
         class="profile-edit-dialog__drag-handle"
-        variant="icon"
-        size="md"
+        variant="ghost"
         aria-label=${`Reorder social account ${displayIndex + 1}`}
         title="Drag to reorder"
         draggable="true"
@@ -211,7 +209,7 @@ function renderSocialInputRow({
         @pointerup=${event => onPointerUp(event)}
         @pointercancel=${event => onPointerCancel(event)}
       >
-        <span slot="icon" class="profile-edit-dialog__drag-handle-icon" aria-hidden="true">${_profileIcons.bentoIcon}</span>
+        <span slot="icon" aria-hidden="true">${_profileIcons.bentoIcon}</span>
       </solid-ui-button>
       <img 
         class="profile-edit-dialog__social-icon" 
@@ -243,15 +241,12 @@ function renderSocialInputRow({
       </label>
       <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 social account ${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>

package/lib/sections/social/SocialSection.css

@@ -1,20 +1,12 @@
-/* Social section styles. */
-
 .profile__section[data-profile-section='social'],
 .profile__section--empty[data-profile-section='social'] {
   --social-card-collapsed-columns: repeat(5, max-content);
-  --social-card-expanded-columns: repeat(3, max-content);
   --social-card-icon-size: var(--icon-base, 2rem);
   --social-card-list-display: flex;
   --social-card-list-columns: none;
-  --social-card-list-gap: var(--spacing-xxs, 0.3125rem);
-  --social-card-link-gap: var(--spacing-xs, 0.75rem);
-  --social-card-link-padding: var(--spacing-xs, 0.75rem);
-  --social-card-link-hover-background: var(--color-surface-accent-subtle, var(--lavender-300, #e6dcff));
   --social-card-hidden-item-display: flex;
   --social-card-more-button-display: none;
-  --social-card-more-button-margin-top: var(--spacing-xs, 0.75rem);
-  border: var(--border-width-thin, 1px) solid var(--color-border-lighter, #D1D5DB);
+  border: 1px solid var(--color-border-lighter, #D1D5DB);
 }
 
 .profile__section--empty[data-profile-section='social'] {
@@ -23,7 +15,6 @@
   align-items: center;
 }
 
-/* Card and list */
 .social-card,
 .social-card__list {
   width: 100%;
@@ -37,7 +28,7 @@
   grid-template-columns: var(--social-card-list-columns);
   flex-wrap: wrap;
   justify-content: flex-start;
-  gap: var(--social-card-list-gap);
+  gap: 5px;
   margin: 0;
   padding: 0;
   list-style: none;
@@ -52,7 +43,7 @@
 
 .profile__section--empty[data-profile-section='social'] .profile__empty-state-content {
   flex-direction: column;
-  gap: var(--spacing-2xs, 0.625rem);
+  gap: 10px;
 }
 
 .social__empty-icon {
@@ -61,11 +52,11 @@
 
 /* Links */
 .social-card__link {
-  color: var(--color-primary, #7C4DFF);
+  color: var(--solid-ui-color-primary, #7C4DFF);
   text-decoration: none;
-  gap: var(--social-card-link-gap);
-  padding: var(--social-card-link-padding);
-  border-radius: var(--border-radius-base, 0.3125rem);
+  gap: 12px;
+  padding: 12px;
+  border-radius: 5px;
   transition: background-color var(--animation-duration, 0.2s) ease;
   position: relative;
   flex: 1;
@@ -75,7 +66,7 @@
 .social-card__link:hover,
 .social-card__link:focus {
   text-decoration: underline;
-  background-color: var(--social-card-link-hover-background);
+  background-color: var(--color-surface-accent-subtle, var(--lavender-300, #e6dcff));
 }
 
 .social-card__link[href^="http"]:after {
@@ -87,50 +78,30 @@
   overflow: hidden;
 }
 
+.social-card__more-button {
+  display: var(--social-card-more-button-display);
+  padding: 0;
+  border: 0;
+}
+
 .social-card__icon {
   width: var(--social-card-icon-size);
   height: var(--social-card-icon-size);
-  border-radius: var(--border-radius-base, 0.3125rem);
-  background: var(--color-card-bg, #FFFFFF);
+  border-radius: 5px;
+  background: var(--solid-ui-color-white, #FFFFFF);
   flex-shrink: 0;
 }
 
-/* Toggle button */
-
-solid-ui-button.social-card__more-button {
-  --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);
-}
-
-.social-card__more-button,
-solid-ui-button.social-card__more-button::part(button) {
-  display: var(--social-card-more-button-display);
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: var(--color-primary, #7C4DFF);
-  font: inherit;
-  font-weight: var(--font-weight-bold, 600);
-  cursor: var(--profile-interactive-cursor, pointer);
-}
-
 .social-card[data-mobile-expanded="false"] .social-card__item:nth-child(n + 11) {
   display: var(--social-card-hidden-item-display);
 }
 
 .social-card[data-mobile-expanded="true"] {
-  --social-card-list-columns: var(--social-card-expanded-columns);
+  --social-card-list-columns: repeat(3, max-content);
   --social-card-hidden-item-display: flex;
   --social-card-more-button-display: none;
 }
 
-/* Compact layout */
 :is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__section[data-profile-section='social'],
 :is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__section--empty[data-profile-section='social'] {
   --social-card-list-display: grid;
@@ -143,20 +114,8 @@ solid-ui-button.social-card__more-button::part(button) {
   justify-content: flex-start;
 }
 
-:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__section[data-profile-section='social'] .profile-section-collapsible__toggle-button,
-:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile__section--empty[data-profile-section='social'] .profile-section-collapsible__toggle-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .social-card__more-button,
-:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] solid-ui-button.social-card__more-button::part(button) {
-  margin-top: var(--social-card-more-button-margin-top);
-}
-
 @media (max-width: 768px) {
-  .profile__section[data-profile-section='social'],
+    .profile__section[data-profile-section='social'],
   .profile__section--empty[data-profile-section='social'] {
     --social-card-list-display: grid;
     --social-card-list-columns: var(--social-card-collapsed-columns);
@@ -167,15 +126,10 @@ solid-ui-button.social-card__more-button::part(button) {
   .social-card .social-card__list {
     justify-content: flex-start;
   }
-
-  .social-card__more-button,
-  solid-ui-button.social-card__more-button::part(button) {
-    margin-top: var(--social-card-more-button-margin-top);
-  }
 }
 
 @container profile-pane (max-width: 768px) {
-  .profile__section[data-profile-section='social'],
+    .profile__section[data-profile-section='social'],
   .profile__section--empty[data-profile-section='social'] {
     --social-card-list-display: grid;
     --social-card-list-columns: var(--social-card-collapsed-columns);
@@ -186,9 +140,4 @@ solid-ui-button.social-card__more-button::part(button) {
   .social-card .social-card__list {
     justify-content: flex-start;
   }
-
-  .social-card__more-button,
-  solid-ui-button.social-card__more-button::part(button) {
-    margin-top: var(--social-card-more-button-margin-top);
-  }
 }

package/lib/sections/social/SocialSection.d.ts

@@ -1,9 +1,9 @@
 import { TemplateResult } from 'lit-html';
 import 'solid-ui/components/button';
 import { SocialPresentation } from './types';
-import { ViewerMode } from '../../types';
+import { Layout, ViewerMode } from '../../types';
 import './SocialSection.css';
 import { LiveStore, NamedNode } from 'rdflib';
 export declare const SocialCard: (SocialData: SocialPresentation, _viewerMode: ViewerMode) => TemplateResult;
-export declare function renderSocialSection(store: LiveStore, subject: NamedNode, socialData: SocialPresentation, viewerMode: ViewerMode, onSaved?: () => Promise<void> | void): TemplateResult<1> | "";
+export declare function renderSocialSection(store: LiveStore, subject: NamedNode, socialData: SocialPresentation, viewerMode: ViewerMode, layout: Layout, onSaved?: () => Promise<void> | void): TemplateResult<1>;
 //# sourceMappingURL=SocialSection.d.ts.map

package/lib/sections/social/SocialSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SocialSection.d.ts","sourceRoot":"","sources":["../../../src/sections/social/SocialSection.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,UAAU,CAAA;AAC/C,OAAO,4BAA4B,CAAA;AACnC,OAAO,EAAW,kBAAkB,EAAE,MAAM,SAAS,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AACxC,OAAO,qBAAqB,CAAA;AAG5B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAoB7C,eAAO,MAAM,UAAU,GACrB,YAAY,kBAAkB,EAC9B,aAAa,UAAU,KACtB,cA+DF,CAAA;AAoKD,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,UAAU,EAAE,kBAAkB,EAC9B,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,0BAYrC"}
+{"version":3,"file":"SocialSection.d.ts","sourceRoot":"","sources":["../../../src/sections/social/SocialSection.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,UAAU,CAAA;AACxD,OAAO,4BAA4B,CAAA;AACnC,OAAO,EAAW,kBAAkB,EAAE,MAAM,SAAS,CAAA;AACrD,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAChD,OAAO,qBAAqB,CAAA;AAG5B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAqB7C,eAAO,MAAM,UAAU,GACrB,YAAY,kBAAkB,EAC9B,aAAa,UAAU,KACtB,cA4DF,CAAA;AAmID,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,UAAU,EAAE,kBAAkB,EAC9B,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,qBAYrC"}