@jotyping/jap-ds 0.1.2-alpha

package/LICENCE.md

@@ -0,0 +1,9 @@
+{
+"license": "MIT",
+"licenses": [
+{
+"type": "MIT + Commons Clause",
+"url": "https://commonsclause.com/"
+}
+]
+}

package/README.md

@@ -0,0 +1,34 @@
+# 🚀 jap design system - web component library
+
+My reusable, framework-anostic web components library build with **vite**, **lit** and **ts**.
+
+## ✨ Features
+
+- ✅ Native Web Components (no framework required)
+- 🎨 Shadow DOM for style encapsulation
+- 📦 ES Modules
+- ⚡ Lightweight and performant
+- 🧩 Easy integration with any framework (React, Vue, Angular, Vanilla JS)
+- 🧪 Optional testing & Storybook support
+
+---
+
+## 📦 Installation
+
+### Via npm
+
+```bash
+npm install @jotyping/jap-ds
+```
+
+---
+
+## 🧩 Usage
+
+### In Vue
+
+Import jap-ds in main.js:
+
+```bash
+import "@jotyping/jap-ds";
+```

package/dist/assets/lit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="25.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 320"><path fill="#00E8FF" d="m64 192l25.926-44.727l38.233-19.114l63.974 63.974l10.833 61.754L192 320l-64-64l-38.074-25.615z"></path><path fill="#283198" d="M128 256V128l64-64v128l-64 64ZM0 256l64 64l9.202-60.602L64 192l-37.542 23.71L0 256Z"></path><path fill="#324FFF" d="M64 192V64l64-64v128l-64 64Zm128 128V192l64-64v128l-64 64ZM0 256V128l64 64l-64 64Z"></path><path fill="#0FF" d="M64 320V192l64 64z"></path></svg>

package/dist/components/button/jap-button.js

@@ -0,0 +1,42 @@
+import { unsafeCSS as l, LitElement as u, html as f } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/lit/index.js";
+import { property as y, customElement as a } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/lit/decorators.js";
+import "../flash/jap-flash.js";
+import "../footer/jap-footer.js";
+import "../header/jap-header.js";
+import "../heading/jap-heading.js";
+import "../icon/jap-icon.js";
+import "../icon-button/jap-icon-button.js";
+import "../image-link/jap-image-link.js";
+import "../link/jap-link.js";
+import "../modal/jap-modal.js";
+import "../navigation/jap-navigation.js";
+import "../tag/jap-tag.js";
+import c from "./jap-button.scss.js";
+var v = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, n = (i, r, e, o) => {
+  for (var t = o > 1 ? void 0 : o ? _(r, e) : r, m = i.length - 1, s; m >= 0; m--)
+    (s = i[m]) && (t = (o ? s(r, e, t) : s(t)) || t);
+  return o && t && v(r, e, t), t;
+};
+let p = class extends u {
+  constructor() {
+    super(...arguments), this.type = "primary";
+  }
+  render() {
+    return f`
+      <button class=${this.type}>
+        <slot></slot>
+      </button>
+    `;
+  }
+};
+p.styles = l(c);
+n([
+  y({ type: String })
+], p.prototype, "type", 2);
+p = n([
+  a("jap-button")
+], p);
+export {
+  p as JapButton
+};
+//# sourceMappingURL=jap-button.js.map

package/dist/components/button/jap-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jap-button.js","sources":["../../../src/components/button/jap-button.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport \"../../components\";\nimport style from \"./jap-button.scss?inline\";\n\n@customElement(\"jap-button\")\nexport class JapButton extends LitElement {\n  static styles = unsafeCSS(style);\n\n  /**\n   * Button type, can be \"primary\" or \"secondary\".\n   */\n  @property({ type: String }) type: \"primary\" | \"secondary\" = \"primary\";\n\n  render() {\n    return html`\n      <button class=${this.type}>\n        <slot></slot>\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"jap-button\": JapButton;\n  }\n}\n"],"names":["JapButton","LitElement","html","unsafeCSS","style","__decorateClass","property","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;AAMO,IAAMA,IAAN,cAAwBC,EAAW;AAAA,EAAnC,cAAA;AAAA,UAAA,GAAA,SAAA,GAMuB,KAAA,OAAgC;AAAA,EAAA;AAAA,EAE5D,SAAS;AACP,WAAOC;AAAA,sBACW,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA,EAI7B;AACF;AAfaF,EACJ,SAASG,EAAUC,CAAK;AAKHC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GANfN,EAMiB,WAAA,QAAA,CAAA;AANjBA,IAANK,EAAA;AAAA,EADNE,EAAc,YAAY;AAAA,GACdP,CAAA;"}

package/dist/components/button/jap-button.scss.js

@@ -0,0 +1,5 @@
+const o = '@font-face{font-family:Satoshi-Regular;src:url(/assets/Satoshi-Regular.woff2) format("woff2"),url(/assets/Satoshi-Regular.woff) format("woff");font-weight:400;font-display:swap;font-style:normal}@font-face{font-family:Satoshi-Italic;src:url(/assets/Satoshi-Italic.woff2) format("woff2"),url(/assets/Satoshi-Italic.woff) format("woff");font-weight:400;font-display:swap;font-style:italic}@font-face{font-family:Satoshi-Bold;src:url(/assets/Satoshi-Bold.woff2) format("woff2"),url(/assets/Satoshi-Bold.woff) format("woff");font-weight:700;font-display:swap;font-style:normal}@font-face{font-family:Satoshi-Black;src:url(/assets/Satoshi-Black.woff2) format("woff2"),url(/assets/Satoshi-Black.woff) format("woff");font-weight:900;font-display:swap;font-style:normal}:host{display:inline-block}:host([active]) button.primary{color:#3a3a3a;background-color:#fff}:host([active]) button.secondary{color:#3a3a3a;background-color:#fff;outline:3px solid #3a3a3a;outline-offset:-3px}:host([active]) button.secondary:hover{outline:4px solid #3a3a3a;outline-offset:-4px}button{font-family:Satoshi-Bold,sans-serif;font-size:24px;line-height:42px;padding:0 20px;border-radius:28px;cursor:pointer;transition:background-color .3s;height:56px;border:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}button.primary{color:#3a3a3a;background-color:#fff;outline:3px solid #3a3a3a;outline-offset:-3px}button.primary:hover{outline:4px solid #3a3a3a;outline-offset:-4px}button.secondary{color:#3a3a3a;background-color:#fff;outline:1px solid #f3f3f3;outline-offset:-1px}button.secondary:hover{outline:3px solid #f3f3f3;outline-offset:-3px}';
+export {
+  o as default
+};
+//# sourceMappingURL=jap-button.scss.js.map

