open-index/open-npm huggingface dataset:
npm package: @svedova/storage
Description: Storage wrappers for localStorage and sessionStorage
Author: Savas Vedova
Latest version: 1.1.2

This package provides wrapper classes for storage APIs like `localStorage` and `sessionStorage`.

## Installation

```
npm i @svedova/storage --save
```

## Usage 

```
import { LocalStorage } from "@svedova/storage"

LocalStorage.set("my-key", 10);
LocalStorage.get("my-key"); // 10
LocalStorage.get("my-key-2", "default-value"); // default-value
LocalStorage.del("my-key"); // Deletes key entry for my-key
LocalStorage.clear(); // Clears the local storage
```
npm package: @sveil/core
Description: Sveil core
Author: Alexei Danilin
Latest version: 1.0.15

# sveil (alpha version)
Sveil core (not for prod yet). 

- Allow to subscribe for svelte stores (with unsubscribeAll option)
- Allow to get current value of store with $ sign (emulate svelte file behaiour)

## Basic example
```
/* eslint-disable @typescript-eslint/no-empty-interface */
import { type SubscribitionsBase, Subscribitions } from '@sveil/core';
import type { SvelteComponentState, SvelteStore, SvelteStoreFn } from '@sveil/core';

export interface State extends SvelteComponentState {
	counter: SvelteStore<number>;
	counterIncrement: SvelteStoreFn<unknown>;
	counterSet: SvelteStoreFn<number>;
}

// Add properties in type
export interface ComponentService extends SubscribitionsBase<State> {}

// Add properties in runtime
export class ComponentService extends Subscribitions {
	constructor(state: State) {
		super(state);
		// after super value of counter should be accessable in class with this.$counter
		// in component you just need to call this.unsubscribeAll() in onDestroy
		this.addSubscription(this.addSubscriptionLog()); //subscription option 1
		this.subscribeStore(this.counter, this.subscribeStoreLog); //subscription option 2
	}

	logCounter() {
		console.log('this.$counter', this.$counter); //current value of counter store
	}

	addSubscriptionLog() {
		return this.counter.subscribe((n) => {
			console.log('addSubscription callback', n);
		});
	}

	subscribeStoreLog(n: number) {
		console.log('subscribeStore callback', n);
	}
}
```
npm package: @svel/cli-plugin-babel
Description: babel plugin for svelte-cli
Author: Evan You
Latest version: 0.5.0

# @svel/cli-plugin-babel

> babel plugin for svelte-cli

## Configuration

