godown 2.7.6 → 3.0.0-canary.0

package/README.md

@@ -1,4 +1,4 @@
-# Godown
+# godown
 
 Simple, stylized, semantic web components.
 
@@ -13,7 +13,7 @@ npm i godown
 ### HTML
 
 ```html
-<g-alert title="Alert"></g-alert>
+<godown-alert title="Alert"></godown-alert>
 ```
 
 ### JS
@@ -23,126 +23,90 @@ npm i godown
 import { Alert } from "godown";
 
 // import one
-import Alert from "godown/alert";
+import Alert from "godown/alert.js";
 
 const alert = new Alert();
 alert.title = "Alert";
-/*
-const alert = new Alert({
-  title: "Alert"
-});
- */
+
 document.body.appendChild(alert);
 ```
 
-deno
+### React
 
-```js
-import { Alert } from "npm:godown";
-```
-
-#### React
+react is now in the standalone package (@godown/react)
 
 ```jsx
-import { Alert } from "godown/react"; // import all
+import { Alert } from "@godown/react"; // import all
+// import { Alert } from "@godown/react/alert.js";  // import one
 
 export default function () {
-  return <Alert title="Alert" >;
+  return <Alert title="Alert" />;
 }
 ```
 
-## Custom
+## Tips
+
+### Initial properties
 
-### Custom element tag name
+The constructor parameter can accept an initial value record and assign it after **connected** to document.
+
+Element will override the records of the superclass.
+
+`GodownElement` (require @godown/element) will work for all elements.
 
 ```js
-import { defineConfig } from "godown/conf";
+import GodownElement from "@godown/element";
 
