diff --git a/README.md b/README.md
index 94d2602..ba7f9a1 100644
--- a/README.md
+++ b/README.md
@@ -5,12 +5,15 @@ This demo shows how native Material Web Components can be used in NextJS/React,
## Roadmap 🚀
- [ ] Make sure all native Web Components are properly working
- [x] Demo all components
- - [ ] Add all missing events
+ - [x] Add all missing events
- [ ] Add theming (design tokens) through Tailwind (i.e. remove all ts-ignores)
- [ ] Resolve SSR issues, make compatible with NextJS (i.e. remove all dynamic imports)
- [ ] Separate the demo from the actual UI code
- [ ] Make installable as a package. Preferably keep the code in-project, like shadcn/ui, so developers have more control
- [ ] Sync with upstream (i.e. https://github.com/material-components/material-web/blob/main/docs/intro.md) through webhooks and automations
+ - [ ] Use [Copybara](https://github.com/google/copybara) (or good ol' GitHub webhooks) to automate syncing with upstream
+ - [ ] Use [lit-analyzer](https://www.npmjs.com/package/lit-analyzer) to see which Web Components changed. Perhaps mix with an LLM to compare existing and newly autogenerated code.
+ - [ ] Create a PR with the new Component code.
- [ ] Mix this library with Tailwind and BaseUI in order to complete missing Components which may prove useful for building production applications
# NextJS Boilerplate
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index a3b6aa8..7c9892e 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -16,9 +16,10 @@ export default function RootLayout({
}>) {
return (
-
-
-
+
+
+
+
{/* From BaseUI: https://mui.com/base-ui/getting-started/usage/#responsive-meta-tag */}
{children}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 09c9275..4b53f58 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -69,6 +69,7 @@ import GitHubButton from "react-github-btn";
import Elevation from "@/components/ui/elevation";
import Ripple from "@/components/ui/ripple";
import FocusRing from "@/components/ui/focus-ring";
+import Progress from "@/components/ui/progress";
const Column = ({ children, ...props }: { children: any; id: string }) => {
return (
@@ -285,8 +286,8 @@ export default function Home() {
{isPlayingProgressIndicators ? 'pause' : 'play_arrow'}
-
-
+
+
diff --git a/src/components/ui/button/tailwind-config.ext.json b/src/components/ui/button/tailwind-config.ext.json
new file mode 100644
index 0000000..b9382c5
--- /dev/null
+++ b/src/components/ui/button/tailwind-config.ext.json
@@ -0,0 +1,2 @@
+// maybe this file can serve as an "extension" to the Tailwind config which should later be merged.
+// This way, each component could define their own design tokens and extend the tailwind config
diff --git a/src/components/ui/progress/index.tsx b/src/components/ui/progress/index.tsx
index 6fb4e41..0d2ae86 100644
--- a/src/components/ui/progress/index.tsx
+++ b/src/components/ui/progress/index.tsx
@@ -24,37 +24,9 @@ export const LinearProgress = createComponent({
react: React,
});
-const Progress = (props: {
- type: 'circular' | 'linear';
- variant?: 'default' | 'four-color';
- value?: number;
- buffer?: number;
- indeterminate?: boolean;
- ariaLabel?: string;
-}) => {
- const { type, variant = 'default', ...rest } = props;
-
- if (type === 'circular') {
- return (
-
- );
- } else if (type === 'linear') {
- return (
-
- );
- } else {
- return null;
- }
+const Progress = (props: any) => {
+ if (props.variant === 'md-linear-progress') return {props.children};
+ return {props.children};
};
export default Progress;