@xplor-education/core-stencil-components 3.1.1 → 3.1.3

package/dist/components/xplor-input-text.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
 
-const xplorInputTextCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  \n  :root {\n    --color-primary: #db3b03;\n    --color-primary-50: rgba(255, 152, 0, 1);\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgba(1, 163, 157, 1);\n    --color-tertiary: rgb(128, 104, 186);\n    --color-tertiary: rgb(223, 242, 241);\n    --color-white: white;\n    --color-emphasis: rgb(8, 8, 9);\n    --color-supergiant: rgb(213, 66, 99);\n    --color-orange: rgb(250, 200, 127);\n    --color-buttons: #fbbc05;\n    --color-typography: #ea4335;\n    --background: 20 66% 99%;\n    --foreground: 20 51% 4%;\n    --muted: 20 25% 86%;\n    --muted-foreground: 20 7% 25%;\n    --popover: 20 66% 98%;\n    --popover-foreground: 20 51% 3%;\n    --card: 20 66% 98%;\n    --card-foreground: 20 51% 3%;\n    --border: 20 15% 94%;\n    --input: 20 15% 94%;\n    --primary: 20 48% 72%;\n    --primary-foreground: 20 48% 12%;\n    --secondary: 20 12% 92%;\n    --secondary-foreground: 20 12% 32%;\n    --accent: 20 12% 92%;\n    --accent-foreground: 20 12% 32%;\n    --destructive: 11 80% 22%;\n    --destructive-foreground: 11 80% 82%;\n    --ring: 20 48% 72%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n  .dark {\n    --background: 253 43% 3%;\n    --foreground: 253 31% 98%;\n    --muted: 253 7% 13%;\n    --muted-foreground: 253 13% 63%;\n    --popover: 253 43% 3%;\n    --popover-foreground: 253 31% 98%;\n    --card: 253 43% 4%;\n    --card-foreground: 253 31% 99%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --primary: 253 91% 58%;\n    --primary-foreground: 253 91% 98%;\n    --secondary: 253 7% 9%;\n    --secondary-foreground: 253 7% 69%;\n    --accent: 253 13% 14%;\n    --accent-foreground: 253 13% 74%;\n    --destructive: 339.2 90.36% 51.18%;\n    --destructive-foreground: 0 0% 100%;\n    --ring: 253 91% 58%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply box-border bg-background text-foreground;\n  }\n}\n@layer utilities {\n  .min-h-screen {\n    min-height: 100vh;\n    \n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    \n    height: 100dvh;\n  }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n  .glass {\n    border: none;\n    backdrop-filter: blur(var(--glass-blur, 40px));\n    background-color: transparent;\n    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n  }\n}\n.tox.tox-tinymce.sc-xplor-input-text {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce.sc-xplor-input-text {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-input-text {\n  color: var(--color-primary);\n  \n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; \n}\n\nh2.sc-xplor-input-text {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; \n  letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-input-text {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; \n}\n\n.overline.sc-xplor-input-text {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; \n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol.sc-xplor-input-text, ul.sc-xplor-input-text {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-input-text li.sc-xplor-input-text, ul.sc-xplor-input-text li.sc-xplor-input-text {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-input-text, ul.mdc-list.sc-xplor-input-text {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-input-text li.mdc-list-item.sc-xplor-input-text, ul.mdc-list.sc-xplor-input-text li.mdc-list-item.sc-xplor-input-text {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-input-text {\n  color: var(--Orange-900-Primary, #db3b03);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; \n  letter-spacing: 0.4px;\n  margin: 0px 0 -9px 16px;\n  z-index: 1 !important;\n  position: relative;\n  width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-input-text {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-input-text {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  padding: 20px;\n  border-radius: 5px;\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-input-text {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-input-text .mdc-text-field--outlined.sc-xplor-input-text .mdc-notched-outline__notch.sc-xplor-input-text {\n  border: 0px solid transparent !important;\n  border-bottom: 1px solid #db3b03 !important;\n  padding: 0;\n  height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-input-text .mdc-notched-outline__notch.sc-xplor-input-text {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-input-text .mdc-notched-outline.sc-xplor-input-text .mdc-notched-outline__notch.sc-xplor-input-text {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-input-text {\n  display: flex;\n  height: 48px;\n  padding: 12px 24px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-input-text:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-input-text {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-input-text-h {\n  display: block;\n}\n\n.xplor-input-text.sc-xplor-input-text {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n.xplor-input-text__label.sc-xplor-input-text {\n  font-size: 0.875rem;\n  color: rgba(0, 0, 0, 0.6);\n  margin-bottom: 0.25rem;\n}\n.xplor-input-text__required.sc-xplor-input-text {\n  color: #d32f2f;\n  margin-left: 0.25rem;\n}\n.xplor-input-text__field.sc-xplor-input-text {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.xplor-input-text__input.sc-xplor-input-text {\n  width: 100%;\n  padding: 0.875rem 1rem;\n  font-size: 1rem;\n  font-family: inherit;\n  border: 1px solid rgba(0, 0, 0, 0.23);\n  border-radius: 1rem;\n  outline: none;\n  transition: border-color 0.2s ease;\n}\n.xplor-input-text__input.sc-xplor-input-text::placeholder {\n  color: rgba(0, 0, 0, 0.38);\n}\n.xplor-input-text__input.sc-xplor-input-text:hover:not(:disabled) {\n  border-color: rgba(0, 0, 0, 0.6);\n}\n.xplor-input-text__input.sc-xplor-input-text:focus {\n  border-color: #008480;\n  border-width: 2px;\n  padding: calc(0.875rem - 1px) calc(1rem - 1px);\n}\n.xplor-input-text__input.sc-xplor-input-text:disabled {\n  background-color: rgba(0, 0, 0, 0.04);\n  color: rgba(0, 0, 0, 0.38);\n  cursor: not-allowed;\n}\n.xplor-input-text__input.sc-xplor-input-text:read-only {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.xplor-input-text--error.sc-xplor-input-text .xplor-input-text__input.sc-xplor-input-text {\n  border-color: #d32f2f;\n}\n.xplor-input-text__details.sc-xplor-input-text {\n  min-height: 1.25rem;\n  padding: 0 1rem;\n  font-size: 0.75rem;\n}\n.xplor-input-text__error-message.sc-xplor-input-text {\n  color: #d32f2f;\n}\n.xplor-input-text__helper-text.sc-xplor-input-text {\n  color: rgba(0, 0, 0, 0.6);\n}";
+const xplorInputTextCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  \n  :root {\n    --color-primary: #db3b03;\n    --color-primary-50: rgba(255, 152, 0, 1);\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgba(1, 163, 157, 1);\n    --color-tertiary: rgb(128, 104, 186);\n    --color-tertiary: rgb(223, 242, 241);\n    --color-white: white;\n    --color-emphasis: rgb(8, 8, 9);\n    --color-supergiant: rgb(213, 66, 99);\n    --color-orange: rgb(250, 200, 127);\n    --color-buttons: #fbbc05;\n    --color-typography: #ea4335;\n    --background: 20 66% 99%;\n    --foreground: 20 51% 4%;\n    --muted: 20 25% 86%;\n    --muted-foreground: 20 7% 25%;\n    --popover: 20 66% 98%;\n    --popover-foreground: 20 51% 3%;\n    --card: 20 66% 98%;\n    --card-foreground: 20 51% 3%;\n    --border: 20 15% 94%;\n    --input: 20 15% 94%;\n    --primary: 20 48% 72%;\n    --primary-foreground: 20 48% 12%;\n    --secondary: 20 12% 92%;\n    --secondary-foreground: 20 12% 32%;\n    --accent: 20 12% 92%;\n    --accent-foreground: 20 12% 32%;\n    --destructive: 11 80% 22%;\n    --destructive-foreground: 11 80% 82%;\n    --ring: 20 48% 72%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n  .dark {\n    --background: 253 43% 3%;\n    --foreground: 253 31% 98%;\n    --muted: 253 7% 13%;\n    --muted-foreground: 253 13% 63%;\n    --popover: 253 43% 3%;\n    --popover-foreground: 253 31% 98%;\n    --card: 253 43% 4%;\n    --card-foreground: 253 31% 99%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --primary: 253 91% 58%;\n    --primary-foreground: 253 91% 98%;\n    --secondary: 253 7% 9%;\n    --secondary-foreground: 253 7% 69%;\n    --accent: 253 13% 14%;\n    --accent-foreground: 253 13% 74%;\n    --destructive: 339.2 90.36% 51.18%;\n    --destructive-foreground: 0 0% 100%;\n    --ring: 253 91% 58%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply box-border bg-background text-foreground;\n  }\n}\n@layer utilities {\n  .min-h-screen {\n    min-height: 100vh;\n    \n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    \n    height: 100dvh;\n  }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n  .glass {\n    border: none;\n    backdrop-filter: blur(var(--glass-blur, 40px));\n    background-color: transparent;\n    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n  }\n}\n.tox.tox-tinymce.sc-xplor-input-text {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce.sc-xplor-input-text {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-input-text {\n  color: var(--color-primary);\n  \n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; \n}\n\nh2.sc-xplor-input-text {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; \n  letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-input-text {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; \n}\n\n.overline.sc-xplor-input-text {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; \n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol.sc-xplor-input-text, ul.sc-xplor-input-text {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-input-text li.sc-xplor-input-text, ul.sc-xplor-input-text li.sc-xplor-input-text {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-input-text, ul.mdc-list.sc-xplor-input-text {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-input-text li.mdc-list-item.sc-xplor-input-text, ul.mdc-list.sc-xplor-input-text li.mdc-list-item.sc-xplor-input-text {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-input-text {\n  color: var(--Orange-900-Primary, #db3b03);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; \n  letter-spacing: 0.4px;\n  margin: 0px 0 -9px 16px;\n  z-index: 1 !important;\n  position: relative;\n  width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-input-text {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-input-text {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  padding: 20px;\n  border-radius: 5px;\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-input-text {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-input-text .mdc-text-field--outlined.sc-xplor-input-text .mdc-notched-outline__notch.sc-xplor-input-text {\n  border: 0px solid transparent !important;\n  border-bottom: 1px solid #db3b03 !important;\n  padding: 0;\n  height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-input-text .mdc-notched-outline__notch.sc-xplor-input-text {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-input-text .mdc-notched-outline.sc-xplor-input-text .mdc-notched-outline__notch.sc-xplor-input-text {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-input-text {\n  display: flex;\n  height: 48px;\n  padding: 12px 24px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-input-text:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-input-text {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-input-text-h {\n  display: block;\n}\n\n.xplor-input-text.sc-xplor-input-text {\n  display: flex;\n  flex-direction: column;\n}\n.xplor-input-text__required.sc-xplor-input-text {\n  color: #d32f2f;\n  margin-left: 0.25rem;\n}\n.xplor-input-text__field.sc-xplor-input-text {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.xplor-input-text__label.sc-xplor-input-text {\n  position: absolute;\n  left: 1rem;\n  top: 50%;\n  transform: translateY(-50%);\n  font-size: 1rem;\n  color: rgba(0, 0, 0, 0.6);\n  pointer-events: none;\n  padding: 0 0.25rem;\n  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), top 0.15s cubic-bezier(0.4, 0, 0.2, 1), font-size 0.15s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n  max-width: calc(100% - 2rem);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.xplor-input-text__input.sc-xplor-input-text {\n  width: 100%;\n  padding: 0.875rem 1rem;\n  font-size: 1rem;\n  font-family: inherit;\n  border: 1px solid rgba(0, 0, 0, 0.23);\n  border-radius: 1rem;\n  outline: none;\n  transition: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-width 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n  min-height: 3rem;\n}\n.xplor-input-text__input.sc-xplor-input-text::placeholder {\n  color: rgba(0, 0, 0, 0.38);\n}\n.xplor-input-text__input.sc-xplor-input-text:hover:not(:disabled) {\n  border-color: rgba(0, 0, 0, 0.87);\n}\n.xplor-input-text__input.sc-xplor-input-text:disabled {\n  background-color: rgba(0, 0, 0, 0.04);\n  color: rgba(0, 0, 0, 0.38);\n  cursor: not-allowed;\n}\n.xplor-input-text__input.sc-xplor-input-text:read-only {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.xplor-input-text--floating.sc-xplor-input-text .xplor-input-text__label.sc-xplor-input-text {\n  top: 0;\n  transform: translateY(-50%);\n  font-size: 0.75rem;\n}\n.xplor-input-text--focused.sc-xplor-input-text .xplor-input-text__input.sc-xplor-input-text {\n  border-color: #008480;\n  border-width: 2px;\n  padding: calc(0.875rem - 1px) calc(1rem - 1px);\n}\n.xplor-input-text--focused.sc-xplor-input-text .xplor-input-text__label.sc-xplor-input-text {\n  color: #008480;\n}\n.xplor-input-text--error.sc-xplor-input-text .xplor-input-text__input.sc-xplor-input-text {\n  border-color: #d32f2f;\n}\n.xplor-input-text--error.sc-xplor-input-text .xplor-input-text__label.sc-xplor-input-text {\n  color: #d32f2f;\n}\n.xplor-input-text--error.xplor-input-text--focused.sc-xplor-input-text .xplor-input-text__input.sc-xplor-input-text {\n  border-color: #d32f2f;\n  border-width: 2px;\n}\n.xplor-input-text--disabled.sc-xplor-input-text .xplor-input-text__label.sc-xplor-input-text {\n  color: rgba(0, 0, 0, 0.38);\n}\n.xplor-input-text__details.sc-xplor-input-text {\n  min-height: 1.25rem;\n  padding: 0 1rem;\n  font-size: 0.75rem;\n}\n.xplor-input-text__error-message.sc-xplor-input-text {\n  color: #d32f2f;\n}\n.xplor-input-text__helper-text.sc-xplor-input-text {\n  color: rgba(0, 0, 0, 0.6);\n}";
 
 let inputTextIdCounter = 0;
 const XplorInputText$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputText extends H {
@@ -83,16 +83,19 @@ const XplorInputText$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputText e
         };
     }
     render() {
+        const hasValue = this.value != null && this.value !== '';
+        const isFloating = this.isFocused || hasValue;
         const containerClasses = {
             'xplor-input-text': true,
             'xplor-input-text--focused': this.isFocused,
+            'xplor-input-text--floating': isFloating,
             'xplor-input-text--disabled': this.disabled,
             'xplor-input-text--error': !!this.error,
         };
         const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));
