Updated to 1.0.0-alpha1, major updates

README.md

@@ -12,12 +12,15 @@ The ilw-page will manage margins appropriately for any component or block that i
 
 The ilw-page will not manage margins for the header and footer slots. 
 
+The ilw-page elevates the header slot's z-index to 300 to allow dropdown menus to override any other items in the main slot. The main slot and footer slot do not have z-index set, and are assumed to be 0. 
+
 Attributes include:
 
-  * illinois - boolean, if the page uses the Illinois default branding
+  * font - boolean, if the page uses the Illinois default fonts
+  * illinois - boolean, if the page uses the Illinois default fonts and colors. 
   * expanded - boolean, if true, there will be margins between the unmarked slot and header/footer
 
-If *illinois* is enabled, it will provide styling for the following HTML elements:
+If *font* or *illinois* is enabled, it will provide styling for the following HTML elements in the main section:
 
   * Paragraphs
   * Headings
@@ -72,13 +75,13 @@ None yet, still in alpha.
 
 ```
 <ilw-page illinois="true">
-  <header slot="header"></header>
+  <il-header slot="header"></il-header>
   <main>
    <ilw-breadcrumbs><ilw-breadcrumbs>
    <ilw-hero><ilw-hero>
    <ilw-call-to-action><ilw-call-to-action>
   </main>
-  <footer slot="footer"></footer>
+  <il-footer slot="footer"></il-footer>
 </ilw-page>
 ```
 

builder/ilw-page.json

@@ -7,5 +7,5 @@
     "description": "The Page component, containing styles and margins for other components.",
     "toolkit-version": "",
     "production-version": "",
-    "development-version": "1.0.0-alpha"
+    "development-version": "1.0.0-alpha1"
 }

builder/versions/ilw-page.1.0.0-alpha.json → builder/versions/ilw-page.1.0.0-alpha1.json

@@ -5,10 +5,10 @@
     "type": "web component",
     "element-name": "ilw-page",
     "description": "The Page component, containing styles and margins for other components.",
-    "version": "1.0.0-alpha",
+    "version": "1.0.0-alpha1",
     "date": "7/3/2024",
-    "css": "https://dev.toolkit.illinois.edu/ilw-page/1.0.0-alpha/ilw-page.css",
-    "js": "https://dev.toolkit.illinois.edu/ilw-page/1.0.0-alpha/ilw-page.js",
+    "css": "https://dev.toolkit.illinois.edu/ilw-page/1.0.0-alpha1/ilw-page.css",
+    "js": "https://dev.toolkit.illinois.edu/ilw-page/1.0.0-alpha1/ilw-page.js",
     "production": false,
     "notes": "",
     "parent-style": "",

package.json

@@ -3,7 +3,7 @@
   "description": "Illinois Toolkit: This component is used to manage major areas inside an HTML page.",
   "repository": "github:web-illinois/ilw-page",
   "private": false,
-  "version": "1.0.0-alpha",
+  "version": "1.0.0-alpha1",
   "type": "module",
   "files": [
     "src/**",

src/ilw-page.css

@@ -4,43 +4,48 @@
     --ilw-page--main-margin: 0 max(1.875rem, calc(50cqw - 37.5rem)) 0;
 }
 