Uses Babel 7 + `babel-loader` + [@svel/babel-preset-app](https://github.com/wmzy/svelte-cli/tree/dev/packages/%40svel/babel-preset-app) by default, but can be configured via `babel.config.js` to use any other Babel presets or plugins.

By default, `babel-loader` excludes files inside `node_modules` dependencies. If you wish to explicitly transpile a dependency module, you will need to add it to the `transpileDependencies` option in `svelte.config.js`:

``` js
module.exports = {
  transpileDependencies: [
    // can be string or regex
    'my-dep',
    /other-dep/
  ]
}
```

## Caching

[cache-loader](https://github.com/webpack-contrib/cache-loader) is enabled by default and cache is stored in `<projectRoot>/node_modules/.cache/babel-loader`.

## Parallelization

[thread-loader](https://github.com/webpack-contrib/thread-loader) is enabled by default when the machine has more than 1 CPU cores. This can be turned off by setting `parallel: false` in `svelte.config.js`.

## Installing in an Already Created Project

``` sh
vue add @svel/babel
```

## Injected webpack-chain Rules

- `config.rule('js')`
- `config.rule('js').use('babel-loader')`
- `config.rule('js').use('cache-loader')`
npm package: @svel/cli-plugin-e2e-cypress
Description: e2e-cypress plugin for svelte-cli
Author: Evan You
Latest version: 0.5.0

# @svel/cli-plugin-e2e-cypress

> e2e-cypress plugin for svelte-cli

This adds E2E testing support using [Cypress](https://www.cypress.io/).

Cypress offers a rich interactive interface for running E2E tests, but currently only supports running the tests in Chromium. If you have a hard requirement on E2E testing in multiple browsers, consider using the Selenium-based [@svel/cli-plugin-e2e-nightwatch](https://github.com/wmzy/svelte-cli/tree/dev/packages/%40svel/cli-plugin-e2e-nightwatch).

## Injected Commands

- **`svelte-cli-service test:e2e`**

  Run e2e tests with `cypress run`.

  By default it launches Cypress in interactive mode with a GUI. If you want to run the tests in headless mode (e.g. for CI), you can do so with the `--headless` option.

  The command automatically starts a server in production mode to run the e2e tests against. If you want to run the tests multiple times without having to restart the server every time, you can start the server with `svelte-cli-service serve --mode production` in one terminal, and then run e2e tests against that server using the `--url` option.

  Options:

  ```
  --headless run in headless mode without GUI
  --mode     specify the mode the dev server should run in. (default: production)
  --url      run e2e tests against given url instead of auto-starting dev server
  -s, --spec (headless only) runs a specific spec file. defaults to "all"
  ```

  Additionally:

  - In GUI mode, [all Cypress CLI options for `cypress open` are also supported](https://docs.cypress.io/guides/guides/command-line.html#cypress-open);
  - In `--headless` mode, [all Cypress CLI options for `cypress run` are also supported](https://docs.cypress.io/guides/guides/command-line.html#cypress-run).

  Examples :
  - Run Cypress in headless mode for a specific file: `svelte-cli-service test:e2e --headless --spec tests/e2e/specs/actions.spec.js`

## Configuration

We've pre-configured Cypress to place most of the e2e testing related files under `<projectRoot>/tests/e2e`. You can also check out [how to configure Cypress via `cypress.json`](https://docs.cypress.io/guides/references/configuration.html#Options).

## Environment Variables

Cypress doesn't load .env files for your test files the same way as `svelte-cli` does for your [application code](https://cli.vuejs.org/guide/mode-and-env.html#using-env-variables-in-client-side-code). Cypress supports a few ways to [define env variables](https://docs.cypress.io/guides/guides/environment-variables.html#) but the easiest one is to use .json files (either `cypress.json` or `cypress.env.json`) to define environment variables. Keep in mind those variables are accessible via `Cypress.env` function instead of regular `process.env` object.

## Installing in an Already Created Project

``` sh
svelte add @svel/e2e-cypress
```
npm package: @svel/cli-plugin-e2e-nightwatch
Description: e2e-nightwatch plugin for svelte-cli
Author: Evan You
Latest version: 0.5.0

# @svel/cli-plugin-e2e-nightwatch

> e2e-nightwatch plugin for svelte-cli

## Injected Commands

- **`svelte-cli-service test:e2e`**

  run e2e tests with [NightwatchJS](http://nightwatchjs.org).

  Options:

  ```
  --url        run e2e tests against given url instead of auto-starting dev server
  --config     use custom nightwatch config file (overrides internals)
  -e, --env    specify comma-delimited browser envs to run in (default: chrome)
  -t, --test   specify a test to run by name
  -f, --filter glob to filter tests by filename
  ```

  > Note: this plugin currently uses Nightwatch v0.9.x. We are waiting for Nightwatch 1.0 to stabilize before upgrading.

  Additionally, [all Nightwatch CLI options are also supported](https://github.com/nightwatchjs/nightwatch/blob/master/lib/runner/cli/cli.js).

## Configuration

We've pre-configured Nightwatch to run with Chrome by default. If you wish to run e2e tests in additional browsers, you will need to add a `nightwatch.config.js` or `nightwatch.json` in your project root to configure additional browsers. The config will be merged into the [internal Nightwatch config](https://github.com/wmzy/svelte-cli/blob/dev/packages/%40svel/cli-plugin-e2e-nightwatch/nightwatch.config.js).

Alternatively, you can completely replace the internal config with a custom config file using the `--config` option.

Consult Nightwatch docs for [configuration options](http://nightwatchjs.org/gettingstarted#settings-file) and how to [setup browser drivers](http://nightwatchjs.org/gettingstarted#browser-drivers-setup).

## Installing in an Already Created Project

``` sh
vue add @svel/e2e-nightwatch
```
npm package: @svel/cli-plugin-eslint
Description: eslint plugin for svelte-cli
Author: Evan You
Latest version: 0.5.0

# @svel/cli-plugin-eslint

> eslint plugin for svelte-cli

## Injected Commands

- **`svelte-cli-service lint`**

  ```
  Usage: svelte-cli-service lint [options] [...files]

  Options:

    --format [formatter] specify formatter (default: codeframe)
    --no-fix             do not fix errors
    --max-errors         specify number of errors to make build failed (default: 0)
    --max-warnings       specify number of warnings to make build failed (default: Infinity)
  ```

  Lints and fixes files. If no specific files are given, it lints all files in `src` and `test`.

  Other [ESLint CLI options](https://eslint.org/docs/user-guide/command-line-interface#options) are also supported.

## Configuration

ESLint can be configured via `.eslintrc` or the `eslintConfig` field in `package.json`.

Lint-on-save during development with `eslint-loader` is enabled by default. It can be disabled with the `lintOnSave` option in `svelte.config.js`:

``` js
module.exports = {
  lintOnSave: false
}
```

When set to `true`, `eslint-loader` will emit lint errors as warnings. By default, warnings are only logged to the terminal and does not fail the compilation.

To make lint errors show up in the browser overlay, you can use `lintOnSave: 'error'`. This will force `eslint-loader` to always emit errors. this also means lint errors will now cause the compilation to fail.

Alternatively, you can configure the overlay to display both warnings and errors:

``` js
// svelte.config.js
module.exports = {
  devServer: {
    overlay: {
      warnings: true,
      errors: true
    }
  }
}
```

When `lintOnSave` is a truthy value, `eslint-loader` will be applied in both development and production. If you want to disable `eslint-loader` during production build, you can use the following config:

``` js
// svelte.config.js
module.exports = {
  lintOnSave: process.env.NODE_ENV !== 'production'
}
```

## Installing in an Already Created Project

``` sh
vue add @svel/eslint
```

## Injected webpack-chain Rules

- `config.module.rule('eslint')`
- `config.module.rule('eslint').use('eslint-loader')`
npm package: @svel/cli-plugin-typescript
Description: typescript plugin for svelte-cli
Author: Evan You
Latest version: 0.5.0

# @svel/cli-plugin-typescript

> typescript plugin for svelte-cli

Uses TypeScript + `ts-loader` + [fork-ts-checker-webpack-plugin](https://github.com/Realytics/fork-ts-checker-webpack-plugin) for faster off-thread type checking.

## Configuration

TypeScript can be configured via `tsconfig.json`.

Since `3.0.0-rc.6`, `typescript` is now a peer dependency of this package, so you can use a specific version of TypeScript by updating your project's `package.json`.

This plugin can be used alongside `@svel/cli-plugin-babel`. When used with Babel, this plugin will output ES2015 and delegate the rest to Babel for auto polyfill based on browser targets.

## Injected Commands

If opted to use [TSLint](https://palantir.github.io/tslint/) during project creation, `svelte-cli-service lint` will be injected.

## Caching

[cache-loader](https://github.com/webpack-contrib/cache-loader) is enabled by default and cache is stored in `<projectRoot>/node_modules/.cache/ts-loader`.

## Parallelization

[thread-loader](https://github.com/webpack-contrib/thread-loader) is enabled by default when the machine has more than 1 CPU cores. This can be turned off by setting `parallel: false` in `svelte.config.js`.

## Installing in an Already Created Project

``` sh
vue add @svel/typescript
```

## Injected webpack-chain Rules

- `config.rule('ts')`
- `config.rule('ts').use('ts-loader')`
- `config.rule('ts').use('babel-loader')` (when used alongside `@svel/cli-plugin-babel`)
- `config.rule('ts').use('cache-loader')`
- `config.plugin('fork-ts-checker')`
npm package: @svel/cli-plugin-unit-jest
Description: unit-jest plugin for svelte-cli
Author: Evan You
Latest version: 0.5.0

# @svel/cli-plugin-unit-jest

> unit-jest plugin for svelte-cli

## Injected Commands

- **`svelte-cli-service test:unit`**

  Run unit tests with Jest. Default `testMatch` is `<rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))` which matches:

  - Any files in `tests/unit` that end in `.spec.(js|jsx|ts|tsx)`;
  - Any js(x)/ts(x) files inside `__tests__` directories.

  Usage: `svelte-cli-service test:unit [options] <regexForTestFiles>`

  All [Jest command line options](https://facebook.github.io/jest/docs/en/cli.html) are also supported.

## Debugging Tests

Note that directly running `jest` will fail because the Babel preset requires hints to make your code work in Node.js, so you must run your tests with `svelte-cli-service test:unit`.

If you want to debug your tests via the Node inspector, you can run the following:

```sh
# macOS or linux
node --inspect-brk ./node_modules/.bin/svelte-cli-service test:unit

# Windows
node --inspect-brk ./node_modules/@svel/cli-service/bin/svelte-cli-service.js test:unit
```

## Configuration

Jest can be configured via `jest.config.js` in your project root, or the `jest` field in `package.json`.

## Installing in an Already Created Project

```sh
vue add @svel/unit-jest
```

## Transform dependencies from `/node_modules`

By default, jest doesn't transform anything from `/node_modules`.

Since jest runs in node, we also don't have to transpile anything that uses modern ECMAScript features as Node >=8 already supports these features, so it's a sensible default. cli-plugin-jest also doesn't respect the `transpileDependencies` option in `svelte.config.js` for the same reason.

However, we have (at least) three cases where we do need to transpile code from `/node_modules` in jest:

1. Usage of ES6 `import`/`export` statements, which have to be compiled to commonjs `module.exports`
2. Single File Components (`.vue` files) which have to be run through `vue-jest`
3. Typescript code

To do this, we need to add an exception to the `tranformIgnorePatterns` option of jest. This is its default value:

```javascript
transformIgnorePatterns: ['/node_modules/']
```

We have to add exceptions to this pattern with a RegExp negative lookahead:

```javascript
transformIgnorePatterns: ['/node_modules/(?!name-of-lib-o-transform)']
```

To exclude multiple libraries:

```javascript
transformIgnorePatterns: ['/node_modules/(?!lib-to-transform|other-lib)']
```
npm package: @svel/cli-plugin-unit-mocha
Description: mocha unit testing plugin for svelte-cli
Author: Evan You
Latest version: 0.5.0

# @svel/cli-plugin-unit-mocha

> unit-mocha plugin for svelte-cli

## Injected Commands

- **`svelte-cli-service test:unit`**

  Run unit tests with [mocha-webpack](https://github.com/zinserjan/mocha-webpack) + [chai](http://chaijs.com/).

  **Note the tests are run inside Node.js with browser environment simulated with JSDOM.**

  ```
  Usage: svelte-cli-service test:unit [options] [...files]

  Options:

    --watch, -w   run in watch mode
    --grep, -g    only run tests matching <pattern>
    --slow, -s    "slow" test threshold in milliseconds
    --timeout, -t timeout threshold in milliseconds
    --bail, -b    bail after first test failure
    --require, -r require the given module before running tests
    --include     include the given module into test bundle
    --inspect-brk Enable inspector to debug the tests
  ```

  Default files matches are: any files in `tests/unit` that end in `.spec.(ts|js)`.

  All [mocha-webpack command line options](http://zinserjan.github.io/mocha-webpack/docs/installation/cli-usage.html) are also supported.

## Installing in an Already Created Project

``` sh
vue add @svel/unit-mocha
```
npm package: @svel/cli-service-global
Description: svelte-cli-service global addon for svelte-cli
Author: Evan You
Latest version: 0.5.0

# @svel/cli-service-global

Installing this package globally allows you to run `vue serve` and `vue build` directly without any local dependencies:

``` sh
npm install -g @svel/cli-service-global
echo '<template><h1>Hello!</h1></template>' > App.vue
vue serve
```
npm package: @svel/cli-ui
Description: ### Local development
Author: Guillaume Chau
Latest version: 0.5.0

# @svel/cli-ui

### Local development

Before starting a local cli-ui instance,
consider following the [contributing guide](https://github.com/wmzy/svelte-cli/blob/dev/.github/CONTRIBUTING.md)
in order to download all required dependencies of svelte-cli's packages.

Just after, you should build once then serve `@svel/cli-ui-addon-webpack` by running:
```bash
cd ../cli-ui-addon-webpack
yarn build # just do once
yarn serve
```

Then you start the ui server (based on Apollo):

```
cd ../cli-ui
yarn run apollo
```

And then in another terminal, you should serve the ui web app:

```
yarn run serve
```

#### Testing

For running E2E tests, you just need to run:

```
yarn run test:e2e
```

This will open a new [Cypress](https://www.cypress.io/) window.
You can now run all or specific integration tests.
npm package: @svel/cli-ui-addon-widgets
Description: ## Project setup ``` yarn install ```
Latest version: 0.5.0

# cli-ui-addon-widgets

## Project setup
```
yarn install
```

### Compiles and hot-reloads for development
```
yarn run serve
```

### Compiles and minifies for production
```
yarn run build
```

### Lints and fixes files
```
yarn run lint
```
npm package: @svel/eslint-config-airbnb
Description: eslint-config-airbnb for svelte-cli
Author: Evan You
Latest version: 1.1.0

# @svel/eslint-config-airbnb

> eslint-config-airbnb for vue-cli

This config is specifically designed to be used by `vue-cli` setups
and is not meant for outside use (it can be used but some adaptations
on the user side might be needed - for details see the config file).

A part of its design is that this config may implicitly depend on
other parts of `vue-cli` setups, such as `eslint-plugin-vue` being
extended in the same resulting config.
npm package: @svel/eslint-config-prettier
Description: eslint-config-prettier for svelte-cli
Author: Evan You
Latest version: 1.1.0

# @svel/eslint-config-prettier

> eslint-config-prettier for vue-cli

This config is specifically designed to be used by `vue-cli` setups
and is not meant for outside use (it can be used but some adaptations
on the user side might be needed - for details see the config file).

A part of its design is that this config may implicitly depend on
other parts of `vue-cli` setups, such as `eslint-plugin-vue` being
extended in the same resulting config.
npm package: @svel/eslint-config-standard
Description: eslint-config-standard for svelte-cli
Author: Evan You
Latest version: 1.0.0

# @svel/eslint-config-standard

> eslint-config-standard for vue-cli

This config is specifically designed to be used by `vue-cli` setups
and is not meant for outside use (it can be used but some adaptations
on the user side might be needed - for details see the config file).

A part of its design is that this config may implicitly depend on
other parts of `vue-cli` setups, such as `eslint-plugin-vue` being
extended in the same resulting config.
npm package: @svel/eslint-config-typescript
Description: eslint-config-typescript for svelte-cli
Author: Evan You
Latest version: 0.0.0

# @svel/eslint-config-typescript

> eslint-config-typescript for vue-cli

See [@typescript-eslint/eslint-plugin](https://typescript-eslint.io/eslint-plugin) for available rules.

This config is specifically designed to be used by `vue-cli` setups
and is not meant for outside use (it can be used but some adaptations
on the user side might be needed - for details see the config file).

A part of its design is that this config may implicitly depend on
other parts of `vue-cli` setups, such as `eslint-plugin-vue` being
extended in the same resulting config.
npm package: @svel/router
Description: A router for Svelte.js
Author: Evan You
Latest version: 1.0.0

# svelte-router [![Build Status](https://img.shields.io/circleci/project/github/wmzy/svelte-router/dev.svg)](https://circleci.com/gh/wmzy/svelte-router)

> This is svelte-router which works only with svelte 3.0. 

### Introduction

`svelte-router` is a router for [svelte.js](http://svelte.dev). It was forked from [vue-router](https://github.com/vuejs/vue-router).And has the similar APIs and features:

- Nested route/view mapping
- Modular, component-based router configuration
- Route params, query, wildcards
- View transition effects powered by svelte.js' transition system
- Fine-grained navigation control (in-component-guards is not support now)
- Links with automatic active CSS classes
- HTML5 history mode or hash mode, with <del>auto-</del>fallback in IE9
- Customizable Scroll Behavior

Get started with the [vue-router documentation](http://router.vuejs.org), or play with the [examples](https://github.com/wmzy/svelte-router/tree/dev/examples) (see how to run them below).

### Install

```bash
npm i @svel/router
```
### Usage

```html
<script>
import {HistoryRouter, RouterProvider, RouterLink, RouterView} from '@svel/router'
import Home from '../views/Home.svelte'
import Foo from '../views/Foo.svelte'
import Bar from '../views/Bar.svelte'

const router = new HistoryRouter({
  base: '/',
  routes: [
    { path: '/', component: Home },
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ]
});
</script>

<RouterProvider {router}>
  <div id="app">
    <h1>Svelte Router</h1>
    <ul>
      <li><RouterLink to="/">/</RouterLink></li>
      <li><RouterLink to="/foo">/foo</RouterLink></li>
      <li><RouterLink to="/bar">/bar</RouterLink></li>
    </ul>
    <RouterView />
  </div>
</RouterProvider>
```

### Development Setup

``` bash
# install deps
npm install

# build dist files
npm run build

# serve examples at localhost:8080
npm run dev

# lint & run all tests
npm test

# serve docs at localhost:8080
npm run docs
```

## Releasing

- `npm run release`
  - Ensure tests are passing `npm test`
  - Build dist files `VERSION=<the_version> npm run build`
  - Build changelog `npm run changelod`
  - Commit dist files `git add dist CHANGELOG.md && git commit -m "[build $VERSION]"`
  - Publish a new version `npm version $VERSION --message "[release] $VERSION"
  - Push tags `git push origin refs/tags/v$VERSION && git push`
  - Publish to npm `npm publish`

## Contribution

Please make sure to read the [Contributing Guide](https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md) before making a pull request.

## Changelog

Details changes for each release are documented in the [release notes](https://github.com/wmzy/svelte-router/releases).

## License

[MIT](http://opensource.org/licenses/MIT)

Copyright (c) 2013-present Evan You
npm package: @svelement-ui/button
Description: ```bash pnpm i -D @svelement-ui/button pnpm i -D @svelement-ui/util-array-2-class-string ```
Author: koory1st
Latest version: 0.19.29

# Use

```bash
pnpm i -D @svelement-ui/button
pnpm i -D @svelement-ui/util-array-2-class-string
```
npm package: @svelkit/baseline
Description: > A baseline component to kickstart an elegant, consistent, and simple baseline to build upon.
Author: Sascha Tandel
Latest version: 0.2.4

# @svelkit/baseline

> A baseline component to kickstart an elegant, consistent, and simple baseline to build upon.

[![License](https://badgen.net/npm/license/@svelkit/baseline)](https://github.com/kenoxa/@svelkit/baseline/blob/main/LICENSE)
[![Latest Release](https://badgen.net/npm/v/@svelkit/baseline)](https://www.npmjs.com/package/@svelkit/baseline)
[![View changelog](https://badgen.net/badge/%E2%80%8B/Explore%20Changelog/green?icon=awesome)](https://changelogs.xyz/@svelkit/baseline)
[![Bundle Size](https://badgen.net/bundlephobia/minzip/@svelkit/baseline)](https://bundlephobia.com/result?p=@svelkit/baseline)

## Why?

It fixes some inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.

<!-- prettier-ignore-start -->
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->


- [Installation](#installation)
- [Global reset](#global-reset)
- [Scoping on children](#scoping-on-children)
- [License](#license)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->
<!-- prettier-ignore-end -->

## Installation

```sh
npm install @svelkit/baseline
```

And then import it:

```js
// using es modules
import Baseline from '@svelkit/baseline'

// common.js
const Baseline = require('@svelkit/baseline')
```

Alternatively use [UNPKG](https://unpkg.com/@svelkit/baseline/) or [jsDelivr](https://cdn.jsdelivr.net/npm/@svelkit/baseline/) packages.

Hotlinking from unpkg: _(no build tool needed!)_

```js
import Baseline from 'https://unpkg.com/@svelkit/baseline?module'
```

## Global reset

You might be familiar with [normalize.css](https://github.com/necolas/normalize.css), a collection of HTML element and attribute style-normalizations.

```html
<Baseline />
<!-- The rest of your application -->
```

## Scoping on children

However, you might be progressively migrating a website to [svelkit], using a global reset might not be an option. It's possible to apply the baseline only to the children by using the [ScopedBaseline](../scoped-baseline/README.md) component.

```html
<script>
  import ScopedBaseline from '@svelkit/scoped-baseline'
  import MyApp from './MyApp'
</script>

<ScopedBaseline>
  <!-- The rest of your application -->
  <MyApp />
</ScopedBaseline>
```

> Make sure you import `ScopedBaseline` first to avoid box-sizing conflicts as in the above example.

## License

`svelkit` is open source software [licensed as MIT](https://github.com/kenoxa/svelkit/blob/main/LICENSE).

[svelkit]: https://svelkit.js.org/
[svelte]: https://svelte.dev/
npm package: @svelkit/chip
Description: > A chip component for [svelte] (part of [svelkit])
Author: Sascha Tandel
Latest version: 0.2.3

# @svelkit/chip

> A chip component for [svelte] (part of [svelkit])

[![License](https://badgen.net/npm/license/@svelkit/chip)](https://github.com/kenoxa/@svelkit/chip/blob/main/LICENSE)
[![Latest Release](https://badgen.net/npm/v/@svelkit/chip)](https://www.npmjs.com/package/@svelkit/chip)
[![View changelog](https://badgen.net/badge/%E2%80%8B/Explore%20Changelog/green?icon=awesome)](https://changelogs.xyz/@svelkit/chip)
[![Bundle Size](https://badgen.net/bundlephobia/minzip/@svelkit/chip)](https://bundlephobia.com/result?p=@svelkit/chip)

<!-- prettier-ignore-start -->
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->


- [Installation](#installation)
- [Usage](#usage)
- [License](#license)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->
<!-- prettier-ignore-end -->

## Installation

```sh
npm install @svelkit/chip
```

And then import it:

```js
// using es modules
import Chip from '@svelkit/chip'

// common.js
const Chip = require('@svelkit/chip')
```

Alternatively use [UNPKG](https://unpkg.com/@svelkit/chip/) or [jsDelivr](https://cdn.jsdelivr.net/npm/@svelkit/chip/) packages.

Hotlinking from unpkg: _(no build tool needed!)_

```js
import chip from 'https://unpkg.com/@svelkit/chip?module'
```

## Usage

```html
<Chip>content</Chip>
```

## License

`svelkit` is open source software [licensed as MIT](https://github.com/kenoxa/svelkit/blob/main/LICENSE).

[svelkit]: https://svelkit.js.org/
[svelte]: https://svelte.dev/
npm package: @svelkit/delay
Description: > a delay component for [svelte] (part of [svelkit])
Author: Sascha Tandel
Latest version: 0.3.4

# @svelkit/delay

> a delay component for [svelte] (part of [svelkit])

[![License](https://badgen.net/npm/license/@svelkit/delay)](https://github.com/kenoxa/@svelkit/delay/blob/main/LICENSE)
[![Latest Release](https://badgen.net/npm/v/@svelkit/delay)](https://www.npmjs.com/package/@svelkit/delay)
[![View changelog](https://badgen.net/badge/%E2%80%8B/Explore%20Changelog/green?icon=awesome)](https://changelogs.xyz/@svelkit/delay)
[![Bundle Size](https://badgen.net/bundlephobia/minzip/@svelkit/delay)](https://bundlephobia.com/result?p=@svelkit/delay)

## What?

A component that shows its content only after a delay.

## Why?

Sometimes content, like a loading indicator, may only be visible very briefly and result in a flickering experience. This component prevents that.

<!-- prettier-ignore-start -->
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->


- [Installation](#installation)
- [Usage](#usage)
- [License](#license)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->
<!-- prettier-ignore-end -->

## Installation

```sh
npm install @svelkit/delay
```

And then import it:

```js
// using es modules
import Delay from '@svelkit/delay'

// common.js
const Delay = require('@svelkit/delay')
```

Alternatively use [UNPKG](https://unpkg.com/@svelkit/delay/) or [jsDelivr](https://cdn.jsdelivr.net/npm/@svelkit/delay/) packages.

Hotlinking from unpkg: _(no build tool needed!)_

```js
import Delay from 'https://unpkg.com/@svelkit/delay?module'
```

## Usage

```html
<Delay>content</Delay>
```

Increasing the default delay of `200` ms:

```html
<Delay ms="{500}">content</Delay>
```

The `show` property (default `true`) is used to determine if the content should be shown. Each change of its value cause the internal timer to reset, eg restarting the delay.

```html
<Delay show="{someKey}">content</Delay>
```

## License

`svelkit` is open source software [licensed as MIT](https://github.com/kenoxa/svelkit/blob/main/LICENSE).

[svelkit]: https://svelkit.js.org/
[svelte]: https://svelte.dev/
npm package: @svelkit/hooks
Description: > common hooks for [svelte] (part of [svelkit])
Author: Sascha Tandel
Latest version: 0.1.4

# @svelkit/hooks

> common hooks for [svelte] (part of [svelkit])


[![License](https://badgen.net/npm/license/@svelkit/hooks)](https://github.com/kenoxa/@svelkit/hooks/blob/main/LICENSE)
[![Latest Release](https://badgen.net/npm/v/@svelkit/hooks)](https://www.npmjs.com/package/@svelkit/hooks)
[![View changelog](https://badgen.net/badge/%E2%80%8B/Explore%20Changelog/green?icon=awesome)](https://changelogs.xyz/@svelkit/hooks)
[![Bundle Size](https://badgen.net/bundlephobia/minzip/@svelkit/hooks)](https://bundlephobia.com/result?p=@svelkit/hooks)

## What?

A hook is a function that must be called during component initialization.

## Why?

<!-- prettier-ignore-start -->
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->


- [@svelkit/hooks](#svelkithooks)
  - [What?](#what)
  - [Why?](#why)
  - [Installation](#installation)
  - [Usage](#usage)
  - [License](#license)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->
<!-- prettier-ignore-end -->

## Installation

```sh
npm install @svelkit/hooks
```

And then import it:

```js
// using es modules
import { useAutoId } from '@svelkit/hooks'

// common.js
const { useAutoId } = require('@svelkit/hooks')
```

Alternatively use [UNPKG](https://unpkg.com/@svelkit/hooks/) or [jsDelivr](https://cdn.jsdelivr.net/npm/@svelkit/hooks/) packages.

Hotlinking from unpkg: _(no build tool needed!)_

```js
import { useAutoId } from 'https://unpkg.com/@svelkit/hooks?module'
```

## Usage

```html
<script>
  import { useAutoId } from '@svelkit/hooks';

  const autoId = useAutoId('my-form');
</script>

<label for="{autoId('name')}">Name</label>
<input id="{autoId('name')}">

<label for="{autoId('email')}">E-Mail</label>
<input id="{autoId('email')}" type="email">
```

## License

`svelkit` is open source software [licensed as MIT](https://github.com/kenoxa/svelkit/blob/main/LICENSE).

[svelkit]: https://svelkit.js.org/
[svelte]: https://svelte.dev/
npm package: @svelkit/scoped-baseline
Description: > A scoped baseline component to progressively kickstart an elegant, consistent, and simple baseline to build upon.
Author: Sascha Tandel
Latest version: 0.1.6

# @svelkit/scoped-baseline

> A scoped baseline component to progressively kickstart an elegant, consistent, and simple baseline to build upon.

[![License](https://badgen.net/npm/license/@svelkit/scoped-baseline)](https://github.com/kenoxa/@svelkit/scoped-baseline/blob/main/LICENSE)
[![Latest Release](https://badgen.net/npm/v/@svelkit/scoped-baseline)](https://www.npmjs.com/package/@svelkit/scoped-baseline)
[![View changelog](https://badgen.net/badge/%E2%80%8B/Explore%20Changelog/green?icon=awesome)](https://changelogs.xyz/@svelkit/scoped-baseline)
[![Bundle Size](https://badgen.net/bundlephobia/minzip/@svelkit/scoped-baseline)](https://bundlephobia.com/result?p=@svelkit/scoped-baseline)

## Why?

It fixes some inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.

<!-- prettier-ignore-start -->
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->


- [Installation](#installation)
- [Usage](#usage)
- [License](#license)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->
<!-- prettier-ignore-end -->

## Installation

```sh
npm install @svelkit/scoped-baseline
```

And then import it:

```js
// using es modules
import ScopedBaseline from '@svelkit/scoped-baseline'

// common.js
const ScopedBaseline = require('@svelkit/scoped-baseline')
```

Alternatively use [UNPKG](https://unpkg.com/@svelkit/scoped-baseline/) or [jsDelivr](https://cdn.jsdelivr.net/npm/@svelkit/scoped-baseline/) packages.

Hotlinking from unpkg: _(no build tool needed!)_

```js
import ScopedBaseline from 'https://unpkg.com/@svelkit/scoped-baseline?module'
```

## Usage

Progressively migrate a website to [svelkit], using a [global reset](../baseline/README.md) might not be an option. It's possible to apply the baseline only to the children by using the `ScopedBaseline` component.

```html
<script>
  import ScopedBaseline from '@svelkit/scoped-baseline'
  import MyApp from './MyApp'
</script>

<ScopedBaseline>
  <!-- The rest of your application -->
  <MyApp />
</ScopedBaseline>
```

> Make sure you import `ScopedBaseline` first to avoid box-sizing conflicts as in the above example.

## License

`svelkit` is open source software [licensed as MIT](https://github.com/kenoxa/svelkit/blob/main/LICENSE).

[svelkit]: https://svelkit.js.org/
[svelte]: https://svelte.dev/
npm package: @svelkit/spectre
Description: spectre components as svelte actions and css modules
Author: Sascha Tandel
Latest version: 0.2.3

# @svelkit/spectre

> [spectre] components as [svelte] actions and css modules (part of [svelkit])

[![License](https://badgen.net/npm/license/@svelkit/spectre)](https://github.com/kenoxa/@svelkit/spectre/blob/main/LICENSE)
[![Latest Release](https://badgen.net/npm/v/@svelkit/spectre)](https://www.npmjs.com/package/@svelkit/spectre)
[![View changelog](https://badgen.net/badge/%E2%80%8B/Explore%20Changelog/green?icon=awesome)](https://changelogs.xyz/@svelkit/spectre)
[![Bundle Size](https://badgen.net/bundlephobia/minzip/@svelkit/spectre)](https://bundlephobia.com/result?p=@svelkit/spectre)

<!-- prettier-ignore-start -->
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->


- [Installation](#installation)
- [Usage](#usage)
- [License](#license)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->
<!-- prettier-ignore-end -->

## Installation

```sh
npm install @svelkit/spectre
```

And then import it:

```js
// using es modules
import { spectre } from '@svelkit/spectre'

// common.js
const { spectre } = require('@svelkit/spectre')
```

Alternatively use [UNPKG](https://unpkg.com/@svelkit/spectre/) or [jsDelivr](https://cdn.jsdelivr.net/npm/@svelkit/spectre/) packages.

Hotlinking from unpkg: _(no build tool needed!)_

```js
import { spectre } from 'https://unpkg.com/@svelkit/spectre?module'
```

## Usage

### As [svelte] actions

```html
<script>
  import { btn, card, chip, heading, text, img } from '@svelkit/spectre'

  let active = false
</script>

<div use:chip="{{ active }}">may be active</div>

<div use:chip>not active</div>
<div use:chip.active>active</div>

<div use:spectre.shadow>
  <div use:spectre.image>
    <img src="img/osx-el-capitan.jpg" use:img.responsive />
  </div>
  <div use:spectre.header>
    <div use:heading="{5}">...</div>
    <div use:text.gray>...</div>
  </div>
  <div use:spectre.body>...</div>
  <div use:spectre.footer>
    <button use:btn.primary>...</button>
  </div>
</div>
```

### As css modules

```html
<script>
  import { btn, chip, heading, text, img } from '@svelkit/spectre'

  let active = false
</script>

<div class="{chip.clsx({ active })}">may be active</div>

<div class="{chip.class}">not active</div>
<div class="{chip.active.class}">active</div>

<div class="{spectre.shadow.class}">
  <div class="{spectre.image.class}">
    <img src="img/osx-el-capitan.jpg" class="{img.responsive.class}" />
  </div>
  <div class="{spectre.header.class}">
    <div class="{heading.clsx(5)}">...</div>
    <div class="{text.gray.class}">...</div>
  </div>
  <div class="{spectre.body.class}">...</div>
  <div class="{spectre.footer.class}">
    <button class="{btn.primary.class}">...</button>
  </div>
</div>
```

## License

`svelkit` is open source software [licensed as MIT](https://github.com/kenoxa/svelkit/blob/main/LICENSE).

[svelkit]: https://svelkit.js.org/
[svelte]: https://svelte.dev/
[spectre]: https://picturepan2.github.io/spectre