#769 Header component

package.json

@@ -92,11 +92,10 @@
 		"escape-html": "^1.0.3",
 		"lit": "^3.3.3",
 		"mime-types": "^3.0.2",
-		"pane-registry": "3.1.2-0",
-		"rdflib": "2.3.9",
-		"solid-logic": "4.0.8-0",
+		"pane-registry": "^3.1.2-0",
+		"rdflib": "^2.3.9",
+		"solid-logic": "^4.0.8-0",
 		"solid-namespace": "^0.5.4",
-		"tailwindcss": "4.3.0",
 		"uuid": "^14.0.0"
 	},
 	"devDependencies": {
@@ -112,7 +111,6 @@
 		"@babel/preset-typescript": "^7.28.5",
 		"@eslint/js": "^9.39.4",
 		"@iconify/json": "2.2.481",
-		"@mdx-js/react": "^3.1.1",
 		"@rolldown/plugin-babel": "^0.2.3",
 		"@storybook/addon-docs": "10.4.2",
 		"@storybook/addon-links": "10.4.2",
@@ -140,10 +138,9 @@
 		"patch-package": "^8.0.1",
 		"path-browserify": "^1.0.1",
 		"postcss": "^8.5.15",
-		"react": "^17.0.2",
-		"react-dom": "^17.0.2",
-		"react-is": "^17.0.2",
+		"solidos-toolkit": "dev",
 		"storybook": "10.4.2",
+		"tailwindcss": "4.3.0",
 		"typedoc": "^0.28.19",
 		"typescript": "^5.9.3",
 		"unplugin-dts": "^1.0.2",

src/components/account/Account.stories.ts

@@ -13,7 +13,7 @@ const meta = {
   }
 } as const
 
-const render = defineAuthStoryRender<typeof meta.argTypes>(() => html`<solid-ui-account></solid-ui-account>`)
+const render = defineAuthStoryRender(() => html`<solid-ui-account></solid-ui-account>`)
 
 export default meta
 

src/components/account/Account.styles.css

@@ -4,7 +4,7 @@
     gap: 10px;
 }
 
-:host(:state(loggedIn)) {
+:host([data-state-loggedIn]) {
     --padding: 4px;
     --border-width: 1px;
     --image-size: 1.875rem; /* 30px */

src/components/account/Account.ts

@@ -1,5 +1,6 @@
 import { consume } from '@lit/context'
-import { html } from 'lit'
+import { html, nothing, TemplateResult } from 'lit'
+import { property } from 'lit/decorators.js'
 import { customElement, WebComponent } from '@/lib/components'
 import { authContext, AuthContext, DEFAULT_AUTH_CONTEXT } from '@/lib/auth'
 
@@ -17,13 +18,22 @@ import '~icons/lucide/user'
 
 import styles from './Account.styles.css'
 
+export interface AccountMenuItem {
+  label: string | TemplateResult
+  href?: string
+  onSelected?(): void
+}
+
 @customElement('solid-ui-account')
 export default class Account extends WebComponent {
   static styles = styles
   static states = {
     loggedIn: (component: Account) => !!component.auth.account,
   }
 
+  @property({ type: Array })
+  accessor menuItems: AccountMenuItem[] = []
+
   @consume({ context: authContext, subscribe: true })
   private accessor auth: AuthContext = DEFAULT_AUTH_CONTEXT
 
@@ -66,6 +76,11 @@ export default class Account extends WebComponent {
                 <icon-lucide-chevron-down slot="right-icon"></icon-lucide-chevron-down>
             </button>
 
+            ${this.menuItems.map(menuItem => html`
+                <solid-ui-menu-item .href=${menuItem.href ?? nothing} @solid-ui-select=${() => menuItem.onSelected?.()}>
+                    ${menuItem.label}
+                </solid-ui-menu-item>
+            `)}
             <solid-ui-logout-button>
                 <solid-ui-menu-item slot="trigger">
                     <icon-lucide-log-out slot="left-icon"></icon-lucide-log-out>

src/components/account/index.ts

@@ -1,4 +1,4 @@
-import Account from './Account'
+import Account, { type AccountMenuItem } from './Account'
 
-export { Account }
+export { Account, type AccountMenuItem }
 export default Account

src/components/avatar/Avatar.styles.css

@@ -13,7 +13,7 @@
     }
 }
 
-:host(:state(fallback)) {
+:host([data-state-fallback]) {
     background: var(--solid-ui-color-gray-100);
     justify-content: center;
     align-items: center;

src/components/combobox/Combobox.styles.css

@@ -10,9 +10,21 @@
         font-weight: 400;
     }
 
+    wa-popup {
+        display: block;
+        width: 100%;
+    }
+
+    wa-popup::part(popup) {
+        background: white;
+        border: 1px solid var(--solid-ui-color-gray-100);
+        border-radius: 5px;
+        box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.35);
+        overflow: hidden;
+    }
+
     .input-wrapper {
         position: relative;
-        anchor-name: --combobox-anchor;
         width: 100%;
 
         input {
@@ -35,32 +47,22 @@
         }
     }
 
-    [popover]:popover-open {
-        position: fixed;
-        top: calc(anchor(bottom) + 5px);
-        left: anchor(left);
-        right: auto;
-        bottom: auto;
-        min-width: anchor-size(width);
-        overflow: visible;
-        position-try-fallbacks: flip-block, flip-inline;
-        position-anchor: --combobox-anchor;
-        background: white;
-        border: 1px solid var(--solid-ui-color-gray-100);
-        border-radius: 5px;
-        box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.35);
+    .listbox {
         display: flex;
         flex-direction: column;
+        max-height: inherit;
+        overflow: auto;
 
         [role="option"] {
             padding: 12px 8px;
             color: var(--solid-ui-color-gray-700);
             border-bottom: 1px solid var(--solid-ui-color-gray-100);
+            cursor: pointer;
 
-            &:hover {
+            &:hover,
+            &[data-active] {
                 background: rgba(0, 0, 0, 0.05);
             }
         }
     }
-
 }