@rogieking/figui3 11.1.1 → 11.1.2

package/.cursor/skills/fig-lab/components.md

@@ -82,7 +82,7 @@ useEffect(() => {
 }, [onReorder]);
 ```
 
-- `display: contents`. Reorders **direct children**. `axis` `vertical` | `horizontal`. `items` selector limits which children reorder (e.g. `items=".row"` to skip headers); `refresh()` re-syncs. Omit `handle` to drag whole rows; set it when rows contain sliders/handles.
+- `display: contents`. Reorders **direct children**. `axis` `vertical` | `horizontal`. `items` selector limits which children reorder (e.g. `items=".row"` to skip headers); `indicator="default|ring"` controls the drop indicator style; `refresh()` re-syncs. Omit `handle` to drag whole rows; set it when rows contain sliders/handles.
 - With fewer than two matching items, children keep `role="listitem"` but drag cursors, handles, focus, and move labels stay inactive until another item is added.
 - Event `reorder`: `{ oldIndex, newIndex, item }` (indices among matching items). Nested drag is ignored for sliders, handles, and canvas controls.
 

package/.cursor/skills/fig-lab/reference.md

@@ -55,10 +55,12 @@ Types: `point`, `color`, `point-radius`, `point-radius-angle`, `point-point`.
 
 ## `fig-reorder`
 
-Observed: `axis`, `handle`, `items`, `disabled`.
+Observed: `axis`, `handle`, `items`, `indicator`, `disabled`.
 
 `items`: CSS selector for which direct children are reorderable (default: all). Non-matching children stay in place and get `role="none"` unless they have a role. Class/attribute changes on children re-sync automatically; call `refresh()` to force it.
 
+`indicator`: Drop indicator style, either `default` or `ring`.
+
 With fewer than two matching items, matching children retain `role="listitem"` but remain non-draggable and receive no generated focus or move label.
 
 Event `reorder`: `{ oldIndex, newIndex, item }`. Indices count matching items, not DOM positions.

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 All notable changes to this project will be documented in this file.
 
+## [11.1.2]
+
+### Added
+
+- Added `indicator="default|ring"` to `fig-reorder`, including a playground control.
+
+### Changed
+
+- Standardized input focus rings around one tokenized ring on each visible control.
+- Updated and nested `fig-reorder` drag-indicator styles.
+
+### Fixed
+
+- Removed duplicate native focus outlines from wrapped inputs.
+- Restored keyboard focus rings for `fig-input-fill` and `fig-3d-rotate`.
+- Reflected keyboard focus state through `fig-select`.
+
 ## [11.1.1]
 
 ### Changed

package/components.css

@@ -528,7 +528,7 @@ input[type="tel"],
   appearance: textfield;
   -moz-appearance: textfield;
 
-  &:focus {
+  &:focus-visible {
     outline: var(--figma-focus-outline);
     outline-offset: var(--figma-focus-outline-offset);
   }
@@ -736,7 +736,7 @@ input[type="text"][list] {
   white-space: nowrap;
   text-overflow: ellipsis;
 
-  &:focus {
+  &:focus-visible {
     outline: var(--figma-focus-outline);
     outline-offset: var(--figma-focus-outline-offset);
   }
@@ -1495,12 +1495,12 @@ input[type="color"] {
   background-color: var(--figma-color-bg-secondary);
   display: inline-grid;
 
-  &:focus {
+  &:focus-visible {
     outline: var(--figma-focus-outline);
     outline-offset: var(--figma-focus-outline-offset);
   }
 
-  :is(fig-swatch, fig-chit):focus-within:not(:focus) & {
+  :is(fig-swatch, fig-chit):focus-within & {
     outline: 0;
   }
 
@@ -1658,16 +1658,12 @@ input[type="color"] {
       calc(var(--border-radius) - var(--padding))
     );
   }
-  &:focus,
-  &:active {
+  &:focus-visible,
+  &:has(> input[type="color"]:focus-visible) {
     outline: var(--figma-focus-outline);
     outline-offset: var(--figma-focus-outline-offset);
   }
 
-  &:focus-within:not(:focus) {
-    outline: 0;
-  }
-
   input[type="color"] {
     background: none;
     width: var(--width);
@@ -1774,6 +1770,14 @@ fig-input-file {
     outline-offset: var(--figma-focus-outline-offset);
   }
 
+  fig-button > input[type="file"] {
+    &:focus,
+    &:focus-visible {
+      outline: 0;
+      box-shadow: none;
+    }
+  }
+
   &[dragover] fig-button {
     outline: 1px dashed var(--figma-color-border-brand);
     outline-offset: -1px;
@@ -2100,7 +2104,10 @@ fig-angle {
     background: var(--figma-color-bg-secondary);
     overflow: hidden;
 
-    &:has(.fig-angle-svg:focus, .fig-angle-input:focus-within),
+    &:has(
+      .fig-angle-svg:focus-visible,
+      .fig-angle-input :focus-visible
+    ),
     &.dragging {
       outline: var(--figma-focus-outline);
       outline-offset: var(--figma-focus-outline-offset);
@@ -2177,7 +2184,7 @@ fig-angle {
     left: 50%;
     width: fit-content;
     transform: translate(-50%, -50%);
-    outline: 0;
+    outline: 0 !important;
 
     input {
       field-sizing: content;
@@ -2315,6 +2322,11 @@ fig-3d-rotate {
     &:focus {
       outline: 0;
     }
+
+    &:focus-visible {
+      outline: var(--figma-focus-outline);
+      outline-offset: var(--figma-focus-outline-offset);
+    }
   }
 
   .fig-3d-rotate-scene {
@@ -2824,7 +2836,7 @@ input[type="checkbox"].switch {
     }
   }
 
-  &:focus, &:focus-within {
+  &:focus-visible {
     outline: var(--figma-focus-outline);
     outline-offset: var(--figma-focus-outline-offset);
   }
@@ -2866,7 +2878,7 @@ input[type="checkbox"]:not(.switch) {
     }
   }
 
-  &:focus {
+  &:focus-visible {
     outline: var(--figma-focus-outline);
     outline-offset: var(--figma-focus-outline-offset);
 
@@ -2932,7 +2944,7 @@ input[type="radio"] {
     }
   }
 
-  &:focus {
+  &:focus-visible {
     outline: var(--figma-focus-outline);
     outline-offset: var(--figma-focus-outline-offset);
   }
@@ -4244,6 +4256,7 @@ fig-input-number {
     flex: 1;
 
     &:focus,
+    &:focus-visible,
     &:active {
       outline: 0 !important;
       box-shadow: none !important;
@@ -4251,6 +4264,7 @@ fig-input-number {
   }
 
   & input[type="text"]:focus,
+  & input[type="text"]:focus-visible,
   & input[type="text"]:active {
     outline: 0 !important;
     box-shadow: none !important;
@@ -4267,7 +4281,9 @@ fig-input-number {
     }
   }
 
-  &:has(:is(input, textarea):focus) {
+  &:focus,
+  &:focus-visible,
+  &:has(:is(input, textarea):focus-visible) {
     outline: var(--figma-focus-outline);
     outline-offset: var(--figma-focus-outline-offset);
   }
@@ -4388,14 +4404,25 @@ fig-input-fill {
   }
 }
 
-fig-input-color,
+fig-input-color {
+  &:focus-visible,
+  &:has(:focus-visible),
+  &.has-popup-open {
+    outline: var(--figma-focus-outline) !important;
+    outline-offset: var(--figma-focus-outline-offset) !important;
+  }
+}
+
 fig-input-gradient {
-  &:focus,
-  &:focus-within,
+  &:focus-visible,
   &.has-popup-open {
     outline: var(--figma-focus-outline) !important;
     outline-offset: var(--figma-focus-outline-offset) !important;
   }
+}
+
+fig-input-color,
+fig-input-gradient {
   &:hover {
     outline: 1px solid var(--figma-color-border);
     outline-offset: -1px !important;
@@ -4417,6 +4444,11 @@ fig-input-fill {
     outline: none !important;
   }
 
+  &:has(:focus-visible) {
+    outline: var(--figma-focus-outline) !important;
+    outline-offset: var(--figma-focus-outline-offset) !important;
+  }
+
   & > [slot^="mode-"] {
     display: none;
   }
@@ -4473,14 +4505,10 @@ fig-input-gradient {
    
   }
 
-  &:focus,
-  &:active {
+  &:focus-visible {
     outline: var(--figma-focus-outline) !important;
     outline-offset: var(--figma-focus-outline-offset) !important;
   }
-  &:focus-within:not(:focus) {
-    outline: 0 !important;
-  }
   &[mode="tip"]{
     fig-handle[type="color"]{
       --fig-handle-bg: transparent;