@lion/ui 0.24.0 → 0.26.0

package/docs/components/accordion/reference.md

@@ -1,59 +0,0 @@
----
-title: 'Reference'
-parts:
-  - Accordion
-  - Reference
-eleventyNavigation:
-  key: 'Accordion: Reference'
-  order: 30
-  parent: Accordion
-  title: Reference
----
-
-# Reference
-
-<p class="lion-paragraph--emphasis">Everything you need to re-use the accordion.</p>
-
-## Requirements
-
-This component fulfils the following requirements:
-
-1. An Accordion lets you toggle the visibility of content for a specific section
-2. An Accordion contains a visual indicator/icon as an affordance to toggle the visibility of the content
-3. Every section consists of a section title (always visible) and section content (visible when expanded)
-4. The individual sections (title + content) are clearly grouped
-5. Multiple sections can be expanded at the same time
-6. The section heading (title + visual indicator) is used as the interaction trigger
-7. An Accordion does not reposition the page when content drops out of the viewport when expanding a section (no auto scrolling)
-
-## Rationale
-
-### Contents are not focusable
-
-Focusable elements should be interactive. Contents themselves do not offer any interactivity.
-If there is a button or a form inside the tab panel then these elements get focused directly.
-
-## Keyboard interactions
-
-| <kbd>Key</kbd>               | Action                                                                                                                                                                                                                |
-| :--------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| <kbd>Enter or Spacebar</kbd> | When focus is on the accordion header for a collapsed panel, expands the associated panel. When focus is on the accordion header for an expanded panel, collapses the panel if the implementation supports collapsing |
-| <kbd>Tab</kbd>               | Moves focus to the next focusable element; all focusable elements in the accordion are included in the page Tab sequence.                                                                                             |
-| <kbd>Shift+Tab</kbd>         | Moves focus to the previous focusable element; all focusable elements in the accordion are included in the page Tab sequence.                                                                                         |
-| <kbd>Down arrow </kbd>       | If focus is on an accordion header, moves focus to the next accordion header. If focus is on the last accordion header, either does nothing or moves focus to the first accordion header.                             |
-| <kbd>Up arrow</kbd>          | If focus is on an accordion header, moves focus to the previous accordion header. If focus is on the first accordion header, either does nothing or moves focus to the last accordion header.                         |
-| <kbd>Home</kbd>              | When focus is on an accordion header, moves focus to the first accordion header.                                                                                                                                      |
-| <kbd>End</kbd>               | When focus is on an accordion header, moves focus to the last accordion header.                                                                                                                                       |
-
-## WAI-ARIA roles
-
-- The title of each accordion header is contained in an element with role button.
-- Each accordion header button is wrapped in an element with role heading that has a value set for aria-level that is appropriate for the information architecture of the page.
-  - If the native host language has an element with an implicit heading and aria-level, such as an HTML heading tag, a native host language element may be used.
-  - The button element is the only element inside the heading element. That is, if there are other visually persistent elements, they are not included inside the heading element.
-- If the accordion panel associated with an accordion header is visible, the header button element has aria-expanded set to true. If the panel is not visible, aria-expanded is set to false.
-- The accordion header button element has aria-controls set to the ID element containing the accordion panel content.
-- If the accordion panel associated with an accordion header is visible, and if the accordion does not permit the panel to be collapsed, the header button element has aria-disabled set to true.
-- Optionally, each element that serves as a container for panel content has role region and aria-labelledby with a value that refers to the button that controls display of the panel.
-  - Avoid using the region role in circumstances that create landmark region proliferation, e.g. in an accordion that contains more than approximately 6 panels that can be expanded at the same time.
-  - Role region is especially helpful to the perception of structure by screen reader users when panels contain heading elements or a nested accordion.

package/docs/components/accordion/use-cases.md

