jsl-ui 10.0.5 → 10.1.0

package/docs/DropdownMenuComponent.md

@@ -0,0 +1,22 @@
+# DropdownMenuComponent
+
+```ts
+import { ButtonComponent, DropdownMenuComponent } from "jsl-ui";
+
+const actions = new DropdownMenuComponent({
+  content: "Actions", class: "jsl-button jsl-button-outline",
+  children: [
+    new ButtonComponent({ content: "Edit", type: "button", click: () => edit() }),
+    new ButtonComponent({ content: "Archive", type: "button", click: () => archive() })
+  ],
+  closeOnClick: true
+});
+```
+
+- `children`, `content`, `rawContent`, `class`, `style`, `tag`, `width`, `offsetX`, `disabled`, `title`, `closeOnClick`, `maxHeight`, `maxWidth`, `height`, and `onOpen` retain the corresponding dropdown-menu options. `DropdownMenuButtonComponent` is also exported as an alias.
+- The menu anchors to the trigger, opens below its start edge by default, flips above when needed, and stays within the viewport. `placement` selects `bottom-start`, `bottom-end`, `top-start`, or `top-end`; `offsetX` and `offsetY` adjust its position. Width defaults to `12rem`; height defaults to `max-content`.
+- `onOpen(options)` runs before each opening, so it can replace `options.children` with current items. Return `false` to cancel opening. `closeOnClick` defaults to `false` for menus that contain multiple toggles; set it to `true` to close after a menu click. Call `close()` to close programmatically.
+- A decorative chevron appears after the trigger by default and points upward while open. Set `showIndicator: false` when the trigger already has an overflow or dropdown indicator.
+- The trigger is a native `button` with `type="button"` by default. It exposes `aria-haspopup`, `aria-expanded`, and `aria-controls`. Native buttons and anchors in `children` become menu items; use `data-menu-item` on a custom interactive root to include it in menu keyboard navigation.
+- Enter or Space opens the trigger; Arrow Up/Down opens and focuses the last/first item. In the menu, Arrow keys move between enabled items, Home/End jump to the edges, type-ahead searches labels, Escape closes and restores trigger focus, and Tab exits the menu. Outside pointer or focus closes it without stealing focus. The popup repositions when the page scrolls or resizes.
+- `menuClass`, `menuStyle`, `menuLabel`, and `ariaLabel` customize the popup and trigger. A VNode is preferred for rich trigger content. Use `rawContent` only for trusted HTML strings.

package/docs/README.md

@@ -18,7 +18,9 @@ Guides for the public components exported by `jsl-ui`:
 - [StackPanelComponent](StackPanelComponent.md), [SplitterComponent](SplitterComponent.md)
 - [TreeViewComponent](TreeViewComponent.md), [NavigationComponent](NavigationComponent.md), [RibbonMenuComponent](RibbonMenuComponent.md)
 - [DialogComponent](DialogComponent.md), [OverlayComponent](OverlayComponent.md)
+- [DropdownMenuComponent](DropdownMenuComponent.md)
 - [Notification](Notification.md), [NotificationComponent](NotificationComponent.md)
 - [ProgressComponent](ProgressComponent.md), [LoadingComponent](LoadingComponent.md)
+- [SliderComponent](SliderComponent.md)
 - [GridComponent](GridComponent.md)
 - [IntervalComponent](IntervalComponent.md)

package/docs/SliderComponent.md

@@ -0,0 +1,20 @@
+# SliderComponent
+
+```ts
+import { SliderComponent } from "jsl-ui";
+
+const priceRange = new SliderComponent({
+  start: [25, 75], connect: true, step: 5,
+  range: { min: 0, max: 100 },
+  ariaLabel: ["Minimum price", "Maximum price"],
+  tooltips: true,
+  onChange: value => console.log(value)
+});
+```
+
+- `start` accepts one number or an array of handle values. `range` uses noUiSlider's range syntax; other supported noUiSlider 14.6 options can be passed alongside it.
+- By default, slider values are formatted and parsed with `numeric.format()` and `numeric.parse()`, using the active culture. Supply noUiSlider's `format` option to override this behavior.
+- `getValue()` returns a number for one handle and a numeric array for multiple handles. `setValue(value)` updates silently; pass `true` as the second argument to fire noUiSlider's `set` event.
+- `onUpdate`, `onSlide`, `onChange`, `onSet`, `onStart`, and `onEnd` receive `(value, handleIndex, allValues)`. `onUpdate` also runs during initialization; programmatic `setValue` does not trigger `onChange`.
+- `ariaLabel` names a single handle. Supply an array to name every handle in a multi-handle slider. `enabled` can be changed with `setEnabled()`.
+- `getRef()` returns the underlying noUiSlider instance for advanced use. The component destroys the slider when it is removed. Override `--jsl-slider-track` and `--jsl-slider-connect` to customize its colors.

