neko-ui 2.13.2 → 2.13.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/es/avatar/group.js +5 -5
  2. package/es/avatar/group.js.map +1 -1
  3. package/es/img/style.js +4 -4
  4. package/es/img/style.js.map +1 -1
  5. package/es/marquee/style.js +11 -23
  6. package/es/marquee/style.js.map +1 -1
  7. package/es/md-style/index.js +1 -1
  8. package/es/md-style/index.js.map +1 -1
  9. package/es/modal/style.js +1 -1
  10. package/es/modal/style.js.map +1 -1
  11. package/lib/avatar/group.js +4 -4
  12. package/lib/avatar/group.js.map +1 -1
  13. package/lib/img/style.js +4 -4
  14. package/lib/img/style.js.map +1 -1
  15. package/lib/marquee/style.js +11 -23
  16. package/lib/marquee/style.js.map +1 -1
  17. package/lib/md-style/index.js +1 -1
  18. package/lib/md-style/index.js.map +1 -1
  19. package/lib/modal/style.js +1 -1
  20. package/lib/modal/style.js.map +1 -1
  21. package/package.json +2 -2
  22. package/umd/index.js +19 -31
  23. package/umd/manifest.json +1 -1
package/es/avatar/group.js CHANGED
@@ -1,12 +1,12 @@
1
- import{template as e}from"solid-js/web";import{spread as t}from"solid-js/web";import{mergeProps as r}from"solid-js/web";import{insert as n}from"solid-js/web";import{getOwner as i}from"solid-js/web";import{effect as o}from"solid-js/web";import{createComponent as s}from"solid-js/web";let a=e("<style>"),l=e("<style> "),m=e("<n-avatar>",!0,!1),p=e("<div>"),d=e('<div class="more">');import{createEffect as u,createMemo as c,For as g,mergeProps as v,Show as f,splitProps as h}from"solid-js";import{css as x,cx as w}from"@moneko/css";import{customElement as b}from"solid-element";import y from"../avatar";import{clearAttribute as z}from"../basic-config";import $ from"../popover";import{inline as j}from"../theme";let C=x`
1
+ import{template as e}from"solid-js/web";import{spread as t}from"solid-js/web";import{mergeProps as r}from"solid-js/web";import{insert as n}from"solid-js/web";import{getOwner as i}from"solid-js/web";import{effect as o}from"solid-js/web";import{createComponent as s}from"solid-js/web";let a=e("<style>"),l=e("<style> "),m=e("<n-avatar>",!0,!1),p=e("<div>"),d=e('<div class="more">');import{createEffect as u,createMemo as c,For as g,mergeProps as v,Show as f,splitProps as h}from"solid-js";import{css as w,cx as x}from"@moneko/css";import{customElement as y}from"solid-element";import z from"../avatar";import{clearAttribute as $}from"../basic-config";import b from"../popover";import{inline as j}from"../theme";let C=w`
2
2
  .more {
3
3
  display: flex;
4
4
  justify-content: center;
5
5
  align-items: center;
6
6
  overflow-y: auto;
7
7
  padding: 8px;
8
- max-inline-size: 60vi;
9
- max-block-size: 80vb;
8
+ max-inline-size: 60vw;
9
+ max-block-size: 80vh;
10
10
  gap: 8px;
11
11
  flex-wrap: wrap;
12
12
 
@@ -14,7 +14,7 @@ import{template as e}from"solid-js/web";import{spread as t}from"solid-js/web";im
14
14
  display: flex;
15
15
  }
16
16
  }
17
- `,_=x`
17
+ `,_=w`
18
18
  .group {
19
19
  display: inline-flex;
20
20
  align-items: center;
@@ -38,4 +38,4 @@ import{template as e}from"solid-js/web";import{spread as t}from"solid-js/web";im
38
38
  }
39
39
  }
40
40
  }
41
- `,k={data:[],size:void 0,class:void 0,maxCount:void 0,css:void 0};function O(e){let[u,b]=h(v(k,e),["data","maxCount","class","size","css"]),y=c(()=>u.data||[]),z=c(()=>y().slice(0,u.maxCount)),j=c(()=>{let e=y(),t=e.length-(u.maxCount||e.length);return t>0?e.slice(-t):[]});return[(()=>{let e=a();return e.textContent=_,e})(),s(f,{get when(){return u.css},get children(){let e=l(),t=e.firstChild;return o(()=>t.data=x(u.css)),e}}),(()=>{let e=p();return t(e,r(b,{get class(){return w("group",u.class)}}),!1,!0),n(e,s(g,{get each(){return z()},children:e=>(()=>{let n=m();return t(n,r(e,{get size(){return u.size}}),!1,!1),n._$owner=i(),n})()}),null),n(e,s(f,{get when(){return j().length},get children(){return s($,{arrow:!0,trigger:"click",popupCss:C,get content(){return(()=>{let e=d();return n(e,s(g,{get each(){return j()},children:e=>(()=>{let n=m();return t(n,r(e,{get size(){return u.size}}),!1,!1),n._$owner=i(),n})()})),e})()},get children(){let e=m();return e._$owner=i(),o(t=>{let r=u.size,n=`+${j().length}`;return r!==t._v$&&(e.size=t._v$=r),n!==t._v$2&&(e.username=t._v$2=n),t},{_v$:void 0,_v$2:void 0}),e}})}}),null),e})()]}O.registry=()=>{y.registry(),b("n-avatar-group",k,(e,t)=>{let r=t.element;return u(()=>{z(r,["css","data"])}),[(()=>{let e=a();return e.textContent=j,e})(),s(O,e)]})};export default O;
41
+ `,k={data:[],size:void 0,class:void 0,maxCount:void 0,css:void 0};function O(e){let[u,y]=h(v(k,e),["data","maxCount","class","size","css"]),z=c(()=>u.data||[]),$=c(()=>z().slice(0,u.maxCount)),j=c(()=>{let e=z(),t=e.length-(u.maxCount||e.length);return t>0?e.slice(-t):[]});return[(()=>{let e=a();return e.textContent=_,e})(),s(f,{get when(){return u.css},get children(){let e=l(),t=e.firstChild;return o(()=>t.data=w(u.css)),e}}),(()=>{let e=p();return t(e,r(y,{get class(){return x("group",u.class)}}),!1,!0),n(e,s(g,{get each(){return $()},children:e=>(()=>{let n=m();return t(n,r(e,{get size(){return u.size}}),!1,!1),n._$owner=i(),n})()}),null),n(e,s(f,{get when(){return j().length},get children(){return s(b,{arrow:!0,trigger:"click",popupCss:C,get content(){return(()=>{let e=d();return n(e,s(g,{get each(){return j()},children:e=>(()=>{let n=m();return t(n,r(e,{get size(){return u.size}}),!1,!1),n._$owner=i(),n})()})),e})()},get children(){let e=m();return e._$owner=i(),o(t=>{let r=u.size,n=`+${j().length}`;return r!==t._v$&&(e.size=t._v$=r),n!==t._v$2&&(e.username=t._v$2=n),t},{_v$:void 0,_v$2:void 0}),e}})}}),null),e})()]}O.registry=()=>{z.registry(),y("n-avatar-group",k,(e,t)=>{let r=t.element;return u(()=>{$(r,["css","data"])}),[(()=>{let e=a();return e.textContent=j,e})(),s(O,e)]})};export default O;
package/es/avatar/group.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/avatar/group.tsx"],"sourcesContent":["import { createEffect, createMemo, For, mergeProps, Show, splitProps } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { AvatarProps, BasicConfig, CustomElement } from '..';\nimport Avatar from '../avatar';\nimport { clearAttribute } from '../basic-config';\nimport Popover from '../popover';\nimport { inline } from '../theme';\n\nconst moreCss = css`\n .more {\n display: flex;\n justify-content: center;\n align-items: center;\n overflow-y: auto;\n padding: 8px;\n max-inline-size: 60vi;\n max-block-size: 80vb;\n gap: 8px;\n flex-wrap: wrap;\n\n > n-avatar {\n display: flex;\n }\n }\n`;\nconst style = css`\n .group {\n display: inline-flex;\n align-items: center;\n\n & > n-avatar {\n display: flex;\n }\n\n & > n-avatar:not(:first-child),\n & > .popover {\n margin-inline-start: -4%;\n transition: margin-inline-start var(--transition-duration);\n\n &:hover:not(.popover) {\n margin-inline-start: 4px;\n\n &:has(+ n-avatar),\n &:has(+ .popover) {\n margin-inline-end: calc(4% + 4px);\n }\n }\n }\n }\n`;\n\nexport interface AvatarGroupProps {\n /** 头像数据 */\n data?: Omit<AvatarProps, 'size'>[];\n /** 头像尺寸\n * @default 'normal'\n */\n size?: BasicConfig['size'];\n /** 最多显示个数 */\n maxCount?: number;\n /** 自定义类名 */\n class?: string;\n /** 自定义样式表 */\n css?: string;\n}\nexport type AvatarGroupElement = CustomElement<AvatarGroupProps>;\n\nconst defaultProps: AvatarGroupProps = {\n data: [],\n size: void 0,\n class: void 0,\n maxCount: void 0,\n css: void 0,\n};\n\nfunction AvatarGroup(_props: AvatarGroupProps) {\n const props = mergeProps(defaultProps, _props);\n const [local, other] = splitProps(props, ['data', 'maxCount', 'class', 'size', 'css']);\n const data = createMemo(() => local.data || []);\n const showAvatar = createMemo(() => data().slice(0, local.maxCount));\n const more = createMemo(() => {\n const _data = data();\n const len = _data.length - (local.maxCount || _data.length);\n\n if (len > 0) {\n return _data.slice(-len);\n }\n return [];\n });\n\n return (\n <>\n <style textContent={style} />\n <Show when={local.css}>\n <style textContent={css(local.css)} />\n </Show>\n <div {...other} class={cx('group', local.class)}>\n <For each={showAvatar()}>{(a) => <n-avatar {...a} size={local.size} />}</For>\n <Show when={more().length}>\n <Popover\n arrow={true}\n trigger=\"click\"\n popupCss={moreCss}\n content={\n <div class=\"more\">\n <For each={more()}>{(a) => <n-avatar {...a} size={local.size} />}</For>\n </div>\n }\n >\n <n-avatar size={local.size} username={`+${more().length}`} />\n </Popover>\n </Show>\n </div>\n </>\n );\n}\n\nAvatarGroup.registry = () => {\n Avatar.registry();\n customElement<AvatarGroupProps>('n-avatar-group', defaultProps, (props, opt) => {\n const el = opt.element;\n\n createEffect(() => {\n clearAttribute(el, ['css', 'data']);\n });\n return (\n <>\n <style textContent={inline} />\n <AvatarGroup {...props} />\n </>\n );\n });\n};\nexport default AvatarGroup;\n"],"names":["createEffect","createMemo","For","mergeProps","Show","splitProps","css","cx","customElement","Avatar","clearAttribute","Popover","inline","moreCss","style","defaultProps","data","size","class","maxCount","AvatarGroup","_props","local","other","showAvatar","slice","more","_data","len","length","a","registry","props","opt","el","element"],"mappings":"4XAAA,QAASA,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,CAAEC,OAAAA,CAAG,CAAEC,cAAAA,CAAU,CAAEC,QAAAA,CAAI,CAAEC,cAAAA,CAAU,KAAQ,UAAW,AACvF,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAG9C,QAAOC,MAAY,WAAY,AAC/B,QAASC,kBAAAA,CAAc,KAAQ,iBAAkB,AACjD,QAAOC,MAAa,YAAa,AACjC,QAASC,UAAAA,CAAM,KAAQ,UAAW,CAElC,IAAMC,EAAUP,CAAG,CAAC;;;;;;;;;;;;;;;;AAgBpB,CAAC,CACKQ,EAAQR,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;AAwBlB,CAAC,CAkBKS,EAAiC,CACrCC,KAAM,EAAE,CACRC,KAAM,KAAK,EACXC,MAAO,KAAK,EACZC,SAAU,KAAK,EACfb,IAAK,KAAK,CACZ,EAEA,SAASc,EAAYC,CAAwB,EAE3C,GAAM,CAACC,EAAOC,EAAM,CAAGlB,EADTF,EAAWY,EAAcM,GACE,CAAC,OAAQ,WAAY,QAAS,OAAQ,MAAM,EAC/EL,EAAOf,EAAW,IAAMqB,EAAMN,IAAI,EAAI,EAAE,EACxCQ,EAAavB,EAAW,IAAMe,IAAOS,KAAK,CAAC,EAAGH,EAAMH,QAAQ,GAC5DO,EAAOzB,EAAW,KACtB,IAAM0B,EAAQX,IACRY,EAAMD,EAAME,MAAM,CAAIP,CAAAA,EAAMH,QAAQ,EAAIQ,EAAME,MAAM,AAAD,SAEzD,AAAID,EAAM,EACDD,EAAMF,KAAK,CAAC,CAACG,GAEf,EAAE,AACX,GAEA,4CAEwBd,UACnBV,qBAAWkB,EAAMhB,GAAG,8DACCA,EAAIgB,EAAMhB,GAAG,qCAE1BiB,sBAAchB,EAAG,QAASe,EAAMJ,KAAK,kBAC3ChB,qBAAUsB,cAAe,AAACM,gCAAoBA,qBAASR,EAAML,IAAI,6CACjEb,qBAAWsB,IAAOG,MAAM,0BACtBlB,SACQ,CAAA,2BAEGE,mDAGLX,qBAAUwB,cAAS,AAACI,gCAAoBA,qBAASR,EAAML,IAAI,mGAIhDK,EAAML,IAAI,GAAY,CAAC,CAAC,EAAES,IAAOG,MAAM,CAAC,CAAC,uHAMrE,CAEAT,EAAYW,QAAQ,CAAG,KACrBtB,EAAOsB,QAAQ,GACfvB,EAAgC,iBAAkBO,EAAc,CAACiB,EAAOC,KACtE,IAAMC,EAAKD,EAAIE,OAAO,CAKtB,OAHAnC,EAAa,KACXU,EAAewB,EAAI,CAAC,MAAO,OAAO,CACpC,yCAGwBtB,UACnBQ,EAAgBY,GAGvB,EACF,CACA,gBAAeZ,CAAY"}
1
+ {"version":3,"sources":["components/avatar/group.tsx"],"sourcesContent":["import { createEffect, createMemo, For, mergeProps, Show, splitProps } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { AvatarProps, BasicConfig, CustomElement } from '..';\nimport Avatar from '../avatar';\nimport { clearAttribute } from '../basic-config';\nimport Popover from '../popover';\nimport { inline } from '../theme';\n\nconst moreCss = css`\n .more {\n display: flex;\n justify-content: center;\n align-items: center;\n overflow-y: auto;\n padding: 8px;\n max-inline-size: 60vw;\n max-block-size: 80vh;\n gap: 8px;\n flex-wrap: wrap;\n\n > n-avatar {\n display: flex;\n }\n }\n`;\nconst style = css`\n .group {\n display: inline-flex;\n align-items: center;\n\n & > n-avatar {\n display: flex;\n }\n\n & > n-avatar:not(:first-child),\n & > .popover {\n margin-inline-start: -4%;\n transition: margin-inline-start var(--transition-duration);\n\n &:hover:not(.popover) {\n margin-inline-start: 4px;\n\n &:has(+ n-avatar),\n &:has(+ .popover) {\n margin-inline-end: calc(4% + 4px);\n }\n }\n }\n }\n`;\n\nexport interface AvatarGroupProps {\n /** 头像数据 */\n data?: Omit<AvatarProps, 'size'>[];\n /** 头像尺寸\n * @default 'normal'\n */\n size?: BasicConfig['size'];\n /** 最多显示个数 */\n maxCount?: number;\n /** 自定义类名 */\n class?: string;\n /** 自定义样式表 */\n css?: string;\n}\nexport type AvatarGroupElement = CustomElement<AvatarGroupProps>;\n\nconst defaultProps: AvatarGroupProps = {\n data: [],\n size: void 0,\n class: void 0,\n maxCount: void 0,\n css: void 0,\n};\n\nfunction AvatarGroup(_props: AvatarGroupProps) {\n const props = mergeProps(defaultProps, _props);\n const [local, other] = splitProps(props, ['data', 'maxCount', 'class', 'size', 'css']);\n const data = createMemo(() => local.data || []);\n const showAvatar = createMemo(() => data().slice(0, local.maxCount));\n const more = createMemo(() => {\n const _data = data();\n const len = _data.length - (local.maxCount || _data.length);\n\n if (len > 0) {\n return _data.slice(-len);\n }\n return [];\n });\n\n return (\n <>\n <style textContent={style} />\n <Show when={local.css}>\n <style textContent={css(local.css)} />\n </Show>\n <div {...other} class={cx('group', local.class)}>\n <For each={showAvatar()}>{(a) => <n-avatar {...a} size={local.size} />}</For>\n <Show when={more().length}>\n <Popover\n arrow={true}\n trigger=\"click\"\n popupCss={moreCss}\n content={\n <div class=\"more\">\n <For each={more()}>{(a) => <n-avatar {...a} size={local.size} />}</For>\n </div>\n }\n >\n <n-avatar size={local.size} username={`+${more().length}`} />\n </Popover>\n </Show>\n </div>\n </>\n );\n}\n\nAvatarGroup.registry = () => {\n Avatar.registry();\n customElement<AvatarGroupProps>('n-avatar-group', defaultProps, (props, opt) => {\n const el = opt.element;\n\n createEffect(() => {\n clearAttribute(el, ['css', 'data']);\n });\n return (\n <>\n <style textContent={inline} />\n <AvatarGroup {...props} />\n </>\n );\n });\n};\nexport default AvatarGroup;\n"],"names":["createEffect","createMemo","For","mergeProps","Show","splitProps","css","cx","customElement","Avatar","clearAttribute","Popover","inline","moreCss","style","defaultProps","data","size","class","maxCount","AvatarGroup","_props","local","other","showAvatar","slice","more","_data","len","length","a","registry","props","opt","el","element"],"mappings":"4XAAA,QAASA,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,CAAEC,OAAAA,CAAG,CAAEC,cAAAA,CAAU,CAAEC,QAAAA,CAAI,CAAEC,cAAAA,CAAU,KAAQ,UAAW,AACvF,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAG9C,QAAOC,MAAY,WAAY,AAC/B,QAASC,kBAAAA,CAAc,KAAQ,iBAAkB,AACjD,QAAOC,MAAa,YAAa,AACjC,QAASC,UAAAA,CAAM,KAAQ,UAAW,CAElC,IAAMC,EAAUP,CAAG,CAAC;;;;;;;;;;;;;;;;AAgBpB,CAAC,CACKQ,EAAQR,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;AAwBlB,CAAC,CAkBKS,EAAiC,CACrCC,KAAM,EAAE,CACRC,KAAM,KAAK,EACXC,MAAO,KAAK,EACZC,SAAU,KAAK,EACfb,IAAK,KAAK,CACZ,EAEA,SAASc,EAAYC,CAAwB,EAE3C,GAAM,CAACC,EAAOC,EAAM,CAAGlB,EADTF,EAAWY,EAAcM,GACE,CAAC,OAAQ,WAAY,QAAS,OAAQ,MAAM,EAC/EL,EAAOf,EAAW,IAAMqB,EAAMN,IAAI,EAAI,EAAE,EACxCQ,EAAavB,EAAW,IAAMe,IAAOS,KAAK,CAAC,EAAGH,EAAMH,QAAQ,GAC5DO,EAAOzB,EAAW,KACtB,IAAM0B,EAAQX,IACRY,EAAMD,EAAME,MAAM,CAAIP,CAAAA,EAAMH,QAAQ,EAAIQ,EAAME,MAAM,AAAD,SAEzD,AAAID,EAAM,EACDD,EAAMF,KAAK,CAAC,CAACG,GAEf,EAAE,AACX,GAEA,4CAEwBd,UACnBV,qBAAWkB,EAAMhB,GAAG,8DACCA,EAAIgB,EAAMhB,GAAG,qCAE1BiB,sBAAchB,EAAG,QAASe,EAAMJ,KAAK,kBAC3ChB,qBAAUsB,cAAe,AAACM,gCAAoBA,qBAASR,EAAML,IAAI,6CACjEb,qBAAWsB,IAAOG,MAAM,0BACtBlB,SACQ,CAAA,2BAEGE,mDAGLX,qBAAUwB,cAAS,AAACI,gCAAoBA,qBAASR,EAAML,IAAI,mGAIhDK,EAAML,IAAI,GAAY,CAAC,CAAC,EAAES,IAAOG,MAAM,CAAC,CAAC,uHAMrE,CAEAT,EAAYW,QAAQ,CAAG,KACrBtB,EAAOsB,QAAQ,GACfvB,EAAgC,iBAAkBO,EAAc,CAACiB,EAAOC,KACtE,IAAMC,EAAKD,EAAIE,OAAO,CAKtB,OAHAnC,EAAa,KACXU,EAAewB,EAAI,CAAC,MAAO,OAAO,CACpC,yCAGwBtB,UACnBQ,EAAgBY,GAGvB,EACF,CACA,gBAAeZ,CAAY"}
package/es/img/style.js CHANGED
@@ -123,8 +123,8 @@ import{css as e}from"@moneko/css";export const imgCss=e`
123
123
  }
124
124
 
125
125
  100% {
126
- inline-size: 100vi;
127
- block-size: 100vb;
126
+ inline-size: 100vw;
127
+ block-size: 100vh;
128
128
  inset-block-start: 0;
129
129
  inset-inline-start: 0;
130
130
  }
@@ -132,8 +132,8 @@ import{css as e}from"@moneko/css";export const imgCss=e`
132
132
 
