@ostack.tech/ui 0.4.0 → 0.5.0

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

@@ -228,6 +228,12 @@ export interface DataTableProps<T = any> extends ComponentPropsWithoutRef<"div">
      * @default 5
      */
     overscan?: number;
+    /**
+     * Whether to show all rows of the data table while it is being printed.
+     *
+     * @default false
+     */
+    showAllRowsWhilePrinting?: boolean;
     /** Reference to interact with the data table's API. */
     apiRef?: Ref<DataTableApi<T> | undefined>;
 }

package/dist/types/components/DataTable/DataTableContext.d.ts

@@ -17,6 +17,7 @@ export interface DataTableContextValue<T = any> {
     estimatedRowHeight: number | ((index: number) => number);
     overscan: number;
     generatedId: string;
+    showAllRowsWhilePrinting?: boolean;
     apiRef?: Ref<DataTableApi<T> | undefined>;
     store: DataTableStore<T>;
 }
@@ -106,7 +107,7 @@ export interface UseCreateDataTableContextOptions<T> extends Omit<DataTableConte
     disabledSelections?: Key[];
 }
 /** Hook which creates the data table context value. */
-export declare function useCreateDataTableContext<T>({ displayMode, columns, rows, getRows, rowKey, loadingCount, required, loading, renderRow, renderCell, dynamicRowHeight, estimatedRowHeight, overscan, apiRef, leafColumns, headCount, defaultOffset, offset, onOffsetChange, defaultLimit, limit, onLimitChange, defaultFilter, filter, onFilterChange, defaultSortBy, sortBy, defaultSortDirection, sortDirection, onSort, showSelectionColumn, defaultSelectedRows, selectedRows, onSelectedRowsChange, disabledSelections, }: UseCreateDataTableContextOptions<T>): {
+export declare function useCreateDataTableContext<T>({ displayMode, columns, rows, getRows, rowKey, loadingCount, required, loading, renderRow, renderCell, dynamicRowHeight, estimatedRowHeight, overscan, showAllRowsWhilePrinting, apiRef, leafColumns, headCount, defaultOffset, offset, onOffsetChange, defaultLimit, limit, onLimitChange, defaultFilter, filter, onFilterChange, defaultSortBy, sortBy, defaultSortDirection, sortDirection, onSort, showSelectionColumn, defaultSelectedRows, selectedRows, onSelectedRowsChange, disabledSelections, }: UseCreateDataTableContextOptions<T>): {
     displayMode: DataTableDisplayMode;
     rowKey: string | number | symbol | ((row: any) => Key);
     required: boolean | undefined;
@@ -117,6 +118,7 @@ export declare function useCreateDataTableContext<T>({ displayMode, columns, row
     estimatedRowHeight: number | ((index: number) => number);
     overscan: number;
     generatedId: string;
+    showAllRowsWhilePrinting: boolean | undefined;
     apiRef: Ref<DataTableApi<any> | undefined> | undefined;
     store: Omit<import('zustand').StoreApi<DataTableState<T>>, "subscribe"> & {
         subscribe: {

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

@@ -7,7 +7,7 @@ export interface PortalProps extends ComponentPropsWithoutRef<typeof PortalPrimi
  * Portal component used to render a React subtree in a different part of the
  * DOM.
  *
- * The rendered subtree is automatically wrapper in a `Root` component, so that
+ * The rendered subtree is automatically wrapped in a `Root` component, so that
  * styles are rendered correctly.
  */
 export declare const Portal: import('react').ForwardRefExoticComponent<PortalProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,147 @@
+import { CSSProperties, ReactNode } from 'react';
+import { UseReactToPrintOptions } from 'react-to-print';
+/** Options that can be passed when calling `print`. */
+export interface PrintOptions {
+    /**
+     * Title of the `<iframe>` document, used by some browsers when saving as a
+     * file.
+     */
+    documentTitle?: string;
+    /**
+     * [`size`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@page/size)
+     * to apply to print pages. This property can be used to specify custom page
+     * sizes and/or page orientation. By default, the browser default is used.
+     */
+    pageSize?: string;
+    /**
+     * Margin to apply to print pages. By default, no margin is specified and the
+     * browser default is used.
+     */
+    pageMargin?: CSSProperties["margin"];
+    /**
+     * [`print-color-adjust`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/print-color-adjust)
+     * CSS property.
+     *
+     * @default exact
+     */
+    printColorAdjust?: CSSProperties["printColorAdjust"];
+    /**
+     * A list of fonts to load into the printing `<iframe>`.
+     *
+     * Useful when using custom fonts: the printing will be halted until all fonts
+     * are loaded to ensure that the content is able to use said fonts.
+     */
+    fonts?: UseReactToPrintOptions["fonts"];
+    /**
+     * Copy shadow root content into the print `<iframe>`. Use with care when
+     * printing large documents as traversing these can be slow.
+     *
+     * @default false
+     */
+    copyShadowRoots?: boolean;
+    /**
+     * Set the
+     * [`nonce`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/nonce)
+     * attribute for allow-listing script and style elements for Content Security
+     * Policy (CSP).
+     */
+    nonce?: string;
+    /**
+     * Custom print function. By default, the `<iframe>` window's `print` function
+     * is called.
+     */
+    printFn?: UseReactToPrintOptions["print"];
+    /** Properties to pass to the `<iframe>` used for printing. */
+    iframeProps?: UseReactToPrintOptions["printIframeProps"];
+}
+/** Properties of the printer component. */
+export interface PrinterProps extends PrintOptions {
+    /**
+     * Whether to render the printer content as if it were being printed. This
+     * property is expected to be used only for development/testing purposes.
+     *
+     * When `true`, this effectively causes the printer to “print” in the
+     * foreground, so the `printInForeground` property is ignored.
+     *
+     * @default false
+     */
+    preview?: boolean;
+    /**
+     * By default, the provided `children` will be rendered twice while printing:
+     * once for the content displayed on screen; and another in a hidden
+     * “portalled” element for printing.
+     *
+     * By setting the property to `true`, the content visible on the screen itself
+     * will be printed. Note that this content will see `printing` set to `true`
+     * in the printer context while printing; so if the content behaves
+     * differently while printing, a user will notice it changing.
+     *
+     * This property has no effect when `preview` is set, since the previewed
+     * content is shown in the foreground.
+     *
+     * @default false
+     */
+    printInForeground?: boolean;
+    /**
+     * Function called just before printing starts, but after the content is ready
+     * to be copied over to an `<iframe>` for printing. If a promise is returned,
+     * printing is halted until it completes.
+     *
+     * @param event Before print event. Calling `event.preventDefault()` will
+     *   prevent printing from occurring.
+     */
+    onBeforePrint?: (event: Event) => void | Promise<void>;
+    /**
+     * Function called after printing finishes.
+     *
+     * @param event After print event. Calling `event.preventDefault()` will
+     *   prevent focusing of the print trigger from occurring.
+     */
+    onAfterPrint?: (event: Event) => void;
+    children?: ReactNode;
+}
+/**
+ * Component used to print content using the browser's printing functionality.
+ * The content is copied to a hidden `<iframe>` which is then printed by the
+ * browser.
+ *
+ * Content being printed is aware of the fact that it is being printed and can
+ * adapt its appearance accordingly. Use the `usePrinting` and
+ * `useStartPrintingTask` hooks to control the printing behaviour.
+ *
+ * Built on top of the
+ * [`react-to-print`](https://github.com/MatthewHerbst/react-to-print) package.
+ *
+ * **Note**: While printing, the content to print is typically (unless
+ * `printInForeground` is provided) rendered twice: once for the content visible
+ * on the screen and another in a hidden and “portalled” element for printing.
+ *
+ * It composes the following subcomponents:
+ *
+ * - `PrinterTrigger`: The button which, when pressed, triggers the printing.
+ * - `PrinterContent`: The content to be printed.
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * import {
+ *   Button,
+ *   Printer,
+ *   PrinterContent,
+ *   PrinterTrigger,
+ * } from "@ostack.tech/ui";
+ *
+ * function ContentToPrint() {
+ *   return (
+ *     <Printer>
+ *       <PrinterTrigger>
+ *         <Button>Print</Button>
+ *       </PrinterTrigger>
+ *
+ *       <PrinterContent>Content to print…</PrinterContent>
+ *     </Printer>
+ *   );
+ * }
+ * ```
+ */
+export declare function Printer({ preview, printInForeground, documentTitle, pageSize, pageMargin, printColorAdjust, fonts, copyShadowRoots, nonce, printFn, onBeforePrint, onAfterPrint, iframeProps, children, }: PrinterProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Printer/PrinterContent.d.ts

@@ -0,0 +1,22 @@
+import { ComponentPropsWithoutRef, ComponentPropsWithRef } from 'react';
+import { Portal } from '../Portal';
+/** Properties of the printer content. */
+export interface PrinterContentProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * Change the component to the HTML tag or custom component of the only child.
+     * This will merge the original component props with the props of the supplied
+     * element/component and change the underlying DOM node.
+     */
+    asChild?: boolean;
+    /** Whether the provided `children` should only be rendered while printing. */
+    printOnly?: boolean;
+    /** Container of the portal. */
+    portalContainer?: ComponentPropsWithRef<typeof Portal>["container"];
+}
+/**
+ * Content to be printed.
+ *
+ * All “element” properties provided to this component will be forwarded to a
+ * wrapper element which **only** exists during printing.
+ */
+export declare const PrinterContent: import('react').ForwardRefExoticComponent<PrinterContentProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/types/components/Printer/PrinterContentContext.d.ts

@@ -0,0 +1,38 @@
+/** Value of the printer content context. */
+export interface PrinterContextValue {
+    printing: boolean;
+    startPrintingTask?: () => void;
+    finishPrintingTask?: () => void;
+}
+/** Printer content context. */
+export declare const PrinterContentContext: import('react').Context<PrinterContextValue>;
+/**
+ * Hook providing access to the printer content context.
+ *
+ * **Note**: This hook **can** be called outside the printer context.
+ */
+export declare function usePrinterContentContext(): PrinterContextValue;
+/**
+ * Returns whether the component calling this hook is currently being printed.
+ *
+ * **Note**: This hook **can** be called outside the printer context.
+ */
+export declare function usePrinting(): boolean;
+/** Options for the `useStartPrintingTask` hook. */
+export interface UseStartPrintingTaskOptions {
+    /**
+     * Whether to enable the printing task.
+     *
+     * @default `true`
+     */
+    enabled?: boolean;
+}
+/**
+ * Marks a printing task as having started and returns a function that should be
+ * called when it finishes. The printer will wait for any ongoing printing tasks
+ * before printing.
+ *
+ * **Note**: This hook **can** be called outside the printer context, in which
+ * case starting/finishing printing tasks will be no-ops but **won't** fail.
+ */
+export declare function useStartPrintingTask({ enabled, }?: UseStartPrintingTaskOptions): () => void;

package/dist/types/components/Printer/PrinterContext.d.ts

@@ -0,0 +1,30 @@
+import { RefObject } from 'react';
+import { PrintOptions } from './Printer.tsx';
+/** Value of the printer context. */
+interface PrinterContextValue {
+    preview?: boolean;
+    printInForeground?: boolean;
+    printInProgress: boolean;
+    triggerRef: RefObject<HTMLButtonElement | null>;
+    contentRef: RefObject<Element | Text | null>;
+    print: (options?: PrintOptions) => Promise<void>;
+    startPrintingTask: () => void;
+    finishPrintingTask: () => void;
+}
+/** Printer context. */
+export declare const PrinterContext: import('react').Context<PrinterContextValue | null>;
+/** Hook providing access to the printer context. */
+export declare function usePrinterContext(): PrinterContextValue;
+/**
+ * Returns whether printing is currently in progress.
+ *
+ * **Note**: This hook can be called even when a printer context is **not** in
+ * scope, in which case `false` will be returned.
+ */
+export declare function usePrintInProgress(): boolean;
+/**
+ * Hook providing access to the print function. This hook will throw if called
+ * outside the printer context.
+ */
+export declare function usePrint(): PrinterContextValue["print"];
+export {};

package/dist/types/components/Printer/PrinterTrigger.d.ts

@@ -0,0 +1,20 @@
+import { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactElement } from 'react';
+/** Properties of the printer trigger. */
+export interface PrinterTriggerProps extends ComponentPropsWithoutRef<"button"> {
+    /**
+     * By default, the trigger will be hidden while printing, even when inside the
+     * print content. Set this to `true` to show it.
+     *
+     * @default false
+     */
+    showWhenPrinting?: boolean;
+    children: ReactElement<ComponentPropsWithRef<"button">>;
+}
+/**
+ * Trigger to print the content of the printer. The provided `children` should
+ * be a button.
+ *
+ * This trigger will **not** show in the print, even when inside the print
+ * content, unless `showWhenPrinting` is set to `true`.
+ */
+export declare const PrinterTrigger: import('react').ForwardRefExoticComponent<PrinterTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/types/components/Printer/index.d.ts

@@ -0,0 +1,6 @@
+export * from './Printer.tsx';
+export * from './PrinterContent.tsx';
+export { usePrinting, useStartPrintingTask } from './PrinterContentContext.tsx';
+export { usePrint, usePrintInProgress } from './PrinterContext.ts';
+export * from './PrinterTrigger.tsx';
+export * from './usePrintClassNames.ts';

package/dist/types/components/Printer/usePrintClassNames.d.ts

@@ -0,0 +1,5 @@
+export interface UsePrintClassNames {
+    printOnly: string;
+    printHidden: string;
+}
+export declare function usePrintClassNames(): UsePrintClassNames;

package/dist/types/components/Select/SelectContext.d.ts

@@ -1,4 +1,4 @@
-import { Dispatch, ReactNode, SetStateAction } from 'react';
+import { ReactNode } from 'react';
 import { AccentColor } from '../../utils/accent.ts';
 import { ControlStatus } from '../../utils/control.ts';
 import { SelectProps } from './Select.tsx';
@@ -7,7 +7,6 @@ export interface SelectContextValue {
     registering?: boolean;
     multiple: boolean;
     value: string | string[];
-    setValue: Dispatch<SetStateAction<string | number | readonly string[]>>;
     onOptionSelect: (value: string) => void;
     status?: ControlStatus;
     disabled?: boolean;
@@ -38,10 +37,9 @@ export declare const SelectContext: import('react').Context<SelectContextValue |
 /** Options to pass to the `useCreateSelectContext` hook. */
 export type UseCreateSelectContextOptions = Omit<SelectContextValue, "store">;
 /** Hook which creates the select context. */
-export declare function useCreateSelectContext({ multiple, value, setValue, onOptionSelect, status, disabled, readOnly, valueTagProps, }: UseCreateSelectContextOptions): {
+export declare function useCreateSelectContext({ multiple, value, onOptionSelect, status, disabled, readOnly, valueTagProps, }: UseCreateSelectContextOptions): {
     multiple: boolean;
     value: string | string[];
-    setValue: Dispatch<SetStateAction<string | number | readonly string[]>>;
     onOptionSelect: (value: string) => void;
     status: ControlStatus | undefined;
     disabled: boolean | undefined;

package/dist/types/components/Tabs/TabContent.d.ts

@@ -1,9 +1,14 @@
 import { Tabs as TabsPrimitive } from 'radix-ui';
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef, ComponentPropsWithRef } from 'react';
 /** Properties of the tab content component. */
 export interface TabContentProps extends Omit<ComponentPropsWithoutRef<typeof TabsPrimitive.TabsContent>, "value"> {
     /** Value of the tab that corresponds to this content. */
     value: string | number;
+    /**
+     * Properties to pass to the tab content label element (shown when printing
+     * with `showAllTabsWhilePrinting` set).
+     */
+    tabContentLabelProps?: ComponentPropsWithRef<"span">;
 }
 /** Tab content component. */
 export declare const TabContent: import('react').ForwardRefExoticComponent<TabContentProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -14,6 +14,8 @@ export interface TabsProps extends Omit<ComponentPropsWithoutRef<typeof TabsPrim
     defaultValue?: string | number;
     /** Value of the active tab. */
     value?: string | number;
+    /** Whether the content of all tabs should be shown while printing. */
+    showAllTabsWhilePrinting?: boolean;
 }
 /**
  * The `Tabs` component allows content to be organised in tabs and displayed one

package/dist/types/components/Tabs/TabsContext.d.ts

@@ -1,8 +1,10 @@
+import { ReactNode } from 'react';
 import { ScrollPosition } from '../../utils/useScrollPosition.ts';
 import { TabsVariant } from './Tabs.tsx';
 /** Value of the tabs' context. */
 export interface TabsContextValue {
     variant: TabsVariant;
+    showAllTabsWhilePrinting?: boolean;
     store: TabsStore;
 }
 /** State of the tabs. */
@@ -11,14 +13,21 @@ export interface TabsState {
     showScrollButtons?: boolean;
     width: number;
     scrollPosition?: ScrollPosition;
+    tabsLabels: Record<string, ReactNode>;
+    actions: TabsStateActions;
+}
+interface TabsStateActions {
+    registerTabLabel: (value: string, label: ReactNode) => (() => void) | void;
+    getTabLabel: (value: string) => ReactNode | undefined;
 }
 /** Tabs' store. */
 export type TabsStore = ReturnType<typeof useCreateTabsContext>["store"];
 /** Tabs' context. */
 export declare const TabsContext: import('react').Context<TabsContextValue | null>;
 /** Hook which creates the tabs' store. */
-export declare function useCreateTabsContext(variant: TabsVariant, defaultValue?: string | number, value?: string | number): {
+export declare function useCreateTabsContext(variant: TabsVariant, defaultValue?: string | number, value?: string | number, showAllTabsWhilePrinting?: boolean): {
     variant: TabsVariant;
+    showAllTabsWhilePrinting: boolean | undefined;
     store: Omit<import('zustand').StoreApi<TabsState>, "subscribe"> & {
         subscribe: {
             (listener: (selectedState: TabsState, previousSelectedState: TabsState) => void): () => void;
@@ -31,3 +40,8 @@ export declare function useCreateTabsContext(variant: TabsVariant, defaultValue?
 };
 /** Hooks returning the tabs' context value. */
 export declare function useTabsContext(): TabsContextValue;
+/** Hook which registers a tab label. */
+export declare function useRegisterTabLabel(value: string, label: ReactNode): void;
+/** Hook which returns the label of a tab. */
+export declare function useTabLabel(value: string): ReactNode;
+export {};

package/dist/types/index.d.ts

@@ -44,6 +44,7 @@ export * from './components/NumericInput';
 export * from './components/Output';
 export * from './components/Popover';
 export * from './components/Portal';
+export * from './components/Printer';
 export * from './components/RadioGroup';
 export * from './components/Select';
 export * from './components/Separator';

package/dist/types/providers/AlertDialogProvider/useAlertDialog.d.ts

@@ -8,7 +8,7 @@ import { AlertDialogProviderContextValue } from './AlertDialogProviderContext.ts
  *
  * @example
  *
- * ```typescript
+ * ```tsx
  * const { alert, confirm } = useAlertDialog();
  *
  * async function handleRemoveItemClick(event) {
@@ -32,7 +32,7 @@ import { AlertDialogProviderContextValue } from './AlertDialogProviderContext.ts
  *
  * @example
  *
- * ```typescript
+ * ```tsx
  * const { prompt } = useAlertDialog();
  *
  * async function handleClick(event) {

package/dist/types/providers/ToastManagerProvider/useToastManager.d.ts

@@ -4,7 +4,7 @@ import { ToastManagerContextValue } from './ToastManagerContext.ts';
  *
  * @example
  *
- * ```typescript
+ * ```tsx
  * const { addToast } = useToastManager();
  *
  * async function handleNewItemClick() {

package/dist/types/utils/cx.d.ts

@@ -3,7 +3,7 @@
  *
  * @example
  *
- * ```typescript
+ * ```ts
  * cx("foo", "bar", [false, "baz"]); // "foo bar baz"
  * cx({ foo: true, bar: false }, "baz"); // "foo baz"
  * ```

package/dist/types/utils/keyboardShortcut.d.ts

@@ -65,6 +65,12 @@ export interface RegisterKeyboardShortcutOptions {
 export declare function registerKeyboardShortcut(keybinds: string | string[], action: KeyboardShortcutAction, { target, eventType, sequenceTimeout, ignore, capture, preventDefault, }?: RegisterKeyboardShortcutOptions): () => void;
 /** Options of the `useKeyboardShortcut` hook. */
 export interface UseKeyboardShortcutOptions extends Omit<RegisterKeyboardShortcutOptions, "target"> {
+    /**
+     * Whether the shortcut should be enabled.
+     *
+     * @default true
+     */
+    enabled?: boolean;
     /**
      * Target element on which to listen for the keybinds. While set to `null`
      * keybinds will be ignored.
@@ -102,7 +108,7 @@ export interface UseKeyboardShortcutOptions extends Omit<RegisterKeyboardShortcu
  * @see {@link registerKeyboardShortcut} for a non-hook version of this
  * function.
  */
-export declare function useKeyboardShortcut(keybinds: string | string[] | null | undefined, action: KeyboardShortcutAction, { target, eventType, sequenceTimeout, ignore, capture, preventDefault, }?: UseKeyboardShortcutOptions): void;
+export declare function useKeyboardShortcut(keybinds: string | string[] | null | undefined, action: KeyboardShortcutAction, { enabled, target, eventType, sequenceTimeout, ignore, capture, preventDefault, }?: UseKeyboardShortcutOptions): void;
 /**
  * `ignore` function to use in `registerKeyboardShortcut`/`useKeyboardShortcut`
  * which ignores triggered shortcuts which occur in `<input>`, `<textarea>`, or

package/dist/types/utils/useCssVars.d.ts

@@ -11,7 +11,7 @@ export interface UseCssVarsResult {
      *
      * @example
      *
-     * ```typescript
+     * ```ts
      * cssVarName("color"); // returns "--[prefix]-color"
      * ```
      */
@@ -22,7 +22,7 @@ export interface UseCssVarsResult {
      *
      * @example
      *
-     * ```typescript
+     * ```ts
      * cssVar("color"); // returns "var(--[prefix]-color)"
      * cssVar("size", "10px"); // returns "var(--[prefix]-size, 10px)"
      * ```
@@ -34,7 +34,7 @@ export interface UseCssVarsResult {
      *
      * @example
      *
-     * ```typescript
+     * ```ts
      * cssVarStyle("color", "red"); // returns {"--[prefix]-color": "red"}
      * cssVarStyle("size", undefined); // returns undefined
      * ```

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ostack.tech/ui",
   "description": "ostack/UI component library.",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "homepage": "https://ui.ostack.tech/",
   "author": {
     "name": "Opensoft",
@@ -49,9 +49,10 @@
     "cmdk": "^1.1.1",
     "from-exponential": "^1.1.1",
     "radix-ui": "^1.4.3",
-    "react-day-picker": "^9.11.1",
+    "react-day-picker": "^9.11.2",
     "react-error-boundary": "^6.0.0",
     "react-number-format": "^5.4.4",
+    "react-to-print": "^3.2.0",
     "tinykeys": "^3.0.0"
   },
   "peerDependencies": {

package/scss/components/Card/_Card.scss

@@ -63,12 +63,11 @@
     > #{$tabs-tab-list-root} {
       flex-grow: 1;
       z-index: var(--#{$prefix}z-index-docked);
-      margin-left: calc(var(--#{$prefix}card-padding-x) * -1);
-      margin-right: calc(var(--#{$prefix}card-padding-x) * -1);
-      margin-bottom: calc(
-        var(--#{$prefix}card-padding-y) * -1 +
-          $card-tabs-tab-list-margin-y-offset
-      );
+      margin: calc(
+          var(--#{$prefix}card-padding-y) * -1 +
+            $card-tabs-tab-list-margin-y-offset
+        )
+        calc(var(--#{$prefix}card-padding-x) * -1);
       padding-left: max(
         var(--#{$prefix}card-padding-x) - var(--#{$prefix}tabs-tab-padding-x),
         var(--#{$prefix}tabs-tab-margin-x, 0)

package/scss/components/Field/_Field.scss

@@ -5,6 +5,7 @@
 
 .#{$prefix}field {
   width: 100%;
+  break-inside: avoid;
 
   & > .#{$prefix}control-code,
   & > .#{$prefix}label__container {

package/scss/components/Spinner/_Spinner-variables.scss

@@ -1,3 +1,5 @@
 @use "../../scss/base-variables" as *;
 
-$spinner-accent-color: var(--#{$prefix}accent-a11) !default;
+// Accent
+$spinner-accent-track-color: var(--#{$prefix}accent-a5) !default;
+$spinner-accent-indicator-color: var(--#{$prefix}accent-a11) !default;

package/scss/components/Spinner/_Spinner.scss

@@ -1,12 +1,21 @@
 @use "Spinner-variables" as *;
 @use "../../scss/base-variables" as *;
+@use "../../scss/utils/declare-var" as *;
 @use "../../scss/utils/spinner" as *;
 
 .#{$prefix}spinner {
   @include spinner;
 
+  // Accent
   &[data-accent] {
-    color: $spinner-accent-color;
+    @include declare-var(
+      --#{$prefix}spinner-track-color,
+      $spinner-accent-track-color
+    );
+    @include declare-var(
+      --#{$prefix}spinner-indicator-color,
+      $spinner-accent-indicator-color
+    );
   }
 
   // Sizes

package/scss/components/Table/_Table.scss

@@ -25,6 +25,12 @@
     width: 100%;
     overflow: auto;
 
+    @media print {
+      overflow: unset;
+      min-width: 100%;
+      width: min-content;
+    }
+
     border-radius: var(--#{$prefix}table-border-radius);
     border-width: var(--#{$prefix}table-border-width, 0);
     border-style: solid;

package/scss/components/Tabs/_Tabs-variables.scss

@@ -201,6 +201,22 @@ $tabs-scroll-button-overflow-indicator-z-index: calc(
   var(--#{$prefix}z-index-focused) + 1
 ) !default;
 
+// Tab content label
+$tabs-tab-content-label-padding-y: calc(
+  $tabs-tab-default-padding-y + $tabs-tab-inner-default-padding-y
+) !default;
+$tabs-tab-content-label-padding-x: calc(
+  $tabs-tab-default-padding-x + $tabs-tab-inner-default-padding-x
+) !default;
+$tabs-tab-content-label-margin-bottom: spacing(1.5) !default;
+$tabs-tab-content-label-border-bottom: 2px solid var(--#{$prefix}primary-9) !default;
+$tabs-tab-content-label-font-size: var(--#{$prefix}font-size-sm) !default;
+$tabs-tab-content-label-line-height: var(--#{$prefix}font-size-sm) !default;
+$tabs-tab-content-label-font-weight: $font-weight-medium !default;
+
+// Tab content
+$tabs-tab-content-gap-y: spacing(2) !default;
+
 // Tab content - Focus
 $tabs-tab-content-focus-outline-width: 2px !default;
 $tabs-tab-content-focus-outline-color: var(--#{$prefix}primary-8) !default;