Stand a slider up with orientation="vertical"

M3 Expressive's configuration table lists a vertical orientation the library
had no prop for (plan step 24, audit docs/audits/m3-alignment/inputs.md
§ Missing). The drawing is the horizontal one, laid out as long as the slider
is tall inside a size container and turned a quarter anticlockwise, so the
geometry, the sizes and the tokens are untouched; the value label and the inset
icon are turned back so they read across. The keyboard stays the native range's
— Up and Right raise, Down and Left lower — and the inputs say
aria-orientation. A vertical slider takes its length from its wrapper, so the
header, the SKILL.md entry and the showcase all say to give it a height. M3
keeps range sliders horizontal, so `range` wins over `orientation`.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/views/showcase/sections/sliders.blade.php

@@ -22,6 +22,16 @@
                 <x-slider label="Balance" value="15" :min="-50" :max="50" centered />
             </div>
             BLADE,
+        'Vertical' => <<<'BLADE'
+            {{-- M3 Expressive's second orientation. A vertical slider needs a height: it is on the wrapper, which the label and hint share. --}}
+            <div class="flex flex-wrap items-end gap-10">
+                <x-slider label="Volume" orientation="vertical" value="40" class="h-64" hint="Up and Down" />
+                <x-slider label="Warmth" orientation="vertical" value="6" :max="10" ticks class="h-64" />
+                <x-slider label="Brightness" orientation="vertical" value="70" size="md" icon="light_mode" class="h-64" />
+                <x-slider label="Always labelled" orientation="vertical" value="55" value-label="always" color="tertiary" class="h-64" />
+                <x-slider label="Locked" orientation="vertical" value="25" disabled class="h-64" />
+            </div>
+            BLADE,
         'Colours and value labels' => <<<'BLADE'
             <div class="grid w-full gap-8 expanded:grid-cols-3">
                 <x-slider label="Always labelled" value="55" color="secondary" value-label="always" size="sm" />
@@ -48,7 +58,7 @@
     <h2 class="type-headline-md">Sliders</h2>
 
     <p class="max-w-3xl type-body-md text-on-surface-variant">
-        <code>&lt;x-slider&gt;</code>: M3 Expressive's slider on native range inputs — standard, range and centred, five sizes, ticks, value labels and an inset icon.
+        <code>&lt;x-slider&gt;</code>: M3 Expressive's slider on native range inputs — standard, range and centred, horizontal or vertical, five sizes, ticks, value labels and an inset icon.
     </p>
 
     @foreach ($examples as $title => $code)