I am getting this error in Sapper:

ReferenceError: getComputedStyle is not defined

This is very important.

If the elevation changes the shadow should animate. This could be disabled by setting transitionElevation to false.

There could also be a prop that gives the elevation on hover. This would be useful for making the card elevate on hover.

If the label prop is specified, then Switch would become a block element that gets no shorter than 48px, and just as tall as the label forces it to.

There could also be a left prop of type boolean (default should be false) that puts the switch on the left side of the element.

Example:

Without left:

<Switch on={true} label="Allow notfications"/>

With left:

<Switch on={true} label="Allow notfications" left={true}/>

We need some sort of popper component.

We might be able to wrap popper.js.

This would be really handy, especially for creating a GitHub icon.

If a user clicks on an element that is supposed to ripple many times quickly, the ripples barely appear.

This would be a group of svg based loading bars.

The usage would probably look like this:

<LoadingBar
	value={50}
	preset="line"

	backgroundWidth={10}
	backgroundCorners={0}
	foregroundWidth={20}
	foregroundCorners={0}
	backgroundColor="var(--loading-bar-background)"
	foregroundColor="var(--loading-bar-foreground)"

	showLabel={true}
	showUnits={true}
	units="%"
	labelColor="var(--loading-bar-label)"
	unitsColor="var(--loading-bar-units)"

	borderWidth={20}
	borderColor="var(--loading-bar-border)"
/>
<!-- preset values: `line`, `circle`, `fan`, `bubble` -->

bundle.css is how non-svelte users have access to the styles.

Button?

It would be nice if there was a way to have transitions when an icon changes in IconButton.

This would be key to doing that: https://svelte.dev/examples#transition-events.

We could just add another prop:

<IconButton
    icon={[
        { name: 'favorite' },
        { name: 'favorite_outline' }
    ]}
    transition="scale"
    bind:on
/>

Then, every time on is toggled, the old icon will animate out with a scale transition, and the new one will animate it with a scale.

An outlined prop would take the shadow off and add an outline.

https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F1KZdEJ_rsgaQ79ltEN_Oue2q9RWHXnIqk%2Fcards-elevation-3.png

It appears that the block prop on UIButton is not working.

https://svelte.dev/repl/b256f8934be64692898fd7d67c1ef3fa?version=3.9.2

The href prop doesn't work: https://github.com/svelte-toolbox/svelte-toolbox/blob/master/src/components/card/README.md#props

Show error on build.

src/components/components.module.js → dist/index.min.mjs, dist/index.min.js...
[!] Error: Could not resolve '../styles/internal/wrapped-styles.js' from src\components\Style.svelte
Error: Could not resolve '../styles/internal/wrapped-styles.js' from src\components\Style.svelte
    at error (D:\work\svelte3\svelte-toolbox\node_modules\rollup\dist\rollup.js:9365:30)
    at ModuleLoader.handleMissingImports (D:\work\svelte3\svelte-toolbox\node_modules\rollup\dist\rollup.js:16317:17)
    at ModuleLoader.<anonymous> (D:\work\svelte3\svelte-toolbox\node_modules\rollup\dist\rollup.js:16368:26)
    at Generator.next (<anonymous>)
    at fulfilled (D:\work\svelte3\svelte-toolbox\node_modules\rollup\dist\rollup.js:15368:28)

There should be documentation on using Svelte Toolbox components

• in a regular html/css/js site
• with other frameworks such as React, Vue and Angular

hideOverflow="false" does not work.

<script>
	import { Ripple } from 'svelte-toolbox'
</script>

<Ripple hideOverflow="false">
	<p>
		text
	</p>
</Ripple>

Demo here

This would just scroll the page to the top when the button is clicked.

Very useful for SPA applications when the route is changed.

Where is the documentation for Card? It should be here.

Here are some ways that Ripple can be improved upon:

• Ripple could have a block prop which should default to false. If true the ripple should have display: block, else inline-block.
• Ripple could have a disabled prop, which, as can be guessed, disables the ripple.
• The default span should be higher, and the default time might even need to be shorter. This is requested, so that the animation does not have such a tired and slow look to it.

The location does not change when a UIButton with the href prop is clicked. (See Repl below.)

https://svelte.dev/repl/8ada451156b44c7a80ff4b4a92f2ddfe?version=3.5.3

Why have href if there is no newTab option?

