@universal-material/web 3.0.22 → 3.0.23

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 (4) hide show
  1. package/custom-elements.json +330 -330
  2. package/menu/menu.js +1 -1
  3. package/menu/menu.js.map +1 -1
  4. package/package.json +1 -1
package/custom-elements.json CHANGED
@@ -214,6 +214,255 @@
214
214
  }
215
215
  ]
216
216
  },
217
+ {
218
+ "kind": "javascript-module",
219
+ "path": "src/app-bar/top-app-bar.styles.ts",
220
+ "declarations": [
221
+ {
222
+ "kind": "variable",
223
+ "name": "styles",
224
+ "default": "css `\n :host {\n display: block;\n background-color: var(--u-top-app-bar-background-color, var(--u-color-background, var(--u-color-surface, rgb(254, 247, 255))));\n color: var(--u-top-app-bar-text-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n transition: background-color 100ms, inset 375ms cubic-bezier(0.19, 1, 0.22, 1);\n }\n\n :host([container-scrolled]) {\n background-color: var(--u-top-app-bar-elevated-background-color, var(--u-color-surface-container, rgb(243, 237, 247)));\n }\n\n :host(:not([has-leading-icon])) .leading-icon {\n display: none;\n }\n\n :host(:not([has-trailing-icon])) .trailing-icon {\n display: none;\n }\n\n slot[name=leading-icon],\n slot[name=trailing-icon] {\n display: inline-flex;\n align-items: center;\n gap: var(--u-top-app-bar-icons-gap, 8px);\n }\n\n slot[name=leading-icon]::slotted(u-icon-button) {\n color: inherit;\n }\n\n :host([position=absolute]) .content {\n position: absolute;\n }\n\n :host([position=fixed]) .content {\n position: fixed;\n inset-inline: 0;\n inset-block-start: 0;\n inset-inline-start: var(--u-app-bar-offset, 0);\n }\n\n :host([position=absolute]),\n :host([position=fixed]) {\n padding-top: var(--_content-height);\n }\n :host([position=absolute]) .content,\n :host([position=fixed]) .content {\n z-index: var(--u-fixed-app-bar-z-index, 1010);\n }\n\n .content {\n display: flex;\n align-items: center;\n background-color: inherit;\n transition: inherit;\n min-height: var(--u-top-app-bar-min-height, 56px);\n }\n @media (min-width: 840px) {\n .content {\n min-height: var(--u-top-app-bar-extended-min-height, 64px);\n }\n }\n\n .headline {\n font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n line-height: var(--u-top-app-bar-headline-line-height, var(--u-title-l-line-height, 1.75rem));\n font-size: var(--u-top-app-bar-headline-font-size, var(--u-title-l-font-size, 1.375rem));\n letter-spacing: var(--u-top-app-bar-headline-letter-spacing, var(--u-title-l-letter-spacing, 0rem));\n font-weight: var(--u-top-app-bar-headline-font-weight, var(--u-title-l-font-weight, var(--u-font-weight-regular, 400)));\n margin-inline: var(--u-headline-margin, 16px);\n }\n\n .leading-icon {\n margin-inline: var(--u-leading-icon-margin, 8px);\n }\n .leading-icon + .headline {\n margin-inline-start: 0;\n }\n\n .trailing-icon {\n padding-inline: var(--u-trailing-icon-margin, 8px);\n margin-inline-start: auto;\n }\n`"
225
+ }
226
+ ],
227
+ "exports": [
228
+ {
229
+ "kind": "js",
230
+ "name": "styles",
231
+ "declaration": {
232
+ "name": "styles",
233
+ "module": "src/app-bar/top-app-bar.styles.ts"
234
+ }
235
+ }
236
+ ]
237
+ },
238
+ {
239
+ "kind": "javascript-module",
240
+ "path": "src/app-bar/top-app-bar.ts",
241
+ "declarations": [
242
+ {
243
+ "kind": "class",
244
+ "description": "",
245
+ "name": "UmTopAppBar",
246
+ "members": [
247
+ {
248
+ "kind": "field",
249
+ "name": "hasLeadingIcon",
250
+ "type": {
251
+ "text": "boolean"
252
+ },
253
+ "default": "false",
254
+ "description": "Whether the app bar has leading icon or not\n\n_Note:_ Readonly",
255
+ "attribute": "has-leading-icon",
256
+ "reflects": true
257
+ },
258
+ {
259
+ "kind": "field",
260
+ "name": "hasTrailingIcon",
261
+ "type": {
262
+ "text": "boolean"
263
+ },
264
+ "default": "false",
265
+ "description": "Whether the app bar has trailing icon or not\n\n_Note:_ Readonly",
266
+ "attribute": "has-trailing-icon",
267
+ "reflects": true
268
+ },
269
+ {
270
+ "kind": "field",
271
+ "name": "position",
272
+ "type": {
273
+ "text": "'fixed' | 'absolute' | 'static'"
274
+ },
275
+ "default": "'fixed'",
276
+ "attribute": "position",
277
+ "reflects": true
278
+ },
279
+ {
280
+ "kind": "field",
281
+ "name": "scrollContainer",
282
+ "type": {
283
+ "text": "'none' | 'window' | string | undefined"
284
+ },
285
+ "attribute": "scrollContainer",
286
+ "reflects": true
287
+ },
288
+ {
289
+ "kind": "field",
290
+ "name": "containerScrolled",
291
+ "type": {
292
+ "text": "boolean"
293
+ },
294
+ "default": "false",
295
+ "attribute": "container-scrolled",
296
+ "reflects": true
297
+ },
298
+ {
299
+ "kind": "field",
300
+ "name": "assignedLeadingIcons",
301
+ "type": {
302
+ "text": "HTMLElement[]"
303
+ },
304
+ "privacy": "private"
305
+ },
306
+ {
307
+ "kind": "field",
308
+ "name": "assignedTrailingIcons",
309
+ "type": {
310
+ "text": "HTMLElement[]"
311
+ },
312
+ "privacy": "private"
313
+ },
314
+ {
315
+ "kind": "field",
316
+ "name": "content",
317
+ "type": {
318
+ "text": "HTMLElement"
319
+ }
320
+ },
321
+ {
322
+ "kind": "field",
323
+ "name": "contentSizeObserver",
324
+ "type": {
325
+ "text": "ResizeObserver | null"
326
+ },
327
+ "privacy": "private",
328
+ "default": "null"
329
+ },
330
+ {
331
+ "kind": "field",
332
+ "name": "scrollContainerElement",
333
+ "type": {
334
+ "text": "{\n addEventListener: typeof window.addEventListener;\n removeEventListener: typeof window.removeEventListener;\n } | null"
335
+ },
336
+ "privacy": "private",
337
+ "default": "null"
338
+ },
339
+ {
340
+ "kind": "method",
341
+ "name": "getScrollContainer",
342
+ "privacy": "private",
343
+ "return": {
344
+ "type": {
345
+ "text": "{\n addEventListener: typeof window.addEventListener;\n removeEventListener: typeof window.removeEventListener;\n } | undefined"
346
+ }
347
+ },
348
+ "parameters": [
349
+ {
350
+ "name": "idOrElement",
351
+ "type": {
352
+ "text": "string | HTMLElement | undefined"
353
+ }
354
+ }
355
+ ]
356
+ },
357
+ {
358
+ "kind": "method",
359
+ "name": "handleLeadingIconSlotChange",
360
+ "privacy": "private"
361
+ },
362
+ {
363
+ "kind": "method",
364
+ "name": "handleTrailingIconSlotChange",
365
+ "privacy": "private"
366
+ },
367
+ {
368
+ "kind": "field",
369
+ "name": "onContainerScroll"
370
+ },
371
+ {
372
+ "kind": "method",
373
+ "name": "getScrollTop",
374
+ "privacy": "private",
375
+ "static": true,
376
+ "return": {
377
+ "type": {
378
+ "text": "number | null"
379
+ }
380
+ },
381
+ "parameters": [
382
+ {
383
+ "name": "container",
384
+ "type": {
385
+ "text": "HTMLElement & Window"
386
+ }
387
+ }
388
+ ]
389
+ },
390
+ {
391
+ "kind": "method",
392
+ "name": "setContentHeightProperty",
393
+ "privacy": "private"
394
+ }
395
+ ],
396
+ "attributes": [
397
+ {
398
+ "name": "has-leading-icon",
399
+ "type": {
400
+ "text": "boolean"
401
+ },
402
+ "default": "false",
403
+ "description": "Whether the app bar has leading icon or not\n\n_Note:_ Readonly",
404
+ "fieldName": "hasLeadingIcon"
405
+ },
406
+ {
407
+ "name": "has-trailing-icon",
408
+ "type": {
409
+ "text": "boolean"
410
+ },
411
+ "default": "false",
412
+ "description": "Whether the app bar has trailing icon or not\n\n_Note:_ Readonly",
413
+ "fieldName": "hasTrailingIcon"
414
+ },
415
+ {
416
+ "name": "position",
417
+ "type": {
418
+ "text": "'fixed' | 'absolute' | 'static'"
419
+ },
420
+ "default": "'fixed'",
421
+ "fieldName": "position"
422
+ },
423
+ {
424
+ "name": "scrollContainer",
425
+ "type": {
426
+ "text": "'none' | 'window' | string | undefined"
427
+ },
428
+ "fieldName": "scrollContainer"
429
+ },
430
+ {
431
+ "name": "container-scrolled",
432
+ "type": {
433
+ "text": "boolean"
434
+ },
435
+ "default": "false",
436
+ "fieldName": "containerScrolled"
437
+ }
438
+ ],
439
+ "superclass": {
440
+ "name": "LitElement",
441
+ "package": "lit"
442
+ },
443
+ "tagName": "u-top-app-bar",
444
+ "customElement": true
445
+ }
446
+ ],
447
+ "exports": [
448
+ {
449
+ "kind": "js",
450
+ "name": "UmTopAppBar",
451
+ "declaration": {
452
+ "name": "UmTopAppBar",
453
+ "module": "src/app-bar/top-app-bar.ts"
454
+ }
455
+ },
456
+ {
457
+ "kind": "custom-element-definition",
458
+ "name": "u-top-app-bar",
459
+ "declaration": {
460
+ "name": "UmTopAppBar",
461
+ "module": "src/app-bar/top-app-bar.ts"
462
+ }
463
+ }
464
+ ]
465
+ },
217
466
  {
218
467
  "kind": "javascript-module",
219
468
  "path": "src/button/button-base.ts",
@@ -2213,256 +2462,7 @@
2213
2462
  },
