@bi-digital/css 0.0.0-experimental-ca10f7e → 0.0.0-experimental-aff96f9

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 (10) hide show
  1. package/dist/baseline.css +36 -0
  2. package/dist/components/checkbox-subsection.css +22 -0
  3. package/dist/components/filter-group.css +80 -0
  4. package/dist/components/navbar.css +9 -27
  5. package/dist/components/skip-link.css +32 -0
  6. package/dist/components/sticky-header.css +11 -0
  7. package/dist/components/sub-navbar.css +34 -0
  8. package/dist/components.css +188 -22
  9. package/dist/index.css +36 -0
  10. package/package.json +2 -2
package/dist/baseline.css CHANGED
@@ -10,3 +10,39 @@ html:has(bi-navbar) {
10
10
  html:has(bi-in-page-links) {
11
11
  scroll-padding-top: var(--bi-layout-navbar-height);
12
12
  }
13
+
14
+ html:has(.bi-navbar) {
15
+ scroll-padding-top: var(--bi-layout-navbar-height);
16
+ }
17
+
18
+ html:has(.bi-sub-navbar) {
19
+ scroll-padding-top: var(--bi-layout-navbar-height);
20
+ }
21
+
22
+ html .bi-sticky-header {
23
+ top: 0;
24
+ }
25
+
26
+ html:has(.bi-navbar[data-fixed="true"]) .bi-sticky-header {
27
+ top: var(--bi-layout-navbar-height);
28
+ }
29
+
30
+ html:has(.bi-sub-navbar[data-fixed="true"][data-scroll-dir="down"]) .bi-navbar > header {
31
+ transform: translateY(-100%);
32
+ }
33
+
34
+ html:has(.bi-sub-navbar[data-fixed="true"][data-scroll-dir="down"]) .bi-sub-navbar {
35
+ top: 0;
36
+ }
37
+
38
+ html:has(.bi-navbar[data-fixed="true"]):has(.bi-sub-navbar[data-fixed="true"][data-scroll-dir="up"]) .bi-navbar > header {
39
+ transform: translateY(0);
40
+ }
41
+
42
+ html:has(.bi-navbar[data-fixed="true"]):has(.bi-sub-navbar[data-fixed="true"][data-scroll-dir="up"]) .bi-sub-navbar {
43
+ top: var(--bi-layout-navbar-height);
44
+ }
45
+
46
+ html:has(.bi-navbar[data-fixed="true"]):has(.bi-sub-navbar[data-fixed="true"][data-scroll-dir="up"]) .bi-sticky-header {
47
+ top: calc(var(--bi-layout-navbar-height) + var(--bi-layout-navbar-height));
48
+ }
package/dist/components/checkbox-subsection.css ADDED
@@ -0,0 +1,22 @@
1
+ .bi-checkbox-subsection {
2
+ --bic-checkbox-subsection-line-bg: var(--bi-neutral-30);
3
+ display: flex;
4
+ }
5
+
6
+ .bi-checkbox-subsection[data-dark="true"] {
7
+ --bic-checkbox-subsection-line-bg: var(--bi-neutral-50);
8
+ }
9
+
10
+ .bi-checkbox-subsection > div:first-child {
11
+ margin: 0 var(--bi-scale-3x) 0 var(--bi-scale-5x);
12
+ background-color: var(--bic-checkbox-subsection-line-bg);
13
+ width: var(--bi-stroke-default);
14
+ }
15
+
16
+ .bi-checkbox-subsection > div:last-child {
17
+ align-items: flex-start;
18
+ gap: var(--bi-scale-0-50x);
19
+ flex-direction: column;
20
+ flex: 1;
21
+ display: flex;
22
+ }
package/dist/components/filter-group.css ADDED
@@ -0,0 +1,80 @@
1
+ .bi-filter-group {
2
+ --bic-filter-group-background-color: var(--bi-basic-white);
3
+ --bic-filter-group-background-color-hover: var(--bi-primary-5);
4
+ --bic-filter-group-background-color-expanded: var(--bi-neutral-15);
5
+ --bic-filter-group-border-color: var(--bi-neutral-15);
6
+ --bic-filter-group-text-color: var(--bi-neutral-90);
7
+ }
8
+
9
+ .bi-filter-group[data-dark="true"] {
10
+ --bic-filter-group-background-color: var(--bi-neutral-90);
11
+ --bic-filter-group-background-color-hover: var(--bi-primary-90);
12
+ --bic-filter-group-background-color-expanded: var(--bi-neutral-80);
13
+ --bic-filter-group-border-color: var(--bi-neutral-70);
14
+ --bic-filter-group-text-color: var(--bi-basic-white);
15
+ }
16
+
17
+ .bi-filter-group {
18
+ flex-direction: column;
19
+ display: flex;
20
+ }
21
+
22
+ .bi-filter-group > button {
23
+ box-shadow: 0 var(--bi-scale-0-25x) 0 0 var(--bic-filter-group-border-color);
24
+ height: var(--bi-scale-12x);
25
+ color: var(--bic-filter-group-text-color);
26
+ align-items: center;
27
+ gap: var(--bi-scale-2x);
28
+ width: 100%;
29
+ padding: var(--bi-scale-2x) var(--bi-scale-1-5x);
30
+ background: var(--bic-filter-group-background-color);
31
+ cursor: pointer;
32
+ border-radius: var(--bi-radius-small) var(--bi-radius-small) 0 0;
33
+ border: none;
34
+ flex-direction: row;
35
+ font-size: 1rem;
36
+ display: flex;
37
+ }
38
+
39
+ .bi-filter-group > button:hover {
40
+ background: var(--bic-filter-group-background-color-hover);
41
+ }
42
+
43
+ .bi-filter-group > button:focus-visible {
44
+ box-shadow: 0 0 0 4.5px var(--bi-basic-white);
45
+ outline: 1.5px solid var(--bi-primary-50);
46
+ outline-offset: 2px;
47
+ border-radius: var(--bi-radius-small);
48
+ }
49
+
50
+ .bi-filter-group > button > [data-bi-icon="true"] {
51
+ width: var(--bi-scale-6x);
52
+ height: var(--bi-scale-6x);
53
+ font-size: var(--bi-icon-medium);
54
+ }
55
+
56
+ .bi-filter-group > button > h3 {
57
+ text-align: left;
58
+ flex: 1;
59
+ margin: 0;
60
+ font-family: museo-sans, Arial, sans-serif;
61
+ font-weight: 700;
62
+ line-height: 1.5;
63
+ }
64
+
65
+ .bi-filter-group > div {
66
+ gap: var(--bi-scale-2x);
67
+ padding: var(--bi-scale-3x) 0 var(--bi-scale-8x);
68
+ flex-direction: column;
69
+ display: none;
70
+ }
71
+
72
+ .bi-filter-group[data-expanded="true"] > button {
73
+ box-shadow: none;
74
+ --bic-filter-group-background-color: var(--bic-filter-group-background-color-expanded);
75
+ border-radius: var(--bi-radius-small);
76
+ }
77
+
78
+ .bi-filter-group[data-expanded="true"] > div {
79
+ display: flex;
80
+ }
package/dist/components/navbar.css CHANGED
@@ -13,7 +13,7 @@
13
13
  --bic-navbar-color: var(--bi-basic-white);
14
14
  }
