godown 3.8.3 → 3.10.0

package/router.d.ts

@@ -1,9 +1,2 @@
-import Router from "./components/router.js";
-export default Router;
-export * from "./components/router.js";
-declare global {
-    interface HTMLElementTagNameMap {
-        "godown-router": Router;
-    }
-}
+export { default } from "./web-components/router/definition.js";
 //# sourceMappingURL=router.d.ts.map

package/router.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["src/router.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAI5C,eAAe,MAAM,CAAC;AAEtB,cAAc,wBAAwB,CAAC;AAEvC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,MAAM,CAAC;KACzB;CACF"}
+{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["src/router.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,uCAAuC,CAAC"}

package/router.js

@@ -1,2 +1,2 @@
-import o from"./components/router.js";export{Router}from"./components/router.js";o.define();export{o as default};
+import"./web-components/router/definition.js";export{default}from"./web-components/router/component.js";
 //# sourceMappingURL=router.js.map

package/router.js.map

@@ -1 +1 @@
-{"version":3,"file":"router.js","sources":["src/router.ts"],"sourcesContent":null,"names":["Router","define"],"mappings":"iFAEAA,EAAOC"}
+{"version":3,"file":"router.js","sources":[],"sourcesContent":null,"names":[],"mappings":""}

package/select.d.ts

@@ -1,9 +1,2 @@
-import Select from "./components/select.js";
-export default Select;
-export * from "./components/select.js";
-declare global {
-    interface HTMLElementTagNameMap {
-        "godown-select": Select;
-    }
-}
+export { default } from "./web-components/select/definition.js";
 //# sourceMappingURL=select.d.ts.map

package/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["src/select.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAI5C,eAAe,MAAM,CAAC;AAEtB,cAAc,wBAAwB,CAAC;AAEvC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,MAAM,CAAC;KACzB;CACF"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["src/select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,uCAAuC,CAAC"}

package/select.js

@@ -1,2 +1,2 @@
-import e from"./components/select.js";export{Select}from"./components/select.js";e.define();export{e as default};
+import"./web-components/select/definition.js";export{default}from"./web-components/select/component.js";
 //# sourceMappingURL=select.js.map

package/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","sources":["src/select.ts"],"sourcesContent":null,"names":["Select","define"],"mappings":"iFAEAA,EAAOC"}
+{"version":3,"file":"select.js","sources":[],"sourcesContent":null,"names":[],"mappings":""}

package/skeleton.d.ts

@@ -1,9 +1,2 @@
-import Skeleton from "./components/skeleton.js";
-export default Skeleton;
-export * from "./components/skeleton.js";
-declare global {
-    interface HTMLElementTagNameMap {
-        "godown-skeleton": Skeleton;
-    }
-}
+export { default } from "./web-components/skeleton/definition.js";
 //# sourceMappingURL=skeleton.d.ts.map

package/skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["src/skeleton.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,0BAA0B,CAAC;AAIhD,eAAe,QAAQ,CAAC;AAExB,cAAc,0BAA0B,CAAC;AAEzC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,QAAQ,CAAC;KAC7B;CACF"}
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["src/skeleton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,yCAAyC,CAAC"}

package/skeleton.js

@@ -1,2 +1,2 @@
-import e from"./components/skeleton.js";export{Skeleton}from"./components/skeleton.js";e.define();export{e as default};
+import"./web-components/skeleton/definition.js";export{default}from"./web-components/skeleton/component.js";
 //# sourceMappingURL=skeleton.js.map

package/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","sources":["src/skeleton.ts"],"sourcesContent":null,"names":["Skeleton","define"],"mappings":"uFAEAA,EAASC"}
+{"version":3,"file":"skeleton.js","sources":[],"sourcesContent":null,"names":[],"mappings":""}

package/split.d.ts

@@ -1,9 +1,2 @@
-import Split from "./components/split.js";
-export default Split;
-export * from "./components/split.js";
-declare global {
-    interface HTMLElementTagNameMap {
-        "godown-split": Split;
-    }
-}
+export { default } from "./web-components/split/definition.js";
 //# sourceMappingURL=split.d.ts.map

package/split.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"split.d.ts","sourceRoot":"","sources":["src/split.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,uBAAuB,CAAC;AAI1C,eAAe,KAAK,CAAC;AAErB,cAAc,uBAAuB,CAAC;AAEtC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,KAAK,CAAC;KACvB;CACF"}
+{"version":3,"file":"split.d.ts","sourceRoot":"","sources":["src/split.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sCAAsC,CAAC"}

package/split.js

@@ -1,2 +1,2 @@
-import o from"./components/split.js";export{Split}from"./components/split.js";o.define();export{o as default};
+import"./web-components/split/definition.js";export{default}from"./web-components/split/component.js";
 //# sourceMappingURL=split.js.map

package/split.js.map

@@ -1 +1 @@
-{"version":3,"file":"split.js","sources":["src/split.ts"],"sourcesContent":null,"names":["Split","define"],"mappings":"8EAEAA,EAAMC"}
+{"version":3,"file":"split.js","sources":[],"sourcesContent":null,"names":[],"mappings":""}

package/src/alert.ts

@@ -1,13 +1 @@
-import Alert from "./components/alert.js";
-
-Alert.define();
-
-export default Alert;
-
-export * from "./components/alert.js";
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "godown-alert": Alert;
-  }
-}
+export { default } from "./web-components/alert/definition.js";

package/src/avatar.ts

@@ -1,13 +1 @@
-import Avatar from "./components/avatar.js";
-
-Avatar.define();
-
-export default Avatar;
-
-export * from "./components/avatar.js";
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "godown-avatar": Avatar;
-  }
-}
+export { default } from "./web-components/avatar/definition.js";

