daisyui 3.0.29 → 3.1.1

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.
package/dist/full.css CHANGED
@@ -1645,7 +1645,7 @@ html {
1645
1645
  .link-error:hover {
1646
1646
  --tw-text-opacity: 1;
1647
1647
  color: hsl(var(--er) / var(--tw-text-opacity))}
1648
- .menu :where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):where(.active), .menu :where(li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):where(.active) {
1648
+ :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):where(.active), :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):where(.active) {
1649
1649
  --tw-bg-opacity: 1;
1650
1650
  background-color: hsl(var(--n) / var(--tw-bg-opacity));
1651
1651
  --tw-text-opacity: 1;
@@ -2241,7 +2241,7 @@ html {
2241
2241
  --tw-scale-x: 1;
2242
2242
  --tw-scale-y: 1;
2243
2243
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
2244
- .menu :where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):hover, .menu :where(li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active):hover {
2244
+ :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):hover, :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active):hover {
2245
2245
  cursor: pointer;
2246
2246
  background-color: hsl(var(--bc) / 0.1);
2247
2247
  --tw-text-opacity: 1;
@@ -2443,8 +2443,6 @@ html {
2443
2443
  display: inline-flex;
2444
2444
  align-items: stretch;
2445
2445
  border-radius: var(--rounded-btn, 0.5rem)}
2446
- .join * {
2447
- border-radius: inherit}
2448
2446
  .join :where(.join-item) {
2449
2447
  border-top-right-radius: 0;
2450
2448
  border-bottom-right-radius: 0;
@@ -2472,6 +2470,8 @@ html {
2472
2470
  .join :where(*:last-child:not(:first-child) .join-item) {
2473
2471
  border-top-right-radius: inherit;
2474
2472
  border-bottom-right-radius: inherit}
2473
+ :where(.join *) {
2474
+ border-radius: inherit}
2475
2475
  .kbd {
2476
2476
  display: inline-flex;
2477
2477
  align-items: center;
@@ -2518,9 +2518,7 @@ html {
2518
2518
  padding: 0.5rem}
2519
2519
  .menu :where(li ul) {
2520
2520
  position: relative;
2521
- white-space: nowrap;
2522
- margin-left: 1rem;
2523
- padding-left: 0.5rem}
2521
+ white-space: nowrap}
2524
2522
  .menu :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
2525
2523
  .menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
2526
2524
  display: grid;
@@ -2529,20 +2527,10 @@ html {
2529
2527
  align-items: center;
2530
2528
  gap: 0.5rem;
2531
2529
  grid-auto-columns: max-content auto max-content;
2532
- user-select: none;
2533
- padding-left: 1rem;
2534
- padding-right: 1rem;
2535
- padding-top: 0.5rem;
2536
- padding-bottom: 0.5rem;
2537
- text-align: left;
2538
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
2539
- transition-duration: 200ms;
2540
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2541
- border-radius: var(--rounded-btn, 0.5rem)}
2530
+ user-select: none}
2542
2531
  .menu li.disabled {
2543
2532
  cursor: not-allowed;
2544
- user-select: none;
2545
- color: hsl(var(--bc) / 0.3)}
2533
+ user-select: none}
2546
2534
  .menu :where(li > .menu-dropdown:not(.menu-dropdown-show)) {
2547
2535
  display: none}
2548
2536
  :where(.menu li) {
@@ -2753,7 +2741,6 @@ html {
2753
2741
  --tw-bg-opacity: 1}
2754
2742
  .select {
2755
2743
  display: inline-flex;
2756
- flex-shrink: 0;
2757
2744
  cursor: pointer;
2758
2745
  user-select: none;
2759
2746
  appearance: none;
@@ -3783,7 +3770,8 @@ details.collapse summary::-webkit-details-marker {
3783
3770
  --tw-scale-y: 1;
3784
3771
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
3785
3772
  .file-input-bordered {
3786
- --tw-border-opacity: 0.2}
3773
+ --tw-border-opacity: 1;
3774
+ border-color: hsl(var(--b2) / var(--tw-border-opacity))}
3787
3775
  .file-input:focus {
3788
3776
  outline-style: solid;
3789
3777
  outline-width: 2px;
@@ -3921,7 +3909,8 @@ details.collapse summary::-webkit-details-marker {
3921
3909
  .input[list]::-webkit-calendar-picker-indicator {
3922
3910
  line-height: 1em}
3923
3911
  .input-bordered {
3924
- --tw-border-opacity: 0.2}
3912
+ --tw-border-opacity: 1;
3913
+ border-color: hsl(var(--b2) / var(--tw-border-opacity))}
3925
3914
  .input:focus {
3926
3915
  outline-style: solid;
3927
3916
  outline-width: 2px;
@@ -4116,11 +4105,14 @@ details.collapse summary::-webkit-details-marker {
4116
4105
  .mask-triangle-4 {
4117
4106
  -webkit-mask-image: url("data:image/svg+xml,%3csvg width='150' height='174' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M.631 87.107.446.505l74.239 43.462 74.422 43.14-74.422 43.14L.446 173.71z' fill-rule='evenodd'/%3e%3c/svg%3e");
4118
4107
  mask-image: url("data:image/svg+xml,%3csvg width='150' height='174' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M.631 87.107.446.505l74.239 43.462 74.422 43.14-74.422 43.14L.446 173.71z' fill-rule='evenodd'/%3e%3c/svg%3e")}
4119
- .menu :where(li:empty) {
4108
+ :where(.menu li:empty) {
4120
4109
  background-color: hsl(var(--bc) / 0.1);
4121
4110
  margin: 0.5rem 1rem;
4122
4111
  height: 1px}
4123
- .menu :where(li ul):before {
4112
+ :where(.menu li ul) {
4113
+ margin-left: 1rem;
4114
+ padding-left: 0.5rem}
4115
+ :where(.menu li ul):before {
4124
4116
  position: absolute;
4125
4117
  left: 0px;
4126
4118
  top: 0.75rem;
@@ -4128,28 +4120,41 @@ details.collapse summary::-webkit-details-marker {
4128
4120
  width: 1px;
4129
4121
  background-color: hsl(var(--bc) / 0.1);
4130
4122
  content: ""}
4131
- .menu :where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active).focus,
4132
- .menu :where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):focus,
4133
- .menu :where(li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active).focus,
4134
- .menu :where(li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active):focus {
4123
+ :where(.menu li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
4124
+ :where(.menu li:not(.menu-title) > details > summary:not(.menu-title)) {
4125
+ padding-left: 1rem;
4126
+ padding-right: 1rem;
4127
+ padding-top: 0.5rem;
4128
+ padding-bottom: 0.5rem;
4129
+ text-align: left;
4130
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
4131
+ transition-duration: 200ms;
4132
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
4133
+ border-radius: var(--rounded-btn, 0.5rem)}
4134
+ :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active).focus,
4135
+ :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):focus,
4136
+ :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active).focus,
4137
+ :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active):focus {
4135
4138
  cursor: pointer;
4136
4139
  background-color: hsl(var(--bc) / 0.1);
4137
4140
  --tw-text-opacity: 1;
4138
4141
  color: hsl(var(--bc) / var(--tw-text-opacity));
4139
4142
  outline: 2px solid transparent;
4140
4143
  outline-offset: 2px}
4141
- .menu :where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):active,
4142
- .menu :where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):where(.active),
4143
- .menu :where(li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):active,
4144
- .menu :where(li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):where(.active) {
4144
+ :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):active,
4145
+ :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):where(.active),
4146
+ :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):active,
4147
+ :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):where(.active) {
4145
4148
  --tw-bg-opacity: 1;
4146
4149
  background-color: hsl(var(--n) / var(--tw-bg-opacity));
4147
4150
  --tw-text-opacity: 1;
4148
4151
  color: hsl(var(--nc) / var(--tw-text-opacity))}
