@redseed/redseed-ui-tailwindcss 7.20.4 → 7.21.1

package/components/breadcrumbs.css

@@ -1,5 +1,5 @@
-.rsui-breadcrumbs {
-    @apply flex flex-wrap items-center gap-x-2 gap-y-2;
+.rsui-breadcrumbs__list {
+    @apply flex flex-wrap items-center gap-x-2 gap-y-2 list-none m-0 p-0;
 }
 
 .rsui-breadcrumbs__item {
@@ -12,3 +12,7 @@
 .rsui-breadcrumbs__item--action {
     @apply cursor-pointer hover:text-text-primary transition-colors duration-200;
 }
+
+.rsui-breadcrumbs__item--action span {
+    @apply rounded focus-visible:ring-offset-2 focus-visible:ring-2 focus-visible:ring-border-primary;
+}

package/components/button_card.css

@@ -3,7 +3,7 @@
 }
 
 .rsui-button-card--disabled {
-    @apply hover:border-border-primary;
+    @apply pointer-events-none;
     @apply focus-visible:ring-0;
 }
 

package/components/button_group_item.css

@@ -3,19 +3,22 @@
     @apply inline-flex justify-center items-center select-none outline-hidden p-2 font-semibold text-sm transition cursor-pointer;
 
     /* default shape */
-    @apply first:rounded-l-lg last:rounded-r-lg first:border-l border-r border-y ring-0;
+    @apply first:rounded-l-lg last:rounded-r-lg border-l border-r border-y ring-0;
 
     /* default colors */
     @apply text-button-secondary bg-background-primary border-button-secondary;
+    @apply border-l-transparent first:border-l-button-secondary;
 
     /* default hover state */
     @apply hover:text-button-secondary-hover hover:bg-background-primary hover:border-button-secondary-hover;
+    @apply hover:border-l-transparent first:hover:border-l-button-secondary-hover;
 
     /* default focus state */
-    @apply focus-visible:ring-button-secondary focus-visible:border-button-secondary;
+    @apply focus-visible:relative focus-visible:z-10 focus-visible:border-l focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-button-secondary focus-visible:border-button-secondary;
 
     /* default active state */
     @apply active:bg-background-primary active:border-button-secondary-active;
+    @apply active:border-l-transparent first:active:border-l-button-secondary-active;
 
     /* default disabled state */
     @apply disabled:bg-button-disabled disabled:text-text-disabled;

package/components/button_slot.css

@@ -57,11 +57,21 @@
     @apply text-sm px-1.5 py-1.5 gap-1;
 }
 
+/* modifier xs size with icon */
+.rsui-button-slot--xs-icon {
+    @apply p-1.5;
+}
+
 /* modifier sm size */
 .rsui-button-slot--sm {
     @apply text-sm px-3 py-2 gap-1;
 }
 
