@shibui-ui/ui 1.25.1 → 1.26.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.
Files changed (171) hide show
  1. package/dist/index11.js +1 -1
  2. package/dist/index194.js +6 -97
  3. package/dist/index194.js.map +1 -1
  4. package/dist/index195.js +2 -2
  5. package/dist/index197.js +18 -2
  6. package/dist/index197.js.map +1 -1
  7. package/dist/index198.js +2 -74
  8. package/dist/index198.js.map +1 -1
  9. package/dist/index199.js +74 -64
  10. package/dist/index199.js.map +1 -1
  11. package/dist/index200.js +2 -2
  12. package/dist/index201.js +2 -57
  13. package/dist/index201.js.map +1 -1
  14. package/dist/index202.js +39 -2
  15. package/dist/index202.js.map +1 -1
  16. package/dist/index203.js +2 -2
  17. package/dist/index204.js +219 -144
  18. package/dist/index204.js.map +1 -1
  19. package/dist/index205.js +82 -43
  20. package/dist/index205.js.map +1 -1
  21. package/dist/index206.js +2 -51
  22. package/dist/index206.js.map +1 -1
  23. package/dist/index207.js +94 -2
  24. package/dist/index207.js.map +1 -1
  25. package/dist/index208.js +2 -33
  26. package/dist/index208.js.map +1 -1
  27. package/dist/index209.js +268 -2
  28. package/dist/index209.js.map +1 -1
  29. package/dist/index210.js +2 -6
  30. package/dist/index210.js.map +1 -1
  31. package/dist/index211.js +21 -2
  32. package/dist/index211.js.map +1 -1
  33. package/dist/index212.js +2 -260
  34. package/dist/index212.js.map +1 -1
  35. package/dist/index213.js +8 -16
  36. package/dist/index213.js.map +1 -1
  37. package/dist/index214.js +2 -2
  38. package/dist/index215.js +15 -2
  39. package/dist/index215.js.map +1 -1
  40. package/dist/index216.js +2 -66
  41. package/dist/index216.js.map +1 -1
  42. package/dist/index217.js +146 -24
  43. package/dist/index217.js.map +1 -1
  44. package/dist/index218.js +2 -2
  45. package/dist/index219.js +5 -2
  46. package/dist/index219.js.map +1 -1
  47. package/dist/index220.js +2 -81
  48. package/dist/index220.js.map +1 -1
  49. package/dist/index221.js +6 -78
  50. package/dist/index221.js.map +1 -1
  51. package/dist/index222.js +2 -2
  52. package/dist/index223.js +2 -133
  53. package/dist/index223.js.map +1 -1
  54. package/dist/index224.js +92 -2
  55. package/dist/index224.js.map +1 -1
  56. package/dist/index225.js +59 -2
  57. package/dist/index225.js.map +1 -1
  58. package/dist/index226.js +2 -72
  59. package/dist/index226.js.map +1 -1
  60. package/dist/index227.js +97 -94
  61. package/dist/index227.js.map +1 -1
  62. package/dist/index228.js +2 -2
  63. package/dist/index229.js +2 -71
  64. package/dist/index229.js.map +1 -1
  65. package/dist/index230.js +74 -2
  66. package/dist/index230.js.map +1 -1
  67. package/dist/index231.js +74 -2
  68. package/dist/index231.js.map +1 -1
  69. package/dist/index232.js +2 -12
  70. package/dist/index232.js.map +1 -1
  71. package/dist/index233.js +53 -5
  72. package/dist/index233.js.map +1 -1
  73. package/dist/index234.js +2 -2
  74. package/dist/index235.js +2 -18
  75. package/dist/index235.js.map +1 -1
  76. package/dist/index236.js +162 -2
  77. package/dist/index236.js.map +1 -1
  78. package/dist/index237.js +43 -84
  79. package/dist/index237.js.map +1 -1
  80. package/dist/index238.js +51 -2
  81. package/dist/index238.js.map +1 -1
  82. package/dist/index239.js +2 -2
  83. package/dist/index240.js +33 -39
  84. package/dist/index240.js.map +1 -1
  85. package/dist/index241.js +2 -2
  86. package/dist/index242.js +5 -236
  87. package/dist/index242.js.map +1 -1
  88. package/dist/index243.js +2 -82
  89. package/dist/index243.js.map +1 -1
  90. package/dist/index244.js +260 -2
  91. package/dist/index244.js.map +1 -1
  92. package/dist/index245.js +16 -93
  93. package/dist/index245.js.map +1 -1
  94. package/dist/index246.js +2 -2
  95. package/dist/index247.js +2 -268
  96. package/dist/index247.js.map +1 -1
  97. package/dist/index248.js +66 -2
  98. package/dist/index248.js.map +1 -1
  99. package/dist/index249.js +24 -13
  100. package/dist/index249.js.map +1 -1
  101. package/dist/index250.js +2 -2
  102. package/dist/index251.js +2 -9
  103. package/dist/index251.js.map +1 -1
  104. package/dist/index252.js +81 -2
  105. package/dist/index252.js.map +1 -1
  106. package/dist/index253.js +78 -12
  107. package/dist/index253.js.map +1 -1
  108. package/dist/index254.js +2 -2
  109. package/dist/index255.js +111 -132
  110. package/dist/index255.js.map +1 -1
  111. package/dist/index256.js +2 -2
  112. package/dist/index257.js +2 -5
  113. package/dist/index257.js.map +1 -1
  114. package/dist/index258.js +72 -2
  115. package/dist/index258.js.map +1 -1
  116. package/dist/index259.js +93 -5
  117. package/dist/index259.js.map +1 -1
  118. package/dist/index260.js +2 -2
  119. package/dist/index261.js +71 -2
  120. package/dist/index261.js.map +1 -1
  121. package/dist/index262.js +2 -92
  122. package/dist/index262.js.map +1 -1
  123. package/dist/index263.js +2 -59
  124. package/dist/index263.js.map +1 -1
  125. package/dist/index264.js +12 -2
  126. package/dist/index264.js.map +1 -1
  127. package/dist/index34.js +1 -1
  128. package/dist/index347.js +1 -1
  129. package/dist/index352.js +26 -19
  130. package/dist/index352.js.map +1 -1
  131. package/dist/index357.js +19 -26
  132. package/dist/index357.js.map +1 -1
  133. package/dist/index44.js +1 -1
  134. package/dist/index47.js +1 -1
  135. package/dist/index49.js +2 -2
  136. package/dist/index50.js +2 -2
  137. package/dist/index51.js +2 -2
  138. package/dist/index52.js +2 -2
  139. package/dist/index53.js +3 -3
  140. package/dist/index54.js +2 -2
  141. package/dist/index55.js +2 -2
  142. package/dist/index56.js +3 -3
  143. package/dist/index57.js +2 -2
  144. package/dist/index58.js +2 -2
  145. package/dist/index59.js +2 -2
  146. package/dist/index60.js +2 -2
  147. package/dist/index61.js +2 -2
  148. package/dist/index62.js +2 -2
  149. package/dist/index63.js +2 -2
  150. package/dist/index64.js +2 -2
  151. package/dist/index65.js +2 -2
  152. package/dist/index66.js +1 -1
  153. package/dist/index67.js +1 -1
  154. package/dist/index68.js +2 -2
  155. package/dist/index69.js +2 -2
  156. package/dist/index70.js +2 -2
  157. package/dist/index71.js +2 -2
  158. package/dist/index72.js +2 -2
  159. package/dist/index73.js +2 -2
  160. package/dist/index74.js +2 -2
  161. package/dist/index75.js +2 -2
  162. package/dist/index76.js +2 -2
  163. package/dist/index77.js +2 -2
  164. package/dist/index78.js +2 -2
  165. package/dist/index79.js +2 -2
  166. package/dist/index80.js +2 -2
  167. package/dist/index81.js +2 -2
  168. package/dist/index82.js +1 -1
  169. package/dist/index83.js +2 -2
  170. package/dist/index84.js +2 -2
  171. package/package.json +1 -1
