u2ui 1.0.0

package/el/accordion/README.md

@@ -0,0 +1,59 @@
+# <u2-accordion> - element
+rendering accordion
+
+## Features
+
+- Minimal
+- Use markup as usual
+- Navigateable through keys
+- Content is searchable (using `hidden=until-found`)
+
+## Usage
+
+```html
+<u2-accordion single>
+    <h4>Accordion</h4>
+    <article>
+        Content 1, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
+    </article>
+    <h4>Component</h4>
+    <article>
+        Content 2, lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.
+    </article>
+</u2-accordion>
+```
+
+```css
+u2-accordion {
+    &::part(trigger) {
+        background-color: #f0f0f0;
+    }
+    &::part(title) {
+        font-size: 1.2em;
+    }
+    &::part(icon) {
+        color: #f00;
+    }
+    &::part(content) {
+        background-color: #f8f8f8;
+    }
+}
+```
+
+## Install
+
+```html
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/accordion/accordion.min.css" rel=stylesheet>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/accordion/accordion.min.js" type=module async></script>
+```
+
+## Demos
+
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/accordion/tests/minimal.html)  
+[test.html](http://gcdn.li/u2ui/u2@main/el/accordion/tests/test.html)  
+
+## About
+
+- MIT License, Copyright (c) 2022 <u2> (like all repositories in this organization) <br>
+- Suggestions, ideas, finding bugs and making pull requests make us very happy. ♥
+

package/el/accordion/accordion.css

@@ -0,0 +1,7 @@
+/*
+there are no style-fallbacks for accordion, as without js, they should be headings and paragraphs
+*/
+
+u2-accordion:not(:defined) {
+    display:contents;
+}

package/el/accordion/accordion.js

@@ -0,0 +1,258 @@
+// See https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel
+
+const icoCssUrl = import.meta.resolve('../../el/ico/ico.css');
+
+
+customElements.define('u2-accordion', class extends HTMLElement {
+
+    constructor() {
+        super();
+
+        import('../ico/ico.js');
+
+        let shadowRoot = this.attachShadow({ mode: 'open', slotAssignment: 'manual' });
+        shadowRoot.innerHTML = `
+        <style>
+        @import url('${icoCssUrl}');
+        :host {
+            display:block;
+            --u2-ico-dir:'https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.11/svg/{icon_name}/baseline.svg';
+        }
+        :host(:active) {
+            xoutline:none !important;
+        }
+        #accordion {
+            display:flex;
+            flex-direction:column;
+            gap:0.5em;
+        }
+        .trigger {
+            display:flex;
+            align-items:baseline;
+            cursor:pointer;
+            padding-inline:1em;
+            padding-block:.5em;
+            background-color:#ddd;
+            background-color:var(--color-light);
+            & .icon {
+                margin-inline-start:auto;
+                display:flex;
+                transition:0.2s;
+
+                & > u2-ico {
+                    --size:1em;
+                }
+                [aria-expanded="true"] > & {
+                    transform:rotate(180deg);
+                }
+            }
+        }
+        .trigger:is(:focus,:active) {
+            xoutline:2px solid blue;
+            outline:--u2-focus-outline;
+        }
+        .title::slotted(*) {
+            margin:0 !important;
+            flex:1 1 auto;
+            font-size:1em;
+        }
+        .content {
+            display:block;
+            padding:1em;
+            background-color: #9999990a;
+
+            overflow:auto;
+            transition:.3s;
+            transition-behavior: allow-discrete;
+        }
+        .content[hidden="until-found"] {
+            content-visibility:visible;
+            xopacity:0;
+            overflow:hidden;
+            block-size:0;
+            max-block-size:0;
+            padding-block:0;
+        }
+        </style>
+        <div id=accordion role=presentation></div>
+        `;
+        this.items = this.shadowRoot.querySelector('#accordion').children;
+
+        this._onClick = this._onClick.bind(this);
+        this._onKeyDown = this._onKeyDown.bind(this);
+
+        this.mutationObserver = new MutationObserver(() => this._build());
+    }
+
+    connectedCallback() {
+        this._build();
+        this.shadowRoot.addEventListener('click', this._onClick);
+        this.shadowRoot.addEventListener('keydown', this._onKeyDown);
+        this.mutationObserver.observe(this, { childList: true });
+    }
+    disconnectedCallback() {
+        this.shadowRoot.removeEventListener('click', this._onClick);
+        this.shadowRoot.removeEventListener('keydown', this._onKeyDown);
+        this.mutationObserver.disconnect();
+    }
+
+    _build() {
+
+        const container = this.shadowRoot.querySelector('#accordion');
+        const icon = this.getAttribute('icon') || 'expand-more';
+
+        let hLevel = 6;
+        // get highest heading level
+        for (let node of this.children) {
+            if (!node.tagName.match(/^H[1-6]$/)) continue;
+            let level = parseInt(node.tagName[1]);
+            if (level < hLevel) hLevel = level;
+        }
+
+
+
+        let index = -1;
+        let activeContent = null;
+        let collectedContents = [];
+        for (let node of this.childNodes) {
+            if (node.tagName === 'H'+hLevel) {
+                activeContent && activeContent.assign(...collectedContents);
+                index++;
+                let panel = container.childNodes[index];
+                if (!panel) {
+                    panel = document.createElement('div');
+                    panel.innerHTML = `
+                        <span class=trigger id=title${index}   role=button part=trigger tabindex=0  aria-controls=content${index} aria-expanded=false>
+                            <slot class=title part=title></slot>
+                            <slot class=icon part=icon>
+                                <u2-ico icon=${icon}>▾</u2-ico>
+                            </slot>
+                        </span>
+                        <slot class=content id=content${index} role=region part=content hidden=until-found aria-hidden=true aria-labelledby=title${index}></slot>
+                    `;
+                    container.appendChild(panel);
+                }
+                const title = panel.querySelector('.title');
+                title.assign(node);
+                activeContent = panel.querySelector('.content');
+                collectedContents = [];
+            } else {
+                if (activeContent) collectedContents.push(node);
+            }
+        }
+        activeContent && activeContent.assign(...collectedContents);
+    }
+
+    // get selected() {
+    //     return this._selected;
+    // }
+
+    // set selected(index) {
+    //     this._selected = index;
+    //     this._selectTab(index);
+    //     this.setAttribute('selected', index);
+    // }
+    // _selectTab(idx = null) { // todo? merge into `set selected()`?
+    //     [...this.items].forEach((panel, i) => {
+    //         let select = i === idx;
+    //         let trigger = panel.querySelector('.trigger');
+    //         //trigger.setAttribute('tabindex', select ? 0 : -1);
+    //         trigger.setAttribute('aria-expanded', select);
+    //         let content = panel.querySelector('.content');
+    //         content.setAttribute('tabindex', select ? 0 : -1);
+    //         if (select) {
+    //             content.removeAttribute('hidden');
+    //         } else {
+    //             content.setAttribute('hidden', 'until-found');
+    //         }
+    //     });
+    // }
+
+
+    _getTargetTriggerFromEvent(event) {
+        const path = event.composedPath();
+        const rootIndex = path.indexOf(this.shadowRoot);
+        if (rootIndex === -1) return;
+        const target = path[rootIndex - 3];
+        if (!target?.classList.contains('trigger')) return;
+        return target;
+    }
+
+    _focusItem(index) {
+        this.items[index]?.querySelector('.trigger').focus();
+        if (this.getAttribute('single') !== null) {
+            this._toggleItem(index, true);
+        }
+    }
+    _toggleItem(index, expand){
+        const panel = this.items[index];
+        const trigger = panel.querySelector('.trigger');
+        const content = panel.querySelector('.content');
+        expand ??= trigger.getAttribute('aria-expanded') !== 'true';
+        trigger.setAttribute('aria-expanded', expand);
+        content.setAttribute('aria-hidden', !expand);
+        if (expand) {
+            content.removeAttribute('hidden');
+            trigger.scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest',
+                inline: 'center'
+            });
+            if (this.getAttribute('single') !== null) {
+                [...this.items].forEach((item, i) => { i !== index && this._toggleItem(i, false); });
+            }
+        } else {
+            content.setAttribute('hidden', 'until-found');
+        }
+    }
+
+    _onClick(e) {
+        if (e.ctrlKey || e.altKey || e.metaKey) return;
+        const trigger = this._getTargetTriggerFromEvent(e);
+        if (!trigger) return;
+        const panel = trigger.parentElement;
+        const index = [...panel.parentElement.children].indexOf(panel);
+        // beta, should not be here but in "_selectTab"?
+        // let event = new CustomEvent('u2-activate', { bubbles: true, cancelable: true });
+        // target.dispatchEvent(event);
+        // if (event.defaultPrevented) return;
+        this._toggleItem(index);
+        trigger.focus();
+    }
+    _onKeyDown(e) {
+        if (e.ctrlKey || e.altKey || e.metaKey) return;
+        const trigger = this._getTargetTriggerFromEvent(e);
+        if (!trigger) return;
+        const panel = trigger.parentElement;
+        const idx = [...panel.parentElement.children].indexOf(panel);
+
+        const actions = {
+            ArrowUp: (idx) => this._focusItem(idx - 1),
+            ArrowDown: (idx) => this._focusItem(idx + 1),
+            Home: () => this._focusItem(0),
+            End: () => this._focusItem(this.items.length - 1),
+            Enter: () => this._toggleItem(idx),
+            Space: () => this._toggleItem(idx),
+        };
+        if (actions[e.code]) {
+            e.preventDefault();
+            actions[e.code](idx);
+        }
+    }
+
+    // static observedAttributes = ['selected'];
+    // attributeChangedCallback(name, oldValue, newValue) {
+    //     if (oldValue === newValue) return;
+    //     if (name === 'selected') this.selected = parseInt(newValue);
+    // }
+
+});
+
+
+// // beta, does not work if initial u2-target is already fired
+// // problem: sometimes, on initial load, the event is fired before the listener is added
+// document.addEventListener('u2-target', e => {
+//     let accordion = document.querySelectorAll('u2-accordion > :target');
+//     for (let tab of accordion) tab.click();
+// });
+

