@lovett/ui 0.2.4 → 0.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lovett/ui",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "private": false,
   "type": "module",
   "description": "Design system primitives, tokens, layouts, and patterns for the Lovett portfolio.",

package/src/thread/actions.tsx

@@ -52,7 +52,7 @@ const QUIET = cn(
   'transition-[background-color,color] duration-[var(--dur-fast)] ease-[var(--ease-out)]',
   'motion-reduce:transition-none',
   'hover:bg-[rgb(var(--surface-overlay))] hover:text-[rgb(var(--foreground))]',
-  'focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus)]',
+  'focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus-inset)]',
   'disabled:cursor-default disabled:opacity-60',
 )
 

package/src/thread/attachments.tsx

@@ -108,7 +108,7 @@ export const QUIET_ICON = cn(
   'transition-[background-color,color] duration-[var(--dur-fast)] ease-[var(--ease-out)]',
   'motion-reduce:transition-none',
   'hover:bg-[rgb(var(--surface-overlay))] hover:text-[rgb(var(--foreground))]',
-  'focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus)]',
+  'focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus-inset)]',
   'disabled:cursor-default disabled:opacity-60',
 )
 
@@ -719,7 +719,7 @@ export function AttachmentGif({ attachment, resolveUrl, className }: AttachmentG
             setPlaying(true)
             void videoRef.current?.play()
           }}
-          className="absolute inset-0 flex items-center justify-center focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus)]"
+          className="absolute inset-0 flex items-center justify-center focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus-inset)]"
           style={{ background: 'rgb(var(--media-scrim-mid))', color: 'rgb(var(--media-on-scrim))' }}
         >
           <Play size={20} strokeWidth={1.75} aria-hidden="true" />
