Merge branch 'main' into groups-and-backreferences-#2664

CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## [2.3.4](https://github.com/mdn/interactive-examples/compare/v2.3.3...v2.3.4) (2023-12-06)
+
+
+### Bug Fixes
+
+* **html:** provide corresponding 'id's for 'for' attributes on <label> tags ([#2678](https://github.com/mdn/interactive-examples/issues/2678)) ([49a3dca](https://github.com/mdn/interactive-examples/commit/49a3dca5e9612f9efd6dacf4f0bf661e0db6c54c))
+
+## [2.3.3](https://github.com/mdn/interactive-examples/compare/v2.3.2...v2.3.3) (2023-12-04)
+
+
+### Bug Fixes
+
+* **html:** use `<textarea>` in spellcheck example ([#2680](https://github.com/mdn/interactive-examples/issues/2680)) ([163699b](https://github.com/mdn/interactive-examples/commit/163699b01085cf8be5cecdbc2d9ed8618bb9aab9))
+
+## [2.3.2](https://github.com/mdn/interactive-examples/compare/v2.3.1...v2.3.2) (2023-12-04)
+
+
+### Bug Fixes
+
+* **css:** improve contrast of margin-block ([#2666](https://github.com/mdn/interactive-examples/issues/2666)) ([0df7a29](https://github.com/mdn/interactive-examples/commit/0df7a296e422a4b9006fcfb3d0de383fb87943c8))
+* various code issues ([#2679](https://github.com/mdn/interactive-examples/issues/2679)) ([c877595](https://github.com/mdn/interactive-examples/commit/c877595a7320691690fbb6304a9e699e9c2ddc57))
+
 ## [2.3.1](https://github.com/mdn/interactive-examples/compare/v2.3.0...v2.3.1) (2023-11-13)
 
 

live-examples/css-examples/generated-content/function-counter.html

@@ -1,8 +1,8 @@
 <p>Best Dynamic Duos in Sports:</p>
 <ol class="double-list">
-  <li>Stephen Curry + Klay Thompson</li>
+  <li>Simone Biles + Jonathan Owens</li>
+  <li>Serena Williams + Venus Williams</li>
   <li>Aaron Judge + Giancarlo Stanton</li>
-  <li>Michael Phelps + Ryan Lochte</li>
   <li>LeBron James + Dwyane Wade</li>
   <li>Xavi Hernandez + Andres Iniesta</li>
 </ol>

live-examples/css-examples/generated-content/function-counters.html

@@ -5,10 +5,12 @@
     <ol>
       <li>Mimas</li>
       <li>Enceladus</li>
-      <ol>
-        <li>Voyager</li>
-        <li>Cassini</li>
-      </ol>
+      <li>
+        <ol>
+          <li>Voyager</li>
+          <li>Cassini</li>
+        </ol>
+      </li>
       <li>Tethys</li>
     </ol>
   </li>

live-examples/css-examples/logical-properties/margin-block.css

@@ -12,6 +12,7 @@
   display: inline-block;
   border: solid #ce7777 10px;
   background-color: #2b3a55;
+  color: #ffffff;
   flex-shrink: 0;
 }
 

live-examples/css-examples/masking/mask-type.html

@@ -17,12 +17,7 @@
 <div id="output" class="output large hidden">
   <section id="default-example" class="default-example">
     <img class="box" src="/media/examples/balloon-small.jpg" />
-    <svg
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlns:xlink="http://www.w3.org/1999/xlink"
-      width="0"
-      height="0">
+    <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
       <defs>
         <mask id="example-element" maskContentUnits="objectBoundingBox">
           <rect x=".1" y=".1" width=".8" height=".8" fill="red" fill-opacity="0.5" />

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

@@ -2,11 +2,11 @@
   <p>Click on the text box and choose any option suggested by your browser.</p>
 
   <label for="name">Name</label>
-  <input name="name" type="text" autocomplete="name" />
+  <input id="name" name="name" type="text" autocomplete="name" />
 
   <label for="email">Email Address</label>
-  <input name="email" type="email" autocomplete="email" />
+  <input id="email" name="email" type="email" autocomplete="email" />
 
   <label for="country">Country</label>
-  <input name="country" type="text" autocomplete="country-name" />
+  <input id="country" name="country" type="text" autocomplete="country-name" />
 </form>

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

@@ -1,16 +1,16 @@
 <form>
   <label for="name">Name:</label>
-  <input name="name" type="text" />
+  <input id="name" name="name" type="text" />
 
   <label for="emp">Employed:</label>
-  <select name="emp" disabled>
+  <select id="emp" name="emp" disabled>
     <option>No</option>
     <option>Yes</option>
   </select>
 
   <label for="empDate">Employment Date:</label>
-  <input name="empDate" type="date" disabled />
+  <input id="empDate" name="empDate" type="date" disabled />
 
   <label for="resume">Resume:</label>
-  <input name="resume" type="file" />
+  <input id="resume" name="resume" type="file" />
 </form>

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

@@ -1,16 +1,16 @@
 <form>
   <label for="name">Name:</label>
-  <input name="name" type="text" />
+  <input id="name" name="name" type="text" />
 
   <label for="emp">Employed:</label>
-  <select name="emp" disabled>
+  <select id="emp" name="emp" disabled>
     <option>No</option>
     <option>Yes</option>
   </select>
 
   <label for="empDate">Employment Date:</label>
-  <input name="empDate" type="date" disabled />
+  <input id="empDate" name="empDate" type="date" disabled />
 
   <label for="resume">Resume:</label>
-  <input name="resume" type="file" />
+  <input id="resume" name="resume" type="file" />
 </form>

live-examples/css-examples/pseudo-class/in-range.html

@@ -1,10 +1,10 @@
 <form>
   <label for="amount">How many tickets? (You can buy 2-6 tickets)</label>
-  <input name="amount" type="number" min="2" max="6" value="4" />
+  <input id="amount" name="amount" type="number" min="2" max="6" value="4" />
 
   <label for="dep">Departure Date: (Whole year 2022 is acceptable)</label>
-  <input name="dep" type="date" min="2022-01-01" max="2022-12-31" value="2025-05-05" />
+  <input id="dep" name="dep" type="date" min="2022-01-01" max="2022-12-31" value="2025-05-05" />
 
   <label for="ret">Return Date: (Whole year 2022 is acceptable)</label>
-  <input name="ret" type="date" min="2022-01-01" max="2022-12-31" />
+  <input id="ret" name="ret" type="date" min="2022-01-01" max="2022-12-31" />
 </form>

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

@@ -1,12 +1,12 @@
 <form>
   <label for="email">Email Address:</label>
-  <input name="email" type="email" value="na@[email protected]" />
+  <input id="email" name="email" type="email" value="na@[email protected]" />
 
   <label for="secret">Secret Code: (lower case letters)</label>
-  <input name="secret" type="text" value="test" pattern="[a-z]+" />
+  <input id="secret" name="secret" type="text" value="test" pattern="[a-z]+" />
 
   <label for="age">Your age: (18+)</label>
-  <input name="age" type="number" value="5" min="18" />
+  <input id="age" name="age" type="number" value="5" min="18" />
 
   <label><input name="tos" type="checkbox" required checked /> - Do you agree to ToS?</label>
 </form>

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

@@ -1,12 +1,12 @@
 <form>
   <label for="name">Name: <span class="req">*</span></label>
-  <input name="name" type="text" required />
+  <input id="name" name="name" type="text" required />
 
   <label for="birth">Date of Birth:</label>
-  <input name="birth" type="date" />
+  <input id="birth" name="birth" type="date" />
 
   <label for="origin">How did you find out about us? <span class="req">*</span></label>
-  <select name="origin" required>
+  <select id="origin" name="origin" required>
     <option>Google</option>
     <option>Facebook</option>
     <option>Advertisement</option>

live-examples/css-examples/pseudo-class/out-of-range.html

@@ -1,10 +1,10 @@
 <form>
   <label for="amount">How many tickets? (You can buy 2-6 tickets)</label>
-  <input name="amount" type="number" min="2" max="6" value="4" />
+  <input id="amount" name="amount" type="number" min="2" max="6" value="4" />
 
   <label for="dep">Departure Date: (Whole year 2022 is acceptable)</label>
-  <input name="dep" type="date" min="2022-01-01" max="2022-12-31" value="2025-05-05" />
+  <input id="dep" name="dep" type="date" min="2022-01-01" max="2022-12-31" value="2025-05-05" />
 
   <label for="ret">Return Date: (Whole year 2022 is acceptable)</label>
-  <input name="ret" type="date" min="2022-01-01" max="2022-12-31" />
+  <input id="ret" name="ret" type="date" min="2022-01-01" max="2022-12-31" />
 </form>

live-examples/css-examples/pseudo-class/placeholder-shown.html

@@ -1,10 +1,10 @@
 <form>
   <label for="name">Full Name:</label>
-  <input name="name" type="text" />
+  <input id="name" name="name" type="text" />
 
   <label for="email">Email Address:</label>
-  <input name="email" type="email" placeholder="[email protected]" />
+  <input id="email" name="email" type="email" placeholder="[email protected]" />
 
   <label for="age">Your age:</label>
-  <input name="age" type="number" value="18" placeholder="You must be 18+" />
+  <input id="age" name="age" type="number" value="18" placeholder="You must be 18+" />
 </form>

live-examples/css-examples/pseudo-class/read-only.html

@@ -2,13 +2,13 @@
 
 <form>
   <label for="email">Email Address:</label>
-  <input name="email" type="email" value="[email protected]" />
+  <input id="email" name="email" type="email" value="[email protected]" />
 
   <label for="note">Short note about yourself:</label>
-  <textarea name="note">Don't be shy</textarea>
+  <textarea id="note" name="note">Don't be shy</textarea>
 
   <label for="pic">Your picture:</label>
-  <input name="pic" type="file" />
+  <input id="pic" name="pic" type="file" />
 
   <input type="submit" value="Submit form" />
 </form>

live-examples/css-examples/pseudo-class/read-write.html

@@ -2,13 +2,13 @@
 
 <form>
   <label for="email">Email Address:</label>
-  <input name="email" type="email" value="[email protected]" />
+  <input id="email" name="email" type="email" value="[email protected]" />
 
   <label for="note">Short note about yourself:</label>
-  <textarea name="note">Don't be shy</textarea>
+  <textarea id="note" name="note">Don't be shy</textarea>
 
   <label for="pic">Your picture:</label>
-  <input name="pic" type="file" />
+  <input id="pic" name="pic" type="file" />
 
   <input type="submit" value="Submit form" />
 </form>

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

@@ -1,12 +1,12 @@
 <form>
   <label for="name">Name: <span class="req">*</span></label>
-  <input name="name" type="text" required />
+  <input id="name" name="name" type="text" required />
 
   <label for="birth">Date of Birth:</label>
-  <input name="birth" type="date" />
+  <input id="birth" name="birth" type="date" />
 
   <label for="origin">How did you find out about us? <span class="req">*</span></label>
-  <select name="origin" required>
+  <select id="origin" name="origin" required>
     <option>Google</option>
     <option>Facebook</option>
     <option>Advertisement</option>

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

@@ -1,12 +1,12 @@
 <form>
   <label for="email">Email Address:</label>
-  <input name="email" type="email" value="na@[email protected]" />
+  <input id="email" name="email" type="email" value="na@[email protected]" />
 
   <label for="secret">Secret Code: (lower case letters)</label>
-  <input name="secret" type="text" value="test" pattern="[a-z]+" />
+  <input id="secret" name="secret" type="text" value="test" pattern="[a-z]+" />
 
   <label for="age">Your age: (18+)</label>
-  <input name="age" type="number" value="5" min="18" />
+  <input id="age" name="age" type="number" value="5" min="18" />
 
   <label><input name="tos" type="checkbox" required checked /> - Do you agree to ToS?</label>
 </form>

live-examples/css-examples/pseudo-element/file-selector-button.html

@@ -1,3 +1,3 @@
 <label for="avatar">Choose a profile picture:</label><br />
 
-<input type="file" name="avatar" accept="image/png, image/jpeg" />
+<input id="avatar" type="file" name="avatar" accept="image/png, image/jpeg" />

live-examples/css-examples/pseudo-element/placeholder.html

@@ -1,3 +1,3 @@
 <label for="first-name">Your phone number:</label><br />
 
-<input type="tel" name="phone" minlength="9" maxlength="9" placeholder="It must be 9 digits" />
+<input id="first-name" type="tel" name="phone" minlength="9" maxlength="9" placeholder="It must be 9 digits" />

live-examples/css-examples/shapes/shape-image-threshold.css

@@ -8,7 +8,6 @@
   width: 150px;
   height: 150px;
   margin: 20px;
-  width: 150px;
   background-image: linear-gradient(
     50deg,
     rgb(77, 26, 103),

live-examples/css-examples/text/text-indent.css

@@ -1,8 +1,12 @@
 #output section {
-  font-size: 1.5em;
+  font-size: 1.25em;
+  background-color: #483d8b;
+  align-items: start;
 }
 
 #example-element {
   text-align: left;
-  margin-left: 3em;
+  margin: 0 0 0 3em;
+  background-color: #6a5acd;
+  color: white;
 }

live-examples/css-examples/text/text-indent.html

@@ -19,13 +19,36 @@
       <span class="visually-hidden">Copy to Clipboard</span>
     </button>
   </div>
+
+  <div class="example-choice">
+    <pre><code class="language-css">text-indent: 3em each-line;</code></pre>
+    <button type="button" class="copy hidden" aria-hidden="true">
+      <span class="visually-hidden">Copy to Clipboard</span>
+    </button>
+  </div>
+
+  <div class="example-choice">
+    <pre><code class="language-css">text-indent: 3em hanging;</code></pre>
+    <button type="button" class="copy hidden" aria-hidden="true">
+      <span class="visually-hidden">Copy to Clipboard</span>
+    </button>
+  </div>
+
+  <div class="example-choice">
+    <pre><code class="language-css">text-indent: 3em hanging each-line;</code></pre>
+    <button type="button" class="copy hidden" aria-hidden="true">
+      <span class="visually-hidden">Copy to Clipboard</span>
+    </button>
+  </div>
 </section>
 
 <div id="output" class="output hidden">
   <section id="default-example">
-    <div>
-      <p id="example-element">
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
+    <div id="example-element">
+      <p>This text is contained within a single paragraph. This paragraph is two sentences long.</p>
+      <p>
+        This is a new paragraph. There is a line break element <code>&lt;br&gt;</code> after this sentence.<br />There
+        it is! Notice how it affects the indentation.
       </p>
     </div>
   </section>

live-examples/html-examples/content-sectioning/header.html

@@ -7,5 +7,5 @@
     <h1>Beagles</h1>
     <time>08.12.2014</time>
   </header>
-  <p>I love beagles <em>so</em> much! Like, really, a lot. They’re adorable and their ears are so, so snuggly soft!</p>
+  <p>I love beagles <em>so</em> much! Like, really, a lot. They’re adorable and their ears are so, so snugly soft!</p>
 </article>

live-examples/html-examples/form-attributes/attribute-accept.html

@@ -1,7 +1,7 @@
 <label for="movie">Choose a movie to upload:</label>
 
-<input type="file" name="movie" accept="video/*" />
+<input type="file" id="movie" name="movie" accept="video/*" />
 
 <label for="poster">Choose a poster:</label>
 
-<input type="file" name="poster" accept="image/png, image/jpeg" />
+<input type="file" id="poster" name="poster" accept="image/png, image/jpeg" />

live-examples/html-examples/form-attributes/attribute-capture.html

@@ -1,7 +1,7 @@
-<label for="picture">Take a picture of your face:</label>
+<label for="selfie">Take a picture of your face:</label>
 
-<input type="file" name="picture" accept="image/*" capture="user" />
+<input type="file" id="selfie" name="selfie" accept="image/*" capture="user" />
 
-<label for="voice">Record a sample of your voice:</label>
+<label for="picture">Take a picture using back facing camera:</label>
 
-<input type="file" name="voice" accept="audio/*" capture />
+<input type="file" id="picture" name="picture" accept="image/*" capture="environment" />

live-examples/html-examples/form-attributes/attribute-disabled.html

@@ -1,16 +1,16 @@
 <form>
   <label for="name">Name:</label>
-  <input name="name" type="text" />
+  <input id="name" name="name" type="text" />
 
   <label for="emp">Employed:</label>
-  <select name="emp" disabled>
+  <select id="emp" name="emp" disabled>
     <option>No</option>
     <option>Yes</option>
   </select>
 
   <label for="empDate">Employment Date:</label>
-  <input name="empDate" type="date" disabled />
+  <input id="empDate" name="empDate" type="date" disabled />
 
   <label for="resume">Resume:</label>
-  <input name="resume" type="file" />
+  <input id="resume" name="resume" type="file" />
 </form>