package/src/badge.ts

@@ -1,13 +1 @@
-import Badge from "./components/badge.js";
-
-Badge.define();
-
-export default Badge;
-
-export * from "./components/badge.js";
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "godown-badge": Badge;
-  }
-}
+export { default } from "./web-components/badge/definition.js";

package/src/breath.ts

@@ -1,13 +1 @@
-import Breath from "./components/breath.js";
-
-Breath.define();
-
-export default Breath;
-
-export * from "./components/breath.js";
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "godown-breath": Breath;
-  }
-}
+export { default } from "./web-components/breath/definition.js";

package/src/button.ts

@@ -1,13 +1 @@
-import Button from "./components/button.js";
-
-Button.define();
-
-export default Button;
-
-export * from "./components/button.js";
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "godown-button": Button;
-  }
-}
+export { default } from "./web-components/button/definition.js";

package/src/card.ts

@@ -1,13 +1 @@
-import Card from "./components/card.js";
-
-Card.define();
-
-export default Card;
-
-export * from "./components/card.js";
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "godown-card": Card;
-  }
-}
+export { default } from "./web-components/card/definition.js";

package/src/carousel.ts

@@ -1,13 +1 @@
-import Carousel from "./components/carousel.js";
-
-Carousel.define();
-
-export default Carousel;
-
-export * from "./components/carousel.js";
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "godown-carousel": Carousel;
-  }
-}
+export { default } from "./web-components/carousel/definition.js";

package/src/details.ts

@@ -1,13 +1 @@
-import Details from "./components/details.js";
-
-Details.define();
-
-export default Details;
-
-export * from "./components/details.js";
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "godown-details": Details;
-  }
-}
+export { default } from "./web-components/details/definition.js";

package/src/dialog.ts

@@ -1,13 +1 @@
-import Dialog from "./components/dialog.js";
-
-Dialog.define();
-
-export default Dialog;
-
-export * from "./components/dialog.js";
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "godown-dialog": Dialog;
-  }
-}
+export { default } from "./web-components/dialog/definition.js";

package/src/divider.ts

@@ -1,13 +1 @@
-import Divider from "./components/divider.js";
-
-Divider.define();
-
-export default Divider;
-
-export * from "./components/divider.js";
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "godown-divider": Divider;
-  }
-}
+export { default } from "./web-components/divider/definition.js";

package/src/dragbox.ts

@@ -1,13 +1 @@
-import Dragbox from "./components/dragbox.js";
-
-Dragbox.define();
-
-export default Dragbox;
-
-export * from "./components/dragbox.js";
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "godown-dragbox": Dragbox;
-  }
-}
+export { default } from "./web-components/dragbox/definition.js";

package/src/flex.ts

@@ -1,13 +1 @@
-import Flex from "./components/flex.js";
-
-Flex.define();
-
-export default Flex;
-
-export * from "./components/flex.js";
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "godown-flex": Flex;
-  }
-}
+export { default } from "./web-components/flex/definition.js";

package/src/form.ts

@@ -1,13 +1 @@
-import Form from "./components/form.js";
-
-Form.define();
-
-export default Form;
-
-export * from "./components/form.js";
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "godown-form": Form;
-  }
-}
+export { default } from "./web-components/form/definition.js";

package/src/grid.ts

@@ -1,13 +1 @@
-import Grid from "./components/grid.js";
-
-Grid.define();
-
-export default Grid;
-
-export * from "./components/grid.js";
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "godown-grid": Grid;
-  }
-}
+export { default } from "./web-components/grid/definition.js";

