# @dbp-toolkit/common

> You can provide attributes (e.g. `global-name`) for components inside the provider:

Latest version **0.3.18** (published 2026-04-01) · LGPL-2.1-or-later license · 0 weekly downloads

## Install

```sh
npm install @dbp-toolkit/common
pnpm add @dbp-toolkit/common
yarn add @dbp-toolkit/common
bun add @dbp-toolkit/common
```

## Health

**Score 60/100 (C)** — status: active.

Positive: esm support; no vulnerabilities; has provenance; high maintenance score.

Warnings: low downloads; no types; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.3.18 |
| Published | 2026-04-01 |
| First published | 2020-11-18 |
| Weekly downloads | 0 |
| License | LGPL-2.1-or-later |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 2.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 5 |
| Maintainers | lazka, pbek, dbp-deploy |

## Links

- npm: https://www.npmjs.com/package/@dbp-toolkit/common
- Repository: https://github.com/digital-blueprint/toolkit
- Homepage: https://github.com/digital-blueprint/toolkit/tree/main/packages/common
- Issues: https://github.com/digital-blueprint/toolkit/issues
- npm.io page: https://npm.io/package/@dbp-toolkit/common

## Dependencies (5)

- [lit](https://npm.io/package/lit.md) ^3.0.0
- [i18next](https://npm.io/package/i18next.md) ^26.0.0
- [dialog-polyfill](https://npm.io/package/dialog-polyfill.md) ^0.5.6
- [@open-wc/dedupe-mixin](https://npm.io/package/@open-wc/dedupe-mixin.md) ^2.0.1
- [@open-wc/scoped-elements](https://npm.io/package/@open-wc/scoped-elements.md) ^3.0.5

## Recent versions

- 0.3.18 (latest) — 2026-04-01
- 0.3.17 — 2025-10-07
- 0.3.16 — 2025-09-19
- 0.3.15 — 2025-06-25
- 0.3.14 — 2025-04-16
- 0.3.13 — 2025-01-21
- 0.3.12 — 2025-01-09
- 0.3.11 — 2025-01-09
- 0.3.10 — 2024-12-06
- 0.3.9 — 2024-11-12
- 0.3.8 — 2024-11-12
- 0.3.7 — 2024-10-10
- 0.3.6 — 2024-06-12
- 0.3.5 — 2023-03-03
- 0.3.4 — 2022-07-12
- … 23 more at https://npm.io/package/@dbp-toolkit/common/versions

## README

## Common Code

You can install these components via npm:

```bash
npm i @dbp-toolkit/common
```

### How to add a Webcomponent

First you need to import the class of the element you want to add, for example Button.

```js
Import {Button} from '@dbp-toolkit/common';
```

Then add the new element to scopedElements and give it a name

```js
static get scopedElements() { return { ... 'dbp-button': Button, ... } }
```

Finally, add it to the render() function inside return html.

```html
<dbp-button>...</dbp-button>
```

### Translated Web Component

You can use this web component to show translated html.

```html
<script type="module" src="https://unpkg.com/@dbp-toolkit/common@0.2.8/dist/components.js"></script>
<dbp-translated subscribe="lang">
    <div slot="de">
        Dieser Text ist Deutsch und wird Englisch werden wenn man die Sprache auf Englisch stellt.
    </div>
    <div slot="en">
        This text is English and will be German if the language is changed to German.
    </div>
</dbp-translated>
```

### Overriding slots in nested web components

If slots are used in web components then it is best to derive your component class from
[DBPLitElement](https://github.com/digital-blueprint/toolkit/-/blob/main/packages/common/dbp-lit-element.js)
and subscribe to the attribute `html-overrides` everywhere you use it with `subscribe="html-overrides"`.

This way integrators who are using topics or activities are able to globally override these slots
in their root html.

Example of the part of an `index.html` file for overriding the `auth-info` text in all Nextcloud
file pickers of the signature topic:

```html
<dbp-signature html-overrides="global-override"></dbp-signature>

<template id="global-override">
    <template id="dbp-nextcloud-file-picker">
        <div slot="auth-info">
            <dbp-translated subscribe="lang">
                <div slot="de">
                    Deutscher Text mit
                    <a href="#ein-link">einem Link</a>
                </div>
                <div slot="en">
                    English text with
                    <a href="#a-link">a link</a>
                </div>
            </dbp-translated>
        </div>
    </template>
</template>
```

By using `html-overrides="global-override"` in the topic `dbp-signature` you are able to define
a template with `id="global-override"` that can hold one or more other templates for different components.

In our case we have a template `id="dbp-nextcloud-file-picker"`, because we want to override slots
in the component `dbp-nextcloud-file-picker` inside the signature topic.

You can define one or more slots in that template that should be overridden.

In our example we only want to override the slot `auth-info`, that holds additional text to add in
the Nextcloud file picker component.

We are using the `dbp-translated` component to insert translated text at the specified position
in the Nextcloud file picker.

#### CSS Rules

The css rules are added to the styles() function in the json file corresponding to a particular activity.

```js
static get styles() {
        return [
            commonStyles.getThemeCSS(),
            css`
                .hidden { display: none; }
                button-style { --dbp-override-secondary-surface: #3793A5; }
            `
        ];
    }
```

### Icon Web Component

See [README.icon.md](./README.icon.md)

### Select Web Component

See [README.input.md](./README.input.md)

### Modal Web Component

See [README.modal.md](./README.modal.md)

---
_Source: https://npm.io/package/@dbp-toolkit/common · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._