Merge branch 'main' into npm-publishing

* main:
  Update directory paths for GitHub Pages (#27)
  WEBDEV-8141: Github Pages (#25)
  v0.1.0 (#26)
  WEBDEV-8109 Expand status indicator capabilities (#23)
  WEBDEV-8100 Encapsulate style settings (#22)
  Load snowflakes async (#12)
  WEBDEV-8019 Add basic loading indicator (#17)
  Fix issue with css property values not updating (#19)
  WEBDEV-8098: Component Demo Light Mode (#18)
  WEBDEV-8037 Create CSS theme structure (#16)

Author: jbuckner

.github/workflows/gh-pages-main.yml

@@ -0,0 +1,39 @@
+# This workflow will generate the static page under `main` subdirectory inside the `ghpages` branch
+
+# This workflow will run every time new changes were pushed to the `main` branch
+
+name: App build CI/CD to main branch
+permissions:
+  contents: write
+
+on:
+  push:
+    branches: [ main ]
+
+jobs:
+  build-and-deploy:
+    concurrency: ci-${{ github.ref }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v6
+        with:
+          persist-credentials: false
+
+      - name: Set up Git
+        run: |
+          git config --global user.name "Github Actions"
+          git config --global user.email "actions@github.com"
+
+      - name: Install and Build 🔧
+        run: |
+          npm ci
+          npm run ghpages:build
+
+      - name: Deploy 🚀
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          branch: ghpages
+          folder: ghpages
+          clean-exclude: pr/
+          force: false

.github/workflows/pr-preview.yml

@@ -0,0 +1,65 @@
+# This workflow will generate the static page under `pr` subdirectory inside the `ghpages` branch
+
+# This workflow will run every time there's a PR opened, reopened, synchronize, or closed
+
+name: Deploy PR previews
+
+on:
+  pull_request:
+    types:
+      - opened
+      - reopened
+      - synchronize
+      - closed
+
+concurrency: preview-${{ github.ref }}
+
+env:
+  PREVIEW_BRANCH: ghpages
+jobs:
+  deploy-preview:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+      - uses: actions/setup-node@v4
+
+      - name: Set up Git
+        run: |
+          git config --global user.name "Github Actions"
+          git config --global user.email "actions@github.com"
+
+      - name: Install and Build
+        run: |
+          npm install
+          npm run ghpages:build
+
+      # Reference: https://github.com/rossjrw/pr-preview-action
+      - name: Deploy preview
+        uses: rossjrw/pr-preview-action@v1
+        id: preview-step
+        with:
+          source-dir: ./ghpages
+          umbrella-dir: pr
+          preview-branch: ${{ env.PREVIEW_BRANCH }}
+          comment: false
+
+      - uses: marocchino/sticky-pull-request-comment@v2
+        if: steps.preview-step.outputs.deployment-action == 'deploy'
+        with:
+          header: pr-preview
+          message: |
+            [PR Preview Action](https://github.com/rossjrw/pr-preview-action) ${{ steps.preview-step.outputs.action-version }}
+            :---:
+            | <p></p> :rocket: View preview at <br> ${{ steps.preview-step.outputs.preview-url }} <br><br>
+            | <h6>Built to branch [`${{ env.PREVIEW_BRANCH }}`](${{ github.server_url }}/${{ github.repository }}/tree/${{ env.PREVIEW_BRANCH }}) at ${{ steps.preview-step.outputs.action-start-time }}. <br> Preview will be ready when the [GitHub Pages deployment](${{ github.server_url }}/${{ github.repository }}/deployments) is complete. <br><br> </h6>
+
+      - uses: marocchino/sticky-pull-request-comment@v2
+        if: steps.preview-step.outputs.deployment-action == 'remove'
+        with:
+          header: pr-preview
+          message: |
+            [PR Preview Action](https://github.com/rossjrw/pr-preview-action) ${{ steps.preview-step.outputs.action-version }}
+            :---:
+            Preview removed because the pull request was closed.
+            ${{ steps.preview-step.outputs.action-start-time }}

.gitignore

@@ -15,3 +15,4 @@ node_modules/
 dist
 coverage
 __screenshots__
+ghpages

README.md

@@ -65,7 +65,7 @@ import '@demo/story-template';
 ...
 render() {
   return html`
-    <story-template elementTag="ia-button" .exampleUsage=${this.exampleUsage}>
+    <story-template elementTag="ia-button" elementClassName="IAButton" .exampleUsage=${this.exampleUsage}>
       <div slot="demo">
         <ia-button @click=${() => alert('Button clicked!')}
           >Click Me</ia-button

demo/app-root.ts

@@ -3,16 +3,22 @@ import { customElement } from 'lit/decorators.js';
 
 import '@src/elements/ia-button/ia-button-story';
 import '@src/labs/ia-snow/ia-snow-story';
+import '@src/elements/ia-status-indicator/ia-status-indicator-story';
 
 @customElement('app-root')
 export class AppRoot extends LitElement {
   render() {
     return html`
       <h1>🏛️ Internet Archive Elements ⚛️</h1>
 
-      <ia-button-story></ia-button-story>
+      <h2>🚀 Production-Ready Elements</h2>
+
+      <ia-status-indicator-story></ia-status-indicator-story>
+
+      <h2>🧪 Labs Elements</h2>
 
       <ia-snow-story></ia-snow-story>
+      <ia-button-story></ia-button-story>
     `;
   }
 }

demo/index.css

@@ -3,9 +3,9 @@
   line-height: 1.5;
   font-weight: 400;
 
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  color-scheme: light;
+  color: #213547;
+  background-color: #ffffff;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -28,10 +28,3 @@ body {
   min-width: 320px;
   min-height: 100vh;
 }
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-}