npm - @xplor-education/core-stencil-components - Versions diffs - 2.0.0 → 3.0.0 - Mend

@xplor-education/core-stencil-components 2.0.0 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (314) hide show

package/dist/components/xplor-input-text-secondary.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"xplor-input-text-secondary.js","mappings":";;AAAA,MAAM,0BAA0B,GAAG,q+RAAq+R;;~~MCO3/RA~~,yBAAuB,iBAAAC,kBAAA,CAAA,MAAA,uBAAA,SAAAC,CAAA,CAAA;AALpC,IAAA,WAAA,GAAA;;;;;;;~~AAM2B~~,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AACnC,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AAClB,QAAA,IAAW,CAAA,WAAA,GAAW,EAAE;AACxB,QAAA,IAAI,CAAA,IAAA,GAAW,MAAM;AACrB,QAAA,IAAO,CAAA,OAAA,GAAW,OAAO;AACzB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACzB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACzB,QAAA,IAAW,CAAA,WAAA,GAAqB,MAAM;AACtC,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AAClB,QAAA,IAAU,CAAA,UAAA,GAAW,EAAE;AACvB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACzB,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAOvB,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAE3B,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAY,KAAI;AACrC,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;AAC/C,YAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK;YACzB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AAClC,SAAC;AAEO,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,KAAY,KAAI;AACtC,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;AAC/C,YAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK;YACzB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AACnC,SAAC;AAEO,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAiB,KAAI;AAC1C,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AACrB,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC;AAC7B,SAAC;AAEO,QAAA,IAAA,CAAA,UAAU,GAAG,CAAC,KAAiB,KAAI;AACzC,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACtB,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;AAC5B,SAAC;~~AAuDF~~;~~IArDC~~,MAAM,GAAA;AACJ,QAAA,MAAM,gBAAgB,GAAG;AACvB,YAAA,iBAAiB,EAAE,IAAI;YACvB,0BAA0B,EAAE,IAAI,CAAC,SAAS;YAC1C,2BAA2B,EAAE,IAAI,CAAC,QAAQ;AAC1C,YAAA,wBAAwB,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK;YACtC,wBAAwB,EAAE,IAAI,CAAC,OAAO;SACvC;QAED,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,KAAK,KAAK,KAAK,IAAI,CAAC,WAAW,KAAK,MAAM,KAAK,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC;AAElH,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gBAAgB,EAAA,EACzB,IAAI,CAAC,KAAK,KACT,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,~~EAClC~~,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,QAAQ,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,2BAA2B,EAAS,EAAA,GAAA,CAAA,CAC5D,CACT,EAED,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EACjC,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,wBAAwB,EAC9B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,KAAK,EAAE;gBACL,eAAe,EAAE,IAAI,CAAC,OAAO;~~aAC9B~~,~~EACD~~,CAAA,EACF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,cAAc,EAAA,CAAG,CACxB,EAEL,WAAW,KACV,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EAClC,IAAI,CAAC,KAAK,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gCAAgC,EAAE,~~EAAA~~,IAAI,CAAC,KAAK,CAAO,~~EAC5E~~,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,UAAU,IAAI,~~CAAA~~,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,~~EAAK~~,KAAK,EAAC,8BAA8B,EAAE,EAAA,IAAI,CAAC,UAAU,CAAO,~~CAChG~~,CACP,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorInputTextSecondary","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-input-text-secondary/xplor-input-text-secondary.scss?tag=xplor-input-text-secondary&encapsulation=scoped","src/components/xplor-input-text-secondary/xplor-input-text-secondary.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.input-secondary {\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: 16px;\n outline: none;\n transition: border-color 0.2s ease, border-width 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 &--dirty {\n .input-secondary__input {\n border-color: #008480;\n border-width: 2px;\n padding: calc(0.875rem - 1px) calc(1rem - 1px);\n }\n }\n\n &--error {\n .input-secondary__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\n@Component({\n tag: 'xplor-input-text-secondary',\n styleUrl: 'xplor-input-text-secondary.scss',\n scoped: true,\n})\nexport class XplorInputTextSecondary {\n @Prop({ mutable: true }) value: string = '';\n @Prop() label: string = '';\n @Prop() placeholder: string = '';\n @Prop() type: string = 'text';\n @Prop() bgColor: string = 'white';\n @Prop() disabled: boolean = false;\n @Prop() readonly: boolean = false;\n @Prop() hideDetails: boolean \| 'auto' = 'auto';\n @Prop() error: string = '';\n @Prop() helperText: string = '';\n @Prop() required: boolean = false;\n @Prop() isDirty: boolean = false;\n\n @Event() xplorInput: EventEmitter<string>;\n @Event() xplorChange: EventEmitter<string>;\n @Event() xplorFocus: EventEmitter<FocusEvent>;\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 'input-secondary': true,\n 'input-secondary--focused': this.isFocused,\n 'input-secondary--disabled': this.disabled,\n 'input-secondary--error': !!this.error,\n 'input-secondary--dirty': this.isDirty,\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=\"input-secondary__label\">\n {this.label}\n {this.required && <span class=\"input-secondary__required\">*</span>}\n </label>\n )}\n\n <div class=\"input-secondary__field\">\n <input\n type={this.type}\n class=\"input-secondary__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 />\n <slot name=\"append-inner\" />\n </div>\n\n {showDetails && (\n <div class=\"input-secondary__details\">\n {this.error && <div class=\"input-secondary__error-message\">{this.error}</div>}\n {!this.error && this.helperText && <div class=\"input-secondary__helper-text\">{this.helperText}</div>}\n </div>\n )}\n\n <slot name=\"append\" />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"xplor-input-text-secondary.js","mappings":"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","names":["XplorInputTextSecondary","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-input-text-secondary/xplor-input-text-secondary.scss?tag=xplor-input-text-secondary&encapsulation=scoped","src/components/xplor-input-text-secondary/xplor-input-text-secondary.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.input-secondary {\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: 16px;\n outline: none;\n transition: border-color 0.2s ease, border-width 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 &--dirty {\n .input-secondary__input {\n border-color: #008480;\n border-width: 2px;\n padding: calc(0.875rem - 1px) calc(1rem - 1px);\n }\n }\n\n &--error {\n .input-secondary__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 inputTextSecondaryIdCounter = 0;\n\n@Component({\n tag: 'xplor-input-text-secondary',\n styleUrl: 'xplor-input-text-secondary.scss',\n scoped: true,\n})\nexport class XplorInputTextSecondary {\n private inputId = `xplor-input-text-secondary-${++inputTextSecondaryIdCounter}`;\n private errorId = `${this.inputId}-error`;\n private helperId = `${this.inputId}-helper`;\n @Prop({ mutable: true }) value: string = '';\n @Prop() label: string = '';\n @Prop() placeholder: string = '';\n @Prop() type: string = 'text';\n @Prop() bgColor: string = 'white';\n @Prop() disabled: boolean = false;\n @Prop() readonly: boolean = false;\n @Prop() hideDetails: boolean \| 'auto' = 'auto';\n @Prop() error: string = '';\n @Prop() helperText: string = '';\n @Prop() required: boolean = false;\n @Prop() isDirty: boolean = false;\n\n @Event() xplorInput: EventEmitter<string>;\n @Event() xplorChange: EventEmitter<string>;\n @Event() xplorFocus: EventEmitter<FocusEvent>;\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 'input-secondary': true,\n 'input-secondary--focused': this.isFocused,\n 'input-secondary--disabled': this.disabled,\n 'input-secondary--error': !!this.error,\n 'input-secondary--dirty': this.isDirty,\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=\"input-secondary__label\" htmlFor={this.inputId}>\n {this.label}\n {this.required && <span class=\"input-secondary__required\">*</span>}\n </label>\n )}\n\n <div class=\"input-secondary__field\">\n <input\n id={this.inputId}\n type={this.type}\n class=\"input-secondary__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=\"input-secondary__details\">\n {this.error && <div class=\"input-secondary__error-message\" id={this.errorId}>{this.error}</div>}\n {!this.error && this.helperText && <div class=\"input-secondary__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-text.js CHANGED Viewed

@@ -2,6 +2,7 @@ import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './in
 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}";
+let inputTextIdCounter = 0;
 const XplorInputText$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputText extends H {
     constructor() {
         super();
@@ -10,6 +11,9 @@ const XplorInputText$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputText e
         this.xplorChange = createEvent(this, "xplorChange");
         this.xplorFocus = createEvent(this, "xplorFocus");
         this.xplorBlur = createEvent(this, "xplorBlur");
+        this.inputId = `xplor-input-text-${++inputTextIdCounter}`;
+        this.errorId = `${this.inputId}-error`;
+        this.helperId = `${this.inputId}-helper`;
         /**
          * Input value
          */
@@ -86,9 +90,9 @@ const XplorInputText$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputText e
             'xplor-input-text--error': !!this.error,
         };
         const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));
-        return (h(Host, { key: '63a41a0420e4006ee19740d408c9c6dc1f609a96' }, h("div", { key: '2b5c2990098b4fe843e70a52eae25d284abc5dfc', class: containerClasses }, this.label && (h("label", { key: '9f0184741293bfd453b78e1edc0eb3f3c02bd12e', class: "xplor-input-text__label" }, this.label, this.required && h("span", { key: '3ec943a28889363da1356aa69392f906b0bc6542', class: "xplor-input-text__required" }, "*"))), h("div", { key: 'a7f83624fb3564fbeb59d8d984c039980354c6af', class: "xplor-input-text__field" }, h("input", { key: '0a886666e4086099333e22ee4aa3406e81a73917', 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: '74d78e4b2d95f642b57606b0e8315d3064de446e' }, h("div", { key: '7852dd1859fec108d191f612c1f02763edb4f419', class: containerClasses }, this.label && (h("label", { key: 'e9f627130b2ed1f07d9eb6a91f7b40b79cafd550', class: "xplor-input-text__label", htmlFor: this.inputId }, this.label, this.required && h("span", { key: 'a4763b2c5e5a3702b126528845dfcdb5d42e9e3d', class: "xplor-input-text__required" }, "*"))), h("div", { key: 'fce0f4b127098b1c88200f36190d2a89214b3341', class: "xplor-input-text__field" }, h("input", { key: '63ce8a595f7ea39f9ab011fe00c11530ce256c6c', 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: {
                 backgroundColor: this.bgColor,
-            } }), h("slot", { key: '8d854313cb392c2a3b8ff63b9f193fa38af672ec', name: "append-inner" })), showDetails && (h("div", { key: '0a9b055a64e296ead6b0f20ffc717782f89b6718', class: "xplor-input-text__details" }, this.error && h("div", { key: '2101193d34660879589cb581e2beddba2fd93363', class: "xplor-input-text__error-message" }, this.error), !this.error && this.helperText && h("div", { key: '648b517eb3b510680036e2514ab23a00d9dc90fc', class: "xplor-input-text__helper-text" }, this.helperText))), h("slot", { key: '754393f25fa96e8bf7a91e51f91ae8afe3d03e7b', 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 }), h("slot", { key: 'a24e700dcbd30d21ff559b6a8fa189d260e3a470', name: "append-inner" })), showDetails && (h("div", { key: 'b20cd03b0d9d4fb0ab52f9fe0c7bb03488f88401', class: "xplor-input-text__details" }, this.error && h("div", { key: 'cbc084358dfb8c457d97ae66a21f3068ad5ccabb', class: "xplor-input-text__error-message", id: this.errorId }, this.error), !this.error && this.helperText && h("div", { key: 'a1ab582138c63ed2f1830910e7a5b740c0f71909', class: "xplor-input-text__helper-text", id: this.helperId }, this.helperText))), h("slot", { key: '30f30e929242a463a86a6470ceae0d708714cf8f', name: "append" }))));
     }
     static get style() { return xplorInputTextCss; }
 }, [6, "xplor-input-text", {

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

	@@ -1 +1 @@
1	- {"file":"xplor-input-text.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,6xQAA6xQ;;~~MCO1yQA~~,gBAAc,iBAAAC,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;AAL3B,IAAA,WAAA,GAAA;;;;;;;~~AAME~~;;AAEG;AACsB,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AAE3C;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AAE1B;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAW,EAAE;AAEhC;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAW,MAAM;AAE7B;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAW,OAAO;AAEjC;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,SAAS;AAEjC;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEjC;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEjC;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAqB,MAAM;AAE9C;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AAE1B;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAW,EAAE;AAE/B;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAsBxB,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAE3B,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAY,KAAI;AACrC,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;AAC/C,YAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK;YACzB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AAClC,SAAC;AAEO,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,KAAY,KAAI;AACtC,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;AAC/C,YAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK;YACzB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AACnC,SAAC;AAEO,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAiB,KAAI;AAC1C,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AACrB,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC;AAC7B,SAAC;AAEO,QAAA,IAAA,CAAA,UAAU,GAAG,CAAC,KAAiB,KAAI;AACzC,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACtB,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;AAC5B,SAAC;~~AAsDF~~;~~IApDC~~,MAAM,GAAA;AACJ,QAAA,MAAM,gBAAgB,GAAG;AACvB,YAAA,kBAAkB,EAAE,IAAI;YACxB,2BAA2B,EAAE,IAAI,CAAC,SAAS;YAC3C,4BAA4B,EAAE,IAAI,CAAC,QAAQ;AAC3C,YAAA,yBAAyB,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK;SACxC;QAED,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,KAAK,KAAK,KAAK,IAAI,CAAC,WAAW,KAAK,MAAM,KAAK,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC;AAElH,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gBAAgB,EAAA,EACzB,IAAI,CAAC,KAAK,KACT,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,~~EACnC~~,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,QAAQ,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,4BAA4B,EAAS,EAAA,GAAA,CAAA,CAC7D,CACT,EAED,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EAClC,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,yBAAyB,EAC/B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,KAAK,EAAE;gBACL,eAAe,EAAE,IAAI,CAAC,OAAO;~~aAC9B~~,~~EACD~~,CAAA,EACF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,cAAc,EAAA,CAAG,CACxB,EAEL,WAAW,KACV,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACnC,IAAI,CAAC,KAAK,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iCAAiC,EAAE,~~EAAA~~,IAAI,CAAC,KAAK,CAAO,~~EAC7E~~,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,UAAU,IAAI,~~CAAA~~,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,~~EAAK~~,KAAK,EAAC,+BAA+B,EAAE,EAAA,IAAI,CAAC,UAAU,CAAO,~~CACjG~~,CACP,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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\n@Component({\n tag: 'xplor-input-text',\n styleUrl: 'xplor-input-text.scss',\n scoped: true,\n})\nexport class XplorInputText {\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\">\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 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 />\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\">{this.error}</div>}\n {!this.error && this.helperText && <div class=\"xplor-input-text__helper-text\">{this.helperText}</div>}\n </div>\n )}\n\n <slot name=\"append\" />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
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}

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

@@ -24,6 +24,10 @@ const XplorInputTitle$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputTitle
          * Whether the input is readonly
          */
         this.readonly = false;
+        /**
+         * Accessible label for the input
+         */
+        this.ariaLabel = 'Title';
         this.handleInput = (event) => {
             const target = event.target;
             this.value = target.value;
@@ -36,14 +40,15 @@ const XplorInputTitle$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputTitle
         };
     }
     render() {
-        return (h(Host, { key: '7c7192c83a6642754940924a7e59a41911ac5988' }, h("input", { key: 'e5ba49fe7a49b22dd740c170652007f7a7d86cad', type: "text", class: "xplor-input-title", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onInput: this.handleInput, onChange: this.handleChange })));
+        return (h(Host, { key: '1e49e53ce1525bdfa81b550739c97b3927a919e6' }, h("input", { key: '74dd032886da4bca30a5f38a15b18903f03c5095', 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", {
         "value": [1025],
         "placeholder": [1],
         "disabled": [4],
-        "readonly": [4]
+        "readonly": [4],
+        "ariaLabel": [1, "aria-label"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/xplor-input-title.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"xplor-input-title.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,s/OAAs/O;;MCOpgPA,iBAAe,iBAAAC,kBAAA,CAAA,MAAA,eAAA,SAAAC,CAAA,CAAA;AAL5B,IAAA,WAAA,GAAA;;;;;AAME;;AAEG;AACsB,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AAE3C;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAW,EAAE;AAEhC;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEjC;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;~~AAYzB~~,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAY,KAAI;AACrC,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;AAC/C,YAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK;YACzB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AAClC,SAAC;AAEO,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,KAAY,KAAI;AACtC,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;AAC/C,YAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK;YACzB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AACnC,SAAC;~~AAkBF~~;~~IAhBC~~,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,mBAAmB,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,~~EACvB~~,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAA,CAC3B,CACG~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["XplorInputTitle","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-input-title/xplor-input-title.scss?tag=xplor-input-title&encapsulation=scoped","src/components/xplor-input-title/xplor-input-title.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.xplor-input-title {\n width: 100%;\n height: 39px;\n font-size: 28px;\n font-family: inherit;\n font-weight: 400;\n border: none;\n border-bottom: 1px solid rgba(0, 0, 0, 0.42);\n outline: none;\n padding: 0 0 4px 0;\n background: transparent;\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-bottom-color: rgba(0, 0, 0, 0.87);\n }\n\n &:focus {\n border-bottom-width: 2px;\n border-bottom-color: #008480;\n padding-bottom: 3px;\n }\n\n &:disabled {\n color: rgba(0, 0, 0, 0.38);\n border-bottom-color: rgba(0, 0, 0, 0.26);\n cursor: not-allowed;\n }\n\n &:read-only {\n color: rgba(0, 0, 0, 0.6);\n }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'xplor-input-title',\n styleUrl: 'xplor-input-title.scss',\n scoped: true,\n})\nexport class XplorInputTitle {\n /*\n Input value\n /\n @Prop({ mutable: true }) value: string = '';\n\n /\n Input placeholder\n /\n @Prop() placeholder: string = '';\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 Input event\n /\n @Event() xplorInput: EventEmitter<string>;\n\n /\n Change event\n */\n @Event() xplorChange: EventEmitter<string>;\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 render() {\n return (\n <Host>\n <input\n type=\"text\"\n class=\"xplor-input-title\"\n value={this.value}\n placeholder={this.placeholder}\n disabled={this.disabled}\n readonly={this.readonly}\n onInput={this.handleInput}\n onChange={this.handleChange}\n />\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"xplor-input-title.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,s/OAAs/O;;MCOpgPA,iBAAe,iBAAAC,kBAAA,CAAA,MAAA,eAAA,SAAAC,CAAA,CAAA;AAL5B,IAAA,WAAA,GAAA;;;;;AAME;;AAEG;AACsB,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AAE3C;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAW,EAAE;AAEhC;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEjC;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEjC;;AAEG;AACK,QAAA,IAAS,CAAA,SAAA,GAAW,OAAO;AAY3B,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAY,KAAI;AACrC,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;AAC/C,YAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK;YACzB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AAClC,SAAC;AAEO,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,KAAY,KAAI;AACtC,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;AAC/C,YAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK;YACzB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AACnC,SAAC;AAmBF;IAjBC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,mBAAmB,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBACX,IAAI,CAAC,SAAS,EAC1B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAA,CAC3B,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorInputTitle","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-input-title/xplor-input-title.scss?tag=xplor-input-title&encapsulation=scoped","src/components/xplor-input-title/xplor-input-title.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.xplor-input-title {\n width: 100%;\n height: 39px;\n font-size: 28px;\n font-family: inherit;\n font-weight: 400;\n border: none;\n border-bottom: 1px solid rgba(0, 0, 0, 0.42);\n outline: none;\n padding: 0 0 4px 0;\n background: transparent;\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-bottom-color: rgba(0, 0, 0, 0.87);\n }\n\n &:focus {\n border-bottom-width: 2px;\n border-bottom-color: #008480;\n padding-bottom: 3px;\n }\n\n &:disabled {\n color: rgba(0, 0, 0, 0.38);\n border-bottom-color: rgba(0, 0, 0, 0.26);\n cursor: not-allowed;\n }\n\n &:read-only {\n color: rgba(0, 0, 0, 0.6);\n }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'xplor-input-title',\n styleUrl: 'xplor-input-title.scss',\n scoped: true,\n})\nexport class XplorInputTitle {\n /*\n Input value\n /\n @Prop({ mutable: true }) value: string = '';\n\n /\n Input placeholder\n /\n @Prop() placeholder: string = '';\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 Accessible label for the input\n /\n @Prop() ariaLabel: string = 'Title';\n\n /\n Input event\n /\n @Event() xplorInput: EventEmitter<string>;\n\n /\n Change event\n */\n @Event() xplorChange: EventEmitter<string>;\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 render() {\n return (\n <Host>\n <input\n type=\"text\"\n class=\"xplor-input-title\"\n value={this.value}\n placeholder={this.placeholder}\n disabled={this.disabled}\n readonly={this.readonly}\n aria-label={this.ariaLabel}\n onInput={this.handleInput}\n onChange={this.handleChange}\n />\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/xplor-links.js CHANGED Viewed

@@ -7,13 +7,16 @@ const XplorLinks$1 = /*@__PURE__*/ proxyCustomElement(class XplorLinks extends H
         super();
         this.__registerHost();
         this.__attachShadow();
+        /** Alt text for the image */
+        this.imageAlt = '';
     }
     render() {
-        return (h(Host, { key: '790a4cfec621e97ea4de475fa53e57a77a3cd12f', class: `theme-${this.brand}` }, h("a", { key: '13cb8ca17ea4717aed386a4a4e2cb3c4402a94f0', class: "x-link", href: "https://google.com" }, ' ', "googole this is a link", ' '), h("div", { key: '69005a5165c15a0fb175b8eea7b4d409edede8f6', class: "bg-black p-2 rounded-md flex justify-center" }, h("h1", { key: '7b02c87ac23ea8ab57b4ed50c5196701574c2e61', class: "text-primary font-sans" }, "This is a Stencil component using Tailwind")), h("div", { key: '43656b47443543dc22c2155c34d0fa48dc837a63', class: "bg-white py-24 sm:py-32" }, h("div", { key: '7d6233d14a660cb47b7e1d819c1cc636219efbf2', class: "mx-auto grid max-w-7xl gap-20 px-6 lg:px-8 xl:grid-cols-3" }, h("div", { key: '8b1d3e79dfd215fb70d9a5ffafc337b78bf7f05c', class: "max-w-xl" }, h("h2", { key: 'a124d7943e4c3143850b5ce7411a0c39d17d4646', class: "text-pretty text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl" }, "Meet our leadership"), h("p", { key: '97687d43671e3fb5138892f16d94a88a53ea2da7', 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: 'cbe0df5fe4848e59ab77dcb316283ca072c5601c', 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: 'c386756c84360e832fe8ad9673f137b2622d52d1' }, h("div", { key: 'd5f92709313deb415d9868e18f30d33da7f46f9c', class: "flex items-center gap-x-6" }, h("img", { key: '786e4a048269b46c0e3969578de897551496c562', 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: "" }), h("div", { key: '75d001f9e1670f1f9be6eec0177797c8d9957e2f' }, h("h3", { key: '9f8bf97a2fe329f6c790f40cd8e3a59251a25cc6', class: "text-base/7 font-semibold tracking-tight text-gray-900" }, "Leslie Alexander"), h("p", { key: 'f848b02a1fe071682ca36a4900fb9d19938db71e', class: "text-sm/6 font-semibold text-indigo-600" }, "Co-Founder / CEO")))))))));
+        return (h(Host, { key: 'e26ac5962cb44c6e05a39034e76b6f35d076cb60', class: `theme-${this.brand}` }, h("a", { key: '030c76cf101abf498a2828bffef051f5e01d3a65', class: "x-link", href: "https://google.com" }, ' ', "googole this is a link", ' '), h("div", { key: '13ef22eb8e5ddc49976006b138b7bac0e379d85c', class: "bg-black p-2 rounded-md flex justify-center" }, h("h1", { key: '39e7adc65ee5b26b4be9c111eabdb295fc964065', class: "text-primary font-sans" }, "This is a Stencil component using Tailwind")), h("div", { key: 'dae9ed47cdaa4afb6a6b70ca82c9b3c280f39215', class: "bg-white py-24 sm:py-32" }, h("div", { key: '32f746f7ec8c3337fff37e445dfb7e31a42e68c9', class: "mx-auto grid max-w-7xl gap-20 px-6 lg:px-8 xl:grid-cols-3" }, h("div", { key: '309dfd3930301f77cf83eea80579063d1c4aee85', class: "max-w-xl" }, h("h2", { key: '6fac68cca56d79303a1d92b86d059f7f91296b3e', class: "text-pretty text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl" }, "Meet our leadership"), h("p", { key: 'd759f98a1c30f4636592a5aa5ffa8f06cfa93dbe', 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: '978c9a043988f63c53b2ec9f7e0e73367dd72f41', 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: '6ae95678b9ef5ed2ad60c62661aa4a6c966f2740' }, h("div", { key: '0a98faa21b7216205d1ad44d977bcade55ce3162', class: "flex items-center gap-x-6" }, h("img", { key: '58c7a75c098911ca434d5de959ca358a80cb5598', 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: '314a9de00a4ac46b67a12cc57ca8392ccea7cfd8' }, h("h3", { key: 'd87b6c4fcdcf68e7bd9b9b29428cfe10de9e03fd', class: "text-base/7 font-semibold tracking-tight text-gray-900" }, "Leslie Alexander"), h("p", { key: '254489d8c64e765276fbfb72cd88221a0e2575ad', class: "text-sm/6 font-semibold text-indigo-600" }, "Co-Founder / CEO")))))))));
     }
     static get style() { return xplorLinksCss; }
 }, [1, "xplor-links", {
-        "brand": [1]
+        "brand": [1],
+        "imageAlt": [1, "image-alt"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/xplor-links.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"xplor-links.js","mappings":";;AAAA,MAAM,aAAa,GAAG,gHAAgH;;MCMzHA,YAAU,iBAAAC,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA~~;;;;;;IAErB~~,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,SAAS,IAAI,CAAC,KAAK,CAAA,CAAE,EAAA,EAChC,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,oBAAoB,EAAA,EACxC,GAAG,4BACmB,GAAG,CACxB,EACJ,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,6CAA6C,EAAA,EACtD,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAC,wBAAwB,EAAA,EAAA,4CAAA,CAAgD,CAC9E,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EAClC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2DAA2D,EAAA,EACpE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,UAAU,EAAA,EACnB,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,6EAA6E,EAElF,EAAA,qBAAA,CAAA,EACL,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,8BAA8B,EAAA,EAAA,6IAAA,CAGnC,CACA,EACN,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,gEAAgE,EAAA,EACpF,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpC,~~CACE~~,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,~~EAAA~~,KAAK,EAAC,sBAAsB,EAC5B,GAAG,EAAC,2JAA2J,EAC/J,GAAG,~~EAAC,~~EAAE,~~EACN~~,CAAA,EACF,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wDAAwD,EAAsB,EAAA,kBAAA,CAAA,EACxF,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,yCAAyC,EAAA,EAAA,kBAAA,CAAqB,CACnE,CACF,CACH,CACF,CACD,CACF,CACD~~;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["XplorLinks","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-links/xplor-links.css?tag=xplor-links&encapsulation=shadow","src/components/xplor-links/xplor-links.tsx"],"sourcesContent":[":host {\n display: block;\n}\n.x-link {\n display: block;\n padding: 0.5rem 0;\n text-decoration: none;\n color: var(--xplor-link-color);\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n@Component({\n tag: 'xplor-links',\n styleUrl: 'xplor-links.css',\n shadow: true,\n})\nexport class XplorLinks {\n @Prop() brand: string;\n render() {\n return (\n <Host class={`theme-${this.brand}`}>\n <a class=\"x-link\" href=\"https://google.com\">\n {' '}\n googole this is a link{' '}\n </a>\n <div class=\"bg-black p-2 rounded-md flex justify-center\">\n <h1 class=\"text-primary font-sans\">This is a Stencil component using Tailwind</h1>\n </div>\n <div class=\"bg-white py-24 sm:py-32\">\n <div class=\"mx-auto grid max-w-7xl gap-20 px-6 lg:px-8 xl:grid-cols-3\">\n <div class=\"max-w-xl\">\n <h2 class=\"text-pretty text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl\">\n Meet our leadership\n </h2>\n <p class=\"mt-6 text-lg/8 text-gray-600\">\n We’re a dynamic group of individuals who are passionate about what we do and dedicated to delivering the\n best results for our clients.\n </p>\n </div>\n <ul role=\"list\" class=\"grid gap-x-8 gap-y-12 sm:grid-cols-2 sm:gap-y-16 xl:col-span-2\">\n <li>\n <div class=\"flex items-center gap-x-6\">\n <img\n class=\"size-16 rounded-full\"\n 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\"\n alt~~=\"~~\"\n />\n <div>\n <h3 class=\"text-base/7 font-semibold tracking-tight text-gray-900\">Leslie Alexander</h3>\n <p class=\"text-sm/6 font-semibold text-indigo-600\">Co-Founder / CEO</p>\n </div>\n </div>\n </li>\n </ul>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"xplor-links.js","mappings":";;AAAA,MAAM,aAAa,GAAG,gHAAgH;;MCMzHA,YAAU,iBAAAC,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AALvB,IAAA,WAAA,GAAA;;;;;AASU,QAAA,IAAQ,CAAA,QAAA,GAAW,EAAE;AA0C9B;IAzCC,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,SAAS,IAAI,CAAC,KAAK,CAAA,CAAE,EAAA,EAChC,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,oBAAoB,EAAA,EACxC,GAAG,4BACmB,GAAG,CACxB,EACJ,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,6CAA6C,EAAA,EACtD,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAC,wBAAwB,EAAA,EAAA,4CAAA,CAAgD,CAC9E,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EAClC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2DAA2D,EAAA,EACpE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,UAAU,EAAA,EACnB,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,6EAA6E,EAElF,EAAA,qBAAA,CAAA,EACL,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,8BAA8B,EAAA,EAAA,6IAAA,CAGnC,CACA,EACN,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,gEAAgE,EAAA,EACpF,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,sBAAsB,EAC5B,GAAG,EAAC,2JAA2J,EAC/J,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,CAAA,EACF,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wDAAwD,EAAsB,EAAA,kBAAA,CAAA,EACxF,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,yCAAyC,EAAA,EAAA,kBAAA,CAAqB,CACnE,CACF,CACH,CACF,CACD,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorLinks","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-links/xplor-links.css?tag=xplor-links&encapsulation=shadow","src/components/xplor-links/xplor-links.tsx"],"sourcesContent":[":host {\n display: block;\n}\n.x-link {\n display: block;\n padding: 0.5rem 0;\n text-decoration: none;\n color: var(--xplor-link-color);\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n@Component({\n tag: 'xplor-links',\n styleUrl: 'xplor-links.css',\n shadow: true,\n})\nexport class XplorLinks {\n @Prop() brand: string;\n\n /** Alt text for the image */\n @Prop() imageAlt: string = '';\n render() {\n return (\n <Host class={`theme-${this.brand}`}>\n <a class=\"x-link\" href=\"https://google.com\">\n {' '}\n googole this is a link{' '}\n </a>\n <div class=\"bg-black p-2 rounded-md flex justify-center\">\n <h1 class=\"text-primary font-sans\">This is a Stencil component using Tailwind</h1>\n </div>\n <div class=\"bg-white py-24 sm:py-32\">\n <div class=\"mx-auto grid max-w-7xl gap-20 px-6 lg:px-8 xl:grid-cols-3\">\n <div class=\"max-w-xl\">\n <h2 class=\"text-pretty text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl\">\n Meet our leadership\n </h2>\n <p class=\"mt-6 text-lg/8 text-gray-600\">\n We’re a dynamic group of individuals who are passionate about what we do and dedicated to delivering the\n best results for our clients.\n </p>\n </div>\n <ul role=\"list\" class=\"grid gap-x-8 gap-y-12 sm:grid-cols-2 sm:gap-y-16 xl:col-span-2\">\n <li>\n <div class=\"flex items-center gap-x-6\">\n <img\n class=\"size-16 rounded-full\"\n 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\"\n alt={this.imageAlt}\n />\n <div>\n <h3 class=\"text-base/7 font-semibold tracking-tight text-gray-900\">Leslie Alexander</h3>\n <p class=\"text-sm/6 font-semibold text-indigo-600\">Co-Founder / CEO</p>\n </div>\n </div>\n </li>\n </ul>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
-import { d as defineCustomElement$2 } from './p-DKh6y3GY.js';
+import { d as defineCustomElement$2 } from './p-04oMLTZR.js';
 const XplorModalPersistent$1 = /*@__PURE__*/ proxyCustomElement(class XplorModalPersistent extends H {
     constructor() {
@@ -28,7 +28,7 @@ const XplorModalPersistent$1 = /*@__PURE__*/ proxyCustomElement(class XplorModal
         this.loading = false;
     }
     render() {
-        return (h(Host, { key: '607487d12b9744b7915c168a702b9f53c1edd18a' }, h("xplor-modal", { key: '72213498ca31332338afda4b1a8520fd34fbec19', open: this.open, width: this.width, maxWidth: this.maxWidth, maxHeight: this.maxHeight, loading: this.loading, persistent: true, onXplorClose: () => this.xplorClose.emit() }, h("slot", { key: '4841432590db3562ca033f57325aca10b947c60f', name: "title", slot: "title" }), h("slot", { key: '78263228bc06c994c6107b0fea103b25a5171f7f', name: "subtitle", slot: "subtitle" }), h("slot", { key: 'b51d5bf90aa0b9c3889a897adda36eaaf1a72659', name: "body", slot: "body" }), h("slot", { key: '4c4c403072d0a0f10da0eeeefbe73e05d4a9f33d', name: "actions", slot: "actions" }))));
+        return (h(Host, { key: '60cd29fcdff8efad4d0b24f4532acb86e4f6220b' }, h("xplor-modal", { key: '6252525de022fcc1098e2e179c4aedb81ebb15d3', open: this.open, width: this.width, maxWidth: this.maxWidth, maxHeight: this.maxHeight, loading: this.loading, persistent: true, onXplorClose: () => this.xplorClose.emit() }, h("slot", { key: '484eeecc00f647e920878512f5e6bd61b41ba825', name: "title", slot: "title" }), h("slot", { key: 'e3fb52e2f19fdd4346fc4d014a0391dcc3e7c156', name: "subtitle", slot: "subtitle" }), h("slot", { key: 'aa8a47b1afa24229269c08783fe0b69c5a258adc', name: "body", slot: "body" }), h("slot", { key: '8d1711d5e3223922596a26ce4eb9d30288c259ed', name: "actions", slot: "actions" }))));
     }
 }, [4, "xplor-modal-persistent", {
         "open": [4],

package/dist/components/xplor-modal.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { X as XplorModal$1, d as defineCustomElement$1 } from './p-DKh6y3GY.js';
+import { X as XplorModal$1, d as defineCustomElement$1 } from './p-04oMLTZR.js';
 const XplorModal = XplorModal$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -17,8 +17,45 @@ const XplorNavTabs$1 = /*@__PURE__*/ proxyCustomElement(class XplorNavTabs exten
             this.xplorChange.emit(item.value);
         };
     }
+    handleKeyDown(event) {
+        const enabledItems = this.items.filter(item => !item.disabled);
+        if (enabledItems.length === 0)
+            return;
+        const currentIndex = enabledItems.findIndex(item => item.value === this.value);
+        let newIndex = currentIndex;
+        switch (event.key) {
+            case 'ArrowRight':
+                event.preventDefault();
+                newIndex = currentIndex < enabledItems.length - 1 ? currentIndex + 1 : 0;
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                newIndex = currentIndex > 0 ? currentIndex - 1 : enabledItems.length - 1;
+                break;
+            case 'Home':
+                event.preventDefault();
+                newIndex = 0;
+                break;
+            case 'End':
+                event.preventDefault();
+                newIndex = enabledItems.length - 1;
+                break;
+            default:
+                return;
+        }
+        const newItem = enabledItems[newIndex];
+        this.value = newItem.value;
+        this.xplorChange.emit(newItem.value);
+        // Focus the newly active tab button
+        const buttons = this.el.querySelectorAll('button[role="tab"]');
+        const allItemIndex = this.items.indexOf(newItem);
+        const targetButton = buttons[allItemIndex];
+        if (targetButton) {
+            targetButton.focus();
+        }
+    }
     render() {
-        return (h(Host, { key: '30bab02780d071338f386b6a72559bbd65212118' }, h("div", { key: '2684dbbd4a812bbb88d55baeb42b281c2f3bf753', class: {
+        return (h(Host, { key: '1a94314129f0f6c94df3196ef7e2a493b6626fd7' }, h("div", { key: '71b0ee2d2baab1fed571ed88f04fc49754b2952e', class: {
                 'nav-tabs': true,
                 'nav-tabs--grow': this.grow,
                 [`nav-tabs--${this.color}`]: true,
@@ -26,15 +63,16 @@ 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', type: "button" }, item.label))), h("slot", { key: 'dae806f8f498015b5837c799cb024fc3d688cc8d' }))));
+            }, 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' }))));
     }
+    get el() { return this; }
     static get style() { return xplorNavTabsCss; }
 }, [6, "xplor-nav-tabs", {
         "value": [1025],
         "items": [16],
         "color": [1],
         "grow": [4]
-    }]);
+    }, [[0, "keydown", "handleKeyDown"]]]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/dist/components/xplor-nav-tabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"xplor-nav-tabs.js","mappings":";;AAAA,MAAM,eAAe,GAAG,shQAAshQ;;MCajiQA,cAAY,iBAAAC,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AALzB,IAAA,WAAA,GAAA;;;;~~AAOY~~,QAAA,IAAK,CAAA,KAAA,GAAiB,EAAE;AACxB,QAAA,IAAK,CAAA,KAAA,GAA4B,SAAS;AAC1C,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;AAIrB,QAAA,IAAA,CAAA,cAAc,GAAG,CAAC,IAAgB,KAAI;YAC1C,IAAI,IAAI,CAAC,QAAQ;gBAAE;AAEnB,YAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK;YACvB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AACrC,SAAC;~~AAmCJ~~;~~IAjCG~~,MAAM,GAAA;QACF,QACI,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,KAAK,EAAE;AACH,gBAAA,UAAU,EAAE,IAAI;gBAChB,gBAAgB,EAAE,IAAI,CAAC,IAAI;AAC3B,gBAAA,CAAC,aAAa,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG,IAAI;AACpC,aAAA,EACD,IAAI,EAAC,SAAS,EAAA,EAEb,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,MACjB,CAAA,CAAA,QAAA,EAAA,EACI,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,KAAK,EAAE;AACH,gBAAA,eAAe,EAAE,IAAI;AACrB,gBAAA,uBAAuB,EAAE,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK;gBAClD,yBAAyB,EAAE,IAAI,CAAC,QAAQ;AAC3C,aAAA,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EACxC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,KAAK,~~EACK~~,~~eAAA,EAAA,~~IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,GAAG,MAAM,GAAG,OAAO,EAC3D,IAAI,EAAC,QAAQ,EAAA,EAEZ,IAAI,CAAC,KAAK,CACN,CACZ,CAAC,EACF,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACN,CACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["XplorNavTabs","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-nav-tabs/xplor-nav-tabs.scss?tag=xplor-nav-tabs&encapsulation=scoped","src/components/xplor-nav-tabs/xplor-nav-tabs.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.nav-tabs {\n display: flex;\n border-bottom: 2px solid #e0e0e0;\n gap: 0;\n\n &--grow {\n .nav-tabs__tab {\n flex: 1;\n }\n }\n}\n\n.nav-tabs__tab {\n background: none;\n border: none;\n padding: 0.75rem 1.5rem;\n font-family: inherit;\n font-size: 0.875rem;\n font-weight: 500;\n cursor: pointer;\n color: #757575;\n position: relative;\n transition: color 0.2s;\n white-space: nowrap;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n\n &::after {\n content: '';\n position: absolute;\n bottom: -2px;\n left: 0;\n right: 0;\n height: 2px;\n background-color: transparent;\n transition: background-color 0.2s;\n }\n\n &:hover:not(&--disabled) {\n color: #424242;\n }\n\n &:focus {\n outline: 2px solid #1976d2;\n outline-offset: -2px;\n }\n\n &--active {\n color: #1976d2;\n\n &::after {\n background-color: #1976d2;\n }\n\n .nav-tabs--secondary & {\n color: #9c27b0;\n\n &::after {\n background-color: #9c27b0;\n }\n }\n }\n\n &--disabled {\n opacity: 0.4;\n cursor: not-allowed;\n }\n}\n\n.nav-tabs--secondary {\n .nav-tabs__tab {\n &:hover:not(.nav-tabs__tab--disabled) {\n color: #7b1fa2;\n }\n }\n}","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\nexport interface NavTabItem {\n label: string;\n value: string;\n disabled?: boolean;\n}\n\n@Component({\n tag: 'xplor-nav-tabs',\n styleUrl: 'xplor-nav-tabs.scss',\n scoped: true,\n})\nexport class XplorNavTabs {\n @Prop({ mutable: true }) value: string;\n @Prop() items: NavTabItem[] = [];\n @Prop() color: 'primary' \| 'secondary' = 'primary';\n @Prop() grow: boolean = false;\n\n @Event() xplorChange: EventEmitter<string>;\n\n private handleTabClick = (item: NavTabItem) => {\n if (item.disabled) return;\n\n this.value = item.value;\n this.xplorChange.emit(item.value);\n };\n\n render() {\n return (\n <Host>\n <div\n class={{\n 'nav-tabs': true,\n 'nav-tabs--grow': this.grow,\n [`nav-tabs--${this.color}`]: true,\n }}\n role=\"tablist\"\n >\n {this.items.map((item) => (\n <button\n key={item.value}\n class={{\n 'nav-tabs__tab': true,\n 'nav-tabs__tab--active': this.value === item.value,\n 'nav-tabs__tab--disabled': item.disabled,\n }}\n onClick={() => this.handleTabClick(item)}\n disabled={item.disabled}\n role=\"tab\"\n aria-selected={this.value === item.value ? 'true' : 'false'}\n type=\"button\"\n >\n {item.label}\n </button>\n ))}\n <slot />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"xplor-nav-tabs.js","mappings":"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","names":["XplorNavTabs","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-nav-tabs/xplor-nav-tabs.scss?tag=xplor-nav-tabs&encapsulation=scoped","src/components/xplor-nav-tabs/xplor-nav-tabs.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.nav-tabs {\n display: flex;\n border-bottom: 2px solid #e0e0e0;\n gap: 0;\n\n &--grow {\n .nav-tabs__tab {\n flex: 1;\n }\n }\n}\n\n.nav-tabs__tab {\n background: none;\n border: none;\n padding: 0.75rem 1.5rem;\n font-family: inherit;\n font-size: 0.875rem;\n font-weight: 500;\n cursor: pointer;\n color: #757575;\n position: relative;\n transition: color 0.2s;\n white-space: nowrap;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n\n &::after {\n content: '';\n position: absolute;\n bottom: -2px;\n left: 0;\n right: 0;\n height: 2px;\n background-color: transparent;\n transition: background-color 0.2s;\n }\n\n &:hover:not(&--disabled) {\n color: #424242;\n }\n\n &:focus {\n outline: 2px solid #1976d2;\n outline-offset: -2px;\n }\n\n &--active {\n color: #1976d2;\n\n &::after {\n background-color: #1976d2;\n }\n\n .nav-tabs--secondary & {\n color: #9c27b0;\n\n &::after {\n background-color: #9c27b0;\n }\n }\n }\n\n &--disabled {\n opacity: 0.4;\n cursor: not-allowed;\n }\n}\n\n.nav-tabs--secondary {\n .nav-tabs__tab {\n &:hover:not(.nav-tabs__tab--disabled) {\n color: #7b1fa2;\n }\n }\n}","import { Component, Host, h, Prop, Event, EventEmitter, Element, Listen } from '@stencil/core';\n\nexport interface NavTabItem {\n label: string;\n value: string;\n disabled?: boolean;\n}\n\n@Component({\n tag: 'xplor-nav-tabs',\n styleUrl: 'xplor-nav-tabs.scss',\n scoped: true,\n})\nexport class XplorNavTabs {\n @Element() el: HTMLElement;\n\n @Prop({ mutable: true }) value: string;\n @Prop() items: NavTabItem[] = [];\n @Prop() color: 'primary' \| 'secondary' = 'primary';\n @Prop() grow: boolean = false;\n\n @Event() xplorChange: EventEmitter<string>;\n\n private handleTabClick = (item: NavTabItem) => {\n if (item.disabled) return;\n\n this.value = item.value;\n this.xplorChange.emit(item.value);\n };\n\n @Listen('keydown')\n handleKeyDown(event: KeyboardEvent) {\n const enabledItems = this.items.filter(item => !item.disabled);\n if (enabledItems.length === 0) return;\n\n const currentIndex = enabledItems.findIndex(item => item.value === this.value);\n let newIndex = currentIndex;\n\n switch (event.key) {\n case 'ArrowRight':\n event.preventDefault();\n newIndex = currentIndex < enabledItems.length - 1 ? currentIndex + 1 : 0;\n break;\n case 'ArrowLeft':\n event.preventDefault();\n newIndex = currentIndex > 0 ? currentIndex - 1 : enabledItems.length - 1;\n break;\n case 'Home':\n event.preventDefault();\n newIndex = 0;\n break;\n case 'End':\n event.preventDefault();\n newIndex = enabledItems.length - 1;\n break;\n default:\n return;\n }\n\n const newItem = enabledItems[newIndex];\n this.value = newItem.value;\n this.xplorChange.emit(newItem.value);\n\n // Focus the newly active tab button\n const buttons = this.el.querySelectorAll('button[role=\"tab\"]');\n const allItemIndex = this.items.indexOf(newItem);\n const targetButton = buttons[allItemIndex] as HTMLButtonElement;\n if (targetButton) {\n targetButton.focus();\n }\n }\n\n render() {\n return (\n <Host>\n <div\n class={{\n 'nav-tabs': true,\n 'nav-tabs--grow': this.grow,\n [`nav-tabs--${this.color}`]: true,\n }}\n role=\"tablist\"\n >\n {this.items.map((item) => (\n <button\n key={item.value}\n class={{\n 'nav-tabs__tab': true,\n 'nav-tabs__tab--active': this.value === item.value,\n 'nav-tabs__tab--disabled': item.disabled,\n }}\n onClick={() => this.handleTabClick(item)}\n disabled={item.disabled}\n role=\"tab\"\n aria-selected={this.value === item.value ? 'true' : 'false'}\n tabIndex={this.value === item.value ? 0 : -1}\n type=\"button\"\n >\n {item.label}\n </button>\n ))}\n <slot />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/xplor-radio-btn.d.ts ADDED Viewed

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

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

@@ -0,0 +1,132 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
+const xplorRadioBtnCss = "/* on mobile browsers, I set a width of 100% */\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  /* html[data-theme='office'] {\n    --color-primary: rgb(219, 59, 3);\n    --color-secondary: rgb(0, 119, 107);\n    --color-buttons: #89da59;\n    --color-typography: #ff320e;\n  }\n\n  html {\n    --color-primary: #db3b03;\n    --color-primary-50: #db3b03;\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgb(0, 119, 107);\n    --color-tertiary: rgb(128, 104, 186);\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    /* Fallback */\n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    /* Fallback */\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 {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n/* on large screens, I use a different layout, so 600px are sufficient */\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce {\n    width: 600px !important;\n  }\n}\nh1 {\n  color: var(--color-primary);\n  /* Header/H1 */\n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; /* 116.667% */\n}\n\nh2 {\n  color: var(--grey-1100252525, #252525);\n  /* Header/H2 Bold */\n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; /* 118.75% */\n  letter-spacing: 0.25px;\n}\n\nh3 {\n  color: var(--grey-1100252525, #252525);\n  /* Header/H3 */\n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; /* 133.333% */\n}\n\n.overline {\n  color: var(--grey-1100252525, #252525);\n  /* Overline/Regular */\n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; /* 133.333% */\n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol,\nul {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol li,\nul li {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list,\nul.mdc-list {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list li.mdc-list-item,\nul.mdc-list li.mdc-list-item {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label {\n  color: var(--Orange-900-Primary, #db3b03);\n  /* Caption 1/Regular */\n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; /* 133.333% */\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 {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader {\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 {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded .mdc-text-field--outlined .mdc-notched-outline__notch {\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 .mdc-notched-outline__notch {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn {\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:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n:host {\n  display: inline-block;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n}\n\n.radio-wrapper {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n}\n.radio-wrapper--disabled {\n  cursor: not-allowed;\n}\n\n.radio {\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  border: 2px solid #9ca3af;\n  background: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  outline: none;\n  position: relative;\n  flex-shrink: 0;\n}\n.radio.hover {\n  border-color: #059669;\n  background: #d1fae5;\n}\n.radio.focus {\n  border-color: #059669;\n  background: #a7f3d0;\n  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.2);\n}\n.radio.pressed {\n  border-color: #059669;\n  background: #6ee7b7;\n}\n.radio.checked {\n  border-color: #059669;\n}\n.radio.checked.hover {\n  background: #d1fae5;\n}\n.radio.checked.hover .radio-inner {\n  background: #059669;\n}\n.radio.checked.focus {\n  background: #a7f3d0;\n  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.2);\n}\n.radio.checked.focus .radio-inner {\n  background: #059669;\n}\n.radio.checked.pressed {\n  background: #6ee7b7;\n}\n.radio.checked.pressed .radio-inner {\n  background: #059669;\n}\n.radio.error {\n  border-color: #ef4444;\n}\n.radio.error.hover {\n  background: #fee2e2;\n  border-color: #ef4444;\n}\n.radio.error.focus {\n  background: #fecaca;\n  border-color: #ef4444;\n  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);\n}\n.radio.error.pressed {\n  background: #fca5a5;\n  border-color: #ef4444;\n}\n.radio.error.checked .radio-inner {\n  background: #ef4444;\n}\n.radio.disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n  border-color: #d1d5db;\n  background: white;\n}\n.radio.disabled.checked {\n  border-color: #9ca3af;\n}\n.radio.disabled.checked .radio-inner {\n  background: #9ca3af;\n}\n\n.radio-inner {\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background: #059669;\n  transform: scale(0);\n  transition: transform 0.15s ease;\n}\n.radio-inner--visible {\n  transform: scale(1);\n}\n\n.label {\n  font-size: 14px;\n  color: #374151;\n  user-select: none;\n}\n\n.radio-wrapper--disabled .label {\n  opacity: 0.4;\n}";
+const XplorRadioBtn$1 = /*@__PURE__*/ proxyCustomElement(class XplorRadioBtn extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.radioChange = createEvent(this, "radioChange");
+        /** The label text displayed next to the radio button */
+        this.label = '';
+        /** The value associated with this radio button */
+        this.value = '';
+        /** The name attribute to group radio buttons together */
+        this.name = '';
+        /** Whether this radio button is initially selected */
+        this.initialChecked = false;
+        /** Whether this radio button is disabled */
+        this.disabled = false;
+        /** Whether this radio button is in an error state */
+        this.error = false;
+        this.checked = false;
+        this.isHovered = false;
+        this.isFocused = false;
+        this.isPressed = false;
+        this.handleClick = () => {
+            if (this.disabled || this.checked)
+                return;
+            // Deselect all siblings in the same name group
+            this.getSiblingRadios().forEach(radio => radio.deselect());
+            this.checked = true;
+            this.radioChange.emit({ value: this.value, checked: this.checked });
+        };
+        this.handleKeyDown = (e) => {
+            if (this.disabled)
+                return;
+            if (e.key === ' ' || e.key === 'Enter') {
+                e.preventDefault();
+                this.isPressed = true;
+                this.handleClick();
+            }
+        };
+        this.handleKeyUp = (e) => {
+            if (e.key === ' ' || e.key === 'Enter') {
+                this.isPressed = false;
+            }
+        };
+        this.getRadioClass = () => {
+            const classes = ['radio'];
+            if (this.checked)
+                classes.push('checked');
+            if (this.disabled)
+                classes.push('disabled');
+            if (this.error)
+                classes.push('error');
+            if (this.isHovered && !this.disabled)
+                classes.push('hover');
+            if (this.isFocused && !this.disabled)
+                classes.push('focus');
+            if (this.isPressed && !this.disabled)
+                classes.push('pressed');
+            return classes.join(' ');
+        };
+    }
+    watchCheckedProp(newValue) {
+        this.checked = newValue;
+    }
+    componentWillLoad() {
+        this.checked = this.initialChecked;
+    }
+    /** Programmatically deselect this radio button */
+    async deselect() {
+        this.checked = false;
+    }
+    getSiblingRadios() {
+        if (!this.name)
+            return [];
+        const parent = this.el.parentElement;
+        if (!parent)
+            return [];
+        const all = Array.from(parent.querySelectorAll(`xplor-radio-btn[name="${this.name}"]`));
+        return all.filter(radio => radio !== this.el);
+    }
+    render() {
+        return (h("label", { key: 'dee9c14f54e292d18b3267ca5e2000aca36b0456', class: {
+                'radio-wrapper': true,
+                'radio-wrapper--disabled': this.disabled,
+            } }, h("div", { key: '30bd9ba24abb9b37e6baa55d6ba767a2058cd1d0', 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: 'd09a47486e2041f12cbdeadd29fd537cab41db3b', class: { 'radio-inner': true, 'radio-inner--visible': this.checked } })), this.label && (h("span", { key: 'd8b820cd1b843f33a99a64c236f3f53a1c68be70', class: "label" }, this.label))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "initialChecked": ["watchCheckedProp"]
+    }; }
+    static get style() { return xplorRadioBtnCss; }
+}, [1, "xplor-radio-btn", {
+        "label": [1],
+        "value": [1],
+        "name": [1],
+        "initialChecked": [4, "initial-checked"],
+        "disabled": [4],
+        "error": [4],
+        "checked": [32],
+        "isHovered": [32],
+        "isFocused": [32],
+        "isPressed": [32],
+        "deselect": [64]
+    }, undefined, {
+        "initialChecked": ["watchCheckedProp"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-radio-btn"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-radio-btn":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorRadioBtn$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+const XplorRadioBtn = XplorRadioBtn$1;
+const defineCustomElement = defineCustomElement$1;
+export { XplorRadioBtn, defineCustomElement };
+//# sourceMappingURL=xplor-radio-btn.js.map
+//# sourceMappingURL=xplor-radio-btn.js.map

package/dist/components/xplor-radio-btn.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"xplor-radio-btn.js","mappings":"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","names":["XplorRadioBtn","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-radio-btn/xplor-radio-btn.scss?tag=xplor-radio-btn&encapsulation=shadow","src/components/xplor-radio-btn/xplor-radio-btn.tsx"],"sourcesContent":["$color-gray-300: #d1d5db;\n$color-gray-400: #9ca3af;\n$color-gray-600: #6b7280;\n$color-gray-700: #374151;\n$color-green-100: #d1fae5;\n$color-green-200: #a7f3d0;\n$color-green-300: #6ee7b7;\n$color-green-600: #059669;\n$color-red-100: #fee2e2;\n$color-red-200: #fecaca;\n$color-red-300: #fca5a5;\n$color-red-500: #ef4444;\n$color-white: white;\n\n$radio-size: 20px;\n$radio-inner-size: 10px;\n$border-width: 2px;\n$transition-speed: 0.15s;\n$focus-ring-opacity: 0.2;\n$disabled-opacity: 0.4;\n\n:host {\n display: inline-block;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.radio-wrapper {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n\n &--disabled {\n cursor: not-allowed;\n }\n}\n\n.radio {\n width: $radio-size;\n height: $radio-size;\n border-radius: 50%;\n border: $border-width solid $color-gray-400;\n background: $color-white;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all $transition-speed ease;\n outline: none;\n position: relative;\n flex-shrink: 0;\n\n // Hover\n &.hover {\n border-color: $color-green-600;\n background: $color-green-100;\n }\n\n // Focus\n &.focus {\n border-color: $color-green-600;\n background: $color-green-200;\n box-shadow: 0 0 0 3px rgba($color-green-600, $focus-ring-opacity);\n }\n\n // Pressed\n &.pressed {\n border-color: $color-green-600;\n background: $color-green-300;\n }\n\n // Checked\n &.checked {\n border-color: $color-green-600;\n\n &.hover {\n background: $color-green-100;\n\n .radio-inner {\n background: $color-green-600;\n }\n }\n\n &.focus {\n background: $color-green-200;\n box-shadow: 0 0 0 3px rgba($color-green-600, $focus-ring-opacity);\n\n .radio-inner {\n background: $color-green-600;\n }\n }\n\n &.pressed {\n background: $color-green-300;\n\n .radio-inner {\n background: $color-green-600;\n }\n }\n }\n\n // Error\n &.error {\n border-color: $color-red-500;\n\n &.hover {\n background: $color-red-100;\n border-color: $color-red-500;\n }\n\n &.focus {\n background: $color-red-200;\n border-color: $color-red-500;\n box-shadow: 0 0 0 3px rgba($color-red-500, $focus-ring-opacity);\n }\n\n &.pressed {\n background: $color-red-300;\n border-color: $color-red-500;\n }\n\n &.checked .radio-inner {\n background: $color-red-500;\n }\n }\n\n // Disabled\n &.disabled {\n opacity: $disabled-opacity;\n cursor: not-allowed;\n border-color: $color-gray-300;\n background: $color-white;\n\n &.checked {\n border-color: $color-gray-400;\n\n .radio-inner {\n background: $color-gray-400;\n }\n }\n }\n}\n\n.radio-inner {\n width: $radio-inner-size;\n height: $radio-inner-size;\n border-radius: 50%;\n background: $color-green-600;\n transform: scale(0);\n transition: transform $transition-speed ease;\n\n &--visible {\n transform: scale(1);\n }\n}\n\n.label {\n font-size: 14px;\n color: $color-gray-700;\n user-select: none;\n}\n\n.radio-wrapper--disabled .label {\n opacity: $disabled-opacity;\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Watch, Element, Method } from '@stencil/core';\n\n@Component({\n tag: 'xplor-radio-btn',\n styleUrl: 'xplor-radio-btn.scss',\n shadow: true,\n})\nexport class XplorRadioBtn {\n @Element() el: HTMLElement;\n\n /** The label text displayed next to the radio button */\n @Prop() label: string = '';\n\n /** The value associated with this radio button */\n @Prop() value: string = '';\n\n /** The name attribute to group radio buttons together */\n @Prop() name: string = '';\n\n /** Whether this radio button is initially selected */\n @Prop() initialChecked: boolean = false;\n\n /** Whether this radio button is disabled */\n @Prop() disabled: boolean = false;\n\n /** Whether this radio button is in an error state */\n @Prop() error: boolean = false;\n\n @State() checked: boolean = false;\n @State() isHovered: boolean = false;\n @State() isFocused: boolean = false;\n @State() isPressed: boolean = false;\n\n /** Emitted when the radio button selection changes */\n @Event() radioChange: EventEmitter<{ value: string; checked: boolean }>;\n\n @Watch('initialChecked')\n watchCheckedProp(newValue: boolean) {\n this.checked = newValue;\n }\n\n componentWillLoad() {\n this.checked = this.initialChecked;\n }\n\n /** Programmatically deselect this radio button */\n @Method()\n async deselect() {\n this.checked = false;\n }\n\n private getSiblingRadios(): HTMLXplorRadioBtnElement[] {\n if (!this.name) return [];\n const parent = this.el.parentElement;\n if (!parent) return [];\n const all = Array.from(parent.querySelectorAll<HTMLXplorRadioBtnElement>(`xplor-radio-btn[name=\"${this.name}\"]`));\n return all.filter(radio => radio !== this.el);\n }\n\n private handleClick = () => {\n if (this.disabled || this.checked) return;\n\n // Deselect all siblings in the same name group\n this.getSiblingRadios().forEach(radio => radio.deselect());\n\n this.checked = true;\n this.radioChange.emit({ value: this.value, checked: this.checked });\n };\n\n private handleKeyDown = (e: KeyboardEvent) => {\n if (this.disabled) return;\n if (e.key === ' ' || e.key === 'Enter') {\n e.preventDefault();\n this.isPressed = true;\n this.handleClick();\n }\n };\n\n private handleKeyUp = (e: KeyboardEvent) => {\n if (e.key === ' ' || e.key === 'Enter') {\n this.isPressed = false;\n }\n };\n\n private getRadioClass = () => {\n const classes = ['radio'];\n\n if (this.checked) classes.push('checked');\n if (this.disabled) classes.push('disabled');\n if (this.error) classes.push('error');\n if (this.isHovered && !this.disabled) classes.push('hover');\n if (this.isFocused && !this.disabled) classes.push('focus');\n if (this.isPressed && !this.disabled) classes.push('pressed');\n\n return classes.join(' ');\n };\n\n render() {\n return (\n <label\n class={{\n 'radio-wrapper': true,\n 'radio-wrapper--disabled': this.disabled,\n }}\n >\n <div\n class={this.getRadioClass()}\n onClick={this.handleClick}\n onMouseEnter={() => (this.isHovered = true)}\n onMouseLeave={() => (this.isHovered = false)}\n onMouseDown={() => (this.isPressed = true)}\n onMouseUp={() => (this.isPressed = false)}\n onFocus={() => (this.isFocused = true)}\n onBlur={() => (this.isFocused = false)}\n onKeyDown={this.handleKeyDown}\n onKeyUp={this.handleKeyUp}\n tabIndex={this.disabled ? -1 : 0}\n role=\"radio\"\n aria-checked={this.checked.toString()}\n aria-disabled={this.disabled.toString()}\n aria-label={this.label}\n >\n <div class={{ 'radio-inner': true, 'radio-inner--visible': this.checked }} />\n </div>\n {this.label && (\n <span class=\"label\">{this.label}</span>\n )}\n </label>\n );\n }\n}\n"],"version":3}

package/dist/components/xplor-section-card.js CHANGED Viewed

@@ -11,11 +11,11 @@ const XplorSectionCard$1 = /*@__PURE__*/ proxyCustomElement(class XplorSectionCa
         this.padding = '1.5rem';
     }
     render() {
-        return (h(Host, { key: '667ddbeb2048497ae0ec2d23876f50058e9b4870' }, h("div", { key: 'ccbce0700966f088c5a053df2169d466529d4ce3', class: {
+        return (h(Host, { key: '14876af087f131508ff26d4fefbba1792fb1f092' }, h("div", { key: '38bf7ff900f46b701416e2a3483c66728939cf8c', class: {
                 'section-card': true,
                 'section-card--outlined': this.outlined,
                 'section-card--rounded': this.rounded,
-            }, style: { padding: this.padding } }, h("slot", { key: 'edd611a0afe1e5343ddedabf7d1daec8962a037b', name: "title" }), h("slot", { key: '2543fd02c710dd9045a7e5920ddc625712febc71', name: "subtitle" }), h("div", { key: 'bdd87422f48d711b43e6a1bf3f27a08d33819d1e', class: "section-card__body" }, h("slot", { key: '4989480c1010e3bae58cfeba4e0637e5fc1397da', name: "body" })), h("div", { key: '891bd2f17631f7f2732dbb04caefb26503d30e75', class: "section-card__actions" }, h("slot", { key: '8d49640f1c96c75afb915ed4acd1dd574ae4c2b9', name: "actions" })))));
+            }, style: { padding: this.padding } }, h("slot", { key: '2189b986d9b08b1ef6168af7a5fe24da4a599301', name: "title" }), h("slot", { key: 'c3efe60808ac203e0c9a63c7c636dee242856bf0', name: "subtitle" }), h("div", { key: 'cf9d94651682ca4d1da25ccadbbfe2168295a326', class: "section-card__body" }, h("slot", { key: '732633bbbe5ad06f1c10222e81929a33ba06a12c', name: "body" }), h("slot", { key: 'e403abfc1b71759aab693c700b5ed8be1215f30e' })), h("div", { key: '89ffdd8215a88483635d1542a56a6f446abf61c4', class: "section-card__actions" }, h("slot", { key: 'e21b2e8b8cd048c4a0dfd369684186b547cc7611', name: "actions" })))));
     }
     static get style() { return xplorSectionCardCss; }
 }, [6, "xplor-section-card", {