@triptease/tt-navbar 0.0.6 → 0.0.8

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 (22) hide show
  1. package/dist/src/TtNavbar.js +2 -2
  2. package/dist/src/TtNavbar.js.map +1 -1
  3. package/dist/src/styles.js +140 -2
  4. package/dist/src/styles.js.map +1 -1
  5. package/dist/stories/index.stories.js +1 -2
  6. package/dist/stories/index.stories.js.map +1 -1
  7. package/dist/test/tt-navbar.test.js +4 -4
  8. package/dist/test/tt-navbar.test.js.map +1 -1
  9. package/dist/web/TtNavbar.js +143 -5
  10. package/dist/web/TtNavbar.js.map +2 -2
  11. package/dist/web/index.js +143 -5
  12. package/dist/web/index.js.map +2 -2
  13. package/dist/web/styles.js +141 -3
  14. package/dist/web/styles.js.map +2 -2
  15. package/dist/web/tt-navbar.js +143 -5
  16. package/dist/web/tt-navbar.js.map +2 -2
  17. package/package.json +1 -1
  18. package/src/TtNavbar.ts +2 -2
  19. package/src/styles.ts +140 -2
  20. package/stories/index.stories.ts +1 -5
  21. package/test/tt-navbar.test.ts +4 -4
  22. package/demo/index.html +0 -30
package/dist/web/tt-navbar.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @triptease/tt-navbar v0.0.6
2
+ * @triptease/tt-navbar v0.0.8
3
3
  */
4
4
  var __defProp = Object.defineProperty;
5
5
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -592,10 +592,30 @@ function n4(t3) {
592
592
 
593
593
  // src/styles.ts
594
594
  var styles = i`
595
+ :host {
596
+ --nav-bar-width: 260px;
597
+
598
+ display: block;
599
+ height: 100vh;
600
+ }
601
+
602
+ * {
603
+ box-sizing: border-box;
604
+ }
605
+
595
606
  nav {
596
- max-width: 260px;
607
+ min-width: var(--nav-bar-width);
608
+ width: var(--nav-bar-width);
609
+ min-height: 100vh;
610
+ height: max-content;
597
611
  display: flex;
612
+ align-items: start;
613
+ gap: var(--space-scale-3-5);
598
614
  flex-direction: column;
615
+ background-color: var(--color-surface-inverted-100);
616
+ color: var(--color-text-inverted-400);
617
+ padding-top: var(--space-scale-2);
618
+ padding-bottom: var(--space-scale-2);
599
619
  }
600
620
 
601
621
  nav details div {
@@ -604,11 +624,129 @@ var styles = i`
604
624
  }
605
625
 
606
626
  hr {
607
- background: black;
608
627
  width: 100%;
609
628
  height: 1px;
629
+ background-color: var(--color-surface-inverted-200);
610
630
  border: none;
611
631
  }
632
+
633
+ #tertiary-nav {
634
+ display: flex;
635
+ flex-direction: column;
636
+ margin-top: auto;
637
+ gap: var(--space-scale-2);
638
+ width: 100%;
639
+
640
+ .external-link {
641
+ font-size: var(--font-size-100);
642
+ line-height: var(--font-line-height-100);
643
+
644
+ .icon {
645
+ width: var(--space-scale-2);
646
+ height: var(--space-scale-2);
647
+ }
648
+ }
649
+ }
650
+
651
+ .icon {
652
+ width: var(--space-scale-3);
653
+ height: var(--space-scale-3);
654
+ display: inline;
655
+ color: var(--nav-item-color);
656
+ }
657
+
658
+ a {
659
+ font-size: var(--font-size-100);
660
+ line-height: var(--font-line-height-100);
661
+ gap: var(--space-scale-1-5);
662
+ border-radius: var(--border-radius-100);
663
+ color: var(--nav-item-color);
664
+ text-decoration: none;
665
+ padding: var(--space-scale-1);
666
+ width: 100%;
667
+ }
668
+
669
+ details {
670
+ width: 100%;
671
+ border-radius: var(--border-radius-100);
672
+
673
+ summary {
674
+ font-size: var(--font-size-100);
675
+ line-height: var(--font-line-height-100);
676
+ position: relative;
677
+ display: flex;
678
+ align-items: baseline;
679
+
680
+ &::marker {
681
+ content: '';
682
+ }
683
+ }
684
+
685
+ svg.chevron {
686
+ margin-left: auto;
687
+ margin-right: var(--space-scale-1);
688
+ width: var(--space-scale-2);
689
+ }
690
+
691
+ &[open] svg.chevron {
692
+ transform: rotate(180deg);
693
+ }
694
+
695
+ .dropdown-items {
696
+ display: flex;
697
+ flex-direction: column;
698
+ }
699
+ }
700
+
701
+ details > summary {
702
+ display: flex;
703
+ gap: var(--space-scale-1-5);
704
+ padding: var(--space-scale-1);
705
+ border-radius: var(--border-radius-100);
706
+ color: var(--nav-item-color);
707
+ align-items: center;
708
+
709
+ a {
710
+ color: var(--nav-item-color);
711
+ }
712
+
713
+ &:hover,
714
+ &:focus-visible {
715
+ background-color: var(--color-surface-inverted-200);
716
+ border-radius: var(--border-radius-100);
717
+ text-decoration: none;
718
+ }
719
+ }
720
+
721
+ .sub-nav-item {
722
+ padding-left: 44px;
723
+ padding-top: 10px;
724
+ padding-bottom: 10px;
725
+ color: var(--color-text-inverted-400);
726
+ font-size: var(--font-size-100);
727
+ line-height: var(--font-line-height-100);
728
+
729
+ button {
730
+ color: var(--color-text-inverted-400);
731
+ padding: 0;
732
+ }
733
+ }
734
+
735
+ .sub-nav-item:hover,
736
+ .sub-nav-item:focus-visible,
737
+ a:hover,
738
+ a:focus-visible {
739
+ background-color: var(--color-surface-inverted-200);
740
+ border-radius: var(--border-radius-100);
741
+ text-decoration: none;
742
+ color: var(--color-text-inverted-400);
743
+
744
+ .icon {
745
+ color: var(--color-text-inverted-400);
746
+ }
747
+ }
748
+
749
+
612
750
  `;
613
751
 
614
752
  // src/TtNavbar.ts
@@ -714,10 +852,10 @@ __decorateClass([
714
852
  n4({ type: Function })
715
853
  ], TtNavbar.prototype, "navigate", 2);
716
854
  __decorateClass([
717
- n4({ type: String })
855
+ n4({ type: String, attribute: "base-url" })
718
856
  ], TtNavbar.prototype, "baseUrl", 2);
719
857
  __decorateClass([
720
- n4({ type: String })
858
+ n4({ type: String, attribute: "client-key" })
721
859
  ], TtNavbar.prototype, "clientKey", 2);
722
860
 
723
861
  // src/tt-navbar.ts