ClintchizandClaude Opus 5
8aa28205e0
Container, Columns, Grid, Divider, Image, Link, Typography and Kbd were built from utility classes and class: conditionals. That works only where Tailwind is present, and every variant cost a dozen conditional lines -- Divider spent eleven of them saying which token to paint the rule. They now carry wire-* classes with a local style block, and variants are data attributes the style block selects on. Divider went from eleven conditionals to five rules, and Typography lost thirteen. Behaviour is preserved rather than improved on. Container keeps columns and gap even though a container is not really a grid, because applications depend on them, and its columns default stays 2: the redesign contract test caught that changing it would silently reflow every Container already published. Additive only: Grid gains minItemWidth for an auto-fit track, Divider gains dashed and dotted variants, Image gains fit, and Link gains underline. Verified in a browser rather than by eye, since the pane cannot screenshot: track counts match the declared columns at desktop and collapse correctly below each breakpoint. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
128 lines
2.8 KiB
Plaintext
128 lines
2.8 KiB
Plaintext
// Image -- a framed image with a reserved aspect ratio.
|
|
//
|
|
// <Image src="/hero.jpg" alt="Dashboard" size="video" rounded={true} />
|
|
//
|
|
// The frame keeps its ratio whether or not the image has loaded, so the page
|
|
// does not jump when it arrives. Without a src it renders a labelled
|
|
// placeholder of the same shape rather than collapsing.
|
|
//
|
|
// NOTE: the style block uses /* */ comments only -- // is not a CSS comment
|
|
// and silently swallows the rule that follows it.
|
|
component Image {
|
|
props {
|
|
size: string = "default"
|
|
color: string = "primary"
|
|
src: string = ""
|
|
alt: string = ""
|
|
width: string = ""
|
|
height: string = ""
|
|
loading: string = "lazy"
|
|
fit: string = "cover"
|
|
rounded: boolean = false
|
|
class: string = ""
|
|
}
|
|
|
|
view {
|
|
<figure
|
|
{...attrs}
|
|
data-ui-component="Image"
|
|
class='wire-image {class}'
|
|
data-size='{size}'
|
|
data-color='{color}'
|
|
data-fit='{fit}'
|
|
data-rounded='{rounded}'
|
|
>
|
|
<img
|
|
class="wire-image__img"
|
|
data-show="src"
|
|
src='{src}'
|
|
alt='{alt}'
|
|
width='{width}'
|
|
height='{height}'
|
|
loading='{loading}'
|
|
decoding="async"
|
|
/>
|
|
|
|
<div
|
|
class="wire-image__placeholder"
|
|
data-show="!src"
|
|
role="img"
|
|
aria-label='{alt || "Image placeholder"}'
|
|
>
|
|
<span class="icon-[lucide--image] wire-image__placeholder-icon" aria-hidden="true"></span>
|
|
</div>
|
|
|
|
<slot></slot>
|
|
</figure>
|
|
}
|
|
|
|
style {
|
|
.wire-image {
|
|
position: relative;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
min-width: 0;
|
|
background: var(--wire-color-surface-soft);
|
|
}
|
|
|
|
.wire-image[data-rounded="true"] {
|
|
border-radius: var(--wire-radius-lg);
|
|
}
|
|
|
|
/*
|
|
* The ratio sits on the frame rather than the image, so the space is
|
|
* reserved before the file arrives and the page does not jump.
|
|
*/
|
|
.wire-image[data-size="square"] {
|
|
aspect-ratio: 1 / 1;
|
|
}
|
|
|
|
.wire-image[data-size="video"] {
|
|
aspect-ratio: 16 / 9;
|
|
}
|
|
|
|
.wire-image[data-size="landscape"] {
|
|
aspect-ratio: 4 / 3;
|
|
}
|
|
|
|
.wire-image[data-size="portrait"] {
|
|
aspect-ratio: 3 / 4;
|
|
}
|
|
|
|
.wire-image__img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.wire-image[data-fit="contain"] .wire-image__img {
|
|
object-fit: contain;
|
|
}
|
|
|
|
.wire-image[data-fit="fill"] .wire-image__img {
|
|
object-fit: fill;
|
|
}
|
|
|
|
.wire-image[data-size="default"] .wire-image__img {
|
|
height: auto;
|
|
}
|
|
|
|
.wire-image__placeholder {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
min-height: 12rem;
|
|
height: 100%;
|
|
color: var(--wire-color-text-muted);
|
|
}
|
|
|
|
.wire-image__placeholder-icon {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
}
|
|
}
|
|
}
|