WorkRoot/WRNexusJS
2
0
Fork 0
Code Issues Pull Requests Actions 27 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 {