+/* modifier sm size with icon */
+.rsui-button-slot--sm-icon {
+    @apply p-2;
+}
+
 /* modifier md size */
 .rsui-button-slot--md {
     @apply text-sm leading-5 px-3.5 py-2.5;

package/components/card_group.css

@@ -51,7 +51,10 @@
 
 /* Reorderable: drag handle and drag states */
 .rsui-card-group__drag-handle {
-    @apply absolute right-2 p-1 rounded cursor-grab text-grey-400 hover:text-grey-600 transition-colors z-10;
+    @apply absolute right-2 p-2 rounded cursor-grab text-grey-400 hover:text-grey-600 transition-colors z-10;
+
+    /* focus state */
+    @apply focus-visible:ring-offset-2 focus-visible:ring-2 focus-visible:ring-border-primary;
 }
 
 .rsui-card-group__drag-handle--top {

package/components/card_header.css

@@ -10,6 +10,7 @@
 
 .rsui-card-header--clickable {
     @apply cursor-pointer;
+    @apply focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-border-primary outline-hidden rounded-t-xl;
 }
 
 .rsui-card-header--divider {

package/components/dropdown_option.css

@@ -4,4 +4,7 @@
     @apply w-full inline-flex items-center whitespace-nowrap will-change-transform gap-1.5;
     @apply hover:bg-background-primary-invert;
     @apply truncate overflow-hidden;
+
+    /* focus state */
+    @apply focus-visible:bg-background-primary-invert focus-visible:outline-hidden;
 }

package/components/feed_item.css

@@ -4,6 +4,9 @@
 
 .rsui-feed-item--clickable {
     @apply cursor-pointer;
+
+    /* focus state */
+    @apply focus-visible:ring-offset-2 focus-visible:ring-2 focus-visible:ring-border-primary;
 }
 
 .rsui-feed-item--padded {
@@ -18,6 +21,10 @@
     @apply absolute -bottom-0.5 -right-0.5 flex items-center justify-center size-4;
 }
 
+.rsui-feed-item__avatar-indicator-label {
+    @apply sr-only;
+}
+
 .rsui-feed-item__avatar-indicator-dot {
     @apply size-4 rounded-full bg-border-primary border-2 border-background-primary;
 }

package/components/form_field_checkbox.css

@@ -18,13 +18,13 @@
 .rsui-form-field-checkbox__check input[type="checkbox"] {
     @apply appearance-none absolute inset-0 z-0 rounded-lg transition focus:outline-hidden cursor-pointer;
     @apply w-full h-full text-text-primary border border-border-primary text-transparent bg-none;
-    @apply focus:ring-3 focus:ring-border-primary focus:border-border-primary;
+    @apply focus-visible:ring-3 focus-visible:ring-border-primary focus-visible:border-border-primary;
     @apply invalid:border-border-error invalid:ring-0;
     @apply disabled:text-text-disabled disabled:bg-background-disabled disabled:cursor-default;
 }
 
 .rsui-form-field-checkbox__check svg {
-    @apply size-full relative z-1;
+    @apply size-full relative z-1 pointer-events-none;
 }
 
 .rsui-form-field-checkbox .rsui-form-field-slot__label::after {

package/components/form_field_combobox.css

@@ -27,6 +27,7 @@
     @apply w-full border rounded-lg ring-0;
     @apply bg-background-primary placeholder-text-secondary border-border-primary;
     @apply has-[:focus]:border-border-primary;
+    @apply has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-border-primary has-[:focus-visible]:ring-offset-2;
     @apply has-[:user-invalid]:border-border-error has-[:user-invalid]:ring-0;
     @apply has-[:disabled]:text-text-disabled has-[:disabled]:bg-background-disabled has-[:disabled]:border-border-disabled has-[:disabled]:ring-0;
 }
@@ -100,6 +101,10 @@
     @apply size-4 border-2 border-border-primary border-t-text-secondary rounded-full animate-spin;
 }
 
+.rsui-form-field-combobox__live-region {
+    @apply sr-only;
+}
+
 .rsui-form-field-combobox input[type='text'] {
     @apply flex-1;
     @apply text-base text-text-primary transition py-3 px-4 pr-12 outline-hidden focus:outline-hidden;

package/components/form_field_password.css

@@ -1,4 +1,9 @@
 .rsui-form-field-password__icon {
-    @apply size-5 text-text-secondary;
+    @apply min-w-6 min-h-6 flex items-center justify-center text-text-secondary;
+    @apply rounded focus-visible:ring-offset-2 focus-visible:ring-2 focus-visible:ring-border-primary;
+}
+
+.rsui-form-field-password__icon svg {
+    @apply size-5;
 }
 

package/components/form_field_radio_group.css

@@ -15,7 +15,7 @@
 }
 
 .rsui-form-field-radio-group__item-native-control {
-    @apply absolute opacity-0 pointer-events-none w-0 h-0;
+    @apply absolute opacity-0 inset-0 cursor-pointer;
 }
 
 .rsui-form-field-radio-group__control {

package/components/form_field_select.css

@@ -90,6 +90,10 @@
     @apply not-sr-only;
 }
 
+.rsui-form-field-select__live-region {
+    @apply sr-only;
+}
+
 .rsui-form-field-select--mobile option {
     @apply block;
 }

package/components/form_field_text.css

@@ -8,6 +8,7 @@
     @apply w-full border rounded-lg ring-0;
     @apply bg-background-primary placeholder-text-secondary border-border-primary;
     @apply has-[:focus]:border-border-primary;
+    @apply has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-border-primary has-[:focus-visible]:ring-offset-2;
     @apply has-[:user-invalid]:border-border-error has-[:user-invalid]:ring-0;
     @apply has-[:disabled]:text-text-disabled has-[:disabled]:bg-background-disabled has-[:disabled]:border-border-disabled has-[:disabled]:ring-0;
 }