package/dist/components/button/jap-button.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jap-button.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/flash/jap-flash.js

@@ -0,0 +1,74 @@
+import { LitElement as h, html as u, unsafeCSS as f } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/lit/index.js";
+import { property as a, customElement as v } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/lit/decorators.js";
+import y from "./jap-flash.scss.js";
+import { classMap as l } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/lit/directives/class-map.js";
+import "../button/jap-button.js";
+import "../footer/jap-footer.js";
+import "../header/jap-header.js";
+import "../heading/jap-heading.js";
+import "../icon/jap-icon.js";
+import "../icon-button/jap-icon-button.js";
+import "../image-link/jap-image-link.js";
+import "../link/jap-link.js";
+import "../modal/jap-modal.js";
+import "../navigation/jap-navigation.js";
+import "../tag/jap-tag.js";
+import { SignalWatcher as d } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/@lit-labs/signals/index.js";
+import { breakpoint as c } from "../../stores/breakpoint-store.js";
+var g = Object.defineProperty, z = Object.getOwnPropertyDescriptor, e = (s, r, i, p) => {
+  for (var t = p > 1 ? void 0 : p ? z(r, i) : r, n = s.length - 1, m; n >= 0; n--)
+    (m = s[n]) && (t = (p ? m(r, i, t) : m(t)) || t);
+  return p && t && g(r, i, t), t;
+};
+let o = class extends d(h) {
+  constructor() {
+    super(...arguments), this.size = "auto", this.color = "red", this.iconPosition = "bottom", this.iconName = "fire";
+  }
+  render() {
+    const s = {
+      "flash-wrapper": !0,
+      "upside-down": this.iconPosition === "top"
+    }, r = {
+      "title-wrapper": !0,
+      [this.size === "auto" ? c.get() : this.size]: !0,
+      [this.color]: !0
+    }, i = {
+      "icon-wrapper": !0,
+      [this.size === "auto" ? c.get() : this.size]: !0
+    };
+    return u`
+      <div class=${l(s)}>
+        <div class=${l(r)}>
+          <slot name="title"></slot>
+        </div>
+        <div class=${l(i)}>
+          <jap-icon
+            iconName=${this.iconName}
+            color=${this.color}
+            size=${this.size === "s" || c.get() === "s" ? "48px" : "72px"}
+          ></jap-icon>
+        </div>
+      </div>
+    `;
+  }
+};
+o.styles = f(y);
+e([
+  a({ type: String })
+], o.prototype, "size", 2);
+e([
+  a({ type: String })
+], o.prototype, "color", 2);
+e([
+  a({ type: String })
+], o.prototype, "iconPosition", 2);
+e([
+  a({ type: String })
+], o.prototype, "iconName", 2);
+o = e([
+  v("jap-flash")
+], o);
+export {
+  o as JapFlash
+};
+//# sourceMappingURL=jap-flash.js.map

package/dist/components/flash/jap-flash.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jap-flash.js","sources":["../../../src/components/flash/jap-flash.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport style from \"./jap-flash.scss?inline\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport \"../../components\";\nimport { SignalWatcher } from \"@lit-labs/signals\";\nimport { breakpoint } from \"../../stores/breakpoint-store\";\n\n@customElement(\"jap-flash\")\nexport class JapFlash extends SignalWatcher(LitElement) {\n  static styles = unsafeCSS(style);\n\n  @property({ type: String }) size: \"s\" | \"m\" | \"l\" | \"auto\" = \"auto\";\n  @property({ type: String }) color: \"red\" | \"purple\" | \"blue\" = \"red\";\n  @property({ type: String }) iconPosition: \"top\" | \"bottom\" = \"bottom\";\n  @property({ type: String }) iconName:\n    | \"fire\"\n    | \"puzzle\"\n    | \"lightning\"\n    | \"arrow-right\"\n    | \"arrow-circle-left\"\n    | \"burger-menu\"\n    | \"chat\" = \"fire\";\n\n  render() {\n    const flashWrapperClasses = {\n      \"flash-wrapper\": true,\n      \"upside-down\": this.iconPosition === \"top\",\n    };\n\n    const titleWrapperClasses = {\n      \"title-wrapper\": true,\n      [this.size === \"auto\" ? breakpoint.get() : this.size]: true,\n      [this.color]: true,\n    };\n\n    const iconWrapperClasses = {\n      \"icon-wrapper\": true,\n      [this.size === \"auto\" ? breakpoint.get() : this.size]: true,\n    };\n\n    return html`\n      <div class=${classMap(flashWrapperClasses)}>\n        <div class=${classMap(titleWrapperClasses)}>\n          <slot name=\"title\"></slot>\n        </div>\n        <div class=${classMap(iconWrapperClasses)}>\n          <jap-icon\n            iconName=${this.iconName}\n            color=${this.color}\n            size=${this.size === \"s\" || breakpoint.get() === \"s\"\n              ? \"48px\"\n              : \"72px\"}\n          ></jap-icon>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"jap-flash\": JapFlash;\n  }\n}\n"],"names":["JapFlash","SignalWatcher","LitElement","flashWrapperClasses","titleWrapperClasses","breakpoint","iconWrapperClasses","html","classMap","unsafeCSS","style","__decorateClass","property","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AASO,IAAMA,IAAN,cAAuBC,EAAcC,CAAU,EAAE;AAAA,EAAjD,cAAA;AAAA,UAAA,GAAA,SAAA,GAGuB,KAAA,OAAiC,QACjC,KAAA,QAAmC,OACnC,KAAA,eAAiC,UACjC,KAAA,WAOf;AAAA,EAAA;AAAA,EAEb,SAAS;AACP,UAAMC,IAAsB;AAAA,MAC1B,iBAAiB;AAAA,MACjB,eAAe,KAAK,iBAAiB;AAAA,IAAA,GAGjCC,IAAsB;AAAA,MAC1B,iBAAiB;AAAA,MACjB,CAAC,KAAK,SAAS,SAASC,EAAW,QAAQ,KAAK,IAAI,GAAG;AAAA,MACvD,CAAC,KAAK,KAAK,GAAG;AAAA,IAAA,GAGVC,IAAqB;AAAA,MACzB,gBAAgB;AAAA,MAChB,CAAC,KAAK,SAAS,SAASD,EAAW,IAAA,IAAQ,KAAK,IAAI,GAAG;AAAA,IAAA;AAGzD,WAAOE;AAAA,mBACQC,EAASL,CAAmB,CAAC;AAAA,qBAC3BK,EAASJ,CAAmB,CAAC;AAAA;AAAA;AAAA,qBAG7BI,EAASF,CAAkB,CAAC;AAAA;AAAA,uBAE1B,KAAK,QAAQ;AAAA,oBAChB,KAAK,KAAK;AAAA,mBACX,KAAK,SAAS,OAAOD,EAAW,UAAU,MAC7C,SACA,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,EAKpB;AACF;AAjDaL,EACJ,SAASS,EAAUC,CAAK;AAEHC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAHfZ,EAGiB,WAAA,QAAA,CAAA;AACAW,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAJfZ,EAIiB,WAAA,SAAA,CAAA;AACAW,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GALfZ,EAKiB,WAAA,gBAAA,CAAA;AACAW,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GANfZ,EAMiB,WAAA,YAAA,CAAA;AANjBA,IAANW,EAAA;AAAA,EADNE,EAAc,WAAW;AAAA,GACbb,CAAA;"}

