@vandeurenglenn/lite-elements 0.3.18

package/exports/mixins/select-mixin.d.ts

@@ -0,0 +1,32 @@
+import { LiteElement } from '@vandeurenglenn/lite';
+export declare class SelectBase extends LiteElement {
+    #private;
+    currentSelected: HTMLElement;
+    connectedCallback(): void;
+    get multi(): boolean;
+    set multi(value: boolean);
+    get defaultSelected(): string | 0;
+    set selected(value: string | number | HTMLElement | string[] | HTMLElement[]);
+    get selected(): string | number | HTMLElement | string[] | HTMLElement[];
+    get slotted(): this | HTMLSlotElement;
+    get attrForSelected(): string;
+    /**
+     * get the attribute used to set selected
+     *
+     * @example
+     * <custom-selector attr-for-selected="select">
+     *  <li select="1"></li>
+     *  <li select="2"></li>
+     * </custom-selector>
+     */
+    set attrForSelected(value: string);
+    attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
+    /**
+     * @param {string|number|HTMLElement} selected
+     */
+    select(selected: any): void;
+    next(): void;
+    previous(): void;
+    getIndexFor(element: any): number;
+}
+export declare function SelectMixin<TBase extends CustomElementConstructor>(Base: TBase): typeof SelectBase;

package/exports/mixins/selector-mixin.d.ts

@@ -0,0 +1,8 @@
+import { SelectBase } from './select-mixin.js';
+export declare class SelectorBase extends SelectBase {
+    #private;
+    constructor();
+    connectedCallback(): Promise<void>;
+    disconnectedCallback(): void;
+}
+export declare function SelectorMixin<TBase extends CustomElementConstructor>(Base: TBase): typeof SelectorBase;

package/exports/pages.js

@@ -0,0 +1,88 @@
+import { css, html } from '@vandeurenglenn/lite';
+import { SelectBase } from './select-mixin.js';
+
+/**
+ * @extends HTMLElement
+ */
+class CustomPages extends SelectBase {
+    async connectedCallback() {
+        super.connectedCallback && (await super.connectedCallback());
+        this.slotchange = this.slotchange.bind(this);
+        this.shadowRoot.querySelector('slot').addEventListener('slotchange', this.slotchange);
+        this.slotchange();
+        this.selected = this.defaultSelected;
+    }
+    isEvenNumber(number) {
+        return Boolean(number % 2 === 0);
+    }
+    /**
+     * set animation class when slot changes
+     */
+    slotchange() {
+        let call = 0;
+        for (const child of this.slotted.assignedNodes()) {
+            if (child && child.nodeType === 1) {
+                child.style.zIndex = 99 - call;
+                if (this.isEvenNumber(call++)) {
+                    child.classList.add('animate-down');
+                }
+                else {
+                    child.classList.add('animate-up');
+                }
+                this.dispatchEvent(new CustomEvent('child-change', { detail: child }));
+            }
+        }
+    }
+    static styles = [
+        css `
+      :host {
+        flex: 1;
+        position: relative;
+        --primary-background-color: #eceff1;
+        overflow: hidden;
+        height: 100%;
+        width: 100%;
+      }
+      ::slotted(*) {
+        display: flex;
+        position: absolute;
+        opacity: 0;
+        pointer-events: none;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        transition: var(--md-sys-motion-easing-emphasized-accelerate) 200ms opacity,
+          var(--md-sys-motion-easing-emphasized-accelerate) 200ms transform;
+        /*transform: scale(0.1);*/
+        transform-origin: left;
+      }
+      ::slotted(.animate-up) {
+        transform: translateY(-120%);
+      }
+      ::slotted(.animate-down) {
+        transform: translateY(120%);
+      }
+      ::slotted(.custom-selected) {
+        opacity: 1;
+        pointer-events: auto;
+        transform: translateY(0);
+        transition: var(--md-sys-motion-easing-emphasized-decelerate) 500ms width,
+          var(--md-sys-motion-easing-emphasized-decelerate) 500ms transform;
+        max-height: 100%;
+        max-width: 100%;
+      }
+    `
+    ];
+    render() {
+        return html `
+      <div class="wrapper">
+        <slot></slot>
+      </div>
+    `;
+    }
+}
+// @ts-ignore
+customElements.define('custom-pages', CustomPages);
+
+export { CustomPages };

package/exports/pane/pane.d.ts

