@shibui-ui/ui 1.19.8 → 1.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- {"version":3,"file":"index357.js","sources":["../src/components/molecules/header/templates/header-app-bar.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { LibHeader } from '../lib-header.component';\nimport type { HeaderAction } from '../lib-header.types';\nimport { renderBreadcrumbs, svgSearch, svgBell } from './header-shared.html';\n\n/**\n * Template variante app-bar:\n * logomark | breadcrumbs | search | spacer | actions | notif | avatar\n * No usa el drawer móvil — sus acciones son contextuales.\n * En móvil: breadcrumbs se truncan, search colapsa a icono.\n */\nexport function renderAppBar(ctx: LibHeader): TemplateResult {\n return html`\n <div class=\"hdr\">\n\n <!-- Logo mark (sin texto) -->\n <div class=\"hdr-logo-mark\" style=\"flex-shrink:0;\"></div>\n\n <!-- Breadcrumbs -->\n ${ctx.breadcrumbs.length ? renderBreadcrumbs(ctx.breadcrumbs) : nothing}\n\n <!-- Divider oculto en móvil -->\n <div class=\"hdr-divider hdr-divider--desktop\"></div>\n\n <!-- Search full en desktop, icono en móvil -->\n ${ctx.showSearch ? html`\n <div class=\"hdr-search\">\n ${svgSearch}\n <input\n type=\"search\"\n placeholder=\"${ctx.searchPlaceholder}\"\n @input=\"${(e: Event): void =>\n ctx._onSearch((e.target as HTMLInputElement).value)}\"\n />\n <span class=\"hdr-search-kbd\">⌘K</span>\n </div>\n ` : nothing}\n\n <div class=\"hdr-spacer\"></div>\n\n <!-- Context actions ocultos en móvil -->\n ${ctx.actions.length ? html`\n <div class=\"hdr-actions hdr-actions--desktop\">\n ${ctx.actions.map((action: HeaderAction) => html`\n <a href=\"${action.href || '#'}\"\n class=\"hdr-action ${action.variant === 'outline'\n ? 'hdr-action--outline' : 'hdr-action--kaki'}\"\n style=\"height:32px;font-size:8px;\"\n >${action.label}</a>\n `)}\n </div>\n ` : nothing}\n\n <!-- Status (compact mode) — oculto en móvil -->\n ${ctx.compact ? html`\n <div class=\"hdr-status hdr-status--desktop\">\n <div class=\"hdr-status-dot\"></div>\n <span class=\"hdr-status-text\">Online · 42ms</span>\n </div>\n ` : nothing}\n\n <div class=\"hdr-divider\"></div>\n\n <!-- Notificaciones -->\n <div class=\"hdr-notif\">\n ${svgBell}\n ${ctx.notifications ? html`<span class=\"hdr-notif-dot\"></span>` : nothing}\n </div>\n\n <!-- Avatar -->\n <div class=\"hdr-avatar\">${ctx.userInitials || ctx.userName.slice(0, 1)}</div>\n\n </div>`;\n}"],"names":[],"mappings":";;AAWO,SAAS,aAAa,KAAgC;AAC3D,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOD,IAAI,YAAY,SAAS,kBAAkB,IAAI,WAAW,IAAI,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMrE,IAAI,aAAa;AAAA;AAAA,YAEb,SAAS;AAAA;AAAA;AAAA,2BAGM,IAAI,iBAAiB;AAAA,sBAC1B,CAAC,MACT,IAAI,UAAW,EAAE,OAA4B,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA,UAIvD,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,QAKT,IAAI,QAAQ,SAAS;AAAA;AAAA,YAEjB,IAAI,QAAQ,IAAI,CAAC,WAAyB;AAAA,uBAC/B,OAAO,QAAQ,GAAG;AAAA,kCACP,OAAO,YAAY,YACnC,wBAAwB,kBAAkB;AAAA;AAAA,eAE7C,OAAO,KAAK;AAAA,WAChB,CAAC;AAAA;AAAA,UAEF,OAAO;AAAA;AAAA;AAAA,QAGT,IAAI,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,UAKZ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMP,OAAO;AAAA,UACP,IAAI,gBAAgB,4CAA4C,OAAO;AAAA;AAAA;AAAA;AAAA,gCAIjD,IAAI,gBAAgB,IAAI,SAAS,MAAM,GAAG,CAAC,CAAC;AAAA;AAAA;AAG5E;"}
1
+ {"version":3,"file":"index357.js","sources":["../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/class-map.js"],"sourcesContent":["import{noChange as t}from\"../lit-html.js\";import{directive as s,Directive as i,PartType as r}from\"../directive.js\";\n/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const e=s(class extends i{constructor(t){if(super(t),t.type!==r.ATTRIBUTE||\"class\"!==t.name||t.strings?.length>2)throw Error(\"`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.\")}render(t){return\" \"+Object.keys(t).filter(s=>t[s]).join(\" \")+\" \"}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(\" \").split(/\\s/).filter(t=>\"\"!==t)));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)))}return t}});export{e as classMap};\n//# sourceMappingURL=class-map.js.map\n"],"names":["s","t","r","i"],"mappings":";;AACA;AAAA;AAAA;AAAA;AAAA;AAIQ,MAAC,IAAEA,IAAE,cAAc,EAAC;AAAA,EAAC,YAAYC,KAAE;;AAAC,QAAG,MAAMA,GAAC,GAAEA,IAAE,SAAOC,EAAE,aAAW,YAAUD,IAAE,UAAMA,SAAE,YAAFA,mBAAW,UAAO,EAAE,OAAM,MAAM,oGAAoG;AAAA,EAAC;AAAA,EAAC,OAAOA,IAAE;AAAC,WAAM,MAAI,OAAO,KAAKA,EAAC,EAAE,OAAO,OAAGA,GAAE,CAAC,CAAC,EAAE,KAAK,GAAG,IAAE;AAAA,EAAG;AAAA,EAAC,OAAO,GAAE,CAACE,EAAC,GAAE;;AAAC,QAAG,WAAS,KAAK,IAAG;AAAC,WAAK,KAAG,oBAAI,OAAI,WAAS,EAAE,YAAU,KAAK,KAAG,IAAI,IAAI,EAAE,QAAQ,KAAK,GAAG,EAAE,MAAM,IAAI,EAAE,OAAO,CAAAF,OAAG,OAAKA,EAAC,CAAC;AAAG,iBAAUA,MAAKE,GAAE,CAAAA,GAAEF,EAAC,KAAG,GAAC,UAAK,OAAL,mBAAS,IAAIA,QAAI,KAAK,GAAG,IAAIA,EAAC;AAAE,aAAO,KAAK,OAAOE,EAAC;AAAA,IAAC;AAAC,UAAM,IAAE,EAAE,QAAQ;AAAU,eAAUF,MAAK,KAAK,GAAG,CAAAA,MAAKE,OAAI,EAAE,OAAOF,EAAC,GAAE,KAAK,GAAG,OAAOA,EAAC;AAAG,eAAUA,MAAKE,IAAE;AAAC,YAAMH,KAAE,CAAC,CAACG,GAAEF,EAAC;AAAE,MAAAD,OAAI,KAAK,GAAG,IAAIC,EAAC,OAAG,UAAK,OAAL,mBAAS,IAAIA,SAAKD,MAAG,EAAE,IAAIC,EAAC,GAAE,KAAK,GAAG,IAAIA,EAAC,MAAI,EAAE,OAAOA,EAAC,GAAE,KAAK,GAAG,OAAOA,EAAC;AAAA,IAAG;AAAC,WAAOA;AAAAA,EAAC;AAAC,CAAC;","x_google_ignoreList":[0]}
package/dist/index360.js CHANGED
@@ -1,38 +1,149 @@
1
- import { _$LH as j } from "./index358.js";
2
- /**
3
- * @license
4
- * Copyright 2020 Google LLC
5
- * SPDX-License-Identifier: BSD-3-Clause
6
- */
7
- const { I: t } = j, i = (o) => o, s = () => document.createComment(""), v = (o, n, e) => {
1
+ import { html, nothing } from "lit";
2
+ const svgChevron = html`
3
+ <svg class="hdr-link-chevron" width="9" height="6" viewBox="0 0 10 6"
4
+ fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
5
+ <polyline points="1,1 5,5 9,1"/>
6
+ </svg>`;
7
+ const svgSearch = html`
8
+ <svg width="12" height="12" viewBox="0 0 16 16" fill="none"
9
+ stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
10
+ <circle cx="7" cy="7" r="5"/><line x1="11" y1="11" x2="14" y2="14"/>
11
+ </svg>`;
12
+ const svgBell = html`
13
+ <svg width="15" height="15" viewBox="0 0 16 16" fill="none"
14
+ stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
15
+ <path d="M8 1a5 5 0 00-5 5v2l-1 2v1h12v-1l-1-2V6A5 5 0 008 1z"/>
16
+ <path d="M6 13a2 2 0 004 0"/>
17
+ </svg>`;
18
+ function renderLogoMark(ctx) {
19
+ if (ctx.variant === "kintsugi") {
20
+ return html`
21
+ <div class="hdr-logo-mark">
22
+ <span class="hdr-logo-mark-text">${ctx.logoMark}</span>
23
+ </div>`;
24
+ }
25
+ return html`<div class="hdr-logo-mark">${ctx.logoMark}</div>`;
26
+ }
27
+ function renderLogo(ctx) {
28
+ if (ctx.variant === "glitch") {
29
+ return html`
30
+ <a href="${ctx.logoHref}" class="hdr-logo-glitch">
31
+ ⌗ ${ctx.brandName.toUpperCase()}
32
+ <span class="hdr-logo-glitch-badge">SYS</span>
33
+ </a>`;
34
+ }
35
+ if (ctx.variant === "minimal") {
36
+ return html`
37
+ <a href="${ctx.logoHref}" class="hdr-logo">
38
+ <span class="hdr-brand-name">${ctx.logoMark}</span>
39
+ </a>`;
40
+ }
41
+ return html`
42
+ <a href="${ctx.logoHref}" class="hdr-logo">
43
+ ${renderLogoMark(ctx)}
44
+ <div>
45
+ <div class="hdr-brand-name">${ctx.brandName}
46
+ ${ctx.variant === "kintsugi" ? html` <em style="font-style:italic;color:var(--color-kaki-400);">金</em>` : nothing}
47
+ </div>
48
+ ${ctx.brandTagline && ctx.variant === "shrink" ? html`<div class="hdr-tagline">${ctx.brandTagline}</div>` : nothing}
49
+ </div>
50
+ ${ctx.version && ctx.variant === "dark" ? html`<span class="hdr-version">${ctx.version}</span>` : nothing}
51
+ </a>`;
52
+ }
53
+ function renderDropdown(_ctx, link) {
8
54
  var _a;
9
- const l = o._$AA.parentNode, d = void 0 === n ? o._$AB : n._$AA;
10
- if (void 0 === e) {
11
- const i2 = l.insertBefore(s(), d), n2 = l.insertBefore(s(), d);
12
- e = new t(i2, n2, o, o.options);
13
- } else {
14
- const t2 = e._$AB.nextSibling, n2 = e._$AM, c = n2 !== o;
15
- if (c) {
16
- let t3;
17
- (_a = e._$AQ) == null ? void 0 : _a.call(e, o), e._$AM = o, void 0 !== e._$AP && (t3 = o._$AU) !== n2._$AU && e._$AP(t3);
55
+ return html`
56
+ <div class="hdr-dd">
57
+ <span class="hdr-link">
58
+ ${link.label}
59
+ ${svgChevron}
60
+ </span>
61
+ <div class="hdr-dd-menu">
62
+ ${(_a = link.dropdown) == null ? void 0 : _a.map((item) => html`
63
+ <a href="${item.href || "#"}"
64
+ class="hdr-dd-item ${item.divider ? "hdr-dd-item--divider" : ""}">
65
+ ${item.label}
66
+ </a>
67
+ `)}
68
+ </div>
69
+ </div>`;
70
+ }
71
+ function renderLinks(ctx, links) {
72
+ return html`
73
+ ${links.map(
74
+ (link) => {
75
+ var _a;
76
+ return ((_a = link.dropdown) == null ? void 0 : _a.length) ? renderDropdown(ctx, link) : html`
77
+ <a href="${link.href || "#"}"
78
+ class="hdr-link ${link.active ? "is-active" : ""}"
79
+ @click="${(e) => {
80
+ e.preventDefault();
81
+ ctx._onLinkClick(link.id);
82
+ }}"
83
+ >
84
+ ${ctx.variant === "glitch" ? html`<span>&gt;</span>` : nothing}
85
+ ${link.label}
86
+ </a>`;
18
87
  }
19
- if (t2 !== d || c) {
20
- let o2 = e._$AA;
21
- for (; o2 !== t2; ) {
22
- const t3 = i(o2).nextSibling;
23
- i(l).insertBefore(o2, d), o2 = t3;
24
- }
25
- }
26
- }
27
- return e;
28
- }, u = (o, t2, i2 = o) => (o._$AI(t2, i2), o), m = {}, p = (o, t2 = m) => o._$AH = t2, M = (o) => o._$AH, h = (o) => {
29
- o._$AR(), o._$AA.remove();
88
+ )}`;
89
+ }
90
+ const ACTION_VARIANT_MAP = {
91
+ classic: "kaki",
92
+ centered: "outline",
93
+ dark: "kaki",
94
+ transparent: "kaki",
95
+ kintsugi: "kintsugi",
96
+ glitch: "glitch",
97
+ mega: "kaki",
98
+ shrink: "kaki",
99
+ minimal: ""
30
100
  };
101
+ function renderActions(ctx) {
102
+ return html`
103
+ <div class="hdr-actions">
104
+ ${ctx.loginLabel ? html`
105
+ <a href="${ctx.loginHref || "#"}" class="hdr-login">${ctx.loginLabel}</a>
106
+ ` : nothing}
107
+
108
+ ${ctx.actions.map((action) => {
109
+ const cls = action.variant ? `hdr-action--${action.variant}` : `hdr-action--${ACTION_VARIANT_MAP[ctx.variant] || "kaki"}`;
110
+ return html`
111
+ <a href="${action.href || "#"}"
112
+ class="hdr-action ${cls}"
113
+ @click="${(e) => {
114
+ e.preventDefault();
115
+ ctx._onActionClick(action);
116
+ }}"
117
+ >${action.label}</a>`;
118
+ })}
119
+
120
+ ${ctx.variant === "glitch" ? html`
121
+ <div class="hdr-online">● online</div>
122
+ ` : nothing}
123
+
124
+ ${ctx.variant === "minimal" && ctx.contactLabel ? html`
125
+ <a href="${ctx.contactHref || "#"}" class="hdr-contact">${ctx.contactLabel} →</a>
126
+ ` : nothing}
127
+ </div>`;
128
+ }
129
+ function renderBreadcrumbs(items) {
130
+ return html`
131
+ <nav class="hdr-breadcrumbs" aria-label="breadcrumb">
132
+ ${items.map((item, i) => html`
133
+ ${i > 0 ? html`<span class="hdr-breadcrumb-sep">/</span>` : nothing}
134
+ ${i < items.length - 1 ? html`<a href="${item.href || "#"}" class="hdr-breadcrumb-link">${item.label}</a>` : html`<span class="hdr-breadcrumb-current">${item.label}</span>`}
135
+ `)}
136
+ </nav>`;
137
+ }
31
138
  export {
32
- M as getCommittedValue,
33
- v as insertPart,
34
- h as removePart,
35
- u as setChildPartValue,
36
- p as setCommittedValue
139
+ renderActions,
140
+ renderBreadcrumbs,
141
+ renderDropdown,
142
+ renderLinks,
143
+ renderLogo,
144
+ renderLogoMark,
145
+ svgBell,
146
+ svgChevron,
147
+ svgSearch
37
148
  };
