npm - @operato/menu - Versions diffs - 10.10.0 → 10.10.2 - Mend

@operato/menu 10.10.0 → 10.10.2

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 (20) hide show

package/CHANGELOG.md +18 -0
package/coverage/lcov-report/base.css +224 -0
package/coverage/lcov-report/block-navigation.js +87 -0
package/coverage/lcov-report/favicon.png +0 -0
package/coverage/lcov-report/index.html +341 -0
package/coverage/lcov-report/prettify.css +1 -0
package/coverage/lcov-report/prettify.js +2 -0
package/coverage/lcov-report/sort-arrow-sprite.png +0 -0
package/coverage/lcov-report/sorter.js +210 -0
package/coverage/lcov.info +13042 -0
package/dist/src/menu-portrait-styles.js +22 -1
package/dist/src/menu-portrait-styles.js.map +1 -1
package/dist/src/ox-menu-portrait.d.ts +19 -0
package/dist/src/ox-menu-portrait.js +48 -1
package/dist/src/ox-menu-portrait.js.map +1 -1
package/dist/test/ox-menu-portrait.test.js +13 -1
package/dist/test/ox-menu-portrait.test.js.map +1 -1
package/dist/tsconfig.tsbuildinfo +1 -1
package/package.json +4 -4
package/test/ox-menu-portrait.test.ts +15 -1

package/dist/src/menu-portrait-styles.js CHANGED Viewed

@@ -88,8 +88,12 @@ export const MenuPortraitStyles = css `
    * 최상위에만 건다 — 하위 항목도 지금 페이지이면 active 를 단다. 그래서 [top] 으로 가른다.
    *
    * 접혔을 때는 감추지 않는다 — 낱개가 안 보이므로 합계가 유일한 신호다.
+   *
+   * [branch] 도 함께 본다 — 하위가 있는 항목만이다. 이게 없을 때 잎 항목(「할 일」·「내 결재함」)이
+   * 자기가 지금 페이지가 되는 순간 건수가 사라졌다. 감출 근거가 「그 수를 아래에서 다시 보여
+   * 주니까」인데, 잎에는 아래가 없어서 그냥 없어지는 것이었다. [확인함] 2026-09-07 화면
    */
-  :host(:not([collapsed])) li[top][active] > a [badge] {
+  :host(:not([collapsed])) li[top][active][branch] > a [badge] {
     display: none;
   }
@@ -407,6 +411,23 @@ export const MenuPortraitStyles = css `
     display: none;
   }
