@navikt/aksel-stylelint 8.0.0 → 8.1.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 (2) hide show
  1. package/dist/index.css +762 -157
  2. package/package.json +3 -3
package/dist/index.css CHANGED
@@ -646,7 +646,7 @@
646
646
  }
647
647
 
648
648
  :root, :host {
649
- --ax-version: "8.0.0";
649
+ --ax-version: "8.1.0";
650
650
  --ax-space-0: 0rem;
651
651
  --ax-space-1: .0625rem;
652
652
  --ax-space-2: .125rem;
@@ -982,7 +982,6 @@
982
982
  }
983
983
 
984
984
  .sr-only, .aksel-sr-only {
985
- clip: rect(0, 0, 0, 0);
986
985
  clip-path: inset(50%);
987
986
  white-space: nowrap;
988
987
  border: 0;
@@ -995,7 +994,6 @@
995
994
  }
996
995
 
997
996
  .sr-only.focusable:active, .sr-only.focusable:focus, .aksel-sr-only.focusable:active, .aksel-sr-only.focusable:focus {
998
- clip: auto;
999
997
  clip-path: none;
1000
998
  height: auto;
1001
999
  white-space: inherit;
@@ -1036,7 +1034,7 @@
1036
1034
  }
1037
1035
 
1038
1036
  pre, blockquote {
1039
- page-break-inside: avoid;
1037
+ break-inside: avoid;
1040
1038
  border: 1px solid #999;
1041
1039
  }
1042
1040
 
@@ -1045,7 +1043,7 @@
1045
1043
  }
1046
1044
 
1047
1045
  tr, img {
1048
- page-break-inside: avoid;
1046
+ break-inside: avoid;
1049
1047
  }
1050
1048
 
1051
1049
  p, h2, h3 {
@@ -1054,7 +1052,7 @@
1054
1052
  }
1055
1053
 
1056
1054
  h2, h3 {
1057
- page-break-after: avoid;
1055
+ break-after: avoid;
1058
1056
  }
1059
1057
  }
1060
1058
  }
@@ -1418,7 +1416,6 @@
1418
1416
  }
1419
1417
 
1420
1418
  .aksel-typo--visually-hidden {
1421
- clip: rect(0, 0, 0, 0) !important;
1422
1419
  clip-path: inset(50%) !important;
1423
1420
  white-space: nowrap !important;
1424
1421
  border: 0 !important;
@@ -1749,6 +1746,10 @@
1749
1746
  background-color: var(--ax-bg-strong-pressed);
1750
1747
  }
1751
1748
 
1749
+ .aksel-button[data-variant="primary"]:-webkit-any(:disabled, .aksel-button--disabled) {
1750
+ background-color: var(--ax-bg-strong);
1751
+ }
1752
+
1752
1753
  .aksel-button[data-variant="primary"]:is(:disabled, .aksel-button--disabled) {
1753
1754
  background-color: var(--ax-bg-strong);
1754
1755
  }
@@ -1772,6 +1773,15 @@
1772
1773
  background-color: var(--ax-bg-moderate-pressedA);
1773
1774
  }
1774
1775
 
1776
+ .aksel-button[data-variant="secondary"]:-webkit-any(:disabled, .aksel-button--disabled) {
1777
+ color: var(--ax-text-subtle);
1778
+ background-color: rgba(0, 0, 0, 0);
1779
+ }
1780
+
1781
+ .aksel-button[data-variant="secondary"]:-webkit-any(:disabled, .aksel-button--disabled)[data-color="neutral"] {
1782
+ color: var(--ax-text-default);
1783
+ }
1784
+
1775
1785
  .aksel-button[data-variant="secondary"]:is(:disabled, .aksel-button--disabled) {
1776
1786
  color: var(--ax-text-subtle);
1777
1787
  background-color: rgba(0, 0, 0, 0);
@@ -1803,6 +1813,15 @@
1803
1813
  color: var(--ax-text-contrast);
1804
1814
  }
1805
1815
 
1816
+ .aksel-button[data-variant="tertiary"]:-webkit-any(:disabled, .aksel-button--disabled) {
1817
+ color: var(--ax-text-subtle);
1818
+ background-color: rgba(0, 0, 0, 0);
1819
+ }
1820
+
1821
+ .aksel-button[data-variant="tertiary"]:-webkit-any(:disabled, .aksel-button--disabled)[data-color="neutral"] {
1822
+ color: var(--ax-text-default);
1823
+ }
1824
+
1806
1825
  .aksel-button[data-variant="tertiary"]:is(:disabled, .aksel-button--disabled) {
1807
1826
  color: var(--ax-text-subtle);
1808
1827
  background-color: rgba(0, 0, 0, 0);
@@ -1924,7 +1943,14 @@
1924
1943
  border-color: highlight;
1925
1944
  }
1926
1945
 
1927
- .aksel-button:hover:not(:disabled), .aksel-button[data-variant="primary"]:where(a):hover:not(:disabled) {
1946
+ .aksel-button:hover:not(:disabled) {
1947
+ color: highlight;
1948
+ box-shadow: none;
1949
+ background-color: highlighttext;
1950
+ border-color: highlight;
1951
+ }
1952
+
1953
+ .aksel-button[data-variant="primary"]:where(a):hover:not(:disabled) {
1928
1954
  color: highlight;
1929
1955
  box-shadow: none;
1930
1956
  background-color: highlighttext;
@@ -2043,10 +2069,14 @@
2043
2069
  -webkit-backdrop-filter: blur(8px);
2044
2070
  backdrop-filter: blur(8px);
2045
2071
  border-radius: var(--ax-radius-12);
2046
- animation: akselDropzoneDragoverAnimation var(--__axc-dropzone-animation-length-short) var(--__axc-dropzone-animation-ease-out);
2072
+ animation: akselDropzoneDragoverAnimation var(--__axc-dropzone-animation-length-short)
2073
+ var(--__axc-dropzone-animation-ease-out);
2047
2074
  margin: -1px;
2048
2075
  position: absolute;
2049
- inset: 0;
2076
+ top: 0;
2077
+ bottom: 0;
2078
+ left: 0;
2079
+ right: 0;
2050
2080
  }
2051
2081
 
2052
2082
  @keyframes akselDropzoneDragoverAnimation {
@@ -2082,7 +2112,8 @@
2082
2112
  top: var(--ax-space-16);
2083
2113
  z-index: 1;
2084
2114
  pointer-events: none;
2085
- transition: top var(--__axc-dropzone-animation-length-long) var(--__axc-dropzone-animation-over-under), transform var(--__axc-dropzone-animation-length-long) var(--__axc-dropzone-animation-over-under);
2115
+ transition: top var(--__axc-dropzone-animation-length-long) var(--__axc-dropzone-animation-over-under),
2116
+ transform var(--__axc-dropzone-animation-length-long) var(--__axc-dropzone-animation-over-under);
2086
2117
  display: grid;
2087
2118
  position: absolute;
2088
2119
  }
@@ -2091,7 +2122,8 @@
2091
2122
  padding: var(--__axc-dropzone-icon-padding);
2092
2123
  border-radius: var(--ax-radius-full);
2093
2124
  background-color: var(--ax-bg-neutral-moderateA);
2094
- transition: background-color .3s var(--__axc-dropzone-animation-ease-out), font-size .3s var(--__axc-dropzone-animation-ease-out);
2125
+ transition: background-color .3s var(--__axc-dropzone-animation-ease-out),
2126
+ font-size .3s var(--__axc-dropzone-animation-ease-out);
2095
2127
  font-size: 1.5rem;
2096
2128
  display: grid;
2097
2129
  }
@@ -2124,7 +2156,19 @@
2124
2156
  display: flex;
2125
2157
  }
2126
2158
 
2127
- .aksel-file-upload :is(ul, li), li.aksel-file-item {
2159
+ li.aksel-file-item {
2160
+ margin: 0;
2161
+ padding: 0;
2162
+ list-style: none;
2163
+ }
2164
+
2165
+ .aksel-file-upload :-webkit-any(ul, li) {
2166
+ margin: 0;
2167
+ padding: 0;
2168
+ list-style: none;
2169
+ }
2170
+
2171
+ .aksel-file-upload :is(ul, li) {
2128
2172
  margin: 0;
2129
2173
  padding: 0;
2130
2174
  list-style: none;
@@ -2151,14 +2195,11 @@
2151
2195
  .aksel-file-item__link {
2152
2196
  align-items: flex-start;
2153
2197
  gap: var(--ax-space-2);
2198
+ width: -webkit-fit-content;
2154
2199
  width: fit-content;
2155
2200
  display: flex;
2156
2201
  }
2157
2202
 
2158
- .aksel-file-item__link:is(a) {
2159
- color: var(--ax-text-subtle);
2160
- }
2161
-
2162
2203
  .aksel-file-item--error > .aksel-file-item__inner {
2163
2204
  outline: 2px solid var(--ax-border-danger-strong);
2164
2205
  }
@@ -2323,14 +2364,27 @@
2323
2364
  border-color: orange;
2324
2365
  border-left-style: solid;
2325
2366
  border-left-width: 8px;
2326
- border-start-start-radius: calc(var(--ax-radius-8) - 1px);
2327
- border-end-start-radius: calc(var(--ax-radius-8) - 1px);
2328
2367
  height: 100%;
2329
2368
  position: absolute;
2330
2369
  top: 0;
2331
2370
  left: 0;
2332
2371
  }
2333
2372
 
2373
+ .aksel-confirmation-panel__inner:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
2374
+ border-top-left-radius: calc(var(--ax-radius-8) - 1px);
2375
+ border-bottom-left-radius: calc(var(--ax-radius-8) - 1px);
2376
+ }
2377
+
2378
+ .aksel-confirmation-panel__inner:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
2379
+ border-top-right-radius: calc(var(--ax-radius-8) - 1px);
2380
+ border-bottom-right-radius: calc(var(--ax-radius-8) - 1px);
2381
+ }
2382
+
2383
+ .aksel-confirmation-panel__inner:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
2384
+ border-top-right-radius: calc(var(--ax-radius-8) - 1px);
2385
+ border-bottom-right-radius: calc(var(--ax-radius-8) - 1px);
2386
+ }
2387
+
2334
2388
  .aksel-confirmation-panel--checked .aksel-confirmation-panel__inner:before {
2335
2389
  border-color: green;
2336
2390
  }
@@ -2344,6 +2398,7 @@
2344
2398
  --__axc-radio-checkbox-marker-size: 1.5rem;
2345
2399
  --__axc-radio-checkbox-marker-target: 2.75rem;
2346
2400
  gap: var(--ax-space-2) 0;
2401
+ width: -webkit-fit-content;
2347
2402
  width: fit-content;
2348
2403
  padding: var(--ax-space-12) 0;
2349
2404
  grid-template-columns: auto 1fr;
@@ -2390,6 +2445,7 @@
2390
2445
 
2391
2446
  .aksel-checkbox__input, .aksel-radio__input {
2392
2447
  --__axc-radio-checkbox-marker-border: 2px;
2448
+ -webkit-appearance: none;
2393
2449
  appearance: none;
2394
2450
  cursor: pointer;
2395
2451
  width: var(--__axc-radio-checkbox-marker-size);
@@ -2403,7 +2459,11 @@
2403
2459
 
2404
2460
  .aksel-checkbox__input:before, .aksel-radio__input:before {
2405
2461
  content: "";
2406
- inset: calc(-1 * ( var(--__axc-radio-checkbox-marker-border) + (var(--__axc-radio-checkbox-marker-target) - var(--__axc-radio-checkbox-marker-size)) / 2 ));
2462
+ inset: calc(-1 *
2463
+ (
2464
+ var(--__axc-radio-checkbox-marker-border) +
2465
+ (var(--__axc-radio-checkbox-marker-target) - var(--__axc-radio-checkbox-marker-size)) / 2
2466
+ ));
2407
2467
  position: absolute;
2408
2468
  }
2409
2469
 
@@ -2477,11 +2537,19 @@
2477
2537
  opacity: var(--ax-opacity-disabled);
2478
2538
  }
2479
2539
 