@@ -0,0 +1,14 @@
+import { LiteElement } from '@vandeurenglenn/lite';
+import '../elevation/elevation.js';
+import '../button/button.js';
+import '../icon/icon.js';
+export declare class CustomPane extends LiteElement {
+    accessor open: boolean;
+    accessor mobile: boolean;
+    accessor type: 'modal' | undefined;
+    accessor left: boolean;
+    accessor right: boolean;
+    accessor id: string;
+    closePane(event: any): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/exports/pane.js

@@ -0,0 +1,182 @@
+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 './icon.js';
+import '@vandeurenglenn/little-pubsub';
+
+let CustomPane = (() => {
+    let _classDecorators = [customElement('custom-pane')];
+    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 _left_decorators;
+    let _left_initializers = [];
+    let _left_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 })];
+            _left_decorators = [property({ type: Boolean, reflect: true })];
+            _right_decorators = [property({ type: Boolean, reflect: true })];
+            _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, _left_decorators, { kind: "accessor", name: "left", static: false, private: false, access: { has: obj => "left" in obj, get: obj => obj.left, set: (obj, value) => { obj.left = value; } }, metadata: _metadata }, _left_initializers, _left_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, false);
+        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, false));
+        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; }
+        #left_accessor_storage = (__runInitializers(this, _type_extraInitializers), __runInitializers(this, _left_initializers, true));
+        get left() { return this.#left_accessor_storage; }
+        set left(value) { this.#left_accessor_storage = value; }
+        #right_accessor_storage = (__runInitializers(this, _left_extraInitializers), __runInitializers(this, _right_initializers, false));
+        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; }
+        closePane(event) {
+            event.stopPropagation();
+            this.open = false;
+            document.dispatchEvent(new CustomEvent(`custom-pane-close`, { detail: this.id || `${this.left ? 'left' : 'right'}` }));
+        }
+        render() {
+            return html `<style>
+        :host {
+          --custom-pane-width: 100%;
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          background: var(--md-sys-color-surface);
+          color: var(--md-sys-color-on-surface);
+          position: relative;
+          /* border-radius: 12px; */
+
+          --md-elevation-level: 0;
+
+          pointer-events: none;
+          opacity: 0;
+          width: 100%;
+          max-width: var(--custom-pane-width);
+          transition: var(--md-sys-motion-easing-emphasized-accelerate) 200ms opacity,
+            var(--md-sys-motion-easing-emphasized-accelerate) 200ms transform;
+        }
+
+        :host([left]) {
+          border-radius: var(--md-sys-shape-corner-large-end);
+          transform: translateX(-100%);
+          z-index: 1002;
+        }
+
+        :host([right]) {
+          border-radius: var(--md-sys-shape-corner-large-start);
+          transform: translateX(100%);
+          z-index: 1001;
+        }
+
+        :host([mobile]) {
+          inset: 0;
+          position: fixed;
+          z-index: 1001;
+        }
+
+        :host([type='modal']) {
+          --md-elevation-level: 1;
+        }
+
+        :host([open]) {
+          transform: translateX(0);
+          opacity: 1;
+          pointer-events: auto;
+          transition: var(--md-sys-motion-easing-emphasized-decelerate) 500ms opacity,
+            var(--md-sys-motion-easing-emphasized-decelerate) 500ms transform;
+        }
+
+        :host([open]) {
+          position: relative;
+        }
+
+        :host([open][mobile]) {
+          position: fixed;
+        }
+
+        aside {
+          width: 100%;
+          height: 100%;
+        }
+
+        .content {
+          height: calc(100% - 54px);
+          width: 100%;
+          overflow-y: auto;
+        }
+
+        .footer {
+          height: 54px;
+        }
+
+        :host([right]) custom-button {
+          transform: rotateZ(180deg);
+        }
+      </style>
+      <custom-elevation></custom-elevation>
+      <aside>
+        <slot name="header">
+          <flex-row center>
+            <slot name="headline"></slot>
+            <flex-it></flex-it>
+            <custom-button @click=${(e) => this.closePane(e)} .id=${this.id}>
+              <custom-icon slot="icon">menu_open</custom-icon>
+            </custom-button>
+          </flex-row>
+        </slot>
+        <flex-column class="content">
+          <slot name="content"></slot>
+        </flex-column>
+        <flex-row class="footer">
+          <slot name="footer"></slot>
+        </flex-row>
+      </aside> `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _id_extraInitializers);
+        }
+    });
+    return _classThis;
+})();
+
+export { CustomPane };

package/exports/rail/rail.d.ts