package/examples/showcase/dates.ts

@@ -1,5 +1,5 @@
-import { IJSLComponent, IJSLVNode } from "jsl-render";
-import { noUiSlider } from "../../components/slider/nouislider";
+import { IJSLComponent, IJSLVNode, JSLRender } from "jsl-render";
+import { SliderComponent, ISliderValue } from "../../components/slider/SliderComponent";
 import { DateComponent } from "../../components/date/DateComponent";
 import { DateRangeComponent } from "../../components/date-range/DateRangeComponent";
 import { DateTimeComponent } from "../../components/date-time/DateTimeComponent";
@@ -20,40 +20,12 @@ const field = (id: string, label: string, control: Content) => group([
     { tag: "label", content: label, attr: { for: id } }, control
 ], "date-showcase-field");
 
-class SliderSample implements IJSLComponent {
-    private slider: any;
-    constructor(private options: { start: number[]; disabled?: boolean; vertical?: boolean; tooltips?: boolean; }) {}
-    render(): IJSLVNode {
-        return { tag: "div", attr: {
-            class: "showcase-slider" + (this.options.vertical ? " showcase-slider-vertical" : ""),
-            disabled: this.options.disabled ? "" : undefined
-        } };
-    }
-    onCreate(node: IJSLVNode) {
-        const count = this.options.start.length;
-        this.slider = noUiSlider.create(node.dom, {
-            start: this.options.start, range: { min: 0, max: 100 }, step: 1,
-            connect: count === 2 ? true : [true, false],
-            orientation: this.options.vertical ? "vertical" : "horizontal",
-            direction: this.options.vertical ? "rtl" : "ltr",
-            tooltips: this.options.tooltips ? { to: value => Math.round(value) + "%" } : false
-        });
-        node.dom.querySelectorAll<HTMLElement>("[role=slider]").forEach((handle, index) => {
-            handle.setAttribute("aria-label", count === 2 ? (index === 0 ? "Lower value" : "Upper value") : "Value");
-            if (this.options.disabled) {
-                handle.setAttribute("tabindex", "-1");
-                handle.setAttribute("aria-disabled", "true");
-            }
-        });
-        // Sibling nodes are available after the renderer finishes mounting.
-        Promise.resolve().then(() => this.slider?.on("update", values => {
-            const readout = node.dom.parentElement?.querySelector<HTMLElement>(".slider-readout");
-            if (readout) { readout.textContent = values.map(value => Math.round(+value) + "%").join(" – "); }
-        }));
-    }
-    onRemove() { this.slider?.destroy(); this.slider = null; }
-}
-
+const sliderValueText = (value: ISliderValue, suffix = "%") =>
+    (Array.isArray(value) ? value : [value]).map(part => Math.round(part) + suffix).join(" - ");
+const sliderChange = (target: IJSLVNode, prefix = "Current value: ", suffix = "%") => (value: ISliderValue) => {
+    target.content = prefix + sliderValueText(value, suffix);
+    JSLRender.lastCreatedRenderer?.refresh();
+};
 class CalendarSample implements IJSLComponent {
     private picker: IDatePicker;
     render(): IJSLVNode { return group([], "showcase-calendar"); }
@@ -81,22 +53,46 @@ function section(id: string, number: string, title: string, description: string,
         { tag: "details", attr: { class: "usage" }, children: [text("summary", title + " usage & compatibility"), ...usage] }
     ] };
 }