2480
- .aksel-checkbox--disabled :where(.aksel-checkbox__input, .aksel-checkbox__label), .aksel-radio--disabled > :where(.aksel-radio__input, .aksel-radio__label) {
2540
+ .aksel-checkbox--disabled :where(.aksel-checkbox__input, .aksel-checkbox__label) {
2541
+ cursor: not-allowed;
2542
+ }
2543
+
2544
+ .aksel-radio--disabled > :where(.aksel-radio__input, .aksel-radio__label) {
2481
2545
  cursor: not-allowed;
2482
2546
  }
2483
2547
 
2484
- .aksel-checkbox--readonly :where(.aksel-checkbox__input, .aksel-checkbox__label), .aksel-radio--readonly > :where(.aksel-radio__input, .aksel-radio__label) {
2548
+ .aksel-checkbox--readonly :where(.aksel-checkbox__input, .aksel-checkbox__label) {
2549
+ cursor: default;
2550
+ }
2551
+
2552
+ .aksel-radio--readonly > :where(.aksel-radio__input, .aksel-radio__label) {
2485
2553
  cursor: default;
2486
2554
  }
2487
2555
 
@@ -2505,14 +2573,20 @@
2505
2573
  .aksel-radio--readonly > .aksel-radio__input:checked {
2506
2574
  --__axc-radio-checkbox-marker-border: 0px;
2507
2575
  background-color: var(--ax-bg-neutral-strong);
2508
- box-shadow: inset 0 0 0 2px var(--ax-border-neutral-subtle), inset 0 0 0 8px var(--ax-bg-neutral-moderate);
2576
+ box-shadow: inset 0 0 0 2px var(--ax-border-neutral-subtle),
2577
+ inset 0 0 0 8px var(--ax-bg-neutral-moderate);
2509
2578
  }
2510
2579
 
2511
2580
  .aksel-radio--small.aksel-radio--readonly > .aksel-radio__input:checked {
2512
- box-shadow: inset 0 0 0 2px var(--ax-border-neutral-subtle), inset 0 0 0 7px var(--ax-bg-neutral-moderate);
2581
+ box-shadow: inset 0 0 0 2px var(--ax-border-neutral-subtle),
2582
+ inset 0 0 0 7px var(--ax-bg-neutral-moderate);
2513
2583
  }
2514
2584
 
2515
2585
  @media screen and (forced-colors: active) {
2586
+ :-webkit-any(.aksel-checkbox, .aksel-checkbox--readonly) .aksel-checkbox__input:indeterminate:after {
2587
+ background-color: fieldtext;
2588
+ }
2589
+
2516
2590
  :is(.aksel-checkbox, .aksel-checkbox--readonly) .aksel-checkbox__input:indeterminate:after {
2517
2591
  background-color: fieldtext;
2518
2592
  }
@@ -2554,7 +2628,15 @@
2554
2628
  background-color: graytext;
2555
2629
  }
2556
2630
 
2557
- .aksel-checkbox--disabled :is(.aksel-checkbox__label, .aksel-checkbox__description, .aksel-checkbox__input:checked + .aksel-checkbox__icon), .aksel-radio--disabled :is(.aksel-radio__label, .aksel-radio__description) {
2631
+ .aksel-checkbox--disabled :is(.aksel-checkbox__label, .aksel-checkbox__description, .aksel-checkbox__input:checked + .aksel-checkbox__icon) {
2632
+ color: graytext;
2633
+ }
2634
+
2635
+ .aksel-radio--disabled :-webkit-any(.aksel-radio__label, .aksel-radio__description) {
2636
+ color: graytext;
2637
+ }
2638
+
2639
+ .aksel-radio--disabled :is(.aksel-radio__label, .aksel-radio__description) {
2558
2640
  color: graytext;
2559
2641
  }
2560
2642
  }
@@ -2574,7 +2656,7 @@
2574
2656
  }
2575
2657
 
2576
2658
  .aksel-checkbox__icon {
2577
- height: calc(var(--__axc-radio-checkbox-marker-size) - 4px);
2659
+ height: calc(var(--__axc-radio-checkbox-marker-size) - 4px);
2578
2660
  top: 2px;
2579
2661
  bottom: 2px;
2580
2662
  }
@@ -2586,6 +2668,7 @@
2586
2668
  }
2587
2669
 
2588
2670
  .aksel-select__input {
2671
+ -webkit-appearance: none;
2589
2672
  appearance: none;
2590
2673
  background-color: var(--ax-bg-input);
2591
2674
  border-radius: var(--ax-radius-8);
@@ -2644,10 +2727,21 @@
2644
2727
 
2645
2728
  .aksel-form-field--small .aksel-select__input {
2646
2729
  min-height: 2rem;
2647
- padding-block: 0;
2730
+ padding-top: 0;
2731
+ padding-bottom: 0;
2732
+ }
2733
+
2734
+ .aksel-select--error > * select {
2735
+ box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
2736
+ border-color: var(--ax-border-danger-strong);
2737
+ }
2738
+
2739
+ .aksel-select--error > * select:hover {
2740
+ box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
2741
+ border-color: var(--ax-border-danger-strong);
2648
2742
  }
2649
2743
 
2650
- .aksel-select--error > * select, .aksel-select--error > * select:hover, .aksel-select--error > * select:focus {
2744
+ .aksel-select--error > * select:focus {
2651
2745
  box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
2652
2746
  border-color: var(--ax-border-danger-strong);
2653
2747
  }
@@ -2678,6 +2772,12 @@
2678
2772
  }
2679
2773
 
2680
2774
  @media (forced-colors: active) {
2775
+ .aksel-select--readonly .aksel-select__input:-webkit-any(:hover, :focus) {
2776
+ color: buttontext;
2777
+ background-color: buttonface;
2778
+ border-color: buttontext;
2779
+ }
2780
+
2681
2781
  .aksel-select--readonly .aksel-select__input:is(:hover, :focus) {
2682
2782
  color: buttontext;
2683
2783
  background-color: buttonface;
@@ -2690,6 +2790,7 @@
2690
2790
  }
2691
2791
 
2692
2792
  .aksel-switch {
2793
+ width: -webkit-fit-content;
2693
2794
  width: fit-content;
2694
2795
  min-height: 3rem;
2695
2796
  position: relative;
@@ -2868,12 +2969,18 @@
2868
2969
  width: auto;
2869
2970
  }
2870
2971
 
2871
- .aksel-switch--right .aksel-switch__input, .aksel-switch--right .aksel-switch__track {
2972
+ .aksel-switch--right .aksel-switch__input {
2973
+ left: auto;
2974
+ right: 0;
2975
+ }
2976
+
2977
+ .aksel-switch--right .aksel-switch__track {
2872
2978
  left: auto;
2873
2979
  right: 0;
2874
2980
  }
2875
2981
 
2876
2982
  .aksel-switch__input:disabled {
2983
+ -webkit-appearance: none;
2877
2984
  appearance: none;
2878
2985
  }
2879
2986
 
@@ -2885,12 +2992,31 @@
2885
2992
  cursor: not-allowed;
2886
2993
  }
2887
2994
 
2888
- .aksel-switch--readonly > .aksel-switch__track, .aksel-switch--readonly > .aksel-switch__input:hover ~ .aksel-switch__track, .aksel-switch--readonly > .aksel-switch__input:checked ~ .aksel-switch__track, .aksel-switch--readonly > .aksel-switch__input:checked:hover ~ .aksel-switch__track {
2995
+ .aksel-switch--readonly > .aksel-switch__track {
2996
+ background-color: var(--ax-bg-neutral-moderate);
2997
+ border-color: var(--ax-border-neutral-subtleA);
2998
+ }
2999
+
3000
+ .aksel-switch--readonly > .aksel-switch__input:hover ~ .aksel-switch__track {
3001
+ background-color: var(--ax-bg-neutral-moderate);
3002
+ border-color: var(--ax-border-neutral-subtleA);
3003
+ }
3004
+
3005
+ .aksel-switch--readonly > .aksel-switch__input:checked ~ .aksel-switch__track {
3006
+ background-color: var(--ax-bg-neutral-moderate);
3007
+ border-color: var(--ax-border-neutral-subtleA);
3008
+ }
3009
+
3010
+ .aksel-switch--readonly > .aksel-switch__input:checked:hover ~ .aksel-switch__track {
2889
3011
  background-color: var(--ax-bg-neutral-moderate);
2890
3012
  border-color: var(--ax-border-neutral-subtleA);
2891
3013
  }
2892
3014
 
2893
- .aksel-switch--readonly > .aksel-switch__label-wrapper, .aksel-switch--readonly > .aksel-switch__input {
3015
+ .aksel-switch--readonly > .aksel-switch__label-wrapper {
3016
+ cursor: default;
3017
+ }
3018
+
3019
+ .aksel-switch--readonly > .aksel-switch__input {
2894
3020
  cursor: default;
2895
3021
  }
2896
3022
 
@@ -2952,6 +3078,7 @@
2952
3078
  }
2953
3079
 
2954
3080
  .aksel-text-field__input {
3081
+ -webkit-appearance: none;
2955
3082
  appearance: none;
2956
3083
  padding: var(--ax-space-8);
2957
3084
  background: var(--ax-bg-input);
@@ -3028,6 +3155,7 @@
3028
3155
 
3029
3156
  .aksel-textarea__input {
3030
3157
  height: var(--__axc-textarea-height);
3158
+ -webkit-appearance: none;
3031
3159
  appearance: none;
3032
3160
  padding: var(--ax-space-8);
3033
3161
  background-color: var(--ax-bg-input);
@@ -3090,17 +3218,50 @@
3090
3218
 
3091
3219
  .aksel-textarea--resize-both .aksel-textarea__input {
3092
3220
  resize: both;
3093
- border-end-end-radius: 0;
3221
+ }
3222
+
3223
+ .aksel-textarea--resize-both .aksel-textarea__input:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
3224
+ border-bottom-right-radius: 0;
3225
+ }
3226
+
3227
+ .aksel-textarea--resize-both .aksel-textarea__input:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
3228
+ border-bottom-left-radius: 0;
3229
+ }
3230
+
3231
+ .aksel-textarea--resize-both .aksel-textarea__input:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
3232
+ border-bottom-left-radius: 0;
3094
3233
  }
3095
3234
 
3096
3235
  .aksel-textarea--resize-horizontal .aksel-textarea__input {
3097
3236
  resize: horizontal;
3098
- border-end-end-radius: 0;
3237
+ }
3238
+
3239
+ .aksel-textarea--resize-horizontal .aksel-textarea__input:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
3240
+ border-bottom-right-radius: 0;
3241
+ }
3242
+
3243
+ .aksel-textarea--resize-horizontal .aksel-textarea__input:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
3244
+ border-bottom-left-radius: 0;
3245
+ }
3246
+
3247
+ .aksel-textarea--resize-horizontal .aksel-textarea__input:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
3248
+ border-bottom-left-radius: 0;
3099
3249
  }
3100
3250
 
3101
3251
  .aksel-textarea--resize-vertical .aksel-textarea__input {
3102
3252
  resize: vertical;
3103
- border-end-end-radius: 0;
3253
+ }
3254
+
3255
+ .aksel-textarea--resize-vertical .aksel-textarea__input:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
3256
+ border-bottom-right-radius: 0;
3257
+ }
3258
+
3259
+ .aksel-textarea--resize-vertical .aksel-textarea__input:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
3260
+ border-bottom-left-radius: 0;
3261
+ }
3262
+
3263
+ .aksel-textarea--resize-vertical .aksel-textarea__input:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
3264
+ border-bottom-left-radius: 0;
3104
3265
  }
3105
3266
 
3106
3267
  .aksel-textarea--autoscrollbar, .aksel-textarea--autoscrollbar .aksel-textarea__wrapper {
@@ -3143,6 +3304,7 @@
3143
3304
  }
3144
3305
 
3145
3306
  .aksel-search--with-size .aksel-search__wrapper {
3307
+ width: -webkit-fit-content;
3146
3308
  width: fit-content;
3147
3309
  }
3148
3310
 
@@ -3165,7 +3327,13 @@
3165
3327
  outline: none;
3166
3328
  }
3167
3329
 
