profile-pane 3.2.1 → 3.2.2-test.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (241) hide show
  1. package/README.md +50 -0
  2. package/lib/303.profile-pane.js +1362 -0
  3. package/lib/303.profile-pane.js.map +1 -0
  4. package/lib/303.profile-pane.min.js +2 -0
  5. package/lib/303.profile-pane.min.js.map +1 -0
  6. package/lib/ProfileView.css +1090 -0
  7. package/lib/ProfileView.d.ts +2 -1
  8. package/lib/ProfileView.d.ts.map +1 -1
  9. package/lib/ProfileView.js +64 -36
  10. package/lib/buttonsHelper.d.ts +1 -1
  11. package/lib/buttonsHelper.d.ts.map +1 -1
  12. package/lib/buttonsHelper.js +2 -1
  13. package/lib/editProfilePane/EditCVCard.js +1 -1
  14. package/lib/editProfilePane/EditCommunitiesCard.js +1 -1
  15. package/lib/editProfilePane/EditFriendsCard.js +1 -1
  16. package/lib/editProfilePane/EditProfileView.d.ts +1 -1
  17. package/lib/editProfilePane/EditProfileView.d.ts.map +1 -1
  18. package/lib/editProfilePane/EditProfileView.js +4 -5
  19. package/lib/editProfilePane/editProfilePresenter.d.ts.map +1 -1
  20. package/lib/editProfilePane/editProfilePresenter.js +5 -4
  21. package/lib/icons-svg/profileIcons.d.ts +1 -1
  22. package/lib/icons-svg/profileIcons.d.ts.map +1 -1
  23. package/lib/icons-svg/profileIcons.js +9 -17
  24. package/lib/index.d.ts +1 -8
  25. package/lib/index.d.ts.map +1 -1
  26. package/lib/index.js +74 -40
  27. package/lib/ontology/otherPreferencesForm.ttl +32 -0
  28. package/lib/ontology/resumeForm.ttl +349 -0
  29. package/lib/ontology/socialMedia.ttl +433 -0
  30. package/lib/profile-pane.js +32266 -13247
  31. package/lib/profile-pane.js.map +1 -1
  32. package/lib/profile-pane.min.js +2315 -935
  33. package/lib/profile-pane.min.js.map +1 -1
  34. package/lib/rdfFormsHelper.d.ts +13 -1
  35. package/lib/rdfFormsHelper.d.ts.map +1 -1
  36. package/lib/rdfFormsHelper.js +13 -1
  37. package/lib/sections/bio/BioEditDialog.d.ts.map +1 -1
  38. package/lib/sections/bio/BioEditDialog.js +7 -7
  39. package/lib/sections/bio/BioSection.css +300 -0
  40. package/lib/sections/bio/BioSection.d.ts +3 -2
  41. package/lib/sections/bio/BioSection.d.ts.map +1 -1
  42. package/lib/sections/bio/BioSection.js +26 -19
  43. package/lib/sections/bio/mutations.d.ts.map +1 -1
  44. package/lib/sections/bio/mutations.js +14 -3
  45. package/lib/sections/contactInfo/ContactInfoEditDialog.css +354 -0
  46. package/lib/sections/contactInfo/ContactInfoEditDialog.d.ts +3 -1
  47. package/lib/sections/contactInfo/ContactInfoEditDialog.d.ts.map +1 -1
  48. package/lib/sections/contactInfo/ContactInfoEditDialog.js +183 -98
  49. package/lib/sections/contactInfo/ContactInfoSection.css +125 -0
  50. package/lib/sections/contactInfo/ContactInfoSection.d.ts +2 -0
  51. package/lib/sections/contactInfo/ContactInfoSection.d.ts.map +1 -1
  52. package/lib/sections/contactInfo/ContactInfoSection.js +64 -41
  53. package/lib/sections/contactInfo/mutations.d.ts.map +1 -1
  54. package/lib/sections/contactInfo/mutations.js +51 -16
  55. package/lib/sections/education/EducationEditDialog.d.ts +3 -1
  56. package/lib/sections/education/EducationEditDialog.d.ts.map +1 -1
  57. package/lib/sections/education/EducationEditDialog.js +170 -92
  58. package/lib/sections/education/EducationSection.css +133 -0
  59. package/lib/sections/education/EducationSection.d.ts +3 -2
  60. package/lib/sections/education/EducationSection.d.ts.map +1 -1
  61. package/lib/sections/education/EducationSection.js +32 -25
  62. package/lib/sections/education/mutations.d.ts.map +1 -1
  63. package/lib/sections/education/mutations.js +14 -3
  64. package/lib/sections/heading/HeadingEditDialog.d.ts +4 -1
  65. package/lib/sections/heading/HeadingEditDialog.d.ts.map +1 -1
  66. package/lib/sections/heading/HeadingEditDialog.js +287 -162
  67. package/lib/sections/heading/HeadingSection.css +862 -0
  68. package/lib/sections/heading/HeadingSection.d.ts +3 -2
  69. package/lib/sections/heading/HeadingSection.d.ts.map +1 -1
  70. package/lib/sections/heading/HeadingSection.js +63 -32
  71. package/lib/sections/heading/imageHelpers.d.ts +1 -0
  72. package/lib/sections/heading/imageHelpers.d.ts.map +1 -1
  73. package/lib/sections/heading/imageHelpers.js +40 -1
  74. package/lib/sections/heading/mutations.d.ts.map +1 -1
  75. package/lib/sections/heading/mutations.js +86 -23
  76. package/lib/sections/heading/selectors.d.ts.map +1 -1
  77. package/lib/sections/heading/selectors.js +14 -3
  78. package/lib/sections/heading/types.d.ts +1 -2
  79. package/lib/sections/heading/types.d.ts.map +1 -1
  80. package/lib/sections/languages/LanguageEditDialog.d.ts +3 -1
  81. package/lib/sections/languages/LanguageEditDialog.d.ts.map +1 -1
  82. package/lib/sections/languages/LanguageEditDialog.js +202 -119
  83. package/lib/sections/languages/LanguageSection.css +53 -0
  84. package/lib/sections/languages/LanguageSection.d.ts +2 -0
  85. package/lib/sections/languages/LanguageSection.d.ts.map +1 -1
  86. package/lib/sections/languages/LanguageSection.js +42 -31
  87. package/lib/sections/languages/mutations.d.ts.map +1 -1
  88. package/lib/sections/languages/mutations.js +60 -161
  89. package/lib/sections/languages/selectors.d.ts.map +1 -1
  90. package/lib/sections/languages/selectors.js +1 -2
  91. package/lib/sections/projects/ProjectEditDialog.d.ts +2 -1
  92. package/lib/sections/projects/ProjectEditDialog.d.ts.map +1 -1
  93. package/lib/sections/projects/ProjectEditDialog.js +13 -24
  94. package/lib/sections/projects/ProjectSection.css +368 -0
  95. package/lib/sections/projects/ProjectSection.d.ts +2 -1
  96. package/lib/sections/projects/ProjectSection.d.ts.map +1 -1
  97. package/lib/sections/projects/ProjectSection.js +116 -34
  98. package/lib/sections/projects/mutations.d.ts.map +1 -1
  99. package/lib/sections/projects/mutations.js +109 -132
  100. package/lib/sections/projects/selectors.d.ts.map +1 -1
  101. package/lib/sections/projects/selectors.js +4 -45
  102. package/lib/{QRCodeCard.d.ts → sections/qrcode/QRCodeCard.d.ts} +2 -1
  103. package/lib/sections/qrcode/QRCodeCard.d.ts.map +1 -0
  104. package/lib/{QRCodeCard.js → sections/qrcode/QRCodeCard.js} +59 -11
  105. package/lib/sections/qrcode/QRCodeSection.css +108 -0
  106. package/lib/sections/qrcode/QRCodeSection.d.ts +4 -0
  107. package/lib/sections/qrcode/QRCodeSection.d.ts.map +1 -0
  108. package/lib/sections/qrcode/QRCodeSection.js +17 -0
  109. package/lib/sections/resume/ResumeEditDialog.d.ts +10 -1
  110. package/lib/sections/resume/ResumeEditDialog.d.ts.map +1 -1
  111. package/lib/sections/resume/ResumeEditDialog.js +531 -149
  112. package/lib/sections/resume/ResumeSection.css +350 -0
  113. package/lib/sections/resume/ResumeSection.d.ts +3 -2
  114. package/lib/sections/resume/ResumeSection.d.ts.map +1 -1
  115. package/lib/sections/resume/ResumeSection.js +78 -49
  116. package/lib/sections/resume/mutations.d.ts.map +1 -1
  117. package/lib/sections/resume/mutations.js +17 -3
  118. package/lib/sections/resume/selectors.d.ts.map +1 -1
  119. package/lib/sections/resume/selectors.js +1 -0
  120. package/lib/sections/resume/types.d.ts +1 -0
  121. package/lib/sections/resume/types.d.ts.map +1 -1
  122. package/lib/sections/shared/collapsibleSection.d.ts.map +1 -1
  123. package/lib/sections/shared/collapsibleSection.js +1 -0
  124. package/lib/sections/shared/phoneCountries.d.ts +1 -1
  125. package/lib/sections/shared/phoneCountries.d.ts.map +1 -1
  126. package/lib/sections/shared/phoneCountries.js +2 -2
  127. package/lib/sections/shared/projectCommunityNodes.d.ts +6 -0
  128. package/lib/sections/shared/projectCommunityNodes.d.ts.map +1 -0
  129. package/lib/sections/shared/projectCommunityNodes.js +56 -0
  130. package/lib/sections/shared/rdfMutationHelpers.d.ts +35 -2
  131. package/lib/sections/shared/rdfMutationHelpers.d.ts.map +1 -1
  132. package/lib/sections/shared/rdfMutationHelpers.js +290 -14
  133. package/lib/sections/shared/sectionCardHelpers.d.ts.map +1 -1
  134. package/lib/sections/shared/sectionCardHelpers.js +80 -11
  135. package/lib/sections/shared/types.d.ts +24 -0
  136. package/lib/sections/shared/types.d.ts.map +1 -1
  137. package/lib/sections/skills/SkillsEditDialog.d.ts +3 -1
  138. package/lib/sections/skills/SkillsEditDialog.d.ts.map +1 -1
  139. package/lib/sections/skills/SkillsEditDialog.js +136 -115
  140. package/lib/sections/skills/SkillsSection.css +173 -0
  141. package/lib/sections/skills/SkillsSection.d.ts +2 -0
  142. package/lib/sections/skills/SkillsSection.d.ts.map +1 -1
  143. package/lib/sections/skills/SkillsSection.js +107 -47
  144. package/lib/sections/skills/mutations.d.ts.map +1 -1
  145. package/lib/sections/skills/mutations.js +25 -21
  146. package/lib/sections/skills/selectors.d.ts.map +1 -1
  147. package/lib/sections/skills/selectors.js +5 -3
  148. package/lib/sections/social/SocialEditDialog.d.ts +3 -1
  149. package/lib/sections/social/SocialEditDialog.d.ts.map +1 -1
  150. package/lib/sections/social/SocialEditDialog.js +170 -62
  151. package/lib/sections/social/SocialSection.css +194 -0
  152. package/lib/sections/social/SocialSection.d.ts +4 -3
  153. package/lib/sections/social/SocialSection.d.ts.map +1 -1
  154. package/lib/sections/social/SocialSection.js +59 -43
  155. package/lib/sections/social/mutations.d.ts.map +1 -1
  156. package/lib/sections/social/mutations.js +23 -132
  157. package/lib/specialButtons/AddMeToYourFriends.css +54 -0
  158. package/lib/specialButtons/addContact/AddMeToYourContacts.css +1118 -0
  159. package/lib/specialButtons/addContact/ContactCreationDialog.d.ts +10 -0
  160. package/lib/specialButtons/addContact/ContactCreationDialog.d.ts.map +1 -0
  161. package/lib/specialButtons/addContact/ContactCreationDialog.js +1123 -0
  162. package/lib/specialButtons/addContact/addMeToYourContacts.d.ts +16 -0
  163. package/lib/specialButtons/addContact/addMeToYourContacts.d.ts.map +1 -0
  164. package/lib/specialButtons/addContact/addMeToYourContacts.js +136 -0
  165. package/lib/specialButtons/addContact/contactsErrors.d.ts +8 -0
  166. package/lib/specialButtons/addContact/contactsErrors.d.ts.map +1 -0
  167. package/lib/specialButtons/addContact/contactsErrors.js +106 -0
  168. package/lib/specialButtons/addContact/contactsTypes.d.ts +43 -0
  169. package/lib/specialButtons/addContact/contactsTypes.d.ts.map +1 -0
  170. package/lib/specialButtons/addContact/contactsTypes.js +5 -0
  171. package/lib/specialButtons/addContact/helpers.d.ts +7 -0
  172. package/lib/specialButtons/addContact/helpers.d.ts.map +1 -0
  173. package/lib/specialButtons/addContact/helpers.js +103 -0
  174. package/lib/specialButtons/addContact/mutations.d.ts +16 -0
  175. package/lib/specialButtons/addContact/mutations.d.ts.map +1 -0
  176. package/lib/specialButtons/addContact/mutations.js +300 -0
  177. package/lib/specialButtons/addContact/selectors.d.ts +10 -0
  178. package/lib/specialButtons/addContact/selectors.d.ts.map +1 -0
  179. package/lib/specialButtons/addContact/selectors.js +163 -0
  180. package/lib/{addMeToYourFriends.d.ts → specialButtons/addMeToYourFriends.d.ts} +6 -4
  181. package/lib/specialButtons/addMeToYourFriends.d.ts.map +1 -0
  182. package/lib/{addMeToYourFriends.js → specialButtons/addMeToYourFriends.js} +46 -11
  183. package/lib/styles/CollapsibleSection.css +519 -0
  184. package/lib/styles/EditDialogs.css +506 -686
  185. package/lib/styles/EditDialogs.responsive.css +989 -0
  186. package/lib/texts/buttonTexts.d.ts +9 -0
  187. package/lib/texts/buttonTexts.d.ts.map +1 -0
  188. package/lib/texts/buttonTexts.js +14 -0
  189. package/lib/texts/dialogTexts.d.ts +14 -0
  190. package/lib/texts/dialogTexts.d.ts.map +1 -0
  191. package/lib/texts/dialogTexts.js +19 -0
  192. package/lib/texts/messageTexts.d.ts +42 -0
  193. package/lib/texts/messageTexts.d.ts.map +1 -0
  194. package/lib/texts/messageTexts.js +47 -0
  195. package/lib/texts/profileTexts.d.ts +14 -0
  196. package/lib/texts/profileTexts.d.ts.map +1 -0
  197. package/lib/texts/profileTexts.js +19 -0
  198. package/lib/texts/qrCodeTexts.d.ts +2 -0
  199. package/lib/texts/qrCodeTexts.d.ts.map +1 -0
  200. package/lib/texts/qrCodeTexts.js +7 -0
  201. package/lib/texts.d.ts +5 -60
  202. package/lib/texts.d.ts.map +1 -1
  203. package/lib/texts.js +55 -70
  204. package/lib/ui/dialog.css +233 -0
  205. package/lib/ui/dialog.d.ts +15 -1
  206. package/lib/ui/dialog.d.ts.map +1 -1
  207. package/lib/ui/dialog.js +245 -45
  208. package/lib/ui/dialog.responsive.css +195 -0
  209. package/lib/ui/errors.d.ts.map +1 -1
  210. package/lib/ui/errors.js +2 -1
  211. package/lib/ui/spinner.d.ts +3 -0
  212. package/lib/ui/spinner.d.ts.map +1 -0
  213. package/lib/ui/spinner.js +13 -0
  214. package/lib/utils/debug.d.ts +5 -0
  215. package/lib/utils/debug.d.ts.map +1 -0
  216. package/lib/utils/debug.js +23 -0
  217. package/lib/utils/errorDisplay.d.ts +2 -0
  218. package/lib/utils/errorDisplay.d.ts.map +1 -0
  219. package/lib/utils/errorDisplay.js +19 -0
  220. package/package.json +32 -25
  221. package/lib/ChatWithMe.d.ts +0 -7
  222. package/lib/ChatWithMe.d.ts.map +0 -1
  223. package/lib/ChatWithMe.js +0 -90
  224. package/lib/QRCodeCard.d.ts.map +0 -1
  225. package/lib/addMeToYourFriends.d.ts.map +0 -1
  226. package/lib/sections/heading/camera.d.ts +0 -19
  227. package/lib/sections/heading/camera.d.ts.map +0 -1
  228. package/lib/sections/heading/camera.js +0 -199
  229. package/lib/styles/BioSection.css +0 -77
  230. package/lib/styles/CVCard.css +0 -142
  231. package/lib/styles/ChatWithMe.css +0 -6
  232. package/lib/styles/ContactInfoEditDialog.css +0 -153
  233. package/lib/styles/EducationCard.css +0 -103
  234. package/lib/styles/HeadingSection.css +0 -309
  235. package/lib/styles/ProfileCard.css +0 -66
  236. package/lib/styles/ProfileView.css +0 -65
  237. package/lib/styles/ProjectsCard.css +0 -206
  238. package/lib/styles/QRCodeCard.css +0 -43
  239. package/lib/styles/SocialCard.css +0 -89
  240. package/lib/styles/dialog.css +0 -209
  241. package/lib/styles/utilities.css +0 -740
