ClintchizandClaude Opus 5.5
1bed8e4b74
Redesign - Shared field foundation rules (duplicated across 15 form components and emitted globally) are now identical everywhere, so later copies no longer silently override earlier redesigns. - Drawn checkbox and radio controls, white switch thumbs (the thumb was the text colour, a black blob in light mode), recessed field wells, keycap actions in Modal, Drawer, Popover, Toaster, Pagination, Stepper, DataTable. - Menus (Dropdown, ContextMenu, Popover, Select dropdown, Navbar panels) share one flat raised panel with neutral hover rows and mono section labels. - Alerts with an accent rail and icon chip; card headers without the grey band; accordion, collapse, list, list group, timeline, stats, metrics, chat, skeleton, avatar group, clipboard, splitter, section, sidebar, navbar and upload progress restyled. - Chart rebuilt: nice y-axis ticks, gridlines, rounded bars, line and area modes, hover tooltips, hidden series leave the scale. Fixes - Checkbox and radio labels toggle their input again (empty for="" broke it). - TimePicker kept every clicked time pressed; only the chosen hour and minute are pressed now, and nothing is pressed before a value exists. - ColorPicker hex readout now follows the picked colour. - Disabled FileInput no longer shows the native file-input text. - Date and time panels float instead of pushing content. - ContextMenu opened at the pointer closes on scroll. - Drawer left/top/bottom placements slide from their own edge again. - Image-only Card no longer renders an empty body strip. - Timeline supports item.time, current/upcoming states, sizes and compact/alternate variants; showcase demos use distinct variants. - ChatBubble: delivery receipts (sending/sent/delivered/read/failed/error) and meta aligned to its bubble. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
93 lines
3.6 KiB
Plaintext
93 lines
3.6 KiB
Plaintext
component Skeleton {
|
|
props {
|
|
color: string = "primary"
|
|
label: string = "Loading"
|
|
size: string = "md"
|
|
lines: number = 3
|
|
class: string = ""
|
|
}
|
|
view {
|
|
<div class="wrn-skeleton-component {class}" data-color="{color}" data-size="{size}" role="status" aria-label="{label}" aria-busy="true">
|
|
<div class="wrn-skeleton-component__head" aria-hidden="true">
|
|
<span class="wrn-skeleton-component__avatar"></span>
|
|
<span class="wrn-skeleton-component__heading">
|
|
<span class="wrn-skeleton-component__bar wrn-skeleton-component__bar--title"></span>
|
|
<span class="wrn-skeleton-component__bar wrn-skeleton-component__bar--meta"></span>
|
|
</span>
|
|
</div>
|
|
<div class="wrn-skeleton-component__body" aria-hidden="true">
|
|
{#each Array(lines).fill(0) as line}<span class="wrn-skeleton-component__line wrn-skeleton-component__bar"></span>{/each}
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
style {
|
|
.wrn-skeleton-component {
|
|
--wrn-skeleton-base: color-mix(in srgb, var(--wrn-color-text) 11%, var(--wrn-color-surface));
|
|
--wrn-skeleton-shine: color-mix(in srgb, var(--wrn-color-text) 3%, var(--wrn-color-surface));
|
|
--wrn-skeleton-line: 0.625rem;
|
|
display: grid;
|
|
width: min(100%, 24rem);
|
|
gap: 1rem;
|
|
}
|
|
.wrn-skeleton-component[data-color="primary"] {
|
|
--wrn-skeleton-base: color-mix(in srgb, var(--wrn-color-primary) 17%, var(--wrn-color-surface));
|
|
--wrn-skeleton-shine: color-mix(in srgb, var(--wrn-color-primary) 4%, var(--wrn-color-surface));
|
|
}
|
|
.wrn-skeleton-component[data-color="secondary"] {
|
|
--wrn-skeleton-base: color-mix(in srgb, var(--wrn-color-secondary) 17%, var(--wrn-color-surface));
|
|
--wrn-skeleton-shine: color-mix(in srgb, var(--wrn-color-secondary) 4%, var(--wrn-color-surface));
|
|
}
|
|
.wrn-skeleton-component[data-size="xs"],
|
|
.wrn-skeleton-component[data-size="sm"] { --wrn-skeleton-line: 0.5rem; gap: 0.75rem; }
|
|
.wrn-skeleton-component[data-size="lg"],
|
|
.wrn-skeleton-component[data-size="xl"] { --wrn-skeleton-line: 0.75rem; gap: 1.25rem; }
|
|
|
|
.wrn-skeleton-component__head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
.wrn-skeleton-component__avatar {
|
|
width: calc(var(--wrn-skeleton-line) * 4);
|
|
height: calc(var(--wrn-skeleton-line) * 4);
|
|
flex: none;
|
|
border-radius: 999px;
|
|
}
|
|
.wrn-skeleton-component__heading,
|
|
.wrn-skeleton-component__body {
|
|
display: grid;
|
|
flex: 1;
|
|
min-width: 0;
|
|
gap: calc(var(--wrn-skeleton-line) * 0.8);
|
|
}
|
|
|
|
/* Every block shares one shimmer; background-attachment: fixed keeps the
|
|
sweep continuous across blocks instead of restarting per bar. */
|
|
.wrn-skeleton-component__avatar,
|
|
.wrn-skeleton-component__bar {
|
|
display: block;
|
|
background:
|
|
linear-gradient(100deg, transparent 30%, var(--wrn-skeleton-shine) 50%, transparent 70%) 0 0 / 200% 100% fixed,
|
|
var(--wrn-skeleton-base);
|
|
animation: wrn-skeleton-component-shimmer 1.6s ease-in-out infinite;
|
|
}
|
|
.wrn-skeleton-component__bar {
|
|
height: var(--wrn-skeleton-line);
|
|
border-radius: 999px;
|
|
}
|
|
.wrn-skeleton-component__bar--title { width: 55%; height: calc(var(--wrn-skeleton-line) * 1.25); }
|
|
.wrn-skeleton-component__bar--meta { width: 32%; }
|
|
.wrn-skeleton-component__line:last-child:not(:first-child) { width: 64%; }
|
|
|
|
@keyframes wrn-skeleton-component-shimmer {
|
|
from { background-position: 150% 0, 0 0; }
|
|
to { background-position: -50% 0, 0 0; }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.wrn-skeleton-component__avatar,
|
|
.wrn-skeleton-component__bar { animation: none; }
|
|
}
|
|
}
|
|
}
|