38
149
  //# sourceMappingURL=index360.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index360.js","sources":["../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directive-helpers.js"],"sourcesContent":["import{_$LH as o}from\"./lit-html.js\";\n/**\n * @license\n * Copyright 2020 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const{I:t}=o,i=o=>o,n=o=>null===o||\"object\"!=typeof o&&\"function\"!=typeof o,e={HTML:1,SVG:2,MATHML:3},l=(o,t)=>void 0===t?void 0!==o?._$litType$:o?._$litType$===t,d=o=>null!=o?._$litType$?.h,c=o=>void 0!==o?._$litDirective$,f=o=>o?._$litDirective$,r=o=>void 0===o.strings,s=()=>document.createComment(\"\"),v=(o,n,e)=>{const l=o._$AA.parentNode,d=void 0===n?o._$AB:n._$AA;if(void 0===e){const i=l.insertBefore(s(),d),n=l.insertBefore(s(),d);e=new t(i,n,o,o.options)}else{const t=e._$AB.nextSibling,n=e._$AM,c=n!==o;if(c){let t;e._$AQ?.(o),e._$AM=o,void 0!==e._$AP&&(t=o._$AU)!==n._$AU&&e._$AP(t)}if(t!==d||c){let o=e._$AA;for(;o!==t;){const t=i(o).nextSibling;i(l).insertBefore(o,d),o=t}}}return e},u=(o,t,i=o)=>(o._$AI(t,i),o),m={},p=(o,t=m)=>o._$AH=t,M=o=>o._$AH,h=o=>{o._$AR(),o._$AA.remove()},j=o=>{o._$AR()};export{e as TemplateResultType,j as clearPart,M as getCommittedValue,f as getDirectiveClass,v as insertPart,d as isCompiledTemplateResult,c as isDirectiveResult,n as isPrimitive,r as isSingleExpression,l as isTemplateResult,h as removePart,u as setChildPartValue,p as setCommittedValue};\n//# sourceMappingURL=directive-helpers.js.map\n"],"names":["o","i","n","t"],"mappings":";AACA;AAAA;AAAA;AAAA;AAAA;AAIO,MAAC,EAAC,GAAE,EAAC,IAAEA,GAAE,IAAE,OAAG,GAA8P,IAAE,MAAI,SAAS,cAAc,EAAE,GAAE,IAAE,CAAC,GAAE,GAAE,MAAI;;AAAC,QAAM,IAAE,EAAE,KAAK,YAAW,IAAE,WAAS,IAAE,EAAE,OAAK,EAAE;AAAK,MAAG,WAAS,GAAE;AAAC,UAAMC,KAAE,EAAE,aAAa,EAAC,GAAG,CAAC,GAAEC,KAAE,EAAE,aAAa,EAAC,GAAG,CAAC;AAAE,QAAE,IAAI,EAAED,IAAEC,IAAE,GAAE,EAAE,OAAO;AAAA,EAAC,OAAK;AAAC,UAAMC,KAAE,EAAE,KAAK,aAAYD,KAAE,EAAE,MAAK,IAAEA,OAAI;AAAE,QAAG,GAAE;AAAC,UAAIC;AAAE,cAAE,SAAF,2BAAS,IAAG,EAAE,OAAK,GAAE,WAAS,EAAE,SAAOA,KAAE,EAAE,UAAQD,GAAE,QAAM,EAAE,KAAKC,EAAC;AAAA,IAAC;AAAC,QAAGA,OAAI,KAAG,GAAE;AAAC,UAAIH,KAAE,EAAE;AAAK,aAAKA,OAAIG,MAAG;AAAC,cAAMA,KAAE,EAAEH,EAAC,EAAE;AAAY,UAAE,CAAC,EAAE,aAAaA,IAAE,CAAC,GAAEA,KAAEG;AAAA,MAAC;AAAA,IAAC;AAAA,EAAC;AAAC,SAAO;AAAC,GAAE,IAAE,CAAC,GAAEA,IAAEF,KAAE,OAAK,EAAE,KAAKE,IAAEF,EAAC,GAAE,IAAG,IAAE,CAAA,GAAG,IAAE,CAAC,GAAEE,KAAE,MAAI,EAAE,OAAKA,IAAE,IAAE,OAAG,EAAE,MAAK,IAAE,OAAG;AAAC,IAAE,KAAI,GAAG,EAAE,KAAK;AAAQ;","x_google_ignoreList":[0]}
