Menubar

package menubar

props {
  // Class adds classes to the root element.
  Class    string = ""
  // Children is the menus of the bar.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<div role="menubar" data-gx-roving="nowrap" class={gx.Cx("flex h-9 items-center gap-1 rounded-md border border-border bg-background p-1 shadow-xs", p.Class)} {...p.Attrs}>{p.Children}</div>

package menubar

import "github.com/alternayte/gx/registry/icons"

props {
  // Name is the name attribute of the checkbox input. A form or a signal reads it.
  Name     string = ""
  // Value is the value that the form sends when the item is checked.
  Value    string = "on"
  // Checked sets the item as checked on the first render.
  Checked  bool = false
  // Disabled turns the item off. The arrow keys pass it.
  Disabled bool = false
  // Class adds classes to the root element.
  Class    string = ""
  // Children is the label of the item.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<label class={gx.Cx("relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm select-none hover:bg-accent hover:text-accent-foreground has-[:focus]:bg-accent has-[:focus]:text-accent-foreground has-[:disabled]:pointer-events-none has-[:disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", p.Class)} {...p.Attrs}>
  <input type="checkbox" role="menuitemcheckbox" tabindex="-1" name={p.Name} value={p.Value} checked={p.Checked} disabled={p.Disabled} class="peer sr-only" {...rovingItem(p.Disabled)} />
  <span class="pointer-events-none invisible absolute left-2 flex size-3.5 items-center justify-center peer-checked:visible"><icons.Check class="size-4" /></span>
  {p.Children}
</label>

package menubar

props {
  // Label is the accessible name of the group. It is not visible.
  Label    string = ""
  // Class adds classes to the root element.
  Class    string = ""
  // Children is the items of the group.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<div role="group" aria-label={p.Label} class={p.Class} {...p.Attrs}>{p.Children}</div>

package menubar

props {
  // Variant sets the visual style: Default or Destructive.
  Variant  Variant = Default
  // Inset adds left padding, so the item lines up with the checkbox and radio items.
  Inset    bool = false
  // Disabled turns the item off. The arrow keys pass it.
  Disabled bool = false
  // Class adds classes to the root element.
  Class    string = ""
  // Children is the content of the item.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<button type="button" role="menuitem" tabindex="-1" disabled={p.Disabled} data-gx-close class={gx.Cx("relative flex w-full cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm outline-hidden select-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", variantClass[p.variant()], insetClass[p.Inset], p.Class)} {...rovingItem(p.Disabled)} {...p.Attrs}>{p.Children}</button>

package menubar

props {
  // Inset adds left padding, so the label lines up with the checkbox and radio items.
  Inset    bool = false
  // Class adds classes to the root element.
  Class    string = ""
  // Children is the text of the label.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<div role="presentation" class={gx.Cx("px-2 py-1.5 text-sm font-medium", insetClass[p.Inset], p.Class)} {...p.Attrs}>{p.Children}</div>

package menubar

props {
  // Href is the URL that the link opens.
  Href     gx.URL
  // Class adds classes to the root element.
  Class    string = ""
  // Children is the content of the link.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<a role="menuitem" tabindex="-1" href={p.Href} data-gx-roving-item data-gx-close class={gx.Cx("relative flex w-full cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm no-underline outline-hidden select-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", p.Class)} {...p.Attrs}>{p.Children}</a>

package menubar

props {
  // Id is the id of the menu element. The trigger in the bar opens the menu by this id.
  Id       string
  // Label is the text of the trigger in the bar. It is also the accessible name of the menu.
  Label    string
  // Class adds classes to the menu element.
  Class    string = ""
  // Children is the menu items.
  Children gx.Node
  // Attrs adds HTML attributes to the menu element.
  Attrs    gx.Attrs = nil
}

<button type="button" role="menuitem" aria-haspopup="menu" popovertarget={p.Id} data-gx-roving-item style={p.triggerStyle()} class="flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground has-[+:popover-open]:bg-accent has-[+:popover-open]:text-accent-foreground">{p.Label}</button>
<div id={p.Id} popover="auto" role="menu" aria-label={p.Label} data-gx-dismiss data-gx-roving="nowrap" data-gx-place="bottom start 8 -4" style={p.contentStyle()} class={gx.Cx("z-50 min-w-[12rem] origin-top-left data-[side=top]:origin-bottom-left overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md outline-hidden", motionClass, p.Class)} {...p.Attrs}>{p.Children}</div>

package menubar

props {
  // Label is the accessible name of the group. It is not visible.
  Label    string = ""
  // Class adds classes to the root element.
  Class    string = ""
  // Children is the radio items of the group.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<div role="group" aria-label={p.Label} class={p.Class} {...p.Attrs}>{p.Children}</div>

package menubar

import "github.com/alternayte/gx/registry/icons"

props {
  // Name is the name attribute of the radio input. The radio items of one group share
  // the same name.
  Name     string = ""
  // Value is the value that the form sends when the item is checked.
  Value    string = ""
  // Checked sets the item as checked on the first render.
  Checked  bool = false
  // Disabled turns the item off. The arrow keys pass it.
  Disabled bool = false
  // Class adds classes to the root element.
  Class    string = ""
  // Children is the label of the item.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<label class={gx.Cx("relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm select-none hover:bg-accent hover:text-accent-foreground has-[:focus]:bg-accent has-[:focus]:text-accent-foreground has-[:disabled]:pointer-events-none has-[:disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", p.Class)} {...p.Attrs}>
  <input type="radio" role="menuitemradio" tabindex="-1" name={p.Name} value={p.Value} checked={p.Checked} disabled={p.Disabled} class="peer sr-only" {...rovingItem(p.Disabled)} />
  <span class="pointer-events-none invisible absolute left-2 flex size-3.5 items-center justify-center peer-checked:visible"><icons.Circle class="size-2 *:fill-current" /></span>
  {p.Children}
</label>

package menubar

props {
  // Class adds classes to the root element.
  Class string = ""
  // Attrs adds HTML attributes to the root element.
  Attrs gx.Attrs = nil
}

<div role="separator" class={gx.Cx("-mx-1 my-1 h-px bg-border", p.Class)} {...p.Attrs}></div>

package menubar

props {
  // Class adds classes to the root element.
  Class    string = ""
  // Children is the text of the keyboard shortcut.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<span class={gx.Cx("ml-auto text-xs tracking-widest text-muted-foreground", p.Class)} {...p.Attrs}>{p.Children}</span>

package menubar

props {
  // Class adds classes to the root element.
  Class    string = ""
  // Children is the sub-menu trigger, followed by the sub-menu content.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<div role="none" data-gx-sub class={p.Class} {...p.Attrs}>{p.Children}</div>

package menubar

props {
  // Class adds classes to the root element.
  Class    string = ""
  // Children is the list of items of the sub-menu.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<div popover="auto" role="menu" data-gx-roving="nowrap" data-gx-place="right start" class={gx.Cx("z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg outline-hidden", subMotionClass, p.Class)} {...p.Attrs}>{p.Children}</div>

package menubar

import "github.com/alternayte/gx/registry/icons"

props {
  // Inset adds left padding, so the trigger lines up with the checkbox and radio items.
  Inset    bool = false
  // Disabled turns the trigger off. The arrow keys pass it.
  Disabled bool = false
  // Class adds classes to the root element.
  Class    string = ""
  // Children is the label of the trigger. A chevron follows it.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<button type="button" role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false" disabled={p.Disabled} class={gx.Cx("flex w-full cursor-default items-center rounded-sm px-2 py-1.5 text-left text-sm outline-none select-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground aria-expanded:bg-accent aria-expanded:text-accent-foreground disabled:pointer-events-none disabled:opacity-50", insetClass[p.Inset], p.Class)} {...rovingItem(p.Disabled)} {...p.Attrs}>
  {p.Children}
  <icons.ChevronRight class="ml-auto h-4 w-4" />
</button>

package menubar

import "github.com/alternayte/gx"

var MenubarFixtures = gx.Fixtures[MenubarProps]{
	"Default": {Children: gx.Frag(
		MenubarMenu(MenubarMenuProps{Id: "demo-menubar-file", Label: "File", Children: gx.Frag(
			MenubarItem(MenubarItemProps{Children: gx.Frag(
				gx.Text("New tab"),
				MenubarShortcut(MenubarShortcutProps{Children: gx.Text("⌘T")}),
			)}),
			MenubarItem(MenubarItemProps{Children: gx.Text("New window")}),
			MenubarSeparator(MenubarSeparatorProps{}),
			MenubarLink(MenubarLinkProps{Href: gx.URL("/docs"), Children: gx.Text("Documentation")}),
		)}),
		MenubarMenu(MenubarMenuProps{Id: "demo-menubar-view", Label: "View", Children: gx.Frag(
			MenubarCheckboxItem(MenubarCheckboxItemProps{Name: "bookmarks", Children: gx.Text("Always show bookmarks bar")}),
			MenubarCheckboxItem(MenubarCheckboxItemProps{Name: "urls", Checked: true, Children: gx.Text("Always show full URLs")}),
			MenubarSeparator(MenubarSeparatorProps{}),
			MenubarItem(MenubarItemProps{Inset: true, Children: gx.Frag(
				gx.Text("Reload"),
				MenubarShortcut(MenubarShortcutProps{Children: gx.Text("⌘R")}),
			)}),
			MenubarItem(MenubarItemProps{Inset: true, Disabled: true, Children: gx.Text("Force reload")}),
		)}),
		MenubarMenu(MenubarMenuProps{Id: "demo-menubar-profiles", Label: "Profiles", Children: gx.Frag(
			MenubarRadioGroup(MenubarRadioGroupProps{Label: "Profile", Children: gx.Frag(
				MenubarLabel(MenubarLabelProps{Inset: true, Children: gx.Text("Profile")}),
				MenubarRadioItem(MenubarRadioItemProps{Name: "demo-menubar-profile", Value: "ada", Children: gx.Text("Ada")}),
				MenubarRadioItem(MenubarRadioItemProps{Name: "demo-menubar-profile", Value: "grace", Checked: true, Children: gx.Text("Grace")}),
			)}),
			MenubarSeparator(MenubarSeparatorProps{}),
			MenubarItem(MenubarItemProps{Inset: true, Variant: Destructive, Children: gx.Text("Remove profile")}),
		)}),
	)},
	"Sub": {Children: gx.Frag(
		MenubarMenu(MenubarMenuProps{Id: "demo-menubar-sub-file", Label: "File", Children: gx.Frag(
			MenubarItem(MenubarItemProps{Children: gx.Text("New tab")}),
			MenubarSub(MenubarSubProps{Children: gx.Frag(
				MenubarSubTrigger(MenubarSubTriggerProps{Children: gx.Text("Share")}),
				MenubarSubContent(MenubarSubContentProps{Children: gx.Frag(
					MenubarItem(MenubarItemProps{Children: gx.Text("Email link")}),
					MenubarItem(MenubarItemProps{Children: gx.Text("Messages")}),
					MenubarItem(MenubarItemProps{Children: gx.Text("Notes")}),
				)}),
			)}),
			MenubarSeparator(MenubarSeparatorProps{}),
			MenubarItem(MenubarItemProps{Children: gx.Text("Print")}),
		)}),
		MenubarMenu(MenubarMenuProps{Id: "demo-menubar-sub-edit", Label: "Edit", Children: gx.Frag(
			MenubarItem(MenubarItemProps{Children: gx.Text("Undo")}),
			MenubarItem(MenubarItemProps{Children: gx.Text("Redo")}),
		)}),
	)},
}

package menubar

import "github.com/alternayte/gx"

var MenubarCheckboxItemFixtures = gx.Fixtures[MenubarCheckboxItemProps]{
	"Checked":   {Name: "status-bar", Checked: true, Children: gx.Text("Status bar")},
	"Unchecked": {Name: "panel", Children: gx.Text("Panel")},
	"Disabled":  {Name: "activity", Disabled: true, Children: gx.Text("Activity bar")},
}

// MenubarCheckboxItemWrap renders the item inside a menu, as a page uses it.
func MenubarCheckboxItemWrap(n gx.Node) gx.Node {
	return gx.El("div", gx.Attrs{{Key: "role", Value: "menu"}, {Key: "class", Value: "w-56"}}, n)
}

package menubar

import "github.com/alternayte/gx"

var MenubarGroupFixtures = gx.Fixtures[MenubarGroupProps]{
	"Default": {Label: "Account", Children: gx.Frag(
		MenubarItem(MenubarItemProps{Children: gx.Text("Profile")}),
		MenubarItem(MenubarItemProps{Children: gx.Text("Billing")}),
	)},
}

// MenubarGroupWrap renders the group inside a menu, as a page uses it.
func MenubarGroupWrap(n gx.Node) gx.Node {
	return gx.El("div", gx.Attrs{{Key: "role", Value: "menu"}, {Key: "class", Value: "w-56"}}, n)
}

package menubar

import "github.com/alternayte/gx"

var MenubarItemFixtures = gx.Fixtures[MenubarItemProps]{
	"Item":        {Children: gx.Text("Profile")},
	"Inset":       {Inset: true, Children: gx.Text("Profile")},
	"Destructive": {Variant: Destructive, Children: gx.Text("Delete")},
	"Disabled":    {Disabled: true, Children: gx.Text("Profile")},
}

// MenubarItemWrap renders the item inside a menu, as a page uses it.
func MenubarItemWrap(n gx.Node) gx.Node {
	return gx.El("div", gx.Attrs{{Key: "role", Value: "menu"}, {Key: "class", Value: "w-56"}}, n)
}

package menubar

import "github.com/alternayte/gx"

var MenubarLabelFixtures = gx.Fixtures[MenubarLabelProps]{
	"Label": {Children: gx.Text("My account")},
	"Inset": {Inset: true, Children: gx.Text("My account")},
}

package menubar

import "github.com/alternayte/gx"

var MenubarLinkFixtures = gx.Fixtures[MenubarLinkProps]{"Link": {Href: gx.URL("/docs"), Children: gx.Text("Documentation")}}

// MenubarLinkWrap renders the item inside a menu, as a page uses it.
func MenubarLinkWrap(n gx.Node) gx.Node {
	return gx.El("div", gx.Attrs{{Key: "role", Value: "menu"}, {Key: "class", Value: "w-56"}}, n)
}

package menubar

import "github.com/alternayte/gx"

var MenubarMenuFixtures = gx.Fixtures[MenubarMenuProps]{
	"Menu": {Id: "demo-menubar-menu", Label: "Edit", Children: gx.Frag(
		MenubarItem(MenubarItemProps{Children: gx.Text("Undo")}),
		MenubarItem(MenubarItemProps{Children: gx.Text("Redo")}),
	)},
}

// MenubarMenuWrap renders the menu inside a bar, as a page uses it.
func MenubarMenuWrap(n gx.Node) gx.Node {
	return Menubar(MenubarProps{Children: n})
}

package menubar

import "github.com/alternayte/gx"

var MenubarRadioGroupFixtures = gx.Fixtures[MenubarRadioGroupProps]{
	"Default": {Label: "Position", Children: gx.Frag(
		MenubarRadioItem(MenubarRadioItemProps{Name: "menubar-group-position", Value: "top", Checked: true, Children: gx.Text("Top")}),
		MenubarRadioItem(MenubarRadioItemProps{Name: "menubar-group-position", Value: "bottom", Children: gx.Text("Bottom")}),
	)},
}

// MenubarRadioGroupWrap renders the group inside a menu, as a page uses it.
func MenubarRadioGroupWrap(n gx.Node) gx.Node {
	return gx.El("div", gx.Attrs{{Key: "role", Value: "menu"}, {Key: "class", Value: "w-56"}}, n)
}

package menubar

import "github.com/alternayte/gx"

var MenubarRadioItemFixtures = gx.Fixtures[MenubarRadioItemProps]{
	"Checked":   {Name: "menubar-item-checked", Value: "top", Checked: true, Children: gx.Text("Top")},
	"Unchecked": {Name: "menubar-item-unchecked", Value: "bottom", Children: gx.Text("Bottom")},
}

// MenubarRadioItemWrap renders the item inside a menu, as a page uses it.
func MenubarRadioItemWrap(n gx.Node) gx.Node {
	return gx.El("div", gx.Attrs{{Key: "role", Value: "menu"}, {Key: "class", Value: "w-56"}}, n)
}

package menubar

import "github.com/alternayte/gx"

var MenubarSeparatorFixtures = gx.Fixtures[MenubarSeparatorProps]{"Default": {}}

package menubar

import "github.com/alternayte/gx"

var MenubarShortcutFixtures = gx.Fixtures[MenubarShortcutProps]{"Default": {Children: gx.Text("⌘K")}}

package menubar

import "github.com/alternayte/gx"

var MenubarSubFixtures = gx.Fixtures[MenubarSubProps]{
	"Default": {Children: gx.Frag(
		MenubarSubTrigger(MenubarSubTriggerProps{Children: gx.Text("More tools")}),
		MenubarSubContent(MenubarSubContentProps{Children: gx.Frag(
			MenubarItem(MenubarItemProps{Children: gx.Text("Save page")}),
			MenubarItem(MenubarItemProps{Children: gx.Text("Create shortcut")}),
		)}),
	)},
}

// MenubarSubWrap renders the sub-menu inside a menu, as a page uses it.
func MenubarSubWrap(n gx.Node) gx.Node {
	return gx.El("div", gx.Attrs{{Key: "role", Value: "menu"}, {Key: "class", Value: "w-56"}}, n)
}

package menubar

import "github.com/alternayte/gx"

var MenubarSubContentFixtures = gx.Fixtures[MenubarSubContentProps]{
	"Content": {Class: "w-48", Children: gx.Frag(
		MenubarItem(MenubarItemProps{Children: gx.Text("Save page")}),
		MenubarItem(MenubarItemProps{Children: gx.Text("Create shortcut")}),
		MenubarSeparator(MenubarSeparatorProps{}),
		MenubarItem(MenubarItemProps{Children: gx.Text("Developer tools")}),
	)},
}

// MenubarSubContentWrap renders the content behind its trigger inside a menu,
// as a page uses it.
func MenubarSubContentWrap(n gx.Node) gx.Node {
	return gx.El("div", gx.Attrs{{Key: "role", Value: "menu"}, {Key: "class", Value: "w-56"}},
		MenubarSub(MenubarSubProps{Children: gx.Frag(
			MenubarSubTrigger(MenubarSubTriggerProps{Children: gx.Text("More tools")}),
			n,
		)}),
	)
}

package menubar

import "github.com/alternayte/gx"

var MenubarSubTriggerFixtures = gx.Fixtures[MenubarSubTriggerProps]{
	"Trigger":  {Children: gx.Text("More tools")},
	"Inset":    {Inset: true, Children: gx.Text("More tools")},
	"Disabled": {Disabled: true, Children: gx.Text("More tools")},
}

// MenubarSubTriggerWrap renders the trigger inside a menu, as a page uses it.
func MenubarSubTriggerWrap(n gx.Node) gx.Node {
	return gx.El("div", gx.Attrs{{Key: "role", Value: "menu"}, {Key: "class", Value: "w-56"}}, n)
}

package menubar

import "github.com/alternayte/gx"

// triggerStyle names the trigger of one menu as the anchor of its content.
func (p MenubarMenuProps) triggerStyle() gx.Style {
	return gx.Style("anchor-name: --gx-menubar-" + p.Id)
}

// contentStyle anchors the content below its trigger, 8px down and 4px to
// the left as the reference offsets do, for a page whose scripts did not
// run. The overlay module then writes the measured place from the same
// offsets.
func (p MenubarMenuProps) contentStyle() gx.Style {
	return gx.Style("position-anchor: --gx-menubar-" + p.Id + "; inset: auto; margin: 0.5rem 0 0 -0.25rem; top: anchor(bottom); left: anchor(left)")
}

// Variant is the visual style of a menu item.
type Variant string

// The variants of menubar.MenubarItem.
const (
	Default     Variant = "default"
	Destructive Variant = "destructive"
)

var variantClass = gx.Enum[Variant]{
	Default:     "",
	Destructive: "text-destructive hover:bg-destructive/10 hover:text-destructive focus:bg-destructive/10 focus:text-destructive dark:hover:bg-destructive/20 dark:focus:bg-destructive/20 *:[svg]:text-destructive!",
}

// variant returns the variant of one item; a zero value is Default.
func (p MenubarItemProps) variant() Variant {
	if p.Variant == "" {
		return Default
	}
	return p.Variant
}

// insetClass lines an item or a label up with the checkbox and radio items.
var insetClass = map[bool]string{
	true:  "pl-8",
	false: "",
}

// rovingItem marks an item for the roving tabindex of its menu. A disabled
// item is not marked, so the arrow keys pass it.
func rovingItem(disabled bool) gx.Attrs {
	return gx.Attrs{gx.Bool("data-gx-roving-item", !disabled)}
}

// motionClass fades and zooms the menu from 95% and slides it 2 units from
// the trigger, from below when the menu took the top side. Safari 26.0 never ends a display transition on an element
// that CSS anchor positioning places, which leaves a closed menu rendered.
// The @supports test matches every engine but WebKit, so Safari closes the
// menu at once and still animates the enter.
const motionClass = "opacity-0 scale-95 transition-[opacity,scale,translate,overlay,display] not-supports-[font:-apple-system-body]:transition-discrete duration-150 open:opacity-100 open:scale-100 starting:open:opacity-0 starting:open:scale-95 starting:open:-translate-y-2 data-[side=top]:starting:open:translate-y-2 motion-reduce:transition-none"

// subMotionClass fades and zooms the content of a sub-menu from 95% and
// slides it 2 units from its trigger. The overlay module writes data-side:
// content that flips to the left slides from the right.
const subMotionClass = "origin-top-left opacity-0 scale-95 transition-[opacity,scale,translate,overlay,display] transition-discrete duration-150 open:opacity-100 open:scale-100 starting:open:opacity-0 starting:open:scale-95 starting:open:-translate-x-2 data-[side=left]:origin-top-right data-[side=left]:starting:open:translate-x-2 motion-reduce:transition-none"