Hi,

First of all, great project! I just started to us this library in my project. How can I make a normal hyperlink in a Tab within a Tabbar. I would like to do this:
<TabBar tabs={buttons} let:tab bind:active> <Tab {tab} href={tab.path}> <Label>{tab.label}</Label> </Tab> </TabBar>
But the click will not work.
In the svelte code for Tab I see a button element is being created but no a element.
Hopefully someone can point me in the good direction.
Thanks in advance.

Regards,
Menno Aret

<script>
import Button from 'svelte-material-ui/button';
</script>

<Button>Hello</Button>

I have some error...

✗ client
node_modules/svelte-material-ui/button/_index.scss (1:0)
Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)
1: @import "smui-theme";
   ^
2: @import "./_style.scss";
✗ server
node_modules/svelte-material-ui/button/_index.scss (1:0)
Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)
1: @import "smui-theme";
   ^
2: @import "./_style.scss";

my package.json

{
  "name": "sample",
  "description": "sample",
  "version": "0.0.1",
  "scripts": {
    "dev": "sapper dev",
    "build": "sapper build --legacy",
    "export": "sapper export --legacy",
    "start": "node __sapper__/build",
    "cy:run": "cypress run",
    "cy:open": "cypress open",
    "test": "run-p --race dev cy:run"
  },
  "dependencies": {
    "compression": "latest",
    "polka": "next",
    "sirv": "latest",
    "svelte-material-ui": "^1.0.0-alpha.13"
  },
  "devDependencies": {
    "@babel/core": "latest",
    "@babel/plugin-syntax-dynamic-import": "latest",
    "@babel/plugin-transform-runtime": "latest",
    "@babel/preset-env": "latest",
    "@babel/runtime": "latest",
    "node-sass": "latest",
    "npm-run-all": "latest",
    "rollup": "latest",
    "rollup-plugin-babel": "latest",
    "rollup-plugin-commonjs": "latest",
    "rollup-plugin-node-resolve": "latest",
    "rollup-plugin-replace": "latest",
    "rollup-plugin-svelte": "latest",
    "rollup-plugin-terser": "latest",
    "sapper": "latest",
    "svelte": "latest",
    "svelte-preprocess": "latest"
  }
}

import resolve from 'rollup-plugin-node-resolve';
import replace from 'rollup-plugin-replace';
import commonjs from 'rollup-plugin-commonjs';
import svelte from 'rollup-plugin-svelte';
import babel from 'rollup-plugin-babel';
import { terser } from 'rollup-plugin-terser';
import config from 'sapper/config/rollup.js';
import pkg from './package.json';
import { scss } from 'svelte-preprocess';

const mode = process.env.NODE_ENV;
const dev = mode === 'development';
const legacy = !!process.env.SAPPER_LEGACY_BUILD;

const onwarn = (warning, onwarn) => (warning.code === 'CIRCULAR_DEPENDENCY' && /[/\\]@sapper[/\\]/.test(warning.message)) || onwarn(warning);
const dedupe = importee => importee === 'svelte' || importee.startsWith('svelte/');

const preprocess = [
	scss({})
];

export default {
	client: {
		input: config.client.input(),
		output: config.client.output(),
		plugins: [
			replace({
				'process.browser': true,
				'process.env.NODE_ENV': JSON.stringify(mode)
			}),
			svelte({
				dev,
				hydratable: true,
				emitCss: true,
				preprocess
			}),
			resolve({
				browser: true,
				dedupe
			}),
			commonjs(),

			legacy && babel({
				extensions: ['.js', '.mjs', '.html', '.svelte'],
				runtimeHelpers: true,
				exclude: ['node_modules/@babel/**'],
				presets: [
					['@babel/preset-env', {
						targets: '> 0.25%, not dead'
					}]
				],
				plugins: [
					'@babel/plugin-syntax-dynamic-import',
					['@babel/plugin-transform-runtime', {
						useESModules: true
					}]
				]
			}),

			!dev && terser({
				module: true
			})
		],

		onwarn,
	},

	server: {
		input: config.server.input(),
		output: config.server.output(),
		plugins: [
			replace({
				'process.browser': false,
				'process.env.NODE_ENV': JSON.stringify(mode)
			}),
			svelte({
				generate: 'ssr',
				dev,
				preprocess
			}),
			resolve({
				dedupe
			}),
			commonjs()
		],
		external: Object.keys(pkg.dependencies).concat(
			require('module').builtinModules || Object.keys(process.binding('natives'))
		),

		onwarn,
	},

	serviceworker: {
		input: config.serviceworker.input(),
		output: config.serviceworker.output(),
		plugins: [
			resolve(),
			replace({
				'process.browser': true,
				'process.env.NODE_ENV': JSON.stringify(mode)
			}),
			commonjs(),
			!dev && terser()
		],

		onwarn,
	}
};