This prop would directly set the autocomplete value on UIInput.

https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understands

I think that a checkbox component would be nice.

https://material-components.github.io/material-components-web-catalog/#/component/checkbox

We need some more props for colors in card. Here are some suggestions:

• backgroundColor
• backgroundColorHover
• outlineColor
• outlineColorHover

The last two are obviously waiting on #79.

This would normally be used inside List, but it could also be used inside card, or anything else really.

Ripple could use the href and newTab props.

npm run lint fails with this error:

Error: Failed to load plugin 'svelte3' declared in '.eslintrc': Could not find ESLint Linter in require cache
    at Object.<anonymous> (/workspace/svelte-toolbox/node_modules/eslint-plugin-svelte3/index.js:295:8)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at ConfigArrayFactory._loadPlugin (/workspace/svelte-toolbox/node_modules/eslint/lib/cli-engine/config-array-factory.js:859:49)
    at names.reduce (/workspace/svelte-toolbox/node_modules/eslint/lib/cli-engine/config-array-factory.js:730:33)

It looks like there is either some extra space on the bottom of the button, or the text somehow jumped too high.

If it is, when you click away from the label it quietly checks or unchecks the checkbox.

Try clicking in the top right corner.

https://svelte.dev/repl/779db8a42b4f4079a69347fbdb62c142?version=3.7.1

Isn't that annoying?

This should be fixed.

I am not sure exactly what to call this, but I think that "Style Theme" sounds good.

It's just a set of CSS vars in global.css that look like this:

:root {
	--back: #ffffff;
	--back-light: #f6fafd;
	--back-api: #eff8ff;
	--prime: #98603d;
	--second: #434346;
	--flash: #40b3ff;
	--heading: var(--second);
	--text: #444;
	--sidebar-text: rgba(255, 255, 255, 0.75);
	--border-w: 0.3rem;
	--border-r: 0.4rem;
}

Then all the other vars would be set to those variables.

Yeah, more vars such as --prime-t-10 (--prime transparent 10%) would probably be needed, but for the most part I think this would work.

Notice any problems with this idea? Have a comment?

Drop it below.

Card component like this: https://material-components.github.io/material-components-web-catalog/#/component/card

An outlined prop on UIButton would be nice.

<UIButton outlined={true}>Learn More</UIButton>

This would create a button like this one.

It appears that if UIInput is shown, then removed, then shown again, the MDC styles do not reappear.

Demo here

From svelte-toolbox I want only Ripple component, but there is no possibility to run:

npm install --save-dev svelte-toolbox/ripple

and import the Ripple by default:

import Ripple from 'svelte-toolbox/ripple'

This would be just great to add in future versions!

There should be a prop on Card to adjust the border-radius, with options something like the following:

• rounded (default)
• extra-rounded
• sleek-right
  
• sleek-left

A text prop on button might be nice.

Take a look at this code:

<IconButton
    icon="build",
    text="Build"
/>
<!--
    I am still not sure if 'text' should be a prop,
    or if it should be in IconObject.
-->

Wouldn't it be nice if it were to show a label under the icon on a touchscreen, and a tooltip on the icon on desktop?

I think so.

Some css selectors for Ripple and UIButton like those on Switch and UIInput would be nice!

The problem lies here.

Because of this, target="_self" reloads the page.

This ought to be fixed.

I am not sure how would be done, but It would be really handy.

As seen in this REPL, the input has an extra margin on the bottom.

As this is just the default Svelte REPL styles, it can be overridden with the following css:

input, button, select, textarea {
    margin: 0;
}

But that is just a pain to do every time.

The MDC component just has to go. It would greatly improve the quality of UIInput if the MD component wasn't there.

This sets up a list of items. It would be relatively simple, or very complex if it does something like this.

The page that is used for manual testing should be updated.

This will keep every developer who looks at the page from going into heartache when he has made changes that need visual approval.

Something like the Roberto font, maybe some dummy text, and a hash system such that the url looks like this: localhost:5000/#some-component. This will keep us from having to scroll to just the right place when the page gets really long.

Please see sveltejs/sapper#774.

The usage instructions in the readme need to be updated.

It will be better to put --css-vars in conditional styles like style={someprop is defined ? "--css-var: ${someprop}" : ""} insted of style="--css-var: {someprop}"`

this way you doesnt need to put !important if you do

.some-component{
  color: #fff:
}