package/dist/components/flash/jap-flash.scss.js

@@ -0,0 +1,5 @@
+const t = '@font-face{font-family:Satoshi-Regular;src:url(/assets/Satoshi-Regular.woff2) format("woff2"),url(/assets/Satoshi-Regular.woff) format("woff");font-weight:400;font-display:swap;font-style:normal}@font-face{font-family:Satoshi-Italic;src:url(/assets/Satoshi-Italic.woff2) format("woff2"),url(/assets/Satoshi-Italic.woff) format("woff");font-weight:400;font-display:swap;font-style:italic}@font-face{font-family:Satoshi-Bold;src:url(/assets/Satoshi-Bold.woff2) format("woff2"),url(/assets/Satoshi-Bold.woff) format("woff");font-weight:700;font-display:swap;font-style:normal}@font-face{font-family:Satoshi-Black;src:url(/assets/Satoshi-Black.woff2) format("woff2"),url(/assets/Satoshi-Black.woff) format("woff");font-weight:900;font-display:swap;font-style:normal}:host{display:inline-block}.flash-wrapper{display:flex;flex-direction:column;gap:15px}.flash-wrapper.upside-down{flex-direction:column-reverse}.title-wrapper.m,.title-wrapper.l{font-family:Satoshi-Italic,sans-serif;font-size:46px;line-height:50px}.title-wrapper.s{font-family:Satoshi-Italic,sans-serif;font-size:34px;line-height:36px}.title-wrapper.red{color:#ff4d2a}.title-wrapper.purple{color:#bf2aff}.title-wrapper.blue{color:#2a91ff}.icon-wrapper{color:#3a3a3a}.icon-wrapper.m,.icon-wrapper.l{width:72px;height:72px}.icon-wrapper.s{width:52px;height:52px}';
+export {
+  t as default
+};
+//# sourceMappingURL=jap-flash.scss.js.map

package/dist/components/flash/jap-flash.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jap-flash.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/footer/jap-footer.js

@@ -0,0 +1,50 @@
+import { LitElement as c, nothing as l, html as e, unsafeCSS as f } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/lit/index.js";
+import { customElement as j } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/lit/decorators.js";
+import u from "./jap-footer.scss.js";
+import "../button/jap-button.js";
+import "../flash/jap-flash.js";
+import "../header/jap-header.js";
+import "../heading/jap-heading.js";
+import "../icon/jap-icon.js";
+import "../icon-button/jap-icon-button.js";
+import "../image-link/jap-image-link.js";
+import "../link/jap-link.js";
+import "../modal/jap-modal.js";
+import "../navigation/jap-navigation.js";
+import "../tag/jap-tag.js";
+import { SignalWatcher as g } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/@lit-labs/signals/index.js";
+import { breakpoint as p } from "../../stores/breakpoint-store.js";
+import { classMap as v } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/lit/directives/class-map.js";
+var k = Object.getOwnPropertyDescriptor, d = (t, a, s, m) => {
+  for (var r = m > 1 ? void 0 : m ? k(a, s) : a, o = t.length - 1, n; o >= 0; o--)
+    (n = t[o]) && (r = n(r) || r);
+  return r;
+};
+let i = class extends g(c) {
+  render() {
+    const t = {
+      "footer-wrapper": !0,
+      [p.get()]: !0
+    };
+    return e`
+      <div class=${v(t)}>
+        <jap-modal>
+          <jap-link slot="button">Impressum</jap-link>
+          <div>Impressum content</div>
+        </jap-modal>
+        ${p.get() !== "s" ? e`<jap-icon iconName="circle"></jap-icon>` : l}
+        <jap-link href="#" target="_blank">Github</jap-link>
+        ${p.get() !== "s" ? e`<jap-icon iconName="circle"></jap-icon>` : l}
+        <jap-link href="#" target="_blank">Contact</jap-link>
+      </div>
+    `;
+  }
+};
+i.styles = f(u);
+i = d([
+  j("jap-footer")
+], i);
+export {
+  i as JapFooter
+};
+//# sourceMappingURL=jap-footer.js.map

package/dist/components/footer/jap-footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jap-footer.js","sources":["../../../src/components/footer/jap-footer.ts"],"sourcesContent":["import { LitElement, html, nothing, unsafeCSS } from \"lit\";\nimport { customElement } from \"lit/decorators.js\";\nimport style from \"./jap-footer.scss?inline\";\nimport \"../../components\";\nimport { SignalWatcher } from \"@lit-labs/signals\";\nimport { breakpoint } from \"../../stores/breakpoint-store\";\nimport { classMap } from \"lit/directives/class-map.js\";\n\n@customElement(\"jap-footer\")\nexport class JapFooter extends SignalWatcher(LitElement) {\n  static styles = unsafeCSS(style);\n\n  render() {\n    const footerWrapperClass = {\n      \"footer-wrapper\": true,\n      [breakpoint.get()]: true,\n    };\n\n    return html`\n      <div class=${classMap(footerWrapperClass)}>\n        <jap-modal>\n          <jap-link slot=\"button\">Impressum</jap-link>\n          <div>Impressum content</div>\n        </jap-modal>\n        ${breakpoint.get() !== \"s\"\n          ? html`<jap-icon iconName=\"circle\"></jap-icon>`\n          : nothing}\n        <jap-link href=\"#\" target=\"_blank\">Github</jap-link>\n        ${breakpoint.get() !== \"s\"\n          ? html`<jap-icon iconName=\"circle\"></jap-icon>`\n          : nothing}\n        <jap-link href=\"#\" target=\"_blank\">Contact</jap-link>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"jap-footer\": JapFooter;\n  }\n}\n"],"names":["JapFooter","SignalWatcher","LitElement","footerWrapperClass","breakpoint","html","classMap","nothing","unsafeCSS","style","__decorateClass","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AASO,IAAMA,IAAN,cAAwBC,EAAcC,CAAU,EAAE;AAAA,EAGvD,SAAS;AACP,UAAMC,IAAqB;AAAA,MACzB,kBAAkB;AAAA,MAClB,CAACC,EAAW,KAAK,GAAG;AAAA,IAAA;AAGtB,WAAOC;AAAA,mBACQC,EAASH,CAAkB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,UAKrCC,EAAW,IAAA,MAAU,MACnBC,6CACAE,CAAO;AAAA;AAAA,UAETH,EAAW,IAAA,MAAU,MACnBC,6CACAE,CAAO;AAAA;AAAA;AAAA;AAAA,EAIjB;AACF;AA1BaP,EACJ,SAASQ,EAAUC,CAAK;AADpBT,IAANU,EAAA;AAAA,EADNC,EAAc,YAAY;AAAA,GACdX,CAAA;"}

