@_linked/primitives 1.0.5

package/lib/esm/components/Heading.module.css

@@ -0,0 +1,83 @@
+h1 {
+  &.Root {
+    font-size: var(--heading-1-font-size);
+    font-family: var(--heading-1-font-family);
+    font-weight: var(--heading-1-font-weight);
+    line-height: var(--heading-1-line-height);
+    letter-spacing: var(--heading-1-letter-spacing);
+    color: var(--heading-1-color);
+    font-style: var(--heading-1-font-style);
+    margin-top: var(--heading-1-margin-top);
+    margin-bottom: var(--heading-1-margin-bottom);
+  }
+}
+
+h2 {
+  &.Root {
+    font-size: var(--heading-2-font-size);
+    font-family: var(--heading-2-font-family);
+    font-weight: var(--heading-2-font-weight);
+    line-height: var(--heading-2-line-height);
+    letter-spacing: var(--heading-2-letter-spacing);
+    color: var(--heading-2-color);
+    font-style: var(--heading-2-font-style);
+    margin-top: var(--heading-2-margin-top);
+    margin-bottom: var(--heading-2-margin-bottom);
+  }
+}
+
+h3 {
+  &.Root {
+    font-size: var(--heading-3-font-size);
+    font-family: var(--heading-3-font-family);
+    font-weight: var(--heading-3-font-weight);
+    line-height: var(--heading-3-line-height);
+    letter-spacing: var(--heading-3-letter-spacing);
+    color: var(--heading-3-color);
+    font-style: var(--heading-3-font-style);
+    margin-top: var(--heading-3-margin-top);
+    margin-bottom: var(--heading-3-margin-bottom);
+  }
+}
+
+h4 {
+  &.Root {
+    font-size: var(--heading-4-font-size);
+    font-family: var(--heading-4-font-family);
+    font-weight: var(--heading-4-font-weight);
+    line-height: var(--heading-4-line-height);
+    letter-spacing: var(--heading-4-letter-spacing);
+    color: var(--heading-4-color);
+    font-style: var(--heading-4-font-style);
+    margin-top: var(--heading-4-margin-top);
+    margin-bottom: var(--heading-4-margin-bottom);
+  }
+}
+
+h5 {
+  &.Root {
+    font-size: var(--heading-5-font-size);
+    font-family: var(--heading-5-font-family);
+    font-weight: var(--heading-5-font-weight);
+    line-height: var(--heading-5-line-height);
+    letter-spacing: var(--heading-5-letter-spacing);
+    color: var(--heading-5-color);
+    font-style: var(--heading-5-font-style);
+    margin-top: var(--heading-5-margin-top);
+    margin-bottom: var(--heading-5-margin-bottom);
+  }
+}
+
+h6 {
+  &.Root {
+    font-size: var(--heading-6-font-size);
+    font-family: var(--heading-6-font-family);
+    font-weight: var(--heading-6-font-weight);
+    line-height: var(--heading-6-line-height);
+    letter-spacing: var(--heading-6-letter-spacing);
+    color: var(--heading-6-color);
+    font-style: var(--heading-6-font-style);
+    margin-top: var(--heading-6-margin-top);
+    margin-bottom: var(--heading-6-margin-bottom);
+  }
+}

package/lib/esm/components/HoverCard.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
+declare const Root: React.FC<HoverCardPrimitive.HoverCardProps>;
+declare const Trigger: React.ForwardRefExoticComponent<HoverCardPrimitive.HoverCardTriggerProps & React.RefAttributes<HTMLAnchorElement>>;
+declare const Portal: React.FC<HoverCardPrimitive.HoverCardPortalProps>;
+declare const Arrow: React.ForwardRefExoticComponent<Omit<HoverCardPrimitive.HoverCardArrowProps & React.RefAttributes<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+declare const Content: React.ForwardRefExoticComponent<Omit<HoverCardPrimitive.HoverCardContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const HoverCard: {
+    Root: React.FC<HoverCardPrimitive.HoverCardProps>;
+    Trigger: React.ForwardRefExoticComponent<HoverCardPrimitive.HoverCardTriggerProps & React.RefAttributes<HTMLAnchorElement>>;
+    Portal: React.FC<HoverCardPrimitive.HoverCardPortalProps>;
+    Content: React.ForwardRefExoticComponent<Omit<HoverCardPrimitive.HoverCardContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Arrow: React.ForwardRefExoticComponent<Omit<HoverCardPrimitive.HoverCardArrowProps & React.RefAttributes<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+};
+export { Root, Trigger, Portal, Content, Arrow };

package/lib/esm/components/HoverCard.module.css