Could you help me ?

Hi,

After spending all morning and failing to get this working with my original rollup.config I gave in and decided to try using webpack but have also royally failed with that. The error I am hitting is mostly:-

✗ server
node_modules/@smui/fab/_index.scss 1:0
Module parse failed: Unexpected character '@'
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @import "smui-theme.scss";
| @import "./_style.scss";

I created the _smui-theme.scss file within a directory called theme within my site and I think this is being found as creating another file without the underscore prefix causing a different error:-

@import "smui-theme";
^
      It's not clear which file to import for '@import "smui-theme"'.
Candidates:
  _smui-theme.scss
  smui-theme.scss
Please delete or rename all but one of these files.

I have tried to follow the instructions and provide what I think is a scss processor within the webpack.config

const alias = { svelte: path.resolve('node_modules', 'svelte') };
const extensions = ['.mjs', '.js', '.json', '.svelte', '.html', '.scss'];
const mainFields = ['svelte', 'module', 'browser', 'main'];

const sassOptions = {
		  includePaths: [
		    './src/main/sapper/theme/',
		    './node_modules/',	    
		    path.resolve(__dirname, 'src/main/sapper/theme/')
		  ]
		};

module.exports = {
	client: {
		entry: config.client.entry(),
		output: config.client.output(),
		resolve: { alias, extensions, mainFields },

		devtool: dev && 'inline-source-map',
		module: {
		    rules: [
		      {
				test: /\.(svelte|html)$/,
				use: {
					loader: 'svelte-loader',
					options: {
						emitCss: true,
						hotReload: true
					}
				}
		      },
		      {
		        test: /\.(sa|sc|c)ss$/,
		        use: [
		          isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
		          'css-loader',
		          {
		            loader: 'sass-loader',
		            options: {
		              ...sassOptions
		            },
		          },
		        ],
		      },
		      {
		        test: /\.js$/,
		        exclude: /node_modules/,
		        use: {
		          loader: 'babel-loader',
		          options: {
		            presets: ['@babel/preset-env'],
		          },
		        },
		      },
		    ],
		  },
			mode,
			plugins: [
				// pending https://github.com/sveltejs/svelte/issues/2377
				// dev && new webpack.HotModuleReplacementPlugin(),
				new webpack.DefinePlugin({
					'process.browser': true,
					'process.env.NODE_ENV': JSON.stringify(mode)
				}),
			    new MiniCssExtractPlugin({
			    	filename: isDevelopment ? '[name].css' : '[name].[hash].css',
			    	chunkFilename: isDevelopment ? '[id].css' : '[id].[hash].css'
			    }),
			      new OptimizeCssAssetsPlugin({
			        assetNameRegExp: /\.css$/g,
			        cssProcessor: require('cssnano'),
			        cssProcessorPluginOptions: {
			          preset: ['default', { discardComments: { removeAll: true } }],
			        },
			        canPrint: true
			      })
			].filter(Boolean),		  
	},

	server: {
		entry: config.server.entry(),
		output: config.server.output(),
		target: 'node',
		resolve: { alias, extensions, mainFields },
		externals: Object.keys(pkg.dependencies).concat('encoding'),
		module: {
			rules: [
				{
					test: /\.(svelte|html)$/,
					use: {
						loader: 'svelte-loader',
						options: {
							css: false,
							generate: 'ssr',
							dev
						}
					}
				}
			]
		},
		mode: process.env.NODE_ENV,
		performance: {
			hints: false // it doesn't matter if server.js is large
		}
	},

	serviceworker: {
		entry: config.serviceworker.entry(),
		output: config.serviceworker.output(),
		mode: process.env.NODE_ENV
	}
};