package/dist/components/footer/jap-footer.scss.js

@@ -0,0 +1,5 @@
+const t = '@font-face{font-family:Satoshi-Regular;src:url(/assets/Satoshi-Regular.woff2) format("woff2"),url(/assets/Satoshi-Regular.woff) format("woff");font-weight:400;font-display:swap;font-style:normal}@font-face{font-family:Satoshi-Italic;src:url(/assets/Satoshi-Italic.woff2) format("woff2"),url(/assets/Satoshi-Italic.woff) format("woff");font-weight:400;font-display:swap;font-style:italic}@font-face{font-family:Satoshi-Bold;src:url(/assets/Satoshi-Bold.woff2) format("woff2"),url(/assets/Satoshi-Bold.woff) format("woff");font-weight:700;font-display:swap;font-style:normal}@font-face{font-family:Satoshi-Black;src:url(/assets/Satoshi-Black.woff2) format("woff2"),url(/assets/Satoshi-Black.woff) format("woff");font-weight:900;font-display:swap;font-style:normal}:host{display:block}.footer-wrapper{display:flex;justify-content:start;border-top:2px solid #3a3a3a;font-family:Satoshi-Regular,sans-serif;font-size:22px;line-height:32px}.footer-wrapper.s{flex-direction:column;justify-content:center;width:calc(100% - 64px);margin:0 32px;height:140px}.footer-wrapper.m{flex-direction:row;align-items:center;width:calc(100% - 80px);margin:0 40px;height:78px}.footer-wrapper.l{flex-direction:row;align-items:center;width:calc(100% - 192px);margin:0 96px;height:94px}.dot{display:flex;align-items:center;justify-content:center;width:28px;height:28px;color:#3a3a3a}';
+export {
+  t as default
+};
+//# sourceMappingURL=jap-footer.scss.js.map

package/dist/components/footer/jap-footer.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jap-footer.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/header/jap-header.js

@@ -0,0 +1,69 @@
+import { LitElement as n, nothing as c, html as s, unsafeCSS as h } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/lit/index.js";
+import { state as v, customElement as u } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/lit/decorators.js";
+import f from "./jap-header.scss.js";
+import "../button/jap-button.js";
+import "../flash/jap-flash.js";
+import "../footer/jap-footer.js";
+import "../heading/jap-heading.js";
+import "../icon/jap-icon.js";
+import "../icon-button/jap-icon-button.js";
+import "../image-link/jap-image-link.js";
+import "../link/jap-link.js";
+import "../modal/jap-modal.js";
+import "../navigation/jap-navigation.js";
+import "../tag/jap-tag.js";
+import { SignalWatcher as w } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/@lit-labs/signals/index.js";
+import { breakpoint as a } from "../../stores/breakpoint-store.js";
+import { classMap as g } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/lit/directives/class-map.js";
+var j = Object.defineProperty, M = Object.getOwnPropertyDescriptor, d = (t, r, i, e) => {
+  for (var o = e > 1 ? void 0 : e ? M(r, i) : r, l = t.length - 1, m; l >= 0; l--)
+    (m = t[l]) && (o = (e ? m(r, i, o) : m(o)) || o);
+  return e && o && j(r, i, o), o;
+};
+let p = class extends w(n) {
+  constructor() {
+    super(...arguments), this.showModal = !1;
+  }
+  render() {
+    const t = {
+      "header-wrapper": !0,
+      [a.get()]: !0
+    };
+    return s`
+      <div class=${g(t)}>
+        <div class="logo">jap</div>
+        ${a.get() !== "s" ? s`<div>
+              <slot></slot>
+            </div>` : s`<div class="burger-wrapper">
+              <jap-icon-button
+                iconName="burger-menu"
+                @click=${() => {
+      this.showModal = !this.showModal, console.log("Modal state:", this.showModal);
+    }}
+              ></jap-icon-button>
+            </div>`}
+        ${a.get() === "l" ? s`<div class="empty-div-desktop"></div>` : c}
+      </div>
+      <jap-modal
+        type="header"
+        .show=${this.showModal && a.get() === "s"}
+        id="modal"
+      >
+        <div class="nav-wrapper">
+          <slot></slot>
+        </div>
+      </jap-modal>
+    `;
+  }
+};
+p.styles = h(f);
+d([
+  v()
+], p.prototype, "showModal", 2);
+p = d([
+  u("jap-header")
+], p);
+export {
+  p as JapHeader
+};
+//# sourceMappingURL=jap-header.js.map

