@i-cell/ids-styles 0.0.59 → 0.0.61

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 (13) hide show
  1. package/dist/components.css +428 -75
  2. package/dist/components.min.css +1 -1
  3. package/dist/components.plugin.js +202 -202
  4. package/dist/menu-item/menu-item.css +356 -0
  5. package/dist/menu-item/menu-item.min.css +1 -1
  6. package/dist/menu-item/menu-item.plugin.js +20 -0
  7. package/dist/overlay-panel/overlay-panel.css +0 -3
  8. package/dist/overlay-panel/overlay-panel.min.css +1 -1
  9. package/dist/overlay-panel/overlay-panel.plugin.js +0 -3
  10. package/dist/segmented-control-toggle/segmented-control-toggle.css +72 -72
  11. package/dist/segmented-control-toggle/segmented-control-toggle.min.css +1 -1
  12. package/dist/segmented-control-toggle/segmented-control-toggle.plugin.js +182 -199
  13. package/package.json +1 -1
package/dist/menu-item/menu-item.css CHANGED
@@ -311,14 +311,187 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
311
311
  .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:focus, .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:focus-visible {
312
312
  color: var(--ids-comp-menu-item-text-color-fg-label-surface-focused);
313
313
  background: var(--ids-comp-menu-item-text-color-bg-surface-focused);
314
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
315
+ outline-width: var(--ids-comp-button-focused-outline-size-outline-compact);
316
+ outline-offset: 2px;
317
+ outline-style: solid;
314
318
  }
315
319
  .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:active {
316
320
  background: var(--ids-comp-menu-item-text-color-bg-surface-pressed);
321
+ outline-style: none;
317
322
  }
318
323
  .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:is(:disabled, .ids-menu-item-disabled) {
319
324
  color: var(--ids-comp-menu-item-text-color-fg-label-surface-disabled);
320
325
  background: var(--ids-comp-menu-item-text-color-bg-surface-disabled);
321
326
  }
