@vandeurenglenn/lite-elements 0.3.18

package/exports/drawer-layout.js

@@ -0,0 +1,209 @@
+import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-d3ba6528.js';
+import { customElement, property, html, LiteElement } from '@vandeurenglenn/lite';
+import './drawer.js';
+import './drawer-button.js';
+import './drawer-item.js';
+import './top-app-bar.js';
+import '@vandeurenglenn/flex-elements/column.js';
+import './elevation.js';
+import './button.js';
+import './pane.js';
+import './icon.js';
+import '@vandeurenglenn/little-pubsub';
+import '@vandeurenglenn/flex-elements/it.js';
+import '@vandeurenglenn/flex-elements/row.js';
+
+// import { publish, subscribe } from "../decorators/pubsub.js";
+let CustomDrawerLayout = (() => {
+    let _classDecorators = [customElement('custom-drawer-layout')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = LiteElement;
+    let _drawerOpen_decorators;
+    let _drawerOpen_initializers = [];
+    let _drawerOpen_extraInitializers = [];
+    let _keepClosed_decorators;
+    let _keepClosed_initializers = [];
+    let _keepClosed_extraInitializers = [];
+    let _narrow_decorators;
+    let _narrow_initializers = [];
+    let _narrow_extraInitializers = [];
+    let _drawerType_decorators;
+    let _drawerType_initializers = [];
+    let _drawerType_extraInitializers = [];
+    let _appBarType_decorators;
+    let _appBarType_initializers = [];
+    let _appBarType_extraInitializers = [];
+    let _mainDrawerId_decorators;
+    let _mainDrawerId_initializers = [];
+    let _mainDrawerId_extraInitializers = [];
+    (class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _drawerOpen_decorators = [property({ type: Boolean, reflect: true, attribute: 'drawer-open' })];
+            _keepClosed_decorators = [property({ type: Boolean, reflect: true, attribute: 'keep-closed' })];
+            _narrow_decorators = [property({ type: Boolean, reflect: true })];
+            _drawerType_decorators = [property({ type: String })];
+            _appBarType_decorators = [property({ type: String })];
+            _mainDrawerId_decorators = [property({ type: String })];
+            __esDecorate(this, null, _drawerOpen_decorators, { kind: "accessor", name: "drawerOpen", static: false, private: false, access: { has: obj => "drawerOpen" in obj, get: obj => obj.drawerOpen, set: (obj, value) => { obj.drawerOpen = value; } }, metadata: _metadata }, _drawerOpen_initializers, _drawerOpen_extraInitializers);
+            __esDecorate(this, null, _keepClosed_decorators, { kind: "accessor", name: "keepClosed", static: false, private: false, access: { has: obj => "keepClosed" in obj, get: obj => obj.keepClosed, set: (obj, value) => { obj.keepClosed = value; } }, metadata: _metadata }, _keepClosed_initializers, _keepClosed_extraInitializers);
+            __esDecorate(this, null, _narrow_decorators, { kind: "accessor", name: "narrow", static: false, private: false, access: { has: obj => "narrow" in obj, get: obj => obj.narrow, set: (obj, value) => { obj.narrow = value; } }, metadata: _metadata }, _narrow_initializers, _narrow_extraInitializers);
+            __esDecorate(this, null, _drawerType_decorators, { kind: "accessor", name: "drawerType", static: false, private: false, access: { has: obj => "drawerType" in obj, get: obj => obj.drawerType, set: (obj, value) => { obj.drawerType = value; } }, metadata: _metadata }, _drawerType_initializers, _drawerType_extraInitializers);
+            __esDecorate(this, null, _appBarType_decorators, { kind: "accessor", name: "appBarType", static: false, private: false, access: { has: obj => "appBarType" in obj, get: obj => obj.appBarType, set: (obj, value) => { obj.appBarType = value; } }, metadata: _metadata }, _appBarType_initializers, _appBarType_extraInitializers);
+            __esDecorate(this, null, _mainDrawerId_decorators, { kind: "accessor", name: "mainDrawerId", static: false, private: false, access: { has: obj => "mainDrawerId" in obj, get: obj => obj.mainDrawerId, set: (obj, value) => { obj.mainDrawerId = value; } }, metadata: _metadata }, _mainDrawerId_initializers, _mainDrawerId_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        #drawerOpen_accessor_storage = __runInitializers(this, _drawerOpen_initializers, false);
+        // @subscribe('drawer-open', (value) => {return value})
+        get drawerOpen() { return this.#drawerOpen_accessor_storage; }
+        set drawerOpen(value) { this.#drawerOpen_accessor_storage = value; }
+        #keepClosed_accessor_storage = (__runInitializers(this, _drawerOpen_extraInitializers), __runInitializers(this, _keepClosed_initializers, false));
+        get keepClosed() { return this.#keepClosed_accessor_storage; }
+        set keepClosed(value) { this.#keepClosed_accessor_storage = value; }
+        #narrow_accessor_storage = (__runInitializers(this, _keepClosed_extraInitializers), __runInitializers(this, _narrow_initializers, false));
+        get narrow() { return this.#narrow_accessor_storage; }
+        set narrow(value) { this.#narrow_accessor_storage = value; }
+        #drawerType_accessor_storage = (__runInitializers(this, _narrow_extraInitializers), __runInitializers(this, _drawerType_initializers, 'modal'));
+        get drawerType() { return this.#drawerType_accessor_storage; }
+        set drawerType(value) { this.#drawerType_accessor_storage = value; }
+        #appBarType_accessor_storage = (__runInitializers(this, _drawerType_extraInitializers), __runInitializers(this, _appBarType_initializers, 'center-aligned'));
+        get appBarType() { return this.#appBarType_accessor_storage; }
+        set appBarType(value) { this.#appBarType_accessor_storage = value; }
+        #mainDrawerId_accessor_storage = (__runInitializers(this, _appBarType_extraInitializers), __runInitializers(this, _mainDrawerId_initializers, crypto.randomUUID()));
+        get mainDrawerId() { return this.#mainDrawerId_accessor_storage; }
+        set mainDrawerId(value) { this.#mainDrawerId_accessor_storage = value; }
+        connectedCallback() {
+            const media = matchMedia('(max-width: 860px)');
+            this._onnarrow({ detail: media.matches });
+            document.addEventListener('custom-pane-close', ({ detail }) => {
+                if (this.mainDrawerId === detail)
+                    this.drawerOpen = false;
+            });
+            document.addEventListener('custom-pane-open', ({ detail }) => {
+                if (this.mainDrawerId === detail && !this.keepClosed)
+                    this.drawerOpen = true;
+            });
+            document.addEventListener('custom-theme-narrow', this._onnarrow);
+        }
+        _onnarrow({ detail }) {
+            this.narrow = detail;
+            if (this.keepClosed)
+                return (this.drawerOpen = false);
+            if (detail)
+                this.drawerOpen = false;
+            else
+                this.drawerOpen = true;
+        }
+        _click = (__runInitializers(this, _mainDrawerId_extraInitializers), () => {
+            if (this.narrow)
+                this.drawerOpen = !this.drawerOpen;
+        });
+        render() {
+            return html `<style>
+        :host {
+          --custom-drawer-width: 320px;
+          display: flex;
+          flex-direction: row;
+          inset: 0;
+          background: var(--md-sys-color-surface);
+          color: var(--md-sys-color-on-surface);
+          background-blend-mode: hue;
+          position: absolute;
+          box-sizing: border-box;
+        }
+
+        main {
+          width: 100%;
+          height: 100%;
+          overflow-y: auto;
+        }
+
+        :host([drawer-open][narrow]) .scrim {
+          z-index: 1000;
+          position: fixed;
+          inset: 0;
+          background-color: var(--md-sys-color-scrim);
+          opacity: 0.44;
+        }
+
+        custom-drawer {
+          --custom-pane-width: var(--custom-drawer-width, 320px);
+        }
+
+        :host(:not([narrow])) .middle-pane {
+          will-change: width, transform;
+          width: calc(100% - var(--custom-drawer-width));
+          height: 100%;
+          position: absolute;
+          transform: translateX(var(--custom-drawer-width));
+
+          transition: var(--md-sys-motion-easing-emphasized-decelerate) 500ms width,
+            var(--md-sys-motion-easing-emphasized-decelerate) 500ms transform;
+        }
+
+        :host(:not([drawer-open])) .middle-pane {
+          transition: var(--md-sys-motion-easing-emphasized-accelerate) 200ms width,
+            var(--md-sys-motion-easing-emphasized-accelerate) 200ms transform;
+          transform: translateX(0);
+          width: 100%;
+        }
+
+        :host([narrow]) .middle-pane {
+          width: 100%;
+          transform: 0;
+          left: 0;
+        }
+      </style>
+      <span class="scrim" @click=${this._click}></span>
+
+      <slot name="drawer">
+        <custom-drawer
+          @click=${this._click}
+          .mobile=${this.narrow}
+          .open=${this.drawerOpen}
+          .type=${this.drawerType}
+          .id=${this.mainDrawerId}
+        >
+          <slot name="drawer-headline" slot="headline"></slot>
+          <slot name="drawer-menu-button" slot="menu-button"></slot>
+          <slot name="drawer-content" slot="content"></slot>
+          <slot name="drawer-footer" slot="footer"></slot>
+        </custom-drawer>
+      </slot>
+
+      <flex-column class="middle-pane">
+        <!--  TODO: do we want a header? -->
+        <slot name="header"></slot>
+
+        <slot name="top-app-bar">
+          <custom-top-app-bar .type=${this.appBarType}>
+            <slot name="top-app-bar-start" slot="start">
+              <slot name="drawer-menu-button">
+                <custom-drawer-button .mobile=${this.narrow} ?drawer-open=${this.drawerOpen} .id=${this.mainDrawerId}>
+                  menu
+                </custom-drawer-button>
+              </slot>
+            </slot>
+            <slot name="top-app-bar-title" slot="title"></slot>
+            <slot name="top-app-bar-end" slot="end"></slot>
+          </custom-top-app-bar>
+        </slot>
+
+        <slot name="content">
+          <main>
+            <slot></slot>
+          </main>
+        </slot>
+      </flex-column> `;
+        }
+    });
+    return _classThis;
+})();
+
+export { CustomDrawerLayout };

package/exports/drawer.js

@@ -0,0 +1,140 @@
+import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-d3ba6528.js';
+import { customElement, property, html, LiteElement } from '@vandeurenglenn/lite';
+import './elevation.js';
+import './button.js';
+import './pane.js';
+import './icon.js';
+import '@vandeurenglenn/little-pubsub';
+
+let CustomDrawer = (() => {
+    let _classDecorators = [customElement('custom-drawer')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = LiteElement;
+    let _open_decorators;
+    let _open_initializers = [];
+    let _open_extraInitializers = [];
+    let _mobile_decorators;
+    let _mobile_initializers = [];
+    let _mobile_extraInitializers = [];
+    let _type_decorators;
+    let _type_initializers = [];
+    let _type_extraInitializers = [];
+    let _right_decorators;
+    let _right_initializers = [];
+    let _right_extraInitializers = [];
+    let _id_decorators;
+    let _id_initializers = [];
+    let _id_extraInitializers = [];
+    (class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _open_decorators = [property({ type: Boolean, reflect: true })];
+            _mobile_decorators = [property({ type: Boolean, reflect: true })];
+            _type_decorators = [property({ type: String, reflect: true })];
+            _right_decorators = [property({ type: Boolean })];
+            _id_decorators = [property({ type: String })];
+            __esDecorate(this, null, _open_decorators, { kind: "accessor", name: "open", static: false, private: false, access: { has: obj => "open" in obj, get: obj => obj.open, set: (obj, value) => { obj.open = value; } }, metadata: _metadata }, _open_initializers, _open_extraInitializers);
+            __esDecorate(this, null, _mobile_decorators, { kind: "accessor", name: "mobile", static: false, private: false, access: { has: obj => "mobile" in obj, get: obj => obj.mobile, set: (obj, value) => { obj.mobile = value; } }, metadata: _metadata }, _mobile_initializers, _mobile_extraInitializers);
+            __esDecorate(this, null, _type_decorators, { kind: "accessor", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_extraInitializers);
+            __esDecorate(this, null, _right_decorators, { kind: "accessor", name: "right", static: false, private: false, access: { has: obj => "right" in obj, get: obj => obj.right, set: (obj, value) => { obj.right = value; } }, metadata: _metadata }, _right_initializers, _right_extraInitializers);
+            __esDecorate(this, null, _id_decorators, { kind: "accessor", name: "id", static: false, private: false, access: { has: obj => "id" in obj, get: obj => obj.id, set: (obj, value) => { obj.id = value; } }, metadata: _metadata }, _id_initializers, _id_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        #open_accessor_storage = __runInitializers(this, _open_initializers, void 0);
+        get open() { return this.#open_accessor_storage; }
+        set open(value) { this.#open_accessor_storage = value; }
+        #mobile_accessor_storage = (__runInitializers(this, _open_extraInitializers), __runInitializers(this, _mobile_initializers, void 0));
+        get mobile() { return this.#mobile_accessor_storage; }
+        set mobile(value) { this.#mobile_accessor_storage = value; }
+        #type_accessor_storage = (__runInitializers(this, _mobile_extraInitializers), __runInitializers(this, _type_initializers, void 0));
+        get type() { return this.#type_accessor_storage; }
+        set type(value) { this.#type_accessor_storage = value; }
+        #right_accessor_storage = (__runInitializers(this, _type_extraInitializers), __runInitializers(this, _right_initializers, void 0));
+        get right() { return this.#right_accessor_storage; }
+        set right(value) { this.#right_accessor_storage = value; }
+        #id_accessor_storage = (__runInitializers(this, _right_extraInitializers), __runInitializers(this, _id_initializers, void 0));
+        get id() { return this.#id_accessor_storage; }
+        set id(value) { this.#id_accessor_storage = value; }
+        connectedCallback() {
+            document.addEventListener('custom-pane-close', ({ detail }) => {
+                if (this.id === detail)
+                    this.open = false;
+            });
+            document.addEventListener('custom-pane-open', ({ detail }) => {
+                if (this.id === detail)
+                    this.open = true;
+            });
+        }
+        render() {
+            return html `<style>
+        :host {
+          display: contents;
+        }
+
+        custom-pane {
+          box-sizing: border-box;
+          padding: 12px 24px;
+          height: 100%;
+          --custom-pane-width: var(--custom-drawer-with, 320px);
+        }
+
+        slot[name='headline']::slotted(*) {
+          color: var(--md-sys-color-on-surface-variant);
+          font-family: var(--md-sys-typescale-title-small-font-family-name);
+          font-style: var(--md-sys-typescale-title-small-font-family-style);
+          font-weight: var(--md-sys-typescale-title-small-font-weight);
+          font-size: var(--md-sys-typescale-title-small-font-size);
+          letter-spacing: var(--md-sys-typescale-title-small-tracking);
+          line-height: var(--md-sys-typescale-title-small-height);
+          text-transform: var(--md-sys-typescale-title-small-text-transform);
+          text-decoration: var(--md-sys-typescale-title-small-text-decoration);
+          text-transform: capitalize;
+          margin: 0;
+        }
+
+        ::slotted([slot='footer']) {
+          display: block;
+          box-sizing: border-box;
+          min-height: 48px;
+          border-top: 1px solid rgba(0, 0, 0, 0.14);
+        }
+
+        ::slotted([slot='content']) {
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          width: 100%;
+          overflow-y: auto;
+        }
+
+        ::slotted(*) {
+          pointer-events: none;
+        }
+
+        aside {
+          width: 100%;
+        }
+      </style>
+
+      <custom-pane .open=${this.open} .mobile=${this.mobile} .type=${this.type} .id=${this.id}>
+        <slot name="headline" slot="headline"></slot>
+        <slot name="menu-button" slot="menu-button"></slot>
+        <slot name="content" slot="content"></slot>
+        <slot name="footer" slot="footer"></slot>
+      </custom-pane> `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _id_extraInitializers);
+        }
+    });
+    return _classThis;
+})();
+
+export { CustomDrawer };

package/exports/dropdown-menu.js

@@ -0,0 +1,172 @@
+import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-d3ba6528.js';
+import { customElement, property, query, css, html, LiteElement } from '@vandeurenglenn/lite';
+import './dropdown.js';
+import './menu.js';
+import './icon.js';
+import './selector.js';
+import './selector-mixin.js';
+import './select-mixin.js';
+import '@vandeurenglenn/little-pubsub';
+
+let CustomDropdownMenu = (() => {
+    let _classDecorators = [customElement('custom-dropdown-menu')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = LiteElement;
+    let _right_decorators;
+    let _right_initializers = [];
+    let _right_extraInitializers = [];
+    let _bottom_decorators;
+    let _bottom_initializers = [];
+    let _bottom_extraInitializers = [];
+    let _closeOnSelect_decorators;
+    let _closeOnSelect_initializers = [];
+    let _closeOnSelect_extraInitializers = [];
+    let _closeOnClick_decorators;
+    let _closeOnClick_initializers = [];
+    let _closeOnClick_extraInitializers = [];
+    let _open_decorators;
+    let _open_initializers = [];
+    let _open_extraInitializers = [];
+    let _icon_decorators;
+    let _icon_initializers = [];
+    let _icon_extraInitializers = [];
+    let __menu_decorators;
+    let __menu_initializers = [];
+    let __menu_extraInitializers = [];
+    let __dropdown_decorators;
+    let __dropdown_initializers = [];
+    let __dropdown_extraInitializers = [];
+    (class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _right_decorators = [property({ type: Boolean, reflect: true })];
+            _bottom_decorators = [property({ type: Boolean, reflect: true })];
+            _closeOnSelect_decorators = [property({ type: Boolean, attribute: 'close-on-select' })];
+            _closeOnClick_decorators = [property({ type: Boolean, attribute: 'close-on-click' })];
+            _open_decorators = [property({ type: Boolean, reflect: true })];
+            _icon_decorators = [property({ type: String })];
+            __menu_decorators = [query('custom-menu')];
+            __dropdown_decorators = [query('custom-dropdown')];
+            __esDecorate(this, null, _right_decorators, { kind: "accessor", name: "right", static: false, private: false, access: { has: obj => "right" in obj, get: obj => obj.right, set: (obj, value) => { obj.right = value; } }, metadata: _metadata }, _right_initializers, _right_extraInitializers);
+            __esDecorate(this, null, _bottom_decorators, { kind: "accessor", name: "bottom", static: false, private: false, access: { has: obj => "bottom" in obj, get: obj => obj.bottom, set: (obj, value) => { obj.bottom = value; } }, metadata: _metadata }, _bottom_initializers, _bottom_extraInitializers);
+            __esDecorate(this, null, _closeOnSelect_decorators, { kind: "accessor", name: "closeOnSelect", static: false, private: false, access: { has: obj => "closeOnSelect" in obj, get: obj => obj.closeOnSelect, set: (obj, value) => { obj.closeOnSelect = value; } }, metadata: _metadata }, _closeOnSelect_initializers, _closeOnSelect_extraInitializers);
+            __esDecorate(this, null, _closeOnClick_decorators, { kind: "accessor", name: "closeOnClick", static: false, private: false, access: { has: obj => "closeOnClick" in obj, get: obj => obj.closeOnClick, set: (obj, value) => { obj.closeOnClick = value; } }, metadata: _metadata }, _closeOnClick_initializers, _closeOnClick_extraInitializers);
+            __esDecorate(this, null, _open_decorators, { kind: "accessor", name: "open", static: false, private: false, access: { has: obj => "open" in obj, get: obj => obj.open, set: (obj, value) => { obj.open = value; } }, metadata: _metadata }, _open_initializers, _open_extraInitializers);
+            __esDecorate(this, null, _icon_decorators, { kind: "accessor", name: "icon", static: false, private: false, access: { has: obj => "icon" in obj, get: obj => obj.icon, set: (obj, value) => { obj.icon = value; } }, metadata: _metadata }, _icon_initializers, _icon_extraInitializers);
+            __esDecorate(this, null, __menu_decorators, { kind: "accessor", name: "_menu", static: false, private: false, access: { has: obj => "_menu" in obj, get: obj => obj._menu, set: (obj, value) => { obj._menu = value; } }, metadata: _metadata }, __menu_initializers, __menu_extraInitializers);
+            __esDecorate(this, null, __dropdown_decorators, { kind: "accessor", name: "_dropdown", static: false, private: false, access: { has: obj => "_dropdown" in obj, get: obj => obj._dropdown, set: (obj, value) => { obj._dropdown = value; } }, metadata: _metadata }, __dropdown_initializers, __dropdown_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #right_accessor_storage = __runInitializers(this, _right_initializers, void 0);
+        get right() { return this.#right_accessor_storage; }
+        set right(value) { this.#right_accessor_storage = value; }
+        #bottom_accessor_storage = (__runInitializers(this, _right_extraInitializers), __runInitializers(this, _bottom_initializers, void 0));
+        get bottom() { return this.#bottom_accessor_storage; }
+        set bottom(value) { this.#bottom_accessor_storage = value; }
+        #closeOnSelect_accessor_storage = (__runInitializers(this, _bottom_extraInitializers), __runInitializers(this, _closeOnSelect_initializers, true));
+        get closeOnSelect() { return this.#closeOnSelect_accessor_storage; }
+        set closeOnSelect(value) { this.#closeOnSelect_accessor_storage = value; }
+        #closeOnClick_accessor_storage = (__runInitializers(this, _closeOnSelect_extraInitializers), __runInitializers(this, _closeOnClick_initializers, true));
+        get closeOnClick() { return this.#closeOnClick_accessor_storage; }
+        set closeOnClick(value) { this.#closeOnClick_accessor_storage = value; }
+        #open_accessor_storage = (__runInitializers(this, _closeOnClick_extraInitializers), __runInitializers(this, _open_initializers, void 0));
+        get open() { return this.#open_accessor_storage; }
+        set open(value) { this.#open_accessor_storage = value; }
+        #icon_accessor_storage = (__runInitializers(this, _open_extraInitializers), __runInitializers(this, _icon_initializers, 'more_vert'));
+        get icon() { return this.#icon_accessor_storage; }
+        set icon(value) { this.#icon_accessor_storage = value; }
+        #_menu_accessor_storage = (__runInitializers(this, _icon_extraInitializers), __runInitializers(this, __menu_initializers, void 0));
+        get _menu() { return this.#_menu_accessor_storage; }
+        set _menu(value) { this.#_menu_accessor_storage = value; }
+        #_dropdown_accessor_storage = (__runInitializers(this, __menu_extraInitializers), __runInitializers(this, __dropdown_initializers, void 0));
+        get _dropdown() { return this.#_dropdown_accessor_storage; }
+        set _dropdown(value) { this.#_dropdown_accessor_storage = value; }
+        _onselected = (__runInitializers(this, __dropdown_extraInitializers), ({ detail }) => {
+            this.dispatchEvent(new CustomEvent('selected', { detail }));
+            if (this.closeOnSelect) {
+                this.open = false;
+                this._menu.selected = undefined;
+            }
+        });
+        _scrimClick = () => {
+            if (this.closeOnClick) {
+                this.open = false;
+            }
+        };
+        static styles = [
+            css `
+      :host {
+        position: relative;
+        display: block;
+        --custom-dropdown-top: 48px;
+      }
+
+      custom-dropdown {
+        display: flex;
+        flex-direction: column;
+        width: fit-content;
+        top: var(--custom-dropdown-top);
+        padding: 8px 0;
+        border-radius: var(--md-sys-shape-corner-extra-small);
+      }
+
+      custom-elevation {
+        --md-elevation-level: var(--elevation-level, 1);
+        border-radius: var(--md-sys-shape-corner-extra-small);
+      }
+
+      :host([bottom]) custom-dropdown {
+        transform-origin: bottom left;
+        top: auto;
+        bottom: var(--custom-dropdown-top);
+      }
+
+      :host([right]) custom-dropdown {
+        transform-origin: top right;
+        right: 0;
+      }
+
+      :host([bottom][right]) custom-dropdown {
+        transform-origin: bottom right;
+      }
+
+      .scrim {
+        position: fixed;
+        inset: 0;
+        pointer-events: none;
+      }
+
+      :host([open]) .scrim {
+        pointer-events: auto;
+      }
+    `
+        ];
+        render() {
+            return html `
+      <span class="scrim" @click=${this._scrimClick}></span>
+
+      <custom-button part="button" @click=${() => (this.open = !this.open)}>
+        <custom-icon slot="icon" icon=${this.icon}>more_vert</custom-icon>
+      </custom-button>
+
+      <custom-dropdown part="dropdown" .open=${this.open} ?right=${this.right} ?bottom=${this.bottom}>
+        <custom-elevation></custom-elevation>
+        <custom-menu @selected=${this._onselected}>
+          <slot></slot>
+        </custom-menu>
+      </custom-dropdown>
+    `;
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    });
+    return _classThis;
+})();
+
+export { CustomDropdownMenu };

package/exports/dropdown.js

@@ -0,0 +1,68 @@
+import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-d3ba6528.js';
+import { customElement, property, css, html, LiteElement } from '@vandeurenglenn/lite';
+
+let CustomDropdown = (() => {
+    let _classDecorators = [customElement('custom-dropdown')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = LiteElement;
+    let _open_decorators;
+    let _open_initializers = [];
+    let _open_extraInitializers = [];
+    (class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _open_decorators = [property({ type: Boolean, reflect: true })];
+            __esDecorate(this, null, _open_decorators, { kind: "accessor", name: "open", static: false, private: false, access: { has: obj => "open" in obj, get: obj => obj.open, set: (obj, value) => { obj.open = value; } }, metadata: _metadata }, _open_initializers, _open_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #open_accessor_storage = __runInitializers(this, _open_initializers, void 0);
+        get open() { return this.#open_accessor_storage; }
+        set open(value) { this.#open_accessor_storage = value; }
+        static styles = [
+            css `
+      :host {
+        position: absolute;
+        pointer-events: none;
+        opacity: 0;
+        flex: 1;
+        width: fit-content;
+        display: flex;
+        flex-direction: column;
+        border: 1px;
+        background: var(--md-sys-color-surface);
+        z-index: 1001;
+        transform: scale(0, 0);
+        transform-origin: top left;
+        transition: var(--md-sys-motion-easing-emphasized-accelerate) 200ms opacity,
+          var(--md-sys-motion-easing-emphasized-accelerate) 200ms transform;
+      }
+
+      :host([open]) {
+        pointer-events: auto;
+        opacity: 1;
+        transform: scale(1, 1);
+        transition: var(--md-sys-motion-easing-emphasized-decelerate) 500ms opacity,
+          var(--md-sys-motion-easing-emphasized-decelerate) 500ms transform;
+      }
+    `
+        ];
+        render() {
+            return html ` <slot></slot> `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _open_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    });
+    return _classThis;
+})();
+
+export { CustomDropdown };

package/exports/elements.d.ts

@@ -0,0 +1,63 @@
+import { CustomCard } from './card/card.js';
+import { CustomTheme } from './theme/theme.js';
+import { CustomDivider } from './divider/divider.js';
+import { CustomButton } from './button/button.js';
+import { CustomBanner } from './banner/banner.js';
+import { CustomSelector } from './selector/selector.js';
+import { CustomPages } from './pages/pages.js';
+import { CustomDrawer } from './drawer/drawer.js';
+import { CustomDrawerButton } from './drawer/drawer-button.js';
+import { CustomDrawerItem } from './drawer/drawer-item.js';
+import { CustomSection } from './section/section.js';
+import { CustomDrawerLayout } from './drawer/drawer-layout.js';
+import { CustomTopAppBar } from './bar/top-app-bar.js';
+import { CustomIcon } from './icon/icon.js';
+import { CustomTypography } from './typography/typography.js';
+import { CustomPane } from './pane/pane.js';
+import { CustomSupportingPane } from './supporting-pane/supporting-pane.js';
+import { CustomTabs } from './tabs/tabs.js';
+import { CustomRoot } from './root/root.js';
+import { CustomDialog } from './dialog/dialog.js';
+import { CustomIconSet } from './icon/icon-set.js';
+import { CustomListItem } from './list/list-item.js';
+import { CustomMenu } from './menu/menu.js';
+import { CustomIconButton } from './button/icon-button.js';
+import { CustomDropdownMenu } from './dropdown/dropdown-menu.js';
+import { CustomDropdown } from './dropdown/dropdown.js';
+import { CustomToggle } from './toggle/toggle.js';
+import { CustomToggleButton } from './toggle/toggle-button.js';
+import { CustomTimePicker } from './time-picker/time-picker.js';
+export { CustomTheme, CustomDivider, CustomButton, CustomCard, CustomDialog, CustomDrawer, CustomDrawerButton, CustomDrawerItem, CustomDrawerLayout, CustomBanner, CustomPane, CustomSupportingPane, CustomSection, CustomSelector, CustomPages, CustomRoot, CustomTabs, CustomTopAppBar, CustomIcon, CustomIconSet, CustomTypography, CustomListItem, CustomMenu, CustomIconButton, CustomDropdownMenu, CustomDropdown, CustomToggle, CustomToggleButton, CustomTimePicker };
+declare global {
+    interface HTMLElementTagNameMap {
+        'custom-theme': CustomTheme;
+        'custom-divider': CustomDivider;
+        'custom-card': CustomCard;
+        'custom-dialog': CustomDialog;
+        'custom-drawer': CustomDrawer;
+        'custom-drawer-button': CustomDrawerButton;
+        'custom-drawer-item': CustomDrawerItem;
+        'custom-drawer-layout': CustomDrawerLayout;
+        'custom-button': CustomButton;
+        'custom-banner': CustomBanner;
+        'custom-pane': CustomPane;
+        'custom-supporting-pane': CustomSupportingPane;
+        'custom-pages': CustomPages;
+        'custom-root': CustomRoot;
+        'custom-section': CustomSection;
+        'custom-selector': CustomSelector;
+        'custom-tabs': CustomTabs;
+        'custom-top-app-bar': CustomTopAppBar;
+        'custom-icon': CustomIcon;
+        'custom-icon-set': CustomIconSet;
+        'custom-typography': CustomTypography;
+        'custom-list-item': CustomListItem;
+        'custom-menu': CustomMenu;
+        'custom-icon-button': CustomIconButton;
+        'custom-dropdown': CustomDropdown;
+        'custom-dropdown-menu': CustomDropdownMenu;
+        'custom-toggle': CustomToggle;
+        'custom-time-picker': CustomTimePicker;
+        'custom-toggle-button': CustomToggleButton;
+    }
+}