Merge branch 'main' of github.com:MicrosoftEdge/Demos

Author: captainbrosset

css-gap-decorations/burger-menu.html

@@ -20,8 +20,8 @@
       column-rule: 1.5px solid #ccc;
       row-rule: 3px solid #000;
       column-rule-break: intersection;
-      column-rule-outset: -15px;
-      row-rule-outset: -8px;
+      column-rule-inset: 15px;
+      row-rule-inset: 8px;
 
       box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
       max-width: 1000px;

css-gap-decorations/daily-css-news.html

@@ -47,7 +47,7 @@
       column-rule-width: 1px;
       column-rule-style: solid;
       column-rule-color: var(--accent);
-      gap-rule-paint-order: column-over-row;
+      rule-overlap: column-over-row;
       padding-bottom: 0.5rem;
       border-bottom: 1px solid rgba(255, 255, 255, 0.2);
     }
@@ -73,7 +73,7 @@
       row-rule-width: 1px;
       row-rule-style: solid;
       row-rule-color: var(--rule);
-      gap-rule-paint-order: row-over-column;
+      rule-overlap: row-over-column;
       background: rgba(255, 255, 255, 0.1);
       padding: 0.5rem 1rem;
       border-radius: 4px;
@@ -98,9 +98,8 @@
       grid-template-columns: 2fr 1fr;
       gap: 2rem;
       padding: 2rem;
-      rule-width: 2px;
-      rule-style: dashed;
-      rule-color: var(--rule);
+      row-rule: 2px dashed var(--rule);
+      column-rule: 2px dashed var(--rule);
     }
 
     @media (max-width: 900px) {
@@ -137,7 +136,7 @@
       column-rule-width: 1px;
       column-rule-style: solid;
       column-rule-color: var(--rule);
-      gap-rule-paint-order: column-over-row;
+      rule-overlap: column-over-row;
       margin: 0;
     }
 
@@ -147,7 +146,7 @@
       row-rule-width: 3px;
       row-rule-style: solid;
       row-rule-color: var(--rule);
-      row-rule-outset: 0%;
+      row-rule-inset: 0;
       column-count: 2;
       column-gap: 1rem;
       column-rule-width: 2px;
@@ -156,7 +155,7 @@
       column-fill: auto;
       column-height: 10em;
       column-rule-break: intersection;
-      column-rule-outset: -20px;
+      column-rule-inset: 20px;
     }
 
     .sidebar {
@@ -166,7 +165,7 @@
       row-rule-width: 1px;
       row-rule-style: dotted;
       row-rule-color: var(--rule);
-      gap-rule-paint-order: column-over-row;
+      rule-overlap: column-over-row;
     }
 
     .sidebar section {
@@ -196,13 +195,13 @@
       display: grid;
       grid-template-columns: repeat(9, 1fr);
       gap: 6px;
-      column-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px);
+      column-rule-width: repeat(2, 1px), 4px, repeat(2, 1px), 4px, repeat(2, 1px);
       column-rule-style: solid;
       column-rule-color: var(--secondary);
-      row-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px);
+      row-rule-width: repeat(2, 1px), 4px, repeat(2, 1px), 4px, repeat(2, 1px);
       row-rule-style: solid;
       row-rule-color: var(--secondary);
