@economic/taco 2.23.0 → 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/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/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/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/useReport.d.ts

@@ -4,7 +4,6 @@ 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/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/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;

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) => {

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

@@ -1 +1 @@
-{"version":3,"file":"util.js","sources":["../../../../../../../src/components/Button/util.tsx"],"sourcesContent":["import React from 'react';\nimport { Appearance } from '../../types';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\nexport const getButtonClasses = () => {\n    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';\n};\n\nexport const getAppearanceClasses = (value: Appearance | undefined, icon = false): string => {\n    switch (value) {\n        case 'primary':\n            return `wcag-blue-500 enabled:hover:wcag-blue-700 enabled:hover:active:wcag-blue-500 disabled:bg-blue-500/50`;\n\n        case 'danger':\n            return `wcag-red-500 enabled:hover:wcag-red-700 enabled:hover:active:wcag-red-500 disabled:bg-red-500/50`;\n\n        case 'ghost':\n            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`;\n\n        case 'discrete': {\n            if (icon) {\n                return `bg-transparent text-black enabled:hover:bg-[#000]/[0.08] disabled:text-black/30`;\n            }\n\n            return `bg-transparent text-blue-500 enabled:hover:text-blue-700 disabled:text-blue-500/50`;\n        }\n\n        case 'transparent': {\n            return `bg-transparent text-black enabled:hover:text-black enabled:hover:bg-[#000]/[0.08] disabled:text-black/30`;\n        }\n\n        default:\n            return `wcag-grey-200 enabled:hover:wcag-grey-300 disabled:bg-grey-200/50 disabled:text-black/30`;\n    }\n};\n\nexport const createButtonWithTooltip = (\n    props: any,\n    className: string,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n): JSX.Element => {\n    const { tooltip, ...buttonProps } = props;\n    const button = <ButtonPrimitive.Button {...buttonProps} className={className} ref={ref} />;\n\n    if (tooltip) {\n        return <Tooltip title={tooltip}>{button}</Tooltip>;\n    }\n\n    return button;\n};\n\nexport const createButtonWithOverlays = (props: any, buttonBase: JSX.Element) => {\n    const { dialog, drawer, hanger, menu, popover } = props;\n    let button = buttonBase;\n\n    if (typeof dialog === 'function') {\n        button = dialog({ trigger: button });\n    } else if (typeof drawer === 'function') {\n        button = drawer({ trigger: button });\n    } else if (typeof menu === 'function') {\n        button = menu({ trigger: button });\n    } else if (typeof popover === 'function') {\n        button = popover({ trigger: button });\n    }\n\n    if (typeof hanger === 'function') {\n        button = hanger({ anchor: button });\n    }\n\n    return button;\n};\n"],"names":["getButtonClasses","getAppearanceClasses","value","icon","createButtonWithTooltip","props","className","ref","tooltip","buttonProps","button","React","ButtonPrimitive","Tooltip","title","createButtonWithOverlays","buttonBase","dialog","drawer","hanger","menu","popover","trigger","anchor"],"mappings":";;;;MAKaA,gBAAgB,GAAGA;EAC5B,OAAO,kLAAkL;AAC7L;MAEaC,oBAAoB,GAAGA,CAACC,KAA6B,EAAEC,IAAI,GAAG,KAAK;EAC5E,QAAQD,KAAK;IACT,KAAK,SAAS;MACV,6GAA6G;IAEjH,KAAK,QAAQ;MACT,yGAAyG;IAE7G,KAAK,OAAO;MACR,kKAAkK;IAEtK,KAAK,UAAU;MAAE;QACb,IAAIC,IAAI,EAAE;UACN,wFAAwF;;QAG5F,2FAA2F;;IAG/F,KAAK,aAAa;MAAE;QAChB,iHAAiH;;IAGrH;MACI,iGAAiG;;AAE7G;MAEaC,uBAAuB,GAAGA,CACnCC,KAAU,EACVC,SAAiB,EACjBC,GAAqD;EAErD,MAAM;IAAEC,OAAO;IAAE,GAAGC;GAAa,GAAGJ,KAAK;EACzC,MAAMK,MAAM,gBAAGC,6BAACC,MAAsB,oBAAKH,WAAW;IAAEH,SAAS,EAAEA,SAAS;IAAEC,GAAG,EAAEA;KAAO;EAE1F,IAAIC,OAAO,EAAE;IACT,oBAAOG,6BAACE,OAAO;MAACC,KAAK,EAAEN;OAAUE,MAAM,CAAW;;EAGtD,OAAOA,MAAM;AACjB;MAEaK,wBAAwB,GAAGA,CAACV,KAAU,EAAEW,UAAuB;EACxE,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,IAAI;IAAEC;GAAS,GAAGhB,KAAK;EACvD,IAAIK,MAAM,GAAGM,UAAU;EAEvB,IAAI,OAAOC,MAAM,KAAK,UAAU,EAAE;IAC9BP,MAAM,GAAGO,MAAM,CAAC;MAAEK,OAAO,EAAEZ;KAAQ,CAAC;GACvC,MAAM,IAAI,OAAOQ,MAAM,KAAK,UAAU,EAAE;IACrCR,MAAM,GAAGQ,MAAM,CAAC;MAAEI,OAAO,EAAEZ;KAAQ,CAAC;GACvC,MAAM,IAAI,OAAOU,IAAI,KAAK,UAAU,EAAE;IACnCV,MAAM,GAAGU,IAAI,CAAC;MAAEE,OAAO,EAAEZ;KAAQ,CAAC;GACrC,MAAM,IAAI,OAAOW,OAAO,KAAK,UAAU,EAAE;IACtCX,MAAM,GAAGW,OAAO,CAAC;MAAEC,OAAO,EAAEZ;KAAQ,CAAC;;EAGzC,IAAI,OAAOS,MAAM,KAAK,UAAU,EAAE;IAC9BT,MAAM,GAAGS,MAAM,CAAC;MAAEI,MAAM,EAAEb;KAAQ,CAAC;;EAGvC,OAAOA,MAAM;AACjB;;;;"}
+{"version":3,"file":"util.js","sources":["../../../../../../../src/components/Button/util.tsx"],"sourcesContent":["import React from 'react';\nimport { Appearance } from '../../types';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\nexport const getButtonClasses = () => {\n    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';\n};\n\nexport const getAppearanceClasses = (value: Appearance | undefined, icon = false): string => {\n    switch (value) {\n        case 'primary':\n            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`;\n\n        case 'danger':\n            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`;\n\n        case 'ghost':\n            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`;\n\n        case 'discrete': {\n            if (icon) {\n                return `bg-transparent text-black visited:text-black hover:bg-[#000]/[0.08] aria-disabled:text-black/30`;\n            }\n\n            return `bg-transparent text-blue-500 visited:text-blue-500 hover:text-blue-700 aria-disabled:text-blue-500/50`;\n        }\n\n        case 'transparent': {\n            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`;\n        }\n\n        default:\n            return `wcag-grey-200 visited:wcag-grey-200 hover:wcag-grey-300 aria-disabled:bg-grey-200/50 aria-disabled:text-black/30`;\n    }\n};\n\nexport const createButtonWithTooltip = (\n    props: any,\n    className: string,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n): JSX.Element => {\n    const { tooltip, ...buttonProps } = props;\n    const button = <ButtonPrimitive.Button {...buttonProps} className={className} ref={ref} />;\n\n    if (tooltip) {\n        return <Tooltip title={tooltip}>{button}</Tooltip>;\n    }\n\n    return button;\n};\n\nexport const createButtonWithOverlays = (props: any, buttonBase: JSX.Element) => {\n    const { dialog, drawer, hanger, menu, popover } = props;\n    let button = buttonBase;\n\n    if (typeof dialog === 'function') {\n        button = dialog({ trigger: button });\n    } else if (typeof drawer === 'function') {\n        button = drawer({ trigger: button });\n    } else if (typeof menu === 'function') {\n        button = menu({ trigger: button });\n    } else if (typeof popover === 'function') {\n        button = popover({ trigger: button });\n    }\n\n    if (typeof hanger === 'function') {\n        button = hanger({ anchor: button });\n    }\n\n    return button;\n};\n"],"names":["getButtonClasses","getAppearanceClasses","value","icon","createButtonWithTooltip","props","className","ref","tooltip","buttonProps","button","React","ButtonPrimitive","Tooltip","title","createButtonWithOverlays","buttonBase","dialog","drawer","hanger","menu","popover","trigger","anchor"],"mappings":";;;;MAKaA,gBAAgB,GAAGA;EAC5B,OAAO,uLAAuL;AAClM;MAEaC,oBAAoB,GAAGA,CAACC,KAA6B,EAAEC,IAAI,GAAG,KAAK;EAC5E,QAAQD,KAAK;IACT,KAAK,SAAS;MACV,4JAA4J;IAEhK,KAAK,QAAQ;MACT,sJAAsJ;IAE1J,KAAK,OAAO;MACR,yMAAyM;IAE7M,KAAK,UAAU;MAAE;QACb,IAAIC,IAAI,EAAE;UACN,wGAAwG;;QAG5G,8GAA8G;;IAGlH,KAAK,aAAa;MAAE;QAChB,sJAAsJ;;IAG1J;MACI,yHAAyH;;AAErI;MAEaC,uBAAuB,GAAGA,CACnCC,KAAU,EACVC,SAAiB,EACjBC,GAAqD;EAErD,MAAM;IAAEC,OAAO;IAAE,GAAGC;GAAa,GAAGJ,KAAK;EACzC,MAAMK,MAAM,gBAAGC,6BAACC,MAAsB,oBAAKH,WAAW;IAAEH,SAAS,EAAEA,SAAS;IAAEC,GAAG,EAAEA;KAAO;EAE1F,IAAIC,OAAO,EAAE;IACT,oBAAOG,6BAACE,OAAO;MAACC,KAAK,EAAEN;OAAUE,MAAM,CAAW;;EAGtD,OAAOA,MAAM;AACjB;MAEaK,wBAAwB,GAAGA,CAACV,KAAU,EAAEW,UAAuB;EACxE,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,IAAI;IAAEC;GAAS,GAAGhB,KAAK;EACvD,IAAIK,MAAM,GAAGM,UAAU;EAEvB,IAAI,OAAOC,MAAM,KAAK,UAAU,EAAE;IAC9BP,MAAM,GAAGO,MAAM,CAAC;MAAEK,OAAO,EAAEZ;KAAQ,CAAC;GACvC,MAAM,IAAI,OAAOQ,MAAM,KAAK,UAAU,EAAE;IACrCR,MAAM,GAAGQ,MAAM,CAAC;MAAEI,OAAO,EAAEZ;KAAQ,CAAC;GACvC,MAAM,IAAI,OAAOU,IAAI,KAAK,UAAU,EAAE;IACnCV,MAAM,GAAGU,IAAI,CAAC;MAAEE,OAAO,EAAEZ;KAAQ,CAAC;GACrC,MAAM,IAAI,OAAOW,OAAO,KAAK,UAAU,EAAE;IACtCX,MAAM,GAAGW,OAAO,CAAC;MAAEC,OAAO,EAAEZ;KAAQ,CAAC;;EAGzC,IAAI,OAAOS,MAAM,KAAK,UAAU,EAAE;IAC9BT,MAAM,GAAGS,MAAM,CAAC;MAAEI,MAAM,EAAEb;KAAQ,CAAC;;EAGvC,OAAOA,MAAM;AACjB;;;;"}

package/dist/esm/packages/taco/src/components/Card/Card.js

@@ -13,6 +13,7 @@ const Content = /*#__PURE__*/forwardRef(function CardContent(externalProps, ref)
   }, props.className);
   return /*#__PURE__*/createElement("div", Object.assign({}, props, {
     className: className,
+    "data-taco": "card-content",
     ref: ref
   }));
 });
