@vollowx/seele 0.13.8 → 0.13.9

package/README.md

@@ -33,13 +33,12 @@ What's the differences comparing to other projects?
 
 ## Getting started
 
-Check out [Overview](./docs/00-Overview.md).
+Check out [Installation](https://tideover.cc/seele/docs/#installation).
 
 ## Documentations
 
-- [Documentations](./docs/00-Overview.md) (Markdown)
-  - [lucaz.srht.site](https://lucaz.srht.site/) (components rendered)
-- Previous [documentations and demos](https://tideover.cc/seele/docs/), being replaced
+- [Documentations](https://tideover.cc/seele/docs/), ([source](./docs/00-Overview.md))
+- [Backup site](https://lucaz.srht.site/)
 
 ## Download
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vollowx/seele",
-  "version": "0.13.8",
+  "version": "0.13.9",
   "description": "A extensible Web Components library, with Material Design 3 components pre-provided.",
   "author": "vollowx",
   "license": "Apache-2.0",
@@ -20,7 +20,7 @@
   "files": [
     "src/**/*.js",
     "src/**/*.d.ts",
-    "src/m3/system/*.css",
+    "src/m3/styles/*.css",
     "custom-elements.json",
     "LICENSE",
     "README.md"

package/src/all.d.ts

@@ -17,6 +17,8 @@ import './m3/list/list-item.js';
 import './m3/loading-indicator/loading-indicator.js';
 import './m3/menu/menu.js';
 import './m3/menu/menu-item.js';
+import './m3/nagivation/navigation-rail.js';
+import './m3/nagivation/navigation-rail-item.js';
 import './m3/radio/radio.js';
 import './m3/ripple/ripple.js';
 import './m3/select/filled-select.js';
@@ -26,6 +28,7 @@ import './m3/slider/slider.js';
 import './m3/switch/switch.js';
 import './m3/tab/tabs.js';
 import './m3/tab/tab.js';
+import './m3/tab/secondary-tab.js';
 import './m3/tab/tab-panel.js';
 import './m3/text-field/filled-text-field.js';
 import './m3/text-field/outlined-text-field.js';

package/src/all.js

@@ -17,6 +17,8 @@ import './m3/list/list-item.js';
 import './m3/loading-indicator/loading-indicator.js';
 import './m3/menu/menu.js';
 import './m3/menu/menu-item.js';
+import './m3/nagivation/navigation-rail.js';
+import './m3/nagivation/navigation-rail-item.js';
 import './m3/radio/radio.js';
 import './m3/ripple/ripple.js';
 import './m3/select/filled-select.js';
@@ -26,6 +28,7 @@ import './m3/slider/slider.js';
 import './m3/switch/switch.js';
 import './m3/tab/tabs.js';
 import './m3/tab/tab.js';
+import './m3/tab/secondary-tab.js';
 import './m3/tab/tab-panel.js';
 import './m3/text-field/filled-text-field.js';
 import './m3/text-field/outlined-text-field.js';

package/src/base/autocomplete.js

@@ -56,19 +56,19 @@ export class Autocomplete extends Base {
     }
     // TODO: handle multiple calls on this function, currently double-call
     //       disallowed
-    handleInputSlotChange() {
-        ensureReady(this.$input).then((input) => {
-            const $realInput = input.$inputOrTextarea;
-            $realInput.role = 'combobox';
-            $realInput.ariaExpanded = String(this.open);
-            $realInput.ariaHasPopup = 'listbox';
-            $realInput.ariaAutoComplete = this.mode;
-            $realInput.ariaControlsElements = [this.$menu];
-            input.addEventListener('input', this.handleInput.bind(this));
-            input.addEventListener('keydown', this.handleInputKeydown.bind(this));
-            input.addEventListener('click', () => (this.open = !this.open));
-            this.$menu.attach($realInput);
-        });
+    async handleInputSlotChange() {
+        await ensureReady(this.$input);
+        const input = this.$input;
+        const $realInput = input.$inputOrTextarea;
+        $realInput.role = 'combobox';
+        $realInput.ariaExpanded = String(this.open);
+        $realInput.ariaHasPopup = 'listbox';
+        $realInput.ariaAutoComplete = this.mode;
+        $realInput.ariaControlsElements = [this.$menu];
+        input.addEventListener('input', this.handleInput.bind(this));
+        input.addEventListener('keydown', this.handleInputKeydown.bind(this));
+        input.addEventListener('click', () => (this.open = !this.open));
+        this.$menu.attach($realInput);
     }
     handleItemsSlotChange() {
         // Initial filter based on current input value (if any)

package/src/base/button.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-export declare const updateInternals: unique symbol;
+import { updateInternals } from './mixins/internals-attached.js';
 declare const Base: Constructor<import("./mixins/form-associated.js").FormAssociatedInterface> & Constructor<import("./mixins/internals-attached.js").InternalsAttachedInterface> & typeof LitElement;
 export declare class Button extends Base {
     #private;

package/src/base/button.js

@@ -1,10 +1,9 @@
 import { __decorate } from "tslib";
 import { LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
-import { InternalsAttached, internals } from './mixins/internals-attached.js';
+import { InternalsAttached, internals, updateInternals, } from './mixins/internals-attached.js';
 import { FormAssociated } from './mixins/form-associated.js';
 import { hiddenStyles } from './hidden-styles.css.js';
-export const updateInternals = Symbol('updateInternals');
 const Base = FormAssociated(InternalsAttached(LitElement));
 export class Button extends Base {
     static { this.styles = [hiddenStyles]; }

package/src/base/experimental/popup.d.ts

@@ -11,6 +11,7 @@
  */
 import { LitElement, PropertyValues } from 'lit';
 import { Placement, Strategy } from '@floating-ui/dom';
+import { autoAttachToParent, handleControlChange } from '../mixins/attachable.js';
 export declare function lookForTabbable(root: Node): HTMLElement | null;
 declare const Popup_base: Constructor<import("../mixins/attachable.js").AttachableInterface> & Constructor<import("../mixins/internals-attached.js").InternalsAttachedInterface> & typeof LitElement;
 export declare class Popup extends Popup_base {
@@ -27,7 +28,8 @@ export declare class Popup extends Popup_base {
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(changedProperties: PropertyValues<this>): void;
-    handleControlChange(prev: HTMLElement | null, next: HTMLElement | null): void;
+    [autoAttachToParent]: boolean;
+    [handleControlChange](prev: HTMLElement | null, next: HTMLElement | null): void;
     toggle(): Promise<void>;
     show(): Promise<void>;
     hide(): Promise<void>;

package/src/base/experimental/popup.js

@@ -9,12 +9,13 @@
  *
  * Design: TO BE ADDED
  */
+var _a;
 import { __decorate } from "tslib";
 import { LitElement, html, isServer } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { autoUpdate, computePosition, arrow, flip, offset, shift, } from '@floating-ui/dom';
 import { InternalsAttached } from '../mixins/internals-attached.js';
-import { Attachable } from '../mixins/attachable.js';
+import { Attachable, autoAttachToParent, handleControlChange, } from '../mixins/attachable.js';
 import { transformOriginFromArrow } from '../controllers/popover-controller.js';
 import { popupStyles } from './popup-styles.css.js';
 // Returns the first tabbable element within an eleent
@@ -75,6 +76,7 @@ let Popup = class Popup extends Attachable(InternalsAttached(LitElement)) {
         this.strategy = 'absolute';
         this.offset = 0;
         this.windowPadding = 8;
+        this[_a] = false;
         this.#onRequestHide = () => {
             this.hide();
         };
@@ -142,7 +144,7 @@ let Popup = class Popup extends Attachable(InternalsAttached(LitElement)) {
             this.#syncTriggerAria();
         }
     }
-    handleControlChange(prev, next) {
+    [(_a = autoAttachToParent, handleControlChange)](prev, next) {
         if (prev) {
             prev.removeEventListener('click', this.#onTriggerClick);
             prev.removeEventListener('focusout', this.#onFocusOut);

package/src/base/mixins/attachable.d.ts

@@ -1,9 +1,12 @@
 import { LitElement } from 'lit';
+export declare const autoAttachToParent: unique symbol;
+export declare const handleControlChange: unique symbol;
 export declare class AttachableInterface {
-    $control: HTMLElement;
+    $control: HTMLElement | null;
     htmlFor: string | null;
     attach(control: HTMLElement, force?: boolean): void;
     detach(): void;
-    handleControlChange(prev: HTMLElement | null, next: HTMLElement | null): void;
+    [autoAttachToParent]: boolean;
+    [handleControlChange](prev: HTMLElement | null, next: HTMLElement | null): void;
 }
 export declare const Attachable: <T extends Constructor<LitElement>>(superClass: T) => Constructor<AttachableInterface> & T;

package/src/base/mixins/attachable.js

@@ -1,18 +1,23 @@
 import { __decorate } from "tslib";
 import { property } from 'lit/decorators.js';
+export const autoAttachToParent = Symbol('autoAttachToParent');
+export const handleControlChange = Symbol('handleControlChange');
 export const Attachable = (superClass) => {
+    var _a;
     class AttachableElement extends superClass {
         constructor() {
             super(...arguments);
-            this.currentControl = null;
-        }
-        connectedCallback() {
-            super.connectedCallback();
-            this.setCurrentControl(this.$control);
-        }
-        disconnectedCallback() {
-            this.setCurrentControl(null);
-            super.disconnectedCallback();
+            /**
+             * The control element currently attached to
+             */
+            this.#$control = null;
+            /**
+             * Whether `parentNode` is a candidate of `$control`.
+             *
+             * When false, only `id` is considered without manually setting `$control`
+             * or `attach()`
+             */
+            this[_a] = true;
         }
         /**
          * If has `for` attribute, use it to find the control element.
@@ -23,9 +28,19 @@ export const Attachable = (superClass) => {
                 if (!this.htmlFor || !this.isConnected) {
                     return null;
                 }
-                return this.getRootNode().querySelector(`#${this.htmlFor}`);
+                const root = this.getRootNode();
+                if (!root || !('querySelector' in root)) {
+                    return null;
+                }
+                return root.querySelector(`#${CSS.escape(this.htmlFor)}`);
+            }
+            if (this.#$control) {
+                return this.#$control;
+            }
+            if (!this[autoAttachToParent]) {
+                return null;
             }
-            return this.currentControl || this.parentNode instanceof ShadowRoot
+            return this.parentNode instanceof ShadowRoot
                 ? this.parentNode.host
                 : this.parentElement;
         }
@@ -37,32 +52,57 @@ export const Attachable = (superClass) => {
                 this.detach();
             }
         }
+        connectedCallback() {
+            super.connectedCallback();
+            this.#setControl(this.$control);
+        }
+        disconnectedCallback() {
+            this.#setControl(null);
+            super.disconnectedCallback();
+        }
+        firstUpdated(changed) {
+            super.firstUpdated(changed);
+            // When the control element is placed after `this` and wasn't parsed yet
+            // at `connectedCallback`.
+            if (!this.#$control && this.htmlFor) {
+                this.#setControl(this.$control);
+            }
+        }
         updated(changed) {
             super.updated(changed);
             if (changed.has('htmlFor')) {
                 // Will be triggered when first render using `for` attribute, will be
-                // prevented in setCurrentControl since it's unnecessary.
-                this.setCurrentControl(this.$control);
+                // prevented in #setControl since it's unnecessary.
+                this.#setControl(this.$control);
             }
         }
-        setCurrentControl(control, force = false) {
-            if (control === this.currentControl && !force)
-                return;
-            this.handleControlChange(this.currentControl, control);
-            this.currentControl = control;
-        }
         attach(control, force = false) {
-            this.setCurrentControl(control, force);
+            this.#setControl(control, force);
             this.removeAttribute('for');
         }
         detach() {
-            this.setCurrentControl(null);
-            this.setAttribute('for', '');
+            this.#setControl(null);
+            this.removeAttribute('for');
+            this[autoAttachToParent] = false;
+            // That is to prevent attaching automatically on a `$control` access.
+            // (yet, I don't even know who would call `detach()`) :/
+        }
+        /**
+         * The control element currently attached to
+         */
+        #$control;
+        #setControl(control, force = false) {
+            if (control === this.#$control && !force)
+                return;
+            this[handleControlChange](this.#$control, control);
+            this.#$control = control;
         }
         /**
          * Handles the first attaching and actual control element changing
          */
-        handleControlChange(prev = null, next = null) { }
+        [(_a = autoAttachToParent, handleControlChange)](_prev = null, _next = null) {
+            console.warn('[seele] You should implement [onControlChange] on any class that mixes Attachable');
+        }
     }
     __decorate([
         property({ attribute: 'for', type: String })

package/src/base/mixins/button-toggle-mixin.js

@@ -1,7 +1,6 @@
 import { __decorate } from "tslib";
 import { property } from 'lit/decorators.js';
-import { internals, replaceStates } from './internals-attached.js';
-import { updateInternals } from '../button.js';
+import { internals, updateInternals, replaceStates, } from './internals-attached.js';
 const PROPERTY_FROM_ARIA_PRESSED = {
     true: 'checked',
     false: 'unchecked',

package/src/base/mixins/internals-attached.d.ts

@@ -1,8 +1,10 @@
 import { LitElement } from 'lit';
 export declare const internals: unique symbol;
+export declare const updateInternals: unique symbol;
 export declare const replaceStates: unique symbol;
 export declare class InternalsAttachedInterface {
     [internals]: ElementInternals;
+    [updateInternals]?(): void;
     [replaceStates](del: Array<string>, add: Array<string>): void;
 }
 export declare const InternalsAttached: <T extends Constructor<LitElement>>(superClass: T) => Constructor<InternalsAttachedInterface> & T;

package/src/base/mixins/internals-attached.js

@@ -1,5 +1,6 @@
 export const internals = Symbol('internals');
 const privateInternals = Symbol('privateInternals');
+export const updateInternals = Symbol('updateInternals');
 export const replaceStates = Symbol('replaceStates');
 export const InternalsAttached = (superClass) => {
     class InternalsAttachedElement extends superClass {

package/src/base/radio.d.ts

@@ -1,4 +1,5 @@
 import { LitElement, PropertyValues } from 'lit';
+import { updateInternals } from './mixins/internals-attached.js';
 declare const Radio_base: Constructor<import("./mixins/form-associated.js").FormAssociatedInterface> & Constructor<import("./mixins/internals-attached.js").InternalsAttachedInterface> & typeof LitElement;
 export declare class Radio extends Radio_base {
     #private;
@@ -8,6 +9,8 @@ export declare class Radio extends Radio_base {
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(changedProperties: PropertyValues<this>): void;
+    [updateInternals](): void;
     formResetCallback(): void;
+    formStateRestoreCallback(state: string | null): void;
 }
 export {};

package/src/base/radio.js

@@ -3,7 +3,7 @@ import { __decorate } from "tslib";
 import { LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { FormAssociated } from './mixins/form-associated.js';
-import { InternalsAttached, internals } from './mixins/internals-attached.js';
+import { InternalsAttached, internals, replaceStates, updateInternals, } from './mixins/internals-attached.js';
 export class Radio extends FormAssociated(InternalsAttached(LitElement)) {
     // Static hidden registry: Scope (Form or RootNode) -> Name -> Set<Radio>
     static #registry = new Map();
@@ -19,7 +19,7 @@ export class Radio extends FormAssociated(InternalsAttached(LitElement)) {
     connectedCallback() {
         super.connectedCallback();
         this.#registerToGroup();
-        this.#updateAriaState();
+        this[updateInternals]();
         this.addEventListener('click', this.#handleClick);
         this.addEventListener('keydown', this.#handleKeyDown);
     }
@@ -41,16 +41,16 @@ export class Radio extends FormAssociated(InternalsAttached(LitElement)) {
             }
             this[internals].setFormValue(this.checked ? this.value : null);
             this.#updateGroupTabIndices();
-            this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
         }
         if (changedProperties.has('disabled') || changedProperties.has('checked'))
-            this.#updateAriaState();
+            this[updateInternals]();
     }
     #handleClick() {
         if (this.disabled || this.checked)
             return;
         this.checked = true;
         this.focus();
+        this.#dispatchEvents();
     }
     #handleKeyDown(event) {
         if (this.disabled)
@@ -58,8 +58,10 @@ export class Radio extends FormAssociated(InternalsAttached(LitElement)) {
         switch (event.key) {
             case ' ':
                 event.preventDefault();
-                if (!this.checked)
+                if (!this.checked) {
                     this.checked = true;
+                    this.#dispatchEvents();
+                }
                 break;
             case 'ArrowDown':
             case 'ArrowRight':
@@ -117,11 +119,9 @@ export class Radio extends FormAssociated(InternalsAttached(LitElement)) {
         this.#currentName = '';
     }
     #getGroupRadios() {
-        if (!this.name)
+        if (!this.#currentName || !this.#currentScope)
             return [this];
-        const scope = this.#getScope();
-        const group = _a.#registry.get(scope)?.get(this.name);
-        return group ? Array.from(group) : [this];
+        return (_a.#registry.get(this.#currentScope)?.get(this.#currentName) ?? [this]);
     }
     #uncheckSiblings() {
         const radios = this.#getGroupRadios();
@@ -130,10 +130,14 @@ export class Radio extends FormAssociated(InternalsAttached(LitElement)) {
                 radio.checked = false;
     }
     #updateGroupTabIndices(groupSet) {
-        const radios = groupSet ? Array.from(groupSet) : this.#getGroupRadios();
-        if (radios.length === 0)
-            return;
-        const hasChecked = radios.some((r) => r.checked && !r.disabled);
+        const radios = groupSet ?? this.#getGroupRadios();
+        let hasChecked = false;
+        for (const r of radios) {
+            if (r.checked && !r.disabled) {
+                hasChecked = true;
+                break;
+            }
+        }
         let enabledFound = false;
         for (const radio of radios) {
             const active = !radio.disabled && (hasChecked ? radio.checked : !enabledFound);
@@ -143,7 +147,7 @@ export class Radio extends FormAssociated(InternalsAttached(LitElement)) {
         }
     }
     #navigateGroup(direction) {
-        const radios = this.#getGroupRadios().filter((r) => !r.disabled);
+        const radios = Array.from(this.#getGroupRadios()).filter((r) => !r.disabled);
         if (radios.length <= 1)
             return;
         const currentIndex = radios.indexOf(this);
@@ -152,18 +156,26 @@ export class Radio extends FormAssociated(InternalsAttached(LitElement)) {
         targetRadio.checked = true;
         targetRadio.focus();
     }
-    #updateAriaState() {
+    [updateInternals]() {
         this[internals].ariaChecked = String(this.checked);
         this[internals].ariaDisabled = String(this.disabled);
+        this[replaceStates](['checked'], [this.checked ? 'checked' : null]);
+    }
+    #dispatchEvents() {
+        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
     }
     formResetCallback() {
         this.checked = this.hasAttribute('checked');
     }
+    formStateRestoreCallback(state) {
+        this.checked = state === this.value;
+    }
 }
 _a = Radio;
 __decorate([
     property({ type: String })
 ], Radio.prototype, "value", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true })
+    property({ type: Boolean })
 ], Radio.prototype, "checked", void 0);

package/src/base/tab-panel.d.ts

@@ -1,9 +1,9 @@
 import { LitElement } from 'lit';
 declare const TabPanel_base: Constructor<import("./mixins/internals-attached.js").InternalsAttachedInterface> & typeof LitElement;
 export declare class TabPanel extends TabPanel_base {
-    protected _role: string;
-    render(): import("lit-html").TemplateResult<1>;
     value: string;
-    connectedCallback(): void;
+    selected: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    constructor();
 }
 export {};

package/src/base/tab-panel.js

@@ -2,24 +2,22 @@ import { __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { InternalsAttached, internals } from './mixins/internals-attached.js';
-import { genUniqueId } from '../core/unique-id.js';
 export class TabPanel extends InternalsAttached(LitElement) {
-    constructor() {
-        super(...arguments);
-        this._role = 'tabpanel';
-        this.value = '';
-    }
     render() {
         return html `<slot></slot>`;
     }
-    connectedCallback() {
-        super.connectedCallback();
+    constructor() {
+        super();
+        this.value = '';
+        this.selected = false;
+        this[internals].role = 'tabpanel';
         this.setAttribute('seele-base', 'tabpanel');
-        this[internals].role = this._role;
-        if (!this.id)
-            this.id = genUniqueId('tabpanel');
+        this.setAttribute('slot', 'panels');
     }
 }
 __decorate([
     property({ type: String, reflect: true })
 ], TabPanel.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TabPanel.prototype, "selected", void 0);

package/src/base/tab.d.ts

@@ -1,18 +1,12 @@
 import { LitElement } from 'lit';
 declare const Tab_base: Constructor<import("./mixins/internals-attached.js").InternalsAttachedInterface> & typeof LitElement;
-/**
- * TODO: disabled
- */
 export declare class Tab extends Tab_base {
     #private;
-    protected _role: string;
+    disabled: boolean;
     selected: boolean;
-    focused: boolean;
     value: string;
     render(): import("lit-html").TemplateResult<1>;
-    connectedCallback(): void;
+    constructor();
     protected updated(changed: Map<string, any>): void;
-    focus(): void;
-    blur(): void;
 }
 export {};

package/src/base/tab.js

@@ -1,60 +1,41 @@
 import { __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { InternalsAttached, internals } from './mixins/internals-attached.js';
-import { genUniqueId } from '../core/unique-id.js';
-/**
- * TODO: disabled
- */
+import { InternalsAttached, internals, replaceStates, } from './mixins/internals-attached.js';
 export class Tab extends InternalsAttached(LitElement) {
-    constructor() {
-        super(...arguments);
-        this._role = 'tab';
-        this.selected = false;
-        this.focused = false;
-        this.value = '';
-    }
     render() {
         return html `<slot></slot>`;
     }
-    connectedCallback() {
-        super.connectedCallback();
+    constructor() {
+        super();
+        this.disabled = false;
+        this.selected = false;
+        this.value = '';
         this.setAttribute('seele-base', 'tab');
-        this[internals].role = this._role;
-        if (!this.id)
-            this.id = genUniqueId('tab');
+        this[internals].role = 'tab';
         this.#updateInternals();
     }
     updated(changed) {
         super.updated(changed);
-        if (changed.has('selected') || changed.has('focused')) {
+        if (changed.has('selected') ||
+            changed.has('focused') ||
+            changed.has('disabled')) {
             this.#updateInternals();
         }
     }
     #updateInternals() {
-        this[internals].ariaSelected = this.selected ? 'true' : 'false';
-        this.focused
-            ? this[internals].states.add('focused')
-            : this[internals].states.delete('focused');
-        this.selected
-            ? this[internals].states.add('selected')
-            : this[internals].states.delete('selected');
-    }
-    focus() {
-        this.focused = true;
-        super.focus();
-    }
-    blur() {
-        this.focused = false;
-        super.blur();
+        this.tabIndex = this.disabled ? -1 : this.selected ? 0 : -1;
+        this[internals].ariaSelected = String(this.selected);
+        this[internals].ariaDisabled = String(this.disabled);
+        this[replaceStates](['selected', 'disabled'], [this.selected ? 'selected' : null, this.disabled ? 'disabled' : null]);
     }
 }
 __decorate([
     property({ type: Boolean, reflect: true })
-], Tab.prototype, "selected", void 0);
+], Tab.prototype, "disabled", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], Tab.prototype, "focused", void 0);
+], Tab.prototype, "selected", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], Tab.prototype, "value", void 0);

package/src/base/tabs.d.ts

@@ -1,19 +1,19 @@
 import { LitElement } from 'lit';
 import type { Tab } from './tab.js';
+import type { TabPanel } from './tab-panel.js';
 /**
- * @fires {CustomEvent} tab-select
+ * @fires {CustomEvent} select
  */
 export declare class Tabs extends LitElement {
     #private;
-    protected _role: string;
     switch: 'auto' | 'manual';
     selected: string;
-    $slotItems: Array<HTMLElement>;
-    get $tabs(): Tab[];
-    get $parent(): HTMLElement;
+    get $tabs(): Array<Tab>;
+    get $panels(): Array<TabPanel>;
     render(): import("lit-html").TemplateResult<1>;
+    constructor();
     connectedCallback(): void;
     protected updated(changed: Map<string, any>): void;
     focusTab(tab: Tab): void;
-    selectTab(selectedTab: Tab): void;
+    protected _selectTab(selectedTab: Tab, dispatchEvent?: boolean): void;
 }