@usefragments/ui 1.0.2 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usefragments/ui",
-  "version": "1.0.2",
+  "version": "1.2.0",
   "license": "MIT",
   "description": "Customizable UI components built on Base UI headless primitives",
   "author": "Conan McNicholl",
@@ -155,13 +155,9 @@
     "remark-gfm": ">=4.0.0",
     "shiki": ">=1.0.0"
   },
-  "scarfSettings": {
-    "defaultOptIn": true
-  },
   "dependencies": {
-    "@base-ui/react": "^1.5.0",
-    "@phosphor-icons/react": "^2.1.10",
-    "@scarf/scarf": "^1.4.0"
+    "@base-ui/react": "1.6.0",
+    "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^8",
@@ -194,10 +190,12 @@
     "vite": "^6.0.0",
     "vitest": "^2.1.8",
     "vitest-axe": "^0.1.0",
-    "@usefragments/core": "1.0.0"
+    "@usefragments/core": "1.3.0"
   },
   "files": [
     "src",
+    "!src/**/.fragments/**",
+    "!src/**/.impeccable/**",
     "!src/**/*.test.ts",
     "!src/**/*.test.tsx",
     "!src/test/",
@@ -205,7 +203,10 @@
     "!src/**/*.block.ts",
     "!src/blocks/",
     "!src/assets/*.svg",
+    "!src/**/*.stories.tsx",
+    "!src/components/Cloud/",
     "dist",
+    "!dist/components/Cloud/",
     "fragments.json"
   ],
   "scripts": {

package/src/assets/fragments-wordmark.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+
+// Baked from the brand lockup artwork (star + wordmark), trimmed to content and
+// stored as a monochrome alpha mask so it can be filled with currentColor. That
+// keeps the lockup themeable — it renders in the current text color, matching
+// the light and dark brand versions from a single asset.
+const WORDMARK_MASK =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYAAAABgCAYAAAAU9KWJAAAACXBIWXMAAAPoAAAD6AG1e1JrAAAgAElEQVR42u1dCbxd47W/Z7hX0tBITLeCpC9IXgipUiXUlJiJGiu0UlrDK9JnprT1UFNpa4hIzEqoiia0eCpFtaHB0xCtGFqPqrlSyr3nOHt3f7K++Gfdtff59nCGe85av9/3O3c4Z5+9v2HN6786OlqQfN/P0+s6wbgrGIPo91yHkpKSklJrkmHyIADm+ktpV/q9oDOkpKSk1LoCoEivZ/mf0B1oGSgpKSkptR7zL9DrPobre573EQmAnmCMUiGgpKSk1Np+/9HBeIsYfyUYZfr5DLQQlJSUlJRaxO9PrwMDrf8PTPuv0Oufzf81GKykpKTUmq6fq4nZl/3lyQqBfdIEg42VoYFkJSUlpeYL+h7DNP9lBH+7K24cgLKKiho7UFJSUmpOzX+rYJQMr6fRRwbQa6+JEbgIAdL2i+xvY4NxdjC61ZWkpKSk1Pigb3cwXgzT/oGsW+jsMDeQpO2bIrJgHBCM++jzLwdjgAoAJSUlpQYWe5nXgOn/KsTv74fEAYywWIkFjyVt32QTnUcMH4XLg8r8lZSUlBrv9/+BI/PnsYADzeeD31dg2v4AqiG4h1xK9LGPP9dDv1+vVcVKSkpKjWX++4Nm78UUAPcwN9K6xjUU/P+vEDPwSLBUmJD5H60nUFJSUmqQ3z9g1P8ZjHeYa8dJBtCr0e43C8bEYNwN2v3H2n6VTKKD1QJQUlJSakyx14rBeMwh6BslBAyj/wcID67tR8UQtlIBoKSkpNSYlM/r4vj9Q7T4R4LxLFgDnovlEHz+g+DlPxRTSElJSan+fv+pSZk/aPB/D8aWzN/v+tmXFU5CSUmp3VIuC5QfX7Dpl/VigFbzDxj2NlTI5cq0w5j4ztQoxk8gAObrjlBSUmo733sUNk6thANk6XwmEAB/SRD05UVg59D19ox5Lfv5m9T/r6Sk1E6VttsHzPdG434JXvcOXjcJxhrB6HIBTiPhsJyASNDZ6+4Urh/7mbkQRzg65vW4ANEUUCUlpbYQAMZdsoS5S5YQvPL9wZgZCIaTCS7hC8FY00IlpBEO4Pc/O4Og7wvBWB0yiS5KWEB2iFoASkpK7ZZ5Mw3A1KrR+8F4zkAmBONa04glYKAHBa9bkDAZ6KD5d9HP+wID9hKkexr6MBjj6XqdHdArOEYaqXUVbasCQElJqd0EwHhgqhV4LdvhyKQ/NL78YPwuGD8Nfv9+MKYEY+tgfJZy/K3lsQEUe3kptP8judsm+PmJGAIABcm6rZoCKgT7rVW23NBToaTUnsJgvgPTtBAKFXqfEQ4lR+HQE7zv/6nI6/pgLMog6DvTCjJw/wwNvuf1BBlArwbjU62WAqpNbpSUlFysgCNSVN+GCYdyRAWul1LzfwQZNlgWo+C6XozrPdqKawuCsZuyo4xVNj0YtwZjNo3byW12lQHQ0zoIJaX2g2BYlYqokmrlLgIChUOS77CfMU3h12PBbCvIdkqYAnpLK/n/YT4MEN41wfhnhFC0ldB/a0UrSElJyY1ZXJYiHbPW5AFT36ujr9/fZhUdmTAF9PxWSQGF9dwPGT8J35IwbPD/JRUASkrtmxK6eRr3TI3JMuozJUYNAuD8hALg0FawAID57wVrWbLWV4iLTy0AJSV1BX38+mDKWEAtmf+csCwdYHy/SJgCun1/FwDo7ydmjvNQYaB3r1D9hBnPU4B+vmIhKSnFjrPZeqdiK2iOU1Lk5teCLINebIq9qqVpBv9bkCAF1LhA1u/vKaCwhmcywVmhOfkDVXsPM20zDbNnY4AeaSWl9rYABpN2WKtgcNJir82jmr3T65CYgWz7ntdMjUJ/1nztfVMbTAuFXQFBeBsICNXulZSySbE+NxizgnFzMC7s12cLGMRPmiEYDMzriI6IAC3EMNZjTWBcr/9YC8VxPicIuDcM4B79v9MC+klDj7WSkrOyvBLUHPkEaFnst0oW3Pw4y/wxp59+rtQpSGyFz5XVfPMguCYkTAG9rQX8/3btJrN1M3SDgtwpKWWubI0gaBx7zv4E/8v1J4iAIvq+TSZIMJ6uYgV4tRIOoJnPdylMAub3jYQZQD/s7wwS5uAYeDb7fFNVACgpZd7D5ItM4Xyu3wgA8l8V8UZNM/bg9wuoM5ZhxK8H49uUW29aNf6agrFLqjD5MOFQcRAONmD5Oi/2cmB+P0giAILv+mYLCYDj7bOBIJ3SH56vUe6oZnKF1eI+Gvl8zTCvWd8DeBwmQdvZmgiATNcOAMG4tm9QOe8Fxola/PMQgLVC4zPB2DQYXw7GSQQtYD7/Z9aMPYlwsJ+d5Mq0YEF+HlMA2O/asb+5gADQ7eMBltKJggCwMNdd/HNs5GGPFPheidiceX6tmNZnwQHALl8jYLx8FQUpX+UakfMkzE0uwXcVuLIWQ8ErVLuvGimWYc+aS/I8YfveIT0zV2Xtco57BccABmXfCwKgk82BNHKO35d3eL58Im2fAqZnU/UnMv1ySCD1jGpdxOh71qBA5CTSRi8PGNGvgtdngte3o4QDMKzvxdFYISjzSJIUUGP5tEAKqLUAjrVaCczDwVkKOGk/pQWoo40/lJSL1Qg5Nid8Lp8B41/uupQ5tSrt3aEWVrzWgHrS8wj3UhQOfj7m3HbStcw1V7HKAmeqGSgkeeFvK1OvjtUo9TgX53kSurP5dwyie1id76uwPeHAa4aScowK5+KkFoC9D+HvA2jduulsDBXmOXx/socdQIz5LsT+B43cC9GS7QMa4LDBTJssujADekCzCTYKxu7kWrqU7mUBNHGfHYcZQ/rjp23xk2MQ2BZFGYtl1f7kAqK5NAHvfWg996Kfd6AeDT5YVoZ+FIyJVAOwlzDMNfY33eBoHvemvxnLcCupi5udL6op2Jx6MU8iq3APc+ikg8AA6szGPtjgMAXjSUrH/adRFKgw7XECrTvOwIdL10jCoOgcTKAUvntJc3uT9oK5h2eCcSdZU2PhfvEaq7B5Gh/CKDan/+9Ja7SGAGNiFKYzgvFLYiJvGKh0coM+TSmGBqxxnShBiE2XTF0LKQNm/haRO/cdyghbHPz8m+D1YrO++HxphBjNj/EMnGISK4Lv+KNB2aXvfYtcywsIDdjUG3XHZcKmYJPmcS+a0xWF+xhI+/DyYPzWKLm0p3BfGXysfc1+l+YUM33YWTHXPZaezWdu7VdhT0Sds/XZd+C9D6b9cgUV5T5P+9K43ZfQOprvnkM8dBS7Tk6atBGEAvlihLZfjVmWQMptAgwgF+ESKLqaKeSKGg0LkksQkS/F7C9gn920pFyl2YUALHQnVfBmUqsBlsI1JKDxb09yLYPahs4kSO/3BauqR4rfwOeH0eF812G9PNCyjLKwaVwhAEG7T5NVujgOXLjpb2EEKGs6NImZ//P4oabXOTAnhr4G97URWceeo7X6HjHtwcLcFgH8bxZ8n8vcmtjeZnGFAGq7xIznO86pfY9Z/xnm3EetKeMxi9j+3AL25wBqB/tCjGc3QulocKHm2esY4TN+wj4mVpE+FfgnMv7vESx9nGuba95neq6Ic0iHGi9YidD2XYOmH2D7REcGHyoc2ALnY/o6LVPZNiGOkWWgL5qoviTYmlAAFKll5zJXD+D8VEKY2EdhA5jYVaTx4lobjWllMKWnCXDbHttXRiiMZAepSEx4b3IFcoC6Xhol9nsv268e1al0uSgKwBi3BZMd7zcMHM/eiwfW4k+hGv04OAuG7gsRALPxfcHrd+jvJ4DCUgmZgzKDVq9AC9Rx3H1j8KzgfqyCx6/Jr1uBtTjZ1fqG71yfBAhXLPkaLncPDGnA/O0se+6ivh807x666b3hPh5hBZCRz87Oi/nsMEEjHw33az9TCnMzVzln9p7tPHdB2v0Lwr33kIsa46Rl+F+J8brzkdd2gEYwDya6klZbhIe/DDSiQgZujXwC094e8EMy6C3cA0VnhWaLCTABsDjDau0yWABjWTbWB8FYiyy0h5nLsJftKazcHsktBzJZfWZ9ll33HKttuLNaijAwqaPgc/Z7Kw6xImRmZUBMXYeqPlGz/3WIALiDve9SYv5+CHMPWx8PLXESohvBs57EFLxylefD58eU4XNi1N3sQ1bJsqSDCMBB6czx+7wbXTIh372QWV5H0Hq8xp6l7LCuHghf690YzvjK6DjFpY7n7BR4npGAXlBynT9UoNi5uKbPmSDmeoGw8GkgGuwXGqawdqPcJ7BQZ6asXsZ5mQGR/kKbCgDc7OMgw6o3woKUBEAnYkwhA4Z7X0JuuHNMHYNJyzWasvlOqq7k7Urt4b/WARzwJJYV5aH2Sf7VBykOcQW5tn5Onet6hMw1n3zo/8dSAKsJgDK4PT6Ea1bgOgvIfXMF+ckfAAaL82Wv9ZTV/IW59cCCm0vPdaUBSxTmlMf6pkTArth5PdAKJWleyZUxl9B5T6S4wDSa63fZvCITfigKlgUEgL3XWbRWvmBZGKFwD83lNIqlPArrWmHz71M72xVgHaMEQCoXEF3/Lvb9H4FrajqtrbFeNw7G5ynWdjS5Fj9kcQg7h6cvWyvmu90fJXaGEu018JEW65xnbJ9tVgYopjiJC4CJNZVLiAT6CAoAmWyu9aiGwwTZzxPSQE+kgOto+3421iVf50pQ3OLBdX4jwEmXaBMeTQHV9dn1OlHLIUbLD10P1W50hx14OowHEyPzBSb4Vc6sWD8EBDb04P6NyX2YTQAICW6OpPv7JwusVxgDqyoA2L5cxqTp74YxbxjC8Ezmx1ng2qmw6/3M1u0wJeYJCkgOCsks2c0yU4YYa5l3t+B/t8+0FQlhjz2HT8z4KxCnkJ7J7MVvQQZimTHBG3mMQRAAlZBmU9ZKOxpclzxOafqT/5i7+OD7vwN7oIudlfVpX2xg96T9XkpkGUX7f72QMQqSTrZkDNzex4VhSRRsj5nzfL8QjDb7dUSf9CgIaizMSgjA4aqgD7FemjNskntBQ/WysG7IzN6dB2yaOQ0U3CxSGmjRQZBuKWg3/ICZbJWxDhXa9prTuQuSMra+wNx/RTYwY2gVyujgQmQRuoLg/esATguvMbkAYa9Dcr3xWsPt/uJCIIEAwPv4l/9JcyOxBgOZLsROKsJzIRO+HmMkYbUIxNxuZ/dnmfG5bA1zkKyxkAtW+twp8L6wNc0z8EZeu9PHCqkiALhgvwETSaRnhzndERRiZMBvhiklDHTxhSRpoMCLzxWUtcsEmOllewH+XoB9cy/cR4m7maQvNsG8m4R0QT8D98nPYAGK9RIApAFnLdgqrAlNrllcQrAh7OiC4GJUIVg+ZHQKAsAT1vcCoaCnIF3TarCUBugzzX9LuKdqhTGdAlPHQ7+nEBCdyQ6nfZbDXIurLAPjCRWozSe0ADxW7NhZpZCsExiWqIDh+atWq8EUwq4QwfoSY6R2Xs8ImdfJoCgVHda0CHM1jZ85clOtLGQ79bEA4NmvdKlTYXO6W4jy99+o+CEDhlTTF9lcPAeB7ELEWSuGuAd9DO478IBOyMqrMNf8vKr50OYhhQ2UhftkEWiINXefwEYaRH4+P0Xf4bAaCOOrG9qsqaJVoCC+mtAC8NgBu821cCgkOF9iWk5njOfrFBiQXZvp7D1jMBsGTPSTERE1Zg2B1SbvDnHFOAkAeP8VMYsd7XxeESFQjCt2zRiZPPaaX4D1Rl6wK3vfqlBrg+87zUWYV6khuFcAMZwq1EwsFKwgn+pIBsasIepEC5W5OB9ysAAkAeBiAdj3zGWfXwK1HnEL0x5j13rVuuE6qmgA28KiZhkXeA+0gppn1LDNdByYp+UMA94vgtui2eICtRIAVgi8Y/2Krmm/4MMeRz7uDennIXGrJWFtNxSY6Xw2B+cIc/BAkjRjYX5GQe1D3BgA5vOPjMms7PXGcu0b7uH0uAoKPNedAgM+1zI7ev0mV66oRiKfFKcGvn+0ndcomHYmANBK3SVFHcNYIQ7yHhbeZSwA7D69TuC728YRprDfNvCXFsltHdzbNhSnGeDKNIZRoC8TzZlJ0h/CIhc66oBsCnnfr9ZAsJkYw+HNlipaQwFQZlp7MWOAq7zjWGZ626pxFvSzWVs5m6HD3Hi7pt2DMMfThDmuKgDgvb9Ici9w7YcFoVJKAmkidQKE+5zLnnuu4KrZO+2+gOtfLrhENmXzuZC7JY0QSgrAFjKnds9MEBIMshQAxwo812RBrSRhVtVE4UTm7C+tMvRj5qK6uE/mQUOSeriE7ASvWUPBNgP87oUWFgB2zrZLyrRYAKsrg5qRBaxY7W2o5B4JBTcfwcEckBalEeZo64QWgD0PxyRhmrDGFwma+B8TMkCseOVurSfgfYOtQsWyXlasxbzCXB3H3rNQ4C/HJxVCcN0LBdfiUYILKksX0GchJbbCYKUnc8wmDgInFNDGBmTsEIp1DmKpopnkmJOb6Ut1FAIo2C7KULDh5lwuVbQFBQCmBQ5Jc9B5NofZ3FRgthG5hsY6jjHk70VG9A/I2thZYBDXZVWsSK8rQtvUOHUAdj53SChM7Rp/S2BWN6W0KoZS9ovPUmU/1dG305z9zpsznteBkFlj5/WWMAsArJ/xKbCM7Jx+XYhVnV4LAcDgSU6G5/VYDcdfyCran1w8XWHoqFm7T8ZazI0s3Se0sabWq2ECcx1MroVg85eCXO3R6LhALQQAfP7hlMw/z6DHb6OD/i+26eMMDujXLRxkrkUWM0w4eJhVpLoWgpl73jAJ+iys0ZcFq+LihFYFMrTFgtI2FLGPeLEXFU79gQqsEg+6xnyrEUtWCAoA+P+7AM+RJgaxB4PlEBtFZSUA2F6Z7lDFXabrm7MzlUD3BmSFlCtNyEqEJJhJqihuVlPokYVJ3mjBxubl+41MFa2RBWA39q1p0CLpdS+GxZMFoQCwLsYjBQFweIYCoMAYe1wBUAHws6QCYEdBAFyQRgAQA1koZJKswmMEfn2oApXM6BPn9/gKWClpBMAOguV4aS0FANsnR1IWEFrfvRGV9x5ZCFfaxJSkSLnVMmpOEApN0ixqqRFNWKBQ6tNUPVmLVNG5jUIVrbEAuCqhe8HuofMESIVSBvPfRwCwTBV7//9VAwEwu4ECYKIgAM6vsQD4ekgNRI8A+pZmlNlzvcFgoxcKVkrWAsDyqEvqIAByDCWXozYjn+kl+Ide4X9zLDZUVkIANecdGNiSl+bA0gOMrncTFobnfmLGNRBl8JvWPVW02QQAXG8qq0yuCEzf87NzAR0oWJzfrYEL6KE2EwCT62wBeICiOrxBAqDmFkBILwcD1bGTvxT19rdQ/MjnxwrNCpz572TKV0FzXgsqBpNqbh5I9ZUb0TyZCbYJgMRXzrCZfQ9UnLadAGBZDkt43jbd1x3EVDahAJfL2JDy8B8XgsC20cp44f5nZ3EoWJOQV9nhb3UBsKNQFX43CdzDg/GNrAdZc1NsppEEBtcqAoDzJvb3IXQuTfD/6mA8hb1PGKospmzna5FRc4mQthSXQT5Rrb2ki6TMiGGuDdpcFi4hzCK4NQoUq4UFQIH1TMV0xbchCyaXgFEVbLCSCQAbCOy20BPw/79loXBwBsyYYasKgKG8AA/+f0u906BD7rFZBMDiGFlAUg1MzqVnMb13A0JafZMF50uYwlqrjJqvUQZH3ICenag5aXzKQm9axKNJ0kymSOZW0lRRT4jcf0j1D3VxdTVpDOBxIVj+FYBjKMYoBLPPtxGHASABsFrHJymmvxHW8isZFCzZObpeuH6rCoAhkMH1ElPkXqP+xTlYz6Sjk1KDlxtC18FmEgAvCGmzhawVPo67xdZtFeg6h0r5y3btauU+GZcAk94u2o8S+JQ//m4CfVvdUcL2EQ4hjcZRsL0fwyVUYc06bHGM6W60bju6gGBjdlv0SlaQNTCh5Wddkd/l6YhcAIQA4j1ucd4TMgo7v5sK5ncrC4CV4b23C5by5CxrAfqLBUAC71nB0hzkaAEMJEj3dWiMsNlOMRTyIljF9wtKyb61YjZdgokfRwAclQQIy4DXQQzhGeqnOo2Y3iQqVumudrAE4VCEZ9oY2y2GpF9xK8E81//6S/HnP5V5bm7/EgCW8Q0HQLYy65sbl/HZa66OYGQRAmA49B9AJn1+EmhvmNsBlLceGwyuRQTAFMGiewwQMNNAMZheFgfQGdqPuo1NhvTeXDMIAPbZR9keMAHZUVU6mtnv28XWMcBePS2BYmwB7XYXshIvqHWV7a0xBABWlu4Wg6HgAlVrzebRZD5LDHkGYZSb4qPNKM2q6MBohjCzypO0fQogX2wLe5Bh1BsjqAktgGEQAC5j7CcBYqS9txsEbP3lBEAIXAIy7JOZEtDHMmQ9AopQ/cvRG9tNAAyF5jOeAELXmWBti8LaVkDRW6PZBAB85hbhrH09Cum2yjm7MwGYXx4UV4/NzR01ZTqEBOiaGoZN6ce4HACArV6Ldd/BBiVYOedV+X7TKecF8hFfazYuZTFsQWZYF9tsR2FbQNj45rkPsXjpLhjkbSgAugQXoQfgXl0ReO3LMV/622VhMMhMANgDsSoE6bi2foMEbSHgq+TA3blQqIRtGwHAXXCsstmz7gbHfgB5VJL8T9BbS9g8PaBjI+CgGykAiizFGV1ij0ODIjHWQf9b2VqzrMve52OigVqeta+wJ66oJfb+QNQGYgiAtyC1LOeAGGkYwX0xBU1c4eBTUPslygi6ifz4u9DmLNF9TydLAplEUyCCNmkW0C2CX3K+0LFpuY5RApz0bBaXqUQIgByvmBVaMPqUW23W9nMhoFtDaP1n2Vx/qY6hjQRAHgop/yx0BDNn5DTGrKWOYDnWv2NmSEey30oB1SYRAHmABv9Q8HDMjuJx8J0zBAGyENxeeaFDXkE4KytCPwB0AR1SyxaMI7DpRowU0Ccx3Skm8mHawpIkwqGXMIQ2Zp242qEfQFoBsFtIz9lFZHkNDmm6UaB4zmUMG6Yi9ILtIwDYPRzBhRBb8woJ/gUUSHuQkDXfEjreIfpoT5sJgBzrCdwT0RN4n6gMFIrTHc2ziphwHhWS+dcUMQCYi5sZeB26r6YTxIMdR9BzH2i7GDIeit3YDpIUE2HdNiUcJZ4F9KZ1n9XK//+lOGmg2E+2GjMBc/MgyeyuYeVhhRVVYHHFt9Dk6miPjmBpKoFzIZg5FVYQaGItl/pLUQ+nU+e1Z9HFIEADzAlLA+XWGb0ehj1nQZhUy/SqCPvgaWNZQJvLcrsIAHYPk5lw9Ng5fYu6fE0nKJDzye36KPbh5fnrZl6D8UWpH3GTCoD1OYBdBL+yzPkZwEI7UUADrUADqmtNdS8pTDuTUnWoyaQkEL2P2LnqDe0JnHFl8EEJM4AuiWImsCAbk8/erwPzdypea5Z+wP1MAKxGc7fsnhxrLSxTKMHBeofaF27HqkFFAcCeazO4D2x2I42S/wlWEQb9byNze20hw6ktBADba/uBC6RshYGLqxbeV2ZpwhtW4Q/NlAVkP7sT7gd8NjZ6oXcD9kS+BNczZi1ShX2fTy7sXK0ZzZkJBcDUCKlqJ2QwTVI9sUeqIhNKHYKaUAAcB3AUVhs42MHq4gKgDMG4GSnB4FYDAD6EgyjRd/DRyzN9SOsfznrYIiT3qg4+1y5KZVzgULuCuFXGKtkerjdSEAD3hQiA22E9LHMZlVIATIB7s2t0XloBYDupwTVfDqughnvZBD7nwTNGDiGYfiNUHUft0yeZRflyRgJge9DE7fP/JIbiZPbkn3jSA1N4SuDnL7LPHyP0sUaQvBJTUMKQQi/Cjnu1tABujCkA7KRMCltkmIybMsTt9zPE/r+hHwgAyQKYEmMjbyVYANekgING3/H21Hu2p1o6r/9Jk+xfAHSEvc6aYB2GxQBybCAQoPn98/5S5MV7DFMxGRnmOuR/fpoY9ym2zSKm9lExYpntjbnsHu3rHG4BJGndyNZoZ8ECuCgDC+Apdq9/j2oEhIKVcHuedbTY7f/fp4Dp+Ki6Gbami4R4waAMBMBEIYjq1AYV25WSn//3tHe9CBdQp5C0YIrBfgzxJ9d5LJO7bYvM0EBd0RBjpoD6Yc0wgIGd2GTMnwcbhzcCxC7GugwPxq6kJU6gTJbPuGRd2fQ0yp6ZCJ8fk7IhTI411jYgcQdQSuHVVNBnYDN+aYRNME6lZ+gOgSgvUOPrHWls5xKbiQre0+Fdg7JcJMiRAhzU7QRmcTXbxzlwZe5Cc2nndFDCamgs/98Z1tjM1Xpp96XxvRMK5QR6/ZIL84MMoRVoPUx7xftNVTz59N8m993LJmBJyqOpuh8WF8eeUrb5PRYyODdD6XoTYU5Hx2juwlOIu8kqmAjD3vMWIYkPeC/7U/zk9+Qae8XOI6XEm1jKLCqOHZNpPwDH7kEvxYCB8ATQrlxIo4sK87v6zWQFQCFR08YDmjhOUUhSBZy01R9LmysI6bvFiIrNPP+/ZGWBADitGVqDNkr5kAQr8Yk1aHRbGJAs1reJ56GQpnNeiGckR1hMq9E8DmjIPIIGtjZg5sRJAX1KyPPGa74SE1uoEXGAp7iW16SbsBCFKBjz8/laAAtiPrNQExD5vWENsGE/zSQl5SlyGxj3xOfCXC/cZVRl/88TqlbF+JDUrDvtvqnVGqVqLN4XtKza2iWqlk97j/Wa05DrOd0zg6rJ1WIe06aAjk+YAnoPO0g5eNh5KVw/Hkvvq9QqTdRvQDczpUSxkHMFLf3iqDJ9x+tuJygFrzSqv0U/0IhzNQ1K6jzW14Sn1wNiZujwoEqBvV6ckvlXQnCBeMFXKvcSPO+senczU4ptpW4mFHB9ELfUniU+rMCKbsR9raTU6trVGQlTQI9DjIyOvi38vITB2bcJo/1Bf2nj8feq8/JlaVmYd+tVERD27+b6I1UINK/GRK93Ca6aFzELB819Ngqs3L7TprIyKOoPkmb1KCn1VwFwXRwBAJrzlxmA0caAGOmlSM88FHKZVyAkSqMB7m+CtoS5cT9hmLzrKBzKTDhUWGrk6S4C0BcAAANRSURBVO0a9OtHVsDmUGHpQeWwyUg5xrU3QfD/bW0RGQPuMnSWav9K7aZZzUuYAmrxdHIm3S5lsRevLO50QBftpCj6uOA796Zsjssph/ZpKO93+d6mDgbrXl3KkEkBEEvtKZ3uMqpo3ZjAvUyK6mhK2zuVisY8Bltgi5Du1z2g1G7Mv9O2QouTAkqaN+Z135zC728/86AA4ZyLm1ECbimTZjU2GHsE41hqE3kXCao3GYCYof1U++sXlsAlIWX6nEqECltyKLd/qF79npWUmkkADIvptlmGAAk42SelYP4VqFIcEcf3yoRDIYZwyBM88Bgq6jk8GFcCXrn6fpvcEqDGQBUB5K0UEn+qYPk98/vfmKb6VEmpPx+kzXlLPkf/v20HuBPCyPoJIZ1NJWSWPvgQ4VBU7b41inNg794j4Ax5DASuFNJ4xliCe9S73aeSUjMJgH0TpoBeQjADf09R7GWvdWo9A7ARwkG1v37mDrIAZoS58gzgEoUhLf6VsKn2BPyWgq69UrtmAJ2aMAX0eIuMmDLoe6v63ZVSVLrmWdzHAHBt7S9tYnIUxX4OJtz1sVh2j9aEklK7CoCZjgLAg1ZnFdK2krh9UGA8HYVOqKQUA5OoGPP9yviVNAjs0J+Xd1ryyO1TTpjrj9Cxm6j2r5Sxa4+79ZbLHFNFQ0kPyvKY4YslHz6rpvWpqcevyHc6yOb8x/X9x+lqpaSkpKRUOwHQTZDOvK0eZgS9Qv0/RzPX0QkJ/P/WzfQj1fyVlJSUGltQs6nQbcoy9Qf8pY2iV2RBt05oVPJejPoBy/wfsFkXao4rKSkpNS4FdA+mxb9BpfTjBCzrvPD5WY5WAMLsrqPFVkpKSkqNzwA6nRj476gH6FDHdntS381q8M7mdaK6fpSUlJSawwU0yVTyJk2RI+vgsSpCwLp+TtCgr5KSklI/6QHq2FTj2xF1BPZvN6vbR0lJSan5KikLKRvKrwWY/J7UN9hARWuxl5KSklJrBpOvZUzfCoIlNqCsfn8lJSWl1mzSsQ3WElhBELwepH5/JSUlpRYnaK5t0Rh/qJq/kpKSUnuklB4Lwd/7tNhLSUlJqX1gJVYnn/8bJjDcoVk/SkpKSm0VDJ4RjAPU9aOkpKSUPf0bpUz0aIAR5P0AAAAASUVORK5CYII=";
+
+/** Aspect ratio (width / height) of the trimmed lockup. */
+const WORDMARK_ASPECT = 4.000;
+
+export interface FragmentsWordmarkProps {
+  /** Rendered height in px; width follows the lockup aspect ratio. */
+  height?: number;
+  /** Optional className */
+  className?: string;
+}
+
+/**
+ * The Fragments logo lockup — star + wordmark as one image. Use this anywhere
+ * the brand is shown with its name, instead of the icon beside a text label.
+ * Themeable: the artwork is a CSS mask filled with currentColor.
+ */
+export function FragmentsWordmark({ height = 20, className }: FragmentsWordmarkProps) {
+  return (
+    <span
+      role="img"
+      aria-label="Fragments"
+      className={className}
+      style={{
+        display: "inline-block",
+        height,
+        width: height * WORDMARK_ASPECT,
+        backgroundColor: "currentColor",
+        maskImage: `url("${WORDMARK_MASK}")`,
+        WebkitMaskImage: `url("${WORDMARK_MASK}")`,
+        maskRepeat: "no-repeat",
+        WebkitMaskRepeat: "no-repeat",
+        maskSize: "contain",
+        WebkitMaskSize: "contain",
+        maskPosition: "left center",
+        WebkitMaskPosition: "left center",
+      }}
+    />
+  );
+}

package/src/components/Accordion/index.tsx

@@ -184,7 +184,7 @@ function AccordionItem({
   className,
   ...htmlProps
 }: AccordionItemProps) {
-  const { openItems } = useAccordionContext();
+  const { openItems, toggle } = useAccordionContext();
   const isOpen = openItems.includes(value);
   const baseId = React.useId();
   const triggerId = `accordion-trigger-${baseId}`;
@@ -201,7 +201,17 @@ function AccordionItem({
 
   return (
     <AccordionItemContext.Provider value={{ value, isOpen, disabled, triggerId, contentId }}>
-      <BaseCollapsible.Root open={isOpen} disabled={disabled}>
+      <BaseCollapsible.Root
+        open={isOpen}
+        disabled={disabled}
+        onOpenChange={(nextOpen, eventDetails) => {
+          // Trigger presses stay in AccordionTrigger so its public onClick can cancel them.
+          // Base owns the browser-only beforematch event used by hiddenUntilFound panels.
+          if (eventDetails.event.type === "beforematch" && nextOpen !== isOpen) {
+            toggle(value);
+          }
+        }}
+      >
         <div
           {...htmlProps}
           className={classes}
@@ -285,7 +295,7 @@ function AccordionContent({
       data-state={isOpen ? "open" : "closed"}
       role="region"
       aria-labelledby={triggerId}
-      keepMounted={keepMounted}
+      keepMounted={keepMounted || hiddenUntilFound}
       hiddenUntilFound={hiddenUntilFound}
     >
       <div className={styles.contentInner}>{children}</div>

package/src/components/Alert/Alert.module.scss

@@ -3,7 +3,9 @@
 
 .alert {
   display: flex;
-  align-items: flex-start;
+  // Single-line alerts (icon + one line, no title) read best vertically
+  // centered. Multi-line alerts top-align instead — see `:has(.title)` below.
+  align-items: center;
   gap: var(--fui-space-3, $fui-space-3);
   padding: var(--fui-space-2, $fui-space-2) var(--fui-space-3, $fui-space-3);
   border-radius: var(--fui-radius-lg, $fui-radius-lg);
@@ -12,6 +14,12 @@
   line-height: var(--fui-line-height-normal, $fui-line-height-normal);
 }
 
+// With a title (title + description), the block is multi-line: top-align so
+// the icon and close sit with the first line rather than the block's centre.
+.alert:has(.title) {
+  align-items: flex-start;
+}
+
 // Severity variants
 .info {
   background: var(--fui-color-info-bg, $fui-color-info-bg);
@@ -47,10 +55,15 @@
   font-size: var(--fui-font-size-xs, $fui-font-size-xs);
   font-weight: var(--fui-font-weight-semibold, $fui-font-weight-semibold);
   flex-shrink: 0;
-  margin-top: var(--fui-space-px, $fui-space-px);
   color: var(--fui-text-inverse, $fui-text-inverse);
 }
 
+// Only nudge the icon down to meet the first text line when the alert is
+// multi-line; centered single-line alerts need no offset.
+.alert:has(.title) .icon {
+  margin-top: var(--fui-space-px, $fui-space-px);
+}
+
 .info .icon {
   background-color: var(--fui-color-info-text, $fui-color-info-text);
 }

package/src/components/AppShell/AppShell.module.scss

@@ -72,7 +72,10 @@
   grid-area: header;
   position: sticky;
   top: 0;
-  height: var(--appshell-header-height, var(--fui-appshell-header-height, $fui-appshell-header-height));
+  height: var(
+    --appshell-header-height,
+    var(--fui-appshell-header-height, $fui-appshell-header-height)
+  );
   z-index: var(--fui-header-z-index, $fui-header-z-index);
   background-color: inherit;
 
@@ -88,9 +91,22 @@
 .sidebar {
   grid-area: sidebar;
   position: sticky;
-  top: var(--appshell-header-height, var(--fui-appshell-header-height, $fui-appshell-header-height));
-  height: calc(100vh - var(--appshell-header-height, var(--fui-appshell-header-height, $fui-appshell-header-height)));
-  height: calc(100dvh - var(--appshell-header-height, var(--fui-appshell-header-height, $fui-appshell-header-height)));
+  top: var(
+    --appshell-header-height,
+    var(--fui-appshell-header-height, $fui-appshell-header-height)
+  );
+  height: calc(
+    100vh - var(
+        --appshell-header-height,
+        var(--fui-appshell-header-height, $fui-appshell-header-height)
+      )
+  );
+  height: calc(
+    100dvh - var(
+        --appshell-header-height,
+        var(--fui-appshell-header-height, $fui-appshell-header-height)
+      )
+  );
   z-index: 30;
   overflow: hidden;
   background-color: inherit;
@@ -171,9 +187,8 @@
   border: 1px solid var(--fui-border, $fui-border);
   border-radius: var(--fui-radius-xl, $fui-radius-xl);
   background-color: var(--fui-app-main-bg, var(--fui-main-bg, #{$fui-main-bg}));
-  box-shadow:
-    inset 0 1px 0
-      color-mix(in srgb, var(--fui-text-primary, #{$fui-text-primary}) 5%, transparent);
+  box-shadow: inset 0 1px 0
+    color-mix(in srgb, var(--fui-text-primary, #{$fui-text-primary}) 5%, transparent);
   overflow: hidden auto;
 
   @include below-md {
@@ -185,6 +200,25 @@
   }
 }
 
+// Canonical spacing scale (shared with Card/Box/Stack/Grid): sm=2 md=3 lg=4.
+// Keep these compound rules after `.mainFloating`: the explicit padding prop
+// owns the content inset even when the floating surface supplies its default.
+.main.paddingNone {
+  padding: 0;
+}
+
+.main.paddingSm {
+  padding: var(--fui-space-2, $fui-space-2);
+}
+
+.main.paddingMd {
+  padding: var(--fui-space-3, $fui-space-3);
+}
+
+.main.paddingLg {
+  padding: var(--fui-space-4, $fui-space-4);
+}
+
 // ============================================
 // Aside (Right Panel)
 // ============================================
@@ -192,9 +226,22 @@
 .aside {
   grid-area: aside;
   position: sticky;
-  top: var(--appshell-header-height, var(--fui-appshell-header-height, $fui-appshell-header-height));
-  height: calc(100vh - var(--appshell-header-height, var(--fui-appshell-header-height, $fui-appshell-header-height)));
-  height: calc(100dvh - var(--appshell-header-height, var(--fui-appshell-header-height, $fui-appshell-header-height)));
+  top: var(
+    --appshell-header-height,
+    var(--fui-appshell-header-height, $fui-appshell-header-height)
+  );
+  height: calc(
+    100vh - var(
+        --appshell-header-height,
+        var(--fui-appshell-header-height, $fui-appshell-header-height)
+      )
+  );
+  height: calc(
+    100dvh - var(
+        --appshell-header-height,
+        var(--fui-appshell-header-height, $fui-appshell-header-height)
+      )
+  );
   width: var(--aside-width, 280px);
   min-height: 0; // Allow shrinking in grid
   z-index: 30;
@@ -216,16 +263,27 @@
   // Override the explicit width so the aside fills its grid cell
   // and the margin creates visible inset space from the viewport edge.
   width: auto;
-  height: calc(100vh - var(--appshell-header-height, var(--fui-appshell-header-height, $fui-appshell-header-height)) - var(--fui-space-1, $fui-space-1) * 2);
-  height: calc(100dvh - var(--appshell-header-height, var(--fui-appshell-header-height, $fui-appshell-header-height)) - var(--fui-space-1, $fui-space-1) * 2);
+  height: calc(
+    100vh - var(
+        --appshell-header-height,
+        var(--fui-appshell-header-height, $fui-appshell-header-height)
+      ) - var(--fui-space-1, $fui-space-1) *
+      2
+  );
+  height: calc(
+    100dvh - var(
+        --appshell-header-height,
+        var(--fui-appshell-header-height, $fui-appshell-header-height)
+      ) - var(--fui-space-1, $fui-space-1) *
+      2
+  );
   margin: var(--fui-space-1, $fui-space-1) var(--fui-space-1, $fui-space-1)
     var(--fui-space-1, $fui-space-1) 0;
   border: 1px solid var(--fui-border, $fui-border);
   border-radius: var(--fui-radius-xl, $fui-radius-xl);
   background-color: var(--fui-panel-bg, inherit);
-  box-shadow:
-    inset 0 1px 0
-      color-mix(in srgb, var(--fui-text-primary, #{$fui-text-primary}) 5%, transparent);
+  box-shadow: inset 0 1px 0
+    color-mix(in srgb, var(--fui-text-primary, #{$fui-text-primary}) 5%, transparent);
   overflow: hidden;
 
   @include below-md {

package/src/components/AppShell/index.tsx

@@ -448,7 +448,7 @@ function AppShellMain({
 
   const classes = [
     styles.main,
-    padding !== "none" && styles[`padding${padding.charAt(0).toUpperCase() + padding.slice(1)}`],
+    styles[`padding${padding.charAt(0).toUpperCase() + padding.slice(1)}`],
     resolvedVariant === "floating" && styles.mainFloating,
     className,
   ]

package/src/components/Button/Button.module.scss

@@ -29,6 +29,14 @@
   white-space: nowrap;
   user-select: none;
 
+  // A composed link — `Button asChild` cloning an <a>, or an anchor rendered
+  // as a child — must wear the button's own foreground, never the global
+  // naked-link accent color (which would collide, e.g. accent-on-accent).
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+
   &:hover:not(:disabled):not([data-disabled]) {
     border-color: var(--_button-border-hover);
     background: var(--_button-bg-hover);
@@ -173,22 +181,17 @@
 }
 
 .danger {
-  --_button-bg: linear-gradient(
-    to bottom,
-    color-mix(in srgb, var(--fui-color-danger, #{$fui-color-danger}) 82%, white 18%) 0%,
-    var(--fui-color-danger, #{$fui-color-danger}) 52%,
-    color-mix(in srgb, var(--fui-color-danger, #{$fui-color-danger}) 86%, black 14%) 100%
-  );
-  --_button-bg-hover: linear-gradient(
-    to bottom,
-    color-mix(in srgb, var(--fui-color-danger, #{$fui-color-danger}) 76%, white 24%) 0%,
-    color-mix(in srgb, var(--fui-color-danger, #{$fui-color-danger}) 94%, black 6%) 52%,
-    color-mix(in srgb, var(--fui-color-danger, #{$fui-color-danger}) 78%, black 22%) 100%
+  // Flat danger fill — no gradient. Hover/active darken the solid colour.
+  --_button-bg: var(--fui-color-danger, #{$fui-color-danger});
+  --_button-bg-hover: color-mix(
+    in srgb,
+    var(--fui-color-danger, #{$fui-color-danger}) 88%,
+    black 12%
   );
-  --_button-bg-active: linear-gradient(
-    to bottom,
-    color-mix(in srgb, var(--fui-color-danger, #{$fui-color-danger}) 72%, black 28%) 0%,
-    color-mix(in srgb, var(--fui-color-danger, #{$fui-color-danger}) 82%, black 18%) 100%
+  --_button-bg-active: color-mix(
+    in srgb,
+    var(--fui-color-danger, #{$fui-color-danger}) 80%,
+    black 20%
   );
   --_button-border: color-mix(
     in srgb,
@@ -213,11 +216,7 @@
   --_button-border: var(--fui-button-neutral-border);
   --_button-border-hover: var(--fui-button-neutral-border-hover);
   --_button-color: var(--fui-button-neutral-color, var(--fui-text-primary, #{$fui-text-primary}));
-  --_button-shadow: inset 0 1px 0
-    light-dark(
-      color-mix(in srgb, white 72%, transparent),
-      color-mix(in srgb, white 5%, transparent)
-    );
+  --_button-shadow: var(--fui-button-outlined-shadow, #{$fui-button-outlined-shadow});
   --_button-shadow-hover: var(--fui-button-neutral-shadow);
   --_button-shadow-active: var(--fui-button-neutral-shadow-active);
 }

package/src/components/Card/Card.module.scss

@@ -129,15 +129,15 @@
   margin-bottom: var(--fui-space-2, $fui-space-2);
 }
 
-// Full-bleed panel-header bar: fixed 40px rail with horizontal padding and a
-// hairline bottom divider. No trailing margin — it sits flush above the
+// Full-bleed panel-header region with a 40px minimum height, canonical inset,
+// and a hairline bottom divider. No trailing margin — it sits flush above the
 // panel body, which manages its own padding. Use inside `variant="panel"`.
 .headerDivided {
   display: flex;
   align-items: center;
   gap: var(--fui-space-1, $fui-space-1);
   min-height: 2.857rem; // 40px
-  padding: 0 var(--fui-space-2, $fui-space-2);
+  padding: var(--fui-space-2, $fui-space-2);
   margin-bottom: 0;
   border-bottom: 1px solid var(--fui-border, $fui-border);
 }

package/src/components/Card/index.tsx

@@ -34,9 +34,9 @@ export interface CardProps extends Omit<React.HTMLAttributes<HTMLElement>, "chil
 
 export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
-  /** Renders the header as a divided bar: fixed height, horizontal padding,
-   * hairline bottom border, no trailing margin. Used with `variant="panel"`
-   * for dashboard-style panel headers. */
+  /** Renders the header as a divided region with a minimum height, canonical
+   * inset, hairline bottom border, and no trailing margin. Used with
+   * `variant="panel"` for dashboard-style panel headers. */
   divided?: boolean;
 }
 

package/src/components/Checkbox/Checkbox.contract.json

@@ -3,13 +3,7 @@
   "name": "Checkbox",
   "description": "Binary toggle for form fields. Use for options that require explicit submission, unlike Switch which takes effect immediately.",
   "category": "forms",
-  "tags": [
-    "checkbox",
-    "form",
-    "boolean",
-    "selection",
-    "input"
-  ],
+  "tags": ["checkbox", "form", "boolean", "selection", "input"],
   "status": "stable",
   "sourcePath": "src/components/Checkbox/index.tsx",
   "exportName": "Checkbox",
@@ -78,21 +72,14 @@
       "description": "Checkbox size",
       "default": "md",
       "required": false,
-      "values": [
-        "sm",
-        "md",
-        "lg"
-      ]
+      "values": ["sm", "md", "lg"]
     },
     "variant": {
       "type": "enum",
       "description": "Visual variant. 'default' is the inline checkbox, 'card' renders as a full-width clickable card with the checkbox tucked inside.",
       "default": "default",
       "required": false,
-      "values": [
-        "default",
-        "card"
-      ]
+      "values": ["default", "card"]
     },
     "label": {
       "type": "string",
@@ -235,17 +222,11 @@
       "description: string - deprecated alias for helperText",
       "controlClassName/contentClassName - explicit styling targets for control and content"
     ],
-    "a11yRules": [
-      "A11Y_CHECKBOX_LABEL",
-      "A11Y_CHECKBOX_FOCUS",
-      "A11Y_TARGET_SIZE_MIN"
-    ]
+    "a11yRules": ["A11Y_CHECKBOX_LABEL", "A11Y_CHECKBOX_FOCUS", "A11Y_TARGET_SIZE_MIN"]
   },
   "ai": {
     "compositionPattern": "compound",
-    "subComponents": [
-      "Root"
-    ]
+    "subComponents": ["Root"]
   },
   "provenance": {
     "source": "migrated",

package/src/components/Checkbox/Checkbox.module.scss

@@ -1,6 +1,8 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
 
+$fui-checkbox-radius: 0.25rem !default;
+
 // Wrapper for checkbox + label
 .wrapper {
   display: inline-flex;
@@ -34,7 +36,7 @@
   margin-top: 0;
   background-color: var(--fui-field-bg, $fui-bg-elevated);
   border: 1px solid var(--fui-field-border, $fui-border-strong);
-  border-radius: var(--fui-radius-sm, $fui-radius-sm);
+  border-radius: var(--fui-checkbox-radius, $fui-checkbox-radius);
   cursor: inherit;
 
   &:hover:not([data-disabled]) {
@@ -87,7 +89,7 @@
 .sm {
   width: var(--fui-icon-xs, $fui-icon-xs);
   height: var(--fui-icon-xs, $fui-icon-xs);
-  border-radius: var(--fui-radius-sm, $fui-radius-sm);
+  border-radius: var(--fui-checkbox-radius, $fui-checkbox-radius);
 }
 
 .md {

package/src/components/Chip/Chip.contract.json

@@ -3,14 +3,7 @@
   "name": "Chip",
   "description": "Interactive pill-shaped element for filtering, selecting, and tagging. Supports single and multi-select via Chip.Group.",
   "category": "forms",
-  "tags": [
-    "chip",
-    "tag",
-    "filter",
-    "selection",
-    "multi-select",
-    "action"
-  ],
+  "tags": ["chip", "tag", "filter", "selection", "multi-select", "action"],
   "status": "stable",
   "sourcePath": "src/components/Chip/index.tsx",
   "exportName": "Chip",
@@ -37,24 +30,14 @@
       "description": "Visual style variant",
       "default": "filled",
       "required": false,
-      "values": [
-        "filled",
-        "outlined",
-        "outline",
-        "soft"
-      ]
+      "values": ["filled", "outlined", "outline", "soft"]
     },
     "size": {
       "type": "enum",
       "description": "Chip size",
       "default": "md",
       "required": false,
-      "values": [
-        "xs",
-        "sm",
-        "md",
-        "lg"
-      ]
+      "values": ["xs", "sm", "md", "lg"]
     },
     "selected": {
       "type": "boolean",
@@ -135,7 +118,7 @@
     {
       "name": "Selected",
       "description": "Chip in selected state across variants",
-      "code": "<div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>\n  <Chip selected>Filled</Chip>\n  <Chip variant=\"outlined\" selected>Outlined</Chip>\n  <Chip variant=\"soft\" selected>Soft</Chip>\n</div>"
+      "code": "<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Chip selected>Filled</Chip>\n  <Chip variant=\"outlined\" selected>Outlined</Chip>\n  <Chip variant=\"soft\" selected>Soft</Chip>\n</Stack>"
     },
     {
       "name": "With Avatar",
@@ -147,6 +130,11 @@
       "description": "Removable chip with dismiss button",
       "code": "<div style={{ display: 'flex', gap: '8px' }}>\n  <Chip onRemove={() => {}}>React</Chip>\n  <Chip onRemove={() => {}}>TypeScript</Chip>\n  <Chip onRemove={() => {}}>SCSS</Chip>\n</div>"
     },
+    {
+      "name": "Selected Removable",
+      "description": "Selected removable chips retain the shared selection treatment across variants",
+      "code": "<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Chip selected onRemove={() => {}}>Filled</Chip>\n  <Chip variant=\"outlined\" selected onRemove={() => {}}>Outlined</Chip>\n  <Chip variant=\"soft\" selected onRemove={() => {}}>Soft</Chip>\n</Stack>"
+    },
     {
       "name": "Chip Group",
       "description": "Multi-select chip set with shared state",
@@ -192,16 +180,11 @@
       "Chip.Group forwards DOM props (id, role, aria-*, data-*, handlers)",
       "Chip.Group: non-string chip labels should set an explicit value"
     ],
-    "a11yRules": [
-      "A11Y_CHIP_SELECTION",
-      "A11Y_CHIP_DISMISS"
-    ]
+    "a11yRules": ["A11Y_CHIP_SELECTION", "A11Y_CHIP_DISMISS"]
   },
   "ai": {
     "compositionPattern": "compound",
-    "subComponents": [
-      "Group"
-    ]
+    "subComponents": ["Group"]
   },
   "provenance": {
     "source": "migrated",