@editora/ui-core 0.1.10 → 0.1.13
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 +5 -5
- package/dist/alert-dialog.cjs.js +18 -18
- package/dist/alert-dialog.esm.js +130 -117
- package/dist/app-header.cjs.js +22 -2
- package/dist/app-header.esm.js +22 -2
- package/dist/badge.cjs.js +5 -5
- package/dist/badge.esm.js +9 -8
- package/dist/color-picker.cjs.js +4 -4
- package/dist/color-picker.esm.js +39 -31
- package/dist/combobox.cjs.js +21 -21
- package/dist/combobox.esm.js +79 -40
- package/dist/command-palette.cjs.js +1 -1
- package/dist/command-palette.esm.js +2 -2
- package/dist/components/date-time-utils.d.ts +2 -1
- package/dist/components/date-time-utils.d.ts.map +1 -1
- package/dist/components/ui-alert-dialog.d.ts +2 -0
- package/dist/components/ui-alert-dialog.d.ts.map +1 -1
- package/dist/components/ui-app-header.d.ts.map +1 -1
- package/dist/components/ui-badge.d.ts.map +1 -1
- package/dist/components/ui-color-picker.d.ts.map +1 -1
- package/dist/components/ui-combobox.d.ts +4 -1
- package/dist/components/ui-combobox.d.ts.map +1 -1
- package/dist/components/ui-date-picker.d.ts +3 -0
- package/dist/components/ui-date-picker.d.ts.map +1 -1
- package/dist/components/ui-date-range-picker.d.ts +3 -0
- package/dist/components/ui-date-range-picker.d.ts.map +1 -1
- package/dist/components/ui-date-range-time-picker.d.ts +3 -0
- package/dist/components/ui-date-range-time-picker.d.ts.map +1 -1
- package/dist/components/ui-date-time-picker.d.ts +3 -0
- package/dist/components/ui-date-time-picker.d.ts.map +1 -1
- package/dist/components/ui-dialog.d.ts +3 -0
- package/dist/components/ui-dialog.d.ts.map +1 -1
- package/dist/components/ui-drawer.d.ts +14 -0
- package/dist/components/ui-drawer.d.ts.map +1 -1
- package/dist/components/ui-floating-toolbar.d.ts.map +1 -1
- package/dist/components/ui-icon.d.ts.map +1 -1
- package/dist/components/ui-menu.d.ts +1 -0
- package/dist/components/ui-menu.d.ts.map +1 -1
- package/dist/components/ui-menubar.d.ts +1 -0
- package/dist/components/ui-menubar.d.ts.map +1 -1
- package/dist/components/ui-quick-actions.d.ts.map +1 -1
- package/dist/components/ui-radio.d.ts +47 -0
- package/dist/components/ui-radio.d.ts.map +1 -0
- package/dist/components/ui-select.d.ts +8 -0
- package/dist/components/ui-select.d.ts.map +1 -1
- package/dist/components/ui-selection-popup.d.ts.map +1 -1
- package/dist/components/ui-split-button.d.ts +2 -0
- package/dist/components/ui-split-button.d.ts.map +1 -1
- package/dist/components/ui-stepper.d.ts.map +1 -1
- package/dist/components/ui-time-picker.d.ts +3 -0
- package/dist/components/ui-time-picker.d.ts.map +1 -1
- package/dist/context-menu.cjs.js +2 -2
- package/dist/context-menu.esm.js +2 -2
- package/dist/date-field.cjs.js +1 -1
- package/dist/date-field.esm.js +2 -2
- package/dist/date-picker.cjs.js +13 -13
- package/dist/date-picker.esm.js +100 -67
- package/dist/date-range-picker.cjs.js +14 -14
- package/dist/date-range-picker.esm.js +98 -65
- package/dist/date-range-time-picker.cjs.js +13 -13
- package/dist/date-range-time-picker.esm.js +76 -45
- package/dist/date-time-picker.cjs.js +13 -13
- package/dist/date-time-picker.esm.js +132 -101
- package/dist/date-time-utils-378ecc21.js +1 -0
- package/dist/{date-time-utils-bdceb7af.mjs → date-time-utils-a8b17ea7.mjs} +128 -102
- package/dist/dialog.cjs.js +29 -20
- package/dist/dialog.esm.js +90 -70
- package/dist/drawer.cjs.js +16 -16
- package/dist/drawer.esm.js +216 -98
- package/dist/floating-toolbar.cjs.js +3 -13
- package/dist/floating-toolbar.esm.js +17 -27
- package/dist/hover-card.cjs.js +1 -1
- package/dist/hover-card.esm.js +1 -1
- package/dist/{icon-eaa486b3.js → icon-9e9da03b.js} +4 -4
- package/dist/{icon-9ed13093.mjs → icon-e2a85cc1.mjs} +22 -18
- package/dist/icon.cjs.js +1 -1
- package/dist/icon.esm.js +1 -1
- package/dist/icons.d.ts +1 -1
- package/dist/icons.d.ts.map +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.esm.js +246 -244
- package/dist/menu.cjs.js +2 -2
- package/dist/menu.esm.js +118 -110
- package/dist/menubar.cjs.js +5 -5
- package/dist/menubar.esm.js +83 -78
- package/dist/{overlayManager-ece06517.js → overlayManager-0eda4e08.js} +1 -1
- package/dist/{overlayManager-86454af7.mjs → overlayManager-5bbd4dc3.mjs} +1 -1
- package/dist/popover.cjs.js +1 -1
- package/dist/popover.esm.js +2 -2
- package/dist/{portal-1cf392ca.mjs → portal-9060f7a6.mjs} +7 -7
- package/dist/portal-d9bae456.js +1 -0
- package/dist/{positioner-fbd61bf1.mjs → positioner-16f3cca1.mjs} +16 -16
- package/dist/positioner-43b1c75a.js +1 -0
- package/dist/positioner.cjs.js +1 -1
- package/dist/positioner.esm.js +1 -1
- package/dist/quick-actions.cjs.js +10 -4
- package/dist/quick-actions.esm.js +27 -21
- package/dist/radio.cjs.js +259 -0
- package/dist/radio.esm.js +455 -0
- package/dist/{runtime-5f282bc8.js → runtime-668914fe.js} +1 -1
- package/dist/{runtime-4ac0107b.mjs → runtime-864efe2f.mjs} +1 -1
- package/dist/runtime.cjs.js +1 -1
- package/dist/runtime.esm.js +2 -2
- package/dist/scroll-lock-31da444f.mjs +56 -0
- package/dist/scroll-lock-d7b0df21.js +1 -0
- package/dist/scroll-lock.d.ts.map +1 -1
- package/dist/select.cjs.js +14 -15
- package/dist/select.esm.js +117 -97
- package/dist/selection-popup.cjs.js +4 -7
- package/dist/selection-popup.esm.js +8 -11
- package/dist/split-button.cjs.js +137 -62
- package/dist/split-button.esm.js +235 -145
- package/dist/standalone/radio.d.ts +2 -0
- package/dist/standalone/radio.d.ts.map +1 -0
- package/dist/stepper.cjs.js +19 -50
- package/dist/stepper.esm.js +17 -48
- package/dist/time-field.cjs.js +1 -1
- package/dist/time-field.esm.js +14 -14
- package/dist/time-picker.cjs.js +15 -15
- package/dist/time-picker.esm.js +99 -68
- package/dist/tooltip.cjs.js +1 -1
- package/dist/tooltip.esm.js +1 -1
- package/package.json +2 -2
- package/dist/date-time-utils-5cf58cd0.js +0 -1
- package/dist/portal-d8d7fbca.js +0 -1
- package/dist/positioner-accc6e5f.js +0 -1
- package/dist/scroll-lock-48793569.js +0 -1
- package/dist/scroll-lock-9de6d328.mjs +0 -53
|
@@ -8,7 +8,7 @@ function C(r, t, p = "top") {
|
|
|
8
8
|
const f = typeof p == "string" ? { placement: p } : p, s = f.placement || "top", c = typeof f.offset == "number" ? f.offset : 8, h = !!f.shift, e = r.getBoundingClientRect(), l = t.getBoundingClientRect();
|
|
9
9
|
let o = 0, i = 0;
|
|
10
10
|
s === "top" ? (o = e.top - l.height - c, i = e.left + (e.width - l.width) / 2) : s === "bottom" ? (o = e.bottom + c, i = e.left + (e.width - l.width) / 2) : s === "left" ? (o = e.top + (e.height - l.height) / 2, i = e.left - l.width - c) : (o = e.top + (e.height - l.height) / 2, i = e.right + c);
|
|
11
|
-
const
|
|
11
|
+
const b = e.left + e.width / 2, m = e.top + e.height / 2, g = Math.round(b - i), y = Math.round(m - o);
|
|
12
12
|
if (h) {
|
|
13
13
|
const n = window.innerWidth || document.documentElement.clientWidth, u = window.innerHeight || document.documentElement.clientHeight;
|
|
14
14
|
if (s === "top" || s === "bottom") {
|
|
@@ -46,7 +46,7 @@ function L(r, t, p) {
|
|
|
46
46
|
} catch {
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
|
-
return window.addEventListener("scroll", o, !0), window.addEventListener("resize", o), e.push(() => window.removeEventListener("scroll", o, !0)), e.push(() => window.removeEventListener("resize", o)), e.push(() => {
|
|
49
|
+
return window.addEventListener("scroll", o, { passive: !0, capture: !0 }), window.addEventListener("resize", o), e.push(() => window.removeEventListener("scroll", o, !0)), e.push(() => window.removeEventListener("resize", o)), e.push(() => {
|
|
50
50
|
f && f.disconnect(), f = null;
|
|
51
51
|
}), e.push(() => {
|
|
52
52
|
s && s.disconnect(), s = null;
|
|
@@ -74,17 +74,17 @@ function H(r, t, p = "top") {
|
|
|
74
74
|
return;
|
|
75
75
|
const u = r.getBoundingClientRect(), d = u.left + u.width / 2, a = u.top + u.height / 2;
|
|
76
76
|
if (y === "top" || y === "bottom") {
|
|
77
|
-
const
|
|
77
|
+
const v = d - g, x = 8, w = t.offsetWidth - 8, M = Math.max(x, Math.min(w, v));
|
|
78
78
|
n.style.left = `${Math.round(M)}px`, n.style.top = "";
|
|
79
79
|
} else {
|
|
80
|
-
const
|
|
80
|
+
const v = a - m, x = 8, w = t.offsetHeight - 8, M = Math.max(x, Math.min(w, v));
|
|
81
81
|
n.style.top = `${Math.round(M)}px`, n.style.left = "";
|
|
82
82
|
}
|
|
83
83
|
}
|
|
84
|
-
function
|
|
84
|
+
function b() {
|
|
85
85
|
var u;
|
|
86
86
|
if (r && typeof r.getBoundingClientRect == "function" && r instanceof HTMLElement) {
|
|
87
|
-
const d = r, a = (u = d.getRootNode) == null ? void 0 : u.call(d),
|
|
87
|
+
const d = r, a = (u = d.getRootNode) == null ? void 0 : u.call(d), v = a instanceof ShadowRoot ? a.host : null, x = d.isConnected || document.body.contains(d) || (v ? document.body.contains(v) : !1), w = window.getComputedStyle(d), M = w.display !== "none" && w.visibility !== "hidden" && parseFloat(w.opacity || "1") > 0;
|
|
88
88
|
if (!x || !M) {
|
|
89
89
|
try {
|
|
90
90
|
t.parentElement && t.parentElement.removeChild(t);
|
|
@@ -98,7 +98,7 @@ function H(r, t, p = "top") {
|
|
|
98
98
|
let n = m;
|
|
99
99
|
h && (m.top < 0 && s === "top" || m.top + t.offsetHeight > y && s === "bottom") && (n = C(r, t, { placement: s === "top" ? "bottom" : "top", offset: c, shift: e })), n.left < 4 && (n.left = 4), n.left + t.offsetWidth > g - 4 && (n.left = g - t.offsetWidth - 4), n.top < 4 && (n.top = 4), n.top + t.offsetHeight > y - 4 && (n.top = y - t.offsetHeight - 4), t.style.top = `${Math.round(n.top)}px`, t.style.left = `${Math.round(n.left)}px`, i(n.top, n.left, n.placement), t.setAttribute("data-placement", n.placement);
|
|
100
100
|
}
|
|
101
|
-
return
|
|
101
|
+
return b(), o = L(r, t, b), () => {
|
|
102
102
|
try {
|
|
103
103
|
t.parentElement && t.parentElement.removeChild(t);
|
|
104
104
|
} catch {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";function z(r="ui-portal-root"){if(typeof document>"u")return null;let t=document.getElementById(r);return t||(t=document.createElement("div"),t.id=r,t.style.position="fixed",t.style.top="0",t.style.left="0",t.style.width="100%",t.style.height="0",t.style.pointerEvents="none",t.style.zIndex="var(--ui-portal-z, 1600)",document.body.appendChild(t)),t.style.zIndex||(t.style.zIndex="var(--ui-portal-z, 1600)"),t}function C(r,t,p="top"){const f=typeof p=="string"?{placement:p}:p,s=f.placement||"top",c=typeof f.offset=="number"?f.offset:8,h=!!f.shift,e=r.getBoundingClientRect(),l=t.getBoundingClientRect();let o=0,i=0;s==="top"?(o=e.top-l.height-c,i=e.left+(e.width-l.width)/2):s==="bottom"?(o=e.bottom+c,i=e.left+(e.width-l.width)/2):s==="left"?(o=e.top+(e.height-l.height)/2,i=e.left-l.width-c):(o=e.top+(e.height-l.height)/2,i=e.right+c);const b=e.left+e.width/2,m=e.top+e.height/2,g=Math.round(b-i),y=Math.round(m-o);if(h){const n=window.innerWidth||document.documentElement.clientWidth,u=window.innerHeight||document.documentElement.clientHeight;if(s==="top"||s==="bottom"){const a=n-l.width-4;i<4&&(i=Math.min(a,i+(4-i))),i>a&&(i=Math.max(4,i-(i-a)))}else{const a=u-l.height-4;o<4&&(o=Math.min(a,o+(4-o))),o>a&&(o=Math.max(4,o-(o-a)))}}return{top:o,left:i,placement:s,x:g,y}}function L(r,t,p){let f=null,s=null,c=null,h=0;const e=[],l=()=>{h||(h=requestAnimationFrame(()=>{h=0,p()}))},o=()=>l();if(typeof ResizeObserver<"u"){f=new ResizeObserver(l),s=new ResizeObserver(l);try{f.observe(r)}catch{}try{s.observe(t)}catch{}}if(typeof MutationObserver<"u"){c=new MutationObserver(l);try{c.observe(r,{attributes:!0,childList:!1,subtree:!1})}catch{}}return window.addEventListener("scroll",o,{passive:!0,capture:!0}),window.addEventListener("resize",o),e.push(()=>window.removeEventListener("scroll",o,!0)),e.push(()=>window.removeEventListener("resize",o)),e.push(()=>{f&&f.disconnect(),f=null}),e.push(()=>{s&&s.disconnect(),s=null}),e.push(()=>{c&&c.disconnect(),c=null}),e.push(()=>{h&&(cancelAnimationFrame(h),h=0)}),()=>e.forEach(i=>{try{i()}catch{}})}function R(r,t,p="top"){const f=typeof p=="string"?{placement:p}:p,s=f.placement||"top",c=typeof f.offset=="number"?f.offset:8,h=f.flip!==!1,e=!!f.shift,l=z();if(!l)return;t.style.position="absolute",t.style.pointerEvents="auto",l.appendChild(t);let o=()=>{};function i(m,g,y){const n=t.querySelector(".arrow");if(!n)return;const u=r.getBoundingClientRect(),d=u.left+u.width/2,a=u.top+u.height/2;if(y==="top"||y==="bottom"){const v=d-g,M=8,w=t.offsetWidth-8,x=Math.max(M,Math.min(w,v));n.style.left=`${Math.round(x)}px`,n.style.top=""}else{const v=a-m,M=8,w=t.offsetHeight-8,x=Math.max(M,Math.min(w,v));n.style.top=`${Math.round(x)}px`,n.style.left=""}}function b(){var u;if(r&&typeof r.getBoundingClientRect=="function"&&r instanceof HTMLElement){const d=r,a=(u=d.getRootNode)==null?void 0:u.call(d),v=a instanceof ShadowRoot?a.host:null,M=d.isConnected||document.body.contains(d)||(v?document.body.contains(v):!1),w=window.getComputedStyle(d),x=w.display!=="none"&&w.visibility!=="hidden"&&parseFloat(w.opacity||"1")>0;if(!M||!x){try{t.parentElement&&t.parentElement.removeChild(t)}catch{}o();return}}const m=C(r,t,{placement:s,offset:c,shift:e}),g=window.innerWidth||document.documentElement.clientWidth,y=window.innerHeight||document.documentElement.clientHeight;let n=m;h&&(m.top<0&&s==="top"||m.top+t.offsetHeight>y&&s==="bottom")&&(n=C(r,t,{placement:s==="top"?"bottom":"top",offset:c,shift:e})),n.left<4&&(n.left=4),n.left+t.offsetWidth>g-4&&(n.left=g-t.offsetWidth-4),n.top<4&&(n.top=4),n.top+t.offsetHeight>y-4&&(n.top=y-t.offsetHeight-4),t.style.top=`${Math.round(n.top)}px`,t.style.left=`${Math.round(n.left)}px`,i(n.top,n.left,n.placement),t.setAttribute("data-placement",n.placement)}return b(),o=L(r,t,b),()=>{try{t.parentElement&&t.parentElement.removeChild(t)}catch{}o()}}exports.autoUpdatePosition=L;exports.computePosition=C;exports.createPortalContainer=z;exports.showPortalFor=R;
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
function w(e) {
|
|
2
2
|
return e instanceof HTMLElement;
|
|
3
3
|
}
|
|
4
|
-
function
|
|
4
|
+
function v(e) {
|
|
5
5
|
return !!e && typeof e.top == "number" && typeof e.left == "number";
|
|
6
6
|
}
|
|
7
7
|
function g(e) {
|
|
8
|
-
return w(e) ? e.getBoundingClientRect() :
|
|
8
|
+
return w(e) ? e.getBoundingClientRect() : v(e) ? e : e.getBoundingClientRect();
|
|
9
9
|
}
|
|
10
|
-
function
|
|
10
|
+
function P(e) {
|
|
11
11
|
if (e instanceof HTMLElement) {
|
|
12
12
|
const i = e.getBoundingClientRect();
|
|
13
13
|
return {
|
|
@@ -55,28 +55,28 @@ function m(e, n, t) {
|
|
|
55
55
|
function E(e, n, t, i) {
|
|
56
56
|
const { side: o } = h(n.placement), r = t.left + t.width / 2, s = t.top + t.height / 2;
|
|
57
57
|
if (o === "top" || o === "bottom") {
|
|
58
|
-
const l = Math.max(8, i.width - 8),
|
|
59
|
-
e.style.left = `${Math.round(
|
|
58
|
+
const l = Math.max(8, i.width - 8), a = m(r - n.x, 8, l);
|
|
59
|
+
e.style.left = `${Math.round(a)}px`, e.style.top = "";
|
|
60
60
|
} else {
|
|
61
|
-
const l = Math.max(8, i.height - 8),
|
|
62
|
-
e.style.top = `${Math.round(
|
|
61
|
+
const l = Math.max(8, i.height - 8), a = m(s - n.y, 8, l);
|
|
62
|
+
e.style.top = `${Math.round(a)}px`, e.style.left = "";
|
|
63
63
|
}
|
|
64
64
|
}
|
|
65
65
|
function D(e, n, t = {}) {
|
|
66
|
-
const i = g(e), o = w(n) ? n.getBoundingClientRect() : n, r =
|
|
67
|
-
let
|
|
68
|
-
if (t.flip && x(
|
|
69
|
-
const
|
|
70
|
-
x(
|
|
66
|
+
const i = g(e), o = w(n) ? n.getBoundingClientRect() : n, r = P(t.boundary ?? null), s = t.placement || "bottom", c = typeof t.offset == "number" ? t.offset : 8, l = typeof t.crossOffset == "number" ? t.crossOffset : 0;
|
|
67
|
+
let a = s, f = b(i, o, a, c, l);
|
|
68
|
+
if (t.flip && x(a, f, o, r)) {
|
|
69
|
+
const d = M(a), u = b(i, o, d, c, l);
|
|
70
|
+
x(d, u, o, r) || (a = d, f = u);
|
|
71
71
|
}
|
|
72
72
|
if (t.shift || t.fitViewport) {
|
|
73
|
-
const
|
|
74
|
-
f.x = m(f.x,
|
|
73
|
+
const d = r.left + 4, u = r.top + 4, y = Math.max(d, r.right - o.width - 4), p = Math.max(u, r.bottom - o.height - 4);
|
|
74
|
+
f.x = m(f.x, d, y), f.y = m(f.y, u, p);
|
|
75
75
|
}
|
|
76
76
|
return {
|
|
77
77
|
x: f.x,
|
|
78
78
|
y: f.y,
|
|
79
|
-
placement:
|
|
79
|
+
placement: a,
|
|
80
80
|
availableWidth: Math.max(0, r.right - f.x - 4),
|
|
81
81
|
availableHeight: Math.max(0, r.bottom - f.y - 4)
|
|
82
82
|
};
|
|
@@ -95,7 +95,7 @@ function A(e, n, t, i) {
|
|
|
95
95
|
o = 0, t();
|
|
96
96
|
}));
|
|
97
97
|
}, l = () => c();
|
|
98
|
-
return i.observeWindowResize && window.addEventListener("resize", l), i.observeScroll && window.addEventListener("scroll", l, !0), typeof ResizeObserver < "u" && (i.observeAnchorResize && w(e) && (r = new ResizeObserver(c), r.observe(e)), i.observeFloatingResize && (s = new ResizeObserver(c), s.observe(n))), () => {
|
|
98
|
+
return i.observeWindowResize && window.addEventListener("resize", l), i.observeScroll && window.addEventListener("scroll", l, { passive: !0, capture: !0 }), typeof ResizeObserver < "u" && (i.observeAnchorResize && w(e) && (r = new ResizeObserver(c), r.observe(e)), i.observeFloatingResize && (s = new ResizeObserver(c), s.observe(n))), () => {
|
|
99
99
|
i.observeWindowResize && window.removeEventListener("resize", l), i.observeScroll && window.removeEventListener("scroll", l, !0), r && r.disconnect(), s && s.disconnect(), o && cancelAnimationFrame(o);
|
|
100
100
|
};
|
|
101
101
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";function w(e){return e instanceof HTMLElement}function v(e){return!!e&&typeof e.top=="number"&&typeof e.left=="number"}function g(e){return w(e)?e.getBoundingClientRect():v(e)?e:e.getBoundingClientRect()}function M(e){if(e instanceof HTMLElement){const n=e.getBoundingClientRect();return{top:n.top,left:n.left,right:n.right,bottom:n.bottom,width:n.width,height:n.height}}const i=window.innerWidth||document.documentElement.clientWidth||0,t=window.innerHeight||document.documentElement.clientHeight||0;return{top:0,left:0,right:i,bottom:t,width:i,height:t}}function h(e){const[i,t]=e.split("-");return{side:i,align:t||"center"}}function E(e){const{side:i,align:t}=h(e);return`${i==="top"?"bottom":i==="bottom"?"top":i==="left"?"right":"left"}${t==="center"?"":`-${t}`}`}function b(e,i,t,n,o){const{side:r,align:s}=h(t);let c=0,l=0;return r==="top"||r==="bottom"?(s==="start"?c=e.left:s==="end"?c=e.right-i.width:c=e.left+(e.width-i.width)/2,l=r==="top"?e.top-i.height-n:e.bottom+n,c+=o):(s==="start"?l=e.top:s==="end"?l=e.bottom-i.height:l=e.top+(e.height-i.height)/2,c=r==="left"?e.left-i.width-n:e.right+n,l+=o),{x:c,y:l}}function x(e,i,t,n){const{side:o}=h(e);return o==="top"?i.y<n.top+4:o==="bottom"?i.y+t.height>n.bottom-4:o==="left"?i.x<n.left+4:i.x+t.width>n.right-4}function m(e,i,t){return Math.min(t,Math.max(i,e))}function D(e,i,t,n){const{side:o}=h(i.placement),r=t.left+t.width/2,s=t.top+t.height/2;if(o==="top"||o==="bottom"){const l=Math.max(8,n.width-8),u=m(r-i.x,8,l);e.style.left=`${Math.round(u)}px`,e.style.top=""}else{const l=Math.max(8,n.height-8),u=m(s-i.y,8,l);e.style.top=`${Math.round(u)}px`,e.style.left=""}}function y(e,i,t={}){const n=g(e),o=w(i)?i.getBoundingClientRect():i,r=M(t.boundary??null),s=t.placement||"bottom",c=typeof t.offset=="number"?t.offset:8,l=typeof t.crossOffset=="number"?t.crossOffset:0;let u=s,f=b(n,o,u,c,l);if(t.flip&&x(u,f,o,r)){const a=E(u),d=b(n,o,a,c,l);x(a,d,o,r)||(u=a,f=d)}if(t.shift||t.fitViewport){const a=r.left+4,d=r.top+4,p=Math.max(a,r.right-o.width-4),P=Math.max(d,r.bottom-o.height-4);f.x=m(f.x,a,p),f.y=m(f.y,d,P)}return{x:f.x,y:f.y,placement:u,availableWidth:Math.max(0,r.right-f.x-4),availableHeight:Math.max(0,r.bottom-f.y-4)}}function W(e,i){return i!=="absolute"?e:{...e,x:e.x+window.scrollX,y:e.y+window.scrollY}}function A(e,i,t,n){let o=0,r=null,s=null;const c=()=>{o||(o=requestAnimationFrame(()=>{o=0,t()}))},l=()=>c();return n.observeWindowResize&&window.addEventListener("resize",l),n.observeScroll&&window.addEventListener("scroll",l,{passive:!0,capture:!0}),typeof ResizeObserver<"u"&&(n.observeAnchorResize&&w(e)&&(r=new ResizeObserver(c),r.observe(e)),n.observeFloatingResize&&(s=new ResizeObserver(c),s.observe(i))),()=>{n.observeWindowResize&&window.removeEventListener("resize",l),n.observeScroll&&window.removeEventListener("scroll",l,!0),r&&r.disconnect(),s&&s.disconnect(),o&&cancelAnimationFrame(o)}}function I(e){if(!(e.floating instanceof HTMLElement))throw new Error("createPositioner requires a valid floating HTMLElement");const i=e.strategy||"fixed",t=e.floating,n=A(e.anchor,t,o,{observeWindowResize:e.observeWindowResize??!0,observeScroll:e.observeScroll??!0,observeAnchorResize:e.observeAnchorResize??!0,observeFloatingResize:e.observeFloatingResize??!(e.fitViewport||e.matchWidth)});function o(){var c;const r=y(e.anchor,t,e),s=W(r,i);if(t.style.position=i,t.style.left=`${Math.round(s.x)}px`,t.style.top=`${Math.round(s.y)}px`,t.style.setProperty("--ui-positioner-x",`${Math.round(s.x)}px`),t.style.setProperty("--ui-positioner-y",`${Math.round(s.y)}px`),e.matchWidth){const l=g(e.anchor);t.style.width=`${Math.round(l.width)}px`}return e.fitViewport&&(t.style.maxWidth=`${Math.round(r.availableWidth)}px`,t.style.maxHeight=`${Math.round(r.availableHeight)}px`),t.setAttribute("data-placement",r.placement),e.arrow instanceof HTMLElement&&D(e.arrow,r,g(e.anchor),t.getBoundingClientRect()),(c=e.onUpdate)==null||c.call(e,r),r}return o(),{update:o,destroy(){n()}}}exports.computePositionState=y;exports.createPositioner=I;
|
package/dist/positioner.cjs.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("./ElementBase-1b301e7f.js"),a=require("./positioner-
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("./ElementBase-1b301e7f.js"),a=require("./positioner-43b1c75a.js"),h=`
|
|
2
2
|
:host {
|
|
3
3
|
display: contents;
|
|
4
4
|
color-scheme: light dark;
|
package/dist/positioner.esm.js
CHANGED
|
@@ -124,6 +124,7 @@
|
|
|
124
124
|
:host([floating]) {
|
|
125
125
|
position: fixed;
|
|
126
126
|
z-index: 1250;
|
|
127
|
+
contain: layout paint;
|
|
127
128
|
}
|
|
128
129
|
|
|
129
130
|
:host([floating][placement="bottom-right"]) {
|
|
@@ -146,6 +147,11 @@
|
|
|
146
147
|
top: 16px;
|
|
147
148
|
}
|
|
148
149
|
|
|
150
|
+
:host([floating]) .root {
|
|
151
|
+
transform: translateZ(0);
|
|
152
|
+
backface-visibility: hidden;
|
|
153
|
+
}
|
|
154
|
+
|
|
149
155
|
:host([headless]) .root {
|
|
150
156
|
display: none;
|
|
151
157
|
}
|
|
@@ -191,11 +197,11 @@
|
|
|
191
197
|
border-color: Highlight;
|
|
192
198
|
}
|
|
193
199
|
}
|
|
194
|
-
`;let g=0;function l(u){return u.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")}class d extends h.ElementBase{constructor(){super(),this._instanceId=++g,this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this)}static get observedAttributes(){return["open","mode","orientation","variant","floating","placement","collapsible","label","headless"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onClick),this.root.addEventListener("keydown",this._onKeyDown),this.getAttribute("mode")!=="fab"&&!this.hasAttribute("collapsible")&&!this.hasAttribute("open")&&this.setAttribute("open","")}disconnectedCallback(){this.root.removeEventListener("click",this._onClick),this.root.removeEventListener("keydown",this._onKeyDown),super.disconnectedCallback()}attributeChangedCallback(e,i,t){if(i!==t){if(e==="open"){this._syncOpenUi();return}this.isConnected&&this.requestRender()}}get open(){return this.hasAttribute("open")}set open(e){e?this.setAttribute("open",""):this.removeAttribute("open")}show(){this.toggle(!0)}hide(){this.toggle(!1)}toggle(e){const i=typeof e=="boolean"?e:!this.open;this.open=i;const t={open:i};this.dispatchEvent(new CustomEvent(i?"open":"close",{detail:t,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:t,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("toggle",{detail:t,bubbles:!0,composed:!0}))}_actions(){const e=this.root.querySelector('slot[name="action"]');return e?e.assignedElements({flatten:!0}).filter(i=>i instanceof HTMLElement):[]}_actionsId(){return`ui-quick-actions-${this._instanceId}-actions`}_syncActionAccessibility(e){this._actions().forEach((t,
|
|
200
|
+
`;let g=0;function l(u){return u.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")}class d extends h.ElementBase{constructor(){super(),this._instanceId=++g,this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this)}static get observedAttributes(){return["open","mode","orientation","variant","floating","placement","collapsible","label","headless"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onClick),this.root.addEventListener("keydown",this._onKeyDown),this.getAttribute("mode")!=="fab"&&!this.hasAttribute("collapsible")&&!this.hasAttribute("open")&&this.setAttribute("open","")}disconnectedCallback(){this.root.removeEventListener("click",this._onClick),this.root.removeEventListener("keydown",this._onKeyDown),super.disconnectedCallback()}attributeChangedCallback(e,i,t){if(i!==t){if(e==="open"){this._syncOpenUi();return}this.isConnected&&this.requestRender()}}get open(){return this.hasAttribute("open")}set open(e){e?this.setAttribute("open",""):this.removeAttribute("open")}show(){this.toggle(!0)}hide(){this.toggle(!1)}toggle(e){const i=typeof e=="boolean"?e:!this.open;this.open=i;const t={open:i};this.dispatchEvent(new CustomEvent(i?"open":"close",{detail:t,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:t,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("toggle",{detail:t,bubbles:!0,composed:!0}))}_actions(){const e=this.root.querySelector('slot[name="action"]');return e?e.assignedElements({flatten:!0}).filter(i=>i instanceof HTMLElement):[]}_actionsId(){return`ui-quick-actions-${this._instanceId}-actions`}_syncActionAccessibility(e){this._actions().forEach((t,n)=>{var r;if(t.id||(t.id=`ui-quick-actions-${this._instanceId}-action-${n+1}`),t.hasAttribute("role")||t.setAttribute("role","button"),!t.hasAttribute("aria-label")){const o=(r=t.textContent)==null?void 0:r.trim();o&&t.setAttribute("aria-label",o)}if(e){const o=t.getAttribute("data-ui-quick-tabindex");o!=null?(o==="__none__"?t.removeAttribute("tabindex"):t.setAttribute("tabindex",o),t.removeAttribute("data-ui-quick-tabindex")):t.hasAttribute("tabindex")||t.setAttribute("tabindex","0"),t.setAttribute("aria-hidden","false");return}t.hasAttribute("data-ui-quick-tabindex")||t.setAttribute("data-ui-quick-tabindex",t.getAttribute("tabindex")??"__none__"),t.setAttribute("tabindex","-1"),t.setAttribute("aria-hidden","true")})}_onClick(e){var s;const i=e.target;if(!i)return;if(i.closest(".toggle")){this.toggle();return}const n=e.composedPath(),r=this._actions(),o=r.find(b=>n.includes(b));if(!o)return;const a=r.indexOf(o),c={index:a,id:o.id||o.getAttribute("data-id")||String(a+1),label:o.getAttribute("aria-label")||((s=o.textContent)==null?void 0:s.trim())||`Action ${a+1}`};this.dispatchEvent(new CustomEvent("select",{detail:c,bubbles:!0,composed:!0})),this.getAttribute("mode")==="fab"&&this.hide()}_moveFocus(e,i){const t=this._actions();if(!t.length)return;const n=t.indexOf(e);if(n<0)return;const r=(n+i+t.length)%t.length;t[r].focus()}_onKeyDown(e){if(e.key==="Escape"&&this.open&&this.getAttribute("mode")==="fab"){e.preventDefault(),this.hide();return}const i=e.target;if(!i)return;const n=this._actions().find(s=>s===i||s.contains(i));if(!n)return;const r=this.getAttribute("orientation")==="vertical"||this.getAttribute("mode")==="fab",o=!r&&getComputedStyle(this).direction==="rtl",a=r?"ArrowDown":o?"ArrowLeft":"ArrowRight",c=r?"ArrowUp":o?"ArrowRight":"ArrowLeft";if(e.key===a){e.preventDefault(),this._moveFocus(n,1);return}if(e.key===c){e.preventDefault(),this._moveFocus(n,-1);return}if(e.key==="Home"||e.key==="End"){e.preventDefault();const s=this._actions();if(!s.length)return;(e.key==="Home"?s[0]:s[s.length-1]).focus()}}_syncOpenUi(){if(!this.isConnected)return;if(!this.root.querySelector(".root")){this.requestRender();return}const e=this.getAttribute("mode")==="fab"?"fab":"bar",i=this.hasAttribute("collapsible")||e==="fab",t=this.open||!i&&e==="bar",n=this.getAttribute("label")||"Quick actions",r=this.root.querySelector(".toggle");r&&(r.textContent=t?"−":"+",r.setAttribute("aria-label",n),r.setAttribute("aria-expanded",t?"true":"false"));const o=this.root.querySelector(".actions");o&&(t?o.removeAttribute("hidden"):o.setAttribute("hidden","")),this._syncActionAccessibility(t)}render(){const e=this.getAttribute("mode")==="fab"?"fab":"bar",i=this.hasAttribute("collapsible")||e==="fab",t=this.open||!i&&e==="bar",n=this.getAttribute("label")||"Quick actions",r=this._actionsId(),o=this.getAttribute("orientation")==="vertical"||e==="fab"?"vertical":"horizontal";this.setContent(`
|
|
195
201
|
<style>${p}</style>
|
|
196
|
-
<section class="root" part="root" role="toolbar" aria-label="${l(
|
|
197
|
-
${i?`<button type="button" class="toggle" part="toggle" aria-label="${l(
|
|
198
|
-
<div id="${r}" class="actions" part="actions" role="group" aria-label="${l(
|
|
202
|
+
<section class="root" part="root" role="toolbar" aria-label="${l(n)}" aria-orientation="${o}">
|
|
203
|
+
${i?`<button type="button" class="toggle" part="toggle" aria-label="${l(n)}" aria-controls="${r}" aria-haspopup="true" aria-expanded="${t?"true":"false"}">${t?"−":"+"}</button>`:""}
|
|
204
|
+
<div id="${r}" class="actions" part="actions" role="group" aria-label="${l(n)} list" ${t?"":"hidden"}>
|
|
199
205
|
<slot name="action"></slot>
|
|
200
206
|
</div>
|
|
201
207
|
</section>
|
|
@@ -125,6 +125,7 @@ const h = `
|
|
|
125
125
|
:host([floating]) {
|
|
126
126
|
position: fixed;
|
|
127
127
|
z-index: 1250;
|
|
128
|
+
contain: layout paint;
|
|
128
129
|
}
|
|
129
130
|
|
|
130
131
|
:host([floating][placement="bottom-right"]) {
|
|
@@ -147,6 +148,11 @@ const h = `
|
|
|
147
148
|
top: 16px;
|
|
148
149
|
}
|
|
149
150
|
|
|
151
|
+
:host([floating]) .root {
|
|
152
|
+
transform: translateZ(0);
|
|
153
|
+
backface-visibility: hidden;
|
|
154
|
+
}
|
|
155
|
+
|
|
150
156
|
:host([headless]) .root {
|
|
151
157
|
display: none;
|
|
152
158
|
}
|
|
@@ -255,9 +261,9 @@ class g extends b {
|
|
|
255
261
|
return `ui-quick-actions-${this._instanceId}-actions`;
|
|
256
262
|
}
|
|
257
263
|
_syncActionAccessibility(e) {
|
|
258
|
-
this._actions().forEach((t,
|
|
264
|
+
this._actions().forEach((t, n) => {
|
|
259
265
|
var r;
|
|
260
|
-
if (t.id || (t.id = `ui-quick-actions-${this._instanceId}-action-${
|
|
266
|
+
if (t.id || (t.id = `ui-quick-actions-${this._instanceId}-action-${n + 1}`), t.hasAttribute("role") || t.setAttribute("role", "button"), !t.hasAttribute("aria-label")) {
|
|
261
267
|
const o = (r = t.textContent) == null ? void 0 : r.trim();
|
|
262
268
|
o && t.setAttribute("aria-label", o);
|
|
263
269
|
}
|
|
@@ -270,7 +276,7 @@ class g extends b {
|
|
|
270
276
|
});
|
|
271
277
|
}
|
|
272
278
|
_onClick(e) {
|
|
273
|
-
var
|
|
279
|
+
var s;
|
|
274
280
|
const i = e.target;
|
|
275
281
|
if (!i)
|
|
276
282
|
return;
|
|
@@ -278,13 +284,13 @@ class g extends b {
|
|
|
278
284
|
this.toggle();
|
|
279
285
|
return;
|
|
280
286
|
}
|
|
281
|
-
const
|
|
287
|
+
const n = e.composedPath(), r = this._actions(), o = r.find((d) => n.includes(d));
|
|
282
288
|
if (!o)
|
|
283
289
|
return;
|
|
284
290
|
const a = r.indexOf(o), c = {
|
|
285
291
|
index: a,
|
|
286
292
|
id: o.id || o.getAttribute("data-id") || String(a + 1),
|
|
287
|
-
label: o.getAttribute("aria-label") || ((
|
|
293
|
+
label: o.getAttribute("aria-label") || ((s = o.textContent) == null ? void 0 : s.trim()) || `Action ${a + 1}`
|
|
288
294
|
};
|
|
289
295
|
this.dispatchEvent(new CustomEvent("select", { detail: c, bubbles: !0, composed: !0 })), this.getAttribute("mode") === "fab" && this.hide();
|
|
290
296
|
}
|
|
@@ -292,10 +298,10 @@ class g extends b {
|
|
|
292
298
|
const t = this._actions();
|
|
293
299
|
if (!t.length)
|
|
294
300
|
return;
|
|
295
|
-
const
|
|
296
|
-
if (
|
|
301
|
+
const n = t.indexOf(e);
|
|
302
|
+
if (n < 0)
|
|
297
303
|
return;
|
|
298
|
-
const r = (
|
|
304
|
+
const r = (n + i + t.length) % t.length;
|
|
299
305
|
t[r].focus();
|
|
300
306
|
}
|
|
301
307
|
_onKeyDown(e) {
|
|
@@ -306,24 +312,24 @@ class g extends b {
|
|
|
306
312
|
const i = e.target;
|
|
307
313
|
if (!i)
|
|
308
314
|
return;
|
|
309
|
-
const
|
|
310
|
-
if (!
|
|
315
|
+
const n = this._actions().find((s) => s === i || s.contains(i));
|
|
316
|
+
if (!n)
|
|
311
317
|
return;
|
|
312
318
|
const r = this.getAttribute("orientation") === "vertical" || this.getAttribute("mode") === "fab", o = !r && getComputedStyle(this).direction === "rtl", a = r ? "ArrowDown" : o ? "ArrowLeft" : "ArrowRight", c = r ? "ArrowUp" : o ? "ArrowRight" : "ArrowLeft";
|
|
313
319
|
if (e.key === a) {
|
|
314
|
-
e.preventDefault(), this._moveFocus(
|
|
320
|
+
e.preventDefault(), this._moveFocus(n, 1);
|
|
315
321
|
return;
|
|
316
322
|
}
|
|
317
323
|
if (e.key === c) {
|
|
318
|
-
e.preventDefault(), this._moveFocus(
|
|
324
|
+
e.preventDefault(), this._moveFocus(n, -1);
|
|
319
325
|
return;
|
|
320
326
|
}
|
|
321
327
|
if (e.key === "Home" || e.key === "End") {
|
|
322
328
|
e.preventDefault();
|
|
323
|
-
const
|
|
324
|
-
if (!
|
|
329
|
+
const s = this._actions();
|
|
330
|
+
if (!s.length)
|
|
325
331
|
return;
|
|
326
|
-
(e.key === "Home" ?
|
|
332
|
+
(e.key === "Home" ? s[0] : s[s.length - 1]).focus();
|
|
327
333
|
}
|
|
328
334
|
}
|
|
329
335
|
_syncOpenUi() {
|
|
@@ -333,18 +339,18 @@ class g extends b {
|
|
|
333
339
|
this.requestRender();
|
|
334
340
|
return;
|
|
335
341
|
}
|
|
336
|
-
const e = this.getAttribute("mode") === "fab" ? "fab" : "bar", i = this.hasAttribute("collapsible") || e === "fab", t = this.open || !i && e === "bar",
|
|
337
|
-
r && (r.textContent = t ? "−" : "+", r.setAttribute("aria-label",
|
|
342
|
+
const e = this.getAttribute("mode") === "fab" ? "fab" : "bar", i = this.hasAttribute("collapsible") || e === "fab", t = this.open || !i && e === "bar", n = this.getAttribute("label") || "Quick actions", r = this.root.querySelector(".toggle");
|
|
343
|
+
r && (r.textContent = t ? "−" : "+", r.setAttribute("aria-label", n), r.setAttribute("aria-expanded", t ? "true" : "false"));
|
|
338
344
|
const o = this.root.querySelector(".actions");
|
|
339
345
|
o && (t ? o.removeAttribute("hidden") : o.setAttribute("hidden", "")), this._syncActionAccessibility(t);
|
|
340
346
|
}
|
|
341
347
|
render() {
|
|
342
|
-
const e = this.getAttribute("mode") === "fab" ? "fab" : "bar", i = this.hasAttribute("collapsible") || e === "fab", t = this.open || !i && e === "bar",
|
|
348
|
+
const e = this.getAttribute("mode") === "fab" ? "fab" : "bar", i = this.hasAttribute("collapsible") || e === "fab", t = this.open || !i && e === "bar", n = this.getAttribute("label") || "Quick actions", r = this._actionsId(), o = this.getAttribute("orientation") === "vertical" || e === "fab" ? "vertical" : "horizontal";
|
|
343
349
|
this.setContent(`
|
|
344
350
|
<style>${h}</style>
|
|
345
|
-
<section class="root" part="root" role="toolbar" aria-label="${l(
|
|
346
|
-
${i ? `<button type="button" class="toggle" part="toggle" aria-label="${l(
|
|
347
|
-
<div id="${r}" class="actions" part="actions" role="group" aria-label="${l(
|
|
351
|
+
<section class="root" part="root" role="toolbar" aria-label="${l(n)}" aria-orientation="${o}">
|
|
352
|
+
${i ? `<button type="button" class="toggle" part="toggle" aria-label="${l(n)}" aria-controls="${r}" aria-haspopup="true" aria-expanded="${t ? "true" : "false"}">${t ? "−" : "+"}</button>` : ""}
|
|
353
|
+
<div id="${r}" class="actions" part="actions" role="group" aria-label="${l(n)} list" ${t ? "" : "hidden"}>
|
|
348
354
|
<slot name="action"></slot>
|
|
349
355
|
</div>
|
|
350
356
|
</section>
|
|
@@ -0,0 +1,259 @@
|
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("./ElementBase-1b301e7f.js"),u=`
|
|
2
|
+
:host {
|
|
3
|
+
--ui-radio-size: 18px;
|
|
4
|
+
--ui-radio-hit-area: 24px;
|
|
5
|
+
--ui-radio-dot-size: 8px;
|
|
6
|
+
--ui-radio-border: 1.5px solid color-mix(in srgb, var(--ui-radio-accent, var(--ui-primary, var(--ui-color-primary, #2563eb))) 44%, var(--ui-color-border, #cbd5e1) 56%);
|
|
7
|
+
--ui-radio-background: var(--ui-bg, var(--ui-color-surface, #ffffff));
|
|
8
|
+
--ui-radio-accent: var(--ui-primary, var(--ui-color-primary, #2563eb));
|
|
9
|
+
--ui-radio-dot-color: var(--ui-radio-accent);
|
|
10
|
+
--ui-radio-focus: 0 0 0 4px color-mix(in srgb, var(--ui-radio-accent) 24%, transparent);
|
|
11
|
+
--ui-radio-invalid: var(--ui-color-danger, #dc2626);
|
|
12
|
+
--ui-radio-invalid-focus: 0 0 0 4px color-mix(in srgb, var(--ui-radio-invalid) 24%, transparent);
|
|
13
|
+
--ui-radio-disabled-bg: color-mix(in srgb, var(--ui-color-surface-alt, #f1f5f9) 88%, #ffffff 12%);
|
|
14
|
+
--ui-radio-disabled-border: 1.5px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 78%, transparent);
|
|
15
|
+
--ui-radio-label-color: var(--ui-color-text, var(--ui-text, #0f172a));
|
|
16
|
+
--ui-radio-muted: var(--ui-color-muted, #64748b);
|
|
17
|
+
--ui-radio-duration: 170ms;
|
|
18
|
+
--ui-radio-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
19
|
+
|
|
20
|
+
display: inline-flex;
|
|
21
|
+
vertical-align: middle;
|
|
22
|
+
cursor: pointer;
|
|
23
|
+
user-select: none;
|
|
24
|
+
color-scheme: light dark;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
:host([density="compact"]) {
|
|
28
|
+
--ui-radio-size: 16px;
|
|
29
|
+
--ui-radio-hit-area: 20px;
|
|
30
|
+
--ui-radio-dot-size: 7px;
|
|
31
|
+
--ui-radio-duration: 140ms;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
:host([density="compact"]) .label {
|
|
35
|
+
font-size: 13px;
|
|
36
|
+
line-height: 1.35;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
:host([density="comfortable"]) {
|
|
40
|
+
--ui-radio-size: 20px;
|
|
41
|
+
--ui-radio-hit-area: 28px;
|
|
42
|
+
--ui-radio-dot-size: 9px;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
:host([density="comfortable"]) .label {
|
|
46
|
+
font-size: 15px;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
:host([tone="neutral"]) { --ui-radio-accent: #64748b; }
|
|
50
|
+
:host([tone="success"]) { --ui-radio-accent: #16a34a; }
|
|
51
|
+
:host([tone="warning"]) { --ui-radio-accent: #d97706; }
|
|
52
|
+
:host([tone="danger"]) { --ui-radio-accent: #dc2626; }
|
|
53
|
+
:host([tone="info"]) { --ui-radio-accent: #0ea5e9; }
|
|
54
|
+
|
|
55
|
+
:host([disabled]),
|
|
56
|
+
:host([loading]) {
|
|
57
|
+
cursor: not-allowed;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.row {
|
|
61
|
+
display: inline-flex;
|
|
62
|
+
align-items: center;
|
|
63
|
+
gap: 10px;
|
|
64
|
+
min-height: var(--ui-radio-hit-area);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.control-wrap {
|
|
68
|
+
width: var(--ui-radio-hit-area);
|
|
69
|
+
min-width: var(--ui-radio-hit-area);
|
|
70
|
+
height: var(--ui-radio-hit-area);
|
|
71
|
+
display: inline-flex;
|
|
72
|
+
align-items: center;
|
|
73
|
+
justify-content: center;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.control {
|
|
77
|
+
width: var(--ui-radio-size);
|
|
78
|
+
min-width: var(--ui-radio-size);
|
|
79
|
+
height: var(--ui-radio-size);
|
|
80
|
+
border-radius: 999px;
|
|
81
|
+
border: var(--ui-radio-border);
|
|
82
|
+
background: var(--ui-radio-background);
|
|
83
|
+
box-sizing: border-box;
|
|
84
|
+
display: inline-flex;
|
|
85
|
+
align-items: center;
|
|
86
|
+
justify-content: center;
|
|
87
|
+
position: relative;
|
|
88
|
+
overflow: hidden;
|
|
89
|
+
transition:
|
|
90
|
+
border-color var(--ui-radio-duration) var(--ui-radio-easing),
|
|
91
|
+
background-color var(--ui-radio-duration) var(--ui-radio-easing),
|
|
92
|
+
box-shadow var(--ui-radio-duration) var(--ui-radio-easing),
|
|
93
|
+
transform var(--ui-radio-duration) var(--ui-radio-easing);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.control::before {
|
|
97
|
+
content: '';
|
|
98
|
+
position: absolute;
|
|
99
|
+
inset: 0;
|
|
100
|
+
border-radius: inherit;
|
|
101
|
+
background: linear-gradient(180deg, color-mix(in srgb, #ffffff 26%, transparent), transparent 56%);
|
|
102
|
+
opacity: 0.18;
|
|
103
|
+
pointer-events: none;
|
|
104
|
+
transition: opacity var(--ui-radio-duration) var(--ui-radio-easing);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.dot {
|
|
108
|
+
width: var(--ui-radio-dot-size);
|
|
109
|
+
height: var(--ui-radio-dot-size);
|
|
110
|
+
border-radius: 999px;
|
|
111
|
+
background: var(--ui-radio-dot-color);
|
|
112
|
+
opacity: 0;
|
|
113
|
+
transform: scale(0.2);
|
|
114
|
+
transition:
|
|
115
|
+
opacity var(--ui-radio-duration) var(--ui-radio-easing),
|
|
116
|
+
transform var(--ui-radio-duration) var(--ui-radio-easing);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.spinner {
|
|
120
|
+
position: absolute;
|
|
121
|
+
width: calc(var(--ui-radio-size) - 5px);
|
|
122
|
+
height: calc(var(--ui-radio-size) - 5px);
|
|
123
|
+
border-radius: 999px;
|
|
124
|
+
border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
|
|
125
|
+
border-top-color: currentColor;
|
|
126
|
+
opacity: 0;
|
|
127
|
+
animation: ui-radio-spin 700ms linear infinite;
|
|
128
|
+
pointer-events: none;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
:host([checked]) .control {
|
|
132
|
+
border-color: var(--ui-radio-accent);
|
|
133
|
+
background: color-mix(in srgb, var(--ui-radio-accent) 8%, var(--ui-radio-background));
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
:host([checked]) .control::before {
|
|
137
|
+
opacity: 0.28;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
:host([checked]) .dot {
|
|
141
|
+
opacity: 1;
|
|
142
|
+
transform: scale(1);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
:host(:focus-visible) .control {
|
|
146
|
+
box-shadow: var(--ui-radio-focus);
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
:host(:not([disabled]):not([loading]):hover) .control {
|
|
150
|
+
transform: translateY(-0.5px);
|
|
151
|
+
border-color: color-mix(in srgb, var(--ui-radio-accent) 80%, #0f172a 20%);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
:host(:not([disabled]):not([loading]):active) .control {
|
|
155
|
+
transform: scale(0.96);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
:host([invalid]) .control {
|
|
159
|
+
border-color: var(--ui-radio-invalid);
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
:host([invalid]:focus-visible) .control {
|
|
163
|
+
box-shadow: var(--ui-radio-invalid-focus);
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
:host([disabled]) .control,
|
|
167
|
+
:host([loading]) .control {
|
|
168
|
+
background: var(--ui-radio-disabled-bg);
|
|
169
|
+
border: var(--ui-radio-disabled-border);
|
|
170
|
+
box-shadow: none;
|
|
171
|
+
transform: none;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
:host([loading]) .spinner {
|
|
175
|
+
opacity: 1;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.label {
|
|
179
|
+
color: var(--ui-radio-label-color);
|
|
180
|
+
font-size: 14px;
|
|
181
|
+
line-height: 1.4;
|
|
182
|
+
letter-spacing: -0.005em;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.label:empty {
|
|
186
|
+
display: none;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
:host([disabled]) .label,
|
|
190
|
+
:host([loading]) .label {
|
|
191
|
+
color: color-mix(in srgb, var(--ui-radio-label-color) 55%, var(--ui-radio-muted) 45%);
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
:host([headless]) .control {
|
|
195
|
+
display: none;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
:host([headless]) .control-wrap {
|
|
199
|
+
width: 0;
|
|
200
|
+
min-width: 0;
|
|
201
|
+
height: 0;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
:host([headless]) .row {
|
|
205
|
+
gap: 0;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
:host([headless]) .label {
|
|
209
|
+
color: inherit;
|
|
210
|
+
font: inherit;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
@keyframes ui-radio-spin {
|
|
214
|
+
to {
|
|
215
|
+
transform: rotate(360deg);
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
@media (prefers-reduced-motion: reduce) {
|
|
220
|
+
.control,
|
|
221
|
+
.dot,
|
|
222
|
+
.spinner {
|
|
223
|
+
transition: none !important;
|
|
224
|
+
animation: none !important;
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
@media (prefers-contrast: more) {
|
|
229
|
+
:host {
|
|
230
|
+
--ui-radio-border: 2px solid currentColor;
|
|
231
|
+
--ui-radio-disabled-border: 2px solid currentColor;
|
|
232
|
+
}
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
@media (forced-colors: active) {
|
|
236
|
+
:host {
|
|
237
|
+
--ui-radio-background: Canvas;
|
|
238
|
+
--ui-radio-border: 1px solid CanvasText;
|
|
239
|
+
--ui-radio-accent: Highlight;
|
|
240
|
+
--ui-radio-invalid: Highlight;
|
|
241
|
+
--ui-radio-disabled-bg: Canvas;
|
|
242
|
+
--ui-radio-disabled-border: 1px solid GrayText;
|
|
243
|
+
--ui-radio-focus: 0 0 0 2px Highlight;
|
|
244
|
+
--ui-radio-invalid-focus: 0 0 0 2px Highlight;
|
|
245
|
+
--ui-radio-label-color: CanvasText;
|
|
246
|
+
}
|
|
247
|
+
}
|
|
248
|
+
`;function o(r){return r!==null&&r.toLowerCase()!=="false"&&r!=="0"}function c(r){return r instanceof HTMLElement?!!r.closest('a, button, input, select, textarea, [contenteditable="true"], [data-ui-radio-no-toggle]'):!1}class s extends l.ElementBase{constructor(){super(),this._uid=`ui-radio-${Math.random().toString(36).slice(2,9)}`,this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this)}static get observedAttributes(){return["checked","disabled","loading","invalid","required","headless","name","value","tabindex"]}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this._onClick),this.addEventListener("keydown",this._onKeyDown),this.checked&&this._uncheckSiblings(),this._syncA11yState()}disconnectedCallback(){this.removeEventListener("click",this._onClick),this.removeEventListener("keydown",this._onKeyDown),super.disconnectedCallback()}attributeChangedCallback(e,i,t){i!==t&&((e==="checked"||e==="name")&&this.checked&&this._uncheckSiblings(),this._syncA11yState())}get checked(){return o(this.getAttribute("checked"))}set checked(e){const i=!!e;i!==this.checked&&(i?this.setAttribute("checked",""):this.removeAttribute("checked"))}get disabled(){return o(this.getAttribute("disabled"))}set disabled(e){const i=!!e;i!==this.disabled&&(i?this.setAttribute("disabled",""):this.removeAttribute("disabled"))}get loading(){return o(this.getAttribute("loading"))}set loading(e){const i=!!e;i!==this.loading&&(i?this.setAttribute("loading",""):this.removeAttribute("loading"))}get invalid(){return o(this.getAttribute("invalid"))}set invalid(e){const i=!!e;i!==this.invalid&&(i?this.setAttribute("invalid",""):this.removeAttribute("invalid"))}get required(){return o(this.getAttribute("required"))}set required(e){const i=!!e;i!==this.required&&(i?this.setAttribute("required",""):this.removeAttribute("required"))}get headless(){return this.hasAttribute("headless")}set headless(e){e!==this.headless&&(e?this.setAttribute("headless",""):this.removeAttribute("headless"))}get name(){return this.getAttribute("name")||""}set name(e){const i=String(e||"").trim();if(!i){this.removeAttribute("name");return}this.setAttribute("name",i)}get value(){return this.getAttribute("value")||""}set value(e){const i=String(e||"");if(!i){this.removeAttribute("value");return}this.setAttribute("value",i)}get density(){return this.getAttribute("density")||"default"}set density(e){const i=(e||"").trim().toLowerCase();if(!i||i==="default"){this.removeAttribute("density");return}this.setAttribute("density",i)}get tone(){const e=this.getAttribute("tone");return e==="neutral"||e==="success"||e==="warning"||e==="danger"||e==="info"?e:"brand"}set tone(e){const i=(e||"").trim().toLowerCase();if(!i||i==="brand"){this.removeAttribute("tone");return}this.setAttribute("tone",i)}_syncA11yState(){const e=this.disabled||this.loading,i=e?"-1":this.getAttribute("tabindex")||"0",t=`${this._uid}-label`;this.setAttribute("role","radio"),this.setAttribute("aria-checked",this.checked?"true":"false"),this.setAttribute("aria-disabled",e?"true":"false"),this.setAttribute("aria-busy",this.loading?"true":"false"),this.setAttribute("aria-required",this.required?"true":"false"),this.invalid?this.setAttribute("aria-invalid","true"):this.removeAttribute("aria-invalid"),this.setAttribute("aria-labelledby",t),this.setAttribute("tabindex",i)}_resolveQueryScope(){const e=this.closest("form, ui-form");if(e)return e;const i=this.getRootNode();return i instanceof Document||i instanceof ShadowRoot||i instanceof Element?i:null}_getGroupMembers(){const e=this.name.trim();if(!e)return[this];const i=this._resolveQueryScope();return!i||!("querySelectorAll"in i)?[this]:Array.from(i.querySelectorAll("ui-radio")).filter(t=>t instanceof s&&t.name===e)}_uncheckSiblings(){this._getGroupMembers().forEach(i=>{i!==this&&i.checked&&(i.checked=!1)})}_focusSelf(){try{this.focus({preventScroll:!0})}catch{this.focus()}}_checkFromUser(e){if(this.disabled||this.loading||this.checked)return;this.checked=!0;const i={checked:!0,value:this.value||void 0,name:this.name||void 0,reason:e};this.dispatchEvent(new CustomEvent("input",{detail:i,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:i,bubbles:!0,composed:!0}))}_moveGroupSelection(e){const i=this._getGroupMembers().filter(n=>!n.disabled&&!n.loading);if(i.length<=1)return;const d=(Math.max(i.indexOf(this),0)+e+i.length)%i.length,a=i[d];!a||a===this||(a._checkFromUser("keyboard"),a._focusSelf())}_onClick(e){this.disabled||this.loading||e.composedPath().some(t=>c(t))||this._checkFromUser("click")}_onKeyDown(e){if(!(this.disabled||this.loading)){if(e.key===" "||e.key==="Enter"){e.preventDefault(),this._checkFromUser("keyboard");return}if(this.name){if(e.key==="ArrowRight"||e.key==="ArrowDown"){e.preventDefault(),this._moveGroupSelection(1);return}(e.key==="ArrowLeft"||e.key==="ArrowUp")&&(e.preventDefault(),this._moveGroupSelection(-1))}}}render(){this._syncA11yState(),this.setContent(`
|
|
249
|
+
<style>${u}</style>
|
|
250
|
+
<span class="row" part="root">
|
|
251
|
+
<span class="control-wrap" part="hit-area" aria-hidden="true">
|
|
252
|
+
<span class="control" part="control">
|
|
253
|
+
<span class="dot" part="dot"></span>
|
|
254
|
+
<span class="spinner" part="spinner"></span>
|
|
255
|
+
</span>
|
|
256
|
+
</span>
|
|
257
|
+
<span class="label" id="${this._uid}-label" part="label"><slot></slot></span>
|
|
258
|
+
</span>
|
|
259
|
+
`)}}typeof customElements<"u"&&!customElements.get("ui-radio")&&customElements.define("ui-radio",s);exports.UIRadio=s;
|