@vollowx/seele 0.12.7 → 0.12.8

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)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vollowx/seele",
-  "version": "0.12.7",
+  "version": "0.12.8",
   "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"

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();

package/src/base/list.js

@@ -17,8 +17,8 @@ const Base = InternalsAttached(LitElement);
         return this.listController.items || [];
     }
     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;
@@ -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/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) {
+    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';
+    }
+}
+_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) {
+    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();
+    }
+    render() {
+        return html`<slot></slot>`;
+    }
+    constructor(...args){
+        super(...args), this.selected = false, this.focused = false, this.value = '', this._role = 'tab';
+    }
+}
+_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;
+    }
+    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(_) {
+        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);
+        }
+    }
+    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
+        }));
+    }
+    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';
+    }
+}
+_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/m3/list/list.js

@@ -11,11 +11,7 @@ export class M3List extends List {
         ];
     }
     constructor(...args){
-        super(...args), this._possibleItemTags = [
-            'md-list-item',
-            'md-list-item-checkbox',
-            'md-list-item-radio'
-        ], this.color = 'standard';
+        super(...args), this.color = 'standard';
     }
 }
 _ts_decorate([

package/src/m3/menu/menu.js

@@ -12,12 +12,7 @@ export class M3Menu extends Menu {
         ];
     }
     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';

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/base/tab-group.js

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