4149
- .menu :where(li > details > summary)::-webkit-details-marker {
4152
+ :where(.menu li.disabled) {
4153
+ color: hsl(var(--bc) / 0.3)}
4154
+ :where(.menu li > details > summary)::-webkit-details-marker {
4150
4155
  display: none}
4151
- .menu :where(li > details > summary):after,
4152
- .menu :where(li > .menu-dropdown-toggle):after {
4156
+ :where(.menu li > details > summary):after,
4157
+ :where(.menu li > .menu-dropdown-toggle):after {
4153
4158
  justify-self: end;
4154
4159
  display: block;
4155
4160
  margin-top: -0.5rem;
@@ -4163,11 +4168,11 @@ details.collapse summary::-webkit-details-marker {
4163
4168
  transform-origin: 75% 75%;
4164
4169
  box-shadow: 2px 2px;
4165
4170
  pointer-events: none}
4166
- .menu :where(li > details[open] > summary):after,
4167
- .menu :where(li > .menu-dropdown-toggle.menu-dropdown-show):after {
4171
+ :where(.menu li > details[open] > summary):after,
4172
+ :where(.menu li > .menu-dropdown-toggle.menu-dropdown-show):after {
4168
4173
  transform: rotate(225deg);
4169
4174
  margin-top: 0}
4170
- .menu .menu-title {
4175
+ .menu-title {
4171
4176
  padding-left: 1rem;
4172
4177
  padding-right: 1rem;
4173
4178
  padding-top: 0.5rem;
@@ -4568,7 +4573,8 @@ details.collapse summary::-webkit-details-marker {
4568
4573
  100% {
4569
4574
  transform: translateY(0)}}
4570
4575
  .select-bordered {
4571
- --tw-border-opacity: 0.2}
4576
+ --tw-border-opacity: 1;
4577
+ border-color: hsl(var(--b2) / var(--tw-border-opacity))}
4572
4578
  .select:focus {
4573
4579
  outline-style: solid;
4574
4580
  outline-width: 2px;
@@ -4885,7 +4891,8 @@ details.collapse summary::-webkit-details-marker {
4885
4891
  font-weight: 700;
4886
4892
  color: hsl(var(--bc) / 0.6)}
4887
4893
  .textarea-bordered {
4888
- --tw-border-opacity: 0.2}
4894
+ --tw-border-opacity: 1;
4895
+ border-color: hsl(var(--b2) / var(--tw-border-opacity))}
4889
4896
  .textarea:focus {
4890
4897
  outline-style: solid;
4891
4898
  outline-width: 2px;
@@ -22588,7 +22595,7 @@ details.collapse summary::-webkit-details-marker {
22588
22595
  bottom: auto}
22589
22596
  .artboard-demo {
22590
22597
  --tw-bg-opacity: 1;
22591
- background-color: hsl(var(--b1) / var(--tw-bg-opacity));
22598
+ background-color: hsl(var(--b3) / var(--tw-bg-opacity));
22592
22599
  --tw-text-opacity: 1;
22593
22600
  color: hsl(var(--bc) / var(--tw-text-opacity));
22594
22601
  border-radius: var(--rounded-box, 1rem);
package/dist/styled.css CHANGED
@@ -720,9 +720,6 @@
720
720
  .join {
721
721
  display: inline-flex;
722
722
  align-items: stretch;
723
- }
724
- .join * {
725
- border-radius: inherit;
726
723
  }
727
724
  .join :where(.join-item) {
728
725
  border-top-right-radius: 0;
@@ -757,6 +754,9 @@
757
754
  border-top-right-radius: inherit;
758
755
  border-bottom-right-radius: inherit;
759
756
  }
757
+ :where(.join *) {
758
+ border-radius: inherit;
759
+ }
760
760
  .kbd {
761
761
  display: inline-flex;
762
762
  align-items: center;
@@ -988,7 +988,6 @@
988
988
  }
989
989
  .select {
990
990
  display: inline-flex;
991
- flex-shrink: 0;
992
991
  cursor: pointer;
993
992
  user-select: none;
994
993
  appearance: none;
@@ -2613,7 +2612,8 @@ details.collapse summary {
2613
2612
  text-transform: var(--btn-text-case, uppercase);
2614
2613
  }
2615
2614
  .file-input-bordered {
2616
- --tw-border-opacity: 0.2;
2615
+ --tw-border-opacity: 1;
2616
+ border-color: hsl(var(--b2) / var(--tw-border-opacity));
2617
2617
  }
2618
2618
  .file-input:focus {
2619
2619
  outline-style: solid;
@@ -2827,7 +2827,8 @@ details.collapse summary {
2827
2827
  line-height: 1em;
2828
2828
  }
2829
2829
  .input-bordered {
2830
- --tw-border-opacity: 0.2;
2830
+ --tw-border-opacity: 1;
2831
+ border-color: hsl(var(--b2) / var(--tw-border-opacity));
2831
2832
  }
2832
2833
  .input:focus {
2833
2834
  outline-style: solid;
@@ -3120,115 +3121,112 @@ details.collapse summary {
3120
3121
  mask-image: url("data:image/svg+xml,%3csvg width='150' height='174' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M.631 87.107.446.505l74.239 43.462 74.422 43.14-74.422 43.14L.446 173.71z' fill-rule='evenodd'/%3e%3c/svg%3e");
3121
3122
  }
3122
3123
  .menu {
3123
- padding: 0.5rem;
3124
+ padding: 0.5rem;
3124
3125
  }
3125
- .menu :where(li:empty) {
3126
- background-color: hsl(var(--bc) / 0.1);
3127
- margin: 0.5rem 1rem;
3128
- height: 1px;
3126
+ :where(.menu li:empty) {
3127
+ background-color: hsl(var(--bc) / 0.1);
3128
+ margin: 0.5rem 1rem;
3129
+ height: 1px;
3129
3130
  }
3130
- .menu :where(li ul) {
3131
- margin-left: 1rem;
3132
- padding-left: 0.5rem;
3131
+ :where(.menu li ul) {
3132
+ margin-left: 1rem;
3133
+ padding-left: 0.5rem;
3133
3134
  }
3134
- .menu :where(li ul):before {
3135
- position: absolute;
3136
- left: 0px;
3137
- top: 0.75rem;
3138
- bottom: 0.75rem;
3139
- width: 1px;
3140
- background-color: hsl(var(--bc) / 0.1);
3141
- content: "";
3135
+ :where(.menu li ul):before {
3136
+ position: absolute;
3137
+ left: 0px;
3138
+ top: 0.75rem;
3139
+ bottom: 0.75rem;
3140
+ width: 1px;
3141
+ background-color: hsl(var(--bc) / 0.1);
3142
+ content: "";
3142
3143
  }
3143
- /* :where(& > li:not(.menu-title) > details > ul) {
3144
- @apply bg-base-100 shadow-xl rounded-box;
3145
- } */
3146
- .menu :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
3147
- .menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
3148
- padding-left: 1rem;
3149
- padding-right: 1rem;
3150
- padding-top: 0.5rem;
3151
- padding-bottom: 0.5rem;
3152
- text-align: left;
3153
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
3154
- transition-duration: 200ms;
3155
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3156
- border-radius: var(--rounded-btn, 0.5rem);
3144
+ :where(.menu li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
3145
+ :where(.menu li:not(.menu-title) > details > summary:not(.menu-title)) {
3146
+ padding-left: 1rem;
3147
+ padding-right: 1rem;
3148
+ padding-top: 0.5rem;
3149
+ padding-bottom: 0.5rem;
3150
+ text-align: left;
3151
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
3152
+ transition-duration: 200ms;
3153
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3154
+ border-radius: var(--rounded-btn, 0.5rem);
3155
+ }
3156
+ :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active).focus,
3157
+ :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):focus,
3158
+ :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active).focus,
3159
+ :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active):focus {
3160
+ cursor: pointer;
3161
+ background-color: hsl(var(--bc) / 0.1);
3162
+ --tw-text-opacity: 1;
3163
+ color: hsl(var(--bc) / var(--tw-text-opacity));
3164
+ outline: 2px solid transparent;
3165
+ outline-offset: 2px;
3157
3166
  }
3158
- .menu :where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active).focus,
3159
- .menu :where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):focus,
3160
- .menu :where(li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active).focus,
3161
- .menu :where(li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active):focus {
3167
+ @media (hover: hover) {
3168
+ :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):hover, :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active):hover {
3162
3169
  cursor: pointer;
3163
3170
  background-color: hsl(var(--bc) / 0.1);
3164
3171
  --tw-text-opacity: 1;
3165
3172
  color: hsl(var(--bc) / var(--tw-text-opacity));
3166
3173
  outline: 2px solid transparent;
3167
3174
  outline-offset: 2px;
3175
+ }
3176
+ }
3177
+ :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):active,
3178
+ :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):where(.active),
3179
+ :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):active,
3180
+ :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):where(.active) {
3181
+ --tw-bg-opacity: 1;
3182
+ background-color: hsl(var(--n) / var(--tw-bg-opacity));
3183
+ --tw-text-opacity: 1;
3184
+ color: hsl(var(--nc) / var(--tw-text-opacity));
3168
3185
  }
3169
- @media (hover: hover) {
3170
- .menu :where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):hover, .menu :where(li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active):hover {
3171
- cursor: pointer;
3172
- background-color: hsl(var(--bc) / 0.1);
3173
- --tw-text-opacity: 1;
3174
- color: hsl(var(--bc) / var(--tw-text-opacity));
3175
- outline: 2px solid transparent;
3176
- outline-offset: 2px;
3177
- }
3178
- }
3179
- .menu :where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):active,
3180
- .menu :where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):where(.active),
3181
- .menu :where(li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):active,
3182
- .menu :where(li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):where(.active) {
3186
+ @media (hover:hover) {
3187
+ :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):where(.active), :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):where(.active) {
3183
3188
  --tw-bg-opacity: 1;
3184
3189
  background-color: hsl(var(--n) / var(--tw-bg-opacity));
3185
3190
  --tw-text-opacity: 1;
3186
3191
  color: hsl(var(--nc) / var(--tw-text-opacity));
3192
+ }
3187
3193
  }
