doom-design-system 0.2.1 → 0.3.0

package/dist/components/ActionRow/ActionRow.module.css

@@ -21,4 +21,5 @@
   justify-content: center;
   border-radius: var(--radius);
   flex-shrink: 0;
+  border: var(--border-width) solid var(--card-border);
 }

package/dist/components/Alert/Alert.module.css

@@ -46,7 +46,7 @@
   font-family: var(--font-heading);
   font-weight: 700;
   font-size: var(--text-base);
-  color: var(--foreground);
+  color: var(--on-surface);
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
@@ -54,7 +54,7 @@
 .description {
   margin: 0;
   font-size: var(--text-sm);
-  color: var(--muted-foreground);
+  color: var(--on-surface-muted);
   line-height: 1.5;
 }
 

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

@@ -21,7 +21,7 @@
   transform: translate(-2px, -2px);
   box-shadow: var(--shadow-hover);
 }
-.button:focus {
+.button:focus-visible {
   outline: none;
   box-shadow: 7px 7px 0px 0px var(--btn-focus-shadow);
   transform: translate(-2px, -2px);
@@ -45,6 +45,7 @@
   --btn-focus-shadow: #000000;
   background-color: var(--primary);
   color: var(--primary-foreground);
+  border-color: var(--border-strong);
 }
 .primary:hover {
   filter: brightness(1.1);
@@ -55,6 +56,7 @@
   --btn-focus-shadow: #000000;
   background-color: var(--secondary);
   color: var(--secondary-foreground);
+  border-color: var(--border-strong);
 }
 .secondary:hover {
   filter: brightness(1.1);
@@ -65,6 +67,7 @@
   --btn-focus-shadow: #000000;
   background-color: var(--success);
   color: var(--success-foreground);
+  border-color: var(--border-strong);
 }
 .success:hover {
   filter: brightness(1.1);
@@ -79,7 +82,7 @@
   border-color: transparent;
   box-shadow: none;
 }
-.ghost:hover, .ghost:focus {
+.ghost:hover, .ghost:focus-visible {
   background-color: color-mix(in srgb, var(--primary), transparent 90%);
   color: var(--primary);
   transform: none;

package/dist/components/Checkbox/Checkbox.module.css

@@ -20,7 +20,7 @@
 .checkboxInput:focus-visible + .checkboxDisplay:focus, .checkboxInput:focus-visible + .checkboxDisplay:focus-visible, .checkboxInput:focus-visible + .checkboxDisplay[aria-expanded=true] {
   outline: none;
   transform: translate(-2px, -2px);
-  box-shadow: 7px 7px 0px 0px var(--shadow-primary);
+  box-shadow: 8px 8px 0px 0px var(--shadow-primary);
   border-color: var(--primary);
 }
 .checkboxInput:focus-visible + .checkboxDisplay {

package/dist/components/Drawer/Drawer.d.ts

@@ -7,6 +7,7 @@ interface DrawerProps {
     children: React.ReactNode;
     footer?: React.ReactNode;
     className?: string;
+    variant?: "default" | "solid";
 }
-export declare function Drawer({ isOpen, onClose, title, side, children, footer, className, }: DrawerProps): React.ReactPortal | null;
+export declare function Drawer({ isOpen, onClose, title, side, children, footer, className, variant, }: DrawerProps): React.ReactPortal | null;
 export {};

package/dist/components/Drawer/Drawer.js

@@ -6,7 +6,7 @@ import { X } from "lucide-react";
 import { Button } from "../Button/Button.js";
 import styles from "./Drawer.module.css";
 import React, { useEffect, useState } from "react";
-export function Drawer({ isOpen, onClose, title, side = "right", children, footer, className, }) {
+export function Drawer({ isOpen, onClose, title, side = "right", children, footer, className, variant = "default", }) {
     const reactId = React.useId();
     const titleId = `drawer-title-${reactId}`;
     const [mounted, setMounted] = useState(false);
@@ -33,5 +33,5 @@ export function Drawer({ isOpen, onClose, title, side = "right", children, foote
     }, [isOpen, onClose]);
     if (!mounted)
         return null;
-    return createPortal(_jsxs(_Fragment, { children: [_jsx("div", { className: clsx(styles.overlay, isOpen && styles.isOpen), onClick: onClose, "aria-hidden": "true" }), _jsxs("div", { className: clsx(styles.panel, styles[side], isOpen && styles.isOpen, className), role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined, "aria-label": !title ? "Drawer" : undefined, children: [_jsxs("div", { className: styles.header, children: [title && (_jsx("h2", { id: titleId, 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);
+    return createPortal(_jsxs(_Fragment, { children: [_jsx("div", { className: clsx(styles.overlay, isOpen && styles.isOpen), onClick: onClose, "aria-hidden": "true" }), _jsxs("div", { className: clsx(styles.panel, styles[side], styles[variant], isOpen && styles.isOpen, className), role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined, "aria-label": !title ? "Drawer" : undefined, children: [_jsxs("div", { className: styles.header, children: [title && (_jsx("h2", { id: titleId, 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

@@ -7,7 +7,7 @@
   visibility: hidden;
   transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
   pointer-events: none;
-  z-index: var(--z-dropdown);
+  z-index: var(--z-overlay);
 }
 .overlay.isOpen {
   opacity: 1;
@@ -18,26 +18,35 @@
 .panel {
   position: fixed;
   background-color: var(--card-bg);
-  z-index: var(--z-modal);
+  z-index: var(--z-drawer);
   display: flex;
   flex-direction: column;
-  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  transition: transform var(--duration-normal) var(--ease-in-out), visibility var(--duration-normal) var(--ease-in-out);
   top: 0;
   bottom: 0;
   width: 100%;
   max-width: 400px;
   visibility: hidden;
+  border: var(--border-width) solid var(--card-border);
 }
 .panel.left {
   left: 0;
-  box-shadow: 8px 0px 0px 0px var(--card-border);
+  /* Remove border on the edge touching the screen */
+  border-left: 0;
+  /* Standard directional shadow for left-anchored panel */
+  /* Bottom-Right shadow for left-anchored elements */
+  box-shadow: 8px 8px 0 0 var(--border-strong);
   border-top-right-radius: var(--radius);
   border-bottom-right-radius: var(--radius);
   transform: translateX(calc(-100% - 20px));
 }
 .panel.right {
   right: 0;
-  box-shadow: -8px 0px 0px 0px var(--card-border);
+  /* Remove border on the edge touching the screen */
+  border-right: 0;
+  /* Standard directional shadow for right-anchored panel */
+  /* Bottom-Left shadow for right-anchored elements */
+  box-shadow: -8px 8px 0 0 var(--border-strong);
   border-top-left-radius: var(--radius);
   border-bottom-left-radius: var(--radius);
   transform: translateX(calc(100% + 20px));
@@ -46,32 +55,89 @@
   visibility: visible;
   transform: translateX(0);
 }
+.panel.solid {
+  /* 
+    SCALABLE CONTEXTUAL REMAPPING
+    Save original values then swap semantic tokens to auto-invert content.
+  */
+  --solid-bg: var(--primary);
+  --solid-fg: var(--primary-foreground);
+  background-color: var(--solid-bg);
+  color: var(--solid-fg);
+  /* Swap Semantics & Remap Content on CHILDREN only */
+}
+.panel.solid > * {
+  --primary: var(--solid-fg);
+  --primary-foreground: var(--solid-bg);
+  --foreground: var(--solid-fg);
+  --muted-foreground: var(--solid-fg);
+}
+.panel.solid .header {
+  background-color: transparent !important;
+  color: var(--solid-fg);
+}
+.panel.solid .header button {
+  background-color: var(--error) !important;
+  color: var(--error-foreground) !important;
+  border-color: var(--border-strong) !important;
+}
+.panel.solid .content {
+  background-color: transparent !important;
+}
+.panel.solid .footer {
+  background-color: transparent !important;
+}
 
 .header {
   padding: var(--spacing-lg);
-  border-bottom: var(--border-width) solid var(--card-border);
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+  border-bottom: var(--border-width) solid var(--border-strong);
   display: flex;
   justify-content: space-between;
   align-items: center;
+  flex-shrink: 0;
+  /* Match Modal's Close Button Styling */
+}
+.header button {
+  background-color: var(--error) !important;
+  color: var(--error-foreground) !important;
+  border: var(--border-width) solid var(--border-strong) !important;
+  box-shadow: var(--shadow-sm) !important;
+}
+.header button:hover {
+  background-color: var(--error) !important;
+  filter: brightness(1.1);
+  transform: translate(-2px, -2px);
+  box-shadow: var(--shadow-sm-hover) !important;
+}
+.header button:active {
+  transform: translate(2px, 2px);
+  box-shadow: var(--shadow-sm-checked) !important;
 }
 
 .title {
   margin: 0;
   font-family: var(--font-heading);
   font-size: var(--text-xl);
-  font-weight: 700;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
 
 .content {
   flex: 1;
   padding: var(--spacing-lg);
   overflow-y: auto;
+  background-color: var(--card-bg);
 }
 
 .footer {
   padding: var(--spacing-lg);
-  border-top: var(--border-width) solid var(--card-border);
+  border-top: var(--border-width) solid var(--border-strong);
   display: flex;
   justify-content: flex-end;
   gap: var(--spacing-md);
+  background-color: var(--card-bg);
+  flex-shrink: 0;
 }

package/dist/components/Input/Input.module.css

@@ -27,7 +27,7 @@
 .input:focus, .input:focus-visible, .input[aria-expanded=true] {
   outline: none;
   transform: translate(-2px, -2px);
-  box-shadow: 7px 7px 0px 0px var(--shadow-primary);
+  box-shadow: 8px 8px 0px 0px var(--shadow-primary);
   border-color: var(--primary);
 }
 .input::placeholder {

package/dist/components/Modal/Modal.d.ts

@@ -5,6 +5,7 @@ interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">
     title?: React.ReactNode;
     children: React.ReactNode;
     footer?: React.ReactNode;
+    variant?: "default" | "solid";
 }
 interface ModalHeaderProps {
     children: React.ReactNode;
@@ -20,5 +21,5 @@ export declare function ModalFooter({ children, className, }: {
     children: React.ReactNode;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function Modal({ isOpen, onClose, title, children, footer, className, style, ...props }: ModalProps): React.ReactPortal | null;
+export declare function Modal({ isOpen, onClose, title, children, footer, className, style, variant, ...props }: ModalProps): React.ReactPortal | null;
 export {};

package/dist/components/Modal/Modal.js

@@ -21,6 +21,7 @@ import { Stack, Flex } from "../Layout/Layout.js";
 import styles from "./Modal.module.css";
 const ModalContext = React.createContext({
     onClose: () => { },
+    variant: "default",
 });
 export function ModalHeader({ children, className, id }) {
     const { onClose, titleId } = React.useContext(ModalContext);
@@ -33,7 +34,7 @@ export function ModalFooter({ children, className, }) {
     return (_jsx(Flex, { justify: "flex-end", align: "center", gap: "var(--spacing-md)", className: clsx(styles.footer, className), children: children }));
 }
 export function Modal(_a) {
-    var { isOpen, onClose, title, children, footer, className, style } = _a, props = __rest(_a, ["isOpen", "onClose", "title", "children", "footer", "className", "style"]);
+    var { isOpen, onClose, title, children, footer, className, style, variant = "default" } = _a, props = __rest(_a, ["isOpen", "onClose", "title", "children", "footer", "className", "style", "variant"]);
     const overlayRef = useRef(null);
     const reactId = useId();
     const titleId = `modal-title-${reactId}`;
@@ -65,5 +66,6 @@ export function Modal(_a) {
             onClose();
         }
     };
-    return createPortal(_jsx(ModalContext.Provider, { value: { onClose, titleId }, children: _jsx("div", { className: clsx(styles.overlay, isOpen && styles.isOpen, className), ref: overlayRef, onClick: handleOverlayClick, style: style, children: _jsx("div", { className: styles.contentContainer, children: _jsx("div", Object.assign({ role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined }, props, { children: _jsx(Card, { className: styles.modalCard, style: { padding: 0, overflow: "hidden" }, children: title ? (_jsxs(_Fragment, { children: [_jsx(ModalHeader, { children: title }), _jsxs(Stack, { gap: 0, className: styles.modalContent, children: [_jsx(ModalBody, { children: children }), footer && _jsx(ModalFooter, { children: footer })] })] })) : (children) }) })) }) }) }), document.body);
+    return createPortal(_jsx(ModalContext.Provider, { value: { onClose, titleId, variant }, children: _jsx("div", { className: clsx(styles.overlay, isOpen && styles.isOpen, className), ref: overlayRef, onClick: handleOverlayClick, style: style, children: _jsx("div", { className: styles.contentContainer, children: _jsx("div", Object.assign({ role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : props["aria-labelledby"], "aria-label": props["aria-label"] ||
+                        (!title && !props["aria-labelledby"] ? "Modal Window" : undefined) }, props, { children: _jsx(Card, { className: clsx(styles.modalCard, styles[variant]), style: { padding: 0, overflow: "hidden" }, children: title ? (_jsxs(_Fragment, { children: [_jsx(ModalHeader, { children: title }), _jsxs(Stack, { gap: 0, className: styles.modalContent, children: [_jsx(ModalBody, { children: children }), footer && _jsx(ModalFooter, { children: footer })] })] })) : (children) }) })) }) }) }), document.body);
 }

package/dist/components/Modal/Modal.module.css

@@ -32,12 +32,60 @@
 .modalCard {
   background-color: var(--primary);
 }
+.modalCard.solid {
+  /* 
+    SCALABLE CONTEXTUAL REMAPPING
+    Save original values then swap semantic tokens to auto-invert content.
+  */
+  --solid-bg: var(--primary);
+  --solid-fg: var(--primary-foreground);
+  --original-border: var(--card-border);
+  background-color: var(--solid-bg);
+  color: var(--solid-fg);
+  /* 
+     Swap Semantics & Remap Content on CHILDREN only.
+     This avoids circular dependency on the container's background-color.
+  */
+}
+.modalCard.solid > * {
+  --primary: var(--solid-fg);
+  --primary-foreground: var(--solid-bg);
+  --foreground: var(--solid-fg);
+  --muted-foreground: var(--solid-fg);
+}
+.modalCard.solid .header,
+.modalCard.solid .body,
+.modalCard.solid .footer,
+.modalCard.solid .modalContent {
+  background-color: transparent !important;
+  color: var(--solid-fg);
+}
+.modalCard.solid {
+  /* In solid mode, we need to override the close button to ensure contrast */
+}
+.modalCard.solid .closeButton {
+  background-color: var(--error) !important;
+  color: var(--error-foreground) !important;
+  border-color: var(--border-strong) !important;
+  box-shadow: var(--shadow-hard) !important;
+}
+.modalCard.solid .closeButton:hover {
+  transform: translate(-2px, -2px);
+  box-shadow: var(--shadow-hover) !important;
+}
+.modalCard.solid .closeButton:active {
+  transform: translate(2px, 2px);
+  box-shadow: none !important;
+}
 
 .header {
   padding: var(--spacing-lg);
   background-color: var(--primary);
   color: var(--primary-foreground);
-  border-bottom: none;
+  border-bottom: var(--border-width) solid var(--border-strong);
+  /* Remap foreground variables so children (like Text) use the correct contrast color */
+  --foreground: var(--primary-foreground);
+  --muted-foreground: var(--primary-foreground);
 }
 
 .headerContent {
@@ -48,7 +96,7 @@
 .closeButton {
   flex-shrink: 0;
   background-color: var(--error) !important;
-  color: white !important;
+  color: var(--error-foreground) !important;
   border: var(--border-width) solid var(--card-border) !important;
   border-radius: var(--radius) !important;
   height: 36px !important;
@@ -58,18 +106,19 @@
   align-items: center;
   justify-content: center;
   padding: 0 !important;
-  box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.4) !important;
+  /* Use standardized shadow-error mixed with black for depth */
+  box-shadow: var(--shadow-hard) !important;
   transition: all 0.2s ease;
   cursor: pointer;
 }
 .closeButton:hover {
   filter: brightness(1.1);
-  transform: translate(-1px, -1px);
-  box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 0.4) !important;
+  transform: translate(-2px, -2px);
+  box-shadow: var(--shadow-hover) !important;
 }
 .closeButton:active {
-  transform: translate(1px, 1px);
-  box-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 0.4) !important;
+  transform: translate(2px, 2px);
+  box-shadow: none !important;
 }
 
 .modalContent {

package/dist/components/Select/Select.module.css

@@ -32,7 +32,7 @@
 .trigger:focus, .trigger:focus-visible, .trigger[aria-expanded=true] {
   outline: none;
   transform: translate(-2px, -2px);
-  box-shadow: 7px 7px 0px 0px var(--shadow-primary);
+  box-shadow: 8px 8px 0px 0px var(--shadow-primary);
   border-color: var(--primary);
 }
 

package/dist/components/Sheet/Sheet.d.ts

@@ -4,7 +4,9 @@ interface SheetProps {
     onClose: () => void;
     title?: string;
     children: React.ReactNode;
+    footer?: React.ReactNode;
+    variant?: "default" | "solid";
     className?: string;
 }
-export declare function Sheet({ isOpen, onClose, title, children, className, }: SheetProps): React.ReactPortal | null;
+export declare function Sheet({ isOpen, onClose, title, children, footer, variant, className, }: SheetProps): React.ReactPortal | null;
 export {};

package/dist/components/Sheet/Sheet.js

@@ -7,7 +7,7 @@ import { Button } from "../Button/Button.js";
 import { Flex } from "../Layout/Layout.js";
 import styles from "./Sheet.module.css";
 import { X } from "lucide-react";
-export function Sheet({ isOpen, onClose, title, children, className, }) {
+export function Sheet({ isOpen, onClose, title, children, footer, variant = "default", className, }) {
     const reactId = React.useId();
     const titleId = `sheet-title-${reactId}`;
     const [mounted, setMounted] = useState(false);
@@ -34,5 +34,5 @@ export function Sheet({ isOpen, onClose, title, children, className, }) {
     }, [isOpen, onClose]);
     if (!mounted)
         return null;
-    return createPortal(_jsxs(_Fragment, { children: [_jsx("div", { className: clsx(styles.overlay, isOpen && styles.isOpen), onClick: onClose, "aria-hidden": "true" }), _jsxs("div", { className: clsx(styles.panel, isOpen && styles.isOpen, className), role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined, "aria-label": !title ? "Sheet" : undefined, children: [_jsx("div", { className: styles.handleBar }), _jsxs(Flex, { align: "center", justify: "space-between", className: styles.header, children: [title && (_jsx("h2", { id: titleId, className: styles.title, children: title })), _jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, "aria-label": "Close sheet", children: _jsx(X, { size: 24 }) })] }), _jsx("div", { className: styles.content, children: children })] })] }), document.body);
+    return createPortal(_jsxs(_Fragment, { children: [_jsx("div", { className: clsx(styles.overlay, isOpen && styles.isOpen), onClick: onClose, "aria-hidden": "true" }), _jsxs("div", { className: clsx(styles.panel, styles[variant], isOpen && styles.isOpen, className), role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined, "aria-label": !title ? "Sheet" : undefined, children: [_jsxs("div", { className: styles.header, children: [_jsx("div", { className: styles.handleBar }), _jsxs(Flex, { align: "center", justify: "space-between", className: styles.headerBody, children: [title && (_jsx("h2", { id: titleId, className: styles.title, children: title })), _jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, "aria-label": "Close sheet", 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/Sheet/Sheet.module.css

@@ -4,12 +4,14 @@
   background-color: rgba(0, 0, 0, var(--overlay-opacity));
   backdrop-filter: blur(4px);
   opacity: 0;
-  transition: opacity 0.2s ease-in-out;
+  visibility: hidden;
+  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
   pointer-events: none;
-  z-index: var(--z-dropdown);
+  z-index: var(--z-overlay);
 }
 .overlay.isOpen {
   opacity: 1;
+  visibility: visible;
   pointer-events: auto;
 }
 
@@ -25,39 +27,123 @@
   border-right: var(--border-width) solid var(--card-border);
   border-top-left-radius: var(--radius);
   border-top-right-radius: var(--radius);
-  box-shadow: var(--shadow-lg);
+  /* Brutalist Hard Shadow - Top anchored */
+  /* Top-Right heavy shadow */
+  box-shadow: 8px -8px 0 0 var(--border-strong);
   display: flex;
   flex-direction: column;
-  z-index: var(--z-modal);
+  z-index: var(--z-drawer);
   transform: translateY(100%);
-  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  transition: transform var(--duration-slow) var(--ease-out);
+  visibility: hidden;
 }
 .panel.isOpen {
+  visibility: visible;
   transform: translateY(0);
 }
+.panel.solid {
+  /* 
+    SCALABLE CONTEXTUAL REMAPPING
+    Save original values then swap semantic tokens to auto-invert content.
+  */
+  --solid-bg: var(--primary);
+  --solid-fg: var(--primary-foreground);
+  background-color: var(--solid-bg);
+  color: var(--solid-fg);
+  /* Swap Semantics & Remap Content on CHILDREN only */
+}
+.panel.solid > * {
+  --primary: var(--solid-fg);
+  --primary-foreground: var(--solid-bg);
+  --foreground: var(--solid-fg);
+  --muted-foreground: var(--solid-fg);
+}
+.panel.solid .header {
+  background-color: transparent !important;
+  color: var(--solid-fg);
+}
+.panel.solid .header button {
+  background-color: var(--error) !important;
+  color: var(--error-foreground) !important;
+  border-color: var(--border-strong) !important;
+}
+.panel.solid .handleBar {
+  background-color: var(--solid-fg);
+  opacity: 0.8;
+}
+.panel.solid .content {
+  background-color: transparent !important;
+}
+.panel.solid .footer {
+  background-color: transparent !important;
+}
+
+.header {
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+  border-bottom: var(--border-width) solid var(--border-strong);
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+}
 
 .handleBar {
   width: 48px;
   height: 6px;
   background-color: var(--card-border);
-  border-radius: 99px;
-  margin: 0.75rem auto;
-  opacity: 0.5;
+  border-radius: var(--radius-pill);
+  margin: 0.75rem auto 0.25rem auto;
+  opacity: 1;
+  border: var(--border-width) solid var(--border-strong);
+  flex-shrink: 0;
 }
 
-.header {
-  padding: 0 var(--spacing-lg) var(--spacing-md) var(--spacing-lg);
+.headerBody {
+  padding: 0 var(--spacing-lg) var(--spacing-lg) var(--spacing-lg);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  /* Match Modal/Drawer's Close Button Styling */
+}
+.headerBody button {
+  background-color: var(--error) !important;
+  color: var(--error-foreground) !important;
+  border: var(--border-width) solid var(--border-strong) !important;
+  box-shadow: var(--shadow-sm) !important;
+}
+.headerBody button:hover {
+  background-color: var(--error) !important;
+  filter: brightness(1.1);
+  transform: translate(-2px, -2px);
+  box-shadow: var(--shadow-sm-hover) !important;
+}
+.headerBody button:active {
+  transform: translate(2px, 2px);
+  box-shadow: var(--shadow-sm-checked) !important;
 }
 
 .title {
   margin: 0;
   font-family: var(--font-heading);
   font-size: var(--text-xl);
-  font-weight: 700;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
 
 .content {
   flex: 1;
-  padding: 0 var(--spacing-lg) var(--spacing-lg) var(--spacing-lg);
+  padding: var(--spacing-lg);
   overflow-y: auto;
+  background-color: var(--card-bg);
+}
+
+.footer {
+  padding: var(--spacing-lg);
+  border-top: var(--border-width) solid var(--border-strong);
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--spacing-md);
+  background-color: var(--card-bg);
+  flex-shrink: 0;
 }

package/dist/components/Slider/Slider.d.ts

@@ -1,10 +1,10 @@
 import React from "react";
-interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "defaultValue"> {
     label?: string;
     showValue?: boolean;
-    value?: number;
-    defaultValue?: number;
-    onChange?: (value: number) => void;
+    value?: number | [number, number];
+    defaultValue?: number | [number, number];
+    onChange?: (value: number | [number, number]) => void;
 }
 export declare function Slider({ label, showValue, value, defaultValue, onChange, min, max, step, className, id, ...props }: SliderProps): import("react/jsx-runtime").JSX.Element;
 export {};