@carbon/styles 1.110.0-rc.0 → 1.110.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 (6) hide show
  1. package/css/styles.css +66 -41
  2. package/css/styles.min.css +1 -1
  3. package/package.json +9 -9
  4. package/scss/components/__tests__/accordion-test.js +81 -1
  5. package/scss/components/accordion/_accordion.scss +76 -51
  6. package/scss/components/popover/_popover.scss +4 -2
package/css/styles.css CHANGED
@@ -4166,11 +4166,13 @@ em {
4166
4166
  border-block-end: 1px solid var(--cds-border-subtle);
4167
4167
  }
4168
4168
 
4169
- .cds--accordion__item:not(.cds--accordion__item--active):hover, .cds--accordion__item:not(.cds--accordion__item--active):hover + .cds--accordion__item {
4170
- border-block-start-color: var(--cds-layer-hover);
4171
- }
4172
- .cds--accordion__item:not(.cds--accordion__item--active):last-child:hover {
4173
- border-block-end-color: var(--cds-layer-hover);
4169
+ @media (any-hover: hover) {
4170
+ .cds--accordion__item:not(.cds--accordion__item--active):hover, .cds--accordion__item:not(.cds--accordion__item--active):hover + .cds--accordion__item {
4171
+ border-block-start-color: var(--cds-layer-hover);
4172
+ }
4173
+ .cds--accordion__item:not(.cds--accordion__item--active):last-child:hover {
4174
+ border-block-end-color: var(--cds-layer-hover);
4175
+ }
4174
4176
  }
4175
4177
 
4176
4178
  .cds--accordion__heading {
@@ -4214,9 +4216,11 @@ em {
4214
4216
  min-block-size: var(--cds-layout-size-height-local);
4215
4217
  padding-inline-end: var(--cds-layout-density-padding-inline-local);
4216
4218
  }
4217
- .cds--accordion__heading:hover {
4218
- background-color: var(--cds-layer-hover);
4219
- outline: none;
4219
+ @media (any-hover: hover) {
4220
+ .cds--accordion__heading:hover {
4221
+ background-color: var(--cds-layer-hover);
4222
+ outline: none;
4223
+ }
4220
4224
  }
4221
4225
  .cds--accordion__heading:focus {
4222
4226
  position: relative;
@@ -4240,10 +4244,11 @@ em {
4240
4244
  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
4241
4245
  }
4242
4246
 
4243
- .cds--accordion__heading[disabled]:hover::before {
4244
- background-color: transparent;
4247
+ @media (any-hover: hover) {
4248
+ .cds--accordion__heading[disabled]:hover::before {
4249
+ background-color: transparent;
4250
+ }
4245
4251
  }
4246
-
4247
4252
  .cds--accordion__item--disabled,
4248
4253
  .cds--accordion__item--disabled + .cds--accordion__item {
4249
4254
  border-block-start: 1px solid var(--cds-border-subtle);
@@ -4363,7 +4368,7 @@ li.cds--accordion__item--disabled:last-of-type {
4363
4368
  position: relative;
4364
4369
  border-color: transparent;
4365
4370
  }
4366
- .cds--accordion--flush .cds--accordion__item:last-child, .cds--accordion--flush .cds--accordion__item:hover, .cds--accordion--flush .cds--accordion__item:last-child:hover, .cds--accordion--flush .cds--accordion__item:hover + .cds--accordion__item {
4371
+ .cds--accordion--flush .cds--accordion__item:last-child {
4367
4372
  border-color: transparent;
4368
4373
  }
4369
4374
  .cds--accordion--flush .cds--accordion__item::before, .cds--accordion--flush .cds--accordion__item::after {
@@ -4389,35 +4394,45 @@ li.cds--accordion__item--disabled:last-of-type {
4389
4394
  inset-block-end: -1px;
4390
4395
  }
4391
4396
 
4392
- .cds--accordion--flush .cds--accordion__heading:hover {
4393
- position: relative;
4394
- z-index: 1;
4397
+ @media (any-hover: hover) {
4398
+ .cds--accordion--flush .cds--accordion__item:hover,
4399
+ .cds--accordion--flush .cds--accordion__item:last-child:hover,
4400
+ .cds--accordion--flush .cds--accordion__item:hover + .cds--accordion__item {
4401
+ border-color: transparent;
4402
+ }
4395
4403
  }
4396
- .cds--accordion--flush .cds--accordion__heading:hover::before, .cds--accordion--flush .cds--accordion__heading:hover::after {
4397
- position: absolute;
4398
- display: block;
4399
- background: var(--cds-layer-hover);
4400
- block-size: 1px;
4401
- content: "";
4402
- inline-size: 100%;
4403
- inset-inline-start: 0;
4404
- transition: background cubic-bezier(0.2, 0, 0.38, 0.9) 110ms;
4404
+ @media (any-hover: hover) {
4405
+ .cds--accordion--flush .cds--accordion__heading:hover {
4406
+ position: relative;
4407
+ z-index: 1;
4408
+ }
4409
+ .cds--accordion--flush .cds--accordion__heading:hover::before, .cds--accordion--flush .cds--accordion__heading:hover::after {
4410
+ position: absolute;
4411
+ display: block;
4412
+ background: var(--cds-layer-hover);
4413
+ block-size: 1px;
4414
+ content: "";
4415
+ inline-size: 100%;
4416
+ inset-inline-start: 0;
4417
+ transition: background cubic-bezier(0.2, 0, 0.38, 0.9) 110ms;
4418
+ }
4405
4419
  }
4406
- @media screen and (prefers-reduced-motion: reduce) {
4420
+ @media screen and (any-hover: hover) and (prefers-reduced-motion: reduce) {
4407
4421
  .cds--accordion--flush .cds--accordion__heading:hover::before, .cds--accordion--flush .cds--accordion__heading:hover::after {
4408
4422
  transition: none;
4409
4423
  }
4410
4424
  }
4411
- .cds--accordion--flush .cds--accordion__heading:hover::before {
4412
- inset-block-start: -1px;
4413
- }
4414
- .cds--accordion--flush .cds--accordion__heading:hover::after {
4415
- inset-block-end: -1px;
4416
- }
4417
- .cds--accordion--flush .cds--accordion__heading:hover:focus::after, .cds--accordion--flush .cds--accordion__heading:hover:focus::before {
4418
- background: none;
4425
+ @media (any-hover: hover) {
4426
+ .cds--accordion--flush .cds--accordion__heading:hover::before {
4427
+ inset-block-start: -1px;
4428
+ }
4429
+ .cds--accordion--flush .cds--accordion__heading:hover::after {
4430
+ inset-block-end: -1px;
4431
+ }
4432
+ .cds--accordion--flush .cds--accordion__heading:hover:focus::after, .cds--accordion--flush .cds--accordion__heading:hover:focus::before {
4433
+ background: none;
4434
+ }
4419
4435
  }
4420
-
4421
4436
  .cds--accordion.cds--skeleton .cds--accordion__heading,
4422
4437
  .cds--accordion.cds--skeleton .cds--accordion__button {
4423
4438
  cursor: default;
@@ -4428,17 +4443,25 @@ li.cds--accordion__item--disabled:last-of-type {
4428
4443
  fill: var(--cds-icon-primary, #161616);
4429
4444
  pointer-events: none;
4430
4445
  }
4431
- .cds--accordion.cds--skeleton .cds--accordion__arrow:hover, .cds--accordion.cds--skeleton .cds--accordion__arrow:focus, .cds--accordion.cds--skeleton .cds--accordion__arrow:active {
4446
+ .cds--accordion.cds--skeleton .cds--accordion__arrow:focus, .cds--accordion.cds--skeleton .cds--accordion__arrow:active {
4432
4447
  border: none;
4433
4448
  cursor: default;
4434
4449
  outline: none;
4435
4450
  }
4436
4451
 
4437
- .cds--accordion.cds--skeleton .cds--accordion__heading:hover::before,
4438
- .cds--accordion.cds--skeleton .cds--accordion__heading:hover {
4439
- background-color: transparent;
4452
+ @media (any-hover: hover) {
4453
+ .cds--accordion.cds--skeleton .cds--accordion__arrow:hover {
4454
+ border: none;
4455
+ cursor: default;
4456
+ outline: none;
4457
+ }
4458
+ }
4459
+ @media (any-hover: hover) {
4460
+ .cds--accordion.cds--skeleton .cds--accordion__heading:hover::before,
4461
+ .cds--accordion.cds--skeleton .cds--accordion__heading:hover {
4462
+ background-color: transparent;
4463
+ }
4440
4464
  }
4441
-
4442
4465
  .cds--accordion--end.cds--skeleton .cds--accordion__arrow {
4443
4466
  margin-inline-start: 1rem;
4444
4467
  }
@@ -5345,8 +5368,10 @@ li.cds--accordion__item--disabled:last-of-type {
5345
5368
  outline-style: dotted;
5346
5369
  }
5347
5370
  }
5348
- .cds--popover--tab-tip__button:hover {
5349
- background-color: var(--cds-layer-hover);
5371
+ @media (any-hover: hover) {
5372
+ .cds--popover--tab-tip__button:hover {
5373
+ background-color: var(--cds-layer-hover);
5374
+ }
5350
5375
  }
5351
5376
  .cds--popover--tab-tip__button svg {
5352
5377
  fill: var(--cds-icon-primary, #161616);