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

complete UI CSS ownership remediation

Browse Source
This commit is contained in:
Clintchiz
2026-08-09 21:42:30 +05:30
parent 937ccb9e8e
commit 8f19a5eb2b
61 changed files with 1320 additions and 1577 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/components/Accordion.wrn
+4 -1
View File
@@ -1,3 +1,5 @@
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
component Accordion {
outputs {
change(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
@@ -103,7 +105,7 @@ component Accordion {
data-variant="{variant}"
data-indicator="{indicator}"
data-multiple="{allowsMultiple() ? 'true' : 'false'}"
class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--accordion wire-next--accordion-{variant} {bordered ? 'wire-next--accordion-bordered' : ''} {separated ? 'wire-next--accordion-separated' : ''} {flush ? 'wire-next--accordion-flush' : ''} {disabled ? 'wire-next--disabled' : ''} {class}"
class="wire-component wire-component--color-{color} wire-component--size-{size} wire-next--accordion wire-next--accordion-{variant} {bordered ? 'wire-next--accordion-bordered' : ''} {separated ? 'wire-next--accordion-separated' : ''} {flush ? 'wire-next--accordion-flush' : ''} {disabled ? 'wire-next--disabled' : ''} {class}"
>
{#each items as item, index}
<section
@@ -204,6 +206,7 @@ component Accordion {
</section>
{/each}
</div>
<ComponentBaseStyles hidden />
}
style {
packages/ui/components/AdvancedSelect.wrn
+7 -1
View File
@@ -1,3 +1,7 @@
import SelectStyles from "../styles/SelectStyles.wrn"
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
component AdvancedSelect {
outputs {
search(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
@@ -253,7 +257,7 @@ component AdvancedSelect {
view {
<div
class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--advanced-select {open ? 'wire-next--open' : ''} {fixed ? 'wire-next--advanced-select-fixed' : ''} {invalid ? 'wire-next--invalid' : ''} {disabled ? 'wire-next--disabled' : ''} {class}"
class="wire-component wire-component--color-{color} wire-component--size-{size} wire-next--advanced-select {open ? 'wire-next--open' : ''} {fixed ? 'wire-next--advanced-select-fixed' : ''} {invalid ? 'wire-next--invalid' : ''} {disabled ? 'wire-next--disabled' : ''} {class}"
data-placement="{placement}"
data-search-mode="{searchMode}"
data-remote="{remote ? 'true' : 'false'}"
@@ -455,6 +459,8 @@ component AdvancedSelect {
data-error="{name}"
>{validationMessage}</small>
</div>
<SelectStyles hidden />
<ComponentBaseStyles hidden />
}
style {
packages/ui/components/AuthForm.wrn
+4 -1
View File
@@ -49,7 +49,7 @@ component AuthForm {
}
view {
<section class="wire-auth-form wire-next--color-{color} wire-next--size-{size} {class}">
<section class="wire-auth-form wire-component--color-{color} wire-component--size-{size} {class}">
<header>
<span class="wire-auth-form__icon icon-[lucide--fingerprint]" aria-hidden="true"></span>
<div><h2>{title}</h2>{#if description}<p>{description}</p>{/if}</div>
@@ -88,6 +88,7 @@ component AuthForm {
</form>
<slot />
</section>
<ComponentBaseStyles hidden />
}
style {
@@ -147,3 +148,5 @@ component AuthForm {
}
}
}
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
import Button from "./button.wrn"
packages/ui/components/AuthSplitLayout.wrn
+4 -1
View File
@@ -1,3 +1,5 @@
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
component AuthSplitLayout {
props {
size: string = "default"
@@ -12,7 +14,7 @@ component AuthSplitLayout {
view {
<main
class="wire-auth-split wire-next--color-{color} wire-next--size-{size} {class}"
class="wire-auth-split wire-component--color-{color} wire-component--size-{size} {class}"
>
<section
class="wire-auth-split__content"
@@ -79,6 +81,7 @@ component AuthSplitLayout {
</div>
</section>
</main>
<ComponentBaseStyles hidden />
}
style {
packages/ui/components/AvatarGroup.wrn
+4 -1
View File
@@ -1,3 +1,5 @@
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
component AvatarGroup {
outputs {
overflow(payload: { sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])
@@ -43,7 +45,7 @@ component AvatarGroup {
view {
<div
{...attrs}
class="wire-next wire-next--avatar-group {class}"
class="wire-component wire-next--avatar-group {class}"
data-wrn-avatar-group
data-layout="{layout}"
data-shape="{shape}"
@@ -146,6 +148,7 @@ component AvatarGroup {
{/if}
</div>
</div>
<ComponentBaseStyles hidden />
}
style {
packages/ui/components/Blockquote.wrn
+4 -1
View File
@@ -1,3 +1,5 @@
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
component Blockquote {
props {
quote: string = "I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed."
@@ -18,7 +20,7 @@ component Blockquote {
view {
<figure
{...attrs}
class="wire-next wire-next--blockquote wire-next--color-{color} wire-next--size-{size} {class}"
class="wire-component wire-next--blockquote wire-component--color-{color} wire-component--size-{size} {class}"
data-size="{size}"
data-color="{color}"
data-align="{align}"
@@ -63,6 +65,7 @@ component Blockquote {
</figcaption>
{/if}
</figure>
<ComponentBaseStyles hidden />
}
style {
packages/ui/components/ButtonGroup.wrn
+4 -1
View File
@@ -1,3 +1,5 @@
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
component ButtonGroup {
outputs {
click(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
@@ -54,7 +56,7 @@ items: unknown[] = []
view {
<div
{...attrs}
class="wire-next wire-next--button-group {class}"
class="wire-component wire-next--button-group {class}"
role="{toolbar ? 'toolbar' : 'group'}"
aria-label="{ariaLabel}"
aria-orientation="{orientation}"
@@ -88,6 +90,7 @@ items: unknown[] = []
{/if}
<slot />
</div>
<ComponentBaseStyles hidden />
}
style {
packages/ui/components/Card.wrn
+4 -1
View File
@@ -1,3 +1,5 @@
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
component Card {
outputs {
click(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
@@ -80,7 +82,7 @@ component Card {
data-layout='{layout}'
data-hover='{hover}'
data-align='{align}'
class='wire-next wire-next--card wire-next--color-{color} wire-next--size-{size} wire-next--variant-{variant} {class}'
class='wire-component wire-next--card wire-component--color-{color} wire-component--size-{size} wire-next--variant-{variant} {class}'
>
{#if items.length > 0}
<div class="wire-next__card-group">
@@ -308,6 +310,7 @@ component Card {
</article>
{/if}
</div>
<ComponentBaseStyles hidden />
}
style {
packages/ui/components/Carousel.wrn
+4 -1
View File
@@ -1,3 +1,5 @@
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
// Interactive, hydration-safe content carousel.
component Carousel {
outputs {
@@ -316,7 +318,7 @@ component Carousel {
view {
<section
{...attrs}
class="wire-next wire-next--carousel wire-next--color-{color} wire-next--size-{size} wire-next--variant-{variant} {class}"
class="wire-component wire-next--carousel wire-component--color-{color} wire-component--size-{size} wire-next--variant-{variant} {class}"
data-rtl="{isRTL}"
data-centered="{isCentered}"
data-draggable="{isDraggable && !isSnap}"
@@ -460,6 +462,7 @@ component Carousel {
</div>
</div>
</section>
<ComponentBaseStyles hidden />
}
style {
packages/ui/components/ChatBubble.wrn
+6 -3
View File
@@ -1,3 +1,5 @@
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
component ChatBubble {
outputs {
action(payload: { action: boolean; item: string | number | boolean | null | object; index: number })
@@ -64,7 +66,7 @@ component ChatBubble {
view {
<section
{...attrs}
class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--chat-bubble wire-next--variant-{variant} {class}"
class="wire-component wire-component--color-{color} wire-component--size-{size} wire-next--chat-bubble wire-next--variant-{variant} {class}"
data-one-sided="{oneSided}"
role="log"
aria-label="{ariaLabel}"
@@ -146,14 +148,15 @@ component ChatBubble {
{/if}
<slot />
</section>
<ComponentBaseStyles hidden />
}
style {
.wire-next--chat-bubble.wire-next--size-sm {
.wire-next--chat-bubble.wire-component--size-sm {
--wire-chat-padding: 0.75rem;
font-size: 0.875rem;
}
.wire-next--chat-bubble.wire-next--size-lg {
.wire-next--chat-bubble.wire-component--size-lg {
--wire-chat-padding: 1.25rem;
font-size: 1.0625rem;
}
packages/ui/components/Collapse.wrn
+6 -3
View File
@@ -1,3 +1,5 @@
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
component Collapse {
outputs {
toggle(payload: { index: number; item: string | number | boolean | null | object; open: boolean; openIndexes: number[] })
@@ -51,7 +53,7 @@ size: string = "default"
view {
<section
{...attrs}
class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--collapse {class}"
class="wire-component wire-component--color-{color} wire-component--size-{size} wire-next--collapse {class}"
data-mode="{mode}"
aria-label="{ariaLabel}"
>
@@ -94,13 +96,14 @@ size: string = "default"
{/each}
<slot />
</section>
<ComponentBaseStyles hidden />
}
style {
.wire-next--collapse.wire-next--size-sm {
.wire-next--collapse.wire-component--size-sm {
font-size: 0.875rem;
}
.wire-next--collapse.wire-next--size-lg {
.wire-next--collapse.wire-component--size-lg {
font-size: 1.0625rem;
}
packages/ui/components/ColorPicker.wrn
+7 -1
View File
@@ -1,3 +1,7 @@
import FieldStyles from "../styles/FieldStyles.wrn"
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
component ColorPicker {
outputs {
input(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
@@ -32,11 +36,13 @@ component ColorPicker {
client function preventReadonly(sourceEvent) { if (readonly) sourceEvent.preventDefault() }
}
view {
<div {...attrs} class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--field wire-next--color-picker {class}" data-variant="{variant}" data-inline="{inline}" data-invalid="{error ? 'true' : 'false'}">
<div {...attrs} class="wire-component wire-component--color-{color} wire-component--size-{size} wire-next--field wire-component--color-picker {class}" data-variant="{variant}" data-inline="{inline}" data-invalid="{error ? 'true' : 'false'}">
<div class="wire-next__field-heading"><label class="{hiddenLabel ? 'wire-next__sr-only' : ''}" for="{id || name}">{label}</label>{#if cornerHint}<span class="wire-next__field-hint">{cornerHint}</span>{/if}</div>
<div class="wire-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>
{#if helperText}<small class="wire-next__field-help">{helperText}</small>{/if}<small class="wire-next__field-error" data-error="{name}">{error}</small>
</div>
<FieldStyles hidden />
<ComponentBaseStyles hidden />
}
style {
packages/ui/components/Combobox.wrn
+7 -1
View File
@@ -1,3 +1,7 @@
import SelectStyles from "../styles/SelectStyles.wrn"
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
component ComboBox {
outputs {
search(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
@@ -225,7 +229,7 @@ component ComboBox {
view {
<div
class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--advanced-select wire-next--combobox {open ? 'wire-next--open' : ''} {fixed ? 'wire-next--advanced-select-fixed' : ''} {invalid ? 'wire-next--invalid' : ''} {disabled ? 'wire-next--disabled' : ''} {class}"
class="wire-component wire-component--color-{color} wire-component--size-{size} wire-next--advanced-select wire-next--combobox {open ? 'wire-next--open' : ''} {fixed ? 'wire-next--advanced-select-fixed' : ''} {invalid ? 'wire-next--invalid' : ''} {disabled ? 'wire-next--disabled' : ''} {class}"
data-placement="{placement}"
data-search-mode="{searchMode}"
data-remote="{remote ? 'true' : 'false'}"
@@ -385,6 +389,8 @@ component ComboBox {
data-error="{name}"
>{validationMessage}</small>
</div>
<SelectStyles hidden />
<ComponentBaseStyles hidden />
}
style {
packages/ui/components/DataMap.wrn
+4 -1
View File
@@ -1,3 +1,5 @@
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
component DataMap {
outputs {
select(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
@@ -14,12 +16,13 @@ component DataMap {
class: string = ""
}
view {
<section class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--data-map wire-next--variant-{variant} {class}">
<section class="wire-component wire-component--color-{color} wire-component--size-{size} wire-next--data-map wire-next--variant-{variant} {class}">
{#if title}<strong>{title}</strong>{/if}
{#if description}<p>{description}</p>{/if}
{#if items}<div class="wire-next__items">{#each items as item}<span>{item.label}</span>{/each}</div>{/if}
<slot />
</section>
<ComponentBaseStyles hidden />
}
style {
packages/ui/components/DataTable.wrn
+3
View File
@@ -1,3 +1,5 @@
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
//
// DataTable -- columns, sorting, filtering, pagination and selection over an
// array of records.
@@ -1043,6 +1045,7 @@ component DataTable {
<slot></slot>
</div>
<ComponentBaseStyles hidden />
}
style {
packages/ui/components/DatePicker.wrn
+7 -1
View File
@@ -1,3 +1,7 @@
import FieldStyles from "../styles/FieldStyles.wrn"
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
component DatePicker {
outputs {
input(payload: { sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])
@@ -52,12 +56,14 @@ size: string = "default"
client function handleInvalid(sourceEvent) { output.invalid({ name: name, message: sourceEvent.currentTarget.validationMessage, sourceEvent: sourceEvent }) }
}
view {
<div {...attrs} class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--field wire-next--date-picker {class}" data-variant="{variant}" data-inline="{inline}" data-invalid="{error ? 'true' : 'false'}" data-expanded="{expanded}">
<div {...attrs} class="wire-component wire-component--color-{color} wire-component--size-{size} wire-next--field wire-next--date-picker {class}" data-variant="{variant}" data-inline="{inline}" data-invalid="{error ? 'true' : 'false'}" data-expanded="{expanded}">
<div class="wire-next__field-heading"><label for="{id || name}">{label}</label>{#if cornerHint}<span class="wire-next__field-hint">{cornerHint}</span>{/if}</div>
<div class="wire-next__picker-control"><input id="{id || name}" class="wire-next__sr-only wire-next__picker-value" type="text" name="{name}" value="{currentValue}" required="{required}" readonly aria-hidden="true" tabindex="-1" @invalid="handleInvalid(event)" /><button type="button" class="wire-next__date-trigger" disabled="{disabled || readonly}" aria-haspopup="dialog" aria-expanded="{expanded}" @click="openCalendar(event)" @focus="handleFocus(event)" @blur="handleBlur(event)"><span>{currentValue || placeholder || "Select date"}</span><i class="icon-[lucide--calendar-days]" aria-hidden="true"></i></button>{#if currentValue && !readonly && !disabled}<button type="button" class="wire-next__picker-clear" aria-label="Clear date" @click="clearDate(event)">×</button>{/if}</div>
<div class="wire-next__calendar" role="dialog" aria-label="{label}"><div class="wire-next__date-selectors"><label>Month<select value="{selectedMonth}" @change="updateDate('month', event.currentTarget.value, event)">{#each months as month}<option value="{month.value}" selected="{month.value === selectedMonth}">{month.label}</option>{/each}</select></label><label>Year<select value="{selectedYear}" @change="updateDate('year', event.currentTarget.value, event)">{#each years as year}<option value="{year}" selected="{String(year) === selectedYear}">{year}</option>{/each}</select></label></div><div class="wire-next__calendar-grid">{#each days as day}<button type="button" data-value="{String(day).padStart(2, '0')}" aria-pressed="{String(day).padStart(2, '0') === selectedDay}" @click="selectDay(event)">{day}</button>{/each}</div><button type="button" class="wire-next__date-done" disabled="{!currentValue}" @click="finishDate(event)">Done</button></div>
{#if helperText}<small class="wire-next__field-help">{helperText}</small>{/if}<small class="wire-next__field-error" data-error="{name}">{error}</small>
</div>
<FieldStyles hidden />
<ComponentBaseStyles hidden />
}
style {
packages/ui/components/DeviceFrame.wrn
+4 -1
View File
@@ -1,3 +1,5 @@
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
component DeviceFrame {
outputs {
change(payload: { device: string; orientation: string; sourceEvent: Event })
@@ -26,10 +28,11 @@ component DeviceFrame {
client function rotateFrame(sourceEvent) { currentOrientation = currentOrientation === "portrait" ? "landscape" : "portrait"; output.rotate({ device: device, orientation: currentOrientation, sourceEvent: sourceEvent }); output.change({ device: device, orientation: currentOrientation, sourceEvent: sourceEvent }) }
}
view {
<section {...attrs} class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--device-frame wire-next--variant-{variant} {class}" data-device="{device}" data-orientation="{currentOrientation}">
<section {...attrs} class="wire-component wire-component--color-{color} wire-component--size-{size} wire-next--device-frame wire-next--variant-{variant} {class}" data-device="{device}" data-orientation="{currentOrientation}">
<header><div>{#if title}<strong>{title}</strong>{/if}{#if description}<p>{description}</p>{/if}</div>{#if showToolbar}<div class="wire-next__device-actions" role="toolbar" aria-label="Preview device">{#each items as item}<button type="button" aria-pressed="{item.value === device}" @click="setDevice(item.value, event)">{item.label}</button>{/each}<button type="button" aria-label="Rotate preview" @click="rotateFrame(event)">↻</button></div>{/if}</header>
<div class="wire-next__device-shell">{#if src || srcdoc}<iframe title="{frameTitle}" src="{src}" srcdoc="{srcdoc}" allow="{allow}"></iframe>{:else}<div class="wire-next__device-content"><slot /></div>{/if}</div>
</section>
<ComponentBaseStyles hidden />
}
style {
packages/ui/components/DragAndDrop.wrn
+4 -1
View File
@@ -1,3 +1,5 @@
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
component DragAndDrop {
outputs {
dragStart(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
@@ -18,12 +20,13 @@ component DragAndDrop {
class: string = ""
}
view {
<section class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--drag-and-drop wire-next--variant-{variant} {class}">
<section class="wire-component wire-component--color-{color} wire-component--size-{size} wire-next--drag-and-drop wire-next--variant-{variant} {class}">
{#if title}<strong>{title}</strong>{/if}
{#if description}<p>{description}</p>{/if}
{#if items}<div class="wire-next__items">{#each items as item}<span>{item.label}</span>{/each}</div>{/if}
<slot />
</section>
<ComponentBaseStyles hidden />
}
style {
packages/ui/components/FeatureGrid.wrn
+4 -1
View File
@@ -33,7 +33,7 @@ component FeatureGrid {
data-align='{align}'
data-max-width='{maxWidth}'
data-variant='{variant}'
class='wire-feature-grid wire-next--color-{color} wire-next--size-{size} {class}'
class='wire-feature-grid wire-component--color-{color} wire-component--size-{size} {class}'
aria-label='{label}'
style='--wire-feature-grid-columns: {columns}; --wire-feature-grid-tablet-columns: {tabletColumns}; --wire-feature-grid-mobile-columns: {mobileColumns}; --wire-feature-grid-min-item-width: {minItemWidth || "17rem"};'
>
@@ -77,6 +77,7 @@ component FeatureGrid {
</div>
</div>
</section>
<ComponentBaseStyles hidden />
}
style {
@@ -232,3 +233,5 @@ component FeatureGrid {
}
}
}
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
import FeatureCard from "./FeatureCard.wrn"
packages/ui/components/FileInput.wrn
+7 -1
View File
@@ -1,3 +1,7 @@
import FieldStyles from "../styles/FieldStyles.wrn"
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
component FileInput {
outputs {
input(payload: { files: File[]; name: string; sourceEvent: Event })
@@ -46,11 +50,13 @@ size: string = "default"
client function preventReadonly(sourceEvent) { if (readonly) sourceEvent.preventDefault() }
}
view {
<div {...attrs} class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--field wire-next--file-input {class}" data-variant="{variant}" data-inline="{inline}" data-invalid="{error ? 'true' : 'false'}">
<div {...attrs} class="wire-component wire-component--color-{color} wire-component--size-{size} wire-next--field wire-next--file-input {class}" data-variant="{variant}" data-inline="{inline}" data-invalid="{error ? 'true' : 'false'}">
<div class="wire-next__field-heading"><label class="{hiddenLabel ? 'wire-next__sr-only' : ''}" for="{id || name}">{label}</label>{#if cornerHint}<span class="wire-next__field-hint">{cornerHint}</span>{/if}</div>
<div class="wire-next__file-control" data-icon-position="{iconPosition}">{#if icon}<span class="{icon}" aria-hidden="true"></span>{/if}<span>{selectedName || value || placeholder}</span><input id="{id || name}" type="file" name="{name}" accept="{accept}" multiple="{multiple}" disabled="{disabled}" required="{required}" aria-readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" @click="preventReadonly(event)" @input="handleChange(event)" @change="handleChange(event)" @focus="emitField('focus', event)" @blur="emitField('blur', event)" @invalid="emitField('invalid', event)" /></div>
{#if helperText}<small class="wire-next__field-help">{helperText}</small>{/if}<small class="wire-next__field-error" data-error="{name}">{error}</small>
</div>
<FieldStyles hidden />
<ComponentBaseStyles hidden />
}
style {
packages/ui/components/FileUploadProgress.wrn
+7 -1
View File
@@ -1,3 +1,7 @@
import FieldStyles from "../styles/FieldStyles.wrn"
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
component FileUploadProgress {
outputs {
cancel(payload: { sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])
@@ -30,12 +34,14 @@ size: string = "default"
client function completeUpload(sourceEvent) { currentValue = max; currentStatus = "complete"; output.complete(detail(sourceEvent)) }
}
view {
<div {...attrs} class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--file-upload-progress {class}" data-status="{currentStatus}" aria-live="polite">
<div {...attrs} class="wire-component wire-component--color-{color} wire-component--size-{size} wire-next--file-upload-progress {class}" data-status="{currentStatus}" aria-live="polite">
<div class="wire-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>
<progress value="{currentValue}" max="{max}" aria-label="{label}"></progress>
<div class="wire-next__upload-status"><span class="wire-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="wire-next__upload-actions">{#if currentStatus === "uploading"}<button type="button" @click="cancelUpload(event)">{cancelLabel}</button><button type="button" @click="completeUpload(event)">Complete</button>{/if}{#if currentStatus === "error" || currentStatus === "cancelled"}<button type="button" @click="retryUpload(event)">{retryLabel}</button>{/if}</div>
</div>
<FieldStyles hidden />
<ComponentBaseStyles hidden />
}
style {
packages/ui/components/Footer.wrn
+40
View File
@@ -287,6 +287,46 @@ component Footer {
}
style {
.wire-footer--columns-1 {
--wire-footer-columns: 1;
}
.wire-footer--columns-2 {
--wire-footer-columns: 2;
}
.wire-footer--columns-3 {
--wire-footer-columns: 3;
}
.wire-footer--columns-4 {
--wire-footer-columns: 4;
}
.wire-footer--columns-5 {
--wire-footer-columns: 5;
}
.wire-footer--columns-6 {
--wire-footer-columns: 6;
}
@media (max-width: 900px) {
.wire-footer--columns-1 .wire-footer__links {
grid-template-columns: 1fr;
}
.wire-footer--columns-2 .wire-footer__links {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 600px) {
.wire-footer--columns-1 .wire-footer__links {
grid-template-columns: 1fr;
}
}
/* --- Badge ---------------------------------------------------------------- */
.wire-badge {
display: inline-flex;
packages/ui/components/InputGroup.wrn
+7 -1
View File
@@ -1,3 +1,7 @@
import FieldStyles from "../styles/FieldStyles.wrn"
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
component InputGroup {
outputs {
input(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
@@ -39,7 +43,7 @@ component InputGroup {
client function handleAction(sourceEvent) { output.action({ name: name, sourceEvent: sourceEvent }) }
}
view {
<div {...attrs} class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--field wire-next--input-group {class}" data-variant="{variant}" data-inline="{inline}" data-invalid="{error ? 'true' : 'false'}">
<div {...attrs} class="wire-component wire-component--color-{color} wire-component--size-{size} wire-next--field wire-next--input-group {class}" data-variant="{variant}" data-inline="{inline}" data-invalid="{error ? 'true' : 'false'}">
<div class="wire-next__field-heading"><label class="{hiddenLabel ? 'wire-next__sr-only' : ''}" for="{id || name}">{label}</label>{#if cornerHint}<span class="wire-next__field-hint">{cornerHint}</span>{/if}</div>
<div class="wire-next__input-group-control">
{#if startText}<span class="wire-next__input-addon">{startText}</span>{/if}
@@ -50,6 +54,8 @@ component InputGroup {
</div>
{#if helperText}<small class="wire-next__field-help">{helperText}</small>{/if}<small class="wire-next__field-error" data-error="{name}">{error}</small>
</div>
<FieldStyles hidden />
<ComponentBaseStyles hidden />
}
style {
packages/ui/components/LegendIndicator.wrn
+4 -1
View File
@@ -1,3 +1,5 @@
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
component LegendIndicator {
outputs {
toggle(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
@@ -14,12 +16,13 @@ component LegendIndicator {
class: string = ""
}
view {
<section class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--legend-indicator wire-next--variant-{variant} {class}">
<section class="wire-component wire-component--color-{color} wire-component--size-{size} wire-next--legend-indicator wire-next--variant-{variant} {class}">
{#if title}<strong>{title}</strong>{/if}
{#if description}<p>{description}</p>{/if}
{#if items}<div class="wire-next__items">{#each items as item}<span>{item.label}</span>{/each}</div>{/if}
<slot />
</section>
<ComponentBaseStyles hidden />
}
style {
packages/ui/components/ListGroup.wrn
+4 -1
View File
@@ -1,3 +1,5 @@
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
component ListGroup {
outputs {
select(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
@@ -14,12 +16,13 @@ component ListGroup {
class: string = ""
}
view {
<section class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--list-group wire-next--variant-{variant} {class}">
<section class="wire-component wire-component--color-{color} wire-component--size-{size} wire-next--list-group wire-next--variant-{variant} {class}">
{#if title}<strong>{title}</strong>{/if}
{#if description}<p>{description}</p>{/if}
{#if items}<div class="wire-next__items">{#each items as item}<span>{item.label}</span>{/each}</div>{/if}
<slot />
</section>
<ComponentBaseStyles hidden />
}
style {
packages/ui/components/Navbar.wrn
+4 -1
View File
@@ -1,3 +1,5 @@
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
component Navbar {
outputs {
toggle(payload: { open: boolean })
@@ -60,7 +62,7 @@ size: string = "default"
}
view {
<header class="wire-navbar wire-navbar--width-{maxWidth} wire-next--color-{color} wire-next--size-{size} {sticky ? 'wire-navbar--sticky' : ''} {class}" data-wrn-navbar data-open-on-hover="{openOnHover}">
<header class="wire-navbar wire-navbar--width-{maxWidth} wire-component--color-{color} wire-component--size-{size} {sticky ? 'wire-navbar--sticky' : ''} {class}" data-wrn-navbar data-open-on-hover="{openOnHover}">
<div class="wire-navbar__topbar" aria-label="{topbarLabel}">
<slot name="topbar" />
</div>
@@ -139,6 +141,7 @@ size: string = "default"
</div>
</div>
</header>
<ComponentBaseStyles hidden />
}
style {
packages/ui/components/PinInput.wrn
+4 -1
View File
@@ -1,3 +1,5 @@
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
component PinInput {
outputs {
input(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
@@ -49,7 +51,7 @@ component PinInput {
view {
<fieldset
{...attrs}
class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--pin-input {invalid ? 'wire-next--invalid' : ''} {disabled ? 'wire-next--disabled' : ''} {class}"
class="wire-component wire-component--color-{color} wire-component--size-{size} wire-next--pin-input {invalid ? 'wire-next--invalid' : ''} {disabled ? 'wire-next--disabled' : ''} {class}"
data-wrn-pin-input
data-length="{length}"
data-pattern="{pattern}"
@@ -113,6 +115,7 @@ component PinInput {
data-error="{name}"
>{validationMessage}</small>
</fieldset>
<ComponentBaseStyles hidden />
}
style {
packages/ui/components/PortalDashboard.wrn
+16 -1
View File
@@ -1,3 +1,5 @@
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
component PortalDashboard {
outputs {
action(payload: { item: string | number | boolean | null | object; value: string | number | boolean; index: number })
@@ -32,7 +34,7 @@ component PortalDashboard {
}
view {
<main class="wire-portal-dashboard wire-next--color-{color} wire-next--size-{size} {class}">
<main class="wire-portal-dashboard wire-component--color-{color} wire-component--size-{size} {class}">
<header class="wire-portal-dashboard__hero">
<div>
{#if eyebrowKey}<span class="wire-portal-dashboard__eyebrow" data-t="{eyebrowKey}">{eyebrow}</span>{/if}
@@ -97,9 +99,22 @@ component PortalDashboard {
</section>
</div>
</main>
<ComponentBaseStyles hidden />
}
style {
.wire-portal-dashboard__status--urgent {
background: var(--wire-color-danger);
}
.wire-portal-dashboard__status--warning {
background: var(--wire-color-warning);
}
.wire-portal-dashboard__status--success {
background: var(--wire-color-success);
}
/* Reusable responsive portal dashboard */
.wire-portal-dashboard {
width: min(100%, 96rem);
packages/ui/components/PreferenceSwitcher.wrn
+4 -1
View File
@@ -1,3 +1,5 @@
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
component PreferenceSwitcher {
outputs {
theme(payload: { sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])
@@ -35,7 +37,7 @@ size: string = "default"
}
view {
<div class="wire-preferences wire-next--color-{color} wire-next--size-{size} {compact ? 'wire-preferences--compact' : ''} {class}" data-wrn-preferences aria-label="Display and language preferences">
<div class="wire-preferences wire-component--color-{color} wire-component--size-{size} {compact ? 'wire-preferences--compact' : ''} {class}" data-wrn-preferences aria-label="Display and language preferences">
<details class="wire-preferences__menu" name="wire-preference-menu">
<summary aria-label="{themeLabel}" title="{themeLabel}">
<span class="icon-[lucide--sun-moon]" aria-hidden="true"></span>
@@ -81,6 +83,7 @@ size: string = "default"
</div>
</details>
</div>
<ComponentBaseStyles hidden />
}
style {
packages/ui/components/RangeSlider.wrn
+7 -1
View File
@@ -1,3 +1,7 @@
import FieldStyles from "../styles/FieldStyles.wrn"
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
component RangeSlider {
outputs {
input(payload: ({ value: number; name: string; sourceEvent: Event }) | ({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]))
@@ -49,7 +53,7 @@ component RangeSlider {
client function increaseValue(sourceEvent) { currentValue = Math.min(Number(max), Number(currentValue) + Number(step)); output.input({ value: currentValue, name: name, sourceEvent: sourceEvent }); output.change({ value: currentValue, name: name, sourceEvent: sourceEvent }) }
}
view {
<div {...attrs} class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--field wire-next--range-slider {class}" data-variant="{variant}" data-inline="{inline}" data-invalid="{error ? 'true' : 'false'}">
<div {...attrs} class="wire-component wire-component--color-{color} wire-component--size-{size} wire-next--field wire-next--range-slider {class}" data-variant="{variant}" data-inline="{inline}" data-invalid="{error ? 'true' : 'false'}">
<div class="wire-next__field-heading"><label class="{hiddenLabel ? 'wire-next__sr-only' : ''}" for="{id || name}">{label}</label>{#if cornerHint}<span class="wire-next__field-hint">{cornerHint}</span>{/if}</div>
<div class="wire-next__range-control" data-variant="{variant}" data-icon-position="{iconPosition}" data-show-steps="{showSteps}">
{#if icon}<span class="{icon}" aria-hidden="true"></span>{/if}
@@ -67,6 +71,8 @@ component RangeSlider {
</div>
{#if helperText}<small class="wire-next__field-help">{helperText}</small>{/if}<small class="wire-next__field-error" data-error="{name}">{error}</small>
</div>
<FieldStyles hidden />
<ComponentBaseStyles hidden />
}
style {
packages/ui/components/Rating.wrn
+4 -1
View File
@@ -1,3 +1,5 @@
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
component Rating {
outputs {
input(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
@@ -14,12 +16,13 @@ component Rating {
class: string = ""
}
view {
<section class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--rating wire-next--variant-{variant} {class}">
<section class="wire-component wire-component--color-{color} wire-component--size-{size} wire-next--rating wire-next--variant-{variant} {class}">
{#if title}<strong>{title}</strong>{/if}
{#if description}<p>{description}</p>{/if}
{#if items}<div class="wire-next__items">{#each items as item}<span>{item.label}</span>{/each}</div>{/if}
<slot />
</section>
<ComponentBaseStyles hidden />
}
style {
packages/ui/components/StrongPassword.wrn
+7 -1
View File
@@ -1,3 +1,7 @@
import FieldStyles from "../styles/FieldStyles.wrn"
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
component StrongPassword {
outputs {
input(payload: { value: string; score: number; maximumScore: number; percent: number; level: string })
@@ -117,7 +121,7 @@ component StrongPassword {
view {
<div
class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--strong-password wire-next--strong-password-{presentation} {invalid ? 'wire-next--invalid' : ''} {disabled ? 'wire-next--disabled' : ''} {class}"
class="wire-component wire-component--color-{color} wire-component--size-{size} wire-next--strong-password wire-next--strong-password-{presentation} {invalid ? 'wire-next--invalid' : ''} {disabled ? 'wire-next--disabled' : ''} {class}"
data-wrn-strong-password
data-strength="{password ? strengthLevel() : 'empty'}"
data-score="{password ? score() : 0}"
@@ -214,6 +218,8 @@ component StrongPassword {
<small id="{name}-validation" class="wire-next__validation" data-error="{name}">{validationMessage}</small>
</div>
<FieldStyles hidden />
<ComponentBaseStyles hidden />
}
style {
packages/ui/components/StyledIcon.wrn
+4 -1
View File
@@ -1,3 +1,5 @@
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
component StyledIcon {
props {
size: string = "default"
@@ -9,12 +11,13 @@ component StyledIcon {
class: string = ""
}
view {
<section class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--styled-icon wire-next--variant-{variant} {class}">
<section class="wire-component wire-component--color-{color} wire-component--size-{size} wire-next--styled-icon wire-next--variant-{variant} {class}">
{#if title}<strong>{title}</strong>{/if}
{#if description}<p>{description}</p>{/if}
{#if items}<div class="wire-next__items">{#each items as item}<span>{item.label}</span>{/each}</div>{/if}
<slot />
</section>
<ComponentBaseStyles hidden />
}
style {
packages/ui/components/TimePicker.wrn
+7 -1
View File
@@ -1,3 +1,7 @@
import FieldStyles from "../styles/FieldStyles.wrn"
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
component TimePicker {
outputs {
input(payload: { sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])
@@ -51,7 +55,7 @@ size: string = "default"
client function handleInvalid(sourceEvent) { output.invalid({ name: name, message: sourceEvent.currentTarget.validationMessage, sourceEvent: sourceEvent }) }
}
view {
<div {...attrs} class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--field wire-next--time-picker {class}" data-variant="{variant}" data-inline="{inline}" data-floating="{variant === 'floating'}" data-invalid="{error ? 'true' : 'false'}" data-expanded="{expanded}">
<div {...attrs} class="wire-component wire-component--color-{color} wire-component--size-{size} wire-next--field wire-next--time-picker {class}" data-variant="{variant}" data-inline="{inline}" data-floating="{variant === 'floating'}" data-invalid="{error ? 'true' : 'false'}" data-expanded="{expanded}">
<div class="wire-next__field-heading"><label class="{hiddenLabel ? 'wire-next__sr-only' : ''}" for="{id || name}">{label}</label>{#if cornerHint}<span class="wire-next__field-hint">{cornerHint}</span>{/if}</div>
<div class="wire-next__field-control" data-icon-position="{iconPosition}">
{#if icon}<span class="{icon} wire-next__field-icon" aria-hidden="true"></span>{/if}
@@ -62,6 +66,8 @@ size: string = "default"
{#if helperText}<small class="wire-next__field-help">{helperText}</small>{/if}
<small class="wire-next__field-error" data-error="{name}">{error}</small>
</div>
<FieldStyles hidden />
<ComponentBaseStyles hidden />
}
style {
packages/ui/components/ToggleCount.wrn
+4 -1
View File
@@ -1,3 +1,5 @@
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
component ToggleCount {
outputs {
change(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
@@ -222,7 +224,7 @@ component ToggleCount {
data-variant="{variant}"
data-value="{selectedValue}"
data-disabled="{disabled ? 'true' : 'false'}"
class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--toggle-count wire-next--toggle-count-{variant} {fullWidth ? 'wire-next--toggle-count-full' : ''} {disabled ? 'wire-next--disabled' : ''} {class}"
class="wire-component wire-component--color-{color} wire-component--size-{size} wire-next--toggle-count wire-next--toggle-count-{variant} {fullWidth ? 'wire-next--toggle-count-full' : ''} {disabled ? 'wire-next--disabled' : ''} {class}"
>
<input type="hidden" name="{name}" value="{selectedValue}" />
@@ -279,6 +281,7 @@ component ToggleCount {
</div>
{/if}
</section>
<ComponentBaseStyles hidden />
}
style {
packages/ui/components/TogglePassword.wrn
+7 -1
View File
@@ -1,3 +1,7 @@
import FieldStyles from "../styles/FieldStyles.wrn"
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
component TogglePassword {
outputs {
input(payload: { name?: string; value: string | number | boolean | null | object; visible: boolean })
@@ -53,7 +57,7 @@ component TogglePassword {
view {
<fieldset
class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--toggle-password {invalid ? 'wire-next--invalid' : ''} {disabled ? 'wire-next--disabled' : ''} {class}"
class="wire-component wire-component--color-{color} wire-component--size-{size} wire-next--toggle-password {invalid ? 'wire-next--invalid' : ''} {disabled ? 'wire-next--disabled' : ''} {class}"
data-wrn-toggle-password
data-visible="{revealed ? 'true' : 'false'}"
>
@@ -152,6 +156,8 @@ component TogglePassword {
data-error="{name}"
>{validationMessage}</small>
</fieldset>
<FieldStyles hidden />
<ComponentBaseStyles hidden />
}
style {
packages/ui/components/WysiwygEditor.wrn
+4 -1
View File
@@ -1,3 +1,5 @@
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
component WysiwygEditor {
outputs {
input(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
@@ -16,12 +18,13 @@ component WysiwygEditor {
class: string = ""
}
view {
<section class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--wysiwyg-editor wire-next--variant-{variant} {class}">
<section class="wire-component wire-component--color-{color} wire-component--size-{size} wire-next--wysiwyg-editor wire-next--variant-{variant} {class}">
{#if title}<strong>{title}</strong>{/if}
{#if description}<p>{description}</p>{/if}
{#if items}<div class="wire-next__items">{#each items as item}<span>{item.label}</span>{/each}</div>{/if}
<slot />
</section>
<ComponentBaseStyles hidden />
}
style {
packages/ui/components/alert.wrn
+4 -1
View File
@@ -1,3 +1,5 @@
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
component Alert {
outputs {
dismiss(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
@@ -76,7 +78,7 @@ component Alert {
aria-hidden="{visible ? 'false' : 'true'}"
role="{role}"
aria-live="{live}"
class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--alert wire-next--alert-{variant} {compact ? 'wire-next--alert-compact' : ''} {class}"
class="wire-component wire-component--color-{color} wire-component--size-{size} wire-next--alert wire-next--alert-{variant} {compact ? 'wire-next--alert-compact' : ''} {class}"
>
{#if showIcon}
<span class="wire-next__alert-icon" aria-hidden="true">
@@ -142,6 +144,7 @@ component Alert {
</button>
{/if}
</section>
<ComponentBaseStyles hidden />
}
style {
packages/ui/components/avatar.wrn
+4 -1
View File
@@ -1,3 +1,5 @@
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
component Avatar {
outputs {
load(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
@@ -32,7 +34,7 @@ src: string = ""
view {
<span
{...attrs}
class="wire-next wire-next--avatar {description ? 'wire-next--avatar-media' : ''} {class}"
class="wire-component wire-next--avatar {description ? 'wire-next--avatar-media' : ''} {class}"
data-wrn-avatar
>
<span
@@ -86,6 +88,7 @@ src: string = ""
</span>
{/if}
</span>
<ComponentBaseStyles hidden />
}
style {
packages/ui/components/badge.wrn
+12 -1
View File
@@ -1,3 +1,5 @@
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
component Badge {
outputs {
dismiss(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
@@ -48,7 +50,7 @@ component Badge {
view {
<span
{...attrs}
class="wire-next wire-next--badge-root {anchorLabel || anchorIcon ? 'wire-next--badge-anchored' : ''} {class}"
class="wire-component wire-next--badge-root {anchorLabel || anchorIcon ? 'wire-next--badge-anchored' : ''} {class}"
data-wrn-badge
data-placement="{placement}"
data-show="visible"
@@ -99,9 +101,18 @@ component Badge {
{/if}
</span>
</span>
<ComponentBaseStyles hidden />
}
style {
@keyframes wire-badge-ping {
75%,
100% {
opacity: 0;
transform: scale(1.45);
}
}
/* --- Badge --------------------------------------------------------------- */
.wire-next--badge-root {
position: relative;
packages/ui/components/button.wrn
+21
View File
@@ -166,6 +166,27 @@ label: string = "Button"
}
style {
.wire-spinner {
display: inline-block;
width: 1.15rem;
height: 1.15rem;
border: 2px solid var(--wire-color-border);
border-top-color: var(--wire-color-primary);
border-radius: 999px;
animation: wire-spin 0.7s linear infinite;
}
.wire-spinner--inline {
width: 1rem;
height: 1rem;
}
@keyframes wire-spin {
to {
transform: rotate(360deg);
}
}
/* --- Button --------------------------------------------------------------- */
.wire-btn {
position: relative;
packages/ui/components/checkbox.wrn
+7 -1
View File
@@ -1,3 +1,7 @@
import FieldStyles from "../styles/FieldStyles.wrn"
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
component Checkbox {
outputs {
input(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
@@ -43,7 +47,7 @@ size: string = "default"
view {
<div
{...attrs}
class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--choice-field wire-next--checkbox-field {class}"
class="wire-component wire-component--color-{color} wire-component--size-{size} wire-next--choice-field wire-next--checkbox-field {class}"
data-inline="{inline}"
data-invalid="{error ? 'true' : 'false'}"
data-orientation="{orientation}"
@@ -172,6 +176,8 @@ size: string = "default"
{error}
</small>
</div>
<FieldStyles hidden />
<ComponentBaseStyles hidden />
}
style {
packages/ui/components/input.wrn
+7 -1
View File
@@ -1,3 +1,7 @@
import FieldStyles from "../styles/FieldStyles.wrn"
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
component Input {
outputs {
input(payload: { sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])
@@ -52,7 +56,7 @@ size: string = "default"
client function handleKeyup(sourceEvent) { sourceEvent.stopPropagation(); output.keyup({ key: sourceEvent.key, value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }) }
}
view {
<div {...attrs} class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--field wire-next--input {class}" data-variant="{variant}" data-inline="{inline}" data-floating="{variant === 'floating'}" data-invalid="{error ? 'true' : 'false'}">
<div {...attrs} class="wire-component wire-component--color-{color} wire-component--size-{size} wire-next--field wire-next--input {class}" data-variant="{variant}" data-inline="{inline}" data-floating="{variant === 'floating'}" data-invalid="{error ? 'true' : 'false'}">
<div class="wire-next__field-heading">
<label class="{hiddenLabel ? 'wire-next__sr-only' : ''}" for="{id || name}">{label}</label>
{#if cornerHint}<span class="wire-next__field-hint">{cornerHint}</span>{/if}
@@ -91,6 +95,8 @@ size: string = "default"
{#if helperText}<small id="{(id || name) + '-help'}" class="wire-next__field-help">{helperText}</small>{/if}
<small id="{(id || name) + '-error'}" class="wire-next__field-error" data-error="{name}">{error}</small>
</div>
<FieldStyles hidden />
<ComponentBaseStyles hidden />
}
style {
packages/ui/components/radio.wrn
+7 -1
View File
@@ -1,3 +1,7 @@
import FieldStyles from "../styles/FieldStyles.wrn"
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
component Radio {
outputs {
input(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
@@ -39,7 +43,7 @@ size: string = "default"
client function preventReadonly(sourceEvent) { if (readonly) sourceEvent.preventDefault() }
}
view {
<div {...attrs} class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--choice-field wire-next--radio-field {class}" data-inline="{inline}" data-invalid="{error ? 'true' : 'false'}" data-orientation="{orientation}" data-card="{card}" data-list="{list}" data-right-aligned="{rightAligned}">
<div {...attrs} class="wire-component wire-component--color-{color} wire-component--size-{size} wire-next--choice-field wire-next--radio-field {class}" data-inline="{inline}" data-invalid="{error ? 'true' : 'false'}" data-orientation="{orientation}" data-card="{card}" data-list="{list}" data-right-aligned="{rightAligned}">
<div class="wire-next__field-heading">{#if options.length || cornerHint}<span class="{hiddenLabel ? 'wire-next__sr-only' : ''}">{label}</span>{#if cornerHint}<span class="wire-next__field-hint">{cornerHint}</span>{/if}{/if}</div>
{#if options.length}
<div class="wire-next__radio-group" role="radiogroup" aria-label="{hiddenLabel ? label : ''}" aria-invalid="{error ? 'true' : 'false'}">
@@ -55,6 +59,8 @@ size: string = "default"
{/if}
{#if helperText}<small class="wire-next__field-help">{helperText}</small>{/if}<small class="wire-next__field-error" data-error="{name}">{error}</small>
</div>
<FieldStyles hidden />
<ComponentBaseStyles hidden />
}
style {
packages/ui/components/select.wrn
+7 -1
View File
@@ -1,3 +1,7 @@
import FieldStyles from "../styles/FieldStyles.wrn"
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
component Select {
outputs {
input(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
@@ -47,7 +51,7 @@ size: string = "default"
client function handleInvalid(sourceEvent) { output.invalid({ name: name, message: sourceEvent.currentTarget.validationMessage, sourceEvent: sourceEvent }) }
}
view {
<div {...attrs} class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--field wire-next--select {class}" data-variant="{variant}" data-inline="{inline}" data-floating="{variant === 'floating'}" data-invalid="{error ? 'true' : 'false'}" data-readonly="{readonly}">
<div {...attrs} class="wire-component wire-component--color-{color} wire-component--size-{size} wire-next--field wire-next--select {class}" data-variant="{variant}" data-inline="{inline}" data-floating="{variant === 'floating'}" data-invalid="{error ? 'true' : 'false'}" data-readonly="{readonly}">
<div class="wire-next__field-heading"><label class="{hiddenLabel ? 'wire-next__sr-only' : ''}" for="{id || name}">{label}</label>{#if cornerHint}<span class="wire-next__field-hint">{cornerHint}</span>{/if}</div>
<div class="wire-next__field-control" data-icon-position="{iconPosition}">
{#if icon}<span class="{icon} wire-next__field-icon" aria-hidden="true"></span>{/if}
@@ -60,6 +64,8 @@ size: string = "default"
{#if helperText}<small class="wire-next__field-help">{helperText}</small>{/if}
<small class="wire-next__field-error" data-error="{name}">{error}</small>
</div>
<FieldStyles hidden />
<ComponentBaseStyles hidden />
}
style {
packages/ui/components/switch.wrn
+7 -1
View File
@@ -1,3 +1,7 @@
import FieldStyles from "../styles/FieldStyles.wrn"
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
component Switch {
outputs {
input(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
@@ -33,11 +37,13 @@ component Switch {
client function preventReadonly(sourceEvent) { if (readonly) sourceEvent.preventDefault() }
}
view {
<div {...attrs} class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--choice-field {class}" data-inline="{inline}" data-invalid="{error ? 'true' : 'false'}">
<div {...attrs} class="wire-component wire-component--color-{color} wire-component--size-{size} wire-next--choice-field {class}" data-inline="{inline}" data-invalid="{error ? 'true' : 'false'}">
<div class="wire-next__field-heading">{#if cornerHint}<span class="{hiddenLabel ? 'wire-next__sr-only' : ''}">{label}</span><span class="wire-next__field-hint">{cornerHint}</span>{/if}</div>
<label class="wire-next__choice wire-next--switch" for="{id || name}" data-variant="{variant}" data-icon-position="{iconPosition}"><input id="{id || name}" type="checkbox" role="switch" name="{name}" value="{value}" checked="{checked}" disabled="{disabled}" required="{required}" readonly="{readonly}" aria-checked="{checked ? 'true' : 'false'}" aria-invalid="{error ? 'true' : 'false'}" @click="preventReadonly(event)" @input="emitField('input', event)" @change="emitField('change', event)" @focus="emitField('focus', event)" @blur="emitField('blur', event)" />{#if icon}<span class="{icon}" aria-hidden="true"></span>{/if}<span class="{hiddenLabel || cornerHint ? 'wire-next__sr-only' : ''}">{label}</span></label>
{#if helperText}<small class="wire-next__field-help">{helperText}</small>{/if}<small class="wire-next__field-error" data-error="{name}">{error}</small>
</div>
<FieldStyles hidden />
<ComponentBaseStyles hidden />
}
style {
packages/ui/components/textarea.wrn
+7 -1
View File
@@ -1,3 +1,7 @@
import FieldStyles from "../styles/FieldStyles.wrn"
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
component Textarea {
outputs {
input(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
@@ -42,7 +46,7 @@ size: string = "default"
}
}
view {
<div {...attrs} class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--field wire-next--textarea {class}" data-variant="{variant}" data-inline="{inline}" data-floating="{variant === 'floating'}" data-invalid="{error ? 'true' : 'false'}">
<div {...attrs} class="wire-component wire-component--color-{color} wire-component--size-{size} wire-next--field wire-next--textarea {class}" data-variant="{variant}" data-inline="{inline}" data-floating="{variant === 'floating'}" data-invalid="{error ? 'true' : 'false'}">
<div class="wire-next__field-heading"><label class="{hiddenLabel ? 'wire-next__sr-only' : ''}" for="{id || name}">{label}</label>{#if cornerHint}<span class="wire-next__field-hint">{cornerHint}</span>{/if}</div>
<div class="wire-next__field-control" data-icon-position="{iconPosition}">
{#if icon}<span class="{icon} wire-next__field-icon" aria-hidden="true"></span>{/if}
@@ -52,6 +56,8 @@ size: string = "default"
{#if helperText}<small id="{(id || name) + '-help'}" class="wire-next__field-help">{helperText}</small>{/if}
<small id="{(id || name) + '-error'}" class="wire-next__field-error" data-error="{name}">{error}</small>
</div>
<FieldStyles hidden />
<ComponentBaseStyles hidden />
}
style {
packages/ui/styles/ComponentBaseStyles.wrn
+73
View File
@@ -0,0 +1,73 @@
component ComponentBaseStyles {
view {
}
style {
.wire-component {
--wire-component-color: var(--wire-color-primary);
--wire-component-scale: 1;
margin: 0;
color: var(--wire-color-text);
font-family: var(--wrn-font-sans, inherit);
}
.wire-component--color-primary {
--wire-component-color: var(--wire-color-primary);
}
.wire-component--color-secondary {
--wire-component-color: var(--wire-color-secondary);
}
.wire-component--color-success {
--wire-component-color: var(--wire-color-success);
}
.wire-component--color-warning {
--wire-component-color: var(--wire-color-warning);
}
.wire-component--color-danger {
--wire-component-color: var(--wire-color-danger);
}
.wire-component--color-info {
--wire-component-color: var(--wire-color-info);
}
.wire-component--size-xs {
--wire-component-scale: 0.78;
}
.wire-component--size-sm {
--wire-component-scale: 0.88;
}
.wire-component--size-default,
.wire-component--size-md {
--wire-component-scale: 1;
}
.wire-component--size-lg {
--wire-component-scale: 1.14;
}
.wire-component--size-xl {
--wire-component-scale: 1.28;
}
.wire-component:not(.wire-btn) {
font-size: calc(1em * var(--wire-component-scale));
}
.wire-component :is(a, button, input, select, textarea):focus-visible {
outline-color: var(--wire-component-color);
}
.wire-component p {
margin: 0;
color: var(--wire-color-muted);
line-height: 1.6;
}
}
}
packages/ui/styles/FieldStyles.wrn
+494
View File
@@ -0,0 +1,494 @@
component FieldStyles {
view {
}
style {
/* Validation states set by the browser validation runtime. */
.wire-invalid {
border-color: var(--wire-color-danger) !important;
}
.wire-field-error {
display: block;
min-height: 1em;
margin-top: 0.25rem;
color: var(--wire-color-danger);
font-size: 0.8rem;
}
.wire-next--choice {
display: inline-flex;
align-items: center;
gap: 0.55rem;
cursor: pointer;
}
.wire-next--choice input {
width: 1.1rem;
height: 1.1rem;
accent-color: var(--wire-color-primary);
}
.wire-next--field {
display: grid;
width: min(100%, 28rem);
gap: 0.4rem;
font-size: 0.78rem;
font-weight: 700;
}
.wire-next--field :where(input, textarea, select) {
width: 100%;
min-height: 2.65rem;
padding: 0.6rem 0.7rem;
border: 1px solid var(--wire-color-border);
border-radius: 0.6rem;
outline: 0;
color: var(--wire-color-text);
background: var(--wire-color-bg);
font: inherit;
font-weight: 500;
}
.wire-auth-form form > .wire-next--field,
.wire-auth-form form > .wire-field {
width: 100%;
max-width: none;
}
.wire-auth-form__submit > .wire-btn {
width: 100%;
min-height: 3rem;
border-radius: 0.75rem;
box-shadow: 0 0.8rem 1.8rem color-mix(in srgb, var(--wire-btn-color) 20%, transparent);
}
.wire-next--field :where(input, textarea, select):focus-visible {
border-color: var(--wire-color-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-primary) 16%, transparent);
}
.wire-next--field textarea {
resize: vertical;
}
.wire-next--field,
.wire-next--choice-field {
--wire-field-color: var(--wire-component-color, var(--wire-color-primary));
width: min(100%, 34rem);
min-width: 0;
color: var(--wire-color-text);
font-size: 0.8125rem;
font-weight: 500;
}
.wire-next--field.wire-next--size-sm,
.wire-next--choice-field.wire-next--size-sm {
font-size: 0.8125rem;
}
.wire-next--field.wire-next--size-lg,
.wire-next--choice-field.wire-next--size-lg {
font-size: 1rem;
}
.wire-next__field-heading {
display: flex;
min-width: 0;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
}
.wire-next__field-heading label {
color: var(--wire-color-text);
font-weight: 600;
}
.wire-next__field-hint,
.wire-next__field-help {
color: var(--wire-color-muted);
font-size: 0.82em;
font-weight: 500;
}
.wire-next__field-control {
position: relative;
min-width: 0;
}
.wire-next__field-control > :is(input, textarea, select) {
padding-inline: 0.85rem;
border-color: var(--wire-color-border);
border-radius: var(--wire-radius-sm);
background: var(--wire-color-surface);
font-size: 0.8125rem;
}
.wire-next__field-control[data-icon-position="start"] > :is(input, textarea, select) {
padding-inline-start: 2.5rem;
}
.wire-next__field-control[data-icon-position="end"] > :is(input, textarea, select) {
padding-inline-end: 2.5rem;
}
.wire-next__field-icon {
position: absolute;
z-index: 1;
top: 50%;
left: 0.85rem;
color: var(--wire-color-muted);
pointer-events: none;
transform: translateY(-50%);
}
.wire-next__field-control[data-icon-position="end"] > .wire-next__field-icon {
right: 0.85rem;
left: auto;
}
.wire-next--field[data-variant="outlined"]
.wire-next__field-control
> :is(input, textarea, select) {
border-width: 2px;
}
.wire-next--field[data-variant="underline"]
.wire-next__field-control
> :is(input, textarea, select) {
padding-inline: 0;
border-width: 0 0 1px;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.wire-next--field[data-variant="pill"] .wire-next__field-control > :is(input, select) {
border-radius: 999px;
padding-inline: 1.15rem;
}
.wire-next--field[data-variant="ghost"] .wire-next__field-control > :is(input, textarea, select) {
border-color: transparent;
background: color-mix(in srgb, var(--wire-field-color) 8%, var(--wire-color-surface));
}
.wire-next__field-floating-label {
position: absolute;
top: 50%;
left: 0.85rem;
color: var(--wire-color-muted);
pointer-events: none;
transform: translateY(-50%);
transition: 150ms ease;
}
.wire-next--textarea .wire-next__field-floating-label {
top: 1.35rem;
}
.wire-next--field[data-floating="true"] .wire-next__field-control > :is(input, textarea, select) {
padding-top: 1.2rem;
padding-bottom: 0.3rem;
}
.wire-next--field[data-floating="true"] .wire-next__field-heading > label {
position: absolute !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
margin: -1px !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
}
.wire-next--field[data-floating="true"]
.wire-next__field-heading:not(:has(.wire-next__field-hint)) {
display: none;
}
.wire-next--field[data-floating="true"]
.wire-next__field-control
> :is(input, textarea):is(:focus, :not(:placeholder-shown))
+ .wire-next__field-floating-label {
top: 0.42rem;
font-size: 0.7em;
transform: none;
}
.wire-next__field-error {
min-height: 1em;
color: var(--wire-color-danger);
font-size: 0.82em;
font-weight: 600;
}
.wire-next__field-error:empty {
display: none;
}
.wire-next--field[data-invalid="true"] :is(input, textarea, select),
.wire-next--choice-field[data-invalid="true"] input {
border-color: var(--wire-color-danger);
}
.wire-next--field :is(input, textarea, select):disabled,
.wire-next--choice-field input:disabled {
cursor: not-allowed;
opacity: 0.58;
}
.wire-next--field :is(input, textarea, select):read-only {
background: var(--wire-color-surface-2);
}
.wire-next--field[data-inline="true"],
.wire-next--choice-field[data-inline="true"] {
display: grid;
width: 100%;
max-width: none;
grid-template-columns: minmax(7rem, max-content) minmax(12rem, 20rem) minmax(10rem, 1fr);
justify-content: center;
align-items: center;
gap: 0.75rem;
}
.wire-next--field[data-inline="true"] .wire-next__field-heading,
.wire-next--choice-field[data-inline="true"] .wire-next__field-heading {
min-height: 2.65rem;
align-items: center;
}
.wire-next--field[data-inline="true"] .wire-next__field-heading {
justify-content: flex-end;
}
.wire-next--field[data-inline="true"] .wire-next__field-help,
.wire-next--choice-field[data-inline="true"] .wire-next__field-help {
display: flex;
min-height: 2.65rem;
align-items: center;
}
.wire-next--choice-field[data-inline="true"] {
grid-template-columns: minmax(12rem, 20rem) minmax(10rem, 1fr);
}
.wire-next--choice-field[data-inline="true"] .wire-next__field-heading:empty {
display: none;
}
.wire-next--field[data-inline="true"] .wire-next__field-error,
.wire-next--choice-field[data-inline="true"] .wire-next__field-error {
grid-column: 2 / -1;
}
.wire-next__sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
padding: 0 !important;
border: 0 !important;
margin: -1px !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
}
.wire-next__choice-field {
display: grid;
width: 100%;
max-width: none;
gap: 0.4rem;
}
.wire-next__choice {
display: flex;
min-width: 0;
align-items: center;
gap: 0.65rem;
color: var(--wire-color-text);
width: 100%;
font-size: 0.75rem;
font-weight: 500;
}
.wire-next__checkbox-content > .wire-next__choice {
width: 100%;
min-width: 0;
align-items: flex-start;
}
.wire-next__choice input {
flex: 0 0 auto;
margin: 0;
accent-color: var(--wire-field-color);
}
.wire-next__choice-copy {
display: grid;
min-width: 0;
gap: 0.15rem;
line-height: 1.35;
}
.wire-next__choice-copy small {
color: var(--wire-color-muted);
font-weight: 500;
}
.wire-next__radio-group,
.wire-next__checkbox-group {
display: grid;
min-width: 0;
gap: 0.65rem;
}
.wire-next--radio-field[data-orientation="horizontal"] .wire-next__radio-group,
.wire-next--checkbox-field[data-orientation="horizontal"] .wire-next__checkbox-group {
grid-template-columns: repeat(auto-fit, minmax(8rem, max-content));
align-items: stretch;
}
.wire-next--radio-field[data-card="true"] .wire-next__radio-group,
.wire-next--checkbox-field[data-card="true"] .wire-next__checkbox-group {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.wire-next--radio-field[data-card="true"] .wire-next--radio,
.wire-next--checkbox-field[data-card="true"] .wire-next--checkbox {
min-height: 4.5rem;
padding: 0.85rem;
border: 1px solid var(--wire-color-border);
border-radius: var(--wire-radius-sm);
background: var(--wire-color-surface);
}
.wire-next--radio-field[data-card="true"] .wire-next--radio:has(input:checked),
.wire-next--checkbox-field[data-card="true"] .wire-next--checkbox:has(input:checked) {
border-color: var(--wire-field-color);
box-shadow: 0 0 0 1px var(--wire-field-color);
}
.wire-next--radio-field[data-list="true"] .wire-next--radio,
.wire-next--checkbox-field[data-list="true"] .wire-next--checkbox {
padding-block: 0.75rem;
border-bottom: 1px solid var(--wire-color-border);
}
.wire-next--radio-field[data-right-aligned="true"] .wire-next--radio,
.wire-next--checkbox-field[data-right-aligned="true"] .wire-next--checkbox {
justify-content: space-between;
}
.wire-next--radio-field[data-right-aligned="true"] .wire-next--radio input,
.wire-next--checkbox-field[data-right-aligned="true"] .wire-next--checkbox input {
order: 2;
}
.wire-next--radio-field[data-right-aligned="true"] .wire-next__choice-copy,
.wire-next--checkbox-field[data-right-aligned="true"] .wire-next__choice-copy {
order: 1;
}
.wire-next__choice[data-variant="outlined"],
.wire-next__choice[data-variant="floating"] {
padding: 0.65rem 0.8rem;
border: 1px solid var(--wire-color-border);
border-radius: var(--wire-radius-sm);
}
.wire-next__choice[data-variant="pill"] {
padding: 0.65rem 1rem;
border-radius: 999px;
background: color-mix(in srgb, var(--wire-field-color) 9%, var(--wire-color-surface));
}
.wire-next__choice[data-variant="ghost"] {
padding: 0.65rem 0.8rem;
border-radius: var(--wire-radius-sm);
background: color-mix(in srgb, var(--wire-field-color) 7%, transparent);
}
.wire-next__choice[data-variant="underline"] {
padding-block: 0.5rem;
border-bottom: 1px solid var(--wire-color-border);
}
.wire-next--select .wire-next__field-control {
display: flex;
align-items: center;
}
.wire-next__color-control,
.wire-next__range-control,
.wire-next__input-group-control,
.wire-next__file-control {
display: flex;
min-width: 0;
align-items: center;
gap: 0.65rem;
}
.wire-next__picker-control,
.wire-next--time-picker .wire-next__field-control {
position: relative;
display: flex;
min-width: 0;
align-items: center;
}
.wire-next__picker-control > button:first-of-type,
.wire-next__time-trigger {
display: flex;
width: 100%;
min-height: 2.65rem;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.7rem 0.85rem;
border: 1px solid var(--wire-color-border);
border-radius: var(--wire-radius-sm);
background: var(--wire-color-surface);
color: var(--wire-color-text);
font: inherit;
text-align: left;
}
.wire-next__calendar,
.wire-next__time-panel {
z-index: 20;
display: grid;
width: min(100%, 22rem);
gap: 0.75rem;
padding: 0.85rem;
border: 1px solid var(--wire-color-border);
border-radius: var(--wire-radius-md);
background: var(--wire-color-surface);
box-shadow: var(--wire-shadow-3);
}
.wire-next--date-picker[data-expanded="false"] .wire-next__calendar,
.wire-next--time-picker[data-expanded="false"] .wire-next__time-panel {
display: none;
}
.wire-next__calendar button,
.wire-next__time-panel button {
min-height: 2.25rem;
border: 0;
border-radius: var(--wire-radius-sm);
background: transparent;
color: inherit;
}
.wire-next__calendar-weekdays,
.wire-next__calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0.2rem;
text-align: center;
}
.wire-next__calendar-weekdays {
color: var(--wire-color-muted);
font-size: 0.75rem;
}
.wire-next__calendar-grid button:hover,
.wire-next__time-panel button:hover {
background: var(--wire-color-surface-2);
}
.wire-next__calendar-grid button[aria-pressed="true"],
.wire-next__time-panel button[aria-pressed="true"] {
background: var(--wire-field-color);
color: var(--wire-color-primary-contrast, #fff);
}
.wire-next__time-period {
display: flex;
gap: 0.35rem;
}
.wire-next--file-upload-progress .wire-next__row,
.wire-next__upload-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.wire-next--file-upload-progress .wire-next__row > span {
display: grid;
min-width: 0;
}
.wire-next--field[data-variant="underline"]
:is(.wire-next__input-group-control, .wire-next__file-control, .wire-next__color-control) {
border-width: 0 0 1px;
border-radius: 0;
background: transparent;
}
.wire-next--field[data-variant="outlined"]
:is(.wire-next__input-group-control, .wire-next__file-control) {
border-width: 2px;
}
.wire-next--field[data-variant="pill"]
:is(.wire-next__input-group-control, .wire-next__file-control) {
border-radius: 999px;
}
.wire-next--field[data-variant="ghost"]
:is(.wire-next__input-group-control, .wire-next__file-control, .wire-next__color-control) {
border-color: transparent;
background: color-mix(in srgb, var(--wire-field-color) 8%, var(--wire-color-surface));
}
@media (max-width: 640px) {
.wire-next--field[data-inline="true"],
.wire-next--choice-field[data-inline="true"] {
grid-template-columns: 1fr;
}
.wire-next--field[data-inline="true"] .wire-next__field-error,
.wire-next--choice-field[data-inline="true"] .wire-next__field-error {
grid-column: auto;
}
}
.wire-next--toggle-password:has(input.wire-invalid) .wire-next__password-control > input,
.wire-next--toggle-password.wire-next--invalid .wire-next__password-control > input {
border-color: var(--wire-color-danger);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-danger) 14%, transparent);
}
.wire-next--strong-password.wire-next--invalid input,
.wire-next--strong-password input.wire-invalid {
border-color: var(--wire-color-danger);
}
}
}
packages/ui/styles/SelectStyles.wrn
+298
View File
@@ -0,0 +1,298 @@
component SelectStyles {
view {
}
style {
.wire-next--advanced-select {
position: relative;
display: grid;
width: 100%;
gap: 0.55rem;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
.wire-next--advanced-select > label:first-child,
.wire-next--advanced-select .wire-next__row > label {
color: var(--wire-color-text);
font-size: 0.82em;
font-weight: 700;
}
.wire-next--advanced-select .wire-next__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.wire-next--advanced-select small {
color: var(--wire-color-muted);
font-size: 0.72em;
}
.wire-next__select-search input,
.wire-next--advanced-select select {
width: 100%;
min-height: 2.6em;
padding: 0.62em 0.75em;
border: 1px solid var(--wire-color-border);
border-radius: var(--wire-radius-sm);
color: var(--wire-color-text);
background: var(--wire-color-surface);
font: inherit;
}
.wire-next__search-icon {
position: absolute;
top: 50%;
left: 0.75em;
z-index: 1;
color: var(--wire-component-color);
transform: translateY(-50%);
}
.wire-next--advanced-select select:focus-visible,
.wire-next__select-search input:focus-visible {
border-color: var(--wire-component-color);
outline: 2px solid color-mix(in srgb, var(--wire-component-color) 24%, transparent);
outline-offset: 1px;
}
.wire-next--advanced-select select[multiple] {
min-height: 8rem;
}
.wire-next__color-dot {
width: 0.65rem;
height: 0.65rem;
border-radius: 50%;
background: var(--option-color);
}
.wire-next__clear-select,
.wire-next__create-option,
.wire-next__load-more {
width: fit-content;
padding: 0;
border: 0;
color: var(--wire-component-color);
background: transparent;
font: inherit;
font-size: 0.75em;
font-weight: 700;
cursor: pointer;
}
.wire-next--invalid :is(input, select) {
border-color: var(--wire-color-danger);
}
.wire-next__validation {
color: var(--wire-color-danger) !important;
}
.wire-next__validation:empty {
display: none;
}
.wire-next--advanced-select:has(input.wire-invalid) .wire-next__select-trigger {
border-color: var(--wire-color-danger);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-danger) 16%, transparent);
}
.wire-next--advanced-select-fixed select {
box-shadow: var(--wire-shadow-1);
}
.wire-next__select-control {
position: relative;
}
.wire-next__combobox-control > .wire-next__search-icon {
width: 1rem;
height: 1rem;
pointer-events: none;
}
.wire-next__combobox-toggle .wire-next__select-chevron {
position: static;
transform: none;
}
.wire-next--combobox .wire-next__clear-select {
right: 2.4em;
}
.wire-next__select-trigger {
display: flex;
width: 100%;
min-height: 2.75em;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.55em 2.75em 0.55em 0.8em;
border: 1px solid var(--wire-color-border);
border-radius: var(--wire-radius-sm);
color: var(--wire-color-text);
background: var(--wire-color-bg);
font: inherit;
text-align: left;
cursor: pointer;
transition:
border-color var(--wire-motion-base) var(--wire-ease-standard),
box-shadow var(--wire-motion-base) var(--wire-ease-standard);
}
.wire-next--open .wire-next__select-trigger,
.wire-next__select-trigger:focus-visible {
border-color: var(--wire-component-color);
outline: 0;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-component-color) 18%, transparent);
}
.wire-next__select-chevron {
position: absolute;
top: 50%;
right: 0.9em;
color: var(--wire-color-muted);
pointer-events: none;
transform: translateY(-54%);
}
.wire-next__clear-select {
position: absolute;
top: 50%;
right: 2.15em;
z-index: 2;
display: grid;
width: 1.4em;
height: 1.4em;
padding: 0;
place-items: center;
border-radius: 50%;
transform: translateY(-50%);
}
.wire-next__clear-select:hover {
background: var(--wire-color-surface-2);
}
.wire-next__select-dropdown {
position: absolute;
top: calc(100% + 0.4rem);
left: 0;
z-index: 80;
display: grid;
width: 100%;
min-width: min(20rem, 92vw);
gap: 0.45rem;
padding: 0.5rem;
overflow: hidden;
border: 1px solid var(--wire-color-border);
border-radius: var(--wire-radius-sm);
background: var(--wire-color-surface);
box-shadow: 0 1.25rem 3rem rgb(0 0 0 / 18%);
}
.wire-next[data-placement="top"] .wire-next__select-dropdown {
top: auto;
bottom: calc(100% + 0.4rem);
}
.wire-next__select-dropdown--fixed {
position: fixed;
top: auto;
}
.wire-next__select-list {
display: grid;
max-height: 18rem;
gap: 0.15rem;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
}
.wire-next__option-group {
display: grid;
gap: 0.15rem;
}
.wire-next__group-label {
padding: 0.55rem 0.7rem 0.3rem;
color: var(--wire-component-color);
font-size: 0.68em;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.wire-next__select-option {
position: relative;
display: grid;
width: 100%;
grid-template-columns: minmax(0, 1fr);
align-items: center;
gap: 0.65rem;
padding: 0.58rem 2.5rem 0.58rem 0.7rem;
border: 0;
border-radius: calc(var(--wire-radius-sm) * 0.72);
color: var(--wire-color-text);
background: transparent;
font: inherit;
text-align: left;
cursor: pointer;
}
.wire-next__select-option:has(> img),
.wire-next__select-option:has(> i:not(.wire-next__check)) {
grid-template-columns: auto minmax(0, 1fr);
}
.wire-next__select-option > span {
display: grid;
min-width: 0;
gap: 0.12rem;
}
.wire-next__select-option strong {
overflow: hidden;
font-size: 0.82em;
font-weight: 650;
text-overflow: ellipsis;
white-space: nowrap;
}
.wire-next__select-option small {
overflow: hidden;
font-size: 0.68em;
text-overflow: ellipsis;
white-space: nowrap;
}
.wire-next__select-option img,
.wire-next__selected-avatar {
width: 1.65rem;
height: 1.65rem;
border-radius: 50%;
object-fit: cover;
}
.wire-next__select-option--active {
background: var(--wire-color-surface-2);
}
.wire-next__select-option--selected {
color: var(--wire-component-color);
}
.wire-next__select-option:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.wire-next__check {
position: absolute;
top: 50%;
right: 0.8rem;
width: 1rem;
height: 1rem;
color: var(--wire-component-color);
transform: translateY(-50%);
}
.wire-next__select-message {
display: flex;
min-height: 4rem;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 1rem;
color: var(--wire-color-muted);
font-size: 0.78em;
text-align: center;
}
.wire-next__create-option,
.wire-next__load-more {
width: 100%;
padding: 0.65rem;
border-top: 1px solid var(--wire-color-border);
text-align: left;
}
.wire-next--disabled {
opacity: 0.62;
}
.wire-next__select-trigger .wire-next__select-tags {
flex-wrap: nowrap;
overflow: hidden;
}
@media (max-width: 640px) {
.wire-next__select-dropdown {
min-width: 100%;
}
}
}
}
packages/ui/test/ui.test.ts
+21 -2
View File
@@ -28,17 +28,33 @@ test("bundled UI assets are discoverable and readable", () => {
test("global UI CSS stays below its migration ratchet", () => {
const css = uiCss();
expect(gzipSync(new TextEncoder().encode(css)).length).toBeLessThanOrEqual(9_338);
expect(gzipSync(new TextEncoder().encode(css)).length).toBeLessThanOrEqual(3_762);
for (const localOrRemovedFamily of [
".wire-switch",
".wire-alert",
".wire-card",
".wire-footer",
".wire-metric-card",
".wire-segmented-group",
".wire-dropdown",
".wire-btn",
".wire-next",
]) {
expect(css).not.toContain(localOrRemovedFamily);
}
});
test("components do not carry the standalone wire-next generation artifact", () => {
const offenders = uiComponentNames().filter((name) => {
const source = readFileSync(uiComponentPath(name), "utf8");
return [...source.matchAll(/class=["']([^"']*)["']/g)].some((match) =>
match[1]!.split(/\s+/).includes("wire-next"),
);
});
expect(offenders).toEqual([]);
});
test("every bundled component carries local styles", () => {
const unstyled = uiComponentNames().filter(
(name) => !/^\s{2,4}style \{/m.test(readFileSync(uiComponentPath(name), "utf8")),
@@ -460,7 +476,10 @@ test("component-system CSS includes responsive, theme-token, focus, and reduced-
expect(css).toContain(".wire-bg-primary");
expect(css).toContain(".wire-text-muted");
expect(css).toContain(".wire-visually-hidden");
expect(css).toContain(".wire-next--field");
expect(css).not.toContain(".wire-next--field");
expect(
readFileSync(join(uiComponentsDir(), "..", "styles", "FieldStyles.wrn"), "utf8"),
).toContain(".wire-next--field");
expect(css).toContain('[data-show="false"]');
expect(css).toContain("display: none !important");
/*
packages/ui/ui.css
+2 -1447
View File
File diff suppressed because it is too large Load Diff