327
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-surface {
328
+ color: var(--ids-comp-menu-item-text-color-fg-label-surface-default);
329
+ background: var(--ids-comp-menu-item-text-color-bg-surface-default);
330
+ }
331
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-surface.ids-menu-item-active {
332
+ color: var(--ids-comp-menu-item-text-color-fg-label-surface-active);
333
+ background: var(--ids-comp-menu-item-text-color-bg-surface-active);
334
+ }
335
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:hover {
336
+ color: var(--ids-comp-menu-item-text-color-fg-label-surface-hovered);
337
+ background: var(--ids-comp-menu-item-text-color-bg-surface-hovered);
338
+ }
339
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:focus, .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:focus-visible {
340
+ color: var(--ids-comp-menu-item-text-color-fg-label-surface-focused);
341
+ background: var(--ids-comp-menu-item-text-color-bg-surface-focused);
342
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
343
+ outline-width: var(--ids-comp-button-focused-outline-size-outline-comfortable);
344
+ outline-offset: 2px;
345
+ outline-style: solid;
346
+ }
347
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:active {
348
+ background: var(--ids-comp-menu-item-text-color-bg-surface-pressed);
349
+ outline-style: none;
350
+ }
351
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:is(:disabled, .ids-menu-item-disabled) {
352
+ color: var(--ids-comp-menu-item-text-color-fg-label-surface-disabled);
353
+ background: var(--ids-comp-menu-item-text-color-bg-surface-disabled);
354
+ }
355
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-surface {
356
+ color: var(--ids-comp-menu-item-text-color-fg-label-surface-default);
357
+ background: var(--ids-comp-menu-item-text-color-bg-surface-default);
358
+ }
359
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-surface.ids-menu-item-active {
360
+ color: var(--ids-comp-menu-item-text-color-fg-label-surface-active);
361
+ background: var(--ids-comp-menu-item-text-color-bg-surface-active);
362
+ }
363
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:hover {
364
+ color: var(--ids-comp-menu-item-text-color-fg-label-surface-hovered);
365
+ background: var(--ids-comp-menu-item-text-color-bg-surface-hovered);
366
+ }
367
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:focus, .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:focus-visible {
368
+ color: var(--ids-comp-menu-item-text-color-fg-label-surface-focused);
369
+ background: var(--ids-comp-menu-item-text-color-bg-surface-focused);
370
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
371
+ outline-width: var(--ids-comp-button-focused-outline-size-outline-spacious);
372
+ outline-offset: 2px;
373
+ outline-style: solid;
374
+ }
375
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:active {
376
+ background: var(--ids-comp-menu-item-text-color-bg-surface-pressed);
377
+ outline-style: none;
378
+ }
379
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:is(:disabled, .ids-menu-item-disabled) {
380
+ color: var(--ids-comp-menu-item-text-color-fg-label-surface-disabled);
381
+ background: var(--ids-comp-menu-item-text-color-bg-surface-disabled);
382
+ }
383
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-surface {
384
+ color: var(--ids-comp-menu-item-text-color-fg-label-surface-default);
385
+ background: var(--ids-comp-menu-item-text-color-bg-surface-default);
386
+ }
387
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-surface.ids-menu-item-active {
388
+ color: var(--ids-comp-menu-item-text-color-fg-label-surface-active);
389
+ background: var(--ids-comp-menu-item-text-color-bg-surface-active);
390
+ }
391
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:hover {
392
+ color: var(--ids-comp-menu-item-text-color-fg-label-surface-hovered);
393
+ background: var(--ids-comp-menu-item-text-color-bg-surface-hovered);
394
+ }
395
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:focus, .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:focus-visible {
396
+ color: var(--ids-comp-menu-item-text-color-fg-label-surface-focused);
397
+ background: var(--ids-comp-menu-item-text-color-bg-surface-focused);
398
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
399
+ outline-width: var(--ids-comp-button-focused-outline-size-outline-dense);
400
+ outline-offset: 2px;
401
+ outline-style: solid;
402
+ }
403
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:active {
404
+ background: var(--ids-comp-menu-item-text-color-bg-surface-pressed);
405
+ outline-style: none;
406
+ }
407
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:is(:disabled, .ids-menu-item-disabled) {
408
+ color: var(--ids-comp-menu-item-text-color-fg-label-surface-disabled);
409
+ background: var(--ids-comp-menu-item-text-color-bg-surface-disabled);
410
+ }
411
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light {
412
+ color: var(--ids-comp-menu-item-text-color-fg-label-light-default);
413
+ background: var(--ids-comp-menu-item-text-color-bg-light-default);
414
+ }
415
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light.ids-menu-item-active {
416
+ color: var(--ids-comp-menu-item-text-color-fg-label-light-active);
417
+ background: var(--ids-comp-menu-item-text-color-bg-light-active);
418
+ }
419
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light:hover {
420
+ color: var(--ids-comp-menu-item-text-color-fg-label-light-hovered);
421
+ background: var(--ids-comp-menu-item-text-color-bg-light-hovered);
422
+ }
423
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light:focus, .ids-menu-item.ids-menu-item-text.ids-menu-item-light:focus-visible {
424
+ color: var(--ids-comp-menu-item-text-color-fg-label-light-focused);
425
+ background: var(--ids-comp-menu-item-text-color-bg-light-focused);
426
+ outline-color: var(--ids-comp-button-focused-outline-color-light-focused);
427
+ outline-width: var(--ids-comp-button-focused-outline-size-outline-compact);
428
+ outline-offset: 2px;
429
+ outline-style: solid;
430
+ }
431
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light:active {
432
+ background: var(--ids-comp-menu-item-text-color-bg-light-pressed);
433
+ outline-style: none;
434
+ }
435
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light:is(:disabled, .ids-menu-item-disabled) {
436
+ color: var(--ids-comp-menu-item-text-color-fg-label-light-disabled);
437
+ background: var(--ids-comp-menu-item-text-color-bg-light-disabled);
438
+ }
439
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light {
440
+ color: var(--ids-comp-menu-item-text-color-fg-label-light-default);
441
+ background: var(--ids-comp-menu-item-text-color-bg-light-default);
442
+ }
443
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light.ids-menu-item-active {
444
+ color: var(--ids-comp-menu-item-text-color-fg-label-light-active);
445
+ background: var(--ids-comp-menu-item-text-color-bg-light-active);
446
+ }
447
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light:hover {
448
+ color: var(--ids-comp-menu-item-text-color-fg-label-light-hovered);
449
+ background: var(--ids-comp-menu-item-text-color-bg-light-hovered);
450
+ }
451
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light:focus, .ids-menu-item.ids-menu-item-text.ids-menu-item-light:focus-visible {
452
+ color: var(--ids-comp-menu-item-text-color-fg-label-light-focused);
453
+ background: var(--ids-comp-menu-item-text-color-bg-light-focused);
454
+ outline-color: var(--ids-comp-button-focused-outline-color-light-focused);
455
+ outline-width: var(--ids-comp-button-focused-outline-size-outline-comfortable);
456
+ outline-offset: 2px;
457
+ outline-style: solid;
458
+ }
459
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light:active {
460
+ background: var(--ids-comp-menu-item-text-color-bg-light-pressed);
461
+ outline-style: none;
462
+ }
463
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light:is(:disabled, .ids-menu-item-disabled) {
464
+ color: var(--ids-comp-menu-item-text-color-fg-label-light-disabled);
465
+ background: var(--ids-comp-menu-item-text-color-bg-light-disabled);
466
+ }
467
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light {
468
+ color: var(--ids-comp-menu-item-text-color-fg-label-light-default);
469
+ background: var(--ids-comp-menu-item-text-color-bg-light-default);
470
+ }
471
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light.ids-menu-item-active {
472
+ color: var(--ids-comp-menu-item-text-color-fg-label-light-active);
473
+ background: var(--ids-comp-menu-item-text-color-bg-light-active);
474
+ }
475
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light:hover {
476
+ color: var(--ids-comp-menu-item-text-color-fg-label-light-hovered);
477
+ background: var(--ids-comp-menu-item-text-color-bg-light-hovered);
478
+ }
479
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light:focus, .ids-menu-item.ids-menu-item-text.ids-menu-item-light:focus-visible {
480
+ color: var(--ids-comp-menu-item-text-color-fg-label-light-focused);
481
+ background: var(--ids-comp-menu-item-text-color-bg-light-focused);
482
+ outline-color: var(--ids-comp-button-focused-outline-color-light-focused);
483
+ outline-width: var(--ids-comp-button-focused-outline-size-outline-spacious);
484
+ outline-offset: 2px;
485
+ outline-style: solid;
486
+ }
487
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light:active {
488
+ background: var(--ids-comp-menu-item-text-color-bg-light-pressed);
489
+ outline-style: none;
490
+ }
491
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light:is(:disabled, .ids-menu-item-disabled) {
492
+ color: var(--ids-comp-menu-item-text-color-fg-label-light-disabled);
493
+ background: var(--ids-comp-menu-item-text-color-bg-light-disabled);
494
+ }
322
495
  .ids-menu-item.ids-menu-item-text.ids-menu-item-light {
323
496
  color: var(--ids-comp-menu-item-text-color-fg-label-light-default);
324
497
  background: var(--ids-comp-menu-item-text-color-bg-light-default);
@@ -334,9 +507,14 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
334
507
  .ids-menu-item.ids-menu-item-text.ids-menu-item-light:focus, .ids-menu-item.ids-menu-item-text.ids-menu-item-light:focus-visible {
335
508
  color: var(--ids-comp-menu-item-text-color-fg-label-light-focused);
336
509
  background: var(--ids-comp-menu-item-text-color-bg-light-focused);
510
+ outline-color: var(--ids-comp-button-focused-outline-color-light-focused);
511
+ outline-width: var(--ids-comp-button-focused-outline-size-outline-dense);
512
+ outline-offset: 2px;
513
+ outline-style: solid;
337
514
  }
338
515
  .ids-menu-item.ids-menu-item-text.ids-menu-item-light:active {
339
516
  background: var(--ids-comp-menu-item-text-color-bg-light-pressed);
517
+ outline-style: none;
340
518
  }
341
519
  .ids-menu-item.ids-menu-item-text.ids-menu-item-light:is(:disabled, .ids-menu-item-disabled) {
342
520
  color: var(--ids-comp-menu-item-text-color-fg-label-light-disabled);
@@ -357,14 +535,187 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
357
535
  .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:focus, .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:focus-visible {
358
536
  color: var(--ids-comp-menu-item-filled-color-fg-label-surface-focused);
359
537
  background: var(--ids-comp-menu-item-filled-color-bg-surface-focused);
538
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
539
+ outline-width: var(--ids-comp-button-focused-outline-size-outline-compact);
540
+ outline-offset: 2px;
541
+ outline-style: solid;
360
542
  }
361
543
  .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:active {
362
544
  background: var(--ids-comp-menu-item-filled-color-bg-surface-pressed);
545
+ outline-style: none;
363
546
  }
364
547
  .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:is(:disabled, .ids-menu-item-disabled) {
365
548
  color: var(--ids-comp-menu-item-filled-color-fg-label-surface-disabled);
366
549
  background: var(--ids-comp-menu-item-filled-color-bg-surface-disabled);
367
550
  }
551
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface {
552
+ color: var(--ids-comp-menu-item-filled-color-fg-label-surface-default);
553
+ background: var(--ids-comp-menu-item-filled-color-bg-surface-default);
554
+ }
555
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface.ids-menu-item-active {
556
+ color: var(--ids-comp-menu-item-filled-color-fg-label-surface-active);
557
+ background: var(--ids-comp-menu-item-filled-color-bg-surface-active);
558
+ }
559
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:hover {
560
+ color: var(--ids-comp-menu-item-filled-color-fg-label-surface-hovered);
561
+ background: var(--ids-comp-menu-item-filled-color-bg-surface-hovered);
562
+ }
563
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:focus, .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:focus-visible {
564
+ color: var(--ids-comp-menu-item-filled-color-fg-label-surface-focused);
565
+ background: var(--ids-comp-menu-item-filled-color-bg-surface-focused);
566
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
567
+ outline-width: var(--ids-comp-button-focused-outline-size-outline-comfortable);
568
+ outline-offset: 2px;
569
+ outline-style: solid;
570
+ }
571
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:active {
572
+ background: var(--ids-comp-menu-item-filled-color-bg-surface-pressed);
573
+ outline-style: none;
574
+ }
575
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:is(:disabled, .ids-menu-item-disabled) {
576
+ color: var(--ids-comp-menu-item-filled-color-fg-label-surface-disabled);
577
+ background: var(--ids-comp-menu-item-filled-color-bg-surface-disabled);
578
+ }
579
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface {
580
+ color: var(--ids-comp-menu-item-filled-color-fg-label-surface-default);
581
+ background: var(--ids-comp-menu-item-filled-color-bg-surface-default);
582
+ }
583
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface.ids-menu-item-active {
584
+ color: var(--ids-comp-menu-item-filled-color-fg-label-surface-active);
585
+ background: var(--ids-comp-menu-item-filled-color-bg-surface-active);
586
+ }
587
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:hover {
588
+ color: var(--ids-comp-menu-item-filled-color-fg-label-surface-hovered);
589
+ background: var(--ids-comp-menu-item-filled-color-bg-surface-hovered);
590
+ }
591
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:focus, .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:focus-visible {
592
+ color: var(--ids-comp-menu-item-filled-color-fg-label-surface-focused);
593
+ background: var(--ids-comp-menu-item-filled-color-bg-surface-focused);
594
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
595
+ outline-width: var(--ids-comp-button-focused-outline-size-outline-spacious);
596
+ outline-offset: 2px;
597
+ outline-style: solid;
598
+ }
599
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:active {
600
+ background: var(--ids-comp-menu-item-filled-color-bg-surface-pressed);
601
+ outline-style: none;
602
+ }
603
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:is(:disabled, .ids-menu-item-disabled) {
604
+ color: var(--ids-comp-menu-item-filled-color-fg-label-surface-disabled);
605
+ background: var(--ids-comp-menu-item-filled-color-bg-surface-disabled);
606
+ }
607
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface {
608
+ color: var(--ids-comp-menu-item-filled-color-fg-label-surface-default);
609
+ background: var(--ids-comp-menu-item-filled-color-bg-surface-default);
610
+ }
611
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface.ids-menu-item-active {
612
+ color: var(--ids-comp-menu-item-filled-color-fg-label-surface-active);
613
+ background: var(--ids-comp-menu-item-filled-color-bg-surface-active);
614
+ }
615
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:hover {
616
+ color: var(--ids-comp-menu-item-filled-color-fg-label-surface-hovered);
617
+ background: var(--ids-comp-menu-item-filled-color-bg-surface-hovered);
618
+ }
619
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:focus, .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:focus-visible {
620
+ color: var(--ids-comp-menu-item-filled-color-fg-label-surface-focused);
621
+ background: var(--ids-comp-menu-item-filled-color-bg-surface-focused);
622
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
623
+ outline-width: var(--ids-comp-button-focused-outline-size-outline-dense);
624
+ outline-offset: 2px;
625
+ outline-style: solid;
626
+ }
627
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:active {
628
+ background: var(--ids-comp-menu-item-filled-color-bg-surface-pressed);
629
+ outline-style: none;
630
+ }
631
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:is(:disabled, .ids-menu-item-disabled) {
632
+ color: var(--ids-comp-menu-item-filled-color-fg-label-surface-disabled);
633
+ background: var(--ids-comp-menu-item-filled-color-bg-surface-disabled);
634
+ }
635
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light {
636
+ color: var(--ids-comp-menu-item-filled-color-fg-label-light-default);
637
+ background: var(--ids-comp-menu-item-filled-color-bg-light-default);
638
+ }
639
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light.ids-menu-item-active {
640
+ color: var(--ids-comp-menu-item-filled-color-fg-label-light-active);
641
+ background: var(--ids-comp-menu-item-filled-color-bg-light-active);
642
+ }
643
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:hover {
644
+ color: var(--ids-comp-menu-item-filled-color-fg-label-light-hovered);
645
+ background: var(--ids-comp-menu-item-filled-color-bg-light-hovered);
646
+ }
647
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:focus, .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:focus-visible {
648
+ color: var(--ids-comp-menu-item-filled-color-fg-label-light-focused);
649
+ background: var(--ids-comp-menu-item-filled-color-bg-light-focused);
650
+ outline-color: var(--ids-comp-button-focused-outline-color-light-focused);
651
+ outline-width: var(--ids-comp-button-focused-outline-size-outline-compact);
652
+ outline-offset: 2px;
653
+ outline-style: solid;
654
+ }
655
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:active {
656
+ background: var(--ids-comp-menu-item-filled-color-bg-light-pressed);
657
+ outline-style: none;
658
+ }
659
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:is(:disabled, .ids-menu-item-disabled) {
660
+ color: var(--ids-comp-menu-item-filled-color-fg-label-light-disabled);
661
+ background: var(--ids-comp-menu-item-filled-color-bg-light-disabled);
662
+ }
663
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light {
664
+ color: var(--ids-comp-menu-item-filled-color-fg-label-light-default);
665
+ background: var(--ids-comp-menu-item-filled-color-bg-light-default);
666
+ }
667
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light.ids-menu-item-active {
668
+ color: var(--ids-comp-menu-item-filled-color-fg-label-light-active);
669
+ background: var(--ids-comp-menu-item-filled-color-bg-light-active);
670
+ }
671
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:hover {
672
+ color: var(--ids-comp-menu-item-filled-color-fg-label-light-hovered);
673
+ background: var(--ids-comp-menu-item-filled-color-bg-light-hovered);
674
+ }
675
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:focus, .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:focus-visible {
676
+ color: var(--ids-comp-menu-item-filled-color-fg-label-light-focused);
677
+ background: var(--ids-comp-menu-item-filled-color-bg-light-focused);
678
+ outline-color: var(--ids-comp-button-focused-outline-color-light-focused);
679
+ outline-width: var(--ids-comp-button-focused-outline-size-outline-comfortable);
680
+ outline-offset: 2px;
681
+ outline-style: solid;
682
+ }
683
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:active {
684
+ background: var(--ids-comp-menu-item-filled-color-bg-light-pressed);
685
+ outline-style: none;
686
+ }
687
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:is(:disabled, .ids-menu-item-disabled) {
688
+ color: var(--ids-comp-menu-item-filled-color-fg-label-light-disabled);
689
+ background: var(--ids-comp-menu-item-filled-color-bg-light-disabled);
690
+ }
691
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light {
692
+ color: var(--ids-comp-menu-item-filled-color-fg-label-light-default);
693
+ background: var(--ids-comp-menu-item-filled-color-bg-light-default);
694
+ }
695
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light.ids-menu-item-active {
696
+ color: var(--ids-comp-menu-item-filled-color-fg-label-light-active);
697
+ background: var(--ids-comp-menu-item-filled-color-bg-light-active);
698
+ }
699
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:hover {
700
+ color: var(--ids-comp-menu-item-filled-color-fg-label-light-hovered);
701
+ background: var(--ids-comp-menu-item-filled-color-bg-light-hovered);
702
+ }
703
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:focus, .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:focus-visible {
704
+ color: var(--ids-comp-menu-item-filled-color-fg-label-light-focused);
705
+ background: var(--ids-comp-menu-item-filled-color-bg-light-focused);
706
+ outline-color: var(--ids-comp-button-focused-outline-color-light-focused);
707
+ outline-width: var(--ids-comp-button-focused-outline-size-outline-spacious);
708
+ outline-offset: 2px;
709
+ outline-style: solid;
710
+ }
711
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:active {
712
+ background: var(--ids-comp-menu-item-filled-color-bg-light-pressed);
713
+ outline-style: none;
714
+ }
715
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:is(:disabled, .ids-menu-item-disabled) {
716
+ color: var(--ids-comp-menu-item-filled-color-fg-label-light-disabled);
717
+ background: var(--ids-comp-menu-item-filled-color-bg-light-disabled);
718
+ }
368
719
  .ids-menu-item.ids-menu-item-filled.ids-menu-item-light {
369
720
  color: var(--ids-comp-menu-item-filled-color-fg-label-light-default);
370
721
  background: var(--ids-comp-menu-item-filled-color-bg-light-default);
@@ -380,9 +731,14 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
380
731
  .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:focus, .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:focus-visible {
381
732
  color: var(--ids-comp-menu-item-filled-color-fg-label-light-focused);
382
733
  background: var(--ids-comp-menu-item-filled-color-bg-light-focused);
734
+ outline-color: var(--ids-comp-button-focused-outline-color-light-focused);
735
+ outline-width: var(--ids-comp-button-focused-outline-size-outline-dense);
736
+ outline-offset: 2px;
737
+ outline-style: solid;
383
738
  }
384
739
  .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:active {
385
740
  background: var(--ids-comp-menu-item-filled-color-bg-light-pressed);
741
+ outline-style: none;
386
742
  }
387
743
  .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:is(:disabled, .ids-menu-item-disabled) {
388
744
  color: var(--ids-comp-menu-item-filled-color-fg-label-light-disabled);
package/dist/menu-item/menu-item.min.css CHANGED
@@ -1 +1 @@
1
- a.ids-menu-item:link,a.ids-menu-item:visited{text-decoration:none}.ids-menu-item{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0);line-height:1.5;width:100%;box-sizing:border-box;display:inline-flex;flex-shrink:0;align-items:center}.ids-menu-item::before,.ids-menu-item::after,.ids-menu-item *,.ids-menu-item ::before,.ids-menu-item ::after{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0)}.ids-menu-item.ids-menu-item-no-label{justify-content:space-between}.ids-menu-item .ids-menu-item-label{overflow:hidden;text-overflow:ellipsis;font-style:normal}.ids-menu-item .ids-menu-item-label--wrapper{display:flex;flex:1 1 0;align-items:center;justify-content:flex-start}.ids-menu-item:not(:is(:disabled,.ids-menu-item-disabled)){cursor:pointer}.ids-menu-item:is(:disabled,.ids-menu-item-disabled){cursor:not-allowed}.ids-menu-item.ids-menu-item-compact{gap:var(--ids-comp-menu-item-size-gap-compact);border-radius:var(--ids-comp-menu-item-size-border-radius-compact);padding:var(--ids-comp-menu-item-size-padding-y-compact) var(--ids-comp-menu-item-size-padding-x-compact);height:var(--ids-comp-menu-item-size-height-compact)}.ids-menu-item.ids-menu-item-compact>.ids-menu-item-label--wrapper>.ids-menu-item-label{font-family:var(--ids-comp-menu-item-label-typography-font-family-compact);font-size:var(--ids-comp-menu-item-label-typography-font-size-compact);font-weight:var(--ids-comp-menu-item-label-typography-font-weight-compact);letter-spacing:var(--ids-comp-menu-item-label-typography-letter-spacing-compact);line-height:var(--ids-comp-menu-item-label-typography-line-height-compact)}.ids-menu-item.ids-menu-item-compact .ids-icon{width:var(--ids-comp-menu-item-size-icon-compact);height:var(--ids-comp-menu-item-size-icon-compact);font-size:var(--ids-comp-menu-item-icon-typography-font-size-compact);font-weight:var(--ids-comp-menu-item-icon-typography-font-weight-compact);line-height:var(--ids-comp-menu-item-icon-typography-line-height-compact)}.ids-menu-item.ids-menu-item-compact.ids-menu-item-text.ids-menu-item-surface{border-style:solid;border-width:var(--ids-comp-menu-item-size-border-width-compact);border-color:var(--ids-comp-menu-item-text-color-border-surface-default)}.ids-menu-item.ids-menu-item-compact.ids-menu-item-text.ids-menu-item-surface:hover{border-color:var(--ids-comp-menu-item-text-color-border-surface-hovered)}.ids-menu-item.ids-menu-item-compact.ids-menu-item-text.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled){border-color:var(--ids-comp-menu-item-text-color-border-surface-disabled)}.ids-menu-item.ids-menu-item-compact.ids-menu-item-text.ids-menu-item-light{border-style:solid;border-width:var(--ids-comp-menu-item-size-border-width-compact);border-color:var(--ids-comp-menu-item-text-color-border-light-default)}.ids-menu-item.ids-menu-item-compact.ids-menu-item-text.ids-menu-item-light:hover{border-color:var(--ids-comp-menu-item-text-color-border-light-hovered)}.ids-menu-item.ids-menu-item-compact.ids-menu-item-text.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled){border-color:var(--ids-comp-menu-item-text-color-border-light-disabled)}.ids-menu-item.ids-menu-item-compact.ids-menu-item-filled.ids-menu-item-surface{border-style:solid;border-width:var(--ids-comp-menu-item-size-border-width-compact);border-color:var(--ids-comp-menu-item-filled-color-border-surface-default)}.ids-menu-item.ids-menu-item-compact.ids-menu-item-filled.ids-menu-item-surface:hover{border-color:var(--ids-comp-menu-item-filled-color-border-surface-hovered)}.ids-menu-item.ids-menu-item-compact.ids-menu-item-filled.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled){border-color:var(--ids-comp-menu-item-filled-color-border-surface-disabled)}.ids-menu-item.ids-menu-item-compact.ids-menu-item-filled.ids-menu-item-light{border-style:solid;border-width:var(--ids-comp-menu-item-size-border-width-compact);border-color:var(--ids-comp-menu-item-filled-color-border-light-default)}.ids-menu-item.ids-menu-item-compact.ids-menu-item-filled.ids-menu-item-light:hover{border-color:var(--ids-comp-menu-item-filled-color-border-light-hovered)}.ids-menu-item.ids-menu-item-compact.ids-menu-item-filled.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled){border-color:var(--ids-comp-menu-item-filled-color-border-light-disabled)}.ids-menu-item.ids-menu-item-comfortable{gap:var(--ids-comp-menu-item-size-gap-comfortable);border-radius:var(--ids-comp-menu-item-size-border-radius-comfortable);padding:var(--ids-comp-menu-item-size-padding-y-comfortable) var(--ids-comp-menu-item-size-padding-x-comfortable);height:var(--ids-comp-menu-item-size-height-comfortable)}.ids-menu-item.ids-menu-item-comfortable>.ids-menu-item-label--wrapper>.ids-menu-item-label{font-family:var(--ids-comp-menu-item-label-typography-font-family-comfortable);font-size:var(--ids-comp-menu-item-label-typography-font-size-comfortable);font-weight:var(--ids-comp-menu-item-label-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-menu-item-label-typography-letter-spacing-comfortable);line-height:var(--ids-comp-menu-item-label-typography-line-height-comfortable)}.ids-menu-item.ids-menu-item-comfortable .ids-icon{width:var(--ids-comp-menu-item-size-icon-comfortable);height:var(--ids-comp-menu-item-size-icon-comfortable);font-size:var(--ids-comp-menu-item-icon-typography-font-size-comfortable);font-weight:var(--ids-comp-menu-item-icon-typography-font-weight-comfortable);line-height:var(--ids-comp-menu-item-icon-typography-line-height-comfortable)}.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-text.ids-menu-item-surface{border-style:solid;border-width:var(--ids-comp-menu-item-size-border-width-comfortable);border-color:var(--ids-comp-menu-item-text-color-border-surface-default)}.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-text.ids-menu-item-surface:hover{border-color:var(--ids-comp-menu-item-text-color-border-surface-hovered)}.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-text.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled){border-color:var(--ids-comp-menu-item-text-color-border-surface-disabled)}.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-text.ids-menu-item-light{border-style:solid;border-width:var(--ids-comp-menu-item-size-border-width-comfortable);border-color:var(--ids-comp-menu-item-text-color-border-light-default)}.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-text.ids-menu-item-light:hover{border-color:var(--ids-comp-menu-item-text-color-border-light-hovered)}.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-text.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled){border-color:var(--ids-comp-menu-item-text-color-border-light-disabled)}.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-filled.ids-menu-item-surface{border-style:solid;border-width:var(--ids-comp-menu-item-size-border-width-comfortable);border-color:var(--ids-comp-menu-item-filled-color-border-surface-default)}.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-filled.ids-menu-item-surface:hover{border-color:var(--ids-comp-menu-item-filled-color-border-surface-hovered)}.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-filled.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled){border-color:var(--ids-comp-menu-item-filled-color-border-surface-disabled)}.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-filled.ids-menu-item-light{border-style:solid;border-width:var(--ids-comp-menu-item-size-border-width-comfortable);border-color:var(--ids-comp-menu-item-filled-color-border-light-default)}.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-filled.ids-menu-item-light:hover{border-color:var(--ids-comp-menu-item-filled-color-border-light-hovered)}.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-filled.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled){border-color:var(--ids-comp-menu-item-filled-color-border-light-disabled)}.ids-menu-item.ids-menu-item-spacious{gap:var(--ids-comp-menu-item-size-gap-spacious);border-radius:var(--ids-comp-menu-item-size-border-radius-spacious);padding:var(--ids-comp-menu-item-size-padding-y-spacious) var(--ids-comp-menu-item-size-padding-x-spacious);height:var(--ids-comp-menu-item-size-height-spacious)}.ids-menu-item.ids-menu-item-spacious>.ids-menu-item-label--wrapper>.ids-menu-item-label{font-family:var(--ids-comp-menu-item-label-typography-font-family-spacious);font-size:var(--ids-comp-menu-item-label-typography-font-size-spacious);font-weight:var(--ids-comp-menu-item-label-typography-font-weight-spacious);letter-spacing:var(--ids-comp-menu-item-label-typography-letter-spacing-spacious);line-height:var(--ids-comp-menu-item-label-typography-line-height-spacious)}.ids-menu-item.ids-menu-item-spacious .ids-icon{width:var(--ids-comp-menu-item-size-icon-spacious);height:var(--ids-comp-menu-item-size-icon-spacious);font-size:var(--ids-comp-menu-item-icon-typography-font-size-spacious);font-weight:var(--ids-comp-menu-item-icon-typography-font-weight-spacious);line-height:var(--ids-comp-menu-item-icon-typography-line-height-spacious)}.ids-menu-item.ids-menu-item-spacious.ids-menu-item-text.ids-menu-item-surface{border-style:solid;border-width:var(--ids-comp-menu-item-size-border-width-spacious);border-color:var(--ids-comp-menu-item-text-color-border-surface-default)}.ids-menu-item.ids-menu-item-spacious.ids-menu-item-text.ids-menu-item-surface:hover{border-color:var(--ids-comp-menu-item-text-color-border-surface-hovered)}.ids-menu-item.ids-menu-item-spacious.ids-menu-item-text.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled){border-color:var(--ids-comp-menu-item-text-color-border-surface-disabled)}.ids-menu-item.ids-menu-item-spacious.ids-menu-item-text.ids-menu-item-light{border-style:solid;border-width:var(--ids-comp-menu-item-size-border-width-spacious);border-color:var(--ids-comp-menu-item-text-color-border-light-default)}.ids-menu-item.ids-menu-item-spacious.ids-menu-item-text.ids-menu-item-light:hover{border-color:var(--ids-comp-menu-item-text-color-border-light-hovered)}.ids-menu-item.ids-menu-item-spacious.ids-menu-item-text.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled){border-color:var(--ids-comp-menu-item-text-color-border-light-disabled)}.ids-menu-item.ids-menu-item-spacious.ids-menu-item-filled.ids-menu-item-surface{border-style:solid;border-width:var(--ids-comp-menu-item-size-border-width-spacious);border-color:var(--ids-comp-menu-item-filled-color-border-surface-default)}.ids-menu-item.ids-menu-item-spacious.ids-menu-item-filled.ids-menu-item-surface:hover{border-color:var(--ids-comp-menu-item-filled-color-border-surface-hovered)}.ids-menu-item.ids-menu-item-spacious.ids-menu-item-filled.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled){border-color:var(--ids-comp-menu-item-filled-color-border-surface-disabled)}.ids-menu-item.ids-menu-item-spacious.ids-menu-item-filled.ids-menu-item-light{border-style:solid;border-width:var(--ids-comp-menu-item-size-border-width-spacious);border-color:var(--ids-comp-menu-item-filled-color-border-light-default)}.ids-menu-item.ids-menu-item-spacious.ids-menu-item-filled.ids-menu-item-light:hover{border-color:var(--ids-comp-menu-item-filled-color-border-light-hovered)}.ids-menu-item.ids-menu-item-spacious.ids-menu-item-filled.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled){border-color:var(--ids-comp-menu-item-filled-color-border-light-disabled)}.ids-menu-item.ids-menu-item-dense{gap:var(--ids-comp-menu-item-size-gap-dense);border-radius:var(--ids-comp-menu-item-size-border-radius-dense);padding:var(--ids-comp-menu-item-size-padding-y-dense) var(--ids-comp-menu-item-size-padding-x-dense);height:var(--ids-comp-menu-item-size-height-dense)}.ids-menu-item.ids-menu-item-dense>.ids-menu-item-label--wrapper>.ids-menu-item-label{font-family:var(--ids-comp-menu-item-label-typography-font-family-dense);font-size:var(--ids-comp-menu-item-label-typography-font-size-dense);font-weight:var(--ids-comp-menu-item-label-typography-font-weight-dense);letter-spacing:var(--ids-comp-menu-item-label-typography-letter-spacing-dense);line-height:var(--ids-comp-menu-item-label-typography-line-height-dense)}.ids-menu-item.ids-menu-item-dense .ids-icon{width:var(--ids-comp-menu-item-size-icon-dense);height:var(--ids-comp-menu-item-size-icon-dense);font-size:var(--ids-comp-menu-item-icon-typography-font-size-dense);font-weight:var(--ids-comp-menu-item-icon-typography-font-weight-dense);line-height:var(--ids-comp-menu-item-icon-typography-line-height-dense)}.ids-menu-item.ids-menu-item-dense.ids-menu-item-text.ids-menu-item-surface{border-style:solid;border-width:var(--ids-comp-menu-item-size-border-width-dense);border-color:var(--ids-comp-menu-item-text-color-border-surface-default)}.ids-menu-item.ids-menu-item-dense.ids-menu-item-text.ids-menu-item-surface:hover{border-color:var(--ids-comp-menu-item-text-color-border-surface-hovered)}.ids-menu-item.ids-menu-item-dense.ids-menu-item-text.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled){border-color:var(--ids-comp-menu-item-text-color-border-surface-disabled)}.ids-menu-item.ids-menu-item-dense.ids-menu-item-text.ids-menu-item-light{border-style:solid;border-width:var(--ids-comp-menu-item-size-border-width-dense);border-color:var(--ids-comp-menu-item-text-color-border-light-default)}.ids-menu-item.ids-menu-item-dense.ids-menu-item-text.ids-menu-item-light:hover{border-color:var(--ids-comp-menu-item-text-color-border-light-hovered)}.ids-menu-item.ids-menu-item-dense.ids-menu-item-text.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled){border-color:var(--ids-comp-menu-item-text-color-border-light-disabled)}.ids-menu-item.ids-menu-item-dense.ids-menu-item-filled.ids-menu-item-surface{border-style:solid;border-width:var(--ids-comp-menu-item-size-border-width-dense);border-color:var(--ids-comp-menu-item-filled-color-border-surface-default)}.ids-menu-item.ids-menu-item-dense.ids-menu-item-filled.ids-menu-item-surface:hover{border-color:var(--ids-comp-menu-item-filled-color-border-surface-hovered)}.ids-menu-item.ids-menu-item-dense.ids-menu-item-filled.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled){border-color:var(--ids-comp-menu-item-filled-color-border-surface-disabled)}.ids-menu-item.ids-menu-item-dense.ids-menu-item-filled.ids-menu-item-light{border-style:solid;border-width:var(--ids-comp-menu-item-size-border-width-dense);border-color:var(--ids-comp-menu-item-filled-color-border-light-default)}.ids-menu-item.ids-menu-item-dense.ids-menu-item-filled.ids-menu-item-light:hover{border-color:var(--ids-comp-menu-item-filled-color-border-light-hovered)}.ids-menu-item.ids-menu-item-dense.ids-menu-item-filled.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled){border-color:var(--ids-comp-menu-item-filled-color-border-light-disabled)}.ids-menu-item.ids-menu-item-text.ids-menu-item-surface{color:var(--ids-comp-menu-item-text-color-fg-label-surface-default);background:var(--ids-comp-menu-item-text-color-bg-surface-default)}.ids-menu-item.ids-menu-item-text.ids-menu-item-surface.ids-menu-item-active{color:var(--ids-comp-menu-item-text-color-fg-label-surface-active);background:var(--ids-comp-menu-item-text-color-bg-surface-active)}.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:hover{color:var(--ids-comp-menu-item-text-color-fg-label-surface-hovered);background:var(--ids-comp-menu-item-text-color-bg-surface-hovered)}.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:focus,.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:focus-visible{color:var(--ids-comp-menu-item-text-color-fg-label-surface-focused);background:var(--ids-comp-menu-item-text-color-bg-surface-focused)}.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:active{background:var(--ids-comp-menu-item-text-color-bg-surface-pressed)}.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled){color:var(--ids-comp-menu-item-text-color-fg-label-surface-disabled);background:var(--ids-comp-menu-item-text-color-bg-surface-disabled)}.ids-menu-item.ids-menu-item-text.ids-menu-item-light{color:var(--ids-comp-menu-item-text-color-fg-label-light-default);background:var(--ids-comp-menu-item-text-color-bg-light-default)}.ids-menu-item.ids-menu-item-text.ids-menu-item-light.ids-menu-item-active{color:var(--ids-comp-menu-item-text-color-fg-label-light-active);background:var(--ids-comp-menu-item-text-color-bg-light-active)}.ids-menu-item.ids-menu-item-text.ids-menu-item-light:hover{color:var(--ids-comp-menu-item-text-color-fg-label-light-hovered);background:var(--ids-comp-menu-item-text-color-bg-light-hovered)}.ids-menu-item.ids-menu-item-text.ids-menu-item-light:focus,.ids-menu-item.ids-menu-item-text.ids-menu-item-light:focus-visible{color:var(--ids-comp-menu-item-text-color-fg-label-light-focused);background:var(--ids-comp-menu-item-text-color-bg-light-focused)}.ids-menu-item.ids-menu-item-text.ids-menu-item-light:active{background:var(--ids-comp-menu-item-text-color-bg-light-pressed)}.ids-menu-item.ids-menu-item-text.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled){color:var(--ids-comp-menu-item-text-color-fg-label-light-disabled);background:var(--ids-comp-menu-item-text-color-bg-light-disabled)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface{color:var(--ids-comp-menu-item-filled-color-fg-label-surface-default);background:var(--ids-comp-menu-item-filled-color-bg-surface-default)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface.ids-menu-item-active{color:var(--ids-comp-menu-item-filled-color-fg-label-surface-active);background:var(--ids-comp-menu-item-filled-color-bg-surface-active)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:hover{color:var(--ids-comp-menu-item-filled-color-fg-label-surface-hovered);background:var(--ids-comp-menu-item-filled-color-bg-surface-hovered)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:focus,.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:focus-visible{color:var(--ids-comp-menu-item-filled-color-fg-label-surface-focused);background:var(--ids-comp-menu-item-filled-color-bg-surface-focused)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:active{background:var(--ids-comp-menu-item-filled-color-bg-surface-pressed)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled){color:var(--ids-comp-menu-item-filled-color-fg-label-surface-disabled);background:var(--ids-comp-menu-item-filled-color-bg-surface-disabled)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-light{color:var(--ids-comp-menu-item-filled-color-fg-label-light-default);background:var(--ids-comp-menu-item-filled-color-bg-light-default)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-light.ids-menu-item-active{color:var(--ids-comp-menu-item-filled-color-fg-label-light-active);background:var(--ids-comp-menu-item-filled-color-bg-light-active)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-light:hover{color:var(--ids-comp-menu-item-filled-color-fg-label-light-hovered);background:var(--ids-comp-menu-item-filled-color-bg-light-hovered)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-light:focus,.ids-menu-item.ids-menu-item-filled.ids-menu-item-light:focus-visible{color:var(--ids-comp-menu-item-filled-color-fg-label-light-focused);background:var(--ids-comp-menu-item-filled-color-bg-light-focused)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-light:active{background:var(--ids-comp-menu-item-filled-color-bg-light-pressed)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled){color:var(--ids-comp-menu-item-filled-color-fg-label-light-disabled);background:var(--ids-comp-menu-item-filled-color-bg-light-disabled)}.ids-active-indicator{display:flex;flex-direction:column;justify-content:center;position:relative}.ids-active-indicator.ids-active-indicator--active:has(.ids-menu-item)::after{content:"";position:absolute;width:100%;bottom:0}.ids-active-indicator.ids-active-indicator--active:has(.ids-menu-item.ids-menu-item-compact)::after{height:var(--ids-comp-menu-item-active-indicator-size-height-compact);border-radius:var(--ids-comp-menu-item-active-indicator-size-border-radius-compact)}.ids-active-indicator.ids-active-indicator--active:has(.ids-menu-item.ids-menu-item-comfortable)::after{height:var(--ids-comp-menu-item-active-indicator-size-height-comfortable);border-radius:var(--ids-comp-menu-item-active-indicator-size-border-radius-comfortable)}.ids-active-indicator.ids-active-indicator--active:has(.ids-menu-item.ids-menu-item-spacious)::after{height:var(--ids-comp-menu-item-active-indicator-size-height-spacious);border-radius:var(--ids-comp-menu-item-active-indicator-size-border-radius-spacious)}.ids-active-indicator.ids-active-indicator--active:has(.ids-menu-item.ids-menu-item-dense)::after{height:var(--ids-comp-menu-item-active-indicator-size-height-dense);border-radius:var(--ids-comp-menu-item-active-indicator-size-border-radius-dense)}.ids-active-indicator.ids-active-indicator--active:has(.ids-menu-item.ids-menu-item-surface)::after{background-color:var(--ids-comp-menu-item-active-indicator-color-bg-surface-default)}.ids-active-indicator.ids-active-indicator--active:has(.ids-menu-item.ids-menu-item-light)::after{background-color:var(--ids-comp-menu-item-active-indicator-color-bg-light-default)}
1
+ a.ids-menu-item:link,a.ids-menu-item:visited{text-decoration:none}.ids-menu-item{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0);line-height:1.5;width:100%;box-sizing:border-box;display:inline-flex;flex-shrink:0;align-items:center}.ids-menu-item::before,.ids-menu-item::after,.ids-menu-item *,.ids-menu-item ::before,.ids-menu-item ::after{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0)}.ids-menu-item.ids-menu-item-no-label{justify-content:space-between}.ids-menu-item .ids-menu-item-label{overflow:hidden;text-overflow:ellipsis;font-style:normal}.ids-menu-item .ids-menu-item-label--wrapper{display:flex;flex:1 1 0;align-items:center;justify-content:flex-start}.ids-menu-item:not(:is(:disabled,.ids-menu-item-disabled)){cursor:pointer}.ids-menu-item:is(:disabled,.ids-menu-item-disabled){cursor:not-allowed}.ids-menu-item.ids-menu-item-compact{gap:var(--ids-comp-menu-item-size-gap-compact);border-radius:var(--ids-comp-menu-item-size-border-radius-compact);padding:var(--ids-comp-menu-item-size-padding-y-compact) var(--ids-comp-menu-item-size-padding-x-compact);height:var(--ids-comp-menu-item-size-height-compact)}.ids-menu-item.ids-menu-item-compact>.ids-menu-item-label--wrapper>.ids-menu-item-label{font-family:var(--ids-comp-menu-item-label-typography-font-family-compact);font-size:var(--ids-comp-menu-item-label-typography-font-size-compact);font-weight:var(--ids-comp-menu-item-label-typography-font-weight-compact);letter-spacing:var(--ids-comp-menu-item-label-typography-letter-spacing-compact);line-height:var(--ids-comp-menu-item-label-typography-line-height-compact)}.ids-menu-item.ids-menu-item-compact .ids-icon{width:var(--ids-comp-menu-item-size-icon-compact);height:var(--ids-comp-menu-item-size-icon-compact);font-size:var(--ids-comp-menu-item-icon-typography-font-size-compact);font-weight:var(--ids-comp-menu-item-icon-typography-font-weight-compact);line-height:var(--ids-comp-menu-item-icon-typography-line-height-compact)}.ids-menu-item.ids-menu-item-compact.ids-menu-item-text.ids-menu-item-surface{border-style:solid;border-width:var(--ids-comp-menu-item-size-border-width-compact);border-color:var(--ids-comp-menu-item-text-color-border-surface-default)}.ids-menu-item.ids-menu-item-compact.ids-menu-item-text.ids-menu-item-surface:hover{border-color:var(--ids-comp-menu-item-text-color-border-surface-hovered)}.ids-menu-item.ids-menu-item-compact.ids-menu-item-text.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled){border-color:var(--ids-comp-menu-item-text-color-border-surface-disabled)}.ids-menu-item.ids-menu-item-compact.ids-menu-item-text.ids-menu-item-light{border-style:solid;border-width:var(--ids-comp-menu-item-size-border-width-compact);border-color:var(--ids-comp-menu-item-text-color-border-light-default)}.ids-menu-item.ids-menu-item-compact.ids-menu-item-text.ids-menu-item-light:hover{border-color:var(--ids-comp-menu-item-text-color-border-light-hovered)}.ids-menu-item.ids-menu-item-compact.ids-menu-item-text.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled){border-color:var(--ids-comp-menu-item-text-color-border-light-disabled)}.ids-menu-item.ids-menu-item-compact.ids-menu-item-filled.ids-menu-item-surface{border-style:solid;border-width:var(--ids-comp-menu-item-size-border-width-compact);border-color:var(--ids-comp-menu-item-filled-color-border-surface-default)}.ids-menu-item.ids-menu-item-compact.ids-menu-item-filled.ids-menu-item-surface:hover{border-color:var(--ids-comp-menu-item-filled-color-border-surface-hovered)}.ids-menu-item.ids-menu-item-compact.ids-menu-item-filled.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled){border-color:var(--ids-comp-menu-item-filled-color-border-surface-disabled)}.ids-menu-item.ids-menu-item-compact.ids-menu-item-filled.ids-menu-item-light{border-style:solid;border-width:var(--ids-comp-menu-item-size-border-width-compact);border-color:var(--ids-comp-menu-item-filled-color-border-light-default)}.ids-menu-item.ids-menu-item-compact.ids-menu-item-filled.ids-menu-item-light:hover{border-color:var(--ids-comp-menu-item-filled-color-border-light-hovered)}.ids-menu-item.ids-menu-item-compact.ids-menu-item-filled.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled){border-color:var(--ids-comp-menu-item-filled-color-border-light-disabled)}.ids-menu-item.ids-menu-item-comfortable{gap:var(--ids-comp-menu-item-size-gap-comfortable);border-radius:var(--ids-comp-menu-item-size-border-radius-comfortable);padding:var(--ids-comp-menu-item-size-padding-y-comfortable) var(--ids-comp-menu-item-size-padding-x-comfortable);height:var(--ids-comp-menu-item-size-height-comfortable)}.ids-menu-item.ids-menu-item-comfortable>.ids-menu-item-label--wrapper>.ids-menu-item-label{font-family:var(--ids-comp-menu-item-label-typography-font-family-comfortable);font-size:var(--ids-comp-menu-item-label-typography-font-size-comfortable);font-weight:var(--ids-comp-menu-item-label-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-menu-item-label-typography-letter-spacing-comfortable);line-height:var(--ids-comp-menu-item-label-typography-line-height-comfortable)}.ids-menu-item.ids-menu-item-comfortable .ids-icon{width:var(--ids-comp-menu-item-size-icon-comfortable);height:var(--ids-comp-menu-item-size-icon-comfortable);font-size:var(--ids-comp-menu-item-icon-typography-font-size-comfortable);font-weight:var(--ids-comp-menu-item-icon-typography-font-weight-comfortable);line-height:var(--ids-comp-menu-item-icon-typography-line-height-comfortable)}.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-text.ids-menu-item-surface{border-style:solid;border-width:var(--ids-comp-menu-item-size-border-width-comfortable);border-color:var(--ids-comp-menu-item-text-color-border-surface-default)}.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-text.ids-menu-item-surface:hover{border-color:var(--ids-comp-menu-item-text-color-border-surface-hovered)}.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-text.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled){border-color:var(--ids-comp-menu-item-text-color-border-surface-disabled)}.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-text.ids-menu-item-light{border-style:solid;border-width:var(--ids-comp-menu-item-size-border-width-comfortable);border-color:var(--ids-comp-menu-item-text-color-border-light-default)}.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-text.ids-menu-item-light:hover{border-color:var(--ids-comp-menu-item-text-color-border-light-hovered)}.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-text.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled){border-color:var(--ids-comp-menu-item-text-color-border-light-disabled)}.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-filled.ids-menu-item-surface{border-style:solid;border-width:var(--ids-comp-menu-item-size-border-width-comfortable);border-color:var(--ids-comp-menu-item-filled-color-border-surface-default)}.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-filled.ids-menu-item-surface:hover{border-color:var(--ids-comp-menu-item-filled-color-border-surface-hovered)}.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-filled.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled){border-color:var(--ids-comp-menu-item-filled-color-border-surface-disabled)}.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-filled.ids-menu-item-light{border-style:solid;border-width:var(--ids-comp-menu-item-size-border-width-comfortable);border-color:var(--ids-comp-menu-item-filled-color-border-light-default)}.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-filled.ids-menu-item-light:hover{border-color:var(--ids-comp-menu-item-filled-color-border-light-hovered)}.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-filled.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled){border-color:var(--ids-comp-menu-item-filled-color-border-light-disabled)}.ids-menu-item.ids-menu-item-spacious{gap:var(--ids-comp-menu-item-size-gap-spacious);border-radius:var(--ids-comp-menu-item-size-border-radius-spacious);padding:var(--ids-comp-menu-item-size-padding-y-spacious) var(--ids-comp-menu-item-size-padding-x-spacious);height:var(--ids-comp-menu-item-size-height-spacious)}.ids-menu-item.ids-menu-item-spacious>.ids-menu-item-label--wrapper>.ids-menu-item-label{font-family:var(--ids-comp-menu-item-label-typography-font-family-spacious);font-size:var(--ids-comp-menu-item-label-typography-font-size-spacious);font-weight:var(--ids-comp-menu-item-label-typography-font-weight-spacious);letter-spacing:var(--ids-comp-menu-item-label-typography-letter-spacing-spacious);line-height:var(--ids-comp-menu-item-label-typography-line-height-spacious)}.ids-menu-item.ids-menu-item-spacious .ids-icon{width:var(--ids-comp-menu-item-size-icon-spacious);height:var(--ids-comp-menu-item-size-icon-spacious);font-size:var(--ids-comp-menu-item-icon-typography-font-size-spacious);font-weight:var(--ids-comp-menu-item-icon-typography-font-weight-spacious);line-height:var(--ids-comp-menu-item-icon-typography-line-height-spacious)}.ids-menu-item.ids-menu-item-spacious.ids-menu-item-text.ids-menu-item-surface{border-style:solid;border-width:var(--ids-comp-menu-item-size-border-width-spacious);border-color:var(--ids-comp-menu-item-text-color-border-surface-default)}.ids-menu-item.ids-menu-item-spacious.ids-menu-item-text.ids-menu-item-surface:hover{border-color:var(--ids-comp-menu-item-text-color-border-surface-hovered)}.ids-menu-item.ids-menu-item-spacious.ids-menu-item-text.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled){border-color:var(--ids-comp-menu-item-text-color-border-surface-disabled)}.ids-menu-item.ids-menu-item-spacious.ids-menu-item-text.ids-menu-item-light{border-style:solid;border-width:var(--ids-comp-menu-item-size-border-width-spacious);border-color:var(--ids-comp-menu-item-text-color-border-light-default)}.ids-menu-item.ids-menu-item-spacious.ids-menu-item-text.ids-menu-item-light:hover{border-color:var(--ids-comp-menu-item-text-color-border-light-hovered)}.ids-menu-item.ids-menu-item-spacious.ids-menu-item-text.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled){border-color:var(--ids-comp-menu-item-text-color-border-light-disabled)}.ids-menu-item.ids-menu-item-spacious.ids-menu-item-filled.ids-menu-item-surface{border-style:solid;border-width:var(--ids-comp-menu-item-size-border-width-spacious);border-color:var(--ids-comp-menu-item-filled-color-border-surface-default)}.ids-menu-item.ids-menu-item-spacious.ids-menu-item-filled.ids-menu-item-surface:hover{border-color:var(--ids-comp-menu-item-filled-color-border-surface-hovered)}.ids-menu-item.ids-menu-item-spacious.ids-menu-item-filled.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled){border-color:var(--ids-comp-menu-item-filled-color-border-surface-disabled)}.ids-menu-item.ids-menu-item-spacious.ids-menu-item-filled.ids-menu-item-light{border-style:solid;border-width:var(--ids-comp-menu-item-size-border-width-spacious);border-color:var(--ids-comp-menu-item-filled-color-border-light-default)}.ids-menu-item.ids-menu-item-spacious.ids-menu-item-filled.ids-menu-item-light:hover{border-color:var(--ids-comp-menu-item-filled-color-border-light-hovered)}.ids-menu-item.ids-menu-item-spacious.ids-menu-item-filled.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled){border-color:var(--ids-comp-menu-item-filled-color-border-light-disabled)}.ids-menu-item.ids-menu-item-dense{gap:var(--ids-comp-menu-item-size-gap-dense);border-radius:var(--ids-comp-menu-item-size-border-radius-dense);padding:var(--ids-comp-menu-item-size-padding-y-dense) var(--ids-comp-menu-item-size-padding-x-dense);height:var(--ids-comp-menu-item-size-height-dense)}.ids-menu-item.ids-menu-item-dense>.ids-menu-item-label--wrapper>.ids-menu-item-label{font-family:var(--ids-comp-menu-item-label-typography-font-family-dense);font-size:var(--ids-comp-menu-item-label-typography-font-size-dense);font-weight:var(--ids-comp-menu-item-label-typography-font-weight-dense);letter-spacing:var(--ids-comp-menu-item-label-typography-letter-spacing-dense);line-height:var(--ids-comp-menu-item-label-typography-line-height-dense)}.ids-menu-item.ids-menu-item-dense .ids-icon{width:var(--ids-comp-menu-item-size-icon-dense);height:var(--ids-comp-menu-item-size-icon-dense);font-size:var(--ids-comp-menu-item-icon-typography-font-size-dense);font-weight:var(--ids-comp-menu-item-icon-typography-font-weight-dense);line-height:var(--ids-comp-menu-item-icon-typography-line-height-dense)}.ids-menu-item.ids-menu-item-dense.ids-menu-item-text.ids-menu-item-surface{border-style:solid;border-width:var(--ids-comp-menu-item-size-border-width-dense);border-color:var(--ids-comp-menu-item-text-color-border-surface-default)}.ids-menu-item.ids-menu-item-dense.ids-menu-item-text.ids-menu-item-surface:hover{border-color:var(--ids-comp-menu-item-text-color-border-surface-hovered)}.ids-menu-item.ids-menu-item-dense.ids-menu-item-text.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled){border-color:var(--ids-comp-menu-item-text-color-border-surface-disabled)}.ids-menu-item.ids-menu-item-dense.ids-menu-item-text.ids-menu-item-light{border-style:solid;border-width:var(--ids-comp-menu-item-size-border-width-dense);border-color:var(--ids-comp-menu-item-text-color-border-light-default)}.ids-menu-item.ids-menu-item-dense.ids-menu-item-text.ids-menu-item-light:hover{border-color:var(--ids-comp-menu-item-text-color-border-light-hovered)}.ids-menu-item.ids-menu-item-dense.ids-menu-item-text.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled){border-color:var(--ids-comp-menu-item-text-color-border-light-disabled)}.ids-menu-item.ids-menu-item-dense.ids-menu-item-filled.ids-menu-item-surface{border-style:solid;border-width:var(--ids-comp-menu-item-size-border-width-dense);border-color:var(--ids-comp-menu-item-filled-color-border-surface-default)}.ids-menu-item.ids-menu-item-dense.ids-menu-item-filled.ids-menu-item-surface:hover{border-color:var(--ids-comp-menu-item-filled-color-border-surface-hovered)}.ids-menu-item.ids-menu-item-dense.ids-menu-item-filled.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled){border-color:var(--ids-comp-menu-item-filled-color-border-surface-disabled)}.ids-menu-item.ids-menu-item-dense.ids-menu-item-filled.ids-menu-item-light{border-style:solid;border-width:var(--ids-comp-menu-item-size-border-width-dense);border-color:var(--ids-comp-menu-item-filled-color-border-light-default)}.ids-menu-item.ids-menu-item-dense.ids-menu-item-filled.ids-menu-item-light:hover{border-color:var(--ids-comp-menu-item-filled-color-border-light-hovered)}.ids-menu-item.ids-menu-item-dense.ids-menu-item-filled.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled){border-color:var(--ids-comp-menu-item-filled-color-border-light-disabled)}.ids-menu-item.ids-menu-item-text.ids-menu-item-surface{color:var(--ids-comp-menu-item-text-color-fg-label-surface-default);background:var(--ids-comp-menu-item-text-color-bg-surface-default)}.ids-menu-item.ids-menu-item-text.ids-menu-item-surface.ids-menu-item-active{color:var(--ids-comp-menu-item-text-color-fg-label-surface-active);background:var(--ids-comp-menu-item-text-color-bg-surface-active)}.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:hover{color:var(--ids-comp-menu-item-text-color-fg-label-surface-hovered);background:var(--ids-comp-menu-item-text-color-bg-surface-hovered)}.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:focus,.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:focus-visible{color:var(--ids-comp-menu-item-text-color-fg-label-surface-focused);background:var(--ids-comp-menu-item-text-color-bg-surface-focused);outline-color:var(--ids-comp-button-focused-outline-color-dark-focused);outline-width:var(--ids-comp-button-focused-outline-size-outline-compact);outline-offset:2px;outline-style:solid}.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:active{background:var(--ids-comp-menu-item-text-color-bg-surface-pressed);outline-style:none}.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled){color:var(--ids-comp-menu-item-text-color-fg-label-surface-disabled);background:var(--ids-comp-menu-item-text-color-bg-surface-disabled)}.ids-menu-item.ids-menu-item-text.ids-menu-item-surface{color:var(--ids-comp-menu-item-text-color-fg-label-surface-default);background:var(--ids-comp-menu-item-text-color-bg-surface-default)}.ids-menu-item.ids-menu-item-text.ids-menu-item-surface.ids-menu-item-active{color:var(--ids-comp-menu-item-text-color-fg-label-surface-active);background:var(--ids-comp-menu-item-text-color-bg-surface-active)}.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:hover{color:var(--ids-comp-menu-item-text-color-fg-label-surface-hovered);background:var(--ids-comp-menu-item-text-color-bg-surface-hovered)}.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:focus,.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:focus-visible{color:var(--ids-comp-menu-item-text-color-fg-label-surface-focused);background:var(--ids-comp-menu-item-text-color-bg-surface-focused);outline-color:var(--ids-comp-button-focused-outline-color-dark-focused);outline-width:var(--ids-comp-button-focused-outline-size-outline-comfortable);outline-offset:2px;outline-style:solid}.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:active{background:var(--ids-comp-menu-item-text-color-bg-surface-pressed);outline-style:none}.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled){color:var(--ids-comp-menu-item-text-color-fg-label-surface-disabled);background:var(--ids-comp-menu-item-text-color-bg-surface-disabled)}.ids-menu-item.ids-menu-item-text.ids-menu-item-surface{color:var(--ids-comp-menu-item-text-color-fg-label-surface-default);background:var(--ids-comp-menu-item-text-color-bg-surface-default)}.ids-menu-item.ids-menu-item-text.ids-menu-item-surface.ids-menu-item-active{color:var(--ids-comp-menu-item-text-color-fg-label-surface-active);background:var(--ids-comp-menu-item-text-color-bg-surface-active)}.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:hover{color:var(--ids-comp-menu-item-text-color-fg-label-surface-hovered);background:var(--ids-comp-menu-item-text-color-bg-surface-hovered)}.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:focus,.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:focus-visible{color:var(--ids-comp-menu-item-text-color-fg-label-surface-focused);background:var(--ids-comp-menu-item-text-color-bg-surface-focused);outline-color:var(--ids-comp-button-focused-outline-color-dark-focused);outline-width:var(--ids-comp-button-focused-outline-size-outline-spacious);outline-offset:2px;outline-style:solid}.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:active{background:var(--ids-comp-menu-item-text-color-bg-surface-pressed);outline-style:none}.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled){color:var(--ids-comp-menu-item-text-color-fg-label-surface-disabled);background:var(--ids-comp-menu-item-text-color-bg-surface-disabled)}.ids-menu-item.ids-menu-item-text.ids-menu-item-surface{color:var(--ids-comp-menu-item-text-color-fg-label-surface-default);background:var(--ids-comp-menu-item-text-color-bg-surface-default)}.ids-menu-item.ids-menu-item-text.ids-menu-item-surface.ids-menu-item-active{color:var(--ids-comp-menu-item-text-color-fg-label-surface-active);background:var(--ids-comp-menu-item-text-color-bg-surface-active)}.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:hover{color:var(--ids-comp-menu-item-text-color-fg-label-surface-hovered);background:var(--ids-comp-menu-item-text-color-bg-surface-hovered)}.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:focus,.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:focus-visible{color:var(--ids-comp-menu-item-text-color-fg-label-surface-focused);background:var(--ids-comp-menu-item-text-color-bg-surface-focused);outline-color:var(--ids-comp-button-focused-outline-color-dark-focused);outline-width:var(--ids-comp-button-focused-outline-size-outline-dense);outline-offset:2px;outline-style:solid}.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:active{background:var(--ids-comp-menu-item-text-color-bg-surface-pressed);outline-style:none}.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled){color:var(--ids-comp-menu-item-text-color-fg-label-surface-disabled);background:var(--ids-comp-menu-item-text-color-bg-surface-disabled)}.ids-menu-item.ids-menu-item-text.ids-menu-item-light{color:var(--ids-comp-menu-item-text-color-fg-label-light-default);background:var(--ids-comp-menu-item-text-color-bg-light-default)}.ids-menu-item.ids-menu-item-text.ids-menu-item-light.ids-menu-item-active{color:var(--ids-comp-menu-item-text-color-fg-label-light-active);background:var(--ids-comp-menu-item-text-color-bg-light-active)}.ids-menu-item.ids-menu-item-text.ids-menu-item-light:hover{color:var(--ids-comp-menu-item-text-color-fg-label-light-hovered);background:var(--ids-comp-menu-item-text-color-bg-light-hovered)}.ids-menu-item.ids-menu-item-text.ids-menu-item-light:focus,.ids-menu-item.ids-menu-item-text.ids-menu-item-light:focus-visible{color:var(--ids-comp-menu-item-text-color-fg-label-light-focused);background:var(--ids-comp-menu-item-text-color-bg-light-focused);outline-color:var(--ids-comp-button-focused-outline-color-light-focused);outline-width:var(--ids-comp-button-focused-outline-size-outline-compact);outline-offset:2px;outline-style:solid}.ids-menu-item.ids-menu-item-text.ids-menu-item-light:active{background:var(--ids-comp-menu-item-text-color-bg-light-pressed);outline-style:none}.ids-menu-item.ids-menu-item-text.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled){color:var(--ids-comp-menu-item-text-color-fg-label-light-disabled);background:var(--ids-comp-menu-item-text-color-bg-light-disabled)}.ids-menu-item.ids-menu-item-text.ids-menu-item-light{color:var(--ids-comp-menu-item-text-color-fg-label-light-default);background:var(--ids-comp-menu-item-text-color-bg-light-default)}.ids-menu-item.ids-menu-item-text.ids-menu-item-light.ids-menu-item-active{color:var(--ids-comp-menu-item-text-color-fg-label-light-active);background:var(--ids-comp-menu-item-text-color-bg-light-active)}.ids-menu-item.ids-menu-item-text.ids-menu-item-light:hover{color:var(--ids-comp-menu-item-text-color-fg-label-light-hovered);background:var(--ids-comp-menu-item-text-color-bg-light-hovered)}.ids-menu-item.ids-menu-item-text.ids-menu-item-light:focus,.ids-menu-item.ids-menu-item-text.ids-menu-item-light:focus-visible{color:var(--ids-comp-menu-item-text-color-fg-label-light-focused);background:var(--ids-comp-menu-item-text-color-bg-light-focused);outline-color:var(--ids-comp-button-focused-outline-color-light-focused);outline-width:var(--ids-comp-button-focused-outline-size-outline-comfortable);outline-offset:2px;outline-style:solid}.ids-menu-item.ids-menu-item-text.ids-menu-item-light:active{background:var(--ids-comp-menu-item-text-color-bg-light-pressed);outline-style:none}.ids-menu-item.ids-menu-item-text.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled){color:var(--ids-comp-menu-item-text-color-fg-label-light-disabled);background:var(--ids-comp-menu-item-text-color-bg-light-disabled)}.ids-menu-item.ids-menu-item-text.ids-menu-item-light{color:var(--ids-comp-menu-item-text-color-fg-label-light-default);background:var(--ids-comp-menu-item-text-color-bg-light-default)}.ids-menu-item.ids-menu-item-text.ids-menu-item-light.ids-menu-item-active{color:var(--ids-comp-menu-item-text-color-fg-label-light-active);background:var(--ids-comp-menu-item-text-color-bg-light-active)}.ids-menu-item.ids-menu-item-text.ids-menu-item-light:hover{color:var(--ids-comp-menu-item-text-color-fg-label-light-hovered);background:var(--ids-comp-menu-item-text-color-bg-light-hovered)}.ids-menu-item.ids-menu-item-text.ids-menu-item-light:focus,.ids-menu-item.ids-menu-item-text.ids-menu-item-light:focus-visible{color:var(--ids-comp-menu-item-text-color-fg-label-light-focused);background:var(--ids-comp-menu-item-text-color-bg-light-focused);outline-color:var(--ids-comp-button-focused-outline-color-light-focused);outline-width:var(--ids-comp-button-focused-outline-size-outline-spacious);outline-offset:2px;outline-style:solid}.ids-menu-item.ids-menu-item-text.ids-menu-item-light:active{background:var(--ids-comp-menu-item-text-color-bg-light-pressed);outline-style:none}.ids-menu-item.ids-menu-item-text.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled){color:var(--ids-comp-menu-item-text-color-fg-label-light-disabled);background:var(--ids-comp-menu-item-text-color-bg-light-disabled)}.ids-menu-item.ids-menu-item-text.ids-menu-item-light{color:var(--ids-comp-menu-item-text-color-fg-label-light-default);background:var(--ids-comp-menu-item-text-color-bg-light-default)}.ids-menu-item.ids-menu-item-text.ids-menu-item-light.ids-menu-item-active{color:var(--ids-comp-menu-item-text-color-fg-label-light-active);background:var(--ids-comp-menu-item-text-color-bg-light-active)}.ids-menu-item.ids-menu-item-text.ids-menu-item-light:hover{color:var(--ids-comp-menu-item-text-color-fg-label-light-hovered);background:var(--ids-comp-menu-item-text-color-bg-light-hovered)}.ids-menu-item.ids-menu-item-text.ids-menu-item-light:focus,.ids-menu-item.ids-menu-item-text.ids-menu-item-light:focus-visible{color:var(--ids-comp-menu-item-text-color-fg-label-light-focused);background:var(--ids-comp-menu-item-text-color-bg-light-focused);outline-color:var(--ids-comp-button-focused-outline-color-light-focused);outline-width:var(--ids-comp-button-focused-outline-size-outline-dense);outline-offset:2px;outline-style:solid}.ids-menu-item.ids-menu-item-text.ids-menu-item-light:active{background:var(--ids-comp-menu-item-text-color-bg-light-pressed);outline-style:none}.ids-menu-item.ids-menu-item-text.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled){color:var(--ids-comp-menu-item-text-color-fg-label-light-disabled);background:var(--ids-comp-menu-item-text-color-bg-light-disabled)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface{color:var(--ids-comp-menu-item-filled-color-fg-label-surface-default);background:var(--ids-comp-menu-item-filled-color-bg-surface-default)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface.ids-menu-item-active{color:var(--ids-comp-menu-item-filled-color-fg-label-surface-active);background:var(--ids-comp-menu-item-filled-color-bg-surface-active)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:hover{color:var(--ids-comp-menu-item-filled-color-fg-label-surface-hovered);background:var(--ids-comp-menu-item-filled-color-bg-surface-hovered)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:focus,.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:focus-visible{color:var(--ids-comp-menu-item-filled-color-fg-label-surface-focused);background:var(--ids-comp-menu-item-filled-color-bg-surface-focused);outline-color:var(--ids-comp-button-focused-outline-color-dark-focused);outline-width:var(--ids-comp-button-focused-outline-size-outline-compact);outline-offset:2px;outline-style:solid}.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:active{background:var(--ids-comp-menu-item-filled-color-bg-surface-pressed);outline-style:none}.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled){color:var(--ids-comp-menu-item-filled-color-fg-label-surface-disabled);background:var(--ids-comp-menu-item-filled-color-bg-surface-disabled)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface{color:var(--ids-comp-menu-item-filled-color-fg-label-surface-default);background:var(--ids-comp-menu-item-filled-color-bg-surface-default)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface.ids-menu-item-active{color:var(--ids-comp-menu-item-filled-color-fg-label-surface-active);background:var(--ids-comp-menu-item-filled-color-bg-surface-active)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:hover{color:var(--ids-comp-menu-item-filled-color-fg-label-surface-hovered);background:var(--ids-comp-menu-item-filled-color-bg-surface-hovered)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:focus,.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:focus-visible{color:var(--ids-comp-menu-item-filled-color-fg-label-surface-focused);background:var(--ids-comp-menu-item-filled-color-bg-surface-focused);outline-color:var(--ids-comp-button-focused-outline-color-dark-focused);outline-width:var(--ids-comp-button-focused-outline-size-outline-comfortable);outline-offset:2px;outline-style:solid}.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:active{background:var(--ids-comp-menu-item-filled-color-bg-surface-pressed);outline-style:none}.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled){color:var(--ids-comp-menu-item-filled-color-fg-label-surface-disabled);background:var(--ids-comp-menu-item-filled-color-bg-surface-disabled)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface{color:var(--ids-comp-menu-item-filled-color-fg-label-surface-default);background:var(--ids-comp-menu-item-filled-color-bg-surface-default)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface.ids-menu-item-active{color:var(--ids-comp-menu-item-filled-color-fg-label-surface-active);background:var(--ids-comp-menu-item-filled-color-bg-surface-active)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:hover{color:var(--ids-comp-menu-item-filled-color-fg-label-surface-hovered);background:var(--ids-comp-menu-item-filled-color-bg-surface-hovered)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:focus,.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:focus-visible{color:var(--ids-comp-menu-item-filled-color-fg-label-surface-focused);background:var(--ids-comp-menu-item-filled-color-bg-surface-focused);outline-color:var(--ids-comp-button-focused-outline-color-dark-focused);outline-width:var(--ids-comp-button-focused-outline-size-outline-spacious);outline-offset:2px;outline-style:solid}.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:active{background:var(--ids-comp-menu-item-filled-color-bg-surface-pressed);outline-style:none}.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled){color:var(--ids-comp-menu-item-filled-color-fg-label-surface-disabled);background:var(--ids-comp-menu-item-filled-color-bg-surface-disabled)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface{color:var(--ids-comp-menu-item-filled-color-fg-label-surface-default);background:var(--ids-comp-menu-item-filled-color-bg-surface-default)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface.ids-menu-item-active{color:var(--ids-comp-menu-item-filled-color-fg-label-surface-active);background:var(--ids-comp-menu-item-filled-color-bg-surface-active)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:hover{color:var(--ids-comp-menu-item-filled-color-fg-label-surface-hovered);background:var(--ids-comp-menu-item-filled-color-bg-surface-hovered)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:focus,.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:focus-visible{color:var(--ids-comp-menu-item-filled-color-fg-label-surface-focused);background:var(--ids-comp-menu-item-filled-color-bg-surface-focused);outline-color:var(--ids-comp-button-focused-outline-color-dark-focused);outline-width:var(--ids-comp-button-focused-outline-size-outline-dense);outline-offset:2px;outline-style:solid}.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:active{background:var(--ids-comp-menu-item-filled-color-bg-surface-pressed);outline-style:none}.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled){color:var(--ids-comp-menu-item-filled-color-fg-label-surface-disabled);background:var(--ids-comp-menu-item-filled-color-bg-surface-disabled)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-light{color:var(--ids-comp-menu-item-filled-color-fg-label-light-default);background:var(--ids-comp-menu-item-filled-color-bg-light-default)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-light.ids-menu-item-active{color:var(--ids-comp-menu-item-filled-color-fg-label-light-active);background:var(--ids-comp-menu-item-filled-color-bg-light-active)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-light:hover{color:var(--ids-comp-menu-item-filled-color-fg-label-light-hovered);background:var(--ids-comp-menu-item-filled-color-bg-light-hovered)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-light:focus,.ids-menu-item.ids-menu-item-filled.ids-menu-item-light:focus-visible{color:var(--ids-comp-menu-item-filled-color-fg-label-light-focused);background:var(--ids-comp-menu-item-filled-color-bg-light-focused);outline-color:var(--ids-comp-button-focused-outline-color-light-focused);outline-width:var(--ids-comp-button-focused-outline-size-outline-compact);outline-offset:2px;outline-style:solid}.ids-menu-item.ids-menu-item-filled.ids-menu-item-light:active{background:var(--ids-comp-menu-item-filled-color-bg-light-pressed);outline-style:none}.ids-menu-item.ids-menu-item-filled.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled){color:var(--ids-comp-menu-item-filled-color-fg-label-light-disabled);background:var(--ids-comp-menu-item-filled-color-bg-light-disabled)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-light{color:var(--ids-comp-menu-item-filled-color-fg-label-light-default);background:var(--ids-comp-menu-item-filled-color-bg-light-default)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-light.ids-menu-item-active{color:var(--ids-comp-menu-item-filled-color-fg-label-light-active);background:var(--ids-comp-menu-item-filled-color-bg-light-active)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-light:hover{color:var(--ids-comp-menu-item-filled-color-fg-label-light-hovered);background:var(--ids-comp-menu-item-filled-color-bg-light-hovered)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-light:focus,.ids-menu-item.ids-menu-item-filled.ids-menu-item-light:focus-visible{color:var(--ids-comp-menu-item-filled-color-fg-label-light-focused);background:var(--ids-comp-menu-item-filled-color-bg-light-focused);outline-color:var(--ids-comp-button-focused-outline-color-light-focused);outline-width:var(--ids-comp-button-focused-outline-size-outline-comfortable);outline-offset:2px;outline-style:solid}.ids-menu-item.ids-menu-item-filled.ids-menu-item-light:active{background:var(--ids-comp-menu-item-filled-color-bg-light-pressed);outline-style:none}.ids-menu-item.ids-menu-item-filled.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled){color:var(--ids-comp-menu-item-filled-color-fg-label-light-disabled);background:var(--ids-comp-menu-item-filled-color-bg-light-disabled)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-light{color:var(--ids-comp-menu-item-filled-color-fg-label-light-default);background:var(--ids-comp-menu-item-filled-color-bg-light-default)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-light.ids-menu-item-active{color:var(--ids-comp-menu-item-filled-color-fg-label-light-active);background:var(--ids-comp-menu-item-filled-color-bg-light-active)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-light:hover{color:var(--ids-comp-menu-item-filled-color-fg-label-light-hovered);background:var(--ids-comp-menu-item-filled-color-bg-light-hovered)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-light:focus,.ids-menu-item.ids-menu-item-filled.ids-menu-item-light:focus-visible{color:var(--ids-comp-menu-item-filled-color-fg-label-light-focused);background:var(--ids-comp-menu-item-filled-color-bg-light-focused);outline-color:var(--ids-comp-button-focused-outline-color-light-focused);outline-width:var(--ids-comp-button-focused-outline-size-outline-spacious);outline-offset:2px;outline-style:solid}.ids-menu-item.ids-menu-item-filled.ids-menu-item-light:active{background:var(--ids-comp-menu-item-filled-color-bg-light-pressed);outline-style:none}.ids-menu-item.ids-menu-item-filled.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled){color:var(--ids-comp-menu-item-filled-color-fg-label-light-disabled);background:var(--ids-comp-menu-item-filled-color-bg-light-disabled)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-light{color:var(--ids-comp-menu-item-filled-color-fg-label-light-default);background:var(--ids-comp-menu-item-filled-color-bg-light-default)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-light.ids-menu-item-active{color:var(--ids-comp-menu-item-filled-color-fg-label-light-active);background:var(--ids-comp-menu-item-filled-color-bg-light-active)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-light:hover{color:var(--ids-comp-menu-item-filled-color-fg-label-light-hovered);background:var(--ids-comp-menu-item-filled-color-bg-light-hovered)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-light:focus,.ids-menu-item.ids-menu-item-filled.ids-menu-item-light:focus-visible{color:var(--ids-comp-menu-item-filled-color-fg-label-light-focused);background:var(--ids-comp-menu-item-filled-color-bg-light-focused);outline-color:var(--ids-comp-button-focused-outline-color-light-focused);outline-width:var(--ids-comp-button-focused-outline-size-outline-dense);outline-offset:2px;outline-style:solid}.ids-menu-item.ids-menu-item-filled.ids-menu-item-light:active{background:var(--ids-comp-menu-item-filled-color-bg-light-pressed);outline-style:none}.ids-menu-item.ids-menu-item-filled.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled){color:var(--ids-comp-menu-item-filled-color-fg-label-light-disabled);background:var(--ids-comp-menu-item-filled-color-bg-light-disabled)}.ids-active-indicator{display:flex;flex-direction:column;justify-content:center;position:relative}.ids-active-indicator.ids-active-indicator--active:has(.ids-menu-item)::after{content:"";position:absolute;width:100%;bottom:0}.ids-active-indicator.ids-active-indicator--active:has(.ids-menu-item.ids-menu-item-compact)::after{height:var(--ids-comp-menu-item-active-indicator-size-height-compact);border-radius:var(--ids-comp-menu-item-active-indicator-size-border-radius-compact)}.ids-active-indicator.ids-active-indicator--active:has(.ids-menu-item.ids-menu-item-comfortable)::after{height:var(--ids-comp-menu-item-active-indicator-size-height-comfortable);border-radius:var(--ids-comp-menu-item-active-indicator-size-border-radius-comfortable)}.ids-active-indicator.ids-active-indicator--active:has(.ids-menu-item.ids-menu-item-spacious)::after{height:var(--ids-comp-menu-item-active-indicator-size-height-spacious);border-radius:var(--ids-comp-menu-item-active-indicator-size-border-radius-spacious)}.ids-active-indicator.ids-active-indicator--active:has(.ids-menu-item.ids-menu-item-dense)::after{height:var(--ids-comp-menu-item-active-indicator-size-height-dense);border-radius:var(--ids-comp-menu-item-active-indicator-size-border-radius-dense)}.ids-active-indicator.ids-active-indicator--active:has(.ids-menu-item.ids-menu-item-surface)::after{background-color:var(--ids-comp-menu-item-active-indicator-color-bg-surface-default)}.ids-active-indicator.ids-active-indicator--active:has(.ids-menu-item.ids-menu-item-light)::after{background-color:var(--ids-comp-menu-item-active-indicator-color-bg-light-default)}
package/dist/menu-item/menu-item.plugin.js CHANGED
@@ -302,9 +302,14 @@ module.exports = function MenuItemPlugin() {
302
302
  {
303
303
  color: 'var(--ids-comp-menu-item-text-color-fg-label-surface-focused)',
304
304
  background: 'var(--ids-comp-menu-item-text-color-bg-surface-focused)',
305
+ outlineColor: 'var(--ids-comp-button-focused-outline-color-dark-focused)',
306
+ outlineWidth: 'var(--ids-comp-button-focused-outline-size-outline-dense)',
307
+ outlineOffset: '2px',
308
+ outlineStyle: 'solid',
305
309
  },
306
310
  '.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:active': {
307
311
  background: 'var(--ids-comp-menu-item-text-color-bg-surface-pressed)',
312
+ outlineStyle: 'none',
308
313
  },
309
314
  '.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled)': {
310
315
  color: 'var(--ids-comp-menu-item-text-color-fg-label-surface-disabled)',
@@ -325,9 +330,14 @@ module.exports = function MenuItemPlugin() {
325
330
  '.ids-menu-item.ids-menu-item-text.ids-menu-item-light:focus,.ids-menu-item.ids-menu-item-text.ids-menu-item-light:focus-visible': {
326
331
  color: 'var(--ids-comp-menu-item-text-color-fg-label-light-focused)',
327
332
  background: 'var(--ids-comp-menu-item-text-color-bg-light-focused)',
333
+ outlineColor: 'var(--ids-comp-button-focused-outline-color-light-focused)',
334
+ outlineWidth: 'var(--ids-comp-button-focused-outline-size-outline-dense)',
335
+ outlineOffset: '2px',
336
+ outlineStyle: 'solid',
328
337
  },
329
338
  '.ids-menu-item.ids-menu-item-text.ids-menu-item-light:active': {
330
339
  background: 'var(--ids-comp-menu-item-text-color-bg-light-pressed)',
340
+ outlineStyle: 'none',
331
341
  },
332
342
  '.ids-menu-item.ids-menu-item-text.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled)': {
333
343
  color: 'var(--ids-comp-menu-item-text-color-fg-label-light-disabled)',
@@ -349,9 +359,14 @@ module.exports = function MenuItemPlugin() {
349
359
  {
350
360
  color: 'var(--ids-comp-menu-item-filled-color-fg-label-surface-focused)',
351
361
  background: 'var(--ids-comp-menu-item-filled-color-bg-surface-focused)',
362
+ outlineColor: 'var(--ids-comp-button-focused-outline-color-dark-focused)',
363
+ outlineWidth: 'var(--ids-comp-button-focused-outline-size-outline-dense)',
364
+ outlineOffset: '2px',
365
+ outlineStyle: 'solid',
352
366
  },
353
367
  '.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:active': {
354
368
  background: 'var(--ids-comp-menu-item-filled-color-bg-surface-pressed)',
369
+ outlineStyle: 'none',
355
370
  },
356
371
  '.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled)': {
357
372
  color: 'var(--ids-comp-menu-item-filled-color-fg-label-surface-disabled)',
@@ -373,9 +388,14 @@ module.exports = function MenuItemPlugin() {
373
388
  {
374
389
  color: 'var(--ids-comp-menu-item-filled-color-fg-label-light-focused)',
375
390
  background: 'var(--ids-comp-menu-item-filled-color-bg-light-focused)',
391
+ outlineColor: 'var(--ids-comp-button-focused-outline-color-light-focused)',
392
+ outlineWidth: 'var(--ids-comp-button-focused-outline-size-outline-dense)',
393
+ outlineOffset: '2px',
394
+ outlineStyle: 'solid',
376
395
  },
377
396
  '.ids-menu-item.ids-menu-item-filled.ids-menu-item-light:active': {
378
397
  background: 'var(--ids-comp-menu-item-filled-color-bg-light-pressed)',
398
+ outlineStyle: 'none',
379
399
  },
380
400
  '.ids-menu-item.ids-menu-item-filled.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled)': {
381
401
  color: 'var(--ids-comp-menu-item-filled-color-fg-label-light-disabled)',
package/dist/overlay-panel/overlay-panel.css CHANGED
@@ -130,7 +130,4 @@
130
130
  }
131
131
  .ids-overlay-panel.ids-overlay-panel-has-menu button:hover {
132
132
  border-color: transparent;
133
- }
134
- .ids-overlay-panel.ids-overlay-panel-has-menu button:focus, .ids-overlay-panel.ids-overlay-panel-has-menu button:focus-visible {
135
- outline-style: none !important;
136
133
  }
package/dist/overlay-panel/overlay-panel.min.css CHANGED
@@ -1 +1 @@
1
- .ids-overlay-panel{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0);line-height:1.5;display:flex;flex-direction:column;align-items:flex-start;box-sizing:border-box}.ids-overlay-panel::before,.ids-overlay-panel::after,.ids-overlay-panel *,.ids-overlay-panel ::before,.ids-overlay-panel ::after{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0)}.ids-overlay-panel.ids-overlay-panel-compact{gap:var(--ids-comp-overlay-panel-size-gap-compact);padding:var(--ids-comp-overlay-panel-size-padding-y-compact) var(--ids-comp-overlay-panel-size-padding-x-compact);border-radius:var(--ids-comp-overlay-panel-size-border-radius-compact)}.ids-overlay-panel.ids-overlay-panel-compact.ids-overlay-panel-filled.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-compact);border-style:solid}.ids-overlay-panel.ids-overlay-panel-compact.ids-overlay-panel-outlined.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-compact);border-style:solid}.ids-overlay-panel.ids-overlay-panel-compact.ids-overlay-panel-elevated.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-compact);border-style:solid}.ids-overlay-panel.ids-overlay-panel-comfortable{gap:var(--ids-comp-overlay-panel-size-gap-comfortable);padding:var(--ids-comp-overlay-panel-size-padding-y-comfortable) var(--ids-comp-overlay-panel-size-padding-x-comfortable);border-radius:var(--ids-comp-overlay-panel-size-border-radius-comfortable)}.ids-overlay-panel.ids-overlay-panel-comfortable.ids-overlay-panel-filled.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-comfortable);border-style:solid}.ids-overlay-panel.ids-overlay-panel-comfortable.ids-overlay-panel-outlined.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-comfortable);border-style:solid}.ids-overlay-panel.ids-overlay-panel-comfortable.ids-overlay-panel-elevated.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-comfortable);border-style:solid}.ids-overlay-panel.ids-overlay-panel-spacious{gap:var(--ids-comp-overlay-panel-size-gap-spacious);padding:var(--ids-comp-overlay-panel-size-padding-y-spacious) var(--ids-comp-overlay-panel-size-padding-x-spacious);border-radius:var(--ids-comp-overlay-panel-size-border-radius-spacious)}.ids-overlay-panel.ids-overlay-panel-spacious.ids-overlay-panel-filled.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-spacious);border-style:solid}.ids-overlay-panel.ids-overlay-panel-spacious.ids-overlay-panel-outlined.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-spacious);border-style:solid}.ids-overlay-panel.ids-overlay-panel-spacious.ids-overlay-panel-elevated.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-spacious);border-style:solid}.ids-overlay-panel.ids-overlay-panel-dense{gap:var(--ids-comp-overlay-panel-size-gap-dense);padding:var(--ids-comp-overlay-panel-size-padding-y-dense) var(--ids-comp-overlay-panel-size-padding-x-dense);border-radius:var(--ids-comp-overlay-panel-size-border-radius-dense)}.ids-overlay-panel.ids-overlay-panel-dense.ids-overlay-panel-filled.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-dense);border-style:solid}.ids-overlay-panel.ids-overlay-panel-dense.ids-overlay-panel-outlined.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-dense);border-style:solid}.ids-overlay-panel.ids-overlay-panel-dense.ids-overlay-panel-elevated.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-dense);border-style:solid}.ids-overlay-panel.ids-overlay-panel-filled{box-shadow:none}.ids-overlay-panel.ids-overlay-panel-outlined{box-shadow:var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxs) var(--ids-smc-reference-container-effects-shadow-blur-xxs) var(--ids-smc-reference-container-effects-shadow-spread-none) var(--ids-smc-reference-container-effects-shadow-color-dark-lighter)}.ids-overlay-panel.ids-overlay-panel-elevated{box-shadow:var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxl) var(--ids-smc-reference-container-effects-shadow-blur-xxxl) var(--ids-smc-reference-container-effects-shadow-spread-xxs) var(--ids-smc-reference-container-effects-shadow-color-dark-default)}.ids-overlay-panel.ids-overlay-panel-filled.ids-overlay-panel-light{background:var(--ids-comp-overlay-panel-filled-color-bg-light-default)}.ids-overlay-panel.ids-overlay-panel-filled.ids-overlay-panel-light.ids-overlay-panel-outlined{border-color:var(--ids-comp-overlay-panel-filled-color-border-light-default)}.ids-overlay-panel.ids-overlay-panel-filled.ids-overlay-panel-surface{background:var(--ids-comp-overlay-panel-filled-color-bg-surface-default)}.ids-overlay-panel.ids-overlay-panel-filled.ids-overlay-panel-surface.ids-overlay-panel-outlined{border-color:var(--ids-comp-overlay-panel-filled-color-border-surface-default)}.ids-overlay-panel.ids-overlay-panel-outlined.ids-overlay-panel-light{background:var(--ids-comp-overlay-panel-outlined-color-bg-light-default)}.ids-overlay-panel.ids-overlay-panel-outlined.ids-overlay-panel-light.ids-overlay-panel-outlined{border-color:var(--ids-comp-overlay-panel-outlined-color-border-light-default)}.ids-overlay-panel.ids-overlay-panel-outlined.ids-overlay-panel-surface{background:var(--ids-comp-overlay-panel-outlined-color-bg-surface-default)}.ids-overlay-panel.ids-overlay-panel-outlined.ids-overlay-panel-surface.ids-overlay-panel-outlined{border-color:var(--ids-comp-overlay-panel-outlined-color-border-surface-default)}.ids-overlay-panel.ids-overlay-panel-elevated.ids-overlay-panel-light{background:var(--ids-comp-overlay-panel-elevated-color-bg-light-default)}.ids-overlay-panel.ids-overlay-panel-elevated.ids-overlay-panel-light.ids-overlay-panel-outlined{border-color:var(--ids-comp-overlay-panel-elevated-color-border-light-default)}.ids-overlay-panel.ids-overlay-panel-elevated.ids-overlay-panel-surface{background:var(--ids-comp-overlay-panel-elevated-color-bg-surface-default)}.ids-overlay-panel.ids-overlay-panel-elevated.ids-overlay-panel-surface.ids-overlay-panel-outlined{border-color:var(--ids-comp-overlay-panel-elevated-color-border-surface-default)}.ids-overlay-panel.ids-overlay-panel-has-menu button:hover{border-color:rgba(0,0,0,0)}.ids-overlay-panel.ids-overlay-panel-has-menu button:focus,.ids-overlay-panel.ids-overlay-panel-has-menu button:focus-visible{outline-style:none !important}
1
+ .ids-overlay-panel{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0);line-height:1.5;display:flex;flex-direction:column;align-items:flex-start;box-sizing:border-box}.ids-overlay-panel::before,.ids-overlay-panel::after,.ids-overlay-panel *,.ids-overlay-panel ::before,.ids-overlay-panel ::after{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0)}.ids-overlay-panel.ids-overlay-panel-compact{gap:var(--ids-comp-overlay-panel-size-gap-compact);padding:var(--ids-comp-overlay-panel-size-padding-y-compact) var(--ids-comp-overlay-panel-size-padding-x-compact);border-radius:var(--ids-comp-overlay-panel-size-border-radius-compact)}.ids-overlay-panel.ids-overlay-panel-compact.ids-overlay-panel-filled.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-compact);border-style:solid}.ids-overlay-panel.ids-overlay-panel-compact.ids-overlay-panel-outlined.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-compact);border-style:solid}.ids-overlay-panel.ids-overlay-panel-compact.ids-overlay-panel-elevated.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-compact);border-style:solid}.ids-overlay-panel.ids-overlay-panel-comfortable{gap:var(--ids-comp-overlay-panel-size-gap-comfortable);padding:var(--ids-comp-overlay-panel-size-padding-y-comfortable) var(--ids-comp-overlay-panel-size-padding-x-comfortable);border-radius:var(--ids-comp-overlay-panel-size-border-radius-comfortable)}.ids-overlay-panel.ids-overlay-panel-comfortable.ids-overlay-panel-filled.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-comfortable);border-style:solid}.ids-overlay-panel.ids-overlay-panel-comfortable.ids-overlay-panel-outlined.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-comfortable);border-style:solid}.ids-overlay-panel.ids-overlay-panel-comfortable.ids-overlay-panel-elevated.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-comfortable);border-style:solid}.ids-overlay-panel.ids-overlay-panel-spacious{gap:var(--ids-comp-overlay-panel-size-gap-spacious);padding:var(--ids-comp-overlay-panel-size-padding-y-spacious) var(--ids-comp-overlay-panel-size-padding-x-spacious);border-radius:var(--ids-comp-overlay-panel-size-border-radius-spacious)}.ids-overlay-panel.ids-overlay-panel-spacious.ids-overlay-panel-filled.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-spacious);border-style:solid}.ids-overlay-panel.ids-overlay-panel-spacious.ids-overlay-panel-outlined.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-spacious);border-style:solid}.ids-overlay-panel.ids-overlay-panel-spacious.ids-overlay-panel-elevated.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-spacious);border-style:solid}.ids-overlay-panel.ids-overlay-panel-dense{gap:var(--ids-comp-overlay-panel-size-gap-dense);padding:var(--ids-comp-overlay-panel-size-padding-y-dense) var(--ids-comp-overlay-panel-size-padding-x-dense);border-radius:var(--ids-comp-overlay-panel-size-border-radius-dense)}.ids-overlay-panel.ids-overlay-panel-dense.ids-overlay-panel-filled.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-dense);border-style:solid}.ids-overlay-panel.ids-overlay-panel-dense.ids-overlay-panel-outlined.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-dense);border-style:solid}.ids-overlay-panel.ids-overlay-panel-dense.ids-overlay-panel-elevated.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-dense);border-style:solid}.ids-overlay-panel.ids-overlay-panel-filled{box-shadow:none}.ids-overlay-panel.ids-overlay-panel-outlined{box-shadow:var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxs) var(--ids-smc-reference-container-effects-shadow-blur-xxs) var(--ids-smc-reference-container-effects-shadow-spread-none) var(--ids-smc-reference-container-effects-shadow-color-dark-lighter)}.ids-overlay-panel.ids-overlay-panel-elevated{box-shadow:var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxl) var(--ids-smc-reference-container-effects-shadow-blur-xxxl) var(--ids-smc-reference-container-effects-shadow-spread-xxs) var(--ids-smc-reference-container-effects-shadow-color-dark-default)}.ids-overlay-panel.ids-overlay-panel-filled.ids-overlay-panel-light{background:var(--ids-comp-overlay-panel-filled-color-bg-light-default)}.ids-overlay-panel.ids-overlay-panel-filled.ids-overlay-panel-light.ids-overlay-panel-outlined{border-color:var(--ids-comp-overlay-panel-filled-color-border-light-default)}.ids-overlay-panel.ids-overlay-panel-filled.ids-overlay-panel-surface{background:var(--ids-comp-overlay-panel-filled-color-bg-surface-default)}.ids-overlay-panel.ids-overlay-panel-filled.ids-overlay-panel-surface.ids-overlay-panel-outlined{border-color:var(--ids-comp-overlay-panel-filled-color-border-surface-default)}.ids-overlay-panel.ids-overlay-panel-outlined.ids-overlay-panel-light{background:var(--ids-comp-overlay-panel-outlined-color-bg-light-default)}.ids-overlay-panel.ids-overlay-panel-outlined.ids-overlay-panel-light.ids-overlay-panel-outlined{border-color:var(--ids-comp-overlay-panel-outlined-color-border-light-default)}.ids-overlay-panel.ids-overlay-panel-outlined.ids-overlay-panel-surface{background:var(--ids-comp-overlay-panel-outlined-color-bg-surface-default)}.ids-overlay-panel.ids-overlay-panel-outlined.ids-overlay-panel-surface.ids-overlay-panel-outlined{border-color:var(--ids-comp-overlay-panel-outlined-color-border-surface-default)}.ids-overlay-panel.ids-overlay-panel-elevated.ids-overlay-panel-light{background:var(--ids-comp-overlay-panel-elevated-color-bg-light-default)}.ids-overlay-panel.ids-overlay-panel-elevated.ids-overlay-panel-light.ids-overlay-panel-outlined{border-color:var(--ids-comp-overlay-panel-elevated-color-border-light-default)}.ids-overlay-panel.ids-overlay-panel-elevated.ids-overlay-panel-surface{background:var(--ids-comp-overlay-panel-elevated-color-bg-surface-default)}.ids-overlay-panel.ids-overlay-panel-elevated.ids-overlay-panel-surface.ids-overlay-panel-outlined{border-color:var(--ids-comp-overlay-panel-elevated-color-border-surface-default)}.ids-overlay-panel.ids-overlay-panel-has-menu button:hover{border-color:rgba(0,0,0,0)}