package/dist/components/header/jap-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jap-header.js","sources":["../../../src/components/header/jap-header.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS, nothing } from \"lit\";\nimport { customElement, state } from \"lit/decorators.js\";\nimport style from \"./jap-header.scss?inline\";\nimport \"../../components\";\nimport { SignalWatcher } from \"@lit-labs/signals\";\nimport { breakpoint } from \"../../stores/breakpoint-store\";\nimport { classMap } from \"lit/directives/class-map.js\";\n\n@customElement(\"jap-header\")\nexport class JapHeader extends SignalWatcher(LitElement) {\n  static styles = unsafeCSS(style);\n\n  @state() private showModal = false;\n\n  render() {\n    const headerWrapperClass = {\n      \"header-wrapper\": true,\n      [breakpoint.get()]: true,\n    };\n\n    return html`\n      <div class=${classMap(headerWrapperClass)}>\n        <div class=\"logo\">jap</div>\n        ${breakpoint.get() !== \"s\"\n          ? html`<div>\n              <slot></slot>\n            </div>`\n          : html`<div class=\"burger-wrapper\">\n              <jap-icon-button\n                iconName=\"burger-menu\"\n                @click=${() => {\n                  this.showModal = !this.showModal;\n                  console.log(\"Modal state:\", this.showModal);\n                }}\n              ></jap-icon-button>\n            </div>`}\n        ${breakpoint.get() === \"l\"\n          ? html`<div class=\"empty-div-desktop\"></div>`\n          : nothing}\n      </div>\n      <jap-modal\n        type=\"header\"\n        .show=${this.showModal && breakpoint.get() === \"s\"}\n        id=\"modal\"\n      >\n        <div class=\"nav-wrapper\">\n          <slot></slot>\n        </div>\n      </jap-modal>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"jap-header\": JapHeader;\n  }\n}\n"],"names":["JapHeader","SignalWatcher","LitElement","headerWrapperClass","breakpoint","html","classMap","nothing","unsafeCSS","style","__decorateClass","state","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AASO,IAAMA,IAAN,cAAwBC,EAAcC,CAAU,EAAE;AAAA,EAAlD,cAAA;AAAA,UAAA,GAAA,SAAA,GAGI,KAAQ,YAAY;AAAA,EAAA;AAAA,EAE7B,SAAS;AACP,UAAMC,IAAqB;AAAA,MACzB,kBAAkB;AAAA,MAClB,CAACC,EAAW,KAAK,GAAG;AAAA,IAAA;AAGtB,WAAOC;AAAA,mBACQC,EAASH,CAAkB,CAAC;AAAA;AAAA,UAErCC,EAAW,UAAU,MACnBC;AAAA;AAAA,sBAGAA;AAAA;AAAA;AAAA,yBAGa,MAAM;AACb,WAAK,YAAY,CAAC,KAAK,WACvB,QAAQ,IAAI,gBAAgB,KAAK,SAAS;AAAA,IAC5C,CAAC;AAAA;AAAA,mBAEE;AAAA,UACTD,EAAW,IAAA,MAAU,MACnBC,2CACAE,CAAO;AAAA;AAAA;AAAA;AAAA,gBAIH,KAAK,aAAaH,EAAW,IAAA,MAAU,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQxD;AACF;AA1CaJ,EACJ,SAASQ,EAAUC,CAAK;AAEdC,EAAA;AAAA,EAAhBC,EAAA;AAAM,GAHIX,EAGM,WAAA,aAAA,CAAA;AAHNA,IAANU,EAAA;AAAA,EADNE,EAAc,YAAY;AAAA,GACdZ,CAAA;"}

package/dist/components/header/jap-header.scss.js

@@ -0,0 +1,5 @@
+const t = '@font-face{font-family:Satoshi-Regular;src:url(/assets/Satoshi-Regular.woff2) format("woff2"),url(/assets/Satoshi-Regular.woff) format("woff");font-weight:400;font-display:swap;font-style:normal}@font-face{font-family:Satoshi-Italic;src:url(/assets/Satoshi-Italic.woff2) format("woff2"),url(/assets/Satoshi-Italic.woff) format("woff");font-weight:400;font-display:swap;font-style:italic}@font-face{font-family:Satoshi-Bold;src:url(/assets/Satoshi-Bold.woff2) format("woff2"),url(/assets/Satoshi-Bold.woff) format("woff");font-weight:700;font-display:swap;font-style:normal}@font-face{font-family:Satoshi-Black;src:url(/assets/Satoshi-Black.woff2) format("woff2"),url(/assets/Satoshi-Black.woff) format("woff");font-weight:900;font-display:swap;font-style:normal}:host{display:block}.header-wrapper{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.header-wrapper.s{width:calc(100% - 64px);margin:0 32px}.header-wrapper.m{width:calc(100% - 80px);margin:0 40px}.header-wrapper.l{width:calc(100% - 192px);margin:0 96px}.burger-wrapper{display:flex;align-items:center;justify-content:center}.nav-wrapper{width:100%;display:flex;justify-content:center;padding-bottom:100px}.empty-div-desktop{width:88px}.logo{font-family:Satoshi-Black,sans-serif;font-size:30px;line-height:168px;color:#3a3a3a;cursor:pointer}';
+export {
+  t as default
+};
+//# sourceMappingURL=jap-header.scss.js.map

package/dist/components/header/jap-header.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jap-header.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/heading/jap-heading.js

