vueless 1.4.12-beta.2 → 1.4.12-beta.21

package/README.md

@@ -14,7 +14,7 @@ A UI library with Open Architecture for Vue.js 3 and Nuxt.js 3 / 4, powered by [
 
 ### Key features
 
-- 🧩 65+ crafted UI components (including range date picker, multi-select, and nested table)
+- 🧩 74 crafted UI components (including range date picker, multi-select, and nested table)
 - ✨ Open Architecture lets you customize, copy, extend, and create your own components
 - 📕 Built-in Storybook support
 - 🪩 Theme Builder for runtime theme customization

package/composables/useUI.ts

@@ -228,6 +228,16 @@ export function useUI<T>(defaultConfig: T, mutatedProps?: MutatedProps, topLevel
     const keysAttrs: KeysAttrs<T> = {};
     const attrsRefs: Record<string, Ref<KeyAttrs>> = {};
 
+    /**
+     * Structural signature per key. The watcher below fires on any config/prop/class
+     * change and would otherwise re-mint every key's attrs object — even keys whose
+     * classes are identical — invalidating downstream reactive readers (e.g. every
+     * body row of a table on an unrelated sticky toggle). We skip the `.value` write
+     * when the new object is structurally equal to the last one, so the ref keeps its
+     * identity and dependents are not re-rendered.
+     */
+    const attrsSignatures: Record<string, string> = {};
+
     for (const key in config.value) {
       if (isSystemKey(key)) continue;
 
@@ -266,12 +276,20 @@ export function useUI<T>(defaultConfig: T, mutatedProps?: MutatedProps, topLevel
           /* Delete value key to prevent v-model overwrite. */
           delete commonAttrs.value;
 
-          attrsRefs[key].value = {
+          const nextValue: KeyAttrs = {
             ...commonAttrs,
             class: cx([...data.extendsClasses, classes, commonAttrs.class]),
             config: data.mergedNestedConfig,
             ...data.mergedDefaults,
           };
+
+          /* Keep the previous ref identity when nothing changed — see attrsSignatures. */
+          const signature = JSON.stringify(nextValue);
+
+          if (attrsSignatures[key] === signature) continue;
+
+          attrsSignatures[key] = signature;
+          attrsRefs[key].value = nextValue;
         }
       },
       { immediate: true },

package/index.d.ts

@@ -108,6 +108,134 @@ export type {
   LocaleInstance,
   LocaleMessages,
 } from "./types";
+/* component props */
+export type { Props as UAccordionProps } from "./ui.container-accordion/types";
+export type { Props as UAccordionItemProps } from "./ui.container-accordion-item/types";
+export type { Props as UAlertProps } from "./ui.text-alert/types";
+export type { Props as UAvatarProps } from "./ui.image-avatar/types";
+export type { Props as UAvatarGroupProps } from "./ui.image-avatar-group/types";
+export type { Props as UBadgeProps } from "./ui.text-badge/types";
+export type { Props as UBoilerplateProps } from "./ui.boilerplate/types";
+export type { Props as UBreadcrumbsProps } from "./ui.navigation-breadcrumbs/types";
+export type { Props as UButtonProps } from "./ui.button/types";
+export type { Props as UCalendarProps } from "./ui.form-calendar/types";
+export type { Props as UCardProps } from "./ui.container-card/types";
+export type { Props as UCheckboxProps } from "./ui.form-checkbox/types";
+export type { Props as UCheckboxGroupProps } from "./ui.form-checkbox-group/types";
+export type { Props as UCheckboxMultiStateProps } from "./ui.form-checkbox-multi-state/types";
+export type { Props as UChipProps } from "./ui.other-chip/types";
+export type { Props as UColProps } from "./ui.container-col/types";
+export type { Props as UCollapsibleProps } from "./ui.container-collapsible/types";
+export type { Props as UColorToggleProps } from "./ui.form-color-toggle/types";
+export type { Props as UDataListProps } from "./ui.data-list/types";
+export type { Props as UDatePickerProps } from "./ui.form-date-picker/types";
+export type { Props as UDatePickerRangeProps } from "./ui.form-date-picker-range/types";
+export type { Props as UDividerProps } from "./ui.container-divider/types";
+export type { Props as UDotProps } from "./ui.other-dot/types";
+export type { Props as UDrawerProps } from "./ui.container-drawer/types";
+export type { Props as UDropdownProps } from "./ui.dropdown/types";
+export type { Props as UDropdownBadgeProps } from "./ui.dropdown-badge/types";
+export type { Props as UDropdownButtonProps } from "./ui.dropdown-button/types";
+export type { Props as UDropdownLinkProps } from "./ui.dropdown-link/types";
+export type { Props as UEmptyProps } from "./ui.container-empty/types";
+export type { Props as UFileProps } from "./ui.text-file/types";
+export type { Props as UFilesProps } from "./ui.text-files/types";
+export type { Props as UGridProps } from "./ui.container-grid/types";
+export type { Props as UGroupProps } from "./ui.container-group/types";
+export type { Props as UGroupsProps } from "./ui.container-groups/types";
+export type { Props as UHeaderProps } from "./ui.text-header/types";
+export type { Props as UIconProps } from "./ui.image-icon/types";
+export type { Props as UInputProps } from "./ui.form-input/types";
+export type { Props as UInputCounterProps } from "./ui.form-input-counter/types";
+export type { Props as UInputFileProps } from "./ui.form-input-file/types";
+export type { Props as UInputNumberProps } from "./ui.form-input-number/types";
+export type { Props as UInputPasswordProps } from "./ui.form-input-password/types";
+export type { Props as UInputRatingProps } from "./ui.form-input-rating/types";
+export type { Props as UInputSearchProps } from "./ui.form-input-search/types";
+export type { Props as UKeyProps } from "./ui.text-key/types";
+export type { Props as ULabelProps } from "./ui.form-label/types";
+export type { Props as ULinkProps } from "./ui.button-link/types";
+export type { Props as UListboxProps } from "./ui.form-listbox/types";
+export type { Props as ULoaderProps } from "./ui.loader/types";
+export type { Props as ULoaderOverlayProps } from "./ui.loader-overlay/types";
+export type { Props as ULoaderProgressProps } from "./ui.loader-progress/types";
+export type { Props as UModalProps } from "./ui.container-modal/types";
+export type { Props as UModalConfirmProps } from "./ui.container-modal-confirm/types";
+export type { Props as UNotifyProps } from "./ui.text-notify/types";
+export type { Props as UNumberProps } from "./ui.text-number/types";
+export type { Props as UPageProps } from "./ui.container-page/types";
+export type { Props as UPaginationProps } from "./ui.navigation-pagination/types";
+export type { Props as UPlaceholderProps } from "./ui.container-placeholder/types";
+export type { Props as UProgressProps } from "./ui.navigation-progress/types";
+export type { Props as URadioProps } from "./ui.form-radio/types";
+export type { Props as URadioGroupProps } from "./ui.form-radio-group/types";
+export type { Props as URowProps } from "./ui.container-row/types";
+export type { Props as USelectProps } from "./ui.form-select/types";
+export type { Props as USkeletonProps } from "./ui.skeleton/types";
+export type { Props as USkeletonChoiceProps } from "./ui.skeleton-choice/types";
+export type { Props as USkeletonInputProps } from "./ui.skeleton-input/types";
+export type { Props as USkeletonTextProps } from "./ui.skeleton-text/types";
+export type { Props as USplitterProps } from "./ui.container-splitter/types";
+export type { Props as USwitchProps } from "./ui.form-switch/types";
+export type { Props as UTabProps } from "./ui.navigation-tab/types";
+export type { Props as UTableProps } from "./ui.data-table/types";
+export type { Props as UTabsProps } from "./ui.navigation-tabs/types";
+export type { Props as UTextProps } from "./ui.text-block/types";
+export type { Props as UTextareaProps } from "./ui.form-textarea/types";
+export type { Props as UThemeColorToggleProps } from "./ui.other-theme-color-toggle/types";
+export type { Props as UToggleProps } from "./ui.button-toggle/types";
+/* component data types */
+export type {
+  Row,
+  BaseRow,
+  TableRow,
+  FlatRow,
+  RowId,
+  RowData,
+  Cell,
+  CellObject,
+  Column,
+  ColumnObject,
+  TableColumn,
+  DateDivider,
+  BaseDateDivider,
+  SlotRow,
+  SelectedSlotRow,
+  UTableSlots,
+  UTableStaticSlots,
+  UTableDynamicSlots,
+} from "./ui.data-table/types";
+export type {
+  Option,
+  BaseOption,
+  ListboxOption,
+  SelectedValue,
+  SlotOption,
+  UListboxSlots,
+} from "./ui.form-listbox/types";
+export type {
+  SelectOption,
+  SelectedSlotOption,
+  SelectedOptionsBinding,
+  USelectSlots,
+} from "./ui.form-select/types";
+export type { UDropdownSlots } from "./ui.dropdown/types";
+export type { UDropdownBadgeSlots } from "./ui.dropdown-badge/types";
+export type { UDropdownButtonSlots } from "./ui.dropdown-button/types";
+export type { UDropdownLinkSlots } from "./ui.dropdown-link/types";
+export type { UTabsOption, BaseTabOption, UTabsSlots } from "./ui.navigation-tabs/types";
+export type { UBreadcrumb, BaseBreadcrumb } from "./ui.navigation-breadcrumbs/types";
+export type { UToggleOption, BaseToggleOption, UToggleSlots } from "./ui.button-toggle/types";
+export type { UAccordionOption, BaseAccordionOption } from "./ui.container-accordion/types";
+export type {
+  DataListItem,
+  BaseDataListItem,
+  SlotItem,
+  UDataListSlots,
+} from "./ui.data-list/types";
+export type { UCheckboxOption, BaseCheckboxOption } from "./ui.form-checkbox/types";
+export type { ChipItem, BaseChipItem } from "./ui.image-avatar/types";
+export type { AvatarItem, BaseAvatarItem } from "./ui.image-avatar-group/types";
 /* Export enums directly (not as types) */
 export { ColorMode } from "./types";
 

package/index.ts

@@ -114,6 +114,134 @@ export type {
   LocaleInstance,
   LocaleMessages,
 } from "./types";
+/* component props */
+export type { Props as UAccordionProps } from "./ui.container-accordion/types";
+export type { Props as UAccordionItemProps } from "./ui.container-accordion-item/types";
+export type { Props as UAlertProps } from "./ui.text-alert/types";
+export type { Props as UAvatarProps } from "./ui.image-avatar/types";
+export type { Props as UAvatarGroupProps } from "./ui.image-avatar-group/types";
+export type { Props as UBadgeProps } from "./ui.text-badge/types";
+export type { Props as UBoilerplateProps } from "./ui.boilerplate/types";
+export type { Props as UBreadcrumbsProps } from "./ui.navigation-breadcrumbs/types";
+export type { Props as UButtonProps } from "./ui.button/types";
+export type { Props as UCalendarProps } from "./ui.form-calendar/types";
+export type { Props as UCardProps } from "./ui.container-card/types";
+export type { Props as UCheckboxProps } from "./ui.form-checkbox/types";
+export type { Props as UCheckboxGroupProps } from "./ui.form-checkbox-group/types";
+export type { Props as UCheckboxMultiStateProps } from "./ui.form-checkbox-multi-state/types";
+export type { Props as UChipProps } from "./ui.other-chip/types";
+export type { Props as UColProps } from "./ui.container-col/types";
+export type { Props as UCollapsibleProps } from "./ui.container-collapsible/types";
+export type { Props as UColorToggleProps } from "./ui.form-color-toggle/types";
+export type { Props as UDataListProps } from "./ui.data-list/types";
+export type { Props as UDatePickerProps } from "./ui.form-date-picker/types";
+export type { Props as UDatePickerRangeProps } from "./ui.form-date-picker-range/types";
+export type { Props as UDividerProps } from "./ui.container-divider/types";
+export type { Props as UDotProps } from "./ui.other-dot/types";
+export type { Props as UDrawerProps } from "./ui.container-drawer/types";
+export type { Props as UDropdownProps } from "./ui.dropdown/types";
+export type { Props as UDropdownBadgeProps } from "./ui.dropdown-badge/types";
+export type { Props as UDropdownButtonProps } from "./ui.dropdown-button/types";
+export type { Props as UDropdownLinkProps } from "./ui.dropdown-link/types";
+export type { Props as UEmptyProps } from "./ui.container-empty/types";
+export type { Props as UFileProps } from "./ui.text-file/types";
+export type { Props as UFilesProps } from "./ui.text-files/types";
+export type { Props as UGridProps } from "./ui.container-grid/types";
+export type { Props as UGroupProps } from "./ui.container-group/types";
+export type { Props as UGroupsProps } from "./ui.container-groups/types";
+export type { Props as UHeaderProps } from "./ui.text-header/types";
+export type { Props as UIconProps } from "./ui.image-icon/types";
+export type { Props as UInputProps } from "./ui.form-input/types";
+export type { Props as UInputCounterProps } from "./ui.form-input-counter/types";
+export type { Props as UInputFileProps } from "./ui.form-input-file/types";
+export type { Props as UInputNumberProps } from "./ui.form-input-number/types";
+export type { Props as UInputPasswordProps } from "./ui.form-input-password/types";
+export type { Props as UInputRatingProps } from "./ui.form-input-rating/types";
+export type { Props as UInputSearchProps } from "./ui.form-input-search/types";
+export type { Props as UKeyProps } from "./ui.text-key/types";
+export type { Props as ULabelProps } from "./ui.form-label/types";
+export type { Props as ULinkProps } from "./ui.button-link/types";
+export type { Props as UListboxProps } from "./ui.form-listbox/types";
+export type { Props as ULoaderProps } from "./ui.loader/types";
+export type { Props as ULoaderOverlayProps } from "./ui.loader-overlay/types";
+export type { Props as ULoaderProgressProps } from "./ui.loader-progress/types";
+export type { Props as UModalProps } from "./ui.container-modal/types";
+export type { Props as UModalConfirmProps } from "./ui.container-modal-confirm/types";
+export type { Props as UNotifyProps } from "./ui.text-notify/types";
+export type { Props as UNumberProps } from "./ui.text-number/types";
+export type { Props as UPageProps } from "./ui.container-page/types";
+export type { Props as UPaginationProps } from "./ui.navigation-pagination/types";
+export type { Props as UPlaceholderProps } from "./ui.container-placeholder/types";
+export type { Props as UProgressProps } from "./ui.navigation-progress/types";
+export type { Props as URadioProps } from "./ui.form-radio/types";
+export type { Props as URadioGroupProps } from "./ui.form-radio-group/types";
+export type { Props as URowProps } from "./ui.container-row/types";
+export type { Props as USelectProps } from "./ui.form-select/types";
+export type { Props as USkeletonProps } from "./ui.skeleton/types";
+export type { Props as USkeletonChoiceProps } from "./ui.skeleton-choice/types";
+export type { Props as USkeletonInputProps } from "./ui.skeleton-input/types";
+export type { Props as USkeletonTextProps } from "./ui.skeleton-text/types";
+export type { Props as USplitterProps } from "./ui.container-splitter/types";
+export type { Props as USwitchProps } from "./ui.form-switch/types";
+export type { Props as UTabProps } from "./ui.navigation-tab/types";
+export type { Props as UTableProps } from "./ui.data-table/types";
+export type { Props as UTabsProps } from "./ui.navigation-tabs/types";
+export type { Props as UTextProps } from "./ui.text-block/types";
+export type { Props as UTextareaProps } from "./ui.form-textarea/types";
+export type { Props as UThemeColorToggleProps } from "./ui.other-theme-color-toggle/types";
+export type { Props as UToggleProps } from "./ui.button-toggle/types";
+/* component data types */
+export type {
+  Row,
+  BaseRow,
+  TableRow,
+  FlatRow,
+  RowId,
+  RowData,
+  Cell,
+  CellObject,
+  Column,
+  ColumnObject,
+  TableColumn,
+  DateDivider,
+  BaseDateDivider,
+  SlotRow,
+  SelectedSlotRow,
+  UTableSlots,
+  UTableStaticSlots,
+  UTableDynamicSlots,
+} from "./ui.data-table/types";
+export type {
+  Option,
+  BaseOption,
+  ListboxOption,
+  SelectedValue,
+  SlotOption,
+  UListboxSlots,
+} from "./ui.form-listbox/types";
+export type {
+  SelectOption,
+  SelectedSlotOption,
+  SelectedOptionsBinding,
+  USelectSlots,
+} from "./ui.form-select/types";
+export type { UDropdownSlots } from "./ui.dropdown/types";
+export type { UDropdownBadgeSlots } from "./ui.dropdown-badge/types";
+export type { UDropdownButtonSlots } from "./ui.dropdown-button/types";
+export type { UDropdownLinkSlots } from "./ui.dropdown-link/types";
+export type { UTabsOption, BaseTabOption, UTabsSlots } from "./ui.navigation-tabs/types";
+export type { UBreadcrumb, BaseBreadcrumb } from "./ui.navigation-breadcrumbs/types";
+export type { UToggleOption, BaseToggleOption, UToggleSlots } from "./ui.button-toggle/types";
+export type { UAccordionOption, BaseAccordionOption } from "./ui.container-accordion/types";
+export type {
+  DataListItem,
+  BaseDataListItem,
+  SlotItem,
+  UDataListSlots,
+} from "./ui.data-list/types";
+export type { UCheckboxOption, BaseCheckboxOption } from "./ui.form-checkbox/types";
+export type { ChipItem, BaseChipItem } from "./ui.image-avatar/types";
+export type { AvatarItem, BaseAvatarItem } from "./ui.image-avatar-group/types";
 /* Export enums directly (not as types) */
 export { ColorMode } from "./types";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.2",
+  "version": "1.4.12-beta.21",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",
@@ -48,8 +48,8 @@
   },
   "devDependencies": {
     "@material-symbols/svg-500": "^0.44.4",
-    "@release-it/bumper": "^7.0.5",
-    "@release-it/conventional-changelog": "^11.0.0",
+    "@release-it/bumper": "^8.0.1",
+    "@release-it/conventional-changelog": "^12.0.2",
     "@tsconfig/node24": "^24.0.0",
     "@types/jsdom": "^28.0.1",
     "@types/node": "24.1.0",
@@ -59,7 +59,7 @@
     "@vue/eslint-config-typescript": "^14.7.0",
     "@vue/test-utils": "^2.4.8",
     "@vue/tsconfig": "^0.9.1",
-    "@vueless/storybook": "^1.7.3",
+    "@vueless/storybook": "^1.8.0",
     "eslint": "^10.2.1",
     "eslint-plugin-storybook": "^10.3.5",
     "eslint-plugin-tailwindcss": "^4.0.0-alpha.7",
@@ -67,7 +67,7 @@
     "globals": "^17.5.0",
     "jsdom": "^29.0.2",
     "prettier": "^3.8.3",
-    "release-it": "^20.0.1",
+    "release-it": "^21.0.3",
     "typescript": "^6.0.3",
     "vite": "^8.0.10",
     "vitest": "^4.1.5",
@@ -105,9 +105,6 @@
       "types": "./modules.d.ts"
     }
   },
-  "overrides": {
-    "conventional-changelog-conventionalcommits": "8.0.0"
-  },
   "resolutions": {
     "jackspeak": "2.3.6"
   },
@@ -136,5 +133,9 @@
     "styleless",
     "headlessui",
     "ui"
-  ]
+  ],
+  "allowScripts": {
+    "esbuild@0.28.1": true,
+    "fsevents@2.3.3": true
+  }
 }