@@ -0,0 +1,75 @@
+@import './helpers/mixins.css';
+@import '@_linked/css/package.css';
+
+.Content {
+  font-family: inherit;
+  border-radius: var(--hovercard-radius, var(--popover-radius));
+  padding: var(--hovercard-padding, var(--popover-padding));
+  width: var(--hovercard-width, 20rem);
+  background-color: var(--hovercard-bg, var(--popover-bg));
+  box-shadow: var(--hovercard-shadow, var(--popover-shadow));
+  animation-duration: var(--transition-duration-normal);
+  animation-timing-function: var(--transition-easing);
+  will-change: transform, opacity;
+
+  &[data-side='top'] {
+    animation-name: slideDownAndFade;
+  }
+  &[data-side='right'] {
+    animation-name: slideLeftAndFade;
+  }
+  &[data-side='bottom'] {
+    animation-name: slideUpAndFade;
+  }
+  &[data-side='left'] {
+    animation-name: slideRightAndFade;
+  }
+}
+
+.Arrow {
+  fill: var(--hovercard-bg, var(--popover-bg));
+}
+
+@keyframes slideUpAndFade {
+  0% {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideRightAndFade {
+  0% {
+    opacity: 0;
+    transform: translateX(-2px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideDownAndFade {
+  0% {
+    opacity: 0;
+    transform: translateY(-2px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideLeftAndFade {
+  0% {
+    opacity: 0;
+    transform: translateX(2px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}

package/lib/esm/components/IconButton.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean;
+    variant?: 'solid' | 'outline' | 'ghost';
+    color?: 'primary' | 'secondary' | 'tertiary';
+    size?: 'small' | 'medium' | 'large' | 'default';
+}
+declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { IconButton };

package/lib/esm/components/IconButton.module.css

@@ -0,0 +1,150 @@
+@theme static {
+  --spacing: 0.25rem;
+}
+@import './helpers/mixins.css';
+
+.Root {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  border-radius: var(--iconbutton-radius, var(--control-radius));
+  font-size: var(--iconbutton-font-size, var(--typography-small-size));
+  font-weight: var(--iconbutton-font-weight, var(--font-medium));
+  font-family: var(--iconbutton-font-family, var(--typography-font-family));
+  outline: none;
+  transition: var(--transition-fast);
+  border: solid 1px transparent;
+  cursor: pointer;
+  gap: var(--iconbutton-gap, --spacing(2));
+
+  &:focus-visible {
+    @mixin focus;
+  }
+
+  /* color: 'primary' | 'secondary' | 'tertiary'*/
+  /* variant: 'solid' | 'outline' | 'ghost'*/
+  &.primary {
+    &.solid {
+      background: var(--button-primary-bg);
+      color: var(--button-primary-color);
+      border-color: var(--button-primary-bg);
+
+      &:hover {
+        background: var(--button-primary-bg-hover);
+        color: var(--button-primary-color-hover);
+      }
+    }
+
+    &.outline {
+      background: transparent;
+      color: var(--button-primary-bg);
+      border: 1px solid var(--button-primary-bg);
+
+      &:hover {
+        background: var(--button-primary-bg);
+        color: var(--button-primary-color);
+      }
+    }
+
+    &.ghost {
+      background: transparent;
+      color: var(--button-primary-bg);
+
+      &:hover {
+        background: var(--button-primary-bg);
+        color: var(--button-primary-color);
+      }
+    }
+  }
+
+  &.secondary {
+    &.solid {
+      background: var(--button-secondary-bg);
+      color: var(--button-secondary-color);
+      border-color: var(--button-secondary-bg);
+
+      &:hover {
+        background: var(--button-secondary-bg-hover);
+        color: var(--button-secondary-color-hover);
+      }
+    }
+
+    &.outline {
+      background: transparent;
+      color: var(--button-secondary-bg);
+      border: 1px solid var(--button-secondary-bg);
+
+      &:hover {
+        background: var(--button-secondary-bg);
+        color: var(--button-secondary-color);
+      }
+    }
+
+    &.ghost {
+      background: transparent;
+      color: var(--button-secondary-bg);
+
+      &:hover {
+        background: var(--button-secondary-bg);
+        color: var(--button-secondary-color);
+      }
+    }
+  }
+
+  &.tertiary {
+    &.solid {
+      background: var(--button-tertiary-bg);
+      color: var(--button-tertiary-color);
+      border-color: var(--button-tertiary-bg);
+
+      &:hover {
+        background: var(--button-tertiary-bg-hover);
+        color: var(--button-tertiary-color-hover);
+      }
+    }
+
+    &.outline {
+      background: transparent;
+      color: var(--button-tertiary-bg);
+      border: 1px solid var(--button-tertiary-bg);
+
+      &:hover {
+        background: var(--button-tertiary-bg);
+        color: var(--button-tertiary-color);
+      }
+    }
+
+    &.ghost {
+      background: transparent;
+      color: var(--button-tertiary-bg);
+
+      &:hover {
+        background: var(--button-tertiary-bg);
+        color: var(--button-tertiary-color);
+      }
+    }
+  }
+
+  /* size: 'small' | 'medium' | 'large' || 'default'*/
+  &.small {
+    height: var(--iconbutton-size-sm, var(--control-height-sm));
+    width: var(--iconbutton-size-sm, var(--control-height-sm));
+  }
+
+  &.medium,
+  &.default {
+    height: var(--iconbutton-size-md, var(--control-height-md));
+    width: var(--iconbutton-size-md, var(--control-height-md));
+  }
+
+  &.large {
+    height: var(--iconbutton-size-lg, var(--control-height-lg));
+    width: var(--iconbutton-size-lg, var(--control-height-lg));
+  }
+
+  /* disabled*/
+  &.disabled {
+    @mixin disabled;
+  }
+}

package/lib/esm/components/Input.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    size?: 'small' | 'medium' | 'large';
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export { Input };

package/lib/esm/components/Input.module.css

@@ -0,0 +1,61 @@
+@import './helpers/mixins.css';
+
+.Root {
+  font-family: var(--input-font-family, var(--field-font-family));
+  display: flex;
+  color: var(--input-text, var(--field-text));
+  padding: 0px var(--input-padding-x, var(--field-padding-x));
+  border-radius: var(--input-radius, var(--field-radius));
+  font-size: var(--input-font-size, var(--field-font-size));
+  box-shadow: var(--input-shadow, var(--field-shadow));
+  font-weight: var(--input-font-weight, var(--field-font-weight));
+  line-height: var(--input-line-height, var(--field-line-height));
+  background-color: var(--input-bg, var(--field-bg));
+  transition: var(--transition-normal);
+  border: 1px solid var(--input-border, var(--field-border));
+
+  &::placeholder {
+    color: var(--input-text-placeholder, var(--field-text-placeholder));
+  }
+
+  &:hover {
+    background-color: var(--input-bg-hover, var(--field-bg-hover));
+    border-color: var(--input-border-hover, var(--field-border-hover));
+  }
+
+  &:focus-visible {
+    @mixin focus;
+    background-color: var(--input-bg-focus, var(--field-bg-focus));
+    border-color: var(--input-border-focus, var(--field-border-focus));
+  }
+
+  &:disabled {
+    @mixin disabled;
+  }
+
+  &[type='file'] {
+    appearance: none;
+    border: 0;
+  }
+
+  &.small {
+    height: var(--input-height-sm, var(--field-height-sm));
+    font-size: var(
+      --input-font-size-sm,
+      var(--field-font-size-sm, var(--field-font-size))
+    );
+  }
+
+  &.medium {
+    height: var(--input-height-md, var(--field-height-md));
+    font-size: var(--input-font-size, var(--field-font-size));
+  }
+
+  &.large {
+    height: var(--input-height-lg, var(--field-height-lg));
+    font-size: var(
+      --input-font-size-lg,
+      var(--field-font-size-lg, var(--field-font-size))
+    );
+  }
+}

package/lib/esm/components/Label.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+export { Label };

package/lib/esm/components/Label.module.css

@@ -0,0 +1,7 @@
+@import './helpers/mixins.css';
+
+.Root {
+  font-size: var(--label-font-size, var(--typography-font-size));
+  font-weight: var(--label-font-weight, var(--typography-font-weight));
+  color: var(--label-color, var(--typography-color));
+}

package/lib/esm/components/Menubar.d.ts

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import * as MenubarPrimitive from '@radix-ui/react-menubar';
+declare const Menu: {
+    (props: MenubarPrimitive.MenubarMenuProps & {
+        __scopeMenubar?: import("@radix-ui/react-context").Scope;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const Group: React.ForwardRefExoticComponent<MenubarPrimitive.MenubarGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const Sub: React.FC<MenubarPrimitive.MenubarSubProps>;
+declare const RadioGroup: React.ForwardRefExoticComponent<MenubarPrimitive.MenubarRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const Root: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Trigger: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SubContent: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Separator: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Arrow: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarArrowProps & React.RefAttributes<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+declare const SubTrigger: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const Content: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Item: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const CheckboxItem: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const RadioItem: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Label: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const Shortcut: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
+    displayname: string;
+};
+export declare const Menubar: {
+    Root: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Trigger: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Item: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+        inset?: boolean;
+    } & React.RefAttributes<HTMLDivElement>>;
+    CheckboxItem: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    RadioItem: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Label: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+        inset?: boolean;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Separator: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    SubTrigger: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+        inset?: boolean;
+    } & React.RefAttributes<HTMLDivElement>>;
+    SubContent: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Arrow: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarArrowProps & React.RefAttributes<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+    Menu: {
+        (props: MenubarPrimitive.MenubarMenuProps & {
+            __scopeMenubar?: import("@radix-ui/react-context").Scope;
+        }): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Group: React.ForwardRefExoticComponent<MenubarPrimitive.MenubarGroupProps & React.RefAttributes<HTMLDivElement>>;
+    Sub: React.FC<MenubarPrimitive.MenubarSubProps>;
+    RadioGroup: React.ForwardRefExoticComponent<MenubarPrimitive.MenubarRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+    Shortcut: {
+        ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
+        displayname: string;
+    };
+};
+export { Root, Trigger, Content, Item, CheckboxItem, RadioItem, Label, Separator, SubTrigger, SubContent, Arrow, Menu, Group, Sub, RadioGroup, Shortcut, };

package/lib/esm/components/Menubar.module.css

@@ -0,0 +1,128 @@
+@theme static {
+  --spacing: 0.25rem;
+}
+@import './helpers/mixins.css';
+.Root {
+  display: flex;
+  background-color: var(--menubar-bg, var(--popover-bg));
+  padding: var(--menubar-padding, --spacing(1));
+  border-radius: var(--menubar-radius, var(--popover-radius));
+  box-shadow: var(--menubar-shadow, var(--popover-shadow));
+}
+
+.Trigger {
+  padding: var(--menubar-trigger-padding-y, --spacing(2))
+    var(--menubar-trigger-padding-x, --spacing(3));
+  outline: none;
+  user-select: none;
+  font-weight: var(
+    --menubar-trigger-font-weight,
+    var(--typography-font-weight)
+  );
+  line-height: var(
+    --menubar-trigger-line-height,
+    var(--typography-line-height-none)
+  );
+  border-radius: var(--menubar-trigger-radius, var(--popover-radius));
+  color: var(--menubar-text, var(--popover-text));
+  font-size: var(--menubar-trigger-font-size, var(--text-sm));
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--menubar-trigger-gap, --spacing(0.5));
+  height: var(
+    --menubar-trigger-height,
+    var(--menubar-item-height, --spacing(8))
+  );
+
+  &[data-highlighted],
+  &[data-state='open'] {
+    background-color: var(--menubar-bg-active, var(--bg-active));
+  }
+}
+
+.Content,
+.SubContent {
+  min-width: var(--menubar-content-min-width, 14rem);
+  background-color: var(--menubar-content-bg, var(--popover-bg));
+  border-radius: var(--menubar-content-radius, var(--popover-radius));
+  padding: var(--menubar-content-padding, var(--menubar-padding, --spacing(1)));
+  box-shadow: var(--menubar-content-shadow, var(--popover-shadow));
+  animation-duration: var(--transition-duration-normal);
+  animation-timing-function: var(--transition-easing);
+  will-change: transform, opacity;
+}
+
+.Item,
+.SubTrigger,
+.CheckboxItem,
+.RadioItem {
+  all: unset;
+  font-family: var(--typography-font-family);
+  font-size: var(--menubar-item-font-size, var(--text-sm));
+  line-height: var(
+    --menubar-item-line-height,
+    var(--typography-line-height-none)
+  );
+  color: var(--menubar-item-text, var(--popover-text));
+  border-radius: var(--menubar-item-radius, var(--popover-radius));
+  display: flex;
+  align-items: center;
+  height: var(--menubar-item-height, --spacing(8));
+  padding: 0 var(--menubar-item-padding-x, --spacing(2.5));
+  position: relative;
+  user-select: none;
+
+  &[data-highlighted] {
+    background-color: var(--menubar-item-bg-active, var(--bg-active));
+    color: var(--menubar-item-text-active, var(--popover-text));
+  }
+
+  &[data-disabled] {
+    @mixin disabled;
+  }
+
+  &.Inset {
+    padding-left: var(--menubar-item-inset-padding, --spacing(6));
+  }
+}
+
+.CheckboxItem,
+.RadioItem {
+  padding-left: var(--menubar-item-inset-padding, --spacing(6));
+}
+
+.Item[data-state='open'],
+.SubTrigger[data-state='open'] {
+  background-color: var(--menubar-item-bg-active, var(--bg-active));
+  color: var(--menubar-item-text-active, var(--popover-text));
+}
+
+.ItemIndicator {
+  position: absolute;
+  left: 0;
+  width: var(--menubar-indicator-width, --spacing(5));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.Separator {
+  height: 1px;
+  background-color: var(--menubar-separator, var(--border-default));
+  margin: var(--menubar-separator-spacing, --spacing(1.5));
+}
+
+.RightSlot {
+  margin-left: auto;
+  padding-left: var(--menubar-right-slot-padding, --spacing(5));
+  color: var(--menubar-right-slot-text, var(--popover-text));
+}
+
+.Label {
+  font-weight: var(--heading-font-weight);
+}
+
+.Arrow {
+  fill: currentColor;
+}