@@ -0,0 +1,63 @@
+import { LitElement as u, html as v, unsafeCSS as c } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/lit/index.js";
+import { property as d, customElement as f } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/lit/decorators.js";
+import h from "./jap-heading.scss.js";
+import { classMap as a } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/lit/directives/class-map.js";
+import { SignalWatcher as g } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/@lit-labs/signals/index.js";
+import { breakpoint as m } from "../../stores/breakpoint-store.js";
+import "../button/jap-button.js";
+import "../flash/jap-flash.js";
+import "../footer/jap-footer.js";
+import "../header/jap-header.js";
+import "../icon/jap-icon.js";
+import "../icon-button/jap-icon-button.js";
+import "../image-link/jap-image-link.js";
+import "../link/jap-link.js";
+import "../modal/jap-modal.js";
+import "../navigation/jap-navigation.js";
+import "../tag/jap-tag.js";
+var b = Object.defineProperty, w = Object.getOwnPropertyDescriptor, n = (r, t, o, i) => {
+  for (var e = i > 1 ? void 0 : i ? w(t, o) : t, p = r.length - 1, l; p >= 0; p--)
+    (l = r[p]) && (e = (i ? l(t, o, e) : l(e)) || e);
+  return i && e && b(t, o, e), e;
+};
+let s = class extends g(u) {
+  constructor() {
+    super(...arguments), this.size = "auto";
+  }
+  render() {
+    const r = {
+      "title-wrapper": !0,
+      [this.size === "auto" ? m.get() : this.size]: !0
+    }, t = {
+      "subtitle-wrapper": !0,
+      [this.size === "auto" ? m.get() : this.size]: !0
+    };
+    return v`
+      <div class="heading-wrapper">
+        <div class=${a(r)}>
+          <slot name="title-line-one"></slot>
+          <div class="title-line-two-wrapper">
+            <slot name="title-line-two"></slot>
+            <div class=${a(t)}>
+              <slot name="subtitle-right"></slot>
+            </div>
+          </div>
+        </div>
+        <div class=${a(t)}>
+          <slot name="subtitle-bottom"></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+s.styles = c(h);
+n([
+  d({ type: String })
+], s.prototype, "size", 2);
+s = n([
+  f("jap-heading")
+], s);
+export {
+  s as JapHeading
+};
+//# sourceMappingURL=jap-heading.js.map

package/dist/components/heading/jap-heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jap-heading.js","sources":["../../../src/components/heading/jap-heading.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport style from \"./jap-heading.scss?inline\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { SignalWatcher } from \"@lit-labs/signals\";\nimport { breakpoint } from \"../../stores/breakpoint-store\";\nimport \"../../components\";\n\n@customElement(\"jap-heading\")\nexport class JapHeading extends SignalWatcher(LitElement) {\n  static styles = unsafeCSS(style);\n\n  @property({ type: String }) size: \"l\" | \"m\" | \"s\" | \"auto\" = \"auto\";\n\n  render() {\n    const titleWrapperClasses = {\n      \"title-wrapper\": true,\n      [this.size === \"auto\" ? breakpoint.get() : this.size]: true,\n    };\n\n    const subTitleWrapperClasses = {\n      \"subtitle-wrapper\": true,\n      [this.size === \"auto\" ? breakpoint.get() : this.size]: true,\n    };\n\n    return html`\n      <div class=\"heading-wrapper\">\n        <div class=${classMap(titleWrapperClasses)}>\n          <slot name=\"title-line-one\"></slot>\n          <div class=\"title-line-two-wrapper\">\n            <slot name=\"title-line-two\"></slot>\n            <div class=${classMap(subTitleWrapperClasses)}>\n              <slot name=\"subtitle-right\"></slot>\n            </div>\n          </div>\n        </div>\n        <div class=${classMap(subTitleWrapperClasses)}>\n          <slot name=\"subtitle-bottom\"></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"jap-heading\": JapHeading;\n  }\n}\n"],"names":["JapHeading","SignalWatcher","LitElement","titleWrapperClasses","breakpoint","subTitleWrapperClasses","html","classMap","unsafeCSS","style","__decorateClass","property","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AASO,IAAMA,IAAN,cAAyBC,EAAcC,CAAU,EAAE;AAAA,EAAnD,cAAA;AAAA,UAAA,GAAA,SAAA,GAGuB,KAAA,OAAiC;AAAA,EAAA;AAAA,EAE7D,SAAS;AACP,UAAMC,IAAsB;AAAA,MAC1B,iBAAiB;AAAA,MACjB,CAAC,KAAK,SAAS,SAASC,EAAW,IAAA,IAAQ,KAAK,IAAI,GAAG;AAAA,IAAA,GAGnDC,IAAyB;AAAA,MAC7B,oBAAoB;AAAA,MACpB,CAAC,KAAK,SAAS,SAASD,EAAW,IAAA,IAAQ,KAAK,IAAI,GAAG;AAAA,IAAA;AAGzD,WAAOE;AAAA;AAAA,qBAEUC,EAASJ,CAAmB,CAAC;AAAA;AAAA;AAAA;AAAA,yBAIzBI,EAASF,CAAsB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKpCE,EAASF,CAAsB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKnD;AACF;AAjCaL,EACJ,SAASQ,EAAUC,CAAK;AAEHC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAHfX,EAGiB,WAAA,QAAA,CAAA;AAHjBA,IAANU,EAAA;AAAA,EADNE,EAAc,aAAa;AAAA,GACfZ,CAAA;"}

package/dist/components/heading/jap-heading.scss.js

@@ -0,0 +1,5 @@
+const t = '@font-face{font-family:Satoshi-Regular;src:url(/assets/Satoshi-Regular.woff2) format("woff2"),url(/assets/Satoshi-Regular.woff) format("woff");font-weight:400;font-display:swap;font-style:normal}@font-face{font-family:Satoshi-Italic;src:url(/assets/Satoshi-Italic.woff2) format("woff2"),url(/assets/Satoshi-Italic.woff) format("woff");font-weight:400;font-display:swap;font-style:italic}@font-face{font-family:Satoshi-Bold;src:url(/assets/Satoshi-Bold.woff2) format("woff2"),url(/assets/Satoshi-Bold.woff) format("woff");font-weight:700;font-display:swap;font-style:normal}@font-face{font-family:Satoshi-Black;src:url(/assets/Satoshi-Black.woff2) format("woff2"),url(/assets/Satoshi-Black.woff) format("woff");font-weight:900;font-display:swap;font-style:normal}:host{display:inline-block}.heading-wrapper{display:flex;flex-direction:column;gap:32px}.title-wrapper{color:#3a3a3a;display:flex;flex-direction:column;gap:0px}.title-wrapper.l{font-family:Satoshi-Black,sans-serif;font-size:130px;line-height:112px}.title-wrapper.m{font-family:Satoshi-Black,sans-serif;font-size:100px;line-height:90px}.title-wrapper.s{font-family:Satoshi-Black,sans-serif;font-size:80px;line-height:72px}.subtitle-wrapper{color:#3a3a3a}.subtitle-wrapper.l{font-family:Satoshi-Italic,sans-serif;font-size:60px;line-height:64px}.subtitle-wrapper.m{font-family:Satoshi-Italic,sans-serif;font-size:46px;line-height:50px}.subtitle-wrapper.s{font-family:Satoshi-Italic,sans-serif;font-size:34px;line-height:36px}.title-line-two-wrapper{display:flex;flex-direction:row;gap:30px;align-items:baseline}';
+export {
+  t as default
+};
+//# sourceMappingURL=jap-heading.scss.js.map

package/dist/components/heading/jap-heading.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jap-heading.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/icon/icon-data.js

@@ -0,0 +1,47 @@
+const o = {
+  fire: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" class="size-6">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M15.362 5.214A8.252 8.252 0 0 1 12 21 8.25 8.25 0 0 1 6.038 7.047 8.287 8.287 0 0 0 9 9.601a8.983 8.983 0 0 1 3.361-6.867 8.21 8.21 0 0 0 3 2.48Z" />
+    <path stroke-linecap="round" stroke-linejoin="round" d="M12 18a3.75 3.75 0 0 0 .495-7.468 5.99 5.99 0 0 0-1.925 3.547 5.975 5.975 0 0 1-2.133-1.001A3.75 3.75 0 0 0 12 18Z" />
+    </svg>`,
+  lightning: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z" />
+</svg>
+`,
+  chat: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M8.625 12a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 0 1-2.555-.337A5.972 5.972 0 0 1 5.41 20.97a5.969 5.969 0 0 1-.474-.065 4.48 4.48 0 0 0 .978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25Z" />
+</svg>
+`,
+  puzzle: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M14.25 6.087c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.036-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959v0a.64.64 0 0 1-.657.643 48.39 48.39 0 0 1-4.163-.3c.186 1.613.293 3.25.315 4.907a.656.656 0 0 1-.658.663v0c-.355 0-.676-.186-.959-.401a1.647 1.647 0 0 0-1.003-.349c-1.036 0-1.875 1.007-1.875 2.25s.84 2.25 1.875 2.25c.369 0 .713-.128 1.003-.349.283-.215.604-.401.959-.401v0c.31 0 .555.26.532.57a48.039 48.039 0 0 1-.642 5.056c1.518.19 3.058.309 4.616.354a.64.64 0 0 0 .657-.643v0c0-.355-.186-.676-.401-.959a1.647 1.647 0 0 1-.349-1.003c0-1.035 1.008-1.875 2.25-1.875 1.243 0 2.25.84 2.25 1.875 0 .369-.128.713-.349 1.003-.215.283-.4.604-.4.959v0c0 .333.277.599.61.58a48.1 48.1 0 0 0 5.427-.63 48.05 48.05 0 0 0 .582-4.717.532.532 0 0 0-.533-.57v0c-.355 0-.676.186-.959.401-.29.221-.634.349-1.003.349-1.035 0-1.875-1.007-1.875-2.25s.84-2.25 1.875-2.25c.37 0 .713.128 1.003.349.283.215.604.401.96.401v0a.656.656 0 0 0 .658-.663 48.422 48.422 0 0 0-.37-5.36c-1.886.342-3.81.574-5.766.689a.578.578 0 0 1-.61-.58v0Z" />
+</svg>
+`,
+  "arrow-circle-left": `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 9-3 3m0 0 3 3m-3-3h7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+</svg>
+`,
+  "arrow-right": `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
+</svg>
+`,
+  "burger-menu": `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.6" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M6 8h12M6 16h12" />
+</svg>
+`,
+  x: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+</svg>
+`,
+  circle: `<svg
+        width="8"
+        height="8"
+        viewBox="0 0 8 8"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle cx="4" cy="4" r="4" fill="currentColor" />
+      </svg>
+`
+};
+export {
+  o as icons
+};
+//# sourceMappingURL=icon-data.js.map

package/dist/components/icon/icon-data.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-data.js","sources":["../../../src/components/icon/icon-data.ts"],"sourcesContent":["const icons = {\n  fire: `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1\" stroke=\"currentColor\" class=\"size-6\">\n    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.362 5.214A8.252 8.252 0 0 1 12 21 8.25 8.25 0 0 1 6.038 7.047 8.287 8.287 0 0 0 9 9.601a8.983 8.983 0 0 1 3.361-6.867 8.21 8.21 0 0 0 3 2.48Z\" />\n    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 18a3.75 3.75 0 0 0 .495-7.468 5.99 5.99 0 0 0-1.925 3.547 5.975 5.975 0 0 1-2.133-1.001A3.75 3.75 0 0 0 12 18Z\" />\n    </svg>`,\n  lightning: `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1\" stroke=\"currentColor\" class=\"size-6\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z\" />\n</svg>\n`,\n  chat: `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1\" stroke=\"currentColor\" class=\"size-6\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8.625 12a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 0 1-2.555-.337A5.972 5.972 0 0 1 5.41 20.97a5.969 5.969 0 0 1-.474-.065 4.48 4.48 0 0 0 .978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25Z\" />\n</svg>\n`,\n  puzzle: `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1\" stroke=\"currentColor\" class=\"size-6\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.25 6.087c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.036-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959v0a.64.64 0 0 1-.657.643 48.39 48.39 0 0 1-4.163-.3c.186 1.613.293 3.25.315 4.907a.656.656 0 0 1-.658.663v0c-.355 0-.676-.186-.959-.401a1.647 1.647 0 0 0-1.003-.349c-1.036 0-1.875 1.007-1.875 2.25s.84 2.25 1.875 2.25c.369 0 .713-.128 1.003-.349.283-.215.604-.401.959-.401v0c.31 0 .555.26.532.57a48.039 48.039 0 0 1-.642 5.056c1.518.19 3.058.309 4.616.354a.64.64 0 0 0 .657-.643v0c0-.355-.186-.676-.401-.959a1.647 1.647 0 0 1-.349-1.003c0-1.035 1.008-1.875 2.25-1.875 1.243 0 2.25.84 2.25 1.875 0 .369-.128.713-.349 1.003-.215.283-.4.604-.4.959v0c0 .333.277.599.61.58a48.1 48.1 0 0 0 5.427-.63 48.05 48.05 0 0 0 .582-4.717.532.532 0 0 0-.533-.57v0c-.355 0-.676.186-.959.401-.29.221-.634.349-1.003.349-1.035 0-1.875-1.007-1.875-2.25s.84-2.25 1.875-2.25c.37 0 .713.128 1.003.349.283.215.604.401.96.401v0a.656.656 0 0 0 .658-.663 48.422 48.422 0 0 0-.37-5.36c-1.886.342-3.81.574-5.766.689a.578.578 0 0 1-.61-.58v0Z\" />\n</svg>\n`,\n  \"arrow-circle-left\": `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1\" stroke=\"currentColor\" class=\"size-6\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m11.25 9-3 3m0 0 3 3m-3-3h7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\" />\n</svg>\n`,\n  \"arrow-right\": `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1\" stroke=\"currentColor\" class=\"size-6\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3\" />\n</svg>\n`,\n  \"burger-menu\": `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.6\" stroke=\"currentColor\" class=\"size-6\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 8h12M6 16h12\" />\n</svg>\n`,\n  x: `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-6\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\" />\n</svg>\n`,\n  circle: `<svg\n        width=\"8\"\n        height=\"8\"\n        viewBox=\"0 0 8 8\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <circle cx=\"4\" cy=\"4\" r=\"4\" fill=\"currentColor\" />\n      </svg>\n`,\n};\n\nexport { icons };\n"],"names":["icons"],"mappings":"AAAA,MAAMA,IAAQ;AAAA,EACZ,MAAM;AAAA;AAAA;AAAA;AAAA,EAIN,WAAW;AAAA;AAAA;AAAA;AAAA,EAIX,MAAM;AAAA;AAAA;AAAA;AAAA,EAIN,QAAQ;AAAA;AAAA;AAAA;AAAA,EAIR,qBAAqB;AAAA;AAAA;AAAA;AAAA,EAIrB,eAAe;AAAA;AAAA;AAAA;AAAA,EAIf,eAAe;AAAA;AAAA;AAAA;AAAA,EAIf,GAAG;AAAA;AAAA;AAAA;AAAA,EAIH,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASV;"}