2214
2463
  {
2215
2464
  "kind": "javascript-module",
2216
- "path": "src/app-bar/top-app-bar.styles.ts",
2217
- "declarations": [
2218
- {
2219
- "kind": "variable",
2220
- "name": "styles",
2221
- "default": "css `\n :host {\n display: block;\n background-color: var(--u-top-app-bar-background-color, var(--u-color-background, var(--u-color-surface, rgb(254, 247, 255))));\n color: var(--u-top-app-bar-text-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n transition: background-color 100ms, inset 375ms cubic-bezier(0.19, 1, 0.22, 1);\n }\n\n :host([container-scrolled]) {\n background-color: var(--u-top-app-bar-elevated-background-color, var(--u-color-surface-container, rgb(243, 237, 247)));\n }\n\n :host(:not([has-leading-icon])) .leading-icon {\n display: none;\n }\n\n :host(:not([has-trailing-icon])) .trailing-icon {\n display: none;\n }\n\n slot[name=leading-icon],\n slot[name=trailing-icon] {\n display: inline-flex;\n align-items: center;\n gap: var(--u-top-app-bar-icons-gap, 8px);\n }\n\n slot[name=leading-icon]::slotted(u-icon-button) {\n color: inherit;\n }\n\n :host([position=absolute]) .content {\n position: absolute;\n }\n\n :host([position=fixed]) .content {\n position: fixed;\n inset-inline: 0;\n inset-block-start: 0;\n inset-inline-start: var(--u-app-bar-offset, 0);\n }\n\n :host([position=absolute]),\n :host([position=fixed]) {\n padding-top: var(--_content-height);\n }\n :host([position=absolute]) .content,\n :host([position=fixed]) .content {\n z-index: var(--u-fixed-app-bar-z-index, 1010);\n }\n\n .content {\n display: flex;\n align-items: center;\n background-color: inherit;\n transition: inherit;\n min-height: var(--u-top-app-bar-min-height, 56px);\n }\n @media (min-width: 840px) {\n .content {\n min-height: var(--u-top-app-bar-extended-min-height, 64px);\n }\n }\n\n .headline {\n font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n line-height: var(--u-top-app-bar-headline-line-height, var(--u-title-l-line-height, 1.75rem));\n font-size: var(--u-top-app-bar-headline-font-size, var(--u-title-l-font-size, 1.375rem));\n letter-spacing: var(--u-top-app-bar-headline-letter-spacing, var(--u-title-l-letter-spacing, 0rem));\n font-weight: var(--u-top-app-bar-headline-font-weight, var(--u-title-l-font-weight, var(--u-font-weight-regular, 400)));\n margin-inline: var(--u-headline-margin, 16px);\n }\n\n .leading-icon {\n margin-inline: var(--u-leading-icon-margin, 8px);\n }\n .leading-icon + .headline {\n margin-inline-start: 0;\n }\n\n .trailing-icon {\n padding-inline: var(--u-trailing-icon-margin, 8px);\n margin-inline-start: auto;\n }\n`"
2222
- }
2223
- ],
2224
- "exports": [
2225
- {
2226
- "kind": "js",
2227
- "name": "styles",
2228
- "declaration": {
2229
- "name": "styles",
2230
- "module": "src/app-bar/top-app-bar.styles.ts"
2231
- }
2232
- }
2233
- ]
2234
- },
2235
- {
2236
- "kind": "javascript-module",
2237
- "path": "src/app-bar/top-app-bar.ts",
2238
- "declarations": [
2239
- {
2240
- "kind": "class",
2241
- "description": "",
2242
- "name": "UmTopAppBar",
2243
- "members": [
2244
- {
2245
- "kind": "field",
2246
- "name": "hasLeadingIcon",
2247
- "type": {
2248
- "text": "boolean"
2249
- },
2250
- "default": "false",
2251
- "description": "Whether the app bar has leading icon or not\n\n_Note:_ Readonly",
2252
- "attribute": "has-leading-icon",
2253
- "reflects": true
2254
- },
2255
- {
2256
- "kind": "field",
2257
- "name": "hasTrailingIcon",
2258
- "type": {
2259
- "text": "boolean"
2260
- },
2261
- "default": "false",
2262
- "description": "Whether the app bar has trailing icon or not\n\n_Note:_ Readonly",
2263
- "attribute": "has-trailing-icon",
2264
- "reflects": true
2265
- },
2266
- {
2267
- "kind": "field",
2268
- "name": "position",
2269
- "type": {
2270
- "text": "'fixed' | 'absolute' | 'static'"
2271
- },
2272
- "default": "'fixed'",
2273
- "attribute": "position",
2274
- "reflects": true
2275
- },
2276
- {
2277
- "kind": "field",
2278
- "name": "scrollContainer",
2279
- "type": {
2280
- "text": "'none' | 'window' | string | undefined"
2281
- },
2282
- "attribute": "scrollContainer",
2283
- "reflects": true
2284
- },
2285
- {
2286
- "kind": "field",
2287
- "name": "containerScrolled",
2288
- "type": {
2289
- "text": "boolean"
2290
- },
2291
- "default": "false",
2292
- "attribute": "container-scrolled",
2293
- "reflects": true
2294
- },
2295
- {
2296
- "kind": "field",
2297
- "name": "assignedLeadingIcons",
2298
- "type": {
2299
- "text": "HTMLElement[]"
2300
- },
2301
- "privacy": "private"
2302
- },
2303
- {
2304
- "kind": "field",
2305
- "name": "assignedTrailingIcons",
2306
- "type": {
2307
- "text": "HTMLElement[]"
2308
- },
2309
- "privacy": "private"
2310
- },
2311
- {
2312
- "kind": "field",
2313
- "name": "content",
2314
- "type": {
2315
- "text": "HTMLElement"
2316
- }
2317
- },
2318
- {
2319
- "kind": "field",
2320
- "name": "contentSizeObserver",
2321
- "type": {
2322
- "text": "ResizeObserver | null"
2323
- },
2324
- "privacy": "private",
2325
- "default": "null"
2326
- },
2327
- {
2328
- "kind": "field",
2329
- "name": "scrollContainerElement",
2330
- "type": {
2331
- "text": "{\n addEventListener: typeof window.addEventListener;\n removeEventListener: typeof window.removeEventListener;\n } | null"
2332
- },
2333
- "privacy": "private",
2334
- "default": "null"
2335
- },
2336
- {
2337
- "kind": "method",
2338
- "name": "getScrollContainer",
2339
- "privacy": "private",
2340
- "return": {
2341
- "type": {
2342
- "text": "{\n addEventListener: typeof window.addEventListener;\n removeEventListener: typeof window.removeEventListener;\n } | undefined"
2343
- }
2344
- },
2345
- "parameters": [
2346
- {
2347
- "name": "idOrElement",
2348
- "type": {
2349
- "text": "string | HTMLElement | undefined"
2350
- }
2351
- }
2352
- ]
2353
- },
2354
- {
2355
- "kind": "method",
2356
- "name": "handleLeadingIconSlotChange",
2357
- "privacy": "private"
2358
- },
2359
- {
2360
- "kind": "method",
2361
- "name": "handleTrailingIconSlotChange",
2362
- "privacy": "private"
2363
- },
2364
- {
2365
- "kind": "field",
2366
- "name": "onContainerScroll"
2367
- },
2368
- {
2369
- "kind": "method",
2370
- "name": "getScrollTop",
2371
- "privacy": "private",
2372
- "static": true,
2373
- "return": {
2374
- "type": {
2375
- "text": "number | null"
2376
- }
2377
- },
2378
- "parameters": [
2379
- {
2380
- "name": "container",
2381
- "type": {
2382
- "text": "HTMLElement & Window"
2383
- }
2384
- }
2385
- ]
2386
- },
2387
- {
2388
- "kind": "method",
2389
- "name": "setContentHeightProperty",
2390
- "privacy": "private"
2391
- }
2392
- ],
2393
- "attributes": [
2394
- {
2395
- "name": "has-leading-icon",
2396
- "type": {
2397
- "text": "boolean"
2398
- },
2399
- "default": "false",
2400
- "description": "Whether the app bar has leading icon or not\n\n_Note:_ Readonly",
2401
- "fieldName": "hasLeadingIcon"
2402
- },
2403
- {
2404
- "name": "has-trailing-icon",
2405
- "type": {
2406
- "text": "boolean"
2407
- },
2408
- "default": "false",
2409
- "description": "Whether the app bar has trailing icon or not\n\n_Note:_ Readonly",
2410
- "fieldName": "hasTrailingIcon"
2411
- },
2412
- {
2413
- "name": "position",
2414
- "type": {
2415
- "text": "'fixed' | 'absolute' | 'static'"
2416
- },
2417
- "default": "'fixed'",
2418
- "fieldName": "position"
2419
- },
2420
- {
2421
- "name": "scrollContainer",
2422
- "type": {
2423
- "text": "'none' | 'window' | string | undefined"
2424
- },
2425
- "fieldName": "scrollContainer"
2426
- },
2427
- {
2428
- "name": "container-scrolled",
2429
- "type": {
2430
- "text": "boolean"
2431
- },
2432
- "default": "false",
2433
- "fieldName": "containerScrolled"
2434
- }
2435
- ],
2436
- "superclass": {
2437
- "name": "LitElement",
2438
- "package": "lit"
2439
- },
2440
- "tagName": "u-top-app-bar",
2441
- "customElement": true
2442
- }
2443
- ],
2444
- "exports": [
2445
- {
2446
- "kind": "js",
2447
- "name": "UmTopAppBar",
2448
- "declaration": {
2449
- "name": "UmTopAppBar",
2450
- "module": "src/app-bar/top-app-bar.ts"
2451
- }
2452
- },
2453
- {
2454
- "kind": "custom-element-definition",
2455
- "name": "u-top-app-bar",
2456
- "declaration": {
2457
- "name": "UmTopAppBar",
2458
- "module": "src/app-bar/top-app-bar.ts"
2459
- }
2460
- }
2461
- ]
2462
- },
2463
- {
2464
- "kind": "javascript-module",
2465
- "path": "src/checkbox/checkbox.ts",
2465
+ "path": "src/checkbox/checkbox.ts",
2466
2466
  "declarations": [
2467
2467
  {
2468
2468
  "kind": "class",
@@ -2785,6 +2785,86 @@
2785
2785
  }
2786
2786
  ]
2787
2787
  },