15
15
 
16
- .bi-navbar .bi-navbar__header {
16
+ .bi-navbar > header {
17
17
  height: var(--bi-layout-navbar-height);
18
18
  align-items: center;
19
19
  gap: var(--bi-scale-6x);
@@ -24,38 +24,20 @@
24
24
  display: flex;
25
25
  }
26
26
 
27
- .bi-navbar .bi-navbar__header > :first-child {
27
+ @media (prefers-reduced-motion: no-preference) {
28
+ .bi-navbar > header {
29
+ transition: transform .2s ease-in-out;
30
+ }
31
+ }
32
+
33
+ .bi-navbar > header > :first-child {
28
34
  margin-right: auto;
29
35
  }
30
36
 
31
- .bi-navbar[data-fixed="true"] .bi-navbar__header {
37
+ .bi-navbar[data-fixed="true"] > header {
32
38
  z-index: 100;
33
39
  position: fixed;
34
40
  top: 0;
35
41
  left: 0;
36
42
  right: 0;
37
43
  }
38
-
39
- .bi-navbar .bi-navbar__skip-link {
40
- background: var(--bi-primary-50);
41
- color: var(--bi-basic-white);
42
- outline-offset: 0px;
43
- border-radius: 4px;
44
- align-content: center;
45
- height: 44px;
46
- padding: 0 7px;
47
- font-size: .75rem;
48
- font-weight: 400;
49
- position: absolute;
50
- left: 50%;
51
- transform: translate(-50%, -62px);
52
- }
53
-
54
- .bi-navbar .bi-navbar__skip-link:focus {
55
- border-radius: var(--bi-radius-medium);
56
- outline-offset: 2px;
57
- outline: 1.5px solid var(--bi-primary-50);
58
- box-shadow: 0 0 0 2px var(--bi-basic-white);
59
- transition: transform .3s;
60
- transform: translate(-50%);
61
- }
package/dist/components/skip-link.css ADDED
@@ -0,0 +1,32 @@
1
+ .bi-skip-link {
2
+ --bic-skip-link-color: var(--bi-basic-white);
3
+ --bic-skip-link-background: var(--bi-primary-50);
4
+ background: var(--bic-skip-link-background);
5
+ color: var(--bic-skip-link-color);
6
+ outline-offset: 0px;
7
+ z-index: 200;
8
+ border-radius: 4px;
9
+ align-content: center;
10
+ height: 44px;
11
+ padding: 0 7px;
12
+ font-size: 1rem;
13
+ font-weight: 500;
14
+ transition: transform .3s ease-in-out;
15
+ position: absolute;
16
+ left: 50%;
17
+ transform: translate(-50%, -110%);
18
+ }
19
+
20
+ @media (prefers-reduced-motion: reduce) {
21
+ .bi-skip-link {
22
+ transition: none;
23
+ }
24
+ }
25
+
26
+ .bi-skip-link:focus {
27
+ transform: translate(-50%, var(--bi-scale-2x));
28
+ border-radius: var(--bi-radius-medium);
29
+ outline-offset: 2px;
30
+ outline: 1.5px solid var(--bi-primary-50);
31
+ box-shadow: 0 0 0 2px var(--bi-basic-white);
32
+ }
package/dist/components/sticky-header.css ADDED
@@ -0,0 +1,11 @@
1
+ .bi-sticky-header {
2
+ z-index: 101;
3
+ position: -webkit-sticky;
4
+ position: sticky;
5
+ }
6
+
7
+ @media (prefers-reduced-motion: no-preference) {
8
+ .bi-sticky-header {
9
+ transition: top .2s ease-in-out;
10
+ }
11
+ }
package/dist/components/sub-navbar.css ADDED
@@ -0,0 +1,34 @@
1
+ .bi-sub-navbar--wrapper {
2
+ height: var(--bi-layout-navbar-height);
3
+ position: relative;
4
+ }
5
+
6
+ .bi-sub-navbar--wrapper .bi-sub-navbar {
7
+ --bic-sub-navbar-background-color: var(--bi-basic-white);
8
+ --bic-sub-navbar-color: var(--bi-basic-key);
9
+ --bic-sub-navbar-border-color: var(--bi-neutral-15);
10
+ height: var(--bi-layout-navbar-height);
11
+ background-color: var(--bic-sub-navbar-background-color);
12
+ border-bottom: 1px solid var(--bic-sub-navbar-border-color);
13
+ width: 100%;
14
+ position: absolute;
15
+ top: 0;
16
+ left: 0;
17
+ }
18
+
19
+ .bi-sub-navbar--wrapper .bi-sub-navbar[data-dark="true"] {
20
+ --bic-sub-navbar-background-color: var(--bi-primary-95);
21
+ --bic-sub-navbar-color: var(--bi-basic-white);
22
+ --bic-sub-navbar-border-color: var(--bi-neutral-70);
23
+ }
24
+
25
+ .bi-sub-navbar--wrapper .bi-sub-navbar[data-fixed="true"] {
26
+ z-index: 101;
27
+ position: fixed;
28
+ }
29
+
30
+ @media (prefers-reduced-motion: no-preference) {
31
+ .bi-sub-navbar--wrapper .bi-sub-navbar[data-fixed="true"] {
32
+ transition: top .2s ease-in-out;
33
+ }
34
+ }
package/dist/components.css CHANGED
@@ -794,6 +794,29 @@
794
794
  line-height: 1.15;
795
795
  }
796
796
 
797
+ .bi-checkbox-subsection {
798
+ --bic-checkbox-subsection-line-bg: var(--bi-neutral-30);
799
+ display: flex;
800
+ }
801
+
802
+ .bi-checkbox-subsection[data-dark="true"] {
803
+ --bic-checkbox-subsection-line-bg: var(--bi-neutral-50);
804
+ }
805
+
806
+ .bi-checkbox-subsection > div:first-child {
807
+ margin: 0 var(--bi-scale-3x) 0 var(--bi-scale-5x);
808
+ background-color: var(--bic-checkbox-subsection-line-bg);
809
+ width: var(--bi-stroke-default);
810
+ }
811
+
812
+ .bi-checkbox-subsection > div:last-child {
813
+ align-items: flex-start;
814
+ gap: var(--bi-scale-0-50x);
815
+ flex-direction: column;
816
+ flex: 1;
817
+ display: flex;
818
+ }
819
+
797
820
  .bi-chip {
798
821
  --bic-chip-background: var(--bi-primary-5);
799
822
  --bic-chip-background-hover: var(--bi-primary-10);
@@ -1633,6 +1656,87 @@ body:has(.bi-dialog:modal) {
1633
1656
  opacity: var(--ds-opacity-disabled);
1634
1657
  }
1635
1658
 
1659
+ .bi-filter-group {
1660
+ --bic-filter-group-background-color: var(--bi-basic-white);
1661
+ --bic-filter-group-background-color-hover: var(--bi-primary-5);
1662
+ --bic-filter-group-background-color-expanded: var(--bi-neutral-15);
1663
+ --bic-filter-group-border-color: var(--bi-neutral-15);
1664
+ --bic-filter-group-text-color: var(--bi-neutral-90);
1665
+ }
1666
+
1667
+ .bi-filter-group[data-dark="true"] {
1668
+ --bic-filter-group-background-color: var(--bi-neutral-90);
1669
+ --bic-filter-group-background-color-hover: var(--bi-primary-90);
1670
+ --bic-filter-group-background-color-expanded: var(--bi-neutral-80);
1671
+ --bic-filter-group-border-color: var(--bi-neutral-70);
1672
+ --bic-filter-group-text-color: var(--bi-basic-white);
1673
+ }
1674
+
1675
+ .bi-filter-group {
1676
+ flex-direction: column;
1677
+ display: flex;
1678
+ }
1679
+
1680
+ .bi-filter-group > button {
1681
+ box-shadow: 0 var(--bi-scale-0-25x) 0 0 var(--bic-filter-group-border-color);
1682
+ height: var(--bi-scale-12x);
1683
+ color: var(--bic-filter-group-text-color);
1684
+ align-items: center;
1685
+ gap: var(--bi-scale-2x);
1686
+ width: 100%;
1687
+ padding: var(--bi-scale-2x) var(--bi-scale-1-5x);
1688
+ background: var(--bic-filter-group-background-color);
1689
+ cursor: pointer;
1690
+ border-radius: var(--bi-radius-small) var(--bi-radius-small) 0 0;
1691
+ border: none;
1692
+ flex-direction: row;
1693
+ font-size: 1rem;
1694
+ display: flex;
1695
+ }
1696
+
1697
+ .bi-filter-group > button:hover {
1698
+ background: var(--bic-filter-group-background-color-hover);
1699
+ }
1700
+
1701
+ .bi-filter-group > button:focus-visible {
1702
+ box-shadow: 0 0 0 4.5px var(--bi-basic-white);
1703
+ outline: 1.5px solid var(--bi-primary-50);
1704
+ outline-offset: 2px;
1705
+ border-radius: var(--bi-radius-small);
1706
+ }
1707
+
1708
+ .bi-filter-group > button > [data-bi-icon="true"] {
1709
+ width: var(--bi-scale-6x);
1710
+ height: var(--bi-scale-6x);
1711
+ font-size: var(--bi-icon-medium);
1712
+ }
1713
+
1714
+ .bi-filter-group > button > h3 {
1715
+ text-align: left;
1716
+ flex: 1;
1717
+ margin: 0;
1718
+ font-family: museo-sans, Arial, sans-serif;
1719
+ font-weight: 700;
1720
+ line-height: 1.5;
1721
+ }
1722
+
1723
+ .bi-filter-group > div {
1724
+ gap: var(--bi-scale-2x);
1725
+ padding: var(--bi-scale-3x) 0 var(--bi-scale-8x);
1726
+ flex-direction: column;
1727
+ display: none;
1728
+ }
1729
+
1730
+ .bi-filter-group[data-expanded="true"] > button {
1731
+ box-shadow: none;
1732
+ --bic-filter-group-background-color: var(--bic-filter-group-background-color-expanded);
1733
+ border-radius: var(--bi-radius-small);
1734
+ }
1735
+
1736
+ .bi-filter-group[data-expanded="true"] > div {
1737
+ display: flex;
1738
+ }
1739
+
1636
1740
  .bi-footer {
1637
1741
  --bic-footer-color: var(--bi-basic-key);
1638
1742
  --bic-footer-background: var(--bi-basic-white);
@@ -2319,7 +2423,7 @@ body:has(.bi-dialog:modal) {
2319
2423
  --bic-navbar-color: var(--bi-basic-white);
2320
2424
  }
2321
2425
 
2322
- .bi-navbar .bi-navbar__header {
2426
+ .bi-navbar > header {
2323
2427
  height: var(--bi-layout-navbar-height);
2324
2428
  align-items: center;
2325
2429
  gap: var(--bi-scale-6x);
@@ -2330,11 +2434,17 @@ body:has(.bi-dialog:modal) {
2330
2434
  display: flex;
2331
2435
  }
2332
2436
 
2333
- .bi-navbar .bi-navbar__header > :first-child {
2437
+ @media (prefers-reduced-motion: no-preference) {
2438
+ .bi-navbar > header {
2439
+ transition: transform .2s ease-in-out;
2440
+ }
2441
+ }
2442
+
2443
+ .bi-navbar > header > :first-child {
2334
2444
  margin-right: auto;
2335
2445
  }
2336
2446
 
2337
- .bi-navbar[data-fixed="true"] .bi-navbar__header {
2447
+ .bi-navbar[data-fixed="true"] > header {
2338
2448
  z-index: 100;
2339
2449
  position: fixed;
2340
2450
  top: 0;
@@ -2342,28 +2452,39 @@ body:has(.bi-dialog:modal) {
2342
2452
  right: 0;
2343
2453
  }
2344
2454
 
2345
- .bi-navbar .bi-navbar__skip-link {
2346
- background: var(--bi-primary-50);
2347
- color: var(--bi-basic-white);
2348
- outline-offset: 0px;
2349
- border-radius: 4px;
2350
- align-content: center;
2351
- height: 44px;
2352
- padding: 0 7px;
2353
- font-size: .75rem;
2354
- font-weight: 400;
2455
+ .bi-sub-navbar--wrapper {
2456
+ height: var(--bi-layout-navbar-height);
2457
+ position: relative;
2458
+ }
2459
+
2460
+ .bi-sub-navbar--wrapper .bi-sub-navbar {
2461
+ --bic-sub-navbar-background-color: var(--bi-basic-white);
2462
+ --bic-sub-navbar-color: var(--bi-basic-key);
2463
+ --bic-sub-navbar-border-color: var(--bi-neutral-15);
2464
+ height: var(--bi-layout-navbar-height);
2465
+ background-color: var(--bic-sub-navbar-background-color);
2466
+ border-bottom: 1px solid var(--bic-sub-navbar-border-color);
2467
+ width: 100%;
2355
2468
  position: absolute;
2356
- left: 50%;
2357
- transform: translate(-50%, -62px);
2469
+ top: 0;
2470
+ left: 0;
2358
2471
  }
2359
2472
 
2360
- .bi-navbar .bi-navbar__skip-link:focus {
2361
- border-radius: var(--bi-radius-medium);
2362
- outline-offset: 2px;
2363
- outline: 1.5px solid var(--bi-primary-50);
2364
- box-shadow: 0 0 0 2px var(--bi-basic-white);
2365
- transition: transform .3s;
2366
- transform: translate(-50%);
2473
+ .bi-sub-navbar--wrapper .bi-sub-navbar[data-dark="true"] {
2474
+ --bic-sub-navbar-background-color: var(--bi-primary-95);
2475
+ --bic-sub-navbar-color: var(--bi-basic-white);
2476
+ --bic-sub-navbar-border-color: var(--bi-neutral-70);
2477
+ }
2478
+
2479
+ .bi-sub-navbar--wrapper .bi-sub-navbar[data-fixed="true"] {
2480
+ z-index: 101;
2481
+ position: fixed;
2482
+ }
2483
+
2484
+ @media (prefers-reduced-motion: no-preference) {
2485
+ .bi-sub-navbar--wrapper .bi-sub-navbar[data-fixed="true"] {
2486
+ transition: top .2s ease-in-out;
2487
+ }
2367
2488
  }
2368
2489
 
2369
2490
  .bi-pagination {
@@ -2502,6 +2623,39 @@ body:has(.bi-dialog:modal) {
2502
2623
  display: none;
2503
2624
  }
2504
2625
 
2626
+ .bi-skip-link {
2627
+ --bic-skip-link-color: var(--bi-basic-white);
2628
+ --bic-skip-link-background: var(--bi-primary-50);
2629
+ background: var(--bic-skip-link-background);
2630
+ color: var(--bic-skip-link-color);
2631
+ outline-offset: 0px;
2632
+ z-index: 200;
2633
+ border-radius: 4px;
2634
+ align-content: center;
2635
+ height: 44px;
2636
+ padding: 0 7px;
2637
+ font-size: 1rem;
2638
+ font-weight: 500;
2639
+ transition: transform .3s ease-in-out;
2640
+ position: absolute;
2641
+ left: 50%;
2642
+ transform: translate(-50%, -110%);
2643
+ }
2644
+
2645
+ @media (prefers-reduced-motion: reduce) {
2646
+ .bi-skip-link {
2647
+ transition: none;
2648
+ }
2649
+ }
2650
+
2651
+ .bi-skip-link:focus {
2652
+ transform: translate(-50%, var(--bi-scale-2x));
2653
+ border-radius: var(--bi-radius-medium);
2654
+ outline-offset: 2px;
2655
+ outline: 1.5px solid var(--bi-primary-50);
2656
+ box-shadow: 0 0 0 2px var(--bi-basic-white);
2657
+ }
2658
+
2505
2659
  .bi-spinner {
2506
2660
  --bic-spinner-color: currentColor;
2507
2661
  aspect-ratio: 1;
@@ -2554,6 +2708,18 @@ body:has(.bi-dialog:modal) {
2554
2708
  }
2555
2709
  }
2556
2710
 
2711
+ .bi-sticky-header {
2712
+ z-index: 101;
2713
+ position: -webkit-sticky;
2714
+ position: sticky;
2715
+ }
2716
+
2717
+ @media (prefers-reduced-motion: no-preference) {
2718
+ .bi-sticky-header {
2719
+ transition: top .2s ease-in-out;
2720
+ }
2721
+ }
2722
+
2557
2723
  .bi-tabs {
2558
2724
  --bic-tabs-tab-color-selected: var(--bi-primary-50);
2559
2725
  --bic-tabs-panel-padding: var(--bi-scale-4x) var(--bi-scale-5x);
package/dist/index.css CHANGED
@@ -396,3 +396,39 @@ html:has(bi-navbar) {
396
396
  html:has(bi-in-page-links) {
397
397
  scroll-padding-top: var(--bi-layout-navbar-height);
398
398
  }
399
+
400
+ html:has(.bi-navbar) {
401
+ scroll-padding-top: var(--bi-layout-navbar-height);
402
+ }
403
+
404
+ html:has(.bi-sub-navbar) {
405
+ scroll-padding-top: var(--bi-layout-navbar-height);
406
+ }
407
+
408
+ html .bi-sticky-header {
409
+ top: 0;
410
+ }
411
+
412
+ html:has(.bi-navbar[data-fixed="true"]) .bi-sticky-header {
413
+ top: var(--bi-layout-navbar-height);
414
+ }
415
+
416
+ html:has(.bi-sub-navbar[data-fixed="true"][data-scroll-dir="down"]) .bi-navbar > header {
417
+ transform: translateY(-100%);
418
+ }
419
+
420
+ html:has(.bi-sub-navbar[data-fixed="true"][data-scroll-dir="down"]) .bi-sub-navbar {
421
+ top: 0;
422
+ }
423
+
424
+ html:has(.bi-navbar[data-fixed="true"]):has(.bi-sub-navbar[data-fixed="true"][data-scroll-dir="up"]) .bi-navbar > header {
425
+ transform: translateY(0);
426
+ }
427
+
428
+ html:has(.bi-navbar[data-fixed="true"]):has(.bi-sub-navbar[data-fixed="true"][data-scroll-dir="up"]) .bi-sub-navbar {
429
+ top: var(--bi-layout-navbar-height);
430
+ }
431
+
432
+ html:has(.bi-navbar[data-fixed="true"]):has(.bi-sub-navbar[data-fixed="true"][data-scroll-dir="up"]) .bi-sticky-header {
433
+ top: calc(var(--bi-layout-navbar-height) + var(--bi-layout-navbar-height));
434
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bi-digital/css",
3
- "version": "0.0.0-experimental-ca10f7e",
3
+ "version": "0.0.0-experimental-aff96f9",
4
4
  "description": "CSS for the BI Design System",
5
5
  "author": "BI Digital",
6
6
  "license": "ISC",
@@ -23,7 +23,7 @@
23
23
  "lightningcss": "^1.30.1",
24
24
  "modern-normalize": "^3.0.1",
25
25
  "rimraf": "^6.0.1",
26
- "@bi-digital/tokens": "0.0.0-experimental-ca10f7e"
26
+ "@bi-digital/tokens": "0.0.0-experimental-aff96f9"
27
27
  },
28
28
  "scripts": {
29
29
  "build": "rimraf dist && node config.js",