@ostack.tech/ui 0.11.3 → 0.12.1

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

@@ -1,6 +1,6 @@
 import { ComponentPropsWithRef, ReactNode } from 'react';
 import { MatchAgainstFilter } from '../../utils/filtering.ts';
-import { TableColumn } from '../Table';
+import { TableCell, TableColumn } from '../Table';
 /** Data table columns. */
 export type DataTableColumns<T = unknown> = Record<string, DataTableColumn<T>>;
 /** Data table column. */
@@ -42,6 +42,10 @@ export interface DataTableColumn<T = unknown, TValue = any> extends Omit<Compone
      * objects, their string representation is used in the comparison.
      */
     compare?: (value1: TValue, value2: TValue) => number;
+    /** Optional footer content to be rendered in the table foot. */
+    footer?: ReactNode | ((footerData: DataTableColumnFooterData<T>) => ReactNode);
+    /** Properties to pass to the column table foot cell. */
+    footerProps?: ComponentPropsWithRef<typeof TableCell>;
 }
 /** Data passed to a data table column's `getValue` function. */
 export interface DataTableColumnGetValueData<T = unknown> {
@@ -68,3 +72,10 @@ export interface DataTableColumnRenderData<T = unknown, TValue = unknown> extend
      */
     markedValue: ReactNode;
 }
+/** Data passed to a data table column's `footer` function. */
+export interface DataTableColumnFooterData<T> {
+    /** Rows. */
+    rows?: T[];
+    /** Total number of rows. */
+    totalCount?: number;
+}

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

