@cl-light-ds/ui 0.1.0

package/src/components/dropdown-menu/DropdownMenu.astro

@@ -0,0 +1,226 @@
+---
+/**
+ * @component DropdownMenu
+ * @title Dropdown Menu
+ * @description Action and selection menus with runtime-owned open, highlight, and committed selection state.
+ *@figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=2329-6521
+ * 
+ * @preview
+ * <DropdownMenu defaultValue="pro">
+ *   <DropdownMenuTrigger variant="outline">Open</DropdownMenuTrigger>
+ *   <DropdownMenuContent align="start">
+ *     <DropdownMenuLabel>Plans</DropdownMenuLabel>
+ *     <DropdownMenuGroup>
+ *       <DropdownMenuRadioItem value="starter">Starter</DropdownMenuRadioItem>
+ *       <DropdownMenuRadioItem value="pro">Pro</DropdownMenuRadioItem>
+ *     </DropdownMenuGroup>
+ *   </DropdownMenuContent>
+ * </DropdownMenu>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import {
+ *   DropdownMenu,
+ *   DropdownMenuTrigger,
+ *   DropdownMenuContent,
+ *   DropdownMenuItem,
+ *   DropdownMenuRadioItem,
+ * } from '@bejamas/ui/components/dropdown-menu';
+ * ---
+ *
+ * <DropdownMenu>
+ *   <DropdownMenuTrigger variant="outline">Menu</DropdownMenuTrigger>
+ *   <DropdownMenuContent>
+ *     <DropdownMenuItem>Item 1</DropdownMenuItem>
+ *   </DropdownMenuContent>
+ * </DropdownMenu>
+ * ```
+ *
+ * @api
+ *
+ * ### Events
+ *
+ * The dropdown menu emits custom events that you can listen to:
+ *
+ * | Event | Detail | Description |
+ * |-------|--------|-------------|
+ * | `dropdown-menu:open-change` | `{ open, previousOpen, source, reason }` | Fired on real open-state changes |
+ * | `dropdown-menu:change` | same detail | Deprecated alias for `dropdown-menu:open-change` |
+ * | `dropdown-menu:highlight-change` | `{ value, previousValue, item, previousItem, source }` | Fired when highlight changes |
+ * | `dropdown-menu:select` | `{ value, item, itemType, source, checked? }` | Cancelable user activation event fired before commit |
+ * | `dropdown-menu:value-change` | `{ value, previousValue, item, previousItem, source }` | Fired when radio selection commits |
+ * | `dropdown-menu:values-change` | `{ values, previousValues, changedValue, checked, item, source }` | Fired when checkbox selection commits |
+ *
+ * ```astro nocollapse
+ * <DropdownMenu id="my-dropdown" defaultValue="edit">
+ *   <DropdownMenuTrigger>Menu</DropdownMenuTrigger>
+ *   <DropdownMenuContent>
+ *     <DropdownMenuRadioItem value="edit">Edit</DropdownMenuRadioItem>
+ *     <DropdownMenuRadioItem value="delete">Delete</DropdownMenuRadioItem>
+ *   </DropdownMenuContent>
+ * </DropdownMenu>
+ * ```
+ *
+ * ```js nocollapse
+ *   const dropdown = document.getElementById('my-dropdown');
+ *
+ *   dropdown.addEventListener('dropdown-menu:open-change', (e) => {
+ *     console.log('Is open:', e.detail.open);
+ *   });
+ *
+ *   dropdown.addEventListener('dropdown-menu:value-change', (e) => {
+ *     console.log('Selected:', e.detail.value);
+ *   });
+ * ```
+ *
+ * ### Programmatic Control
+ *
+ * You can control the dropdown menu programmatically by dispatching a `dropdown-menu:set` event:
+ *
+ * ```js nocollapse
+ * const dropdown = document.getElementById('my-dropdown');
+ *
+ * // Open the dropdown menu
+ * dropdown.dispatchEvent(new CustomEvent('dropdown-menu:set', {
+ *   detail: { open: true }
+ * }));
+ *
+ * // Commit radio selection
+ * dropdown.dispatchEvent(new CustomEvent('dropdown-menu:set', {
+ *   detail: { value: 'delete', source: 'restore' }
+ * }));
+ *
+ * // Commit checkbox selection
+ * dropdown.dispatchEvent(new CustomEvent('dropdown-menu:set', {
+ *   detail: { values: ['email', 'push'], source: 'restore' }
+ * }));
+ * ```
+ *
+ * ### Structural Wrappers
+ *
+ * `DropdownMenuPortal` and `DropdownMenuRadioGroup` are available for low-level authored markup.
+ * Most consumers should keep using `DropdownMenuContent` directly.
+ *
+ * ### Data Attributes
+ *
+ * The dropdown menu sets these data attributes that you can use for styling or querying state:
+ *
+ * | Attribute | Element | Description |
+ * |-----------|---------|-------------|
+ * | `data-state` | dropdown-menu, dropdown-menu-content | Current state (`open` or `closed`) |
+ * | `data-value` | dropdown-menu | Current committed radio value |
+ * | `data-variant` | dropdown-menu-item | Visual variant (`default` or `destructive`) |
+ * | `data-side` | dropdown-menu-content | Computed position (`top`, `right`, `bottom`, or `left`) |
+ * | `data-align` | dropdown-menu-content | Alignment (`start`, `center`, or `end`) |
+ * | `data-highlighted` | menu items | Present when item is focused |
+ * | `data-checked` | radio and checkbox items | Present when item is committed as checked |
+ * | `data-disabled` | menu items | Present when item is disabled |
+ *
+ * @examples
+ *
+ * ### Action Menu
+ *
+ * <DropdownMenu>
+ *   <Button variant="outline" data-slot="dropdown-menu-trigger" class="">Account</Button>
+ *   <DropdownMenuContent>
+ *     <DropdownMenuLabel>Actions</DropdownMenuLabel>
+ *     <DropdownMenuGroup>
+ *       <DropdownMenuItem>Edit</DropdownMenuItem>
+ *       <DropdownMenuItem>Duplicate</DropdownMenuItem>
+ *     </DropdownMenuGroup>
+ *     <DropdownMenuSeparator />
+ *     <DropdownMenuItem>Delete</DropdownMenuItem>
+ *   </DropdownMenuContent>
+ * </DropdownMenu>
+ *
+ * ### Single Select
+ *
+ * <DropdownMenu defaultValue="pro">
+ *   <Button variant="outline" data-slot="dropdown-menu-trigger" class="">Plan</Button>
+ *   <DropdownMenuContent>
+ *     <DropdownMenuRadioItem value="starter">Starter</DropdownMenuRadioItem>
+ *     <DropdownMenuRadioItem value="pro">Pro</DropdownMenuRadioItem>
+ *     <DropdownMenuRadioItem value="team">Team</DropdownMenuRadioItem>
+ *   </DropdownMenuContent>
+ * </DropdownMenu>
+ *
+ * ### Multi Select
+ *
+ * <DropdownMenu defaultValues={["email", "push"]} closeOnSelect={false}>
+ *   <Button variant="outline" data-slot="dropdown-menu-trigger" class="">Notifications</Button>
+ *   <DropdownMenuContent>
+ *     <DropdownMenuCheckboxItem value="email">Email</DropdownMenuCheckboxItem>
+ *     <DropdownMenuCheckboxItem value="sms">SMS</DropdownMenuCheckboxItem>
+ *     <DropdownMenuCheckboxItem value="push">Push</DropdownMenuCheckboxItem>
+ *   </DropdownMenuContent>
+ * </DropdownMenu>
+ */
+
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"div"> {
+  defaultOpen?: boolean;
+  defaultValue?: string | null;
+  defaultValues?: string[];
+  closeOnClickOutside?: boolean;
+  closeOnEscape?: boolean;
+  closeOnSelect?: boolean;
+  lockScroll?: boolean;
+  highlightItemOnHover?: boolean;
+  class?: string;
+}
+
+const {
+  defaultOpen,
+  defaultValue,
+  defaultValues,
+  closeOnClickOutside,
+  closeOnEscape,
+  closeOnSelect,
+  lockScroll,
+  highlightItemOnHover,
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+
+const hasProp = (name: keyof Props) =>
+  Object.prototype.hasOwnProperty.call(Astro.props, name);
+const defaultValuesJson =
+  defaultValues !== undefined ? JSON.stringify(defaultValues) : undefined;
+---
+
+<div
+  {...rest}
+  data-slot="dropdown-menu"
+  data-default-open={hasProp("defaultOpen") ? String(!!defaultOpen) : undefined}
+  data-default-value={defaultValue ?? undefined}
+  data-default-values={defaultValuesJson}
+  data-close-on-click-outside={
+    hasProp("closeOnClickOutside") ? String(!!closeOnClickOutside) : undefined
+  }
+  data-close-on-escape={
+    hasProp("closeOnEscape") ? String(!!closeOnEscape) : undefined
+  }
+  data-close-on-select={
+    hasProp("closeOnSelect") ? String(!!closeOnSelect) : undefined
+  }
+  data-lock-scroll={hasProp("lockScroll") ? String(!!lockScroll) : undefined}
+  data-highlight-item-on-hover={
+    hasProp("highlightItemOnHover")
+      ? String(!!highlightItemOnHover)
+      : undefined
+  }
+  class={cn("", "group/dropdown-menu relative inline-block", className)}
+>
+  <slot />
+</div>
+
+<script>
+  import { createDropdownMenu } from "@data-slot/dropdown-menu";
+  document
+    .querySelectorAll('[data-slot="dropdown-menu"]')
+    .forEach((el) => createDropdownMenu(el));
+</script>

package/src/components/dropdown-menu/DropdownMenuCheckboxItem.astro

@@ -0,0 +1,114 @@
+---
+/**
+ * @component DropdownMenuCheckboxItem
+ * @title Dropdown Menu Checkbox Item
+ * @description A real, interactive `menuitemcheckbox` row — checked state is tracked by the DropdownMenu runtime, not by this component.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=7392-10142
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { DropdownMenuCheckboxItem } from '@bejamas/ui/components/dropdown-menu';
+ * ---
+ *
+ * <DropdownMenuCheckboxItem value="email">Email</DropdownMenuCheckboxItem>
+ * ```
+ *
+ * For a purely decorative checkbox glyph on a plain, non-interactive row, use `DropdownMenuItem`'s
+ * own `showCheckbox`/`checked` props instead — this component is for real, runtime-managed selection.
+ */
+
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import { itemVariants } from "./dropdown-menu-item-variants";
+import DropdownMenuItemContent from "./DropdownMenuItemContent.astro";
+
+interface Props extends HTMLAttributes<"div"> {
+  disabled?: boolean;
+  inset?: boolean;
+  value: string;
+  defaultChecked?: boolean;
+  leadingIcon?: boolean;
+  avatar?: boolean;
+  showBadge?: boolean;
+  showSubmenuIcon?: boolean;
+  supportiveText?: boolean;
+  class?: string;
+}
+
+const hasLeadingIconSlot = Astro.slots.has("leading-icon");
+const hasAvatarSlot = Astro.slots.has("avatar");
+const hasBadgeSlot = Astro.slots.has("badge");
+const hasSupportiveTextSlot = Astro.slots.has("supportive-text");
+
+const {
+  disabled = false,
+  inset = false,
+  value,
+  defaultChecked = false,
+  leadingIcon = hasLeadingIconSlot,
+  avatar = hasAvatarSlot,
+  showBadge = hasBadgeSlot,
+  showSubmenuIcon = false,
+  supportiveText = hasSupportiveTextSlot,
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  role="menuitemcheckbox"
+  tabindex={disabled ? -1 : 0}
+  data-slot="dropdown-menu-checkbox-item"
+  data-value={value}
+  data-disabled={disabled ? "" : undefined}
+  data-inset={inset ? "" : undefined}
+  data-default-checked={defaultChecked ? "" : undefined}
+  class={cn(itemVariants({ variant: "default" }), className)}
+>
+  <DropdownMenuItemContent
+    hasLeadingControl
+    leadingIcon={leadingIcon}
+    avatar={avatar}
+    showBadge={showBadge}
+    showSubmenuIcon={showSubmenuIcon}
+    supportiveText={supportiveText}
+  >
+    <span
+      slot="leading-control"
+      data-slot="dropdown-menu-checkbox-item-indicator"
+      class="border-input group-data-checked/dropdown-menu-item:border-primary group-data-checked/dropdown-menu-item:bg-primary relative flex size-5 shrink-0 items-center justify-center rounded-sm border transition-colors"
+      aria-hidden="true"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        class="text-primary-foreground size-3.5 opacity-0 transition-opacity group-data-checked/dropdown-menu-item:opacity-100"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M20 6L9 17l-5-5"
+        />
+      </svg>
+    </span>
+    <slot />
+    <Fragment slot="supportive-text">
+      <slot name="supportive-text" />
+    </Fragment>
+    <Fragment slot="leading-icon">
+      <slot name="leading-icon" />
+    </Fragment>
+    <Fragment slot="avatar">
+      <slot name="avatar" />
+    </Fragment>
+    <Fragment slot="badge">
+      <slot name="badge" />
+    </Fragment>
+  </DropdownMenuItemContent>
+</div>

package/src/components/dropdown-menu/DropdownMenuContent.astro

@@ -0,0 +1,42 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"div"> {
+  align?: "start" | "center" | "end";
+  alignOffset?: number;
+  side?: "top" | "bottom" | "left" | "right";
+  sideOffset?: number;
+  class?: string;
+}
+
+const {
+  align = "start",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<div data-slot="dropdown-menu-portal">
+  <div data-slot="dropdown-menu-positioner" class="isolate z-50 outline-none">
+    <div
+      {...rest}
+      hidden
+      data-slot="dropdown-menu-content"
+      data-align={align}
+      data-align-offset={alignOffset}
+      data-side={side}
+      data-side-offset={sideOffset}
+      class={cn(
+        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border bg-popover text-popover-foreground flex min-w-32 flex-col gap-1.5 rounded-lg border p-2 shadow-[0.3px_2px_4px_-2.2px_#1F003B05,0.5px_3.2px_3px_-1.4px_#1F003B08,0.7px_4px_2.5px_-1.8px_#1F003B0F] duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 max-h-[var(--available-height)] w-[var(--anchor-width)] origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-[state=closed]:overflow-hidden no-scrollbar overscroll-none",
+        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+    >
+      <slot />
+    </div>
+  </div>
+</div>

package/src/components/dropdown-menu/DropdownMenuGroup.astro

@@ -0,0 +1,19 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  role="group"
+  data-slot="dropdown-menu-group"
+  class={cn("", "", className)}
+>
+  <slot />
+</div>

package/src/components/dropdown-menu/DropdownMenuItem.astro

@@ -0,0 +1,220 @@
+---
+/**
+ * @component DropdownMenuItem
+ * @title Dropdown Menu Item
+ * @description A selectable row inside a DropdownMenuContent, with optional leading icon/avatar/checkbox/radio and trailing badge/submenu affordance.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=7392-10142
+ *
+ * @preview
+ *
+ * <DropdownMenu defaultOpen>
+ *   <DropdownMenuTrigger variant="outline">Menu</DropdownMenuTrigger>
+ *   <DropdownMenuContent class="static block" align="start">
+ *     <DropdownMenuItem leadingIcon>
+ *       <UserIcon slot="leading-icon" />
+ *       Profile
+ *     </DropdownMenuItem>
+ *     <DropdownMenuItem supportiveText>
+ *       Export
+ *       <span slot="supportive-text">as CSV</span>
+ *     </DropdownMenuItem>
+ *     <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
+ *   </DropdownMenuContent>
+ * </DropdownMenu>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { DropdownMenuItem } from '@bejamas/ui/components/dropdown-menu';
+ * ---
+ *
+ * <DropdownMenuItem>Edit</DropdownMenuItem>
+ * ```
+ *
+ * @examples
+ *
+ * ### With leading icon
+ *
+ * <DropdownMenuItem leadingIcon>
+ *   <UserIcon slot="leading-icon" />
+ *   Profile
+ * </DropdownMenuItem>
+ *
+ * ### With avatar
+ *
+ * Pass an `<Avatar size="sm">` (24px) into the `avatar` slot — it already matches Figma's item avatar size, no extra sizing needed.
+ *
+ * <DropdownMenuItem avatar>
+ *   <Avatar size="sm" slot="avatar">
+ *     <AvatarImage src="https://github.com/thomkrupa.png" alt="Thom Krupa" />
+ *     <AvatarFallback>TK</AvatarFallback>
+ *   </Avatar>
+ *   Thom Krupa
+ * </DropdownMenuItem>
+ *
+ * ### With supportive text
+ *
+ * <DropdownMenuItem supportiveText>
+ *   Export
+ *   <span slot="supportive-text">as CSV</span>
+ * </DropdownMenuItem>
+ *
+ * ### With badge
+ *
+ * Pass a `<Badge size="sm">` into the `badge` slot.
+ *
+ * <DropdownMenuItem showBadge>
+ *   Notifications
+ *   <Badge size="sm" slot="badge">3</Badge>
+ * </DropdownMenuItem>
+ *
+ * ### With checkbox / radio (presentational only)
+ *
+ * `showCheckbox`/`showRadio` on `DropdownMenuItem` are decorative — they draw the glyph but do not
+ * manage checked/selected state or emit events. For a real, interactive `menuitemcheckbox`/`menuitemradio`
+ * row, use `DropdownMenuCheckboxItem`/`DropdownMenuRadioItem` instead.
+ *
+ * <DropdownMenuItem showCheckbox checked>Show hidden files</DropdownMenuItem>
+ * <DropdownMenuItem showRadio checked>Compact view</DropdownMenuItem>
+ *
+ * ### Submenu affordance
+ *
+ * `showSubmenuIcon` is cosmetic only in this release — it doesn't open a nested menu (no submenu infrastructure exists yet).
+ *
+ * <DropdownMenuItem showSubmenuIcon>More tools</DropdownMenuItem>
+ *
+ * ### Category
+ *
+ * Non-interactive section label. Pair with `DropdownMenuSeparator` if you want a divider below it.
+ *
+ * <DropdownMenuItem variant="category">Recent</DropdownMenuItem>
+ *
+ * ### Destructive
+ *
+ * <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
+ */
+
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import { itemVariants, type ItemVariant } from "./dropdown-menu-item-variants";
+import DropdownMenuItemContent from "./DropdownMenuItemContent.astro";
+
+interface Props extends HTMLAttributes<"div"> {
+  disabled?: boolean;
+  inset?: boolean;
+  value?: string;
+  variant?: ItemVariant;
+  checked?: boolean;
+  showCheckbox?: boolean;
+  showRadio?: boolean;
+  leadingIcon?: boolean;
+  avatar?: boolean;
+  showBadge?: boolean;
+  showSubmenuIcon?: boolean;
+  supportiveText?: boolean;
+  class?: string;
+}
+
+const hasLeadingIconSlot = Astro.slots.has("leading-icon");
+const hasAvatarSlot = Astro.slots.has("avatar");
+const hasBadgeSlot = Astro.slots.has("badge");
+const hasSupportiveTextSlot = Astro.slots.has("supportive-text");
+
+const {
+  disabled = false,
+  inset = false,
+  value,
+  variant = "default",
+  checked = false,
+  showCheckbox = false,
+  showRadio = false,
+  leadingIcon = hasLeadingIconSlot,
+  avatar = hasAvatarSlot,
+  showBadge = hasBadgeSlot,
+  showSubmenuIcon = false,
+  supportiveText = hasSupportiveTextSlot,
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+
+const isCategory = variant === "category";
+---
+
+<div
+  {...rest}
+  role={isCategory ? "presentation" : "menuitem"}
+  tabindex={isCategory || disabled ? -1 : 0}
+  data-slot="dropdown-menu-item"
+  data-value={value}
+  data-disabled={disabled ? "" : undefined}
+  data-inset={inset ? "" : undefined}
+  data-checked={checked ? "" : undefined}
+  data-variant={variant}
+  class={cn(itemVariants({ variant }), className)}
+>
+  <DropdownMenuItemContent
+    isCategory={isCategory}
+    hasLeadingControl={showCheckbox || showRadio}
+    leadingIcon={leadingIcon}
+    avatar={avatar}
+    showBadge={showBadge}
+    showSubmenuIcon={showSubmenuIcon}
+    supportiveText={supportiveText}
+  >
+    {
+      showCheckbox && (
+        <span
+          slot="leading-control"
+          data-slot="dropdown-menu-item-checkbox"
+          class={cn(
+            "border-input relative flex size-5 shrink-0 items-center justify-center rounded-sm border transition-colors",
+            checked && "border-primary bg-primary",
+          )}
+          aria-hidden="true"
+        >
+          {checked && (
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="text-primary-foreground size-3.5">
+              <path
+                fill="none"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M20 6L9 17l-5-5"
+              />
+            </svg>
+          )}
+        </span>
+      )
+    }
+    {
+      showRadio && (
+        <span
+          slot="leading-control"
+          data-slot="dropdown-menu-item-radio"
+          class={cn(
+            "border-input relative flex size-5 shrink-0 items-center justify-center rounded-full border transition-colors",
+            checked && "border-primary bg-primary",
+          )}
+          aria-hidden="true"
+        >
+          {checked && <span class="bg-primary-foreground size-2 rounded-full" />}
+        </span>
+      )
+    }
+    <slot />
+    <Fragment slot="supportive-text">
+      <slot name="supportive-text" />
+    </Fragment>
+    <Fragment slot="leading-icon">
+      <slot name="leading-icon" />
+    </Fragment>
+    <Fragment slot="avatar">
+      <slot name="avatar" />
+    </Fragment>
+    <Fragment slot="badge">
+      <slot name="badge" />
+    </Fragment>
+  </DropdownMenuItemContent>
+</div>