2788
+ {
2789
+ "kind": "javascript-module",
2790
+ "path": "src/divider/divider.styles.ts",
2791
+ "declarations": [
2792
+ {
2793
+ "kind": "variable",
2794
+ "name": "styles",
2795
+ "default": "css `\n :host {\n --_divider-thickness: var(--u-divider-thickness, 1px);\n display: block;\n margin-block: 8px;\n height: var(--_divider-thickness);\n background-color: var(--u-divider-color, var(--u-color-outline-variant, rgb(202, 196, 208)));\n }\n\n :host([no-margin]) {\n margin: 0;\n }\n`"
2796
+ }
2797
+ ],
2798
+ "exports": [
2799
+ {
2800
+ "kind": "js",
2801
+ "name": "styles",
2802
+ "declaration": {
2803
+ "name": "styles",
2804
+ "module": "src/divider/divider.styles.ts"
2805
+ }
2806
+ }
2807
+ ]
2808
+ },
2809
+ {
2810
+ "kind": "javascript-module",
2811
+ "path": "src/divider/divider.ts",
2812
+ "declarations": [
2813
+ {
2814
+ "kind": "class",
2815
+ "description": "",
2816
+ "name": "UmDivider",
2817
+ "members": [
2818
+ {
2819
+ "kind": "field",
2820
+ "name": "noMargin",
2821
+ "type": {
2822
+ "text": "boolean"
2823
+ },
2824
+ "default": "false",
2825
+ "description": "When true, remove the margin of the divider",
2826
+ "attribute": "no-margin",
2827
+ "reflects": true
2828
+ }
2829
+ ],
2830
+ "attributes": [
2831
+ {
2832
+ "name": "no-margin",
2833
+ "type": {
2834
+ "text": "boolean"
2835
+ },
2836
+ "default": "false",
2837
+ "description": "When true, remove the margin of the divider",
2838
+ "fieldName": "noMargin"
2839
+ }
2840
+ ],
2841
+ "superclass": {
2842
+ "name": "LitElement",
2843
+ "package": "lit"
2844
+ },
2845
+ "tagName": "u-divider",
2846
+ "customElement": true
2847
+ }
2848
+ ],
2849
+ "exports": [
2850
+ {
2851
+ "kind": "js",
2852
+ "name": "UmDivider",
2853
+ "declaration": {
2854
+ "name": "UmDivider",
2855
+ "module": "src/divider/divider.ts"
2856
+ }
2857
+ },
2858
+ {
2859
+ "kind": "custom-element-definition",
2860
+ "name": "u-divider",
2861
+ "declaration": {
2862
+ "name": "UmDivider",
2863
+ "module": "src/divider/divider.ts"
2864
+ }
2865
+ }
2866
+ ]
2867
+ },
2788
2868
  {
2789
2869
  "kind": "javascript-module",
2790
2870
  "path": "src/container/container.styles.ts",
@@ -3665,86 +3745,6 @@
3665
3745
  }
