kumo-svelte 0.12.0 → 0.13.0

package/ai/component-registry.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.12.0",
+  "version": "0.13.0",
   "components": {
     "Autocomplete": {
       "name": "Autocomplete",
@@ -3934,6 +3934,11 @@
           "optional": true,
           "description": "Total number of items across all pages."
         },
+        "hasNextPage": {
+          "type": "boolean",
+          "optional": true,
+          "description": "Whether another page exists when the total count is unknown."
+        },
         "class": {
           "type": "string",
           "optional": true,
@@ -4639,11 +4644,76 @@
           "type": "HTMLElement | string",
           "optional": true,
           "description": "Container element for the portal."
+        },
+        "side": {
+          "type": "enum",
+          "optional": true,
+          "values": [
+            "top",
+            "right",
+            "bottom",
+            "left"
+          ],
+          "default": "bottom",
+          "description": "Preferred popup side; collision handling may flip it."
+        },
+        "sideOffset": {
+          "type": "number",
+          "optional": true,
+          "default": "4",
+          "description": "Distance between the trigger and popup."
+        },
+        "align": {
+          "type": "enum",
+          "optional": true,
+          "values": [
+            "start",
+            "center",
+            "end"
+          ],
+          "default": "start",
+          "description": "Popup alignment along the trigger edge."
+        },
+        "alignOffset": {
+          "type": "number",
+          "optional": true,
+          "default": "0",
+          "description": "Additional offset along the alignment axis."
+        },
+        "customAnchor": {
+          "type": "HTMLElement | string",
+          "optional": true,
+          "description": "Custom floating-position anchor."
+        },
+        "strategy": {
+          "type": "enum",
+          "optional": true,
+          "values": [
+            "absolute",
+            "fixed"
+          ],
+          "description": "CSS positioning strategy for the popup."
+        },
+        "avoidCollisions": {
+          "type": "boolean",
+          "optional": true,
+          "description": "Whether the popup should adjust to avoid viewport collisions."
+        },
+        "collisionPadding": {
+          "type": "enum",
+          "optional": true,
+          "values": [
+            "top",
+            "right",
+            "bottom",
+            "left"
+          ],
+          "description": "Padding between the popup and its collision boundary."
         }
       },
       "colors": [
         "bg-kumo-base",
-        "bg-kumo-elevated",
+        "bg-kumo-control",
         "bg-kumo-hairline",
         "bg-kumo-tint",
         "border-kumo-line",
@@ -6258,6 +6328,46 @@
               "description": "Additional classes merged onto the toolbar input group."
             }
           }
+        },
+        "Link": {
+          "description": "Toolbar.Link",
+          "props": {
+            "children": {
+              "type": "Snippet",
+              "optional": true,
+              "description": "Optional visible link label."
+            },
+            "href": {
+              "type": "string",
+              "optional": true,
+              "description": "Navigation destination."
+            },
+            "icon": {
+              "type": "Component",
+              "optional": true,
+              "description": "Optional icon component rendered before the label."
+            },
+            "shape": {
+              "type": "enum",
+              "optional": true,
+              "values": [
+                "base",
+                "square",
+                "circle"
+              ],
+              "description": "Link shape. Icon-only toolbar links default to square."
+            },
+            "external": {
+              "type": "boolean",
+              "optional": true,
+              "description": "Opens the link in a new tab with safe rel attributes."
+            },
+            "disabled": {
+              "type": "boolean",
+              "optional": true,
+              "description": "Disables navigation and exposes disabled semantics."
+            }
+          }
         }
       }
     },

package/ai/component-registry.md

@@ -1,6 +1,6 @@
 # Kumo Svelte Component Registry
 
-Version: 0.12.0
+Version: 0.13.0
 
 ## Autocomplete
 

package/dist/components/combobox/ComboboxInput.svelte

@@ -13,7 +13,7 @@
 </script>
 
 <input
