@sondor-technology/sondor-components 1.0.0 → 1.0.1-develop.3

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

@@ -0,0 +1,137 @@
+import { svg } from "lit"; // <-- Import svg instead of html
+export const iconPaths = {
+    "check-circle": {
+        outline: svg `<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline>`,
+        solid: svg `<path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm3.22 6.97L11 13.19l-2.22-2.22a.75.75 0 0 0-1.06 1.06l2.75 2.75a.75.75 0 0 0 1.06 0l4.75-4.75a.75.75 0 1 0-1.06-1.06z"></path>`,
+    },
+    "alert-triangle": {
+        outline: svg `<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line>`,
+        solid: svg `<path d="M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"></path>`,
+    },
+    info: {
+        outline: svg `<circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line>`,
+        solid: svg `<path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm1 14h-2v-4h2v4zm0-6h-2V8h2v2z"></path>`,
+    },
+    package: {
+        outline: svg `<line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line>`,
+        solid: svg `<path d="M12 22a2 2 0 0 1-1-.27l-7-4A2 2 0 0 1 3 16V8a2 2 0 0 1 1-1.73l7-4a2 2 0 0 1 2 0l7 4A2 2 0 0 1 21 8v8a2 2 0 0 1-1 1.73l-7 4A2 2 0 0 1 12 22zm-1-9.28V20.1l7.5-4.29V7.41zM4.5 15.81l7.5 4.29v-7.38L4.5 8.42zM12 3.86 4.57 8.1 12 12.35l7.43-4.25z"></path>`,
+    },
+    terminal: {
+        outline: svg `<polyline points="4 17 10 11 4 5"></polyline><line x1="12" y1="19" x2="20" y2="19"></line>`,
+        solid: svg `<path fill-rule="evenodd" clip-rule="evenodd" d="M2 6C2 4.34315 3.34315 3 5 3H19C20.6569 3 22 4.34315 22 6V18C22 19.6569 20.6569 21 19 21H5C3.34315 21 2 19.6569 2 18V6ZM6.29289 8.29289C5.90237 8.68342 5.90237 9.31658 6.29289 9.70711L8.58579 12L6.29289 14.2929C5.90237 14.6834 5.90237 15.3166 6.29289 15.7071C6.68342 16.0976 7.31658 16.0976 7.70711 15.7071L10.7071 12.7071C11.0976 12.3166 11.0976 11.6834 10.7071 11.2929L7.70711 8.29289C7.31658 7.90237 6.68342 7.90237 6.29289 8.29289ZM13 15C12.4477 15 12 15.4477 12 16C12 16.5523 12.4477 17 13 17H17C17.5523 17 18 16.5523 18 16C18 15.4477 17.5523 15 17 15H13Z"></path>`,
+    },
+    "cloud-download": {
+        outline: svg `<path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"></path><path d="M12 12v9"></path><path d="m8 17 4 4 4-4"></path>`,
+        solid: svg `<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C8.68629 2 6 4.68629 6 8C6 8.01633 6.00007 8.03264 6.00019 8.04891C3.76352 8.35828 2 10.2785 2 12.6C2 15.0301 3.96995 17 6.4 17H8V14C8 13.4477 8.44772 13 9 13H15C15.5523 13 16 13.4477 16 14V17H17.5C19.9853 17 22 14.9853 22 12.5C22 10.0147 19.9853 8 17.5 8C17.4719 8 17.4439 8.00026 17.4161 8.00077C16.883 4.57723 14.7397 2 12 2ZM11.2929 20.7071C11.6834 21.0976 12.3166 21.0976 12.7071 20.7071L15.7071 17.7071C16.0976 17.3166 16.0976 16.6834 15.7071 16.2929C15.3166 15.9024 14.6834 15.9024 14.2929 16.2929L13 17.5858V14C13 13.4477 12.5523 13 12 13C11.4477 13 11 13.4477 11 14V17.5858L9.70711 16.2929C9.31658 15.9024 8.68342 15.9024 8.29289 16.2929C7.90237 16.6834 7.90237 17.3166 8.29289 17.7071L11.2929 20.7071Z"></path>`,
+    },
+    monitor: {
+        outline: svg `<rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line>`,
+        solid: svg `<path fill-rule="evenodd" clip-rule="evenodd" d="M4 3C2.89543 3 2 3.89543 2 5V15C2 16.1046 2.89543 17 4 17H11V19H7V21H17V19H13V17H20C21.1046 17 22 16.1046 22 15V5C22 3.89543 21.1046 3 20 3H4Z"></path>`,
+    },
+    component: {
+        outline: svg `<path d="M5.5 8.5 9 12l-3.5 3.5L2 12l3.5-3.5Z"></path><path d="m12 2 3.5 3.5L12 9 8.5 5.5 12 2Z"></path><path d="M18.5 8.5 22 12l-3.5 3.5L15 12l3.5-3.5Z"></path><path d="m12 15 3.5 3.5L12 22l-3.5-3.5L12 15Z"></path>`,
+        solid: svg `<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2L8.5 5.5L12 9L15.5 5.5L12 2ZM5.5 8.5L2 12L5.5 15.5L9 12L5.5 8.5ZM18.5 8.5L15 12L18.5 15.5L22 12L18.5 8.5ZM12 15L8.5 18.5L12 22L15.5 18.5L12 15Z"></path>`,
+    },
+    "layout-template": {
+        outline: svg `<rect x="3" y="3" width="18" height="7" rx="2" ry="2"></rect><rect x="3" y="14" width="7" height="7" rx="2" ry="2"></rect><rect x="14" y="14" width="7" height="7" rx="2" ry="2"></rect>`,
+        solid: svg `<path fill-rule="evenodd" clip-rule="evenodd" d="M5 3C3.89543 3 3 3.89543 3 5V8C3 9.10457 3.89543 10 5 10H19C20.1046 10 21 9.10457 21 8V5C21 3.89543 20.1046 3 19 3H5ZM3 16C3 14.8954 3.89543 14 5 14H8C9.10457 14 10 14.8954 10 16V19C10 20.1046 9.10457 21 8 21H5C3.89543 21 3 20.1046 3 19V16ZM16 14C14.8954 14 14 14.8954 14 16V19C14 20.1046 14.8954 21 16 21H19C20.1046 21 21 20.1046 21 19V16C21 14.8954 20.1046 14 19 14H16Z"></path>`,
+    },
+    palette: {
+        outline: svg `<path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"></path><path d="M13.5 6.5h.01"></path><path d="M17.5 10.5h.01"></path><path d="M8.5 7.5h.01"></path><path d="M6.5 12.5h.01"></path>`,
+        solid: svg `<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C12.8284 22 13.5 21.3284 13.5 20.5C13.5 20.1017 13.3444 19.742 13.097 19.4842C12.859 19.2359 12.7 18.8876 12.7 18.5C12.7 17.6716 13.3716 17 14.2 17H16C19.3137 17 22 14.3137 22 11C22 6.02944 17.5228 2 12 2ZM8.5 9C9.32843 9 10 8.32843 10 7.5C10 6.67157 9.32843 6 8.5 6C7.67157 6 7 6.67157 7 7.5C7 8.32843 7.67157 9 8.5 9ZM15 7.5C15 8.32843 14.3284 9 13.5 9C12.6716 9 12 8.32843 12 7.5C12 6.67157 12.6716 6 13.5 6C14.3284 6 15 6.67157 15 7.5ZM17.5 12C18.3284 12 19 11.3284 19 10.5C19 9.67157 18.3284 9 17.5 9C16.6716 9 16 9.67157 16 10.5C16 11.3284 16.6716 12 17.5 12ZM7.5 14C8.32843 14 9 13.3284 9 12.5C9 11.6716 8.32843 11 7.5 11C6.67157 11 6 11.6716 6 12.5C6 13.3284 6.67157 14 7.5 14Z"></path>`,
+    },
+    bug: {
+        outline: svg `<path d="m8 2 1.88 1.88"></path><path d="M14.12 3.88 16 2"></path><path d="M9 7.13v-1a3.003 3.003 0 1 1 6 0v1"></path><path d="M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6"></path><path d="M12 20v-9"></path><path d="M6.53 9C4.6 8.8 3 7.1 3 5"></path><path d="M6 13H2"></path><path d="M3 21c0-2.1 1.7-3.9 3.8-4"></path><path d="M20.97 5c0 2.1-1.6 3.8-3.5 4"></path><path d="M22 13h-4"></path><path d="M17.2 17c2.1.1 3.8 1.9 3.8 4"></path>`,
+        solid: svg `<path fill-rule="evenodd" clip-rule="evenodd" d="M11 2a1 1 0 1 1 2 0v1.17c1.7.24 3.14 1.25 3.82 2.83h2.18a1 1 0 1 1 0 2h-1.17c.1.48.17.98.17 1.5v2h2a1 1 0 1 1 0 2h-2v.5c0 3.04-2.46 5.5-5.5 5.5S7 18.04 7 15v-.5H5a1 1 0 1 1 0-2h2v-2c0-.52.06-1.02.17-1.5H6a1 1 0 1 1 0-2h2.18c.68-1.58 2.12-2.59 3.82-2.83V2zm3 10H10v3c0 1.1.9 2 2 2s2-.9 2-2v-3zm0-3H10c0-1.1.9-2 2-2s2 .9 2 2z"></path>`,
+    },
+    support: {
+        outline: svg `<circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="4"></circle><line x1="4.93" y1="4.93" x2="9.17" y2="9.17"></line><line x1="14.83" y1="14.83" x2="19.07" y2="19.07"></line><line x1="14.83" y1="9.17" x2="19.07" y2="4.93"></line><line x1="4.93" y1="19.07" x2="9.17" y2="14.83"></line>`,
+        solid: svg `<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM9.563 6.136C10.317 5.922 11.138 5.805 12 5.805C12.862 5.805 13.683 5.922 14.437 6.136L13.121 8.879C12.766 8.762 12.389 8.697 12 8.697C11.611 8.697 11.234 8.762 10.879 8.879L9.563 6.136ZM17.864 9.563C18.078 10.317 18.195 11.138 18.195 12C18.195 12.862 18.078 13.683 17.864 14.437L15.121 13.121C15.239 12.766 15.303 12.389 15.303 12C15.303 11.611 15.239 11.234 15.121 10.879L17.864 9.563ZM14.437 17.864C13.683 18.078 12.862 18.195 12 18.195C11.138 18.195 10.317 18.078 9.563 17.864L10.879 15.121C11.234 15.239 11.611 15.303 12 15.303C12.389 15.303 12.766 15.239 13.121 15.121L14.437 17.864ZM6.136 14.437C5.922 13.683 5.805 12.862 5.805 12C5.805 11.138 5.922 10.317 6.136 9.563L8.879 10.879C8.762 11.234 8.697 11.611 8.697 12C8.697 12.389 8.762 12.766 8.879 13.121L6.136 14.437Z"></path>`,
+    },
+    "join-us": {
+        outline: svg `<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path>`,
+        solid: svg `<path fill-rule="evenodd" clip-rule="evenodd" d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11ZM12 13C8.68629 13 6 15.6863 6 19V21H18V19C18 15.6863 15.3137 13 12 13ZM22 19V21H20V19C20 17.5858 19.3337 16.3312 18.2811 15.5393C19.2974 15.1517 20.3541 14.9458 21.4397 14.9458C21.7554 14.9458 22 15.1904 22 15.5061V19ZM4.71887 15.5393C3.66632 16.3312 3 17.5858 3 19V21H1V19C1 15.6863 3.68629 13 7 13C7.57563 13 8.13317 13.0754 8.66597 13.2185C7.94054 13.9213 7.42008 14.819 7.15941 15.8239C6.01217 15.8239 4.71887 15.5393 4.71887 15.5393Z"></path>`,
+    },
+    "chevron-left": {
+        outline: svg `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>`,
+        solid: svg `<path fill-rule="evenodd" clip-rule="evenodd" d="M15.707 19.707a1 1 0 01-1.414 0l-7-7a1 1 0 010-1.414l7-7a1 1 0 111.414 1.414L9.414 12l6.293 6.293a1 1 0 010 1.414z"></path>`,
+    },
+    "chevron-right": {
+        outline: svg `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>`,
+        solid: svg `<path fill-rule="evenodd" clip-rule="evenodd" d="M8.293 4.293a1 1 0 011.414 0l7 7a1 1 0 010 1.414l-7 7a1 1 0 01-1.414-1.414L13.586 12 8.293 5.707a1 1 0 010-1.414z"></path>`,
+    },
+    discord: {
+        outline: svg `<path fill="currentColor" d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.579.099 18.057a.084.084 0 0 0 .031.056 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.99.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.897.077.077 0 0 1-.008-.127c.126-.094.252-.192.376-.292a.077.077 0 0 1 .084-.007 14.36 14.36 0 0 0 10.636 0 .077.077 0 0 1 .084.007c.124.1.25.198.376.292a.077.077 0 0 1-.008.127 13.037 13.037 0 0 1-1.872.897.077.077 0 0 0-.041.106 14.45 14.45 0 0 0 1.226 1.99.076.076 0 0 0 .084.028 19.98 19.98 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.094-.838-9.42-3.543-13.684a.05.05 0 0 0-.035-.028zM6.7 14.947c-1.46 0-2.66-1.336-2.66-2.977 0-1.64 1.176-2.977 2.66-2.977 1.503 0 2.68 1.355 2.66 2.977 0 1.64-1.177 2.977-2.66 2.977zm10.6 0c-1.46 0-2.66-1.336-2.66-2.977 0-1.64 1.176-2.977 2.66-2.977 1.503 0 2.68 1.355 2.66 2.977 0 1.64-1.177 2.977-2.66 2.977z"></path>`,
+        solid: svg `<path fill="currentColor" d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.579.099 18.057a.084.084 0 0 0 .031.056 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.99.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.897.077.077 0 0 1-.008-.127c.126-.094.252-.192.376-.292a.077.077 0 0 1 .084-.007 14.36 14.36 0 0 0 10.636 0 .077.077 0 0 1 .084.007c.124.1.25.198.376.292a.077.077 0 0 1-.008.127 13.037 13.037 0 0 1-1.872.897.077.077 0 0 0-.041.106 14.45 14.45 0 0 0 1.226 1.99.076.076 0 0 0 .084.028 19.98 19.98 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.094-.838-9.42-3.543-13.684a.05.05 0 0 0-.035-.028zM6.7 14.947c-1.46 0-2.66-1.336-2.66-2.977 0-1.64 1.176-2.977 2.66-2.977 1.503 0 2.68 1.355 2.66 2.977 0 1.64-1.177 2.977-2.66 2.977zm10.6 0c-1.46 0-2.66-1.336-2.66-2.977 0-1.64 1.176-2.977 2.66-2.977 1.503 0 2.68 1.355 2.66 2.977 0 1.64-1.177 2.977-2.66 2.977z"></path>`,
+    },
+    envelope: {
+        outline: svg `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>`,
+        solid: svg `<path fill="currentColor" d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"></path>`,
+    },
+    button: {
+        outline: svg `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 7h14a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1z"></path>`,
+        solid: svg `<path fill="currentColor" d="M5 7h14a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1z"></path>`,
+    },
+    "pointer-click": {
+        outline: svg `
+      <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 9H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-5"></path>
+      <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 11V5a2 2 0 0 0-4 0v10L7 12a2 2 0 0 0-2.8 2.8l5.8 5.8a4 4 0 0 0 2.8 1.2h2a4 4 0 0 0 4-4v-3a2 2 0 0 0-4 0"></path>
+    `,
+        solid: svg `
+      <path fill="currentColor" d="M4 1h16a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2z"></path>
+      <path fill="currentColor" d="M14 12V6a2 2 0 0 0-4 0v10L7 13a2 2 0 0 0-2.8 2.8l5.8 5.8a4 4 0 0 0 2.8 1.2h2a4 4 0 0 0 4-4v-3a2 2 0 0 0-4 0Z"></path>
+    `,
+    },
+    checkbox: {
+        outline: svg `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h9"></path>`,
+        solid: svg `<path fill="currentColor" d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>`,
+    },
+    input: {
+        outline: svg `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"></path><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11h5"></path>`,
+        solid: svg `<path fill="currentColor" d="M20 7H4c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2z"></path>`,
+    },
+    "check-box": {
+        outline: svg `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5z"></path>`,
+        solid: svg `<path fill="currentColor" d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>`,
+    },
+    github: {
+        outline: svg `<path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.43 9.79 8.15 11.38.6.11.83-.26.83-.57 0-.28-.01-1.13-.01-2.2-3.32.72-4.02-1.6-4.02-1.6-.54-1.38-1.32-1.75-1.32-1.75-1.08-.74.08-.72.08-.72 1.2.08 1.83 1.24 1.83 1.24 1.07 1.83 2.8 1.3 3.48.99.11-.77.42-1.3.76-1.6-2.65-.3-5.44-1.33-5.44-5.9 0-1.3.46-2.38 1.23-3.22-.12-.3-.54-1.52.12-3.18 0 0 1.01-.32 3.3 1.24a11.45 11.45 0 0 1 6 0c2.29-1.56 3.3-1.24 3.3-1.24.66 1.66.24 2.88.12 3.18.77.84 1.23 1.92 1.23 3.22 0 4.61-2.8 5.6-5.47 5.9.42.36.8 1.08.8 2.18 0 1.57-.01 2.84-.01 3.22 0 .31.22.68.84.57C20.57 21.79 24 17.31 24 12c0-6.63-5.37-12-12-12z"></path>`,
+        solid: svg `<path fill="currentColor" d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.43 9.79 8.15 11.38.6.11.83-.26.83-.57 0-.28-.01-1.13-.01-2.2-3.32.72-4.02-1.6-4.02-1.6-.54-1.38-1.32-1.75-1.32-1.75-1.08-.74.08-.72.08-.72 1.2.08 1.83 1.24 1.83 1.24 1.07 1.83 2.8 1.3 3.48.99.11-.77.42-1.3.76-1.6-2.65-.3-5.44-1.33-5.44-5.9 0-1.3.46-2.38 1.23-3.22-.12-.3-.54-1.52.12-3.18 0 0 1.01-.32 3.3 1.24a11.45 11.45 0 0 1 6 0c2.29-1.56 3.3-1.24 3.3-1.24.66 1.66.24 2.88.12 3.18.77.84 1.23 1.92 1.23 3.22 0 4.61-2.8 5.6-5.47 5.9.42.36.8 1.08.8 2.18 0 1.57-.01 2.84-.01 3.22 0 .31.22.68.84.57C20.57 21.79 24 17.31 24 12c0-6.63-5.37-12-12-12z"></path>`,
+    },
+    link: {
+        outline: svg `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>`,
+        solid: svg `<path fill="currentColor" d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>`,
+    },
+    "layout-single-column": {
+        outline: svg `<rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="2" fill="none"></rect><line x1="3" y1="8" x2="21" y2="8" stroke="currentColor" stroke-width="2"></line><line x1="7" y1="12" x2="17" y2="12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line><line x1="7" y1="16" x2="14" y2="16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line>`,
+        solid: svg `<path fill="currentColor" d="M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5zm2 3h14V5H5v3z"></path>`,
+    },
+    "layout-content-sidebar": {
+        outline: svg `<rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="2" fill="none"></rect><line x1="3" y1="8" x2="21" y2="8" stroke="currentColor" stroke-width="2"></line><line x1="15" y1="8" x2="15" y2="21" stroke="currentColor" stroke-width="2"></line><line x1="6" y1="13" x2="12" y2="13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line><line x1="6" y1="17" x2="10" y2="17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line>`,
+        solid: svg `<path fill="currentColor" d="M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5zm2 3h14V5H5v3zm10 2v11h4V10h-4z"></path>`,
+    },
+    "layout-app-shell": {
+        outline: svg `<rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="2" fill="none"></rect><line x1="9" y1="3" x2="9" y2="21" stroke="currentColor" stroke-width="2"></line><line x1="9" y1="8" x2="21" y2="8" stroke="currentColor" stroke-width="2"></line><line x1="12" y1="13" x2="18" y2="13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line>`,
+        solid: svg `<path fill="currentColor" d="M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5zm6-2v18H5V5h4zm12 5H9V5h12v3z"></path>`,
+    },
+    "layout-three-column": {
+        outline: svg `<rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="2" fill="none"></rect><line x1="3" y1="8" x2="21" y2="8" stroke="currentColor" stroke-width="2"></line><line x1="7" y1="8" x2="7" y2="21" stroke="currentColor" stroke-width="2"></line><line x1="17" y1="8" x2="17" y2="21" stroke="currentColor" stroke-width="2"></line><line x1="10" y1="14" x2="14" y2="14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line>`,
+        solid: svg `<path fill="currentColor" d="M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5zm2 3h14V5H5v3zM7 9H3v12h4V9zm14 0h-4v12h4V9z"></path>`,
+    },
+    calender: {
+        outline: svg `<rect x="3" y="4" width="18" height="18" rx="2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></rect><line x1="16" y1="2" x2="16" y2="6" stroke="currentColor" stroke-width="2" stroke-linecap="round"></line><line x1="8" y1="2" x2="8" y2="6" stroke="currentColor" stroke-width="2" stroke-linecap="round"></line><line x1="3" y1="10" x2="21" y2="10" stroke="currentColor" stroke-width="2"></line>`,
+        solid: svg `<path fill="currentColor" d="M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V9h14v11z"></path>`,
+    },
+    user: {
+        outline: svg `<circle cx="12" cy="8" r="4" fill="none" stroke="currentColor" stroke-width="2"></circle><path d="M4 20c0-4 4-6 8-6s8 2 8 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>`,
+        solid: svg `<path fill="currentColor" d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-3.33 0-10 1.67-10 5v3h20v-3c0-3.33-6.67-5-10-5z"></path>`,
+    },
+    home: {
+        outline: svg `<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><polyline points="9 22 9 12 15 12 15 22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></polyline>`,
+        solid: svg `<path fill="currentColor" d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path>`,
+    },
+    "circle-cross": {
+        outline: svg `<circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></circle><line x1="15" y1="9" x2="9" y2="15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></line><line x1="9" y1="9" x2="15" y2="15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></line>`,
+        solid: svg `<path fill="currentColor" fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm3.36 6.64a1 1 0 0 1 0 1.41L13.41 12l1.95 1.95a1 1 0 0 1-1.41 1.41L12 13.41l-1.95 1.95a1 1 0 0 1-1.41-1.41L10.59 12 8.64 10.05a1 1 0 0 1 1.41-1.41L12 10.59l1.95-1.95a1 1 0 0 1 1.41 0z" clip-rule="evenodd"></path>`,
+    },
+};

