Feat: Adds outline jump nav

packages/outline-jump-nav/index.ts

@@ -0,0 +1,3 @@
+export { OutlineJumpNav } from './src/outline-jump-nav';
+export type {} from './src/outline-jump-nav';
+export {} from './src/outline-jump-nav';

packages/outline-jump-nav/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@phase2/outline-jump-nav",
+  "version": "0.1.0",
+  "description": "The Outline Components for the web jump navigation component",
+  "keywords": [
+    "outline",
+    "web-components",
+    "design system",
+    "jump-nav"
+  ],
+  "main": "index.ts",
+  "types": "index.ts",
+  "typings": "index.d.ts",
+  "files": [
+    "/dist/",
+    "!/dist/tsconfig.build.tsbuildinfo"
+  ],
+  "author": "Phase2 Technology",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/phase2/outline.git",
+    "directory": "packages/outline-jump-nav"
+  },
+  "license": "BSD-3-Clause",
+  "scripts": {
+    "build": "node ../../scripts/build.js",
+    "package": "yarn publish"
+  },
+  "dependencies": {
+    "@phase2/outline-core": "^0.1.0",
+    "lit": "^2.3.1",
+    "tslib": "^2.1.0"
+  },
+  "devDependencies": {},
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": "./index.ts"
+  }
+}

packages/outline-jump-nav/src/outline-jump-nav.css

@@ -0,0 +1,78 @@
+:host {
+  z-index: 2;
+  display: block;
+  position: sticky;
+  top: var(--top-offset);
+}
+
+.outline-jump-nav {
+  display: flex;
+  width: 100%;
+  background-color: darkgrey;
+}
+
+/* Used for storybook */
+.outline-jump-nav--nav {
+  margin-bottom: 0;
+  padding: 0.5rem 0;
+}
+
+.outline-jump-nav--container {
+  width: 100%;
+  padding: 0.5rem 0;
+  @media (min-width: 768px) {
+    padding: 0;
+  }
+}
+
+.outline-jump-nav--list {
+  list-style: none;
+  display: flex;
+  padding: 0;
+  margin: 0;
+}
+
+.outline-jump-nav--item {
+  padding-right: 7%;
+}
+
+.outline-jump-nav--link {
+  display: flex;
+  position: relative;
+  font-weight: 500;
+  font-family: sans-serif;
+  text-decoration: none;
+  color: black;
+  align-self: center;
+  padding: 0.5rem 0;
+}
+
+.outline-jump-nav--link:focus-visible {
+  outline: darkblue 4px solid;
+  border-radius: 5px;
+}
+
+.active-jump::after {
+  content: '';
+  display: flex;
+  position: absolute;
+  width: 100%;
+  height: 4px;
+  background-color: darkblue;
+  bottom: 0;
+}
+
+.outline-jump-nav--select {
+  padding: 0.5rem 0.25rem;
+  margin: 0 auto;
+  background-color: lightskyblue;
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 1.25rem;
+  font-weight: 700;
+  border-radius: 8px;
+}
+
+.outline-jump-nav--label {
+  margin: 0 auto;
+  width: fit-content;
+}