1
+ {"version":3,"file":"index360.js","sources":["../src/components/molecules/header/templates/header-shared.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { LibHeader } from '../lib-header.component';\nimport type { NavLink, DropdownItem, HeaderAction, BreadcrumbItem } from '../lib-header.types';\n\n/* ══════════════════════════════════════\n SVG HELPERS (cambiar a iconos phosfor)\n ══════════════════════════════════════ */\n\nexport const svgChevron = html`\n <svg class=\"hdr-link-chevron\" width=\"9\" height=\"6\" viewBox=\"0 0 10 6\"\n fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\">\n <polyline points=\"1,1 5,5 9,1\"/>\n </svg>`;\n\nexport const svgSearch = html`\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 16 16\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\">\n <circle cx=\"7\" cy=\"7\" r=\"5\"/><line x1=\"11\" y1=\"11\" x2=\"14\" y2=\"14\"/>\n </svg>`;\n\nexport const svgBell = html`\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 16 16\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\">\n <path d=\"M8 1a5 5 0 00-5 5v2l-1 2v1h12v-1l-1-2V6A5 5 0 008 1z\"/>\n <path d=\"M6 13a2 2 0 004 0\"/>\n </svg>`;\n\n/* ══════════════════════════════════════\n LOGO MARK\n ══════════════════════════════════════ */\n\nexport function renderLogoMark(ctx: LibHeader): TemplateResult {\n if (ctx.variant === 'kintsugi') {\n return html`\n <div class=\"hdr-logo-mark\">\n <span class=\"hdr-logo-mark-text\">${ctx.logoMark}</span>\n </div>`;\n }\n return html`<div class=\"hdr-logo-mark\">${ctx.logoMark}</div>`;\n}\n\n/* ══════════════════════════════════════\n LOGO\n ══════════════════════════════════════ */\n\nexport function renderLogo(ctx: LibHeader): TemplateResult {\n if (ctx.variant === 'glitch') {\n return html`\n <a href=\"${ctx.logoHref}\" class=\"hdr-logo-glitch\">\n ⌗ ${ctx.brandName.toUpperCase()}\n <span class=\"hdr-logo-glitch-badge\">SYS</span>\n </a>`;\n }\n\n if (ctx.variant === 'minimal') {\n return html`\n <a href=\"${ctx.logoHref}\" class=\"hdr-logo\">\n <span class=\"hdr-brand-name\">${ctx.logoMark}</span>\n </a>`;\n }\n\n return html`\n <a href=\"${ctx.logoHref}\" class=\"hdr-logo\">\n ${renderLogoMark(ctx)}\n <div>\n <div class=\"hdr-brand-name\">${ctx.brandName}\n ${ctx.variant === 'kintsugi'\n ? html` <em style=\"font-style:italic;color:var(--color-kaki-400);\">金</em>`\n : nothing}\n </div>\n ${ctx.brandTagline && ctx.variant === 'shrink'\n ? html`<div class=\"hdr-tagline\">${ctx.brandTagline}</div>`\n : nothing}\n </div>\n ${ctx.version && ctx.variant === 'dark'\n ? html`<span class=\"hdr-version\">${ctx.version}</span>`\n : nothing}\n </a>`;\n}\n\n/* ══════════════════════════════════════\n DROPDOWN (desktop)\n ══════════════════════════════════════ */\n\nexport function renderDropdown(_ctx: LibHeader, link: NavLink): TemplateResult {\n return html`\n <div class=\"hdr-dd\">\n <span class=\"hdr-link\">\n ${link.label}\n ${svgChevron}\n </span>\n <div class=\"hdr-dd-menu\">\n ${link.dropdown?.map((item: DropdownItem) => html`\n <a href=\"${item.href || '#'}\"\n class=\"hdr-dd-item ${item.divider ? 'hdr-dd-item--divider' : ''}\">\n ${item.label}\n </a>\n `)}\n </div>\n </div>`;\n}\n\n/* ══════════════════════════════════════\n NAV LINKS (desktop)\n ══════════════════════════════════════ */\n\nexport function renderLinks(ctx: LibHeader, links: NavLink[]): TemplateResult {\n return html`\n ${links.map(link =>\n link.dropdown?.length\n ? renderDropdown(ctx, link)\n : html`\n <a href=\"${link.href || '#'}\"\n class=\"hdr-link ${link.active ? 'is-active' : ''}\"\n @click=\"${(e: Event): void => {\n e.preventDefault();\n ctx._onLinkClick(link.id);\n }}\"\n >\n ${ctx.variant === 'glitch' ? html`<span>&gt;</span>` : nothing}\n ${link.label}\n </a>`\n )}`;\n}\n\n/* ══════════════════════════════════════\n ACTIONS (desktop)\n ══════════════════════════════════════ */\n\nconst ACTION_VARIANT_MAP: Record<string, string> = {\n classic: 'kaki',\n centered: 'outline',\n dark: 'kaki',\n transparent: 'kaki',\n kintsugi: 'kintsugi',\n glitch: 'glitch',\n mega: 'kaki',\n shrink: 'kaki',\n minimal: '',\n};\n\nexport function renderActions(ctx: LibHeader): TemplateResult {\n return html`\n <div class=\"hdr-actions\">\n ${ctx.loginLabel ? html`\n <a href=\"${ctx.loginHref || '#'}\" class=\"hdr-login\">${ctx.loginLabel}</a>\n ` : nothing}\n\n ${ctx.actions.map((action: HeaderAction) => {\n const cls = action.variant\n ? `hdr-action--${action.variant}`\n : `hdr-action--${ACTION_VARIANT_MAP[ctx.variant] || 'kaki'}`;\n return html`\n <a href=\"${action.href || '#'}\"\n class=\"hdr-action ${cls}\"\n @click=\"${(e: Event): void => {\n e.preventDefault();\n ctx._onActionClick(action);\n }}\"\n >${action.label}</a>`;\n })}\n\n ${ctx.variant === 'glitch' ? html`\n <div class=\"hdr-online\">● online</div>\n ` : nothing}\n\n ${ctx.variant === 'minimal' && ctx.contactLabel ? html`\n <a href=\"${ctx.contactHref || '#'}\" class=\"hdr-contact\">${ctx.contactLabel} →</a>\n ` : nothing}\n </div>`;\n}\n\n/* ══════════════════════════════════════\n BREADCRUMBS (app-bar)\n ══════════════════════════════════════ */\n\nexport function renderBreadcrumbs(items: BreadcrumbItem[]): TemplateResult {\n return html`\n <nav class=\"hdr-breadcrumbs\" aria-label=\"breadcrumb\">\n ${items.map((item, i) => html`\n ${i > 0 ? html`<span class=\"hdr-breadcrumb-sep\">/</span>` : nothing}\n ${i < items.length - 1\n ? html`<a href=\"${item.href || '#'}\" class=\"hdr-breadcrumb-link\">${item.label}</a>`\n : html`<span class=\"hdr-breadcrumb-current\">${item.label}</span>`}\n `)}\n </nav>`;\n}"],"names":[],"mappings":"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"}
package/dist/index361.js CHANGED
@@ -1,149 +1,133 @@
1
1
  import { html, nothing } from "lit";