but this doesn't seem to be processing the scss files and resolving the imports.

"You must also have a _smui-theme.scss file in one of the Sass include paths"

Could you please expand on that instruction in terms of what a 'Sass include path' is? Do you mean on the file system or imported into a page?

Any help or advice on how I can proceed to debug this issue further is much appreciated as I really want to use svelte-material-ui but have already wasted a day just trying to install it.

I don't know if this is a issue but did you think about providing precompiled js files of the components?
Is much esayer to use than have to install all dev dependencies and loaders
one simple npm install and you are there.
Thanks!

Hi,
I want to write a ChipInput component to add to the library but i cant get the examples to work
im using Rollup with this conf

import svelte from 'rollup-plugin-svelte';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';

//import includePaths from 'rollup-plugin-includepaths';
import sass from 'rollup-plugin-sass';
import scss from 'rollup-plugin-scss';

const production = !process.env.ROLLUP_WATCH;

export default {
	input: 'src/main.js',
	output: {
		sourcemap: true,
		format: 'iife',
		name: 'app',
		file: 'public/bundle.js'
	},
	plugins: [
		
		svelte({
			// enable run-time checks when not in production
			dev: !production,
			// we'll extract any component CSS out into
			// a separate file — better for performance
			css: css => {
				css.write('public/bundle.css');
			},
		}),

		sass(),
		scss(),

		// If you have external dependencies installed from
		// npm, you'll most likely need these plugins. In
		// some cases you'll need additional configuration —
		// consult the documentation for details:
		// https://github.com/rollup/rollup-plugin-commonjs
		resolve({
			browser: true,
			dedupe: importee => importee === 'svelte' || importee.startsWith('svelte/')
		}),

		commonjs(),

		// Watch the 'public' directory and refresh the
		// browser on changes when not in production
		!production && livereload('public'),

		// If we're building for production (npm run build
		// instead of npm run dev), minify
		production && terser()
	],
	watch: {
		clearScreen: false
	}
};

and i get this error
18: <script> 19: import Button from '@smui/button'; 20: import Fab from '@smui/fab'; ^ 21: import Textfield, {HelperText} from '@smui/textfield'; 22: import {Label, Icon} from '@smui/common'; Error: 'HelperText' is not exported by node_modules/@smui/textfield/index.js at error (/home/ramiro/Escritorio/Dev/svelte-material-ci/node_modules/rollup/dist/rollup.js:9419:30) at Module.error (/home/ramiro/Escritorio/Dev/svelte-material-ci/node_modules/rollup/dist/rollup.js:13402:9) at handleMissingExport (/home/ramiro/Escritorio/Dev/svelte-material-ci/node_modules/rollup/dist/rollup.js:13322:21) at Module.traceVariable (/home/ramiro/Escritorio/Dev/svelte-material-ci/node_modules/rollup/dist/rollup.js:13711:17) at ModuleScope.findVariable (/home/ramiro/Escritorio/Dev/svelte-material-ci/node_modules/rollup/dist/rollup.js:12414:39) at FunctionScope.findVariable (/home/ramiro/Escritorio/Dev/svelte-material-ci/node_modules/rollup/dist/rollup.js:2981:38) at ChildScope.findVariable (/home/ramiro/Escritorio/Dev/svelte-material-ci/node_modules/rollup/dist/rollup.js:2981:38) at Identifier$1.bind (/home/ramiro/Escritorio/Dev/svelte-material-ci/node_modules/rollup/dist/rollup.js:8340:40) at NewExpression.bind (/home/ramiro/Escritorio/Dev/svelte-material-ci/node_modules/rollup/dist/rollup.js:7969:23) at NewExpression.bind (/home/ramiro/Escritorio/Dev/svelte-material-ci/node_modules/rollup/dist/rollup.js:11760:15)

Do you have an idea of why?
Thank you!

Hello,

Just tried putting together a new project based on the /site files. New at this but failed building due to sass-loader options not matching schema. Looks like do not want the spread operator on line 54 of site/webpack.config.js? After I removed it, seems to build fine. Maybe there's some language option I'm supposed to be using for interpreting spread operator on single object? Or needs update?

