feat: add icon support to button, alert, badge, and form input

Button:
- :icon-left, :icon-right props for buttons with leading/trailing icons
- :icon prop for icon-only buttons (square padding via .btn-icon class)
- Icon size scales with button size (sm→sm, md/lg→sm/md)

Alert:
- Auto-assigns variant-specific icons (circle-check, alert-triangle,
  alert-circle, info) per variant
- :icon-name prop to override default, false to suppress
- Layout restructured with .alert-icon + .alert-content wrapper

Badge:
- :icon-name prop adds a leading icon before text
- .badge-icon CSS scales icon to match badge font size

Form input:
- :icon-left and :icon-right props on form-input
- Wraps input in .form-input-wrap with absolutely-positioned icon spans
- Padding adjusts automatically via .form-input--icon-left/right

All three dev targets (hiccup, replicant, squint) updated with demos.
This commit is contained in:
Florian Schroedl
2026-03-05 19:33:55 +01:00
parent e3132a3cb4
commit 93edebf144
15 changed files with 438 additions and 122 deletions

View File

@@ -2,8 +2,7 @@
container-type: inline-size;
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
align-items: flex-start;
gap: var(--size-3);
padding: var(--size-4) var(--size-6);
background: var(--bg-1);
@@ -12,6 +11,18 @@
font-size: var(--font-sm);
}
.alert-icon {
display: flex;
align-items: center;
flex-shrink: 0;
padding-top: var(--size-1);
}
.alert-content {
flex: 1;
min-width: 0;
}
.alert-title {
font-weight: 600;
margin: 0;