@rogieking/figui3 3.9.1 → 3.9.3

package/README.md

@@ -721,10 +721,11 @@ When `min` and `max` are omitted, the input is unbounded — dragging continuous
 | `value` | number | `0` | Angle value (in the unit specified by `units`) |
 | `precision` | number | `1` | Decimal places for display |
 | `text` | boolean | `false` | Show numeric text input alongside the dial |
+| `dial` | boolean | `true` | Show circular dial control (`dial="false"` hides it) |
 | `min` | number | — | Minimum angle (omit for unbounded) |
 | `max` | number | — | Maximum angle (omit for unbounded) |
 | `units` | string | `"°"` | Display unit: `"°"` (or `"deg"`), `"rad"`, `"turn"` |
-| `show-rotations` | boolean | `false` | Show a ×N rotation counter when angle exceeds 1 full rotation |
+| `rotations` | boolean | `false` | Show a ×N rotation counter when angle exceeds 1 full rotation (`rotations` or `rotations="true"`) |
 
 ```html
 <!-- Basic dial -->
@@ -746,7 +747,10 @@ When `min` and `max` are omitted, the input is unbounded — dragging continuous
 <fig-input-angle text="true" units="turn" value="0.5"></fig-input-angle>
 
 <!-- Show rotation count (×2 at 720°, ×3 at 1080°, etc.) -->
-<fig-input-angle text="true" show-rotations="true" value="1080"></fig-input-angle>
+<fig-input-angle text="true" rotations value="1080"></fig-input-angle>
+
+<!-- Text-only mode (hide dial) -->
+<fig-input-angle text="true" dial="false" value="90"></fig-input-angle>
 ```
 
 ---

package/components.css

@@ -1243,7 +1243,6 @@ fig-chit {
 
   &[disabled] {
     pointer-events: none;
-    opacity: 0.5;
   }
 
   &::before {
@@ -3764,16 +3763,33 @@ fig-joystick {
 fig-input-angle {
   --size: 1.5rem;
   display: inline-flex;
+  align-items: center;
   gap: var(--spacer-2);
   user-select: none;
 
+  > fig-input-number {
+    flex: 0 0 auto;
+    width: auto;
+  }
+
+  &[full]:not([full="false"]) {
+    display: flex;
+    width: 100%;
+
+    > fig-input-number {
+      flex: 1 1 auto;
+      min-width: 0;
+      width: auto;
+    }
+  }
+
   /* When inside horizontal fig-field, grow to fill and let inputs expand */
   fig-field[direction="horizontal"] & {
     flex: 1;
     min-width: 0;
 
     fig-input-number {
-      flex: 1;
+      flex: 0 0 auto;
       width: auto;
     }
   }
@@ -4498,21 +4514,31 @@ fig-chooser {
 }
 
 fig-choice {
+  --fig-choice-selection-ring-width: 1px;
+  --fig-choice-padding: var(--spacer-2);
   display: flex;
   align-items: center;
   flex-direction: column;
   border-radius: var(--radius-large);
-  padding: var(--spacer-2);
   gap: var(--spacer-2);
   outline: none;
   border: 1px solid transparent;
+  cursor: default;
+
+  padding: var(--fig-choice-padding);
 
   &:hover:not([selected]):not([disabled]):not([aria-disabled="true"]) {
     background-color: var(--figma-color-bg-secondary);
   }
 
   &[selected] {
-    background-color: var(--figma-color-bg-selected);
+    background-color: var(--figma-color-bg-secondary);
+    & > fig-image {
+      border-radius: var(--radius-medium);
+      outline: var(--fig-choice-selection-ring-width) solid
+        var(--figma-color-border-selected);
+      outline-offset: 0;
+    }
   }
 
   &[disabled]:not([disabled="false"]),