package/el/accordion/manifest.json

@@ -0,0 +1,57 @@
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [
+        {
+            "kind": "javascript-module",
+            "path": "accordion.js",
+            "declarations": [
+                {
+                    "kind": "class",
+                    "description": "",
+                    "name": "accordion",
+                    "members": [
+                    ],
+                    "events": [
+                    ],
+                    "attributes": [
+                        {
+                            "name": "single",
+                            "description": "If true, only one panel can be open at a time and it will be opened by focus",
+                            "u2-type": "boolean"
+                        }
+                    ],
+                    "cssParts": [
+                        {
+                            "name": "trigger",
+                            "description": "The header of the panel"
+                        }, {
+                            "name": "title",
+                            "description": "The title inside the header of the panel"
+                        },{
+                            "name": "icon",
+                            "description": "The icon inside the header of the panel"
+                        },{
+                            "name": "content",
+                            "description": "The content of the panel"
+                        }
+
+                    ],
+                    "superclass": { "name": "HTMLElement" },
+                    "tagName": "u2-accordion",
+                    "customElement": true
+                }
+            ],
+            "exports": [
+                {
+                    "kind": "custom-element-definition",
+                    "name": "u2-accordion",
+                    "declaration": {
+                        "name": "accordion",
+                        "module": "accordion.js"
+                    }
+                }
+            ]
+        }
+    ]
+}

