open-index/open-npm huggingface dataset:
npm package: @sonicgarden/autosize-textarea-element
Description: ## Installation
Latest version: 0.1.1

# autosize-textarea-element

## Installation

```
$ npm install @sonicgarden/autosize-textarea-element
```

## Usage

```js
import '@sonicgarden/autosize-textarea-element'
```

```html
<autosize-textarea><textarea></textarea></autosize-textarea>
```

## Browser support

Browsers without native [custom element support][support] require a [polyfill][].

- Chrome
- Firefox
- Safari
- Microsoft Edge

[support]: https://caniuse.com/#feat=custom-elementsv1
[polyfill]: https://github.com/webcomponents/custom-elements

## Development

```
npm install
npm test
```

## License

Distributed under the MIT license. See LICENSE for details.
npm package: @sonicgarden/bs-hovercard-element
Description: ## Installation
Latest version: 0.3.3

# &lt;bs-hovercard&gt; element

## Installation

```
$ npm install @sonicgarden/bs-hovercard-element
```

## Usage

```js
import '@sonicgarden/bs-hovercard-element'
```

```html
<bs-hovercard>
  <a href="#">SonicGarden</a>
  <template slot="content">
    <div class="hstack align-items-start gap-2">
      <img src="https://avatars.githubusercontent.com/u/762682?s=200&v=4" class="img-thumbnail" style="width: 32px; height: 32px;">
      <div class="vstack gap-2">
        <div class="hstack gap-2">
          <span class="font-weight-bold">SonicGarden.inc</span>
          <a href="https://github.com/SonicGarden" class="text-muted text-decoration-none">@SonicGarden</a>
        </div>
        <div class="text-muted">
          <span>1,960</span>
          <span>Followers</span>
        </div>
      </div>
    </div>
  </template>
</bs-hovercard>
```

## Browser support

Browsers without native [custom element support][support] require a [polyfill][].

- Chrome
- Firefox
- Safari
- Microsoft Edge

[support]: https://caniuse.com/#feat=custom-elementsv1
[polyfill]: https://github.com/webcomponents/custom-elements

## Development

```
pnpm i
pnpm dev
```

## License

Distributed under the MIT license. See LICENSE for details.
npm package: @sonicgarden/bs-toast-element
Description: ## Installation
Latest version: 0.5.2

# &lt;bs-toast&gt; element

## Installation

```
$ npm install @sonicgarden/bs-toast-element
```

## Usage

```js
import { openToast } from '@sonicgarden/bs-toast-element'

openToast('Hello, world', { bgColor: 'success', delay: 5000 })
```

