@underlayerdev/ui 0.14.10 → 0.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/containers/_containers.scss +21 -9
  2. package/containers/_values.scss +4 -0
  3. package/design-tokens/_variables.scss +20 -0
  4. package/fesm2022/underlayerdev-ui.mjs +175 -7
  5. package/fesm2022/underlayerdev-ui.mjs.map +1 -1
  6. package/package.json +1 -1
  7. package/styles/foundations.css +13 -7
  8. package/types/underlayerdev-ui.d.ts +70 -3
package/containers/_containers.scss CHANGED
@@ -31,9 +31,11 @@
31
31
  padding-right: $spacing-spacing-16;
32
32
  }
33
33
 
34
+ // From xl up the content stops growing and stays centred (the container is a
35
+ // centred flex row). Only a cap, like container-form's.
34
36
  @media (min-width: $breakpoint-xl) {
35
- &.content {
36
- max-width: 2176px;
37
+ > * {
38
+ max-width: $component-container-gallery-max-width;
37
39
  }
38
40
  }
39
41
  }
@@ -52,8 +54,9 @@
52
54
  @media (min-width: $breakpoint-xl) {
53
55
  padding-left: $spacing-spacing-48;
54
56
  padding-right: $spacing-spacing-48;
55
- &.content {
56
- max-width: 1920px;
57
+
58
+ > * {
59
+ max-width: $component-container-product-max-width;
57
60
  }
58
61
  }
59
62
  }
@@ -61,15 +64,24 @@
61
64
  // Container Form