package/lib/styles/CollapsibleSection.css ADDED
@@ -0,0 +1,519 @@
1
+ /* Collapsible section styles for the main profile pane. */
2
+
3
+ /* Base structure */
4
+ .profile-section-collapsible {
5
+ display: block;
6
+ }
7
+
8
+ .profile__section--empty.profile-section-collapsible {
9
+ gap: var(--spacing-lg, 1.5625rem);
10
+ border-radius: var(--border-radius-md, 0.5rem);
11
+ }
12
+
13
+ .profile-section-collapsible__header {
14
+ margin-bottom: 0;
15
+ }
16
+
17
+ .profile-section-collapsible__content {
18
+ width: 100%;
19
+ max-width: 100%;
20
+ min-width: 0;
21
+ box-sizing: border-box;
22
+ }
23
+
24
+ .profile-section-collapsible__content > :first-child {
25
+ margin-top: 0;
26
+ }
27
+
28
+ .profile-section-collapsible__content > :last-child {
29
+ margin-bottom: 0;
30
+ }
31
+
32
+ /* Actions */
33
+ .profile-section-collapsible__actions {
34
+ --profile-section-collapsible-action-button-text: var(--color-primary, #7C4DFF);
35
+ --profile-section-collapsible-action-button-hover-background: var(--color-surface-accent-subtle, var(--lavender-300, #e6dcff));
36
+ --profile-section-collapsible-edit-icon-size: 0.75rem;
37
+ --profile-section-collapsible-mobile-action-gap: 0.25rem;
38
+ --profile-section-collapsible-chevron-width: 0.75rem;
39
+ --profile-section-collapsible-chevron-height: 0.4375rem;
40
+ display: flex;
41
+ flex-direction: column;
42
+ align-items: flex-end;
43
+ gap: var(--spacing-xs, 0.75rem);
44
+ margin-top: -0.25rem;
45
+ }
46
+
47
+ .profile-section-collapsible__edit-button {
48
+ min-width: 0;
49
+ align-items: center;
50
+ justify-content: center;
51
+ border-radius: var(--border-radius-sm, 0.2rem);
52
+ --button-border-radius: var(--border-radius-sm, 0.2rem);
53
+ }
54
+
55
+ .profile-section-collapsible__toggle-button {
56
+ display: none !important;
57
+ align-items: center;
58
+ justify-content: center;
59
+ min-height: auto;
60
+ min-width: auto;
61
+ padding: var(--spacing-xxs, 0.3125rem);
62
+ border-radius: var(--border-radius-sm, 0.2rem);
63
+ border: none;
64
+ background: none;
65
+ color: var(--profile-section-collapsible-action-button-text);
66
+ cursor: var(--profile-interactive-cursor, pointer);
67
+ --button-border-radius: var(--border-radius-sm, 0.2rem);
68
+ --button-height-sm: 0;
69
+ --button-padding-sm: var(--spacing-xxs, 0.3125rem);
70
+ --button-background: transparent;
71
+ --button-border-width: 0;
72
+ --button-border: transparent;
73
+ --button-text: var(--profile-section-collapsible-action-button-text);
74
+ --button-hover-background: var(--profile-section-collapsible-action-button-hover-background);
75
+ --button-hover-border: transparent;
76
+ --button-hover-text: var(--profile-section-collapsible-action-button-text);
77
+ }
78
+
79
+ /* Icons */
80
+ .profile-section-collapsible__edit-icon {
81
+ display: none;
82
+ }
83
+
84
+ .profile-section-collapsible__edit-icon,
85
+ .profile-section-collapsible__edit-icon svg {
86
+ line-height: 0;
87
+ }
88
+
89
+ .profile-section-collapsible__chevron {
90
+ display: inline-flex;
91
+ flex: 0 0 auto;
92
+ align-items: center;
93
+ justify-content: center;
94
+ width: var(--profile-section-collapsible-chevron-width);
95
+ height: var(--profile-section-collapsible-chevron-height);
96
+ line-height: 0;
97
+ transition: transform var(--animation-duration, 0.2s) ease;
98
+ }
99
+
100
+ .profile-section-collapsible__chevron svg {
101
+ display: block;
102
+ width: 100%;
103
+ height: 100%;
104
+ }
105
+
106
+ .profile-section-collapsible__edit-icon--add svg path {
107
+ fill: var(--color-text-strong, var(--gray-800, #1E2939)) !important;
108
+ stroke: var(--color-text-strong, var(--gray-800, #1E2939)) !important;
109
+ }
110
+
111
+ .profile-section-collapsible__edit-icon--projects svg path {
112
+ stroke-width: 1.714px !important;
113
+ stroke: var(--color-text-strong, var(--gray-800, #1E2939)) !important;
114
+ fill: none !important;
115
+ }
116
+
117
+ /* App-driven mobile layout when the host/root explicitly sets data-layout. */
118
+ :is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible--inline-mobile-actions > .profile-section-collapsible__header h2 {
119
+ flex: 1 1 auto;
120
+ min-width: 0;
121
+ }
122
+
123
+ :is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__actions {
124
+ display: inline-flex;
125
+ flex-direction: row;
126
+ align-items: center;
127
+ gap: var(--profile-section-collapsible-mobile-action-gap);
128
+ margin-top: 0;
129
+ flex: 0 0 auto;
130
+ }
131
+
132
+ :is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible__edit-button,
133
+ :is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button {
134
+ --button-background: transparent;
135
+ --button-border-width: 0;
136
+ --button-border: transparent;
137
+ --button-text: var(--profile-section-collapsible-action-button-text);
138
+ --button-hover-background: var(--profile-section-collapsible-action-button-hover-background);
139
+ --button-hover-border: transparent;
140
+ --button-hover-text: var(--profile-section-collapsible-action-button-text);
141
+ }
142
+
143
+ :is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button {
144
+ display: inline-flex !important;
145
+ order: 1;
146
+ }
147
+
148
+ :is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button,
149
+ :is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible[data-expanded="true"] .profile-section-collapsible__edit-button,
150
+ :is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible__toggle-button {
151
+ min-width: var(--min-touch-target, 44px);
152
+ min-height: var(--min-touch-target, 44px);
153
+ --button-width-sm: var(--min-touch-target, 44px);
154
+ --button-height-sm: var(--min-touch-target, 44px);
155
+ }
156
+
157
+ :is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] solid-ui-button.profile-section-collapsible__edit-button::part(button) {
158
+ width: var(--min-touch-target, 44px);
159
+ min-width: var(--min-touch-target, 44px);
160
+ }
161
+
162
+ :is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] solid-ui-button.profile-action-text.profile-section-collapsible__edit-button::part(button):hover,
163
+ :is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] solid-ui-button.profile-action-text.profile-section-collapsible__edit-button::part(button):focus,
164
+ :is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] solid-ui-button.profile-action-text.profile-section-collapsible__edit-button::part(button):focus-visible {
165
+ background: var(--profile-section-collapsible-action-button-hover-background);
166
+ text-decoration: none;
167
+ }
168
+
169
+ :is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] solid-ui-button.profile-action-text.profile-section-collapsible__edit-button {
170
+ --button-hover-background: var(--profile-section-collapsible-action-button-hover-background);
171
+ }
172
+
173
+ :is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button:active,
174
+ :is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button:focus,
175
+ :is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button:focus-visible {
176
+ border: none !important;
177
+ outline: none !important;
178
+ box-shadow: none !important;
179
+ background: transparent !important;
180
+ }
181
+
182
+ :is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__toggle-button {
183
+ order: 2;
184
+ }
185
+
186
+ :is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible[data-expanded="false"] .profile-section-collapsible__content {
187
+ display: none;
188
+ }
189
+
190
+ :is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible__actions.flex-column {
191
+ gap: var(--profile-section-collapsible-mobile-action-gap);
192
+ }
193
+
194
+ :is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible[data-expanded="true"] .profile-section-collapsible__chevron {
195
+ transform: rotate(180deg);
196
+ }
197
+
198
+ :is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible__edit-label {
199
+ display: none !important;
200
+ }
201
+
202
+ :is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible__edit-icon {
203
+ display: inline-flex;
204
+ align-items: center;
205
+ justify-content: center;
206
+ width: var(--profile-section-collapsible-edit-icon-size);
207
+ height: var(--profile-section-collapsible-edit-icon-size);
208
+ }
209
+
210
+ :is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible .profile-section-collapsible__edit-button {
211
+ display: none !important;
212
+ order: 2;
213
+ }
214
+
215
+ :is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible--empty-mobile-no-edit .profile-section-collapsible__edit-button,
216
+ :is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible--empty-mobile-no-edit[data-expanded="true"] .profile-section-collapsible__edit-button,
217
+ :is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible--empty-mobile-no-edit .profile-section-collapsible__edit-icon,
218
+ :is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible--empty-mobile-no-edit[data-expanded="true"] .profile-section-collapsible__edit-icon {
219
+ display: none !important;
220
+ }
221
+
222
+ :is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible[data-expanded="true"] .profile-section-collapsible__edit-button,
223
+ :is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .profile-section-collapsible__toggle-button {
224
+ display: inline-flex !important;
225
+ }
226
+
227
+ /* Viewport fallback when no explicit layout attribute is available. */
228
+ @media (min-width: 769px) {
229
+ .profile-section-collapsible > .profile-section-collapsible__content {
230
+ display: block;
231
+ }
232
+
233
+ .profile-section-collapsible__edit-label svg,
234
+ .profile__action-icon svg {
235
+ width: 0.75rem;
236
+ height: 0.75rem;
237
+ position: relative;
238
+ top: 0;
239
+ }
240
+
241
+ .profile-section-collapsible__edit-label {
242
+ color: var(--profile-section-collapsible-action-button-text);
243
+ }
244
+
245
+ .profile-section-collapsible__edit-label svg path {
246
+ fill: currentColor;
247
+ }
248
+
249
+ .profile-section-collapsible__edit-label {
250
+ display: inline-flex;
251
+ align-items: center;
252
+ gap: var(--spacing-xxs, 0.3125rem);
253
+ transform: translateY(0);
254
+ }
255
+
256
+ .profile-section-collapsible__edit-icon {
257
+ display: none;
258
+ }
259
+ }
260
+
261
+ /* Container-driven desktop fallback for wide panes inside a mixed viewport. */
262
+ @container profile-pane (min-width: 769px) {
263
+ .profile-section-collapsible > .profile-section-collapsible__content {
264
+ display: block;
265
+ }
266
+
267
+ .profile-section-collapsible__edit-label svg,
268
+ .profile__action-icon svg {
269
+ width: 0.75rem;
270
+ height: 0.75rem;
271
+ position: relative;
272
+ top: 0;
273
+ }
274
+
275
+ .profile-section-collapsible__edit-label {
276
+ color: var(--profile-section-collapsible-action-button-text);
277
+ }
278
+
279
+ .profile-section-collapsible__edit-label svg path {
280
+ fill: currentColor;
281
+ }
282
+
283
+ .profile-section-collapsible__edit-label {
284
+ display: inline-flex;
285
+ align-items: center;
286
+ gap: var(--spacing-xxs, 0.3125rem);
287
+ transform: translateY(0);
288
+ }
289
+
290
+ .profile-section-collapsible__edit-icon {
291
+ display: none;
292
+ }
293
+ }
294
+
295
+ /* Viewport fallback for mobile-width panes when no explicit layout attribute is available. */
296
+ @media (max-width: 768px) {
297
+ .profile-section-collapsible--inline-mobile-actions > .profile-section-collapsible__header h2 {
298
+ flex: 1 1 auto;
299
+ min-width: 0;
300
+ }
301
+
302
+ .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__actions {
303
+ display: inline-flex;
304
+ flex-direction: row;
305
+ align-items: center;
306
+ gap: var(--profile-section-collapsible-mobile-action-gap);
307
+ margin-top: 0;
308
+ flex: 0 0 auto;
309
+ }
310
+
311
+ .profile-section-collapsible__edit-button,
312
+ .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button {
313
+ --button-background: transparent;
314
+ --button-border-width: 0;
315
+ --button-border: transparent;
316
+ --button-text: var(--profile-section-collapsible-action-button-text);
317
+ --button-hover-background: var(--profile-section-collapsible-action-button-hover-background);
318
+ --button-hover-border: transparent;
319
+ --button-hover-text: var(--profile-section-collapsible-action-button-text);
320
+ }
321
+
322
+ .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button {
323
+ display: inline-flex !important;
324
+ order: 1;
325
+ }
326
+
327
+ .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button,
328
+ .profile-section-collapsible[data-expanded="true"] .profile-section-collapsible__edit-button,
329
+ .profile-section-collapsible__toggle-button {
330
+ min-width: var(--min-touch-target, 44px);
331
+ min-height: var(--min-touch-target, 44px);
332
+ --button-width-sm: var(--min-touch-target, 44px);
333
+ --button-height-sm: var(--min-touch-target, 44px);
334
+ }
335
+
336
+ .profile-section-collapsible--inline-mobile-actions solid-ui-button.profile-section-collapsible__edit-button::part(button),
337
+ .profile-section-collapsible[data-expanded="true"] solid-ui-button.profile-section-collapsible__edit-button::part(button) {
338
+ width: var(--min-touch-target, 44px);
339
+ min-width: var(--min-touch-target, 44px);
340
+ }
341
+
342
+ solid-ui-button.profile-action-text.profile-section-collapsible__edit-button::part(button):hover,
343
+ solid-ui-button.profile-action-text.profile-section-collapsible__edit-button::part(button):focus,
344
+ solid-ui-button.profile-action-text.profile-section-collapsible__edit-button::part(button):focus-visible {
345
+ background: var(--profile-section-collapsible-action-button-hover-background);
346
+ text-decoration: none;
347
+ }
348
+
349
+ solid-ui-button.profile-action-text.profile-section-collapsible__edit-button {
350
+ --button-hover-background: var(--profile-section-collapsible-action-button-hover-background);
351
+ }
352
+
353
+ .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button:active,
354
+ .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button:focus,
355
+ .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button:focus-visible {
356
+ border: none !important;
357
+ outline: none !important;
358
+ box-shadow: none !important;
359
+ background: transparent !important;
360
+ }
361
+
362
+ .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__toggle-button {
363
+ order: 2;
364
+ }
365
+
366
+ .profile-section-collapsible[data-expanded="false"] .profile-section-collapsible__content {
367
+ display: none;
368
+ }
369
+
370
+ .profile-section-collapsible__actions.flex-column {
371
+ gap: var(--profile-section-collapsible-mobile-action-gap);
372
+ }
373
+
374
+ .profile-section-collapsible[data-expanded="true"] .profile-section-collapsible__chevron {
375
+ transform: rotate(180deg);
376
+ }
377
+
378
+ .profile-section-collapsible__edit-label {
379
+ display: none !important;
380
+ }
381
+
382
+ .profile-section-collapsible__edit-icon {
383
+ display: inline-flex;
384
+ align-items: center;
385
+ justify-content: center;
386
+ width: var(--profile-section-collapsible-edit-icon-size);
387
+ height: var(--profile-section-collapsible-edit-icon-size);
388
+ }
389
+
390
+ .profile-section-collapsible .profile-section-collapsible__edit-button {
391
+ display: none !important;
392
+ order: 2;
393
+ }
394
+
395
+ .profile-section-collapsible--empty-mobile-no-edit .profile-section-collapsible__edit-button,
396
+ .profile-section-collapsible--empty-mobile-no-edit[data-expanded="true"] .profile-section-collapsible__edit-button,
397
+ .profile-section-collapsible--empty-mobile-no-edit .profile-section-collapsible__edit-icon,
398
+ .profile-section-collapsible--empty-mobile-no-edit[data-expanded="true"] .profile-section-collapsible__edit-icon {
399
+ display: none !important;
400
+ }
401
+
402
+ .profile-section-collapsible[data-expanded="true"] .profile-section-collapsible__edit-button,
403
+ .profile-section-collapsible__toggle-button {
404
+ display: inline-flex !important;
405
+ }
406
+ }
407
+
408
+ /* Container-driven fallback for mobile-width panes inside a wider viewport. */
409
+ @container profile-pane (max-width: 768px) {
410
+ .profile-section-collapsible--inline-mobile-actions > .profile-section-collapsible__header h2 {
411
+ flex: 1 1 auto;
412
+ min-width: 0;
413
+ }
414
+
415
+ .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__actions {
416
+ display: inline-flex;
417
+ flex-direction: row;
418
+ align-items: center;
419
+ gap: var(--profile-section-collapsible-mobile-action-gap);
420
+ margin-top: 0;
421
+ flex: 0 0 auto;
422
+ }
423
+
424
+ .profile-section-collapsible__edit-button,
425
+ .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button {
426
+ --button-background: transparent;
427
+ --button-border-width: 0;
428
+ --button-border: transparent;
429
+ --button-text: var(--profile-section-collapsible-action-button-text);
430
+ --button-hover-background: var(--profile-section-collapsible-action-button-hover-background);
431
+ --button-hover-border: transparent;
432
+ --button-hover-text: var(--profile-section-collapsible-action-button-text);
433
+ }
434
+
435
+ .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button {
436
+ display: inline-flex !important;
437
+ order: 1;
438
+ }
439
+
440
+ .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button,
441
+ .profile-section-collapsible[data-expanded="true"] .profile-section-collapsible__edit-button,
442
+ .profile-section-collapsible__toggle-button {
443
+ min-width: var(--min-touch-target, 44px);
444
+ min-height: var(--min-touch-target, 44px);
445
+ --button-width-sm: var(--min-touch-target, 44px);
446
+ --button-height-sm: var(--min-touch-target, 44px);
447
+ }
448
+
449
+ .profile-section-collapsible--inline-mobile-actions solid-ui-button.profile-section-collapsible__edit-button::part(button),
450
+ .profile-section-collapsible[data-expanded="true"] solid-ui-button.profile-section-collapsible__edit-button::part(button) {
451
+ width: var(--min-touch-target, 44px);
452
+ min-width: var(--min-touch-target, 44px);
453
+ }
454
+
455
+ solid-ui-button.profile-action-text.profile-section-collapsible__edit-button::part(button):hover,
456
+ solid-ui-button.profile-action-text.profile-section-collapsible__edit-button::part(button):focus,
457
+ solid-ui-button.profile-action-text.profile-section-collapsible__edit-button::part(button):focus-visible {
458
+ background: var(--profile-section-collapsible-action-button-hover-background);
459
+ text-decoration: none;
460
+ }
461
+
462
+ solid-ui-button.profile-action-text.profile-section-collapsible__edit-button {
463
+ --button-hover-background: var(--profile-section-collapsible-action-button-hover-background);
464
+ }
465
+
466
+ .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button:active,
467
+ .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button:focus,
468
+ .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__edit-button:focus-visible {
469
+ border: none !important;
470
+ outline: none !important;
471
+ box-shadow: none !important;
472
+ background: transparent !important;
473
+ }
474
+
475
+ .profile-section-collapsible--inline-mobile-actions .profile-section-collapsible__toggle-button {
476
+ order: 2;
477
+ }
478
+
479
+ .profile-section-collapsible[data-expanded="false"] .profile-section-collapsible__content {
480
+ display: none;
481
+ }
482
+
483
+ .profile-section-collapsible__actions.flex-column {
484
+ gap: var(--profile-section-collapsible-mobile-action-gap);
485
+ }
486
+
487
+ .profile-section-collapsible[data-expanded="true"] .profile-section-collapsible__chevron {
488
+ transform: rotate(180deg);
489
+ }
490
+
491
+ .profile-section-collapsible__edit-label {
492
+ display: none !important;
493
+ }
494
+
495
+ .profile-section-collapsible__edit-icon {
496
+ display: inline-flex;
497
+ align-items: center;
498
+ justify-content: center;
499
+ width: var(--profile-section-collapsible-edit-icon-size);
500
+ height: var(--profile-section-collapsible-edit-icon-size);
501
+ }
502
+
503
+ .profile-section-collapsible .profile-section-collapsible__edit-button {
504
+ display: none !important;
505
+ order: 2;
506
+ }
507
+
508
+ .profile-section-collapsible--empty-mobile-no-edit .profile-section-collapsible__edit-button,
509
+ .profile-section-collapsible--empty-mobile-no-edit[data-expanded="true"] .profile-section-collapsible__edit-button,
510
+ .profile-section-collapsible--empty-mobile-no-edit .profile-section-collapsible__edit-icon,
511
+ .profile-section-collapsible--empty-mobile-no-edit[data-expanded="true"] .profile-section-collapsible__edit-icon {
512
+ display: none !important;
513
+ }
514
+
515
+ .profile-section-collapsible[data-expanded="true"] .profile-section-collapsible__edit-button,
516
+ .profile-section-collapsible__toggle-button {
517
+ display: inline-flex !important;
518
+ }
519
+ }