Add sticky-cell tailwind utility

Author: acelaya

CHANGELOG.md

@@ -4,6 +4,23 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
 
+## [Unreleased]
+### Added
+* Add `sticky-cell` tailwind utility.
+
+### Changed
+* *Nothing*
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* *Nothing*
+
+
 ## [0.9.3] - 2025-05-09
 ### Added
 * *Nothing*

src/tailwind/form/CloseButton.tsx

@@ -6,15 +6,17 @@ import type { FC, HTMLProps } from 'react';
 export type CloseButtonProps = {
   label?: string;
   onClick?: HTMLProps<HTMLButtonElement>['onClick'];
+  className?: string;
 };
 
-export const CloseButton: FC<CloseButtonProps> = ({ onClick, label = 'Close' }) => (
+export const CloseButton: FC<CloseButtonProps> = ({ onClick, className, label = 'Close' }) => (
   <button
     type="button"
     onClick={onClick}
     className={clsx(
       'tw:opacity-50 tw:highlight:opacity-80 tw:transition-opacity',
       'tw:rounded-md tw:focus-ring',
+      className,
     )}
     aria-label={label}
   >

src/tailwind/tailwind.preset.css

@@ -197,3 +197,45 @@
         @slot;
     }
 }
+
+/* For sticky-positioned cells with a background */
+@utility sticky-cell-base {
+    @apply tw:z-1 tw:relative tw:sticky;
+    @apply tw:before:absolute tw:before:bg-lm-table-border tw:dark:before:bg-dm-table-border tw:before:-z-2;
+    @apply tw:after:absolute tw:after:bg-lm-primary tw:dark:after:bg-dm-primary tw:after:-z-1;
+
+    &:before, &:after {
+        content: '';
+    }
+    &:first-child:after {
+        left: 0;
+    }
+}
+
+@utility sticky-cell {
+    @apply tw:sticky-cell-base;
+
+    &:before {
+        inset: -1px 0 -1px 0;
+    }
+    &:first-child:before {
+        left: 0;
+    }
+    &:after {
+        inset: 0 0 0 0;
+    }
+}
+
+@utility sticky-cell-separated {
+    @apply tw:sticky-cell-base;
+
+    &:before {
+        inset: -1px -1px -1px 0;
+    }
+    &:first-child:before {
+        left: -1px;
+    }
+    &:after {
+        inset: 0 0 0 1px;
+    }
+}