+  /*
+   * Zero keeps its place and loses the signal.
+   *
+   * The filled accent pill means "there is something here for you". 작성 중 0 wore exactly the same
+   * one as 할 일 9 — rgb(12,122,76), 28x17 — so a column of them read as four things waiting.
+   *
+   * Hiding zero is not the answer: an empty slot cannot be told apart from a count that has not
+   * arrived yet (see the rule above). So the number stays and the colour goes quiet. Contrast is
+   * still readable at 10.5px because both tokens come from the same surface pair the menu already
+   * uses for inactive rows.
+   */
+  :host a [badge][zero] {
+    background-color: var(--menu-rail-badge-zero, var(--ui-line-soft, #e6eaed));
+    color: var(--menu-rail-badge-zero-ink, var(--ui-faint, #8a959c));
+    font-weight: 500;
+  }
   /* ── 시스템 자리 ───────────────────────────────────────────────────── */
   /*
    * 빈 자리로 벌린다 — 시스템 항목이 바닥에 붙는다.

package/dist/src/menu-portrait-styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-portrait-styles.js","sourceRoot":"","sources":["../../src/menu-portrait-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAijBpC,CAAA","sourcesContent":["import { css } from 'lit'\n\n/*\n 왼쪽 메뉴의 모양 — 한 벌이다.\n \n ## 왜 한 벌인가\n \n 한때 둘이었다. 기존 모양(줄마다 밑줄 · 왼쪽 여백 16px · hover 에 굵기 변화)과 레일 모양\n * (라운드 알약 · 밑줄 없음 · 접을 수 있음). 같은 메뉴가 설정 하나로 딴 물건처럼 보였고, 무엇을\n * 어느 쪽에 두어야 하는지를 매번 판단해야 해서 일곱 번 조용히 깨졌다.\n \n 기존 모양은 접을 수도 없었다 — 줄마다 폭 전체를 쓰는 밑줄이 있고 왼쪽 여백이 16px 이라\n * 56px 에서 무너진다. 그래서 레일 펼친 모양을 기준으로 통일했다.\n \n ## 안에 세 변형이 있다\n \n ```\n * (기본) 늘 보이는 모양. 서랍도 이것이다\n * [collapsed] 접힌 레일 — 아이콘만. 하위는 팝업으로\n * .railpop 팝업 — 접힌 레일에서 하위로 가는 길, 그리고 시스템 항목의 자리\n * ```\n \n 무엇이 어느 변형에 걸리나는 `menu-mode.ts` 가 답한다. 여기서 그때그때 판단하지 않는다.\n \n ## 값의 출처\n \n `operato-twin` 의 레일(`twin-nav-rail`)이 쓰던 값이다. 값을 베끼지 않고 조정 지점으로 노출해\n * 앱이 자기 테마에 맞출 수 있게 둔다.\n /\nexport const MenuPortraitStyles = css`\n :host {\n /\n * ── 조정 지점 ─────────────────────────────────────────────────────────\n * 폭은 여기 없다 — ox-menu-part 가 정한다. 셸이 크기를 재는 요소도 그것이고, 리사이즈\n * 손잡이가 인라인 폭을 쓰는 요소도 그것이다. 여기서 또 정하면 둘이 싸운다.\n * 폭 토큰(--menu-rail-width · --menu-rail-width-collapsed)은 앱이 위에서 준다.\n /\n --menu-rail-radius: 8px;\n --menu-rail-gap: 11px;\n --menu-rail-font-size: 13px;\n --menu-rail-font-weight: 560;\n --menu-rail-icon-size: 19px;\n /\n * ── 줄의 세로 여백 ────────────────────────────────────────────────────\n * 줄 높이는 아이콘(20px)에 이 값의 두 배를 더한 것이다. 8px 이면 36px 줄이다.\n \n 항목이 스물 남짓인 레일은 그 높이로 화면을 넘긴다. 그때는 줄여 앉힌다 — 다 보이는 것이\n * 넉넉한 것보다 낫다. 다만 줄이는 것은 앱이 고르는 값이고, 화면 높이에 따라 저절로\n * 눌리게 두지 않는다.\n \n 저절로 눌리게 두면 창 높이마다 줄 높이가 달라진다. 실제로 그런 레일이 있었다 —\n * 창 1100 에서 33px · 800 에서 28px · 620 에서 16px 이 되어 아이콘이 뭉개졌다.\n \n 기본은 6.5px — 33px 줄이다. 두 제품이 같은 값을 골랐고, 앱마다 적어 두면 한쪽만 고쳐진다.\n /\n --menu-rail-row-pad: 6.5px;\n --menu-rail-surface: var(--md-sys-color-surface, #fff);\n --menu-rail-ink: var(--md-sys-color-on-surface, #17242c);\n --menu-rail-muted: var(--md-sys-color-on-surface-variant, #57676f);\n --menu-rail-faint: var(--md-sys-color-outline, #8a959c);\n --menu-rail-hover: var(--md-sys-color-surface-container-low, rgba(0, 0, 0, 0.04));\n --menu-rail-accent: var(--md-sys-color-primary, #0e8a56);\n --menu-rail-accent-wash: var(--md-sys-color-primary-container, rgba(14, 138, 86, 0.1));\n\n /\n * ── 세로 단이다 ───────────────────────────────────────────────────────\n * 이 셋이 없으면 gap 이 안 먹고, 바닥에 붙이는 빈 자리가 자라지 않아 시스템 줄이 목록\n * 바로 뒤에 붙는다. 두 스타일 파일을 합칠 때 이것을 잃어 그 증상이 났다.\n /\n display: flex;\n flex-direction: column;\n height: 100%;\n\n box-sizing: border-box;\n width: 100%;\n background-color: var(--menu-rail-surface);\n padding: 10px 8px;\n gap: 2px;\n overflow-x: hidden;\n overflow-y: auto;\n }\n\n /\n * 하위가 펼쳐져 있으면 최상위의 합계를 감춘다.\n \n 그 아래에 낱개 건수가 다 보이므로 같은 말을 두 번 하는 것이고, 합계와 낱개가 나란히 있으면\n * 「합계가 저 셋과 다른 무엇인가」를 한 번 생각하게 만든다.\n \n 최상위에만 건다 — 하위 항목도 지금 페이지이면 active 를 단다. 그래서 [top] 으로 가른다.\n \n 접혔을 때는 감추지 않는다 — 낱개가 안 보이므로 합계가 유일한 신호다.\n /\n :host(:not([collapsed])) li[top][active] > a [badge] {\n display: none;\n }\n\n :host ul {\n display: flex;\n flex-direction: column;\n gap: 2px;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n / 묶음 이름 — 접히면 자리가 없다. /\n :host [group-label] {\n padding: 10px 10px 4px;\n border: none;\n font-family: var(--theme-font-mono, monospace);\n font-size: 9.5px;\n font-weight: 400;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: var(--menu-rail-faint);\n }\n\n / 접히면 자리가 없다 — 레일 안쪽만. 팝업 안의 묶음 이름은 그대로 보인다. /\n :host([collapsed]) > [group-label],\n :host([collapsed]) > ul [group-label] {\n display: none;\n }\n\n :host a {\n display: flex;\n align-items: center;\n gap: var(--menu-rail-gap);\n padding: var(--menu-rail-row-pad) 11px;\n /\n * 줄어들지 않는다. 목록이 화면보다 길면 겉 상자가 구르면 되고, 줄이 눌릴 일이 아니다.\n * 이것이 없으면 창 높이에 따라 줄 높이가 달라진다(위 --menu-rail-row-pad 머리말).\n /\n flex: none;\n border: none;\n border-radius: var(--menu-rail-radius);\n font: var(--menu-rail-font-weight) var(--menu-rail-font-size) var(--theme-font, inherit);\n color: var(--menu-rail-muted);\n text-decoration: none;\n text-transform: none;\n white-space: nowrap;\n overflow: hidden;\n }\n\n /\n * hover 에서 굵기를 바꾸지 않는다. 기존 모양은 a:hover { font-weight: bold } 여서 마우스가\n * 지날 때마다 글자 폭이 늘어 줄이 흔들렸다. 색만 바꾼다.\n /\n :host a:hover {\n background-color: var(--menu-rail-hover);\n color: var(--menu-rail-ink);\n font-weight: var(--menu-rail-font-weight);\n }\n\n :host a md-icon {\n --md-icon-size: var(--menu-rail-icon-size);\n\n flex: none;\n width: 20px;\n min-width: 20px;\n height: 20px;\n margin: 0;\n opacity: 1;\n overflow: hidden;\n color: var(--menu-rail-faint);\n }\n\n /\n * ── 지금 페이지 ─────────────────────────────────────────────────────────\n * 어느 층이든 지금 보고 있는 그 줄에만 강조를 준다. 층으로 가르지 않는다 — 최상위가 그\n * 자리일 수도 있고(하위가 없는 묶음) 하위가 그 자리일 수도 있다.\n /\n :host li[current] > a {\n border-left: none;\n background-color: var(--menu-rail-accent-wash);\n color: var(--menu-rail-ink);\n font-weight: 700;\n }\n\n :host li[current] > a md-icon {\n color: var(--menu-rail-accent);\n }\n\n /\n * ── 펼쳐진 최상위 ───────────────────────────────────────────────────────\n * 강조하지 않는다. 최상위의 active 는 「하위가 펼쳐져 있다」는 여닫힘이고, 지금 페이지는\n * 그 안의 한 줄이다. 둘에 같은 강조를 주면 두 줄이 나란히 강조되어 어느 쪽이 지금 자리인지\n * 흐려진다.\n \n 그래도 옅게는 둔다 — 접힌 화살표와 함께 「여기가 열려 있다」를 말한다.\n /\n :host(:not([collapsed])) li[top][active]:not([current]) > a {\n background-color: transparent;\n color: var(--menu-rail-ink);\n }\n\n :host(:not([collapsed])) li[top][active]:not([current]) > a md-icon {\n color: var(--menu-rail-ink);\n }\n\n /\n * ── 접히면 최상위가 대신 말한다 ─────────────────────────────────────────\n * 하위가 감춰지므로 지금 자리를 말할 줄이 최상위뿐이다. 그때는 최상위가 강조를 받는다.\n /\n :host([collapsed]) li[top][active] > a {\n background-color: var(--menu-rail-accent-wash);\n color: var(--menu-rail-ink);\n }\n\n :host([collapsed]) li[top][active] > a md-icon {\n color: var(--menu-rail-accent);\n }\n\n /\n * ── 팝업을 연 항목 ─────────────────────────────────────────────────────\n * active(지금 페이지)와 다른 뜻이라 다른 표시를 준다. 접힌 레일에서 강조된 아이콘은\n * 「지금 페이지」만 뜻하므로, 이 표시가 없으면 어느 항목의 팝업인지 알 수 없다.\n \n 강조색을 쓰지 않는다 — 그 색은 지금 페이지의 것이다. 대신 글자·아이콘을 짙게 하고 팝업과\n * 같은 면색으로 칠해 팝업의 연장으로 읽히게 한다.\n /\n :host li[popped] > a {\n background-color: var(--menu-rail-hover);\n color: var(--menu-rail-ink);\n }\n\n :host li[popped] > a md-icon {\n color: var(--menu-rail-ink);\n }\n\n / 지금 페이지이면서 팝업까지 연 경우 — 강조색이 이긴다(그것이 더 드문 사실이다). /\n :host li[current][popped] > a,\n :host([collapsed]) li[top][active][popped] > a {\n background-color: var(--menu-rail-accent-wash);\n }\n\n :host li[current][popped] > a md-icon,\n :host([collapsed]) li[top][active][popped] > a md-icon {\n color: var(--menu-rail-accent);\n }\n\n /\n * ── 하위가 있다는 표시 ──────────────────────────────────────────────────\n * 이 화살표가 곧 「나는 묶음이다」이다. 없으면 최상위 줄만 보고 하위를 가졌는지, 자기가\n * 끝인지 알 수 없다 — 눌러 봐야 안다.\n \n 글자는 md-icon 의 내용이 아니라 여기서 준다. 두 스타일 파일을 합칠 때 이 ::before 를\n * 잃었고, 그래서 <md-icon submenu-button> 이 빈 채로 남아 화살표가 사라졌다.\n * 아이콘 이름을 컴포넌트로 옮기지 않는 이유는, 접힘·팝업마다 다르게 두는 것이 이 파일의\n * 일이기 때문이다.\n /\n :host a [submenu-button] {\n margin-left: auto;\n --md-icon-size: 16px;\n width: 16px;\n min-width: 16px;\n color: var(--menu-rail-faint);\n transition: transform 0.2s ease;\n }\n\n :host a [submenu-button]::before {\n content: 'chevron_right';\n }\n\n / 펼쳐지면 아래를 가리킨다 — 화살표 하나로 여닫힘까지 말한다. /\n :host li[active] > a [submenu-button] {\n transform: rotate(90deg);\n color: var(--menu-rail-ink);\n }\n\n / 접히면 하위가 팝업으로 뜬다. 56px 안에 화살표를 둘 자리도 없다. /\n :host([collapsed]) > ul li a [submenu-button] {\n display: none;\n }\n\n :host a > span {\n flex: 1;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n /\n * ── 접으면 이름을 감춘다 — 레일 안쪽만 ─────────────────────────────\n * 팝업은 같은 shadow root 안의 형제다(.railpop). 그래서 li 로만 좁히면 팝업 줄도\n * 함께 걸려 아이콘만 남는다 — 접힌 레일에서 팝업은 이름을 읽으러 여는 자리인데.\n \n > ul 로 좁힌다. 레일의 목록과 시스템 목록은 host 의 직계 자식이고, 팝업의 목록은\n * .railpop 안에 있다. 이 한 칸이 두 자리를 가른다.\n /\n :host([collapsed]) > ul li a > span {\n display: none;\n }\n\n :host([collapsed]) > ul li a {\n justify-content: center;\n gap: 0;\n padding: var(--menu-rail-row-pad) 0;\n }\n\n / ── 하위 메뉴 — 펼친 상태에서는 그 자리에서 열린다 ────────────────── /\n :host li > ul {\n overflow: hidden;\n max-height: 0;\n background: none;\n padding-left: 20px;\n transition: max-height 0.24s ease;\n }\n\n :host li[active] > ul {\n max-height: 640px;\n }\n\n :host li[active] > ul[settled] {\n overflow-y: auto;\n }\n\n :host li li a {\n padding: calc(var(--menu-rail-row-pad) - 2px) 11px;\n font-size: 12.5px;\n color: var(--menu-rail-muted);\n }\n\n\n /\n * 접히면 하위를 그 자리에서 열지 않는다. 56px 안에서는 들여쓴 목록이 읽히지 않는다.\n * 대신 팝업으로 뜬다 — .railpop 이 그 자리다.\n /\n :host([collapsed]) > ul li > ul {\n display: none;\n }\n\n / ── 건수 ──────────────────────────────────────────────────────────── /\n /\n * 메뉴에서 유일하게 색을 갖는 자리다.\n \n 나머지는 무채색이다 — 틀은 자리를 말하고, 색은 「무엇이 나를 기다리나」에만 쓴다. 건수가 바로\n * 그것이라 여기에 제품의 강조색을 준다.\n \n 색을 --menu-rail-accent 에서 가져오지 않는다. 그 이름은 지금 페이지 표시에도 쓰이고, 그것까지\n * 강조색이 되면 메뉴 전체가 물든다. 배지만 따로 든다.\n \n 순서는 앱 토큰이 먼저다(--ui-accent). md 의 primary 는 앱마다 뜻이 다르다 — operato-twin 에서는\n * 브랜드 청록이지만 operato-plant 에서는 진회색이라, primary 를 쓰면 한쪽에서만 색이 나온다.\n * 실제로 그랬다.\n \n 글자색은 짝으로 온다. 강조색 위에 흰 글자를 늘 올리면 어두운 테마의 밝은 초록에서 대비가\n * 2.24 로 떨어진다 — 그 테마는 짙은 글자를 짝으로 둔다.\n /\n :host a [badge] {\n margin-left: auto;\n min-width: 18px;\n padding: 0 5px;\n border-radius: 9px;\n background-color: var(--menu-rail-badge, var(--ui-accent, var(--md-sys-color-primary, #0c7a4c)));\n color: var(--menu-rail-badge-ink, var(--ui-on-accent, var(--md-sys-color-on-primary, #ffffff)));\n font-family: var(--theme-font-mono, monospace);\n font-size: 10.5px;\n font-weight: 700;\n line-height: 17px;\n text-align: center;\n }\n\n /\n * 접히면 라벨이 없어 옆에 둘 자리가 없다. 아이콘 위에 겹친다.\n \n 이것도 레일 안쪽만이다. 팝업에는 이름이 있으니 건수가 그 오른쪽에 알약으로 선다 —\n * 위의 기본 규칙이 그대로 맞다.\n /\n :host([collapsed]) > ul li[menu] {\n position: relative;\n }\n\n :host([collapsed]) > ul li a [badge] {\n position: absolute;\n top: 0;\n right: 2px;\n margin-left: 0;\n /\n * 글자를 9.5px 에서 10px 로 올린다. 링이 아이콘을 밀어내 준 만큼 숫자에 자리를 줄 수 있다 —\n * 접힌 레일에서 이 숫자가 유일한 신호이므로 읽히는 것이 먼저다.\n /\n min-width: 15px;\n padding: 0 3px;\n font-size: 10px;\n line-height: 15px;\n /\n * 배경색 링으로 아이콘을 밀어낸다.\n \n 56px 안에서는 배지가 아이콘 위에 겹칠 수밖에 없다. 겹친 자리에서 아이콘의 선이 배지의\n * 글자를 지나가면 숫자가 안 읽힌다. 링이 그 사이를 끊는다 — 아이콘을 지운 것처럼 보인다.\n \n 링 색은 레일의 면색이다. 고른 항목은 배경이 accent-wash 여서 정확히 같지는 않지만, 그\n * 색이 아주 옅어 눈에 걸리지 않는다.\n /\n box-shadow: 0 0 0 2px var(--menu-rail-surface);\n }\n\n /\n * 값이 아직 안 온 동안만 자리를 비운다.\n \n 알약을 그릴지는 배지 정의가 있나로 정해지고, 그 안의 값은 조금 뒤에 채워진다. 그 사이 빈\n * 알약이 아이콘 위에 뜻 없는 점으로 남는다.\n \n 0 은 값이다. 0 이면 0 을 보인다 — 「기다리는 것이 없다」도 사람이 알아야 하는 사실이고,\n * 그 자리가 비어 있으면 「아직 안 왔나」와 구별되지 않는다.\n /\n :host a [badge]:empty {\n display: none;\n }\n\n / ── 시스템 자리 ───────────────────────────────────────────────────── /\n /\n * 빈 자리로 벌린다 — 시스템 항목이 바닥에 붙는다.\n \n 목록이 화면보다 길면 이 자리가 0 이 되고 시스템은 목록 끝에 그대로 이어진다.\n * flex: 1 1 auto 가 아니라 flex: 1 1 0 이라야 그렇게 된다 — auto 면 이 빈 칸이 자기\n * 높이를 주장해 목록이 밀린다.\n \n 레일 전용이 아니다. 한때 [rail] 에 걸어 두고 「바닥에 붙이는 것은 폭이 좁을 때의\n * 배치」라고 적었는데, 그건 지어낸 이유였다. 서랍도 화면 높이를 다 쓰므로 시스템이 바닥에\n * 붙는 뜻이 같다.\n /\n :host .railspacer {\n flex: 1 1 0;\n min-height: 0;\n }\n\n /\n * 시스템 단추의 스타일은 여기에 없다 — 보통 메뉴 줄로 그린다.\n \n 전에는 button.railitem 으로 따로 그리고 그 꾸밈을 여기에 두었다. 그러면 레일이 아닌\n * 모양에서는 꾸밈이 없다. ul > li > a 로 두면 위의 규칙들이 그대로 붙는다 — 여백 · 색 ·\n * hover · 접힘 · 화살표 · 팝업 표시까지.\n /\n\n / ── 접기 단추 ─────────────────────────────────────────────────────── /\n :host .railtoggle {\n display: flex;\n align-items: center;\n gap: var(--menu-rail-gap);\n width: 100%;\n box-sizing: border-box;\n margin-bottom: 4px;\n padding: 8px 11px;\n border: none;\n border-radius: var(--menu-rail-radius);\n background: none;\n color: var(--menu-rail-faint);\n font: var(--menu-rail-font-weight) var(--menu-rail-font-size) var(--theme-font, inherit);\n text-align: left;\n cursor: pointer;\n }\n\n :host .railtoggle:hover {\n background-color: var(--menu-rail-hover);\n color: var(--menu-rail-ink);\n }\n\n :host .railtoggle md-icon {\n --md-icon-size: var(--menu-rail-icon-size);\n\n flex: none;\n width: 20px;\n min-width: 20px;\n color: inherit;\n }\n\n :host([collapsed]) .railtoggle {\n justify-content: center;\n gap: 0;\n padding: 8px 0;\n }\n\n :host([collapsed]) .railtoggle span {\n display: none;\n }\n\n /\n * ── 하위 메뉴 팝업 ──────────────────────────────────────────────────────\n * 레일 전용이 아니다. 접힌 레일에서 하위로 가는 길이기도 하고, 시스템 항목(주소가 아니라\n * 함수)의 자리이기도 하다. 시스템은 어느 모양에서든 팝업으로 열리므로 [rail] 에 걸지 않는다.\n /\n /\n * fixed 다 — 레일은 overflow-x: hidden 이라 안에서 띄우면 잘린다.\n \n 그리고 팝업은 같은 shadow root 안에 있다. 그래서 위의 접힘 규칙들은 > ul 로 좁혀 둔다 —\n * 좁히지 않으면 a > span 의 display: none 이 팝업 항목의 이름까지 지우고, 가운데 정렬과\n * 여백 0 이 같이 걸려 아이콘만 남는다. 한때 li 로만 좁혀 두었는데, 팝업 줄도 li 라서\n * 아무것도 가리지 못했다.\n /\n :host .railpop {\n position: fixed;\n z-index: 60;\n min-width: 190px;\n /\n * 70vh 였다. 그러면 열여섯 줄짜리 목록이 화면에 다 들어가는데도 스크롤이 생긴다.\n * 자리는 fitPopup 이 맞추므로, 여기서는 화면이 허락하는 만큼만 잘라 둔다.\n /\n max-height: calc(100vh - 16px);\n overflow-y: auto;\n box-sizing: border-box;\n padding: 6px;\n /\n * 테두리는 선 색이다. 표면색으로 두면 경계가 안 보여 레일에서 흘러나온 것처럼 읽힌다.\n * 그림자만으로는 밝은 테마에서 약하다.\n /\n border: 1px solid var(--menu-rail-line, var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.15)));\n border-radius: 10px;\n background-color: var(--menu-rail-surface);\n box-shadow: 0 8px 30px rgba(0, 0, 0, 0.22);\n }\n\n /\n * 노브 — 팝업이 어느 항목에서 열렸는지 가리킨다.\n \n 45도 돌린 정사각이다. 왼쪽 두 변만 테두리를 두어 팝업의 왼쪽 선에서 뾰족하게 나오고,\n * 배경은 팝업과 같은 면색이라 팝업의 선이 그 자리에서 끊긴 것처럼 보인다.\n \n 자리(top)는 fitKnob 이 정한다. 팝업이 위로 밀려 그 항목이 팝업의 세로 범위 밖에 있으면\n * hidden 이 붙는다 — 아무 데도 가리키지 못하는 화살은 없는 것이 낫다.\n /\n :host .railknob {\n /\n * fixed 다 — 팝업 안에 두면 잘린다. 팝업은 목록이 길 때 스크롤해야 해서\n * overflow-y: auto 이고, 그러면 브라우저가 overflow-x 도 auto 로 계산한다. 노브는 팝업의\n * 왼쪽 선 밖으로 나가야 하므로 그 스크롤 박스에 잘렸다. 자리는 fitKnob 이 화면 좌표로 준다.\n /\n position: fixed;\n z-index: 61;\n width: 10px;\n height: 10px;\n transform: rotate(45deg);\n /\n * 선과 면이 팝업과 같다. 팝업의 왼쪽 선에 반쯤 물리면 그 선이 그 자리에서 뾰족하게\n * 꺾인 것처럼 보인다 — 따로 붙은 장식이 아니라 팝업의 일부다.\n \n 선을 한 단 진하게 하고 크게 하고 그림자까지 얹어 봤다. 눈에는 더 잡히는데 팝업에서\n * 떨어진 부품처럼 보였다. 선을 아예 없애 봤더니 팝업의 선이 끊긴 틈으로만 남아 약했다.\n \n 안 보였던 원인은 색도 크기도 아니라 잘림이었다(position: fixed 로 고쳤다).\n /\n border-left: 1px solid var(--menu-rail-line, var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.15)));\n border-bottom: 1px solid var(--menu-rail-line, var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.15)));\n background-color: var(--menu-rail-surface);\n }\n\n :host .railpop .phead {\n padding: 6px 10px 4px;\n font-family: var(--theme-font-mono, monospace);\n font-size: 9.5px;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: var(--menu-rail-faint);\n }\n\n :host .railpop a {\n padding: 8px 10px;\n border-radius: 7px;\n font-size: 12.5px;\n }\n\n /\n * 팝업 안의 지금 페이지에 대한 규칙은 여기 없다.\n \n 팝업도 renderMenus 가 그리므로 줄이 li[current] > a 다. 위의 규칙이 그대로 닿는다.\n * 한때 팝업 줄을 a[current] 로 따로 그렸고 그 규칙이 여기 남아 있었는데, 모양이 바뀐 뒤\n * 아무것에도 걸리지 않는 죽은 줄이었다.\n /\n\n /\n * ── 손가락으로 누르는 화면 ──────────────────────────────────────────────\n * 폭이 아니라 입력 장치로 가른다. 좁은 창에서 마우스를 쓰는 사람에게 줄을 키울 이유는\n * 없고, 넓은 태블릿에서 손가락으로 누르는 사람에게는 키워야 한다.\n \n 기존 모양은 max-width: 460px 으로 갈랐다. 그건 「좁으면 휴대폰일 것」이라는 짐작이다.\n */\n @media (pointer: coarse) {\n :host {\n --menu-rail-font-size: 15px;\n }\n\n :host a,\n :host .railitem {\n padding: 12px 11px;\n }\n\n :host li li a {\n padding: 10px 11px;\n }\n }\n`\n"]}
1	+ {"version":3,"file":"menu-portrait-styles.js","sourceRoot":"","sources":["../../src/menu-portrait-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAskBpC,CAAA","sourcesContent":["import { css } from 'lit'\n\n/*\n 왼쪽 메뉴의 모양 — 한 벌이다.\n \n ## 왜 한 벌인가\n \n 한때 둘이었다. 기존 모양(줄마다 밑줄 · 왼쪽 여백 16px · hover 에 굵기 변화)과 레일 모양\n * (라운드 알약 · 밑줄 없음 · 접을 수 있음). 같은 메뉴가 설정 하나로 딴 물건처럼 보였고, 무엇을\n * 어느 쪽에 두어야 하는지를 매번 판단해야 해서 일곱 번 조용히 깨졌다.\n \n 기존 모양은 접을 수도 없었다 — 줄마다 폭 전체를 쓰는 밑줄이 있고 왼쪽 여백이 16px 이라\n * 56px 에서 무너진다. 그래서 레일 펼친 모양을 기준으로 통일했다.\n \n ## 안에 세 변형이 있다\n \n ```\n * (기본) 늘 보이는 모양. 서랍도 이것이다\n * [collapsed] 접힌 레일 — 아이콘만. 하위는 팝업으로\n * .railpop 팝업 — 접힌 레일에서 하위로 가는 길, 그리고 시스템 항목의 자리\n * ```\n \n 무엇이 어느 변형에 걸리나는 `menu-mode.ts` 가 답한다. 여기서 그때그때 판단하지 않는다.\n \n ## 값의 출처\n \n `operato-twin` 의 레일(`twin-nav-rail`)이 쓰던 값이다. 값을 베끼지 않고 조정 지점으로 노출해\n * 앱이 자기 테마에 맞출 수 있게 둔다.\n /\nexport const MenuPortraitStyles = css`\n :host {\n /\n * ── 조정 지점 ─────────────────────────────────────────────────────────\n * 폭은 여기 없다 — ox-menu-part 가 정한다. 셸이 크기를 재는 요소도 그것이고, 리사이즈\n * 손잡이가 인라인 폭을 쓰는 요소도 그것이다. 여기서 또 정하면 둘이 싸운다.\n * 폭 토큰(--menu-rail-width · --menu-rail-width-collapsed)은 앱이 위에서 준다.\n /\n --menu-rail-radius: 8px;\n --menu-rail-gap: 11px;\n --menu-rail-font-size: 13px;\n --menu-rail-font-weight: 560;\n --menu-rail-icon-size: 19px;\n /\n * ── 줄의 세로 여백 ────────────────────────────────────────────────────\n * 줄 높이는 아이콘(20px)에 이 값의 두 배를 더한 것이다. 8px 이면 36px 줄이다.\n \n 항목이 스물 남짓인 레일은 그 높이로 화면을 넘긴다. 그때는 줄여 앉힌다 — 다 보이는 것이\n * 넉넉한 것보다 낫다. 다만 줄이는 것은 앱이 고르는 값이고, 화면 높이에 따라 저절로\n * 눌리게 두지 않는다.\n \n 저절로 눌리게 두면 창 높이마다 줄 높이가 달라진다. 실제로 그런 레일이 있었다 —\n * 창 1100 에서 33px · 800 에서 28px · 620 에서 16px 이 되어 아이콘이 뭉개졌다.\n \n 기본은 6.5px — 33px 줄이다. 두 제품이 같은 값을 골랐고, 앱마다 적어 두면 한쪽만 고쳐진다.\n /\n --menu-rail-row-pad: 6.5px;\n --menu-rail-surface: var(--md-sys-color-surface, #fff);\n --menu-rail-ink: var(--md-sys-color-on-surface, #17242c);\n --menu-rail-muted: var(--md-sys-color-on-surface-variant, #57676f);\n --menu-rail-faint: var(--md-sys-color-outline, #8a959c);\n --menu-rail-hover: var(--md-sys-color-surface-container-low, rgba(0, 0, 0, 0.04));\n --menu-rail-accent: var(--md-sys-color-primary, #0e8a56);\n --menu-rail-accent-wash: var(--md-sys-color-primary-container, rgba(14, 138, 86, 0.1));\n\n /\n * ── 세로 단이다 ───────────────────────────────────────────────────────\n * 이 셋이 없으면 gap 이 안 먹고, 바닥에 붙이는 빈 자리가 자라지 않아 시스템 줄이 목록\n * 바로 뒤에 붙는다. 두 스타일 파일을 합칠 때 이것을 잃어 그 증상이 났다.\n /\n display: flex;\n flex-direction: column;\n height: 100%;\n\n box-sizing: border-box;\n width: 100%;\n background-color: var(--menu-rail-surface);\n padding: 10px 8px;\n gap: 2px;\n overflow-x: hidden;\n overflow-y: auto;\n }\n\n /\n * 하위가 펼쳐져 있으면 최상위의 합계를 감춘다.\n \n 그 아래에 낱개 건수가 다 보이므로 같은 말을 두 번 하는 것이고, 합계와 낱개가 나란히 있으면\n * 「합계가 저 셋과 다른 무엇인가」를 한 번 생각하게 만든다.\n \n 최상위에만 건다 — 하위 항목도 지금 페이지이면 active 를 단다. 그래서 [top] 으로 가른다.\n \n 접혔을 때는 감추지 않는다 — 낱개가 안 보이므로 합계가 유일한 신호다.\n \n [branch] 도 함께 본다 — 하위가 있는 항목만이다. 이게 없을 때 잎 항목(「할 일」·「내 결재함」)이\n * 자기가 지금 페이지가 되는 순간 건수가 사라졌다. 감출 근거가 「그 수를 아래에서 다시 보여\n * 주니까」인데, 잎에는 아래가 없어서 그냥 없어지는 것이었다. [확인함] 2026-09-07 화면\n /\n :host(:not([collapsed])) li[top][active][branch] > a [badge] {\n display: none;\n }\n\n :host ul {\n display: flex;\n flex-direction: column;\n gap: 2px;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n / 묶음 이름 — 접히면 자리가 없다. /\n :host [group-label] {\n padding: 10px 10px 4px;\n border: none;\n font-family: var(--theme-font-mono, monospace);\n font-size: 9.5px;\n font-weight: 400;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: var(--menu-rail-faint);\n }\n\n / 접히면 자리가 없다 — 레일 안쪽만. 팝업 안의 묶음 이름은 그대로 보인다. /\n :host([collapsed]) > [group-label],\n :host([collapsed]) > ul [group-label] {\n display: none;\n }\n\n :host a {\n display: flex;\n align-items: center;\n gap: var(--menu-rail-gap);\n padding: var(--menu-rail-row-pad) 11px;\n /\n * 줄어들지 않는다. 목록이 화면보다 길면 겉 상자가 구르면 되고, 줄이 눌릴 일이 아니다.\n * 이것이 없으면 창 높이에 따라 줄 높이가 달라진다(위 --menu-rail-row-pad 머리말).\n /\n flex: none;\n border: none;\n border-radius: var(--menu-rail-radius);\n font: var(--menu-rail-font-weight) var(--menu-rail-font-size) var(--theme-font, inherit);\n color: var(--menu-rail-muted);\n text-decoration: none;\n text-transform: none;\n white-space: nowrap;\n overflow: hidden;\n }\n\n /\n * hover 에서 굵기를 바꾸지 않는다. 기존 모양은 a:hover { font-weight: bold } 여서 마우스가\n * 지날 때마다 글자 폭이 늘어 줄이 흔들렸다. 색만 바꾼다.\n /\n :host a:hover {\n background-color: var(--menu-rail-hover);\n color: var(--menu-rail-ink);\n font-weight: var(--menu-rail-font-weight);\n }\n\n :host a md-icon {\n --md-icon-size: var(--menu-rail-icon-size);\n\n flex: none;\n width: 20px;\n min-width: 20px;\n height: 20px;\n margin: 0;\n opacity: 1;\n overflow: hidden;\n color: var(--menu-rail-faint);\n }\n\n /\n * ── 지금 페이지 ─────────────────────────────────────────────────────────\n * 어느 층이든 지금 보고 있는 그 줄에만 강조를 준다. 층으로 가르지 않는다 — 최상위가 그\n * 자리일 수도 있고(하위가 없는 묶음) 하위가 그 자리일 수도 있다.\n /\n :host li[current] > a {\n border-left: none;\n background-color: var(--menu-rail-accent-wash);\n color: var(--menu-rail-ink);\n font-weight: 700;\n }\n\n :host li[current] > a md-icon {\n color: var(--menu-rail-accent);\n }\n\n /\n * ── 펼쳐진 최상위 ───────────────────────────────────────────────────────\n * 강조하지 않는다. 최상위의 active 는 「하위가 펼쳐져 있다」는 여닫힘이고, 지금 페이지는\n * 그 안의 한 줄이다. 둘에 같은 강조를 주면 두 줄이 나란히 강조되어 어느 쪽이 지금 자리인지\n * 흐려진다.\n \n 그래도 옅게는 둔다 — 접힌 화살표와 함께 「여기가 열려 있다」를 말한다.\n /\n :host(:not([collapsed])) li[top][active]:not([current]) > a {\n background-color: transparent;\n color: var(--menu-rail-ink);\n }\n\n :host(:not([collapsed])) li[top][active]:not([current]) > a md-icon {\n color: var(--menu-rail-ink);\n }\n\n /\n * ── 접히면 최상위가 대신 말한다 ─────────────────────────────────────────\n * 하위가 감춰지므로 지금 자리를 말할 줄이 최상위뿐이다. 그때는 최상위가 강조를 받는다.\n /\n :host([collapsed]) li[top][active] > a {\n background-color: var(--menu-rail-accent-wash);\n color: var(--menu-rail-ink);\n }\n\n :host([collapsed]) li[top][active] > a md-icon {\n color: var(--menu-rail-accent);\n }\n\n /\n * ── 팝업을 연 항목 ─────────────────────────────────────────────────────\n * active(지금 페이지)와 다른 뜻이라 다른 표시를 준다. 접힌 레일에서 강조된 아이콘은\n * 「지금 페이지」만 뜻하므로, 이 표시가 없으면 어느 항목의 팝업인지 알 수 없다.\n \n 강조색을 쓰지 않는다 — 그 색은 지금 페이지의 것이다. 대신 글자·아이콘을 짙게 하고 팝업과\n * 같은 면색으로 칠해 팝업의 연장으로 읽히게 한다.\n /\n :host li[popped] > a {\n background-color: var(--menu-rail-hover);\n color: var(--menu-rail-ink);\n }\n\n :host li[popped] > a md-icon {\n color: var(--menu-rail-ink);\n }\n\n / 지금 페이지이면서 팝업까지 연 경우 — 강조색이 이긴다(그것이 더 드문 사실이다). /\n :host li[current][popped] > a,\n :host([collapsed]) li[top][active][popped] > a {\n background-color: var(--menu-rail-accent-wash);\n }\n\n :host li[current][popped] > a md-icon,\n :host([collapsed]) li[top][active][popped] > a md-icon {\n color: var(--menu-rail-accent);\n }\n\n /\n * ── 하위가 있다는 표시 ──────────────────────────────────────────────────\n * 이 화살표가 곧 「나는 묶음이다」이다. 없으면 최상위 줄만 보고 하위를 가졌는지, 자기가\n * 끝인지 알 수 없다 — 눌러 봐야 안다.\n \n 글자는 md-icon 의 내용이 아니라 여기서 준다. 두 스타일 파일을 합칠 때 이 ::before 를\n * 잃었고, 그래서 <md-icon submenu-button> 이 빈 채로 남아 화살표가 사라졌다.\n * 아이콘 이름을 컴포넌트로 옮기지 않는 이유는, 접힘·팝업마다 다르게 두는 것이 이 파일의\n * 일이기 때문이다.\n /\n :host a [submenu-button] {\n margin-left: auto;\n --md-icon-size: 16px;\n width: 16px;\n min-width: 16px;\n color: var(--menu-rail-faint);\n transition: transform 0.2s ease;\n }\n\n :host a [submenu-button]::before {\n content: 'chevron_right';\n }\n\n / 펼쳐지면 아래를 가리킨다 — 화살표 하나로 여닫힘까지 말한다. /\n :host li[active] > a [submenu-button] {\n transform: rotate(90deg);\n color: var(--menu-rail-ink);\n }\n\n / 접히면 하위가 팝업으로 뜬다. 56px 안에 화살표를 둘 자리도 없다. /\n :host([collapsed]) > ul li a [submenu-button] {\n display: none;\n }\n\n :host a > span {\n flex: 1;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n /\n * ── 접으면 이름을 감춘다 — 레일 안쪽만 ─────────────────────────────\n * 팝업은 같은 shadow root 안의 형제다(.railpop). 그래서 li 로만 좁히면 팝업 줄도\n * 함께 걸려 아이콘만 남는다 — 접힌 레일에서 팝업은 이름을 읽으러 여는 자리인데.\n \n > ul 로 좁힌다. 레일의 목록과 시스템 목록은 host 의 직계 자식이고, 팝업의 목록은\n * .railpop 안에 있다. 이 한 칸이 두 자리를 가른다.\n /\n :host([collapsed]) > ul li a > span {\n display: none;\n }\n\n :host([collapsed]) > ul li a {\n justify-content: center;\n gap: 0;\n padding: var(--menu-rail-row-pad) 0;\n }\n\n / ── 하위 메뉴 — 펼친 상태에서는 그 자리에서 열린다 ────────────────── /\n :host li > ul {\n overflow: hidden;\n max-height: 0;\n background: none;\n padding-left: 20px;\n transition: max-height 0.24s ease;\n }\n\n :host li[active] > ul {\n max-height: 640px;\n }\n\n :host li[active] > ul[settled] {\n overflow-y: auto;\n }\n\n :host li li a {\n padding: calc(var(--menu-rail-row-pad) - 2px) 11px;\n font-size: 12.5px;\n color: var(--menu-rail-muted);\n }\n\n\n /\n * 접히면 하위를 그 자리에서 열지 않는다. 56px 안에서는 들여쓴 목록이 읽히지 않는다.\n * 대신 팝업으로 뜬다 — .railpop 이 그 자리다.\n /\n :host([collapsed]) > ul li > ul {\n display: none;\n }\n\n / ── 건수 ──────────────────────────────────────────────────────────── /\n /\n * 메뉴에서 유일하게 색을 갖는 자리다.\n \n 나머지는 무채색이다 — 틀은 자리를 말하고, 색은 「무엇이 나를 기다리나」에만 쓴다. 건수가 바로\n * 그것이라 여기에 제품의 강조색을 준다.\n \n 색을 --menu-rail-accent 에서 가져오지 않는다. 그 이름은 지금 페이지 표시에도 쓰이고, 그것까지\n * 강조색이 되면 메뉴 전체가 물든다. 배지만 따로 든다.\n \n 순서는 앱 토큰이 먼저다(--ui-accent). md 의 primary 는 앱마다 뜻이 다르다 — operato-twin 에서는\n * 브랜드 청록이지만 operato-plant 에서는 진회색이라, primary 를 쓰면 한쪽에서만 색이 나온다.\n * 실제로 그랬다.\n \n 글자색은 짝으로 온다. 강조색 위에 흰 글자를 늘 올리면 어두운 테마의 밝은 초록에서 대비가\n * 2.24 로 떨어진다 — 그 테마는 짙은 글자를 짝으로 둔다.\n /\n :host a [badge] {\n margin-left: auto;\n min-width: 18px;\n padding: 0 5px;\n border-radius: 9px;\n background-color: var(--menu-rail-badge, var(--ui-accent, var(--md-sys-color-primary, #0c7a4c)));\n color: var(--menu-rail-badge-ink, var(--ui-on-accent, var(--md-sys-color-on-primary, #ffffff)));\n font-family: var(--theme-font-mono, monospace);\n font-size: 10.5px;\n font-weight: 700;\n line-height: 17px;\n text-align: center;\n }\n\n /\n * 접히면 라벨이 없어 옆에 둘 자리가 없다. 아이콘 위에 겹친다.\n \n 이것도 레일 안쪽만이다. 팝업에는 이름이 있으니 건수가 그 오른쪽에 알약으로 선다 —\n * 위의 기본 규칙이 그대로 맞다.\n /\n :host([collapsed]) > ul li[menu] {\n position: relative;\n }\n\n :host([collapsed]) > ul li a [badge] {\n position: absolute;\n top: 0;\n right: 2px;\n margin-left: 0;\n /\n * 글자를 9.5px 에서 10px 로 올린다. 링이 아이콘을 밀어내 준 만큼 숫자에 자리를 줄 수 있다 —\n * 접힌 레일에서 이 숫자가 유일한 신호이므로 읽히는 것이 먼저다.\n /\n min-width: 15px;\n padding: 0 3px;\n font-size: 10px;\n line-height: 15px;\n /\n * 배경색 링으로 아이콘을 밀어낸다.\n \n 56px 안에서는 배지가 아이콘 위에 겹칠 수밖에 없다. 겹친 자리에서 아이콘의 선이 배지의\n * 글자를 지나가면 숫자가 안 읽힌다. 링이 그 사이를 끊는다 — 아이콘을 지운 것처럼 보인다.\n \n 링 색은 레일의 면색이다. 고른 항목은 배경이 accent-wash 여서 정확히 같지는 않지만, 그\n * 색이 아주 옅어 눈에 걸리지 않는다.\n /\n box-shadow: 0 0 0 2px var(--menu-rail-surface);\n }\n\n /\n * 값이 아직 안 온 동안만 자리를 비운다.\n \n 알약을 그릴지는 배지 정의가 있나로 정해지고, 그 안의 값은 조금 뒤에 채워진다. 그 사이 빈\n * 알약이 아이콘 위에 뜻 없는 점으로 남는다.\n \n 0 은 값이다. 0 이면 0 을 보인다 — 「기다리는 것이 없다」도 사람이 알아야 하는 사실이고,\n * 그 자리가 비어 있으면 「아직 안 왔나」와 구별되지 않는다.\n /\n :host a [badge]:empty {\n display: none;\n }\n\n /\n * Zero keeps its place and loses the signal.\n \n The filled accent pill means \"there is something here for you\". 작성 중 0 wore exactly the same\n * one as 할 일 9 — rgb(12,122,76), 28x17 — so a column of them read as four things waiting.\n \n Hiding zero is not the answer: an empty slot cannot be told apart from a count that has not\n * arrived yet (see the rule above). So the number stays and the colour goes quiet. Contrast is\n * still readable at 10.5px because both tokens come from the same surface pair the menu already\n * uses for inactive rows.\n /\n :host a [badge][zero] {\n background-color: var(--menu-rail-badge-zero, var(--ui-line-soft, #e6eaed));\n color: var(--menu-rail-badge-zero-ink, var(--ui-faint, #8a959c));\n font-weight: 500;\n }\n\n / ── 시스템 자리 ───────────────────────────────────────────────────── /\n /\n * 빈 자리로 벌린다 — 시스템 항목이 바닥에 붙는다.\n \n 목록이 화면보다 길면 이 자리가 0 이 되고 시스템은 목록 끝에 그대로 이어진다.\n * flex: 1 1 auto 가 아니라 flex: 1 1 0 이라야 그렇게 된다 — auto 면 이 빈 칸이 자기\n * 높이를 주장해 목록이 밀린다.\n \n 레일 전용이 아니다. 한때 [rail] 에 걸어 두고 「바닥에 붙이는 것은 폭이 좁을 때의\n * 배치」라고 적었는데, 그건 지어낸 이유였다. 서랍도 화면 높이를 다 쓰므로 시스템이 바닥에\n * 붙는 뜻이 같다.\n /\n :host .railspacer {\n flex: 1 1 0;\n min-height: 0;\n }\n\n /\n * 시스템 단추의 스타일은 여기에 없다 — 보통 메뉴 줄로 그린다.\n \n 전에는 button.railitem 으로 따로 그리고 그 꾸밈을 여기에 두었다. 그러면 레일이 아닌\n * 모양에서는 꾸밈이 없다. ul > li > a 로 두면 위의 규칙들이 그대로 붙는다 — 여백 · 색 ·\n * hover · 접힘 · 화살표 · 팝업 표시까지.\n /\n\n / ── 접기 단추 ─────────────────────────────────────────────────────── /\n :host .railtoggle {\n display: flex;\n align-items: center;\n gap: var(--menu-rail-gap);\n width: 100%;\n box-sizing: border-box;\n margin-bottom: 4px;\n padding: 8px 11px;\n border: none;\n border-radius: var(--menu-rail-radius);\n background: none;\n color: var(--menu-rail-faint);\n font: var(--menu-rail-font-weight) var(--menu-rail-font-size) var(--theme-font, inherit);\n text-align: left;\n cursor: pointer;\n }\n\n :host .railtoggle:hover {\n background-color: var(--menu-rail-hover);\n color: var(--menu-rail-ink);\n }\n\n :host .railtoggle md-icon {\n --md-icon-size: var(--menu-rail-icon-size);\n\n flex: none;\n width: 20px;\n min-width: 20px;\n color: inherit;\n }\n\n :host([collapsed]) .railtoggle {\n justify-content: center;\n gap: 0;\n padding: 8px 0;\n }\n\n :host([collapsed]) .railtoggle span {\n display: none;\n }\n\n /\n * ── 하위 메뉴 팝업 ──────────────────────────────────────────────────────\n * 레일 전용이 아니다. 접힌 레일에서 하위로 가는 길이기도 하고, 시스템 항목(주소가 아니라\n * 함수)의 자리이기도 하다. 시스템은 어느 모양에서든 팝업으로 열리므로 [rail] 에 걸지 않는다.\n /\n /\n * fixed 다 — 레일은 overflow-x: hidden 이라 안에서 띄우면 잘린다.\n \n 그리고 팝업은 같은 shadow root 안에 있다. 그래서 위의 접힘 규칙들은 > ul 로 좁혀 둔다 —\n * 좁히지 않으면 a > span 의 display: none 이 팝업 항목의 이름까지 지우고, 가운데 정렬과\n * 여백 0 이 같이 걸려 아이콘만 남는다. 한때 li 로만 좁혀 두었는데, 팝업 줄도 li 라서\n * 아무것도 가리지 못했다.\n /\n :host .railpop {\n position: fixed;\n z-index: 60;\n min-width: 190px;\n /\n * 70vh 였다. 그러면 열여섯 줄짜리 목록이 화면에 다 들어가는데도 스크롤이 생긴다.\n * 자리는 fitPopup 이 맞추므로, 여기서는 화면이 허락하는 만큼만 잘라 둔다.\n /\n max-height: calc(100vh - 16px);\n overflow-y: auto;\n box-sizing: border-box;\n padding: 6px;\n /\n * 테두리는 선 색이다. 표면색으로 두면 경계가 안 보여 레일에서 흘러나온 것처럼 읽힌다.\n * 그림자만으로는 밝은 테마에서 약하다.\n /\n border: 1px solid var(--menu-rail-line, var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.15)));\n border-radius: 10px;\n background-color: var(--menu-rail-surface);\n box-shadow: 0 8px 30px rgba(0, 0, 0, 0.22);\n }\n\n /\n * 노브 — 팝업이 어느 항목에서 열렸는지 가리킨다.\n \n 45도 돌린 정사각이다. 왼쪽 두 변만 테두리를 두어 팝업의 왼쪽 선에서 뾰족하게 나오고,\n * 배경은 팝업과 같은 면색이라 팝업의 선이 그 자리에서 끊긴 것처럼 보인다.\n \n 자리(top)는 fitKnob 이 정한다. 팝업이 위로 밀려 그 항목이 팝업의 세로 범위 밖에 있으면\n * hidden 이 붙는다 — 아무 데도 가리키지 못하는 화살은 없는 것이 낫다.\n /\n :host .railknob {\n /\n * fixed 다 — 팝업 안에 두면 잘린다. 팝업은 목록이 길 때 스크롤해야 해서\n * overflow-y: auto 이고, 그러면 브라우저가 overflow-x 도 auto 로 계산한다. 노브는 팝업의\n * 왼쪽 선 밖으로 나가야 하므로 그 스크롤 박스에 잘렸다. 자리는 fitKnob 이 화면 좌표로 준다.\n /\n position: fixed;\n z-index: 61;\n width: 10px;\n height: 10px;\n transform: rotate(45deg);\n /\n * 선과 면이 팝업과 같다. 팝업의 왼쪽 선에 반쯤 물리면 그 선이 그 자리에서 뾰족하게\n * 꺾인 것처럼 보인다 — 따로 붙은 장식이 아니라 팝업의 일부다.\n \n 선을 한 단 진하게 하고 크게 하고 그림자까지 얹어 봤다. 눈에는 더 잡히는데 팝업에서\n * 떨어진 부품처럼 보였다. 선을 아예 없애 봤더니 팝업의 선이 끊긴 틈으로만 남아 약했다.\n \n 안 보였던 원인은 색도 크기도 아니라 잘림이었다(position: fixed 로 고쳤다).\n /\n border-left: 1px solid var(--menu-rail-line, var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.15)));\n border-bottom: 1px solid var(--menu-rail-line, var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.15)));\n background-color: var(--menu-rail-surface);\n }\n\n :host .railpop .phead {\n padding: 6px 10px 4px;\n font-family: var(--theme-font-mono, monospace);\n font-size: 9.5px;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: var(--menu-rail-faint);\n }\n\n :host .railpop a {\n padding: 8px 10px;\n border-radius: 7px;\n font-size: 12.5px;\n }\n\n /\n * 팝업 안의 지금 페이지에 대한 규칙은 여기 없다.\n \n 팝업도 renderMenus 가 그리므로 줄이 li[current] > a 다. 위의 규칙이 그대로 닿는다.\n * 한때 팝업 줄을 a[current] 로 따로 그렸고 그 규칙이 여기 남아 있었는데, 모양이 바뀐 뒤\n * 아무것에도 걸리지 않는 죽은 줄이었다.\n /\n\n /\n * ── 손가락으로 누르는 화면 ──────────────────────────────────────────────\n * 폭이 아니라 입력 장치로 가른다. 좁은 창에서 마우스를 쓰는 사람에게 줄을 키울 이유는\n * 없고, 넓은 태블릿에서 손가락으로 누르는 사람에게는 키워야 한다.\n \n 기존 모양은 max-width: 460px 으로 갈랐다. 그건 「좁으면 휴대폰일 것」이라는 짐작이다.\n */\n @media (pointer: coarse) {\n :host {\n --menu-rail-font-size: 15px;\n }\n\n :host a,\n :host .railitem {\n padding: 12px 11px;\n }\n\n :host li li a {\n padding: 10px 11px;\n }\n }\n`\n"]}

package/dist/src/ox-menu-portrait.d.ts CHANGED Viewed

@@ -90,6 +90,25 @@ export declare class OxMenuPortrait extends OxMenuPortrait_base {
      *   CSS 로 「최상위인 li」를 가리려면 `:not(li li)` 같은 것이 필요하고, 그건 읽는 사람이
      *   한 번 더 생각해야 하는 선택자다.
      */
+    /**
+     * The count pill next to a menu label.
+     *
+     * Zero is drawn, and drawn quietly.
+     *
+     * The pill is the "there is something here for you" signal, and 작성 중 0 wore the same filled
+     * accent as 할 일 9 — same colour rgb(12,122,76), same 28x17 box. Four of them in a column read
+     * as four things waiting. Hiding zero is not the answer either: an empty slot cannot be told
+     * apart from a count that has not arrived yet. So zero keeps its place and loses the signal.
+     *
+     * ── Why this method exists ────────────────────────────────────────────
+     * Callers used to hand over a Lit directive — `badge: () => asyncReplace(counts(name))` — which
+     * left this component with something it could only drop into a slot. It could not see the value,
+     * so it could not decide how to draw it. The component that draws the pill has to own how the
+     * pill looks, so it now takes the stream and wraps it here.
+     *
+     * A caller that still passes a ready-made directive keeps working, minus the quiet zero.
+     */
+    private renderBadge;
     renderMenus(menus: Menu[], activeTopLevel?: Menu, activeMenu?: Menu, depth?: number): TemplateResult | typeof nothing;
     render(): TemplateResult<1>;
     /**

package/dist/src/ox-menu-portrait.js CHANGED Viewed

@@ -3,12 +3,26 @@ import { __decorate } from "tslib";
 import '@material/web/icon/icon.js';
 import { html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { asyncReplace } from 'lit/directives/async-replace.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { i18next, localize } from '@operato/i18n';
 import { navigate, store } from '@operato/shell';
 import { ScrollbarStyles } from '@operato/styles';
 import { MenuPortraitStyles } from './menu-portrait-styles.js';
 import { childrenOpenAs, menuMode, showsLabels, topNavigates } from './menu-mode.js';
+/** A stream of counts, as opposed to one value or a ready-made directive. */
+function isAsyncIterable(value) {
+    return typeof (value === null || value === void 0 ? void 0 : value[Symbol.asyncIterator]) === 'function';
+}
+/**
+ * Nothing is waiting.
+ *
+ * Only a real zero counts. An empty string is a count that has not arrived, and the pill is hidden
+ * for that case by `[badge]:empty` — treating it as zero here would draw a grey pill on load.
+ */
+function isZero(value) {
+    return value === 0 || value === '0';
+}
 /**
  * 시스템 항목을 담는 가짜 최상위.
  *
@@ -139,6 +153,33 @@ let OxMenuPortrait = OxMenuPortrait_1 = class OxMenuPortrait extends localize(i1
      *   CSS 로 「최상위인 li」를 가리려면 `:not(li li)` 같은 것이 필요하고, 그건 읽는 사람이
      *   한 번 더 생각해야 하는 선택자다.
      */
+    /**
+     * The count pill next to a menu label.
+     *
+     * Zero is drawn, and drawn quietly.
+     *
+     * The pill is the "there is something here for you" signal, and 작성 중 0 wore the same filled
+     * accent as 할 일 9 — same colour rgb(12,122,76), same 28x17 box. Four of them in a column read
+     * as four things waiting. Hiding zero is not the answer either: an empty slot cannot be told
+     * apart from a count that has not arrived yet. So zero keeps its place and loses the signal.
+     *
+     * ── Why this method exists ────────────────────────────────────────────
+     * Callers used to hand over a Lit directive — `badge: () => asyncReplace(counts(name))` — which
+     * left this component with something it could only drop into a slot. It could not see the value,
+     * so it could not decide how to draw it. The component that draws the pill has to own how the
+     * pill looks, so it now takes the stream and wraps it here.
+     *
+     * A caller that still passes a ready-made directive keeps working, minus the quiet zero.
+     */
+    renderBadge(badge) {
+        if (badge === false || badge === null || badge === undefined) {
+            return nothing;
+        }
+        if (isAsyncIterable(badge)) {
+            return asyncReplace(badge, value => html `<div badge ?zero=${isZero(value)}>${value}</div>`);
+        }
+        return html `<div badge ?zero=${isZero(badge)}>${badge}</div>`;
+    }
     renderMenus(menus, activeTopLevel, activeMenu, depth = 0) {
         if (menus.length == 0) {
             return nothing;
@@ -172,17 +213,23 @@ let OxMenuPortrait = OxMenuPortrait_1 = class OxMenuPortrait extends localize(i1
                   active 하나로 두면 「펼쳐져 있다」와 「지금 페이지다」에 같은 강조가 걸려,
                   최상위와 그 안의 한 줄이 나란히 강조된다.
                 -->
+                <!--
+                  branch — this item has children. The aggregate badge is a duplicate only while
+                  those children are on screen with their own counts; on a leaf nothing else
+                  carries the number, so hiding it there just loses it.
+                -->
                 <li
                   ?active=${activeTopLevel ? menu === activeTopLevel : active}
                   ?current=${!!activeMenu && menu === activeMenu}
                   ?popped=${this.popped === menu}
                   ?top=${depth === 0}
+                  ?branch=${menus.length > 0}
                   .menu=${menu}
                   menu
                 >
                   <a href=${path || '#'} title=${ifDefined(this.hoverText(label, description))}>
                     <md-icon filled>${icon || 'fiber_manual_record'}</md-icon>
-                    <span>${label}</span>${badge !== false ? html `<div badge>${badge}</div>` : html ``}
+                    <span>${label}</span>${this.renderBadge(badge)}
                     ${menus.length > 0 ? html ` <md-icon filled submenu-button></md-icon> ` : html ``}
                   </a>
                   ${menus && this.renderMenus(menus || [], activeMenu, activeMenu, depth + 1)}

package/dist/src/ox-menu-portrait.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ox-menu-portrait.js","sourceRoot":"","sources":["../../src/ox-menu-portrait.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { html, LitElement, nothing, TemplateResult } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { navigate, store } from '@operato/shell'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { Menu } from './types.js'\n\nimport { MenuPortraitStyles } from './menu-portrait-styles.js'\nimport { childrenOpenAs, menuMode, showsLabels, topNavigates } from './menu-mode.js'\n\n/*\n 시스템 항목을 담는 가짜 최상위.\n \n 팝업이 「어느 최상위에서 열렸나」를 하나의 값(`popped`)으로 들고 있어서, 시스템도 최상위인\n * 것처럼 다룬다. 그래야 노브와 자리 계산이 한 벌로 남는다.\n /\nconst SYSTEM = { name: 'ox-menu-system' } as Menu\n\n@customElement('ox-menu-portrait')\nexport class OxMenuPortrait extends localize(i18next)(LitElement) {\n static styles = [ScrollbarStyles, MenuPortraitStyles]\n\n @property({ type: Array }) menus?: Menu[]\n @property({ type: Object }) activeTopLevel?: Menu\n @property({ type: Object }) activeMenu?: Menu\n @property({ type: String }) path!: string\n\n /\n 레일 모드 — 접을 수 있고, 접히면 하위가 팝업으로 뜬다.\n \n 옵트인이다. 켜지 않은 앱은 지금과 한 글자도 다르지 않다. 모양이 함께 바뀌는 것은 취향이\n * 아니라 요건이다 — 기존 모양은 줄마다 폭 전체를 쓰는 밑줄이 있고 왼쪽 여백이 16px 이라 56px\n * 에서 무너진다(§`menu-rail-styles.ts`).\n /\n @property({ type: Boolean, reflect: true }) rail = false\n\n /\n 접힘 — 아이콘만.\n \n 주인은 이 컴포넌트가 아니다. 폭을 정하는 요소는 `ox-menu-part` 이고(그쪽에 `min-width`\n * 가 있다), 셸의 리사이즈 손잡이도 그 요소에 인라인 폭을 쓴다. 그래서 상태와 저장은 그쪽이\n * 갖고 여기는 받아서 그린다.\n /\n @property({ type: Boolean, reflect: true }) collapsed = false\n\n /\n 서랍인가 — 화면 위에 겹쳐 떴다가 닫히는 메뉴.\n \n 그때 최상위는 펼치기만 한다. 누르는 순간 서랍이 닫히면 그 묶음의 나머지 하위를 볼\n * 기회가 없다(§`ox-menu-part` 의 `drawer`).\n /\n @property({ type: Boolean, reflect: true }) drawer = false\n\n /\n 지금 어떤 모양으로 서 있나 — 세 플래그에서 하나로 모은다.\n \n 이 값과 그에 딸린 두 답(`하위를 어디에` · `최상위가 이동하나`)은 `menu-mode.ts` 에 있고\n * 시험으로 못박혀 있다. 여기서 그때그때 판단하지 않는다 — 그렇게 하다가 네 번 깨졌다.\n /\n private get mode() {\n return menuMode({ rail: this.rail, collapsed: this.collapsed, drawer: this.drawer })\n }\n\n /* 접힌 상태에서 팝업으로 열린 최상위 메뉴. 시스템 팝업이면 SYSTEM 이다. /\n @state() private popped?: Menu\n\n /\n 시스템 항목 — 프로필 · 로그아웃 · 설정처럼 앱이 아니라 프레임워크가 붙이는 것들.\n \n 하드코딩하지 않는다. 각 패키지가 부팅할 때 `ADD_MORENDA` 로 등록하고(권한이 없으면 등록\n * 자체를 안 한다), 우리는 그 목록을 그대로 그린다. 그래서 목록이 비면 이 자리도 없다.\n /\n /\n * private 을 두지 않는다 — 시험이 이 목록을 넣어 보고 「항목이 없으면 자리도 없다」를 확인한다.\n * 앱에서는 store 가 채운다(아래 connectedCallback).\n /\n @state() morendas: any[] = []\n\n private _unsubscribeStore?: () => void\n\n /* 팝업 자리 — 누른 항목의 오른쪽. 세로는 그린 뒤 재서 맞춘다(§`fitPopup`). /\n private _popLeft = 0\n private _popTop = 0\n /* 누른 항목의 윗선. 화면에 들어가면 이 자리를 쓴다. /\n private _popPrefer = 0\n\n /* 팝업이 화면 안에 들어가게 세로 자리를 맞춘다. 팝업 밖 여백. /\n private static readonly POP_MARGIN = 8\n\n /\n 팝업 밖을 누르면 닫는다.\n \n ── 팝업 안의 클릭을 막지 않는다 ────────────────────────────────────────\n * 한때 팝업 컨테이너에 stopPropagation 을 걸어 두었다. 팝업 안을 눌러도 이 처리기가 받아\n * 곧바로 닫히던 것을 막으려던 것인데, 그것이 셸의 라우터까지 막았다.\n \n 라우터는 document.body 에서 클릭을 받아 composedPath 로 A 를 찾고 preventDefault 한 뒤\n * 화면만 바꾼다(@operato/shell 의 installRouter). 클릭이 거기까지 못 가면 브라우저의 기본\n * 이동이 그대로 일어나 페이지 전체가 다시 읽혔다.\n \n 그래서 막지 않고, 여기서 「팝업 안이면 닫지 않는다」로 가른다. 줄을 누를 때 닫는 일은 그\n * 줄의 처리기가 한다.\n /\n private _onDocClick = (e: MouseEvent) => {\n if (!this.popped) {\n return\n }\n\n const pop = this.renderRoot?.querySelector?.('.railpop')\n\n if (pop && e.composedPath().includes(pop)) {\n return\n }\n\n this.popped = undefined\n }\n\n connectedCallback() {\n super.connectedCallback()\n document.addEventListener('click', this._onDocClick)\n\n /\n * morenda 는 각 패키지의 부팅에서 비동기로 등록된다. 한 번 읽고 끝내면 늦게 붙는 것이\n * 빠진다. 길이가 바뀔 때만 다시 그린다 — 이 목록은 늘어나기만 한다.\n /\n const read = () => ((store.getState() as any)?.more?.morendas \|\| []) as any[]\n\n this.morendas = read()\n this._unsubscribeStore = store.subscribe(() => {\n const next = read()\n if (next.length !== this.morendas.length) {\n this.morendas = next\n }\n })\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n document.removeEventListener('click', this._onDocClick)\n this._unsubscribeStore?.()\n }\n\n /\n 마우스를 올렸을 때 뜨는 글.\n \n ── 접혔을 때는 이름이 먼저다 ───────────────────────────────────────────\n * 접히면 아이콘만 남으므로 이름을 모른다. 그때는 이름을 윗줄에 얹고 설명을 아랫줄에 둔다.\n * 펼쳐져 있으면 이름은 이미 옆에 있으니 설명만 낸다.\n \n 줄바꿈으로 잇는다 — 대시로 이으면 설명 안의 대시와 겹쳐 「A — B — C」가 된다.\n \n 설명도 없고 이름도 안 보이는 경우가 아니면 아무것도 내지 않는다. 이름을 그대로 되풀이하는\n * 툴팁은 소음이다.\n /\n private hoverText(label?: unknown, description?: string) {\n const name = typeof label === 'string' ? label : undefined\n\n if (showsLabels(this.mode)) {\n return description \|\| undefined\n }\n\n return description && name ? `${name}\\n${description}` : description \|\| name\n }\n\n /\n @param depth 0 이면 최상위다. 하위도 `active` 를 달기 때문에 깊이를 값으로 넘긴다 —\n * CSS 로 「최상위인 li」를 가리려면 `:not(li li)` 같은 것이 필요하고, 그건 읽는 사람이\n * 한 번 더 생각해야 하는 선택자다.\n /\n renderMenus(menus: Menu[], activeTopLevel?: Menu, activeMenu?: Menu, depth = 0): TemplateResult \| typeof nothing {\n if (menus.length == 0) {\n return nothing\n }\n\n return html`\n <ul>\n ${menus.map(menu => {\n var { type, name, active, path, label = name, icon, menus = [], description } = menu\n active = active && typeof active === 'function' ? active.call(menu, { path: this.path }) : false\n /\n * 건수는 값이거나 값을 내는 함수다. 함수의 반환은 화면에 그릴 수 있는 무엇이든 온다 —\n * 숫자이거나, 갱신될 때마다 바뀌는 Lit 디렉티브다. 그래서 따로 담는다.\n /\n const badge: unknown = typeof menu.badge === 'function' ? menu.badge.call(menu) : (menu.badge ?? false)\n\n return type == 'group'\n ? html`<li group-label>${label}</li>`\n : html`\n <!--\n popped — 지금 팝업을 연 항목이다. active(지금 페이지)와 다른 뜻이라\n 다른 표시를 준다. 접힌 레일에서 강조된 아이콘은 「지금 페이지」만 뜻하므로,\n 이 표시가 없으면 어느 항목의 팝업인지 알 수 없다.\n -->\n <!--\n active 와 current 는 뜻이 다르다.\n\n 최상위의 active 하위가 펼쳐져 있다 (여닫힘)\n 하위의 active 이것이 지금 페이지다\n current 이것이 지금 페이지다 — 어느 층이든\n\n active 하나로 두면 「펼쳐져 있다」와 「지금 페이지다」에 같은 강조가 걸려,\n 최상위와 그 안의 한 줄이 나란히 강조된다.\n -->\n <li\n ?active=${activeTopLevel ? menu === activeTopLevel : active}\n ?current=${!!activeMenu && menu === activeMenu}\n ?popped=${this.popped === menu}\n ?top=${depth === 0}\n .menu=${menu}\n menu\n >\n <a href=${path \|\| '#'} title=${ifDefined(this.hoverText(label, description))}>\n <md-icon filled>${icon \|\| 'fiber_manual_record'}</md-icon>\n <span>${label}</span>${badge !== false ? html`<div badge>${badge}</div>` : html``}\n ${menus.length > 0 ? html` <md-icon filled submenu-button></md-icon> ` : html``}\n </a>\n ${menus && this.renderMenus(menus \|\| [], activeMenu, activeMenu, depth + 1)}\n </li>\n `\n })}\n </ul>\n `\n }\n\n render() {\n const { menus, activeTopLevel, activeMenu } = this\n\n /\n * 레일이 아니어도 시스템 자리는 그린다.\n \n 한때 이것을 레일 가지 안에만 두었다. 그래서 *메뉴 감추기를 켜면 「관리」 한 줄이\n 사라졌다** — 그 설정이 레일을 끄기 때문이다.\n \n 레일을 감추기와 배타로 둔 것은 접기 때문이다. 이미 숨은 것을 접을 수는 없다. 그 판단은\n * 접기에만 맞고, 시스템 자리는 접기와 아무 상관이 없다. 관계없는 것을 한 플래그에 묶었다.\n /\n if (!this.rail) {\n return html`${this.renderMenus(menus \|\| [], activeTopLevel, activeMenu)} ${this.renderSystem()}\n ${this.renderPopped()}`\n }\n\n return html`\n <!--\n 접기 단추 — 맨 위에 둔다. 접힌 뒤 다시 펼치는 길이 같은 자리에 있어야 한다.\n -->\n <button\n class=\"railtoggle\"\n title=${i18next.t(this.collapsed ? 'text.expand-menu' : 'text.collapse-menu')}\n @click=${(e: MouseEvent) => this.toggleCollapsed(e)}\n >\n <md-icon>${this.collapsed ? 'menu' : 'menu_open'}</md-icon>\n <span>${i18next.t('text.collapse-menu')}</span>\n </button>\n ${this.renderMenus(menus \|\| [], activeTopLevel, activeMenu)} ${this.renderSystem()} ${this.renderPopped()}\n `\n }\n\n /\n 시스템 항목 — 바닥에 붙는다.\n \n 프로필 · 로그아웃 · 설정은 하루에 한 번 여는 것이고, 일하는 화면들과 같은 깊이에 있으면\n * 자주 여는 것을 밀어낸다. 그래서 메뉴 끝에 두고 사이를 빈 자리로 벌린다.\n \n 목록이 비면 이 자리도 없다 — 각 패키지가 권한이 없으면 등록 자체를 안 하므로, 비어 있는\n * 것은 「볼 것이 없다」는 뜻이다. 빈 묶음 이름만 남겨 두면 눌러도 아무 일이 없다.\n \n 펼친 상태에서도 팝업으로 연다. 이 항목들은 주소가 아니라 함수라, 그 자리에서 펼치면\n * 옆의 하위 메뉴들과 같은 모양이 되어 「눌러도 화면이 안 바뀌는 메뉴」로 읽힌다.\n /\n private renderSystem(): TemplateResult \| typeof nothing {\n if (!this.morendas.length) {\n return nothing\n }\n\n /\n * 보통 메뉴 줄과 같은 모양으로 그린다.\n \n 전에는 button.railitem 으로 따로 그렸고, 그 스타일이 레일에만 있어서 다른 모양에서는\n * 꾸밈이 없었다. ul > li > a 로 두면 레일과 기존 모양이 각자 가진 규칙이 그대로 붙는다 —\n * 여백 · 색 · hover · 접힘 · 화살표 · 팝업 표시까지.\n \n `li` 에 `menu` 를 달아도 `.menu` 속성은 주지 않는다. `renderMenus` 의 클릭 처리기가\n * `menuElement?.menu` 로 가르므로, 그것이 없으면 이 줄을 건드리지 않고 아래 `@click` 이 받는다.\n /\n / 팝업으로 열리는 모양에서는 팝업 상태로, 그 밖에서는 다른 최상위와 같은 상태로. /\n const open = childrenOpenAs(this.mode) === 'popup' ? this.popped === SYSTEM : this.activeTopLevel === SYSTEM\n\n return html`\n <div class=\"railspacer\"></div>\n <div group-label>${i18next.t('text.system')}</div>\n <ul>\n <li menu ?active=${open} ?popped=${childrenOpenAs(this.mode) === 'popup' && open} ?top=${true}>\n <a href=\"#\" title=${i18next.t('text.manage')} @click=${(e: MouseEvent) => this.openSystem(e)}>\n <md-icon filled>admin_panel_settings</md-icon>\n <span>${i18next.t('text.manage')}</span>\n <md-icon filled submenu-button></md-icon>\n </a>\n <!--\n 하위를 그 자리에* 둔다 — 다른 최상위와 같은 규칙이다.\n\n 펼친 상태에서 팝업으로 열면 이 줄만 다르게 굴고, 특히 메뉴를 감추는 모드(모바일에서\n 쓴다)에서는 화면 어딘가에 고정된 팝업이 뜰 자리가 없다.\n\n 접힌 레일에서는 이 목록이 감춰지고(56px 안에 들어가지 않는다) 팝업이 대신 뜬다 —\n 그것도 다른 최상위와 같다.\n -->\n <ul>\n ${this.morendas.map(\n morenda => html`<li>\n <a href=\"#\" @click=${(e: Event) => this.runMorenda(e, morenda)}>\n ${morenda.icon}<span>${morenda.name}</span>\n </a>\n </li>`\n )}\n </ul>\n </li>\n </ul>\n `\n }\n\n /** 시스템 항목은 주소가 아니라 함수다. 이동을 막고 부른다. /\n private runMorenda(e: Event, morenda: any) {\n e.preventDefault()\n this.popped = undefined\n morenda.action?.()\n }\n\n /\n 시스템 줄을 누른다 — 다른 최상위와 똑같은 두 갈래다.\n \n 한때 시스템만 자기 상태(`popped`)를 따로 썼다. 다른 최상위는 `activeTopLevel` 하나를 나눠\n * 쓰는데 시스템만 그 밖에 있었으니, 다른 묶음이 열려 있어도 시스템이 함께 열렸다. 한 번에\n * 하나만 열리는 규칙에서 이 줄만 빠져 있었다.\n \n 이제 같은 상태를 쓴다. 접힌 레일에서만 팝업이고, 그때는 다른 최상위도 팝업이다.\n /\n private openSystem(e: MouseEvent) {\n e.preventDefault()\n / 이 클릭이 document 로 올라가면 팝업이 바로 닫힌다. /\n e.stopPropagation()\n\n if (childrenOpenAs(this.mode) === 'popup') {\n const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()\n\n this._popLeft = this.getBoundingClientRect().right + 8\n this._popPrefer = rect.top\n this._popTop = rect.top\n this.popped = this.popped === SYSTEM ? undefined : SYSTEM\n return\n }\n\n / 그 자리에서 열린다 — 하나만 열리는 규칙을 함께 쓴다. /\n this.popped = undefined\n this.dispatchEvent(\n new CustomEvent('active-toplevel', {\n bubbles: true,\n detail: this.activeTopLevel === SYSTEM ? undefined : SYSTEM\n })\n )\n }\n\n /\n 접힌 상태에서 하위 메뉴를 팝업으로 낸다.\n \n 그 자리에서 열지 않는 이유는 56px 안에 들여쓴 목록이 들어가지 않기 때문이다. 접힌 레일에서\n * 하위를 열 길이 없으면 접는 순간 화면의 절반에 갈 수 없게 된다 — 접기가 기능이 아니라\n * 함정이 된다.\n /\n private renderPopped(): TemplateResult \| typeof nothing {\n const menu = this.popped\n\n if (!menu \|\| childrenOpenAs(this.mode) !== 'popup') {\n return nothing\n }\n\n const system = menu === SYSTEM\n\n return html`\n <!--\n 노브 — 팝업이 어느 항목에서 열렸는지 가리킨다.\n\n 팝업 안에 두면 안 보인다.* 팝업은 목록이 길 때 스크롤해야 해서 overflow-y: auto 인데,\n 그러면 브라우저가 overflow-x 도 auto 로 계산한다. 노브는 팝업의 왼쪽 선 밖으로 나가야\n 하므로 그 스크롤 박스에 잘린다. 그래서 형제로 두고 화면 좌표로 세운다.\n -->\n <div class=\"railknob\" hidden></div>\n <div class=\"railpop\" style=\"left:${this._popLeft}px; top:${this._popTop}px\">\n <div class=\"phead\">${system ? i18next.t('text.manage') : menu.label \|\| menu.name}</div>\n <!--\n 하위를 레일 안쪽과 똑같이 그린다.\n\n 한때 팝업 줄을 따로 만들었다(PopRow). 그래서 옮겨 적을 것을 세 번 빠뜨렸다 — 건수 ·\n 지금 페이지 · 그리고 처음에 이름과 아이콘. 빠뜨려도 오류가 나지 않아 화면을 보고서야\n 알았다.\n\n 같은 함수로 그리면 옮겨 적을 것이 없다. 앞으로 하위에 무엇을 더해도 팝업이 따라온다.\n -->\n ${system ? this.renderSystemRows() : this.renderMenus(menu.menus \|\| [], this.activeMenu, this.activeMenu, 1)}\n </div>\n `\n }\n\n /*\n 시스템 항목 줄들 — 이것만 따로 그린다.\n \n morenda 는 주소가 아니라 함수를 갖는다(`action`). 아이콘과 이름도 Lit 템플릿이라 `Menu` 모양이\n * 아니다. 억지로 `Menu` 로 바꿔 넘기면 그 변환이 또 옮겨 적는 자리가 된다.\n /\n private renderSystemRows(): TemplateResult {\n return html`\n <ul>\n ${this.morendas.map(\n morenda => html`<li>\n <a href=\"#\" @click=${(e: Event) => this.runMorenda(e, morenda)}>${morenda.icon}<span>${morenda.name}</span></a>\n </li>`\n )}\n </ul>\n `\n }\n\n /\n 팝업이 화면 안에 들어가게 세로 자리를 맞춘다.\n \n ── 왜 그린 뒤에 하나 ───────────────────────────────────────────────────\n * 높이를 알아야 맞출 수 있고, 높이는 그려 봐야 안다. 항목마다 하위 수가 다르다 — 「기준정보」는\n * 열여섯 줄이고 「배우기」는 한 줄이다.\n \n ── 규칙 ────────────────────────────────────────────────────────────────\n * 누른 항목의 윗선에서 시작하는 것이 바람이다. 그대로 두면 아래쪽 항목에서 팝업이 화면 밖으로\n * 나간다. 그래서 아래로 넘치는 만큼 위로 올린다. 그래도 안 들어가면 위 여백에 붙이고\n * 그때만 스크롤한다.\n \n 자리를 반응 상태로 두지 않고 style 에 바로 쓴다 — 값이 바뀔 때마다 다시 그리면 그 렌더에서\n * 또 재게 되고, 재는 값이 그리기에 달려 있으므로 서로 물린다.\n /\n private fitPopup() {\n const pop = this.renderRoot?.querySelector?.('.railpop') as HTMLElement \| null\n\n if (!pop) {\n return\n }\n\n const margin = OxMenuPortrait.POP_MARGIN\n const height = pop.offsetHeight\n const room = window.innerHeight - margin 2\n\n /* 화면보다 크면 위에 붙이고 스크롤한다. 그 아래 다시 재지 않는다. /\n const top = height >= room ? margin : Math.max(margin, Math.min(this._popPrefer, window.innerHeight - margin - height))\n\n if (Math.round(top) !== Math.round(this._popTop)) {\n this._popTop = top\n }\n\n pop.style.top = `${top}px`\n this.fitKnob(pop, top)\n }\n\n /\n 노브를 그 항목의 가운데 높이에 둔다.\n \n ── 범위를 벗어나면 감추지 않고 끝에 붙인다 ──────────────────────────────\n * 팝업이 위로 밀리는 것은 아래에 자리가 없어서이고, 그만큼만 밀린다. 그래서 그 항목은\n * 거의 항상 팝업의 세로 범위 안으로 들어온다. 벗어나는 것은 라운드 모서리에 걸치는 몇 px\n * 뿐이다. 그때 감추면 자리가 좁을 때만 표시가 사라진다 — 가장 필요한 순간이다.\n \n 그래서 모서리 안쪽으로 붙인다. 정확히 그 줄을 가리키지 못해도 「위쪽」·「아래쪽」은\n * 가리키고, 어느 항목인지는 그 항목의 popped 표시가 말한다.\n /\n private fitKnob(pop: HTMLElement, popTop: number) {\n const knob = this.renderRoot?.querySelector?.('.railknob') as HTMLElement \| null\n / 최상위 항목이거나 시스템 단추다 — 둘 다 popped 를 단다. /\n const item = this.renderRoot?.querySelector?.('[popped]') as HTMLElement \| null\n\n if (!knob) {\n return\n }\n\n if (!item) {\n knob.hidden = true\n return\n }\n\n const rect = item.getBoundingClientRect()\n const centre = rect.top + rect.height / 2 - popTop\n / 라운드 모서리에 걸치면 반쪽만 보인다. 그 안쪽까지만 간다. /\n const inset = 14\n const within = Math.max(inset, Math.min(centre, pop.offsetHeight - inset))\n / 정사각의 반. 가운데가 그 줄의 가운데에 오게 한다. /\n const half = knob.offsetHeight / 2 \|\| 5\n\n knob.hidden = false\n / 팝업의 왼쪽 선에 반쯤 물리게 — 선이 그 자리에서 끊긴 것처럼 보인다. /\n knob.style.left = `${this._popLeft - half}px`\n knob.style.top = `${popTop + within - half}px`\n }\n\n protected updated() {\n this.fitPopup()\n }\n\n /* 접기/펼치기는 `ox-menu-part` 가 한다 — 폭과 저장이 그쪽 것이다. 여기서는 뜻만 올린다. /\n private toggleCollapsed(e: MouseEvent) {\n e.stopPropagation()\n this.popped = undefined\n this.dispatchEvent(new CustomEvent('collapse-toggle', { bubbles: true, composed: true }))\n }\n\n firstUpdated() {\n this.renderRoot.addEventListener('click', (e: Event) => {\n const menuElement = (e.target as Element)!.closest('[menu]')\n\n /\n * 팝업 안을 눌렀으면 팝업을 닫는다 — 이동은 라우터가 한다(막지 않는다).\n \n 한때 팝업 컨테이너에 stopPropagation 을 걸어 두었다. 그러면 라우터까지 막혀 *페이지\n 전체가 다시 읽혔다.** 막지 않고 닫기만 한다.\n /\n if ((e.target as Element)!.closest('.railpop')) {\n this.popped = undefined\n }\n\n /\n * `active-toplevel` 은 최상위에서만 나간다.\n \n `closest('[menu]')` 는 가장 가까운 줄을 집으므로 하위를 누르면 하위가 잡힌다. 그것을\n * 그대로 올리면 「열린 묶음」이 하위로 바뀌어, 그 묶음이 닫힌 것처럼 된다. 지금까지는 하위\n * 클릭이 곧 이동이라 주소가 바뀌며 저절로 나았지만, 나을 이유가 없는 자리다.\n /\n //@ts-ignore\n if (menuElement?.menu && menuElement.hasAttribute('top')) {\n //@ts-ignore\n let menu = menuElement.menu\n\n /\n * 접힌 레일에서 하위가 있는 항목은 팝업으로 연다.\n \n 이 자리에서 갈라야 한다 — 아래로 흘려 보내면 `active-toplevel` 이 나가고, 그러면\n * 56px 안에서 아무것도 안 보이는 채로 「열렸다」가 된다. 팝업이 접힌 레일에서 하위로\n * 가는 유일한 길이다.\n /\n /\n * 하위가 있는 최상위를 눌렀다. 무엇을 할지는 모양이 정한다(§`menu-mode.ts`).\n \n 팝업으로 열리는 모양 팝업을 띄운다 (접힌 레일)\n * 이동하지 않는 모양 그 자리에서 펼치기만 한다 (서랍)\n * 나머지 이동하면서 펼친다 — 아래로 흘려 보낸다\n /\n if (menu.menus?.length && !topNavigates(this.mode) && childrenOpenAs(this.mode) === 'inline') {\n e.stopPropagation()\n e.preventDefault()\n\n this.dispatchEvent(\n new CustomEvent('active-toplevel', {\n bubbles: true,\n detail: this.activeTopLevel === menu ? undefined : menu\n })\n )\n\n return\n }\n\n if (menu.menus?.length && childrenOpenAs(this.mode) === 'popup') {\n e.stopPropagation()\n e.preventDefault()\n\n const rect = (menuElement as HTMLElement).getBoundingClientRect()\n\n /\n * 레일의 오른쪽을 기준으로 띄운다 — 누른 항목의 오른쪽이 아니다.\n \n 항목은 레일 안쪽 여백만큼 들어가 있어서, 항목 기준으로 재면 팝업이 레일 끝에 정확히\n * 붙는다(56px 레일에서 left 가 56 이 됐다). 붙으면 레일을 덮은 것처럼 보인다.\n \n 틈은 8px 이다. 16px 은 떨어져 떠 있는 것처럼 보였고, 0 은 레일에 얹힌 것처럼\n * 보였다. 8px 이 「레일에서 열린 다른 면」으로 읽히는 자리다.\n /\n this._popLeft = this.getBoundingClientRect().right + 8\n /\n * 누른 항목의 윗선에서 시작하는 것은 바람일 뿐이다. 실제 자리는 그린 뒤 높이를\n * 재서 정한다(`fitPopup`) — 여기서 고정하면 항목이 아래쪽일 때 팝업이 화면 밖으로\n * 나가거나 열여섯 줄짜리 목록에 스크롤이 생긴다.\n /\n this._popPrefer = rect.top\n this._popTop = rect.top\n this.popped = this.popped === menu ? undefined : menu\n\n return\n }\n\n /\n * ── 화살표가 토글이고, 글자가 이동이다 ────────────────────────────\n * 최상위 항목은 두 일을 한다 — 자기 화면으로 가고, 하위를 펼친다. 글자를 누르면 링크가\n * 주소를 바꾸므로 접기가 살아남을 수 없다 — 주소가 바뀌면 그 주소의 메뉴가 다시\n * 열린다(§`ox-menu-part` 의 `_closedByUser`).\n \n 그래서 접는 자리를 화살표로 옮긴다. 화살표는 이미 「펼침」을 그리고 있어서 사람이 그것을\n * 누르려 한다. 누르면 이동하지 않고 접기만 한다.\n /\n const onCaret = !!(e.target as Element)?.closest?.('[submenu-button]')\n\n if (!menu.path \|\| onCaret) {\n / protect to act move to href. /\n e.stopPropagation()\n e.preventDefault()\n }\n\n this.dispatchEvent(\n new CustomEvent('active-toplevel', {\n bubbles: true,\n detail: this.activeTopLevel === menu ? undefined : menu\n })\n )\n }\n\n / to respond even if current acting menu is selected /\n let href = (e.target as HTMLAnchorElement)!.href\n href && location.href === href && navigate(href + '#force', true)\n })\n\n / to hide scrollbar during transition */\n this.renderRoot.addEventListener('transitionstart', e => {\n ;(e.target as Element).removeAttribute('settled')\n })\n this.renderRoot.addEventListener('transitionend', e => {\n ;(e.target as Element).setAttribute('settled', '')\n })\n }\n}\n"]}
1	+ {"version":3,"file":"ox-menu-portrait.js","sourceRoot":"","sources":["../../src/ox-menu-portrait.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { html, LitElement, nothing, TemplateResult } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { asyncReplace } from 'lit/directives/async-replace.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { navigate, store } from '@operato/shell'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { Menu } from './types.js'\n\nimport { MenuPortraitStyles } from './menu-portrait-styles.js'\nimport { childrenOpenAs, menuMode, showsLabels, topNavigates } from './menu-mode.js'\n\n/** A stream of counts, as opposed to one value or a ready-made directive. /\nfunction isAsyncIterable(value: unknown): value is AsyncIterable<unknown> {\n return typeof (value as any)?.[Symbol.asyncIterator] === 'function'\n}\n\n/\n Nothing is waiting.\n \n Only a real zero counts. An empty string is a count that has not arrived, and the pill is hidden\n * for that case by `[badge]:empty` — treating it as zero here would draw a grey pill on load.\n /\nfunction isZero(value: unknown): boolean {\n return value === 0 \|\| value === '0'\n}\n\n/\n 시스템 항목을 담는 가짜 최상위.\n \n 팝업이 「어느 최상위에서 열렸나」를 하나의 값(`popped`)으로 들고 있어서, 시스템도 최상위인\n * 것처럼 다룬다. 그래야 노브와 자리 계산이 한 벌로 남는다.\n /\nconst SYSTEM = { name: 'ox-menu-system' } as Menu\n\n@customElement('ox-menu-portrait')\nexport class OxMenuPortrait extends localize(i18next)(LitElement) {\n static styles = [ScrollbarStyles, MenuPortraitStyles]\n\n @property({ type: Array }) menus?: Menu[]\n @property({ type: Object }) activeTopLevel?: Menu\n @property({ type: Object }) activeMenu?: Menu\n @property({ type: String }) path!: string\n\n /\n 레일 모드 — 접을 수 있고, 접히면 하위가 팝업으로 뜬다.\n \n 옵트인이다. 켜지 않은 앱은 지금과 한 글자도 다르지 않다. 모양이 함께 바뀌는 것은 취향이\n * 아니라 요건이다 — 기존 모양은 줄마다 폭 전체를 쓰는 밑줄이 있고 왼쪽 여백이 16px 이라 56px\n * 에서 무너진다(§`menu-rail-styles.ts`).\n /\n @property({ type: Boolean, reflect: true }) rail = false\n\n /\n 접힘 — 아이콘만.\n \n 주인은 이 컴포넌트가 아니다. 폭을 정하는 요소는 `ox-menu-part` 이고(그쪽에 `min-width`\n * 가 있다), 셸의 리사이즈 손잡이도 그 요소에 인라인 폭을 쓴다. 그래서 상태와 저장은 그쪽이\n * 갖고 여기는 받아서 그린다.\n /\n @property({ type: Boolean, reflect: true }) collapsed = false\n\n /\n 서랍인가 — 화면 위에 겹쳐 떴다가 닫히는 메뉴.\n \n 그때 최상위는 펼치기만 한다. 누르는 순간 서랍이 닫히면 그 묶음의 나머지 하위를 볼\n * 기회가 없다(§`ox-menu-part` 의 `drawer`).\n /\n @property({ type: Boolean, reflect: true }) drawer = false\n\n /\n 지금 어떤 모양으로 서 있나 — 세 플래그에서 하나로 모은다.\n \n 이 값과 그에 딸린 두 답(`하위를 어디에` · `최상위가 이동하나`)은 `menu-mode.ts` 에 있고\n * 시험으로 못박혀 있다. 여기서 그때그때 판단하지 않는다 — 그렇게 하다가 네 번 깨졌다.\n /\n private get mode() {\n return menuMode({ rail: this.rail, collapsed: this.collapsed, drawer: this.drawer })\n }\n\n /* 접힌 상태에서 팝업으로 열린 최상위 메뉴. 시스템 팝업이면 SYSTEM 이다. /\n @state() private popped?: Menu\n\n /\n 시스템 항목 — 프로필 · 로그아웃 · 설정처럼 앱이 아니라 프레임워크가 붙이는 것들.\n \n 하드코딩하지 않는다. 각 패키지가 부팅할 때 `ADD_MORENDA` 로 등록하고(권한이 없으면 등록\n * 자체를 안 한다), 우리는 그 목록을 그대로 그린다. 그래서 목록이 비면 이 자리도 없다.\n /\n /\n * private 을 두지 않는다 — 시험이 이 목록을 넣어 보고 「항목이 없으면 자리도 없다」를 확인한다.\n * 앱에서는 store 가 채운다(아래 connectedCallback).\n /\n @state() morendas: any[] = []\n\n private _unsubscribeStore?: () => void\n\n /* 팝업 자리 — 누른 항목의 오른쪽. 세로는 그린 뒤 재서 맞춘다(§`fitPopup`). /\n private _popLeft = 0\n private _popTop = 0\n /* 누른 항목의 윗선. 화면에 들어가면 이 자리를 쓴다. /\n private _popPrefer = 0\n\n /* 팝업이 화면 안에 들어가게 세로 자리를 맞춘다. 팝업 밖 여백. /\n private static readonly POP_MARGIN = 8\n\n /\n 팝업 밖을 누르면 닫는다.\n \n ── 팝업 안의 클릭을 막지 않는다 ────────────────────────────────────────\n * 한때 팝업 컨테이너에 stopPropagation 을 걸어 두었다. 팝업 안을 눌러도 이 처리기가 받아\n * 곧바로 닫히던 것을 막으려던 것인데, 그것이 셸의 라우터까지 막았다.\n \n 라우터는 document.body 에서 클릭을 받아 composedPath 로 A 를 찾고 preventDefault 한 뒤\n * 화면만 바꾼다(@operato/shell 의 installRouter). 클릭이 거기까지 못 가면 브라우저의 기본\n * 이동이 그대로 일어나 페이지 전체가 다시 읽혔다.\n \n 그래서 막지 않고, 여기서 「팝업 안이면 닫지 않는다」로 가른다. 줄을 누를 때 닫는 일은 그\n * 줄의 처리기가 한다.\n /\n private _onDocClick = (e: MouseEvent) => {\n if (!this.popped) {\n return\n }\n\n const pop = this.renderRoot?.querySelector?.('.railpop')\n\n if (pop && e.composedPath().includes(pop)) {\n return\n }\n\n this.popped = undefined\n }\n\n connectedCallback() {\n super.connectedCallback()\n document.addEventListener('click', this._onDocClick)\n\n /\n * morenda 는 각 패키지의 부팅에서 비동기로 등록된다. 한 번 읽고 끝내면 늦게 붙는 것이\n * 빠진다. 길이가 바뀔 때만 다시 그린다 — 이 목록은 늘어나기만 한다.\n /\n const read = () => ((store.getState() as any)?.more?.morendas \|\| []) as any[]\n\n this.morendas = read()\n this._unsubscribeStore = store.subscribe(() => {\n const next = read()\n if (next.length !== this.morendas.length) {\n this.morendas = next\n }\n })\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n document.removeEventListener('click', this._onDocClick)\n this._unsubscribeStore?.()\n }\n\n /\n 마우스를 올렸을 때 뜨는 글.\n \n ── 접혔을 때는 이름이 먼저다 ───────────────────────────────────────────\n * 접히면 아이콘만 남으므로 이름을 모른다. 그때는 이름을 윗줄에 얹고 설명을 아랫줄에 둔다.\n * 펼쳐져 있으면 이름은 이미 옆에 있으니 설명만 낸다.\n \n 줄바꿈으로 잇는다 — 대시로 이으면 설명 안의 대시와 겹쳐 「A — B — C」가 된다.\n \n 설명도 없고 이름도 안 보이는 경우가 아니면 아무것도 내지 않는다. 이름을 그대로 되풀이하는\n * 툴팁은 소음이다.\n /\n private hoverText(label?: unknown, description?: string) {\n const name = typeof label === 'string' ? label : undefined\n\n if (showsLabels(this.mode)) {\n return description \|\| undefined\n }\n\n return description && name ? `${name}\\n${description}` : description \|\| name\n }\n\n /\n @param depth 0 이면 최상위다. 하위도 `active` 를 달기 때문에 깊이를 값으로 넘긴다 —\n * CSS 로 「최상위인 li」를 가리려면 `:not(li li)` 같은 것이 필요하고, 그건 읽는 사람이\n * 한 번 더 생각해야 하는 선택자다.\n /\n /\n The count pill next to a menu label.\n \n Zero is drawn, and drawn quietly.\n \n The pill is the \"there is something here for you\" signal, and 작성 중 0 wore the same filled\n * accent as 할 일 9 — same colour rgb(12,122,76), same 28x17 box. Four of them in a column read\n * as four things waiting. Hiding zero is not the answer either: an empty slot cannot be told\n * apart from a count that has not arrived yet. So zero keeps its place and loses the signal.\n \n ── Why this method exists ────────────────────────────────────────────\n * Callers used to hand over a Lit directive — `badge: () => asyncReplace(counts(name))` — which\n * left this component with something it could only drop into a slot. It could not see the value,\n * so it could not decide how to draw it. The component that draws the pill has to own how the\n * pill looks, so it now takes the stream and wraps it here.\n \n A caller that still passes a ready-made directive keeps working, minus the quiet zero.\n /\n private renderBadge(badge: unknown) {\n if (badge === false \|\| badge === null \|\| badge === undefined) {\n return nothing\n }\n\n if (isAsyncIterable(badge)) {\n return asyncReplace(badge, value => html`<div badge ?zero=${isZero(value)}>${value}</div>`)\n }\n\n return html`<div badge ?zero=${isZero(badge)}>${badge}</div>`\n }\n\n renderMenus(menus: Menu[], activeTopLevel?: Menu, activeMenu?: Menu, depth = 0): TemplateResult \| typeof nothing {\n if (menus.length == 0) {\n return nothing\n }\n\n return html`\n <ul>\n ${menus.map(menu => {\n var { type, name, active, path, label = name, icon, menus = [], description } = menu\n active = active && typeof active === 'function' ? active.call(menu, { path: this.path }) : false\n /\n * 건수는 값이거나 값을 내는 함수다. 함수의 반환은 화면에 그릴 수 있는 무엇이든 온다 —\n * 숫자이거나, 갱신될 때마다 바뀌는 Lit 디렉티브다. 그래서 따로 담는다.\n /\n const badge: unknown = typeof menu.badge === 'function' ? menu.badge.call(menu) : (menu.badge ?? false)\n\n return type == 'group'\n ? html`<li group-label>${label}</li>`\n : html`\n <!--\n popped — 지금 팝업을 연 항목이다. active(지금 페이지)와 다른 뜻이라\n 다른 표시를 준다. 접힌 레일에서 강조된 아이콘은 「지금 페이지」만 뜻하므로,\n 이 표시가 없으면 어느 항목의 팝업인지 알 수 없다.\n -->\n <!--\n active 와 current 는 뜻이 다르다.\n\n 최상위의 active 하위가 펼쳐져 있다 (여닫힘)\n 하위의 active 이것이 지금 페이지다\n current 이것이 지금 페이지다 — 어느 층이든\n\n active 하나로 두면 「펼쳐져 있다」와 「지금 페이지다」에 같은 강조가 걸려,\n 최상위와 그 안의 한 줄이 나란히 강조된다.\n -->\n <!--\n branch — this item has children. The aggregate badge is a duplicate only while\n those children are on screen with their own counts; on a leaf nothing else\n carries the number, so hiding it there just loses it.\n -->\n <li\n ?active=${activeTopLevel ? menu === activeTopLevel : active}\n ?current=${!!activeMenu && menu === activeMenu}\n ?popped=${this.popped === menu}\n ?top=${depth === 0}\n ?branch=${menus.length > 0}\n .menu=${menu}\n menu\n >\n <a href=${path \|\| '#'} title=${ifDefined(this.hoverText(label, description))}>\n <md-icon filled>${icon \|\| 'fiber_manual_record'}</md-icon>\n <span>${label}</span>${this.renderBadge(badge)}\n ${menus.length > 0 ? html` <md-icon filled submenu-button></md-icon> ` : html``}\n </a>\n ${menus && this.renderMenus(menus \|\| [], activeMenu, activeMenu, depth + 1)}\n </li>\n `\n })}\n </ul>\n `\n }\n\n render() {\n const { menus, activeTopLevel, activeMenu } = this\n\n /\n * 레일이 아니어도 시스템 자리는 그린다.\n \n 한때 이것을 레일 가지 안에만 두었다. 그래서 *메뉴 감추기를 켜면 「관리」 한 줄이\n 사라졌다** — 그 설정이 레일을 끄기 때문이다.\n \n 레일을 감추기와 배타로 둔 것은 접기 때문이다. 이미 숨은 것을 접을 수는 없다. 그 판단은\n * 접기에만 맞고, 시스템 자리는 접기와 아무 상관이 없다. 관계없는 것을 한 플래그에 묶었다.\n /\n if (!this.rail) {\n return html`${this.renderMenus(menus \|\| [], activeTopLevel, activeMenu)} ${this.renderSystem()}\n ${this.renderPopped()}`\n }\n\n return html`\n <!--\n 접기 단추 — 맨 위에 둔다. 접힌 뒤 다시 펼치는 길이 같은 자리에 있어야 한다.\n -->\n <button\n class=\"railtoggle\"\n title=${i18next.t(this.collapsed ? 'text.expand-menu' : 'text.collapse-menu')}\n @click=${(e: MouseEvent) => this.toggleCollapsed(e)}\n >\n <md-icon>${this.collapsed ? 'menu' : 'menu_open'}</md-icon>\n <span>${i18next.t('text.collapse-menu')}</span>\n </button>\n ${this.renderMenus(menus \|\| [], activeTopLevel, activeMenu)} ${this.renderSystem()} ${this.renderPopped()}\n `\n }\n\n /\n 시스템 항목 — 바닥에 붙는다.\n \n 프로필 · 로그아웃 · 설정은 하루에 한 번 여는 것이고, 일하는 화면들과 같은 깊이에 있으면\n * 자주 여는 것을 밀어낸다. 그래서 메뉴 끝에 두고 사이를 빈 자리로 벌린다.\n \n 목록이 비면 이 자리도 없다 — 각 패키지가 권한이 없으면 등록 자체를 안 하므로, 비어 있는\n * 것은 「볼 것이 없다」는 뜻이다. 빈 묶음 이름만 남겨 두면 눌러도 아무 일이 없다.\n \n 펼친 상태에서도 팝업으로 연다. 이 항목들은 주소가 아니라 함수라, 그 자리에서 펼치면\n * 옆의 하위 메뉴들과 같은 모양이 되어 「눌러도 화면이 안 바뀌는 메뉴」로 읽힌다.\n /\n private renderSystem(): TemplateResult \| typeof nothing {\n if (!this.morendas.length) {\n return nothing\n }\n\n /\n * 보통 메뉴 줄과 같은 모양으로 그린다.\n \n 전에는 button.railitem 으로 따로 그렸고, 그 스타일이 레일에만 있어서 다른 모양에서는\n * 꾸밈이 없었다. ul > li > a 로 두면 레일과 기존 모양이 각자 가진 규칙이 그대로 붙는다 —\n * 여백 · 색 · hover · 접힘 · 화살표 · 팝업 표시까지.\n \n `li` 에 `menu` 를 달아도 `.menu` 속성은 주지 않는다. `renderMenus` 의 클릭 처리기가\n * `menuElement?.menu` 로 가르므로, 그것이 없으면 이 줄을 건드리지 않고 아래 `@click` 이 받는다.\n /\n / 팝업으로 열리는 모양에서는 팝업 상태로, 그 밖에서는 다른 최상위와 같은 상태로. /\n const open = childrenOpenAs(this.mode) === 'popup' ? this.popped === SYSTEM : this.activeTopLevel === SYSTEM\n\n return html`\n <div class=\"railspacer\"></div>\n <div group-label>${i18next.t('text.system')}</div>\n <ul>\n <li menu ?active=${open} ?popped=${childrenOpenAs(this.mode) === 'popup' && open} ?top=${true}>\n <a href=\"#\" title=${i18next.t('text.manage')} @click=${(e: MouseEvent) => this.openSystem(e)}>\n <md-icon filled>admin_panel_settings</md-icon>\n <span>${i18next.t('text.manage')}</span>\n <md-icon filled submenu-button></md-icon>\n </a>\n <!--\n 하위를 그 자리에* 둔다 — 다른 최상위와 같은 규칙이다.\n\n 펼친 상태에서 팝업으로 열면 이 줄만 다르게 굴고, 특히 메뉴를 감추는 모드(모바일에서\n 쓴다)에서는 화면 어딘가에 고정된 팝업이 뜰 자리가 없다.\n\n 접힌 레일에서는 이 목록이 감춰지고(56px 안에 들어가지 않는다) 팝업이 대신 뜬다 —\n 그것도 다른 최상위와 같다.\n -->\n <ul>\n ${this.morendas.map(\n morenda => html`<li>\n <a href=\"#\" @click=${(e: Event) => this.runMorenda(e, morenda)}>\n ${morenda.icon}<span>${morenda.name}</span>\n </a>\n </li>`\n )}\n </ul>\n </li>\n </ul>\n `\n }\n\n /** 시스템 항목은 주소가 아니라 함수다. 이동을 막고 부른다. /\n private runMorenda(e: Event, morenda: any) {\n e.preventDefault()\n this.popped = undefined\n morenda.action?.()\n }\n\n /\n 시스템 줄을 누른다 — 다른 최상위와 똑같은 두 갈래다.\n \n 한때 시스템만 자기 상태(`popped`)를 따로 썼다. 다른 최상위는 `activeTopLevel` 하나를 나눠\n * 쓰는데 시스템만 그 밖에 있었으니, 다른 묶음이 열려 있어도 시스템이 함께 열렸다. 한 번에\n * 하나만 열리는 규칙에서 이 줄만 빠져 있었다.\n \n 이제 같은 상태를 쓴다. 접힌 레일에서만 팝업이고, 그때는 다른 최상위도 팝업이다.\n /\n private openSystem(e: MouseEvent) {\n e.preventDefault()\n / 이 클릭이 document 로 올라가면 팝업이 바로 닫힌다. /\n e.stopPropagation()\n\n if (childrenOpenAs(this.mode) === 'popup') {\n const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()\n\n this._popLeft = this.getBoundingClientRect().right + 8\n this._popPrefer = rect.top\n this._popTop = rect.top\n this.popped = this.popped === SYSTEM ? undefined : SYSTEM\n return\n }\n\n / 그 자리에서 열린다 — 하나만 열리는 규칙을 함께 쓴다. /\n this.popped = undefined\n this.dispatchEvent(\n new CustomEvent('active-toplevel', {\n bubbles: true,\n detail: this.activeTopLevel === SYSTEM ? undefined : SYSTEM\n })\n )\n }\n\n /\n 접힌 상태에서 하위 메뉴를 팝업으로 낸다.\n \n 그 자리에서 열지 않는 이유는 56px 안에 들여쓴 목록이 들어가지 않기 때문이다. 접힌 레일에서\n * 하위를 열 길이 없으면 접는 순간 화면의 절반에 갈 수 없게 된다 — 접기가 기능이 아니라\n * 함정이 된다.\n /\n private renderPopped(): TemplateResult \| typeof nothing {\n const menu = this.popped\n\n if (!menu \|\| childrenOpenAs(this.mode) !== 'popup') {\n return nothing\n }\n\n const system = menu === SYSTEM\n\n return html`\n <!--\n 노브 — 팝업이 어느 항목에서 열렸는지 가리킨다.\n\n 팝업 안에 두면 안 보인다.* 팝업은 목록이 길 때 스크롤해야 해서 overflow-y: auto 인데,\n 그러면 브라우저가 overflow-x 도 auto 로 계산한다. 노브는 팝업의 왼쪽 선 밖으로 나가야\n 하므로 그 스크롤 박스에 잘린다. 그래서 형제로 두고 화면 좌표로 세운다.\n -->\n <div class=\"railknob\" hidden></div>\n <div class=\"railpop\" style=\"left:${this._popLeft}px; top:${this._popTop}px\">\n <div class=\"phead\">${system ? i18next.t('text.manage') : menu.label \|\| menu.name}</div>\n <!--\n 하위를 레일 안쪽과 똑같이 그린다.\n\n 한때 팝업 줄을 따로 만들었다(PopRow). 그래서 옮겨 적을 것을 세 번 빠뜨렸다 — 건수 ·\n 지금 페이지 · 그리고 처음에 이름과 아이콘. 빠뜨려도 오류가 나지 않아 화면을 보고서야\n 알았다.\n\n 같은 함수로 그리면 옮겨 적을 것이 없다. 앞으로 하위에 무엇을 더해도 팝업이 따라온다.\n -->\n ${system ? this.renderSystemRows() : this.renderMenus(menu.menus \|\| [], this.activeMenu, this.activeMenu, 1)}\n </div>\n `\n }\n\n /*\n 시스템 항목 줄들 — 이것만 따로 그린다.\n \n morenda 는 주소가 아니라 함수를 갖는다(`action`). 아이콘과 이름도 Lit 템플릿이라 `Menu` 모양이\n * 아니다. 억지로 `Menu` 로 바꿔 넘기면 그 변환이 또 옮겨 적는 자리가 된다.\n /\n private renderSystemRows(): TemplateResult {\n return html`\n <ul>\n ${this.morendas.map(\n morenda => html`<li>\n <a href=\"#\" @click=${(e: Event) => this.runMorenda(e, morenda)}>${morenda.icon}<span>${morenda.name}</span></a>\n </li>`\n )}\n </ul>\n `\n }\n\n /\n 팝업이 화면 안에 들어가게 세로 자리를 맞춘다.\n \n ── 왜 그린 뒤에 하나 ───────────────────────────────────────────────────\n * 높이를 알아야 맞출 수 있고, 높이는 그려 봐야 안다. 항목마다 하위 수가 다르다 — 「기준정보」는\n * 열여섯 줄이고 「배우기」는 한 줄이다.\n \n ── 규칙 ────────────────────────────────────────────────────────────────\n * 누른 항목의 윗선에서 시작하는 것이 바람이다. 그대로 두면 아래쪽 항목에서 팝업이 화면 밖으로\n * 나간다. 그래서 아래로 넘치는 만큼 위로 올린다. 그래도 안 들어가면 위 여백에 붙이고\n * 그때만 스크롤한다.\n \n 자리를 반응 상태로 두지 않고 style 에 바로 쓴다 — 값이 바뀔 때마다 다시 그리면 그 렌더에서\n * 또 재게 되고, 재는 값이 그리기에 달려 있으므로 서로 물린다.\n /\n private fitPopup() {\n const pop = this.renderRoot?.querySelector?.('.railpop') as HTMLElement \| null\n\n if (!pop) {\n return\n }\n\n const margin = OxMenuPortrait.POP_MARGIN\n const height = pop.offsetHeight\n const room = window.innerHeight - margin 2\n\n /* 화면보다 크면 위에 붙이고 스크롤한다. 그 아래 다시 재지 않는다. /\n const top = height >= room ? margin : Math.max(margin, Math.min(this._popPrefer, window.innerHeight - margin - height))\n\n if (Math.round(top) !== Math.round(this._popTop)) {\n this._popTop = top\n }\n\n pop.style.top = `${top}px`\n this.fitKnob(pop, top)\n }\n\n /\n 노브를 그 항목의 가운데 높이에 둔다.\n \n ── 범위를 벗어나면 감추지 않고 끝에 붙인다 ──────────────────────────────\n * 팝업이 위로 밀리는 것은 아래에 자리가 없어서이고, 그만큼만 밀린다. 그래서 그 항목은\n * 거의 항상 팝업의 세로 범위 안으로 들어온다. 벗어나는 것은 라운드 모서리에 걸치는 몇 px\n * 뿐이다. 그때 감추면 자리가 좁을 때만 표시가 사라진다 — 가장 필요한 순간이다.\n \n 그래서 모서리 안쪽으로 붙인다. 정확히 그 줄을 가리키지 못해도 「위쪽」·「아래쪽」은\n * 가리키고, 어느 항목인지는 그 항목의 popped 표시가 말한다.\n /\n private fitKnob(pop: HTMLElement, popTop: number) {\n const knob = this.renderRoot?.querySelector?.('.railknob') as HTMLElement \| null\n / 최상위 항목이거나 시스템 단추다 — 둘 다 popped 를 단다. /\n const item = this.renderRoot?.querySelector?.('[popped]') as HTMLElement \| null\n\n if (!knob) {\n return\n }\n\n if (!item) {\n knob.hidden = true\n return\n }\n\n const rect = item.getBoundingClientRect()\n const centre = rect.top + rect.height / 2 - popTop\n / 라운드 모서리에 걸치면 반쪽만 보인다. 그 안쪽까지만 간다. /\n const inset = 14\n const within = Math.max(inset, Math.min(centre, pop.offsetHeight - inset))\n / 정사각의 반. 가운데가 그 줄의 가운데에 오게 한다. /\n const half = knob.offsetHeight / 2 \|\| 5\n\n knob.hidden = false\n / 팝업의 왼쪽 선에 반쯤 물리게 — 선이 그 자리에서 끊긴 것처럼 보인다. /\n knob.style.left = `${this._popLeft - half}px`\n knob.style.top = `${popTop + within - half}px`\n }\n\n protected updated() {\n this.fitPopup()\n }\n\n /* 접기/펼치기는 `ox-menu-part` 가 한다 — 폭과 저장이 그쪽 것이다. 여기서는 뜻만 올린다. /\n private toggleCollapsed(e: MouseEvent) {\n e.stopPropagation()\n this.popped = undefined\n this.dispatchEvent(new CustomEvent('collapse-toggle', { bubbles: true, composed: true }))\n }\n\n firstUpdated() {\n this.renderRoot.addEventListener('click', (e: Event) => {\n const menuElement = (e.target as Element)!.closest('[menu]')\n\n /\n * 팝업 안을 눌렀으면 팝업을 닫는다 — 이동은 라우터가 한다(막지 않는다).\n \n 한때 팝업 컨테이너에 stopPropagation 을 걸어 두었다. 그러면 라우터까지 막혀 *페이지\n 전체가 다시 읽혔다.** 막지 않고 닫기만 한다.\n /\n if ((e.target as Element)!.closest('.railpop')) {\n this.popped = undefined\n }\n\n /\n * `active-toplevel` 은 최상위에서만 나간다.\n \n `closest('[menu]')` 는 가장 가까운 줄을 집으므로 하위를 누르면 하위가 잡힌다. 그것을\n * 그대로 올리면 「열린 묶음」이 하위로 바뀌어, 그 묶음이 닫힌 것처럼 된다. 지금까지는 하위\n * 클릭이 곧 이동이라 주소가 바뀌며 저절로 나았지만, 나을 이유가 없는 자리다.\n /\n //@ts-ignore\n if (menuElement?.menu && menuElement.hasAttribute('top')) {\n //@ts-ignore\n let menu = menuElement.menu\n\n /\n * 접힌 레일에서 하위가 있는 항목은 팝업으로 연다.\n \n 이 자리에서 갈라야 한다 — 아래로 흘려 보내면 `active-toplevel` 이 나가고, 그러면\n * 56px 안에서 아무것도 안 보이는 채로 「열렸다」가 된다. 팝업이 접힌 레일에서 하위로\n * 가는 유일한 길이다.\n /\n /\n * 하위가 있는 최상위를 눌렀다. 무엇을 할지는 모양이 정한다(§`menu-mode.ts`).\n \n 팝업으로 열리는 모양 팝업을 띄운다 (접힌 레일)\n * 이동하지 않는 모양 그 자리에서 펼치기만 한다 (서랍)\n * 나머지 이동하면서 펼친다 — 아래로 흘려 보낸다\n /\n if (menu.menus?.length && !topNavigates(this.mode) && childrenOpenAs(this.mode) === 'inline') {\n e.stopPropagation()\n e.preventDefault()\n\n this.dispatchEvent(\n new CustomEvent('active-toplevel', {\n bubbles: true,\n detail: this.activeTopLevel === menu ? undefined : menu\n })\n )\n\n return\n }\n\n if (menu.menus?.length && childrenOpenAs(this.mode) === 'popup') {\n e.stopPropagation()\n e.preventDefault()\n\n const rect = (menuElement as HTMLElement).getBoundingClientRect()\n\n /\n * 레일의 오른쪽을 기준으로 띄운다 — 누른 항목의 오른쪽이 아니다.\n \n 항목은 레일 안쪽 여백만큼 들어가 있어서, 항목 기준으로 재면 팝업이 레일 끝에 정확히\n * 붙는다(56px 레일에서 left 가 56 이 됐다). 붙으면 레일을 덮은 것처럼 보인다.\n \n 틈은 8px 이다. 16px 은 떨어져 떠 있는 것처럼 보였고, 0 은 레일에 얹힌 것처럼\n * 보였다. 8px 이 「레일에서 열린 다른 면」으로 읽히는 자리다.\n /\n this._popLeft = this.getBoundingClientRect().right + 8\n /\n * 누른 항목의 윗선에서 시작하는 것은 바람일 뿐이다. 실제 자리는 그린 뒤 높이를\n * 재서 정한다(`fitPopup`) — 여기서 고정하면 항목이 아래쪽일 때 팝업이 화면 밖으로\n * 나가거나 열여섯 줄짜리 목록에 스크롤이 생긴다.\n /\n this._popPrefer = rect.top\n this._popTop = rect.top\n this.popped = this.popped === menu ? undefined : menu\n\n return\n }\n\n /\n * ── 화살표가 토글이고, 글자가 이동이다 ────────────────────────────\n * 최상위 항목은 두 일을 한다 — 자기 화면으로 가고, 하위를 펼친다. 글자를 누르면 링크가\n * 주소를 바꾸므로 접기가 살아남을 수 없다 — 주소가 바뀌면 그 주소의 메뉴가 다시\n * 열린다(§`ox-menu-part` 의 `_closedByUser`).\n \n 그래서 접는 자리를 화살표로 옮긴다. 화살표는 이미 「펼침」을 그리고 있어서 사람이 그것을\n * 누르려 한다. 누르면 이동하지 않고 접기만 한다.\n /\n const onCaret = !!(e.target as Element)?.closest?.('[submenu-button]')\n\n if (!menu.path \|\| onCaret) {\n / protect to act move to href. /\n e.stopPropagation()\n e.preventDefault()\n }\n\n this.dispatchEvent(\n new CustomEvent('active-toplevel', {\n bubbles: true,\n detail: this.activeTopLevel === menu ? undefined : menu\n })\n )\n }\n\n / to respond even if current acting menu is selected /\n let href = (e.target as HTMLAnchorElement)!.href\n href && location.href === href && navigate(href + '#force', true)\n })\n\n / to hide scrollbar during transition */\n this.renderRoot.addEventListener('transitionstart', e => {\n ;(e.target as Element).removeAttribute('settled')\n })\n this.renderRoot.addEventListener('transitionend', e => {\n ;(e.target as Element).setAttribute('settled', '')\n })\n }\n}\n"]}

package/dist/test/ox-menu-portrait.test.js CHANGED Viewed

@@ -27,7 +27,7 @@ const 메뉴 = [
         menus: [{ name: 'job-order', label: '작업지시', path: 'job-order-list' }]
     },
     /* 하위가 없는 최상위 — 「묶음이냐 끝이냐」를 가리는 시험에 쓴다. */
-    { name: 'maturity', label: '성숙도', path: 'maturity-page', icon: 'insights' }
+    { name: 'maturity', label: '성숙도', path: 'maturity-page', icon: 'insights', badge: () => 5 }
 ];
 async function 세운다(props = {}) {
     const el = (await fixture(html `<ox-menu-portrait></ox-menu-portrait>`));
@@ -288,6 +288,18 @@ describe('ox-menu-portrait', () => {
             const el = await 세운다({ activeTopLevel: undefined });
             expect(합계배지(el)).to.not.equal('none');
         });
+        it('a leaf keeps its badge while it is the current page — nothing below repeats the number', async () => {
+            /*
+             * The hide rule reads "the children below already show these counts". A top-level item with
+             * no children has no below, so the same rule simply deleted the number the moment a person
+             * selected that page. Reported from the screen: 할 일 lost its 6.
+             */
+            const el = await 세운다({ activeTopLevel: 메뉴[2], activeMenu: 메뉴[2] });
+            const leaf = 최상위(el, 'maturity');
+            expect(leaf.hasAttribute('active'), 'the leaf has to be the active one for this to mean anything').to.be.true;
+            expect(leaf.hasAttribute('branch'), 'a leaf must not be marked as a branch').to.be.false;
+            expect(getComputedStyle(leaf.querySelector(':scope > a > [badge]')).display).to.not.equal('none');
+        });
         it('접혔으면 보인다 — 그때는 합계가 유일한 신호다', async () => {
             const el = await 세운다({ rail: true, collapsed: true });
             expect(합계배지(el)).to.not.equal('none');