@riducms/admin 0.2.2 → 0.3.0

package/src/components/ui/date-value-control/date-value-control.svelte

@@ -2,12 +2,14 @@
 	import type { DateValue, Time } from "@internationalized/date";
 	import type { SchemaDateFormat } from "@riducms/protocol";
 	import { DateField, TimeField } from "bits-ui";
+	import "@admin/components/ui/date-value-control/date-value-control.scss";
+	import XIcon from "~icons/lucide/x";
 	import CalendarIcon from "~icons/lucide/calendar";
 
-	import { buttonVariants } from "@admin/components/ui/button";
+	import { fieldControlARIA } from "@riducms/ui";
 	import DateValueCalendar from "@admin/components/ui/date-value-control/date-value-calendar.svelte";
 	import { Popover, PopoverContent, PopoverTrigger } from "@admin/components/ui/popover";
-	import { cn, fieldControlARIA } from "@riducms/ui";
+
 	import { getAdminI18n } from "@riducms/plugin";
 	import {
 		datePickerFormValue,
@@ -22,6 +24,7 @@
 		name,
 		appearance = "date",
 		value = "",
+		timeZone,
 		disabled = false,
 		readonly = false,
 		required = false,
@@ -36,6 +39,7 @@
 		name?: string;
 		appearance?: SchemaDateFormat;
 		value?: string;
+		timeZone?: string;
 		disabled?: boolean;
 		readonly?: boolean;
 		required?: boolean;
@@ -48,27 +52,23 @@
 	} = $props();
 	const i18n = getAdminI18n();
 
-	const controlClass = $derived(
-		cn(
-			"flex w-full items-center rounded-lg border border-control-border bg-control text-foreground-strong transition-[background-color,border-color,color] duration-150 hover:border-control-border-hover focus-within:border-primary/65 aria-invalid:!border-destructive/65 data-[disabled]:cursor-not-allowed data-[disabled]:border-control-border-disabled data-[disabled]:bg-control-disabled data-[disabled]:opacity-45 data-[readonly]:border-control-border-disabled data-[readonly]:bg-control-disabled",
-			size === "field" && "h-10.5 px-3.25 text-[14.5px]",
-			size === "compact" && "h-9 px-3 text-[13px]",
-			size === "toolbar" && "h-[34px] px-2.5 text-[12.5px]",
-			className
-		)
-	);
-	const selectedDate = $derived(datePickerValue(value, appearance, i18n.timeZone));
+	const resolvedTimeZone = $derived(timeZone ?? i18n.timeZone);
+	const selectedDate = $derived(datePickerValue(value, appearance, resolvedTimeZone));
 	const controlARIA = $derived(fieldControlARIA(id, hasDescription, invalid));
 	let open = $state(false);