Really appreciate the package in any case, big help! :-)

Screenshot of an open dropdown of a Standard Select Enhanced in a Mozilla Firefox nightly (70.0a1 (2019-08-20) (64-bit)) left and a Google Chrome (Version 76.0.3809.100 (Official Build) (64-bit)) right after resize & scroll:

Hi @hperrin,

Currently there is support for up to two lines within the list component. I have a requirement for three lines and can see that the underlying MDC component supports 3 lines so do you have plans on exposing this additional functionality?

I think it would make a good 'first-issue' / 'help-wanted' if this is something you don't class as high priority.

Sorry to keep raising issues but that's what happens when people use all your cool shit 🥇

Grid is a very useful component. Would be great to see them in the library. 🤔

Is this functionality only meant to apply with Sets (i.e currently not working with standalone chip)?

It would be great to have a more detailed guide on how to add this library to a clean Svelte installation. I'm not super comfortable messing around with rollup or the config files, I would love to be able to follow a guide that sets it up for a clean Svelte install.

This is an awesome addition to Svelte, by the way, thank you!

(Similar to #23)

This shouldn't be a problem in most cases as most browsers support dynamic imports natively nowadays, however I'm one of these weird people who use weird browsers (in particular, Waterfox, based on Firefox 56) that do not. Here's the traceback I get:

TypeError: component is undefined
    at bubble svelte/internal/lifecycle.ts
    at forward @svui/common/forwardEvents.js

Apart from that, some event handlers aren't fired (at least the click event on <Button>).

As far as I understand, the problem is that you pass current_component from svelte/internal, but it is already undefined when forwardEventsBuilder is called. I'm not yet sure why, as the code is in fact inside the component initialization and should be safe to use (as safe as it gets with using internal APIs, at least :)

<script>
  const _Function = Function;
  Function = function() {
    Function = _Function;
    console.warn("forcing shimport");
    throw 1;
  }
</script>

I also guess this might be a bug or limitation of shimport itself (cc @Rich-Harris) but I'm having hard time trying to extract a repro. Maybe you could look into it too?

P. S. And thank you for your work on this amazing project!

Hi Hunter,

More of a question than an issue but I am trying to use the dialog in a modal format so that the dialog needs to be dismissed via a button rather than clicking on the scrim.

HTML5 has modal via the HTMLDialogElement.showModal() although caniuse shows this is not yet widely supported. There is also window.showModalDialog() which seems to be an legacy thing and now deprecated.

Checking the code for @smui/dialog and MDCDialog shows no current support for opening as modal so my options seem to be:-

• Using dialog.showModal() with the limited browser support.
• Implement my own modal support e.g listen for the close event and cancel it.

When considering all this my thoughts are why does @smui/dialog not support modal which I guess is because MDCDialog in turn doesn't support modal. Searching various other dialog components shows the same lack of any modal support.

Does this suggest that a modal approach is wrong in terms of UI/UX and I should just use the @smui/dialog as is (assuming #35 is resolved) and code accordingly to cope with the dialog being dismissed by clicking the scrim (or pressing ESC) or do you have any plans on implementing support for a showModal() version of @smui/dialog?

Interested to hear what your thoughts as a font end developer are in regards to using a fully modal dialog?

In the example: https://github.com/hperrin/svelte-material-ui/blob/master/site/src/routes/demo/data-table.svelte there is an example of how to use checkboxes in a data table if you want to group them by the header.

My question is, what if I want a checkbox without the header thing? Because all the ways I am trying to ends up throwing errors in the console, example

Uncaught (in promise) TypeError: Cannot read property 'querySelector' of null 
Uncaught TypeError: Cannot read property '2' of undefined

Is this maybe a bug.. or am I missing something?

Take a Textfield of type number
Erase content
notice :
TypeError: value is undefined; foundation.js:280

This is thrown from the underlying mdc component which tries to count the string length of 'value'

Solutions :
1 - do not update val when undefined
2 - update val by a default value when undefined
3 - A better solution?

Relevant code
In Input.svelte

 function toNumber(value) {
   return value === '' ? undefined : +value;
 }
 function valueUpdater(e) {
   switch (type) {
     case 'number':
     case 'range':
       value = toNumber(e.target.value);
       break;
     case 'file':
       files = e.target.files;
       // Fall through.
     default:
       value = e.target.value;
       break;
   }
 }

Suggested change (solution 2-)

 function toNumber(value) {
   return  +value;
 }
 function valueUpdater(e) {
   switch (type) {
     case 'number':
     case 'range':
       if( value!==='' ) value = toNumber(e.target.value);
       break;
     case 'file':
       files = e.target.files;
       // Fall through.
     default:
       value = e.target.value;
       break;
   }
 }

​

Hello, I'm having a problem, the Filter variable changes to unexpected values.
The Filter variable is a var writable in store.js, shared with other components.
For example, the second time I change the value "selected" is 2 when I selected the first element, I expect selected it was 0.

let selected = $Filter;

const filters = [
    { value: 0 },
    { value: 1 },
    { value: 2 }
  ];

<Select
      class="shaped"
      variant="filled"
      label="Filtres"
      bind:value={selected}
      on:change={() => Filter.set(selected)}>
      {#each filters as { value, label }}
        <Option {value} selected={selected === value}>{label}</Option>
      {/each}
    </Select>

Thanks!

I found a bug in the Icon-Button Component.
With certain conditions the icons are not toggling as expected when we disable bindings and use events and props instead.

I left a very self explanatory example in REPL:

https://svelte.dev/repl/f4b9646e2afe41eca3a1f788e62e0e46?version=3.12.1

Hi would love a Paper component / surface 😃

PS: If you need a hand with documenting the API or writing tests or other general schlepp work let me know.

I've tried to include the sass related rules / plugins (from the site folder) both in the client and server configs but it fails because style-loader tries to access the document object on the server. I think it'll be very helpful if you included a webpack config compatible with sapper.

Sorry if this request is a little bit stupid, i'm just really tired after trying to do it myself for a few days...

Not sure if this is new from the latest release or if I'm just now triggering this error... but if you try to load the Textfield component with an undefined value variable then you the the following error.

Uncaught TypeError: Cannot read property 'addEventListener' of null
    at Object.registerInteractionHandler (component.js:444)
    at foundation.js:212
    at Array.forEach (<anonymous>)
    at MDCRippleFoundation../node_modules/@material/ripple/foundation.js.MDCRippleFoundation.registerRootHandlers_ (foundation.js:211)
    at MDCRippleFoundation../node_modules/@material/ripple/foundation.js.MDCRippleFoundation.init (foundation.js:110)
    at MDCRipple.MDCComponent (component.js:36)
    at new MDCRipple (component.js:32)
    at rippleFactory (component.js:48)
    at MDCTextField../node_modules/@material/textfield/component.js.MDCTextField.createRipple_ (component.js:448)
    at MDCTextField../node_modules/@material/textfield/component.js.MDCTextField.initialize (component.js:93)

Example...

<script>
  ...
  let value = '';
  let value2;
</script>

<Textfield value={value} label="This works"/>

<Textfield value={value2} label="This does not work"/>

1. Props: value vs checked ? Looks like value is used with group checkboxes but potentially you could pass in contradictory values

<Checkbox checked={true} value={false} />

2. Does the Checkbox have to be wrapped in <FormField/> ?

Have a component that exports an array, and have the array generate a snackbar when you push to it. Then after the snackbar closes, have the item removed from the array.

Using a keyed Svelte each block, and an close handler, the component can achieve this.

Would be great to have a (Multi) Select that has filtering, virtual-list, etc. like (the great) svelte-select.

Hi there!

First of all great library!
I was wondering, on the prefixes to set attributes on inputs like "name" or "id", I think it would be much more intuitive if the "name" and "id" got transferred to the input directly instead of having to use the prefix "input$name".

Maybe for the top level wrapper there should be some special prefix to target attributes that should belong on this element.

I've got some custom validation logic on certain fields but I haven't been able to figure out how to mark a field as in-error. Is there a prop to use to indicate a field has an error?

when i try the code from the demo or from the readme, i always get the filled input, how can i make the standard work?

I'd like to use the fixes for the onDestroy() functions in sapper, and it's really annoying to try to install the packages directly from the git repo because they're nested packages

Hi Hunter,

I am having an issue using a slider component within a dialog component in terms of in will not allow me to change the slider value. Using the same slider outside of the dialog is fine.

The issue can be seen here by hovering over the topmost chart and clicking the 'cogs' icon which will show a dialog containing a couple of sliders and a standard html range input.

The Source Code for how I am using the dialog and slider.

I am sure this will be something wrong on my side but I can't see what is causing this so any help would be really appreciated.

are you able to make this package work with the proper .mjs files etc so we can use this for building dynamic svelte applications inside the REPL?

I have the following issue (which I have not tested on a minimal example)

value="orange"
<Select bind:value={value}>
 <Option value="" selected={value===""}></Opt>
<Option value="orange" selected={value==="orange}></Opt>
</Select>

In my case, the previous code would start with value=""

Proposed fix (Select.svelte)

onMount(async () => {
    select = new MDCSelect(element);
    select.value = value; //FIX is Here
    
    menuPromiseResolve(select.menu_);

    if (!ripple && select.ripple) {
      select.ripple.destroy();
    }

    if (updateInvalid) {
      invalid = inputElement.matches(':invalid');
    }
  });

works for me

I'm using the YogliB component template as a starter for my svelte project. I was attempting to include svelte-material-ui but am running into a build issue.

node_modules/svelte-material-ui/components/select/_index.scss (1:0)
1: @import "smui-theme";
   ^
2: @import "./_style.scss";
Error: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)
    at error (/svelte_app/node_modules/rollup/dist/rollup.js:9421:30)
    at Module.error (/svelte_app/node_modules/rollup/dist/rollup.js:13360:9)
    at tryParse (/svelte_app/node_modules/rollup/dist/rollup.js:13275:16)
    at Module.setSource (/svelte_app/node_modules/rollup/dist/rollup.js:13586:33)
    at Promise.resolve.catch.then.then.then (/svelte_app/node_modules/rollup/dist/rollup.js:16412:20)```

I copied the _smui-theme.scss file to my /src folder since that is an included path for the preprocess.  You see see the [rollup config](https://github.com/YogliB/svelte-component-template/blob/master/rollup.config.js) file. I'm assuming because I'm using rollup and not webpack I'm running into the issue but not sure how to resolve it.

Oh, forgot to mention in one of my .svelte files I have the following that triggers the error.

Symptom :
TypeError: node.parentNode is null when changing page.

One of my pages will show a snackbar under certain circumstances, if I try to leave the page, I get a TypeError from index.mjs (main svelte context dies)

Any idea where this could come from?

I have tried without success (without expecting any either...)

onDestroy(()=>{
 delete var_bound_to_snackbar_dom
})

Hi @hperrin , I'm curious about your reasoning and use of the following in Checkboxes.

let uninitializedValue = () => {};

As uninitializedValue is never mutated why is it any better than null as an initial indeterminate state. Is it because it evaluates in a "truthy" way as opposed to "falsey" with null?

Also with regards Elevation, whilst you've mentioned it's implemented via Sass, wouldn't it just as easy to pass it in as a prop as you've done with Paper?

This is an error happening when running the server in a liveReload environment.
When changes are done in the code the page gets broken due to this destroy of the ripple and an update of the page is required manually.

Particularly in this line:
https://github.com/hperrin/svelte-material-ui/blob/master/components/ripple/index.js#L26

My proposal is to add a condition before executing the destroy of the instance like:

if(instance) instance.destroy();

Should the label transition up into small font on fullwidth Textfields? Also notice the helper text gets a forced left margin (you can see these observations on your demo site)

Also think there is an issue using Icon with fullwidth.

I find this component really useful. There a many cases when one needs a menu-like popover but with custom content inside, instead of a list. From displaying richly formatted info to custom editors and forms, and many other cases. It's quite special and versatile. So... don't hate it.

You state:

You should install the packages individually. Alternatively, you can install all of them at once with the svelte-material-ui package.

Given that it would be much easier to just install everything once, and assuming tree-shaking would ensure a minimal bundle, can you clarify why you make this should statement?

Thanks!

Cant seem to get the fab buttons to respect the color primary attribute.
It always shows secondary no matter what

Attached is the outputted markup after initializing the button like so:

<Fab color="primary" variant="raised" mini>
    <Icon class="material-icons" style="margin-right: 0px;">remove_red_eye</Icon>
</Fab>

You can see in the screen shot it does have the primary class on it, but the outputted css is mdc-theme-secondary

I noticed that textfields are being wrapped in the label. Is that intended? I've been trying to debug some styling issues on my end and was looking at the textfield usage which doesn't have the label wrapping the input.

Here's the outlined variant usage example...

<div class="mdc-text-field mdc-text-field--outlined">
  <input type="text" id="tf-outlined" class="mdc-text-field__input">
  <div class="mdc-notched-outline">
    <div class="mdc-notched-outline__leading"></div>
    <div class="mdc-notched-outline__notch">
      <label for="tf-outlined" class="mdc-floating-label">Your Name</label>
    </div>
    <div class="mdc-notched-outline__trailing"></div>
  </div>
</div>

I was wondering if you could clarify the sass configuration step for installing this package. You specify not to use a sass-svelte-preprocessor, and I believe this is because what is really needed here is to process the sass files within svelte-material-ui, not the user's code base. What are the steps for processing the .scss files within your library? Using sass on the whole directory via cli is not an option because of the _ prefix on all the .scss files. Trying to process them individually is also a bust, as errors are thrown. I apologize for my naivete.

I still need to use a preprocesser so that I can use scss in my svelte components view

<style type="text/scss"></style>

by adding the scss to my rollup it breaks the material ui components

import {scss, postcss} from "svelte-preprocess";

scss({}),
postcss({
      extract: true,
      minimize: true,
      use: [
           [
                 "sass",
                 {
                     includePaths: ["./theme", "./node_modules"]
                 }
            ]
       ],
      plugins: [require("autoprefixer")]
 })

The Error is the same one other people are having which is the

Unexpected Character '@' @import "smui-theme";

so with Chips...

    import Chip, { Set, Icon, Text } from '@smui/chips';

but with textfield:

    import Textfield, { Input } from '@smui/textfield';
    import Icon from '@smui/textfield/icon/index';

should Icon be a named export from @smui/textfield like with chips?

Also not sure of the mechanics behind it but I'm guessing its not simple enough to have one Icon to rule them all?

Kicking the tyres on this hence all the issues / feedback. Hope you don't mind?

I created a new svelte project using this svelte template that uses rollup. I npm installed the svelte-material-ui package and then dropped the demo content from the README into App.svelte. When I do "npm run dev" I get the following error...

[!] Error: Could not resolve './Label' from node_modules/svelte-material-ui/components/common/index.js
Error: Could not resolve './Label' from node_modules/svelte-material-ui/components/common/index.js
    at error (/svelte-mui-demo/node_modules/rollup/dist/rollup.js:9421:30)
    at ModuleLoader.handleMissingImports (/svelte-mui-demo/node_modules/rollup/dist/rollup.js:16456:17)
    at ModuleLoader.<anonymous> (/svelte-mui-demo/node_modules/rollup/dist/rollup.js:16507:26)
    at Generator.next (<anonymous>)
    at fulfilled (/svelte-mui-demo/node_modules/rollup/dist/rollup.js:15480:28)

With this one I'm running v1.0.0-alpha.8.

From the Drawer component, it is only possible to open from the left.
I was thinking whether the app could be opened from the right?

One of the reasons I use vuetify is its amazing themes.

I'm shopping around between this lib and the other svelte ones.

Hi Hunter,

I am not sure if this issue should be directed at @smui or Svelte so have raised issues against both. Excuse me if this is nothing to do with your component directly.

At the request of the Svelte team I recently upgraded to the @next version of Svelte (^3.13.0-alpha.2) and this seems to break the enhanced version of the Select component in that it no longer displays a menu when clicked.

• Repl showing the issue against 3.13.0.-alpha.2
• Same Repl working against 3.13.0.aplha.1
• Same Repl working against 3.12.1.

The menu seems to initially open:-

Before being removed by flush():-

I noticed that even after removal of the menu the onclose callback is not fired until clicking the body so the component seems to think it is still active.

Can you please review as this incoming change breaks my usage of Select controls.

Thanks