@@ -22,7 +23,7 @@ const Card = /*#__PURE__*/forwardRef(function Card(props, ref) {
     menu,
     children
   } = props;
-  const className = cn('bg-white flex flex-col rounded-xl border border-solid border-radius-[12px] border-grey-300 hover:border-grey-500 [&_[data-taco="table2"]]:!border-0', props.className);
+  const className = cn('bg-white flex flex-col rounded-xl border border-solid border-radius-[12px] border-grey-300 hover:border-grey-500', props.className);
   return /*#__PURE__*/createElement("div", {
     className: className,
     "data-taco": "card",

package/dist/esm/packages/taco/src/components/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../../../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\n\nimport { MenuProps } from '../Menu/Menu';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Truncate } from '../Truncate/Truncate';\n\nexport type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    noPadding?: boolean;\n};\n\nconst Content = React.forwardRef<HTMLDivElement, CardContentProps>(function CardContent(externalProps, ref) {\n    const { noPadding, ...props } = externalProps;\n    const className = cn(\n        'flex-grow overflow-auto',\n        {\n            'mx-4 mb-4': !noPadding,\n        },\n        props.className\n    );\n    return <div {...props} className={className} ref={ref} />;\n});\n\nexport type CardProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Title of the Card */\n    title: string | React.ReactElement;\n    /** Menu component associated with the Card */\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\n};\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(props, ref) {\n    const { title, menu, children } = props;\n    const className = cn(\n        'bg-white flex flex-col rounded-xl border border-solid border-radius-[12px] border-grey-300 hover:border-grey-500 [&_[data-taco=\"table2\"]]:!border-0',\n        props.className\n    );\n\n    return (\n        <div className={className} data-taco=\"card\" ref={ref}>\n            <div className=\"mx-4 mb-2 mt-4 flex\">\n                {title && (\n                    <Truncate tooltip={title}>\n                        <h4 className=\"mb-0 flex-grow truncate text-left\">{title}</h4>\n                    </Truncate>\n                )}\n                {menu ? <IconButton icon=\"ellipsis-horizontal\" appearance=\"discrete\" menu={menu} className=\"-mt-[4px]\" /> : null}\n            </div>\n            {children}\n        </div>\n    );\n}) as React.ForwardRefExoticComponent<CardProps> & {\n    Content: React.ForwardRefExoticComponent<CardContentProps>;\n};\nCard.Content = Content;\n"],"names":["Content","React","CardContent","externalProps","ref","noPadding","props","className","cn","Card","title","menu","children","Truncate","tooltip","IconButton","icon","appearance"],"mappings":";;;;;AAWA,MAAMA,OAAO,gBAAGC,UAAgB,CAAmC,SAASC,WAAWA,CAACC,aAAa,EAAEC,GAAG;EACtG,MAAM;IAAEC,SAAS;IAAE,GAAGC;GAAO,GAAGH,aAAa;EAC7C,MAAMI,SAAS,GAAGC,EAAE,CAChB,yBAAyB,EACzB;IACI,WAAW,EAAE,CAACH;GACjB,EACDC,KAAK,CAACC,SAAS,CAClB;EACD,oBAAON,uCAASK,KAAK;IAAEC,SAAS,EAAEA,SAAS;IAAEH,GAAG,EAAEA;KAAO;AAC7D,CAAC,CAAC;MASWK,IAAI,gBAAGR,UAAgB,CAA4B,SAASQ,IAAIA,CAACH,KAAK,EAAEF,GAAG;EACpF,MAAM;IAAEM,KAAK;IAAEC,IAAI;IAAEC;GAAU,GAAGN,KAAK;EACvC,MAAMC,SAAS,GAAGC,EAAE,CAChB,qJAAqJ,EACrJF,KAAK,CAACC,SAAS,CAClB;EAED,oBACIN;IAAKM,SAAS,EAAEA,SAAS;iBAAY,MAAM;IAACH,GAAG,EAAEA;kBAC7CH;IAAKM,SAAS,EAAC;KACVG,KAAK,mBACFT,cAACY,QAAQ;IAACC,OAAO,EAAEJ;kBACfT;IAAIM,SAAS,EAAC;KAAqCG,KAAK,CAAM,CACvD,CACd,EACAC,IAAI,gBAAGV,cAACc,UAAU;IAACC,IAAI,EAAC,qBAAqB;IAACC,UAAU,EAAC,UAAU;IAACN,IAAI,EAAEA,IAAI;IAAEJ,SAAS,EAAC;IAAc,GAAG,IAAI,CAC9G,EACLK,QAAQ,CACP;AAEd,CAAC;AAGDH,IAAI,CAACT,OAAO,GAAGA,OAAO;;;;"}
+{"version":3,"file":"Card.js","sources":["../../../../../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { MenuProps } from '../Menu/Menu';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Truncate } from '../Truncate/Truncate';\nimport './style.css';\n\nexport type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    noPadding?: boolean;\n};\n\nconst Content = React.forwardRef<HTMLDivElement, CardContentProps>(function CardContent(externalProps, ref) {\n    const { noPadding, ...props } = externalProps;\n    const className = cn(\n        'flex-grow overflow-auto',\n        {\n            'mx-4 mb-4': !noPadding,\n        },\n        props.className\n    );\n    return <div {...props} className={className} data-taco=\"card-content\" ref={ref} />;\n});\n\nexport type CardProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Title of the Card */\n    title: string | React.ReactElement;\n    /** Menu component associated with the Card */\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\n};\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(props, ref) {\n    const { title, menu, children } = props;\n    const className = cn(\n        'bg-white flex flex-col rounded-xl border border-solid border-radius-[12px] border-grey-300 hover:border-grey-500',\n        props.className\n    );\n\n    return (\n        <div className={className} data-taco=\"card\" ref={ref}>\n            <div className=\"mx-4 mb-2 mt-4 flex\">\n                {title && (\n                    <Truncate tooltip={title}>\n                        <h4 className=\"mb-0 flex-grow truncate text-left\">{title}</h4>\n                    </Truncate>\n                )}\n                {menu ? <IconButton icon=\"ellipsis-horizontal\" appearance=\"discrete\" menu={menu} className=\"-mt-[4px]\" /> : null}\n            </div>\n            {children}\n        </div>\n    );\n}) as React.ForwardRefExoticComponent<CardProps> & {\n    Content: React.ForwardRefExoticComponent<CardContentProps>;\n};\nCard.Content = Content;\n"],"names":["Content","React","CardContent","externalProps","ref","noPadding","props","className","cn","Card","title","menu","children","Truncate","tooltip","IconButton","icon","appearance"],"mappings":";;;;;AAWA,MAAMA,OAAO,gBAAGC,UAAgB,CAAmC,SAASC,WAAWA,CAACC,aAAa,EAAEC,GAAG;EACtG,MAAM;IAAEC,SAAS;IAAE,GAAGC;GAAO,GAAGH,aAAa;EAC7C,MAAMI,SAAS,GAAGC,EAAE,CAChB,yBAAyB,EACzB;IACI,WAAW,EAAE,CAACH;GACjB,EACDC,KAAK,CAACC,SAAS,CAClB;EACD,oBAAON,uCAASK,KAAK;IAAEC,SAAS,EAAEA,SAAS;iBAAY,cAAc;IAACH,GAAG,EAAEA;KAAO;AACtF,CAAC,CAAC;MASWK,IAAI,gBAAGR,UAAgB,CAA4B,SAASQ,IAAIA,CAACH,KAAK,EAAEF,GAAG;EACpF,MAAM;IAAEM,KAAK;IAAEC,IAAI;IAAEC;GAAU,GAAGN,KAAK;EACvC,MAAMC,SAAS,GAAGC,EAAE,CAChB,kHAAkH,EAClHF,KAAK,CAACC,SAAS,CAClB;EAED,oBACIN;IAAKM,SAAS,EAAEA,SAAS;iBAAY,MAAM;IAACH,GAAG,EAAEA;kBAC7CH;IAAKM,SAAS,EAAC;KACVG,KAAK,mBACFT,cAACY,QAAQ;IAACC,OAAO,EAAEJ;kBACfT;IAAIM,SAAS,EAAC;KAAqCG,KAAK,CAAM,CACvD,CACd,EACAC,IAAI,gBAAGV,cAACc,UAAU;IAACC,IAAI,EAAC,qBAAqB;IAACC,UAAU,EAAC,UAAU;IAACN,IAAI,EAAEA,IAAI;IAAEJ,SAAS,EAAC;IAAc,GAAG,IAAI,CAC9G,EACLK,QAAQ,CACP;AAEd,CAAC;AAGDH,IAAI,CAACT,OAAO,GAAGA,OAAO;;;;"}