-const sliderPreview = group([new SliderSample({ start: [30, 75] }), text("span", "", "slider-readout")], "slider-sample");
+const sliderPreviewStatus = status("Current range: 30% - 75%");
+const sliderSingleStatus = status("Current value: 45%");
+const sliderRangeStatus = status("Selected budget: $25 - $70");
+const sliderPreview = group([new SliderComponent({
+    start: [30, 75], range: { min: 0, max: 100 }, connect: true, step: 1,
+    tooltips: true, ariaLabel: ["Minimum value", "Maximum value"], class: "showcase-slider",
+    onChange: sliderChange(sliderPreviewStatus, "Current range: ")
+}), sliderPreviewStatus], "slider-sample");
 export const sliderShowcase = section("sliders", "04", "Sliders",
     "A lighter track, a precise handle. Move a value or narrow a range.", sliderPreview, [
         card("slider-single", "01", "A single value", "Click the track, drag the handle, or use the arrow keys. Home and End reach the limits.", [
-            group([new SliderSample({ start: [45], tooltips: true }), text("span", "", "slider-readout")], "slider-sample slider-with-tooltip")
+            group([new SliderComponent({
+                start: 45, range: { min: 0, max: 100 }, step: 5, tooltips: true,
+                ariaLabel: "Notification volume", class: "showcase-slider",
+                onChange: sliderChange(sliderSingleStatus)
+            }), sliderSingleStatus], "slider-sample slider-with-tooltip")
+        ]),
+        card("slider-range", "02", "Ranges and formatting", "Connect the handles and format their tooltips while values stay numeric in callbacks.", [
+            new SliderComponent({
+                start: [25, 70], range: { min: 0, max: 100 }, connect: true, step: 5,
+                tooltips: [{ to: value => "$" + Math.round(value) }, { to: value => "$" + Math.round(value) }],
+                ariaLabel: ["Minimum budget", "Maximum budget"], class: "showcase-slider",
+                onChange: sliderChange(sliderRangeStatus, "Selected budget: ", "")
+            }), sliderRangeStatus
         ]),
-        card("slider-states", "02", "Different directions", "The same design supports vertical sliders and disabled controls.", [
-            group([new SliderSample({ start: [65], vertical: true }),
-                group([text("p", "Unavailable range", "inline-note"), new SliderSample({ start: [20, 80], disabled: true })], "slider-disabled-example")
+        card("slider-states", "03", "Different directions", "Vertical orientation and disabled state are available through component options.", [
+            group([new SliderComponent({
+                start: 65, range: { min: 0, max: 100 }, orientation: "vertical", direction: "rtl",
+                ariaLabel: "Vertical value", class: "showcase-slider-vertical"
+            }), group([text("p", "Unavailable range", "inline-note"), new SliderComponent({
+                start: [20, 80], range: { min: 0, max: 100 }, connect: true, enabled: false,
+                ariaLabel: ["Unavailable minimum", "Unavailable maximum"], class: "showcase-slider"
+            })], "slider-disabled-example")
             ], "slider-orientations")
         ])
     ], [
-        code('noUiSlider.create(element, {\n  start: [25, 75], connect: true, step: 1,\n  range: { min: 0, max: 100 }\n});'),
-        text("p", "The bundled noUiSlider API is preserved. Its CSS now uses the shared theme, including handles, tooltips, pips, and disabled states. Use aria-label on handles to describe their meaning. Override --jsl-slider-track and --jsl-slider-connect for a particular slider.")
+        code('new SliderComponent({\n  start: [25, 75], connect: true, step: 1,\n  range: { min: 0, max: 100 },\n  ariaLabel: ["Minimum value", "Maximum value"],\n  onChange: value => console.log(value)\n});'),
+        text("p", "SliderComponent wraps the bundled noUiSlider 14.6 API and destroys it when the component is removed. Values are numeric: getValue() returns a number for one handle and a number array for multiple handles. setValue(value) updates silently; pass true as its second argument to fire noUiSlider's set event. onUpdate runs on initialization and every update; onSlide runs while moving; onChange runs after user interaction. Each callback receives (value, handleIndex, allValues)."),
+        text("p", "Use ariaLabel for one handle or an ariaLabel array for multiple handles. enabled can be changed later with setEnabled(). getRef() exposes the underlying noUiSlider instance for its full API. Override --jsl-slider-track and --jsl-slider-connect to theme a slider.")
     ]);
-
 const dateStatus = status("Choose a day or enter a date.");
 const customStatus = status("Uses day/month/year formatting.");
 export const dateShowcase = section("dates", "05", "Dates",

package/examples/showcase/dropdown-menus.ts

@@ -0,0 +1,99 @@
+import { IJSLComponent, IJSLVNode, JSLRender } from "jsl-render";
+import { ButtonComponent } from "../../components/button/ButtonComponent";
+import { DropdownMenuComponent } from "../../components/dropdown-menu/DropdownMenuComponent";
+
+type Content = IJSLVNode | IJSLComponent;
+const text = (tag: string, content: string, className?: string): IJSLVNode => ({ tag, content, attr: { class: className } });
+const group = (children: Content[], className = "sample-row"): IJSLVNode => ({ tag: "div", attr: { class: className }, children });
+const status = (content: string): IJSLVNode => ({ tag: "p", content, attr: { class: "sample-status", role: "status" } });
+const action = (content: string, click: () => void) => new ButtonComponent({
+    content, type: "button", class: "jsl-button jsl-button-ghost", click
+});
+function card(id: string, number: string, title: string, description: string, children: Content[]): IJSLVNode {
+    return { tag: "article", attr: { class: "sample-card", id, "aria-labelledby": id + "-title" }, children: [
+        group([text("span", number, "sample-number"), { tag: "h3", content: title, attr: { id: id + "-title" } }], "card-heading"),
+        text("p", description, "card-description"), ...children
+    ] };
+}
+function updateMessage(target: IJSLVNode, message: string): void {
+    target.content = message;
+    JSLRender.lastCreatedRenderer?.refresh();
+}
+
+const previewStatus = status("Choose a menu action.");
+const dynamicStatus = status("Open the menu to refresh its items.");
+let openCount = 0;
+
+export const dropdownMenuShowcase: IJSLVNode = {
+    tag: "section", attr: { id: "dropdown-menus", class: "component-section", "aria-labelledby": "dropdown-menus-title" }, children: [
+        { tag: "div", attr: { class: "hero" }, children: [
+            { tag: "div", attr: { class: "hero-copy" }, children: [
+                text("p", "THE ESSENTIALS / 23", "eyebrow"),
+                { tag: "h2", content: "Dropdown menus", attr: { id: "dropdown-menus-title", class: "section-title" } },
+                text("p", "A button opens a compact list of actions, positioned where the button lives.", "hero-description")
+            ] },
+            { tag: "div", attr: { class: "hero-preview" }, children: [
+                text("span", "INTERACTIVE PREVIEW", "preview-caption"),
+                new DropdownMenuComponent({
+                    content: "Project actions", class: "jsl-button jsl-button-outline", menuLabel: "Project actions",
+                    children: [
+                        action("Edit project", () => updateMessage(previewStatus, "Edit project selected.")),
+                        action("Duplicate project", () => updateMessage(previewStatus, "Project duplicated.")),
+                        action("Archive project", () => updateMessage(previewStatus, "Project archived."))
+                    ],
+                    closeOnClick: true
+                }),
+                text("span", "Use Arrow Down to open and explore the menu.", "preview-note")
+            ] }
+        ] },
+        { tag: "div", attr: { class: "overview-bar" }, children: [
+            text("span", "Trigger-anchored", "overview-label"),
+            text("span", "Keyboard accessible", "overview-stat"),
+            text("span", "Dynamic items", "overview-stat")
+        ] },
+        { tag: "div", attr: { class: "sample-grid" }, children: [
+            card("dropdown-actions", "01", "Choose an action", "Menu items can be buttons or links. closeOnClick closes after selection and returns focus to the trigger.", [
+                group([new DropdownMenuComponent({
+                    content: "More actions", class: "jsl-button jsl-button-outline", menuLabel: "More actions",
+                    closeOnClick: true, placement: "bottom-start", width: "13rem",
+                    children: [
+                        action("Share", () => updateMessage(previewStatus, "Share selected.")),
+                        action("Copy link", () => updateMessage(previewStatus, "Link copied.")),
+                        action("Delete", () => updateMessage(previewStatus, "Delete selected."))
+                    ]
+                }), previewStatus])
+            ]),
+            card("dropdown-dynamic", "02", "Refresh items when opened", "Use onOpen to build a menu from current application data. Return false from the callback to veto opening.", [
+                group([new DropdownMenuComponent({
+                    content: "Recent reports", class: "jsl-button jsl-button-outline", menuLabel: "Recent reports",
+                    children: [], closeOnClick: true,
+                    onOpen: options => {
+                        openCount++;
+                        options.children = [
+                            action("Report " + openCount, () => updateMessage(dynamicStatus, "Report " + openCount + " opened.")),
+                            action("Refresh list", () => updateMessage(dynamicStatus, "Report list refreshed."))
+                        ];
+                    }
+                }), dynamicStatus])
+            ]),
+            card("dropdown-placement", "03", "Placement and disabled state", "The menu follows its trigger and adjusts near viewport edges. Custom trigger tags remain available for migration.", [
+                group([
+                    new DropdownMenuComponent({
+                        content: "Top aligned", class: "jsl-button jsl-button-outline", menuLabel: "Top aligned actions",
+                        placement: "top-end", offsetY: -4, children: [action("First action", () => updateMessage(dynamicStatus, "First action selected."))]
+                    }),
+                    new DropdownMenuComponent({
+                        content: "Unavailable", class: "jsl-button jsl-button-outline", disabled: true,
+                        children: [action("Hidden action", () => undefined)]
+                    })
+                ])
+            ])
+        ] },
+        { tag: "details", attr: { class: "usage" }, children: [
+            text("summary", "Dropdown menu usage & compatibility"),
+            text("pre", 'new DropdownMenuComponent({\n  content: "Actions", class: "jsl-button jsl-button-outline",\n  children: [new ButtonComponent({ content: "Edit", click: edit })],\n  closeOnClick: true,\n  onOpen: options => { options.children = buildCurrentItems(); }\n});', "sample-code"),
+            text("p", "The component retains the existing content, rawContent, children, tag, class, style, width, offsetX, disabled, title, closeOnClick, maxHeight, maxWidth, height, onOpen, and close() names. Menus are anchored to the trigger, flip and clamp to the viewport, and stay open by default to support multi-select actions."),
+            text("p", "Arrow Up/Down opens the menu and places focus on the first or last enabled item. Within the menu, Arrow keys, Home, End, type-ahead, Escape, and Tab are supported. Native button and anchor children receive menu item semantics; custom items can opt in with data-menu-item.")
+        ] }
+    ]
+};

package/examples/showcase/index.html

@@ -11,7 +11,7 @@
   <a class="skip-link" href="#main">Skip to components</a>
   <aside class="sidebar" aria-label="Component navigation">
     <a class="brand" href="#main"><span class="brand-mark">j.</span><span>JSL UI<span class="brand-caption">Component showcase</span></span></a>
-    <p class="nav-label">COMPONENTS <span>22</span></p>
+    <p class="nav-label">COMPONENTS <span>23</span></p>
     <nav>
       <a class="nav-item" href="#buttons" aria-current="location"><span class="nav-icon" aria-hidden="true">▣</span> Buttons <span class="nav-number">01</span></a>
       <a class="nav-item" href="#dialogs"><span class="nav-icon" aria-hidden="true">▢</span> Dialogs <span class="nav-number">02</span></a>
@@ -35,6 +35,7 @@
       <a class="nav-item" href="#overlays"><span class="nav-icon" aria-hidden="true">&#9703;</span> Overlays <span class="nav-number">20</span></a>
       <a class="nav-item" href="#ribbons"><span class="nav-icon" aria-hidden="true">&#9637;</span> Ribbon menus <span class="nav-number">21</span></a>
       <a class="nav-item" href="#grids"><span class="nav-icon" aria-hidden="true">&#9638;</span> Grids <span class="nav-number">22</span></a>
+      <a class="nav-item" href="#dropdown-menus"><span class="nav-icon" aria-hidden="true">&#8942;</span> Dropdown menus <span class="nav-number">23</span></a>
     </nav>
     <div class="sidebar-note"><span class="status-dot"></span> A growing collection<p>Redesigned components will be added here as the library evolves.</p></div>
   </aside>

package/examples/showcase/showcase.ts

@@ -10,6 +10,7 @@ import { inputShowcase, numberShowcase, formFieldShowcase } from "./fields";
 import { notificationShowcase, loadingShowcase, navigationShowcase } from "./feedback-and-navigation";
 import { progressShowcase, stackShowcase, treeShowcase, overlayShowcase, ribbonShowcase } from "./layout-and-navigation";
 import { sliderShowcase, dateShowcase, dateRangeShowcase, dateTimeShowcase } from "./dates";
+import { dropdownMenuShowcase } from "./dropdown-menus";
 import { IJSLComponent, IJSLVNode, JSLRender } from "jsl-render";
 import { ButtonComponent, IButtonOptions } from "../../components/button/ButtonComponent";
 
@@ -190,7 +191,7 @@ new JSLRender(document.getElementById("showcase"), true).render({
         group([node("span", "Overview", "overview-label"), node("span", "3 variants", "overview-stat"), node("span", "3 sizes", "overview-stat"), node("span", "Keyboard accessible", "overview-stat")], "overview-bar"),
         group(cards, "sample-grid"), usage
     ]
-    }, dialogShowcase, tabsShowcase, sliderShowcase, dateShowcase, dateRangeShowcase, dateTimeShowcase, selectShowcase, checkboxShowcase, expanderShowcase, inputShowcase, numberShowcase, formFieldShowcase, notificationShowcase, loadingShowcase, navigationShowcase, progressShowcase, stackShowcase, treeShowcase, overlayShowcase, ribbonShowcase, gridShowcase]
+    }, dialogShowcase, tabsShowcase, sliderShowcase, dateShowcase, dateRangeShowcase, dateTimeShowcase, selectShowcase, checkboxShowcase, expanderShowcase, inputShowcase, numberShowcase, formFieldShowcase, notificationShowcase, loadingShowcase, navigationShowcase, progressShowcase, stackShowcase, treeShowcase, overlayShowcase, ribbonShowcase, gridShowcase, dropdownMenuShowcase]
 });
 
 const navigation = Array.from(document.querySelectorAll<HTMLAnchorElement>(".nav-item"));