3168
- .aksel-search__input.aksel-search__input--primary, .aksel-search__input.aksel-search__input--secondary {
3330
+ .aksel-search__input.aksel-search__input--primary {
3331
+ border-right: none;
3332
+ border-top-right-radius: 0;
3333
+ border-bottom-right-radius: 0;
3334
+ }
3335
+
3336
+ .aksel-search__input.aksel-search__input--secondary {
3169
3337
  border-right: none;
3170
3338
  border-top-right-radius: 0;
3171
3339
  border-bottom-right-radius: 0;
@@ -3233,20 +3401,29 @@
3233
3401
  --__axc-button-border-color: var(--ax-border-strong);
3234
3402
  }
3235
3403
 
3404
+ .aksel-search:not(.aksel-search--error, .aksel-search--disabled) .aksel-search__wrapper:has(.aksel-search__input:-webkit-any(:hover, :focus-visible)) .aksel-search__button-search[data-variant="secondary"]:not(:hover, :active) {
3405
+ --__axc-button-border-color: var(--ax-border-strong);
3406
+ }
3407
+
3236
3408
  .aksel-search:not(.aksel-search--error, .aksel-search--disabled) .aksel-search__wrapper:has(.aksel-search__input:is(:hover, :focus-visible)) .aksel-search__button-search[data-variant="secondary"]:not(:hover, :active) {
3237
3409
  --__axc-button-border-color: var(--ax-border-strong);
3238
3410
  }
3239
3411
 
3240
3412
  .aksel-search--error .aksel-search__input:not(:disabled) {
3241
3413
  border-color: var(--ax-border-danger-strong);
3242
- box-shadow: inset -2px 0 0 0 var(--ax-border-danger-strong), inset 0 0 0 1px var(--ax-border-danger-strong);
3414
+ box-shadow: inset -2px 0 0 0 var(--ax-border-danger-strong),
3415
+ inset 0 0 0 1px var(--ax-border-danger-strong);
3243
3416
  }
3244
3417
 
3245
3418
  .aksel-search--error .aksel-search__input:not(:disabled).aksel-search__input--simple {
3246
3419
  box-shadow: inset 0 0 0 1px var(--ax-border-danger-strong);
3247
3420
  }
3248
3421
 
3249
- .aksel-search__input:focus-visible, .aksel-search__button-search:focus-visible {
3422
+ .aksel-search__input:focus-visible {
3423
+ z-index: 1;
3424
+ }
3425
+
3426
+ .aksel-search__button-search:focus-visible {
3250
3427
  z-index: 1;
3251
3428
  }
3252
3429
 
@@ -3269,6 +3446,10 @@
3269
3446
  position: relative;
3270
3447
  }
3271
3448
 
3449
+ .aksel-form-field:not(:-webkit-any(.aksel-combobox--disabled, .aksel-combobox--readonly)) .aksel-combobox__wrapper:hover {
3450
+ border-color: var(--ax-border-strong);
3451
+ }
3452
+
3272
3453
  .aksel-form-field:not(:is(.aksel-combobox--disabled, .aksel-combobox--readonly)) .aksel-combobox__wrapper:hover {
3273
3454
  border-color: var(--ax-border-strong);
3274
3455
  }
@@ -3293,7 +3474,11 @@
3293
3474
  cursor: not-allowed;
3294
3475
  }
3295
3476
 
3296
- .aksel-combobox--disabled .aksel-combobox__selected-options, .aksel-combobox--disabled .aksel-combobox--readonly {
3477
+ .aksel-combobox--disabled .aksel-combobox__selected-options {
3478
+ pointer-events: none;
3479
+ }
3480
+
3481
+ .aksel-combobox--disabled .aksel-combobox--readonly {
3297
3482
  pointer-events: none;
3298
3483
  }
3299
3484
 
@@ -3314,7 +3499,11 @@
3314
3499
  overflow: clip;
3315
3500
  }
3316
3501
 
3317
- .aksel-combobox--readonly .aksel-text-field__input, .aksel-combobox--readonly .aksel-combobox__input {
3502
+ .aksel-combobox--readonly .aksel-text-field__input {
3503
+ background-color: var(--ax-bg-neutral-moderate);
3504
+ }
3505
+
3506
+ .aksel-combobox--readonly .aksel-combobox__input {
3318
3507
  background-color: var(--ax-bg-neutral-moderate);
3319
3508
  }
3320
3509
 
@@ -3341,7 +3530,7 @@
3341
3530
 
3342
3531
  .aksel-combobox__wrapper-inner.aksel-text-field__input {
3343
3532
  width: 100%;
3344
- padding-block: calc(var(--__axc-combobox-wrapper-inner-padding) - var(--__axc-combobox-border-width));
3533
+ padding-block: calc(var(--__axc-combobox-wrapper-inner-padding) - var(--__axc-combobox-border-width));
3345
3534
  padding-inline: var(--__axc-combobox-wrapper-inner-padding);
3346
3535
  flex-direction: row;
3347
3536
  justify-content: space-between;
@@ -3579,7 +3768,7 @@
3579
3768
  border-radius: 0;
3580
3769
  justify-content: flex-start;
3581
3770
  gap: .25rem;
3582
- margin-block-start: calc(var(--ax-space-4) * -1);
3771
+ margin-top: calc(var(--ax-space-4) * -1);
3583
3772
  }
3584
3773
 
3585
3774
  .aksel-combobox__list-item--new-option svg {
@@ -3592,13 +3781,13 @@
3592
3781
  }
3593
3782
 
3594
3783
  .aksel-combobox__list-item--new-option--focus {
3595
- border-radius: calc(var(--ax-radius-8) - 1px) calc(var(--ax-radius-8) - 1px) 0 0;
3784
+ border-radius: calc(var(--ax-radius-8) - 1px) calc(var(--ax-radius-8) - 1px) 0 0;
3596
3785
  outline: 2px solid var(--ax-border-focus);
3597
3786
  outline-offset: -2px;
3598
3787
  }
3599
3788
 
3600
3789
  .aksel-combobox__list-item--new-option--focus:only-child {
3601
- border-radius: calc(var(--ax-radius-8) - 1px);
3790
+ border-radius: calc(var(--ax-radius-8) - 1px);
3602
3791
  }
3603
3792
 
3604
3793
  @media (max-width: 479px) {
@@ -3607,6 +3796,7 @@
3607
3796
  }
3608
3797
 
3609
3798
  .aksel-combobox__input {
3799
+ min-width: -webkit-min-content;
3610
3800
  min-width: min-content;
3611
3801
  padding: .75rem 0;
3612
3802
  }
@@ -3806,8 +3996,9 @@
3806
3996
  opacity: .001;
3807
3997
  grid-template-rows: 0fr;
3808
3998
  margin-top: -2px;
3809
- padding-block: 0;
3810
- transition-property: margin-top, opacity, visibility, padding-block-start, grid-template-rows;
3999
+ padding-top: 0;
4000
+ padding-bottom: 0;
4001
+ transition-property: margin-top, opacity, visibility, padding-top, grid-template-rows;
3811
4002
  transition-duration: .3s;
3812
4003
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
3813
4004
  display: grid;
@@ -3864,7 +4055,11 @@
3864
4055
  background-color: var(--ax-bg-moderate-hoverA);
3865
4056
  }
3866
4057
 
3867
- .aksel-accordion__header:hover:before, .aksel-accordion__header:hover:after {
4058
+ .aksel-accordion__header:hover:before {
4059
+ display: none;
4060
+ }
4061
+
4062
+ .aksel-accordion__header:hover:after {
3868
4063
  display: none;
3869
4064
  }
3870
4065
 
@@ -3887,7 +4082,11 @@
3887
4082
  z-index: 1;
3888
4083
  }
3889
4084
 
