fix: done except icons

Author: glitchgirl

packages/components/outline-core-breadcrumb/src/outline-core-breadcrumb.css

@@ -1,9 +1,77 @@
 /** Jake, I removed your notes I promise I read them. - Morgan **/
 
-:host {
-  background-color: green;
+ol,
+ul {
+  list-style: none;
+
+  margin: 10px;
+
+  padding: 10px;
+
+  display: flex;
+
+  flex-direction: row;
+
+  flex-wrap: wrap;
+
+  gap: 10px;
+}
+
+li {
+  list-style: none;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  position: relative;
+  padding: 10px;
+
+  margin: 10px; 
+}
+
+/**
+* Using width,height,background,transform for breadcrumb separator because
+* content: "/"; was getting read by screen readers.
+*/
+li:not(:first-of-type)::before {
+  content: '';
+  display: flex;
+  margin-right: 10px; 
+  height: 1em;
+  width: 1px;
+  background: currentColor;
+  transform: rotate(23deg);
+}
+
+a {
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+
+  padding:10px;
+  margin:10px; 
+
+
+  &:hover {
+    text-decoration: underline;
+  }
+  &:focus,
+  &:focus-visible {
+    outline: solid 3px blue; 
+    border-radius: var(--border-radius-button-default);
+    outline-offset: var(--spacing-px);
+
+    @screen lg {
+      outline: solid 3px blue;
+    }
+  }
+}
+
+.separator {
+  margin-left: 10px; 
 }
 
-span {
-  color: red;
+.previous-link {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }

packages/components/outline-core-breadcrumb/src/outline-core-breadcrumb.lightdom.css

@@ -0,0 +1,77 @@
+/** Jake, I removed your notes I promise I read them. - Morgan **/
+
+ol,
+ul {
+  list-style: none;
+
+  margin: 10px;
+
+  padding: 10px;
+
+  display: flex;
+
+  flex-direction: row;
+
+  flex-wrap: wrap;
+
+  gap: 10px;
+}
+
+li {
+  list-style: none;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  position: relative;
+  padding: 10px;
+
+  margin: 10px; 
+}
+
+/**
+* Using width,height,background,transform for breadcrumb separator because
+* content: "/"; was getting read by screen readers.
+*/
+li:not(:first-of-type)::before {
+  content: '';
+  display: flex;
+  margin-right: 10px; 
+  height: 1em;
+  width: 1px;
+  background: currentColor;
+  transform: rotate(23deg);
+}
+
+a {
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+
+  padding:10px;
+  margin:10px; 
+
+
+  &:hover {
+    text-decoration: underline;
+  }
+  &:focus,
+  &:focus-visible {
+    outline: solid 3px blue; 
+    border-radius: var(--border-radius-button-default);
+    outline-offset: var(--spacing-px);
+
+    @screen lg {
+      outline: solid 3px blue;
+    }
+  }
+}
+
+.separator {
+  margin-left: 10px; 
+}
+
+.previous-link {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}

packages/components/outline-core-breadcrumb/src/outline-core-breadcrumb.ts

@@ -1,9 +1,10 @@
 import { html, TemplateResult, CSSResultGroup, css } from 'lit';
 import { customElement } from 'lit/decorators.js';
-
+import { AdoptedStyleSheets } from '@phase2/outline-adopted-stylesheets-controller';
 // Our base component, which all others extend.
 import { OutlineElement, SlotsController } from '@phase2/outline-core';
 import componentStyles from './outline-core-breadcrumb.css.lit';
+import globalStyles from './outline-core-breadcrumb.lightdom.css.lit';
 import { ResizeController } from './resize-controller';
 
 /** The element name, reused throughout the codebase */
@@ -31,6 +32,13 @@ const componentName = 'outline-core-breadcrumb';
 @customElement(componentName)
 export class OutlineCoreBreadcrumb extends OutlineElement {
   static styles: CSSResultGroup = [componentStyles, componentStyles, css``];
+  AdoptedStyleSheets: AdoptedStyleSheets;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.AdoptedStyleSheets = new AdoptedStyleSheets(globalStyles);
+    this.addController(this.AdoptedStyleSheets);
+  }
 
   slots = new SlotsController(this);
   resizeController = new ResizeController(this, {