package/components/form_field_textarea.css

@@ -7,6 +7,7 @@
     @apply py-3 px-4 outline-hidden focus:outline-hidden;
     @apply text-text-primary bg-background-primary placeholder-text-secondary border-border-primary;
     @apply focus:border-border-primary;
+    @apply focus-visible:ring-2 focus-visible:ring-border-primary focus-visible:ring-offset-2;
     @apply invalid:border-border-error invalid:ring-0;
     @apply disabled:text-text-disabled disabled:bg-background-disabled disabled:border-border-disabled disabled:ring-0;
     -ms-overflow-style: none;

package/components/form_field_uploader.css

@@ -45,6 +45,7 @@
 }
 .rsui-form-field-uploader__action-icon {
     @apply size-6 cursor-pointer text-text-secondary;
+    @apply rounded focus-visible:ring-2 focus-visible:ring-border-primary focus-visible:ring-offset-2;
 }
 .rsui-form-field-uploader__action-icon svg {
     @apply size-6 stroke-2;

package/components/link_slot.css

@@ -11,7 +11,7 @@
 }
 
 .rsui-link-slot--disabled {
-    @apply opacity-30 cursor-default pointer-events-none;
+    @apply opacity-30 cursor-default;
 }
 
 .rsui-link-slot--xs {

package/components/linked_list_item.css

@@ -27,6 +27,10 @@
     @apply font-semibold text-base text-text-primary leading-normal;
 }
 
+.rsui-linked-list-item__sr-only {
+    @apply sr-only;
+}
+
 .rsui-linked-list-item__body {
     @apply font-normal text-sm text-text-secondary leading-normal;
 }

package/components/list_item.css

@@ -4,6 +4,9 @@
 
 .rsui-list-item--clickable {
     @apply cursor-pointer;
+
+    /* focus state */
+    @apply focus-visible:ring-offset-2 focus-visible:ring-2 focus-visible:ring-border-primary;
 }
 
 .rsui-list-item--avatar {

package/components/pagination_item.css

@@ -2,6 +2,9 @@
     @apply inline-flex items-center justify-center overflow-hidden select-none;
     @apply min-w-9 w-fit h-7 p-1 rounded-lg cursor-pointer transition;
     @apply bg-background-primary hover:bg-background-primary-invert text-text-secondary text-sm;
+
+    /* focus state */
+    @apply focus-visible:ring-offset-2 focus-visible:ring-2 focus-visible:ring-border-primary;
 }
 
 .rsui-pagination-item--active {

package/components/progress_tracker_step.css

@@ -36,6 +36,7 @@
 
 .rsui-progress-tracker-step--clickable {
     @apply cursor-pointer;
+    @apply focus-visible:ring-offset-2 focus-visible:ring-2 focus-visible:ring-border-primary rounded-lg;
 }
 
 .rsui-progress-tracker-step__indicator {

package/components/th.css

@@ -49,6 +49,7 @@
 
 .rsui-th--sortable {
     @apply cursor-pointer;
+    @apply focus-visible:outline-2 focus-visible:outline-border-primary;
 }
 
 .rsui-th__content {

package/components/toggle.css

@@ -39,7 +39,7 @@
     /* default colors */
     @apply bg-background-tertiary-invert border-background-tertiary-invert text-transparent;
     /* focus styles */
-    @apply focus:outline-button-primary;
+    @apply focus-visible:outline-button-primary;
     /* checked styles */
     @apply checked:before:translate-x-full;
     @apply checked:bg-button-primary checked:border-button-primary;

package/components/tooltip.css

@@ -57,7 +57,7 @@
 .rsui-tooltip__content {
     @apply relative px-3 py-2 w-max max-w-60;
     @apply text-sm text-text-on-color bg-background-primary-contrast rounded-lg shadow-lg;
-    @apply pointer-events-none;
+    @apply pointer-events-auto;
 }
 
 /* Arrow */

package/components/tr.css

@@ -6,5 +6,6 @@
 
 .rsui-tr--clickable {
     @apply cursor-pointer hover:bg-background-disabled;
+    @apply focus-visible:bg-background-disabled focus-visible:outline-2 focus-visible:outline-border-primary;
 }
 

package/package.json

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