@accelint/design-toolkit 9.2.0 → 9.3.0

package/dist/components/menu/styles.module.css

@@ -14,7 +14,7 @@
 
 @layer components.l1 {
   .menu {
-    @apply rounded-medium bg-surface-overlay shadow-elevation-overlay outline-static overflow-x-clip overflow-y-auto outline;
+    @apply rounded-medium bg-surface-overlay shadow-elevation-overlay outline-static overflow-x-clip overflow-y-auto p-px outline;
   }
 
   .item {
@@ -27,6 +27,11 @@
       content: '';
     }
 
+    &:after {
+      content: '';
+      @apply pointer-events-none absolute inset-0 -z-1 bg-inherit;
+    }
+
     &.cozy {
       @apply pt-s pb-s;
     }
@@ -35,6 +40,55 @@
       @apply pt-xs pb-xs;
     }
 
+    /* Extend ::after to cover separator on interactive states */
+    @variant focus-visible {
+      @apply z-1;
+
+      &:not(:first-child):after {
+        @apply -top-px;
+      }
+
+      &:not(:last-child):after {
+        @apply -bottom-px;
+      }
+    }
+
+    @variant hover {
+      @apply z-1;
+
+      &:not(:first-child):after {
+        @apply -top-px;
+      }
+
+      &:not(:last-child):after {
+        @apply -bottom-px;
+      }
+    }
+
+    @variant open {
+      @apply z-1;
+
+      &:not(:first-child):after {
+        @apply -top-px;
+      }
+
+      &:not(:last-child):after {
+        @apply -bottom-px;
+      }
+    }
+
+    @variant pressed {
+      @apply z-1;
+
+      &:not(:first-child):after {
+        @apply -top-px;
+      }
+
+      &:not(:last-child):after {
+        @apply -bottom-px;
+      }
+    }
+
     @variant color-info {
       @variant focus-visible {
         @apply bg-accent-primary-muted;
@@ -55,32 +109,16 @@
       @variant selected {
         @apply bg-accent-primary-muted;
 
-        &:before {
-          @apply bg-accent-primary-bold;
-        }
-
         @variant hover {
           @apply fg-a11y-on-accent bg-accent-primary-bold;
-
-          &:before {
-            @apply bg-(--outline-accent-primary-hover);
-          }
         }
 
         @variant focus-visible {
           @apply fg-a11y-on-accent bg-accent-primary-bold;
-
-          &:before {
-            @apply bg-(--outline-accent-primary-hover);
-          }
         }
 
         @variant pressed {
           @apply fg-accent-primary-bold bg-accent-primary-pressed;
-
-          &:before {
-            @apply bg-accent-primary-pressed;
-          }
         }
       }
     }
@@ -107,31 +145,16 @@
       @variant selected {
         @apply fg-primary-bold bg-serious-muted;
 
-        &:before {
-          @apply bg-serious-bold;
-        }
-
         @variant hover {
           @apply fg-a11y-on-accent bg-serious-bold;
-          &:before {
-            @apply bg-(--outline-serious-hover);
-          }
         }
 
         @variant focus-visible {
           @apply fg-a11y-on-accent bg-serious-bold;
-
-          &:before {
-            @apply bg-(--outline-serious-hover);
-          }
         }
 
         @variant pressed {
           @apply fg-serious-bold bg-serious-pressed;
-
-          &:before {
-            @apply bg-(--outline-serious-pressed);
-          }
         }
       }
     }
@@ -158,10 +181,6 @@
       @variant selected {
         @apply fg-primary-bold bg-critical-muted;
 
-        &:before {
-          @apply bg-(--outline-critical-bold);
-        }
-
         @variant hover {
           @apply bg-critical-bold fg-a11y-on-accent;
         }
@@ -172,10 +191,6 @@
 
         @variant pressed {
           @apply fg-critical-bold bg-critical-pressed;
-
-          &:before {
-            @apply bg-(--outline-critical-pressed);
-          }
         }
       }
     }
@@ -185,10 +200,6 @@
 
       @variant selected {
         @apply bg-interactive-disabled;
-
-        &:before {
-          @apply bg-(--outline-interactive);
-        }
       }
     }
   }