-      gap-rule-paint-order: row-over-column;
+      rule-overlap: row-over-column;
     }
 
     .sudoku .cell {
@@ -246,7 +245,7 @@ <h2>Gap Decorations Start Dev Trials</h2>
           the highly anticipated Gap Decorations Module.
           This early access program empowers front-end engineers to experiment with powerful new
           properties—<strong>column-rule</strong>, <strong>row-rule</strong>, and
-          <strong>gap-rule-paint-order</strong>—to style gaps in grid, flex, and multicol containers
+          <strong>rule-overlap</strong>—to style gaps in grid, flex, and multicol containers
           without relying on additional markup or pseudo-elements. In these trials, participants can test
           <strong>row-rule</strong> support in multicol layouts, leverage <strong>column-wrap</strong>
           to achieve sophisticated magazine-style flows, and fine-tune separator styles across
@@ -276,7 +275,7 @@ <h2>Browser Support Expands</h2>
           can safely adopt gap decorations in production, delivering consistent visual
           experiences across platforms. Developers are encouraged to experiment with
           combinations of <strong>column-rule</strong>, <strong>row-rule</strong>,
-          and paint-order options to craft unique layouts that were previously only
+          and overlap options to craft unique layouts that were previously only
           achievable with complex workarounds.</p>
       </article>
     </div>

css-gap-decorations/guitar-fretboard.html

@@ -25,8 +25,8 @@
       row-gap: var(--fret-width);
       column-rule: var(--string-width) solid white;
       row-rule: var(--fret-width) solid #737778;
-      row-rule-outset: var(--space-around-neck);
-      gap-rule-paint-order: column-over-row;
+      row-rule-inset: calc(-1 * var(--space-around-neck));
+      rule-overlap: column-over-row;
 
       background-image:
         radial-gradient(circle, white 0 calc(var(--space-between-strings) / 4), transparent 0),

css-gap-decorations/notebook.html

@@ -24,7 +24,7 @@
       grid-template-rows: repeat(30, 1fr);
       gap: 2px;
 
-      gap-rule-paint-order: column-over-row;
+      rule-overlap: column-over-row;
       column-rule: solid black 1.5px;
       column-rule-break: spanning-item;
       row-rule:
@@ -137,8 +137,8 @@ <h2>New Properties & Behavior:</h2>
       <p>row-rule, column-rule to define width, style, and color of decorations.</p>
       <p>Complex patterns with repeat().</p>
       <p>gap-rule-break to control where decorations start/end.</p>
-      <p>gap-rule-paint-order to define overlap order between row and column.</p>
-      <p>gap-rule-outset to adjust start/end positions.</p>
+      <p>rule-overlap to define overlap order between row and column.</p>
+      <p>rule-inset to adjust start/end positions.</p>
     </main>
     <footer>
       <p>Summary:</p>

css-gap-decorations/personal-site.html

@@ -59,7 +59,7 @@
       gap: 4rem;
       row-rule: 2px solid #999;
       column-rule: 2px solid #999;
-      column-rule-outset: 0;
+      column-rule-inset: 0;
     }
 
     main>* {

css-gap-decorations/playground.html

@@ -130,12 +130,12 @@
       column-rule-width: 2px;
       column-rule-style: solid;
       column-rule-color: #555;
-      column-rule-outset: 0px;
+      column-rule-inset: 0;
       row-rule-width: 2px;
       row-rule-style: dashed;
       row-rule-color: #888;
-      row-rule-outset: 0%;
-      gap-rule-paint-order: column-over-row;
+      row-rule-inset: 0;
+      rule-overlap: column-over-row;
     }
 
     .multicol h3 {
@@ -169,12 +169,12 @@
       row-rule-width: 4px;
       row-rule-style: dotted;
       row-rule-color: var(--flex-row-rule-color);
-      row-rule-outset: 0%;
+      row-rule-inset: 0;
       column-rule-width: 4px;
       column-rule-style: dotted;
       column-rule-color: var(--flex-col-rule-color);
-      column-rule-outset: 0px;
-      gap-rule-paint-order: row-over-column;
+      column-rule-inset: 0;
+      rule-overlap: row-over-column;
     }
 
     .flex-item {
@@ -208,12 +208,12 @@
       row-rule-width: 3px;
       row-rule-style: solid;
       row-rule-color: var(--accent);
-      row-rule-outset: 0%;
+      row-rule-inset: 0;
       column-rule-width: 3px;
       column-rule-style: solid;
       column-rule-color: var(--grid-rule-color);
-      column-rule-outset: 0px;
-      gap-rule-paint-order: row-over-column;
+      column-rule-inset: 0;
+      rule-overlap: row-over-column;
     }
 
     .grid-item {
@@ -253,7 +253,7 @@ <h1>CSS Gap Decorations playground</h1>
     <p>This interactive demo showcases the features of the <a href="https://drafts.csswg.org/css-gaps-1/"
         target="_blank">
         CSS Gaps Decorations Module Level 1</a>.
-      Use the controls to tweak gap, rule, and paint-order properties in real time
+      Use the controls to tweak gap, rule, and overlap properties in real time
       and see how they affect <a href="#grid">grid</a>, <a href="#flex">flex</a>, and <a href="#multicolumn">multicolumn</a> layouts.
     </p>
     <p>
@@ -276,8 +276,8 @@ <h2 id="grid">Grid Layout</h2>
         <label>Row-rule-width (px): <output id="grRowRuleWVal">3</output></label>
         <input type="range" min="0" max="20" value="3" data-prop="row-rule-width" data-unit="px"
           oninput="grRowRuleWVal.value=this.value" />
-        <label>Row-rule-outset (%): <output id="grRowRuleOVal">0</output>%</label>
-        <input type="range" min="0" max="100" value="0" data-prop="row-rule-outset" data-unit="%"
+        <label>Row-rule-inset (%): <output id="grRowRuleOVal">0</output>%</label>
+        <input type="range" min="0" max="100" value="0" data-prop="row-rule-inset" data-unit="%"
           oninput="grRowRuleOVal.value=this.value" />
         <label>Row-rule-style:</label>
         <select data-prop="row-rule-style">
@@ -296,8 +296,8 @@ <h2 id="grid">Grid Layout</h2>
         <label>Column-rule-width (px): <output id="grColRuleWVal">3</output></label>
         <input type="range" min="0" max="20" value="3" data-prop="column-rule-width" data-unit="px"
           oninput="grColRuleWVal.value=this.value" />
-        <label>Column-rule-outset (px): <output id="grColRuleOVal">0</output></label>
-        <input type="range" min="-50" max="50" value="0" data-prop="column-rule-outset" data-unit="px"
+        <label>Column-rule-inset (px): <output id="grColRuleOVal">0</output></label>
+        <input type="range" min="-50" max="50" value="0" data-prop="column-rule-inset" data-unit="px"
           oninput="grColRuleOVal.value=this.value" />
         <label>Column-rule-style:</label>
         <select data-prop="column-rule-style">
@@ -313,8 +313,8 @@ <h2 id="grid">Grid Layout</h2>
           <option value="intersection">intersection</option>
           <option value="spanning-item">spanning-item</option>
         </select>
-        <label>Gap-rule-paint-order:</label>
-        <select data-prop="gap-rule-paint-order">
+        <label>Rule-overlap:</label>
+        <select data-prop="rule-overlap">
           <option value="row-over-column">row-over-column</option>
           <option value="column-over-row">column-over-row</option>
         </select>
@@ -345,8 +345,8 @@ <h2 id="flex">Flex Layout</h2>
         <label>Row-rule-width (px): <output id="fxRowRuleWVal">4</output></label>
         <input type="range" min="0" max="20" value="4" data-prop="row-rule-width" data-unit="px"
           oninput="fxRowRuleWVal.value=this.value" />
-        <label>Row-rule-outset (%): <output id="fxRowRuleOVal">0</output>%</label>
-        <input type="range" min="0" max="100" value="0" data-prop="row-rule-outset" data-unit="%"
+        <label>Row-rule-inset (%): <output id="fxRowRuleOVal">0</output>%</label>
+        <input type="range" min="0" max="100" value="0" data-prop="row-rule-inset" data-unit="%"
           oninput="fxRowRuleOVal.value=this.value" />
         <label>Row-rule-style:</label>
         <select data-prop="row-rule-style">
@@ -359,8 +359,8 @@ <h2 id="flex">Flex Layout</h2>
         <label>Column-rule-width (px): <output id="fxColRuleWVal">4</output></label>
         <input type="range" min="0" max="20" value="4" data-prop="column-rule-width" data-unit="px"
           oninput="fxColRuleWVal.value=this.value" />
-        <label>Column-rule-outset (px): <output id="fxColRuleOVal">0</output></label>
-        <input type="range" min="-50" max="50" value="0" data-prop="column-rule-outset" data-unit="px"
+        <label>Column-rule-inset (px): <output id="fxColRuleOVal">0</output></label>
+        <input type="range" min="-50" max="50" value="0" data-prop="column-rule-inset" data-unit="px"
           oninput="fxColRuleOVal.value=this.value" />
         <label>Column-rule-style:</label>
         <select data-prop="column-rule-style">
@@ -382,8 +382,8 @@ <h2 id="flex">Flex Layout</h2>
           <option value="intersection">intersection</option>
           <option value="spanning-item">spanning-item</option>
         </select>
-        <label>Gap-rule-paint-order:</label>
-        <select data-prop="gap-rule-paint-order">
+        <label>Rule-overlap:</label>
+        <select data-prop="rule-overlap">
           <option value="row-over-column">row-over-column</option>
           <option value="column-over-row">column-over-row</option>
         </select>
@@ -409,8 +409,8 @@ <h2 id="multicolumn">Multicolumn Layout</h2>
         <label>Column-rule-width (px): <output id="mcColRuleWVal">2</output></label>
         <input type="range" min="0" max="20" value="2" data-prop="column-rule-width" data-unit="px"
           oninput="mcColRuleWVal.value=this.value" />
-        <label>Column-rule-outset (px): <output id="mcColRuleOVal">0</output></label>
-        <input type="range" min="-50" max="50" value="0" data-prop="column-rule-outset" data-unit="px"
+        <label>Column-rule-inset (px): <output id="mcColRuleOVal">0</output></label>
+        <input type="range" min="-50" max="50" value="0" data-prop="column-rule-inset" data-unit="px"
           oninput="mcColRuleOVal.value=this.value" />
         <label>Column-rule-style:</label>
         <select data-prop="column-rule-style">
@@ -429,8 +429,8 @@ <h2 id="multicolumn">Multicolumn Layout</h2>
         <label>Row-rule-width (px): <output id="mcRowRuleWVal">2</output></label>
         <input type="range" min="0" max="20" value="2" data-prop="row-rule-width" data-unit="px"
           oninput="mcRowRuleWVal.value=this.value" />
-        <label>Row-rule-outset (%): <output id="mcRowRuleOVal">0</output>%</label>
-        <input type="range" min="0" max="100" value="0" data-prop="row-rule-outset" data-unit="%"
+        <label>Row-rule-inset (%): <output id="mcRowRuleOVal">0</output>%</label>
+        <input type="range" min="0" max="100" value="0" data-prop="row-rule-inset" data-unit="%"
           oninput="mcRowRuleOVal.value=this.value" />
         <label>Row-rule-style:</label>
         <select data-prop="row-rule-style">
@@ -454,8 +454,8 @@ <h2 id="multicolumn">Multicolumn Layout</h2>
           <option value="intersection">intersection</option>
           <option value="spanning-item">spanning-item</option>
         </select>
-        <label>Gap-rule-paint-order:</label>
-        <select data-prop="gap-rule-paint-order">
+        <label>Rule-overlap:</label>
+        <select data-prop="rule-overlap">
           <option value="column-over-row">column-over-row</option>
           <option value="row-over-column">row-over-column</option>
         </select>
@@ -464,15 +464,15 @@ <h2 id="multicolumn">Multicolumn Layout</h2>
         <h3>Exploring Gap Decorations</h3>
         <p>Gap decorations provide a flexible way to visually separate content without extra markup. Columns adapt
           dynamically to viewport size, maintaining readability.</p>
-        <p>Use <strong>column-rule</strong> properties to style separators, control their outset, and define how they
+        <p>Use <strong>column-rule</strong> properties to style separators, control their inset, and define how they
           interact with multi-column spans.</p>
         <blockquote>“Effective gap decorations enhance layout clarity while preserving semantic structure.”</blockquote>
         <ul>
           <li>Adjust <em>column-gap</em> for spacing.</li>
-          <li>Tweak <em>column-rule-width</em> and <em>column-rule-outset</em>.</li>
+          <li>Tweak <em>column-rule-width</em> and <em>column-rule-inset</em>.</li>
           <li>Control break behavior with <em>row-rule-break</em> and <em>column-rule-break</em>.</li>
         </ul>
-        <p>Combine with <code>gap-rule-paint-order</code> to layer rules in complex layouts.</p>
+        <p>Combine with <code>rule-overlap</code> to layer rules in complex layouts.</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec est at dolor scelerisque elementum.</p>
         <p>Mauris posuere, libero non suscipit consectetur, odio tortor vulputate mi, vitae consequat justo arcu non ex.
         </p>

css-gap-decorations/the-daily-oddity.html

@@ -147,7 +147,7 @@
 
       column-rule: 2px solid var(--text);
       column-rule-break: intersection;
-      column-rule-outset: 0;
+      column-rule-inset: 0;
 
       row-rule: 2px solid var(--text);
     }
@@ -249,7 +249,7 @@
       grid-template-columns: 5fr 1fr;
       grid-template-rows: min-content 1fr;
       column-rule: 1px solid color-mix(in srgb, var(--back) 30%, var(--text));
-      column-rule-outset: -0.5rem;
+      column-rule-inset: 0.5rem;
     }
 
     footer h3,