133
133
  @keyframes photo-out {
134
134
  from {
135
- inline-size: 100vi;
136
- block-size: 100vb;
135
+ inline-size: 100vw;
136
+ block-size: 100vh;
137
137
  inset-block-start: 0;
138
138
  inset-inline-start: 0;
139
139
  }
package/es/img/style.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/img/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const imgCss = css`\n .img {\n max-inline-size: 100%;\n max-block-size: 100%;\n object-fit: contain;\n transition: opacity 0.3s;\n }\n\n .none {\n pointer-events: none;\n opacity: 0.25;\n }\n\n .error {\n display: inline-block;\n transform: scale(1);\n min-block-size: 75px;\n\n &::before {\n position: absolute;\n color: transparent;\n background: #f5f5f5\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23e6e6e6' d='M304.128 456.192c48.64 0 88.064-39.424 88.064-88.064s-39.424-88.064-88.064-88.064-88.064 39.424-88.064 88.064 39.424 88.064 88.064 88.064zm0-116.224c15.36 0 28.16 12.288 28.16 28.16s-12.288 28.16-28.16 28.16-28.16-12.288-28.16-28.16 12.288-28.16 28.16-28.16z'/%3E%3Cpath fill='%23e6e6e6' d='M887.296 159.744H136.704C96.768 159.744 64 192 64 232.448v559.104c0 39.936 32.256 72.704 72.704 72.704h198.144L500.224 688.64l-36.352-222.72 162.304-130.56-61.44 143.872 92.672 214.016-105.472 171.008h335.36C927.232 864.256 960 832 960 791.552V232.448c0-39.936-32.256-72.704-72.704-72.704zm-138.752 71.68v.512H857.6c16.384 0 30.208 13.312 30.208 30.208v399.872L673.28 408.064l75.264-176.64zM304.64 792.064H165.888c-16.384 0-30.208-13.312-30.208-30.208v-9.728l138.752-164.352 104.96 124.416-74.752 79.872zm81.92-355.84l37.376 228.864-.512.512-142.848-169.984c-3.072-3.584-9.216-3.584-12.288 0L135.68 652.8V262.144c0-16.384 13.312-30.208 30.208-30.208h474.624L386.56 436.224zm501.248 325.632c0 16.896-13.312 30.208-29.696 30.208H680.96l57.344-93.184-87.552-202.24 7.168-7.68 229.888 272.896z'/%3E%3C/svg%3E\")\n no-repeat center / 50% 50%;\n content: '';\n inset-inline-start: 0;\n inset-block-start: 0;\n inline-size: 100%;\n block-size: 100%;\n }\n\n &::after {\n position: absolute;\n overflow: hidden;\n font-size: 12px;\n text-align: center;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: white;\n background-color: rgb(0 0 0 / 50%);\n content: attr(alt);\n inset-inline-start: 0;\n inset-block-end: 0;\n inline-size: 100%;\n line-height: 2;\n }\n }\n`;\nexport const style = css`\n .close {\n position: absolute;\n inset-block-start: 0;\n inset-inline-end: 0;\n z-index: 1;\n color: #fff;\n transition: transform var(--transition-duration);\n cursor: pointer;\n transform: scale(0);\n\n &::before {\n padding: 0 16px;\n font-size: 24px;\n content: '⛌';\n line-height: 46px;\n }\n }\n\n .portal {\n position: fixed;\n z-index: 99999;\n display: flex;\n justify-content: center;\n align-items: center;\n\n &::before {\n position: absolute;\n z-index: -1;\n margin: auto;\n background: var(--img) center/cover no-repeat;\n opacity: 0.5;\n content: '';\n inset-inline-start: 0;\n inset-block-start: 0;\n inset-inline-end: 0;\n inset-block-end: 0;\n inline-size: 100%;\n block-size: 100%;\n pointer-events: none;\n }\n\n &::after {\n position: absolute;\n z-index: -1;\n content: '';\n inset-inline-start: -10%;\n inset-block-start: -10%;\n inset-inline-end: -10%;\n inset-block-end: -10%;\n margin: auto;\n inline-size: 120%;\n block-size: 120%;\n pointer-events: none;\n backdrop-filter: blur(10px) brightness(80%);\n }\n\n &:hover {\n .close {\n transform: scale(1);\n }\n }\n }\n\n .open {\n animation: photo-in var(--transition-duration) forwards;\n }\n\n .closeing {\n animation: photo-out var(--transition-duration) forwards;\n }\n\n @keyframes photo-in {\n 0% {\n pointer-events: none;\n }\n\n 100% {\n inline-size: 100vi;\n block-size: 100vb;\n inset-block-start: 0;\n inset-inline-start: 0;\n }\n }\n\n @keyframes photo-out {\n from {\n inline-size: 100vi;\n block-size: 100vb;\n inset-block-start: 0;\n inset-inline-start: 0;\n }\n\n to {\n pointer-events: none;\n }\n }\n`;\n"],"names":["css","imgCss","style"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,OAASD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+C1B,CAAC,AAAC,AACF,QAAO,MAAME,MAAQF,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiGzB,CAAC,AAAC"}
1
+ {"version":3,"sources":["components/img/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const imgCss = css`\n .img {\n max-inline-size: 100%;\n max-block-size: 100%;\n object-fit: contain;\n transition: opacity 0.3s;\n }\n\n .none {\n pointer-events: none;\n opacity: 0.25;\n }\n\n .error {\n display: inline-block;\n transform: scale(1);\n min-block-size: 75px;\n\n &::before {\n position: absolute;\n color: transparent;\n background: #f5f5f5\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23e6e6e6' d='M304.128 456.192c48.64 0 88.064-39.424 88.064-88.064s-39.424-88.064-88.064-88.064-88.064 39.424-88.064 88.064 39.424 88.064 88.064 88.064zm0-116.224c15.36 0 28.16 12.288 28.16 28.16s-12.288 28.16-28.16 28.16-28.16-12.288-28.16-28.16 12.288-28.16 28.16-28.16z'/%3E%3Cpath fill='%23e6e6e6' d='M887.296 159.744H136.704C96.768 159.744 64 192 64 232.448v559.104c0 39.936 32.256 72.704 72.704 72.704h198.144L500.224 688.64l-36.352-222.72 162.304-130.56-61.44 143.872 92.672 214.016-105.472 171.008h335.36C927.232 864.256 960 832 960 791.552V232.448c0-39.936-32.256-72.704-72.704-72.704zm-138.752 71.68v.512H857.6c16.384 0 30.208 13.312 30.208 30.208v399.872L673.28 408.064l75.264-176.64zM304.64 792.064H165.888c-16.384 0-30.208-13.312-30.208-30.208v-9.728l138.752-164.352 104.96 124.416-74.752 79.872zm81.92-355.84l37.376 228.864-.512.512-142.848-169.984c-3.072-3.584-9.216-3.584-12.288 0L135.68 652.8V262.144c0-16.384 13.312-30.208 30.208-30.208h474.624L386.56 436.224zm501.248 325.632c0 16.896-13.312 30.208-29.696 30.208H680.96l57.344-93.184-87.552-202.24 7.168-7.68 229.888 272.896z'/%3E%3C/svg%3E\")\n no-repeat center / 50% 50%;\n content: '';\n inset-inline-start: 0;\n inset-block-start: 0;\n inline-size: 100%;\n block-size: 100%;\n }\n\n &::after {\n position: absolute;\n overflow: hidden;\n font-size: 12px;\n text-align: center;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: white;\n background-color: rgb(0 0 0 / 50%);\n content: attr(alt);\n inset-inline-start: 0;\n inset-block-end: 0;\n inline-size: 100%;\n line-height: 2;\n }\n }\n`;\nexport const style = css`\n .close {\n position: absolute;\n inset-block-start: 0;\n inset-inline-end: 0;\n z-index: 1;\n color: #fff;\n transition: transform var(--transition-duration);\n cursor: pointer;\n transform: scale(0);\n\n &::before {\n padding: 0 16px;\n font-size: 24px;\n content: '⛌';\n line-height: 46px;\n }\n }\n\n .portal {\n position: fixed;\n z-index: 99999;\n display: flex;\n justify-content: center;\n align-items: center;\n\n &::before {\n position: absolute;\n z-index: -1;\n margin: auto;\n background: var(--img) center/cover no-repeat;\n opacity: 0.5;\n content: '';\n inset-inline-start: 0;\n inset-block-start: 0;\n inset-inline-end: 0;\n inset-block-end: 0;\n inline-size: 100%;\n block-size: 100%;\n pointer-events: none;\n }\n\n &::after {\n position: absolute;\n z-index: -1;\n content: '';\n inset-inline-start: -10%;\n inset-block-start: -10%;\n inset-inline-end: -10%;\n inset-block-end: -10%;\n margin: auto;\n inline-size: 120%;\n block-size: 120%;\n pointer-events: none;\n backdrop-filter: blur(10px) brightness(80%);\n }\n\n &:hover {\n .close {\n transform: scale(1);\n }\n }\n }\n\n .open {\n animation: photo-in var(--transition-duration) forwards;\n }\n\n .closeing {\n animation: photo-out var(--transition-duration) forwards;\n }\n\n @keyframes photo-in {\n 0% {\n pointer-events: none;\n }\n\n 100% {\n inline-size: 100vw;\n block-size: 100vh;\n inset-block-start: 0;\n inset-inline-start: 0;\n }\n }\n\n @keyframes photo-out {\n from {\n inline-size: 100vw;\n block-size: 100vh;\n inset-block-start: 0;\n inset-inline-start: 0;\n }\n\n to {\n pointer-events: none;\n }\n }\n`;\n"],"names":["css","imgCss","style"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,OAASD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+C1B,CAAC,AAAC,AACF,QAAO,MAAME,MAAQF,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiGzB,CAAC,AAAC"}
package/es/marquee/style.js CHANGED
@@ -8,39 +8,27 @@ import{css as e}from"@moneko/css";export const style=e`
8
8
  margin: auto;
9
9
  white-space: nowrap;
10
10
  inline-size: 100%;
11
+ gap: 48px;
11
12
 
12
13
  &.n-marquee-mask {
13
- &::before,
14
- &::after {
15
- content: '';
16
- position: absolute;
17
- z-index: 1000;
18
- inset-block-start: 0;
19
- inset-inline-start: 0;
20
- inline-size: 15rem;
21
- max-inline-size: 25%;
22
- block-size: 100%;
23
- background-image: linear-gradient(to right, var(--component-bg), transparent);
24
- pointer-events: none;
25
- }
26
-
27
- &::after {
28
- inset-inline: auto 0;
29
- background-image: linear-gradient(to left, var(--component-bg), transparent);
30
- }
14
+ mask-image: linear-gradient(
15
+ to right,
16
+ transparent 0,
17
+ var(--component-bg) 25%,
18
+ var(--component-bg) 75%,
19
+ transparent 100%
20
+ );
21
+ mask-composite: intersect;
31
22
  }
32
23
  }
33
24
 
34
25
  .n-marquee-item {
35
26
  display: flex;
36
27
  align-items: center;
37
- line-height: 1;
38
- gap: 4px;
39
28
  animation-duration: var(--speed);
40
29
  animation-iteration-count: infinite;
41
30
  animation-name: marquee-content;
42
31
  animation-timing-function: linear;
43
- padding: 0 24px;
44
32
  }
45
33
 
46
34
  .n-marquee-hover-pause {
@@ -51,11 +39,11 @@ import{css as e}from"@moneko/css";export const style=e`
51
39
 
52
40
  @keyframes marquee-content {
53
41
  from {
54
- transform: translateX(0%);
42
+ transform: translate3d(0%, 0, 0);
55
43
  }
56
44
 
57
45
  to {
58
- transform: translateX(-100%);
46
+ transform: translate3d(-100%, 0, 0);
59
47
  }
60
48
  }
61
49
  `;
package/es/marquee/style.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/marquee/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n .n-marquee {\n --speed: 15s;\n\n position: relative;\n display: flex;\n overflow: hidden;\n margin: auto;\n white-space: nowrap;\n inline-size: 100%;\n\n &.n-marquee-mask {\n &::before,\n &::after {\n content: '';\n position: absolute;\n z-index: 1000;\n inset-block-start: 0;\n inset-inline-start: 0;\n inline-size: 15rem;\n max-inline-size: 25%;\n block-size: 100%;\n background-image: linear-gradient(to right, var(--component-bg), transparent);\n pointer-events: none;\n }\n\n &::after {\n inset-inline: auto 0;\n background-image: linear-gradient(to left, var(--component-bg), transparent);\n }\n }\n }\n\n .n-marquee-item {\n display: flex;\n align-items: center;\n line-height: 1;\n gap: 4px;\n animation-duration: var(--speed);\n animation-iteration-count: infinite;\n animation-name: marquee-content;\n animation-timing-function: linear;\n padding: 0 24px;\n }\n\n .n-marquee-hover-pause {\n &:hover .n-marquee-item {\n animation-play-state: paused;\n }\n }\n\n @keyframes marquee-content {\n from {\n transform: translateX(0%);\n }\n\n to {\n transform: translateX(-100%);\n }\n }\n`;\n"],"names":["css","style"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,MAAQD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DzB,CAAC,AAAC"}
1
+ {"version":3,"sources":["components/marquee/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n .n-marquee {\n --speed: 15s;\n\n position: relative;\n display: flex;\n overflow: hidden;\n margin: auto;\n white-space: nowrap;\n inline-size: 100%;\n gap: 48px;\n\n &.n-marquee-mask {\n mask-image: linear-gradient(\n to right,\n transparent 0,\n var(--component-bg) 25%,\n var(--component-bg) 75%,\n transparent 100%\n );\n mask-composite: intersect;\n }\n }\n\n .n-marquee-item {\n display: flex;\n align-items: center;\n animation-duration: var(--speed);\n animation-iteration-count: infinite;\n animation-name: marquee-content;\n animation-timing-function: linear;\n }\n\n .n-marquee-hover-pause {\n &:hover .n-marquee-item {\n animation-play-state: paused;\n }\n }\n\n @keyframes marquee-content {\n from {\n transform: translate3d(0%, 0, 0);\n }\n\n to {\n transform: translate3d(-100%, 0, 0);\n }\n }\n`;\n"],"names":["css","style"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,MAAQD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDzB,CAAC,AAAC"}
package/es/md-style/index.js CHANGED
@@ -102,7 +102,7 @@ import{css as o}from"@moneko/css";let r=o`
102
102
  padding: 16px;
103
103
  max-inline-size: 200px;
104
104
  block-size: fit-content;
105
- max-block-size: calc(100vb - 132px);
105
+ max-block-size: calc(100vh - 132px);
106
106
  box-sizing: border-box;
107
107
  transition-duration: var(--transition-duration);
108
108
  transition-timing-function: var(--transition-timing-function);
package/es/md-style/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/md-style/index.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nconst mdStyle = css`\n :host,\n :root {\n --table-heading-bg: var(--border-color);\n }\n\n .n-photo-header > span,\n .n-md-body,\n .n-md-toc {\n backdrop-filter: blur(10px);\n }\n\n .n-md-box:not(.site-doc-main) {\n position: relative;\n display: flex;\n margin: 0 auto;\n max-inline-size: 1280px;\n flex-direction: row-reverse;\n gap: 16px;\n }\n\n .n-md-toc,\n .n-md-body {\n border-radius: var(--border-radius);\n background-color: var(--component-bg);\n box-shadow: 0 2px 8px 0 var(--primary-shadow);\n }\n\n .n-md-body {\n overflow: hidden;\n margin: 0 auto 24px;\n padding: 24px;\n color: var(--text-color);\n max-inline-size: 100%;\n box-sizing: border-box;\n overflow-wrap: break-word;\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: background-color;\n flex: 1;\n }\n\n .n-md-body .n-md-body,\n .n-md-body n-md {\n overflow: visible;\n margin: 0;\n padding: 0;\n background-color: unset;\n backdrop-filter: none;\n box-shadow: none;\n }\n\n .n-md-body:has(div:only-child:empty) {\n margin: 0;\n padding: 0;\n background-color: unset;\n backdrop-filter: none;\n box-shadow: none;\n }\n\n a {\n position: relative;\n text-decoration: none;\n color: var(--text-color);\n }\n\n a:visited {\n color: var(--text-secondary);\n }\n\n a:hover {\n color: var(--primary-hover, #80b3ff);\n }\n\n p {\n padding: 0;\n font-size: var(--font-size);\n line-height: 1.8;\n vertical-align: baseline;\n word-wrap: break-word;\n word-break: break-word;\n\n /* content-visibility: auto;\n contain-intrinsic-size: 32px; */\n margin-block-end: 1em;\n }\n\n ol {\n margin: 0;\n padding: 0 0 0 24px;\n font-size: var(--font-size);\n }\n\n .n-md-toc {\n position: sticky;\n inset-block-start: 24px;\n inset-inline-end: 0;\n z-index: 10;\n display: block;\n overflow-y: auto;\n margin: 0 0 24px;\n padding: 16px;\n max-inline-size: 200px;\n block-size: fit-content;\n max-block-size: calc(100vb - 132px);\n box-sizing: border-box;\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: border-color, background-color, box-shadow;\n }\n\n .n-md-toc li,\n .n-md-toc ol {\n display: grid;\n inline-size: fit-content;\n max-inline-size: 100%;\n font-size: var(--font-size-sm);\n list-style: none;\n }\n\n .n-md-toc li a {\n overflow: hidden;\n max-inline-size: 100%;\n font-size: var(--font-size-sm);\n text-overflow: ellipsis;\n text-decoration: none;\n white-space: nowrap;\n color: var(--text-color);\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: color;\n }\n\n .n-md-toc .active,\n .n-md-toc .active a {\n color: var(--primary-color, #5794ff);\n text-shadow: 0 1px var(--primary-shadow);\n }\n\n .n-md-toc a[href^='http'],\n .n-md-toc a[href^='\\/\\/'],\n .n-md-body table a[href^='http'] {\n &:not(:has(img, n-img))::after {\n content: ' ⎋';\n opacity: 0.3;\n }\n }\n\n a[href^='mailto:']::after {\n content: ' 📧';\n opacity: 0.4;\n }\n\n a[href]:has(img, n-img)::before {\n content: none !important;\n }\n\n a[href]:not(.site-pagination-link)::before {\n position: absolute;\n inset-block-end: 0;\n inset-inline-start: 0;\n inline-size: 100%;\n block-size: 2px;\n background-color: var(--primary-hover, #80b3ff);\n transform: scaleX(0);\n transform-origin: center;\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: transform, background-color;\n opacity: 0.5;\n content: '';\n }\n\n a:hover::before {\n transform: scaleX(1);\n }\n\n th img[src*='browser-logos'] {\n display: block;\n inline-size: 32px;\n block-size: 32px;\n }\n\n h1::before,\n h2::before,\n h3::before,\n h4::before,\n h5::before,\n h6::before {\n color: var(--primary-color, #5794ff);\n content: attr(data-prefix);\n }\n\n h1[data-prefix]::before,\n h2[data-prefix]::before,\n h3[data-prefix]::before,\n h4[data-prefix]::before,\n h5[data-prefix]::before,\n h6[data-prefix]::before {\n color: var(--primary-color, #5794ff);\n content: attr(data-prefix) !important;\n }\n\n code:not([class]),\n mark {\n border-radius: var(--border-radius);\n padding: 2px 7px;\n font-size: 90%;\n color: var(--primary-heading);\n background-color: var(--text-selection);\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: background-color, color;\n }\n\n [data-prefix] code,\n [data-prefix] mark {\n font-size: 60%;\n }\n\n h1,\n h2,\n h3,\n h4,\n h5 {\n margin-block: 1em;\n font-weight: 500;\n color: var(--text-heading);\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: border-color, background-color, box-shadow, color;\n }\n\n table,\n tr th,\n tr td,\n blockquote,\n blockquote::after,\n blockquote::before,\n blockquote p {\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n }\n\n dl {\n padding: 0;\n margin-block-end: 1em;\n }\n\n h1 {\n font-size: 1.6em;\n line-height: 54px;\n }\n\n h2 {\n font-size: 1.5em;\n line-height: 42px;\n counter-increment: section;\n }\n\n h2::before {\n content: counter(section) '. ';\n }\n\n h1,\n h2 {\n border-block-end: 1px dotted var(--border-color);\n padding-block-end: 10px;\n }\n\n h3 {\n font-size: 1.4em;\n line-height: 30px;\n }\n\n h4 {\n font-size: 1.3em;\n line-height: 28px;\n }\n\n h5 {\n font-size: 1.2em;\n list-style: none;\n }\n\n hr {\n margin: 16px 0;\n border: 0 none;\n padding: 0;\n block-size: 2px;\n text-align: start;\n color: var(--text-color);\n background-color: var(--border-color);\n }\n\n p img,\n p n-img {\n position: relative;\n display: flex;\n overflow: hidden;\n margin: auto;\n max-inline-size: 100%;\n inline-size: fit-content;\n cursor: pointer;\n }\n\n n-img::part(img) {\n min-inline-size: 24px;\n }\n\n ul {\n font-size: var(--font-size);\n }\n\n dl dt {\n margin-block-start: 16px;\n padding: 10px 0;\n font-size: 1em;\n font-weight: bold;\n font-style: italic;\n }\n\n dl dd {\n margin-block-end: 16px;\n margin-inline-start: 0;\n padding: 0 16px;\n }\n\n table {\n overflow: hidden;\n margin-block-end: 16px;\n border-block-end: 1px solid var(--table-heading-bg);\n inline-size: 100%;\n max-inline-size: 100%;\n border-spacing: 0;\n transition-property: border-color;\n word-break: break-all;\n }\n\n table:last-child {\n margin-block-end: 0;\n }\n\n table tbody tr:nth-child(2n) {\n background-color: var(--primary-details-bg);\n }\n\n table tbody tr:hover {\n background-color: var(--primary-selection);\n }\n\n table tr th {\n font-weight: 500;\n min-inline-size: 54px;\n color: var(--text-heading);\n background-color: var(--table-heading-bg);\n transition-property: background-color, color;\n }\n\n table tr th,\n table td {\n padding: 8px 16px;\n }\n\n tr:first-child th:first-child {\n border-start-start-radius: var(--border-radius);\n }\n\n tr:first-child th:last-child {\n border-start-end-radius: var(--border-radius);\n }\n\n blockquote {\n position: relative;\n margin: 30px 48px;\n border-radius: var(--border-radius);\n padding: 16px;\n font-weight: 500;\n background-color: var(--primary-selection);\n transition-property: background-color;\n }\n\n blockquote::before,\n blockquote::after {\n position: absolute;\n font-size: 56px;\n font-family: sans-serif;\n color: var(--primary-active);\n transition-property: color;\n content: '❞';\n line-height: 1;\n }\n\n blockquote::before {\n inset-block-start: -8px;\n inset-inline-start: 0;\n transform: translateX(-44px) rotate(180deg);\n }\n\n blockquote::after {\n inset-inline-end: 0;\n inset-block-end: -8px;\n transform: translateX(44px);\n }\n\n blockquote.n-tip {\n margin: 16px 0 16px 8px;\n border-inline-start: 4px solid var(--primary-color, #5794ff);\n }\n\n blockquote.n-tip::after {\n content: none;\n }\n\n blockquote.n-tip::before {\n inset-block-start: 18px;\n inset-inline-start: -12px;\n border-radius: 100%;\n inline-size: 20px;\n block-size: 20px;\n font-size: 14px;\n font-weight: bold;\n text-align: center;\n color: #fff;\n background-color: var(--primary-color, #5794ff);\n transform: none;\n content: '!';\n line-height: 20px;\n }\n\n blockquote cite {\n font-size: var(--font-size);\n color: var(--cite-color, #bfbfbf);\n line-height: 20px;\n }\n\n blockquote cite::before {\n content: '\\\\2014 \\\\00A0';\n }\n\n blockquote p {\n margin: auto 0;\n font-size: var(--font-size);\n line-height: 24px;\n transition-property: color;\n }\n\n details {\n overflow: hidden;\n border-inline-start: 5px solid var(--primary-hover, #5794ff);\n border-radius: var(--border-radius);\n padding: 12px 24px;\n background: var(--primary-details-bg);\n box-sizing: border-box;\n user-select: none;\n box-shadow: 0 2px 8px 0 var(--primary-shadow, rgb(0 0 0 / 5%));\n }\n\n details,\n details summary {\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: background-color, transform, border-color;\n }\n\n details:not(:last-of-type) {\n margin-block-end: 16px;\n }\n\n details > summary,\n details > summary ~ * {\n font-size: var(--font-size);\n font-weight: normal;\n font-style: normal;\n line-height: 1.4;\n transition-property: background-color, transform, border-color, margin;\n }\n\n details > summary:not(:last-of-type) details > summary ~ *:not(:last-of-type) {\n margin-block-end: 16px;\n }\n\n details > summary {\n font-weight: 500;\n outline: none;\n cursor: pointer;\n transform: translateX(-18px);\n }\n\n details > summary::-webkit-details-marker,\n details > summary::marker {\n display: none;\n color: transparent;\n }\n\n details > summary::before {\n display: inline-block;\n margin-inline-end: 4px;\n inline-size: 14px;\n font-weight: lighter;\n text-align: center;\n opacity: 0.5;\n content: '⛌';\n transform: rotate(45deg);\n }\n\n details[open] {\n user-select: auto;\n }\n\n details[open] > details {\n margin-block-start: 10px;\n }\n\n details[open] > summary {\n margin-block-end: 10px;\n }\n\n details[open] > summary::before {\n transform: rotate(0);\n }\n\n .katex-display {\n overflow-x: auto;\n }\n\n .n-photo-header {\n display: flex;\n flex-wrap: wrap;\n padding: 16px;\n gap: 16px;\n }\n\n .n-photo-header > span {\n border-radius: 8px;\n padding: 4px 10px;\n font-size: 14px;\n font-weight: lighter;\n background-color: rgb(0 0 0 / 20%);\n }\n\n .n-code {\n display: block;\n margin-block-end: 16px;\n }\n\n .n-code:last-child {\n margin-block-end: 0;\n }\n\n @media screen and (width <= 1100px) {\n .n-md-box,\n .n-md-box:not(.site-doc-main),\n .n-md-body {\n max-inline-size: auto;\n }\n\n .n-md-toc {\n position: fixed;\n inset-inline-end: 16px;\n transform: translateX(100%);\n transition: transform var(--transition-duration) var(--transition-timing-function);\n\n &:hover {\n transform: translateX(0);\n }\n }\n }\n`;\n\nexport default mdStyle;\n"],"names":["css","mdStyle"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,CAElC,IAAMC,EAAUD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwjBpB,CAAC,AAED,gBAAeC,CAAQ"}
1
+ {"version":3,"sources":["components/md-style/index.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nconst mdStyle = css`\n :host,\n :root {\n --table-heading-bg: var(--border-color);\n }\n\n .n-photo-header > span,\n .n-md-body,\n .n-md-toc {\n backdrop-filter: blur(10px);\n }\n\n .n-md-box:not(.site-doc-main) {\n position: relative;\n display: flex;\n margin: 0 auto;\n max-inline-size: 1280px;\n flex-direction: row-reverse;\n gap: 16px;\n }\n\n .n-md-toc,\n .n-md-body {\n border-radius: var(--border-radius);\n background-color: var(--component-bg);\n box-shadow: 0 2px 8px 0 var(--primary-shadow);\n }\n\n .n-md-body {\n overflow: hidden;\n margin: 0 auto 24px;\n padding: 24px;\n color: var(--text-color);\n max-inline-size: 100%;\n box-sizing: border-box;\n overflow-wrap: break-word;\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: background-color;\n flex: 1;\n }\n\n .n-md-body .n-md-body,\n .n-md-body n-md {\n overflow: visible;\n margin: 0;\n padding: 0;\n background-color: unset;\n backdrop-filter: none;\n box-shadow: none;\n }\n\n .n-md-body:has(div:only-child:empty) {\n margin: 0;\n padding: 0;\n background-color: unset;\n backdrop-filter: none;\n box-shadow: none;\n }\n\n a {\n position: relative;\n text-decoration: none;\n color: var(--text-color);\n }\n\n a:visited {\n color: var(--text-secondary);\n }\n\n a:hover {\n color: var(--primary-hover, #80b3ff);\n }\n\n p {\n padding: 0;\n font-size: var(--font-size);\n line-height: 1.8;\n vertical-align: baseline;\n word-wrap: break-word;\n word-break: break-word;\n\n /* content-visibility: auto;\n contain-intrinsic-size: 32px; */\n margin-block-end: 1em;\n }\n\n ol {\n margin: 0;\n padding: 0 0 0 24px;\n font-size: var(--font-size);\n }\n\n .n-md-toc {\n position: sticky;\n inset-block-start: 24px;\n inset-inline-end: 0;\n z-index: 10;\n display: block;\n overflow-y: auto;\n margin: 0 0 24px;\n padding: 16px;\n max-inline-size: 200px;\n block-size: fit-content;\n max-block-size: calc(100vh - 132px);\n box-sizing: border-box;\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: border-color, background-color, box-shadow;\n }\n\n .n-md-toc li,\n .n-md-toc ol {\n display: grid;\n inline-size: fit-content;\n max-inline-size: 100%;\n font-size: var(--font-size-sm);\n list-style: none;\n }\n\n .n-md-toc li a {\n overflow: hidden;\n max-inline-size: 100%;\n font-size: var(--font-size-sm);\n text-overflow: ellipsis;\n text-decoration: none;\n white-space: nowrap;\n color: var(--text-color);\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: color;\n }\n\n .n-md-toc .active,\n .n-md-toc .active a {\n color: var(--primary-color, #5794ff);\n text-shadow: 0 1px var(--primary-shadow);\n }\n\n .n-md-toc a[href^='http'],\n .n-md-toc a[href^='\\/\\/'],\n .n-md-body table a[href^='http'] {\n &:not(:has(img, n-img))::after {\n content: ' ⎋';\n opacity: 0.3;\n }\n }\n\n a[href^='mailto:']::after {\n content: ' 📧';\n opacity: 0.4;\n }\n\n a[href]:has(img, n-img)::before {\n content: none !important;\n }\n\n a[href]:not(.site-pagination-link)::before {\n position: absolute;\n inset-block-end: 0;\n inset-inline-start: 0;\n inline-size: 100%;\n block-size: 2px;\n background-color: var(--primary-hover, #80b3ff);\n transform: scaleX(0);\n transform-origin: center;\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: transform, background-color;\n opacity: 0.5;\n content: '';\n }\n\n a:hover::before {\n transform: scaleX(1);\n }\n\n th img[src*='browser-logos'] {\n display: block;\n inline-size: 32px;\n block-size: 32px;\n }\n\n h1::before,\n h2::before,\n h3::before,\n h4::before,\n h5::before,\n h6::before {\n color: var(--primary-color, #5794ff);\n content: attr(data-prefix);\n }\n\n h1[data-prefix]::before,\n h2[data-prefix]::before,\n h3[data-prefix]::before,\n h4[data-prefix]::before,\n h5[data-prefix]::before,\n h6[data-prefix]::before {\n color: var(--primary-color, #5794ff);\n content: attr(data-prefix) !important;\n }\n\n code:not([class]),\n mark {\n border-radius: var(--border-radius);\n padding: 2px 7px;\n font-size: 90%;\n color: var(--primary-heading);\n background-color: var(--text-selection);\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: background-color, color;\n }\n\n [data-prefix] code,\n [data-prefix] mark {\n font-size: 60%;\n }\n\n h1,\n h2,\n h3,\n h4,\n h5 {\n margin-block: 1em;\n font-weight: 500;\n color: var(--text-heading);\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: border-color, background-color, box-shadow, color;\n }\n\n table,\n tr th,\n tr td,\n blockquote,\n blockquote::after,\n blockquote::before,\n blockquote p {\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n }\n\n dl {\n padding: 0;\n margin-block-end: 1em;\n }\n\n h1 {\n font-size: 1.6em;\n line-height: 54px;\n }\n\n h2 {\n font-size: 1.5em;\n line-height: 42px;\n counter-increment: section;\n }\n\n h2::before {\n content: counter(section) '. ';\n }\n\n h1,\n h2 {\n border-block-end: 1px dotted var(--border-color);\n padding-block-end: 10px;\n }\n\n h3 {\n font-size: 1.4em;\n line-height: 30px;\n }\n\n h4 {\n font-size: 1.3em;\n line-height: 28px;\n }\n\n h5 {\n font-size: 1.2em;\n list-style: none;\n }\n\n hr {\n margin: 16px 0;\n border: 0 none;\n padding: 0;\n block-size: 2px;\n text-align: start;\n color: var(--text-color);\n background-color: var(--border-color);\n }\n\n p img,\n p n-img {\n position: relative;\n display: flex;\n overflow: hidden;\n margin: auto;\n max-inline-size: 100%;\n inline-size: fit-content;\n cursor: pointer;\n }\n\n n-img::part(img) {\n min-inline-size: 24px;\n }\n\n ul {\n font-size: var(--font-size);\n }\n\n dl dt {\n margin-block-start: 16px;\n padding: 10px 0;\n font-size: 1em;\n font-weight: bold;\n font-style: italic;\n }\n\n dl dd {\n margin-block-end: 16px;\n margin-inline-start: 0;\n padding: 0 16px;\n }\n\n table {\n overflow: hidden;\n margin-block-end: 16px;\n border-block-end: 1px solid var(--table-heading-bg);\n inline-size: 100%;\n max-inline-size: 100%;\n border-spacing: 0;\n transition-property: border-color;\n word-break: break-all;\n }\n\n table:last-child {\n margin-block-end: 0;\n }\n\n table tbody tr:nth-child(2n) {\n background-color: var(--primary-details-bg);\n }\n\n table tbody tr:hover {\n background-color: var(--primary-selection);\n }\n\n table tr th {\n font-weight: 500;\n min-inline-size: 54px;\n color: var(--text-heading);\n background-color: var(--table-heading-bg);\n transition-property: background-color, color;\n }\n\n table tr th,\n table td {\n padding: 8px 16px;\n }\n\n tr:first-child th:first-child {\n border-start-start-radius: var(--border-radius);\n }\n\n tr:first-child th:last-child {\n border-start-end-radius: var(--border-radius);\n }\n\n blockquote {\n position: relative;\n margin: 30px 48px;\n border-radius: var(--border-radius);\n padding: 16px;\n font-weight: 500;\n background-color: var(--primary-selection);\n transition-property: background-color;\n }\n\n blockquote::before,\n blockquote::after {\n position: absolute;\n font-size: 56px;\n font-family: sans-serif;\n color: var(--primary-active);\n transition-property: color;\n content: '❞';\n line-height: 1;\n }\n\n blockquote::before {\n inset-block-start: -8px;\n inset-inline-start: 0;\n transform: translateX(-44px) rotate(180deg);\n }\n\n blockquote::after {\n inset-inline-end: 0;\n inset-block-end: -8px;\n transform: translateX(44px);\n }\n\n blockquote.n-tip {\n margin: 16px 0 16px 8px;\n border-inline-start: 4px solid var(--primary-color, #5794ff);\n }\n\n blockquote.n-tip::after {\n content: none;\n }\n\n blockquote.n-tip::before {\n inset-block-start: 18px;\n inset-inline-start: -12px;\n border-radius: 100%;\n inline-size: 20px;\n block-size: 20px;\n font-size: 14px;\n font-weight: bold;\n text-align: center;\n color: #fff;\n background-color: var(--primary-color, #5794ff);\n transform: none;\n content: '!';\n line-height: 20px;\n }\n\n blockquote cite {\n font-size: var(--font-size);\n color: var(--cite-color, #bfbfbf);\n line-height: 20px;\n }\n\n blockquote cite::before {\n content: '\\\\2014 \\\\00A0';\n }\n\n blockquote p {\n margin: auto 0;\n font-size: var(--font-size);\n line-height: 24px;\n transition-property: color;\n }\n\n details {\n overflow: hidden;\n border-inline-start: 5px solid var(--primary-hover, #5794ff);\n border-radius: var(--border-radius);\n padding: 12px 24px;\n background: var(--primary-details-bg);\n box-sizing: border-box;\n user-select: none;\n box-shadow: 0 2px 8px 0 var(--primary-shadow, rgb(0 0 0 / 5%));\n }\n\n details,\n details summary {\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: background-color, transform, border-color;\n }\n\n details:not(:last-of-type) {\n margin-block-end: 16px;\n }\n\n details > summary,\n details > summary ~ * {\n font-size: var(--font-size);\n font-weight: normal;\n font-style: normal;\n line-height: 1.4;\n transition-property: background-color, transform, border-color, margin;\n }\n\n details > summary:not(:last-of-type) details > summary ~ *:not(:last-of-type) {\n margin-block-end: 16px;\n }\n\n details > summary {\n font-weight: 500;\n outline: none;\n cursor: pointer;\n transform: translateX(-18px);\n }\n\n details > summary::-webkit-details-marker,\n details > summary::marker {\n display: none;\n color: transparent;\n }\n\n details > summary::before {\n display: inline-block;\n margin-inline-end: 4px;\n inline-size: 14px;\n font-weight: lighter;\n text-align: center;\n opacity: 0.5;\n content: '⛌';\n transform: rotate(45deg);\n }\n\n details[open] {\n user-select: auto;\n }\n\n details[open] > details {\n margin-block-start: 10px;\n }\n\n details[open] > summary {\n margin-block-end: 10px;\n }\n\n details[open] > summary::before {\n transform: rotate(0);\n }\n\n .katex-display {\n overflow-x: auto;\n }\n\n .n-photo-header {\n display: flex;\n flex-wrap: wrap;\n padding: 16px;\n gap: 16px;\n }\n\n .n-photo-header > span {\n border-radius: 8px;\n padding: 4px 10px;\n font-size: 14px;\n font-weight: lighter;\n background-color: rgb(0 0 0 / 20%);\n }\n\n .n-code {\n display: block;\n margin-block-end: 16px;\n }\n\n .n-code:last-child {\n margin-block-end: 0;\n }\n\n @media screen and (width <= 1100px) {\n .n-md-box,\n .n-md-box:not(.site-doc-main),\n .n-md-body {\n max-inline-size: auto;\n }\n\n .n-md-toc {\n position: fixed;\n inset-inline-end: 16px;\n transform: translateX(100%);\n transition: transform var(--transition-duration) var(--transition-timing-function);\n\n &:hover {\n transform: translateX(0);\n }\n }\n }\n`;\n\nexport default mdStyle;\n"],"names":["css","mdStyle"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,CAElC,IAAMC,EAAUD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwjBpB,CAAC,AAED,gBAAeC,CAAQ"}
package/es/modal/style.js CHANGED
@@ -47,7 +47,7 @@ import{css as o}from"@moneko/css";export const style=o`
47
47
 
48
48
  .modal-body {
49
49
  overflow: auto;
50
- max-block-size: calc(100vb - 150px);
50
+ max-block-size: calc(100vh - 150px);
51
51
 
52
52
  &::-webkit-scrollbar {
53
53
  inline-size: 5px;
package/es/modal/style.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/modal/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n .portal {\n --opacity: 0;\n --scale: 0;\n --timing: ease-in;\n\n position: fixed;\n box-sizing: border-box;\n inset-block-start: 0;\n inset-inline-start: 0;\n inline-size: 100%;\n block-size: 100%;\n z-index: 99999;\n display: flex;\n\n &::before {\n position: absolute;\n z-index: -1;\n background-color: var(--mask-bg);\n opacity: var(--opacity);\n transition: opacity 0.2s var(--timing);\n inset-inline-start: 0;\n inset-block-start: 0;\n content: '';\n inline-size: 100%;\n block-size: 100%;\n pointer-events: none;\n }\n }\n\n .mask-blur::before {\n backdrop-filter: blur(10px);\n }\n\n .modal-header,\n .modal-body,\n .modal-footer {\n cursor: auto;\n }\n\n .modal-footer {\n display: flex;\n gap: 8px;\n margin-block-start: 24px;\n justify-content: flex-end;\n }\n\n .modal-body {\n overflow: auto;\n max-block-size: calc(100vb - 150px);\n\n &::-webkit-scrollbar {\n inline-size: 5px;\n block-size: 5px;\n }\n }\n\n .modal-content {\n margin: auto;\n border-radius: var(--border-radius);\n padding: 20px 24px;\n background-color: var(--modal-component-bg);\n opacity: var(--opacity);\n box-shadow: var(--modal-box-shadow);\n cursor: grab;\n min-inline-size: 200px;\n max-inline-size: calc(100% - 32px);\n transform: translate3d(var(--x), var(--y), 1px) scale3d(var(--scale), var(--scale), 1);\n transition-property: transform, opacity;\n transition-duration: 0.2s;\n transition-timing-function: var(--timing);\n backdrop-filter: blur(10px);\n\n &:active {\n cursor: grabbing;\n }\n\n &.moveing {\n transition-property: none;\n transition-duration: none;\n transition-timing-function: none;\n user-select: none;\n\n * {\n pointer-events: none;\n }\n }\n\n &.centered {\n text-align: center;\n\n .modal-body,\n .modal-footer {\n justify-content: center;\n text-align: center;\n }\n }\n }\n\n .open {\n --opacity: 0;\n --timing: ease-in;\n\n animation: zoom-in 0.2s var(--timing) forwards;\n }\n\n .closeing {\n --opacity: 1;\n --timing: ease-out;\n\n animation: zoom-out 0.2s var(--timing) forwards;\n }\n\n .modal-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n }\n\n .modal-title {\n flex: 1;\n }\n\n .modal-close {\n position: absolute;\n inset-inline-end: 10px;\n inset-block-start: 10px;\n\n &::part(label) {\n color: var(--text-color);\n }\n }\n\n @keyframes zoom-in {\n 0% {\n --opacity: 0;\n --scale: 0;\n\n pointer-events: none;\n }\n\n 100% {\n --opacity: 1;\n --scale: 1;\n --x: var(--movement-x);\n --y: var(--movement-y);\n }\n }\n\n @keyframes zoom-out {\n 0% {\n --opacity: 1;\n --scale: 1;\n --x: var(--movement-x);\n --y: var(--movement-y);\n }\n\n 100% {\n --opacity: 0;\n --scale: 0;\n\n pointer-events: none;\n }\n }\n`;\n"],"names":["css","style"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,MAAQD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoKzB,CAAC,AAAC"}
1
+ {"version":3,"sources":["components/modal/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n .portal {\n --opacity: 0;\n --scale: 0;\n --timing: ease-in;\n\n position: fixed;\n box-sizing: border-box;\n inset-block-start: 0;\n inset-inline-start: 0;\n inline-size: 100%;\n block-size: 100%;\n z-index: 99999;\n display: flex;\n\n &::before {\n position: absolute;\n z-index: -1;\n background-color: var(--mask-bg);\n opacity: var(--opacity);\n transition: opacity 0.2s var(--timing);\n inset-inline-start: 0;\n inset-block-start: 0;\n content: '';\n inline-size: 100%;\n block-size: 100%;\n pointer-events: none;\n }\n }\n\n .mask-blur::before {\n backdrop-filter: blur(10px);\n }\n\n .modal-header,\n .modal-body,\n .modal-footer {\n cursor: auto;\n }\n\n .modal-footer {\n display: flex;\n gap: 8px;\n margin-block-start: 24px;\n justify-content: flex-end;\n }\n\n .modal-body {\n overflow: auto;\n max-block-size: calc(100vh - 150px);\n\n &::-webkit-scrollbar {\n inline-size: 5px;\n block-size: 5px;\n }\n }\n\n .modal-content {\n margin: auto;\n border-radius: var(--border-radius);\n padding: 20px 24px;\n background-color: var(--modal-component-bg);\n opacity: var(--opacity);\n box-shadow: var(--modal-box-shadow);\n cursor: grab;\n min-inline-size: 200px;\n max-inline-size: calc(100% - 32px);\n transform: translate3d(var(--x), var(--y), 1px) scale3d(var(--scale), var(--scale), 1);\n transition-property: transform, opacity;\n transition-duration: 0.2s;\n transition-timing-function: var(--timing);\n backdrop-filter: blur(10px);\n\n &:active {\n cursor: grabbing;\n }\n\n &.moveing {\n transition-property: none;\n transition-duration: none;\n transition-timing-function: none;\n user-select: none;\n\n * {\n pointer-events: none;\n }\n }\n\n &.centered {\n text-align: center;\n\n .modal-body,\n .modal-footer {\n justify-content: center;\n text-align: center;\n }\n }\n }\n\n .open {\n --opacity: 0;\n --timing: ease-in;\n\n animation: zoom-in 0.2s var(--timing) forwards;\n }\n\n .closeing {\n --opacity: 1;\n --timing: ease-out;\n\n animation: zoom-out 0.2s var(--timing) forwards;\n }\n\n .modal-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n }\n\n .modal-title {\n flex: 1;\n }\n\n .modal-close {\n position: absolute;\n inset-inline-end: 10px;\n inset-block-start: 10px;\n\n &::part(label) {\n color: var(--text-color);\n }\n }\n\n @keyframes zoom-in {\n 0% {\n --opacity: 0;\n --scale: 0;\n\n pointer-events: none;\n }\n\n 100% {\n --opacity: 1;\n --scale: 1;\n --x: var(--movement-x);\n --y: var(--movement-y);\n }\n }\n\n @keyframes zoom-out {\n 0% {\n --opacity: 1;\n --scale: 1;\n --x: var(--movement-x);\n --y: var(--movement-y);\n }\n\n 100% {\n --opacity: 0;\n --scale: 0;\n\n pointer-events: none;\n }\n }\n`;\n"],"names":["css","style"],"mappings":"AAAA,OAASA,OAAAA,CAAG,KAAQ,aAAc,AAElC,QAAO,MAAMC,MAAQD,CAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoKzB,CAAC,AAAC"}
package/lib/avatar/group.js CHANGED
@@ -1,12 +1,12 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return x}});const e=require("solid-js/web"),t=require("solid-js"),r=require("@moneko/css"),n=require("solid-element"),a=l(require("../avatar")),i=require("../basic-config"),s=l(require("../popover")),o=require("../theme");function l(e){return e&&e.__esModule?e:{default:e}}const c=(0,e.template)("<style>"),u=(0,e.template)("<style> "),p=(0,e.template)("<n-avatar>",!0,!1),d=(0,e.template)("<div>"),m=(0,e.template)('<div class="more">'),g=(0,r.css)`
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return x}});const e=require("solid-js/web"),t=require("solid-js"),r=require("@moneko/css"),n=require("solid-element"),a=l(require("../avatar")),s=require("../basic-config"),i=l(require("../popover")),o=require("../theme");function l(e){return e&&e.__esModule?e:{default:e}}const c=(0,e.template)("<style>"),u=(0,e.template)("<style> "),p=(0,e.template)("<n-avatar>",!0,!1),d=(0,e.template)("<div>"),m=(0,e.template)('<div class="more">'),g=(0,r.css)`
2
2
  .more {
3
3
  display: flex;
4
4
  justify-content: center;
5
5
  align-items: center;
6
6
  overflow-y: auto;
7
7
  padding: 8px;
8
- max-inline-size: 60vi;
9
- max-block-size: 80vb;
8
+ max-inline-size: 60vw;
9
+ max-block-size: 80vh;
10
10
  gap: 8px;
11
11
  flex-wrap: wrap;
12
12
 
@@ -38,4 +38,4 @@
38
38
  }
39
39
  }
40
40
  }
41
- `,f={data:[],size:void 0,class:void 0,maxCount:void 0,css:void 0};function h(n){let a=(0,t.mergeProps)(f,n),[i,o]=(0,t.splitProps)(a,["data","maxCount","class","size","css"]),l=(0,t.createMemo)(()=>i.data||[]),h=(0,t.createMemo)(()=>l().slice(0,i.maxCount)),x=(0,t.createMemo)(()=>{let e=l(),t=e.length-(i.maxCount||e.length);return t>0?e.slice(-t):[]});return[(()=>{let e=c();return e.textContent=v,e})(),(0,e.createComponent)(t.Show,{get when(){return i.css},get children(){let t=u(),n=t.firstChild;return(0,e.effect)(()=>n.data=(0,r.css)(i.css)),t}}),(()=>{let n=d();return(0,e.spread)(n,(0,e.mergeProps)(o,{get class(){return(0,r.cx)("group",i.class)}}),!1,!0),(0,e.insert)(n,(0,e.createComponent)(t.For,{get each(){return h()},children:t=>(()=>{let r=p();return(0,e.spread)(r,(0,e.mergeProps)(t,{get size(){return i.size}}),!1,!1),r._$owner=(0,e.getOwner)(),r})()}),null),(0,e.insert)(n,(0,e.createComponent)(t.Show,{get when(){return x().length},get children(){return(0,e.createComponent)(s.default,{arrow:!0,trigger:"click",popupCss:g,get content(){return(()=>{let r=m();return(0,e.insert)(r,(0,e.createComponent)(t.For,{get each(){return x()},children:t=>(()=>{let r=p();return(0,e.spread)(r,(0,e.mergeProps)(t,{get size(){return i.size}}),!1,!1),r._$owner=(0,e.getOwner)(),r})()})),r})()},get children(){let t=p();return t._$owner=(0,e.getOwner)(),(0,e.effect)(e=>{let r=i.size,n=`+${x().length}`;return r!==e._v$&&(t.size=e._v$=r),n!==e._v$2&&(t.username=e._v$2=n),e},{_v$:void 0,_v$2:void 0}),t}})}}),null),n})()]}h.registry=()=>{a.default.registry(),(0,n.customElement)("n-avatar-group",f,(r,n)=>{let a=n.element;return(0,t.createEffect)(()=>{(0,i.clearAttribute)(a,["css","data"])}),[(()=>{let e=c();return e.textContent=o.inline,e})(),(0,e.createComponent)(h,r)]})};const x=h;
41
+ `,f={data:[],size:void 0,class:void 0,maxCount:void 0,css:void 0};function h(n){let a=(0,t.mergeProps)(f,n),[s,o]=(0,t.splitProps)(a,["data","maxCount","class","size","css"]),l=(0,t.createMemo)(()=>s.data||[]),h=(0,t.createMemo)(()=>l().slice(0,s.maxCount)),x=(0,t.createMemo)(()=>{let e=l(),t=e.length-(s.maxCount||e.length);return t>0?e.slice(-t):[]});return[(()=>{let e=c();return e.textContent=v,e})(),(0,e.createComponent)(t.Show,{get when(){return s.css},get children(){let t=u(),n=t.firstChild;return(0,e.effect)(()=>n.data=(0,r.css)(s.css)),t}}),(()=>{let n=d();return(0,e.spread)(n,(0,e.mergeProps)(o,{get class(){return(0,r.cx)("group",s.class)}}),!1,!0),(0,e.insert)(n,(0,e.createComponent)(t.For,{get each(){return h()},children:t=>(()=>{let r=p();return(0,e.spread)(r,(0,e.mergeProps)(t,{get size(){return s.size}}),!1,!1),r._$owner=(0,e.getOwner)(),r})()}),null),(0,e.insert)(n,(0,e.createComponent)(t.Show,{get when(){return x().length},get children(){return(0,e.createComponent)(i.default,{arrow:!0,trigger:"click",popupCss:g,get content(){return(()=>{let r=m();return(0,e.insert)(r,(0,e.createComponent)(t.For,{get each(){return x()},children:t=>(()=>{let r=p();return(0,e.spread)(r,(0,e.mergeProps)(t,{get size(){return s.size}}),!1,!1),r._$owner=(0,e.getOwner)(),r})()})),r})()},get children(){let t=p();return t._$owner=(0,e.getOwner)(),(0,e.effect)(e=>{let r=s.size,n=`+${x().length}`;return r!==e._v$&&(t.size=e._v$=r),n!==e._v$2&&(t.username=e._v$2=n),e},{_v$:void 0,_v$2:void 0}),t}})}}),null),n})()]}h.registry=()=>{a.default.registry(),(0,n.customElement)("n-avatar-group",f,(r,n)=>{let a=n.element;return(0,t.createEffect)(()=>{(0,s.clearAttribute)(a,["css","data"])}),[(()=>{let e=c();return e.textContent=o.inline,e})(),(0,e.createComponent)(h,r)]})};const x=h;
package/lib/avatar/group.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/avatar/group.tsx"],"sourcesContent":["import { createEffect, createMemo, For, mergeProps, Show, splitProps } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { AvatarProps, BasicConfig, CustomElement } from '..';\nimport Avatar from '../avatar';\nimport { clearAttribute } from '../basic-config';\nimport Popover from '../popover';\nimport { inline } from '../theme';\n\nconst moreCss = css`\n .more {\n display: flex;\n justify-content: center;\n align-items: center;\n overflow-y: auto;\n padding: 8px;\n max-inline-size: 60vi;\n max-block-size: 80vb;\n gap: 8px;\n flex-wrap: wrap;\n\n > n-avatar {\n display: flex;\n }\n }\n`;\nconst style = css`\n .group {\n display: inline-flex;\n align-items: center;\n\n & > n-avatar {\n display: flex;\n }\n\n & > n-avatar:not(:first-child),\n & > .popover {\n margin-inline-start: -4%;\n transition: margin-inline-start var(--transition-duration);\n\n &:hover:not(.popover) {\n margin-inline-start: 4px;\n\n &:has(+ n-avatar),\n &:has(+ .popover) {\n margin-inline-end: calc(4% + 4px);\n }\n }\n }\n }\n`;\n\nexport interface AvatarGroupProps {\n /** 头像数据 */\n data?: Omit<AvatarProps, 'size'>[];\n /** 头像尺寸\n * @default 'normal'\n */\n size?: BasicConfig['size'];\n /** 最多显示个数 */\n maxCount?: number;\n /** 自定义类名 */\n class?: string;\n /** 自定义样式表 */\n css?: string;\n}\nexport type AvatarGroupElement = CustomElement<AvatarGroupProps>;\n\nconst defaultProps: AvatarGroupProps = {\n data: [],\n size: void 0,\n class: void 0,\n maxCount: void 0,\n css: void 0,\n};\n\nfunction AvatarGroup(_props: AvatarGroupProps) {\n const props = mergeProps(defaultProps, _props);\n const [local, other] = splitProps(props, ['data', 'maxCount', 'class', 'size', 'css']);\n const data = createMemo(() => local.data || []);\n const showAvatar = createMemo(() => data().slice(0, local.maxCount));\n const more = createMemo(() => {\n const _data = data();\n const len = _data.length - (local.maxCount || _data.length);\n\n if (len > 0) {\n return _data.slice(-len);\n }\n return [];\n });\n\n return (\n <>\n <style textContent={style} />\n <Show when={local.css}>\n <style textContent={css(local.css)} />\n </Show>\n <div {...other} class={cx('group', local.class)}>\n <For each={showAvatar()}>{(a) => <n-avatar {...a} size={local.size} />}</For>\n <Show when={more().length}>\n <Popover\n arrow={true}\n trigger=\"click\"\n popupCss={moreCss}\n content={\n <div class=\"more\">\n <For each={more()}>{(a) => <n-avatar {...a} size={local.size} />}</For>\n </div>\n }\n >\n <n-avatar size={local.size} username={`+${more().length}`} />\n </Popover>\n </Show>\n </div>\n </>\n );\n}\n\nAvatarGroup.registry = () => {\n Avatar.registry();\n customElement<AvatarGroupProps>('n-avatar-group', defaultProps, (props, opt) => {\n const el = opt.element;\n\n createEffect(() => {\n clearAttribute(el, ['css', 'data']);\n });\n return (\n <>\n <style textContent={inline} />\n <AvatarGroup {...props} />\n </>\n );\n });\n};\nexport default AvatarGroup;\n"],"names":["moreCss","css","style","defaultProps","data","size","class","maxCount","AvatarGroup","_props","props","mergeProps","local","other","splitProps","createMemo","showAvatar","slice","more","_data","len","length","Show","cx","For","a","Popover","registry","Avatar","customElement","opt","el","element","createEffect","clearAttribute","inline"],"mappings":"kGAuIA,+CAAA,+CAvI4E,sBACpD,yBACM,6BAGX,wBACY,+BACX,yBACG,oOAEjBA,EAAUC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;AAgBpB,CAAC,CACKC,EAAQD,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;AAwBlB,CAAC,CAkBKE,EAAiC,CACrCC,KAAM,EAAE,CACRC,KAAM,KAAK,EACXC,MAAO,KAAK,EACZC,SAAU,KAAK,EACfN,IAAK,KAAK,CACZ,EAEA,SAASO,EAAYC,CAAwB,EAC3C,IAAMC,EAAQC,GAAAA,YAAU,EAACR,EAAcM,GACjC,CAACG,EAAOC,EAAM,CAAGC,GAAAA,YAAU,EAACJ,EAAO,CAAC,OAAQ,WAAY,QAAS,OAAQ,MAAM,EAC/EN,EAAOW,GAAAA,YAAU,EAAC,IAAMH,EAAMR,IAAI,EAAI,EAAE,EACxCY,EAAaD,GAAAA,YAAU,EAAC,IAAMX,IAAOa,KAAK,CAAC,EAAGL,EAAML,QAAQ,GAC5DW,EAAOH,GAAAA,YAAU,EAAC,KACtB,IAAMI,EAAQf,IACRgB,EAAMD,EAAME,MAAM,CAAIT,CAAAA,EAAML,QAAQ,EAAIY,EAAME,MAAM,AAAD,SAEzD,AAAID,EAAM,EACDD,EAAMF,KAAK,CAAC,CAACG,GAEf,EAAE,AACX,GAEA,4CAEwBlB,8BACnBoB,MAAI,oBAAOV,EAAMX,GAAG,wEACCA,GAAAA,KAAG,EAACW,EAAMX,GAAG,8DAE1BY,qBAAcU,GAAAA,IAAE,EAAC,QAASX,EAAMN,KAAK,iDAC3CkB,KAAG,oBAAOR,cAAe,AAACS,yDAAoBA,qBAASb,EAAMP,IAAI,yFACjEiB,MAAI,oBAAOJ,IAAOG,MAAM,6CACtBK,SAAO,QACC,CAAA,2BAEG1B,iFAGLwB,KAAG,oBAAON,cAAS,AAACO,yDAAoBA,qBAASb,EAAMP,IAAI,wIAIhDO,EAAMP,IAAI,GAAY,CAAC,CAAC,EAAEa,IAAOG,MAAM,CAAC,CAAC,uHAMrE,CAEAb,EAAYmB,QAAQ,CAAG,KACrBC,SAAM,CAACD,QAAQ,GACfE,GAAAA,eAAa,EAAmB,iBAAkB1B,EAAc,CAACO,EAAOoB,KACtE,IAAMC,EAAKD,EAAIE,OAAO,CAKtB,MAHAC,GAAAA,cAAY,EAAC,KACXC,GAAAA,gBAAc,EAACH,EAAI,CAAC,MAAO,OAAO,CACpC,yCAGwBI,QAAM,6BACzB3B,EAAgBE,GAGvB,EACF,QACA,EAAeF"}
1
+ {"version":3,"sources":["components/avatar/group.tsx"],"sourcesContent":["import { createEffect, createMemo, For, mergeProps, Show, splitProps } from 'solid-js';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { AvatarProps, BasicConfig, CustomElement } from '..';\nimport Avatar from '../avatar';\nimport { clearAttribute } from '../basic-config';\nimport Popover from '../popover';\nimport { inline } from '../theme';\n\nconst moreCss = css`\n .more {\n display: flex;\n justify-content: center;\n align-items: center;\n overflow-y: auto;\n padding: 8px;\n max-inline-size: 60vw;\n max-block-size: 80vh;\n gap: 8px;\n flex-wrap: wrap;\n\n > n-avatar {\n display: flex;\n }\n }\n`;\nconst style = css`\n .group {\n display: inline-flex;\n align-items: center;\n\n & > n-avatar {\n display: flex;\n }\n\n & > n-avatar:not(:first-child),\n & > .popover {\n margin-inline-start: -4%;\n transition: margin-inline-start var(--transition-duration);\n\n &:hover:not(.popover) {\n margin-inline-start: 4px;\n\n &:has(+ n-avatar),\n &:has(+ .popover) {\n margin-inline-end: calc(4% + 4px);\n }\n }\n }\n }\n`;\n\nexport interface AvatarGroupProps {\n /** 头像数据 */\n data?: Omit<AvatarProps, 'size'>[];\n /** 头像尺寸\n * @default 'normal'\n */\n size?: BasicConfig['size'];\n /** 最多显示个数 */\n maxCount?: number;\n /** 自定义类名 */\n class?: string;\n /** 自定义样式表 */\n css?: string;\n}\nexport type AvatarGroupElement = CustomElement<AvatarGroupProps>;\n\nconst defaultProps: AvatarGroupProps = {\n data: [],\n size: void 0,\n class: void 0,\n maxCount: void 0,\n css: void 0,\n};\n\nfunction AvatarGroup(_props: AvatarGroupProps) {\n const props = mergeProps(defaultProps, _props);\n const [local, other] = splitProps(props, ['data', 'maxCount', 'class', 'size', 'css']);\n const data = createMemo(() => local.data || []);\n const showAvatar = createMemo(() => data().slice(0, local.maxCount));\n const more = createMemo(() => {\n const _data = data();\n const len = _data.length - (local.maxCount || _data.length);\n\n if (len > 0) {\n return _data.slice(-len);\n }\n return [];\n });\n\n return (\n <>\n <style textContent={style} />\n <Show when={local.css}>\n <style textContent={css(local.css)} />\n </Show>\n <div {...other} class={cx('group', local.class)}>\n <For each={showAvatar()}>{(a) => <n-avatar {...a} size={local.size} />}</For>\n <Show when={more().length}>\n <Popover\n arrow={true}\n trigger=\"click\"\n popupCss={moreCss}\n content={\n <div class=\"more\">\n <For each={more()}>{(a) => <n-avatar {...a} size={local.size} />}</For>\n </div>\n }\n >\n <n-avatar size={local.size} username={`+${more().length}`} />\n </Popover>\n </Show>\n </div>\n </>\n );\n}\n\nAvatarGroup.registry = () => {\n Avatar.registry();\n customElement<AvatarGroupProps>('n-avatar-group', defaultProps, (props, opt) => {\n const el = opt.element;\n\n createEffect(() => {\n clearAttribute(el, ['css', 'data']);\n });\n return (\n <>\n <style textContent={inline} />\n <AvatarGroup {...props} />\n </>\n );\n });\n};\nexport default AvatarGroup;\n"],"names":["moreCss","css","style","defaultProps","data","size","class","maxCount","AvatarGroup","_props","props","mergeProps","local","other","splitProps","createMemo","showAvatar","slice","more","_data","len","length","Show","cx","For","a","Popover","registry","Avatar","customElement","opt","el","element","createEffect","clearAttribute","inline"],"mappings":"kGAuIA,+CAAA,+CAvI4E,sBACpD,yBACM,6BAGX,wBACY,+BACX,yBACG,oOAEjBA,EAAUC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;AAgBpB,CAAC,CACKC,EAAQD,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;AAwBlB,CAAC,CAkBKE,EAAiC,CACrCC,KAAM,EAAE,CACRC,KAAM,KAAK,EACXC,MAAO,KAAK,EACZC,SAAU,KAAK,EACfN,IAAK,KAAK,CACZ,EAEA,SAASO,EAAYC,CAAwB,EAC3C,IAAMC,EAAQC,GAAAA,YAAU,EAACR,EAAcM,GACjC,CAACG,EAAOC,EAAM,CAAGC,GAAAA,YAAU,EAACJ,EAAO,CAAC,OAAQ,WAAY,QAAS,OAAQ,MAAM,EAC/EN,EAAOW,GAAAA,YAAU,EAAC,IAAMH,EAAMR,IAAI,EAAI,EAAE,EACxCY,EAAaD,GAAAA,YAAU,EAAC,IAAMX,IAAOa,KAAK,CAAC,EAAGL,EAAML,QAAQ,GAC5DW,EAAOH,GAAAA,YAAU,EAAC,KACtB,IAAMI,EAAQf,IACRgB,EAAMD,EAAME,MAAM,CAAIT,CAAAA,EAAML,QAAQ,EAAIY,EAAME,MAAM,AAAD,SAEzD,AAAID,EAAM,EACDD,EAAMF,KAAK,CAAC,CAACG,GAEf,EAAE,AACX,GAEA,4CAEwBlB,8BACnBoB,MAAI,oBAAOV,EAAMX,GAAG,wEACCA,GAAAA,KAAG,EAACW,EAAMX,GAAG,8DAE1BY,qBAAcU,GAAAA,IAAE,EAAC,QAASX,EAAMN,KAAK,iDAC3CkB,KAAG,oBAAOR,cAAe,AAACS,yDAAoBA,qBAASb,EAAMP,IAAI,yFACjEiB,MAAI,oBAAOJ,IAAOG,MAAM,6CACtBK,SAAO,QACC,CAAA,2BAEG1B,iFAGLwB,KAAG,oBAAON,cAAS,AAACO,yDAAoBA,qBAASb,EAAMP,IAAI,wIAIhDO,EAAMP,IAAI,GAAY,CAAC,CAAC,EAAEa,IAAOG,MAAM,CAAC,CAAC,uHAMrE,CAEAb,EAAYmB,QAAQ,CAAG,KACrBC,SAAM,CAACD,QAAQ,GACfE,GAAAA,eAAa,EAAmB,iBAAkB1B,EAAc,CAACO,EAAOoB,KACtE,IAAMC,EAAKD,EAAIE,OAAO,CAKtB,MAHAC,GAAAA,cAAY,EAAC,KACXC,GAAAA,gBAAc,EAACH,EAAI,CAAC,MAAO,OAAO,CACpC,yCAGwBI,QAAM,6BACzB3B,EAAgBE,GAGvB,EACF,QACA,EAAeF"}
package/lib/img/style.js CHANGED
@@ -123,8 +123,8 @@
123
123
  }
