@rogieking/figui3 6.35.0 → 6.37.0

package/README.md

@@ -145,7 +145,7 @@ Minimal example:
 
 | Attribute | Type | Default | Description |
 |---|---|---|---|
-| `variant` | string | `"primary"` | `"primary"`, `"secondary"`, `"destructive"`, `"destructiveSecondary"`, `"destructiveGhost"`, `"ghost"`, `"link"` |
+| `variant` | string | `"primary"` | `"primary"`, `"secondary"`, `"destructive"`, `"destructiveSecondary"`, `"destructiveGhost"`, `"destructiveLink"`, `"ghost"`, `"link"` |
 | `type` | string | `"button"` | `"button"`, `"toggle"`, `"submit"`, `"select"`, `"upload"` |
 | `size` | string | — | `"large"`, `"compact"` |
 | `selected` | boolean | `false` | Selected state (toggle type) |
@@ -160,6 +160,7 @@ Minimal example:
 <fig-button variant="destructive">Delete</fig-button>
 <fig-button variant="destructiveSecondary">Destructive secondary</fig-button>
 <fig-button variant="destructiveGhost">Destructive ghost</fig-button>
+<fig-button variant="destructiveLink">Destructive link</fig-button>
 <fig-button type="toggle" selected="true">Toggle</fig-button>
 <fig-button variant="ghost" icon>
   <svg><!-- icon --></svg>
@@ -1216,11 +1217,12 @@ Escape dismisses an open tooltip and returns focus to its trigger.
 
 `<fig-separator>` — [demo](https://rog.ie/figui3/#separator)
 
-A visual divider between content groups. The optional `label` attribute adds a group label and accessible name.
+A visual divider between content groups. The optional `label` attribute adds a group label and accessible name. Add `borderless` to hide the separator line.
 
 ```html
 <fig-separator></fig-separator>
 <fig-separator label="More"></fig-separator>
+<fig-separator label="First group" borderless></fig-separator>
 ```
 
 ---

package/components.css

@@ -854,6 +854,23 @@ fig-button {
     }
   }
 
+  /* Variant: Destructive Link */
+  &[variant="destructiveLink"] {
+    box-shadow: none;
+    background: none;
+    color: var(--figma-color-text-danger);
+
+    &:hover:not(:active) {
+      background-color: transparent;
+    }
+
+    &:active {
+      outline: 0;
+      background-color: var(--figma-color-bg-danger-tertiary);
+      color: var(--figma-color-text-danger-secondary);
+    }
+  }
+
   /* Variant: Link */
   &[variant="link"] {
     box-shadow: none;
@@ -963,6 +980,8 @@ fig-button {
     cursor: not-allowed;
     &:not([variant="secondary"]):not([variant="destructiveSecondary"]):not(
         [variant="destructiveGhost"]
+      ):not(
+        [variant="destructiveLink"]
       ) {
       color: var(--figma-color-text-ondisabled);
       box-shadow: none;
@@ -970,6 +989,7 @@ fig-button {
     &[variant="secondary"],
     &[variant="destructiveSecondary"],
     &[variant="destructiveGhost"],
+    &[variant="destructiveLink"],
     &[variant="ghost"] {
       color: var(--figma-color-text-disabled);
       background-color: transparent;
@@ -5879,6 +5899,14 @@ fig-separator {
   pointer-events: none;
   user-select: none;
 
+  &[borderless]:not([borderless="false"]) {
+    background: transparent;
+
+    &[label]:not([label=""])::before {
+      display: none;
+    }
+  }
+
   /* Labeled: rule, then secondary group label (same pattern as menu optgroups). */
   &[label]:not([label=""]) {
     display: flex;