package/ui.button/config.ts

@@ -2,7 +2,7 @@ export default /*tw*/ {
   button: {
     base: `
       flex items-center justify-center font-medium leading-snug! whitespace-nowrap
-      border border-solid outline-solid outline-transparent transition cursor-pointer
+      border border-solid outline-solid outline-medium outline-transparent transition cursor-pointer
       focus-visible:outline-medium focus-visible:outline-offset-2 focus-visible:outline-{color}
       disabled:cursor-not-allowed disabled:outline-0 disabled:outline-offset-0
     `,

package/ui.button-link/config.ts

@@ -5,7 +5,7 @@ export default /*tw*/ {
       text-{color} decoration-{color} underline-offset-4
       hover:text-{color}-lifted hover:decoration-{color}-lifted
       active:text-{color}-accented active:decoration-{color}-accented
-      outline-solid outline-transparent
+      outline-solid outline-medium outline-transparent
       focus-visible:outline-medium focus-visible:rounded-small
       focus-visible:outline-offset-4 focus-visible:outline-{color}
     `,

package/ui.button-toggle/UToggle.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="TItem extends UToggleOption">
 import { computed, ref, useId, useTemplateRef } from "vue";
 
 import UButton from "../ui.button/UButton.vue";
@@ -9,16 +9,18 @@ import { getDefaults } from "../utils/ui";
 import defaultConfig from "./config";
 import { COMPONENT_NAME } from "./constants";
 
-import type { Props, Config, UToggleOption } from "./types";
+import type { Props, Config, UToggleOption, UToggleSlots } from "./types";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<Props>(), {
-  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
+const props = withDefaults(defineProps<Props<TItem>>(), {
+  ...getDefaults<Props<TItem>, Config>(defaultConfig, COMPONENT_NAME),
   options: () => [],
   modelValue: () => [],
 });
 
+defineSlots<UToggleSlots<TItem>>();
+
 const emit = defineEmits([
   /**
    * Triggers when toggle option is selected.

package/ui.button-toggle/storybook/stories.ts

@@ -7,7 +7,7 @@ import {
   getDocsDescription,
 } from "../../utils/storybook";
 
-import UToggle from "../../ui.button-toggle/UToggle.vue";
+import UToggleComponent from "../../ui.button-toggle/UToggle.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import URow from "../../ui.container-row/URow.vue";
 import UBadge from "../../ui.text-badge/UBadge.vue";
@@ -17,6 +17,9 @@ import ULabel from "../../ui.form-label/ULabel.vue";
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
 import type { Props } from "../types";
 
+/* Generic SFCs are typed as a function, which drops the compiler-generated `__name`. */
+const UToggle = UToggleComponent as typeof UToggleComponent & { __name: string };
+
 interface UToggleArgs extends Props {
   slotTemplate?: string;
   enum: "size";

package/ui.button-toggle/tests/UToggle.test-d.ts

@@ -0,0 +1,48 @@
+import { describe, it, expectTypeOf } from "vitest";
+
+import type { Props, UToggleOption, UToggleSlots } from "../types";
+
+interface CountedOption {
+  value: string;
+  label: string;
+  count: number;
+}
+
+type OptionProps = Parameters<NonNullable<UToggleSlots<CountedOption>["option"]>>[0];
+
+describe("UToggle types", () => {
+  it("infers the caller's option shape in a slot", () => {
+    expectTypeOf<OptionProps["option"]>().toEqualTypeOf<CountedOption>();
+    expectTypeOf<OptionProps["option"]["count"]>().toEqualTypeOf<number>();
+    expectTypeOf<OptionProps["index"]>().toEqualTypeOf<number>();
+    expectTypeOf<OptionProps["label"]>().toEqualTypeOf<string>();
+  });
+
+  it("promises the caller's members — options reach slots untransformed", () => {
+    /* Unlike UTable, `UToggle` iterates `props.options` directly: no flattening, filtering
+     * or synthetic entries, so the members are guaranteed rather than optional. */
+    expectTypeOf<OptionProps["option"]["label"]>().toEqualTypeOf<string>();
+    expectTypeOf<undefined>().not.toExtend<OptionProps["option"]["count"]>();
+  });
+
+  it("does not expose undeclared option properties to a slot", () => {
+    type HasIndexSignature = string extends keyof OptionProps["option"] ? true : false;
+
+    expectTypeOf<HasIndexSignature>().toEqualTypeOf<false>();
+    expectTypeOf<keyof OptionProps["option"]>().not.toEqualTypeOf<string>();
+  });
+
+  it("types the remaining slots", () => {
+    type Left = Parameters<NonNullable<UToggleSlots<CountedOption>["left"]>>[0];
+    type Right = Parameters<NonNullable<UToggleSlots<CountedOption>["right"]>>[0];
+
+    expectTypeOf<Left["option"]>().toEqualTypeOf<CountedOption>();
+    expectTypeOf<Right["option"]>().toEqualTypeOf<CountedOption>();
+    expectTypeOf<Left["iconName"]>().toEqualTypeOf<string | undefined>();
+  });
+
+  it("resolves Props with no type argument", () => {
+    expectTypeOf<Props>().toEqualTypeOf<Props<UToggleOption>>();
+    expectTypeOf<Props<CountedOption>["options"]>().toEqualTypeOf<CountedOption[] | undefined>();
+  });
+});

package/ui.button-toggle/tests/UToggleTypes.vue

@@ -0,0 +1,55 @@
+<!-- Type-level fixture: checked by `npm run ts:check`, never mounted.
+     Proves slot props infer from the `options` prop at a real call site. -->
+<template>
+  <!-- `UToggle` iterates `options` verbatim, so the caller's shape is guaranteed, not optional. -->
+  <UToggle name="fixture" :options="options">
+    <template #left="{ option, index, iconName }">
+      {{ expectString(option.color) }}
+      {{ expectNumber(index) }}
+      {{ expectOptionalString(iconName) }}
+    </template>
+
+    <template #option="{ option, label, index }">
+      {{ expectString(option.color) }}
+      {{ expectString(label) }}
+      {{ expectNumber(index) }}
+    </template>
+
+    <template #right="{ option }">
+      <!-- @vue-expect-error `nonExistent` is not a key of the inferred option. -->
+      {{ option.nonExistent }}
+    </template>
+  </UToggle>
+
+  <!-- Options from a non-literal source still expose the declared option shape. -->
+  <UToggle name="typed" :options="typedOptions">
+    <template #option="{ option }">{{ expectNumber(option.count) }}</template>
+  </UToggle>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+import UToggle from "../UToggle.vue";
+
+interface CountedOption {
+  value: string;
+  label: string;
+  count: number;
+}
+
+const options = [{ value: "1", label: "Success", color: "success" }];
+const typedOptions = ref<CountedOption[]>([]);
+
+function expectString(value: string) {
+  return value;
+}
+
+function expectNumber(value: number) {
+  return value;
+}
+
+function expectOptionalString(value: string | undefined) {
+  return value;
+}
+</script>

package/ui.button-toggle/types.ts

@@ -1,21 +1,33 @@
 import defaultConfig from "./config";
 
-import type { ComponentConfig } from "../types";
+import type { ComponentConfig, UnknownObject } from "../types";
 
 export type Config = typeof defaultConfig;
 
-export interface UToggleOption {
+export interface BaseToggleOption {
   value: string | number | boolean;
   label?: string;
   disabled?: boolean;
   icon?: string;
   leftIcon?: string;
   rightIcon?: string;
-  onClick?: (option: Omit<UToggleOption, "onClick">) => void;
-  [key: string]: unknown;
+  onClick?: (option: Omit<BaseToggleOption, "onClick">) => void;
 }
 
-export interface Props {
+/* Any object shape is a valid option, only reserved option keys are type checked. */
+export type UToggleOption = BaseToggleOption & (object | UnknownObject);
+
+/**
+ * Slots receive each option verbatim — `UToggle` iterates `props.options` without
+ * filtering, flattening or synthesising entries, so the caller's shape is guaranteed.
+ */
+export interface UToggleSlots<TItem extends UToggleOption = UToggleOption> {
+  left?: (props: { option: TItem; index: number; iconName?: string }) => unknown;
+  option?: (props: { option: TItem; index: number; label: string; iconName?: string }) => unknown;
+  right?: (props: { option: TItem; index: number; iconName?: string }) => unknown;
+}
+
+export interface Props<TItem extends UToggleOption = UToggleOption> {
   /**
    * Selected value.
    */
@@ -24,7 +36,7 @@ export interface Props {
   /**
    * Toggle item options.
    */
-  options?: UToggleOption[];
+  options?: TItem[];
 
   /**
    * Toggle size.

package/ui.container-accordion/types.ts

@@ -1,15 +1,18 @@
 import defaultConfig from "./config";
-import type { ComponentConfig } from "../types";
+import type { ComponentConfig, UnknownObject } from "../types";
 
 export type Config = typeof defaultConfig;
 
-export interface UAccordionOption {
+export interface BaseAccordionOption {
   value: string;
   title: string;
   description?: string;
   opened?: boolean;
 }
 
+/* Any object shape is a valid option, only reserved option keys are type checked. */
+export type UAccordionOption = BaseAccordionOption & (object | UnknownObject);
+
 export type SetAccordionSelectedItem = (value: string, opened: boolean) => void;
 
 export interface Props {

package/ui.container-collapsible/config.ts

@@ -1,7 +1,7 @@
 export default /*tw*/ {
   wrapper: {
     base: `
-      relative inline-block h-max rounded-medium transition cursor-pointer outline-solid outline-transparent
+      relative inline-block h-max rounded-medium transition cursor-pointer outline-solid outline-medium outline-transparent
       focus-visible:outline-medium focus-visible:outline-offset-2 focus-visible:outline-primary`,
     variants: {
       disabled: {