3890
- .aksel-accordion__header:focus-visible:before, .aksel-accordion__header:focus-visible:after {
4085
+ .aksel-accordion__header:focus-visible:before {
4086
+ display: none;
4087
+ }
4088
+
4089
+ .aksel-accordion__header:focus-visible:after {
3891
4090
  display: none;
3892
4091
  }
3893
4092
 
@@ -3942,7 +4141,7 @@
3942
4141
 
3943
4142
  .aksel-accordion--indent > .aksel-accordion__item .aksel-accordion__content-inner {
3944
4143
  padding-block: var(--ax-space-8);
3945
- padding-inline: calc(var(--ax-space-20) + 2px) var(--ax-space-20);
4144
+ padding-inline: calc(var(--ax-space-20) + 2px) var(--ax-space-20);
3946
4145
  }
3947
4146
 
3948
4147
  @media (forced-colors: active) {
@@ -3961,7 +4160,8 @@
3961
4160
  opacity: 0;
3962
4161
  border-color: rgba(0, 0, 0, 0);
3963
4162
  grid-template-rows: 0fr;
3964
- margin-block: 0;
4163
+ margin-top: 0;
4164
+ margin-bottom: 0;
3965
4165
  transition-property: visibility, opacity, grid-template-rows, margin, min-height;
3966
4166
  transition-duration: .25s;
3967
4167
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
@@ -3971,7 +4171,8 @@
3971
4171
 
3972
4172
  .aksel-accordion__item > .aksel-accordion__content .aksel-accordion__content-inner {
3973
4173
  min-height: 0;
3974
- padding-block: 0;
4174
+ padding-top: 0;
4175
+ padding-bottom: 0;
3975
4176
  }
3976
4177
 
3977
4178
  .aksel-accordion__item[data-expanded="true"] > .aksel-accordion__content {
@@ -3980,10 +4181,11 @@
3980
4181
  border-color: var(--ax-border-neutral-subtleA);
3981
4182
  opacity: 1;
3982
4183
  grid-template-rows: 1fr;
3983
- margin-block-end: var(--ax-space-24);
4184
+ margin-bottom: var(--ax-space-24);
3984
4185
  }
3985
4186
 
3986
4187
  .aksel-accordion__item[data-expanded="true"] > .aksel-accordion__content .aksel-accordion__content-inner {
4188
+ min-height: -webkit-fit-content;
3987
4189
  min-height: fit-content;
3988
4190
  }
3989
4191
 
@@ -4036,7 +4238,7 @@
4036
4238
 
4037
4239
  .aksel-alert--small > .aksel-alert__icon {
4038
4240
  height: var(--ax-font-line-height-large);
4039
- margin-block-start: 0;
4241
+ margin-top: 0;
4040
4242
  }
4041
4243
 
4042
4244
  .aksel-alert--full-width {
@@ -4057,16 +4259,24 @@
4057
4259
  display: flex;
4058
4260
  }
4059
4261
 
4060
- .aksel-alert--close-button > .aksel-alert__wrapper, .aksel-alert--close-button > .aksel-alert__icon {
4061
- margin-block-start: var(--ax-space-2);
4262
+ .aksel-alert--close-button > .aksel-alert__wrapper {
4263
+ margin-top: var(--ax-space-2);
4264
+ }
4265
+
4266
+ .aksel-alert--close-button > .aksel-alert__icon {
4267
+ margin-top: var(--ax-space-2);
4062
4268
  }
4063
4269
 
4064
4270
  .aksel-alert--close-button.aksel-alert--small {
4065
4271
  align-items: flex-start;
4066
4272
  }
4067
4273
 
4068
- .aksel-alert--close-button.aksel-alert--small > .aksel-alert__wrapper, .aksel-alert--close-button.aksel-alert--small > .aksel-alert__icon {
4069
- margin-block-start: var(--ax-space-4);
4274
+ .aksel-alert--close-button.aksel-alert--small > .aksel-alert__wrapper {
4275
+ margin-top: var(--ax-space-4);
4276
+ }
4277
+
4278
+ .aksel-alert--close-button.aksel-alert--small > .aksel-alert__icon {
4279
+ margin-top: var(--ax-space-4);
4070
4280
  }
4071
4281
 
4072
4282
  .aksel-base-alert {
@@ -4077,6 +4287,7 @@
4077
4287
  --__axc-base-alert-header-icon-margin-block-start: var(--ax-space-8);
4078
4288
  --__axc-base-alert-header-close-button-margin-block-start: var(--ax-space-4);
4079
4289
  --__axc-global-alert-alignment: max(var(--__axc-base-alert-pi), calc((100% - var(--__axc-base-alert-header-max-width)) / 2));
4290
+ height: -webkit-fit-content;
4080
4291
  height: fit-content;
4081
4292
  display: grid;
4082
4293
  overflow: clip;
@@ -4164,7 +4375,7 @@
4164
4375
  .aksel-base-alert__close-button {
4165
4376
  margin-left: auto;
4166
4377
  z-index: 1;
4167
- margin-block-start: var(--__axc-base-alert-header-close-button-margin-block-start);
4378
+ margin-top: var(--__axc-base-alert-header-close-button-margin-block-start);
4168
4379
  }
4169
4380
 
4170
4381
  .aksel-base-alert__close-button:focus-visible {
@@ -4182,17 +4393,32 @@
4182
4393
  display: flex;
4183
4394
  }
4184
4395
 
4185
- .aksel-chat .aksel-chat__bubble, .aksel-chat .aksel-chat__avatar {
4396
+ .aksel-chat .aksel-chat__bubble {
4397
+ background-color: var(--ax-bg-moderateA);
4398
+ border: 1px solid var(--ax-border-subtleA);
4399
+ }
4400
+
4401
+ .aksel-chat .aksel-chat__avatar {
4186
4402
  background-color: var(--ax-bg-moderateA);
4187
4403
  border: 1px solid var(--ax-border-subtleA);
4188
4404
  }
4189
4405
 
4190
- .aksel-chat[data-variant="subtle"] .aksel-chat__bubble, .aksel-chat[data-variant="subtle"] .aksel-chat__avatar {
4406
+ .aksel-chat[data-variant="subtle"] .aksel-chat__bubble {
4191
4407
  background-color: var(--ax-bg-softA);
4192
4408
  border: 1px solid var(--ax-border-subtleA);
4193
4409
  }
4194
4410
 
4195
- .aksel-chat[data-color="neutral"][data-variant="subtle"] .aksel-chat__bubble, .aksel-chat[data-color="neutral"][data-variant="subtle"] .aksel-chat__avatar {
4411
+ .aksel-chat[data-variant="subtle"] .aksel-chat__avatar {
4412
+ background-color: var(--ax-bg-softA);
4413
+ border: 1px solid var(--ax-border-subtleA);
4414
+ }
4415
+
4416
+ .aksel-chat[data-color="neutral"][data-variant="subtle"] .aksel-chat__bubble {
4417
+ background-color: var(--ax-bg-raised);
4418
+ border: 1px solid var(--ax-border-neutral-subtleA);
4419
+ }
4420
+
4421
+ .aksel-chat[data-color="neutral"][data-variant="subtle"] .aksel-chat__avatar {
4196
4422
  background-color: var(--ax-bg-raised);
4197
4423
  border: 1px solid var(--ax-border-neutral-subtleA);
4198
4424
  }
@@ -4244,6 +4470,7 @@
4244
4470
  border-radius: var(--ax-radius-12);
4245
4471
  border-bottom-left-radius: var(--ax-radius-2);
4246
4472
  flex-direction: column;
4473
+ width: -webkit-fit-content;
4247
4474
  width: fit-content;
4248
4475
  display: flex;
4249
4476
  }
@@ -4322,7 +4549,12 @@
4322
4549
  color: var(--ax-text-neutral);
4323
4550
  }
4324
4551
 
4325
- .aksel-date .rdp-month, .aksel-date.rdp-month {
4552
+ .aksel-date .rdp-month {
4553
+ gap: var(--ax-space-20);
4554
+ display: grid;
4555
+ }
4556
+
4557
+ .aksel-date.rdp-month {
4326
4558
  gap: var(--ax-space-20);
4327
4559
  display: grid;
4328
4560
  }
@@ -4364,7 +4596,13 @@
4364
4596
  position: relative;
4365
4597
  }
4366
4598
 
4367
- .aksel-date .rdp-day_selected, .aksel-date .aksel-monthpicker__month--selected {
4599
+ .aksel-date .rdp-day_selected {
4600
+ color: var(--ax-text-contrast);
4601
+ background: var(--ax-bg-strong-pressed);
4602
+ cursor: pointer;
4603
+ }
4604
+
4605
+ .aksel-date .aksel-monthpicker__month--selected {
4368
4606
  color: var(--ax-text-contrast);
4369
4607
  background: var(--ax-bg-strong-pressed);
4370
4608
  cursor: pointer;
@@ -4377,7 +4615,12 @@
4377
4615
  text-decoration: line-through;
4378
4616
  }
4379
4617
 
4380
- .aksel-date .rdp-button:where(:not(.rdp-day_selected, [disabled])):hover, .aksel-date .aksel-date__month-button:where(:not(.rdp-day_selected, [disabled])):hover {
4618
+ .aksel-date .rdp-button:where(:not(.rdp-day_selected, [disabled])):hover {
4619
+ background: var(--ax-bg-moderate-hoverA);
4620
+ cursor: pointer;
4621
+ }
4622
+
4623
+ .aksel-date .aksel-date__month-button:where(:not(.rdp-day_selected, [disabled])):hover {
4381
4624
  background: var(--ax-bg-moderate-hoverA);
4382
4625
  cursor: pointer;
4383
4626
  }
@@ -4399,7 +4642,11 @@
4399
4642
  transform: translateX(-50%);
4400
4643
  }
4401
4644
 
4402
- :is(.aksel-date .rdp-day_today.rdp-day_selected:not(.rdp-day_range_middle), .aksel-date .rdp-day_today:active):before {
4645
+ .aksel-date .rdp-day_today.rdp-day_selected:not(.rdp-day_range_middle):before {
4646
+ background-color: var(--ax-text-contrast);
4647
+ }
4648
+
4649
+ .aksel-date .rdp-day_today:active:before {
4403
4650
  background-color: var(--ax-text-contrast);
4404
4651
  }
4405
4652
 
@@ -4408,13 +4655,18 @@
4408
4655
  pointer-events: none;
4409
4656
  }
4410
4657
 
4411
- .aksel-date__modal .aksel-date, .aksel-date__modal-body > .aksel-date {
4658
+ .aksel-date__modal .aksel-date {
4659
+ padding: 0;
4660
+ }
4661
+
4662
+ .aksel-date__modal-body > .aksel-date {
4412
4663
  padding: 0;
4413
4664
  }
4414
4665
 
4415
4666
  @media (max-width: 360px) {
4416
4667
  .aksel-date__modal-body > .aksel-date {
4417
- margin-inline: -12px;
4668
+ margin-left: -12px;
4669
+ margin-right: -12px;
4418
4670
  }
4419
4671
  }
4420
4672
 
@@ -4452,16 +4704,28 @@
4452
4704
  }
4453
4705
 
4454
4706
  .aksel-date__wrapper, .aksel-date__standalone-wrapper {
4707
+ width: -webkit-fit-content;
4455
4708
  width: fit-content;
4709
+ height: -webkit-fit-content;
4456
4710
  height: fit-content;
4457
4711
  }
4458
4712
 
4459
- :is(:is(.aksel-date__wrapper, .aksel-date__standalone-wrapper) .rdp-cell > button.rdp-day, :is(.aksel-date__wrapper, .aksel-date__standalone-wrapper) button.aksel-date__month-button):focus-visible {
4713
+ :is(.aksel-date__wrapper, .aksel-date__standalone-wrapper) .rdp-cell > button.rdp-day:focus-visible {
4714
+ outline: 3px solid var(--ax-border-focus);
4715
+ outline-offset: 3px;
4716
+ }
4717
+
4718
+ :is(.aksel-date__wrapper, .aksel-date__standalone-wrapper) .rdp-cell > button.rdp-day:active:not(:disabled) {
4719
+ color: var(--ax-text-contrast);
4720
+ background-color: var(--ax-bg-strong-pressed);
4721
+ }
4722
+
4723
+ :is(.aksel-date__wrapper, .aksel-date__standalone-wrapper) button.aksel-date__month-button:focus-visible {
4460
4724
  outline: 3px solid var(--ax-border-focus);
4461
4725
  outline-offset: 3px;
4462
4726
  }
4463
4727
 
4464
- :is(:is(.aksel-date__wrapper, .aksel-date__standalone-wrapper) .rdp-cell > button.rdp-day, :is(.aksel-date__wrapper, .aksel-date__standalone-wrapper) button.aksel-date__month-button):active:not(:disabled) {
4728
+ :is(.aksel-date__wrapper, .aksel-date__standalone-wrapper) button.aksel-date__month-button:active:not(:disabled) {
4465
4729
  color: var(--ax-text-contrast);
4466
4730
  background-color: var(--ax-bg-strong-pressed);
4467
4731
  }
@@ -4477,12 +4741,10 @@
4477
4741
  .aksel-date__field-button {
4478
4742
  color: var(--ax-text-neutral);
4479
4743
  cursor: pointer;
4480
- border-radius: calc(var(--ax-radius-8) - 1px);
4744
+ border-radius: calc(var(--ax-radius-8) - 1px);
4481
4745
  padding: var(--ax-space-12);
4482
4746
  background: none;
4483
4747
  border: none;
4484
- border-start-start-radius: 0;
4485
- border-end-start-radius: 0;
4486
4748
  justify-content: center;
4487
4749
  align-items: center;
4488
4750
  height: calc(100% - .125rem);
@@ -4496,6 +4758,21 @@
4496
4758
  transform: translateY(-50%);
4497
4759
  }
4498
4760
 
4761
+ .aksel-date__field-button:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
4762
+ border-top-left-radius: 0;
4763
+ border-bottom-left-radius: 0;
4764
+ }
4765
+
4766
+ .aksel-date__field-button:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
4767
+ border-top-right-radius: 0;
4768
+ border-bottom-right-radius: 0;
4769
+ }
4770
+
4771
+ .aksel-date__field-button:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
4772
+ border-top-right-radius: 0;
4773
+ border-bottom-right-radius: 0;
4774
+ }
4775
+
4499
4776
  .aksel-form-field--small .aksel-date__field-button {
4500
4777
  padding: var(--ax-space-4);
4501
4778
  }
@@ -4515,6 +4792,7 @@
4515
4792
 
4516
4793
  .aksel-date__field-wrapper {
4517
4794
  align-items: center;
4795
+ width: -webkit-fit-content;
4518
4796
  width: fit-content;
4519
4797
  display: inline-flex;
4520
4798
  position: relative;
@@ -4598,7 +4876,12 @@
4598
4876
  }
4599
4877
  }
4600
4878
 
4601
- .aksel-dialog__popup[data-entering-style], .aksel-dialog__popup[data-exiting-style] {
4879
+ .aksel-dialog__popup[data-entering-style] {
4880
+ opacity: .001;
4881
+ transform: var(--__axc-dialog-transform);
4882
+ }
4883
+
4884
+ .aksel-dialog__popup[data-exiting-style] {
4602
4885
  opacity: .001;
4603
4886
  transform: var(--__axc-dialog-transform);
4604
4887
  }
@@ -4628,7 +4911,10 @@
4628
4911
  pointer-events: none;
4629
4912
  transition: opacity cubic-bezier(.25, .46, .45, .94);
4630
4913
  position: absolute;
4631
- inset: 0;
4914
+ top: 0;
4915
+ bottom: 0;
4916
+ left: 0;
4917
+ right: 0;
4632
4918
  }
4633
4919
 
4634
4920
  .aksel-dialog__popup[data-position="center"] {
@@ -4636,14 +4922,21 @@
4636
4922
  --__axc-dialog-transform: scale(.98);
4637
4923
  max-width: calc(100dvw - 3rem);
4638
4924
  max-height: calc(90dvh - var(--__axc-dialog-center-margin));
4639
- margin-inline: auto;
4925
+ margin-left: auto;
4926
+ margin-right: auto;
4640
4927
  margin-block: max(var(--__axc-dialog-center-margin), 10dvh) auto;
4641
4928
  top: 0;
4642
4929
  left: 0;
4643
4930
  right: 0;
4644
4931
  }
4645
4932
 
4646
- .aksel-dialog__popup[data-position="center"][data-nested="true"][data-entering-style], .aksel-dialog__popup[data-position="center"][data-nested="true"][data-exiting-style] {
4933
+ .aksel-dialog__popup[data-position="center"][data-nested="true"][data-entering-style] {
4934
+ opacity: 1;
4935
+ transition-duration: 0s;
4936
+ transform: scale(1);
4937
+ }
4938
+
4939
+ .aksel-dialog__popup[data-position="center"][data-nested="true"][data-exiting-style] {
4647
4940
  opacity: 1;
4648
4941
  transition-duration: 0s;
4649
4942
  transform: scale(1);
@@ -4662,19 +4955,35 @@
4662
4955
  max-width: 95dvw;
4663
4956
  height: auto;
4664
4957
  max-height: calc(100dvh - max(16px, 10dvh));
4665
- margin-block: 0;
4666
- margin-inline: auto;
4667
- inset: auto 0 0;
4958
+ margin-top: 0;
4959
+ margin-bottom: 0;
4960
+ margin-left: auto;
4961
+ margin-right: auto;
4962
+ top: auto;
4963
+ bottom: 0;
4964
+ left: 0;
4965
+ right: 0;
4668
4966
  }
4669
4967
  }
4670
4968
 
4671
- .aksel-dialog__popup[data-position="right"], .aksel-dialog__popup[data-position="left"] {
4969
+ .aksel-dialog__popup[data-position="right"] {
4672
4970
  max-width: calc(100vw - max(16px, 10vw));
4673
4971
  top: 0;
4674
4972
  bottom: 0;
4675
4973
  }
4676
4974
 
4677
- :is(.aksel-dialog__popup[data-position="right"], .aksel-dialog__popup[data-position="left"])[data-nested-dialog-open="true"]:after {
4975
+ .aksel-dialog__popup[data-position="right"][data-nested-dialog-open="true"]:after {
4976
+ opacity: 1;
4977
+ transition-duration: .1s;
4978
+ }
4979
+
4980
+ .aksel-dialog__popup[data-position="left"] {
4981
+ max-width: calc(100vw - max(16px, 10vw));
4982
+ top: 0;
4983
+ bottom: 0;
4984
+ }
4985
+
4986
+ .aksel-dialog__popup[data-position="left"][data-nested-dialog-open="true"]:after {
4678
4987
  opacity: 1;
4679
4988
  transition-duration: .1s;
4680
4989
  }
@@ -4703,7 +5012,8 @@
4703
5012
  max-width: 95dvw;
4704
5013
  height: auto;
4705
5014
  max-height: calc(100dvh - max(16px, 10dvh));
4706
- margin-inline: auto;
5015
+ margin-left: auto;
5016
+ margin-right: auto;
4707
5017
  bottom: 0;
4708
5018
  left: 0;
4709
5019
  right: 0;
@@ -4721,7 +5031,10 @@
4721
5031
  max-width: 100dvw;
4722
5032
  height: 100%;
4723
5033
  max-height: 100dvh;
4724
- inset: 0;
5034
+ top: 0;
5035
+ bottom: 0;
5036
+ left: 0;
5037
+ right: 0;
4725
5038
  }
4726
5039
 
4727
5040
  .aksel-dialog__backdrop {
@@ -4730,7 +5043,10 @@
4730
5043
  min-height: 100dvh;
4731
5044
  transition: opacity .2s cubic-bezier(.25, .46, .45, .94);
4732
5045
  position: fixed;
4733
- inset: 0;
5046
+ top: 0;
5047
+ bottom: 0;
5048
+ left: 0;
5049
+ right: 0;
4734
5050
  }
4735
5051
 
4736
5052
  @supports (-webkit-touch-callout: none) {
@@ -4739,7 +5055,11 @@
4739
5055
  }
4740
5056
  }
4741
5057
 
4742
- .aksel-dialog__backdrop[data-entering-style], .aksel-dialog__backdrop[data-exiting-style] {
5058
+ .aksel-dialog__backdrop[data-entering-style] {
5059
+ opacity: .001;
5060
+ }
5061
+
5062
+ .aksel-dialog__backdrop[data-exiting-style] {
4743
5063
  opacity: .001;
4744
5064
  }
4745
5065
 
@@ -4749,7 +5069,7 @@
4749
5069
  }
4750
5070
 
4751
5071
  .aksel-dialog__title {
4752
- margin-block-end: var(--ax-space-4);
5072
+ margin-bottom: var(--ax-space-4);
4753
5073
  }
4754
5074
 
4755
5075
  .aksel-dialog__close-button {
@@ -4766,11 +5086,14 @@
4766
5086
  }
4767
5087
 
4768
5088
  .aksel-dialog__header ~ .aksel-dialog__body {
4769
- padding-block-start: 0;
5089
+ padding-top: 0;
4770
5090
  }
4771
5091
 
4772
5092
  .aksel-dialog__body {
4773
- background: linear-gradient(var(--ax-bg-raised) 30%, transparent) top, linear-gradient(transparent, var(--ax-bg-raised) 60%) bottom, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .3), transparent) top, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .3), transparent) bottom;
5093
+ background: linear-gradient(var(--ax-bg-raised) 30%, transparent) top,
5094
+ linear-gradient(transparent, var(--ax-bg-raised) 60%) bottom,
5095
+ radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .3), transparent) top,
5096
+ radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .3), transparent) bottom;
4774
5097
  background-repeat: no-repeat;