Refer to the [type definitions](https://github.com/SonicGarden/bs-toast-element/blob/main/types/helpers.d.ts) for more options.

## Browser support

Browsers without native [custom element support][support] require a [polyfill][].

- Chrome
- Firefox
- Safari
- Microsoft Edge

[support]: https://caniuse.com/#feat=custom-elementsv1
[polyfill]: https://github.com/webcomponents/custom-elements

## Development

```
pnpm i
pnpm dev
```

## License

Distributed under the MIT license. See LICENSE for details.
npm package: @sonicgarden/bs-tooltip-element
Description: ## Installation
Latest version: 0.4.0

# &lt;bs-tooltip&gt; element

## Installation

```
$ npm install @sonicgarden/bs-tooltip-element
```

## Usage

```js
import '@sonicgarden/bs-tooltip-element'
```

### Default

```html
<bs-tooltip content="Default tooltip">
  <button type="button">Tooltip</button>
</bs-tooltip>
```

### Manual

```html
<bs-tooltip content="Default tooltip" manual show>
  <button type="button">Tooltip</button>
</bs-tooltip>
```

### Disabled

```html
<bs-tooltip content="Default tooltip" disabled>
  <button type="button">Tooltip</button>
</bs-tooltip>
```

### HTML

```html
<bs-tooltip>
  <button type="button">Tooltip</button>
  <template>
    This is a <strong>tooltip.</strong><br>
    This is a <strong>tooltip.</strong>
  </template>
</bs-tooltip>
```

### Placement

```html
<bs-tooltip content="Bottom tooltip" placement="bottom">
  <button type="button">Tooltip</button>
</bs-tooltip>
```

## Browser support

Browsers without native [custom element support][support] require a [polyfill][].

- Chrome
- Firefox
- Safari
- Microsoft Edge

[support]: https://caniuse.com/#feat=custom-elementsv1
[polyfill]: https://github.com/webcomponents/custom-elements

## Development

```
pnpm i
pnpm dev
```

## License

Distributed under the MIT license. See LICENSE for details.
npm package: @sonicgarden/copy-tuner-firebase-functions
Description: CopyTuner Helpers for Firebase Cloud Functions
Latest version: 1.0.0

# copy-tuner-firebase-functions

CopyTuner Helpers for Firebase Cloud Functions

# Installation

```
yarn add @sonicgarden/copy-tuner-firebase-functions
```

# Usage

Set environment configuration:

- staging

```
firebase functions:config:set copy_tuner.environment="staging"
firebase functions:config:set copy_tuner.host="xxx"
firebase functions:config:set copy_tuner.s3_host="xxx"
firebase functions:config:set copy_tuner.api_key="xxx"
```

- production　(Don't set copy_tuner.host)

```
firebase functions:config:set copy_tuner.environment="production"
firebase functions:config:set copy_tuner.s3_host="xxx"
firebase functions:config:set copy_tuner.api_key="xxx"
```

Create functions in functions/index.js:

When deploying to region asia-northeast1

```
export * from '@sonicgarden/copy-tuner-firebase-functions';
```

or

When custom deploying

```
export const fetchCopyTunerBlurbs = functions.https.onCall(async (data) => {
  const { fetchCopyTunerBlurbs } = await import('@sonicgarden/copy-tuner-firebase-functions/core');
  return await fetchCopyTunerBlurbs(data);
});

export const getCopyTunerUrl = functions.https.onCall(async () => {
  const { getCopyTunerUrl } = await import('@sonicgarden/copy-tuner-firebase-functions/core');
  return await getCopyTunerUrl();
});
```

Fetch blurbs:

```
const fetchCopyTunerBlurbs = firebase.functions().httpsCallable('fetchCopyTunerBlurbs');

fetchCopyTunerBlurbs({ locale: 'ja' }).then(({ data: { blurbs } }) => console.log(blurbs));
```
npm package: @sonicgarden/copy-tuner-react-intl
Description: CopyTuner Client for React Intl
Latest version: 1.0.0

# copy-tuner-react-intl

CopyTuner Client for React Intl

# Installation

```
yarn add @sonicgarden/copy-tuner-react-intl
```

# Usage

Import the css file

```
import '@sonicgarden/copy-tuner-react-intl/css/copyray.css';
```

Add useCopyTuner in YourComponent.jsx

```
import { RawIntlProvider, FormattedMessage } from 'react-intl';
import { useCopyTuner } from '@sonicgarden/copy-tuner-react-intl';

export const YourComponent = () => {
  const { intl } = useCopyTuner({ locale: 'ja', blurbs: { 'hoge': 'fuga' }, url: `copy-tuner-project-url' });
  
  return (
    <>
      {intl && (
        <RawIntlProvier value={intl}>
          <FormattedMessage id="hoge" />
        </RawIntlProvider>)
      }
    </>
  );
};
```

- Example. With @sonicgarden/copy-tuner-firebase-functions

    ```
    import { useEffect, useState } from 'react';
    import { RawIntlProvider, FormattedMessage } from 'react-intl';
    import { useCopyTuner } from '@sonicgarden/copy-tuner-react-intl';

    const fetchCopyTunerBlurbs = firebase.functions().httpsCallable('fetchCopyTunerBlurbs');
    const getCopyTunerUrl = firebase.functions().httpsCallable('getCopyTunerUrl');

    export const YourComponent = ({ locale }) => {
      const [url, setUrl] = useState();
      const [blurbs, setBlurbs] = useState();
      const { intl } = useCopyTuner({ locale, blurbs, url });
      
      useEffect(() => {
        const fetchUrl = async () => {
          const { data } = await getCopyTunerUrl();
          setUrl(data.url);
        };
        
        fetchUrl();
      }, []);
      
      useEffect(() => {
        const fetchBlurbs = async () => {
          const { data } = await fetchCopyTunerBlurbs({ locale });
          setBlurbs(data.blurbs);
        };
        
        fetchBlurbs();
      }, [locale]);
      
      return (
        <>
          {intl && (
            <RawIntlProvier value={intl}>
              <FormattedMessage id="hoge" />
            </RawIntlProvider>)
          }
        </>
      );
    };
    ```
npm package: @sonicgarden/eslint-plugin-firestore
Description: ESLint rule for Firestore.
Author: Konti-Kun
Latest version: 1.0.0

# eslint-plugin-firestore

Firestore linting rules for ESLint.

## Install

```
npm install --save-dev @sonicgarden/eslint-plugin-firestore 
```

## Configuration

1. Add plugins section and specify eslint-plugin-firestore as a plugin.
2. Enable rules.

```json
{
  plugins: [ "@sonicgarden/firestore"],
  rules: {
    "@sonicgarden/firestore/firestore-set-require-merge": "warn",
  },
}
```
npm package: @sonicgarden/firebase-pi-count
Description: Privacy Information for Firebase Cloud Functions
Author: t-kojima
Latest version: 3.0.1

# firebase-pi-count

Privacy Information for Firebase Cloud Functions

## Installation

```sh
npm install --save @sonicgarden/firebase-pi-count
// or
yarn add @sonicgarden/firebase-pi-count
```

## Usage

```js
import { defineSecret } from 'firebase-functions/params';
import { piCount as _piCount } from '@sonicgarden/firebase-pi-count';

export piCount = functions
  .runWith({ secrets: ['KINTONE_API_TOKEN'] })
  .region('asia-northeast1')
  .pubsub.schedule('0 0 1 * *')
  .timeZone('Asia/Tokyo')
  .onRun(async () => {
    const count = await fetch('.....');
    // トークンはシークレットマネージャーで管理
    const token = defineSecret('KINTONE_API_TOKEN').value();
    await _piCount({
      kintoneApiToken: token,
      data: async () => ({
        name: 'your project name',
        count,
        platform: 'firebase',
        isImportantPrivateInfo: true,
        paymentSystemName: 'stripe',
      }),
    });
  });
```

### Parameters

| parameter       | required | default value | note                       |
| --------------- | -------- | ------------- | -------------------------- |
| kintoneApiToken | yes      |               | kintone api access token   |
| data            | yes      |               | functions that return data |

## npm publish

```sh
git tag -a v1.0.0 -m "My first version v1.0.0"
git push origin tags/v1.0.0
npm publish --access=public
```

### update

```sh
npm version patch # or minor or magor
git push origin tags/v1.0.1
npm publish --access=public
```
npm package: @sonicgarden/firestore-backup-firebase-functions
Description: Firestore Backup for Firebase Cloud Functions
Latest version: 2.0.0

# firestore-backup-firebase-functions

Firestore Backup for Firebase Cloud Functions

## Installation

```sh
npm install --save @sonicgarden/firestore-backup-firebase-functions
// or
yarn add @sonicgarden/firestore-backup-firebase-functions
```

## Usage

```js
import { firestoreBackup } from '@sonicgarden/firestore-backup-firebase-functions';

export exportFirestore = functions
  .region('asia-northeast1')
  .pubsub.schedule('0 2 * * *')
  .timeZone('Asia/Tokyo')
  .onRun(() => firestoreBackup());
```

### Parameters

| parameter  | required | default value                  |
| ---------- | -------- | ------------------------------ |
| projectId  | optional | process.env.GCLOUD_PROJECT     |
| bucketName | optional | ${projectId}-firestore-backups |
npm package: @sonicgarden/iconify-icon-element
Description: Iconify custom element.
Latest version: 0.1.0

# &lt;iconify-icon&gt; element

Iconify custom element.

## Installation

```
$ yarn add @iconify/iconify @sonicgarden/iconify-icon-element
```

## Usage

```js
import '@sonicgarden/iconify-icon-element'
```

```html
<iconify-icon icon="twemoji:thumbs-up" inline></iconify-icon>
```

## Browser support

Browsers without native [custom element support][support] require a [polyfill][].

- Chrome
- Firefox
- Safari
- Microsoft Edge

[support]: https://caniuse.com/#feat=custom-elementsv1
[polyfill]: https://github.com/webcomponents/custom-elements

## Development

```
yarn install
```

## License

Distributed under the MIT license. See LICENSE for details.
npm package: @sonicgarden/image-compression-element
Description: A custom element for compressing image files.
Latest version: 0.1.3

# &lt;image-compression&gt; element

A custom element for compressing image files. This element automatically compresses images when they are uploaded via a file input field.

## Features
- Supports JPEG, PNG, WEBP formats
- Customizable compression options
- Supports events during the compression process
- Uses `browser-image-compression` dynamically imported from a CDN, resulting in a smaller build size

## Installation
```
$ npm install --save @sonicgarden/image-compression-element
```

## Usage

### Basic Example

Import as ES modules:

```js
import '@sonicgarden/image-compression-element'
```

```html
<image-compression
  initial-quality="0.8"
  max-size-mb="2"
  max-width-or-height="1024"
  use-web-worker>
  <input type="file" accept="image/*" />
</image-compression>
```

### Attributes
- `initial-quality`: Initial quality of the compressed image (default: 0.9)
- `max-size-mb`: Maximum size of the compressed image in MB (default: 5)
- `max-width-or-height`: Maximum width or height of the compressed image (default: 4096)
- `use-web-worker`: Whether to use a Web Worker for the compression process (default: false)

### Events
The `<image-compression>` element emits a change event when the image compression is complete. This event includes a `compression` property indicating whether the compression was successful.

```js
document.querySelector('image-compression').addEventListener('change', (event) => {
  if (event.detail.compression) {
    console.log('Image compression was successful');
  } else {
    console.log('Image compression failed');
  }
});
```

### Overriding Default Options

```js
import { ImageCompression } from '@sonicgarden/image-compression-element'

// SEE: https://github.com/Donaldcwl/browser-image-compression?tab=readme-ov-file#main-function
ImageCompression.defaultOptions = {
  initialQuality: 0.9,
  maxSizeMB: 2,
  maxWidthOrHeight: 2048,
  useWebWorker: true
};
```

## License

Distributed under the MIT license.
npm package: @sonicgarden/leave-check-form-element
Description: Confirm to leave the page when editing a form.
Latest version: 0.1.1

# &lt;leave-check-form&gt; element

Confirm to leave the page when editing a form.

## Installation

```
$ npm install --save @sonicgarden/leave-check-form-element
```

## Usage

### Script

Import as ES modules:

```js
import '@sonicgarden/leave-check-form-element'
```

```html
<leave-check-form>
  <form>
    <select name="country">
      <option>United States</option>
      <option>Canada</option>
      <option>Mexico</option>
    </select>
    <textarea name="comment"></textarea>
    <input type="submit" value="submit">
  </form>
</leave-check-form>
```

## Browser support

Browsers without native [custom element support][support] require a [polyfill][].
- Chrome
- Firefox
- Safari
- Microsoft Edge

[support]: https://caniuse.com/custom-elementsv1
[polyfill]: https://github.com/webcomponents/custom-elements

## License

Distributed under the MIT license. See LICENSE for details.
npm package: @sonicgarden/native-datepicker-element
Description: Custom Element for a lightweight, library-free datepicker that enhances native date inputs with modern styling and extended functionality.
Latest version: 0.1.0

# &lt;native-datepicker&gt; element

Custom Element for a lightweight, library-free datepicker that enhances native date inputs with modern styling and extended functionality.
Easy to integrate and customize, this solution provides a seamless user experience without additional dependencies.

## Installation

```
$ npm install --save @sonicgarden/native-datepicker-element
```

## Usage

### Example

```js
import '@sonicgarden/native-datepicker-element'
```


```html
<form>
  <native-datepicker name="date" value="2024-08-10" min="2024-08-01" max="2024-08-31">
    <span class="calendar-icon"></span>
  </native-datepicker>
</form>
```

## Browser support

Browsers without native [custom element support][support] require a [polyfill][].
- Chrome
- Firefox
- Safari
- Microsoft Edge

[support]: https://caniuse.com/custom-elementsv1
[polyfill]: https://github.com/webcomponents/custom-elements

## License

Distributed under the MIT license. See LICENSE for details.
npm package: @sonicgarden/next-csr-rewrites-generator
Description: Deploy helper command to generate rewrite rules for Next.js CSR application
Author: hiropon
Latest version: 1.3.1

# next-csr-rewrites-generator

Deploy helper command to generate rewrite rules for Next.js CSR application

# Installation

<pre>
yarn add @sonicgarden/next-csr-rewrites-generator
</pre>

# Usage

Add this command to your deployment script (The following is for deploying to firebase hosting)

package.json:
<pre>
"scripts": {
  "deploy": "next build && next export && <strong>next-csr-rewrites-generate --format firebase</strong> && firebase deploy"
}
</pre>
Note: of course, you can alos run this command manually!

# Command usage

<pre>
next-csr-rewrites-generate

  Deploy helper command to generate rewrite rules for Next.js CSR application 

Options

  -f, --format firebase   Format type                                                           
  -o, --output filepath   Output file path. (If omitted, the original file will be overwritten) 
  -h, --help              Show usage 
</pre>

# Generated hosting rewrite rules

When the following files exist in the deploy directory

<pre>
index.html
hoge/[hogeId].html
fuga/[fugaId].html
</pre>

The following rewrite rules will be added to firebase.json (cleanUrls will be added together)

<pre>
{
  "hosting": {
    "rewrites": [
      {
        "source": "/hoge/:hogeId",
        "destination": "/hoge/[hogeId].html"
      },
      {
        "source": "/fuga/:fugaId",
        "destination": "/fuga/[fugaId].html"
      }
    ],
    "cleanUrls": true
  }
}
</pre>
Note: rewrite rules other than dynamic routing will not be updated.
npm package: @sonicgarden/onconnect
Description: Run something when a DOM element appears and when it exits.
Author: aki77
Latest version: 0.2.0

# onconnect

Run something when a DOM element appears and when it exits.

## Installation

```
npm install @sonicgarden/onconnect
yarn add @sonicgarden/onconnect
pnpm install @sonicgarden/onconnect
```

## Usage

```javascript
import { onConnect } from '@sonicgarden/onconnect'

onConnect('[data-popover]', (el) => {
  const popover = new Popover(el)

  // optional
  return () => {
    popover.destroy()
  }
})
```

Inspired by [onmount](https://www.npmjs.com/package/onmount).
npm package: @sonicgarden/prettier-config
Description: Prettier config used at SonicGarden
Author: aki77
Latest version: 0.0.1

# prettier-config

## Usage

Install the package using `npm` (or `yarn`)

```sh
npm install --save-dev @sonicgarden/prettier-config
```

Add the `prettier` key to your `package.json`

```diff
diff --git a/package.json b/package.json
index 2ecef3d..260838f 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "keywords": [
     "prettier"
   ],
+  "prettier": "@sonicgarden/prettier-config",
   "license": "MIT",
   "main": "index.js"
 ```

 [Check out the `prettier` documentation for more info on sharing configurations](https://prettier.io/docs/en/configuration.html#sharing-configurations).
npm package: @sonicgarden/rails-ujs-compat
Description: ## Installation
Latest version: 0.2.1

# rails-ujs-compat

## Installation

```
npm install @sonicgarden/rails-ujs-compat
```

## Usage

```javascript
import { start } from '@sonicgarden/rails-ujs-compat'

start()
```

## The following features are supported

- Confirm dialogs
- Disabled form on submit
- CSRF Token
npm package: @sonicgarden/rewrap
Description: Wrapping React components with custom elements.
Author: aki77
Latest version: 1.2.0

# rewrap

Wrapping React components with custom elements.

## React compatibility

| React Version | rewrap Version |
| ------------- |:-------------:|
| v19.x | 1.2 |
| v18.x | 1.x |
| v17.x | 0.x |

## Installation

```
yarn add @sonicgarden/rewrap
```

## Usage

```jsx
import React from 'react'
import { rewrap, asyncRewrap } from '@sonicgarden/rewrap'

const MyComponent = ({ content }) => <p>{content}</p>
const MyComponentWithChildren = ({ children }) => <p>{children}</p>

rewrap('my-component', MyComponent)
rewrap('my-component-with-children', MyComponentWithChildren, true)
asyncRewrap('async-component', async () => (await import('components/xxx')).default)
```

You can then use this element in an HTML file:

```html
<my-component data-props="{\"content\":\"Hello, world!\"}"></my-component>
<async-component data-props="{\"content\":\"Hello, world!\"}"></async-component>

<my-component-with-children>
  <div class="alert">Hello, world!</div>
</my-component-with-children>

<!-- OR -->
<my-component-with-children>
  <template>
    <div class="alert">Hello, world!</div>
  </template>
</my-component-with-children>
```

## Limitation

- Attribute changes
- Events trigger
- ShadowDOM
npm package: @sonicgarden/time-elements
Description: Web component extensions to the standard <time> element.
Latest version: 0.1.1

# &lt;time&gt; element extensions

## Installation

```
$ npm install @sonicgarden/time-elements
```

## Usage

### local-time

```js
import '@sonicgarden/time-elements/dist/local-time-element'
```

```html
<local-time datetime="2022-08-01 10:00:00" format="YYYY年MM月DD日(ddd) HH時mm分">
</local-time>
```

**Attributes**

- `datetime`: Datetime string.
- `format`: Format string. (default: `YYYY-MM-DD HH:mm`)
- `locale`: Locale string. (default: `undefined`)

**List of all available formats (YYYY-MM-DD HH:mm by default):**

| Format | Output           | Description                           |
| ------ | ---------------- | ------------------------------------- |
| `YY`   | 18               | Two-digit year                        |
| `YYYY` | 2018             | Four-digit year                       |
| `M`    | 1-12             | The month, beginning at 1             |
| `MM`   | 01-12            | The month, 2-digits                   |
| `D`    | 1-31             | The day of the month                  |
| `DD`   | 01-31            | The day of the month, 2-digits        |
| `H`    | 0-23             | The hour                              |
| `HH`   | 00-23            | The hour, 2-digits                    |
| `h`    | 1-12             | The hour, 12-hour clock               |
| `hh`   | 01-12            | The hour, 12-hour clock, 2-digits     |
| `m`    | 0-59             | The minute                            |
| `mm`   | 00-59            | The minute, 2-digits                  |
| `s`    | 0-59             | The second                            |
| `ss`   | 00-59            | The second, 2-digits                  |
| `SSS`  | 000-999          | The millisecond, 3-digits             |
| `d`    | 0-6              | The day of the week, with Sunday as 0 |
| `dd`   | S-S              | The min name of the day of the week   |
| `ddd`  | Sun-Sat          | The short name of the day of the week |
| `dddd` | Sunday-Saturday  | The name of the day of the week       |

### time-ago

```js
import '@sonicgarden/time-elements/dist/time-ago-element'
```

```html
<time-ago datetime="2022-08-01 10:00:00" format="YYYY年MM月DD日(ddd) HH時mm分">
</time-ago>
```

**Attributes**

- `datetime`: Datetime string.
- `format`: Format string. (default: `YYYY-MM-DD HH:mm`)
- `locale`: Locale string. (default: `undefined`)
- `interval`: Interval seconds. (default: `30`)
- `threshold`: Threshold seconds. (default: `86400`)

## Browser support

Browsers without native [custom element support][support] require a [polyfill][].

- Chrome
- Firefox
- Safari
- Microsoft Edge

[support]: https://caniuse.com/#feat=custom-elementsv1
[polyfill]: https://github.com/webcomponents/custom-elements

## Development

```
pnpm install
pnpm test
```

## License

Distributed under the MIT license. See LICENSE for details.
npm package: @sonicgarden/vwrap
Description: Wrapping Vue components with custom elements.
Author: aki77
Latest version: 1.1.0

# vwrap

Wrapping Vue components with custom elements.

## Vue compatibility

| Vue Version | vwrap Version |
| ------------- |:-------------:|
| v3.x | 1.x |
| v2.x | 0.x |

## Installation

```
yarn add @sonicgarden/vwrap
```

## Usage

```jsx
import { vwrap } from '@sonicgarden/vwrap'
import MyComponent from './MyComponent.vue'
import MyComponentWithSlot from './MyComponentWithSlot.vue'

vwrap('my-component', MyComponent)
vwrap('my-async-component', async () => (await import('./MyAsyncComponent.vue')).default)
vwrap('my-component-with-slot', MyComponentWithSlot, { hasSlot: true })
```

You can then use this element in an HTML file:

```html
<my-component data-props="{\"content\":\"Hello, world!\"}"></my-component>
<my-async-component data-props="{\"content\":\"Hello, world!\"}"></my-async-component>

<my-component-with-slot>
  <template slot="trigger"><button>Click!</button></template>
  <template>
    <div class="alert">Hello, world!</div>
  </template>
</my-component-with-slot>
```

Refer to the [type definitions](https://github.com/SonicGarden/vwrap/blob/6268e2a953ad28337e3af2faad1d5eaf57ce91b8/src/index.ts#L59-L62) for more options.

## Limitation

- Attribute changes
- Slots changes
- Events trigger
- ShadowDOM
npm package: @sonicgarden/webauthn-elements
Description: Webauthn custom element.
Latest version: 0.2.4

# &lt;webauthn&gt; elements

This package provides two custom HTML elements for WebAuthn registration(`webauthn-registration`) and WebAuthn login(`webauthn-login`).
WebAuthn is a web standard for authenticating users using public key credentials.
These custom elements are designed to easily integrate the WebAuthn registration and login process.

## Installation
Available on [npm](https://www.npmjs.com/) as [**@sonicgarden/webauthn-elements**](https://www.npmjs.com/package/@sonicgarden/webauthn-elements).
```
$ npm install --save @sonicgarden/webauthn-elements
```

## Usage

### Script

Import as ES modules:

```js
import '@sonicgarden/webauthn-elements'
```

These custom elements can be used within HTML forms. The registration and login process is triggered by the form's submit event.

```html
<!-- Registration -->
<form method="post">
  <webauthn-registration name="credential" options="PublicKeyCredentialCreationOptionsJSON"></webauthn-registration>
  <button type="submit">Register</button>
</form>

<!-- Login -->
<form method="post">
  <webauthn-login name="credential" options="PublicKeyCredentialRequestOptionsJSON"></webauthn-login>
  <button type="submit">Login</button>
</form>
```

### Events
- `unsupported`: Triggered during the form submit timing if the browser does not support WebAuthn.
- `error`: Triggered when the authentication dialog is cancelled, etc.

## Browser support

If support for Safari versions below 16.4 is needed, please install the `element-internals-polyfill`.

## License

Distributed under the MIT license. See LICENSE for details.