vueless 1.4.12-beta.16 → 1.4.12-beta.18

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/index.d.ts

@@ -108,6 +108,108 @@ 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,
+} from "./ui.data-table/types";
+export type { Option, BaseOption, ListboxOption, SelectedValue } from "./ui.form-listbox/types";
+export type { SelectOption } from "./ui.form-select/types";
+export type { UTabsOption, BaseTabOption } from "./ui.navigation-tabs/types";
+export type { UBreadcrumb, BaseBreadcrumb } from "./ui.navigation-breadcrumbs/types";
+export type { UToggleOption, BaseToggleOption } from "./ui.button-toggle/types";
+export type { UAccordionOption, BaseAccordionOption } from "./ui.container-accordion/types";
+export type { DataListItem, BaseDataListItem } 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,108 @@ 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,
+} from "./ui.data-table/types";
+export type { Option, BaseOption, ListboxOption, SelectedValue } from "./ui.form-listbox/types";
+export type { SelectOption } from "./ui.form-select/types";
+export type { UTabsOption, BaseTabOption } from "./ui.navigation-tabs/types";
+export type { UBreadcrumb, BaseBreadcrumb } from "./ui.navigation-breadcrumbs/types";
+export type { UToggleOption, BaseToggleOption } from "./ui.button-toggle/types";
+export type { UAccordionOption, BaseAccordionOption } from "./ui.container-accordion/types";
+export type { DataListItem, BaseDataListItem } 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.16",
+  "version": "1.4.12-beta.18",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

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/types.ts

@@ -1,20 +1,22 @@
 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;
 }
 