@@ -1,303 +0,0 @@
----
-title: 'Use Cases'
-parts:
-  - Accordion
-  - Use Cases
-eleventyNavigation:
-  key: 'Accordion: Use Cases'
-  order: 20
-  parent: Accordion
-  title: Use Cases
----
-
-# Use Cases
-
-```js script
-import { html as previewHtml } from '@mdjs/mdjs-preview';
-
-import '@lion/ui/define/lion-accordion.js';
-```
-
-## Default Accordion collapsed
-
-All accordion panels are collapsed by default.
-
-```html preview-story
-<lion-accordion>
-  <h3 slot="invoker">
-    <button>Sensory Factors</button>
-  </h3>
-  <div slot="content">
-    <p>
-      The taste of oranges is determined mainly by the relative ratios of sugars and acids, whereas
-      orange aroma derives from volatile organic compounds, including alcohols, aldehydes, ketones,
-      terpenes, and esters. Bitter limonoid compounds, such as limonin, decrease gradually during
-      development, whereas volatile aroma compounds tend to peak in mid– to late–season development.
-      Taste quality tends to improve later in harvests when there is a higher sugar/acid ratio with
-      less bitterness. As a citrus fruit, the orange is acidic, with pH levels ranging from 2.9 to
-      4.0.
-    </p>
-
-    <p>
-      Sensory qualities vary according to genetic background, environmental conditions during
-      development, ripeness at harvest, postharvest conditions, and storage duration.
-    </p>
-  </div>
-  <h3 slot="invoker">
-    <button>Nutritional value</button>
-  </h3>
-  <div slot="content">
-    Orange flesh is 87% water, 12% carbohydrates, 1% protein, and contains negligible fat (table).
-    In a 100 gram reference amount, orange flesh provides 47 calories, and is a rich source of
-    vitamin C, providing 64% of the Daily Value. No other micronutrients are present in significant
-    amounts (table).
-  </div>
-</lion-accordion>
-```
-
-## Expanded
-
-Multiple accordion panels can be expanded at the same time. When content drops out of the viewport when expanding an accordion panel, the accordion does not reposition the page (no autoscrolling).
-
-```html preview-story
-<lion-accordion expanded="[1]">
-  <h3 slot="invoker">
-    <button>Sensory Factors</button>
-  </h3>
-  <div slot="content">
-    <p>
-      The taste of oranges is determined mainly by the relative ratios of sugars and acids, whereas
-      orange aroma derives from volatile organic compounds, including alcohols, aldehydes, ketones,
-      terpenes, and esters. Bitter limonoid compounds, such as limonin, decrease gradually during
-      development, whereas volatile aroma compounds tend to peak in mid– to late–season development.
-      Taste quality tends to improve later in harvests when there is a higher sugar/acid ratio with
-      less bitterness. As a citrus fruit, the orange is acidic, with pH levels ranging from 2.9 to
-      4.0.
-    </p>
-
-    <p>
-      Sensory qualities vary according to genetic background, environmental conditions during
-      development, ripeness at harvest, postharvest conditions, and storage duration.
-    </p>
-  </div>
-  <h3 slot="invoker">
-    <button>Nutritional value</button>
-  </h3>
-  <div slot="content">
-    Orange flesh is 87% water, 12% carbohydrates, 1% protein, and contains negligible fat (table).
-    In a 100 gram reference amount, orange flesh provides 47 calories, and is a rich source of
-    vitamin C, providing 64% of the Daily Value. No other micronutrients are present in significant
-    amounts (table).
-  </div>
-</lion-accordion>
-```
-
-## Slots Order
-
-The invoker and content slots are ordered by DOM order. This means you can put all invoker nodes at the top followed by all container nodes and it will still retain the correct order.
-
-```html preview-story
-<lion-accordion>
-  <h3 slot="invoker">
-    <button>Sensory Factors</button>
-  </h3>
-  <h3 slot="invoker">
-    <button>Nutritional value</button>
-  </h3>
-  <div slot="content">
-    <p>
-      The taste of oranges is determined mainly by the relative ratios of sugars and acids, whereas
-      orange aroma derives from volatile organic compounds, including alcohols, aldehydes, ketones,
-      terpenes, and esters. Bitter limonoid compounds, such as limonin, decrease gradually during
-      development, whereas volatile aroma compounds tend to peak in mid– to late–season development.
-      Taste quality tends to improve later in harvests when there is a higher sugar/acid ratio with
-      less bitterness. As a citrus fruit, the orange is acidic, with pH levels ranging from 2.9 to
-      4.0.
-    </p>
-
-    <p>
-      Sensory qualities vary according to genetic background, environmental conditions during
-      development, ripeness at harvest, postharvest conditions, and storage duration.
-    </p>
-  </div>
-  <div slot="content">
-    Orange flesh is 87% water, 12% carbohydrates, 1% protein, and contains negligible fat (table).
-    In a 100 gram reference amount, orange flesh provides 47 calories, and is a rich source of
-    vitamin C, providing 64% of the Daily Value. No other micronutrients are present in significant
-    amounts (table).
-  </div>
-</lion-accordion>
-```
-
-## Multiline header
-
-A header can be multiline.
-
-```html preview-story
-<lion-accordion>
-  <h3 slot="invoker">
-    <button>
-      Sensory Factors <br />
-      <small>or the experience of taste</small>
-    </button>
-  </h3>
-  <div slot="content">
-    <p>
-      The taste of oranges is determined mainly by the relative ratios of sugars and acids, whereas
-      orange aroma derives from volatile organic compounds, including alcohols, aldehydes, ketones,
-      terpenes, and esters. Bitter limonoid compounds, such as limonin, decrease gradually during
-      development, whereas volatile aroma compounds tend to peak in mid– to late–season development.
-      Taste quality tends to improve later in harvests when there is a higher sugar/acid ratio with
-      less bitterness. As a citrus fruit, the orange is acidic, with pH levels ranging from 2.9 to
-      4.0.
-    </p>
-
-    <p>
-      Sensory qualities vary according to genetic background, environmental conditions during
-      development, ripeness at harvest, postharvest conditions, and storage duration.
-    </p>
-  </div>
-  <h3 slot="invoker">
-    <button>
-      Nutritional value
-      <small>or the raw data</small>
-    </button>
-  </h3>
-  <div slot="content">
-    Orange flesh is 87% water, 12% carbohydrates, 1% protein, and contains negligible fat (table).
-    In a 100 gram reference amount, orange flesh provides 47 calories, and is a rich source of
-    vitamin C, providing 64% of the Daily Value. No other micronutrients are present in significant
-    amounts (table).
-  </div>
-</lion-accordion>
-```
-
-## Exclusive
-
-Sometimes, it might be required to show only one expanded slot of the accordion at a time. For such instances, we have a feature called 'exclusive'. This allows the accordion to open only one and a time and closes the open slot when a new slot is clicked upon.
-
-This field takes in a Boolean value, which by default is false.
-
-```html preview-story
-<lion-accordion exclusive>
-  <h3 slot="invoker">
-    <button>This collapsible closes all other ones</button>
-  </h3>
-  <div slot="content">
-    <p>
-      The taste of oranges is determined mainly by the relative ratios of sugars and acids, whereas
-      orange aroma derives from volatile organic compounds, including alcohols, aldehydes, ketones,
-      terpenes, and esters. Bitter limonoid compounds, such as limonin, decrease gradually during
-      development, whereas volatile aroma compounds tend to peak in mid– to late–season development.
-      Taste quality tends to improve later in harvests when there is a higher sugar/acid ratio with
-      less bitterness. As a citrus fruit, the orange is acidic, with pH levels ranging from 2.9 to
-      4.0.
-    </p>
-
-    <p>
-      Sensory qualities vary according to genetic background, environmental conditions during
-      development, ripeness at harvest, postharvest conditions, and storage duration.
-    </p>
-  </div>
-  <h3 slot="invoker">
-    <button>Same for this collapsible</button>
-  </h3>
-  <div slot="content">
-    Orange flesh is 87% water, 12% carbohydrates, 1% protein, and contains negligible fat (table).
-    In a 100 gram reference amount, orange flesh provides 47 calories, and is a rich source of
-    vitamin C, providing 64% of the Daily Value. No other micronutrients are present in significant
-    amounts (table).
-  </div>
-</lion-accordion>
-```
-
-## Distribute New Elements
-
-Below, we demonstrate how you could dynamically add a new invoker + content.
-
-One way is by creating the DOM elements and appending them as needed. For how this work feel tree to check out the `__handleAppendClick` function.
-Another way is by adding data to the Lit property that you loop over in your template. See `__handlePushClick` for an example.
-
-```js preview-story
-import { html, LitElement } from 'lit';
-
-export const distributeNewElement = () => {
-  class DemoDistribute extends LitElement {
-    static get properties() {
-      return {
-        __collection: { type: Array },
-      };
-    }
-    render() {
-      return html`
-        <h3>Append</h3>
-        <lion-accordion id="appendAccordion">
-          <h4 slot="invoker">
-            <button>header 1</button>
-          </h4>
-          <p slot="content">content 1</p>
-          <h4 slot="invoker">
-            <button>header 2</button>
-          </h4>
-          <p slot="content">content 2</p>
-        </lion-accordion>
-        <button @click="${this.__handleAppendClick}">Append dom elements</button>
-        <hr />
-        <h3>Push</h3>
-        <lion-accordion id="pushTabs">
-          <h4 slot="invoker">
-            <button>header 1</button>
-          </h4>
-          <p slot="content">content 1</p>
-          <h4 slot="invoker">
-            <button>header 2</button>
-          </h4>
-          <p slot="content">content 2</p>
-          ${this.__collection.map(
-            item => html`
-              <h4 slot="invoker"><button>${item.invoker}</button></h4>
-              <p slot="content">${item.content}</p>
-            `,
-          )}
-        </lion-accordion>
-        <button @click="${this.__handlePushClick}">Push to tabs collection</button>
-      `;
-    }
-    constructor() {
-      super();
-      this.__collection = [];
-    }
-    __handleAppendClick() {
-      const accordionElement = this.shadowRoot.querySelector('#appendAccordion');
-      const c = 2;
-      const n = Math.floor(accordionElement.children.length / 2);
-      for (let i = n + 1; i < n + c; i += 1) {
-        const invoker = document.createElement('h4');
-        const button = document.createElement('button');
-        button.innerText = `header ${i}`;
-        invoker.setAttribute('slot', 'invoker');
-        invoker.appendChild(button);
-        const content = document.createElement('p');
-        content.setAttribute('slot', 'content');
-        content.innerText = `content ${i}`;
-        accordionElement.append(invoker);
-        accordionElement.append(content);
-      }
-    }
-    __handlePushClick() {
-      const accordionElement = this.shadowRoot.querySelector('#pushTabs');
-      const i = Math.floor(accordionElement.children.length / 2) + 1;
-      this.__collection = [
-        ...this.__collection,
-        {
-          invoker: `header ${i}`,
-          content: `content ${i}`,
-        },
-      ];
-    }
-  }
-  customElements.define('demo-distribute', DemoDistribute);
-
-  return previewHtml`<demo-distribute></demo-distribute>`;
-};
-```

