godown 2.7.7 → 3.0.0-canary.1

package/{web-components/button → dev/components}/button.js

@@ -1,79 +1,84 @@
+var Button_1;
 import { __decorate } from "tslib";
-import { css, html, property } from "../../_deps.js";
-import { godown } from "../../decorators/godown.js";
-import { part } from "../../decorators/part.js";
-import { styles } from "../../decorators/styles.js";
-import { constructCSSObject } from "../../lib/css.js";
-import { htmlSlot, htmlStyle } from "../../lib/directives.js";
-import { GodownElement } from "../../proto/godown-element.js";
-import { colorValues, createScope } from "../../styles/global.js";
+import { godown } from "@godown/element/decorators/godown.js";
+import { part } from "@godown/element/decorators/part.js";
+import { styles } from "@godown/element/decorators/styles.js";
+import { htmlSlot } from "@godown/element/directives/html-slot.js";
+import { htmlStyle } from "@godown/element/directives/html-style.js";
+import { constructCSSObject } from "@godown/element/tools/css.js";
+import { css, html, unsafeCSS } from "lit";
+import { property } from "lit/decorators.js";
+import { cssGlobalVars, GlobalStyle, scopePrefix } from "../core/global-style.js";
 const protoName = "button";
-const cssScope = createScope(protoName);
-const whiteFont = colorValues.lightgray[0];
-const blackFont = colorValues.darkgray[6];
-const colors = constructCSSObject(["color", "background", "gradients"].map((k) => `--${cssScope}--${k}`), {
+const cssScope = scopePrefix(protoName);
+const whiteFont = cssGlobalVars._colors.lightgray[0];
+const blackFont = cssGlobalVars._colors.darkgray[6];
+const toVar = (s) => {
+    return unsafeCSS(`var(${s})`);
+};
+const colors = constructCSSObject(["color", "background", "gradients"].map((k) => `${cssScope}--${k}`), {
     black: [
         whiteFont, // color
-        colorValues.darkgray[7], // background
-        colorValues.darkgray[4], // gradients
+        cssGlobalVars._colors.darkgray[7], // background
+        cssGlobalVars._colors.darkgray[4], // gradients
     ],
     gray: [
         whiteFont, // color
-        colorValues.darkgray[1], // background
-        colorValues.lightgray[8], // gradients
+        cssGlobalVars._colors.darkgray[1], // background
+        cssGlobalVars._colors.lightgray[8], // gradients
     ],
     white: [
         blackFont, // color
-        colorValues.lightgray[3], // background
-        colorValues.lightgray[0], // gradients
+        cssGlobalVars._colors.lightgray[3], // background
+        cssGlobalVars._colors.lightgray[0], // gradients
     ],
     blue: [
         whiteFont, // color
-        colorValues.blue[6], // background
-        colorValues.blue[4], // gradients
+        cssGlobalVars._colors.blue[6], // background
+        cssGlobalVars._colors.blue[4], // gradients
     ],
     green: [
         whiteFont, // color
-        colorValues.green[6], // background
-        colorValues.green[4], // gradients
+        cssGlobalVars._colors.green[6], // background
+        cssGlobalVars._colors.green[4], // gradients
     ],
     red: [
         whiteFont, // color
-        colorValues.red[6], // background
-        colorValues.red[4], // gradients
+        cssGlobalVars._colors.red[6], // background
+        cssGlobalVars._colors.red[4], // gradients
     ],
     orange: [
         whiteFont, // color
-        colorValues.orange[6], // background
-        colorValues.orange[4], // gradients
+        cssGlobalVars._colors.orange[6], // background
+        cssGlobalVars._colors.orange[4], // gradients
     ],
     pink: [
         whiteFont, // color
-        colorValues.pink[6], // background
-        colorValues.pink[4], // gradients
+        cssGlobalVars._colors.pink[6], // background
+        cssGlobalVars._colors.pink[4], // gradients
     ],
     purple: [
         whiteFont, // color
-        colorValues.purple[6], // background
-        colorValues.purple[4], // gradients
+        cssGlobalVars._colors.purple[6], // background
+        cssGlobalVars._colors.purple[4], // gradients
     ],
     yellow: [
         blackFont, // color
-        colorValues.yellow[6], // background
-        colorValues.yellow[4], // gradients
+        cssGlobalVars._colors.yellow[6], // background
+        cssGlobalVars._colors.yellow[4], // gradients
     ],
     teal: [
         whiteFont, // color
-        colorValues.teal[6], // background
-        colorValues.teal[4], //gradients
+        cssGlobalVars._colors.teal[6], // background
+        cssGlobalVars._colors.teal[4], // gradients
     ],
-}, () => `:host`);
+}, () => `:host`, toVar);
 /**
  * {@linkcode Button}.
  *
- * Inspired by Next-ui.
+ * @category input
  */
