@redseed/redseed-ui-tailwindcss 7.30.2 → 7.32.0

package/components/card.css

@@ -100,6 +100,13 @@
     @apply focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-border-primary outline-hidden;
 }
 
+/* Persistent selection ring for the pressed/current state. The ring (a shape
+   boundary, present vs absent) conveys the active state without relying on
+   colour alone (WCAG 1.4.1). */
+.rsui-card__action-layer--active {
+    @apply ring-2 ring-offset-2 ring-brand-500;
+}
+
 .rsui-card__action-layer-label {
     @apply sr-only;
 }

package/components/column_picker.css

@@ -1,3 +1,14 @@
+/* The picker uses a ButtonTertiary trigger on desktop and a ButtonSecondary
+   trigger on mobile so the affordance reads as tappable on touch devices
+   (where the tertiary's hover border never fires). */
+.rsui-column-picker__trigger--desktop {
+    @apply hidden md:inline-flex;
+}
+
+.rsui-column-picker__trigger--mobile {
+    @apply inline-flex md:hidden;
+}
+
 .rsui-column-picker__count {
     @apply inline-flex items-center px-1.5 ml-1 text-xs rounded-md bg-background-disabled text-text-secondary;
 }
@@ -7,25 +18,30 @@
 }
 
 .rsui-column-picker__item {
-    @apply flex items-center gap-2.5 px-2 py-1.5 rounded-md cursor-pointer text-sm text-text-primary;
+    @apply flex items-center px-2 py-1.5 rounded-md cursor-pointer text-sm text-text-primary;
     @apply hover:bg-background-secondary;
     @apply focus-visible:bg-background-secondary focus-visible:outline-none;
 }
 
