@triptease/tt-navbar 0.0.13 → 0.0.15

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.
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @triptease/tt-navbar v0.0.13
2
+ * @triptease/tt-navbar v0.0.15
3
3
  */
4
4
 
5
5
  // ../../node_modules/@lit/reactive-element/css-tag.js
@@ -551,6 +551,18 @@ o4?.({ LitElement: i4 });
551
551
  (s3.litElementVersions ?? (s3.litElementVersions = [])).push("4.2.0");
552
552
 
553
553
  // src/styles.ts
554
+ var visuallyHiddenCss = i`
555
+ position: absolute;
556
+ width: 1px;
557
+ height: 1px;
558
+ margin: -1px;
559
+ padding: 0;
560
+ border: 0;
561
+ overflow: hidden;
562
+ clip: rect(0 0 0 0);
563
+ clip-path: inset(50%);
564
+ white-space: nowrap;
565
+ `;
554
566
  var styles = i`
555
567
  :host {
556
568
  --nav-bar-width: 260px;
@@ -585,6 +597,39 @@ var styles = i`
585
597
  width: 100%;
586
598
  }
587
599
 
600
+ .nav-items.sidebar-closed {
601
+ a span {
602
+ ${visuallyHiddenCss}
603
+ }
604
+
605
+ details summary span {
606
+ ${visuallyHiddenCss}
607
+ }
608
+ }
609
+
610
+ .sidebar-header {
611
+ width: 100%;
612
+ display: grid;
613
+ grid-template-columns: 1fr auto;
614
+ align-items: center;
615
+ justify-content: center;
616
+ padding: 0 var(--space-scale-2);
617
+
618
+ button {
619
+ background-color: transparent;
620
+ color: var(--color-text-inverted-400);
621
+ border: none;
622
+ }
623
+ }
624
+
625
+ .sidebar-header.sidebar-closed {
626
+ padding: 0 var(--space-scale-1);
627
+ .logo {
628
+ display: none;
629
+ visibility: hidden;
630
+ }
631
+ }
632
+
588
633
  hr {
589
634
  width: 100%;
590
635
  height: 1px;
@@ -610,6 +655,19 @@ var styles = i`
610
655
  }
611
656
  }
612
657
 
658
+ .tertiary-nav.sidebar-closed {
659
+ .external-link,
660
+ slot,
661
+ hr {
662
+ display: none;
663
+ visibility: hidden;
664
+ }
665
+
666
+ a span {
667
+ ${visuallyHiddenCss}
668
+ }
669
+ }
670
+
613
671
  .icon {
614
672
  display: flex;
615
673
  align-items: center;
@@ -632,6 +690,10 @@ var styles = i`
632
690
  }
633
691
  }
634
692
 
693
+ nav.sidebar-closed {
694
+ width: fit-content;
695
+ }
696
+
635
697
  details {
636
698
  border-radius: var(--border-radius-100);
637
699
 
@@ -700,10 +762,6 @@ var styles = i`
700
762
  }
701
763
  }
702
764
 
703
- .logo {
704
- padding: 0 var(--space-scale-2);
705
- }
706
-
707
765
  .sub-nav-item:hover,
708
766
  .sub-nav-item:focus-visible,
709
767
  .nav-item:hover,