From 3316fba8f7965e033fe5c3877660d7371b010d50 Mon Sep 17 00:00:00 2001 From: Noel De Martin Date: Tue, 14 Jul 2026 12:23:12 +0200 Subject: [PATCH 1/9] #828 Tweak hover styles --- src/components/button/Button.styles.css | 2 +- src/components/combobox/Combobox.styles.css | 10 ++++++++-- src/components/combobox/Combobox.ts | 4 +--- src/components/menu-item/MenuItem.styles.css | 4 ---- src/components/menu/Menu.styles.css | 6 ++++++ src/styles/theme.css | 5 +++++ 6 files changed, 21 insertions(+), 10 deletions(-) diff --git a/src/components/button/Button.styles.css b/src/components/button/Button.styles.css index 38ce4648a..051f833ad 100644 --- a/src/components/button/Button.styles.css +++ b/src/components/button/Button.styles.css @@ -98,5 +98,5 @@ --background-color: transparent; --hover-text-color: currentColor; --hover-border-color: transparent; - --hover-background-color: color-mix(in srgb, currentColor 25%, transparent); + --hover-background-color: var(--solid-ui-color-primary-hover); } diff --git a/src/components/combobox/Combobox.styles.css b/src/components/combobox/Combobox.styles.css index 098120e59..02cdc3bd5 100644 --- a/src/components/combobox/Combobox.styles.css +++ b/src/components/combobox/Combobox.styles.css @@ -21,6 +21,7 @@ border-radius: 5px; box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.35); overflow: hidden; + padding: 4px; } .input-wrapper { @@ -50,21 +51,26 @@ .listbox { display: flex; flex-direction: column; + gap: 2px; max-height: inherit; overflow: auto; [role="option"], .non-selectable-option { color: var(--solid-ui-color-gray-700); padding: 12px 8px; + border-radius: 5px; } [role="option"] { - border-bottom: 1px solid var(--solid-ui-color-gray-100); cursor: pointer; &:hover, &[data-active] { - background: rgba(0, 0, 0, 0.05); + background: var(--solid-ui-color-primary-hover); + } + + &[aria-selected="true"] { + background: var(--solid-ui-color-primary-selected); } } diff --git a/src/components/combobox/Combobox.ts b/src/components/combobox/Combobox.ts index ac9d0a880..7c84a5fee 100644 --- a/src/components/combobox/Combobox.ts +++ b/src/components/combobox/Combobox.ts @@ -199,9 +199,7 @@ export default class Combobox extends WebComponent { ? html`
this.setActiveIndex(index)} > diff --git a/src/components/menu-item/MenuItem.styles.css b/src/components/menu-item/MenuItem.styles.css index d4b256023..980d8e553 100644 --- a/src/components/menu-item/MenuItem.styles.css +++ b/src/components/menu-item/MenuItem.styles.css @@ -14,10 +14,6 @@ font-size: var(--solid-ui-font-size-md); } - &:hover { - background-color: var(--solid-ui-color-slate-200); - } - ::slotted([slot="left-icon"]), ::slotted([slot="right-icon"]) { width: var(--solid-ui-font-size-xl); height: var(--solid-ui-font-size-xl); diff --git a/src/components/menu/Menu.styles.css b/src/components/menu/Menu.styles.css index 3a6ec70aa..34dde081b 100644 --- a/src/components/menu/Menu.styles.css +++ b/src/components/menu/Menu.styles.css @@ -1,8 +1,14 @@ wa-dropdown::part(menu) { min-width: 300px; box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.35); + gap: 2px; } wa-dropdown-item { + border-radius: 5px; padding: 0px; + + &:hover { + background-color: var(--solid-ui-color-primary-hover); + } } diff --git a/src/styles/theme.css b/src/styles/theme.css index 2b8b00ea7..0adeba65e 100644 --- a/src/styles/theme.css +++ b/src/styles/theme.css @@ -6,6 +6,8 @@ --font-family-ui: "Atkinson Hyperlegible Next", "Inter", "Noto Sans", sans-serif; --wa-font-family-body: "Atkinson Hyperlegible Next", "Inter", "Noto Sans", sans-serif; --solid-ui-color-primary: #7c4dff; + --solid-ui-color-primary-hover: var(--solid-ui-color-lavender-300); + --solid-ui-color-primary-selected: var(--solid-ui-color-lavender-400); --solid-ui-color-tertiary: #083575; --solid-ui-color-white: #ffffff; --solid-ui-color-error: #b00020; @@ -23,6 +25,9 @@ --solid-ui-color-slate-400: #90a1b9; --solid-ui-color-slate-800: #1d293d; + --solid-ui-color-lavender-300: #e6dcff; + --solid-ui-color-lavender-400: #cbb9ff; + --solid-ui-color-red-500: #fb2c36; --solid-ui-color-body-grey: #666; From 813adf02775b6bcbc6388ec3de7bd23175f83a54 Mon Sep 17 00:00:00 2001 From: Noel De Martin Date: Tue, 14 Jul 2026 12:49:04 +0200 Subject: [PATCH 2/9] #828 Implement selected menu items --- src/components/account/Account.ts | 3 ++- src/components/menu-item/MenuItem.styles.css | 4 ++++ src/components/menu-item/MenuItem.ts | 7 +++++-- src/components/menu/Menu.stories.ts | 20 ++++++++++++++++++-- 4 files changed, 29 insertions(+), 5 deletions(-) diff --git a/src/components/account/Account.ts b/src/components/account/Account.ts index 4e6c82611..8004a2fe9 100644 --- a/src/components/account/Account.ts +++ b/src/components/account/Account.ts @@ -22,6 +22,7 @@ import styles from './Account.styles.css' export interface AccountMenuItem { label: string | TemplateResult href?: string + selected?: boolean onSelected?(): void } @@ -85,7 +86,7 @@ export default class Account extends WebComponent { ${this.menuItems.map(menuItem => html` - menuItem.onSelected?.()}> + menuItem.onSelected?.()}> ${menuItem.label} `)} diff --git a/src/components/menu-item/MenuItem.styles.css b/src/components/menu-item/MenuItem.styles.css index 980d8e553..594b8b28e 100644 --- a/src/components/menu-item/MenuItem.styles.css +++ b/src/components/menu-item/MenuItem.styles.css @@ -12,6 +12,10 @@ color: var(--solid-ui-color-gray-600); font-weight: 500; font-size: var(--solid-ui-font-size-md); + + &[data-selected] { + background: var(--solid-ui-color-primary-selected); + } } ::slotted([slot="left-icon"]), ::slotted([slot="right-icon"]) { diff --git a/src/components/menu-item/MenuItem.ts b/src/components/menu-item/MenuItem.ts index 824c14298..bd5d42a8a 100644 --- a/src/components/menu-item/MenuItem.ts +++ b/src/components/menu-item/MenuItem.ts @@ -11,13 +11,16 @@ export default class MenuItem extends WebComponent { @property({ type: String, reflect: true }) accessor href: string | undefined + @property({ type: Boolean, reflect: true }) + accessor selected: boolean = false + @query('a') private accessor anchor: HTMLAnchorElement | null = null render () { if (this.href) { return html` - + @@ -26,7 +29,7 @@ export default class MenuItem extends WebComponent { } return html` -
+
diff --git a/src/components/menu/Menu.stories.ts b/src/components/menu/Menu.stories.ts index 04a136da1..2f5ebee39 100644 --- a/src/components/menu/Menu.stories.ts +++ b/src/components/menu/Menu.stories.ts @@ -1,5 +1,7 @@ import { html } from 'lit' import { defineStoryRender } from '@/storybook' +import type Menu from '@/components/menu/Menu' +import type MenuItem from '@/components/menu-item/MenuItem' import '@/components/button' import '@/components/menu-item' @@ -10,14 +12,28 @@ const meta = { title: 'Menu', } as const +function select (event: Event, message: string) { + const selectedItem = event.target as MenuItem + const menu = selectedItem.parentElement as Menu + const items = menu.querySelectorAll('solid-ui-menu-item') + + for (const item of items) { + item.selected = false + } + + selectedItem.selected = true + + alert(message) +} + const render = defineStoryRender(() => html` Open Menu - alert('Selected One!')}>One - alert('Selected Two!')}>Two + select(event, 'Selected One!')}>One + select(event, 'Selected Two!')}>Two External Link `) From 04b7dd1e0c4d8b5a1f190916b15796220be203e7 Mon Sep 17 00:00:00 2001 From: Noel De Martin Date: Mon, 13 Jul 2026 12:29:03 +0200 Subject: [PATCH 3/9] Fix WebAwesome styles import The previous import included the Native CSS reset from Web Awesome, which we don't want in order to avoid style conflicts. --- src/styles/theme.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/theme.css b/src/styles/theme.css index 0adeba65e..7a8fe5a17 100644 --- a/src/styles/theme.css +++ b/src/styles/theme.css @@ -1,4 +1,4 @@ -@import "@awesome.me/webawesome/dist/styles/webawesome.css"; +@import "@awesome.me/webawesome/dist/styles/themes/default.css"; @import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:wght@400;700&display=swap'); :root { From 39e2ae411524ad27b32646cefdc7e6d79409b5a9 Mon Sep 17 00:00:00 2001 From: Noel De Martin Date: Tue, 14 Jul 2026 15:12:33 +0200 Subject: [PATCH 4/9] Fix components import order Without this fix, importing the entire suite of components would register the provider after components like , which would cause them to have the wrong context at mount time (and so register the listeners with the incorrect Auth context, etc.). --- README.md | 2 ++ src/components/all.ts | 1 + src/components/index.ts | 5 ++++- 3 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 src/components/all.ts diff --git a/README.md b/README.md index 2152b8bab..42276d2f3 100644 --- a/README.md +++ b/README.md @@ -130,6 +130,8 @@ You can also use [import maps](https://developer.mozilla.org/en-US/docs/Web/HTML ``` +PS: If you're using the `` component to wrap your application, make sure to register it first. Otherwise, you may face errors or unexpected behaviour regarding global state. + ## Development When developing a component in solid-ui you can test it in isolation using Storybook: diff --git a/src/components/all.ts b/src/components/all.ts new file mode 100644 index 000000000..1ad523c61 --- /dev/null +++ b/src/components/all.ts @@ -0,0 +1 @@ +import.meta.glob(['./*/index.ts', '!./provider/index.ts'], { eager: true }) diff --git a/src/components/index.ts b/src/components/index.ts index 0d70de55f..916e49f9f 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1 +1,4 @@ -import.meta.glob('./*/index.ts', { eager: true }) +// Make sure that is registered first, so that contexts +// are available to nested components when they mount. +import './provider' +import './all' From 6b36abfbc30d18d9d1d6fa095551db282cb8da31 Mon Sep 17 00:00:00 2001 From: Noel De Martin Date: Tue, 14 Jul 2026 15:12:45 +0200 Subject: [PATCH 5/9] Fix Guard component prefix --- src/components/guard/Guard.stories.ts | 4 ++-- src/components/guard/Guard.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/guard/Guard.stories.ts b/src/components/guard/Guard.stories.ts index e09d3e9b0..3ee42c2a8 100644 --- a/src/components/guard/Guard.stories.ts +++ b/src/components/guard/Guard.stories.ts @@ -15,11 +15,11 @@ const meta = { } as const const render = defineAuthStoryRender(() => html` - + Initializing content Guest content Logged in content - + `) export const Primary = { render } diff --git a/src/components/guard/Guard.ts b/src/components/guard/Guard.ts index 416dcb8e7..fd83a68f7 100644 --- a/src/components/guard/Guard.ts +++ b/src/components/guard/Guard.ts @@ -3,7 +3,7 @@ import { consume } from '@lit/context' import { html } from 'lit' import { authContext, AuthContext, DEFAULT_AUTH_CONTEXT } from '@/lib/auth' -@customElement('solid-guard') +@customElement('solid-ui-guard') export default class Guard extends WebComponent { @consume({ context: authContext, subscribe: true }) private accessor auth: AuthContext = DEFAULT_AUTH_CONTEXT From 263a6814933815299c4466508658b324a525c2af Mon Sep 17 00:00:00 2001 From: Noel De Martin Date: Wed, 15 Jul 2026 11:46:03 +0200 Subject: [PATCH 6/9] Change default menu dropdown distance --- src/components/account/Account.ts | 2 +- src/components/menu/Menu.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/account/Account.ts b/src/components/account/Account.ts index 8004a2fe9..3b470957b 100644 --- a/src/components/account/Account.ts +++ b/src/components/account/Account.ts @@ -79,7 +79,7 @@ export default class Account extends WebComponent { } return html` - +