@torpor/ui 0.3.2 → 0.3.4

package/src/Accordion/Accordion.torp

@@ -1,10 +1,13 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { AccordionContextName, type AccordionContext, type ItemState } from "./AccordionTypes";
 
 interface AccordionProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 	/** Whether a single AccordionItem or multiple AccordionItems can be expanded at the same time */
 	type?: "single" | "multiple",
 	/** The value of the expanded AccordionItem, or an array of values if the type is "multiple" */
@@ -218,7 +221,8 @@ export default function Accordion($props: AccordionProps | undefined) {
 	@render {
 		<div
 			{$props?.id}
-			class={`torp-accordion ${$props?.class ?? ""}`.trim()}
+			class={["torp-accordion", $props?.class]}
+			{$props?.style}
 		>
 			<slot />
 		</div>

package/src/Accordion/AccordionContent.torp

@@ -1,11 +1,14 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import getId from "../utils/getId";
 import { AccordionItemContextName, type AccordionItemContext } from "./AccordionTypes";
 
 interface AccordionContentProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 	/** Whether this content should act as a region. Set this when the content contains heading elements or a nested Accordion */
 	ariaRegion?: boolean,
 }
@@ -28,7 +31,8 @@ export default function AccordionContent($props: AccordionContentProps | undefin
 	@render {
 		<div
 			id={$props?.id ?? defaultId}
-			class={`torp-accordion-content ${$props?.class ?? ""}`.trim()}
+			class={["torp-accordion-content", $props?.class]}
+			{$props?.style}
 			role={$props?.ariaRegion ? "region" : undefined}
 			aria-labelledby={$state.headerId}
 			data-state={$state.expanded ? "open" : "closed"}

package/src/Accordion/AccordionHeader.torp

@@ -1,10 +1,13 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { AccordionItemContextName, type AccordionItemContext } from "./AccordionTypes";
 
 interface AccordionHeaderProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 	/** The type of HTML header to use */
 	as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6",
 }
@@ -31,7 +34,8 @@ export default function AccordionHeader($props: AccordionHeaderProps | undefined
 		@// TODO: $props.as
 		<h4
 			{$props?.id}
-			class={`torp-accordion-header ${$props?.class ?? ""}`.trim()}
+			class={["torp-accordion-header", $props?.class]}
+			{$props?.style}
 			data-state={$state.expanded ? "open" : "closed"}
 			data-disabled={$state.disabled ? "true" : undefined}
 		>

package/src/Accordion/AccordionItem.torp

@@ -1,10 +1,13 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { AccordionContextName, AccordionItemContextName, type ItemState, type AccordionContext, type AccordionItemContext } from "./AccordionTypes";
 
 interface AccordionItemProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 	/** The index of this item in the Accordion. Set this if you will be inserting, removing or sorting items. If you don't set this, it will be set automatically */
 	index?: number,
 	/** A value for the item. Set this if you need more control over which item(s) are expanded. If you don't set this, the value will be set to the item's initial index */
@@ -87,7 +90,8 @@ export default function AccordionItem($props: AccordionItemProps | undefined) {
 	@render {
 		<div
 			{$props?.id}
-			class={`torp-accordion-item ${$props?.class ?? ""}`.trim()}
+			class={["torp-accordion-item", $props?.class]}
+			{$props?.style}
 			data-state={$state.expanded ? "open" : "closed"}
 			data-disabled={$state.disabled ? "true" : undefined}
 		>

package/src/Accordion/AccordionTrigger.torp

@@ -1,11 +1,14 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import getId from "../utils/getId";
 import { AccordionItemContextName, type AccordionItemContext } from "./AccordionTypes";
 
 interface AccordionTriggerProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 }
 
 /**
@@ -49,7 +52,8 @@ export default function AccordionTrigger($props: AccordionTriggerProps | undefin
 		<button
 			type="button"
 			id={$props?.id ?? defaultId}
-			class={`torp-accordion-trigger ${$props?.class ?? ""}`.trim()}
+			class={["torp-accordion-trigger", $props?.class]}
+			{$props?.style}
 			disabled={$state.disabled || $state.parentDisabled}
 			aria-expanded={$state.expanded.toString()}
 			aria-disabled={$state.disabled ? "true" : undefined}

package/src/Breadcrumb/Breadcrumb.torp

@@ -1,9 +1,12 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 
 interface BreadcrumbProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 	/** An ARIA label for describing the popover to screen readers  */
 	ariaLabel?: string | undefined,
 }
@@ -32,7 +35,8 @@ export default function Breadcrumb($props: BreadcrumbProps | undefined) {
 	@render {
 		<nav
 			{$props?.id}
-			class={`torp-breadcrumb ${$props?.class ?? ""}`.trim()}
+			class={["torp-breadcrumb", $props?.class]}
+			{$props?.style}
 			aria-label={$props?.ariaLabel}
 		>
 			<slot />

package/src/Breadcrumb/BreadcrumbItem.torp

@@ -1,9 +1,12 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 
 interface BreadcrumbItemProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 	/** Whether this is the current page */
 	current?: boolean,
 }
@@ -16,7 +19,8 @@ export default function BreadcrumbItem($props: BreadcrumbItemProps | undefined)
 	@render {
 		<div
 			{$props?.id}
-			class={`torp-breadcrumb ${$props?.class ?? ""}`.trim()}
+			class={["torp-breadcrumb", $props?.class]}
+			{$props?.style}
 			aria-current={$props?.current ? "page" : undefined}
 			data-current={$props?.current ? "current" : undefined}
 		>

package/src/Breadcrumb/BreadcrumbSeparator.torp

@@ -1,9 +1,12 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 
 interface BreadcrumbSeparatorProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 }
 
 /**
@@ -14,7 +17,8 @@ export default function BreadcrumbSeparator($props: BreadcrumbSeparatorProps | u
 	@render {
 		<div
 			{$props?.id}
-			class={`torp-breadcrumb-separator ${$props?.class ?? ""}`.trim()}
+			class={["torp-breadcrumb-separator", $props?.class]}
+			{$props?.style}
 			aria-hidden="true"
 		>
 			<slot />

package/src/Calendar/Calendar.torp

@@ -1,3 +1,4 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { ReactiveDate } from "@torpor/view";
 import { areDatesEqual, dayNames, monthNames } from "../utils/dateUtils";
 import CalendarDay from "./CalendarDay.torp";
@@ -10,8 +11,10 @@ import ChevronRight from "../icons/ChevronRight.torp";
 interface CalendarProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 }
 
 export default function Calendar($props: CalendarProps) {
@@ -219,7 +222,8 @@ export default function Calendar($props: CalendarProps) {
 	@render {
 		<div
 			{$props?.id}
-			class={`torp-calendar ${$props?.class ?? ""}`.trim()}
+			class={["torp-calendar", $props?.class]}
+			{$props?.style}
 			&ref={container}
 		>
 			<div class={`torp-calendar-header ${$props?.class ?? ""}`.trim()}>
@@ -238,7 +242,8 @@ export default function Calendar($props: CalendarProps) {
 				</button>
 			</div>
 			<div
-				class={`torp-calendar-grid ${$props?.class ?? ""}`.trim()}
+				class={["torp-calendar-grid", $props?.class]}
+				{$props?.style}
 				tabindex={$props.selectable ? 0 : -1}
 				onfocus={handleFocus}
 				onkeydown={handleKey}

package/src/Calendar/CalendarDay.torp

@@ -1,11 +1,14 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { areDatesEqual } from "../utils/dateUtils";
 import { type CalendarContext, type CalendarEvent, CalendarContextName } from "./CalendarTypes";
 
 interface CalendarDayProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 }
 
 export default function CalendarDay($props: CalendarDayProps) {

package/src/Contextual/Contextual.torp

@@ -1,10 +1,13 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { ContextualContextName, type Point, type ContextualContext, type ContextualState } from "./ContextualTypes";
 
 interface ContextualProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 	/** Whether the contextual is modal. If true, an overlay should be supplied to obscure outside content, and only the context content will be visible to screen readers  */
 	modal?: boolean,
 	/** Whether the contextual is visible  */
@@ -117,7 +120,8 @@ export default function Contextual($props: ContextualProps | undefined) {
 	@render {
 		<div
 			{$props?.id}
-			class={`torp-context ${$props?.class ?? ""}`.trim()}
+			class={["torp-context", $props?.class]}
+			{$props?.style}
 		>
 			<slot />
 		</div>

package/src/Contextual/ContextualContent.torp

@@ -1,4 +1,4 @@
-
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { addDocumentEvent, removeDocumentEvent } from "../utils/documentEvents";
 import getScrollParent from "../utils/getScrollParent";
 import setContextPosition from "../utils/setContextPosition";
@@ -7,8 +7,10 @@ import { ContextualContextName, type ContextualContext } from "./ContextualTypes
 interface ContextualContentProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 }
 
 /**
@@ -98,7 +100,8 @@ export default function ContextualContent($props: ContextualContentProps | undef
 		@if ($state.visible) {
 			<div
 				{$props?.id}
-				class={`torp-popover-content-contextual ${$props?.class ?? ""}`.trim()}
+				class={["torp-popover-content-contextual", $props?.class]}
+				{$props?.style}
 				&ref={div}
 				onmount={show}
 			>

package/src/Contextual/ContextualTrigger.torp

@@ -1,11 +1,14 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { ContextualContextName, type ContextualContext } from "./ContextualTypes";
 import hoverTrigger from "../mount/hoverTrigger";
 
 interface ContextualTriggerProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 	/** Whether the popover is activated by click/press or by hover **/
 	activation?: "press" | "hover"
 }
@@ -55,7 +58,8 @@ export default function ContextualTrigger($props: ContextualTriggerProps | undef
 	@render {
 		<div
 			{$props?.id}
-			class={`torp-popover-trigger-contextual ${$props?.class ?? ""}`.trim()}
+			class={["torp-popover-trigger-contextual", $props?.class]}
+			{$props?.style}
 			oncontextmenu={handleContextualMenu}
 			onmount={(el) => hoverTrigger(el, { onHover: handleHover, onExit: handleHover })}
 			&ref={context.anchorElement}

package/src/Dialog/Dialog.torp

@@ -1,3 +1,4 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import getId from "../utils/getId";
 import { trapFocus, type TrapFocusOptions } from "../mount/trapFocus";
 import { ModalContextName, type ModalContext } from "../Modal/ModalTypes";
@@ -7,8 +8,10 @@ import { DialogContextName, type DialogContext, type DialogState, type HandleBut
 interface DialogProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 	/** An ARIA label for describing the popover to screen readers  */
 	ariaLabel?: string,
 	/** Whether the dialog should alert the user via the screen reader */
@@ -115,7 +118,8 @@ export default function Dialog($props: DialogProps | undefined) {
 	@render {
 		<div
 			id={$props?.id ?? defaultId}
-			class={`torp-dialog ${$props?.class ?? ""}`.trim()}
+			class={["torp-dialog", $props?.class]}
+			{$props?.style}
 			tabindex="0"
 			role={$props?.alert === true ? "alertdialog" : "dialog"}
 			aria-modal={modal}

package/src/Dialog/DialogBody.torp

@@ -1,11 +1,14 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import getId from "../utils/getId";
 import { DialogContextName, type DialogContext } from "./DialogTypes";
 
 interface DialogBodyProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 	/** Whether the body content will be announced by screen readers when the Dialog is opened */
 	ariaAnnounce?: boolean,
 }
@@ -32,7 +35,8 @@ export default function DialogBody($props: DialogBodyProps | undefined) {
 	@render {
 		<div
 			id={$props?.id ?? defaultId} 
-			class={`torp-dialog-body ${$props?.class ?? ""}`.trim()}
+			class={["torp-dialog-body", $props?.class]} 
+			{$props?.style}
 		>
 			<slot />
 		</div>

package/src/Dialog/DialogButton.torp

@@ -1,10 +1,13 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { DialogContextName, type DialogContext } from "./DialogTypes";
 
 interface DialogButtonProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 	/** The value that should be returned when this button is pressed and the Dialog was invoked by calling showContextual, showPrompt or showPopover */
 	value?: any,
 	/** "confirm" if the button should respond to the Enter key or "cancel" if the button should respond to the Escape key */
@@ -51,7 +54,8 @@ export default function DialogButton($props: DialogButtonProps | undefined) {
 		<button
 			type="button"
 			{$props?.id}
-			class={`torp-dialog-button ${$props?.class ?? ""}`.trim()}
+			class={["torp-dialog-button", $props?.class]}
+			{$props?.style}
 			disabled={$props?.disabled}
 			onclick={handleClick}
 			&ref={button}

package/src/Dialog/DialogFooter.torp

@@ -1,9 +1,12 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 
 interface DialogFooterProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 }
 
 /**
@@ -13,7 +16,8 @@ export default function DialogFooter($props: DialogFooterProps | undefined) {
 	@render {
 		<div
 			{$props?.id}
-			class={`torp-dialog-footer ${$props?.class ?? ""}`.trim()}
+			class={["torp-dialog-footer", $props?.class]}
+			{$props?.style}
 		>
 			<slot />
 		</div>

package/src/Dialog/DialogHeader.torp

@@ -1,11 +1,14 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import getId from "../utils/getId";
 import { DialogContextName, type DialogContext } from "./DialogTypes";
 
 interface DialogHeaderProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 	/** Whether the header will be announced by screen readers when the Dialog is opened */
 	ariaAnnounce?: boolean,
 }
@@ -33,7 +36,8 @@ export default function DialogHeader($props: DialogHeaderProps | undefined) {
 	@render {
 		<div
 			id={$props?.id ?? defaultId}
-			class={`torp-dialog-footer ${$props?.class ?? ""}`.trim()}
+			class={["torp-dialog-footer", $props?.class]}
+			{$props?.style}
 		>
 			<slot />
 		</div>

package/src/Disclosure/Disclosure.torp

@@ -1,10 +1,13 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { DisclosureContextName, type DisclosureContext, type DisclosureState } from "./DisclosureTypes";
 
 interface DisclosureProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 	/** Whether the disclosure is expanded and its content visible */
 	expanded?: boolean,
 	/** If set to true, the user cannot interact with this disclosure */
@@ -68,7 +71,8 @@ export default function Disclosure($props: DisclosureProps | undefined) {
 	@render {
 		<div
 			{$props?.id}
-			class={`torp-disclosure-item ${$props?.class ?? ""}`.trim()}
+			class={["torp-disclosure-item", $props?.class]}
+			{$props?.style}
 			data-state={$state.expanded ? "open" : "closed"}
 			data-disabled={$state.disabled ? "true" : undefined}
 		>

package/src/Disclosure/DisclosureContent.torp

@@ -1,11 +1,14 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import getId from "../utils/getId";
 import { DisclosureContextName, type DisclosureContext } from "./DisclosureTypes";
 
 interface DisclosureContentProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 	/** Whether this content should act as a region. Set this when the content contains heading elements or a nested Disclosure */
 	ariaRegion?: boolean,
 }
@@ -28,7 +31,8 @@ export default function DisclosureContent($props: DisclosureContentProps | undef
 	@render {
 		<div
 			id={$props?.id ?? defaultId}
-			class={`torp-disclosure-content ${$props?.class ?? ""}`.trim()}
+			class={["torp-disclosure-content", $props?.class]}
+			{$props?.style}
 			role={$props?.ariaRegion ? "region" : undefined}
 			aria-labelledby={$state.headerId}
 			data-state={$state.expanded ? "open" : "closed"}

package/src/Disclosure/DisclosureHeader.torp

@@ -1,10 +1,13 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { DisclosureContextName, type DisclosureContext } from "./DisclosureTypes";
 
 interface DisclosureHeaderProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 	/** The type of HTML header to use */
 	as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6",
 }
@@ -31,7 +34,8 @@ export default function DisclosureHeader($props: DisclosureHeaderProps | undefin
 		@// TODO: $props.as
 		<h4
 			{$props?.id}
-			class={`torp-disclosure-header ${$props?.class ?? ""}`.trim()}
+			class={["torp-disclosure-header", $props?.class]}
+			{$props?.style}
 			data-state={$state.expanded ? "open" : "closed"}
 			data-disabled={$state.disabled ? "true" : undefined}
 		>

package/src/Disclosure/DisclosureTrigger.torp

@@ -1,11 +1,14 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import getId from "../utils/getId";
 import { DisclosureContextName, type DisclosureContext } from "./DisclosureTypes";
 
 interface DisclosureTriggerProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 }
 
 /**
@@ -28,7 +31,8 @@ export default function DisclosureTrigger($props: DisclosureTriggerProps | undef
 		<button
 			type="button"
 			id={$props?.id ?? defaultId}
-			class={`torp-disclosure-trigger ${$props?.class ?? ""}`.trim()}
+			class={["torp-disclosure-trigger", $props?.class]}
+			{$props?.style}
 			disabled={$state.disabled}
 			aria-expanded={$state.expanded.toString()}
 			aria-disabled={$state.disabled}

package/src/Drawer/Drawer.torp

@@ -1,10 +1,13 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { DrawerContextName, type DrawerContext, type DrawerState } from "./DrawerTypes";
 
 interface DrawerProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 	/** Whether the drawer is modal. If true, an overlay should be supplied to obscure outside content, and only the drawer content will be visible to screen readers  */
 	modal?: boolean,
 	/** Whether the drawer is visible  */
@@ -115,7 +118,8 @@ export default function Drawer($props: DrawerProps | undefined) {
 	@render {
 		<div
 			{$props?.id}
-			class={`torp-drawer ${$props?.class ?? ""}`.trim()}
+			class={["torp-drawer", $props?.class]}
+			{$props?.style}
 		>
 			<slot />
 		</div>

package/src/Drawer/DrawerContent.torp

@@ -1,4 +1,4 @@
-import { type Animation } from "@torpor/view";
+import type { ClassValue, StyleValue } from "@torpor/view";
 import { slide } from "../motion";
 import { addDocumentEvent, removeDocumentEvent } from "../utils/documentEvents";
 import { DrawerContextName, type DrawerContext } from "./DrawerTypes";
@@ -6,8 +6,10 @@ import { DrawerContextName, type DrawerContext } from "./DrawerTypes";
 interface DrawerContentProps {
 	/** An ID for the root element */
 	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
 }
 
 /**
@@ -67,7 +69,8 @@ export default function DrawerContent($props: DrawerContentProps | undefined) {
 		@if ($state.visible) {
 			<div
 				{$props?.id}
-				class={`torp-drawer-content ${$props?.class ?? ""}`.trim()}
+				class={["torp-drawer-content", $props?.class]}
+				{$props?.style}
 				style="position: fixed;"
 				transition={(e) => slide(e, { side: $state.position })}
 				&ref={drawer}