@typlog/ui 0.12.0 → 0.12.1

package/addons.css

@@ -150,19 +150,6 @@
   background-color: var(--gray-a4);
 }
 
-.ui-SpinnerIcon {
-  color: var(--gray-10);
-}
-.ui-SpinnerIcon:where(.r-size-1) {
-  font-size: var(--space-3);
-}
-.ui-SpinnerIcon:where(.r-size-2) {
-  font-size: var(--space-4);
-}
-.ui-SpinnerIcon:where(.r-size-3) {
-  font-size: calc(1.25 * var(--space-4));
-}
-
 .ui-Turnstile {
   background: var(--gray-a3);
 }

package/addons.d.ts

@@ -52,26 +52,6 @@ export declare interface SocialButtonProps extends PrimitiveProps {
     disabled?: boolean;
 }
 
-export declare const SpinnerIcon: DefineComponent<SpinnerIconProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<SpinnerIconProps> & Readonly<{}>, {
-size: "1" | "2" | "3";
-icon: SpinnerIcon_2;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
-
-declare type SpinnerIcon_2 = '12-dots-scale-rotate' | '180-ring' | '180-ring-with-bg' | '270-ring' | '270-ring-with-bg' | '3-dots-bounce' | '3-dots-fade' | '3-dots-move' | '3-dots-rotate' | '3-dots-scale' | '3-dots-scale-middle' | '6-dots-rotate' | '6-dots-scale' | '6-dots-scale-middle' | '8-dots-rotate' | '90-ring' | '90-ring-with-bg' | 'bars-fade' | 'bars-rotate-fade' | 'bars-scale' | 'bars-scale-fade' | 'bars-scale-middle' | 'blocks-scale' | 'blocks-shuffle-2' | 'blocks-shuffle-3' | 'blocks-wave' | 'bouncing-ball' | 'clock' | 'dot-revolve' | 'eclipse' | 'eclipse-half' | 'gooey-balls-1' | 'gooey-balls-2' | 'pulse' | 'pulse-2' | 'pulse-3' | 'pulse-multiple' | 'pulse-ring' | 'pulse-rings-2' | 'pulse-rings-3' | 'pulse-rings-multiple' | 'ring-resize' | 'tadpole' | 'wifi' | 'wifi-fade' | 'wind-toy';
-
-export declare interface SpinnerIconProps {
-    /**
-     * Icon name of the spinner.
-     * @default "180-ring"
-     */
-    icon?: SpinnerIcon_2;
-    /**
-     * Control size of the spinner.
-     * @default "2"
-     */
-    size?: '1' | '2' | '3';
-}
-
 export declare const Turnstile: DefineComponent<TurnstileProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:modelValue": (args_0: string) => any;
 }, string, PublicProps, Readonly<TurnstileProps> & Readonly<{

package/addons.js

@@ -11,7 +11,7 @@ const BRAND_ICONS = {
   slack: "logos:slack-icon",
   figma: "logos:figma"
 };
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "SocialButton",
   props: {
     brand: {},
@@ -54,7 +54,7 @@ const _hoisted_1$1 = {
 };
 const _hoisted_2$1 = { class: "ui-IconifySampleInfo" };
 const _hoisted_3$1 = { class: "ui-IconifySampleIcons" };
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "IconifySample",
   props: {
     prefix: {},
@@ -152,7 +152,7 @@ const filterIcons = (names, query, suffix) => {
     return match;
   });
 };
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "IconifyCollection",
   props: {
     prefix: {},
@@ -304,7 +304,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
               ]),
               createElementVNode("div", _hoisted_8, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(collection.items, (item) => {
-                  return openBlock(), createBlock(_sfc_main$3, mergeProps({
+                  return openBlock(), createBlock(_sfc_main$2, mergeProps({
                     key: item.prefix
                   }, { ref_for: true }, item, {
                     onClick: withModifiers(($event) => onSelectPrefix(item.prefix), ["prevent"])
@@ -395,25 +395,6 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  __name: "SpinnerIcon",
-  props: {
-    icon: { default: "180-ring" },
-    size: { default: "2" }
-  },
-  setup(__props) {
-    const props = __props;
-    const iconName = computed(() => {
-      return `svg-spinners:${props.icon}`;
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(Icon), {
-        class: normalizeClass(["ui-SpinnerIcon", `r-size-${_ctx.size}`]),
-        icon: iconName.value
-      }, null, 8, ["class", "icon"]);
-    };
-  }
-});
 const turnstileSrc = "https://challenges.cloudflare.com/turnstile/v0/api.js";
 const turnstileLoadFunction = "cfTurnstileOnLoad";
 let turnstileState = typeof window !== "undefined" ? window.turnstile !== void 0 ? "ready" : "unloaded" : "unloaded";
@@ -507,8 +488,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   }
 });
 export {
-  _sfc_main$2 as IconifyCollection,
-  _sfc_main$4 as SocialButton,
-  _sfc_main$1 as SpinnerIcon,
+  _sfc_main$1 as IconifyCollection,
+  _sfc_main$3 as SocialButton,
   _sfc_main as Turnstile
 };

package/components/radio.css

@@ -225,6 +225,11 @@
   background-color: var(--accent-a3);
 }
 
+/* special fix for tailwind */
+.ui-RadioTabsRoot:where(.w-full) {
+  width: 100%;
+}
+
 .ui-RadioTabsItem {
   display: inline-flex;
   flex-grow: 1;

package/components/tabs.css

@@ -17,7 +17,7 @@
   --tab-height: var(--space-6);
   --tab-padding-x: var(--space-1);
   --tab-radius: max(var(--radius-2), var(--radius-full));
-  --tab-item-radius: var(--radius-1);
+  --tab-item-radius: max(var(--radius-1), var(--radius-full));
   --tab-inner-padding-x: var(--space-1);
   --tab-inner-height: var(--space-5);
 }
@@ -28,7 +28,7 @@
   --tab-height: var(--space-7);
   --tab-padding-x: var(--space-2);
   --tab-radius: max(var(--radius-3), var(--radius-full));
-  --tab-item-radius: var(--radius-2);
+  --tab-item-radius: max(var(--radius-2), var(--radius-full));
   --tab-inner-padding-x: var(--space-2);
   --tab-inner-height: calc(var(--space-6) - var(--space-1));
 }
@@ -113,6 +113,11 @@
   background-color: var(--accent-12);
 }
 
+/** special fix for tailwind */
+.ui-TabList:where(.w-full) {
+  width: 100%;
+}
+
 .ui-TabTrigger {
   display: flex;
   align-items: center;

package/components.css

@@ -2955,6 +2955,11 @@ to {
   background-color: var(--accent-a3);
 }
 
+/* special fix for tailwind */
+.ui-RadioTabsRoot:where(.w-full) {
+  width: 100%;
+}
+
 .ui-RadioTabsItem {
   display: inline-flex;
   flex-grow: 1;
@@ -3010,7 +3015,7 @@ to {
   --tab-height: var(--space-6);
   --tab-padding-x: var(--space-1);
   --tab-radius: max(var(--radius-2), var(--radius-full));
-  --tab-item-radius: var(--radius-1);
+  --tab-item-radius: max(var(--radius-1), var(--radius-full));
   --tab-inner-padding-x: var(--space-1);
   --tab-inner-height: var(--space-5);
 }
@@ -3021,7 +3026,7 @@ to {
   --tab-height: var(--space-7);
   --tab-padding-x: var(--space-2);
   --tab-radius: max(var(--radius-3), var(--radius-full));
-  --tab-item-radius: var(--radius-2);
+  --tab-item-radius: max(var(--radius-2), var(--radius-full));
   --tab-inner-padding-x: var(--space-2);
   --tab-inner-height: calc(var(--space-6) - var(--space-1));
 }
@@ -3106,6 +3111,11 @@ to {
   background-color: var(--accent-12);
 }
 
+/** special fix for tailwind */
+.ui-TabList:where(.w-full) {
+  width: 100%;
+}
+
 .ui-TabTrigger {
   display: flex;
   align-items: center;
@@ -3366,25 +3376,25 @@ to {
   --collapsible-font-size: var(--font-size-2);
   --collapsible-trigger-gap: calc(var(--space-1) / 2);
   --collapsible-indicator-icon-size: var(--font-size-2);
-  --collapsible-padding-y: var(--space-1);
-  --collapsible-padding-x: var(--space-2);
+  --collapsible-padding-y: var(--space-2);
+  --collapsible-padding-x: var(--space-3);
   --collapsible-radius: max(var(--radius-1), var(--radius-full))
 }
 .ui-CollapsibleRoot:where(.r-size-2) {
   --collapsible-font-size: var(--font-size-3);
   --collapsible-trigger-gap: var(--space-1);
   --collapsible-indicator-icon-size: var(--font-size-3);
-  --collapsible-padding-y: var(--space-2);
-  --collapsible-padding-x: var(--space-3);
+  --collapsible-padding-y: var(--space-3);
+  --collapsible-padding-x: var(--space-4);
   --collapsible-radius: max(var(--radius-2), var(--radius-full))
 }
 .ui-CollapsibleRoot:where(.r-size-3) {
-  --collapsible-font-size: var(--font-size-5);
+  --collapsible-font-size: var(--font-size-4);
   --collapsible-trigger-gap: calc(var(--space-2) * 3 / 4);
   --collapsible-indicator-icon-size: var(--font-size-5);
-  --collapsible-padding-y: var(--space-2);
+  --collapsible-padding-y: var(--space-3);
   --collapsible-padding-x: var(--space-4);
-  --collapsible-radius: max(var(--radius-3), var(--radius-full))
+  --collapsible-radius: max(var(--radius-4), var(--radius-full))
 }
 .ui-CollapsibleRoot:where(.r-size-4) {
   --collapsible-font-size: var(--font-size-7);
@@ -3394,13 +3404,23 @@ to {
   --collapsible-padding-x: var(--space-5);
   --collapsible-radius: max(var(--radius-4), var(--radius-full))
 }
+.ui-CollapsibleRoot:where(.r-variant-soft, .r-variant-surface) {
+  --collapsible-trigger-background-color: var(--accent-a2);
+  --collapsible-trigger-hover-background-color: var(--accent-a3);
+  --collapsible-trigger-open-background-color: var(--accent-a3);
+  --collapsible-trigger-open-text-color: var(--accent-a11);
+
+  border-radius: var(--collapsible-radius);
+}
 .ui-CollapsibleRoot:where(.r-variant-surface) {
   box-shadow: inset 0 0 0 1px var(--gray-a4);
-  border-radius: var(--collapsible-radius);
 }
 .ui-CollapsibleRoot:where(.r-variant-surface):where([data-state="open"]) {
   box-shadow: inset 0 0 0 1px var(--gray-a5);
 }
+.ui-CollapsibleRoot:where(.r-variant-soft, .r-variant-surface):where([data-accent-color="gray"]) {
+  --collapsible-trigger-open-text-color: var(--accent-12);
+}
 
 .ui-CollapsibleIndicator {
   display: inline-flex;
@@ -3430,41 +3450,39 @@ to {
   text-align: initial;
 }
 :where(.ui-CollapsibleRoot:not(.r-variant-ghost)) .ui-CollapsibleTrigger {
+  background-color: var(--collapsible-trigger-background-color);
   padding-block: var(--collapsible-padding-y);
   padding-inline: var(--collapsible-padding-x);
   width: 100%;
-}
-:where(.ui-CollapsibleRoot.r-variant-soft) .ui-CollapsibleTrigger {
-  background: var(--accent-a2);
   border-radius: var(--collapsible-radius);
+  transition: border-radius 0.2s ease;
 }
-:where(.ui-CollapsibleRoot.r-variant-surface) .ui-CollapsibleTrigger {
-  border-top-left-radius: var(--collapsible-radius);
-  border-top-right-radius: var(--collapsible-radius);
-  background: var(--accent-a2);
-}
-:where(.ui-CollapsibleRoot.r-variant-soft) .ui-CollapsibleTrigger:where(:hover) {
-  background: var(--accent-a3);
+:where(.ui-CollapsibleRoot:not(.r-variant-ghost)) .ui-CollapsibleTrigger:where(:hover) {
+  background-color: var(--collapsible-trigger-hover-background-color);
 }
-:where(.ui-CollapsibleRoot.r-variant-surface) .ui-CollapsibleTrigger:where([data-state="open"]),
-:where(.ui-CollapsibleRoot.r-variant-soft) .ui-CollapsibleTrigger:where([data-state="open"]) {
-  background: var(--accent-a3);
-  color: var(--accent-a11);
+:where(.ui-CollapsibleRoot:not(.r-variant-ghost)) .ui-CollapsibleTrigger:where([data-state="open"]) {
+  background-color: var(--collapsible-trigger-open-background-color);
+  color: var(--collapsible-trigger-open-text-color);
+  border-radius: var(--collapsible-radius) var(--collapsible-radius) 0 0;
 }
 
 @keyframes collapsible-down {
 from {
     height: 0;
+    opacity: 1;
 }
 to {
     height: var(--reka-collapsible-content-height);
+    opacity: 1;
 }
 }
 @keyframes collapsible-up {
 from {
+    opacity: 1;
     height: var(--reka-collapsible-content-height);
 }
 to {
+    opacity: 0;
     height: 0;
 }
 }
@@ -3478,7 +3496,10 @@ to {
   animation: collapsible-down 0.2s ease-out;
 }
 .ui-CollapsibleContent:where([data-state="closed"]) {
-  animation: collapsible-up 0.2s ease-out;
+  animation: collapsible-up 0.2s ease-in;
+}
+:where(.ui-CollapsibleRoot.r-variant-soft) .ui-CollapsibleContent {
+  background-color: var(--accent-a2);
 }
 :where(.ui-CollapsibleRoot:not(.r-variant-ghost)) .ui-CollapsibleContent {
   padding-inline: var(--collapsible-padding-x);
@@ -3594,9 +3615,20 @@ to {
   transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s;
   --toast-collapse-scale: calc(max(0, 1 - (var(--toast-index) * 0.06)));
 }
+.ui-ToastItem::after {
+  content: "";
+  position: absolute;
+  left: 0px;
+  height: calc(var(--toast-gap) + 1px);
+  bottom: 100%;
+  width: 100%;
+}
 .ui-ToastItem:where([data-swipe="move"]) {
   transition: none;
 }
+.ui-ToastItem:where([data-visible="false"]) {
+  display: none;
+}
 :where(.ui-ToastViewport[data-x-position="left"]) .ui-ToastItem {
   left: 0;
 }
@@ -3638,6 +3670,7 @@ to {
 .ui-ToastItem:where([data-swipe-direction="bottom"]) {
   --toast-item-swipe-to-y: calc(100% + var(--toast-y-position))
 }
+.ui-ToastItem:where([data-state="closed"]),
 .ui-ToastItem:where([data-swipe="closed"]) {
   animation: ui-fade-out 100ms ease-in;
 }

package/components.d.ts

@@ -1067,7 +1067,6 @@ sideOffset: number;
 }>;
 
 export declare interface PopoverPopupProps extends PopoverContentProps {
-    to?: string | HTMLElement;
     size?: '1' | '2';
 }
 
@@ -1396,6 +1395,7 @@ variant: "classic" | "outline" | "surface" | "soft";
 
 export declare interface TabsListProps {
     size?: '1' | '2';
+    radius?: RadiusType;
     color?: ColorType;
     variant?: 'classic' | 'outline' | 'surface' | 'soft';
     highContrast?: boolean;
@@ -1461,6 +1461,7 @@ accentColor: ColorType;
 radius: RadiusType;
 grayColor: GrayColorType;
 scaling: ScalingType;
+panelBackground: "solid" | "translucent";
 hasBackground: boolean;
 as: AsTag | Component;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
@@ -1472,6 +1473,7 @@ declare interface ThemeProviderContext {
     radius: Ref<RadiusType>;
     grayColor: Ref<GrayColorType>;
     scaling: Ref<ScalingType>;
+    panelBackground: Ref<'solid' | 'translucent'>;
     hasBackground: Ref<boolean>;
 }
 
@@ -1480,6 +1482,7 @@ export declare interface ThemeProviderProps extends PrimitiveProps {
     radius?: RadiusType;
     grayColor?: GrayColorType;
     scaling?: ScalingType;
+    panelBackground?: 'solid' | 'translucent';
     hasBackground?: boolean;
 }
 

package/components.js

@@ -1,5 +1,5 @@
 import { defineComponent, toRefs, createBlock, openBlock, unref, withCtx, createVNode, renderSlot, markRaw, createElementBlock, createElementVNode, computed, normalizeClass, createTextVNode, toDisplayString, createCommentVNode, mergeProps, mergeModels, useTemplateRef, useModel, withDirectives, isRef, vModelDynamic, vModelText, onMounted, normalizeStyle, normalizeProps, guardReactiveProps, Fragment, ref, watch, renderList, withModifiers, vModelRadio, effectScope, createStaticVNode, resolveDynamicComponent } from "vue";
-import { createContext, TooltipProvider, Primitive, useForwardProps, useEmitAsProps, AvatarRoot, AvatarImage, AvatarFallback, ScrollAreaRoot, ScrollAreaViewport, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaCorner, injectDialogRootContext, useForwardExpose, DialogPortal, DialogOverlay, DialogContent, useForwardPropsEmits, AlertDialogPortal, AlertDialogOverlay, AlertDialogContent, DropdownMenuPortal, DropdownMenuContent, DropdownMenuItem, PopoverPortal, PopoverContent, SwitchRoot, SwitchThumb, CheckboxRoot, CheckboxIndicator, Toggle, ToggleGroupRoot, ToggleGroupItem, SelectRoot, SelectPortal, SelectContent, SelectViewport, SelectTrigger, SelectValue, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, ComboboxRoot, injectComboboxRootContext as injectComboboxRootContext$1, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxViewport, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxEmpty, RadioGroupRoot, RadioGroupItem, TabsList, TabsIndicator, TabsTrigger, EditableRoot, EditableArea, EditablePreview, EditableInput, AccordionRoot, useId, AccordionItem, AccordionContent, AccordionTrigger, CollapsibleRoot, CollapsibleTrigger, CollapsibleContent, ToastRoot, ToastTitle, ToastDescription, ToastAction, ToastProvider, ToastPortal, ToastViewport, TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow, ProgressRoot, ProgressIndicator } from "reka-ui";
+import { createContext, TooltipProvider, Primitive, useForwardProps, useEmitAsProps, AvatarRoot, AvatarImage, AvatarFallback, ScrollAreaRoot, ScrollAreaViewport, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaCorner, injectDialogRootContext, useForwardExpose, DialogPortal, DialogOverlay, DialogContent, useForwardPropsEmits, AlertDialogPortal, AlertDialogOverlay, AlertDialogContent, DropdownMenuPortal, DropdownMenuContent, DropdownMenuItem, PopoverPortal, PopoverContent, SwitchRoot, SwitchThumb, CheckboxRoot, CheckboxIndicator, Toggle, ToggleGroupRoot, ToggleGroupItem, SelectRoot, SelectPortal, SelectContent, SelectViewport, SelectTrigger, SelectValue, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, ComboboxRoot, injectComboboxRootContext as injectComboboxRootContext$1, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxViewport, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxEmpty, RadioGroupRoot, RadioGroupItem, TabsList, TabsIndicator, TabsTrigger, EditableRoot, EditableArea, EditablePreview, EditableInput, AccordionRoot, useId, AccordionItem, AccordionContent, AccordionTrigger, CollapsibleRoot, CollapsibleTrigger, CollapsibleContent, ToastRoot, ToastTitle, ToastDescription, ToastAction, ToastProvider, ToastPortal, ToastViewport, TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow, ProgressRoot, ProgressIndicator } from "reka-ui";
 import { AlertDialogAction, AlertDialogCancel, AlertDialogRoot, AlertDialogTrigger, CheckboxGroupRoot, ComboboxGroup, DialogClose, DialogRoot, DialogTrigger, DropdownMenuRoot, DropdownMenuTrigger, PopoverClose, PopoverRoot, PopoverTrigger, SelectGroup, TabsContent, TabsRoot } from "reka-ui";
 import { Icon } from "@iconify/vue";
 const [injectThemeContext, provideThemeContext] = createContext("ThemeProvider");
@@ -10,18 +10,20 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
     radius: { default: "medium" },
     grayColor: { default: "auto" },
     scaling: { default: "100%" },
+    panelBackground: { default: "translucent" },
     hasBackground: { type: Boolean, default: true },
     asChild: { type: Boolean },
     as: { default: "div" }
   },
   setup(__props) {
     const props = __props;
-    const { accentColor, radius, grayColor, scaling, hasBackground } = toRefs(props);
+    const { accentColor, radius, grayColor, scaling, panelBackground, hasBackground } = toRefs(props);
     provideThemeContext({
       accentColor,
       radius,
       grayColor,
       scaling,
+      panelBackground,
       hasBackground
     });
     return (_ctx, _cache) => {
@@ -33,6 +35,7 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
             "data-gray-color": unref(grayColor),
             "data-radius": unref(radius),
             "data-scaling": unref(scaling),
+            "data-panel-background": unref(panelBackground),
             "data-has-background": unref(hasBackground),
             as: props.as,
             "as-child": props.asChild
@@ -41,7 +44,7 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
               renderSlot(_ctx.$slots, "default")
             ]),
             _: 3
-          }, 8, ["data-accent-color", "data-gray-color", "data-radius", "data-scaling", "data-has-background", "as", "as-child"])
+          }, 8, ["data-accent-color", "data-gray-color", "data-radius", "data-scaling", "data-panel-background", "data-has-background", "as", "as-child"])
         ]),
         _: 3
       });
@@ -674,7 +677,6 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
   },
   __name: "PopoverPopup",
   props: {
-    to: {},
     size: { default: "1" },
     forceMount: { type: Boolean },
     side: { default: "bottom" },
@@ -704,9 +706,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
     const emits = __emit;
     const forwarded = useForwardPropsEmitsWithout(props, emits, ["to", "size"]);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(PopoverPortal), {
-        to: props.to
-      }, {
+      return openBlock(), createBlock(unref(PopoverPortal), null, {
         default: withCtx(() => [
           createVNode(_sfc_main$S, null, {
             default: withCtx(() => [
@@ -723,7 +723,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
           })
         ]),
         _: 3
-      }, 8, ["to"]);
+      });
     };
   }
 });
