From 80a67b5d256068d7eb9e70cb13d37faf3699e616 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Niedzi=C3=B3=C5=82ka?=
 <niedziolek@hotmail.com>
Date: Fri, 28 Jul 2023 23:53:32 +0200
Subject: [PATCH] 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>
---
 .../css-examples/pseudo-class/defined.css     |  9 ++++++++
 .../css-examples/pseudo-class/defined.html    |  9 ++++++++
 .../css-examples/pseudo-class/defined.js      |  3 +++
 .../pseudo-class/indeterminate.css            |  9 ++++++++
 .../pseudo-class/indeterminate.html           | 12 ++++++++++
 .../pseudo-class/indeterminate.js             | 15 +++++++++++++
 .../css-examples/pseudo-class/meta.json       | 22 +++++++++++++++++++
 7 files changed, 79 insertions(+)
 create mode 100644 live-examples/css-examples/pseudo-class/defined.css
 create mode 100644 live-examples/css-examples/pseudo-class/defined.html
 create mode 100644 live-examples/css-examples/pseudo-class/defined.js
 create mode 100644 live-examples/css-examples/pseudo-class/indeterminate.css
 create mode 100644 live-examples/css-examples/pseudo-class/indeterminate.html
 create mode 100644 live-examples/css-examples/pseudo-class/indeterminate.js

diff --git a/live-examples/css-examples/pseudo-class/defined.css b/live-examples/css-examples/pseudo-class/defined.css
new file mode 100644
index 000000000..b7ecb96cf
--- /dev/null
+++ b/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;
+}
diff --git a/live-examples/css-examples/pseudo-class/defined.html b/live-examples/css-examples/pseudo-class/defined.html
new file mode 100644
index 000000000..2f8666425
--- /dev/null
+++ b/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>
diff --git a/live-examples/css-examples/pseudo-class/defined.js b/live-examples/css-examples/pseudo-class/defined.js
new file mode 100644
index 000000000..d3212e4aa
--- /dev/null
+++ b/live-examples/css-examples/pseudo-class/defined.js
@@ -0,0 +1,3 @@
+class RegisteredCustom extends HTMLElement {}
+
+customElements.define('registered-custom', RegisteredCustom);
diff --git a/live-examples/css-examples/pseudo-class/indeterminate.css b/live-examples/css-examples/pseudo-class/indeterminate.css
new file mode 100644
index 000000000..baaf90dff
--- /dev/null
+++ b/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;
+}
diff --git a/live-examples/css-examples/pseudo-class/indeterminate.html b/live-examples/css-examples/pseudo-class/indeterminate.html
new file mode 100644
index 000000000..224f10e26
--- /dev/null
+++ b/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>
diff --git a/live-examples/css-examples/pseudo-class/indeterminate.js b/live-examples/css-examples/pseudo-class/indeterminate.js
new file mode 100644
index 000000000..c85f79038
--- /dev/null
+++ b/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;
+  }
+});
diff --git a/live-examples/css-examples/pseudo-class/meta.json b/live-examples/css-examples/pseudo-class/meta.json
index d74d09296..bb22560b4 100644
--- a/live-examples/css-examples/pseudo-class/meta.json
+++ b/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",