package/el/accordion/tests/minimal.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang=en>
+<head>
+    <meta charset=utf-8>
+    <meta name=viewport content="width=device-width">
+
+    <link href="../../../css/classless/full.css" rel=stylesheet>
+    <link href="../../../css/classless/simple.css" rel=stylesheet>
+    <link href="../../../attr/skin/skin.css" rel=stylesheet>
+
+    <link rel=stylesheet href="../accordion.css">
+    <script src="../accordion.js" type=module async></script>
+
+<body>
+
+    <section class=main>
+        <u2-accordion single>
+            <h4>Accordion</h4>
+            <article>
+                Content 1, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
+            </article>
+            <h4>Component</h4>
+            <article>
+                Content 2, lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.
+            </article>
+        </u2-accordion>
+    </section>
+
+    <style class=main>
+    u2-accordion {
+        &::part(trigger) {
+            background-color: #f0f0f0;
+        }
+        &::part(title) {
+            font-size: 1.2em;
+        }
+        &::part(icon) {
+            color: #f00;
+        }
+        &::part(content) {
+            background-color: #f8f8f8;
+        }
+    }
+    </style>

package/el/accordion/tests/test.html

@@ -0,0 +1,168 @@
+<!DOCTYPE HTML>
+<html lang=en>
+<head>
+    <meta charset="utf-8">
+    <meta name=viewport content="width=device-width">
+
+    <link rel=stylesheet href="../../../css/classless/full.css">
+    <!--link rel=stylesheet href="../../../css/classless/aria.css"-->
+    <link rel=stylesheet href="../../../css/classless/simple.css">
+
+
+    <link rel=stylesheet href="../accordion.css">
+    <script src="../accordion.js" type=module async></script>
+
+    <script type=module async src=../../../attr/navigable/navigable.js crossorigin></script>
+
+</head>
+
+<body>
+
+    <header>
+        <h1>u2-accordion tests</h1>
+        As you use the browsers search funktion, you find the contents of the tab-panels. (chrome for now)
+    </header>
+
+    <section>
+        <h2>Simple</h2>
+        <u2-accordion>
+            Content bevore first heading
+            <h2>H2 as Tab</h2>
+            Heading Elements (h1-h6) are automatically used as accordion
+            <h3>H3 creates no new Panel, its always the highest heading level</h3>
+            <p>A Paragraph</p>
+            <h2>H2 as Tab</h2>
+            Heading Elements (h1-h6) are automatically used as accordion
+            <h2>Title 3, its a very long title to test the wrapping of the title text</h2>
+            content panel 3 <span>test</span>
+            <p>A Paragraph</p>
+        </u2-accordion>
+    </section>
+
+    <section>
+        <h2>Tablist browser-navigable accordion (beta)</h2>
+        <u2-accordion>
+            <h2 u2-navigable id="nav1">H2 as Tab</h2>
+            Heading Elements (h1-h6) are automatically used as accordion
+            If you like to use other Elements as accordion, you have to add the attribute <code>slot="title"</code
+            <h2 u2-navigable id="nav3">Title 3</h2>
+            content panel 3
+        </u2-accordion>
+    </section>
+
+    <section>
+        <h2>Nested</h2>
+        <u2-accordion>
+            <h2>Title 1</h2>
+
+                <u2-accordion>
+                    <h3>Item 1.1</h3>
+                    Item 1 content
+                    <h3>Item 1.2</h3>
+                    Item 2 content
+                    <h3>Item 1.3</h3>
+                    Item 3 content
+                    <h3>Item 1.4</h3>
+                    Item 1 content
+                </u2-accordion>
+
+            <h2>Title 2</h2>
+            content panel 2
+        </u2-accordion>
+    </section>
+
+    <section>
+        <h2>Single</h2>
+        <u2-accordion single>
+            <h2>Title 1</h2>
+            content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>
+            content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>
+            <h2>Title 2</h2>
+            content panel 2
+            <h2>Title 3</h2>
+            content panel 3
+            <h2>Title</h2>
+            content panel 1
+        </u2-accordion>
+    </section>
+
+
+    <section>
+        <h2>Compare with details</h2>
+        <details name="details1">
+            <summary>Details 1</summary>
+            <div>
+                <details name="details2">
+                    <summary>Details 1.1</summary>
+                    <p>Details 1.1 content</p>
+                </details>
+                <details name="details2">
+                    <summary>Details 1.1</summary>
+                    <p>Details 1.1 content</p>
+                </details>
+            </div>
+        </details>
+        <details name="details1">
+            <summary>Details 2</summary>
+            Details 2 content
+        </details>
+    </section>
+
+    <style>
+        #styled u2-accordion {
+            border-radius: .5rem;
+            padding:.5rem;
+            border:1px solid;
+            box-shadow:var(--shadow);
+            background:#fff;    
+        }
+        #styled u2-accordion::part(title) {
+            background:var(--color);
+            border-radius: .3rem;
+            color: white;
+        }
+        #styled u2-accordion::part(panels) {
+            background:#eee8;
+        }
+        #styled u2-accordion [role="tab"] {
+            padding:.5rem 1rem;
+        }
+        #styled u2-accordion [role="tab"][aria-selected="true"] {
+            border-bottom-color: transparent;
+            background:#0003;
+        }
+        #styled u2-accordion [role="tab"]:focus {
+            border-bottom-color: transparent;
+            background:#0005;
+        }
+        #styled [role=tabpanel] {
+            transition:.6s;
+        }
+    </style>
+
+    <section id=styled>
+        <h2>Nested, styled</h2>
+        <u2-accordion>
+            <h2>Title 1</h2>
+
+                <div>
+                    <u2-accordion>
+                        <h3>Item 1.1</h3>
+                        <section>Item 1 content</section>
+                        <h3>Item 1.2</h3>
+                        <section>Item 2 content</section>
+                        <h3>Item 1.3</h3>
+                        <section>Item 3 content</section>
+                        <h3>Item 1.4</h3>
+                        <section>Item 1 content</section>
+                    </u2-accordion>
+                </div>
+
+            <h2>Title 2</h2>
+            <section>content panel 2</section>
+            <h2>Title 3</h2>
+            <section>content panel 3</section>
+            <h2>Title</h2>
+            <section>content panel 1</section>
+        </u2-accordion>
+    </section>