package/lib/components/dropdown-menu/DropdownMenuComponent.d.ts

@@ -0,0 +1,70 @@
+import "./DropdownMenuStyle.scss";
+import { IJSLComponent, IJSLVNode, JSLRender } from "jsl-render";
+export interface IDropdownMenuComponentOptions {
+    children: Array<IJSLVNode | IJSLComponent>;
+    content: string | IJSLVNode;
+    rawContent?: boolean;
+    class?: string;
+    style?: string;
+    tag?: string;
+    width?: string;
+    offsetX?: number;
+    offsetY?: number;
+    disabled?: boolean;
+    title?: string;
+    ariaLabel?: string;
+    menuLabel?: string;
+    showIndicator?: boolean;
+    closeOnClick?: boolean;
+    maxHeight?: string;
+    maxWidth?: string;
+    height?: string;
+    placement?: "bottom-start" | "bottom-end" | "top-start" | "top-end";
+    menuClass?: string;
+    menuStyle?: string;
+    type?: "button" | "submit" | "reset";
+    onOpen?: (options: IDropdownMenuComponentOptions) => void | boolean;
+}
+interface IDropdownMenuState {
+    id: string;
+    open: boolean;
+    trigger?: HTMLElement;
+    portal?: HTMLElement;
+    menu?: HTMLElement;
+    renderer?: JSLRender;
+    owner?: DropdownMenuComponent;
+    cleanup?: () => void;
+    typeahead?: string;
+    typeaheadTimer?: number;
+}
+type InitialFocus = "first" | "last" | "none";
+/** A button-like trigger that opens an anchored, keyboard-accessible menu. */
+export declare class DropdownMenuComponent implements IJSLComponent {
+    State: IDropdownMenuState;
+    private options;
+    constructor(options: IDropdownMenuComponentOptions);
+    isEqual(node: IJSLComponent): boolean;
+    render(): IJSLVNode;
+    onCreate(node: IJSLVNode): void;
+    onUpdate(node: IJSLVNode): void;
+    onRemove(): void;
+    /** Open the menu and move focus to its first or last enabled item. */
+    open(initialFocus?: InitialFocus): void;
+    toggle(): void;
+    /** Close the menu and restore focus to its trigger. */
+    close(): void;
+    private menuNode;
+    private onTriggerClick;
+    private onTriggerKeydown;
+    private onMenuKeydown;
+    private prepareMenuItems;
+    private menuItems;
+    private focusMenuItem;
+    private typeahead;
+    private moveFocusFromTrigger;
+    private positionMenu;
+    private inheritTheme;
+    private syncTrigger;
+    private closeInternal;
+}
+export { DropdownMenuComponent as DropdownMenuButtonComponent };