@@ -306,11 +317,16 @@
   }
 
   .header {
-    @apply fg-primary-muted px-s py-xs text-header-xs;
+    @apply fg-primary-muted px-xs py-s text-header-xs;
   }
 
   .separator {
-    @apply outline-static mx-m my-xs outline;
+    /*
+     * Use border-top instead of background-color + height for the 1px line.
+     * Border rendering is more consistent across platforms (Linux/Windows/Mac)
+     * and display scaling settings than background-color with sub-pixel heights.
+     */
+    @apply h-0 border-t border-(--outline-static);
   }
 
   .hotkey {

package/dist/components/menu/submenu.d.ts

@@ -11,11 +11,11 @@
  */
 
 import "client-only";
-import * as react24 from "react";
+import * as react33 from "react";
 import * as react_aria_components1 from "react-aria-components";
 
 //#region src/components/menu/submenu.d.ts
-declare const MenuSubmenu: (props: react_aria_components1.SubmenuTriggerProps & React.RefAttributes<HTMLDivElement>) => react24.ReactElement | null;
+declare const MenuSubmenu: (props: react_aria_components1.SubmenuTriggerProps & React.RefAttributes<HTMLDivElement>) => react33.ReactElement | null;
 //#endregion
 export { MenuSubmenu };
 //# sourceMappingURL=submenu.d.ts.map

package/dist/components/notice/index.d.ts

@@ -12,7 +12,7 @@
 
 import { NoticeProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime100 from "react/jsx-runtime";
+import * as react_jsx_runtime119 from "react/jsx-runtime";
 
 //#region src/components/notice/index.d.ts
 declare function Notice({
@@ -29,7 +29,7 @@ declare function Notice({
   onPrimaryAction,
   onSecondaryAction,
   onClose
-}: NoticeProps): react_jsx_runtime100.JSX.Element;
+}: NoticeProps): react_jsx_runtime119.JSX.Element;
 //#endregion
 export { Notice };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/notice/list.d.ts

@@ -12,7 +12,7 @@
 
 import { NoticeListProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime101 from "react/jsx-runtime";
+import * as react_jsx_runtime121 from "react/jsx-runtime";
 
 //#region src/components/notice/list.d.ts
 declare function NoticeList({
@@ -26,7 +26,7 @@ declare function NoticeList({
   placement,
   size,
   ...rest
-}: NoticeListProps): react_jsx_runtime101.JSX.Element;
+}: NoticeListProps): react_jsx_runtime121.JSX.Element;
 //#endregion
 export { NoticeList };
 //# sourceMappingURL=list.d.ts.map

package/dist/components/notice/notice-icon.d.ts

@@ -12,13 +12,13 @@
 
 import { NoticeIconProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime70 from "react/jsx-runtime";
+import * as react_jsx_runtime123 from "react/jsx-runtime";
 
 //#region src/components/notice/notice-icon.d.ts
 declare function NoticeIcon({
   color,
   size
-}: NoticeIconProps): react_jsx_runtime70.JSX.Element;
+}: NoticeIconProps): react_jsx_runtime123.JSX.Element;
 //#endregion
 export { NoticeIcon };
 //# sourceMappingURL=notice-icon.d.ts.map

package/dist/components/options/context.d.ts

@@ -12,11 +12,11 @@
 
 import { OptionsDataItem, OptionsProps } from "./types.js";
 import "client-only";
-import * as react28 from "react";
+import * as react47 from "react";
 import { ContextValue } from "react-aria-components";
 
 //#region src/components/options/context.d.ts
-declare const OptionsContext: react28.Context<ContextValue<OptionsProps<OptionsDataItem>, HTMLDivElement>>;
+declare const OptionsContext: react47.Context<ContextValue<OptionsProps<OptionsDataItem>, HTMLDivElement>>;
 //#endregion
 export { OptionsContext };
 //# sourceMappingURL=context.d.ts.map

package/dist/components/options/index.d.ts

@@ -12,7 +12,7 @@
 
 import { OptionsDataItem, OptionsProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime117 from "react/jsx-runtime";
+import * as react_jsx_runtime145 from "react/jsx-runtime";
 
 //#region src/components/options/index.d.ts
 
@@ -60,7 +60,7 @@ import * as react_jsx_runtime117 from "react/jsx-runtime";
 declare function Options<T extends OptionsDataItem>({
   ref,
   ...props
-}: OptionsProps<T>): react_jsx_runtime117.JSX.Element;
+}: OptionsProps<T>): react_jsx_runtime145.JSX.Element;
 //#endregion
 export { Options };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/options/item-content.d.ts

@@ -11,13 +11,13 @@
  */
 
 import { TextProps } from "react-aria-components";
-import * as react_jsx_runtime118 from "react/jsx-runtime";
+import * as react_jsx_runtime146 from "react/jsx-runtime";
 
 //#region src/components/options/item-content.d.ts
 declare function OptionsItemContent({
   className,
   ...rest
-}: TextProps): react_jsx_runtime118.JSX.Element;
+}: TextProps): react_jsx_runtime146.JSX.Element;
 //#endregion
 export { OptionsItemContent };
 //# sourceMappingURL=item-content.d.ts.map