+/* Any object shape is a valid option, only reserved option keys are type checked. */
+export type UToggleOption = BaseToggleOption & (object | UnknownObject);
+
 export interface Props {
   /**
    * Selected value.

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: {

package/ui.data-list/UDataList.vue

@@ -13,6 +13,7 @@ import { COMPONENT_NAME } from "./constants";
 import defaultConfig from "./config";
 import { useComponentLocaleMessages } from "../composables/useComponentLocaleMassages";
 
+import type { UnknownObject } from "../types";
 import type { Props, DataListItem, Config } from "./types";
 
 defineOptions({ inheritAttrs: false });
@@ -43,7 +44,9 @@ function isCrossed(element: DataListItem) {
 }
 
 function hasNestedList(element: DataListItem) {
-  return Boolean(element.children?.length || (props.nestedKey && element[props.nestedKey]));
+  return Boolean(
+    element.children?.length || (props.nestedKey && (element as UnknownObject)[props.nestedKey]),
+  );
 }
 
 function onDragEnd() {
@@ -61,7 +64,7 @@ function prepareSortData(list: DataListItem[] = [], parentValue: string | number
     if (hasItemChildren) {
       const childrenItem = prepareSortData(
         item.children,
-        item[props.valueKey] as string | number | null,
+        (item as UnknownObject)[props.valueKey] as string | number | null,
       );
 
       childrenItem.forEach((item) => sortData.push(item));

package/ui.data-list/tests/UDataList.test.ts

@@ -9,7 +9,7 @@ import draggable from "vuedraggable";
 import type { Props, DataListItem } from "../types";
 
 describe("UDataList.vue", () => {
-  const defaultList: DataListItem[] = [
+  const defaultList = [
     { value: 1, label: "Item 1" },
     { value: 2, label: "Item 2", crossed: true },
     { value: 3, label: "Item 3", actions: false },
@@ -280,7 +280,7 @@ describe("UDataList.vue", () => {
     });
 
     it("Nesting – emits dragged item with parentValue of the leaf after drop into empty drop-zone", async () => {
-      const leaf: DataListItem = { value: 1, label: "Leaf", canNest: true, children: [] };
+      const leaf = { value: 1, label: "Leaf", canNest: true, children: [] as DataListItem[] };
       const list: DataListItem[] = [leaf, { value: 2, label: "Dragged", canNest: true }];
 
       const component = mount(UDataList, {
@@ -293,7 +293,10 @@ describe("UDataList.vue", () => {
 
       await component.findComponent(draggable).vm.$emit("end");
 
-      const sortData = component.emitted("dragSort")?.[0]?.[0] as DataListItem[];
+      const sortData = component.emitted("dragSort")?.[0]?.[0] as {
+        value: number;
+        parentValue: unknown;
+      }[];
       const dragged = sortData.find((item) => item.value === 2);
 
       expect(dragged?.parentValue).toBe(leaf.value);

package/ui.data-list/types.ts

@@ -2,7 +2,7 @@ import defaultConfig from "./config";
 
 import DraggableContext from "vuedraggable";
 
-import type { ComponentConfig, UnknownType } from "../types";
+import type { ComponentConfig, UnknownObject } from "../types";
 
 export type Config = typeof defaultConfig;
 
@@ -11,13 +11,15 @@ export interface DragMoveEvent extends DragEvent {
   relatedContext: typeof DraggableContext | null;
 }
 
-export interface DataListItem {
+export interface BaseDataListItem {
   crossed?: boolean;
   actions?: boolean;
   children?: DataListItem[];
-  [key: string]: UnknownType | DataListItem[];
 }
 
+/* Any object shape is a valid item, only reserved item keys are type checked. */
+export type DataListItem = BaseDataListItem & (object | UnknownObject);
+
 export interface Props {
   /**
    * Data item options.

package/ui.data-table/UTable.vue

@@ -212,7 +212,7 @@ const tableRowWidthStyle = computed(() => ({
   width: `${tableWidth.value / PX_IN_REM}rem`,
 }));
 
-const flatTableRows = computed(() => getFlatRows(props.rows));
+const flatTableRows = computed(() => getFlatRows(props.rows as Row[]));
 
 const visibleFlatRows = computed(() => {
   const expanded = expandedRowsSet.value;
@@ -532,7 +532,7 @@ onBeforeUnmount(() => {
 
 function onChangeSelectedRows() {
   if (!isEqual(props.selectedRows, localSelectedRows.value)) {
-    localSelectedRows.value = props.selectedRows;
+    localSelectedRows.value = props.selectedRows as Row[];
   }
 }
 

package/ui.data-table/types.ts

@@ -25,20 +25,30 @@ export interface RowData {
   [key: string]: Cell;
 }
 
-export interface DateDivider {
+export interface BaseDateDivider {
   date: Date | string;
   label?: string;
   config?: ComponentConfig<UDividerConfig>;
 }
 
-export interface Row {
+/* Any object shape is a valid divider, only reserved divider keys are type checked. */
+export type DateDivider = BaseDateDivider & (object | UnknownObject);
+
+export interface BaseRow {
   id: RowId;
   rowDate?: string | Date;
-  row?: Row | Row[];
+  row?: TableRow | TableRow[];
   class?: string | ((row: Row) => string);
+}
+
+export interface Row extends BaseRow {
+  row?: Row | Row[];
   [key: string]: unknown;
 }
 
+/* Any object shape is a valid row, only reserved row keys are type checked. */
+export type TableRow = BaseRow & (object | UnknownObject);
+
 export interface FlatRow extends Row {
   parentRowId?: RowId;
   nestedLevel: number;
@@ -58,7 +68,10 @@ export interface ColumnObject {
   thClass?: string;
 }
 
-export type Column = ColumnObject | string;
+/* Any object shape is a valid column, only reserved column keys are type checked. */
+export type TableColumn = ColumnObject & (object | UnknownObject);
+
+export type Column = TableColumn | string;
 
 export interface Props {
   /**
@@ -69,12 +82,12 @@ export interface Props {
   /**
    * Table rows data.
    */
-  rows: Row[];
+  rows: TableRow[];
 
   /**
    * Selected rows.
    */
-  selectedRows?: Row[];
+  selectedRows?: TableRow[];
 
   /**
    * Selected rows id.

package/ui.dropdown/UDropdown.vue

@@ -83,9 +83,12 @@ const dropdownSearch = computed({
   set: (value: string) => emit("update:search", value),
 });
 
+/* Indexable view of the options, `labelKey` / `valueKey` lookups need an index signature. */
+const localOptions = computed(() => props.options as Option[]);
+
 const selectedOptions = computed(() => {
   if (props.multiple) {
-    return props.options.filter((option) => {
+    return localOptions.value.filter((option) => {
       return (
         option[props.valueKey] &&
         (dropdownValue.value as SelectedValue[]).find((selected) =>
@@ -96,7 +99,7 @@ const selectedOptions = computed(() => {
   }
 
   return [
-    props.options.find(
+    localOptions.value.find(
       (option) => option[props.valueKey] && isEqual(option[props.valueKey], dropdownValue.value),
     ),
   ].filter((option) => !!option);

package/ui.dropdown/types.ts

@@ -1,6 +1,6 @@
 import defaultConfig from "./config";
 
-import type { Option } from "../ui.form-listbox/types";
+import type { ListboxOption } from "../ui.form-listbox/types";
 import type { ComponentConfig, UnknownObject } from "../types";
 
 export type Config = typeof defaultConfig;
@@ -24,7 +24,7 @@ export interface Props {
   /**
    * Options list.
    */
-  options?: Option[];
+  options?: ListboxOption[];
 
   /**
    * Label key in the item object of options.

package/ui.dropdown-badge/types.ts

@@ -1,6 +1,6 @@
 import defaultConfig from "./config";
 
-import type { Option } from "../ui.form-listbox/types";
+import type { ListboxOption } from "../ui.form-listbox/types";
 import type { ComponentConfig, UnknownObject } from "../types";
 
 export type Config = typeof defaultConfig;
@@ -24,7 +24,7 @@ export interface Props {
   /**
    * Options list.
    */
-  options?: Option[];
+  options?: ListboxOption[];
 
   /**
    * Label key in the item object of options.

package/ui.dropdown-button/types.ts

@@ -1,6 +1,6 @@
 import defaultConfig from "./config";
 
-import type { Option } from "../ui.form-listbox/types";
+import type { ListboxOption } from "../ui.form-listbox/types";
 import type { ComponentConfig, UnknownObject } from "../types";
 
 export type Config = typeof defaultConfig;
@@ -24,7 +24,7 @@ export interface Props {
   /**
    * Options list.
    */
-  options?: Option[];
+  options?: ListboxOption[];
 
   /**
    * Label key in the item object of options.

package/ui.dropdown-link/config.ts

@@ -3,7 +3,7 @@ export default /*tw*/ {
     base: `
       {UDropdown}
       inline-flex gap-0.5 items-center justify-between rounded-small h-max
-      outline-solid outline-transparent
+      outline-solid outline-0 outline-transparent
       focus-visible:outline-offset-4
     `,
     defaults: {

package/ui.dropdown-link/types.ts

@@ -1,6 +1,6 @@
 import defaultConfig from "./config";
 
-import type { Option } from "../ui.form-listbox/types";
+import type { ListboxOption } from "../ui.form-listbox/types";
 import type { ComponentConfig, UnknownObject } from "../types";
 
 export type Config = typeof defaultConfig;
@@ -24,7 +24,7 @@ export interface Props {
   /**
    * Options list.
    */
-  options?: Option[];
+  options?: ListboxOption[];
 
   /**
    * Label key in the item object of options.

package/ui.form-calendar/config.ts

@@ -56,7 +56,7 @@ export default /*tw*/ {
   timepicker: "mt-2 pl-1 pt-3 text-medium flex items-stretch justify-between gap-2 border-t border-muted",
   timepickerLabel: "w-full self-center",
   timepickerInputWrapper: `
-    flex items-center rounded-medium border border-solid border-default outline-solid outline-transparent
+    flex items-center rounded-medium border border-solid border-default outline-solid outline-small outline-transparent
     hover:focus-within:border-primary focus-within:border-primary
     focus-within:outline focus-within:outline-small focus-within:outline-primary
   `,

package/ui.form-checkbox/config.ts

@@ -12,7 +12,7 @@ export default /*tw*/ {
   },
   checkbox: {
     base: `
-      {>checkboxBase} ml-0 bg-default border border-solid border-default outline-solid outline-transparent
+      {>checkboxBase} ml-0 bg-default border border-solid border-default outline-solid outline-medium outline-transparent
       appearance-none p-0 print:color-adjust-exact inline-block align-middle bg-origin-border select-none shrink-0
       hover:border-lifted
       active:border-{color} active:bg-{color}/15

package/ui.form-checkbox/tests/UCheckbox.test.ts

@@ -33,7 +33,7 @@ describe("UCheckbox.vue", () => {
     it("Value – returns correct value type when checkbox is checked", async () => {
       const testValues = ["string-value", 42, true, { id: 1, name: "test" }, [1, 2, 3]];
 
-      testValues.forEach(async (testValue) => {
+      for (const testValue of testValues) {
         const component = mount(UCheckbox, {
           props: {
             value: testValue,
@@ -48,7 +48,7 @@ describe("UCheckbox.vue", () => {
         const emittedValues = component.emitted("update:modelValue");
 
         expect(emittedValues![0][0]).toEqual([testValue]);
-      });
+      }
     });
 
     it("TrueValue and FalseValue – returns correct values when checkbox is checked and unchecked", async () => {
@@ -59,7 +59,7 @@ describe("UCheckbox.vue", () => {
         { trueValue: true, falseValue: false },
       ];
 
-      testValuePairs.forEach(async ({ trueValue, falseValue }) => {
+      for (const { trueValue, falseValue } of testValuePairs) {
         const component = mount(UCheckbox, {
           props: {
             trueValue,
@@ -81,7 +81,7 @@ describe("UCheckbox.vue", () => {
         emittedValues = component.emitted("update:modelValue");
 
         expect(emittedValues![1][0]).toEqual(falseValue);
-      });
+      }
     });
 
     it("Partial – displays correct icon when checkbox is partially checked", () => {

package/ui.form-checkbox/types.ts

@@ -4,16 +4,18 @@ import type { ComponentConfig, UnknownObject, UnknownArray } from "../types";
 
 export type Config = typeof defaultConfig;
 
-export interface UCheckboxOption {
+export interface BaseCheckboxOption {
   value?: string | number | boolean | UnknownObject | UnknownArray;
   falseValue?: string | number | boolean | UnknownObject | UnknownArray;
   trueValue?: string | number | boolean | UnknownObject | UnknownArray;
   label?: string;
   icon?: string;
   description?: string;
-  [key: string]: string | number | boolean | UnknownObject | UnknownArray | undefined;
 }
 
+/* Any object shape is a valid option, only reserved option keys are type checked. */
+export type UCheckboxOption = BaseCheckboxOption & (object | UnknownObject);
+
 export interface Props {
   /**
    * Checkbox value.

package/ui.form-checkbox-group/UCheckboxGroup.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { provide, ref, watch, useTemplateRef } from "vue";
+import { computed, provide, ref, watch, useTemplateRef } from "vue";
 import { isEqual } from "lodash-es";
 
 import { useUI } from "../composables/useUI";
@@ -12,6 +12,7 @@ import { COMPONENT_NAME } from "./constants";
 import defaultConfig from "./config";
 
 import type { UnknownObject } from "../types";
+import type { BaseCheckboxOption } from "../ui.form-checkbox/types";
 import type { Props, Config } from "./types";
 
 defineOptions({ inheritAttrs: false });
@@ -35,6 +36,11 @@ const listRef = useTemplateRef<HTMLDivElement>("list");
 
 const checkedItems = ref([] as UnknownObject[]);
 
+/* Indexable view of the options for `labelKey` / `valueKey` lookups. */
+const keyedOptions = computed(
+  () => props.options as (BaseCheckboxOption & Record<string, BaseCheckboxOption["value"]>)[],
+);
+
 provide<(value: UnknownObject[]) => void>(
   "setCheckboxGroupCheckedItems",
   (value: UnknownObject[]) => {
@@ -116,7 +122,7 @@ const { getDataTest, groupLabelAttrs, groupCheckboxAttrs, listAttrs } =
       <!-- @slot Use it to add UCheckbox directly. -->
       <slot>
         <UCheckbox
-          v-for="(option, index) in options"
+          v-for="(option, index) in keyedOptions"
           :key="index"
           :model-value="modelValue"
           :value="option[valueKey]"

package/ui.form-input/config.ts

@@ -12,7 +12,7 @@ export default /*tw*/ {
   wrapper: {
     base: `
       flex gap-3 w-full px-3 relative bg-default transition
-      border border-solid rounded-medium border-default outline-solid outline-transparent
+      border border-solid rounded-medium border-default outline-solid outline-small outline-transparent
       hover:border-lifted hover:focus-within:border-primary focus-within:border-primary
       focus-within:outline focus-within:outline-small focus-within:outline-primary focus-within:transition
     `,

package/ui.form-input-file/config.ts

@@ -3,7 +3,7 @@ export default /*tw*/ {
   dropzone: {
     base: `
       p-3 size-auto w-full bg-default transition
-      rounded-medium border border-solid border-default outline-solid outline-transparent
+      rounded-medium border border-solid border-default outline-solid outline-small outline-transparent
       hover:border-lifted hover:focus-within:border-primary focus-within:border-primary
       focus-within:outline focus-within:outline-small focus-within:outline-primary
     `,

package/ui.form-listbox/UListbox.vue

@@ -75,8 +75,11 @@ const wrapperMaxHeight = ref("");
 
 const localSearch = ref(props.search ?? "");
 
+/* Indexable view of the options, `labelKey` / `valueKey` lookups need an index signature. */
+const localOptions = computed(() => props.options as Option[]);
+
 const { pointer, pointerDirty, pointerSet, pointerBackward, pointerForward, pointerReset } =
-  usePointer(props.options, optionsRef, wrapperRef);
+  usePointer(localOptions.value, optionsRef, wrapperRef);
 
 const elementId = props.id || useId();
 
@@ -126,7 +129,7 @@ const getOptionAriaSelected = (option: Option) => {
 const filteredOptions = computed(() => {
   const normalizedSearch = searchModel.value.toLowerCase().trim();
 
-  let options = [...props.options];
+  let options = [...localOptions.value];
 
   options = props.groupValueKey
     ? filterGroups(
@@ -324,9 +327,9 @@ function optionHighlight(index: number, option: Option) {
 }
 
 function addPointerElement(keyCode?: string) {
-  if (props.options.length > 0) {
-    select(props.options[pointer.value], keyCode);
-    onClickOption(props.options[pointer.value]);
+  if (localOptions.value.length > 0) {
+    select(localOptions.value[pointer.value], keyCode);
+    onClickOption(localOptions.value[pointer.value]);
   }
 
   pointerReset();

package/ui.form-listbox/types.ts

@@ -16,6 +16,9 @@ export interface Option extends BaseOption {
   [key: string]: string | number | boolean | UnknownObject | Option[] | OnClickOption | undefined;
 }
 
+/* Any object shape is a valid option, only reserved option keys are type checked. */
+export type ListboxOption = BaseOption & (object | UnknownObject);
+
 export type SelectedValue = string | number | UnknownObject;
 
 export interface Props {
@@ -32,7 +35,7 @@ export interface Props {
   /**
    * List options.
    */
-  options?: Option[];
+  options?: ListboxOption[];
 
   /**
    * Shows input to search value in a list.

package/ui.form-radio/config.ts

@@ -3,7 +3,7 @@ export default /*tw*/ {
   radio: {
     base: `
       bg-default cursor-pointer transition
-      border border-solid border-default rounded-full outline-solid outline-transparent
+      border border-solid border-default rounded-full outline-solid outline-medium outline-transparent
       appearance-none p-0 print:color-adjust-exact inline-block align-middle bg-origin-border select-none shrink-0
       hover:border-lifted hover:checked:border-{color}
       active:border-{color} active:bg-{color}/15

package/ui.form-radio-group/URadioGroup.vue

@@ -10,7 +10,7 @@ import URadio from "../ui.form-radio/URadio.vue";
 import defaultConfig from "./config";
 import { COMPONENT_NAME } from "./constants";
 
-import type { Props, SetRadioGroupSelectedItem, Config } from "./types";
+import type { Props, BaseOption, SetRadioGroupSelectedItem, Config } from "./types";
 
 defineOptions({ inheritAttrs: false });
 
@@ -31,6 +31,11 @@ const emit = defineEmits([
 
 const listRef = useTemplateRef<HTMLDivElement>("list");
 
+/* Indexable view of the options for `labelKey` / `valueKey` lookups. */
+const keyedOptions = computed(
+  () => props.options as (BaseOption & Record<string, BaseOption["value"]>)[],
+);
+
 const selectedItem = computed({
   get: () => props.modelValue,
   set: (value) => emit("update:modelValue", value),
@@ -106,7 +111,7 @@ const { getDataTest, groupLabelAttrs, listAttrs, groupRadioAttrs } = useUI<Confi
       <!-- @slot Use it to add URadio directly. -->
       <slot>
         <URadio
-          v-for="(option, index) in options"
+          v-for="(option, index) in keyedOptions"
           :key="index"
           :model-value="selectedItem"
           :value="option[valueKey]"

package/ui.form-radio-group/types.ts

@@ -10,9 +10,8 @@ export interface BaseOption {
   description?: string;
 }
 
-export interface Option extends BaseOption {
-  [key: string]: string | number | boolean | UnknownArray | UnknownObject | undefined;
-}
+/* Any object shape is a valid option, only reserved option keys are type checked. */
+export type Option = BaseOption & (object | UnknownObject);
 
 export type SetRadioGroupSelectedItem =
   | ((value: string | number | boolean | UnknownArray | UnknownObject) => void)

package/ui.form-select/USelect.vue

@@ -151,16 +151,20 @@ const isMultipleBadgeVariant = computed(
   () => props.multiple && props.multipleVariant === MULTIPLE_VARIANTS.badge,
 );
 
+const listboxOptions = computed(() => props.options as Option[]);
+
 const localValue = computed<Option | Option[]>(() => {
   if (!props.multiple) {
     const [singleValue] = Array.isArray(props.modelValue) ? props.modelValue : [props.modelValue];
 
-    return getCurrentOption(props.options, singleValue, props.valueKey, props.groupValueKey);
+    return getCurrentOption(listboxOptions.value, singleValue, props.valueKey, props.groupValueKey);
   }
 
   return props.modelValue && Array.isArray(props.modelValue)
     ? (props.modelValue
-        .map((value) => getCurrentOption(props.options, value, props.valueKey, props.groupValueKey))
+        .map((value) =>
+          getCurrentOption(listboxOptions.value, value, props.valueKey, props.groupValueKey),
+        )
         .filter(Boolean) as Option[])
     : [];
 });
@@ -858,7 +862,7 @@ const {
         :searchable="searchable"
         :options-limit="optionsLimit"
         :multiple="multiple"
-        :options="options"
+        :options="listboxOptions"
         :disabled="disabled"
         :size="size"
         :debounce="debounce"

package/ui.form-select/config.ts

@@ -11,10 +11,10 @@ export default /*tw*/ {
   },
   wrapper: {
     base: `
-      flex flex-row-reverse justify-between w-full min-h-full box-border relative
-      rounded-medium border border-solid border-default bg-default outline-solid outline-transparent
-      hover:border-lifted hover:transition hover:focus-within:border-primary focus-within:border-primary
-      focus-within:outline focus-within:outline-small focus-within:outline-primary focus-within:transition
+      flex flex-row-reverse justify-between w-full min-h-full box-border relative transition
+      rounded-medium border border-solid border-default bg-default outline-solid outline-small outline-transparent
+      hover:border-lifted hover:focus-within:border-primary focus-within:border-primary
+      focus-within:outline focus-within:outline-small focus-within:outline-primary
     `,
     variants: {
       error: {

package/ui.form-select/types.ts

@@ -1,10 +1,13 @@
 import defaultConfig from "./config";
 
-import type { Option } from "../ui.form-listbox/types";
-import type { ComponentConfig } from "../types";
+import type { BaseOption } from "../ui.form-listbox/types";
+import type { ComponentConfig, UnknownObject } from "../types";
 
 export type Config = typeof defaultConfig;
 
+/* Any object shape is a valid option, only reserved option keys are type checked. */
+export type SelectOption = BaseOption & (object | UnknownObject);
+
 export interface Props {
   /**
    * Select value.
@@ -14,7 +17,7 @@ export interface Props {
   /**
    * Select options.
    */
-  options?: Option[];
+  options?: SelectOption[];
 
   /**
    * Select label.

package/ui.form-switch/config.ts

@@ -6,7 +6,8 @@ export default /*tw*/ {
   },
   wrapper: {
     base: `
-      flex items-center p-0.5 relative rounded-full outline-solid outline-transparent cursor-pointer transition focus-within:transition
+      flex items-center p-0.5 relative cursor-pointer transition focus-within:transition
+      rounded-full outline-solid outline-medium outline-transparent
       focus-visible:outline focus-visible:outline-medium focus-visible:outline-offset-2 focus-visible:outline-{color}
     `,
     variants: {

package/ui.form-textarea/config.ts

@@ -15,7 +15,7 @@ export default /*tw*/ {
   wrapper: {
     base: `
       flex px-3 py-2 gap-3 w-full bg-default transition
-      rounded-medium border border-solid border-default outline-solid outline-transparent
+      rounded-medium border border-solid border-default outline-solid outline-small outline-transparent
       hover:border-lifted hover:focus-within:border-primary focus-within:border-primary
       focus-within:outline focus-within:outline-small focus-within:outline-primary focus-within:transition
     `,

package/ui.image-avatar/types.ts

@@ -1,10 +1,10 @@
 import defaultConfig from "./config";
 
-import type { ComponentConfig } from "../types";
+import type { ComponentConfig, UnknownObject } from "../types";
 
 export type Config = typeof defaultConfig;
 
-export interface ChipItem {
+export interface BaseChipItem {
   icon?: string;
   color?: Props["color"];
   xPosition?: "left" | "right";
@@ -12,6 +12,9 @@ export interface ChipItem {
   inset?: boolean;
 }
 
+/* Any object shape is a valid chip, only reserved chip keys are type checked. */
+export type ChipItem = BaseChipItem & (object | UnknownObject);
+
 export interface Props {
   /**
    * Avatar label (username, nickname, etc.).

package/ui.image-avatar-group/types.ts

@@ -1,11 +1,11 @@
 import defaultConfig from "./config";
 
-import type { ComponentConfig } from "../types";
+import type { ComponentConfig, UnknownObject } from "../types";
 import type { ChipItem } from "../ui.image-avatar/types";
 
 export type Config = typeof defaultConfig;
 
-export interface AvatarItem {
+export interface BaseAvatarItem {
   src?: string;
   label?: string;
   color?: string;
@@ -13,6 +13,9 @@ export interface AvatarItem {
   chip?: ChipItem;
 }
 
+/* Any object shape is a valid avatar, only reserved avatar keys are type checked. */
+export type AvatarItem = BaseAvatarItem & (object | UnknownObject);
+
 export interface Props {
   /**
    * Avatar items.

package/ui.image-icon/UIcon.vue

@@ -11,13 +11,14 @@ import defaultConfig from "./config";
 
 import USkeleton from "../ui.skeleton/USkeleton.vue";
 
-import type { AsyncComponentLoader, ComponentPublicInstance } from "vue";
+import type { AsyncComponentLoader, ComponentOptions, ComponentPublicInstance } from "vue";
 import type { Props, Config } from "./types";
 
 defineOptions({ inheritAttrs: false });
 
 const props = withDefaults(defineProps<Props>(), {
   ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
+  src: undefined,
 });
 
 const emit = defineEmits([
@@ -53,7 +54,7 @@ const dynamicComponent = computed(() => {
   }
 
   const name = props.name;
-  const src = props.src;
+  const src = props.src as ComponentOptions | undefined;
 
   /* Edge case */
   if (!src && !name) return "";

package/ui.image-icon/types.ts

@@ -1,6 +1,6 @@
 import defaultConfig from "./config";
 
-import type { DefineComponent, SVGAttributes } from "vue";
+import type { Component, SVGAttributes } from "vue";
 
 import type { ComponentConfig } from "../types";
 
@@ -17,7 +17,7 @@ export interface Props {
   /**
    * Icon source (svg as a vue component).
    */
-  src?: DefineComponent<SVGAttributes>;
+  src?: Component<SVGAttributes>;
 
   /**
    * Icon color.

package/ui.navigation-breadcrumbs/types.ts

@@ -1,13 +1,16 @@
 import defaultConfig from "./config";
-import type { ComponentConfig } from "../types";
+import type { ComponentConfig, UnknownObject } from "../types";
 import type { Props as ULinkProps } from "../ui.button-link/types";
 
 export type Config = typeof defaultConfig;
 
-export interface UBreadcrumb extends ULinkProps {
+export interface BaseBreadcrumb extends ULinkProps {
   icon?: string;
 }
 
+/* Any object shape is a valid breadcrumb, only reserved breadcrumb keys are type checked. */
+export type UBreadcrumb = BaseBreadcrumb & (object | UnknownObject);
+
 export interface Props {
   /**
    * Array of links.

package/ui.navigation-tabs/types.ts

@@ -8,12 +8,15 @@ export type SetUTabsSelectedItem = (
   value: string | number | boolean | UnknownArray | UnknownObject,
 ) => void;
 
-export interface UTabsOption {
+export interface BaseTabOption {
   value: string | number;
   label: string;
   disabled?: boolean;
 }
 
+/* Any object shape is a valid option, only reserved option keys are type checked. */
+export type UTabsOption = BaseTabOption & (object | UnknownObject);
+
 export interface Props {
   /**
    * Selected tab value.

package/ui.skeleton-text/constants.ts

@@ -2,4 +2,4 @@
   This const is needed to prevent the issue in script setup:
  `defineProps` is referencing locally declared variables. (vue/valid-define-props)
  */
-export const COMPONENT_NAME = "USkeletonInput";
+export const COMPONENT_NAME = "USkeletonText";

package/ui.text-badge/config.ts

@@ -2,7 +2,7 @@ export default /*tw*/ {
   badge: {
     base: `
       inline-flex items-center justify-between py-1
-      border border-solid rounded-medium leading-none! outline-solid outline-transparent
+      border border-solid rounded-medium leading-none! outline-solid outline-medium outline-transparent
     `,
     variants: {
       variant: {