@@ -1316,12 +1316,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
               _: 3
             }, 8, ["placeholder"])
           ]),
-          createVNode(unref(SelectIcon), { "as-child": "" }, {
-            default: withCtx(() => [
-              createVNode(unref(ChevronDownIcon), { class: "ui-SelectIcon" })
-            ]),
-            _: 1
-          })
+          createVNode(unref(ChevronDownIcon), { class: "ui-SelectIcon" })
         ]),
         _: 3
       }, 8, ["class", "disabled", "data-accent-color", "data-radius"]);
@@ -2003,6 +1998,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "TabsList",
   props: {
     size: { default: "2" },
+    radius: {},
     color: {},
     variant: { default: "outline" },
     highContrast: { type: Boolean }
@@ -2013,6 +2009,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(TabsList), {
         class: normalizeClass(["ui-TabList", unref(resetClass)]),
+        "data-radius": props.radius,
         "data-accent-color": props.color
       }, {
         default: withCtx(() => [
@@ -2020,7 +2017,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
-      }, 8, ["class", "data-accent-color"]);
+      }, 8, ["class", "data-radius", "data-accent-color"]);
     };
   }
 });
@@ -2765,6 +2762,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         class: "ui-ToastItem",
         duration: _ctx.message.duration,
         "data-expanded": paused.value,
