WIP: Header & Navigation Preview

apps/demo/partials/web/layout/default.hbs

@@ -4,11 +4,17 @@
   {{> cover}}
 
   <main class="py-1000">
-    <div class="Container">
+
+    {{#unless isFullWidth}}
+      <div class="Container">
+    {{/unless}}
 
       {{> @partial-block}}
 
-    </div>
+    {{#unless isFullWidth}}
+      </div>
+    {{/unless}}
+
   </main>
 
   {{> footer}}

packages/web/src/scss/components/Navigation/README.md

@@ -0,0 +1,7 @@
+# Divider
+
+The `Divider` component is used as horizontal separator of the content.
+
+```html
+<hr class="Divider" />
+```

packages/web/src/scss/components/Navigation/_Navigation.scss

@@ -0,0 +1,35 @@
+@use '../../tools/reset';
+@use 'theme';
+
+.Navigation,
+.Navigation > ul,
+.Navigation > ul > li {
+    display: flex;
+}
+
+.Navigation:not(.Navigation--main),
+.Navigation:not(.Navigation--main) > ul {
+    gap: theme.$gap;
+    align-content: center;
+}
+
+.Navigation > ul {
+    @include reset.list();
+}
+
+.Navigation--main {
+    align-self: stretch;
+    align-items: stretch;
+}
+
+.Navigation--start {
+    margin-inline-end: auto;
+
+    &:not(:first-child) {
+        margin-inline-start: theme.$start-spacing;
+    }
+}
+
+.Navigation--end {
+    margin-inline-start: auto;
+}

packages/web/src/scss/components/Navigation/_NavigationLink.scss

@@ -0,0 +1,50 @@
+@use '../../tools/typography';
+@use 'theme';
+
+.NavigationLink {
+    @include typography.generate(theme.$link-typography);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-inline: theme.$link-spacing;
+    color: theme.$link-color-state-default;
+    border-top: theme.$link-border-bottom-width theme.$link-border-bottom-style transparent;
+    border-bottom: theme.$link-border-bottom-width theme.$link-border-bottom-style
+        theme.$link-border-bottom-color-style-state-default;
+    background-color: theme.$link-background-color-state-default;
+
+    @media (hover: hover) {
+        &:hover {
+            text-decoration: none;
+            color: theme.$link-color-state-hover;
+            background-color: theme.$link-background-color-state-hover;
+        }
+    }
+
+    &:active {
+        color: theme.$link-color-state-active;
+        background-color: theme.$link-background-color-state-active;
+    }
+}
+
+.NavigationLink--selected {
+    color: theme.$link-color-state-selected;
+    border-bottom-color: theme.$link-border-bottom-color-style-selected-state-default;
+    background-color: theme.$link-background-color-state-selected;
+
+    @media (hover: hover) {
+        &:hover {
+            border-bottom-color: theme.$link-border-bottom-color-style-selected-state-hover;
+        }
+    }
+
+    &:active {
+        border-bottom-color: theme.$link-border-bottom-color-style-selected-state-active;
+    }
+}
+
+.NavigationLink--disabled {
+    color: theme.$link-color-state-disabled;
+    pointer-events: none;
+}

packages/web/src/scss/components/Navigation/_theme.scss

@@ -0,0 +1,22 @@
+@use '@tokens' as tokens;
+
+$gap: tokens.$space-700;
+$start-spacing: tokens.$space-1000;
+
+$link-typography: tokens.$body-small-semibold;
+$link-spacing: tokens.$space-600;
+$link-color-state-default: tokens.$component-header-item-state-default;
+$link-color-state-hover: tokens.$component-header-item-state-hover;
+$link-color-state-active: tokens.$component-header-item-state-active;
+$link-color-state-selected: tokens.$component-header-item-state-selected;
+$link-color-state-disabled: tokens.$disabled-content;
+$link-border-bottom-width: tokens.$border-width-200;
+$link-border-bottom-style: solid;
+$link-border-bottom-color-style-state-default: transparent;
+$link-border-bottom-color-style-selected-state-default: tokens.$component-header-stripe-state-selected;
+$link-border-bottom-color-style-selected-state-hover: tokens.$component-header-stripe-state-unselected;
+$link-border-bottom-color-style-selected-state-active: tokens.$component-header-stripe-state-unselected;
+$link-background-color-state-default: tokens.$component-header-item-background-state-default;
+$link-background-color-state-hover: tokens.$component-header-item-background-state-hover;
+$link-background-color-state-active: tokens.$component-header-item-background-state-active;
+$link-background-color-state-selected: tokens.$component-header-item-background-state-selected;

packages/web/src/scss/components/Navigation/index.html

@@ -0,0 +1,10 @@
+{{#> web/layout/default title="Navigation" parentPageName="Components" }}
+
+<section class="UNSTABLE_Section">
+  <h2 class="docs-Heading">Default</h2>
+  <div class="docs-Stack docs-Stack--stretch">
+    x
+  </div>
+</section>
+
+{{/web/layout/default }}

packages/web/src/scss/components/Navigation/index.scss

@@ -0,0 +1,2 @@
+@forward 'Navigation';
+@forward 'NavigationLink';