oat-glassed 0.1.0 → 0.2.1

package/LICENSE

@@ -1,6 +1,6 @@
 The MIT License
 
-Copyright (c) 2026 Kailash Nadh. https://nadh.in
+Copyright (c) 2026 good-lly
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,41 +1,256 @@
-# Oat Glassed UI
+<div align="center">
 
-(Forked [Oat UI](https://github.com/knadh/oat))
-See [CHANGELOG](CHANGELOG.md) for changes and updates.
+# Oat Glassed
 
-> Semantic, minimal, zero dependencies. ~11KB CSS and JS.
+**Ultra-lightweight, zero-dependency, semantic UI component library with glassmorphism design.**
 
-Oat Glassed is an ultra-lightweight HTML + CSS, semantic UI component library with zero dependencies. No framework, build, or dev complexity. Just include the tiny CSS and JS files and you are good to go building decent looking web applications with most commonly needed components and elements. Forked from Oat UI, it is now built with a glassmorphism design and has a few new components.
+[![npm version](https://img.shields.io/npm/v/oat-glassed?color=6c5ce7&style=flat-square)](https://www.npmjs.com/package/oat-glassed)
+[![npm bundle size](https://img.shields.io/badge/gzipped-~11KB-44cc11?style=flat-square)](https://www.npmjs.com/package/oat-glassed)
+[![license](https://img.shields.io/npm/l/oat-glassed?color=blue&style=flat-square)](LICENSE)
+[![zero deps](https://img.shields.io/badge/dependencies-0-brightgreen?style=flat-square)](#)
 
-Semantic tags and attributes are styled contextually out of the box without classes, forcing best practices, and reducing markup class pollution. A few dynamic components are WebComponents and use minimal JavaScript.
+[Live Demo & Docs](https://good-lly.github.io/oat-glassed) &bull; [Changelog](CHANGELOG.md) &bull; [Contributing](CONTRIBUTING.md) &bull; [npm](https://www.npmjs.com/package/oat-glassed)
 
-See live demo and docs at [**https://good-lly.github.io/oat-glassed**](https://good-lly.github.io/oat-glassed)
+<br />
 
----
+<img width="739" alt="Oat Glassed screenshot" src="https://github.com/good-lly/oat-glassed/blob/main/docs/static/screenshot.png?raw=true" />
 
-<img width="739" alt="image" src="https://github.com/good-lly/oat-glassed/blob/main/docs/static/screenshot.png?raw=true" />
+</div>
 
-## Installation
+<br />
 
-### CDN
+## Why Oat Glassed?
+
+- **Zero dependencies** &mdash; pure HTML, CSS, and vanilla JS. No framework lock-in.
+- **~11KB total** &mdash; 8KB CSS + 3KB JS (gzipped). Smaller than most single components in other libraries.
+- **Semantic first** &mdash; styles apply to native HTML elements and ARIA attributes, not utility classes. Write clean markup, get beautiful UI.
+- **Glassmorphism design** &mdash; modern frosted-glass aesthetic with automatic light/dark mode.
+- **WebComponents** &mdash; interactive elements use native `<ot-*>` custom elements with proper lifecycle, keyboard nav, and accessibility.
+- **Progressive enhancement** &mdash; everything works without JavaScript where possible. JS enhances, never gates.
+- **Performance-optimized** &mdash; `contain: paint`, `will-change` hints, reduced blur/saturate for smooth 60fps glassmorphism.
+
+<br />
+
+## Quick Start
+
+### CDN (fastest)
 
 ```html
-<link
-  rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/oat-glassed@1.0.0/dist/oat-glassed.min.css"
-/>
-<script src="https://cdn.jsdelivr.net/npm/oat-glassed@1.0.0/dist/oat-glassed.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/oat-glassed@latest/oat-glassed.min.css" />
+<script src="https://cdn.jsdelivr.net/npm/oat-glassed@latest/oat-glassed.min.js"></script>
 ```
 
-### NPM
+<details>
+<summary>unpkg alternative</summary>
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/oat-glassed@latest/oat-glassed.min.css" />
+<script src="https://unpkg.com/oat-glassed@latest/oat-glassed.min.js"></script>
+```
+</details>
+
+### npm
 
 ```bash
 npm install oat-glassed
 ```
 
 ```js
-import "oat-glassed/dist/oat-glassed.min.css";
-import "oat-glassed/dist/oat-glassed.min.js";
+import "oat-glassed/oat-glassed.min.css";
+import "oat-glassed/oat-glassed.min.js";
+```
+
+Then just write semantic HTML:
+
+```html
+<button>Default</button>
+<button class="primary">Primary</button>
+<button class="danger">Danger</button>
+
+<dialog open>
+  <h3>Glassmorphism dialog</h3>
+  <p>No classes needed. Just semantic HTML.</p>
+</dialog>
 ```
 
-## License is licensed under [MIT](LICENSE).
+<br />
+
+## Components
+
+### CSS Components (no JS required)
+
+| Component | Element / Selector | Description |
+| :--- | :--- | :--- |
+| **Accordion** | `<details>` / `<summary>` | Collapsible sections using native HTML |
+| **Alert** | `<output>` | Contextual feedback messages |
+| **Avatar** | `.avatar` | User profile images with fallbacks |
+| **Badge** | `<sup>`, `.badge` | Status indicators and counts |
+| **Breadcrumb** | `<nav>` with `<ol>` | Navigation path indicator |
+| **Button** | `<button>`, `<a role="button">` | Multiple variants: primary, secondary, danger, outline |
+| **Card** | `<article>`, `.card` | Glass-effect content containers |
+| **Dialog** | `<dialog>` | Modal windows with glassmorphism backdrop |
+| **Empty State** | `.empty-state` | Placeholder for empty content areas |
+| **Form** | `<form>`, `<input>`, `<select>`, `<textarea>` | Inputs, checkboxes, radios, selects &mdash; all semantic |
+| **Grid** | `.grid` | Responsive layout system |
+| **Meter** | `<meter>` | Gauge / measurement display |
+| **Nav** | `<nav>`, `[data-topnav]` | Side nav and responsive top navbar with mobile hamburger collapse |
+| **Progress** | `<progress>` | Progress bars |
+| **Sidebar** | `.sidebar` | Collapsible sidebar layout |
+| **Skeleton** | `.skeleton` | Loading placeholder animations |
+| **Spinner** | `.spinner` | Loading indicators |
+| **Switch** | `<input type="checkbox" role="switch">` | Toggle switches |
+| **Table** | `<table>` | Styled data tables |
+| **Tag** | `.tag` | Categorization labels |
+| **Typography** | `<h1>`&ndash;`<h6>`, `<p>`, `<blockquote>`, etc. | Styled out of the box |
+| **Utilities** | Various | Text, spacing, visibility, and layout helpers |
+
+### Interactive WebComponents (JS)
+
+| Component | Element | Features |
+| :--- | :--- | :--- |
+| **Tabs** | `<ot-tabs>` | Arrow key navigation, ARIA states, `ot-tab-change` event |
+| **Dropdown** | `<ot-dropdown>` | Auto-flip positioning, keyboard nav, popover API |
+| **Command Palette** | `<ot-command>` | `Cmd/Ctrl+K` global shortcut, real-time search, sections |
+| **Toast** | `window.ot.toast()` | Configurable placement, duration, pause-on-hover, variants |
+| **Tooltip** | `title` attribute | Progressive enhancement of native `title` to styled tooltips |
+| **Sidebar Toggle** | Sidebar JS | Auto-dismiss on outside click (mobile), responsive |
+
+<br />
+
+## Theming
+
+Oat Glassed uses CSS custom properties for full theme control. Override any variable on `:root`:
+
+```css
+:root {
+  --primary: oklch(0.65 0.25 270);
+  --background: oklch(0.15 0.02 260);
+  --glass-blur: 16px;
+  --glass-saturate: 140%;
+  --radius-medium: 8px;
+  --space-4: 1.5rem;
+}
+```
+
+### Key design tokens
+
+| Token | Default | Description |
+| :--- | :--- | :--- |
+| `--primary` | Brand blue | Primary action color |
+| `--danger` | Red | Destructive action color |
+| `--success` | Green | Positive feedback color |
+| `--warning` | Yellow | Warning color |
+| `--glass-blur` | `12px` | Backdrop blur intensity |
+| `--glass-saturate` | `120%` | Backdrop saturation |
+| `--radius-medium` | Border radius for components |
+| `--space-1` &ndash; `--space-8` | Spacing scale |
+| `--text-1` &ndash; `--text-7` | Type scale |
+
+Light and dark modes are automatic via `prefers-color-scheme` using CSS `light-dark()`.
+
+<br />
+
+## Toast API
+
+```js
+// Simple text toast
+window.ot.toast("File saved successfully", {
+  variant: "success",       // "info" | "success" | "danger" | "warning"
+  duration: 4000,           // ms, 0 = persistent
+  placement: "top-right",   // "top-right" | "top-center" | "bottom-right" | "bottom-center" | "bottom-left"
+});
+
+// Custom element toast
+window.ot.toast.el(myElement, { placement: "bottom-center" });
+
+// Clear all toasts
+window.ot.toast.clear();
+```
+
+<br />
+
+## Bundle Size
+
+| File | Raw | Gzipped |
+| :--- | ---: | ---: |
+| `oat-glassed.min.css` | 41.8 KB | **8.2 KB** |
+| `oat-glassed.min.js` | 7.8 KB | **2.9 KB** |
+| **Total** | **49.6 KB** | **~11.1 KB** |
+
+Individual source files are also available in the `css/` and `js/` directories if you prefer to import only what you need.
+
+<br />
+
+## Browser Support
+
+Oat Glassed targets modern evergreen browsers:
+
+- Chrome / Edge 110+
+- Firefox 115+
+- Safari 16.4+
+
+Uses modern CSS features: `@layer`, `light-dark()`, `oklch()`, `backdrop-filter`, Popover API.
+
+<br />
+
+## Development
+
+```bash
+# Build CSS + JS
+make dist
+
+# Build CSS only
+make css
+
+# Build JS only
+make js
+
+# Show bundle sizes
+make size
+
+# Clean build artifacts
+make clean
+```
+
+Build tooling is intentionally minimal &mdash; just `esbuild` via `npx` and `gzip`. No webpack, no PostCSS, no config files.
+
+<br />
+
+## Accessibility
+
+- Keyboard navigation for all interactive components (Arrow keys, Home, End, Enter, Escape)
+- ARIA attributes managed automatically (`aria-selected`, `aria-expanded`, `aria-controls`, `aria-labelledby`)
+- Semantic HTML elements used wherever possible (`<dialog>`, `<details>`, `<output>`, `<meter>`, `<progress>`)
+- Progressive enhancement &mdash; tooltips fall back to native `title`, accordions work without JS
+- Screen reader tested
+
+<br />
+
+## What's Different from Upstream Oat
+
+Oat Glassed builds on [Oat UI](https://github.com/knadh/oat) with a frosted-glass aesthetic inspired by shadcn defaults and Tailwind conventions, optimised for smooth 60fps rendering &mdash; `--glass-blur` is tuned to 18px, `--glass-saturate` to 140%, glass components use `contain: paint`, and fixed/sticky surfaces carry `will-change` hints for GPU compositing. Five new components are added: **Nav**, **Tag**, **Avatar**, **Empty State**, and **Command Palette**. An `index.js` entry point bundles all modules, the build uses `npx esbuild` instead of a global install, and docs are updated to reflect the Oat Glassed identity.
+
+<br />
+
+## Contributing
+
+Contributions are welcome! Please read the [Contributing Guide](CONTRIBUTING.md) before opening a PR.
+
+- **Bug fixes** &mdash; open an issue first to confirm, then send a PR with screenshots of visual changes.
+- **New features** &mdash; open an issue to discuss before sending a PR. The library aims to stay minimal (~10KB gzipped).
+- **Typos & minor fixes** &mdash; go straight to a PR.
+
+## Support Upstream
+
+Oat Glassed is a fork of [Oat UI](https://github.com/knadh/oat) by [Kailash Nadh](https://github.com/knadh). If you find this project useful, please also consider:
+
+- Starring and contributing to the [upstream Oat repository](https://github.com/knadh/oat)
+- Following the [upstream PR guidelines](https://github.com/knadh/oat/issues/74) when your contribution applies to the base library as well
+
+## Credits
+
+Forked from [Oat UI](https://github.com/knadh/oat) by [Kailash Nadh](https://github.com/knadh). Glassmorphism redesign and additional components by [good-lly](https://github.com/good-lly).
+
+## License
+
+[MIT](LICENSE)

package/css/00-base.css

@@ -14,7 +14,6 @@
     tab-size: 4;
   }
 
-  /* Top-layer elements don't inherit from body. Set explicitly. */
   body, dialog, [popover] {
     font-family: var(--font-sans);
     font-size: var(--text-regular);
@@ -43,8 +42,10 @@
   }
 
   h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-display);
     font-weight: var(--font-semibold);
-    line-height: 1.25;
+    line-height: 1.2;
+    letter-spacing: -0.01em;
 
     &:first-child {
       margin-block-start: 0;
@@ -93,10 +94,10 @@
     color: var(--link);
     text-decoration: underline;
     text-underline-offset: 2px;
-    transition: color var(--transition-fast);
+    transition: opacity var(--transition-fast);
 
     &:hover {
-      color: rgb(from var(--link) r g b / 0.8);
+      opacity: 0.8;
     }
   }
 
@@ -109,27 +110,25 @@
   }
 
   small {
-    font-size: var(--text-7);
+    font-size: var(--text-8);
   }
 
   code {
     font-family: var(--font-mono);
     font-size: 0.875em;
     padding: calc(var(--space-1) / 2) var(--space-2);
-    background-color: var(--faint);
-    border: 1px solid var(--border);
+    background-color: var(--surface-high);
     border-radius: var(--radius-small);
   }
 
   pre {
     font-family: var(--font-mono);
     padding: var(--space-5);
-    background-color: light-dark(rgb(246 246 250 / 0.45), rgb(18 18 24 / 0.45));
-    border: 1px solid var(--glass-border);
+    background-color: var(--surface-lowest);
+    border: 1px solid var(--border);
     border-radius: var(--radius-medium);
     overflow-x: auto;
     margin-block-end: var(--space-4);
-    box-shadow: var(--glass-edge);
 
     code {
       padding: 0;
@@ -140,18 +139,19 @@
   }
 
   blockquote {
-    border-inline-start: 3px solid light-dark(rgb(from var(--primary) r g b / 0.3), rgb(from var(--primary) r g b / 0.4));
+    border-inline-start: 3px solid rgb(from var(--primary) r g b / 0.4);
     padding: var(--space-3) var(--space-4);
     margin: var(--space-4) 0;
     color: var(--muted-foreground);
     font-style: italic;
-    background-color: var(--faint);
+    background-color: var(--surface-low);
     border-radius: 0 var(--radius-small) var(--radius-small) 0;
   }
 
   hr {
     border: none;
-    border-top: 1px solid var(--border);
+    height: 1px;
+    background-color: var(--border);
     margin: var(--space-2) 0;
   }
 
@@ -173,7 +173,7 @@
   }
 
   mark {
-    background-color: rgb(from var(--warning) r g b / 0.3);
+    background-color: rgb(from var(--warning) r g b / 0.25);
     padding: calc(var(--space-1) / 2) var(--space-1);
     border-radius: var(--radius-small);
   }

package/css/01-theme.css

@@ -1,64 +1,51 @@
 @layer theme {
   :root {
-    color-scheme: light dark;
-
-    /* Surface & text — Tailwind gray */
-    --background: light-dark(#ffffff, #030712);
-    --foreground: light-dark(#111827, #f9fafb);
-    --card: light-dark(rgb(255 255 255 / 0.55), rgb(17 24 39 / 0.48));
-    --card-foreground: light-dark(#111827, #f9fafb);
-    --primary: light-dark(#111827, #f9fafb);
-    --primary-foreground: light-dark(#ffffff, #111827);
-    --secondary: light-dark(rgb(243 244 246 / 0.55), rgb(31 41 55 / 0.4));
-    --secondary-foreground: light-dark(#1f2937, #f3f4f6);
-    --muted: light-dark(rgb(243 244 246 / 0.45), rgb(31 41 55 / 0.4));
-    --muted-foreground: light-dark(#6b7280, #9ca3af);
-    --faint: light-dark(rgb(249 250 251 / 0.35), rgb(17 24 39 / 0.3));
-    --faint-foreground: light-dark(#9ca3af, #6b7280);
-    --accent: light-dark(rgb(243 244 246 / 0.55), rgb(31 41 55 / 0.4));
-    --link: light-dark(#0284c7, #7dd3fc);
-
-    /* Semantic — Tailwind red/emerald/amber */
-    --danger: light-dark(#ef4444, #f87171);
-    --danger-foreground: light-dark(#ffffff, #111827);
-    --success: light-dark(#10b981, #34d399);
-    --success-foreground: light-dark(#ffffff, #111827);
-    --warning: light-dark(#f59e0b, #fbbf24);
-    --warning-foreground: #111827;
-
-    /* Borders & rings */
-    --border: light-dark(rgb(0 0 0 / 0.08), rgb(255 255 255 / 0.08));
-    --input: light-dark(rgb(0 0 0 / 0.1), rgb(255 255 255 / 0.1));
-    --ring: light-dark(#111827, #f9fafb);
-
-    /* Glass — Tier 1 (real blur on nav, sidebar, dialog only) */
-    --glass-blur: 12px;
-    --glass-saturate: 120%;
-    --glass-border: light-dark(
-      rgb(255 255 255 / 0.65),
-      rgb(255 255 255 / 0.09)
-    );
-    --glass-highlight: light-dark(
-      linear-gradient(
-        135deg,
-        rgb(255 255 255 / 0.7) 0%,
-        rgb(255 255 255 / 0.15) 40%,
-        rgb(255 255 255 / 0) 60%
-      ),
-      linear-gradient(
-        135deg,
-        rgb(255 255 255 / 0.1) 0%,
-        rgb(255 255 255 / 0.03) 40%,
-        rgb(255 255 255 / 0) 60%
-      )
-    );
-    /* Faux glass edge — Tier 2 (inset highlights simulate glass reflection) */
-    --glass-edge: light-dark(
-      inset 0 0 0 1px rgb(255 255 255 / 0.12), inset 0 1px 0 rgb(255 255 255 / 0.15), 0 8px 32px rgb(0 0 0 / 0.08),
-      inset 0 0 0 1px rgb(255 255 255 / 0.08), inset 0 1px 0 rgb(255 255 255 / 0.1), 0 8px 32px rgb(0 0 0 / 0.25)
-    );
-
-    /* ==================== */
+    color-scheme: dark;
+
+    /* Surface hierarchy — "Deep Code" tonal architecture */
+    --background: #131317;
+    --foreground: #e8eaed;
+    --card: #1f1f23;
+    --card-foreground: #e8eaed;
+    --primary: #4a9eff;
+    --primary-foreground: #0e0e12;
+    --secondary: #2a2a2e;
+    --secondary-foreground: #c0c7d4;
+    --muted: #1f1f23;
+    --muted-foreground: #8b95a5;
+    --faint: #191920;
+    --faint-foreground: #6b7280;
+    --accent: #2a2a2e;
+    --link: #a4c9ff;
+
+    /* Semantic — tuned for dark-charcoal legibility */
+    --danger: #ff6b6b;
+    --danger-foreground: #0e0e12;
+    --success: #4ade80;
+    --success-foreground: #0e0e12;
+    --warning: #fbbf24;
+    --warning-foreground: #131317;
+
+    /* Ghost borders — the only permitted edges */
+    --border: rgb(255 255 255 / 0.06);
+    --input: rgb(255 255 255 / 0.08);
+    --ring: #a4c9ff;
+
+    /* Tonal surface layers for nesting depth */
+    --surface-lowest: #0e0e12;
+    --surface-low: #191920;
+    --surface: #1f1f23;
+    --surface-high: #2a2a2e;
+    --surface-highest: #35353a;
+
+    /* Glass — 20px blur for command palettes & floating UI */
+    --glass-blur: 20px;
+    --glass-saturate: 130%;
+    --glass-border: rgb(255 255 255 / 0.08);
+    --glass-highlight: none;
+    --glass-edge: none;
+
+    /* Spacing — strict 4px grid */
     --space-1: 0.25rem;
     --space-2: 0.5rem;
     --space-3: 0.75rem;
@@ -72,15 +59,17 @@
     --space-16: 4rem;
     --space-18: 4.5rem;
 
-    --radius-small: 0.25rem;
-    --radius-medium: 0.5rem;
-    --radius-large: 1.25rem;
+    --radius-small: 0.375rem;
+    --radius-medium: 0.75rem;
+    --radius-large: 1rem;
     --radius-full: 9999px;
 
-    --bar-height: 0.5rem;
+    --bar-height: 0.375rem;
 
-    --font-sans: system-ui, -apple-system, sans-serif;
-    --font-mono: ui-monospace, "SF Mono", Consolas, monospace;
+    /* Dual-type system */
+    --font-display: 'Space Grotesk', system-ui, sans-serif;
+    --font-sans: 'Inter', system-ui, sans-serif;
+    --font-mono: 'Space Mono', ui-monospace, 'SF Mono', Consolas, monospace;
 
     --text-1: clamp(1.75rem, 1.5rem + 1.1vw, 2.25rem);
     --text-2: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
@@ -90,31 +79,20 @@
     --text-6: 1rem;
     --text-7: 0.875rem;
     --text-8: 0.75rem;
-    --text-regular: var(--text-6);
+    --text-regular: var(--text-7);
 
-    --leading-normal: 1.6;
+    --leading-normal: 1.5;
 
     --font-normal: 400;
     --font-medium: 500;
     --font-semibold: 600;
-    --font-bold: 600;
-
-    --shadow-small: light-dark(
-      0 1px 4px rgb(0 0 0 / 0.03), 0 0.5px 1px rgb(0 0 0 / 0.02),
-      0 1px 4px rgb(0 0 0 / 0.2), 0 0.5px 1px rgb(0 0 0 / 0.15)
-    );
-    --shadow-medium: light-dark(
-      0 4px 20px -4px rgb(0 0 0 / 0.06), 0 1px 4px rgb(0 0 0 / 0.03),
-      0 4px 20px -4px rgb(0 0 0 / 0.35), 0 1px 4px rgb(0 0 0 / 0.2)
-    );
-    --shadow-large: light-dark(
-      0 16px 48px -8px rgb(0 0 0 / 0.07), 0 4px 16px -4px rgb(0 0 0 / 0.03),
-      0 16px 48px -8px rgb(0 0 0 / 0.45), 0 4px 16px -4px rgb(0 0 0 / 0.2)
-    );
-    --shadow-glow: light-dark(
-      0 0 0 0.5px rgb(0 0 0 / 0.02), 0 4px 24px -4px rgb(0 0 0 / 0.05),
-      0 0 0 0.5px rgb(255 255 255 / 0.05), 0 4px 28px -4px rgb(0 0 0 / 0.4)
-    );
+    --font-bold: 700;
+
+    /* No drop shadows — tonal layering only */
+    --shadow-small: none;
+    --shadow-medium: none;
+    --shadow-large: none;
+    --shadow-glow: none;
 
     --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
     --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -128,19 +106,9 @@
     :root {
       --glass-blur: 0px;
       --glass-saturate: 100%;
-      --card: light-dark(rgb(243 244 246 / 0.95), rgb(17 24 39 / 0.95));
-      --secondary: light-dark(rgb(229 231 235 / 0.95), rgb(31 41 55 / 0.92));
-      --muted: light-dark(rgb(229 231 235 / 0.92), rgb(31 41 55 / 0.88));
-      --faint: light-dark(rgb(243 244 246 / 0.9), rgb(17 24 39 / 0.85));
-      --accent: light-dark(rgb(229 231 235 / 0.95), rgb(31 41 55 / 0.92));
-      --glass-highlight: none;
-      --glass-edge: none;
     }
 
-    *,
-    *::before,
-    *::after,
-    *::backdrop {
+    *, *::before, *::after, *::backdrop {
       backdrop-filter: none !important;
       -webkit-backdrop-filter: none !important;
     }

package/css/accordion.css

@@ -1,18 +1,13 @@
 @layer components {
   details {
-    border: 1px solid var(--glass-border);
+    background-color: var(--surface);
     border-radius: var(--radius-medium);
     overflow: hidden;
-    background-color: light-dark(rgb(255 255 255 / 0.35), rgb(255 255 255 / 0.02));
-    background-image: var(--glass-highlight);
-    box-shadow: var(--glass-edge);
     contain: paint;
     content-visibility: auto;
 
     & + details {
-      margin-top: -1px;
-      border-start-start-radius: 0;
-      border-start-end-radius: 0;
+      margin-top: var(--space-1);
     }
 
     &:has(+ details) {
@@ -20,8 +15,13 @@
       border-end-end-radius: 0;
     }
 
+    & + details {
+      border-start-start-radius: 0;
+      border-start-end-radius: 0;
+    }
+
     &[open] summary {
-      border-bottom: 1px solid var(--border);
+      background-color: var(--surface-high);
     }
   }
 
@@ -37,7 +37,7 @@
     transition: background-color var(--transition-fast);
 
     &:hover {
-      background-color: var(--accent);
+      background-color: var(--surface-high);
     }
 
     &::-webkit-details-marker, &::marker {