Andreas Reinhold / reiniandClaude Opus 5
15cd306aba
Plan step 36 (actions). <x-progress> renders data-md-progress with data-md-color and data-md-circular/-wavy/-thick, and data-md-value/-max in place of data-value/data-max; no class list. progress.css draws LinearProgressIndicatorTokens and CircularProgressIndicatorTokens' stroke, sizes and colours, and the linear indicator's unconditional right-to-left mirror. Its sizing is a default only, same as loading.css: a caller's own class, unlayered or in Tailwind's utilities layer, still outranks it, so the width/ size detection regex the view carried is gone with it. resources/js/progress.js's WATCHED array and its reads follow the renamed hooks. ProgressTest (Feature and Browser) is rewritten on the hooks and ComponentStylesheet. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
114 lines
3.8 KiB
CSS
114 lines
3.8 KiB
CSS
/*
|
|
* <x-progress>: M3 Expressive's progress indicator, drawn on the server for its first frame and
|
|
* frame by frame in the browser after.
|
|
*
|
|
* ProgressIndicatorTokens, LinearProgressIndicatorTokens, CircularProgressIndicatorTokens (androidx
|
|
* Compose Material 3, Apache-2.0): 4px stroke (`data-md-thick` 8px), linear 4px tall (8px thick,
|
|
* 10px `data-md-wavy`, 14px wavy thick — the container grows by the extra stroke, keeping the
|
|
* wave's own height put), circular 40px (44px thick, 48px wavy, 52px wavy thick). `data-md-color`
|
|
* is the active indicator's `color` and the track's `stroke`; the track is secondary-container for
|
|
* primary and secondary, and the colour's own container otherwise.
|
|
*
|
|
* Linear mirrors in a right-to-left document unconditionally — M3's own rule for this indicator,
|
|
* not the `mirror-rtl` a caller opts an icon into. The sizing here is a default only: an
|
|
* application's own class, unlayered or in Tailwind's `utilities` layer, always outranks
|
|
* `material.components`, so `w-*`/`size-*` still narrows or grows the indicator exactly as it did
|
|
* before this file existed.
|
|
*
|
|
* resources/js/progress.js reads and writes `data-md-value`, `data-md-max`, `data-md-circular`,
|
|
* `data-md-wavy` and `data-md-thick` — ProgressIndicator.kt, WavyProgressIndicator.kt and its
|
|
* Linear/CircularWavyProgressModifiers, ported at commit 27cf9a7d5788aa0f5f2d8b6699ce279560daf326
|
|
* — and draws every frame straight onto the SVG's own attributes; nothing here reads a class or
|
|
* runs a transition.
|
|
*/
|
|
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
|
|
@layer material.components {
|
|
[data-md-progress] {
|
|
color: var(--md-sys-color-primary);
|
|
stroke: var(--md-sys-color-secondary-container);
|
|
|
|
& > svg {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
[data-md-progress]:not([data-md-circular]) {
|
|
display: block;
|
|
width: 100%;
|
|
height: 4px;
|
|
}
|
|
|
|
[data-md-progress]:not([data-md-circular]):dir(rtl) {
|
|
rotate: 180deg;
|
|
}
|
|
|
|
[data-md-progress]:not([data-md-circular])[data-md-thick] {
|
|
height: 8px;
|
|
}
|
|
|
|
[data-md-progress]:not([data-md-circular])[data-md-wavy] {
|
|
height: 10px;
|
|
}
|
|
|
|
[data-md-progress]:not([data-md-circular])[data-md-wavy][data-md-thick] {
|
|
height: 14px;
|
|
}
|
|
|
|
[data-md-progress][data-md-circular] {
|
|
display: inline-block;
|
|
flex-shrink: 0;
|
|
vertical-align: middle;
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
[data-md-progress][data-md-circular][data-md-thick] {
|
|
width: 44px;
|
|
height: 44px;
|
|
}
|
|
|
|
[data-md-progress][data-md-circular][data-md-wavy] {
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
|
|
[data-md-progress][data-md-circular][data-md-wavy][data-md-thick] {
|
|
width: 52px;
|
|
height: 52px;
|
|
}
|
|
|
|
[data-md-progress][data-md-color='secondary'] {
|
|
color: var(--md-sys-color-secondary);
|
|
stroke: var(--md-sys-color-secondary-container);
|
|
}
|
|
|
|
[data-md-progress][data-md-color='tertiary'] {
|
|
color: var(--md-sys-color-tertiary);
|
|
stroke: var(--md-sys-color-tertiary-container);
|
|
}
|
|
|
|
[data-md-progress][data-md-color='error'] {
|
|
color: var(--md-sys-color-error);
|
|
stroke: var(--md-sys-color-error-container);
|
|
}
|
|
|
|
[data-md-progress][data-md-color='success'] {
|
|
color: var(--md-sys-color-success);
|
|
stroke: var(--md-sys-color-success-container);
|
|
}
|
|
|
|
[data-md-progress][data-md-color='warning'] {
|
|
color: var(--md-sys-color-warning);
|
|
stroke: var(--md-sys-color-warning-container);
|
|
}
|
|
|
|
[data-md-progress][data-md-color='info'] {
|
|
color: var(--md-sys-color-info);
|
|
stroke: var(--md-sys-color-info-container);
|
|
}
|
|
}
|