doom-design-system 0.1.7 → 0.1.8

package/dist/components/Badge/Badge.module.css

@@ -0,0 +1,31 @@
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.75rem;
+  border-radius: var(--radius-pill);
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  border: 2px solid var(--card-border);
+  box-shadow: 2px 2px 0px 0px var(--card-border);
+}
+.badge.primary {
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+}
+.badge.success {
+  background-color: var(--success);
+  color: var(--card-bg);
+}
+.badge.warning {
+  background-color: var(--warning);
+  color: var(--card-bg);
+}
+.badge.error {
+  background-color: var(--error);
+  color: var(--card-bg);
+}
+.badge.secondary {
+  background-color: var(--secondary);
+  color: var(--secondary-foreground);
+}

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -1,46 +1,14 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import styled from '@emotion/styled';
-import { Link } from '../Link';
-const BreadcrumbNav = styled.nav `
-  display: flex;
-  align-items: center;
-  font-size: var(--text-sm);
-  color: var(--muted-foreground);
-`;
-const BreadcrumbList = styled.ol `
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  padding: 0;
-  margin: 0;
-  list-style: none;
-  gap: 0.5rem;
-`;
-const BreadcrumbLi = styled.li `
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-
-  &:not(:last-child)::after {
-    /* Separator */
-    content: '/';
-    margin-left: 0.25rem;
-    color: var(--muted-foreground);
-    opacity: 0.5;
-    font-weight: 700;
-  }
-`;
-const CurrentPage = styled.span `
-  font-weight: 700;
-  color: var(--foreground);
-`;
+import clsx from 'clsx';
+import { Link } from '../Link/Link';
+import styles from './Breadcrumbs.module.css';
 export function Breadcrumbs({ children, className }) {
-    return (_jsx(BreadcrumbNav, { "aria-label": "breadcrumb", className: className, children: _jsx(BreadcrumbList, { children: children }) }));
+    return (_jsx("nav", { "aria-label": "breadcrumb", className: clsx(styles.nav, className), children: _jsx("ol", { className: styles.list, children: children }) }));
 }
 export function BreadcrumbItem({ href, isCurrent, children }) {
     if (isCurrent) {
-        return (_jsx(BreadcrumbLi, { "aria-current": "page", children: _jsx(CurrentPage, { children: children }) }));
+        return (_jsx("li", { className: styles.li, "aria-current": "page", children: _jsx("span", { className: styles.currentPage, children: children }) }));
     }
-    return (_jsx(BreadcrumbLi, { children: href ? (_jsx(Link, { href: href, variant: "default", style: { fontSize: 'inherit' }, children: children })) : (_jsx("span", { children: children })) }));
+    return (_jsx("li", { className: styles.li, children: href ? (_jsx(Link, { href: href, variant: "default", style: { fontSize: 'inherit' }, children: children })) : (_jsx("span", { children: children })) }));
 }

package/dist/components/Breadcrumbs/Breadcrumbs.module.css

@@ -0,0 +1,34 @@
+.nav {
+  display: flex;
+  align-items: center;
+  font-size: var(--text-sm);
+  color: var(--muted-foreground);
+}
+
+.list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  gap: 0.5rem;
+}
+
+.li {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.li:not(:last-child)::after {
+  content: "/";
+  margin-left: 0.25rem;
+  color: var(--muted-foreground);
+  opacity: 0.5;
+  font-weight: 700;
+}
+
+.currentPage {
+  font-weight: 700;
+  color: var(--foreground);
+}

package/dist/components/Button/Button.d.ts

@@ -5,5 +5,5 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: ButtonVariant;
     size?: ButtonSize;
 }