package/dist/components/icon/jap-icon.js

@@ -0,0 +1,58 @@
+import { unsafeCSS as l, LitElement as a, html as f } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/lit/index.js";
+import { property as c, customElement as h } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/lit/decorators.js";
+import { icons as u } from "./icon-data.js";
+import y from "./jap-icon.scss.js";
+import { classMap as v } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/lit/directives/class-map.js";
+import { unsafeHTML as _ } from "/Users/jo/Documents/dev/Web/026-jap-ds/jap/node_modules/lit/directives/unsafe-html.js";
+import "../button/jap-button.js";
+import "../flash/jap-flash.js";
+import "../footer/jap-footer.js";
+import "../header/jap-header.js";
+import "../heading/jap-heading.js";
+import "../icon-button/jap-icon-button.js";
+import "../image-link/jap-image-link.js";
+import "../link/jap-link.js";
+import "../modal/jap-modal.js";
+import "../navigation/jap-navigation.js";
+import "../tag/jap-tag.js";
+var g = Object.defineProperty, S = Object.getOwnPropertyDescriptor, p = (o, e, s, i) => {
+  for (var r = i > 1 ? void 0 : i ? S(e, s) : e, m = o.length - 1, n; m >= 0; m--)
+    (n = o[m]) && (r = (i ? n(e, s, r) : n(r)) || r);
+  return i && r && g(e, s, r), r;
+};
+let t = class extends a {
+  constructor() {
+    super(...arguments), this.iconName = "fire", this.size = "48px", this.color = "black";
+  }
+  render() {
+    const o = {
+      "icon-wrapper": !0,
+      [this.color]: !0
+    };
+    return f`
+      <div
+        class=${v(o)}
+        style="height: ${this.size}; width: ${this.size};"
+      >
+        ${_(u[this.iconName])}
+      </div>
+    `;
+  }
+};
+t.styles = l(y);
+p([
+  c({ type: String })
+], t.prototype, "iconName", 2);
+p([
+  c({ type: String })
+], t.prototype, "size", 2);
+p([
+  c({ type: String })
+], t.prototype, "color", 2);
+t = p([
+  h("jap-icon")
+], t);
+export {
+  t as JapIcon
+};
+//# sourceMappingURL=jap-icon.js.map