package/dist/components/icon/icon.d.ts

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+import { IconName } from './icon-paths.js';
+export declare class StIcon extends LitElement {
+    name: IconName | string;
+    variant: 'outline' | 'solid';
+    color: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+    size: 'sm' | 'md' | 'lg' | 'xl';
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'st-icon': StIcon;
+    }
+}
+//# sourceMappingURL=icon.d.ts.map

package/dist/components/icon/icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/components/icon/icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,EAAa,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAGtD,qBACa,MAAO,SAAQ,UAAU;IACR,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAM;IAC7B,OAAO,EAAE,SAAS,GAAG,OAAO,CAAa;IAG1B,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAa;IAGlG,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAElF,MAAM,CAAC,MAAM,4BAsCX;IAEF,MAAM,yCAmBL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/components/icon/icon.js

@@ -0,0 +1,95 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { iconPaths } from './icon-paths.js';
+import { resetStyles } from '../../styles/reset.js';
+let StIcon = class StIcon extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.name = '';
+        this.variant = 'outline';
+        // Semantic Colors
+        this.color = 'default';
+        // Standardized T-Shirt Sizes
+        this.size = 'md';
+    }
+    render() {
+        const iconData = iconPaths[this.name];
+        if (!iconData)
+            return html ``;
+        const pathData = iconData[this.variant] || iconData.outline;
+        return html `
+      <svg 
+        viewBox="0 0 24 24" 
+        xmlns="http://www.w3.org/2000/svg"
+        fill="${this.variant === 'solid' ? 'currentColor' : 'none'}"
+        stroke="${this.variant === 'outline' ? 'currentColor' : 'none'}"
+        stroke-width="${this.variant === 'outline' ? '2' : '0'}"
+        stroke-linecap="round" 
+        stroke-linejoin="round"
+      >
+        ${pathData}
+      </svg>
+    `;
+    }
+};
+StIcon.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        color: inherit;
+        
+        /* Defaults to md (1.5rem) if no size attribute is matched */
+        width: var(--icon-size, 1.5rem);
+        height: var(--icon-size, 1.5rem);
+      }
+
+      /* ==========================================================
+         Size Variants
+         ========================================================== */
+      :host([size="sm"]) { --icon-size: 1.25rem; } /* 20px - Matches small buttons/inputs */
+      :host([size="md"]) { --icon-size: 1.5rem; }  /* 24px - Default standard size */
+      :host([size="lg"]) { --icon-size: 2rem; }    /* 32px - Large callouts */
+      :host([size="xl"]) { --icon-size: 2.5rem; }  /* 40px - Hero sections/Cards */
+
+      /* ==========================================================
+         Color Variants
+         ========================================================== */
+      :host([color="primary"]) { color: var(--st-color-primary); }
+      :host([color="secondary"]) { color: var(--st-color-secondary); }
+      :host([color="success"]) { color: var(--st-color-success); }
+      :host([color="warning"]) { color: var(--st-color-warning); }
+      :host([color="error"]) { color: var(--st-color-error); }
+      :host([color="info"]) { color: var(--st-color-info); }
+
+      svg {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+    `
+];
+__decorate([
+    property({ type: String })
+], StIcon.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], StIcon.prototype, "variant", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], StIcon.prototype, "color", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], StIcon.prototype, "size", void 0);
+StIcon = __decorate([
+    customElement('st-icon')
+], StIcon);
+export { StIcon };

package/dist/components/input/input.d.ts

@@ -0,0 +1,31 @@
+import { LitElement, PropertyValues } from "lit";
+export type InputType = "text" | "password" | "email" | "number" | "search" | "url";
+export declare class StInput extends LitElement {
+    static formAssociated: boolean;
+    private _internals;
+    private _inputEl;
+    name: string;
+    label: string;
+    value: string;
+    placeholder: string;
+    type: InputType;
+    helpText: string;
+    required: boolean;
+    minlength?: number;
+    maxlength?: number;
+    pattern?: string;
+    disabled: boolean;
+    invalid: boolean;
+    readonly: boolean;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    updated(changedProperties: PropertyValues<this>): void;
+    private _syncValidity;
+    formResetCallback(): void;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    private _handleInput;
+    private _handleChange;
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=input.d.ts.map

package/dist/components/input/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAa,cAAc,EAAC,MAAM,KAAK,CAAC;AAK1D,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,KAAK,CAAC;AAEpF,qBACa,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAAmB;IAErB,OAAO,CAAC,QAAQ,CAAoB;IACX,IAAI,SAAM;IACzB,KAAK,SAAM;IACX,KAAK,SAAM;IACX,WAAW,SAAM;IACjB,IAAI,EAAE,SAAS,CAAU;IACf,QAAQ,SAAM;IAGR,QAAQ,UAAS;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IAED,QAAQ,UAAS;IACjB,OAAO,UAAS;IAChB,QAAQ,UAAS;IAE3D,cAaC;IAED,MAAM,CAAC,MAAM,4BAmHX;IAEO,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,QAUvD;IAED,OAAO,CAAC,aAAa;IAWrB,iBAAiB,SAKhB;IAGD,aAAa,YAEZ;IAED,cAAc,YAEb;IAED,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,aAAa;IAIrB,MAAM,yCA8BL;CACF"}

package/dist/components/input/input.js

@@ -0,0 +1,268 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js"; // Helper for optional attributes
+import { resetStyles } from "../../styles/reset.js";
+let StInput = class StInput extends LitElement {
+    constructor() {
+        super();
+        this.name = "";
+        this.label = "";
+        this.value = "";
+        this.placeholder = "";
+        this.type = "text";
+        this.helpText = "";
+        // Validation Properties
+        this.required = false;
+        this.disabled = false;
+        this.invalid = false;
+        this.readonly = false;
+        this._internals = this.attachInternals();
+        // 1. Trigger error state if the user clicks away and the field is invalid
+        this.addEventListener("focusout", () => {
+            this.invalid = !this._inputEl.validity.valid;
+        });
+        // 2. Trigger error state if the st-form tries to submit and fails
+        this.addEventListener("invalid", () => {
+            this.invalid = true;
+        });
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        // Sync the value to the form engine
+        if (changedProperties.has("value")) {
+            this._internals.setFormValue(this.value);
+        }
+        // Sync validity whenever properties change (like value or required status)
+        this._syncValidity();
+    }
+    _syncValidity() {
+        if (!this._inputEl)
+            return;
+        // setValidity arguments: (ValidityState object, Custom Error Message, Anchor Element for Tooltip)
+        this._internals.setValidity(this._inputEl.validity, this._inputEl.validationMessage, this._inputEl);
+    }
+    formResetCallback() {
+        this.value = "";
+        this._internals.setFormValue("");
+        // Need to wait for the render cycle to finish before checking validity on reset
+        this.updateComplete.then(() => this._syncValidity());
+    }
+    // Expose standard native methods so external scripts can call them on the component
+    checkValidity() {
+        return this._internals.checkValidity();
+    }
+    reportValidity() {
+        return this._internals.reportValidity();
+    }
+    _handleInput(e) {
+        const target = e.target;
+        this.value = target.value;
+        if (this.invalid && target.validity.valid) {
+            this.invalid = false;
+        }
+        this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+    }
+    _handleChange(e) {
+        this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+    }
+    render() {
+        return html `
+      <div class="form-control">
+        ${this.label ? html `<label for="input">${this.label}</label>` : ""}
+
+        <div class="input-wrapper">
+          <slot name="prefix"></slot>
+
+          <input
+            id="input"
+            type=${this.type}
+            .name=${this.name}
+            .value=${this.value}
+            placeholder=${this.placeholder}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            ?required=${this.required}
+            minlength=${ifDefined(this.minlength)}
+            maxlength=${ifDefined(this.maxlength)}
+            pattern=${ifDefined(this.pattern)}
+            @input=${this._handleInput}
+            @change=${this._handleChange}
+          />
+
+          <slot name="suffix"></slot>
+        </div>
+
+        ${this.helpText ? html `<div class="help-text">${this.helpText}</div>` : ""}
+      </div>
+    `;
+    }
+};
+StInput.formAssociated = true;
+StInput.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: block;
+      }
+
+      .form-control {
+        display: flex;
+        flex-direction: column;
+        gap: var(--st-spacing-xs);
+      }
+
+      label {
+        font-size: var(--st-font-size-sm);
+        font-weight: var(--st-font-weight-medium);
+        color: var(--st-color-text);
+        margin-bottom: 0.5em;
+      }
+
+      /* 1. The Wrapper acts as the visual input field */
+      .input-wrapper {
+        display: flex;
+        align-items: center;
+        gap: var(--st-spacing-sm);
+        width: 100%;
+
+        background-color: var(--st-color-bg);
+        border: 1px solid var(--st-color-border);
+        border-radius: 4px;
+
+        /* Horizontal padding on the wrapper, vertical on the input */
+        padding: 0 var(--st-spacing-md);
+        transition:
+          border-color 0.2s ease,
+          box-shadow 0.2s ease;
+      }
+
+      /* 2. Apply focus ring to the wrapper when the internal input is focused */
+      .input-wrapper:focus-within {
+        border-color: var(--st-color-primary);
+        box-shadow: 0 0 0 1px var(--st-color-primary);
+      }
+
+      /* 3. The actual input becomes transparent and fills the wrapper */
+      input {
+        flex: 1;
+        width: 100%;
+        border: none;
+        background: transparent;
+        outline: none;
+
+        /* Vertical padding stretches the wrapper */
+        padding: var(--st-spacing-sm) 0;
+        font-size: var(--st-font-size-base);
+        color: var(--st-color-text);
+      }
+
+      input::placeholder {
+        color: var(--st-color-text-muted);
+      }
+
+      /* Slotted Icons */
+      ::slotted(svg) {
+        width: 1.25em;
+        height: 1.25em;
+        /* Default icons to the muted text color */
+        color: var(--st-color-text-muted);
+        fill: currentColor;
+        flex-shrink: 0;
+      }
+
+      /* Interactive Slotted Elements (like clear buttons) */
+      ::slotted(st-button) {
+        /* Pull the button back slightly so it aligns nicely with the input padding */
+        margin-right: calc(var(--st-spacing-sm) * -1);
+      }
+
+      /* Invalid State */
+      :host([invalid]) .input-wrapper {
+        border-color: var(--st-color-error);
+      }
+      :host([invalid]) .input-wrapper:focus-within {
+        box-shadow: 0 0 0 1px var(--st-color-error);
+      }
+      :host([invalid]) .help-text {
+        color: var(--st-color-error);
+      }
+
+      /* Disabled & Readonly States */
+      :host([disabled]) .input-wrapper {
+        opacity: 0.5;
+        cursor: not-allowed;
+        background-color: var(--st-color-surface);
+      }
+      :host([disabled]) input {
+        cursor: not-allowed;
+      }
+      :host([readonly]) .input-wrapper {
+        background-color: var(--st-color-surface);
+      }
+
+      .help-text {
+        font-size: var(--st-font-size-xs);
+        color: var(--st-color-text-muted);
+        margin: 0;
+      }
+
+      :host([invalid]) .input-wrapper {
+        border-color: var(--st-color-error);
+      }
+      :host([invalid]) .help-text {
+        color: var(--st-color-error);
+      }
+    `,
+];
+__decorate([
+    query("input")
+], StInput.prototype, "_inputEl", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], StInput.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], StInput.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], StInput.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], StInput.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: String })
+], StInput.prototype, "type", void 0);
+__decorate([
+    property({ attribute: "help-text" })
+], StInput.prototype, "helpText", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StInput.prototype, "required", void 0);
+__decorate([
+    property({ type: Number })
+], StInput.prototype, "minlength", void 0);
+__decorate([
+    property({ type: Number })
+], StInput.prototype, "maxlength", void 0);
+__decorate([
+    property({ type: String })
+], StInput.prototype, "pattern", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StInput.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StInput.prototype, "invalid", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StInput.prototype, "readonly", void 0);
+StInput = __decorate([
+    customElement("st-input")
+], StInput);
+export { StInput };

package/dist/components/link/link.d.ts

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+export declare class StLink extends LitElement {
+    href: string;
+    target: '_blank' | '_self';
+    size: 'sm' | 'md' | 'lg';
+    variant: 'inline' | 'standalone';
+    color: 'default' | 'primary' | 'muted';
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'st-link': StLink;
+    }
+}
+//# sourceMappingURL=link.d.ts.map

package/dist/components/link/link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../src/components/link/link.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,MAAO,SAAQ,UAAU;IACR,IAAI,SAAO;IACX,MAAM,EAAE,QAAQ,GAAG,OAAO,CAAW;IACtB,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAChC,OAAO,EAAE,QAAQ,GAAG,YAAY,CAAY;IAC5C,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAa;IAE9F,MAAM,CAAC,MAAM,4BAsEX;IAEF,MAAM,yCAML;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}