@fluixi-ui/skin-material 0.2.1-alpha.1 → 0.3.0-alpha.11

package/README.md

@@ -10,7 +10,7 @@ Import the stylesheet after the tokens + preset, then activate with
 `data-ui="material"` on a root (or any subtree):
 
 ```ts
-import '@fluixi-ui/tokens/preset.css';
+import '@fluixi-ui/styles/all.css';
 import '@fluixi-ui/skin-material/styles.css';
 
 document.documentElement.dataset.ui = 'material';

package/dist/tsconfig.lib.tsbuildinfo

@@ -1 +1 @@
-{"fileNames":["../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es5.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2015.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2016.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2017.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2018.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2019.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2020.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2021.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2022.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.dom.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.dom.iterable.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2015.core.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2015.collection.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2015.generator.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2015.iterable.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2015.promise.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2015.proxy.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2015.reflect.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2015.symbol.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2016.array.include.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2016.intl.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2017.arraybuffer.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2017.date.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2017.object.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2017.sharedmemory.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2017.string.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2017.intl.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2017.typedarrays.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2018.asyncgenerator.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2018.asynciterable.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2018.intl.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2018.promise.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2018.regexp.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2019.array.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2019.object.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2019.string.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2019.symbol.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2019.intl.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2020.bigint.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2020.date.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2020.promise.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2020.sharedmemory.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2020.string.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2020.symbol.wellknown.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2020.intl.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2020.number.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2021.promise.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2021.string.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2021.weakref.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2021.intl.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2022.array.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2022.error.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2022.intl.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2022.object.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2022.string.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.es2022.regexp.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.decorators.d.ts","../../../node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/lib/lib.decorators.legacy.d.ts","../../../node_modules/.pnpm/tslib@2.8.1/node_modules/tslib/tslib.d.ts","../../../node_modules/.pnpm/tslib@2.8.1/node_modules/tslib/modules/index.d.ts","../src/ripple.ts"],"fileIdsList":[[60],[61]],"fileInfos":[{"version":"69684132aeb9b5642cbcd9e22dff7818ff0ee1aa831728af0ecf97d3364d5546","affectsGlobalScope":true,"impliedFormat":1},{"version":"45b7ab580deca34ae9729e97c13cfd999df04416a79116c3bfb483804f85ded4","impliedFormat":1},{"version":"3facaf05f0c5fc569c5649dd359892c98a85557e3e0c847964caeb67076f4d75","impliedFormat":1},{"version":"e44bb8bbac7f10ecc786703fe0a6a4b952189f908707980ba8f3c8975a760962","impliedFormat":1},{"version":"5e1c4c362065a6b95ff952c0eab010f04dcd2c3494e813b493ecfd4fcb9fc0d8","impliedFormat":1},{"version":"68d73b4a11549f9c0b7d352d10e91e5dca8faa3322bfb77b661839c42b1ddec7","impliedFormat":1},{"version":"5efce4fc3c29ea84e8928f97adec086e3dc876365e0982cc8479a07954a3efd4","impliedFormat":1},{"version":"feecb1be483ed332fad555aff858affd90a48ab19ba7272ee084704eb7167569","impliedFormat":1},{"version":"ee7bad0c15b58988daa84371e0b89d313b762ab83cb5b31b8a2d1162e8eb41c2","impliedFormat":1},{"version":"092c2bfe125ce69dbb1223c85d68d4d2397d7d8411867b5cc03cec902c233763","affectsGlobalScope":true,"impliedFormat":1},{"version":"07f073f19d67f74d732b1adea08e1dc66b1b58d77cb5b43931dee3d798a2fd53","affectsGlobalScope":true,"impliedFormat":1},{"version":"c57796738e7f83dbc4b8e65132f11a377649c00dd3eee333f672b8f0a6bea671","affectsGlobalScope":true,"impliedFormat":1},{"version":"dc2df20b1bcdc8c2d34af4926e2c3ab15ffe1160a63e58b7e09833f616efff44","affectsGlobalScope":true,"impliedFormat":1},{"version":"515d0b7b9bea2e31ea4ec968e9edd2c39d3eebf4a2d5cbd04e88639819ae3b71","affectsGlobalScope":true,"impliedFormat":1},{"version":"0559b1f683ac7505ae451f9a96ce4c3c92bdc71411651ca6ddb0e88baaaad6a3","affectsGlobalScope":true,"impliedFormat":1},{"version":"0dc1e7ceda9b8b9b455c3a2d67b0412feab00bd2f66656cd8850e8831b08b537","affectsGlobalScope":true,"impliedFormat":1},{"version":"ce691fb9e5c64efb9547083e4a34091bcbe5bdb41027e310ebba8f7d96a98671","affectsGlobalScope":true,"impliedFormat":1},{"version":"8d697a2a929a5fcb38b7a65594020fcef05ec1630804a33748829c5ff53640d0","affectsGlobalScope":true,"impliedFormat":1},{"version":"4ff2a353abf8a80ee399af572debb8faab2d33ad38c4b4474cff7f26e7653b8d","affectsGlobalScope":true,"impliedFormat":1},{"version":"936e80ad36a2ee83fc3caf008e7c4c5afe45b3cf3d5c24408f039c1d47bdc1df","affectsGlobalScope":true,"impliedFormat":1},{"version":"d15bea3d62cbbdb9797079416b8ac375ae99162a7fba5de2c6c505446486ac0a","affectsGlobalScope":true,"impliedFormat":1},{"version":"68d18b664c9d32a7336a70235958b8997ebc1c3b8505f4f1ae2b7e7753b87618","affectsGlobalScope":true,"impliedFormat":1},{"version":"eb3d66c8327153d8fa7dd03f9c58d351107fe824c79e9b56b462935176cdf12a","affectsGlobalScope":true,"impliedFormat":1},{"version":"38f0219c9e23c915ef9790ab1d680440d95419ad264816fa15009a8851e79119","affectsGlobalScope":true,"impliedFormat":1},{"version":"69ab18c3b76cd9b1be3d188eaf8bba06112ebbe2f47f6c322b5105a6fbc45a2e","affectsGlobalScope":true,"impliedFormat":1},{"version":"fef8cfad2e2dc5f5b3d97a6f4f2e92848eb1b88e897bb7318cef0e2820bceaab","affectsGlobalScope":true,"impliedFormat":1},{"version":"2f11ff796926e0832f9ae148008138ad583bd181899ab7dd768a2666700b1893","affectsGlobalScope":true,"impliedFormat":1},{"version":"4de680d5bb41c17f7f68e0419412ca23c98d5749dcaaea1896172f06435891fc","affectsGlobalScope":true,"impliedFormat":1},{"version":"954296b30da6d508a104a3a0b5d96b76495c709785c1d11610908e63481ee667","affectsGlobalScope":true,"impliedFormat":1},{"version":"ac9538681b19688c8eae65811b329d3744af679e0bdfa5d842d0e32524c73e1c","affectsGlobalScope":true,"impliedFormat":1},{"version":"0a969edff4bd52585473d24995c5ef223f6652d6ef46193309b3921d65dd4376","affectsGlobalScope":true,"impliedFormat":1},{"version":"9e9fbd7030c440b33d021da145d3232984c8bb7916f277e8ffd3dc2e3eae2bdb","affectsGlobalScope":true,"impliedFormat":1},{"version":"811ec78f7fefcabbda4bfa93b3eb67d9ae166ef95f9bff989d964061cbf81a0c","affectsGlobalScope":true,"impliedFormat":1},{"version":"717937616a17072082152a2ef351cb51f98802fb4b2fdabd32399843875974ca","affectsGlobalScope":true,"impliedFormat":1},{"version":"d7e7d9b7b50e5f22c915b525acc5a49a7a6584cf8f62d0569e557c5cfc4b2ac2","affectsGlobalScope":true,"impliedFormat":1},{"version":"71c37f4c9543f31dfced6c7840e068c5a5aacb7b89111a4364b1d5276b852557","affectsGlobalScope":true,"impliedFormat":1},{"version":"576711e016cf4f1804676043e6a0a5414252560eb57de9faceee34d79798c850","affectsGlobalScope":true,"impliedFormat":1},{"version":"89c1b1281ba7b8a96efc676b11b264de7a8374c5ea1e6617f11880a13fc56dc6","affectsGlobalScope":true,"impliedFormat":1},{"version":"74f7fa2d027d5b33eb0471c8e82a6c87216223181ec31247c357a3e8e2fddc5b","affectsGlobalScope":true,"impliedFormat":1},{"version":"d6d7ae4d1f1f3772e2a3cde568ed08991a8ae34a080ff1151af28b7f798e22ca","affectsGlobalScope":true,"impliedFormat":1},{"version":"063600664504610fe3e99b717a1223f8b1900087fab0b4cad1496a114744f8df","affectsGlobalScope":true,"impliedFormat":1},{"version":"934019d7e3c81950f9a8426d093458b65d5aff2c7c1511233c0fd5b941e608ab","affectsGlobalScope":true,"impliedFormat":1},{"version":"52ada8e0b6e0482b728070b7639ee42e83a9b1c22d205992756fe020fd9f4a47","affectsGlobalScope":true,"impliedFormat":1},{"version":"3bdefe1bfd4d6dee0e26f928f93ccc128f1b64d5d501ff4a8cf3c6371200e5e6","affectsGlobalScope":true,"impliedFormat":1},{"version":"59fb2c069260b4ba00b5643b907ef5d5341b167e7d1dbf58dfd895658bda2867","affectsGlobalScope":true,"impliedFormat":1},{"version":"639e512c0dfc3fad96a84caad71b8834d66329a1f28dc95e3946c9b58176c73a","affectsGlobalScope":true,"impliedFormat":1},{"version":"368af93f74c9c932edd84c58883e736c9e3d53cec1fe24c0b0ff451f529ceab1","affectsGlobalScope":true,"impliedFormat":1},{"version":"af3dd424cf267428f30ccfc376f47a2c0114546b55c44d8c0f1d57d841e28d74","affectsGlobalScope":true,"impliedFormat":1},{"version":"995c005ab91a498455ea8dfb63aa9f83fa2ea793c3d8aa344be4a1678d06d399","affectsGlobalScope":true,"impliedFormat":1},{"version":"959d36cddf5e7d572a65045b876f2956c973a586da58e5d26cde519184fd9b8a","affectsGlobalScope":true,"impliedFormat":1},{"version":"965f36eae237dd74e6cca203a43e9ca801ce38824ead814728a2807b1910117d","affectsGlobalScope":true,"impliedFormat":1},{"version":"3925a6c820dcb1a06506c90b1577db1fdbf7705d65b62b99dce4be75c637e26b","affectsGlobalScope":true,"impliedFormat":1},{"version":"0a3d63ef2b853447ec4f749d3f368ce642264246e02911fcb1590d8c161b8005","affectsGlobalScope":true,"impliedFormat":1},{"version":"b5ce7a470bc3628408429040c4e3a53a27755022a32fd05e2cb694e7015386c7","affectsGlobalScope":true,"impliedFormat":1},{"version":"8444af78980e3b20b49324f4a16ba35024fef3ee069a0eb67616ea6ca821c47a","affectsGlobalScope":true,"impliedFormat":1},{"version":"3287d9d085fbd618c3971944b65b4be57859f5415f495b33a6adc994edd2f004","affectsGlobalScope":true,"impliedFormat":1},{"version":"b4b67b1a91182421f5df999988c690f14d813b9850b40acd06ed44691f6727ad","affectsGlobalScope":true,"impliedFormat":1},{"version":"8e7f8264d0fb4c5339605a15daadb037bf238c10b654bb3eee14208f860a32ea","affectsGlobalScope":true,"impliedFormat":1},{"version":"782dec38049b92d4e85c1585fbea5474a219c6984a35b004963b00beb1aab538","affectsGlobalScope":true,"impliedFormat":1},{"version":"a6a5253138c5432c68a1510c70fe78a644fe2e632111ba778e1978010d6edfec","impliedFormat":1},{"version":"b8f34dd1757f68e03262b1ca3ddfa668a855b872f8bdd5224d6f993a7b37dc2c","impliedFormat":99},{"version":"0d9eba127f45527253640d90a7d4a726b704f73691a93b973d0d33f48dda7ae6","signature":"7c757d2e0b0b1a3d2ddb39a712eb3977f7254339a09517a89855feb72a69c854","impliedFormat":99}],"root":[62],"options":{"composite":true,"declaration":true,"declarationMap":true,"emitDeclarationOnly":false,"importHelpers":true,"module":199,"noEmitOnError":true,"noFallthroughCasesInSwitch":true,"noImplicitOverride":true,"noImplicitReturns":true,"noUnusedLocals":true,"outDir":"./","rootDir":"../src","skipLibCheck":true,"strict":true,"target":9,"tsBuildInfoFile":"./tsconfig.lib.tsbuildinfo","verbatimModuleSyntax":true},"referencedMap":[[61,1],[62,2]],"latestChangedDtsFile":"./ripple.d.ts","version":"5.8.3"}
+{"version":"7.0.2","root":[62],"packageJsons":["../../../node_modules/.pnpm/tslib@2.8.1/node_modules/tslib/modules/package.json","../../../node_modules/.pnpm/tslib@2.8.1/node_modules/tslib/package.json","../package.json"],"fileNames":["lib.es5.d.ts","lib.es2015.d.ts","lib.es2016.d.ts","lib.es2017.d.ts","lib.es2018.d.ts","lib.es2019.d.ts","lib.es2020.d.ts","lib.es2021.d.ts","lib.es2022.d.ts","lib.dom.d.ts","lib.dom.iterable.d.ts","lib.es2015.core.d.ts","lib.es2015.collection.d.ts","lib.es2015.generator.d.ts","lib.es2015.iterable.d.ts","lib.es2015.promise.d.ts","lib.es2015.proxy.d.ts","lib.es2015.reflect.d.ts","lib.es2015.symbol.d.ts","lib.es2015.symbol.wellknown.d.ts","lib.es2016.array.include.d.ts","lib.es2016.intl.d.ts","lib.es2017.arraybuffer.d.ts","lib.es2017.date.d.ts","lib.es2017.object.d.ts","lib.es2017.sharedmemory.d.ts","lib.es2017.string.d.ts","lib.es2017.intl.d.ts","lib.es2017.typedarrays.d.ts","lib.es2018.asyncgenerator.d.ts","lib.es2018.asynciterable.d.ts","lib.es2018.intl.d.ts","lib.es2018.promise.d.ts","lib.es2018.regexp.d.ts","lib.es2019.array.d.ts","lib.es2019.object.d.ts","lib.es2019.string.d.ts","lib.es2019.symbol.d.ts","lib.es2019.intl.d.ts","lib.es2020.bigint.d.ts","lib.es2020.date.d.ts","lib.es2020.promise.d.ts","lib.es2020.sharedmemory.d.ts","lib.es2020.string.d.ts","lib.es2020.symbol.wellknown.d.ts","lib.es2020.intl.d.ts","lib.es2020.number.d.ts","lib.es2021.promise.d.ts","lib.es2021.string.d.ts","lib.es2021.weakref.d.ts","lib.es2021.intl.d.ts","lib.es2022.array.d.ts","lib.es2022.error.d.ts","lib.es2022.intl.d.ts","lib.es2022.object.d.ts","lib.es2022.string.d.ts","lib.es2022.regexp.d.ts","lib.decorators.d.ts","lib.decorators.legacy.d.ts","../../../node_modules/.pnpm/tslib@2.8.1/node_modules/tslib/tslib.d.ts","../../../node_modules/.pnpm/tslib@2.8.1/node_modules/tslib/modules/index.d.ts","../src/ripple.ts"],"fileInfos":[{"version":"16934abaab7026ac114da441aabea1a0","affectsGlobalScope":true,"impliedNodeFormat":1},"d4306fb2e47f74835e8674ffac07d76f","e437c5c1302869326c3bb93da85bbbcf","e4324975a566567b21d350615f1fc6ac","333b1b9a2a9ac3b8497dba5c63b5ba50","6cffacd662b6eb5fa7a36aa2ea366bfa","b4c34f9c23304dbef2d23698637ed638","e5cb86a5fc491796ecd1d2dd348d208f","feb6c6fb19cdb246a5d8acb36a6901c7",{"version":"aae8996e8b5684814785a42cbbefcd79","affectsGlobalScope":true,"impliedNodeFormat":1},"abad6dd56cc8caf095c165df8124d237",{"version":"926204c28cd3d073865348473ae28d2e","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"f25e42c801b2cb3cf2b39792006a9beb","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"6344b55f26a4e81d9608777dbfb877dd","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"3c0ed28e53d3695b363e256ec1c023fd","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"4c2761daba7f17141c25baa0821ac5da","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"b87656acabd63e69379ff6ffcfe52fc7","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"597469522da047a5af5222cc6989f405","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"1708ea4d34dc37fadadc63ca01127e80","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"55d97a8c6fbf34a30450a7b1e5f7a298","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"0ee05eb59426d33e374226d8dcfa708b","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"e347c14030993906efcfbb88915b6a05","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"b0231263857c9b6a03641acdc9280ceb","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"3b15c4a83b598cacb4067676e6f0abed","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"b417d97b7934cef63b1889abec0bbfbf","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"09a6cf4032ebba60ce22a501e663f881","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"2b056277dd138e8f5650fc04e20eaa8d","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"e22cc07e3f3cc242ba52fa3f8ea1fc58","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"2c45da767a1bfbb220848df1bc4029e4","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"b44c3e0fbaf2130cdcf6ac38b120ffa1","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"b612fb5cf8e5d964b92063a75207632a","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"02705151a5e1551b9162a9ed8ab763f7","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"41025e398be9215d32e4337335da8f0b","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"52684c2b1f353a5538e4f275182a54cd","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"6dedb6a4f90d1df3a6fbe5693e44886c","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"ca3f36fe3562c07e0f0d71c2bebd3f6d","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"409974d6129befbb8226ddd1c6558568","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"4d9cfde2a1ae1b4925f1f9bc10848e5d","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"7e1daecc66dd564144e3bb1a0266b5fd","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"a8e1d9bb35fd0637f2f9fd2b2a54f2ec","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"4f168501772a6543182765bfd5f2fbfe","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"a19c80aad1b2162103496f5ba293a732","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"b69afa63cd5d059851c78adb2856ee09","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"ae2fc5d954e9b0f5feee3d481b953c27","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"1cfd3091a071d8b6feec15277643bafe","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"1da2c1f258970fd3cc91184f69e91a9d","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"a0d87491913d843139e0c993650a3235","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"4ef72aa378127e7b7abba915b0110b1e","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"3ec74c6a7d4463f0254db3a74cf75646","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"84c2bdfa470d075526cce6322d81b0b6","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"0b3844c2b8c73e4e1ab91431411cad11","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"4fc71cf4a15b8d99675a31df77f26e07","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"d1b49564ddaeca3df5b6dbae925d2242","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"6a25be566d60ccfc2d6e8b7bfdeefa83","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"8a20e27646985dfd58c57ca6566553dd","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"9969f02ad3cdcbf4f709405cda44167f","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"9c9be4792a7a4f42c15ae7360bf28779","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"f64453cbf9671f28158677fa5c43967a","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"33f317af5428801f944a478d2c1e38e5","affectsGlobalScope":true,"impliedNodeFormat":1},"68565f078f6cbaa18bac7ac1aee706a4",{"version":"6df9988546b1b8e15cb137c4ed46c629","impliedNodeFormat":99},{"version":"f345248cecf5c3fd86cfdae2c36e22ec","signature":"afb3872baff7c967f924f4320cf948bc","impliedNodeFormat":99}],"fileIdsList":[[60]],"options":{"composite":true,"emitDeclarationOnly":false,"declaration":true,"declarationMap":true,"importHelpers":true,"module":199,"noFallthroughCasesInSwitch":true,"noImplicitReturns":true,"noEmitOnError":true,"noUnusedLocals":true,"noImplicitOverride":true,"noUncheckedSideEffectImports":false,"outDir":"./","rootDir":"../src","skipLibCheck":true,"strict":true,"target":9,"tsBuildInfoFile":"./tsconfig.lib.tsbuildinfo","verbatimModuleSyntax":true},"referencedMap":[[61,1]],"latestChangedDtsFile":"./ripple.d.ts"}

package/material.css

@@ -10,7 +10,7 @@
  * geometry, filled text fields, emphasized motion, Roboto. (True click-origin
  * ripple needs JS; the state layer stands in for it here.)
  */
-@layer flx.tokens, flx.components, flx.skin;
+@layer flx.reset, flx.base, flx.tokens, flx.components, flx.skin, flx.fx;
 
 /* Self-hosted Roboto (variable, latin subset) — no CDN / privacy dependency. */
 @font-face {
@@ -40,7 +40,7 @@
   }
 
   /* ---- Button: pill shape, state layer, filled/tonal/outlined/text ---------- */
-  [data-ui='material'] :where([data-variant]) {
+  [data-ui='material'] :where([data-variant]:not([data-badge])) {
     position: relative;
     overflow: hidden;
     border-radius: 9999px;
@@ -56,44 +56,41 @@
   /* The Material "state layer": a currentColor overlay that fades in on interaction.
      On a filled button currentColor is the on-primary ink (white) → a subtle
      lightening; on outlined/text/tonal it's the primary colour. */
-  [data-ui='material'] :where([data-variant])::before {
+  [data-ui='material'] :where([data-variant]:not([data-badge]))::before {
     content: '';
     position: absolute;
     inset: 0;
+    /* Follow the button's own shape so the hover layer is rounded even where the
+       button isn't clipping (e.g. a glow button, which overflows). */
+    border-radius: inherit;
     background: currentColor;
     opacity: 0;
     pointer-events: none;
     transition: opacity var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
   }
-  [data-ui='material'] :where([data-variant]:hover)::before { opacity: 0.08; }
-  [data-ui='material'] :where([data-variant]:focus-visible)::before { opacity: 0.12; }
-  [data-ui='material'] :where([data-variant]:active)::before { opacity: 0.16; }
-  [data-ui='material'] :where([data-variant]:focus-visible) { box-shadow: none; outline: none; }
-  [data-ui='material'] :where([data-variant][disabled], [data-variant]:disabled) {
+  [data-ui='material'] :where([data-variant]:not([data-badge]):hover)::before { opacity: 0.08; }
+  [data-ui='material'] :where([data-variant]:not([data-badge]):focus-visible)::before { opacity: 0.12; }
+  [data-ui='material'] :where([data-variant]:not([data-badge]):active)::before { opacity: 0.16; }
+  [data-ui='material'] :where([data-variant]:not([data-badge]):focus-visible) { box-shadow: none; outline: none; }
+  [data-ui='material'] :where([data-variant]:not([data-badge])[disabled], [data-variant]:not([data-badge]):disabled) {
     box-shadow: none;
     opacity: 0.38;
   }
 
   /* Filled (solid) = the classic contained button: rests on elevation, lifts
      further on hover. Elevation is per-variant — outlined/text/tonal stay flat. */
-  [data-ui='material'] :where([data-variant='solid']) { box-shadow: var(--flx-ui-shadow-sm); }
-  [data-ui='material'] :where([data-variant='solid']:hover) { box-shadow: var(--flx-ui-shadow-md); }
-  [data-ui='material'] :where([data-variant='solid']:active) { box-shadow: var(--flx-ui-shadow-sm); }
+  [data-ui='material'] :where([data-variant='solid']:not([data-badge])) { box-shadow: var(--flx-ui-shadow-sm); }
+  [data-ui='material'] :where([data-variant='solid']:not([data-badge]):hover) { box-shadow: var(--flx-ui-shadow-md); }
+  [data-ui='material'] :where([data-variant='solid']:not([data-badge]):active) { box-shadow: var(--flx-ui-shadow-sm); }
   /* Tonal (soft): secondary-container feel. */
-  [data-ui='material'] :where([data-variant='soft']) { background: var(--flx-ui-color-primary-subtle); color: var(--flx-ui-color-primary-active); }
+  [data-ui='material'] :where([data-variant='soft']:not([data-badge])) { background: var(--flx-ui-color-primary-subtle); color: var(--flx-ui-color-primary-active); }
   /* Outlined: 1px hairline, no fill. */
-  [data-ui='material'] :where([data-variant='outline']) { border: 1px solid var(--flx-ui-color-border-strong); }
+  [data-ui='material'] :where([data-variant='outline']:not([data-badge])) { border: 1px solid var(--flx-ui-color-border-strong); }
+  [data-ui='material'] :where([data-variant='outline']:not([data-badge]):hover:not([data-disabled])) { border-color: var(--flx-ui-color-primary-hover); }
   /* Text: tighter padding, no border. */
-  [data-ui='material'] :where([data-variant='ghost']) { padding: 0 12px; }
-
-  /* Badges also carry [data-variant] — undo the button treatment (they're chips,
-     not buttons): restore size, keep the pill, drop the state layer. */
-  [data-ui='material'] :where(.flx-ui-badge[data-variant]) {
-    height: auto;
-    padding: 2px 10px;
-    box-shadow: none;
-  }
-  [data-ui='material'] :where(.flx-ui-badge[data-variant])::before { content: none; }
+  [data-ui='material'] :where([data-variant='ghost']:not([data-badge])) { padding: 0 12px; }
+  /* Badges carry [data-variant] too, but every button rule above excludes
+     [data-badge], so a badge is never treated as a button — no guard needed. */
 
   /* ---- Switch: M3 geometry (52×32 track, growing thumb) --------------------- */
   [data-ui='material'] :where([role='switch']) {
@@ -129,9 +126,26 @@
     border-width: 2px;
     border-radius: 2px;
   }
+  /* The check (rotated border) and indeterminate bar are flex items; the tighter
+     2px-border box lets flex shrink them to a sliver on the main axis. Pin them. */
+  [data-ui='material'] :where([role='checkbox'][data-state='checked'])::after,
+  [data-ui='material'] :where([role='checkbox'][data-state='indeterminate'])::after {
+    flex: none;
+  }
+  [data-ui='material'] :where([role='checkbox'][data-state='checked'])::after {
+    width: 4px;
+    height: 8px;
+    margin-top: -3px;
+  }
+  /* Multi-select listbox/select indicator box → match the material checkbox. */
+  [data-ui='material'] :where([data-select-item-indicator]) {
+    box-sizing: border-box;
+    border-width: 2px;
+    border-radius: 2px;
+  }
 
   /* ---- Slider: M3 filled thumb -------------------------------------------- */
-  [data-ui='material'] :where([role='slider']) {
+  [data-ui='material'] :where([data-slider] [role='slider']) {
     width: 20px;
     height: 20px;
     background: var(--flx-ui-color-primary);
@@ -146,18 +160,48 @@
     border-top-right-radius: 3px;
   }
 
-  /* ---- Filled text field + combobox control -------------------------------- */
-  [data-ui='material'] :where([data-input], [data-combobox-control]) {
+  /* ---- Text field / select / combobox appearance --------------------------
+     Baseline (no data-field-variant) and the explicit `filled` variant → M3
+     filled underline; `outlined` → M3 outlined box. 4px M3 radius (the tokens'
+     radius-md is 12px here). */
+  [data-ui='material'] :where(
+      [data-input]:not([data-field-variant]),
+      [data-combobox-control]:not([data-field-variant]),
+      button[role='combobox']:not([data-field-variant]),
+      [data-field-variant='filled']) {
     background: var(--flx-ui-color-bg-muted);
-    border: none;
+    border: 1px solid transparent;
     border-bottom: 1px solid var(--flx-ui-color-border-strong);
     border-radius: 4px 4px 0 0;
   }
-  [data-ui='material'] :where([data-input]:focus, [data-input]:focus-visible, [data-combobox-control]:focus-within) {
+  [data-ui='material'] :where(
+      [data-input]:not([data-field-variant]):focus,
+      [data-combobox-control]:not([data-field-variant]):focus-within,
+      button[role='combobox']:not([data-field-variant]):focus-visible,
+      button[role='combobox']:not([data-field-variant])[data-state='open'],
+      [data-field-variant='filled']:focus,
+      [data-field-variant='filled']:focus-visible,
+      [data-field-variant='filled']:focus-within) {
     border-bottom: 2px solid var(--flx-ui-color-primary);
     box-shadow: none;
     outline: none;
   }
+  /* Outlined → M3 outlined box (4px), 2px primary border on focus. */
+  [data-ui='material'] :where([data-field-variant='outlined']) {
+    background: transparent;
+    border: 1px solid var(--flx-ui-color-border-strong);
+    border-radius: 4px;
+  }
+  [data-ui='material'] :where([data-field-variant='outlined']:focus, [data-field-variant='outlined']:focus-visible, [data-field-variant='outlined']:focus-within) {
+    border: 2px solid var(--flx-ui-color-primary);
+    box-shadow: none;
+    outline: none;
+  }
+  /* The combobox's inner input must stay bare — the wrapper carries the field. */
+  [data-ui='material'] :where([data-combobox-control] [role='combobox']) {
+    background: transparent;
+    border: none;
+  }
 
   /* ---- Menus & lists: full-bleed M3 rows, roomier padding ------------------- */
   [data-ui='material'] :where([role='menuitem'], [role='option']) {
@@ -212,15 +256,299 @@
     opacity: 0.4;
   }
 
+  /* ---- Surface & Card: M3 elevation (softer than the raw shadow tokens, which
+     are tuned for pop-overs; on a plain container they read too heavy) ------- */
+  [data-ui='material'] :where([data-surface]) {
+    border-radius: 12px;
+  }
+  [data-ui='material'] :where([data-surface][data-elevation='0']) {
+    box-shadow: none;
+  }
+  [data-ui='material'] :where([data-surface][data-elevation='1']),
+  [data-ui='material'] :where([data-card]) {
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0, 0, 0, 0.08);
+  }
+  [data-ui='material'] :where([data-surface][data-elevation='2']) {
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.13), 0 2px 6px rgba(0, 0, 0, 0.1);
+  }
+  [data-ui='material'] :where([data-surface][data-elevation='3']) {
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.1);
+  }
+  [data-ui='material'] :where([data-surface][data-elevation='4']) {
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 6px 12px rgba(0, 0, 0, 0.1);
+  }
+  [data-ui='material'] :where([data-card]) {
+    border-radius: 12px;
+  }
+
+  /* ---- Calendar: M3 date grid — circular days, outlined "today", state-layer
+     nav, and a tonal band across a selected range. ------------------------- */
+  [data-ui='material'] :where([data-calendar-day]) {
+    border-radius: 9999px;
+    font-weight: 500;
+  }
+  [data-ui='material'] :where([data-calendar-day]:hover:not([data-disabled]):not([data-selected])) {
+    background: color-mix(in oklab, var(--flx-ui-color-primary) 10%, transparent);
+    color: inherit;
+  }
+  [data-ui='material'] :where([data-calendar-day][data-today]:not([data-selected])) {
+    border: 1px solid var(--flx-ui-color-primary);
+    color: var(--flx-ui-color-primary);
+  }
+  [data-ui='material'] :where([data-calendar-nav]) {
+    border: none;
+    border-radius: 9999px;
+  }
+  [data-ui='material'] :where([data-calendar-nav]:hover:not([disabled])) {
+    background: color-mix(in oklab, currentColor 8%, transparent);
+  }
+  /* Range: circular ends, a flat secondary-container band through the middle. */
+  [data-ui='material'] :where([data-range] [data-calendar-day][data-selected]) {
+    border-radius: 0;
+    background: var(--flx-ui-color-primary-subtle);
+    color: var(--flx-ui-color-primary-active);
+  }
+  [data-ui='material'] :where([data-range] [data-calendar-day][data-selection-start]) {
+    border-radius: 9999px 0 0 9999px;
+  }
+  [data-ui='material'] :where([data-range] [data-calendar-day][data-selection-end]) {
+    border-radius: 0 9999px 9999px 0;
+  }
+  [data-ui='material'] :where([data-range] [data-calendar-day][data-selection-start][data-selection-end]) {
+    border-radius: 9999px;
+  }
+  [data-ui='material'] :where([data-calendar-day][data-selection-start], [data-calendar-day][data-selection-end]) {
+    background: var(--flx-ui-color-primary);
+    color: var(--flx-ui-color-primary-fg);
+  }
+
+  /* ---- Date field & date picker: filled segmented control + M3 date-picker
+     surface, matching the filled text-field language above. ---------------- */
+  /* The field frame carries the filled fill + underline; the segment input nested
+     inside the picker control stays transparent so the underline isn't doubled. */
+  [data-ui='material'] :where([data-date-field-input], [data-date-picker-control]) {
+    background: var(--flx-ui-color-bg-muted);
+    border: none;
+    border-bottom: 1px solid var(--flx-ui-color-border-strong);
+    border-radius: 4px 4px 0 0;
+  }
+  [data-ui='material'] :where([data-date-field-input]:focus-within, [data-date-picker-control]:focus-within) {
+    border-bottom: 2px solid var(--flx-ui-color-primary);
+    box-shadow: none;
+    outline: none;
+  }
+  [data-ui='material'] :where([data-date-picker-input]) {
+    background: transparent;
+    border: none;
+  }
+  [data-ui='material'] :where([data-date-picker-content]) {
+    border-radius: 16px;
+    box-shadow: 0 4px 8px 3px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.2);
+  }
+
+  /* ---- Accordion: flat M3 list — no outer frame, dividers between items, a
+     state-layer on the header rather than a filled hover. ------------------ */
+  [data-ui='material'] :where([data-accordion]) {
+    border: none;
+    border-radius: 0;
+  }
+  [data-ui='material'] :where([data-accordion-item]:not(:last-child)) {
+    border-bottom: 1px solid var(--flx-ui-color-border);
+  }
+  [data-ui='material'] :where([data-accordion-trigger]) {
+    padding: 16px var(--flx-ui-space-4);
+    font-weight: 500;
+  }
+  [data-ui='material'] :where([data-accordion-trigger]:hover:not([data-disabled])) {
+    background: color-mix(in oklab, var(--flx-ui-color-fg) 6%, transparent);
+  }
+
+  /* ---- Radio: M3 20px target ---------------------------------------------- */
+  [data-ui='material'] :where([role='radio']) {
+    width: 20px;
+    height: 20px;
+    border-width: 2px;
+  }
+
+  /* ---- Toggle / segmented button: selected = secondary-container ----------- */
+  [data-ui='material'] :where([aria-pressed][data-state='on']) {
+    background: var(--flx-ui-color-primary-subtle);
+    border-color: transparent;
+    color: var(--flx-ui-color-primary-active);
+  }
+
+  /* ---- Number field: filled control row to match the text fields ---------- */
+  [data-ui='material'] :where([data-number-field-input-row]) {
+    background: var(--flx-ui-color-bg-muted);
+    border: none;
+    border-bottom: 1px solid var(--flx-ui-color-border-strong);
+    border-radius: 4px 4px 0 0;
+  }
+  [data-ui='material'] :where([data-number-field-input-row]:focus-within) {
+    border-bottom: 2px solid var(--flx-ui-color-primary);
+  }
+
+  /* ---- Linear progress: 4dp fully-rounded track, tonal remainder ---------- */
+  [data-ui='material'] :where([role='progressbar']:not([data-circular])) {
+    height: 4px;
+    border-radius: 9999px;
+    background: var(--flx-ui-color-primary-subtle);
+  }
+
+  /* ---- Sidenav: M3 navigation drawer — full-pill items, state-layer hover,
+     secondary-container active, elevated menu flyout. --------------------- */
+  [data-ui='material'] :where([data-sidenav-link], [data-sidenav-sub-trigger]) {
+    border-radius: 9999px;
+    font-weight: 500;
+  }
+  [data-ui='material'] :where([data-sidenav-link]:hover:not([data-active]),
+    [data-sidenav-sub-trigger]:hover:not([data-active])) {
+    background: color-mix(in oklab, var(--flx-ui-color-fg) 8%, transparent);
+    color: inherit;
+  }
+  [data-ui='material'] :where([data-sidenav-link][data-active],
+    [data-sidenav-sub-trigger][data-active]) {
+    background: var(--flx-ui-color-primary-subtle);
+    color: var(--flx-ui-color-primary-active);
+    font-weight: 600;
+  }
+  [data-ui='material'] :where([data-sidenav-trigger]) {
+    border-radius: 9999px;
+  }
+  /* Flyout: an elevated M3 menu surface; its rows keep the pill treatment. */
+  [data-ui='material'] :where([data-sidenav-sub-content][data-flyout]) {
+    border-radius: 12px;
+    box-shadow: var(--flx-ui-shadow-lg);
+    padding: var(--flx-ui-space-2);
+  }
+  [data-ui='material'] :where([data-sidenav][data-mobile]) {
+    border-radius: 0 16px 16px 0;
+  }
+  [data-ui='material'] :where([data-sidenav][data-mobile][data-side='right']) {
+    border-radius: 16px 0 0 16px;
+  }
+
+  /* ---- Pagination: circular pages, filled current ------------------------- */
+  [data-ui='material'] :where([data-pagination-page], [data-pagination-prev], [data-pagination-next]) {
+    border-radius: 9999px;
+  }
+  [data-ui='material'] :where([data-pagination-page]:hover:not([data-current])) {
+    background: color-mix(in oklab, var(--flx-ui-color-fg) 8%, transparent);
+  }
+  [data-ui='material'] :where([data-pagination-page][data-current]) {
+    background: var(--flx-ui-color-primary);
+    color: var(--flx-ui-color-primary-fg);
+    border-color: transparent;
+  }
+
+  /* ---- Stepper: circular numbered indicators ------------------------------ */
+  [data-ui='material'] :where([data-stepper-indicator]) {
+    border-radius: 9999px;
+  }
+
+  /* ---- Breadcrumb: state-layer link affordance ---------------------------- */
+  /* Padded pill targets so the state-layer has room to breathe (M3). */
+  [data-ui='material'] :where([data-breadcrumb-link]) {
+    padding: 2px 8px;
+    margin: 0 -2px;
+    border-radius: 999px;
+  }
+  [data-ui='material'] :where([data-breadcrumb-link]:hover) {
+    background: color-mix(in oklab, var(--flx-ui-color-fg) 8%, transparent);
+    color: var(--flx-ui-color-fg);
+  }
+  [data-ui='material'] :where([data-breadcrumb-page]) {
+    padding: 2px 8px;
+  }
+
+  /* ---- Toolbar: M3 surface + pill state-layer buttons ---------------------- */
+  [data-ui='material'] :where([role='toolbar']) {
+    border-radius: 8px;
+    gap: 2px;
+  }
+  [data-ui='material'] :where([role='toolbar'] > button:not([aria-pressed])) {
+    border-radius: 999px;
+  }
+  [data-ui='material'] :where([role='toolbar'] > button:not([aria-pressed]):hover) {
+    background: color-mix(in oklab, var(--flx-ui-color-fg) 8%, transparent);
+    color: var(--flx-ui-color-fg);
+  }
+
+  /* ---- Navigation menu & menubar: state-layer triggers, rounded ----------- */
+  [data-ui='material'] :where([data-navigation-menu-trigger]:hover),
+  [data-ui='material'] :where([role='menubar'] > [role='menuitem']:hover) {
+    background: color-mix(in oklab, var(--flx-ui-color-fg) 8%, transparent);
+    border-radius: 8px;
+  }
+
+  /* ---- Command & menu rows: M3 state layer over the flat rows -------------- */
+  [data-ui='material'] :where([data-command-item][data-active]) {
+    background: color-mix(in oklab, var(--flx-ui-color-fg) 8%, transparent);
+  }
+
+  /* ---- Table: flat M3 data table — no frame, divider-only rows, sentence-case
+     header (no all-caps), state-layer hover/selection, comfortable density -- */
+  [data-ui='material'] :where([data-table]) {
+    border: none;
+    border-radius: 0;
+  }
+  [data-ui='material'] :where([data-table-head]) {
+    background: transparent;
+    color: var(--flx-ui-color-fg-muted);
+    font-size: var(--flx-ui-font-size-sm);
+    font-weight: 500;
+    letter-spacing: normal;
+    text-transform: none;
+    padding: var(--flx-ui-space-3);
+    border-bottom: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
+  }
+  [data-ui='material'] :where([data-table-cell]) {
+    padding: var(--flx-ui-space-3);
+  }
+  [data-ui='material'] :where([data-table-body] > [data-table-row]:hover) {
+    background: color-mix(in oklab, var(--flx-ui-color-fg) 5%, transparent);
+  }
+  [data-ui='material'] :where([data-table-row][data-selected]),
+  [data-ui='material'] :where([data-table-row][data-selected]:hover) {
+    background: color-mix(in oklab, var(--flx-ui-color-primary) 10%, transparent);
+  }
+  /* Header is transparent now, so pinned cells need an opaque surface fill. */
+  [data-ui='material'] :where([data-table-cell][data-pinned]),
+  [data-ui='material'] :where([data-table-head][data-pinned]) {
+    background: var(--flx-ui-color-bg);
+  }
+  /* Compact density under Material. */
+  [data-ui='material'] :where([data-table][data-density='compact'] [data-table-head]),
+  [data-ui='material'] :where([data-table][data-density='compact'] [data-table-cell]) {
+    padding: var(--flx-ui-space-1) var(--flx-ui-space-2);
+  }
+
+  /* ---- Toast: M3 snackbar shape + elevation (keeps the type accent) -------- */
+  [data-ui='material'] :where([data-toast]) {
+    border-radius: 4px;
+    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2), 0 1px 18px rgba(0, 0, 0, 0.12);
+  }
+
+  /* ---- Alert: M3 medium radius ------------------------------------------- */
+  [data-ui='material'] :where([data-alert]) {
+    border-radius: 12px;
+  }
+
   /* ---- Click-origin ripple (installed by the ripple primitive) ------------- */
-  [data-ui='material'] :where([data-variant], [role='menuitem'], [role='option'], [role='tab']) {
+  [data-ui='material'] :where([data-variant]:not([data-badge]), [role='menuitem'], [role='option'], [role='tab']) {
     position: relative;
     overflow: hidden;
   }
+  /* A glow button draws its ring on ::after at the border edge; the ripple's
+     overflow:hidden would clip it, so let a glow button overflow. */
+  [data-ui='material'] :where([data-variant]:not([data-badge])[data-glow]) {
+    overflow: visible;
+  }
   [data-ui='material'] .flx-mat-ripple {
     position: absolute;
     border-radius: 50%;
-    background: currentColor;
+    /* Overridable per-control via --flx-mat-ripple-color; defaults to the ink. */
+    background: var(--flx-mat-ripple-color, currentColor);
     opacity: 0;
     transform: scale(0);
     pointer-events: none;
@@ -242,4 +570,333 @@
       opacity: 0;
     }
   }
+
+  /* ---- Progress: M3 linear (4px, tonal track) ------------------------------- */
+  [data-ui='material'] :where([role='progressbar']:not([data-circular])) {
+    height: 4px;
+    background: var(--flx-ui-color-primary-subtle);
+  }
+  [data-ui='material'] :where([role='progressbar']:not([data-circular]))::after {
+    background: var(--flx-ui-color-primary);
+  }
+
+  /* ---- Slider: M3 (thin tonal track, filled active range) ------------------- */
+  [data-ui='material'] :where([data-slider-track]) {
+    height: 4px;
+    background: var(--flx-ui-color-primary-subtle);
+  }
+  [data-ui='material'] :where([data-slider-range]) {
+    background: var(--flx-ui-color-primary);
+  }
+
+  /* ---- Badge: M3 label (medium weight, subtle tracking) --------------------- */
+  [data-ui='material'] :where([data-badge]) {
+    font-weight: var(--flx-ui-font-weight-medium);
+    letter-spacing: 0.02em;
+  }
+
+  /* ---- Avatar: M3 rounded-square option stays circular; add tonal ring ------ */
+  [data-ui='material'] :where([data-avatar]) {
+    font-weight: var(--flx-ui-font-weight-medium);
+  }
+
+  /* ---- Statistic: M3 display number (tighter tracking) ---------------------- */
+  [data-ui='material'] :where([data-statistic-value]) {
+    font-weight: var(--flx-ui-font-weight-semibold);
+    letter-spacing: -0.01em;
+  }
+  [data-ui='material'] :where([data-statistic-label]) {
+    letter-spacing: 0.06em;
+  }
+
+  /* ---- Empty: M3 icon tile (rounded-large, tonal) --------------------------- */
+  [data-ui='material'] :where([data-empty-icon]) {
+    width: 48px;
+    height: 48px;
+    border-radius: 16px;
+    background: var(--flx-ui-color-primary-subtle);
+    color: var(--flx-ui-color-primary);
+  }
+
+  /* ---- Timeline: M3 dot state-layer ---------------------------------------- */
+  [data-ui='material'] :where([data-timeline-indicator]:empty)::before {
+    box-shadow: 0 0 0 4px color-mix(in srgb, var(--flx-timeline-dot) 14%, transparent);
+  }
+
+  /* ---- Descriptions: M3 term (medium, tracked) ------------------------------ */
+  [data-ui='material'] :where([data-descriptions-term]) {
+    font-weight: var(--flx-ui-font-weight-medium);
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    font-size: var(--flx-ui-font-size-2xs, 11px);
+  }
+
+  /* ---- Switch: Material (thin track, prominent thumb, ripple state-layer) ---- */
+  [data-ui='material'] :where([role='switch']) {
+    width: 34px;
+    height: 14px;
+    padding: 0;
+    border: none;
+    overflow: visible;
+    position: relative;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--flx-ui-color-fg) 26%, transparent);
+  }
+  [data-ui='material'] :where([role='switch'][data-state='checked']) {
+    background: color-mix(in srgb, var(--flx-ui-color-primary) 50%, transparent);
+    filter: none;
+  }
+  [data-ui='material'] :where([role='switch']:hover:not([data-disabled])) {
+    filter: none;
+  }
+  /* Thumb — 20px circle, larger than the 14px track so it overlaps it. */
+  [data-ui='material'] :where([role='switch'])::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 20px;
+    height: 20px;
+    margin: 0;
+    border-radius: 50%;
+    background: #fff;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    transform: translate(-2px, -50%);
+    transition:
+      transform var(--flx-ui-duration-normal) var(--flx-ui-ease-emphasized),
+      background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+  }
+  [data-ui='material'] :where([role='switch'][data-state='checked'])::after {
+    background: var(--flx-ui-color-primary);
+    transform: translate(16px, -50%);
+  }
+  /* Ripple / state-layer — a translucent disc behind the thumb, following it. */
+  [data-ui='material'] :where([role='switch'])::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: var(--flx-ui-color-fg);
+    opacity: 0;
+    pointer-events: none;
+    transform: translate(-12px, -50%) scale(0.7);
+    transition:
+      opacity var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
+      transform var(--flx-ui-duration-normal) var(--flx-ui-ease-emphasized);
+  }
+  [data-ui='material'] :where([role='switch'][data-state='checked'])::before {
+    background: var(--flx-ui-color-primary);
+    transform: translate(6px, -50%) scale(0.7);
+  }
+  [data-ui='material'] :where([role='switch']:hover:not([data-disabled]))::before {
+    opacity: 0.09;
+    transform: translate(-12px, -50%) scale(1);
+  }
+  [data-ui='material'] :where([role='switch'][data-state='checked']:hover:not([data-disabled]))::before {
+    transform: translate(6px, -50%) scale(1);
+  }
+  [data-ui='material'] :where([role='switch']:active:not([data-disabled]))::before {
+    opacity: 0.18;
+  }
+
+  /* ---- Slider thumb: Material filled handle + ripple state-layer ------------- */
+  [data-ui='material'] :where([data-slider] [role='slider']) {
+    background: var(--flx-ui-color-primary);
+    border-color: var(--flx-ui-color-primary);
+  }
+  [data-ui='material'] :where([data-slider] [role='slider'])::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: var(--flx-ui-color-primary);
+    opacity: 0;
+    pointer-events: none;
+    transform: translate(-50%, -50%) scale(0.4);
+    transition:
+      opacity var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
+      transform var(--flx-ui-duration-normal) var(--flx-ui-ease-emphasized);
+  }
+  [data-ui='material'] :where([data-slider] [role='slider']:hover:not([data-disabled]))::before {
+    opacity: 0.12;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  [data-ui='material'] :where([data-slider] [role='slider']:active)::before,
+  [data-ui='material'] :where([data-slider] [role='slider']:focus-visible)::before {
+    opacity: 0.2;
+    transform: translate(-50%, -50%) scale(1);
+  }
+
+  /* ---- Popup surfaces: one consistent M3 shape (small radius, tight elevation)
+   * Unifies every floating surface — menus, listboxes, datepicker, command,
+   * hovercard, nav-menu — which previously ranged from radius-md (12px) to
+   * radius-lg (16px) with a heavy shadow-lg. Tooltip already matches at 4px. */
+  [data-ui='material'] :where(
+    [role='menu'],
+    [role='listbox'],
+    [data-date-picker-content],
+    [data-navigation-menu-content],
+    [data-command],
+    [data-hovercard-content]
+  ) {
+    border-radius: 4px;
+    box-shadow:
+      0 2px 6px rgba(0, 0, 0, 0.16),
+      0 1px 3px rgba(0, 0, 0, 0.1);
+  }
+
+  /* ---- Checkbox & radio: M3 state-layer ripple -------------------------------
+   * The ripple lives on ::before at z-index:-1 so it paints ABOVE the control's
+   * background but BELOW its content (the base check/dot on ::after). This leaves
+   * the base marks completely untouched — do NOT restyle ::after here, the base
+   * check is a flex-centred rotated border and the radio dot is position:absolute;
+   * inset:3px, both of which break if position/box-sizing is overridden. */
+  [data-ui='material'] :where([role='checkbox']),
+  [data-ui='material'] :where([role='radio']) {
+    position: relative;
+    overflow: visible;
+  }
+  [data-ui='material'] :where([role='checkbox'])::before,
+  [data-ui='material'] :where([role='radio'])::before {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    top: 50%;
+    left: 50%;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: var(--flx-ui-color-primary);
+    opacity: 0;
+    pointer-events: none;
+    transform: translate(-50%, -50%) scale(0.5);
+    transition:
+      opacity var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
+      transform var(--flx-ui-duration-normal) var(--flx-ui-ease-emphasized);
+  }
+  [data-ui='material'] :where([role='checkbox']:hover:not([data-disabled]))::before,
+  [data-ui='material'] :where([role='radio']:hover:not([data-disabled]))::before {
+    opacity: 0.1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  [data-ui='material'] :where([role='checkbox']:active:not([data-disabled]))::before,
+  [data-ui='material'] :where([role='radio']:active:not([data-disabled]))::before,
+  [data-ui='material'] :where([role='checkbox']:focus-visible)::before,
+  [data-ui='material'] :where([role='radio']:focus-visible)::before {
+    opacity: 0.18;
+    transform: translate(-50%, -50%) scale(1);
+  }
+
+  /* ---- Circular progress: 4dp tonal track, round cap (matches linear) ------ */
+  [data-ui='material'] :where([data-progress-track]) {
+    stroke: var(--flx-ui-color-primary-subtle);
+  }
+  [data-ui='material'] :where([data-progress-indicator]) {
+    stroke-linecap: round;
+  }
+
+  /* ---- Avatar group: tonal secondary-container overflow chip --------------- */
+  [data-ui='material'] :where([data-avatar-group-overflow]) {
+    background: var(--flx-ui-color-primary-subtle);
+    color: var(--flx-ui-color-primary-active);
+  }
+
+  /* ---- Rating: filled primary stars, roomier M3 spacing ------------------- */
+  [data-ui='material'] :where([data-rating]) {
+    --flx-ui-rating-gap: 4px;
+    --flx-ui-rating-color: var(--flx-ui-color-primary);
+  }
+
+  /* ---- PIN input: M3 filled cells with the shared underline treatment ------ */
+  [data-ui='material'] :where([data-pin-input-field]) {
+    background: var(--flx-ui-color-bg-muted);
+    border: none;
+    border-bottom: 1px solid var(--flx-ui-color-border-strong);
+    border-radius: 4px 4px 0 0;
+  }
+  [data-ui='material'] :where([data-pin-input-field]:focus, [data-pin-input-field]:focus-visible) {
+    border-bottom: 2px solid var(--flx-ui-color-primary);
+    box-shadow: none;
+    outline: none;
+  }
+
+  /* ---- Icon button: M3 round, size-aware (overrides the fixed 40px pill) ---- */
+  [data-ui='material'] :where([data-icon-button]) {
+    padding: 0;
+    width: var(--flx-ui-size-md);
+    height: var(--flx-ui-size-md);
+    border-radius: 9999px;
+  }
+  [data-ui='material'] :where([data-icon-button][data-size='sm']) {
+    width: var(--flx-ui-size-sm);
+    height: var(--flx-ui-size-sm);
+  }
+  [data-ui='material'] :where([data-icon-button][data-size='lg']) {
+    width: var(--flx-ui-size-lg);
+    height: var(--flx-ui-size-lg);
+  }
+
+  /* ---- FAB: M3 primary-container, resting elevation, larger radius. Re-assert
+     the FAB geometry the fixed-40px button rule above would otherwise impose. */
+  [data-ui='material'] :where([data-fab]) {
+    width: 56px;
+    height: 56px;
+    padding: 0;
+    border-radius: 16px;
+    background: var(--flx-ui-color-primary-subtle);
+    color: var(--flx-ui-color-primary-active);
+    box-shadow: var(--flx-ui-shadow-md);
+  }
+  [data-ui='material'] :where([data-fab]:hover:not([data-disabled])) {
+    box-shadow: var(--flx-ui-shadow-lg);
+  }
+  [data-ui='material'] :where([data-fab][data-fab-size='sm']) { width: 40px; height: 40px; border-radius: 12px; }
+  [data-ui='material'] :where([data-fab][data-fab-size='lg']) { width: 64px; height: 64px; border-radius: 28px; }
+  [data-ui='material'] :where([data-fab][data-fab-extended]) {
+    width: auto;
+    height: 56px;
+    padding: 0 20px;
+    border-radius: 16px;
+  }
+  /* A solid-toned FAB keeps the primary fill instead of the tonal container. */
+  [data-ui='material'] :where([data-fab][data-variant='solid']) {
+    background: var(--flx-ui-color-primary);
+    color: var(--flx-ui-color-primary-fg);
+  }
+
+  /* ---- Speed dial: elevated action buttons -------------------------------- */
+  [data-ui='material'] :where([data-speed-dial-action]) {
+    box-shadow: var(--flx-ui-shadow-sm);
+  }
+
+  /* ---- Carousel: M3 expanding indicators + circular controls -------------- */
+  [data-ui='material'] :where([data-carousel-dot]) {
+    border-radius: var(--flx-ui-radius-full, 999px);
+    transition: width var(--flx-ui-duration-normal, 250ms) var(--flx-ui-ease-standard, ease),
+      background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+  }
+  /* Active indicator grows into a pill, à la M3 carousels. */
+  [data-ui='material'] :where([data-carousel-dot][data-active]) {
+    width: 24px;
+    background: var(--flx-ui-color-primary);
+  }
+  [data-ui='material'] :where([data-carousel-prev], [data-carousel-next]) {
+    display: inline-grid;
+    place-items: center;
+    inline-size: 40px;
+    block-size: 40px;
+    border: 0;
+    border-radius: var(--flx-ui-radius-full, 999px);
+    background: var(--flx-ui-color-bg-muted);
+    color: var(--flx-ui-color-fg);
+  }
+  [data-ui='material'] :where([data-carousel-prev]:hover:not([disabled]), [data-carousel-next]:hover:not([disabled])) {
+    background: color-mix(in srgb, var(--flx-ui-color-fg) 8%, var(--flx-ui-color-bg-muted));
+  }
 }

package/material.css.js

@@ -0,0 +1,8 @@
+const href = new URL('./material.css', import.meta.url).href;
+if (typeof document !== 'undefined' && !document.querySelector(`link[data-flx-ui="${href}"]`)) {
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = href;
+  link.dataset.flxUi = href;
+  document.head.appendChild(link);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluixi-ui/skin-material",
-  "version": "0.2.1-alpha.1",
+  "version": "0.3.0-alpha.11",
   "description": "Material Design skin for Fluixi UI — activate with data-ui=\"material\"",
   "license": "MIT",
   "private": false,
@@ -21,6 +21,7 @@
     "dist",
     "fonts",
     "material.css",
+    "material.css.js",
     "README.md",
     "LICENSE"
   ],
@@ -34,6 +35,6 @@
     }
   },
   "scripts": {
-    "build": "tsc -p tsconfig.lib.json"
+    "build": "tsc -p tsconfig.lib.json && node ../../scripts/css-loaders.mjs material.css"
   }
 }