kss-modern 0.0.1

package/dist/styleguide-assets/client-BZlkq2d8.js

@@ -0,0 +1 @@
+import "./main-B97JcbYk.js";

package/dist/styleguide-assets/client-fullpage-1rKiNQVN.js

@@ -0,0 +1,62 @@
+var s = Object.defineProperty;
+var d = (o, e, t) => e in o ? s(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
+var l = (o, e, t) => d(o, typeof e != "symbol" ? e + "" : e, t);
+class n {
+  constructor(e) {
+    l(this, "modifier");
+    l(this, "placeholder");
+    this.modifier = e.modifier, this.placeholder = e.placeholder || "{{modifier_class}}";
+  }
+  initialize(e = document) {
+    this.modifier && this.replaceInDocument(e);
+  }
+  static fromIframe(e = document) {
+    if (!window.frameElement)
+      throw new Error("ModifierReplacer can only be initialized from an iframe context.");
+    const t = window.frameElement.getAttribute("data-modifier");
+    if (!t)
+      return null;
+    const i = t.split(".").filter((a) => a.length > 0).join(" "), r = new n({ modifier: i });
+    return r.initialize(e), r;
+  }
+  static fromUrl(e = document) {
+    const i = new URLSearchParams(window.location.search).get("modifier");
+    if (!i)
+      return null;
+    const r = i.split(".").filter((c) => c.length > 0).join(" "), a = new n({ modifier: r });
+    return a.initialize(e), a;
+  }
+  replaceAll(e) {
+    const t = encodeURIComponent(JSON.stringify(this.placeholder)), i = JSON.stringify({ modifierClass: this.placeholder }), r = encodeURIComponent(i);
+    return e.replace(new RegExp(this.escapeRegExp(this.placeholder), "g"), this.modifier).replace(new RegExp(this.escapeRegExp(t), "g"), this.modifier).replace(new RegExp(this.escapeRegExp(r), "g"), this.modifier);
+  }
+  escapeRegExp(e) {
+    return e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  }
+  replaceInDocument(e) {
+    const t = e.createTreeWalker(
+      e.body,
+      NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT,
+      {
+        acceptNode: () => NodeFilter.FILTER_ACCEPT
+      }
+    );
+    for (; t.nextNode(); ) {
+      const i = t.currentNode;
+      i.nodeType === Node.TEXT_NODE ? this.replaceInTextNode(i) : i.nodeType === Node.ELEMENT_NODE && this.replaceInElementAttributes(i);
+    }
+  }
+  replaceInTextNode(e) {
+    if (e.textContent) {
+      const t = e.textContent, i = this.replaceAll(t);
+      t !== i && (e.textContent = i);
+    }
+  }
+  replaceInElementAttributes(e) {
+    Array.from(e.attributes).forEach((t) => {
+      const i = t.value, r = this.replaceAll(i);
+      i !== r && (t.value = r);
+    });
+  }
+}
+window.frameElement ? (window.frameElement.getAttribute("data-preview") === "true" && document.documentElement.classList.add("styleguide-preview"), window.frameElement.hasAttribute("data-modifier") && n.fromIframe()) : new URLSearchParams(window.location.search).get("modifier") && n.fromUrl();

package/dist/styleguide-assets/clipboard-DhKzwemV.js

@@ -0,0 +1,19 @@
+import { r as o } from "./main-B97JcbYk.js";
+const c = (t, a) => {
+  t.forEach((e) => {
+    let r = e.getAttribute(a);
+    if (!r)
+      return;
+    e.getAttribute("data-clipboard-uri-encoded") === "true" && (r = decodeURIComponent(r)), e.addEventListener("click", async () => {
+      await navigator.clipboard.writeText(r).catch(console.error);
+      const i = e.getAttribute("data-clipboard-alert-message");
+      o(
+        i ?? "Copied to clipboard!",
+        '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4"><path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm3.844-8.791a.75.75 0 0 0-1.188-.918l-3.7 4.79-1.649-1.833a.75.75 0 1 0-1.114 1.004l2.25 2.5a.75.75 0 0 0 1.15-.043l4.25-5.5Z" clip-rule="evenodd" /></svg>'
+      );
+    });
+  });
+};
+export {
+  c as default
+};

package/dist/styleguide-assets/html-validator-DqoaRE1y.js

@@ -0,0 +1,136 @@
+const u = {
+  header: [
+    "background: #ff5757",
+    "color: white",
+    "padding: 8px 12px",
+    "border-radius: 4px 4px 0 0",
+    "font-weight: bold",
+    "font-size: 14px"
+  ].join(";"),
+  elementStyle: [
+    "color: #d32f2f",
+    "font-weight: bold",
+    "font-family: monospace"
+  ].join(";"),
+  messageStyle: [
+    "color: #333",
+    "font-style: italic"
+  ].join(";")
+};
+let n;
+function y(o, l) {
+  console.group("%cValidation Error", u.header), console.info(
+    "%c%o",
+    u.elementStyle,
+    l
+  ), console.info(
+    "%c%s",
+    u.messageStyle,
+    o
+  ), console.groupEnd();
+}
+async function v() {
+  const { HtmlValidate: o, StaticConfigLoader: l } = await import("./browser-BSX_g1yp.js");
+  if (n)
+    return n;
+  const i = new l();
+  return n = new o(i), n;
+}
+function m(o) {
+  return o.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+async function E(o, l, i) {
+  const p = o.getAttribute("data-code-audit-iframe");
+  if (!p)
+    throw new Error("No code audit template selector provided");
+  const c = document.querySelector(`#${p}`);
+  if (!c)
+    throw new Error("Code audit template not found");
+  const b = await v(), w = await (await fetch(c.src)).text(), d = l.querySelector(".audit-results");
+  if (!d)
+    throw new Error("No audit results list found");
+  const { results: g, valid: f } = await b.validateString(w, {
+    rules: {
+      "no-trailing-whitespace": "off",
+      "no-inline-style": "off"
+    }
+  });
+  if (f || g.length === 0)
+    return { isValid: !0 };
+  const x = g[0].messages.sort((t, e) => t.severity - e.severity).reduce((t, e) => {
+    const r = t.find((s) => s.ruleId === e.ruleId);
+    return r ? (e.selector && !r.selectors.includes(e.selector) && r.selectors.push(e.selector), t) : (t.push({
+      // escape possible html entities
+      ruleId: e.ruleId.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"),
+      message: e.message,
+      ruleUrl: e.ruleUrl || `https://html-validate.org/rules/${e.ruleId}.html`,
+      selectors: e.selector ? [e.selector] : [],
+      context: e.context
+    }), t);
+  }, []);
+  return d.innerHTML = `
+    ${x.map((t) => `
+        <li class="border-b border-styleguide-border first:border-t last:border-none">
+            <details class="group">
+                <summary class="flex cursor-pointer justify-start items-center px-6 py-4 text-sm bg-styleguide-bg transition hover:bg-[rgb(242,242,242)] focus:bg-[rgb(242,242,242)] dark:hover:bg-[rgb(26,26,26)] dark:focus:bg-[rgb(26,26,26)]">
+                    <svg class="h-4 w-4 group-open:rotate-90 transition-transform mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+                        <path fill-rule="evenodd" d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"></path>
+                    </svg>
+                    <span>
+                        <span class="font-semibold mr-1">${t.ruleId}:</span><span>${m(t.message)}</span>
+                    </span>
+                </summary>
+                
+                <div class="border-t pl-12 pr-6 py-6 text-sm bg-styleguide-bg-highlight border-styleguide-border">
+                     <p class="mb-3 pb-3 border-b border-styleguide-border">
+                        <a class="flex gap-1 group/link items-center text-sm text-blue-600" href="${t.ruleUrl}" target="_blank">
+                            Learn more about the rule
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="h-3 w-3">
+                                <path class="transition group-hover/link:translate-x-px group-hover/link:-translate-y-px group-focus/link:translate-x-px group-focus/link:-translate-y-px" d="M6.22 8.72a.75.75 0 0 0 1.06 1.06l5.22-5.22v1.69a.75.75 0 0 0 1.5 0v-3.5a.75.75 0 0 0-.75-.75h-3.5a.75.75 0 0 0 0 1.5h1.69L6.22 8.72Z"></path>
+                                <path d="M3.5 6.75c0-.69.56-1.25 1.25-1.25H7A.75.75 0 0 0 7 4H4.75A2.75 2.75 0 0 0 2 6.75v4.5A2.75 2.75 0 0 0 4.75 14h4.5A2.75 2.75 0 0 0 12 11.25V9a.75.75 0 0 0-1.5 0v2.25c0 .69-.56 1.25-1.25 1.25h-4.5c-.69 0-1.25-.56-1.25-1.25v-4.5Z"></path>
+                            </svg>
+                        </a>
+                    </p>
+                    
+                    <h3 class="font-bold text-sm text-styleguide-highlight">Selectors</h3>
+                    <ul>
+                        ${t.selectors.map((e) => `
+                            <li>
+                                <button 
+                                    class="block font-mono py-1.5 text-[13px] text-blue-600 text-sm cursor-pointer text-left"
+                                    data-iframe-selector="${m(`${t.ruleId}: ${t.message}`)}"
+                                  >
+                                    ${e}
+                                </button>
+                            </li>
+                        `).join(`
+`)}
+                    </ul>
+                </div>
+            </details>
+        </li>
+    `).join(`
+`)}
+  `, d.querySelectorAll("[data-iframe-selector]").forEach((t) => {
+    const e = t.getAttribute("data-iframe-selector");
+    if (!e)
+      throw new Error("No message found");
+    t.addEventListener("click", async () => {
+      var h;
+      await i();
+      const r = t.textContent;
+      if (!r)
+        throw new Error("No selector found");
+      const s = (h = c.contentDocument) == null ? void 0 : h.querySelectorAll(r);
+      if (!s)
+        throw new Error("No elements found");
+      s.forEach((a) => {
+        y(e, a), a.style.outline = "2px solid red", a.scrollIntoView({ behavior: "smooth", block: "center" }), setTimeout(() => a.style.outline = "", 5e3);
+      });
+    });
+  }), { isValid: f };
+}
+export {
+  E as auditCode,
+  v as createHtmlValidator
+};

package/dist/styleguide-assets/icons/external-link.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
+    <path d="M6.22 8.72a.75.75 0 0 0 1.06 1.06l5.22-5.22v1.69a.75.75 0 0 0 1.5 0v-3.5a.75.75 0 0 0-.75-.75h-3.5a.75.75 0 0 0 0 1.5h1.69L6.22 8.72Z" />
+    <path d="M3.5 6.75c0-.69.56-1.25 1.25-1.25H7A.75.75 0 0 0 7 4H4.75A2.75 2.75 0 0 0 2 6.75v4.5A2.75 2.75 0 0 0 4.75 14h4.5A2.75 2.75 0 0 0 12 11.25V9a.75.75 0 0 0-1.5 0v2.25c0 .69-.56 1.25-1.25 1.25h-4.5c-.69 0-1.25-.56-1.25-1.25v-4.5Z" />
+</svg>

package/dist/styleguide-assets/icons/figma.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><g transform="translate(100)" fill-rule="nonzero" fill="none"><path d="M0 500c0-55.228 44.772-100 100-100h100v100c0 55.228-44.772 100-100 100S0 555.228 0 500Z" fill="#24CB71"/><path d="M200 0v200h100c55.228 0 100-44.772 100-100S355.228 0 300 0H200Z" fill="#FF7237"/><circle fill="#00B6FF" cx="299.167" cy="300" r="100"/><path d="M0 100c0 55.228 44.772 100 100 100h100V0H100C44.772 0 0 44.772 0 100Z" fill="#FF3737"/><path d="M0 300c0 55.228 44.772 100 100 100h100V200H100C44.772 200 0 244.772 0 300Z" fill="#874FFF"/></g></svg>

package/dist/styleguide-assets/icons/phpstorm.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70" style="enable-background:new 0 0 70 70" xml:space="preserve"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1=".558" y1="46.846" x2="29.947" y2="8.026"><stop offset=".016" style="stop-color:#765af8"/><stop offset=".382" style="stop-color:#b345f1"/><stop offset=".758" style="stop-color:#fa3293"/><stop offset=".941" style="stop-color:#ff318c"/></linearGradient><path style="fill:url(#a)" d="m39.6 15.2-3.3-10L11.9 0 0 13.5l37.2 19z"/><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="2.73" y1="48.379" x2="32.072" y2="9.621"><stop offset=".016" style="stop-color:#765af8"/><stop offset=".382" style="stop-color:#b345f1"/><stop offset=".758" style="stop-color:#fa3293"/><stop offset=".941" style="stop-color:#ff318c"/></linearGradient><path style="fill:url(#b)" d="m28 41.4-.7-20.8L0 13.5l6.7 40.1 21.3-.2z"/><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="50.857" y1="46.405" x2="34.274" y2="7.048"><stop offset=".183" style="stop-color:#765af8"/><stop offset=".238" style="stop-color:#8655f6"/><stop offset=".345" style="stop-color:#9f4cf3"/><stop offset=".443" style="stop-color:#ae47f2"/><stop offset=".522" style="stop-color:#b345f1"/></linearGradient><path style="fill:url(#c)" d="m22.1 41 1.3-16.5L43.2 4.2l17.7 3.2L70 30.1l-9.5 9.4L45 37l-9.6 10.1z"/><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="63.266" y1="57.339" x2="24.698" y2="27.516"><stop offset=".016" style="stop-color:#765af8"/><stop offset=".382" style="stop-color:#b345f1"/></linearGradient><path style="fill:url(#d)" d="M43.2 4.2 14.8 29.4l5.5 32.4L43.9 70 70 54.4z"/><path style="fill:#000" d="M13.4 13.4h43.2v43.2H13.4z"/><path style="fill:#fff" d="M17.5 48.5h16.2v2.7H17.5zM17.3 19h7.3c4.3 0 6.9 2.5 6.9 6.2v.1c0 4.2-3.2 6.3-7.3 6.3h-3V37h-3.9V19zm7.1 9c2 0 3.1-1.2 3.1-2.7v-.1c0-1.8-1.2-2.7-3.2-2.7h-3V28h3.1zM32.5 34.4l2.3-2.8c1.6 1.3 3.3 2.2 5.4 2.2 1.6 0 2.6-.6 2.6-1.7V32c0-1-.6-1.5-3.6-2.3-3.6-.9-6-1.9-6-5.5v-.1c0-3.3 2.6-5.4 6.3-5.4 2.6 0 4.9.8 6.7 2.3l-2.1 3c-1.6-1.1-3.2-1.8-4.7-1.8s-2.3.7-2.3 1.6v.1c0 1.2.8 1.6 3.9 2.4 3.6 1 5.7 2.3 5.7 5.4v.1c0 3.6-2.7 5.6-6.6 5.6-2.7-.1-5.4-1.1-7.6-3"/></svg>

package/dist/styleguide-assets/icons/vscode.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><mask id="a" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"><path fill-rule="evenodd" clip-rule="evenodd" d="M70.912 99.317a6.223 6.223 0 0 0 4.96-.19l20.589-9.907A6.25 6.25 0 0 0 100 83.587V16.413a6.25 6.25 0 0 0-3.54-5.632L75.874.874a6.226 6.226 0 0 0-7.104 1.21L29.355 38.04 12.187 25.01a4.162 4.162 0 0 0-5.318.236l-5.506 5.009a4.168 4.168 0 0 0-.004 6.162L16.247 50 1.36 63.583a4.168 4.168 0 0 0 .004 6.162l5.506 5.01a4.162 4.162 0 0 0 5.318.236l17.168-13.032L68.77 97.917a6.217 6.217 0 0 0 2.143 1.4ZM75.015 27.3 45.11 50l29.906 22.701V27.3Z" fill="#fff"/></mask><g mask="url(#a)"><path d="M96.461 10.796 75.857.876a6.23 6.23 0 0 0-7.107 1.207l-67.451 61.5a4.167 4.167 0 0 0 .004 6.162l5.51 5.009a4.167 4.167 0 0 0 5.32.236l81.228-61.62c2.725-2.067 6.639-.124 6.639 3.297v-.24a6.25 6.25 0 0 0-3.539-5.63Z" fill="#0065A9"/><g filter="url(#b)"><path d="m96.461 89.204-20.604 9.92a6.229 6.229 0 0 1-7.107-1.207l-67.451-61.5a4.167 4.167 0 0 1 .004-6.162l5.51-5.009a4.167 4.167 0 0 1 5.32-.236l81.228 61.62c2.725 2.067 6.639.124 6.639-3.297v.24a6.25 6.25 0 0 1-3.539 5.63Z" fill="#007ACC"/></g><g filter="url(#c)"><path d="M75.858 99.126a6.232 6.232 0 0 1-7.108-1.21c2.306 2.307 6.25.674 6.25-2.588V4.672c0-3.262-3.944-4.895-6.25-2.589a6.232 6.232 0 0 1 7.108-1.21l20.6 9.908A6.25 6.25 0 0 1 100 16.413v67.174a6.25 6.25 0 0 1-3.541 5.633l-20.601 9.906Z" fill="#1F9CF0"/></g><path fill-rule="evenodd" clip-rule="evenodd" d="M70.851 99.317a6.224 6.224 0 0 0 4.96-.19L96.4 89.22a6.25 6.25 0 0 0 3.54-5.633V16.413a6.25 6.25 0 0 0-3.54-5.632L75.812.874a6.226 6.226 0 0 0-7.104 1.21L29.294 38.04 12.126 25.01a4.162 4.162 0 0 0-5.317.236l-5.507 5.009a4.168 4.168 0 0 0-.004 6.162L16.186 50 1.298 63.583a4.168 4.168 0 0 0 .004 6.162l5.507 5.009a4.162 4.162 0 0 0 5.317.236L29.294 61.96l39.414 35.958a6.218 6.218 0 0 0 2.143 1.4ZM74.954 27.3 45.048 50l29.906 22.701V27.3Z" fill="url(#d)" style="mix-blend-mode:overlay" opacity=".25"/></g><defs><filter id="b" x="-8.394" y="15.829" width="116.727" height="92.246" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset/><feGaussianBlur stdDeviation="4.167"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="overlay" in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter><filter id="c" x="60.417" y="-8.076" width="47.917" height="116.151" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset/><feGaussianBlur stdDeviation="4.167"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="overlay" in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter><linearGradient id="d" x1="49.939" y1=".258" x2="49.939" y2="99.742" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient></defs></svg>

package/dist/styleguide-assets/icons-oK5xUF8R.js

@@ -0,0 +1,37 @@
+import { a as r, s as l } from "./main-B97JcbYk.js";
+const p = (c, s, a) => {
+  c.addEventListener("input", () => {
+    const o = c.value.toLowerCase();
+    s.querySelectorAll("li").forEach((e) => {
+      var t;
+      const n = (t = e.textContent) == null ? void 0 : t.trim().toLowerCase();
+      e.classList.toggle("hidden", !(n != null && n.includes(o)));
+    }), a.classList.toggle("hidden", o.length === 0);
+  }), a.addEventListener("click", () => {
+    c.value = "", c.dispatchEvent(new Event("input")), c.focus();
+  }), s.querySelectorAll(".icon-search-list__item").forEach((o) => {
+    const i = o.querySelector(".icon-search-list__item-copy");
+    if (!i)
+      throw new Error("No copy button found");
+    const e = o.querySelector("svg:not(.icon-search-list__item-copy-icon), i");
+    if (!e)
+      throw new Error("No icon found");
+    const n = e.outerHTML.replace(/\n/g, "").replace(/\s{2,}/g, " ").trim(), t = o.querySelector(".icon-search-list__item-copy-icon");
+    if (!t)
+      throw new Error("No copy icon found");
+    i.addEventListener("click", async () => {
+      i.setAttribute("disabled", ""), await navigator.clipboard.writeText(n).catch(console.error), r(e, { scale: [1, 0.5], opacity: [1, 0] }, { duration: 0.3 }), r(
+        t,
+        { scale: [0, 1], opacity: [0, 1] },
+        { duration: 0.5, delay: 0.2, type: l, bounce: 0.4 }
+      ), await new Promise((d) => setTimeout(d, 800)), r(t, { scale: [1, 0.5], opacity: [1, 0] }, { duration: 0.3 }), r(
+        e,
+        { scale: [0, 1], opacity: [0, 1] },
+        { duration: 1, delay: 0.1, type: l, bounce: 0.2 }
+      ), i.removeAttribute("disabled");
+    });
+  });
+};
+export {
+  p as default
+};