-export declare function Button({ children, variant, size, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Button({ children, variant, size, className, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Button/Button.js

@@ -11,134 +11,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-const StyledButton = styled.button `
-  --btn-focus-border: var(--primary);
-  --btn-focus-shadow: var(--shadow-primary);
-
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--radius);
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  transition: 
-    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), 
-    box-shadow 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
-    background-color 0.2s ease,
-    color 0.2s ease,
-    border-color 0.2s ease;
-  cursor: pointer;
-  border: var(--border-width) solid var(--card-border);
-  box-shadow: var(--shadow-hard);
-  background-color: var(--card-bg);
-  color: var(--foreground);
-  font-size: var(--text-base);
-  position: relative;
-
-  &:hover {
-    transform: translate(-2px, -2px);
-    box-shadow: var(--shadow-hover);
-  }
-
-  &:focus {
-    outline: none;
-    box-shadow: 7px 7px 0px 0px var(--btn-focus-shadow);
-    transform: translate(-2px, -2px);
-    border-color: var(--btn-focus-border);
-  }
-
-  &:active {
-    transition: none;
-    transform: translate(2px, 2px);
-    box-shadow: none;
-  }
-
-  &:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-    transform: none;
-    box-shadow: var(--shadow-hard);
-  }
-
-  /* Variants */
-  ${props => props.variant === 'primary' && css `
-    /* Contrast Override */
-    --btn-focus-border: var(--card-border);
-    --btn-focus-shadow: #000000;
-
-    background-color: var(--primary);
-    color: var(--primary-foreground);
-    &:hover {
-      filter: brightness(1.1);
-    }
-  `}
-
-  ${props => props.variant === 'secondary' && css `
-    /* Contrast Override */
-    --btn-focus-border: var(--card-border);
-    --btn-focus-shadow: #000000;
-
-    background-color: var(--secondary);
-    color: var(--secondary-foreground);
-    &:hover {
-      filter: brightness(1.1);
-    }
-  `}
-
-  ${props => props.variant === 'success' && css `
-    /* Contrast Override */
-    --btn-focus-border: var(--card-border);
-    --btn-focus-shadow: #000000;
-
-    background-color: var(--success);
-    color: var(--card-bg);
-    &:hover {
-      filter: brightness(1.1);
-    }
-  `}
-  
-  ${props => props.variant === 'outline' && css `
-    background-color: transparent;
-  `}
-
-  ${props => props.variant === 'ghost' && css `
-    background-color: transparent;
-    border-color: transparent;
-    box-shadow: none;
-    &:hover, &:focus {
-      background-color: color-mix(in srgb, var(--primary), transparent 90%);
-      color: var(--primary);
-      transform: none;
-      box-shadow: none;
-      border-color: transparent;
-      outline: none;
-    }
-    &:active {
-      transform: scale(0.95);
-      transition: none;
-    }
-  `}
-
-  /* Sizes */
-  ${props => props.size === 'sm' && css `
-    padding: 0.25rem 0.5rem;
-    font-size: var(--text-sm);
-  `}
-
-  ${props => props.size === 'md' && css `
-    padding: 0.75rem 1.5rem;
-    font-size: var(--text-base);
-  `}
-
-  ${props => props.size === 'lg' && css `
-    padding: 1rem 2rem;
-    font-size: var(--text-lg);
-  `}
-`;
+import clsx from 'clsx';
+import styles from './Button.module.css';
 export function Button(_a) {
-    var { children, variant = 'primary', size = 'md' } = _a, props = __rest(_a, ["children", "variant", "size"]);
-    return (_jsx(StyledButton, Object.assign({ variant: variant, size: size }, props, { children: children })));
+    var { children, variant = 'primary', size = 'md', className } = _a, props = __rest(_a, ["children", "variant", "size", "className"]);
+    const buttonClass = clsx(styles.button, styles[variant], styles[size], className);
+    return (_jsx("button", Object.assign({ className: buttonClass }, props, { children: children })));
 }

package/dist/components/Button/Button.module.css

@@ -0,0 +1,112 @@
+.button {
+  --btn-focus-border: var(--primary);
+  --btn-focus-shadow: var(--shadow-primary);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+  cursor: pointer;
+  border: var(--border-width) solid var(--card-border);
+  box-shadow: var(--shadow-hard);
+  background-color: var(--card-bg);
+  color: var(--foreground);
+  font-size: var(--text-base);
+  position: relative;
+}
+.button:hover {
+  transform: translate(-2px, -2px);
+  box-shadow: var(--shadow-hover);
+}
+.button:focus {
+  outline: none;
+  box-shadow: 7px 7px 0px 0px var(--btn-focus-shadow);
+  transform: translate(-2px, -2px);
+  border-color: var(--btn-focus-border);
+}
+.button:active {
+  transition: none;
+  transform: translate(2px, 2px);
+  box-shadow: none;
+}
+.button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: var(--shadow-hard);
+}
+
+/* Variants */
+.primary {
+  /* Contrast Override */
+  --btn-focus-border: var(--card-border);
+  --btn-focus-shadow: #000000;
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+}
+.primary:hover {
+  filter: brightness(1.1);
+}
+
+.secondary {
+  /* Contrast Override */
+  --btn-focus-border: var(--card-border);
+  --btn-focus-shadow: #000000;
+  background-color: var(--secondary);
+  color: var(--secondary-foreground);
+}
+.secondary:hover {
+  filter: brightness(1.1);
+}
+
+.success {
+  /* Contrast Override */
+  --btn-focus-border: var(--card-border);
+  --btn-focus-shadow: #000000;
+  background-color: var(--success);
+  color: var(--card-bg);
+}
+.success:hover {
+  filter: brightness(1.1);
+}
+
+.outline {
+  background-color: transparent;
+}
+
+.ghost {
+  background-color: transparent;
+  border-color: transparent;
+  box-shadow: none;
+}
+.ghost:hover, .ghost:focus {
+  background-color: color-mix(in srgb, var(--primary), transparent 90%);
+  color: var(--primary);
+  transform: none;
+  box-shadow: none;
+  border-color: transparent;
+  outline: none;
+}
+.ghost:active {
+  transform: scale(0.95);
+  transition: none;
+}
+
+/* Sizes */
+.sm {
+  padding: 0.25rem 0.5rem;
+  font-size: var(--text-sm);
+}
+
+.md {
+  padding: 0.75rem 1.5rem;
+  font-size: var(--text-base);
+}
+
+.lg {
+  padding: 1rem 2rem;
+  font-size: var(--text-lg);
+}

package/dist/components/Card/Card.d.ts

@@ -4,5 +4,5 @@ interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     as?: React.ElementType;
     disabled?: boolean;
 }
-export declare function Card({ children, className, as, ...props }: CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function Card({ children, className, as: Component, ...props }: CardProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Card/Card.js

@@ -1,6 +1,4 @@
 'use client';
-'use client';
-'use client';
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -13,16 +11,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import styled from '@emotion/styled';
-const StyledCard = styled.div `
-  background-color: var(--card-bg);
-  border: var(--border-width) solid var(--card-border);
-  border-radius: var(--radius);
-  padding: var(--spacing-lg);
-  box-shadow: var(--shadow-hard);
-  min-width: 0; /* Safe default for grid/flex items */
-`;
+import clsx from 'clsx';
+import styles from './Card.module.css';
 export function Card(_a) {
-    var { children, className, as } = _a, props = __rest(_a, ["children", "className", "as"]);
-    return (_jsx(StyledCard, Object.assign({ as: as, className: className }, props, { children: children })));
+    var { children, className, as: Component = 'div' } = _a, props = __rest(_a, ["children", "className", "as"]);
+    return (_jsx(Component, Object.assign({ className: clsx(styles.card, className) }, props, { children: children })));
 }

package/dist/components/Card/Card.module.css

@@ -0,0 +1,8 @@
+.card {
+  background-color: var(--card-bg);
+  border: var(--border-width) solid var(--card-border);
+  border-radius: var(--radius);
+  padding: var(--spacing-lg);
+  box-shadow: var(--shadow-hard);
+  min-width: 0; /* Safe default for grid/flex items */
+}

package/dist/components/Drawer/Drawer.js

@@ -1,77 +1,11 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import clsx from 'clsx';
 import { createPortal } from 'react-dom';
-import styled from '@emotion/styled';
 import { X } from 'lucide-react';
-import { Button } from '../Button';
-import { Flex } from '../Layout';
-const Overlay = styled.div `
-  position: fixed;
-  inset: 0;
-  background-color: rgba(0, 0, 0, var(--overlay-opacity));
-  backdrop-filter: blur(4px);
-  opacity: ${props => props.isOpen ? 1 : 0};
-  transition: opacity 0.2s ease-in-out;
-  pointer-events: ${props => props.isOpen ? 'auto' : 'none'};
-  z-index: var(--z-dropdown);
-`;
-const Panel = styled.div `
-  position: fixed;
-  background-color: var(--card-bg);
-  box-shadow: ${props => props.side === 'left'
-    ? '8px 0px 0px 0px var(--card-border)'
-    : '-8px 0px 0px 0px var(--card-border)'};
-  z-index: var(--z-modal);
-  display: flex;
-  flex-direction: column;
-  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-
-  top: 0;
-  bottom: 0;
-  ${props => props.side}: 0;
-  width: 100%;
-  max-width: 400px;
-  
-  ${props => props.side === 'left' ? `
-    border-top-right-radius: var(--radius);
-    border-bottom-right-radius: var(--radius);
-  ` : `
-    border-top-left-radius: var(--radius);
-    border-bottom-left-radius: var(--radius);
-  `}
-  
-  visibility: ${props => props.isOpen ? 'visible' : 'hidden'};
-  
-  transform: ${props => {
-    if (props.isOpen)
-        return 'translateX(0)';
-    return props.side === 'right' ? 'translateX(100%)' : 'translateX(-100%)';
-}};
-`;
-const Header = styled(Flex) `
-  padding: var(--spacing-lg);
-  border-bottom-width: var(--border-width);
-  border-bottom-style: solid;
-  border-bottom-color: var(--card-border);
-`;
-const Title = styled.h2 `
-  margin: 0;
-  font-family: var(--font-heading);
-  font-size: var(--text-xl);
-  font-weight: 700;
-`;
-const Content = styled.div `
-  flex: 1;
-  padding: var(--spacing-lg);
-  overflow-y: auto;
-`;
-const Footer = styled(Flex) `
-  padding: var(--spacing-lg);
-  border-top-width: var(--border-width);
-  border-top-style: solid;
-  border-top-color: var(--card-border);
-`;
+import { Button } from '../Button/Button';
+import styles from './Drawer.module.css';
+import { useEffect, useState } from 'react';
 export function Drawer({ isOpen, onClose, title, side = 'right', children, footer, className }) {
     const [mounted, setMounted] = useState(false);
     useEffect(() => {
@@ -97,5 +31,5 @@ export function Drawer({ isOpen, onClose, title, side = 'right', children, foote
     }, [isOpen, onClose]);
     if (!mounted)
         return null;
-    return createPortal(_jsxs(_Fragment, { children: [_jsx(Overlay, { isOpen: isOpen, onClick: onClose, "aria-hidden": "true" }), _jsxs(Panel, { isOpen: isOpen, side: side, role: "dialog", "aria-modal": "true", className: className, children: [_jsxs(Header, { align: "center", justify: "space-between", children: [_jsx(Title, { children: title }), _jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, "aria-label": "Close drawer", children: _jsx(X, { size: 24 }) })] }), _jsx(Content, { children: children }), footer && _jsx(Footer, { justify: "flex-end", gap: "var(--spacing-md)", children: footer })] })] }), document.body);
+    return createPortal(_jsxs(_Fragment, { children: [_jsx("div", { className: clsx(styles.overlay, isOpen && styles.open), onClick: onClose, "aria-hidden": "true" }), _jsxs("div", { className: clsx(styles.panel, styles[side], isOpen && styles.open, className), role: "dialog", "aria-modal": "true", children: [_jsxs("div", { className: styles.header, children: [_jsx("h2", { className: styles.title, children: title }), _jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, "aria-label": "Close drawer", children: _jsx(X, { size: 24 }) })] }), _jsx("div", { className: styles.content, children: children }), footer && _jsx("div", { className: styles.footer, children: footer })] })] }), document.body);
 }

package/dist/components/Drawer/Drawer.module.css

@@ -0,0 +1,75 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, var(--overlay-opacity));
+  backdrop-filter: blur(4px);
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+  pointer-events: none;
+  z-index: var(--z-dropdown);
+}
+.overlay.open {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.panel {
+  position: fixed;
+  background-color: var(--card-bg);
+  z-index: var(--z-modal);
+  display: flex;
+  flex-direction: column;
+  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  max-width: 400px;
+  visibility: hidden;
+}
+.panel.left {
+  left: 0;
+  box-shadow: 8px 0px 0px 0px var(--card-border);
+  border-top-right-radius: var(--radius);
+  border-bottom-right-radius: var(--radius);
+  transform: translateX(-100%);
+}
+.panel.right {
+  right: 0;
+  box-shadow: -8px 0px 0px 0px var(--card-border);
+  border-top-left-radius: var(--radius);
+  border-bottom-left-radius: var(--radius);
+  transform: translateX(100%);
+}
+.panel.open {
+  visibility: visible;
+  transform: translateX(0);
+}
+
+.header {
+  padding: var(--spacing-lg);
+  border-bottom: var(--border-width) solid var(--card-border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.title {
+  margin: 0;
+  font-family: var(--font-heading);
+  font-size: var(--text-xl);
+  font-weight: 700;
+}
+
+.content {
+  flex: 1;
+  padding: var(--spacing-lg);
+  overflow-y: auto;
+}
+
+.footer {
+  padding: var(--spacing-lg);
+  border-top: var(--border-width) solid var(--card-border);
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--spacing-md);
+}

package/dist/components/Dropdown/Dropdown.d.ts

@@ -6,6 +6,7 @@ interface DropdownProps {
     triggerLabel: string;
     items: DropdownItemType[];
     variant?: 'primary' | 'secondary';
+    className?: string;
 }
-export declare function Dropdown({ triggerLabel, items, variant }: DropdownProps): import("react/jsx-runtime").JSX.Element;
+export declare function Dropdown({ triggerLabel, items, variant, className }: DropdownProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Dropdown/Dropdown.js

@@ -1,46 +1,13 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { Button } from '../Button/Button';
+import { Popover } from '../Popover/Popover';
+import styles from './Dropdown.module.css';
 import { useState } from 'react';
-import styled from '@emotion/styled';
-import { Button, Popover } from '../..';
-const StyledDropdownMenu = styled.div `
-  background: var(--card-bg);
-  border: var(--border-width) solid var(--primary);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow-hover);
-  min-width: 200px;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  padding: 0.25rem;
-`;
-const DropdownItem = styled.button `
-  text-align: left;
-  padding: 0.75rem 1rem;
-  background: transparent;
-  border: none;
-  color: var(--foreground);
-  cursor: pointer;
-  border-radius: calc(var(--radius) - 2px);
-  font-size: var(--text-base);
-  transition: background-color 0.2s;
-
-  &:hover {
-    background-color: color-mix(in srgb, var(--primary), transparent 85%);
-    color: var(--primary);
-  }
-`;
-// Create a styled version of Button to handle the active state locally
-const TriggerButton = styled(Button) `
-  &[aria-expanded="true"] {
-    transform: translate(-2px, -2px);
-    box-shadow: var(--shadow-hover);
-  }
-`;
-export function Dropdown({ triggerLabel, items, variant = 'primary' }) {
+export function Dropdown({ triggerLabel, items, variant = 'primary', className }) {
     const [isOpen, setIsOpen] = useState(false);
-    return (_jsx(Popover, { isOpen: isOpen, onClose: () => setIsOpen(false), placement: "bottom-start", trigger: _jsxs(TriggerButton, { variant: variant, onClick: () => setIsOpen(!isOpen), "aria-expanded": isOpen, children: [triggerLabel, " ", _jsx("span", { style: { marginLeft: '0.5rem', fontSize: '0.8em' }, children: "\u25BC" })] }), content: _jsx(StyledDropdownMenu, { children: items.map((item, index) => (_jsx(DropdownItem, { onClick: () => {
+    return (_jsx(Popover, { isOpen: isOpen, onClose: () => setIsOpen(false), placement: "bottom-start", trigger: _jsxs(Button, { variant: variant, onClick: () => setIsOpen(!isOpen), "aria-expanded": isOpen, className: clsx(styles.trigger, className), children: [triggerLabel, " ", _jsx("span", { style: { marginLeft: '0.5rem', fontSize: '0.8em' }, children: "\u25BC" })] }), content: _jsx("div", { className: styles.menu, children: items.map((item, index) => (_jsx("button", { className: styles.item, onClick: () => {
                     item.onClick();
                     setIsOpen(false);
                 }, children: item.label }, index))) }) }));

package/dist/components/Dropdown/Dropdown.module.css

@@ -0,0 +1,33 @@
+.menu {
+  background: var(--card-bg);
+  border: var(--border-width) solid var(--primary);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-hover);
+  min-width: 200px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.25rem;
+}
+
+.item {
+  text-align: left;
+  padding: 0.75rem 1rem;
+  background: transparent;
+  border: none;
+  color: var(--foreground);
+  cursor: pointer;
+  border-radius: calc(var(--radius) - 2px);
+  font-size: var(--text-base);
+  transition: background-color 0.2s;
+}
+.item:hover {
+  background-color: color-mix(in srgb, var(--primary), transparent 85%);
+  color: var(--primary);
+}
+
+.trigger[aria-expanded=true] {
+  transform: translate(-2px, -2px);
+  box-shadow: var(--shadow-hover);
+}