4775
5098
  background-size: 100% 40px, 100% 50px, 100% 16px, 100% 16px;
4776
5099
  background-attachment: local, local, scroll, scroll;
@@ -4802,7 +5125,8 @@
4802
5125
  color: var(--ax-text-neutral);
4803
5126
  width: 27ch;
4804
5127
  max-height: 616px;
4805
- overflow: hidden auto;
5128
+ overflow-x: hidden;
5129
+ overflow-y: auto;
4806
5130
  }
4807
5131
 
4808
5132
  .aksel-dropdown__divider {
@@ -5023,7 +5347,7 @@
5023
5347
  }
5024
5348
 
5025
5349
  .aksel-action-menu__label {
5026
- min-height: calc(var(--__axc-action-menu-item-height) - 6px);
5350
+ min-height: calc(var(--__axc-action-menu-item-height) - 6px);
5027
5351
  padding-right: var(--__axc-action-menu-item-pr);
5028
5352
  padding-left: var(--__axc-action-menu-item-pl);
5029
5353
  color: var(--ax-text-neutral-subtle);
@@ -5051,7 +5375,15 @@
5051
5375
  display: grid;
5052
5376
  }
5053
5377
 
5054
- .aksel-action-menu__indicator[data-state="unchecked"] .aksel-action-menu__indicator-icon--unchecked, .aksel-action-menu__indicator[data-state="checked"] .aksel-action-menu__indicator-icon--checked, .aksel-action-menu__indicator[data-state="indeterminate"] .aksel-action-menu__indicator-icon--indeterminate {
5378
+ .aksel-action-menu__indicator[data-state="unchecked"] .aksel-action-menu__indicator-icon--unchecked {
5379
+ display: block;
5380
+ }
5381
+
5382
+ .aksel-action-menu__indicator[data-state="checked"] .aksel-action-menu__indicator-icon--checked {
5383
+ display: block;
5384
+ }
5385
+
5386
+ .aksel-action-menu__indicator[data-state="indeterminate"] .aksel-action-menu__indicator-icon--indeterminate {
5055
5387
  display: block;
5056
5388
  }
5057
5389
 
@@ -5060,12 +5392,13 @@
5060
5392
  }
5061
5393
 
5062
5394
  .aksel-expansioncard {
5063
- --__axc-expansioncard-border-radius: calc(var(--ax-radius-12) - 1px);
5395
+ --__axc-expansioncard-border-radius: calc(var(--ax-radius-12) - 1px);
5064
5396
  --__axc-expansioncard-padding-block: var(--ax-space-16);
5065
5397
  --__axc-expansioncard-padding-inline: var(--ax-space-20);
5066
5398
  border-radius: var(--ax-radius-12);
5067
5399
  background-color: var(--ax-bg-softA);
5068
5400
  border: 1px solid var(--ax-border-default);
5401
+ height: -webkit-fit-content;
5069
5402
  height: fit-content;
5070
5403
  }
5071
5404
 
@@ -5087,6 +5420,10 @@
5087
5420
  margin-top: var(--ax-space-2);
5088
5421
  }
5089
5422
 
5423
+ .aksel-expansioncard--small :-webkit-any(.aksel-expansioncard__title--medium, .aksel-expansioncard__title--large) {
5424
+ margin-top: 0;
5425
+ }
5426
+
5090
5427
  .aksel-expansioncard--small :is(.aksel-expansioncard__title--medium, .aksel-expansioncard__title--large) {
5091
5428
  margin-top: 0;
5092
5429
  }
@@ -5169,7 +5506,10 @@
5169
5506
  width: 100%;
5170
5507
  height: 100%;
5171
5508
  position: absolute;
5172
- inset: 0;
5509
+ top: 0;
5510
+ bottom: 0;
5511
+ left: 0;
5512
+ right: 0;
5173
5513
  }
5174
5514
 
5175
5515
  .aksel-expansioncard__header:hover > .aksel-expansioncard__header-button {
@@ -5191,17 +5531,31 @@
5191
5531
  .aksel-expansioncard__content {
5192
5532
  padding-inline: var(--__axc-expansioncard-padding-inline);
5193
5533
  visibility: hidden;
5194
- border-end-end-radius: var(--__axc-expansioncard-border-radius);
5195
- border-end-start-radius: var(--__axc-expansioncard-border-radius);
5196
5534
  grid-template-rows: 0fr;
5197
- padding-block: 0;
5198
- transition-property: visibility, padding-block, grid-template-rows;
5535
+ padding-top: 0;
5536
+ padding-bottom: 0;
5537
+ transition-property: visibility, padding-top, padding-bottom, grid-template-rows;
5199
5538
  transition-duration: .25s;
5200
5539
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
5201
5540
  display: grid;
5202
5541
  overflow: hidden;
5203
5542
  }
5204
5543
 
5544
+ .aksel-expansioncard__content:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
5545
+ border-bottom-right-radius: var(--__axc-expansioncard-border-radius);
5546
+ border-bottom-left-radius: var(--__axc-expansioncard-border-radius);
5547
+ }
5548
+
5549
+ .aksel-expansioncard__content:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
5550
+ border-bottom-left-radius: var(--__axc-expansioncard-border-radius);
5551
+ border-bottom-right-radius: var(--__axc-expansioncard-border-radius);
5552
+ }
5553
+
5554
+ .aksel-expansioncard__content:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
5555
+ border-bottom-left-radius: var(--__axc-expansioncard-border-radius);
5556
+ border-bottom-right-radius: var(--__axc-expansioncard-border-radius);
5557
+ }
5558
+
5205
5559
  .aksel-expansioncard__content[data-open="true"] {
5206
5560
  visibility: visible;
5207
5561
  padding-block: var(--__axc-expansioncard-padding-block);
@@ -5218,18 +5572,28 @@
5218
5572
  transition: opacity .25s cubic-bezier(.2, 0, 0, 1);
5219
5573
  }
5220
5574
 
5575
+ .aksel-expansioncard--no-animation :-webkit-any(.aksel-expansioncard__content, .aksel-expansioncard__content-inner) {
5576
+ transition: none;
5577
+ }
5578
+
5221
5579
  .aksel-expansioncard--no-animation :is(.aksel-expansioncard__content, .aksel-expansioncard__content-inner) {
5222
5580
  transition: none;
5223
5581
  }
5224
5582
 
5225
5583
  .aksel-guide-panel {
5226
5584
  --__axc-guide-panel-guide-size: 5rem;
5585
+ width: -webkit-fit-content;
5227
5586
  width: fit-content;
5228
5587
  display: flex;
5229
5588
  position: relative;
5230
5589
  }
5231
5590
 
5232
- .aksel-guide-panel[data-poster="true"], .aksel-guide-panel[data-responsive="true"] {
5591
+ .aksel-guide-panel[data-poster="true"] {
5592
+ flex-direction: column;
5593
+ align-items: center;
5594
+ }
5595
+
5596
+ .aksel-guide-panel[data-responsive="true"] {
5233
5597
  flex-direction: column;
5234
5598
  align-items: center;
5235
5599
  }
@@ -5276,6 +5640,10 @@
5276
5640
  position: relative;
5277
5641
  }
5278
5642
 
5643
+ .aksel-guide-panel:-webkit-any([data-poster="true"], [data-responsive="true"]) > .aksel-guide-panel__content {
5644
+ margin-top: var(--ax-space-20);
5645
+ }
5646
+
5279
5647
  .aksel-guide-panel:is([data-poster="true"], [data-responsive="true"]) > .aksel-guide-panel__content {
5280
5648
  margin-top: var(--ax-space-20);
5281
5649
  }
@@ -5318,6 +5686,12 @@
5318
5686
  position: absolute;
5319
5687
  }
5320
5688
 
5689
+ .aksel-guide-panel:-webkit-any([data-poster="true"], [data-responsive="true"]) .aksel-guide-panel__tail {
5690
+ left: 50%;
5691
+ top: calc(var(--ax-space-16) * -1 - 2px);
5692
+ transform: translateX(-25%);
5693
+ }
5694
+
5321
5695
  .aksel-guide-panel:is([data-poster="true"], [data-responsive="true"]) .aksel-guide-panel__tail {
5322
5696
  left: 50%;
5323
5697
  top: calc(var(--ax-space-16) * -1 - 2px);
@@ -5363,7 +5737,11 @@
5363
5737
  border: 1px solid var(--ax-border-default);
5364
5738
  }
5365
5739
 
5366
- .aksel-help-text__icon--filled, .aksel-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .aksel-help-text__icon {
5740
+ .aksel-help-text__icon--filled {
5741
+ display: none;
5742
+ }
5743
+
5744
+ .aksel-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .aksel-help-text__icon {
5367
5745
  display: none;
5368
5746
  }
5369
5747
 
@@ -5426,7 +5804,8 @@
5426
5804
  font: inherit;
5427
5805
  font-weight: var(--ax-font-weight-bold);
5428
5806
  text-align: left;
5429
- padding-block: 0;
5807
+ padding-top: 0;
5808
+ padding-bottom: 0;
5430
5809
  padding-inline: var(--ax-space-24) var(--ax-space-20);
5431
5810
  border: none;
5432
5811
  border-right: 1px solid var(--ax-border-neutral-subtleA);
@@ -5440,6 +5819,10 @@
5440
5819
  overflow: visible;
5441
5820
  }
5442
5821
 
5822
+ .aksel-internalheader__title:-webkit-any(button) {
5823
+ cursor: pointer;
5824
+ }
5825
+
5443
5826
  .aksel-internalheader__title:is(button) {
5444
5827
  cursor: pointer;
5445
5828
  }
@@ -5448,6 +5831,10 @@
5448
5831
  background: var(--ax-bg-neutral-moderate-hoverA);
5449
5832
  }
5450
5833
 
5834
+ .aksel-internalheader__title:-webkit-any(:hover, :active):not(button, a) {
5835
+ background: initial;
5836
+ }
5837
+
5451
5838
  .aksel-internalheader__title:is(:hover, :active):not(button, a) {
5452
5839
  background: initial;
5453
5840
  }
