godown 2.3.0 → 2.4.0

package/layout/div-line.js

@@ -4,70 +4,79 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { css, define, html, property } from "../deps.js";
-import { htmlSlot, htmlStyle } from "../tmpl.js";
+import { createScope, css, define, html, property } from "../deps.js";
+import { htmlSlot } from "../tmpl.js";
 import LayoutSTD from "./std.js";
+const defineName = "div-line";
+const cssvarScope = createScope(defineName);
 let DivLine = class DivLine extends LayoutSTD {
     constructor() {
         super(...arguments);
-        this.pre = "auto";
-        this.suf = "auto";
         this.v = false;
-        this.b = "2.2px";
     }
     render() {
-        const hrStyle = `.before{height:${this.b};max-width:${this.pre}}.after{height:${this.b};max-width:${this.suf}}.v .before{width:${this.b};max-height:${this.pre}}.v .after{width:${this.b};max-height:${this.suf}}`;
-        return html `<div class="${this.v ? "v" : "h"}">
+        return html `<div class="${this.v ? "v" : ""}">
       <hr class="before" />
       ${htmlSlot()}
       <hr class="after" />
-      ${htmlStyle(hrStyle)}
     </div>`;
     }
 };
-DivLine.styles = css `
-    :host {
-      display: block;
-      color: currentColor;
-      background: none;
-    }
+DivLine.styles = [
+    css `
+      :host {
+        ${cssvarScope}--before-lenght: auto;
+        ${cssvarScope}--after-lenght: auto;
+        ${cssvarScope}--breadth: .125em;
+        display: block;
+        color: currentColor;
+        background: none;
+      }
 
-    div {
-      display: flex;
-      align-items: center;
-      border-radius: inherit;
-      width: 100%;
-      height: 100%;
-    }
+      div {
+        display: flex;
+        align-items: center;
+        border-radius: inherit;
+        width: 100%;
+        height: 100%;
+      }
 
-    hr {
-      border-radius: inherit;
-      margin: 0;
-      border: 0;
-      flex: 1;
-      background: currentColor;
-    }
+      hr {
+        border-radius: inherit;
+        margin: 0;
+        border: 0;
+        flex: 1;
+        background: currentColor;
+      }
 
-    .v {
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-    }
-  `;
-__decorate([
-    property()
-], DivLine.prototype, "pre", void 0);
-__decorate([
-    property()
-], DivLine.prototype, "suf", void 0);
+      .v {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+      }
+      .before {
+        height: var(${cssvarScope}--breadth);
+        max-width: var(${cssvarScope}--before-lenght);
+      }
+      .after {
+        height: var(${cssvarScope}--breadth);
+        max-width: var(${cssvarScope}--after-lenght);
+      }
+      .v .before {
+        width: var(${cssvarScope}--breadth);
+        max-height: var(${cssvarScope}--before-lenght);
+      }
+      .v .after {
+        width: var(${cssvarScope}--breadth);
+        max-height: var(${cssvarScope}--after-lenght);
+      }
+    `,
+];
 __decorate([
     property({ type: Boolean })
 ], DivLine.prototype, "v", void 0);
-__decorate([
-    property()
-], DivLine.prototype, "b", void 0);
 DivLine = __decorate([
-    define("div-line")
+    define(defineName)
 ], DivLine);
 export { DivLine };
 export default DivLine;

package/layout/div-line.js.map

@@ -1 +1 @@
-{"version":3,"file":"div-line.js","sourceRoot":"","sources":["../../src/layout/div-line.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,SAAS,MAAM,UAAU,CAAC;AAG1B,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,SAAS;IAA/B;;QA8BO,QAAG,GAAG,MAAM,CAAC;QACb,QAAG,GAAG,MAAM,CAAC;QACI,MAAC,GAAG,KAAK,CAAC;QAC3B,MAAC,GAAG,OAAO,CAAC;IAW1B,CAAC;IATC,MAAM;QACJ,MAAM,OAAO,GAAG,kBAAkB,IAAI,CAAC,CAAC,cAAc,IAAI,CAAC,GAAG,kBAAkB,IAAI,CAAC,CAAC,cAAc,IAAI,CAAC,GAAG,qBAAqB,IAAI,CAAC,CAAC,eAAe,IAAI,CAAC,GAAG,oBAAoB,IAAI,CAAC,CAAC,eAAe,IAAI,CAAC,GAAG,GAAG,CAAC;QACnN,OAAO,IAAI,CAAA,eAAe,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;;QAExC,QAAQ,EAAE;;QAEV,SAAS,CAAC,OAAO,CAAC;WACf,CAAC;IACV,CAAC;;AA1CM,cAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BlB,AA5BY,CA4BX;AACU;IAAX,QAAQ,EAAE;oCAAc;AACb;IAAX,QAAQ,EAAE;oCAAc;AACI;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kCAAW;AAC3B;IAAX,QAAQ,EAAE;kCAAa;AAjCb,OAAO;IADnB,MAAM,CAAC,UAAU,CAAC;GACN,OAAO,CA4CnB;;AAED,eAAe,OAAO,CAAC"}
+{"version":3,"file":"div-line.js","sourceRoot":"","sources":["../../src/layout/div-line.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAqB,MAAM,YAAY,CAAC;AACzD,OAAO,SAAS,MAAM,UAAU,CAAC;AAEjC,MAAM,UAAU,GAAG,UAAU,CAAC;AAE9B,MAAM,WAAW,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;AAGrC,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,SAAS;IAA/B;;QAmDwB,MAAC,GAAG,KAAK,CAAC;IASzC,CAAC;IAPW,MAAM;QACd,OAAO,IAAI,CAAA,eAAe,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;;QAEvC,QAAQ,EAAE;;WAEP,CAAC;IACV,CAAC;;AA1DM,cAAM,GAAG;IACd,GAAG,CAAA;;UAEG,WAAW;UACX,WAAW;UACX,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBA4BC,WAAW;yBACR,WAAW;;;sBAGd,WAAW;yBACR,WAAW;;;qBAGf,WAAW;0BACN,WAAW;;;qBAGhB,WAAW;0BACN,WAAW;;KAEhC;CACF,AAjDY,CAiDX;AAC2B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kCAAW;AAnD5B,OAAO;IADnB,MAAM,CAAC,UAAU,CAAC;GACN,OAAO,CA4DnB;;AAED,eAAe,OAAO,CAAC"}

package/layout/drag-box.d.ts

@@ -1,3 +1,4 @@
+import { type HTMLTemplate } from "../tmpl.js";
 import LayoutSTD from "./std.js";
 export declare class DragBox extends LayoutSTD {
     drag: boolean;
@@ -7,9 +8,9 @@ export declare class DragBox extends LayoutSTD {
     cy: number;
     x: string;
     y: string;
-    static styles: import("lit").CSSResult;
-    render(): import("lit").TemplateResult<1>;
-    firstUpdated(): void;
+    static styles: import("lit").CSSResult[];
+    protected render(): HTMLTemplate;
+    protected firstUpdated(): void;
     protected _handleDragStart(e: MouseEvent): void;
     protected _handleDragEnd(): void;
     protected _handleDrag(e: MouseEvent): void;

package/layout/drag-box.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drag-box.d.ts","sourceRoot":"","sources":["../../src/layout/drag-box.ts"],"names":[],"mappings":"AAEA,OAAO,SAAS,MAAM,UAAU,CAAC;AAEjC,qBACa,OAAQ,SAAQ,SAAS;IACpC,IAAI,EAAE,OAAO,CAAC;IACd,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACC,CAAC,SAAU;IACX,CAAC,SAAU;IACvB,MAAM,CAAC,MAAM,0BAKX;IAEF,MAAM;IAIN,YAAY;IAKZ,SAAS,CAAC,gBAAgB,CAAC,CAAC,EAAE,UAAU;IASxC,SAAS,CAAC,cAAc;IAKxB,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,UAAU;IAsBnC,KAAK;CAUN;AAED,eAAe,OAAO,CAAC;AACvB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
+{"version":3,"file":"drag-box.d.ts","sourceRoot":"","sources":["../../src/layout/drag-box.ts"],"names":[],"mappings":"AACA,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AACzD,OAAO,SAAS,MAAM,UAAU,CAAC;AAIjC,qBACa,OAAQ,SAAQ,SAAS;IACpC,IAAI,EAAE,OAAO,CAAC;IACd,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACC,CAAC,SAAU;IACX,CAAC,SAAU;IACvB,MAAM,CAAC,MAAM,4BAOX;IAEF,SAAS,CAAC,MAAM,IAAI,YAAY;IAIhC,SAAS,CAAC,YAAY;IAKtB,SAAS,CAAC,gBAAgB,CAAC,CAAC,EAAE,UAAU;IASxC,SAAS,CAAC,cAAc;IAKxB,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,UAAU;IAsBnC,KAAK;CAUN;AAED,eAAe,OAAO,CAAC;AACvB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/layout/drag-box.js

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { css, define, html, property } from "../deps.js";
 import { htmlSlot } from "../tmpl.js";
 import LayoutSTD from "./std.js";
+const defineName = "drag-box";
 let DragBox = class DragBox extends LayoutSTD {
     constructor() {
         super(...arguments);
@@ -68,12 +69,14 @@ let DragBox = class DragBox extends LayoutSTD {
         }
     }
 };
-DragBox.styles = css `
-    :host {
-      position: relative;
-      display: inline-flex;
-    }
-  `;
+DragBox.styles = [
+    css `
+      :host {
+        position: relative;
+        display: inline-flex;
+      }
+    `,
+];
 __decorate([
     property()
 ], DragBox.prototype, "x", void 0);
@@ -81,7 +84,7 @@ __decorate([
     property()
 ], DragBox.prototype, "y", void 0);
 DragBox = __decorate([
-    define("drag-box")
+    define(defineName)
 ], DragBox);
 export { DragBox };
 export default DragBox;

package/layout/drag-box.js.map

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

package/layout/flex-flow.d.ts

@@ -1,9 +1,10 @@
+import { type HTMLTemplate } from "../tmpl.js";
 import LayoutSTD from "./std.js";
 export declare class FlexFlow extends LayoutSTD {
     flexflow: string;
     m: string;
-    static styles: import("lit").CSSResult;
-    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+    protected render(): HTMLTemplate;
 }
 export default FlexFlow;
 declare global {

package/layout/flex-flow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"flex-flow.d.ts","sourceRoot":"","sources":["../../src/layout/flex-flow.ts"],"names":[],"mappings":"AAEA,OAAO,SAAS,MAAM,UAAU,CAAC;AAEjC,qBACa,QAAS,SAAQ,SAAS;IACzB,QAAQ,SAA8B;IACtC,CAAC,SAAW;IACxB,MAAM,CAAC,MAAM,0BAIX;IAEF,MAAM;CAUP;AAED,eAAe,QAAQ,CAAC;AACxB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
+{"version":3,"file":"flex-flow.d.ts","sourceRoot":"","sources":["../../src/layout/flex-flow.ts"],"names":[],"mappings":"AACA,OAAO,EAAuB,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AACpE,OAAO,SAAS,MAAM,UAAU,CAAC;AAIjC,qBACa,QAAS,SAAQ,SAAS;IACzB,QAAQ,SAA8B;IACtC,CAAC,SAAW;IACxB,MAAM,CAAC,MAAM,4BAMX;IAEF,SAAS,CAAC,MAAM,IAAI,YAAY;CAUjC;AAED,eAAe,QAAQ,CAAC;AACxB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/layout/flex-flow.js

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { css, define, html, property } from "../deps.js";
 import { htmlSlot, htmlStyle } from "../tmpl.js";
 import LayoutSTD from "./std.js";
+const defineName = "flex-flow";
 let FlexFlow = class FlexFlow extends LayoutSTD {
     constructor() {
         super(...arguments);
@@ -24,11 +25,13 @@ let FlexFlow = class FlexFlow extends LayoutSTD {
         return html `${htmlSlot()} ${htmlStyle(style)}`;
     }
 };
-FlexFlow.styles = css `
-    :host {
-      display: flex !important;
-    }
-  `;
+FlexFlow.styles = [
+    css `
+      :host {
+        display: flex !important;
+      }
+    `,
+];
 __decorate([
     property()
 ], FlexFlow.prototype, "flexflow", void 0);
@@ -36,7 +39,7 @@ __decorate([
     property()
 ], FlexFlow.prototype, "m", void 0);
 FlexFlow = __decorate([
-    define("flex-flow")
+    define(defineName)
 ], FlexFlow);
 export { FlexFlow };
 export default FlexFlow;

package/layout/flex-flow.js.map

@@ -1 +1 @@
-{"version":3,"file":"flex-flow.js","sourceRoot":"","sources":["../../src/layout/flex-flow.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,SAAS,MAAM,UAAU,CAAC;AAG1B,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,SAAS;IAAhC;;QACO,aAAQ,GAAG,0BAA0B,CAAC;QACtC,MAAC,GAAG,OAAO,CAAC;IAiB1B,CAAC;IAVC,MAAM;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAC5C,MAAM,aAAa,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC;QAC3C,MAAM,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,QAAQ,CAAC;QACzC,MAAM,cAAc,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,aAAa,IAAI,QAAQ,CAAC;QAChE,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,QAAQ,IAAI,QAAQ,CAAC;QACtD,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC,IAAI,OAAO,CAAC;QAC5B,MAAM,KAAK,GAAG,wBAAwB,aAAa,cAAc,QAAQ,uBAAuB,CAAC,0BAA0B,cAAc,cAAc,SAAS,GAAG,CAAC;QACpK,OAAO,IAAI,CAAA,GAAG,QAAQ,EAAE,IAAI,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC;IACjD,CAAC;;AAfM,eAAM,GAAG,GAAG,CAAA;;;;GAIlB,AAJY,CAIX;AANU;IAAX,QAAQ,EAAE;0CAAuC;AACtC;IAAX,QAAQ,EAAE;mCAAa;AAFb,QAAQ;IADpB,MAAM,CAAC,WAAW,CAAC;GACP,QAAQ,CAmBpB;;AAED,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"flex-flow.js","sourceRoot":"","sources":["../../src/layout/flex-flow.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAqB,MAAM,YAAY,CAAC;AACpE,OAAO,SAAS,MAAM,UAAU,CAAC;AAEjC,MAAM,UAAU,GAAG,WAAW,CAAC;AAGxB,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,SAAS;IAAhC;;QACO,aAAQ,GAAG,0BAA0B,CAAC;QACtC,MAAC,GAAG,OAAO,CAAC;IAmB1B,CAAC;IAVW,MAAM;QACd,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAC5C,MAAM,aAAa,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC;QAC3C,MAAM,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,QAAQ,CAAC;QACzC,MAAM,cAAc,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,aAAa,IAAI,QAAQ,CAAC;QAChE,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,QAAQ,IAAI,QAAQ,CAAC;QACtD,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC,IAAI,OAAO,CAAC;QAC5B,MAAM,KAAK,GAAG,wBAAwB,aAAa,cAAc,QAAQ,uBAAuB,CAAC,0BAA0B,cAAc,cAAc,SAAS,GAAG,CAAC;QACpK,OAAO,IAAI,CAAA,GAAG,QAAQ,EAAE,IAAI,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC;IACjD,CAAC;;AAjBM,eAAM,GAAG;IACd,GAAG,CAAA;;;;KAIF;CACF,AANY,CAMX;AARU;IAAX,QAAQ,EAAE;0CAAuC;AACtC;IAAX,QAAQ,EAAE;mCAAa;AAFb,QAAQ;IADpB,MAAM,CAAC,UAAU,CAAC;GACN,QAAQ,CAqBpB;;AAED,eAAe,QAAQ,CAAC"}

package/layout/index.d.ts

@@ -1,6 +1,6 @@
 export * from "./div-line.js";
-export * from "./flex-flow.js";
 export * from "./drag-box.js";
+export * from "./flex-flow.js";
 export * from "./nav-aside.js";
 export * from "./nav-layout.js";
 export * from "./skeleton-screen.js";

package/layout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC"}

package/layout/index.js

@@ -1,6 +1,6 @@
 export * from "./div-line.js";
-export * from "./flex-flow.js";
 export * from "./drag-box.js";
+export * from "./flex-flow.js";
 export * from "./nav-aside.js";
 export * from "./nav-layout.js";
 export * from "./skeleton-screen.js";

package/layout/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC"}

package/layout/nav-aside.d.ts

@@ -1,10 +1,11 @@
-import { CSSResultGroup } from "../deps.js";
+import { type CSSResultGroup } from "../deps.js";
+import { type HTMLTemplate } from "../tmpl.js";
 import LayoutSTD from "./std.js";
 export declare class NavAside extends LayoutSTD {
-    static styles: CSSResultGroup[];
+    static styles: CSSResultGroup;
     m: string;
     position: string;
-    render(): import("lit").TemplateResult<1>;
+    protected render(): HTMLTemplate;
 }
 export default NavAside;
 declare global {

package/layout/nav-aside.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"nav-aside.d.ts","sourceRoot":"","sources":["../../src/layout/nav-aside.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAkC,MAAM,YAAY,CAAC;AAEjF,OAAO,SAAS,MAAM,UAAU,CAAC;AAEjC,qBACa,QAAS,SAAQ,SAAS;IACrC,MAAM,CAAC,MAAM,mBAwBS;IACV,CAAC,SAAW;IACZ,QAAQ,SAAkB;IAEtC,MAAM;CASP;AAED,eAAe,QAAQ,CAAC;AACxB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
+{"version":3,"file":"nav-aside.d.ts","sourceRoot":"","sources":["../../src/layout/nav-aside.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,cAAc,EAAwC,MAAM,YAAY,CAAC;AACzG,OAAO,EAAuB,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AACpE,OAAO,SAAS,MAAM,UAAU,CAAC;AAKjC,qBACa,QAAS,SAAQ,SAAS;IACrC,MAAM,CAAC,MAAM,iBA0BO;IACR,CAAC,SAAW;IACZ,QAAQ,SAAkB;IAEtC,SAAS,CAAC,MAAM,IAAI,YAAY;CASjC;AAED,eAAe,QAAQ,CAAC;AACxB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/layout/nav-aside.js

@@ -4,9 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { css, cssvar, define, html, property } from "../deps.js";
+import { createScope, css, cssvarValues, define, html, property } from "../deps.js";
 import { htmlSlot, htmlStyle } from "../tmpl.js";
 import LayoutSTD from "./std.js";
+const defineName = "nav-aside";
+const cssvarScope = createScope(defineName);
 let NavAside = class NavAside extends LayoutSTD {
     constructor() {
         super(...arguments);
@@ -27,8 +29,10 @@ NavAside.styles = [
     LayoutSTD.styles,
     css `
       :host {
-        color: var(${cssvar}--nav-text);
-        background: var(${cssvar}--nav-background);
+        ${cssvarScope}--text: var(${cssvarValues.text});
+        ${cssvarScope}--background: var(${cssvarValues.main});
+        color: var(${cssvarScope}--text);
+        background: var(${cssvarScope}--background);
         top: 0;
         left: 0;
         bottom: 0;
@@ -55,7 +59,7 @@ __decorate([
     property()
 ], NavAside.prototype, "position", void 0);
 NavAside = __decorate([
-    define("nav-aside")
+    define(defineName)
 ], NavAside);
 export { NavAside };
 export default NavAside;

package/layout/nav-aside.js.map

@@ -1 +1 @@
-{"version":3,"file":"nav-aside.js","sourceRoot":"","sources":["../../src/layout/nav-aside.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAkB,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjF,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,SAAS,MAAM,UAAU,CAAC;AAG1B,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,SAAS;IAAhC;;QA0BO,MAAC,GAAG,OAAO,CAAC;QACZ,aAAQ,GAAG,cAAc,CAAC;IAWxC,CAAC;IATC,MAAM;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAC5C,MAAM,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,QAAQ,CAAC;QAClC,MAAM,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,OAAO,CAAC;QAClC,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC,IAAI,OAAO,CAAC;QAC5B,MAAM,KAAK,GAAG,kBAAkB,CAAC,iCAAiC,CAAC,oBAAoB,EAAE,mPAAmP,CAAC;QAC7U,OAAO,IAAI,CAAA,QAAQ,QAAQ,EAAE;QACzB,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC;IACzB,CAAC;;AApCM,eAAM,GAAG;IACd,SAAS,CAAC,MAAM;IAChB,GAAG,CAAA;;qBAEc,MAAM;0BACD,MAAM;;;;;;;;;;;;;;;;;;KAkB3B;CACkB,AAxBR,CAwBS;AACV;IAAX,QAAQ,EAAE;mCAAa;AACZ;IAAX,QAAQ,EAAE;0CAA2B;AA3B3B,QAAQ;IADpB,MAAM,CAAC,WAAW,CAAC;GACP,QAAQ,CAsCpB;;AAED,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"nav-aside.js","sourceRoot":"","sources":["../../src/layout/nav-aside.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,GAAG,EAAuB,YAAY,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACzG,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAqB,MAAM,YAAY,CAAC;AACpE,OAAO,SAAS,MAAM,UAAU,CAAC;AAEjC,MAAM,UAAU,GAAG,WAAW,CAAC;AAC/B,MAAM,WAAW,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;AAGrC,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,SAAS;IAAhC;;QA4BO,MAAC,GAAG,OAAO,CAAC;QACZ,aAAQ,GAAG,cAAc,CAAC;IAWxC,CAAC;IATW,MAAM;QACd,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAC5C,MAAM,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,QAAQ,CAAC;QAClC,MAAM,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,OAAO,CAAC;QAClC,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC,IAAI,OAAO,CAAC;QAC5B,MAAM,KAAK,GAAG,kBAAkB,CAAC,iCAAiC,CAAC,oBAAoB,EAAE,mPAAmP,CAAC;QAC7U,OAAO,IAAI,CAAA,QAAQ,QAAQ,EAAE;QACzB,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC;IACzB,CAAC;;AAtCM,eAAM,GAAG;IACd,SAAS,CAAC,MAAM;IAChB,GAAG,CAAA;;UAEG,WAAW,eAAe,YAAY,CAAC,IAAI;UAC3C,WAAW,qBAAqB,YAAY,CAAC,IAAI;qBACtC,WAAW;0BACN,WAAW;;;;;;;;;;;;;;;;;;KAkBhC;CACgB,AA1BN,CA0BO;AACR;IAAX,QAAQ,EAAE;mCAAa;AACZ;IAAX,QAAQ,EAAE;0CAA2B;AA7B3B,QAAQ;IADpB,MAAM,CAAC,UAAU,CAAC;GACN,QAAQ,CAwCpB;;AAED,eAAe,QAAQ,CAAC"}

package/layout/nav-layout.d.ts

@@ -1,11 +1,12 @@
-import { CSSResultGroup } from "../deps.js";
+import { type CSSResultGroup } from "../deps.js";
+import { type HTMLTemplate } from "../tmpl.js";
 import LayoutSTD from "./std.js";
 export declare class NavLayout extends LayoutSTD {
-    static styles: CSSResultGroup[];
+    static styles: CSSResultGroup;
     host: string;
     subhead: string;
     set: 0 | 1 | 2;
-    render(): import("lit").TemplateResult<1>;
+    protected render(): HTMLTemplate;
     private renderNav;
 }
 export default NavLayout;

package/layout/nav-layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"nav-layout.d.ts","sourceRoot":"","sources":["../../src/layout/nav-layout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAkC,MAAM,YAAY,CAAC;AAEjF,OAAO,SAAS,MAAM,UAAU,CAAC;AAEjC,qBACa,SAAU,SAAQ,SAAS;IACtC,MAAM,CAAC,MAAM,mBA+ES;IACV,IAAI,SAAM;IACV,OAAO,SAAM;IACG,GAAG,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAK;IAE/C,MAAM;IAMN,OAAO,CAAC,SAAS;CAgBlB;AAED,eAAe,SAAS,CAAC;AACzB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}
+{"version":3,"file":"nav-layout.d.ts","sourceRoot":"","sources":["../../src/layout/nav-layout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,cAAc,EAAwC,MAAM,YAAY,CAAC;AACzG,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AACzD,OAAO,SAAS,MAAM,UAAU,CAAC;AAKjC,qBACa,SAAU,SAAQ,SAAS;IACtC,MAAM,CAAC,MAAM,iBAkFO;IACR,IAAI,SAAM;IACV,OAAO,SAAM;IACG,GAAG,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAK;IAE/C,SAAS,CAAC,MAAM,IAAI,YAAY;IAMhC,OAAO,CAAC,SAAS;CAgBlB;AAED,eAAe,SAAS,CAAC;AACzB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/layout/nav-layout.js

@@ -4,9 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { css, cssvar, define, html, property } from "../deps.js";
+import { createScope, css, cssvarValues, define, html, property } from "../deps.js";
 import { htmlSlot } from "../tmpl.js";
 import LayoutSTD from "./std.js";
+const defineName = "nav-layout";
+const cssvarScope = createScope(defineName);
 let NavLayout = class NavLayout extends LayoutSTD {
     constructor() {
         super(...arguments);
@@ -40,8 +42,11 @@ NavLayout.styles = [
     LayoutSTD.styles,
     css `
       :host {
-        ${cssvar}--nav-height: 2.4em;
-        ${cssvar}--nav-h1-size: 1.2em;
+        ${cssvarScope}--text: var(${cssvarValues.text});
+        ${cssvarScope}--background: var(${cssvarValues.main});
+        ${cssvarScope}--super-background:var(${cssvarValues.input}--true);
+        ${cssvarScope}--height: 2.4em;
+        ${cssvarScope}--h1-size: calc(var(${cssvarScope}--height) / 2);
         width: 100%;
         height: 100%;
         display: flex;
@@ -52,13 +57,13 @@ NavLayout.styles = [
       }
 
       nav {
-        color: var(${cssvar}--nav-text);
-        background: var(${cssvar}--nav-background);
+        color: var(${cssvarScope}--text);
+        background: var(${cssvarScope}--background);
       }
 
       nav {
-        height: var(${cssvar}--nav-height);
-        min-height: var(${cssvar}--nav-height);
+        height: var(${cssvarScope}--height);
+        min-height: var(${cssvarScope}--height);
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -77,7 +82,7 @@ NavLayout.styles = [
 
       h1 {
         font-weight: normal;
-        font-size: var(${cssvar}--nav-h1-size);
+        font-size: var(${cssvarScope}--h1-size);
         margin: 0;
         display: flex;
         align-items: center;
@@ -126,7 +131,7 @@ __decorate([
     property({ type: Number })
 ], NavLayout.prototype, "set", void 0);
 NavLayout = __decorate([
-    define("nav-layout")
+    define(defineName)
 ], NavLayout);
 export { NavLayout };
 export default NavLayout;

package/layout/nav-layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"nav-layout.js","sourceRoot":"","sources":["../../src/layout/nav-layout.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAkB,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjF,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,SAAS,MAAM,UAAU,CAAC;AAG1B,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,SAAS;IAAjC;;QAiFO,SAAI,GAAG,EAAE,CAAC;QACV,YAAO,GAAG,EAAE,CAAC;QACG,QAAG,GAAc,CAAC,CAAC;IAwBjD,CAAC;IAtBC,MAAM;QACJ,OAAO,IAAI,CAAA,IAAI,QAAQ,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,SAAS,EAAE;cAC3C,QAAQ,EAAE;QAChB,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;IAC3B,CAAC;IAEO,SAAS;QACf,IAAI,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,EAAE;YACpC,OAAO,QAAQ,CAAC,KAAK,CAAC,CAAC;SACxB;QACD,OAAO,IAAI,CAAA;;;sBAGO,IAAI,CAAC,IAAI,OAAO,IAAI,CAAC,OAAO;YAC1C,IAAI,CAAA;iBACK,IAAI,CAAC,OAAO,QAAQ;;;;;WAK1B,CAAC;IACV,CAAC;;AAzGM,gBAAM,GAAG;IACd,SAAS,CAAC,MAAM;IAChB,GAAG,CAAA;;UAEG,MAAM;UACN,MAAM;;;;;;;;;;;qBAWK,MAAM;0BACD,MAAM;;;;sBAIV,MAAM;0BACF,MAAM;;;;;;;;;;;;;;;;;;;yBAmBP,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqC1B;CACkB,AA/ER,CA+ES;AACV;IAAX,QAAQ,EAAE;uCAAW;AACV;IAAX,QAAQ,EAAE;0CAAc;AACG;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAoB;AAnFpC,SAAS;IADrB,MAAM,CAAC,YAAY,CAAC;GACR,SAAS,CA2GrB;;AAED,eAAe,SAAS,CAAC"}
+{"version":3,"file":"nav-layout.js","sourceRoot":"","sources":["../../src/layout/nav-layout.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,GAAG,EAAuB,YAAY,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACzG,OAAO,EAAE,QAAQ,EAAqB,MAAM,YAAY,CAAC;AACzD,OAAO,SAAS,MAAM,UAAU,CAAC;AAEjC,MAAM,UAAU,GAAG,YAAY,CAAC;AAChC,MAAM,WAAW,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;AAGrC,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,SAAS;IAAjC;;QAoFO,SAAI,GAAG,EAAE,CAAC;QACV,YAAO,GAAG,EAAE,CAAC;QACG,QAAG,GAAc,CAAC,CAAC;IAwBjD,CAAC;IAtBW,MAAM;QACd,OAAO,IAAI,CAAA,IAAI,QAAQ,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,SAAS,EAAE;cAC3C,QAAQ,EAAE;QAChB,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;IAC3B,CAAC;IAEO,SAAS;QACf,IAAI,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,EAAE;YACpC,OAAO,QAAQ,CAAC,KAAK,CAAC,CAAC;SACxB;QACD,OAAO,IAAI,CAAA;;;sBAGO,IAAI,CAAC,IAAI,OAAO,IAAI,CAAC,OAAO;YAC1C,IAAI,CAAA;iBACK,IAAI,CAAC,OAAO,QAAQ;;;;;WAK1B,CAAC;IACV,CAAC;;AA5GM,gBAAM,GAAG;IACd,SAAS,CAAC,MAAM;IAChB,GAAG,CAAA;;UAEG,WAAW,eAAe,YAAY,CAAC,IAAI;UAC3C,WAAW,qBAAqB,YAAY,CAAC,IAAI;UACjD,WAAW,0BAA0B,YAAY,CAAC,KAAK;UACvD,WAAW;UACX,WAAW,uBAAuB,WAAW;;;;;;;;;;;qBAWlC,WAAW;0BACN,WAAW;;;;sBAIf,WAAW;0BACP,WAAW;;;;;;;;;;;;;;;;;;;yBAmBZ,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqC/B;CACgB,AAlFN,CAkFO;AACR;IAAX,QAAQ,EAAE;uCAAW;AACV;IAAX,QAAQ,EAAE;0CAAc;AACG;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAoB;AAtFpC,SAAS;IADrB,MAAM,CAAC,UAAU,CAAC;GACN,SAAS,CA8GrB;;AAED,eAAe,SAAS,CAAC"}

package/layout/skeleton-screen.d.ts

@@ -1,10 +1,11 @@
-import { CSSResultGroup } from "../deps.js";
+import { type CSSResultGroup } from "../deps.js";
+import { type HTMLTemplate } from "../tmpl.js";
 import LayoutSTD from "./std.js";
 export declare class SkeletonScreen extends LayoutSTD {
     type: "text" | "image";
     loading: boolean;
-    static styles: CSSResultGroup[];
-    render(): import("lit").TemplateResult<1>;
+    static styles: CSSResultGroup;
+    protected render(): HTMLTemplate;
     private renderIcon;
 }
 export default SkeletonScreen;

package/layout/skeleton-screen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton-screen.d.ts","sourceRoot":"","sources":["../../src/layout/skeleton-screen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAyC,MAAM,YAAY,CAAC;AAExF,OAAO,SAAS,MAAM,UAAU,CAAC;AAEjC,qBACa,cAAe,SAAQ,SAAS;IAC/B,IAAI,EAAE,MAAM,GAAG,OAAO,CAAU;IACnC,OAAO,UAAQ;IACxB,MAAM,CAAC,MAAM,mBA4DS;IAEtB,MAAM;IAON,OAAO,CAAC,UAAU;CAQnB;AAED,eAAe,cAAc,CAAC;AAE9B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,cAAc,CAAC;KACnC;CACF"}
+{"version":3,"file":"skeleton-screen.d.ts","sourceRoot":"","sources":["../../src/layout/skeleton-screen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,cAAc,EAA+C,MAAM,YAAY,CAAC;AAChH,OAAO,EAAY,KAAK,YAAY,EAAY,MAAM,YAAY,CAAC;AACnE,OAAO,SAAS,MAAM,UAAU,CAAC;AAKjC,qBACa,cAAe,SAAQ,SAAS;IAC/B,IAAI,EAAE,MAAM,GAAG,OAAO,CAAU;IACnC,OAAO,UAAQ;IACxB,MAAM,CAAC,MAAM,iBA2DO;IAEpB,SAAS,CAAC,MAAM,IAAI,YAAY;IAOhC,OAAO,CAAC,UAAU;CAQnB;AAED,eAAe,cAAc,CAAC;AAE9B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,cAAc,CAAC;KACnC;CACF"}

package/layout/skeleton-screen.js

@@ -4,9 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { css, cssvar, define, html, property, state } from "../deps.js";
+import { createScope, css, cssvarValues, define, html, property, state } from "../deps.js";
 import { htmlSlot, svgImage } from "../tmpl.js";
 import LayoutSTD from "./std.js";
+const defineName = "skeleton-screen";
+const cssvarScope = createScope(defineName);
 let SkeletonScreen = class SkeletonScreen extends LayoutSTD {
     constructor() {
         super(...arguments);
@@ -34,28 +36,27 @@ SkeletonScreen.styles = [
       :host {
         display: block;
         min-height: 1.5em;
-        border-radius: 0.2em;
         overflow: hidden;
-        ${cssvar}--skeleton-from: rgb(255 255 255 / 9%);
-        ${cssvar}--skeleton-to: rgb(255 255 255 / 18%);
-        ${cssvar}--skeleton-deg: 94deg;
-        ${cssvar}--skeleton-color: rgb(185 185 185);
-        ${cssvar}--skeleton-background: rgb(24 24 24);
-        ${cssvar}--skeleton-duration: 1.5s;
-        ${cssvar}--skeleton-icon-width: 5em;
-        ${cssvar}--skeleton-icon-height: 5em;
-        ${cssvar}--skeleton-icon-margin: .75em;
-        color: var(${cssvar}--skeleton-color);
-        background: var(${cssvar}--skeleton-background);
+        ${cssvarScope}--from: rgb(var(${cssvarValues.textRGB}) / 7.5%);
+        ${cssvarScope}--to: rgb(var(${cssvarValues.textRGB}) / 20%);
+        ${cssvarScope}--deg: 94deg;
+        ${cssvarScope}--color: rgb(var(${cssvarValues.textRGB}) / 50%);
+        ${cssvarScope}--background: var(${cssvarValues.main});
+        ${cssvarScope}--duration: 1.5s;
+        ${cssvarScope}--icon-width: 5em;
+        ${cssvarScope}--icon-height: 5em;
+        ${cssvarScope}--icon-margin: .75em;
+        color: var(${cssvarScope}--color);
+        background: var(${cssvarScope}--background);
       }
 
       p {
         height: 100%;
         min-height: inherit;
-        background-image: linear-gradient(var(${cssvar}--skeleton-deg), var(${cssvar}--skeleton-from) 36%, var(${cssvar}--skeleton-to) 50%, var(${cssvar}--skeleton-from) 64%);
+        background-image: linear-gradient(var(${cssvarScope}--deg), var(${cssvarScope}--from) 36%, var(${cssvarScope}--to) 50%, var(${cssvarScope}--from) 64%);
         background-color: transparent;
         background-size: 200% 100%;
-        animation: var(${cssvar}--skeleton-duration) ease-in-out 0s infinite normal none running kf;
+        animation: var(${cssvarScope}--duration) ease-in-out 0s infinite normal none running kf;
       }
 
       @keyframes kf {
@@ -68,17 +69,17 @@ SkeletonScreen.styles = [
       }
 
       path {
-        fill: var(${cssvar}--skeleton-color);
+        fill: var(${cssvarScope}--color);
       }
 
       svg,
       slot {
-        width: var(${cssvar}--skeleton-icon-width);
-        height: var(${cssvar}--skeleton-icon-height);
+        width: var(${cssvarScope}--icon-width);
+        height: var(${cssvarScope}--icon-height);
       }
 
       svg {
-        margin: var(${cssvar}--skeleton-icon-margin);
+        margin: var(${cssvarScope}--icon-margin);
       }
 
       p,
@@ -96,7 +97,7 @@ __decorate([
     state()
 ], SkeletonScreen.prototype, "loading", void 0);
 SkeletonScreen = __decorate([
-    define("skeleton-screen")
+    define(defineName)
 ], SkeletonScreen);
 export { SkeletonScreen };
 export default SkeletonScreen;

package/layout/skeleton-screen.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton-screen.js","sourceRoot":"","sources":["../../src/layout/skeleton-screen.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAkB,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACxF,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,SAAS,MAAM,UAAU,CAAC;AAG1B,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,SAAS;IAAtC;;QACO,SAAI,GAAqB,MAAM,CAAC;QACnC,YAAO,GAAG,IAAI,CAAC;IA8E1B,CAAC;IAfC,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,OAAO,IAAI,CAAA,MAAM,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC;SAC1C;QACD,OAAO,QAAQ,EAAE,CAAC;IACpB,CAAC;IAEO,UAAU;QAChB,QAAQ,IAAI,CAAC,IAAI,EAAE;YACjB,KAAK,MAAM;gBACT,OAAO,QAAQ,CAAC,MAAM,CAAC,CAAC;YAC1B,KAAK,OAAO;gBACV,OAAO,QAAQ,EAAE,CAAC;SACrB;IACH,CAAC;;AA5EM,qBAAM,GAAG;IACd,SAAS,CAAC,MAAM;IAChB,GAAG,CAAA;;;;;;UAMG,MAAM;UACN,MAAM;UACN,MAAM;UACN,MAAM;UACN,MAAM;UACN,MAAM;UACN,MAAM;UACN,MAAM;UACN,MAAM;qBACK,MAAM;0BACD,MAAM;;;;;;gDAMgB,MAAM,wBAAwB,MAAM,6BAA6B,MAAM,2BAA2B,MAAM;;;yBAG/H,MAAM;;;;;;;;;;;;;oBAaX,MAAM;;;;;qBAKL,MAAM;sBACL,MAAM;;;;sBAIN,MAAM;;;;;;;;;KASvB;CACkB,AA5DR,CA4DS;AA9DV;IAAX,QAAQ,EAAE;4CAAiC;AACnC;IAAR,KAAK,EAAE;+CAAgB;AAFb,cAAc;IAD1B,MAAM,CAAC,iBAAiB,CAAC;GACb,cAAc,CAgF1B;;AAED,eAAe,cAAc,CAAC"}
+{"version":3,"file":"skeleton-screen.js","sourceRoot":"","sources":["../../src/layout/skeleton-screen.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,GAAG,EAAuB,YAAY,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAChH,OAAO,EAAE,QAAQ,EAAqB,QAAQ,EAAE,MAAM,YAAY,CAAC;AACnE,OAAO,SAAS,MAAM,UAAU,CAAC;AAEjC,MAAM,UAAU,GAAG,iBAAiB,CAAC;AACrC,MAAM,WAAW,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;AAGrC,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,SAAS;IAAtC;;QACO,SAAI,GAAqB,MAAM,CAAC;QACnC,YAAO,GAAG,IAAI,CAAC;IA6E1B,CAAC;IAfW,MAAM;QACd,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,OAAO,IAAI,CAAA,MAAM,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC;SAC1C;QACD,OAAO,QAAQ,EAAE,CAAC;IACpB,CAAC;IAEO,UAAU;QAChB,QAAQ,IAAI,CAAC,IAAI,EAAE;YACjB,KAAK,MAAM;gBACT,OAAO,QAAQ,CAAC,MAAM,CAAC,CAAC;YAC1B,KAAK,OAAO;gBACV,OAAO,QAAQ,EAAE,CAAC;SACrB;IACH,CAAC;;AA3EM,qBAAM,GAAG;IACd,SAAS,CAAC,MAAM;IAChB,GAAG,CAAA;;;;;UAKG,WAAW,mBAAmB,YAAY,CAAC,OAAO;UAClD,WAAW,iBAAiB,YAAY,CAAC,OAAO;UAChD,WAAW;UACX,WAAW,oBAAoB,YAAY,CAAC,OAAO;UACnD,WAAW,qBAAqB,YAAY,CAAC,IAAI;UACjD,WAAW;UACX,WAAW;UACX,WAAW;UACX,WAAW;qBACA,WAAW;0BACN,WAAW;;;;;;gDAMW,WAAW,eAAe,WAAW,oBAAoB,WAAW,kBAAkB,WAAW;;;yBAGxH,WAAW;;;;;;;;;;;;;oBAahB,WAAW;;;;;qBAKV,WAAW;sBACV,WAAW;;;;sBAIX,WAAW;;;;;;;;;KAS5B;CACgB,AA3DN,CA2DO;AA7DR;IAAX,QAAQ,EAAE;4CAAiC;AACnC;IAAR,KAAK,EAAE;+CAAgB;AAFb,cAAc;IAD1B,MAAM,CAAC,UAAU,CAAC;GACN,cAAc,CA+E1B;;AAED,eAAe,cAAc,CAAC"}

package/layout/std.d.ts

@@ -1,5 +1,4 @@
-import { CSSResultGroup, GodownElement } from "../deps.js";
+import { GodownElement } from "../deps.js";
 export default class LayoutSTD extends GodownElement {
-    static styles: CSSResultGroup;
 }
 //# sourceMappingURL=std.d.ts.map

package/layout/std.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"std.d.ts","sourceRoot":"","sources":["../../src/layout/std.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAU,aAAa,EAAE,MAAM,YAAY,CAAC;AAExE,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,aAAa;IAClD,MAAM,CAAC,MAAM,iBASO;CACrB"}
+{"version":3,"file":"std.d.ts","sourceRoot":"","sources":["../../src/layout/std.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,aAAa;CAAG"}

package/layout/std.js

@@ -1,15 +1,4 @@
-import { css, cssvar, GodownElement } from "../deps.js";
-class LayoutSTD extends GodownElement {
+import { GodownElement } from "../deps.js";
+export default class LayoutSTD extends GodownElement {
 }
-LayoutSTD.styles = [
-    GodownElement.styles,
-    css `
-      :host {
-        ${cssvar}--nav-text: rgb(240 240 240);
-        ${cssvar}--nav-background: rgb(12 12 12);
-        ${cssvar}--nav-super-background: rgb(16 136 138);
-      }
-    `,
-];
-export default LayoutSTD;
 //# sourceMappingURL=std.js.map

package/layout/std.js.map

@@ -1 +1 @@
-{"version":3,"file":"std.js","sourceRoot":"","sources":["../../src/layout/std.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAkB,MAAM,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAExE,MAAqB,SAAU,SAAQ,aAAa;;AAC3C,gBAAM,GAAG;IACd,aAAa,CAAC,MAAM;IACpB,GAAG,CAAA;;UAEG,MAAM;UACN,MAAM;UACN,MAAM;;KAEX;CACgB,CAAC;eAVD,SAAS"}
+{"version":3,"file":"std.js","sourceRoot":"","sources":["../../src/layout/std.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,aAAa;CAAG"}