monochrome 0.3.0 → 0.4.1
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 +9 -5
- package/dist/index.js +1 -1
- package/dist/router.d.ts +1 -0
- package/dist/router.js +1 -0
- package/dist/vue/tabs.d.ts +6 -6
- package/package.json +12 -5
package/README.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Accessible UI component library. Best-in-class performance. HTML-first, React and Vue supported.
|
|
4
4
|
|
|
5
5
|
<!-- badges -->
|
|
6
|
-
    
|
|
7
7
|
<!-- /badges -->
|
|
8
8
|
|
|
9
9
|
## Install
|
|
@@ -12,10 +12,14 @@ Accessible UI component library. Best-in-class performance. HTML-first, React an
|
|
|
12
12
|
npm install monochrome
|
|
13
13
|
```
|
|
14
14
|
|
|
15
|
+
Monochrome ships in three tiers — import only what you use:
|
|
16
|
+
|
|
15
17
|
```ts
|
|
16
|
-
import "monochrome"
|
|
17
|
-
import
|
|
18
|
-
|
|
18
|
+
import "monochrome"
|
|
19
|
+
import "monochrome/router"
|
|
20
|
+
|
|
21
|
+
import { Accordion } from "monochrome/react"
|
|
22
|
+
import { Accordion } from "monochrome/vue"
|
|
19
23
|
```
|
|
20
24
|
|
|
21
25
|
## Usage
|
|
@@ -52,7 +56,7 @@ Four interactive UI patterns in <!-- size -->2.2kB<!-- /size -->:
|
|
|
52
56
|
| --- | --- | ---: |
|
|
53
57
|
| **Accordion** | Grouped collapsible content sections | <!-- tests:accordion -->66<!-- /tests:accordion --> |
|
|
54
58
|
| **Collapsible** | Show and hide content with a button | <!-- tests:collapsible -->42<!-- /tests:collapsible --> |
|
|
55
|
-
| **Menu** | Dropdown menus, menubars, and submenus | <!-- tests:menu -->
|
|
59
|
+
| **Menu** | Dropdown menus, menubars, and submenus | <!-- tests:menu -->179<!-- /tests:menu --> |
|
|
56
60
|
| **Tabs** | Switch between multiple content panels | <!-- tests:tabs -->70<!-- /tests:tabs --> |
|
|
57
61
|
|
|
58
62
|
## How it works
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
if(typeof document<"u"){let E=null,C=null,M=null,w=null,k=[],l=[],f=null,o=null,h=null,y=0,d=(e)=>e instanceof HTMLElement,u=(e,n)=>e instanceof HTMLButtonElement&&(!n||e.id.startsWith(n)),A=(e)=>d(e)&&e.role?.startsWith("menuitem")===!0&&e.ariaDisabled!=="true",b=(e)=>document.getElementById(e.getAttribute("aria-controls")||""),L=(e,n)=>{while(e){if(e.id.startsWith(n))return e;e=e.parentElement}return null},P=(e)=>{let n=(
|
|
1
|
+
if(typeof document<"u"){let E=null,C=null,M=null,w=null,k=[],l=[],f=null,o=null,h=null,y=0,d=(e)=>e instanceof HTMLElement,u=(e,n)=>e instanceof HTMLButtonElement&&(!n||e.id.startsWith(n)),A=(e)=>d(e)&&e.role?.startsWith("menuitem")===!0&&e.ariaDisabled!=="true",b=(e)=>document.getElementById(e.getAttribute("aria-controls")||""),L=(e,n)=>{while(e){if(e.id.startsWith(n))return e;e=e.parentElement}return null},P=(e)=>{let n=(r)=>r?e(r.nextElementSibling||r.parentElement?.firstElementChild,n):null,t=(r)=>r?e(r.previousElementSibling||r.parentElement?.lastElementChild,t):null;return[n,t]},p=(e,n)=>{if(d(e)){let t=e.firstElementChild;if(M){if(d(t)){if(t===M){for(let r of k)r.ariaChecked="false";return t}if(t.role==="menuitemradio"){if(!w)t.ariaChecked="false";else k.push(t);return n(e)}}return w=!0,k=[],n(e)}if(A(t)&&(!C||t.textContent?.toLowerCase().startsWith(C)))return t.focus(),E=!0,t;else if(f!==e){if(!f)f=e;return n(e)}else f=null}return null},H=(e,n)=>{if(d(e)){if(f===e)return null;if(!f)f=e;let t=e.firstElementChild?.firstElementChild;if(u(t,"mct:a")){if(t.ariaDisabled==="true")return n(e);return E=!0,t.focus(),t}}return n(e)},v=(e,n)=>{if(u(e,"mct:t")){if(f===e)return null;if(!f)f=e;if(e.ariaDisabled==="true")return n(e);return E=!0,e.focus(),e}else return n(e)},[g,T]=P(p),[D,W]=P(H),[R,F]=P(v),x=(e)=>{let n=b(e);if(n){let t=e.ariaExpanded!=="true";e.ariaExpanded=t?"true":"false",n.ariaHidden=t?"false":"true",t?n.removeAttribute("hidden"):n.setAttribute("hidden","until-found")}},$=(e)=>{if(e.ariaDisabled==="true")return;if(e.ariaExpanded==="true")x(e);else{let n=L(e,"mcr:a");if(!n||n.getAttribute("data-mode")!=="single")x(e);else{let t=n.firstElementChild;while(t){let r=t.firstElementChild?.firstElementChild;if(d(r)&&(r===e||r.ariaExpanded==="true"))x(r);t=t.nextElementSibling}}}},S=(e)=>{if(e.ariaDisabled!=="true"&&e.ariaSelected!=="true"){let n=e.parentElement?.firstElementChild;while(d(n)){if(n===e||n.ariaSelected==="true"){let t=b(n);if(t){let r=n.ariaSelected!=="true";if(n.ariaSelected=r?"true":"false",n.tabIndex=r?0:-1,t.ariaHidden=r?"false":"true",t.hasAttribute("tabindex"))t.tabIndex=r?0:-1;r?t.removeAttribute("hidden"):t.setAttribute("hidden","until-found")}}n=n.nextElementSibling}}},c=(e,n=0)=>{if(e?.id.startsWith("mct:m")){let t=b(e);if(t)if(e.ariaExpanded==="true"){if(o)o.removeAttribute("data-safe");if(o=null,n!==3)e.focus();t.hidePopover(),e.ariaExpanded="false",t.ariaHidden="true"}else{l.push(e),t.showPopover(),e.ariaExpanded="true",t.ariaHidden="false";let r=e.getBoundingClientRect();t.style.setProperty("--top",`${r.top}px`),t.style.setProperty("--right",`${r.right}px`),t.style.setProperty("--bottom",`${r.bottom}px`),t.style.setProperty("--left",`${r.left}px`);let a=e.parentElement;if(a){let i=t.getBoundingClientRect(),s=i.left>r.right,N=s?i.left:i.right;o=a,h=r,y=s?-4:4,a.style.setProperty("--right",`${N}px`),a.style.setProperty("--top",`${i.top}px`),a.style.setProperty("--bottom",`${i.bottom}px`)}if(n===0)e.focus();else if(n===1)p(t.firstElementChild,g);else if(n===2)p(t.lastElementChild,T)}}},m=(e=0)=>{while(l[e])c(l.pop(),3)},B=(e)=>{if(e.role==="menuitemcheckbox")e.ariaChecked=e.ariaChecked==="true"?"false":"true";else if(e.role==="menuitemradio")M=e,w=null,k=[],g(e.parentElement),M=null,e.ariaChecked="true";else m()};addEventListener("click",(e)=>{E=null;let n=e.detail===0,t=d(e.target)?e.target:e.target instanceof Element?e.target.parentElement:null;if(t){let r=t;while(r){let a=r.id;if(a.startsWith("mct:")){if(a.startsWith("mct:m")){let i=n?1:3;if(L(r.parentElement,"mcc:m")){if(!l.includes(r))c(r,i)}else if(l[0]){let N=r!==l[0];if(m(),N)c(r,i)}else c(r,i)}else{if(l[0])m();if(a.startsWith("mct:a"))$(r);else if(a.startsWith("mct:c"))x(r);else if(a.startsWith("mct:t"))S(r)}break}else if(a.startsWith("mcc:m")&&l[0]){let i=t;while(i&&i!==r){if(A(i)&&!u(i,"mct:m")){B(i);break}i=i.parentElement}break}r=r.parentElement}if(!r&&l[0])m()}if(E)e.preventDefault()}),addEventListener("pointermove",(e)=>{if(e.pointerType==="touch")return;if(l[0]){if(l[1]&&o&&h){if(e.clientX>=h.left&&e.clientX<=h.right&&e.clientY>=h.top&&e.clientY<=h.bottom){if(o.style.setProperty("--left",`${e.clientX+y}px`),o.style.setProperty("--center",`${e.clientY}px`),!o.hasAttribute("data-safe"))o.setAttribute("data-safe","")}else if(o.hasAttribute("data-safe")&&(e.target!==o||y*e.movementX>0))o.removeAttribute("data-safe")}let n=e.target;if(d(n)){let t=[],r=n,a=!1,i=!1;while(r){if(A(r))i=!0;if(!i&&r.id.startsWith("mcc:")){a=!0;break}let s=r.firstElementChild;if(u(s,"mct:m"))t.unshift(s);r=r.parentElement}if(!a&&t[0]){let s=0;while(l[s]&&l[s]===t[s])s++;if(s===0&&(t[0].role!=="menuitem"||t[0].parentElement?.parentElement!==l[0].parentElement?.parentElement))return;m(s),c(t[s],3)}}}}),addEventListener("keydown",(e)=>{E=null,C=null,f=null;let n=e.target;if(u(n,"mct:a")){let t=n.parentElement?.parentElement;if(t)switch(e.key){case"ArrowDown":D(t);break;case"ArrowUp":W(t);break;case"Home":{let r=t.parentElement;if(r)H(r.firstElementChild,D);break}case"End":{let r=t.parentElement;if(r)H(r.lastElementChild,W);break}}}else if(u(n,"mct:t")){let t=n.parentElement?.ariaOrientation==="vertical";switch(e.key){case"ArrowDown":if(t)R(n);break;case"ArrowUp":if(t)F(n);break;case"ArrowRight":if(!t)R(n);break;case"ArrowLeft":if(!t)F(n);break;case"Home":v(n.parentElement?.firstElementChild,R);break;case"End":v(n.parentElement?.lastElementChild,F);break}}else{if(u(n,"mct:m")){let t=L(n,"mcc:m")===null;switch(e.key){case"ArrowDown":if(t)if(n.ariaExpanded!=="true")c(n,1);else{let r=b(n);if(r)p(r.firstElementChild,g)}break;case"ArrowUp":if(t)if(n.ariaExpanded!=="true")c(n,2);else{let r=b(n);if(r)p(r.lastElementChild,T)}break;case"ArrowRight":if(!t)c(n,1);break}}if(!E&&d(n)&&n.role?.startsWith("menuitem")&&n.parentElement){let t=n.parentElement,r=l[0]?.parentElement||t,a=L(n.parentElement,"mcc:m");switch(e.key){case"Tab":if(l[0])l[0].focus();m();break;case"ArrowDown":if(a)g(t);break;case"ArrowUp":if(a)T(t);break;case"ArrowRight":{let i=g(r);if(i){let s=l[0];if(m(),s&&u(i,"mct:m"))c(i,3)}break}case"ArrowLeft":if(l[1])c(l.pop(),0);else{let i=T(r);if(i){let s=l[0];if(m(),s&&u(i,"mct:m"))c(i,3)}}break;case"Home":p(t.parentElement?.firstElementChild,g);break;case"End":p(t.parentElement?.lastElementChild,T);break;default:if(/^[a-zA-Z]$/.test(e.key))C=e.key.toLowerCase(),g(t);break}}}if(e.key==="Escape"&&l[0])c(l.pop(),0);if(E)e.preventDefault()}),addEventListener("scroll",(e)=>{if(l[0]&&(!d(e.target)||!e.target.id.startsWith("mcc:m")))m()},!0),addEventListener("resize",()=>{if(l[0])m()}),addEventListener("beforematch",(e)=>{if(d(e.target)){let n=e.target;while(n){let t=n.getAttribute("aria-labelledby");if(t){let r=document.getElementById(t);if(u(r,"mct:a")){if(r.ariaExpanded!=="true")$(r)}else if(u(r,"mct:c")){if(r.ariaExpanded!=="true")x(r)}else if(u(r,"mct:t"))S(r)}n=n.parentElement}}})}
|
package/dist/router.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
type Fetched = [html: string, url: string];
|
package/dist/router.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
if(typeof document<"u"){let a=new Map,c=document.createElement("template"),h=0,m=location.origin+location.pathname+location.search,f=(t)=>t.split("#")[0]??"",w=(t,e)=>{if(e){let o=history.state?.scrollY;scrollTo(0,typeof o==="number"?o:0)}else history.replaceState({...history.state,scrollY},""),history.pushState({scrollY:0},"",t),scrollTo(0,0);dispatchEvent(new Event("mc:navigate"))},g=(t)=>{let e=a.get(t);if(e)return e;let o=(async()=>{try{let n=await fetch(t);if(!n.ok)return null;if(new URL(n.url).origin!==location.origin)return null;let s=[await n.text(),n.url];if(n.url!==t)a.set(n.url,Promise.resolve(s));return s}catch{return null}})();return a.set(t,o),o.then((n)=>{if(n===null)a.delete(t)}),o},p=(t)=>!t||!t.href||t.target!==""&&t.target!=="_self"||t.hasAttribute("download")||t.relList.contains("external")||t.origin!==location.origin||t.pathname===location.pathname&&t.search===location.search&&t.hash!=="",v=(t)=>{if(p(t))return;let e=f(t.href);if(!a.has(e))g(e)},y=(t)=>{let e=new Map;return t.querySelectorAll("[data-area]").forEach((o)=>{let n=o.dataset.area;if(n&&!e.has(n))e.set(n,o)}),e},M=(t)=>{let e=y(t),o=y(document),n=o.get("root"),s=e.get("root");if(!n||!s)return!1;let i=e.size===o.size;if(i){for(let r of e.keys())if(!o.has(r)){i=!1;break}}if(!(i&&n.dataset.key!==void 0&&n.dataset.key===s.dataset.key))n.replaceWith(s);for(let[r,l]of o)if(r!=="root"&&l.isConnected){let d=e.get(r);if(d&&(l.dataset.key===void 0||l.dataset.key!==d.dataset.key))l.replaceWith(d)}return!0},E=async(t,e)=>{if(e||t!==location.href){let o=f(t);if(o!==m){let n=++h,s=await g(o);if(n===h)if(s){let[i,u]=s;if(c.innerHTML=i,document.title=c.content.querySelector("title")?.textContent??document.title,M(c.content))m=f(u),w(u,e);else location.href=t}else location.href=t}}};addEventListener("click",(t)=>{if(!t.defaultPrevented&&!t.ctrlKey&&!t.metaKey&&!t.shiftKey&&!t.altKey&&t.button===0&&t.target instanceof Element){let e=t.target.closest("a");if(!p(e))t.preventDefault(),E(e.href,!1)}},!0),addEventListener("popstate",()=>{E(location.href,!0)});let k=null,L=(t)=>{if(t.target instanceof Element){let e=t.target.closest("a");if(e!==k){if(k=e,e)v(e)}}};addEventListener("mouseover",L),addEventListener("focusin",L)}
|
package/dist/vue/tabs.d.ts
CHANGED
|
@@ -33,7 +33,7 @@ export declare const Tabs: {
|
|
|
33
33
|
};
|
|
34
34
|
selected: {
|
|
35
35
|
type: PropType<boolean | null>;
|
|
36
|
-
default:
|
|
36
|
+
default: null;
|
|
37
37
|
};
|
|
38
38
|
disabled: BooleanConstructor;
|
|
39
39
|
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
@@ -45,12 +45,12 @@ export declare const Tabs: {
|
|
|
45
45
|
};
|
|
46
46
|
selected: {
|
|
47
47
|
type: PropType<boolean | null>;
|
|
48
|
-
default:
|
|
48
|
+
default: null;
|
|
49
49
|
};
|
|
50
50
|
disabled: BooleanConstructor;
|
|
51
51
|
}>> & Readonly<{}>, {
|
|
52
52
|
disabled: boolean;
|
|
53
|
-
selected: boolean;
|
|
53
|
+
selected: boolean | null;
|
|
54
54
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
55
55
|
Panel: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
56
56
|
value: {
|
|
@@ -59,7 +59,7 @@ export declare const Tabs: {
|
|
|
59
59
|
};
|
|
60
60
|
selected: {
|
|
61
61
|
type: PropType<boolean | null>;
|
|
62
|
-
default:
|
|
62
|
+
default: null;
|
|
63
63
|
};
|
|
64
64
|
focusable: {
|
|
65
65
|
type: BooleanConstructor;
|
|
@@ -74,14 +74,14 @@ export declare const Tabs: {
|
|
|
74
74
|
};
|
|
75
75
|
selected: {
|
|
76
76
|
type: PropType<boolean | null>;
|
|
77
|
-
default:
|
|
77
|
+
default: null;
|
|
78
78
|
};
|
|
79
79
|
focusable: {
|
|
80
80
|
type: BooleanConstructor;
|
|
81
81
|
default: boolean;
|
|
82
82
|
};
|
|
83
83
|
}>> & Readonly<{}>, {
|
|
84
|
-
selected: boolean;
|
|
84
|
+
selected: boolean | null;
|
|
85
85
|
focusable: boolean;
|
|
86
86
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
87
87
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "monochrome",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.1",
|
|
4
4
|
"description": "Accessible UI component library. Best-in-class performance. HTML-first, React and Vue supported.",
|
|
5
5
|
"author": "Colin van Eenige",
|
|
6
6
|
"license": "MIT",
|
|
@@ -35,13 +35,18 @@
|
|
|
35
35
|
],
|
|
36
36
|
"type": "module",
|
|
37
37
|
"sideEffects": [
|
|
38
|
-
"./dist/index.js"
|
|
38
|
+
"./dist/index.js",
|
|
39
|
+
"./dist/router.js"
|
|
39
40
|
],
|
|
40
41
|
"exports": {
|
|
41
42
|
".": {
|
|
42
43
|
"types": "./dist/index.d.ts",
|
|
43
44
|
"default": "./dist/index.js"
|
|
44
45
|
},
|
|
46
|
+
"./router": {
|
|
47
|
+
"types": "./dist/router.d.ts",
|
|
48
|
+
"default": "./dist/router.js"
|
|
49
|
+
},
|
|
45
50
|
"./react": {
|
|
46
51
|
"types": "./dist/react/index.d.ts",
|
|
47
52
|
"default": "./dist/react/index.js"
|
|
@@ -91,12 +96,14 @@
|
|
|
91
96
|
"vue": "3.5.29"
|
|
92
97
|
},
|
|
93
98
|
"versionMeta": {
|
|
94
|
-
"gzipSize":
|
|
99
|
+
"gzipSize": 2236,
|
|
100
|
+
"routerGzipSize": 1065,
|
|
95
101
|
"tests": {
|
|
96
|
-
"total":
|
|
102
|
+
"total": 385,
|
|
97
103
|
"collapsible": 42,
|
|
104
|
+
"router": 28,
|
|
98
105
|
"accordion": 66,
|
|
99
|
-
"menu":
|
|
106
|
+
"menu": 179,
|
|
100
107
|
"tabs": 70
|
|
101
108
|
}
|
|
102
109
|
}
|