@agentero/design-system 0.6.0 → 0.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.6.0",
+	"version": "0.7.1",
 	"description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
 	"type": "module",
 	"license": "Apache-2.0",
@@ -37,6 +37,10 @@
 			"types": "./src/divider/index.d.ts",
 			"import": "./src/divider/index.js"
 		},
+		"./dropdown-menu": {
+			"types": "./src/dropdown-menu/index.d.ts",
+			"import": "./src/dropdown-menu/index.js"
+		},
 		"./loading": {
 			"types": "./src/loading/index.d.ts",
 			"import": "./src/loading/index.js"
@@ -67,6 +71,7 @@
 	},
 	"dependencies": {
 		"@radix-ui/react-avatar": "^1.1.11",
+		"@radix-ui/react-dropdown-menu": "^2.1.16",
 		"@radix-ui/react-separator": "^1.1.8",
 		"@radix-ui/react-slot": "^1.2.4",
 		"clsx": "^2.1.1",

package/src/dropdown-menu/dropdown-menu.d.ts

@@ -0,0 +1,276 @@
+import { ComponentProps } from 'react';
+import { VariantProps } from 'tailwind-variants';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+/**
+ * Props for the DropdownMenu Root component.
+ *
+ * @property {boolean} [defaultOpen] - The open state of the dropdown menu when it is initially rendered. Use when you do not need to control its open state.
+ * @property {boolean} [open] - The controlled open state of the dropdown menu. Must be used in conjunction with onOpenChange.
+ * @property {(open: boolean) => void} [onOpenChange] - Event handler called when the open state of the dropdown menu changes.
+ * @property {boolean} [modal=true] - The modality of the dropdown menu. When set to true, interaction with outside elements will be disabled and only menu content will be visible to screen readers.
+ * @property {'ltr' | 'rtl'} [dir] - The reading direction of the dropdown menu when applicable. If omitted, inherits globally from DirectionProvider or assumes LTR (left-to-right) reading mode.
+ */
+type RootProps = ComponentProps<typeof DropdownMenuPrimitive.Root>;
+/**
+ * Props for the DropdownMenu Trigger component.
+ *
+ * @property {boolean} [asChild=false] - Change the default rendered element for the one passed as a child, merging their props and behavior.
+ * @property {string} [className] - Additional CSS classes to apply to the trigger.
+ *
+ * @dataAttribute {string} data-state - "open" | "closed"
+ * @dataAttribute {string} data-disabled - Present when disabled
+ */
+type TriggerProps = ComponentProps<typeof DropdownMenuPrimitive.Trigger>;
+/**
+ * Tailwind variant styles for the dropdown menu content.
+ * Includes animations for slide-in/out based on the side from which the menu appears.
+ */
+declare const contentStyles: import('tailwind-variants').TVReturnType<{
+    hasTriggerWidth: {
+        true: string;
+    };
+}, undefined, string[], {
+    hasTriggerWidth: {
+        true: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    hasTriggerWidth: {
+        true: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+/**
+ * Props for the DropdownMenu Content component.
+ *
+ * @property {boolean} [loop=false] - When true, keyboard navigation will loop from last item to first, and vice versa.
+ * @property {'ltr' | 'rtl'} [dir] - The reading direction. If omitted, inherits from DirectionProvider or assumes LTR.
+ * @property {'top' | 'right' | 'bottom' | 'left'} [side='bottom'] - The preferred side of the trigger to render against when open.
+ * @property {number} [sideOffset=8] - The distance in pixels from the trigger.
+ * @property {'start' | 'center' | 'end'} [align='center'] - The preferred alignment against the trigger.
+ * @property {number} [alignOffset=0] - An offset in pixels from the "start" or "end" alignment options.
+ * @property {boolean} [avoidCollisions=true] - When true, overrides side and align to prevent collisions with boundary edges.
+ * @property {Element | null} [collisionBoundary] - The element used as the collision boundary.
+ * @property {number} [collisionPadding=0] - The distance in pixels from the boundary edges where collision detection should occur.
+ * @property {boolean} [hasTriggerWidth=false] - When true, sets the content width to match the trigger width using CSS variable.
+ * @property {string} [className] - Additional CSS classes to apply.
+ *
+ * @dataAttribute {string} data-state - "open" | "closed"
+ * @dataAttribute {string} data-side - "top" | "right" | "bottom" | "left"
+ * @dataAttribute {string} data-align - "start" | "end" | "center"
+ *
+ * @cssVariable --radix-dropdown-menu-content-transform-origin - The transform origin based on content side
+ * @cssVariable --radix-dropdown-menu-trigger-width - The width of the trigger element
+ * @cssVariable --radix-dropdown-menu-content-available-width - The available width before overflow
+ * @cssVariable --radix-dropdown-menu-content-available-height - The available height before overflow
+ */
+type ContentProps = ComponentProps<typeof DropdownMenuPrimitive.Content> & VariantProps<typeof contentStyles>;
+/**
+ * Props for the DropdownMenu Item component.
+ *
+ * @property {boolean} [disabled] - When true, prevents the user from interacting with the item.
+ * @property {(event: Event) => void} [onSelect] - Event handler called when the user selects an item (via mouse or keyboard).
+ * @property {string} [textValue] - Optional text used for typeahead purposes. By default, the typeahead behavior will use the .textContent of the item.
+ * @property {string} [className] - Additional CSS classes to apply.
+ *
+ * @dataAttribute {string} data-highlighted - Present when highlighted via keyboard navigation or hover
+ * @dataAttribute {string} data-disabled - Present when disabled
+ */
+type ItemProps = ComponentProps<typeof DropdownMenuPrimitive.Item>;
+/**
+ * Props for the DropdownMenu Separator component.
+ *
+ * @property {string} [className] - Additional CSS classes to apply.
+ */
+type SeparatorProps = ComponentProps<typeof DropdownMenuPrimitive.Separator>;
+/**
+ * Props for the DropdownMenu Label component.
+ *
+ * @property {string} [className] - Additional CSS classes to apply.
+ */
+type LabelProps = ComponentProps<typeof DropdownMenuPrimitive.Label>;
+/**
+ * Props for the DropdownMenu Sub component.
+ *
+ * @property {boolean} [defaultOpen] - The open state of the submenu when it is initially rendered. Use when you do not need to control its open state.
+ * @property {boolean} [open] - The controlled open state of the submenu. Must be used in conjunction with onOpenChange.
+ * @property {(open: boolean) => void} [onOpenChange] - Event handler called when the open state of the submenu changes.
+ */
+type SubProps = ComponentProps<typeof DropdownMenuPrimitive.Sub>;
+/**
+ * Props for the DropdownMenu SubTrigger component.
+ *
+ * @property {boolean} [disabled] - When true, prevents the user from interacting with the item.
+ * @property {string} [textValue] - Optional text used for typeahead purposes. By default, the typeahead behavior will use the .textContent of the item.
+ * @property {string} [className] - Additional CSS classes to apply.
+ *
+ * @dataAttribute {string} data-state - "open" | "closed"
+ * @dataAttribute {string} data-highlighted - Present when highlighted via keyboard navigation or hover
+ * @dataAttribute {string} data-disabled - Present when disabled
+ */
+type SubTriggerProps = ComponentProps<typeof DropdownMenuPrimitive.SubTrigger>;
+/**
+ * Props for the DropdownMenu SubContent component.
+ *
+ * @property {boolean} [loop=false] - When true, keyboard navigation will loop from last item to first, and vice versa.
+ * @property {number} [sideOffset=2] - The distance in pixels from the trigger.
+ * @property {number} [alignOffset=-5] - An offset in pixels from the "start" or "end" alignment options.
+ * @property {boolean} [avoidCollisions=true] - When true, overrides side and align to prevent collisions with boundary edges.
+ * @property {Element | null} [collisionBoundary] - The element used as the collision boundary.
+ * @property {number} [collisionPadding=0] - The distance in pixels from the boundary edges where collision detection should occur.
+ * @property {string} [className] - Additional CSS classes to apply.
+ *
+ * @dataAttribute {string} data-state - "open" | "closed"
+ * @dataAttribute {string} data-side - "top" | "right" | "bottom" | "left"
+ * @dataAttribute {string} data-align - "start" | "end" | "center"
+ *
+ * @cssVariable --radix-dropdown-menu-content-transform-origin - The transform origin based on content side
+ * @cssVariable --radix-dropdown-menu-content-available-width - The available width before overflow
+ * @cssVariable --radix-dropdown-menu-content-available-height - The available height before overflow
+ */
+type SubContentProps = ComponentProps<typeof DropdownMenuPrimitive.SubContent>;
+/**
+ * DropdownMenu is the compound component for attaching a menu of secondary
+ * actions to a button or icon trigger — edit/duplicate/delete rows, account
+ * menus, overflow affordances, and nested submenus. Built on Radix UI's
+ * DropdownMenu primitive, so keyboard navigation, focus trapping, typeahead,
+ * and viewport-collision detection come for free.
+ *
+ * Compose it from `Root` / `Trigger` / `Portal` / `Content` and fill the
+ * menu with `Item`, `Separator`, `Label`, and — for nested flows — `Sub` /
+ * `SubTrigger` / `SubContent`. Wrap content in `Portal` so the menu escapes
+ * ancestor `overflow:hidden` and z-index stacking contexts.
+ *
+ * Do **not** use DropdownMenu for primary navigation (use a real nav menu),
+ * for single-choice form input (use a `Select`), or for command palettes
+ * (use a dedicated command component). For radio/checkbox-style toggles,
+ * use Radix's `CheckboxItem` / `RadioItem` primitives directly — those
+ * parts are not exposed here yet.
+ *
+ * @summary Compound overlay menu for secondary actions, grouped items, and submenus
+ *
+ * @see {@link https://www.radix-ui.com/primitives/docs/components/dropdown-menu|Radix UI DropdownMenu}
+ *
+ * @example
+ * ```tsx
+ * import { DropdownMenu } from '@agentero/design-system/dropdown-menu';
+ *
+ * <DropdownMenu.Root>
+ *   <DropdownMenu.Trigger>
+ *     <IconMoreVert />
+ *   </DropdownMenu.Trigger>
+ *
+ *   <DropdownMenu.Portal>
+ *     <DropdownMenu.Content side="bottom" align="end">
+ *       <DropdownMenu.Label>Actions</DropdownMenu.Label>
+ *
+ *       <DropdownMenu.Item onSelect={() => handleEdit()}>
+ *         <IconEdit />
+ *         Edit
+ *       </DropdownMenu.Item>
+ *
+ *       <DropdownMenu.Sub>
+ *         <DropdownMenu.SubTrigger>Share</DropdownMenu.SubTrigger>
+ *         <DropdownMenu.Portal>
+ *           <DropdownMenu.SubContent>
+ *             <DropdownMenu.Item>Email</DropdownMenu.Item>
+ *             <DropdownMenu.Item>Slack</DropdownMenu.Item>
+ *           </DropdownMenu.SubContent>
+ *         </DropdownMenu.Portal>
+ *       </DropdownMenu.Sub>
+ *
+ *       <DropdownMenu.Separator />
+ *
+ *       <DropdownMenu.Item
+ *         onSelect={() => handleDelete()}
+ *         disabled={!canDelete}
+ *       >
+ *         <IconDelete />
+ *         Delete
+ *       </DropdownMenu.Item>
+ *     </DropdownMenu.Content>
+ *   </DropdownMenu.Portal>
+ * </DropdownMenu.Root>
+ * ```
+ *
+ * @component
+ * @namespace DropdownMenu
+ */
+export declare const DropdownMenu: {
+    /**
+     * The root container component for the dropdown menu.
+     * @see {@link Root}
+     */
+    Root: {
+        (props: RootProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * The button that toggles the dropdown menu.
+     * @see {@link Trigger}
+     */
+    Trigger: {
+        ({ className, ...props }: TriggerProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * Portals the content to the body element.
+     * @see {@link Portal}
+     */
+    Portal: import('react').FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
+    /**
+     * The popup component containing menu items.
+     * @see {@link Content}
+     */
+    Content: {
+        ({ className, hasTriggerWidth, sideOffset, ...props }: ContentProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * An individual menu item.
+     * @see {@link Item}
+     */
+    Item: {
+        ({ className, ...props }: ItemProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * A visual divider between menu items.
+     * @see {@link Separator}
+     */
+    Separator: {
+        ({ className, ...props }: SeparatorProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * A non-interactive label for menu sections.
+     * @see {@link Label}
+     */
+    Label: {
+        ({ className, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * Container for submenu parts.
+     * @see {@link Sub}
+     */
+    Sub: {
+        (props: SubProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * An item that opens a submenu.
+     * @see {@link SubTrigger}
+     */
+    SubTrigger: {
+        ({ className, children, ...props }: SubTriggerProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * The popup component for submenu items.
+     * @see {@link SubContent}
+     */
+    SubContent: {
+        ({ className, sideOffset, alignOffset, ...props }: SubContentProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export {};

package/src/dropdown-menu/dropdown-menu.js

@@ -0,0 +1,111 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { IconArrowRight as t } from "./icons.js";
+import { tv as n } from "tailwind-variants";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import * as a from "@radix-ui/react-dropdown-menu";
+//#region src/dropdown-menu/dropdown-menu.tsx
+var o = (e) => /* @__PURE__ */ r(a.Root, {
+	"data-slot": "dropdown-menu-root",
+	...e
+});
+o.displayName = "DropdownMenu.Root";
+var s = ({ className: t, ...n }) => /* @__PURE__ */ r(a.Trigger, {
+	"data-slot": "dropdown-menu-trigger",
+	className: e("cursor-pointer outline-none focus:outline-none", t),
+	...n
+});
+s.displayName = "DropdownMenu.Trigger";
+var c = a.Portal, l = n({
+	base: [
+		"z-[1000] flex flex-col rounded-lg bg-bg-default-base-primary p-1 shadow-xl",
+		"border border-border-default-base-primary",
+		"will-change-[transform,opacity]",
+		"data-[state=open]:animate-[dropdownSlideIn_200ms_ease-out]",
+		"data-[state=closed]:animate-[dropdownSlideOut_150ms_ease-in]",
+		"data-[side=bottom]:origin-top",
+		"data-[side=left]:origin-right",
+		"data-[side=right]:origin-left",
+		"data-[side=top]:origin-bottom",
+		"data-[side=bottom]:animate-[dropdownSlideInFromTop_200ms_ease-out]",
+		"data-[side=left]:animate-[dropdownSlideInFromRight_200ms_ease-out]",
+		"data-[side=right]:animate-[dropdownSlideInFromLeft_200ms_ease-out]",
+		"data-[side=top]:animate-[dropdownSlideInFromBottom_200ms_ease-out]"
+	],
+	variants: { hasTriggerWidth: { true: "w-[var(--radix-dropdown-menu-trigger-width)]" } }
+}), u = ({ className: e, hasTriggerWidth: t = !1, sideOffset: n = 8, ...i }) => /* @__PURE__ */ r(a.Content, {
+	"data-slot": "dropdown-menu-content",
+	sideOffset: n,
+	className: l({
+		hasTriggerWidth: t,
+		className: e
+	}),
+	...i
+});
+u.displayName = "DropdownMenu.Content";
+var d = ({ className: t, ...n }) => /* @__PURE__ */ r(a.Item, {
+	"data-slot": "dropdown-menu-item",
+	className: e("flex items-center gap-2 bg-bg-default-base-primary px-3 py-1.75 text-sm text-text-default-base-primary", "cursor-pointer rounded-md no-underline transition-colors outline-none", "min-w-40", "data-highlighted:bg-bg-default-base-primary-hover", "data-disabled:pointer-events-none data-disabled:cursor-not-allowed", "data-disabled:text-text-default-disable-primary", "data-disabled:active:bg-bg-default-base-primary", "[&>svg]:h-6", "[&_path]:fill-icon-default-base-tertiary", t),
+	...n
+});
+d.displayName = "DropdownMenu.Item";
+var f = ({ className: t, ...n }) => /* @__PURE__ */ r(a.Separator, {
+	"data-slot": "dropdown-menu-divider",
+	className: e("-mx-1 my-1 w-[calc(100%+0.5rem)] border-t border-border-menu-divider", t),
+	...n
+});
+f.displayName = "DropdownMenu.Separator";
+var p = ({ className: t, ...n }) => /* @__PURE__ */ r(a.Label, {
+	"data-slot": "dropdown-menu-label",
+	className: e("px-3 py-1 text-xs text-text-default-base-tertiary", t),
+	...n
+});
+p.displayName = "DropdownMenu.Label";
+var m = (e) => /* @__PURE__ */ r(a.Sub, {
+	"data-slot": "dropdown-menu-sub",
+	...e
+});
+m.displayName = "DropdownMenu.Sub";
+var h = ({ className: n, children: o, ...s }) => /* @__PURE__ */ i(a.SubTrigger, {
+	"data-slot": "dropdown-menu-sub-trigger",
+	className: e("flex items-center gap-2 bg-bg-default-base-primary px-3 py-1.75 text-sm text-text-default-base-primary", "cursor-pointer rounded-md no-underline transition-colors outline-none", "min-w-40", "data-highlighted:bg-bg-default-base-primary-hover", "data-[state=open]:bg-bg-default-base-primary-hover", "data-disabled:pointer-events-none data-disabled:cursor-not-allowed", "data-disabled:text-text-default-disable-primary", "[&>svg]:h-6", "[&_path]:fill-icon-default-base-tertiary", n),
+	...s,
+	children: [o, /* @__PURE__ */ r(t, { className: "ml-auto h-4 w-4 [&>path]:fill-icon-default-base-tertiary" })]
+});
+h.displayName = "DropdownMenu.SubTrigger";
+var g = n({ base: [
+	"z-[1000] flex flex-col rounded-lg bg-bg-default-base-primary p-1 shadow-xl",
+	"border border-border-default-base-primary",
+	"will-change-[transform,opacity]",
+	"data-[state=open]:animate-[dropdownSlideIn_200ms_ease-out]",
+	"data-[state=closed]:animate-[dropdownSlideOut_150ms_ease-in]",
+	"data-[side=bottom]:origin-top",
+	"data-[side=left]:origin-right",
+	"data-[side=right]:origin-left",
+	"data-[side=top]:origin-bottom",
+	"data-[side=bottom]:animate-[dropdownSlideInFromTop_200ms_ease-out]",
+	"data-[side=left]:animate-[dropdownSlideInFromRight_200ms_ease-out]",
+	"data-[side=right]:animate-[dropdownSlideInFromLeft_200ms_ease-out]",
+	"data-[side=top]:animate-[dropdownSlideInFromBottom_200ms_ease-out]"
+] }), _ = ({ className: e, sideOffset: t = 2, alignOffset: n = -5, ...i }) => /* @__PURE__ */ r(a.SubContent, {
+	"data-slot": "dropdown-menu-sub-content",
+	sideOffset: t,
+	alignOffset: n,
+	className: g({ className: e }),
+	...i
+});
+_.displayName = "DropdownMenu.SubContent";
+var v = {
+	Root: o,
+	Trigger: s,
+	Portal: c,
+	Content: u,
+	Item: d,
+	Separator: f,
+	Label: p,
+	Sub: m,
+	SubTrigger: h,
+	SubContent: _
+};
+//#endregion
+export { v as DropdownMenu };

package/src/dropdown-menu/icons.d.ts

@@ -0,0 +1,9 @@
+import { SVGProps } from 'react';
+/**
+ * Right-arrow indicator rendered inside `DropdownMenu.SubTrigger` to signal
+ * that a submenu will open. Fill color is supplied by the surrounding class
+ * (`[&>path]:fill-...`) so the icon inherits the trigger's color token.
+ *
+ * @summary 24px arrow-right icon used as the submenu affordance
+ */
+export declare const IconArrowRight: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/src/dropdown-menu/icons.js

@@ -0,0 +1,13 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/dropdown-menu/icons.tsx
+var t = (t) => /* @__PURE__ */ e("svg", {
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	...t,
+	children: /* @__PURE__ */ e("path", { d: "M10.25 9.92397C10.25 9.51885 10.4349 9.23841 10.8048 9.08264C11.1747 8.92688 11.5019 8.9913 11.7865 9.27592L14.0211 11.5105C14.1147 11.6041 14.1833 11.7028 14.2269 11.8066C14.2705 11.9105 14.2922 12.0227 14.2922 12.1432C14.2922 12.2637 14.2705 12.3759 14.2269 12.4797C14.1833 12.5836 14.1147 12.6823 14.0211 12.7759L11.7865 15.0105C11.5019 15.2951 11.1747 15.3595 10.8048 15.2037C10.4349 15.048 10.25 14.7675 10.25 14.3624L10.25 9.92397Z" })
+});
+//#endregion
+export { t as IconArrowRight };

package/src/dropdown-menu/index.d.ts

@@ -0,0 +1 @@
+export { DropdownMenu } from './dropdown-menu';

package/src/dropdown-menu/index.js

@@ -0,0 +1,2 @@
+import { DropdownMenu as e } from "./dropdown-menu.js";
+export { e as DropdownMenu };

package/theme/base.css

@@ -385,6 +385,8 @@
 
 	--color-border-default-disable-primary: var(--color-slate-100);
 
+	--color-border-menu-divider: #ebebef;
+
 	/* Text Tokens */
 	--color-text-input-normal: var(--color-slate-800);
 	--color-text-input-disable: var(--color-slate-300);
@@ -659,21 +661,21 @@
 	--color-icon-alert-ghost-dynamic: var(--color-orange-700);
 	--color-icon-alert-ghost-playful: var(--color-pink-600);
 
-  /* ========================================
+	/* ========================================
     * TOAST
     * ======================================== */
 
-  /* Rail — colored left strip painted on expanded-layout toasts */
-  --color-rail-neutral: var(--color-neutrals-200);
-  --color-rail-success: var(--color-positive-500);
-  --color-rail-danger: var(--color-danger-500);
-  --color-rail-warning: var(--color-warning-500);
-  --color-rail-info: var(--color-blue-600);
-
-  /* Focus Ring */
-  --color-focus-ring-button-primary: var(--color-slate-800);
-  --color-focus-ring-button-destructive: var(--color-danger-500);
-  
+	/* Rail — colored left strip painted on expanded-layout toasts */
+	--color-rail-neutral: var(--color-neutrals-200);
+	--color-rail-success: var(--color-positive-500);
+	--color-rail-danger: var(--color-danger-500);
+	--color-rail-warning: var(--color-warning-500);
+	--color-rail-info: var(--color-blue-600);
+
+	/* Focus Ring */
+	--color-focus-ring-button-primary: var(--color-slate-800);
+	--color-focus-ring-button-destructive: var(--color-danger-500);
+
 	/* ========================================
     * STATUS BALL
     * ======================================== */
@@ -758,12 +760,29 @@
 	--animate-cmd-content-in: cmd-content-in 200ms cubic-bezier(0.23, 1, 0.32, 1);
 	--animate-cmd-content-out: cmd-content-out 150ms ease-in forwards;
 	--animate-fade-in: fadeIn 0.3s forwards;
+	--animate-dropdown-slide-in: dropdownSlideIn 200ms ease-out;
+	--animate-dropdown-slide-out: dropdownSlideOut 150ms ease-in;
+	--animate-dropdown-slide-in-from-top: dropdownSlideInFromTop 200ms ease-out;
+	--animate-dropdown-slide-in-from-bottom: dropdownSlideInFromBottom 200ms ease-out;
+	--animate-dropdown-slide-in-from-left: dropdownSlideInFromLeft 200ms ease-out;
+	--animate-dropdown-slide-in-from-right: dropdownSlideInFromRight 200ms ease-out;
 
 	/* ========================================
     * Z-INDEX
     * ======================================== */
 
-	--z-index-modal: 1005;
+	--z-index-hide: -1;
+	--z-index-base: 0;
+	--z-index-docked: 10;
+	--z-index-floating: 1000;
+	--z-index-sticky: 1100;
+	--z-index-banner: 1200;
+	--z-index-overlay: 1300;
+	--z-index-modal: 1400;
+	--z-index-flyover: 1500;
+	--z-index-skip-nav: 1600;
+	--z-index-toast: 1700;
+	--z-index-tooltip: 1800;
 
 	/* ========================================
     * BREAKPOINTS
@@ -873,6 +892,72 @@
 		}
 	}
 
+	@keyframes dropdownSlideIn {
+		0% {
+			opacity: 0;
+			transform: scale(0.9);
+		}
+		100% {
+			opacity: 1;
+			transform: scale(1);
+		}
+	}
+
+	@keyframes dropdownSlideOut {
+		0% {
+			opacity: 1;
+			transform: scale(1);
+		}
+		100% {
+			opacity: 0;
+			transform: scale(0.9);
+		}
+	}
+
+	@keyframes dropdownSlideInFromTop {
+		0% {
+			opacity: 0;
+			transform: translateY(-0.5rem) scale(0.9);
+		}
+		100% {
+			opacity: 1;
+			transform: translateY(0) scale(1);
+		}
+	}
+
+	@keyframes dropdownSlideInFromBottom {
+		0% {
+			opacity: 0;
+			transform: translateY(0.5rem) scale(0.9);
+		}
+		100% {
+			opacity: 1;
+			transform: translateY(0) scale(1);
+		}
+	}
+
+	@keyframes dropdownSlideInFromLeft {
+		0% {
+			opacity: 0;
+			transform: translateX(-0.5rem) scale(0.9);
+		}
+		100% {
+			opacity: 1;
+			transform: translateX(0) scale(1);
+		}
+	}
+
+	@keyframes dropdownSlideInFromRight {
+		0% {
+			opacity: 0;
+			transform: translateX(0.5rem) scale(0.9);
+		}
+		100% {
+			opacity: 1;
+			transform: translateX(0) scale(1);
+		}
+	}
+
 	html {
 		/* body.md textStyle from Panda → text-base */
 		font-size: var(--text-base);