Merge pull request #816 from NoelDeMartin/772-browser-support

#772 Improve Browser Support for new components

Author: NoelDeMartin

package-lock.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-1",
+		"rdflib": "2.4.0",
+		"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",

package.json

@@ -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.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/avatar/Avatar.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);
             }
         }
     }
-
 }