-        return (h(Host, { key: 'c7da02996d0b420a58337eb30bec6d38fe9e395f' }, h("div", { key: '229582f2e17300332a14fd58ff60cd1a43d10f40', class: containerClasses }, this.label && (h("label", { key: '2fc2d7c76396e98397df42d6b793d070d061c918', class: "xplor-input-text__label", htmlFor: this.inputId }, this.label, this.required && h("span", { key: '2bc7348d1a415a36aae485c61743b0fd3f98d363', class: "xplor-input-text__required" }, "*"))), h("div", { key: 'f6f79203738d3827dbd06faaea60f94022d5d965', class: "xplor-input-text__field" }, h("input", { key: 'ff6a346441f195cd71c5e6c585fffd24b79ce181', id: this.inputId, type: this.type, class: "xplor-input-text__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
+        return (h(Host, { key: '764b3d65709568ba47eed1daec32340a9f4ddf3a' }, h("div", { key: '50aa5c726722ac0a1406b1aeb6f4652b0021c93c', class: containerClasses }, h("div", { key: 'e6879bbf287bd46a2398ce21e877a93eec23ccca', class: "xplor-input-text__field" }, h("input", { key: '847eb323f86c24317a67ec95ff7091680b816f18', id: this.inputId, type: this.type, class: "xplor-input-text__input", value: this.value, placeholder: isFloating ? this.placeholder : '', disabled: this.disabled, readonly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
                 backgroundColor: this.bgColor,
-            }, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": this.error ? this.errorId : this.helperText ? this.helperId : undefined }), h("slot", { key: 'fa160af8991c46e7418960e2058d85a912aa182c', name: "append-inner" })), showDetails && (h("div", { key: 'bd131696fea277bcc3c727cb2a9a901a9c360f53', class: "xplor-input-text__details" }, this.error && h("div", { key: '7a5351abc5cb7ed0dc1a5a71262f86a34230020a', class: "xplor-input-text__error-message", id: this.errorId }, this.error), !this.error && this.helperText && h("div", { key: '7457664c7a216c5c4a9c18de4030a76796dd97bc', class: "xplor-input-text__helper-text", id: this.helperId }, this.helperText))), h("slot", { key: '2acc8a1746276cb19b6d8a0b2dd0054a5fa7f6ac', name: "append" }))));
+            }, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": this.error ? this.errorId : this.helperText ? this.helperId : undefined }), this.label && (h("label", { key: '3f135039ab03449cad21ce93071bd7b597d65d40', class: "xplor-input-text__label", htmlFor: this.inputId, style: { backgroundColor: this.bgColor } }, this.label, this.required && h("span", { key: 'a3d04091abd40736d9b3d00c8796355c4ae8bf30', class: "xplor-input-text__required" }, "*"))), h("slot", { key: '290d13fe4c82231ff3341c60f9bffb319ab686d0', name: "append-inner" })), showDetails && (h("div", { key: 'c38de9592f5a0520e8ac18aa64f4d88c9db9b62e', class: "xplor-input-text__details" }, this.error && h("div", { key: '3535de57296c0b265d701dac604bdf65c4bd6801', class: "xplor-input-text__error-message", id: this.errorId }, this.error), !this.error && this.helperText && h("div", { key: '46003ab056e8677ef304a007610ff95b07434482', class: "xplor-input-text__helper-text", id: this.helperId }, this.helperText))), h("slot", { key: 'c4a0dda405f82c24df42e82b029ccc3e9cfcc7ad', name: "append" }))));
     }
     static get style() { return xplorInputTextCss; }
 }, [6, "xplor-input-text", {

package/dist/components/xplor-input-text.js.map

@@ -1 +1 @@
-{"file":"xplor-input-text.js","mappings":"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","names":["XplorInputText","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-input-text/xplor-input-text.scss?tag=xplor-input-text&encapsulation=scoped","src/components/xplor-input-text/xplor-input-text.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.xplor-input-text {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n\n  &__label {\n    font-size: 0.875rem;\n    color: rgba(0, 0, 0, 0.6);\n    margin-bottom: 0.25rem;\n  }\n\n  &__required {\n    color: #d32f2f;\n    margin-left: 0.25rem;\n  }\n\n  &__field {\n    position: relative;\n    display: flex;\n    align-items: center;\n  }\n\n  &__input {\n    width: 100%;\n    padding: 0.875rem 1rem;\n    font-size: 1rem;\n    font-family: inherit;\n    border: 1px solid rgba(0, 0, 0, 0.23);\n    border-radius: 1rem;\n    outline: none;\n    transition: border-color 0.2s ease;\n\n    &::placeholder {\n      color: rgba(0, 0, 0, 0.38);\n    }\n\n    &:hover:not(:disabled) {\n      border-color: rgba(0, 0, 0, 0.6);\n    }\n\n    &:focus {\n      border-color: #008480;\n      border-width: 2px;\n      padding: calc(0.875rem - 1px) calc(1rem - 1px);\n    }\n\n    &:disabled {\n      background-color: rgba(0, 0, 0, 0.04);\n      color: rgba(0, 0, 0, 0.38);\n      cursor: not-allowed;\n    }\n\n    &:read-only {\n      background-color: rgba(0, 0, 0, 0.04);\n    }\n  }\n\n  &--error {\n    .xplor-input-text__input {\n      border-color: #d32f2f;\n    }\n  }\n\n  &__details {\n    min-height: 1.25rem;\n    padding: 0 1rem;\n    font-size: 0.75rem;\n  }\n\n  &__error-message {\n    color: #d32f2f;\n  }\n\n  &__helper-text {\n    color: rgba(0, 0, 0, 0.6);\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, State } from '@stencil/core';\n\nlet inputTextIdCounter = 0;\n\n@Component({\n  tag: 'xplor-input-text',\n  styleUrl: 'xplor-input-text.scss',\n  scoped: true,\n})\nexport class XplorInputText {\n  private inputId = `xplor-input-text-${++inputTextIdCounter}`;\n  private errorId = `${this.inputId}-error`;\n  private helperId = `${this.inputId}-helper`;\n  /**\n   * Input value\n   */\n  @Prop({ mutable: true }) value: string = '';\n\n  /**\n   * Input label\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Input placeholder\n   */\n  @Prop() placeholder: string = '';\n\n  /**\n   * Input type (text, email, password, number, etc.)\n   */\n  @Prop() type: string = 'text';\n\n  /**\n   * Background color\n   */\n  @Prop() bgColor: string = 'white';\n\n  /**\n   * Border/focus color\n   */\n  @Prop() color: string = '#008480';\n\n  /**\n   * Whether the input is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether the input is readonly\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * Whether to hide validation details\n   */\n  @Prop() hideDetails: boolean | 'auto' = 'auto';\n\n  /**\n   * Error message\n   */\n  @Prop() error: string = '';\n\n  /**\n   * Helper text\n   */\n  @Prop() helperText: string = '';\n\n  /**\n   * Whether the input is required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Input event\n   */\n  @Event() xplorInput: EventEmitter<string>;\n\n  /**\n   * Change event\n   */\n  @Event() xplorChange: EventEmitter<string>;\n\n  /**\n   * Focus event\n   */\n  @Event() xplorFocus: EventEmitter<FocusEvent>;\n\n  /**\n   * Blur event\n   */\n  @Event() xplorBlur: EventEmitter<FocusEvent>;\n\n  @State() isFocused: boolean = false;\n\n  private handleInput = (event: Event) => {\n    const target = event.target as HTMLInputElement;\n    this.value = target.value;\n    this.xplorInput.emit(this.value);\n  };\n\n  private handleChange = (event: Event) => {\n    const target = event.target as HTMLInputElement;\n    this.value = target.value;\n    this.xplorChange.emit(this.value);\n  };\n\n  private handleFocus = (event: FocusEvent) => {\n    this.isFocused = true;\n    this.xplorFocus.emit(event);\n  };\n\n  private handleBlur = (event: FocusEvent) => {\n    this.isFocused = false;\n    this.xplorBlur.emit(event);\n  };\n\n  render() {\n    const containerClasses = {\n      'xplor-input-text': true,\n      'xplor-input-text--focused': this.isFocused,\n      'xplor-input-text--disabled': this.disabled,\n      'xplor-input-text--error': !!this.error,\n    };\n\n    const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));\n\n    return (\n      <Host>\n        <div class={containerClasses}>\n          {this.label && (\n            <label class=\"xplor-input-text__label\" htmlFor={this.inputId}>\n              {this.label}\n              {this.required && <span class=\"xplor-input-text__required\">*</span>}\n            </label>\n          )}\n\n          <div class=\"xplor-input-text__field\">\n            <input\n              id={this.inputId}\n              type={this.type}\n              class=\"xplor-input-text__input\"\n              value={this.value}\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n              readonly={this.readonly}\n              required={this.required}\n              onInput={this.handleInput}\n              onChange={this.handleChange}\n              onFocus={this.handleFocus}\n              onBlur={this.handleBlur}\n              style={{\n                backgroundColor: this.bgColor,\n              }}\n              aria-invalid={this.error ? 'true' : undefined}\n              aria-required={this.required ? 'true' : undefined}\n              aria-describedby={this.error ? this.errorId : this.helperText ? this.helperId : undefined}\n            />\n            <slot name=\"append-inner\" />\n          </div>\n\n          {showDetails && (\n            <div class=\"xplor-input-text__details\">\n              {this.error && <div class=\"xplor-input-text__error-message\" id={this.errorId}>{this.error}</div>}\n              {!this.error && this.helperText && <div class=\"xplor-input-text__helper-text\" id={this.helperId}>{this.helperText}</div>}\n            </div>\n          )}\n\n          <slot name=\"append\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"xplor-input-text.js","mappings":"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","names":["XplorInputText","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-input-text/xplor-input-text.scss?tag=xplor-input-text&encapsulation=scoped","src/components/xplor-input-text/xplor-input-text.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.xplor-input-text {\n  display: flex;\n  flex-direction: column;\n\n  &__required {\n    color: #d32f2f;\n    margin-left: 0.25rem;\n  }\n\n  &__field {\n    position: relative;\n    display: flex;\n    align-items: center;\n  }\n\n  &__label {\n    position: absolute;\n    left: 1rem;\n    top: 50%;\n    transform: translateY(-50%);\n    font-size: 1rem;\n    color: rgba(0, 0, 0, 0.6);\n    pointer-events: none;\n    padding: 0 0.25rem;\n    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),\n                top 0.15s cubic-bezier(0.4, 0, 0.2, 1),\n                font-size 0.15s cubic-bezier(0.4, 0, 0.2, 1),\n                color 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n    max-width: calc(100% - 2rem);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &__input {\n    width: 100%;\n    padding: 0.875rem 1rem;\n    font-size: 1rem;\n    font-family: inherit;\n    border: 1px solid rgba(0, 0, 0, 0.23);\n    border-radius: 1rem;\n    outline: none;\n    transition: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),\n                border-width 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n    min-height: 3rem;\n\n    &::placeholder {\n      color: rgba(0, 0, 0, 0.38);\n    }\n\n    &:hover:not(:disabled) {\n      border-color: rgba(0, 0, 0, 0.87);\n    }\n\n    &:disabled {\n      background-color: rgba(0, 0, 0, 0.04);\n      color: rgba(0, 0, 0, 0.38);\n      cursor: not-allowed;\n    }\n\n    &:read-only {\n      background-color: rgba(0, 0, 0, 0.04);\n    }\n  }\n\n  // Floating state: label moves to top border\n  &--floating {\n    .xplor-input-text__label {\n      top: 0;\n      transform: translateY(-50%);\n      font-size: 0.75rem;\n    }\n  }\n\n  // Focused state: border and label turn teal\n  &--focused {\n    .xplor-input-text__input {\n      border-color: #008480;\n      border-width: 2px;\n      padding: calc(0.875rem - 1px) calc(1rem - 1px);\n    }\n\n    .xplor-input-text__label {\n      color: #008480;\n    }\n  }\n\n  // Error state\n  &--error {\n    .xplor-input-text__input {\n      border-color: #d32f2f;\n    }\n\n    .xplor-input-text__label {\n      color: #d32f2f;\n    }\n  }\n\n  &--error#{&}--focused {\n    .xplor-input-text__input {\n      border-color: #d32f2f;\n      border-width: 2px;\n    }\n  }\n\n  // Disabled state\n  &--disabled {\n    .xplor-input-text__label {\n      color: rgba(0, 0, 0, 0.38);\n    }\n  }\n\n  &__details {\n    min-height: 1.25rem;\n    padding: 0 1rem;\n    font-size: 0.75rem;\n  }\n\n  &__error-message {\n    color: #d32f2f;\n  }\n\n  &__helper-text {\n    color: rgba(0, 0, 0, 0.6);\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, State } from '@stencil/core';\n\nlet inputTextIdCounter = 0;\n\n@Component({\n  tag: 'xplor-input-text',\n  styleUrl: 'xplor-input-text.scss',\n  scoped: true,\n})\nexport class XplorInputText {\n  private inputId = `xplor-input-text-${++inputTextIdCounter}`;\n  private errorId = `${this.inputId}-error`;\n  private helperId = `${this.inputId}-helper`;\n  /**\n   * Input value\n   */\n  @Prop({ mutable: true }) value: string = '';\n\n  /**\n   * Input label\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Input placeholder\n   */\n  @Prop() placeholder: string = '';\n\n  /**\n   * Input type (text, email, password, number, etc.)\n   */\n  @Prop() type: string = 'text';\n\n  /**\n   * Background color\n   */\n  @Prop() bgColor: string = 'white';\n\n  /**\n   * Border/focus color\n   */\n  @Prop() color: string = '#008480';\n\n  /**\n   * Whether the input is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether the input is readonly\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * Whether to hide validation details\n   */\n  @Prop() hideDetails: boolean | 'auto' = 'auto';\n\n  /**\n   * Error message\n   */\n  @Prop() error: string = '';\n\n  /**\n   * Helper text\n   */\n  @Prop() helperText: string = '';\n\n  /**\n   * Whether the input is required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Input event\n   */\n  @Event() xplorInput: EventEmitter<string>;\n\n  /**\n   * Change event\n   */\n  @Event() xplorChange: EventEmitter<string>;\n\n  /**\n   * Focus event\n   */\n  @Event() xplorFocus: EventEmitter<FocusEvent>;\n\n  /**\n   * Blur event\n   */\n  @Event() xplorBlur: EventEmitter<FocusEvent>;\n\n  @State() isFocused: boolean = false;\n\n  private handleInput = (event: Event) => {\n    const target = event.target as HTMLInputElement;\n    this.value = target.value;\n    this.xplorInput.emit(this.value);\n  };\n\n  private handleChange = (event: Event) => {\n    const target = event.target as HTMLInputElement;\n    this.value = target.value;\n    this.xplorChange.emit(this.value);\n  };\n\n  private handleFocus = (event: FocusEvent) => {\n    this.isFocused = true;\n    this.xplorFocus.emit(event);\n  };\n\n  private handleBlur = (event: FocusEvent) => {\n    this.isFocused = false;\n    this.xplorBlur.emit(event);\n  };\n\n  render() {\n    const hasValue = this.value != null && this.value !== '';\n    const isFloating = this.isFocused || hasValue;\n\n    const containerClasses = {\n      'xplor-input-text': true,\n      'xplor-input-text--focused': this.isFocused,\n      'xplor-input-text--floating': isFloating,\n      'xplor-input-text--disabled': this.disabled,\n      'xplor-input-text--error': !!this.error,\n    };\n\n    const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));\n\n    return (\n      <Host>\n        <div class={containerClasses}>\n          <div class=\"xplor-input-text__field\">\n            <input\n              id={this.inputId}\n              type={this.type}\n              class=\"xplor-input-text__input\"\n              value={this.value}\n              placeholder={isFloating ? this.placeholder : ''}\n              disabled={this.disabled}\n              readonly={this.readonly}\n              required={this.required}\n              onInput={this.handleInput}\n              onChange={this.handleChange}\n              onFocus={this.handleFocus}\n              onBlur={this.handleBlur}\n              style={{\n                backgroundColor: this.bgColor,\n              }}\n              aria-invalid={this.error ? 'true' : undefined}\n              aria-required={this.required ? 'true' : undefined}\n              aria-describedby={this.error ? this.errorId : this.helperText ? this.helperId : undefined}\n            />\n            {this.label && (\n              <label\n                class=\"xplor-input-text__label\"\n                htmlFor={this.inputId}\n                style={{ backgroundColor: this.bgColor }}\n              >\n                {this.label}\n                {this.required && <span class=\"xplor-input-text__required\">*</span>}\n              </label>\n            )}\n            <slot name=\"append-inner\" />\n          </div>\n\n          {showDetails && (\n            <div class=\"xplor-input-text__details\">\n              {this.error && <div class=\"xplor-input-text__error-message\" id={this.errorId}>{this.error}</div>}\n              {!this.error && this.helperText && <div class=\"xplor-input-text__helper-text\" id={this.helperId}>{this.helperText}</div>}\n            </div>\n          )}\n\n          <slot name=\"append\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/xplor-input-title.js

@@ -40,7 +40,7 @@ const XplorInputTitle$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputTitle
         };
     }
     render() {
-        return (h(Host, { key: 'ef2d69909fe74019c12da557fa136e0389336e05' }, h("input", { key: 'dfdc0a0072ec511a1edfc68a6fad9e4169064f8f', type: "text", class: "xplor-input-title", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, "aria-label": this.ariaLabel, onInput: this.handleInput, onChange: this.handleChange })));
+        return (h(Host, { key: 'd704477e948ba0d8184a4a1231b855d56ea8c390' }, h("input", { key: 'd1c171f69b54b7981f56da8b3651f212c52e1af9', type: "text", class: "xplor-input-title", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, "aria-label": this.ariaLabel, onInput: this.handleInput, onChange: this.handleChange })));
     }
     static get style() { return xplorInputTitleCss; }
 }, [2, "xplor-input-title", {

package/dist/components/xplor-links.js

@@ -11,7 +11,7 @@ const XplorLinks$1 = /*@__PURE__*/ proxyCustomElement(class XplorLinks extends H
         this.imageAlt = '';
     }
     render() {
-        return (h(Host, { key: '1d0963855eaf79dacbae5d6a5b86cc6b6ae84632', class: `theme-${this.brand}` }, h("a", { key: 'd95d148b5745909e17a51e7d44e6412956a4844b', class: "x-link", href: "https://google.com" }, ' ', "googole this is a link", ' '), h("div", { key: '05c27ca582f5d298e00a46240700088f3ef1c250', class: "bg-black p-2 rounded-md flex justify-center" }, h("h1", { key: '9f4180eef39b9006277a72534d385ce3b742e40c', class: "text-primary font-sans" }, "This is a Stencil component using Tailwind")), h("div", { key: 'fe5ffb8f988e0df18e53a04873d6dfe63e7ca26e', class: "bg-white py-24 sm:py-32" }, h("div", { key: '09bd7b00cd955c991e662f3f71addac329d4b189', class: "mx-auto grid max-w-7xl gap-20 px-6 lg:px-8 xl:grid-cols-3" }, h("div", { key: '36f6bd91ab4db26df78b21e533c2f584ba656d26', class: "max-w-xl" }, h("h2", { key: '165380866054da7add2a455b15370f4cd8a7ad65', class: "text-pretty text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl" }, "Meet our leadership"), h("p", { key: '726b4e94c27bafe707c6a48f6604a28cb15d1c47', class: "mt-6 text-lg/8 text-gray-600" }, "We\u2019re a dynamic group of individuals who are passionate about what we do and dedicated to delivering the best results for our clients.")), h("ul", { key: 'a884c969151b0b935d40e5a98d9418d5a8bcc415', role: "list", class: "grid gap-x-8 gap-y-12 sm:grid-cols-2 sm:gap-y-16 xl:col-span-2" }, h("li", { key: 'c5b4adca7d9a2038462dcd2958b95b5a7c661314' }, h("div", { key: '4a013658a1982d345000bbce12ace33b5e6bd2d8', class: "flex items-center gap-x-6" }, h("img", { key: 'c93cc4184e758ca5d1b9942bbbec8a5afb219732', class: "size-16 rounded-full", src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80", alt: this.imageAlt }), h("div", { key: 'a05b6b18dbf663af70b0c7840d034973b2cc15df' }, h("h3", { key: '7d6ff8ca21af23e69497e067f346b3b0b61de42c', class: "text-base/7 font-semibold tracking-tight text-gray-900" }, "Leslie Alexander"), h("p", { key: '33528098f6f09a748251f49a8e0b377992f2c4e1', class: "text-sm/6 font-semibold text-indigo-600" }, "Co-Founder / CEO")))))))));
+        return (h(Host, { key: '889187734e978da8f6303bc6348d16ff58a4f117', class: `theme-${this.brand}` }, h("a", { key: '31ec1b964e1033ed77ae8e13d4d6a2bbb47681ae', class: "x-link", href: "https://google.com" }, ' ', "googole this is a link", ' '), h("div", { key: '5c368f18b9189f2e7d6b078f8d8d55422dbba8be', class: "bg-black p-2 rounded-md flex justify-center" }, h("h1", { key: 'c59f722b0c6d67af621872de924f3bfddbee2b71', class: "text-primary font-sans" }, "This is a Stencil component using Tailwind")), h("div", { key: '69a8672d3dfa05ae91762f63f879359ee8eaae7c', class: "bg-white py-24 sm:py-32" }, h("div", { key: 'f3cf50757eee5bd60902d9402b9169ace12ab570', class: "mx-auto grid max-w-7xl gap-20 px-6 lg:px-8 xl:grid-cols-3" }, h("div", { key: '06c98d24f3fe053033b6e4ab6e7d3339797cfb4f', class: "max-w-xl" }, h("h2", { key: '6a8c0b137fa3cc971271df5f55a87b11d01abc52', class: "text-pretty text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl" }, "Meet our leadership"), h("p", { key: 'ae46370f680162d2d073a8a81762ee5cabf66506', class: "mt-6 text-lg/8 text-gray-600" }, "We\u2019re a dynamic group of individuals who are passionate about what we do and dedicated to delivering the best results for our clients.")), h("ul", { key: 'a02b593fe26d9814b2ebe89bb1fc8a93e7b25dbe', role: "list", class: "grid gap-x-8 gap-y-12 sm:grid-cols-2 sm:gap-y-16 xl:col-span-2" }, h("li", { key: 'a2ce1ff6fc5379cc1c3d93dbb0ede1f47dc20e06' }, h("div", { key: '8ef99aacde6e9d5ea9c3c05ee8f4e262655bd130', class: "flex items-center gap-x-6" }, h("img", { key: 'e742f8c1d0cb3e6bd5649a94966c01027314dc7e', class: "size-16 rounded-full", src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80", alt: this.imageAlt }), h("div", { key: 'dd31c47ff1c7b1d6c3f11938abb61b7556ef9e9c' }, h("h3", { key: 'a1c97a24c3c1baaa1a78409bcc8410aad4f4f1f7', class: "text-base/7 font-semibold tracking-tight text-gray-900" }, "Leslie Alexander"), h("p", { key: '77709dadf6ff62a9473ac88ce6fc419fe81217fc', class: "text-sm/6 font-semibold text-indigo-600" }, "Co-Founder / CEO")))))))));
     }
     static get style() { return xplorLinksCss; }
 }, [1, "xplor-links", {

package/dist/components/xplor-modal-persistent.js

@@ -28,7 +28,7 @@ const XplorModalPersistent$1 = /*@__PURE__*/ proxyCustomElement(class XplorModal
         this.loading = false;
     }
     render() {
-        return (h(Host, { key: '884f843600d455676714efef74a7102467cf7fe5' }, h("xplor-modal", { key: 'c3886708722829887adb5213f4eb98470ad16132', open: this.open, width: this.width, maxWidth: this.maxWidth, maxHeight: this.maxHeight, loading: this.loading, persistent: true, onXplorClose: () => this.xplorClose.emit() }, h("slot", { key: '0f6b7f60e3f9354994b00f15ee7056c2b5f4a454', name: "title", slot: "title" }), h("slot", { key: '03a625acfe4a23677d1e532d56b0797c9d0f6457', name: "subtitle", slot: "subtitle" }), h("slot", { key: '57d9c7c4897299b0bb84de291e202d6c00d3914f', name: "body", slot: "body" }), h("slot", { key: '9290ae4fede095d8e11f32396029e59da7212e16', name: "actions", slot: "actions" }))));
+        return (h(Host, { key: 'a63a1be6d3f7f91ee12d9ac55263862d4a304520' }, h("xplor-modal", { key: 'd96ca5c6388f90e2345da0b97b7683b785da01f9', open: this.open, width: this.width, maxWidth: this.maxWidth, maxHeight: this.maxHeight, loading: this.loading, persistent: true, onXplorClose: () => this.xplorClose.emit() }, h("slot", { key: '8bdf1a54705992482008ffc724b90a182c19d6c9', name: "title", slot: "title" }), h("slot", { key: '91316e16134121d55bb5119a7ed6aacce244161a', name: "subtitle", slot: "subtitle" }), h("slot", { key: 'b728a60734f050286b8e36079cfcd6872d5bb737', name: "body", slot: "body" }), h("slot", { key: 'd2f44d88fd6e4b109193e07e013168c92741b202', name: "actions", slot: "actions" }))));
     }
 }, [4, "xplor-modal-persistent", {
         "open": [4],

package/dist/components/xplor-nav-tabs.js

@@ -55,7 +55,7 @@ const XplorNavTabs$1 = /*@__PURE__*/ proxyCustomElement(class XplorNavTabs exten
         }
     }
     render() {
-        return (h(Host, { key: '1a94314129f0f6c94df3196ef7e2a493b6626fd7' }, h("div", { key: '71b0ee2d2baab1fed571ed88f04fc49754b2952e', class: {
+        return (h(Host, { key: 'c2ea1eb0316856196a7c84589fa74cb05cf9bd0a' }, h("div", { key: '360f41422ff1a5b29417ffe02b150e19ad2779d3', class: {
                 'nav-tabs': true,
                 'nav-tabs--grow': this.grow,
                 [`nav-tabs--${this.color}`]: true,
@@ -63,7 +63,7 @@ const XplorNavTabs$1 = /*@__PURE__*/ proxyCustomElement(class XplorNavTabs exten
                 'nav-tabs__tab': true,
                 'nav-tabs__tab--active': this.value === item.value,
                 'nav-tabs__tab--disabled': item.disabled,
-            }, onClick: () => this.handleTabClick(item), disabled: item.disabled, role: "tab", "aria-selected": this.value === item.value ? 'true' : 'false', tabIndex: this.value === item.value ? 0 : -1, type: "button" }, item.label))), h("slot", { key: 'fbf08f6785a81babc1c29359f0dff202dca18d6c' }))));
+            }, onClick: () => this.handleTabClick(item), disabled: item.disabled, role: "tab", "aria-selected": this.value === item.value ? 'true' : 'false', tabIndex: this.value === item.value ? 0 : -1, type: "button" }, item.label))), h("slot", { key: '4b070fa29fa37e878b737fdc5d3eaa4b492bdc01' }))));
     }
     get el() { return this; }
     static get style() { return xplorNavTabsCss; }

package/dist/components/xplor-radio-btn.js

@@ -83,10 +83,10 @@ const XplorRadioBtn$1 = /*@__PURE__*/ proxyCustomElement(class XplorRadioBtn ext
         return all.filter(radio => radio !== this.el);
     }
     render() {
-        return (h("label", { key: '305a0c3d610686e8c11180c15db8d1ce4ca98c60', class: {
+        return (h("label", { key: '7bc995d1df46cd9818692d9a2b59fc6560f23cdd', class: {
                 'radio-wrapper': true,
                 'radio-wrapper--disabled': this.disabled,
-            } }, h("div", { key: 'ed0dd418bf295430c8cf1edd4b43519b3cf04018', class: this.getRadioClass(), onClick: this.handleClick, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onMouseDown: () => (this.isPressed = true), onMouseUp: () => (this.isPressed = false), onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, tabIndex: this.disabled ? -1 : 0, role: "radio", "aria-checked": this.checked.toString(), "aria-disabled": this.disabled.toString(), "aria-label": this.label }, h("div", { key: 'ae6dd96a65601ba50d3e6e919b95983d3e47e8e5', class: { 'radio-inner': true, 'radio-inner--visible': this.checked } })), this.label && (h("span", { key: 'b5647a8ad15d03187ba2f8c670846e9025ffba7e', class: "label" }, this.label))));
+            } }, h("div", { key: 'eea71f02b6335bd443f4410b350a61f1706a9b59', class: this.getRadioClass(), onClick: this.handleClick, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onMouseDown: () => (this.isPressed = true), onMouseUp: () => (this.isPressed = false), onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, tabIndex: this.disabled ? -1 : 0, role: "radio", "aria-checked": this.checked.toString(), "aria-disabled": this.disabled.toString(), "aria-label": this.label }, h("div", { key: '0b61c18ef3a9f08f6b89176de2b7a4d21b16d9fc', class: { 'radio-inner': true, 'radio-inner--visible': this.checked } })), this.label && (h("span", { key: '7b227dca0fa69409dc71a04bc642c2de30bd2562', class: "label" }, this.label))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/xplor-rich-text-editor.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface XplorRichTextEditor extends Components.XplorRichTextEditor, HTMLElement {}
+export const XplorRichTextEditor: {
+    prototype: XplorRichTextEditor;
+    new (): XplorRichTextEditor;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;