package/dist/components/icon/jap-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jap-icon.js","sources":["../../../src/components/icon/jap-icon.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { icons } from \"./icon-data.ts\";\nimport style from \"./jap-icon.scss?inline\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\";\nimport \"../../components\";\n\nexport type IconName =\n  | \"circle\"\n  | \"x\"\n  | \"fire\"\n  | \"puzzle\"\n  | \"lightning\"\n  | \"arrow-right\"\n  | \"arrow-circle-left\"\n  | \"burger-menu\"\n  | \"chat\";\n\n@customElement(\"jap-icon\")\nexport class JapIcon extends LitElement {\n  static styles = unsafeCSS(style);\n\n  @property({ type: String }) iconName: IconName = \"fire\";\n\n  @property({ type: String }) size:\n    | \"72px\"\n    | \"56px\"\n    | \"48px\"\n    | \"40px\"\n    | \"32px\"\n    | \"24px\"\n    | \"16px\" = \"48px\";\n\n  @property({ type: String }) color:\n    | \"red\"\n    | \"purple\"\n    | \"blue\"\n    | \"black\"\n    | \"white\"\n    | \"neutral-200\"\n    | \"neutral-400\"\n    | \"neutral-600\" = \"black\";\n\n  render() {\n    const iconWrapperClasses = {\n      \"icon-wrapper\": true,\n      [this.color]: true,\n    };\n\n    return html`\n      <div\n        class=${classMap(iconWrapperClasses)}\n        style=\"height: ${this.size}; width: ${this.size};\"\n      >\n        ${unsafeHTML(icons[this.iconName])}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"jap-icon\": JapIcon;\n  }\n}\n"],"names":["JapIcon","LitElement","iconWrapperClasses","html","classMap","unsafeHTML","icons","unsafeCSS","style","__decorateClass","property","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAoBO,IAAMA,IAAN,cAAsBC,EAAW;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA,GAGuB,KAAA,WAAqB,QAErB,KAAA,OAOf,QAEe,KAAA,QAQR;AAAA,EAAA;AAAA,EAEpB,SAAS;AACP,UAAMC,IAAqB;AAAA,MACzB,gBAAgB;AAAA,MAChB,CAAC,KAAK,KAAK,GAAG;AAAA,IAAA;AAGhB,WAAOC;AAAA;AAAA,gBAEKC,EAASF,CAAkB,CAAC;AAAA,yBACnB,KAAK,IAAI,YAAY,KAAK,IAAI;AAAA;AAAA,UAE7CG,EAAWC,EAAM,KAAK,QAAQ,CAAC,CAAC;AAAA;AAAA;AAAA,EAGxC;AACF;AAvCaN,EACJ,SAASO,EAAUC,CAAK;AAEHC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAHfV,EAGiB,WAAA,YAAA,CAAA;AAEAS,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GALfV,EAKiB,WAAA,QAAA,CAAA;AASAS,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAdfV,EAciB,WAAA,SAAA,CAAA;AAdjBA,IAANS,EAAA;AAAA,EADNE,EAAc,UAAU;AAAA,GACZX,CAAA;"}

package/dist/components/icon/jap-icon.scss.js

@@ -0,0 +1,5 @@
+const o = '@font-face{font-family:Satoshi-Regular;src:url(/assets/Satoshi-Regular.woff2) format("woff2"),url(/assets/Satoshi-Regular.woff) format("woff");font-weight:400;font-display:swap;font-style:normal}@font-face{font-family:Satoshi-Italic;src:url(/assets/Satoshi-Italic.woff2) format("woff2"),url(/assets/Satoshi-Italic.woff) format("woff");font-weight:400;font-display:swap;font-style:italic}@font-face{font-family:Satoshi-Bold;src:url(/assets/Satoshi-Bold.woff2) format("woff2"),url(/assets/Satoshi-Bold.woff) format("woff");font-weight:700;font-display:swap;font-style:normal}@font-face{font-family:Satoshi-Black;src:url(/assets/Satoshi-Black.woff2) format("woff2"),url(/assets/Satoshi-Black.woff) format("woff");font-weight:900;font-display:swap;font-style:normal}:host{display:inline-block}.icon-wrapper{display:flex;align-items:center;justify-content:center}.icon-wrapper.blue{color:#2a91ff}.icon-wrapper.red{color:#ff4d2a}.icon-wrapper.purple{color:#bf2aff}.icon-wrapper.black{color:#3a3a3a}.icon-wrapper.white{color:#fff}.icon-wrapper.neutral-200{color:#f3f3f3}.icon-wrapper.neutral-400{color:#d5d5d5}.icon-wrapper.neutral-600{color:#898989}';
+export {
+  o as default
+};
+//# sourceMappingURL=jap-icon.scss.js.map

package/dist/components/icon/jap-icon.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jap-icon.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}