package/dist/components/options/item-description.d.ts

@@ -11,13 +11,13 @@
  */
 
 import { TextProps } from "react-aria-components";
-import * as react_jsx_runtime102 from "react/jsx-runtime";
+import * as react_jsx_runtime147 from "react/jsx-runtime";
 
 //#region src/components/options/item-description.d.ts
 declare function OptionsItemDescription({
   className,
   ...rest
-}: TextProps): react_jsx_runtime102.JSX.Element;
+}: TextProps): react_jsx_runtime147.JSX.Element;
 //#endregion
 export { OptionsItemDescription };
 //# sourceMappingURL=item-description.d.ts.map

package/dist/components/options/item-label.d.ts

@@ -11,13 +11,13 @@
  */
 
 import { TextProps } from "react-aria-components";
-import * as react_jsx_runtime104 from "react/jsx-runtime";
+import * as react_jsx_runtime148 from "react/jsx-runtime";
 
 //#region src/components/options/item-label.d.ts
 declare function OptionsItemLabel({
   className,
   ...rest
-}: TextProps): react_jsx_runtime104.JSX.Element;
+}: TextProps): react_jsx_runtime148.JSX.Element;
 //#endregion
 export { OptionsItemLabel };
 //# sourceMappingURL=item-label.d.ts.map

package/dist/components/options/item.d.ts