package/docs/components/button/api-table.md

@@ -1,84 +0,0 @@
----
-parts:
-  - API Table
-  - Button
-title: 'Button: API Table'
-eleventyNavigation:
-  key: API Table >> Button
-  title: API Table
-  order: 90
-  parent: Button
----
-# Button: API Table
- 
-
-## class: `LionButton`, `lion-button`
-
-### Fields
-
-| Name     | Privacy | Type      | Default    | Description | Inherited From |
-| -------- | ------- | --------- | ---------- | ----------- | -------------- |
-| `active` | public  | `boolean` | `false`    |             |                |
-| `type`   | public  | `string`  | `'button'` |             |                |
-
-### Attributes
-
-| Name     | Field  | Inherited From |
-| -------- | ------ | -------------- |
-| `active` | active |                |
-| `type`   | type   |                |
-
-<hr/>
- 
-
-## class: `LionButtonReset`, `lion-button-reset`
-
-### Fields
-
-| Name     | Privacy | Type      | Default   | Description | Inherited From |
-| -------- | ------- | --------- | --------- | ----------- | -------------- |
-| `active` | public  | `boolean` | `false`   |             | LionButton     |
-| `type`   | public  | `string`  | `'reset'` |             | LionButton     |
-
-### Methods
-
-| Name                                          | Privacy   | Description | Parameters | Return | Inherited From |
-| --------------------------------------------- | --------- | ----------- | ---------- | ------ | -------------- |
-| `_setupSubmitAndResetHelperOnConnected`       | protected |             |            |        |                |
-| `_teardownSubmitAndResetHelperOnDisconnected` | protected |             |            |        |                |
-
-### Attributes
-
-| Name     | Field  | Inherited From |
-| -------- | ------ | -------------- |
-| `active` | active | LionButton     |
-| `type`   | type   | LionButton     |
-
-<hr/>
- 
-
-## class: `LionButtonSubmit`, `lion-button-submit`
-
-### Fields
-
-| Name                | Privacy   | Type                      | Default    | Description | Inherited From |
-| ------------------- | --------- | ------------------------- | ---------- | ----------- | -------------- |
-| `active`            | public    | `boolean`                 | `false`    |             | LionButton     |
-| `type`              | public    | `string`                  | `'submit'` |             | LionButton     |
-| `_nativeButtonNode` | protected | `HTMLButtonElement\|null` |            |             |                |
-
-### Methods
-
-| Name                                          | Privacy   | Description | Parameters | Return | Inherited From  |
-| --------------------------------------------- | --------- | ----------- | ---------- | ------ | --------------- |
-| `_setupSubmitAndResetHelperOnConnected`       | protected |             |            |        | LionButtonReset |
-| `_teardownSubmitAndResetHelperOnDisconnected` | protected |             |            |        | LionButtonReset |
-
-### Attributes
-
-| Name     | Field  | Inherited From |
-| -------- | ------ | -------------- |
-| `active` | active | LionButton     |
-| `type`   | type   | LionButton     |
-
-<hr/>