3666
3746
  ]
3667
3747
  },
3668
- {
3669
- "kind": "javascript-module",
3670
- "path": "src/divider/divider.styles.ts",
3671
- "declarations": [
3672
- {
3673
- "kind": "variable",
3674
- "name": "styles",
3675
- "default": "css `\n :host {\n --_divider-thickness: var(--u-divider-thickness, 1px);\n display: block;\n margin-block: 8px;\n height: var(--_divider-thickness);\n background-color: var(--u-divider-color, var(--u-color-outline-variant, rgb(202, 196, 208)));\n }\n\n :host([no-margin]) {\n margin: 0;\n }\n`"
3676
- }
3677
- ],
3678
- "exports": [
3679
- {
3680
- "kind": "js",
3681
- "name": "styles",
3682
- "declaration": {
3683
- "name": "styles",
3684
- "module": "src/divider/divider.styles.ts"
3685
- }
3686
- }
3687
- ]
3688
- },
3689
- {
3690
- "kind": "javascript-module",
3691
- "path": "src/divider/divider.ts",
3692
- "declarations": [
3693
- {
3694
- "kind": "class",
3695
- "description": "",
3696
- "name": "UmDivider",
3697
- "members": [
3698
- {
3699
- "kind": "field",
3700
- "name": "noMargin",
3701
- "type": {
3702
- "text": "boolean"
3703
- },
3704
- "default": "false",
3705
- "description": "When true, remove the margin of the divider",
3706
- "attribute": "no-margin",
3707
- "reflects": true
3708
- }
3709
- ],
3710
- "attributes": [
3711
- {
3712
- "name": "no-margin",
3713
- "type": {
3714
- "text": "boolean"
3715
- },
3716
- "default": "false",
3717
- "description": "When true, remove the margin of the divider",
3718
- "fieldName": "noMargin"
3719
- }
3720
- ],
3721
- "superclass": {
3722
- "name": "LitElement",
3723
- "package": "lit"
3724
- },
3725
- "tagName": "u-divider",
3726
- "customElement": true
3727
- }
3728
- ],
3729
- "exports": [
3730
- {
3731
- "kind": "js",
3732
- "name": "UmDivider",
3733
- "declaration": {
3734
- "name": "UmDivider",
3735
- "module": "src/divider/divider.ts"
3736
- }
3737
- },
3738
- {
3739
- "kind": "custom-element-definition",
3740
- "name": "u-divider",
3741
- "declaration": {
3742
- "name": "UmDivider",
3743
- "module": "src/divider/divider.ts"
3744
- }
3745
- }
3746
- ]
3747
- },
3748
3748
  {
3749
3749
  "kind": "javascript-module",
3750
3750
  "path": "src/elevation/elevation.styles.ts",
package/menu/menu.js CHANGED
@@ -87,7 +87,7 @@ let UmMenu = class UmMenu extends LitElement {
87
87
  }
88
88
  render() {
89
89
  return html `
90
- <div class="menu">
90
+ <div class="menu" part="menu">
91
91
  <u-elevation></u-elevation>
92
92
  <div class="content">
93
93
  <slot></slot>
package/menu/menu.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"menu.js","sourceRoot":"","sources":["../../src/menu/menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles';\nimport { styles } from './menu.styles';\n\nimport '../elevation/elevation';\n\ninterface MenuRect {\n x?: number;\n y?: number;\n width: number;\n height: number;\n}\n\n@customElement('u-menu')\nexport class UmMenu extends LitElement {\n\n static override styles = [baseStyles, styles];\n\n #open = false;\n #justShow = false;\n\n /**\n * Opens the menu and makes it visible. Alternative to the `.show()`, `.close()` and `.toggle()` methods\n */\n @property({type: Boolean, reflect: true})\n get open(): boolean { return this.#open }\n set open(open: boolean) {\n if (open) {\n this.calcDropdownPositioning();\n }\n\n this.#open = open;\n }\n\n /**\n * The corner of the anchor which to align the menu in the standard logical\n * property style of <block>-<inline> e.g. `'end-start'`.\n */\n @property({attribute: 'anchor-corner', reflect: true}) anchorCorner: 'start-start' | 'start-end' | 'end-start' | 'end-end' = 'end-start';\n\n /**\n * The direction of the menu. e.g. `'end'`.\n *\n * NOTE: This value may not be respected by the menu positioning algorithm\n * if the menu would render outside the viewport.\n */\n @property({reflect: true}) direction: 'start' | 'end' = 'end';\n\n /**\n * Limit the height of the menu to not overflow the viewport\n */\n @property({type: Boolean, attribute: 'auto-scroll-block', reflect: true}) autoScrollBlock = true;\n\n /**\n * Set a selector to auto attach to a toggle element\n */\n @property({attribute: 'toggle-selector', reflect: true})\n get toggleSelector(): string | undefined {\n return this.attributes.getNamedItem('toggle-selector')?.value;\n }\n set toggleSelector(selector: string) {\n this.toggleElement?.removeEventListener('click', this.toggle);\n\n if (!selector) {\n return;\n }\n\n this.toggleElement = document.querySelector(selector);\n this.toggleElement?.addEventListener('click', this.toggle);\n }\n\n @query('.menu') menu!: HTMLElement;\n\n get anchorElement(): HTMLElement {\n return this.parentElement!;\n }\n\n private toggleElement: HTMLElement | null = null;\n\n protected override render(): HTMLTemplateResult {\n return html`\n <div class=\"menu\">\n <u-elevation></u-elevation>\n <div class=\"content\">\n <slot></slot>\n </div>\n </div>\n `;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n window.addEventListener('click', this.close);\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n window.removeEventListener('click', this.close);\n }\n\n toggle = () => {\n if (this.open) {\n this.close();\n return;\n }\n\n this.show();\n };\n\n show(): void {\n if (this.open) {\n return;\n }\n\n this.#justShow = true;\n this.open = true;\n }\n\n close = () => {\n if (this.open && !this.#justShow) {\n this.open = false;\n return;\n }\n\n this.#justShow = false;\n }\n\n private calcDropdownPositioning() {\n const anchorRect = this.getAnchorRect();\n const menuRect = this.getMenuRect()\n\n this.resetMenu();\n this.setToOpenUpOrDown(anchorRect, menuRect);\n this.setToOpenToStartOrEnd(anchorRect, menuRect);\n }\n\n private resetMenu() {\n this.menu.className = 'menu';\n this.menu.style.maxHeight = '';\n }\n\n private setToOpenUpOrDown(anchorRect: MenuRect, menuRect: MenuRect): void {\n const viewPortHeight = window.innerHeight;\n\n if (viewPortHeight - (anchorRect.y! + menuRect.height) >= 0) {\n return;\n }\n\n if (anchorRect.y! <= viewPortHeight / 2) {\n this.menu.style.maxHeight = this.autoScrollBlock\n ? `${viewPortHeight - anchorRect.y!}px`\n : '';\n return;\n }\n\n this.menu.classList.add('up');\n this.menu.style.maxHeight = this.autoScrollBlock\n ? `${anchorRect.y!}px`\n : '';\n }\n\n private setToOpenToStartOrEnd(anchorRect: MenuRect, menuRect: MenuRect): void {\n if (this.direction === 'start') {\n this.ensureMenuCanOpenToStart(anchorRect, menuRect);\n return;\n }\n\n this.ensureMenuCanOpenToEnd(anchorRect, menuRect);\n }\n\n private ensureMenuCanOpenToStart(anchorRect: MenuRect, menuRect: MenuRect): void {\n const viewPortWidth = window.innerWidth;\n\n if (viewPortWidth - (anchorRect.x! - menuRect.width) >= 0) {\n this.menu.classList.add('start');\n }\n }\n\n private ensureMenuCanOpenToEnd(anchorRect: MenuRect, menuRect: MenuRect): void {\n const viewPortWidth = window.innerWidth;\n\n if (viewPortWidth - (anchorRect.x! + menuRect.width) >= 0) {\n return;\n }\n\n this.menu.classList.add('start');\n }\n\n private getAnchorRect(): MenuRect {\n const anchorElement = this.anchorElement;\n const rect = anchorElement.getBoundingClientRect() as DOMRect\n const styles = getComputedStyle(anchorElement);\n const width = parseInt(styles.width, 10);\n const height = parseInt(styles.height, 10);\n const xOffset = this.anchorCorner.endsWith('-end')\n ? width\n : 0;\n\n const yOffset = this.anchorCorner.startsWith('end-')\n ? height\n : 0;\n\n return {\n y: rect.y + yOffset,\n x: rect.x + xOffset,\n width: width,\n height: height\n };\n }\n\n private getMenuRect(): MenuRect {\n const menu = this.menu;\n const styles = getComputedStyle(menu);\n const width = parseInt(styles.width, 10);\n const height = parseInt(styles.height, 10);\n\n return {\n width: width,\n height: height\n };\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-menu': UmMenu;\n }\n}\n"]}
1
+ {"version":3,"file":"menu.js","sourceRoot":"","sources":["../../src/menu/menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles';\nimport { styles } from './menu.styles';\n\nimport '../elevation/elevation';\n\ninterface MenuRect {\n x?: number;\n y?: number;\n width: number;\n height: number;\n}\n\n@customElement('u-menu')\nexport class UmMenu extends LitElement {\n\n static override styles = [baseStyles, styles];\n\n #open = false;\n #justShow = false;\n\n /**\n * Opens the menu and makes it visible. Alternative to the `.show()`, `.close()` and `.toggle()` methods\n */\n @property({type: Boolean, reflect: true})\n get open(): boolean { return this.#open }\n set open(open: boolean) {\n if (open) {\n this.calcDropdownPositioning();\n }\n\n this.#open = open;\n }\n\n /**\n * The corner of the anchor which to align the menu in the standard logical\n * property style of <block>-<inline> e.g. `'end-start'`.\n */\n @property({attribute: 'anchor-corner', reflect: true}) anchorCorner: 'start-start' | 'start-end' | 'end-start' | 'end-end' = 'end-start';\n\n /**\n * The direction of the menu. e.g. `'end'`.\n *\n * NOTE: This value may not be respected by the menu positioning algorithm\n * if the menu would render outside the viewport.\n */\n @property({reflect: true}) direction: 'start' | 'end' = 'end';\n\n /**\n * Limit the height of the menu to not overflow the viewport\n */\n @property({type: Boolean, attribute: 'auto-scroll-block', reflect: true}) autoScrollBlock = true;\n\n /**\n * Set a selector to auto attach to a toggle element\n */\n @property({attribute: 'toggle-selector', reflect: true})\n get toggleSelector(): string | undefined {\n return this.attributes.getNamedItem('toggle-selector')?.value;\n }\n set toggleSelector(selector: string) {\n this.toggleElement?.removeEventListener('click', this.toggle);\n\n if (!selector) {\n return;\n }\n\n this.toggleElement = document.querySelector(selector);\n this.toggleElement?.addEventListener('click', this.toggle);\n }\n\n @query('.menu') menu!: HTMLElement;\n\n get anchorElement(): HTMLElement {\n return this.parentElement!;\n }\n\n private toggleElement: HTMLElement | null = null;\n\n protected override render(): HTMLTemplateResult {\n return html`\n <div class=\"menu\" part=\"menu\">\n <u-elevation></u-elevation>\n <div class=\"content\">\n <slot></slot>\n </div>\n </div>\n `;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n window.addEventListener('click', this.close);\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n window.removeEventListener('click', this.close);\n }\n\n toggle = () => {\n if (this.open) {\n this.close();\n return;\n }\n\n this.show();\n };\n\n show(): void {\n if (this.open) {\n return;\n }\n\n this.#justShow = true;\n this.open = true;\n }\n\n close = () => {\n if (this.open && !this.#justShow) {\n this.open = false;\n return;\n }\n\n this.#justShow = false;\n }\n\n private calcDropdownPositioning() {\n const anchorRect = this.getAnchorRect();\n const menuRect = this.getMenuRect()\n\n this.resetMenu();\n this.setToOpenUpOrDown(anchorRect, menuRect);\n this.setToOpenToStartOrEnd(anchorRect, menuRect);\n }\n\n private resetMenu() {\n this.menu.className = 'menu';\n this.menu.style.maxHeight = '';\n }\n\n private setToOpenUpOrDown(anchorRect: MenuRect, menuRect: MenuRect): void {\n const viewPortHeight = window.innerHeight;\n\n if (viewPortHeight - (anchorRect.y! + menuRect.height) >= 0) {\n return;\n }\n\n if (anchorRect.y! <= viewPortHeight / 2) {\n this.menu.style.maxHeight = this.autoScrollBlock\n ? `${viewPortHeight - anchorRect.y!}px`\n : '';\n return;\n }\n\n this.menu.classList.add('up');\n this.menu.style.maxHeight = this.autoScrollBlock\n ? `${anchorRect.y!}px`\n : '';\n }\n\n private setToOpenToStartOrEnd(anchorRect: MenuRect, menuRect: MenuRect): void {\n if (this.direction === 'start') {\n this.ensureMenuCanOpenToStart(anchorRect, menuRect);\n return;\n }\n\n this.ensureMenuCanOpenToEnd(anchorRect, menuRect);\n }\n\n private ensureMenuCanOpenToStart(anchorRect: MenuRect, menuRect: MenuRect): void {\n const viewPortWidth = window.innerWidth;\n\n if (viewPortWidth - (anchorRect.x! - menuRect.width) >= 0) {\n this.menu.classList.add('start');\n }\n }\n\n private ensureMenuCanOpenToEnd(anchorRect: MenuRect, menuRect: MenuRect): void {\n const viewPortWidth = window.innerWidth;\n\n if (viewPortWidth - (anchorRect.x! + menuRect.width) >= 0) {\n return;\n }\n\n this.menu.classList.add('start');\n }\n\n private getAnchorRect(): MenuRect {\n const anchorElement = this.anchorElement;\n const rect = anchorElement.getBoundingClientRect() as DOMRect\n const styles = getComputedStyle(anchorElement);\n const width = parseInt(styles.width, 10);\n const height = parseInt(styles.height, 10);\n const xOffset = this.anchorCorner.endsWith('-end')\n ? width\n : 0;\n\n const yOffset = this.anchorCorner.startsWith('end-')\n ? height\n : 0;\n\n return {\n y: rect.y + yOffset,\n x: rect.x + xOffset,\n width: width,\n height: height\n };\n }\n\n private getMenuRect(): MenuRect {\n const menu = this.menu;\n const styles = getComputedStyle(menu);\n const width = parseInt(styles.width, 10);\n const height = parseInt(styles.height, 10);\n\n return {\n width: width,\n height: height\n };\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-menu': UmMenu;\n }\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@universal-material/web",
3
- "version": "3.0.22",
3
+ "version": "3.0.23",
4
4
  "description": "Material web components",
5
5
  "type": "module",
6
6
  "keywords": [