-html {
-  font-size: 16px;
-  line-height: 21px;
+ilw-page[font] h1 {
+  font-family: var(--il-font-heading);
 }
 
-ilw-page[illinois] p, ilw-page[illinois] caption, ilw-page[illinois] blockquote {
+ilw-page[font] h2, ilw-page[font] h3, ilw-page[font] h4, ilw-page[font] p, ilw-page[font] li, 
+ilw-page[font] div, ilw-page[font] input, ilw-page[font] select, ilw-page[font] textarea, 
+ilw-page[font] summary, ilw-page[illinois] caption, ilw-page[illinois] blockquote {
+  font-family: var(--il-font-sans);
+}
+
+@layer pageIllinois {
+  ilw-page[illinois] main p, ilw-page[illinois] main caption, ilw-page[illinois] main blockquote {
     display: block;
     font: 400 1.125rem/1.667rem var(--il-font-sans);
     color: inherit;
     margin-top: 1.2rem;
     margin-bottom: 0;
   }
-  ilw-page[illinois] b, ilw-page[illinois] strong {
+  ilw-page[illinois] main b, ilw-page[illinois] main strong {
     font-weight: 700;
   }
-  ilw-page[illinois] i, ilw-page[illinois] em {
+  ilw-page[illinois] main i, ilw-page[illinois] main em {
     font-style: italic;
   }
-  ilw-page[illinois] a {
+  ilw-page[illinois] main a {
     color: var(--ilw-link--color);
     text-decoration: underline;
     cursor: pointer;
   }
-  ilw-page[illinois] a:hover, ilw-page[illinois] a:focus {
+  ilw-page[illinois] main a:hover, ilw-page[illinois] main a:focus {
     color: var(--ilw-link--color-focus);
   }
-  ilw-page[illinois] a:focus {
+  ilw-page[illinois] main a:focus {
     outline: var(--ilw-link--outline-focus); 
   }
-  ilw-page[illinois] a:visited {
+  ilw-page[illinois] main a:visited {
     color: var(--ilw-link--color-visited);
   }
-
-  ilw-page[illinois] h1, ilw-page[illinois] h2, ilw-page[illinois] h3, 
-  ilw-page[illinois] h4, ilw-page[illinois] h5, ilw-page[illinois] h6 {
+  
+  ilw-page[illinois] main h1, ilw-page[illinois] main h2, ilw-page[illinois] main h3, 
+  ilw-page[illinois] main h4, ilw-page[illinois] main h5, ilw-page[illinois] main h6 {
     display: block;
-    color: inherit;
     line-height: 1.2;
     font-style: normal;
     font-weight: 700;
@@ -49,37 +54,39 @@ ilw-page[illinois] p, ilw-page[illinois] caption, ilw-page[illinois] blockquote
     margin-top: 1.8rem;
     margin-bottom: 0;
   }
-  ilw-page[illinois] h1 {
+  ilw-page[illinois] main h1 {
     font-size: 4.25rem;
     line-height: 5.25rem;
     margin-top: 1.3125rem;
     margin-bottom: 2.625rem;
     font-family: var(--il-font-heading);
   }
-  ilw-page[illinois] h2 {
+  ilw-page[illinois] main h2 {
     font-size: 2.625rem;
     line-height: 2.625rem;
     margin-top: 1.3125rem;
     margin-bottom: 1.3125rem;
   }
-  ilw-page[illinois] h3 {
+  ilw-page[illinois] main h3 {
     font-size: 1.625rem;
     line-height: 2.625rem;
     margin-top: 1.3125rem;
     margin-bottom: 1.3125rem;
   }
-  ilw-page[illinois] h4, ilw-page[illinois] h5, ilw-page[illinois] h6 {
+  ilw-page[illinois] main h4, ilw-page[illinois] main h5, ilw-page[illinois] main h6 {
     font-size: 1.2rem;
     line-height: 1.667rem;
     margin-top: 1.3125rem;
     margin-bottom: 0rem;
     }
-
-  ilw-page[illinois] ul, ilw-page[illinois] ol {
+  
+  ilw-page[illinois] main ul, ilw-page[illinois] main ol {
     margin-top: 1.2rem;
     margin-bottom: 0;
   }
-  ilw-page[illinois] li {
+  ilw-page[illinois] main li {
     font: 400 1.125rem/1.667 var(--il-font-sans);
     color: inherit;
-  }
+  }
+}
+

src/ilw-page.styles.js

@@ -15,6 +15,8 @@ export default css`
 
 .header {
     grid-area: head;
+    position: relative;
+    z-index: 300;
 }
 
 .footer {