feat(m3:ripple)!: migrate to lit

docs/components/demo.ts

@@ -0,0 +1,84 @@
+import { LitElement, html, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+@customElement('dc-demo')
+export default class DcDemo extends LitElement {
+  static styles = css`
+    :host {
+      border-radius: 12px;
+      display: flex;
+      flex-grow: 1;
+    }
+    :host([hascontrols]) {
+      border: 1px solid var(--md-sys-color-outline);
+    }
+
+    [part~='contents'] {
+      align-items: center;
+      display: flex;
+      flex-grow: 999;
+      flex-wrap: wrap;
+      gap: 16px;
+      justify-content: center;
+      padding: 24px;
+    }
+    [part~='controls'] {
+      background-color: var(--md-sys-color-surface-container-low);
+      border-bottom-right-radius: 12px;
+      border-inline-start: 1px solid var(--md-sys-color-outline);
+      border-top-right-radius: 12px;
+      flex-shrink: 0;
+      gap: 16px;
+      min-width: 250px;
+    }
+    :host-context([dir='rtl']) [part~='controls'] {
+      border-bottom-left-radius: 12px;
+      border-bottom-right-radius: 0;
+      border-top-left-radius: 12px;
+      border-top-right-radius: 0;
+    }
+
+    [part~='controls-header'] {
+      border-bottom: 1px solid var(--md-sys-color-outline);
+      padding: 24px;
+    }
+    [part~='controls-body'] {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      padding: 24px;
+    }
+    [part~='controls'] h3 {
+      font: var(--md-sys-typography-title-medium);
+      margin: 0;
+    }
+    :host(:not([hascontrols])) [part~='controls'] {
+      display: none;
+    }
+
+    @media (max-width: 600px) {
+      :host {
+        flex-direction: column;
+      }
+      [part~='controls'] {
+        border-bottom-left-radius: 12px;
+        border-inline-start: none;
+        border-top: 1px solid var(--md-sys-color-outline);
+        border-top-right-radius: 0;
+      }
+    }
+  `;
+  render() {
+    return html`
+      <div part="contents"><slot></slot></div>
+      <div part="controls">
+        <div part="controls-header">
+          <h3>Playground</h3>
+        </div>
+        <div part="controls-body">
+          <slot name="controls"></slot>
+        </div>
+      </div>
+    `;
+  }
+}

docs/index.html

@@ -10,7 +10,7 @@
     />
 
     <link rel="stylesheet" href="./main.css" />
-    <script type="module" src="./main.js"></script>
+    <script type="module" src="./main.ts"></script>
 
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
@@ -664,7 +664,7 @@ <h3>Usage</h3>
           Attached imperatively
           <dc-demo>
             <div style="position: relative">
-              <md-ripple id="ripple"></md-ripple>
+              <md-ripple id="ripple" for=""></md-ripple>
               <br />
               <button id="ripple-control">Button</button>
               <br />

docs/main.js → docs/main.ts

@@ -41,12 +41,12 @@ function generateToC() {
 
 generateToC();
 
-import '../src/m3/button.js';
-import '../src/m3/fab.js';
-import '../src/m3/icon-button.js';
-import '../src/m3/icon-button-toggle.js';
-import '../src/m3/checkbox.js';
+// FIXME: import '../src/m3/button.js';
+// import '../src/m3/fab.js';
+// import '../src/m3/icon-button.js';
+// import '../src/m3/icon-button-toggle.js';
+// import '../src/m3/checkbox.js';
 import '../src/m3/ripple.js';
-import '../src/m3/switch.js';
+// import '../src/m3/switch.js';
 import '../src/m3/tooltip.js';
-import './components/demo/demo.js';
+import './components/demo.js';

docs/vite.config.js

@@ -1,5 +1,4 @@
 import { defineConfig } from 'vite';
-import babel from '@rollup/plugin-babel';
 import { createHtmlPlugin } from 'vite-plugin-html';
 
 export default defineConfig({
@@ -9,14 +8,5 @@ export default defineConfig({
     minify: true,
     cssMinify: 'lightningcss',
   },
-  plugins: [
-    babel({
-      babelrc: false,
-      configFile: './.babelrc',
-      extensions: ['.js'],
-      exclude: 'node_modules/**',
-      babelHelpers: 'bundled',
-    }),
-    createHtmlPlugin({ minify: true }),
-  ],
+  plugins: [createHtmlPlugin({ minify: true })],
 });

package.json

@@ -10,7 +10,7 @@
   },
   "scripts": {
     "dev:docs": "vite --open /docs/",
-    "build:docs": "vite build docs",
+    "build:docs": "tsc && vite build docs",
     "preview:docs": "vite preview docs",
     "prettier": "prettier . --check",
     "prettier:fix": "prettier . --check --write",
@@ -19,10 +19,6 @@
     "lint:type": "tsc"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.0",
-    "@babel/plugin-proposal-decorators": "^7.23.0",
-    "@babel/preset-env": "^7.22.20",
-    "@rollup/plugin-babel": "^6.0.3",
     "lightningcss": "^1.22.0",
     "prettier": "^3.0.3",
     "stylelint": "^15.10.3",
@@ -33,6 +29,7 @@
     "vite-plugin-html": "^3.2.0"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.5.3"
+    "@floating-ui/dom": "^1.5.3",
+    "lit": "^3.1.2"
   }
 }