-let Button = class Button extends GodownElement {
+let Button = Button_1 = class Button extends GlobalStyle {
     constructor() {
         super(...arguments);
         /**
@@ -83,13 +88,13 @@ let Button = class Button extends GodownElement {
     }
     render() {
         const color = this.nextColor();
-        return html `
-      <div part="root">
+        return [
+            html `<div part="root">
         <span part="modal-root"></span>
         <div part="slot">${this.text || htmlSlot()}</div>
-      </div>
-      ${htmlStyle(colors[color])}
-    `;
+      </div>`,
+            htmlStyle(Button_1.colors[color]),
+        ];
     }
     focus() {
         if (this.disabled) {
@@ -101,7 +106,7 @@ let Button = class Button extends GodownElement {
         this.active = false;
     }
     firstUpdated() {
-        this.addEvent(this, "click", this._handelClick, true);
+        this.events.add(this, "click", this._handelClick, true);
     }
     _handelClick(e) {
         if (this.disabled) {
@@ -129,6 +134,7 @@ let Button = class Button extends GodownElement {
         return this.color;
     }
 };
+Button.colors = colors;
 __decorate([
     property({ type: Boolean, reflect: true })
 ], Button.prototype, "disabled", void 0);
@@ -153,16 +159,15 @@ __decorate([
 __decorate([
     part("root")
 ], Button.prototype, "_root", void 0);
-Button = __decorate([
+Button = Button_1 = __decorate([
     godown(protoName),
-    styles([
-        css `
+    styles(css `
     :host(:not([disabled]):active) {
-      transform: scale(var(--${cssScope}--focus-scale));
+      transform: scale(var(${cssScope}--focus-scale));
     }
 
     :host([round]) {
-      --${cssScope}--padding-x: .75em;
+      ${cssScope}--padding-x: .75em;
       border-radius: calc(infinity * 1px);
     }
 
@@ -172,28 +177,26 @@ Button = __decorate([
     }
 
     :host([ghost]) {
-      --${cssScope}--modal-background: var(--${cssScope}--ghost-color);
-      border-color: var(--${cssScope}--ghost-color);
-      border-width: var(--${cssScope}--ghost-width);
-      color: var(--${cssScope}--ghost-color);
+      ${cssScope}--modal-background: var(${cssScope}--ghost-color);
+      box-shadow:inset 0px 0px 0px var(${cssScope}--ghost-width) var(${cssScope}--ghost-color);
+      color: var(${cssScope}--ghost-color);
       background: transparent;
-      border-style: solid;
     }
-  `,
-        css `
+  `, css `
     :host {
-      --${cssScope}--padding-x: .5em;
-      --${cssScope}--padding: .1em var(--${cssScope}--padding-x);
-      --${cssScope}--modal-animation-duration: 1s;
-      --${cssScope}--ghost-width: .08em;
-      --${cssScope}--focus-scale: .97;
-      --${cssScope}--deg: 45deg;
-      --${cssScope}--ghost-color:var(--${cssScope}--background);
-      color: var(--${cssScope}--color, inherit);
+      ${cssScope}--padding-x: .5em;
+      ${cssScope}--padding-y: .15em;
+      ${cssScope}--padding: var(${cssScope}--padding-y) var(${cssScope}--padding-x);
+      ${cssScope}--modal-animation-duration: 1s;
+      ${cssScope}--ghost-width: .08em;
+      ${cssScope}--focus-scale: .97;
+      ${cssScope}--deg: 45deg;
+      ${cssScope}--ghost-color:var(${cssScope}--background);
+      color: var(${cssScope}--color, inherit);
       background: linear-gradient(
-        var(--${cssScope}--deg),
-        var(--${cssScope}--background),
-        var(--${cssScope}--gradients, var(--${cssScope}--background))
+        var(${cssScope}--deg),
+        var(${cssScope}--background),
+        var(${cssScope}--gradients, var(${cssScope}--background))
       );
       border-radius: 0.3em;
       width: -moz-fit-content;
@@ -211,15 +214,14 @@ Button = __decorate([
       height: 100%;
       overflow: hidden;
       position: relative;
-      border-radius: inherit;
-      -webkit-user-select: none;
-              user-select: none;
       transition: none;
+      user-select: none;
+      border-radius: inherit;
       transition-duration: inherit;
     }
 
     [part="slot"] {
-      padding: var(--${cssScope}--padding);
+      padding: var(${cssScope}--padding);
     }
 
     i {
@@ -232,14 +234,14 @@ Button = __decorate([
       visibility: visible;
       pointer-events: none;
       transform-origin: 0 0;
-      background: var(--${cssScope}--modal-background, currentColor);
-      animation-duration: var(--${cssScope}--modal-animation-duration);
+      background: var(${cssScope}--modal-background, currentColor);
+      animation-duration: var(${cssScope}--modal-animation-duration);
     }
 
     @keyframes kf {
       0% {
         transform: scale(0) translate(-50%, -50%);
-        opacity: var(--${cssScope}--modal-opacity, 0.18);
+        opacity: var(${cssScope}--modal-opacity, 0.18);
       }
       80% {
         transform: scale(1) translate(-50%, -50%);
@@ -248,9 +250,7 @@ Button = __decorate([
         opacity: 0;
       }
     }
-  `,
-    ])
+  `)
 ], Button);
-export { Button };
 export default Button;
 //# sourceMappingURL=button.js.map

package/dev/components/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/components/button.ts"],"names":[],"mappings":"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"}

package/dev/components/card.d.ts

@@ -0,0 +1,20 @@
+import { GlobalStyle } from "../core/global-style.js";
+/**
+ * {@linkcode Card} renders a card.
+ *
+ * This may be similar to {@linkcode Layout},
+ * but it needs to be specified to enable header and footer.
+ *
+ * @slot - The main content of the card.
+ * @slot header - The header of the card.
+ * @slot footer - The footer of the card.
+ * @category display
+ */
+declare class Card extends GlobalStyle {
+    shadow: "none" | "always" | "hover";
+    footer: boolean;
+    header: boolean;
+    protected render(): (import("lit").TemplateResult<1> | import("lit").TemplateResult<1>[])[];
+}
+export default Card;
+//# sourceMappingURL=card.d.ts.map

package/dev/components/card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/components/card.ts"],"names":[],"mappings":"AAOA,OAAO,EAAiB,WAAW,EAAe,MAAM,yBAAyB,CAAC;AAOlF;;;;;;;;;;GAUG;AACH,cAyCM,IAAK,SAAQ,WAAW;IAE5B,MAAM,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAW;IAG9C,MAAM,UAAS;IAEf,MAAM,UAAS;IAEf,SAAS,CAAC,MAAM;CAQjB;AAED,eAAe,IAAI,CAAC"}

package/dev/components/card.js

@@ -0,0 +1,89 @@
+import { __decorate } from "tslib";
+import { godown } from "@godown/element/decorators/godown.js";
+import { styles } from "@godown/element/decorators/styles.js";
+import { conditionIf } from "@godown/element/directives/condition-if.js";
+import { htmlSlot } from "@godown/element/directives/html-slot.js";
+import { css, html } from "lit";
+import { property } from "lit/decorators.js";
+import { cssGlobalVars, GlobalStyle, scopePrefix } from "../core/global-style.js";
+const protoName = "card";
+const cssScope = scopePrefix(protoName);
+/**
+ * {@linkcode Card} renders a card.
+ *
+ * This may be similar to {@linkcode Layout},
+ * but it needs to be specified to enable header and footer.
+ *
+ * @slot - The main content of the card.
+ * @slot header - The header of the card.
+ * @slot footer - The footer of the card.
+ * @category display
+ */
+let Card = class Card extends GlobalStyle {
+    constructor() {
+        super(...arguments);
+        this.shadow = "hover";
+        this.footer = false;
+        this.header = false;
+    }
+    render() {
+        const hr = html `<hr part="divider">`;
+        return [
+            conditionIf(this.header, [htmlSlot("header"), hr]),
+            htmlSlot(),
+            conditionIf(this.footer, [hr, htmlSlot("footer")]),
+        ];
+    }
+};
+__decorate([
+    property({ reflect: true })
+], Card.prototype, "shadow", void 0);
+__decorate([
+    property({ type: Boolean })
+], Card.prototype, "footer", void 0);
+__decorate([
+    property({ type: Boolean })
+], Card.prototype, "header", void 0);
+Card = __decorate([
+    godown(protoName),
+    styles(css `
+    :host {
+      ${cssScope}--shadow-width: .0375em;
+      ${cssScope}--shadow-color: transparent;
+      ${cssScope}--background: var(${cssGlobalVars.background});
+      ${cssScope}--divider-width: 100%;
+      ${cssScope}--divider-height: var(${cssScope}--shadow-width);
+      ${cssScope}--divider-background: var(${cssGlobalVars.passive});
+      ${cssScope}--padding: .75em;
+      color: var(${cssGlobalVars.foreground});
+      background: var(${cssScope}--background);
+      display: block;
+      flex-shrink: 0;
+      position: relative;
+      overflow: hidden;
+      box-sizing: border-box;
+      border-radius: 0.25em;
+      transition: .15s ease-in-out;
+    }
+    
+    :host([shadow="hover"]:hover),
+    :host([shadow="always"]) {
+      ${cssScope}--shadow-color: var(${cssScope}--divider-background);
+      box-shadow: inset 0 0 0px var(${cssScope}--shadow-width) var(${cssScope}--shadow-color);
+    }
+
+   [part="divider"] {
+      margin: auto;
+      width: var(${cssScope}--divider-width);
+      height: var(${cssScope}--divider-height);
+      background: var(${cssScope}--divider-background);
+    }
+
+    slot {
+      display: block;
+      padding: var(${cssScope}--padding);
+    }
+  `)
+], Card);
+export default Card;
+//# sourceMappingURL=card.js.map

package/dev/components/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../src/components/card.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,4CAA4C,CAAC;AACzE,OAAO,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAC;AACnE,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAIlF,MAAM,SAAS,GAAG,MAAM,CAAC;AACzB,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;AAExC;;;;;;;;;;GAUG;AA0CH,IAAM,IAAI,GAAV,MAAM,IAAK,SAAQ,WAAW;IAA9B;;QAEE,WAAM,GAAgC,OAAO,CAAC;QAG9C,WAAM,GAAG,KAAK,CAAC;QAEf,WAAM,GAAG,KAAK,CAAC;IAUjB,CAAC;IARW,MAAM;QACd,MAAM,EAAE,GAAG,IAAI,CAAA,qBAAqB,CAAC;QACrC,OAAO;YACL,WAAW,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC,CAAC;YAClD,QAAQ,EAAE;YACV,WAAW,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC;SACnD,CAAC;IACJ,CAAC;CACF,CAAA;AAfC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCACkB;AAG9C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oCACb;AAEf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oCACb;AAPX,IAAI;IAzCT,MAAM,CAAC,SAAS,CAAC;IACjB,MAAM,CACL,GAAG,CAAA;;QAEG,QAAQ;QACR,QAAQ;QACR,QAAQ,qBAAqB,aAAa,CAAC,UAAU;QACrD,QAAQ;QACR,QAAQ,yBAAyB,QAAQ;QACzC,QAAQ,6BAA6B,aAAa,CAAC,OAAO;QAC1D,QAAQ;mBACG,aAAa,CAAC,UAAU;wBACnB,QAAQ;;;;;;;;;;;;QAYxB,QAAQ,uBAAuB,QAAQ;sCACT,QAAQ,uBAAuB,QAAQ;;;;;mBAK1D,QAAQ;oBACP,QAAQ;wBACJ,QAAQ;;;;;qBAKX,QAAQ;;GAE1B,CACF;GACK,IAAI,CAiBT;AAED,eAAe,IAAI,CAAC"}

package/dev/components/carousel.d.ts

@@ -0,0 +1,40 @@
+import { GlobalStyle } from "../core/global-style.js";
+/**
+ * {@linkcode Carousel} make the content display as a carousel.
+ *
+ * When this component is `firstUpdated`,
+ * clone the first and last element and make the matching element visible when switching index.
+ *
+ * Child elements should maintain the same size.
+ *
+ * If no width, it will be the width of the first element.
+ *
+ * @category display
+ */
+declare class Carousel extends GlobalStyle {
+    /**
+     * The index of the element is displayed for the first time.
+     */
+    index: number;
+    /**
+     * If autoChange > 0, the rotation will be automated.
+     */
+    autoChange: number;
+    /**
+     * Element width.
+     */
+    width: string;
+    _moveRoot: HTMLElement;
+    intervalID: number;
+    _cloneFirst: HTMLElement | undefined;
+    _cloneLast: HTMLElement | undefined;
+    protected render(): import("lit").TemplateResult<1>[];
+    protected firstUpdated(): Promise<void>;
+    disconnectedCallback(): void;
+    show(i: number): void;
+    next(): void;
+    prev(): void;
+    protected _doTranslateX(xValue: string, noTransition?: boolean): void;
+}
+export default Carousel;
+//# sourceMappingURL=carousel.d.ts.map

package/dev/components/carousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../src/components/carousel.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAItD;;;;;;;;;;;GAWG;AACH,cA6CM,QAAS,SAAQ,WAAW;IAChC;;OAEG;IAEH,KAAK,SAAK;IACV;;OAEG;IAEH,UAAU,SAAK;IACf;;OAEG;IAEH,KAAK,EAAE,MAAM,CAAC;IAGd,SAAS,EAAE,WAAW,CAAC;IAEvB,UAAU,EAAE,MAAM,CAAC;IAEnB,WAAW,EAAE,WAAW,GAAG,SAAS,CAAC;IAErC,UAAU,EAAE,WAAW,GAAG,SAAS,CAAC;IAEpC,SAAS,CAAC,MAAM;cAWA,YAAY;IAqB5B,oBAAoB;IAIpB,IAAI,CAAC,CAAC,EAAE,MAAM;IAId,IAAI;IASJ,IAAI;IASJ,SAAS,CAAC,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,OAAO;CAO/D;AAED,eAAe,QAAQ,CAAC"}

package/dev/components/carousel.js

@@ -0,0 +1,155 @@
+import { __decorate } from "tslib";
+import { godown } from "@godown/element/decorators/godown.js";
+import { part } from "@godown/element/decorators/part.js";
+import { styles } from "@godown/element/decorators/styles.js";
+import { htmlSlot } from "@godown/element/directives/html-slot.js";
+import { htmlStyle } from "@godown/element/directives/html-style.js";
+import iconChevronLeft from "@godown/f7-icon/icons/chevron-left.js";
+import iconChevronRight from "@godown/f7-icon/icons/chevron-right.js";
+import { css, html } from "lit";
+import { property } from "lit/decorators.js";
+import { GlobalStyle } from "../core/global-style.js";
+const protoName = "carousel";
+/**
+ * {@linkcode Carousel} make the content display as a carousel.
+ *
+ * When this component is `firstUpdated`,
+ * clone the first and last element and make the matching element visible when switching index.
+ *
+ * Child elements should maintain the same size.
+ *
+ * If no width, it will be the width of the first element.
+ *
+ * @category display
+ */
+let Carousel = class Carousel extends GlobalStyle {
+    constructor() {
+        super(...arguments);
+        /**
+         * The index of the element is displayed for the first time.
+         */
+        this.index = 0;
+        /**
+         * If autoChange > 0, the rotation will be automated.
+         */
+        this.autoChange = 0;
+    }
+    render() {
+        return [
+            html `<div part="root">
+        <i part="prev" @click="${this.prev}">${iconChevronLeft()}</i>
+        <div part="move-root" style="transform:${`translateX(-${this.index + 1}00%)`}">${htmlSlot()}</div>
+        <i part="next" @click="${this.next}">${iconChevronRight()}</i>
+    </div>`,
+            htmlStyle(`:host{width:${this.width};}`),
+        ];
+    }
+    async firstUpdated() {
+        await this.updateComplete;
+        if (this.children.length) {
+            this.width ||= `${this.firstElementChild.offsetWidth}px`;
+            this._cloneFirst?.remove();
+            this._cloneLast?.remove();
+            this._cloneLast = this.firstElementChild.cloneNode(true);
+            this._cloneFirst = this.lastElementChild.cloneNode(true);
+            this.appendChild(this._cloneLast);
+            this.insertBefore(this._cloneFirst, this.firstElementChild);
+            this.show(this.index);
+        }
+        if (this.autoChange) {
+            this.intervalID = window.setInterval(() => {
+                this.next();
+            }, this.autoChange);
+        }
+    }
+    disconnectedCallback() {
+        clearInterval(this.intervalID);
+    }
+    show(i) {
+        this.index = i;
+    }
+    next() {
+        if (this.index === this.childElementCount - 3) {
+            this._doTranslateX("0", true);
+            this.show(0);
+        }
+        else {
+            this.show(this.index + 1);
+        }
+    }
+    prev() {
+        if (this.index === 0) {
+            this._doTranslateX(`-${this.childElementCount - 1}00%`, true);
+            this.show(this.children.length - 3);
+        }
+        else {
+            this.show(this.index - 1);
+        }
+    }
+    _doTranslateX(xValue, noTransition) {
+        this._moveRoot.style.transform = `translateX(${xValue})`;
+        if (noTransition) {
+            this._moveRoot.style.transition = `none`;
+        }
+        this._moveRoot.getBoundingClientRect();
+    }
+};
+__decorate([
+    property({ type: Number })
+], Carousel.prototype, "index", void 0);
+__decorate([
+    property({ type: Number })
+], Carousel.prototype, "autoChange", void 0);
+__decorate([
+    property()
+], Carousel.prototype, "width", void 0);
+__decorate([
+    part("move-root")
+], Carousel.prototype, "_moveRoot", void 0);
+Carousel = __decorate([
+    godown(protoName),
+    styles(css `
+    :host {
+      display: block;
+      transition: .3s;
+    }
+
+    [part="root"] {
+      overflow: hidden;
+    }
+
+    [part="root"],
+    [part="move-root"] {
+      width: 100%;
+      display: flex;
+      position: relative;
+      transition: inherit;
+    }
+
+    [part="prev"],
+    [part="next"] {
+      height: 100%;
+      width: 1.5em;
+      z-index: 1;
+      position: absolute;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      user-select: none;
+    }
+
+    [part="prev"] {
+      left: 0;
+    }
+
+    [part="next"] {
+      right: 0;
+    }
+
+    slot::slotted(*) {
+      flex-shrink: 0 !important;
+    }
+  `)
+], Carousel);
+export default Carousel;
+//# sourceMappingURL=carousel.js.map

package/dev/components/carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.js","sourceRoot":"","sources":["../../src/components/carousel.ts"],"names":[],"mappings":"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"}

package/dev/components/details.d.ts

@@ -0,0 +1,20 @@
+import SuperOpenable from "../core/super-openable.js";
+/**
+ * {@linkcode Details} similar to <details>.
+ *
+ * @category display
+ */
+declare class Details extends SuperOpenable {
+    /**
+     * If it is true, the summary event scope will fill the element.
+     */
+    fill: boolean;
+    /**
+     * Summary text.
+     */
+    summary: string;
+    _dd: HTMLDataListElement;
+    protected render(): import("lit").TemplateResult<1>;
+}
+export default Details;
+//# sourceMappingURL=details.d.ts.map

package/dev/components/details.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"details.d.ts","sourceRoot":"","sources":["../../src/components/details.ts"],"names":[],"mappings":"AAQA,OAAO,aAAa,MAAM,2BAA2B,CAAC;AAMtD;;;;GAIG;AACH,cAgEM,OAAQ,SAAQ,aAAa;IACjC;;OAEG;IAEH,IAAI,UAAS;IACb;;OAEG;IAEH,OAAO,SAAM;IAGb,GAAG,EAAE,mBAAmB,CAAC;IAEzB,SAAS,CAAC,MAAM;CAWjB;AAED,eAAe,OAAO,CAAC"}