@@ -886,7 +886,7 @@ export function AttachmentImage({
         'transition-[border-color] duration-[var(--dur-fast)] ease-[var(--ease-out)] motion-reduce:transition-none',
         interactive && !showStill && 'hover:border-[rgb(var(--border-strong))]',
         (interactive || showStill) &&
-          'focus-within:outline-none focus-within:[box-shadow:var(--ring-focus)]',
+          'focus-within:outline-none focus-within:[box-shadow:var(--ring-focus-inset)]',
         className,
       )}
       style={{

package/src/thread/comment-body.tsx

@@ -118,7 +118,7 @@ export function CommentBody({ bodyMd, onSelectMention, className }: CommentBodyP
             'motion-reduce:transition-none',
             'border border-[rgb(var(--border))] bg-[rgb(var(--surface-inset))] text-[rgb(var(--accent-ink))]',
             interactive &&
-              'hover:border-[rgb(var(--accent))] hover:bg-[rgb(var(--surface-hover))] focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus)]',
+              'hover:border-[rgb(var(--accent))] hover:bg-[rgb(var(--surface-hover))] focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus-inset)]',
           )}
           style={{
             borderRadius: 'var(--radius-sm)',

package/src/thread/comment.tsx

@@ -329,7 +329,7 @@ function Attachments({
             'border-[rgb(var(--border))] bg-[rgb(var(--surface-inset))] text-[rgb(var(--text-secondary))]',
             'transition-[background-color,border-color] duration-[var(--dur-fast)] ease-[var(--ease-out)] motion-reduce:transition-none',
             'enabled:hover:border-[rgb(var(--border-strong))] enabled:hover:bg-[rgb(var(--surface-hover))]',
-            'focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus)]',
+            'focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus-inset)]',
             'disabled:cursor-default',
           )}
           style={{ borderRadius: 'var(--thread-inner-radius, var(--radius-sm))' }}
@@ -596,7 +596,7 @@ export function CommentItem({
                   className={cn(
                     'min-w-0 truncate text-[14px] font-semibold text-[rgb(var(--foreground))]',
                     'underline-offset-2 hover:underline',
-                    'focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus)]',
+                    'focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus-inset)]',
                   )}
                   style={{ borderRadius: 'var(--radius-xs)' }}
                 >

package/src/thread/link-preview.tsx

@@ -241,7 +241,7 @@ export function LinkPreview({ preview, onHide, className }: LinkPreviewProps) {
                   onClick={() => {
                     setPlaying(true)
                   }}
-                  className="absolute inset-0 flex items-center justify-center focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus)]"
+                  className="absolute inset-0 flex items-center justify-center focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus-inset)]"
                   style={{
                     // diag:contrast-ok — this scrim sits on a PHOTOGRAPH, which
                     // is the one thing check-contrast says it cannot see:
@@ -278,7 +278,7 @@ export function LinkPreview({ preview, onHide, className }: LinkPreviewProps) {
             rel="noopener noreferrer"
             className={cn(
               'group/link block min-w-0 flex-1 no-underline',
-              'focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus)]',
+              'focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus-inset)]',
             )}
             style={{ borderRadius: 'var(--radius-xs)' }}
           >

package/src/thread/rail.tsx

@@ -129,7 +129,7 @@ export function ThreadRail({ collapsed, label, onToggle }: ThreadRailProps) {
           'motion-reduce:transition-none',
           'group-hover/rail:border-[rgb(var(--border-strong))] group-hover/rail:text-[rgb(var(--foreground))]',
           'group-focus-visible/rail:border-[rgb(var(--accent))] group-focus-visible/rail:text-[rgb(var(--accent-ink))]',
-          'group-focus-visible/rail:[box-shadow:var(--ring-focus)]',
+          'group-focus-visible/rail:[box-shadow:var(--ring-focus-inset)]',
           'group-active/rail:scale-[0.96] motion-reduce:group-active/rail:scale-100',
         )}
         style={{
@@ -324,7 +324,7 @@ export function CollapsedReplies({
         'transition-[background-color,border-color,color] duration-[var(--dur-fast)] ease-[var(--ease-out)]',
         'motion-reduce:transition-none',
         'hover:border-[rgb(var(--border-strong))] hover:bg-[rgb(var(--surface-hover))] hover:text-[rgb(var(--foreground))]',
-        'focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus)]',
+        'focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus-inset)]',
       )}
       style={{ minBlockSize: 'var(--space-6)', borderRadius: 'var(--radius-sm)' }}
     >

package/src/thread/reactions.tsx

@@ -365,7 +365,7 @@ export function CommentVote({
       'inline-flex items-center justify-center border border-transparent',
       'transition-[color,background-color,transform] duration-[var(--dur-fast)] ease-[var(--ease-out)]',
       'motion-reduce:transition-none',
-      'focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus)]',
+      'focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus-inset)]',
       'active:scale-[0.96] motion-reduce:active:scale-100',
       'disabled:cursor-not-allowed disabled:opacity-60',
       active

package/src/thread/rich-composer-impl.tsx

@@ -1242,7 +1242,7 @@ function RichSurface({
               'ds-thread-rich-composer relative min-w-0 w-full border',
               'transition-[border-color,box-shadow] duration-[var(--dur-fast)] ease-[var(--ease-out)]',
               'motion-reduce:transition-none',
-              'focus-within:border-[rgb(var(--accent))] focus-within:[box-shadow:var(--ring-focus)]',
+              'focus-within:border-[rgb(var(--accent))] focus-within:[box-shadow:var(--ring-focus-inset)]',
             )}
             style={shellStyle}
           >

package/src/thread/thread.tsx

@@ -137,7 +137,7 @@ function SortPills({
               'inline-flex h-[24px] items-center px-[var(--space-2)] text-[12px] font-semibold',
               'transition-[background-color,color,border-color,box-shadow] duration-[var(--dur-fast)] ease-[var(--ease-out)]',
               'motion-reduce:transition-none',
-              'focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus)]',
+              'focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus-inset)]',
               active
                 ? 'border border-[rgb(var(--accent))] bg-[rgb(var(--surface-card))] text-[rgb(var(--accent-ink))] [box-shadow:var(--shadow-sm)]'
                 : 'border border-transparent text-[rgb(var(--text-tertiary))] hover:text-[rgb(var(--foreground))]',

package/src/thread/types.ts

@@ -31,6 +31,25 @@ export const THREAD_REACTION_KEYS = [
 
 export type ThreadReactionKey = (typeof THREAD_REACTION_KEYS)[number]
 
+/**
+ * FOCUS RINGS IN THIS MODULE ARE INSET. All of them, without exception.
+ *
+ * Not a preference — a consequence of where this module renders. `comment.tsx`
+ * wraps the whole reply subtree in the `overflow-hidden` that its grid-rows
+ * reveal requires; `Card` clips by default; a thread lives in a scroll
+ * container. An OUTSET `box-shadow` ring is clipped by any of those, and a
+ * clipped focus ring does not degrade — it DISAPPEARS, which is a WCAG 2.4.7
+ * failure rather than a cosmetic one.
+ *
+ * So: `var(--ring-focus-inset)` on every focusable thing in `src/thread/`, and
+ * `var(--ring-focus)` is a bug here. It was found the slow way — the owner
+ * reported the reply composer clipped, that one was fixed, and switching to the
+ * rich editor clipped the next one. Fourteen more were waiting. Fixing them by
+ * report is a queue with no end; the rule is the fix.
+ *
+ * Outside this module the outset ring is still correct and still the default.
+ */
+
 /** One reaction row as the API groups it: key, tally, and the viewer's own state. */
 export interface ThreadReactionCount {
   readonly key: ThreadReactionKey