-  class={cn(inputStyles[context.size], 'mx-1.5 w-[calc(100%-0.75rem)] shrink-0 first:mb-2 border-0 bg-kumo-control text-kumo-default ring ring-kumo-line outline-none placeholder:text-kumo-muted focus:ring-kumo-focus/50 focus:ring-[1.5px]', className)}
+  class={cn(inputStyles[context.size], 'mx-0 -mt-1.5 w-full shrink-0 rounded-b-none first:mb-2 border-0 bg-kumo-control text-kumo-default ring ring-kumo-line outline-none placeholder:text-kumo-muted focus:ring-kumo-focus/50 focus:ring-[1.5px]', className)}
   value={context.query}
   {placeholder}
   disabled={context.disabled}

package/dist/components/combobox/ComboboxTest.svelte

@@ -4,6 +4,7 @@
   import ComboboxContent from './ComboboxContent.svelte';
   import ComboboxList from './ComboboxList.svelte';
   import ComboboxItem from './ComboboxItem.svelte';
+  import ComboboxInput from './ComboboxInput.svelte';
 
   interface Props {
     value?: unknown;
@@ -25,6 +26,7 @@
     hideWhenDetached={false}
     updatePositionStrategy="optimized"
   >
+    <ComboboxInput placeholder="Search fruit" />
     <ComboboxList>
       {#snippet children(item)}
         <ComboboxItem value={item}>{item}</ComboboxItem>

package/dist/components/combobox/combobox.test.js

@@ -3,6 +3,15 @@ import userEvent from "@testing-library/user-event";
 import { describe, expect, it, vi } from "vitest";
 import ComboboxTest from "./ComboboxTest.svelte";
 describe("Combobox Keyboard Navigation", () => {
+    it("aligns popup input with the content edges", async () => {
+        const user = userEvent.setup();
+        render(ComboboxTest);
+        await user.click(screen.getByRole("button", { name: "Show options" }));
+        const input = screen.getByPlaceholderText("Search fruit");
+        expect(input.className).toContain("mx-0");
+        expect(input.className).toContain("-mt-1.5");
+        expect(input.className).toContain("rounded-b-none");
+    });
     it("allows navigating and selecting items using Arrow keys and Enter", async () => {
         const user = userEvent.setup();
         const onValueChange = vi.fn();

package/dist/components/dialog/Dialog.svelte

@@ -1,12 +1,12 @@
 <script module lang="ts">
-  export { KUMO_DIALOG_DEFAULT_VARIANTS, KUMO_DIALOG_VARIANTS } from './Dialog.variants';
+  export { dialogVariants, KUMO_DIALOG_DEFAULT_VARIANTS, KUMO_DIALOG_VARIANTS } from './Dialog.variants';
 </script>
 
 <script lang="ts">
   import { AlertDialog, Dialog as DialogPrimitive } from 'bits-ui';
   import type { Snippet } from 'svelte';
   import { cn } from '../../utils/cn';
-  import { KUMO_DIALOG_DEFAULT_VARIANTS, KUMO_DIALOG_VARIANTS } from './Dialog.variants';
+  import { dialogVariants, KUMO_DIALOG_DEFAULT_VARIANTS, KUMO_DIALOG_VARIANTS } from './Dialog.variants';
 
   export const KUMO_DIALOG_STYLING = {
     dimensions: {
@@ -104,11 +104,7 @@
     'fixed inset-0 bg-kumo-recessed opacity-80 transition-all duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0';
 
   let contentClasses = $derived(
-    cn(
-      'shadow-m ring ring-kumo-line fixed top-1/2 left-1/2 w-full max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-xl bg-kumo-base text-kumo-default duration-150 data-ending-style:scale-90 data-ending-style:opacity-0 data-starting-style:scale-90 data-starting-style:opacity-0',
-      KUMO_DIALOG_VARIANTS.size[size].classes,
-      className
-    )
+    cn(dialogVariants({ size }), className)
   );
 
   const contentStyle = $derived(

package/dist/components/dialog/Dialog.svelte.d.ts

@@ -1,4 +1,4 @@
-export { KUMO_DIALOG_DEFAULT_VARIANTS, KUMO_DIALOG_VARIANTS } from './Dialog.variants';
+export { dialogVariants, KUMO_DIALOG_DEFAULT_VARIANTS, KUMO_DIALOG_VARIANTS } from './Dialog.variants';
 import type { Snippet } from 'svelte';
 import { KUMO_DIALOG_VARIANTS } from './Dialog.variants';
 type DialogSize = keyof typeof KUMO_DIALOG_VARIANTS.size;

package/dist/components/dialog/Dialog.variants.d.ts

@@ -32,3 +32,7 @@ export declare const KUMO_DIALOG_DEFAULT_VARIANTS: {
     readonly size: "base";
     readonly role: "dialog";
 };
+export type KumoDialogSize = keyof typeof KUMO_DIALOG_VARIANTS.size;
+export declare function dialogVariants({ size }?: {
+    size?: KumoDialogSize;
+}): string;

package/dist/components/dialog/Dialog.variants.js

@@ -32,3 +32,7 @@ export const KUMO_DIALOG_DEFAULT_VARIANTS = {
     size: 'base',
     role: 'dialog'
 };
+export function dialogVariants({ size = KUMO_DIALOG_DEFAULT_VARIANTS.size } = {}) {
+    return cn('shadow-m ring ring-kumo-line fixed top-8 left-1/2 w-full max-w-[calc(100vw-2rem)] -translate-x-1/2 overflow-hidden rounded-xl bg-kumo-base text-kumo-default duration-150 data-ending-style:scale-90 data-ending-style:opacity-0 data-starting-style:scale-90 data-starting-style:opacity-0 sm:top-16', KUMO_DIALOG_VARIANTS.size[size].classes);
+}
+import { cn } from '../../utils/cn';

package/dist/components/dialog/dialog.test.js

@@ -3,7 +3,7 @@ import userEvent from "@testing-library/user-event";
 import { describe, expect, it } from "vitest";
 import { expectNoA11yViolations } from "../../../../tests/a11y";
 import DialogTestHost from "./DialogTestHost.svelte";
-import { KUMO_DIALOG_VARIANTS } from "./Dialog.variants";
+import { dialogVariants, KUMO_DIALOG_VARIANTS } from "./Dialog.variants";
 describe("Dialog", () => {
     it("renders the trigger with Kumo data attributes", () => {
         render(DialogTestHost);
@@ -54,6 +54,13 @@ describe("Dialog", () => {
     });
 });
 describe("Dialog variants", () => {
+    it("positions dialogs closer to the top of the viewport", () => {
+        const classes = dialogVariants().split(" ");
+        expect(classes).toContain("top-8");
+        expect(classes).toContain("sm:top-16");
+        expect(classes).not.toContain("top-1/2");
+        expect(classes).not.toContain("-translate-y-1/2");
+    });
     it("uses fixed width classes for size variants", () => {
         for (const [size, expectedClass] of [
             ["sm", "sm:w-72"],

package/dist/components/dialog/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Dialog } from './Dialog.svelte';
-export { KUMO_DIALOG_DEFAULT_VARIANTS, KUMO_DIALOG_VARIANTS } from './Dialog.variants';
+export { dialogVariants, KUMO_DIALOG_DEFAULT_VARIANTS, KUMO_DIALOG_VARIANTS } from './Dialog.variants';
+export type { KumoDialogSize } from './Dialog.variants';

package/dist/components/dialog/index.js

@@ -1,2 +1,2 @@
 export { default as Dialog } from './Dialog.svelte';
-export { KUMO_DIALOG_DEFAULT_VARIANTS, KUMO_DIALOG_VARIANTS } from './Dialog.variants';
+export { dialogVariants, KUMO_DIALOG_DEFAULT_VARIANTS, KUMO_DIALOG_VARIANTS } from './Dialog.variants';

package/dist/components/input-group/context.js

@@ -41,7 +41,7 @@ export const INPUT_GROUP_SIZE = {
         addonOuterStart: 'pl-2.5',
         addonOuterEnd: 'pr-2.5',
         addonButtonOuterStart: 'pl-1.5',
-        addonButtonOuterEnd: 'pr-1.5',
+        addonButtonOuterEnd: 'pr-0.5',
         suffixPad: 'pr-4',
         fontSize: 'text-base',
         addonIconSize: '[&>svg]:size-5',

package/dist/components/input-group/input-group.test.js

@@ -3,7 +3,11 @@ import userEvent from '@testing-library/user-event';
 import { describe, expect, it } from 'vitest';
 import { expectNoA11yViolations } from '../../../../tests/a11y';
 import InputGroupTestHost from './InputGroupTestHost.svelte';
+import { INPUT_GROUP_SIZE } from './context';
 describe('InputGroup', () => {
+    it('uses compact end spacing for a button in a large group', () => {
+        expect(INPUT_GROUP_SIZE.lg.addonButtonOuterEnd).toBe('pr-0.5');
+    });
     it('renders input inside group', () => {
         render(InputGroupTestHost);
         expect(screen.getByRole('textbox', { name: 'Search' })).toBeTruthy();

package/dist/components/pagination/Pagination.svelte

@@ -50,6 +50,8 @@
     setPage?: (page: number) => void;
     perPage?: number;
     totalCount?: number;
+    /** Whether another page exists when no total count or page count is available. */
+    hasNextPage?: boolean;
     pages?: number;
     controls?: Controls;
     text?: (props: InfoTextProps) => unknown;
@@ -64,6 +66,7 @@
     setPage: setPageProp,
     perPage,
     totalCount,
+    hasNextPage,
     pages,
     controls = KUMO_PAGINATION_DEFAULT_VARIANTS.controls,
     text,
@@ -101,6 +104,9 @@
     get totalCount() {
       return effectiveTotalCount;
     },
+    get hasNextPage() {
+      return hasNextPage;
+    },
     get maxPage() {
       return maxPage;
     },

package/dist/components/pagination/Pagination.svelte.d.ts

@@ -14,6 +14,8 @@ interface Props {
     setPage?: (page: number) => void;
     perPage?: number;
     totalCount?: number;
+    /** Whether another page exists when no total count or page count is available. */
+    hasNextPage?: boolean;
     pages?: number;
     controls?: Controls;
     text?: (props: InfoTextProps) => unknown;

package/dist/components/pagination/PaginationControls.svelte

@@ -20,6 +20,12 @@
 
   let { controls = 'full', pageSelector = 'input', class: className, ...rest }: Props = $props();
   const context = getPaginationContext();
+  const hasKnownTotal = $derived(context.totalCount !== undefined);
+  const isUnknownTotal = $derived(!hasKnownTotal && context.hasNextPage !== undefined);
+  const showFullControls = $derived(controls === 'full' && !isUnknownTotal);
+  const isNextDisabled = $derived(
+    hasKnownTotal ? context.page === context.maxPage : context.hasNextPage !== true
+  );
   const pageOptions = $derived(
     Array.from({ length: context.maxPage }, (_, index) => {
       const page = index + 1;
@@ -28,7 +34,9 @@
   );
 
   function commitPage(nextPage: number) {
-    const clamped = clamp(nextPage, 1, context.maxPage);
+    const clamped = hasKnownTotal
+      ? clamp(nextPage, 1, context.maxPage)
+      : Math.max(nextPage, 1);
     context.setPage(clamped);
     context.setEditingPage(clamped);
   }
@@ -42,7 +50,7 @@
 <div data-slot="pagination-controls" class={cn('grow flex flex-col items-end', className)} {...rest}>
   <nav aria-label={context.labels.navigation}>
     <InputGroup focusMode="individual">
-      {#if controls === 'full'}
+      {#if showFullControls}
         <InputGroupButton
           variant="secondary"
           aria-label={context.labels.firstPage}
@@ -60,7 +68,7 @@
       >
         <CaretLeft class="size-4" />
       </InputGroupButton>
-      {#if controls === 'full'}
+      {#if showFullControls}
         {#if pageSelector === 'dropdown'}
           <Select
             aria-label={context.labels.pageNumber}
@@ -95,12 +103,12 @@
       <InputGroupButton
         variant="secondary"
         aria-label={context.labels.nextPage}
-        disabled={context.page === context.maxPage}
+        disabled={isNextDisabled}
         onclick={() => commitPage(context.page + 1)}
       >
         <CaretRight class="size-4" />
       </InputGroupButton>
-      {#if controls === 'full'}
+      {#if showFullControls}
         <InputGroupButton
           variant="secondary"
           aria-label={context.labels.lastPage}

package/dist/components/pagination/context.d.ts

@@ -12,6 +12,7 @@ export interface PaginationContextValue {
     page: number;
     perPage?: number;
     totalCount?: number;
+    hasNextPage?: boolean;
     maxPage: number;
     pageShowingRange: string;
     setPage: (page: number) => void;

package/dist/components/pagination/pagination.test.js

@@ -44,6 +44,25 @@ describe('Pagination', () => {
         await user.click(screen.getByRole('button', { name: 'Next page' }));
         expect(onPageChange).toHaveBeenCalledWith(3);
     });
+    it('supports sequential pagination when the total is unknown', async () => {
+        const user = userEvent.setup();
+        const setPage = vi.fn();
+        render(Pagination, {
+            page: 3,
+            hasNextPage: true,
+            setPage,
+            text: ({ page }) => `Page ${page}`
+        });
+        expect(screen.queryByRole('button', { name: 'First page' })).toBeNull();
+        expect(screen.queryByRole('textbox', { name: 'Page number' })).toBeNull();
+        expect(screen.queryByRole('button', { name: 'Last page' })).toBeNull();
+        await user.click(screen.getByRole('button', { name: 'Next page' }));
+        expect(setPage).toHaveBeenCalledWith(4);
+    });
+    it('disables next when an unknown-total list has no following page', () => {
+        render(Pagination, { page: 3, hasNextPage: false });
+        expect(screen.getByRole('button', { name: 'Next page' })).toBeDisabled();
+    });
     it('updates the page from the dropdown selector', async () => {
         const user = userEvent.setup();
         const setPage = vi.fn();

package/dist/components/select/Select.svelte

@@ -19,6 +19,7 @@
 
   type ItemDescriptor = string | { label: string; disabled?: boolean };
   type Items = Record<string, ItemDescriptor> | Option[];
+  type ContentProps = SelectPrimitive.ContentProps;
 
   interface Props {
     class?: string;
@@ -45,6 +46,19 @@
     renderValue?: (value: Value) => unknown;
     onValueChange?: (value: Value) => void;
     container?: HTMLElement | string;
+    /** Preferred popup side. Collision handling may flip it when space is limited. */
+    side?: ContentProps['side'];
+    sideOffset?: ContentProps['sideOffset'];
+    align?: ContentProps['align'];
+    alignOffset?: ContentProps['alignOffset'];
+    customAnchor?: ContentProps['customAnchor'];
+    strategy?: ContentProps['strategy'];
+    avoidCollisions?: ContentProps['avoidCollisions'];
+    collisionBoundary?: ContentProps['collisionBoundary'];
+    collisionPadding?: ContentProps['collisionPadding'];
+    sticky?: ContentProps['sticky'];
+    hideWhenDetached?: ContentProps['hideWhenDetached'];
+    updatePositionStrategy?: ContentProps['updatePositionStrategy'];
     [key: string]: unknown;
   }
 
@@ -73,6 +87,18 @@
     renderValue,
     onValueChange,
     container,
+    side = 'bottom',
+    sideOffset = 4,
+    align = 'start',
+    alignOffset = 0,
+    customAnchor,
+    strategy,
+    avoidCollisions,
+    collisionBoundary,
+    collisionPadding,
+    sticky,
+    hideWhenDetached,
+    updatePositionStrategy,
     ...rest
   }: Props = $props();
 
@@ -188,7 +214,7 @@
   <SelectPrimitive.Trigger
       child={trigger ? customTriggerChild : undefined}
       class={cn(
-        'inline-flex w-full items-center justify-between gap-2 bg-kumo-base text-left font-normal text-kumo-default shadow-xs outline-none ring ring-kumo-line transition focus:opacity-100 focus:ring-2 focus:ring-kumo-focus/50 focus-visible:ring-inset disabled:cursor-not-allowed disabled:opacity-50 *:in-focus:opacity-100',
+        'inline-flex w-full items-center justify-between gap-2 bg-kumo-control text-left font-normal text-kumo-default shadow-xs outline-none ring ring-kumo-line transition focus:opacity-100 focus:ring-2 focus:ring-kumo-focus/50 focus-visible:ring-inset disabled:cursor-not-allowed disabled:bg-kumo-control/50 disabled:opacity-50 data-[state=open]:bg-kumo-control *:in-focus:opacity-100',
         sizes[size],
         !value || (Array.isArray(value) && value.length === 0) ? 'text-kumo-placeholder' : undefined,
         errorMessage ? 'ring-kumo-danger! focus:ring-kumo-danger/50!' : undefined,
@@ -224,11 +250,22 @@
     <SelectPrimitive.Portal to={container}>
       <SelectPrimitive.Content
         class={cn(
-          'z-50 flex max-h-[var(--bits-select-content-available-height)] min-w-[calc(var(--bits-select-anchor-width)+3px)] flex-col overflow-hidden rounded-lg bg-kumo-base py-1.5 text-base text-kumo-default shadow-lg ring ring-kumo-line outline-none',
+          'z-50 flex max-h-[var(--bits-select-content-available-height)] max-w-[var(--bits-select-content-available-width)] min-w-[var(--bits-select-anchor-width)] flex-col overflow-hidden rounded-lg bg-kumo-base py-1.5 text-base text-kumo-default shadow-lg ring ring-kumo-line outline-none',
           contentClass
         )}
         preventScroll
-        sideOffset={4}
+        {side}
+        {sideOffset}
+        {align}
+        {alignOffset}
+        {customAnchor}
+        {strategy}
+        {avoidCollisions}
+        {collisionBoundary}
+        {collisionPadding}
+        {sticky}
+        {hideWhenDetached}
+        {updatePositionStrategy}
       >
         <SelectPrimitive.Viewport class={cn('min-h-0 flex-1 overflow-y-auto overscroll-none scroll-pb-2 scroll-pt-2', viewportClass)}>
           {#if children}

package/dist/components/select/Select.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import { Select as SelectPrimitive } from 'bits-ui';
 type Size = 'xs' | 'sm' | 'base' | 'lg';
 type SelectValue = unknown;
 type Value = SelectValue | SelectValue[];
@@ -12,6 +13,7 @@ type ItemDescriptor = string | {
     disabled?: boolean;
 };
 type Items = Record<string, ItemDescriptor> | Option[];
+type ContentProps = SelectPrimitive.ContentProps;
 interface Props {
     class?: string;
     contentClass?: string;
@@ -42,6 +44,19 @@ interface Props {
     renderValue?: (value: Value) => unknown;
     onValueChange?: (value: Value) => void;
     container?: HTMLElement | string;
+    /** Preferred popup side. Collision handling may flip it when space is limited. */
+    side?: ContentProps['side'];
+    sideOffset?: ContentProps['sideOffset'];
+    align?: ContentProps['align'];
+    alignOffset?: ContentProps['alignOffset'];
+    customAnchor?: ContentProps['customAnchor'];
+    strategy?: ContentProps['strategy'];
+    avoidCollisions?: ContentProps['avoidCollisions'];
+    collisionBoundary?: ContentProps['collisionBoundary'];
+    collisionPadding?: ContentProps['collisionPadding'];
+    sticky?: ContentProps['sticky'];
+    hideWhenDetached?: ContentProps['hideWhenDetached'];
+    updatePositionStrategy?: ContentProps['updatePositionStrategy'];
     [key: string]: unknown;
 }
 declare const Select: import("svelte").Component<Props, {}, "value">;

package/dist/components/select/select-variants.d.ts

@@ -27,7 +27,7 @@ export declare const KUMO_SELECT_STYLING: {
         readonly height: 36;
         readonly paddingX: 12;
         readonly borderRadius: 8;
-        readonly background: "bg-kumo-elevated";
+        readonly background: "bg-kumo-control";
         readonly text: "text-color-surface";
         readonly ring: "color-border";
         readonly fontSize: 16;
@@ -52,7 +52,7 @@ export declare const KUMO_SELECT_STYLING: {
         };
     };
     readonly popup: {
-        readonly background: "bg-kumo-elevated";
+        readonly background: "bg-kumo-base";
         readonly ring: "border-kumo-line";
         readonly borderRadius: 8;
         readonly padding: 6;

package/dist/components/select/select-variants.js

@@ -28,7 +28,7 @@ export const KUMO_SELECT_STYLING = {
         height: 36,
         paddingX: 12,
         borderRadius: 8,
-        background: 'bg-kumo-elevated',
+        background: 'bg-kumo-control',
         text: 'text-color-surface',
         ring: 'color-border',
         fontSize: 16,
@@ -43,7 +43,7 @@ export const KUMO_SELECT_STYLING = {
         check: { name: 'ph-check', size: 20 }
     },
     popup: {
-        background: 'bg-kumo-elevated',
+        background: 'bg-kumo-base',
         ring: 'border-kumo-line',
         borderRadius: 8,
         padding: 6
@@ -58,7 +58,7 @@ export const KUMO_SELECT_STYLING = {
 };
 export function selectVariants({ size = KUMO_SELECT_DEFAULT_VARIANTS.size } = {}) {
     const buttonSize = KUMO_SELECT_VARIANTS.size[size].classes;
-    return cn('group flex w-full items-center select-none border-0 shadow-xs focus:outline-none focus:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand cursor-pointer disabled:cursor-not-allowed disabled:text-kumo-subtle', 'bg-kumo-base !text-kumo-default ring not-disabled:hover:bg-kumo-tint disabled:bg-kumo-base/50 disabled:!text-kumo-default/70 ring-kumo-line data-[state=open]:bg-kumo-base', buttonSize, 'justify-between font-normal', 'focus:opacity-100 focus:ring-kumo-focus/50 focus-visible:ring-inset *:in-focus:opacity-100');
+    return cn('group flex w-full items-center select-none border-0 shadow-xs focus:outline-none focus:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand cursor-pointer disabled:cursor-not-allowed disabled:text-kumo-subtle', 'bg-kumo-control !text-kumo-default ring not-disabled:hover:bg-kumo-tint disabled:bg-kumo-control/50 disabled:!text-kumo-default/70 ring-kumo-line data-[state=open]:bg-kumo-control', buttonSize, 'justify-between font-normal', 'focus:opacity-100 focus:ring-kumo-focus/50 focus-visible:ring-inset *:in-focus:opacity-100');
 }
 export const triggerIconStyles = {
     xs: { iconSize: 12, className: 'text-kumo-subtle' },