alert90s 1.0.13 → 1.0.14

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 (5) hide show
  1. package/README.md +13 -1
  2. package/dist/alert90s.min.js +1 -1
  3. package/package.json +1 -1
  4. package/src/index.js +88 -17
  5. package/src/styles.css +150 -24
package/README.md CHANGED
@@ -156,7 +156,7 @@ Alert90s.renderThemeToggle("#my-container", {
156
156
 
157
157
  ### 8. Input Types (Checkbox, Toggle, Select, Radio)
158
158
 
159
- Alert90s supports rich form inputs inside modals. The checkbox uses a **SVG Brutalist** design with animated checkmark draw-on and shake effect.
159
+ Alert90s supports rich form inputs inside modals. The **checkbox**, **radio**, and **select dropdown** all use **SVG Brutalist** designs with animated effects (checkmark draw-on, dot pop, animated arrow, slide-in menu).
160
160
 
161
161
  ```javascript
162
162
  // SVG Brutalist Checkbox
@@ -170,6 +170,18 @@ Alert90s.fire({
170
170
  }
171
171
  });
172
172
 
173
+ // SVG Brutalist Radio
174
+ Alert90s.fire({
175
+ title: "DIFFICULTY",
176
+ input: "radio",
177
+ inputOptions: {
178
+ easy: "I'm too young to die.",
179
+ medium: "Hurt me plenty.",
180
+ hard: "Ultra-Violence.",
181
+ },
182
+ inputValue: "hard",
183
+ });
184
+
173
185
  // Toggle Switch
174
186
  Alert90s.fire({
175
187
  title: "DARK MODE",
package/dist/alert90s.min.js CHANGED
@@ -1 +1 @@
1
- !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Alert90s=e()}(this,function(){"use strict";!function(t,e){void 0===e&&(e={});var o=e.insertAt;if("undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===o&&a.firstChild?a.insertBefore(r,a.firstChild):a.appendChild(r),r.styleSheet?r.styleSheet.cssText=t:r.appendChild(document.createTextNode(t))}}('.alert90s-overlay{animation:alert90s-fade-in .2s ease-out forwards;backdrop-filter:blur(4px);background-color:rgba(0,0,0,.6);box-sizing:border-box;display:flex;font-family:inherit;inset:0;padding:1rem;position:fixed;z-index:99999}.alert90s-overlay.alert90s-pos-center{align-items:center;justify-content:center}.alert90s-overlay.alert90s-pos-top{align-items:flex-start;justify-content:center}.alert90s-overlay.alert90s-pos-top-start{align-items:flex-start;justify-content:flex-start}.alert90s-overlay.alert90s-pos-top-end{align-items:flex-start;justify-content:flex-end}.alert90s-overlay.alert90s-pos-bottom{align-items:flex-end;justify-content:center}.alert90s-overlay.alert90s-pos-bottom-start{align-items:flex-end;justify-content:flex-start}.alert90s-overlay.alert90s-pos-bottom-end{align-items:flex-end;justify-content:flex-end}.alert90s-overlay.alert90s-pos-center-start{align-items:center;justify-content:flex-start}.alert90s-overlay.alert90s-pos-center-end{align-items:center;justify-content:flex-end}.alert90s-overlay *{box-sizing:border-box}.alert90s-box{align-items:center;animation:alert90s-pop-in .3s cubic-bezier(.175,.885,.32,1.275) forwards;background-color:#fff;border:4px solid #000;box-shadow:12px 12px 0 0 #000;display:flex;flex-direction:column;max-height:95vh;max-width:28rem;position:relative;text-align:center;width:100%}.alert90s-box[dir=rtl]{text-align:right}.alert90s-box.is-draggable{position:absolute}.alert90s-body{align-items:center;display:flex;flex-direction:column;overflow-y:auto;padding:3rem 2rem 2rem;scrollbar-width:none;width:100%}.alert90s-body::-webkit-scrollbar{display:none}.alert90s-header{align-items:center;background-color:#e2e8f0;border-bottom:4px solid #000;display:flex;height:2rem;justify-content:space-between;left:0;padding:0 .5rem;position:absolute;top:0;width:100%;z-index:10}.alert90s-header.draggable{cursor:grab}.alert90s-header.draggable:active{cursor:grabbing}.alert90s-header-left{display:flex;gap:.25rem}.alert90s-box[dir=rtl] .alert90s-header{flex-direction:row-reverse}.alert90s-header-dot{background-color:#fff;border:2px solid #000;height:.75rem;width:.75rem}.alert90s-header-right{align-items:center;display:flex;gap:.5rem;z-index:11}.alert90s-box[dir=rtl] .alert90s-header-right{flex-direction:row-reverse}.alert90s-header-title{font-size:10px;font-weight:700;letter-spacing:.1em;pointer-events:none;text-transform:uppercase}.alert90s-close-btn{align-items:center;background-color:#ef4444;border:2px solid #000;box-shadow:none;cursor:pointer;display:flex;height:1.25rem;justify-content:center;margin:0;padding:0;transition:transform .1s,background-color .1s;width:1.25rem}.alert90s-close-btn:hover{background-color:#f87171;transform:scale(1.1)}.alert90s-close-btn span{color:#000;font-size:14px;font-weight:700;line-height:1}.alert90s-image-container{align-items:center;background:#fff;border:4px solid #000;box-shadow:4px 4px 0 0 #000;display:flex;justify-content:center;margin-bottom:1rem;overflow:hidden;width:100%}.alert90s-image-container img{display:block;height:auto;max-width:100%}.alert90s-icon{align-items:center;border:4px solid #000;border-radius:9999px;box-shadow:4px 4px 0 0 #000;display:flex;flex-shrink:0;height:4rem;justify-content:center;margin-bottom:1rem;width:4rem}.alert90s-icon img,.alert90s-icon svg{height:2rem;width:2rem}.alert90s-icon-custom{font-size:2.25rem;font-weight:700;line-height:1}.alert90s-icon.warning{background-color:#facc15}.alert90s-icon.danger,.alert90s-icon.error{background-color:#ef4444;color:#fff}.alert90s-icon.info,.alert90s-icon.question{background-color:#60a5fa}.alert90s-icon.success{background-color:#4ade80}.alert90s-title{color:#1a1a1a;font-size:1.5rem;font-weight:900;letter-spacing:.1em;line-height:1.2;margin:0 0 .5rem;text-transform:uppercase}.alert90s-message{color:#475569;font-weight:700}.alert90s-html,.alert90s-message{font-size:.875rem;margin:0 0 1.5rem;max-width:100%}.alert90s-html{color:#1a1a1a;line-height:1.5}.alert90s-box[dir=rtl] .alert90s-html{text-align:right}.alert90s-html a{color:#2563eb;font-weight:700;text-decoration:underline;text-decoration-thickness:2px}.alert90s-html a:hover{background-color:#bfdbfe}.alert90s-html b,.alert90s-html strong{font-weight:900}.alert90s-input-container{margin-bottom:1.5rem;width:100%}.alert90s-input{background-color:#f8fafc;border:4px solid #000;box-shadow:inset 4px 4px 0 0 rgba(0,0,0,.05);font-family:inherit;font-size:1rem;font-weight:700;outline:none;padding:.75rem;transition:background-color .2s;width:100%}.alert90s-input:focus{background-color:#fff;border-color:#2563eb}textarea.alert90s-input{min-height:100px;resize:vertical}select.alert90s-select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#000 0),linear-gradient(135deg,#000 50%,transparent 0);background-position:calc(100% - 20px) calc(1em + 2px),calc(100% - 15px) calc(1em + 2px);background-repeat:no-repeat;background-size:5px 5px,5px 5px;cursor:pointer}.alert90s-radio-group{align-items:flex-start;display:flex;flex-direction:column;gap:.5rem;width:100%}.alert90s-radio-label{align-items:center;cursor:pointer;display:flex;font-size:1rem;font-weight:700;gap:.75rem}.alert90s-radio-label input[type=radio]{appearance:none;background-color:#f8fafc;border:4px solid #000;border-radius:50%;cursor:pointer;height:1.25rem;margin:0;position:relative;width:1.25rem}.alert90s-radio-label input[type=radio]:checked{background-color:#000;box-shadow:inset 0 0 0 4px #fff}.alert90s-checkbox-label{align-items:center;cursor:pointer;display:inline-flex;font-size:1rem;font-weight:700;gap:.75rem;position:relative;user-select:none}.alert90s-checkbox-label input[type=checkbox]{cursor:pointer;height:0;opacity:0;position:absolute;width:0}.alert90s-cb-svg{overflow:visible;transition:transform .1s ease}.alert90s-checkbox-label:hover .alert90s-cb-svg{transform:translate(-2px,-2px)}.alert90s-checkbox-label:active .alert90s-cb-svg{transform:translate(2px,2px)}.cb-box{transition:fill .1s ease}.alert90s-checkbox-label input[type=checkbox]:checked~.alert90s-cb-svg .cb-box{fill:#fff}.cb-check{stroke-dasharray:120;stroke-dashoffset:120;transition:stroke-dashoffset .15s ease-out}.alert90s-checkbox-label input[type=checkbox]:checked~.alert90s-cb-svg .cb-check{stroke-dashoffset:0}.alert90s-checkbox-label input[type=checkbox]:checked~.alert90s-cb-svg{animation:alert90s-cb-shake .3s cubic-bezier(.25,.46,.45,.94) forwards}@keyframes alert90s-cb-shake{0%{transform:scale(1) translate(0)}30%{transform:scale(1.15) translate(-2px,-2px) rotate(-4deg)}50%{transform:scale(.95) translate(2px,2px) rotate(3deg)}75%{transform:scale(1.05) translate(-1px,-1px) rotate(-1deg)}to{transform:scale(1) translate(0) rotate(0deg)}}.alert90s-cb-text{transition:color .2s}.alert90s-checkbox-label input[type=checkbox]:checked~.alert90s-cb-text{animation:alert90s-cb-bump .2s ease-out forwards;color:#ff6b35}@keyframes alert90s-cb-bump{0%{transform:translateX(0)}50%{transform:translateX(4px)}to{transform:translateX(0)}}.alert90s-toggle-label{align-items:center;cursor:pointer;display:flex;font-size:1rem;font-weight:700;gap:.75rem}.alert90s-toggle-label input[type=checkbox]{display:none}.alert90s-toggle-slider{background-color:#f87171;border:4px solid #000;box-shadow:inset 3px 3px 0 0 rgba(0,0,0,.1);height:1.5rem;position:relative;transition:background-color .2s;width:3rem}.alert90s-toggle-slider:before{background-color:#fff;border-right:4px solid #000;content:"";height:100%;left:0;position:absolute;top:0;transition:transform .2s;width:1rem}.alert90s-toggle-label input[type=checkbox]:checked+.alert90s-toggle-slider{background-color:#4ade80}.alert90s-toggle-label input[type=checkbox]:checked+.alert90s-toggle-slider:before{border-left:4px solid #000;transform:translateX(1.5rem)}.alert90s-validation-message{background-color:#fef2f2;border:4px solid #000;border-left:8px solid #ef4444;color:#ef4444;display:none;font-size:.875rem;font-weight:700;margin-bottom:1.5rem;padding:.75rem;text-align:left;width:100%}.alert90s-box[dir=rtl] .alert90s-validation-message{border-left-color:#000;border-left-width:4px;border-right-color:#ef4444;border-right-width:8px;text-align:right}.alert90s-actions{display:flex;flex-direction:column;gap:1rem;justify-content:center;width:100%}@media (min-width:640px){.alert90s-actions{flex-direction:row}}.alert90s-button{align-items:center;background-color:#fff;border:4px solid #000;box-shadow:4px 4px 0 0 #000;color:#000;cursor:pointer;display:flex;font-family:inherit;font-size:.875rem;font-weight:900;gap:.5rem;justify-content:center;letter-spacing:.1em;margin:0;padding:.75rem 1rem;text-transform:uppercase;transition:background-color .1s;width:100%}@media (min-width:640px){.alert90s-button{flex:1;min-width:100px;width:auto}}.alert90s-button:active{box-shadow:0 0 0 0 #000;transform:translate(4px,4px)}.alert90s-button:focus{outline:2px dashed #000;outline-offset:4px}.alert90s-button.cancel{background-color:#f87171}.alert90s-button.cancel:hover{background-color:#fca5a5}.alert90s-button.deny{background-color:#fb923c}.alert90s-button.deny:hover{background-color:#fdba74}.alert90s-button.confirm{background-color:#4ade80}.alert90s-button.confirm:hover{background-color:#86efac}.alert90s-footer{border-top:4px solid #000;color:#475569;font-size:.75rem;font-weight:700;margin-top:1.5rem;padding-top:1rem;width:100%}.alert90s-footer a{color:#2563eb;text-decoration:underline;text-decoration-thickness:2px}.alert90s-footer a:hover{background-color:#bfdbfe}.alert90s-progress-bar{animation:alert90s-progress linear forwards;background-color:#000;bottom:0;height:6px;left:0;position:absolute;width:100%}.alert90s-loader{display:flex;padding:1rem 0}.alert90s-loader,.alert90s-spinner{align-items:center;justify-content:center}.alert90s-spinner{display:inline-flex}.alert90s-spinner.hourglass{animation:alert90s-hourglass 2s ease-in-out infinite;font-size:2.5rem;line-height:1}.alert90s-spinner.ascii{font-family:monospace;font-size:2rem;font-weight:700}.alert90s-spinner.ascii:after{animation:alert90s-ascii .5s steps(4) infinite;content:"|"}.alert90s-spinner.blinking{font-family:monospace;font-size:1.5rem;font-weight:700;letter-spacing:.1em}.alert90s-spinner.blinking .cursor{animation:alert90s-blink 1s step-end infinite}.alert90s-spinner.progress{background-color:#cbd5e1;border:2px solid #000;box-shadow:inset 2px 2px 0 0 #64748b,inset -2px -2px 0 0 #f8fafc;height:24px;overflow:hidden;padding:2px;position:relative;width:200px}.alert90s-spinner.progress:before{animation:alert90s-marquee 1.5s linear infinite;background-color:#1d4ed8;background-image:repeating-linear-gradient(90deg,#1d4ed8,#1d4ed8 10px,transparent 0,transparent 12px);content:"";height:calc(100% - 4px);left:0;position:absolute;top:2px;width:40%}.alert90s-spinner.segmented{display:flex;justify-content:center;width:100%}.alert90s-spinner.segmented svg{height:auto;max-width:100%}.a90s-seg-1{animation:a90s-op1 6s infinite}.a90s-seg-2{animation:a90s-op2 6s infinite}.a90s-seg-3{animation:a90s-op3 6s infinite}.a90s-seg-4{animation:a90s-op4 6s infinite}.a90s-seg-5{animation:a90s-op5 6s infinite}.a90s-seg-6{animation:a90s-op6 6s infinite}.a90s-seg-7{animation:a90s-op7 6s infinite}.a90s-seg-8{animation:a90s-op8 6s infinite}.a90s-seg-9{animation:a90s-op9 6s infinite}.a90s-seg-10{animation:a90s-op10 6s infinite}@keyframes a90s-op1{0%,9%{opacity:0}10%,92%{opacity:1}92.1%,to{opacity:0}}@keyframes a90s-op2{0%,17%{opacity:0}18%,92%{opacity:1}92.1%,to{opacity:0}}@keyframes a90s-op3{0%,25%{opacity:0}26%,92%{opacity:1}92.1%,to{opacity:0}}@keyframes a90s-op4{0%,33%{opacity:0}34%,92%{opacity:1}92.1%,to{opacity:0}}@keyframes a90s-op5{0%,41%{opacity:0}42%,92%{opacity:1}92.1%,to{opacity:0}}@keyframes a90s-op6{0%,49%{opacity:0}50%,92%{opacity:1}92.1%,to{opacity:0}}@keyframes a90s-op7{0%,57%{opacity:0}58%,92%{opacity:1}92.1%,to{opacity:0}}@keyframes a90s-op8{0%,65%{opacity:0}66%,92%{opacity:1}92.1%,to{opacity:0}}@keyframes a90s-op9{0%,73%{opacity:0}74%,92%{opacity:1}92.1%,to{opacity:0}}@keyframes a90s-op10{0%,81%{opacity:0}82%,92%{opacity:1}92.1%,to{opacity:0}}.a90s-fl-1{animation:a90s-fl1 6s infinite}.a90s-fl-2{animation:a90s-fl2 6s infinite}.a90s-fl-3{animation:a90s-fl3 6s infinite}.a90s-fl-4{animation:a90s-fl4 6s infinite}.a90s-fl-5{animation:a90s-fl5 6s infinite}.a90s-fl-6{animation:a90s-fl6 6s infinite}.a90s-fl-7{animation:a90s-fl7 6s infinite}.a90s-fl-8{animation:a90s-fl8 6s infinite}.a90s-fl-9{animation:a90s-fl9 6s infinite}.a90s-fl-10{animation:a90s-fl10 6s infinite}@keyframes a90s-fl1{0%,9%{fill:#ff6b35}10%,13%{fill:#fff}13.1%,to{fill:#ff6b35}}@keyframes a90s-fl2{0%,17%{fill:#ff6b35}18%,21%{fill:#fff}21.1%,to{fill:#ff6b35}}@keyframes a90s-fl3{0%,25%{fill:#ff6b35}26%,29%{fill:#fff}29.1%,to{fill:#ff6b35}}@keyframes a90s-fl4{0%,33%{fill:#ff6b35}34%,37%{fill:#fff}37.1%,to{fill:#ff6b35}}@keyframes a90s-fl5{0%,41%{fill:#ff6b35}42%,45%{fill:#fff}45.1%,to{fill:#ff6b35}}@keyframes a90s-fl6{0%,49%{fill:#ff6b35}50%,53%{fill:#fff}53.1%,to{fill:#ff6b35}}@keyframes a90s-fl7{0%,57%{fill:#ff6b35}58%,61%{fill:#fff}61.1%,to{fill:#ff6b35}}@keyframes a90s-fl8{0%,65%{fill:#ff6b35}66%,69%{fill:#fff}69.1%,to{fill:#ff6b35}}@keyframes a90s-fl9{0%,73%{fill:#ff6b35}74%,77%{fill:#fff}77.1%,to{fill:#ff6b35}}@keyframes a90s-fl10{0%,81%{fill:#ff6b35}82%,85%{fill:#fff}85.1%,to{fill:#ff6b35}}.a90s-txt-0{animation:a90s-t0 6s infinite}.a90s-txt-10{animation:a90s-t10 6s infinite;opacity:0}.a90s-txt-20{animation:a90s-t20 6s infinite;opacity:0}.a90s-txt-30{animation:a90s-t30 6s infinite;opacity:0}.a90s-txt-40{animation:a90s-t40 6s infinite;opacity:0}.a90s-txt-50{animation:a90s-t50 6s infinite;opacity:0}.a90s-txt-60{animation:a90s-t60 6s infinite;opacity:0}.a90s-txt-70{animation:a90s-t70 6s infinite;opacity:0}.a90s-txt-80{animation:a90s-t80 6s infinite;opacity:0}.a90s-txt-90{animation:a90s-t90 6s infinite;opacity:0}.a90s-txt-100{animation:a90s-t100 6s infinite;opacity:0}@keyframes a90s-t0{0%,9.9%{opacity:1}10%,91.9%{opacity:0}92%,to{opacity:1}}@keyframes a90s-t10{0%,9.9%{opacity:0}10%,17.9%{opacity:1}18%,to{opacity:0}}@keyframes a90s-t20{0%,17.9%{opacity:0}18%,25.9%{opacity:1}26%,to{opacity:0}}@keyframes a90s-t30{0%,25.9%{opacity:0}26%,33.9%{opacity:1}34%,to{opacity:0}}@keyframes a90s-t40{0%,33.9%{opacity:0}34%,41.9%{opacity:1}42%,to{opacity:0}}@keyframes a90s-t50{0%,41.9%{opacity:0}42%,49.9%{opacity:1}50%,to{opacity:0}}@keyframes a90s-t60{0%,49.9%{opacity:0}50%,57.9%{opacity:1}58%,to{opacity:0}}@keyframes a90s-t70{0%,57.9%{opacity:0}58%,65.9%{opacity:1}66%,to{opacity:0}}@keyframes a90s-t80{0%,65.9%{opacity:0}66%,73.9%{opacity:1}74%,to{opacity:0}}@keyframes a90s-t90{0%,73.9%{opacity:0}74%,81.9%{opacity:1}82%,to{opacity:0}}@keyframes a90s-t100{0%,81.9%{opacity:0}82%,91.9%{opacity:1}92%,to{opacity:0}}@keyframes alert90s-hourglass{0%{transform:rotate(0)}25%{transform:rotate(180deg)}50%{transform:rotate(180deg)}75%{transform:rotate(1turn)}to{transform:rotate(1turn)}}@keyframes alert90s-ascii{0%{content:"|"}25%{content:"/"}50%{content:"-"}75%{content:"\\\\"}to{content:"|"}}@keyframes alert90s-blink{50%{opacity:0}}@keyframes alert90s-marquee{0%{transform:translateX(-100%)}to{transform:translateX(250px)}}@keyframes alert90s-progress{0%{width:100%}to{width:0}}@keyframes alert90s-fade-in{0%{opacity:0}to{opacity:1}}@keyframes alert90s-pop-in{0%{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes alert90s-fade-out{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.95) translateY(10px)}}@keyframes alert90s-toast-slide-in{0%{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.alert90s-toast-container{display:flex;gap:10px;padding:10px;pointer-events:none;position:fixed;z-index:10000}.alert90s-toast-top-start{flex-direction:column;left:0;top:0}.alert90s-toast-top{flex-direction:column;left:50%;top:0;transform:translateX(-50%)}.alert90s-toast-top-end{flex-direction:column;right:0;top:0}.alert90s-toast-center-start{flex-direction:column;left:0;top:50%;transform:translateY(-50%)}.alert90s-toast-center{flex-direction:column;left:50%;top:50%;transform:translate(-50%,-50%)}.alert90s-toast-center-end{flex-direction:column;right:0;top:50%;transform:translateY(-50%)}.alert90s-toast-bottom-start{bottom:0;flex-direction:column-reverse;left:0}.alert90s-toast-bottom{bottom:0;flex-direction:column-reverse;left:50%;transform:translateX(-50%)}.alert90s-toast-bottom-end{bottom:0;flex-direction:column-reverse;right:0}.alert90s-box.alert90s-toast{align-items:stretch;bottom:auto!important;box-shadow:6px 6px 0 0 #000;flex-direction:row;left:auto!important;margin:0;max-width:100%;min-width:250px;padding:0;pointer-events:auto;position:relative!important;right:auto!important;top:auto!important;transform:none!important;width:auto}.alert90s-toast .alert90s-header{display:none}.alert90s-toast .alert90s-body{align-items:center;flex-direction:row;gap:1rem;padding:1rem 1.5rem}.alert90s-toast .alert90s-icon{height:2.5rem;margin-bottom:0;width:2.5rem}.alert90s-toast .alert90s-icon img,.alert90s-toast .alert90s-icon svg{height:1.25rem;width:1.25rem}.alert90s-content-wrapper{align-items:center;display:flex;flex-direction:column;width:100%}.alert90s-toast .alert90s-content-wrapper{align-items:flex-start;text-align:left}.alert90s-box.alert90s-toast[dir=rtl] .alert90s-content-wrapper{align-items:flex-end;text-align:right}.alert90s-toast .alert90s-title{font-size:1rem;margin-bottom:.25rem}.alert90s-toast .alert90s-html,.alert90s-toast .alert90s-message{font-size:.875rem;margin-bottom:0}.alert90s-toast-close{align-items:center;background-color:#ef4444;border:2px solid #000;box-shadow:none;cursor:pointer;display:flex;height:1.5rem;justify-content:center;margin:0;margin-inline-start:auto;padding:0;transition:transform .1s,background-color .1s;width:1.5rem}.alert90s-toast-close span{color:#000;display:block;font-size:10px;font-weight:700;line-height:1}.alert90s-toast-close:hover{background-color:#f87171;transform:scale(1.1)}.btn90s{align-items:center;background-color:#fff;border:4px solid #000;box-shadow:4px 4px 0 0 #000;color:#000;cursor:pointer;display:inline-flex;font-family:inherit;font-size:1rem;font-weight:900;justify-content:center;letter-spacing:.05em;margin:.25rem;padding:.75rem 1.5rem;text-decoration:none;text-transform:uppercase;transition:transform .1s,box-shadow .1s,background-color .1s}.btn90s:active{box-shadow:0 0 0 0 #000;transform:translate(4px,4px)}.btn90s:focus-visible{outline:2px dashed #000;outline-offset:4px}.btn90s.primary{background-color:#00f0ff}.btn90s.primary:hover{background-color:#66f6ff}.btn90s.success{background-color:#4ade80}.btn90s.success:hover{background-color:#86efac}.btn90s.warning{background-color:#ffc900}.btn90s.warning:hover{background-color:#ffe066}.btn90s.danger{background-color:#ff90e8}.btn90s.danger:hover{background-color:#ffbaf0}.btn90s.dark{background-color:#000;border-color:#000;color:#fff}.btn90s.dark:hover{background-color:#333}.btn90s.sm{border-width:3px;box-shadow:3px 3px 0 0 #000;font-size:.875rem;padding:.5rem 1rem}.btn90s.sm:active{transform:translate(3px,3px)}.btn90s.lg{border-width:5px;box-shadow:6px 6px 0 0 #000;font-size:1.25rem;padding:1rem 2rem}.btn90s.lg:active{transform:translate(6px,6px)}.alert90s-tooltip{animation:tooltip-pop .15s cubic-bezier(.175,.885,.32,1.275) forwards;background-color:#fff;border:3px solid #000;box-shadow:4px 4px 0 0 #000;color:#000;display:none;font-family:inherit;font-size:.875rem;font-weight:700;max-width:300px;padding:.5rem 1rem;pointer-events:none;position:absolute;white-space:pre-wrap;z-index:100000}.alert90s-tooltip.show{display:block}.alert90s-tooltip.c-yellow{background-color:#fef08a}.alert90s-tooltip.c-cyan{background-color:#00f0ff}.alert90s-tooltip.c-pink{background-color:#ff90e8}.alert90s-tooltip.c-base{background-color:#fff}.alert90s-tooltip.c-dark{background-color:#000;color:#fff}.alert90s-tooltip:after{border-style:solid;content:"";height:0;position:absolute;width:0}.alert90s-tooltip.pos-top:after{border-color:#000 transparent transparent;border-width:8px 8px 0;bottom:-8px;left:50%;margin-left:-8px}.alert90s-tooltip.pos-bottom:after{border-color:transparent transparent #000;border-width:0 8px 8px;left:50%;margin-left:-8px;top:-8px}.alert90s-tooltip.pos-left:after{border-color:transparent transparent transparent #000;border-width:8px 0 8px 8px;margin-top:-8px;right:-8px;top:50%}.alert90s-tooltip.pos-right:after{border-color:transparent #000 transparent transparent;border-width:8px 8px 8px 0;left:-8px;margin-top:-8px;top:50%}@keyframes tooltip-pop{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.alert90s-dark.alert90s-box{background-color:#2a2a35;color:#eaeaea}.alert90s-dark .alert90s-title{color:#fff;text-shadow:2px 2px 0 #000}.alert90s-dark .alert90s-html,.alert90s-dark .alert90s-message{color:#d4d4d4}.alert90s-dark .alert90s-html a{color:#60a5fa}.alert90s-dark .alert90s-input,.alert90s-dark select.alert90s-select{background-color:#1a1a24;border-color:#000;box-shadow:inset 4px 4px 0 0 rgba(0,0,0,.5);color:#fff}.alert90s-dark .alert90s-input:focus{border-color:#0ff}.alert90s-dark .alert90s-button{background-color:#ececec;color:#000}.alert90s-dark .alert90s-button.cancel{background-color:#f87171}.alert90s-dark .alert90s-button.deny{background-color:#fb923c}.alert90s-dark .alert90s-button.confirm{background-color:#4ade80}.alert90s-dark .alert90s-checkbox-label .cb-box{fill:#1a1a24;stroke:#555}.alert90s-dark .alert90s-checkbox-label input[type=checkbox]:checked~.alert90s-cb-svg .cb-box{fill:#2a2a35}.alert90s-dark .alert90s-checkbox-label .cb-shadow{fill:#555}.alert90s-dark .alert90s-cb-text{color:#eaeaea}.alert90s-dark .alert90s-radio-label input[type=radio]{background-color:#1a1a24}.alert90s-dark .alert90s-radio-label input[type=radio]:checked{background-color:#0ff;box-shadow:inset 0 0 0 4px #000}.alert90s-theme-checkbox{display:none}.alert90s-theme-wrapper{cursor:pointer;display:inline-block;position:relative;transform:rotate(-1deg);transition:transform .1s}.alert90s-theme-wrapper:active{transform:rotate(0deg) scale(.98)}.alert90s-theme-track-shadow{fill:#000}.alert90s-theme-track-base{fill:#facc15;stroke:#000;stroke-width:6;stroke-linejoin:miter;transition:fill .5s cubic-bezier(.8,0,.2,1)}.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-track-base{fill:#1e1e26}.alert90s-theme-thumb-group{transform:translateX(0);transition:transform .5s cubic-bezier(.68,-.55,.265,1.55)}.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-thumb-group{transform:translateX(190px)}.alert90s-theme-thumb-shadow{fill:#000}.alert90s-theme-thumb-body{fill:#fff;stroke:#000;stroke-width:6;stroke-linejoin:miter;transition:fill .3s}.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-thumb-body{fill:#eaeaea}.alert90s-theme-icon-sun{opacity:1;transition:opacity 0s .25s}.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-icon-sun{opacity:0}.alert90s-theme-icon-moon{filter:drop-shadow(0 0 10px #00FFFF) drop-shadow(0 0 20px #00FFFF);opacity:0;transition:opacity 0s .25s}.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-icon-moon{opacity:1}.alert90s-theme-text-label{font-family:Impact,Arial Black,sans-serif;font-size:38px;letter-spacing:2px;pointer-events:none;user-select:none}.alert90s-theme-text-day{fill:#000;opacity:1;transition:opacity .3s ease}.alert90s-theme-text-night{fill:#0ff;opacity:0;transition:opacity .3s ease}.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-text-day{opacity:0}.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-text-night{opacity:1}.alert90s-theme-deco-accent{fill:#ff90e8;transition:fill .4s}.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-deco-accent{fill:#4ade80}');class t{static getOptions(){return this.currentOptions||{}}static getPopup(){return this.currentPopup||null}static getTimerLeft(){if(!this.timerEnd)return;const t=this.timerEnd-Date.now();return t>0?t:0}static isLoading(){const t=this.getPopup();if(!t)return!1;const e=t.querySelector(".alert90s-actions"),o=t.querySelector(".alert90s-loader");return e&&"none"===e.style.display||!!o}static showLoading(){const e=this.getPopup();if(e){const o=e.querySelector(".alert90s-actions");o&&(o.style.display="none");let a=e.querySelector(".alert90s-loader");if(!a){a=document.createElement("div"),a.className="alert90s-loader";const r=t.currentOptions&&t.currentOptions.loaderType||"hourglass";if("ascii"===r)a.innerHTML='<div class="alert90s-spinner ascii"></div>';else if("blinking"===r)a.innerHTML='<div class="alert90s-spinner blinking">LOADING<span class="cursor">_</span></div>';else if("progress"===r)a.innerHTML='<div class="alert90s-spinner progress"></div>';else if("segmented"===r){const t=[];for(let e=1;e<=10;e++){const o=5+29*(e-1);t.push(`<g class="a90s-seg-${e}"><rect class="a90s-fl-${e}" x="${o}" y="6" width="25" height="28" fill="#ff6b35"/><rect x="${o}" y="6" width="25" height="28" fill="url(#a90s-dither)"/><rect x="${o}" y="6" width="25" height="28" fill="none" stroke="#000" stroke-width="2"/></g>`)}const e=[];for(let t=0;t<=10;t++)e.push(`<text x="295" y="55" class="a90s-txt-${10*t}" text-anchor="end" font-size="14" font-weight="bold" fill="#000">${10*t}%</text>`);a.innerHTML=`<div class="alert90s-spinner segmented"><svg viewBox="0 0 300 60" width="300" height="60"><defs><pattern id="a90s-dither" width="4" height="4" patternUnits="userSpaceOnUse"><path d="M0,0 h2 v2 h-2 Z M2,2 h2 v2 h-2 Z" fill="#000" opacity="0.3"/></pattern></defs><rect x="0" y="0" width="300" height="40" fill="#fff" stroke="#000" stroke-width="3" rx="0"/>${t.join("")}${e.join("")}</svg></div>`}else a.innerHTML='<div class="alert90s-spinner hourglass">⏳</div>';o&&o.parentNode?o.parentNode.insertBefore(a,o):e.querySelector(".alert90s-body").appendChild(a)}}}static hideLoading(){const t=this.getPopup();if(t){const e=t.querySelector(".alert90s-actions");e&&(e.style.display="");const o=t.querySelector(".alert90s-loader");o&&o.remove()}}static showValidationMessage(t){const e=this.getPopup();if(e){let o=e.querySelector(".alert90s-validation-message");if(!o){o=document.createElement("div"),o.className="alert90s-validation-message";const t=e.querySelector(".alert90s-actions");t&&t.parentNode?t.parentNode.insertBefore(o,t):e.querySelector(".alert90s-body").appendChild(o)}o.innerHTML=t,o.style.display="block"}}static resetValidationMessage(){const t=this.getPopup();if(t){const e=t.querySelector(".alert90s-validation-message");e&&(e.style.display="none")}}static getToastContainer(t){const e=`alert90s-toast-container alert90s-toast-${t}`;let o=document.querySelector(`.${e.replace(/ /g,".")}`);return o||(o=document.createElement("div"),o.className=e,document.body.appendChild(o)),o}static fire(t={}){return this.show(t)}static show(e={}){return new Promise(o=>{"string"==typeof e&&(e={title:e}),this.currentOptions=e;const a={title:void 0!==e.title?e.title:"",text:e.message||e.text||"",html:e.html||"",icon:e.type||e.icon||"",iconHtml:e.iconHtml||"",showConfirmButton:!1!==e.showConfirmButton,showCancelButton:e.showCancelButton||!1,showDenyButton:e.showDenyButton||!1,showCloseButton:void 0===e.showCloseButton||e.showCloseButton,loaderType:e.loaderType||"hourglass",confirmButtonText:e.confirmText||e.confirmButtonText||"OK",cancelButtonText:e.cancelText||e.cancelButtonText||"Cancel",denyButtonText:e.denyText||e.denyButtonText||"No",confirmButtonColor:e.confirmButtonColor||"",cancelButtonColor:e.cancelButtonColor||"",denyButtonColor:e.denyButtonColor||"",background:e.background||"",color:e.color||"",titleColor:e.titleColor||"",iconColor:e.iconColor||"",confirmButtonAriaLabel:e.confirmButtonAriaLabel||"",cancelButtonAriaLabel:e.cancelButtonAriaLabel||"",denyButtonAriaLabel:e.denyButtonAriaLabel||"",focusConfirm:!1!==e.focusConfirm,footer:e.footer||"",imageUrl:e.imageUrl||"",imageWidth:e.imageWidth||null,imageHeight:e.imageHeight||null,imageAlt:e.imageAlt||"",input:e.input||null,inputPlaceholder:e.inputPlaceholder||"",inputValue:e.inputValue||"",inputOptions:e.inputOptions||{},inputAttributes:e.inputAttributes||{},showLoaderOnConfirm:e.showLoaderOnConfirm||!1,preConfirm:e.preConfirm||null,toast:e.toast||!1,draggable:e.draggable||!1,position:e.position||(e.toast?"top-end":"center"),allowOutsideClick:void 0===e.allowOutsideClick||e.allowOutsideClick,dir:e.dir||"auto",theme:e.theme||"light",showClass:e.showClass||{popup:"alert90s-pop-in"},hideClass:e.hideClass||{popup:"alert90s-fade-out"},timer:e.timer||null,timerProgressBar:e.timerProgressBar||!1,didOpen:e.didOpen||null,willClose:e.willClose||null};let r=null;a.toast||(r=document.createElement("div"),r.className=`alert90s-overlay alert90s-pos-${a.position}`,r.addEventListener("mousedown",t=>{if(t.target===r){("function"==typeof a.allowOutsideClick?a.allowOutsideClick():a.allowOutsideClick)&&b({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"backdrop"})}}));const i=document.createElement("div");i.className="alert90s-box",a.toast&&i.classList.add("alert90s-toast");let s=a.theme;"auto"===s&&(s=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"),"dark"===s&&i.classList.add("alert90s-dark"),"rtl"===document.dir||"rtl"===a.dir||a.position.includes("start")?i.setAttribute("dir","auto"===a.dir?document.dir||"ltr":a.dir):i.setAttribute("dir",a.dir),a.showClass.popup&&"alert90s-pop-in"!==a.showClass.popup&&(i.style.animation="none",i.className=`alert90s-box ${a.showClass.popup}`),a.background&&(i.style.backgroundColor=a.background),a.color&&(i.style.color=a.color),a.draggable&&i.classList.add("is-draggable"),a.toast||(this.currentPopup=i);const n=document.createElement("div");n.className="alert90s-body";const l=document.createElement("div");l.className="alert90s-header",a.draggable&&l.classList.add("draggable");let c="";if(a.showCloseButton&&(c='\n <button class="alert90s-close-btn" id="alert90s-close" aria-label="Close">\n <span>&#10005;</span>\n </button>\n '),l.innerHTML=`\n <div class="alert90s-header-left">\n <div class="alert90s-header-dot"></div>\n <div class="alert90s-header-dot"></div>\n <div class="alert90s-header-dot"></div>\n </div>\n <div class="alert90s-header-right">\n <span class="alert90s-header-title">SYS.REQ</span>\n ${c}\n </div>\n `,a.draggable){let t,e,o,a,r=!1;l.addEventListener("mousedown",s=>{if(s.target.closest("#alert90s-close"))return;r=!0,t=s.clientX,e=s.clientY;const n=i.getBoundingClientRect();i.style.transform="none",i.style.animation="none",o=n.left,a=n.top,i.style.left=o+"px",i.style.top=a+"px",i.style.margin="0",document.body.style.userSelect="none"}),document.addEventListener("mousemove",s=>{r&&(i.style.left=o+(s.clientX-t)+"px",i.style.top=a+(s.clientY-e)+"px")}),document.addEventListener("mouseup",()=>{r&&(r=!1,document.body.style.userSelect="")})}let d=null;if(a.timer&&a.timerProgressBar&&(d=document.createElement("div"),d.className="alert90s-progress-bar",d.style.animationDuration=`${a.timer}ms`,i.appendChild(d)),a.imageUrl){const t=document.createElement("div");t.className="alert90s-image-container";const e=document.createElement("img");e.src=a.imageUrl,a.imageAlt&&(e.alt=a.imageAlt);let o="";a.imageWidth&&(o+=`width: ${a.imageWidth}px; max-width: 100%; `),a.imageHeight&&(o+=`height: ${a.imageHeight}px; `),o&&t.setAttribute("style",o),t.appendChild(e),n.appendChild(t)}if(a.icon){const t=document.createElement("div"),e="error"===a.icon?"danger":a.icon;t.className=`alert90s-icon ${e}`;let o="";if(a.iconHtml?o=`<div class="alert90s-icon-custom">${a.iconHtml}</div>`:"warning"===a.icon?o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>':"danger"===a.icon||"error"===a.icon?o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>':"info"===a.icon?o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>':"success"===a.icon?o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>':"question"===a.icon&&(o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>'),t.innerHTML=o,a.iconColor&&(t.style.color=a.iconColor,t.style.borderColor=a.iconColor,!a.iconHtml)){const e=t.querySelector("svg");e&&(e.style.stroke=a.iconColor)}o&&n.appendChild(t)}const p=document.createElement("div");if(p.className="alert90s-content-wrapper",a.title){const t=document.createElement("h2");t.className="alert90s-title",t.innerHTML=a.title,a.titleColor&&(t.style.color=a.titleColor),p.appendChild(t)}if(a.html){const t=document.createElement("div");t.className="alert90s-html",t.innerHTML=a.html,a.color&&(t.style.color=a.color),p.appendChild(t)}else if(a.text){const t=document.createElement("p");t.className="alert90s-message",t.textContent=a.text,a.color&&(t.style.color=a.color),p.appendChild(t)}if((a.title||a.html||a.text)&&n.appendChild(p),a.toast&&a.showCloseButton){const t=document.createElement("button");t.className="alert90s-toast-close",t.innerHTML="<span>&#10005;</span>",t.onclick=()=>b({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"close"}),n.appendChild(t)}let f=null;if(a.input){const t=document.createElement("div");if(t.className="alert90s-input-container","select"===a.input){if(f=document.createElement("select"),f.className="alert90s-input alert90s-select",a.inputPlaceholder){const t=document.createElement("option");t.value="",t.textContent=a.inputPlaceholder,t.disabled=!0,t.selected=!0,f.appendChild(t)}for(const[t,e]of Object.entries(a.inputOptions)){const o=document.createElement("option");o.value=t,o.textContent=e,t===a.inputValue&&(o.selected=!0),f.appendChild(o)}t.appendChild(f)}else if("radio"===a.input){const e=document.createElement("div");e.className="alert90s-radio-group";for(const[t,o]of Object.entries(a.inputOptions)){const r=document.createElement("label");r.className="alert90s-radio-label";const i=document.createElement("input");i.type="radio",i.name="alert90s-radio",i.value=t,t===a.inputValue&&(i.checked=!0);const s=document.createElement("span");s.textContent=o,r.appendChild(i),r.appendChild(s),e.appendChild(r)}f=e,t.appendChild(e)}else if("checkbox"===a.input||"toggle"===a.input){const e=document.createElement("label");if(e.className="toggle"===a.input?"alert90s-toggle-label":"alert90s-checkbox-label",f=document.createElement("input"),f.type="checkbox",f.checked=!!a.inputValue,"toggle"===a.input){const t=document.createElement("div");if(t.className="alert90s-toggle-slider",e.appendChild(f),e.appendChild(t),a.inputPlaceholder){const t=document.createElement("span");t.textContent=a.inputPlaceholder,e.appendChild(t)}}else{const t="http://www.w3.org/2000/svg",o=document.createElementNS(t,"svg");o.setAttribute("class","alert90s-cb-svg"),o.setAttribute("viewBox","0 0 100 100"),o.setAttribute("width","36"),o.setAttribute("height","36");const r=document.createElementNS(t,"rect");r.setAttribute("class","cb-shadow"),r.setAttribute("x","12"),r.setAttribute("y","12"),r.setAttribute("width","80"),r.setAttribute("height","80"),r.setAttribute("fill","#000000");const i=document.createElementNS(t,"rect");i.setAttribute("class","cb-box"),i.setAttribute("x","4"),i.setAttribute("y","4"),i.setAttribute("width","80"),i.setAttribute("height","80"),i.setAttribute("fill","#e4e0d7"),i.setAttribute("stroke","#000000"),i.setAttribute("stroke-width","8");const s=document.createElementNS(t,"path");s.setAttribute("class","cb-check"),s.setAttribute("d","M 22 48 L 40 68 L 82 20"),s.setAttribute("fill","none"),s.setAttribute("stroke","#ff6b35"),s.setAttribute("stroke-width","14"),s.setAttribute("stroke-linecap","square"),s.setAttribute("stroke-linejoin","miter"),o.appendChild(r),o.appendChild(i),o.appendChild(s);const n=document.createElement("span");n.className="alert90s-cb-text",n.textContent=a.inputPlaceholder||"Check me",e.appendChild(f),e.appendChild(o),e.appendChild(n)}t.appendChild(e)}else"textarea"===a.input?(f=document.createElement("textarea"),f.className="alert90s-input",a.inputPlaceholder&&(f.placeholder=a.inputPlaceholder),a.inputValue&&(f.value=a.inputValue),t.appendChild(f)):(f=document.createElement("input"),f.type=a.input,f.className="alert90s-input",a.inputPlaceholder&&(f.placeholder=a.inputPlaceholder),a.inputValue&&(f.value=a.inputValue),t.appendChild(f));if(a.inputAttributes&&f&&!["radio"].includes(a.input))for(const[t,e]of Object.entries(a.inputAttributes))f.setAttribute(t,e);n.appendChild(t)}const h=document.createElement("div");h.className="alert90s-actions";let m=null,u=null;const b=t=>{u&&clearTimeout(u),a.willClose&&a.willClose(),i.style.animation="none","alert90s-fade-out"===a.hideClass.popup?(i.style.animation="alert90s-fade-out 0.2s forwards",r&&(r.style.transition="opacity 0.2s",r.style.opacity="0")):i.className=`alert90s-box ${a.hideClass.popup}`,setTimeout(()=>{a.toast?i.parentNode&&i.parentNode.removeChild(i):r&&document.body.contains(r)&&document.body.removeChild(r),o(t)},200)},g=async()=>{let e=!0;if("radio"===a.input){const t=f.querySelector('input[type="radio"]:checked');e=t?t.value:null}else"checkbox"===a.input||"toggle"===a.input?e=f.checked:f&&(e=f.value);if(a.preConfirm){t.resetValidationMessage(),a.showLoaderOnConfirm&&t.showLoading();try{const o=await Promise.resolve(a.preConfirm(e));if(!1===o)return void t.hideLoading();void 0!==o&&o!==e&&(e=o);const r=i.querySelector(".alert90s-validation-message");if(r&&"block"===r.style.display)return void t.hideLoading()}catch(e){return t.showValidationMessage(`Request failed: ${e}`),void t.hideLoading()}}b({isConfirmed:!0,isDenied:!1,isDismissed:!1,value:e})};if(a.showCancelButton){const t=document.createElement("button");t.className="alert90s-button cancel",t.innerHTML=a.cancelButtonText,a.cancelButtonAriaLabel&&t.setAttribute("aria-label",a.cancelButtonAriaLabel),a.cancelButtonColor&&(t.style.backgroundColor=a.cancelButtonColor),t.onclick=()=>b({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"cancel"}),h.appendChild(t)}if(a.showDenyButton){const t=document.createElement("button");t.className="alert90s-button deny",t.innerHTML=a.denyButtonText,a.denyButtonAriaLabel&&t.setAttribute("aria-label",a.denyButtonAriaLabel),a.denyButtonColor&&(t.style.backgroundColor=a.denyButtonColor),t.onclick=()=>b({isConfirmed:!1,isDenied:!0,isDismissed:!1}),h.appendChild(t)}if(a.showConfirmButton){const t=document.createElement("button");t.className="alert90s-button confirm",t.innerHTML=a.confirmButtonText,a.confirmButtonAriaLabel&&t.setAttribute("aria-label",a.confirmButtonAriaLabel),a.confirmButtonColor&&(t.style.backgroundColor=a.confirmButtonColor),t.onclick=g,h.appendChild(t),m=t}if((a.showCancelButton||a.showDenyButton||a.showConfirmButton)&&n.appendChild(h),a.footer){const t=document.createElement("div");t.className="alert90s-footer",t.innerHTML=a.footer,n.appendChild(t)}if(i.appendChild(l),i.appendChild(n),a.toast){const e=t.getToastContainer(a.position);i.style.animation="alert90s-toast-slide-in 0.3s ease-out",e.appendChild(i)}else r.appendChild(i);if(a.showCloseButton&&!a.toast){const t=l.querySelector("#alert90s-close");t&&(t.onclick=()=>b({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"close"}))}a.toast||document.body.appendChild(r),a.focusConfirm&&m&&setTimeout(()=>{f?f.focus():m.focus()},50),a.didOpen&&setTimeout(()=>{a.didOpen()},0),a.timer&&(this.timerEnd=Date.now()+a.timer,u=setTimeout(()=>{b({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"timer"})},a.timer))})}static initTooltips(){this._tooltipsInitialized||(this._tooltipsInitialized=!0,this._tooltipEl=document.createElement("div"),this._tooltipEl.className="alert90s-tooltip",document.body.appendChild(this._tooltipEl),document.addEventListener("mouseover",this._handleTooltipMouseOver.bind(this)),document.addEventListener("mouseout",this._handleTooltipMouseOut.bind(this)),document.addEventListener("focusin",this._handleTooltipMouseOver.bind(this)),document.addEventListener("focusout",this._handleTooltipMouseOut.bind(this)))}static _handleTooltipMouseOver(t){const e=t.target.closest("[data-alert90s-tooltip]");if(!e)return;const o=e.getAttribute("data-alert90s-tooltip");if(!o)return;const a=e.getAttribute("data-alert90s-position")||"top",r=e.getAttribute("data-alert90s-color")||"yellow";this._tooltipEl.innerHTML=o,this._tooltipEl.className=`alert90s-tooltip pos-${a} c-${r} show`;const i=e.getBoundingClientRect(),s=this._tooltipEl.getBoundingClientRect(),n=10;let l=0,c=0;switch(a){case"top":l=i.top-s.height-n,c=i.left+i.width/2-s.width/2;break;case"bottom":l=i.bottom+n,c=i.left+i.width/2-s.width/2;break;case"left":l=i.top+i.height/2-s.height/2,c=i.left-s.width-n;break;case"right":l=i.top+i.height/2-s.height/2,c=i.right+n}c<n&&(c=n),l<n&&(l=n),c+s.width>window.innerWidth-n&&(c=window.innerWidth-s.width-n),this._tooltipEl.style.top=`${l+window.scrollY}px`,this._tooltipEl.style.left=`${c+window.scrollX}px`}static _handleTooltipMouseOut(t){const e=t.target.closest("[data-alert90s-tooltip]");e&&setTimeout(()=>{this._tooltipEl.matches(":hover")||e.matches(":hover")||e.contains(document.activeElement)||this._tooltipEl.classList.remove("show")},10)}static renderThemeToggle(t,e={}){const o=document.querySelector(t);if(!o)return null;const a=`\n <label class="alert90s-theme-wrapper" aria-label="Neo Brutalist Theme Switcher" style="width: ${e.width||"100%"}; height: auto; aspect-ratio: 5 / 2;">\n <input type="checkbox" class="alert90s-theme-checkbox" ${e.isDark||!1?"checked":""} />\n \n <svg viewBox="0 0 300 120" style="width: 100%; height: 100%; overflow: visible;">\n \x3c!-- HARD OFFSET SHADOW --\x3e\n <rect class="alert90s-theme-track-shadow" x="18" y="18" width="280" height="100" />\n \x3c!-- MAIN TRACK --\x3e\n <rect class="alert90s-theme-track-base" x="10" y="10" width="280" height="100" />\n\n \x3c!-- DECORATIVE 90S UI ELEMENTS --\x3e\n <g class="alert90s-theme-deco-elements" stroke="#000" stroke-width="2">\n <circle cx="25" cy="25" r="4" fill="#FFF" />\n <line x1="23" y1="23" x2="27" y2="27" />\n <circle cx="275" cy="25" r="4" fill="#FFF" />\n <line x1="273" y1="27" x2="277" y2="23" />\n <circle cx="25" cy="95" r="4" fill="#FFF" />\n <line x1="23" y1="95" x2="27" y2="95" />\n <circle cx="275" cy="95" r="4" fill="#FFF" />\n <line x1="275" y1="93" x2="275" y2="97" />\n \n <line x1="120" y1="20" x2="120" y2="35" stroke-width="3" />\n <line x1="128" y1="20" x2="128" y2="35" stroke-width="5" />\n <line x1="138" y1="20" x2="138" y2="35" stroke-width="2" />\n <line x1="145" y1="20" x2="145" y2="35" stroke-width="6" />\n </g>\n\n \x3c!-- DAY / NIGHT TEXT --\x3e\n <text class="alert90s-theme-text-label alert90s-theme-text-night" x="40" y="75">NIGHT</text>\n <text class="alert90s-theme-text-label alert90s-theme-text-day" x="190" y="75">DAY</text>\n\n \x3c!-- NEON DECORATIVE STICKER --\x3e\n <rect class="alert90s-theme-deco-accent" x="120" y="85" width="60" height="15" stroke="#000" stroke-width="3" />\n <text x="125" y="96" font-size="10" font-weight="bold" fill="#000" font-family="sans-serif">SYS.UI</text>\n\n \x3c!-- SLIDING THUMB GROUP --\x3e\n <g class="alert90s-theme-thumb-group">\n \x3c!-- Thumb Shadow --\x3e\n <rect class="alert90s-theme-thumb-shadow" x="23" y="23" width="80" height="80" />\n \x3c!-- Thumb Body --\x3e\n <rect class="alert90s-theme-thumb-body" x="15" y="15" width="80" height="80" />\n \n \x3c!-- SUN ICON --\x3e\n <g class="alert90s-theme-icon-sun">\n <rect x="40" y="40" width="30" height="30" fill="#facc15" stroke="#000" stroke-width="4" />\n <rect x="48" y="48" width="14" height="14" fill="#ef4444" stroke="#000" stroke-width="2" />\n <rect x="50" y="20" width="10" height="10" fill="#ef4444" stroke="#000" stroke-width="4" />\n <rect x="50" y="80" width="10" height="10" fill="#ef4444" stroke="#000" stroke-width="4" />\n <rect x="20" y="50" width="10" height="10" fill="#ef4444" stroke="#000" stroke-width="4" />\n <rect x="80" y="50" width="10" height="10" fill="#ef4444" stroke="#000" stroke-width="4" />\n <rect x="25" y="25" width="10" height="10" fill="#facc15" stroke="#000" stroke-width="4" />\n <rect x="75" y="25" width="10" height="10" fill="#facc15" stroke="#000" stroke-width="4" />\n <rect x="25" y="75" width="10" height="10" fill="#facc15" stroke="#000" stroke-width="4" />\n <rect x="75" y="75" width="10" height="10" fill="#facc15" stroke="#000" stroke-width="4" />\n </g>\n\n \x3c!-- MOON ICON --\x3e\n <g class="alert90s-theme-icon-moon">\n <path fill="#000" transform="translate(3, 3)" d="M 60 30 v -5 h 10 v 5 h 5 v 10 h 5 v 30 h -5 v 10 h -5 v 5 h -10 v -5 h -5 v -5 h 5 v -5 h 5 v -20 h -5 v -5 h -5 v -10 h 5 v -5 Z" />\n <path fill="#00FFFF" stroke="#000" stroke-width="3" stroke-linejoin="miter" d="M 60 30 v -5 h 10 v 5 h 5 v 10 h 5 v 30 h -5 v 10 h -5 v 5 h -10 v -5 h -5 v -5 h 5 v -5 h 5 v -20 h -5 v -5 h -5 v -10 h 5 v -5 Z" />\n <rect x="70" y="40" width="5" height="5" fill="#FFFFFF" opacity="0.8" />\n <rect x="65" y="70" width="5" height="5" fill="#FFFFFF" opacity="0.8" />\n </g>\n </g>\n </svg>\n </label>\n `;o.innerHTML=a;return o.querySelector(".alert90s-theme-checkbox").addEventListener("change",t=>{"function"==typeof e.onChange&&e.onChange(t.target.checked)}),o}}return"undefined"!=typeof window&&(window.Alert90s=t,document.addEventListener("DOMContentLoaded",()=>{t.initTooltips()})),t});
1
+ !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Alert90s=e()}(this,function(){"use strict";!function(t,e){void 0===e&&(e={});var o=e.insertAt;if("undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===o&&a.firstChild?a.insertBefore(r,a.firstChild):a.appendChild(r),r.styleSheet?r.styleSheet.cssText=t:r.appendChild(document.createTextNode(t))}}('.alert90s-overlay{animation:alert90s-fade-in .2s ease-out forwards;backdrop-filter:blur(4px);background-color:rgba(0,0,0,.6);box-sizing:border-box;display:flex;font-family:inherit;inset:0;padding:1rem;position:fixed;z-index:99999}.alert90s-overlay.alert90s-pos-center{align-items:center;justify-content:center}.alert90s-overlay.alert90s-pos-top{align-items:flex-start;justify-content:center}.alert90s-overlay.alert90s-pos-top-start{align-items:flex-start;justify-content:flex-start}.alert90s-overlay.alert90s-pos-top-end{align-items:flex-start;justify-content:flex-end}.alert90s-overlay.alert90s-pos-bottom{align-items:flex-end;justify-content:center}.alert90s-overlay.alert90s-pos-bottom-start{align-items:flex-end;justify-content:flex-start}.alert90s-overlay.alert90s-pos-bottom-end{align-items:flex-end;justify-content:flex-end}.alert90s-overlay.alert90s-pos-center-start{align-items:center;justify-content:flex-start}.alert90s-overlay.alert90s-pos-center-end{align-items:center;justify-content:flex-end}.alert90s-overlay *{box-sizing:border-box}.alert90s-box{align-items:center;animation:alert90s-pop-in .3s cubic-bezier(.175,.885,.32,1.275) forwards;background-color:#fff;border:4px solid #000;box-shadow:12px 12px 0 0 #000;display:flex;flex-direction:column;max-height:95vh;max-width:28rem;position:relative;text-align:center;width:100%}.alert90s-box[dir=rtl]{text-align:right}.alert90s-box.is-draggable{position:absolute}.alert90s-body{align-items:center;display:flex;flex-direction:column;overflow-y:auto;padding:3rem 2rem 2rem;scrollbar-width:none;width:100%}.alert90s-body::-webkit-scrollbar{display:none}.alert90s-header{align-items:center;background-color:#e2e8f0;border-bottom:4px solid #000;display:flex;height:2rem;justify-content:space-between;left:0;padding:0 .5rem;position:absolute;top:0;width:100%;z-index:10}.alert90s-header.draggable{cursor:grab}.alert90s-header.draggable:active{cursor:grabbing}.alert90s-header-left{display:flex;gap:.25rem}.alert90s-box[dir=rtl] .alert90s-header{flex-direction:row-reverse}.alert90s-header-dot{background-color:#fff;border:2px solid #000;height:.75rem;width:.75rem}.alert90s-header-right{align-items:center;display:flex;gap:.5rem;z-index:11}.alert90s-box[dir=rtl] .alert90s-header-right{flex-direction:row-reverse}.alert90s-header-title{font-size:10px;font-weight:700;letter-spacing:.1em;pointer-events:none;text-transform:uppercase}.alert90s-close-btn{align-items:center;background-color:#ef4444;border:2px solid #000;box-shadow:none;cursor:pointer;display:flex;height:1.25rem;justify-content:center;margin:0;padding:0;transition:transform .1s,background-color .1s;width:1.25rem}.alert90s-close-btn:hover{background-color:#f87171;transform:scale(1.1)}.alert90s-close-btn span{color:#000;font-size:14px;font-weight:700;line-height:1}.alert90s-image-container{align-items:center;background:#fff;border:4px solid #000;box-shadow:4px 4px 0 0 #000;display:flex;justify-content:center;margin-bottom:1rem;overflow:hidden;width:100%}.alert90s-image-container img{display:block;height:auto;max-width:100%}.alert90s-icon{align-items:center;border:4px solid #000;border-radius:9999px;box-shadow:4px 4px 0 0 #000;display:flex;flex-shrink:0;height:4rem;justify-content:center;margin-bottom:1rem;width:4rem}.alert90s-icon img,.alert90s-icon svg{height:2rem;width:2rem}.alert90s-icon-custom{font-size:2.25rem;font-weight:700;line-height:1}.alert90s-icon.warning{background-color:#facc15}.alert90s-icon.danger,.alert90s-icon.error{background-color:#ef4444;color:#fff}.alert90s-icon.info,.alert90s-icon.question{background-color:#60a5fa}.alert90s-icon.success{background-color:#4ade80}.alert90s-title{color:#1a1a1a;font-size:1.5rem;font-weight:900;letter-spacing:.1em;line-height:1.2;margin:0 0 .5rem;text-transform:uppercase}.alert90s-message{color:#475569;font-weight:700}.alert90s-html,.alert90s-message{font-size:.875rem;margin:0 0 1.5rem;max-width:100%}.alert90s-html{color:#1a1a1a;line-height:1.5}.alert90s-box[dir=rtl] .alert90s-html{text-align:right}.alert90s-html a{color:#2563eb;font-weight:700;text-decoration:underline;text-decoration-thickness:2px}.alert90s-html a:hover{background-color:#bfdbfe}.alert90s-html b,.alert90s-html strong{font-weight:900}.alert90s-input-container{margin-bottom:1.5rem;width:100%}.alert90s-input{background-color:#f8fafc;border:4px solid #000;box-shadow:inset 4px 4px 0 0 rgba(0,0,0,.05);font-family:inherit;font-size:1rem;font-weight:700;outline:none;padding:.75rem;transition:background-color .2s;width:100%}.alert90s-input:focus{background-color:#fff;border-color:#2563eb}textarea.alert90s-input{min-height:100px;resize:vertical}.alert90s-select-wrapper{position:relative;user-select:none;width:100%;z-index:10}.alert90s-select-toggle{display:none}.alert90s-select-box{align-items:center;background-color:#e4e0d7;border:4px solid #000;box-shadow:4px 4px 0 #000;color:#000;cursor:pointer;display:flex;font-size:1rem;font-weight:700;justify-content:space-between;padding:.75rem 1rem;transition:all .1s ease}.alert90s-select-box:active{box-shadow:1px 1px 0 #000;transform:translate(3px,3px)}.alert90s-select-arrow{flex-shrink:0;transition:transform .2s steps(3)}.alert90s-select-toggle:checked~.alert90s-select-box{background-color:#ff6b35;color:#fff}.alert90s-select-toggle:checked~.alert90s-select-box .alert90s-select-arrow path{stroke:#fff}.alert90s-select-toggle:checked~.alert90s-select-box .alert90s-select-arrow{transform:rotate(180deg)}.alert90s-select-menu{background-color:#e4e0d7;border:4px solid #000;box-shadow:4px 4px 0 #000;display:flex;flex-direction:column;left:0;margin-top:8px;opacity:0;position:absolute;right:0;top:100%;transform:translateY(-15px);transition:transform .3s cubic-bezier(.175,.885,.32,1.275),opacity .2s ease-out;visibility:hidden;z-index:10}.alert90s-select-toggle:checked~.alert90s-select-menu{opacity:1;transform:translateY(0);visibility:visible}.alert90s-select-item{border-bottom:4px solid #000;color:#000;cursor:pointer;font-size:1rem;font-weight:700;padding:.75rem 1rem;transition:background-color 0s,color 0s}.alert90s-select-item:last-child{border-bottom:none}.alert90s-select-item:hover{background-color:#000;color:#ff6b35}.alert90s-select-item.selected{background-color:#ff6b35;color:#fff}.alert90s-radio-group{align-items:flex-start;display:flex;flex-direction:column;gap:.5rem;width:100%}.alert90s-radio-label{align-items:center;cursor:pointer;display:inline-flex;font-size:1rem;font-weight:700;gap:.75rem;position:relative;user-select:none}.alert90s-radio-label input[type=radio]{cursor:pointer;height:0;opacity:0;position:absolute;width:0}.alert90s-radio-svg{overflow:visible;transition:transform .1s ease}.alert90s-radio-label:hover .alert90s-radio-svg{transform:translate(-2px,-2px)}.alert90s-radio-label:active .alert90s-radio-svg{transform:translate(2px,2px)}.radio-box{transition:fill .1s ease}.alert90s-radio-label input[type=radio]:checked~.alert90s-radio-svg .radio-box{fill:#fff}.radio-dot{opacity:0;transform:scale(0) rotate(-45deg);transform-origin:50% 50%}.alert90s-radio-label input[type=radio]:checked~.alert90s-radio-svg .radio-dot{animation:alert90s-radio-pop .3s cubic-bezier(.175,.885,.32,1.275) forwards;opacity:1;transform:scale(1) rotate(0deg)}@keyframes alert90s-radio-pop{0%{fill:#fff;transform:scale(0) rotate(-45deg)}50%{fill:#fff;transform:scale(1.3) rotate(15deg)}to{fill:#ff6b35;transform:scale(1) rotate(0deg)}}.alert90s-radio-text{transition:color .2s}.alert90s-radio-label input[type=radio]:checked~.alert90s-radio-text{animation:alert90s-cb-bump .2s ease-out forwards;color:#ff6b35}.alert90s-checkbox-label{align-items:center;cursor:pointer;display:inline-flex;font-size:1rem;font-weight:700;gap:.75rem;position:relative;user-select:none}.alert90s-checkbox-label input[type=checkbox]{cursor:pointer;height:0;opacity:0;position:absolute;width:0}.alert90s-cb-svg{overflow:visible;transition:transform .1s ease}.alert90s-checkbox-label:hover .alert90s-cb-svg{transform:translate(-2px,-2px)}.alert90s-checkbox-label:active .alert90s-cb-svg{transform:translate(2px,2px)}.cb-box{transition:fill .1s ease}.alert90s-checkbox-label input[type=checkbox]:checked~.alert90s-cb-svg .cb-box{fill:#fff}.cb-check{stroke-dasharray:120;stroke-dashoffset:120;transition:stroke-dashoffset .15s ease-out}.alert90s-checkbox-label input[type=checkbox]:checked~.alert90s-cb-svg .cb-check{stroke-dashoffset:0}.alert90s-checkbox-label input[type=checkbox]:checked~.alert90s-cb-svg{animation:alert90s-cb-shake .3s cubic-bezier(.25,.46,.45,.94) forwards}@keyframes alert90s-cb-shake{0%{transform:scale(1) translate(0)}30%{transform:scale(1.15) translate(-2px,-2px) rotate(-4deg)}50%{transform:scale(.95) translate(2px,2px) rotate(3deg)}75%{transform:scale(1.05) translate(-1px,-1px) rotate(-1deg)}to{transform:scale(1) translate(0) rotate(0deg)}}.alert90s-cb-text{transition:color .2s}.alert90s-checkbox-label input[type=checkbox]:checked~.alert90s-cb-text{animation:alert90s-cb-bump .2s ease-out forwards;color:#ff6b35}@keyframes alert90s-cb-bump{0%{transform:translateX(0)}50%{transform:translateX(4px)}to{transform:translateX(0)}}.alert90s-toggle-label{align-items:center;cursor:pointer;display:flex;font-size:1rem;font-weight:700;gap:.75rem}.alert90s-toggle-label input[type=checkbox]{display:none}.alert90s-toggle-slider{background-color:#f87171;border:4px solid #000;box-shadow:inset 3px 3px 0 0 rgba(0,0,0,.1);height:1.5rem;position:relative;transition:background-color .2s;width:3rem}.alert90s-toggle-slider:before{background-color:#fff;border-right:4px solid #000;content:"";height:100%;left:0;position:absolute;top:0;transition:transform .2s;width:1rem}.alert90s-toggle-label input[type=checkbox]:checked+.alert90s-toggle-slider{background-color:#4ade80}.alert90s-toggle-label input[type=checkbox]:checked+.alert90s-toggle-slider:before{border-left:4px solid #000;transform:translateX(1.5rem)}.alert90s-validation-message{background-color:#fef2f2;border:4px solid #000;border-left:8px solid #ef4444;color:#ef4444;display:none;font-size:.875rem;font-weight:700;margin-bottom:1.5rem;padding:.75rem;text-align:left;width:100%}.alert90s-box[dir=rtl] .alert90s-validation-message{border-left-color:#000;border-left-width:4px;border-right-color:#ef4444;border-right-width:8px;text-align:right}.alert90s-actions{display:flex;flex-direction:column;gap:1rem;justify-content:center;width:100%}@media (min-width:640px){.alert90s-actions{flex-direction:row}}.alert90s-button{align-items:center;background-color:#fff;border:4px solid #000;box-shadow:4px 4px 0 0 #000;color:#000;cursor:pointer;display:flex;font-family:inherit;font-size:.875rem;font-weight:900;gap:.5rem;justify-content:center;letter-spacing:.1em;margin:0;padding:.75rem 1rem;text-transform:uppercase;transition:background-color .1s;width:100%}@media (min-width:640px){.alert90s-button{flex:1;min-width:100px;width:auto}}.alert90s-button:active{box-shadow:0 0 0 0 #000;transform:translate(4px,4px)}.alert90s-button:focus{outline:2px dashed #000;outline-offset:4px}.alert90s-button.cancel{background-color:#f87171}.alert90s-button.cancel:hover{background-color:#fca5a5}.alert90s-button.deny{background-color:#fb923c}.alert90s-button.deny:hover{background-color:#fdba74}.alert90s-button.confirm{background-color:#4ade80}.alert90s-button.confirm:hover{background-color:#86efac}.alert90s-footer{border-top:4px solid #000;color:#475569;font-size:.75rem;font-weight:700;margin-top:1.5rem;padding-top:1rem;width:100%}.alert90s-footer a{color:#2563eb;text-decoration:underline;text-decoration-thickness:2px}.alert90s-footer a:hover{background-color:#bfdbfe}.alert90s-progress-bar{animation:alert90s-progress linear forwards;background-color:#000;bottom:0;height:6px;left:0;position:absolute;width:100%}.alert90s-loader{display:flex;padding:1rem 0}.alert90s-loader,.alert90s-spinner{align-items:center;justify-content:center}.alert90s-spinner{display:inline-flex}.alert90s-spinner.hourglass{animation:alert90s-hourglass 2s ease-in-out infinite;font-size:2.5rem;line-height:1}.alert90s-spinner.ascii{font-family:monospace;font-size:2rem;font-weight:700}.alert90s-spinner.ascii:after{animation:alert90s-ascii .5s steps(4) infinite;content:"|"}.alert90s-spinner.blinking{font-family:monospace;font-size:1.5rem;font-weight:700;letter-spacing:.1em}.alert90s-spinner.blinking .cursor{animation:alert90s-blink 1s step-end infinite}.alert90s-spinner.progress{background-color:#cbd5e1;border:2px solid #000;box-shadow:inset 2px 2px 0 0 #64748b,inset -2px -2px 0 0 #f8fafc;height:24px;overflow:hidden;padding:2px;position:relative;width:200px}.alert90s-spinner.progress:before{animation:alert90s-marquee 1.5s linear infinite;background-color:#1d4ed8;background-image:repeating-linear-gradient(90deg,#1d4ed8,#1d4ed8 10px,transparent 0,transparent 12px);content:"";height:calc(100% - 4px);left:0;position:absolute;top:2px;width:40%}.alert90s-spinner.segmented{display:flex;justify-content:center;width:100%}.alert90s-spinner.segmented svg{height:auto;max-width:100%}.a90s-seg-1{animation:a90s-op1 6s infinite}.a90s-seg-2{animation:a90s-op2 6s infinite}.a90s-seg-3{animation:a90s-op3 6s infinite}.a90s-seg-4{animation:a90s-op4 6s infinite}.a90s-seg-5{animation:a90s-op5 6s infinite}.a90s-seg-6{animation:a90s-op6 6s infinite}.a90s-seg-7{animation:a90s-op7 6s infinite}.a90s-seg-8{animation:a90s-op8 6s infinite}.a90s-seg-9{animation:a90s-op9 6s infinite}.a90s-seg-10{animation:a90s-op10 6s infinite}@keyframes a90s-op1{0%,9%{opacity:0}10%,92%{opacity:1}92.1%,to{opacity:0}}@keyframes a90s-op2{0%,17%{opacity:0}18%,92%{opacity:1}92.1%,to{opacity:0}}@keyframes a90s-op3{0%,25%{opacity:0}26%,92%{opacity:1}92.1%,to{opacity:0}}@keyframes a90s-op4{0%,33%{opacity:0}34%,92%{opacity:1}92.1%,to{opacity:0}}@keyframes a90s-op5{0%,41%{opacity:0}42%,92%{opacity:1}92.1%,to{opacity:0}}@keyframes a90s-op6{0%,49%{opacity:0}50%,92%{opacity:1}92.1%,to{opacity:0}}@keyframes a90s-op7{0%,57%{opacity:0}58%,92%{opacity:1}92.1%,to{opacity:0}}@keyframes a90s-op8{0%,65%{opacity:0}66%,92%{opacity:1}92.1%,to{opacity:0}}@keyframes a90s-op9{0%,73%{opacity:0}74%,92%{opacity:1}92.1%,to{opacity:0}}@keyframes a90s-op10{0%,81%{opacity:0}82%,92%{opacity:1}92.1%,to{opacity:0}}.a90s-fl-1{animation:a90s-fl1 6s infinite}.a90s-fl-2{animation:a90s-fl2 6s infinite}.a90s-fl-3{animation:a90s-fl3 6s infinite}.a90s-fl-4{animation:a90s-fl4 6s infinite}.a90s-fl-5{animation:a90s-fl5 6s infinite}.a90s-fl-6{animation:a90s-fl6 6s infinite}.a90s-fl-7{animation:a90s-fl7 6s infinite}.a90s-fl-8{animation:a90s-fl8 6s infinite}.a90s-fl-9{animation:a90s-fl9 6s infinite}.a90s-fl-10{animation:a90s-fl10 6s infinite}@keyframes a90s-fl1{0%,9%{fill:#ff6b35}10%,13%{fill:#fff}13.1%,to{fill:#ff6b35}}@keyframes a90s-fl2{0%,17%{fill:#ff6b35}18%,21%{fill:#fff}21.1%,to{fill:#ff6b35}}@keyframes a90s-fl3{0%,25%{fill:#ff6b35}26%,29%{fill:#fff}29.1%,to{fill:#ff6b35}}@keyframes a90s-fl4{0%,33%{fill:#ff6b35}34%,37%{fill:#fff}37.1%,to{fill:#ff6b35}}@keyframes a90s-fl5{0%,41%{fill:#ff6b35}42%,45%{fill:#fff}45.1%,to{fill:#ff6b35}}@keyframes a90s-fl6{0%,49%{fill:#ff6b35}50%,53%{fill:#fff}53.1%,to{fill:#ff6b35}}@keyframes a90s-fl7{0%,57%{fill:#ff6b35}58%,61%{fill:#fff}61.1%,to{fill:#ff6b35}}@keyframes a90s-fl8{0%,65%{fill:#ff6b35}66%,69%{fill:#fff}69.1%,to{fill:#ff6b35}}@keyframes a90s-fl9{0%,73%{fill:#ff6b35}74%,77%{fill:#fff}77.1%,to{fill:#ff6b35}}@keyframes a90s-fl10{0%,81%{fill:#ff6b35}82%,85%{fill:#fff}85.1%,to{fill:#ff6b35}}.a90s-txt-0{animation:a90s-t0 6s infinite}.a90s-txt-10{animation:a90s-t10 6s infinite;opacity:0}.a90s-txt-20{animation:a90s-t20 6s infinite;opacity:0}.a90s-txt-30{animation:a90s-t30 6s infinite;opacity:0}.a90s-txt-40{animation:a90s-t40 6s infinite;opacity:0}.a90s-txt-50{animation:a90s-t50 6s infinite;opacity:0}.a90s-txt-60{animation:a90s-t60 6s infinite;opacity:0}.a90s-txt-70{animation:a90s-t70 6s infinite;opacity:0}.a90s-txt-80{animation:a90s-t80 6s infinite;opacity:0}.a90s-txt-90{animation:a90s-t90 6s infinite;opacity:0}.a90s-txt-100{animation:a90s-t100 6s infinite;opacity:0}@keyframes a90s-t0{0%,9.9%{opacity:1}10%,91.9%{opacity:0}92%,to{opacity:1}}@keyframes a90s-t10{0%,9.9%{opacity:0}10%,17.9%{opacity:1}18%,to{opacity:0}}@keyframes a90s-t20{0%,17.9%{opacity:0}18%,25.9%{opacity:1}26%,to{opacity:0}}@keyframes a90s-t30{0%,25.9%{opacity:0}26%,33.9%{opacity:1}34%,to{opacity:0}}@keyframes a90s-t40{0%,33.9%{opacity:0}34%,41.9%{opacity:1}42%,to{opacity:0}}@keyframes a90s-t50{0%,41.9%{opacity:0}42%,49.9%{opacity:1}50%,to{opacity:0}}@keyframes a90s-t60{0%,49.9%{opacity:0}50%,57.9%{opacity:1}58%,to{opacity:0}}@keyframes a90s-t70{0%,57.9%{opacity:0}58%,65.9%{opacity:1}66%,to{opacity:0}}@keyframes a90s-t80{0%,65.9%{opacity:0}66%,73.9%{opacity:1}74%,to{opacity:0}}@keyframes a90s-t90{0%,73.9%{opacity:0}74%,81.9%{opacity:1}82%,to{opacity:0}}@keyframes a90s-t100{0%,81.9%{opacity:0}82%,91.9%{opacity:1}92%,to{opacity:0}}@keyframes alert90s-hourglass{0%{transform:rotate(0)}25%{transform:rotate(180deg)}50%{transform:rotate(180deg)}75%{transform:rotate(1turn)}to{transform:rotate(1turn)}}@keyframes alert90s-ascii{0%{content:"|"}25%{content:"/"}50%{content:"-"}75%{content:"\\\\"}to{content:"|"}}@keyframes alert90s-blink{50%{opacity:0}}@keyframes alert90s-marquee{0%{transform:translateX(-100%)}to{transform:translateX(250px)}}@keyframes alert90s-progress{0%{width:100%}to{width:0}}@keyframes alert90s-fade-in{0%{opacity:0}to{opacity:1}}@keyframes alert90s-pop-in{0%{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes alert90s-fade-out{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.95) translateY(10px)}}@keyframes alert90s-toast-slide-in{0%{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.alert90s-toast-container{display:flex;gap:10px;padding:10px;pointer-events:none;position:fixed;z-index:10000}.alert90s-toast-top-start{flex-direction:column;left:0;top:0}.alert90s-toast-top{flex-direction:column;left:50%;top:0;transform:translateX(-50%)}.alert90s-toast-top-end{flex-direction:column;right:0;top:0}.alert90s-toast-center-start{flex-direction:column;left:0;top:50%;transform:translateY(-50%)}.alert90s-toast-center{flex-direction:column;left:50%;top:50%;transform:translate(-50%,-50%)}.alert90s-toast-center-end{flex-direction:column;right:0;top:50%;transform:translateY(-50%)}.alert90s-toast-bottom-start{bottom:0;flex-direction:column-reverse;left:0}.alert90s-toast-bottom{bottom:0;flex-direction:column-reverse;left:50%;transform:translateX(-50%)}.alert90s-toast-bottom-end{bottom:0;flex-direction:column-reverse;right:0}.alert90s-box.alert90s-toast{align-items:stretch;bottom:auto!important;box-shadow:6px 6px 0 0 #000;flex-direction:row;left:auto!important;margin:0;max-width:100%;min-width:250px;padding:0;pointer-events:auto;position:relative!important;right:auto!important;top:auto!important;transform:none!important;width:auto}.alert90s-toast .alert90s-header{display:none}.alert90s-toast .alert90s-body{align-items:center;flex-direction:row;gap:1rem;padding:1rem 1.5rem}.alert90s-toast .alert90s-icon{height:2.5rem;margin-bottom:0;width:2.5rem}.alert90s-toast .alert90s-icon img,.alert90s-toast .alert90s-icon svg{height:1.25rem;width:1.25rem}.alert90s-content-wrapper{align-items:center;display:flex;flex-direction:column;width:100%}.alert90s-toast .alert90s-content-wrapper{align-items:flex-start;text-align:left}.alert90s-box.alert90s-toast[dir=rtl] .alert90s-content-wrapper{align-items:flex-end;text-align:right}.alert90s-toast .alert90s-title{font-size:1rem;margin-bottom:.25rem}.alert90s-toast .alert90s-html,.alert90s-toast .alert90s-message{font-size:.875rem;margin-bottom:0}.alert90s-toast-close{align-items:center;background-color:#ef4444;border:2px solid #000;box-shadow:none;cursor:pointer;display:flex;height:1.5rem;justify-content:center;margin:0;margin-inline-start:auto;padding:0;transition:transform .1s,background-color .1s;width:1.5rem}.alert90s-toast-close span{color:#000;display:block;font-size:10px;font-weight:700;line-height:1}.alert90s-toast-close:hover{background-color:#f87171;transform:scale(1.1)}.btn90s{align-items:center;background-color:#fff;border:4px solid #000;box-shadow:4px 4px 0 0 #000;color:#000;cursor:pointer;display:inline-flex;font-family:inherit;font-size:1rem;font-weight:900;justify-content:center;letter-spacing:.05em;margin:.25rem;padding:.75rem 1.5rem;text-decoration:none;text-transform:uppercase;transition:transform .1s,box-shadow .1s,background-color .1s}.btn90s:active{box-shadow:0 0 0 0 #000;transform:translate(4px,4px)}.btn90s:focus-visible{outline:2px dashed #000;outline-offset:4px}.btn90s.primary{background-color:#00f0ff}.btn90s.primary:hover{background-color:#66f6ff}.btn90s.success{background-color:#4ade80}.btn90s.success:hover{background-color:#86efac}.btn90s.warning{background-color:#ffc900}.btn90s.warning:hover{background-color:#ffe066}.btn90s.danger{background-color:#ff90e8}.btn90s.danger:hover{background-color:#ffbaf0}.btn90s.dark{background-color:#000;border-color:#000;color:#fff}.btn90s.dark:hover{background-color:#333}.btn90s.sm{border-width:3px;box-shadow:3px 3px 0 0 #000;font-size:.875rem;padding:.5rem 1rem}.btn90s.sm:active{transform:translate(3px,3px)}.btn90s.lg{border-width:5px;box-shadow:6px 6px 0 0 #000;font-size:1.25rem;padding:1rem 2rem}.btn90s.lg:active{transform:translate(6px,6px)}.alert90s-tooltip{animation:tooltip-pop .15s cubic-bezier(.175,.885,.32,1.275) forwards;background-color:#fff;border:3px solid #000;box-shadow:4px 4px 0 0 #000;color:#000;display:none;font-family:inherit;font-size:.875rem;font-weight:700;max-width:300px;padding:.5rem 1rem;pointer-events:none;position:absolute;white-space:pre-wrap;z-index:100000}.alert90s-tooltip.show{display:block}.alert90s-tooltip.c-yellow{background-color:#fef08a}.alert90s-tooltip.c-cyan{background-color:#00f0ff}.alert90s-tooltip.c-pink{background-color:#ff90e8}.alert90s-tooltip.c-base{background-color:#fff}.alert90s-tooltip.c-dark{background-color:#000;color:#fff}.alert90s-tooltip:after{border-style:solid;content:"";height:0;position:absolute;width:0}.alert90s-tooltip.pos-top:after{border-color:#000 transparent transparent;border-width:8px 8px 0;bottom:-8px;left:50%;margin-left:-8px}.alert90s-tooltip.pos-bottom:after{border-color:transparent transparent #000;border-width:0 8px 8px;left:50%;margin-left:-8px;top:-8px}.alert90s-tooltip.pos-left:after{border-color:transparent transparent transparent #000;border-width:8px 0 8px 8px;margin-top:-8px;right:-8px;top:50%}.alert90s-tooltip.pos-right:after{border-color:transparent #000 transparent transparent;border-width:8px 8px 8px 0;left:-8px;margin-top:-8px;top:50%}@keyframes tooltip-pop{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.alert90s-dark.alert90s-box{background-color:#2a2a35;color:#eaeaea}.alert90s-dark .alert90s-title{color:#fff;text-shadow:2px 2px 0 #000}.alert90s-dark .alert90s-html,.alert90s-dark .alert90s-message{color:#d4d4d4}.alert90s-dark .alert90s-html a{color:#60a5fa}.alert90s-dark .alert90s-input{background-color:#1a1a24;border-color:#000;box-shadow:inset 4px 4px 0 0 rgba(0,0,0,.5);color:#fff}.alert90s-dark .alert90s-select-box{background-color:#1a1a24;border-color:#555;box-shadow:4px 4px 0 #555;color:#eaeaea}.alert90s-dark .alert90s-select-box .alert90s-select-arrow path{stroke:#eaeaea}.alert90s-dark .alert90s-select-toggle:checked~.alert90s-select-box{background-color:#ff6b35;color:#fff}.alert90s-dark .alert90s-select-menu{background-color:#1a1a24;border-color:#555;box-shadow:4px 4px 0 #555}.alert90s-dark .alert90s-select-item{border-bottom-color:#555;color:#eaeaea}.alert90s-dark .alert90s-select-item:hover{background-color:#555;color:#ff6b35}.alert90s-dark .alert90s-input:focus{border-color:#0ff}.alert90s-dark .alert90s-button{background-color:#ececec;color:#000}.alert90s-dark .alert90s-button.cancel{background-color:#f87171}.alert90s-dark .alert90s-button.deny{background-color:#fb923c}.alert90s-dark .alert90s-button.confirm{background-color:#4ade80}.alert90s-dark .alert90s-checkbox-label .cb-box{fill:#1a1a24;stroke:#555}.alert90s-dark .alert90s-checkbox-label input[type=checkbox]:checked~.alert90s-cb-svg .cb-box{fill:#2a2a35}.alert90s-dark .alert90s-checkbox-label .cb-shadow{fill:#555}.alert90s-dark .alert90s-cb-text{color:#eaeaea}.alert90s-dark .alert90s-radio-label .radio-box{fill:#1a1a24;stroke:#555}.alert90s-dark .alert90s-radio-label input[type=radio]:checked~.alert90s-radio-svg .radio-box{fill:#2a2a35}.alert90s-dark .alert90s-radio-label .radio-shadow{fill:#555}.alert90s-dark .alert90s-radio-text{color:#eaeaea}.alert90s-theme-checkbox{display:none}.alert90s-theme-wrapper{cursor:pointer;display:inline-block;position:relative;transform:rotate(-1deg);transition:transform .1s}.alert90s-theme-wrapper:active{transform:rotate(0deg) scale(.98)}.alert90s-theme-track-shadow{fill:#000}.alert90s-theme-track-base{fill:#facc15;stroke:#000;stroke-width:6;stroke-linejoin:miter;transition:fill .5s cubic-bezier(.8,0,.2,1)}.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-track-base{fill:#1e1e26}.alert90s-theme-thumb-group{transform:translateX(0);transition:transform .5s cubic-bezier(.68,-.55,.265,1.55)}.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-thumb-group{transform:translateX(190px)}.alert90s-theme-thumb-shadow{fill:#000}.alert90s-theme-thumb-body{fill:#fff;stroke:#000;stroke-width:6;stroke-linejoin:miter;transition:fill .3s}.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-thumb-body{fill:#eaeaea}.alert90s-theme-icon-sun{opacity:1;transition:opacity 0s .25s}.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-icon-sun{opacity:0}.alert90s-theme-icon-moon{filter:drop-shadow(0 0 10px #00FFFF) drop-shadow(0 0 20px #00FFFF);opacity:0;transition:opacity 0s .25s}.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-icon-moon{opacity:1}.alert90s-theme-text-label{font-family:Impact,Arial Black,sans-serif;font-size:38px;letter-spacing:2px;pointer-events:none;user-select:none}.alert90s-theme-text-day{fill:#000;opacity:1;transition:opacity .3s ease}.alert90s-theme-text-night{fill:#0ff;opacity:0;transition:opacity .3s ease}.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-text-day{opacity:0}.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-text-night{opacity:1}.alert90s-theme-deco-accent{fill:#ff90e8;transition:fill .4s}.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-deco-accent{fill:#4ade80}');class t{static getOptions(){return this.currentOptions||{}}static getPopup(){return this.currentPopup||null}static getTimerLeft(){if(!this.timerEnd)return;const t=this.timerEnd-Date.now();return t>0?t:0}static isLoading(){const t=this.getPopup();if(!t)return!1;const e=t.querySelector(".alert90s-actions"),o=t.querySelector(".alert90s-loader");return e&&"none"===e.style.display||!!o}static showLoading(){const e=this.getPopup();if(e){const o=e.querySelector(".alert90s-actions");o&&(o.style.display="none");let a=e.querySelector(".alert90s-loader");if(!a){a=document.createElement("div"),a.className="alert90s-loader";const r=t.currentOptions&&t.currentOptions.loaderType||"hourglass";if("ascii"===r)a.innerHTML='<div class="alert90s-spinner ascii"></div>';else if("blinking"===r)a.innerHTML='<div class="alert90s-spinner blinking">LOADING<span class="cursor">_</span></div>';else if("progress"===r)a.innerHTML='<div class="alert90s-spinner progress"></div>';else if("segmented"===r){const t=[];for(let e=1;e<=10;e++){const o=5+29*(e-1);t.push(`<g class="a90s-seg-${e}"><rect class="a90s-fl-${e}" x="${o}" y="6" width="25" height="28" fill="#ff6b35"/><rect x="${o}" y="6" width="25" height="28" fill="url(#a90s-dither)"/><rect x="${o}" y="6" width="25" height="28" fill="none" stroke="#000" stroke-width="2"/></g>`)}const e=[];for(let t=0;t<=10;t++)e.push(`<text x="295" y="55" class="a90s-txt-${10*t}" text-anchor="end" font-size="14" font-weight="bold" fill="#000">${10*t}%</text>`);a.innerHTML=`<div class="alert90s-spinner segmented"><svg viewBox="0 0 300 60" width="300" height="60"><defs><pattern id="a90s-dither" width="4" height="4" patternUnits="userSpaceOnUse"><path d="M0,0 h2 v2 h-2 Z M2,2 h2 v2 h-2 Z" fill="#000" opacity="0.3"/></pattern></defs><rect x="0" y="0" width="300" height="40" fill="#fff" stroke="#000" stroke-width="3" rx="0"/>${t.join("")}${e.join("")}</svg></div>`}else a.innerHTML='<div class="alert90s-spinner hourglass">⏳</div>';o&&o.parentNode?o.parentNode.insertBefore(a,o):e.querySelector(".alert90s-body").appendChild(a)}}}static hideLoading(){const t=this.getPopup();if(t){const e=t.querySelector(".alert90s-actions");e&&(e.style.display="");const o=t.querySelector(".alert90s-loader");o&&o.remove()}}static showValidationMessage(t){const e=this.getPopup();if(e){let o=e.querySelector(".alert90s-validation-message");if(!o){o=document.createElement("div"),o.className="alert90s-validation-message";const t=e.querySelector(".alert90s-actions");t&&t.parentNode?t.parentNode.insertBefore(o,t):e.querySelector(".alert90s-body").appendChild(o)}o.innerHTML=t,o.style.display="block"}}static resetValidationMessage(){const t=this.getPopup();if(t){const e=t.querySelector(".alert90s-validation-message");e&&(e.style.display="none")}}static getToastContainer(t){const e=`alert90s-toast-container alert90s-toast-${t}`;let o=document.querySelector(`.${e.replace(/ /g,".")}`);return o||(o=document.createElement("div"),o.className=e,document.body.appendChild(o)),o}static fire(t={}){return this.show(t)}static show(e={}){return new Promise(o=>{"string"==typeof e&&(e={title:e}),this.currentOptions=e;const a={title:void 0!==e.title?e.title:"",text:e.message||e.text||"",html:e.html||"",icon:e.type||e.icon||"",iconHtml:e.iconHtml||"",showConfirmButton:!1!==e.showConfirmButton,showCancelButton:e.showCancelButton||!1,showDenyButton:e.showDenyButton||!1,showCloseButton:void 0===e.showCloseButton||e.showCloseButton,loaderType:e.loaderType||"hourglass",confirmButtonText:e.confirmText||e.confirmButtonText||"OK",cancelButtonText:e.cancelText||e.cancelButtonText||"Cancel",denyButtonText:e.denyText||e.denyButtonText||"No",confirmButtonColor:e.confirmButtonColor||"",cancelButtonColor:e.cancelButtonColor||"",denyButtonColor:e.denyButtonColor||"",background:e.background||"",color:e.color||"",titleColor:e.titleColor||"",iconColor:e.iconColor||"",confirmButtonAriaLabel:e.confirmButtonAriaLabel||"",cancelButtonAriaLabel:e.cancelButtonAriaLabel||"",denyButtonAriaLabel:e.denyButtonAriaLabel||"",focusConfirm:!1!==e.focusConfirm,footer:e.footer||"",imageUrl:e.imageUrl||"",imageWidth:e.imageWidth||null,imageHeight:e.imageHeight||null,imageAlt:e.imageAlt||"",input:e.input||null,inputPlaceholder:e.inputPlaceholder||"",inputValue:e.inputValue||"",inputOptions:e.inputOptions||{},inputAttributes:e.inputAttributes||{},showLoaderOnConfirm:e.showLoaderOnConfirm||!1,preConfirm:e.preConfirm||null,toast:e.toast||!1,draggable:e.draggable||!1,position:e.position||(e.toast?"top-end":"center"),allowOutsideClick:void 0===e.allowOutsideClick||e.allowOutsideClick,dir:e.dir||"auto",theme:e.theme||"light",showClass:e.showClass||{popup:"alert90s-pop-in"},hideClass:e.hideClass||{popup:"alert90s-fade-out"},timer:e.timer||null,timerProgressBar:e.timerProgressBar||!1,didOpen:e.didOpen||null,willClose:e.willClose||null};let r=null;a.toast||(r=document.createElement("div"),r.className=`alert90s-overlay alert90s-pos-${a.position}`,r.addEventListener("mousedown",t=>{if(t.target===r){("function"==typeof a.allowOutsideClick?a.allowOutsideClick():a.allowOutsideClick)&&b({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"backdrop"})}}));const s=document.createElement("div");s.className="alert90s-box",a.toast&&s.classList.add("alert90s-toast");let i=a.theme;"auto"===i&&(i=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"),"dark"===i&&s.classList.add("alert90s-dark"),"rtl"===document.dir||"rtl"===a.dir||a.position.includes("start")?s.setAttribute("dir","auto"===a.dir?document.dir||"ltr":a.dir):s.setAttribute("dir",a.dir),a.showClass.popup&&"alert90s-pop-in"!==a.showClass.popup&&(s.style.animation="none",s.className=`alert90s-box ${a.showClass.popup}`),a.background&&(s.style.backgroundColor=a.background),a.color&&(s.style.color=a.color),a.draggable&&s.classList.add("is-draggable"),a.toast||(this.currentPopup=s);const l=document.createElement("div");l.className="alert90s-body";const n=document.createElement("div");n.className="alert90s-header",a.draggable&&n.classList.add("draggable");let c="";if(a.showCloseButton&&(c='\n <button class="alert90s-close-btn" id="alert90s-close" aria-label="Close">\n <span>&#10005;</span>\n </button>\n '),n.innerHTML=`\n <div class="alert90s-header-left">\n <div class="alert90s-header-dot"></div>\n <div class="alert90s-header-dot"></div>\n <div class="alert90s-header-dot"></div>\n </div>\n <div class="alert90s-header-right">\n <span class="alert90s-header-title">SYS.REQ</span>\n ${c}\n </div>\n `,a.draggable){let t,e,o,a,r=!1;n.addEventListener("mousedown",i=>{if(i.target.closest("#alert90s-close"))return;r=!0,t=i.clientX,e=i.clientY;const l=s.getBoundingClientRect();s.style.transform="none",s.style.animation="none",o=l.left,a=l.top,s.style.left=o+"px",s.style.top=a+"px",s.style.margin="0",document.body.style.userSelect="none"}),document.addEventListener("mousemove",i=>{r&&(s.style.left=o+(i.clientX-t)+"px",s.style.top=a+(i.clientY-e)+"px")}),document.addEventListener("mouseup",()=>{r&&(r=!1,document.body.style.userSelect="")})}let d=null;if(a.timer&&a.timerProgressBar&&(d=document.createElement("div"),d.className="alert90s-progress-bar",d.style.animationDuration=`${a.timer}ms`,s.appendChild(d)),a.imageUrl){const t=document.createElement("div");t.className="alert90s-image-container";const e=document.createElement("img");e.src=a.imageUrl,a.imageAlt&&(e.alt=a.imageAlt);let o="";a.imageWidth&&(o+=`width: ${a.imageWidth}px; max-width: 100%; `),a.imageHeight&&(o+=`height: ${a.imageHeight}px; `),o&&t.setAttribute("style",o),t.appendChild(e),l.appendChild(t)}if(a.icon){const t=document.createElement("div"),e="error"===a.icon?"danger":a.icon;t.className=`alert90s-icon ${e}`;let o="";if(a.iconHtml?o=`<div class="alert90s-icon-custom">${a.iconHtml}</div>`:"warning"===a.icon?o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>':"danger"===a.icon||"error"===a.icon?o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>':"info"===a.icon?o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>':"success"===a.icon?o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>':"question"===a.icon&&(o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>'),t.innerHTML=o,a.iconColor&&(t.style.color=a.iconColor,t.style.borderColor=a.iconColor,!a.iconHtml)){const e=t.querySelector("svg");e&&(e.style.stroke=a.iconColor)}o&&l.appendChild(t)}const p=document.createElement("div");if(p.className="alert90s-content-wrapper",a.title){const t=document.createElement("h2");t.className="alert90s-title",t.innerHTML=a.title,a.titleColor&&(t.style.color=a.titleColor),p.appendChild(t)}if(a.html){const t=document.createElement("div");t.className="alert90s-html",t.innerHTML=a.html,a.color&&(t.style.color=a.color),p.appendChild(t)}else if(a.text){const t=document.createElement("p");t.className="alert90s-message",t.textContent=a.text,a.color&&(t.style.color=a.color),p.appendChild(t)}if((a.title||a.html||a.text)&&l.appendChild(p),a.toast&&a.showCloseButton){const t=document.createElement("button");t.className="alert90s-toast-close",t.innerHTML="<span>&#10005;</span>",t.onclick=()=>b({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"close"}),l.appendChild(t)}let f=null;if(a.input){const t=document.createElement("div");if(t.className="alert90s-input-container","select"===a.input){f=document.createElement("input"),f.type="hidden",f.value=a.inputValue||"";const e=document.createElement("div");e.className="alert90s-select-wrapper";const o="a90s-sel-"+Date.now(),r=document.createElement("input");r.type="checkbox",r.id=o,r.className="alert90s-select-toggle";const s=document.createElement("label");s.setAttribute("for",o),s.className="alert90s-select-box";const i=document.createElement("span");i.className="alert90s-select-text",i.textContent=a.inputPlaceholder||"-- Select --",s.appendChild(i);const l="http://www.w3.org/2000/svg",n=document.createElementNS(l,"svg");n.setAttribute("class","alert90s-select-arrow"),n.setAttribute("viewBox","0 0 24 24"),n.setAttribute("width","22"),n.setAttribute("height","22");const c=document.createElementNS(l,"path");c.setAttribute("d","M4 8 L12 16 L20 8"),c.setAttribute("fill","none"),c.setAttribute("stroke","#000"),c.setAttribute("stroke-width","4"),c.setAttribute("stroke-linecap","square"),c.setAttribute("stroke-linejoin","miter"),n.appendChild(c),s.appendChild(n);const d=document.createElement("div");d.className="alert90s-select-menu";for(const[t,e]of Object.entries(a.inputOptions)){const o=document.createElement("div");o.className="alert90s-select-item",o.textContent=e,o.dataset.value=t,t===a.inputValue&&(i.textContent=e),o.addEventListener("click",()=>{f.value=t,i.textContent=e,r.checked=!1,d.querySelectorAll(".alert90s-select-item").forEach(t=>t.classList.remove("selected")),o.classList.add("selected")}),d.appendChild(o)}e.appendChild(r),e.appendChild(s),e.appendChild(d),e.appendChild(f),t.appendChild(e)}else if("radio"===a.input){const e=document.createElement("div");e.className="alert90s-radio-group";const o="http://www.w3.org/2000/svg";for(const[t,r]of Object.entries(a.inputOptions)){const s=document.createElement("label");s.className="alert90s-radio-label";const i=document.createElement("input");i.type="radio",i.name="alert90s-radio",i.value=t,t===a.inputValue&&(i.checked=!0);const l=document.createElementNS(o,"svg");l.setAttribute("class","alert90s-radio-svg"),l.setAttribute("viewBox","0 0 100 100"),l.setAttribute("width","32"),l.setAttribute("height","32");const n=document.createElementNS(o,"circle");n.setAttribute("class","radio-shadow"),n.setAttribute("cx","54"),n.setAttribute("cy","54"),n.setAttribute("r","36"),n.setAttribute("fill","#000");const c=document.createElementNS(o,"circle");c.setAttribute("class","radio-box"),c.setAttribute("cx","46"),c.setAttribute("cy","46"),c.setAttribute("r","36"),c.setAttribute("fill","#e4e0d7"),c.setAttribute("stroke","#000"),c.setAttribute("stroke-width","8");const d=document.createElementNS(o,"circle");d.setAttribute("class","radio-dot"),d.setAttribute("cx","46"),d.setAttribute("cy","46"),d.setAttribute("r","18"),d.setAttribute("fill","#ff6b35"),d.setAttribute("stroke","#000"),d.setAttribute("stroke-width","6"),l.appendChild(n),l.appendChild(c),l.appendChild(d);const p=document.createElement("span");p.className="alert90s-radio-text",p.textContent=r,s.appendChild(i),s.appendChild(l),s.appendChild(p),e.appendChild(s)}f=e,t.appendChild(e)}else if("checkbox"===a.input||"toggle"===a.input){const e=document.createElement("label");if(e.className="toggle"===a.input?"alert90s-toggle-label":"alert90s-checkbox-label",f=document.createElement("input"),f.type="checkbox",f.checked=!!a.inputValue,"toggle"===a.input){const t=document.createElement("div");if(t.className="alert90s-toggle-slider",e.appendChild(f),e.appendChild(t),a.inputPlaceholder){const t=document.createElement("span");t.textContent=a.inputPlaceholder,e.appendChild(t)}}else{const t="http://www.w3.org/2000/svg",o=document.createElementNS(t,"svg");o.setAttribute("class","alert90s-cb-svg"),o.setAttribute("viewBox","0 0 100 100"),o.setAttribute("width","36"),o.setAttribute("height","36");const r=document.createElementNS(t,"rect");r.setAttribute("class","cb-shadow"),r.setAttribute("x","12"),r.setAttribute("y","12"),r.setAttribute("width","80"),r.setAttribute("height","80"),r.setAttribute("fill","#000000");const s=document.createElementNS(t,"rect");s.setAttribute("class","cb-box"),s.setAttribute("x","4"),s.setAttribute("y","4"),s.setAttribute("width","80"),s.setAttribute("height","80"),s.setAttribute("fill","#e4e0d7"),s.setAttribute("stroke","#000000"),s.setAttribute("stroke-width","8");const i=document.createElementNS(t,"path");i.setAttribute("class","cb-check"),i.setAttribute("d","M 22 48 L 40 68 L 82 20"),i.setAttribute("fill","none"),i.setAttribute("stroke","#ff6b35"),i.setAttribute("stroke-width","14"),i.setAttribute("stroke-linecap","square"),i.setAttribute("stroke-linejoin","miter"),o.appendChild(r),o.appendChild(s),o.appendChild(i);const l=document.createElement("span");l.className="alert90s-cb-text",l.textContent=a.inputPlaceholder||"Check me",e.appendChild(f),e.appendChild(o),e.appendChild(l)}t.appendChild(e)}else"textarea"===a.input?(f=document.createElement("textarea"),f.className="alert90s-input",a.inputPlaceholder&&(f.placeholder=a.inputPlaceholder),a.inputValue&&(f.value=a.inputValue),t.appendChild(f)):(f=document.createElement("input"),f.type=a.input,f.className="alert90s-input",a.inputPlaceholder&&(f.placeholder=a.inputPlaceholder),a.inputValue&&(f.value=a.inputValue),t.appendChild(f));if(a.inputAttributes&&f&&!["radio"].includes(a.input))for(const[t,e]of Object.entries(a.inputAttributes))f.setAttribute(t,e);l.appendChild(t)}const m=document.createElement("div");m.className="alert90s-actions";let h=null,u=null;const b=t=>{u&&clearTimeout(u),a.willClose&&a.willClose(),s.style.animation="none","alert90s-fade-out"===a.hideClass.popup?(s.style.animation="alert90s-fade-out 0.2s forwards",r&&(r.style.transition="opacity 0.2s",r.style.opacity="0")):s.className=`alert90s-box ${a.hideClass.popup}`,setTimeout(()=>{a.toast?s.parentNode&&s.parentNode.removeChild(s):r&&document.body.contains(r)&&document.body.removeChild(r),o(t)},200)},g=async()=>{let e=!0;if("radio"===a.input){const t=f.querySelector('input[type="radio"]:checked');e=t?t.value:null}else"checkbox"===a.input||"toggle"===a.input?e=f.checked:f&&(e=f.value);if(a.preConfirm){t.resetValidationMessage(),a.showLoaderOnConfirm&&t.showLoading();try{const o=await Promise.resolve(a.preConfirm(e));if(!1===o)return void t.hideLoading();void 0!==o&&o!==e&&(e=o);const r=s.querySelector(".alert90s-validation-message");if(r&&"block"===r.style.display)return void t.hideLoading()}catch(e){return t.showValidationMessage(`Request failed: ${e}`),void t.hideLoading()}}b({isConfirmed:!0,isDenied:!1,isDismissed:!1,value:e})};if(a.showCancelButton){const t=document.createElement("button");t.className="alert90s-button cancel",t.innerHTML=a.cancelButtonText,a.cancelButtonAriaLabel&&t.setAttribute("aria-label",a.cancelButtonAriaLabel),a.cancelButtonColor&&(t.style.backgroundColor=a.cancelButtonColor),t.onclick=()=>b({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"cancel"}),m.appendChild(t)}if(a.showDenyButton){const t=document.createElement("button");t.className="alert90s-button deny",t.innerHTML=a.denyButtonText,a.denyButtonAriaLabel&&t.setAttribute("aria-label",a.denyButtonAriaLabel),a.denyButtonColor&&(t.style.backgroundColor=a.denyButtonColor),t.onclick=()=>b({isConfirmed:!1,isDenied:!0,isDismissed:!1}),m.appendChild(t)}if(a.showConfirmButton){const t=document.createElement("button");t.className="alert90s-button confirm",t.innerHTML=a.confirmButtonText,a.confirmButtonAriaLabel&&t.setAttribute("aria-label",a.confirmButtonAriaLabel),a.confirmButtonColor&&(t.style.backgroundColor=a.confirmButtonColor),t.onclick=g,m.appendChild(t),h=t}if((a.showCancelButton||a.showDenyButton||a.showConfirmButton)&&l.appendChild(m),a.footer){const t=document.createElement("div");t.className="alert90s-footer",t.innerHTML=a.footer,l.appendChild(t)}if(s.appendChild(n),s.appendChild(l),a.toast){const e=t.getToastContainer(a.position);s.style.animation="alert90s-toast-slide-in 0.3s ease-out",e.appendChild(s)}else r.appendChild(s);if(a.showCloseButton&&!a.toast){const t=n.querySelector("#alert90s-close");t&&(t.onclick=()=>b({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"close"}))}a.toast||document.body.appendChild(r),a.focusConfirm&&h&&setTimeout(()=>{f?f.focus():h.focus()},50),a.didOpen&&setTimeout(()=>{a.didOpen()},0),a.timer&&(this.timerEnd=Date.now()+a.timer,u=setTimeout(()=>{b({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"timer"})},a.timer))})}static initTooltips(){this._tooltipsInitialized||(this._tooltipsInitialized=!0,this._tooltipEl=document.createElement("div"),this._tooltipEl.className="alert90s-tooltip",document.body.appendChild(this._tooltipEl),document.addEventListener("mouseover",this._handleTooltipMouseOver.bind(this)),document.addEventListener("mouseout",this._handleTooltipMouseOut.bind(this)),document.addEventListener("focusin",this._handleTooltipMouseOver.bind(this)),document.addEventListener("focusout",this._handleTooltipMouseOut.bind(this)))}static _handleTooltipMouseOver(t){const e=t.target.closest("[data-alert90s-tooltip]");if(!e)return;const o=e.getAttribute("data-alert90s-tooltip");if(!o)return;const a=e.getAttribute("data-alert90s-position")||"top",r=e.getAttribute("data-alert90s-color")||"yellow";this._tooltipEl.innerHTML=o,this._tooltipEl.className=`alert90s-tooltip pos-${a} c-${r} show`;const s=e.getBoundingClientRect(),i=this._tooltipEl.getBoundingClientRect(),l=10;let n=0,c=0;switch(a){case"top":n=s.top-i.height-l,c=s.left+s.width/2-i.width/2;break;case"bottom":n=s.bottom+l,c=s.left+s.width/2-i.width/2;break;case"left":n=s.top+s.height/2-i.height/2,c=s.left-i.width-l;break;case"right":n=s.top+s.height/2-i.height/2,c=s.right+l}c<l&&(c=l),n<l&&(n=l),c+i.width>window.innerWidth-l&&(c=window.innerWidth-i.width-l),this._tooltipEl.style.top=`${n+window.scrollY}px`,this._tooltipEl.style.left=`${c+window.scrollX}px`}static _handleTooltipMouseOut(t){const e=t.target.closest("[data-alert90s-tooltip]");e&&setTimeout(()=>{this._tooltipEl.matches(":hover")||e.matches(":hover")||e.contains(document.activeElement)||this._tooltipEl.classList.remove("show")},10)}static renderThemeToggle(t,e={}){const o=document.querySelector(t);if(!o)return null;const a=`\n <label class="alert90s-theme-wrapper" aria-label="Neo Brutalist Theme Switcher" style="width: ${e.width||"100%"}; height: auto; aspect-ratio: 5 / 2;">\n <input type="checkbox" class="alert90s-theme-checkbox" ${e.isDark||!1?"checked":""} />\n \n <svg viewBox="0 0 300 120" style="width: 100%; height: 100%; overflow: visible;">\n \x3c!-- HARD OFFSET SHADOW --\x3e\n <rect class="alert90s-theme-track-shadow" x="18" y="18" width="280" height="100" />\n \x3c!-- MAIN TRACK --\x3e\n <rect class="alert90s-theme-track-base" x="10" y="10" width="280" height="100" />\n\n \x3c!-- DECORATIVE 90S UI ELEMENTS --\x3e\n <g class="alert90s-theme-deco-elements" stroke="#000" stroke-width="2">\n <circle cx="25" cy="25" r="4" fill="#FFF" />\n <line x1="23" y1="23" x2="27" y2="27" />\n <circle cx="275" cy="25" r="4" fill="#FFF" />\n <line x1="273" y1="27" x2="277" y2="23" />\n <circle cx="25" cy="95" r="4" fill="#FFF" />\n <line x1="23" y1="95" x2="27" y2="95" />\n <circle cx="275" cy="95" r="4" fill="#FFF" />\n <line x1="275" y1="93" x2="275" y2="97" />\n \n <line x1="120" y1="20" x2="120" y2="35" stroke-width="3" />\n <line x1="128" y1="20" x2="128" y2="35" stroke-width="5" />\n <line x1="138" y1="20" x2="138" y2="35" stroke-width="2" />\n <line x1="145" y1="20" x2="145" y2="35" stroke-width="6" />\n </g>\n\n \x3c!-- DAY / NIGHT TEXT --\x3e\n <text class="alert90s-theme-text-label alert90s-theme-text-night" x="40" y="75">NIGHT</text>\n <text class="alert90s-theme-text-label alert90s-theme-text-day" x="190" y="75">DAY</text>\n\n \x3c!-- NEON DECORATIVE STICKER --\x3e\n <rect class="alert90s-theme-deco-accent" x="120" y="85" width="60" height="15" stroke="#000" stroke-width="3" />\n <text x="125" y="96" font-size="10" font-weight="bold" fill="#000" font-family="sans-serif">SYS.UI</text>\n\n \x3c!-- SLIDING THUMB GROUP --\x3e\n <g class="alert90s-theme-thumb-group">\n \x3c!-- Thumb Shadow --\x3e\n <rect class="alert90s-theme-thumb-shadow" x="23" y="23" width="80" height="80" />\n \x3c!-- Thumb Body --\x3e\n <rect class="alert90s-theme-thumb-body" x="15" y="15" width="80" height="80" />\n \n \x3c!-- SUN ICON --\x3e\n <g class="alert90s-theme-icon-sun">\n <rect x="40" y="40" width="30" height="30" fill="#facc15" stroke="#000" stroke-width="4" />\n <rect x="48" y="48" width="14" height="14" fill="#ef4444" stroke="#000" stroke-width="2" />\n <rect x="50" y="20" width="10" height="10" fill="#ef4444" stroke="#000" stroke-width="4" />\n <rect x="50" y="80" width="10" height="10" fill="#ef4444" stroke="#000" stroke-width="4" />\n <rect x="20" y="50" width="10" height="10" fill="#ef4444" stroke="#000" stroke-width="4" />\n <rect x="80" y="50" width="10" height="10" fill="#ef4444" stroke="#000" stroke-width="4" />\n <rect x="25" y="25" width="10" height="10" fill="#facc15" stroke="#000" stroke-width="4" />\n <rect x="75" y="25" width="10" height="10" fill="#facc15" stroke="#000" stroke-width="4" />\n <rect x="25" y="75" width="10" height="10" fill="#facc15" stroke="#000" stroke-width="4" />\n <rect x="75" y="75" width="10" height="10" fill="#facc15" stroke="#000" stroke-width="4" />\n </g>\n\n \x3c!-- MOON ICON --\x3e\n <g class="alert90s-theme-icon-moon">\n <path fill="#000" transform="translate(3, 3)" d="M 60 30 v -5 h 10 v 5 h 5 v 10 h 5 v 30 h -5 v 10 h -5 v 5 h -10 v -5 h -5 v -5 h 5 v -5 h 5 v -20 h -5 v -5 h -5 v -10 h 5 v -5 Z" />\n <path fill="#00FFFF" stroke="#000" stroke-width="3" stroke-linejoin="miter" d="M 60 30 v -5 h 10 v 5 h 5 v 10 h 5 v 30 h -5 v 10 h -5 v 5 h -10 v -5 h -5 v -5 h 5 v -5 h 5 v -20 h -5 v -5 h -5 v -10 h 5 v -5 Z" />\n <rect x="70" y="40" width="5" height="5" fill="#FFFFFF" opacity="0.8" />\n <rect x="65" y="70" width="5" height="5" fill="#FFFFFF" opacity="0.8" />\n </g>\n </g>\n </svg>\n </label>\n `;o.innerHTML=a;return o.querySelector(".alert90s-theme-checkbox").addEventListener("change",t=>{"function"==typeof e.onChange&&e.onChange(t.target.checked)}),o}}return"undefined"!=typeof window&&(window.Alert90s=t,document.addEventListener("DOMContentLoaded",()=>{t.initTooltips()})),t});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "alert90s",
3
- "version": "1.0.13",
3
+ "version": "1.0.14",
4
4
  "description": "Neo Brutalism 90s style JS alert library",
5
5
  "main": "dist/alert90s.min.js",
6
6
  "files": [
package/src/index.js CHANGED
@@ -428,27 +428,75 @@ class Alert90s {
428
428
  inputContainer.className = 'alert90s-input-container';
429
429
 
430
430
  if (config.input === 'select') {
431
- inputEl = document.createElement('select');
432
- inputEl.className = 'alert90s-input alert90s-select';
433
- if (config.inputPlaceholder) {
434
- const defaultOpt = document.createElement('option');
435
- defaultOpt.value = '';
436
- defaultOpt.textContent = config.inputPlaceholder;
437
- defaultOpt.disabled = true;
438
- defaultOpt.selected = true;
439
- inputEl.appendChild(defaultOpt);
440
- }
431
+ // Hidden input to store selected value
432
+ inputEl = document.createElement('input');
433
+ inputEl.type = 'hidden';
434
+ inputEl.value = config.inputValue || '';
435
+
436
+ const wrapper = document.createElement('div');
437
+ wrapper.className = 'alert90s-select-wrapper';
438
+
439
+ const toggleId = 'a90s-sel-' + Date.now();
440
+ const toggle = document.createElement('input');
441
+ toggle.type = 'checkbox';
442
+ toggle.id = toggleId;
443
+ toggle.className = 'alert90s-select-toggle';
444
+
445
+ const box = document.createElement('label');
446
+ box.setAttribute('for', toggleId);
447
+ box.className = 'alert90s-select-box';
448
+ const textSpan = document.createElement('span');
449
+ textSpan.className = 'alert90s-select-text';
450
+ textSpan.textContent = config.inputPlaceholder || '-- Select --';
451
+ box.appendChild(textSpan);
452
+ // SVG Arrow
453
+ const svgNS = 'http://www.w3.org/2000/svg';
454
+ const arrow = document.createElementNS(svgNS, 'svg');
455
+ arrow.setAttribute('class', 'alert90s-select-arrow');
456
+ arrow.setAttribute('viewBox', '0 0 24 24');
457
+ arrow.setAttribute('width', '22');
458
+ arrow.setAttribute('height', '22');
459
+ const arrowPath = document.createElementNS(svgNS, 'path');
460
+ arrowPath.setAttribute('d', 'M4 8 L12 16 L20 8');
461
+ arrowPath.setAttribute('fill', 'none');
462
+ arrowPath.setAttribute('stroke', '#000');
463
+ arrowPath.setAttribute('stroke-width', '4');
464
+ arrowPath.setAttribute('stroke-linecap', 'square');
465
+ arrowPath.setAttribute('stroke-linejoin', 'miter');
466
+ arrow.appendChild(arrowPath);
467
+ box.appendChild(arrow);
468
+
469
+ const menu = document.createElement('div');
470
+ menu.className = 'alert90s-select-menu';
471
+
441
472
  for (const [val, text] of Object.entries(config.inputOptions)) {
442
- const opt = document.createElement('option');
443
- opt.value = val;
444
- opt.textContent = text;
445
- if (val === config.inputValue) opt.selected = true;
446
- inputEl.appendChild(opt);
473
+ const item = document.createElement('div');
474
+ item.className = 'alert90s-select-item';
475
+ item.textContent = text;
476
+ item.dataset.value = val;
477
+ if (val === config.inputValue) {
478
+ textSpan.textContent = text;
479
+ }
480
+ item.addEventListener('click', () => {
481
+ inputEl.value = val;
482
+ textSpan.textContent = text;
483
+ toggle.checked = false;
484
+ // Highlight selected
485
+ menu.querySelectorAll('.alert90s-select-item').forEach(i => i.classList.remove('selected'));
486
+ item.classList.add('selected');
487
+ });
488
+ menu.appendChild(item);
447
489
  }
448
- inputContainer.appendChild(inputEl);
490
+
491
+ wrapper.appendChild(toggle);
492
+ wrapper.appendChild(box);
493
+ wrapper.appendChild(menu);
494
+ wrapper.appendChild(inputEl);
495
+ inputContainer.appendChild(wrapper);
449
496
  } else if (config.input === 'radio') {
450
497
  const radioGroup = document.createElement('div');
451
498
  radioGroup.className = 'alert90s-radio-group';
499
+ const svgNS = 'http://www.w3.org/2000/svg';
452
500
  for (const [val, text] of Object.entries(config.inputOptions)) {
453
501
  const label = document.createElement('label');
454
502
  label.className = 'alert90s-radio-label';
@@ -457,13 +505,36 @@ class Alert90s {
457
505
  radio.name = 'alert90s-radio';
458
506
  radio.value = val;
459
507
  if (val === config.inputValue) radio.checked = true;
508
+ // SVG Brutalist Radio
509
+ const svg = document.createElementNS(svgNS, 'svg');
510
+ svg.setAttribute('class', 'alert90s-radio-svg');
511
+ svg.setAttribute('viewBox', '0 0 100 100');
512
+ svg.setAttribute('width', '32');
513
+ svg.setAttribute('height', '32');
514
+ const shadow = document.createElementNS(svgNS, 'circle');
515
+ shadow.setAttribute('class', 'radio-shadow');
516
+ shadow.setAttribute('cx', '54'); shadow.setAttribute('cy', '54');
517
+ shadow.setAttribute('r', '36'); shadow.setAttribute('fill', '#000');
518
+ const box = document.createElementNS(svgNS, 'circle');
519
+ box.setAttribute('class', 'radio-box');
520
+ box.setAttribute('cx', '46'); box.setAttribute('cy', '46');
521
+ box.setAttribute('r', '36'); box.setAttribute('fill', '#e4e0d7');
522
+ box.setAttribute('stroke', '#000'); box.setAttribute('stroke-width', '8');
523
+ const dot = document.createElementNS(svgNS, 'circle');
524
+ dot.setAttribute('class', 'radio-dot');
525
+ dot.setAttribute('cx', '46'); dot.setAttribute('cy', '46');
526
+ dot.setAttribute('r', '18'); dot.setAttribute('fill', '#ff6b35');
527
+ dot.setAttribute('stroke', '#000'); dot.setAttribute('stroke-width', '6');
528
+ svg.appendChild(shadow); svg.appendChild(box); svg.appendChild(dot);
460
529
  const span = document.createElement('span');
530
+ span.className = 'alert90s-radio-text';
461
531
  span.textContent = text;
462
532
  label.appendChild(radio);
533
+ label.appendChild(svg);
463
534
  label.appendChild(span);
464
535
  radioGroup.appendChild(label);
465
536
  }
466
- inputEl = radioGroup; // Parent serves as reference
537
+ inputEl = radioGroup;
467
538
  inputContainer.appendChild(radioGroup);
468
539
  } else if (config.input === 'checkbox' || config.input === 'toggle') {
469
540
  const label = document.createElement('label');
package/src/styles.css CHANGED
@@ -231,17 +231,88 @@ textarea.alert90s-input {
231
231
  min-height: 100px;
232
232
  }
233
233
 
234
- /* Select */
235
- select.alert90s-select {
234
+ /* Select/Dropdown (SVG Brutalist) */
235
+ .alert90s-select-wrapper {
236
+ position: relative;
237
+ width: 100%;
238
+ user-select: none;
239
+ z-index: 10;
240
+ }
241
+ .alert90s-select-toggle { display: none; }
242
+ .alert90s-select-box {
243
+ display: flex;
244
+ justify-content: space-between;
245
+ align-items: center;
246
+ background-color: #e4e0d7;
247
+ border: 4px solid #000;
248
+ padding: 0.75rem 1rem;
249
+ font-weight: bold;
250
+ font-size: 1rem;
251
+ color: #000;
236
252
  cursor: pointer;
237
- appearance: none;
238
- background-image: linear-gradient(45deg, transparent 50%, #000 50%), linear-gradient(135deg, #000 50%, transparent 50%);
239
- background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px);
240
- background-size: 5px 5px, 5px 5px;
241
- background-repeat: no-repeat;
253
+ box-shadow: 4px 4px 0px #000;
254
+ transition: all 0.1s ease;
255
+ }
256
+ .alert90s-select-box:active {
257
+ transform: translate(3px, 3px);
258
+ box-shadow: 1px 1px 0px #000;
259
+ }
260
+ .alert90s-select-arrow {
261
+ transition: transform 0.2s steps(3, end);
262
+ flex-shrink: 0;
263
+ }
264
+ .alert90s-select-toggle:checked ~ .alert90s-select-box {
265
+ background-color: #ff6b35;
266
+ color: #fff;
267
+ }
268
+ .alert90s-select-toggle:checked ~ .alert90s-select-box .alert90s-select-arrow path {
269
+ stroke: #fff;
270
+ }
271
+ .alert90s-select-toggle:checked ~ .alert90s-select-box .alert90s-select-arrow {
272
+ transform: rotate(180deg);
273
+ }
274
+ .alert90s-select-menu {
275
+ position: absolute;
276
+ top: 100%;
277
+ left: 0;
278
+ right: 0;
279
+ margin-top: 8px;
280
+ background-color: #e4e0d7;
281
+ border: 4px solid #000;
282
+ box-shadow: 4px 4px 0px #000;
283
+ display: flex;
284
+ flex-direction: column;
285
+ opacity: 0;
286
+ visibility: hidden;
287
+ transform: translateY(-15px);
288
+ transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s ease-out;
289
+ z-index: 10;
290
+ }
291
+ .alert90s-select-toggle:checked ~ .alert90s-select-menu {
292
+ opacity: 1;
293
+ visibility: visible;
294
+ transform: translateY(0);
295
+ }
296
+ .alert90s-select-item {
297
+ padding: 0.75rem 1rem;
298
+ font-weight: bold;
299
+ font-size: 1rem;
300
+ border-bottom: 4px solid #000;
301
+ color: #000;
302
+ cursor: pointer;
303
+ transition: background-color 0s, color 0s;
304
+ }
305
+ .alert90s-select-item:last-child { border-bottom: none; }
306
+ .alert90s-select-item:hover {
307
+ background-color: #000;
308
+ color: #ff6b35;
309
+ }
310
+ .alert90s-select-item.selected {
311
+ background-color: #ff6b35;
312
+ color: #fff;
242
313
  }
243
314
 
244
- /* Radio Group */
315
+ /* Radio Group (SVG Brutalist) */
245
316
  .alert90s-radio-group {
246
317
  display: flex;
247
318
  flex-direction: column;
@@ -250,27 +321,59 @@ select.alert90s-select {
250
321
  width: 100%;
251
322
  }
252
323
  .alert90s-radio-label {
253
- display: flex;
324
+ display: inline-flex;
254
325
  align-items: center;
255
326
  gap: 0.75rem;
256
- font-weight: bold;
257
327
  cursor: pointer;
328
+ font-weight: bold;
258
329
  font-size: 1rem;
330
+ user-select: none;
331
+ position: relative;
259
332
  }
260
333
  .alert90s-radio-label input[type="radio"] {
261
- appearance: none;
262
- width: 1.25rem;
263
- height: 1.25rem;
264
- border: 4px solid #000;
265
- border-radius: 50%;
266
- margin: 0;
334
+ position: absolute;
335
+ opacity: 0;
267
336
  cursor: pointer;
268
- position: relative;
269
- background-color: #f8fafc;
337
+ height: 0;
338
+ width: 0;
270
339
  }
271
- .alert90s-radio-label input[type="radio"]:checked {
272
- background-color: #000;
273
- box-shadow: inset 0 0 0 4px #fff;
340
+ .alert90s-radio-svg {
341
+ overflow: visible;
342
+ transition: transform 0.1s ease;
343
+ }
344
+ .alert90s-radio-label:hover .alert90s-radio-svg {
345
+ transform: translate(-2px, -2px);
346
+ }
347
+ .alert90s-radio-label:active .alert90s-radio-svg {
348
+ transform: translate(2px, 2px);
349
+ }
350
+ .radio-box {
351
+ transition: fill 0.1s ease;
352
+ }
353
+ .alert90s-radio-label input[type="radio"]:checked ~ .alert90s-radio-svg .radio-box {
354
+ fill: #ffffff;
355
+ }
356
+ .radio-dot {
357
+ transform-origin: 50% 50%;
358
+ transform: scale(0) rotate(-45deg);
359
+ opacity: 0;
360
+ }
361
+ .alert90s-radio-label input[type="radio"]:checked ~ .alert90s-radio-svg .radio-dot {
362
+ opacity: 1;
363
+ transform: scale(1) rotate(0deg);
364
+ animation: alert90s-radio-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
365
+ }
366
+ @keyframes alert90s-radio-pop {
367
+ 0% { transform: scale(0) rotate(-45deg); fill: #fff; }
368
+ 50% { transform: scale(1.3) rotate(15deg); fill: #fff; }
369
+ 100% { transform: scale(1) rotate(0deg); fill: #ff6b35; }
370
+ }
371
+ .alert90s-radio-text {
372
+ transition: color 0.2s;
373
+ }
374
+ .alert90s-radio-label input[type="radio"]:checked ~ .alert90s-radio-text {
375
+ animation: alert90s-cb-bump 0.2s ease-out forwards;
376
+ color: #ff6b35;
274
377
  }
275
378
 
276
379
  /* Checkbox (SVG Brutalist) */
@@ -910,12 +1013,33 @@ select.alert90s-select {
910
1013
  .alert90s-dark .alert90s-html a {
911
1014
  color: #60a5fa;
912
1015
  }
913
- .alert90s-dark .alert90s-input, .alert90s-dark select.alert90s-select {
1016
+ .alert90s-dark .alert90s-input {
914
1017
  background-color: #1a1a24;
915
1018
  color: #fff;
916
1019
  border-color: #000;
917
1020
  box-shadow: inset 4px 4px 0 0 rgba(0,0,0,0.5);
918
1021
  }
1022
+ .alert90s-dark .alert90s-select-box {
1023
+ background-color: #1a1a24;
1024
+ color: #eaeaea;
1025
+ border-color: #555;
1026
+ box-shadow: 4px 4px 0px #555;
1027
+ }
1028
+ .alert90s-dark .alert90s-select-box .alert90s-select-arrow path { stroke: #eaeaea; }
1029
+ .alert90s-dark .alert90s-select-toggle:checked ~ .alert90s-select-box { background-color: #ff6b35; color: #fff; }
1030
+ .alert90s-dark .alert90s-select-menu {
1031
+ background-color: #1a1a24;
1032
+ border-color: #555;
1033
+ box-shadow: 4px 4px 0px #555;
1034
+ }
1035
+ .alert90s-dark .alert90s-select-item {
1036
+ color: #eaeaea;
1037
+ border-bottom-color: #555;
1038
+ }
1039
+ .alert90s-dark .alert90s-select-item:hover {
1040
+ background-color: #555;
1041
+ color: #ff6b35;
1042
+ }
919
1043
  .alert90s-dark .alert90s-input:focus {
920
1044
  border-color: #00FFFF;
921
1045
  }
@@ -930,8 +1054,10 @@ select.alert90s-select {
930
1054
  .alert90s-dark .alert90s-checkbox-label input[type="checkbox"]:checked ~ .alert90s-cb-svg .cb-box { fill: #2a2a35; }
931
1055
  .alert90s-dark .alert90s-checkbox-label .cb-shadow { fill: #555; }
932
1056
  .alert90s-dark .alert90s-cb-text { color: #eaeaea; }
933
- .alert90s-dark .alert90s-radio-label input[type="radio"] { background-color: #1a1a24; }
934
- .alert90s-dark .alert90s-radio-label input[type="radio"]:checked { background-color: #00FFFF; box-shadow: inset 0 0 0 4px #000; }
1057
+ .alert90s-dark .alert90s-radio-label .radio-box { fill: #1a1a24; stroke: #555; }
1058
+ .alert90s-dark .alert90s-radio-label input[type="radio"]:checked ~ .alert90s-radio-svg .radio-box { fill: #2a2a35; }
1059
+ .alert90s-dark .alert90s-radio-label .radio-shadow { fill: #555; }
1060
+ .alert90s-dark .alert90s-radio-text { color: #eaeaea; }
935
1061
 
936
1062
  /* =======================================
937
1063
  THEME TOGGLE COMPONENT (.alert90s-theme-wrapper)