update styles

package.json

@@ -22,6 +22,7 @@
     "@solidjs/start": "^1.1.4",
     "better-auth": "^1.2.7",
     "better-sqlite3": "^11.10.0",
+    "open-props": "^1.7.15",
     "sitemap": "^8.0.0",
     "solid-icons": "^1.1.0",
     "solid-js": "^1.9.6",

src/components/list/list.module.css

@@ -42,7 +42,7 @@
 
   &::after {
     order: 11;
-    inline-size: 50cqi;
+    inline-size: 100cqi;
   }
 
   & > li {

src/components/select/select.module.css

@@ -1,4 +1,87 @@
 .box {
+    appearance: none;
+
+    display: block grid;
+    place-items: center start;
+
+    padding: var(--size-2);
+    background-color: transparent;
+    border: none;
+    border-radius: var(--radius-2);
+    font-size: 1rem;
+
+    &:hover {
+        background-color: var(--surface-700);
+    }
+
+    @supports (appearance: base-select) {
+
+        &,
+        &::picker(select) {
+            appearance: base-select;
+        }
+
+        &::picker(select) {
+            /* display: block grid;
+            row-gap: var(--size-2); */
+
+            background-color: var(--surface-3);
+            padding: var(--size-2) 0;
+            border: none;
+            box-shadow: var(--shadow-2);
+
+            opacity: 0;
+            block-size: 0;
+            overflow: clip;
+            transition:
+                height 0.5s ease-out,
+                opacity 0.5s ease-out,
+                overlay 0.5s,
+                display 0.5s,
+                overflow 0.5s;
+
+            transition-behavior: allow-discrete;
+        }
+
+        &:open {
+            background-color: var(--surface-3);
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+
+            &::picker(select) {
+                opacity: 1;
+                block-size: calc-size(auto, size);
+                overflow: auto;
+
+                @starting-style {
+                    opacity: 0;
+                    block-size: 0;
+                }
+            }
+        }
+
+        & > option {
+            display: block grid;
+            grid-auto-flow: column;
+            place-items: center start;
+
+            border-radius: var(--radius-2);
+            padding: var(--size-2);
+
+            cursor: pointer;
+
+            &:checked {
+                background-color: var(--surface-4);
+            }
+
+            &::checkmark {
+                display: none;
+            }
+        }
+    }
+}
+
+/* .box {
     display: contents;
 
     &:has(> :popover-open) > .button {
@@ -14,7 +97,6 @@
     grid-template-columns: inherit;
     place-items: center start;
 
-    /* Make sure the height of the button does not collapse when it is empty */
     block-size: 1em;
     box-sizing: content-box;
 
@@ -52,7 +134,6 @@
     inset-block-start: anchor(end);
     position-try-fallbacks: flip-block, flip-inline;
 
-    /* inline-size: anchor-size(self-inline); */
     background-color: var(--surface-3);
     padding: var(--size-2);
     border: none;
@@ -92,4 +173,4 @@
     &.selected {
         background-color: oklch(from var(--info) l c h / .1);
     }
-}
+} */

src/features/shell/shell.module.css

@@ -1,6 +1,6 @@
 .container {
   position: relative;
-  display: grid;
+  display: block grid;
   grid: auto 1fr / 5em 1fr;
   grid-template-areas:
     "top top"
@@ -11,25 +11,35 @@
   overflow: clip;
   container-type: inline-size;
   background-color: var(--surface-1);
+
+  &::after {
+    content: '';
+    grid-area: content;
+    display: block;
+    position: absolute;
+    inset-inline-start: 0;
+    inset-block-start: 0;
+    inline-size: var(--radius-4);
+    block-size: var(--radius-4);
+    background: radial-gradient(circle at bottom right, transparent var(--radius-4), var(--surface-1) var(--radius-4));
+    pointer-events: none;
+  }
 }
 
 .body {
   grid-area: 2 / 1 / 3 / 3;
   inline-size: 100%;
   block-size: 100%;
-  background: linear-gradient(
+  background: linear-gradient(180deg,
-    180deg,
+      transparent,
-    transparent,
+      transparent 90vh,
-    transparent 90vh,
+      var(--surface-500) 90vh,
-    var(--surface-500) 90vh,
+      var(--surface-500));
-    var(--surface-500)
-  );
   overflow: clip auto;
   padding-inline-start: 5em;
   transition: filter var(--duration-moderate-1) var(--ease-3);
 
   & > div {
-    border-top-left-radius: var(--radius-4);
     background-color: var(--surface-2);
     isolation: isolate;
     inline-size: 100%;