@@ -5515,7 +5902,11 @@
5515
5902
  display: inline-flex;
5516
5903
  }
5517
5904
 
5518
- .aksel-link:hover, .aksel-link:active {
5905
+ .aksel-link:hover {
5906
+ text-decoration-thickness: .111em;
5907
+ }
5908
+
5909
+ .aksel-link:active {
5519
5910
  text-decoration-thickness: .111em;
5520
5911
  }
5521
5912
 
@@ -5621,7 +6012,15 @@
5621
6012
  text-decoration-thickness: .05em;
5622
6013
  }
5623
6014
 
5624
- .aksel-link-anchor:hover, .aksel-link-anchor__overlay:hover .aksel-link-anchor {
6015
+ .aksel-link-anchor[data-color] {
6016
+ color: var(--ax-text-subtle);
6017
+ }
6018
+
6019
+ .aksel-link-anchor:hover {
6020
+ text-decoration-thickness: .111em;
6021
+ }
6022
+
6023
+ .aksel-link-anchor__overlay:hover .aksel-link-anchor {
5625
6024
  text-decoration-thickness: .111em;
5626
6025
  }
5627
6026
 
@@ -5641,7 +6040,11 @@
5641
6040
  transform: translateX(0);
5642
6041
  }
5643
6042
 
5644
- .aksel-link-anchor:hover .aksel-link-anchor__arrow, .aksel-link-anchor__overlay:hover .aksel-link-anchor__arrow {
6043
+ .aksel-link-anchor:hover .aksel-link-anchor__arrow {
6044
+ transform: translateX(4px);
6045
+ }
6046
+
6047
+ .aksel-link-anchor__overlay:hover .aksel-link-anchor__arrow {
5645
6048
  transform: translateX(4px);
5646
6049
  }
5647
6050
 
@@ -5683,7 +6086,11 @@
5683
6086
  align-items: center;
5684
6087
  }
5685
6088
 
5686
- .aksel-link-card:not(:has(.aksel-link-card__description, .aksel-link-card__footer)) .aksel-link-card__icon, .aksel-link-card:not(:has(.aksel-link-card__description, .aksel-link-card__footer))[data-align-arrow="baseline"] .aksel-link-card__arrow {
6089
+ .aksel-link-card:not(:has(.aksel-link-card__description, .aksel-link-card__footer)) .aksel-link-card__icon {
6090
+ align-self: center;
6091
+ }
6092
+
6093
+ .aksel-link-card:not(:has(.aksel-link-card__description, .aksel-link-card__footer))[data-align-arrow="baseline"] .aksel-link-card__arrow {
5687
6094
  align-self: center;
5688
6095
  }
5689
6096
 
@@ -5704,13 +6111,17 @@
5704
6111
  grid-area: title;
5705
6112
  }
5706
6113
 
5707
- .aksel-link-card[data-color="neutral"] .aksel-link-card__title, .aksel-link-card__title[data-color="neutral"] {
6114
+ .aksel-link-card[data-color="neutral"] .aksel-link-card__title {
6115
+ color: var(--ax-text-default);
6116
+ }
6117
+
6118
+ .aksel-link-card__title[data-color="neutral"] {
5708
6119
  color: var(--ax-text-default);
5709
6120
  }
5710
6121
 
5711
6122
  .aksel-link-card__description {
5712
6123
  grid-area: description;
5713
- margin-block-start: var(--ax-space-4);
6124
+ margin-top: var(--ax-space-4);
5714
6125
  }
5715
6126
 
5716
6127
  .aksel-link-card__footer {
@@ -5718,29 +6129,50 @@
5718
6129
  gap: var(--ax-space-8);
5719
6130
  flex-wrap: wrap;
5720
6131
  grid-area: footer;
5721
- margin-block-start: var(--ax-space-16);
6132
+ margin-top: var(--ax-space-16);
5722
6133
  display: flex;
5723
6134
  }
5724
6135
 
5725
6136
  .aksel-link-card__icon {
6137
+ width: -webkit-max-content;
5726
6138
  width: max-content;
6139
+ height: -webkit-max-content;
5727
6140
  height: max-content;
5728
6141
  color: var(--ax-text-default);
5729
6142
  grid-area: icon;
5730
6143
  place-content: center;
5731
6144
  align-self: flex-start;
5732
- margin-inline-end: var(--ax-space-16);
5733
6145
  display: grid;
5734
6146
  }
5735
6147
 
5736
- .aksel-link-card--small .aksel-link-card__icon {
5737
- margin-inline-end: var(--ax-space-12);
6148
+ .aksel-link-card__icon:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
6149
+ margin-right: var(--ax-space-16);
6150
+ }
6151
+
6152
+ .aksel-link-card__icon:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
6153
+ margin-left: var(--ax-space-16);
6154
+ }
6155
+
6156
+ .aksel-link-card__icon:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
6157
+ margin-left: var(--ax-space-16);
6158
+ }
6159
+
6160
+ .aksel-link-card--small .aksel-link-card__icon:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
6161
+ margin-right: var(--ax-space-12);
6162
+ }
6163
+
6164
+ .aksel-link-card--small .aksel-link-card__icon:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
6165
+ margin-left: var(--ax-space-12);
6166
+ }
6167
+
6168
+ .aksel-link-card--small .aksel-link-card__icon:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
6169
+ margin-left: var(--ax-space-12);
5738
6170
  }
5739
6171
 
5740
6172
  .aksel-link-card__image-container {
5741
6173
  margin-block: calc(var(--__axc-link-card-padding-block) * -1) var(--__axc-link-card-padding-block);
5742
6174
  margin-inline: calc(var(--__axc-link-card-padding-inline) * 1 * -1);
5743
- border-radius: calc(var(--ax-radius-12) - 1px);
6175
+ border-radius: calc(var(--ax-radius-12) - 1px);
5744
6176
  border-bottom-right-radius: 0;
5745
6177
  border-bottom-left-radius: 0;
5746
6178
  grid-area: image;
@@ -5748,6 +6180,13 @@
5748
6180
  overflow: hidden;
5749
6181
  }
5750
6182
 
6183
+ .aksel-link-card__image-container :-webkit-any(img, picture) {
6184
+ object-fit: cover;
6185
+ max-width: 100%;
6186
+ height: 100%;
6187
+ display: block;
6188
+ }
6189
+
5751
6190
  .aksel-link-card__image-container :is(img, picture) {
5752
6191
  object-fit: cover;
5753
6192
  max-width: 100%;
@@ -5757,7 +6196,18 @@
5757
6196
 
5758
6197
  .aksel-link-card__arrow {
5759
6198
  grid-area: arrow;
5760
- margin-inline-start: var(--ax-space-8);
6199
+ }
6200
+
6201
+ .aksel-link-card__arrow:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
6202
+ margin-left: var(--ax-space-8);
6203
+ }
6204
+
6205
+ .aksel-link-card__arrow:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
6206
+ margin-right: var(--ax-space-8);
6207
+ }
6208
+
6209
+ .aksel-link-card__arrow:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
6210
+ margin-right: var(--ax-space-8);
5761
6211
  }
5762
6212
 
5763
6213
  .aksel-link-card[data-align-arrow="baseline"] .aksel-link-card__arrow {
@@ -5789,7 +6239,9 @@
5789
6239
  }
5790
6240
 
5791
6241
  .aksel-modal--polyfilled {
6242
+ width: -webkit-fit-content;
5792
6243
  width: fit-content;
6244
+ height: -webkit-fit-content;
5793
6245
  height: fit-content;
5794
6246
  margin: auto;
5795
6247
  top: 50%;
@@ -5808,7 +6260,10 @@
5808
6260
 
5809
6261
  ._dialog_overlay {
5810
6262
  position: fixed;
5811
- inset: 0;
6263
+ top: 0;
6264
+ bottom: 0;
6265
+ left: 0;
6266
+ right: 0;
5812
6267
  }
5813
6268
 
5814
6269
  .aksel-modal--medium {
@@ -5819,7 +6274,11 @@
5819
6274
  width: 450px;
5820
6275
  }
5821
6276
 
5822
- .aksel-modal--small .aksel-modal__header, .aksel-modal--small .aksel-modal__body {
6277
+ .aksel-modal--small .aksel-modal__header {
6278
+ padding: var(--ax-space-12) var(--ax-space-16);
6279
+ }
6280
+
6281
+ .aksel-modal--small .aksel-modal__body {
5823
6282
  padding: var(--ax-space-12) var(--ax-space-16);
5824
6283
  }
5825
6284
 
@@ -5857,7 +6316,10 @@
5857
6316
  .aksel-modal--polyfilled + .backdrop {
5858
6317
  background: rgba(12, 22, 39, .66);
5859
6318
  position: fixed;
5860
- inset: 0;
6319
+ top: 0;
6320
+ bottom: 0;
6321
+ left: 0;
6322
+ right: 0;
5861
6323
  }
5862
6324
 
5863
6325
  .aksel-modal__button {
@@ -5883,7 +6345,10 @@
5883
6345
  .aksel-modal__body {
5884
6346
  padding: var(--ax-space-16) var(--ax-space-20);
5885
6347
  overscroll-behavior: contain;
5886
- background: linear-gradient(var(--__axc-modal-bg) 30%, transparent) top, linear-gradient(transparent, var(--__axc-modal-bg) 60%) bottom, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .3), transparent) top, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .3), transparent) bottom;
6348
+ background: linear-gradient(var(--__axc-modal-bg) 30%, transparent) top,
6349
+ linear-gradient(transparent, var(--__axc-modal-bg) 60%) bottom,
6350
+ radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .3), transparent) top,
6351
+ radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .3), transparent) bottom;
5887
6352
  background-repeat: no-repeat;
5888
6353
  background-size: 100% 40px, 100% 50px, 100% 16px, 100% 16px;
5889
6354
  background-attachment: local, local, scroll, scroll;
@@ -5914,6 +6379,7 @@
5914
6379
  }
5915
6380
 
5916
6381
  .aksel-modal--polyfilled .aksel-modal--polyfilled.aksel-date__nested-modal {
6382
+ min-width: -webkit-fit-content;
5917
6383
  min-width: fit-content;
5918
6384
  max-width: 100vw;
5919
6385
  max-height: 100vh;
@@ -6087,14 +6553,26 @@
6087
6553
 
6088
6554
  .aksel-tag__icon--left {
6089
6555
  font-size: var(--__axc-tag-icon-size);
6090
- margin-inline-start: var(--__axc-tag-icon-margin);
6091
6556
  display: flex;
6092
6557
  }
6093
6558
 
6559
+ .aksel-tag__icon--left:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
6560
+ margin-left: var(--__axc-tag-icon-margin);
6561
+ }
6562
+
6563
+ .aksel-tag__icon--left:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
6564
+ margin-right: var(--__axc-tag-icon-margin);
6565
+ }
6566
+
6567
+ .aksel-tag__icon--left:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
6568
+ margin-right: var(--__axc-tag-icon-margin);
6569
+ }
6570
+
6094
6571
  .aksel-timeline {
6095
6572
  grid-template-columns: auto minmax(0, 1fr);
6096
6573
  align-items: center;
6097
6574
  width: 100%;
6575
+ min-width: -webkit-fit-content;
6098
6576
  min-width: fit-content;
6099
6577
  display: grid;
6100
6578
  position: relative;
@@ -6250,7 +6728,10 @@
6250
6728
  width: 25px;
6251
6729
  height: 25px;
6252
6730
  position: absolute;
6253
- inset: -9px 0 0 -9px;
6731
+ top: -9px;
6732
+ bottom: 0;
6733
+ left: -9px;
6734
+ right: 0;
6254
6735
  }
6255
6736
 
6256
6737
  .aksel-timeline__pin-button:hover {
@@ -6258,7 +6739,8 @@
6258
6739
  }
6259
6740
 
6260
6741
  .aksel-timeline__pin-button:focus-visible {
6261
- box-shadow: inset 0 0 0 4px var(--ax-border-danger-strong), 0 0 0 3px var(--ax-bg-default);
6742
+ box-shadow: inset 0 0 0 4px var(--ax-border-danger-strong),
6743
+ 0 0 0 3px var(--ax-bg-default);
6262
6744
  outline: 3px solid var(--ax-border-focus);
6263
6745
  outline-offset: 3px;
6264
6746
  }
@@ -6316,7 +6798,8 @@
6316
6798
  }
6317
6799
 
6318
6800
  .aksel-timeline__zoom-button:focus-visible {
6319
- box-shadow: 0 0 0 1px var(--ax-bg-default), 0 0 0 4px var(--ax-border-focus);
6801
+ box-shadow: 0 0 0 1px var(--ax-bg-default),
6802
+ 0 0 0 4px var(--ax-border-focus);
6320
6803
  border-width: 1px;
6321
6804
  }