3188
- @media (hover:hover) {
3189
- .menu :where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):where(.active), .menu :where(li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):where(.active) {
3190
- --tw-bg-opacity: 1;
3191
- background-color: hsl(var(--n) / var(--tw-bg-opacity));
3192
- --tw-text-opacity: 1;
3193
- color: hsl(var(--nc) / var(--tw-text-opacity));
3194
- }
3194
+ :where(.menu li.disabled) {
3195
+ color: hsl(var(--bc) / 0.3);
3195
3196
  }
3196
- .menu li.disabled {
3197
- color: hsl(var(--bc) / 0.3);
3197
+ :where(.menu li > details > summary)::-webkit-details-marker {
3198
+ display: none;
3198
3199
  }
3199
- .menu :where(li > details > summary)::-webkit-details-marker {
3200
- display: none;
3200
+ :where(.menu li > details > summary):after,
3201
+ :where(.menu li > .menu-dropdown-toggle):after {
3202
+ justify-self: end;
3203
+ display: block;
3204
+ margin-top: -0.5rem;
3205
+ height: 0.5rem;
3206
+ width: 0.5rem;
3207
+ transform: rotate(45deg);
3208
+ transition-property: transform, margin-top;
3209
+ transition-duration: 0.3s;
3210
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3211
+ content: "";
3212
+ transform-origin: 75% 75%;
3213
+ box-shadow: 2px 2px;
3214
+ pointer-events: none;
3201
3215
  }
3202
- .menu :where(li > details > summary):after,
3203
- .menu :where(li > .menu-dropdown-toggle):after {
3204
- justify-self: end;
3205
- display: block;
3206
- margin-top: -0.5rem;
3207
- height: 0.5rem;
3208
- width: 0.5rem;
3209
- transform: rotate(45deg);
3210
- transition-property: transform, margin-top;
3211
- transition-duration: 0.3s;
3212
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3213
- content: "";
3214
- transform-origin: 75% 75%;
3215
- box-shadow: 2px 2px;
3216
- pointer-events: none;
3216
+ :where(.menu li > details[open] > summary):after,
3217
+ :where(.menu li > .menu-dropdown-toggle.menu-dropdown-show):after {
3218
+ transform: rotate(225deg);
3219
+ margin-top: 0;
3217
3220
  }
3218
- .menu :where(li > details[open] > summary):after,
3219
- .menu :where(li > .menu-dropdown-toggle.menu-dropdown-show):after {
3220
- transform: rotate(225deg);
3221
- margin-top: 0;
3222
- }
3223
- .menu .menu-title {
3224
- padding-left: 1rem;
3225
- padding-right: 1rem;
3226
- padding-top: 0.5rem;
3227
- padding-bottom: 0.5rem;
3228
- font-size: 0.875rem;
3229
- line-height: 1.25rem;
3230
- font-weight: 700;
3231
- color: hsl(var(--bc) / 0.4);
3221
+ .menu-title {
3222
+ padding-left: 1rem;
3223
+ padding-right: 1rem;
3224
+ padding-top: 0.5rem;
3225
+ padding-bottom: 0.5rem;
3226
+ font-size: 0.875rem;
3227
+ line-height: 1.25rem;
3228
+ font-weight: 700;
3229
+ color: hsl(var(--bc) / 0.4);
3232
3230
  }
3233
3231
  .mockup-code {
3234
3232
  min-width: 18rem;
@@ -3874,7 +3872,8 @@ details.collapse summary {
3874
3872
  border-radius: var(--rounded-btn, 0.5rem);
3875
3873
  }
3876
3874
  .select-bordered {
3877
- --tw-border-opacity: 0.2;
3875
+ --tw-border-opacity: 1;
3876
+ border-color: hsl(var(--b2) / var(--tw-border-opacity));
3878
3877
  }
3879
3878
  .select {
3880
3879
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
@@ -4422,7 +4421,8 @@ details.collapse summary {
4422
4421
  border-radius: var(--rounded-btn, 0.5rem)
4423
4422
  }
4424
4423
  .textarea-bordered {
4425
- --tw-border-opacity: 0.2
4424
+ --tw-border-opacity: 1;
4425
+ border-color: hsl(var(--b2) / var(--tw-border-opacity))
4426
4426
  }
4427
4427
  .textarea:focus {
4428
4428
  outline-style: solid;