package/el/alert/README.md

@@ -0,0 +1,67 @@
+# <u2-alert> - element
+Prominent hints, alerts, and facts
+
+## Features
+
+- Various variants for Success, Warn, Error, and Info alerts.
+- Dismissable alerts allow user to close them.
+- Support for icons within alerts.
+- Customizable actions through buttons in the alert.
+
+## Usage
+
+```html
+<u2-alert open variant="" dismissable icon="bug_report">
+    This is a dismissable alert with an custom icon.
+    <button slot=action>OK</button>
+</u2-alert>
+```
+
+```css
+u2-alert {
+    border-width: 0 0 0 3px;
+}
+u2-alert::part(close) {
+    opacity:0.3;
+}
+u2-alert::part(icon) {
+    font-size:2em;
+}
+```
+
+## API
+
+### Attributes
+
+- `variant`: Determines the type of the alert (success, warn, error, info).
+- `dismissable`: Allows the alert to be closed by the user.
+- `icon`: Adds an icon to the alert, if not set, the icon will be determined by the variant.
+- `open`: Determines if the alert is visible or not.
+
+### Slots
+
+- `action`: Buttons that will be placed at the bottom of the alert.
+
+### CSS
+
+--color: The color of the alert, if not set, it will be determined by the variant.
+::part(close): The close button.
+::part(icon): The icon.
+
+## Install
+
+```html
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/alert/alert.min.css" rel=stylesheet>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/alert/alert.min.js" type=module async></script>
+```
+
+## Demos
+
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/alert/tests/minimal.html)  
+[test.html](http://gcdn.li/u2ui/u2@main/el/alert/tests/test.html)  
+
+## About
+
+- MIT License, Copyright (c) 2022 <u2> (like all repositories in this organization) <br>
+- Suggestions, ideas, finding bugs and making pull requests make us very happy. ♥
+