package/dist/esm/packages/taco/src/components/Checkbox/Checkbox.js

@@ -3,6 +3,7 @@ import cn from 'clsx';
 import { Icon } from '../Icon/Icon.js';
 import { Root, Indicator } from '@radix-ui/react-checkbox';
 import { useId } from '../../hooks/useId.js';
+import { Spinner } from '../Spinner/Spinner.js';
 
 const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
   const {
@@ -10,6 +11,7 @@ const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
     indeterminate,
     invalid,
     label,
+    loading,
     onChange,
     ...otherProps
   } = props;
@@ -40,6 +42,11 @@ const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
       event.currentTarget.click();
     }
   };
+  const spinnerClassname = cn(
+  //Spinner is slightly bigger then 'line' and 'tick' icons, so making it 2px smaller from each side
+  "m-0.5 !h-[calc(100%-theme('spacing.1'))] !w-[calc(100%-theme('spacing.1'))]", {
+    'text-blue-500': !checked && !indeterminate
+  });
   const element = /*#__PURE__*/createElement(Root, Object.assign({}, otherProps, labelledByProps, {
     "aria-invalid": invalid ? 'true' : undefined,
     "data-taco": "checkbox",
@@ -48,12 +55,14 @@ const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
     onCheckedChange: handleChange,
     onKeyDown: handleKeyDown,
     ref: ref
-  }), /*#__PURE__*/createElement(Indicator, {
+  }), loading ? ( /*#__PURE__*/createElement(Spinner, {
+    className: spinnerClassname
+  })) : ( /*#__PURE__*/createElement(Indicator, {
     className: "flex h-full w-full"
   }, /*#__PURE__*/createElement(Icon, {
     name: indeterminate ? 'line' : 'tick',
     className: "!h-full !w-full"
-  })));
+  }))));
   if (label) {
     const labelContainerClassName = cn('flex items-center cursor-pointer gap-2', {
       'cursor-not-allowed text-grey-300': props.disabled

package/dist/esm/packages/taco/src/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { Icon } from '../Icon/Icon';\nimport { useId } from '../../hooks/useId';\n\ntype CheckedState = boolean | 'indeterminate';\n\ntype CheckboxBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\n    /**\n     * Indeterminate state should only be used with sub-checkboxes. The indeterminate state is shown if not all\n     * sub-checkboxes are selected. This only affects the style, changing the icon in the checkbox.\n     */\n    indeterminate?: boolean;\n    /* Whether the checkbox is in an invalid state */\n    invalid?: boolean;\n    /** Label for the checkbox */\n    label?: React.ReactNode;\n    /* Whether user input is required */\n    required?: boolean;\n};\n\ninterface UncontrolledCheckboxProps extends CheckboxBaseProps {\n    checked?: never;\n    onChange?: never;\n    /* The default checked state (uncontrolled) */\n    defaultChecked?: boolean;\n}\n\ninterface ControlledCheckboxProps extends CheckboxBaseProps {\n    defaultChecked?: never;\n    /* The current checked state (controlled) */\n    checked: boolean;\n    /* Handler called when the checked state changes */\n    onChange: (checked: boolean) => void;\n}\n\nexport type CheckboxProps = UncontrolledCheckboxProps | ControlledCheckboxProps;\n\nexport const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: React.Ref<HTMLButtonElement>) {\n    const { checked, indeterminate, invalid, label, onChange, ...otherProps } = props;\n    const id = useId(props.id);\n\n    const className = cn(\n        'bg-white h-5 w-5 border rounded text-sm flex-shrink-0 mt-[0.1rem] focus-visible:yt-focus disabled:cursor-not-allowed text-white',\n        {\n            'self-start': !!label,\n        },\n        invalid\n            ? {\n                  'border-red-500 hover:border-red-700 aria-checked:border-red-500 aria-checked-mixed:border-red-500 aria-checked:bg-red-500 aria-checked-mixed:bg-red-500 aria-checked:hover:border-red-700 aria-checked-mixed:hover:border-red-700 aria-checked:hover:bg-red-700 aria-checked-mixed:hover:bg-red-700':\n                      !props.disabled,\n                  'border-red-500/50 aria-checked:wcag-red-500/50 aria-checked-mixed:wcag-red-500/50': props.disabled,\n              }\n            : {\n                  'border-grey-500 hover:border-grey-700 aria-checked:border-blue-500 aria-checked-mixed:border-blue-500 aria-checked:bg-blue-500 aria-checked-mixed:bg-blue-500 aria-checked:hover:border-blue-700 aria-checked-mixed:hover:border-blue-700 aria-checked:hover:bg-blue-700 aria-checked-mixed:hover:bg-blue-700':\n                      !props.disabled,\n                  'border-grey-500/50 aria-checked:bg-blue-500/50 aria-checked-mixed:bg-blue-500/50': props.disabled,\n              },\n        props.className\n    );\n\n    let handleChange: ((checked: CheckedState) => void) | undefined;\n\n    if (onChange) {\n        handleChange = (checked: CheckedState) => onChange(checked === 'indeterminate' ? false : checked);\n    }\n\n    let labelledByProps: Record<string, string> | null = null;\n\n    if (label) {\n        labelledByProps = {\n            'aria-labelledby': `${id}-label`,\n            id,\n        };\n    }\n\n    // the enter keyboard shortcut isn't supported by default, but we want it\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (event.key === 'Enter') {\n            event.currentTarget.click();\n        }\n    };\n\n    const element = (\n        <CheckboxPrimitive.Root\n            {...otherProps}\n            {...labelledByProps}\n            aria-invalid={invalid ? 'true' : undefined}\n            data-taco=\"checkbox\"\n            checked={indeterminate ? 'indeterminate' : checked}\n            className={className}\n            onCheckedChange={handleChange}\n            onKeyDown={handleKeyDown}\n            ref={ref}>\n            <CheckboxPrimitive.Indicator className=\"flex h-full w-full\">\n                <Icon name={indeterminate ? 'line' : 'tick'} className=\"!h-full !w-full\" />\n            </CheckboxPrimitive.Indicator>\n        </CheckboxPrimitive.Root>\n    );\n\n    if (label) {\n        const labelContainerClassName = cn('flex items-center cursor-pointer gap-2', {\n            'cursor-not-allowed text-grey-300': props.disabled,\n        });\n\n        return (\n            <span className={labelContainerClassName} data-taco=\"checkbox-container\">\n                {element}\n                <label htmlFor={id} id={`${id}-label`}>\n                    {label}\n                </label>\n            </span>\n        );\n    }\n\n    return element;\n});\nCheckbox.displayName = 'Checkbox';\n"],"names":["Checkbox","React","props","ref","checked","indeterminate","invalid","label","onChange","otherProps","id","useId","className","cn","disabled","handleChange","labelledByProps","handleKeyDown","event","key","currentTarget","click","element","CheckboxPrimitive","undefined","onCheckedChange","onKeyDown","Icon","name","labelContainerClassName","htmlFor","displayName"],"mappings":";;;;;;MAuCaA,QAAQ,gBAAGC,UAAgB,CAAC,SAASD,QAAQA,CAACE,KAAoB,EAAEC,GAAiC;EAC9G,MAAM;IAAEC,OAAO;IAAEC,aAAa;IAAEC,OAAO;IAAEC,KAAK;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGP,KAAK;EACjF,MAAMQ,EAAE,GAAGC,KAAK,CAACT,KAAK,CAACQ,EAAE,CAAC;EAE1B,MAAME,SAAS,GAAGC,EAAE,CAChB,iIAAiI,EACjI;IACI,YAAY,EAAE,CAAC,CAACN;GACnB,EACDD,OAAO,GACD;IACI,qSAAqS,EACjS,CAACJ,KAAK,CAACY,QAAQ;IACnB,mFAAmF,EAAEZ,KAAK,CAACY;GAC9F,GACD;IACI,+SAA+S,EAC3S,CAACZ,KAAK,CAACY,QAAQ;IACnB,kFAAkF,EAAEZ,KAAK,CAACY;GAC7F,EACPZ,KAAK,CAACU,SAAS,CAClB;EAED,IAAIG,YAA2D;EAE/D,IAAIP,QAAQ,EAAE;IACVO,YAAY,GAAIX,OAAqB,IAAKI,QAAQ,CAACJ,OAAO,KAAK,eAAe,GAAG,KAAK,GAAGA,OAAO,CAAC;;EAGrG,IAAIY,eAAe,GAAkC,IAAI;EAEzD,IAAIT,KAAK,EAAE;IACPS,eAAe,GAAG;MACd,iBAAiB,KAAKN,UAAU;MAChCA;KACH;;;EAIL,MAAMO,aAAa,GAAIC,KAA6C;IAChE,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,EAAE;MACvBD,KAAK,CAACE,aAAa,CAACC,KAAK,EAAE;;GAElC;EAED,MAAMC,OAAO,gBACTrB,cAACsB,IAAsB,oBACfd,UAAU,EACVO,eAAe;oBACLV,OAAO,GAAG,MAAM,GAAGkB,SAAS;iBAChC,UAAU;IACpBpB,OAAO,EAAEC,aAAa,GAAG,eAAe,GAAGD,OAAO;IAClDQ,SAAS,EAAEA,SAAS;IACpBa,eAAe,EAAEV,YAAY;IAC7BW,SAAS,EAAET,aAAa;IACxBd,GAAG,EAAEA;mBACLF,cAACsB,SAA2B;IAACX,SAAS,EAAC;kBACnCX,cAAC0B,IAAI;IAACC,IAAI,EAAEvB,aAAa,GAAG,MAAM,GAAG,MAAM;IAAEO,SAAS,EAAC;IAAoB,CACjD,CAErC;EAED,IAAIL,KAAK,EAAE;IACP,MAAMsB,uBAAuB,GAAGhB,EAAE,CAAC,wCAAwC,EAAE;MACzE,kCAAkC,EAAEX,KAAK,CAACY;KAC7C,CAAC;IAEF,oBACIb;MAAMW,SAAS,EAAEiB,uBAAuB;mBAAY;OAC/CP,OAAO,eACRrB;MAAO6B,OAAO,EAAEpB,EAAE;MAAEA,EAAE,KAAKA;OACtBH,KAAK,CACF,CACL;;EAIf,OAAOe,OAAO;AAClB,CAAC;AACDtB,QAAQ,CAAC+B,WAAW,GAAG,UAAU;;;;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { Icon } from '../Icon/Icon';\nimport { useId } from '../../hooks/useId';\nimport { Spinner } from '../Spinner/Spinner';\n\ntype CheckedState = boolean | 'indeterminate';\n\ntype CheckboxBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\n    /**\n     * Indeterminate state should only be used with sub-checkboxes. The indeterminate state is shown if not all\n     * sub-checkboxes are selected. This only affects the style, changing the icon in the checkbox.\n     */\n    indeterminate?: boolean;\n    /* Whether the checkbox is in an invalid state */\n    invalid?: boolean;\n    /** Label for the checkbox */\n    label?: React.ReactNode;\n    /** Displays loading state in checkbox */\n    loading?: boolean;\n    /* Whether user input is required */\n    required?: boolean;\n};\n\ninterface UncontrolledCheckboxProps extends CheckboxBaseProps {\n    checked?: never;\n    onChange?: never;\n    /* The default checked state (uncontrolled) */\n    defaultChecked?: boolean;\n}\n\ninterface ControlledCheckboxProps extends CheckboxBaseProps {\n    defaultChecked?: never;\n    /* The current checked state (controlled) */\n    checked: boolean;\n    /* Handler called when the checked state changes */\n    onChange: (checked: boolean) => void;\n}\n\nexport type CheckboxProps = UncontrolledCheckboxProps | ControlledCheckboxProps;\n\nexport const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: React.Ref<HTMLButtonElement>) {\n    const { checked, indeterminate, invalid, label, loading, onChange, ...otherProps } = props;\n    const id = useId(props.id);\n\n    const className = cn(\n        'bg-white h-5 w-5 border rounded text-sm flex-shrink-0 mt-[0.1rem] focus-visible:yt-focus disabled:cursor-not-allowed text-white',\n        {\n            'self-start': !!label,\n        },\n        invalid\n            ? {\n                  'border-red-500 hover:border-red-700 aria-checked:border-red-500 aria-checked-mixed:border-red-500 aria-checked:bg-red-500 aria-checked-mixed:bg-red-500 aria-checked:hover:border-red-700 aria-checked-mixed:hover:border-red-700 aria-checked:hover:bg-red-700 aria-checked-mixed:hover:bg-red-700':\n                      !props.disabled,\n                  'border-red-500/50 aria-checked:wcag-red-500/50 aria-checked-mixed:wcag-red-500/50': props.disabled,\n              }\n            : {\n                  'border-grey-500 hover:border-grey-700 aria-checked:border-blue-500 aria-checked-mixed:border-blue-500 aria-checked:bg-blue-500 aria-checked-mixed:bg-blue-500 aria-checked:hover:border-blue-700 aria-checked-mixed:hover:border-blue-700 aria-checked:hover:bg-blue-700 aria-checked-mixed:hover:bg-blue-700':\n                      !props.disabled,\n                  'border-grey-500/50 aria-checked:bg-blue-500/50 aria-checked-mixed:bg-blue-500/50': props.disabled,\n              },\n        props.className\n    );\n\n    let handleChange: ((checked: CheckedState) => void) | undefined;\n\n    if (onChange) {\n        handleChange = (checked: CheckedState) => onChange(checked === 'indeterminate' ? false : checked);\n    }\n\n    let labelledByProps: Record<string, string> | null = null;\n\n    if (label) {\n        labelledByProps = {\n            'aria-labelledby': `${id}-label`,\n            id,\n        };\n    }\n\n    // the enter keyboard shortcut isn't supported by default, but we want it\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (event.key === 'Enter') {\n            event.currentTarget.click();\n        }\n    };\n\n    const spinnerClassname = cn(\n        //Spinner is slightly bigger then 'line' and 'tick' icons, so making it 2px smaller from each side\n        \"m-0.5 !h-[calc(100%-theme('spacing.1'))] !w-[calc(100%-theme('spacing.1'))]\",\n        { 'text-blue-500': !checked && !indeterminate }\n    );\n\n    const element = (\n        <CheckboxPrimitive.Root\n            {...otherProps}\n            {...labelledByProps}\n            aria-invalid={invalid ? 'true' : undefined}\n            data-taco=\"checkbox\"\n            checked={indeterminate ? 'indeterminate' : checked}\n            className={className}\n            onCheckedChange={handleChange}\n            onKeyDown={handleKeyDown}\n            ref={ref}>\n            {loading ? (\n                <Spinner className={spinnerClassname} />\n            ) : (\n                <CheckboxPrimitive.Indicator className=\"flex h-full w-full\">\n                    <Icon name={indeterminate ? 'line' : 'tick'} className=\"!h-full !w-full\" />\n                </CheckboxPrimitive.Indicator>\n            )}\n        </CheckboxPrimitive.Root>\n    );\n\n    if (label) {\n        const labelContainerClassName = cn('flex items-center cursor-pointer gap-2', {\n            'cursor-not-allowed text-grey-300': props.disabled,\n        });\n\n        return (\n            <span className={labelContainerClassName} data-taco=\"checkbox-container\">\n                {element}\n                <label htmlFor={id} id={`${id}-label`}>\n                    {label}\n                </label>\n            </span>\n        );\n    }\n\n    return element;\n});\nCheckbox.displayName = 'Checkbox';\n"],"names":["Checkbox","React","props","ref","checked","indeterminate","invalid","label","loading","onChange","otherProps","id","useId","className","cn","disabled","handleChange","labelledByProps","handleKeyDown","event","key","currentTarget","click","spinnerClassname","element","CheckboxPrimitive","undefined","onCheckedChange","onKeyDown","Spinner","Icon","name","labelContainerClassName","htmlFor","displayName"],"mappings":";;;;;;;MA0CaA,QAAQ,gBAAGC,UAAgB,CAAC,SAASD,QAAQA,CAACE,KAAoB,EAAEC,GAAiC;EAC9G,MAAM;IAAEC,OAAO;IAAEC,aAAa;IAAEC,OAAO;IAAEC,KAAK;IAAEC,OAAO;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGR,KAAK;EAC1F,MAAMS,EAAE,GAAGC,KAAK,CAACV,KAAK,CAACS,EAAE,CAAC;EAE1B,MAAME,SAAS,GAAGC,EAAE,CAChB,iIAAiI,EACjI;IACI,YAAY,EAAE,CAAC,CAACP;GACnB,EACDD,OAAO,GACD;IACI,qSAAqS,EACjS,CAACJ,KAAK,CAACa,QAAQ;IACnB,mFAAmF,EAAEb,KAAK,CAACa;GAC9F,GACD;IACI,+SAA+S,EAC3S,CAACb,KAAK,CAACa,QAAQ;IACnB,kFAAkF,EAAEb,KAAK,CAACa;GAC7F,EACPb,KAAK,CAACW,SAAS,CAClB;EAED,IAAIG,YAA2D;EAE/D,IAAIP,QAAQ,EAAE;IACVO,YAAY,GAAIZ,OAAqB,IAAKK,QAAQ,CAACL,OAAO,KAAK,eAAe,GAAG,KAAK,GAAGA,OAAO,CAAC;;EAGrG,IAAIa,eAAe,GAAkC,IAAI;EAEzD,IAAIV,KAAK,EAAE;IACPU,eAAe,GAAG;MACd,iBAAiB,KAAKN,UAAU;MAChCA;KACH;;;EAIL,MAAMO,aAAa,GAAIC,KAA6C;IAChE,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,EAAE;MACvBD,KAAK,CAACE,aAAa,CAACC,KAAK,EAAE;;GAElC;EAED,MAAMC,gBAAgB,GAAGT,EAAE;;EAEvB,6EAA6E,EAC7E;IAAE,eAAe,EAAE,CAACV,OAAO,IAAI,CAACC;GAAe,CAClD;EAED,MAAMmB,OAAO,gBACTvB,cAACwB,IAAsB,oBACff,UAAU,EACVO,eAAe;oBACLX,OAAO,GAAG,MAAM,GAAGoB,SAAS;iBAChC,UAAU;IACpBtB,OAAO,EAAEC,aAAa,GAAG,eAAe,GAAGD,OAAO;IAClDS,SAAS,EAAEA,SAAS;IACpBc,eAAe,EAAEX,YAAY;IAC7BY,SAAS,EAAEV,aAAa;IACxBf,GAAG,EAAEA;MACJK,OAAO,kBACJP,cAAC4B,OAAO;IAAChB,SAAS,EAAEU;IAAoB,mBAExCtB,cAACwB,SAA2B;IAACZ,SAAS,EAAC;kBACnCZ,cAAC6B,IAAI;IAACC,IAAI,EAAE1B,aAAa,GAAG,MAAM,GAAG,MAAM;IAAEQ,SAAS,EAAC;IAAoB,CACjD,CACjC,CAER;EAED,IAAIN,KAAK,EAAE;IACP,MAAMyB,uBAAuB,GAAGlB,EAAE,CAAC,wCAAwC,EAAE;MACzE,kCAAkC,EAAEZ,KAAK,CAACa;KAC7C,CAAC;IAEF,oBACId;MAAMY,SAAS,EAAEmB,uBAAuB;mBAAY;OAC/CR,OAAO,eACRvB;MAAOgC,OAAO,EAAEtB,EAAE;MAAEA,EAAE,KAAKA;OACtBJ,KAAK,CACF,CACL;;EAIf,OAAOiB,OAAO;AAClB,CAAC;AACDxB,QAAQ,CAACkC,WAAW,GAAG,UAAU;;;;"}

package/dist/esm/packages/taco/src/components/Listbox/ScrollableList.js

@@ -2,11 +2,11 @@ import { forwardRef, useMemo, createRef, useEffect, createElement } from 'react'
 import cn from 'clsx';
 import { useMergedRef } from '../../hooks/useMergedRef.js';
 import { useLocalization } from '../Provider/Localization.js';
+import { Spinner } from '../Spinner/Spinner.js';
 import { Checkbox } from '../Checkbox/Checkbox.js';
 import { getInputClasses } from '../Input/util.js';
 import { getNextIndexFromKey } from '../../utils/hooks/useListKeyboardNavigation.js';
 import { useListScrollTo } from '../../utils/hooks/useListScrollTo.js';
-import { Spinner } from '../Spinner/Spinner.js';
 
 const getId = (id, value) => `${id}_${value}`;
 const getNextEnabledItem = (event, data, index) => {

package/dist/esm/packages/taco/src/components/Provider/Localization.js

@@ -292,7 +292,11 @@ const defaultLocalisationTexts = {
     delete: 'Delete',
     save: 'Save',
     search: 'Search...',
-    searchOrCreate: 'Search or create...'
+    searchOrCreate: 'Search or create...',
+    selectAll: 'Select all',
+    selectAllResults: 'Select all results',
+    deselectAll: 'Deselect all',
+    deselectAllResults: 'Deselect all results'
   },
   toasts: {
     dismiss: 'Dismiss'