package/src/heading.ts

@@ -1,13 +1 @@
-import Heading from "./components/heading.js";
-
-Heading.define();
-
-export default Heading;
-
-export * from "./components/heading.js";
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "godown-heading": Heading;
-  }
-}
+export { default } from "./web-components/heading/definition.js";

package/src/input.ts

@@ -1,13 +1 @@
-import Input from "./components/input.js";
-
-Input.define();
-
-export default Input;
-
-export * from "./components/input.js";
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "godown-input": Input;
-  }
-}
+export { default } from "./web-components/input/definition.js";

package/src/{core → internal}/global-style.ts

@@ -1,6 +1,6 @@
 import { type Gradients, presetsRGB } from "@godown/colors/presets-rgb.js";
 import { travel } from "@godown/colors/travel.js";
-import { GodownElement, joinProperties, trim } from "@godown/element";
+import { GodownElement, joinDeclarations, trim } from "@godown/element";
 import { type CSSResult, css, unsafeCSS } from "lit";
 
 export class GlobalStyle extends GodownElement {}
@@ -25,7 +25,9 @@ export const cssGlobalVars: {
   white: CSSResult;
   black: CSSResult;
   color: CSSResult;
-  borderRadius: CSSResult;
+  radius: CSSResult;
+  outlineWidth: CSSResult;
+  outlineColor: CSSResult;
 } = {
   clipBackground: scopePrefix("clip-background", 2),
   active: scopePrefix("active", 2),
@@ -35,7 +37,9 @@ export const cssGlobalVars: {
   white: scopePrefix("color-white", 2),
   black: scopePrefix("color-black", 2),
   color: scopePrefix("color", 2),
-  borderRadius: scopePrefix("border-radius", 2),
+  radius: scopePrefix("radius", 2),
+  outlineWidth: scopePrefix("outline-width", 2),
+  outlineColor: scopePrefix("outline-color", 2),
 };
 
 type PresetsGradientsCSSResult = Record<keyof typeof presetsRGB, Gradients<CSSResult>>;
@@ -51,20 +55,27 @@ GlobalStyle.styles = [
         const colorKey = cssGlobalVars.color + endKey;
         return `${colorKey}:rgb(${rgb});`;
       }, presetsRGB).join("") +
-      joinProperties([
+      joinDeclarations([
         [cssGlobalVars.active, `var(${cssGlobalVars._colors.blue[5]})`],
         [cssGlobalVars.passive, `var(${cssGlobalVars._colors.darkgray[5]})`],
         [
           cssGlobalVars.clipBackground,
           `linear-gradient(to bottom, var(${cssGlobalVars._colors.lightgray[0]}), var(${cssGlobalVars._colors.darkgray[0]}))`,
         ],
+        [cssGlobalVars.outlineColor, `var(${cssGlobalVars._colors.darkgray[4]})`],
+        [cssGlobalVars.outlineWidth, ".075em"],
       ]) +
       "}",
   ),
   css`
-    * {
+    input,
+    button,
+    dialog {
       border: 0;
       outline: 0;
+    }
+
+    * {
       margin: 0;
       padding: 0;
       font-size: 100%;
@@ -74,6 +85,8 @@ GlobalStyle.styles = [
 
     :host {
       box-sizing: border-box;
+      border-style: none;
+      outline-style: none;
     }
 
     a {
@@ -109,8 +122,8 @@ GlobalStyle.styles = [
   `,
   css`
     :host {
-      ${cssGlobalVars.borderRadius}: 0.2em;
-      border-radius: var(${cssGlobalVars.borderRadius});
+      ${cssGlobalVars.radius}: 0.2em;
+      border-radius: var(${cssGlobalVars.radius});
     }
   `,
 ];

package/src/internal/outline.ts