-.rsui-column-picker__check {
-    @apply shrink-0 flex items-center justify-center;
-    @apply w-4 h-4 rounded border border-border-primary bg-background-primary;
-    @apply transition-colors;
+.rsui-column-picker__item--disabled {
+    @apply cursor-default text-text-disabled;
+    @apply hover:bg-transparent;
 }
 
-.rsui-column-picker__check svg {
-    @apply w-3 h-3 stroke-[3] text-text-primary;
+/* The checkbox is presentational (the row is the control), so the wrapper
+   carries the row's pointer cursor across the whole item. */
+.rsui-column-picker__checkbox {
+    @apply contents;
 }
 
-.rsui-column-picker__check--on {
-    @apply border-text-primary;
+/* Vertically centre the checkbox against its single-line label in the dense
+   menu row (the form-field default top-aligns for multi-line labels). */
+.rsui-column-picker__item .rsui-form-field-checkbox__checkbox {
+    @apply items-center;
 }
 
-.rsui-column-picker__label {
-    @apply leading-none;
+/* Required columns pass `disabled` to the checkbox (native locked styling);
+   also grey the label so the whole row reads as locked. */
+.rsui-column-picker__item--disabled .rsui-form-field-checkbox__label {
+    @apply text-text-disabled;
 }

package/components/form_field_checkbox.css

@@ -20,5 +20,51 @@
 }
 
 .rsui-form-field-checkbox__check svg {
-    @apply size-full relative z-1 pointer-events-none;
+    @apply size-full relative z-1 pointer-events-none stroke-[2.5] origin-center;
+    /* Short, cute draw-on: the tick strokes itself in with a tiny pop.
+       dasharray is set a touch above the check path length so the resting
+       state has no gap. Disabled under reduced-motion below. */
+    stroke-dasharray: 30;
+    animation: rsui-checkbox-tick 200ms ease-out;
+}
+
+@keyframes rsui-checkbox-tick {
+    0% { stroke-dashoffset: 30; transform: scale(0.8); }
+    60% { transform: scale(1.06); }
+    100% { stroke-dashoffset: 0; transform: scale(1); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .rsui-form-field-checkbox__check svg {
+        animation: none;
+        stroke-dasharray: none;
+    }
+}
+
+/* Smaller variants — for dense surfaces like the table column picker dropdown.
+   Sizes follow the system scale: sm = 16px, xs = 12px (default is 24px).
+   Declared after the base rules so they win on equal specificity; the radius
+   is also set on the input, since the input draws the visible bordered box. */
+.rsui-form-field-checkbox__check--sm {
+    @apply size-4 rounded-md;
+}
+
+.rsui-form-field-checkbox__check--sm input[type="checkbox"] {
+    @apply rounded-md;
+}
+
+.rsui-form-field-checkbox__label--sm {
+    @apply leading-5 text-sm;
+}
+
+.rsui-form-field-checkbox__check--xs {
+    @apply size-3 rounded;
+}
+
+.rsui-form-field-checkbox__check--xs input[type="checkbox"] {
+    @apply rounded;
+}
+
+.rsui-form-field-checkbox__label--xs {
+    @apply leading-4 text-xs;
 }

package/components/loader.css

@@ -17,3 +17,7 @@
 .rsui-loader--white path {
     @apply fill-background-primary;
 }
+
+.rsui-loader__label {
+    @apply sr-only;
+}

package/components/message_box.css

@@ -36,4 +36,8 @@
 
 .rsui-message-box__close-icon {
     @apply size-10 cursor-pointer rounded-lg flex items-center justify-center hover:bg-border-secondary transition duration-200;
+    /* Reset native <button> chrome so it matches the prior inline affordance ... */
+    @apply bg-transparent border-0 p-0;
+    /* ... while keeping a visible keyboard focus ring (lib convention). */
+    @apply outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-border-primary;
 }

package/components/meta_info.css

@@ -16,6 +16,10 @@
 
 .rsui-meta-info__help {
     @apply flex items-center justify-center text-text-secondary size-4 cursor-pointer;
+    /* Reset native <button> chrome so it matches the prior inline affordance ... */
+    @apply bg-transparent border-0 p-0 rounded outline-hidden;
+    /* ... while keeping a visible keyboard focus ring (lib convention). */
+    @apply focus-visible:ring-offset-2 focus-visible:ring-2 focus-visible:ring-border-primary;
 }
 
 .rsui-meta-info__value {

package/components/metric_card.css

@@ -31,4 +31,10 @@
 
 .rsui-metric-card__label {
     @apply text-text-tertiary text-base font-semibold;
+}
+
+/* Active/selected toggle state. The Card action layer supplies the non-colour
+   selection ring (WCAG 1.4.1); the brand number is colour reinforcement only. */
+.rsui-metric-card--active .rsui-metric-card__number {
+    @apply text-text-brand;
 }

package/components/section_header.css

@@ -24,10 +24,15 @@
 }
 
 .rsui-section-header__title {
-    @apply text-2xl font-bold line-clamp-2 md:line-clamp-1 text-text-primary;
     @apply flex items-center gap-space-xs;
 }
 
+.rsui-section-header__title-text {
+    @apply text-2xl font-bold line-clamp-2 md:line-clamp-1 text-text-primary;
+    /* Reset heading UA margins so an <h1>-<h6> title matches the previous <div> */
+    @apply m-0 min-w-0;
+}
+
 .rsui-section-header__badge {
     @apply ml-space-xs flex items-center;
 }

package/components/section_slider.css

@@ -10,7 +10,7 @@
     @apply bg-brand-600;
 }
 
-.rsui-section-slider--featured .rsui-section-header__title {
+.rsui-section-slider--featured .rsui-section-header__title-text {
     @apply text-white;
 }
 

package/components/skeleton.css

@@ -2,6 +2,10 @@
     @apply w-full;
 }
 
+.rsui-skeleton__label {
+    @apply sr-only;
+}
+
 .rsui-skeleton--full {
     @apply w-full;
 }

package/components/th.css

@@ -48,14 +48,44 @@
 }
 
 .rsui-th--sortable {
-    @apply cursor-pointer;
-    @apply focus-visible:outline-2 focus-visible:outline-border-primary;
+    /* Strip cell-level padding so the inner button can own the full click area.
+       Without this, pointer events on the th padding area don't reach the button,
+       breaking the advertised cursor-pointer target. Button gets matching padding. */
+    @apply cursor-pointer p-0;
 }
 
 .rsui-th__content {
     @apply inline-flex gap-1 items-center;
 }
 
+/* Sortable header trigger — a real <button> reset to match the header text,
+   so it reads as activatable to AT while looking identical to a plain header.
+   flex + w-full + py-3/px-5 make the button fill the entire cell (including the
+   padding area that .rsui-th strips above), so every pixel of the cell is a
+   valid click target. Focus ring lives here (the th itself is no longer focusable).
+   Default justify-start matches the base left-aligned header. */
+.rsui-th__button {
+    @apply flex w-full gap-1 items-center justify-start;
+    @apply py-3 px-5 cursor-pointer m-0;
+    @apply focus-visible:outline-2 focus-visible:outline-border-primary;
+    font: inherit;
+    color: inherit;
+    background: none;
+    border: 0;
+    text-align: inherit;
+}
+
+/* Honor column alignment inside sortable-header buttons.
+   The full-width button keeps the click area; justify-* repositions
+   the label+icon group within that area to match the column alignment. */
+.rsui-th--center .rsui-th__button {
+    @apply justify-center;
+}
+
+.rsui-th--right .rsui-th__button {
+    @apply justify-end;
+}
+
 .rsui-th__sort {
     @apply shrink-0 flex items-center justify-center;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redseed/redseed-ui-tailwindcss",
-    "version": "7.30.2",
+    "version": "7.32.0",
     "description": "RedSeed UI Tailwindcss",
     "main": "index.js",
     "style": "index.css",