124
124
 
125
125
  100% {
126
- inline-size: 100vi;
127
- block-size: 100vb;
126
+ inline-size: 100vw;
127
+ block-size: 100vh;
128
128
  inset-block-start: 0;
129
129
  inset-inline-start: 0;
130
130
  }
@@ -132,8 +132,8 @@
132
132
 
133
133
  @keyframes photo-out {
134
134
  from {
135
- inline-size: 100vi;
136
- block-size: 100vb;
135
+ inline-size: 100vw;
136
+ block-size: 100vh;
137
137
  inset-block-start: 0;
138
138
  inset-inline-start: 0;
139
139
  }
package/lib/img/style.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/img/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const imgCss = css`\n .img {\n max-inline-size: 100%;\n max-block-size: 100%;\n object-fit: contain;\n transition: opacity 0.3s;\n }\n\n .none {\n pointer-events: none;\n opacity: 0.25;\n }\n\n .error {\n display: inline-block;\n transform: scale(1);\n min-block-size: 75px;\n\n &::before {\n position: absolute;\n color: transparent;\n background: #f5f5f5\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23e6e6e6' d='M304.128 456.192c48.64 0 88.064-39.424 88.064-88.064s-39.424-88.064-88.064-88.064-88.064 39.424-88.064 88.064 39.424 88.064 88.064 88.064zm0-116.224c15.36 0 28.16 12.288 28.16 28.16s-12.288 28.16-28.16 28.16-28.16-12.288-28.16-28.16 12.288-28.16 28.16-28.16z'/%3E%3Cpath fill='%23e6e6e6' d='M887.296 159.744H136.704C96.768 159.744 64 192 64 232.448v559.104c0 39.936 32.256 72.704 72.704 72.704h198.144L500.224 688.64l-36.352-222.72 162.304-130.56-61.44 143.872 92.672 214.016-105.472 171.008h335.36C927.232 864.256 960 832 960 791.552V232.448c0-39.936-32.256-72.704-72.704-72.704zm-138.752 71.68v.512H857.6c16.384 0 30.208 13.312 30.208 30.208v399.872L673.28 408.064l75.264-176.64zM304.64 792.064H165.888c-16.384 0-30.208-13.312-30.208-30.208v-9.728l138.752-164.352 104.96 124.416-74.752 79.872zm81.92-355.84l37.376 228.864-.512.512-142.848-169.984c-3.072-3.584-9.216-3.584-12.288 0L135.68 652.8V262.144c0-16.384 13.312-30.208 30.208-30.208h474.624L386.56 436.224zm501.248 325.632c0 16.896-13.312 30.208-29.696 30.208H680.96l57.344-93.184-87.552-202.24 7.168-7.68 229.888 272.896z'/%3E%3C/svg%3E\")\n no-repeat center / 50% 50%;\n content: '';\n inset-inline-start: 0;\n inset-block-start: 0;\n inline-size: 100%;\n block-size: 100%;\n }\n\n &::after {\n position: absolute;\n overflow: hidden;\n font-size: 12px;\n text-align: center;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: white;\n background-color: rgb(0 0 0 / 50%);\n content: attr(alt);\n inset-inline-start: 0;\n inset-block-end: 0;\n inline-size: 100%;\n line-height: 2;\n }\n }\n`;\nexport const style = css`\n .close {\n position: absolute;\n inset-block-start: 0;\n inset-inline-end: 0;\n z-index: 1;\n color: #fff;\n transition: transform var(--transition-duration);\n cursor: pointer;\n transform: scale(0);\n\n &::before {\n padding: 0 16px;\n font-size: 24px;\n content: '⛌';\n line-height: 46px;\n }\n }\n\n .portal {\n position: fixed;\n z-index: 99999;\n display: flex;\n justify-content: center;\n align-items: center;\n\n &::before {\n position: absolute;\n z-index: -1;\n margin: auto;\n background: var(--img) center/cover no-repeat;\n opacity: 0.5;\n content: '';\n inset-inline-start: 0;\n inset-block-start: 0;\n inset-inline-end: 0;\n inset-block-end: 0;\n inline-size: 100%;\n block-size: 100%;\n pointer-events: none;\n }\n\n &::after {\n position: absolute;\n z-index: -1;\n content: '';\n inset-inline-start: -10%;\n inset-block-start: -10%;\n inset-inline-end: -10%;\n inset-block-end: -10%;\n margin: auto;\n inline-size: 120%;\n block-size: 120%;\n pointer-events: none;\n backdrop-filter: blur(10px) brightness(80%);\n }\n\n &:hover {\n .close {\n transform: scale(1);\n }\n }\n }\n\n .open {\n animation: photo-in var(--transition-duration) forwards;\n }\n\n .closeing {\n animation: photo-out var(--transition-duration) forwards;\n }\n\n @keyframes photo-in {\n 0% {\n pointer-events: none;\n }\n\n 100% {\n inline-size: 100vi;\n block-size: 100vb;\n inset-block-start: 0;\n inset-inline-start: 0;\n }\n }\n\n @keyframes photo-out {\n from {\n inline-size: 100vi;\n block-size: 100vb;\n inset-block-start: 0;\n inset-inline-start: 0;\n }\n\n to {\n pointer-events: none;\n }\n }\n`;\n"],"names":["imgCss","style","css"],"mappings":"kKAEaA,MAAM,mBAANA,GAgDAC,KAAK,mBAALA,qBAlDO,eAEPD,EAASE,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+C1B,CAAC,CACYD,EAAQC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiGzB,CAAC"}
1
+ {"version":3,"sources":["components/img/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const imgCss = css`\n .img {\n max-inline-size: 100%;\n max-block-size: 100%;\n object-fit: contain;\n transition: opacity 0.3s;\n }\n\n .none {\n pointer-events: none;\n opacity: 0.25;\n }\n\n .error {\n display: inline-block;\n transform: scale(1);\n min-block-size: 75px;\n\n &::before {\n position: absolute;\n color: transparent;\n background: #f5f5f5\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23e6e6e6' d='M304.128 456.192c48.64 0 88.064-39.424 88.064-88.064s-39.424-88.064-88.064-88.064-88.064 39.424-88.064 88.064 39.424 88.064 88.064 88.064zm0-116.224c15.36 0 28.16 12.288 28.16 28.16s-12.288 28.16-28.16 28.16-28.16-12.288-28.16-28.16 12.288-28.16 28.16-28.16z'/%3E%3Cpath fill='%23e6e6e6' d='M887.296 159.744H136.704C96.768 159.744 64 192 64 232.448v559.104c0 39.936 32.256 72.704 72.704 72.704h198.144L500.224 688.64l-36.352-222.72 162.304-130.56-61.44 143.872 92.672 214.016-105.472 171.008h335.36C927.232 864.256 960 832 960 791.552V232.448c0-39.936-32.256-72.704-72.704-72.704zm-138.752 71.68v.512H857.6c16.384 0 30.208 13.312 30.208 30.208v399.872L673.28 408.064l75.264-176.64zM304.64 792.064H165.888c-16.384 0-30.208-13.312-30.208-30.208v-9.728l138.752-164.352 104.96 124.416-74.752 79.872zm81.92-355.84l37.376 228.864-.512.512-142.848-169.984c-3.072-3.584-9.216-3.584-12.288 0L135.68 652.8V262.144c0-16.384 13.312-30.208 30.208-30.208h474.624L386.56 436.224zm501.248 325.632c0 16.896-13.312 30.208-29.696 30.208H680.96l57.344-93.184-87.552-202.24 7.168-7.68 229.888 272.896z'/%3E%3C/svg%3E\")\n no-repeat center / 50% 50%;\n content: '';\n inset-inline-start: 0;\n inset-block-start: 0;\n inline-size: 100%;\n block-size: 100%;\n }\n\n &::after {\n position: absolute;\n overflow: hidden;\n font-size: 12px;\n text-align: center;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: white;\n background-color: rgb(0 0 0 / 50%);\n content: attr(alt);\n inset-inline-start: 0;\n inset-block-end: 0;\n inline-size: 100%;\n line-height: 2;\n }\n }\n`;\nexport const style = css`\n .close {\n position: absolute;\n inset-block-start: 0;\n inset-inline-end: 0;\n z-index: 1;\n color: #fff;\n transition: transform var(--transition-duration);\n cursor: pointer;\n transform: scale(0);\n\n &::before {\n padding: 0 16px;\n font-size: 24px;\n content: '⛌';\n line-height: 46px;\n }\n }\n\n .portal {\n position: fixed;\n z-index: 99999;\n display: flex;\n justify-content: center;\n align-items: center;\n\n &::before {\n position: absolute;\n z-index: -1;\n margin: auto;\n background: var(--img) center/cover no-repeat;\n opacity: 0.5;\n content: '';\n inset-inline-start: 0;\n inset-block-start: 0;\n inset-inline-end: 0;\n inset-block-end: 0;\n inline-size: 100%;\n block-size: 100%;\n pointer-events: none;\n }\n\n &::after {\n position: absolute;\n z-index: -1;\n content: '';\n inset-inline-start: -10%;\n inset-block-start: -10%;\n inset-inline-end: -10%;\n inset-block-end: -10%;\n margin: auto;\n inline-size: 120%;\n block-size: 120%;\n pointer-events: none;\n backdrop-filter: blur(10px) brightness(80%);\n }\n\n &:hover {\n .close {\n transform: scale(1);\n }\n }\n }\n\n .open {\n animation: photo-in var(--transition-duration) forwards;\n }\n\n .closeing {\n animation: photo-out var(--transition-duration) forwards;\n }\n\n @keyframes photo-in {\n 0% {\n pointer-events: none;\n }\n\n 100% {\n inline-size: 100vw;\n block-size: 100vh;\n inset-block-start: 0;\n inset-inline-start: 0;\n }\n }\n\n @keyframes photo-out {\n from {\n inline-size: 100vw;\n block-size: 100vh;\n inset-block-start: 0;\n inset-inline-start: 0;\n }\n\n to {\n pointer-events: none;\n }\n }\n`;\n"],"names":["imgCss","style","css"],"mappings":"kKAEaA,MAAM,mBAANA,GAgDAC,KAAK,mBAALA,qBAlDO,eAEPD,EAASE,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+C1B,CAAC,CACYD,EAAQC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiGzB,CAAC"}
package/lib/marquee/style.js CHANGED
@@ -8,39 +8,27 @@
8
8
  margin: auto;
9
9
  white-space: nowrap;
10
10
  inline-size: 100%;
11
+ gap: 48px;
11
12
 
12
13
  &.n-marquee-mask {
13
- &::before,
14
- &::after {
15
- content: '';
16
- position: absolute;
17
- z-index: 1000;
18
- inset-block-start: 0;
19
- inset-inline-start: 0;
20
- inline-size: 15rem;
21
- max-inline-size: 25%;
22
- block-size: 100%;
23
- background-image: linear-gradient(to right, var(--component-bg), transparent);
24
- pointer-events: none;
25
- }
26
-
27
- &::after {
28
- inset-inline: auto 0;
29
- background-image: linear-gradient(to left, var(--component-bg), transparent);
30
- }
14
+ mask-image: linear-gradient(
15
+ to right,
16
+ transparent 0,
17
+ var(--component-bg) 25%,
18
+ var(--component-bg) 75%,
19
+ transparent 100%
20
+ );
21
+ mask-composite: intersect;
31
22
  }
32
23
  }