@@ -12,7 +12,7 @@
 
 import { OptionsDataItem, OptionsItemProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime105 from "react/jsx-runtime";
+import * as react_jsx_runtime149 from "react/jsx-runtime";
 
 //#region src/components/options/item.d.ts
 declare function OptionsItem<T extends OptionsDataItem>({
@@ -21,7 +21,7 @@ declare function OptionsItem<T extends OptionsDataItem>({
   color,
   textValue,
   ...rest
-}: OptionsItemProps<T>): react_jsx_runtime105.JSX.Element;
+}: OptionsItemProps<T>): react_jsx_runtime149.JSX.Element;
 //#endregion
 export { OptionsItem };
 //# sourceMappingURL=item.d.ts.map

package/dist/components/options/section.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { OptionsDataItem, OptionsSectionProps } from "./types.js";
-import * as react_jsx_runtime108 from "react/jsx-runtime";
+import * as react_jsx_runtime150 from "react/jsx-runtime";
 
 //#region src/components/options/section.d.ts
 declare function OptionsSection<T extends OptionsDataItem>({
@@ -19,7 +19,7 @@ declare function OptionsSection<T extends OptionsDataItem>({
   classNames,
   header,
   items
-}: OptionsSectionProps<T>): react_jsx_runtime108.JSX.Element;
+}: OptionsSectionProps<T>): react_jsx_runtime150.JSX.Element;
 //#endregion
 export { OptionsSection };
 //# sourceMappingURL=section.d.ts.map

package/dist/components/pagination/context.d.ts

@@ -12,10 +12,10 @@
 
 import { PaginationContextValue } from "./types.js";
 import "client-only";
-import * as react26 from "react";
+import * as react40 from "react";
 
 //#region src/components/pagination/context.d.ts
-declare const PaginationContext: react26.Context<PaginationContextValue>;
+declare const PaginationContext: react40.Context<PaginationContextValue>;
 //#endregion
 export { PaginationContext };
 //# sourceMappingURL=context.d.ts.map

package/dist/components/pagination/index.d.ts

@@ -12,7 +12,7 @@
 
 import { PaginationProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime110 from "react/jsx-runtime";
+import * as react_jsx_runtime151 from "react/jsx-runtime";
 
 //#region src/components/pagination/index.d.ts
 /**
@@ -39,7 +39,7 @@ declare function Pagination({
   isLoading,
   onChange,
   ...rest
-}: PaginationProps): react_jsx_runtime110.JSX.Element;
+}: PaginationProps): react_jsx_runtime151.JSX.Element;
 //#endregion
 export { Pagination };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/pagination/next.d.ts

@@ -12,13 +12,13 @@
 
 import { PaginationNextProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime112 from "react/jsx-runtime";
+import * as react_jsx_runtime152 from "react/jsx-runtime";
 
 //#region src/components/pagination/next.d.ts
 declare function PaginationNext({
   className,
   onPress
-}: PaginationNextProps): react_jsx_runtime112.JSX.Element;
+}: PaginationNextProps): react_jsx_runtime152.JSX.Element;
 //#endregion
 export { PaginationNext };
 //# sourceMappingURL=next.d.ts.map

package/dist/components/pagination/pages.d.ts

@@ -12,13 +12,13 @@
 
 import { PaginationPagesProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime114 from "react/jsx-runtime";
+import * as react_jsx_runtime154 from "react/jsx-runtime";
 
 //#region src/components/pagination/pages.d.ts
 declare function PaginationPages({
   className,
   onPress
-}: PaginationPagesProps): react_jsx_runtime114.JSX.Element[] | null;
+}: PaginationPagesProps): react_jsx_runtime154.JSX.Element[] | null;
 //#endregion
 export { PaginationPages };
 //# sourceMappingURL=pages.d.ts.map

package/dist/components/pagination/prev.d.ts

@@ -12,13 +12,13 @@
 
 import { PaginationPrevProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime116 from "react/jsx-runtime";
+import * as react_jsx_runtime144 from "react/jsx-runtime";
 
 //#region src/components/pagination/prev.d.ts
 declare function PaginationPrev({
   className,
   onPress
-}: PaginationPrevProps): react_jsx_runtime116.JSX.Element;
+}: PaginationPrevProps): react_jsx_runtime144.JSX.Element;
 //#endregion
 export { PaginationPrev };
 //# sourceMappingURL=prev.d.ts.map

package/dist/components/popover/content.d.ts

@@ -12,13 +12,13 @@
 
 import "client-only";
 import { ComponentPropsWithRef } from "react";
-import * as react_jsx_runtime123 from "react/jsx-runtime";
+import * as react_jsx_runtime179 from "react/jsx-runtime";
 
 //#region src/components/popover/content.d.ts
 declare function PopoverContent({
   className,
   ...rest
-}: ComponentPropsWithRef<'div'>): react_jsx_runtime123.JSX.Element;
+}: ComponentPropsWithRef<'div'>): react_jsx_runtime179.JSX.Element;
 //#endregion
 export { PopoverContent };
 //# sourceMappingURL=content.d.ts.map

package/dist/components/popover/footer.d.ts

@@ -12,13 +12,13 @@
 
 import "client-only";
 import { ComponentPropsWithRef } from "react";
-import * as react_jsx_runtime124 from "react/jsx-runtime";
+import * as react_jsx_runtime180 from "react/jsx-runtime";
 
 //#region src/components/popover/footer.d.ts
 declare function PopoverFooter({
   children,
   className
-}: ComponentPropsWithRef<'footer'>): react_jsx_runtime124.JSX.Element;
+}: ComponentPropsWithRef<'footer'>): react_jsx_runtime180.JSX.Element;
 //#endregion
 export { PopoverFooter };
 //# sourceMappingURL=footer.d.ts.map

package/dist/components/popover/index.d.ts

@@ -12,7 +12,7 @@
 
 import { PopoverProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime127 from "react/jsx-runtime";
+import * as react_jsx_runtime178 from "react/jsx-runtime";
 
 //#region src/components/popover/index.d.ts
 
@@ -51,7 +51,7 @@ declare function Popover({
   children,
   classNames,
   ...rest
-}: PopoverProps): react_jsx_runtime127.JSX.Element;
+}: PopoverProps): react_jsx_runtime178.JSX.Element;
 //#endregion
 export { Popover };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/popover/title.d.ts

@@ -12,13 +12,13 @@
 
 import "client-only";
 import { HeadingProps } from "react-aria-components";
-import * as react_jsx_runtime128 from "react/jsx-runtime";
+import * as react_jsx_runtime176 from "react/jsx-runtime";
 
 //#region src/components/popover/title.d.ts
 declare function PopoverTitle({
   className,
   ...rest
-}: HeadingProps): react_jsx_runtime128.JSX.Element;
+}: HeadingProps): react_jsx_runtime176.JSX.Element;
 //#endregion
 export { PopoverTitle };
 //# sourceMappingURL=title.d.ts.map

package/dist/components/popover/trigger.d.ts

@@ -12,14 +12,14 @@
 
 import { PopoverTriggerProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime182 from "react/jsx-runtime";
 
 //#region src/components/popover/trigger.d.ts
 declare function PopoverTrigger({
   ref,
   children,
   ...rest
-}: PopoverTriggerProps): react_jsx_runtime4.JSX.Element;
+}: PopoverTriggerProps): react_jsx_runtime182.JSX.Element;
 //#endregion
 export { PopoverTrigger };
 //# sourceMappingURL=trigger.d.ts.map

package/dist/components/query-builder/action-element.d.ts

@@ -11,7 +11,7 @@
  */
 
 import "client-only";
-import * as react_jsx_runtime31 from "react/jsx-runtime";
+import * as react_jsx_runtime181 from "react/jsx-runtime";
 import { ActionProps } from "react-querybuilder";
 
 //#region src/components/query-builder/action-element.d.ts
@@ -20,7 +20,7 @@ declare function ActionElement({
   disabledTranslation,
   title: titleProp,
   handleOnClick
-}: ActionProps): react_jsx_runtime31.JSX.Element;
+}: ActionProps): react_jsx_runtime181.JSX.Element;
 //#endregion
 export { ActionElement };
 //# sourceMappingURL=action-element.d.ts.map