6322
6805
 
@@ -6358,7 +6841,13 @@
6358
6841
  outline: 4px solid rgba(0, 0, 0, 0);
6359
6842
  }
6360
6843
 
6361
- .aksel-timeline__pin-button:focus, .aksel-timeline__pin-button:focus-visible {
6844
+ .aksel-timeline__pin-button:focus {
6845
+ outline-offset: 3px;
6846
+ box-shadow: none;
6847
+ outline: 4px solid highlight;
6848
+ }
6849
+
6850
+ .aksel-timeline__pin-button:focus-visible {
6362
6851
  outline-offset: 3px;
6363
6852
  box-shadow: none;
6364
6853
  outline: 4px solid highlight;
@@ -6522,6 +7011,7 @@
6522
7011
  border: none;
6523
7012
  justify-content: center;
6524
7013
  align-items: center;
7014
+ min-width: -webkit-fit-content;
6525
7015
  min-width: fit-content;
6526
7016
  display: inline-flex;
6527
7017
  position: relative;
@@ -6639,6 +7129,14 @@
6639
7129
  transform: rotateX(-180deg);
6640
7130
  }
6641
7131
 
7132
+ .aksel-read-more:-webkit-any([data-volume="low"], :not([data-volume])) .aksel-read-more__button {
7133
+ border-radius: var(--ax-radius-4);
7134
+ }
7135
+
7136
+ .aksel-read-more:-webkit-any([data-volume="low"], :not([data-volume])) .aksel-read-more__button:hover {
7137
+ background-color: var(--ax-bg-neutral-moderate-hoverA);
7138
+ }
7139
+
6642
7140
  .aksel-read-more:is([data-volume="low"], :not([data-volume])) .aksel-read-more__button {
6643
7141
  border-radius: var(--ax-radius-4);
6644
7142
  }
@@ -6662,7 +7160,12 @@
6662
7160
  --__axc-read-more-pi-end: var(--ax-space-24);
6663
7161
  }
6664
7162
 
6665
- .aksel-read-more[data-volume="high"].aksel-read-more--small, .aksel-read-more[data-volume="high"].aksel-read-more--medium {
7163
+ .aksel-read-more[data-volume="high"].aksel-read-more--small {
7164
+ --__axc-read-more-pi-start: var(--ax-space-8);
7165
+ --__axc-read-more-pi-end: var(--ax-space-16);
7166
+ }
7167
+
7168
+ .aksel-read-more[data-volume="high"].aksel-read-more--medium {
6666
7169
  --__axc-read-more-pi-start: var(--ax-space-8);
6667
7170
  --__axc-read-more-pi-end: var(--ax-space-16);
6668
7171
  }
@@ -6671,7 +7174,7 @@
6671
7174
  margin-top: var(--ax-space-8);
6672
7175
  border-left: 2px solid var(--ax-border-neutral-subtleA);
6673
7176
  color: var(--ax-text-neutral);
6674
- margin-left: calc(var(--__axc-read-more-pi-start) + var(--__axc-read-more-icon-size) / 2 - 1px);
7177
+ margin-left: calc(var(--__axc-read-more-pi-start) + var(--__axc-read-more-icon-size) / 2 - 1px);
6675
7178
  padding-left: calc(var(--__axc-read-more-icon-size) / 2 - 1px + var(--ax-space-4));
6676
7179
  }
6677
7180
 
@@ -6831,6 +7334,7 @@
6831
7334
  }
6832
7335
 
6833
7336
  .aksel-skeleton--has-children.aksel-skeleton--no-width {
7337
+ width: -webkit-fit-content;
6834
7338
  width: fit-content;
6835
7339
  }
6836
7340
 
@@ -6884,7 +7388,8 @@
6884
7388
  }
6885
7389
 
6886
7390
  .aksel-process__event {
6887
- grid-template-rows: [line-1] auto [step-start] var(--__axc-process-circle-size) [line-2 step-end] auto;
7391
+ grid-template-rows: [line-1] auto [step-start] var(--__axc-process-circle-size)
7392
+ [line-2 step-end] auto;
6888
7393
  grid-template-columns: var(--__axc-process-circle-base) auto;
6889
7394
  justify-items: flex-start;
6890
7395
  display: grid;
@@ -6892,20 +7397,20 @@
6892
7397
 
6893
7398
  .aksel-process__event[data-dot="true"] {
6894
7399
  --__axc-process-circle-size: var(--__axc-process-circle-small);
6895
- margin-block-start: calc((var(--__axc-process-circle-small) / 2) * -1);
7400
+ margin-top: calc((var(--__axc-process-circle-small) / 2) * -1);
6896
7401
  }
6897
7402
 
6898
7403
  .aksel-process__event[data-dot="true"] .aksel-process__line[data-position="start"] {
6899
- margin-block-end: calc(var(--__axc-process-circle-size) / 2 * -1);
7404
+ margin-bottom: calc(var(--__axc-process-circle-size) / 2 * -1);
6900
7405
  }
6901
7406
 
6902
7407
  .aksel-process__event[data-dot="true"] .aksel-process__line[data-position="end"] {
6903
- margin-block-start: calc(var(--__axc-process-circle-size) / 2);
7408
+ margin-top: calc(var(--__axc-process-circle-size) / 2);
6904
7409
  }
6905
7410
 
6906
7411
  .aksel-process__event[data-dot="true"] .aksel-process__bullet {
6907
7412
  --__axc-process-circle-size: var(--__axc-process-circle-small);
6908
- margin-top: calc((var(--__axc-process-circle-large) - var(--__axc-process-circle-small)) / 2);
7413
+ margin-top: calc((var(--__axc-process-circle-large) - var(--__axc-process-circle-small)) / 2);
6909
7414
  }
6910
7415
 
6911
7416
  .aksel-process__line {
@@ -6926,12 +7431,29 @@
6926
7431
  }
6927
7432
 
6928
7433
  .aksel-process__event:first-of-type .aksel-process__line[data-position="start"] {
6929
- border-start-start-radius: var(--ax-radius-4);
6930
- border-start-end-radius: var(--ax-radius-4);
6931
7434
  min-height: 1.5rem;
6932
7435
  }
6933
7436
 
6934
- .aksel-process__event:not(:first-of-type) .aksel-process__line[data-position="start"], .aksel-process:not([data-truncated="start"], [data-truncated="both"]) .aksel-process__line[data-position="start"] {
7437
+ .aksel-process__event:first-of-type .aksel-process__line[data-position="start"]:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
7438
+ border-top-left-radius: var(--ax-radius-4);
7439
+ border-top-right-radius: var(--ax-radius-4);
7440
+ }
7441
+
7442
+ .aksel-process__event:first-of-type .aksel-process__line[data-position="start"]:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
7443
+ border-top-right-radius: var(--ax-radius-4);
7444
+ border-top-left-radius: var(--ax-radius-4);
7445
+ }
7446
+
7447
+ .aksel-process__event:first-of-type .aksel-process__line[data-position="start"]:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
7448
+ border-top-right-radius: var(--ax-radius-4);
7449
+ border-top-left-radius: var(--ax-radius-4);
7450
+ }
7451
+
7452
+ .aksel-process__event:not(:first-of-type) .aksel-process__line[data-position="start"] {
7453
+ display: none;
7454
+ }
7455
+
7456
+ .aksel-process:not([data-truncated="start"], [data-truncated="both"]) .aksel-process__line[data-position="start"] {
6935
7457
  display: none;
6936
7458
  }
6937
7459
 
@@ -6944,11 +7466,24 @@
6944
7466
  }
6945
7467
 
6946
7468
  .aksel-process__event:last-of-type .aksel-process__line[data-position="end"] {
6947
- border-end-end-radius: var(--ax-radius-4);
6948
- border-end-start-radius: var(--ax-radius-4);
6949
7469
  min-height: 1.5rem;
6950
7470
  }
6951
7471
 
7472
+ .aksel-process__event:last-of-type .aksel-process__line[data-position="end"]:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
7473
+ border-bottom-right-radius: var(--ax-radius-4);
7474
+ border-bottom-left-radius: var(--ax-radius-4);
7475
+ }
7476
+
7477
+ .aksel-process__event:last-of-type .aksel-process__line[data-position="end"]:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
7478
+ border-bottom-left-radius: var(--ax-radius-4);
7479
+ border-bottom-right-radius: var(--ax-radius-4);
7480
+ }
7481
+
7482
+ .aksel-process__event:last-of-type .aksel-process__line[data-position="end"]:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
7483
+ border-bottom-left-radius: var(--ax-radius-4);
7484
+ border-bottom-right-radius: var(--ax-radius-4);
7485
+ }
7486
+
6952
7487
  .aksel-process__event[data-status="active"] .aksel-process__line {
6953
7488
  border-color: var(--ax-border-default);
6954
7489
  border-image: linear-gradient(to bottom, var(--ax-border-default) 50%, var(--ax-border-neutral-subtle) 90%);
@@ -7004,6 +7539,12 @@
7004
7539
  width: min(calc(var(--__axc-process-circle-size) * .75), 1.5rem);
7005
7540
  }
7006
7541
 
7542
+ .aksel-process__event:-webkit-any([data-status="completed"], [data-status="active"]) .aksel-process__bullet {
7543
+ color: var(--ax-text-contrast);
7544
+ background: var(--ax-bg-strong);
7545
+ border-color: rgba(0, 0, 0, 0);
7546
+ }
7547
+
7007
7548
  .aksel-process__event:is([data-status="completed"], [data-status="active"]) .aksel-process__bullet {
7008
7549
  color: var(--ax-text-contrast);
7009
7550
  background: var(--ax-bg-strong);
@@ -7030,7 +7571,7 @@
7030
7571
  }
7031
7572
 
7032
7573
  .aksel-process__event[data-status="active"] .aksel-process__title:has( + .aksel-process__active-label) {
7033
- padding-block-end: 0;
7574
+ padding-bottom: 0;
7034
7575
  }
7035
7576
 
7036
7577
  .aksel-process__active-label {
@@ -7039,7 +7580,7 @@
7039
7580
  }
7040
7581
 
7041
7582
  .aksel-process__active-label:last-of-type {
7042
- margin-block-end: 0;
7583
+ margin-bottom: 0;
7043
7584
  }
7044
7585
 
7045
7586
  @media (forced-colors: active) {
@@ -7047,6 +7588,13 @@
7047
7588
  transition: none;
7048
7589
  }
7049
7590
 
7591
+ .aksel-process__event:-webkit-any([data-status="completed"], [data-status="active"]) .aksel-process__bullet {
7592
+ color: buttonface;
7593
+ forced-color-adjust: none;
7594
+ background-color: buttontext;
7595
+ outline-color: buttontext;
7596
+ }
7597
+
7050
7598
  .aksel-process__event:is([data-status="completed"], [data-status="active"]) .aksel-process__bullet {
7051
7599
  color: buttonface;
7052
7600
  forced-color-adjust: none;
@@ -7076,7 +7624,8 @@
7076
7624
  }
7077
7625
 
7078
7626
  .aksel-stepper__item {
7079
- grid-template-rows: [line-1] auto [step-start] var(--__axc-stepper-circle-size) [line-2 step-end] auto;
7627
+ grid-template-rows: [line-1] auto [step-start] var(--__axc-stepper-circle-size)
7628
+ [line-2 step-end] auto;
7080
7629
  grid-template-columns: var(--__axc-stepper-circle-size) auto;
7081
7630
  justify-items: flex-start;
7082
7631
  gap: var(--ax-space-8);
@@ -7119,7 +7668,8 @@
7119
7668
  gap: var(--ax-space-8);
7120
7669
  cursor: pointer;
7121
7670
  padding: var(--__axc-stepper-border-width);
7122
- margin: calc(var(--__axc-stepper-border-width) * -1) calc(var(--__axc-stepper-border-width) * -1) var(--__axc-stepper-circle-size);
7671
+ margin: calc(var(--__axc-stepper-border-width) * -1) calc(var(--__axc-stepper-border-width) * -1)
7672
+ var(--__axc-stepper-circle-size);
7123
7673
  justify-content: flex-start;
7124
7674
  width: 100%;
7125
7675
  display: grid;
@@ -7135,7 +7685,18 @@
7135
7685
  margin-bottom: 0;
7136
7686
  }
7137
7687
 
7688
+ .aksel-stepper__step:-webkit-any(button) {
7689
+ -webkit-appearance: none;
7690
+ appearance: none;
7691
+ font: inherit;
7692
+ color: inherit;
7693
+ text-align: inherit;
7694
+ background-color: rgba(0, 0, 0, 0);
7695
+ border: none;
7696
+ }
7697
+
7138
7698
  .aksel-stepper__step:is(button) {
7699
+ -webkit-appearance: none;
7139
7700
  appearance: none;
7140
7701
  font: inherit;
7141
7702
  color: inherit;
@@ -7173,7 +7734,11 @@
7173
7734
  text-decoration-thickness: .05em;
7174
7735
  }
