@vollowx/seele 0.10.4 → 0.11.1

package/custom-elements.json

@@ -125,7 +125,7 @@
               "kind": "field",
               "name": "color",
               "type": {
-                "text": "| 'surface'\r\n    | 'primary-container'\r\n    | 'secondary-container'\r\n    | 'tertiary-container'\r\n    | 'primary'\r\n    | 'secondary'\r\n    | 'tertiary'"
+                "text": "| 'surface'\n    | 'primary-container'\n    | 'secondary-container'\n    | 'tertiary-container'\n    | 'primary'\n    | 'secondary'\n    | 'tertiary'"
               },
               "default": "'primary'",
               "attribute": "color",
@@ -144,7 +144,7 @@
             {
               "name": "color",
               "type": {
-                "text": "| 'surface'\r\n    | 'primary-container'\r\n    | 'secondary-container'\r\n    | 'tertiary-container'\r\n    | 'primary'\r\n    | 'secondary'\r\n    | 'tertiary'"
+                "text": "| 'surface'\n    | 'primary-container'\n    | 'secondary-container'\n    | 'tertiary-container'\n    | 'primary'\n    | 'secondary'\n    | 'tertiary'"
               },
               "default": "'primary'",
               "fieldName": "color"
@@ -656,7 +656,7 @@
                 "text": "array"
               },
               "readonly": true,
-              "default": "[ 'md-menu-item', 'md-menu-item-checkbox', 'md-menu-item-radio', ]"
+              "default": "[ 'md-menu-item', 'md-menu-item-checkbox', 'md-menu-item-radio', 'md-option', ]"
             },
             {
               "kind": "field",
@@ -666,15 +666,6 @@
               },
               "readonly": true,
               "default": "{ show: 300, hide: 200 }"
-            },
-            {
-              "kind": "field",
-              "name": "_scrollPadding",
-              "type": {
-                "text": "number"
-              },
-              "readonly": true,
-              "default": "4"
             }
           ],
           "superclass": {
@@ -1184,8 +1175,8 @@
             }
           ],
           "superclass": {
-            "name": "Switch",
-            "module": "/src/base/switch.js"
+            "name": "ToggleButton",
+            "module": "/src/base/toggle-button.js"
           },
           "tagName": "md-switch",
           "customElement": true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vollowx/seele",
-  "version": "0.10.4",
+  "version": "0.11.1",
   "description": "Standard Extensible Elements. A web components library that can be styled and extended freely, pre-providing components in Material Design 3.",
   "author": "vollowx",
   "license": "Apache-2.0",
@@ -54,14 +54,14 @@
     "@web/dev-server": "^0.4.6",
     "@web/dev-server-esbuild": "^1.0.4",
     "chokidar": "^5.0.0",
-    "lightningcss": "^1.30.2",
+    "lightningcss": "^1.31.1",
     "postcss": "^8.5.6",
     "postcss-cli": "^11.0.1",
     "postcss-sorting": "^9.1.0",
-    "prettier": "^3.7.4"
+    "prettier": "^3.8.1"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.7.4",
+    "@floating-ui/dom": "^1.7.5",
     "@swc/helpers": "^0.5.18",
     "lit": "^3.3.2"
   }

package/src/base/controllers/list-controller.js

