@economic/taco 2.22.2 → 2.24.0

package/dist/components/Card/Card.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { MenuProps } from '../Menu/Menu';
+import './style.css';
 export declare type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {
     noPadding?: boolean;
 };

package/dist/components/Checkbox/Checkbox.d.ts

@@ -8,6 +8,8 @@ declare type CheckboxBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonEleme
     invalid?: boolean;
     /** Label for the checkbox */
     label?: React.ReactNode;
+    /** Displays loading state in checkbox */
+    loading?: boolean;
     required?: boolean;
 };
 interface UncontrolledCheckboxProps extends CheckboxBaseProps {

package/dist/components/OverflowGroup/OverflowGroup.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { ButtonProps } from '../Button/Button';
 export declare const OverflowGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
-    moreButton?: React.ReactElement<ButtonProps, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | undefined;
+    moreButton?: ((moreButtonText: string) => React.ReactElement<ButtonProps>) | undefined;
 } & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Provider/Localization.d.ts

@@ -360,6 +360,10 @@ export declare const defaultLocalisationTexts: {
         save: string;
         search: string;
         searchOrCreate: string;
+        selectAll: string;
+        selectAllResults: string;
+        deselectAll: string;
+        deselectAllResults: string;
     };
     toasts: {
         dismiss: string;

package/dist/components/Report/Report.d.ts

@@ -6,11 +6,13 @@ declare function Column<TType = unknown>(_: ReportColumnProps<TType>): null;
 declare function Group(_: ReportGroupProps): null;
 export declare const Report: (<TType = unknown>(props: (import("../../primitives/Table/types").useTableClientProps<TType> & {
     customSettings?: import("./types").ReportCustomSettingsRenderer | undefined;
+    emptyState?: import("./types").ReportEmptyStateRenderer | undefined;
     toolbarLeft?: JSX.Element | undefined;
     toolbarRight?: JSX.Element | undefined;
     toolbarPanel?: JSX.Element | undefined;
 } & React.RefAttributes<TableRef>) | (import("../../primitives/Table/types").useTableServerProps<TType> & {
     customSettings?: import("./types").ReportCustomSettingsRenderer | undefined;
+    emptyState?: import("./types").ReportEmptyStateRenderer | undefined;
     toolbarLeft?: JSX.Element | undefined;
     toolbarRight?: JSX.Element | undefined;
     toolbarPanel?: JSX.Element | undefined;

package/dist/components/Report/components/Body/Body.d.ts

@@ -2,7 +2,6 @@ import React from 'react';
 import { Table as ReactTable } from '@tanstack/react-table';
 declare type BodyProps<TType = unknown> = React.HTMLAttributes<HTMLTableSectionElement> & {
     enableArrowKeyFocusing?: boolean;
-    length: number;
     table: ReactTable<TType>;
 };
 export declare function Body<TType = unknown>(props: BodyProps<TType>): JSX.Element;

package/dist/components/Report/components/Body/EmptyStateBody.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ReportEmptyStateRenderer } from '../../types';
+declare type EmptyStateProps = React.HTMLAttributes<HTMLTableSectionElement> & {
+    emptyState?: ReportEmptyStateRenderer;
+};
+export declare function EmptyStateBody(props: EmptyStateProps): JSX.Element;
+export {};

package/dist/components/Report/components/Cell/util.d.ts

@@ -13,6 +13,6 @@ export declare function getCellAttributes<TType = unknown>(cell: ReactTableCell<
     className: string | undefined;
     style: {};
 };
-export declare function useSearchHighlighting<TType = unknown>(cell: ReactTableCell<TType, unknown>, index: number, ref: React.RefObject<HTMLTableCellElement>): true | "current" | undefined;
+export declare function useSearchHighlighting<TType = unknown>(cell: ReactTableCell<TType, unknown>, cellIndex: number, ref: React.RefObject<HTMLTableCellElement>): true | "current" | undefined;
 export declare function getCurrentRowCellElement(index: number, tableEl: HTMLElement): Element | null;
 export declare function scrollColumnIntoView(columnIndex: number, frozenColumnIndex: number, column: HTMLElement, tableEl: HTMLElement): void;

package/dist/components/Report/components/Footer/Summary.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import { Table as ReactTable } from '@tanstack/react-table';
 export declare type FooterSummaryProps<TType = unknown> = {
-    length: number;
     table: ReactTable<TType>;
 };
 export declare function Summary<TType = unknown>(props: FooterSummaryProps<TType>): JSX.Element;

package/dist/components/Report/components/Toolbar/components/Filters/components/Filter.d.ts

@@ -6,7 +6,7 @@ export declare type FilterProps<TType = unknown> = {
     filter: TableFilter;
     filters: TableFilter[];
     position: number;
-    onChange: (id: string, value: TableFilter) => void;
-    onRemove: (columnId: string) => void;
+    onChange: (position: number, value: TableFilter) => void;
+    onRemove?: (position: number) => void;
 };
 export declare function Filter<TType = unknown>(props: FilterProps<TType>): JSX.Element;

package/dist/components/Report/components/Toolbar/components/Filters/components/FilterColumn.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { Column as ReactTableColumn } from '@tanstack/react-table';
 import { Select2Props } from '../../../../../../Select2/Select2';
 import { TableFilter } from '../../../../../../../primitives/Table/types';
@@ -6,4 +6,7 @@ export declare type FilterColumnProps<TType = unknown> = Omit<Select2Props, 'chi
     allColumns: ReactTableColumn<TType, unknown>[];
     filters: TableFilter[];
 };
-export declare function FilterColumn<TType = unknown>(props: FilterColumnProps<TType>): JSX.Element;
+export declare const FilterColumn: React.ForwardRefExoticComponent<Pick<Select2Props, "defaultValue" | "onChange" | "value" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "emptyValue" | "disabled" | "highlighted" | "invalid" | "multiple" | "name" | "onCreate" | "onDelete" | "onEdit" | "readOnly" | "required" | "tags" | "fontSize"> & {
+    allColumns: ReactTableColumn<unknown, unknown>[];
+    filters: TableFilter[];
+} & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Report/types.d.ts

@@ -2,8 +2,10 @@
 import { TableColumnProps, TableGroupProps, TableSettings, useTableProps } from '../../primitives/Table/types';
 import { MenuItemProps } from '../Menu/components/Item';
 export type { TableFilterComparator, TableFilterValue, TableFilter, TableColumnAlignment, TableColumnClassNameHandler, TableColumnDataType, TableColumnFilter, TableColumnMenu, TableColumnRenderer, TableColumnRendererAggregate, TableColumnRendererControl, TableColumnRendererControlProps, TableColumnRendererHeader, TableColumnRendererFooter, TableColumnSort, TableColumnSortDirection, TableColumnSortFn, TableColumnWidth, TableRowActionRenderer, TableRowActionGroupRenderer, TableRowClickHandler, TableRowGotoHandler, TableRowHeight, TableRowSelectHandler, TableShortcutHandlerFn, TableShortcutHandlerObject, TableFilterHandler, TableFontSize, TablePreset, TableRowExpansionRenderer, TableScrollToIndexHandler, TableServerLoadPageHandler, TableServerLoadAllHandler, TableServerLoadAllState, TableSettingsHandler, TableShortcuts, TableSortHandler, TableSettings, TableFeatureProps, } from '../../primitives/Table/types';
+export declare type ReportEmptyStateRenderer = () => JSX.Element | null;
 export declare type ReportProps<TType = unknown> = useTableProps<TType> & {
     customSettings?: ReportCustomSettingsRenderer;
+    emptyState?: ReportEmptyStateRenderer;
     toolbarLeft?: JSX.Element;
     toolbarRight?: JSX.Element;
     toolbarPanel?: JSX.Element;

package/dist/components/Report/useReport.d.ts

@@ -2,8 +2,8 @@ import React from 'react';
 import { ReportProps } from './types';
 import { TableRef } from '../../primitives/Table/types';
 export declare function useReport<TType>(props: ReportProps<TType>, ref: React.RefObject<TableRef>): {
+    id: string;
     instance: import("@tanstack/table-core").Table<TType>;
-    length: number;
     meta: import("@tanstack/table-core").TableMeta<TType>;
     state: import("@tanstack/table-core").TableState;
 };

package/dist/components/Select2/Select2.d.ts

@@ -14,6 +14,10 @@ declare type Select2Texts = {
     save: string;
     search: string;
     searchOrCreate: string;
+    selectAll: string;
+    selectAllResults: string;
+    deselectAll: string;
+    deselectAllResults: string;
 };
 declare type Select2Props = Omit<React.HTMLAttributes<HTMLButtonElement>, 'children' | 'defaultValue' | 'onChange' | 'value'> & {
     autoFocus?: boolean;

package/dist/components/Select2/components/Trigger.d.ts

@@ -4,4 +4,5 @@ export declare const Trigger: React.ForwardRefExoticComponent<Pick<React.HTMLAtt
     emptyValue?: string | number | boolean | null | undefined;
     placeholder?: string | undefined;
     children: React.ReactElement<Select2OptionProps>[];
+    fontSize?: "small" | "medium" | "large" | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Select2/hooks/useChildren.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Select2OptionProps } from '../components/Option';
 import { Select2Children, Select2OptionValue, Select2Value } from '../types';
+export declare const isGroup: (child: React.ReactElement) => boolean;
 export declare type useChildrenArgs = {
     children: Select2Children;
     emptyValue?: Select2OptionValue;

package/dist/components/Table3/components/toolbar/Filter/filters/components/Filter.d.ts

@@ -6,7 +6,7 @@ export declare type FilterProps<TType = unknown> = {
     filter: Table3Filter;
     filters: Table3Filter[];
     position: number;
-    onChange: (id: string | null, value: Table3Filter) => void;
-    onRemove: (columnId: string | null) => void;
+    onChange: (position: number, value: Table3Filter) => void;
+    onRemove?: (position: number) => void;
 };
 export declare function Filter<TType = unknown>(props: FilterProps<TType>): JSX.Element;

package/dist/components/Table3/components/toolbar/Filter/filters/components/FilterColumn.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { Column as RTColumn } from '@tanstack/react-table';
 import { Select2Props } from '../../../../../../Select2/Select2';
 import { Table3Filter } from '../../../../../types';
@@ -6,4 +6,7 @@ export declare type FilterColumnProps<TType = unknown> = Omit<Select2Props, 'chi
     allColumns: RTColumn<TType, unknown>[];
     filters: Table3Filter[];
 };
-export declare function FilterColumn<TType = unknown>(props: FilterColumnProps<TType>): JSX.Element;
+export declare const FilterColumn: React.ForwardRefExoticComponent<Pick<Select2Props, "defaultValue" | "onChange" | "value" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "emptyValue" | "disabled" | "highlighted" | "invalid" | "multiple" | "name" | "onCreate" | "onDelete" | "onEdit" | "readOnly" | "required" | "tags" | "fontSize"> & {
+    allColumns: RTColumn<unknown, unknown>[];
+    filters: Table3Filter[];
+} & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Truncate/Truncate.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export declare type TruncateProps = {
-    tooltip: string;
     children: React.ReactElement;
+    tooltip: string;
 };
-export declare const Truncate: ({ tooltip, children }: TruncateProps) => JSX.Element;
+export declare const Truncate: ({ children, tooltip }: TruncateProps) => JSX.Element;

package/dist/esm/index.css

@@ -282,51 +282,9 @@
     @apply font-semibold;
 }
 
-[data-taco='scrollable-list'].yt-list--multiselect li:first-child {
-    @apply border-grey-100 border-b-2 pl-4; /* Listbox max-height is dependant on this border-bottom-width value! */
-}
-
-[data-taco='scrollable-list'] li > [data-taco='icon'] {
-    @apply mr-2;
-}
-
-[data-taco='scrollable-list']:not([readonly]) li:not([disabled]):hover {
-    @apply wcag-grey-200;
-}
-
-[data-taco='scrollable-list']:not([readonly]) li:not([disabled]):hover [data-taco='icon'] {
-    @apply wcag-grey-200;
-}
-
-[data-taco='scrollable-list'] li:focus,
-[data-taco='scrollable-list']:not(.yt-list--multiselect) li[aria-selected='true'],
-[data-taco='scrollable-list'] li[data-focused='true'] {
-    @apply wcag-blue-500;
-}
-
-[data-taco='scrollable-list'] li:focus [data-taco='icon'],
-[data-taco='scrollable-list']:not(.yt-list--multiselect) li[aria-selected='true'] [data-taco='icon'],
-[data-taco='scrollable-list'] li[data-focused='true'] [data-taco='icon'] {
-    @apply wcag-blue-500;
-}
-
-[data-taco='scrollable-list'][readonly] li {
-    @apply cursor-not-allowed;
-}
-
-[data-taco='scrollable-list'] li[disabled],
-[data-taco='scrollable-list'][disabled] li[aria-selected='true'] {
-    @apply cursor-not-allowed text-black text-opacity-25;
-}
-
-[data-taco='scrollable-list'] li.yt-list__empty,
-[data-taco='scrollable-list'] li.yt-list__empty:hover,
-[data-taco='scrollable-list'] li.yt-list__empty:focus {
-    @apply text-grey-700 flex w-full items-center overflow-hidden bg-white px-3 italic;
-}
-
-[data-taco='scrollable-list'] li.yt-list__empty [data-taco='spinner'] {
-    @apply mr-2 mt-2 h-5 w-5 opacity-75;
+[data-taco='card'] [data-taco='report'],
+[data-taco='card'] [data-taco='table2'] {
+    @apply !border-0;
 }
 
 [data-taco='spinner'] svg circle {
@@ -404,6 +362,53 @@
     stroke: currentColor;
 }
 
+[data-taco='scrollable-list'].yt-list--multiselect li:first-child {
+    @apply border-grey-100 border-b-2 pl-4; /* Listbox max-height is dependant on this border-bottom-width value! */
+}
+
+[data-taco='scrollable-list'] li > [data-taco='icon'] {
+    @apply mr-2;
+}
+
+[data-taco='scrollable-list']:not([readonly]) li:not([disabled]):hover {
+    @apply wcag-grey-200;
+}
+
+[data-taco='scrollable-list']:not([readonly]) li:not([disabled]):hover [data-taco='icon'] {
+    @apply wcag-grey-200;
+}
+
+[data-taco='scrollable-list'] li:focus,
+[data-taco='scrollable-list']:not(.yt-list--multiselect) li[aria-selected='true'],
+[data-taco='scrollable-list'] li[data-focused='true'] {
+    @apply wcag-blue-500;
+}
+
+[data-taco='scrollable-list'] li:focus [data-taco='icon'],
+[data-taco='scrollable-list']:not(.yt-list--multiselect) li[aria-selected='true'] [data-taco='icon'],
+[data-taco='scrollable-list'] li[data-focused='true'] [data-taco='icon'] {
+    @apply wcag-blue-500;
+}
+
+[data-taco='scrollable-list'][readonly] li {
+    @apply cursor-not-allowed;
+}
+
+[data-taco='scrollable-list'] li[disabled],
+[data-taco='scrollable-list'][disabled] li[aria-selected='true'] {
+    @apply cursor-not-allowed text-black text-opacity-25;
+}
+
+[data-taco='scrollable-list'] li.yt-list__empty,
+[data-taco='scrollable-list'] li.yt-list__empty:hover,
+[data-taco='scrollable-list'] li.yt-list__empty:focus {
+    @apply text-grey-700 flex w-full items-center overflow-hidden bg-white px-3 italic;
+}
+
+[data-taco='scrollable-list'] li.yt-list__empty [data-taco='spinner'] {
+    @apply mr-2 mt-2 h-5 w-5 opacity-75;
+}
+
 [data-taco='combobox'] > [aria-expanded='true'] + [role='dialog'] > ul,
 [data-taco='combobox'] > [aria-expanded='true'] + [role='dialog'] > ul:hover {
     @apply border-blue-500;
@@ -574,9 +579,13 @@ table[data-taco='report'] tfoot {
     /* z-indexes & layout */
     @apply sticky bottom-0 isolate z-20;
     /* grid */
-    @apply col-span-full grid auto-rows-min grid-cols-[subgrid];
+    @apply col-span-full grid grid-cols-[subgrid] grid-rows-[calc(theme(spacing.10)_+_2px)];
 }
 
+table[data-taco='report'] tfoot > tr {
+        @apply grid-rows-[calc(theme(spacing.10)_+_2px)];
+    }
+
 table[data-taco='report'] tbody {
     /* z-indexes & layout */
     @apply isolate z-10;
@@ -903,88 +912,80 @@ table[data-taco='report'][data-table-font-size='large']
 }
 
 /* row/cell backgrounds -- we have to be specific so that nested tables don't inherit */
-
 /* normal rows */
-table[data-taco='report'] > tbody > tr:not([data-row-selected='true']) > td {
-        @apply bg-white;
-    }
+table[data-taco='report'] > tbody > tr:not([data-row-selected]) > td {
+            @apply bg-white;
+        }
+table[data-taco='report'] > tbody > tr:not([data-row-selected]):hover > td,
+        table[data-taco='report'] > tbody > tr:not([data-row-selected])[data-row-active] > td,
+        table[data-taco='report'] > tbody > tr:not([data-row-selected])[data-row-group] > td {
+            --table-row-actions-shadow: theme(colors.grey.100);
+            @apply bg-grey-100;
+        }
 /* search highlighting */
-table[data-taco='report'] > tbody > tr:not([data-row-selected='true']) > td[data-cell-highlighted='true'] {
-            @apply bg-[#e9f2ff];
+table[data-taco='report'] > tbody > tr:not([data-row-selected]) > td[data-cell-highlighted='true'] {
+            --table-row-actions-shadow: #e9f2ff;
+            @apply !bg-[#e9f2ff];
         }
-table[data-taco='report'] > tbody > tr:not([data-row-selected='true']) > td[data-cell-highlighted='current'] {
-            @apply !bg-[#bfd9ff];
+table[data-taco='report'] > tbody > tr:not([data-row-selected]) > td[data-cell-highlighted='current'] {
+            --table-row-actions-shadow: #bdd7fc;
+            @apply !bg-[#bdd7fc];
+        }
+/* selected rows */
+table[data-taco='report'] > tbody > tr[data-row-selected] > td {
+            @apply bg-blue-100;
+        }
+table[data-taco='report'] > tbody > tr[data-row-selected]:hover > td,
+        table[data-taco='report'] > tbody > tr[data-row-selected][data-row-active] > td,
+        table[data-taco='report'] > tbody > tr[data-row-selected][data-row-group] > td {
+            --table-row-actions-shadow: #d6e3f6;
+            @apply bg-[#d6e3f6];
         }
-table[data-taco='report'] > tbody > tr:not([data-row-selected='true'])[data-row-group] > td {
-        @apply bg-grey-100;
-    }
-table[data-taco='report'] > tbody > tr:not([data-row-selected='true']):hover > td,
-    table[data-taco='report'] > tbody > tr:not([data-row-selected='true'])[data-row-active='true'] > td,
-    table[data-taco='report'] > tbody > tr:not([data-row-selected='true'])[data-row-active='true']:hover > td {
-        --table-row-actions-shadow: theme(colors.grey.100);
-        @apply bg-grey-100;
-    }
 /* search highlighting */
-table[data-taco='report'] > tbody > tr:not([data-row-selected='true']):hover > td[data-cell-highlighted='true'], table[data-taco='report'] > tbody > tr:not([data-row-selected='true'])[data-row-active='true'] > td[data-cell-highlighted='true'], table[data-taco='report'] > tbody > tr:not([data-row-selected='true'])[data-row-active='true']:hover > td[data-cell-highlighted='true'] {
-            @apply bg-[#e2ebf8];
+table[data-taco='report'] > tbody > tr[data-row-selected] > td[data-cell-highlighted] {
+            --table-row-actions-shadow: #b4d2fd;
+            @apply !bg-[#b4d2fd];
         }
-/* normal rows when focus is inside the table */
-table[data-taco='report']:focus-within > tbody > tr[data-row-active='true']:not([data-row-selected='true']) > td {
-    --table-row-actions-shadow: theme(colors.grey.200);
-    @apply !bg-grey-200;
-}
 
-/* normal rows when hover is paused */
-table[data-taco='report'][data-table-pause-hover='true'] > tbody > tr:not([data-row-selected='true']):hover:not([data-row-active='true']) > td {
-        --table-row-actions-shadow: theme(colors.white);
-        @apply !bg-white;
-    }
-table[data-taco='report'][data-table-pause-hover='true'] > tbody > tr:not([data-row-selected='true']):hover[data-row-active='true'] > td {
-        --table-row-actions-shadow: theme(colors.grey.200);
-        @apply !bg-grey-200;
-    }
+/* normal rows */
+
+table[data-taco='report']:focus-within > tbody > tr:not([data-row-selected])[data-row-active] > td {
+            --table-row-actions-shadow: theme(colors.grey.200);
+            @apply bg-grey-200;
+        }
 
 /* selected rows */
-table[data-taco='report'] > tbody > tr[data-row-selected='true'] > td {
-        @apply bg-blue-100;
-    }
-/* search highlighting */
-table[data-taco='report'] > tbody > tr[data-row-selected='true'] > td[data-cell-highlighted='true'] {
-            @apply bg-[#d0e4ff];
+
+table[data-taco='report']:focus-within > tbody > tr[data-row-selected][data-row-active] > td {
+            --table-row-actions-shadow: #ccd8eb;
+            @apply bg-[#ccd8eb];
         }
-table[data-taco='report'] > tbody > tr[data-row-selected='true'] > td[data-cell-highlighted='current'] {
-            @apply !bg-[#b6d4ff];
+
+/* normal rows */
+
+table[data-taco='report'][data-table-pause-hover='true'] > tbody > tr:hover:not([data-row-selected]):not([data-row-active]) > td {
+            --table-row-actions-shadow: theme(colors.white);
+            @apply bg-white;
         }
-table[data-taco='report'] > tbody > tr[data-row-selected='true']:hover > td,
-    table[data-taco='report'] > tbody > tr[data-row-selected='true'][data-row-active='true'] > td,
-    table[data-taco='report'] > tbody > tr[data-row-selected='true'][data-row-active='true']:hover > td {
-        --table-row-actions-shadow: #d6e3f6;
-        @apply bg-[#D6E3F6];
-    }
-/* search highlighting */
-table[data-taco='report'] > tbody > tr[data-row-selected='true']:hover > td[data-cell-highlighted='true'], table[data-taco='report'] > tbody > tr[data-row-selected='true'][data-row-active='true'] > td[data-cell-highlighted='true'], table[data-taco='report'] > tbody > tr[data-row-selected='true'][data-row-active='true']:hover > td[data-cell-highlighted='true'] {
-            @apply bg-[#cadef9];
+
+table[data-taco='report'][data-table-pause-hover='true'] > tbody > tr:hover:not([data-row-selected])[data-row-active] > td {
+            --table-row-actions-shadow: theme(colors.grey.200);
+            @apply bg-grey-200;
         }
-table[data-taco='report'] > tbody > tr[data-row-selected='true']:hover > td[data-cell-highlighted='current'], table[data-taco='report'] > tbody > tr[data-row-selected='true'][data-row-active='true'] > td[data-cell-highlighted='current'], table[data-taco='report'] > tbody > tr[data-row-selected='true'][data-row-active='true']:hover > td[data-cell-highlighted='current'] {
-            @apply !bg-[#b4d2fd];
+
+/* selected rows */
+
+table[data-taco='report'][data-table-pause-hover='true'] > tbody > tr:hover[data-row-selected]:not([data-row-active]) > td {
+            --table-row-actions-shadow: theme(colors.blue.100);
+            @apply bg-blue-100;
         }
-/* selected rows when focus is inside the table */
-table[data-taco='report']:focus-within > tbody > tr[data-row-active='true'][data-row-selected='true'] > td {
-    --table-row-actions-shadow: #ccd8eb;
-    @apply bg-[#CCD8EB];
-}
-/* selected rows when hover is paused */
-table[data-taco='report'][data-table-pause-hover='true'] > tbody > tr[data-row-selected='true']:hover:not([data-row-active='true']) > td {
-        --table-row-actions-shadow: theme(colors.blue.100);
-        @apply !bg-blue-100;
-    }
-table[data-taco='report'][data-table-pause-hover='true'] > tbody > tr[data-row-selected='true']:hover[data-row-active='true'] > td {
-        --table-row-actions-shadow: #ccd8eb;
-        @apply !bg-[#CCD8EB];
-    }
 
-/* row metadata */
+table[data-taco='report'][data-table-pause-hover='true'] > tbody > tr:hover[data-row-selected][data-row-active] > td {
+            --table-row-actions-shadow: #ccd8eb;
+            @apply bg-[#CCD8EB];
+        }
 
+/* row metadata */
 table[data-taco='report'] tbody tr[data-row-meta-layout='heading']:not([data-row-group='true']) td {
     @apply !border-b-0 border-t font-bold;
 }
@@ -1335,7 +1336,7 @@ table[data-taco='report'] [data-cell-id^='__'] {
 }
 
 [data-font-size='small'] [role='cell'] [data-taco='tag'] {
-    @apply !-my-1;
+    @apply h-4 min-h-[theme(spacing.4)];
 }
 
 [data-font-size='small'] [role='cell'] [data-taco='Select2'],
@@ -1391,7 +1392,7 @@ table[data-taco='report'] [data-cell-id^='__'] {
     }
 
 /* When cell is editable and highlighted, the padding should apply to highlight wrapper and remove 1px border-width,
-       because it should take all the available space in the cell */
+   because it should take all the available space in the cell */
 
 [data-font-size='small'] [role='cell'][data-editable][data-highlighted='true'] [data-taco='highlight'] {
         @apply px-[calc(var(--table3-cell-padding-x)_-_6px_-_1px)];
@@ -1414,8 +1415,8 @@ table[data-taco='report'] [data-cell-id^='__'] {
     @apply !-my-0.5;
 }
 
-[data-font-size='medium'] [role='cell'] [data-taco='tag'] {
-    @apply !-my-0.5;
+[data-font-size='medium'] [role='cell'] [data-taco='Select2'] {
+    @apply !px-2;
 }
 
 [data-font-size='medium'] [role='cell'] [data-taco='Select2'],
@@ -1430,7 +1431,7 @@ table[data-taco='report'] [data-cell-id^='__'] {
     }
 
 /* When cell is editable and highlighted, the padding should apply to highlight wrapper and remove 1px border-width,
-       because it should take all the available space in the cell */
+   because it should take all the available space in the cell */
 
 [data-font-size='medium'] [role='cell'][data-editable][data-highlighted='true'] [data-taco='highlight'] {
         @apply px-[calc(var(--table3-cell-padding-x)_-_8px_-_1px)];
@@ -1460,8 +1461,8 @@ table[data-taco='report'] [data-cell-id^='__'] {
     @apply !-my-0.5;
 }
 
-[data-font-size='large'] [role='cell'] [data-taco='tag'] {
-    @apply !-my-0.5;
+[data-font-size='large'] [role='cell'] [data-taco='Select2'] {
+    @apply !px-2.5;
 }
 
 [data-font-size='large'] [role='cell'] [data-taco='Select2'],
@@ -1502,7 +1503,7 @@ table[data-taco='report'] [data-cell-id^='__'] {
     }
 
 /* When cell is editable and highlighted, the padding should apply to highlight wrapper and remove 1px border-width,
-       because it should take all the available space in the cell */
+   because it should take all the available space in the cell */
 
 [data-font-size='large'] [role='cell'][data-editable][data-highlighted='true'] [data-taco='highlight'] {
         @apply px-[calc(var(--table3-cell-padding-x)_-_10px_-_1px)];
@@ -1520,3 +1521,9 @@ table[data-taco='report'] [data-cell-id^='__'] {
 [data-font-size='large'] [role='columnheader'] button {
     @apply !text-sm;
 }
+
+/* When spinner is rendered in the last cell of the table, it slightly pushes the edge of the table(while rotating),
+   and making horisontal scroll bar jump */
+[data-editing='true'] [role='cell']:last-child [data-taco='spinner'] {
+    overflow: hidden;
+}

package/dist/esm/packages/taco/src/components/Button/util.js

@@ -3,29 +3,29 @@ import { Button } from '../../primitives/Button.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 
 const getButtonClasses = () => {
-  return 'flex-shrink-0 min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center focus-visible:yt-focus disabled:cursor-not-allowed';
+  return 'flex-shrink-0 min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center focus-visible:yt-focus aria-disabled:cursor-not-allowed';
 };
 const getAppearanceClasses = (value, icon = false) => {
   switch (value) {
     case 'primary':
-      return `wcag-blue-500 enabled:hover:wcag-blue-700 enabled:hover:active:wcag-blue-500 disabled:bg-blue-500/50`;
+      return `wcag-blue-500 visited:wcag-blue-500 hover:wcag-blue-700 hover:active:wcag-blue-500 aria-disabled:bg-blue-500/50 aria-disabled:active:bg-blue-500/50`;
     case 'danger':
-      return `wcag-red-500 enabled:hover:wcag-red-700 enabled:hover:active:wcag-red-500 disabled:bg-red-500/50`;
+      return `wcag-red-500 visited:wcag-red-500 hover:wcag-red-700 hover:active:wcag-red-500 aria-disabled:bg-red-500/50 aria-disabled:active:bg-red-500/50`;
     case 'ghost':
-      return `bg-white border border-blue-500 text-blue-500 enabled:hover:bg-blue-100 enabled:hover:text-blue-700 disabled:border-blue-500/50 disabled:text-blue-500/50`;
+      return `bg-white border border-blue-500 text-blue-500 visited:text-blue-500 hover:bg-blue-100 hover:text-blue-700 aria-disabled:border-blue-500/50 aria-disabled:text-blue-500/50 aria-disabled:bg-white`;
     case 'discrete':
       {
         if (icon) {
-          return `bg-transparent text-black enabled:hover:bg-[#000]/[0.08] disabled:text-black/30`;
+          return `bg-transparent text-black visited:text-black hover:bg-[#000]/[0.08] aria-disabled:text-black/30`;
         }
-        return `bg-transparent text-blue-500 enabled:hover:text-blue-700 disabled:text-blue-500/50`;
+        return `bg-transparent text-blue-500 visited:text-blue-500 hover:text-blue-700 aria-disabled:text-blue-500/50`;
       }
     case 'transparent':
       {
-        return `bg-transparent text-black enabled:hover:text-black enabled:hover:bg-[#000]/[0.08] disabled:text-black/30`;
+        return `bg-transparent text-black visited:text-black hover:text-black hover:bg-[#000]/[0.08] aria-disabled:text-black/30 aria-disabled:bg-transparent`;
       }
     default:
-      return `wcag-grey-200 enabled:hover:wcag-grey-300 disabled:bg-grey-200/50 disabled:text-black/30`;
+      return `wcag-grey-200 visited:wcag-grey-200 hover:wcag-grey-300 aria-disabled:bg-grey-200/50 aria-disabled:text-black/30`;
   }
 };
 const createButtonWithTooltip = (props, className, ref) => {