@@ -0,0 +1,9 @@
+import { LiteElement } from '@vandeurenglenn/lite';
+import '../pane/pane.js';
+export declare class CustomRail extends LiteElement {
+    accessor open: boolean;
+    accessor mobile: boolean;
+    accessor type: 'modal' | undefined;
+    accessor right: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/exports/rail.js

@@ -0,0 +1,124 @@
+import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-d3ba6528.js';
+import { customElement, property, html, LiteElement } from '@vandeurenglenn/lite';
+import './pane.js';
+import './elevation.js';
+import './button.js';
+import './icon.js';
+import '@vandeurenglenn/little-pubsub';
+
+let CustomRail = (() => {
+    let _classDecorators = [customElement('custom-rail')];
+    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 = [];
+    (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 })];
+            __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(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, false);
+        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, false));
+        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, false));
+        get right() { return this.#right_accessor_storage; }
+        set right(value) { this.#right_accessor_storage = value; }
+        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}>
+        <slot name="header">
+          <slot name="headline" slot="headline"></slot>
+          <slot name="menu-button" slot="menu-button"></slot>
+        </slot>
+        <slot name="content" slot="content"></slot>
+        <slot name="footer" slot="footer"></slot>
+      </custom-pane> `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _right_extraInitializers);
+        }
+    });
+    return _classThis;
+})();
+
+export { CustomRail };

package/exports/root.js

@@ -0,0 +1,39 @@
+import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-d3ba6528.js';
+import { customElement, css, html, LiteElement } from '@vandeurenglenn/lite';
+import './theme.js';
+
+let CustomRoot = (() => {
+    let _classDecorators = [customElement('custom-root')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = LiteElement;
+    (class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __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 });
+        }
+        static styles = [
+            css `
+      :host {
+        display: contents;
+      }
+    `
+        ];
+        render() {
+            return html `
+      <custom-theme></custom-theme>
+      <slot></slot>
+    `;
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    });
+    return _classThis;
+})();
+
+export { CustomRoot };

package/exports/scroll-mixin.js

@@ -0,0 +1,36 @@
+const ScrollMixin = (Base) => class ScrollMixin extends Base {
+    set scrolling(value) {
+        if (value)
+            this.setAttribute('scrolling', '');
+        else
+            this.removeAttribute('scrolling');
+    }
+    get scrolling() {
+        return this.hasAttribute('scrolling');
+    }
+    scrollElement = this;
+    #onscroll = () => {
+        if (this.isScrolling)
+            clearTimeout(this.isScrolling);
+        else
+            document.dispatchEvent(new CustomEvent('custom-scroll', { detail: { scrolling: this.scrollTop !== 0 } }));
+        this.isScrolling = setTimeout(() => {
+            this.scrolling = this.scrollTop !== 0;
+            document.dispatchEvent(new CustomEvent('custom-scroll', { detail: { scrolling: this.scrolling } }));
+            this.isScrolling = undefined;
+        }, this.scrollTimeout);
+    };
+    async connectedCallback(options = { scrollElement: undefined }) {
+        super.connectedCallback && super.connectedCallback();
+        await this.updateComplete;
+        this.scrollElement = this.shadowRoot.querySelector(options.scrollElement) || this;
+        this.scrollTimeout = 100;
+        this.scrollElement.addEventListener('scroll', this.#onscroll);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback && super.disconnectedCallback();
+        this.scrollElement.removeEventListener('scroll', this.#onscroll);
+    }
+};
+
+export { ScrollMixin };

package/exports/section.js

@@ -0,0 +1,54 @@
+import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-d3ba6528.js';
+import { customElement, css, html, LiteElement } from '@vandeurenglenn/lite';
+import './section2.js';
+import './code.js';
+import './scroll-mixin.js';
+import './elevation.js';
+
+const replaceHtmlEntities = (str) => str.replace(/(\  <\/(?=[^<\/]*$))/g, '<');
+let DemoSection = (() => {
+    let _classDecorators = [customElement('demo-section')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = LiteElement;
+    (class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __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 });
+        }
+        async connectedCallback() {
+            const assignedElements = this.shadowRoot.querySelector('slot').assignedElements();
+            for (const element of assignedElements) {
+                const code = document.createElement('demo-code');
+                code.code = await replaceHtmlEntities(element.outerHTML);
+                element.after(code);
+            }
+        }
+        static styles = [
+            css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        box-sizing: border-box;
+      }
+    `
+        ];
+        render() {
+            return html `
+      <custom-section>
+        <slot></slot>
+      </custom-section>
+    `;
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    });
+    return _classThis;
+})();
+
+export { DemoSection };

package/exports/section2.js

@@ -0,0 +1,58 @@
+import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-d3ba6528.js';
+import { customElement, css, html, LiteElement } from '@vandeurenglenn/lite';
+import { ScrollMixin } from './scroll-mixin.js';
+import './elevation.js';
+
+// @ts-ignore
+let CustomSection = (() => {
+    let _classDecorators = [customElement('custom-section')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = ScrollMixin(LiteElement);
+    (class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __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 });
+        }
+        static styles = [
+            css `
+      :host {
+        display: flex;
+        justify-content: center;
+        align-items: baseline;
+        margin: 16px;
+        position: relative;
+        overflow-y: auto;
+      }
+      .container {
+        align-items: center;
+        box-sizing: border-box;
+        padding: 12px;
+        border-radius: var(--md-sys-shape-corner-extra-large);
+      }
+      .content {
+        max-width: 720px;
+      }
+    `
+        ];
+        render() {
+            return html `
+      <flex-column class="container">
+        <flex-column class="content">
+          <slot></slot>
+        </flex-column>
+      </flex-column>
+    `;
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    });
+    return _classThis;
+})();
+
+export { CustomSection };