2
- const svgChevron = html`
3
- <svg class="hdr-link-chevron" width="9" height="6" viewBox="0 0 10 6"
4
- fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
5
- <polyline points="1,1 5,5 9,1"/>
6
- </svg>`;
7
- const svgSearch = html`
8
- <svg width="12" height="12" viewBox="0 0 16 16" fill="none"
9
- stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
10
- <circle cx="7" cy="7" r="5"/><line x1="11" y1="11" x2="14" y2="14"/>
11
- </svg>`;
12
- const svgBell = html`
13
- <svg width="15" height="15" viewBox="0 0 16 16" fill="none"
14
- stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
15
- <path d="M8 1a5 5 0 00-5 5v2l-1 2v1h12v-1l-1-2V6A5 5 0 008 1z"/>
16
- <path d="M6 13a2 2 0 004 0"/>
17
- </svg>`;
18
- function renderLogoMark(ctx) {
19
- if (ctx.variant === "kintsugi") {
20
- return html`
21
- <div class="hdr-logo-mark">
22
- <span class="hdr-logo-mark-text">${ctx.logoMark}</span>
23
- </div>`;
24
- }
25
- return html`<div class="hdr-logo-mark">${ctx.logoMark}</div>`;
26
- }
27
- function renderLogo(ctx) {
28
- if (ctx.variant === "glitch") {
29
- return html`
30
- <a href="${ctx.logoHref}" class="hdr-logo-glitch">
31
- ⌗ ${ctx.brandName.toUpperCase()}
32
- <span class="hdr-logo-glitch-badge">SYS</span>
33
- </a>`;
34
- }
35
- if (ctx.variant === "minimal") {
36
- return html`
37
- <a href="${ctx.logoHref}" class="hdr-logo">
38
- <span class="hdr-brand-name">${ctx.logoMark}</span>
39
- </a>`;
40
- }
2
+ function renderHamburger(ctx) {
3
+ const isLight = ["classic", "centered", "mega", "minimal", "shrink"].includes(ctx.variant);
4
+ const color = isLight ? "var(--color-washi-600, #7A6A5C)" : "rgba(250,247,244,0.5)";
41
5
  return html`
42
- <a href="${ctx.logoHref}" class="hdr-logo">
43
- ${renderLogoMark(ctx)}
44
- <div>
45
- <div class="hdr-brand-name">${ctx.brandName}
46
- ${ctx.variant === "kintsugi" ? html` <em style="font-style:italic;color:var(--color-kaki-400);">金</em>` : nothing}
47
- </div>
48
- ${ctx.brandTagline && ctx.variant === "shrink" ? html`<div class="hdr-tagline">${ctx.brandTagline}</div>` : nothing}
49
- </div>
50
- ${ctx.version && ctx.variant === "dark" ? html`<span class="hdr-version">${ctx.version}</span>` : nothing}
51
- </a>`;
6
+ <button
7
+ class="hdr-burger"
8
+ aria-label="${ctx._mobileOpen ? "Cerrar menú" : "Abrir menú"}"
9
+ aria-expanded="${ctx._mobileOpen}"
10
+ aria-controls="hdr-mobile-drawer"
11
+ @click="${() => ctx._toggleMobile()}"
12
+ >
13
+ <svg width="20" height="14" viewBox="0 0 20 14" fill="none"
14
+ stroke="${color}" stroke-width="1.6" stroke-linecap="round">
15
+ <line class="hdr-burger-top" x1="0" y1="1" x2="20" y2="1"/>
16
+ <line class="hdr-burger-mid" x1="0" y1="7" x2="20" y2="7"/>
17
+ <line class="hdr-burger-bot" x1="0" y1="13" x2="20" y2="13"/>
18
+ </svg>
19
+ </button>`;
52
20
  }
53
- function renderDropdown(_ctx, link) {
21
+ function renderMobileDrawer(ctx) {
54
22
  var _a;
23
+ if (!ctx._mobileOpen) return html``;
55
24
  return html`
56
- <div class="hdr-dd">
57
- <span class="hdr-link">
58
- ${link.label}
59
- ${svgChevron}
60
- </span>
61
- <div class="hdr-dd-menu">
62
- ${(_a = link.dropdown) == null ? void 0 : _a.map((item) => html`
63
- <a href="${item.href || "#"}"
64
- class="hdr-dd-item ${item.divider ? "hdr-dd-item--divider" : ""}">
65
- ${item.label}
66
- </a>
67
- `)}
68
- </div>
69
- </div>`;
70
- }
71
- function renderLinks(ctx, links) {
72
- return html`
73
- ${links.map(
74
- (link) => {
75
- var _a;
76
- return ((_a = link.dropdown) == null ? void 0 : _a.length) ? renderDropdown(ctx, link) : html`
77
- <a href="${link.href || "#"}"
78
- class="hdr-link ${link.active ? "is-active" : ""}"
79
- @click="${(e) => {
80
- e.preventDefault();
81
- ctx._onLinkClick(link.id);
82
- }}"
83
- >
84
- ${ctx.variant === "glitch" ? html`<span>&gt;</span>` : nothing}
85
- ${link.label}
86
- </a>`;
87
- }
88
- )}`;
89
- }
90
- const ACTION_VARIANT_MAP = {
91
- classic: "kaki",
92
- centered: "outline",
93
- dark: "kaki",
94
- transparent: "kaki",
95
- kintsugi: "kintsugi",
96
- glitch: "glitch",
97
- mega: "kaki",
98
- shrink: "kaki",
99
- minimal: ""
100
- };
101
- function renderActions(ctx) {
102
- return html`
103
- <div class="hdr-actions">
104
- ${ctx.loginLabel ? html`
105
- <a href="${ctx.loginHref || "#"}" class="hdr-login">${ctx.loginLabel}</a>
106
- ` : nothing}
25
+ <!-- Backdrop -->
26
+ <div
27
+ class="hdr-mobile-backdrop"
28
+ @click="${() => ctx._closeMobile()}"
29
+ aria-hidden="true"
30
+ ></div>
107
31
 
108
- ${ctx.actions.map((action) => {
109
- const cls = action.variant ? `hdr-action--${action.variant}` : `hdr-action--${ACTION_VARIANT_MAP[ctx.variant] || "kaki"}`;
32
+ <!-- Drawer panel -->
33
+ <nav
34
+ id="hdr-mobile-drawer"
35
+ class="hdr-mobile-drawer ${ctx._mobileOpen ? "is-open" : ""}"
36
+ aria-label="Menú principal"
37
+ >
38
+ <!-- Links principales -->
39
+ <div class="hdr-mobile-links">
40
+ ${(ctx.links ?? []).map((link) => {
41
+ var _a2, _b;
110
42
  return html`
111
- <a href="${action.href || "#"}"
112
- class="hdr-action ${cls}"
43
+ <a
44
+ href="${link.href ?? "#"}"
45
+ class="hdr-mobile-link"
113
46
  @click="${(e) => {
114
47
  e.preventDefault();
115
- ctx._onActionClick(action);
48
+ ctx._onLinkClick(link.id);
116
49
  }}"
117
- >${action.label}</a>`;
50
+ >
51
+ ${link.label}
52
+ ${((_a2 = link.dropdown) == null ? void 0 : _a2.length) ? html`
53
+ <svg width="8" height="5" viewBox="0 0 10 6" fill="none"
54
+ stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
55
+ <polyline points="1,1 5,5 9,1"/>
56
+ </svg>` : nothing}
57
+ </a>
58
+
59
+ <!-- Sub-items — siempre visibles en móvil -->
60
+ ${((_b = link.dropdown) == null ? void 0 : _b.length) ? html`
61
+ <div class="hdr-mobile-sub">
62
+ ${link.dropdown.map((item) => html`
63
+ <a href="${item.href ?? "#"}" class="hdr-mobile-sub-link">
64
+ › ${item.label}
65
+ </a>
66
+ `)}
67
+ </div>
68
+ ` : nothing}
69
+ `;
118
70
  })}
119
71
 
120
- ${ctx.variant === "glitch" ? html`
121
- <div class="hdr-online">● online</div>
122
- ` : nothing}
72
+ <!-- Mega columns accordion plano en móvil -->
73
+ ${((_a = ctx.megaColumns) == null ? void 0 : _a.length) ? html`
74
+ <div class="hdr-mobile-sub" style="margin-top:0;">
75
+ ${ctx.megaColumns.map((col) => html`
76
+ <p class="hdr-mobile-col-title">${col.title}</p>
77
+ ${col.items.map((item) => html`
78
+ <a href="${item.href ?? "#"}" class="hdr-mobile-sub-link">
79
+ › ${item.label}
80
+ </a>
81
+ `)}
82
+ `)}
83
+ </div>
84
+ ` : nothing}
85
+ </div>
123
86
 
124
- ${ctx.variant === "minimal" && ctx.contactLabel ? html`
125
- <a href="${ctx.contactHref || "#"}" class="hdr-contact">${ctx.contactLabel} →</a>
126
- ` : nothing}
127
- </div>`;
128
- }
129
- function renderBreadcrumbs(items) {
130
- return html`
131
- <nav class="hdr-breadcrumbs" aria-label="breadcrumb">
132
- ${items.map((item, i) => html`
133
- ${i > 0 ? html`<span class="hdr-breadcrumb-sep">/</span>` : nothing}
134
- ${i < items.length - 1 ? html`<a href="${item.href || "#"}" class="hdr-breadcrumb-link">${item.label}</a>` : html`<span class="hdr-breadcrumb-current">${item.label}</span>`}
135
- `)}
87
+ <!-- Divider -->
88
+ <div class="hdr-mobile-divider"></div>
89
+
90
+ <!-- Actions / CTAs -->
91
+ <div class="hdr-mobile-actions">
92
+ ${ctx.loginLabel ? html`
93
+ <a href="${ctx.loginHref ?? "#"}" class="hdr-mobile-login">
94
+ ${ctx.loginLabel}
95
+ </a>
96
+ ` : nothing}
97
+
98
+ ${(ctx.actions ?? []).map((action) => html`
99
+ <a
100
+ href="${action.href ?? "#"}"
101
+ class="hdr-mobile-cta"
102
+ @click="${(e) => {
103
+ e.preventDefault();
104
+ ctx._onActionClick(action);
105
+ }}"
106
+ >
107
+ ${action.label}
108
+ </a>
109
+ `)}
110
+
111
+ ${ctx.contactLabel ? html`
112
+ <a href="${ctx.contactHref ?? "#"}" class="hdr-mobile-login">
113
+ ${ctx.contactLabel} →
114
+ </a>
115
+ ` : nothing}
116
+ </div>
117
+
118
+ <!-- Footer del drawer -->
119
+ <div class="hdr-mobile-footer">
120
+ <span>${ctx.brandName}</span>
121
+ <button
122
+ class="hdr-mobile-close"
123
+ aria-label="Cerrar menú"
124
+ @click="${() => ctx._closeMobile()}"
125
+ >✕</button>
126
+ </div>
136
127
  </nav>`;
137
128
  }
138
129
  export {
139
- renderActions,
140
- renderBreadcrumbs,
141
- renderDropdown,
142
- renderLinks,
143
- renderLogo,
144
- renderLogoMark,
145
- svgBell,
146
- svgChevron,
147
- svgSearch
130
+ renderHamburger,
131
+ renderMobileDrawer
148
132
  };
149
133
  //# sourceMappingURL=index361.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index361.js","sources":["../src/components/molecules/header/templates/header-shared.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { LibHeader } from '../lib-header.component';\nimport type { NavLink, DropdownItem, HeaderAction, BreadcrumbItem } from '../lib-header.types';\n\n/* ══════════════════════════════════════\n SVG HELPERS (cambiar a iconos phosfor)\n ══════════════════════════════════════ */\n\nexport const svgChevron = html`\n <svg class=\"hdr-link-chevron\" width=\"9\" height=\"6\" viewBox=\"0 0 10 6\"\n fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\">\n <polyline points=\"1,1 5,5 9,1\"/>\n </svg>`;\n\nexport const svgSearch = html`\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 16 16\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\">\n <circle cx=\"7\" cy=\"7\" r=\"5\"/><line x1=\"11\" y1=\"11\" x2=\"14\" y2=\"14\"/>\n </svg>`;\n\nexport const svgBell = html`\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 16 16\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\">\n <path d=\"M8 1a5 5 0 00-5 5v2l-1 2v1h12v-1l-1-2V6A5 5 0 008 1z\"/>\n <path d=\"M6 13a2 2 0 004 0\"/>\n </svg>`;\n\n/* ══════════════════════════════════════\n LOGO MARK\n ══════════════════════════════════════ */\n\nexport function renderLogoMark(ctx: LibHeader): TemplateResult {\n if (ctx.variant === 'kintsugi') {\n return html`\n <div class=\"hdr-logo-mark\">\n <span class=\"hdr-logo-mark-text\">${ctx.logoMark}</span>\n </div>`;\n }\n return html`<div class=\"hdr-logo-mark\">${ctx.logoMark}</div>`;\n}\n\n/* ══════════════════════════════════════\n LOGO\n ══════════════════════════════════════ */\n\nexport function renderLogo(ctx: LibHeader): TemplateResult {\n if (ctx.variant === 'glitch') {\n return html`\n <a href=\"${ctx.logoHref}\" class=\"hdr-logo-glitch\">\n ${ctx.brandName.toUpperCase()}\n <span class=\"hdr-logo-glitch-badge\">SYS</span>\n </a>`;\n }\n\n if (ctx.variant === 'minimal') {\n return html`\n <a href=\"${ctx.logoHref}\" class=\"hdr-logo\">\n <span class=\"hdr-brand-name\">${ctx.logoMark}</span>\n </a>`;\n }\n\n return html`\n <a href=\"${ctx.logoHref}\" class=\"hdr-logo\">\n ${renderLogoMark(ctx)}\n <div>\n <div class=\"hdr-brand-name\">${ctx.brandName}\n ${ctx.variant === 'kintsugi'\n ? html` <em style=\"font-style:italic;color:var(--color-kaki-400);\">金</em>`\n : nothing}\n </div>\n ${ctx.brandTagline && ctx.variant === 'shrink'\n ? html`<div class=\"hdr-tagline\">${ctx.brandTagline}</div>`\n : nothing}\n </div>\n ${ctx.version && ctx.variant === 'dark'\n ? html`<span class=\"hdr-version\">${ctx.version}</span>`\n : nothing}\n </a>`;\n}\n\n/* ══════════════════════════════════════\n DROPDOWN (desktop)\n ══════════════════════════════════════ */\n\nexport function renderDropdown(_ctx: LibHeader, link: NavLink): TemplateResult {\n return html`\n <div class=\"hdr-dd\">\n <span class=\"hdr-link\">\n ${link.label}\n ${svgChevron}\n </span>\n <div class=\"hdr-dd-menu\">\n ${link.dropdown?.map((item: DropdownItem) => html`\n <a href=\"${item.href || '#'}\"\n class=\"hdr-dd-item ${item.divider ? 'hdr-dd-item--divider' : ''}\">\n ${item.label}\n </a>\n `)}\n </div>\n </div>`;\n}\n\n/* ══════════════════════════════════════\n NAV LINKS (desktop)\n ══════════════════════════════════════ */\n\nexport function renderLinks(ctx: LibHeader, links: NavLink[]): TemplateResult {\n return html`\n ${links.map(link =>\n link.dropdown?.length\n ? renderDropdown(ctx, link)\n : html`\n <a href=\"${link.href || '#'}\"\n class=\"hdr-link ${link.active ? 'is-active' : ''}\"\n @click=\"${(e: Event): void => {\n e.preventDefault();\n ctx._onLinkClick(link.id);\n }}\"\n >\n ${ctx.variant === 'glitch' ? html`<span>&gt;</span>` : nothing}\n ${link.label}\n </a>`\n )}`;\n}\n\n/* ══════════════════════════════════════\n ACTIONS (desktop)\n ══════════════════════════════════════ */\n\nconst ACTION_VARIANT_MAP: Record<string, string> = {\n classic: 'kaki',\n centered: 'outline',\n dark: 'kaki',\n transparent: 'kaki',\n kintsugi: 'kintsugi',\n glitch: 'glitch',\n mega: 'kaki',\n shrink: 'kaki',\n minimal: '',\n};\n\nexport function renderActions(ctx: LibHeader): TemplateResult {\n return html`\n <div class=\"hdr-actions\">\n ${ctx.loginLabel ? html`\n <a href=\"${ctx.loginHref || '#'}\" class=\"hdr-login\">${ctx.loginLabel}</a>\n ` : nothing}\n\n ${ctx.actions.map((action: HeaderAction) => {\n const cls = action.variant\n ? `hdr-action--${action.variant}`\n : `hdr-action--${ACTION_VARIANT_MAP[ctx.variant] || 'kaki'}`;\n return html`\n <a href=\"${action.href || '#'}\"\n class=\"hdr-action ${cls}\"\n @click=\"${(e: Event): void => {\n e.preventDefault();\n ctx._onActionClick(action);\n }}\"\n >${action.label}</a>`;\n })}\n\n ${ctx.variant === 'glitch' ? html`\n <div class=\"hdr-online\">● online</div>\n ` : nothing}\n\n ${ctx.variant === 'minimal' && ctx.contactLabel ? html`\n <a href=\"${ctx.contactHref || '#'}\" class=\"hdr-contact\">${ctx.contactLabel} →</a>\n ` : nothing}\n </div>`;\n}\n\n/* ══════════════════════════════════════\n BREADCRUMBS (app-bar)\n ══════════════════════════════════════ */\n\nexport function renderBreadcrumbs(items: BreadcrumbItem[]): TemplateResult {\n return html`\n <nav class=\"hdr-breadcrumbs\" aria-label=\"breadcrumb\">\n ${items.map((item, i) => html`\n ${i > 0 ? html`<span class=\"hdr-breadcrumb-sep\">/</span>` : nothing}\n ${i < items.length - 1\n ? html`<a href=\"${item.href || '#'}\" class=\"hdr-breadcrumb-link\">${item.label}</a>`\n : html`<span class=\"hdr-breadcrumb-current\">${item.label}</span>`}\n `)}\n </nav>`;\n}"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index361.js","sources":["../src/components/molecules/header/templates/header-mobile.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { LibHeader } from '../lib-header.component';\nimport type { NavLink, DropdownItem, HeaderAction } from '../lib-header.types';\n\n/* ══════════════════════════════════════\n HAMBURGER BUTTON\n ══════════════════════════════════════ */\n\nexport function renderHamburger(ctx: LibHeader): TemplateResult {\n const isLight = ['classic', 'centered', 'mega', 'minimal', 'shrink'].includes(ctx.variant);\n const color = isLight\n ? 'var(--color-washi-600, #7A6A5C)'\n : 'rgba(250,247,244,0.5)';\n\n return html`\n <button\n class=\"hdr-burger\"\n aria-label=\"${ctx._mobileOpen ? 'Cerrar menú' : 'Abrir menú'}\"\n aria-expanded=\"${ctx._mobileOpen}\"\n aria-controls=\"hdr-mobile-drawer\"\n @click=\"${(): void => ctx._toggleMobile()}\"\n >\n <svg width=\"20\" height=\"14\" viewBox=\"0 0 20 14\" fill=\"none\"\n stroke=\"${color}\" stroke-width=\"1.6\" stroke-linecap=\"round\">\n <line class=\"hdr-burger-top\" x1=\"0\" y1=\"1\" x2=\"20\" y2=\"1\"/>\n <line class=\"hdr-burger-mid\" x1=\"0\" y1=\"7\" x2=\"20\" y2=\"7\"/>\n <line class=\"hdr-burger-bot\" x1=\"0\" y1=\"13\" x2=\"20\" y2=\"13\"/>\n </svg>\n </button>`;\n}\n\n/* ══════════════════════════════════════\n MOBILE DRAWER\n ══════════════════════════════════════ */\n\nexport function renderMobileDrawer(ctx: LibHeader): TemplateResult {\n if (!ctx._mobileOpen) return html``;\n\n return html`\n <!-- Backdrop -->\n <div\n class=\"hdr-mobile-backdrop\"\n @click=\"${(): void => ctx._closeMobile()}\"\n aria-hidden=\"true\"\n ></div>\n\n <!-- Drawer panel -->\n <nav\n id=\"hdr-mobile-drawer\"\n class=\"hdr-mobile-drawer ${ctx._mobileOpen ? 'is-open' : ''}\"\n aria-label=\"Menú principal\"\n >\n <!-- Links principales -->\n <div class=\"hdr-mobile-links\">\n ${(ctx.links ?? []).map((link: NavLink) => html`\n <a\n href=\"${link.href ?? '#'}\"\n class=\"hdr-mobile-link\"\n @click=\"${(e: Event): void => {\n e.preventDefault();\n ctx._onLinkClick(link.id);\n }}\"\n >\n ${link.label}\n ${link.dropdown?.length ? html`\n <svg width=\"8\" height=\"5\" viewBox=\"0 0 10 6\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\">\n <polyline points=\"1,1 5,5 9,1\"/>\n </svg>` : nothing}\n </a>\n\n <!-- Sub-items siempre visibles en móvil -->\n ${link.dropdown?.length ? html`\n <div class=\"hdr-mobile-sub\">\n ${link.dropdown.map((item: DropdownItem) => html`\n <a href=\"${item.href ?? '#'}\" class=\"hdr-mobile-sub-link\">\n${item.label}\n </a>\n `)}\n </div>\n ` : nothing}\n `)}\n\n <!-- Mega columns accordion plano en móvil -->\n ${ctx.megaColumns?.length ? html`\n <div class=\"hdr-mobile-sub\" style=\"margin-top:0;\">\n ${ctx.megaColumns.map(col => html`\n <p class=\"hdr-mobile-col-title\">${col.title}</p>\n ${col.items.map(item => html`\n <a href=\"${item.href ?? '#'}\" class=\"hdr-mobile-sub-link\">\n${item.label}\n </a>\n `)}\n `)}\n </div>\n ` : nothing}\n </div>\n\n <!-- Divider -->\n <div class=\"hdr-mobile-divider\"></div>\n\n <!-- Actions / CTAs -->\n <div class=\"hdr-mobile-actions\">\n ${ctx.loginLabel ? html`\n <a href=\"${ctx.loginHref ?? '#'}\" class=\"hdr-mobile-login\">\n ${ctx.loginLabel}\n </a>\n ` : nothing}\n\n ${(ctx.actions ?? []).map((action: HeaderAction) => html`\n <a\n href=\"${action.href ?? '#'}\"\n class=\"hdr-mobile-cta\"\n @click=\"${(e: Event): void => {\n e.preventDefault();\n ctx._onActionClick(action);\n }}\"\n >\n ${action.label}\n </a>\n `)}\n\n ${ctx.contactLabel ? html`\n <a href=\"${ctx.contactHref ?? '#'}\" class=\"hdr-mobile-login\">\n ${ctx.contactLabel} →\n </a>\n ` : nothing}\n </div>\n\n <!-- Footer del drawer -->\n <div class=\"hdr-mobile-footer\">\n <span>${ctx.brandName}</span>\n <button\n class=\"hdr-mobile-close\"\n aria-label=\"Cerrar menú\"\n @click=\"${(): void => ctx._closeMobile()}\"\n >✕</button>\n </div>\n </nav>`;\n}"],"names":["_a"],"mappings":";AAQO,SAAS,gBAAgB,KAAgC;AAC9D,QAAM,UAAU,CAAC,WAAW,YAAY,QAAQ,WAAW,QAAQ,EAAE,SAAS,IAAI,OAAO;AACzF,QAAM,QAAU,UACZ,oCACA;AAEJ,SAAO;AAAA;AAAA;AAAA,oBAGW,IAAI,cAAc,gBAAgB,YAAY;AAAA,uBAC3C,IAAI,WAAW;AAAA;AAAA,gBAEtB,MAAY,IAAI,eAAe;AAAA;AAAA;AAAA,kBAG7B,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAMvB;AAMO,SAAS,mBAAmB,KAAgC;;AACjE,MAAI,CAAC,IAAI,YAAa,QAAO;AAE7B,SAAO;AAAA;AAAA;AAAA;AAAA,gBAIO,MAAY,IAAI,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iCAOb,IAAI,cAAc,YAAY,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,WAKtD,IAAI,SAAS,CAAA,GAAI,IAAI,CAAC;;AAAkB;AAAA;AAAA,oBAE/B,KAAK,QAAQ,GAAG;AAAA;AAAA,sBAEd,CAAC,MAAmB;AAC5B,QAAE,eAAA;AACF,UAAI,aAAa,KAAK,EAAE;AAAA,IAC1B,CAAC;AAAA;AAAA,cAEC,KAAK,KAAK;AAAA,gBACVA,MAAA,KAAK,aAAL,gBAAAA,IAAe,UAAS;AAAA;AAAA;AAAA;AAAA,wBAId,OAAO;AAAA;AAAA;AAAA;AAAA,cAInB,UAAK,aAAL,mBAAe,UAAS;AAAA;AAAA,gBAEpB,KAAK,SAAS,IAAI,CAAC,SAAuB;AAAA,2BAC/B,KAAK,QAAQ,GAAG;AAAA,sBACrB,KAAK,KAAK;AAAA;AAAA,eAEjB,CAAC;AAAA;AAAA,cAEF,OAAO;AAAA;AAAA,GACZ,CAAC;AAAA;AAAA;AAAA,YAGA,SAAI,gBAAJ,mBAAiB,UAAS;AAAA;AAAA,cAEtB,IAAI,YAAY,IAAI,CAAA,QAAO;AAAA,gDACO,IAAI,KAAK;AAAA,gBACzC,IAAI,MAAM,IAAI,CAAA,SAAQ;AAAA,2BACX,KAAK,QAAQ,GAAG;AAAA,sBACrB,KAAK,KAAK;AAAA;AAAA,eAEjB,CAAC;AAAA,aACH,CAAC;AAAA;AAAA,YAEF,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQT,IAAI,aAAa;AAAA,qBACN,IAAI,aAAa,GAAG;AAAA,cAC3B,IAAI,UAAU;AAAA;AAAA,YAEhB,OAAO;AAAA;AAAA,WAER,IAAI,WAAW,CAAA,GAAI,IAAI,CAAC,WAAyB;AAAA;AAAA,oBAExC,OAAO,QAAQ,GAAG;AAAA;AAAA,sBAEhB,CAAC,MAAmB;AAC5B,MAAE,eAAA;AACF,QAAI,eAAe,MAAM;AAAA,EAC3B,CAAC;AAAA;AAAA,cAEC,OAAO,KAAK;AAAA;AAAA,SAEjB,CAAC;AAAA;AAAA,UAEA,IAAI,eAAe;AAAA,qBACR,IAAI,eAAe,GAAG;AAAA,cAC7B,IAAI,YAAY;AAAA;AAAA,YAElB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKH,IAAI,SAAS;AAAA;AAAA;AAAA;AAAA,oBAIT,MAAY,IAAI,cAAc;AAAA;AAAA;AAAA;AAIlD;"}