7175
7736
 
7176
- :is(.aksel-stepper__step[data-interactive="true"]:hover, .aksel-stepper__step[data-interactive="true"]:active) .aksel-stepper__content {
7737
+ .aksel-stepper__step[data-interactive="true"]:hover .aksel-stepper__content {
7738
+ text-decoration-thickness: .111em;
7739
+ }
7740
+
7741
+ .aksel-stepper__step[data-interactive="true"]:active .aksel-stepper__content {
7177
7742
  text-decoration-thickness: .111em;
7178
7743
  }
7179
7744
 
@@ -7214,6 +7779,7 @@
7214
7779
 
7215
7780
  .aksel-stepper__content {
7216
7781
  grid-column: content;
7782
+ min-width: -webkit-fit-content;
7217
7783
  min-width: fit-content;
7218
7784
  padding-top: .16rem;
7219
7785
  line-height: 1.5;
@@ -7243,19 +7809,25 @@
7243
7809
  }
7244
7810
 
7245
7811
  .aksel-stepper[data-orientation="horizontal"] .aksel-stepper__item {
7246
- grid-template-columns: [line-1-start] 1fr [step-start] auto [line-1-end] var(--__axc-stepper-circle-size) [line-2-start] auto [step-end] 1fr [line-2-end];
7812
+ grid-template-columns: [line-1-start] 1fr [step-start] auto [line-1-end] var(--__axc-stepper-circle-size)
7813
+ [line-2-start] auto [step-end] 1fr [line-2-end];
7247
7814
  grid-template-rows: var(--__axc-stepper-circle-size) auto;
7248
7815
  flex: 100%;
7249
7816
  }
7250
7817
 
7251
- .aksel-stepper[data-orientation="horizontal"] .aksel-stepper__item:first-of-type .aksel-stepper__line--1, .aksel-stepper[data-orientation="horizontal"] .aksel-stepper__item:last-of-type .aksel-stepper__line--2 {
7818
+ .aksel-stepper[data-orientation="horizontal"] .aksel-stepper__item:first-of-type .aksel-stepper__line--1 {
7819
+ visibility: hidden;
7820
+ }
7821
+
7822
+ .aksel-stepper[data-orientation="horizontal"] .aksel-stepper__item:last-of-type .aksel-stepper__line--2 {
7252
7823
  visibility: hidden;
7253
7824
  }
7254
7825
 
7255
7826
  .aksel-stepper[data-orientation="horizontal"] .aksel-stepper__step {
7256
7827
  grid-area: 1 / step / -1;
7257
7828
  grid-template-rows: [circle] var(--__axc-stepper-circle-size) [content] auto;
7258
- grid-template-columns: [content-start] auto [circle] var(--__axc-stepper-circle-size) [content-end] auto;
7829
+ grid-template-columns: [content-start] auto [circle] var(--__axc-stepper-circle-size)
7830
+ [content-end] auto;
7259
7831
  place-items: center;
7260
7832
  margin-bottom: 0;
7261
7833
  display: grid;
@@ -7307,6 +7879,7 @@
7307
7879
  z-index: 10;
7308
7880
  background-color: var(--ax-bg-default);
7309
7881
  box-sizing: border-box;
7882
+ position: -webkit-sticky;
7310
7883
  position: sticky;
7311
7884
  top: 0;
7312
7885
  }
@@ -7328,6 +7901,10 @@
7328
7901
  display: table-row;
7329
7902
  }
7330
7903
 
7904
+ .aksel-table__row:has( + .aksel-table__row--selected) :-webkit-any(.aksel-table__header-cell, .aksel-table__data-cell) {
7905
+ border-color: var(--ax-border-default);
7906
+ }
7907
+
7331
7908
  .aksel-table__row:has( + .aksel-table__row--selected) :is(.aksel-table__header-cell, .aksel-table__data-cell) {
7332
7909
  border-color: var(--ax-border-default);
7333
7910
  }
@@ -7338,26 +7915,38 @@
7338
7915
 
7339
7916
  .aksel-table__row--selected {
7340
7917
  background-color: var(--ax-bg-softA);
7341
- box-shadow: inset 1px 0 0 0 var(--ax-border-default), inset -1px 0 0 0 var(--ax-border-default);
7918
+ box-shadow: inset 1px 0 0 0 var(--ax-border-default),
7919
+ inset -1px 0 0 0 var(--ax-border-default);
7342
7920
  }
7343
7921
 
7344
7922
  .aksel-table__row--selected:first-of-type {
7345
- box-shadow: inset 1px 0 0 0 var(--ax-border-default), inset -1px 0 0 0 var(--ax-border-default), inset 0 1px 0 0 var(--ax-border-default);
7923
+ box-shadow: inset 1px 0 0 0 var(--ax-border-default),
7924
+ inset -1px 0 0 0 var(--ax-border-default),
7925
+ inset 0 1px 0 0 var(--ax-border-default);
7346
7926
  }
7347
7927
 
7348
7928
  .aksel-table__row--selected + .aksel-table__expanded-row {
7349
7929
  background-color: var(--ax-bg-softA);
7350
- box-shadow: inset 1px 0 0 0 var(--ax-border-default), inset -1px 0 0 0 var(--ax-border-default);
7930
+ box-shadow: inset 1px 0 0 0 var(--ax-border-default),
7931
+ inset -1px 0 0 0 var(--ax-border-default);
7351
7932
  }
7352
7933
 
7353
7934
  .aksel-table__row--selected + .aksel-table__expanded-row .aksel-table__expanded-row-collapse {
7354
7935
  border-color: var(--ax-border-default);
7355
7936
  }
7356
7937
 
7938
+ .aksel-table__row--selected :-webkit-any(.aksel-table__header-cell, .aksel-table__data-cell) {
7939
+ border-color: var(--ax-border-default);
7940
+ }
7941
+
7357
7942
  .aksel-table__row--selected :is(.aksel-table__header-cell, .aksel-table__data-cell) {
7358
7943
  border-color: var(--ax-border-default);
7359
7944
  }
7360
7945
 
7946
+ .aksel-table__row--selected.aksel-table__expandable-row--open :-webkit-any(.aksel-table__header-cell, .aksel-table__data-cell) {
7947
+ border-color: rgba(0, 0, 0, 0);
7948
+ }
7949
+
7361
7950
  .aksel-table__row--selected.aksel-table__expandable-row--open :is(.aksel-table__header-cell, .aksel-table__data-cell) {
7362
7951
  border-color: rgba(0, 0, 0, 0);
7363
7952
  }
@@ -7414,7 +8003,10 @@
7414
8003
  }
7415
8004
 
7416
8005
  .aksel-table tr:not(.aksel-table__expanded-row) .aksel-checkbox:focus-within:after {
7417
- inset: 0;
8006
+ top: 0;
8007
+ bottom: 0;
8008
+ left: 0;
8009
+ right: 0;
7418
8010
  }
7419
8011
 
7420
8012
  .aksel-table__header-cell[aria-sort] {
@@ -7422,6 +8014,7 @@
7422
8014
  }
7423
8015
 
7424
8016
  .aksel-table__sort-button {
8017
+ -webkit-appearance: none;
7425
8018
  appearance: none;
7426
8019
  color: var(--ax-text-subtle);
7427
8020
  cursor: pointer;
@@ -7523,7 +8116,7 @@
7523
8116
  background-color: var(--ax-bg-neutral-moderate-hoverA);
7524
8117
  }
7525
8118
 
7526
- .aksel-table__row--selected :is(:scope .aksel-table__toggle-expand-button:hover, :scope .aksel-table__toggle-expand-cell:hover > .aksel-table__toggle-expand-button, :scope .aksel-table__expandable-row--clickable:hover .aksel-table__toggle-expand-button) {
8119
+ .aksel-table__row--selected :is(.aksel-table__toggle-expand-button:hover, .aksel-table__toggle-expand-cell:hover > .aksel-table__toggle-expand-button, .aksel-table__expandable-row--clickable:hover .aksel-table__toggle-expand-button) {
7527
8120
  background-color: var(--ax-bg-moderate-hoverA);
7528
8121
  }
7529
8122
 
@@ -7552,7 +8145,7 @@
7552
8145
  }
7553
8146
 
7554
8147
  .aksel-table__expanded-row-content {
7555
- --__axc-table-expanded-row-pi: calc(var(--ax-space-8) + 3rem);
8148
+ --__axc-table-expanded-row-pi: calc(var(--ax-space-8) + 3rem);
7556
8149
  padding-block: var(--ax-space-16);
7557
8150
  }
7558
8151
 
@@ -7701,15 +8294,15 @@
7701
8294
  @media (forced-colors: active) {
7702
8295
  .aksel-tabs__tab[data-state="active"] {
7703
8296
  border-bottom: 3px solid canvastext;
7704
- padding-block-end: calc(var(--ax-space-12) - 3px);
8297
+ padding-bottom: calc(var(--ax-space-12) - 3px);
7705
8298
  }
7706
8299
 
7707
8300
  .aksel-tabs__tab--small[data-state="active"] {
7708
- padding-block-end: calc(var(--ax-space-6) - 3px);
8301
+ padding-bottom: calc(var(--ax-space-6) - 3px);
7709
8302
  }
7710
8303
 
7711
8304
  .aksel-tabs__tab-icon--top[data-state="active"], .aksel-tabs__tab--small.aksel-tabs__tab-icon--top[data-state="active"] {
7712
- padding-block-end: calc(var(--ax-space-4) - 3px);
8305
+ padding-bottom: calc(var(--ax-space-4) - 3px);
7713
8306
  }
7714
8307
  }
7715
8308
 
@@ -7747,7 +8340,7 @@
7747
8340
  display: flex;
7748
8341
  }
7749
8342
 
7750
- @supports (hanging-punctuation: first) and (font: -apple-system-body) and (appearance: none) {
8343
+ @supports (hanging-punctuation: first) and (font: -apple-system-body) and ((-webkit-appearance: none) or (appearance: none)) {
7751
8344
  .aksel-list ol {
7752
8345
  padding-left: 2.1rem;
7753
8346
  }
@@ -7758,11 +8351,11 @@
7758
8351
  }
7759
8352
 
7760
8353
  .aksel-list__item {
7761
- margin-block-end: var(--ax-space-8);
8354
+ margin-bottom: var(--ax-space-8);
7762
8355
  }
7763
8356
 
7764
8357
  .aksel-list__item:last-child {
7765
- margin-block-end: 0;
8358
+ margin-bottom: 0;
7766
8359
  }
7767
8360
 
7768
8361
  .aksel-list__item-marker {
@@ -8744,7 +9337,8 @@
8744
9337
  .aksel-pageblock {
8745
9338
  --__axc-page-padding-inline: 0px;
8746
9339
  width: 100%;
8747
- margin-inline: auto;
9340
+ margin-left: auto;
9341
+ margin-right: auto;
8748
9342
  }
8749
9343
 
8750
9344
  .aksel-page__content--grow {
@@ -8757,11 +9351,11 @@
8757
9351
  }
8758
9352
 
8759
9353
  .aksel-page__content--padding {
8760
- padding-block-end: var(--ax-space-64);
9354
+ padding-bottom: var(--ax-space-64);
8761
9355
  }
8762
9356
 
8763
9357
  .aksel-pageblock--text {
8764
- max-width: calc(576px + var(--__axc-page-padding-inline) + var(--__axc-page-padding-inline));
9358
+ max-width: calc(576px + var(--__axc-page-padding-inline) + var(--__axc-page-padding-inline));
8765
9359
  }
8766
9360
 
8767
9361
  .aksel-pageblock--md {
@@ -8927,8 +9521,19 @@
8927
9521
  }
8928
9522
 
8929
9523
  .aksel-stack > .aksel-stack__spacer {
8930
- margin-block-start: calc(var(--__axc-stack-gap) * -1);
8931
- margin-inline-start: calc(var(--__axc-stack-gap) * -1);
9524
+ margin-top: calc(var(--__axc-stack-gap) * -1);
9525
+ }
9526
+
9527
+ .aksel-stack > .aksel-stack__spacer:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
9528
+ margin-left: calc(var(--__axc-stack-gap) * -1);
9529
+ }
9530
+
9531
+ .aksel-stack > .aksel-stack__spacer:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
9532
+ margin-right: calc(var(--__axc-stack-gap) * -1);
9533
+ }
9534
+
9535
+ .aksel-stack > .aksel-stack__spacer:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
9536
+ margin-right: calc(var(--__axc-stack-gap) * -1);
8932
9537
  }
8933
9538
 
8934
9539
  @media (min-width: 480px) {