@vollowx/seele 0.12.8 → 0.12.9

package/README.md

@@ -12,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.8",
+  "version": "0.12.9",
   "description": "A extensible Web Components library, with Material Design 3 components pre-provided.",
   "author": "vollowx",
   "license": "Apache-2.0",
@@ -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/base/list-item.js

@@ -41,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,6 +16,12 @@ 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._scrollPadding = 0, this.noFocusControl = false, this.listController = new ListController(this, {
             isItem: (item)=>item.getAttribute('seele-base') === 'option' && !item.hasAttribute('disabled') && !item.hidden,
@@ -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();

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

@@ -4,17 +4,17 @@ 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');
     }
-    render() {
-        return html`<slot></slot>`;
-    }
     constructor(...args){
-        super(...args), this.value = '', this._role = 'tabpanel';
+        super(...args), this._role = 'tabpanel', this.value = '';
     }
 }
 _ts_decorate([

package/src/base/tab.js

@@ -6,6 +6,9 @@ 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');
@@ -32,11 +35,8 @@ import { genUniqueId } from '../core/unique-id.js';
         this.focused = false;
         super.blur();
     }
-    render() {
-        return html`<slot></slot>`;
-    }
     constructor(...args){
-        super(...args), this.selected = false, this.focused = false, this.value = '', this._role = 'tab';
+        super(...args), this._role = 'tab', this.selected = false, this.focused = false, this.value = '';
     }
 }
 _ts_decorate([

package/src/base/tabs.js

@@ -11,6 +11,13 @@ import { internals } from './mixins/internals-attached.js';
     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) {
@@ -26,65 +33,9 @@ import { internals } from './mixins/internals-attached.js';
             }
         }
     }
-    #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);
-        });
-    }
-    #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]);
-            }
-        }
-    }
-    #handleClick(event) {
-        const target = event.target;
-        const tab = target.closest('md-tab');
-        if (tab && this.$tabs.includes(tab)) {
-            this.focusTab(tab);
-            this.selectTab(tab);
-        }
-    }
+    #handleSlotChange;
+    #handleKeyDown;
+    #handleClick;
     focusTab(tab) {
         this.$tabs.forEach((t)=>{
             t.blur();
@@ -115,15 +66,64 @@ import { internals } from './mixins/internals-attached.js';
             composed: true
         }));
     }
-    render() {
-        return html`
-      <div part="tablist" role="tablist">
-        <slot @slotchange=${this.#handleSlotChange}></slot>
-      </div>
-    `;
-    }
     constructor(...args){
-        super(...args), this.switch = 'manual', this.selected = '', this._role = 'tablist';
+        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([

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,14 +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.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,8 +5,6 @@ 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
         ];
@@ -15,7 +13,9 @@ export class M3Menu extends Menu {
         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/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({