Update demo examples

Author: jacobcassidy

demo/at-container-demo.css

@@ -2,9 +2,121 @@
  * AT CONTAINER
  */
 
-/* AND */
+@container scroll-state(scrollable: none) {}
+@container scroll-state(scrollable: x) {}
+@container scroll-state(scrollable: y) {}
+@container scroll-state(scrollable: block) {}
+@container scroll-state(scrollable: inline) {}
+@container scroll-state(scrollable: top) {}
+
+/* MDN EXAMPLES */
+/* With a <size-query> */
+@container (width > 400px) {
+  h2 {
+    font-size: 1.5em;
+  }
+}
+
+/* With an optional <container-name> */
+@container tall (height > 30rem) {
+  p {
+    line-height: 1.6;
+  }
+}
+
+/* With a <scroll-state> */
+@container scroll-state(scrollable: top) {
+  .back-to-top-link {
+    visibility: visible;
+  }
+}
+
+/* With a <container-name> and a <scroll-state> */
+@container sticky-heading scroll-state(stuck: top) {
+  h2 {
+    background: purple;
+    color: white;
+  }
+}
+
+@container my-container scroll-state(scrollable: top) {
+  /* CSS rules go here */
+}
+
+.container {
+  container-type: scroll-state;
+  container-name: my-container;
+}
+
+
+
+@container not scroll-state(scrollable: none) {
+  /* … */
+}
+
+
+/* Multiple queries in a single condition */
+@container (width > 400px) and style(--responsive: true) {
+  h2 {
+    font-size: 1.5em;
+  }
+}
+
+/* Condition list */
+@container card (width > 400px), style(--responsive: true), scroll-state(stuck: top) {
+  h2 {
+    font-size: 1.5em;
+  }
+}
+
 @container (width > 400px) and (height > 400px) {
+  /* <stylesheet> */
+}
+
+@container (width > 400px) or (height > 400px) {
+  /* <stylesheet> */
+}
+
+@container not (width < 400px) {
+  /* <stylesheet> */
+}
+
+.post {
+  container-name: sidebar;
+  container-type: inline-size;
+}
+.post {
+  container: sidebar / inline-size;
+}
+
+@container (min-width: 400px) {
+  /* … */
+}
+@container (orientation: landscape) and (width > 400px) {
+  /* … */
+}
+@container (15em <= block-size <= 30em) {
+  /* … */
 }
+
+@container scroll-state(scrollable: top) {
+  /* … */
+}
+@container scroll-state(stuck: inline-end) {
+  /* … */
+}
+@container scroll-state(snapped: both /*comment*/) {
+  /* … */
+}
+
+
+
+
+
+/* AND */
+@container/*comment*/ (width > 400px) and (height > 400px) {
+}
+
 @container (min-width: 600px) and (orientation: landscape) {
 }
 
@@ -13,21 +125,24 @@
 }
 @container not (width < 400px) not (width > 800px) {
 }
-@container sidebar not (orientation: landscape) and (min-width: 600px) {
+@container/*comment*/sidebar not /*comment*/ (orientation: landscape/*comment*/) and /*comment*/ (/*comment*/min-width: 600px) /*comment*/ {
+}
+@container /*comment*/sidebar not (orientation:landscape) and (min-width: 600px) {
 }
 @container sidebar not (orientation: landscape) and (min-width: 600px) or (min-width: 600px) {
 }
 
 /* OR */
-@container (width > 400px) or (height > 400px) {''
-}
-@container (display: grid) or (display: flex) {
-}
+@container (width > 400px) or (height > 400px) {
+}@container test (width > 400px) or (height > 400px)
+{}
 
 /* CONTAINER-NAME */
 @container name (width > 400px) and (height > 400px) {
 }
-@container name1 name2 name3 not (width > 400px) not (height > 400px) {
+@container name1 not (width > 400px) not (height > 400px) {
+}
+@container name1 name_2 name-3 not (width > 400px) not (height > 400px) {
 }
 
 @container default (width > 400px) {