@@ -0,0 +1,58 @@
+import { cssGlobalVars } from "./global-style.js";
+import { unsafeCSS, type CSSResult } from "lit";
+
+type OutlineOptions = {
+  width?: string | CSSResult;
+  color?: string | CSSResult;
+  selector?: string;
+  outlineType?: OutlineType;
+};
+
+const getOutlineStyles = (width: string | CSSResult, color: string | CSSResult) => {
+  const colors = `outline-color:var(${color});border-color:var(${color});`;
+  const outline = `${colors}outline-width:var(${width});outline-style:solid;`;
+  return {
+    outline,
+    "outline-inset": `${outline}outline-offset:calc(-1 * var(${width}));`,
+    "box-shadow": `box-shadow:0 0 0 var(${width}) var(${color});`,
+    "box-shadow-inset": `box-shadow:inset 0 0 0 var(${width}) var(${color});`,
+    border: `${colors}border-width:var(${width});border-style:solid;`,
+  };
+};
+
+/**
+ * The `OutlineBuilder` class is responsible for generating CSS styles for various types of outlines.
+ */
+export class OutlineBuilder {
+  css: string;
+
+  constructor({
+    selector = ":host",
+    width = cssGlobalVars.outlineWidth,
+    color = cssGlobalVars.outlineColor,
+    outlineType,
+  }: OutlineOptions = {}) {
+    const styles = getOutlineStyles(width, color);
+    if (outlineType && outlineType in styles) {
+      const style = styles[outlineType];
+      this.css = `${selector}{${style}}`;
+    } else {
+      this.css = "";
+    }
+  }
+
+  get styleSheet(): CSSStyleSheet {
+    return unsafeCSS(this.css).styleSheet;
+  }
+}
+
+export type OutlineType =
+  | "outline"
+  | "outline-inset"
+  | "box-shadow"
+  | "box-shadow-inset"
+  | "border"
+  | "none"
+  | undefined;
+
+export const isNone = (type: OutlineType): boolean => !type || type === "none";

package/src/{core → internal}/super-input.ts

@@ -3,7 +3,7 @@ import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
 import { GlobalStyle, cssGlobalVars } from "./global-style.js";
-import { OutlineBuilder, type OutlineType } from "./outline.js";
+import type { OutlineType } from "./outline.js";
 
 const fieldStyle = css`
   .input-field {
@@ -50,8 +50,6 @@ const inputStyle = css`
     ${cssGlobalVars.input}-height: 1.6em;
     ${cssGlobalVars.input}-space: 0.2em;
     ${cssGlobalVars.input}-control: currentColor;
-    ${cssGlobalVars.input}-outline-width: .075em;
-    ${cssGlobalVars.input}-outline-color: var(${cssGlobalVars._colors.darkgray[4]});
     ${cssGlobalVars.input}-icon-color: var(${cssGlobalVars._colors.darkgray[4]});
   }
 
@@ -74,14 +72,7 @@ const inputStyle = css`
   }
 `;
 
-@styles(
-  fieldStyle,
-  new OutlineBuilder({
-    width: `${cssGlobalVars.input}-outline-width`,
-    color: `${cssGlobalVars.input}-outline-color`,
-  }).styleSheet,
-  inputStyle,
-)
+@styles(fieldStyle, inputStyle)
 class SuperInput<V = string> extends GlobalStyle {
   autofocus = false;
   @property()

package/src/layout.ts

@@ -1,13 +1 @@
-import Layout from "./components/layout.js";
-
-Layout.define();
-
-export default Layout;
-
-export * from "./components/layout.js";
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "godown-layout": Layout;
-  }
-}
+export { default } from "./web-components/layout/definition.js";

package/src/link.ts

@@ -1,13 +1 @@
-import Link from "./components/link.js";
-
-Link.define();
-
-export default Link;
-
-export * from "./components/link.js";
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "godown-link": Link;
-  }
-}
+export { default } from "./web-components/link/definition.js";

package/src/progress.ts

@@ -1,13 +1 @@
-import Progress from "./components/progress.js";
-
-Progress.define();
-
-export default Progress;
-
-export * from "./components/progress.js";
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "godown-progress": Progress;
-  }
-}
+export { default } from "./web-components/progress/definition.js";

package/src/range.ts

@@ -1,13 +1 @@
-import Range from "./components/range.js";
-
-Range.define();
-
-export default Range;
-
-export * from "./components/range.js";
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "godown-range": Range;
-  }
-}
+export { default } from "./web-components/range/definition.js";

package/src/rotate.ts

@@ -1,13 +1 @@
-import Rotate from "./components/rotate.js";
-
-Rotate.define();
-
-export default Rotate;
-
-export * from "./components/rotate.js";
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "godown-rotate": Rotate;
-  }
-}
+export { default } from "./web-components/rotate/definition.js";

package/src/router.ts

@@ -1,13 +1 @@
-import Router from "./components/router.js";
-
-Router.define();
-
-export default Router;
-
-export * from "./components/router.js";
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "godown-router": Router;
-  }
-}
+export { default } from "./web-components/router/definition.js";

package/src/select.ts

@@ -1,13 +1 @@
-import Select from "./components/select.js";
-
-Select.define();
-
-export default Select;
-
-export * from "./components/select.js";
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "godown-select": Select;
-  }
-}
+export { default } from "./web-components/select/definition.js";