33
24
 
34
25
  .n-marquee-item {
35
26
  display: flex;
36
27
  align-items: center;
37
- line-height: 1;
38
- gap: 4px;
39
28
  animation-duration: var(--speed);
40
29
  animation-iteration-count: infinite;
41
30
  animation-name: marquee-content;
42
31
  animation-timing-function: linear;
43
- padding: 0 24px;
44
32
  }
45
33
 
46
34
  .n-marquee-hover-pause {
@@ -51,11 +39,11 @@
51
39
 
52
40
  @keyframes marquee-content {
53
41
  from {
54
- transform: translateX(0%);
42
+ transform: translate3d(0%, 0, 0);
55
43
  }
56
44
 
57
45
  to {
58
- transform: translateX(-100%);
46
+ transform: translate3d(-100%, 0, 0);
59
47
  }
60
48
  }
61
49
  `;
package/lib/marquee/style.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/marquee/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n .n-marquee {\n --speed: 15s;\n\n position: relative;\n display: flex;\n overflow: hidden;\n margin: auto;\n white-space: nowrap;\n inline-size: 100%;\n\n &.n-marquee-mask {\n &::before,\n &::after {\n content: '';\n position: absolute;\n z-index: 1000;\n inset-block-start: 0;\n inset-inline-start: 0;\n inline-size: 15rem;\n max-inline-size: 25%;\n block-size: 100%;\n background-image: linear-gradient(to right, var(--component-bg), transparent);\n pointer-events: none;\n }\n\n &::after {\n inset-inline: auto 0;\n background-image: linear-gradient(to left, var(--component-bg), transparent);\n }\n }\n }\n\n .n-marquee-item {\n display: flex;\n align-items: center;\n line-height: 1;\n gap: 4px;\n animation-duration: var(--speed);\n animation-iteration-count: infinite;\n animation-name: marquee-content;\n animation-timing-function: linear;\n padding: 0 24px;\n }\n\n .n-marquee-hover-pause {\n &:hover .n-marquee-item {\n animation-play-state: paused;\n }\n }\n\n @keyframes marquee-content {\n from {\n transform: translateX(0%);\n }\n\n to {\n transform: translateX(-100%);\n }\n }\n`;\n"],"names":["style","css"],"mappings":"kGAEaA,6CAAAA,qBAFO,eAEPA,EAAQC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DzB,CAAC"}
1
+ {"version":3,"sources":["components/marquee/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n .n-marquee {\n --speed: 15s;\n\n position: relative;\n display: flex;\n overflow: hidden;\n margin: auto;\n white-space: nowrap;\n inline-size: 100%;\n gap: 48px;\n\n &.n-marquee-mask {\n mask-image: linear-gradient(\n to right,\n transparent 0,\n var(--component-bg) 25%,\n var(--component-bg) 75%,\n transparent 100%\n );\n mask-composite: intersect;\n }\n }\n\n .n-marquee-item {\n display: flex;\n align-items: center;\n animation-duration: var(--speed);\n animation-iteration-count: infinite;\n animation-name: marquee-content;\n animation-timing-function: linear;\n }\n\n .n-marquee-hover-pause {\n &:hover .n-marquee-item {\n animation-play-state: paused;\n }\n }\n\n @keyframes marquee-content {\n from {\n transform: translate3d(0%, 0, 0);\n }\n\n to {\n transform: translate3d(-100%, 0, 0);\n }\n }\n`;\n"],"names":["style","css"],"mappings":"kGAEaA,6CAAAA,qBAFO,eAEPA,EAAQC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDzB,CAAC"}
package/lib/md-style/index.js CHANGED
@@ -102,7 +102,7 @@
102
102
  padding: 16px;
103
103
  max-inline-size: 200px;
104
104
  block-size: fit-content;
105
- max-block-size: calc(100vb - 132px);
105
+ max-block-size: calc(100vh - 132px);
106
106
  box-sizing: border-box;
107
107
  transition-duration: var(--transition-duration);
108
108
  transition-timing-function: var(--transition-timing-function);
package/lib/md-style/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/md-style/index.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nconst mdStyle = css`\n :host,\n :root {\n --table-heading-bg: var(--border-color);\n }\n\n .n-photo-header > span,\n .n-md-body,\n .n-md-toc {\n backdrop-filter: blur(10px);\n }\n\n .n-md-box:not(.site-doc-main) {\n position: relative;\n display: flex;\n margin: 0 auto;\n max-inline-size: 1280px;\n flex-direction: row-reverse;\n gap: 16px;\n }\n\n .n-md-toc,\n .n-md-body {\n border-radius: var(--border-radius);\n background-color: var(--component-bg);\n box-shadow: 0 2px 8px 0 var(--primary-shadow);\n }\n\n .n-md-body {\n overflow: hidden;\n margin: 0 auto 24px;\n padding: 24px;\n color: var(--text-color);\n max-inline-size: 100%;\n box-sizing: border-box;\n overflow-wrap: break-word;\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: background-color;\n flex: 1;\n }\n\n .n-md-body .n-md-body,\n .n-md-body n-md {\n overflow: visible;\n margin: 0;\n padding: 0;\n background-color: unset;\n backdrop-filter: none;\n box-shadow: none;\n }\n\n .n-md-body:has(div:only-child:empty) {\n margin: 0;\n padding: 0;\n background-color: unset;\n backdrop-filter: none;\n box-shadow: none;\n }\n\n a {\n position: relative;\n text-decoration: none;\n color: var(--text-color);\n }\n\n a:visited {\n color: var(--text-secondary);\n }\n\n a:hover {\n color: var(--primary-hover, #80b3ff);\n }\n\n p {\n padding: 0;\n font-size: var(--font-size);\n line-height: 1.8;\n vertical-align: baseline;\n word-wrap: break-word;\n word-break: break-word;\n\n /* content-visibility: auto;\n contain-intrinsic-size: 32px; */\n margin-block-end: 1em;\n }\n\n ol {\n margin: 0;\n padding: 0 0 0 24px;\n font-size: var(--font-size);\n }\n\n .n-md-toc {\n position: sticky;\n inset-block-start: 24px;\n inset-inline-end: 0;\n z-index: 10;\n display: block;\n overflow-y: auto;\n margin: 0 0 24px;\n padding: 16px;\n max-inline-size: 200px;\n block-size: fit-content;\n max-block-size: calc(100vb - 132px);\n box-sizing: border-box;\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: border-color, background-color, box-shadow;\n }\n\n .n-md-toc li,\n .n-md-toc ol {\n display: grid;\n inline-size: fit-content;\n max-inline-size: 100%;\n font-size: var(--font-size-sm);\n list-style: none;\n }\n\n .n-md-toc li a {\n overflow: hidden;\n max-inline-size: 100%;\n font-size: var(--font-size-sm);\n text-overflow: ellipsis;\n text-decoration: none;\n white-space: nowrap;\n color: var(--text-color);\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: color;\n }\n\n .n-md-toc .active,\n .n-md-toc .active a {\n color: var(--primary-color, #5794ff);\n text-shadow: 0 1px var(--primary-shadow);\n }\n\n .n-md-toc a[href^='http'],\n .n-md-toc a[href^='\\/\\/'],\n .n-md-body table a[href^='http'] {\n &:not(:has(img, n-img))::after {\n content: ' ⎋';\n opacity: 0.3;\n }\n }\n\n a[href^='mailto:']::after {\n content: ' 📧';\n opacity: 0.4;\n }\n\n a[href]:has(img, n-img)::before {\n content: none !important;\n }\n\n a[href]:not(.site-pagination-link)::before {\n position: absolute;\n inset-block-end: 0;\n inset-inline-start: 0;\n inline-size: 100%;\n block-size: 2px;\n background-color: var(--primary-hover, #80b3ff);\n transform: scaleX(0);\n transform-origin: center;\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: transform, background-color;\n opacity: 0.5;\n content: '';\n }\n\n a:hover::before {\n transform: scaleX(1);\n }\n\n th img[src*='browser-logos'] {\n display: block;\n inline-size: 32px;\n block-size: 32px;\n }\n\n h1::before,\n h2::before,\n h3::before,\n h4::before,\n h5::before,\n h6::before {\n color: var(--primary-color, #5794ff);\n content: attr(data-prefix);\n }\n\n h1[data-prefix]::before,\n h2[data-prefix]::before,\n h3[data-prefix]::before,\n h4[data-prefix]::before,\n h5[data-prefix]::before,\n h6[data-prefix]::before {\n color: var(--primary-color, #5794ff);\n content: attr(data-prefix) !important;\n }\n\n code:not([class]),\n mark {\n border-radius: var(--border-radius);\n padding: 2px 7px;\n font-size: 90%;\n color: var(--primary-heading);\n background-color: var(--text-selection);\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: background-color, color;\n }\n\n [data-prefix] code,\n [data-prefix] mark {\n font-size: 60%;\n }\n\n h1,\n h2,\n h3,\n h4,\n h5 {\n margin-block: 1em;\n font-weight: 500;\n color: var(--text-heading);\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: border-color, background-color, box-shadow, color;\n }\n\n table,\n tr th,\n tr td,\n blockquote,\n blockquote::after,\n blockquote::before,\n blockquote p {\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n }\n\n dl {\n padding: 0;\n margin-block-end: 1em;\n }\n\n h1 {\n font-size: 1.6em;\n line-height: 54px;\n }\n\n h2 {\n font-size: 1.5em;\n line-height: 42px;\n counter-increment: section;\n }\n\n h2::before {\n content: counter(section) '. ';\n }\n\n h1,\n h2 {\n border-block-end: 1px dotted var(--border-color);\n padding-block-end: 10px;\n }\n\n h3 {\n font-size: 1.4em;\n line-height: 30px;\n }\n\n h4 {\n font-size: 1.3em;\n line-height: 28px;\n }\n\n h5 {\n font-size: 1.2em;\n list-style: none;\n }\n\n hr {\n margin: 16px 0;\n border: 0 none;\n padding: 0;\n block-size: 2px;\n text-align: start;\n color: var(--text-color);\n background-color: var(--border-color);\n }\n\n p img,\n p n-img {\n position: relative;\n display: flex;\n overflow: hidden;\n margin: auto;\n max-inline-size: 100%;\n inline-size: fit-content;\n cursor: pointer;\n }\n\n n-img::part(img) {\n min-inline-size: 24px;\n }\n\n ul {\n font-size: var(--font-size);\n }\n\n dl dt {\n margin-block-start: 16px;\n padding: 10px 0;\n font-size: 1em;\n font-weight: bold;\n font-style: italic;\n }\n\n dl dd {\n margin-block-end: 16px;\n margin-inline-start: 0;\n padding: 0 16px;\n }\n\n table {\n overflow: hidden;\n margin-block-end: 16px;\n border-block-end: 1px solid var(--table-heading-bg);\n inline-size: 100%;\n max-inline-size: 100%;\n border-spacing: 0;\n transition-property: border-color;\n word-break: break-all;\n }\n\n table:last-child {\n margin-block-end: 0;\n }\n\n table tbody tr:nth-child(2n) {\n background-color: var(--primary-details-bg);\n }\n\n table tbody tr:hover {\n background-color: var(--primary-selection);\n }\n\n table tr th {\n font-weight: 500;\n min-inline-size: 54px;\n color: var(--text-heading);\n background-color: var(--table-heading-bg);\n transition-property: background-color, color;\n }\n\n table tr th,\n table td {\n padding: 8px 16px;\n }\n\n tr:first-child th:first-child {\n border-start-start-radius: var(--border-radius);\n }\n\n tr:first-child th:last-child {\n border-start-end-radius: var(--border-radius);\n }\n\n blockquote {\n position: relative;\n margin: 30px 48px;\n border-radius: var(--border-radius);\n padding: 16px;\n font-weight: 500;\n background-color: var(--primary-selection);\n transition-property: background-color;\n }\n\n blockquote::before,\n blockquote::after {\n position: absolute;\n font-size: 56px;\n font-family: sans-serif;\n color: var(--primary-active);\n transition-property: color;\n content: '❞';\n line-height: 1;\n }\n\n blockquote::before {\n inset-block-start: -8px;\n inset-inline-start: 0;\n transform: translateX(-44px) rotate(180deg);\n }\n\n blockquote::after {\n inset-inline-end: 0;\n inset-block-end: -8px;\n transform: translateX(44px);\n }\n\n blockquote.n-tip {\n margin: 16px 0 16px 8px;\n border-inline-start: 4px solid var(--primary-color, #5794ff);\n }\n\n blockquote.n-tip::after {\n content: none;\n }\n\n blockquote.n-tip::before {\n inset-block-start: 18px;\n inset-inline-start: -12px;\n border-radius: 100%;\n inline-size: 20px;\n block-size: 20px;\n font-size: 14px;\n font-weight: bold;\n text-align: center;\n color: #fff;\n background-color: var(--primary-color, #5794ff);\n transform: none;\n content: '!';\n line-height: 20px;\n }\n\n blockquote cite {\n font-size: var(--font-size);\n color: var(--cite-color, #bfbfbf);\n line-height: 20px;\n }\n\n blockquote cite::before {\n content: '\\\\2014 \\\\00A0';\n }\n\n blockquote p {\n margin: auto 0;\n font-size: var(--font-size);\n line-height: 24px;\n transition-property: color;\n }\n\n details {\n overflow: hidden;\n border-inline-start: 5px solid var(--primary-hover, #5794ff);\n border-radius: var(--border-radius);\n padding: 12px 24px;\n background: var(--primary-details-bg);\n box-sizing: border-box;\n user-select: none;\n box-shadow: 0 2px 8px 0 var(--primary-shadow, rgb(0 0 0 / 5%));\n }\n\n details,\n details summary {\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: background-color, transform, border-color;\n }\n\n details:not(:last-of-type) {\n margin-block-end: 16px;\n }\n\n details > summary,\n details > summary ~ * {\n font-size: var(--font-size);\n font-weight: normal;\n font-style: normal;\n line-height: 1.4;\n transition-property: background-color, transform, border-color, margin;\n }\n\n details > summary:not(:last-of-type) details > summary ~ *:not(:last-of-type) {\n margin-block-end: 16px;\n }\n\n details > summary {\n font-weight: 500;\n outline: none;\n cursor: pointer;\n transform: translateX(-18px);\n }\n\n details > summary::-webkit-details-marker,\n details > summary::marker {\n display: none;\n color: transparent;\n }\n\n details > summary::before {\n display: inline-block;\n margin-inline-end: 4px;\n inline-size: 14px;\n font-weight: lighter;\n text-align: center;\n opacity: 0.5;\n content: '⛌';\n transform: rotate(45deg);\n }\n\n details[open] {\n user-select: auto;\n }\n\n details[open] > details {\n margin-block-start: 10px;\n }\n\n details[open] > summary {\n margin-block-end: 10px;\n }\n\n details[open] > summary::before {\n transform: rotate(0);\n }\n\n .katex-display {\n overflow-x: auto;\n }\n\n .n-photo-header {\n display: flex;\n flex-wrap: wrap;\n padding: 16px;\n gap: 16px;\n }\n\n .n-photo-header > span {\n border-radius: 8px;\n padding: 4px 10px;\n font-size: 14px;\n font-weight: lighter;\n background-color: rgb(0 0 0 / 20%);\n }\n\n .n-code {\n display: block;\n margin-block-end: 16px;\n }\n\n .n-code:last-child {\n margin-block-end: 0;\n }\n\n @media screen and (width <= 1100px) {\n .n-md-box,\n .n-md-box:not(.site-doc-main),\n .n-md-body {\n max-inline-size: auto;\n }\n\n .n-md-toc {\n position: fixed;\n inset-inline-end: 16px;\n transform: translateX(100%);\n transition: transform var(--transition-duration) var(--transition-timing-function);\n\n &:hover {\n transform: translateX(0);\n }\n }\n }\n`;\n\nexport default mdStyle;\n"],"names":["mdStyle","css"],"mappings":"kGA4jBA,+CAAA,qBA5jBoB,eAEdA,EAAUC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwjBpB,CAAC,CAED,EAAeD"}
1
+ {"version":3,"sources":["components/md-style/index.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nconst mdStyle = css`\n :host,\n :root {\n --table-heading-bg: var(--border-color);\n }\n\n .n-photo-header > span,\n .n-md-body,\n .n-md-toc {\n backdrop-filter: blur(10px);\n }\n\n .n-md-box:not(.site-doc-main) {\n position: relative;\n display: flex;\n margin: 0 auto;\n max-inline-size: 1280px;\n flex-direction: row-reverse;\n gap: 16px;\n }\n\n .n-md-toc,\n .n-md-body {\n border-radius: var(--border-radius);\n background-color: var(--component-bg);\n box-shadow: 0 2px 8px 0 var(--primary-shadow);\n }\n\n .n-md-body {\n overflow: hidden;\n margin: 0 auto 24px;\n padding: 24px;\n color: var(--text-color);\n max-inline-size: 100%;\n box-sizing: border-box;\n overflow-wrap: break-word;\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: background-color;\n flex: 1;\n }\n\n .n-md-body .n-md-body,\n .n-md-body n-md {\n overflow: visible;\n margin: 0;\n padding: 0;\n background-color: unset;\n backdrop-filter: none;\n box-shadow: none;\n }\n\n .n-md-body:has(div:only-child:empty) {\n margin: 0;\n padding: 0;\n background-color: unset;\n backdrop-filter: none;\n box-shadow: none;\n }\n\n a {\n position: relative;\n text-decoration: none;\n color: var(--text-color);\n }\n\n a:visited {\n color: var(--text-secondary);\n }\n\n a:hover {\n color: var(--primary-hover, #80b3ff);\n }\n\n p {\n padding: 0;\n font-size: var(--font-size);\n line-height: 1.8;\n vertical-align: baseline;\n word-wrap: break-word;\n word-break: break-word;\n\n /* content-visibility: auto;\n contain-intrinsic-size: 32px; */\n margin-block-end: 1em;\n }\n\n ol {\n margin: 0;\n padding: 0 0 0 24px;\n font-size: var(--font-size);\n }\n\n .n-md-toc {\n position: sticky;\n inset-block-start: 24px;\n inset-inline-end: 0;\n z-index: 10;\n display: block;\n overflow-y: auto;\n margin: 0 0 24px;\n padding: 16px;\n max-inline-size: 200px;\n block-size: fit-content;\n max-block-size: calc(100vh - 132px);\n box-sizing: border-box;\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: border-color, background-color, box-shadow;\n }\n\n .n-md-toc li,\n .n-md-toc ol {\n display: grid;\n inline-size: fit-content;\n max-inline-size: 100%;\n font-size: var(--font-size-sm);\n list-style: none;\n }\n\n .n-md-toc li a {\n overflow: hidden;\n max-inline-size: 100%;\n font-size: var(--font-size-sm);\n text-overflow: ellipsis;\n text-decoration: none;\n white-space: nowrap;\n color: var(--text-color);\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: color;\n }\n\n .n-md-toc .active,\n .n-md-toc .active a {\n color: var(--primary-color, #5794ff);\n text-shadow: 0 1px var(--primary-shadow);\n }\n\n .n-md-toc a[href^='http'],\n .n-md-toc a[href^='\\/\\/'],\n .n-md-body table a[href^='http'] {\n &:not(:has(img, n-img))::after {\n content: ' ⎋';\n opacity: 0.3;\n }\n }\n\n a[href^='mailto:']::after {\n content: ' 📧';\n opacity: 0.4;\n }\n\n a[href]:has(img, n-img)::before {\n content: none !important;\n }\n\n a[href]:not(.site-pagination-link)::before {\n position: absolute;\n inset-block-end: 0;\n inset-inline-start: 0;\n inline-size: 100%;\n block-size: 2px;\n background-color: var(--primary-hover, #80b3ff);\n transform: scaleX(0);\n transform-origin: center;\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: transform, background-color;\n opacity: 0.5;\n content: '';\n }\n\n a:hover::before {\n transform: scaleX(1);\n }\n\n th img[src*='browser-logos'] {\n display: block;\n inline-size: 32px;\n block-size: 32px;\n }\n\n h1::before,\n h2::before,\n h3::before,\n h4::before,\n h5::before,\n h6::before {\n color: var(--primary-color, #5794ff);\n content: attr(data-prefix);\n }\n\n h1[data-prefix]::before,\n h2[data-prefix]::before,\n h3[data-prefix]::before,\n h4[data-prefix]::before,\n h5[data-prefix]::before,\n h6[data-prefix]::before {\n color: var(--primary-color, #5794ff);\n content: attr(data-prefix) !important;\n }\n\n code:not([class]),\n mark {\n border-radius: var(--border-radius);\n padding: 2px 7px;\n font-size: 90%;\n color: var(--primary-heading);\n background-color: var(--text-selection);\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: background-color, color;\n }\n\n [data-prefix] code,\n [data-prefix] mark {\n font-size: 60%;\n }\n\n h1,\n h2,\n h3,\n h4,\n h5 {\n margin-block: 1em;\n font-weight: 500;\n color: var(--text-heading);\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: border-color, background-color, box-shadow, color;\n }\n\n table,\n tr th,\n tr td,\n blockquote,\n blockquote::after,\n blockquote::before,\n blockquote p {\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n }\n\n dl {\n padding: 0;\n margin-block-end: 1em;\n }\n\n h1 {\n font-size: 1.6em;\n line-height: 54px;\n }\n\n h2 {\n font-size: 1.5em;\n line-height: 42px;\n counter-increment: section;\n }\n\n h2::before {\n content: counter(section) '. ';\n }\n\n h1,\n h2 {\n border-block-end: 1px dotted var(--border-color);\n padding-block-end: 10px;\n }\n\n h3 {\n font-size: 1.4em;\n line-height: 30px;\n }\n\n h4 {\n font-size: 1.3em;\n line-height: 28px;\n }\n\n h5 {\n font-size: 1.2em;\n list-style: none;\n }\n\n hr {\n margin: 16px 0;\n border: 0 none;\n padding: 0;\n block-size: 2px;\n text-align: start;\n color: var(--text-color);\n background-color: var(--border-color);\n }\n\n p img,\n p n-img {\n position: relative;\n display: flex;\n overflow: hidden;\n margin: auto;\n max-inline-size: 100%;\n inline-size: fit-content;\n cursor: pointer;\n }\n\n n-img::part(img) {\n min-inline-size: 24px;\n }\n\n ul {\n font-size: var(--font-size);\n }\n\n dl dt {\n margin-block-start: 16px;\n padding: 10px 0;\n font-size: 1em;\n font-weight: bold;\n font-style: italic;\n }\n\n dl dd {\n margin-block-end: 16px;\n margin-inline-start: 0;\n padding: 0 16px;\n }\n\n table {\n overflow: hidden;\n margin-block-end: 16px;\n border-block-end: 1px solid var(--table-heading-bg);\n inline-size: 100%;\n max-inline-size: 100%;\n border-spacing: 0;\n transition-property: border-color;\n word-break: break-all;\n }\n\n table:last-child {\n margin-block-end: 0;\n }\n\n table tbody tr:nth-child(2n) {\n background-color: var(--primary-details-bg);\n }\n\n table tbody tr:hover {\n background-color: var(--primary-selection);\n }\n\n table tr th {\n font-weight: 500;\n min-inline-size: 54px;\n color: var(--text-heading);\n background-color: var(--table-heading-bg);\n transition-property: background-color, color;\n }\n\n table tr th,\n table td {\n padding: 8px 16px;\n }\n\n tr:first-child th:first-child {\n border-start-start-radius: var(--border-radius);\n }\n\n tr:first-child th:last-child {\n border-start-end-radius: var(--border-radius);\n }\n\n blockquote {\n position: relative;\n margin: 30px 48px;\n border-radius: var(--border-radius);\n padding: 16px;\n font-weight: 500;\n background-color: var(--primary-selection);\n transition-property: background-color;\n }\n\n blockquote::before,\n blockquote::after {\n position: absolute;\n font-size: 56px;\n font-family: sans-serif;\n color: var(--primary-active);\n transition-property: color;\n content: '❞';\n line-height: 1;\n }\n\n blockquote::before {\n inset-block-start: -8px;\n inset-inline-start: 0;\n transform: translateX(-44px) rotate(180deg);\n }\n\n blockquote::after {\n inset-inline-end: 0;\n inset-block-end: -8px;\n transform: translateX(44px);\n }\n\n blockquote.n-tip {\n margin: 16px 0 16px 8px;\n border-inline-start: 4px solid var(--primary-color, #5794ff);\n }\n\n blockquote.n-tip::after {\n content: none;\n }\n\n blockquote.n-tip::before {\n inset-block-start: 18px;\n inset-inline-start: -12px;\n border-radius: 100%;\n inline-size: 20px;\n block-size: 20px;\n font-size: 14px;\n font-weight: bold;\n text-align: center;\n color: #fff;\n background-color: var(--primary-color, #5794ff);\n transform: none;\n content: '!';\n line-height: 20px;\n }\n\n blockquote cite {\n font-size: var(--font-size);\n color: var(--cite-color, #bfbfbf);\n line-height: 20px;\n }\n\n blockquote cite::before {\n content: '\\\\2014 \\\\00A0';\n }\n\n blockquote p {\n margin: auto 0;\n font-size: var(--font-size);\n line-height: 24px;\n transition-property: color;\n }\n\n details {\n overflow: hidden;\n border-inline-start: 5px solid var(--primary-hover, #5794ff);\n border-radius: var(--border-radius);\n padding: 12px 24px;\n background: var(--primary-details-bg);\n box-sizing: border-box;\n user-select: none;\n box-shadow: 0 2px 8px 0 var(--primary-shadow, rgb(0 0 0 / 5%));\n }\n\n details,\n details summary {\n transition-duration: var(--transition-duration);\n transition-timing-function: var(--transition-timing-function);\n transition-property: background-color, transform, border-color;\n }\n\n details:not(:last-of-type) {\n margin-block-end: 16px;\n }\n\n details > summary,\n details > summary ~ * {\n font-size: var(--font-size);\n font-weight: normal;\n font-style: normal;\n line-height: 1.4;\n transition-property: background-color, transform, border-color, margin;\n }\n\n details > summary:not(:last-of-type) details > summary ~ *:not(:last-of-type) {\n margin-block-end: 16px;\n }\n\n details > summary {\n font-weight: 500;\n outline: none;\n cursor: pointer;\n transform: translateX(-18px);\n }\n\n details > summary::-webkit-details-marker,\n details > summary::marker {\n display: none;\n color: transparent;\n }\n\n details > summary::before {\n display: inline-block;\n margin-inline-end: 4px;\n inline-size: 14px;\n font-weight: lighter;\n text-align: center;\n opacity: 0.5;\n content: '⛌';\n transform: rotate(45deg);\n }\n\n details[open] {\n user-select: auto;\n }\n\n details[open] > details {\n margin-block-start: 10px;\n }\n\n details[open] > summary {\n margin-block-end: 10px;\n }\n\n details[open] > summary::before {\n transform: rotate(0);\n }\n\n .katex-display {\n overflow-x: auto;\n }\n\n .n-photo-header {\n display: flex;\n flex-wrap: wrap;\n padding: 16px;\n gap: 16px;\n }\n\n .n-photo-header > span {\n border-radius: 8px;\n padding: 4px 10px;\n font-size: 14px;\n font-weight: lighter;\n background-color: rgb(0 0 0 / 20%);\n }\n\n .n-code {\n display: block;\n margin-block-end: 16px;\n }\n\n .n-code:last-child {\n margin-block-end: 0;\n }\n\n @media screen and (width <= 1100px) {\n .n-md-box,\n .n-md-box:not(.site-doc-main),\n .n-md-body {\n max-inline-size: auto;\n }\n\n .n-md-toc {\n position: fixed;\n inset-inline-end: 16px;\n transform: translateX(100%);\n transition: transform var(--transition-duration) var(--transition-timing-function);\n\n &:hover {\n transform: translateX(0);\n }\n }\n }\n`;\n\nexport default mdStyle;\n"],"names":["mdStyle","css"],"mappings":"kGA4jBA,+CAAA,qBA5jBoB,eAEdA,EAAUC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwjBpB,CAAC,CAED,EAAeD"}
package/lib/modal/style.js CHANGED
@@ -47,7 +47,7 @@
47
47
 
48
48
  .modal-body {
49
49
  overflow: auto;
50
- max-block-size: calc(100vb - 150px);
50
+ max-block-size: calc(100vh - 150px);
51
51
 
52
52
  &::-webkit-scrollbar {
53
53
  inline-size: 5px;
package/lib/modal/style.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/modal/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n .portal {\n --opacity: 0;\n --scale: 0;\n --timing: ease-in;\n\n position: fixed;\n box-sizing: border-box;\n inset-block-start: 0;\n inset-inline-start: 0;\n inline-size: 100%;\n block-size: 100%;\n z-index: 99999;\n display: flex;\n\n &::before {\n position: absolute;\n z-index: -1;\n background-color: var(--mask-bg);\n opacity: var(--opacity);\n transition: opacity 0.2s var(--timing);\n inset-inline-start: 0;\n inset-block-start: 0;\n content: '';\n inline-size: 100%;\n block-size: 100%;\n pointer-events: none;\n }\n }\n\n .mask-blur::before {\n backdrop-filter: blur(10px);\n }\n\n .modal-header,\n .modal-body,\n .modal-footer {\n cursor: auto;\n }\n\n .modal-footer {\n display: flex;\n gap: 8px;\n margin-block-start: 24px;\n justify-content: flex-end;\n }\n\n .modal-body {\n overflow: auto;\n max-block-size: calc(100vb - 150px);\n\n &::-webkit-scrollbar {\n inline-size: 5px;\n block-size: 5px;\n }\n }\n\n .modal-content {\n margin: auto;\n border-radius: var(--border-radius);\n padding: 20px 24px;\n background-color: var(--modal-component-bg);\n opacity: var(--opacity);\n box-shadow: var(--modal-box-shadow);\n cursor: grab;\n min-inline-size: 200px;\n max-inline-size: calc(100% - 32px);\n transform: translate3d(var(--x), var(--y), 1px) scale3d(var(--scale), var(--scale), 1);\n transition-property: transform, opacity;\n transition-duration: 0.2s;\n transition-timing-function: var(--timing);\n backdrop-filter: blur(10px);\n\n &:active {\n cursor: grabbing;\n }\n\n &.moveing {\n transition-property: none;\n transition-duration: none;\n transition-timing-function: none;\n user-select: none;\n\n * {\n pointer-events: none;\n }\n }\n\n &.centered {\n text-align: center;\n\n .modal-body,\n .modal-footer {\n justify-content: center;\n text-align: center;\n }\n }\n }\n\n .open {\n --opacity: 0;\n --timing: ease-in;\n\n animation: zoom-in 0.2s var(--timing) forwards;\n }\n\n .closeing {\n --opacity: 1;\n --timing: ease-out;\n\n animation: zoom-out 0.2s var(--timing) forwards;\n }\n\n .modal-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n }\n\n .modal-title {\n flex: 1;\n }\n\n .modal-close {\n position: absolute;\n inset-inline-end: 10px;\n inset-block-start: 10px;\n\n &::part(label) {\n color: var(--text-color);\n }\n }\n\n @keyframes zoom-in {\n 0% {\n --opacity: 0;\n --scale: 0;\n\n pointer-events: none;\n }\n\n 100% {\n --opacity: 1;\n --scale: 1;\n --x: var(--movement-x);\n --y: var(--movement-y);\n }\n }\n\n @keyframes zoom-out {\n 0% {\n --opacity: 1;\n --scale: 1;\n --x: var(--movement-x);\n --y: var(--movement-y);\n }\n\n 100% {\n --opacity: 0;\n --scale: 0;\n\n pointer-events: none;\n }\n }\n`;\n"],"names":["style","css"],"mappings":"kGAEaA,6CAAAA,qBAFO,eAEPA,EAAQC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoKzB,CAAC"}
1
+ {"version":3,"sources":["components/modal/style.ts"],"sourcesContent":["import { css } from '@moneko/css';\n\nexport const style = css`\n .portal {\n --opacity: 0;\n --scale: 0;\n --timing: ease-in;\n\n position: fixed;\n box-sizing: border-box;\n inset-block-start: 0;\n inset-inline-start: 0;\n inline-size: 100%;\n block-size: 100%;\n z-index: 99999;\n display: flex;\n\n &::before {\n position: absolute;\n z-index: -1;\n background-color: var(--mask-bg);\n opacity: var(--opacity);\n transition: opacity 0.2s var(--timing);\n inset-inline-start: 0;\n inset-block-start: 0;\n content: '';\n inline-size: 100%;\n block-size: 100%;\n pointer-events: none;\n }\n }\n\n .mask-blur::before {\n backdrop-filter: blur(10px);\n }\n\n .modal-header,\n .modal-body,\n .modal-footer {\n cursor: auto;\n }\n\n .modal-footer {\n display: flex;\n gap: 8px;\n margin-block-start: 24px;\n justify-content: flex-end;\n }\n\n .modal-body {\n overflow: auto;\n max-block-size: calc(100vh - 150px);\n\n &::-webkit-scrollbar {\n inline-size: 5px;\n block-size: 5px;\n }\n }\n\n .modal-content {\n margin: auto;\n border-radius: var(--border-radius);\n padding: 20px 24px;\n background-color: var(--modal-component-bg);\n opacity: var(--opacity);\n box-shadow: var(--modal-box-shadow);\n cursor: grab;\n min-inline-size: 200px;\n max-inline-size: calc(100% - 32px);\n transform: translate3d(var(--x), var(--y), 1px) scale3d(var(--scale), var(--scale), 1);\n transition-property: transform, opacity;\n transition-duration: 0.2s;\n transition-timing-function: var(--timing);\n backdrop-filter: blur(10px);\n\n &:active {\n cursor: grabbing;\n }\n\n &.moveing {\n transition-property: none;\n transition-duration: none;\n transition-timing-function: none;\n user-select: none;\n\n * {\n pointer-events: none;\n }\n }\n\n &.centered {\n text-align: center;\n\n .modal-body,\n .modal-footer {\n justify-content: center;\n text-align: center;\n }\n }\n }\n\n .open {\n --opacity: 0;\n --timing: ease-in;\n\n animation: zoom-in 0.2s var(--timing) forwards;\n }\n\n .closeing {\n --opacity: 1;\n --timing: ease-out;\n\n animation: zoom-out 0.2s var(--timing) forwards;\n }\n\n .modal-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n }\n\n .modal-title {\n flex: 1;\n }\n\n .modal-close {\n position: absolute;\n inset-inline-end: 10px;\n inset-block-start: 10px;\n\n &::part(label) {\n color: var(--text-color);\n }\n }\n\n @keyframes zoom-in {\n 0% {\n --opacity: 0;\n --scale: 0;\n\n pointer-events: none;\n }\n\n 100% {\n --opacity: 1;\n --scale: 1;\n --x: var(--movement-x);\n --y: var(--movement-y);\n }\n }\n\n @keyframes zoom-out {\n 0% {\n --opacity: 1;\n --scale: 1;\n --x: var(--movement-x);\n --y: var(--movement-y);\n }\n\n 100% {\n --opacity: 0;\n --scale: 0;\n\n pointer-events: none;\n }\n }\n`;\n"],"names":["style","css"],"mappings":"kGAEaA,6CAAAA,qBAFO,eAEPA,EAAQC,GAAAA,KAAG,CAAA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoKzB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "neko-ui",
3
- "version": "2.13.2",
3
+ "version": "2.13.3",
4
4
  "description": "WebComponents UI Libraries",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",
@@ -62,7 +62,7 @@
62
62
  "ui libraries"
63
63
  ],
64
64
  "devDependencies": {
65
- "@moneko/core": "3.48.1",
65
+ "@moneko/core": "3.48.3",
66
66
  "@moneko/solid": "1.11.1",
67
67
  "@solidjs/testing-library": "0.8.10",
68
68
  "@swc/jest": "0.2.39",
package/umd/index.js CHANGED
@@ -188,8 +188,8 @@
188
188
  }
189
189
 
190
190
  100% {
191
- inline-size: 100vi;
192
- block-size: 100vb;
191
+ inline-size: 100vw;
192
+ block-size: 100vh;
193
193
  inset-block-start: 0;
194
194
  inset-inline-start: 0;
195
195
  }
@@ -197,8 +197,8 @@
197
197
 
198
198
  @keyframes photo-out {
199
199
  from {
200
- inline-size: 100vi;
201
- block-size: 100vb;
200
+ inline-size: 100vw;
201
+ block-size: 100vh;
202
202
  inset-block-start: 0;
203
203
  inset-inline-start: 0;
204
204
  }
@@ -473,8 +473,8 @@
473
473
  align-items: center;
474
474
  overflow-y: auto;
475
475
  padding: 8px;
476
- max-inline-size: 60vi;
477
- max-block-size: 80vb;
476
+ max-inline-size: 60vw;
477
+ max-block-size: 80vh;
478
478
  gap: 8px;
479
479
  flex-wrap: wrap;
480
480
 
@@ -2859,39 +2859,27 @@
2859
2859
  margin: auto;
2860
2860
  white-space: nowrap;
2861
2861
  inline-size: 100%;
2862
+ gap: 48px;
2862
2863
 
2863
2864
  &.n-marquee-mask {
2864
- &::before,
2865
- &::after {
2866
- content: '';
2867
- position: absolute;
2868
- z-index: 1000;
2869
- inset-block-start: 0;
2870
- inset-inline-start: 0;
2871
- inline-size: 15rem;
2872
- max-inline-size: 25%;
2873
- block-size: 100%;
2874
- background-image: linear-gradient(to right, var(--component-bg), transparent);
2875
- pointer-events: none;
2876
- }
2877
-
2878
- &::after {
2879
- inset-inline: auto 0;
2880
- background-image: linear-gradient(to left, var(--component-bg), transparent);
2881
- }
2865
+ mask-image: linear-gradient(
2866
+ to right,
2867
+ transparent 0,
2868
+ var(--component-bg) 25%,
2869
+ var(--component-bg) 75%,
2870
+ transparent 100%
2871
+ );
2872
+ mask-composite: intersect;
2882
2873
  }
2883
2874
  }
2884
2875
 
2885
2876
  .n-marquee-item {
2886
2877
  display: flex;
2887
2878
  align-items: center;
2888
- line-height: 1;
2889
- gap: 4px;
2890
2879
  animation-duration: var(--speed);
2891
2880
  animation-iteration-count: infinite;
2892
2881
  animation-name: marquee-content;
2893
2882
  animation-timing-function: linear;
2894
- padding: 0 24px;
2895
2883
  }
2896
2884
 
2897
2885
  .n-marquee-hover-pause {
@@ -2902,11 +2890,11 @@
2902
2890
 
2903
2891
  @keyframes marquee-content {
2904
2892
  from {
2905
- transform: translateX(0%);
2893
+ transform: translate3d(0%, 0, 0);
2906
2894
  }
2907
2895
 
2908
2896
  to {
2909
- transform: translateX(-100%);
2897
+ transform: translate3d(-100%, 0, 0);
2910
2898
  }
2911
2899
  }
2912
2900
  `,os=eP("<style> "),oc=eP("<style>"),ou=eP("<div>"),od=eP('<div class="n-marquee-item">'),op=e=>{let t;let{baseStyle:n}=ty,r=ev({speed:15,hoverPause:!0,mask:!0},e),[i,a]=F(2);return H(()=>{if(t){let e=t.querySelector(".n-marquee-item");a(Math.ceil(t.offsetWidth/e.offsetWidth)+1)}}),[(()=>{let e=os(),t=e.firstChild;return j(()=>t.data=n()),e})(),(()=>{let e=oc();return e.textContent=ol,e})(),ep(eC,{get when(){return r.css},get children(){let e=os(),t=e.firstChild;return j(()=>t.data=(0,e6.css)(r.css)),e}}),(()=>{let e=ou(),n=t;return"function"==typeof n?eV(n,e):t=e,eY(e,ep(ew,{get each(){return Array.from({length:i()})},children:()=>(()=>{let e=od();return eY(e,(()=>{let e=B(()=>!!Array.isArray(r.children));return()=>e()?ep(ew,{get each(){return r.children},children:e=>tX(e.cloneNode)?e.cloneNode(!0):e}):r.children})()),e})()})),j(t=>{let n=(0,e6.cx)("n-marquee",r.mask&&"n-marquee-mask",r.hoverPause&&"n-marquee-hover-pause"),i=`${r.speed}s`;return n!==t._v$&&eD(e,t._v$=n),i!==t._v$2&&(null!=(t._v$2=i)?e.style.setProperty("--speed",i):e.style.removeProperty("--speed")),t},{_v$:void 0,_v$2:void 0}),e})()]};op.registry=()=>{ti("n-marquee",{class:void 0,css:void 0,speed:15,hoverPause:!0,mask:!0},(e,t)=>{let n=t.element,r=ev({children:[...n.childNodes.values()]},e);return H(()=>{ta(n,["css"])}),[(()=>{let e=oc();return e.textContent=tm,e})(),ep(op,r)]})};let og=op,of=(0,e6.css)`
@@ -3013,7 +3001,7 @@
3013
3001
  padding: 16px;
3014
3002
  max-inline-size: 200px;
3015
3003
  block-size: fit-content;
3016
- max-block-size: calc(100vb - 132px);
3004
+ max-block-size: calc(100vh - 132px);
3017
3005
  box-sizing: border-box;
3018
3006
  transition-duration: var(--transition-duration);
3019
3007
  transition-timing-function: var(--transition-timing-function);
@@ -3526,7 +3514,7 @@
3526
3514
 
3527
3515
  .modal-body {
3528
3516
  overflow: auto;
3529
- max-block-size: calc(100vb - 150px);
3517
+ max-block-size: calc(100vh - 150px);
3530
3518
 
3531
3519
  &::-webkit-scrollbar {
3532
3520
  inline-size: 5px;
package/umd/manifest.json CHANGED
@@ -1 +1 @@
1
- {"filename":"manifest.json","name":"neko-ui","description":"WebComponents UI Libraries","start_url":"/?source=pwa","display":"standalone","background_color":"#fff","icons":[{"src":"/favicon.ico","sizes":"48x48","type":"image/x-icon"}],"version":"2.13.2-a6cfb668245d43e7","hash":"a6cfb668245d43e7","content_assets":["index.js"]}
1
+ {"filename":"manifest.json","name":"neko-ui","description":"WebComponents UI Libraries","start_url":"/?source=pwa","display":"standalone","background_color":"#fff","icons":[{"src":"/favicon.ico","sizes":"48x48","type":"image/x-icon"}],"version":"2.13.3-04eeb4ca52f8def1","hash":"04eeb4ca52f8def1","content_assets":["index.js"]}