package/dist/index212.js CHANGED
@@ -1,263 +1,5 @@
1
- import { nothing, html } from "lit";
2
- import { map as o } from "./index232.js";
3
- import { styleMap as o$1 } from "./index267.js";
4
- function renderFileEntry(entry, onRemove) {
5
- var _a;
6
- const isUploading = entry.status === "uploading";
7
- const isDone = entry.status === "done";
8
- const isError = entry.status === "error";
9
- const rowCls = [
10
- "fu-file",
11
- isDone ? "is-done" : "",
12
- isError ? "is-error" : "",
13
- isUploading ? "is-uploading" : ""
14
- ].filter(Boolean).join(" ");
15
- const ext = ((_a = entry.file.name.split(".").pop()) == null ? void 0 : _a.toLowerCase()) ?? "";
16
- const isImg = ["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(ext);
17
- const fileSize = entry.file.size < 1024 * 1024 ? `${(entry.file.size / 1024).toFixed(0)} KB` : `${(entry.file.size / (1024 * 1024)).toFixed(1)} MB`;
18
- return html`
19
- <div class="${rowCls}">
20
- <!-- Progress background -->
21
- <div
22
- class="fu-file-prog-bg"
23
- style="${o$1({ width: isUploading ? `${entry.progress}%` : isDone ? "100%" : "0%" })}"
24
- ></div>
25
-
26
- <!-- Thumbnail o icono -->
27
- ${isImg && entry.previewUrl ? html`<img class="fu-file-thumb" src="${entry.previewUrl}" alt="${entry.file.name}">` : html`
28
- <div class="fu-file-icon">
29
- ${isDone ? html`<lib-icon name="check-circle" weight="fill" size="sm"></lib-icon>` : isError ? html`<lib-icon name="warning-circle" weight="fill" size="sm"></lib-icon>` : html`<span class="fu-ext">${ext || "—"}</span>`}
30
- </div>`}
31
-
32
- <!-- Meta -->
33
- <div class="fu-file-meta">
34
- <span class="fu-file-name">${entry.file.name}</span>
35
- <span class="fu-file-info">
36
- <span>${fileSize}</span>
37
- ${isError ? html`
38
- <span class="fu-file-info-sep"></span>
39
- <span style="color:var(--color-error)">${entry.errorMessage ?? "Error al subir"}</span>` : nothing}
40
- ${isDone ? html`
41
- <span class="fu-file-info-sep"></span>
42
- <span style="color:var(--color-celadon-500)">Completado</span>` : nothing}
43
- </span>
44
- </div>
45
-
46
- <!-- Acciones -->
47
- <div class="fu-file-actions">
48
- ${isUploading ? html`
49
- <span class="fu-file-pct">${entry.progress}%</span>
50
- <span class="fu-spinner"></span>` : isDone ? html`<span class="fu-status-done"><lib-icon name="check-circle" weight="fill" size="sm"></lib-icon></span>` : isError ? html`<span class="fu-status-error"><lib-icon name="warning" weight="fill" size="sm"></lib-icon></span>` : nothing}
51
-
52
- <button
53
- class="fu-file-remove"
54
- aria-label="Eliminar ${entry.file.name}"
55
- @click="${(e) => {
56
- e.stopPropagation();
57
- onRemove(entry.id);
58
- }}"
59
- >
60
- <lib-icon name="x" size="xs"></lib-icon>
61
- </button>
62
- </div>
63
- </div>
64
- `;
65
- }
66
- function fileUploaderTemplate(props) {
67
- var _a, _b;
68
- const {
69
- zone,
70
- title,
71
- /*subtitle*/
72
- hint,
73
- multiple,
74
- accept,
75
- disabled,
76
- isDragover,
77
- entries,
78
- imagePreviewUrl,
79
- onDragover,
80
- onDragleave,
81
- onDrop,
82
- onInputChange,
83
- onRemove,
84
- onUploadAll,
85
- onClearAll,
86
- onResetImage
87
- } = props;
88
- const doneCount = entries.filter((e) => e.status === "done").length;
89
- const uploadingCount = entries.filter((e) => e.status === "uploading").length;
90
- const allDone = entries.length > 0 && doneCount === entries.length;
91
- const anyUploading = uploadingCount > 0;
92
- if (zone === "default") {
93
- return html`
94
- <div class="fu-root">
95
- <!-- Drop zone -->
96
- <div
97
- class="fu-zone ${isDragover ? "is-dragover" : ""} ${disabled ? "is-disabled" : ""}"
98
- @dragover="${(e) => {
99
- if (!disabled) onDragover(e);
100
- }}"
101
- @dragleave="${() => {
102
- if (!disabled) onDragleave();
103
- }}"
104
- @drop="${(e) => {
105
- if (!disabled) onDrop(e);
106
- }}"
107
- >
108
- <!-- input real cubriendo toda la zona -->
109
- <input
110
- type="file"
111
- ?multiple="${multiple}"
112
- accept="${accept}"
113
- ?disabled="${disabled}"
114
- @change="${onInputChange}"
115
- aria-label="${title}"
116
- >
117
-
118
- <div class="fu-zone-icon">
119
- <lib-icon name="cloud-arrow-up" weight="thin" size="xl"></lib-icon>
120
- </div>
121
-
122
- <div>
123
- <p class="fu-zone-title">${title}</p>
124
- <p class="fu-zone-sub" style="margin-top:var(--lib-space-sm)">
125
- o <span>busca en tu equipo</span>
126
- </p>
127
- </div>
128
-
129
- <p class="fu-zone-hint">${hint}</p>
130
- </div>
131
-
132
- <!-- Lista de archivos -->
133
- ${entries.length > 0 ? html`
134
- <div class="fu-list">
135
- ${o(entries, (entry) => renderFileEntry(entry, onRemove))}
136
- </div>
137
-
138
- <!-- Footer summary -->
139
- <div class="fu-summary">
140
- <span class="fu-summary-text">
141
- ${allDone ? `${doneCount} archivo${doneCount !== 1 ? "s" : ""} subido${doneCount !== 1 ? "s" : ""}` : anyUploading ? `Subiendo ${uploadingCount} archivo${uploadingCount !== 1 ? "s" : ""}…` : `${entries.length} archivo${entries.length !== 1 ? "s" : ""} seleccionado${entries.length !== 1 ? "s" : ""}`}
142
- </span>
143
- <div style="display:flex;gap:var(--lib-space-sm)">
144
- <button
145
- class="fu-summary-btn"
146
- style="background:transparent;color:var(--text-muted);border:1px solid var(--border-default)"
147
- ?disabled="${anyUploading}"
148
- @click="${onClearAll}"
149
- >Limpiar</button>
150
- <button
151
- class="fu-summary-btn"
152
- ?disabled="${anyUploading || allDone}"
153
- @click="${onUploadAll}"
154
- >
155
- ${anyUploading ? "Subiendo…" : "Subir todo"}
156
- </button>
157
- </div>
158
- </div>
159
- ` : nothing}
160
- </div>
161
- `;
162
- }
163
- if (zone === "compact") {
164
- return html`
165
- <div class="fu-root">
166
- <div
167
- class="fu-zone-sm ${isDragover ? "is-dragover" : ""} ${disabled ? "is-disabled" : ""}"
168
- @dragover="${(e) => {
169
- if (!disabled) onDragover(e);
170
- }}"
171
- @dragleave="${() => {
172
- if (!disabled) onDragleave();
173
- }}"
174
- @drop="${(e) => {
175
- if (!disabled) onDrop(e);
176
- }}"
177
- >
178
- <input
179
- type="file"
180
- ?multiple="${multiple}"
181
- accept="${accept}"
182
- ?disabled="${disabled}"
183
- @change="${onInputChange}"
184
- aria-label="${title}"
185
- >
186
-
187
- <span class="fu-zone-sm-icon">
188
- <lib-icon name="paperclip" size="md"></lib-icon>
189
- </span>
190
-
191
- <div class="fu-zone-sm-text">
192
- <span class="fu-zone-sm-title">${title}</span>
193
- <span class="fu-zone-sm-sub">${hint}</span>
194
- </div>
195
- </div>
196
-
197
- ${entries.length > 0 ? html`
198
- <div class="fu-list" style="margin-top:1px">
199
- ${o(entries, (entry) => renderFileEntry(entry, onRemove))}
200
- </div>
201
- ` : nothing}
202
- </div>
203
- `;
204
- }
205
- return html`
206
- <div class="fu-root">
207
- <div
208
- class="fu-zone-img ${isDragover ? "is-dragover" : ""} ${imagePreviewUrl ? "has-preview" : ""} ${disabled ? "is-disabled" : ""}"
209
- @dragover="${(e) => {
210
- if (!disabled) onDragover(e);
211
- }}"
212
- @dragleave="${() => {
213
- if (!disabled) onDragleave();
214
- }}"
215
- @drop="${(e) => {
216
- if (!disabled) onDrop(e);
217
- }}"
218
- >
219
- <input
220
- type="file"
221
- accept="image/*"
222
- ?disabled="${disabled || !!imagePreviewUrl}"
223
- @change="${onInputChange}"
224
- aria-label="${title}"
225
- >
226
-
227
- <!-- Placeholder (sin imagen) -->
228
- <div class="fu-zone-img-placeholder">
229
- <lib-icon name="image" weight="thin" size="xl" style="color:var(--text-muted)"></lib-icon>
230
- <p class="fu-zone-sub">${title}</p>
231
- <p class="fu-zone-hint">${hint}</p>
232
- </div>
233
-
234
- <!-- Preview (con imagen) -->
235
- ${imagePreviewUrl ? html`<img class="fu-zone-img-preview" src="${imagePreviewUrl}" alt="Preview">` : nothing}
236
-
237
- <!-- Overlay de reemplazo -->
238
- ${imagePreviewUrl ? html`
239
- <div class="fu-zone-img-overlay">
240
- <lib-icon name="camera" size="md" style="color:#fff"></lib-icon>
241
- <span class="fu-zone-img-overlay-text">Cambiar imagen</span>
242
- </div>` : nothing}
243
- </div>
244
-
245
- <!-- Barra de progreso debajo de la zona imagen -->
246
- ${entries.length > 0 && ((_a = entries[0]) == null ? void 0 : _a.status) === "uploading" ? html`
247
- <div class="fu-progress-bar">
248
- <div class="fu-progress-fill" style="width:${((_b = entries[0]) == null ? void 0 : _b.progress) ?? 0}%"></div>
249
- </div>` : nothing}
250
-
251
- ${imagePreviewUrl ? html`
252
- <div style="display:flex;justify-content:flex-end;margin-top:var(--lib-space-sm)">
253
- <button class="fu-file-remove" style="width:auto;padding:0 var(--lib-space-sm);border-radius:0;border:1px solid var(--border-default);font-family:var(--lib-font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase" @click="${onResetImage}">
254
- Eliminar
255
- </button>
256
- </div>` : nothing}
257
- </div>
258
- `;
259
- }
1
+ const sectionCss = "@layer tokens,reset,components;@layer reset{:host{display:block;position:relative}*,*:before,*:after{box-sizing:border-box}}@layer components{:host{height:var(--_scroll-height, 300vh)}.sticky-wrapper{position:sticky;top:0;height:100vh;width:100%;overflow:hidden;display:flex;align-items:center;background:var(--bg-base)}.horizontal-content{display:flex;gap:var(--_gap, calc(var(--lib-space-xl) * 2));padding:0 calc(var(--_padding-inline, 10) * 1vw);will-change:transform}::slotted(*){flex-shrink:0}.progress-bar{position:absolute;bottom:var(--lib-space-xl);left:calc(var(--_padding-inline, 10) * 1vw);width:calc(100% - (var(--_padding-inline, 10) * 2vw));height:1px;background:var(--border-subtle)}.progress-fill{height:100%;width:0%;background:var(--color-washi-900);transition:width 80ms linear}.counter{position:absolute;bottom:calc(var(--lib-space-xl) + 16px);right:calc(var(--_padding-inline, 10) * 1vw);font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-widest);color:var(--text-muted);-webkit-user-select:none;user-select:none}}";
260
2
  export {
261
- fileUploaderTemplate
3
+ sectionCss as default
262
4
  };
263
5
  //# sourceMappingURL=index212.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index212.js","sources":["../src/components/molecules/file-uploader/lib-file-uploader.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport { map } from 'lit/directives/map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport type { FileEntry, FileUploaderTemplateProps } from './lib-file-uploader.types';\n\n/* ================================================================\n FILE ENTRY — una fila en la lista\n ================================================================ */\n\nfunction renderFileEntry(\n entry: FileEntry,\n onRemove: (id: string) => void,\n): TemplateResult {\n const isUploading = entry.status === 'uploading';\n const isDone = entry.status === 'done';\n const isError = entry.status === 'error';\n\n const rowCls = [\n 'fu-file',\n isDone ? 'is-done' : '',\n isError ? 'is-error' : '',\n isUploading ? 'is-uploading' : '',\n ].filter(Boolean).join(' ');\n\n /* Icono o thumbnail para imágenes */\n const ext = entry.file.name.split('.').pop()?.toLowerCase() ?? '';\n const isImg = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(ext);\n\n const fileSize = entry.file.size < 1024 * 1024\n ? `${(entry.file.size / 1024).toFixed(0)} KB`\n : `${(entry.file.size / (1024 * 1024)).toFixed(1)} MB`;\n\n return html`\n <div class=\"${rowCls}\">\n <!-- Progress background -->\n <div\n class=\"fu-file-prog-bg\"\n style=\"${styleMap({ width: isUploading ? `${entry.progress}%` : isDone ? '100%' : '0%' })}\"\n ></div>\n\n <!-- Thumbnail o icono -->\n ${isImg && entry.previewUrl\n ? html`<img class=\"fu-file-thumb\" src=\"${entry.previewUrl}\" alt=\"${entry.file.name}\">`\n : html`\n <div class=\"fu-file-icon\">\n ${isDone\n ? html`<lib-icon name=\"check-circle\" weight=\"fill\" size=\"sm\"></lib-icon>`\n : isError\n ? html`<lib-icon name=\"warning-circle\" weight=\"fill\" size=\"sm\"></lib-icon>`\n : html`<span class=\"fu-ext\">${ext || '—'}</span>`}\n </div>`}\n\n <!-- Meta -->\n <div class=\"fu-file-meta\">\n <span class=\"fu-file-name\">${entry.file.name}</span>\n <span class=\"fu-file-info\">\n <span>${fileSize}</span>\n ${isError\n ? html`\n <span class=\"fu-file-info-sep\"></span>\n <span style=\"color:var(--color-error)\">${entry.errorMessage ?? 'Error al subir'}</span>`\n : nothing}\n ${isDone\n ? html`\n <span class=\"fu-file-info-sep\"></span>\n <span style=\"color:var(--color-celadon-500)\">Completado</span>`\n : nothing}\n </span>\n </div>\n\n <!-- Acciones -->\n <div class=\"fu-file-actions\">\n ${isUploading\n ? html`\n <span class=\"fu-file-pct\">${entry.progress}%</span>\n <span class=\"fu-spinner\"></span>`\n : isDone\n ? html`<span class=\"fu-status-done\"><lib-icon name=\"check-circle\" weight=\"fill\" size=\"sm\"></lib-icon></span>`\n : isError\n ? html`<span class=\"fu-status-error\"><lib-icon name=\"warning\" weight=\"fill\" size=\"sm\"></lib-icon></span>`\n : nothing}\n\n <button\n class=\"fu-file-remove\"\n aria-label=\"Eliminar ${entry.file.name}\"\n @click=\"${(e: Event): void => { e.stopPropagation(); onRemove(entry.id); }}\"\n >\n <lib-icon name=\"x\" size=\"xs\"></lib-icon>\n </button>\n </div>\n </div>\n `;\n}\n\n/* ================================================================\n TEMPLATE PRINCIPAL\n ================================================================ */\n\nexport function fileUploaderTemplate(props: FileUploaderTemplateProps): TemplateResult {\n const {\n zone, title, /*subtitle*/ hint, multiple, accept, disabled,\n isDragover, entries, imagePreviewUrl,\n onDragover, onDragleave, onDrop, onInputChange, onRemove,\n onUploadAll, onClearAll, onResetImage,\n } = props;\n\n const doneCount = entries.filter(e => e.status === 'done').length;\n const uploadingCount = entries.filter(e => e.status === 'uploading').length;\n const allDone = entries.length > 0 && doneCount === entries.length;\n const anyUploading = uploadingCount > 0;\n\n /* ────────────────────────────────────\n VARIANTE: default (zona grande)\n ──────────────────────────────────── */\n if (zone === 'default') {\n return html`\n <div class=\"fu-root\">\n <!-- Drop zone -->\n <div\n class=\"fu-zone ${isDragover ? 'is-dragover' : ''} ${disabled ? 'is-disabled' : ''}\"\n @dragover=\"${(e: DragEvent): void => { if (!disabled) onDragover(e); }}\"\n @dragleave=\"${(): void => { if (!disabled) onDragleave(); }}\"\n @drop=\"${(e: DragEvent): void => { if (!disabled) onDrop(e); }}\"\n >\n <!-- input real cubriendo toda la zona -->\n <input\n type=\"file\"\n ?multiple=\"${multiple}\"\n accept=\"${accept}\"\n ?disabled=\"${disabled}\"\n @change=\"${onInputChange}\"\n aria-label=\"${title}\"\n >\n\n <div class=\"fu-zone-icon\">\n <lib-icon name=\"cloud-arrow-up\" weight=\"thin\" size=\"xl\"></lib-icon>\n </div>\n\n <div>\n <p class=\"fu-zone-title\">${title}</p>\n <p class=\"fu-zone-sub\" style=\"margin-top:var(--lib-space-sm)\">\n o <span>busca en tu equipo</span>\n </p>\n </div>\n\n <p class=\"fu-zone-hint\">${hint}</p>\n </div>\n\n <!-- Lista de archivos -->\n ${entries.length > 0 ? html`\n <div class=\"fu-list\">\n ${map(entries, (entry: FileEntry) => renderFileEntry(entry, onRemove))}\n </div>\n\n <!-- Footer summary -->\n <div class=\"fu-summary\">\n <span class=\"fu-summary-text\">\n ${allDone\n ? `${doneCount} archivo${doneCount !== 1 ? 's' : ''} subido${doneCount !== 1 ? 's' : ''}`\n : anyUploading\n ? `Subiendo ${uploadingCount} archivo${uploadingCount !== 1 ? 's' : ''}…`\n : `${entries.length} archivo${entries.length !== 1 ? 's' : ''} seleccionado${entries.length !== 1 ? 's' : ''}`}\n </span>\n <div style=\"display:flex;gap:var(--lib-space-sm)\">\n <button\n class=\"fu-summary-btn\"\n style=\"background:transparent;color:var(--text-muted);border:1px solid var(--border-default)\"\n ?disabled=\"${anyUploading}\"\n @click=\"${onClearAll}\"\n >Limpiar</button>\n <button\n class=\"fu-summary-btn\"\n ?disabled=\"${anyUploading || allDone}\"\n @click=\"${onUploadAll}\"\n >\n ${anyUploading ? 'Subiendo…' : 'Subir todo'}\n </button>\n </div>\n </div>\n ` : nothing}\n </div>\n `;\n }\n\n /* ────────────────────────────────────\n VARIANTE: compact (horizontal)\n ──────────────────────────────────── */\n if (zone === 'compact') {\n return html`\n <div class=\"fu-root\">\n <div\n class=\"fu-zone-sm ${isDragover ? 'is-dragover' : ''} ${disabled ? 'is-disabled' : ''}\"\n @dragover=\"${(e: DragEvent): void => { if (!disabled) onDragover(e); }}\"\n @dragleave=\"${(): void => { if (!disabled) onDragleave(); }}\"\n @drop=\"${(e: DragEvent): void => { if (!disabled) onDrop(e); }}\"\n >\n <input\n type=\"file\"\n ?multiple=\"${multiple}\"\n accept=\"${accept}\"\n ?disabled=\"${disabled}\"\n @change=\"${onInputChange}\"\n aria-label=\"${title}\"\n >\n\n <span class=\"fu-zone-sm-icon\">\n <lib-icon name=\"paperclip\" size=\"md\"></lib-icon>\n </span>\n\n <div class=\"fu-zone-sm-text\">\n <span class=\"fu-zone-sm-title\">${title}</span>\n <span class=\"fu-zone-sm-sub\">${hint}</span>\n </div>\n </div>\n\n ${entries.length > 0 ? html`\n <div class=\"fu-list\" style=\"margin-top:1px\">\n ${map(entries, (entry: FileEntry) => renderFileEntry(entry, onRemove))}\n </div>\n ` : nothing}\n </div>\n `;\n }\n\n /* ────────────────────────────────────\n VARIANTE: image (preview inline)\n ──────────────────────────────────── */\n return html`\n <div class=\"fu-root\">\n <div\n class=\"fu-zone-img ${isDragover ? 'is-dragover' : ''} ${imagePreviewUrl ? 'has-preview' : ''} ${disabled ? 'is-disabled' : ''}\"\n @dragover=\"${(e: DragEvent): void => { if (!disabled) onDragover(e); }}\"\n @dragleave=\"${(): void => { if (!disabled) onDragleave(); }}\"\n @drop=\"${(e: DragEvent): void => { if (!disabled) onDrop(e); }}\"\n >\n <input\n type=\"file\"\n accept=\"image/*\"\n ?disabled=\"${disabled || !!imagePreviewUrl}\"\n @change=\"${onInputChange}\"\n aria-label=\"${title}\"\n >\n\n <!-- Placeholder (sin imagen) -->\n <div class=\"fu-zone-img-placeholder\">\n <lib-icon name=\"image\" weight=\"thin\" size=\"xl\" style=\"color:var(--text-muted)\"></lib-icon>\n <p class=\"fu-zone-sub\">${title}</p>\n <p class=\"fu-zone-hint\">${hint}</p>\n </div>\n\n <!-- Preview (con imagen) -->\n ${imagePreviewUrl\n ? html`<img class=\"fu-zone-img-preview\" src=\"${imagePreviewUrl}\" alt=\"Preview\">`\n : nothing}\n\n <!-- Overlay de reemplazo -->\n ${imagePreviewUrl\n ? html`\n <div class=\"fu-zone-img-overlay\">\n <lib-icon name=\"camera\" size=\"md\" style=\"color:#fff\"></lib-icon>\n <span class=\"fu-zone-img-overlay-text\">Cambiar imagen</span>\n </div>`\n : nothing}\n </div>\n\n <!-- Barra de progreso debajo de la zona imagen -->\n ${entries.length > 0 && entries[0]?.status === 'uploading'\n ? html`\n <div class=\"fu-progress-bar\">\n <div class=\"fu-progress-fill\" style=\"width:${entries[0]?.progress ?? 0}%\"></div>\n </div>`\n : nothing}\n\n ${imagePreviewUrl\n ? html`\n <div style=\"display:flex;justify-content:flex-end;margin-top:var(--lib-space-sm)\">\n <button class=\"fu-file-remove\" style=\"width:auto;padding:0 var(--lib-space-sm);border-radius:0;border:1px solid var(--border-default);font-family:var(--lib-font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase\" @click=\"${onResetImage}\">\n Eliminar\n </button>\n </div>`\n : nothing}\n </div>\n `;\n}"],"names":["styleMap","map"],"mappings":"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"}
1
+ {"version":3,"file":"index212.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
package/dist/index213.js CHANGED
@@ -1,20 +1,12 @@
1
- import { renderClassic } from "./index353.js";
2
- import { renderCentered } from "./index354.js";
3
- import { renderMega } from "./index355.js";
4
- import { renderAppBar } from "./index356.js";
5
- function headerTemplate(ctx) {
6
- switch (ctx.variant) {
7
- case "centered":
8
- return renderCentered(ctx);
9
- case "mega":
10
- return renderMega(ctx);
11
- case "app-bar":
12
- return renderAppBar(ctx);
13
- default:
14
- return renderClassic(ctx);
15
- }
1
+ import { html } from "lit";
2
+ function parallaxTemplate(_ctx) {
3
+ return html`
4
+ <div class="parallax-wrapper" part="wrapper">
5
+ <slot></slot>
6
+ </div>
7
+ `;
16
8
  }
17
9
  export {
18
- headerTemplate
10
+ parallaxTemplate
19
11
  };
20
12
  //# sourceMappingURL=index213.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index213.js","sources":["../src/components/molecules/header/lib-header.html.ts"],"sourcesContent":["import { TemplateResult } from 'lit';\nimport type { LibHeader } from './lib-header.component';\n\nimport { renderClassic } from './templates/header-classic.html';\nimport { renderCentered } from './templates/header-centered.html';\nimport { renderMega } from './templates/header-mega.html';\nimport { renderAppBar } from './templates/header-app-bar.html';\n\n/**\n * Dispatcher principal del componente lib-header.\n *\n * No contiene lógica de presentación propia.\n * Cada variante vive en su propio fichero dentro de /templates.\n *\n * Variantes → fichero\n * ───────────────────────────────────────────────────────────\n * classic · dark · transparent · kintsugi\n * glitch · minimal · shrink → header-classic.html.ts\n * centered → header-centered.html.ts\n * mega → header-mega.html.ts\n * app-bar → header-app-bar.html.ts\n *\n * Helpers compartidos (logo, links, actions, SVGs) → header-shared.html.ts\n * Móvil (hamburger + drawer) → header-mobile.html.ts\n */\nexport function headerTemplate(ctx: LibHeader): TemplateResult {\n switch (ctx.variant) {\n case 'centered': return renderCentered(ctx);\n case 'mega': return renderMega(ctx);\n case 'app-bar': return renderAppBar(ctx);\n default: return renderClassic(ctx);\n }\n}"],"names":[],"mappings":";;;;AAyBO,SAAS,eAAe,KAAgC;AAC7D,UAAQ,IAAI,SAAA;AAAA,IACV,KAAK;AAAY,aAAO,eAAe,GAAG;AAAA,IAC1C,KAAK;AAAY,aAAO,WAAW,GAAG;AAAA,IACtC,KAAK;AAAY,aAAO,aAAa,GAAG;AAAA,IACxC;AAAiB,aAAO,cAAc,GAAG;AAAA,EAAA;AAE7C;"}
1
+ {"version":3,"file":"index213.js","sources":["../src/components/organisms/parallax-container/lib-parallax.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\nimport type { LibParallaxContainer } from './lib-parallax.component';\n\n// _ctx disponible para futuras extensiones del template (slot named, etc.)\nexport function parallaxTemplate(_ctx: LibParallaxContainer): TemplateResult {\n return html`\n <div class=\"parallax-wrapper\" part=\"wrapper\">\n <slot></slot>\n </div>\n `;\n}"],"names":[],"mappings":";AAIO,SAAS,iBAAiB,MAA4C;AAC3E,SAAO;AAAA;AAAA;AAAA;AAAA;AAKT;"}
package/dist/index214.js CHANGED
@@ -1,5 +1,5 @@
1
- const headerCss = '@layer tokens,reset,components;@layer reset{:host{display:block;position:relative;z-index:var(--z-overlay)}*,*:before,*:after{box-sizing:border-box}a{text-decoration:none}button{font:inherit;cursor:pointer;background:none;border:none}}@layer components{.hdr{width:100%;display:flex;align-items:center;position:relative;overflow:visible;transition:height var(--duration-slow) var(--ease-out),background var(--duration-slow) var(--ease-out),border-color var(--duration-slow) var(--ease-out),backdrop-filter var(--duration-slow) var(--ease-out),box-shadow var(--duration-slow) var(--ease-out)}:host([variant="classic"]) .hdr{height:64px;background:var(--bg-elevated);border-bottom:1px solid var(--border-subtle);padding:0 var(--lib-space-xl);gap:var(--lib-space-xl)}:host([variant="dark"]) .hdr{height:64px;background:#120e0ad9;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid rgb(255,255,255,.07);padding:0 var(--lib-space-xl);gap:var(--lib-space-xl)}:host([variant="centered"]) .hdr{height:64px;background:var(--bg-elevated);border-bottom:1px solid var(--border-subtle);display:grid;grid-template-columns:1fr auto 1fr;padding:0 var(--lib-space-xl);gap:var(--lib-space-lg)}.hdr-announcement{height:36px;background:var(--color-kaki-50);border-bottom:1px solid rgb(184,90,30,.15);display:flex;align-items:center;justify-content:center;gap:var(--lib-space-md);padding:0 var(--lib-space-xl);font-family:var(--lib-font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-kaki-600)}.hdr-announcement a{color:var(--color-kaki-500);text-decoration:underline;text-underline-offset:2px}:host([variant="transparent"]) .hdr{height:68px;background:transparent;border-bottom:1px solid transparent;padding:0 var(--lib-space-xl);gap:var(--lib-space-xl)}:host([variant="transparent"][scrolled]) .hdr{background:#120e0ad1;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom-color:#ffffff12}:host([variant="kintsugi"]) .hdr{height:64px;background:var(--color-washi-950);border-bottom:none;padding:0 var(--lib-space-xl);gap:var(--lib-space-xl)}:host([variant="kintsugi"]) .hdr:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgb(184,90,30,.4) 10%,var(--color-kaki-400) 30%,#F5D08A 50%,var(--color-kaki-400) 70%,rgb(184,90,30,.4) 90%,transparent);background-size:200% 100%;animation:hdr-kintsugi-seam 5s linear infinite;pointer-events:none}@keyframes hdr-kintsugi-seam{0%{background-position:-200% 0}to{background-position:200% 0}}:host([variant="glitch"]) .hdr{height:56px;background:var(--color-washi-950);border-bottom:1px solid rgb(255,255,255,.06);padding:0 var(--lib-space-lg);gap:var(--lib-space-xl);position:relative;overflow:hidden;animation:hdr-glitch 7s steps(1) infinite}:host([variant="glitch"]) .hdr:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgb(255,255,255,.012) 3px,rgb(255,255,255,.012) 4px);pointer-events:none;z-index:5;animation:hdr-scanline-shift 7s steps(1) infinite}@keyframes hdr-glitch{0%,88%,to{transform:none}89%{transform:translate(-2px)}90%{transform:translate(2px)}91%{transform:none}}@keyframes hdr-scanline-shift{0%,88%,to{opacity:1;transform:none}89%{transform:translateY(-3px);opacity:.7}90%{transform:translateY(2px);opacity:.9}91%{transform:none;opacity:1}}:host([variant="mega"]) .hdr{height:64px;background:var(--bg-elevated);border-bottom:1px solid var(--border-subtle);padding:0 var(--lib-space-xl);gap:var(--lib-space-xl);z-index:var(--z-overlay)}.hdr-mega-panel{position:absolute;top:64px;left:0;right:0;background:var(--bg-elevated);border-bottom:1px solid var(--border-subtle);box-shadow:0 12px 40px #1a140e1a;z-index:calc(var(--z-overlay) - 1);opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out)}.hdr-mega-panel.is-open{opacity:1;transform:translateY(0);pointer-events:auto}.hdr-mega-inner{max-width:1200px;margin:0 auto;padding:var(--lib-space-xl);display:grid;grid-template-columns:1fr 1fr 1fr 240px;gap:var(--lib-space-xl)}.hdr-mega-group-title{font-family:var(--lib-font-mono);font-size:8px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--lib-space-md)}.hdr-mega-link{display:block;font-family:var(--lib-font-body);font-size:var(--text-sm);color:var(--color-washi-700);padding:var(--lib-space-xs) 0;transition:color var(--duration-fast)}.hdr-mega-link:hover{color:var(--color-kaki-500)}.hdr-mega-cta{background:var(--color-kaki-50);border:1px solid rgb(184,90,30,.15);padding:var(--lib-space-lg)}.hdr-mega-cta-label{font-family:var(--lib-font-mono);font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--color-kaki-500);margin-bottom:var(--lib-space-md)}.hdr-mega-cta-title{font-family:var(--lib-font-display);font-size:1.1rem;font-weight:300;color:var(--color-kaki-600);margin-bottom:var(--lib-space-sm);line-height:1.3}.hdr-mega-cta-desc{font-size:var(--text-xs);color:var(--color-kaki-600);line-height:1.7;margin-bottom:var(--lib-space-md)}.hdr-mega-overlay{position:absolute;top:64px;left:0;right:0;height:300px;background:#1a140e40;opacity:0;pointer-events:none;transition:opacity var(--duration-base);z-index:calc(var(--z-overlay) - 2)}.hdr-mega-overlay.is-open{opacity:1;pointer-events:auto}:host([variant="minimal"]) .hdr{height:60px;background:transparent;border-bottom:none;padding:0 var(--lib-space-xl);gap:var(--lib-space-xl)}:host([variant="shrink"]) .hdr{height:72px;background:var(--bg-elevated);border-bottom:1px solid transparent;padding:0 var(--lib-space-xl);gap:var(--lib-space-xl)}:host([variant="shrink"][shrunk]) .hdr{height:48px;border-bottom-color:var(--border-subtle);box-shadow:0 1px 8px #1a140e12}:host([variant="shrink"]) .hdr-logo-mark{width:36px;height:36px;font-size:1.3rem}:host([variant="shrink"][shrunk]) .hdr-logo-mark{width:26px;height:26px;font-size:.95rem}:host([variant="shrink"]) .hdr-brand-name{font-size:1.3rem;transition:font-size var(--duration-slow) var(--ease-out)}:host([variant="shrink"][shrunk]) .hdr-brand-name{font-size:1rem}.hdr-tagline{font-family:var(--lib-font-mono);font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);line-height:1;margin-top:3px;overflow:hidden;max-height:20px;opacity:1;transition:max-height var(--duration-slow) var(--ease-out),opacity var(--duration-slow) var(--ease-out)}:host([variant="shrink"][shrunk]) .hdr-tagline{max-height:0;opacity:0}:host([variant="app-bar"]) .hdr{height:56px;background:var(--bg-elevated);border-bottom:1px solid var(--border-subtle);padding:0 var(--lib-space-lg);gap:var(--lib-space-md)}:host([variant="app-bar"][compact]) .hdr{height:44px;background:#120e0ae6;border-bottom-color:#ffffff12}.hdr-breadcrumbs{display:flex;align-items:center;gap:var(--lib-space-xs);font-family:var(--lib-font-mono);font-size:9px;letter-spacing:.1em;flex-shrink:0}.hdr-breadcrumb-link{color:var(--text-muted);text-transform:uppercase;transition:color var(--duration-fast)}.hdr-breadcrumb-link:hover{color:var(--text-primary)}.hdr-breadcrumb-sep{color:var(--color-washi-300)}.hdr-breadcrumb-current{color:var(--color-washi-700);text-transform:uppercase}:host([variant="app-bar"][compact]) .hdr-breadcrumb-link{color:#faf7f440}:host([variant="app-bar"][compact]) .hdr-breadcrumb-sep{color:#ffffff1f}:host([variant="app-bar"][compact]) .hdr-breadcrumb-current{color:#faf7f480}.hdr-search{display:flex;align-items:center;gap:var(--lib-space-xs);border:1px solid var(--border-subtle);background:var(--bg-base);height:32px;padding:0 var(--lib-space-sm);max-width:320px;flex:1}:host([variant="app-bar"][compact]) .hdr-search{border-color:#ffffff12;background:#ffffff08;height:26px;max-width:260px}.hdr-search input{flex:1;background:none;border:none;outline:none;font-family:var(--lib-font-mono);font-size:9px;letter-spacing:.1em;color:var(--text-primary);width:100%}.hdr-search input::placeholder{color:var(--text-muted)}:host([variant="app-bar"][compact]) .hdr-search input{color:#faf7f499}.hdr-search-kbd{font-family:var(--lib-font-mono);font-size:7px;color:var(--color-washi-300);border:1px solid var(--color-washi-200);padding:0 4px;flex-shrink:0;margin-left:auto}:host([variant="app-bar"][compact]) .hdr-search-kbd{display:none}.hdr-notif{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);position:relative;flex-shrink:0;transition:color var(--duration-base)}.hdr-notif:hover{color:var(--text-primary)}.hdr-notif-dot{position:absolute;top:4px;right:4px;width:5px;height:5px;border-radius:50%;background:var(--color-kaki-400);border:1px solid var(--bg-elevated)}:host([variant="app-bar"][compact]) .hdr-notif{width:26px;height:26px;color:#faf7f440}:host([variant="app-bar"][compact]) .hdr-notif:hover{color:#faf7f4b3}:host([variant="app-bar"][compact]) .hdr-notif-dot{border-color:#120e0ae6}.hdr-avatar{width:30px;height:30px;border-radius:50%;background:var(--color-kaki-500);display:flex;align-items:center;justify-content:center;font-family:var(--lib-font-display);color:#fff;font-size:.9rem;cursor:pointer;flex-shrink:0}:host([variant="app-bar"][compact]) .hdr-avatar{width:26px;height:26px;font-size:.8rem;background:#b85a1e33;border:1px solid rgb(184,90,30,.25);color:var(--color-kaki-400)}.hdr-status{display:flex;align-items:center;gap:var(--lib-space-xs)}.hdr-status-dot{width:6px;height:6px;border-radius:50%;background:var(--color-celadon-400);flex-shrink:0}.hdr-status-text{font-family:var(--lib-font-mono);font-size:8px;letter-spacing:.1em;color:#faf7f433}.hdr-logo{display:flex;align-items:center;gap:var(--lib-space-sm);flex-shrink:0;text-decoration:none;color:inherit}.hdr-logo-mark{width:30px;height:30px;background:var(--color-kaki-500);display:flex;align-items:center;justify-content:center;font-family:var(--lib-font-display);color:#fff;font-size:1.1rem;font-weight:300;flex-shrink:0;transition:all var(--duration-slow) var(--ease-out)}:host([variant="dark"]) .hdr-logo-mark,:host([variant="transparent"]) .hdr-logo-mark{background:#b85a1e33;border:1px solid rgb(184,90,30,.35);color:var(--color-kaki-400)}:host([variant="transparent"]) .hdr-logo-mark{background:#faf7f426;border:1px solid rgb(250,247,244,.25);color:#faf7f4cc}:host([variant="kintsugi"]) .hdr-logo-mark{position:relative;background:transparent;border:none;border-radius:50%;overflow:visible}:host([variant="kintsugi"]) .hdr-logo-mark:before{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:50%;background:conic-gradient(var(--color-kaki-600),#F5D08A,var(--color-kaki-400),#F5D08A,var(--color-kaki-600));animation:hdr-logo-ring 4s linear infinite}:host([variant="kintsugi"]) .hdr-logo-mark:after{content:"";position:absolute;top:1px;right:1px;bottom:1px;left:1px;border-radius:50%;background:var(--color-washi-950)}:host([variant="kintsugi"]) .hdr-logo-mark-text{position:relative;z-index:2;color:var(--color-kaki-400)}@keyframes hdr-logo-ring{to{transform:rotate(360deg)}}.hdr-brand-name{font-family:var(--lib-font-display);font-size:1.2rem;font-weight:300;letter-spacing:.06em;white-space:nowrap}:host([variant="classic"]) .hdr-brand-name,:host([variant="mega"]) .hdr-brand-name,:host([variant="shrink"]) .hdr-brand-name{color:var(--color-washi-900)}:host([variant="dark"]) .hdr-brand-name{color:#faf7f499}:host([variant="transparent"]) .hdr-brand-name{color:#faf7f4bf;transition:color var(--duration-slow)}:host([variant="transparent"][scrolled]) .hdr-brand-name{color:#faf7f4a6}:host([variant="kintsugi"]) .hdr-brand-name{color:#faf7f480}:host([variant="centered"]) .hdr-brand-name{color:var(--color-washi-900);font-size:1.35rem;letter-spacing:.1em}:host([variant="minimal"]) .hdr-brand-name{font-family:var(--lib-font-display);font-size:1.4rem;letter-spacing:.12em;color:var(--color-washi-700)}.hdr-version{font-family:var(--lib-font-mono);font-size:7px;letter-spacing:.18em;text-transform:uppercase;color:#b85a1e80;border:1px solid rgb(184,90,30,.2);padding:1px 5px;margin-left:2px}.hdr-logo-glitch{font-family:var(--lib-font-mono);font-size:.8rem;letter-spacing:.2em;color:var(--color-kaki-400);display:flex;align-items:center;gap:var(--lib-space-xs);text-decoration:none;position:relative;z-index:6;flex-shrink:0}.hdr-logo-glitch-badge{font-family:var(--lib-font-mono);font-size:7px;letter-spacing:.14em;color:#faf7f426;border:1px solid rgb(255,255,255,.08);padding:1px 4px}.hdr-nav{display:flex;align-items:center;gap:var(--lib-space-lg);flex:1}.hdr-nav--right{justify-content:flex-end}.hdr-link{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;gap:4px;transition:opacity var(--duration-fast),color var(--duration-fast);white-space:nowrap}.hdr-link:hover{opacity:.7}:host([variant="classic"]) .hdr-link,:host([variant="centered"]) .hdr-link,:host([variant="mega"]) .hdr-link,:host([variant="shrink"]) .hdr-link{color:var(--color-washi-600)}:host([variant="dark"]) .hdr-link{color:#faf7f44d}:host([variant="transparent"]) .hdr-link{color:#faf7f48c;transition:color var(--duration-slow)}:host([variant="transparent"][scrolled]) .hdr-link{color:#faf7f473}:host([variant="kintsugi"]) .hdr-link{color:#faf7f447}:host([variant="kintsugi"]) .hdr-link:hover{opacity:1;color:var(--color-kaki-400)}:host([variant="glitch"]) .hdr-link{font-family:var(--lib-font-mono);font-size:9px;letter-spacing:.12em;text-transform:none;color:#faf7f438;position:relative;z-index:6}:host([variant="glitch"]) .hdr-link:hover{opacity:1;color:var(--color-kaki-400)}:host([variant="minimal"]) .hdr-link{font-family:var(--lib-font-body);font-size:var(--text-sm);letter-spacing:0;text-transform:none;color:var(--color-washi-500);position:relative;padding-bottom:2px}:host([variant="minimal"]) .hdr-link:hover{opacity:1;color:var(--color-washi-900)}:host([variant="minimal"]) .hdr-link.is-active{color:var(--color-washi-900)}:host([variant="minimal"]) .hdr-link.is-active:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:1px;background:var(--color-washi-700)}.hdr-link-chevron{transition:transform var(--duration-base)}.hdr-link.dd-open .hdr-link-chevron{transform:rotate(180deg)}.hdr-dd{position:relative;display:inline-block}.hdr-dd-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:180px;display:none;z-index:calc(var(--z-overlay) + 1);box-shadow:0 8px 32px #1a140e1f;background:var(--bg-elevated);border:1px solid var(--border-subtle)}.hdr-dd:hover .hdr-dd-menu{display:block}:host([variant="dark"]) .hdr-dd-menu{background:var(--color-washi-900);border-color:#ffffff1a}.hdr-dd-item{display:block;padding:var(--lib-space-sm) var(--lib-space-md);font-family:var(--lib-font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-washi-500);transition:all var(--duration-fast)}.hdr-dd-item:hover{background:var(--bg-base);color:var(--color-washi-900)}.hdr-dd-item--divider{border-top:1px solid var(--color-washi-100)}:host([variant="dark"]) .hdr-dd-item{color:#faf7f459}:host([variant="dark"]) .hdr-dd-item:hover{background:#ffffff0f;color:#faf7f4cc}.hdr-actions{display:flex;align-items:center;gap:var(--lib-space-sm);flex-shrink:0;position:relative;z-index:6}.hdr-action{font-family:var(--lib-font-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;height:36px;padding:0 var(--lib-space-md);display:inline-flex;align-items:center;gap:var(--lib-space-xs);transition:all var(--duration-base);white-space:nowrap;text-decoration:none;cursor:pointer}.hdr-action--kaki{background:var(--color-kaki-500);color:#fff;border:1px solid var(--color-kaki-500)}.hdr-action--kaki:hover{background:var(--color-kaki-600)}.hdr-action--outline{background:transparent;color:var(--color-washi-600);border:1px solid var(--color-washi-300)}.hdr-action--outline:hover{border-color:var(--color-washi-500);color:var(--color-washi-900)}.hdr-action--ghost{background:transparent;color:#faf7f48c;border:1px solid rgb(255,255,255,.12)}.hdr-action--ghost:hover{border-color:#ffffff40;color:#faf7f4d9}.hdr-action--kintsugi{background:transparent;border:1px solid rgb(184,90,30,.35);color:var(--color-kaki-400)}.hdr-action--kintsugi:hover{border-color:var(--color-kaki-400);background:#b85a1e14}.hdr-action--glitch{background:transparent;border:1px solid rgb(255,255,255,.1);color:#faf7f459;animation:hdr-glitch-cta 7s steps(1) infinite;height:30px}.hdr-action--glitch:hover{border-color:var(--color-kaki-400);color:var(--color-kaki-400)}@keyframes hdr-glitch-cta{0%,88%,to{box-shadow:none}89%{box-shadow:-2px 0 #d9723459,2px 0 #4e948240}90%{box-shadow:2px 0 #d972344d,-2px 0 #4e948233}91%{box-shadow:none}}.hdr-login{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;transition:opacity var(--duration-fast),color var(--duration-fast);text-decoration:none;white-space:nowrap}:host([variant="classic"]) .hdr-login,:host([variant="shrink"]) .hdr-login,:host([variant="mega"]) .hdr-login{color:var(--color-washi-500)}:host([variant="dark"]) .hdr-login{color:#faf7f440}:host([variant="transparent"]) .hdr-login{color:#faf7f466;transition:color var(--duration-slow)}:host([variant="kintsugi"]) .hdr-login{color:#faf7f433}.hdr-login:hover{opacity:.7}.hdr-contact{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--color-kaki-500);text-decoration:none;flex-shrink:0}.hdr-online{font-family:var(--lib-font-mono);font-size:8px;letter-spacing:.12em;color:#4e948299}.hdr-divider{width:1px;height:20px;background:var(--border-subtle);flex-shrink:0}:host([variant="app-bar"][compact]) .hdr-divider{background:#ffffff14;height:16px}.hdr-spacer{flex:1}@media(prefers-reduced-motion:reduce){:host([variant="kintsugi"]) .hdr:after,:host([variant="kintsugi"]) .hdr-logo-mark:before,:host([variant="glitch"]) .hdr,:host([variant="glitch"]) .hdr:before,.hdr-action--glitch{animation:none!important}.hdr{transition:none!important}}}.hdr-burger{display:none;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;margin-left:auto;cursor:pointer;background:none;border:none;padding:0;z-index:6;position:relative}.hdr-mobile-backdrop{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#0806048c;z-index:calc(var(--z-overlay) + 1);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:hdr-backdrop-in .2s var(--ease-out) both}.hdr-mobile-drawer{display:none;position:fixed;top:0;right:0;bottom:0;width:min(320px,85vw);background:var(--color-washi-950, #120E0A);border-left:1px solid rgb(255,255,255,.07);z-index:calc(var(--z-overlay) + 2);flex-direction:column;overflow-y:auto;animation:hdr-drawer-in .24s var(--ease-out) both}.hdr-mobile-drawer.is-open{display:flex}.hdr-mobile-links{flex:1;padding:var(--lib-space-xl, 2rem) var(--lib-space-lg, 1.5rem);display:flex;flex-direction:column;gap:2px}.hdr-mobile-link{font-family:var(--lib-font-display, "Cormorant Garamond", serif);font-size:1.35rem;font-weight:300;letter-spacing:-.01em;color:#faf7f48c;text-decoration:none;padding:.5rem 0;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgb(255,255,255,.05);transition:color .16s}.hdr-mobile-link:hover{color:#faf7f4d9}.hdr-mobile-sub{display:flex;flex-direction:column;gap:2px;padding:var(--lib-space-xs, .25rem) 0 var(--lib-space-sm, .5rem) var(--lib-space-md, 1rem)}.hdr-mobile-sub-link{font-family:var(--lib-font-mono, "DM Mono", monospace);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:#faf7f438;text-decoration:none;padding:.3rem 0;transition:color .16s}.hdr-mobile-sub-link:hover{color:var(--color-kaki-400, #D97234)}.hdr-mobile-col-title{font-family:var(--lib-font-mono, "DM Mono", monospace);font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:#faf7f426;margin:var(--lib-space-md, 1rem) 0 var(--lib-space-xs, .25rem)}.hdr-mobile-divider{height:1px;background:#ffffff12;margin:0 var(--lib-space-lg, 1.5rem)}.hdr-mobile-actions{padding:var(--lib-space-lg, 1.5rem);display:flex;flex-direction:column;gap:var(--lib-space-sm, .5rem)}.hdr-mobile-cta{font-family:var(--lib-font-mono, "DM Mono", monospace);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;background:var(--color-kaki-500, #B85A1E);color:#fff;border:1px solid var(--color-kaki-500, #B85A1E);padding:0 var(--lib-space-md, 1rem);height:40px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;transition:background .16s}.hdr-mobile-cta:hover{background:var(--color-kaki-600, #8C4115)}.hdr-mobile-login{font-family:var(--lib-font-mono, "DM Mono", monospace);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#faf7f440;text-decoration:none;text-align:center;padding:var(--lib-space-xs, .25rem) 0;transition:color .16s}.hdr-mobile-login:hover{color:#faf7f499}.hdr-mobile-footer{display:flex;align-items:center;justify-content:space-between;padding:var(--lib-space-md, 1rem) var(--lib-space-lg, 1.5rem);border-top:1px solid rgb(255,255,255,.07);font-family:var(--lib-font-mono, "DM Mono", monospace);font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:#faf7f41f}.hdr-mobile-close{background:none;border:none;color:#faf7f433;font-size:.8rem;cursor:pointer;padding:var(--lib-space-xs, .25rem);transition:color .16s}.hdr-mobile-close:hover{color:#faf7f499}@keyframes hdr-drawer-in{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes hdr-backdrop-in{0%{opacity:0}to{opacity:1}}@media(max-width:640px){.hdr-burger{display:flex}.hdr-mobile-backdrop{display:block}.hdr-nav,.hdr-actions,.hdr-login,.hdr-contact,.hdr-online,.hdr-divider--desktop,.hdr-status--desktop,.hdr-actions--desktop{display:none!important}:host([variant="centered"]) .hdr{display:flex;grid-template-columns:unset}:host([variant="centered"]) .hdr-nav--centered-left{display:none!important}:host([variant="app-bar"]) .hdr-breadcrumbs{max-width:120px;overflow:hidden}:host([variant="app-bar"]) .hdr-breadcrumb-link,:host([variant="app-bar"]) .hdr-breadcrumb-sep{display:none}:host([variant="app-bar"]) .hdr-search{max-width:36px;overflow:hidden;padding:0 var(--lib-space-xs, .25rem)}:host([variant="app-bar"]) .hdr-search input,:host([variant="app-bar"]) .hdr-search-kbd{display:none}.hdr-mega-panel,.hdr-mega-overlay{display:none!important}:host([variant="classic"]) .hdr,:host([variant="dark"]) .hdr,:host([variant="centered"]) .hdr,:host([variant="mega"]) .hdr{height:56px}:host([variant="shrink"]) .hdr{height:56px}:host([variant="shrink"][shrunk]) .hdr{height:44px}}@media(prefers-reduced-motion:reduce){.hdr-mobile-drawer,.hdr-mobile-backdrop{animation:none}}';
1
+ const parallaxCss = "@layer tokens,reset,components;@layer reset{:host{display:block;position:relative;overflow:hidden;width:100%}*,*:before,*:after{box-sizing:border-box}}@layer components{.parallax-wrapper{position:relative;width:100%;height:100%}:host([visible]) ::slotted(*){will-change:transform}@media(prefers-reduced-motion:reduce){::slotted(*){will-change:auto!important;transform:none!important}}}";
2
2
  export {
3
- headerCss as default
3
+ parallaxCss as default
4
4
  };
5
5
  //# sourceMappingURL=index214.js.map
package/dist/index215.js CHANGED
@@ -1,5 +1,18 @@
1
- const inputStyles = "@layer tokens,reset,components;@layer reset{:host{display:block;width:100%}*,*:before,*:after{box-sizing:border-box}}@layer components{.input-group{display:flex;flex-direction:column;gap:var(--lib-space-xs)}.input-label{font-family:var(--lib-font-mono);font-size:10px;font-weight:var(--weight-regular);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--border-default);display:flex;align-items:center;gap:var(--lib-space-xs)}.input-required{color:var(--color-error);font-size:var(--text-xs)}.input-wrapper{display:flex;align-items:center;gap:var(--lib-space-sm);padding:0 var(--lib-space-md);background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--radius-none);min-height:42px;transition:border-color var(--duration-base) var(--ease-default),box-shadow var(--duration-base) var(--ease-default)}.input-wrapper:focus-within{border-color:var(--color-washi-800);box-shadow:0 0 0 3px var(--color-ink-10)}input{flex:1;border:none;background:transparent;font-family:var(--lib-font-body);font-size:var(--text-sm);color:var(--text-primary);padding:var(--lib-space-sm) 0;outline:none;width:100%}input::placeholder{color:var(--border-strong)}::slotted(*){display:flex;align-items:center;color:var(--text-muted);font-size:var(--text-sm);flex-shrink:0}.input-password-toggle{display:flex;align-items:center;justify-content:center;background:transparent;border:none;padding:var(--lib-space-xs);cursor:pointer;color:var(--text-muted);flex-shrink:0;transition:color var(--duration-base) var(--ease-default)}.input-password-toggle:hover{color:var(--text-primary)}.has-error .input-wrapper{border-color:var(--color-error)}.has-error .input-wrapper:focus-within{border-color:var(--color-error);box-shadow:0 0 0 3px #8c2a1a1a}.has-error .input-label{color:var(--color-error)}.input-error-message{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--color-error)}.is-disabled .input-wrapper{background:var(--bg-surface);border-color:var(--border-subtle);cursor:not-allowed}.is-disabled input{cursor:not-allowed;color:var(--text-muted)}.is-disabled .input-label{color:var(--text-muted)}}";
1
+ import { html } from "lit";
2
+ function parallaxTextStackTemplate(ctx) {
3
+ return html`
4
+ <div class="pts-container" part="container">
5
+ ${ctx.lines.map((line, i) => html`
6
+ <span
7
+ class="pts-layer ${i % 2 === 0 ? "pts-layer--outline" : "pts-layer--italic"}"
8
+ part="layer layer-${i % 2 === 0 ? "outline" : "italic"}"
9
+ aria-hidden="${i > 0}"
10
+ >${line}</span>
11
+ `)}
12
+ </div>
13
+ `;
14
+ }
2
15
  export {
3
- inputStyles as default
16
+ parallaxTextStackTemplate
4
17
  };
5
18
  //# sourceMappingURL=index215.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index215.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
1
+ {"version":3,"file":"index215.js","sources":["../src/components/organisms/parallax-text/lib-parallax-text-stack.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\nimport type { LibParallaxTextStack } from './lib-parallax-text-stack.component';\n\nexport function parallaxTextStackTemplate(ctx: LibParallaxTextStack): TemplateResult {\n return html`\n <div class=\"pts-container\" part=\"container\">\n ${ctx.lines.map((line, i) => html`\n <span\n class=\"pts-layer ${i % 2 === 0 ? 'pts-layer--outline' : 'pts-layer--italic'}\"\n part=\"layer layer-${i % 2 === 0 ? 'outline' : 'italic'}\"\n aria-hidden=\"${i > 0}\"\n >${line}</span>\n `)}\n </div>\n `;\n}"],"names":[],"mappings":";AAGO,SAAS,0BAA0B,KAA2C;AACnF,SAAO;AAAA;AAAA,QAED,IAAI,MAAM,IAAI,CAAC,MAAM,MAAM;AAAA;AAAA,6BAEN,IAAI,MAAM,IAAI,uBAAuB,mBAAmB;AAAA,8BACvD,IAAI,MAAM,IAAI,YAAY,QAAQ;AAAA,yBACvC,IAAI,CAAC;AAAA,WACnB,IAAI;AAAA,OACR,CAAC;AAAA;AAAA;AAGR;"}
package/dist/index216.js CHANGED
@@ -1,69 +1,5 @@
1
- import { nothing, html } from "lit";
2
- function inputTemplate(props) {
3
- const inputType = props.type === "password" && props.showPassword ? "text" : props.type;
4
- return html`
5
- <div class="input-group ${props.error ? "has-error" : ""} ${props.disabled ? "is-disabled" : ""}">
6
-
7
- ${props.label ? html`
8
- <label
9
- class="input-label"
10
- for="${props.uuid}"
11
- >
12
- ${props.label}
13
- ${props.required ? html`<span class="input-required" aria-hidden="true">*</span>` : nothing}
14
- </label>
15
- ` : nothing}
16
-
17
- <div class="input-wrapper">
18
- <slot name="prefix"></slot>
19
-
20
- <input
21
- id="${props.uuid}"
22
- type="${inputType}"
23
- placeholder="${props.placeholder}"
24
- ?required="${props.required}"
25
- ?disabled="${props.disabled}"
26
- aria-invalid="${props.error}"
27
- aria-describedby="${props.error && props.errorMessage ? `${props.uuid}-error` : nothing}"
28
- .value="${props.value}"
29
- @input="${props.handleInput}"
30
- />
31
-
32
- ${props.type === "password" ? html`
33
- <button
34
- class="input-password-toggle"
35
- type="button"
36
- @click="${props.handleTogglePassword}"
37
- aria-label="${props.showPassword ? "Ocultar contraseña" : "Mostrar contraseña"}"
38
- >
39
- ${props.showPassword ? html`
40
- <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
41
- <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/>
42
- <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/>
43
- <line x1="1" y1="1" x2="23" y2="23"/>
44
- </svg>
45
- ` : html`
46
- <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
47
- <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
48
- <circle cx="12" cy="12" r="3"/>
49
- </svg>
50
- `}
51
- </button>
52
- ` : nothing}
53
-
54
- <slot name="suffix"></slot>
55
- </div>
56
-
57
- ${props.error && props.errorMessage ? html`
58
- <span class="input-error-message" id="${props.uuid}-error" role="alert">
59
- ${props.errorMessage}
60
- </span>
61
- ` : nothing}
62
-
63
- </div>
64
- `;
65
- }
1
+ const stackCss = '@layer tokens,reset,components;@layer reset{:host{display:block;padding:10vh 0}*,*:before,*:after{box-sizing:border-box}}@layer components{.pts-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--lib-space-md)}.pts-layer{display:block;will-change:transform;transition:transform var(--duration-fast) var(--ease-out);white-space:nowrap;line-height:.9;text-transform:uppercase;-webkit-user-select:none;user-select:none}:host([size="sm"]) .pts-layer{font-size:clamp(2rem,6vw,4rem)}:host([size="md"]) .pts-layer{font-size:clamp(3rem,8vw,6rem)}:host([size="lg"]) .pts-layer,:host(:not([size])) .pts-layer{font-size:clamp(4rem,10vw,8rem)}:host([size="xl"]) .pts-layer{font-size:clamp(5rem,13vw,10rem)}:host([size="2xl"]) .pts-layer{font-size:clamp(6rem,16vw,14rem)}.pts-layer--outline{font-family:var(--lib-font-display);font-weight:300;letter-spacing:var(--tracking-tight);-webkit-text-stroke:1px var(--text-primary);color:transparent}.pts-layer--italic{font-family:var(--lib-font-body);font-style:italic;font-weight:400;letter-spacing:var(--tracking-tight);color:var(--text-primary)}:host([color="muted"]) .pts-layer--outline{-webkit-text-stroke-color:var(--text-muted)}:host([color="muted"]) .pts-layer--italic{color:var(--text-muted)}:host([color="kaki"]) .pts-layer--outline{-webkit-text-stroke-color:var(--color-kaki-500)}:host([color="kaki"]) .pts-layer--italic{color:var(--color-kaki-500)}:host([color="celadon"]) .pts-layer--outline{-webkit-text-stroke-color:var(--color-celadon-500)}:host([color="celadon"]) .pts-layer--italic{color:var(--color-celadon-500)}@media(prefers-reduced-motion:reduce){.pts-layer{transition:none;transform:none!important}}}';
66
2
  export {
67
- inputTemplate
3
+ stackCss as default
68
4
  };
69
5
  //# sourceMappingURL=index216.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index216.js","sources":["../src/components/molecules/input/lib-input.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\n\nexport interface InputTemplateProps {\n uuid: string;\n type: 'text' | 'email' | 'password';\n label: string;\n placeholder: string;\n required: boolean;\n disabled: boolean;\n error: boolean;\n errorMessage: string;\n value: string;\n showPassword: boolean;\n handleInput: (e: InputEvent) => void;\n handleTogglePassword: () => void;\n}\n\n/**\n * Plantilla base para el componente lib-input.\n * Renderiza un campo de texto con label, slots prefix/suffix y estado de error.\n */\nexport function inputTemplate(props: InputTemplateProps): TemplateResult {\n const inputType = props.type === 'password' && props.showPassword ? 'text' : props.type;\n\n return html`\n <div class=\"input-group ${props.error ? 'has-error' : ''} ${props.disabled ? 'is-disabled' : ''}\">\n\n ${props.label ? html`\n <label\n class=\"input-label\"\n for=\"${props.uuid}\"\n >\n ${props.label}\n ${props.required ? html`<span class=\"input-required\" aria-hidden=\"true\">*</span>` : nothing}\n </label>\n ` : nothing}\n\n <div class=\"input-wrapper\">\n <slot name=\"prefix\"></slot>\n\n <input\n id=\"${props.uuid}\"\n type=\"${inputType}\"\n placeholder=\"${props.placeholder}\"\n ?required=\"${props.required}\"\n ?disabled=\"${props.disabled}\"\n aria-invalid=\"${props.error}\"\n aria-describedby=\"${props.error && props.errorMessage ? `${props.uuid}-error` : nothing}\"\n .value=\"${props.value}\"\n @input=\"${props.handleInput}\"\n />\n\n ${props.type === 'password' ? html`\n <button\n class=\"input-password-toggle\"\n type=\"button\"\n @click=\"${props.handleTogglePassword}\"\n aria-label=\"${props.showPassword ? 'Ocultar contraseña' : 'Mostrar contraseña'}\"\n >\n ${props.showPassword ? html`\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94\"/>\n <path d=\"M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19\"/>\n <line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"/>\n </svg>\n ` : html`\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/>\n <circle cx=\"12\" cy=\"12\" r=\"3\"/>\n </svg>\n `}\n </button>\n ` : nothing}\n\n <slot name=\"suffix\"></slot>\n </div>\n\n ${props.error && props.errorMessage ? html`\n <span class=\"input-error-message\" id=\"${props.uuid}-error\" role=\"alert\">\n ${props.errorMessage}\n </span>\n ` : nothing}\n\n </div>\n `;\n}"],"names":[],"mappings":";AAqBO,SAAS,cAAc,OAA2C;AACvE,QAAM,YAAY,MAAM,SAAS,cAAc,MAAM,eAAe,SAAS,MAAM;AAEnF,SAAO;AAAA,8BACqB,MAAM,QAAQ,cAAc,EAAE,IAAI,MAAM,WAAW,gBAAgB,EAAE;AAAA;AAAA,QAE3F,MAAM,QAAQ;AAAA;AAAA;AAAA,iBAGL,MAAM,IAAI;AAAA;AAAA,YAEf,MAAM,KAAK;AAAA,YACX,MAAM,WAAW,iEAAiE,OAAO;AAAA;AAAA,UAE3F,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAMD,MAAM,IAAI;AAAA,kBACR,SAAS;AAAA,yBACF,MAAM,WAAW;AAAA,uBACnB,MAAM,QAAQ;AAAA,uBACd,MAAM,QAAQ;AAAA,0BACX,MAAM,KAAK;AAAA,8BACP,MAAM,SAAS,MAAM,eAAe,GAAG,MAAM,IAAI,WAAW,OAAO;AAAA,oBAC7E,MAAM,KAAK;AAAA,oBACX,MAAM,WAAW;AAAA;AAAA;AAAA,UAG3B,MAAM,SAAS,aAAa;AAAA;AAAA;AAAA;AAAA,sBAIhB,MAAM,oBAAoB;AAAA,0BACtB,MAAM,eAAe,uBAAuB,oBAAoB;AAAA;AAAA,cAE5E,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAMnB;AAAA;AAAA;AAAA;AAAA;AAAA,aAKH;AAAA;AAAA,YAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,QAKX,MAAM,SAAS,MAAM,eAAe;AAAA,gDACI,MAAM,IAAI;AAAA,YAC9C,MAAM,YAAY;AAAA;AAAA,UAEpB,OAAO;AAAA;AAAA;AAAA;AAIjB;"}
1
+ {"version":3,"file":"index216.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}