@frame-ui-ng/components 0.1.0-beta.0 → 0.2.0-beta.0

package/tooltip/src/styles/_vars.css

@@ -1,21 +1,21 @@
-:root {
-  --frame-tooltip-content-bg: var(--frame-foreground, #09090b);
-  --frame-tooltip-content-color: var(--frame-background, #fff);
-  --frame-tooltip-content-border: transparent;
-  --frame-tooltip-content-radius: var(--frame-radius-md, 0.5rem);
-  --frame-tooltip-content-shadow: 0 12px 32px rgb(0 0 0 / 0.18);
-  --frame-tooltip-content-padding: 0.375rem 0.625rem;
-  --frame-tooltip-content-max-width: 18rem;
-  --frame-tooltip-content-font-size: 0.8125rem;
-  --frame-tooltip-content-font-weight: 500;
-  --frame-tooltip-content-line-height: 1.35;
-  --frame-tooltip-shortcut-bg: color-mix(in srgb, currentColor 14%, transparent);
-  --frame-tooltip-shortcut-radius: 0.25rem;
-  --frame-tooltip-shortcut-padding: 0.0625rem 0.3125rem;
-  --frame-tooltip-shortcut-font-size: 0.75rem;
-  --frame-tooltip-arrow-size: 0.5rem;
-  --frame-tooltip-motion-duration: 140ms;
-  --frame-tooltip-motion-distance: 0.25rem;
-  --frame-tooltip-motion-scale: 0.96;
-  --frame-tooltip-motion-easing: cubic-bezier(0.16, 1, 0.3, 1);
-}
+:root {
+  --frame-tooltip-content-bg: var(--frame-surface, #fff);
+  --frame-tooltip-content-color: var(--frame-foreground, #09090b);
+  --frame-tooltip-content-border: var(--frame-frame-line-muted, var(--frame-border, #d4d4d8));
+  --frame-tooltip-content-radius: var(--frame-radius-md, 0.5rem);
+  --frame-tooltip-content-shadow: 0 12px 32px rgb(0 0 0 / 0.18);
+  --frame-tooltip-content-padding: 0.375rem 0.625rem;
+  --frame-tooltip-content-max-width: 18rem;
+  --frame-tooltip-content-font-size: 0.8125rem;
+  --frame-tooltip-content-font-weight: 500;
+  --frame-tooltip-content-line-height: 1.35;
+  --frame-tooltip-shortcut-bg: color-mix(in srgb, currentColor 14%, transparent);
+  --frame-tooltip-shortcut-radius: 0;
+  --frame-tooltip-shortcut-padding: 0.0625rem 0.3125rem;
+  --frame-tooltip-shortcut-font-size: 0.75rem;
+  --frame-tooltip-arrow-size: 0.5rem;
+  --frame-tooltip-motion-duration: 140ms;
+  --frame-tooltip-motion-distance: 0.25rem;
+  --frame-tooltip-motion-scale: 0.96;
+  --frame-tooltip-motion-easing: cubic-bezier(0.16, 1, 0.3, 1);
+}

package/tooltip/src/styles/tooltip.css

@@ -1,103 +1,105 @@
-@import './_vars.css';
-
-frame-tooltip {
-  display: inline-block;
-}
-
-.frame-tooltip__anchor {
-  display: inline-flex;
-}
-
-[frTooltipTrigger] {
-  cursor: default;
-}
-
-.frame-tooltip__content {
-  position: relative;
-  max-width: min(var(--frame-tooltip-content-max-width), calc(100vw - 1rem));
-  border: 1px solid var(--frame-tooltip-content-border);
-  border-radius: var(--frame-tooltip-content-radius);
-  background: var(--frame-tooltip-content-bg);
-  box-shadow: var(--frame-tooltip-content-shadow);
-  color: var(--frame-tooltip-content-color);
-  font-size: var(--frame-tooltip-content-font-size);
-  font-weight: var(--frame-tooltip-content-font-weight);
-  line-height: var(--frame-tooltip-content-line-height);
-  padding: var(--frame-tooltip-content-padding);
-  transform-origin: var(--frame-tooltip-transform-origin, center);
-  animation: frame-tooltip-in var(--frame-tooltip-motion-duration) var(--frame-tooltip-motion-easing);
-}
-
-.frame-tooltip-overlay--top .frame-tooltip__content {
-  --frame-tooltip-transform-origin: bottom;
-}
-
-.frame-tooltip-overlay--right .frame-tooltip__content {
-  --frame-tooltip-transform-origin: left;
-}
-
-.frame-tooltip-overlay--bottom .frame-tooltip__content {
-  --frame-tooltip-transform-origin: top;
-}
-
-.frame-tooltip-overlay--left .frame-tooltip__content {
-  --frame-tooltip-transform-origin: right;
-}
-
-.frame-tooltip__content[data-arrow]::after {
-  content: '';
-  position: absolute;
-  inline-size: var(--frame-tooltip-arrow-size);
-  block-size: var(--frame-tooltip-arrow-size);
-  background: var(--frame-tooltip-content-bg);
-  transform: rotate(45deg);
-}
-
-.frame-tooltip__content[data-arrow][data-side='top']::after {
-  inset-block-end: calc(var(--frame-tooltip-arrow-size) / -2);
-  inset-inline-start: calc(50% - var(--frame-tooltip-arrow-size) / 2);
-}
-
-.frame-tooltip__content[data-arrow][data-side='bottom']::after {
-  inset-block-start: calc(var(--frame-tooltip-arrow-size) / -2);
-  inset-inline-start: calc(50% - var(--frame-tooltip-arrow-size) / 2);
-}
-
-.frame-tooltip__content[data-arrow][data-side='left']::after {
-  inset-block-start: calc(50% - var(--frame-tooltip-arrow-size) / 2);
-  inset-inline-end: calc(var(--frame-tooltip-arrow-size) / -2);
-}
-
-.frame-tooltip__content[data-arrow][data-side='right']::after {
-  inset-block-start: calc(50% - var(--frame-tooltip-arrow-size) / 2);
-  inset-inline-start: calc(var(--frame-tooltip-arrow-size) / -2);
-}
-
-[frTooltipShortcut],
-.frame-tooltip__shortcut {
-  border-radius: var(--frame-tooltip-shortcut-radius);
-  background: var(--frame-tooltip-shortcut-bg);
-  font: inherit;
-  font-size: var(--frame-tooltip-shortcut-font-size);
-  line-height: 1;
-  padding: var(--frame-tooltip-shortcut-padding);
-  white-space: nowrap;
-}
-
-@keyframes frame-tooltip-in {
-  from {
-    opacity: 0;
-    transform: translateY(var(--frame-tooltip-motion-distance)) scale(var(--frame-tooltip-motion-scale));
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .frame-tooltip__content {
-    animation: none;
-  }
-}
+@import './_vars.css';
+
+frame-tooltip {
+  display: inline-block;
+}
+
+.frame-tooltip__anchor {
+  display: inline-flex;
+}
+
+[frTooltipTrigger] {
+  cursor: default;
+}
+
+.frame-tooltip__content {
+  position: relative;
+  --frame-blueprint-corner-inset: 0.125rem;
+  max-width: min(var(--frame-tooltip-content-max-width), calc(100vw - 1rem));
+  border: 1px solid var(--frame-tooltip-content-border);
+  border-radius: var(--frame-tooltip-content-radius);
+  background: var(--frame-tooltip-content-bg);
+  box-shadow: var(--frame-tooltip-content-shadow);
+  color: var(--frame-tooltip-content-color);
+  font-size: var(--frame-tooltip-content-font-size);
+  font-weight: var(--frame-tooltip-content-font-weight);
+  line-height: var(--frame-tooltip-content-line-height);
+  padding: var(--frame-tooltip-content-padding);
+  transform-origin: var(--frame-tooltip-transform-origin, center);
+  animation: frame-tooltip-in var(--frame-tooltip-motion-duration) var(--frame-tooltip-motion-easing);
+}
+
+.frame-tooltip-overlay--top .frame-tooltip__content {
+  --frame-tooltip-transform-origin: bottom;
+}
+
+.frame-tooltip-overlay--right .frame-tooltip__content {
+  --frame-tooltip-transform-origin: left;
+}
+
+.frame-tooltip-overlay--bottom .frame-tooltip__content {
+  --frame-tooltip-transform-origin: top;
+}
+
+.frame-tooltip-overlay--left .frame-tooltip__content {
+  --frame-tooltip-transform-origin: right;
+}
+
+.frame-tooltip__content[data-arrow]::after {
+  content: '';
+  position: absolute;
+  inline-size: var(--frame-tooltip-arrow-size);
+  block-size: var(--frame-tooltip-arrow-size);
+  background: var(--frame-tooltip-content-bg);
+  transform: rotate(45deg);
+}
+
+.frame-tooltip__content[data-arrow][data-side='top']::after {
+  inset-block-end: calc(var(--frame-tooltip-arrow-size) / -2);
+  inset-inline-start: calc(50% - var(--frame-tooltip-arrow-size) / 2);
+}
+
+.frame-tooltip__content[data-arrow][data-side='bottom']::after {
+  inset-block-start: calc(var(--frame-tooltip-arrow-size) / -2);
+  inset-inline-start: calc(50% - var(--frame-tooltip-arrow-size) / 2);
+}
+
+.frame-tooltip__content[data-arrow][data-side='left']::after {
+  inset-block-start: calc(50% - var(--frame-tooltip-arrow-size) / 2);
+  inset-inline-end: calc(var(--frame-tooltip-arrow-size) / -2);
+}
+
+.frame-tooltip__content[data-arrow][data-side='right']::after {
+  inset-block-start: calc(50% - var(--frame-tooltip-arrow-size) / 2);
+  inset-inline-start: calc(var(--frame-tooltip-arrow-size) / -2);
+}
+
+[frTooltipShortcut],
+.frame-tooltip__shortcut {
+  border: 1px solid var(--frame-frame-line-muted, var(--frame-border));
+  border-radius: var(--frame-tooltip-shortcut-radius);
+  background: var(--frame-tooltip-shortcut-bg);
+  font: inherit;
+  font-size: var(--frame-tooltip-shortcut-font-size);
+  line-height: 1;
+  padding: var(--frame-tooltip-shortcut-padding);
+  white-space: nowrap;
+}
+
+@keyframes frame-tooltip-in {
+  from {
+    opacity: 0;
+    transform: translateY(var(--frame-tooltip-motion-distance)) scale(var(--frame-tooltip-motion-scale));
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .frame-tooltip__content {
+    animation: none;
+  }
+}

package/types/frame-ui-ng-components-accordion.d.ts

@@ -13,12 +13,14 @@ declare class FrAccordionContent {
     private readonly host;
     protected readonly item: FrAccordionItemContext;
     private initialized;
-    private rafId;
+    private rafIds;
     constructor();
     onTransitionEnd(event: TransitionEvent): void;
     private animate;
     private applyStaticState;
+    private measureContentHeight;
     private cancelAnimationFrame;
+    private requestAnimationFrame;
     static ɵfac: i0.ɵɵFactoryDeclaration<FrAccordionContent, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrAccordionContent, "[frAccordionContent]", never, {}, {}, never, never, true, never>;
 }

package/types/frame-ui-ng-components-badge.d.ts

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
 import * as i1 from '@frame-ui-ng/components/spinner';
 
-declare const FR_BADGE_VARIANTS: readonly ["default", "secondary", "destructive", "outline", "ghost", "link"];
+declare const FR_BADGE_VARIANTS: readonly ["default", "secondary", "success", "destructive", "outline", "ghost", "link"];
 declare const FR_BADGE_ICON_POSITIONS: readonly ["inline-start", "inline-end"];
 type FrBadgeVariant = (typeof FR_BADGE_VARIANTS)[number];
 type FrBadgeIconPosition = (typeof FR_BADGE_ICON_POSITIONS)[number];
 declare class FrBadge {
-    readonly variant: i0.InputSignal<"default" | "secondary" | "destructive" | "outline" | "ghost" | "link">;
+    readonly variant: i0.InputSignal<"default" | "secondary" | "success" | "destructive" | "outline" | "ghost" | "link">;
     static ɵfac: i0.ɵɵFactoryDeclaration<FrBadge, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrBadge, "[frBadge], frame-badge", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/types/frame-ui-ng-components-command.d.ts

@@ -53,6 +53,11 @@ declare class FrCommandService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<FrCommandService>;
 }
 
+declare class FrCommandFooter {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FrCommandFooter, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FrCommandFooter, "[frCommandFooter]", never, {}, {}, never, never, true, never>;
+}
+
 declare class FrCommandItem {
     private readonly destroyRef;
     private readonly elementRef;
@@ -190,9 +195,9 @@ declare class FrCommandSeparator {
 
 declare class FrCommandModule {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FrCommandModule, never>;
-    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<FrCommandModule, never, [typeof FrCommand, typeof FrCommandDialog, typeof FrCommandDialogTrigger, typeof FrCommandEmpty, typeof FrCommandGroup, typeof FrCommandGroupHeading, typeof FrCommandInput, typeof FrCommandItem, typeof FrCommandItemIcon, typeof FrCommandList, typeof FrCommandSeparator, typeof FrCommandShortcut], [typeof FrCommand, typeof FrCommandDialog, typeof FrCommandDialogTrigger, typeof FrCommandEmpty, typeof FrCommandGroup, typeof FrCommandGroupHeading, typeof FrCommandInput, typeof FrCommandItem, typeof FrCommandItemIcon, typeof FrCommandList, typeof FrCommandSeparator, typeof FrCommandShortcut]>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<FrCommandModule, never, [typeof FrCommand, typeof FrCommandDialog, typeof FrCommandDialogTrigger, typeof FrCommandEmpty, typeof FrCommandFooter, typeof FrCommandGroup, typeof FrCommandGroupHeading, typeof FrCommandInput, typeof FrCommandItem, typeof FrCommandItemIcon, typeof FrCommandList, typeof FrCommandSeparator, typeof FrCommandShortcut], [typeof FrCommand, typeof FrCommandDialog, typeof FrCommandDialogTrigger, typeof FrCommandEmpty, typeof FrCommandFooter, typeof FrCommandGroup, typeof FrCommandGroupHeading, typeof FrCommandInput, typeof FrCommandItem, typeof FrCommandItemIcon, typeof FrCommandList, typeof FrCommandSeparator, typeof FrCommandShortcut]>;
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<FrCommandModule>;
 }
 
-export { FrCommand, FrCommandDialog, FrCommandDialogTrigger, FrCommandEmpty, FrCommandGroup, FrCommandGroupHeading, FrCommandInput, FrCommandItem, FrCommandItemIcon, FrCommandList, FrCommandModule, FrCommandSeparator, FrCommandService, FrCommandShortcut };
+export { FrCommand, FrCommandDialog, FrCommandDialogTrigger, FrCommandEmpty, FrCommandFooter, FrCommandGroup, FrCommandGroupHeading, FrCommandInput, FrCommandItem, FrCommandItemIcon, FrCommandList, FrCommandModule, FrCommandSeparator, FrCommandService, FrCommandShortcut };
 export type { FrCommandDialogConfig, FrCommandDialogRef, FrCommandFilter };

package/types/frame-ui-ng-components.d.ts

@@ -29,12 +29,14 @@ declare class FrAccordionContent {
     private readonly host;
     protected readonly item: FrAccordionItemContext;
     private initialized;
-    private rafId;
+    private rafIds;
     constructor();
     onTransitionEnd(event: TransitionEvent): void;
     private animate;
     private applyStaticState;
+    private measureContentHeight;
     private cancelAnimationFrame;
+    private requestAnimationFrame;
     static ɵfac: i0.ɵɵFactoryDeclaration<FrAccordionContent, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrAccordionContent, "[frAccordionContent]", never, {}, {}, never, never, true, never>;
 }
@@ -84,7 +86,7 @@ type FrAccordionType = (typeof FR_ACCORDION_TYPES)[number];
 declare const FR_ALERT_VARIANTS: readonly ["default", "destructive", "success", "danger", "info"];
 type FrAlertVariant = (typeof FR_ALERT_VARIANTS)[number];
 declare class FrAlert {
-    readonly variant: i0.InputSignal<"default" | "destructive" | "success" | "danger" | "info">;
+    readonly variant: i0.InputSignal<"default" | "success" | "destructive" | "danger" | "info">;
     static ɵfac: i0.ɵɵFactoryDeclaration<FrAlert, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrAlert, "[frAlert]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -119,7 +121,7 @@ declare class FrAvatarFallback {
 
 declare class FrAvatarGroup {
     readonly expandOnHover: i0.InputSignalWithTransform<boolean, unknown>;
-    readonly size: i0.InputSignal<"xs" | "sm" | "md" | "lg">;
+    readonly size: i0.InputSignal<"lg" | "md" | "sm" | "xs">;
     static ɵfac: i0.ɵɵFactoryDeclaration<FrAvatarGroup, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrAvatarGroup, "[frAvatarGroup]", never, { "expandOnHover": { "alias": "expandOnHover"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -145,7 +147,7 @@ declare class FrAvatarImage implements AfterViewInit {
 }
 
 declare class FrAvatar {
-    readonly size: i0.InputSignal<"xs" | "sm" | "md" | "lg">;
+    readonly size: i0.InputSignal<"lg" | "md" | "sm" | "xs">;
     readonly status: i0.WritableSignal<"error" | "idle" | "loaded">;
     setStatus(status: 'error' | 'idle' | 'loaded'): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FrAvatar, never>;
@@ -155,12 +157,12 @@ declare class FrAvatar {
 declare const FR_AVATAR_SIZES: readonly ["xs", "sm", "md", "lg"];
 type FrAvatarSize = (typeof FR_AVATAR_SIZES)[number];
 
-declare const FR_BADGE_VARIANTS: readonly ["default", "secondary", "destructive", "outline", "ghost", "link"];
+declare const FR_BADGE_VARIANTS: readonly ["default", "secondary", "success", "destructive", "outline", "ghost", "link"];
 declare const FR_BADGE_ICON_POSITIONS: readonly ["inline-start", "inline-end"];
 type FrBadgeVariant = (typeof FR_BADGE_VARIANTS)[number];
 type FrBadgeIconPosition = (typeof FR_BADGE_ICON_POSITIONS)[number];
 declare class FrBadge {
-    readonly variant: i0.InputSignal<"default" | "destructive" | "secondary" | "outline" | "ghost" | "link">;
+    readonly variant: i0.InputSignal<"default" | "secondary" | "success" | "destructive" | "outline" | "ghost" | "link">;
     static ɵfac: i0.ɵɵFactoryDeclaration<FrBadge, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrBadge, "[frBadge], frame-badge", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -225,8 +227,8 @@ declare class FrButton {
     readonly disabled: i0.InputSignalWithTransform<boolean, unknown>;
     readonly loading: i0.InputSignalWithTransform<boolean, unknown>;
     readonly loadingDisplay: i0.InputSignal<"inline" | "replace">;
-    readonly radius: i0.InputSignal<"sm" | "md" | "lg" | "full" | "none">;
-    readonly size: i0.InputSignal<"sm" | "md" | "lg">;
+    readonly radius: i0.InputSignal<"full" | "lg" | "md" | "none" | "sm">;
+    readonly size: i0.InputSignal<"lg" | "md" | "sm">;
     protected readonly hasCustomLoadingIndicator: i0.Signal<boolean>;
     protected readonly isUnavailable: i0.Signal<boolean>;
     static ɵfac: i0.ɵɵFactoryDeclaration<FrButton, never>;
@@ -357,7 +359,7 @@ declare class FrCard {
     private readonly elementRef;
     private readonly renderer;
     readonly size: i0.InputSignal<"default" | "sm">;
-    readonly spacing: i0.InputSignal<"sm" | "md" | "lg" | "xl" | null>;
+    readonly spacing: i0.InputSignal<"lg" | "md" | "sm" | "xl" | null>;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<FrCard, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrCard, "[frCard], frame-card", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "spacing": { "alias": "spacing"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
@@ -791,6 +793,11 @@ declare class FrCommandService {
     static ɵprov: i0.ɵɵInjectableDeclaration<FrCommandService>;
 }
 
+declare class FrCommandFooter {
+    static ɵfac: i0.ɵɵFactoryDeclaration<FrCommandFooter, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<FrCommandFooter, "[frCommandFooter]", never, {}, {}, never, never, true, never>;
+}
+
 declare class FrCommandItem {
     private readonly destroyRef;
     private readonly elementRef;
@@ -1629,7 +1636,7 @@ type FrItemMediaVariant = (typeof FR_ITEM_MEDIA_VARIANTS)[number];
 declare class FrItem {
     readonly disabled: i0.InputSignalWithTransform<boolean, unknown>;
     readonly interactive: i0.InputSignalWithTransform<boolean, unknown>;
-    readonly size: i0.InputSignal<"default" | "xs" | "sm">;
+    readonly size: i0.InputSignal<"default" | "sm" | "xs">;
     readonly variant: i0.InputSignal<"default" | "outline" | "muted">;
     static ɵfac: i0.ɵɵFactoryDeclaration<FrItem, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrItem, "[frItem], frame-item", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
@@ -1823,7 +1830,7 @@ declare class FrModalClose {
 declare class FrModalPanel {
     readonly scrollable: i0.InputSignalWithTransform<boolean, unknown>;
     readonly showCloseButton: i0.InputSignalWithTransform<boolean, unknown>;
-    readonly size: i0.InputSignal<"sm" | "md" | "lg" | "full" | "xl">;
+    readonly size: i0.InputSignal<"full" | "lg" | "md" | "sm" | "xl">;
     readonly stickyFooter: i0.InputSignalWithTransform<boolean, unknown>;
     static ɵfac: i0.ɵɵFactoryDeclaration<FrModalPanel, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<FrModalPanel, "[frModalPanel], frame-modal-panel", never, { "scrollable": { "alias": "scrollable"; "required": false; "isSignal": true; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "stickyFooter": { "alias": "stickyFooter"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
@@ -1902,7 +1909,7 @@ declare class FrNavigationMenuLink {
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrNavigationMenuLink, "[frNavigationMenuLink], a[frNavigationMenuLink]", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 declare class FrNavigationMenuGrid {
-    readonly columns: i0.InputSignal<1 | 2 | 3>;
+    readonly columns: i0.InputSignal<2 | 3 | 1>;
     static ɵfac: i0.ɵɵFactoryDeclaration<FrNavigationMenuGrid, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrNavigationMenuGrid, "[frNavigationMenuGrid]", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -2576,7 +2583,7 @@ declare class FrSidebarMenuItem {
 declare class FrSidebarMenuButton {
     readonly active: i0.InputSignalWithTransform<boolean, unknown>;
     readonly disabled: i0.InputSignalWithTransform<boolean, unknown>;
-    readonly size: i0.InputSignalWithTransform<"default" | "sm" | "lg", unknown>;
+    readonly size: i0.InputSignalWithTransform<"default" | "lg" | "sm", unknown>;
     readonly variant: i0.InputSignalWithTransform<"default" | "outline", unknown>;
     readonly tooltip: i0.InputSignal<string | null>;
     handleClick(event: Event): void;
@@ -2742,5 +2749,5 @@ declare class FrVirtualViewport {
     static ɵdir: i0.ɵɵDirectiveDeclaration<FrVirtualViewport, "[frVirtualViewport], frame-virtual-viewport", ["frVirtualViewport"], { "itemSize": { "alias": "itemSize"; "required": true; "isSignal": true; }; "overscan": { "alias": "overscan"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-export { FR_ACCORDION_TYPES, FR_ALERT_VARIANTS, FR_AVATAR_SIZES, FR_BADGE_ICON_POSITIONS, FR_BADGE_VARIANTS, FR_BUTTON_APPEARANCES, FR_BUTTON_GROUP_ORIENTATIONS, FR_BUTTON_LOADING_DISPLAYS, FR_BUTTON_RADII, FR_BUTTON_SIZES, FR_CARD_FOOTER_ALIGNS, FR_CARD_SIZES, FR_CARD_SPACINGS, FR_CAROUSEL_ALIGNS, FR_CAROUSEL_DIRECTIONS, FR_CAROUSEL_ORIENTATIONS, FR_CONTEXT_MENU_CONTENT, FR_DROPDOWN_MENU_ALIGNMENTS, FR_DROPDOWN_MENU_CONTENT, FR_DROPDOWN_MENU_ITEM_VARIANTS, FR_DROPDOWN_MENU_PARENT, FR_DROPDOWN_MENU_SIDES, FR_DROPDOWN_MENU_TRIGGER_MODES, FR_EMPTY_MEDIA_VARIANTS, FR_EMPTY_ORIENTATIONS, FR_EMPTY_VARIANTS, FR_FIELD_LEGEND_VARIANTS, FR_FIELD_ORIENTATIONS, FR_HOVER_CARD_ALIGNMENTS, FR_HOVER_CARD_SIDES, FR_INPUT_GROUP_ADDON_ALIGNS, FR_INPUT_OTP_PATTERN_DIGITS, FR_INPUT_OTP_PATTERN_DIGITS_AND_CHARS, FR_ITEM_MEDIA_VARIANTS, FR_ITEM_SIZES, FR_ITEM_VARIANTS, FR_MENUBAR_PARENT, FR_MODAL_DATA, FR_NAVIGATION_MENU_PARENT, FR_POPOVER_ALIGNMENTS, FR_POPOVER_SIDES, FR_RADIO_GROUP_ORIENTATIONS, FR_RADIO_GROUP_VARIANTS, FR_RESIZABLE_ORIENTATIONS, FR_SELECT_INDICATOR_POSITIONS, FR_SELECT_POSITIONS, FR_SEPARATOR_ORIENTATIONS, FR_SHEET_DATA, FR_SHEET_SIDES, FR_SIDEBAR_COLLAPSIBLES, FR_SIDEBAR_MENU_BUTTON_SIZES, FR_SIDEBAR_MENU_BUTTON_VARIANTS, FR_SIDEBAR_PROVIDER, FR_SIDEBAR_SIDES, FR_SIDEBAR_VARIANTS, FR_SLIDER_ORIENTATIONS, FR_SWITCH_SIZES, FrAccordion, FrAccordionContent, FrAccordionIcon, FrAccordionItem, FrAccordionTrigger, FrAlert, FrAlertDescription, FrAlertIcon, FrAlertTitle, FrAvatar, FrAvatarBadge, FrAvatarFallback, FrAvatarGroup, FrAvatarGroupCount, FrAvatarIcon, FrAvatarImage, FrBadge, FrBadgeIcon, FrBadgeLabel, FrBadgeSpinner, FrBreadcrumb, FrBreadcrumbEllipsis, FrBreadcrumbItem, FrBreadcrumbLink, FrBreadcrumbList, FrBreadcrumbPage, FrBreadcrumbSeparator, FrButton, FrButtonGroup, FrButtonIcon, FrButtonLabel, FrButtonLoading, FrCalendar, FrCard, FrCardAction, FrCardContent, FrCardDescription, FrCardFooter, FrCardHeader, FrCardTitle, FrCarousel, FrCarouselContent, FrCarouselItem, FrCarouselNext, FrCarouselPrevious, FrCheckbox, FrCheckboxField, FrCheckboxLabel, FrCollapsible, FrCollapsibleContent, FrCollapsibleTrigger, FrCombobox, FrComboboxChip, FrComboboxChipRemove, FrComboboxChips, FrComboboxChipsInput, FrComboboxClear, FrComboboxCollection, FrComboboxContent, FrComboboxEmpty, FrComboboxError, FrComboboxGroup, FrComboboxInput, FrComboboxItem, FrComboboxItemIndicator, FrComboboxLabel, FrComboboxList, FrComboboxPanel, FrComboboxRootLookup, FrComboboxSeparator, FrComboboxTrigger, FrComboboxValueList, FrCommand, FrCommandDialog, FrCommandDialogTrigger, FrCommandEmpty, FrCommandGroup, FrCommandGroupHeading, FrCommandInput, FrCommandItem, FrCommandItemIcon, FrCommandList, FrCommandSeparator, FrCommandService, FrCommandShortcut, FrContextMenu, FrContextMenuCheckboxItem, FrContextMenuContent, FrContextMenuItem, FrContextMenuItemIndicator, FrContextMenuLabel, FrContextMenuPanel, FrContextMenuRadioGroup, FrContextMenuRadioItem, FrContextMenuSeparator, FrContextMenuShortcut, FrContextMenuSub, FrContextMenuSubTrigger, FrContextMenuTrigger, FrControlValueAccessor, FrDatePicker, FrDropdownMenu, FrDropdownMenuCheckboxItem, FrDropdownMenuContent, FrDropdownMenuItem, FrDropdownMenuItemIndicator, FrDropdownMenuLabel, FrDropdownMenuPanel, FrDropdownMenuRadioGroup, FrDropdownMenuRadioItem, FrDropdownMenuSeparator, FrDropdownMenuShortcut, FrDropdownMenuSub, FrDropdownMenuSubTrigger, FrDropdownMenuTree, FrDropdownMenuTrigger, FrEmpty, FrEmptyContent, FrEmptyDescription, FrEmptyHeader, FrEmptyMedia, FrEmptyTitle, FrField, FrFieldContent, FrFieldDescription, FrFieldError, FrFieldGroup, FrFieldLabel, FrFieldLegend, FrFieldSeparator, FrFieldSet, FrHoverCardRoot as FrHoverCard, FrHoverCardContent, FrHoverCardPanel, FrHoverCardTrigger, FrIconButton, FrInput, FrInputBadge, FrInputControl, FrInputDescription, FrInputError, FrInputField, FrInputFieldGroup, FrInputGroup, FrInputGroupAddon, FrInputGroupInput, FrInputGroupText, FrInputHeader, FrInputLabel, FrInputOtp, FrInputOtpGroup, FrInputOtpSeparator, FrInputOtpSlot, FrItem, FrItemActions, FrItemContent, FrItemDescription, FrItemFooter, FrItemGroup, FrItemHeader, FrItemMedia, FrItemSeparator, FrItemTitle, FrMenuBar, FrMenuBarCheckboxItem, FrMenuBarContent, FrMenuBarItem, FrMenuBarItemIndicator, FrMenuBarLabel, FrMenuBarMenu, FrMenuBarPanel, FrMenuBarRadioGroup, FrMenuBarRadioItem, FrMenuBarSeparator, FrMenuBarShortcut, FrMenuBarSub, FrMenuBarSubTrigger, FrMenuBarTrigger, FrModalBody, FrModalClose, FrModalContent, FrModalDescription, FrModalFooter, FrModalHeader, FrModalPanel, FrModalService, FrModalShell, FrModalTitle, FrModalTrigger, FrNavigationLinkSeparator, FrNavigationMenu, FrNavigationMenuContent, FrNavigationMenuFeature, FrNavigationMenuGrid, FrNavigationMenuIndicator, FrNavigationMenuItem, FrNavigationMenuLink, FrNavigationMenuLinkDescription, FrNavigationMenuLinkTitle, FrNavigationMenuList, FrNavigationMenuPanel, FrNavigationMenuTrigger, FrNavigationMenuViewport, FrPagination, FrPaginationContent, FrPaginationEllipsis, FrPaginationIcon, FrPaginationItem, FrPaginationLink, FrPaginationNext, FrPaginationPrevious, FrPopoverRoot as FrPopover, FrPopoverBody, FrPopoverClose, FrPopoverContent, FrPopoverDescription, FrPopoverFooter, FrPopoverHeader, FrPopoverPanel, FrPopoverTitle, FrPopoverTrigger, FrProgress, FrProgressIndicator, FrRadioGroup, FrRadioGroupCard, FrRadioGroupCardMeta, FrRadioGroupField, FrRadioGroupItem, FrResizableHandle, FrResizablePanel, FrResizablePanelGroup, FrSelect, FrSelectContent, FrSelectError, FrSelectGroup, FrSelectIcon, FrSelectItem, FrSelectItemIndicator, FrSelectLabel, FrSelectPanel, FrSelectSeparator, FrSelectValue, FrSeparator, FrSheetBody, FrSheetClose, FrSheetContent, FrSheetDescription, FrSheetFooter, FrSheetHeader, FrSheetPanel, FrSheetService, FrSheetShell, FrSheetTitle, FrSheetTrigger, FrSidebar, FrSidebarContent, FrSidebarFooter, FrSidebarGroup, FrSidebarGroupAction, FrSidebarGroupContent, FrSidebarGroupLabel, FrSidebarHeader, FrSidebarInset, FrSidebarMenu, FrSidebarMenuAction, FrSidebarMenuBadge, FrSidebarMenuButton, FrSidebarMenuItem, FrSidebarMenuSkeleton, FrSidebarMenuSub, FrSidebarMenuSubButton, FrSidebarMenuSubItem, FrSidebarProvider, FrSidebarRail, FrSidebarTrigger, FrSlider, FrSwitch, FrSwitchContent, FrSwitchDescription, FrSwitchError, FrSwitchField, FrSwitchLabel, FrTextarea, FrVirtualContent, FrVirtualFor, FrVirtualItem, FrVirtualItemMeta, FrVirtualList, FrVirtualPanel, FrVirtualViewport, buildConnectedPositions, calculateScrollOffsetForIndex, calculateVirtualRange, defaultPositions, provideDsValueAccessor };
+export { FR_ACCORDION_TYPES, FR_ALERT_VARIANTS, FR_AVATAR_SIZES, FR_BADGE_ICON_POSITIONS, FR_BADGE_VARIANTS, FR_BUTTON_APPEARANCES, FR_BUTTON_GROUP_ORIENTATIONS, FR_BUTTON_LOADING_DISPLAYS, FR_BUTTON_RADII, FR_BUTTON_SIZES, FR_CARD_FOOTER_ALIGNS, FR_CARD_SIZES, FR_CARD_SPACINGS, FR_CAROUSEL_ALIGNS, FR_CAROUSEL_DIRECTIONS, FR_CAROUSEL_ORIENTATIONS, FR_CONTEXT_MENU_CONTENT, FR_DROPDOWN_MENU_ALIGNMENTS, FR_DROPDOWN_MENU_CONTENT, FR_DROPDOWN_MENU_ITEM_VARIANTS, FR_DROPDOWN_MENU_PARENT, FR_DROPDOWN_MENU_SIDES, FR_DROPDOWN_MENU_TRIGGER_MODES, FR_EMPTY_MEDIA_VARIANTS, FR_EMPTY_ORIENTATIONS, FR_EMPTY_VARIANTS, FR_FIELD_LEGEND_VARIANTS, FR_FIELD_ORIENTATIONS, FR_HOVER_CARD_ALIGNMENTS, FR_HOVER_CARD_SIDES, FR_INPUT_GROUP_ADDON_ALIGNS, FR_INPUT_OTP_PATTERN_DIGITS, FR_INPUT_OTP_PATTERN_DIGITS_AND_CHARS, FR_ITEM_MEDIA_VARIANTS, FR_ITEM_SIZES, FR_ITEM_VARIANTS, FR_MENUBAR_PARENT, FR_MODAL_DATA, FR_NAVIGATION_MENU_PARENT, FR_POPOVER_ALIGNMENTS, FR_POPOVER_SIDES, FR_RADIO_GROUP_ORIENTATIONS, FR_RADIO_GROUP_VARIANTS, FR_RESIZABLE_ORIENTATIONS, FR_SELECT_INDICATOR_POSITIONS, FR_SELECT_POSITIONS, FR_SEPARATOR_ORIENTATIONS, FR_SHEET_DATA, FR_SHEET_SIDES, FR_SIDEBAR_COLLAPSIBLES, FR_SIDEBAR_MENU_BUTTON_SIZES, FR_SIDEBAR_MENU_BUTTON_VARIANTS, FR_SIDEBAR_PROVIDER, FR_SIDEBAR_SIDES, FR_SIDEBAR_VARIANTS, FR_SLIDER_ORIENTATIONS, FR_SWITCH_SIZES, FrAccordion, FrAccordionContent, FrAccordionIcon, FrAccordionItem, FrAccordionTrigger, FrAlert, FrAlertDescription, FrAlertIcon, FrAlertTitle, FrAvatar, FrAvatarBadge, FrAvatarFallback, FrAvatarGroup, FrAvatarGroupCount, FrAvatarIcon, FrAvatarImage, FrBadge, FrBadgeIcon, FrBadgeLabel, FrBadgeSpinner, FrBreadcrumb, FrBreadcrumbEllipsis, FrBreadcrumbItem, FrBreadcrumbLink, FrBreadcrumbList, FrBreadcrumbPage, FrBreadcrumbSeparator, FrButton, FrButtonGroup, FrButtonIcon, FrButtonLabel, FrButtonLoading, FrCalendar, FrCard, FrCardAction, FrCardContent, FrCardDescription, FrCardFooter, FrCardHeader, FrCardTitle, FrCarousel, FrCarouselContent, FrCarouselItem, FrCarouselNext, FrCarouselPrevious, FrCheckbox, FrCheckboxField, FrCheckboxLabel, FrCollapsible, FrCollapsibleContent, FrCollapsibleTrigger, FrCombobox, FrComboboxChip, FrComboboxChipRemove, FrComboboxChips, FrComboboxChipsInput, FrComboboxClear, FrComboboxCollection, FrComboboxContent, FrComboboxEmpty, FrComboboxError, FrComboboxGroup, FrComboboxInput, FrComboboxItem, FrComboboxItemIndicator, FrComboboxLabel, FrComboboxList, FrComboboxPanel, FrComboboxRootLookup, FrComboboxSeparator, FrComboboxTrigger, FrComboboxValueList, FrCommand, FrCommandDialog, FrCommandDialogTrigger, FrCommandEmpty, FrCommandFooter, FrCommandGroup, FrCommandGroupHeading, FrCommandInput, FrCommandItem, FrCommandItemIcon, FrCommandList, FrCommandSeparator, FrCommandService, FrCommandShortcut, FrContextMenu, FrContextMenuCheckboxItem, FrContextMenuContent, FrContextMenuItem, FrContextMenuItemIndicator, FrContextMenuLabel, FrContextMenuPanel, FrContextMenuRadioGroup, FrContextMenuRadioItem, FrContextMenuSeparator, FrContextMenuShortcut, FrContextMenuSub, FrContextMenuSubTrigger, FrContextMenuTrigger, FrControlValueAccessor, FrDatePicker, FrDropdownMenu, FrDropdownMenuCheckboxItem, FrDropdownMenuContent, FrDropdownMenuItem, FrDropdownMenuItemIndicator, FrDropdownMenuLabel, FrDropdownMenuPanel, FrDropdownMenuRadioGroup, FrDropdownMenuRadioItem, FrDropdownMenuSeparator, FrDropdownMenuShortcut, FrDropdownMenuSub, FrDropdownMenuSubTrigger, FrDropdownMenuTree, FrDropdownMenuTrigger, FrEmpty, FrEmptyContent, FrEmptyDescription, FrEmptyHeader, FrEmptyMedia, FrEmptyTitle, FrField, FrFieldContent, FrFieldDescription, FrFieldError, FrFieldGroup, FrFieldLabel, FrFieldLegend, FrFieldSeparator, FrFieldSet, FrHoverCardRoot as FrHoverCard, FrHoverCardContent, FrHoverCardPanel, FrHoverCardTrigger, FrIconButton, FrInput, FrInputBadge, FrInputControl, FrInputDescription, FrInputError, FrInputField, FrInputFieldGroup, FrInputGroup, FrInputGroupAddon, FrInputGroupInput, FrInputGroupText, FrInputHeader, FrInputLabel, FrInputOtp, FrInputOtpGroup, FrInputOtpSeparator, FrInputOtpSlot, FrItem, FrItemActions, FrItemContent, FrItemDescription, FrItemFooter, FrItemGroup, FrItemHeader, FrItemMedia, FrItemSeparator, FrItemTitle, FrMenuBar, FrMenuBarCheckboxItem, FrMenuBarContent, FrMenuBarItem, FrMenuBarItemIndicator, FrMenuBarLabel, FrMenuBarMenu, FrMenuBarPanel, FrMenuBarRadioGroup, FrMenuBarRadioItem, FrMenuBarSeparator, FrMenuBarShortcut, FrMenuBarSub, FrMenuBarSubTrigger, FrMenuBarTrigger, FrModalBody, FrModalClose, FrModalContent, FrModalDescription, FrModalFooter, FrModalHeader, FrModalPanel, FrModalService, FrModalShell, FrModalTitle, FrModalTrigger, FrNavigationLinkSeparator, FrNavigationMenu, FrNavigationMenuContent, FrNavigationMenuFeature, FrNavigationMenuGrid, FrNavigationMenuIndicator, FrNavigationMenuItem, FrNavigationMenuLink, FrNavigationMenuLinkDescription, FrNavigationMenuLinkTitle, FrNavigationMenuList, FrNavigationMenuPanel, FrNavigationMenuTrigger, FrNavigationMenuViewport, FrPagination, FrPaginationContent, FrPaginationEllipsis, FrPaginationIcon, FrPaginationItem, FrPaginationLink, FrPaginationNext, FrPaginationPrevious, FrPopoverRoot as FrPopover, FrPopoverBody, FrPopoverClose, FrPopoverContent, FrPopoverDescription, FrPopoverFooter, FrPopoverHeader, FrPopoverPanel, FrPopoverTitle, FrPopoverTrigger, FrProgress, FrProgressIndicator, FrRadioGroup, FrRadioGroupCard, FrRadioGroupCardMeta, FrRadioGroupField, FrRadioGroupItem, FrResizableHandle, FrResizablePanel, FrResizablePanelGroup, FrSelect, FrSelectContent, FrSelectError, FrSelectGroup, FrSelectIcon, FrSelectItem, FrSelectItemIndicator, FrSelectLabel, FrSelectPanel, FrSelectSeparator, FrSelectValue, FrSeparator, FrSheetBody, FrSheetClose, FrSheetContent, FrSheetDescription, FrSheetFooter, FrSheetHeader, FrSheetPanel, FrSheetService, FrSheetShell, FrSheetTitle, FrSheetTrigger, FrSidebar, FrSidebarContent, FrSidebarFooter, FrSidebarGroup, FrSidebarGroupAction, FrSidebarGroupContent, FrSidebarGroupLabel, FrSidebarHeader, FrSidebarInset, FrSidebarMenu, FrSidebarMenuAction, FrSidebarMenuBadge, FrSidebarMenuButton, FrSidebarMenuItem, FrSidebarMenuSkeleton, FrSidebarMenuSub, FrSidebarMenuSubButton, FrSidebarMenuSubItem, FrSidebarProvider, FrSidebarRail, FrSidebarTrigger, FrSlider, FrSwitch, FrSwitchContent, FrSwitchDescription, FrSwitchError, FrSwitchField, FrSwitchLabel, FrTextarea, FrVirtualContent, FrVirtualFor, FrVirtualItem, FrVirtualItemMeta, FrVirtualList, FrVirtualPanel, FrVirtualViewport, buildConnectedPositions, calculateScrollOffsetForIndex, calculateVirtualRange, defaultPositions, provideDsValueAccessor };
 export type { FrAccordionType, FrAlertVariant, FrAvatarSize, FrBadgeIconPosition, FrBadgeVariant, FrButtonAppearance, FrButtonGroupOrientation, FrButtonLoadingDisplay, FrButtonRadius, FrButtonSize, FrCalendarCaptionLayout, FrCalendarCellContext, FrCalendarDateRange, FrCalendarDisabledMatcher, FrCalendarMode, FrCardFooterAlign, FrCardSize, FrCardSpacing, FrCarouselAlign, FrCarouselApi, FrCarouselDirection, FrCarouselEvent, FrCarouselOptions, FrCarouselOrientation, FrCarouselPlugin, FrComboboxStringifier, FrComboboxValue, FrCommandDialogConfig, FrCommandDialogRef, FrCommandFilter, FrDatePickerFormatter, FrDatePickerParser, FrDatePickerPreset, FrDatePickerValue, FrDropdownMenuAlignment, FrDropdownMenuItemVariant, FrDropdownMenuParent, FrDropdownMenuSide, FrDropdownMenuTriggerMode, FrEmptyMediaVariant, FrEmptyOrientation, FrEmptyVariant, FrFieldErrorLike, FrFieldLegendVariant, FrFieldOrientation, FrHoverCardAlignment, FrHoverCardSide, FrInputGroupAddonAlign, FrInputOtpPattern, FrItemMediaVariant, FrItemSize, FrItemVariant, FrModalConfig, FrModalFooterAction, FrModalRef, FrModalShellOptions, FrModalSize, FrPaginationPage, FrPopoverAlignment, FrPopoverSide, FrRadioGroupOrientation, FrRadioGroupVariant, FrResizableOrientation, FrSelectIndicatorPosition, FrSelectPosition, FrSeparatorOrientation, FrSheetConfig, FrSheetFooterAction, FrSheetRef, FrSheetShellOptions, FrSheetSide, FrSidebarCollapsible, FrSidebarMenuButtonSize, FrSidebarMenuButtonVariant, FrSidebarSide, FrSidebarState, FrSidebarVariant, FrSliderOrientation, FrSliderValue, FrSwitchSize, FrVirtualForContext, FrVirtualRange, FrVirtualRangeOptions, FrVirtualScrollAlignment, FrVirtualTrackBy };

package/virtual-scroll/src/styles/virtual-scroll.css

@@ -1,54 +1,54 @@
-[frVirtualViewport],
-frame-virtual-viewport {
-  display: block;
-  overflow: auto;
-  position: relative;
-}
-
-[frVirtualList],
-frame-virtual-list {
-  display: block;
-  border: 1px solid var(--frame-border);
-  border-radius: var(--frame-radius-lg);
-  background: color-mix(in srgb, var(--frame-surface) 92%, transparent);
-  overflow: hidden;
-}
-
-[frVirtualPanel],
-frame-virtual-panel {
-  overflow: hidden;
-}
-
-[frVirtualContent],
-frame-virtual-content {
-  display: block;
-  min-width: 100%;
-  box-sizing: border-box;
-}
-
-[frVirtualItem],
-frame-virtual-item {
-  display: flex;
-  align-items: center;
-  gap: 0.875rem;
-  width: 100%;
-  min-block-size: 2.75rem;
-  padding: 0.625rem 0.875rem;
-  border: 0;
-  border-bottom: 1px solid color-mix(in srgb, var(--frame-border) 72%, transparent);
-  background: transparent;
-  color: var(--frame-foreground);
-  text-align: left;
-  box-sizing: border-box;
-}
-
-[frVirtualItem]:hover,
-frame-virtual-item:hover {
-  background: color-mix(in srgb, var(--frame-accent) 80%, transparent);
-}
-
-[frVirtualItemMeta],
-frame-virtual-item-meta {
-  color: var(--frame-muted-foreground);
-  font-size: 0.75rem;
-}
+[frVirtualViewport],
+frame-virtual-viewport {
+  display: block;
+  overflow: auto;
+  position: relative;
+}
+
+[frVirtualList],
+frame-virtual-list {
+  display: block;
+  border: 1px solid var(--frame-border);
+  border-radius: var(--frame-virtual-list-radius, var(--frame-radius-lg));
+  background: color-mix(in srgb, var(--frame-surface) 92%, transparent);
+  overflow: hidden;
+}
+
+[frVirtualPanel],
+frame-virtual-panel {
+  overflow: hidden;
+}
+
+[frVirtualContent],
+frame-virtual-content {
+  display: block;
+  min-width: 100%;
+  box-sizing: border-box;
+}
+
+[frVirtualItem],
+frame-virtual-item {
+  display: flex;
+  align-items: center;
+  gap: 0.875rem;
+  width: 100%;
+  min-block-size: 2.75rem;
+  padding: 0.625rem 0.875rem;
+  border: 0;
+  border-bottom: 1px solid color-mix(in srgb, var(--frame-border) 72%, transparent);
+  background: transparent;
+  color: var(--frame-foreground);
+  text-align: left;
+  box-sizing: border-box;
+}
+
+[frVirtualItem]:hover,
+frame-virtual-item:hover {
+  background: color-mix(in srgb, var(--frame-accent) 80%, transparent);
+}
+
+[frVirtualItemMeta],
+frame-virtual-item-meta {
+  color: var(--frame-muted-foreground);
+  font-size: 0.75rem;
+}