@@ -27,6 +27,7 @@ export interface DataTableContextValue<T = any> {
 export interface DataTableState<T = any> {
     columns: DataTableColumns<T>;
     leafColumns: DataTableColumns<T>;
+    hasFooterCells: () => boolean;
     headCount: number;
     _rows?: T[];
     _filteredRows: () => T[] | undefined;
@@ -45,6 +46,7 @@ export interface DataTableState<T = any> {
     _totalCount?: number;
     totalCount: () => number | undefined;
     bodyCount: () => number;
+    footCount: () => number;
     _offset: number;
     offset: () => number;
     currentPage: () => number;

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

@@ -1,7 +1,8 @@
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { TableFoot } from '../Table';
 /** Properties of the data table foot component. */
 export interface DataTableFootProps extends ComponentPropsWithoutRef<typeof TableFoot> {
+    footContent?: ReactNode;
     showWhenEmpty: boolean;
 }
 /** Foot of the data table. */

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

@@ -0,0 +1,5 @@
+import { DataTableColumns } from './DataTableColumn.tsx';
+/** List of "leaf" columns (columns with no sub columns, i.e. the "bottom" ones). */
+export declare function leafColumns<T>(columns: DataTableColumns<T>): DataTableColumns<T>;
+/** Total number of table rows of the head. */
+export declare function numberOfRows<T>(columns: DataTableColumns<T>): number;

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

@@ -0,0 +1,8 @@
+import { SortDirection } from '../../utils/sorting.ts';
+import { DataTableColumns } from './DataTableColumn.tsx';
+/** Sanitizes an integer property. */
+export declare function sanitizeInt(value: number | string | undefined): number | undefined;
+/** Sanitizes the `sortBy` property. */
+export declare function sanitizeSortBy<T>(sortBy: string | null | undefined, leaves: DataTableColumns<T>): string | null | undefined;
+/** Sanitizes the `sortDirection` property. */
+export declare function sanitizeSortDirection(sortDirection: string | undefined): SortDirection | undefined;

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

@@ -0,0 +1,32 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { Slot } from '../Slot';
+/** Available z-index names. */
+export type LayerZIndex = "docked" | "dropdown" | "sticky" | "banner" | "overlay" | "dialog" | "popover" | "skipLink" | "toast" | "tooltip";
+/** Properties of the layer component. */
+export interface LayerProps extends ComponentPropsWithoutRef<typeof Slot> {
+    /** Z-index of the layer. */
+    zIndex?: LayerZIndex | number | (LayerZIndex | number)[];
+    /** Resets the stacking context. */
+    reset?: boolean;
+    children: ReactNode;
+}
+/**
+ * The layer component manages hierarchical stacking contexts by tracking and
+ * adding up z-index values.
+ *
+ * All ostack/UI overlays (dialogs, dropdown menus, _etc._) are rendered within
+ * a layer, allowing them to be nested.
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * function NavBar() {
+ *   return (
+ *     <Layer zIndex="sticky">
+ *       <nav style={{ position: "sticky", top: 0 }}>…</nav>
+ *     </Layer>
+ *   );
+ * }
+ * ```
+ */
+export declare function Layer({ zIndex, reset, style, ...otherProps }: LayerProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Layer/LayerContext.d.ts

@@ -0,0 +1,6 @@
+/** Layer context. */
+export declare const LayerContext: import('react').Context<(string | number)[]>;
+/** Hook providing access to the current layer's z-index. */
+export declare function useLayerZIndex(): string | undefined;
+/** Computes the z-index of a layer based on its z-indices. */
+export declare function computeLayerZIndex(zIndices: (number | string)[]): string;

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

@@ -0,0 +1,2 @@
+export * from './Layer.tsx';
+export { useLayerZIndex } from './LayerContext.ts';

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

@@ -2,5 +2,5 @@ import { ComponentPropsWithoutRef } from 'react';
 /** Properties of the label component. */
 export interface OverlayProps extends ComponentPropsWithoutRef<"div"> {
 }
-/** Overlay component. */
+/** Internal component used by dialogs to overlay content. */
 export declare const Overlay: import('react').ForwardRefExoticComponent<OverlayProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -3,7 +3,7 @@ import { DocumentTitleProvider } from '../../providers/DocumentTitleProvider';
 import { ErrorReportingProvider } from '../../providers/ErrorReportingProvider';
 import { LocalizationObject } from '../../providers/LocalizationProvider';
 import { ErrorBoundary } from '../ErrorBoundary';
-import { ToastSwipeDirection } from '../Toast';
+import { ToastSwipeDirection, ToastViewportPosition } from '../Toast';
 /** Properties of the ostack/UI root component. */
 export interface RootProps extends ComponentPropsWithoutRef<"div">, Pick<ComponentPropsWithoutRef<typeof ErrorReportingProvider>, "reportError" | "errorReportingUrl" | "errorReportingMethod" | "encodeErrorReport" | "encodedErrorReportMimeType" | "errorReportingOptions">, Pick<ComponentPropsWithoutRef<typeof DocumentTitleProvider>, "baseDocumentTitle"> {
     /**
@@ -85,9 +85,8 @@ export interface RootProps extends ComponentPropsWithoutRef<"div">, Pick<Compone
      */
     toastsDuration?: number;
     /**
-     * Direction of pointer swipe that should close the toast.
-     *
-     * @default "right"
+     * Direction of pointer swipe that should close the toast. Defaults to
+     * `"right"` when `toastViewportPosition` is `"right"` or `"left"` otherwise.
      */
     toastsSwipeDirection?: ToastSwipeDirection;
     /**
@@ -96,6 +95,12 @@ export interface RootProps extends ComponentPropsWithoutRef<"div">, Pick<Compone
      * @default 50
      */
     toastsSwipeThreshold?: number;
+    /**
+     * Position of the toast viewport.
+     *
+     * @default "right"
+     */
+    toastViewportPosition?: ToastViewportPosition;
     /**
      * The keys to use as the keyboard shortcut that will move focus to the toast
      * viewport.

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

@@ -141,22 +141,22 @@ export interface TableProps extends ComponentPropsWithoutRef<"table"> {
  *   return (
  *     <Table caption="Price list">
  *       <TableHead>
- *         <TableColumn label="Item" />
+ *         <TableColumn header label="Item" />
  *         <TableColumn label="Price" />
  *       </TableHead>
  *       <TableBody>
  *         <TableRow>
- *           <TableCell header>Olive oil</TableCell>
+ *           <TableCell>Olive oil</TableCell>
  *           <TableCell>3,99 €</TableCell>
  *         </TableRow>
  *         <TableRow>
- *           <TableCell header>Vinegar</TableCell>
+ *           <TableCell>Vinegar</TableCell>
  *           <TableCell>0,95 €</TableCell>
  *         </TableRow>
  *       </TableBody>
  *       <TableFoot>
  *         <TableRow>
- *           <TableCell header>Total</TableCell>
+ *           <TableCell>Total</TableCell>
  *           <TableCell>4,94 €</TableCell>
  *         </TableRow>
  *       </TableFoot>

package/dist/types/components/Table/TableCell.d.ts

@@ -6,6 +6,21 @@ export type TableCellVariant = "header" | "data";
 export type TableCellSticky = "left" | "right";
 /** Properties of the table row component. */
 export interface TableCellProps extends Omit<ComponentPropsWithoutRef<"td" | "th">, "align"> {
+    /**
+     * Index of the (leaf) column this cell belongs to. This property is
+     * automatically set by the `TableRow` component when the `TableCell` is its
+     * direct child.
+     *
+     * When set, the cell automatically inherits properties defined in the
+     * corresponding column, such as `align` or `sticky`.
+     */
+    columnIndex?: number | null;
+    /**
+     * Index of the (leaf) column for stickiness computation purposes.
+     *
+     * @internal
+     */
+    _stickyColumnIndex?: number | null;
     /**
      * Whether this cell should be rendered as a table header cell (`th` element).
      * By default, `true` within a `TableHead` component, and `false` otherwise.

package/dist/types/components/Table/TableColumn.d.ts

@@ -7,7 +7,7 @@ import { Popover, PopoverContent } from '../Popover';
 import { Stack } from '../Stack';
 import { TableCell } from './TableCell.tsx';
 /** Properties of a table column. */
-export interface TableColumnProps extends Omit<ComponentPropsWithoutRef<typeof TableCell>, "rowSpan" | "scope"> {
+export interface TableColumnProps extends Omit<ComponentPropsWithoutRef<typeof TableCell>, "columnIndex" | "_stickyColumnIndex" | "rowSpan" | "scope"> {
     /** Column's label. */
     label?: ReactNode;
     /** String representation of the label (defaults to `label`). */

package/dist/types/components/Table/TableContext.d.ts

@@ -1,34 +1,34 @@
 import { ControlStatus } from '../../utils/control.ts';
 import { ScrollPosition } from '../../utils/useScrollPosition.ts';
+import { TableColumnObject } from './columnUtils.ts';
 import { TableLayout } from './Table.tsx';
 /** Value of the table context. */
 export interface TableContextValue {
     editable: boolean;
     status?: ControlStatus;
     layout: TableLayout;
-    defaultColumnWidth: number;
-    onTableMinWidthChange: (minWidth: string | undefined) => void;
-    onTableMaxWidthChange: (maxWidth: string | undefined) => void;
     store: TableStore;
 }
 /** State of the table. */
 export interface TableState {
     scrollPosition?: ScrollPosition;
-    numberOfColumns?: number;
-    columnWidths?: (string | undefined)[];
+    leafColumns?: TableColumnObject[];
+    defaultColumnWidth: number;
+    stickyColumnOffsets: () => (number | undefined)[] | undefined;
 }
 /** Table store. */
 export type TableStore = ReturnType<typeof useCreateTableContext>["store"];
 /** Table context. */
 export declare const TableContext: import('react').Context<TableContextValue | null>;
+/** Options for the `useCreateTableContext` hook. */
+export type UseCreateTableContextOptions = Omit<TableContextValue, "store"> & {
+    defaultColumnWidth: number;
+};
 /** Hook which creates the table store. */
-export declare function useCreateTableContext(editable: boolean, status: ControlStatus | undefined, layout: TableLayout, defaultColumnWidth: number, onTableMinWidthChange: (minWidth: string | undefined) => void, onTableMaxWidthChange: (maxWidth: string | undefined) => void): {
+export declare function useCreateTableContext({ editable, status, layout, defaultColumnWidth, }: UseCreateTableContextOptions): {
     editable: boolean;
     status: ControlStatus | undefined;
     layout: TableLayout;
-    defaultColumnWidth: number;
-    onTableMinWidthChange: (minWidth: string | undefined) => void;
-    onTableMaxWidthChange: (maxWidth: string | undefined) => void;
     store: Omit<import('zustand').StoreApi<TableState>, "subscribe"> & {
         subscribe: {
             (listener: (selectedState: TableState, previousSelectedState: TableState) => void): () => void;

package/dist/types/components/Table/TableHead.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef, RefAttributes } from 'react';
+import { ComponentPropsWithoutRef } from 'react';
 import { SortDirection } from '../../utils/sorting.ts';
 /** Properties of the table head component. */
 export interface TableHeadProps extends ComponentPropsWithoutRef<"thead"> {
@@ -20,4 +20,4 @@ export interface TableHeadProps extends ComponentPropsWithoutRef<"thead"> {
     rowProps?: ComponentPropsWithoutRef<"tr"> | ((index: number) => ComponentPropsWithoutRef<"tr">);
 }
 /** Table head component. */
-export declare const TableHead: import('react').ForwardRefExoticComponent<TableHeadProps & RefAttributes<HTMLTableSectionElement>>;
+export declare const TableHead: import('react').ForwardRefExoticComponent<TableHeadProps & import('react').RefAttributes<HTMLTableSectionElement>>;

package/dist/types/components/Table/columnUtils.d.ts

@@ -0,0 +1,35 @@
+import { ComponentRef, ReactNode, RefAttributes } from 'react';
+import { TableCell } from './TableCell.tsx';
+import { TableColumnProps } from './TableColumn.tsx';
+/** Representation of a table column in object notation. */
+export type TableColumnObject = Omit<TableColumnProps & RefAttributes<ComponentRef<typeof TableCell>>, "children"> & {
+    subColumns: TableColumnObject[];
+};
+/** Gets the list of columns from the head's `children`. */
+export declare function columnsFromChildren(children: ReactNode): TableColumnObject[];
+/** Total number of table rows of the head. */
+export declare function numberOfRows(columns: TableColumnObject[]): number;
+/** Total number of (leaf) table cells of the head. */
+export declare function numberOfColumns(columns: TableColumnObject[]): number;
+/** List of columns of the row with provided index. */
+export declare function columnsOfRow(columns: TableColumnObject[], index: number): TableColumnObject[];
+/** List of "leaf" columns (columns with no children, i.e. the "bottom" ones). */
+export declare function leafColumns(columns: TableColumnObject[]): TableColumnObject[];
+/** Minimum table width. */
+export declare function tableMinWidth(leaves: TableColumnObject[], defaultColumnWidth: number): string;
+/** Maximum table width. */
+export declare function tableMaxWidth(leaves: TableColumnObject[], defaultColumnWidth: number): string | undefined;
+/** Returns the widths of all columns when in "fixed" layout. */
+export declare function columnWidths(leaves: TableColumnObject[], defaultColumnWidth: number): string[];
+/** Width of a column in "fixed" layout. */
+export declare function columnWidth(column: TableColumnObject, defaultColumnsMinWidth: number): number;
+/** Left-most columns. */
+export declare function leftMostColumns(columns: TableColumnObject[]): TableColumnObject[];
+/** Right-most columns. */
+export declare function rightMostColumns(columns: TableColumnObject[]): TableColumnObject[];
+/** Left-most leaf column. */
+export declare function leftMostLeafColumn(column: TableColumnObject): TableColumnObject;
+/** Right-most leaf column. */
+export declare function rightMostLeafColumn(column: TableColumnObject): TableColumnObject;
+/** Offsets (`left`/`right` CSS properties) to provide to sticky columns. */
+export declare function stickyColumnOffsets(leaves: TableColumnObject[], defaultColumnWidth: number): (number | undefined)[];

package/dist/types/components/Toast/ToastProvider.d.ts

@@ -1,9 +1,10 @@
 import { Toast as ToastPrimitive } from 'radix-ui';
 import { ComponentPropsWithoutRef } from 'react';
 /** Direction of pointer swipe that should close the toast */
-export type ToastSwipeDirection = "up" | "down" | "left" | "right";
+export type ToastSwipeDirection = "left" | "right";
 /** Properties of the toast provider. */
 export interface ToastProviderProps extends ComponentPropsWithoutRef<typeof ToastPrimitive.Provider> {
+    swipeDirection?: ToastSwipeDirection;
 }
 /**
  * The provider that wraps the toasts and their viewport. It usually wraps the

package/dist/types/components/Toast/ToastViewport.d.ts

@@ -1,7 +1,15 @@
 import { Toast as ToastPrimitive } from 'radix-ui';
 import { ComponentPropsWithoutRef } from 'react';
+/** Position of the viewport. */
+export type ToastViewportPosition = "left" | "right";
 /** Properties of the toast viewport component. */
 export interface ToastViewportProps extends ComponentPropsWithoutRef<typeof ToastPrimitive.Viewport> {
+    /**
+     * Position of the viewport.
+     *
+     * @default "right"
+     */
+    position?: ToastViewportPosition;
 }
 /**
  * The fixed area where toasts appear. Users can jump to the viewport by

package/dist/types/index.d.ts

@@ -37,6 +37,7 @@ export * from './components/Input';
 export * from './components/Keybinds';
 export * from './components/Keyboard';
 export * from './components/Label';
+export * from './components/Layer';
 export * from './components/Link';
 export * from './components/Mark';
 export * from './components/MenuList';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ostack.tech/ui",
   "description": "ostack/UI component library.",
-  "version": "0.11.3",
+  "version": "0.12.1",
   "homepage": "https://ui.ostack.tech/",
   "author": {
     "name": "Opensoft",
@@ -43,13 +43,13 @@
   },
   "dependencies": {
     "@fortawesome/react-fontawesome": "^3.2.0",
-    "@tanstack/react-virtual": "^3.13.18",
+    "@tanstack/react-virtual": "^3.13.19",
     "from-exponential": "^1.1.1",
     "radix-ui": "^1.4.3",
-    "react-day-picker": "^9.13.2",
-    "react-error-boundary": "^6.1.0",
+    "react-day-picker": "^9.14.0",
+    "react-error-boundary": "^6.1.1",
     "react-number-format": "^5.4.4",
-    "react-to-print": "^3.2.0",
+    "react-to-print": "^3.3.0",
     "tinykeys": "^3.0.0"
   },
   "peerDependencies": {

package/scss/components/CommandMenu/_CommandMenu-variables.scss

@@ -17,7 +17,6 @@ $command-menu-dialog-box-shadow: $dialog-box-shadow !default;
 $command-menu-dialog-animation-transform: $dialog-animation-transform !default;
 $command-menu-dialog-animation-duration: $dialog-animation-duration !default;
 $command-menu-dialog-animation-timing-function: $dialog-animation-timing-function !default;
-$command-menu-dialog-z-index: $dialog-z-index !default;
 
 $command-menu-dialog-sm-width: $dialog-sm-width !default;
 $command-menu-dialog-md-width: $dialog-md-width !default;

package/scss/components/CommandMenu/_CommandMenu.scss

@@ -25,8 +25,6 @@
   }
 
   &__dialog {
-    z-index: $command-menu-dialog-z-index;
-
     #{$command-menu} {
       box-shadow: $command-menu-dialog-box-shadow;
     }

package/scss/components/DataTable/_DataTable.scss

@@ -42,7 +42,8 @@
 
   // Rows per page, pagination
   &__rows-per-page,
-  &__pagination {
+  &__pagination,
+  &__pagination-label {
     display: inline-flex;
     align-items: center;
   }
@@ -61,9 +62,9 @@
   }
 
   &__pagination-label {
-    display: flex;
     flex-wrap: wrap;
-    align-items: center;
+    margin-top: 0;
+    margin-bottom: 0;
     font-size: $data-table-pagination-font-size;
     line-height: $data-table-pagination-line-height;
     font-weight: $data-table-pagination-font-weight;

package/scss/components/Dialog/_Dialog-variables.scss

@@ -9,7 +9,6 @@ $dialog-box-shadow: var(--#{$prefix}box-shadow-lg) !default;
 $dialog-animation-transform: translateY(-5px) scale(0.97) !default;
 $dialog-animation-duration: 0.15s !default;
 $dialog-animation-timing-function: ease-out !default;
-$dialog-z-index: var(--#{$prefix}z-index-dialog) !default;
 
 $dialog-sm-width: 300px !default;
 $dialog-md-width: 500px !default;

package/scss/components/Dialog/_Dialog.scss

@@ -10,7 +10,6 @@
   $overlay: ".#{$prefix}overlay";
 
   box-shadow: $dialog-box-shadow;
-  z-index: $dialog-z-index;
 
   @include declare-var(
     --#{$prefix}animation-transform,

package/scss/components/DropdownMenu/_DropdownMenu-variables.scss

@@ -1,3 +1 @@
 @use "../../scss/base-variables" as *;
-
-$dropdown-menu-z-index: var(--#{$prefix}z-index-dropdown) !default;

package/scss/components/DropdownMenu/_DropdownMenu.scss

@@ -12,7 +12,6 @@
 
   max-width: var(--radix-dropdown-menu-content-available-width);
   max-height: var(--radix-dropdown-menu-content-available-height);
-  z-index: $dropdown-menu-z-index;
 
   &__arrow {
     @extend %#{$prefix}popover__arrow;

package/scss/components/Overlay/_Overlay-variables.scss

@@ -11,4 +11,3 @@ $overlay-animation-duration: var(--#{$prefix}animation-fade-duration) !default;
 $overlay-animation-timing-function: var(
   --#{$prefix}animation-fade-timing-function
 ) !default;
-$overlay-z-index: var(--#{$prefix}z-index-overlay) !default;

package/scss/components/Overlay/_Overlay.scss

@@ -13,7 +13,6 @@
   padding: $overlay-padding-y $overlay-padding-x;
 
   overflow-y: auto;
-  z-index: $overlay-z-index;
   background-color: $overlay-background-color;
 
   &[data-state="open"] {

package/scss/components/Table/_Table-variables.scss

@@ -54,9 +54,7 @@ $table-control-focus-status-border-color: $control-focus-status-border-color !de
 $table-control-focus-status-box-shadow: $control-focus-status-box-shadow !default;
 
 // Head/Foot - Stuck
-$table-head-foot-stuck-z-index: calc(
-  var(--#{$prefix}z-index-docked) + 1
-) !default;
+$table-head-foot-stuck-z-index: var(--#{$prefix}z-index-docked) !default;
 $table-head-foot-stuck-shadow-size: 8px !default;
 $table-head-foot-stuck-shadow-color: var(--#{$prefix}neutral-a3) !default;
 
@@ -240,7 +238,7 @@ $table-cell-empty-background-image: repeating-linear-gradient(
 $table-cell-empty-background-size: 10px 10px !default;
 
 // Cell - Stuck
-$table-cell-stuck-z-index: var(--#{$prefix}z-index-docked) !default;
+$table-cell-stuck-z-index: calc(var(--#{$prefix}z-index-docked) - 1) !default;
 $table-cell-stuck-shadow-size: $table-head-foot-stuck-shadow-size !default;
 $table-cell-stuck-shadow-color: $table-head-foot-stuck-shadow-color !default;
 

package/scss/components/Table/_Table.scss

@@ -485,10 +485,11 @@
     }
 
     &[data-sticky="left"] {
-      border-right: 0;
-      left: 0;
-      box-shadow: inset calc($table-cell-border-width * -1) 0 0 0
-        var(--#{$prefix}table-cell-border-color);
+      left: var(--#{$prefix}table-cell-sticky-offset, 0);
+      &[data-stuck]:not([data-framed]) {
+        box-shadow: $table-cell-border-width 0 0 0
+          var(--#{$prefix}table-cell-border-color);
+      }
 
       &[data-stuck]::before {
         right: -$table-cell-stuck-shadow-size;
@@ -501,10 +502,11 @@
     }
 
     &[data-sticky="right"] {
-      border-left-width: 0;
-      right: 0;
-      box-shadow: calc($table-cell-border-width * -1) 0 0 0
-        var(--#{$prefix}table-cell-border-color);
+      right: var(--#{$prefix}table-cell-sticky-offset, 0);
+      &[data-stuck] {
+        box-shadow: calc($table-cell-border-width * -1) 0 0 0
+          var(--#{$prefix}table-cell-border-color);
+      }
 
       &[data-stuck]::before {
         left: -$table-cell-stuck-shadow-size;

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

@@ -17,7 +17,7 @@ $tabs-tab-font-size: var(--#{$prefix}font-size-sm) !default;
 $tabs-tab-line-height: var(--#{$prefix}line-height-sm) !default;
 
 // Tab - Focus
-$tabs-tab-focus-z-index: var(--#{$prefix}z-index-focused) !default;
+$tabs-tab-focus-z-index: 1 !default;
 
 // Tab - Disabled
 $tabs-tab-disabled-opacity: 0.5 !default;
@@ -197,8 +197,8 @@ $tabs-scroll-button-overflow-indicator-extra-height: 4px !default;
 $tabs-scroll-button-overflow-indicator-color: var(
   --#{$prefix}neutral-a8
 ) !default;
-$tabs-scroll-button-overflow-indicator-z-index: calc(
-  var(--#{$prefix}z-index-focused) + 1
+$tabs-scroll-button-overflow-indicator-z-index: var(
+  --#{$prefix}z-index-docked
 ) !default;
 
 // Tab content label

package/scss/components/Toast/_Toast.scss

@@ -29,17 +29,27 @@
         0 0 0 2px $neutral-12;
     }
 
+    &[data-swipe-direction="left"] {
+      @include declare-var(
+        --#{$prefix}toast-start-x,
+        calc(-100% - var(--#{$prefix}toast-viewport-padding))
+      );
+    }
+
+    &[data-swipe-direction="right"] {
+      @include declare-var(
+        --#{$prefix}toast-start-x,
+        calc(100% + var(--#{$prefix}toast-viewport-padding))
+      );
+    }
+
     &[data-state="open"] {
       @keyframes #{$prefix}toast-open {
         from {
-          transform: translateX(
-            calc(100% + var(--#{$prefix}toast-viewport-padding))
-          );
+          transform: translateX(var(--#{$prefix}toast-start-x));
         }
         #{math.div($toast-animation-duration * 100%, $total-animation-duration)} {
-          transform: translateX(
-            calc(100% + var(--#{$prefix}toast-viewport-padding))
-          );
+          transform: translateX(var(--#{$prefix}toast-start-x));
         }
         to {
           transform: translateX(0);
@@ -78,19 +88,16 @@
 
     &[data-swipe="end"] {
       animation: #{$prefix}toast-swipe-close $total-animation-duration ease-out;
+
       @keyframes #{$prefix}toast-swipe-close {
         from {
           transform: translateX(var(--radix-toast-swipe-end-x));
         }
         #{math.div($toast-animation-duration * 100%, $total-animation-duration)} {
-          transform: translateX(
-            calc(100% + var(--#{$prefix}toast-viewport-padding))
-          );
+          transform: translateX(var(--#{$prefix}toast-start-x));
         }
         to {
-          transform: translateX(
-            calc(100% + var(--#{$prefix}toast-viewport-padding))
-          );
+          transform: translateX(var(--#{$prefix}toast-start-x));
         }
       }
     }
@@ -142,7 +149,13 @@
   &__viewport {
     position: fixed;
     bottom: 0;
-    right: 0;
+
+    &[data-position="left"] {
+      left: 0;
+    }
+    &[data-position="right"] {
+      right: 0;
+    }
 
     display: flex;
     flex-direction: column;
@@ -154,7 +167,6 @@
     outline: none;
 
     list-style: none;
-    z-index: $z-index-toast;
   }
 
   &__icon {

package/scss/components/Tooltip/_Tooltip-variables.scss

@@ -15,7 +15,6 @@ $tooltip-background-color: var(--#{$prefix}neutral-12) !default;
 $tooltip-color: var(--#{$prefix}neutral-1) !default;
 $tooltip-box-shadow: var(--#{$prefix}box-shadow-sm) !default;
 
-$tooltip-z-index: var(--#{$prefix}z-index-tooltip) !default;
 $tooltip-animation-duration: var(--#{$prefix}animation-fade-duration) !default;
 $tooltip-animation-timing-function: var(
   --#{$prefix}animation-fade-timing-function

package/scss/components/Tooltip/_Tooltip.scss

@@ -22,8 +22,6 @@
   color: $tooltip-color;
   box-shadow: $tooltip-box-shadow;
 
-  z-index: $tooltip-z-index;
-
   &[data-state="delayed-open"] {
     @include accessible-animation(
       $animation-fade-in $tooltip-animation-duration