@vollowx/seele 0.12.7 → 0.12.9

package/README.md

@@ -2,6 +2,7 @@
 
 [![npm package](https://img.shields.io/npm/v/%40vollowx%2Fseele)](https://www.npmjs.com/package/@vollowx/seele)
 [![builds.sr.ht status](https://builds.sr.ht/~lucaz/seele.svg)](https://builds.sr.ht/~lucaz/seele?)
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@vollowx/seele)
 
 Seele (**S**tandard **E**xtensible **Ele**ments) is a extensible
 [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
@@ -11,7 +12,7 @@ It also provides styled components in the following design guideline(s):
 
 - [Material You Expressive](https://m3.material.io/)
 
-Documentations and demos are at [seele.projects.v9.nz](https://seele.projects.v9.nz/).
+Documentations and demos are at [tideover.cc/seele/](https://tideover.cc/seele/).
 
 ## Installation
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vollowx/seele",
-  "version": "0.12.7",
+  "version": "0.12.9",
   "description": "A extensible Web Components library, with Material Design 3 components pre-provided.",
   "author": "vollowx",
   "license": "Apache-2.0",
@@ -27,7 +27,7 @@
     "lit",
     "ui-components"
   ],
-  "homepage": "https://seele.projects.v9.nz",
+  "homepage": "https://tideover.cc/seele/",
   "repository": {
     "type": "git",
     "url": "https://github.com/vollowx/seele.git"
@@ -46,13 +46,13 @@
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@swc/core": "^1.15.40",
+    "@swc/core": "^1.15.43",
     "@types/bun": "^1.3.14",
     "@web/dev-server": "^0.4.6",
     "@web/dev-server-esbuild": "^1.0.5",
     "chokidar": "^5.0.0",
     "lightningcss": "^1.32.0",
-    "prettier": "^3.8.3"
+    "prettier": "^3.9.1"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",

package/src/all.js

@@ -1,3 +1,4 @@
+// TODO: export core, base elements, mixins and controllers
 export { M3Autocomplete } from './m3/autocomplete/autocomplete.js';
 export { M3Button } from './m3/button/common-button.js';
 export { M3ButtonToggle } from './m3/button/common-button-toggle.js';
@@ -18,6 +19,9 @@ export { MdOutlinedSelect } from './m3/select/outlined-select.js';
 export { M3Option } from './m3/select/option.js';
 export { M3Slider } from './m3/slider/slider.js';
 export { M3Switch } from './m3/switch/switch.js';
+export { M3Tabs } from './m3/tab/tabs.js';
+export { M3Tab } from './m3/tab/tab.js';
+export { M3TabPanel } from './m3/tab/tab-panel.js';
 export { M3FilledTextField } from './m3/text-field/filled-text-field.js';
 export { M3OutlinedTextField } from './m3/text-field/outlined-text-field.js';
 export { M3Toolbar } from './m3/toolbar/toolbar.js';

package/src/base/list-item.js

@@ -16,6 +16,7 @@ export class ListItem extends FormAssociated(InternalsAttached(LitElement)) {
     }
     connectedCallback() {
         super.connectedCallback();
+        this.setAttribute('seele-base', 'option');
         this[internals].role = this._role;
         this.setAttribute('tabindex', '-1');
         this.#updateInternals();
@@ -40,7 +41,7 @@ export class ListItem extends FormAssociated(InternalsAttached(LitElement)) {
         this.focused = false;
     }
     constructor(...args){
-        super(...args), this.selected = false, this.focused = false, this._role = 'option';
+        super(...args), this._role = 'option', this.selected = false, this.focused = false;
     }
 }
 _ts_decorate([

package/src/base/list.js

@@ -16,9 +16,15 @@ const Base = InternalsAttached(LitElement);
     get $items() {
         return this.listController.items || [];
     }
+    render() {
+        return html` ${this.renderItemSlot()} `;
+    }
+    renderItemSlot() {
+        return html`<slot part="items"></slot>`;
+    }
     constructor(){
-        super(), this._possibleItemTags = [], this._scrollPadding = 0, this.noFocusControl = false, this.listController = new ListController(this, {
-            isItem: (item)=>this._possibleItemTags.includes(item.tagName.toLowerCase()) && !item.hasAttribute('disabled') && !item.hidden,
+        super(), this._scrollPadding = 0, this.noFocusControl = false, this.listController = new ListController(this, {
+            isItem: (item)=>item.getAttribute('seele-base') === 'option' && !item.hasAttribute('disabled') && !item.hidden,
             getPossibleItems: ()=>this.slotItems,
             blurItem: (item)=>{
                 item.focused = false;
@@ -52,12 +58,6 @@ const Base = InternalsAttached(LitElement);
             this.addEventListener('mouseover', (e)=>this.#handleMouseOver(e));
         }
     }
-    render() {
-        return html` ${this.renderItemSlot()} `;
-    }
-    renderItemSlot() {
-        return html`<slot part="items"></slot>`;
-    }
     updated(changed) {
     // TODO: Find somewhere to put this
     // this.listController.clearSearch();
@@ -107,7 +107,7 @@ const Base = InternalsAttached(LitElement);
     }
     #handleMouseOver(event) {
         setFocusVisible(false);
-        const item = event.target.closest(this._possibleItemTags.join(','));
+        const item = event.target.closest('[seele-base="option"]');
         if (item && this.listController.items.includes(item)) {
             this.listController._focusItem(item);
         }
@@ -133,8 +133,7 @@ const Base = InternalsAttached(LitElement);
         }));
     }
     #getEventItem(event) {
-        const selector = this._possibleItemTags.join(',');
-        return event.target.closest(selector);
+        return event.target.closest('[seele-base="option"]');
     }
     get currentIndex() {
         return this.listController?.currentIndex;

package/src/base/menu.js

@@ -187,7 +187,7 @@ const Base = FocusDelegated(InternalsAttached(Attachable(LitElement)));
         this.open = false;
     }
     constructor(...args){
-        super(...args), this._possibleItemTags = [], this._durations = {
+        super(...args), this._durations = {
             show: 0,
             hide: 0
         }, this._scrollPadding = 0, this.type = 'menu', this.open = false, this.quick = false, this.offset = 0, this.align = 'bottom-start', this.alignStrategy = 'absolute', this.keepOpenBlur = false, this.keepOpenSelect = false, this.keepOpenClickAway = false, this.noFocusControl = false, this.tabIndex = 0, this.$lastFocused = null, this.popoverController = new PopoverController(this, {
@@ -207,10 +207,9 @@ const Base = FocusDelegated(InternalsAttached(Attachable(LitElement)));
                 if (!this.keepOpenClickAway) this.open = false;
             }
         }), this.listController = new ListController(this, {
-            isItem: (item)=>this._possibleItemTags.includes(item.tagName.toLowerCase()) && !item.hasAttribute('disabled') && !item.hidden,
+            isItem: (item)=>item.getAttribute('seele-base') === 'option' && !item.hasAttribute('disabled') && !item.hidden,
             getPossibleItems: ()=>this.slotItems,
             blurItem: (item)=>{
-                console.log(item);
                 item.focused = false;
             },
             focusItem: (item)=>{

package/src/base/select.js

@@ -42,55 +42,6 @@ const Base = FormAssociated(FocusDelegated(InternalsAttached(LitElement)));
     get selectedOptions() {
         return (this.getSelectedOptions() ?? []).map(([option])=>option);
     }
-    constructor(){
-        super(), // Form-related
-        this.required = false, // Passed to field
-        this.error = false, // Passed to menu
-        this.quick = false, this.offset = 0, this.align = 'bottom-start', this.alignStrategy = 'absolute', this.open = false, /**
-   * Text to display in the field. Only set for SSR.
-   */ this.displayText = '', this[VALUE] = '', this.lastUserSetValue = null, this.lastUserSetSelectedIndex = null, this.lastSelectedOption = null, this.lastSelectedOptionRecords = [], this.#dispatchChangeEvent = ()=>{
-            this.dispatchEvent(new Event('input', {
-                bubbles: true,
-                composed: true
-            }));
-            this.dispatchEvent(new Event('change', {
-                bubbles: true
-            }));
-        };
-        if (!isServer) {
-            this.addEventListener('focusout', this.handleFocusOut);
-        }
-    }
-    async firstUpdated(changed) {
-        // If this has been handled on update already due to SSR, try again.
-        if (!this.lastSelectedOptionRecords.length) {
-            this.initUserSelection();
-        }
-        // Case for when the DOM is streaming, there are no children, and a child
-        // has [selected] set on it, we need to wait for DOM to render something.
-        if (!this.lastSelectedOptionRecords.length && !isServer && !this.$options.length) {
-            setTimeout(()=>{
-                this.updateValueAndDisplayText();
-            }, 0);
-        }
-        super.firstUpdated(changed);
-    }
-    update(changed) {
-        if (!this.hasUpdated) {
-            this.initUserSelection();
-        }
-        super.update(changed);
-    }
-    updated(changed) {
-        super.updated(changed);
-        if (changed.has('open')) {
-            if (this.open) {
-                this.#focusSelectedItemOrFirst();
-            } else {
-                this.$field.setAttribute('aria-activedescendant', '');
-            }
-        }
-    }
     render() {
         return html`${this.renderField()}${this.renderMenu()}`;
     }
@@ -145,31 +96,80 @@ const Base = FormAssociated(FocusDelegated(InternalsAttached(LitElement)));
     renderFieldContent() {
         return html`<span part="value">${this.displayText || html`&nbsp;`}</span>`;
     }
+    constructor(){
+        super(), // Form-related
+        this.required = false, // Passed to field
+        this.error = false, // Passed to menu
+        this.quick = false, this.offset = 0, this.align = 'bottom-start', this.alignStrategy = 'absolute', this.open = false, /**
+   * Text to display in the field. Only set for SSR.
+   */ this.displayText = '', this[VALUE] = '', this.lastUserSetValue = null, this.lastUserSetSelectedIndex = null, this.lastSelectedOption = null, this.lastSelectedOptionRecords = [], this.#dispatchChangeEvent = ()=>{
+            this.dispatchEvent(new Event('input', {
+                bubbles: true,
+                composed: true
+            }));
+            this.dispatchEvent(new Event('change', {
+                bubbles: true
+            }));
+        };
+        if (!isServer) {
+            this.addEventListener('focusout', this._handleFocusOut);
+        }
+    }
+    async firstUpdated(changed) {
+        // If this has been handled on update already due to SSR, try again.
+        if (!this.lastSelectedOptionRecords.length) {
+            this.initUserSelection();
+        }
+        // Case for when the DOM is streaming, there are no children, and a child
+        // has [selected] set on it, we need to wait for DOM to render something.
+        if (!this.lastSelectedOptionRecords.length && !isServer && !this.$options.length) {
+            setTimeout(()=>{
+                this.updateValueAndDisplayText();
+            }, 0);
+        }
+        super.firstUpdated(changed);
+    }
+    update(changed) {
+        if (!this.hasUpdated) {
+            this.initUserSelection();
+        }
+        super.update(changed);
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has('open')) {
+            if (this.open) {
+                this.#focusSelectedItemOrFirst();
+            } else {
+                this.$field.setAttribute('aria-activedescendant', '');
+            }
+        }
+    }
     /**
    * TODO: Handle clear action
-   */ handleFieldKeydown(event) {
+   */ _handleFieldKeydown(event) {
         if (this.disabled) return;
         const eventClone = new KeyboardEvent(event.type, event);
         eventClone.preventDefault = ()=>event.preventDefault();
         eventClone.stopPropagation = ()=>event.stopPropagation();
         this.$menu.$menu.dispatchEvent(eventClone);
     }
-    handleMenuSelect(event) {
+    _handleMenuSelect(event) {
         if (this.selectItem(event.detail.item)) {
             this.#dispatchChangeEvent();
         }
         this.open = false;
     }
-    handleMenuItemFocus(event) {
+    _handleMenuItemFocus(event) {
         this.$field.setAttribute('aria-activedescendant', event.detail.item.id);
     }
-    handleFocusOut(event) {
+    _handleFocusOut(event) {
         const relatedTarget = event.relatedTarget;
         if (!this.contains(relatedTarget) && !this.$menu.contains(relatedTarget)) {
             this.open = false;
         }
     }
-    handleSlotChange() {
+    _handleSlotChange() {
         // When slots change, check for initially selected items if value is not set
         if (!this.value) {
             this.updateValueAndDisplayText();

package/src/base/tab-panel.js

@@ -0,0 +1,25 @@
+import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+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) {
+    render() {
+        return html`<slot></slot>`;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('seele-base', 'tabpanel');
+        this[internals].role = this._role;
+        if (!this.id) this.id = genUniqueId('tabpanel');
+    }
+    constructor(...args){
+        super(...args), this._role = 'tabpanel', this.value = '';
+    }
+}
+_ts_decorate([
+    property({
+        type: String,
+        reflect: true
+    })
+], TabPanel.prototype, "value", void 0);

package/src/base/tab.js

@@ -0,0 +1,59 @@
+import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+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
+ */ export class Tab extends InternalsAttached(LitElement) {
+    render() {
+        return html`<slot></slot>`;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('seele-base', 'tab');
+        this[internals].role = this._role;
+        if (!this.id) this.id = genUniqueId('tab');
+        this.#updateInternals();
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has('selected') || changed.has('focused')) {
+            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();
+    }
+    constructor(...args){
+        super(...args), this._role = 'tab', this.selected = false, this.focused = false, this.value = '';
+    }
+}
+_ts_decorate([
+    property({
+        type: Boolean,
+        reflect: true
+    })
+], Tab.prototype, "selected", void 0);
+_ts_decorate([
+    property({
+        type: Boolean,
+        reflect: true
+    })
+], Tab.prototype, "focused", void 0);
+_ts_decorate([
+    property({
+        type: String,
+        reflect: true
+    })
+], Tab.prototype, "value", void 0);

package/src/base/tabs.js

@@ -0,0 +1,144 @@
+import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { LitElement, html, isServer } from 'lit';
+import { property, queryAssignedElements } from 'lit/decorators.js';
+import { internals } from './mixins/internals-attached.js';
+/**
+ * @fires {CustomEvent} tab-select
+ */ export class Tabs extends LitElement {
+    get $tabs() {
+        return this.$slotItems.filter((item)=>item[internals].role === 'tab');
+    }
+    get $parent() {
+        return this.parentNode instanceof ShadowRoot ? this.parentNode.host : this.parentElement;
+    }
+    render() {
+        return html`
+      <div part="tablist" role="tablist">
+        <slot @slotchange=${this.#handleSlotChange}></slot>
+      </div>
+    `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!isServer) {
+            this.addEventListener('keydown', this.#handleKeyDown.bind(this));
+            this.addEventListener('click', this.#handleClick.bind(this));
+        }
+    }
+    updated(changed) {
+        if (changed.has('selected') && this.selected) {
+            const targetTab = this.$tabs.find((t)=>t.value === this.selected);
+            if (targetTab && !targetTab.selected) {
+                this.selectTab(targetTab);
+            }
+        }
+    }
+    #handleSlotChange;
+    #handleKeyDown;
+    #handleClick;
+    focusTab(tab) {
+        this.$tabs.forEach((t)=>{
+            t.blur();
+            t.tabIndex = -1;
+        });
+        tab.tabIndex = 0;
+        tab.focus();
+    }
+    selectTab(selectedTab) {
+        this.selected = selectedTab.value;
+        const parent = this.$parent;
+        const panels = Array.from(parent.querySelectorAll('[seele-base="tabpanel"]'));
+        this.$tabs.forEach((tab)=>{
+            tab.selected = tab === selectedTab;
+            tab.tabIndex = tab === selectedTab ? 0 : -1;
+        });
+        panels.forEach((panel)=>{
+            if (panel.value && selectedTab.value) {
+                panel.hidden = panel.value !== selectedTab.value;
+            }
+        });
+        this.dispatchEvent(new CustomEvent('tab-select', {
+            detail: {
+                tab: selectedTab,
+                value: this.selected
+            },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    constructor(...args){
+        super(...args), this._role = 'tablist', this.switch = 'manual', this.selected = '', this.#handleSlotChange = (_)=>{
+            const parent = this.$parent;
+            this.$tabs.forEach((tab)=>{
+                const panel = parent.querySelector(`[seele-base="tab"][value="${tab.value}"]`);
+                if (!panel) console.error('[seele] cannot find a matching panel for tab ', tab);
+                // TODO: ariaLabelledByElements
+                tab.setAttribute('aria-controls', panel.id);
+                panel.setAttribute('aria-labelledby', tab.id);
+            });
+        }, this.#handleKeyDown = (event)=>{
+            const tabs = this.$tabs;
+            if (!tabs.length) return;
+            const activeElement = this.getRootNode().activeElement;
+            const currentIndex = tabs.findIndex((t)=>t === activeElement || t.focused);
+            let nextIndex = currentIndex !== -1 ? currentIndex : 0;
+            let handled = false;
+            switch(event.key){
+                case 'ArrowLeft':
+                    nextIndex = currentIndex <= 0 ? tabs.length - 1 : currentIndex - 1;
+                    handled = true;
+                    break;
+                case 'ArrowRight':
+                    nextIndex = currentIndex >= tabs.length - 1 ? 0 : currentIndex + 1;
+                    handled = true;
+                    break;
+                case 'Home':
+                    nextIndex = 0;
+                    handled = true;
+                    break;
+                case 'End':
+                    nextIndex = tabs.length - 1;
+                    handled = true;
+                    break;
+                case 'Enter':
+                case ' ':
+                    if (currentIndex !== -1) {
+                        this.selectTab(tabs[currentIndex]);
+                    }
+                    handled = true;
+                    break;
+            }
+            if (handled) {
+                event.preventDefault();
+                event.stopPropagation();
+                if (event.key !== 'Enter' && event.key !== ' ') {
+                    this.focusTab(tabs[nextIndex]);
+                    if (this.switch === 'auto') this.selectTab(tabs[nextIndex]);
+                }
+            }
+        }, this.#handleClick = (event)=>{
+            const target = event.target;
+            const tab = target.closest('md-tab');
+            if (tab && this.$tabs.includes(tab)) {
+                this.focusTab(tab);
+                this.selectTab(tab);
+            }
+        };
+    }
+}
+_ts_decorate([
+    property({
+        type: String
+    })
+], Tabs.prototype, "switch", void 0);
+_ts_decorate([
+    property({
+        type: String,
+        reflect: true
+    })
+], Tabs.prototype, "selected", void 0);
+_ts_decorate([
+    queryAssignedElements({
+        flatten: true
+    })
+], Tabs.prototype, "$slotItems", void 0);

package/src/base/toggle-button.js

@@ -69,7 +69,7 @@ export class ToggleButton extends Base {
         };
         this[internals].role = 'button';
         this.checked = this.hasAttribute('checked');
-        this.updateInternals();
+        this._updateInternals();
     }
     connectedCallback() {
         super.connectedCallback();
@@ -91,10 +91,10 @@ export class ToggleButton extends Base {
     }
     updated(changed) {
         if (changed.has('checked') || changed.has('disabled')) {
-            this.updateInternals();
+            this._updateInternals();
         }
     }
-    updateInternals() {
+    _updateInternals() {
         this[internals].states.delete('unchecked');
         this[internals].states.delete('checked');
         this[internals].ariaPressed = this.checked ? 'true' : 'false';

package/src/base/tooltip.js

@@ -10,6 +10,9 @@ const Base = Attachable(InternalsAttached(LitElement));
 /**
  * TODO: Check if $control controls a menu/popover and keep hidden when it is open.
  */ export class Tooltip extends Base {
+    render() {
+        return html`<slot @slotchange="${this.#handleSlotChange}"></slot>`;
+    }
     // Different from those in the popoverController, these timers are used to
     // manage the delay before showing/hiding the tooltip.
     #openTimer;
@@ -70,9 +73,6 @@ const Base = Attachable(InternalsAttached(LitElement));
         };
         this[internals].role = 'tooltip';
     }
-    render() {
-        return html`<slot @slotchange="${this.#handleSlotChange}"></slot>`;
-    }
     handleControlChange(prev = null, next = null) {
         const eventHandlers = {
             focusin: this.#handleFocusIn,

package/src/m3/field/field.js

@@ -12,12 +12,6 @@ import { fieldStyles } from './field-styles.css.js';
             fieldStyles
         ];
     }
-    update(changedProperties) {
-        if (changedProperties.has('label')) {
-            this.hasLabel = !!this.label;
-        }
-        super.update(changedProperties);
-    }
     render() {
         return html`
       <div class="container">${this.renderContainerContent()}</div>
@@ -46,6 +40,12 @@ import { fieldStyles } from './field-styles.css.js';
       @slotchange=${this.handleSlotChange}
     ></slot>`;
     }
+    update(changedProperties) {
+        if (changedProperties.has('label')) {
+            this.hasLabel = !!this.label;
+        }
+        super.update(changedProperties);
+    }
     handleSlotChange(e) {
         const slot = e.target;
         const hasContent = slot.assignedNodes({

package/src/m3/focus-ring/focus-ring.js

@@ -7,28 +7,25 @@ import { Attachable } from '../../base/mixins/attachable.js';
 import { InternalsAttached, internals } from '../../base/mixins/internals-attached.js';
 import { focusRingStyles } from './focus-ring-styles.css.js';
 export class M3FocusRing extends Attachable(InternalsAttached(LitElement)) {
-    constructor(){
-        super(), this.inward = false, this.#boundFocusIn = this.#handleFocusIn.bind(this), this.#boundFocusOut = this.#handleFocusOut.bind(this), this.#boundPointerDown = this.#handlePointerDown.bind(this);
-        this[internals].ariaHidden = 'true';
-    }
     static{
         this.styles = [
             focusRingStyles
         ];
     }
-    #boundFocusIn;
-    #boundFocusOut;
-    #boundPointerDown;
-    #handleFocusIn() {
-        if (focusVisible) this[internals].states.add('visible');
-        else this[internals].states.delete('visible');
-    }
-    #handleFocusOut() {
-        this[internals].states.delete('visible');
-    }
-    #handlePointerDown() {
-        this[internals].states.delete('visible');
+    constructor(){
+        super(), this.inward = false, this.#handleFocusIn = ()=>{
+            if (focusVisible) this[internals].states.add('visible');
+            else this[internals].states.delete('visible');
+        }, this.#handleFocusOut = ()=>{
+            this[internals].states.delete('visible');
+        }, this.#handlePointerDown = ()=>{
+            this[internals].states.delete('visible');
+        };
+        this[internals].ariaHidden = 'true';
     }
+    #handleFocusIn;
+    #handleFocusOut;
+    #handlePointerDown;
     visualFocus() {
         this.#handleFocusIn();
     }
@@ -37,9 +34,9 @@ export class M3FocusRing extends Attachable(InternalsAttached(LitElement)) {
     }
     handleControlChange(prev = null, next = null) {
         const eventHandlers = {
-            focusin: this.#boundFocusIn,
-            focusout: this.#boundFocusOut,
-            pointerdown: this.#boundPointerDown
+            focusin: this.#handleFocusIn,
+            focusout: this.#handleFocusOut,
+            pointerdown: this.#handlePointerDown
         };
         Object.keys(eventHandlers).forEach((eventName)=>{
             prev?.removeEventListener(eventName, eventHandlers[eventName]);

package/src/m3/list/list-item.js

@@ -5,29 +5,12 @@ import { ListItem } from '../../base/list-item.js';
 import '../item/item.js';
 import { listItemStyles } from './list-item-styles.css.js';
 export class M3ListItem extends ListItem {
-    constructor(){
-        super();
-        this.updateComplete.then(()=>{
-            this.ripple.$control = this;
-            this.focusRing.$control = this;
-        });
-    }
     static{
         this.styles = [
             ...super.styles,
             listItemStyles
         ];
     }
-    updated(changed) {
-        super.updated(changed);
-        if (changed.has('focused')) {
-            if (this.focused) {
-                this.focusRing.visualFocus();
-            } else {
-                this.focusRing.visualBlur();
-            }
-        }
-    }
     render() {
         return html`
       <md-item>
@@ -48,6 +31,23 @@ export class M3ListItem extends ListItem {
       </md-item>
     `;
     }
+    constructor(){
+        super();
+        this.updateComplete.then(()=>{
+            this.ripple.$control = this;
+            this.focusRing.$control = this;
+        });
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has('focused')) {
+            if (this.focused) {
+                this.focusRing.visualFocus();
+            } else {
+                this.focusRing.visualBlur();
+            }
+        }
+    }
 }
 _ts_decorate([
     query('md-ripple')

package/src/m3/list/list.js

@@ -4,18 +4,14 @@ import { List } from '../../base/list.js';
 import { listStyles } from './list-styles.css.js';
 export class M3List extends List {
     static{
-        // FIXME: Might cause a long list to scroll more than expected
-        // override readonly _scrollPadding = 4;
         this.styles = [
             listStyles
         ];
     }
     constructor(...args){
-        super(...args), this._possibleItemTags = [
-            'md-list-item',
-            'md-list-item-checkbox',
-            'md-list-item-radio'
-        ], this.color = 'standard';
+        super(...args), // FIXME: Might cause a long list to scroll more than expected
+        // override readonly _scrollPadding = 4;
+        this.color = 'standard';
     }
 }
 _ts_decorate([

package/src/m3/menu/menu.js

@@ -5,22 +5,17 @@ import { Menu } from '../../base/menu.js';
 import { menuStyles } from './menu-styles.css.js';
 export class M3Menu extends Menu {
     static{
-        // FIXME: Might cause a long list to scroll more than expected
-        // override readonly _scrollPadding = 4;
         this.styles = [
             menuStyles
         ];
     }
     constructor(...args){
-        super(...args), this._possibleItemTags = [
-            'md-menu-item',
-            'md-menu-item-checkbox',
-            'md-menu-item-radio',
-            'md-option'
-        ], this._durations = {
+        super(...args), this._durations = {
             show: 300,
             hide: 150
-        }, this.color = 'standard';
+        }, // FIXME: Might cause a long list to scroll more than expected
+        // override readonly _scrollPadding = 4;
+        this.color = 'standard';
     }
 }
 _ts_decorate([

package/src/m3/select/filled-select.js

@@ -23,7 +23,7 @@ export class MdFilledSelect extends M3Select {
         .focused=${this.open || this.focused}
         supportingtext=${this.supportingText}
         @click=${this.toggle}
-        @keydown=${this.handleFieldKeydown}
+        @keydown=${this._handleFieldKeydown}
         @focus=${()=>this.focused = true}
         @blur=${()=>this.focused = false}
         tabindex=${this.disabled ? '-1' : '0'}

package/src/m3/select/outlined-select.js

@@ -23,7 +23,7 @@ export class MdOutlinedSelect extends M3Select {
         .focused=${this.open || this.focused}
         supportingtext=${this.supportingText}
         @click=${this.toggle}
-        @keydown=${this.handleFieldKeydown}
+        @keydown=${this._handleFieldKeydown}
         @focus=${()=>this.focused = true}
         @blur=${()=>this.focused = false}
         tabindex=${this.disabled ? '-1' : '0'}

package/src/m3/select/select.js

@@ -23,10 +23,10 @@ import { Select } from '../../base/select.js';
         ?open="${this.open}"
         @open="${()=>this.open = true}"
         @close="${()=>this.open = false}"
-        @item-focus="${this.handleMenuItemFocus}"
-        @select="${this.handleMenuSelect}"
+        @item-focus="${this._handleMenuItemFocus}"
+        @select="${this._handleMenuSelect}"
       >
-        <slot part="items" @slotchange=${this.handleSlotChange}></slot>
+        <slot part="items" @slotchange=${this._handleSlotChange}></slot>
       </md-menu>
     `;
     }

package/src/m3/slider/slider.js

@@ -74,12 +74,12 @@ export class M3Slider extends Slider {
         <div class="inactive-after"></div>
       </div>
       ${this.ticks ? html`
-            <div class="tickmarks">
-              <div class="inactive-before"></div>
-              <div class="active"></div>
-              <div class="inactive-after"></div>
-            </div>
-          ` : nothing}
+              <div class="tickmarks">
+                <div class="inactive-before"></div>
+                <div class="active"></div>
+                <div class="inactive-after"></div>
+              </div>
+            ` : nothing}
     `;
     }
     renderLabel(value) {

package/src/m3/tab/tab-panel-styles.css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const tabPanelStyles = css`:host{display:block}:host([hidden]){display:none}`;

package/src/m3/tab/tab-panel.js

@@ -0,0 +1,14 @@
+import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { customElement } from 'lit/decorators.js';
+import { TabPanel } from '../../base/tab-panel.js';
+import { tabPanelStyles } from './tab-panel-styles.css.js';
+export class M3TabPanel extends TabPanel {
+    static{
+        this.styles = [
+            tabPanelStyles
+        ];
+    }
+}
+M3TabPanel = _ts_decorate([
+    customElement('md-tab-panel')
+], M3TabPanel);

package/src/m3/tab/tab-styles.css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const tabStyles = css`:host{--md-focus-ring-shape:8px;box-sizing:border-box;color:var(--md-sys-color-on-surface-variant);cursor:pointer;font:var(--md-sys-typography-title-small);user-select:none;outline:none;flex-shrink:0;justify-content:center;padding:0 16px;display:inline-flex;position:relative}:host([selected]){color:var(--_tab-selected-color)}:host([selected]) md-focus-ring{margin-bottom:4px}[part=content]{flex-direction:var(--_tab-flex-dir,row);height:var(--_tab-height,48px);justify-content:center;align-items:center;gap:8px;display:inline-flex}[part~=icon]{fill:currentColor;block-size:1em;inline-size:1em;font-size:24px}`;

package/src/m3/tab/tab.js

@@ -0,0 +1,33 @@
+import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { html } from 'lit';
+import { customElement, query } from 'lit/decorators.js';
+import { Tab } from '../../base/tab.js';
+import '../focus-ring/focus-ring.js';
+import '../ripple/ripple.js';
+import { targetStyles } from '../target-styles.css.js';
+import { tabStyles } from './tab-styles.css.js';
+export class M3Tab extends Tab {
+    static{
+        this.styles = [
+            targetStyles,
+            tabStyles
+        ];
+    }
+    render() {
+        return html`
+      <md-focus-ring inward></md-focus-ring>
+      <md-ripple inward></md-ripple>
+      <span part="target"></span>
+      <div part="content">
+        <slot part="icon" name="icon" aria-hidden="true"></slot>
+        <slot part="label"></slot>
+      </div>
+    `;
+    }
+}
+_ts_decorate([
+    query('[part="content"]')
+], M3Tab.prototype, "$content", void 0);
+M3Tab = _ts_decorate([
+    customElement('md-tab')
+], M3Tab);

package/src/m3/tab/tabs-styles.css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const tabsStyles = css`:host{--_tab-selected-color:var(--md-sys-color-primary);border-bottom:1px solid var(--md-sys-color-outline-variant);box-sizing:border-box;scroll-behavior:smooth;scrollbar-width:none;display:block;position:relative;overflow:auto hidden}[part=tablist]{display:flex}[part=indicator]{background-color:var(--md-sys-color-primary);height:3px;transition:var(--md-sys-motion-std-effects-slow-duration) var(--md-sys-motion-std-effects-slow);will-change:left, width;border-radius:3px 3px 0 0;position:absolute;bottom:0}::slotted(*){flex:1}:host([secondary]){--_tab-selected-color:var(--md-sys-color-on-surface)}:host([secondary]) [part=indicator]{border-radius:0;height:2px}:host([iconsabove]){--_tab-flex-dir:column;--_tab-height:64px}`;

package/src/m3/tab/tabs.js

@@ -0,0 +1,48 @@
+import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { Tabs } from '../../base/tabs.js';
+import { tabsStyles } from './tabs-styles.css.js';
+export class M3Tabs extends Tabs {
+    static{
+        this.styles = [
+            tabsStyles
+        ];
+    }
+    render() {
+        return html`
+      ${super.render()}
+      <div part="indicator" role="presentation"></div>
+    `;
+    }
+    selectTab(selectedTab) {
+        super.selectTab(selectedTab);
+        requestAnimationFrame(()=>{
+            const left = selectedTab.offsetLeft + (this.secondary ? 0 : selectedTab.$content.offsetLeft);
+            const width = this.secondary ? selectedTab.offsetWidth : selectedTab.$content.offsetWidth;
+            this.$indicator.style.left = `${left}px`;
+            this.$indicator.style.width = `${width}px`;
+        });
+    }
+    constructor(...args){
+        super(...args), this.secondary = false, this.iconsAbove = false;
+    }
+}
+_ts_decorate([
+    query('[part="indicator"]')
+], M3Tabs.prototype, "$indicator", void 0);
+_ts_decorate([
+    property({
+        type: Boolean,
+        reflect: true
+    })
+], M3Tabs.prototype, "secondary", void 0);
+_ts_decorate([
+    property({
+        type: Boolean,
+        reflect: true
+    })
+], M3Tabs.prototype, "iconsAbove", void 0);
+M3Tabs = _ts_decorate([
+    customElement('md-tabs')
+], M3Tabs);

package/src/m3/toolbar/toolbar.js

@@ -9,16 +9,6 @@ export class M3Toolbar extends InternalsAttached(LitElement) {
             toolbarStyles
         ];
     }
-    constructor(){
-        super(), this.type = 'docked', this.color = 'standard', this.orientation = 'horizontal';
-        this[internals].role = 'toolbar';
-        this[internals].ariaOrientation = this.orientation;
-    }
-    updated(changed) {
-        if (changed.has('orientation')) {
-            this[internals].ariaOrientation = this.orientation;
-        }
-    }
     render() {
         return html`
       <div part="container">
@@ -29,6 +19,16 @@ export class M3Toolbar extends InternalsAttached(LitElement) {
       </div>
     `;
     }
+    constructor(){
+        super(), this.type = 'docked', this.color = 'standard', this.orientation = 'horizontal';
+        this[internals].role = 'toolbar';
+        this[internals].ariaOrientation = this.orientation;
+    }
+    updated(changed) {
+        if (changed.has('orientation')) {
+            this[internals].ariaOrientation = this.orientation;
+        }
+    }
 }
 _ts_decorate([
     property({

package/src/base/tab-group.js

@@ -1,3 +0,0 @@
-import { LitElement } from "lit";
-export class TabGroup extends LitElement {
-}