feat(css): Add example of :indeterminate and :defined (#2199)

* indeterminate, defined

* lin & size

* Update live-examples/css-examples/pseudo-class/defined.html

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

* Update live-examples/css-examples/pseudo-class/indeterminate.html

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

---------

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

live-examples/css-examples/pseudo-class/defined.css

@@ -0,0 +1,9 @@
+.all-elements > * {
+    display: block;
+    margin: 20px 0;
+}
+
+.all-elements > *:defined {
+    outline: 2px solid deeppink;
+    outline-offset: 2px;
+}

live-examples/css-examples/pseudo-class/defined.html

@@ -0,0 +1,9 @@
+<div class="all-elements">
+    <p>This is an ordinary <b>&;lt;p&gt;</b> element.</p>
+
+    <invalid>This <b>&;lt;invalid&gt;</b> element is not defined, but has no hyphen.</invalid>
+
+    <not-registered>This <b>&;lt;not-registered&gt;</b> element is neither defined nor registered.</not-registered>
+
+    <registered-custom>This <b>&;lt;registered-custom&gt;</b> element is registered.</registered-custom>
+</div>

live-examples/css-examples/pseudo-class/defined.js

@@ -0,0 +1,3 @@
+class RegisteredCustom extends HTMLElement {}
+
+customElements.define('registered-custom', RegisteredCustom);

live-examples/css-examples/pseudo-class/indeterminate.css

@@ -0,0 +1,9 @@
+label {
+    display: block;
+    margin-top: 0.3em;
+}
+
+*:indeterminate {
+    outline: 2px solid deeppink;
+    outline-offset: 2px;
+}

live-examples/css-examples/pseudo-class/indeterminate.html

@@ -0,0 +1,12 @@
+<form>
+    <p>How did you find out about us?</p>
+    <label><input name="origin" type="radio" value="duck"> Duck-duck-go</label>
+    <label><input name="origin" type="radio" value="mastodon"> Mastodon</label>
+
+    <p>Choose your subscriptions:</p>
+    <label><input id="newsletter" name="newsletter" type="checkbox"> Newsletter</label>
+    <label><input id="premium" disabled name="premium" type="checkbox"> Premium Card</label>
+
+    <p>Please wait for rest of the form:</p>
+    <progress id="loading"></progress>
+</form>

live-examples/css-examples/pseudo-class/indeterminate.js

@@ -0,0 +1,15 @@
+var newsletter = document.getElementById('newsletter');
+var premium = document.getElementById('premium');
+
+premium.indeterminate = true;
+
+newsletter.addEventListener('change', function() {
+  if (this.checked) {
+    premium.disabled = false;
+    premium.indeterminate = false;
+  } else {
+    premium.checked = false;
+    premium.disabled = true;
+    premium.indeterminate = true;
+  }
+});

live-examples/css-examples/pseudo-class/meta.json

@@ -45,6 +45,17 @@
             "defaultTab": "css",
             "height": "tabbed-shorter"
         },
+        "defined": {
+            "cssExampleSrc": "./live-examples/css-examples/pseudo-class/defined.css",
+            "exampleCode": "./live-examples/css-examples/pseudo-class/defined.html",
+            "jsExampleSrc": "./live-examples/css-examples/pseudo-class/defined.js",
+            "fileName": "pseudo-class-defined.html",
+            "title": "CSS Demo: :defined",
+            "type": "tabbed",
+            "defaultTab": "css",
+            "tabs": "html,css,js",
+            "height": "tabbed-shorter"
+        },
         "disabled": {
             "cssExampleSrc": "./live-examples/css-examples/pseudo-class/disabled.css",
             "exampleCode": "./live-examples/css-examples/pseudo-class/disabled.html",
@@ -90,6 +101,17 @@
             "defaultTab": "css",
             "height": "tabbed-shorter"
         },
+        "indeterminate": {
+            "cssExampleSrc": "./live-examples/css-examples/pseudo-class/indeterminate.css",
+            "exampleCode": "./live-examples/css-examples/pseudo-class/indeterminate.html",
+            "jsExampleSrc": "./live-examples/css-examples/pseudo-class/indeterminate.js",
+            "fileName": "pseudo-class-indeterminate.html",
+            "title": "CSS Demo: :indeterminate",
+            "type": "tabbed",
+            "defaultTab": "css",
+            "tabs": "html,css,js",
+            "height": "tabbed-standard"
+        },
         "focus": {
             "cssExampleSrc": "./live-examples/css-examples/pseudo-class/focus.css",
             "exampleCode": "./live-examples/css-examples/pseudo-class/focus.html",