62
65
  @mixin container-form {
63
66
  @include container-base;
64
- padding-left: $spacing-spacing-8;
65
- padding-right: $spacing-spacing-8;
67
+ padding-left: $spacing-spacing-4;
68
+ padding-right: $spacing-spacing-4;
69
+
70
+ // The container is a centred flex row, so a child that stops growing at the
71
+ // maximum stays in the middle. Only a cap, never a width of its own: the
72
+ // child may be a block that fills the row, or a row of controls that spreads.
73
+ > * {
74
+ max-width: $component-container-form-max-width;
75
+ }
76
+
77
+ @media (min-width: $breakpoint-sm) {
78
+ padding-left: $spacing-spacing-8;
79
+ padding-right: $spacing-spacing-8;
80
+ }
66
81
 
67
82
  @media (min-width: $breakpoint-md) {
68
83
  padding-left: $spacing-spacing-16;
69
84
  padding-right: $spacing-spacing-16;
70
- &.content {
71
- max-width: 960px;
72
- }
73
85
  }
74
86
 
75
87
  @media (min-width: $breakpoint-xl) {
package/containers/_values.scss CHANGED
@@ -5,5 +5,9 @@ $spacing-spacing-4: 16px !default;
5
5
  $spacing-spacing-8: 32px !default;
6
6
  $spacing-spacing-16: 64px !default;
7
7
  $spacing-spacing-48: 192px !default;
8
+ $component-container-gallery-max-width: 2176px !default;
9
+ $component-container-product-max-width: 1920px !default;
10
+ $component-container-form-max-width: 720px !default;
11
+ $breakpoint-sm: 768px !default;
8
12
  $breakpoint-md: 1024px !default;
9
13
  $breakpoint-xl: 1600px !default;
package/design-tokens/_variables.scss CHANGED
@@ -429,13 +429,19 @@ $iconography-font-line-height-16: 64px !default;
429
429
  $iconography-font-line-height-24: 96px !default;
430
430
  $iconography-font-line-height-32: 128px !default;
431
431
  $component-dropdown-list-max-height: 316px !default;
432
+ $component-container-gallery-max-width: 2176px !default;
433
+ $component-container-product-max-width: 1920px !default;
434
+ $component-container-form-max-width: 720px !default;
435
+ $component-control-height-xs: 24px !default;
432
436
  $component-control-height-sm: 32px !default;
433
437
  $component-control-height-md: 40px !default;
434
438
  $component-control-height-lg: 48px !default;
435
439
  $component-control-height-xl: 64px !default;
440
+ $component-control-min-width-xs: 64px !default;
436
441
  $component-control-min-width-sm: 96px !default;
437
442
  $component-control-min-width-md: 112px !default;
438
443
  $component-control-min-width-lg: 144px !default;
444
+ $component-icon-only-size-xs: 24px !default;
439
445
  $component-icon-only-size-sm: 32px !default;
440
446
  $component-icon-only-size-md: 40px !default;
441
447
  $component-icon-only-size-lg: 48px !default;
@@ -1440,19 +1446,33 @@ $tokens: (
1440
1446
  ),
1441
1447
  'component': (
1442
1448
  'dropdown-list-max-height': $component-dropdown-list-max-height,
1449
+ 'container': (
1450
+ 'gallery': (
1451
+ 'max-width': $component-container-gallery-max-width,
1452
+ ),
1453
+ 'product': (
1454
+ 'max-width': $component-container-product-max-width,
1455
+ ),
1456
+ 'form': (
1457
+ 'max-width': $component-container-form-max-width,
1458
+ ),
1459
+ ),
1443
1460
  'control': (
1444
1461
  'height': (
1462
+ 'xs': $component-control-height-xs,
1445
1463
  'sm': $component-control-height-sm,
1446
1464
  'md': $component-control-height-md,
1447
1465
  'lg': $component-control-height-lg,
1448
1466
  'xl': $component-control-height-xl,
1449
1467
  ),
1450
1468
  'min-width': (
1469
+ 'xs': $component-control-min-width-xs,
1451
1470
  'sm': $component-control-min-width-sm,
1452
1471
  'md': $component-control-min-width-md,
1453
1472
  'lg': $component-control-min-width-lg,
1454
1473
  ),
1455
1474
  'icon-only-size': (
1475
+ 'xs': $component-icon-only-size-xs,
1456
1476
  'sm': $component-icon-only-size-sm,
1457
1477
  'md': $component-icon-only-size-md,
1458
1478
  'lg': $component-icon-only-size-lg,
package/fesm2022/underlayerdev-ui.mjs CHANGED
@@ -1465,7 +1465,7 @@ var ButtonComponent = class ButtonComponent {
1465
1465
  </button>
1466
1466
  `,
1467
1467
  isInline: true,
1468
- styles: [".ul-btn{border:none;cursor:pointer;padding:0;text-decoration-line:none;overflow:visible;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;box-sizing:border-box;width:100%;color:#fff}.ul-btn:focus-visible,.ul-btn:focus{outline-offset:2px;outline:rgba(255,255,255,.3) solid 2px}.ul-btn{transition:color .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1)}.ul-btn[disabled],.ul-btn:disabled{cursor:not-allowed;color:#ffffff4d}.ul-btn--sm{font-family:Underlayer Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:800;height:32px;min-width:96px;padding:8px 12px;border-radius:8px;gap:4px}.ul-btn--sm.ul-btn--icon-only{min-width:32px}.ul-btn--sm .ul-icon{font-size:20px;line-height:20px}.ul-btn--md{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800;height:40px;min-width:112px;padding:8px 16px;border-radius:12px;gap:8px}.ul-btn--md.ul-btn--icon-only{min-width:40px}.ul-btn--md .ul-icon{font-size:24px;line-height:24px}.ul-btn--lg{font-family:Underlayer Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:800;height:48px;min-width:144px;padding:8px 32px;border-radius:16px;gap:12px}.ul-btn--lg.ul-btn--icon-only{min-width:48px}.ul-btn--lg .ul-icon{font-size:28px;line-height:28px}.ul-btn--lg.ul-btn--vertical{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800;flex-direction:column;height:auto;width:164px;padding:16px 32px;border-radius:24px;gap:8px}.ul-btn--xl{font-family:Underlayer Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:800;height:64px;min-width:144px;padding:8px 16px;border-radius:16px;gap:12px}.ul-btn--xl.ul-btn--icon-only{min-width:48px}.ul-btn--xl .ul-icon{font-size:32px;line-height:32px}.ul-btn--icon-only{padding:0}.ul-btn--fill-purple{background-color:#6f3de0;color:inherit}.ul-btn--fill-purple:hover{background-color:#7e4af7}.ul-btn--fill-purple:active{background-color:#5935af}.ul-btn--fill-purple:selected{background-color:#7e4af7}.ul-btn--fill-purple:disabled,.ul-btn--fill-purple[disabled]{background-color:#232323}.ul-btn--fill-purple{color:#fff}.ul-btn--fill-white{background-color:#fff;color:inherit}.ul-btn--fill-white:hover{background-color:#e7e7e7}.ul-btn--fill-white:active{background-color:#fff}.ul-btn--fill-white:selected{background-color:#fff}.ul-btn--fill-white:disabled,.ul-btn--fill-white[disabled]{background-color:#232323}.ul-btn--fill-white{color:#000}.ul-btn--fill-yellow{background-color:#ffe9a3;color:inherit}.ul-btn--fill-yellow:hover{background-color:#fff1c1}.ul-btn--fill-yellow:active{background-color:#ffe58f}.ul-btn--fill-yellow:selected{background-color:#fff1c1}.ul-btn--fill-yellow:disabled,.ul-btn--fill-yellow[disabled]{background-color:#232323}.ul-btn--fill-yellow{color:#000}.ul-btn--fill-red{background-color:#c33a3a;color:inherit}.ul-btn--fill-red:hover{background-color:#d64040}.ul-btn--fill-red:active{background-color:#982d2d}.ul-btn--fill-red:selected{background-color:#d64040}.ul-btn--fill-red:disabled,.ul-btn--fill-red[disabled]{background-color:#232323}.ul-btn--fill-red{color:#fff}.ul-btn--fill-green{background-color:#0b7a27;color:inherit}.ul-btn--fill-green:hover{background-color:#0e892d}.ul-btn--fill-green:active{background-color:#096620}.ul-btn--fill-green:selected{background-color:#0e892d}.ul-btn--fill-green:disabled,.ul-btn--fill-green[disabled]{background-color:#232323}.ul-btn--fill-green{color:#fff}.ul-btn--transparent-purple{background-color:#a781ff33;color:inherit}.ul-btn--transparent-purple:hover{background-color:#a781ff4d}.ul-btn--transparent-purple:active{background-color:#a781ff33}.ul-btn--transparent-purple:selected{background-color:#a781ff4d}.ul-btn--transparent-purple:disabled,.ul-btn--transparent-purple[disabled]{background-color:#ffffff0d}.ul-btn--transparent-purple{color:#c2a8ff}.ul-btn--transparent-white{background-color:#ffffff1a;color:inherit}.ul-btn--transparent-white:hover{background-color:#fff3}.ul-btn--transparent-white:active{background-color:#ffffff1a}.ul-btn--transparent-white:selected{background-color:#fff3}.ul-btn--transparent-white:disabled,.ul-btn--transparent-white[disabled]{background-color:#ffffff0d}.ul-btn--transparent-white{color:#fff}.ul-btn--transparent-red{background-color:#f3707033;color:inherit}.ul-btn--transparent-red:hover{background-color:#f370704d}.ul-btn--transparent-red:active{background-color:#f3707033}.ul-btn--transparent-red:selected{background-color:#f370704d}.ul-btn--transparent-red:disabled,.ul-btn--transparent-red[disabled]{background-color:#ffffff0d}.ul-btn--transparent-red{color:#f69d9d}.ul-btn--transparent-black{background-color:#0000004d;color:inherit}.ul-btn--transparent-black:hover{background-color:#00000080}.ul-btn--transparent-black:active{background-color:#000000b3}.ul-btn--transparent-black:selected{background-color:#00000080}.ul-btn--transparent-black:disabled,.ul-btn--transparent-black[disabled]{background-color:#ffffff0d}.ul-btn--transparent-black{color:#fff}.ul-btn--ghost-purple:hover{background-color:#a781ff4d}.ul-btn--ghost-purple:active{background-color:#a781ff33}.ul-btn--ghost-purple:selected{background-color:#a781ff4d}.ul-btn--ghost-purple{background-color:#a781ff00;color:inherit}.ul-btn--ghost-purple:disabled,.ul-btn--ghost-purple[disabled]{background-color:#a781ff00}.ul-btn--ghost-purple{color:#c2a8ff}.ul-btn--ghost-white:hover{background-color:#fff3}.ul-btn--ghost-white:active{background-color:#ffffff1a}.ul-btn--ghost-white:selected{background-color:#fff3}.ul-btn--ghost-white{background-color:#fff0;color:inherit}.ul-btn--ghost-white:disabled,.ul-btn--ghost-white[disabled]{background-color:#fff0}.ul-btn--ghost-white{color:#ffffffb3}.ul-btn--ghost-white:active,.ul-btn--ghost-white:hover{color:#fff}.ul-btn--ghost-red:hover{background-color:#f370704d}.ul-btn--ghost-red:active{background-color:#f3707033}.ul-btn--ghost-red:selected{background-color:#f370704d}.ul-btn--ghost-red{background-color:#f3707000;color:inherit}.ul-btn--ghost-red:disabled,.ul-btn--ghost-red[disabled]{background-color:#f3707000}.ul-btn--ghost-red{color:#f69d9d}.ul-btn--ghost-green:hover{background-color:#50c06c4d}.ul-btn--ghost-green:active{background-color:#50c06c33}.ul-btn--ghost-green:selected{background-color:#50c06c4d}.ul-btn--ghost-green{background-color:#50c06c00;color:inherit}.ul-btn--ghost-green:disabled,.ul-btn--ghost-green[disabled]{background-color:#50c06c00}.ul-btn--ghost-green{color:#7edc96}.ul-btn--outline-white,.ul-btn--outline-purple,.ul-btn--outline-red,.ul-btn--outline-green{transition:color .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1),border-color .25s cubic-bezier(.4,0,.2,1)}.ul-btn--outline-white{background-color:transparent;border:1px solid rgba(255,255,255,.3);color:#fff}.ul-btn--outline-white:hover:not(:disabled):not([disabled]){border-color:#fff}.ul-btn--outline-white:active:not(:disabled):not([disabled]){border-color:#ffffff80}.ul-btn--outline-white:disabled,.ul-btn--outline-white[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-btn--outline-purple{background-color:transparent;border:1px solid #c2a8ff;color:#c2a8ff}.ul-btn--outline-purple:hover:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-btn--outline-purple:active:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-btn--outline-purple:disabled,.ul-btn--outline-purple[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-btn--outline-red{background-color:transparent;border:1px solid #f69d9d;color:#f69d9d}.ul-btn--outline-red:hover:not(:disabled):not([disabled]){border-color:#f69d9d}.ul-btn--outline-red:active:not(:disabled):not([disabled]){border-color:#f69d9d}.ul-btn--outline-red:disabled,.ul-btn--outline-red[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-btn--outline-green{background-color:transparent;border:1px solid #7edc96;color:#7edc96}.ul-btn--outline-green:hover:not(:disabled):not([disabled]){border-color:#7edc96}.ul-btn--outline-green:active:not(:disabled):not([disabled]){border-color:#7edc96}.ul-btn--outline-green:disabled,.ul-btn--outline-green[disabled]{border-color:#6c6c6c;color:#ffffff4d}\n"],
1468
+ styles: [".ul-btn{border:none;cursor:pointer;padding:0;text-decoration-line:none;overflow:visible;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;box-sizing:border-box;width:100%;color:#fff}.ul-btn:focus-visible,.ul-btn:focus{outline-offset:2px;outline:rgba(255,255,255,.3) solid 2px}.ul-btn{transition:color .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1)}.ul-btn[disabled],.ul-btn:disabled{cursor:not-allowed;color:#ffffff4d}.ul-btn--xs{font-family:Underlayer Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:800;height:24px;min-width:64px;padding:0 8px;border-radius:8px;gap:4px}.ul-btn--xs.ul-btn--icon-only{min-width:24px}.ul-btn--xs .ul-icon{font-size:16px;line-height:16px}.ul-btn--sm{font-family:Underlayer Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:800;height:32px;min-width:96px;padding:8px 12px;border-radius:8px;gap:4px}.ul-btn--sm.ul-btn--icon-only{min-width:32px}.ul-btn--sm .ul-icon{font-size:20px;line-height:20px}.ul-btn--md{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800;height:40px;min-width:112px;padding:8px 16px;border-radius:12px;gap:8px}.ul-btn--md.ul-btn--icon-only{min-width:40px}.ul-btn--md .ul-icon{font-size:24px;line-height:24px}.ul-btn--lg{font-family:Underlayer Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:800;height:48px;min-width:144px;padding:8px 32px;border-radius:16px;gap:12px}.ul-btn--lg.ul-btn--icon-only{min-width:48px}.ul-btn--lg .ul-icon{font-size:28px;line-height:28px}.ul-btn--lg.ul-btn--vertical{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800;flex-direction:column;height:auto;width:164px;padding:16px 32px;border-radius:24px;gap:8px}.ul-btn--xl{font-family:Underlayer Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:800;height:64px;min-width:144px;padding:8px 16px;border-radius:16px;gap:12px}.ul-btn--xl.ul-btn--icon-only{min-width:48px}.ul-btn--xl .ul-icon{font-size:32px;line-height:32px}.ul-btn--icon-only{padding:0}.ul-btn--fill-purple{background-color:#6f3de0;color:inherit}.ul-btn--fill-purple:hover{background-color:#7e4af7}.ul-btn--fill-purple:active{background-color:#5935af}.ul-btn--fill-purple:selected{background-color:#7e4af7}.ul-btn--fill-purple:disabled,.ul-btn--fill-purple[disabled]{background-color:#232323}.ul-btn--fill-purple{color:#fff}.ul-btn--fill-white{background-color:#fff;color:inherit}.ul-btn--fill-white:hover{background-color:#e7e7e7}.ul-btn--fill-white:active{background-color:#fff}.ul-btn--fill-white:selected{background-color:#fff}.ul-btn--fill-white:disabled,.ul-btn--fill-white[disabled]{background-color:#232323}.ul-btn--fill-white{color:#000}.ul-btn--fill-yellow{background-color:#ffe9a3;color:inherit}.ul-btn--fill-yellow:hover{background-color:#fff1c1}.ul-btn--fill-yellow:active{background-color:#ffe58f}.ul-btn--fill-yellow:selected{background-color:#fff1c1}.ul-btn--fill-yellow:disabled,.ul-btn--fill-yellow[disabled]{background-color:#232323}.ul-btn--fill-yellow{color:#000}.ul-btn--fill-red{background-color:#c33a3a;color:inherit}.ul-btn--fill-red:hover{background-color:#d64040}.ul-btn--fill-red:active{background-color:#982d2d}.ul-btn--fill-red:selected{background-color:#d64040}.ul-btn--fill-red:disabled,.ul-btn--fill-red[disabled]{background-color:#232323}.ul-btn--fill-red{color:#fff}.ul-btn--fill-green{background-color:#0b7a27;color:inherit}.ul-btn--fill-green:hover{background-color:#0e892d}.ul-btn--fill-green:active{background-color:#096620}.ul-btn--fill-green:selected{background-color:#0e892d}.ul-btn--fill-green:disabled,.ul-btn--fill-green[disabled]{background-color:#232323}.ul-btn--fill-green{color:#fff}.ul-btn--transparent-purple{background-color:#a781ff33;color:inherit}.ul-btn--transparent-purple:hover{background-color:#a781ff4d}.ul-btn--transparent-purple:active{background-color:#a781ff33}.ul-btn--transparent-purple:selected{background-color:#a781ff4d}.ul-btn--transparent-purple:disabled,.ul-btn--transparent-purple[disabled]{background-color:#ffffff0d}.ul-btn--transparent-purple{color:#c2a8ff}.ul-btn--transparent-white{background-color:#ffffff1a;color:inherit}.ul-btn--transparent-white:hover{background-color:#fff3}.ul-btn--transparent-white:active{background-color:#ffffff1a}.ul-btn--transparent-white:selected{background-color:#fff3}.ul-btn--transparent-white:disabled,.ul-btn--transparent-white[disabled]{background-color:#ffffff0d}.ul-btn--transparent-white{color:#fff}.ul-btn--transparent-red{background-color:#f3707033;color:inherit}.ul-btn--transparent-red:hover{background-color:#f370704d}.ul-btn--transparent-red:active{background-color:#f3707033}.ul-btn--transparent-red:selected{background-color:#f370704d}.ul-btn--transparent-red:disabled,.ul-btn--transparent-red[disabled]{background-color:#ffffff0d}.ul-btn--transparent-red{color:#f69d9d}.ul-btn--transparent-black{background-color:#0000004d;color:inherit}.ul-btn--transparent-black:hover{background-color:#00000080}.ul-btn--transparent-black:active{background-color:#000000b3}.ul-btn--transparent-black:selected{background-color:#00000080}.ul-btn--transparent-black:disabled,.ul-btn--transparent-black[disabled]{background-color:#ffffff0d}.ul-btn--transparent-black{color:#fff}.ul-btn--ghost-purple:hover{background-color:#a781ff4d}.ul-btn--ghost-purple:active{background-color:#a781ff33}.ul-btn--ghost-purple:selected{background-color:#a781ff4d}.ul-btn--ghost-purple{background-color:#a781ff00;color:inherit}.ul-btn--ghost-purple:disabled,.ul-btn--ghost-purple[disabled]{background-color:#a781ff00}.ul-btn--ghost-purple{color:#c2a8ff}.ul-btn--ghost-white:hover{background-color:#fff3}.ul-btn--ghost-white:active{background-color:#ffffff1a}.ul-btn--ghost-white:selected{background-color:#fff3}.ul-btn--ghost-white{background-color:#fff0;color:inherit}.ul-btn--ghost-white:disabled,.ul-btn--ghost-white[disabled]{background-color:#fff0}.ul-btn--ghost-white{color:#ffffffb3}.ul-btn--ghost-white:active,.ul-btn--ghost-white:hover{color:#fff}.ul-btn--ghost-red:hover{background-color:#f370704d}.ul-btn--ghost-red:active{background-color:#f3707033}.ul-btn--ghost-red:selected{background-color:#f370704d}.ul-btn--ghost-red{background-color:#f3707000;color:inherit}.ul-btn--ghost-red:disabled,.ul-btn--ghost-red[disabled]{background-color:#f3707000}.ul-btn--ghost-red{color:#f69d9d}.ul-btn--ghost-green:hover{background-color:#50c06c4d}.ul-btn--ghost-green:active{background-color:#50c06c33}.ul-btn--ghost-green:selected{background-color:#50c06c4d}.ul-btn--ghost-green{background-color:#50c06c00;color:inherit}.ul-btn--ghost-green:disabled,.ul-btn--ghost-green[disabled]{background-color:#50c06c00}.ul-btn--ghost-green{color:#7edc96}.ul-btn--outline-white,.ul-btn--outline-purple,.ul-btn--outline-red,.ul-btn--outline-green{transition:color .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1),border-color .25s cubic-bezier(.4,0,.2,1)}.ul-btn--outline-white{background-color:transparent;border:1px solid rgba(255,255,255,.3);color:#fff}.ul-btn--outline-white:hover:not(:disabled):not([disabled]){border-color:#fff}.ul-btn--outline-white:active:not(:disabled):not([disabled]){border-color:#ffffff80}.ul-btn--outline-white:disabled,.ul-btn--outline-white[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-btn--outline-purple{background-color:transparent;border:1px solid #c2a8ff;color:#c2a8ff}.ul-btn--outline-purple:hover:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-btn--outline-purple:active:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-btn--outline-purple:disabled,.ul-btn--outline-purple[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-btn--outline-red{background-color:transparent;border:1px solid #f69d9d;color:#f69d9d}.ul-btn--outline-red:hover:not(:disabled):not([disabled]){border-color:#f69d9d}.ul-btn--outline-red:active:not(:disabled):not([disabled]){border-color:#f69d9d}.ul-btn--outline-red:disabled,.ul-btn--outline-red[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-btn--outline-green{background-color:transparent;border:1px solid #7edc96;color:#7edc96}.ul-btn--outline-green:hover:not(:disabled):not([disabled]){border-color:#7edc96}.ul-btn--outline-green:active:not(:disabled):not([disabled]){border-color:#7edc96}.ul-btn--outline-green:disabled,.ul-btn--outline-green[disabled]{border-color:#6c6c6c;color:#ffffff4d}\n"],
1469
1469
  dependencies: [{
1470
1470
  kind: "directive",
1471
1471
  type: ButtonDirective,
@@ -1507,7 +1507,7 @@ i0.ɵɵngDeclareClassMetadata({
1507
1507
  </button>
1508
1508
  `,
1509
1509
  encapsulation: ViewEncapsulation.None,
1510
- styles: [".ul-btn{border:none;cursor:pointer;padding:0;text-decoration-line:none;overflow:visible;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;box-sizing:border-box;width:100%;color:#fff}.ul-btn:focus-visible,.ul-btn:focus{outline-offset:2px;outline:rgba(255,255,255,.3) solid 2px}.ul-btn{transition:color .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1)}.ul-btn[disabled],.ul-btn:disabled{cursor:not-allowed;color:#ffffff4d}.ul-btn--sm{font-family:Underlayer Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:800;height:32px;min-width:96px;padding:8px 12px;border-radius:8px;gap:4px}.ul-btn--sm.ul-btn--icon-only{min-width:32px}.ul-btn--sm .ul-icon{font-size:20px;line-height:20px}.ul-btn--md{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800;height:40px;min-width:112px;padding:8px 16px;border-radius:12px;gap:8px}.ul-btn--md.ul-btn--icon-only{min-width:40px}.ul-btn--md .ul-icon{font-size:24px;line-height:24px}.ul-btn--lg{font-family:Underlayer Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:800;height:48px;min-width:144px;padding:8px 32px;border-radius:16px;gap:12px}.ul-btn--lg.ul-btn--icon-only{min-width:48px}.ul-btn--lg .ul-icon{font-size:28px;line-height:28px}.ul-btn--lg.ul-btn--vertical{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800;flex-direction:column;height:auto;width:164px;padding:16px 32px;border-radius:24px;gap:8px}.ul-btn--xl{font-family:Underlayer Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:800;height:64px;min-width:144px;padding:8px 16px;border-radius:16px;gap:12px}.ul-btn--xl.ul-btn--icon-only{min-width:48px}.ul-btn--xl .ul-icon{font-size:32px;line-height:32px}.ul-btn--icon-only{padding:0}.ul-btn--fill-purple{background-color:#6f3de0;color:inherit}.ul-btn--fill-purple:hover{background-color:#7e4af7}.ul-btn--fill-purple:active{background-color:#5935af}.ul-btn--fill-purple:selected{background-color:#7e4af7}.ul-btn--fill-purple:disabled,.ul-btn--fill-purple[disabled]{background-color:#232323}.ul-btn--fill-purple{color:#fff}.ul-btn--fill-white{background-color:#fff;color:inherit}.ul-btn--fill-white:hover{background-color:#e7e7e7}.ul-btn--fill-white:active{background-color:#fff}.ul-btn--fill-white:selected{background-color:#fff}.ul-btn--fill-white:disabled,.ul-btn--fill-white[disabled]{background-color:#232323}.ul-btn--fill-white{color:#000}.ul-btn--fill-yellow{background-color:#ffe9a3;color:inherit}.ul-btn--fill-yellow:hover{background-color:#fff1c1}.ul-btn--fill-yellow:active{background-color:#ffe58f}.ul-btn--fill-yellow:selected{background-color:#fff1c1}.ul-btn--fill-yellow:disabled,.ul-btn--fill-yellow[disabled]{background-color:#232323}.ul-btn--fill-yellow{color:#000}.ul-btn--fill-red{background-color:#c33a3a;color:inherit}.ul-btn--fill-red:hover{background-color:#d64040}.ul-btn--fill-red:active{background-color:#982d2d}.ul-btn--fill-red:selected{background-color:#d64040}.ul-btn--fill-red:disabled,.ul-btn--fill-red[disabled]{background-color:#232323}.ul-btn--fill-red{color:#fff}.ul-btn--fill-green{background-color:#0b7a27;color:inherit}.ul-btn--fill-green:hover{background-color:#0e892d}.ul-btn--fill-green:active{background-color:#096620}.ul-btn--fill-green:selected{background-color:#0e892d}.ul-btn--fill-green:disabled,.ul-btn--fill-green[disabled]{background-color:#232323}.ul-btn--fill-green{color:#fff}.ul-btn--transparent-purple{background-color:#a781ff33;color:inherit}.ul-btn--transparent-purple:hover{background-color:#a781ff4d}.ul-btn--transparent-purple:active{background-color:#a781ff33}.ul-btn--transparent-purple:selected{background-color:#a781ff4d}.ul-btn--transparent-purple:disabled,.ul-btn--transparent-purple[disabled]{background-color:#ffffff0d}.ul-btn--transparent-purple{color:#c2a8ff}.ul-btn--transparent-white{background-color:#ffffff1a;color:inherit}.ul-btn--transparent-white:hover{background-color:#fff3}.ul-btn--transparent-white:active{background-color:#ffffff1a}.ul-btn--transparent-white:selected{background-color:#fff3}.ul-btn--transparent-white:disabled,.ul-btn--transparent-white[disabled]{background-color:#ffffff0d}.ul-btn--transparent-white{color:#fff}.ul-btn--transparent-red{background-color:#f3707033;color:inherit}.ul-btn--transparent-red:hover{background-color:#f370704d}.ul-btn--transparent-red:active{background-color:#f3707033}.ul-btn--transparent-red:selected{background-color:#f370704d}.ul-btn--transparent-red:disabled,.ul-btn--transparent-red[disabled]{background-color:#ffffff0d}.ul-btn--transparent-red{color:#f69d9d}.ul-btn--transparent-black{background-color:#0000004d;color:inherit}.ul-btn--transparent-black:hover{background-color:#00000080}.ul-btn--transparent-black:active{background-color:#000000b3}.ul-btn--transparent-black:selected{background-color:#00000080}.ul-btn--transparent-black:disabled,.ul-btn--transparent-black[disabled]{background-color:#ffffff0d}.ul-btn--transparent-black{color:#fff}.ul-btn--ghost-purple:hover{background-color:#a781ff4d}.ul-btn--ghost-purple:active{background-color:#a781ff33}.ul-btn--ghost-purple:selected{background-color:#a781ff4d}.ul-btn--ghost-purple{background-color:#a781ff00;color:inherit}.ul-btn--ghost-purple:disabled,.ul-btn--ghost-purple[disabled]{background-color:#a781ff00}.ul-btn--ghost-purple{color:#c2a8ff}.ul-btn--ghost-white:hover{background-color:#fff3}.ul-btn--ghost-white:active{background-color:#ffffff1a}.ul-btn--ghost-white:selected{background-color:#fff3}.ul-btn--ghost-white{background-color:#fff0;color:inherit}.ul-btn--ghost-white:disabled,.ul-btn--ghost-white[disabled]{background-color:#fff0}.ul-btn--ghost-white{color:#ffffffb3}.ul-btn--ghost-white:active,.ul-btn--ghost-white:hover{color:#fff}.ul-btn--ghost-red:hover{background-color:#f370704d}.ul-btn--ghost-red:active{background-color:#f3707033}.ul-btn--ghost-red:selected{background-color:#f370704d}.ul-btn--ghost-red{background-color:#f3707000;color:inherit}.ul-btn--ghost-red:disabled,.ul-btn--ghost-red[disabled]{background-color:#f3707000}.ul-btn--ghost-red{color:#f69d9d}.ul-btn--ghost-green:hover{background-color:#50c06c4d}.ul-btn--ghost-green:active{background-color:#50c06c33}.ul-btn--ghost-green:selected{background-color:#50c06c4d}.ul-btn--ghost-green{background-color:#50c06c00;color:inherit}.ul-btn--ghost-green:disabled,.ul-btn--ghost-green[disabled]{background-color:#50c06c00}.ul-btn--ghost-green{color:#7edc96}.ul-btn--outline-white,.ul-btn--outline-purple,.ul-btn--outline-red,.ul-btn--outline-green{transition:color .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1),border-color .25s cubic-bezier(.4,0,.2,1)}.ul-btn--outline-white{background-color:transparent;border:1px solid rgba(255,255,255,.3);color:#fff}.ul-btn--outline-white:hover:not(:disabled):not([disabled]){border-color:#fff}.ul-btn--outline-white:active:not(:disabled):not([disabled]){border-color:#ffffff80}.ul-btn--outline-white:disabled,.ul-btn--outline-white[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-btn--outline-purple{background-color:transparent;border:1px solid #c2a8ff;color:#c2a8ff}.ul-btn--outline-purple:hover:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-btn--outline-purple:active:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-btn--outline-purple:disabled,.ul-btn--outline-purple[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-btn--outline-red{background-color:transparent;border:1px solid #f69d9d;color:#f69d9d}.ul-btn--outline-red:hover:not(:disabled):not([disabled]){border-color:#f69d9d}.ul-btn--outline-red:active:not(:disabled):not([disabled]){border-color:#f69d9d}.ul-btn--outline-red:disabled,.ul-btn--outline-red[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-btn--outline-green{background-color:transparent;border:1px solid #7edc96;color:#7edc96}.ul-btn--outline-green:hover:not(:disabled):not([disabled]){border-color:#7edc96}.ul-btn--outline-green:active:not(:disabled):not([disabled]){border-color:#7edc96}.ul-btn--outline-green:disabled,.ul-btn--outline-green[disabled]{border-color:#6c6c6c;color:#ffffff4d}\n"]
1510
+ styles: [".ul-btn{border:none;cursor:pointer;padding:0;text-decoration-line:none;overflow:visible;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;box-sizing:border-box;width:100%;color:#fff}.ul-btn:focus-visible,.ul-btn:focus{outline-offset:2px;outline:rgba(255,255,255,.3) solid 2px}.ul-btn{transition:color .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1)}.ul-btn[disabled],.ul-btn:disabled{cursor:not-allowed;color:#ffffff4d}.ul-btn--xs{font-family:Underlayer Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:800;height:24px;min-width:64px;padding:0 8px;border-radius:8px;gap:4px}.ul-btn--xs.ul-btn--icon-only{min-width:24px}.ul-btn--xs .ul-icon{font-size:16px;line-height:16px}.ul-btn--sm{font-family:Underlayer Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:800;height:32px;min-width:96px;padding:8px 12px;border-radius:8px;gap:4px}.ul-btn--sm.ul-btn--icon-only{min-width:32px}.ul-btn--sm .ul-icon{font-size:20px;line-height:20px}.ul-btn--md{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800;height:40px;min-width:112px;padding:8px 16px;border-radius:12px;gap:8px}.ul-btn--md.ul-btn--icon-only{min-width:40px}.ul-btn--md .ul-icon{font-size:24px;line-height:24px}.ul-btn--lg{font-family:Underlayer Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:800;height:48px;min-width:144px;padding:8px 32px;border-radius:16px;gap:12px}.ul-btn--lg.ul-btn--icon-only{min-width:48px}.ul-btn--lg .ul-icon{font-size:28px;line-height:28px}.ul-btn--lg.ul-btn--vertical{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800;flex-direction:column;height:auto;width:164px;padding:16px 32px;border-radius:24px;gap:8px}.ul-btn--xl{font-family:Underlayer Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:800;height:64px;min-width:144px;padding:8px 16px;border-radius:16px;gap:12px}.ul-btn--xl.ul-btn--icon-only{min-width:48px}.ul-btn--xl .ul-icon{font-size:32px;line-height:32px}.ul-btn--icon-only{padding:0}.ul-btn--fill-purple{background-color:#6f3de0;color:inherit}.ul-btn--fill-purple:hover{background-color:#7e4af7}.ul-btn--fill-purple:active{background-color:#5935af}.ul-btn--fill-purple:selected{background-color:#7e4af7}.ul-btn--fill-purple:disabled,.ul-btn--fill-purple[disabled]{background-color:#232323}.ul-btn--fill-purple{color:#fff}.ul-btn--fill-white{background-color:#fff;color:inherit}.ul-btn--fill-white:hover{background-color:#e7e7e7}.ul-btn--fill-white:active{background-color:#fff}.ul-btn--fill-white:selected{background-color:#fff}.ul-btn--fill-white:disabled,.ul-btn--fill-white[disabled]{background-color:#232323}.ul-btn--fill-white{color:#000}.ul-btn--fill-yellow{background-color:#ffe9a3;color:inherit}.ul-btn--fill-yellow:hover{background-color:#fff1c1}.ul-btn--fill-yellow:active{background-color:#ffe58f}.ul-btn--fill-yellow:selected{background-color:#fff1c1}.ul-btn--fill-yellow:disabled,.ul-btn--fill-yellow[disabled]{background-color:#232323}.ul-btn--fill-yellow{color:#000}.ul-btn--fill-red{background-color:#c33a3a;color:inherit}.ul-btn--fill-red:hover{background-color:#d64040}.ul-btn--fill-red:active{background-color:#982d2d}.ul-btn--fill-red:selected{background-color:#d64040}.ul-btn--fill-red:disabled,.ul-btn--fill-red[disabled]{background-color:#232323}.ul-btn--fill-red{color:#fff}.ul-btn--fill-green{background-color:#0b7a27;color:inherit}.ul-btn--fill-green:hover{background-color:#0e892d}.ul-btn--fill-green:active{background-color:#096620}.ul-btn--fill-green:selected{background-color:#0e892d}.ul-btn--fill-green:disabled,.ul-btn--fill-green[disabled]{background-color:#232323}.ul-btn--fill-green{color:#fff}.ul-btn--transparent-purple{background-color:#a781ff33;color:inherit}.ul-btn--transparent-purple:hover{background-color:#a781ff4d}.ul-btn--transparent-purple:active{background-color:#a781ff33}.ul-btn--transparent-purple:selected{background-color:#a781ff4d}.ul-btn--transparent-purple:disabled,.ul-btn--transparent-purple[disabled]{background-color:#ffffff0d}.ul-btn--transparent-purple{color:#c2a8ff}.ul-btn--transparent-white{background-color:#ffffff1a;color:inherit}.ul-btn--transparent-white:hover{background-color:#fff3}.ul-btn--transparent-white:active{background-color:#ffffff1a}.ul-btn--transparent-white:selected{background-color:#fff3}.ul-btn--transparent-white:disabled,.ul-btn--transparent-white[disabled]{background-color:#ffffff0d}.ul-btn--transparent-white{color:#fff}.ul-btn--transparent-red{background-color:#f3707033;color:inherit}.ul-btn--transparent-red:hover{background-color:#f370704d}.ul-btn--transparent-red:active{background-color:#f3707033}.ul-btn--transparent-red:selected{background-color:#f370704d}.ul-btn--transparent-red:disabled,.ul-btn--transparent-red[disabled]{background-color:#ffffff0d}.ul-btn--transparent-red{color:#f69d9d}.ul-btn--transparent-black{background-color:#0000004d;color:inherit}.ul-btn--transparent-black:hover{background-color:#00000080}.ul-btn--transparent-black:active{background-color:#000000b3}.ul-btn--transparent-black:selected{background-color:#00000080}.ul-btn--transparent-black:disabled,.ul-btn--transparent-black[disabled]{background-color:#ffffff0d}.ul-btn--transparent-black{color:#fff}.ul-btn--ghost-purple:hover{background-color:#a781ff4d}.ul-btn--ghost-purple:active{background-color:#a781ff33}.ul-btn--ghost-purple:selected{background-color:#a781ff4d}.ul-btn--ghost-purple{background-color:#a781ff00;color:inherit}.ul-btn--ghost-purple:disabled,.ul-btn--ghost-purple[disabled]{background-color:#a781ff00}.ul-btn--ghost-purple{color:#c2a8ff}.ul-btn--ghost-white:hover{background-color:#fff3}.ul-btn--ghost-white:active{background-color:#ffffff1a}.ul-btn--ghost-white:selected{background-color:#fff3}.ul-btn--ghost-white{background-color:#fff0;color:inherit}.ul-btn--ghost-white:disabled,.ul-btn--ghost-white[disabled]{background-color:#fff0}.ul-btn--ghost-white{color:#ffffffb3}.ul-btn--ghost-white:active,.ul-btn--ghost-white:hover{color:#fff}.ul-btn--ghost-red:hover{background-color:#f370704d}.ul-btn--ghost-red:active{background-color:#f3707033}.ul-btn--ghost-red:selected{background-color:#f370704d}.ul-btn--ghost-red{background-color:#f3707000;color:inherit}.ul-btn--ghost-red:disabled,.ul-btn--ghost-red[disabled]{background-color:#f3707000}.ul-btn--ghost-red{color:#f69d9d}.ul-btn--ghost-green:hover{background-color:#50c06c4d}.ul-btn--ghost-green:active{background-color:#50c06c33}.ul-btn--ghost-green:selected{background-color:#50c06c4d}.ul-btn--ghost-green{background-color:#50c06c00;color:inherit}.ul-btn--ghost-green:disabled,.ul-btn--ghost-green[disabled]{background-color:#50c06c00}.ul-btn--ghost-green{color:#7edc96}.ul-btn--outline-white,.ul-btn--outline-purple,.ul-btn--outline-red,.ul-btn--outline-green{transition:color .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1),border-color .25s cubic-bezier(.4,0,.2,1)}.ul-btn--outline-white{background-color:transparent;border:1px solid rgba(255,255,255,.3);color:#fff}.ul-btn--outline-white:hover:not(:disabled):not([disabled]){border-color:#fff}.ul-btn--outline-white:active:not(:disabled):not([disabled]){border-color:#ffffff80}.ul-btn--outline-white:disabled,.ul-btn--outline-white[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-btn--outline-purple{background-color:transparent;border:1px solid #c2a8ff;color:#c2a8ff}.ul-btn--outline-purple:hover:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-btn--outline-purple:active:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-btn--outline-purple:disabled,.ul-btn--outline-purple[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-btn--outline-red{background-color:transparent;border:1px solid #f69d9d;color:#f69d9d}.ul-btn--outline-red:hover:not(:disabled):not([disabled]){border-color:#f69d9d}.ul-btn--outline-red:active:not(:disabled):not([disabled]){border-color:#f69d9d}.ul-btn--outline-red:disabled,.ul-btn--outline-red[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-btn--outline-green{background-color:transparent;border:1px solid #7edc96;color:#7edc96}.ul-btn--outline-green:hover:not(:disabled):not([disabled]){border-color:#7edc96}.ul-btn--outline-green:active:not(:disabled):not([disabled]){border-color:#7edc96}.ul-btn--outline-green:disabled,.ul-btn--outline-green[disabled]{border-color:#6c6c6c;color:#ffffff4d}\n"]
1511
1511
  }]
1512
1512
  }],
1513
1513
  propDecorators: {
@@ -3958,7 +3958,7 @@ var ListItemComponent = class ListItemComponent {
3958
3958
  </ul-skeleton>
3959
3959
  `,
3960
3960
  isInline: true,
3961
- styles: [".ul-list-item{cursor:pointer;border:none;white-space:nowrap;box-sizing:border-box;text-align:start;display:flex;align-items:center;width:100%;gap:8px;border-radius:8px;padding:8px 12px;color:#ffffffb3;font-family:Underlayer Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-list-item:hover{background-color:#fff3}.ul-list-item:active{background-color:#ffffff1a}.ul-list-item:selected{background-color:#fff3}.ul-list-item{background-color:#fff0;color:inherit}.ul-list-item:disabled,.ul-list-item[disabled]{background-color:#fff0}.ul-list-item:focus-visible{outline-offset:2px;outline:rgba(255,255,255,.3) solid 2px}.ul-list-item--no-focus-outline:focus-visible{outline:none;outline-offset:0}.ul-list-item--selected{background-color:transparent}.ul-list-item--transparent-white{background-color:#ffffff1a;color:inherit}.ul-list-item--transparent-white:hover{background-color:#fff3}.ul-list-item--transparent-white:active{background-color:#ffffff1a}.ul-list-item--transparent-white:selected{background-color:#fff3}.ul-list-item--transparent-white:disabled,.ul-list-item--transparent-white[disabled]{background-color:#ffffff0d}.ul-list-item--transparent-white{background-color:transparent}.ul-list-item--outline-white{background-color:transparent;border:1px solid rgba(255,255,255,.3);color:#fff}.ul-list-item--outline-white:hover:not(:disabled):not([disabled]){border-color:#fff}.ul-list-item--outline-white:active:not(:disabled):not([disabled]){border-color:#ffffff80}.ul-list-item--outline-white:disabled,.ul-list-item--outline-white[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-list-item--outline-purple{background-color:transparent;border:1px solid #c2a8ff;color:#c2a8ff}.ul-list-item--outline-purple:hover:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-list-item--outline-purple:active:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-list-item--outline-purple:disabled,.ul-list-item--outline-purple[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-list-item--transparent-white.ul-list-item--selected{background-color:#fff3}.ul-list-item__label{flex:1;color:#fff}.ul-list-item__before-label,.ul-list-item__after-label{display:flex;align-items:center;gap:8px}.ul-list-item .ul--icon{color:#fff}.ul-list-item:disabled,.ul-list-item[disabled]{cursor:not-allowed;color:#ffffff4d}.ul-list-item:disabled .ul-list-item__label,.ul-list-item[disabled] .ul-list-item__label{color:#ffffff4d}\n"],
3961
+ styles: [".ul-list-item{cursor:pointer;border:none;white-space:nowrap;box-sizing:border-box;text-align:start;display:flex;align-items:center;width:100%;gap:8px;border-radius:8px;padding:8px 12px;color:#ffffffb3;font-family:Underlayer Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-list-item:hover{background-color:#fff3}.ul-list-item:active{background-color:#ffffff1a}.ul-list-item:selected{background-color:#fff3}.ul-list-item{background-color:#fff0;color:inherit}.ul-list-item:disabled,.ul-list-item[disabled]{background-color:#fff0}.ul-list-item:focus-visible{outline-offset:2px;outline:rgba(255,255,255,.3) solid 2px}.ul-list-item--no-focus-outline:focus-visible{outline:none;outline-offset:0}.ul-list-item--selected{background-color:transparent}.ul-list-item--ghost-red:not(:disabled):hover{background-color:#f370704d}.ul-list-item--ghost-red:not(:disabled):active{background-color:#f3707033}.ul-list-item--ghost-red:not(:disabled):selected{background-color:#f370704d}.ul-list-item--ghost-red:not(:disabled){background-color:#f3707000;color:inherit}.ul-list-item--ghost-red:not(:disabled):disabled,.ul-list-item--ghost-red:not(:disabled)[disabled]{background-color:#f3707000}.ul-list-item--ghost-red:not(:disabled) .ul-list-item__label,.ul-list-item--ghost-red:not(:disabled) ::ng-deep .ul-icon{color:#f69d9d}.ul-list-item--transparent-white{background-color:#ffffff1a;color:inherit}.ul-list-item--transparent-white:hover{background-color:#fff3}.ul-list-item--transparent-white:active{background-color:#ffffff1a}.ul-list-item--transparent-white:selected{background-color:#fff3}.ul-list-item--transparent-white:disabled,.ul-list-item--transparent-white[disabled]{background-color:#ffffff0d}.ul-list-item--transparent-white{background-color:transparent}.ul-list-item--outline-white{background-color:transparent;border:1px solid rgba(255,255,255,.3);color:#fff}.ul-list-item--outline-white:hover:not(:disabled):not([disabled]){border-color:#fff}.ul-list-item--outline-white:active:not(:disabled):not([disabled]){border-color:#ffffff80}.ul-list-item--outline-white:disabled,.ul-list-item--outline-white[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-list-item--outline-purple{background-color:transparent;border:1px solid #c2a8ff;color:#c2a8ff}.ul-list-item--outline-purple:hover:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-list-item--outline-purple:active:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-list-item--outline-purple:disabled,.ul-list-item--outline-purple[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-list-item--transparent-white.ul-list-item--selected{background-color:#fff3}.ul-list-item__label{flex:1;color:#fff}.ul-list-item__before-label,.ul-list-item__after-label{display:flex;align-items:center;gap:8px}.ul-list-item .ul--icon{color:#fff}.ul-list-item:disabled,.ul-list-item[disabled]{cursor:not-allowed;color:#ffffff4d}.ul-list-item:disabled .ul-list-item__label,.ul-list-item[disabled] .ul-list-item__label{color:#ffffff4d}\n"],
3962
3962
  dependencies: [{
3963
3963
  kind: "component",
3964
3964
  type: SkeletonComponent,
@@ -4006,7 +4006,7 @@ i0.ɵɵngDeclareClassMetadata({
4006
4006
  </button>
4007
4007
  </ul-skeleton>
4008
4008
  `,
4009
- styles: [".ul-list-item{cursor:pointer;border:none;white-space:nowrap;box-sizing:border-box;text-align:start;display:flex;align-items:center;width:100%;gap:8px;border-radius:8px;padding:8px 12px;color:#ffffffb3;font-family:Underlayer Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-list-item:hover{background-color:#fff3}.ul-list-item:active{background-color:#ffffff1a}.ul-list-item:selected{background-color:#fff3}.ul-list-item{background-color:#fff0;color:inherit}.ul-list-item:disabled,.ul-list-item[disabled]{background-color:#fff0}.ul-list-item:focus-visible{outline-offset:2px;outline:rgba(255,255,255,.3) solid 2px}.ul-list-item--no-focus-outline:focus-visible{outline:none;outline-offset:0}.ul-list-item--selected{background-color:transparent}.ul-list-item--transparent-white{background-color:#ffffff1a;color:inherit}.ul-list-item--transparent-white:hover{background-color:#fff3}.ul-list-item--transparent-white:active{background-color:#ffffff1a}.ul-list-item--transparent-white:selected{background-color:#fff3}.ul-list-item--transparent-white:disabled,.ul-list-item--transparent-white[disabled]{background-color:#ffffff0d}.ul-list-item--transparent-white{background-color:transparent}.ul-list-item--outline-white{background-color:transparent;border:1px solid rgba(255,255,255,.3);color:#fff}.ul-list-item--outline-white:hover:not(:disabled):not([disabled]){border-color:#fff}.ul-list-item--outline-white:active:not(:disabled):not([disabled]){border-color:#ffffff80}.ul-list-item--outline-white:disabled,.ul-list-item--outline-white[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-list-item--outline-purple{background-color:transparent;border:1px solid #c2a8ff;color:#c2a8ff}.ul-list-item--outline-purple:hover:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-list-item--outline-purple:active:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-list-item--outline-purple:disabled,.ul-list-item--outline-purple[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-list-item--transparent-white.ul-list-item--selected{background-color:#fff3}.ul-list-item__label{flex:1;color:#fff}.ul-list-item__before-label,.ul-list-item__after-label{display:flex;align-items:center;gap:8px}.ul-list-item .ul--icon{color:#fff}.ul-list-item:disabled,.ul-list-item[disabled]{cursor:not-allowed;color:#ffffff4d}.ul-list-item:disabled .ul-list-item__label,.ul-list-item[disabled] .ul-list-item__label{color:#ffffff4d}\n"]
4009
+ styles: [".ul-list-item{cursor:pointer;border:none;white-space:nowrap;box-sizing:border-box;text-align:start;display:flex;align-items:center;width:100%;gap:8px;border-radius:8px;padding:8px 12px;color:#ffffffb3;font-family:Underlayer Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-list-item:hover{background-color:#fff3}.ul-list-item:active{background-color:#ffffff1a}.ul-list-item:selected{background-color:#fff3}.ul-list-item{background-color:#fff0;color:inherit}.ul-list-item:disabled,.ul-list-item[disabled]{background-color:#fff0}.ul-list-item:focus-visible{outline-offset:2px;outline:rgba(255,255,255,.3) solid 2px}.ul-list-item--no-focus-outline:focus-visible{outline:none;outline-offset:0}.ul-list-item--selected{background-color:transparent}.ul-list-item--ghost-red:not(:disabled):hover{background-color:#f370704d}.ul-list-item--ghost-red:not(:disabled):active{background-color:#f3707033}.ul-list-item--ghost-red:not(:disabled):selected{background-color:#f370704d}.ul-list-item--ghost-red:not(:disabled){background-color:#f3707000;color:inherit}.ul-list-item--ghost-red:not(:disabled):disabled,.ul-list-item--ghost-red:not(:disabled)[disabled]{background-color:#f3707000}.ul-list-item--ghost-red:not(:disabled) .ul-list-item__label,.ul-list-item--ghost-red:not(:disabled) ::ng-deep .ul-icon{color:#f69d9d}.ul-list-item--transparent-white{background-color:#ffffff1a;color:inherit}.ul-list-item--transparent-white:hover{background-color:#fff3}.ul-list-item--transparent-white:active{background-color:#ffffff1a}.ul-list-item--transparent-white:selected{background-color:#fff3}.ul-list-item--transparent-white:disabled,.ul-list-item--transparent-white[disabled]{background-color:#ffffff0d}.ul-list-item--transparent-white{background-color:transparent}.ul-list-item--outline-white{background-color:transparent;border:1px solid rgba(255,255,255,.3);color:#fff}.ul-list-item--outline-white:hover:not(:disabled):not([disabled]){border-color:#fff}.ul-list-item--outline-white:active:not(:disabled):not([disabled]){border-color:#ffffff80}.ul-list-item--outline-white:disabled,.ul-list-item--outline-white[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-list-item--outline-purple{background-color:transparent;border:1px solid #c2a8ff;color:#c2a8ff}.ul-list-item--outline-purple:hover:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-list-item--outline-purple:active:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-list-item--outline-purple:disabled,.ul-list-item--outline-purple[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-list-item--transparent-white.ul-list-item--selected{background-color:#fff3}.ul-list-item__label{flex:1;color:#fff}.ul-list-item__before-label,.ul-list-item__after-label{display:flex;align-items:center;gap:8px}.ul-list-item .ul--icon{color:#fff}.ul-list-item:disabled,.ul-list-item[disabled]{cursor:not-allowed;color:#ffffff4d}.ul-list-item:disabled .ul-list-item__label,.ul-list-item[disabled] .ul-list-item__label{color:#ffffff4d}\n"]
4010
4010
  }]
4011
4011
  }],
