WorkRoot/WRNexusJS
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): component redesign pass and fixes, release ui 0.8.87

Browse Source 
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>
This commit is contained in:
ClintchizandClaude Opus 5.5 committed 2026-09-30 16:18:13 +05:30
1 parent 5eae6f3b3c
commit 1bed8e4b74
93 files changed
+4439 -1915
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/ui/components/Accordion.wrn
+19 -12
View File
@@ -229,15 +229,17 @@ component Accordion {
width: 100%;
align-items: center;
gap: 0.75rem;
padding: 0.85rem 0;
padding: 0.9rem 0;
border: 0;
background: transparent;
color: var(--wrn-color-text);
font: inherit;
font-size: 0.88rem;
font-size: 0.9rem;
font-weight: 600;
letter-spacing: -0.008em;
text-align: left;
cursor: pointer;
transition: color 120ms ease;
}
.wrn-next__accordion-heading > button > span:not(.wrn-next__accordion-indicator) {
@@ -286,7 +288,7 @@ component Accordion {
.wrn-next__accordion-item[data-open="true"]
> .wrn-next__accordion-heading
.wrn-next__accordion-indicator {
color: var(--wrn-accordion-accent);
color: var(--wrn-color-text);
transform: rotate(45deg);
}
@@ -298,7 +300,7 @@ component Accordion {
}
.wrn-next__accordion-item[data-open="true"] > .wrn-next__accordion-heading > button {
color: var(--wrn-accordion-accent);
color: var(--wrn-color-text);
}
.wrn-next__accordion-panel {
@@ -321,9 +323,10 @@ component Accordion {
.wrn-next__accordion-content {
padding: 0 0 1rem;
color: var(--wrn-color-muted);
font-size: 0.86rem;
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
font-size: 0.875rem;
line-height: 1.65;
max-width: 68ch;
}
.wrn-next--accordion[data-indicator-position="start"] .wrn-next__accordion-content {
@@ -350,8 +353,9 @@ component Accordion {
.wrn-next--accordion-bordered {
overflow: hidden;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-md);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-1);
}
.wrn-next--accordion-bordered > .wrn-next__accordion-item + .wrn-next__accordion-item {
@@ -380,13 +384,16 @@ component Accordion {
.wrn-next--accordion-separated > .wrn-next__accordion-item {
overflow: hidden;
border: 1px solid transparent;
border-radius: var(--wrn-radius-md);
background: var(--wrn-color-surface-2);
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-1);
transition: box-shadow 160ms ease, border-color 160ms ease;
}
.wrn-next--accordion-separated > .wrn-next__accordion-item[data-open="true"] {
border-color: var(--wrn-color-border);
border-color: var(--wrn-color-border-strong, var(--wrn-color-border));
box-shadow: var(--wrn-shadow-2);
}
.wrn-next--accordion-separated
@@ -478,7 +485,7 @@ component Accordion {
.wrn-component p {
margin: 0;
color: var(--wrn-color-muted);
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
line-height: 1.6;
}
}
packages/ui/components/AdvancedSelect.wrn
+10 -9
View File
@@ -497,13 +497,14 @@ component AdvancedSelect {
.wrn-next__select-tags > span {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.3rem 0.55rem;
border-radius: 999px;
color: var(--wrn-component-color);
background: color-mix(in srgb, var(--wrn-component-color) 12%, transparent);
font-size: 0.75em;
font-weight: 700;
gap: 0.3rem;
padding: 0.15rem 0.5rem;
border: 1px solid var(--wrn-color-border);
border-radius: calc(var(--wrn-radius-sm) - 2px);
color: var(--wrn-color-text);
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
font-size: 0.75rem;
font-weight: 550;
}
.wrn-next__select-tags img {
@@ -522,7 +523,7 @@ component AdvancedSelect {
.wrn-next__placeholder {
overflow: hidden;
color: var(--wrn-color-muted);
color: var(--wrn-color-input-placeholder, var(--wrn-color-muted));
text-overflow: ellipsis;
white-space: nowrap;
}
@@ -592,7 +593,7 @@ component AdvancedSelect {
.wrn-component p {
margin: 0;
color: var(--wrn-color-muted);
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
line-height: 1.6;
}
}
packages/ui/components/AnnouncementBar.wrn
+2 -6
View File
@@ -234,9 +234,7 @@ badge: string = ""
background: var(--wrn-color-surface-raised);
border: 1px solid var(--wrn-color-border);
border-radius: 1.25rem;
box-shadow:
0 1px 2px rgb(0 0 0 / 0.04),
0 12px 32px rgb(0 0 0 / 0.08);
box-shadow: var(--wrn-shadow-2);
}
.wrn-announcement[data-variant="soft"] .wrn-announcement__surface {
@@ -279,9 +277,7 @@ badge: string = ""
color-mix(in srgb, var(--announcement-accent) 76%, black 24%)
);
border-color: color-mix(in srgb, var(--announcement-contrast) 28%, transparent);
box-shadow:
0 1px 0 color-mix(in srgb, var(--announcement-contrast) 20%, transparent) inset,
0 18px 46px color-mix(in srgb, var(--announcement-accent) 30%, transparent);
box-shadow: var(--wrn-shadow-2);
}
.wrn-announcement__accent {
packages/ui/components/AuthForm.wrn
+1 -1
View File
@@ -211,7 +211,7 @@ component AuthForm {
.wrn-component p {
margin: 0;
color: var(--wrn-color-muted);
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
line-height: 1.6;
}
}
packages/ui/components/AuthSplitLayout.wrn
+1 -1
View File
@@ -323,7 +323,7 @@ component AuthSplitLayout {
.wrn-component p {
margin: 0;
color: var(--wrn-color-muted);
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
line-height: 1.6;
}
}
packages/ui/components/AvatarGroup.wrn
+43 -36
View File
@@ -151,7 +151,7 @@ component AvatarGroup {
style {
/* --- Avatar group -------------------------------------------------------- */
.wrn-next--avatar-group {
--wrn-avatar-group-size: 3rem;
--wrn-avatar-group-size: 2.5rem;
position: relative;
display: inline-flex;
width: fit-content;
@@ -159,24 +159,24 @@ component AvatarGroup {
}
.wrn-next--avatar-group[data-size="xs"] {
--wrn-avatar-group-size: 1.75rem;
--wrn-avatar-group-size: 1.5rem;
}
.wrn-next--avatar-group[data-size="sm"] {
--wrn-avatar-group-size: 2.25rem;
--wrn-avatar-group-size: 2rem;
}
.wrn-next--avatar-group[data-size="md"],
.wrn-next--avatar-group[data-size="default"] {
--wrn-avatar-group-size: 3rem;
--wrn-avatar-group-size: 2.5rem;
}
.wrn-next--avatar-group[data-size="lg"] {
--wrn-avatar-group-size: 4rem;
--wrn-avatar-group-size: 3.25rem;
}
.wrn-next--avatar-group[data-size="xl"] {
--wrn-avatar-group-size: 5rem;
--wrn-avatar-group-size: 4.5rem;
}
.wrn-next__avatar-group-members {
@@ -186,7 +186,7 @@ component AvatarGroup {
.wrn-next--avatar-group[data-layout="stack"] .wrn-next__avatar-group-member,
.wrn-next--avatar-group[data-layout="stack"] .wrn-next__avatar-group-overflow {
margin-left: calc(var(--wrn-avatar-group-size) * -0.22);
margin-left: calc(var(--wrn-avatar-group-size) * -0.28);
}
.wrn-next--avatar-group[data-layout="stack"] :first-child {
@@ -236,7 +236,7 @@ component AvatarGroup {
}
.wrn-next__avatar-group-member[data-shape="rounded"] {
border-radius: calc(var(--wrn-radius-sm, 0.5rem) * 0.72);
border-radius: calc(var(--wrn-avatar-group-size) * 0.28);
}
.wrn-next__avatar-group-avatar,
@@ -248,14 +248,15 @@ component AvatarGroup {
height: 100%;
overflow: hidden;
place-items: center;
color: white;
border: 2px solid var(--wrn-avatar-group-ring);
color: color-mix(in srgb, var(--wrn-avatar-group-color, var(--wrn-color-primary)) 78%, var(--wrn-color-text));
border: 1px solid color-mix(in srgb, var(--wrn-avatar-group-color, var(--wrn-color-primary)) 22%, transparent);
border-radius: inherit;
background: var(--wrn-avatar-group-color, var(--wrn-color-primary));
box-shadow: 0 5px 14px rgb(0 0 0 / 0.16);
background: color-mix(in srgb, var(--wrn-avatar-group-color, var(--wrn-color-primary)) 14%, var(--wrn-color-surface));
box-shadow: 0 0 0 2px var(--wrn-color-surface), var(--wrn-shadow-1);
font: inherit;
font-size: calc(var(--wrn-avatar-group-size) * 0.3);
font-weight: 800;
font-size: calc(var(--wrn-avatar-group-size) * 0.36);
font-weight: 650;
letter-spacing: -0.01em;
}
.wrn-next__avatar-group-avatar img,
@@ -270,15 +271,19 @@ component AvatarGroup {
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--wrn-color-text);
background: var(--wrn-color-surface-2);
color: var(--wrn-color-text-muted);
border-color: var(--wrn-color-border);
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
font-size: calc(var(--wrn-avatar-group-size) * 0.32);
font-weight: 650;
font-variant-numeric: tabular-nums;
}
.wrn-next__avatar-group-member:hover,
.wrn-next__avatar-group-member:focus-visible,
.wrn-next__avatar-group-overflow:focus-within {
z-index: 5;
transform: translateY(-3px);
transform: translateY(-2px);
}
.wrn-next__avatar-group-member:focus-visible,
@@ -294,13 +299,14 @@ component AvatarGroup {
z-index: 20;
width: max-content;
max-width: 14rem;
padding: 0.4rem 0.6rem;
color: var(--wrn-color-bg);
border-radius: 0.4rem;
background: var(--wrn-color-text);
box-shadow: 0 8px 22px rgb(0 0 0 / 0.22);
padding: 0.375rem 0.6rem;
color: #f4f5f7;
border: 1px solid rgb(255 255 255 / 0.08);
border-radius: var(--wrn-radius-sm, 0.5rem);
background: #16181d;
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 8px 24px -4px rgb(0 0 0 / 0.35);
font-size: 0.75rem;
font-weight: 650;
font-weight: 550;
pointer-events: none;
opacity: 0;
transform: translate(-50%, 0.25rem);
@@ -317,32 +323,32 @@ component AvatarGroup {
.wrn-next__avatar-group-menu {
position: absolute;
top: calc(100% + 0.65rem);
top: calc(100% + 0.5rem);
right: 0;
z-index: 30;
display: grid;
width: max-content;
min-width: 12rem;
gap: 0.25rem;
padding: 0.45rem;
gap: 0.125rem;
padding: 0.3rem;
color: var(--wrn-color-text);
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm, 0.5rem);
background: var(--wrn-color-surface);
box-shadow: 0 16px 38px rgb(0 0 0 / 0.22);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
}
.wrn-next__avatar-group-menu-item {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.45rem 0.55rem;
border-radius: 0.4rem;
font-size: 0.82rem;
padding: 0.4rem 0.55rem;
border-radius: calc(var(--wrn-radius-sm) - 2px);
font-size: 0.8125rem;
}
.wrn-next__avatar-group-menu-item:hover {
background: var(--wrn-color-surface-2);
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
}
.wrn-next__avatar-group-menu-avatar {
@@ -353,9 +359,10 @@ component AvatarGroup {
flex: none;
place-items: center;
border-radius: 999px;
background: var(--wrn-color-surface-2);
color: var(--wrn-color-primary-text, var(--wrn-color-primary));
background: color-mix(in srgb, var(--wrn-color-primary) 12%, var(--wrn-color-surface));
font-size: 0.65rem;
font-weight: 800;
font-weight: 650;
}
/* Shared component foundation. */
@@ -423,7 +430,7 @@ component AvatarGroup {
.wrn-component p {
margin: 0;
color: var(--wrn-color-muted);
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
line-height: 1.6;
}
}
packages/ui/components/BackToTop.wrn
-1
View File
@@ -192,7 +192,6 @@ component BackToTop {
padding: 0.75rem;
color: var(--back-contrast);
background:
linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 56%),
var(--back-accent);
border: 1px solid color-mix(in srgb, white 18%, transparent);
border-radius: inherit;
packages/ui/components/Blockquote.wrn
+3 -3
View File
@@ -183,7 +183,7 @@ component Blockquote {
.wrn-next__blockquote-attribution cite {
color: var(--wrn-color-text);
font-style: normal;
font-weight: 700;
font-weight: 620;
}
.wrn-next__blockquote-attribution a {
@@ -244,7 +244,7 @@ component Blockquote {
.wrn-next--blockquote[data-variant="border"],
.wrn-next--blockquote[data-variant="left-border"] {
padding-inline-start: 1.5rem;
border-inline-start: 4px solid var(--wrn-blockquote-color);
border-inline-start: 3px solid var(--wrn-blockquote-color);
}
.wrn-next--blockquote[data-variant="bordered"] .wrn-next__blockquote-mark,
@@ -352,7 +352,7 @@ component Blockquote {
.wrn-component p {
margin: 0;
color: var(--wrn-color-muted);
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
line-height: 1.6;
}
}
packages/ui/components/Breadcrumb.wrn
+21 -24
View File
@@ -178,20 +178,20 @@ label: string = "Breadcrumb"
.wrn-breadcrumb[data-variant="soft"] {
width: fit-content;
max-width: 100%;
padding: 0.45rem 0.65rem;
background: var(--breadcrumb-soft);
border: 1px solid var(--breadcrumb-muted);
border-radius: 0.75rem;
padding: 0.25rem 0.5rem;
background: var(--wrn-color-surface-soft, var(--breadcrumb-soft));
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm);
}
.wrn-breadcrumb[data-variant="outline"] {
width: fit-content;
max-width: 100%;
padding: 0.45rem 0.65rem;
padding: 0.25rem 0.5rem;
background: var(--wrn-color-surface-raised);
border: 1px solid var(--wrn-color-border);
border-radius: 0.75rem;
box-shadow: var(--wrn-shadow-sm);
border-radius: var(--wrn-radius-sm);
box-shadow: var(--wrn-shadow-1);
}
.wrn-breadcrumb[data-variant="contrast"] {
@@ -226,10 +226,9 @@ label: string = "Breadcrumb"
display: inline-flex;
align-items: center;
justify-content: center;
margin-inline: 0.45rem;
color: var(--wrn-color-text-subtle);
margin-inline: 0.25rem;
color: var(--wrn-color-border-strong, var(--wrn-color-text-subtle));
font-size: 0.75rem;
opacity: 0.72;
}
.wrn-breadcrumb__separator-icon {
@@ -247,11 +246,11 @@ label: string = "Breadcrumb"
.wrn-breadcrumb__current {
display: inline-flex;
align-items: center;
gap: 0.4rem;
gap: 0.375rem;
min-width: 0;
min-height: 2rem;
padding: 0.25rem 0.4rem;
border-radius: 0.55rem;
min-height: 1.75rem;
padding: 0.125rem 0.375rem;
border-radius: calc(var(--wrn-radius-sm) - 2px);
font-size: 0.8125rem;
line-height: 1.25rem;
text-decoration: none;
@@ -271,15 +270,13 @@ label: string = "Breadcrumb"
.wrn-breadcrumb__link {
color: var(--wrn-color-text-muted);
font-weight: 600;
transition:
color 160ms ease,
background 160ms ease;
font-weight: 500;
transition: color 120ms ease, background 120ms ease;
}
.wrn-breadcrumb__link:hover {
color: var(--breadcrumb-accent);
background: var(--breadcrumb-soft);
color: var(--wrn-color-text);
background: var(--wrn-color-surface-muted, var(--breadcrumb-soft));
}
.wrn-breadcrumb__link:focus-visible {
@@ -291,12 +288,12 @@ label: string = "Breadcrumb"
.wrn-breadcrumb__current {
max-width: 22rem;
color: var(--wrn-color-text);
font-weight: 750;
font-weight: 600;
}
.wrn-breadcrumb__item[data-current="true"] .wrn-breadcrumb__current {
color: var(--breadcrumb-text);
background: var(--breadcrumb-soft);
color: var(--wrn-color-text);
background: transparent;
}
.wrn-breadcrumb__current[aria-disabled="true"] {
@@ -311,7 +308,7 @@ label: string = "Breadcrumb"
}
.wrn-breadcrumb__home {
color: var(--breadcrumb-accent);
color: var(--wrn-color-text-muted);
}
.wrn-breadcrumb__label {
packages/ui/components/ButtonGroup.wrn
+1 -1
View File
@@ -317,7 +317,7 @@ items: unknown[] = []
.wrn-component p {
margin: 0;
color: var(--wrn-color-muted);
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
line-height: 1.6;
}
}
packages/ui/components/CTASection.wrn
+3 -6
View File
@@ -291,9 +291,7 @@ component CTASection {
var(--wrn-color-surface-raised);
border: 1px solid var(--cta-border);
border-radius: 1.5rem;
box-shadow:
0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
0 24px 70px color-mix(in srgb, black 15%, transparent);
box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
}
.wrn-cta-section[data-radius="xl"] .wrn-cta-section__surface { border-radius: 1.5rem; }
.wrn-cta-section[data-content-padding="lg"] .wrn-cta-section__surface { padding: 3.5rem clamp(1.5rem, 5vw, 4rem); }
@@ -315,7 +313,6 @@ component CTASection {
.wrn-cta-section[data-variant="soft"] .wrn-cta-section__surface {
background:
radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--cta-accent) 14%, transparent), transparent 30%),
linear-gradient(135deg, var(--cta-accent-soft), transparent 64%),
var(--wrn-color-surface-raised);
box-shadow: none;
}
@@ -339,7 +336,7 @@ component CTASection {
radial-gradient(circle at 90% 8%, color-mix(in srgb, white 14%, transparent), transparent 30%),
var(--cta-accent);
border-color: color-mix(in srgb, white 22%, transparent);
box-shadow: 0 30px 80px color-mix(in srgb, var(--cta-accent) 28%, transparent);
box-shadow: var(--wrn-shadow-3);
}
.wrn-cta-section__background-image {
@@ -586,7 +583,7 @@ component CTASection {
background: var(--wrn-color-surface-raised);
border: 1px solid var(--wrn-color-border);
border-radius: 1.2rem;
box-shadow: 0 20px 54px color-mix(in srgb, black 18%, transparent);
box-shadow: var(--wrn-shadow-3);
}
.wrn-cta-section__visual-media {
packages/ui/components/Card.wrn
+43 -3
View File
@@ -324,7 +324,10 @@ component Card {
style {
.wrn-next__card-custom-footer:empty { display:none; }
.wrn-next__card-header:not(:has(strong,h1,h2,h3,h4,p,button,[data-slot])), .wrn-next__card-footer:not(:has(> span, > a, > .wrn-next__card-custom-footer:not(:empty))) { display:none; }
/* An image-only card renders empty regions that hold only <template>
markers; collapse them so the image is the whole card. */
.wrn-next__card-body:not(:has(> :not(template))) { display: none; }
.wrn-next__card-content:not(:has(.wrn-next__card-body > :not(template))):not(:has(.wrn-next__card-header :is(strong, h1, h2, h3, h4, p, button, [data-slot]))):not(:has(.wrn-next__card-footer > :is(span, a), .wrn-next__card-custom-footer:not(:empty))) { display: none; } .wrn-next__card-header:not(:has(strong,h1,h2,h3,h4,p,button,[data-slot])), .wrn-next__card-footer:not(:has(> span, > a, > .wrn-next__card-custom-footer:not(:empty))) { display:none; }
.wrn-next__card-media--overlay {
aspect-ratio: 16 / 9;
min-height: 18rem;
@@ -410,7 +413,44 @@ component Card {
}
.wrn-next__card-header {
border-bottom: 1px solid var(--wrn-color-border);
align-items: flex-start;
padding-block: 1rem 0.875rem;
border-bottom: 1px solid color-mix(in srgb, var(--wrn-color-border) 75%, transparent);
background: transparent;
}
.wrn-next__card-heading {
display: grid;
min-width: 0;
gap: 0.2rem;
}
.wrn-next__card-header h3 {
margin: 0;
color: var(--wrn-color-text);
font-size: 0.9375rem;
font-weight: 620;
letter-spacing: -0.012em;
line-height: 1.35;
}
.wrn-next__card-header .wrn-next__card-subtitle {
margin: 0;
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
font-size: 0.8125rem;
font-weight: 450;
letter-spacing: 0;
text-transform: none;
}
.wrn-next__card-eyebrow {
margin: 0;
color: var(--wrn-color-primary-text, var(--wrn-color-primary));
font-family: var(--wrn-font-mono, monospace);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.wrn-next__card-footer {
@@ -763,7 +803,7 @@ component Card {
.wrn-component p {
margin: 0;
color: var(--wrn-color-muted);
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
line-height: 1.6;
}
}
packages/ui/components/Carousel.wrn
+1 -1
View File
@@ -915,7 +915,7 @@ component Carousel {
.wrn-component p {
margin: 0;
color: var(--wrn-color-muted);
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
line-height: 1.6;
}
}
packages/ui/components/Chart.wrn
+273 -49
View File
@@ -26,16 +26,86 @@ component Chart {
functions {
shared function chartData() { return data.length ? data : items }
shared function linePoints() { return chartData().map(function (item, index) { return (barX(index) + barWidth() / 2) + "," + barY(item) }).join(" ") }
shared function chartKind() { var kind = type || variant; return kind === "line" || kind === "area" ? kind : "bar" }
shared function numericValue(item) { return Math.max(0, Number(item[valueKey]) || 0) }
shared function maximumValue() {
return Math.max(1, ...chartData().map(function (item) { return numericValue(item) }))
}
shared function isHidden(index) { return hiddenIndexes.includes(index) }
shared function barWidth() { return chartData().length ? Math.max(4, 400 / chartData().length) : 400 }
shared function barX(index) { return 50 + index * (500 / Math.max(1, chartData().length)) }
shared function barHeight(item) { return numericValue(item) / maximumValue() * 160 }
shared function barY(item) { return 200 - barHeight(item) }
// Visible points keep their original index so events report the source item.
shared function points() {
var source = chartData()
var visible = []
for (var index = 0; index < source.length; index++) {
if (!hiddenIndexes.includes(index)) { visible.push({ item: source[index], index: index }) }
}
return visible
}
// Plot geometry in viewBox units: 600 wide, height tall.
shared function plotLeft() { return 44 }
shared function plotRight() { return 588 }
shared function plotTop() { return 14 }
shared function plotBottom() { return Math.max(120, height) - 30 }
// Round the scale up to a readable value so the ticks land on clean numbers.
shared function niceMax() {
var max = 0
var visible = points()
for (var index = 0; index < visible.length; index++) { max = Math.max(max, numericValue(visible[index].item)) }
if (max <= 0) { return 1 }
var magnitude = Math.pow(10, Math.floor(Math.log10(max)))
var steps = [1, 2, 2.5, 5, 10]
var chosen = 10 * magnitude
for (var step = steps.length - 1; step >= 0; step--) {
if (steps[step] * magnitude >= max) { chosen = steps[step] * magnitude }
}
return chosen
}
shared function ticks() {
var top = niceMax()
return [0, top * 0.25, top * 0.5, top * 0.75, top]
}
shared function tickLabel(value) {
if (value >= 1000000) { return (value / 1000000).toFixed(value % 1000000 ? 1 : 0) + "M" }
if (value >= 1000) { return (value / 1000).toFixed(value % 1000 ? 1 : 0) + "k" }
return String(Math.round(value * 100) / 100)
}
shared function yFor(value) { return plotTop() + (1 - value / niceMax()) * (plotBottom() - plotTop()) }
shared function band() { return (plotRight() - plotLeft()) / Math.max(1, points().length) }
shared function barWidth() { return Math.min(band() * 0.62, 56) }
shared function centerX(position) { return plotLeft() + position * band() + band() / 2 }
// Bars: 4px rounded data end, square at the baseline.
shared function barPath(point, position) {
var width = barWidth()
var x = centerX(position) - width / 2
var y = yFor(numericValue(point.item))
var base = plotBottom()
var radius = Math.min(4, (base - y) / 2, width / 2)
if (base - y < 1) { return "M" + x + "," + (base - 1) + "h" + width + "v1h-" + width + "Z" }
return "M" + x + "," + base + "V" + (y + radius) + "Q" + x + "," + y + " " + (x + radius) + "," + y + "H" + (x + width - radius) + "Q" + (x + width) + "," + y + " " + (x + width) + "," + (y + radius) + "V" + base + "Z"
}
shared function linePath() {
var visible = points()
var path = ""
for (var position = 0; position < visible.length; position++) {
path = path + (position ? "L" : "M") + centerX(position) + "," + yFor(numericValue(visible[position].item))
}
return path
}
shared function areaPath() {
var visible = points()
if (!visible.length) { return "" }
return linePath() + "L" + centerX(visible.length - 1) + "," + plotBottom() + "L" + centerX(0) + "," + plotBottom() + "Z"
}
// Hit targets and tooltips are HTML laid over the SVG, positioned in %.
shared function hitStyle(position) {
return "left:" + ((plotLeft() + position * band()) / 600 * 100) + "%;width:" + (band() / 600 * 100) + "%;top:" + (plotTop() / Math.max(120, height) * 100) + "%;height:" + ((plotBottom() - plotTop()) / Math.max(120, height) * 100) + "%"
}
shared function tipStyle(point) {
return "top:" + ((yFor(numericValue(point.item)) - plotTop()) / (plotBottom() - plotTop()) * 100) + "%"
}
client function selectPoint(item, index, sourceEvent) {
output.dataPointClick({ item: item, index: index, sourceEvent: sourceEvent })
@@ -43,39 +113,63 @@ component Chart {
}
client function toggleLegend(item, index, sourceEvent, next) {
next = hiddenIndexes.slice()
if (next.includes(index)) {
next = next.filter(function (value) { return value !== index })
} else {
next.push(index)
next = []
for (var position = 0; position < hiddenIndexes.length; position++) {
if (hiddenIndexes[position] !== index) { next.push(hiddenIndexes[position]) }
}
if (next.length === hiddenIndexes.length) { next.push(index) }
hiddenIndexes = next
output.legendToggle({ item: item, index: index, hidden: next.includes(index), sourceEvent: sourceEvent })
}
}
view {
<figure {...attrs} data-ui-component="Chart" data-variant='{variant}' class='wrn-chart {class}'>
<figure {...attrs} data-ui-component="Chart" data-variant='{chartKind()}' data-size='{size}' data-color='{color}' class='wrn-chart {class}'>
{#if title || description}
<figcaption class="wrn-chart__header">
{#if title}<strong>{title}</strong>{/if}
{#if description}<span>{description}</span>{/if}
</figcaption>
{/if}
{#if (type || variant) === "line"}
<svg class="wrn-chart__line" viewBox="0 0 600 240" role="img" aria-label="{title}" style="height:{height}px"><polyline points="{linePoints()}" fill="none" stroke="var(--wrn-color-primary)" stroke-width="3" /></svg>
<div class="wrn-chart__point-labels">{#each chartData() as item, index}<button type="button" @click="selectPoint(item, index, event)">{item[labelKey]} · {numericValue(item)}</button>{/each}</div>
{:else}
<div class="wrn-chart__columns" style="height:{height}px" role="group" aria-label="{title}">
{#each chartData() as item, index}<button type="button" class="wrn-chart__column" data-hidden="{hiddenIndexes.includes(index)}" aria-label="{item[labelKey] + ': ' + numericValue(item)}" @click="selectPoint(item, index, event)">
{#if showValues}<span>{numericValue(item)}</span>{/if}
<svg viewBox="0 0 60 160" preserveAspectRatio="none" aria-hidden="true" style="height:{numericValue(item) / maximumValue() * Math.max(60, height - 60)}px"><rect x="0" y="0" width="60" height="160" rx="3" fill="var(--wrn-color-primary)" /></svg>
<small>{item[labelKey]}</small>
</button>{/each}
<div class="wrn-chart__stage" style="aspect-ratio: 600 / {Math.max(120, height)}">
<svg class="wrn-chart__plot" viewBox="0 0 600 {Math.max(120, height)}" preserveAspectRatio="none" role="img" aria-label="{title}">
{#each ticks() as tick}
<line class="wrn-chart__grid" x1="{plotLeft()}" x2="{plotRight()}" y1="{yFor(tick)}" y2="{yFor(tick)}" data-baseline="{tick === 0}"></line>
{/each}
{#if chartKind() === "bar"}
{#each points() as point, position}
<path class="wrn-chart__bar" d="{barPath(point, position)}"></path>
{/each}
{:else}
{#if chartKind() === "area"}<path class="wrn-chart__area" d="{areaPath()}"></path>{/if}
<path class="wrn-chart__line" d="{linePath()}"></path>
{/if}
</svg>
<div class="wrn-chart__ticks" aria-hidden="true">
{#each ticks() as tick}<span style="top:{yFor(tick) / Math.max(120, height) * 100}%">{tickLabel(tick)}</span>{/each}
</div>
{/if}
{#if showLegend}
<div class="wrn-chart__legend" aria-label="Chart legend">
<div class="wrn-chart__labels" aria-hidden="true">
{#each points() as point, position}<span style="left:{centerX(position) / 600 * 100}%">{point.item[labelKey]}</span>{/each}
</div>
<div class="wrn-chart__hits">
{#each points() as point, position}
<button type="button" class="wrn-chart__hit" style="{hitStyle(position)}" aria-label="{point.item[labelKey] + ': ' + numericValue(point.item)}" @click="selectPoint(point.item, point.index, event)">
{#if chartKind() !== "bar"}<i class="wrn-chart__dot" style="{tipStyle(point)}" aria-hidden="true"></i>{/if}
{#if showValues && chartKind() === "bar"}<b class="wrn-chart__value" style="{tipStyle(point)}" aria-hidden="true">{tickLabel(numericValue(point.item))}</b>{/if}
<span class="wrn-chart__tip" style="{tipStyle(point)}" aria-hidden="true"><small>{point.item[labelKey]}</small><strong>{numericValue(point.item)}</strong></span>
</button>
{/each}
</div>
{#if !points().length}<p class="wrn-chart__empty">No data to show</p>{/if}
</div>
{#if showLegend && chartData().length}
<div class="wrn-chart__legend" role="group" aria-label="Show or hide data">
{#each chartData() as item, index}
<button type="button" aria-pressed='{isHidden(index) ? "false" : "true"}' @click='toggleLegend(item, index, event)'>
<span aria-hidden="true"></span>{item[labelKey]}
@@ -88,29 +182,159 @@ component Chart {
}
style {
.wrn-chart__columns { display:flex; align-items:flex-end; gap:clamp(.5rem,2vw,1.5rem); padding:.5rem; border-bottom:1px solid var(--wrn-color-border); }
.wrn-chart__column { display:flex; flex:1; min-width:0; flex-direction:column; align-items:center; gap:.6rem; padding:0; border:0; background:transparent; color:var(--wrn-color-text); font:inherit; font-size:.8rem; cursor:pointer; }
.wrn-chart__column svg { width:100%; max-width:5rem; min-height:1px; }
.wrn-chart__column small { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--wrn-color-muted); }
.wrn-chart__column[data-hidden="true"] { opacity:.2; }
.wrn-chart__line { width:100%; display:block; }
.wrn-chart__point-labels { display:flex; justify-content:space-around; gap:.5rem; flex-wrap:wrap; }
.wrn-chart__point-labels button { border:0; background:transparent; color:var(--wrn-color-muted); font:inherit; font-size:.8rem; cursor:pointer; }
.wrn-chart {
--wrn-chart-color: var(--wrn-color-primary);
display: grid;
gap: 0.875rem;
min-width: 0;
margin: 0;
padding: 1rem 1.125rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius);
color: var(--wrn-color-text);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-1);
}
.wrn-chart[data-color="secondary"] { --wrn-chart-color: var(--wrn-color-secondary); }
.wrn-chart[data-color="success"] { --wrn-chart-color: var(--wrn-color-success); }
.wrn-chart[data-color="info"] { --wrn-chart-color: var(--wrn-color-info); }
.wrn-chart[data-color="warning"] { --wrn-chart-color: var(--wrn-color-warning); }
.wrn-chart[data-color="danger"] { --wrn-chart-color: var(--wrn-color-danger); }
.wrn-chart { display: grid; gap: 1rem; min-width: 0; margin: 0; padding: 1rem; border: 1px solid var(--wrn-color-border); border-radius: var(--wrn-radius); color: var(--wrn-color-text); background: var(--wrn-color-surface); box-shadow: var(--wrn-shadow-1); }
.wrn-chart__header { display: grid; gap: 0.2rem; }
.wrn-chart__header > span { color: var(--wrn-color-muted); font-size: 0.8rem; }
.wrn-chart__plot { display: block; width: 100%; min-height: 12rem; overflow: visible; }
.wrn-chart__axis { stroke: var(--wrn-color-border); stroke-width: 0.5; }
.wrn-chart__bar { fill: var(--wrn-color-primary); cursor: pointer; transition: opacity var(--wrn-motion-fast), transform var(--wrn-motion-fast); transform-box: fill-box; transform-origin: bottom; }
.wrn-chart__bar:hover { opacity: 0.82; transform: scaleY(1.02); }
.wrn-chart__bar:focus-visible { outline: 1.5px solid var(--wrn-color-focus); outline-offset: 1px; }
.wrn-chart__plot g[data-hidden="true"] { opacity: 0.18; pointer-events: none; }
.wrn-chart__value, .wrn-chart__label { fill: var(--wrn-color-text); font-size: 11px; text-anchor: middle; }
.wrn-chart__label { fill: var(--wrn-color-muted); }
.wrn-chart__legend { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wrn-chart__legend button { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.5rem; border: 1px solid var(--wrn-color-border); border-radius: 999px; color: var(--wrn-color-text); background: transparent; font: inherit; font-size: 0.75rem; cursor: pointer; }
.wrn-chart__legend button > span { width: 0.65rem; height: 0.65rem; border-radius: 0.2rem; background: var(--wrn-color-primary); }
.wrn-chart__legend button[aria-pressed="false"] { opacity: 0.5; }
.wrn-chart__header > strong { font-size: 0.9375rem; font-weight: 620; letter-spacing: -0.01em; }
.wrn-chart__header > span { color: var(--wrn-color-text-muted, var(--wrn-color-muted)); font-size: 0.8125rem; }
/* The stage reserves the SVG box; ticks, labels and hit targets sit over
it in percentages so text never scales with the plot. */
.wrn-chart__stage { position: relative; width: 100%; min-width: 0; }
.wrn-chart__plot { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.wrn-chart__grid { stroke: var(--wrn-color-border); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 2 4; }
.wrn-chart__grid[data-baseline="true"] { stroke: var(--wrn-color-border-strong, var(--wrn-color-border)); stroke-dasharray: none; }
.wrn-chart__bar { fill: var(--wrn-chart-color); transition: opacity var(--wrn-motion-fast); }
.wrn-chart__line { fill: none; stroke: var(--wrn-chart-color); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.wrn-chart__area { fill: color-mix(in srgb, var(--wrn-chart-color) 14%, transparent); stroke: none; }
.wrn-chart__ticks > span,
.wrn-chart__labels > span {
position: absolute;
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-family: var(--wrn-font-mono, monospace);
font-size: 0.65rem;
font-variant-numeric: tabular-nums;
line-height: 1;
white-space: nowrap;
pointer-events: none;
}
.wrn-chart__ticks > span { left: 0; width: calc(44 / 600 * 100% - 0.4rem); text-align: right; transform: translateY(-50%); }
.wrn-chart__labels > span {
bottom: 0;
max-width: 5.5rem;
overflow: hidden;
font-family: var(--wrn-font-sans, inherit);
font-size: 0.72rem;
text-overflow: ellipsis;
transform: translate(-50%, -0.35rem);
}
.wrn-chart__hits { position: absolute; inset: 0; }
.wrn-chart__hit {
position: absolute;
padding: 0;
border: 0;
border-radius: calc(var(--wrn-radius-sm) - 2px);
background: transparent;
cursor: pointer;
}
.wrn-chart__hit:hover,
.wrn-chart__hit:focus-visible { background: color-mix(in srgb, var(--wrn-color-text) 4%, transparent); outline: none; }
.wrn-chart__hit:focus-visible { box-shadow: inset 0 0 0 1.5px var(--wrn-color-focus, var(--wrn-chart-color)); }
.wrn-chart__dot {
position: absolute;
left: 50%;
width: 0.5rem;
height: 0.5rem;
border-radius: 999px;
background: var(--wrn-chart-color);
box-shadow: 0 0 0 2px var(--wrn-color-surface);
transform: translate(-50%, -50%);
transition: transform var(--wrn-motion-fast);
}
.wrn-chart__hit:is(:hover, :focus-visible) .wrn-chart__dot { transform: translate(-50%, -50%) scale(1.4); }
.wrn-chart__value {
position: absolute;
left: 50%;
color: var(--wrn-color-text-muted, var(--wrn-color-text));
font-family: var(--wrn-font-mono, monospace);
font-size: 0.68rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
transform: translate(-50%, calc(-100% - 0.3rem));
pointer-events: none;
}
.wrn-chart__tip {
position: absolute;
z-index: 3;
left: 50%;
display: grid;
gap: 0.1rem;
width: max-content;
padding: 0.375rem 0.55rem;
border: 1px solid rgb(255 255 255 / 0.08);
border-radius: var(--wrn-radius-sm, 0.5rem);
color: #f4f5f7;
background: #16181d;
box-shadow: 0 8px 24px -4px rgb(0 0 0 / 0.35);
text-align: left;
opacity: 0;
transform: translate(-50%, calc(-100% - 0.75rem));
transition: opacity var(--wrn-motion-fast);
pointer-events: none;
}
.wrn-chart__tip small { color: rgb(244 245 247 / 0.7); font-size: 0.68rem; }
.wrn-chart__tip strong { font-family: var(--wrn-font-mono, monospace); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.wrn-chart__hit:is(:hover, :focus-visible) .wrn-chart__tip { opacity: 1; }
.wrn-chart__hit:is(:hover, :focus-visible) .wrn-chart__value { opacity: 0; }
.wrn-chart__empty {
position: absolute;
inset: 0;
display: grid;
place-items: center;
margin: 0;
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
font-size: 0.8125rem;
}
.wrn-chart__legend { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.wrn-chart__legend button {
display: inline-flex;
align-items: center;
gap: 0.375rem;
min-height: 1.75rem;
padding: 0 0.6rem;
border: 1px solid var(--wrn-color-border);
border-radius: 999px;
color: var(--wrn-color-text);
background: var(--wrn-color-surface);
font: inherit;
font-size: 0.75rem;
font-weight: 550;
cursor: pointer;
transition: opacity 120ms ease, background-color 120ms ease;
}
.wrn-chart__legend button:hover { background: var(--wrn-color-surface-soft); }
.wrn-chart__legend button > span { width: 0.5rem; height: 0.5rem; border-radius: 2px; background: var(--wrn-chart-color); }
.wrn-chart__legend button[aria-pressed="false"] { color: var(--wrn-color-text-subtle, var(--wrn-color-muted)); text-decoration: line-through; }
.wrn-chart__legend button[aria-pressed="false"] > span { background: var(--wrn-color-border-strong, var(--wrn-color-border)); }
@media (prefers-reduced-motion: reduce) {
.wrn-chart__dot, .wrn-chart__tip, .wrn-chart__bar { transition: none; }
}
}
}
packages/ui/components/ChatBubble.wrn
+101 -26
View File
@@ -25,6 +25,25 @@ component ChatBubble {
return item.direction === "outgoing" ? "outgoing" : "incoming"
}
// Delivery receipt from item.receipt, or from a status label that names one.
shared function receipt(item, value) {
value = String(item.receipt || item.status || "").toLowerCase()
if (value === "seen") { return "read" }
if (value === "sending" || value === "sent" || value === "delivered" || value === "read" || value === "failed" || value === "error") { return value }
return ""
}
shared function receiptLabel(item, value) {
value = receipt(item)
if (value === "sending") { return "Sending" }
if (value === "sent") { return "Sent" }
if (value === "delivered") { return "Delivered" }
if (value === "read") { return "Read" }
if (value === "failed") { return "Not delivered" }
if (value === "error") { return "Error" }
return ""
}
client function selectMessage(item, index) {
output.messageClick({
item: item,
@@ -66,6 +85,7 @@ component ChatBubble {
{...attrs}
class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--chat-bubble wrn-next--variant-{variant} {class}"
data-one-sided="{oneSided}"
data-avatars="{showAvatars}"
role="log"
aria-label="{ariaLabel}"
aria-live="polite"
@@ -128,11 +148,24 @@ component ChatBubble {
</div>
</div>
{#if showMetadata && (item.timestamp || item.status || item.actionLabel)}
<footer class="wrn-next__chat-meta" data-tone="{item.statusTone || 'muted'}">
{#if showMetadata && (item.timestamp || item.status || item.receipt || item.actionLabel)}
<footer class="wrn-next__chat-meta" data-tone="{item.statusTone || (receipt(item) === 'failed' || receipt(item) === 'error' ? 'danger' : 'muted')}" data-receipt="{receipt(item)}">
{#if item.statusIcon}<span class="{item.statusIcon}" aria-hidden="true"></span>{/if}
{#if item.status}<span>{item.status}</span>{/if}
{#if item.status && (!receipt(item) || receipt(item) === "failed" || receipt(item) === "error")}<span class="wrn-next__chat-status">{item.status}</span>{/if}
{#if item.timestamp}<time datetime="{item.datetime || ''}">{item.timestamp}</time>{/if}
{#if receipt(item)}
<span class="wrn-next__chat-receipt" data-receipt="{receipt(item)}" role="img" aria-label="{receiptLabel(item)}" title="{receiptLabel(item)}">
{#if receipt(item) === "sending"}
<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><circle cx="8" cy="8" r="6"></circle><path d="M8 4.75V8l2 1.5"></path></svg>
{:else if receipt(item) === "sent"}
<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3.5 8.5l3 3 6-7"></path></svg>
{:else if receipt(item) === "delivered" || receipt(item) === "read"}
<svg viewBox="0 0 20 16" width="17" height="14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1.5 8.5l3 3 6-7"></path><path d="M8.5 11.5l.5.5 6-7.5"></path></svg>
{:else}
<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true"><circle cx="8" cy="8" r="6"></circle><path d="M8 4.75v3.75"></path><path d="M8 11h.01"></path></svg>
{/if}
</span>
{/if}
{#if item.actionLabel}
<button type="button" @click="selectAction(event, item, index)">
{item.actionLabel}
@@ -183,7 +216,7 @@ component ChatBubble {
.wrn-next__chat-thread {
display: grid;
min-width: 0;
gap: 1.25rem;
gap: 0.875rem;
}
.wrn-next__chat-message {
@@ -191,7 +224,7 @@ component ChatBubble {
width: min(78%, 34rem);
min-width: 0;
justify-self: start;
gap: 0.4rem;
gap: 0.3rem;
}
.wrn-next__chat-message[data-direction="outgoing"] {
@@ -205,8 +238,8 @@ component ChatBubble {
.wrn-next__chat-row {
display: flex;
min-width: 0;
align-items: flex-start;
gap: 0.75rem;
align-items: flex-end;
gap: 0.5rem;
}
.wrn-next__chat-message[data-direction="outgoing"] .wrn-next__chat-row {
@@ -221,11 +254,14 @@ component ChatBubble {
.wrn-next__chat-content {
min-width: 0;
padding: var(--wrn-chat-padding);
padding: 0.625rem 0.875rem;
border: 1px solid var(--wrn-color-border);
border-radius: 1rem;
border-radius: 1.125rem 1.125rem 1.125rem 0.25rem;
background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
box-shadow: var(--wrn-shadow-1);
color: var(--wrn-color-text);
font-size: 0.875rem;
line-height: 1.5;
cursor: pointer;
}
@@ -235,8 +271,10 @@ component ChatBubble {
}
.wrn-next__chat-message[data-direction="outgoing"] .wrn-next__chat-content {
border-color: var(--wrn-chat-color);
background: var(--wrn-chat-color);
border-color: color-mix(in srgb, var(--wrn-chat-color) 82%, black);
border-radius: 1.125rem 1.125rem 0.25rem 1.125rem;
background: linear-gradient(180deg, color-mix(in srgb, var(--wrn-chat-color) 94%, white), var(--wrn-chat-color));
box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--wrn-chat-color) 25%, transparent);
color: var(--wrn-color-primary-contrast, #fff);
}
@@ -268,8 +306,8 @@ component ChatBubble {
}
.wrn-next__chat-content a {
color: var(--wrn-chat-color);
font-weight: 650;
color: var(--wrn-color-primary-text, var(--wrn-chat-color));
font-weight: 600;
text-decoration: none;
}
@@ -280,17 +318,21 @@ component ChatBubble {
.wrn-next__chat-avatar {
display: grid;
flex: 0 0 2.5rem;
width: 2.5rem;
min-height: 2.5rem;
flex: 0 0 2rem;
width: 2rem;
min-height: 2rem;
height: 2rem;
overflow: hidden;
padding: 0;
place-items: center;
border: 1px solid var(--wrn-color-border);
border-radius: 999px;
background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
color: var(--wrn-color-text);
background: color-mix(in srgb, var(--wrn-chat-color) 12%, var(--wrn-color-surface));
color: var(--wrn-color-primary-text, var(--wrn-chat-color));
font: inherit;
font-size: 0.72rem;
font-weight: 650;
cursor: pointer;
place-items: center;
}
.wrn-next__chat-avatar img {
@@ -308,9 +350,11 @@ component ChatBubble {
display: flex;
align-items: center;
gap: 0.3rem;
padding-inline: calc(2.5rem + 0.75rem);
color: var(--wrn-color-text-muted);
font-size: 0.78em;
padding-inline: 0.25rem;
color: var(--wrn-color-text-subtle, var(--wrn-color-text-muted));
font-size: 0.6875rem;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.wrn-next__chat-message[data-direction="outgoing"] .wrn-next__chat-meta {
@@ -318,18 +362,19 @@ component ChatBubble {
}
.wrn-next__chat-meta[data-tone="danger"] {
color: var(--wrn-color-danger);
color: var(--wrn-color-danger-text, var(--wrn-color-danger));
}
.wrn-next__chat-meta button {
padding: 0;
border: 0;
background: transparent;
color: inherit;
color: var(--wrn-color-danger-text, var(--wrn-color-danger));
font: inherit;
font-weight: 700;
font-weight: 650;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 0.2em;
}
@media (max-width: 640px) {
@@ -411,8 +456,38 @@ component ChatBubble {
.wrn-component p {
margin: 0;
color: var(--wrn-color-muted);
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
line-height: 1.6;
}
.wrn-next--chat-bubble[data-avatars="true"] .wrn-next__chat-meta {
padding-inline: calc(2rem + 0.5rem + 0.25rem);
}
.wrn-next__chat-receipt {
display: inline-flex;
align-items: center;
color: var(--wrn-color-text-subtle, var(--wrn-color-text-muted));
}
.wrn-next__chat-receipt[data-receipt="read"] {
color: var(--wrn-color-info, var(--wrn-color-primary));
}
.wrn-next__chat-receipt:is([data-receipt="failed"], [data-receipt="error"]) {
color: var(--wrn-color-danger);
}
.wrn-next__chat-receipt[data-receipt="sending"] svg {
animation: wrn-chat-sending 1.6s linear infinite;
}
@keyframes wrn-chat-sending {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.wrn-next__chat-receipt[data-receipt="sending"] svg { animation: none; }
}
}
}
packages/ui/components/Clipboard.wrn
+86 -12
View File
@@ -82,17 +82,91 @@ component Clipboard {
}
style {
.wrn-clipboard { display: grid; gap: 0.5rem; color: var(--wrn-color-text); }
.wrn-clipboard__title { font-size: 0.875rem; }
.wrn-clipboard__description { margin: 0; color: var(--wrn-color-muted); font-size: 0.8rem; }
.wrn-clipboard__control { display: flex; min-width: 0; align-items: stretch; overflow: hidden; border: 1px solid var(--wrn-color-border); border-radius: var(--wrn-radius); background: var(--wrn-color-surface); box-shadow: var(--wrn-shadow-1); }
.wrn-clipboard__value { min-width: 0; flex: 1; overflow: auto; padding: 0.7rem 0.85rem; color: var(--wrn-color-text); background: var(--wrn-color-surface-2); font: inherit; font-family: var(--wrn-font-mono, ui-monospace, monospace); white-space: nowrap; }
.wrn-clipboard__button { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 0.85rem; border: 0; border-left: 1px solid var(--wrn-color-border); color: color-mix(in srgb, var(--wrn-color-primary) 72%, var(--wrn-color-text)); background: transparent; font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.wrn-clipboard__button:hover { background: var(--wrn-color-primary-soft); }
.wrn-clipboard__button:focus-visible { outline: 2px solid var(--wrn-color-focus); outline-offset: -3px; }
.wrn-clipboard__button:disabled { cursor: not-allowed; opacity: 0.55; }
.wrn-clipboard[data-status="success"] .wrn-clipboard__button { color: var(--wrn-color-success); }
.wrn-clipboard[data-status="error"] .wrn-clipboard__button { color: var(--wrn-color-danger); }
.wrn-clipboard__icon { width: 1rem; height: 1rem; flex: none; }
.wrn-clipboard { display: grid; gap: 0.375rem; color: var(--wrn-color-text); }
.wrn-clipboard__title { font-size: 0.8125rem; font-weight: 600; }
.wrn-clipboard__description { margin: 0; color: var(--wrn-color-text-muted, var(--wrn-color-muted)); font-size: 0.78rem; }
/* Plain values sit in a recessed field well; code values (the default)
sit on the code surface so they read as something to paste. */
.wrn-clipboard__control {
display: flex;
min-width: 0;
min-height: 2.75rem;
align-items: center;
gap: 0.5rem;
padding: 0.3125rem 0.3125rem 0.3125rem 0.875rem;
border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-input-background, var(--wrn-color-surface));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
}
.wrn-clipboard:has(code.wrn-clipboard__value) .wrn-clipboard__control {
border-color: var(--wrn-color-code-border, #262a33);
background: var(--wrn-color-code-background, #14161b);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04);
}
.wrn-clipboard__value {
min-width: 0;
flex: 1;
overflow-x: auto;
padding: 0.25rem 0;
color: var(--wrn-color-text);
background: transparent;
font: inherit;
font-size: 0.8125rem;
white-space: nowrap;
scrollbar-width: none;
}
code.wrn-clipboard__value {
color: var(--wrn-color-code-text, #e6e9f0);
font-family: var(--wrn-font-mono, ui-monospace, monospace);
font-size: 0.8rem;
}
.wrn-clipboard__value::-webkit-scrollbar { display: none; }
.wrn-clipboard__button {
display: inline-flex;
flex: none;
align-items: center;
gap: 0.375rem;
min-height: 2rem;
padding: 0 0.7rem;
border: 1px solid var(--wrn-color-border);
border-bottom-color: var(--wrn-color-border-strong, var(--wrn-color-border));
border-radius: calc(var(--wrn-radius-sm) - 2px);
color: var(--wrn-color-text);
background: linear-gradient(180deg, var(--wrn-color-surface), var(--wrn-color-surface-soft, var(--wrn-color-surface)));
box-shadow: var(--wrn-shadow-1);
font: inherit;
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}
.wrn-clipboard:has(code.wrn-clipboard__value) .wrn-clipboard__button {
border-color: rgb(255 255 255 / 0.12);
color: var(--wrn-color-code-text, #e6e9f0);
background: rgb(255 255 255 / 0.06);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
}
.wrn-clipboard__button:hover:not(:disabled) { background: var(--wrn-color-surface); }
.wrn-clipboard:has(code.wrn-clipboard__value) .wrn-clipboard__button:hover:not(:disabled) { background: rgb(255 255 255 / 0.12); }
.wrn-clipboard__button:active:not(:disabled) { transform: translateY(1px); }
.wrn-clipboard__button:focus-visible { outline: 2px solid var(--wrn-color-focus); outline-offset: 2px; }
.wrn-clipboard__button:disabled { cursor: not-allowed; opacity: 0.5; }
.wrn-clipboard[data-status="success"] .wrn-clipboard__button,
.wrn-clipboard[data-status="success"]:has(code.wrn-clipboard__value) .wrn-clipboard__button {
border-color: color-mix(in srgb, var(--wrn-color-success) 50%, transparent);
color: var(--wrn-color-success);
background: color-mix(in srgb, var(--wrn-color-success) 14%, transparent);
}
.wrn-clipboard[data-status="error"] .wrn-clipboard__button,
.wrn-clipboard[data-status="error"]:has(code.wrn-clipboard__value) .wrn-clipboard__button {
border-color: color-mix(in srgb, var(--wrn-color-danger) 50%, transparent);
color: var(--wrn-color-danger);
background: color-mix(in srgb, var(--wrn-color-danger) 12%, transparent);
}
.wrn-clipboard__icon { width: 0.875rem; height: 0.875rem; flex: none; }
}
}
packages/ui/components/Collapse.wrn
+77 -31
View File
@@ -69,7 +69,7 @@ size: string = "default"
disabled="{item.disabled}"
@click="toggleItem(index, item)"
>
<span>{isOpen(index) ? (item.closeLabel || "Read less") : item.label}</span>
<span>{isOpen(index) && (mode === "inline" || item.closeLabel) ? (item.closeLabel || "Read less") : item.label}</span>
<span class="icon-[lucide--chevron-down] wrn-next__collapse-chevron" aria-hidden="true"></span>
</button>
@@ -109,36 +109,48 @@ size: string = "default"
display: grid;
width: 100%;
min-width: 0;
gap: 0.75rem;
gap: 0.625rem;
color: var(--wrn-color-text);
}
.wrn-next__collapse-item {
display: grid;
min-width: 0;
justify-items: start;
justify-items: stretch;
gap: 0;
overflow: hidden;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-1);
transition: border-color 160ms ease, box-shadow 160ms ease;
}
.wrn-next__collapse-trigger {
display: inline-flex;
min-height: 2.75rem;
display: flex;
width: 100%;
min-height: 3rem;
align-items: center;
justify-content: center;
gap: 0.55rem;
padding: 0.7rem 1rem;
border: 1px solid var(--wrn-collapse-color);
border-radius: var(--wrn-radius-sm);
background: var(--wrn-collapse-color);
color: var(--wrn-color-primary-contrast, #fff);
justify-content: space-between;
gap: 0.75rem;
padding: 0.75rem 1rem;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: var(--wrn-color-text);
font: inherit;
font-weight: 700;
font-size: 0.9rem;
font-weight: 600;
letter-spacing: -0.008em;
text-align: left;
cursor: pointer;
transition: background-color 120ms ease;
}
.wrn-next__collapse-trigger:focus-visible {
outline: 2px solid var(--wrn-collapse-color);
outline-offset: 3px;
outline-offset: -2px;
}
.wrn-next__collapse-trigger:disabled {
@@ -147,7 +159,11 @@ size: string = "default"
}
.wrn-next__collapse-chevron {
transition: transform var(--wrn-motion-fast) var(--wrn-ease-standard);
flex: none;
width: 1rem;
height: 1rem;
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
transition: transform var(--wrn-motion-base) var(--wrn-ease-emphasized);
}
.wrn-next__collapse-item[data-open="true"] .wrn-next__collapse-chevron {
@@ -155,20 +171,17 @@ size: string = "default"
}
.wrn-next__collapse-panel {
width: min(100%, 42rem);
width: 100%;
max-height: 0;
overflow: hidden;
margin-top: 0;
opacity: 0;
transition:
max-height 350ms var(--wrn-ease-emphasized),
margin-top 300ms var(--wrn-ease-emphasized),
opacity 200ms var(--wrn-ease-standard);
transition: max-height 320ms var(--wrn-ease-emphasized), opacity 200ms var(--wrn-ease-standard);
}
.wrn-next__collapse-panel[data-open="true"] {
max-height: 40rem;
margin-top: 0.75rem;
margin-top: 0;
opacity: 1;
}
@@ -176,11 +189,16 @@ size: string = "default"
display: grid;
overflow: hidden;
min-height: 0;
gap: 0.65rem;
padding: 1rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-md);
background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
gap: 0.5rem;
padding: 0.875rem 1rem 1rem;
border: 0;
border-top: 1px solid var(--wrn-color-border);
border-radius: 0;
background: var(--wrn-color-surface-soft, transparent);
box-shadow: none;
color: var(--wrn-color-text-muted);
font-size: 0.875rem;
line-height: 1.6;
}
.wrn-next__collapse-content h4,
@@ -196,13 +214,18 @@ size: string = "default"
}
.wrn-next__collapse-content a {
color: var(--wrn-collapse-color);
font-weight: 650;
color: var(--wrn-color-primary-text, var(--wrn-collapse-color));
font-weight: 600;
text-decoration: none;
}
.wrn-next--collapse[data-mode="inline"] .wrn-next__collapse-item {
gap: 0;
overflow: visible;
justify-items: start;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.wrn-next--collapse[data-mode="inline"] .wrn-next__collapse-preview {
@@ -221,13 +244,15 @@ size: string = "default"
.wrn-next--collapse[data-mode="inline"] .wrn-next__collapse-trigger {
order: 3;
width: fit-content;
margin-top: 0.5rem;
min-height: auto;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: var(--wrn-collapse-color);
color: var(--wrn-color-primary-text, var(--wrn-collapse-color));
font-size: 0.875rem;
}
.wrn-next--collapse[data-mode="inline"] .wrn-next__collapse-content {
@@ -308,8 +333,29 @@ size: string = "default"
.wrn-component p {
margin: 0;
color: var(--wrn-color-muted);
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
line-height: 1.6;
}
.wrn-next__collapse-trigger:hover:not(:disabled) {
background: var(--wrn-color-surface-soft);
}
.wrn-next__collapse-item[data-open="true"] {
border-color: var(--wrn-color-border-strong, var(--wrn-color-border));
box-shadow: var(--wrn-shadow-2);
}
.wrn-next--collapse[data-mode="inline"] .wrn-next__collapse-trigger:hover:not(:disabled) {
background: transparent;
text-decoration: underline;
text-underline-offset: 0.2em;
}
.wrn-next__collapse-content h4 {
color: var(--wrn-color-text);
font-size: 0.875rem;
font-weight: 620;
}
}
}
packages/ui/components/ColorPicker.wrn
+143 -52
View File
@@ -27,22 +27,74 @@ component ColorPicker {
required: boolean = false
class: string = ""
}
state currentValue = value
functions {
client function emitField(nameEvent, sourceEvent) { sourceEvent.stopPropagation(); output[nameEvent]({ value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }) }
client function emitField(nameEvent, sourceEvent) { sourceEvent.stopPropagation(); if (nameEvent === "input" || nameEvent === "change") { currentValue = sourceEvent.currentTarget.value } output[nameEvent]({ value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }) }
client function preventReadonly(sourceEvent) { if (readonly) sourceEvent.preventDefault() }
}
view {
<div {...attrs} class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--field wrn-component--color-picker {class}" data-variant="{variant}" data-inline="{inline}" data-invalid="{error ? 'true' : 'false'}">
<div class="wrn-next__field-heading"><label class="{hiddenLabel ? 'wrn-next__sr-only' : ''}" for="{id || name}">{label}</label>{#if cornerHint}<span class="wrn-next__field-hint">{cornerHint}</span>{/if}</div>
<div class="wrn-next__color-control" data-icon-position="{iconPosition}">{#if icon}<span class="{icon}" aria-hidden="true"></span>{/if}<input id="{id || name}" type="color" name="{name}" value="{value}" disabled="{disabled}" required="{required}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" @click="preventReadonly(event)" @input="emitField('input', event)" @change="emitField('change', event)" @focus="emitField('focus', event)" @blur="emitField('blur', event)" /><output>{value}</output></div>
<div class="wrn-next__color-control" data-icon-position="{iconPosition}">{#if icon}<span class="{icon}" aria-hidden="true"></span>{/if}<input id="{id || name}" type="color" name="{name}" value="{currentValue}" disabled="{disabled}" required="{required}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" @click="preventReadonly(event)" @input="emitField('input', event)" @change="emitField('change', event)" @focus="emitField('focus', event)" @blur="emitField('blur', event)" /><output for="{id || name}">{currentValue}</output></div>
{#if helperText}<small class="wrn-next__field-help">{helperText}</small>{/if}<small class="wrn-next__field-error" data-error="{name}">{error}</small>
</div>
}
style {
/* A field well holding a swatch and the hex readout. */
.wrn-component--color-picker .wrn-next__color-control {
width: min(100%, 16rem);
min-height: var(--wrn-control-height, 2.5rem);
gap: 0.625rem;
padding: 0.25rem 0.75rem 0.25rem 0.25rem;
border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-input-background, var(--wrn-color-surface));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.wrn-component--color-picker .wrn-next__color-control:hover {
border-color: var(--wrn-color-input-border-hover, var(--wrn-color-border-strong));
}
.wrn-component--color-picker .wrn-next__color-control:focus-within {
border-color: var(--wrn-field-color);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-field-color) 18%, transparent);
}
.wrn-next__color-control input[type="color"] {
width: 3rem;
padding: 0.2rem;
flex: none;
width: 2rem;
height: 2rem;
min-height: 0;
padding: 0;
border: 0;
border-radius: calc(var(--wrn-radius-sm) - 2px);
background: transparent;
box-shadow: none;
cursor: pointer;
}
.wrn-next__color-control input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.wrn-next__color-control input[type="color"]::-webkit-color-swatch {
border: 0;
border-radius: calc(var(--wrn-radius-sm) - 2px);
box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
}
.wrn-next__color-control input[type="color"]::-moz-color-swatch {
border: 0;
border-radius: calc(var(--wrn-radius-sm) - 2px);
}
.wrn-next__color-control output {
flex: 1;
color: var(--wrn-color-text);
font-family: var(--wrn-font-mono, monospace);
font-size: 0.8125rem;
font-weight: 550;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.wrn-component--color-picker .wrn-next__color-control:has(input:disabled) {
opacity: 0.55;
cursor: not-allowed;
background: var(--wrn-color-surface-soft);
}
/* Shared component foundation. */
@@ -110,7 +162,7 @@ component ColorPicker {
.wrn-component p {
margin: 0;
color: var(--wrn-color-muted);
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
line-height: 1.6;
}
@@ -125,8 +177,9 @@ component ColorPicker {
display: block;
min-height: 1em;
margin-top: 0.25rem;
color: var(--wrn-color-danger);
font-size: 0.8rem;
color: var(--wrn-color-danger-text, var(--wrn-color-danger));
font-size: 0.78rem;
font-weight: 550;
}
.wrn-next--choice {
@@ -153,13 +206,14 @@ component ColorPicker {
width: 100%;
min-height: var(--wrn-control-height, 2.5rem);
padding: 0.5rem 0.75rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm, 6px);
border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm, 8px);
outline: 0;
color: var(--wrn-color-text);
background: var(--wrn-color-bg);
background: var(--wrn-color-input-background, var(--wrn-color-surface));
font: inherit;
font-weight: 500;
transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
}
.wrn-auth-form form > .wrn-next--field,
.wrn-auth-form form > .wrn-field {
@@ -173,8 +227,8 @@ component ColorPicker {
box-shadow: none;
}
.wrn-next--field :where(input, textarea, select):focus-visible {
border-color: var(--wrn-color-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
border-color: var(--wrn-field-color, var(--wrn-color-primary));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04), 0 0 0 3px color-mix(in srgb, var(--wrn-field-color, var(--wrn-color-primary)) 18%, transparent);
}
.wrn-next--field textarea {
resize: vertical;
@@ -208,12 +262,14 @@ component ColorPicker {
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.35;
letter-spacing: -0.005em;
}
.wrn-next__field-hint,
.wrn-next__field-help {
color: var(--wrn-color-muted);
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-size: 0.75rem;
font-weight: 500;
font-weight: 450;
line-height: 1.45;
}
.wrn-next__field-control {
position: relative;
@@ -221,10 +277,11 @@ component ColorPicker {
}
.wrn-next__field-control > :is(input, textarea, select) {
padding-inline: 0.85rem;
border-color: var(--wrn-color-border);
border-color: var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
font-size: 0.8125rem;
background: var(--wrn-color-input-background, var(--wrn-color-surface));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
font-size: 0.875rem;
}
.wrn-next__field-control[data-has-icon="true"][data-icon-position="start"] > :is(input, textarea, select) {
padding-inline-start: 2.5rem;
@@ -265,7 +322,8 @@ component ColorPicker {
}
.wrn-next--field[data-variant="ghost"] .wrn-next__field-control > :is(input, textarea, select) {
border-color: transparent;
background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
box-shadow: none;
}
.wrn-next__field-floating-label {
position: absolute;
@@ -306,9 +364,9 @@ component ColorPicker {
}
.wrn-next__field-error {
min-height: 1em;
color: var(--wrn-color-danger);
font-size: 0.82em;
font-weight: 600;
color: var(--wrn-color-danger-text, var(--wrn-color-danger));
font-size: 0.78rem;
font-weight: 550;
}
.wrn-next__field-error:empty {
display: none;
@@ -316,14 +374,16 @@ component ColorPicker {
.wrn-next--field[data-invalid="true"] :is(input, textarea, select),
.wrn-next--choice-field[data-invalid="true"] input {
border-color: var(--wrn-color-danger);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-danger) 12%, transparent);
}
.wrn-next--field :is(input, textarea, select):disabled,
.wrn-next--choice-field input:disabled {
cursor: not-allowed;
opacity: 0.58;
opacity: 0.55;
background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
}
.wrn-next--field :is(input, textarea, select):read-only {
background: var(--wrn-color-surface-2);
background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
}
.wrn-next--field[data-inline="true"],
.wrn-next--choice-field[data-inline="true"] {
@@ -380,11 +440,13 @@ component ColorPicker {
display: flex;
min-width: 0;
align-items: center;
gap: 0.65rem;
gap: 0.625rem;
color: var(--wrn-color-text);
width: 100%;
font-size: 0.75rem;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.4;
cursor: pointer;
}
.wrn-next__checkbox-content > .wrn-next__choice {
width: 100%;
@@ -399,12 +461,13 @@ component ColorPicker {
.wrn-next__choice-copy {
display: grid;
min-width: 0;
gap: 0.15rem;
line-height: 1.35;
gap: 0.125rem;
line-height: 1.4;
}
.wrn-next__choice-copy small {
color: var(--wrn-color-muted);
font-weight: 500;
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-size: 0.78rem;
font-weight: 450;
}
.wrn-next__radio-group,
.wrn-next__checkbox-group {
@@ -424,15 +487,18 @@ component ColorPicker {
.wrn-next--radio-field[data-card="true"] .wrn-next--radio,
.wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox {
min-height: 4.5rem;
padding: 0.85rem;
padding: 0.9rem 1rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-1);
transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
}
.wrn-next--radio-field[data-card="true"] .wrn-next--radio:has(input:checked),
.wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox:has(input:checked) {
border-color: var(--wrn-field-color);
box-shadow: 0 0 0 1px var(--wrn-field-color);
background: color-mix(in srgb, var(--wrn-field-color) 5%, var(--wrn-color-surface));
box-shadow: 0 0 0 1px var(--wrn-field-color), var(--wrn-shadow-1);
}
.wrn-next--radio-field[data-list="true"] .wrn-next--radio,
.wrn-next--checkbox-field[data-list="true"] .wrn-next--checkbox {
@@ -453,19 +519,21 @@ component ColorPicker {
}
.wrn-next__choice[data-variant="outlined"],
.wrn-next__choice[data-variant="floating"] {
padding: 0.65rem 0.8rem;
padding: 0.7rem 0.85rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
}
.wrn-next__choice[data-variant="pill"] {
padding: 0.65rem 1rem;
padding: 0.6rem 1rem;
border: 1px solid color-mix(in srgb, var(--wrn-field-color) 22%, var(--wrn-color-border));
border-radius: 999px;
background: color-mix(in srgb, var(--wrn-field-color) 9%, var(--wrn-color-surface));
background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface));
}
.wrn-next__choice[data-variant="ghost"] {
padding: 0.65rem 0.8rem;
padding: 0.65rem 0.85rem;
border-radius: var(--wrn-radius-sm);
background: color-mix(in srgb, var(--wrn-field-color) 7%, transparent);
background: color-mix(in srgb, var(--wrn-field-color) 6%, transparent);
}
.wrn-next__choice[data-variant="underline"] {
padding-block: 0.5rem;
@@ -499,25 +567,35 @@ component ColorPicker {
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.7rem 0.85rem;
border: 1px solid var(--wrn-color-border);
padding: 0.55rem 0.85rem;
border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
background: var(--wrn-color-input-background, var(--wrn-color-surface));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
color: var(--wrn-color-text);
font: inherit;
font-size: 0.875rem;
font-variant-numeric: tabular-nums;
text-align: left;
cursor: pointer;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.wrn-next__calendar,
.wrn-next__time-panel {
z-index: 20;
position: absolute;
z-index: 40;
top: 100%;
left: 0;
display: grid;
width: min(100%, 22rem);
width: min(calc(100vw - 2rem), 19.5rem);
gap: 0.75rem;
padding: 0.85rem;
margin-top: 0.375rem;
padding: 0.75rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-md);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-3);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
animation: wrn-popover-enter var(--wrn-motion-base, 160ms) var(--wrn-ease-emphasized, ease) both;
}
.wrn-next--date-picker[data-expanded="false"] .wrn-next__calendar,
.wrn-next--time-picker[data-expanded="false"] .wrn-next__time-panel {
@@ -527,29 +605,42 @@ component ColorPicker {
.wrn-next__time-panel button {
min-height: 2.25rem;
border: 0;
border-radius: var(--wrn-radius-sm);
border-radius: calc(var(--wrn-radius-sm) - 2px);
background: transparent;
color: inherit;
font: inherit;
font-size: 0.8125rem;
font-variant-numeric: tabular-nums;
cursor: pointer;
transition: background-color 120ms ease, color 120ms ease;
}
.wrn-next__calendar-weekdays,
.wrn-next__calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0.2rem;
gap: 0.125rem;
text-align: center;
}
.wrn-next__calendar-weekdays {
color: var(--wrn-color-muted);
font-size: 0.75rem;
padding-bottom: 0.375rem;
border-bottom: 1px solid var(--wrn-color-border);
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-family: var(--wrn-font-mono, monospace);
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.wrn-next__calendar-grid button:hover,
.wrn-next__time-panel button:hover {
background: var(--wrn-color-surface-2);
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
}
.wrn-next__calendar-grid button[aria-pressed="true"],
.wrn-next__time-panel button[aria-pressed="true"] {
background: var(--wrn-field-color);
color: var(--wrn-color-primary-contrast, #fff);
box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--wrn-field-color) 35%, transparent);
font-weight: 650;
}
.wrn-next__time-period {
display: flex;
@@ -583,7 +674,7 @@ component ColorPicker {
.wrn-next--field[data-variant="ghost"]
:is(.wrn-next__input-group-control, .wrn-next__file-control, .wrn-next__color-control) {
border-color: transparent;
background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
}
@media (max-width: 640px) {
.wrn-next--field[data-inline="true"],
packages/ui/components/Combobox.wrn
+2 -2
View File
@@ -401,7 +401,7 @@ component ComboBox {
padding: 0;
place-items: center;
border: 0;
color: var(--wrn-color-muted);
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
background: transparent;
cursor: pointer;
transform: translateY(-50%);
@@ -478,7 +478,7 @@ component ComboBox {
.wrn-component p {
margin: 0;
color: var(--wrn-color-muted);
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
line-height: 1.6;
}
}
packages/ui/components/ContextMenu.wrn
+49 -41
View File
@@ -59,6 +59,10 @@ component ContextMenu {
positionY = Math.max(12, sourceEvent.clientY || 12)
}
visible = true
// A pointer-placed menu is fixed to the viewport, so scrolling would
// slide the page out from under it. Close it the way native context
// menus do. Capture catches scrolling inside nested containers too.
window.addEventListener("scroll", closeOnScroll, { capture: true, once: true, passive: true })
output.open({
x: positionX,
y: positionY,
@@ -67,6 +71,12 @@ component ContextMenu {
})
}
client function closeOnScroll(sourceEvent) {
if (visible && placement === "pointer") {
hideMenu("scroll", sourceEvent)
}
}
client function hideMenu(reason, sourceEvent) {
visible = false
output.close({
@@ -320,22 +330,17 @@ component ContextMenu {
.wrn-context-menu__panel {
position: absolute;
z-index: 1091;
top: calc(100% + 0.5rem);
top: calc(100% + 0.375rem);
left: 0;
width: max-content;
min-width: var(--wrn-context-min-width);
max-width: min(var(--wrn-context-max-width), calc(100vw - 1.5rem));
padding: 0.45rem;
padding: 0.3rem;
color: var(--wrn-color-text);
background:
linear-gradient(145deg, color-mix(in srgb, var(--context-accent) 5%, transparent), transparent 58%),
color-mix(in srgb, var(--wrn-color-surface-raised) 96%, transparent);
border: 1px solid color-mix(in srgb, var(--context-accent) 18%, var(--wrn-color-border));
border-radius: var(--wrn-radius-md);
box-shadow:
0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
0 24px 64px color-mix(in srgb, black 24%, transparent);
backdrop-filter: blur(18px);
background: var(--wrn-color-surface-raised);
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius);
box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
transform-origin: top left;
}
@@ -366,10 +371,8 @@ component ContextMenu {
}
.wrn-context-menu[data-variant="soft"] .wrn-context-menu__panel {
background:
linear-gradient(145deg, var(--context-soft), transparent 72%),
var(--wrn-color-surface-raised);
box-shadow: 0 18px 48px color-mix(in srgb, black 16%, transparent);
background: color-mix(in srgb, var(--context-accent) 4%, var(--wrn-color-surface-raised));
box-shadow: var(--wrn-shadow-3);
}
.wrn-context-menu[data-variant="outline"] .wrn-context-menu__panel {
@@ -379,14 +382,15 @@ component ContextMenu {
.wrn-context-menu__header {
display: grid;
gap: 0.2rem;
padding: 0.65rem 0.75rem 0.75rem;
gap: 0.15rem;
padding: 0.5rem 0.625rem 0.625rem;
margin: -0.3rem -0.3rem 0.25rem;
border-bottom: 1px solid var(--wrn-color-border);
}
.wrn-context-menu__header strong {
font-size: 0.86rem;
font-weight: 650;
font-size: 0.8125rem;
font-weight: 620;
}
.wrn-context-menu__header span {
@@ -402,17 +406,18 @@ component ContextMenu {
}
.wrn-context-menu__section-label {
padding: 0.55rem 0.75rem 0.3rem;
color: var(--wrn-color-text-muted);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
padding: 0.5rem 0.625rem 0.25rem;
color: var(--wrn-color-text-subtle, var(--wrn-color-text-muted));
font-family: var(--wrn-font-mono, monospace);
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.wrn-context-menu__divider {
height: 1px;
margin: 0.3rem 0.45rem;
margin: 0.25rem -0.3rem;
background: var(--wrn-color-border);
}
@@ -421,31 +426,33 @@ component ContextMenu {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 0.7rem;
gap: 0.625rem;
width: 100%;
min-width: 0;
padding: 0.65rem 0.7rem;
padding: 0.5rem 0.625rem;
color: var(--wrn-color-text);
background: transparent;
border: 0;
border-radius: 0.72rem;
border-radius: calc(var(--wrn-radius-sm) - 2px);
font: inherit;
font-size: 0.8125rem;
text-align: left;
text-decoration: none;
cursor: pointer;
transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
transition: background-color 120ms ease, color 120ms ease;
}
.wrn-context-menu__item:hover,
.wrn-context-menu__item:focus-visible,
.wrn-context-menu__item[data-selected="true"] {
color: var(--context-accent);
background: var(--context-soft);
color: var(--wrn-color-text);
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-soft));
outline: none;
}
.wrn-context-menu__item:active {
transform: scale(0.985);
transform: none;
background: color-mix(in srgb, var(--context-accent) 10%, var(--wrn-color-surface-muted, var(--wrn-color-surface-soft)));
}
.wrn-context-menu__item[data-danger="true"] {
@@ -478,9 +485,9 @@ component ContextMenu {
.wrn-context-menu__copy strong {
overflow: hidden;
font-size: 0.82rem;
font-weight: 600;
line-height: 1.3;
font-size: 0.8125rem;
font-weight: 550;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
@@ -488,20 +495,21 @@ component ContextMenu {
.wrn-context-menu__copy small {
overflow: hidden;
color: var(--wrn-color-text-muted);
font-size: 0.7rem;
font-size: 0.72rem;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
.wrn-context-menu kbd {
padding: 0.16rem 0.38rem;
color: var(--wrn-color-text-muted);
padding: 0.125rem 0.35rem;
color: var(--wrn-color-text-subtle, var(--wrn-color-text-muted));
background: var(--wrn-color-surface-soft);
border: 1px solid var(--wrn-color-border);
border-radius: 0.36rem;
font-size: 0.64rem;
font-family: inherit;
border-bottom-width: 2px;
border-radius: 0.3rem;
font-size: 0.65rem;
font-family: var(--wrn-font-mono, monospace);
}
.wrn-context-menu[data-size="sm"] .wrn-context-menu__item {
packages/ui/components/DataTable.wrn
+76 -55
View File
@@ -1052,9 +1052,9 @@ component DataTable {
gap: 0.75rem;
padding: 1rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-md);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface);
box-shadow: none;
box-shadow: var(--wrn-shadow-1);
}
.wrn-table {
@@ -1101,14 +1101,15 @@ component DataTable {
.wrn-table__caption {
margin: 0;
color: var(--wrn-color-text);
font-size: 0.98rem;
font-size: 1rem;
font-weight: 650;
letter-spacing: -0.015em;
}
.wrn-table__description {
margin: 0;
color: var(--wrn-color-text-muted);
font-size: 0.82rem;
font-size: 0.8125rem;
}
.wrn-table__actions {
@@ -1128,22 +1129,26 @@ component DataTable {
appearance: none;
display: inline-flex;
align-items: center;
gap: 0.35rem;
min-height: 2.1rem;
padding: 0 0.7rem;
gap: 0.375rem;
min-height: 2.125rem;
padding: 0 0.75rem;
color: var(--wrn-color-text);
background: var(--wrn-color-surface-soft);
background: linear-gradient(180deg, var(--wrn-color-surface), var(--wrn-color-surface-soft, var(--wrn-color-surface)));
border: 1px solid var(--wrn-color-border);
border-bottom-color: var(--wrn-color-border-strong, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
box-shadow: var(--wrn-shadow-1);
font: inherit;
font-size: 0.79rem;
font-size: 0.8125rem;
font-weight: 550;
cursor: pointer;
transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.wrn-table__action:hover {
color: var(--table-accent);
border-color: color-mix(in srgb, var(--table-accent) 45%, var(--wrn-color-border));
color: var(--wrn-color-text);
border-color: var(--wrn-color-border-strong, var(--wrn-color-border));
background: var(--wrn-color-surface);
}
.wrn-table__action[data-tone="danger"] {
@@ -1170,12 +1175,14 @@ component DataTable {
display: inline-flex;
align-items: center;
gap: 0.45rem;
min-height: 2.35rem;
min-height: 2.125rem;
padding: 0 0.7rem;
color: var(--wrn-color-text-muted);
background: var(--wrn-color-surface-soft);
border: 1px solid var(--wrn-color-border);
color: var(--wrn-color-text-subtle, var(--wrn-color-text-muted));
background: var(--wrn-color-input-background, var(--wrn-color-surface));
border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.wrn-table__search input {
@@ -1186,12 +1193,13 @@ component DataTable {
background: transparent;
border: 0;
font: inherit;
font-size: 0.83rem;
font-size: 0.8125rem;
outline: none;
}
.wrn-table__search:focus-within {
border-color: color-mix(in srgb, var(--table-accent) 45%, var(--wrn-color-border));
border-color: var(--table-accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--table-accent) 18%, transparent);
}
/*
@@ -1210,7 +1218,9 @@ component DataTable {
max-width: 100%;
overflow-x: auto;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-1);
}
.wrn-table[data-bordered="false"] .wrn-table__scroll {
@@ -1221,12 +1231,13 @@ component DataTable {
.wrn-table__table {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
font-size: 0.8125rem;
font-variant-numeric: tabular-nums;
}
.wrn-table__table th,
.wrn-table__table td {
padding: 0.7rem 0.85rem;
padding: 0.6875rem 0.875rem;
text-align: left;
vertical-align: middle;
white-space: nowrap;
@@ -1256,17 +1267,19 @@ component DataTable {
position: sticky;
top: 0;
z-index: 1;
color: var(--wrn-color-text-muted);
color: var(--wrn-color-text-subtle, var(--wrn-color-text-muted));
background: var(--wrn-color-surface-soft);
border-bottom: 1px solid var(--wrn-color-border);
font-size: 0.76rem;
font-weight: 650;
letter-spacing: 0.02em;
font-family: var(--wrn-font-mono, monospace);
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.wrn-table__table tbody tr {
border-bottom: 1px solid color-mix(in srgb, var(--wrn-color-border) 60%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--wrn-color-border) 70%, transparent);
transition: background-color 100ms ease;
}
.wrn-table__table tbody tr:last-child {
@@ -1285,20 +1298,21 @@ component DataTable {
* sits at the same specificity and is ordered deliberately.
*/
.wrn-table[data-striped="true"] .wrn-table__table tbody tr:nth-child(even) {
background: color-mix(in srgb, var(--wrn-color-surface-soft) 55%, transparent);
background: color-mix(in srgb, var(--wrn-color-surface-soft) 70%, transparent);
}
.wrn-table[data-striped] .wrn-table__table tbody tr:hover:not([data-selected="true"]) {
background: color-mix(in srgb, var(--table-accent) 7%, transparent);
background: var(--wrn-color-surface-soft);
}
/* Every selected row identical, striped or not. */
.wrn-table[data-striped] .wrn-table__table tbody tr[data-selected="true"] {
background: color-mix(in srgb, var(--table-accent) 15%, transparent);
background: color-mix(in srgb, var(--table-accent) 7%, var(--wrn-color-surface));
box-shadow: inset 2px 0 0 var(--table-accent);
}
.wrn-table[data-striped] .wrn-table__table tbody tr[data-selected="true"]:hover {
background: color-mix(in srgb, var(--table-accent) 22%, transparent);
background: color-mix(in srgb, var(--table-accent) 11%, var(--wrn-color-surface));
}
.wrn-table__sort {
@@ -1319,7 +1333,7 @@ component DataTable {
}
.wrn-table__sort:hover {
color: var(--table-accent);
color: var(--wrn-color-text);
}
.wrn-table__sort-icon {
@@ -1328,7 +1342,7 @@ component DataTable {
}
.wrn-table__sort[data-active="true"] {
color: var(--table-accent);
color: var(--wrn-color-text);
}
.wrn-table__sort[data-active="true"] .wrn-table__sort-icon {
@@ -1346,25 +1360,28 @@ component DataTable {
align-items: center;
justify-content: center;
padding: 0;
width: 1.05rem;
height: 1.05rem;
width: 1.125rem;
height: 1.125rem;
color: transparent;
background: var(--wrn-color-surface-raised);
border: 1px solid var(--wrn-color-border);
border-radius: 0.32rem;
background: var(--wrn-color-input-background, var(--wrn-color-surface));
border: 1.5px solid var(--wrn-color-border-strong, var(--wrn-color-border));
border-radius: 0.3125rem;
box-shadow: inset 0 1px 1px rgb(0 0 0 / 0.05);
cursor: pointer;
transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.wrn-table__check[aria-checked="true"] {
color: var(--wrn-color-primary-contrast);
background: var(--table-accent);
border-color: var(--table-accent);
border-color: color-mix(in srgb, var(--table-accent) 80%, black);
box-shadow: var(--wrn-highlight-edge, none);
}
.wrn-table__check:focus-visible {
outline: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--table-accent) 35%, transparent);
outline: 2px solid var(--table-accent);
outline-offset: 2px;
box-shadow: none;
}
.wrn-table__table--comparison {
@@ -1380,9 +1397,9 @@ component DataTable {
.wrn-table__table--comparison th[scope="row"] {
color: var(--wrn-color-text-muted);
background: var(--wrn-color-surface-soft);
font-size: 0.76rem;
font-weight: 650;
text-transform: uppercase;
font-size: 0.8125rem;
font-weight: 600;
text-transform: none;
white-space: nowrap;
}
@@ -1444,9 +1461,9 @@ component DataTable {
.wrn-table__empty {
margin: 0;
padding: 1.75rem 1rem;
padding: 2.5rem 1rem;
color: var(--wrn-color-text-muted);
font-size: 0.85rem;
font-size: 0.8125rem;
text-align: center;
}
@@ -1461,7 +1478,8 @@ component DataTable {
.wrn-table__range {
margin: 0;
color: var(--wrn-color-text-muted);
font-size: 0.8rem;
font-size: 0.8125rem;
font-variant-numeric: tabular-nums;
}
.wrn-table__pager {
@@ -1504,8 +1522,8 @@ component DataTable {
}
.wrn-table__page-button:hover:not(:disabled) {
color: var(--table-accent);
border-color: color-mix(in srgb, var(--table-accent) 40%, var(--wrn-color-border));
color: var(--wrn-color-text);
background: var(--wrn-color-surface);
}
.wrn-table__page-button:disabled {
@@ -1531,22 +1549,25 @@ component DataTable {
color: var(--wrn-color-text-muted);
background: transparent;
border: 1px solid transparent;
border-radius: 0.55rem;
border-radius: var(--wrn-radius-sm);
font: inherit;
font-size: 0.78rem;
font-size: 0.8125rem;
font-weight: 550;
font-variant-numeric: tabular-nums;
cursor: pointer;
}
.wrn-table__page-number:hover {
color: var(--wrn-color-text);
background: var(--wrn-color-surface-soft);
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-soft));
}
.wrn-table__page-number[data-active="true"] {
color: var(--wrn-color-primary-contrast);
background: var(--table-accent);
border-color: var(--table-accent);
background: linear-gradient(180deg, color-mix(in srgb, var(--table-accent) 92%, white), var(--table-accent));
border-color: color-mix(in srgb, var(--table-accent) 82%, black);
box-shadow: var(--wrn-highlight-edge, none);
font-weight: 650;
}
.wrn-table__page-indicator {
@@ -1707,7 +1728,7 @@ component DataTable {
.wrn-component p {
margin: 0;
color: var(--wrn-color-muted);
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
line-height: 1.6;
}
}
packages/ui/components/DatePicker.wrn
+169 -64
View File
@@ -153,40 +153,63 @@ size: string = "default"
.wrn-next__picker-clear {
position: absolute;
right: 2.5rem;
display: inline-grid;
place-items: center;
width: 1.375rem;
height: 1.375rem;
padding: 0;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--wrn-color-muted);
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-size: 1rem;
line-height: 1;
cursor: pointer;
}
.wrn-next__date-selectors {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 0.65rem;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: 0.5rem;
}
.wrn-next__date-selectors label {
display: grid;
gap: 0.3rem;
color: var(--wrn-color-muted);
font-size: 0.78rem;
gap: 0.25rem;
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-family: var(--wrn-font-mono, monospace);
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.wrn-next__date-selectors select {
appearance: none;
width: 100%;
min-height: 2.35rem;
padding: 0.45rem 0.65rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
min-height: 2.125rem;
padding: 0.375rem 1.75rem 0.375rem 0.625rem;
border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: calc(var(--wrn-radius-sm) - 2px);
background: var(--wrn-color-input-background, var(--wrn-color-surface)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") right 0.5rem center / 0.875rem no-repeat;
color: var(--wrn-color-text);
font: inherit;
font-family: var(--wrn-font-sans, inherit);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
cursor: pointer;
}
.wrn-next__date-done {
background: var(--wrn-field-color) !important;
min-height: 2.25rem;
border: 1px solid color-mix(in srgb, var(--wrn-field-color) 82%, black) !important;
border-bottom-color: color-mix(in srgb, var(--wrn-field-color) 64%, black) !important;
background: linear-gradient(180deg, color-mix(in srgb, var(--wrn-field-color) 92%, white), var(--wrn-field-color)) !important;
box-shadow: var(--wrn-highlight-edge, none);
color: var(--wrn-color-primary-contrast, #fff) !important;
font-weight: 650;
font-weight: 600;
}
.wrn-next__calendar > header {
@@ -202,12 +225,26 @@ size: string = "default"
}
.wrn-next__calendar-grid button[data-today="true"] {
box-shadow: inset 0 0 0 1px var(--wrn-field-color);
box-shadow: none;
color: var(--wrn-color-primary-text, var(--wrn-field-color));
font-weight: 700;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 0.3em;
}
.wrn-next__calendar-grid button:disabled { opacity: 0.35; cursor: not-allowed; }
.wrn-next__calendar-grid button:not(:disabled):focus-visible { outline: 2px solid var(--wrn-field-color); outline-offset: 1px; }
.wrn-next__calendar-weekdays { padding-block: 0.375rem; }
.wrn-next__calendar-weekdays {
padding-bottom: 0.375rem;
border-bottom: 1px solid var(--wrn-color-border);
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-family: var(--wrn-font-mono, monospace);
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* Shared component foundation. */
@@ -274,7 +311,7 @@ size: string = "default"
.wrn-component p {
margin: 0;
color: var(--wrn-color-muted);
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
line-height: 1.6;
}
@@ -289,8 +326,9 @@ size: string = "default"
display: block;
min-height: 1em;
margin-top: 0.25rem;
color: var(--wrn-color-danger);
font-size: 0.8rem;
color: var(--wrn-color-danger-text, var(--wrn-color-danger));
font-size: 0.78rem;
font-weight: 550;
}
.wrn-next--choice {
@@ -317,13 +355,14 @@ size: string = "default"
width: 100%;
min-height: var(--wrn-control-height, 2.5rem);
padding: 0.5rem 0.75rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm, 6px);
border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm, 8px);
outline: 0;
color: var(--wrn-color-text);
background: var(--wrn-color-bg);
background: var(--wrn-color-input-background, var(--wrn-color-surface));
font: inherit;
font-weight: 500;
transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
}
.wrn-auth-form form > .wrn-next--field,
.wrn-auth-form form > .wrn-field {
@@ -337,8 +376,8 @@ size: string = "default"
box-shadow: none;
}
.wrn-next--field :where(input, textarea, select):focus-visible {
border-color: var(--wrn-color-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
border-color: var(--wrn-field-color, var(--wrn-color-primary));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04), 0 0 0 3px color-mix(in srgb, var(--wrn-field-color, var(--wrn-color-primary)) 18%, transparent);
}
.wrn-next--field textarea {
resize: vertical;
@@ -372,12 +411,14 @@ size: string = "default"
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.35;
letter-spacing: -0.005em;
}
.wrn-next__field-hint,
.wrn-next__field-help {
color: var(--wrn-color-muted);
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-size: 0.75rem;
font-weight: 500;
font-weight: 450;
line-height: 1.45;
}
.wrn-next__field-control {
position: relative;
@@ -385,10 +426,11 @@ size: string = "default"
}
.wrn-next__field-control > :is(input, textarea, select) {
padding-inline: 0.85rem;
border-color: var(--wrn-color-border);
border-color: var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
font-size: 0.8125rem;
background: var(--wrn-color-input-background, var(--wrn-color-surface));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
font-size: 0.875rem;
}
.wrn-next__field-control[data-has-icon="true"][data-icon-position="start"] > :is(input, textarea, select) {
padding-inline-start: 2.5rem;
@@ -429,7 +471,8 @@ size: string = "default"
}
.wrn-next--field[data-variant="ghost"] .wrn-next__field-control > :is(input, textarea, select) {
border-color: transparent;
background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
box-shadow: none;
}
.wrn-next__field-floating-label {
position: absolute;
@@ -470,9 +513,9 @@ size: string = "default"
}
.wrn-next__field-error {
min-height: 1em;
color: var(--wrn-color-danger);
font-size: 0.82em;
font-weight: 600;
color: var(--wrn-color-danger-text, var(--wrn-color-danger));
font-size: 0.78rem;
font-weight: 550;
}
.wrn-next__field-error:empty {
display: none;
@@ -480,14 +523,16 @@ size: string = "default"
.wrn-next--field[data-invalid="true"] :is(input, textarea, select),
.wrn-next--choice-field[data-invalid="true"] input {
border-color: var(--wrn-color-danger);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-danger) 12%, transparent);
}
.wrn-next--field :is(input, textarea, select):disabled,
.wrn-next--choice-field input:disabled {
cursor: not-allowed;
opacity: 0.58;
opacity: 0.55;
background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
}
.wrn-next--field :is(input, textarea, select):read-only {
background: var(--wrn-color-surface-2);
background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
}
.wrn-next--field[data-inline="true"],
.wrn-next--choice-field[data-inline="true"] {
@@ -544,11 +589,13 @@ size: string = "default"
display: flex;
min-width: 0;
align-items: center;
gap: 0.65rem;
gap: 0.625rem;
color: var(--wrn-color-text);
width: 100%;
font-size: 0.75rem;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.4;
cursor: pointer;
}
.wrn-next__checkbox-content > .wrn-next__choice {
width: 100%;
@@ -563,12 +610,13 @@ size: string = "default"
.wrn-next__choice-copy {
display: grid;
min-width: 0;
gap: 0.15rem;
line-height: 1.35;
gap: 0.125rem;
line-height: 1.4;
}
.wrn-next__choice-copy small {
color: var(--wrn-color-muted);
font-weight: 500;
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-size: 0.78rem;
font-weight: 450;
}
.wrn-next__radio-group,
.wrn-next__checkbox-group {
@@ -588,15 +636,18 @@ size: string = "default"
.wrn-next--radio-field[data-card="true"] .wrn-next--radio,
.wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox {
min-height: 4.5rem;
padding: 0.85rem;
padding: 0.9rem 1rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-1);
transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
}
.wrn-next--radio-field[data-card="true"] .wrn-next--radio:has(input:checked),
.wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox:has(input:checked) {
border-color: var(--wrn-field-color);
box-shadow: 0 0 0 1px var(--wrn-field-color);
background: color-mix(in srgb, var(--wrn-field-color) 5%, var(--wrn-color-surface));
box-shadow: 0 0 0 1px var(--wrn-field-color), var(--wrn-shadow-1);
}
.wrn-next--radio-field[data-list="true"] .wrn-next--radio,
.wrn-next--checkbox-field[data-list="true"] .wrn-next--checkbox {
@@ -617,19 +668,21 @@ size: string = "default"
}
.wrn-next__choice[data-variant="outlined"],
.wrn-next__choice[data-variant="floating"] {
padding: 0.65rem 0.8rem;
padding: 0.7rem 0.85rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
}
.wrn-next__choice[data-variant="pill"] {
padding: 0.65rem 1rem;
padding: 0.6rem 1rem;
border: 1px solid color-mix(in srgb, var(--wrn-field-color) 22%, var(--wrn-color-border));
border-radius: 999px;
background: color-mix(in srgb, var(--wrn-field-color) 9%, var(--wrn-color-surface));
background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface));
}
.wrn-next__choice[data-variant="ghost"] {
padding: 0.65rem 0.8rem;
padding: 0.65rem 0.85rem;
border-radius: var(--wrn-radius-sm);
background: color-mix(in srgb, var(--wrn-field-color) 7%, transparent);
background: color-mix(in srgb, var(--wrn-field-color) 6%, transparent);
}
.wrn-next__choice[data-variant="underline"] {
padding-block: 0.5rem;
@@ -663,29 +716,36 @@ size: string = "default"
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.7rem 0.85rem;
border: 1px solid var(--wrn-color-border);
padding: 0.55rem 0.85rem;
border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
background: var(--wrn-color-input-background, var(--wrn-color-surface));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
color: var(--wrn-color-text);
font: inherit;
font-size: 0.875rem;
font-variant-numeric: tabular-nums;
text-align: left;
cursor: pointer;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.wrn-next--date-picker, .wrn-next--time-picker { position: relative; }
.wrn-next__calendar,
.wrn-next__time-panel {
position: absolute;
inset-block-start: calc(100% + .4rem);
inset-inline-start: 0;
z-index: 40;
top: 100%;
left: 0;
display: grid;
width: min(100%, 22rem);
width: min(calc(100vw - 2rem), 19.5rem);
gap: 0.75rem;
padding: 0.85rem;
margin-top: 0.375rem;
padding: 0.75rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-md);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-2);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
animation: wrn-popover-enter var(--wrn-motion-base, 160ms) var(--wrn-ease-emphasized, ease) both;
}
.wrn-next--date-picker[data-expanded="false"] .wrn-next__calendar,
.wrn-next--time-picker[data-expanded="false"] .wrn-next__time-panel {
@@ -695,29 +755,42 @@ size: string = "default"
.wrn-next__time-panel button {
min-height: 2.25rem;
border: 0;
border-radius: var(--wrn-radius-sm);
border-radius: calc(var(--wrn-radius-sm) - 2px);
background: transparent;
color: inherit;
font: inherit;
font-size: 0.8125rem;
font-variant-numeric: tabular-nums;
cursor: pointer;
transition: background-color 120ms ease, color 120ms ease;
}
.wrn-next__calendar-weekdays,
.wrn-next__calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0.2rem;
gap: 0.125rem;
text-align: center;
}
.wrn-next__calendar-weekdays {
color: var(--wrn-color-muted);
font-size: 0.75rem;
padding-bottom: 0.375rem;
border-bottom: 1px solid var(--wrn-color-border);
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-family: var(--wrn-font-mono, monospace);
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.wrn-next__calendar-grid button:hover,
.wrn-next__time-panel button:hover {
background: var(--wrn-color-surface-2);
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
}
.wrn-next__calendar-grid button[aria-pressed="true"],
.wrn-next__time-panel button[aria-pressed="true"] {
background: var(--wrn-field-color);
color: var(--wrn-color-primary-contrast, #fff);
box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--wrn-field-color) 35%, transparent);
font-weight: 650;
}
.wrn-next__time-period {
display: flex;
@@ -751,7 +824,7 @@ size: string = "default"
.wrn-next--field[data-variant="ghost"]
:is(.wrn-next__input-group-control, .wrn-next__file-control, .wrn-next__color-control) {
border-color: transparent;
background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
}
@media (max-width: 640px) {
.wrn-next--field[data-inline="true"],
@@ -773,5 +846,37 @@ size: string = "default"
.wrn-next--strong-password input.wrn-invalid {
border-color: var(--wrn-color-danger);
}
.wrn-next__picker-clear:hover {
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
color: var(--wrn-color-text);
}
.wrn-next__picker-control > button:first-of-type > i {
width: 1rem;
height: 1rem;
flex: none;
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
}
.wrn-next--date-picker[data-expanded="true"] .wrn-next__picker-control > button:first-of-type {
border-color: var(--wrn-field-color);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-field-color) 18%, transparent);
}
.wrn-next__calendar-grid button[data-today="true"][aria-pressed="true"] {
color: var(--wrn-color-primary-contrast, #fff);
}
.wrn-next__date-done:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.wrn-next__calendar .wrn-next--time-picker {
width: 100%;
padding-top: 0.625rem;
border-top: 1px solid var(--wrn-color-border);
}
}
}
packages/ui/components/DeviceFrame.wrn
+1 -1
View File
@@ -169,7 +169,7 @@ component DeviceFrame {
.wrn-component p {
margin: 0;
color: var(--wrn-color-muted);
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
line-height: 1.6;
}
}
packages/ui/components/Drawer.wrn
+27 -31
View File
@@ -210,14 +210,16 @@ open: boolean = false
.wrn-drawer__trigger {
appearance: none;
min-height: var(--wrn-control-height, 2.5rem);
padding: 0.65rem 1rem;
padding: 0 0.95rem;
color: var(--wrn-color-primary-contrast);
background: var(--drawer-accent);
border: 0;
background: linear-gradient(180deg, color-mix(in srgb, var(--drawer-accent) 92%, white), var(--drawer-accent));
border: 1px solid color-mix(in srgb, var(--drawer-accent) 82%, black);
border-bottom-color: color-mix(in srgb, var(--drawer-accent) 64%, black);
border-radius: var(--wrn-radius-sm);
box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--drawer-accent) 30%, transparent);
font: inherit;
font-size: 0.85rem;
font-weight: 650;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
}
@@ -255,9 +257,9 @@ open: boolean = false
z-index: 0;
appearance: none;
padding: 0;
background: color-mix(in srgb, black 56%, transparent);
background: rgb(10 11 14 / 0.5);
border: 0;
backdrop-filter: blur(7px);
backdrop-filter: blur(4px);
pointer-events: auto;
}
@@ -274,18 +276,11 @@ open: boolean = false
max-height: 100%;
margin-left: auto;
color: var(--wrn-color-text);
background:
radial-gradient(
circle at 100% 0%,
color-mix(in srgb, var(--drawer-accent) 8%, transparent),
transparent 34%
),
var(--wrn-color-surface-raised);
border-left: 1px solid color-mix(in srgb, var(--drawer-accent) 18%, var(--wrn-color-border));
box-shadow: -28px 0 80px color-mix(in srgb, black 28%, transparent);
background: var(--wrn-color-surface-raised);
border-left: 1px solid var(--wrn-color-border);
box-shadow: var(--wrn-shadow-3);
pointer-events: auto;
overflow: hidden;
/* Slides in from whichever edge the placement puts it on. */
transform: translateX(100%);
transition: transform var(--drawer-duration, 260ms) cubic-bezier(0.32, 0.72, 0, 1);
}
@@ -338,9 +333,9 @@ open: boolean = false
.wrn-drawer[data-placement="left"] .wrn-drawer__panel {
margin-right: auto;
margin-left: 0;
border-right: 1px solid color-mix(in srgb, var(--drawer-accent) 18%, var(--wrn-color-border));
border-right: 1px solid var(--wrn-color-border);
border-left: 0;
box-shadow: 28px 0 80px color-mix(in srgb, black 28%, transparent);
box-shadow: var(--wrn-shadow-3);
}
.wrn-drawer[data-placement="top"] .wrn-drawer__layer,
@@ -354,11 +349,11 @@ open: boolean = false
max-height: min(80vh, 44rem);
margin: 0;
border: 0;
box-shadow: 0 24px 80px color-mix(in srgb, black 28%, transparent);
box-shadow: var(--wrn-shadow-3);
}
.wrn-drawer[data-placement="top"] .wrn-drawer__panel {
border-bottom: 1px solid color-mix(in srgb, var(--drawer-accent) 18%, var(--wrn-color-border));
border-bottom: 1px solid var(--wrn-color-border);
}
.wrn-drawer[data-placement="bottom"] .wrn-drawer__layer {
@@ -366,13 +361,12 @@ open: boolean = false
}
.wrn-drawer[data-placement="bottom"] .wrn-drawer__panel {
border-top: 1px solid color-mix(in srgb, var(--drawer-accent) 18%, var(--wrn-color-border));
border-radius: 1.3rem 1.3rem 0 0;
border-top: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-lg) var(--wrn-radius-lg) 0 0;
}
.wrn-drawer[data-variant="soft"] .wrn-drawer__panel {
background:
linear-gradient(145deg, var(--drawer-soft), transparent 65%),
var(--wrn-color-surface-raised);
}
@@ -400,7 +394,7 @@ open: boolean = false
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.35rem 1.35rem 1.1rem;
padding: 1.25rem 1.25rem 1rem;
border-bottom: 1px solid var(--wrn-color-border);
}
@@ -435,14 +429,15 @@ open: boolean = false
}
.wrn-drawer__heading-copy h2 {
font-size: 1.05rem;
font-size: 1.0625rem;
font-weight: 650;
line-height: 1.3;
letter-spacing: -0.015em;
line-height: 1.35;
}
.wrn-drawer__heading-copy p {
color: var(--wrn-color-text-muted);
font-size: 0.8rem;
font-size: 0.8125rem;
line-height: 1.55;
}
@@ -474,8 +469,8 @@ open: boolean = false
.wrn-drawer__close:hover,
.wrn-drawer__close:focus-visible {
color: var(--drawer-accent);
border-color: color-mix(in srgb, var(--drawer-accent) 34%, var(--wrn-color-border));
color: var(--wrn-color-text);
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-soft));
outline: none;
}
@@ -511,8 +506,9 @@ open: boolean = false
}
.wrn-drawer__footer {
padding: 1rem 1.35rem 1.35rem;
padding: 0.875rem 1.25rem;
border-top: 1px solid var(--wrn-color-border);
background: var(--wrn-color-surface-soft, transparent);
}
.wrn-drawer__footer:empty {
packages/ui/components/Dropdown.wrn
+49 -49
View File
@@ -320,26 +320,28 @@ items: unknown[] = []
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
gap: 0.5rem;
min-height: var(--wrn-control-height, 2.5rem);
padding: 0.65rem 0.9rem;
padding: 0 0.875rem;
color: var(--wrn-color-text);
background: var(--wrn-color-surface-raised);
background: linear-gradient(180deg, var(--wrn-color-surface), var(--wrn-color-surface-soft, var(--wrn-color-surface)));
border: 1px solid var(--wrn-color-border);
border-bottom-color: var(--wrn-color-border-strong, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
box-shadow: var(--wrn-shadow-1);
font: inherit;
font-size: 0.84rem;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease, transform 150ms ease;
}
.wrn-dropdown__trigger:hover,
.wrn-dropdown__trigger:focus-visible,
.wrn-dropdown[data-open="true"] .wrn-dropdown__trigger {
color: var(--dropdown-accent);
background: var(--dropdown-soft);
border-color: color-mix(in srgb, var(--dropdown-accent) 38%, var(--wrn-color-border));
color: var(--wrn-color-text);
background: var(--wrn-color-surface);
border-color: var(--wrn-color-border-strong, var(--wrn-color-border));
outline: none;
}
@@ -387,22 +389,17 @@ items: unknown[] = []
.wrn-dropdown__panel {
position: absolute;
z-index: 1101;
top: calc(100% + 0.55rem);
top: calc(100% + 0.375rem);
left: 0;
width: max-content;
min-width: 12rem;
max-width: min(22rem, calc(100vw - 1.5rem));
padding: 0.45rem;
padding: 0.3rem;
color: var(--wrn-color-text);
background:
linear-gradient(145deg, color-mix(in srgb, var(--dropdown-accent) 5%, transparent), transparent 60%),
color-mix(in srgb, var(--wrn-color-surface-raised) 97%, transparent);
border: 1px solid color-mix(in srgb, var(--dropdown-accent) 18%, var(--wrn-color-border));
border-radius: var(--wrn-radius-md);
box-shadow:
0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
0 24px 64px color-mix(in srgb, black 22%, transparent);
backdrop-filter: blur(18px);
background: var(--wrn-color-surface-raised);
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius);
box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
}
.wrn-dropdown[data-width="trigger"] .wrn-dropdown__panel {
@@ -440,10 +437,8 @@ items: unknown[] = []
}
.wrn-dropdown[data-variant="soft"] .wrn-dropdown__panel {
background:
linear-gradient(145deg, var(--dropdown-soft), transparent 70%),
var(--wrn-color-surface-raised);
box-shadow: 0 18px 48px color-mix(in srgb, black 16%, transparent);
background: color-mix(in srgb, var(--dropdown-accent) 4%, var(--wrn-color-surface-raised));
box-shadow: var(--wrn-shadow-3);
}
.wrn-dropdown[data-variant="outline"] .wrn-dropdown__panel {
@@ -457,17 +452,18 @@ items: unknown[] = []
}
.wrn-dropdown__section-label {
padding: 0.55rem 0.72rem 0.3rem;
color: var(--wrn-color-text-muted);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
padding: 0.5rem 0.625rem 0.25rem;
color: var(--wrn-color-text-subtle, var(--wrn-color-text-muted));
font-family: var(--wrn-font-mono, monospace);
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.wrn-dropdown__divider {
height: 1px;
margin: 0.3rem 0.4rem;
margin: 0.25rem -0.3rem;
background: var(--wrn-color-border);
}
@@ -476,31 +472,33 @@ items: unknown[] = []
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 0.7rem;
gap: 0.625rem;
width: 100%;
min-width: 0;
padding: 0.68rem 0.72rem;
padding: 0.5rem 0.625rem;
color: var(--wrn-color-text);
background: transparent;
border: 0;
border-radius: 0.72rem;
border-radius: calc(var(--wrn-radius-sm) - 2px);
font: inherit;
font-size: 0.8125rem;
text-align: start;
text-decoration: none;
cursor: pointer;
transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
transition: background-color 120ms ease, color 120ms ease;
}
.wrn-dropdown__item:hover,
.wrn-dropdown__item:focus-visible,
.wrn-dropdown__item[data-selected="true"] {
color: var(--dropdown-accent);
background: var(--dropdown-soft);
color: var(--wrn-color-text);
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-soft));
outline: none;
}
.wrn-dropdown__item:active {
transform: scale(0.985);
transform: none;
background: color-mix(in srgb, var(--dropdown-accent) 10%, var(--wrn-color-surface-muted, var(--wrn-color-surface-soft)));
}
.wrn-dropdown__item[data-danger="true"] {
@@ -532,9 +530,9 @@ items: unknown[] = []
.wrn-dropdown__copy strong {
overflow: hidden;
font-size: 0.82rem;
font-weight: 600;
line-height: 1.3;
font-size: 0.8125rem;
font-weight: 550;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
@@ -542,29 +540,31 @@ items: unknown[] = []
.wrn-dropdown__copy small {
overflow: hidden;
color: var(--wrn-color-text-muted);
font-size: 0.7rem;
font-size: 0.72rem;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
.wrn-dropdown__badge {
padding: 0.18rem 0.45rem;
color: var(--dropdown-accent);
padding: 0.125rem 0.4rem;
color: var(--wrn-color-primary-text, var(--dropdown-accent));
background: var(--dropdown-soft);
border-radius: 999px;
font-size: 0.64rem;
font-weight: 700;
font-size: 0.65rem;
font-weight: 650;
font-variant-numeric: tabular-nums;
}
.wrn-dropdown kbd {
padding: 0.16rem 0.38rem;
color: var(--wrn-color-text-muted);
padding: 0.125rem 0.35rem;
color: var(--wrn-color-text-subtle, var(--wrn-color-text-muted));
background: var(--wrn-color-surface-soft);
border: 1px solid var(--wrn-color-border);
border-radius: 0.36rem;
font-size: 0.64rem;
font-family: inherit;
border-bottom-width: 2px;
border-radius: 0.3rem;
font-size: 0.65rem;
font-family: var(--wrn-font-mono, monospace);
}
.wrn-dropdown__empty {
packages/ui/components/FeatureCard.wrn
+6 -16
View File
@@ -160,9 +160,7 @@ component FeatureCard {
var(--wrn-color-surface-raised);
border: 1px solid var(--feature-border);
border-radius: 1.25rem;
box-shadow:
0 1px 0 color-mix(in srgb, white 4%, transparent) inset,
0 10px 30px color-mix(in srgb, black 9%, transparent);
box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-2);
transition:
transform 180ms ease,
border-color 180ms ease,
@@ -585,14 +583,11 @@ component FeatureCard {
}
.wrn-feature-card[data-variant="raised"] {
box-shadow:
0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
0 20px 50px color-mix(in srgb, black 17%, transparent);
box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
}
.wrn-feature-card[data-variant="soft"] {
background:
linear-gradient(135deg, var(--feature-accent-soft), transparent 68%),
var(--wrn-color-surface-raised);
border-color: color-mix(in srgb, var(--feature-accent) 22%, var(--wrn-color-border));
box-shadow: none;
@@ -619,10 +614,9 @@ component FeatureCard {
.wrn-feature-card[data-variant="solid"] {
color: var(--feature-contrast);
background:
linear-gradient(135deg, color-mix(in srgb, white 9%, transparent), transparent 60%),
var(--feature-accent);
border-color: color-mix(in srgb, white 20%, transparent);
box-shadow: 0 22px 54px color-mix(in srgb, var(--feature-accent) 28%, transparent);
box-shadow: var(--wrn-shadow-3);
}
.wrn-feature-card[data-variant="solid"] .wrn-feature-card__title,
@@ -653,15 +647,11 @@ component FeatureCard {
.wrn-feature-card[data-hover="lift"]:not([data-disabled="true"]):hover {
transform: translateY(-0.3rem);
border-color: color-mix(in srgb, var(--feature-accent) 48%, var(--wrn-color-border));
box-shadow:
0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
0 24px 58px color-mix(in srgb, black 20%, transparent);
box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
}
.wrn-feature-card[data-hover="shadow"]:not([data-disabled="true"]):hover {
box-shadow:
0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
0 24px 58px color-mix(in srgb, black 20%, transparent);
box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
}
.wrn-feature-card[data-hover="border"]:not([data-disabled="true"]):hover {
@@ -670,7 +660,7 @@ component FeatureCard {
.wrn-feature-card[data-hover="glow"]:not([data-disabled="true"]):hover {
border-color: color-mix(in srgb, var(--feature-accent) 54%, var(--wrn-color-border));
box-shadow: 0 20px 60px color-mix(in srgb, var(--feature-accent) 22%, transparent);
box-shadow: var(--wrn-shadow-3);
}
.wrn-feature-card:not([data-disabled="true"]):hover .wrn-feature-card__image {
packages/ui/components/FeatureGrid.wrn
+1 -1
View File
@@ -296,7 +296,7 @@ component FeatureGrid {
.wrn-component p {
margin: 0;
color: var(--wrn-color-muted);
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
line-height: 1.6;
}
}
packages/ui/components/FileInput.wrn
+127 -53
View File
@@ -59,12 +59,18 @@ size: string = "default"
.wrn-next__file-control:focus-within { outline:2px solid var(--wrn-color-focus); outline-offset:2px; }
.wrn-next__file-control {
position: relative;
display:flex; align-items:center; gap:.6rem; min-width:0;
min-height: 2.5rem;
padding: 0.65rem 0.85rem;
border: 1px dashed var(--wrn-color-border);
display: flex;
align-items: center;
gap: .6rem;
min-width: 0;
min-height: 2.75rem;
padding: 0.6rem 0.875rem;
border: 1.5px dashed var(--wrn-color-border-strong, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
background: var(--wrn-color-surface-soft, var(--wrn-color-surface));
color: var(--wrn-color-text-muted);
font-size: 0.875rem;
transition: border-color 120ms ease, background-color 120ms ease;
}
.wrn-next__file-control input {
@@ -139,7 +145,7 @@ size: string = "default"
.wrn-component p {
margin: 0;
color: var(--wrn-color-muted);
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
line-height: 1.6;
}
@@ -154,8 +160,9 @@ size: string = "default"
display: block;
min-height: 1em;
margin-top: 0.25rem;
color: var(--wrn-color-danger);
font-size: 0.8rem;
color: var(--wrn-color-danger-text, var(--wrn-color-danger));
font-size: 0.78rem;
font-weight: 550;
}
.wrn-next--choice {
@@ -182,13 +189,14 @@ size: string = "default"
width: 100%;
min-height: var(--wrn-control-height, 2.5rem);
padding: 0.5rem 0.75rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm, 6px);
border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm, 8px);
outline: 0;
color: var(--wrn-color-text);
background: var(--wrn-color-bg);
background: var(--wrn-color-input-background, var(--wrn-color-surface));
font: inherit;
font-weight: 500;
transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
}
.wrn-auth-form form > .wrn-next--field,
.wrn-auth-form form > .wrn-field {
@@ -202,8 +210,8 @@ size: string = "default"
box-shadow: none;
}
.wrn-next--field :where(input, textarea, select):focus-visible {
border-color: var(--wrn-color-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
border-color: var(--wrn-field-color, var(--wrn-color-primary));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04), 0 0 0 3px color-mix(in srgb, var(--wrn-field-color, var(--wrn-color-primary)) 18%, transparent);
}
.wrn-next--field textarea {
resize: vertical;
@@ -237,12 +245,14 @@ size: string = "default"
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.35;
letter-spacing: -0.005em;
}
.wrn-next__field-hint,
.wrn-next__field-help {
color: var(--wrn-color-muted);
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-size: 0.75rem;
font-weight: 500;
font-weight: 450;
line-height: 1.45;
}
.wrn-next__field-control {
position: relative;
@@ -250,10 +260,11 @@ size: string = "default"
}
.wrn-next__field-control > :is(input, textarea, select) {
padding-inline: 0.85rem;
border-color: var(--wrn-color-border);
border-color: var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
font-size: 0.8125rem;
background: var(--wrn-color-input-background, var(--wrn-color-surface));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
font-size: 0.875rem;
}
.wrn-next__field-control[data-has-icon="true"][data-icon-position="start"] > :is(input, textarea, select) {
padding-inline-start: 2.5rem;
@@ -294,7 +305,8 @@ size: string = "default"
}
.wrn-next--field[data-variant="ghost"] .wrn-next__field-control > :is(input, textarea, select) {
border-color: transparent;
background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
box-shadow: none;
}
.wrn-next__field-floating-label {
position: absolute;
@@ -335,9 +347,9 @@ size: string = "default"
}
.wrn-next__field-error {
min-height: 1em;
color: var(--wrn-color-danger);
font-size: 0.82em;
font-weight: 600;
color: var(--wrn-color-danger-text, var(--wrn-color-danger));
font-size: 0.78rem;
font-weight: 550;
}
.wrn-next__field-error:empty {
display: none;
@@ -345,14 +357,16 @@ size: string = "default"
.wrn-next--field[data-invalid="true"] :is(input, textarea, select),
.wrn-next--choice-field[data-invalid="true"] input {
border-color: var(--wrn-color-danger);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-danger) 12%, transparent);
}
.wrn-next--field :is(input, textarea, select):disabled,
.wrn-next--choice-field input:disabled {
cursor: not-allowed;
opacity: 0.58;
opacity: 0.55;
background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
}
.wrn-next--field :is(input, textarea, select):read-only {
background: var(--wrn-color-surface-2);
background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
}
.wrn-next--field[data-inline="true"],
.wrn-next--choice-field[data-inline="true"] {
@@ -409,11 +423,13 @@ size: string = "default"
display: flex;
min-width: 0;
align-items: center;
gap: 0.65rem;
gap: 0.625rem;
color: var(--wrn-color-text);
width: 100%;
font-size: 0.75rem;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.4;
cursor: pointer;
}
.wrn-next__checkbox-content > .wrn-next__choice {
width: 100%;
@@ -428,12 +444,13 @@ size: string = "default"
.wrn-next__choice-copy {
display: grid;
min-width: 0;
gap: 0.15rem;
line-height: 1.35;
gap: 0.125rem;
line-height: 1.4;
}
.wrn-next__choice-copy small {
color: var(--wrn-color-muted);
font-weight: 500;
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-size: 0.78rem;
font-weight: 450;
}
.wrn-next__radio-group,
.wrn-next__checkbox-group {
@@ -453,15 +470,18 @@ size: string = "default"
.wrn-next--radio-field[data-card="true"] .wrn-next--radio,
.wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox {
min-height: 4.5rem;
padding: 0.85rem;
padding: 0.9rem 1rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-1);
transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
}
.wrn-next--radio-field[data-card="true"] .wrn-next--radio:has(input:checked),
.wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox:has(input:checked) {
border-color: var(--wrn-field-color);
box-shadow: 0 0 0 1px var(--wrn-field-color);
background: color-mix(in srgb, var(--wrn-field-color) 5%, var(--wrn-color-surface));
box-shadow: 0 0 0 1px var(--wrn-field-color), var(--wrn-shadow-1);
}
.wrn-next--radio-field[data-list="true"] .wrn-next--radio,
.wrn-next--checkbox-field[data-list="true"] .wrn-next--checkbox {
@@ -482,19 +502,21 @@ size: string = "default"
}
.wrn-next__choice[data-variant="outlined"],
.wrn-next__choice[data-variant="floating"] {
padding: 0.65rem 0.8rem;
padding: 0.7rem 0.85rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
}
.wrn-next__choice[data-variant="pill"] {
padding: 0.65rem 1rem;
padding: 0.6rem 1rem;
border: 1px solid color-mix(in srgb, var(--wrn-field-color) 22%, var(--wrn-color-border));
border-radius: 999px;
background: color-mix(in srgb, var(--wrn-field-color) 9%, var(--wrn-color-surface));
background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface));
}
.wrn-next__choice[data-variant="ghost"] {
padding: 0.65rem 0.8rem;
padding: 0.65rem 0.85rem;
border-radius: var(--wrn-radius-sm);
background: color-mix(in srgb, var(--wrn-field-color) 7%, transparent);
background: color-mix(in srgb, var(--wrn-field-color) 6%, transparent);
}
.wrn-next__choice[data-variant="underline"] {
padding-block: 0.5rem;
@@ -528,25 +550,35 @@ size: string = "default"
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.7rem 0.85rem;
border: 1px solid var(--wrn-color-border);
padding: 0.55rem 0.85rem;
border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
background: var(--wrn-color-input-background, var(--wrn-color-surface));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
color: var(--wrn-color-text);
font: inherit;
font-size: 0.875rem;
font-variant-numeric: tabular-nums;
text-align: left;
cursor: pointer;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.wrn-next__calendar,
.wrn-next__time-panel {
z-index: 20;
position: absolute;
z-index: 40;
top: 100%;
left: 0;
display: grid;
width: min(100%, 22rem);
width: min(calc(100vw - 2rem), 19.5rem);
gap: 0.75rem;
padding: 0.85rem;
margin-top: 0.375rem;
padding: 0.75rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-md);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-3);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
animation: wrn-popover-enter var(--wrn-motion-base, 160ms) var(--wrn-ease-emphasized, ease) both;
}
.wrn-next--date-picker[data-expanded="false"] .wrn-next__calendar,
.wrn-next--time-picker[data-expanded="false"] .wrn-next__time-panel {
@@ -556,29 +588,42 @@ size: string = "default"
.wrn-next__time-panel button {
min-height: 2.25rem;
border: 0;
border-radius: var(--wrn-radius-sm);
border-radius: calc(var(--wrn-radius-sm) - 2px);
background: transparent;
color: inherit;
font: inherit;
font-size: 0.8125rem;
font-variant-numeric: tabular-nums;
cursor: pointer;
transition: background-color 120ms ease, color 120ms ease;
}
.wrn-next__calendar-weekdays,
.wrn-next__calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0.2rem;
gap: 0.125rem;
text-align: center;
}
.wrn-next__calendar-weekdays {
color: var(--wrn-color-muted);
font-size: 0.75rem;
padding-bottom: 0.375rem;
border-bottom: 1px solid var(--wrn-color-border);
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-family: var(--wrn-font-mono, monospace);
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.wrn-next__calendar-grid button:hover,
.wrn-next__time-panel button:hover {
background: var(--wrn-color-surface-2);
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
}
.wrn-next__calendar-grid button[aria-pressed="true"],
.wrn-next__time-panel button[aria-pressed="true"] {
background: var(--wrn-field-color);
color: var(--wrn-color-primary-contrast, #fff);
box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--wrn-field-color) 35%, transparent);
font-weight: 650;
}
.wrn-next__time-period {
display: flex;
@@ -612,7 +657,7 @@ size: string = "default"
.wrn-next--field[data-variant="ghost"]
:is(.wrn-next__input-group-control, .wrn-next__file-control, .wrn-next__color-control) {
border-color: transparent;
background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
}
@media (max-width: 640px) {
.wrn-next--field[data-inline="true"],
@@ -634,5 +679,34 @@ size: string = "default"
.wrn-next--strong-password input.wrn-invalid {
border-color: var(--wrn-color-danger);
}
.wrn-next__file-control:hover:not(:has(> input:disabled)) {
border-color: var(--wrn-field-color);
background: color-mix(in srgb, var(--wrn-field-color) 4%, var(--wrn-color-surface));
}
/* The native input only catches clicks. The shared field rules give
:disabled inputs opacity 0.55, which exposed its "Choose File / No file
chosen" text over the label, so keep it invisible in every state. */
.wrn-next--file-input .wrn-next__file-control > input[type="file"]:is(:enabled, :disabled) {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
min-height: 0;
padding: 0;
border: 0;
opacity: 0;
cursor: pointer;
}
.wrn-next--file-input .wrn-next__file-control:has(> input:disabled) {
border-style: solid;
border-color: var(--wrn-color-border);
background: var(--wrn-color-surface-soft);
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
opacity: 0.7;
cursor: not-allowed;
}
.wrn-next--file-input .wrn-next__file-control > input[type="file"]:disabled { cursor: not-allowed; }
}
}
packages/ui/components/FileUploadProgress.wrn
+225 -54
View File
@@ -32,7 +32,7 @@ size: string = "default"
}
view {
<div {...attrs} class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--file-upload-progress {class}" data-status="{currentStatus}" aria-live="polite">
<div class="wrn-next__row"><span>{#if fileName}<strong>{fileName}</strong><small>{#if uploadedSize || fileSize}{uploadedSize}{#if uploadedSize && fileSize} of {/if}{fileSize}{:else}{label}{/if}</small>{:else}<strong>{label}</strong>{/if}</span>{#if showValue}<strong>{percent()}%</strong>{/if}</div>
<div class="wrn-next__row"><span class="wrn-next__upload-file" aria-hidden="true"></span><span class="wrn-next__upload-info">{#if fileName}<strong>{fileName}</strong><small>{#if uploadedSize || fileSize}{uploadedSize}{#if uploadedSize && fileSize} of {/if}{fileSize}{:else}{label}{/if}</small>{:else}<strong>{label}</strong>{/if}</span>{#if showValue}<strong>{percent()}%</strong>{/if}</div>
<progress value="{currentValue}" max="{max}" aria-label="{label}"></progress>
<div class="wrn-next__upload-status"><span class="wrn-next__upload-status-icon" aria-hidden="true"></span><span>{#if currentStatus === "uploading"}Uploading securely…{:else if currentStatus === "complete"}Upload complete{:else if currentStatus === "error"}Upload failed{:else}Upload cancelled{/if}</span></div>
<div class="wrn-next__upload-actions">{#if currentStatus === "uploading"}<button type="button" @click="cancelUpload(event)">{cancelLabel}</button>{#if showCompleteAction}<button type="button" @click="completeUpload(event)">Complete</button>{/if}{/if}{#if currentStatus === "error" || currentStatus === "cancelled"}<button type="button" @click="retryUpload(event)">{retryLabel}</button>{/if}</div>
@@ -56,9 +56,9 @@ size: string = "default"
display: grid;
width: min(100%, 36rem);
gap: 0.75rem;
padding: 1rem;
padding: 1rem 1.125rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-md);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-1);
}
@@ -77,12 +77,18 @@ size: string = "default"
}
.wrn-next__upload-actions button {
min-height: 2.25rem;
padding-inline: 0.8rem;
min-height: 2rem;
padding-inline: 0.75rem;
border: 1px solid var(--wrn-color-border);
border-bottom-color: var(--wrn-color-border-strong, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface-2);
background: linear-gradient(180deg, var(--wrn-color-surface), var(--wrn-color-surface-soft, var(--wrn-color-surface)));
box-shadow: var(--wrn-shadow-1);
color: inherit;
font: inherit;
font-size: 0.8125rem;
font-weight: 550;
cursor: pointer;
}
/* Shared component foundation. */
@@ -150,7 +156,7 @@ size: string = "default"
.wrn-component p {
margin: 0;
color: var(--wrn-color-muted);
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
line-height: 1.6;
}
@@ -165,8 +171,9 @@ size: string = "default"
display: block;
min-height: 1em;
margin-top: 0.25rem;
color: var(--wrn-color-danger);
font-size: 0.8rem;
color: var(--wrn-color-danger-text, var(--wrn-color-danger));
font-size: 0.78rem;
font-weight: 550;
}
.wrn-next--choice {
@@ -193,13 +200,14 @@ size: string = "default"
width: 100%;
min-height: var(--wrn-control-height, 2.5rem);
padding: 0.5rem 0.75rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm, 6px);
border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm, 8px);
outline: 0;
color: var(--wrn-color-text);
background: var(--wrn-color-bg);
background: var(--wrn-color-input-background, var(--wrn-color-surface));
font: inherit;
font-weight: 500;
transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
}
.wrn-auth-form form > .wrn-next--field,
.wrn-auth-form form > .wrn-field {
@@ -213,8 +221,8 @@ size: string = "default"
box-shadow: none;
}
.wrn-next--field :where(input, textarea, select):focus-visible {
border-color: var(--wrn-color-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
border-color: var(--wrn-field-color, var(--wrn-color-primary));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04), 0 0 0 3px color-mix(in srgb, var(--wrn-field-color, var(--wrn-color-primary)) 18%, transparent);
}
.wrn-next--field textarea {
resize: vertical;
@@ -248,12 +256,14 @@ size: string = "default"
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.35;
letter-spacing: -0.005em;
}
.wrn-next__field-hint,
.wrn-next__field-help {
color: var(--wrn-color-muted);
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-size: 0.75rem;
font-weight: 500;
font-weight: 450;
line-height: 1.45;
}
.wrn-next__field-control {
position: relative;
@@ -261,10 +271,11 @@ size: string = "default"
}
.wrn-next__field-control > :is(input, textarea, select) {
padding-inline: 0.85rem;
border-color: var(--wrn-color-border);
border-color: var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
font-size: 0.8125rem;
background: var(--wrn-color-input-background, var(--wrn-color-surface));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
font-size: 0.875rem;
}
.wrn-next__field-control[data-has-icon="true"][data-icon-position="start"] > :is(input, textarea, select) {
padding-inline-start: 2.5rem;
@@ -305,7 +316,8 @@ size: string = "default"
}
.wrn-next--field[data-variant="ghost"] .wrn-next__field-control > :is(input, textarea, select) {
border-color: transparent;
background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
box-shadow: none;
}
.wrn-next__field-floating-label {
position: absolute;
@@ -346,9 +358,9 @@ size: string = "default"
}
.wrn-next__field-error {
min-height: 1em;
color: var(--wrn-color-danger);
font-size: 0.82em;
font-weight: 600;
color: var(--wrn-color-danger-text, var(--wrn-color-danger));
font-size: 0.78rem;
font-weight: 550;
}
.wrn-next__field-error:empty {
display: none;
@@ -356,14 +368,16 @@ size: string = "default"
.wrn-next--field[data-invalid="true"] :is(input, textarea, select),
.wrn-next--choice-field[data-invalid="true"] input {
border-color: var(--wrn-color-danger);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-danger) 12%, transparent);
}
.wrn-next--field :is(input, textarea, select):disabled,
.wrn-next--choice-field input:disabled {
cursor: not-allowed;
opacity: 0.58;
opacity: 0.55;
background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
}
.wrn-next--field :is(input, textarea, select):read-only {
background: var(--wrn-color-surface-2);
background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
}
.wrn-next--field[data-inline="true"],
.wrn-next--choice-field[data-inline="true"] {
@@ -420,11 +434,13 @@ size: string = "default"
display: flex;
min-width: 0;
align-items: center;
gap: 0.65rem;
gap: 0.625rem;
color: var(--wrn-color-text);
width: 100%;
font-size: 0.75rem;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.4;
cursor: pointer;
}
.wrn-next__checkbox-content > .wrn-next__choice {
width: 100%;
@@ -439,12 +455,13 @@ size: string = "default"
.wrn-next__choice-copy {
display: grid;
min-width: 0;
gap: 0.15rem;
line-height: 1.35;
gap: 0.125rem;
line-height: 1.4;
}
.wrn-next__choice-copy small {
color: var(--wrn-color-muted);
font-weight: 500;
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-size: 0.78rem;
font-weight: 450;
}
.wrn-next__radio-group,
.wrn-next__checkbox-group {
@@ -464,15 +481,18 @@ size: string = "default"
.wrn-next--radio-field[data-card="true"] .wrn-next--radio,
.wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox {
min-height: 4.5rem;
padding: 0.85rem;
padding: 0.9rem 1rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-1);
transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
}
.wrn-next--radio-field[data-card="true"] .wrn-next--radio:has(input:checked),
.wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox:has(input:checked) {
border-color: var(--wrn-field-color);
box-shadow: 0 0 0 1px var(--wrn-field-color);
background: color-mix(in srgb, var(--wrn-field-color) 5%, var(--wrn-color-surface));
box-shadow: 0 0 0 1px var(--wrn-field-color), var(--wrn-shadow-1);
}
.wrn-next--radio-field[data-list="true"] .wrn-next--radio,
.wrn-next--checkbox-field[data-list="true"] .wrn-next--checkbox {
@@ -493,19 +513,21 @@ size: string = "default"
}
.wrn-next__choice[data-variant="outlined"],
.wrn-next__choice[data-variant="floating"] {
padding: 0.65rem 0.8rem;
padding: 0.7rem 0.85rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
}
.wrn-next__choice[data-variant="pill"] {
padding: 0.65rem 1rem;
padding: 0.6rem 1rem;
border: 1px solid color-mix(in srgb, var(--wrn-field-color) 22%, var(--wrn-color-border));
border-radius: 999px;
background: color-mix(in srgb, var(--wrn-field-color) 9%, var(--wrn-color-surface));
background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface));
}
.wrn-next__choice[data-variant="ghost"] {
padding: 0.65rem 0.8rem;
padding: 0.65rem 0.85rem;
border-radius: var(--wrn-radius-sm);
background: color-mix(in srgb, var(--wrn-field-color) 7%, transparent);
background: color-mix(in srgb, var(--wrn-field-color) 6%, transparent);
}
.wrn-next__choice[data-variant="underline"] {
padding-block: 0.5rem;
@@ -539,25 +561,35 @@ size: string = "default"
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.7rem 0.85rem;
border: 1px solid var(--wrn-color-border);
padding: 0.55rem 0.85rem;
border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
background: var(--wrn-color-input-background, var(--wrn-color-surface));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
color: var(--wrn-color-text);
font: inherit;
font-size: 0.875rem;
font-variant-numeric: tabular-nums;
text-align: left;
cursor: pointer;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.wrn-next__calendar,
.wrn-next__time-panel {
z-index: 20;
position: absolute;
z-index: 40;
top: 100%;
left: 0;
display: grid;
width: min(100%, 22rem);
width: min(calc(100vw - 2rem), 19.5rem);
gap: 0.75rem;
padding: 0.85rem;
margin-top: 0.375rem;
padding: 0.75rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-md);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-3);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
animation: wrn-popover-enter var(--wrn-motion-base, 160ms) var(--wrn-ease-emphasized, ease) both;
}
.wrn-next--date-picker[data-expanded="false"] .wrn-next__calendar,
.wrn-next--time-picker[data-expanded="false"] .wrn-next__time-panel {
@@ -567,29 +599,42 @@ size: string = "default"
.wrn-next__time-panel button {
min-height: 2.25rem;
border: 0;
border-radius: var(--wrn-radius-sm);
border-radius: calc(var(--wrn-radius-sm) - 2px);
background: transparent;
color: inherit;
font: inherit;
font-size: 0.8125rem;
font-variant-numeric: tabular-nums;
cursor: pointer;
transition: background-color 120ms ease, color 120ms ease;
}
.wrn-next__calendar-weekdays,
.wrn-next__calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0.2rem;
gap: 0.125rem;
text-align: center;
}
.wrn-next__calendar-weekdays {
color: var(--wrn-color-muted);
font-size: 0.75rem;
padding-bottom: 0.375rem;
border-bottom: 1px solid var(--wrn-color-border);
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-family: var(--wrn-font-mono, monospace);
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.wrn-next__calendar-grid button:hover,
.wrn-next__time-panel button:hover {
background: var(--wrn-color-surface-2);
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
}
.wrn-next__calendar-grid button[aria-pressed="true"],
.wrn-next__time-panel button[aria-pressed="true"] {
background: var(--wrn-field-color);
color: var(--wrn-color-primary-contrast, #fff);
box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--wrn-field-color) 35%, transparent);
font-weight: 650;
}
.wrn-next__time-period {
display: flex;
@@ -623,7 +668,7 @@ size: string = "default"
.wrn-next--field[data-variant="ghost"]
:is(.wrn-next__input-group-control, .wrn-next__file-control, .wrn-next__color-control) {
border-color: transparent;
background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
}
@media (max-width: 640px) {
.wrn-next--field[data-inline="true"],
@@ -645,5 +690,131 @@ size: string = "default"
.wrn-next--strong-password input.wrn-invalid {
border-color: var(--wrn-color-danger);
}
/* --- Upload card --------------------------------------------------------
Scoped by data-status so these win over the shared foundation copies
that other field components also ship. */
.wrn-next--file-upload-progress[data-status] {
--wrn-upload-color: var(--wrn-component-color, var(--wrn-color-primary));
gap: 0.625rem;
padding: 0.875rem 1rem;
}
.wrn-next--file-upload-progress[data-status="complete"] { --wrn-upload-color: var(--wrn-color-success); }
.wrn-next--file-upload-progress[data-status="error"] { --wrn-upload-color: var(--wrn-color-danger); }
.wrn-next--file-upload-progress[data-status="cancelled"] { --wrn-upload-color: var(--wrn-color-text-subtle, var(--wrn-color-muted)); }
.wrn-next--file-upload-progress[data-status] .wrn-next__row {
justify-content: flex-start;
gap: 0.75rem;
}
.wrn-next__upload-file {
position: relative;
display: inline-grid;
flex: none;
width: 2.25rem;
height: 2.25rem;
place-items: center;
border: 1px solid color-mix(in srgb, var(--wrn-upload-color) 20%, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
background: color-mix(in srgb, var(--wrn-upload-color) 9%, var(--wrn-color-surface));
color: var(--wrn-upload-color);
}
.wrn-next__upload-file::after {
width: 1.125rem;
height: 1.125rem;
background: currentColor;
content: "";
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wrn-next--file-upload-progress[data-status] .wrn-next__upload-info {
display: grid;
flex: 1;
min-width: 0;
gap: 0.125rem;
}
.wrn-next__upload-info strong {
overflow: hidden;
color: var(--wrn-color-text);
font-size: 0.875rem;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
.wrn-next__upload-info small {
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-size: 0.75rem;
font-variant-numeric: tabular-nums;
}
.wrn-next--file-upload-progress[data-status] .wrn-next__row > strong {
flex: none;
color: var(--wrn-color-text-muted);
font-family: var(--wrn-font-mono, monospace);
font-size: 0.75rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.wrn-next--file-upload-progress[data-status] progress {
appearance: none;
width: 100%;
height: 0.375rem;
overflow: hidden;
border: 0;
border-radius: 999px;
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
box-shadow: inset 0 1px 1px rgb(0 0 0 / 0.08);
}
.wrn-next--file-upload-progress[data-status] progress::-webkit-progress-bar {
border-radius: 999px;
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
}
.wrn-next--file-upload-progress[data-status] progress::-webkit-progress-value {
border-radius: 999px;
background: linear-gradient(180deg, color-mix(in srgb, var(--wrn-upload-color) 88%, white), var(--wrn-upload-color));
transition: width var(--wrn-motion-slow) var(--wrn-ease-emphasized);
}
.wrn-next--file-upload-progress[data-status] progress::-moz-progress-bar {
border-radius: 999px;
background: var(--wrn-upload-color);
}
.wrn-next__upload-status {
display: flex;
align-items: center;
gap: 0.4rem;
color: var(--wrn-color-text-muted);
font-size: 0.78rem;
}
.wrn-next__upload-status-icon {
width: 0.5rem;
height: 0.5rem;
flex: none;
border-radius: 999px;
background: var(--wrn-upload-color);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-upload-color) 18%, transparent);
}
.wrn-next--file-upload-progress[data-status="uploading"] .wrn-next__upload-status-icon {
animation: wrn-upload-pulse 1.4s ease-in-out infinite;
}
.wrn-next--file-upload-progress[data-status="error"] .wrn-next__upload-status {
color: var(--wrn-color-danger-text, var(--wrn-color-danger));
}
.wrn-next--file-upload-progress[data-status="complete"] .wrn-next__upload-status {
color: var(--wrn-color-success-text, var(--wrn-color-success));
}
.wrn-next--file-upload-progress[data-status] .wrn-next__upload-actions {
justify-content: flex-end;
margin-top: -1.75rem;
}
.wrn-next--file-upload-progress[data-status] .wrn-next__upload-actions:empty {
display: none;
}
@keyframes wrn-upload-pulse {
50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
.wrn-next--file-upload-progress[data-status="uploading"] .wrn-next__upload-status-icon { animation: none; }
}
}
}
packages/ui/components/Hero.wrn
-1
View File
@@ -325,7 +325,6 @@ component Hero {
.wrn-hero[data-variant="soft"] {
background:
linear-gradient(135deg, var(--wrn-hero-accent-soft), transparent 58%),
var(--wrn-color-surface-raised);
border-color: var(--wrn-color-border);
}
packages/ui/components/InputGroup.wrn
+120 -53
View File
@@ -57,9 +57,11 @@ component InputGroup {
.wrn-next__input-group-control > .wrn-next__field-icon[data-position="end"] { order:2; margin-inline:0 .75rem; }
.wrn-next__input-group-control {
overflow: hidden;
border: 1px solid var(--wrn-color-border);
border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
background: var(--wrn-color-input-background, var(--wrn-color-surface));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.wrn-next__input-group-control input {
@@ -71,17 +73,23 @@ component InputGroup {
.wrn-next__input-addon,
.wrn-next__input-group-control button {
padding: 0.7rem 0.85rem;
padding: 0 0.85rem;
white-space: nowrap;
align-self: stretch;
display: inline-flex;
align-items: center;
}
.wrn-next__input-group-control button {
align-self: stretch;
border: 0;
background: var(--wrn-field-color);
border-left: 1px solid color-mix(in srgb, var(--wrn-field-color) 70%, black);
background: linear-gradient(180deg, color-mix(in srgb, var(--wrn-field-color) 92%, white), var(--wrn-field-color));
box-shadow: var(--wrn-highlight-edge, none);
color: var(--wrn-color-primary-contrast, #fff);
font: inherit;
font-weight: 700;
font-size: 0.8125rem;
font-weight: 600;
cursor: pointer;
}
@@ -150,7 +158,7 @@ component InputGroup {
.wrn-component p {
margin: 0;
color: var(--wrn-color-muted);
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
line-height: 1.6;
}
@@ -165,8 +173,9 @@ component InputGroup {
display: block;
min-height: 1em;
margin-top: 0.25rem;
color: var(--wrn-color-danger);
font-size: 0.8rem;
color: var(--wrn-color-danger-text, var(--wrn-color-danger));
font-size: 0.78rem;
font-weight: 550;
}
.wrn-next--choice {
@@ -193,13 +202,14 @@ component InputGroup {
width: 100%;
min-height: var(--wrn-control-height, 2.5rem);
padding: 0.5rem 0.75rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm, 6px);
border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm, 8px);
outline: 0;
color: var(--wrn-color-text);
background: var(--wrn-color-bg);
background: var(--wrn-color-input-background, var(--wrn-color-surface));
font: inherit;
font-weight: 500;
transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
}
.wrn-auth-form form > .wrn-next--field,
.wrn-auth-form form > .wrn-field {
@@ -213,8 +223,8 @@ component InputGroup {
box-shadow: none;
}
.wrn-next--field :where(input, textarea, select):focus-visible {
border-color: var(--wrn-color-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
border-color: var(--wrn-field-color, var(--wrn-color-primary));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04), 0 0 0 3px color-mix(in srgb, var(--wrn-field-color, var(--wrn-color-primary)) 18%, transparent);
}
.wrn-next--field textarea {
resize: vertical;
@@ -248,12 +258,14 @@ component InputGroup {
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.35;
letter-spacing: -0.005em;
}
.wrn-next__field-hint,
.wrn-next__field-help {
color: var(--wrn-color-muted);
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-size: 0.75rem;
font-weight: 500;
font-weight: 450;
line-height: 1.45;
}
.wrn-next__field-control {
position: relative;
@@ -261,10 +273,11 @@ component InputGroup {
}
.wrn-next__field-control > :is(input, textarea, select) {
padding-inline: 0.85rem;
border-color: var(--wrn-color-border);
border-color: var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
font-size: 0.8125rem;
background: var(--wrn-color-input-background, var(--wrn-color-surface));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
font-size: 0.875rem;
}
.wrn-next__field-control[data-has-icon="true"][data-icon-position="start"] > :is(input, textarea, select) {
padding-inline-start: 2.5rem;
@@ -305,7 +318,8 @@ component InputGroup {
}
.wrn-next--field[data-variant="ghost"] .wrn-next__field-control > :is(input, textarea, select) {
border-color: transparent;
background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
box-shadow: none;
}
.wrn-next__field-floating-label {
position: absolute;
@@ -346,9 +360,9 @@ component InputGroup {
}
.wrn-next__field-error {
min-height: 1em;
color: var(--wrn-color-danger);
font-size: 0.82em;
font-weight: 600;
color: var(--wrn-color-danger-text, var(--wrn-color-danger));
font-size: 0.78rem;
font-weight: 550;
}
.wrn-next__field-error:empty {
display: none;
@@ -356,14 +370,16 @@ component InputGroup {
.wrn-next--field[data-invalid="true"] :is(input, textarea, select),
.wrn-next--choice-field[data-invalid="true"] input {
border-color: var(--wrn-color-danger);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-danger) 12%, transparent);
}
.wrn-next--field :is(input, textarea, select):disabled,
.wrn-next--choice-field input:disabled {
cursor: not-allowed;
opacity: 0.58;
opacity: 0.55;
background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
}
.wrn-next--field :is(input, textarea, select):read-only {
background: var(--wrn-color-surface-2);
background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
}
.wrn-next--field[data-inline="true"],
.wrn-next--choice-field[data-inline="true"] {
@@ -420,11 +436,13 @@ component InputGroup {
display: flex;
min-width: 0;
align-items: center;
gap: 0.65rem;
gap: 0.625rem;
color: var(--wrn-color-text);
width: 100%;
font-size: 0.75rem;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.4;
cursor: pointer;
}
.wrn-next__checkbox-content > .wrn-next__choice {
width: 100%;
@@ -439,12 +457,13 @@ component InputGroup {
.wrn-next__choice-copy {
display: grid;
min-width: 0;
gap: 0.15rem;
line-height: 1.35;
gap: 0.125rem;
line-height: 1.4;
}
.wrn-next__choice-copy small {
color: var(--wrn-color-muted);
font-weight: 500;
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-size: 0.78rem;
font-weight: 450;
}
.wrn-next__radio-group,
.wrn-next__checkbox-group {
@@ -464,15 +483,18 @@ component InputGroup {
.wrn-next--radio-field[data-card="true"] .wrn-next--radio,
.wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox {
min-height: 4.5rem;
padding: 0.85rem;
padding: 0.9rem 1rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-1);
transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
}
.wrn-next--radio-field[data-card="true"] .wrn-next--radio:has(input:checked),
.wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox:has(input:checked) {
border-color: var(--wrn-field-color);
box-shadow: 0 0 0 1px var(--wrn-field-color);
background: color-mix(in srgb, var(--wrn-field-color) 5%, var(--wrn-color-surface));
box-shadow: 0 0 0 1px var(--wrn-field-color), var(--wrn-shadow-1);
}
.wrn-next--radio-field[data-list="true"] .wrn-next--radio,
.wrn-next--checkbox-field[data-list="true"] .wrn-next--checkbox {
@@ -493,19 +515,21 @@ component InputGroup {
}
.wrn-next__choice[data-variant="outlined"],
.wrn-next__choice[data-variant="floating"] {
padding: 0.65rem 0.8rem;
padding: 0.7rem 0.85rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
}
.wrn-next__choice[data-variant="pill"] {
padding: 0.65rem 1rem;
padding: 0.6rem 1rem;
border: 1px solid color-mix(in srgb, var(--wrn-field-color) 22%, var(--wrn-color-border));
border-radius: 999px;
background: color-mix(in srgb, var(--wrn-field-color) 9%, var(--wrn-color-surface));
background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface));
}
.wrn-next__choice[data-variant="ghost"] {
padding: 0.65rem 0.8rem;
padding: 0.65rem 0.85rem;
border-radius: var(--wrn-radius-sm);
background: color-mix(in srgb, var(--wrn-field-color) 7%, transparent);
background: color-mix(in srgb, var(--wrn-field-color) 6%, transparent);
}
.wrn-next__choice[data-variant="underline"] {
padding-block: 0.5rem;
@@ -539,25 +563,35 @@ component InputGroup {
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.7rem 0.85rem;
border: 1px solid var(--wrn-color-border);
padding: 0.55rem 0.85rem;
border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
background: var(--wrn-color-input-background, var(--wrn-color-surface));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
color: var(--wrn-color-text);
font: inherit;
font-size: 0.875rem;
font-variant-numeric: tabular-nums;
text-align: left;
cursor: pointer;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.wrn-next__calendar,
.wrn-next__time-panel {
z-index: 20;
position: absolute;
z-index: 40;
top: 100%;
left: 0;
display: grid;
width: min(100%, 22rem);
width: min(calc(100vw - 2rem), 19.5rem);
gap: 0.75rem;
padding: 0.85rem;
margin-top: 0.375rem;
padding: 0.75rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-md);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-3);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
animation: wrn-popover-enter var(--wrn-motion-base, 160ms) var(--wrn-ease-emphasized, ease) both;
}
.wrn-next--date-picker[data-expanded="false"] .wrn-next__calendar,
.wrn-next--time-picker[data-expanded="false"] .wrn-next__time-panel {
@@ -567,29 +601,42 @@ component InputGroup {
.wrn-next__time-panel button {
min-height: 2.25rem;
border: 0;
border-radius: var(--wrn-radius-sm);
border-radius: calc(var(--wrn-radius-sm) - 2px);
background: transparent;
color: inherit;
font: inherit;
font-size: 0.8125rem;
font-variant-numeric: tabular-nums;
cursor: pointer;
transition: background-color 120ms ease, color 120ms ease;
}
.wrn-next__calendar-weekdays,
.wrn-next__calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0.2rem;
gap: 0.125rem;
text-align: center;
}
.wrn-next__calendar-weekdays {
color: var(--wrn-color-muted);
font-size: 0.75rem;
padding-bottom: 0.375rem;
border-bottom: 1px solid var(--wrn-color-border);
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-family: var(--wrn-font-mono, monospace);
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.wrn-next__calendar-grid button:hover,
.wrn-next__time-panel button:hover {
background: var(--wrn-color-surface-2);
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
}
.wrn-next__calendar-grid button[aria-pressed="true"],
.wrn-next__time-panel button[aria-pressed="true"] {
background: var(--wrn-field-color);
color: var(--wrn-color-primary-contrast, #fff);
box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--wrn-field-color) 35%, transparent);
font-weight: 650;
}
.wrn-next__time-period {
display: flex;
@@ -623,7 +670,7 @@ component InputGroup {
.wrn-next--field[data-variant="ghost"]
:is(.wrn-next__input-group-control, .wrn-next__file-control, .wrn-next__color-control) {
border-color: transparent;
background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
}
@media (max-width: 640px) {
.wrn-next--field[data-inline="true"],
@@ -645,5 +692,25 @@ component InputGroup {
.wrn-next--strong-password input.wrn-invalid {
border-color: var(--wrn-color-danger);
}
.wrn-next__input-addon {
color: var(--wrn-color-text-muted);
background: var(--wrn-color-surface-soft);
font-size: 0.8125rem;
border-inline: 1px solid var(--wrn-color-border);
}
.wrn-next__input-addon:first-child {
border-inline-start: 0;
}
.wrn-next__input-addon:last-child {
border-inline-end: 0;
}
.wrn-next__input-group-control:focus-within {
border-color: var(--wrn-field-color);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-field-color) 18%, transparent);
}
}
}
packages/ui/components/InputNumber.wrn
+60 -6
View File
@@ -630,10 +630,29 @@ component InputNumber {
.wrn-input-number[data-full-width="true"] { max-width: none; }
.wrn-input-number[data-variant="compact"] { width: fit-content; max-width: 100%; }
.wrn-input-number[data-disabled="true"] { opacity: 0.6; }
.wrn-input-number__label { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--wrn-color-text); font-size: 0.875rem; font-weight: 600; line-height: 1.25rem; }
.wrn-input-number__label {
display: inline-flex;
align-items: center;
gap: 0.25rem;
color: var(--wrn-color-text);
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.25rem;
}
.wrn-input-number__required { margin-left: 0.125rem; color: var(--wrn-color-danger); }
.wrn-input-number__description, .wrn-input-number__message { margin: 0; color: var(--wrn-color-muted); font-size: 0.75rem; line-height: 1.25rem; }
.wrn-input-number__control { display: flex; min-width: 0; min-height: 2.5rem; overflow: hidden; border: 1px solid var(--wrn-color-border); border-radius: var(--wrn-radius-sm); color: var(--wrn-color-text); background: var(--wrn-color-surface); box-shadow: var(--wrn-shadow-1); transition: border-color var(--wrn-motion-base), box-shadow var(--wrn-motion-base), background var(--wrn-motion-base); }
.wrn-input-number__control {
display: flex;
min-width: 0;
min-height: 2.5rem;
overflow: hidden;
border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
color: var(--wrn-color-text);
background: var(--wrn-color-input-background, var(--wrn-color-surface));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
transition: border-color var(--wrn-motion-base), box-shadow var(--wrn-motion-base), background var(--wrn-motion-base);
}
.wrn-input-number__control:focus-within { border-color: var(--input-number-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--input-number-accent) 18%, transparent); }
.wrn-input-number[data-invalid="true"] .wrn-input-number__control { border-color: var(--wrn-color-danger); }
.wrn-input-number[data-invalid="true"] .wrn-input-number__control:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-danger) 18%, transparent); }
@@ -658,21 +677,56 @@ component InputNumber {
.wrn-input-number[data-variant="seat"] .wrn-input-number__field { width: auto; flex: none; }
.wrn-input-number__prefix, .wrn-input-number__suffix { flex: none; color: var(--wrn-color-muted); }
.wrn-input-number__prefix { padding-right: 0.375rem; } .wrn-input-number__suffix { padding-left: 0.375rem; }
.wrn-input-number__input { width: 100%; min-width: 0; flex: 1; padding: 0; border: 0; outline: none; color: var(--wrn-color-text); background: transparent; font: inherit; font-weight: 500; line-height: 1; appearance: textfield; }
.wrn-input-number__input {
width: 100%;
min-width: 0;
flex: 1;
padding: 0;
border: 0;
outline: none;
color: var(--wrn-color-text);
background: transparent;
font: inherit;
font-size: 0.875rem;
font-weight: 550;
font-variant-numeric: tabular-nums;
line-height: 1;
appearance: textfield;
}
.wrn-input-number__input::-webkit-inner-spin-button, .wrn-input-number__input::-webkit-outer-spin-button { appearance: none; }
.wrn-input-number__input::placeholder { color: var(--wrn-color-muted); }
.wrn-input-number__input:read-only { cursor: default; }
.wrn-input-number__input:disabled { cursor: not-allowed; }
.wrn-input-number:is([data-variant="horizontal"], [data-variant="compact"], [data-variant="seat"]) .wrn-input-number__input { text-align: center; }
.wrn-input-number[data-variant="seat"] .wrn-input-number__input { width: 2.5rem; flex: none; }
.wrn-input-number__buttons { display: flex; flex: none; border-left: 1px solid var(--wrn-color-border); }
.wrn-input-number__buttons {
display: flex;
flex: none;
border-left: 1px solid var(--wrn-color-border);
background: var(--wrn-color-surface-soft, transparent);
}
.wrn-input-number[data-variant="vertical"] .wrn-input-number__buttons { flex-direction: column; }
.wrn-input-number__button { display: inline-flex; width: 2.5rem; flex: none; align-items: center; justify-content: center; padding: 0; border: 0; color: var(--wrn-color-muted); background: transparent; transition: color var(--wrn-motion-fast), background var(--wrn-motion-fast); }
.wrn-input-number__button {
display: inline-flex;
width: 2.5rem;
flex: none;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
color: var(--wrn-color-text-muted);
background: transparent;
cursor: pointer;
transition: color var(--wrn-motion-fast), background var(--wrn-motion-fast);
}
.wrn-input-number[data-size="xs"] .wrn-input-number__button { width: 2rem; } .wrn-input-number[data-size="sm"] .wrn-input-number__button { width: 2.25rem; } .wrn-input-number[data-size="lg"] .wrn-input-number__button { width: 3rem; } .wrn-input-number[data-size="xl"] .wrn-input-number__button { width: 3.5rem; }
.wrn-input-number__button--start { border-right: 1px solid var(--wrn-color-border); } .wrn-input-number__button--end { border-left: 1px solid var(--wrn-color-border); }
.wrn-input-number__button--decrement { border-right: 1px solid var(--wrn-color-border); }
.wrn-input-number[data-variant="vertical"] .wrn-input-number__button--decrement { border-right: 0; border-bottom: 1px solid var(--wrn-color-border); }
.wrn-input-number__button:hover { color: var(--input-number-accent); background: var(--wrn-color-surface-2); }
.wrn-input-number__button:hover {
color: var(--wrn-color-text);
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
}
.wrn-input-number__button:focus-visible { z-index: 1; outline: 2px solid var(--input-number-accent); outline-offset: -2px; }
.wrn-input-number__button:disabled { cursor: not-allowed; opacity: 0.4; }
.wrn-input-number__icon { width: 1rem; height: 1rem; }
packages/ui/components/Kbd.wrn
+10 -8
View File
@@ -26,16 +26,18 @@ component Kbd {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.6rem;
padding: 0.15rem 0.4rem;
min-width: 1.5rem;
height: 1.5rem;
padding: 0 0.4rem;
border: 1px solid var(--wrn-color-border);
/* The lower edge is what reads as a physical key. */
border-bottom-color: var(--wrn-color-border-strong, var(--wrn-color-border));
border-bottom-width: 2px;
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface-soft);
color: var(--wrn-color-text);
font-family: inherit;
font-size: 0.78rem;
border-radius: 0.375rem;
background: linear-gradient(180deg, var(--wrn-color-surface), var(--wrn-color-surface-soft, var(--wrn-color-surface)));
box-shadow: var(--wrn-highlight-edge, none), 0 1px 1px rgb(0 0 0 / 0.05);
color: var(--wrn-color-text-muted, var(--wrn-color-text));
font-family: var(--wrn-font-mono, monospace);
font-size: 0.72rem;
font-weight: 600;
line-height: 1;
}
packages/ui/components/LayoutSplitter.wrn
+65 -13
View File
@@ -125,11 +125,16 @@ component LayoutSplitter {
.wrn-splitter {
--splitter-accent: var(--wrn-color-primary);
display: grid;
/* The first track follows the size the runtime resolves. */
grid-template-columns: var(--wrn-split, 50%) auto minmax(0, 1fr);
align-items: stretch;
width: 100%;
min-width: 0;
min-height: 14rem;
overflow: hidden;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-1);
}
.wrn-splitter[data-color="secondary"] {
@@ -157,45 +162,57 @@ component LayoutSplitter {
min-width: 0;
min-height: 0;
overflow: auto;
padding: 1rem 1.125rem;
color: var(--wrn-color-text);
font-size: 0.875rem;
line-height: 1.55;
}
.wrn-splitter__handle {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
padding: 0 0.25rem;
width: 0.75rem;
padding: 0;
border: 0;
background: transparent;
background: var(--wrn-color-surface);
cursor: col-resize;
/* Without this the pointer drag selects the text in both panes. */
touch-action: none;
user-select: none;
}
.wrn-splitter[data-orientation="vertical"] .wrn-splitter__handle {
padding: 0.25rem 0;
width: auto;
height: 0.75rem;
padding: 0;
cursor: row-resize;
}
.wrn-splitter__grip {
position: relative;
z-index: 1;
display: block;
width: 2px;
height: 100%;
min-height: 1.5rem;
width: 0.375rem;
height: 1.75rem;
min-height: 0;
border: 1px solid var(--wrn-color-border-strong, var(--wrn-color-border));
border-radius: 999px;
background: var(--wrn-color-border);
transition: background 140ms ease;
background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
box-shadow: var(--wrn-shadow-1);
transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.wrn-splitter[data-orientation="vertical"] .wrn-splitter__grip {
width: 100%;
min-width: 1.5rem;
height: 2px;
width: 1.75rem;
min-width: 0;
height: 0.375rem;
}
.wrn-splitter__handle:hover .wrn-splitter__grip,
.wrn-splitter[data-wrn-splitter-dragging="true"] .wrn-splitter__grip {
border-color: var(--splitter-accent);
background: var(--splitter-accent);
}
@@ -218,8 +235,43 @@ component LayoutSplitter {
}
.wrn-splitter__handle {
width: auto;
height: 1px;
cursor: default;
background: var(--wrn-color-border);
}
.wrn-splitter__handle::before,
.wrn-splitter__grip {
display: none;
}
}
.wrn-splitter__handle::before {
position: absolute;
inset-block: 0;
inset-inline-start: calc(50% - 0.5px);
width: 1px;
background: var(--wrn-color-border);
content: "";
transition: background 140ms ease;
}
.wrn-splitter[data-orientation="vertical"] .wrn-splitter__handle::before {
inset-block: auto;
inset-inline: 0;
top: calc(50% - 0.5px);
width: auto;
height: 1px;
}
.wrn-splitter__handle:hover::before,
.wrn-splitter[data-wrn-splitter-dragging="true"] .wrn-splitter__handle::before {
background: color-mix(in srgb, var(--splitter-accent) 60%, var(--wrn-color-border));
}
.wrn-splitter__pane--end {
background: var(--wrn-color-surface-soft, var(--wrn-color-surface));
}
}
}
packages/ui/components/LegendIndicator.wrn
+23 -3
View File
@@ -32,8 +32,27 @@ component LegendIndicator {
.wrn-legend { display:grid; gap:.65rem; }
.wrn-legend p { margin:0; color:var(--wrn-color-muted); }
.wrn-legend__items { display:flex; flex-wrap:wrap; gap:.75rem; }
.wrn-legend button { display:flex; align-items:center; gap:.4rem; border:0; background:transparent; color:var(--wrn-color-text); font:inherit; font-size:.875rem; cursor:pointer; }
.wrn-legend i { width:.65rem; height:.65rem; border-radius:50%; }
.wrn-legend button {
display: flex;
align-items: center;
gap: .45rem;
padding: 0.25rem 0.5rem;
border: 1px solid transparent;
border-radius: 999px;
background: transparent;
color: var(--wrn-color-text);
font: inherit;
font-size: .8125rem;
font-weight: 550;
cursor: pointer;
transition: background-color 120ms ease, opacity 120ms ease;
}
.wrn-legend i {
width: .625rem;
height: .625rem;
border-radius: 3px;
box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1);
}
.wrn-legend button[aria-pressed="false"] { opacity:.45; text-decoration:line-through; }
.wrn-next--legend-indicator {
@@ -44,6 +63,7 @@ component LegendIndicator {
border-radius: var(--wrn-radius);
color: var(--wrn-color-text);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-1);
}
.wrn-next--legend-indicator > p { margin: 0; color: var(--wrn-color-muted); }
.wrn-next--legend-indicator > .wrn-next__items { display: flex; flex-wrap: wrap; gap: 0.5rem; }
@@ -114,7 +134,7 @@ component LegendIndicator {
.wrn-component p {
margin: 0;
color: var(--wrn-color-muted);
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
line-height: 1.6;
}
}
packages/ui/components/List.wrn
+112 -14
View File
@@ -99,30 +99,128 @@ component List {
style {
.wrn-list { width: 100%; }
.wrn-list__header { margin-bottom: 1rem; }
.wrn-list__title { color: var(--wrn-color-text); font-size: 1.125rem; font-weight: 700; }
.wrn-list__title {
color: var(--wrn-color-text);
font-size: 1.0625rem;
font-weight: 650;
letter-spacing: -0.015em;
}
.wrn-list__description { margin-top: 0.25rem; color: var(--wrn-color-text-muted); font-size: 0.875rem; line-height: 1.5rem; }
.wrn-list__items { overflow: hidden; }
.wrn-list__items:is([data-variant="default"], [data-variant="divided"]) > .wrn-list__item + .wrn-list__item { border-top: 1px solid var(--wrn-color-border); }
.wrn-list__items[data-variant="card"] { border: 1px solid var(--wrn-color-border); border-radius: calc(var(--wrn-radius) * 1.5); background: var(--wrn-color-surface-raised); }
.wrn-list__items {
overflow: hidden;
}
.wrn-list__items:is([data-variant="default"], [data-variant="divided"]) > .wrn-list__item + .wrn-list__item {
border-top: 1px solid var(--wrn-color-border);
}
.wrn-list__items[data-variant="card"] {
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface-raised);
box-shadow: var(--wrn-shadow-1);
}
.wrn-list__items[data-variant="separated"] { display: grid; gap: 0.75rem; }
.wrn-list__item { min-width: 0; }
.wrn-list__item[data-variant="separated"] { border: 1px solid var(--wrn-color-border); border-radius: var(--wrn-radius); background: var(--wrn-color-surface-raised); }
.wrn-list__row { display: flex; min-width: 0; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 1rem; outline: none; transition: background var(--wrn-motion-base); }
a.wrn-list__row:hover { background: var(--wrn-color-surface-soft); }
.wrn-list__item[data-variant="separated"] {
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface-raised);
box-shadow: var(--wrn-shadow-1);
}
.wrn-list__row {
display: flex;
min-width: 0;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
outline: none;
color: inherit;
text-decoration: none;
background: var(--wrn-color-surface);
transition: background var(--wrn-motion-base);
}
a.wrn-list__row:hover {
background: var(--wrn-color-surface-soft);
}
.wrn-list__row:focus-visible { box-shadow: inset 0 0 0 2px var(--wrn-color-focus); }
.wrn-list__row[data-size="sm"] { padding: 0.625rem 0.75rem; }
.wrn-list__row[data-size="lg"] { padding: 1rem 1.25rem; }
.wrn-list__leading-icon { display: flex; width: 2.5rem; height: 2.5rem; flex: none; align-items: center; justify-content: center; border-radius: var(--wrn-radius); color: var(--wrn-color-primary); background: var(--wrn-color-primary-soft); }
.wrn-list__leading-icon {
display: flex;
width: 2.25rem;
height: 2.25rem;
flex: none;
align-items: center;
justify-content: center;
border-radius: var(--wrn-radius-sm);
color: var(--wrn-color-primary-text, var(--wrn-color-primary));
background: color-mix(in srgb, var(--wrn-color-primary) 10%, var(--wrn-color-surface));
border: 1px solid color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
}
.wrn-list__leading-icon > span { width: 1.25rem; height: 1.25rem; }
.wrn-list__image { width: 3rem; height: 3rem; flex: none; border-radius: var(--wrn-radius); object-fit: cover; }
.wrn-list__body { min-width: 0; flex: 1; }
.wrn-list__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.wrn-list__item-title { overflow: hidden; color: var(--wrn-color-text); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.wrn-list__meta { flex: none; color: var(--wrn-color-text-muted); font-size: 0.75rem; }
.wrn-list__item-description { display: -webkit-box; margin-top: 0.25rem; overflow: hidden; color: var(--wrn-color-text-muted); font-size: 0.875rem; line-height: 1.25rem; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.wrn-list__badge { display: inline-flex; margin-top: 0.5rem; padding: 0.25rem 0.625rem; border-radius: 999px; color: var(--wrn-color-primary); background: var(--wrn-color-primary-soft); font-size: 0.75rem; font-weight: 600; }
.wrn-list__item-title {
overflow: hidden;
color: var(--wrn-color-text);
font-size: 0.875rem;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
.wrn-list__meta {
flex: none;
color: var(--wrn-color-text-subtle, var(--wrn-color-text-muted));
font-size: 0.72rem;
font-variant-numeric: tabular-nums;
}
.wrn-list__item-description {
display: -webkit-box;
margin-top: 0.125rem;
overflow: hidden;
color: var(--wrn-color-text-muted);
font-size: 0.8125rem;
line-height: 1.25rem;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.wrn-list__badge {
display: inline-flex;
margin-top: 0.5rem;
padding: 0.125rem 0.5rem;
border-radius: 999px;
color: var(--wrn-color-primary-text, var(--wrn-color-primary));
background: color-mix(in srgb, var(--wrn-color-primary) 10%, var(--wrn-color-surface));
border: 1px solid color-mix(in srgb, var(--wrn-color-primary) 20%, transparent);
font-size: 0.6875rem;
font-weight: 650;
}
.wrn-list__chevron { width: 1rem; height: 1rem; flex: none; margin-top: 0.25rem; color: var(--wrn-color-text-muted); transition: color var(--wrn-motion-base), transform var(--wrn-motion-base); }
.wrn-list__row:hover .wrn-list__chevron { color: var(--wrn-color-primary); transform: translateX(0.125rem); }
.wrn-list__empty { padding: 1.5rem; border: 1px dashed var(--wrn-color-border); border-radius: var(--wrn-radius); color: var(--wrn-color-text-muted); font-size: 0.875rem; text-align: center; }
.wrn-list__row:hover .wrn-list__chevron {
color: var(--wrn-color-text);
transform: translateX(0.125rem);
}
.wrn-list__empty {
padding: 1.5rem;
border: 1px dashed var(--wrn-color-border-strong, var(--wrn-color-border));
border-radius: var(--wrn-radius);
color: var(--wrn-color-text-muted);
background: var(--wrn-color-surface-soft);
font-size: 0.8125rem;
text-align: center;
}
.wrn-list__items:is([data-variant="default"], [data-variant="divided"]) {
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-1);
}
.wrn-list__item[aria-current="true"] > .wrn-list__row,
.wrn-list__item[data-active="true"] > .wrn-list__row {
background: color-mix(in srgb, var(--wrn-color-primary) 8%, var(--wrn-color-surface));
box-shadow: inset 2px 0 0 var(--wrn-color-primary);
}
}
}
packages/ui/components/ListGroup.wrn
+26 -3
View File
@@ -33,10 +33,33 @@ component ListGroup {
style {
.wrn-list-group { display:grid; gap:.75rem; color:var(--wrn-color-text); }
.wrn-list-group > p { margin:0; font-size:.875rem; color:var(--wrn-color-muted); }
.wrn-list-group__items { border:1px solid var(--wrn-color-border); border-radius:var(--wrn-radius-md); overflow:hidden; }
.wrn-list-group button { display:flex; align-items:center; gap:.75rem; width:100%; padding:.85rem 1rem; text-align:start; border:0; color:inherit; background:var(--wrn-color-surface); font:inherit; font-size:.875rem; cursor:pointer; }
.wrn-list-group__items {
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius);
overflow: hidden;
box-shadow: var(--wrn-shadow-1);
}
.wrn-list-group button {
display: flex;
align-items: center;
gap: .75rem;
width: 100%;
padding: .75rem 1rem;
text-align: start;
border: 0;
color: inherit;
background: var(--wrn-color-surface);
font: inherit;
font-size: .875rem;
cursor: pointer;
transition: background-color 120ms ease;
}
.wrn-list-group button + button { border-top:1px solid var(--wrn-color-border); }
.wrn-list-group button[aria-pressed="true"] { background:var(--wrn-color-primary-soft); color:var(--wrn-color-primary-text); }
.wrn-list-group button[aria-pressed="true"] {
background: color-mix(in srgb, var(--wrn-color-primary) 8%, var(--wrn-color-surface));
color: var(--wrn-color-text);
box-shadow: inset 2px 0 0 var(--wrn-color-primary);
}
.wrn-list-group button > [class*="icon-"] { width:1.1rem; height:1.1rem; flex:none; }
.wrn-list-group small { display:block; margin-top:.2rem; color:var(--wrn-color-muted); font-size:.8rem; }
.wrn-list-group__badge { margin-inline-start:auto; font-size:.75rem; }
packages/ui/components/MetricCard.wrn
+45 -53
View File
@@ -212,7 +212,6 @@ component MetricCard {
--metric-accent-muted: var(--wrn-color-primary-muted);
--metric-contrast: var(--wrn-color-primary-contrast);
--metric-border: var(--wrn-color-border);
position: relative;
isolation: isolate;
display: flex;
@@ -224,14 +223,10 @@ component MetricCard {
color: var(--wrn-color-text);
background: var(--wrn-color-surface);
border: 1px solid var(--metric-border);
border-radius: var(--wrn-radius-md);
box-shadow: none;
border-radius: var(--wrn-radius);
box-shadow: var(--wrn-shadow-1);
overflow: hidden;
transition:
transform 180ms ease,
border-color 180ms ease,
box-shadow 180ms ease,
background-color 180ms ease;
transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.wrn-metric-card[data-color="secondary"] {
@@ -286,15 +281,12 @@ component MetricCard {
.wrn-metric-card[data-variant="soft"] {
background:
linear-gradient(135deg, var(--metric-accent-soft), transparent 68%),
var(--wrn-color-surface-raised);
box-shadow: none;
}
.wrn-metric-card[data-variant="raised"] {
box-shadow:
0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
0 24px 64px color-mix(in srgb, black 16%, transparent);
box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
}
.wrn-metric-card[data-variant="outline"] {
@@ -313,10 +305,9 @@ component MetricCard {
.wrn-metric-card[data-variant="solid"] {
color: var(--metric-contrast);
background:
linear-gradient(135deg, color-mix(in srgb, white 10%, transparent), transparent 58%),
var(--metric-accent);
border-color: color-mix(in srgb, white 22%, transparent);
box-shadow: 0 20px 52px color-mix(in srgb, var(--metric-accent) 28%, transparent);
box-shadow: var(--wrn-shadow-3);
}
.wrn-metric-card[data-variant="gradient"] {
@@ -339,9 +330,9 @@ component MetricCard {
}
.wrn-metric-card[data-hover="lift"]:hover {
transform: translateY(-4px);
border-color: color-mix(in srgb, var(--metric-accent) 42%, var(--wrn-color-border));
box-shadow: 0 24px 56px color-mix(in srgb, black 16%, transparent);
transform: translateY(-2px);
border-color: var(--wrn-color-border-strong, var(--wrn-color-border));
box-shadow: var(--wrn-shadow-2);
}
.wrn-metric-card[data-hover="border"]:hover {
@@ -349,8 +340,8 @@ component MetricCard {
}
.wrn-metric-card[data-hover="glow"]:hover {
border-color: color-mix(in srgb, var(--metric-accent) 52%, var(--wrn-color-border));
box-shadow: 0 22px 58px color-mix(in srgb, var(--metric-accent) 18%, transparent);
border-color: color-mix(in srgb, var(--metric-accent) 45%, var(--wrn-color-border));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--metric-accent) 12%, transparent), var(--wrn-shadow-2);
}
.wrn-metric-card[data-align="center"] {
@@ -382,22 +373,22 @@ component MetricCard {
.wrn-metric-card__label {
margin: 0;
color: var(--wrn-color-text-muted);
font-size: 0.84rem;
font-weight: 600;
font-size: 0.8125rem;
font-weight: 550;
line-height: 1.4;
}
.wrn-metric-card__badge {
display: inline-flex;
align-items: center;
min-height: 1.45rem;
padding: 0.2rem 0.55rem;
color: var(--metric-accent);
background: var(--metric-accent-soft);
border: 1px solid color-mix(in srgb, var(--metric-accent) 24%, transparent);
min-height: 1.375rem;
padding: 0.125rem 0.5rem;
color: var(--wrn-color-primary-text, var(--metric-accent));
background: color-mix(in srgb, var(--metric-accent) 10%, var(--wrn-color-surface));
border: 1px solid color-mix(in srgb, var(--metric-accent) 22%, transparent);
border-radius: 999px;
font-size: 0.69rem;
font-weight: 700;
font-size: 0.6875rem;
font-weight: 650;
line-height: 1;
}
@@ -419,13 +410,13 @@ component MetricCard {
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 2.75rem;
height: 2.75rem;
width: 2.5rem;
height: 2.5rem;
color: var(--metric-accent);
background: var(--metric-accent-soft);
background: color-mix(in srgb, var(--metric-accent) 10%, var(--wrn-color-surface));
border: 1px solid color-mix(in srgb, var(--metric-accent) 18%, transparent);
border-radius: 0.9rem;
font-size: 1.25rem;
border-radius: var(--wrn-radius-sm);
font-size: 1.125rem;
}
.wrn-metric-card[data-icon-style="ghost"] .wrn-metric-card__icon {
@@ -469,10 +460,10 @@ component MetricCard {
.wrn-metric-card__value {
color: var(--wrn-color-text);
font-size: clamp(1.75rem, 3vw, 2rem);
font-weight: 700;
line-height: 0.98;
letter-spacing: -0.045em;
font-size: clamp(1.75rem, 3vw, 2.125rem);
font-weight: 650;
line-height: 1;
letter-spacing: -0.04em;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
@@ -491,9 +482,9 @@ component MetricCard {
.wrn-metric-card__prefix,
.wrn-metric-card__suffix {
color: var(--metric-accent);
color: var(--wrn-color-text-subtle, var(--wrn-color-text-muted));
font-size: 1rem;
font-weight: 700;
font-weight: 600;
}
.wrn-metric-card[data-variant="solid"] .wrn-metric-card__prefix,
@@ -526,9 +517,10 @@ component MetricCard {
.wrn-metric-card__progress-track {
width: 100%;
height: 0.42rem;
height: 0.375rem;
overflow: hidden;
background: color-mix(in srgb, var(--wrn-color-border) 72%, transparent);
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
box-shadow: inset 0 1px 1px rgb(0 0 0 / 0.08);
border-radius: 999px;
}
@@ -552,11 +544,13 @@ component MetricCard {
display: inline-flex;
align-items: center;
align-self: flex-start;
gap: 0.42rem;
margin-top: 1.15rem;
gap: 0.375rem;
margin-top: 1rem;
color: var(--wrn-color-text-muted);
font-size: 0.76rem;
font-size: 0.75rem;
font-weight: 600;
line-height: 1.4;
font-variant-numeric: tabular-nums;
}
.wrn-metric-card[data-align="center"] .wrn-metric-card__trend {
@@ -569,12 +563,12 @@ component MetricCard {
.wrn-metric-card__trend[data-direction="up"],
.wrn-metric-card__trend[data-direction="positive"] {
color: var(--wrn-color-success);
color: var(--wrn-color-success-text, var(--wrn-color-success));
}
.wrn-metric-card__trend[data-direction="down"],
.wrn-metric-card__trend[data-direction="negative"] {
color: var(--wrn-color-danger);
color: var(--wrn-color-danger-text, var(--wrn-color-danger));
}
.wrn-metric-card__trend-icon {
@@ -609,15 +603,13 @@ component MetricCard {
z-index: 1;
display: inline-flex;
align-items: center;
gap: 0.45rem;
color: var(--metric-accent);
font-size: 0.82rem;
font-weight: 700;
gap: 0.375rem;
color: var(--wrn-color-primary-text, var(--metric-accent));
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.3;
text-decoration: none;
transition:
color 160ms ease,
gap 160ms ease;
transition: color 160ms ease, gap 160ms ease;
}
.wrn-metric-card__action:hover {
packages/ui/components/MetricGrid.wrn
+2 -7
View File
@@ -107,8 +107,8 @@ component MetricGrid {
padding: 1.25rem;
color: var(--wrn-color-text-muted);
background: var(--wrn-color-surface-soft);
border: 1px dashed var(--wrn-color-border);
border-radius: 0.9rem;
border: 1px dashed var(--wrn-color-border-strong, var(--wrn-color-border));
border-radius: var(--wrn-radius);
text-align: center;
}
.wrn-metric-grid__frame {
@@ -187,11 +187,6 @@ component MetricGrid {
.wrn-metric-grid[data-variant="soft"] .wrn-metric-grid__surface {
background:
linear-gradient(
135deg,
color-mix(in srgb, var(--wrn-color-primary) 8%, transparent),
transparent 62%
),
var(--wrn-color-surface-raised);
}
packages/ui/components/Modal.wrn
+41 -35
View File
@@ -346,29 +346,31 @@ component Modal {
.wrn-modal__trigger {
appearance: none;
min-height: var(--wrn-control-height);
padding: 0.65rem 1rem;
padding: 0 0.95rem;
color: var(--modal-contrast);
background: var(--modal-accent);
border: 0;
background: linear-gradient(180deg, color-mix(in srgb, var(--modal-accent) 92%, white), var(--modal-accent));
border: 1px solid color-mix(in srgb, var(--modal-accent) 82%, black);
border-bottom-color: color-mix(in srgb, var(--modal-accent) 64%, black);
border-radius: var(--wrn-radius-sm);
box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--modal-accent) 30%, transparent);
font: inherit;
font-size: 0.85rem;
font-weight: 650;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
transition: opacity 150ms ease, transform 150ms ease, box-shadow 150ms ease;
transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.wrn-modal__trigger:hover {
opacity: 0.92;
background: linear-gradient(180deg, color-mix(in srgb, var(--modal-accent) 94%, white), color-mix(in srgb, var(--modal-accent) 88%, black));
}
.wrn-modal__trigger:active {
transform: scale(0.97);
transform: translateY(1px);
}
.wrn-modal__trigger:focus-visible {
outline: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--modal-accent) 40%, transparent);
outline: 2px solid color-mix(in srgb, var(--modal-accent) 80%, transparent);
outline-offset: 2px;
}
/*
@@ -420,9 +422,9 @@ component Modal {
z-index: 0;
appearance: none;
padding: 0;
background: color-mix(in srgb, black 62%, transparent);
background: rgb(10 11 14 / 0.56);
border: 0;
backdrop-filter: blur(9px);
backdrop-filter: blur(6px);
}
.wrn-modal__panel {
@@ -436,11 +438,11 @@ component Modal {
background: var(--wrn-color-surface-raised);
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-lg);
box-shadow: var(--wrn-shadow-lg);
box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
overflow: hidden;
opacity: 0;
transform: scale(0.96) translateY(10px);
transition: opacity 180ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
transform: scale(0.97) translateY(8px);
transition: opacity 180ms ease, transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.wrn-modal[data-open="true"] .wrn-modal__panel {
@@ -476,13 +478,12 @@ component Modal {
.wrn-modal[data-variant="soft"] .wrn-modal__panel {
background:
linear-gradient(145deg, var(--modal-soft), transparent 68%),
var(--wrn-color-surface-raised);
}
.wrn-modal[data-variant="outline"] .wrn-modal__panel {
background: var(--wrn-color-surface-raised);
box-shadow: 0 24px 72px color-mix(in srgb, black 24%, transparent);
box-shadow: var(--wrn-shadow-3);
}
.wrn-modal[data-variant="solid"] .wrn-modal__panel {
@@ -496,8 +497,7 @@ component Modal {
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem;
border-bottom: 1px solid var(--wrn-color-border);
padding: 1.25rem 1.25rem 0.5rem;
}
.wrn-modal__heading {
@@ -509,9 +509,9 @@ component Modal {
.wrn-modal__icon {
flex: 0 0 auto;
width: 1.3rem;
height: 1.3rem;
margin-top: 0.15rem;
width: 1.25rem;
height: 1.25rem;
margin-top: 0.125rem;
color: var(--modal-accent);
}
@@ -532,14 +532,15 @@ component Modal {
.wrn-modal__heading-copy h2 {
color: inherit;
font-size: 1.08rem;
font-size: 1.0625rem;
font-weight: 650;
line-height: 1.3;
letter-spacing: -0.015em;
line-height: 1.35;
}
.wrn-modal__heading-copy p {
color: var(--wrn-color-text-muted);
font-size: 0.8rem;
font-size: 0.8125rem;
line-height: 1.55;
}
@@ -589,7 +590,7 @@ component Modal {
.wrn-modal__close:hover {
color: var(--wrn-color-text);
background: var(--wrn-color-surface-soft);
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-soft));
}
.wrn-modal__close:focus-visible {
@@ -653,8 +654,9 @@ component Modal {
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.25rem;
padding: 0.875rem 1.25rem;
border-top: 1px solid var(--wrn-color-border);
background: var(--wrn-color-surface-soft, transparent);
}
.wrn-modal__custom-footer:empty {
@@ -676,29 +678,33 @@ component Modal {
justify-content: center;
gap: 0.5rem;
min-height: var(--wrn-control-height, 2.5rem);
padding: 0.65rem 1rem;
padding: 0 0.95rem;
border-radius: var(--wrn-radius-sm);
font: inherit;
font-size: 0.83rem;
font-weight: 650;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
transition: transform 150ms ease, opacity 150ms ease, border-color 150ms ease;
transition: transform 150ms ease, background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.wrn-modal__button:active {
transform: scale(0.985);
transform: translateY(1px);
}
.wrn-modal__button--secondary {
color: var(--wrn-color-text);
background: transparent;
background: linear-gradient(180deg, var(--wrn-color-surface), var(--wrn-color-surface-soft, var(--wrn-color-surface)));
border: 1px solid var(--wrn-color-border);
border-bottom-color: var(--wrn-color-border-strong, var(--wrn-color-border));
box-shadow: var(--wrn-shadow-1);
}
.wrn-modal__button--primary {
color: var(--modal-contrast);
background: var(--modal-accent);
border: 1px solid transparent;
background: linear-gradient(180deg, color-mix(in srgb, var(--modal-accent) 92%, white), var(--modal-accent));
border: 1px solid color-mix(in srgb, var(--modal-accent) 82%, black);
border-bottom-color: color-mix(in srgb, var(--modal-accent) 64%, black);
box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--modal-accent) 30%, transparent);
}
/*
packages/ui/components/Nav.wrn
+19 -15
View File
@@ -223,16 +223,17 @@ component Nav {
display: flex;
align-items: center;
gap: 0.45rem;
padding: 0.45rem 0.7rem;
padding: 0.4rem 0.7rem;
border-radius: var(--wrn-radius-sm);
color: var(--wrn-color-text-muted);
font-size: 0.9rem;
font-weight: 600;
font-size: 0.875rem;
font-weight: 550;
text-decoration: none;
transition: background-color 120ms ease, color 120ms ease;
}
.wrn-nav__link:hover {
background: var(--wrn-color-surface-soft);
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-soft));
color: var(--wrn-color-text);
}
@@ -242,8 +243,9 @@ component Nav {
}
.wrn-nav__link[data-active="true"] {
background: color-mix(in srgb, var(--nav-accent) 16%, transparent);
color: var(--nav-accent);
background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
color: var(--wrn-color-text);
box-shadow: 0 0 0 1px var(--wrn-color-border), var(--wrn-shadow-1);
}
.wrn-nav__link[aria-disabled="true"] {
@@ -252,11 +254,13 @@ component Nav {
}
.wrn-nav__badge {
padding: 0.05rem 0.4rem;
padding: 0.0625rem 0.4rem;
border-radius: 999px;
background: color-mix(in srgb, var(--nav-accent) 16%, transparent);
color: var(--nav-accent);
font-size: 0.72rem;
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
color: var(--wrn-color-text-muted);
font-size: 0.68rem;
font-weight: 650;
font-variant-numeric: tabular-nums;
}
.wrn-nav__arrow {
@@ -272,15 +276,15 @@ component Nav {
.wrn-nav__submenu {
position: absolute;
z-index: 30;
top: 100%;
top: calc(100% + 0.25rem);
left: 0;
min-width: 12rem;
margin: 0;
padding: 0.35rem;
padding: 0.3rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-md);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-1);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
list-style: none;
opacity: 0;
visibility: hidden;
packages/ui/components/Navbar.wrn
+77 -64
View File
@@ -284,8 +284,9 @@ size: string = "default"
z-index: 1000;
width: 100%;
color: var(--wrn-color-text);
background: color-mix(in srgb, var(--wrn-color-surface) 96%, transparent);
background: color-mix(in srgb, var(--wrn-color-surface) 88%, transparent);
border-bottom: 1px solid var(--wrn-color-border);
backdrop-filter: saturate(160%) blur(12px);
}
.wrn-navbar--sticky {
@@ -298,8 +299,8 @@ size: string = "default"
position: sticky;
z-index: 1000;
top: var(--wrn-navbar-floating-start, 0px);
box-shadow: 0 10px 30px rgb(15 23 42 / 0.08);
backdrop-filter: blur(16px);
box-shadow: var(--wrn-shadow-2);
backdrop-filter: saturate(160%) blur(12px);
}
.wrn-navbar__topbar:not(:has(> *)) {
@@ -308,25 +309,24 @@ size: string = "default"
.wrn-navbar__topbar:has(> *) {
display: flex;
min-height: 2.25rem;
min-height: 2rem;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.35rem clamp(1rem, 4vw, 3rem);
color: var(--wrn-color-muted);
background: var(--wrn-color-surface-2);
padding: 0.3rem clamp(1rem, 4vw, 3rem);
color: var(--wrn-color-text-muted);
background: var(--wrn-color-surface-soft);
border-bottom: 1px solid var(--wrn-color-border);
font-size: 0.75rem;
font-weight: 400;
}
.wrn-navbar__main {
position: relative;
display: flex;
min-height: 4.25rem;
min-height: 3.75rem;
width: min(100%, 90rem);
margin-inline: auto;
padding: 0.75rem clamp(1rem, 4vw, 3rem);
padding: 0.5rem clamp(1rem, 4vw, 3rem);
align-items: center;
gap: 1.5rem;
}
@@ -377,8 +377,8 @@ size: string = "default"
}
.wrn-navbar__brand-icon {
width: 2.5rem;
height: 2.5rem;
width: 2.25rem;
height: 2.25rem;
color: var(--wrn-component-color, var(--wrn-color-primary));
}
@@ -391,6 +391,7 @@ size: string = "default"
.wrn-navbar__brand-copy strong {
font-size: 0.9rem;
font-weight: 600;
letter-spacing: -0.015em;
}
.wrn-navbar__brand-copy small {
@@ -437,11 +438,11 @@ size: string = "default"
}
.wrn-navbar__mega .wrn-mega__trigger {
min-height: 2.75rem;
padding: 0.65rem 0.8rem;
border-radius: 0.65rem;
min-height: 2.25rem;
padding: 0.4rem 0.75rem;
border-radius: var(--wrn-radius-sm);
font-size: 0.8125rem;
font-weight: 500;
font-weight: 550;
}
.wrn-navbar__mega[data-full-width="true"] .wrn-mega__panel {
@@ -467,46 +468,40 @@ size: string = "default"
.wrn-navbar__dropdown > summary,
.wrn-navbar__action {
display: inline-flex;
min-height: 2.75rem;
padding: 0.65rem 0.8rem;
min-height: 2.25rem;
padding: 0.4rem 0.75rem;
align-items: center;
gap: 0.45rem;
border-radius: 0.65rem;
border-radius: var(--wrn-radius-sm);
cursor: pointer;
color: var(--wrn-color-text-muted);
font-size: 0.8125rem;
font-weight: 500;
white-space: nowrap;
transition: color 120ms ease, background-color 120ms ease;
}
.wrn-navbar__menu-link:hover,
.wrn-navbar__dropdown > summary:hover,
.wrn-navbar__mega .wrn-mega__trigger:hover {
color: var(--wrn-color-text);
background: var(--wrn-color-surface-2);
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
}
.wrn-navbar__menu-link[aria-current="page"],
.wrn-navbar__dropdown > summary[aria-current="page"],
.wrn-navbar__mega[data-active="true"] .wrn-mega__trigger {
color: var(--wrn-component-color, var(--wrn-color-primary));
color: var(--wrn-color-text);
font-weight: 600;
background: color-mix(
in srgb,
var(--wrn-component-color, var(--wrn-color-primary)) 12%,
transparent
);
box-shadow: inset 0 -2px 0 var(--wrn-component-color, var(--wrn-color-primary));
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
box-shadow: none;
}
.wrn-navbar__menu-link[aria-current="page"]:hover,
.wrn-navbar__dropdown > summary[aria-current="page"]:hover,
.wrn-navbar__mega[data-active="true"] .wrn-mega__trigger:hover {
color: var(--wrn-component-color, var(--wrn-color-primary));
background: color-mix(
in srgb,
var(--wrn-component-color, var(--wrn-color-primary)) 16%,
transparent
);
color: var(--wrn-color-text);
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
}
.wrn-navbar__dropdown {
@@ -537,26 +532,23 @@ size: string = "default"
.wrn-navbar__panel {
position: absolute;
z-index: 1100;
top: calc(100% + 0.55rem);
top: calc(100% + 0.5rem);
left: 50%;
display: grid;
width: max-content;
min-width: 15rem;
max-width: min(90vw, 64rem);
padding: 0.65rem;
gap: 0.45rem;
padding: 0.375rem;
gap: 0.25rem;
border: 1px solid var(--wrn-color-border);
border-radius: 0.9rem;
border-radius: var(--wrn-radius);
color: var(--wrn-color-text);
background: var(--wrn-color-surface);
box-shadow: 0 18px 48px rgb(15 23 42 / 0.16);
background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
opacity: 1;
transform: translateX(-50%) translateY(0) scale(1);
transform-origin: top center;
transition:
opacity 180ms ease,
transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
display 180ms allow-discrete;
transition: opacity 180ms ease, transform 180ms cubic-bezier(0.22, 1, 0.36, 1), display 180ms allow-discrete;
}
.wrn-navbar__panel::before {
@@ -619,10 +611,12 @@ size: string = "default"
}
.wrn-navbar__group-title {
padding: 0.55rem 0.65rem 0.25rem;
font-size: 0.7rem;
padding: 0.5rem 0.625rem 0.25rem;
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-family: var(--wrn-font-mono, monospace);
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.04em;
letter-spacing: 0.08em;
text-transform: uppercase;
}
@@ -635,17 +629,17 @@ size: string = "default"
.wrn-navbar__panel a {
display: flex;
min-height: 2.75rem;
padding: 0.65rem;
min-height: 2.5rem;
padding: 0.5rem 0.625rem;
align-items: flex-start;
gap: 0.65rem;
border-radius: var(--wrn-radius-sm, 6px);
font-size: 0.8rem;
gap: 0.625rem;
border-radius: calc(var(--wrn-radius-sm) - 2px);
font-size: 0.8125rem;
font-weight: 450;
}
.wrn-navbar__panel a:hover {
background: var(--wrn-color-surface-2);
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
}
.wrn-navbar__panel a span:last-child {
@@ -654,39 +648,58 @@ size: string = "default"
}
.wrn-navbar__panel a strong {
font-weight: 500;
font-weight: 600;
}
.wrn-navbar__panel a small {
color: var(--wrn-color-muted);
font-size: 0.7rem;
color: var(--wrn-color-text-muted);
font-size: 0.75rem;
font-weight: 400;
line-height: 1.4;
}
.wrn-navbar__action {
border: 1px solid transparent;
display: inline-flex;
min-height: 2.25rem;
padding: 0 0.875rem;
align-items: center;
gap: 0.45rem;
border-radius: var(--wrn-radius-sm);
cursor: pointer;
font-size: 0.8125rem;
font-weight: 600;
white-space: nowrap;
}
.wrn-navbar__action--primary {
color: var(--wrn-color-on-primary, #fff);
background: var(--wrn-component-color, var(--wrn-color-primary));
background: linear-gradient(180deg, color-mix(in srgb, var(--wrn-component-color, var(--wrn-color-primary)) 92%, white), var(--wrn-component-color, var(--wrn-color-primary)));
border-color: color-mix(in srgb, var(--wrn-component-color, var(--wrn-color-primary)) 82%, black) !important;
border-bottom-color: color-mix(in srgb, var(--wrn-component-color, var(--wrn-color-primary)) 64%, black) !important;
box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--wrn-component-color, var(--wrn-color-primary)) 30%, transparent);
font-weight: 600;
}
.wrn-navbar__action--outline {
color: var(--wrn-color-text);
border-color: var(--wrn-color-border);
border-bottom-color: var(--wrn-color-border-strong, var(--wrn-color-border));
background: linear-gradient(180deg, var(--wrn-color-surface), var(--wrn-color-surface-soft, var(--wrn-color-surface)));
box-shadow: var(--wrn-shadow-1);
}
.wrn-navbar__toggle {
display: none;
width: 2.75rem;
height: 2.75rem;
width: 2.5rem;
height: 2.5rem;
margin-left: auto;
padding: 0.65rem;
padding: 0.625rem;
border: 1px solid var(--wrn-color-border);
border-radius: 0.65rem;
border-radius: var(--wrn-radius-sm);
color: inherit;
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-1);
cursor: pointer;
}
.wrn-navbar__toggle span {
@@ -720,7 +733,7 @@ size: string = "default"
flex-direction: column;
background: var(--wrn-color-surface);
border-bottom: 1px solid var(--wrn-color-border);
box-shadow: 0 16px 32px rgb(15 23 42 / 0.12);
box-shadow: var(--wrn-shadow-2);
height: auto;
max-height: calc(100dvh - 3.5rem);
overflow-x: hidden;
@@ -803,7 +816,7 @@ size: string = "default"
overflow-y: auto;
background: var(--wrn-color-surface);
border-bottom: 1px solid var(--wrn-color-border);
box-shadow: 0 16px 32px rgb(15 23 42 / 0.12);
box-shadow: var(--wrn-shadow-2);
}
.wrn-navbar[data-collapse-at="1100px"] .wrn-navbar__collapse.is-open { display: flex; }
.wrn-navbar[data-collapse-at="1100px"] .wrn-navbar__menus,
@@ -906,7 +919,7 @@ size: string = "default"
.wrn-component p {
margin: 0;
color: var(--wrn-color-muted);
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
line-height: 1.6;
}
}
packages/ui/components/PageHeader.wrn
-1
View File
@@ -322,7 +322,6 @@ current: true
.wrn-page-header[data-variant="tinted"] {
background:
linear-gradient(135deg, var(--page-header-soft), transparent 72%),
var(--wrn-color-background);
}
packages/ui/components/Pagination.wrn
+30 -14
View File
@@ -250,13 +250,14 @@ component Pagination {
.wrn-pagination__summary {
margin: 0;
color: var(--wrn-color-text-muted);
font-size: 0.82rem;
font-size: 0.8125rem;
font-variant-numeric: tabular-nums;
}
.wrn-pagination__controls {
display: flex;
align-items: center;
gap: 0.35rem;
gap: 0.25rem;
flex-wrap: wrap;
}
@@ -266,7 +267,7 @@ component Pagination {
min-width: 0;
max-width: 100%;
align-items: center;
gap: 0.25rem;
gap: 0.125rem;
margin: 0;
padding: 0;
list-style: none;
@@ -281,23 +282,28 @@ component Pagination {
appearance: none;
display: inline-flex;
align-items: center;
gap: 0.35rem;
min-width: 2.25rem;
gap: 0.3rem;
min-width: 2.125rem;
min-height: 2.125rem;
justify-content: center;
padding: 0.4rem 0.6rem;
border: 1px solid var(--wrn-color-border);
padding: 0 0.55rem;
border: 1px solid transparent;
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
color: var(--wrn-color-text);
background: transparent;
color: var(--wrn-color-text-muted);
font: inherit;
font-size: 0.85rem;
font-size: 0.8125rem;
font-weight: 550;
font-variant-numeric: tabular-nums;
cursor: pointer;
text-decoration: none;
transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.wrn-pagination__page:hover,
.wrn-pagination__step:hover {
background: var(--wrn-color-surface-soft);
color: var(--wrn-color-text);
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-soft));
}
/* The href variant renders anchors, which cannot be disabled the way a
@@ -317,10 +323,12 @@ component Pagination {
}
.wrn-pagination__page[data-active="true"] {
border-color: var(--pagination-accent);
background: var(--pagination-accent);
border-color: color-mix(in srgb, var(--pagination-accent) 82%, black);
border-bottom-color: color-mix(in srgb, var(--pagination-accent) 64%, black);
background: linear-gradient(180deg, color-mix(in srgb, var(--pagination-accent) 92%, white), var(--pagination-accent));
box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--pagination-accent) 30%, transparent);
color: var(--wrn-color-primary-contrast);
font-weight: 700;
font-weight: 650;
}
.wrn-pagination__gap {
@@ -350,5 +358,13 @@ component Pagination {
text-align: center;
}
}
.wrn-pagination__step {
color: var(--wrn-color-text);
border-color: var(--wrn-color-border);
border-bottom-color: var(--wrn-color-border-strong, var(--wrn-color-border));
background: linear-gradient(180deg, var(--wrn-color-surface), var(--wrn-color-surface-soft, var(--wrn-color-surface)));
box-shadow: var(--wrn-shadow-1);
}
}
}
packages/ui/components/PinInput.wrn
+22 -23
View File
@@ -140,21 +140,21 @@ component PinInput {
.wrn-next__pin-heading legend {
padding: 0;
font-size: 0.82em;
font-weight: 700;
font-size: 0.8125rem;
font-weight: 600;
}
.wrn-next__pin-clear {
display: inline-flex;
align-items: center;
gap: 0.35rem;
gap: 0.3rem;
padding: 0;
border: 0;
color: var(--wrn-component-color);
color: var(--wrn-color-text-muted);
background: transparent;
font: inherit;
font-size: 0.7em;
font-weight: 750;
font-size: 0.75rem;
font-weight: 550;
cursor: pointer;
}
@@ -177,24 +177,23 @@ component PinInput {
}
.wrn-next--pin-input .wrn-next__pin-cells input {
flex: 0 1 2.5rem;
width: 2.5rem;
height: var(--wrn-control-height, 2.5rem);
flex: 0 1 2.75rem;
width: 2.75rem;
height: 3rem;
min-width: 0;
padding: 0;
border: 1px solid var(--wrn-color-border);
border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
color: var(--wrn-color-text);
background: var(--wrn-color-bg);
background: var(--wrn-color-input-background, var(--wrn-color-surface));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.05);
font: inherit;
font-size: 1rem;
font-family: var(--wrn-font-mono, monospace);
font-size: 1.125rem;
font-weight: 600;
text-align: center;
caret-color: var(--wrn-component-color);
transition:
border-color var(--wrn-motion-base) var(--wrn-ease-standard),
box-shadow var(--wrn-motion-base) var(--wrn-ease-standard),
transform var(--wrn-motion-fast) var(--wrn-ease-standard);
transition: border-color var(--wrn-motion-base) var(--wrn-ease-standard), box-shadow var(--wrn-motion-base) var(--wrn-ease-standard);
}
.wrn-next--pin-input .wrn-next__pin-cells input::placeholder {
@@ -206,7 +205,7 @@ component PinInput {
border-color: var(--wrn-component-color);
outline: 0;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-component-color) 18%, transparent);
transform: translateY(-1px);
transform: none;
}
.wrn-next--pin-input .wrn-next__pin-cells input:disabled,
@@ -216,14 +215,14 @@ component PinInput {
}
.wrn-next__pin-separator {
color: var(--wrn-color-muted);
font-size: 1.1rem;
font-weight: 800;
color: var(--wrn-color-border-strong, var(--wrn-color-muted));
font-size: 1rem;
font-weight: 600;
}
.wrn-next--pin-input[data-complete="true"] .wrn-next__pin-cells input {
border-color: color-mix(in srgb, var(--wrn-component-color) 72%, var(--wrn-color-border));
background: color-mix(in srgb, var(--wrn-component-color) 7%, var(--wrn-color-bg));
border-color: color-mix(in srgb, var(--wrn-color-success) 60%, var(--wrn-color-border));
background: color-mix(in srgb, var(--wrn-color-success) 6%, var(--wrn-color-input-background, var(--wrn-color-surface)));
}
@media (max-width: 480px) {
@@ -303,7 +302,7 @@ component PinInput {
.wrn-component p {
margin: 0;
color: var(--wrn-color-muted);
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
line-height: 1.6;
}
}
packages/ui/components/Popover.wrn
+44 -44
View File
@@ -247,26 +247,28 @@ component Popover {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
gap: 0.5rem;
min-height: var(--wrn-control-height, 2.5rem);
padding: 0.65rem 0.9rem;
padding: 0 0.875rem;
color: var(--wrn-color-text);
background: var(--wrn-color-surface-raised);
background: linear-gradient(180deg, var(--wrn-color-surface), var(--wrn-color-surface-soft, var(--wrn-color-surface)));
border: 1px solid var(--wrn-color-border);
border-bottom-color: var(--wrn-color-border-strong, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
box-shadow: var(--wrn-shadow-1);
font: inherit;
font-size: 0.84rem;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease, transform 150ms ease;
}
.wrn-popover__trigger:hover,
.wrn-popover__trigger:focus-visible,
.wrn-popover[data-open="true"] .wrn-popover__trigger {
color: var(--popover-accent);
background: var(--popover-soft);
border-color: color-mix(in srgb, var(--popover-accent) 38%, var(--wrn-color-border));
color: var(--wrn-color-text);
background: var(--wrn-color-surface);
border-color: var(--wrn-color-border-strong, var(--wrn-color-border));
outline: none;
}
@@ -300,20 +302,15 @@ component Popover {
.wrn-popover__panel {
position: absolute;
z-index: 1121;
top: calc(100% + 0.72rem);
top: calc(100% + 0.5rem);
left: 0;
width: 18rem;
max-width: calc(100vw - 1.5rem);
color: var(--wrn-color-text);
background:
linear-gradient(145deg, color-mix(in srgb, var(--popover-accent) 5%, transparent), transparent 62%),
color-mix(in srgb, var(--wrn-color-surface-raised) 97%, transparent);
border: 1px solid color-mix(in srgb, var(--popover-accent) 18%, var(--wrn-color-border));
border-radius: var(--wrn-radius-md);
box-shadow:
0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
0 24px 64px color-mix(in srgb, black 22%, transparent);
backdrop-filter: blur(18px);
background: var(--wrn-color-surface-raised);
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius);
box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
}
.wrn-popover[data-width="sm"] .wrn-popover__panel {
@@ -364,10 +361,8 @@ component Popover {
}
.wrn-popover[data-variant="soft"] .wrn-popover__panel {
background:
linear-gradient(145deg, var(--popover-soft), transparent 70%),
var(--wrn-color-surface-raised);
box-shadow: 0 18px 48px color-mix(in srgb, black 16%, transparent);
background: color-mix(in srgb, var(--popover-accent) 4%, var(--wrn-color-surface-raised));
box-shadow: var(--wrn-shadow-3);
}
.wrn-popover[data-variant="outline"] .wrn-popover__panel {
@@ -383,13 +378,13 @@ component Popover {
.wrn-popover__arrow {
position: absolute;
top: -0.35rem;
top: -0.3125rem;
left: 1.25rem;
width: 0.7rem;
height: 0.7rem;
width: 0.625rem;
height: 0.625rem;
background: inherit;
border-top: 1px solid color-mix(in srgb, var(--popover-accent) 18%, var(--wrn-color-border));
border-left: 1px solid color-mix(in srgb, var(--popover-accent) 18%, var(--wrn-color-border));
border-top: 1px solid var(--wrn-color-border);
border-left: 1px solid var(--wrn-color-border);
transform: rotate(45deg);
}
@@ -422,9 +417,8 @@ component Popover {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.8rem;
padding: 1rem 1rem 0.8rem;
border-bottom: 1px solid var(--wrn-color-border);
gap: 0.75rem;
padding: 0.875rem 0.875rem 0.625rem;
}
.wrn-popover__heading {
@@ -458,13 +452,14 @@ component Popover {
}
.wrn-popover__heading-copy h3 {
font-size: 0.9rem;
font-weight: 650;
font-size: 0.875rem;
font-weight: 620;
letter-spacing: -0.01em;
}
.wrn-popover__heading-copy p {
color: var(--wrn-color-text-muted);
font-size: 0.74rem;
font-size: 0.78rem;
line-height: 1.5;
}
@@ -494,14 +489,17 @@ component Popover {
}
.wrn-popover__body {
padding: 1rem;
padding: 0 0.875rem 0.875rem;
color: var(--wrn-color-text-muted);
font-size: 0.8rem;
font-size: 0.8125rem;
line-height: 1.6;
}
.wrn-popover__footer {
padding: 0 1rem 1rem;
padding: 0.75rem 0.875rem;
border-top: 1px solid var(--wrn-color-border);
background: var(--wrn-color-surface-soft, transparent);
border-radius: 0 0 var(--wrn-radius) var(--wrn-radius);
}
.wrn-popover__action {
@@ -509,16 +507,18 @@ component Popover {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
min-height: 2.35rem;
padding: 0.58rem 0.8rem;
gap: 0.4rem;
min-height: 2rem;
padding: 0 0.75rem;
color: var(--popover-contrast);
background: var(--popover-accent);
border: 0;
border-radius: 0.7rem;
background: linear-gradient(180deg, color-mix(in srgb, var(--popover-accent) 92%, white), var(--popover-accent));
border: 1px solid color-mix(in srgb, var(--popover-accent) 82%, black);
border-bottom-color: color-mix(in srgb, var(--popover-accent) 64%, black);
border-radius: var(--wrn-radius-sm);
box-shadow: var(--wrn-highlight-edge, none);
font: inherit;
font-size: 0.78rem;
font-weight: 650;
font-size: 0.8125rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
}
packages/ui/components/PortalDashboard.wrn
+1 -1
View File
@@ -441,7 +441,7 @@ component PortalDashboard {
.wrn-component p {
margin: 0;
color: var(--wrn-color-muted);
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
line-height: 1.6;
}
}
packages/ui/components/PreferenceSwitcher.wrn
+1 -1
View File
@@ -336,7 +336,7 @@ size: string = "default"
.wrn-component p {
margin: 0;
color: var(--wrn-color-muted);
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
line-height: 1.6;
}
}
packages/ui/components/RangeSlider.wrn
+122 -68
View File
@@ -85,7 +85,7 @@ component RangeSlider {
<div class="wrn-next__field-heading"><label class="{hiddenLabel ? 'wrn-next__sr-only' : ''}" for="{id || name}">{label}</label>{#if cornerHint}<span class="wrn-next__field-hint">{cornerHint}</span>{/if}</div>
<div class="wrn-next__range-control" data-variant="{variant}" data-icon-position="{iconPosition}" data-show-steps="{showSteps}">
{#if icon}<span class="{icon}" aria-hidden="true"></span>{/if}
<button type="button" class="wrn-next__range-stepper" aria-label="Decrease {label}" disabled="{disabled || readonly}" @click="decreaseValue(event)">−</button>
<button type="button" class="wrn-next__range-stepper" aria-label="Decrease {label}" disabled="{disabled || readonly}" @click="decreaseValue(event)"><svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="M3.5 8h9"></path></svg></button>
<div class="wrn-next__range-track">
<input id="{id || name}" class="wrn-next__sr-only wrn-next__range-value" type="number" name="{name}" value="{currentValue}" min="{min}" max="{max}" step="{step}" required="{required}" readonly />
<div class="wrn-next__custom-slider" role="slider" tabindex="{disabled ? '-1' : '0'}" aria-label="{hiddenLabel ? label : ''}" aria-valuemin="{min}" aria-valuemax="{max}" aria-valuenow="{currentValue}" aria-disabled="{disabled}" aria-readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" style="--wrn-range-progress: {percent()}%" @pointerdown="beginSlide(event)" @pointermove="moveSlide(event)" @pointerup="endSlide(event)" @pointercancel="endSlide(event)" @keydown="handleKey(event)" @focus="emitFocus('focus', event)" @blur="emitFocus('blur', event)">
@@ -95,7 +95,7 @@ component RangeSlider {
{#if showBounds}<div class="wrn-next__range-bounds"><span>{min}</span><span>Step {step}</span><span>{max}</span></div>{/if}
</div>
{#if showValue}<output for="{id || name}">{currentValue}</output>{/if}
<button type="button" class="wrn-next__range-stepper" aria-label="Increase {label}" disabled="{disabled || readonly}" @click="increaseValue(event)">+</button>
<button type="button" class="wrn-next__range-stepper" aria-label="Increase {label}" disabled="{disabled || readonly}" @click="increaseValue(event)"><svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="M3.5 8h9"></path><path d="M8 3.5v9"></path></svg></button>
</div>
{#if helperText}<small class="wrn-next__field-help">{helperText}</small>{/if}<small class="wrn-next__field-error" data-error="{name}">{error}</small>
</div>
@@ -132,7 +132,7 @@ component RangeSlider {
.wrn-next__slider-fill {
position: absolute;
top: 50%;
height: 0.4rem;
height: 0.375rem;
border-radius: 999px;
transform: translateY(-50%);
content: "";
@@ -141,15 +141,16 @@ component RangeSlider {
.wrn-next__custom-slider::before {
right: 0;
left: 0;
background: var(--wrn-color-surface-2);
box-shadow: inset 0 0 0 1px var(--wrn-color-border);
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.12);
}
.wrn-next__slider-fill {
z-index: 1;
left: 0;
width: var(--wrn-range-progress);
background: var(--wrn-field-color);
background: linear-gradient(180deg, color-mix(in srgb, var(--wrn-field-color) 88%, white), var(--wrn-field-color));
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25);
}
.wrn-next__slider-thumb {
@@ -157,13 +158,14 @@ component RangeSlider {
z-index: 3;
top: 50%;
left: var(--wrn-range-progress);
width: 1.25rem;
height: 1.25rem;
border: 3px solid var(--wrn-field-color);
width: 1.125rem;
height: 1.125rem;
border: 1px solid rgb(0 0 0 / 0.12);
border-radius: 50%;
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-1);
background: #fff;
box-shadow: 0 1px 3px rgb(0 0 0 / 0.25), 0 0 0 3px color-mix(in srgb, var(--wrn-field-color) 22%, transparent);
transform: translate(-50%, -50%);
transition: box-shadow 120ms ease;
}
.wrn-next__custom-slider:focus-visible {
@@ -197,8 +199,9 @@ component RangeSlider {
.wrn-next__range-bounds {
display: grid;
grid-template-columns: 1fr auto 1fr;
color: var(--wrn-color-muted);
font-size: 0.78em;
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-family: var(--wrn-font-mono, monospace);
font-size: 0.7em;
font-variant-numeric: tabular-nums;
}
@@ -212,27 +215,35 @@ component RangeSlider {
.wrn-next__range-control output {
min-width: 3ch;
font-family: var(--wrn-font-mono, monospace);
font-size: 0.8125rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.wrn-next__range-stepper {
display: inline-grid;
width: 2.35rem;
height: 2.35rem;
width: 2rem;
height: 2rem;
flex: 0 0 auto;
place-items: center;
border: 1px solid var(--wrn-color-border);
border-radius: 50%;
background: var(--wrn-color-surface);
border-bottom-color: var(--wrn-color-border-strong, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
background: linear-gradient(180deg, var(--wrn-color-surface), var(--wrn-color-surface-soft, var(--wrn-color-surface)));
box-shadow: var(--wrn-shadow-1);
color: var(--wrn-color-text);
font: inherit;
font-size: 1.2rem;
font-size: 1rem;
cursor: pointer;
}
.wrn-next__range-stepper > svg { display: block; }
.wrn-next__range-stepper:hover:not(:disabled) {
border-color: var(--wrn-field-color);
color: var(--wrn-field-color);
border-color: var(--wrn-color-border-strong, var(--wrn-color-border));
color: var(--wrn-color-text);
background: var(--wrn-color-surface);
}
.wrn-next__range-stepper:disabled {
@@ -305,7 +316,7 @@ component RangeSlider {
.wrn-component p {
margin: 0;
color: var(--wrn-color-muted);
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
line-height: 1.6;
}
@@ -320,8 +331,9 @@ component RangeSlider {
display: block;
min-height: 1em;
margin-top: 0.25rem;
color: var(--wrn-color-danger);
font-size: 0.8rem;
color: var(--wrn-color-danger-text, var(--wrn-color-danger));
font-size: 0.78rem;
font-weight: 550;
}
.wrn-next--choice {
@@ -348,13 +360,14 @@ component RangeSlider {
width: 100%;
min-height: var(--wrn-control-height, 2.5rem);
padding: 0.5rem 0.75rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm, 6px);
border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm, 8px);
outline: 0;
color: var(--wrn-color-text);
background: var(--wrn-color-bg);
background: var(--wrn-color-input-background, var(--wrn-color-surface));
font: inherit;
font-weight: 500;
transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
}
.wrn-auth-form form > .wrn-next--field,
.wrn-auth-form form > .wrn-field {
@@ -368,8 +381,8 @@ component RangeSlider {
box-shadow: none;
}
.wrn-next--field :where(input, textarea, select):focus-visible {
border-color: var(--wrn-color-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
border-color: var(--wrn-field-color, var(--wrn-color-primary));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04), 0 0 0 3px color-mix(in srgb, var(--wrn-field-color, var(--wrn-color-primary)) 18%, transparent);
}
.wrn-next--field textarea {
resize: vertical;
@@ -403,12 +416,14 @@ component RangeSlider {
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.35;
letter-spacing: -0.005em;
}
.wrn-next__field-hint,
.wrn-next__field-help {
color: var(--wrn-color-muted);
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-size: 0.75rem;
font-weight: 500;
font-weight: 450;
line-height: 1.45;
}
.wrn-next__field-control {
position: relative;
@@ -416,10 +431,11 @@ component RangeSlider {
}
.wrn-next__field-control > :is(input, textarea, select) {
padding-inline: 0.85rem;
border-color: var(--wrn-color-border);
border-color: var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
font-size: 0.8125rem;
background: var(--wrn-color-input-background, var(--wrn-color-surface));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
font-size: 0.875rem;
}
.wrn-next__field-control[data-has-icon="true"][data-icon-position="start"] > :is(input, textarea, select) {
padding-inline-start: 2.5rem;
@@ -460,7 +476,8 @@ component RangeSlider {
}
.wrn-next--field[data-variant="ghost"] .wrn-next__field-control > :is(input, textarea, select) {
border-color: transparent;
background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
box-shadow: none;
}
.wrn-next__field-floating-label {
position: absolute;
@@ -501,9 +518,9 @@ component RangeSlider {
}
.wrn-next__field-error {
min-height: 1em;
color: var(--wrn-color-danger);
font-size: 0.82em;
font-weight: 600;
color: var(--wrn-color-danger-text, var(--wrn-color-danger));
font-size: 0.78rem;
font-weight: 550;
}
.wrn-next__field-error:empty {
display: none;
@@ -511,14 +528,16 @@ component RangeSlider {
.wrn-next--field[data-invalid="true"] :is(input, textarea, select),
.wrn-next--choice-field[data-invalid="true"] input {
border-color: var(--wrn-color-danger);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-danger) 12%, transparent);
}
.wrn-next--field :is(input, textarea, select):disabled,
.wrn-next--choice-field input:disabled {
cursor: not-allowed;
opacity: 0.58;
opacity: 0.55;
background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
}
.wrn-next--field :is(input, textarea, select):read-only {
background: var(--wrn-color-surface-2);
background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
}
.wrn-next--field[data-inline="true"],
.wrn-next--choice-field[data-inline="true"] {
@@ -575,11 +594,13 @@ component RangeSlider {
display: flex;
min-width: 0;
align-items: center;
gap: 0.65rem;
gap: 0.625rem;
color: var(--wrn-color-text);
width: 100%;
font-size: 0.75rem;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.4;
cursor: pointer;
}
.wrn-next__checkbox-content > .wrn-next__choice {
width: 100%;
@@ -594,12 +615,13 @@ component RangeSlider {
.wrn-next__choice-copy {
display: grid;
min-width: 0;
gap: 0.15rem;
line-height: 1.35;
gap: 0.125rem;
line-height: 1.4;
}
.wrn-next__choice-copy small {
color: var(--wrn-color-muted);
font-weight: 500;
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-size: 0.78rem;
font-weight: 450;
}
.wrn-next__radio-group,
.wrn-next__checkbox-group {
@@ -619,15 +641,18 @@ component RangeSlider {
.wrn-next--radio-field[data-card="true"] .wrn-next--radio,
.wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox {
min-height: 4.5rem;
padding: 0.85rem;
padding: 0.9rem 1rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-1);
transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
}
.wrn-next--radio-field[data-card="true"] .wrn-next--radio:has(input:checked),
.wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox:has(input:checked) {
border-color: var(--wrn-field-color);
box-shadow: 0 0 0 1px var(--wrn-field-color);
background: color-mix(in srgb, var(--wrn-field-color) 5%, var(--wrn-color-surface));
box-shadow: 0 0 0 1px var(--wrn-field-color), var(--wrn-shadow-1);
}
.wrn-next--radio-field[data-list="true"] .wrn-next--radio,
.wrn-next--checkbox-field[data-list="true"] .wrn-next--checkbox {
@@ -648,19 +673,21 @@ component RangeSlider {
}
.wrn-next__choice[data-variant="outlined"],
.wrn-next__choice[data-variant="floating"] {
padding: 0.65rem 0.8rem;
padding: 0.7rem 0.85rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
}
.wrn-next__choice[data-variant="pill"] {
padding: 0.65rem 1rem;
padding: 0.6rem 1rem;
border: 1px solid color-mix(in srgb, var(--wrn-field-color) 22%, var(--wrn-color-border));
border-radius: 999px;
background: color-mix(in srgb, var(--wrn-field-color) 9%, var(--wrn-color-surface));
background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface));
}
.wrn-next__choice[data-variant="ghost"] {
padding: 0.65rem 0.8rem;
padding: 0.65rem 0.85rem;
border-radius: var(--wrn-radius-sm);
background: color-mix(in srgb, var(--wrn-field-color) 7%, transparent);
background: color-mix(in srgb, var(--wrn-field-color) 6%, transparent);
}
.wrn-next__choice[data-variant="underline"] {
padding-block: 0.5rem;
@@ -694,25 +721,35 @@ component RangeSlider {
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.7rem 0.85rem;
border: 1px solid var(--wrn-color-border);
padding: 0.55rem 0.85rem;
border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
background: var(--wrn-color-input-background, var(--wrn-color-surface));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
color: var(--wrn-color-text);
font: inherit;
font-size: 0.875rem;
font-variant-numeric: tabular-nums;
text-align: left;
cursor: pointer;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.wrn-next__calendar,
.wrn-next__time-panel {
z-index: 20;
position: absolute;
z-index: 40;
top: 100%;
left: 0;
display: grid;
width: min(100%, 22rem);
width: min(calc(100vw - 2rem), 19.5rem);
gap: 0.75rem;
padding: 0.85rem;
margin-top: 0.375rem;
padding: 0.75rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-md);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-3);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
animation: wrn-popover-enter var(--wrn-motion-base, 160ms) var(--wrn-ease-emphasized, ease) both;
}
.wrn-next--date-picker[data-expanded="false"] .wrn-next__calendar,
.wrn-next--time-picker[data-expanded="false"] .wrn-next__time-panel {
@@ -722,29 +759,42 @@ component RangeSlider {
.wrn-next__time-panel button {
min-height: 2.25rem;
border: 0;
border-radius: var(--wrn-radius-sm);
border-radius: calc(var(--wrn-radius-sm) - 2px);
background: transparent;
color: inherit;
font: inherit;
font-size: 0.8125rem;
font-variant-numeric: tabular-nums;
cursor: pointer;
transition: background-color 120ms ease, color 120ms ease;
}
.wrn-next__calendar-weekdays,
.wrn-next__calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0.2rem;
gap: 0.125rem;
text-align: center;
}
.wrn-next__calendar-weekdays {
color: var(--wrn-color-muted);
font-size: 0.75rem;
padding-bottom: 0.375rem;
border-bottom: 1px solid var(--wrn-color-border);
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-family: var(--wrn-font-mono, monospace);
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.wrn-next__calendar-grid button:hover,
.wrn-next__time-panel button:hover {
background: var(--wrn-color-surface-2);
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
}
.wrn-next__calendar-grid button[aria-pressed="true"],
.wrn-next__time-panel button[aria-pressed="true"] {
background: var(--wrn-field-color);
color: var(--wrn-color-primary-contrast, #fff);
box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--wrn-field-color) 35%, transparent);
font-weight: 650;
}
.wrn-next__time-period {
display: flex;
@@ -778,7 +828,7 @@ component RangeSlider {
.wrn-next--field[data-variant="ghost"]
:is(.wrn-next__input-group-control, .wrn-next__file-control, .wrn-next__color-control) {
border-color: transparent;
background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
}
@media (max-width: 640px) {
.wrn-next--field[data-inline="true"],
@@ -800,5 +850,9 @@ component RangeSlider {
.wrn-next--strong-password input.wrn-invalid {
border-color: var(--wrn-color-danger);
}
.wrn-next__custom-slider:hover .wrn-next__slider-thumb {
box-shadow: 0 1px 3px rgb(0 0 0 / 0.25), 0 0 0 5px color-mix(in srgb, var(--wrn-field-color) 22%, transparent);
}
}
}
packages/ui/components/Rating.wrn
+23 -3
View File
@@ -49,12 +49,32 @@ component Rating {
.wrn-rating { display:grid; gap:.6rem; color:var(--wrn-color-text); }
.wrn-rating p { margin:0; color:var(--wrn-color-muted); font-size:.875rem; }
.wrn-rating__stars { display:flex; align-items:center; gap:.25rem; }
.wrn-rating button { display:grid; place-items:center; width:2rem; height:2rem; padding:.2rem; border:0; background:transparent; color:var(--wrn-color-muted); cursor:pointer; }
.wrn-rating button {
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
padding: .2rem;
border: 0;
border-radius: calc(var(--wrn-radius-sm) - 2px);
background: transparent;
color: var(--wrn-color-border-strong, var(--wrn-color-muted));
cursor: pointer;
transition: color 120ms ease, transform 120ms ease;
}
.wrn-rating svg { width:1.5rem; height:1.5rem; fill:none; stroke:currentColor; stroke-width:1.5; }
.wrn-rating button[data-filled="true"] { color:var(--wrn-color-warning-text); }
.wrn-rating button[data-filled="true"] {
color: var(--wrn-color-warning);
}
.wrn-rating svg { grid-area:1 / 1; }
.wrn-rating .wrn-rating__fill { fill:currentColor; clip-path:inset(0 calc(100% - var(--fill)) 0 0); }
.wrn-rating output { margin-inline-start:.5rem; font-size:.8rem; color:var(--wrn-color-muted); }
.wrn-rating output {
margin-inline-start: .5rem;
font-family: var(--wrn-font-mono, monospace);
font-size: .75rem;
font-variant-numeric: tabular-nums;
color: var(--wrn-color-muted);
}
.wrn-rating button:focus-visible { outline:2px solid var(--wrn-color-focus); outline-offset:2px; border-radius:4px; }
}
}
packages/ui/components/Scrollspy.wrn
+5 -4
View File
@@ -112,9 +112,10 @@ component Scrollspy {
.wrn-scrollspy__heading {
margin: 0 0 0.5rem;
color: var(--wrn-color-text-muted);
font-size: 0.72rem;
font-weight: 700;
color: var(--wrn-color-text-subtle, var(--wrn-color-text-muted));
font-family: var(--wrn-font-mono, monospace);
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
@@ -149,7 +150,7 @@ component Scrollspy {
.wrn-scrollspy__link[data-active="true"] {
border-left-color: var(--scrollspy-accent);
color: var(--scrollspy-accent);
color: var(--wrn-color-text);
font-weight: 600;
}
packages/ui/components/SearchBox.wrn
+29 -12
View File
@@ -86,9 +86,9 @@ component SearchBox {
.wrn-search-box { width: 100%; }
.wrn-search-box__label {
display: block;
margin-bottom: 0.5rem;
margin-bottom: 0.4rem;
color: var(--wrn-color-text);
font-size: 0.875rem;
font-size: 0.8125rem;
font-weight: 600;
}
.wrn-search-box__label[data-hidden="true"] {
@@ -105,22 +105,25 @@ component SearchBox {
.wrn-search-box__control { position: relative; display: flex; align-items: center; }
.wrn-search-box__search-icon {
position: absolute;
left: 1rem;
width: 1.25rem;
height: 1.25rem;
left: 0.875rem;
width: 1.125rem;
height: 1.125rem;
color: var(--wrn-color-input-placeholder);
pointer-events: none;
}
.wrn-search-box__input {
width: 100%;
height: 3rem;
padding: 0 6rem 0 3rem;
height: 2.75rem;
padding: 0 5.5rem 0 2.5rem;
border: 1px solid var(--wrn-color-input-border);
border-radius: var(--wrn-radius);
border-radius: var(--wrn-radius-sm);
outline: none;
color: var(--wrn-color-input-text);
background: var(--wrn-color-input-background);
transition: border-color var(--wrn-motion-base) var(--wrn-ease-standard), box-shadow var(--wrn-motion-base) var(--wrn-ease-standard);
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
font: inherit;
font-size: 0.875rem;
transition: border-color var(--wrn-motion-base), box-shadow var(--wrn-motion-base);
}
.wrn-search-box__input[data-size="sm"] { height: 2.5rem; }
.wrn-search-box__input[data-size="lg"] { height: 3.5rem; }
@@ -128,7 +131,7 @@ component SearchBox {
.wrn-search-box__input:hover { border-color: var(--wrn-color-input-border-hover); }
.wrn-search-box__input:focus {
border-color: var(--wrn-color-input-border-focus);
box-shadow: 0 0 0 2px var(--wrn-color-focus);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-focus) 18%, transparent);
}
.wrn-search-box__input:disabled, .wrn-search-box__button:disabled { cursor: not-allowed; opacity: 0.6; }
.wrn-search-box__button {
@@ -141,9 +144,23 @@ component SearchBox {
border-radius: var(--wrn-radius-sm);
transition: color var(--wrn-motion-base), background var(--wrn-motion-base);
}
.wrn-search-box__clear { right: 3rem; width: 2rem; height: 2rem; color: var(--wrn-color-text-muted); background: transparent; }
.wrn-search-box__clear {
right: 2.75rem;
width: 1.75rem;
height: 1.75rem;
color: var(--wrn-color-text-muted);
background: transparent;
}
.wrn-search-box__clear:hover { color: var(--wrn-color-text); background: var(--wrn-color-surface-soft); }
.wrn-search-box__submit { right: 0.5rem; width: 2.25rem; height: 2.25rem; color: var(--wrn-color-on-primary); background: var(--wrn-color-primary); }
.wrn-search-box__submit {
right: 0.375rem;
width: 2rem;
height: 2rem;
color: var(--wrn-color-on-primary);
background: linear-gradient(180deg, color-mix(in srgb, var(--wrn-color-primary) 92%, white), var(--wrn-color-primary));
border: 1px solid color-mix(in srgb, var(--wrn-color-primary) 82%, black) !important;
box-shadow: var(--wrn-highlight-edge, none);
}
.wrn-search-box__submit:hover { background: var(--wrn-color-primary-hover); }
.wrn-search-box__button:focus-visible { outline: 2px solid var(--wrn-color-focus); outline-offset: 2px; }
.wrn-search-box__button-icon { width: 1rem; height: 1rem; }
packages/ui/components/Section.wrn
+70
View File
@@ -112,6 +112,76 @@ component Section {
--section-ink: var(--wrn-color-on-danger);
}
.wrn-section[data-variant="solid"][data-color="secondary"] {
--section-tint: var(--wrn-color-secondary);
--section-ink: var(--wrn-color-on-secondary, #fff);
}
.wrn-section[data-variant="solid"][data-color="success"] {
--section-tint: var(--wrn-color-success);
--section-ink: #fff;
}
.wrn-section[data-variant="solid"][data-color="info"] {
--section-tint: var(--wrn-color-info);
--section-ink: #fff;
}
.wrn-section[data-variant="solid"][data-color="warning"] {
--section-tint: var(--wrn-color-warning);
--section-ink: #fff;
}
.wrn-section[data-spacing="none"] {
padding-block: 0;
}
/* Soft and raised read as bands: hairlines mark where they start and end. */
.wrn-section[data-variant="soft"],
.wrn-section[data-variant="tinted"] {
box-shadow:
inset 0 1px 0 color-mix(in srgb, var(--wrn-color-border) 70%, transparent),
inset 0 -1px 0 color-mix(in srgb, var(--wrn-color-border) 70%, transparent);
}
.wrn-section[data-variant="raised"] {
box-shadow:
inset 0 1px 0 var(--wrn-color-border),
inset 0 -1px 0 var(--wrn-color-border),
0 12px 32px -20px rgb(0 0 0 / 0.25);
}
/* Solid bands carry a faint dot texture so large fills do not look flat. */
.wrn-section[data-variant="solid"] {
background:
radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.12) 1px, transparent 0) 0 0 / 20px 20px,
var(--section-tint);
}
/* Panel: the section becomes a framed, rounded band inside the page gutter. */
.wrn-section[data-variant="panel"] {
--section-tint: var(--wrn-color-surface);
width: auto;
margin-inline: clamp(0.75rem, 3vw, 2rem);
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-lg, 1rem);
box-shadow: var(--wrn-shadow-1);
}
/* Grid: a blueprint backdrop that fades out toward the edges. */
.wrn-section[data-variant="grid"]::before {
position: absolute;
z-index: -1;
inset: 0;
background:
linear-gradient(var(--wrn-color-border) 1px, transparent 1px) 0 0 / 32px 32px,
linear-gradient(90deg, var(--wrn-color-border) 1px, transparent 1px) 0 0 / 32px 32px;
content: "";
-webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 85%);
mask-image: radial-gradient(ellipse at center, #000 40%, transparent 85%);
pointer-events: none;
}
.wrn-section[data-border-top="true"] {
border-top: 1px solid var(--wrn-color-border);
}
packages/ui/components/Sidebar.wrn
+59 -20
View File
@@ -319,19 +319,24 @@ component Sidebar {
.wrn-sidebar__rail {
width: 100%;
padding: 0.5rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface-soft, var(--wrn-color-surface));
}
.wrn-sidebar__list,
.wrn-sidebar__sublist {
display: grid;
gap: 0.1rem;
gap: 0.125rem;
margin: 0;
padding: 0;
list-style: none;
}
.wrn-sidebar__sublist {
margin-inline-start: 0.85rem;
margin-inline-start: 1rem;
margin-block: 0.125rem;
padding-inline-start: 0.5rem;
border-inline-start: 1px solid var(--wrn-color-border);
}
@@ -346,6 +351,7 @@ component Sidebar {
width: 1.05rem;
height: 1.05rem;
flex-shrink: 0;
color: var(--wrn-color-text-subtle, var(--wrn-color-text-muted));
}
.wrn-sidebar__entry[data-group="true"] + .wrn-sidebar__entry {
@@ -353,28 +359,32 @@ component Sidebar {
}
.wrn-sidebar__heading {
margin: 0.9rem 0 0.35rem;
color: var(--wrn-color-text-muted);
font-size: 0.7rem;
font-weight: 700;
margin: 0.875rem 0.625rem 0.375rem;
color: var(--wrn-color-text-subtle, var(--wrn-color-text-muted));
font-family: var(--wrn-font-mono, monospace);
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.wrn-sidebar__link {
position: relative;
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.45rem 0.6rem;
border-radius: var(--wrn-radius-sm);
min-height: 2rem;
padding: 0.375rem 0.625rem;
border-radius: calc(var(--wrn-radius-sm) - 1px);
color: var(--wrn-color-text-muted);
font-size: 0.88rem;
font-weight: 600;
font-size: 0.8125rem;
font-weight: 550;
text-decoration: none;
transition: background-color 120ms ease, color 120ms ease;
}
.wrn-sidebar__link:hover {
background: var(--wrn-color-surface-soft);
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-soft));
color: var(--wrn-color-text);
}
@@ -384,8 +394,10 @@ component Sidebar {
}
.wrn-sidebar__link[data-active="true"] {
background: color-mix(in srgb, var(--sidebar-accent) 16%, transparent);
color: var(--sidebar-accent);
background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
color: var(--wrn-color-text);
font-weight: 600;
box-shadow: 0 0 0 1px var(--wrn-color-border), var(--wrn-shadow-1);
}
.wrn-sidebar__link[aria-disabled="true"] {
@@ -399,24 +411,32 @@ component Sidebar {
.wrn-sidebar__badge {
margin-inline-start: auto;
padding: 0.05rem 0.4rem;
min-width: 1.25rem;
padding: 0.0625rem 0.4rem;
border-radius: 999px;
background: color-mix(in srgb, var(--sidebar-accent) 16%, transparent);
color: var(--sidebar-accent);
font-size: 0.72rem;
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
color: var(--wrn-color-text-muted);
font-size: 0.68rem;
font-weight: 650;
font-variant-numeric: tabular-nums;
text-align: center;
}
.wrn-sidebar__launcher {
display: none;
align-items: center;
gap: 0.5rem;
padding: 0.45rem 0.7rem;
min-height: 2.25rem;
padding: 0 0.75rem;
border: 1px solid var(--wrn-color-border);
border-bottom-color: var(--wrn-color-border-strong, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
background: linear-gradient(180deg, var(--wrn-color-surface), var(--wrn-color-surface-soft, var(--wrn-color-surface)));
box-shadow: var(--wrn-shadow-1);
color: var(--wrn-color-text);
font: inherit;
font-size: 0.9rem;
font-size: 0.8125rem;
font-weight: 600;
cursor: pointer;
}
@@ -443,5 +463,24 @@ component Sidebar {
display: none;
}
}
.wrn-sidebar__link[data-active="true"]::before {
position: absolute;
inset-block: 0.4rem;
inset-inline-start: -0.5rem;
width: 3px;
border-radius: 0 3px 3px 0;
background: var(--sidebar-accent);
content: "";
}
.wrn-sidebar__link[data-active="true"] .wrn-sidebar__icon {
color: var(--sidebar-accent);
}
.wrn-sidebar__link[data-active="true"] .wrn-sidebar__badge {
background: color-mix(in srgb, var(--sidebar-accent) 14%, var(--wrn-color-surface));
color: var(--wrn-color-primary-text, var(--sidebar-accent));
}
}
}
packages/ui/components/SplitHero.wrn
+2 -7
View File
@@ -268,14 +268,13 @@ component SplitHero {
.wrn-split-hero[data-variant="soft"] {
background:
radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--split-accent) 16%, transparent), transparent 30%),
linear-gradient(135deg, var(--split-accent-soft), transparent 64%),
var(--wrn-color-background);
}
.wrn-split-hero[data-variant="raised"] {
background: var(--wrn-color-surface-raised);
border-block: 1px solid var(--split-border);
box-shadow: 0 22px 70px color-mix(in srgb, black 14%, transparent);
box-shadow: var(--wrn-shadow-3);
}
.wrn-split-hero[data-variant="outline"] {
@@ -635,13 +634,10 @@ component SplitHero {
.wrn-split-hero__visual {
overflow: hidden;
background:
linear-gradient(145deg, color-mix(in srgb, var(--split-accent) 7%, transparent), transparent 58%),
var(--wrn-color-surface-raised);
border: 1px solid var(--split-border);
border-radius: 1.5rem;
box-shadow:
0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
0 30px 76px color-mix(in srgb, black 18%, transparent);
box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
}
.wrn-split-hero[data-visual-style="plain"] .wrn-split-hero__visual {
@@ -654,7 +650,6 @@ component SplitHero {
.wrn-split-hero[data-visual-style="soft"] .wrn-split-hero__visual {
background:
linear-gradient(145deg, var(--split-accent-soft), transparent 72%),
var(--wrn-color-surface-raised);
box-shadow: none;
}
packages/ui/components/StatsBar.wrn
+34 -36
View File
@@ -111,8 +111,8 @@ component StatsBar {
padding: 1.25rem;
color: var(--wrn-color-text-muted);
background: var(--wrn-color-surface-soft);
border: 1px dashed var(--wrn-color-border);
border-radius: 0.9rem;
border: 1px dashed var(--wrn-color-border-strong, var(--wrn-color-border));
border-radius: var(--wrn-radius);
text-align: center;
}
.wrn-stats-bar {
@@ -174,8 +174,11 @@ component StatsBar {
--stats-gutter-width: 6rem;
}
.wrn-stats-bar[data-outer-spacing="md"] { margin-block: 2rem; }
.wrn-stats-bar[data-radius="xl"] .wrn-stats-bar__surface { overflow: hidden; border-radius: 1.25rem; }
.wrn-stats-bar[data-shadow="sm"] .wrn-stats-bar__surface { box-shadow: 0 10px 30px rgb(15 23 42 / 0.05); }
.wrn-stats-bar[data-radius="xl"] .wrn-stats-bar__surface {
overflow: hidden;
border-radius: var(--wrn-radius-lg);
}
.wrn-stats-bar[data-shadow="sm"] .wrn-stats-bar__surface { box-shadow: var(--wrn-shadow-2); }
.wrn-stats-bar[data-variant="card"] .wrn-stats-bar__surface { border: 1px solid var(--wrn-color-border); background: var(--wrn-color-surface); }
.wrn-stats-bar[data-max-width="compact"] .wrn-stats-bar__inner {
@@ -200,18 +203,10 @@ component StatsBar {
display: grid;
grid-template-columns: minmax(0, 1fr);
overflow: hidden;
background:
linear-gradient(
135deg,
color-mix(in srgb, var(--stats-accent) 7%, transparent),
transparent 42%
),
var(--wrn-color-surface-raised);
border: 1px solid var(--stats-border);
border-radius: 1.25rem;
box-shadow:
0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
0 18px 48px color-mix(in srgb, black 16%, transparent);
background: var(--wrn-color-surface-raised);
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-lg);
box-shadow: var(--wrn-shadow-2);
}
.wrn-stats-bar[data-variant="default"] .wrn-stats-bar__surface {
@@ -221,7 +216,6 @@ component StatsBar {
.wrn-stats-bar[data-variant="soft"] .wrn-stats-bar__surface {
background:
linear-gradient(135deg, var(--stats-soft), transparent 58%),
var(--wrn-color-surface-raised);
box-shadow: none;
}
@@ -241,10 +235,9 @@ component StatsBar {
.wrn-stats-bar[data-variant="solid"] .wrn-stats-bar__surface {
color: var(--stats-contrast);
background:
linear-gradient(135deg, color-mix(in srgb, white 8%, transparent), transparent 52%),
var(--stats-accent);
border-color: color-mix(in srgb, white 24%, transparent);
box-shadow: 0 20px 56px color-mix(in srgb, var(--stats-accent) 28%, transparent);
box-shadow: var(--wrn-shadow-3);
}
.wrn-stats-bar__item {
@@ -295,7 +288,7 @@ component StatsBar {
}
.wrn-stats-bar__item:hover {
background: color-mix(in srgb, var(--item-accent) 6%, transparent);
background: var(--wrn-color-surface-soft);
}
.wrn-stats-bar[data-variant="solid"] .wrn-stats-bar__item:hover {
@@ -309,10 +302,9 @@ component StatsBar {
.wrn-stats-bar__label {
margin: 0;
color: var(--wrn-color-text-muted);
font-size: 0.78rem;
font-weight: 600;
font-size: 0.8125rem;
font-weight: 550;
line-height: 1.4;
letter-spacing: 0.01em;
}
.wrn-stats-bar__value-row {
@@ -325,10 +317,11 @@ component StatsBar {
.wrn-stats-bar__value {
margin: 0;
color: var(--wrn-color-text);
font-size: clamp(1.75rem, 2.4vw, 2.35rem);
font-size: clamp(1.75rem, 2.4vw, 2.25rem);
font-weight: 650;
line-height: 1;
letter-spacing: -0.035em;
letter-spacing: -0.04em;
font-variant-numeric: tabular-nums;
}
.wrn-stats-bar[data-compact="true"] .wrn-stats-bar__value {
@@ -336,9 +329,9 @@ component StatsBar {
}
.wrn-stats-bar__suffix {
color: var(--item-accent);
color: var(--wrn-color-text-subtle, var(--wrn-color-text-muted));
font-size: 0.95rem;
font-weight: 700;
font-weight: 600;
}
.wrn-stats-bar__description {
@@ -358,11 +351,12 @@ component StatsBar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.65rem;
height: 2.65rem;
width: 2.5rem;
height: 2.5rem;
color: var(--item-accent);
background: color-mix(in srgb, var(--item-accent) 11%, transparent);
border-radius: 0.85rem;
background: color-mix(in srgb, var(--item-accent) 10%, var(--wrn-color-surface));
border: 1px solid color-mix(in srgb, var(--item-accent) 18%, transparent);
border-radius: var(--wrn-radius-sm);
}
.wrn-stats-bar__icon > span {
@@ -381,21 +375,25 @@ component StatsBar {
align-items: center;
gap: 0.3rem;
width: fit-content;
margin-top: 0.7rem;
padding: 0.25rem 0.5rem;
margin-top: 0.75rem;
padding: 0.2rem 0.5rem;
color: var(--wrn-color-text-muted);
font-size: 0.7rem;
font-weight: 600;
line-height: 1;
background: color-mix(in srgb, var(--wrn-color-text) 5%, transparent);
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
border-radius: 999px;
font-variant-numeric: tabular-nums;
}
.wrn-stats-bar__trend[data-direction="up"] {
color: var(--wrn-color-success);
color: var(--wrn-color-success-text, var(--wrn-color-success));
background: color-mix(in srgb, var(--wrn-color-success) 10%, var(--wrn-color-surface));
}
.wrn-stats-bar__trend[data-direction="down"] {
color: var(--wrn-color-danger);
color: var(--wrn-color-danger-text, var(--wrn-color-danger));
background: color-mix(in srgb, var(--wrn-color-danger) 10%, var(--wrn-color-surface));
}
.wrn-stats-bar__trend-icon {
packages/ui/components/Stepper.wrn
+92 -20
View File
@@ -314,25 +314,31 @@ component Stepper {
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 2rem;
height: 2rem;
border: 1px solid var(--wrn-color-border);
width: 1.75rem;
height: 1.75rem;
border: 1.5px solid var(--wrn-color-border-strong, var(--wrn-color-border));
border-radius: 999px;
background: var(--wrn-color-surface);
font-size: 0.85rem;
font-weight: 700;
color: var(--wrn-color-text-muted);
font-family: var(--wrn-font-mono, monospace);
font-size: 0.75rem;
font-weight: 650;
font-variant-numeric: tabular-nums;
transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.wrn-stepper__step[data-status="complete"] .wrn-stepper__marker {
border-color: var(--stepper-accent);
border-color: color-mix(in srgb, var(--stepper-accent) 82%, black);
background: var(--stepper-accent);
color: var(--wrn-color-primary-contrast);
box-shadow: var(--wrn-highlight-edge, none);
}
.wrn-stepper__step[data-status="current"] .wrn-stepper__marker {
border-color: var(--stepper-accent);
color: var(--stepper-accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--stepper-accent) 22%, transparent);
background: var(--wrn-color-surface);
color: var(--wrn-color-primary-text, var(--stepper-accent));
box-shadow: 0 0 0 4px color-mix(in srgb, var(--stepper-accent) 16%, transparent);
}
.wrn-stepper__step[data-status="upcoming"] .wrn-stepper__marker {
@@ -346,13 +352,15 @@ component Stepper {
}
.wrn-stepper__label {
font-size: 0.9rem;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: -0.005em;
}
.wrn-stepper__description {
color: var(--wrn-color-text-muted);
font-size: 0.78rem;
line-height: 1.45;
}
.wrn-stepper__step[data-status="upcoming"] .wrn-stepper__label {
@@ -364,17 +372,19 @@ component Stepper {
}
.wrn-stepper__panel {
padding: 1rem;
padding: 1.125rem 1.25rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-md);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-1);
animation: wrn-stepper-in 200ms ease both;
}
.wrn-stepper__panel-title {
margin: 0 0 0.35rem;
font-size: 0.95rem;
font-weight: 700;
margin: 0 0 0.25rem;
font-size: 0.9375rem;
font-weight: 620;
letter-spacing: -0.01em;
}
.wrn-stepper__panel-body {
@@ -396,19 +406,22 @@ component Stepper {
.wrn-stepper__button-control {
appearance: none;
padding: 0.45rem 0.9rem;
min-height: var(--wrn-control-height, 2.5rem);
padding: 0 0.95rem;
border: 1px solid var(--wrn-color-border);
border-bottom-color: var(--wrn-color-border-strong, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
background: linear-gradient(180deg, var(--wrn-color-surface), var(--wrn-color-surface-soft, var(--wrn-color-surface)));
box-shadow: var(--wrn-shadow-1);
color: var(--wrn-color-text);
font: inherit;
font-size: 0.86rem;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
}
.wrn-stepper__button-control:hover:not(:disabled) {
background: var(--wrn-color-surface-soft);
background: var(--wrn-color-surface);
}
.wrn-stepper__button-control:focus-visible {
@@ -417,8 +430,10 @@ component Stepper {
}
.wrn-stepper__button-control[data-primary="true"] {
border-color: var(--stepper-accent);
background: var(--stepper-accent);
border-color: color-mix(in srgb, var(--stepper-accent) 82%, black);
border-bottom-color: color-mix(in srgb, var(--stepper-accent) 64%, black);
background: linear-gradient(180deg, color-mix(in srgb, var(--stepper-accent) 92%, white), var(--stepper-accent));
box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--stepper-accent) 30%, transparent);
color: var(--wrn-color-primary-contrast);
}
@@ -445,5 +460,62 @@ component Stepper {
flex-direction: column;
}
}
/* --- Connectors ---------------------------------------------------------
Horizontal: a line fills the rest of each step after its text.
Vertical: a rail runs down from each marker to the next. Both fill with
the accent once the step is complete. :last-of-type, not :last-child,
because the loop leaves <template> markers after the last step. */
.wrn-stepper:not([data-orientation="vertical"]) .wrn-stepper__button::after {
flex: 1 1 1.5rem;
min-width: 1rem;
height: 2px;
margin-inline-start: 0.25rem;
border-radius: 999px;
background: var(--wrn-color-border);
content: "";
transition: background-color 200ms ease;
}
.wrn-stepper:not([data-orientation="vertical"]) .wrn-stepper__step:last-of-type .wrn-stepper__button::after {
display: none;
}
.wrn-stepper[data-orientation="vertical"] .wrn-stepper__step {
position: relative;
}
.wrn-stepper[data-orientation="vertical"] .wrn-stepper__step:not(:last-of-type)::before {
position: absolute;
top: calc(0.5rem + 1.75rem + 0.25rem);
bottom: calc(-0.5rem + 0.25rem);
inset-inline-start: calc(0.5rem + 0.875rem - 1px);
width: 2px;
border-radius: 999px;
background: var(--wrn-color-border);
content: "";
}
.wrn-stepper__step[data-status="complete"] .wrn-stepper__button::after,
.wrn-stepper[data-orientation="vertical"] .wrn-stepper__step[data-status="complete"]::before {
background: var(--stepper-accent);
}
.wrn-stepper[data-orientation="vertical"] .wrn-stepper__list {
gap: 0.5rem;
}
/* Completed numbered steps show a check instead of the number. */
.wrn-stepper__step[data-status="complete"] .wrn-stepper__number {
display: none;
}
.wrn-stepper__step[data-status="complete"] .wrn-stepper__marker:has(.wrn-stepper__number:not([data-show="false"]))::after,
.wrn-stepper__step[data-status="complete"] .wrn-stepper__marker:not(:has(.wrn-stepper__icon:not([data-show="false"])))::after {
width: 0.8rem;
height: 0.8rem;
background: currentColor;
content: "";
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wrn-stepper__icon {
width: 0.9rem;
height: 0.9rem;
}
}
}
packages/ui/components/StrongPassword.wrn
+110 -74
View File
@@ -257,8 +257,8 @@ component StrongPassword {
}
.wrn-next--strong-password > label {
font-size: 0.82em;
font-weight: 700;
font-size: 0.8125rem;
font-weight: 600;
}
.wrn-next__strong-password-anchor {
@@ -267,18 +267,17 @@ component StrongPassword {
.wrn-next--strong-password input {
width: 100%;
min-height: 3rem;
padding: 0.75rem 3rem 0.75rem 2.75rem;
border: 1px solid var(--wrn-color-border);
min-height: var(--wrn-control-height, 2.5rem);
padding: 0.55rem 3rem 0.55rem 2.5rem;
border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
outline: 0;
color: var(--wrn-color-text);
background: var(--wrn-color-surface);
background: var(--wrn-color-input-background, var(--wrn-color-surface));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
font: inherit;
font-size: 0.875rem;
transition:
border-color 160ms ease,
box-shadow 160ms ease;
transition: border-color 160ms ease, box-shadow 160ms ease;
}
.wrn-next__strong-password-leading-icon,
@@ -312,8 +311,8 @@ component StrongPassword {
}
.wrn-next__strong-password-toggle:hover,
.wrn-next__strong-password-toggle:focus-visible {
color: var(--wrn-component-color);
background: color-mix(in srgb, var(--wrn-component-color) 10%, transparent);
color: var(--wrn-color-text);
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
outline: 0;
}
.wrn-next__strong-password-toggle > span {
@@ -335,7 +334,7 @@ component StrongPassword {
.wrn-next--strong-password input:focus-visible {
border-color: var(--wrn-component-color);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-component-color) 16%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-component-color) 18%, transparent);
}
.wrn-next__strong-password-details {
@@ -358,10 +357,11 @@ component StrongPassword {
.wrn-next__strong-password-meter {
width: 100%;
height: 0.42rem;
height: 0.3125rem;
overflow: hidden;
border-radius: 999px;
background: color-mix(in srgb, var(--wrn-color-border) 72%, transparent);
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
box-shadow: inset 0 1px 1px rgb(0 0 0 / 0.08);
}
.wrn-next__strong-password-meter > span {
@@ -401,8 +401,8 @@ component StrongPassword {
min-width: 0;
align-items: flex-start;
gap: 0.45rem;
color: var(--wrn-color-muted);
font-size: 0.72em;
color: var(--wrn-color-text-muted);
font-size: 0.75rem;
line-height: 1.45;
}
@@ -442,7 +442,7 @@ component StrongPassword {
}
.wrn-next__strong-password-requirements li[data-met="true"] {
color: var(--wrn-color-success);
color: var(--wrn-color-success-text, var(--wrn-color-success));
}
.wrn-next__strong-password-requirements li[data-met="true"] > span[aria-hidden="true"] {
@@ -462,22 +462,19 @@ component StrongPassword {
.wrn-next__strong-password-popover {
position: absolute;
top: calc(100% + 0.7rem);
top: calc(100% + 0.5rem);
left: 0;
z-index: 30;
width: min(28rem, 100%);
padding: 1rem;
padding: 0.875rem 1rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius);
opacity: 0;
visibility: hidden;
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-2);
transform: translateY(-0.35rem);
transition:
opacity 140ms ease,
transform 140ms ease,
visibility 140ms ease;
background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
transform: translateY(-0.25rem);
transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
}
.wrn-next__strong-password-popover[data-open="true"] {
@@ -569,7 +566,7 @@ component StrongPassword {
.wrn-component p {
margin: 0;
color: var(--wrn-color-muted);
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
line-height: 1.6;
}
@@ -584,8 +581,9 @@ component StrongPassword {
display: block;
min-height: 1em;
margin-top: 0.25rem;
color: var(--wrn-color-danger);
font-size: 0.8rem;
color: var(--wrn-color-danger-text, var(--wrn-color-danger));
font-size: 0.78rem;
font-weight: 550;
}
.wrn-next--choice {
@@ -612,13 +610,14 @@ component StrongPassword {
width: 100%;
min-height: var(--wrn-control-height, 2.5rem);
padding: 0.5rem 0.75rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm, 6px);
border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm, 8px);
outline: 0;
color: var(--wrn-color-text);
background: var(--wrn-color-bg);
background: var(--wrn-color-input-background, var(--wrn-color-surface));
font: inherit;
font-weight: 500;
transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
}
.wrn-auth-form form > .wrn-next--field,
.wrn-auth-form form > .wrn-field {
@@ -632,8 +631,8 @@ component StrongPassword {
box-shadow: none;
}
.wrn-next--field :where(input, textarea, select):focus-visible {
border-color: var(--wrn-color-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
border-color: var(--wrn-field-color, var(--wrn-color-primary));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04), 0 0 0 3px color-mix(in srgb, var(--wrn-field-color, var(--wrn-color-primary)) 18%, transparent);
}
.wrn-next--field textarea {
resize: vertical;
@@ -667,12 +666,14 @@ component StrongPassword {
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.35;
letter-spacing: -0.005em;
}
.wrn-next__field-hint,
.wrn-next__field-help {
color: var(--wrn-color-muted);
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-size: 0.75rem;
font-weight: 500;
font-weight: 450;
line-height: 1.45;
}
.wrn-next__field-control {
position: relative;
@@ -680,10 +681,11 @@ component StrongPassword {
}
.wrn-next__field-control > :is(input, textarea, select) {
padding-inline: 0.85rem;
border-color: var(--wrn-color-border);
border-color: var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
font-size: 0.8125rem;
background: var(--wrn-color-input-background, var(--wrn-color-surface));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
font-size: 0.875rem;
}
.wrn-next__field-control[data-has-icon="true"][data-icon-position="start"] > :is(input, textarea, select) {
padding-inline-start: 2.5rem;
@@ -724,7 +726,8 @@ component StrongPassword {
}
.wrn-next--field[data-variant="ghost"] .wrn-next__field-control > :is(input, textarea, select) {
border-color: transparent;
background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
box-shadow: none;
}
.wrn-next__field-floating-label {
position: absolute;
@@ -765,9 +768,9 @@ component StrongPassword {
}
.wrn-next__field-error {
min-height: 1em;
color: var(--wrn-color-danger);
font-size: 0.82em;
font-weight: 600;
color: var(--wrn-color-danger-text, var(--wrn-color-danger));
font-size: 0.78rem;
font-weight: 550;
}
.wrn-next__field-error:empty {
display: none;
@@ -775,14 +778,16 @@ component StrongPassword {
.wrn-next--field[data-invalid="true"] :is(input, textarea, select),
.wrn-next--choice-field[data-invalid="true"] input {
border-color: var(--wrn-color-danger);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-danger) 12%, transparent);
}
.wrn-next--field :is(input, textarea, select):disabled,
.wrn-next--choice-field input:disabled {
cursor: not-allowed;
opacity: 0.58;
opacity: 0.55;
background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
}
.wrn-next--field :is(input, textarea, select):read-only {
background: var(--wrn-color-surface-2);
background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
}
.wrn-next--field[data-inline="true"],
.wrn-next--choice-field[data-inline="true"] {
@@ -839,11 +844,13 @@ component StrongPassword {
display: flex;
min-width: 0;
align-items: center;
gap: 0.65rem;
gap: 0.625rem;
color: var(--wrn-color-text);
width: 100%;
font-size: 0.75rem;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.4;
cursor: pointer;
}
.wrn-next__checkbox-content > .wrn-next__choice {
width: 100%;
@@ -858,12 +865,13 @@ component StrongPassword {
.wrn-next__choice-copy {
display: grid;
min-width: 0;
gap: 0.15rem;
line-height: 1.35;
gap: 0.125rem;
line-height: 1.4;
}
.wrn-next__choice-copy small {
color: var(--wrn-color-muted);
font-weight: 500;
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-size: 0.78rem;
font-weight: 450;
}
.wrn-next__radio-group,
.wrn-next__checkbox-group {
@@ -883,15 +891,18 @@ component StrongPassword {
.wrn-next--radio-field[data-card="true"] .wrn-next--radio,
.wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox {
min-height: 4.5rem;
padding: 0.85rem;
padding: 0.9rem 1rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-1);
transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
}
.wrn-next--radio-field[data-card="true"] .wrn-next--radio:has(input:checked),
.wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox:has(input:checked) {
border-color: var(--wrn-field-color);
box-shadow: 0 0 0 1px var(--wrn-field-color);
background: color-mix(in srgb, var(--wrn-field-color) 5%, var(--wrn-color-surface));
box-shadow: 0 0 0 1px var(--wrn-field-color), var(--wrn-shadow-1);
}
.wrn-next--radio-field[data-list="true"] .wrn-next--radio,
.wrn-next--checkbox-field[data-list="true"] .wrn-next--checkbox {
@@ -912,19 +923,21 @@ component StrongPassword {
}
.wrn-next__choice[data-variant="outlined"],
.wrn-next__choice[data-variant="floating"] {
padding: 0.65rem 0.8rem;
padding: 0.7rem 0.85rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
}
.wrn-next__choice[data-variant="pill"] {
padding: 0.65rem 1rem;
padding: 0.6rem 1rem;
border: 1px solid color-mix(in srgb, var(--wrn-field-color) 22%, var(--wrn-color-border));
border-radius: 999px;
background: color-mix(in srgb, var(--wrn-field-color) 9%, var(--wrn-color-surface));
background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface));
}
.wrn-next__choice[data-variant="ghost"] {
padding: 0.65rem 0.8rem;
padding: 0.65rem 0.85rem;
border-radius: var(--wrn-radius-sm);
background: color-mix(in srgb, var(--wrn-field-color) 7%, transparent);
background: color-mix(in srgb, var(--wrn-field-color) 6%, transparent);
}
.wrn-next__choice[data-variant="underline"] {
padding-block: 0.5rem;
@@ -958,25 +971,35 @@ component StrongPassword {
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.7rem 0.85rem;
border: 1px solid var(--wrn-color-border);
padding: 0.55rem 0.85rem;
border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
background: var(--wrn-color-input-background, var(--wrn-color-surface));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
color: var(--wrn-color-text);
font: inherit;
font-size: 0.875rem;
font-variant-numeric: tabular-nums;
text-align: left;
cursor: pointer;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.wrn-next__calendar,
.wrn-next__time-panel {
z-index: 20;
position: absolute;
z-index: 40;
top: 100%;
left: 0;
display: grid;
width: min(100%, 22rem);
width: min(calc(100vw - 2rem), 19.5rem);
gap: 0.75rem;
padding: 0.85rem;
margin-top: 0.375rem;
padding: 0.75rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-md);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-3);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
animation: wrn-popover-enter var(--wrn-motion-base, 160ms) var(--wrn-ease-emphasized, ease) both;
}
.wrn-next--date-picker[data-expanded="false"] .wrn-next__calendar,
.wrn-next--time-picker[data-expanded="false"] .wrn-next__time-panel {
@@ -986,29 +1009,42 @@ component StrongPassword {
.wrn-next__time-panel button {
min-height: 2.25rem;
border: 0;
border-radius: var(--wrn-radius-sm);
border-radius: calc(var(--wrn-radius-sm) - 2px);
background: transparent;
color: inherit;
font: inherit;
font-size: 0.8125rem;
font-variant-numeric: tabular-nums;
cursor: pointer;
transition: background-color 120ms ease, color 120ms ease;
}
.wrn-next__calendar-weekdays,
.wrn-next__calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0.2rem;
gap: 0.125rem;
text-align: center;
}
.wrn-next__calendar-weekdays {
color: var(--wrn-color-muted);
font-size: 0.75rem;
padding-bottom: 0.375rem;
border-bottom: 1px solid var(--wrn-color-border);
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-family: var(--wrn-font-mono, monospace);
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.wrn-next__calendar-grid button:hover,
.wrn-next__time-panel button:hover {
background: var(--wrn-color-surface-2);
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
}
.wrn-next__calendar-grid button[aria-pressed="true"],
.wrn-next__time-panel button[aria-pressed="true"] {
background: var(--wrn-field-color);
color: var(--wrn-color-primary-contrast, #fff);
box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--wrn-field-color) 35%, transparent);
font-weight: 650;
}
.wrn-next__time-period {
display: flex;
@@ -1042,7 +1078,7 @@ component StrongPassword {
.wrn-next--field[data-variant="ghost"]
:is(.wrn-next__input-group-control, .wrn-next__file-control, .wrn-next__color-control) {
border-color: transparent;
background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
}
@media (max-width: 640px) {
.wrn-next--field[data-inline="true"],
packages/ui/components/TimePicker.wrn
+131 -56
View File
@@ -43,7 +43,7 @@ size: string = "default"
state expanded: boolean = false
functions {
client function commit(part, nextValue, sourceEvent, next, detail) { if (part === "hour") { selectedHour = String(nextValue).padStart(2, "0") } if (part === "minute") { selectedMinute = String(nextValue).padStart(2, "0") } next = selectedHour + ":" + selectedMinute; if ((min && next < min) || (max && next > max)) { return } currentValue = next; detail = { value: currentValue, hour: selectedHour, minute: selectedMinute, name: name, sourceEvent: sourceEvent }; output.input(detail); output.change(detail) }
client function selectTimePart(sourceEvent, root, input, parts, hourValue, minuteValue, next, trigger, detail) { root = sourceEvent.currentTarget.closest(".wrn-next--time-picker"); input = root.querySelector(".wrn-next__time-value"); parts = String(input.value || value || "00:00").split(":"); hourValue = sourceEvent.currentTarget.dataset.part === "hour" ? sourceEvent.currentTarget.dataset.value : parts[0]; minuteValue = sourceEvent.currentTarget.dataset.part === "minute" ? sourceEvent.currentTarget.dataset.value : parts[1]; next = hourValue + ":" + minuteValue; if ((min && next < min) || (max && next > max)) { return } currentValue = next; input.setAttribute("value", next); trigger = root.querySelector(".wrn-next__time-trigger span"); if (trigger) { trigger.replaceChildren(next) } sourceEvent.currentTarget.setAttribute("aria-pressed", "true"); detail = { value: next, hour: hourValue, minute: minuteValue, name: name, sourceEvent: sourceEvent }; output.input(detail); output.change(detail) }
client function selectTimePart(sourceEvent, root, input, parts, hourValue, minuteValue, next, trigger, detail, buttons, index) { root = sourceEvent.currentTarget.closest(".wrn-next--time-picker"); input = root.querySelector(".wrn-next__time-value"); parts = String(input.value || value || "00:00").split(":"); hourValue = sourceEvent.currentTarget.dataset.part === "hour" ? sourceEvent.currentTarget.dataset.value : parts[0]; minuteValue = sourceEvent.currentTarget.dataset.part === "minute" ? sourceEvent.currentTarget.dataset.value : parts[1]; next = hourValue + ":" + minuteValue; if ((min && next < min) || (max && next > max)) { return } currentValue = next; input.setAttribute("value", next); trigger = root.querySelector(".wrn-next__time-trigger span"); if (trigger) { trigger.replaceChildren(next) } selectedHour = hourValue; selectedMinute = minuteValue; buttons = root.querySelectorAll(".wrn-next__time-options button[data-part=\"" + sourceEvent.currentTarget.dataset.part + "\"]"); for (index = 0; index < buttons.length; index++) { buttons[index].setAttribute("aria-pressed", buttons[index] === sourceEvent.currentTarget ? "true" : "false") } detail = { value: next, hour: hourValue, minute: minuteValue, name: name, sourceEvent: sourceEvent }; output.input(detail); output.change(detail) }
client function openPicker(sourceEvent) { expanded = !expanded; output.open({ value: currentValue, name: name, sourceEvent: sourceEvent }) }
client function closePicker(sourceEvent) { expanded = false; output.close({ value: currentValue, name: name, sourceEvent: sourceEvent }) }
client function handleFocus(sourceEvent) { output.focus({ value: currentValue, name: name, sourceEvent: sourceEvent }) }
@@ -58,7 +58,7 @@ size: string = "default"
<input id="{id || name}" class="wrn-next__sr-only wrn-next__time-value" type="text" name="{name}" value="{currentValue}" required="{required}" readonly aria-hidden="true" tabindex="-1" @invalid="handleInvalid(event)" />
<button type="button" class="wrn-next__time-trigger" disabled="{disabled || readonly}" aria-haspopup="dialog" aria-expanded="{expanded}" @click="openPicker(event)" @focus="handleFocus(event)" @blur="handleBlur(event)"><span>{currentValue || placeholder || "Select time"}</span><i class="{icon}" aria-hidden="true"></i></button>
</div>
<button type="button" class="wrn-time-dismiss" aria-label="Close time picker" data-show="expanded" @click="closePicker(event)"></button><div data-show="expanded" class="wrn-next__time-panel" role="dialog" aria-label="{label}"><div><strong>Hour</strong><div class="wrn-next__time-options">{#each hours as hour}<button type="button" data-part="hour" data-value="{hour}" aria-pressed="{String(hour) === selectedHour}" @click="selectTimePart(event)">{hour}</button>{/each}</div></div><div><strong>Minute</strong><div class="wrn-next__time-options">{#each minutes as minute}<button type="button" data-part="minute" data-value="{minute}" aria-pressed="{String(minute) === selectedMinute}" @click="selectTimePart(event)">{minute}</button>{/each}</div></div><button type="button" class="wrn-next__time-done" @click="closePicker(event)">Done</button></div>
<button type="button" class="wrn-time-dismiss" aria-label="Close time picker" data-show="expanded" @click="closePicker(event)"></button><div data-show="expanded" class="wrn-next__time-panel" role="dialog" aria-label="{label}"><div><strong>Hour</strong><div class="wrn-next__time-options">{#each hours as hour}<button type="button" data-part="hour" data-value="{hour}" aria-pressed="{!!currentValue && String(hour) === selectedHour}" @click="selectTimePart(event)">{hour}</button>{/each}</div></div><div><strong>Minute</strong><div class="wrn-next__time-options">{#each minutes as minute}<button type="button" data-part="minute" data-value="{minute}" aria-pressed="{!!currentValue && String(minute) === selectedMinute}" @click="selectTimePart(event)">{minute}</button>{/each}</div></div><button type="button" class="wrn-next__time-done" @click="closePicker(event)">Done</button></div>
{#if helperText}<small class="wrn-next__field-help">{helperText}</small>{/if}
<small class="wrn-next__field-error" data-error="{name}">{error}</small>
</div>
@@ -68,20 +68,30 @@ size: string = "default"
.wrn-time-dismiss { position:fixed; inset:0; z-index:39; opacity:0; border:0; }
.wrn-next__time-panel {
grid-template-columns: 1fr 1fr;
width: min(calc(100vw - 2rem), 14rem);
}
.wrn-next__time-options {
display: grid;
max-height: 12rem;
margin-top: 0.4rem;
max-height: 11rem;
margin-top: 0.375rem;
overflow-y: auto;
gap: 0.2rem;
gap: 0.125rem;
padding-right: 0.125rem;
scrollbar-width: thin;
scrollbar-color: var(--wrn-color-border-strong, var(--wrn-color-border)) transparent;
scroll-snap-type: y proximity;
}
.wrn-next__time-done {
align-self: end;
background: var(--wrn-field-color) !important;
grid-column: 1 / -1;
min-height: 2.25rem;
border: 1px solid color-mix(in srgb, var(--wrn-field-color) 82%, black) !important;
border-bottom-color: color-mix(in srgb, var(--wrn-field-color) 64%, black) !important;
background: linear-gradient(180deg, color-mix(in srgb, var(--wrn-field-color) 92%, white), var(--wrn-field-color)) !important;
box-shadow: var(--wrn-highlight-edge, none);
color: var(--wrn-color-primary-contrast, #fff) !important;
font-weight: 600;
}
@media (max-width: 640px) {
@@ -155,7 +165,7 @@ size: string = "default"
.wrn-component p {
margin: 0;
color: var(--wrn-color-muted);
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
line-height: 1.6;
}
@@ -170,8 +180,9 @@ size: string = "default"
display: block;
min-height: 1em;
margin-top: 0.25rem;
color: var(--wrn-color-danger);
font-size: 0.8rem;
color: var(--wrn-color-danger-text, var(--wrn-color-danger));
font-size: 0.78rem;
font-weight: 550;
}
.wrn-next--choice {
@@ -198,13 +209,14 @@ size: string = "default"
width: 100%;
min-height: var(--wrn-control-height, 2.5rem);
padding: 0.5rem 0.75rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm, 6px);
border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm, 8px);
outline: 0;
color: var(--wrn-color-text);
background: var(--wrn-color-bg);
background: var(--wrn-color-input-background, var(--wrn-color-surface));
font: inherit;
font-weight: 500;
transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
}
.wrn-auth-form form > .wrn-next--field,
.wrn-auth-form form > .wrn-field {
@@ -218,8 +230,8 @@ size: string = "default"
box-shadow: none;
}
.wrn-next--field :where(input, textarea, select):focus-visible {
border-color: var(--wrn-color-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
border-color: var(--wrn-field-color, var(--wrn-color-primary));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04), 0 0 0 3px color-mix(in srgb, var(--wrn-field-color, var(--wrn-color-primary)) 18%, transparent);
}
.wrn-next--field textarea {
resize: vertical;
@@ -253,12 +265,14 @@ size: string = "default"
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.35;
letter-spacing: -0.005em;
}
.wrn-next__field-hint,
.wrn-next__field-help {
color: var(--wrn-color-muted);
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-size: 0.75rem;
font-weight: 500;
font-weight: 450;
line-height: 1.45;
}
.wrn-next__field-control {
position: relative;
@@ -266,10 +280,11 @@ size: string = "default"
}
.wrn-next__field-control > :is(input, textarea, select) {
padding-inline: 0.85rem;
border-color: var(--wrn-color-border);
border-color: var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
font-size: 0.8125rem;
background: var(--wrn-color-input-background, var(--wrn-color-surface));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
font-size: 0.875rem;
}
.wrn-next__field-control[data-has-icon="true"][data-icon-position="start"] > :is(input, textarea, select) {
padding-inline-start: 2.5rem;
@@ -310,7 +325,8 @@ size: string = "default"
}
.wrn-next--field[data-variant="ghost"] .wrn-next__field-control > :is(input, textarea, select) {
border-color: transparent;
background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
box-shadow: none;
}
.wrn-next__field-floating-label {
position: absolute;
@@ -351,9 +367,9 @@ size: string = "default"
}
.wrn-next__field-error {
min-height: 1em;
color: var(--wrn-color-danger);
font-size: 0.82em;
font-weight: 600;
color: var(--wrn-color-danger-text, var(--wrn-color-danger));
font-size: 0.78rem;
font-weight: 550;
}
.wrn-next__field-error:empty {
display: none;
@@ -361,14 +377,16 @@ size: string = "default"
.wrn-next--field[data-invalid="true"] :is(input, textarea, select),
.wrn-next--choice-field[data-invalid="true"] input {
border-color: var(--wrn-color-danger);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-danger) 12%, transparent);
}
.wrn-next--field :is(input, textarea, select):disabled,
.wrn-next--choice-field input:disabled {
cursor: not-allowed;
opacity: 0.58;
opacity: 0.55;
background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
}
.wrn-next--field :is(input, textarea, select):read-only {
background: var(--wrn-color-surface-2);
background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
}
.wrn-next--field[data-inline="true"],
.wrn-next--choice-field[data-inline="true"] {
@@ -425,11 +443,13 @@ size: string = "default"
display: flex;
min-width: 0;
align-items: center;
gap: 0.65rem;
gap: 0.625rem;
color: var(--wrn-color-text);
width: 100%;
font-size: 0.75rem;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.4;
cursor: pointer;
}
.wrn-next__checkbox-content > .wrn-next__choice {
width: 100%;
@@ -444,12 +464,13 @@ size: string = "default"
.wrn-next__choice-copy {
display: grid;
min-width: 0;
gap: 0.15rem;
line-height: 1.35;
gap: 0.125rem;
line-height: 1.4;
}
.wrn-next__choice-copy small {
color: var(--wrn-color-muted);
font-weight: 500;
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-size: 0.78rem;
font-weight: 450;
}
.wrn-next__radio-group,
.wrn-next__checkbox-group {
@@ -469,15 +490,18 @@ size: string = "default"
.wrn-next--radio-field[data-card="true"] .wrn-next--radio,
.wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox {
min-height: 4.5rem;
padding: 0.85rem;
padding: 0.9rem 1rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-1);
transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
}
.wrn-next--radio-field[data-card="true"] .wrn-next--radio:has(input:checked),
.wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox:has(input:checked) {
border-color: var(--wrn-field-color);
box-shadow: 0 0 0 1px var(--wrn-field-color);
background: color-mix(in srgb, var(--wrn-field-color) 5%, var(--wrn-color-surface));
box-shadow: 0 0 0 1px var(--wrn-field-color), var(--wrn-shadow-1);
}
.wrn-next--radio-field[data-list="true"] .wrn-next--radio,
.wrn-next--checkbox-field[data-list="true"] .wrn-next--checkbox {
@@ -498,19 +522,21 @@ size: string = "default"
}
.wrn-next__choice[data-variant="outlined"],
.wrn-next__choice[data-variant="floating"] {
padding: 0.65rem 0.8rem;
padding: 0.7rem 0.85rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
}
.wrn-next__choice[data-variant="pill"] {
padding: 0.65rem 1rem;
padding: 0.6rem 1rem;
border: 1px solid color-mix(in srgb, var(--wrn-field-color) 22%, var(--wrn-color-border));
border-radius: 999px;
background: color-mix(in srgb, var(--wrn-field-color) 9%, var(--wrn-color-surface));
background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface));
}
.wrn-next__choice[data-variant="ghost"] {
padding: 0.65rem 0.8rem;
padding: 0.65rem 0.85rem;
border-radius: var(--wrn-radius-sm);
background: color-mix(in srgb, var(--wrn-field-color) 7%, transparent);
background: color-mix(in srgb, var(--wrn-field-color) 6%, transparent);
}
.wrn-next__choice[data-variant="underline"] {
padding-block: 0.5rem;
@@ -544,29 +570,36 @@ size: string = "default"
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.7rem 0.85rem;
border: 1px solid var(--wrn-color-border);
padding: 0.55rem 0.85rem;
border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
background: var(--wrn-color-input-background, var(--wrn-color-surface));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
color: var(--wrn-color-text);
font: inherit;
font-size: 0.875rem;
font-variant-numeric: tabular-nums;
text-align: left;
cursor: pointer;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.wrn-next--date-picker, .wrn-next--time-picker { position: relative; }
.wrn-next__calendar,
.wrn-next__time-panel {
position: absolute;
inset-block-start: calc(100% + .4rem);
inset-inline-start: 0;
z-index: 40;
top: 100%;
left: 0;
display: grid;
width: min(100%, 22rem);
width: min(calc(100vw - 2rem), 19.5rem);
gap: 0.75rem;
padding: 0.85rem;
margin-top: 0.375rem;
padding: 0.75rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-md);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-3);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
animation: wrn-popover-enter var(--wrn-motion-base, 160ms) var(--wrn-ease-emphasized, ease) both;
}
.wrn-next--date-picker[data-expanded="false"] .wrn-next__calendar,
.wrn-next--time-picker[data-expanded="false"] .wrn-next__time-panel {
@@ -576,29 +609,42 @@ size: string = "default"
.wrn-next__time-panel button {
min-height: 2.25rem;
border: 0;
border-radius: var(--wrn-radius-sm);
border-radius: calc(var(--wrn-radius-sm) - 2px);
background: transparent;
color: inherit;
font: inherit;
font-size: 0.8125rem;
font-variant-numeric: tabular-nums;
cursor: pointer;
transition: background-color 120ms ease, color 120ms ease;
}
.wrn-next__calendar-weekdays,
.wrn-next__calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0.2rem;
gap: 0.125rem;
text-align: center;
}
.wrn-next__calendar-weekdays {
color: var(--wrn-color-muted);
font-size: 0.75rem;
padding-bottom: 0.375rem;
border-bottom: 1px solid var(--wrn-color-border);
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-family: var(--wrn-font-mono, monospace);
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.wrn-next__calendar-grid button:hover,
.wrn-next__time-panel button:hover {
background: var(--wrn-color-surface-2);
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
}
.wrn-next__calendar-grid button[aria-pressed="true"],
.wrn-next__time-panel button[aria-pressed="true"] {
background: var(--wrn-field-color);
color: var(--wrn-color-primary-contrast, #fff);
box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--wrn-field-color) 35%, transparent);
font-weight: 650;
}
.wrn-next__time-period {
display: flex;
@@ -632,7 +678,7 @@ size: string = "default"
.wrn-next--field[data-variant="ghost"]
:is(.wrn-next__input-group-control, .wrn-next__file-control, .wrn-next__color-control) {
border-color: transparent;
background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
}
@media (max-width: 640px) {
.wrn-next--field[data-inline="true"],
@@ -654,5 +700,34 @@ size: string = "default"
.wrn-next--strong-password input.wrn-invalid {
border-color: var(--wrn-color-danger);
}
.wrn-next__time-panel > div > strong {
display: block;
padding: 0 0.25rem 0.375rem;
border-bottom: 1px solid var(--wrn-color-border);
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-family: var(--wrn-font-mono, monospace);
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.wrn-next__time-options > button {
scroll-snap-align: start;
font-family: var(--wrn-font-mono, monospace);
}
.wrn-next--time-picker[data-expanded="true"] .wrn-next__time-trigger {
border-color: var(--wrn-field-color);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-field-color) 18%, transparent);
}
.wrn-next__time-trigger > i {
width: 1rem;
height: 1rem;
flex: none;
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
}
}
}
packages/ui/components/Timeline.wrn
+173 -15
View File
@@ -14,6 +14,21 @@ component Timeline {
class: string = ""
}
functions {
// Explicit status wins; otherwise the item flagged current is "current"
// and everything after it is "upcoming".
shared function statusOf(item, index, currentIndex) {
if (item.status) { return item.status }
if (item.current) { return "current" }
currentIndex = -1
for (var position = 0; position < items.length; position++) {
if (currentIndex < 0 && items[position] && items[position].current) { currentIndex = position }
}
if (currentIndex >= 0 && index > currentIndex) { return "upcoming" }
return "default"
}
}
view {
<section
data-ui-component="Timeline"
@@ -38,12 +53,13 @@ component Timeline {
{#each items as item, index}
<li
class="wrn-timeline__item"
data-status='{statusOf(item, index)}'
data-interactive='{item.href ? "true" : "false"}'
@click='output.select({ item: item, index: index })'
>
<span
class="wrn-timeline__marker"
data-status='{item.status || "default"}'
data-status='{statusOf(item, index)}'
>
{#if numbered}
<span class="wrn-timeline__number" aria-hidden="true">{index + 1}</span>
@@ -73,8 +89,8 @@ component Timeline {
<p class="wrn-timeline__subtitle">{item.subtitle}</p>
{/if}
</div>
{#if item.date || item.meta}
<time class="wrn-timeline__time">{item.date || item.meta}</time>
{#if item.date || item.time || item.meta}
<time class="wrn-timeline__time">{item.date || item.time || item.meta}</time>
{/if}
</div>
@@ -104,31 +120,94 @@ component Timeline {
.wrn-timeline[data-color="success"] { --wrn-timeline-accent: var(--wrn-color-success); }
.wrn-timeline[data-color="info"] { --wrn-timeline-accent: var(--wrn-color-info); }
.wrn-timeline__header { margin-bottom: 1.5rem; }
.wrn-timeline__title { color: var(--wrn-color-text); font-size: 1.25rem; font-weight: 700; }
.wrn-timeline__title {
color: var(--wrn-color-text);
font-size: 1.25rem;
font-weight: 650;
letter-spacing: -0.02em;
}
.wrn-timeline__description { max-width: 42rem; margin-top: 0.5rem; color: var(--wrn-color-text-muted); line-height: 1.75rem; }
.wrn-timeline__list { position: relative; display: grid; gap: 1rem; margin: 0; padding: 0 0 0 3rem; list-style: none; }
.wrn-timeline__list::before { position: absolute; inset-block: 1rem; inset-inline-start: 1rem; width: 2px; border-radius: 999px; background: color-mix(in srgb, var(--wrn-timeline-accent) 30%, var(--wrn-color-border)); content: ""; }
.wrn-timeline__list::before {
position: absolute;
inset-block: 1rem;
inset-inline-start: 0.9375rem;
width: 2px;
border-radius: 999px;
background: var(--wrn-color-border);
content: "";
}
.wrn-timeline__item { position: relative; min-width: 0; }
.wrn-timeline__item:last-child { padding-bottom: 0; }
.wrn-timeline__marker {
position: absolute; z-index: 1; top: 1rem; inset-inline-start: -3rem; display: flex; width: 2rem; height: 2rem;
align-items: center; justify-content: center; border: 4px solid var(--wrn-color-background);
border-radius: 50%; color: var(--wrn-color-on-primary); background: var(--wrn-timeline-accent); box-shadow: var(--wrn-shadow-1);
position: absolute;
z-index: 1;
top: 1.125rem;
inset-inline-start: -3rem;
display: flex;
width: 2rem;
height: 2rem;
align-items: center;
justify-content: center;
border: 3px solid var(--wrn-color-bg);
border-radius: 50%;
color: var(--wrn-color-on-primary);
background: var(--wrn-timeline-accent);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--wrn-timeline-accent) 40%, var(--wrn-color-border)), var(--wrn-highlight-edge, none);
}
.wrn-timeline__marker:is([data-status="complete"], [data-status="success"]) { background: var(--wrn-color-success); }
.wrn-timeline__marker:is([data-status="warning"], [data-status="pending"]) { background: var(--wrn-color-warning); }
.wrn-timeline__marker:is([data-status="danger"], [data-status="failed"]) { background: var(--wrn-color-danger); }
.wrn-timeline__number { font-size: 0.75rem; font-weight: 800; }
.wrn-timeline__card { min-width: 0; padding: 1.25rem; border: 1px solid var(--wrn-color-border); border-radius: calc(var(--wrn-radius) * 1.5); background: var(--wrn-color-surface-raised); box-shadow: var(--wrn-shadow-1); transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
.wrn-timeline__number {
font-family: var(--wrn-font-mono, monospace);
font-size: 0.72rem;
font-weight: 650;
}
.wrn-timeline__card {
min-width: 0;
padding: 1.125rem 1.25rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface-raised);
box-shadow: var(--wrn-shadow-1);
transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.wrn-timeline__item[data-interactive="true"] { cursor: pointer; }
.wrn-timeline__item[data-interactive="true"]:hover .wrn-timeline__card { border-color: color-mix(in srgb, var(--wrn-timeline-accent) 45%, var(--wrn-color-border)); transform: translateY(-2px); box-shadow: var(--wrn-shadow-2); }
.wrn-timeline__item[data-interactive="true"]:hover .wrn-timeline__card {
border-color: var(--wrn-color-border-strong, var(--wrn-color-border));
transform: translateY(-1px);
box-shadow: var(--wrn-shadow-2);
}
.wrn-timeline__card[data-variant="minimal"] { padding: 0; border-color: transparent; background: transparent; box-shadow: none; }
.wrn-timeline__card-header { display: flex; flex-direction: column; gap: 0.5rem; }
.wrn-timeline__item-title { color: var(--wrn-color-text); font-weight: 700; }
.wrn-timeline__subtitle { margin-top: 0.25rem; color: var(--wrn-color-primary); font-size: 0.875rem; font-weight: 500; }
.wrn-timeline__time { flex: none; color: var(--wrn-color-text-muted); font-size: 0.875rem; }
.wrn-timeline__item-title {
color: var(--wrn-color-text);
font-weight: 620;
letter-spacing: -0.01em;
}
.wrn-timeline__subtitle {
margin-top: 0.125rem;
color: var(--wrn-color-primary-text, var(--wrn-color-primary));
font-size: 0.8125rem;
font-weight: 550;
}
.wrn-timeline__time {
flex: none;
color: var(--wrn-color-text-subtle, var(--wrn-color-text-muted));
font-family: var(--wrn-font-mono, monospace);
font-size: 0.72rem;
font-variant-numeric: tabular-nums;
}
.wrn-timeline__copy { margin-top: 0.75rem; color: var(--wrn-color-text-muted); font-size: 0.875rem; line-height: 1.5rem; }
.wrn-timeline__action { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1rem; color: var(--wrn-color-primary); font-size: 0.875rem; font-weight: 600; }
.wrn-timeline__action {
display: inline-flex;
align-items: center;
gap: 0.375rem;
margin-top: 0.875rem;
color: var(--wrn-color-primary-text, var(--wrn-color-primary));
font-size: 0.8125rem;
font-weight: 600;
}
.wrn-timeline__action:hover { color: var(--wrn-color-primary-hover); }
.wrn-timeline__action-icon { width: 1rem; height: 1rem; }
.wrn-timeline__empty { padding-left: 2rem; color: var(--wrn-color-text-muted); font-size: 0.875rem; }
@@ -141,5 +220,84 @@ component Timeline {
.wrn-timeline__marker { inset-inline-start: -2.5rem; }
.wrn-timeline__card { padding: 1rem; }
}
/* --- Status: current rings and pulses, upcoming goes hollow ------------ */
.wrn-timeline__marker[data-status="current"] {
box-shadow: 0 0 0 1px var(--wrn-timeline-accent), 0 0 0 5px color-mix(in srgb, var(--wrn-timeline-accent) 20%, transparent);
animation: wrn-timeline-pulse 2.2s ease-in-out infinite;
}
.wrn-timeline__marker[data-status="upcoming"] {
color: var(--wrn-color-text-subtle, var(--wrn-color-text-muted));
background: var(--wrn-color-surface);
box-shadow: inset 0 0 0 1.5px var(--wrn-color-border-strong, var(--wrn-color-border));
}
.wrn-timeline__item[data-status="current"] .wrn-timeline__card {
border-color: color-mix(in srgb, var(--wrn-timeline-accent) 45%, var(--wrn-color-border));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-timeline-accent) 10%, transparent), var(--wrn-shadow-1);
}
.wrn-timeline__item[data-status="upcoming"] .wrn-timeline__card { opacity: 0.72; }
.wrn-timeline__item[data-status="upcoming"] .wrn-timeline__item-title { color: var(--wrn-color-text-muted); }
@keyframes wrn-timeline-pulse {
50% { box-shadow: 0 0 0 1px var(--wrn-timeline-accent), 0 0 0 8px color-mix(in srgb, var(--wrn-timeline-accent) 6%, transparent); }
}
/* --- Card variants ----------------------------------------------------- */
.wrn-timeline[data-variant="soft"] .wrn-timeline__card {
border-color: transparent;
background: color-mix(in srgb, var(--wrn-timeline-accent) 5%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
box-shadow: none;
}
.wrn-timeline[data-variant="raised"] .wrn-timeline__card {
border-color: var(--wrn-color-border);
box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-2);
}
.wrn-timeline[data-variant="outline"] .wrn-timeline__card {
background: transparent;
border-style: dashed;
box-shadow: none;
}
/* Compact: a dense dot rail with the time inline, for drawers and panels. */
.wrn-timeline[data-variant="compact"] .wrn-timeline__list { gap: 0; padding-inline-start: 1.75rem; }
.wrn-timeline[data-variant="compact"] .wrn-timeline__list::before { inset-block: 0.5rem; inset-inline-start: 0.4375rem; width: 1px; }
.wrn-timeline[data-variant="compact"] .wrn-timeline__marker {
top: 0.625rem; inset-inline-start: -1.75rem; width: 0.875rem; height: 0.875rem; border-width: 2px;
box-shadow: 0 0 0 1px color-mix(in srgb, var(--wrn-timeline-accent) 40%, var(--wrn-color-border));
}
.wrn-timeline[data-variant="compact"] .wrn-timeline__marker > * { display: none; }
.wrn-timeline[data-variant="compact"] .wrn-timeline__card {
padding: 0.4rem 0 0.9rem; border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
.wrn-timeline[data-variant="compact"] .wrn-timeline__card-header { flex-direction: row; align-items: baseline; justify-content: space-between; }
.wrn-timeline[data-variant="compact"] .wrn-timeline__item-title { font-size: 0.875rem; font-weight: 550; }
.wrn-timeline[data-variant="compact"] .wrn-timeline__copy { margin-top: 0.125rem; font-size: 0.8125rem; }
/* Alternate: a centred spine with cards alternating sides once the
timeline itself is wide enough (container query, not viewport). */
.wrn-timeline[data-variant="alternate"] { container: wrn-timeline / inline-size; }
@container wrn-timeline (min-width: 40rem) {
.wrn-timeline[data-variant="alternate"] .wrn-timeline__list { padding-inline-start: 0; gap: 1.5rem; }
.wrn-timeline[data-variant="alternate"] .wrn-timeline__list::before { inset-inline-start: calc(50% - 1px); }
.wrn-timeline[data-variant="alternate"] .wrn-timeline__item { width: calc(50% - 2rem); }
.wrn-timeline[data-variant="alternate"] .wrn-timeline__item:nth-of-type(even) { margin-inline-start: auto; }
.wrn-timeline[data-variant="alternate"] .wrn-timeline__item:nth-of-type(odd) .wrn-timeline__marker { inset-inline-start: auto; inset-inline-end: -3rem; }
.wrn-timeline[data-variant="alternate"] .wrn-timeline__item:nth-of-type(even) .wrn-timeline__marker { inset-inline-start: -3rem; }
.wrn-timeline[data-variant="alternate"] .wrn-timeline__item:nth-of-type(odd) .wrn-timeline__card { text-align: end; }
.wrn-timeline[data-variant="alternate"] .wrn-timeline__item:nth-of-type(odd) .wrn-timeline__card-header { flex-direction: row-reverse; }
}
/* --- Sizes --------------------------------------------------------------- */
.wrn-timeline[data-size="sm"] .wrn-timeline__title { font-size: 1rem; }
.wrn-timeline[data-size="sm"] .wrn-timeline__card { padding: 0.75rem 0.875rem; }
.wrn-timeline[data-size="sm"] .wrn-timeline__item-title { font-size: 0.875rem; }
.wrn-timeline[data-size="sm"] .wrn-timeline__list { gap: 0.625rem; }
.wrn-timeline[data-size="lg"] .wrn-timeline__title { font-size: 1.5rem; }
.wrn-timeline[data-size="lg"] .wrn-timeline__card { padding: 1.375rem 1.5rem; }
.wrn-timeline[data-size="lg"] .wrn-timeline__item-title { font-size: 1.0625rem; }
.wrn-timeline[data-size="lg"] .wrn-timeline__list { gap: 1.25rem; }
@media (prefers-reduced-motion: reduce) {
.wrn-timeline__marker[data-status="current"] { animation: none; }
}
}
}
packages/ui/components/Toaster.wrn
+18 -15
View File
@@ -699,12 +699,12 @@ component Toaster {
align-items: flex-start;
gap: 0.7rem;
overflow: hidden;
padding: 0.85rem 0.9rem;
padding: 0.8rem 0.875rem;
color: var(--wrn-color-text);
background: var(--wrn-color-surface-raised);
border: 1px solid var(--wrn-color-border);
border-radius: 0.9rem;
box-shadow: 0 18px 40px color-mix(in srgb, black 28%, transparent);
border-radius: var(--wrn-radius);
box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
pointer-events: auto;
animation: wrn-toast-in 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@@ -725,7 +725,7 @@ component Toaster {
.wrn-toast__indicator {
flex: 0 0 auto;
width: 0.4rem;
width: 3px;
align-self: stretch;
border-radius: 999px;
background: var(--toast-accent, var(--wrn-color-primary));
@@ -784,14 +784,15 @@ component Toaster {
.wrn-toast__title {
color: var(--wrn-color-text);
font-size: 0.85rem;
font-weight: 650;
font-size: 0.875rem;
font-weight: 620;
letter-spacing: -0.008em;
line-height: 1.35;
}
.wrn-toast__message {
color: var(--wrn-color-text-muted);
font-size: 0.82rem;
font-size: 0.8125rem;
line-height: 1.5;
}
@@ -822,14 +823,16 @@ component Toaster {
min-height: 1.75rem;
display: inline-flex;
align-items: center;
padding: 0 0.6rem;
color: var(--toast-accent, var(--wrn-color-primary));
background: transparent;
border: 1px solid color-mix(in srgb, var(--toast-accent, var(--wrn-color-primary)) 40%, transparent);
border-radius: 0.55rem;
padding: 0 0.625rem;
color: var(--wrn-color-text);
background: linear-gradient(180deg, var(--wrn-color-surface), var(--wrn-color-surface-soft, var(--wrn-color-surface)));
border: 1px solid var(--wrn-color-border);
border-bottom-color: var(--wrn-color-border-strong, var(--wrn-color-border));
border-radius: calc(var(--wrn-radius-sm) - 2px);
box-shadow: var(--wrn-shadow-1);
font: inherit;
font-size: 0.78rem;
font-weight: 650;
font-weight: 600;
cursor: pointer;
}
@@ -852,14 +855,14 @@ component Toaster {
color: var(--wrn-color-text-muted);
background: transparent;
border: 0;
border-radius: 999px;
border-radius: calc(var(--wrn-radius-sm) - 2px);
cursor: pointer;
transition: color 150ms ease, background 150ms ease;
}
.wrn-toast__close:hover {
color: var(--wrn-color-text);
background: var(--wrn-color-surface-soft);
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-soft));
}
.wrn-toast__close svg {
packages/ui/components/ToggleCount.wrn
+32 -29
View File
@@ -310,32 +310,31 @@ component ToggleCount {
.wrn-next__toggle-count-segmented {
display: inline-flex;
gap: 0.2rem;
padding: 0.2rem;
border-radius: calc(var(--wrn-radius-sm) + 0.15rem);
background: var(--wrn-color-surface-2);
box-shadow: inset 0 0 0 1px var(--wrn-color-border);
gap: 0.125rem;
padding: 0.1875rem;
border-radius: calc(var(--wrn-radius-sm) + 0.1875rem);
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.06), inset 0 0 0 1px var(--wrn-color-border);
}
.wrn-next__toggle-count-segmented button {
min-height: 2.35rem;
padding: 0.45rem 0.8rem;
min-height: 2rem;
padding: 0.35rem 0.8rem;
border: 0;
border-radius: var(--wrn-radius-sm);
background: transparent;
color: var(--wrn-color-muted);
color: var(--wrn-color-text-muted);
font: inherit;
font-size: 0.78rem;
font-weight: 700;
font-size: 0.8125rem;
font-weight: 600;
cursor: pointer;
transition: color 120ms ease, background-color 120ms ease;
}
.wrn-next__toggle-count-segmented button[aria-pressed="true"] {
background: var(--wrn-color-surface);
background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
color: var(--wrn-color-text);
box-shadow:
var(--wrn-shadow-1),
inset 0 -2px var(--wrn-toggle-count-accent);
box-shadow: 0 0 0 1px var(--wrn-color-border), var(--wrn-shadow-1);
}
.wrn-next__toggle-count-segmented button:focus-visible,
@@ -366,14 +365,15 @@ component ToggleCount {
.wrn-next__toggle-count-switch {
position: relative;
width: 2.65rem;
height: 1.45rem;
padding: 0.15rem;
border: 1px solid var(--wrn-color-border);
width: 2.375rem;
height: 1.375rem;
padding: 0.125rem;
border: 1px solid color-mix(in srgb, var(--wrn-color-border-strong, var(--wrn-color-border)) 70%, transparent);
border-radius: 999px;
background: var(--wrn-color-surface-2);
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.1);
cursor: pointer;
transition: background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
transition: background-color var(--wrn-motion-base) var(--wrn-ease-standard);
}
.wrn-next__toggle-count-switch > span {
@@ -381,19 +381,19 @@ component ToggleCount {
width: 1rem;
height: 1rem;
border-radius: 50%;
background: var(--wrn-color-text);
box-shadow: var(--wrn-shadow-1);
transition: transform var(--wrn-motion-fast) var(--wrn-ease-standard);
background: #fff;
box-shadow: 0 1px 2px rgb(0 0 0 / 0.22), 0 0 0 0.5px rgb(0 0 0 / 0.06);
transition: transform var(--wrn-motion-base) var(--wrn-ease-emphasized);
}
.wrn-next__toggle-count-switch[aria-checked="true"] {
border-color: var(--wrn-toggle-count-accent);
border-color: color-mix(in srgb, var(--wrn-toggle-count-accent) 80%, black);
background: var(--wrn-toggle-count-accent);
}
.wrn-next__toggle-count-switch[aria-checked="true"] > span {
background: white;
transform: translateX(1.15rem);
background: #fff;
transform: translateX(1rem);
}
.wrn-next__toggle-count-items {
@@ -401,8 +401,9 @@ component ToggleCount {
grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
overflow: hidden;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-md);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-1);
}
.wrn-next__toggle-count-items article {
@@ -427,7 +428,9 @@ component ToggleCount {
display: flex;
align-items: baseline;
gap: 0.2rem;
font-size: 1.5rem;
font-size: 1.625rem;
font-weight: 650;
letter-spacing: -0.035em;
line-height: 1;
}
@@ -533,7 +536,7 @@ component ToggleCount {
.wrn-component p {
margin: 0;
color: var(--wrn-color-muted);
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
line-height: 1.6;
}
}
packages/ui/components/TogglePassword.wrn
+103 -65
View File
@@ -189,7 +189,7 @@ component TogglePassword {
.wrn-next--toggle-password > label {
color: var(--wrn-color-text);
font-size: 0.75rem;
font-size: 0.8125rem;
font-weight: 600;
}
@@ -200,14 +200,14 @@ component TogglePassword {
justify-content: space-between;
gap: 1rem;
color: var(--wrn-color-text);
font-size: 0.75rem;
font-size: 0.8125rem;
font-weight: 600;
}
.wrn-next__password-heading > :is(a, span) {
color: var(--wrn-component-color);
font-size: 0.75rem;
font-weight: 500;
color: var(--wrn-color-primary-text, var(--wrn-component-color));
font-size: 0.78rem;
font-weight: 550;
text-decoration: none;
}
@@ -227,8 +227,8 @@ component TogglePassword {
.wrn-next__password-field > label {
color: var(--wrn-color-text);
font-size: 0.82em;
font-weight: 750;
font-size: 0.8125rem;
font-weight: 600;
}
.wrn-next__password-control {
@@ -244,16 +244,15 @@ component TogglePassword {
min-width: 0;
min-height: var(--wrn-control-height);
padding: 0.55rem 3rem 0.55rem 0.85rem;
border: 1px solid var(--wrn-color-border);
border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
outline: 0;
color: var(--wrn-color-text);
background: var(--wrn-color-surface);
background: var(--wrn-color-input-background, var(--wrn-color-surface));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
font: inherit;
font-size: 0.875rem;
transition:
border-color var(--wrn-motion-base) var(--wrn-ease-standard),
box-shadow var(--wrn-motion-base) var(--wrn-ease-standard);
transition: border-color var(--wrn-motion-base) var(--wrn-ease-standard), box-shadow var(--wrn-motion-base) var(--wrn-ease-standard);
}
.wrn-next__password-leading-icon {
@@ -292,8 +291,8 @@ component TogglePassword {
.wrn-next__password-toggle:hover,
.wrn-next__password-toggle:focus-visible {
color: var(--wrn-component-color);
background: color-mix(in srgb, var(--wrn-component-color) 10%, transparent);
color: var(--wrn-color-text);
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
outline: 0;
}
@@ -326,9 +325,9 @@ component TogglePassword {
display: inline-flex;
width: fit-content;
align-items: center;
gap: 0.55rem;
color: var(--wrn-color-muted);
font-size: 0.78em;
gap: 0.5rem;
color: var(--wrn-color-text-muted);
font-size: 0.8125rem;
cursor: pointer;
}
@@ -409,7 +408,7 @@ component TogglePassword {
.wrn-component p {
margin: 0;
color: var(--wrn-color-muted);
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
line-height: 1.6;
}
@@ -424,8 +423,9 @@ component TogglePassword {
display: block;
min-height: 1em;
margin-top: 0.25rem;
color: var(--wrn-color-danger);
font-size: 0.8rem;
color: var(--wrn-color-danger-text, var(--wrn-color-danger));
font-size: 0.78rem;
font-weight: 550;
}
.wrn-next--choice {
@@ -452,13 +452,14 @@ component TogglePassword {
width: 100%;
min-height: var(--wrn-control-height, 2.5rem);
padding: 0.5rem 0.75rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm, 6px);
border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm, 8px);
outline: 0;
color: var(--wrn-color-text);
background: var(--wrn-color-bg);
background: var(--wrn-color-input-background, var(--wrn-color-surface));
font: inherit;
font-weight: 500;
transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
}
.wrn-auth-form form > .wrn-next--field,
.wrn-auth-form form > .wrn-field {
@@ -472,8 +473,8 @@ component TogglePassword {
box-shadow: none;
}
.wrn-next--field :where(input, textarea, select):focus-visible {
border-color: var(--wrn-color-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
border-color: var(--wrn-field-color, var(--wrn-color-primary));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04), 0 0 0 3px color-mix(in srgb, var(--wrn-field-color, var(--wrn-color-primary)) 18%, transparent);
}
.wrn-next--field textarea {
resize: vertical;
@@ -507,12 +508,14 @@ component TogglePassword {
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.35;
letter-spacing: -0.005em;
}
.wrn-next__field-hint,
.wrn-next__field-help {
color: var(--wrn-color-muted);
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-size: 0.75rem;
font-weight: 500;
font-weight: 450;
line-height: 1.45;
}
.wrn-next__field-control {
position: relative;
@@ -520,10 +523,11 @@ component TogglePassword {
}
.wrn-next__field-control > :is(input, textarea, select) {
padding-inline: 0.85rem;
border-color: var(--wrn-color-border);
border-color: var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
font-size: 0.8125rem;
background: var(--wrn-color-input-background, var(--wrn-color-surface));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
font-size: 0.875rem;
}
.wrn-next__field-control[data-has-icon="true"][data-icon-position="start"] > :is(input, textarea, select) {
padding-inline-start: 2.5rem;
@@ -564,7 +568,8 @@ component TogglePassword {
}
.wrn-next--field[data-variant="ghost"] .wrn-next__field-control > :is(input, textarea, select) {
border-color: transparent;
background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
box-shadow: none;
}
.wrn-next__field-floating-label {
position: absolute;
@@ -605,9 +610,9 @@ component TogglePassword {
}
.wrn-next__field-error {
min-height: 1em;
color: var(--wrn-color-danger);
font-size: 0.82em;
font-weight: 600;
color: var(--wrn-color-danger-text, var(--wrn-color-danger));
font-size: 0.78rem;
font-weight: 550;
}
.wrn-next__field-error:empty {
display: none;
@@ -615,14 +620,16 @@ component TogglePassword {
.wrn-next--field[data-invalid="true"] :is(input, textarea, select),
.wrn-next--choice-field[data-invalid="true"] input {
border-color: var(--wrn-color-danger);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-danger) 12%, transparent);
}
.wrn-next--field :is(input, textarea, select):disabled,
.wrn-next--choice-field input:disabled {
cursor: not-allowed;
opacity: 0.58;
opacity: 0.55;
background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
}
.wrn-next--field :is(input, textarea, select):read-only {
background: var(--wrn-color-surface-2);
background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
}
.wrn-next--field[data-inline="true"],
.wrn-next--choice-field[data-inline="true"] {
@@ -679,11 +686,13 @@ component TogglePassword {
display: flex;
min-width: 0;
align-items: center;
gap: 0.65rem;
gap: 0.625rem;
color: var(--wrn-color-text);
width: 100%;
font-size: 0.75rem;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.4;
cursor: pointer;
}
.wrn-next__checkbox-content > .wrn-next__choice {
width: 100%;
@@ -698,12 +707,13 @@ component TogglePassword {
.wrn-next__choice-copy {
display: grid;
min-width: 0;
gap: 0.15rem;
line-height: 1.35;
gap: 0.125rem;
line-height: 1.4;
}
.wrn-next__choice-copy small {
color: var(--wrn-color-muted);
font-weight: 500;
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-size: 0.78rem;
font-weight: 450;
}
.wrn-next__radio-group,
.wrn-next__checkbox-group {
@@ -723,15 +733,18 @@ component TogglePassword {
.wrn-next--radio-field[data-card="true"] .wrn-next--radio,
.wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox {
min-height: 4.5rem;
padding: 0.85rem;
padding: 0.9rem 1rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-1);
transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
}
.wrn-next--radio-field[data-card="true"] .wrn-next--radio:has(input:checked),
.wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox:has(input:checked) {
border-color: var(--wrn-field-color);
box-shadow: 0 0 0 1px var(--wrn-field-color);
background: color-mix(in srgb, var(--wrn-field-color) 5%, var(--wrn-color-surface));
box-shadow: 0 0 0 1px var(--wrn-field-color), var(--wrn-shadow-1);
}
.wrn-next--radio-field[data-list="true"] .wrn-next--radio,
.wrn-next--checkbox-field[data-list="true"] .wrn-next--checkbox {
@@ -752,19 +765,21 @@ component TogglePassword {
}
.wrn-next__choice[data-variant="outlined"],
.wrn-next__choice[data-variant="floating"] {
padding: 0.65rem 0.8rem;
padding: 0.7rem 0.85rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
}
.wrn-next__choice[data-variant="pill"] {
padding: 0.65rem 1rem;
padding: 0.6rem 1rem;
border: 1px solid color-mix(in srgb, var(--wrn-field-color) 22%, var(--wrn-color-border));
border-radius: 999px;
background: color-mix(in srgb, var(--wrn-field-color) 9%, var(--wrn-color-surface));
background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface));
}
.wrn-next__choice[data-variant="ghost"] {
padding: 0.65rem 0.8rem;
padding: 0.65rem 0.85rem;
border-radius: var(--wrn-radius-sm);
background: color-mix(in srgb, var(--wrn-field-color) 7%, transparent);
background: color-mix(in srgb, var(--wrn-field-color) 6%, transparent);
}
.wrn-next__choice[data-variant="underline"] {
padding-block: 0.5rem;
@@ -798,25 +813,35 @@ component TogglePassword {
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.7rem 0.85rem;
border: 1px solid var(--wrn-color-border);
padding: 0.55rem 0.85rem;
border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
background: var(--wrn-color-input-background, var(--wrn-color-surface));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
color: var(--wrn-color-text);
font: inherit;
font-size: 0.875rem;
font-variant-numeric: tabular-nums;
text-align: left;
cursor: pointer;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.wrn-next__calendar,
.wrn-next__time-panel {
z-index: 20;
position: absolute;
z-index: 40;
top: 100%;
left: 0;
display: grid;
width: min(100%, 22rem);
width: min(calc(100vw - 2rem), 19.5rem);
gap: 0.75rem;
padding: 0.85rem;
margin-top: 0.375rem;
padding: 0.75rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-md);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-3);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
animation: wrn-popover-enter var(--wrn-motion-base, 160ms) var(--wrn-ease-emphasized, ease) both;
}
.wrn-next--date-picker[data-expanded="false"] .wrn-next__calendar,
.wrn-next--time-picker[data-expanded="false"] .wrn-next__time-panel {
@@ -826,29 +851,42 @@ component TogglePassword {
.wrn-next__time-panel button {
min-height: 2.25rem;
border: 0;
border-radius: var(--wrn-radius-sm);
border-radius: calc(var(--wrn-radius-sm) - 2px);
background: transparent;
color: inherit;
font: inherit;
font-size: 0.8125rem;
font-variant-numeric: tabular-nums;
cursor: pointer;
transition: background-color 120ms ease, color 120ms ease;
}
.wrn-next__calendar-weekdays,
.wrn-next__calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0.2rem;
gap: 0.125rem;
text-align: center;
}
.wrn-next__calendar-weekdays {
color: var(--wrn-color-muted);
font-size: 0.75rem;
padding-bottom: 0.375rem;
border-bottom: 1px solid var(--wrn-color-border);
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-family: var(--wrn-font-mono, monospace);
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.wrn-next__calendar-grid button:hover,
.wrn-next__time-panel button:hover {
background: var(--wrn-color-surface-2);
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
}
.wrn-next__calendar-grid button[aria-pressed="true"],
.wrn-next__time-panel button[aria-pressed="true"] {
background: var(--wrn-field-color);
color: var(--wrn-color-primary-contrast, #fff);
box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--wrn-field-color) 35%, transparent);
font-weight: 650;
}
.wrn-next__time-period {
display: flex;
@@ -882,7 +920,7 @@ component TogglePassword {
.wrn-next--field[data-variant="ghost"]
:is(.wrn-next__input-group-control, .wrn-next__file-control, .wrn-next__color-control) {
border-color: transparent;
background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
}
@media (max-width: 640px) {
.wrn-next--field[data-inline="true"],
packages/ui/components/TreeView.wrn
+38 -5
View File
@@ -87,17 +87,50 @@ component TreeView {
.wrn-tree-view { display: grid; gap: 0.5rem; color: var(--wrn-color-text); }
.wrn-tree-view__title { font-size: 0.95rem; }
.wrn-tree-view__description, .wrn-tree-view__empty { margin: 0; color: var(--wrn-color-muted); font-size: 0.8rem; }
.wrn-tree-view__tree { display: grid; gap: 0.15rem; padding: 0.4rem; border: 1px solid var(--wrn-color-border); border-radius: var(--wrn-radius); background: var(--wrn-color-surface); }
.wrn-tree-view__tree {
display: grid;
gap: 0.0625rem;
padding: 0.3rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-1);
}
.wrn-tree-view__row { display: flex; min-width: 0; align-items: center; gap: 0.2rem; border-radius: var(--wrn-radius-sm); }
.wrn-tree-view__row[aria-selected="true"] { background: var(--wrn-color-primary-soft); }
.wrn-tree-view__row[aria-selected="true"] {
background: color-mix(in srgb, var(--wrn-color-primary) 9%, var(--wrn-color-surface));
box-shadow: inset 2px 0 0 var(--wrn-color-primary);
}
.wrn-tree-view__toggle { display: inline-grid; width: 1.8rem; height: 1.8rem; flex: none; padding: 0; place-items: center; border: 0; border-radius: 0.35rem; color: var(--wrn-color-muted); background: transparent; }
button.wrn-tree-view__toggle { cursor: pointer; }
.wrn-tree-view__toggle > span { width: 0.9rem; height: 0.9rem; transition: transform var(--wrn-motion-fast); }
.wrn-tree-view__row[aria-expanded="true"] > .wrn-tree-view__toggle > span { transform: rotate(90deg); }
.wrn-tree-view__node { display: flex; min-width: 0; flex: 1; align-items: center; gap: 0.45rem; padding: 0.45rem 0.5rem; border: 0; border-radius: var(--wrn-radius-sm); color: inherit; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.wrn-tree-view__node:hover, button.wrn-tree-view__toggle:hover { background: var(--wrn-color-surface-2); }
.wrn-tree-view__node {
display: flex;
min-width: 0;
flex: 1;
align-items: center;
gap: 0.45rem;
padding: 0.375rem 0.5rem;
border: 0;
border-radius: calc(var(--wrn-radius-sm) - 2px);
color: inherit;
background: transparent;
font: inherit;
font-size: 0.8125rem;
text-align: left;
cursor: pointer;
}
.wrn-tree-view__node:hover, button.wrn-tree-view__toggle:hover {
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
}
.wrn-tree-view__node:focus-visible, button.wrn-tree-view__toggle:focus-visible { outline: 2px solid var(--wrn-color-focus); outline-offset: -2px; }
.wrn-tree-view__node > [class*="icon-"] { width: 1rem; height: 1rem; flex: none; color: var(--wrn-color-primary); }
.wrn-tree-view__node > [class*="icon-"] {
width: 1rem;
height: 1rem;
flex: none;
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
}
.wrn-tree-view__group { display: grid; margin-left: 1.8rem; padding-left: 0.45rem; border-left: 1px solid var(--wrn-color-border); }
}
}
packages/ui/components/alert.wrn
+30 -23
View File
@@ -145,11 +145,14 @@ component Alert {
}
style {
/* Soft: a quiet tinted panel with an accent rail on the leading edge. The
rail is a background layer so it never fights the shadow prop. */
.wrn-next--alert-soft {
border-color: color-mix(in srgb, var(--wrn-alert-color) 45%, var(--wrn-color-border));
background: var(--wrn-alert-soft);
border-color: color-mix(in srgb, var(--wrn-alert-color) 24%, var(--wrn-color-border));
background:
linear-gradient(var(--wrn-alert-color), var(--wrn-alert-color)) left / 3px 100% no-repeat,
var(--wrn-alert-soft);
}
.wrn-next--alert-soft .wrn-next__alert-title,
.wrn-next--alert-soft .wrn-next__alert-icon,
.wrn-next--alert-soft .wrn-next__alert-actions a {
color: var(--wrn-alert-ink, var(--wrn-color-primary-text));
@@ -179,7 +182,6 @@ component Alert {
border-color: var(--wrn-alert-ink, var(--wrn-color-primary-text));
background: var(--wrn-color-surface);
}
.wrn-next--alert-bordered .wrn-next__alert-title,
.wrn-next--alert-bordered .wrn-next__alert-icon,
.wrn-next--alert-bordered .wrn-next__alert-actions a {
color: var(--wrn-alert-ink, var(--wrn-color-primary-text));
@@ -189,7 +191,6 @@ component Alert {
border-left: 4px solid var(--wrn-alert-color);
background: var(--wrn-alert-soft);
}
.wrn-next--alert-accent .wrn-next__alert-title,
.wrn-next--alert-accent .wrn-next__alert-icon,
.wrn-next--alert-accent .wrn-next__alert-actions a {
color: var(--wrn-alert-ink, var(--wrn-color-primary-text));
@@ -197,12 +198,13 @@ component Alert {
.wrn-next--alert {
--wrn-alert-color: var(--wrn-component-color);
--wrn-alert-soft: color-mix(in srgb, var(--wrn-alert-color) 16%, var(--wrn-color-surface));
--wrn-alert-soft: color-mix(in srgb, var(--wrn-alert-color) 7%, var(--wrn-color-surface));
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 0.8rem;
align-items: start;
gap: 0.75rem;
width: 100%;
padding: 1rem;
padding: 0.875rem 1rem 0.875rem 1.125rem;
border: 1px solid transparent;
border-radius: var(--wrn-radius, 0.75rem);
color: var(--wrn-color-text);
@@ -229,19 +231,15 @@ component Alert {
}
.wrn-next--alert[data-shadow="sm"] {
box-shadow: 0 6px 16px color-mix(in srgb, #000 14%, transparent);
box-shadow: var(--wrn-shadow-1);
}
.wrn-next--alert[data-shadow="md"] {
box-shadow:
0 2px 6px color-mix(in srgb, #000 10%, transparent),
0 12px 28px color-mix(in srgb, #000 18%, transparent);
box-shadow: var(--wrn-shadow-2);
}
.wrn-next--alert[data-shadow="lg"] {
box-shadow:
0 4px 10px color-mix(in srgb, #000 12%, transparent),
0 20px 48px color-mix(in srgb, #000 24%, transparent);
box-shadow: var(--wrn-shadow-3);
}
.wrn-next--alert[data-color="secondary"] {
@@ -298,13 +296,19 @@ component Alert {
.wrn-next__alert-icon {
display: inline-grid;
width: 1.25rem;
height: 1.25rem;
width: 1.75rem;
height: 1.75rem;
place-items: center;
margin-top: 0.05rem;
margin-top: -0.125rem;
border-radius: var(--wrn-radius-sm, 0.5rem);
background: color-mix(in srgb, var(--wrn-alert-color) 14%, transparent);
color: var(--wrn-alert-ink, var(--wrn-color-primary-text));
}
.wrn-next--alert-solid .wrn-next__alert-icon {
background: rgb(255 255 255 / 0.18);
}
.wrn-next__alert-icon > span {
width: 1rem;
height: 1rem;
@@ -313,18 +317,21 @@ component Alert {
.wrn-next__alert-body {
display: grid;
min-width: 0;
gap: 0.35rem;
gap: 0.25rem;
}
.wrn-next__alert-title {
font-size: 0.88rem;
color: var(--wrn-color-text);
font-size: 0.875rem;
font-weight: 620;
letter-spacing: -0.01em;
line-height: 1.45;
}
.wrn-next__alert-body > p,
.wrn-next__alert-body li {
color: inherit;
font-size: 0.8rem;
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
font-size: 0.8125rem;
line-height: 1.55;
}
@@ -459,7 +466,7 @@ component Alert {
.wrn-component p {
margin: 0;
color: var(--wrn-color-muted);
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
line-height: 1.6;
}
}
packages/ui/components/avatar.wrn
+15 -17
View File
@@ -102,7 +102,7 @@ src: string = ""
}
.wrn-next__avatar-wrap {
--wrn-avatar-size: 3rem;
--wrn-avatar-size: 2.5rem;
--wrn-avatar-color: var(--wrn-color-primary);
position: relative;
display: inline-grid;
@@ -115,24 +115,24 @@ src: string = ""
}
.wrn-next__avatar-wrap[data-size="xs"] {
--wrn-avatar-size: 1.75rem;
--wrn-avatar-size: 1.5rem;
}
.wrn-next__avatar-wrap[data-size="sm"] {
--wrn-avatar-size: 2.25rem;
--wrn-avatar-size: 2rem;
}
.wrn-next__avatar-wrap[data-size="md"],
.wrn-next__avatar-wrap[data-size="default"] {
--wrn-avatar-size: 3rem;
--wrn-avatar-size: 2.5rem;
}
.wrn-next__avatar-wrap[data-size="lg"] {
--wrn-avatar-size: 4rem;
--wrn-avatar-size: 3.25rem;
}
.wrn-next__avatar-wrap[data-size="xl"] {
--wrn-avatar-size: 5rem;
--wrn-avatar-size: 4.5rem;
}
.wrn-next__avatar-wrap[data-color="secondary"] {
@@ -169,17 +169,15 @@ src: string = ""
height: 100%;
overflow: hidden;
place-items: center;
color: white;
border: 1px solid color-mix(in srgb, var(--wrn-avatar-color) 58%, var(--wrn-color-border));
color: color-mix(in srgb, var(--wrn-avatar-color) 78%, var(--wrn-color-text));
border: 1px solid color-mix(in srgb, var(--wrn-avatar-color) 22%, transparent);
border-radius: inherit;
background: var(--wrn-avatar-color);
box-shadow:
0 0 0 2px var(--wrn-color-bg),
0 5px 14px rgb(0 0 0 / 0.16);
background: color-mix(in srgb, var(--wrn-avatar-color) 14%, var(--wrn-color-surface));
box-shadow: 0 0 0 2px var(--wrn-color-surface), var(--wrn-shadow-1);
}
.wrn-next__avatar-wrap[data-shape="rounded"] {
border-radius: calc(var(--wrn-radius-sm, 0.5rem) * 0.72);
border-radius: calc(var(--wrn-avatar-size) * 0.28);
}
.wrn-next__avatar-wrap[data-shape="square"] {
@@ -193,10 +191,10 @@ src: string = ""
}
.wrn-next__avatar-initials {
font-size: calc(var(--wrn-avatar-size) * 0.32);
font-weight: 750;
font-size: calc(var(--wrn-avatar-size) * 0.36);
font-weight: 650;
line-height: 1;
letter-spacing: -0.02em;
letter-spacing: -0.01em;
}
.wrn-next__avatar-placeholder {
@@ -413,7 +411,7 @@ src: string = ""
.wrn-component p {
margin: 0;
color: var(--wrn-color-muted);
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
line-height: 1.6;
}
}
packages/ui/components/badge.wrn
+20 -15
View File
@@ -127,21 +127,23 @@ component Badge {
isolation: isolate;
display: inline-flex;
min-width: 0;
min-height: 1.65rem;
min-height: 1.5rem;
align-items: center;
justify-content: center;
gap: 0.35rem;
gap: 0.3rem;
max-width: var(--wrn-badge-max-width);
padding: 0.25rem 0.6rem;
color: white;
border: 1px solid var(--wrn-badge-color);
padding: 0.2rem 0.55rem;
color: var(--wrn-color-primary-contrast, #fff);
border: 1px solid color-mix(in srgb, var(--wrn-badge-color) 80%, black);
border-radius: 999px;
background: var(--wrn-badge-color);
box-shadow: none;
box-shadow: var(--wrn-highlight-edge, none);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: -0.003em;
line-height: 1;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.wrn-next__badge-label {
@@ -206,13 +208,14 @@ component Badge {
.wrn-next__badge[data-variant="soft"] {
color: var(--wrn-badge-ink, var(--wrn-badge-color));
border-color: transparent;
background: color-mix(in srgb, var(--wrn-badge-color) 15%, var(--wrn-color-surface));
border-color: color-mix(in srgb, var(--wrn-badge-color) 22%, transparent);
background: color-mix(in srgb, var(--wrn-badge-color) 10%, var(--wrn-color-surface));
box-shadow: none;
}
.wrn-next__badge[data-variant="outline"] {
color: var(--wrn-badge-ink, var(--wrn-badge-color));
border-color: color-mix(in srgb, var(--wrn-badge-color) 45%, var(--wrn-color-border));
background: transparent;
box-shadow: none;
}
@@ -221,11 +224,11 @@ component Badge {
color: var(--wrn-color-text);
border-color: var(--wrn-color-border);
background: var(--wrn-color-surface);
box-shadow: 0 4px 12px rgb(0 0 0 / 0.12);
box-shadow: var(--wrn-shadow-1);
}
.wrn-next__badge[data-shape="rounded"] {
border-radius: 0.4rem;
border-radius: 0.375rem;
}
.wrn-next__badge[data-shape="square"] {
@@ -309,18 +312,20 @@ component Badge {
.wrn-next__badge-anchor {
display: inline-flex;
min-height: 2.75rem;
min-height: 2.5rem;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.65rem 0.9rem;
padding: 0.55rem 0.9rem;
color: var(--wrn-color-text);
border: 1px solid var(--wrn-color-border);
border-radius: 0.5rem;
border-bottom-color: var(--wrn-color-border-strong, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-1);
font: inherit;
font-size: 0.875rem;
font-weight: 700;
font-weight: 600;
}
.wrn-next__badge-anchor > [class*="icon-"] {
@@ -424,7 +429,7 @@ component Badge {
.wrn-component p {
margin: 0;
color: var(--wrn-color-muted);
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
line-height: 1.6;
}
}
packages/ui/components/checkbox.wrn
+152 -50
View File
@@ -79,7 +79,6 @@ size: string = "default"
{#each options as option}
<label
class="wrn-next__choice wrn-next--checkbox"
for="{id || name}-{option.value}"
data-variant="{variant}"
data-disabled="{disabled || option.disabled}"
>
@@ -116,7 +115,6 @@ size: string = "default"
>
<label
class="wrn-next__choice wrn-next--checkbox"
for="{id || name}"
data-variant="{variant}"
data-icon-position="{iconPosition}"
>
@@ -175,6 +173,71 @@ size: string = "default"
}
style {
/* Drawn checkbox: recessed well at rest, raised accent keycap when on. */
.wrn-next--checkbox input[type="checkbox"] {
appearance: none;
display: inline-grid;
place-content: center;
flex: 0 0 auto;
width: 1.125rem;
height: 1.125rem;
margin: 0.0625rem 0 0;
border: 1.5px solid var(--wrn-color-border-strong, var(--wrn-color-border));
border-radius: 0.3125rem;
background: var(--wrn-color-input-background, var(--wrn-color-surface));
box-shadow: inset 0 1px 1px rgb(0 0 0 / 0.05);
cursor: pointer;
transition:
background-color var(--wrn-motion-fast) var(--wrn-ease-standard),
border-color var(--wrn-motion-fast) var(--wrn-ease-standard),
box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard);
}
.wrn-next--checkbox input[type="checkbox"]::after {
width: 0.7rem;
height: 0.7rem;
background: var(--wrn-color-primary-contrast, #fff);
content: "";
transform: scale(0.4);
opacity: 0;
transition:
transform var(--wrn-motion-fast) var(--wrn-ease-emphasized),
opacity var(--wrn-motion-fast) var(--wrn-ease-standard);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wrn-next--checkbox input[type="checkbox"]:hover:not(:disabled) {
border-color: color-mix(in srgb, var(--wrn-field-color) 60%, var(--wrn-color-border-strong, var(--wrn-color-border)));
}
.wrn-next--checkbox input[type="checkbox"]:checked,
.wrn-next--checkbox input[type="checkbox"][aria-checked="mixed"] {
border-color: color-mix(in srgb, var(--wrn-field-color) 80%, black);
background: var(--wrn-field-color);
box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--wrn-field-color) 30%, transparent);
}
.wrn-next--checkbox input[type="checkbox"]:checked::after {
transform: scale(1);
opacity: 1;
}
.wrn-next--checkbox input[type="checkbox"][aria-checked="mixed"]::after {
height: 0.125rem;
border-radius: 1px;
transform: scale(1);
opacity: 1;
-webkit-mask: none;
mask: none;
}
.wrn-next--checkbox input[type="checkbox"]:focus-visible {
outline: 2px solid var(--wrn-field-color);
outline-offset: 2px;
}
.wrn-next--checkbox-field[data-invalid="true"] input[type="checkbox"] {
border-color: var(--wrn-color-danger);
}
.wrn-next--checkbox:has(input:disabled) {
cursor: not-allowed;
opacity: 0.6;
}
.wrn-next__checkbox-content {
display: grid;
width: 100%;
@@ -265,7 +328,7 @@ size: string = "default"
.wrn-component p {
margin: 0;
color: var(--wrn-color-muted);
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
line-height: 1.6;
}
@@ -280,8 +343,9 @@ size: string = "default"
display: block;
min-height: 1em;
margin-top: 0.25rem;
color: var(--wrn-color-danger);
font-size: 0.8rem;
color: var(--wrn-color-danger-text, var(--wrn-color-danger));
font-size: 0.78rem;
font-weight: 550;
}
.wrn-next--choice {
@@ -308,13 +372,14 @@ size: string = "default"
width: 100%;
min-height: var(--wrn-control-height, 2.5rem);
padding: 0.5rem 0.75rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm, 6px);
border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm, 8px);
outline: 0;
color: var(--wrn-color-text);
background: var(--wrn-color-bg);
background: var(--wrn-color-input-background, var(--wrn-color-surface));
font: inherit;
font-weight: 500;
transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
}
.wrn-auth-form form > .wrn-next--field,
.wrn-auth-form form > .wrn-field {
@@ -328,8 +393,8 @@ size: string = "default"
box-shadow: none;
}
.wrn-next--field :where(input, textarea, select):focus-visible {
border-color: var(--wrn-color-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
border-color: var(--wrn-field-color, var(--wrn-color-primary));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04), 0 0 0 3px color-mix(in srgb, var(--wrn-field-color, var(--wrn-color-primary)) 18%, transparent);
}
.wrn-next--field textarea {
resize: vertical;
@@ -363,12 +428,14 @@ size: string = "default"
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.35;
letter-spacing: -0.005em;
}
.wrn-next__field-hint,
.wrn-next__field-help {
color: var(--wrn-color-muted);
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-size: 0.75rem;
font-weight: 500;
font-weight: 450;
line-height: 1.45;
}
.wrn-next__field-control {
position: relative;
@@ -376,10 +443,11 @@ size: string = "default"
}
.wrn-next__field-control > :is(input, textarea, select) {
padding-inline: 0.85rem;
border-color: var(--wrn-color-border);
border-color: var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
font-size: 0.8125rem;
background: var(--wrn-color-input-background, var(--wrn-color-surface));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
font-size: 0.875rem;
}
.wrn-next__field-control[data-has-icon="true"][data-icon-position="start"] > :is(input, textarea, select) {
padding-inline-start: 2.5rem;
@@ -420,7 +488,8 @@ size: string = "default"
}
.wrn-next--field[data-variant="ghost"] .wrn-next__field-control > :is(input, textarea, select) {
border-color: transparent;
background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
box-shadow: none;
}
.wrn-next__field-floating-label {
position: absolute;
@@ -461,9 +530,9 @@ size: string = "default"
}
.wrn-next__field-error {
min-height: 1em;
color: var(--wrn-color-danger);
font-size: 0.82em;
font-weight: 600;
color: var(--wrn-color-danger-text, var(--wrn-color-danger));
font-size: 0.78rem;
font-weight: 550;
}
.wrn-next__field-error:empty {
display: none;
@@ -471,14 +540,16 @@ size: string = "default"
.wrn-next--field[data-invalid="true"] :is(input, textarea, select),
.wrn-next--choice-field[data-invalid="true"] input {
border-color: var(--wrn-color-danger);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-danger) 12%, transparent);
}
.wrn-next--field :is(input, textarea, select):disabled,
.wrn-next--choice-field input:disabled {
cursor: not-allowed;
opacity: 0.58;
opacity: 0.55;
background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
}
.wrn-next--field :is(input, textarea, select):read-only {
background: var(--wrn-color-surface-2);
background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
}
.wrn-next--field[data-inline="true"],
.wrn-next--choice-field[data-inline="true"] {
@@ -535,11 +606,13 @@ size: string = "default"
display: flex;
min-width: 0;
align-items: center;
gap: 0.65rem;
gap: 0.625rem;
color: var(--wrn-color-text);
width: 100%;
font-size: 0.75rem;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.4;
cursor: pointer;
}
.wrn-next__checkbox-content > .wrn-next__choice {
width: 100%;
@@ -554,12 +627,13 @@ size: string = "default"
.wrn-next__choice-copy {
display: grid;
min-width: 0;
gap: 0.15rem;
line-height: 1.35;
gap: 0.125rem;
line-height: 1.4;
}
.wrn-next__choice-copy small {
color: var(--wrn-color-muted);
font-weight: 500;
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-size: 0.78rem;
font-weight: 450;
}
.wrn-next__radio-group,
.wrn-next__checkbox-group {
@@ -579,15 +653,18 @@ size: string = "default"
.wrn-next--radio-field[data-card="true"] .wrn-next--radio,
.wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox {
min-height: 4.5rem;
padding: 0.85rem;
padding: 0.9rem 1rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-1);
transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
}
.wrn-next--radio-field[data-card="true"] .wrn-next--radio:has(input:checked),
.wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox:has(input:checked) {
border-color: var(--wrn-field-color);
box-shadow: 0 0 0 1px var(--wrn-field-color);
background: color-mix(in srgb, var(--wrn-field-color) 5%, var(--wrn-color-surface));
box-shadow: 0 0 0 1px var(--wrn-field-color), var(--wrn-shadow-1);
}
.wrn-next--radio-field[data-list="true"] .wrn-next--radio,
.wrn-next--checkbox-field[data-list="true"] .wrn-next--checkbox {
@@ -608,19 +685,21 @@ size: string = "default"
}
.wrn-next__choice[data-variant="outlined"],
.wrn-next__choice[data-variant="floating"] {
padding: 0.65rem 0.8rem;
padding: 0.7rem 0.85rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
}
.wrn-next__choice[data-variant="pill"] {
padding: 0.65rem 1rem;
padding: 0.6rem 1rem;
border: 1px solid color-mix(in srgb, var(--wrn-field-color) 22%, var(--wrn-color-border));
border-radius: 999px;
background: color-mix(in srgb, var(--wrn-field-color) 9%, var(--wrn-color-surface));
background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface));
}
.wrn-next__choice[data-variant="ghost"] {
padding: 0.65rem 0.8rem;
padding: 0.65rem 0.85rem;
border-radius: var(--wrn-radius-sm);
background: color-mix(in srgb, var(--wrn-field-color) 7%, transparent);
background: color-mix(in srgb, var(--wrn-field-color) 6%, transparent);
}
.wrn-next__choice[data-variant="underline"] {
padding-block: 0.5rem;
@@ -654,25 +733,35 @@ size: string = "default"
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.7rem 0.85rem;
border: 1px solid var(--wrn-color-border);
padding: 0.55rem 0.85rem;
border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
background: var(--wrn-color-input-background, var(--wrn-color-surface));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
color: var(--wrn-color-text);
font: inherit;
font-size: 0.875rem;
font-variant-numeric: tabular-nums;
text-align: left;
cursor: pointer;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.wrn-next__calendar,
.wrn-next__time-panel {
z-index: 20;
position: absolute;
z-index: 40;
top: 100%;
left: 0;
display: grid;
width: min(100%, 22rem);
width: min(calc(100vw - 2rem), 19.5rem);
gap: 0.75rem;
padding: 0.85rem;
margin-top: 0.375rem;
padding: 0.75rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-md);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-3);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
animation: wrn-popover-enter var(--wrn-motion-base, 160ms) var(--wrn-ease-emphasized, ease) both;
}
.wrn-next--date-picker[data-expanded="false"] .wrn-next__calendar,
.wrn-next--time-picker[data-expanded="false"] .wrn-next__time-panel {
@@ -682,29 +771,42 @@ size: string = "default"
.wrn-next__time-panel button {
min-height: 2.25rem;
border: 0;
border-radius: var(--wrn-radius-sm);
border-radius: calc(var(--wrn-radius-sm) - 2px);
background: transparent;
color: inherit;
font: inherit;
font-size: 0.8125rem;
font-variant-numeric: tabular-nums;
cursor: pointer;
transition: background-color 120ms ease, color 120ms ease;
}
.wrn-next__calendar-weekdays,
.wrn-next__calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0.2rem;
gap: 0.125rem;
text-align: center;
}
.wrn-next__calendar-weekdays {
color: var(--wrn-color-muted);
font-size: 0.75rem;
padding-bottom: 0.375rem;
border-bottom: 1px solid var(--wrn-color-border);
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-family: var(--wrn-font-mono, monospace);
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.wrn-next__calendar-grid button:hover,
.wrn-next__time-panel button:hover {
background: var(--wrn-color-surface-2);
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
}
.wrn-next__calendar-grid button[aria-pressed="true"],
.wrn-next__time-panel button[aria-pressed="true"] {
background: var(--wrn-field-color);
color: var(--wrn-color-primary-contrast, #fff);
box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--wrn-field-color) 35%, transparent);
font-weight: 650;
}
.wrn-next__time-period {
display: flex;
@@ -738,7 +840,7 @@ size: string = "default"
.wrn-next--field[data-variant="ghost"]
:is(.wrn-next__input-group-control, .wrn-next__file-control, .wrn-next__color-control) {
border-color: transparent;
background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
}
@media (max-width: 640px) {
.wrn-next--field[data-inline="true"],
packages/ui/components/input.wrn
+84 -49
View File
@@ -233,7 +233,7 @@ component Input {
.wrn-component p {
margin: 0;
color: var(--wrn-color-muted);
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
line-height: 1.6;
}
@@ -248,8 +248,9 @@ component Input {
display: block;
min-height: 1em;
margin-top: 0.25rem;
color: var(--wrn-color-danger);
font-size: 0.8rem;
color: var(--wrn-color-danger-text, var(--wrn-color-danger));
font-size: 0.78rem;
font-weight: 550;
}
.wrn-next--choice {
@@ -276,13 +277,14 @@ component Input {
width: 100%;
min-height: var(--wrn-control-height, 2.5rem);
padding: 0.5rem 0.75rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm, 6px);
border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm, 8px);
outline: 0;
color: var(--wrn-color-text);
background: var(--wrn-color-bg);
background: var(--wrn-color-input-background, var(--wrn-color-surface));
font: inherit;
font-weight: 500;
transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
}
.wrn-auth-form form > .wrn-next--field,
.wrn-auth-form form > .wrn-field {
@@ -299,10 +301,8 @@ component Input {
border-color: var(--wrn-color-input-border-hover, var(--wrn-color-border-strong));
}
.wrn-next--field :where(input, textarea, select):focus-visible {
border-color: var(--wrn-color-primary);
box-shadow:
inset 0 1px 2px rgb(0 0 0 / 0.04),
0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 18%, transparent);
border-color: var(--wrn-field-color, var(--wrn-color-primary));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04), 0 0 0 3px color-mix(in srgb, var(--wrn-field-color, var(--wrn-color-primary)) 18%, transparent);
}
.wrn-next--field textarea {
resize: vertical;
@@ -342,25 +342,26 @@ component Input {
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.35;
letter-spacing: -0.005em;
}
.wrn-next__field-hint,
.wrn-next__field-help {
color: var(--wrn-color-muted);
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-size: 0.75rem;
font-weight: 500;
font-weight: 450;
line-height: 1.45;
}
.wrn-next__field-control {
position: relative;
min-width: 0;
}
.wrn-next__field-control > :is(input, textarea, select) {
/* Recessed well: the inverse of the raised keycap button. */
padding-inline: 0.85rem;
border-color: var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-input-background, var(--wrn-color-surface));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
font-size: 0.8125rem;
font-size: 0.875rem;
}
.wrn-next__field-control > :is(input, textarea)::placeholder {
color: var(--wrn-color-input-placeholder, var(--wrn-color-muted));
@@ -423,7 +424,8 @@ component Input {
}
.wrn-next--field[data-variant="ghost"] .wrn-next__field-control > :is(input, textarea, select) {
border-color: transparent;
background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
box-shadow: none;
}
.wrn-next__field-floating-label {
position: absolute;
@@ -464,9 +466,9 @@ component Input {
}
.wrn-next__field-error {
min-height: 1em;
color: var(--wrn-color-danger);
font-size: 0.82em;
font-weight: 600;
color: var(--wrn-color-danger-text, var(--wrn-color-danger));
font-size: 0.78rem;
font-weight: 550;
}
.wrn-next__field-error:empty {
display: none;
@@ -478,14 +480,16 @@ component Input {
.wrn-next--field[data-invalid="true"] :is(input, textarea, select),
.wrn-next--choice-field[data-invalid="true"] input {
border-color: var(--wrn-color-danger);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-danger) 12%, transparent);
}
.wrn-next--field :is(input, textarea, select):disabled,
.wrn-next--choice-field input:disabled {
cursor: not-allowed;
opacity: 0.58;
opacity: 0.55;
background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
}
.wrn-next--field :is(input, textarea, select):read-only {
background: var(--wrn-color-surface-2);
background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
}
.wrn-next--field[data-inline="true"],
.wrn-next--choice-field[data-inline="true"] {
@@ -542,11 +546,13 @@ component Input {
display: flex;
min-width: 0;
align-items: center;
gap: 0.65rem;
gap: 0.625rem;
color: var(--wrn-color-text);
width: 100%;
font-size: 0.75rem;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.4;
cursor: pointer;
}
.wrn-next__checkbox-content > .wrn-next__choice {
width: 100%;
@@ -561,12 +567,13 @@ component Input {
.wrn-next__choice-copy {
display: grid;
min-width: 0;
gap: 0.15rem;
line-height: 1.35;
gap: 0.125rem;
line-height: 1.4;
}
.wrn-next__choice-copy small {
color: var(--wrn-color-muted);
font-weight: 500;
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-size: 0.78rem;
font-weight: 450;
}
.wrn-next__radio-group,
.wrn-next__checkbox-group {
@@ -586,15 +593,18 @@ component Input {
.wrn-next--radio-field[data-card="true"] .wrn-next--radio,
.wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox {
min-height: 4.5rem;
padding: 0.85rem;
padding: 0.9rem 1rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-1);
transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
}
.wrn-next--radio-field[data-card="true"] .wrn-next--radio:has(input:checked),
.wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox:has(input:checked) {
border-color: var(--wrn-field-color);
box-shadow: 0 0 0 1px var(--wrn-field-color);
background: color-mix(in srgb, var(--wrn-field-color) 5%, var(--wrn-color-surface));
box-shadow: 0 0 0 1px var(--wrn-field-color), var(--wrn-shadow-1);
}
.wrn-next--radio-field[data-list="true"] .wrn-next--radio,
.wrn-next--checkbox-field[data-list="true"] .wrn-next--checkbox {
@@ -615,19 +625,21 @@ component Input {
}
.wrn-next__choice[data-variant="outlined"],
.wrn-next__choice[data-variant="floating"] {
padding: 0.65rem 0.8rem;
padding: 0.7rem 0.85rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
}
.wrn-next__choice[data-variant="pill"] {
padding: 0.65rem 1rem;
padding: 0.6rem 1rem;
border: 1px solid color-mix(in srgb, var(--wrn-field-color) 22%, var(--wrn-color-border));
border-radius: 999px;
background: color-mix(in srgb, var(--wrn-field-color) 9%, var(--wrn-color-surface));
background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface));
}
.wrn-next__choice[data-variant="ghost"] {
padding: 0.65rem 0.8rem;
padding: 0.65rem 0.85rem;
border-radius: var(--wrn-radius-sm);
background: color-mix(in srgb, var(--wrn-field-color) 7%, transparent);
background: color-mix(in srgb, var(--wrn-field-color) 6%, transparent);
}
.wrn-next__choice[data-variant="underline"] {
padding-block: 0.5rem;
@@ -661,25 +673,35 @@ component Input {
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.7rem 0.85rem;
border: 1px solid var(--wrn-color-border);
padding: 0.55rem 0.85rem;
border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
background: var(--wrn-color-input-background, var(--wrn-color-surface));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
color: var(--wrn-color-text);
font: inherit;
font-size: 0.875rem;
font-variant-numeric: tabular-nums;
text-align: left;
cursor: pointer;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.wrn-next__calendar,
.wrn-next__time-panel {
z-index: 20;
position: absolute;
z-index: 40;
top: 100%;
left: 0;
display: grid;
width: min(100%, 22rem);
width: min(calc(100vw - 2rem), 19.5rem);
gap: 0.75rem;
padding: 0.85rem;
margin-top: 0.375rem;
padding: 0.75rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-md);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-3);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
animation: wrn-popover-enter var(--wrn-motion-base, 160ms) var(--wrn-ease-emphasized, ease) both;
}
.wrn-next--date-picker[data-expanded="false"] .wrn-next__calendar,
.wrn-next--time-picker[data-expanded="false"] .wrn-next__time-panel {
@@ -689,29 +711,42 @@ component Input {
.wrn-next__time-panel button {
min-height: 2.25rem;
border: 0;
border-radius: var(--wrn-radius-sm);
border-radius: calc(var(--wrn-radius-sm) - 2px);
background: transparent;
color: inherit;
font: inherit;
font-size: 0.8125rem;
font-variant-numeric: tabular-nums;
cursor: pointer;
transition: background-color 120ms ease, color 120ms ease;
}
.wrn-next__calendar-weekdays,
.wrn-next__calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0.2rem;
gap: 0.125rem;
text-align: center;
}
.wrn-next__calendar-weekdays {
color: var(--wrn-color-muted);
font-size: 0.75rem;
padding-bottom: 0.375rem;
border-bottom: 1px solid var(--wrn-color-border);
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-family: var(--wrn-font-mono, monospace);
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.wrn-next__calendar-grid button:hover,
.wrn-next__time-panel button:hover {
background: var(--wrn-color-surface-2);
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
}
.wrn-next__calendar-grid button[aria-pressed="true"],
.wrn-next__time-panel button[aria-pressed="true"] {
background: var(--wrn-field-color);
color: var(--wrn-color-primary-contrast, #fff);
box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--wrn-field-color) 35%, transparent);
font-weight: 650;
}
.wrn-next__time-period {
display: flex;
@@ -745,7 +780,7 @@ component Input {
.wrn-next--field[data-variant="ghost"]
:is(.wrn-next__input-group-control, .wrn-next__file-control, .wrn-next__color-control) {
border-color: transparent;
background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
}
@media (max-width: 640px) {
.wrn-next--field[data-inline="true"],
packages/ui/components/progress.wrn
+34 -5
View File
@@ -36,22 +36,51 @@ component Progress {
.wrn-progress-component__row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
font-weight: 550;
}
.wrn-progress-component__row > strong {
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
font-family: var(--wrn-font-mono, monospace);
font-size: 0.8em;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
/* Recessed track, raised fill: the same keycap-on-well pairing as the
button and field. */
.wrn-progress-component__track {
appearance: none;
width: 100%;
height: 0.6rem;
height: 0.5rem;
overflow: hidden;
border: 0;
border-radius: 999px;
background: var(--wrn-color-surface-2);
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.1);
accent-color: var(--wrn-progress-color);
}
.wrn-progress-component[data-size="xs"] .wrn-progress-component__track,
.wrn-progress-component[data-size="sm"] .wrn-progress-component__track { height: 0.3125rem; }
.wrn-progress-component[data-size="lg"] .wrn-progress-component__track,
.wrn-progress-component[data-size="xl"] .wrn-progress-component__track { height: 0.75rem; }
.wrn-progress-component__track::-webkit-progress-bar { background: var(--wrn-color-surface-2); }
.wrn-progress-component__track::-webkit-progress-value { background: var(--wrn-progress-color); }
.wrn-progress-component__track::-moz-progress-bar { background: var(--wrn-progress-color); }
.wrn-progress-component__track::-webkit-progress-bar {
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
border-radius: 999px;
}
.wrn-progress-component__track::-webkit-progress-value {
border-radius: 999px;
background: linear-gradient(180deg, color-mix(in srgb, var(--wrn-progress-color) 88%, white), var(--wrn-progress-color));
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25);
transition: width var(--wrn-motion-slow) var(--wrn-ease-emphasized);
}
.wrn-progress-component__track::-moz-progress-bar {
border-radius: 999px;
background: linear-gradient(180deg, color-mix(in srgb, var(--wrn-progress-color) 88%, white), var(--wrn-progress-color));
}
}
}
packages/ui/components/radio.wrn
+140 -50
View File
@@ -44,14 +44,14 @@ size: string = "default"
{#if options.length}
<div class="wrn-next__radio-group" role="radiogroup" aria-label="{hiddenLabel ? label : ''}" aria-invalid="{error ? 'true' : 'false'}">
{#each options as option}
<label class="wrn-next__choice wrn-next--radio" for="{id || name}-{option.value}" data-variant="{variant}" data-disabled="{disabled || option.disabled}">
<label class="wrn-next__choice wrn-next--radio" data-variant="{variant}" data-disabled="{disabled || option.disabled}">
<input id="{id || name}-{option.value}" type="radio" name="{name}" value="{option.value}" checked="{option.value === value || option.checked}" disabled="{disabled || option.disabled}" required="{required}" readonly="{readonly}" @click="preventReadonly(event)" @input="emitField('input', event)" @change="emitField('change', event)" @focus="emitField('focus', event)" @blur="emitField('blur', event)" @invalid="emitField('invalid', event)" />
<span class="wrn-next__choice-copy"><strong>{option.label}</strong>{#if option.description}<small>{option.description}</small>{/if}</span>
</label>
{/each}
</div>
{:else}
<label class="wrn-next__choice wrn-next--radio" for="{id || name}" data-variant="{variant}" data-icon-position="{iconPosition}"><input id="{id || name}" type="radio" name="{name}" value="{value}" checked="{checked}" disabled="{disabled}" required="{required}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" @click="preventReadonly(event)" @input="emitField('input', event)" @change="emitField('change', event)" @focus="emitField('focus', event)" @blur="emitField('blur', event)" @invalid="emitField('invalid', event)" />{#if icon}<span class="{icon}" aria-hidden="true"></span>{/if}<span class="{hiddenLabel || cornerHint ? 'wrn-next__sr-only' : ''}">{label}</span></label>
<label class="wrn-next__choice wrn-next--radio" data-variant="{variant}" data-icon-position="{iconPosition}"><input id="{id || name}" type="radio" name="{name}" value="{value}" checked="{checked}" disabled="{disabled}" required="{required}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" @click="preventReadonly(event)" @input="emitField('input', event)" @change="emitField('change', event)" @focus="emitField('focus', event)" @blur="emitField('blur', event)" @invalid="emitField('invalid', event)" />{#if icon}<span class="{icon}" aria-hidden="true"></span>{/if}<span class="{hiddenLabel || cornerHint ? 'wrn-next__sr-only' : ''}">{label}</span></label>
{/if}
{#if helperText}<small class="wrn-next__field-help">{helperText}</small>{/if}<small class="wrn-next__field-error" data-error="{name}">{error}</small>
</div>
@@ -61,6 +61,57 @@ size: string = "default"
.wrn-next--radio-field { width: 100%; min-width: 0; }
.wrn-next--radio-field[data-invalid="true"] { --wrn-component-color: var(--wrn-color-danger); }
/* Drawn radio: recessed well; selected is an accent ring round a raised dot. */
.wrn-next--radio input[type="radio"] {
appearance: none;
display: inline-grid;
place-content: center;
flex: 0 0 auto;
width: 1.125rem;
height: 1.125rem;
margin: 0.0625rem 0 0;
border: 1.5px solid var(--wrn-color-border-strong, var(--wrn-color-border));
border-radius: 999px;
background: var(--wrn-color-input-background, var(--wrn-color-surface));
box-shadow: inset 0 1px 1px rgb(0 0 0 / 0.05);
cursor: pointer;
transition:
background-color var(--wrn-motion-fast) var(--wrn-ease-standard),
border-color var(--wrn-motion-fast) var(--wrn-ease-standard);
}
.wrn-next--radio input[type="radio"]::after {
width: 0.4375rem;
height: 0.4375rem;
border-radius: 999px;
background: var(--wrn-color-primary-contrast, #fff);
box-shadow: 0 1px 1px rgb(0 0 0 / 0.2);
content: "";
transform: scale(0);
transition: transform var(--wrn-motion-fast) var(--wrn-ease-emphasized);
}
.wrn-next--radio input[type="radio"]:hover:not(:disabled) {
border-color: color-mix(in srgb, var(--wrn-field-color) 60%, var(--wrn-color-border-strong, var(--wrn-color-border)));
}
.wrn-next--radio input[type="radio"]:checked {
border-color: color-mix(in srgb, var(--wrn-field-color) 80%, black);
background: var(--wrn-field-color);
box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--wrn-field-color) 30%, transparent);
}
.wrn-next--radio input[type="radio"]:checked::after {
transform: scale(1);
}
.wrn-next--radio input[type="radio"]:focus-visible {
outline: 2px solid var(--wrn-field-color);
outline-offset: 2px;
}
.wrn-next--radio-field[data-invalid="true"] input[type="radio"] {
border-color: var(--wrn-color-danger);
}
.wrn-next--radio:has(input:disabled) {
cursor: not-allowed;
opacity: 0.6;
}
/* Shared component foundation. */
.wrn-component {
@@ -126,7 +177,7 @@ size: string = "default"
.wrn-component p {
margin: 0;
color: var(--wrn-color-muted);
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
line-height: 1.6;
}
@@ -141,8 +192,9 @@ size: string = "default"
display: block;
min-height: 1em;
margin-top: 0.25rem;
color: var(--wrn-color-danger);
font-size: 0.8rem;
color: var(--wrn-color-danger-text, var(--wrn-color-danger));
font-size: 0.78rem;
font-weight: 550;
}
.wrn-next--choice {
@@ -169,13 +221,14 @@ size: string = "default"
width: 100%;
min-height: var(--wrn-control-height, 2.5rem);
padding: 0.5rem 0.75rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm, 6px);
border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm, 8px);
outline: 0;
color: var(--wrn-color-text);
background: var(--wrn-color-bg);
background: var(--wrn-color-input-background, var(--wrn-color-surface));
font: inherit;
font-weight: 500;
transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
}
.wrn-auth-form form > .wrn-next--field,
.wrn-auth-form form > .wrn-field {
@@ -189,8 +242,8 @@ size: string = "default"
box-shadow: none;
}
.wrn-next--field :where(input, textarea, select):focus-visible {
border-color: var(--wrn-color-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
border-color: var(--wrn-field-color, var(--wrn-color-primary));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04), 0 0 0 3px color-mix(in srgb, var(--wrn-field-color, var(--wrn-color-primary)) 18%, transparent);
}
.wrn-next--field textarea {
resize: vertical;
@@ -224,12 +277,14 @@ size: string = "default"
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.35;
letter-spacing: -0.005em;
}
.wrn-next__field-hint,
.wrn-next__field-help {
color: var(--wrn-color-muted);
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-size: 0.75rem;
font-weight: 500;
font-weight: 450;
line-height: 1.45;
}
.wrn-next__field-control {
position: relative;
@@ -237,10 +292,11 @@ size: string = "default"
}
.wrn-next__field-control > :is(input, textarea, select) {
padding-inline: 0.85rem;
border-color: var(--wrn-color-border);
border-color: var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
font-size: 0.8125rem;
background: var(--wrn-color-input-background, var(--wrn-color-surface));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
font-size: 0.875rem;
}
.wrn-next__field-control[data-has-icon="true"][data-icon-position="start"] > :is(input, textarea, select) {
padding-inline-start: 2.5rem;
@@ -281,7 +337,8 @@ size: string = "default"
}
.wrn-next--field[data-variant="ghost"] .wrn-next__field-control > :is(input, textarea, select) {
border-color: transparent;
background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
box-shadow: none;
}
.wrn-next__field-floating-label {
position: absolute;
@@ -322,9 +379,9 @@ size: string = "default"
}
.wrn-next__field-error {
min-height: 1em;
color: var(--wrn-color-danger);
font-size: 0.82em;
font-weight: 600;
color: var(--wrn-color-danger-text, var(--wrn-color-danger));
font-size: 0.78rem;
font-weight: 550;
}
.wrn-next__field-error:empty {
display: none;
@@ -332,14 +389,16 @@ size: string = "default"
.wrn-next--field[data-invalid="true"] :is(input, textarea, select),
.wrn-next--choice-field[data-invalid="true"] input {
border-color: var(--wrn-color-danger);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-danger) 12%, transparent);
}
.wrn-next--field :is(input, textarea, select):disabled,
.wrn-next--choice-field input:disabled {
cursor: not-allowed;
opacity: 0.58;
opacity: 0.55;
background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
}
.wrn-next--field :is(input, textarea, select):read-only {
background: var(--wrn-color-surface-2);
background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
}
.wrn-next--field[data-inline="true"],
.wrn-next--choice-field[data-inline="true"] {
@@ -396,11 +455,13 @@ size: string = "default"
display: flex;
min-width: 0;
align-items: center;
gap: 0.65rem;
gap: 0.625rem;
color: var(--wrn-color-text);
width: 100%;
font-size: 0.75rem;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.4;
cursor: pointer;
}
.wrn-next__checkbox-content > .wrn-next__choice {
width: 100%;
@@ -415,12 +476,13 @@ size: string = "default"
.wrn-next__choice-copy {
display: grid;
min-width: 0;
gap: 0.15rem;
line-height: 1.35;
gap: 0.125rem;
line-height: 1.4;
}
.wrn-next__choice-copy small {
color: var(--wrn-color-muted);
font-weight: 500;
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-size: 0.78rem;
font-weight: 450;
}
.wrn-next__radio-group,
.wrn-next__checkbox-group {
@@ -440,15 +502,18 @@ size: string = "default"
.wrn-next--radio-field[data-card="true"] .wrn-next--radio,
.wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox {
min-height: 4.5rem;
padding: 0.85rem;
padding: 0.9rem 1rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-1);
transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
}
.wrn-next--radio-field[data-card="true"] .wrn-next--radio:has(input:checked),
.wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox:has(input:checked) {
border-color: var(--wrn-field-color);
box-shadow: 0 0 0 1px var(--wrn-field-color);
background: color-mix(in srgb, var(--wrn-field-color) 5%, var(--wrn-color-surface));
box-shadow: 0 0 0 1px var(--wrn-field-color), var(--wrn-shadow-1);
}
.wrn-next--radio-field[data-list="true"] .wrn-next--radio,
.wrn-next--checkbox-field[data-list="true"] .wrn-next--checkbox {
@@ -469,19 +534,21 @@ size: string = "default"
}
.wrn-next__choice[data-variant="outlined"],
.wrn-next__choice[data-variant="floating"] {
padding: 0.65rem 0.8rem;
padding: 0.7rem 0.85rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
}
.wrn-next__choice[data-variant="pill"] {
padding: 0.65rem 1rem;
padding: 0.6rem 1rem;
border: 1px solid color-mix(in srgb, var(--wrn-field-color) 22%, var(--wrn-color-border));
border-radius: 999px;
background: color-mix(in srgb, var(--wrn-field-color) 9%, var(--wrn-color-surface));
background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface));
}
.wrn-next__choice[data-variant="ghost"] {
padding: 0.65rem 0.8rem;
padding: 0.65rem 0.85rem;
border-radius: var(--wrn-radius-sm);
background: color-mix(in srgb, var(--wrn-field-color) 7%, transparent);
background: color-mix(in srgb, var(--wrn-field-color) 6%, transparent);
}
.wrn-next__choice[data-variant="underline"] {
padding-block: 0.5rem;
@@ -515,25 +582,35 @@ size: string = "default"
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.7rem 0.85rem;
border: 1px solid var(--wrn-color-border);
padding: 0.55rem 0.85rem;
border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
background: var(--wrn-color-input-background, var(--wrn-color-surface));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
color: var(--wrn-color-text);
font: inherit;
font-size: 0.875rem;
font-variant-numeric: tabular-nums;
text-align: left;
cursor: pointer;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.wrn-next__calendar,
.wrn-next__time-panel {
z-index: 20;
position: absolute;
z-index: 40;
top: 100%;
left: 0;
display: grid;
width: min(100%, 22rem);
width: min(calc(100vw - 2rem), 19.5rem);
gap: 0.75rem;
padding: 0.85rem;
margin-top: 0.375rem;
padding: 0.75rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-md);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-3);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
animation: wrn-popover-enter var(--wrn-motion-base, 160ms) var(--wrn-ease-emphasized, ease) both;
}
.wrn-next--date-picker[data-expanded="false"] .wrn-next__calendar,
.wrn-next--time-picker[data-expanded="false"] .wrn-next__time-panel {
@@ -543,29 +620,42 @@ size: string = "default"
.wrn-next__time-panel button {
min-height: 2.25rem;
border: 0;
border-radius: var(--wrn-radius-sm);
border-radius: calc(var(--wrn-radius-sm) - 2px);
background: transparent;
color: inherit;
font: inherit;
font-size: 0.8125rem;
font-variant-numeric: tabular-nums;
cursor: pointer;
transition: background-color 120ms ease, color 120ms ease;
}
.wrn-next__calendar-weekdays,
.wrn-next__calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0.2rem;
gap: 0.125rem;
text-align: center;
}
.wrn-next__calendar-weekdays {
color: var(--wrn-color-muted);
font-size: 0.75rem;
padding-bottom: 0.375rem;
border-bottom: 1px solid var(--wrn-color-border);
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-family: var(--wrn-font-mono, monospace);
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.wrn-next__calendar-grid button:hover,
.wrn-next__time-panel button:hover {
background: var(--wrn-color-surface-2);
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
}
.wrn-next__calendar-grid button[aria-pressed="true"],
.wrn-next__time-panel button[aria-pressed="true"] {
background: var(--wrn-field-color);
color: var(--wrn-color-primary-contrast, #fff);
box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--wrn-field-color) 35%, transparent);
font-weight: 650;
}
.wrn-next__time-period {
display: flex;
@@ -599,7 +689,7 @@ size: string = "default"
.wrn-next--field[data-variant="ghost"]
:is(.wrn-next__input-group-control, .wrn-next__file-control, .wrn-next__color-control) {
border-color: transparent;
background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
}
@media (max-width: 640px) {
.wrn-next--field[data-inline="true"],
packages/ui/components/select.wrn
+97 -49
View File
@@ -74,7 +74,16 @@ size: string = "default"
padding-inline-end: 2.5rem;
line-height: 1.35;
color: var(--wrn-color-text);
background-color: var(--wrn-color-surface);
background-color: var(--wrn-color-input-background, var(--wrn-color-surface));
cursor: pointer;
}
/* Chrome matches every <select> as :read-only, which painted the shared
read-only fill on all selects. Selects are never text-read-only. */
.wrn-next--select .wrn-next__field-control > select:read-only:not(:disabled) {
background-color: var(--wrn-color-input-background, var(--wrn-color-surface));
}
.wrn-next--select .wrn-next__field-control:hover > select:not(:disabled):not(:focus-visible) {
border-color: var(--wrn-color-input-border-hover, var(--wrn-color-border-strong));
}
.wrn-next__select-indicator {
@@ -153,7 +162,7 @@ size: string = "default"
.wrn-component p {
margin: 0;
color: var(--wrn-color-muted);
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
line-height: 1.6;
}
@@ -168,8 +177,9 @@ size: string = "default"
display: block;
min-height: 1em;
margin-top: 0.25rem;
color: var(--wrn-color-danger);
font-size: 0.8rem;
color: var(--wrn-color-danger-text, var(--wrn-color-danger));
font-size: 0.78rem;
font-weight: 550;
}
.wrn-next--choice {
@@ -196,13 +206,14 @@ size: string = "default"
width: 100%;
min-height: var(--wrn-control-height, 2.5rem);
padding: 0.5rem 0.75rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm, 6px);
border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm, 8px);
outline: 0;
color: var(--wrn-color-text);
background: var(--wrn-color-bg);
background: var(--wrn-color-input-background, var(--wrn-color-surface));
font: inherit;
font-weight: 500;
transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
}
.wrn-auth-form form > .wrn-next--field,
.wrn-auth-form form > .wrn-field {
@@ -216,8 +227,8 @@ size: string = "default"
box-shadow: none;
}
.wrn-next--field :where(input, textarea, select):focus-visible {
border-color: var(--wrn-color-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
border-color: var(--wrn-field-color, var(--wrn-color-primary));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04), 0 0 0 3px color-mix(in srgb, var(--wrn-field-color, var(--wrn-color-primary)) 18%, transparent);
}
.wrn-next--field textarea {
resize: vertical;
@@ -251,12 +262,14 @@ size: string = "default"
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.35;
letter-spacing: -0.005em;
}
.wrn-next__field-hint,
.wrn-next__field-help {
color: var(--wrn-color-muted);
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-size: 0.75rem;
font-weight: 500;
font-weight: 450;
line-height: 1.45;
}
.wrn-next__field-control {
position: relative;
@@ -264,10 +277,11 @@ size: string = "default"
}
.wrn-next__field-control > :is(input, textarea, select) {
padding-inline: 0.85rem;
border-color: var(--wrn-color-border);
border-color: var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
font-size: 0.8125rem;
background: var(--wrn-color-input-background, var(--wrn-color-surface));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
font-size: 0.875rem;
}
.wrn-next__field-control[data-has-icon="true"][data-icon-position="start"] > :is(input, textarea, select) {
padding-inline-start: 2.5rem;
@@ -308,7 +322,8 @@ size: string = "default"
}
.wrn-next--field[data-variant="ghost"] .wrn-next__field-control > :is(input, textarea, select) {
border-color: transparent;
background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
box-shadow: none;
}
.wrn-next__field-floating-label {
position: absolute;
@@ -349,9 +364,9 @@ size: string = "default"
}
.wrn-next__field-error {
min-height: 1em;
color: var(--wrn-color-danger);
font-size: 0.82em;
font-weight: 600;
color: var(--wrn-color-danger-text, var(--wrn-color-danger));
font-size: 0.78rem;
font-weight: 550;
}
.wrn-next__field-error:empty {
display: none;
@@ -359,14 +374,16 @@ size: string = "default"
.wrn-next--field[data-invalid="true"] :is(input, textarea, select),
.wrn-next--choice-field[data-invalid="true"] input {
border-color: var(--wrn-color-danger);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-danger) 12%, transparent);
}
.wrn-next--field :is(input, textarea, select):disabled,
.wrn-next--choice-field input:disabled {
cursor: not-allowed;
opacity: 0.58;
opacity: 0.55;
background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
}
.wrn-next--field :is(input, textarea, select):read-only {
background: var(--wrn-color-surface-2);
background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
}
.wrn-next--field[data-inline="true"],
.wrn-next--choice-field[data-inline="true"] {
@@ -423,11 +440,13 @@ size: string = "default"
display: flex;
min-width: 0;
align-items: center;
gap: 0.65rem;
gap: 0.625rem;
color: var(--wrn-color-text);
width: 100%;
font-size: 0.75rem;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.4;
cursor: pointer;
}
.wrn-next__checkbox-content > .wrn-next__choice {
width: 100%;
@@ -442,12 +461,13 @@ size: string = "default"
.wrn-next__choice-copy {
display: grid;
min-width: 0;
gap: 0.15rem;
line-height: 1.35;
gap: 0.125rem;
line-height: 1.4;
}
.wrn-next__choice-copy small {
color: var(--wrn-color-muted);
font-weight: 500;
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-size: 0.78rem;
font-weight: 450;
}
.wrn-next__radio-group,
.wrn-next__checkbox-group {
@@ -467,15 +487,18 @@ size: string = "default"
.wrn-next--radio-field[data-card="true"] .wrn-next--radio,
.wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox {
min-height: 4.5rem;
padding: 0.85rem;
padding: 0.9rem 1rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-1);
transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
}
.wrn-next--radio-field[data-card="true"] .wrn-next--radio:has(input:checked),
.wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox:has(input:checked) {
border-color: var(--wrn-field-color);
box-shadow: 0 0 0 1px var(--wrn-field-color);
background: color-mix(in srgb, var(--wrn-field-color) 5%, var(--wrn-color-surface));
box-shadow: 0 0 0 1px var(--wrn-field-color), var(--wrn-shadow-1);
}
.wrn-next--radio-field[data-list="true"] .wrn-next--radio,
.wrn-next--checkbox-field[data-list="true"] .wrn-next--checkbox {
@@ -496,19 +519,21 @@ size: string = "default"
}
.wrn-next__choice[data-variant="outlined"],
.wrn-next__choice[data-variant="floating"] {
padding: 0.65rem 0.8rem;
padding: 0.7rem 0.85rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
}
.wrn-next__choice[data-variant="pill"] {
padding: 0.65rem 1rem;
padding: 0.6rem 1rem;
border: 1px solid color-mix(in srgb, var(--wrn-field-color) 22%, var(--wrn-color-border));
border-radius: 999px;
background: color-mix(in srgb, var(--wrn-field-color) 9%, var(--wrn-color-surface));
background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface));
}
.wrn-next__choice[data-variant="ghost"] {
padding: 0.65rem 0.8rem;
padding: 0.65rem 0.85rem;
border-radius: var(--wrn-radius-sm);
background: color-mix(in srgb, var(--wrn-field-color) 7%, transparent);
background: color-mix(in srgb, var(--wrn-field-color) 6%, transparent);
}
.wrn-next__choice[data-variant="underline"] {
padding-block: 0.5rem;
@@ -542,25 +567,35 @@ size: string = "default"
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.7rem 0.85rem;
border: 1px solid var(--wrn-color-border);
padding: 0.55rem 0.85rem;
border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
background: var(--wrn-color-input-background, var(--wrn-color-surface));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
color: var(--wrn-color-text);
font: inherit;
font-size: 0.875rem;
font-variant-numeric: tabular-nums;
text-align: left;
cursor: pointer;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.wrn-next__calendar,
.wrn-next__time-panel {
z-index: 20;
position: absolute;
z-index: 40;
top: 100%;
left: 0;
display: grid;
width: min(100%, 22rem);
width: min(calc(100vw - 2rem), 19.5rem);
gap: 0.75rem;
padding: 0.85rem;
margin-top: 0.375rem;
padding: 0.75rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-md);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-3);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
animation: wrn-popover-enter var(--wrn-motion-base, 160ms) var(--wrn-ease-emphasized, ease) both;
}
.wrn-next--date-picker[data-expanded="false"] .wrn-next__calendar,
.wrn-next--time-picker[data-expanded="false"] .wrn-next__time-panel {
@@ -570,29 +605,42 @@ size: string = "default"
.wrn-next__time-panel button {
min-height: 2.25rem;
border: 0;
border-radius: var(--wrn-radius-sm);
border-radius: calc(var(--wrn-radius-sm) - 2px);
background: transparent;
color: inherit;
font: inherit;
font-size: 0.8125rem;
font-variant-numeric: tabular-nums;
cursor: pointer;
transition: background-color 120ms ease, color 120ms ease;
}
.wrn-next__calendar-weekdays,
.wrn-next__calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0.2rem;
gap: 0.125rem;
text-align: center;
}
.wrn-next__calendar-weekdays {
color: var(--wrn-color-muted);
font-size: 0.75rem;
padding-bottom: 0.375rem;
border-bottom: 1px solid var(--wrn-color-border);
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-family: var(--wrn-font-mono, monospace);
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.wrn-next__calendar-grid button:hover,
.wrn-next__time-panel button:hover {
background: var(--wrn-color-surface-2);
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
}
.wrn-next__calendar-grid button[aria-pressed="true"],
.wrn-next__time-panel button[aria-pressed="true"] {
background: var(--wrn-field-color);
color: var(--wrn-color-primary-contrast, #fff);
box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--wrn-field-color) 35%, transparent);
font-weight: 650;
}
.wrn-next__time-period {
display: flex;
@@ -626,7 +674,7 @@ size: string = "default"
.wrn-next--field[data-variant="ghost"]
:is(.wrn-next__input-group-control, .wrn-next__file-control, .wrn-next__color-control) {
border-color: transparent;
background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
}
@media (max-width: 640px) {
.wrn-next--field[data-inline="true"],
packages/ui/components/skeleton.wrn
+63 -19
View File
@@ -7,42 +7,86 @@ component Skeleton {
class: string = ""
}
view {
<div class="wrn-skeleton-component {class}" data-color="{color}" data-size="{size}" role="status" aria-label="{label}">
{#each Array(lines).fill(0) as line}<span class="wrn-skeleton-component__line"></span>{/each}
<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-highlight: var(--wrn-color-border);
--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: 0.55rem;
gap: 1rem;
}
.wrn-skeleton-component[data-size="xs"] { gap: 0.35rem; }
.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"] { gap: 0.75rem; }
.wrn-skeleton-component[data-color="secondary"] { --wrn-skeleton-highlight: var(--wrn-color-secondary-soft); }
.wrn-skeleton-component[data-color="primary"] { --wrn-skeleton-highlight: var(--wrn-color-primary-soft); }
.wrn-skeleton-component[data-size="xl"] { --wrn-skeleton-line: 0.75rem; gap: 1.25rem; }
.wrn-skeleton-component__line {
height: 0.8rem;
.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;
background: linear-gradient(90deg, var(--wrn-color-surface-2), var(--wrn-skeleton-highlight), var(--wrn-color-surface-2));
background-size: 200% 100%;
animation: wrn-skeleton-component-shimmer 1.4s infinite;
}
.wrn-skeleton-component__heading,
.wrn-skeleton-component__body {
display: grid;
flex: 1;
min-width: 0;
gap: calc(var(--wrn-skeleton-line) * 0.8);
}
.wrn-skeleton-component__line:last-child { width: 68%; }
/* 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: 200% 0; }
to { background-position: -200% 0; }
from { background-position: 150% 0, 0 0; }
to { background-position: -50% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
.wrn-skeleton-component__line { animation: none; }
.wrn-skeleton-component__avatar,
.wrn-skeleton-component__bar { animation: none; }
}
}
}
packages/ui/components/spinner.wrn
+3 -2
View File
@@ -34,10 +34,11 @@ component Spinner {
display: block;
width: var(--wrn-spinner-size);
height: var(--wrn-spinner-size);
border: 2px solid var(--wrn-color-border);
border: 2px solid color-mix(in srgb, var(--wrn-spinner-color) 16%, transparent);
border-top-color: var(--wrn-spinner-color);
border-right-color: var(--wrn-spinner-color);
border-radius: 50%;
animation: wrn-spinner-component-spin 700ms linear infinite;
animation: wrn-spinner-component-spin 650ms cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
@keyframes wrn-spinner-component-spin { to { transform: rotate(360deg); } }
packages/ui/components/switch.wrn
+121 -62
View File
@@ -42,15 +42,31 @@ component Switch {
}
style {
/* Recessed track with a raised white thumb; the track fills with the
accent when on. */
.wrn-next--switch input {
appearance: none;
position: relative;
width: 2.5rem;
height: 1.4rem;
border: 1px solid var(--wrn-color-border);
flex: 0 0 auto;
width: 2.375rem;
height: 1.375rem;
margin: 0;
border: 1px solid color-mix(in srgb, var(--wrn-color-border-strong, var(--wrn-color-border)) 70%, transparent);
border-radius: 999px;
background: var(--wrn-color-surface-2);
transition: background var(--wrn-motion-fast) var(--wrn-ease-standard);
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.1);
cursor: pointer;
transition:
background-color var(--wrn-motion-base) var(--wrn-ease-standard),
border-color var(--wrn-motion-base) var(--wrn-ease-standard);
}
.wrn-next--switch input:focus-visible {
outline: 2px solid var(--wrn-field-color);
outline-offset: 2px;
}
.wrn-next--switch input:disabled {
cursor: not-allowed;
opacity: 0.55;
}
.wrn-next--switch {
@@ -64,24 +80,28 @@ component Switch {
.wrn-next--switch input::after {
position: absolute;
top: 0.15rem;
left: 0.15rem;
width: 1rem;
height: 1rem;
top: 50%;
left: 0.125rem;
width: 1.0625rem;
height: 1.0625rem;
margin-top: -0.53125rem;
border-radius: 999px;
background: var(--wrn-color-text);
background: #fff;
box-shadow:
0 1px 2px rgb(0 0 0 / 0.22),
0 0 0 0.5px rgb(0 0 0 / 0.06);
content: "";
transition: transform var(--wrn-motion-fast) var(--wrn-ease-standard);
transition: transform var(--wrn-motion-base) var(--wrn-ease-emphasized);
}
.wrn-next--switch input:checked {
border-color: var(--wrn-field-color);
border-color: color-mix(in srgb, var(--wrn-field-color) 80%, black);
background: var(--wrn-field-color);
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.12);
}
.wrn-next--switch input:checked::after {
background: var(--wrn-color-primary-contrast, #fff);
transform: translateX(1.1rem);
transform: translateX(1rem);
}
/* Shared component foundation. */
@@ -149,7 +169,7 @@ component Switch {
.wrn-component p {
margin: 0;
color: var(--wrn-color-muted);
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
line-height: 1.6;
}
@@ -164,8 +184,9 @@ component Switch {
display: block;
min-height: 1em;
margin-top: 0.25rem;
color: var(--wrn-color-danger);
font-size: 0.8rem;
color: var(--wrn-color-danger-text, var(--wrn-color-danger));
font-size: 0.78rem;
font-weight: 550;
}
.wrn-next--choice {
@@ -192,13 +213,14 @@ component Switch {
width: 100%;
min-height: var(--wrn-control-height, 2.5rem);
padding: 0.5rem 0.75rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm, 6px);
border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm, 8px);
outline: 0;
color: var(--wrn-color-text);
background: var(--wrn-color-bg);
background: var(--wrn-color-input-background, var(--wrn-color-surface));
font: inherit;
font-weight: 500;
transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
}
.wrn-auth-form form > .wrn-next--field,
.wrn-auth-form form > .wrn-field {
@@ -212,8 +234,8 @@ component Switch {
box-shadow: none;
}
.wrn-next--field :where(input, textarea, select):focus-visible {
border-color: var(--wrn-color-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
border-color: var(--wrn-field-color, var(--wrn-color-primary));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04), 0 0 0 3px color-mix(in srgb, var(--wrn-field-color, var(--wrn-color-primary)) 18%, transparent);
}
.wrn-next--field textarea {
resize: vertical;
@@ -247,12 +269,14 @@ component Switch {
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.35;
letter-spacing: -0.005em;
}
.wrn-next__field-hint,
.wrn-next__field-help {
color: var(--wrn-color-muted);
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-size: 0.75rem;
font-weight: 500;
font-weight: 450;
line-height: 1.45;
}
.wrn-next__field-control {
position: relative;
@@ -260,10 +284,11 @@ component Switch {
}
.wrn-next__field-control > :is(input, textarea, select) {
padding-inline: 0.85rem;
border-color: var(--wrn-color-border);
border-color: var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
font-size: 0.8125rem;
background: var(--wrn-color-input-background, var(--wrn-color-surface));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
font-size: 0.875rem;
}
.wrn-next__field-control[data-has-icon="true"][data-icon-position="start"] > :is(input, textarea, select) {
padding-inline-start: 2.5rem;
@@ -304,7 +329,8 @@ component Switch {
}
.wrn-next--field[data-variant="ghost"] .wrn-next__field-control > :is(input, textarea, select) {
border-color: transparent;
background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
box-shadow: none;
}
.wrn-next__field-floating-label {
position: absolute;
@@ -345,9 +371,9 @@ component Switch {
}
.wrn-next__field-error {
min-height: 1em;
color: var(--wrn-color-danger);
font-size: 0.82em;
font-weight: 600;
color: var(--wrn-color-danger-text, var(--wrn-color-danger));
font-size: 0.78rem;
font-weight: 550;
}
.wrn-next__field-error:empty {
display: none;
@@ -355,14 +381,16 @@ component Switch {
.wrn-next--field[data-invalid="true"] :is(input, textarea, select),
.wrn-next--choice-field[data-invalid="true"] input {
border-color: var(--wrn-color-danger);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-danger) 12%, transparent);
}
.wrn-next--field :is(input, textarea, select):disabled,
.wrn-next--choice-field input:disabled {
cursor: not-allowed;
opacity: 0.58;
opacity: 0.55;
background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
}
.wrn-next--field :is(input, textarea, select):read-only {
background: var(--wrn-color-surface-2);
background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
}
.wrn-next--field[data-inline="true"],
.wrn-next--choice-field[data-inline="true"] {
@@ -419,11 +447,13 @@ component Switch {
display: flex;
min-width: 0;
align-items: center;
gap: 0.65rem;
gap: 0.625rem;
color: var(--wrn-color-text);
width: 100%;
font-size: 0.75rem;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.4;
cursor: pointer;
}
.wrn-next__checkbox-content > .wrn-next__choice {
width: 100%;
@@ -438,12 +468,13 @@ component Switch {
.wrn-next__choice-copy {
display: grid;
min-width: 0;
gap: 0.15rem;
line-height: 1.35;
gap: 0.125rem;
line-height: 1.4;
}
.wrn-next__choice-copy small {
color: var(--wrn-color-muted);
font-weight: 500;
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-size: 0.78rem;
font-weight: 450;
}
.wrn-next__radio-group,
.wrn-next__checkbox-group {
@@ -463,15 +494,18 @@ component Switch {
.wrn-next--radio-field[data-card="true"] .wrn-next--radio,
.wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox {
min-height: 4.5rem;
padding: 0.85rem;
padding: 0.9rem 1rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-1);
transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
}
.wrn-next--radio-field[data-card="true"] .wrn-next--radio:has(input:checked),
.wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox:has(input:checked) {
border-color: var(--wrn-field-color);
box-shadow: 0 0 0 1px var(--wrn-field-color);
background: color-mix(in srgb, var(--wrn-field-color) 5%, var(--wrn-color-surface));
box-shadow: 0 0 0 1px var(--wrn-field-color), var(--wrn-shadow-1);
}
.wrn-next--radio-field[data-list="true"] .wrn-next--radio,
.wrn-next--checkbox-field[data-list="true"] .wrn-next--checkbox {
@@ -492,19 +526,21 @@ component Switch {
}
.wrn-next__choice[data-variant="outlined"],
.wrn-next__choice[data-variant="floating"] {
padding: 0.65rem 0.8rem;
padding: 0.7rem 0.85rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
}
.wrn-next__choice[data-variant="pill"] {
padding: 0.65rem 1rem;
padding: 0.6rem 1rem;
border: 1px solid color-mix(in srgb, var(--wrn-field-color) 22%, var(--wrn-color-border));
border-radius: 999px;
background: color-mix(in srgb, var(--wrn-field-color) 9%, var(--wrn-color-surface));
background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface));
}
.wrn-next__choice[data-variant="ghost"] {
padding: 0.65rem 0.8rem;
padding: 0.65rem 0.85rem;
border-radius: var(--wrn-radius-sm);
background: color-mix(in srgb, var(--wrn-field-color) 7%, transparent);
background: color-mix(in srgb, var(--wrn-field-color) 6%, transparent);
}
.wrn-next__choice[data-variant="underline"] {
padding-block: 0.5rem;
@@ -538,25 +574,35 @@ component Switch {
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.7rem 0.85rem;
border: 1px solid var(--wrn-color-border);
padding: 0.55rem 0.85rem;
border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
background: var(--wrn-color-input-background, var(--wrn-color-surface));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
color: var(--wrn-color-text);
font: inherit;
font-size: 0.875rem;
font-variant-numeric: tabular-nums;
text-align: left;
cursor: pointer;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.wrn-next__calendar,
.wrn-next__time-panel {
z-index: 20;
position: absolute;
z-index: 40;
top: 100%;
left: 0;
display: grid;
width: min(100%, 22rem);
width: min(calc(100vw - 2rem), 19.5rem);
gap: 0.75rem;
padding: 0.85rem;
margin-top: 0.375rem;
padding: 0.75rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-md);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-3);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
animation: wrn-popover-enter var(--wrn-motion-base, 160ms) var(--wrn-ease-emphasized, ease) both;
}
.wrn-next--date-picker[data-expanded="false"] .wrn-next__calendar,
.wrn-next--time-picker[data-expanded="false"] .wrn-next__time-panel {
@@ -566,29 +612,42 @@ component Switch {
.wrn-next__time-panel button {
min-height: 2.25rem;
border: 0;
border-radius: var(--wrn-radius-sm);
border-radius: calc(var(--wrn-radius-sm) - 2px);
background: transparent;
color: inherit;
font: inherit;
font-size: 0.8125rem;
font-variant-numeric: tabular-nums;
cursor: pointer;
transition: background-color 120ms ease, color 120ms ease;
}
.wrn-next__calendar-weekdays,
.wrn-next__calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0.2rem;
gap: 0.125rem;
text-align: center;
}
.wrn-next__calendar-weekdays {
color: var(--wrn-color-muted);
font-size: 0.75rem;
padding-bottom: 0.375rem;
border-bottom: 1px solid var(--wrn-color-border);
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-family: var(--wrn-font-mono, monospace);
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.wrn-next__calendar-grid button:hover,
.wrn-next__time-panel button:hover {
background: var(--wrn-color-surface-2);
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
}
.wrn-next__calendar-grid button[aria-pressed="true"],
.wrn-next__time-panel button[aria-pressed="true"] {
background: var(--wrn-field-color);
color: var(--wrn-color-primary-contrast, #fff);
box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--wrn-field-color) 35%, transparent);
font-weight: 650;
}
.wrn-next__time-period {
display: flex;
@@ -622,7 +681,7 @@ component Switch {
.wrn-next--field[data-variant="ghost"]
:is(.wrn-next__input-group-control, .wrn-next__file-control, .wrn-next__color-control) {
border-color: transparent;
background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
}
@media (max-width: 640px) {
.wrn-next--field[data-inline="true"],
packages/ui/components/textarea.wrn
+87 -48
View File
@@ -130,7 +130,7 @@ size: string = "default"
.wrn-component p {
margin: 0;
color: var(--wrn-color-muted);
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
line-height: 1.6;
}
@@ -145,8 +145,9 @@ size: string = "default"
display: block;
min-height: 1em;
margin-top: 0.25rem;
color: var(--wrn-color-danger);
font-size: 0.8rem;
color: var(--wrn-color-danger-text, var(--wrn-color-danger));
font-size: 0.78rem;
font-weight: 550;
}
.wrn-next--choice {
@@ -173,13 +174,14 @@ size: string = "default"
width: 100%;
min-height: var(--wrn-control-height, 2.5rem);
padding: 0.5rem 0.75rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm, 6px);
border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm, 8px);
outline: 0;
color: var(--wrn-color-text);
background: var(--wrn-color-bg);
background: var(--wrn-color-input-background, var(--wrn-color-surface));
font: inherit;
font-weight: 500;
transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
}
.wrn-auth-form form > .wrn-next--field,
.wrn-auth-form form > .wrn-field {
@@ -193,8 +195,8 @@ size: string = "default"
box-shadow: none;
}
.wrn-next--field :where(input, textarea, select):focus-visible {
border-color: var(--wrn-color-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 16%, transparent);
border-color: var(--wrn-field-color, var(--wrn-color-primary));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04), 0 0 0 3px color-mix(in srgb, var(--wrn-field-color, var(--wrn-color-primary)) 18%, transparent);
}
.wrn-next--field textarea {
resize: vertical;
@@ -228,12 +230,14 @@ size: string = "default"
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.35;
letter-spacing: -0.005em;
}
.wrn-next__field-hint,
.wrn-next__field-help {
color: var(--wrn-color-muted);
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-size: 0.75rem;
font-weight: 500;
font-weight: 450;
line-height: 1.45;
}
.wrn-next__field-control {
position: relative;
@@ -241,10 +245,11 @@ size: string = "default"
}
.wrn-next__field-control > :is(input, textarea, select) {
padding-inline: 0.85rem;
border-color: var(--wrn-color-border);
border-color: var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
font-size: 0.8125rem;
background: var(--wrn-color-input-background, var(--wrn-color-surface));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
font-size: 0.875rem;
}
.wrn-next__field-control[data-has-icon="true"][data-icon-position="start"] > :is(input, textarea, select) {
padding-inline-start: 2.5rem;
@@ -285,7 +290,8 @@ size: string = "default"
}
.wrn-next--field[data-variant="ghost"] .wrn-next__field-control > :is(input, textarea, select) {
border-color: transparent;
background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
box-shadow: none;
}
.wrn-next__field-floating-label {
position: absolute;
@@ -326,9 +332,9 @@ size: string = "default"
}
.wrn-next__field-error {
min-height: 1em;
color: var(--wrn-color-danger);
font-size: 0.82em;
font-weight: 600;
color: var(--wrn-color-danger-text, var(--wrn-color-danger));
font-size: 0.78rem;
font-weight: 550;
}
.wrn-next--field[data-invalid="false"] > .wrn-next__field-error {
display: none;
@@ -336,14 +342,16 @@ size: string = "default"
.wrn-next--field[data-invalid="true"] :is(input, textarea, select),
.wrn-next--choice-field[data-invalid="true"] input {
border-color: var(--wrn-color-danger);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-danger) 12%, transparent);
}
.wrn-next--field :is(input, textarea, select):disabled,
.wrn-next--choice-field input:disabled {
cursor: not-allowed;
opacity: 0.58;
opacity: 0.55;
background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
}
.wrn-next--field :is(input, textarea, select):read-only {
background: var(--wrn-color-surface-2);
background: var(--wrn-color-surface-soft, var(--wrn-color-surface-2));
}
.wrn-next--field[data-inline="true"],
.wrn-next--choice-field[data-inline="true"] {
@@ -400,11 +408,13 @@ size: string = "default"
display: flex;
min-width: 0;
align-items: center;
gap: 0.65rem;
gap: 0.625rem;
color: var(--wrn-color-text);
width: 100%;
font-size: 0.75rem;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.4;
cursor: pointer;
}
.wrn-next__checkbox-content > .wrn-next__choice {
width: 100%;
@@ -419,12 +429,13 @@ size: string = "default"
.wrn-next__choice-copy {
display: grid;
min-width: 0;
gap: 0.15rem;
line-height: 1.35;
gap: 0.125rem;
line-height: 1.4;
}
.wrn-next__choice-copy small {
color: var(--wrn-color-muted);
font-weight: 500;
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-size: 0.78rem;
font-weight: 450;
}
.wrn-next__radio-group,
.wrn-next__checkbox-group {
@@ -444,15 +455,18 @@ size: string = "default"
.wrn-next--radio-field[data-card="true"] .wrn-next--radio,
.wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox {
min-height: 4.5rem;
padding: 0.85rem;
padding: 0.9rem 1rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-1);
transition: border-color var(--wrn-motion-fast) var(--wrn-ease-standard), box-shadow var(--wrn-motion-fast) var(--wrn-ease-standard), background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
}
.wrn-next--radio-field[data-card="true"] .wrn-next--radio:has(input:checked),
.wrn-next--checkbox-field[data-card="true"] .wrn-next--checkbox:has(input:checked) {
border-color: var(--wrn-field-color);
box-shadow: 0 0 0 1px var(--wrn-field-color);
background: color-mix(in srgb, var(--wrn-field-color) 5%, var(--wrn-color-surface));
box-shadow: 0 0 0 1px var(--wrn-field-color), var(--wrn-shadow-1);
}
.wrn-next--radio-field[data-list="true"] .wrn-next--radio,
.wrn-next--checkbox-field[data-list="true"] .wrn-next--checkbox {
@@ -473,19 +487,21 @@ size: string = "default"
}
.wrn-next__choice[data-variant="outlined"],
.wrn-next__choice[data-variant="floating"] {
padding: 0.65rem 0.8rem;
padding: 0.7rem 0.85rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
}
.wrn-next__choice[data-variant="pill"] {
padding: 0.65rem 1rem;
padding: 0.6rem 1rem;
border: 1px solid color-mix(in srgb, var(--wrn-field-color) 22%, var(--wrn-color-border));
border-radius: 999px;
background: color-mix(in srgb, var(--wrn-field-color) 9%, var(--wrn-color-surface));
background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface));
}
.wrn-next__choice[data-variant="ghost"] {
padding: 0.65rem 0.8rem;
padding: 0.65rem 0.85rem;
border-radius: var(--wrn-radius-sm);
background: color-mix(in srgb, var(--wrn-field-color) 7%, transparent);
background: color-mix(in srgb, var(--wrn-field-color) 6%, transparent);
}
.wrn-next__choice[data-variant="underline"] {
padding-block: 0.5rem;
@@ -519,25 +535,35 @@ size: string = "default"
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.7rem 0.85rem;
border: 1px solid var(--wrn-color-border);
padding: 0.55rem 0.85rem;
border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
background: var(--wrn-color-input-background, var(--wrn-color-surface));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
color: var(--wrn-color-text);
font: inherit;
font-size: 0.875rem;
font-variant-numeric: tabular-nums;
text-align: left;
cursor: pointer;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.wrn-next__calendar,
.wrn-next__time-panel {
z-index: 20;
position: absolute;
z-index: 40;
top: 100%;
left: 0;
display: grid;
width: min(100%, 22rem);
width: min(calc(100vw - 2rem), 19.5rem);
gap: 0.75rem;
padding: 0.85rem;
margin-top: 0.375rem;
padding: 0.75rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-md);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-3);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
animation: wrn-popover-enter var(--wrn-motion-base, 160ms) var(--wrn-ease-emphasized, ease) both;
}
.wrn-next--date-picker[data-expanded="false"] .wrn-next__calendar,
.wrn-next--time-picker[data-expanded="false"] .wrn-next__time-panel {
@@ -547,29 +573,42 @@ size: string = "default"
.wrn-next__time-panel button {
min-height: 2.25rem;
border: 0;
border-radius: var(--wrn-radius-sm);
border-radius: calc(var(--wrn-radius-sm) - 2px);
background: transparent;
color: inherit;
font: inherit;
font-size: 0.8125rem;
font-variant-numeric: tabular-nums;
cursor: pointer;
transition: background-color 120ms ease, color 120ms ease;
}
.wrn-next__calendar-weekdays,
.wrn-next__calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0.2rem;
gap: 0.125rem;
text-align: center;
}
.wrn-next__calendar-weekdays {
color: var(--wrn-color-muted);
font-size: 0.75rem;
padding-bottom: 0.375rem;
border-bottom: 1px solid var(--wrn-color-border);
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-family: var(--wrn-font-mono, monospace);
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.wrn-next__calendar-grid button:hover,
.wrn-next__time-panel button:hover {
background: var(--wrn-color-surface-2);
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
}
.wrn-next__calendar-grid button[aria-pressed="true"],
.wrn-next__time-panel button[aria-pressed="true"] {
background: var(--wrn-field-color);
color: var(--wrn-color-primary-contrast, #fff);
box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--wrn-field-color) 35%, transparent);
font-weight: 650;
}
.wrn-next__time-period {
display: flex;
@@ -603,7 +642,7 @@ size: string = "default"
.wrn-next--field[data-variant="ghost"]
:is(.wrn-next__input-group-control, .wrn-next__file-control, .wrn-next__color-control) {
border-color: transparent;
background: color-mix(in srgb, var(--wrn-field-color) 8%, var(--wrn-color-surface));
background: color-mix(in srgb, var(--wrn-field-color) 6%, var(--wrn-color-surface-soft, var(--wrn-color-surface)));
}
@media (max-width: 640px) {
.wrn-next--field[data-inline="true"],
packages/ui/components/tooltip.wrn
+12 -10
View File
@@ -172,16 +172,17 @@ id: string = ""
left: 50%;
bottom: calc(100% + var(--wrn-tooltip-offset));
display: grid;
gap: 0.22rem;
gap: 0.2rem;
width: max-content;
max-width: min(var(--wrn-tooltip-max-width), calc(100vw - 1rem));
padding: 0.58rem 0.72rem;
color: white;
background: color-mix(in srgb, black 88%, var(--tooltip-accent) 12%);
border: 1px solid color-mix(in srgb, white 12%, transparent);
border-radius: 0.65rem;
box-shadow: 0 14px 38px color-mix(in srgb, black 28%, transparent);
font-size: 0.73rem;
padding: 0.45rem 0.65rem;
color: #f4f5f7;
background: #16181d;
border: 1px solid rgb(255 255 255 / 0.08);
border-radius: var(--wrn-radius-sm, 0.5rem);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 8px 24px -4px rgb(0 0 0 / 0.35);
font-size: 0.75rem;
font-weight: 500;
line-height: 1.45;
text-align: left;
transform: translateX(-50%);
@@ -194,8 +195,9 @@ id: string = ""
.wrn-tooltip[data-variant="soft"] .wrn-tooltip__content {
color: var(--wrn-color-text);
background: var(--tooltip-soft);
border-color: color-mix(in srgb, var(--tooltip-accent) 24%, var(--wrn-color-border));
background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
border-color: var(--wrn-color-border);
box-shadow: var(--wrn-shadow-2);
}
.wrn-tooltip[data-variant="light"] .wrn-tooltip__content {
packages/ui/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@wrnexus/ui",
"version": "0.8.86",
"version": "0.8.87",
"private": true,
"type": "module",
"main": "src/index.ts",
packages/ui/styles/SelectStyles.wrn
+52 -45
View File
@@ -16,8 +16,8 @@ component SelectStyles {
.wrn-next--advanced-select > label:first-child,
.wrn-next--advanced-select .wrn-next__row > label {
color: var(--wrn-color-text);
font-size: 0.82em;
font-weight: 700;
font-size: 0.8125rem;
font-weight: 600;
}
.wrn-next--advanced-select .wrn-next__row {
display: flex;
@@ -26,33 +26,35 @@ component SelectStyles {
gap: 1rem;
}
.wrn-next--advanced-select small {
color: var(--wrn-color-muted);
font-size: 0.72em;
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-size: 0.75rem;
}
.wrn-next__select-search input,
.wrn-next--advanced-select select {
width: 100%;
min-height: 2.6em;
padding: 0.62em 0.75em;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm);
min-height: 2.25rem;
padding: 0.45em 0.75em;
border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: calc(var(--wrn-radius-sm) - 2px);
color: var(--wrn-color-text);
background: var(--wrn-color-surface);
background: var(--wrn-color-input-background, var(--wrn-color-surface));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
font: inherit;
font-size: 0.8125rem;
}
.wrn-next__search-icon {
position: absolute;
top: 50%;
left: 0.75em;
z-index: 1;
color: var(--wrn-component-color);
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
transform: translateY(-50%);
}
.wrn-next--advanced-select select:focus-visible,
.wrn-next__select-search input:focus-visible {
border-color: var(--wrn-component-color);
outline: 2px solid color-mix(in srgb, var(--wrn-component-color) 24%, transparent);
outline-offset: 1px;
outline: 0;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-component-color) 18%, transparent);
}
.wrn-next--advanced-select select[multiple] {
min-height: 8rem;
@@ -69,11 +71,11 @@ component SelectStyles {
width: fit-content;
padding: 0;
border: 0;
color: var(--wrn-component-color);
color: var(--wrn-color-primary-text, var(--wrn-component-color));
background: transparent;
font: inherit;
font-size: 0.75em;
font-weight: 700;
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
}
.wrn-next--invalid :is(input, select) {
@@ -114,18 +116,17 @@ component SelectStyles {
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.55em 2.75em 0.55em 0.8em;
border: 1px solid var(--wrn-color-border);
padding: 0.45em 2.75em 0.45em 0.85em;
border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
border-radius: var(--wrn-radius-sm);
color: var(--wrn-color-text);
background: var(--wrn-color-bg);
background: var(--wrn-color-input-background, var(--wrn-color-surface));
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
font: inherit;
font-size: 0.875rem;
text-align: left;
cursor: pointer;
transition:
border-color var(--wrn-motion-base) var(--wrn-ease-standard),
box-shadow var(--wrn-motion-base) var(--wrn-ease-standard);
transition: border-color var(--wrn-motion-base) var(--wrn-ease-standard), box-shadow var(--wrn-motion-base) var(--wrn-ease-standard);
}
.wrn-next--open .wrn-next__select-trigger,
.wrn-next__select-trigger:focus-visible {
@@ -159,19 +160,20 @@ component SelectStyles {
}
.wrn-next__select-dropdown {
position: absolute;
top: calc(100% + 0.4rem);
top: calc(100% + 0.375rem);
left: 0;
z-index: 80;
display: grid;
width: 100%;
min-width: min(20rem, 92vw);
gap: 0.45rem;
padding: 0.5rem;
gap: 0.375rem;
padding: 0.3rem;
overflow: hidden;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
box-shadow: 0 1.25rem 3rem rgb(0 0 0 / 18%);
border-radius: var(--wrn-radius);
background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
animation: wrn-popover-enter var(--wrn-motion-base, 160ms) var(--wrn-ease-emphasized, ease) both;
}
.wrn-next[data-placement="top"] .wrn-next__select-dropdown {
top: auto;
@@ -194,10 +196,11 @@ component SelectStyles {
gap: 0.15rem;
}
.wrn-next__group-label {
padding: 0.55rem 0.7rem 0.3rem;
color: var(--wrn-component-color);
font-size: 0.68em;
font-weight: 800;
padding: 0.5rem 0.625rem 0.25rem;
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-family: var(--wrn-font-mono, monospace);
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
@@ -207,15 +210,16 @@ component SelectStyles {
width: 100%;
grid-template-columns: minmax(0, 1fr);
align-items: center;
gap: 0.65rem;
padding: 0.58rem 2.5rem 0.58rem 0.7rem;
gap: 0.625rem;
padding: 0.5rem 2.25rem 0.5rem 0.625rem;
border: 0;
border-radius: calc(var(--wrn-radius-sm) * 0.72);
border-radius: calc(var(--wrn-radius-sm) - 2px);
color: var(--wrn-color-text);
background: transparent;
font: inherit;
text-align: left;
cursor: pointer;
transition: background-color 100ms ease;
}
.wrn-next__select-option:has(> img),
.wrn-next__select-option:has(> i:not(.wrn-next__check)) {
@@ -228,14 +232,15 @@ component SelectStyles {
}
.wrn-next__select-option strong {
overflow: hidden;
font-size: 0.82em;
font-weight: 650;
font-size: 0.8125rem;
font-weight: 550;
text-overflow: ellipsis;
white-space: nowrap;
}
.wrn-next__select-option small {
overflow: hidden;
font-size: 0.68em;
color: var(--wrn-color-text-muted);
font-size: 0.72rem;
text-overflow: ellipsis;
white-space: nowrap;
}
@@ -247,10 +252,10 @@ component SelectStyles {
object-fit: cover;
}
.wrn-next__select-option--active {
background: var(--wrn-color-surface-2);
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
}
.wrn-next__select-option--selected {
color: var(--wrn-color-primary-text);
color: var(--wrn-color-text);
}
.wrn-next__select-option:disabled {
opacity: 0.45;
@@ -259,10 +264,10 @@ component SelectStyles {
.wrn-next__check {
position: absolute;
top: 50%;
right: 0.8rem;
right: 0.75rem;
width: 1rem;
height: 1rem;
color: var(--wrn-component-color);
color: var(--wrn-color-primary-text, var(--wrn-component-color));
transform: translateY(-50%);
}
.wrn-next__select-message {
@@ -272,15 +277,17 @@ component SelectStyles {
justify-content: center;
gap: 0.5rem;
padding: 1rem;
color: var(--wrn-color-muted);
font-size: 0.78em;
color: var(--wrn-color-text-muted);
font-size: 0.8125rem;
text-align: center;
}
.wrn-next__create-option,
.wrn-next__load-more {
width: 100%;
padding: 0.65rem;
width: calc(100% + 0.6rem);
margin: 0 -0.3rem -0.3rem;
padding: 0.625rem 0.925rem;
border-top: 1px solid var(--wrn-color-border);
background: var(--wrn-color-surface-soft);
text-align: left;
}
.wrn-next--disabled {
packages/ui/test/component-audit.test.ts
+2 -2
View File
@@ -109,8 +109,8 @@ test("map embeds a geographic provider and requires a Google key", async () => {
test("chart accepts data arrays and chooses line rendering", async () => {
const dom = await mount("Chart", {type:"line",data:[{label:"Mon",value:12},{label:"Tue",value:18}]});
expect(dom.querySelector('polyline')).not.toBeNull();
expect(dom.querySelectorAll('.wrn-chart__point-labels button').length).toBe(2);
expect(dom.querySelector('path.wrn-chart__line')).not.toBeNull();
expect(dom.querySelectorAll('.wrn-chart__hit').length).toBe(2);
});
test("calendar Done and outside dismiss both close the panel", async () => {
packages/ui/test/ui.test.ts
+5 -4
View File
@@ -898,7 +898,7 @@ test("alert exposes configurable radius and elevation treatments", async () => {
expect(css).toContain('.wrn-next--alert[data-radius="xl"]');
expect(css).toContain('.wrn-next--alert[data-shadow="lg"]');
expect(css).toContain("border-radius: calc(var(--wrn-radius, 0.75rem) * 1.75)");
expect(css).toContain("0 20px 48px color-mix(in srgb, #000 24%, transparent)");
expect(css).toContain("box-shadow: var(--wrn-shadow-3)");
});
test("avatar renders images, fallbacks, presence, badges, tooltips, and media copy", async () => {
@@ -1430,7 +1430,7 @@ test("basic fields suppress native popups and render package constraint messages
const selectSource = readFileSync(uiComponentPath("Select"), "utf8");
expect(selectSource).toContain("appearance: none");
expect(selectSource).toContain("background-color: var(--wrn-color-surface)");
expect(selectSource).toContain("background-color: var(--wrn-color-input-background, var(--wrn-color-surface))");
expect(selectSource).toContain("wrn-next__select-indicator");
});
@@ -3854,8 +3854,9 @@ test("chart renders accessible SVG bars and emits point and legend outputs", asy
for (const name of ["dataPointClick", "select", "legendToggle"]) {
root.addEventListener(name, () => events.push(name));
}
expect(root.querySelectorAll("svg rect")).toHaveLength(2);
(root.querySelector("svg rect") as SVGElement).dispatchEvent(
expect(root.querySelectorAll("svg path.wrn-chart__bar")).toHaveLength(2);
expect(root.querySelectorAll("button.wrn-chart__hit")).toHaveLength(2);
(root.querySelector("button.wrn-chart__hit") as HTMLElement).dispatchEvent(
new (dom.window as { Event: typeof Event }).Event("click", { bubbles: true }),
);
(root.querySelector(".wrn-chart__legend button") as HTMLButtonElement).click();