+	let anchor = $state<HTMLDivElement>();
+	// Only the autofocus handler reads this DOM binding.
+	// svelte-ignore non_reactive_update
+	let popup: HTMLElement | null = null;
 
 	function updateDate(next: DateValue | undefined) {
 		if (disabled || readonly) return;
-		onValueChange(datePickerFormValue(next, appearance, i18n.timeZone));
+		onValueChange(datePickerFormValue(next, appearance, resolvedTimeZone));
 	}
 
 	function selectCalendarDate(next: DateValue | undefined) {
 		updateDate(next);
-		open = false;
+		if (appearance !== "date-time") open = false;
 	}
 
 	function updateTime(next: Time | undefined) {
@@ -90,7 +90,7 @@
 		<TimeField.Input
 			{id}
 			{name}
-			class={cn(controlClass, "gap-0.5 select-none")}
+			class={["ridu-date-control ridu-date-control--time", `ridu-date-control--${size}`, className]}
 			data-disabled={disabled ? "" : undefined}
 			data-readonly={readonly ? "" : undefined}
 			{...controlARIA}
@@ -98,12 +98,7 @@
 		>
 			{#snippet children({ segments })}
 				{#each segments as { part, value: segmentValue }, index (`${part}:${index}`)}
-					<TimeField.Segment
-						{part}
-						class={part === "literal"
-							? "px-0.5 text-foreground-soft"
-							: "rounded px-0.5 outline-none hover:bg-control-hover focus:bg-primary/15 aria-[valuetext=Empty]:text-foreground-placeholder"}
-					>
+					<TimeField.Segment {part} class="ridu-date-control__segment">
 						{segmentValue}
 					</TimeField.Segment>
 				{/each}
@@ -111,18 +106,19 @@
 		</TimeField.Input>
 	</TimeField.Root>
 {:else}
+	<!-- Keep the timezone projection authoritative after the author edits individual segments. -->
 	<DateField.Root
-		value={selectedDate}
+		bind:value={() => selectedDate, updateDate}
 		locale={i18n.language}
 		granularity={appearance === "date-time" ? "minute" : "day"}
 		{disabled}
 		{readonly}
 		{required}
 		errorMessageId={controlARIA["aria-errormessage"]}
-		onValueChange={updateDate}
 	>
 		<div
-			class={controlClass}
+			bind:this={anchor}
+			class={["ridu-date-control", `ridu-date-control--${size}`, className]}
 			data-disabled={disabled ? "" : undefined}
 			data-readonly={readonly ? "" : undefined}
 			aria-invalid={controlARIA["aria-invalid"]}
@@ -130,7 +126,7 @@
 			<DateField.Input
 				{id}
 				{name}
-				class="flex min-w-0 flex-1 items-center gap-0.5 select-none"
+				class="ridu-date-control__input"
 				aria-label={label}
 				{...controlARIA}
 			>
@@ -138,36 +134,58 @@
 					{#each segments as { part, value: segmentValue }, index (`${part}:${index}`)}
 						<DateField.Segment
 							{part}
-							class={part === "literal"
-								? "px-0.5 text-foreground-soft"
-								: "rounded px-0.5 outline-none hover:bg-control-hover focus:bg-primary/15 aria-[valuetext=Empty]:text-foreground-placeholder"}
+							class="ridu-date-control__segment"
+							onpointerdown={() => {
+								// Release the popup's focus trap before the pointer focuses this segment.
+								open = false;
+							}}
 						>
 							{segmentValue}
 						</DateField.Segment>
 					{/each}
+					{#if value && !disabled && !readonly}
+						<button
+							type="button"
+							class="ridu-date-control__button"
+							aria-label={i18n.t("general:clearSelection")}
+							onclick={() => onValueChange("")}
+						>
+							<XIcon />
+						</button>
+					{/if}
 					<Popover bind:open>
 						<PopoverTrigger
 							type="button"
-							class={buttonVariants({
-								variant: "ghost",
-								size: "icon-sm",
-								class: "ms-auto size-7 text-foreground-soft",
-							})}
+							class="ridu-date-control__button"
 							disabled={disabled || readonly}
 							aria-label={i18n.t("fields:openCalendar")}
 						>
-							<CalendarIcon class="size-3.5" aria-hidden="true" />
+							<CalendarIcon />
 						</PopoverTrigger>
-						<PopoverContent align="end" sideOffset={6} class="w-auto gap-0 overflow-hidden p-0">
-							<DateValueCalendar
-								value={selectedDate}
-								{disabled}
-								{readonly}
-								{required}
-								locale={i18n.language}
-								calendarLabel={i18n.t("fields:selectDate")}
-								onValueChange={selectCalendarDate}
-							/>
+						<PopoverContent
+							bind:ref={popup}
+							onOpenAutoFocus={(event) => {
+								event.preventDefault();
+								popup?.querySelector<HTMLElement>('[data-calendar-day][tabindex="0"]')?.focus();
+							}}
+							customAnchor={anchor}
+							align="start"
+							sideOffset={6}
+							class="ridu-date-popup"
+						>
+							{#key resolvedTimeZone}
+								<DateValueCalendar
+									timeZone={resolvedTimeZone}
+									value={selectedDate}
+									withTime={appearance === "date-time"}
+									{disabled}
+									{readonly}
+									{required}
+									locale={i18n.language}
+									calendarLabel={i18n.t("fields:selectDate")}
+									onValueChange={selectCalendarDate}
+								/>
+							{/key}
 						</PopoverContent>
 					</Popover>
 				{/snippet}

package/src/components/ui/drawer/drawer-depth.ts

@@ -0,0 +1,8 @@
+import { createContext } from "svelte";
+
+const [getDepth, setDepth, hasDepth] = createContext<number>();
+
+/** Nested authoring keeps a visible edge of each parent drawer. */
+export function provideDrawerDepth() {
+	return setDepth((hasDepth() ? getDepth() : 0) + 1);
+}

package/src/components/ui/dropdown-menu/dropdown-menu-content.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import { cn } from "@riducms/ui";
+	import "@admin/components/ui/dropdown-menu/dropdown-menu.scss";
 
 	let {
 		ref = $bindable(null),
@@ -18,10 +18,7 @@
 		{sideOffset}
 		{align}
 		loop
-		class={cn(
-			"ridu-popover-enter z-50 min-w-44 origin-(--bits-menu-content-transform-origin) rounded-[4px] border border-control-border bg-popover p-1 text-[12.5px] text-popover-foreground shadow-[var(--shadow-popover)] outline-none",
-			className
-		)}
+		class={["ridu-dropdown-menu", className]}
 		{...restProps}
 	/>
 </DropdownMenuPrimitive.Portal>

package/src/components/ui/dropdown-menu/dropdown-menu-item.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import { cn } from "@riducms/ui";
+	import "@admin/components/ui/dropdown-menu/dropdown-menu.scss";
 
 	let {
 		ref = $bindable(null),
@@ -12,9 +12,6 @@
 <DropdownMenuPrimitive.Item
 	bind:ref
 	data-slot="dropdown-menu-item"
-	class={cn(
-		"data-[highlighted]:bg-control-hover data-[highlighted]:text-foreground flex min-h-8 cursor-default select-none items-center rounded-[3px] px-2.5 py-1.5 text-foreground-muted outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-40",
-		className
-	)}
+	class={["ridu-dropdown-menu__item", className]}
 	{...restProps}
 />

package/src/components/ui/dropdown-menu/dropdown-menu-separator.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import { cn } from "@riducms/ui";
+	import "@admin/components/ui/dropdown-menu/dropdown-menu.scss";
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <DropdownMenuPrimitive.Separator
 	bind:ref
 	data-slot="dropdown-menu-separator"
-	class={cn("-mx-1 my-1 h-px bg-control-border", className)}
+	class={["ridu-dropdown-menu__separator", className]}
 	{...restProps}
 />

package/src/components/ui/dropdown-menu/dropdown-menu.scss

@@ -0,0 +1,62 @@
+@use "@riducms/ui/styles.scss" as ui;
+
+@layer ridu.components {
+	.ridu-dropdown-menu {
+		z-index: 50;
+		min-width: 176px;
+		padding: 4px;
+		border: 1px solid var(--control-border);
+		border-radius: 4px;
+		background: var(--popover);
+		color: var(--popover-foreground);
+		box-shadow: var(--shadow-popover);
+		font-size: 12.5px;
+		outline: none;
+		transform-origin: var(--bits-menu-content-transform-origin);
+
+		&[data-state="open"] {
+			animation: ridu-dropdown-menu-in 100ms ease-out;
+		}
+	}
+
+	.ridu-dropdown-menu__item {
+		display: flex;
+		align-items: center;
+		min-height: 32px;
+		padding: 6px 10px;
+		border-radius: 3px;
+		color: var(--foreground-muted);
+		cursor: default;
+		outline: none;
+		user-select: none;
+
+		&[data-highlighted] {
+			background: var(--control-surface-hover);
+			color: var(--foreground);
+		}
+
+		&[data-disabled] {
+			opacity: 0.4;
+			pointer-events: none;
+		}
+	}
+
+	.ridu-dropdown-menu__separator {
+		height: 1px;
+		margin: 4px -4px;
+		background: var(--control-border);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.ridu-dropdown-menu[data-state="open"] {
+			animation: none;
+		}
+	}
+}
+
+@keyframes ridu-dropdown-menu-in {
+	from {
+		opacity: 0;
+		transform: scale(0.98);
+	}
+}

package/src/components/ui/kbd/kbd.scss

@@ -0,0 +1,17 @@
+@use "@riducms/ui/styles.scss" as ui;
+
+@layer ridu.components {
+	.ridu-kbd {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-height: 20px;
+		padding-inline: 6px;
+		border: 1px solid var(--control-border);
+		border-radius: 4px;
+		color: var(--ink-faint);
+		font-family: var(--font-mono);
+		font-size: 10px;
+		line-height: 1;
+	}
+}

package/src/components/ui/kbd/kbd.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
 
-	import { cn, type WithElementRef } from "@riducms/ui";
+	import { type WithElementRef } from "@riducms/ui";
+	import "@admin/components/ui/kbd/kbd.scss";
 
 	let {
 		ref = $bindable(null),
@@ -11,14 +12,6 @@
 	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
 </script>
 
-<kbd
-	bind:this={ref}
-	data-slot="kbd"
-	class={cn(
-		"font-mono inline-flex min-h-5 items-center justify-center rounded-[4px] border border-control-border px-1.5 text-[10px] leading-none text-foreground-faint",
-		className
-	)}
-	{...restProps}
->
+<kbd bind:this={ref} data-slot="kbd" class={["ridu-kbd", className]} {...restProps}>
 	{@render children?.()}
 </kbd>

package/src/components/ui/navigation-drawer/navigation-drawer.scss

@@ -0,0 +1,40 @@
+@use "@riducms/ui/styles.scss" as ui;
+
+@layer ridu.components {
+	.ridu-navigation-drawer {
+		position: fixed;
+		inset: 0;
+		z-index: 50;
+		display: flex;
+		flex-direction: column;
+		background: var(--background);
+		color: var(--foreground);
+		font-size: 12px;
+		line-height: var(--line-height-body);
+		outline: none;
+		animation: ridu-navigation-enter 150ms linear;
+	}
+	.ridu-navigation-drawer__header {
+		display: flex;
+		align-items: flex-start;
+		flex-shrink: 0;
+		height: var(--admin-header-height);
+		padding: 16px var(--admin-gutter) 0;
+	}
+	.ridu-navigation-drawer__label {
+		@include ui.visually-hidden;
+	}
+	@keyframes ridu-navigation-enter {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.ridu-navigation-drawer {
+			animation: none;
+		}
+	}
+}

package/src/components/ui/navigation-drawer/navigation-drawer.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { Dialog } from "bits-ui";
+	import type { Snippet } from "svelte";
+	import { getAdminI18n } from "@riducms/plugin";
+	import MenuIcon from "~icons/lucide/menu";
+	import XIcon from "~icons/lucide/x";
+	import "@admin/components/ui/navigation-drawer/navigation-drawer.scss";
+
+	let { open = $bindable(false), children }: { open?: boolean; children: Snippet } = $props();
+
+	const i18n = getAdminI18n();
+</script>
+
+<Dialog.Root bind:open>
+	<Dialog.Trigger type="button" class="ridu-nav-toggle" aria-label={i18n.t("navigation:openMenu")}>
+		<MenuIcon aria-hidden="true" />
+	</Dialog.Trigger>
+	<Dialog.Portal>
+		<Dialog.Content class="ridu-navigation-drawer" dir={i18n.direction}>
+			<Dialog.Title class="ridu-navigation-drawer__label">
+				{i18n.t("navigation:adminNavigation")}
+			</Dialog.Title>
+			<Dialog.Description class="ridu-navigation-drawer__label">
+				{i18n.t("navigation:adminNavigationDescription")}
+			</Dialog.Description>
+			<div class="ridu-navigation-drawer__header">
+				<Dialog.Close
+					type="button"
+					class="ridu-nav-toggle"
+					aria-label={i18n.t("navigation:closeMenu")}
+				>
+					<XIcon aria-hidden="true" />
+				</Dialog.Close>
+			</div>
+			{@render children()}
+		</Dialog.Content>
+	</Dialog.Portal>
+</Dialog.Root>

package/src/components/ui/popover/popover-content.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Popover as PopoverPrimitive } from "bits-ui";
-	import { cn, type WithoutChildrenOrChild } from "@riducms/ui";
+	import "@admin/components/ui/popover/popover.scss";
+	import { type WithoutChildrenOrChild } from "@riducms/ui";
 
 	let {
 		ref = $bindable(null),
@@ -20,10 +21,7 @@
 		data-slot="popover-content"
 		{sideOffset}
 		{align}
-		class={cn(
-			"ridu-popover-enter flex flex-col gap-4 rounded-[4px] border border-control-border bg-popover p-2 text-sm text-popover-foreground shadow-[var(--shadow-popover)] z-50 w-72 origin-(--bits-popover-content-transform-origin) outline-none",
-			className
-		)}
+		class={["ridu-popover ridu-popover-enter", className]}
 		{...restProps}
 	/>
 </PopoverPrimitive.Portal>

package/src/components/ui/popover/popover.scss

@@ -0,0 +1,18 @@
+@layer ridu.components {
+	.ridu-popover {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+		width: 288px;
+		padding: 8px;
+		border: 1px solid var(--control-border);
+		border-radius: 4px;
+		background: var(--popover);
+		color: var(--popover-foreground);
+		font-size: var(--font-size-body);
+		box-shadow: var(--shadow-popover);
+		z-index: 80;
+		outline: none;
+		transform-origin: var(--bits-popover-content-transform-origin);
+	}
+}

package/src/components/ui/radio-group/index.ts

@@ -1,3 +1,2 @@
 export { default as RadioGroup } from "@admin/components/ui/radio-group/radio-group.svelte";
-export { default as RadioGroupItem } from "@admin/components/ui/radio-group/radio-group-item.svelte";
 export { default as RadioCardItem } from "@admin/components/ui/radio-group/radio-card-item.svelte";

package/src/components/ui/radio-group/radio-card-item.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
 
-	import { cn } from "@riducms/ui";
+	import "@admin/components/ui/radio-group/radio.scss";
 
 	let {
 		value,
@@ -20,19 +20,14 @@
 	{value}
 	{disabled}
 	data-slot="radio-card-item"
-	class={cn(
-		"group/radio inline-flex min-h-6 cursor-pointer items-center gap-2 text-left text-[13px] text-foreground-muted outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/70 focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[state=checked]:text-foreground data-[disabled]:cursor-not-allowed data-[disabled]:text-foreground-faint",
-		className
-	)}
+	class={["ridu-radio-option", className]}
 >
 	{#snippet children({ checked })}
-		<span
-			class="grid size-5 shrink-0 place-items-center rounded-full border border-control-border bg-control transition-[border-color,background-color] group-hover/radio:border-control-border-hover data-[checked=true]:border-foreground-muted"
-			data-checked={checked}
-			aria-hidden="true"
-		>
-			{#if checked}<span class="size-2 rounded-full bg-foreground"></span>{/if}
+		<span class="ridu-radio-option__control" data-checked={checked} aria-hidden="true">
+			{#if checked}
+				<span class="ridu-radio-option__dot"></span>
+			{/if}
 		</span>
-		<span class="min-w-0">{label}</span>
+		<span>{label}</span>
 	{/snippet}
 </RadioGroupPrimitive.Item>

package/src/components/ui/radio-group/radio-group.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
-	import { cn } from "@riducms/ui";
+	import "@admin/components/ui/radio-group/radio.scss";
 
 	let {
 		ref = $bindable(null),
@@ -14,6 +14,6 @@
 	bind:ref
 	bind:value
 	data-slot="radio-group"
-	class={cn("grid gap-2", className)}
+	class={className ?? "ridu-radio-group"}
 	{...restProps}
 />

package/src/components/ui/radio-group/radio.scss

@@ -0,0 +1,45 @@
+@use "@riducms/ui/styles.scss" as ui;
+@layer ridu.components {
+	.ridu-radio-group {
+		display: grid;
+		gap: 8px;
+	}
+	.ridu-radio-option {
+		display: inline-flex;
+		align-items: center;
+		gap: 8px;
+		min-height: 24px;
+		border: 0;
+		padding: 0;
+		background: transparent;
+		color: var(--foreground);
+		font: inherit;
+		text-align: start;
+		cursor: pointer;
+		&:focus-visible {
+			@include ui.focus-outline;
+		}
+		&[data-disabled] {
+			cursor: not-allowed;
+			color: var(--control-disabled-foreground);
+		}
+		&:hover .ridu-radio-option__control {
+			border-color: var(--control-border-hover);
+		}
+	}
+	.ridu-radio-option__control {
+		@include ui.control-surface;
+		display: grid;
+		place-items: center;
+		flex-shrink: 0;
+		width: 20px;
+		height: 20px;
+		border-radius: 50%;
+	}
+	.ridu-radio-option__dot {
+		width: 8px;
+		height: 8px;
+		border-radius: 50%;
+		background: var(--foreground);
+	}
+}

package/src/components/ui/select/select-content.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { Select as SelectPrimitive } from "bits-ui";
-	import { cn, type WithoutChild, type WithoutChildrenOrChild } from "@riducms/ui";
+	import { type WithoutChild, type WithoutChildrenOrChild } from "@riducms/ui";
 	import SelectScrollDownButton from "@admin/components/ui/select/select-scroll-down-button.svelte";
 	import SelectScrollUpButton from "@admin/components/ui/select/select-scroll-up-button.svelte";
 
+	import "@admin/components/ui/select/select.scss";
+
 	let {
 		ref = $bindable(null),
 		class: className,
@@ -23,14 +25,11 @@
 		{sideOffset}
 		{preventScroll}
 		data-slot="select-content"
-		class={cn(
-			"ridu-popover-enter max-h-(--bits-select-content-available-height) min-w-36 rounded-[10px] border border-control-border bg-popover text-popover-foreground shadow-[var(--shadow-popover)] relative isolate z-50 overflow-x-hidden overflow-y-auto",
-			className
-		)}
+		class={["ridu-select__content", className]}
 		{...restProps}
 	>
 		<SelectScrollUpButton />
-		<SelectPrimitive.Viewport class={cn("w-full min-w-(--bits-select-anchor-width) scroll-my-1")}>
+		<SelectPrimitive.Viewport class="ridu-select__viewport">
 			{@render children?.()}
 		</SelectPrimitive.Viewport>
 		<SelectScrollDownButton />

package/src/components/ui/select/select-item.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
 	import { Select as SelectPrimitive } from "bits-ui";
 	import CheckIcon from "~icons/lucide/check";
-	import { cn, type WithoutChild } from "@riducms/ui";
+	import { type WithoutChild } from "@riducms/ui";
+
+	import "@admin/components/ui/select/select.scss";
 
 	let {
 		ref = $bindable(null),
@@ -16,20 +18,18 @@
 <SelectPrimitive.Item
 	bind:ref
 	{value}
+	{label}
 	data-slot="select-item"
-	class={cn(
-		"min-h-9 gap-2 rounded-md py-2 pe-8 ps-3 text-[14px] text-foreground-body [&_svg:not([class*='size-'])]:size-3.5 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-none select-none data-[highlighted]:bg-control-hover data-[highlighted]:text-foreground data-[selected]:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-45 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-		className
-	)}
+	class={["ridu-select__item", className]}
 	{...restProps}
 >
 	{#snippet children({ selected, highlighted })}
-		<span class="absolute end-2 flex size-3.5 items-center justify-center">
+		<span class="ridu-select__indicator">
 			{#if selected}
-				<CheckIcon class="cn-select-item-indicator-icon" />
+				<CheckIcon class="ridu-select__item-check" />
 			{/if}
 		</span>
-		<span class="flex flex-1 gap-2 shrink-0 whitespace-nowrap">
+		<span class="ridu-select__label">
 			{#if childrenProp}
 				{@render childrenProp({ selected, highlighted })}
 			{:else}