package/dist/components/query-builder/actions.d.ts

@@ -11,7 +11,7 @@
  */
 
 import "client-only";
-import * as react_jsx_runtime32 from "react/jsx-runtime";
+import * as react_jsx_runtime183 from "react/jsx-runtime";
 import { ActionProps } from "react-querybuilder";
 
 //#region src/components/query-builder/actions.d.ts
@@ -19,17 +19,17 @@ declare function RemoveRuleAction({
   handleOnClick,
   className,
   ...rest
-}: ActionProps): react_jsx_runtime32.JSX.Element;
+}: ActionProps): react_jsx_runtime183.JSX.Element;
 declare function LockAction({
   handleOnClick,
   className,
   ...rest
-}: ActionProps): react_jsx_runtime32.JSX.Element;
+}: ActionProps): react_jsx_runtime183.JSX.Element;
 declare function CloneAction({
   handleOnClick,
   className,
   ...rest
-}: ActionProps): react_jsx_runtime32.JSX.Element;
+}: ActionProps): react_jsx_runtime183.JSX.Element;
 //#endregion
 export { CloneAction, LockAction, RemoveRuleAction };
 //# sourceMappingURL=actions.d.ts.map

package/dist/components/query-builder/combinator-selector.d.ts

@@ -11,7 +11,7 @@
  */
 
 import "client-only";
-import * as react_jsx_runtime35 from "react/jsx-runtime";
+import * as react_jsx_runtime188 from "react/jsx-runtime";
 import { CombinatorSelectorProps } from "react-querybuilder";
 
 //#region src/components/query-builder/combinator-selector.d.ts
@@ -19,7 +19,7 @@ declare function CombinatorSelector({
   options,
   value,
   handleOnChange
-}: CombinatorSelectorProps): react_jsx_runtime35.JSX.Element;
+}: CombinatorSelectorProps): react_jsx_runtime188.JSX.Element;
 //#endregion
 export { CombinatorSelector };
 //# sourceMappingURL=combinator-selector.d.ts.map

package/dist/components/query-builder/index.d.ts

@@ -12,7 +12,7 @@
 
 import { QueryBuilderProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime37 from "react/jsx-runtime";
+import * as react_jsx_runtime126 from "react/jsx-runtime";
 
 //#region src/components/query-builder/index.d.ts
 
@@ -46,7 +46,7 @@ declare function QueryBuilder({
   orientation,
   showRuleLines,
   ...rest
-}: QueryBuilderProps): react_jsx_runtime37.JSX.Element;
+}: QueryBuilderProps): react_jsx_runtime126.JSX.Element;
 //#endregion
 export { QueryBuilder };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/query-builder/rule-group.d.ts

@@ -11,13 +11,13 @@
  */
 
 import "client-only";
-import * as react_jsx_runtime38 from "react/jsx-runtime";
+import * as react_jsx_runtime127 from "react/jsx-runtime";
 import { RuleGroupProps, useRuleGroup } from "react-querybuilder";
 
 //#region src/components/query-builder/rule-group.d.ts
-declare function RuleGroup(props: RuleGroupProps): react_jsx_runtime38.JSX.Element;
-declare function RuleGroupHeaderComponent(ruleGroup: RuleGroupProps & ReturnType<typeof useRuleGroup>): react_jsx_runtime38.JSX.Element;
-declare function RuleGroupFooterComponent(ruleGroup: RuleGroupProps & ReturnType<typeof useRuleGroup>): react_jsx_runtime38.JSX.Element;
+declare function RuleGroup(props: RuleGroupProps): react_jsx_runtime127.JSX.Element;
+declare function RuleGroupHeaderComponent(ruleGroup: RuleGroupProps & ReturnType<typeof useRuleGroup>): react_jsx_runtime127.JSX.Element;
+declare function RuleGroupFooterComponent(ruleGroup: RuleGroupProps & ReturnType<typeof useRuleGroup>): react_jsx_runtime127.JSX.Element;
 //#endregion
 export { RuleGroup, RuleGroupFooterComponent, RuleGroupHeaderComponent };
 //# sourceMappingURL=rule-group.d.ts.map