@acecss/core 1.0.4 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -0
- package/dist/ace-datepicker.js +1 -1
- package/dist/ace-datepicker.min.js +1 -1
- package/dist/ace-hero.js +115 -0
- package/dist/ace-hero.min.js +2 -0
- package/dist/ace-select.js +1 -1
- package/dist/ace-select.min.js +1 -1
- package/dist/ace.css +213 -1
- package/dist/ace.min.css +2 -2
- package/package.json +3 -1
package/README.md
CHANGED
|
@@ -19,6 +19,7 @@ import '@acecss/core' // the stylesheet (dist/ace.css)
|
|
|
19
19
|
// Optional, browser-side behaviour:
|
|
20
20
|
import '@acecss/core/datepicker' // date picker + pick-up → return range
|
|
21
21
|
import '@acecss/core/select' // dropdown for <select data-ace-select>
|
|
22
|
+
import '@acecss/core/hero' // hero button effects (sparkles, particles)
|
|
22
23
|
```
|
|
23
24
|
|
|
24
25
|
Nuxt: `css: ['@acecss/core']` in `nuxt.config.ts`.
|
|
@@ -30,6 +31,7 @@ Plain CSS: `@import '@acecss/core/ace.css';`
|
|
|
30
31
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@acecss/core@1/dist/ace.min.css">
|
|
31
32
|
<script src="https://cdn.jsdelivr.net/npm/@acecss/core@1/dist/ace-datepicker.min.js" defer></script>
|
|
32
33
|
<script src="https://cdn.jsdelivr.net/npm/@acecss/core@1/dist/ace-select.min.js" defer></script>
|
|
34
|
+
<script src="https://cdn.jsdelivr.net/npm/@acecss/core@1/dist/ace-hero.min.js" defer></script>
|
|
33
35
|
```
|
|
34
36
|
|
|
35
37
|
Pinned links with SRI hashes: https://acecss.dev/#install
|
|
@@ -54,6 +56,9 @@ Pinned links with SRI hashes: https://acecss.dev/#install
|
|
|
54
56
|
data-start-name="pickup_date" data-end-name="return_date" data-min="today"></div>
|
|
55
57
|
|
|
56
58
|
<span class="ace-badge ace-badge--success">Paid</span>
|
|
59
|
+
|
|
60
|
+
<!-- Landing-page call to action (one per page) -->
|
|
61
|
+
<a class="ace-hero-btn" href="/signup">Get started</a>
|
|
57
62
|
```
|
|
58
63
|
|
|
59
64
|
Every component, with copy-paste code and usage rules: **https://acecss.dev**
|
|
@@ -72,6 +77,7 @@ Every component, with copy-paste code and usage rules: **https://acecss.dev**
|
|
|
72
77
|
| `dist/ace.css`, `dist/ace.min.css` | All components (required) |
|
|
73
78
|
| `dist/ace-datepicker.js`, `.min.js` | Date picker and range picker (optional) |
|
|
74
79
|
| `dist/ace-select.js`, `.min.js` | Dropdown (optional) |
|
|
80
|
+
| `dist/ace-hero.js`, `.min.js` | Hero button effects (optional) |
|
|
75
81
|
|
|
76
82
|
## Credits & license
|
|
77
83
|
|
package/dist/ace-datepicker.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/* GENERATED by build.py from the PRC kit — do not edit by hand. */
|
|
2
2
|
/* ═══════════════════════════════════════════════════════════════════
|
|
3
|
-
ACECSS DATE PICKER — v1.0
|
|
3
|
+
ACECSS DATE PICKER — v1.1.0 · MIT License · (c) 2026 Kosowwwa LLC
|
|
4
4
|
Dependency-free single-date and range picker. Styles live in ace.css (section 8).
|
|
5
5
|
|
|
6
6
|
SINGLE DATE
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
/*! AceCSS v1.0
|
|
1
|
+
/*! AceCSS v1.1.0 | MIT License | https://acecss.dev */
|
|
2
2
|
(function(){"use strict";if(typeof window>"u"||typeof document>"u")return;var E={cal:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>',prev:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 18 9 12 15 6"/></svg>',next:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg>',down:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg>',check:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>',clock:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>'};function N(a){return String(a).padStart(2,"0")}function C(a){return a.getFullYear()+"-"+N(a.getMonth()+1)+"-"+N(a.getDate())}function A(a){var e=/^(\d{4})-(\d{2})-(\d{2})/.exec(a||"");return e?new Date(+e[1],+e[2]-1,+e[3]):null}function M(a){var e=/^(\d{4})-(\d{2})-(\d{2})/.exec(a||"");return e?e[3]+"/"+e[2]+"/"+e[1]:""}function O(a){return a==="today"?C(new Date):a||""}function y(a){return String(a).replace(/[&<>"']/g,function(e){return{"&":"&","<":"<",">":">",'"':""","'":"'"}[e]})}function K(a){var e=a.replace(/[^\d]/g,"");if(/^[3-9]/.test(e)&&(e="0"+e),e=e.slice(0,4),e.length>=2){var s=Math.min(parseInt(e.slice(0,2),10),23);e=N(s)+e.slice(2)}if(e.length>=4){var n=Math.min(parseInt(e.slice(2,4),10),59);e=e.slice(0,2)+N(n)}return e.length>=3&&(e=e.slice(0,2)+":"+e.slice(2)),e}function Z(a){if(!a)return"";var e=a.replace(/[^\d]/g,""),s=a;return e.length===1?s="0"+e+":00":e.length===2?s=e+":00":e.length===3?s="0"+e.slice(0,1)+":"+e.slice(1):e.length===4&&(s=e.slice(0,2)+":"+e.slice(2)),K(s)}function _(a){for(var e=[],s=0;s<7;s++)e.push(new Date(2024,0,7+s).toLocaleDateString(a,{weekday:"short"}).slice(0,2));return e}function R(a,e){for(var s=new Date(a,e,1).getDay(),n=new Date(a,e+1,0).getDate(),t=[],l=0;l<42;l++){var p=new Date(a,e,1-s+l);if(t.push({date:p.getDate(),month:p.getMonth(),year:p.getFullYear(),iso:C(p),current:p.getMonth()===e}),l>=s+n-1&&(l+1)%7===0)break}return t}function q(a,e,s){var n=document.createElement("input");return n.type="hidden",e&&(n.name=e),n.value=s||"",a.appendChild(n),n}function W(a,e){a.dispatchEvent(new CustomEvent("ace:change",{bubbles:!0,detail:e}))}function z(a,e){var s=new Date(a.viewYear,a.viewMonth,1).toLocaleDateString(a.locale,{month:"long",year:"numeric"}),n="";if(e.yearPicker){var t=new Date(a.viewYear,a.viewMonth,1).toLocaleDateString(a.locale,{month:"long"});if(n+='<div class="ace-dp-head"><span class="ace-dp-title">'+y(t)+'</span><div class="ace-dp-year"><button type="button" class="ace-btn ace-btn--secondary ace-dp-yearbtn" data-act="years" aria-haspopup="listbox" aria-expanded="'+!!a.yearsOpen+'">'+a.viewYear+E.down+"</button>",a.yearsOpen){n+='<div class="ace-dp-years" role="listbox">';for(var l=a.minYear;l<=a.maxYear;l++){var p=l===a.viewYear;n+='<button type="button" role="option" data-year="'+l+'" aria-selected="'+p+'">'+(p?E.check:'<span class="ace-dp-check"></span>')+l+"</button>"}n+="</div>"}n+="</div></div>"}return n+='<div class="ace-dp-nav"><button type="button" class="ace-btn ace-btn--secondary ace-btn--icon ace-dp-navbtn" data-act="prev" aria-label="Previous month">'+E.prev+'</button><span class="ace-dp-month" aria-live="polite">'+y(s)+'</span><button type="button" class="ace-btn ace-btn--secondary ace-btn--icon ace-dp-navbtn" data-act="next" aria-label="Next month">'+E.next+"</button></div>",n+='<div class="ace-dp-weekdays">'+_(a.locale).map(function(h){return"<div>"+y(h)+"</div>"}).join("")+"</div>",n+='<div class="ace-dp-grid" role="grid">'+e.cells.map(e.cellHTML).join("")+"</div>",n}function G(a,e,s){var n=A(a.iso).toLocaleDateString(void 0,{day:"numeric",month:"long",year:"numeric"});return'<div class="ace-dp-cell"'+(s||"")+'><button type="button" class="ace-dp-day" data-iso="'+a.iso+'" aria-label="'+y(n)+'"'+e+">"+a.date+"</button></div>"}function $(a,e){var s=new Date(a.viewYear,a.viewMonth+e,1);a.viewYear=s.getFullYear(),a.viewMonth=s.getMonth()}function ee(a){var e=a.dataset,s=C(new Date),n={value:e.value||"",min:O(e.min),max:O(e.max),locale:e.locale||document.documentElement.lang||void 0,open:!1,yearsOpen:!1},t=new Date().getFullYear();n.minYear=n.min?+n.min.slice(0,4):t-20,n.maxYear=n.max?+n.max.slice(0,4):t+10,a.innerHTML="";var l=document.createElement("div");l.className="ace-input-group ace-date-field"+(e.invalid!=null?" is-invalid":"")+(e.disabled!=null?" is-disabled":""),l.innerHTML='<input type="text" inputmode="numeric" autocomplete="off"'+(e.id?' id="'+y(e.id)+'"':"")+' placeholder="'+y(e.placeholder||"DD/MM/YYYY")+'"'+(e.invalid!=null?' aria-invalid="true"':"")+(e.disabled!=null?" disabled":"")+'><button type="button" class="ace-date-toggle" aria-label="Choose date" aria-haspopup="dialog" aria-expanded="false"'+(e.disabled!=null?" disabled":"")+">"+E.cal+"</button>",a.appendChild(l);var p=l.querySelector("input"),h=l.querySelector(".ace-date-toggle"),D=q(a,e.name,n.value);p.value=M(n.value);var c=null;function u(o,i){n.value=o||"",D.value=n.value,p.value=M(n.value),i||(W(a,{value:n.value}),D.dispatchEvent(new Event("change",{bubbles:!0})))}function k(){var o=p.value.trim();if(!o){n.value&&u("");return}var i=/^(\d{1,2})[./-](\d{1,2})[./-](\d{4})$/.exec(o)||/^(\d{4})-(\d{1,2})-(\d{1,2})$/.exec(o);if(!i){p.value=M(n.value);return}var m,b,w;i[1].length===4?(m=+i[1],b=+i[2],w=+i[3]):(w=+i[1],b=+i[2],m=+i[3]);var j=new Date(m,b-1,w);if(b<1||b>12||j.getDate()!==w){p.value=M(n.value);return}var r=C(j);if(n.min&&r<n.min||n.max&&r>n.max){p.value=M(n.value);return}r!==n.value?u(r):p.value=M(r)}function Y(){if(c){var o=R(n.viewYear,n.viewMonth);c.innerHTML=z(n,{yearPicker:!0,cells:o,cellHTML:function(i){var m=n.min&&i.iso<n.min||n.max&&i.iso>n.max,b=i.iso===n.value;return G(i,(b?' data-selected aria-pressed="true"':' aria-pressed="false"')+(i.iso===s?' data-today aria-current="date"':"")+(i.current?"":" data-outside")+(m?" disabled":""))}})}}function x(){if(c){var o=l.getBoundingClientRect(),i=c.offsetWidth,m=c.offsetHeight,b=o.bottom+8;b+m>window.innerHeight-8&&(b=Math.max(8,o.top-m-8));var w=o.left;w+i>window.innerWidth-8&&(w=Math.max(8,window.innerWidth-i-8)),c.style.top=b+"px",c.style.left=w+"px"}}function L(){if(!(n.open||e.disabled!=null)){var o=A(n.value)||new Date;n.viewYear=o.getFullYear(),n.viewMonth=o.getMonth(),n.open=!0,n.yearsOpen=!1,c=document.createElement("div"),c.className="ace-dp",c.setAttribute("role","dialog"),c.setAttribute("aria-label","Choose date"),document.body.appendChild(c),Y(),x(),h.setAttribute("aria-expanded","true");var i=c.querySelector(".ace-dp-day[data-selected]")||c.querySelector(".ace-dp-day[data-today]");i&&!i.disabled&&i.focus({preventScroll:!0}),c.addEventListener("click",T),c.addEventListener("keydown",P),document.addEventListener("mousedown",H),window.addEventListener("scroll",x,!0),window.addEventListener("resize",x)}}function S(o){n.open&&(n.open=!1,c.remove(),c=null,h.setAttribute("aria-expanded","false"),document.removeEventListener("mousedown",H),window.removeEventListener("scroll",x,!0),window.removeEventListener("resize",x),o&&h.focus())}function T(o){var i=o.target.closest("button");if(i)if(i.dataset.act==="prev"||i.dataset.act==="next")$(n,i.dataset.act==="prev"?-1:1),Y(),c.querySelector('[data-act="'+i.dataset.act+'"]').focus();else if(i.dataset.act==="years"){n.yearsOpen=!n.yearsOpen,Y();var m=c.querySelector('.ace-dp-years [aria-selected="true"]');m&&m.scrollIntoView({block:"center"})}else i.dataset.year?(n.viewYear=+i.dataset.year,n.yearsOpen=!1,Y()):i.dataset.iso&&!i.disabled&&(u(i.dataset.iso),S(!0))}function P(o){o.key==="Escape"&&(o.preventDefault(),S(!0))}function H(o){!a.contains(o.target)&&c&&!c.contains(o.target)&&S(!1)}h.addEventListener("click",function(){n.open?S(!1):L()}),p.addEventListener("blur",k),p.addEventListener("keydown",function(o){o.key==="Enter"&&(o.preventDefault(),k()),o.key==="ArrowDown"&&o.altKey&&(o.preventDefault(),L())}),a.aceDatepicker={getValue:function(){return n.value},setValue:function(o){u(o,!0)},open:L,close:S}}function te(a){var e=a.dataset,s=C(new Date),n=e.time!=="false",t={start:e.start||"",end:e.end||"",startTime:e.startTime||"",endTime:e.endTime||"",min:O(e.min),max:O(e.max),locale:e.locale||document.documentElement.lang||void 0,hover:"",open:!1};a.innerHTML="";var l=document.createElement("button");l.type="button",l.className="ace-input-group ace-date-trigger"+(e.invalid!=null?" is-invalid":""),e.id&&(l.id=e.id),e.invalid!=null&&l.setAttribute("aria-invalid","true"),e.disabled!=null&&(l.disabled=!0),l.setAttribute("aria-haspopup","dialog"),l.setAttribute("aria-expanded","false"),a.appendChild(l);var p=q(a,e.startName,t.start),h=q(a,e.endName,t.end),D=n?q(a,e.startTimeName,t.startTime):null,c=n?q(a,e.endTimeName,t.endTime):null,u=null,k=null;function Y(){var r=A(t.start),d=A(t.end),v={day:"numeric",month:"short"},g={day:"numeric",month:"short",year:"numeric"},f="";return r&&d?f=r.toLocaleDateString(t.locale,v)+(t.startTime?" "+t.startTime:"")+" \u2192 "+d.toLocaleDateString(t.locale,g)+(t.endTime?" "+t.endTime:""):r&&(f=r.toLocaleDateString(t.locale,g)+(t.startTime?" "+t.startTime:"")),f}function x(){var r=Y();l.innerHTML=E.cal+'<span class="ace-date-label'+(r?"":" is-empty")+'">'+y(r||e.placeholder||"Pick-up \u2192 return")+"</span>"}function L(){p.value=t.start,h.value=t.end,D&&(D.value=t.startTime),c&&(c.value=t.endTime),x(),W(a,{start:t.start,end:t.end,startTime:t.startTime,endTime:t.endTime}),h.dispatchEvent(new Event("change",{bubbles:!0}))}function S(){var r=t.hover;return!t.start||t.end||!r||r<=t.start||t.min&&r<t.min||t.max&&r>t.max?"":r}function T(){var r=S(),d=R(t.viewYear,t.viewMonth),v=z(t,{yearPicker:!1,cells:d,cellHTML:function(g){var f=g.iso,I=!!t.start&&f===t.start,F=!!t.end&&f===t.end,J=!!t.start&&!!t.end&&f>=t.start&&f<=t.end,ae=!!r&&f>=t.start&&f<=r,B=J?"range":ae?"preview":"",Q=f===t.start,U=J?F:f===r,X=B?Q&&U?"both":Q?"start":U?"end":"":"",ne=t.min&&f<t.min||t.max&&f>t.max;return G(g,(I||F?" data-selected":"")+(B==="range"&&!I&&!F?" data-in-range":"")+(r&&f===r&&r!==t.start?" data-preview-end":"")+(f===s?' data-today aria-current="date"':"")+(g.current?"":" data-outside")+' aria-pressed="'+(I||F||B==="range")+'"'+(ne?" disabled":""),(B?' data-band="'+B+'"':"")+(X?' data-band-edge="'+X+'"':""))}});u.querySelector(".ace-dp-cal").innerHTML=v}function P(r,d){var v="ace-dp-"+r+"-"+Math.random().toString(36).slice(2,8);return'<div><label for="'+v+'">'+y(d)+'</label><div class="ace-input-group">'+E.clock+'<input id="'+v+'" type="text" inputmode="numeric" placeholder="00:00" maxlength="5" data-time="'+r+'" value="'+y(r==="start"?t.startTime:t.endTime)+'"></div></div>'}function H(){if(!(t.open||l.disabled)){var r=A(t.start)||new Date;t.viewYear=r.getFullYear(),t.viewMonth=r.getMonth(),t.open=!0,t.hover="",k=document.createElement("div"),k.className="ace-dp-backdrop",u=document.createElement("div"),u.className="ace-dp ace-dp--range",u.setAttribute("role","dialog"),u.setAttribute("aria-modal","true"),u.setAttribute("aria-label","Choose pick-up and return dates"),u.innerHTML='<div class="ace-dp-cal"></div><div class="ace-dp-foot">'+(n?'<div class="ace-dp-times">'+P("start",e.startLabel||"Pick-up time")+P("end",e.endLabel||"Return time")+"</div>":"")+'<div class="ace-dp-actions"><button type="button" class="ace-btn ace-btn--secondary ace-btn--sm" data-act="clear">'+y(e.clearLabel||"Clear")+'</button><button type="button" class="ace-btn ace-btn--primary ace-btn--sm" data-act="close">'+y(e.closeLabel||"Close")+"</button></div></div>",document.body.appendChild(k),document.body.appendChild(u),T(),l.setAttribute("aria-expanded","true");var d=u.querySelector(".ace-dp-day[data-selected]")||u.querySelector(".ace-dp-day[data-today]")||u.querySelector(".ace-dp-navbtn");d&&!d.disabled&&d.focus({preventScroll:!0}),k.addEventListener("click",function(){o(!0)}),u.addEventListener("click",i),u.addEventListener("keydown",b),u.addEventListener("mouseover",m),u.addEventListener("mouseleave",function(){t.hover&&(t.hover="",T())}),u.addEventListener("input",w),u.addEventListener("focusout",j)}}function o(r){t.open&&(t.open=!1,u.remove(),k.remove(),u=k=null,l.setAttribute("aria-expanded","false"),r&&l.focus())}function i(r){var d=r.target.closest("button");if(d){if(d.dataset.act==="prev"||d.dataset.act==="next")$(t,d.dataset.act==="prev"?-1:1),T(),u.querySelector('[data-act="'+d.dataset.act+'"]').focus();else if(d.dataset.act==="close")o(!0);else if(d.dataset.act==="clear")t.start=t.end="",t.hover="",T(),L();else if(d.dataset.iso&&!d.disabled){var v=d.dataset.iso;!t.start||t.end||v<t.start?(t.start=v,t.end=""):t.end=v,T(),L();var g=u.querySelector('.ace-dp-day[data-iso="'+v+'"]');g&&g.focus({preventScroll:!0})}}}function m(r){var d=r.target.closest(".ace-dp-day"),v=d&&!d.disabled?d.dataset.iso:"";v&&v!==t.hover&&t.start&&!t.end&&(t.hover=v,T())}function b(r){if(r.key==="Escape"){r.preventDefault(),o(!0);return}if(r.key==="Tab"){var d=u.querySelectorAll("button:not(:disabled), input"),v=d[0],g=d[d.length-1];r.shiftKey&&document.activeElement===v?(r.preventDefault(),g.focus()):!r.shiftKey&&document.activeElement===g&&(r.preventDefault(),v.focus())}}function w(r){var d=r.target.dataset&&r.target.dataset.time;d&&(r.target.value=K(r.target.value))}function j(r){var d=r.target.dataset&&r.target.dataset.time;if(d){var v=Z(r.target.value);r.target.value=v,d==="start"?t.startTime=v:t.endTime=v,L()}}l.addEventListener("click",H),x(),a.aceDatepicker={getValue:function(){return{start:t.start,end:t.end,startTime:t.startTime,endTime:t.endTime}},setValue:function(r){["start","end","startTime","endTime"].forEach(function(d){r&&d in r&&(t[d]=r[d]||"")}),p.value=t.start,h.value=t.end,D&&(D.value=t.startTime),c&&(c.value=t.endTime),x()},open:H,close:o}}function V(a){a=a||document,a.querySelectorAll("[data-ace-datepicker]").forEach(function(e){e.aceDatepicker||ee(e)}),a.querySelectorAll("[data-ace-daterange]").forEach(function(e){e.aceDatepicker||te(e)})}window.AceDatePicker={init:V},document.readyState==="loading"?document.addEventListener("DOMContentLoaded",function(){V()}):V()})();
|
package/dist/ace-hero.js
ADDED
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
/* GENERATED by build.py from the PRC kit — do not edit by hand. */
|
|
2
|
+
/* ═══════════════════════════════════════════════════════════════════
|
|
3
|
+
ACECSS HERO BUTTON — v1.1.0 · MIT License · (c) 2026 Kosowwwa LLC
|
|
4
|
+
Dependency-free effects for .ace-hero-btn (styles: ace.css,
|
|
5
|
+
section 10). A sparkle call-to-action button, dependency-free.
|
|
6
|
+
|
|
7
|
+
<button class="ace-hero-btn">Book a demo</button>
|
|
8
|
+
<script src="ace-hero.js" defer></script>
|
|
9
|
+
|
|
10
|
+
Adds, once per button:
|
|
11
|
+
- the three-star sparkle icon (skip with data-no-icon)
|
|
12
|
+
- a dashed spark line that runs round the edge on hover
|
|
13
|
+
- particles that stream out from every side on hover
|
|
14
|
+
The animation itself is CSS, so nothing runs until the button is
|
|
15
|
+
hovered or focused. Respects prefers-reduced-motion.
|
|
16
|
+
|
|
17
|
+
Auto-initialises on DOMContentLoaded. For markup added later call
|
|
18
|
+
AceHero.init(containerElement).
|
|
19
|
+
═══════════════════════════════════════════════════════════════════ */
|
|
20
|
+
(function () {
|
|
21
|
+
'use strict';
|
|
22
|
+
|
|
23
|
+
// Server-side rendering (Nuxt, Next.js, …) imports this too: there is
|
|
24
|
+
// no DOM there, so do nothing and let the browser bundle initialise.
|
|
25
|
+
if (typeof window === 'undefined' || typeof document === 'undefined') return;
|
|
26
|
+
|
|
27
|
+
var DOTS = 40;
|
|
28
|
+
var NS = 'http://www.w3.org/2000/svg';
|
|
29
|
+
var ICON =
|
|
30
|
+
'<svg class="ace-hero-icon" viewBox="0 0 24 26" aria-hidden="true">' +
|
|
31
|
+
'<path d="M5.16515 2.62145L5.8075 0.999247C5.83876 0.919722 5.9154 0.866699 6.00112 0.866699C6.08683 0.866699 6.16347 0.919722 6.19473 0.999247L6.83708 2.62145L8.44145 3.27094C8.5201 3.30254 8.57254 3.38003 8.57254 3.4667C8.57254 3.55337 8.5201 3.63085 8.44145 3.66246L6.83708 4.31195L6.19473 5.93415C6.16347 6.0147 6.08683 6.0667 6.00112 6.0667C5.9154 6.0667 5.83876 6.0147 5.8075 5.93415L5.16515 4.31195L3.56078 3.66246C3.48112 3.63085 3.42969 3.55337 3.42969 3.4667C3.42969 3.38003 3.48112 3.30254 3.56078 3.27094L5.16515 2.62145Z"/>' +
|
|
32
|
+
'<path d="M11.2362 9.43967C11.5502 9.30067 11.8015 9.05025 11.9405 8.73617L13.5494 5.11725C13.7169 4.74204 14.0887 4.5 14.5 4.5C14.9112 4.5 15.2839 4.74204 15.4506 5.11725L17.0603 8.73617C17.1985 9.05025 17.4497 9.3015 17.7638 9.43967L21.3827 11.0494C21.7579 11.2161 22 11.5887 22 12C22 12.4112 21.7579 12.7831 21.3827 12.9506L17.7638 14.5595C17.4497 14.6985 17.1993 14.9497 17.0603 15.2638L15.4506 18.8827C15.2839 19.2579 14.9112 19.5 14.5 19.5C14.0887 19.5 13.7169 19.2579 13.5494 18.8827L11.9405 15.2638C11.8015 14.9497 11.5502 14.6985 11.2362 14.5595L7.61725 12.9506C7.24204 12.7831 7 12.4112 7 12C7 11.5887 7.24204 11.2161 7.61725 11.0494L11.2362 9.43967Z"/>' +
|
|
33
|
+
'<path d="M4.60728 19.392L5.67703 16.6875C5.72997 16.5541 5.85854 16.4666 6.00056 16.4666C6.14258 16.4666 6.27031 16.5541 6.32325 16.6875L7.39299 19.392L10.0678 20.4736C10.1997 20.5271 10.2863 20.6563 10.2863 20.7999C10.2863 20.9435 10.1997 21.0735 10.0678 21.1271L7.39299 22.2087L6.32325 24.9123C6.27031 25.0457 6.14258 25.1332 6.00056 25.1332C5.85854 25.1332 5.72997 25.0457 5.67703 24.9123L4.60728 22.2087L1.93333 21.1271C1.8014 21.0735 1.71484 20.9435 1.71484 20.7999C1.71484 20.6563 1.8014 20.5271 1.93333 20.4736L4.60728 19.392Z"/>' +
|
|
34
|
+
'</svg>';
|
|
35
|
+
|
|
36
|
+
var reduceMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
37
|
+
|
|
38
|
+
function rand(min, max) { return min + Math.random() * (max - min); }
|
|
39
|
+
|
|
40
|
+
function strokeSvg(radius) {
|
|
41
|
+
var svg = document.createElementNS(NS, 'svg');
|
|
42
|
+
svg.setAttribute('aria-hidden', 'true');
|
|
43
|
+
var rect = document.createElementNS(NS, 'rect');
|
|
44
|
+
rect.setAttribute('x', '0');
|
|
45
|
+
rect.setAttribute('y', '0');
|
|
46
|
+
rect.setAttribute('width', '100%');
|
|
47
|
+
rect.setAttribute('height', '100%');
|
|
48
|
+
rect.setAttribute('rx', radius);
|
|
49
|
+
rect.setAttribute('ry', radius);
|
|
50
|
+
rect.setAttribute('pathLength', '10');
|
|
51
|
+
svg.appendChild(rect);
|
|
52
|
+
return svg;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
function dots() {
|
|
56
|
+
var box = document.createElement('span');
|
|
57
|
+
box.className = 'ace-hero-dots';
|
|
58
|
+
box.setAttribute('aria-hidden', 'true');
|
|
59
|
+
for (var i = 0; i < DOTS; i++) {
|
|
60
|
+
// Start on a random edge and fly outward from it.
|
|
61
|
+
var edge = Math.floor(Math.random() * 4), x, y, angle;
|
|
62
|
+
if (edge === 0) { x = rand(0, 100); y = 0; angle = rand(-120, -60); } // top → up
|
|
63
|
+
else if (edge === 1) { x = 100; y = rand(0, 100); angle = rand(-30, 30); } // right → right
|
|
64
|
+
else if (edge === 2) { x = rand(0, 100); y = 100; angle = rand(60, 120); } // bottom → down
|
|
65
|
+
else { x = 0; y = rand(0, 100); angle = rand(150, 210); } // left → left
|
|
66
|
+
var duration = rand(3, 5);
|
|
67
|
+
var distance = rand(15, 40) * duration; // px/s × s, like the original
|
|
68
|
+
var rad = angle * Math.PI / 180;
|
|
69
|
+
var dot = document.createElement('i');
|
|
70
|
+
dot.style.cssText =
|
|
71
|
+
'--x:' + x.toFixed(1) + '%;--y:' + y.toFixed(1) + '%;' +
|
|
72
|
+
'--dx:' + (Math.cos(rad) * distance).toFixed(1) + 'px;' +
|
|
73
|
+
'--dy:' + (Math.sin(rad) * distance).toFixed(1) + 'px;' +
|
|
74
|
+
'--s:' + rand(2, 4).toFixed(1) + 'px;' +
|
|
75
|
+
'--d:' + duration.toFixed(2) + 's;' +
|
|
76
|
+
// negative delay: the stream is already flowing when hover starts
|
|
77
|
+
'--delay:' + (-rand(0, duration)).toFixed(2) + 's';
|
|
78
|
+
box.appendChild(dot);
|
|
79
|
+
}
|
|
80
|
+
return box;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
function initButton(btn) {
|
|
84
|
+
if (btn.aceHero) return;
|
|
85
|
+
btn.aceHero = true;
|
|
86
|
+
|
|
87
|
+
if (!btn.querySelector('.ace-hero-label')) {
|
|
88
|
+
var label = document.createElement('span');
|
|
89
|
+
label.className = 'ace-hero-label';
|
|
90
|
+
while (btn.firstChild) label.appendChild(btn.firstChild);
|
|
91
|
+
btn.appendChild(label);
|
|
92
|
+
}
|
|
93
|
+
if (!btn.querySelector('.ace-hero-icon') && !btn.hasAttribute('data-no-icon')) {
|
|
94
|
+
btn.insertAdjacentHTML('afterbegin', ICON);
|
|
95
|
+
}
|
|
96
|
+
if (reduceMotion) return;
|
|
97
|
+
|
|
98
|
+
var radius = parseFloat(getComputedStyle(btn).borderTopLeftRadius) || 29;
|
|
99
|
+
var stroke = document.createElement('span');
|
|
100
|
+
stroke.className = 'ace-hero-stroke';
|
|
101
|
+
stroke.setAttribute('aria-hidden', 'true');
|
|
102
|
+
stroke.appendChild(strokeSvg(radius));
|
|
103
|
+
stroke.appendChild(strokeSvg(radius)); // the blurred glow copy
|
|
104
|
+
btn.appendChild(stroke);
|
|
105
|
+
btn.appendChild(dots());
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
function init(root) {
|
|
109
|
+
(root || document).querySelectorAll('.ace-hero-btn').forEach(initButton);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
window.AceHero = { init: init };
|
|
113
|
+
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', function () { init(); });
|
|
114
|
+
else init();
|
|
115
|
+
})();
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
/*! AceCSS v1.1.0 | MIT License | https://acecss.dev */
|
|
2
|
+
(function(){"use strict";if(typeof window>"u"||typeof document>"u")return;var l=40,s="http://www.w3.org/2000/svg",L='<svg class="ace-hero-icon" viewBox="0 0 24 26" aria-hidden="true"><path d="M5.16515 2.62145L5.8075 0.999247C5.83876 0.919722 5.9154 0.866699 6.00112 0.866699C6.08683 0.866699 6.16347 0.919722 6.19473 0.999247L6.83708 2.62145L8.44145 3.27094C8.5201 3.30254 8.57254 3.38003 8.57254 3.4667C8.57254 3.55337 8.5201 3.63085 8.44145 3.66246L6.83708 4.31195L6.19473 5.93415C6.16347 6.0147 6.08683 6.0667 6.00112 6.0667C5.9154 6.0667 5.83876 6.0147 5.8075 5.93415L5.16515 4.31195L3.56078 3.66246C3.48112 3.63085 3.42969 3.55337 3.42969 3.4667C3.42969 3.38003 3.48112 3.30254 3.56078 3.27094L5.16515 2.62145Z"/><path d="M11.2362 9.43967C11.5502 9.30067 11.8015 9.05025 11.9405 8.73617L13.5494 5.11725C13.7169 4.74204 14.0887 4.5 14.5 4.5C14.9112 4.5 15.2839 4.74204 15.4506 5.11725L17.0603 8.73617C17.1985 9.05025 17.4497 9.3015 17.7638 9.43967L21.3827 11.0494C21.7579 11.2161 22 11.5887 22 12C22 12.4112 21.7579 12.7831 21.3827 12.9506L17.7638 14.5595C17.4497 14.6985 17.1993 14.9497 17.0603 15.2638L15.4506 18.8827C15.2839 19.2579 14.9112 19.5 14.5 19.5C14.0887 19.5 13.7169 19.2579 13.5494 18.8827L11.9405 15.2638C11.8015 14.9497 11.5502 14.6985 11.2362 14.5595L7.61725 12.9506C7.24204 12.7831 7 12.4112 7 12C7 11.5887 7.24204 11.2161 7.61725 11.0494L11.2362 9.43967Z"/><path d="M4.60728 19.392L5.67703 16.6875C5.72997 16.5541 5.85854 16.4666 6.00056 16.4666C6.14258 16.4666 6.27031 16.5541 6.32325 16.6875L7.39299 19.392L10.0678 20.4736C10.1997 20.5271 10.2863 20.6563 10.2863 20.7999C10.2863 20.9435 10.1997 21.0735 10.0678 21.1271L7.39299 22.2087L6.32325 24.9123C6.27031 25.0457 6.14258 25.1332 6.00056 25.1332C5.85854 25.1332 5.72997 25.0457 5.67703 24.9123L4.60728 22.2087L1.93333 21.1271C1.8014 21.0735 1.71484 20.9435 1.71484 20.7999C1.71484 20.6563 1.8014 20.5271 1.93333 20.4736L4.60728 19.392Z"/></svg>',f=window.matchMedia&&window.matchMedia("(prefers-reduced-motion: reduce)").matches;function r(e,a){return e+Math.random()*(a-e)}function u(e){var a=document.createElementNS(s,"svg");a.setAttribute("aria-hidden","true");var t=document.createElementNS(s,"rect");return t.setAttribute("x","0"),t.setAttribute("y","0"),t.setAttribute("width","100%"),t.setAttribute("height","100%"),t.setAttribute("rx",e),t.setAttribute("ry",e),t.setAttribute("pathLength","10"),a.appendChild(t),a}function m(){var e=document.createElement("span");e.className="ace-hero-dots",e.setAttribute("aria-hidden","true");for(var a=0;a<l;a++){var t=Math.floor(Math.random()*4),i,d,o;t===0?(i=r(0,100),d=0,o=r(-120,-60)):t===1?(i=100,d=r(0,100),o=r(-30,30)):t===2?(i=r(0,100),d=100,o=r(60,120)):(i=0,d=r(0,100),o=r(150,210));var c=r(3,5),h=r(15,40)*c,C=o*Math.PI/180,p=document.createElement("i");p.style.cssText="--x:"+i.toFixed(1)+"%;--y:"+d.toFixed(1)+"%;--dx:"+(Math.cos(C)*h).toFixed(1)+"px;--dy:"+(Math.sin(C)*h).toFixed(1)+"px;--s:"+r(2,4).toFixed(1)+"px;--d:"+c.toFixed(2)+"s;--delay:"+(-r(0,c)).toFixed(2)+"s",e.appendChild(p)}return e}function v(e){if(!e.aceHero){if(e.aceHero=!0,!e.querySelector(".ace-hero-label")){var a=document.createElement("span");for(a.className="ace-hero-label";e.firstChild;)a.appendChild(e.firstChild);e.appendChild(a)}if(!e.querySelector(".ace-hero-icon")&&!e.hasAttribute("data-no-icon")&&e.insertAdjacentHTML("afterbegin",L),!f){var t=parseFloat(getComputedStyle(e).borderTopLeftRadius)||29,i=document.createElement("span");i.className="ace-hero-stroke",i.setAttribute("aria-hidden","true"),i.appendChild(u(t)),i.appendChild(u(t)),e.appendChild(i),e.appendChild(m())}}}function n(e){(e||document).querySelectorAll(".ace-hero-btn").forEach(v)}window.AceHero={init:n},document.readyState==="loading"?document.addEventListener("DOMContentLoaded",function(){n()}):n()})();
|
package/dist/ace-select.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/* GENERATED by build.py from the PRC kit — do not edit by hand. */
|
|
2
2
|
/* ═══════════════════════════════════════════════════════════════════
|
|
3
|
-
ACECSS SELECT — v1.0
|
|
3
|
+
ACECSS SELECT — v1.1.0 · MIT License · (c) 2026 Kosowwwa LLC
|
|
4
4
|
Dependency-free custom dropdown for <select>.
|
|
5
5
|
Styles live in ace.css (section 9).
|
|
6
6
|
|
package/dist/ace-select.min.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
/*! AceCSS v1.0
|
|
1
|
+
/*! AceCSS v1.1.0 | MIT License | https://acecss.dev */
|
|
2
2
|
(function(){"use strict";if(typeof window>"u"||typeof document>"u")return;var H='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>',K=0;function E(n){return String(n).replace(/[&<>"']/g,function(u){return{"&":"&","<":"<",">":">",'"':""","'":"'"}[u]})}function B(n){var u=n.hasAttribute("data-search"),y="ace-sel-"+ ++K,D=y+"-list",v=document.createElement("div");v.className="ace-select-wrap",n.parentNode.insertBefore(v,n),v.appendChild(n);var M=n.id;M&&n.removeAttribute("id"),n.classList.add("ace-select-native"),n.setAttribute("tabindex","-1"),n.setAttribute("aria-hidden","true");var a;u?(a=document.createElement("input"),a.type="text",a.autocomplete="off",a.setAttribute("role","combobox"),a.setAttribute("aria-autocomplete","list")):(a=document.createElement("button"),a.type="button",a.setAttribute("aria-haspopup","listbox")),a.className=Array.prototype.filter.call(n.classList,function(e){return e!=="ace-select-native"}).join(" "),a.id=M||y,a.setAttribute("aria-controls",D),a.setAttribute("aria-expanded","false"),v.appendChild(a);var s=null;u&&(s=document.createElement("button"),s.type="button",s.className="ace-select-clear",s.tabIndex=-1,s.setAttribute("aria-label",n.getAttribute("data-clear-label")||"Clear"),s.innerHTML=H,v.appendChild(s));var l=null,d=!1,m="",i=-1,c=[],x="",T=0;function P(){var e=[];return Array.prototype.forEach.call(n.children,function(t){t.tagName==="OPTGROUP"?(e.push({group:t.label}),Array.prototype.forEach.call(t.children,function(r){e.push(O(r))})):t.tagName==="OPTION"&&e.push(O(t))}),e}function O(e){return{option:e,value:e.value,label:e.textContent.trim(),sublabel:e.getAttribute("data-sublabel")||"",disabled:e.disabled,placeholder:e.value===""}}function S(){var e=n.querySelector('option[value=""]');return n.getAttribute("data-placeholder")||(e?e.textContent.trim():"Select\u2026")}function U(){var e=n.options[n.selectedIndex];return e&&e.value!==""?e.textContent.trim():""}function h(){var e=U();a.disabled=n.disabled;var t=n.getAttribute("aria-invalid")==="true"||n.classList.contains("is-invalid");if(a.classList.toggle("is-invalid",t),t?a.setAttribute("aria-invalid","true"):a.removeAttribute("aria-invalid"),u){d||(a.value=e),a.placeholder=e||S();var r=!!n.value&&!n.disabled;v.classList.toggle("has-clear",r),s.hidden=!r}else a.innerHTML='<span class="ace-select-value'+(e?"":" is-placeholder")+'">'+E(e||S())+"</span>"}function A(){var e=m.trim().toLowerCase(),t=P().filter(function(o){return o.group||!o.placeholder});if(!e)return t;var r=t.filter(function(o){return!o.group&&(o.label.toLowerCase().indexOf(e)>-1||o.sublabel.toLowerCase().indexOf(e)>-1)});return r}function f(){c=A();var e="",t=0;if(c.forEach(function(o,C){if(o.group){e+='<li class="ace-menu-group" role="presentation">'+E(o.group)+"</li>";return}o.index=t++;var V=o.value===n.value;e+='<li class="ace-menu-item" role="option" id="'+y+"-opt-"+C+'" data-i="'+C+'" aria-selected="'+V+'"'+(o.disabled?' aria-disabled="true"':"")+(C===i?" data-active":"")+'><span class="ace-menu-label">'+E(o.label)+"</span>"+(o.sublabel?'<span class="ace-menu-sublabel">'+E(o.sublabel)+"</span>":"")+"</li>"}),t||(e='<li class="ace-menu-empty" role="presentation">'+E(n.getAttribute("data-empty-label")||"No results")+"</li>"),l.innerHTML=e,i>-1&&c[i]&&!c[i].group){a.setAttribute("aria-activedescendant",y+"-opt-"+i);var r=l.querySelector("[data-active]");r&&r.scrollIntoView({block:"nearest"})}else a.removeAttribute("aria-activedescendant")}function g(){if(l){var e=a.getBoundingClientRect();l.style.minWidth=e.width+"px",l.style.left=e.left+"px";var t=l.offsetHeight,r=window.innerHeight-e.bottom-8;l.style.top=(t>r&&e.top>r?e.top-t-4:e.bottom+4)+"px"}}function w(e,t){for(var r=e;r>=0&&r<c.length;r+=t)if(!c[r].group&&!c[r].disabled)return r;return-1}function j(){for(var e=0;e<c.length;e++)if(!c[e].group&&c[e].value===n.value)return e;return-1}function p(){d||n.disabled||(d=!0,m="",l=document.createElement("ul"),l.className="ace-menu",l.id=D,l.setAttribute("role","listbox"),a.id&&l.setAttribute("aria-labelledby",a.id),document.body.appendChild(l),c=A(),i=u?-1:j(),f(),g(),u&&(a.value=""),a.setAttribute("aria-expanded","true"),l.addEventListener("mousedown",R),l.addEventListener("mousemove",G),document.addEventListener("mousedown",I),window.addEventListener("scroll",g,!0),window.addEventListener("resize",g))}function b(){d&&(d=!1,m="",i=-1,l.remove(),l=null,a.setAttribute("aria-expanded","false"),a.removeAttribute("aria-activedescendant"),document.removeEventListener("mousedown",I),window.removeEventListener("scroll",g,!0),window.removeEventListener("resize",g),h())}function k(e){var t=c[e];if(!(!t||t.group||t.disabled)){var r=n.value!==t.value;n.value=t.value,b(),r&&(n.dispatchEvent(new Event("input",{bubbles:!0})),n.dispatchEvent(new Event("change",{bubbles:!0}))),u?a.blur():a.focus()}}function z(){var e=n.querySelector('option[value=""]');e?n.value="":n.selectedIndex=-1,m="",h(),n.dispatchEvent(new Event("input",{bubbles:!0})),n.dispatchEvent(new Event("change",{bubbles:!0}))}function R(e){e.preventDefault();var t=e.target.closest(".ace-menu-item");t&&k(+t.dataset.i)}function G(e){var t=e.target.closest(".ace-menu-item");t&&+t.dataset.i!==i&&t.getAttribute("aria-disabled")!=="true"&&(i=+t.dataset.i,f())}function I(e){!v.contains(e.target)&&l&&!l.contains(e.target)&&b()}function N(e){clearTimeout(T),x+=e.toLowerCase(),T=setTimeout(function(){x=""},600);for(var t=d?c:A(),r=0;r<t.length;r++)if(!t[r].group&&!t[r].disabled&&t[r].label.toLowerCase().indexOf(x)===0){d||p(),i=r,f();return}}a.addEventListener("keydown",function(e){var t=e.key;if(!d){if(t==="ArrowDown"||t==="ArrowUp"||t==="Enter"||!u&&t===" "){e.preventDefault(),p(),!u&&i<0&&(i=w(0,1),f());return}!u&&t.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&N(t);return}if(t==="ArrowDown"){e.preventDefault();var r=w(i+1,1);r>-1&&(i=r),f()}else if(t==="ArrowUp"){e.preventDefault();var o=w(Math.max(i-1,0),-1);o>-1&&(i=o),f()}else t==="Home"?(e.preventDefault(),i=w(0,1),f()):t==="End"?(e.preventDefault(),i=w(c.length-1,-1),f()):t==="Enter"||!u&&t===" "?(e.preventDefault(),i>-1&&k(i)):t==="Escape"?(e.preventDefault(),e.stopPropagation(),b()):t==="Tab"?b():!u&&t.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&N(t)}),u?(a.addEventListener("focus",p),a.addEventListener("click",p),a.addEventListener("input",function(){d||p(),m=a.value,c=A(),i=m?w(0,1):-1,f(),g()}),a.addEventListener("blur",function(){setTimeout(function(){document.activeElement!==a&&b()},0)}),s.addEventListener("mousedown",function(e){e.preventDefault(),z()})):a.addEventListener("click",function(){d?b():p()}),n.addEventListener("change",function(){d||h()});var q=n.form;q&&q.addEventListener("reset",function(){setTimeout(h,0)}),h(),n.aceSelect={refresh:h,open:p,close:b,control:a}}function L(n){(n||document).querySelectorAll("select[data-ace-select]").forEach(function(u){u.aceSelect||B(u)})}window.AceSelect={init:L},document.readyState==="loading"?document.addEventListener("DOMContentLoaded",function(){L()}):L()})();
|
package/dist/ace.css
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/* GENERATED by build.py from the PRC kit — edit brand.css, not this file. */
|
|
2
2
|
/* ═══════════════════════════════════════════════════════════════════
|
|
3
3
|
ACECSS COMPONENTS — AceCSS UI kit
|
|
4
|
-
Version 1.0
|
|
4
|
+
Version 1.1.0 · MIT License · (c) 2026 Kosowwwa LLC
|
|
5
5
|
|
|
6
6
|
Framework-free CSS for the AceCSS look: buttons, segmented controls,
|
|
7
7
|
inputs, selects, textareas, checkboxes, switches, badges and
|
|
@@ -1153,6 +1153,218 @@ input.ace-select[aria-expanded="true"] { cursor: text; }
|
|
|
1153
1153
|
}
|
|
1154
1154
|
|
|
1155
1155
|
|
|
1156
|
+
/* ─────────────────────────── 10. HERO BUTTON ─────────────────────── */
|
|
1157
|
+
/* Sparkle call-to-action button. One per page, for the main call to action in a hero.
|
|
1158
|
+
|
|
1159
|
+
<button class="ace-hero-btn">Book a demo</button>
|
|
1160
|
+
|
|
1161
|
+
CSS alone gives the dark pill, the sparkle icon (if present, see
|
|
1162
|
+
below), the brand-colour hover with glow, ring and scale, and the
|
|
1163
|
+
twinkling stars. ace-hero.js adds the icon automatically, a dashed
|
|
1164
|
+
spark line running round the edge, and particles streaming out on
|
|
1165
|
+
hover. The colour follows --ace-primary, or --ace-tone if set. */
|
|
1166
|
+
.ace-hero-btn {
|
|
1167
|
+
--ace-hero-tone: var(--ace-tone, var(--ace-primary));
|
|
1168
|
+
--ace-hero-bg: #1d1d1d;
|
|
1169
|
+
--ace-hero-fg: #a3a3a3; /* idle label: ~6:1 on #1d1d1d */
|
|
1170
|
+
--ace-hero-scale: 1;
|
|
1171
|
+
--ace-hero-wide: transparent;
|
|
1172
|
+
--ace-hero-inset: rgb(255 255 255 / 0.04);
|
|
1173
|
+
--ace-hero-ring: 0px;
|
|
1174
|
+
--ace-hero-dots: 0;
|
|
1175
|
+
|
|
1176
|
+
appearance: none;
|
|
1177
|
+
position: relative;
|
|
1178
|
+
z-index: 1;
|
|
1179
|
+
display: inline-flex;
|
|
1180
|
+
align-items: center;
|
|
1181
|
+
gap: 12px;
|
|
1182
|
+
min-width: 192px;
|
|
1183
|
+
margin: 0;
|
|
1184
|
+
padding: 16px 28px 16px 22px;
|
|
1185
|
+
border: 0;
|
|
1186
|
+
border-radius: 29px;
|
|
1187
|
+
outline: none;
|
|
1188
|
+
overflow: visible;
|
|
1189
|
+
cursor: pointer;
|
|
1190
|
+
text-decoration: none;
|
|
1191
|
+
font-family: var(--ace-font);
|
|
1192
|
+
font-size: 16px;
|
|
1193
|
+
font-weight: 600;
|
|
1194
|
+
line-height: 26px;
|
|
1195
|
+
letter-spacing: 0.005em;
|
|
1196
|
+
white-space: nowrap;
|
|
1197
|
+
color: var(--ace-hero-fg);
|
|
1198
|
+
background-color: var(--ace-hero-bg);
|
|
1199
|
+
-webkit-tap-highlight-color: transparent;
|
|
1200
|
+
transform: scale(var(--ace-hero-scale)) translateZ(0);
|
|
1201
|
+
box-shadow:
|
|
1202
|
+
0 0 120px var(--ace-hero-wide),
|
|
1203
|
+
0 4px 12px rgb(0 0 0 / 0.05),
|
|
1204
|
+
0 1px 2px rgb(0 0 0 / 0.1),
|
|
1205
|
+
inset 0 1px 1px var(--ace-hero-inset),
|
|
1206
|
+
0 0 0 var(--ace-hero-ring) color-mix(in srgb, var(--ace-hero-tone) 40%, transparent);
|
|
1207
|
+
transition: transform 0.3s, background-color 0.3s, box-shadow 0.3s, color 0.3s;
|
|
1208
|
+
}
|
|
1209
|
+
/* Blurred brand glow under the button, shown on hover */
|
|
1210
|
+
.ace-hero-btn::before {
|
|
1211
|
+
content: '';
|
|
1212
|
+
position: absolute;
|
|
1213
|
+
z-index: -1;
|
|
1214
|
+
left: 15%;
|
|
1215
|
+
right: 15%;
|
|
1216
|
+
bottom: -12px;
|
|
1217
|
+
height: 24px;
|
|
1218
|
+
border-radius: 29px;
|
|
1219
|
+
background: var(--ace-hero-tone);
|
|
1220
|
+
filter: blur(16px);
|
|
1221
|
+
opacity: 0;
|
|
1222
|
+
transition: opacity 0.4s;
|
|
1223
|
+
transform: translateZ(0);
|
|
1224
|
+
}
|
|
1225
|
+
.ace-hero-label { position: relative; z-index: 1; display: block; }
|
|
1226
|
+
/* Idle: the label fades into the button towards the right */
|
|
1227
|
+
.ace-hero-label::before {
|
|
1228
|
+
content: '';
|
|
1229
|
+
position: absolute;
|
|
1230
|
+
inset: 0;
|
|
1231
|
+
z-index: 1;
|
|
1232
|
+
pointer-events: none;
|
|
1233
|
+
background-image: linear-gradient(to right, transparent, var(--ace-hero-bg));
|
|
1234
|
+
opacity: 0.4;
|
|
1235
|
+
transition: opacity 0.4s;
|
|
1236
|
+
}
|
|
1237
|
+
|
|
1238
|
+
.ace-hero-btn:hover,
|
|
1239
|
+
.ace-hero-btn:focus-visible {
|
|
1240
|
+
--ace-hero-scale: 1.1;
|
|
1241
|
+
--ace-hero-wide: color-mix(in srgb, var(--ace-hero-tone) 60%, transparent);
|
|
1242
|
+
--ace-hero-inset: rgb(255 255 255 / 0.35);
|
|
1243
|
+
--ace-hero-ring: 4px;
|
|
1244
|
+
--ace-hero-dots: 0.7;
|
|
1245
|
+
color: #fff;
|
|
1246
|
+
background-color: var(--ace-hero-tone);
|
|
1247
|
+
}
|
|
1248
|
+
.ace-hero-btn:hover::before,
|
|
1249
|
+
.ace-hero-btn:focus-visible::before { opacity: 1; }
|
|
1250
|
+
.ace-hero-btn:hover .ace-hero-label::before,
|
|
1251
|
+
.ace-hero-btn:focus-visible .ace-hero-label::before { opacity: 0; }
|
|
1252
|
+
.ace-hero-btn:hover:active { --ace-hero-scale: 1.05; }
|
|
1253
|
+
.ace-hero-btn:disabled { cursor: not-allowed; opacity: 0.5; transform: none; }
|
|
1254
|
+
|
|
1255
|
+
/* Sparkle icon: three stars that twinkle in turn on hover */
|
|
1256
|
+
.ace-hero-icon {
|
|
1257
|
+
display: block;
|
|
1258
|
+
flex-shrink: 0;
|
|
1259
|
+
width: 24px;
|
|
1260
|
+
height: 26px;
|
|
1261
|
+
fill: currentColor;
|
|
1262
|
+
overflow: visible;
|
|
1263
|
+
pointer-events: none;
|
|
1264
|
+
}
|
|
1265
|
+
.ace-hero-icon path { transform: translateZ(0); }
|
|
1266
|
+
.ace-hero-icon path:nth-child(1) { opacity: 0.25; transform-origin: 25% 14.58%; }
|
|
1267
|
+
.ace-hero-icon path:nth-child(2) { opacity: 1; transform-origin: 60.42% 50%; }
|
|
1268
|
+
.ace-hero-icon path:nth-child(3) { opacity: 0.5; transform-origin: 25% 85.42%; }
|
|
1269
|
+
.ace-hero-btn:hover .ace-hero-icon path:nth-child(1),
|
|
1270
|
+
.ace-hero-btn:focus-visible .ace-hero-icon path:nth-child(1) { animation: ace-hero-star-1 2s ease-in-out infinite; }
|
|
1271
|
+
.ace-hero-btn:hover .ace-hero-icon path:nth-child(2),
|
|
1272
|
+
.ace-hero-btn:focus-visible .ace-hero-icon path:nth-child(2) { animation: ace-hero-star-2 2s ease-in-out infinite; }
|
|
1273
|
+
.ace-hero-btn:hover .ace-hero-icon path:nth-child(3),
|
|
1274
|
+
.ace-hero-btn:focus-visible .ace-hero-icon path:nth-child(3) { animation: ace-hero-star-3 2s ease-in-out infinite; }
|
|
1275
|
+
@keyframes ace-hero-star-1 {
|
|
1276
|
+
0%, 15% { transform: scale(1); opacity: 0.25; }
|
|
1277
|
+
30% { transform: scale(1.5); opacity: 0.5; }
|
|
1278
|
+
45%, 100% { transform: scale(1); opacity: 0.25; }
|
|
1279
|
+
}
|
|
1280
|
+
@keyframes ace-hero-star-2 {
|
|
1281
|
+
0% { transform: scale(1); opacity: 1; }
|
|
1282
|
+
15%, 30% { transform: scale(0.5); opacity: 0.25; }
|
|
1283
|
+
45% { transform: scale(1.15); opacity: 1; }
|
|
1284
|
+
62%, 100% { transform: scale(1); opacity: 1; }
|
|
1285
|
+
}
|
|
1286
|
+
@keyframes ace-hero-star-3 {
|
|
1287
|
+
0% { transform: scale(1); opacity: 0.5; }
|
|
1288
|
+
15% { transform: scale(1.25); opacity: 1; }
|
|
1289
|
+
30%, 100% { transform: scale(1); opacity: 0.5; }
|
|
1290
|
+
}
|
|
1291
|
+
|
|
1292
|
+
/* Added by ace-hero.js: dashed spark line round the edge … */
|
|
1293
|
+
.ace-hero-stroke {
|
|
1294
|
+
position: absolute;
|
|
1295
|
+
inset: 0;
|
|
1296
|
+
pointer-events: none;
|
|
1297
|
+
mix-blend-mode: hard-light;
|
|
1298
|
+
}
|
|
1299
|
+
.ace-hero-stroke svg {
|
|
1300
|
+
position: absolute;
|
|
1301
|
+
inset: 0;
|
|
1302
|
+
display: block;
|
|
1303
|
+
width: 100%;
|
|
1304
|
+
height: 100%;
|
|
1305
|
+
overflow: visible;
|
|
1306
|
+
fill: none;
|
|
1307
|
+
stroke: color-mix(in oklch, var(--ace-hero-tone), white 30%);
|
|
1308
|
+
stroke-width: 0.75px;
|
|
1309
|
+
stroke-dasharray: 1.5 14;
|
|
1310
|
+
stroke-dashoffset: 22;
|
|
1311
|
+
opacity: 0;
|
|
1312
|
+
}
|
|
1313
|
+
.ace-hero-stroke svg + svg { stroke-width: 1px; stroke-opacity: 0.5; filter: blur(3px); }
|
|
1314
|
+
.ace-hero-btn:hover .ace-hero-stroke svg,
|
|
1315
|
+
.ace-hero-btn:focus-visible .ace-hero-stroke svg { animation: ace-hero-stroke 2s linear infinite; }
|
|
1316
|
+
@keyframes ace-hero-stroke {
|
|
1317
|
+
0% { opacity: 0; }
|
|
1318
|
+
25%, 75% { opacity: 1; }
|
|
1319
|
+
95%, 100% { stroke-dashoffset: 6; opacity: 0; }
|
|
1320
|
+
}
|
|
1321
|
+
|
|
1322
|
+
/* … and particles streaming out from every side */
|
|
1323
|
+
.ace-hero-dots {
|
|
1324
|
+
position: absolute;
|
|
1325
|
+
inset: 0;
|
|
1326
|
+
z-index: 10;
|
|
1327
|
+
pointer-events: none;
|
|
1328
|
+
opacity: var(--ace-hero-dots);
|
|
1329
|
+
transition: opacity 0.15s;
|
|
1330
|
+
}
|
|
1331
|
+
.ace-hero-dots i {
|
|
1332
|
+
position: absolute;
|
|
1333
|
+
left: var(--x);
|
|
1334
|
+
top: var(--y);
|
|
1335
|
+
width: var(--s);
|
|
1336
|
+
height: var(--s);
|
|
1337
|
+
margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
|
|
1338
|
+
border-radius: 50%;
|
|
1339
|
+
background: color-mix(in oklch, var(--ace-hero-tone), white 25%);
|
|
1340
|
+
transform: scale(0);
|
|
1341
|
+
animation: ace-hero-dot var(--d) linear var(--delay) infinite paused;
|
|
1342
|
+
}
|
|
1343
|
+
.ace-hero-btn:hover .ace-hero-dots i,
|
|
1344
|
+
.ace-hero-btn:focus-visible .ace-hero-dots i { animation-play-state: running; }
|
|
1345
|
+
@keyframes ace-hero-dot {
|
|
1346
|
+
0% { transform: translate(0, 0) scale(0); }
|
|
1347
|
+
15% { transform: translate(calc(var(--dx) * 0.15), calc(var(--dy) * 0.15)) scale(1); }
|
|
1348
|
+
60% { transform: translate(calc(var(--dx) * 0.6), calc(var(--dy) * 0.6)) scale(1); }
|
|
1349
|
+
100% { transform: translate(var(--dx), var(--dy)) scale(0); }
|
|
1350
|
+
}
|
|
1351
|
+
|
|
1352
|
+
/* Dark pages: lift the resting button off the background */
|
|
1353
|
+
.dark .ace-hero-btn,
|
|
1354
|
+
[data-theme="dark"] .ace-hero-btn { --ace-hero-bg: #27272a; --ace-hero-inset: rgb(255 255 255 / 0.08); }
|
|
1355
|
+
@media (prefers-color-scheme: dark) {
|
|
1356
|
+
.ace-auto-dark:not([data-theme="light"]) .ace-hero-btn { --ace-hero-bg: #27272a; --ace-hero-inset: rgb(255 255 255 / 0.08); }
|
|
1357
|
+
}
|
|
1358
|
+
|
|
1359
|
+
/* Visitors who asked for less motion get the colours, not the movement */
|
|
1360
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1361
|
+
.ace-hero-btn { transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; }
|
|
1362
|
+
.ace-hero-btn:hover, .ace-hero-btn:focus-visible { --ace-hero-scale: 1; --ace-hero-dots: 0; }
|
|
1363
|
+
.ace-hero-btn .ace-hero-icon path,
|
|
1364
|
+
.ace-hero-btn .ace-hero-stroke svg { animation: none !important; }
|
|
1365
|
+
}
|
|
1366
|
+
|
|
1367
|
+
|
|
1156
1368
|
/* ═══════════════ BRAND (from brand.css) ═══════════════ */
|
|
1157
1369
|
/* ═══════════════════════════════════════════════════════════════════
|
|
1158
1370
|
ACECSS BRAND — the only file you need to edit to re-colour AceCSS.
|
package/dist/ace.min.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
/*! AceCSS v1.0
|
|
2
|
-
:root{--ace-primary: #fc5731;--ace-primary-foreground: #ffffff;--ace-attention: #d97706;--ace-destructive: #dc2626;--ace-destructive-foreground: #ffffff;--ace-destructive-text: #dc2626;--ace-background: #ffffff;--ace-page: #fafafa;--ace-foreground: #111827;--ace-muted-foreground: #6b7280;--ace-border: #e5e7eb;--ace-input: #e5e7eb;--ace-ring: var(--ace-primary);--ace-invalid-ring: 20%;--ace-surface-from: #ffffff;--ace-surface-to: #f8f8f9;--ace-surface-hover-from: #fafafa;--ace-surface-hover-to: #f1f1f3;--ace-surface-ring: var(--ace-input);--ace-surface-highlight: #ffffff;--ace-tone-success: #047857;--ace-tone-warning: #b45309;--ace-tone-danger: #b91c1c;--ace-tone-info: #2563eb;--ace-radius: 8px;--ace-radius-sm: 6px;--ace-font: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--ace-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05);--ace-transition: .2s ease}.dark,[data-theme=dark]{--ace-attention: #b45309;--ace-destructive-text: #f87171;--ace-invalid-ring: 40%;--ace-background: #18181b;--ace-page: #09090b;--ace-foreground: #fafafa;--ace-muted-foreground: #a1a1aa;--ace-border: #3f3f46;--ace-input: #3f3f46;--ace-surface-from: #2a2a2e;--ace-surface-to: #222225;--ace-surface-hover-from: #323236;--ace-surface-hover-to: #29292c;--ace-surface-ring: #3f3f46;--ace-surface-highlight: rgb(255 255 255 / .06);color-scheme:dark}@media (prefers-color-scheme: dark){.ace-auto-dark:not([data-theme=light]){--ace-attention: #b45309;--ace-destructive-text: #f87171;--ace-invalid-ring: 40%;--ace-background: #18181b;--ace-page: #09090b;--ace-foreground: #fafafa;--ace-muted-foreground: #a1a1aa;--ace-border: #3f3f46;--ace-input: #3f3f46;--ace-surface-from: #2a2a2e;--ace-surface-to: #222225;--ace-surface-hover-from: #323236;--ace-surface-hover-to: #29292c;--ace-surface-ring: #3f3f46;--ace-surface-highlight: rgb(255 255 255 / .06);color-scheme:dark}}.ace-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;margin:0;border:0;border-radius:var(--ace-radius);font-family:var(--ace-font);font-size:14px;font-weight:500;line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer;user-select:none;-webkit-appearance:none;appearance:none;transition:opacity var(--ace-transition),box-shadow var(--ace-transition),background-image var(--ace-transition),background-color var(--ace-transition)}.ace-btn svg{width:16px;height:16px;flex-shrink:0;pointer-events:none}.ace-btn:focus-visible{outline:none}.ace-btn:disabled,.ace-btn[aria-disabled=true]{cursor:not-allowed;opacity:.5;pointer-events:none}.ace-btn.ace-btn--sm{height:36px;padding:0 12px}.ace-btn.ace-btn--lg{height:44px;padding:0 32px}.ace-btn.ace-btn--icon{width:40px;padding:0}.ace-btn.ace-btn--sm.ace-btn--icon{width:36px}.ace-btn.ace-btn--lg.ace-btn--icon{width:44px}.ace-btn.ace-btn--toolbar{height:36px;padding:0 12px;font-size:12px}.ace-btn.ace-btn--toolbar.ace-btn--icon{width:36px;padding:0}.ace-btn.ace-btn--block{display:flex;width:100%}.ace-btn:is(.ace-btn--primary,.ace-btn--danger,.ace-btn--blue,.ace-btn--green,.ace-btn--purple,.ace-btn--pink,.ace-btn--black){--ace-btn-tone: var(--ace-tone, var(--ace-primary));--ace-btn-fg: var(--ace-tone-fg, var(--ace-primary-foreground));--ace-btn-ring: color-mix(in oklch, var(--ace-btn-tone), black 10%);--ace-btn-light: color-mix(in oklch, var(--ace-btn-tone), white 30%);--ace-btn-from: color-mix(in oklch, var(--ace-btn-tone), white 15%);color:var(--ace-btn-fg);background-color:var(--ace-btn-light);background-image:linear-gradient(to bottom,var(--ace-btn-from),var(--ace-btn-tone));box-shadow:0 0 0 1px var(--ace-btn-ring),inset 0 1px 0 0 var(--ace-btn-light),var(--ace-shadow-xs)}.ace-btn:is(.ace-btn--primary,.ace-btn--danger,.ace-btn--blue,.ace-btn--green,.ace-btn--purple,.ace-btn--pink,.ace-btn--black):hover{color:var(--ace-btn-fg);background-image:linear-gradient(to bottom,var(--ace-btn-light),var(--ace-btn-tone))}.ace-btn:is(.ace-btn--primary,.ace-btn--danger,.ace-btn--blue,.ace-btn--green,.ace-btn--purple,.ace-btn--pink,.ace-btn--black):active{background-image:linear-gradient(to bottom,var(--ace-btn-tone),var(--ace-btn-tone))}.ace-btn:is(.ace-btn--primary,.ace-btn--danger,.ace-btn--blue,.ace-btn--green,.ace-btn--purple,.ace-btn--pink,.ace-btn--black):focus-visible{box-shadow:0 0 0 1px var(--ace-btn-ring),inset 0 1px 0 0 var(--ace-btn-light),0 0 0 4px color-mix(in oklch,var(--ace-btn-tone),transparent 70%)}.ace-btn.ace-btn--primary.ace-btn--attention{--ace-btn-tone: var(--ace-attention);--ace-btn-fg: #fff}.ace-btn.ace-btn--secondary{color:var(--ace-foreground);background-color:var(--ace-surface-to);background-image:linear-gradient(to bottom,var(--ace-surface-from),var(--ace-surface-to));box-shadow:0 0 0 1px var(--ace-surface-ring),inset 0 1px 0 0 var(--ace-surface-highlight),var(--ace-shadow-xs)}.ace-btn.ace-btn--secondary:hover{color:var(--ace-foreground);background-image:linear-gradient(to bottom,var(--ace-surface-hover-from),var(--ace-surface-hover-to))}.ace-btn.ace-btn--secondary:active{background-image:linear-gradient(to bottom,var(--ace-surface-hover-to),var(--ace-surface-hover-to))}.ace-btn.ace-btn--secondary:focus-visible{box-shadow:0 0 0 1px var(--ace-surface-ring),inset 0 1px 0 0 var(--ace-surface-highlight),0 0 0 4px color-mix(in oklch,var(--ace-ring),transparent 75%)}.ace-btn.ace-btn--secondary.ace-btn--destructive,.ace-btn.ace-btn--secondary.ace-btn--destructive:hover{color:var(--ace-destructive-text)}.ace-btn.ace-btn--danger{--ace-btn-tone: color-mix(in oklch, var(--ace-destructive), black 10%);--ace-btn-fg: var(--ace-destructive-foreground)}.ace-btn.ace-btn--blue{--ace-btn-tone: #1d4ed8;--ace-btn-fg: #fff}.ace-btn.ace-btn--green{--ace-btn-tone: #166534;--ace-btn-fg: #fff}.ace-btn.ace-btn--purple{--ace-btn-tone: #6d28d9;--ace-btn-fg: #fff}.ace-btn.ace-btn--pink{--ace-btn-tone: #be185d;--ace-btn-fg: #fff}.ace-btn.ace-btn--black{--ace-btn-tone: #18181b;--ace-btn-fg: #fff}.dark .ace-btn.ace-btn--black,[data-theme=dark] .ace-btn.ace-btn--black{--ace-btn-tone: #3f3f46}@media (prefers-color-scheme: dark){.ace-auto-dark:not([data-theme=light]) .ace-btn.ace-btn--black{--ace-btn-tone: #3f3f46}}.ace-hover-surface{border-radius:var(--ace-radius);transition:box-shadow var(--ace-transition),background-image var(--ace-transition)}.ace-hover-surface:hover{background-color:var(--ace-surface-to);background-image:linear-gradient(to bottom,var(--ace-surface-from),var(--ace-surface-to));box-shadow:0 0 0 1px var(--ace-surface-ring),inset 0 1px 0 0 var(--ace-surface-highlight),var(--ace-shadow-xs)}.ace-btn[aria-busy=true]{position:relative;color:transparent!important;pointer-events:none}.ace-btn[aria-busy=true]:after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-color:var(--ace-foreground) transparent var(--ace-foreground) var(--ace-foreground);animation:ace-spin .7s linear infinite}.ace-btn:is(.ace-btn--primary,.ace-btn--danger,.ace-btn--blue,.ace-btn--green,.ace-btn--purple,.ace-btn--pink,.ace-btn--black)[aria-busy=true]:after{border-color:var(--ace-btn-fg) transparent var(--ace-btn-fg) var(--ace-btn-fg)}@keyframes ace-spin{to{transform:rotate(360deg)}}.ace-segmented{display:inline-flex;isolation:isolate}.ace-segmented.ace-segmented--block{display:flex;width:100%}.ace-segmented.ace-segmented--block>.ace-btn{flex:1}.ace-segmented>.ace-btn{position:relative;border-radius:0}.ace-segmented>.ace-btn:first-child{border-top-left-radius:var(--ace-radius);border-bottom-left-radius:var(--ace-radius)}.ace-segmented>.ace-btn:last-child{border-top-right-radius:var(--ace-radius);border-bottom-right-radius:var(--ace-radius)}.ace-segmented>.ace-btn[aria-pressed=true],.ace-segmented>.ace-btn:focus-visible{z-index:1}.ace-segmented.ace-segmented--xs>.ace-btn{height:24px;padding:0 8px;font-size:10px}.ace-segmented.ace-segmented--sm>.ace-btn{height:36px;padding:0 12px;font-size:12px}.ace-field{display:flex;flex-direction:column;gap:6px;min-width:0;font-family:var(--ace-font)}.ace-label{display:block;font-family:var(--ace-font);font-size:14px;font-weight:500;line-height:1;color:var(--ace-foreground);user-select:none}.ace-label .ace-required,.ace-required{color:var(--ace-destructive)}.ace-hint,.ace-error{margin:0;font-family:var(--ace-font);font-size:12px;line-height:1.4}.ace-hint{color:var(--ace-muted-foreground)}.ace-error{color:var(--ace-destructive-text)}.ace-input,.ace-textarea,.ace-select,.ace-input-group{display:flex;width:100%;min-width:0;margin:0;box-sizing:border-box;border:1px solid var(--ace-input);border-radius:var(--ace-radius);font-family:var(--ace-font);font-size:16px;line-height:1.4;color:var(--ace-foreground);background-color:var(--ace-surface-to);background-image:linear-gradient(to bottom,var(--ace-surface-from),var(--ace-surface-to));box-shadow:inset 0 1px 0 0 var(--ace-surface-highlight),var(--ace-shadow-xs);transition:color var(--ace-transition),box-shadow var(--ace-transition),border-color var(--ace-transition);-webkit-appearance:none;appearance:none}@media (min-width: 768px){.ace-input,.ace-textarea,.ace-select,.ace-input-group{font-size:14px}}.ace-input,.ace-select{height:36px;padding:4px 12px}.ace-input.ace-input--lg,.ace-select.ace-select--lg{height:40px}.ace-textarea{min-height:80px;padding:8px 12px;resize:vertical}.ace-input::placeholder,.ace-textarea::placeholder,.ace-input-group input::placeholder{color:var(--ace-muted-foreground);opacity:1}.ace-input::selection,.ace-textarea::selection{background:var(--ace-primary);color:var(--ace-primary-foreground)}.ace-input[type=file]{padding-top:3px;padding-bottom:3px}.ace-input::file-selector-button{height:28px;margin-right:8px;border:0;background:transparent;font:inherit;font-weight:500;color:var(--ace-foreground)}.ace-input:focus,.ace-textarea:focus,.ace-select:focus,.ace-input-group:focus-within{outline:none;border-color:var(--ace-ring);box-shadow:inset 0 1px 0 0 var(--ace-surface-highlight),0 0 0 3px color-mix(in srgb,var(--ace-ring) 50%,transparent)}.ace-input.is-invalid,.ace-input[aria-invalid=true],.ace-textarea.is-invalid,.ace-textarea[aria-invalid=true],.ace-select.is-invalid,.ace-select[aria-invalid=true],.ace-input-group.is-invalid{border-color:var(--ace-destructive)}.ace-input.is-invalid:focus,.ace-input[aria-invalid=true]:focus,.ace-textarea.is-invalid:focus,.ace-textarea[aria-invalid=true]:focus,.ace-select.is-invalid:focus,.ace-select[aria-invalid=true]:focus,.ace-input-group.is-invalid:focus-within{border-color:var(--ace-destructive);box-shadow:inset 0 1px 0 0 var(--ace-surface-highlight),0 0 0 3px color-mix(in srgb,var(--ace-destructive) var(--ace-invalid-ring),transparent)}.ace-input:disabled,.ace-textarea:disabled,.ace-select:disabled,.ace-input-group.is-disabled{cursor:not-allowed;opacity:.5}.ace-select{padding-right:32px;line-height:1;cursor:pointer;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E"),linear-gradient(to bottom,var(--ace-surface-from),var(--ace-surface-to));background-repeat:no-repeat,repeat;background-position:right 8px center,0 0;background-size:16px 16px,auto}.ace-select[multiple],.ace-select[size]:not([size="1"]){height:auto;padding-right:12px;background-image:linear-gradient(to bottom,var(--ace-surface-from),var(--ace-surface-to))}.ace-input[type=date],.ace-input[type=datetime-local],.ace-input[type=time]{accent-color:var(--ace-primary)}.ace-input-group{align-items:center;gap:8px;height:36px;padding:0 12px;cursor:text}.ace-input-group>input{flex:1;min-width:0;height:100%;padding:0;margin:0;border:0;outline:0;background:transparent;box-shadow:none;font:inherit;color:inherit}.ace-input-group>input:focus{outline:0;box-shadow:none}.ace-input-group>svg{width:16px;height:16px;flex-shrink:0;color:var(--ace-muted-foreground)}.ace-input-group>.ace-addon{flex-shrink:0;color:var(--ace-muted-foreground);white-space:nowrap}.ace-check{display:inline-flex;align-items:center;gap:8px;font-family:var(--ace-font);font-size:14px;color:var(--ace-foreground);cursor:pointer}.ace-check>input[type=checkbox],.ace-check>input[type=radio]{width:16px;height:16px;margin:0;accent-color:var(--ace-primary);cursor:pointer}.ace-check>input:focus-visible{outline:2px solid var(--ace-ring);outline-offset:2px}.ace-check:has(>input:disabled){cursor:not-allowed;opacity:.5}.ace-switch{display:inline-flex;align-items:center;gap:10px;font-family:var(--ace-font);font-size:14px;color:var(--ace-foreground);cursor:pointer}.ace-switch>input{position:relative;width:36px;height:20px;margin:0;flex-shrink:0;border-radius:999px;border:0;-webkit-appearance:none;appearance:none;cursor:pointer;background:var(--ace-input);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ace-foreground) 6%,transparent);transition:background-color var(--ace-transition)}.ace-switch>input:before{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0003;transition:transform var(--ace-transition)}.ace-switch>input:checked{background:var(--ace-primary)}.ace-switch>input:checked:before{transform:translate(16px)}.ace-switch>input:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--ace-ring) 40%,transparent)}.ace-switch:has(>input:disabled){cursor:not-allowed;opacity:.5}.ace-badge{display:inline-flex;align-items:center;gap:4px;height:18px;padding:0 6px;border-radius:var(--ace-radius-sm);font-family:var(--ace-font);font-size:10px;font-weight:600;line-height:1;white-space:nowrap;vertical-align:middle;color:color-mix(in srgb,var(--ace-foreground) 80%,transparent);background-color:var(--ace-surface-to);background-image:linear-gradient(to bottom,var(--ace-surface-from),var(--ace-surface-to));box-shadow:0 0 0 1px var(--ace-surface-ring),inset 0 1px 0 0 var(--ace-surface-highlight),0 1px 1px #0000000d}.ace-badge.ace-badge--md{height:22px;padding:0 8px;font-size:12px}.ace-badge svg{width:12px;height:12px}.ace-badge.ace-badge--primary,.ace-badge.ace-badge--success,.ace-badge.ace-badge--warning,.ace-badge.ace-badge--danger,.ace-badge.ace-badge--info{--ace-badge-from: color-mix(in oklch, var(--ace-badge-tone), white 8%);--ace-badge-ring: color-mix(in oklch, var(--ace-badge-tone), black 12%);--ace-badge-highlight: color-mix(in oklch, var(--ace-badge-tone), white 28%);color:#fff;background-color:var(--ace-badge-tone);background-image:linear-gradient(to bottom,var(--ace-badge-from),var(--ace-badge-tone));box-shadow:0 0 0 1px var(--ace-badge-ring),inset 0 1px 0 0 var(--ace-badge-highlight),0 1px 1px #0000000f}.ace-badge.ace-badge--primary{--ace-badge-tone: color-mix(in oklch, var(--ace-primary), black 20%)}.ace-badge.ace-badge--success{--ace-badge-tone: var(--ace-tone-success)}.ace-badge.ace-badge--warning{--ace-badge-tone: var(--ace-tone-warning)}.ace-badge.ace-badge--danger{--ace-badge-tone: var(--ace-tone-danger)}.ace-badge.ace-badge--info{--ace-badge-tone: var(--ace-tone-info)}.ace-btn.ace-choice-card{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px;height:auto;padding:14px 16px;text-align:left;white-space:normal;line-height:1.4}.ace-btn.ace-choice-card.is-selected,.ace-btn.ace-choice-card[aria-pressed=true],.ace-btn.ace-choice-card:has(>input:checked){box-shadow:0 0 0 2px var(--ace-primary),inset 0 1px 0 0 var(--ace-surface-highlight),var(--ace-shadow-xs)}.ace-btn.ace-choice-card:has(>input:focus-visible){box-shadow:0 0 0 1px var(--ace-surface-ring),0 0 0 4px color-mix(in oklch,var(--ace-ring),transparent 75%)}.ace-btn.ace-choice-card.is-selected:has(>input:focus-visible),.ace-btn.ace-choice-card:has(>input:checked:focus-visible){box-shadow:0 0 0 2px var(--ace-primary),0 0 0 5px color-mix(in oklch,var(--ace-ring),transparent 75%)}.ace-choice-card>input[type=radio],.ace-choice-card>input[type=checkbox]{position:absolute;opacity:0;pointer-events:none}:root{--ace-dp-brand: var(--ace-primary);--ace-dp-band: color-mix(in oklch, var(--ace-dp-brand), black 15%);--ace-dp-edge-from: color-mix(in oklch, var(--ace-dp-brand), black 20%);--ace-dp-edge-to: color-mix(in oklch, var(--ace-dp-brand), black 30%);--ace-dp-edge-ring: color-mix(in oklch, var(--ace-dp-brand), black 38%);--ace-dp-preview: color-mix(in oklch, var(--ace-dp-brand), transparent 78%);--ace-dp-preview-edge: color-mix(in oklch, var(--ace-dp-brand), transparent 62%);--ace-dp-hover: color-mix(in oklch, var(--ace-dp-brand), transparent 88%);--ace-popover: #ffffff;--ace-popover-border: #f3f4f6;--ace-popover-shadow: 0 20px 25px -5px rgb(229 231 235 / .5), 0 8px 10px -6px rgb(229 231 235 / .5);--ace-weekday: #9ca3af}.dark,[data-theme=dark]{--ace-popover: #18181b;--ace-popover-border: #27272a;--ace-popover-shadow: 0 20px 25px -5px rgb(0 0 0 / .6), 0 8px 10px -6px rgb(0 0 0 / .6);--ace-weekday: #71717a}@media (prefers-color-scheme: dark){.ace-auto-dark:not([data-theme=light]){--ace-popover: #18181b;--ace-popover-border: #27272a;--ace-popover-shadow: 0 20px 25px -5px rgb(0 0 0 / .6), 0 8px 10px -6px rgb(0 0 0 / .6);--ace-weekday: #71717a}}.ace-datepicker{position:relative;display:block;width:100%}.ace-date-toggle{display:inline-flex;flex-shrink:0;padding:0;margin:0;border:0;background:transparent;color:var(--ace-muted-foreground);cursor:pointer}.ace-date-toggle:hover{color:var(--ace-foreground)}.ace-date-toggle:focus-visible{outline:2px solid var(--ace-ring);outline-offset:2px;border-radius:4px}.ace-date-toggle svg{width:16px;height:16px}.ace-input-group.ace-date-trigger{justify-content:flex-start;text-align:left;cursor:pointer}.ace-date-trigger:focus-visible{outline:none;border-color:var(--ace-ring);box-shadow:inset 0 1px 0 0 var(--ace-surface-highlight),0 0 0 3px color-mix(in srgb,var(--ace-ring) 50%,transparent)}.ace-date-trigger>svg{width:14px;height:14px}.ace-date-trigger .ace-date-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ace-date-trigger .ace-date-label.is-empty{color:var(--ace-muted-foreground)}.ace-input-group.ace-date-trigger:disabled{cursor:not-allowed;opacity:.5}.ace-dp-backdrop{position:fixed;inset:0;z-index:1099;background:#0000004d}.ace-dp{position:fixed;z-index:1100;box-sizing:border-box;width:300px;max-width:calc(100vw - 16px);padding:16px;border:1px solid var(--ace-popover-border);border-radius:16px;background:var(--ace-popover);box-shadow:var(--ace-popover-shadow);font-family:var(--ace-font);color:var(--ace-foreground);animation:ace-dp-in .15s ease-out}.ace-dp.ace-dp--range{width:320px;top:50%;left:50%;transform:translate(-50%,-50%);animation:none}@keyframes ace-dp-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}.ace-dp-head,.ace-dp-nav{display:flex;align-items:center;justify-content:space-between}.ace-dp-head{margin-bottom:12px}.ace-dp-nav{margin-bottom:8px}.ace-dp--range .ace-dp-nav{margin-bottom:12px}.ace-dp-title{font-size:14px;font-weight:600;text-transform:capitalize}.ace-dp-month{font-size:13px;font-weight:600;text-transform:capitalize}.ace-dp .ace-btn.ace-dp-navbtn{width:28px;height:28px;padding:0;border-radius:var(--ace-radius-sm)}.ace-dp .ace-btn.ace-dp-navbtn svg{width:14px;height:14px}.ace-dp .ace-btn.ace-dp-yearbtn{height:32px;padding:0 12px;gap:6px;font-size:12px}.ace-dp .ace-btn.ace-dp-yearbtn svg{width:12px;height:12px}.ace-dp-year{position:relative}.ace-dp-years{position:absolute;right:0;z-index:1;margin-top:4px;max-height:192px;overflow:auto;padding:4px 0;border:1px solid var(--ace-popover-border);border-radius:12px;background:var(--ace-popover);box-shadow:var(--ace-popover-shadow)}.ace-dp-years button{display:flex;align-items:center;gap:6px;width:100%;padding:6px 16px;border:0;background:transparent;font:inherit;font-size:12px;text-align:left;white-space:nowrap;color:var(--ace-muted-foreground);cursor:pointer}.ace-dp-years button:hover{background:var(--ace-surface-hover-to)}.ace-dp-years button[aria-selected=true]{font-weight:600;color:var(--ace-foreground);background:color-mix(in srgb,var(--ace-primary) 10%,transparent)}.ace-dp-years button svg{width:12px;height:12px;color:var(--ace-primary)}.ace-dp-years button .ace-dp-check{display:inline-block;width:12px}.ace-dp-weekdays,.ace-dp-grid{display:grid;grid-template-columns:repeat(7,1fr)}.ace-dp-weekdays{margin-bottom:4px}.ace-dp-weekdays>div{padding:4px 0;text-align:center;font-size:11px;font-weight:500;text-transform:uppercase;color:var(--ace-weekday)}.ace-dp-grid{row-gap:4px}.ace-dp-cell{position:relative;display:flex;height:36px;align-items:center;justify-content:center}.ace-dp-cell[data-band]{background:var(--ace-dp-band-color)}.ace-dp-cell[data-band=range]{--ace-dp-band-color: var(--ace-dp-band)}.ace-dp-cell[data-band=preview]{--ace-dp-band-color: var(--ace-dp-preview)}.ace-dp-cell[data-band-edge=start]{background:linear-gradient(to right,transparent 50%,var(--ace-dp-band-color) 50%)}.ace-dp-cell[data-band-edge=end]{background:linear-gradient(to left,transparent 50%,var(--ace-dp-band-color) 50%)}.ace-dp-cell[data-band-edge=both],.ace-dp-cell[data-band-edge=start]:nth-child(7n),.ace-dp-cell[data-band-edge=end]:nth-child(7n+1){background:transparent}.ace-dp-cell[data-band]:not([data-band-edge]):nth-child(7n+1){border-top-left-radius:9999px;border-bottom-left-radius:9999px}.ace-dp-cell[data-band]:not([data-band-edge]):nth-child(7n){border-top-right-radius:9999px;border-bottom-right-radius:9999px}.ace-dp-day{position:relative;display:flex;width:36px;height:36px;align-items:center;justify-content:center;padding:0;margin:0;border:0;border-radius:9999px;background:transparent;font-family:inherit;font-size:13px;font-variant-numeric:tabular-nums;color:var(--ace-foreground);cursor:pointer;transition:background-color .15s,color .15s,box-shadow .15s}.ace-dp-day[data-outside]{color:var(--ace-muted-foreground)}.ace-dp-day:hover:not(:disabled):not([data-selected]):not([data-in-range]){background-color:var(--ace-dp-hover)}.ace-dp-day:focus-visible{outline:2px solid var(--ace-ring);outline-offset:2px}.ace-dp-day:disabled{cursor:not-allowed;color:var(--ace-muted-foreground);opacity:.45;text-decoration:line-through}.ace-dp-day[data-today]{font-weight:600}.ace-dp-day[data-today]:after{content:"";position:absolute;bottom:4px;left:50%;width:4px;height:4px;transform:translate(-50%);border-radius:9999px;background:var(--ace-dp-brand)}.ace-dp-day[data-in-range]{color:#fff;font-weight:500}.ace-dp-day[data-in-range]:hover:not(:disabled){background-color:#ffffff29}.ace-dp-day[data-selected]{color:#fff;font-weight:600;background-color:var(--ace-dp-edge-to);background-image:linear-gradient(to bottom,var(--ace-dp-edge-from),var(--ace-dp-edge-to));box-shadow:0 0 0 1px var(--ace-dp-edge-ring),inset 0 1px #ffffff2e,0 1px 2px #0000001f}.ace-dp-day[data-selected]:focus-visible,.ace-dp-day[data-in-range]:focus-visible{outline-color:var(--ace-foreground)}.ace-dp-day[data-selected][data-today]:after,.ace-dp-day[data-in-range][data-today]:after{background:#fff}.ace-dp-day[data-preview-end]{background-color:var(--ace-dp-preview-edge);box-shadow:inset 0 0 0 1.5px var(--ace-dp-brand)}.ace-dp-foot{margin-top:16px;padding-top:16px;border-top:1px solid var(--ace-popover-border)}.ace-dp-times{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.ace-dp-times>div{min-width:0}.ace-dp-times label{display:block;margin-bottom:4px;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ace-weekday)}.ace-dp-times .ace-input-group{height:36px;padding:0 8px 0 10px;font-size:13px}.ace-dp-times .ace-input-group>svg{width:14px;height:14px}.ace-dp-times input{font-variant-numeric:tabular-nums}.ace-dp-actions{display:flex;align-items:center;justify-content:space-between;margin-top:12px}.ace-dp-actions .ace-btn{height:32px}:root{--ace-menu-border: #e5e7eb;--ace-menu-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--ace-menu-hover: #f3f4f6;--ace-menu-sublabel: #9ca3af}.dark,[data-theme=dark]{--ace-menu-border: #3f3f46;--ace-menu-shadow: 0 10px 15px -3px rgb(0 0 0 / .5), 0 4px 6px -4px rgb(0 0 0 / .5);--ace-menu-hover: #27272a;--ace-menu-sublabel: #71717a}@media (prefers-color-scheme: dark){.ace-auto-dark:not([data-theme=light]){--ace-menu-border: #3f3f46;--ace-menu-shadow: 0 10px 15px -3px rgb(0 0 0 / .5), 0 4px 6px -4px rgb(0 0 0 / .5);--ace-menu-hover: #27272a;--ace-menu-sublabel: #71717a}}.ace-select-native{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;border:0!important;white-space:nowrap!important}.ace-select-wrap{position:relative;display:block;width:100%;min-width:0}button.ace-select,input.ace-select{align-items:center;text-align:left;line-height:1.4}.ace-select .ace-select-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ace-select .ace-select-value.is-placeholder,input.ace-select::placeholder{color:var(--ace-muted-foreground);opacity:1}input.ace-select,input.ace-select[aria-expanded=true]{cursor:text}.ace-select-wrap.has-clear input.ace-select{padding-right:52px}.ace-select-clear{position:absolute;top:0;bottom:0;right:28px;display:flex;align-items:center;padding:0 2px;border:0;background:transparent;color:var(--ace-muted-foreground);cursor:pointer}.ace-select-clear:hover{color:var(--ace-foreground)}.ace-select-clear[hidden]{display:none}.ace-select-clear svg{width:14px;height:14px}.ace-menu{position:fixed;z-index:1100;box-sizing:border-box;max-height:224px;overflow:auto;margin:0;padding:0;list-style:none;border:1px solid var(--ace-menu-border);border-radius:12px;background:var(--ace-popover);box-shadow:var(--ace-menu-shadow);font-family:var(--ace-font);animation:ace-dp-in .12s ease-out}.ace-menu-item{display:block;width:100%;padding:8px 12px;font-size:14px;line-height:1.4;color:var(--ace-foreground);cursor:pointer;user-select:none;transition:background-color .1s}.ace-menu-item:hover{background:var(--ace-menu-hover)}.ace-menu-item[data-active]{background:color-mix(in srgb,var(--ace-primary) 10%,transparent)}.ace-menu-item[aria-selected=true]{font-weight:600;color:var(--ace-primary)}.ace-menu-item[aria-disabled=true]{opacity:.45;cursor:not-allowed;background:none}.ace-menu-item .ace-menu-label,.ace-menu-item .ace-menu-sublabel{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ace-menu-item .ace-menu-sublabel{font-family:Geist Mono,ui-monospace,monospace;font-size:11px;font-weight:400;color:var(--ace-menu-sublabel)}.ace-menu-group{padding:8px 12px 4px;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ace-menu-sublabel);cursor:default}.ace-menu-empty{padding:10px 12px;font-size:14px;color:var(--ace-menu-sublabel)}:root{--ace-primary: #fc5731;--ace-primary-foreground: #ffffff;--ace-attention: #d97706;--ace-destructive: #dc2626;--ace-destructive-text: #dc2626;--ace-tone-success: #047857;--ace-tone-warning: #b45309;--ace-tone-danger: #b91c1c;--ace-tone-info: #2563eb;--ace-radius: 8px;--ace-radius-sm: 6px;--ace-font: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif}.dark,[data-theme=dark]{--ace-attention: #b45309;--ace-destructive-text: #f87171}@media (prefers-color-scheme: dark){.ace-auto-dark:not([data-theme=light]){--ace-attention: #b45309;--ace-destructive-text: #f87171}}
|
|
1
|
+
/*! AceCSS v1.1.0 | MIT License | https://acecss.dev */
|
|
2
|
+
:root{--ace-primary: #fc5731;--ace-primary-foreground: #ffffff;--ace-attention: #d97706;--ace-destructive: #dc2626;--ace-destructive-foreground: #ffffff;--ace-destructive-text: #dc2626;--ace-background: #ffffff;--ace-page: #fafafa;--ace-foreground: #111827;--ace-muted-foreground: #6b7280;--ace-border: #e5e7eb;--ace-input: #e5e7eb;--ace-ring: var(--ace-primary);--ace-invalid-ring: 20%;--ace-surface-from: #ffffff;--ace-surface-to: #f8f8f9;--ace-surface-hover-from: #fafafa;--ace-surface-hover-to: #f1f1f3;--ace-surface-ring: var(--ace-input);--ace-surface-highlight: #ffffff;--ace-tone-success: #047857;--ace-tone-warning: #b45309;--ace-tone-danger: #b91c1c;--ace-tone-info: #2563eb;--ace-radius: 8px;--ace-radius-sm: 6px;--ace-font: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--ace-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05);--ace-transition: .2s ease}.dark,[data-theme=dark]{--ace-attention: #b45309;--ace-destructive-text: #f87171;--ace-invalid-ring: 40%;--ace-background: #18181b;--ace-page: #09090b;--ace-foreground: #fafafa;--ace-muted-foreground: #a1a1aa;--ace-border: #3f3f46;--ace-input: #3f3f46;--ace-surface-from: #2a2a2e;--ace-surface-to: #222225;--ace-surface-hover-from: #323236;--ace-surface-hover-to: #29292c;--ace-surface-ring: #3f3f46;--ace-surface-highlight: rgb(255 255 255 / .06);color-scheme:dark}@media (prefers-color-scheme: dark){.ace-auto-dark:not([data-theme=light]){--ace-attention: #b45309;--ace-destructive-text: #f87171;--ace-invalid-ring: 40%;--ace-background: #18181b;--ace-page: #09090b;--ace-foreground: #fafafa;--ace-muted-foreground: #a1a1aa;--ace-border: #3f3f46;--ace-input: #3f3f46;--ace-surface-from: #2a2a2e;--ace-surface-to: #222225;--ace-surface-hover-from: #323236;--ace-surface-hover-to: #29292c;--ace-surface-ring: #3f3f46;--ace-surface-highlight: rgb(255 255 255 / .06);color-scheme:dark}}.ace-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;margin:0;border:0;border-radius:var(--ace-radius);font-family:var(--ace-font);font-size:14px;font-weight:500;line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer;user-select:none;-webkit-appearance:none;appearance:none;transition:opacity var(--ace-transition),box-shadow var(--ace-transition),background-image var(--ace-transition),background-color var(--ace-transition)}.ace-btn svg{width:16px;height:16px;flex-shrink:0;pointer-events:none}.ace-btn:focus-visible{outline:none}.ace-btn:disabled,.ace-btn[aria-disabled=true]{cursor:not-allowed;opacity:.5;pointer-events:none}.ace-btn.ace-btn--sm{height:36px;padding:0 12px}.ace-btn.ace-btn--lg{height:44px;padding:0 32px}.ace-btn.ace-btn--icon{width:40px;padding:0}.ace-btn.ace-btn--sm.ace-btn--icon{width:36px}.ace-btn.ace-btn--lg.ace-btn--icon{width:44px}.ace-btn.ace-btn--toolbar{height:36px;padding:0 12px;font-size:12px}.ace-btn.ace-btn--toolbar.ace-btn--icon{width:36px;padding:0}.ace-btn.ace-btn--block{display:flex;width:100%}.ace-btn:is(.ace-btn--primary,.ace-btn--danger,.ace-btn--blue,.ace-btn--green,.ace-btn--purple,.ace-btn--pink,.ace-btn--black){--ace-btn-tone: var(--ace-tone, var(--ace-primary));--ace-btn-fg: var(--ace-tone-fg, var(--ace-primary-foreground));--ace-btn-ring: color-mix(in oklch, var(--ace-btn-tone), black 10%);--ace-btn-light: color-mix(in oklch, var(--ace-btn-tone), white 30%);--ace-btn-from: color-mix(in oklch, var(--ace-btn-tone), white 15%);color:var(--ace-btn-fg);background-color:var(--ace-btn-light);background-image:linear-gradient(to bottom,var(--ace-btn-from),var(--ace-btn-tone));box-shadow:0 0 0 1px var(--ace-btn-ring),inset 0 1px 0 0 var(--ace-btn-light),var(--ace-shadow-xs)}.ace-btn:is(.ace-btn--primary,.ace-btn--danger,.ace-btn--blue,.ace-btn--green,.ace-btn--purple,.ace-btn--pink,.ace-btn--black):hover{color:var(--ace-btn-fg);background-image:linear-gradient(to bottom,var(--ace-btn-light),var(--ace-btn-tone))}.ace-btn:is(.ace-btn--primary,.ace-btn--danger,.ace-btn--blue,.ace-btn--green,.ace-btn--purple,.ace-btn--pink,.ace-btn--black):active{background-image:linear-gradient(to bottom,var(--ace-btn-tone),var(--ace-btn-tone))}.ace-btn:is(.ace-btn--primary,.ace-btn--danger,.ace-btn--blue,.ace-btn--green,.ace-btn--purple,.ace-btn--pink,.ace-btn--black):focus-visible{box-shadow:0 0 0 1px var(--ace-btn-ring),inset 0 1px 0 0 var(--ace-btn-light),0 0 0 4px color-mix(in oklch,var(--ace-btn-tone),transparent 70%)}.ace-btn.ace-btn--primary.ace-btn--attention{--ace-btn-tone: var(--ace-attention);--ace-btn-fg: #fff}.ace-btn.ace-btn--secondary{color:var(--ace-foreground);background-color:var(--ace-surface-to);background-image:linear-gradient(to bottom,var(--ace-surface-from),var(--ace-surface-to));box-shadow:0 0 0 1px var(--ace-surface-ring),inset 0 1px 0 0 var(--ace-surface-highlight),var(--ace-shadow-xs)}.ace-btn.ace-btn--secondary:hover{color:var(--ace-foreground);background-image:linear-gradient(to bottom,var(--ace-surface-hover-from),var(--ace-surface-hover-to))}.ace-btn.ace-btn--secondary:active{background-image:linear-gradient(to bottom,var(--ace-surface-hover-to),var(--ace-surface-hover-to))}.ace-btn.ace-btn--secondary:focus-visible{box-shadow:0 0 0 1px var(--ace-surface-ring),inset 0 1px 0 0 var(--ace-surface-highlight),0 0 0 4px color-mix(in oklch,var(--ace-ring),transparent 75%)}.ace-btn.ace-btn--secondary.ace-btn--destructive,.ace-btn.ace-btn--secondary.ace-btn--destructive:hover{color:var(--ace-destructive-text)}.ace-btn.ace-btn--danger{--ace-btn-tone: color-mix(in oklch, var(--ace-destructive), black 10%);--ace-btn-fg: var(--ace-destructive-foreground)}.ace-btn.ace-btn--blue{--ace-btn-tone: #1d4ed8;--ace-btn-fg: #fff}.ace-btn.ace-btn--green{--ace-btn-tone: #166534;--ace-btn-fg: #fff}.ace-btn.ace-btn--purple{--ace-btn-tone: #6d28d9;--ace-btn-fg: #fff}.ace-btn.ace-btn--pink{--ace-btn-tone: #be185d;--ace-btn-fg: #fff}.ace-btn.ace-btn--black{--ace-btn-tone: #18181b;--ace-btn-fg: #fff}.dark .ace-btn.ace-btn--black,[data-theme=dark] .ace-btn.ace-btn--black{--ace-btn-tone: #3f3f46}@media (prefers-color-scheme: dark){.ace-auto-dark:not([data-theme=light]) .ace-btn.ace-btn--black{--ace-btn-tone: #3f3f46}}.ace-hover-surface{border-radius:var(--ace-radius);transition:box-shadow var(--ace-transition),background-image var(--ace-transition)}.ace-hover-surface:hover{background-color:var(--ace-surface-to);background-image:linear-gradient(to bottom,var(--ace-surface-from),var(--ace-surface-to));box-shadow:0 0 0 1px var(--ace-surface-ring),inset 0 1px 0 0 var(--ace-surface-highlight),var(--ace-shadow-xs)}.ace-btn[aria-busy=true]{position:relative;color:transparent!important;pointer-events:none}.ace-btn[aria-busy=true]:after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-color:var(--ace-foreground) transparent var(--ace-foreground) var(--ace-foreground);animation:ace-spin .7s linear infinite}.ace-btn:is(.ace-btn--primary,.ace-btn--danger,.ace-btn--blue,.ace-btn--green,.ace-btn--purple,.ace-btn--pink,.ace-btn--black)[aria-busy=true]:after{border-color:var(--ace-btn-fg) transparent var(--ace-btn-fg) var(--ace-btn-fg)}@keyframes ace-spin{to{transform:rotate(360deg)}}.ace-segmented{display:inline-flex;isolation:isolate}.ace-segmented.ace-segmented--block{display:flex;width:100%}.ace-segmented.ace-segmented--block>.ace-btn{flex:1}.ace-segmented>.ace-btn{position:relative;border-radius:0}.ace-segmented>.ace-btn:first-child{border-top-left-radius:var(--ace-radius);border-bottom-left-radius:var(--ace-radius)}.ace-segmented>.ace-btn:last-child{border-top-right-radius:var(--ace-radius);border-bottom-right-radius:var(--ace-radius)}.ace-segmented>.ace-btn[aria-pressed=true],.ace-segmented>.ace-btn:focus-visible{z-index:1}.ace-segmented.ace-segmented--xs>.ace-btn{height:24px;padding:0 8px;font-size:10px}.ace-segmented.ace-segmented--sm>.ace-btn{height:36px;padding:0 12px;font-size:12px}.ace-field{display:flex;flex-direction:column;gap:6px;min-width:0;font-family:var(--ace-font)}.ace-label{display:block;font-family:var(--ace-font);font-size:14px;font-weight:500;line-height:1;color:var(--ace-foreground);user-select:none}.ace-label .ace-required,.ace-required{color:var(--ace-destructive)}.ace-hint,.ace-error{margin:0;font-family:var(--ace-font);font-size:12px;line-height:1.4}.ace-hint{color:var(--ace-muted-foreground)}.ace-error{color:var(--ace-destructive-text)}.ace-input,.ace-textarea,.ace-select,.ace-input-group{display:flex;width:100%;min-width:0;margin:0;box-sizing:border-box;border:1px solid var(--ace-input);border-radius:var(--ace-radius);font-family:var(--ace-font);font-size:16px;line-height:1.4;color:var(--ace-foreground);background-color:var(--ace-surface-to);background-image:linear-gradient(to bottom,var(--ace-surface-from),var(--ace-surface-to));box-shadow:inset 0 1px 0 0 var(--ace-surface-highlight),var(--ace-shadow-xs);transition:color var(--ace-transition),box-shadow var(--ace-transition),border-color var(--ace-transition);-webkit-appearance:none;appearance:none}@media (min-width: 768px){.ace-input,.ace-textarea,.ace-select,.ace-input-group{font-size:14px}}.ace-input,.ace-select{height:36px;padding:4px 12px}.ace-input.ace-input--lg,.ace-select.ace-select--lg{height:40px}.ace-textarea{min-height:80px;padding:8px 12px;resize:vertical}.ace-input::placeholder,.ace-textarea::placeholder,.ace-input-group input::placeholder{color:var(--ace-muted-foreground);opacity:1}.ace-input::selection,.ace-textarea::selection{background:var(--ace-primary);color:var(--ace-primary-foreground)}.ace-input[type=file]{padding-top:3px;padding-bottom:3px}.ace-input::file-selector-button{height:28px;margin-right:8px;border:0;background:transparent;font:inherit;font-weight:500;color:var(--ace-foreground)}.ace-input:focus,.ace-textarea:focus,.ace-select:focus,.ace-input-group:focus-within{outline:none;border-color:var(--ace-ring);box-shadow:inset 0 1px 0 0 var(--ace-surface-highlight),0 0 0 3px color-mix(in srgb,var(--ace-ring) 50%,transparent)}.ace-input.is-invalid,.ace-input[aria-invalid=true],.ace-textarea.is-invalid,.ace-textarea[aria-invalid=true],.ace-select.is-invalid,.ace-select[aria-invalid=true],.ace-input-group.is-invalid{border-color:var(--ace-destructive)}.ace-input.is-invalid:focus,.ace-input[aria-invalid=true]:focus,.ace-textarea.is-invalid:focus,.ace-textarea[aria-invalid=true]:focus,.ace-select.is-invalid:focus,.ace-select[aria-invalid=true]:focus,.ace-input-group.is-invalid:focus-within{border-color:var(--ace-destructive);box-shadow:inset 0 1px 0 0 var(--ace-surface-highlight),0 0 0 3px color-mix(in srgb,var(--ace-destructive) var(--ace-invalid-ring),transparent)}.ace-input:disabled,.ace-textarea:disabled,.ace-select:disabled,.ace-input-group.is-disabled{cursor:not-allowed;opacity:.5}.ace-select{padding-right:32px;line-height:1;cursor:pointer;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E"),linear-gradient(to bottom,var(--ace-surface-from),var(--ace-surface-to));background-repeat:no-repeat,repeat;background-position:right 8px center,0 0;background-size:16px 16px,auto}.ace-select[multiple],.ace-select[size]:not([size="1"]){height:auto;padding-right:12px;background-image:linear-gradient(to bottom,var(--ace-surface-from),var(--ace-surface-to))}.ace-input[type=date],.ace-input[type=datetime-local],.ace-input[type=time]{accent-color:var(--ace-primary)}.ace-input-group{align-items:center;gap:8px;height:36px;padding:0 12px;cursor:text}.ace-input-group>input{flex:1;min-width:0;height:100%;padding:0;margin:0;border:0;outline:0;background:transparent;box-shadow:none;font:inherit;color:inherit}.ace-input-group>input:focus{outline:0;box-shadow:none}.ace-input-group>svg{width:16px;height:16px;flex-shrink:0;color:var(--ace-muted-foreground)}.ace-input-group>.ace-addon{flex-shrink:0;color:var(--ace-muted-foreground);white-space:nowrap}.ace-check{display:inline-flex;align-items:center;gap:8px;font-family:var(--ace-font);font-size:14px;color:var(--ace-foreground);cursor:pointer}.ace-check>input[type=checkbox],.ace-check>input[type=radio]{width:16px;height:16px;margin:0;accent-color:var(--ace-primary);cursor:pointer}.ace-check>input:focus-visible{outline:2px solid var(--ace-ring);outline-offset:2px}.ace-check:has(>input:disabled){cursor:not-allowed;opacity:.5}.ace-switch{display:inline-flex;align-items:center;gap:10px;font-family:var(--ace-font);font-size:14px;color:var(--ace-foreground);cursor:pointer}.ace-switch>input{position:relative;width:36px;height:20px;margin:0;flex-shrink:0;border-radius:999px;border:0;-webkit-appearance:none;appearance:none;cursor:pointer;background:var(--ace-input);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ace-foreground) 6%,transparent);transition:background-color var(--ace-transition)}.ace-switch>input:before{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0003;transition:transform var(--ace-transition)}.ace-switch>input:checked{background:var(--ace-primary)}.ace-switch>input:checked:before{transform:translate(16px)}.ace-switch>input:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--ace-ring) 40%,transparent)}.ace-switch:has(>input:disabled){cursor:not-allowed;opacity:.5}.ace-badge{display:inline-flex;align-items:center;gap:4px;height:18px;padding:0 6px;border-radius:var(--ace-radius-sm);font-family:var(--ace-font);font-size:10px;font-weight:600;line-height:1;white-space:nowrap;vertical-align:middle;color:color-mix(in srgb,var(--ace-foreground) 80%,transparent);background-color:var(--ace-surface-to);background-image:linear-gradient(to bottom,var(--ace-surface-from),var(--ace-surface-to));box-shadow:0 0 0 1px var(--ace-surface-ring),inset 0 1px 0 0 var(--ace-surface-highlight),0 1px 1px #0000000d}.ace-badge.ace-badge--md{height:22px;padding:0 8px;font-size:12px}.ace-badge svg{width:12px;height:12px}.ace-badge.ace-badge--primary,.ace-badge.ace-badge--success,.ace-badge.ace-badge--warning,.ace-badge.ace-badge--danger,.ace-badge.ace-badge--info{--ace-badge-from: color-mix(in oklch, var(--ace-badge-tone), white 8%);--ace-badge-ring: color-mix(in oklch, var(--ace-badge-tone), black 12%);--ace-badge-highlight: color-mix(in oklch, var(--ace-badge-tone), white 28%);color:#fff;background-color:var(--ace-badge-tone);background-image:linear-gradient(to bottom,var(--ace-badge-from),var(--ace-badge-tone));box-shadow:0 0 0 1px var(--ace-badge-ring),inset 0 1px 0 0 var(--ace-badge-highlight),0 1px 1px #0000000f}.ace-badge.ace-badge--primary{--ace-badge-tone: color-mix(in oklch, var(--ace-primary), black 20%)}.ace-badge.ace-badge--success{--ace-badge-tone: var(--ace-tone-success)}.ace-badge.ace-badge--warning{--ace-badge-tone: var(--ace-tone-warning)}.ace-badge.ace-badge--danger{--ace-badge-tone: var(--ace-tone-danger)}.ace-badge.ace-badge--info{--ace-badge-tone: var(--ace-tone-info)}.ace-btn.ace-choice-card{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px;height:auto;padding:14px 16px;text-align:left;white-space:normal;line-height:1.4}.ace-btn.ace-choice-card.is-selected,.ace-btn.ace-choice-card[aria-pressed=true],.ace-btn.ace-choice-card:has(>input:checked){box-shadow:0 0 0 2px var(--ace-primary),inset 0 1px 0 0 var(--ace-surface-highlight),var(--ace-shadow-xs)}.ace-btn.ace-choice-card:has(>input:focus-visible){box-shadow:0 0 0 1px var(--ace-surface-ring),0 0 0 4px color-mix(in oklch,var(--ace-ring),transparent 75%)}.ace-btn.ace-choice-card.is-selected:has(>input:focus-visible),.ace-btn.ace-choice-card:has(>input:checked:focus-visible){box-shadow:0 0 0 2px var(--ace-primary),0 0 0 5px color-mix(in oklch,var(--ace-ring),transparent 75%)}.ace-choice-card>input[type=radio],.ace-choice-card>input[type=checkbox]{position:absolute;opacity:0;pointer-events:none}:root{--ace-dp-brand: var(--ace-primary);--ace-dp-band: color-mix(in oklch, var(--ace-dp-brand), black 15%);--ace-dp-edge-from: color-mix(in oklch, var(--ace-dp-brand), black 20%);--ace-dp-edge-to: color-mix(in oklch, var(--ace-dp-brand), black 30%);--ace-dp-edge-ring: color-mix(in oklch, var(--ace-dp-brand), black 38%);--ace-dp-preview: color-mix(in oklch, var(--ace-dp-brand), transparent 78%);--ace-dp-preview-edge: color-mix(in oklch, var(--ace-dp-brand), transparent 62%);--ace-dp-hover: color-mix(in oklch, var(--ace-dp-brand), transparent 88%);--ace-popover: #ffffff;--ace-popover-border: #f3f4f6;--ace-popover-shadow: 0 20px 25px -5px rgb(229 231 235 / .5), 0 8px 10px -6px rgb(229 231 235 / .5);--ace-weekday: #9ca3af}.dark,[data-theme=dark]{--ace-popover: #18181b;--ace-popover-border: #27272a;--ace-popover-shadow: 0 20px 25px -5px rgb(0 0 0 / .6), 0 8px 10px -6px rgb(0 0 0 / .6);--ace-weekday: #71717a}@media (prefers-color-scheme: dark){.ace-auto-dark:not([data-theme=light]){--ace-popover: #18181b;--ace-popover-border: #27272a;--ace-popover-shadow: 0 20px 25px -5px rgb(0 0 0 / .6), 0 8px 10px -6px rgb(0 0 0 / .6);--ace-weekday: #71717a}}.ace-datepicker{position:relative;display:block;width:100%}.ace-date-toggle{display:inline-flex;flex-shrink:0;padding:0;margin:0;border:0;background:transparent;color:var(--ace-muted-foreground);cursor:pointer}.ace-date-toggle:hover{color:var(--ace-foreground)}.ace-date-toggle:focus-visible{outline:2px solid var(--ace-ring);outline-offset:2px;border-radius:4px}.ace-date-toggle svg{width:16px;height:16px}.ace-input-group.ace-date-trigger{justify-content:flex-start;text-align:left;cursor:pointer}.ace-date-trigger:focus-visible{outline:none;border-color:var(--ace-ring);box-shadow:inset 0 1px 0 0 var(--ace-surface-highlight),0 0 0 3px color-mix(in srgb,var(--ace-ring) 50%,transparent)}.ace-date-trigger>svg{width:14px;height:14px}.ace-date-trigger .ace-date-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ace-date-trigger .ace-date-label.is-empty{color:var(--ace-muted-foreground)}.ace-input-group.ace-date-trigger:disabled{cursor:not-allowed;opacity:.5}.ace-dp-backdrop{position:fixed;inset:0;z-index:1099;background:#0000004d}.ace-dp{position:fixed;z-index:1100;box-sizing:border-box;width:300px;max-width:calc(100vw - 16px);padding:16px;border:1px solid var(--ace-popover-border);border-radius:16px;background:var(--ace-popover);box-shadow:var(--ace-popover-shadow);font-family:var(--ace-font);color:var(--ace-foreground);animation:ace-dp-in .15s ease-out}.ace-dp.ace-dp--range{width:320px;top:50%;left:50%;transform:translate(-50%,-50%);animation:none}@keyframes ace-dp-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}.ace-dp-head,.ace-dp-nav{display:flex;align-items:center;justify-content:space-between}.ace-dp-head{margin-bottom:12px}.ace-dp-nav{margin-bottom:8px}.ace-dp--range .ace-dp-nav{margin-bottom:12px}.ace-dp-title{font-size:14px;font-weight:600;text-transform:capitalize}.ace-dp-month{font-size:13px;font-weight:600;text-transform:capitalize}.ace-dp .ace-btn.ace-dp-navbtn{width:28px;height:28px;padding:0;border-radius:var(--ace-radius-sm)}.ace-dp .ace-btn.ace-dp-navbtn svg{width:14px;height:14px}.ace-dp .ace-btn.ace-dp-yearbtn{height:32px;padding:0 12px;gap:6px;font-size:12px}.ace-dp .ace-btn.ace-dp-yearbtn svg{width:12px;height:12px}.ace-dp-year{position:relative}.ace-dp-years{position:absolute;right:0;z-index:1;margin-top:4px;max-height:192px;overflow:auto;padding:4px 0;border:1px solid var(--ace-popover-border);border-radius:12px;background:var(--ace-popover);box-shadow:var(--ace-popover-shadow)}.ace-dp-years button{display:flex;align-items:center;gap:6px;width:100%;padding:6px 16px;border:0;background:transparent;font:inherit;font-size:12px;text-align:left;white-space:nowrap;color:var(--ace-muted-foreground);cursor:pointer}.ace-dp-years button:hover{background:var(--ace-surface-hover-to)}.ace-dp-years button[aria-selected=true]{font-weight:600;color:var(--ace-foreground);background:color-mix(in srgb,var(--ace-primary) 10%,transparent)}.ace-dp-years button svg{width:12px;height:12px;color:var(--ace-primary)}.ace-dp-years button .ace-dp-check{display:inline-block;width:12px}.ace-dp-weekdays,.ace-dp-grid{display:grid;grid-template-columns:repeat(7,1fr)}.ace-dp-weekdays{margin-bottom:4px}.ace-dp-weekdays>div{padding:4px 0;text-align:center;font-size:11px;font-weight:500;text-transform:uppercase;color:var(--ace-weekday)}.ace-dp-grid{row-gap:4px}.ace-dp-cell{position:relative;display:flex;height:36px;align-items:center;justify-content:center}.ace-dp-cell[data-band]{background:var(--ace-dp-band-color)}.ace-dp-cell[data-band=range]{--ace-dp-band-color: var(--ace-dp-band)}.ace-dp-cell[data-band=preview]{--ace-dp-band-color: var(--ace-dp-preview)}.ace-dp-cell[data-band-edge=start]{background:linear-gradient(to right,transparent 50%,var(--ace-dp-band-color) 50%)}.ace-dp-cell[data-band-edge=end]{background:linear-gradient(to left,transparent 50%,var(--ace-dp-band-color) 50%)}.ace-dp-cell[data-band-edge=both],.ace-dp-cell[data-band-edge=start]:nth-child(7n),.ace-dp-cell[data-band-edge=end]:nth-child(7n+1){background:transparent}.ace-dp-cell[data-band]:not([data-band-edge]):nth-child(7n+1){border-top-left-radius:9999px;border-bottom-left-radius:9999px}.ace-dp-cell[data-band]:not([data-band-edge]):nth-child(7n){border-top-right-radius:9999px;border-bottom-right-radius:9999px}.ace-dp-day{position:relative;display:flex;width:36px;height:36px;align-items:center;justify-content:center;padding:0;margin:0;border:0;border-radius:9999px;background:transparent;font-family:inherit;font-size:13px;font-variant-numeric:tabular-nums;color:var(--ace-foreground);cursor:pointer;transition:background-color .15s,color .15s,box-shadow .15s}.ace-dp-day[data-outside]{color:var(--ace-muted-foreground)}.ace-dp-day:hover:not(:disabled):not([data-selected]):not([data-in-range]){background-color:var(--ace-dp-hover)}.ace-dp-day:focus-visible{outline:2px solid var(--ace-ring);outline-offset:2px}.ace-dp-day:disabled{cursor:not-allowed;color:var(--ace-muted-foreground);opacity:.45;text-decoration:line-through}.ace-dp-day[data-today]{font-weight:600}.ace-dp-day[data-today]:after{content:"";position:absolute;bottom:4px;left:50%;width:4px;height:4px;transform:translate(-50%);border-radius:9999px;background:var(--ace-dp-brand)}.ace-dp-day[data-in-range]{color:#fff;font-weight:500}.ace-dp-day[data-in-range]:hover:not(:disabled){background-color:#ffffff29}.ace-dp-day[data-selected]{color:#fff;font-weight:600;background-color:var(--ace-dp-edge-to);background-image:linear-gradient(to bottom,var(--ace-dp-edge-from),var(--ace-dp-edge-to));box-shadow:0 0 0 1px var(--ace-dp-edge-ring),inset 0 1px #ffffff2e,0 1px 2px #0000001f}.ace-dp-day[data-selected]:focus-visible,.ace-dp-day[data-in-range]:focus-visible{outline-color:var(--ace-foreground)}.ace-dp-day[data-selected][data-today]:after,.ace-dp-day[data-in-range][data-today]:after{background:#fff}.ace-dp-day[data-preview-end]{background-color:var(--ace-dp-preview-edge);box-shadow:inset 0 0 0 1.5px var(--ace-dp-brand)}.ace-dp-foot{margin-top:16px;padding-top:16px;border-top:1px solid var(--ace-popover-border)}.ace-dp-times{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.ace-dp-times>div{min-width:0}.ace-dp-times label{display:block;margin-bottom:4px;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ace-weekday)}.ace-dp-times .ace-input-group{height:36px;padding:0 8px 0 10px;font-size:13px}.ace-dp-times .ace-input-group>svg{width:14px;height:14px}.ace-dp-times input{font-variant-numeric:tabular-nums}.ace-dp-actions{display:flex;align-items:center;justify-content:space-between;margin-top:12px}.ace-dp-actions .ace-btn{height:32px}:root{--ace-menu-border: #e5e7eb;--ace-menu-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--ace-menu-hover: #f3f4f6;--ace-menu-sublabel: #9ca3af}.dark,[data-theme=dark]{--ace-menu-border: #3f3f46;--ace-menu-shadow: 0 10px 15px -3px rgb(0 0 0 / .5), 0 4px 6px -4px rgb(0 0 0 / .5);--ace-menu-hover: #27272a;--ace-menu-sublabel: #71717a}@media (prefers-color-scheme: dark){.ace-auto-dark:not([data-theme=light]){--ace-menu-border: #3f3f46;--ace-menu-shadow: 0 10px 15px -3px rgb(0 0 0 / .5), 0 4px 6px -4px rgb(0 0 0 / .5);--ace-menu-hover: #27272a;--ace-menu-sublabel: #71717a}}.ace-select-native{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;border:0!important;white-space:nowrap!important}.ace-select-wrap{position:relative;display:block;width:100%;min-width:0}button.ace-select,input.ace-select{align-items:center;text-align:left;line-height:1.4}.ace-select .ace-select-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ace-select .ace-select-value.is-placeholder,input.ace-select::placeholder{color:var(--ace-muted-foreground);opacity:1}input.ace-select,input.ace-select[aria-expanded=true]{cursor:text}.ace-select-wrap.has-clear input.ace-select{padding-right:52px}.ace-select-clear{position:absolute;top:0;bottom:0;right:28px;display:flex;align-items:center;padding:0 2px;border:0;background:transparent;color:var(--ace-muted-foreground);cursor:pointer}.ace-select-clear:hover{color:var(--ace-foreground)}.ace-select-clear[hidden]{display:none}.ace-select-clear svg{width:14px;height:14px}.ace-menu{position:fixed;z-index:1100;box-sizing:border-box;max-height:224px;overflow:auto;margin:0;padding:0;list-style:none;border:1px solid var(--ace-menu-border);border-radius:12px;background:var(--ace-popover);box-shadow:var(--ace-menu-shadow);font-family:var(--ace-font);animation:ace-dp-in .12s ease-out}.ace-menu-item{display:block;width:100%;padding:8px 12px;font-size:14px;line-height:1.4;color:var(--ace-foreground);cursor:pointer;user-select:none;transition:background-color .1s}.ace-menu-item:hover{background:var(--ace-menu-hover)}.ace-menu-item[data-active]{background:color-mix(in srgb,var(--ace-primary) 10%,transparent)}.ace-menu-item[aria-selected=true]{font-weight:600;color:var(--ace-primary)}.ace-menu-item[aria-disabled=true]{opacity:.45;cursor:not-allowed;background:none}.ace-menu-item .ace-menu-label,.ace-menu-item .ace-menu-sublabel{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ace-menu-item .ace-menu-sublabel{font-family:Geist Mono,ui-monospace,monospace;font-size:11px;font-weight:400;color:var(--ace-menu-sublabel)}.ace-menu-group{padding:8px 12px 4px;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ace-menu-sublabel);cursor:default}.ace-menu-empty{padding:10px 12px;font-size:14px;color:var(--ace-menu-sublabel)}.ace-hero-btn{--ace-hero-tone: var(--ace-tone, var(--ace-primary));--ace-hero-bg: #1d1d1d;--ace-hero-fg: #a3a3a3;--ace-hero-scale: 1;--ace-hero-wide: transparent;--ace-hero-inset: rgb(255 255 255 / .04);--ace-hero-ring: 0px;--ace-hero-dots: 0;appearance:none;position:relative;z-index:1;display:inline-flex;align-items:center;gap:12px;min-width:192px;margin:0;padding:16px 28px 16px 22px;border:0;border-radius:29px;outline:none;overflow:visible;cursor:pointer;text-decoration:none;font-family:var(--ace-font);font-size:16px;font-weight:600;line-height:26px;letter-spacing:.005em;white-space:nowrap;color:var(--ace-hero-fg);background-color:var(--ace-hero-bg);-webkit-tap-highlight-color:transparent;transform:scale(var(--ace-hero-scale)) translateZ(0);box-shadow:0 0 120px var(--ace-hero-wide),0 4px 12px #0000000d,0 1px 2px #0000001a,inset 0 1px 1px var(--ace-hero-inset),0 0 0 var(--ace-hero-ring) color-mix(in srgb,var(--ace-hero-tone) 40%,transparent);transition:transform .3s,background-color .3s,box-shadow .3s,color .3s}.ace-hero-btn:before{content:"";position:absolute;z-index:-1;left:15%;right:15%;bottom:-12px;height:24px;border-radius:29px;background:var(--ace-hero-tone);filter:blur(16px);opacity:0;transition:opacity .4s;transform:translateZ(0)}.ace-hero-label{position:relative;z-index:1;display:block}.ace-hero-label:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background-image:linear-gradient(to right,transparent,var(--ace-hero-bg));opacity:.4;transition:opacity .4s}.ace-hero-btn:hover,.ace-hero-btn:focus-visible{--ace-hero-scale: 1.1;--ace-hero-wide: color-mix(in srgb, var(--ace-hero-tone) 60%, transparent);--ace-hero-inset: rgb(255 255 255 / .35);--ace-hero-ring: 4px;--ace-hero-dots: .7;color:#fff;background-color:var(--ace-hero-tone)}.ace-hero-btn:hover:before,.ace-hero-btn:focus-visible:before{opacity:1}.ace-hero-btn:hover .ace-hero-label:before,.ace-hero-btn:focus-visible .ace-hero-label:before{opacity:0}.ace-hero-btn:hover:active{--ace-hero-scale: 1.05}.ace-hero-btn:disabled{cursor:not-allowed;opacity:.5;transform:none}.ace-hero-icon{display:block;flex-shrink:0;width:24px;height:26px;fill:currentColor;overflow:visible;pointer-events:none}.ace-hero-icon path{transform:translateZ(0)}.ace-hero-icon path:nth-child(1){opacity:.25;transform-origin:25% 14.58%}.ace-hero-icon path:nth-child(2){opacity:1;transform-origin:60.42% 50%}.ace-hero-icon path:nth-child(3){opacity:.5;transform-origin:25% 85.42%}.ace-hero-btn:hover .ace-hero-icon path:nth-child(1),.ace-hero-btn:focus-visible .ace-hero-icon path:nth-child(1){animation:ace-hero-star-1 2s ease-in-out infinite}.ace-hero-btn:hover .ace-hero-icon path:nth-child(2),.ace-hero-btn:focus-visible .ace-hero-icon path:nth-child(2){animation:ace-hero-star-2 2s ease-in-out infinite}.ace-hero-btn:hover .ace-hero-icon path:nth-child(3),.ace-hero-btn:focus-visible .ace-hero-icon path:nth-child(3){animation:ace-hero-star-3 2s ease-in-out infinite}@keyframes ace-hero-star-1{0%,15%{transform:scale(1);opacity:.25}30%{transform:scale(1.5);opacity:.5}45%,to{transform:scale(1);opacity:.25}}@keyframes ace-hero-star-2{0%{transform:scale(1);opacity:1}15%,30%{transform:scale(.5);opacity:.25}45%{transform:scale(1.15);opacity:1}62%,to{transform:scale(1);opacity:1}}@keyframes ace-hero-star-3{0%{transform:scale(1);opacity:.5}15%{transform:scale(1.25);opacity:1}30%,to{transform:scale(1);opacity:.5}}.ace-hero-stroke{position:absolute;inset:0;pointer-events:none;mix-blend-mode:hard-light}.ace-hero-stroke svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible;fill:none;stroke:color-mix(in oklch,var(--ace-hero-tone),white 30%);stroke-width:.75px;stroke-dasharray:1.5 14;stroke-dashoffset:22;opacity:0}.ace-hero-stroke svg+svg{stroke-width:1px;stroke-opacity:.5;filter:blur(3px)}.ace-hero-btn:hover .ace-hero-stroke svg,.ace-hero-btn:focus-visible .ace-hero-stroke svg{animation:ace-hero-stroke 2s linear infinite}@keyframes ace-hero-stroke{0%{opacity:0}25%,75%{opacity:1}95%,to{stroke-dashoffset:6;opacity:0}}.ace-hero-dots{position:absolute;inset:0;z-index:10;pointer-events:none;opacity:var(--ace-hero-dots);transition:opacity .15s}.ace-hero-dots i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);border-radius:50%;background:color-mix(in oklch,var(--ace-hero-tone),white 25%);transform:scale(0);animation:ace-hero-dot var(--d) linear var(--delay) infinite paused}.ace-hero-btn:hover .ace-hero-dots i,.ace-hero-btn:focus-visible .ace-hero-dots i{animation-play-state:running}@keyframes ace-hero-dot{0%{transform:translate(0) scale(0)}15%{transform:translate(calc(var(--dx) * .15),calc(var(--dy) * .15)) scale(1)}60%{transform:translate(calc(var(--dx) * .6),calc(var(--dy) * .6)) scale(1)}to{transform:translate(var(--dx),var(--dy)) scale(0)}}.dark .ace-hero-btn,[data-theme=dark] .ace-hero-btn{--ace-hero-bg: #27272a;--ace-hero-inset: rgb(255 255 255 / .08)}@media (prefers-color-scheme: dark){.ace-auto-dark:not([data-theme=light]) .ace-hero-btn{--ace-hero-bg: #27272a;--ace-hero-inset: rgb(255 255 255 / .08)}}@media (prefers-reduced-motion: reduce){.ace-hero-btn{transition:background-color .2s,color .2s,box-shadow .2s}.ace-hero-btn:hover,.ace-hero-btn:focus-visible{--ace-hero-scale: 1;--ace-hero-dots: 0}.ace-hero-btn .ace-hero-icon path,.ace-hero-btn .ace-hero-stroke svg{animation:none!important}}:root{--ace-primary: #fc5731;--ace-primary-foreground: #ffffff;--ace-attention: #d97706;--ace-destructive: #dc2626;--ace-destructive-text: #dc2626;--ace-tone-success: #047857;--ace-tone-warning: #b45309;--ace-tone-danger: #b91c1c;--ace-tone-info: #2563eb;--ace-radius: 8px;--ace-radius-sm: 6px;--ace-font: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif}.dark,[data-theme=dark]{--ace-attention: #b45309;--ace-destructive-text: #f87171}@media (prefers-color-scheme: dark){.ace-auto-dark:not([data-theme=light]){--ace-attention: #b45309;--ace-destructive-text: #f87171}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@acecss/core",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "Buttons, inputs, dropdowns and a date range picker in one CSS file. No framework, no build step, ~12 KB gzipped.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"css",
|
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
"components",
|
|
9
9
|
"design-system",
|
|
10
10
|
"buttons",
|
|
11
|
+
"hero-button",
|
|
11
12
|
"forms",
|
|
12
13
|
"datepicker",
|
|
13
14
|
"date-range-picker",
|
|
@@ -39,6 +40,7 @@
|
|
|
39
40
|
"./ace.min.css": "./dist/ace.min.css",
|
|
40
41
|
"./datepicker": "./dist/ace-datepicker.js",
|
|
41
42
|
"./select": "./dist/ace-select.js",
|
|
43
|
+
"./hero": "./dist/ace-hero.js",
|
|
42
44
|
"./dist/*": "./dist/*",
|
|
43
45
|
"./package.json": "./package.json"
|
|
44
46
|
},
|