package/docs/components/button/assets/bootstrap-button.js

@@ -1,245 +0,0 @@
-import { LionButton } from '@lion/ui/button.js';
-import { css } from 'lit';
-
-/**
- * @typedef {import('./BootstrapButtonTypes.js').BootstrapButtonVariant} BootstrapButtonVariant
- */
-
-export class BootstrapButton extends LionButton {
-  /** @type {any} */
-  static properties = {
-    variant: { type: String, reflect: true },
-  };
-
-  static styles = [
-    ...super.styles,
-    css`
-      :host {
-        --bs-border-radius: 0.375rem;
-        --bs-border-width: 1px;
-
-        --bs-btn-font-family:
-          system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans',
-          'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-          'Segoe UI Symbol', 'Noto Color Emoji';
-        margin: 0.25rem 0.125rem;
-
-        --bs-btn-padding-x: 0.75rem;
-        --bs-btn-padding-y: 0.375rem;
-        --bs-btn-font-size: 1rem;
-        --bs-btn-font-weight: 400;
-        --bs-btn-line-height: 1.5;
-        --bs-btn-color: var(--bs-body-color);
-        --bs-btn-bg: transparent;
-        --bs-btn-border-width: var(--bs-border-width);
-        --bs-btn-border-color: transparent;
-        --bs-btn-border-radius: var(--bs-border-radius);
-        --bs-btn-hover-border-color: transparent;
-        --bs-btn-box-shadow:
-          inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
-        --bs-btn-disabled-opacity: 0.65;
-        --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
-        display: inline-block;
-        padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
-        font-family: var(--bs-btn-font-family);
-        font-size: var(--bs-btn-font-size);
-        font-weight: var(--bs-btn-font-weight);
-        line-height: var(--bs-btn-line-height);
-        color: var(--bs-btn-color);
-        text-align: center;
-        text-decoration: none;
-        vertical-align: middle;
-        cursor: pointer;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        user-select: none;
-        border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
-        border-radius: var(--bs-btn-border-radius);
-        background-color: var(--bs-btn-bg);
-        transition:
-          color 0.15s ease-in-out,
-          background-color 0.15s ease-in-out,
-          border-color 0.15s ease-in-out,
-          box-shadow 0.15s ease-in-out;
-        text-transform: none;
-      }
-
-      :host(:not([disabled])) {
-        cursor: pointer;
-      }
-
-      :host(:hover) {
-        color: var(--bs-btn-hover-color);
-        background-color: var(--bs-btn-hover-bg);
-        border-color: var(--bs-btn-hover-border-color);
-      }
-
-      :host(:active),
-      :host([active]) {
-        color: var(--bs-btn-active-color);
-        background-color: var(--bs-btn-active-bg);
-        border-color: var(--bs-btn-active-border-color);
-      }
-
-      :host([variant='primary']) {
-        --bs-btn-color: #fff;
-        --bs-btn-bg: #0d6efd;
-        --bs-btn-border-color: #0d6efd;
-        --bs-btn-hover-color: #fff;
-        --bs-btn-hover-bg: #0b5ed7;
-        --bs-btn-hover-border-color: #0a58ca;
-        --bs-btn-focus-shadow-rgb: 49, 132, 253;
-        --bs-btn-active-color: #fff;
-        --bs-btn-active-bg: #0a58ca;
-        --bs-btn-active-border-color: #0a53be;
-        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-        --bs-btn-disabled-color: #fff;
-        --bs-btn-disabled-bg: #0d6efd;
-        --bs-btn-disabled-border-color: #0d6efd;
-      }
-
-      :host([variant='secondary']) {
-        --bs-btn-color: #fff;
-        --bs-btn-bg: #6c757d;
-        --bs-btn-border-color: #6c757d;
-        --bs-btn-hover-color: #fff;
-        --bs-btn-hover-bg: #5c636a;
-        --bs-btn-hover-border-color: #565e64;
-        --bs-btn-focus-shadow-rgb: 130, 138, 145;
-        --bs-btn-active-color: #fff;
-        --bs-btn-active-bg: #565e64;
-        --bs-btn-active-border-color: #51585e;
-        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-        --bs-btn-disabled-color: #fff;
-        --bs-btn-disabled-bg: #6c757d;
-        --bs-btn-disabled-border-color: #6c757d;
-      }
-
-      :host([variant='success']) {
-        --bs-btn-color: #fff;
-        --bs-btn-bg: #198754;
-        --bs-btn-border-color: #198754;
-        --bs-btn-hover-color: #fff;
-        --bs-btn-hover-bg: #157347;
-        --bs-btn-hover-border-color: #146c43;
-        --bs-btn-focus-shadow-rgb: 60, 153, 110;
-        --bs-btn-active-color: #fff;
-        --bs-btn-active-bg: #146c43;
-        --bs-btn-active-border-color: #13653f;
-        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-        --bs-btn-disabled-color: #fff;
-        --bs-btn-disabled-bg: #198754;
-        --bs-btn-disabled-border-color: #198754;
-      }
-
-      :host([variant='danger']) {
-        --bs-btn-color: #fff;
-        --bs-btn-bg: #dc3545;
-        --bs-btn-border-color: #dc3545;
-        --bs-btn-hover-color: #fff;
-        --bs-btn-hover-bg: #bb2d3b;
-        --bs-btn-hover-border-color: #b02a37;
-        --bs-btn-focus-shadow-rgb: 225, 83, 97;
-        --bs-btn-active-color: #fff;
-        --bs-btn-active-bg: #b02a37;
-        --bs-btn-active-border-color: #a52834;
-        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-        --bs-btn-disabled-color: #fff;
-        --bs-btn-disabled-bg: #dc3545;
-        --bs-btn-disabled-border-color: #dc3545;
-      }
-
-      :host([variant='warning']) {
-        --bs-btn-color: #000;
-        --bs-btn-bg: #ffc107;
-        --bs-btn-border-color: #ffc107;
-        --bs-btn-hover-color: #000;
-        --bs-btn-hover-bg: #ffca2c;
-        --bs-btn-hover-border-color: #ffc720;
-        --bs-btn-focus-shadow-rgb: 217, 164, 6;
-        --bs-btn-active-color: #000;
-        --bs-btn-active-bg: #ffcd39;
-        --bs-btn-active-border-color: #ffc720;
-        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-        --bs-btn-disabled-color: #000;
-        --bs-btn-disabled-bg: #ffc107;
-        --bs-btn-disabled-border-color: #ffc107;
-      }
-
-      :host([variant='info']) {
-        --bs-btn-color: #000;
-        --bs-btn-bg: #0dcaf0;
-        --bs-btn-border-color: #0dcaf0;
-        --bs-btn-hover-color: #000;
-        --bs-btn-hover-bg: #31d2f2;
-        --bs-btn-hover-border-color: #25cff2;
-        --bs-btn-focus-shadow-rgb: 11, 172, 204;
-        --bs-btn-active-color: #000;
-        --bs-btn-active-bg: #3dd5f3;
-        --bs-btn-active-border-color: #25cff2;
-        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-        --bs-btn-disabled-color: #000;
-        --bs-btn-disabled-bg: #0dcaf0;
-        --bs-btn-disabled-border-color: #0dcaf0;
-      }
-
-      :host([variant='light']) {
-        --bs-btn-color: #000;
-        --bs-btn-bg: #f8f9fa;
-        --bs-btn-border-color: #f8f9fa;
-        --bs-btn-hover-color: #000;
-        --bs-btn-hover-bg: #d3d4d5;
-        --bs-btn-hover-border-color: #c6c7c8;
-        --bs-btn-focus-shadow-rgb: 211, 212, 213;
-        --bs-btn-active-color: #000;
-        --bs-btn-active-bg: #c6c7c8;
-        --bs-btn-active-border-color: #babbbc;
-        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-        --bs-btn-disabled-color: #000;
-        --bs-btn-disabled-bg: #f8f9fa;
-        --bs-btn-disabled-border-color: #f8f9fa;
-      }
-
-      :host([variant='dark']) {
-        --bs-btn-color: #fff;
-        --bs-btn-bg: #212529;
-        --bs-btn-border-color: #212529;
-        --bs-btn-hover-color: #fff;
-        --bs-btn-hover-bg: #424649;
-        --bs-btn-hover-border-color: #373b3e;
-        --bs-btn-focus-shadow-rgb: 66, 70, 73;
-        --bs-btn-active-color: #fff;
-        --bs-btn-active-bg: #4d5154;
-        --bs-btn-active-border-color: #373b3e;
-        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-        --bs-btn-disabled-color: #fff;
-        --bs-btn-disabled-bg: #212529;
-        --bs-btn-disabled-border-color: #212529;
-      }
-
-      :host([variant='link']) {
-        --bs-btn-font-weight: 400;
-        --bs-btn-color: var(--bs-link-color);
-        --bs-btn-bg: transparent;
-        --bs-btn-border-color: transparent;
-        --bs-btn-hover-color: var(--bs-link-hover-color);
-        --bs-btn-hover-border-color: transparent;
-        --bs-btn-active-color: var(--bs-link-hover-color);
-        --bs-btn-active-border-color: transparent;
-        --bs-btn-disabled-color: #6c757d;
-        --bs-btn-disabled-border-color: transparent;
-        --bs-btn-box-shadow: 0 0 0 #000;
-        --bs-btn-focus-shadow-rgb: 49, 132, 253;
-        text-decoration: underline;
-      }
-    `,
-  ];
-
-  constructor() {
-    super();
-
-    /** @type {BootstrapButtonVariant} */
-    this.variant = 'primary';
-  }
-}
-customElements.define('bootstrap-button', BootstrapButton);