@@ -1,4 +1,4 @@
-import { getIndexByLetter } from '../menu-utils.js';
+import { getIndexByLetter } from '../menu.js';
 export class ListController {
     constructor(host, config){
         this._focusedIndex = -1;

package/src/base/controllers/popover-controller.js

@@ -33,13 +33,13 @@ export class PopoverController {
         this.#closeTimer = null;
         // TODO: Provide the ability to specify an arrow element.
         this._dummyArrow = isServer ? null : document.createElement('div');
-        this.#handleClickOutside = (event)=>{
+        this.#handleClickAway = (event)=>{
             const trigger = this.config.trigger();
             const popover = this.config.popover();
             const path = event.composedPath();
             if (trigger && path.includes(trigger)) return;
             if (popover && path.includes(popover)) return;
-            this.config.onClickOutside?.();
+            this.config.onClickAway?.();
         };
         (this.host = host).addController(this);
         this.config = config;
@@ -52,7 +52,7 @@ export class PopoverController {
     }
     hostDisconnected() {
         this.cleanupAutoUpdate?.();
-        window.removeEventListener('pointerup', this.#handleClickOutside);
+        window.removeEventListener('pointerup', this.#handleClickAway);
     }
     #openTimer;
     #closeTimer;
@@ -63,7 +63,7 @@ export class PopoverController {
         // TODO: Use a global event listener to manage this more effectively
         setTimeout(()=>{
             if (this._open) {
-                window.addEventListener('pointerup', this.#handleClickOutside);
+                window.addEventListener('pointerup', this.#handleClickAway);
             }
         }, 0);
         clearTimeout(this.#openTimer);
@@ -99,7 +99,7 @@ export class PopoverController {
     async animateClose() {
         if (!this._open) return;
         this._open = false;
-        window.removeEventListener('pointerup', this.#handleClickOutside);
+        window.removeEventListener('pointerup', this.#handleClickAway);
         clearTimeout(this.#openTimer);
         clearTimeout(this.#closeTimer);
         const closeDuration = this.config.durations.close();
@@ -151,5 +151,5 @@ export class PopoverController {
             });
         });
     }
-    #handleClickOutside;
+    #handleClickAway;
 }

package/src/base/input.js

@@ -6,16 +6,11 @@ import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
  */ import { LitElement, html, nothing } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { live } from 'lit/directives/live.js';
-import { FormAssociated } from './mixins/form-associated.js';
 import { InternalsAttached, internals } from './mixins/internals-attached.js';
-const Base = FormAssociated(InternalsAttached(LitElement));
+import { FocusDelegated } from './mixins/focus-delegated.js';
+import { FormAssociated } from './mixins/form-associated.js';
+const Base = FormAssociated(FocusDelegated(InternalsAttached(LitElement)));
 export class Input extends Base {
-    static{
-        this.shadowRootOptions = {
-            ...LitElement.shadowRootOptions,
-            delegatesFocus: true
-        };
-    }
     render() {
         const isTextarea = this.type === 'textarea';
         const minLength = this.minLength > -1 ? this.minLength : nothing;

package/src/base/menu-item.js

@@ -1,11 +1,11 @@
 import { ListItem } from './list-item.js';
 export const MenuItemMixin = (superClass)=>{
-    class OptionElement extends superClass {
+    class MenuItemElement extends superClass {
         constructor(...args){
             super(...args), this._role = 'menuitem';
         }
     }
-    return OptionElement;
+    return MenuItemElement;
 };
 export class MenuItem extends MenuItemMixin(ListItem) {
 }

package/src/base/menu.js

@@ -4,29 +4,29 @@ import { property, query, queryAssignedElements } from 'lit/decorators.js';
 import { setFocusVisible } from '../core/focus-visible.js';
 import { Attachable } from './mixins/attachable.js';
 import { InternalsAttached } from './mixins/internals-attached.js';
+import { FocusDelegated } from './mixins/focus-delegated.js';
 import { PopoverController } from './controllers/popover-controller.js';
 import { ListController } from './controllers/list-controller.js';
-import { MenuActions, getActionFromKey, getUpdatedIndex, scrollItemIntoView } from './menu-utils.js';
-const Base = InternalsAttached(Attachable(LitElement));
+const Base = FocusDelegated(InternalsAttached(Attachable(LitElement)));
 /**
  * @csspart menu
  * @csspart items
  *
- * @fires {Event} select - Fired when a menu item has been selected.
- * @fires {Event} open - Fired when the menu is opened.
- * @fires {Event} close - Fired when the menu is closed.
+ * @fires {Event} open - Fires when the menu is opened.
+ * @fires {Event} close - Fires when the menu is closed.
+ * @fires {MenuSelectEvent} select - Fires when an item is selected.
+ * @fires {MenuItemFocusEvent} item-focus - Fires when an item is focused
+ *
+ * FIXME: aria-activedescendant may not work in and out shadow DOM
  */ export class Menu extends Base {
-    static{
-        this.shadowRootOptions = {
-            ...LitElement.shadowRootOptions,
-            delegatesFocus: true
-        };
+    get $items() {
+        return this.listController.items || [];
     }
     render() {
         return html`<div
       part="menu"
-      role="menu"
-      tabindex="0"
+      role="${this.type}"
+      tabindex="${this.tabIndex}"
       @keydown=${this.#handleKeyDown.bind(this)}
       @focusout=${this.#handleFocusOut.bind(this)}
     >
@@ -44,7 +44,7 @@ const Base = InternalsAttached(Attachable(LitElement));
             this.$control.addEventListener('focusout', this.#handleFocusOut.bind(this));
         }
         this.updateComplete.then(()=>{
-            this.listController.items.forEach((item)=>{
+            this.$items.forEach((item)=>{
                 item.addEventListener('mouseover', this.#handleItemMouseOver.bind(this));
                 item.addEventListener('click', this.#handleItemClick.bind(this));
             });
@@ -68,8 +68,10 @@ const Base = InternalsAttached(Attachable(LitElement));
                     this.$control.ariaExpanded = 'true';
                 }
                 this.popoverController.animateOpen().then(()=>{
-                    this.$menu.focus();
-                    this.listController.focusFirstItem();
+                    if (!this.noFocusControl) {
+                        this.$menu.focus();
+                        this.listController.focusFirstItem();
+                    }
                 });
             } else {
                 this.dispatchEvent(new Event('close', {
@@ -82,7 +84,7 @@ const Base = InternalsAttached(Attachable(LitElement));
                 }
                 this.popoverController.animateClose().then(()=>{
                     if (this.$lastFocused) {
-                        this.$lastFocused.focus();
+                        if (!this.noFocusControl) this.$lastFocused.focus();
                         this.$lastFocused = null;
                     }
                 });
@@ -92,7 +94,7 @@ const Base = InternalsAttached(Attachable(LitElement));
     #handleKeyDown(event) {
         if (event.defaultPrevented) return;
         const action = getActionFromKey(event, this.open);
-        const items = this.listController.items;
+        const items = this.$items;
         const currentIndex = this.listController.currentIndex;
         const maxIndex = items.length - 1;
         switch(action){
@@ -111,10 +113,10 @@ const Base = InternalsAttached(Attachable(LitElement));
             case MenuActions.CloseSelect:
                 event.preventDefault();
                 if (currentIndex >= 0) {
-                    this.listController.items[currentIndex].focused = false;
+                    items[currentIndex].focused = false;
                     this.dispatchEvent(new CustomEvent('select', {
                         detail: {
-                            item: this.listController.items[currentIndex],
+                            item: items[currentIndex],
                             index: currentIndex
                         },
                         bubbles: true,
@@ -163,10 +165,20 @@ const Base = InternalsAttached(Attachable(LitElement));
             bubbles: true,
             composed: true
         }));
-        if (this.keepOpenClickItem) return;
-        this.open = false;
+        if (!this.keepOpenClickItem) this.open = false;
+    }
+    get currentIndex() {
+        return this.listController?.currentIndex;
+    }
+    focusFirstItem() {
+        this.listController.focusFirstItem();
+    }
+    focusLastItem() {
+        this.listController.focusLastItem();
+    }
+    focusItem(item) {
+        this.listController._focusItem(item);
     }
-    // Exposed functions
     show() {
         this.open = true;
     }
@@ -177,7 +189,7 @@ const Base = InternalsAttached(Attachable(LitElement));
         super(...args), this._possibleItemTags = [], this._durations = {
             show: 0,
             hide: 0
-        }, this._scrollPadding = 0, this.open = false, this.quick = false, this.align = 'bottom-start', this.alignStrategy = 'absolute', this.offset = 0, this.keepOpenBlur = false, this.keepOpenClickItem = false, this.keepOpenClickOutside = false, this.$lastFocused = null, this.popoverController = new PopoverController(this, {
+        }, 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.keepOpenClickItem = false, this.keepOpenClickAway = false, this.noListControl = false, this.noFocusControl = false, this.tabIndex = 0, this.$lastFocused = null, this.popoverController = new PopoverController(this, {
             popover: ()=>this.$menu,
             trigger: ()=>this.$control,
             positioning: {
@@ -190,8 +202,8 @@ const Base = InternalsAttached(Attachable(LitElement));
                 open: ()=>this.quick ? 0 : this._durations.show,
                 close: ()=>this.quick ? 0 : this._durations.hide
             },
-            onClickOutside: ()=>{
-                if (!this.keepOpenClickOutside) this.open = false;
+            onClickAway: ()=>{
+                if (!this.keepOpenClickAway) this.open = false;
             }
         }), this.listController = new ListController(this, {
             isItem: (item)=>this._possibleItemTags.includes(item.tagName.toLowerCase()) && !item.hasAttribute('disabled'),
@@ -201,13 +213,23 @@ const Base = InternalsAttached(Attachable(LitElement));
             },
             focusItem: (item)=>{
                 item.focused = true;
-                this.$menu.setAttribute('aria-activedescendant', item.id);
+                if (!this.noFocusControl) this.$menu.setAttribute('aria-activedescendant', item.id);
                 scrollItemIntoView(this.$menu, item, this._scrollPadding);
+                this.dispatchEvent(new CustomEvent('item-focus', {
+                    detail: {
+                        item: item
+                    },
+                    bubbles: true,
+                    composed: true
+                }));
             },
             wrapNavigation: ()=>false
         });
     }
 }
+_ts_decorate([
+    property()
+], Menu.prototype, "type", void 0);
 _ts_decorate([
     property({
         type: Boolean,
@@ -216,10 +238,14 @@ _ts_decorate([
 ], Menu.prototype, "open", void 0);
 _ts_decorate([
     property({
-        type: Boolean,
-        reflect: true
+        type: Boolean
     })
 ], Menu.prototype, "quick", void 0);
+_ts_decorate([
+    property({
+        type: Number
+    })
+], Menu.prototype, "offset", void 0);
 _ts_decorate([
     property({
         reflect: true
@@ -228,30 +254,46 @@ _ts_decorate([
 _ts_decorate([
     property({
         type: String,
-        reflect: true
+        reflect: true,
+        attribute: 'align-strategy'
     })
 ], Menu.prototype, "alignStrategy", void 0);
 _ts_decorate([
     property({
-        type: Number,
-        reflect: true
+        type: Boolean,
+        attribute: 'keep-open-blur'
     })
-], Menu.prototype, "offset", void 0);
+], Menu.prototype, "keepOpenBlur", void 0);
 _ts_decorate([
     property({
-        type: Boolean
+        type: Boolean,
+        attribute: 'keep-open-click-item'
     })
-], Menu.prototype, "keepOpenBlur", void 0);
+], Menu.prototype, "keepOpenClickItem", void 0);
 _ts_decorate([
     property({
-        type: Boolean
+        type: Boolean,
+        attribute: 'keep-open-click-away'
     })
-], Menu.prototype, "keepOpenClickItem", void 0);
+], Menu.prototype, "keepOpenClickAway", void 0);
 _ts_decorate([
     property({
-        type: Boolean
+        type: Boolean,
+        attribute: 'no-list-control'
+    })
+], Menu.prototype, "noListControl", void 0);
+_ts_decorate([
+    property({
+        type: Boolean,
+        attribute: 'no-focus-control'
     })
-], Menu.prototype, "keepOpenClickOutside", void 0);
+], Menu.prototype, "noFocusControl", void 0);
+_ts_decorate([
+    property({
+        type: Number,
+        attribute: 'data-tabindex'
+    })
+], Menu.prototype, "tabIndex", void 0);
 _ts_decorate([
     query('[part="menu"]')
 ], Menu.prototype, "$menu", void 0);
@@ -260,3 +302,108 @@ _ts_decorate([
         flatten: true
     })
 ], Menu.prototype, "slotItems", void 0);
+// Reference: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
+export const MenuActions = {
+    Close: 0,
+    CloseSelect: 1,
+    First: 2,
+    Last: 3,
+    Next: 4,
+    Open: 5,
+    PageDown: 6,
+    PageUp: 7,
+    Previous: 8,
+    Select: 9,
+    Type: 10
+};
+export function filterOptions(options = [], filter, exclude = []) {
+    return options.filter((option)=>{
+        const matches = option.toLowerCase().indexOf(filter.toLowerCase()) === 0;
+        return matches && exclude.indexOf(option) < 0;
+    });
+}
+export function getActionFromKey(event, menuOpen) {
+    const { key, altKey, ctrlKey, metaKey } = event;
+    const openKeys = [
+        'ArrowDown',
+        'ArrowUp',
+        'Enter',
+        ' '
+    ];
+    if (!menuOpen && openKeys.includes(key)) {
+        return MenuActions.Open;
+    }
+    if (key === 'Home') {
+        return MenuActions.First;
+    }
+    if (key === 'End') {
+        return MenuActions.Last;
+    }
+    if (key === 'Backspace' || key === 'Clear' || key.length === 1 && key !== ' ' && !altKey && !ctrlKey && !metaKey) {
+        return MenuActions.Type;
+    }
+    if (menuOpen) {
+        if (key === 'ArrowUp' && altKey) {
+            return MenuActions.CloseSelect;
+        } else if (key === 'ArrowDown' && !altKey) {
+            return MenuActions.Next;
+        } else if (key === 'ArrowUp') {
+            return MenuActions.Previous;
+        } else if (key === 'PageUp') {
+            return MenuActions.PageUp;
+        } else if (key === 'PageDown') {
+            return MenuActions.PageDown;
+        } else if (key === 'Escape') {
+            return MenuActions.Close;
+        } else if (key === 'Enter' || key === ' ') {
+            return MenuActions.CloseSelect;
+        }
+    }
+    return undefined;
+}
+export function getIndexByLetter(options, filter, startIndex = 0) {
+    const orderedOptions = [
+        ...options.slice(startIndex),
+        ...options.slice(0, startIndex)
+    ];
+    const firstMatch = filterOptions(orderedOptions, filter)[0];
+    const allSameLetter = (array)=>array.every((letter)=>letter === array[0]);
+    if (firstMatch) {
+        return options.indexOf(firstMatch);
+    } else if (allSameLetter(filter.split(''))) {
+        const matches = filterOptions(orderedOptions, filter[0]);
+        return options.indexOf(matches[0]);
+    } else {
+        return -1;
+    }
+}
+export function getUpdatedIndex(currentIndex, maxIndex, action) {
+    const pageSize = 10;
+    switch(action){
+        case MenuActions.First:
+            return 0;
+        case MenuActions.Last:
+            return maxIndex;
+        case MenuActions.Previous:
+            return Math.max(0, currentIndex - 1);
+        case MenuActions.Next:
+            return Math.min(maxIndex, currentIndex + 1);
+        case MenuActions.PageUp:
+            return Math.max(0, currentIndex - pageSize);
+        case MenuActions.PageDown:
+            return Math.min(maxIndex, currentIndex + pageSize);
+        default:
+            return currentIndex;
+    }
+}
+export function scrollItemIntoView(menu, item, paddingY = 0) {
+    if (!menu) return;
+    // Basic scroll into view logic
+    const menuRect = menu.getBoundingClientRect();
+    const itemRect = item.getBoundingClientRect();
+    if (itemRect.bottom + paddingY > menuRect.bottom) {
+        menu.scrollTop += itemRect.bottom - menuRect.bottom + paddingY;
+    } else if (itemRect.top - paddingY < menuRect.top) {
+        menu.scrollTop -= menuRect.top - itemRect.top + paddingY;
+    }
+}

package/src/base/mixins/focus-delegated.js

@@ -0,0 +1,17 @@
+import { LitElement } from 'lit';
+import { internals } from './internals-attached.js';
+export const FocusDelegated = (superClass)=>{
+    class FocusDelegatedElement extends superClass {
+        static{
+            this.shadowRootOptions = {
+                ...LitElement.shadowRootOptions,
+                delegatesFocus: true
+            };
+        }
+        constructor(...args){
+            super();
+            this[internals].role = 'presentation';
+        }
+    }
+    return FocusDelegatedElement;
+};