-const newNames = {
-  "alert": "custom-alert",
+GodownElement.godownConfig ||= new GodownConfig();
+GodownElement.godownConfig.assign = {
+  classList: ["godown-element", "custom-element"],
 };
 
-function getName(raw: string) {
-  return this.prefix + newNames[raw];
-}
-
-defineConfig({
-  tag: getName,
-  prefix: "my-",
-  suffix: "",
-});
+import Input from "godown/input.js";
+new Input({ id: "my-input" });
 ```
 
 ```html
-<my-custom-alert title="Alert"></my-custom-alert>
+<godown-input id="my-input" class="godown-element custom-element"></godown-input>
 ```
 
-### Custom element styles
+#### With CSS
 
-Font color and background
+This is useful when customizing styles.
 
 ```css
-* {
-  --godown--background-rgb: 12 12 12;
-  --godown--foreground-rgb: 240 240 240;
+.godown-element {
+  --godown--background: rgb(0 0 0);
+  font-size: 20px;
 }
 ```
 
-### Custom CSS variable prefix
-
-```js
-import { defineConfig } from "godown/conf";
+### Tag naming
 
-defineConfig({
-  cssvar: "x",
-});
-```
+Modify the element prefix and suffix,
+the tag name will be joined with `-`.
 
-```html
-<g-button style="--x-button--focus-scale: .95;"></g-button>
+```js
+GodownElement.godownConfig.prefix = "g";
+GodownElement.godownConfig.suffix = "";
 ```
 
-### Custom initial property
-
-All element.
+Modify the tag method to return the element name directly.
 
 ```js
-import { defineConfig } from "godown/conf";
-defineConfig({
-  assign: {
-    classList: ["godown-element", "custom-element"],
-    color: "blue", // button property
-  },
-});
+GodownElement.godownConfig.tag = function (origin) {
+  return this.prefix + "-" + origin;
+};
 ```
 
-Assign when elements are **connected**.
-
 ```html
-<g-button class="godown-element custom-element" color="blue">Button</g-button>
-
-<g-input class="godown-element custom-element" color="blue"></g-input>
+<g-button></g-button>
 ```
 
-One element.
+### CSS variable prefix
 
-```js
-const RedButton = new Button({
-  classList: ["godown-element", "custom-element"],
-});
-```
-
-#### With CSS
+Element-scoped css variables will start with `--${tagName}--`.
 
-It can be used to set CSS variables.
-
-```css
-.godown-element {
-}
+```html
+<godown-button style="--godown-button--focus-scale: .95;"></godown-button>
 ```
-
-## Compatibility
-
-Legacy names is now unavailable.
-
-Manually specify the legacy name at `tag`, return a legacy name, see[s](#custom-element-tag-name)

package/alert.d.ts

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

package/alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["alert.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,iCAAiC,CAAC;AAEpD,eAAe,KAAK,CAAC;AACrB,cAAc,iCAAiC,CAAC;AAEhD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,KAAK,CAAC;KAClB;CACF"}
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["src/alert.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,uBAAuB,CAAC;AAI1C,eAAe,KAAK,CAAC;AAErB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,KAAK,CAAC;KACvB;CACF"}

package/alert.js

@@ -1,5 +1,6 @@
-import Alert from "./web-components/alert/alert.js";
+import Alert from './components/alert.js';
+
 Alert.define();
-export default Alert;
-export * from "./web-components/alert/alert.js";
-//# sourceMappingURL=alert.js.map
+
+export { Alert as default };
+//# sourceMappingURL=alert.js.map

package/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["alert.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,iCAAiC,CAAC;AACpD,KAAK,CAAC,MAAM,EAAE,CAAC;AACf,eAAe,KAAK,CAAC;AACrB,cAAc,iCAAiC,CAAC","sourcesContent":["import Alert from \"./web-components/alert/alert.js\";\nAlert.define();\nexport default Alert;\nexport * from \"./web-components/alert/alert.js\";\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"g-alert\": Alert;\n  }\n}\n"]}
+{"version":3,"file":"alert.js","sources":["src/alert.ts"],"sourcesContent":null,"names":[],"mappings":";;AAEA,KAAK,CAAC,MAAM,EAAE;;;;"}

package/avatar.d.ts

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

package/avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["avatar.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mCAAmC,CAAC;AAEvD,eAAe,MAAM,CAAC;AACtB,cAAc,mCAAmC,CAAC;AAElD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,MAAM,CAAC;KACpB;CACF"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["src/avatar.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAI5C,eAAe,MAAM,CAAC;AAEtB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,MAAM,CAAC;KACzB;CACF"}

package/avatar.js

@@ -1,5 +1,6 @@
-import Avatar from "./web-components/avatar/avatar.js";
+import Avatar from './components/avatar.js';
+
 Avatar.define();
-export default Avatar;
-export * from "./web-components/avatar/avatar.js";
-//# sourceMappingURL=avatar.js.map
+
+export { Avatar as default };
+//# sourceMappingURL=avatar.js.map

package/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["avatar.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,MAAM,CAAC,MAAM,EAAE,CAAC;AAChB,eAAe,MAAM,CAAC;AACtB,cAAc,mCAAmC,CAAC","sourcesContent":["import Avatar from \"./web-components/avatar/avatar.js\";\nAvatar.define();\nexport default Avatar;\nexport * from \"./web-components/avatar/avatar.js\";\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"g-avatar\": Avatar;\n  }\n}\n"]}
+{"version":3,"file":"avatar.js","sources":["src/avatar.ts"],"sourcesContent":null,"names":[],"mappings":";;AAEA,MAAM,CAAC,MAAM,EAAE;;;;"}

package/breath.d.ts

@@ -0,0 +1,9 @@
+import Breath from "./components/breath.js";
+export default Breath;
+export * from "./components/breath.js";
+declare global {
+    interface HTMLElementTagNameMap {
+        "godown-breath": Breath;
+    }
+}
+//# sourceMappingURL=breath.d.ts.map

package/breath.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breath.d.ts","sourceRoot":"","sources":["src/breath.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"}

package/breath.js

@@ -0,0 +1,6 @@
+import Breath from './components/breath.js';
+
+Breath.define();
+
+export { Breath as default };
+//# sourceMappingURL=breath.js.map

package/breath.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breath.js","sources":["src/breath.ts"],"sourcesContent":null,"names":[],"mappings":";;AAEA,MAAM,CAAC,MAAM,EAAE;;;;"}

package/button.d.ts

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

package/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["button.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mCAAmC,CAAC;AAEvD,eAAe,MAAM,CAAC;AACtB,cAAc,mCAAmC,CAAC;AAElD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,MAAM,CAAC;KACpB;CACF"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["src/button.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAI5C,eAAe,MAAM,CAAC;AAEtB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,MAAM,CAAC;KACzB;CACF"}

package/button.js

@@ -1,5 +1,6 @@
-import Button from "./web-components/button/button.js";
+import Button from './components/button.js';
+
 Button.define();
-export default Button;
-export * from "./web-components/button/button.js";
-//# sourceMappingURL=button.js.map
+
+export { Button as default };
+//# sourceMappingURL=button.js.map

package/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["button.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,MAAM,CAAC,MAAM,EAAE,CAAC;AAChB,eAAe,MAAM,CAAC;AACtB,cAAc,mCAAmC,CAAC","sourcesContent":["import Button from \"./web-components/button/button.js\";\nButton.define();\nexport default Button;\nexport * from \"./web-components/button/button.js\";\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"g-button\": Button;\n  }\n}\n"]}
+{"version":3,"file":"button.js","sources":["src/button.ts"],"sourcesContent":null,"names":[],"mappings":";;AAEA,MAAM,CAAC,MAAM,EAAE;;;;"}

package/card.d.ts

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

package/card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["card.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,+BAA+B,CAAC;AAEjD,eAAe,IAAI,CAAC;AACpB,cAAc,+BAA+B,CAAC;AAE9C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,IAAI,CAAC;KAChB;CACF"}
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["src/card.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,sBAAsB,CAAC;AAIxC,eAAe,IAAI,CAAC;AAEpB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,IAAI,CAAC;KACrB;CACF"}

package/card.js

@@ -1,5 +1,6 @@
-import Card from "./web-components/card/card.js";
+import Card from './components/card.js';
+
 Card.define();
-export default Card;
-export * from "./web-components/card/card.js";
-//# sourceMappingURL=card.js.map
+
+export { Card as default };
+//# sourceMappingURL=card.js.map

package/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["card.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,+BAA+B,CAAC;AACjD,IAAI,CAAC,MAAM,EAAE,CAAC;AACd,eAAe,IAAI,CAAC;AACpB,cAAc,+BAA+B,CAAC","sourcesContent":["import Card from \"./web-components/card/card.js\";\nCard.define();\nexport default Card;\nexport * from \"./web-components/card/card.js\";\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"g-card\": Card;\n  }\n}\n"]}
+{"version":3,"file":"card.js","sources":["src/card.ts"],"sourcesContent":null,"names":[],"mappings":";;AAEA,IAAI,CAAC,MAAM,EAAE;;;;"}

package/carousel.d.ts

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

package/carousel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"carousel.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["carousel.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,uCAAuC,CAAC;AAE7D,eAAe,QAAQ,CAAC;AACxB,cAAc,uCAAuC,CAAC;AAEtD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,QAAQ,CAAC;KACxB;CACF"}
+{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["src/carousel.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,0BAA0B,CAAC;AAIhD,eAAe,QAAQ,CAAC;AAExB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,QAAQ,CAAC;KAC7B;CACF"}

package/carousel.js

@@ -1,5 +1,6 @@
-import Carousel from "./web-components/carousel/carousel.js";
+import Carousel from './components/carousel.js';
+
 Carousel.define();
-export default Carousel;
-export * from "./web-components/carousel/carousel.js";
-//# sourceMappingURL=carousel.js.map
+
+export { Carousel as default };
+//# sourceMappingURL=carousel.js.map

package/carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"carousel.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["carousel.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,uCAAuC,CAAC;AAC7D,QAAQ,CAAC,MAAM,EAAE,CAAC;AAClB,eAAe,QAAQ,CAAC;AACxB,cAAc,uCAAuC,CAAC","sourcesContent":["import Carousel from \"./web-components/carousel/carousel.js\";\nCarousel.define();\nexport default Carousel;\nexport * from \"./web-components/carousel/carousel.js\";\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"g-carousel\": Carousel;\n  }\n}\n"]}
+{"version":3,"file":"carousel.js","sources":["src/carousel.ts"],"sourcesContent":null,"names":[],"mappings":";;AAEA,QAAQ,CAAC,MAAM,EAAE;;;;"}

package/components/alert.d.ts

@@ -0,0 +1,50 @@
+import { GlobalStyle } from "../core/global-style.js";
+/**
+ * {@linkcode Alert} renders a alert.
+ *
+ * @slot - Alert content.
+ * @slot title - Alert title.
+ * @slot icon - Alert icon.
+ * @category feedback
+ */
+declare class Alert extends GlobalStyle {
+    /**
+     * If it is a legal value, the icon and preset color will be rendered.
+     */
+    call: "tip" | "success" | "info" | "warning" | "danger" | "error" | "help" | "deprecated";
+    /**
+     * The tone of the component.
+     * Overrides the color of the call.
+     */
+    color: "white" | "black" | "gray" | "green" | "teal" | "blue" | "red" | "purple" | "orange" | "yellow" | "pink";
+    /**
+     * Close delay, if 0, it will not be closed automatically.
+     */
+    autoclose: number;
+    /**
+     * The title is bold and the icon height is the same as it.
+     */
+    title: string;
+    /**
+     * Content, if zero value, will be rendered as an unnamed slot.
+     */
+    content: string;
+    /**
+     * Set true to hide the close button.
+     *
+     * The behavior may change due to the {@linkcode variant} property
+     */
+    hideClose: boolean;
+    /**
+     * Alert variant, if set to `blockquote`, the alert will be rendered as a blockquote.
+     *
+     * If variant is `"blockquote"`, hide the close button.
+     */
+    variant: "blockquote" | "dark" | "light";
+    protected render(): import("lit").TemplateResult<1>;
+    close(): void;
+    protected firstUpdated(): void;
+    static alert(root: HTMLElement, option: Partial<Alert>): Alert;
+}
+export default Alert;
+//# sourceMappingURL=alert.d.ts.map

package/components/alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../src/components/alert.ts"],"names":[],"mappings":"AAgBA,OAAO,EAAiB,WAAW,EAAe,MAAM,yBAAyB,CAAC;AAwFlF;;;;;;;GAOG;AACH,cAMM,KAAM,SAAQ,WAAW;IAC7B;;OAEG;IAEH,IAAI,EAAE,KAAK,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,YAAY,CAAC;IAE1F;;;OAGG;IAEH,KAAK,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;IAEhH;;OAEG;IAEH,SAAS,SAAK;IAEd;;OAEG;IAEH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IAEH,OAAO,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IAIH,SAAS,UAAS;IAElB;;;;OAIG;IAEH,OAAO,EAAE,YAAY,GAAG,MAAM,GAAG,OAAO,CAAU;IAElD,SAAS,CAAC,MAAM;IAWhB,KAAK;IAKL,SAAS,CAAC,YAAY;IAMtB,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,CAAC,KAAK,CAAC,GAAG,KAAK;CAM/D;AAED,eAAe,KAAK,CAAC"}

package/components/alert.js

@@ -0,0 +1,167 @@
+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 { constructCSS } from '@godown/element/tools/css.js';
+import iconCheckAltCircle from '@godown/f7-icon/icons/checkmark-alt-circle.js';
+import iconExclamationCircle from '@godown/f7-icon/icons/exclamationmark-circle.js';
+import iconInfoCircle from '@godown/f7-icon/icons/info-circle.js';
+import iconLightbulb from '@godown/f7-icon/icons/lightbulb.js';
+import iconQuestionCircle from '@godown/f7-icon/icons/question-circle.js';
+import iconSlashCircle from '@godown/f7-icon/icons/slash-circle.js';
+import iconXmark from '@godown/f7-icon/icons/xmark.js';
+import iconXmarkCircle from '@godown/f7-icon/icons/xmark-circle.js';
+import { unsafeCSS, css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { scopePrefix, cssGlobalVars, GlobalStyle } from '../core/global-style.js';
+
+const protoName = "alert";
+const cssScope = scopePrefix(protoName);
+const vars = ["color", "background"].map((v) => `${cssScope}--${v}`);
+const genDark = (key) => {
+    return [cssGlobalVars._colors[key][5], cssGlobalVars._colors[key][9]];
+};
+const darkStyles = constructCSS(vars, {
+    green: genDark("green"),
+    blue: genDark("blue"),
+    orange: genDark("orange"),
+    red: genDark("red"),
+    yellow: genDark("yellow"),
+    purple: genDark("purple"),
+    teal: genDark("teal"),
+    pink: genDark("pink"),
+    gray: [cssGlobalVars._colors.lightgray[5], cssGlobalVars._colors.darkgray[5]],
+    white: [cssGlobalVars._colors.lightgray[2], cssGlobalVars._colors.darkgray[7]],
+    black: [cssGlobalVars._colors.darkgray[8], cssGlobalVars._colors.lightgray[5]],
+}, (color) => `[color=${color}]`, (prop) => `var(${prop})`);
+const genLight = (key) => {
+    return [cssGlobalVars._colors[key][6], cssGlobalVars._colors[key][0]];
+};
+const lightStyles = constructCSS(vars, {
+    green: genLight("green"),
+    blue: genLight("blue"),
+    orange: genLight("orange"),
+    red: genLight("red"),
+    yellow: genLight("yellow"),
+    purple: genLight("purple"),
+    teal: genLight("teal"),
+    pink: genLight("pink"),
+    gray: [cssGlobalVars._colors.darkgray[5], cssGlobalVars._colors.lightgray[7]],
+    white: [cssGlobalVars._colors.lightgray[0], cssGlobalVars._colors.darkgray[0]],
+    black: [cssGlobalVars._colors.darkgray[7], cssGlobalVars._colors.lightgray[3]],
+}, (color) => `[variant="light"][color=${color}]`, (prop) => `var(${prop})`);
+const calls = {
+    tip: {
+        color: "teal",
+        icon: iconLightbulb,
+    },
+    success: {
+        color: "green",
+        icon: iconCheckAltCircle,
+    },
+    info: {
+        color: "blue",
+        icon: iconInfoCircle,
+    },
+    warning: {
+        color: "orange",
+        icon: iconExclamationCircle,
+    },
+    danger: {
+        color: "red",
+        icon: iconXmarkCircle,
+    },
+    error: {
+        color: "red",
+        icon: iconXmarkCircle,
+    },
+    help: {
+        color: "purple",
+        icon: iconQuestionCircle,
+    },
+    deprecated: {
+        color: "gray",
+        icon: iconSlashCircle,
+    },
+};
+/**
+ * {@linkcode Alert} renders a alert.
+ *
+ * @slot - Alert content.
+ * @slot title - Alert title.
+ * @slot icon - Alert icon.
+ * @category feedback
+ */
+let Alert = class Alert extends GlobalStyle {
+    constructor() {
+        super(...arguments);
+        /**
+         * Close delay, if 0, it will not be closed automatically.
+         */
+        this.autoclose = 0;
+        /**
+         * Set true to hide the close button.
+         *
+         * The behavior may change due to the {@linkcode variant} property
+         */
+        this.hideClose = false;
+        /**
+         * Alert variant, if set to `blockquote`, the alert will be rendered as a blockquote.
+         *
+         * If variant is `"blockquote"`, hide the close button.
+         */
+        this.variant = "dark";
+    }
+    render() {
+        const color = this.call ? this.color || calls[this.call].color : this.color;
+        const icon = this.call ? calls[this.call].icon() : htmlSlot("icon");
+        return html `<div part="root" variant="${this.variant}" color="${color}"><div part="icon">${icon}</div><div part="content"><strong part="title">${this.title || htmlSlot("title")}</strong> ${this.content || htmlSlot()}</div>${conditionIf(!this.hideClose && this.variant !== "blockquote", html `<div part="close" @click="${this.close}">${iconXmark()}</div>`)}</div>`;
+    }
+    close() {
+        this.remove();
+        this.dispatchEvent(new CustomEvent("close", { bubbles: true, composed: true }));
+    }
+    firstUpdated() {
+        if (this.autoclose) {
+            setTimeout(() => this.close(), this.autoclose);
+        }
+    }
+    static alert(root, option) {
+        const ai = new this();
+        Object.assign(ai, option);
+        root.appendChild(ai);
+        return ai;
+    }
+};
+__decorate([
+    property()
+], Alert.prototype, "call", void 0);
+__decorate([
+    property()
+], Alert.prototype, "color", void 0);
+__decorate([
+    property({ type: Number })
+], Alert.prototype, "autoclose", void 0);
+__decorate([
+    property()
+], Alert.prototype, "title", void 0);
+__decorate([
+    property()
+], Alert.prototype, "content", void 0);
+__decorate([
+    property({
+        type: Boolean,
+    })
+], Alert.prototype, "hideClose", void 0);
+__decorate([
+    property()
+], Alert.prototype, "variant", void 0);
+Alert = __decorate([
+    godown(protoName),
+    styles(unsafeCSS(darkStyles), unsafeCSS(lightStyles), css `:host{border-radius:var(${cssScope}--border-radius);${cssScope}--border-radius:.25em;${cssScope}--border-width:.075em;${cssScope}--blockquote-width:.2em;${cssScope}--padding:.5em;display:block;width:100%}[part=root]{--color:var(${cssScope}--color);color:var(--color);transition:.25s;display:flex;justify-content:space-between;padding:var(${cssScope}--padding);border-radius:inherit;border:var(${cssScope}--border-width) solid var(--color);background:var(${cssScope}--background)}[variant=blockquote]{border-radius:0;border-left:var(${cssScope}--blockquote-width) solid var(--color);border-bottom:none;border-right:none;border-top:none;background:0 0}[part=content]{color:var(--color)}[part=root]{display:grid;align-items:center;grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr}[part=title]{line-height:2em}[part=icon]{display:inline-grid;align-items:center;height:2em}[part=icon] svg{margin-right:.5em;width:1.25em;height:1.25em}[part=content]{grid-row:span 2/span 2;line-height:1.5em}`)
+], Alert);
+var Alert$1 = Alert;
+
+export { Alert$1 as default };
+//# sourceMappingURL=alert.js.map

package/components/alert.js.map

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