+        "data-visible": _ctx.index < 3,
         style: normalizeStyle(styleVars.value),
         "onUpdate:open": onOpenChange,
         onPause,
@@ -2819,7 +2817,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
           }, 8, ["alt-text", "onClick"])) : createCommentVNode("", true)
         ]),
         _: 1
-      }, 8, ["duration", "data-expanded", "style"]);
+      }, 8, ["duration", "data-expanded", "data-visible", "style"]);
     };
   }
 });
@@ -2839,7 +2837,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const forwarded = useForwardPropsWithout(props, ["position", "size"]);
-    const manager = useToastManager();
+    const { messages } = useToastManager();
     const yPosition = computed(() => {
       return props.position.split("-")[0];
     });
@@ -2852,14 +2850,11 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       }
       return xPosition.value;
     });
-    const messages = computed(() => {
-      return manager.messages.value.slice(0, 3);
-    });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(ToastProvider), normalizeProps(guardReactiveProps({ ...unref(forwarded), swipeDirection: swipeDirection.value })), {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default"),
-          (openBlock(true), createElementBlock(Fragment, null, renderList(messages.value, (msg, index) => {
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(messages), (msg, index) => {
             return renderSlot(_ctx.$slots, "item", {
               key: msg.id,
               message: msg,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typlog/ui",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "license": "MIT",
   "type": "module",
   "description": "Themed components for Reka UI with Radix colors.",