@fluixi-ui/skin-material 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Fluixi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,43 @@
+# @fluixi-ui/skin-material
+
+A Material Design skin for Fluixi UI. Restyles the components to a Material 3
+flavour — pill buttons with state layers and elevation, M3 switch geometry,
+filled text fields, emphasized motion, and Roboto.
+
+## Usage
+
+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/skin-material/styles.css';
+
+document.documentElement.dataset.ui = 'material';
+```
+
+Or drive it reactively with core's `createTheme`, lazy-loading the CSS only when
+the skin is active:
+
+```ts
+import { createTheme } from '@fluixi/core';
+
+const skin = createTheme({
+  attribute: 'data-ui',
+  themes: ['fluixi', 'material'],
+  default: 'fluixi',
+  load: (s) => s === 'material' && import('@fluixi-ui/skin-material/styles.css'),
+});
+skin.init();
+```
+
+## How it works
+
+All rules live in the `flx.skin` cascade layer, which sits **above**
+`flx.components` (the default fluixi look), so they win wherever they match —
+while consumer CSS stays unlayered and wins over both. Everything is scoped to
+`[data-ui="material"]`, so the skin only applies where you opt in, and it
+composes with the `data-theme` (light/dark) and `data-accent` axes.
+
+> True click-origin ripple needs JavaScript; this CSS-only skin uses a
+> currentColor **state layer** (hover / focus / press) as a close stand-in.

package/dist/ripple.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Material click-origin ripple — the one piece the CSS state layer can't do
+ * (it needs the pointer position). Call `installRipple()` once; it delegates a
+ * single `pointerdown` listener that spawns an expanding circle inside any
+ * Material control. The ripple's styles + keyframes ship in the skin stylesheet.
+ */
+/**
+ * Attach the ripple delegate to a root (default `document`). Returns a disposer
+ * that removes the listener. Safe to no-op on the server.
+ */
+export declare function installRipple(root?: Document | HTMLElement): () => void;
+//# sourceMappingURL=ripple.d.ts.map

package/dist/ripple.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ripple.d.ts","sourceRoot":"","sources":["../src/ripple.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH;;;GAGG;AACH,wBAAgB,aAAa,CAAC,IAAI,GAAE,QAAQ,GAAG,WAAiC,GAAG,MAAM,IAAI,CAe5F"}

package/dist/ripple.js

@@ -0,0 +1,43 @@
+/**
+ * Material click-origin ripple — the one piece the CSS state layer can't do
+ * (it needs the pointer position). Call `installRipple()` once; it delegates a
+ * single `pointerdown` listener that spawns an expanding circle inside any
+ * Material control. The ripple's styles + keyframes ship in the skin stylesheet.
+ */
+const RIPPLE_SELECTOR = '[data-variant], [role="menuitem"], [role="option"], [role="tab"]';
+/**
+ * Attach the ripple delegate to a root (default `document`). Returns a disposer
+ * that removes the listener. Safe to no-op on the server.
+ */
+export function installRipple(root = globalThis.document) {
+    if (!root || typeof root.addEventListener !== 'function')
+        return () => { };
+    const onPointerDown = (event) => {
+        const e = event;
+        if (e.button !== 0)
+            return; // primary button / touch only
+        const origin = e.target;
+        const el = origin?.closest(RIPPLE_SELECTOR);
+        if (!el || !el.closest('[data-ui="material"]'))
+            return;
+        if (el.hasAttribute('disabled') || el.getAttribute('aria-disabled') === 'true')
+            return;
+        spawnRipple(el, e);
+    };
+    root.addEventListener('pointerdown', onPointerDown, { passive: true });
+    return () => root.removeEventListener('pointerdown', onPointerDown);
+}
+function spawnRipple(el, e) {
+    const rect = el.getBoundingClientRect();
+    // Cover the element from the click point: diameter = 2× the farthest corner.
+    const dx = Math.max(e.clientX - rect.left, rect.right - e.clientX);
+    const dy = Math.max(e.clientY - rect.top, rect.bottom - e.clientY);
+    const size = 2 * Math.hypot(dx, dy);
+    const ripple = document.createElement('span');
+    ripple.className = 'flx-mat-ripple';
+    ripple.style.width = ripple.style.height = `${size}px`;
+    ripple.style.left = `${e.clientX - rect.left - size / 2}px`;
+    ripple.style.top = `${e.clientY - rect.top - size / 2}px`;
+    ripple.addEventListener('animationend', () => ripple.remove(), { once: true });
+    el.appendChild(ripple);
+}

package/dist/tsconfig.lib.tsbuildinfo

@@ -0,0 +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"}

package/material.css

@@ -0,0 +1,213 @@
+/**
+ * @fluixi-ui/skin-material — a Material Design skin for Fluixi UI.
+ *
+ * Activate by setting `data-ui="material"` on a root (or any subtree). All rules
+ * live in the `flx.skin` cascade layer, which sits above `flx.components`, so
+ * they override the default fluixi look wherever they match; consumer CSS stays
+ * unlayered and still wins. Import after the tokens + preset.
+ *
+ * Approximates Material 3: pill buttons with state layers + elevation, M3 switch
+ * 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;
+
+/* Self-hosted Roboto (variable, latin subset) — no CDN / privacy dependency. */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('./fonts/roboto-latin-variable.woff2') format('woff2');
+}
+
+@layer flx.skin {
+  /* ---- Global Material tokens ---------------------------------------------- */
+  [data-ui='material'] {
+    --flx-ui-font-family-sans: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+    --flx-ui-radius-sm: 4px;
+    --flx-ui-radius-md: 12px;
+    --flx-ui-radius-lg: 16px;
+    --flx-ui-radius-xl: 28px;
+    --flx-ui-duration-fast: 120ms;
+    --flx-ui-duration-normal: 200ms;
+    --flx-ui-ease-standard: cubic-bezier(0.2, 0, 0, 1);
+    --flx-ui-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
+    --flx-ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
+    --flx-ui-shadow-md: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
+    --flx-ui-shadow-lg: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3);
+    font-family: var(--flx-ui-font-family-sans);
+  }
+
+  /* ---- Button: pill shape, state layer, filled/tonal/outlined/text ---------- */
+  [data-ui='material'] :where([data-variant]) {
+    position: relative;
+    overflow: hidden;
+    border-radius: 9999px;
+    padding: 0 24px;
+    height: 40px;
+    font-weight: 500;
+    letter-spacing: 0.01em;
+    box-shadow: none;
+    transition:
+      box-shadow var(--flx-ui-duration-normal) var(--flx-ui-ease-standard),
+      background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+  }
+  /* 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 {
+    content: '';
+    position: absolute;
+    inset: 0;
+    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) {
+    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); }
+  /* 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); }
+  /* Outlined: 1px hairline, no fill. */
+  [data-ui='material'] :where([data-variant='outline']) { border: 1px solid var(--flx-ui-color-border-strong); }
+  /* 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; }
+
+  /* ---- Switch: M3 geometry (52×32 track, growing thumb) --------------------- */
+  [data-ui='material'] :where([role='switch']) {
+    width: 52px;
+    height: 32px;
+    padding: 0;
+    background: var(--flx-ui-color-bg-muted);
+    border: 2px solid var(--flx-ui-color-border-strong);
+  }
+  [data-ui='material'] :where([role='switch'])::after {
+    width: 16px;
+    height: 16px;
+    margin: 6px;
+    background: var(--flx-ui-color-border-strong);
+    box-shadow: none;
+  }
+  [data-ui='material'] :where([role='switch'][data-state='checked']) {
+    background: var(--flx-ui-color-primary);
+    border-color: var(--flx-ui-color-primary);
+  }
+  [data-ui='material'] :where([role='switch'][data-state='checked'])::after {
+    width: 24px;
+    height: 24px;
+    margin: 2px;
+    background: #fff;
+    transform: translateX(20px);
+  }
+
+  /* ---- Checkbox: M3 rounded square ----------------------------------------- */
+  [data-ui='material'] :where([role='checkbox']) {
+    width: 18px;
+    height: 18px;
+    border-width: 2px;
+    border-radius: 2px;
+  }
+
+  /* ---- Slider: M3 filled thumb -------------------------------------------- */
+  [data-ui='material'] :where([role='slider']) {
+    width: 20px;
+    height: 20px;
+    background: var(--flx-ui-color-primary);
+    border: none;
+  }
+  [data-ui='material'] :where([data-slider-track]) { height: 6px; }
+
+  /* ---- Tabs: M3 primary indicator (thicker, rounded) ----------------------- */
+  [data-ui='material'] :where([role='tab'][data-state='active']) {
+    border-bottom-width: 3px;
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+  }
+
+  /* ---- Filled text field + combobox control -------------------------------- */
+  [data-ui='material'] :where([data-input], [data-combobox-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-input]:focus, [data-input]:focus-visible, [data-combobox-control]:focus-within) {
+    border-bottom: 2px solid var(--flx-ui-color-primary);
+    box-shadow: none;
+    outline: none;
+  }
+
+  /* ---- Menus & lists: full-bleed M3 rows, roomier padding ------------------- */
+  [data-ui='material'] :where([role='menuitem'], [role='option']) {
+    border-radius: 0;
+    padding: 10px var(--flx-ui-space-3);
+  }
+  [data-ui='material'] :where([role='menu'], [role='listbox']:not([data-state])) {
+    padding: 8px 0;
+  }
+
+  /* ---- Surfaces: M3 corner radii (elevation comes from the shadow tokens) --- */
+  /* Dialog = "extra large" 28px; hover-card = "medium" 12px; tooltip = 4px. */
+  [data-ui='material'] :where([role='dialog']:not([data-placement]), [role='alertdialog']) {
+    border-radius: 28px;
+  }
+  [data-ui='material'] :where([data-hovercard-content]) {
+    border-radius: 12px;
+  }
+  [data-ui='material'] :where([role='tooltip']) {
+    border-radius: 4px;
+  }
+
+  /* ---- Click-origin ripple (installed by the ripple primitive) ------------- */
+  [data-ui='material'] :where([data-variant], [role='menuitem'], [role='option'], [role='tab']) {
+    position: relative;
+    overflow: hidden;
+  }
+  [data-ui='material'] .flx-mat-ripple {
+    position: absolute;
+    border-radius: 50%;
+    background: currentColor;
+    opacity: 0;
+    transform: scale(0);
+    pointer-events: none;
+    /* Decelerating expand; opacity holds while it grows, then fades out at the
+       end, so the ripple reads as fluid rather than a flash. */
+    animation: flx-mat-ripple 650ms cubic-bezier(0.2, 0.6, 0.3, 1) forwards;
+  }
+  @keyframes flx-mat-ripple {
+    0% {
+      transform: scale(0);
+      opacity: 0.15;
+    }
+    60% {
+      transform: scale(0.9);
+      opacity: 0.15;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 0;
+    }
+  }
+}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@fluixi-ui/skin-material",
+  "version": "0.2.0",
+  "description": "Material Design skin for Fluixi UI — activate with data-ui=\"material\"",
+  "license": "MIT",
+  "private": false,
+  "type": "module",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/fluixi/ui.git",
+    "directory": "packages/skin-material"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "dist",
+    "fonts",
+    "material.css",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    "./package.json": "./package.json",
+    "./styles.css": "./material.css",
+    "./ripple": {
+      "types": "./dist/ripple.d.ts",
+      "import": "./dist/ripple.js",
+      "default": "./dist/ripple.js"
+    }
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.lib.json"
+  }
+}