[css-forms-1] Improve slider UA styles 他

Fix syntax error in stylesheet
w3c/csswg-drafts@0e86827

Use :is() for UA sheet.
w3c/csswg-drafts@8844277

Improve slider UA styles
w3c/csswg-drafts@6ca38b5

Fix some typos in the UA sheet.
w3c/csswg-drafts@56f9086

Author: triple-underscore

css-forms-ja.html

@@ -159,8 +159,8 @@
 ●●options
 
 spec_title:CSS Gap Decorations Module Level 1
-spec_date:2026-03-09
-trans_update:2026-03-12
+spec_date:2026-03-17
+trans_update:2026-03-17
 	source_checked:
 page_state_key:CSS
 original_url:https://drafts.csswg.org/css-forms-1/
@@ -238,6 +238,7 @@
 p.height:~SIZING#propdef-height
 p.inline-size:~CSSLOGICAL#propdef-inline-size
 p.inset:~CSSPOS#propdef-inset
+p.inset-inline-end:~CSSPOS#propdef-inset-inline-end
 p.interactivity:~CSSUI#propdef-interactivity
 p.justify-content:~CSSALIGN#propdef-justify-content
 p.margin-inline-start:~CSSLOGICAL#propdef-margin-inline-start
@@ -249,6 +250,7 @@
 p.padding-block:~CSSLOGICAL#propdef-padding-block
 p.padding-inline:~CSSLOGICAL#propdef-padding-inline
 p.padding:~CSSBOX#propdef-padding
+p.position:~CSSPOS#propdef-position
 p.position-try-fallbacks:~CSSANCHOR#propdef-position-try-fallbacks
 p.position-try-order:~CSSANCHOR#propdef-position-try-order
 p.text-align:~CSSTEXT#propdef-text-align
@@ -2647,43 +2649,83 @@ <h3 title="Sliders">~slider</h3>
 
 <p class="issue">
 次に挙げるものの~style法を精緻化する
+[＊`12267$issue]
 ⇒＃
 `meter$e,
 `progress$e,
 `input type=checkbox switch^e,
 `input type=range^e
 ◎
-Refine meter, progress, switch and range input styling.
+Refine meter, progress, switch and range input styling. [Issue #12267]
 </p>
 
 <pre class="lang-css">
+input[type="checkbox"][switch],
+input[type="range"] {
+  `display$p: inline-flex;
+  `position$p: relative;
+  `align-items$p: center;
+  `inline-size$p: 100%;
+}
+
 input[type="checkbox"][switch]::slider-track,
 input[type="range"]::slider-track,
 meter::slider-track,
 progress::slider-track {
-  `height$p: 1em;
+  `block-size$p: 1em;
+  `inline-size$p: 100%;
+}
+
+input[type=range]::slider-track {
+  `block-size$p: 0.5em;
+}
+
+input[type="checkbox"][switch]::slider-track {
+  `border-radius$p: 1em;
 }
 
 input[type="checkbox"][switch]::slider-fill,
 input[type="range"]::slider-fill,
 meter::slider-fill,
 progress::slider-fill {
-  `height$p: 100%;
+  `block-size$p: 100%;
   `background-color$p: currentColor;
 }
 
 progress:indeterminate::slider-fill {
   `inline-size$p: 0;
 }
 
+input[type="range"]::slider-fill,
+input[type="checkbox"][switch]::slider-fill {
+  `background-color$p: color-mix(currentColor 25%, transparent);
+  `border-radius$p: inherit;
+
+  `block-size$p: 100%;
+}
+
+input[type="checkbox"][switch]::slider-fill {
+  `inline-size$p: 0%;
+}
+
+input[type="checkbox"][switch]:checked::slider-fill {
+  `inline-size$p: 100%;
+}
+
 input[type="checkbox"][switch]::slider-thumb,
 input[type="range"]::slider-thumb {
   `border-radius$p: 0;
   `border$p: none;
   `background-color$p: currentColor;
   `appearance$p: none;
-  `width$p: 1em;
-  `height$p: 100%;
+  `inline-size$p: 1em;
+  `block-size$p: 1em;
+  `border-radius$p: 100%;
+  `position$p: absolute;
+}
+
+input[type="checkbox"][switch]:checked::slider-thumb {
+  `inset-inline-end$p: 0;
 }
 </pre>
 
@@ -2754,10 +2796,7 @@ <h3 title="Buttons (and button-like controls)">~button, ~buttonの様な~control
 button,
 ::file-selector-button,
 select,
-input[type="color"],
-input[type="button"],
-input[type="reset"],
-input[type="submit"] {
+input:is([type="color"], [type="button"], [type="reset"], [type="submit"]) {
   `border$p: 1px solid currentColor;
   `background-color$p: transparent;
   `color$p: inherit;
@@ -2830,28 +2869,22 @@ <h3 title="Buttons (and button-like controls)">~button, ~buttonの様な~control
 
 button:enabled:hover,
 select:enabled:hover,
-input[type="color"]:enabled:hover,
-input[type="button"]:enabled:hover,
-input[type="submit"]:enabled:hover,
-input[type="file"]:enabled::files-selector-button:hover {
+input:is([type="color"], [type="button"], [type="reset"], [type="submit"]):enabled:hover,
+input[type="file"]:enabled::file-selector-button:hover {
   `background-color$p: color-mix(currentColor 10%, transparent);
 }
 
 button:enabled:active,
 select:enabled:active,
-input[type="color"]:enabled:active,
-input[type="button"]:enabled:active,
-input[type="submit"]:enabled:active,
-input[type="file"]:enabled::files-selector-button:active {
+input:is([type="color"], [type="button"], [type="reset"], [type="submit"]):enabled:active,
+input[type="file"]:enabled::file-selector-button:active {
   `background-color$p: color-mix(currentColor 20%, transparent);
 }
 
 button:disabled,
 select:disabled,
-input[type="color"]:disabled,
-input[type="button"]:disabled,
-input[type="submit"]:disabled,
-input[type="file"]:disabled::files-selector-button {
+input:is([type="color"], [type="button"], [type="reset"], [type="submit"]):disabled,
+input[type="file"]:disabled::file-selector-button {
   `color$p: color-mix(currentColor 50%, transparent);
 }
 </pre>