4012
4012
  propDecorators: {
@@ -5341,6 +5341,7 @@ i0.ɵɵngDeclareClassMetadata({
5341
5341
  });
5342
5342
  var MenuItemsComponent = class MenuItemsComponent {
5343
5343
  items = input([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
5344
+ templateItems = input([], ...ngDevMode ? [{ debugName: "templateItems" }] : /* istanbul ignore next */ []);
5344
5345
  theme = input("ghost-white", ...ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []);
5345
5346
  selectedIndex = input(null, ...ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []);
5346
5347
  itemTriggered = output();
@@ -5366,6 +5367,13 @@ var MenuItemsComponent = class MenuItemsComponent {
5366
5367
  isRequired: false,
5367
5368
  transformFunction: null
5368
5369
  },
5370
+ templateItems: {
5371
+ classPropertyName: "templateItems",
5372
+ publicName: "templateItems",
5373
+ isSignal: true,
5374
+ isRequired: false,
5375
+ transformFunction: null
5376
+ },
5369
5377
  theme: {
5370
5378
  classPropertyName: "theme",
5371
5379
  publicName: "theme",
@@ -5390,6 +5398,23 @@ var MenuItemsComponent = class MenuItemsComponent {
5390
5398
  }
5391
5399
  </ng-template>
5392
5400
 
5401
+ @for (entry of templateItems(); track entry) {
5402
+ <ul-list-item
5403
+ cdkMenuItem
5404
+ role="menuitem"
5405
+ [theme]="entry.theme()"
5406
+ [disabled]="entry.disabled()"
5407
+ (cdkMenuItemTriggered)="entry.triggered.emit()"
5408
+ >
5409
+ <ng-container ul-list-item-before-label>
5410
+ <ng-container *ngTemplateOutlet="entry.iconTemplate()" />
5411
+ </ng-container>
5412
+ <ng-container ul-list-item-label>
5413
+ <ng-container *ngTemplateOutlet="entry.labelTemplate()" />
5414
+ </ng-container>
5415
+ </ul-list-item>
5416
+ }
5417
+
5393
5418
  @for (item of items(); track $index) {
5394
5419
  <ul-list-item
5395
5420
  cdkMenuItem
@@ -5481,6 +5506,23 @@ i0.ɵɵngDeclareClassMetadata({
5481
5506
  }
5482
5507
  </ng-template>
5483
5508
 
5509
+ @for (entry of templateItems(); track entry) {
5510
+ <ul-list-item
5511
+ cdkMenuItem
5512
+ role="menuitem"
5513
+ [theme]="entry.theme()"
5514
+ [disabled]="entry.disabled()"
5515
+ (cdkMenuItemTriggered)="entry.triggered.emit()"
5516
+ >
5517
+ <ng-container ul-list-item-before-label>
5518
+ <ng-container *ngTemplateOutlet="entry.iconTemplate()" />
5519
+ </ng-container>
5520
+ <ng-container ul-list-item-label>
5521
+ <ng-container *ngTemplateOutlet="entry.labelTemplate()" />
5522
+ </ng-container>
5523
+ </ul-list-item>
5524
+ }
5525
+
5484
5526
  @for (item of items(); track $index) {
5485
5527
  <ul-list-item
5486
5528
  cdkMenuItem
@@ -5516,6 +5558,14 @@ i0.ɵɵngDeclareClassMetadata({
5516
5558
  required: false
5517
5559
  }]
5518
5560
  }],
5561
+ templateItems: [{
5562
+ type: i0.Input,
5563
+ args: [{
5564
+ isSignal: true,
5565
+ alias: "templateItems",
5566
+ required: false
5567
+ }]
5568
+ }],
5519
5569
  theme: [{
5520
5570
  type: i0.Input,
5521
5571
  args: [{
@@ -6062,6 +6112,7 @@ var DropdownComponent = class DropdownComponent {
6062
6112
  selector: "ul-menu-items",
6063
6113
  inputs: [
6064
6114
  "items",
6115
+ "templateItems",
6065
6116
  "theme",
6066
6117
  "selectedIndex"
6067
6118
  ],
@@ -8013,8 +8064,115 @@ i0.ɵɵngDeclareClassMetadata({
8013
8064
  }]
8014
8065
  }
8015
8066
  });
8067
+ var MenuItemComponent = class MenuItemComponent {
8068
+ theme = input("ghost-white", ...ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []);
8069
+ disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
8070
+ triggered = output();
8071
+ iconTemplate = viewChild.required("icon", ...ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []);
8072
+ labelTemplate = viewChild.required("label", ...ngDevMode ? [{ debugName: "labelTemplate" }] : /* istanbul ignore next */ []);
8073
+ static ɵfac = i0.ɵɵngDeclareFactory({
8074
+ minVersion: "12.0.0",
8075
+ version: "22.2.2",
8076
+ ngImport: i0,
8077
+ type: MenuItemComponent,
8078
+ deps: [],
8079
+ target: i0.ɵɵFactoryTarget.Component
8080
+ });
8081
+ static ɵcmp = i0.ɵɵngDeclareComponent({
8082
+ minVersion: "17.2.0",
8083
+ version: "22.2.2",
8084
+ type: MenuItemComponent,
8085
+ isStandalone: true,
8086
+ selector: "ul-menu-item",
8087
+ inputs: {
8088
+ theme: {
8089
+ classPropertyName: "theme",
8090
+ publicName: "theme",
8091
+ isSignal: true,
8092
+ isRequired: false,
8093
+ transformFunction: null
8094
+ },
8095
+ disabled: {
8096
+ classPropertyName: "disabled",
8097
+ publicName: "disabled",
8098
+ isSignal: true,
8099
+ isRequired: false,
8100
+ transformFunction: null
8101
+ }
8102
+ },
8103
+ outputs: { triggered: "triggered" },
8104
+ host: { styleAttribute: "display: none" },
8105
+ viewQueries: [{
8106
+ propertyName: "iconTemplate",
8107
+ first: true,
8108
+ predicate: ["icon"],
8109
+ descendants: true,
8110
+ isSignal: true
8111
+ }, {
8112
+ propertyName: "labelTemplate",
8113
+ first: true,
8114
+ predicate: ["label"],
8115
+ descendants: true,
8116
+ isSignal: true
8117
+ }],
8118
+ ngImport: i0,
8119
+ template: `
8120
+ <ng-template #icon><ng-content select="[ul-menu-item-icon]" /></ng-template>
8121
+ <ng-template #label><ng-content /></ng-template>
8122
+ `,
8123
+ isInline: true
8124
+ });
8125
+ };
8126
+ i0.ɵɵngDeclareClassMetadata({
8127
+ minVersion: "12.0.0",
8128
+ version: "22.2.2",
8129
+ ngImport: i0,
8130
+ type: MenuItemComponent,
8131
+ decorators: [{
8132
+ type: Component,
8133
+ args: [{
8134
+ selector: "ul-menu-item",
8135
+ template: `
8136
+ <ng-template #icon><ng-content select="[ul-menu-item-icon]" /></ng-template>
8137
+ <ng-template #label><ng-content /></ng-template>
8138
+ `,
8139
+ host: { style: "display: none" }
8140
+ }]
8141
+ }],
8142
+ propDecorators: {
8143
+ theme: [{
8144
+ type: i0.Input,
8145
+ args: [{
8146
+ isSignal: true,
8147
+ alias: "theme",
8148
+ required: false
8149
+ }]
8150
+ }],
8151
+ disabled: [{
8152
+ type: i0.Input,
8153
+ args: [{
8154
+ isSignal: true,
8155
+ alias: "disabled",
8156
+ required: false
8157
+ }]
8158
+ }],
8159
+ triggered: [{
8160
+ type: i0.Output,
8161
+ args: ["triggered"]
8162
+ }],
8163
+ iconTemplate: [{
8164
+ type: i0.ViewChild,
8165
+ args: ["icon", { isSignal: true }]
8166
+ }],
8167
+ labelTemplate: [{
8168
+ type: i0.ViewChild,
8169
+ args: ["label", { isSignal: true }]
8170
+ }]
8171
+ }
8172
+ });
8016
8173
  var MenuComponent = class MenuComponent {
8017
8174
  theme = input("ghost-white", ...ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []);
8175
+ templateItems = contentChildren(MenuItemComponent, ...ngDevMode ? [{ debugName: "templateItems" }] : /* istanbul ignore next */ []);
8018
8176
  items = input([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
8019
8177
  disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
8020
8178
  triggerIconOnly = input(...ngDevMode ? [void 0, { debugName: "triggerIconOnly" }] : /* istanbul ignore next */ []);
@@ -8117,6 +8275,11 @@ var MenuComponent = class MenuComponent {
8117
8275
  itemSelected: "itemSelected",
8118
8276
  closed: "closed"
8119
8277
  },
8278
+ queries: [{
8279
+ propertyName: "templateItems",
8280
+ predicate: MenuItemComponent,
8281
+ isSignal: true
8282
+ }],
8120
8283
  viewQueries: [{
8121
8284
  propertyName: "trigger",
8122
8285
  first: true,
@@ -8125,7 +8288,7 @@ var MenuComponent = class MenuComponent {
8125
8288
  isSignal: true
8126
8289
  }],
8127
8290
  ngImport: i0,
8128
- template: "<ul-menu-trigger\n [theme]=\"theme()\"\n [disabled]=\"disabled()\"\n [iconOnly]=\"triggerIconOnly()\"\n [iconOnlyLabel]=\"iconOnlyLabel()\"\n [label]=\"triggerLabel()\"\n [leftIcons]=\"triggerLeftIcons()\"\n [rightIcons]=\"triggerRightIcons()\"\n [menuTemplate]=\"menu\"\n [menuId]=\"menuId\"\n [isOpen]=\"isOpen()\"\n (opened)=\"onMenuOpened()\"\n (closed)=\"onMenuClosed()\"\n/>\n\n<ng-template #menu>\n <div class=\"ul-menu__backdrop\" (click)=\"closeMenu()\"></div>\n <div cdkMenu class=\"ul-menu\" [id]=\"menuId\">\n <ul-menu-items\n [items]=\"items()\"\n [theme]=\"theme()\"\n (itemTriggered)=\"handleItemTriggered($event)\"\n />\n <ng-content />\n </div>\n</ng-template>\n",
8291
+ template: "<ul-menu-trigger\n [theme]=\"theme()\"\n [disabled]=\"disabled()\"\n [iconOnly]=\"triggerIconOnly()\"\n [iconOnlyLabel]=\"iconOnlyLabel()\"\n [label]=\"triggerLabel()\"\n [leftIcons]=\"triggerLeftIcons()\"\n [rightIcons]=\"triggerRightIcons()\"\n [menuTemplate]=\"menu\"\n [menuId]=\"menuId\"\n [isOpen]=\"isOpen()\"\n (opened)=\"onMenuOpened()\"\n (closed)=\"onMenuClosed()\"\n/>\n\n<ng-template #menu>\n <div class=\"ul-menu__backdrop\" (click)=\"closeMenu()\"></div>\n <div cdkMenu class=\"ul-menu\" [id]=\"menuId\">\n <ul-menu-items\n [templateItems]=\"templateItems()\"\n [items]=\"items()\"\n [theme]=\"theme()\"\n (itemTriggered)=\"handleItemTriggered($event)\"\n />\n <ng-content />\n </div>\n</ng-template>\n",
8129
8292
  styles: [".ul-menu{display:flex;flex-direction:column;gap:4px;background-color:#232323;border-radius:16px;padding:4px;margin:4px 0;min-width:200px}@media(max-width:1023px){.ul-menu{position:fixed;inset:auto 0 0;width:100%;max-height:40vh;margin:0;border-radius:16px 16px 0 0;gap:16px;display:flex;padding-bottom:8px;flex-direction:column;overflow-y:auto;font-family:Underlayer Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}.ul-menu ul-list-item .ul-list-item{font-family:Underlayer Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}}.ul-menu__backdrop{display:none}@media(max-width:1023px){.ul-menu__backdrop{display:block;position:fixed;inset:0;background-color:#0000004d}}\n"],
8130
8293
  dependencies: [
8131
8294
  {
@@ -8141,6 +8304,7 @@ var MenuComponent = class MenuComponent {
8141
8304
  selector: "ul-menu-items",
8142
8305
  inputs: [
8143
8306
  "items",
8307
+ "templateItems",
8144
8308
  "theme",
8145
8309
  "selectedIndex"
8146
8310
  ],
@@ -8183,7 +8347,7 @@ i0.ɵɵngDeclareClassMetadata({
8183
8347
  MenuTriggerComponent
8184
8348
  ],
8185
8349
  encapsulation: ViewEncapsulation.None,
8186
- template: "<ul-menu-trigger\n [theme]=\"theme()\"\n [disabled]=\"disabled()\"\n [iconOnly]=\"triggerIconOnly()\"\n [iconOnlyLabel]=\"iconOnlyLabel()\"\n [label]=\"triggerLabel()\"\n [leftIcons]=\"triggerLeftIcons()\"\n [rightIcons]=\"triggerRightIcons()\"\n [menuTemplate]=\"menu\"\n [menuId]=\"menuId\"\n [isOpen]=\"isOpen()\"\n (opened)=\"onMenuOpened()\"\n (closed)=\"onMenuClosed()\"\n/>\n\n<ng-template #menu>\n <div class=\"ul-menu__backdrop\" (click)=\"closeMenu()\"></div>\n <div cdkMenu class=\"ul-menu\" [id]=\"menuId\">\n <ul-menu-items\n [items]=\"items()\"\n [theme]=\"theme()\"\n (itemTriggered)=\"handleItemTriggered($event)\"\n />\n <ng-content />\n </div>\n</ng-template>\n",
8350
+ template: "<ul-menu-trigger\n [theme]=\"theme()\"\n [disabled]=\"disabled()\"\n [iconOnly]=\"triggerIconOnly()\"\n [iconOnlyLabel]=\"iconOnlyLabel()\"\n [label]=\"triggerLabel()\"\n [leftIcons]=\"triggerLeftIcons()\"\n [rightIcons]=\"triggerRightIcons()\"\n [menuTemplate]=\"menu\"\n [menuId]=\"menuId\"\n [isOpen]=\"isOpen()\"\n (opened)=\"onMenuOpened()\"\n (closed)=\"onMenuClosed()\"\n/>\n\n<ng-template #menu>\n <div class=\"ul-menu__backdrop\" (click)=\"closeMenu()\"></div>\n <div cdkMenu class=\"ul-menu\" [id]=\"menuId\">\n <ul-menu-items\n [templateItems]=\"templateItems()\"\n [items]=\"items()\"\n [theme]=\"theme()\"\n (itemTriggered)=\"handleItemTriggered($event)\"\n />\n <ng-content />\n </div>\n</ng-template>\n",
8187
8351
  styles: [".ul-menu{display:flex;flex-direction:column;gap:4px;background-color:#232323;border-radius:16px;padding:4px;margin:4px 0;min-width:200px}@media(max-width:1023px){.ul-menu{position:fixed;inset:auto 0 0;width:100%;max-height:40vh;margin:0;border-radius:16px 16px 0 0;gap:16px;display:flex;padding-bottom:8px;flex-direction:column;overflow-y:auto;font-family:Underlayer Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}.ul-menu ul-list-item .ul-list-item{font-family:Underlayer Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}}.ul-menu__backdrop{display:none}@media(max-width:1023px){.ul-menu__backdrop{display:block;position:fixed;inset:0;background-color:#0000004d}}\n"]
8188
8352
  }]
8189
8353
  }],
@@ -8196,6 +8360,10 @@ i0.ɵɵngDeclareClassMetadata({
8196
8360
  required: false
8197
8361
  }]
8198
8362
  }],
8363
+ templateItems: [{
8364
+ type: i0.ContentChildren,
8365
+ args: [i0.forwardRef(() => MenuItemComponent), { isSignal: true }]
8366
+ }],
8199
8367
  items: [{
8200
8368
  type: i0.Input,
8201
8369
  args: [{
@@ -13285,6 +13453,6 @@ i0.ɵɵngDeclareClassMetadata({
13285
13453
  }]
13286
13454
  }
13287
13455
  });
13288
- export { AccordionComponent, AccordionItemComponent, AreaCodeComponent, AvatarComponent, AvatarGroupComponent, BreadcrumbComponent, ButtonComponent, CalendarComponent, CardComponent, CategoryPickerComponent, CheckboxComponent, CollapseComponent, CustomCurrencyPipe, DockComponent, DockItemComponent, DockItemContentSlotDirective, DropdownComponent, FileInputComponent, FooterComponent, FormFieldHelperComponent, FormFieldLabelComponent, HeroComponent, IconComponent, ImageCropperComponent, ImageNotFoundComponent, ImageNotFoundDirective, InputComponent, ListItemComponent, LongPressDirective, MenuComponent, MenuItemsComponent, MenuTriggerComponent, ModalComponent, NavbarAppNameSlotDirective, NavbarAvatarSlotDirective, NavbarComponent, NavbarLogoSlotDirective, NavbarSearchSlotDirective, PeHeroActionsSlotDirective, PeHeroBadgesSlotDirective, PeHeroContentSlotDirective, PeHeroSubtitleSlotDirective, PeHeroTitleSlotDirective, PillComponent, PriceButtonComponent, RadialComponent, RadioComponent, RadioGroupComponent, RichTextComponent, SearchInputComponent, SearchSelectComponent, SelectComponent, SelectableRowComponent, SidebarComponent, SkeletonComponent, StatusComponent, StepperComponent, TableComponent, TextareaComponent, TextareaFieldDirective, ToastContainerComponent, ToastService, ToggleComponent, TooltipComponent, createFormFieldIds, getFormFieldDescribedBy, toastIcon };
13456
+ export { AccordionComponent, AccordionItemComponent, AreaCodeComponent, AvatarComponent, AvatarGroupComponent, BreadcrumbComponent, ButtonComponent, CalendarComponent, CardComponent, CategoryPickerComponent, CheckboxComponent, CollapseComponent, CustomCurrencyPipe, DockComponent, DockItemComponent, DockItemContentSlotDirective, DropdownComponent, FileInputComponent, FooterComponent, FormFieldHelperComponent, FormFieldLabelComponent, HeroComponent, IconComponent, ImageCropperComponent, ImageNotFoundComponent, ImageNotFoundDirective, InputComponent, ListItemComponent, LongPressDirective, MenuComponent, MenuItemComponent, MenuItemsComponent, MenuTriggerComponent, ModalComponent, NavbarAppNameSlotDirective, NavbarAvatarSlotDirective, NavbarComponent, NavbarLogoSlotDirective, NavbarSearchSlotDirective, PeHeroActionsSlotDirective, PeHeroBadgesSlotDirective, PeHeroContentSlotDirective, PeHeroSubtitleSlotDirective, PeHeroTitleSlotDirective, PillComponent, PriceButtonComponent, RadialComponent, RadioComponent, RadioGroupComponent, RichTextComponent, SearchInputComponent, SearchSelectComponent, SelectComponent, SelectableRowComponent, SidebarComponent, SkeletonComponent, StatusComponent, StepperComponent, TableComponent, TextareaComponent, TextareaFieldDirective, ToastContainerComponent, ToastService, ToggleComponent, TooltipComponent, createFormFieldIds, getFormFieldDescribedBy, toastIcon };
13289
13457
 
13290
13458
  //# sourceMappingURL=underlayerdev-ui.mjs.map