From c9694fcad628a5cf35718b128467f3b39726d515 Mon Sep 17 00:00:00 2001
From: Dale Sande <dale.sande@gmail.com>
Date: Tue, 1 Aug 2023 17:03:27 -0700
Subject: [PATCH] docs(cq): update demo and description

This commit also updates the demo index.html to a fixed
version of Marked due to issues with v6.0.

https://github.com/markedjs/marked/issues/2913

Changes to be committed:
modified:   demo/demo.md
modified:   demo/index.html
---
 demo/demo.md    | 24 ++++++++++++++++++------
 demo/index.html |  2 +-
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/demo/demo.md b/demo/demo.md
index 336678b..c7ee5bb 100644
--- a/demo/demo.md
+++ b/demo/demo.md
@@ -221,12 +221,24 @@ The following illustrates a cancellation of international flight with stopovers
 
 The `auro-flightline` element is reactive to its parent container's `width` value versus a `@media` query based on the device `width`. This allows for greater control over the shape of the element when in constrained spaces.
 
-The default container query is a min-width of `414px`. This value can be edited using the `cq` attribute.
+The default container query is a min-width of `320px`, or `var(--auro-grid-breakpoint-xs)`.
 
-The first example illustrates a `auro-flightline` element with a container width of `400px`. The next `auro-flightline` element is within a container set at `100%` for context. Notice when the 100% container reaches a width of < `414px`, the container query switches the UI. The last example illustrates a `auro-flightline` element with a redefined `cq` value of `500px` and a container width of `75%`. Resize the screen to see it switch between a summarized and expanded view when its width reaches `500px`.
+The first example illustrates a `auro-flightline` element with a container width of `300px`. The next `auro-flightline` element is within a container set at `100%` for context. Notice when the container reaches a width of < `320px`, the container query switches the UI.
+
+<style>
+  .flightline-width {
+    width: 100%;
+  }
+
+  @media (min-width: 576px) {
+    .flightline-width {
+      width: 300px;
+    }
+  }
+</style>
 
 <div class="exampleWrapper">
-  <auro-flightline style="width: 400px">
+  <auro-flightline class="flightline-width">
     <auro-flight-segment stopover iata="YAK"></auro-flight-segment>
     <auro-flight-segment stopover iata="WRG"></auro-flight-segment>
     <auro-flight-segment iata="SEA" duration="0h 40m"></auro-flight-segment>
@@ -246,7 +258,7 @@ The first example illustrates a `auro-flightline` element with a container width
 </div>
 
 <div class="exampleWrapper">
-  <auro-flightline cq="500" style="width: 75%">
+  <auro-flightline style="width: 60%">
     <auro-flight-segment stopover iata="YAK"></auro-flight-segment>
     <auro-flight-segment stopover iata="WRG"></auro-flight-segment>
     <auro-flight-segment iata="SEA" duration="0h 40m"></auro-flight-segment>
@@ -259,7 +271,7 @@ The first example illustrates a `auro-flightline` element with a container width
   <span slot="trigger">See code</span>
 
   ```html
-  <auro-flightline style="width: 400px">
+  <auro-flightline style="width: 300px">
     <auro-flight-segment stopover iata="YAK"></auro-flight-segment>
     <auro-flight-segment stopover iata="WRG"></auro-flight-segment>
     <auro-flight-segment iata="SEA" duration="0h 40m"></auro-flight-segment>
@@ -275,7 +287,7 @@ The first example illustrates a `auro-flightline` element with a container width
     <auro-flight-segment iata="DUB" duration="13h 40m"></auro-flight-segment>
   </auro-flightline>
 
-  <auro-flightline cq="500" style="width: 75%">
+  <auro-flightline style="width: 75%">
     <auro-flight-segment stopover iata="YAK"></auro-flight-segment>
     <auro-flight-segment stopover iata="WRG"></auro-flight-segment>
     <auro-flight-segment iata="SEA" duration="0h 40m"></auro-flight-segment>
diff --git a/demo/index.html b/demo/index.html
index 8a4420d..01d1323 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -17,7 +17,7 @@
     <main></main>
 
     <script type="module">
-      import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
+      import 'https://cdn.jsdelivr.net/npm/marked@5.1.0/marked.min.js';
       import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
       fetch('/demo/demo.md')
         .then((response) => response.text())