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

feat: release design system engine, studio and component contracts

Browse Source
This commit is contained in:
Clintchiz committed 2026-10-19 13:09:03 +05:30
1 parent ff1065fb27
commit 3943b946d6
693 files changed
+175546 -3894
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/ui/components/Accordion.wrn
+15 -15
View File
@@ -105,14 +105,14 @@ component Accordion {
data-indicator-position="{showIndicator ? indicatorPosition : 'none'}"
data-multiple="{allowsMultiple() ? 'true' : 'false'}"
class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--accordion wrn-next--accordion-{variant} {bordered ? 'wrn-next--accordion-bordered' : ''} {separated ? 'wrn-next--accordion-separated' : ''} {flush ? 'wrn-next--accordion-flush' : ''} {disabled ? 'wrn-next--disabled' : ''} {class}"
>
data-wrn-owner="Accordion" data-wrn-part="root" data-wrn-component="Accordion" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-bordered="{bordered}" data-wrn-axis-separated="{separated}" data-wrn-axis-flush="{flush}">
{#each items as item, index}
<section
class="wrn-next__accordion-item"
data-open="{isOpen(itemValue(item, index)) ? 'true' : 'false'}"
data-disabled="{disabled || item.disabled ? 'true' : 'false'}"
>
<h3 class="wrn-next__accordion-heading">
data-wrn-owner="Accordion" data-wrn-part="item" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-bordered="{bordered}" data-wrn-axis-separated="{separated}" data-wrn-axis-flush="{flush}">
<h3 class="wrn-next__accordion-heading" data-wrn-owner="Accordion" data-wrn-part="heading" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-bordered="{bordered}" data-wrn-axis-separated="{separated}" data-wrn-axis-flush="{flush}">
<button
type="button"
id="{id}-trigger-{index}"
@@ -120,9 +120,9 @@ component Accordion {
aria-controls="{id}-panel-{index}"
disabled="{disabled || item.disabled}"
@click="toggleItem(event, itemValue(item, index), item)"
>
data-wrn-owner="Accordion" data-wrn-part="trigger" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-bordered="{bordered}" data-wrn-axis-separated="{separated}" data-wrn-axis-flush="{flush}">
{#if showIndicator && indicatorPosition === "start"}
<span class="wrn-next__accordion-indicator" aria-hidden="true">
<span class="wrn-next__accordion-indicator" aria-hidden="true" data-wrn-owner="Accordion" data-wrn-part="indicator" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-bordered="{bordered}" data-wrn-axis-separated="{separated}" data-wrn-axis-flush="{flush}">
{#if indicator === "chevron"}
<span class="icon-[lucide--chevron-down]"></span>
{:else}
@@ -132,7 +132,7 @@ component Accordion {
{/if}
<span>{item.label || item.title}</span>
{#if showIndicator && indicatorPosition === "end"}
<span class="wrn-next__accordion-indicator" aria-hidden="true">
<span class="wrn-next__accordion-indicator" aria-hidden="true" data-wrn-owner="Accordion" data-wrn-part="indicator" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-bordered="{bordered}" data-wrn-axis-separated="{separated}" data-wrn-axis-flush="{flush}">
{#if indicator === "chevron"}
<span class="icon-[lucide--chevron-down]"></span>
{:else}
@@ -149,19 +149,19 @@ component Accordion {
role="region"
aria-labelledby="{id}-trigger-{index}"
aria-hidden="{isOpen(itemValue(item, index)) ? 'false' : 'true'}"
>
data-wrn-owner="Accordion" data-wrn-part="panel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-bordered="{bordered}" data-wrn-axis-separated="{separated}" data-wrn-axis-flush="{flush}">
<div>
<div class="wrn-next__accordion-content {contentItalic ? 'wrn-next__accordion-content-italic' : ''}">
<div class="wrn-next__accordion-content {contentItalic ? 'wrn-next__accordion-content-italic' : ''}" data-wrn-owner="Accordion" data-wrn-part="content" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-bordered="{bordered}" data-wrn-axis-separated="{separated}" data-wrn-axis-flush="{flush}">
{#if item.content}<p>{item.content}</p>{/if}
{#if item.children && item.children.length > 0}
<div class="wrn-next__accordion-nested">
<div class="wrn-next__accordion-nested" data-wrn-owner="Accordion" data-wrn-part="nested" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-bordered="{bordered}" data-wrn-axis-separated="{separated}" data-wrn-axis-flush="{flush}">
{#each item.children as child, childIndex}
<section
class="wrn-next__accordion-item"
data-open="{isOpen(nestedValue(item, index, child, childIndex)) ? 'true' : 'false'}"
>
<h4 class="wrn-next__accordion-heading">
data-wrn-owner="Accordion" data-wrn-part="item" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-bordered="{bordered}" data-wrn-axis-separated="{separated}" data-wrn-axis-flush="{flush}">
<h4 class="wrn-next__accordion-heading" data-wrn-owner="Accordion" data-wrn-part="heading" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-bordered="{bordered}" data-wrn-axis-separated="{separated}" data-wrn-axis-flush="{flush}">
<button
type="button"
id="{id}-trigger-{index}-{childIndex}"
@@ -169,9 +169,9 @@ component Accordion {
aria-controls="{id}-panel-{index}-{childIndex}"
disabled="{disabled || child.disabled}"
@click="toggleItem(event, nestedValue(item, index, child, childIndex), child)"
>
data-wrn-owner="Accordion" data-wrn-part="trigger" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-bordered="{bordered}" data-wrn-axis-separated="{separated}" data-wrn-axis-flush="{flush}">
{#if showIndicator}
<span class="wrn-next__accordion-indicator" aria-hidden="true">
<span class="wrn-next__accordion-indicator" aria-hidden="true" data-wrn-owner="Accordion" data-wrn-part="indicator" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-bordered="{bordered}" data-wrn-axis-separated="{separated}" data-wrn-axis-flush="{flush}">
{#if indicator === "chevron"}
<span class="icon-[lucide--chevron-down]"></span>
{:else}
@@ -188,9 +188,9 @@ component Accordion {
role="region"
aria-labelledby="{id}-trigger-{index}-{childIndex}"
aria-hidden="{isOpen(nestedValue(item, index, child, childIndex)) ? 'false' : 'true'}"
>
data-wrn-owner="Accordion" data-wrn-part="panel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-bordered="{bordered}" data-wrn-axis-separated="{separated}" data-wrn-axis-flush="{flush}">
<div>
<div class="wrn-next__accordion-content {contentItalic ? 'wrn-next__accordion-content-italic' : ''}">
<div class="wrn-next__accordion-content {contentItalic ? 'wrn-next__accordion-content-italic' : ''}" data-wrn-owner="Accordion" data-wrn-part="content" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-bordered="{bordered}" data-wrn-axis-separated="{separated}" data-wrn-axis-flush="{flush}">
<p>{child.content}</p>
</div>
</div>
packages/ui/components/AdvancedSelect.wrn
+31 -31
View File
@@ -268,13 +268,13 @@ component AdvancedSelect {
data-page="{page}"
data-wrn-select
@focusout="if (!event.currentTarget.contains(event.relatedTarget)) { open = false }"
>
<div class="wrn-next__row">
<label id="{name}-label" for="{name}-trigger">{label}</label>
data-wrn-owner="AdvancedSelect" data-wrn-part="root" data-wrn-component="AdvancedSelect" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<div class="wrn-next__row" data-wrn-owner="AdvancedSelect" data-wrn-part="row" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<label id="{name}-label" for="{name}-trigger" data-wrn-owner="AdvancedSelect" data-wrn-part="label" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{label}</label>
<small data-show="showCounter" data-text="counterText()">{counterText()}</small>
</div>
<div class="wrn-next__select-control">
<div class="wrn-next__select-control" data-wrn-owner="AdvancedSelect" data-wrn-part="selectControl" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<button
{...attrs}
id="{name}-trigger"
@@ -289,8 +289,8 @@ component AdvancedSelect {
disabled="{disabled}"
@click="toggle()"
@keydown="handleKeydown(event)"
>
<span class="wrn-next__select-value">
data-wrn-owner="AdvancedSelect" data-wrn-part="selectTrigger" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<span class="wrn-next__select-value" data-wrn-owner="AdvancedSelect" data-wrn-part="selectValue" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<span data-show="!multiple" data-text="triggerText()">{triggerText()}</span>
<span
data-show="multiple && selectedTemplate === 'count' && selectedCount() > 0"
@@ -304,25 +304,25 @@ component AdvancedSelect {
class="wrn-next__select-tags"
aria-label="{selectedOptionsLabel}"
data-show="multiple && selectedTemplate !== 'count' && selectedTemplate !== 'text' && selectedCount() > 0"
>
data-wrn-owner="AdvancedSelect" data-wrn-part="selectTags" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#each multiple && selectedTemplate !== 'count' && selectedTemplate !== 'text' ? selectedOptions() : [] as option}
<span data-show="isSelected(option)">
{#if optionTemplate === "icon" && option.icon}<i class="{option.icon}" aria-hidden="true"></i>{/if}
{#if optionTemplate === "avatar" && option.avatar}<img src="{option.avatar}" alt="" />{/if}
{#if optionTemplate === "color" && option.color}<i class="wrn-next__color-dot" style="--option-color: {option.color}"></i>{/if}
{#if optionTemplate === "color" && option.color}<i class="wrn-next__color-dot" style="--option-color: {option.color}" data-wrn-owner="AdvancedSelect" data-wrn-part="colorDot" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></i>{/if}
{option.label}
</span>
{/each}
</span>
<span data-show="multiple && selectedCount() === 0">
{#if placeholderIcon}<i class="{placeholderIcon}" aria-hidden="true"></i>{/if}
<span class="wrn-next__placeholder">{placeholder}</span>
<span class="wrn-next__placeholder" data-wrn-owner="AdvancedSelect" data-wrn-part="placeholder" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{placeholder}</span>
</span>
</span>
<span
class="wrn-next__select-chevron icon-[lucide--chevrons-up-down]"
aria-hidden="true"
></span>
data-wrn-owner="AdvancedSelect" data-wrn-part="selectChevron" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></span>
</button>
<button
@@ -332,7 +332,7 @@ component AdvancedSelect {
aria-label="{clearLabel}"
title="{clearLabel}"
@click="clearSelection(event)"
>
data-wrn-owner="AdvancedSelect" data-wrn-part="clearSelect" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<span class="icon-[lucide--x]" aria-hidden="true"></span>
</button>
</div>
@@ -341,11 +341,11 @@ component AdvancedSelect {
class="wrn-next__select-dropdown {fixed ? 'wrn-next__select-dropdown--fixed' : ''}"
data-show="open"
style="{open ? '' : 'display: none'}"
>
data-wrn-owner="AdvancedSelect" data-wrn-part="selectDropdown" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#if searchable}
<label class="wrn-next__select-search">
<label class="wrn-next__select-search" data-wrn-owner="AdvancedSelect" data-wrn-part="selectSearch" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<span class="wrn-visually-hidden">{searchPlaceholder}</span>
<span class="wrn-next__search-icon icon-[lucide--search]" aria-hidden="true"></span>
<span class="wrn-next__search-icon icon-[lucide--search]" aria-hidden="true" data-wrn-owner="AdvancedSelect" data-wrn-part="searchIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></span>
<input
type="search"
value="{query}"
@@ -353,15 +353,15 @@ component AdvancedSelect {
autocomplete="off"
@input="query = event.target.value; activeIndex = flatVisibleOptions().length ? 0 : -1"
@keydown="handleKeydown(event)"
/>
data-wrn-owner="AdvancedSelect" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"/>
</label>
{/if}
<div
class="wrn-next__select-message"
data-show="remote && query.length !== 0 && query.length < minSearchLength"
>Enter at least {minSearchLength} characters.</div>
<div class="wrn-next__select-message" data-show="loading" role="status">
data-wrn-owner="AdvancedSelect" data-wrn-part="selectMessage" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">Enter at least {minSearchLength} characters.</div>
<div class="wrn-next__select-message" data-show="loading" role="status" data-wrn-owner="AdvancedSelect" data-wrn-part="selectMessage" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<i class="wrn-spinner wrn-spinner--inline" aria-hidden="true"></i>
{loadingLabel}
</div>
@@ -371,11 +371,11 @@ component AdvancedSelect {
data-show="(!remote || (query.length === 0 && remoteAutoLoad) || query.length >= minSearchLength) && !loading"
role="listbox"
aria-multiselectable="{multiple}"
>
data-wrn-owner="AdvancedSelect" data-wrn-part="selectList" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#each open ? groups : [] as group}
{#if visibleOptions(group.options || []).length}
<div class="wrn-next__option-group" role="group" aria-label="{group.label}">
<div class="wrn-next__group-label">{group.label}</div>
<div class="wrn-next__option-group" role="group" aria-label="{group.label}" data-wrn-owner="AdvancedSelect" data-wrn-part="optionGroup" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<div class="wrn-next__group-label" data-wrn-owner="AdvancedSelect" data-wrn-part="groupLabel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{group.label}</div>
{#each visibleOptions(group.options || []) as option}
<button
type="button"
@@ -387,16 +387,16 @@ component AdvancedSelect {
disabled="{!canSelect(option)}"
@mouseenter="activeIndex = optionIndex(option)"
@click="chooseOption(option)"
>
data-wrn-owner="AdvancedSelect" data-wrn-part="selectOption" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#if optionTemplate === "icon" && option.icon}<i class="{option.icon}" aria-hidden="true"></i>{/if}
{#if optionTemplate === "avatar" && option.avatar}<img src="{option.avatar}" alt="" />{/if}
{#if optionTemplate === "color" && option.color}<i class="wrn-next__color-dot" style="--option-color: {option.color}"></i>{/if}
{#if optionTemplate === "color" && option.color}<i class="wrn-next__color-dot" style="--option-color: {option.color}" data-wrn-owner="AdvancedSelect" data-wrn-part="colorDot" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></i>{/if}
<span><strong>{option.label}</strong>{#if option.description}<small>{option.description}</small>{/if}</span>
<i
class="wrn-next__check icon-[lucide--check]"
data-show="isSelected(option)"
aria-hidden="true"
></i>
data-wrn-owner="AdvancedSelect" data-wrn-part="check" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></i>
</button>
{/each}
</div>
@@ -414,33 +414,33 @@ component AdvancedSelect {
disabled="{!canSelect(option)}"
@mouseenter="activeIndex = optionIndex(option)"
@click="chooseOption(option)"
>
data-wrn-owner="AdvancedSelect" data-wrn-part="selectOption" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#if optionTemplate === "icon" && option.icon}<i class="{option.icon}" aria-hidden="true"></i>{/if}
{#if optionTemplate === "avatar" && option.avatar}<img src="{option.avatar}" alt="" />{/if}
{#if optionTemplate === "color" && option.color}<i class="wrn-next__color-dot" style="--option-color: {option.color}"></i>{/if}
{#if optionTemplate === "color" && option.color}<i class="wrn-next__color-dot" style="--option-color: {option.color}" data-wrn-owner="AdvancedSelect" data-wrn-part="colorDot" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></i>{/if}
<span><strong>{option.label}</strong>{#if option.description}<small>{option.description}</small>{/if}</span>
<i
class="wrn-next__check icon-[lucide--check]"
data-show="isSelected(option)"
aria-hidden="true"
></i>
data-wrn-owner="AdvancedSelect" data-wrn-part="check" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></i>
</button>
{/each}
{#if !loading && !flatVisibleOptions().length}
<div class="wrn-next__select-message">{emptyLabel}</div>
<div class="wrn-next__select-message" data-wrn-owner="AdvancedSelect" data-wrn-part="selectMessage" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{emptyLabel}</div>
{/if}
</div>
{#if tags && query && !allOptions().some((option) => option.label.toLowerCase() === query.toLowerCase())}
<button type="button" class="wrn-next__create-option">{createLabel} “{query}”</button>
<button type="button" class="wrn-next__create-option" data-wrn-owner="AdvancedSelect" data-wrn-part="createOption" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{createLabel} “{query}”</button>
{/if}
<button
type="button"
class="wrn-next__load-more"
data-wrn-select-load-more
data-show="infinite && hasMore"
>{loadMoreLabel}</button>
data-wrn-owner="AdvancedSelect" data-wrn-part="loadMore" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{loadMoreLabel}</button>
</div>
<input
@@ -449,14 +449,14 @@ component AdvancedSelect {
value="{multiple ? selectedValues.join(',') : selectedValue}"
required="{required}"
aria-describedby="{validationMessage ? `${name}-validation` : helpText ? `${name}-help` : ''}"
/>
data-wrn-owner="AdvancedSelect" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"/>
{#if helpText && !validationMessage}<small id="{name}-help">{helpText}</small>{/if}
<small
id="{name}-validation"
class="wrn-next__validation"
data-error="{name}"
>{validationMessage}</small>
data-wrn-owner="AdvancedSelect" data-wrn-part="validation" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{validationMessage}</small>
</div>
<SelectStyles hidden />
}
packages/ui/components/AnnouncementBar.wrn
+16 -16
View File
@@ -52,27 +52,27 @@ badge: string = ""
role='{role}'
aria-live='{live}'
class='wrn-announcement {class}'
>
<div class="wrn-announcement__surface">
data-wrn-owner="AnnouncementBar" data-wrn-part="root" data-wrn-component="AnnouncementBar" data-wrn-axis-compact='{compact}' data-wrn-axis-flush='{flush ? "true" : "false"}' data-wrn-axis-size='{size}' data-wrn-axis-color='{color}' data-wrn-axis-variant='{variant}'>
<div class="wrn-announcement__surface" data-wrn-owner="AnnouncementBar" data-wrn-part="surface" data-wrn-axis-compact="{compact}" data-wrn-axis-flush="{flush}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span
class="wrn-announcement__accent"
aria-hidden="true"
></span>
data-wrn-owner="AnnouncementBar" data-wrn-part="accent" data-wrn-axis-compact="{compact}" data-wrn-axis-flush="{flush}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
<span
class="wrn-announcement__glow wrn-announcement__glow--one"
aria-hidden="true"
></span>
data-wrn-owner="AnnouncementBar" data-wrn-part="glow" data-wrn-axis-compact="{compact}" data-wrn-axis-flush="{flush}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
<span
class="wrn-announcement__glow wrn-announcement__glow--two"
aria-hidden="true"
></span>
data-wrn-owner="AnnouncementBar" data-wrn-part="glow" data-wrn-axis-compact="{compact}" data-wrn-axis-flush="{flush}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
<div class="wrn-announcement__inner">
<div class="wrn-announcement__content">
<div class="wrn-announcement__inner" data-wrn-owner="AnnouncementBar" data-wrn-part="inner" data-wrn-axis-compact="{compact}" data-wrn-axis-flush="{flush}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<div class="wrn-announcement__content" data-wrn-owner="AnnouncementBar" data-wrn-part="content" data-wrn-axis-compact="{compact}" data-wrn-axis-flush="{flush}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if icon}
<span class="wrn-announcement__icon">
<span class="wrn-announcement__icon" data-wrn-owner="AnnouncementBar" data-wrn-part="icon" data-wrn-axis-compact="{compact}" data-wrn-axis-flush="{flush}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span
class='{icon}'
aria-hidden="true"
@@ -80,10 +80,10 @@ badge: string = ""
</span>
{/if}
<div class="wrn-announcement__copy">
<div class="wrn-announcement__headline">
<div class="wrn-announcement__copy" data-wrn-owner="AnnouncementBar" data-wrn-part="copy" data-wrn-axis-compact="{compact}" data-wrn-axis-flush="{flush}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<div class="wrn-announcement__headline" data-wrn-owner="AnnouncementBar" data-wrn-part="headline" data-wrn-axis-compact="{compact}" data-wrn-axis-flush="{flush}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if badge}
<span class="wrn-announcement__badge">
<span class="wrn-announcement__badge" data-wrn-owner="AnnouncementBar" data-wrn-part="badge" data-wrn-axis-compact="{compact}" data-wrn-axis-flush="{flush}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if badgeIcon}
<span
class='{badgeIcon}'
@@ -95,13 +95,13 @@ badge: string = ""
</span>
{/if}
<p class="wrn-announcement__message">
<p class="wrn-announcement__message" data-wrn-owner="AnnouncementBar" data-wrn-part="message" data-wrn-axis-compact="{compact}" data-wrn-axis-flush="{flush}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{message}
</p>
</div>
{#if description && !compact}
<p class="wrn-announcement__description">
<p class="wrn-announcement__description" data-wrn-owner="AnnouncementBar" data-wrn-part="description" data-wrn-axis-compact="{compact}" data-wrn-axis-flush="{flush}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{description}
</p>
{/if}
@@ -109,12 +109,12 @@ badge: string = ""
</div>
{#if actionLabel || dismissible}
<div class="wrn-announcement__actions">
<div class="wrn-announcement__actions" data-wrn-owner="AnnouncementBar" data-wrn-part="actions" data-wrn-axis-compact="{compact}" data-wrn-axis-flush="{flush}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if actionLabel}
<a
href='{actionHref || "#"}'
class="wrn-announcement__action"
>
data-wrn-owner="AnnouncementBar" data-wrn-part="action" data-wrn-axis-compact="{compact}" data-wrn-axis-flush="{flush}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span>{actionLabel}</span>
{#if actionIcon}
@@ -138,7 +138,7 @@ badge: string = ""
title='{dismissLabel}'
class="wrn-announcement__dismiss"
@click='dismissed = true; output.dismiss({ message: message })'
>
data-wrn-owner="AnnouncementBar" data-wrn-part="dismiss" data-wrn-axis-compact="{compact}" data-wrn-axis-flush="{flush}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span
class="icon-[lucide--x]"
aria-hidden="true"
packages/ui/components/AuthForm.wrn
+6 -6
View File
@@ -49,10 +49,10 @@ component AuthForm {
}
view {
<section class="wrn-auth-form wrn-component--color-{color} wrn-component--size-{size} {class}">
<section class="wrn-auth-form wrn-component--color-{color} wrn-component--size-{size} {class}" data-wrn-owner="AuthForm" data-wrn-part="root" data-wrn-component="AuthForm" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<header>
<span class="wrn-auth-form__icon icon-[lucide--fingerprint]" aria-hidden="true"></span>
<div><h2>{title}</h2>{#if description}<p>{description}</p>{/if}</div>
<span class="wrn-auth-form__icon icon-[lucide--fingerprint]" aria-hidden="true" data-wrn-owner="AuthForm" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></span>
<div><h2 data-wrn-owner="AuthForm" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{title}</h2>{#if description}<p>{description}</p>{/if}</div>
</header>
<form
action="{action}"
@@ -62,7 +62,7 @@ component AuthForm {
novalidate="true"
@submit="submitForm(event)"
>
{#if returnTo}<input type="hidden" name="returnTo" value="{returnTo}" />{/if}
{#if returnTo}<input type="hidden" name="returnTo" value="{returnTo}" data-wrn-owner="AuthForm" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"/>{/if}
{#if mode === "register" && showName}
<Input label="Full name" name="displayName" autocomplete="name" placeholder="Enter your full name" required="true" icon="icon-[lucide--user-round]" iconPosition="start" @change="fieldEvent('change', payload)" @input="fieldEvent('input', payload)" @focus="fieldEvent('focus', payload)" @blur="fieldEvent('blur', payload)" />
{/if}
@@ -79,9 +79,9 @@ component AuthForm {
<PinInput label="Verification code" name="code" length={6} inputMode="numeric" />
{/if}
{#if mode === "sign-in" && showRemember}
<div class="wrn-auth-form__options">
<div class="wrn-auth-form__options" data-wrn-owner="AuthForm" data-wrn-part="options" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<Checkbox label="Remember this device" name="rememberDevice" value="on" />
<a href="/forgot-password">Forgot password?</a>
<a href="/forgot-password" data-wrn-owner="AuthForm" data-wrn-part="link" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">Forgot password?</a>
</div>
{/if}
<Button type="submit" label="{submitLabel}" variant="default" color="{color}" size="lg" fullWidth="true" icon="icon-[lucide--arrow-right]" iconPosition="end" class="wrn-auth-form__submit" />
packages/ui/components/AuthSplitLayout.wrn
+10 -10
View File
@@ -13,13 +13,13 @@ component AuthSplitLayout {
view {
<main
class="wrn-auth-split wrn-component--color-{color} wrn-component--size-{size} {class}"
>
data-wrn-owner="AuthSplitLayout" data-wrn-part="root" data-wrn-component="AuthSplitLayout" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<section
class="wrn-auth-split__content"
>
data-wrn-owner="AuthSplitLayout" data-wrn-part="content" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<div
class="wrn-auth-split__brand"
>
data-wrn-owner="AuthSplitLayout" data-wrn-part="brand" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<span
class="icon-[lucide--shield-check]"
aria-hidden="true"
@@ -29,19 +29,19 @@ component AuthSplitLayout {
</div>
<div
class="wrn-auth-split__message"
>
data-wrn-owner="AuthSplitLayout" data-wrn-part="message" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<span
class="wrn-auth-split__eyebrow"
>
data-wrn-owner="AuthSplitLayout" data-wrn-part="eyebrow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{eyebrow}
</span>
<h1>{title}</h1>
<h1 data-wrn-owner="AuthSplitLayout" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{title}</h1>
{#if description}
<p>{description}</p>
{/if}
<div
class="wrn-auth-split__features"
>
data-wrn-owner="AuthSplitLayout" data-wrn-part="features" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#each features as item}
<article>
<span
@@ -63,16 +63,16 @@ component AuthSplitLayout {
</div>
<small
class="wrn-auth-split__legal"
>
data-wrn-owner="AuthSplitLayout" data-wrn-part="legal" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
Authorised access only · Activity may be monitored and audited.
</small>
</section>
<section
class="wrn-auth-split__form"
>
data-wrn-owner="AuthSplitLayout" data-wrn-part="form" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<div
class="wrn-auth-split__form-inner"
>
data-wrn-owner="AuthSplitLayout" data-wrn-part="formInner" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<slot
name="form"
/>
packages/ui/components/AvatarGroup.wrn
+10 -10
View File
@@ -51,10 +51,10 @@ component AvatarGroup {
style="--wrn-avatar-group-columns:{columns}; --wrn-avatar-group-ring:{borderColor || 'var(--wrn-color-bg)'}"
role="group"
aria-label="Avatar group"
>
data-wrn-owner="AvatarGroup" data-wrn-part="root" data-wrn-component="AvatarGroup" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-shape="{shape}">
<div
class="wrn-next__avatar-group-members"
>
data-wrn-owner="AvatarGroup" data-wrn-part="members" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-shape="{shape}">
{#each visibleMembers() as item}
<span
class="wrn-next__avatar-group-member"
@@ -64,10 +64,10 @@ component AvatarGroup {
data-variant="{item.variant || variant}"
tabindex="{showTooltips && (item.tooltip || item.name) ? '0' : '-1'}"
aria-label="{item.tooltip || item.name || item.alt || item.initials || 'Group member'}"
>
data-wrn-owner="AvatarGroup" data-wrn-part="member" data-wrn-axis-size="{item.size || size}" data-wrn-axis-color="{item.color || color}" data-wrn-axis-variant="{item.variant || variant}" data-wrn-axis-shape="{item.shape || shape}">
<span
class="wrn-next__avatar-group-avatar"
>
data-wrn-owner="AvatarGroup" data-wrn-part="avatar" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-shape="{shape}">
{#if item.src}
<img
src="{item.src}"
@@ -93,7 +93,7 @@ component AvatarGroup {
<span
class="wrn-next__avatar-group-tooltip"
role="tooltip"
>
data-wrn-owner="AvatarGroup" data-wrn-part="tooltip" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-shape="{shape}">
{item.tooltip || item.name}
</span>
{/if}
@@ -103,14 +103,14 @@ component AvatarGroup {
{#if hiddenMembers().length > 0}
<span
class="wrn-next__avatar-group-overflow"
>
data-wrn-owner="AvatarGroup" data-wrn-part="overflow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-shape="{shape}">
<button
type="button"
class="wrn-next__avatar-group-overflow-button"
aria-label="{overflowLabel}"
aria-expanded="{overflowOpen ? 'true' : 'false'}"
@click="toggleOverflow(event)"
>
data-wrn-owner="AvatarGroup" data-wrn-part="overflowButton" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-shape="{shape}">
+{hiddenMembers().length}
</button>
@@ -119,15 +119,15 @@ component AvatarGroup {
role="menu"
data-show="overflowOpen"
aria-hidden="{overflowOpen ? 'false' : 'true'}"
>
data-wrn-owner="AvatarGroup" data-wrn-part="menu" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-shape="{shape}">
{#each hiddenMembers() as item}
<span
class="wrn-next__avatar-group-menu-item"
role="menuitem"
>
data-wrn-owner="AvatarGroup" data-wrn-part="menuItem" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-shape="{shape}">
<span
class="wrn-next__avatar-group-menu-avatar"
>
data-wrn-owner="AvatarGroup" data-wrn-part="menuAvatar" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-shape="{shape}">
{#if item.src}
<img
src="{item.src}"
packages/ui/components/BackToTop.wrn
+6 -6
View File
@@ -41,20 +41,20 @@ component BackToTop {
style='--wrn-back-to-top-progress: {progress}%;'
@window:scroll='visible = window.scrollY >= threshold; progress = Math.min(100, Math.max(0, Math.round((window.scrollY / Math.max(1, document.documentElement.scrollHeight - window.innerHeight)) * 100)))'
@click='window.scrollTo({ top: 0, behavior: behavior })'
>
data-wrn-owner="BackToTop" data-wrn-part="root" data-wrn-component="BackToTop" data-wrn-axis-size='{size}' data-wrn-axis-color='{color}' data-wrn-axis-variant='{variant}' data-wrn-axis-shape='{shape}'>
{#if showProgress}
<span class="wrn-back-to-top__progress" aria-hidden="true"></span>
<span class="wrn-back-to-top__progress" aria-hidden="true" data-wrn-owner="BackToTop" data-wrn-part="progress" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-shape="{shape}"></span>
{/if}
<span class="wrn-back-to-top__surface">
<span class='wrn-back-to-top__icon {icon}' aria-hidden="true"></span>
<span class="wrn-back-to-top__surface" data-wrn-owner="BackToTop" data-wrn-part="surface" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-shape="{shape}">
<span class='wrn-back-to-top__icon {icon}' aria-hidden="true" data-wrn-owner="BackToTop" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-shape="{shape}"></span>
{#if showLabel}
<span class="wrn-back-to-top__label">{label}</span>
<span class="wrn-back-to-top__label" data-wrn-owner="BackToTop" data-wrn-part="label" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-shape="{shape}">{label}</span>
{/if}
</span>
<span class="wrn-back-to-top__sr">{label}</span>
<span class="wrn-back-to-top__sr" data-wrn-owner="BackToTop" data-wrn-part="sr" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-shape="{shape}">{label}</span>
</button>
}
packages/ui/components/Blockquote.wrn
+7 -7
View File
@@ -26,13 +26,13 @@ component Blockquote {
data-variant="{variant}"
data-italic="{italic}"
data-max-width="{maxWidth}"
>
data-wrn-owner="Blockquote" data-wrn-part="root" data-wrn-component="Blockquote" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<blockquote cite="{citationUrl}">
{#if quoteMark}
<span class="wrn-next__blockquote-mark" aria-hidden="true">“</span>
<span class="wrn-next__blockquote-mark" aria-hidden="true" data-wrn-owner="Blockquote" data-wrn-part="mark" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">“</span>
{/if}
<div class="wrn-next__blockquote-copy">
<div class="wrn-next__blockquote-copy" data-wrn-owner="Blockquote" data-wrn-part="copy" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if quote}
<p>{quote}</p>
{:else}
@@ -42,20 +42,20 @@ component Blockquote {
</blockquote>
{#if citation || citationTitle || avatarSrc}
<figcaption class="wrn-next__blockquote-citation">
<figcaption class="wrn-next__blockquote-citation" data-wrn-owner="Blockquote" data-wrn-part="citation" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if avatarSrc}
<img
class="wrn-next__blockquote-avatar"
src="{avatarSrc}"
alt="{avatarAlt}"
loading="lazy"
/>
data-wrn-owner="Blockquote" data-wrn-part="avatar" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"/>
{/if}
<span class="wrn-next__blockquote-attribution">
<span class="wrn-next__blockquote-attribution" data-wrn-owner="Blockquote" data-wrn-part="attribution" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if citation}
{#if citationUrl}
<cite><a href="{citationUrl}">{citation}</a></cite>
<cite><a href="{citationUrl}" data-wrn-owner="Blockquote" data-wrn-part="link" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{citation}</a></cite>
{:else}
<cite>{citation}</cite>
{/if}
packages/ui/components/Breadcrumb.wrn
+23 -23
View File
@@ -28,22 +28,22 @@ label: string = "Breadcrumb"
data-variant='{variant}'
aria-label='{label}'
class='wrn-breadcrumb {class}'
>
<ol class="wrn-breadcrumb__list">
data-wrn-owner="Breadcrumb" data-wrn-part="root" data-wrn-component="Breadcrumb" data-wrn-axis-size='{size}' data-wrn-axis-color='{color}' data-wrn-axis-variant='{variant}'>
<ol class="wrn-breadcrumb__list" data-wrn-owner="Breadcrumb" data-wrn-part="list" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if showHome}
<li class="wrn-breadcrumb__item wrn-breadcrumb__item--home">
<li class="wrn-breadcrumb__item wrn-breadcrumb__item--home" data-wrn-owner="Breadcrumb" data-wrn-part="item" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<a
href='{homeHref || "/"}'
class="wrn-breadcrumb__link wrn-breadcrumb__home"
@click='output.select({ item: { label: homeLabel, href: homeHref || "/", value: "home" }, itemIndex: -1 })'
>
data-wrn-owner="Breadcrumb" data-wrn-part="link" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if homeIcon === "icon-[lucide--house]"}
<span class="icon-[lucide--house] wrn-breadcrumb__icon" aria-hidden="true"></span>
<span class="icon-[lucide--house] wrn-breadcrumb__icon" aria-hidden="true" data-wrn-owner="Breadcrumb" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
{:else if homeIcon}
<span class='{homeIcon} wrn-breadcrumb__icon' aria-hidden="true"></span>
<span class='{homeIcon} wrn-breadcrumb__icon' aria-hidden="true" data-wrn-owner="Breadcrumb" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
{/if}
<span class="wrn-breadcrumb__home-label">{homeLabel}</span>
<span class="wrn-breadcrumb__home-label" data-wrn-owner="Breadcrumb" data-wrn-part="homeLabel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{homeLabel}</span>
</a>
</li>
{/if}
@@ -52,9 +52,9 @@ label: string = "Breadcrumb"
<li
class="wrn-breadcrumb__item"
data-current='{item.active || item.current || (active && active === (item.value || item.label || item.title)) || (!active && itemIndex === items.length - 1) ? "true" : "false"}'
>
data-wrn-owner="Breadcrumb" data-wrn-part="item" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if showHome || itemIndex > 0}
<span class="wrn-breadcrumb__separator" aria-hidden="true">
<span class="wrn-breadcrumb__separator" aria-hidden="true" data-wrn-owner="Breadcrumb" data-wrn-part="separator" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if separator === "slash"}
<span>/</span>
{:else if separator === "dot"}
@@ -62,7 +62,7 @@ label: string = "Breadcrumb"
{:else if separator === "arrow"}
<span>→</span>
{:else}
<span class="wrn-breadcrumb__separator-icon">›</span>
<span class="wrn-breadcrumb__separator-icon" data-wrn-owner="Breadcrumb" data-wrn-part="separatorIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">›</span>
{/if}
</span>
{/if}
@@ -74,15 +74,15 @@ label: string = "Breadcrumb"
rel='{item.external ? "noopener noreferrer" : (item.rel || "")}'
class="wrn-breadcrumb__link"
@click='output.select({ item: item, itemIndex: itemIndex })'
>
data-wrn-owner="Breadcrumb" data-wrn-part="link" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if item.icon}
<span class='{item.icon} wrn-breadcrumb__icon' aria-hidden="true"></span>
<span class='{item.icon} wrn-breadcrumb__icon' aria-hidden="true" data-wrn-owner="Breadcrumb" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
{/if}
<span class="wrn-breadcrumb__label">{item.label || item.title}</span>
<span class="wrn-breadcrumb__label" data-wrn-owner="Breadcrumb" data-wrn-part="label" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.label || item.title}</span>
{#if item.external}
<span class="icon-[lucide--arrow-up-right] wrn-breadcrumb__external" aria-hidden="true"></span>
<span class="icon-[lucide--arrow-up-right] wrn-breadcrumb__external" aria-hidden="true" data-wrn-owner="Breadcrumb" data-wrn-part="external" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
{/if}
</a>
{:else}
@@ -90,21 +90,21 @@ label: string = "Breadcrumb"
class="wrn-breadcrumb__current"
aria-current='{item.active || item.current || (active && active === (item.value || item.label || item.title)) || (!active && itemIndex === items.length - 1) ? "page" : "false"}'
aria-disabled='{item.disabled ? "true" : "false"}'
>
data-wrn-owner="Breadcrumb" data-wrn-part="current" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if item.icon}
<span class='{item.icon} wrn-breadcrumb__icon' aria-hidden="true"></span>
<span class='{item.icon} wrn-breadcrumb__icon' aria-hidden="true" data-wrn-owner="Breadcrumb" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
{/if}
<span class="wrn-breadcrumb__label">{item.label || item.title}</span>
<span class="wrn-breadcrumb__label" data-wrn-owner="Breadcrumb" data-wrn-part="label" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.label || item.title}</span>
</span>
{/if}
</li>
{/each}
{#if active && !items.some((item) => active === (item.value || item.label || item.title))}
<li class="wrn-breadcrumb__item" data-current="true">
<li class="wrn-breadcrumb__item" data-current="true" data-wrn-owner="Breadcrumb" data-wrn-part="item" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if showHome || items.length > 0}
<span class="wrn-breadcrumb__separator" aria-hidden="true">
<span class="wrn-breadcrumb__separator" aria-hidden="true" data-wrn-owner="Breadcrumb" data-wrn-part="separator" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if separator === "slash"}
<span>/</span>
{:else if separator === "dot"}
@@ -112,15 +112,15 @@ label: string = "Breadcrumb"
{:else if separator === "arrow"}
<span>→</span>
{:else}
<span class="wrn-breadcrumb__separator-icon">›</span>
<span class="wrn-breadcrumb__separator-icon" data-wrn-owner="Breadcrumb" data-wrn-part="separatorIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">›</span>
{/if}
</span>
{/if}
<span class="wrn-breadcrumb__current" aria-current="page">
<span class="wrn-breadcrumb__current" aria-current="page" data-wrn-owner="Breadcrumb" data-wrn-part="current" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if activeIcon}
<span class='{activeIcon} wrn-breadcrumb__icon' aria-hidden="true"></span>
<span class='{activeIcon} wrn-breadcrumb__icon' aria-hidden="true" data-wrn-owner="Breadcrumb" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
{/if}
<span class="wrn-breadcrumb__label">{active}</span>
<span class="wrn-breadcrumb__label" data-wrn-owner="Breadcrumb" data-wrn-part="label" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{active}</span>
</span>
</li>
{/if}
packages/ui/components/ButtonGroup.wrn
+4 -4
View File
@@ -66,7 +66,7 @@ items: unknown[] = []
data-attached="{attached}"
data-selectable="{selectable}"
data-disabled="{disabled}"
>
data-wrn-owner="ButtonGroup" data-wrn-part="root" data-wrn-component="ButtonGroup" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if items}
{#each items as item, index}
<button
@@ -78,11 +78,11 @@ items: unknown[] = []
data-value="{item.value || item.label || String(index)}"
data-selected="{selectable && selectedValue === (item.value || item.label || String(index)) ? 'true' : 'false'}"
@click="selectItem(item, index)"
>
data-wrn-owner="ButtonGroup" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if item.icon}
<span class="wrn-btn__icon {item.icon}" aria-hidden="true"></span>
<span class="wrn-btn__icon {item.icon}" aria-hidden="true" data-wrn-owner="ButtonGroup" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
{/if}
<span class="wrn-btn__label">{item.label}</span>
<span class="wrn-btn__label" data-wrn-owner="ButtonGroup" data-wrn-part="label" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.label}</span>
</button>
{/each}
{/if}
packages/ui/components/CTASection.wrn
+31 -31
View File
@@ -48,56 +48,56 @@ component CTASection {
data-full-bleed='{fullBleed ? "true" : "false"}'
data-visual-position='{visualPosition}'
class='wrn-cta-section {class}'
>
<div class="wrn-cta-section__outer">
<div class="wrn-cta-section__surface">
data-wrn-owner="CTASection" data-wrn-part="root" data-wrn-component="CTASection" data-wrn-axis-size='{size}' data-wrn-axis-color='{color}' data-wrn-axis-variant='{variant}' data-wrn-axis-radius='{radius}'>
<div class="wrn-cta-section__outer" data-wrn-owner="CTASection" data-wrn-part="outer" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">
<div class="wrn-cta-section__surface" data-wrn-owner="CTASection" data-wrn-part="surface" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">
{#if backgroundImage}
<img
src='{backgroundImage}'
alt=""
aria-hidden="true"
class="wrn-cta-section__background-image"
/>
data-wrn-owner="CTASection" data-wrn-part="backgroundImage" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}"/>
{/if}
<div class="wrn-cta-section__glow wrn-cta-section__glow--one" aria-hidden="true"></div>
<div class="wrn-cta-section__glow wrn-cta-section__glow--two" aria-hidden="true"></div>
<div class="wrn-cta-section__glow wrn-cta-section__glow--one" aria-hidden="true" data-wrn-owner="CTASection" data-wrn-part="glow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}"></div>
<div class="wrn-cta-section__glow wrn-cta-section__glow--two" aria-hidden="true" data-wrn-owner="CTASection" data-wrn-part="glow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}"></div>
<div class="wrn-cta-section__layout">
<div class="wrn-cta-section__content">
<div class="wrn-cta-section__layout" data-wrn-owner="CTASection" data-wrn-part="layout" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">
<div class="wrn-cta-section__content" data-wrn-owner="CTASection" data-wrn-part="content" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">
{#if icon}
<div class="wrn-cta-section__icon" aria-hidden="true">
<div class="wrn-cta-section__icon" aria-hidden="true" data-wrn-owner="CTASection" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">
<span class='{icon}'></span>
</div>
{/if}
{#if eyebrow}
<p class="wrn-cta-section__eyebrow">{eyebrow}</p>
<p class="wrn-cta-section__eyebrow" data-wrn-owner="CTASection" data-wrn-part="eyebrow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">{eyebrow}</p>
{/if}
<h2 class="wrn-cta-section__title">{title}</h2>
<h2 class="wrn-cta-section__title" data-wrn-owner="CTASection" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">{title}</h2>
{#if description}
<p class="wrn-cta-section__description">{description}</p>
<p class="wrn-cta-section__description" data-wrn-owner="CTASection" data-wrn-part="description" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">{description}</p>
{/if}
<slot></slot>
{#if primaryLabel || secondaryLabel}
<div class="wrn-cta-section__actions">
<div class="wrn-cta-section__actions" data-wrn-owner="CTASection" data-wrn-part="actions" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">
{#if primaryLabel}
<a href='{primaryHref || "#"}' class="wrn-cta-section__action wrn-cta-section__action--primary">
<a href='{primaryHref || "#"}' class="wrn-cta-section__action wrn-cta-section__action--primary" data-wrn-owner="CTASection" data-wrn-part="action" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">
{#if primaryIcon}
<span class='wrn-cta-section__action-icon {primaryIcon}' aria-hidden="true"></span>
<span class='wrn-cta-section__action-icon {primaryIcon}' aria-hidden="true" data-wrn-owner="CTASection" data-wrn-part="actionIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}"></span>
{/if}
<span>{primaryLabel}</span>
</a>
{/if}
{#if secondaryLabel}
<a href='{secondaryHref || "#"}' class="wrn-cta-section__action wrn-cta-section__action--secondary">
<a href='{secondaryHref || "#"}' class="wrn-cta-section__action wrn-cta-section__action--secondary" data-wrn-owner="CTASection" data-wrn-part="action" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">
{#if secondaryIcon}
<span class='wrn-cta-section__action-icon {secondaryIcon}' aria-hidden="true"></span>
<span class='wrn-cta-section__action-icon {secondaryIcon}' aria-hidden="true" data-wrn-owner="CTASection" data-wrn-part="actionIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}"></span>
{/if}
<span>{secondaryLabel}</span>
</a>
@@ -106,49 +106,49 @@ component CTASection {
<slot name="actions"></slot>
</div>
{:else}
<div class="wrn-cta-section__actions wrn-cta-section__actions--slot">
<div class="wrn-cta-section__actions wrn-cta-section__actions--slot" data-wrn-owner="CTASection" data-wrn-part="actions" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">
<slot name="actions"></slot>
</div>
{/if}
</div>
<div class="wrn-cta-section__visual-column">
<div class="wrn-cta-section__visual-column" data-wrn-owner="CTASection" data-wrn-part="visualColumn" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">
<slot name="visual"></slot>
{#if visualImage || visualIcon || visualTitle || visualDescription || visualItems.length > 0}
<div class="wrn-cta-section__visual">
<div class="wrn-cta-section__visual" data-wrn-owner="CTASection" data-wrn-part="visual" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">
{#if visualImage}
<div class="wrn-cta-section__visual-media">
<img src='{visualImage}' alt='{visualAlt}' class="wrn-cta-section__visual-image" />
<div class="wrn-cta-section__visual-media" data-wrn-owner="CTASection" data-wrn-part="visualMedia" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">
<img src='{visualImage}' alt='{visualAlt}' class="wrn-cta-section__visual-image" data-wrn-owner="CTASection" data-wrn-part="visualImage" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}"/>
</div>
{/if}
{#if visualIcon || visualTitle || visualDescription}
<div class="wrn-cta-section__visual-header">
<div class="wrn-cta-section__visual-header" data-wrn-owner="CTASection" data-wrn-part="visualHeader" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">
{#if visualIcon}
<div class="wrn-cta-section__visual-icon" aria-hidden="true">
<div class="wrn-cta-section__visual-icon" aria-hidden="true" data-wrn-owner="CTASection" data-wrn-part="visualIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">
<span class='{visualIcon}'></span>
</div>
{/if}
<div class="wrn-cta-section__visual-copy">
<div class="wrn-cta-section__visual-copy" data-wrn-owner="CTASection" data-wrn-part="visualCopy" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">
{#if visualTitle}
<h3 class="wrn-cta-section__visual-title">{visualTitle}</h3>
<h3 class="wrn-cta-section__visual-title" data-wrn-owner="CTASection" data-wrn-part="visualTitle" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">{visualTitle}</h3>
{/if}
{#if visualDescription}
<p class="wrn-cta-section__visual-description">{visualDescription}</p>
<p class="wrn-cta-section__visual-description" data-wrn-owner="CTASection" data-wrn-part="visualDescription" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">{visualDescription}</p>
{/if}
</div>
</div>
{/if}
{#if visualItems.length > 0}
<div class="wrn-cta-section__visual-list">
<div class="wrn-cta-section__visual-list" data-wrn-owner="CTASection" data-wrn-part="visualList" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">
{#each visualItems as item}
<div class="wrn-cta-section__visual-item">
<div class="wrn-cta-section__visual-item" data-wrn-owner="CTASection" data-wrn-part="visualItem" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">
{#if item.icon}
<span class='wrn-cta-section__visual-item-icon {item.icon}' aria-hidden="true"></span>
<span class='wrn-cta-section__visual-item-icon {item.icon}' aria-hidden="true" data-wrn-owner="CTASection" data-wrn-part="visualItemIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}"></span>
{/if}
<div>
<strong>{item.label || item.title}</strong>
@@ -165,7 +165,7 @@ component CTASection {
</div>
</div>
<div class="wrn-cta-section__footer">
<div class="wrn-cta-section__footer" data-wrn-owner="CTASection" data-wrn-part="footer" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}">
<slot name="footer"></slot>
</div>
</div>
packages/ui/components/Card.wrn
+30 -30
View File
@@ -80,7 +80,7 @@ component Card {
}
view {
<div
<div data-wrn-owner="Card" data-wrn-part="root" data-wrn-component="Card" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}"
{...attrs}
data-ui-component="Card"
data-wrn-card
@@ -94,15 +94,15 @@ component Card {
class='wrn-component wrn-next--card wrn-component--color-{color} wrn-component--size-{size} wrn-next--variant-{variant} {class}'
>
{#if items.length > 0}
<div class="wrn-next__card-group">
<div data-wrn-owner="Card" data-wrn-part="group" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}" class="wrn-next__card-group">
{#each items as item, itemIndex}
<article
<article data-wrn-owner="Card" data-wrn-part="panel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}"
class="wrn-next__card-panel"
aria-label='{item.ariaLabel || item.title || item.label || "Card item"}'
data-index='{itemIndex}'
>
{#if item.imageSrc || item.image}
<div class="wrn-next__card-media">
<div data-wrn-owner="Card" data-wrn-part="media" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}" class="wrn-next__card-media">
<img
src='{item.imageSrc || item.image}'
alt='{item.imageAlt || item.alt || ""}'
@@ -114,18 +114,18 @@ component Card {
</div>
{/if}
<div class="wrn-next__card-content">
<div data-wrn-owner="Card" data-wrn-part="content" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}" class="wrn-next__card-content">
{#if item.title || item.label}
<h3 data-t='{item.titleKey || item.labelKey || ""}'>{item.title || item.label}</h3>
{/if}
{#if item.subtitle}
<p class="wrn-next__card-subtitle" data-t='{item.subtitleKey || ""}'>{item.subtitle}</p>
<p data-wrn-owner="Card" data-wrn-part="subtitle" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}" class="wrn-next__card-subtitle" data-t='{item.subtitleKey || ""}'>{item.subtitle}</p>
{/if}
{#if item.description}
<p class="wrn-next__card-description" data-t='{item.descriptionKey || ""}'>{item.description}</p>
<p data-wrn-owner="Card" data-wrn-part="description" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}" class="wrn-next__card-description" data-t='{item.descriptionKey || ""}'>{item.description}</p>
{/if}
{#if item.actionLabel || item.href}
<a
<a data-wrn-owner="Card" data-wrn-part="action" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}"
href='{item.actionHref || item.href || "#"}'
class="wrn-next__card-action"
@click='output.action({ item: item, index: itemIndex })'
@@ -139,13 +139,13 @@ component Card {
{/each}
</div>
{:else}
<article
<article data-wrn-owner="Card" data-wrn-part="panel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}"
class="wrn-next__card-panel"
aria-label='{ariaLabel || title || "Card"}'
hidden='{dismissed}'
>
{#if imageSrc && imagePosition === "overlay"}
<div class="wrn-next__card-overlay">
<div data-wrn-owner="Card" data-wrn-part="overlay" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}" class="wrn-next__card-overlay">
<img
src='{imageSrc}'
alt='{imageAlt}'
@@ -154,12 +154,12 @@ component Card {
@load='output.load({ src: imageSrc })'
@error='output.error({ src: imageSrc })'
/>
<div class="wrn-next__card-overlay-shade" aria-hidden="true"></div>
<div data-wrn-owner="Card" data-wrn-part="overlayShade" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}" class="wrn-next__card-overlay-shade" aria-hidden="true"></div>
</div>
{/if}
{#if imageSrc && (imagePosition === "top" || imagePosition === "left")}
<div class="wrn-next__card-media wrn-next__card-media--{imagePosition}">
<div data-wrn-owner="Card" data-wrn-part="media" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}" class="wrn-next__card-media wrn-next__card-media--{imagePosition}">
<img
src='{imageSrc}'
alt='{imageAlt}'
@@ -171,23 +171,23 @@ component Card {
</div>
{/if}
<div class="wrn-next__card-content">
<div data-wrn-owner="Card" data-wrn-part="content" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}" class="wrn-next__card-content">
{#if showHeader}
<header class="wrn-next__card-header"><slot name="header" />
<div class="wrn-next__card-heading">
<header data-wrn-owner="Card" data-wrn-part="header" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}" class="wrn-next__card-header"><slot name="header" />
<div data-wrn-owner="Card" data-wrn-part="heading" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}" class="wrn-next__card-heading">
{#if header}
<p class="wrn-next__card-eyebrow">{header}</p>
<p data-wrn-owner="Card" data-wrn-part="eyebrow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}" class="wrn-next__card-eyebrow">{header}</p>
{/if}
{#if title}
<h3 data-t='{titleKey}'>{title}</h3>
{/if}
{#if subtitle}
<p class="wrn-next__card-subtitle" data-t='{subtitleKey}'>{subtitle}</p>
<p data-wrn-owner="Card" data-wrn-part="subtitle" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}" class="wrn-next__card-subtitle" data-t='{subtitleKey}'>{subtitle}</p>
{/if}
</div>
{#if headerActions.length > 0 || dismissible}
<div class="wrn-next__card-header-actions">
<div data-wrn-owner="Card" data-wrn-part="headerActions" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}" class="wrn-next__card-header-actions">
{#each headerActions as headerAction, actionIndex}
<button
type="button"
@@ -218,9 +218,9 @@ component Card {
{/if}
{#if navigation.length > 0}
<nav aria-label='{ariaLabel || title || "Card navigation"}' class="wrn-next__card-navigation">
<nav data-wrn-owner="Card" data-wrn-part="navigation" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}" aria-label='{ariaLabel || title || "Card navigation"}' class="wrn-next__card-navigation">
{#if mobileNavigation}
<select
<select data-wrn-owner="Card" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}"
class="wrn-next__card-navigation-select"
aria-label='{ariaLabel || title || "Card navigation"}'
@change='dispatchCardNavigationValue(event)'
@@ -236,7 +236,7 @@ component Card {
</select>
{/if}
<div class="wrn-next__card-tabs" data-mobile-navigation='{mobileNavigation}'>
<div data-wrn-owner="Card" data-wrn-part="tabs" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}" class="wrn-next__card-tabs" data-mobile-navigation='{mobileNavigation}'>
{#each navigation as navItem, navIndex}
<button
type="button"
@@ -248,7 +248,7 @@ component Card {
{/if}
<span>{navItem.label}</span>
{#if navItem.badge}
<span class="wrn-next__card-tab-badge">{navItem.badge}</span>
<span data-wrn-owner="Card" data-wrn-part="tabBadge" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}" class="wrn-next__card-tab-badge">{navItem.badge}</span>
{/if}
</button>
{/each}
@@ -257,7 +257,7 @@ component Card {
{/if}
{#if alertTitle || alertDescription}
<div class="wrn-next__card-alert" role="status">
<div data-wrn-owner="Card" data-wrn-part="alert" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}" class="wrn-next__card-alert" role="status">
{#if alertTitle}
<strong>{alertTitle}</strong>
{/if}
@@ -267,32 +267,32 @@ component Card {
</div>
{/if}
<div
<div data-wrn-owner="Card" data-wrn-part="body" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}"
class="wrn-next__card-body"
data-scrollable='{scrollable}'
style='max-height: {scrollable ? maxHeight : "none"};'
>
{#if empty}
<div class="wrn-next__card-empty">
<div data-wrn-owner="Card" data-wrn-part="empty" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}" class="wrn-next__card-empty">
<span class='{emptyIcon}' aria-hidden="true"></span>
<p>{emptyTitle}</p>
</div>
{:else}
{#if icon}<span class='wrn-next__card-icon {icon}' aria-hidden="true"></span>{/if}
{#if icon}<span data-wrn-owner="Card" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}" class='wrn-next__card-icon {icon}' aria-hidden="true"></span>{/if}
{#if description}
<p class="wrn-next__card-description" data-t='{descriptionKey}'>{description}</p>
<p data-wrn-owner="Card" data-wrn-part="description" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}" class="wrn-next__card-description" data-t='{descriptionKey}'>{description}</p>
{/if}
<slot></slot>
{/if}
</div>
{#if showFooter}
<footer class="wrn-next__card-footer"><div class="wrn-next__card-custom-footer"><slot name="footer" /></div>
<footer data-wrn-owner="Card" data-wrn-part="footer" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}" class="wrn-next__card-footer"><div data-wrn-owner="Card" data-wrn-part="customFooter" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}" class="wrn-next__card-custom-footer"><slot name="footer" /></div>
{#if footer}
<span>{footer}</span>
{/if}
{#if actionLabel}
<a
<a data-wrn-owner="Card" data-wrn-part="action" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}"
href='{actionHref || "#"}'
class="wrn-next__card-action"
@click='output.action({ href: actionHref, label: actionLabel })'
@@ -306,7 +306,7 @@ component Card {
</div>
{#if imageSrc && (imagePosition === "bottom" || imagePosition === "right")}
<div class="wrn-next__card-media wrn-next__card-media--{imagePosition}">
<div data-wrn-owner="Card" data-wrn-part="media" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}" class="wrn-next__card-media wrn-next__card-media--{imagePosition}">
<img
src='{imageSrc}'
alt='{imageAlt}'
packages/ui/components/Carousel.wrn
+21 -21
View File
@@ -335,17 +335,17 @@ component Carousel {
@mouseleave="startAutoplay()"
@focusin="rememberRoot(event); pauseAutoplay()"
@focusout="startAutoplay()"
>
data-wrn-owner="Carousel" data-wrn-part="root" data-wrn-component="Carousel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if title || description}
<header class="wrn-next__carousel-header">
{#if title}<h3>{title}</h3>{/if}
<header class="wrn-next__carousel-header" data-wrn-owner="Carousel" data-wrn-part="header" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if title}<h3 data-wrn-owner="Carousel" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{title}</h3>{/if}
{#if description}<p>{description}</p>{/if}
</header>
{/if}
<div class="wrn-next__carousel-layout">
<div class="wrn-next__carousel-layout" data-wrn-owner="Carousel" data-wrn-part="layout" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if thumbnails === "vertical"}
<div class="wrn-next__carousel-thumbnails" aria-label="Choose a slide">
<div class="wrn-next__carousel-thumbnails" aria-label="Choose a slide" data-wrn-owner="Carousel" data-wrn-part="thumbnails" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#each items as item, index}
<button
type="button"
@@ -353,7 +353,7 @@ component Carousel {
aria-label="Show slide {index + 1}: {item.label || item.title}"
aria-current="{index === currentIndex ? 'true' : 'false'}"
@click="selectSlide(index, 'thumbnail', event)"
>
data-wrn-owner="Carousel" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if item.thumbnail}<img src="{item.thumbnail}" alt="" />{/if}
<span>{item.label || item.title || "Slide " + (index + 1)}</span>
</button>
@@ -361,8 +361,8 @@ component Carousel {
</div>
{/if}
<div class="wrn-next__carousel-main">
<div class="wrn-next__carousel-stage">
<div class="wrn-next__carousel-main" data-wrn-owner="Carousel" data-wrn-part="main" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<div class="wrn-next__carousel-stage" data-wrn-owner="Carousel" data-wrn-part="stage" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<div
class="wrn-next__carousel-viewport"
tabindex="0"
@@ -372,11 +372,11 @@ component Carousel {
@pointerup="endDrag(event)"
@pointercancel="cancelDrag()"
@lostpointercapture="cancelDrag()"
>
data-wrn-owner="Carousel" data-wrn-part="viewport" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<div
class="wrn-next__carousel-track"
style="--wrn-carousel-index: {currentIndex}; --wrn-carousel-per-view: {slidesPerView}; --wrn-carousel-gap: {gap}; --wrn-carousel-drag-offset: {dragOffset}px"
>
data-wrn-owner="Carousel" data-wrn-part="track" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#each items as item, index}
<article
class="wrn-next__carousel-slide"
@@ -385,16 +385,16 @@ component Carousel {
aria-roledescription="slide"
aria-label="{index + 1} of {items.length}"
aria-hidden="{index === currentIndex ? 'false' : 'true'}"
>
data-wrn-owner="Carousel" data-wrn-part="slide" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if item.imageSrc}
<img src="{item.imageSrc}" alt="{item.imageAlt || item.title || ''}" />
{/if}
<div class="wrn-next__carousel-slide-content">
<div class="wrn-next__carousel-slide-content" data-wrn-owner="Carousel" data-wrn-part="slideContent" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if item.eyebrow}<span data-t='{item.eyebrowKey || ""}'>{item.eyebrow}</span>{/if}
{#if item.title || item.label}<h4 data-t='{item.titleKey || item.labelKey || ""}'>{item.title || item.label}</h4>{/if}
{#if item.title || item.label}<h4 data-t='{item.titleKey || item.labelKey || ""}' data-wrn-owner="Carousel" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.title || item.label}</h4>{/if}
{#if item.description}<p data-t='{item.descriptionKey || ""}'>{item.description}</p>{/if}
{#if item.actionLabel}
<a href="{item.actionHref || '#'}" data-t='{item.actionLabelKey || ""}'>{item.actionLabel}</a>
<a href="{item.actionHref || '#'}" data-t='{item.actionLabelKey || ""}' data-wrn-owner="Carousel" data-wrn-part="link" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.actionLabel}</a>
{/if}
</div>
</article>
@@ -409,7 +409,7 @@ component Carousel {
aria-label="Previous slide"
disabled="{!isInfiniteLoop && currentIndex === 0}"
@click="previousSlide(event)"
>
data-wrn-owner="Carousel" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span class="icon-[lucide--chevron-left]" aria-hidden="true"></span>
</button>
<button
@@ -418,19 +418,19 @@ component Carousel {
aria-label="Next slide"
disabled="{!isInfiniteLoop && currentIndex === maximumIndex()}"
@click="nextSlide(event)"
>
data-wrn-owner="Carousel" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span class="icon-[lucide--chevron-right]" aria-hidden="true"></span>
</button>
{#if showCounter}
<output class="wrn-next__carousel-counter" aria-live="polite">
<output class="wrn-next__carousel-counter" aria-live="polite" data-wrn-owner="Carousel" data-wrn-part="counter" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{currentIndex + 1} / {items.length}
</output>
{/if}
</div>
{#if showPagination}
<div class="wrn-next__carousel-pagination" aria-label="Choose a slide">
<div class="wrn-next__carousel-pagination" aria-label="Choose a slide" data-wrn-owner="Carousel" data-wrn-part="pagination" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#each items as item, index}
<button
type="button"
@@ -438,13 +438,13 @@ component Carousel {
aria-label="Show slide {index + 1}"
aria-current="{index === currentIndex ? 'true' : 'false'}"
@click="selectSlide(index, 'pagination', event)"
></button>
data-wrn-owner="Carousel" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></button>
{/each}
</div>
{/if}
{#if thumbnails === "horizontal"}
<div class="wrn-next__carousel-thumbnails" aria-label="Choose a slide">
<div class="wrn-next__carousel-thumbnails" aria-label="Choose a slide" data-wrn-owner="Carousel" data-wrn-part="thumbnails" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#each items as item, index}
<button
type="button"
@@ -452,7 +452,7 @@ component Carousel {
aria-label="Show slide {index + 1}: {item.label || item.title}"
aria-current="{index === currentIndex ? 'true' : 'false'}"
@click="selectSlide(index, 'thumbnail', event)"
>
data-wrn-owner="Carousel" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if item.thumbnail}<img src="{item.thumbnail}" alt="" />{/if}
<span>{item.label || item.title || "Slide " + (index + 1)}</span>
</button>
packages/ui/components/Chart.wrn
+30 -306
View File
@@ -1,15 +1,17 @@
component Chart {
outputs {
select(payload: { item: object; index: number; sourceEvent?: Event })
dataPointClick(payload: { item: object; index: number; sourceEvent?: Event })
legendToggle(payload: { item: object; index: number; hidden: boolean; sourceEvent?: Event })
select(payload: { item: string | number | boolean | null | object; index: number; datasetIndex: number; sourceEvent?: Event })
dataPointClick(payload: { item: string | number | boolean | null | object; index: number; datasetIndex: number; sourceEvent?: Event })
legendToggle(payload: { item: string | number | boolean | null | object; index: number; datasetIndex?: number; hidden: boolean; sourceEvent?: Event })
}
props {
title: string = "Chart"
description: string = ""
items: unknown[] = []
data: unknown[] = []
data: unknown = undefined
labels: unknown[] = []
datasets: unknown[] = []
options: object = {}
type: string = ""
valueKey: string = "value"
labelKey: string = "label"
@@ -21,320 +23,42 @@ component Chart {
variant: string = "bar"
class: string = ""
}
state hiddenIndexes = []
functions {
shared function chartData() { return data.length ? data : items }
shared function chartKind() { var kind = type || variant; return kind === "line" || kind === "area" ? kind : "bar" }
shared function numericValue(item) { return Math.max(0, Number(item[valueKey]) || 0) }
shared function isHidden(index) { return hiddenIndexes.includes(index) }
// Visible points keep their original index so events report the source item.
shared function points() {
var source = chartData()
var visible = []
for (var index = 0; index < source.length; index++) {
if (!hiddenIndexes.includes(index)) { visible.push({ item: source[index], index: index }) }
}
return visible
}
// Plot geometry in viewBox units: 600 wide, height tall.
shared function plotLeft() { return 44 }
shared function plotRight() { return 588 }
shared function plotTop() { return 14 }
shared function plotBottom() { return Math.max(120, height) - 30 }
// Round the scale up to a readable value so the ticks land on clean numbers.
shared function niceMax() {
var max = 0
var visible = points()
for (var index = 0; index < visible.length; index++) { max = Math.max(max, numericValue(visible[index].item)) }
if (max <= 0) { return 1 }
var magnitude = Math.pow(10, Math.floor(Math.log10(max)))
var steps = [1, 2, 2.5, 5, 10]
var chosen = 10 * magnitude
for (var step = steps.length - 1; step >= 0; step--) {
if (steps[step] * magnitude >= max) { chosen = steps[step] * magnitude }
}
return chosen
}
shared function ticks() {
var top = niceMax()
return [0, top * 0.25, top * 0.5, top * 0.75, top]
}
shared function tickLabel(value) {
if (value >= 1000000) { return (value / 1000000).toFixed(value % 1000000 ? 1 : 0) + "M" }
if (value >= 1000) { return (value / 1000).toFixed(value % 1000 ? 1 : 0) + "k" }
return String(Math.round(value * 100) / 100)
}
shared function yFor(value) { return plotTop() + (1 - value / niceMax()) * (plotBottom() - plotTop()) }
shared function band() { return (plotRight() - plotLeft()) / Math.max(1, points().length) }
shared function barWidth() { return Math.min(band() * 0.62, 56) }
shared function centerX(position) { return plotLeft() + position * band() + band() / 2 }
// Bars: 4px rounded data end, square at the baseline.
shared function barPath(point, position) {
var width = barWidth()
var x = centerX(position) - width / 2
var y = yFor(numericValue(point.item))
var base = plotBottom()
var radius = Math.min(4, (base - y) / 2, width / 2)
if (base - y < 1) { return "M" + x + "," + (base - 1) + "h" + width + "v1h-" + width + "Z" }
return "M" + x + "," + base + "V" + (y + radius) + "Q" + x + "," + y + " " + (x + radius) + "," + y + "H" + (x + width - radius) + "Q" + (x + width) + "," + y + " " + (x + width) + "," + (y + radius) + "V" + base + "Z"
}
shared function linePath() {
var visible = points()
var path = ""
for (var position = 0; position < visible.length; position++) {
path = path + (position ? "L" : "M") + centerX(position) + "," + yFor(numericValue(visible[position].item))
}
return path
}
shared function areaPath() {
var visible = points()
if (!visible.length) { return "" }
return linePath() + "L" + centerX(visible.length - 1) + "," + plotBottom() + "L" + centerX(0) + "," + plotBottom() + "Z"
}
// Hit targets and tooltips are HTML laid over the SVG, positioned in %.
shared function hitStyle(position) {
return "left:" + ((plotLeft() + position * band()) / 600 * 100) + "%;width:" + (band() / 600 * 100) + "%;top:" + (plotTop() / Math.max(120, height) * 100) + "%;height:" + ((plotBottom() - plotTop()) / Math.max(120, height) * 100) + "%"
}
shared function tipStyle(point) {
return "top:" + ((yFor(numericValue(point.item)) - plotTop()) / (plotBottom() - plotTop()) * 100) + "%"
}
client function selectPoint(item, index, sourceEvent) {
output.dataPointClick({ item: item, index: index, sourceEvent: sourceEvent })
output.select({ item: item, index: index, sourceEvent: sourceEvent })
}
client function toggleLegend(item, index, sourceEvent, next) {
next = []
for (var position = 0; position < hiddenIndexes.length; position++) {
if (hiddenIndexes[position] !== index) { next.push(hiddenIndexes[position]) }
}
if (next.length === hiddenIndexes.length) { next.push(index) }
hiddenIndexes = next
output.legendToggle({ item: item, index: index, hidden: next.includes(index), sourceEvent: sourceEvent })
shared function configText() {
var chartData = typeof data === "string" ? JSON.parse(data) : data
return JSON.stringify({ title: title, items: items, data: chartData, labels: labels, datasets: datasets, options: options, type: type || variant, valueKey: valueKey, labelKey: labelKey, showLegend: showLegend, showValues: showValues })
}
}
view {
<figure {...attrs} data-ui-component="Chart" data-variant='{chartKind()}' data-size='{size}' data-color='{color}' class='wrn-chart {class}'>
<figure {...attrs} data-ui-component="Chart" data-wrnexus-runtime="chartjs" data-chart-config="{configText()}" data-color="{color}" data-size="{size}" class="wrn-chart {class}" @chartselect="output.select(event.detail)" @chartpointclick="output.dataPointClick(event.detail)" @chartlegendtoggle="output.legendToggle(event.detail)" data-wrn-owner="Chart" data-wrn-part="root" data-wrn-component="Chart" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if title || description}
<figcaption class="wrn-chart__header">
<figcaption class="wrn-chart__header" data-wrn-owner="Chart" data-wrn-part="header" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if title}<strong>{title}</strong>{/if}
{#if description}<span>{description}</span>{/if}
</figcaption>
{/if}
<div class="wrn-chart__stage" style="aspect-ratio: 600 / {Math.max(120, height)}">
<svg class="wrn-chart__plot" viewBox="0 0 600 {Math.max(120, height)}" preserveAspectRatio="none" role="img" aria-label="{title}">
{#each ticks() as tick}
<line class="wrn-chart__grid" x1="{plotLeft()}" x2="{plotRight()}" y1="{yFor(tick)}" y2="{yFor(tick)}" data-baseline="{tick === 0}"></line>
{/each}
{#if chartKind() === "bar"}
{#each points() as point, position}
<path class="wrn-chart__bar" d="{barPath(point, position)}"></path>
{/each}
{:else}
{#if chartKind() === "area"}<path class="wrn-chart__area" d="{areaPath()}"></path>{/if}
<path class="wrn-chart__line" d="{linePath()}"></path>
{/if}
</svg>
<div class="wrn-chart__ticks" aria-hidden="true">
{#each ticks() as tick}<span style="top:{yFor(tick) / Math.max(120, height) * 100}%">{tickLabel(tick)}</span>{/each}
</div>
<div class="wrn-chart__labels" aria-hidden="true">
{#each points() as point, position}<span style="left:{centerX(position) / 600 * 100}%">{point.item[labelKey]}</span>{/each}
</div>
<div class="wrn-chart__hits">
{#each points() as point, position}
<button type="button" class="wrn-chart__hit" style="{hitStyle(position)}" aria-label="{point.item[labelKey] + ': ' + numericValue(point.item)}" @click="selectPoint(point.item, point.index, event)">
{#if chartKind() !== "bar"}<i class="wrn-chart__dot" style="{tipStyle(point)}" aria-hidden="true"></i>{/if}
{#if showValues && chartKind() === "bar"}<b class="wrn-chart__value" style="{tipStyle(point)}" aria-hidden="true">{tickLabel(numericValue(point.item))}</b>{/if}
<span class="wrn-chart__tip" style="{tipStyle(point)}" aria-hidden="true"><small>{point.item[labelKey]}</small><strong>{numericValue(point.item)}</strong></span>
</button>
{/each}
</div>
{#if !points().length}<p class="wrn-chart__empty">No data to show</p>{/if}
<div class="wrn-chart__stage" style="height:{Math.max(120, height)}px" data-wrn-owner="Chart" data-wrn-part="stage" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<canvas data-chart-canvas role="img" aria-label="{title || 'Chart'}" data-wrn-owner="Chart" data-wrn-part="canvas" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">Chart data is available in the table below.</canvas>
</div>
{#if showLegend && chartData().length}
<div class="wrn-chart__legend" role="group" aria-label="Show or hide data">
{#each chartData() as item, index}
<button type="button" aria-pressed='{isHidden(index) ? "false" : "true"}' @click='toggleLegend(item, index, event)'>
<span aria-hidden="true"></span>{item[labelKey]}
</button>
{/each}
</div>
{/if}
<p data-chart-status class="wrn-chart__status" role="status" data-wrn-owner="Chart" data-wrn-part="status" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></p>
<div data-chart-table class="wrn-chart__accessible" data-wrn-owner="Chart" data-wrn-part="accessible" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></div>
<slot />
</figure>
}
style {
.wrn-chart {
--wrn-chart-color: var(--wrn-color-primary);
display: grid;
gap: 0.875rem;
min-width: 0;
margin: 0;
padding: 1rem 1.125rem;
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius);
color: var(--wrn-color-text);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-1);
}
.wrn-chart[data-color="secondary"] { --wrn-chart-color: var(--wrn-color-secondary); }
.wrn-chart[data-color="success"] { --wrn-chart-color: var(--wrn-color-success); }
.wrn-chart[data-color="info"] { --wrn-chart-color: var(--wrn-color-info); }
.wrn-chart[data-color="warning"] { --wrn-chart-color: var(--wrn-color-warning); }
.wrn-chart[data-color="danger"] { --wrn-chart-color: var(--wrn-color-danger); }
.wrn-chart__header { display: grid; gap: 0.2rem; }
.wrn-chart__header > strong { font-size: 0.9375rem; font-weight: 620; letter-spacing: -0.01em; }
.wrn-chart__header > span { color: var(--wrn-color-text-muted, var(--wrn-color-muted)); font-size: 0.8125rem; }
/* The stage reserves the SVG box; ticks, labels and hit targets sit over
it in percentages so text never scales with the plot. */
.wrn-chart__stage { position: relative; width: 100%; min-width: 0; }
.wrn-chart__plot { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.wrn-chart__grid { stroke: var(--wrn-color-border); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 2 4; }
.wrn-chart__grid[data-baseline="true"] { stroke: var(--wrn-color-border-strong, var(--wrn-color-border)); stroke-dasharray: none; }
.wrn-chart__bar { fill: var(--wrn-chart-color); transition: opacity var(--wrn-motion-fast); }
.wrn-chart__line { fill: none; stroke: var(--wrn-chart-color); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.wrn-chart__area { fill: color-mix(in srgb, var(--wrn-chart-color) 14%, transparent); stroke: none; }
.wrn-chart__ticks > span,
.wrn-chart__labels > span {
position: absolute;
color: var(--wrn-color-text-subtle, var(--wrn-color-muted));
font-family: var(--wrn-font-mono, monospace);
font-size: 0.65rem;
font-variant-numeric: tabular-nums;
line-height: 1;
white-space: nowrap;
pointer-events: none;
}
.wrn-chart__ticks > span { left: 0; width: calc(44 / 600 * 100% - 0.4rem); text-align: right; transform: translateY(-50%); }
.wrn-chart__labels > span {
bottom: 0;
max-width: 5.5rem;
overflow: hidden;
font-family: var(--wrn-font-sans, inherit);
font-size: 0.72rem;
text-overflow: ellipsis;
transform: translate(-50%, -0.35rem);
}
.wrn-chart__hits { position: absolute; inset: 0; }
.wrn-chart__hit {
position: absolute;
padding: 0;
border: 0;
border-radius: calc(var(--wrn-radius-sm) - 2px);
background: transparent;
cursor: pointer;
}
.wrn-chart__hit:hover,
.wrn-chart__hit:focus-visible { background: color-mix(in srgb, var(--wrn-color-text) 4%, transparent); outline: none; }
.wrn-chart__hit:focus-visible { box-shadow: inset 0 0 0 1.5px var(--wrn-color-focus, var(--wrn-chart-color)); }
.wrn-chart__dot {
position: absolute;
left: 50%;
width: 0.5rem;
height: 0.5rem;
border-radius: 999px;
background: var(--wrn-chart-color);
box-shadow: 0 0 0 2px var(--wrn-color-surface);
transform: translate(-50%, -50%);
transition: transform var(--wrn-motion-fast);
}
.wrn-chart__hit:is(:hover, :focus-visible) .wrn-chart__dot { transform: translate(-50%, -50%) scale(1.4); }
.wrn-chart__value {
position: absolute;
left: 50%;
color: var(--wrn-color-text-muted, var(--wrn-color-text));
font-family: var(--wrn-font-mono, monospace);
font-size: 0.68rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
transform: translate(-50%, calc(-100% - 0.3rem));
pointer-events: none;
}
.wrn-chart__tip {
position: absolute;
z-index: 3;
left: 50%;
display: grid;
gap: 0.1rem;
width: max-content;
padding: 0.375rem 0.55rem;
border: 1px solid rgb(255 255 255 / 0.08);
border-radius: var(--wrn-radius-sm, 0.5rem);
color: #f4f5f7;
background: #16181d;
box-shadow: 0 8px 24px -4px rgb(0 0 0 / 0.35);
text-align: left;
opacity: 0;
transform: translate(-50%, calc(-100% - 0.75rem));
transition: opacity var(--wrn-motion-fast);
pointer-events: none;
}
.wrn-chart__tip small { color: rgb(244 245 247 / 0.7); font-size: 0.68rem; }
.wrn-chart__tip strong { font-family: var(--wrn-font-mono, monospace); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.wrn-chart__hit:is(:hover, :focus-visible) .wrn-chart__tip { opacity: 1; }
.wrn-chart__hit:is(:hover, :focus-visible) .wrn-chart__value { opacity: 0; }
.wrn-chart__empty {
position: absolute;
inset: 0;
display: grid;
place-items: center;
margin: 0;
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
font-size: 0.8125rem;
}
.wrn-chart__legend { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.wrn-chart__legend button {
display: inline-flex;
align-items: center;
gap: 0.375rem;
min-height: 1.75rem;
padding: 0 0.6rem;
border: 1px solid var(--wrn-color-border);
border-radius: 999px;
color: var(--wrn-color-text);
background: var(--wrn-color-surface);
font: inherit;
font-size: 0.75rem;
font-weight: 550;
cursor: pointer;
transition: opacity 120ms ease, background-color 120ms ease;
}
.wrn-chart__legend button:hover { background: var(--wrn-color-surface-soft); }
.wrn-chart__legend button > span { width: 0.5rem; height: 0.5rem; border-radius: 2px; background: var(--wrn-chart-color); }
.wrn-chart__legend button[aria-pressed="false"] { color: var(--wrn-color-text-subtle, var(--wrn-color-muted)); text-decoration: line-through; }
.wrn-chart__legend button[aria-pressed="false"] > span { background: var(--wrn-color-border-strong, var(--wrn-color-border)); }
@media (prefers-reduced-motion: reduce) {
.wrn-chart__dot, .wrn-chart__tip, .wrn-chart__bar { transition: none; }
}
.wrn-chart { --wrn-chart-color:var(--wrn-color-primary); display:grid; gap:0.875rem; min-width:0; margin:0; padding:1rem 1.125rem; border:1px solid var(--wrn-color-border); border-radius:var(--wrn-radius); color:var(--wrn-color-text); background:var(--wrn-color-surface); }
.wrn-chart[data-color="secondary"] { --wrn-chart-color:var(--wrn-color-secondary); }
.wrn-chart[data-color="success"] { --wrn-chart-color:var(--wrn-color-success); }
.wrn-chart[data-color="info"] { --wrn-chart-color:var(--wrn-color-info); }
.wrn-chart[data-color="warning"] { --wrn-chart-color:var(--wrn-color-warning); }
.wrn-chart[data-color="danger"] { --wrn-chart-color:var(--wrn-color-danger); }
.wrn-chart__header { display:grid; gap:0.2rem; }
.wrn-chart__header > strong { font-size:0.9375rem; font-weight:600; }
.wrn-chart__header > span,.wrn-chart__status { color:var(--wrn-color-text-muted); font-size:0.8125rem; }
.wrn-chart__stage { position:relative; min-width:0; width:100%; }
.wrn-chart__stage canvas { display:block; max-width:100%; }
.wrn-chart__status { margin:0; }
.wrn-chart__status:empty { display:none; }
.wrn-chart__accessible { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
}
}
packages/ui/components/ChatBubble.wrn
+18 -18
View File
@@ -89,30 +89,30 @@ component ChatBubble {
role="log"
aria-label="{ariaLabel}"
aria-live="polite"
>
data-wrn-owner="ChatBubble" data-wrn-part="root" data-wrn-component="ChatBubble" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if title || description}
<header class="wrn-next__chat-header">
{#if title}<h3>{title}</h3>{/if}
<header class="wrn-next__chat-header" data-wrn-owner="ChatBubble" data-wrn-part="chatHeader" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if title}<h3 data-wrn-owner="ChatBubble" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{title}</h3>{/if}
{#if description}<p>{description}</p>{/if}
</header>
{/if}
{#if items.length}
<div class="wrn-next__chat-thread">
<div class="wrn-next__chat-thread" data-wrn-owner="ChatBubble" data-wrn-part="chatThread" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#each items as item, index}
<article
class="wrn-next__chat-message"
data-direction="{messageDirection(item)}"
aria-label="{messageDirection(item) === 'outgoing' ? 'Sent message' : 'Received message'}"
>
<div class="wrn-next__chat-row">
data-wrn-owner="ChatBubble" data-wrn-part="chatMessage" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<div class="wrn-next__chat-row" data-wrn-owner="ChatBubble" data-wrn-part="chatRow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if showAvatars && (item.avatarSrc || item.avatarFallback)}
<button
class="wrn-next__chat-avatar"
type="button"
aria-label="{item.avatarLabel || item.author || 'Message author'}"
@click="selectAvatar(event, item, index)"
>
data-wrn-owner="ChatBubble" data-wrn-part="chatAvatar" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if item.avatarSrc}
<img src="{item.avatarSrc}" alt="{item.avatarAlt || ''}" />
{:else}
@@ -127,8 +127,8 @@ component ChatBubble {
tabindex="0"
@click="selectMessage(item, index)"
@keydown="if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); selectMessage(item, index) }"
>
{#if item.title}<h4>{item.title}</h4>{/if}
data-wrn-owner="ChatBubble" data-wrn-part="chatContent" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if item.title}<h4 data-wrn-owner="ChatBubble" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.title}</h4>{/if}
{#if item.text}<p>{item.text}</p>{/if}
{#if item.bullets && item.bullets.length}
<ul>
@@ -141,7 +141,7 @@ component ChatBubble {
<a
href="{link.href || '#'}"
@click="selectLink(event, link, item, index)"
>{link.label}</a>
data-wrn-owner="ChatBubble" data-wrn-part="link" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{link.label}</a>
{/each}
</nav>
{/if}
@@ -149,25 +149,25 @@ component ChatBubble {
</div>
{#if showMetadata && (item.timestamp || item.status || item.receipt || item.actionLabel)}
<footer class="wrn-next__chat-meta" data-tone="{item.statusTone || (receipt(item) === 'failed' || receipt(item) === 'error' ? 'danger' : 'muted')}" data-receipt="{receipt(item)}">
<footer class="wrn-next__chat-meta" data-tone="{item.statusTone || (receipt(item) === 'failed' || receipt(item) === 'error' ? 'danger' : 'muted')}" data-receipt="{receipt(item)}" data-wrn-owner="ChatBubble" data-wrn-part="chatMeta" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if item.statusIcon}<span class="{item.statusIcon}" aria-hidden="true"></span>{/if}
{#if item.status && (!receipt(item) || receipt(item) === "failed" || receipt(item) === "error")}<span class="wrn-next__chat-status">{item.status}</span>{/if}
{#if item.status && (!receipt(item) || receipt(item) === "failed" || receipt(item) === "error")}<span class="wrn-next__chat-status" data-wrn-owner="ChatBubble" data-wrn-part="chatStatus" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.status}</span>{/if}
{#if item.timestamp}<time datetime="{item.datetime || ''}">{item.timestamp}</time>{/if}
{#if receipt(item)}
<span class="wrn-next__chat-receipt" data-receipt="{receipt(item)}" role="img" aria-label="{receiptLabel(item)}" title="{receiptLabel(item)}">
<span class="wrn-next__chat-receipt" data-receipt="{receipt(item)}" role="img" aria-label="{receiptLabel(item)}" title="{receiptLabel(item)}" data-wrn-owner="ChatBubble" data-wrn-part="chatReceipt" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if receipt(item) === "sending"}
<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><circle cx="8" cy="8" r="6"></circle><path d="M8 4.75V8l2 1.5"></path></svg>
<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true" data-wrn-owner="ChatBubble" data-wrn-part="vector" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><circle cx="8" cy="8" r="6"></circle><path d="M8 4.75V8l2 1.5"></path></svg>
{:else if receipt(item) === "sent"}
<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3.5 8.5l3 3 6-7"></path></svg>
<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-wrn-owner="ChatBubble" data-wrn-part="vector" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><path d="M3.5 8.5l3 3 6-7"></path></svg>
{:else if receipt(item) === "delivered" || receipt(item) === "read"}
<svg viewBox="0 0 20 16" width="17" height="14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1.5 8.5l3 3 6-7"></path><path d="M8.5 11.5l.5.5 6-7.5"></path></svg>
<svg viewBox="0 0 20 16" width="17" height="14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-wrn-owner="ChatBubble" data-wrn-part="vector" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><path d="M1.5 8.5l3 3 6-7"></path><path d="M8.5 11.5l.5.5 6-7.5"></path></svg>
{:else}
<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true"><circle cx="8" cy="8" r="6"></circle><path d="M8 4.75v3.75"></path><path d="M8 11h.01"></path></svg>
<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true" data-wrn-owner="ChatBubble" data-wrn-part="vector" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><circle cx="8" cy="8" r="6"></circle><path d="M8 4.75v3.75"></path><path d="M8 11h.01"></path></svg>
{/if}
</span>
{/if}
{#if item.actionLabel}
<button type="button" @click="selectAction(event, item, index)">
<button type="button" @click="selectAction(event, item, index)" data-wrn-owner="ChatBubble" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{item.actionLabel}
</button>
{/if}
packages/ui/components/Clipboard.wrn
+9 -9
View File
@@ -56,14 +56,14 @@ component Clipboard {
data-size='{size}'
data-color='{color}'
class='wrn-clipboard {class}'
>
{#if title}<strong class="wrn-clipboard__title">{title}</strong>{/if}
{#if description}<p class="wrn-clipboard__description">{description}</p>{/if}
<div class="wrn-clipboard__control">
data-wrn-owner="Clipboard" data-wrn-part="root" data-wrn-component="Clipboard" data-wrn-axis-size='{size}' data-wrn-axis-color='{color}'>
{#if title}<strong class="wrn-clipboard__title" data-wrn-owner="Clipboard" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{title}</strong>{/if}
{#if description}<p class="wrn-clipboard__description" data-wrn-owner="Clipboard" data-wrn-part="description" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{description}</p>{/if}
<div class="wrn-clipboard__control" data-wrn-owner="Clipboard" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#if code}
<code class="wrn-clipboard__value">{value}</code>
<code class="wrn-clipboard__value" data-wrn-owner="Clipboard" data-wrn-part="value" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{value}</code>
{:else}
<span class="wrn-clipboard__value">{value}</span>
<span class="wrn-clipboard__value" data-wrn-owner="Clipboard" data-wrn-part="value" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{value}</span>
{/if}
<button
type="button"
@@ -71,9 +71,9 @@ component Clipboard {
disabled='{disabled}'
aria-label='{status === "success" ? copiedLabel : status === "error" ? errorLabel : label}'
@click='copyValue(event)'
>
<span class="icon-[lucide--copy] wrn-clipboard__icon" data-show='status !== "success"' aria-hidden="true"></span>
<span class="icon-[lucide--check] wrn-clipboard__icon" data-show='status === "success"' aria-hidden="true"></span>
data-wrn-owner="Clipboard" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<span class="icon-[lucide--copy] wrn-clipboard__icon" data-show='status !== "success"' aria-hidden="true" data-wrn-owner="Clipboard" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></span>
<span class="icon-[lucide--check] wrn-clipboard__icon" data-show='status === "success"' aria-hidden="true" data-wrn-owner="Clipboard" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></span>
{#if !iconOnly}<span>{status === "success" ? copiedLabel : status === "error" ? errorLabel : label}</span>{/if}
</button>
</div>
packages/ui/components/Collapse.wrn
+9 -9
View File
@@ -54,11 +54,11 @@ size: string = "default"
class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--collapse {class}"
data-mode="{mode}"
aria-label="{ariaLabel}"
>
data-wrn-owner="Collapse" data-wrn-part="root" data-wrn-component="Collapse" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#each items as item, index}
<article class="wrn-next__collapse-item" data-open="{isOpen(index)}">
<article class="wrn-next__collapse-item" data-open="{isOpen(index)}" data-wrn-owner="Collapse" data-wrn-part="item" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#if mode === "inline" && item.preview}
<p class="wrn-next__collapse-preview">{item.preview}</p>
<p class="wrn-next__collapse-preview" data-wrn-owner="Collapse" data-wrn-part="preview" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{item.preview}</p>
{/if}
<button
@@ -68,9 +68,9 @@ size: string = "default"
aria-controls="{item.id || 'collapse-panel-' + index}"
disabled="{item.disabled}"
@click="toggleItem(index, item)"
>
data-wrn-owner="Collapse" data-wrn-part="trigger" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<span>{isOpen(index) && (mode === "inline" || item.closeLabel) ? (item.closeLabel || "Read less") : item.label}</span>
<span class="icon-[lucide--chevron-down] wrn-next__collapse-chevron" aria-hidden="true"></span>
<span class="icon-[lucide--chevron-down] wrn-next__collapse-chevron" aria-hidden="true" data-wrn-owner="Collapse" data-wrn-part="chevron" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></span>
</button>
<div
@@ -79,13 +79,13 @@ size: string = "default"
data-open="{isOpen(index)}"
aria-hidden="{isOpen(index) ? 'false' : 'true'}"
inert="{!isOpen(index)}"
>
<div class="wrn-next__collapse-content">
{#if item.title}<h4>{item.title}</h4>{/if}
data-wrn-owner="Collapse" data-wrn-part="panel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<div class="wrn-next__collapse-content" data-wrn-owner="Collapse" data-wrn-part="content" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#if item.title}<h4 data-wrn-owner="Collapse" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{item.title}</h4>{/if}
{#if item.content}<p>{item.content}</p>{/if}
{#if item.links && item.links.length}
<nav aria-label="Related links">
{#each item.links as link}<a href="{link.href || '#'}">{link.label}</a>{/each}
{#each item.links as link}<a href="{link.href || '#'}" data-wrn-owner="Collapse" data-wrn-part="link" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{link.label}</a>{/each}
</nav>
{/if}
</div>
packages/ui/components/ColorPicker.wrn
+4 -4
View File
@@ -33,10 +33,10 @@ component ColorPicker {
client function preventReadonly(sourceEvent) { if (readonly) sourceEvent.preventDefault() }
}
view {
<div {...attrs} class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--field wrn-component--color-picker {class}" data-variant="{variant}" data-inline="{inline}" data-invalid="{error ? 'true' : 'false'}">
<div class="wrn-next__field-heading"><label class="{hiddenLabel ? 'wrn-next__sr-only' : ''}" for="{id || name}">{label}</label>{#if cornerHint}<span class="wrn-next__field-hint">{cornerHint}</span>{/if}</div>
<div class="wrn-next__color-control" data-icon-position="{iconPosition}">{#if icon}<span class="{icon}" aria-hidden="true"></span>{/if}<input id="{id || name}" type="color" name="{name}" value="{currentValue}" disabled="{disabled}" required="{required}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" @click="preventReadonly(event)" @input="emitField('input', event)" @change="emitField('change', event)" @focus="emitField('focus', event)" @blur="emitField('blur', event)" /><output for="{id || name}">{currentValue}</output></div>
{#if helperText}<small class="wrn-next__field-help">{helperText}</small>{/if}<small class="wrn-next__field-error" data-error="{name}">{error}</small>
<div {...attrs} class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--field wrn-component--color-picker {class}" data-variant="{variant}" data-inline="{inline}" data-invalid="{error ? 'true' : 'false'}" data-wrn-owner="ColorPicker" data-wrn-part="root" data-wrn-component="ColorPicker" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<div class="wrn-next__field-heading" data-wrn-owner="ColorPicker" data-wrn-part="heading" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><label class="{hiddenLabel ? 'wrn-next__sr-only' : ''}" for="{id || name}" data-wrn-owner="ColorPicker" data-wrn-part="srOnly" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{label}</label>{#if cornerHint}<span class="wrn-next__field-hint" data-wrn-owner="ColorPicker" data-wrn-part="hint" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{cornerHint}</span>{/if}</div>
<div class="wrn-next__color-control" data-icon-position="{iconPosition}" data-wrn-owner="ColorPicker" data-wrn-part="colorControl" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{#if icon}<span class="{icon}" aria-hidden="true"></span>{/if}<input id="{id || name}" type="color" name="{name}" value="{currentValue}" disabled="{disabled}" required="{required}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" @click="preventReadonly(event)" @input="emitField('input', event)" @change="emitField('change', event)" @focus="emitField('focus', event)" @blur="emitField('blur', event)" data-wrn-owner="ColorPicker" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"/><output for="{id || name}">{currentValue}</output></div>
{#if helperText}<small class="wrn-next__field-help" data-wrn-owner="ColorPicker" data-wrn-part="help" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{helperText}</small>{/if}<small class="wrn-next__field-error" data-error="{name}" data-wrn-owner="ColorPicker" data-wrn-part="error" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{error}</small>
</div>
}
packages/ui/components/Columns.wrn
+1 -1
View File
@@ -38,7 +38,7 @@ component Columns {
data-gap='{gap}'
data-max-width='{maxWidth}'
data-columns='{columnCount()}'
>
data-wrn-owner="Columns" data-wrn-part="root" data-wrn-component="Columns" data-wrn-axis-size='{size}' data-wrn-axis-color='{color}'>
<slot></slot>
</div>
}
packages/ui/components/Combobox.wrn
+23 -23
View File
@@ -241,11 +241,11 @@ component ComboBox {
data-wrn-select
data-wrn-combobox
@focusout="if (!event.currentTarget.contains(event.relatedTarget)) { closeDropdown() }"
>
<label id="{name}-label" for="{name}-input">{label}</label>
data-wrn-owner="ComboBox" data-wrn-part="root" data-wrn-component="ComboBox" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<label id="{name}-label" for="{name}-input" data-wrn-owner="ComboBox" data-wrn-part="label" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{label}</label>
<div class="wrn-next__select-control wrn-next__combobox-control">
<span class="wrn-next__search-icon icon-[lucide--search]" aria-hidden="true"></span>
<div class="wrn-next__select-control wrn-next__combobox-control" data-wrn-owner="ComboBox" data-wrn-part="selectControl" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<span class="wrn-next__search-icon icon-[lucide--search]" aria-hidden="true" data-wrn-owner="ComboBox" data-wrn-part="searchIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></span>
<input
{...attrs}
id="{name}-input"
@@ -268,7 +268,7 @@ component ComboBox {
@click="openDropdown()"
@input="updateQuery(event)"
@keydown="handleKeydown(event)"
/>
data-wrn-owner="ComboBox" data-wrn-part="selectTrigger" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"/>
<button
type="button"
@@ -277,7 +277,7 @@ component ComboBox {
aria-label="{clearLabel}"
title="{clearLabel}"
@click="clearValue(event)"
>
data-wrn-owner="ComboBox" data-wrn-part="clearSelect" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<span class="icon-[lucide--x]" aria-hidden="true"></span>
</button>
<button
@@ -287,8 +287,8 @@ component ComboBox {
tabindex="-1"
disabled="{disabled}"
@click="toggle()"
>
<span class="wrn-next__select-chevron icon-[lucide--chevrons-up-down]" aria-hidden="true"></span>
data-wrn-owner="ComboBox" data-wrn-part="comboboxToggle" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<span class="wrn-next__select-chevron icon-[lucide--chevrons-up-down]" aria-hidden="true" data-wrn-owner="ComboBox" data-wrn-part="selectChevron" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></span>
</button>
</div>
@@ -296,12 +296,12 @@ component ComboBox {
class="wrn-next__select-dropdown {fixed ? 'wrn-next__select-dropdown--fixed' : ''}"
data-show="shouldShowDropdown()"
style="{shouldShowDropdown() ? '' : 'display: none'}"
>
data-wrn-owner="ComboBox" data-wrn-part="selectDropdown" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<div
class="wrn-next__select-message"
data-show="remote && query.length !== 0 && query.length < minSearchLength"
>Enter at least {minSearchLength} characters.</div>
<div class="wrn-next__select-message" data-show="loading" role="status">
data-wrn-owner="ComboBox" data-wrn-part="selectMessage" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">Enter at least {minSearchLength} characters.</div>
<div class="wrn-next__select-message" data-show="loading" role="status" data-wrn-owner="ComboBox" data-wrn-part="selectMessage" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<i class="wrn-spinner wrn-spinner--inline" aria-hidden="true"></i>
{loadingLabel}
</div>
@@ -311,10 +311,10 @@ component ComboBox {
class="wrn-next__select-list"
data-show="(!remote || (query.length === 0 && remoteAutoLoad) || query.length >= minSearchLength) && !loading"
role="listbox"
>
data-wrn-owner="ComboBox" data-wrn-part="selectList" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#each groups as group}
<div class="wrn-next__option-group" role="group" aria-label="{group.label}" data-show="visibleOptions(group.options || []).length > 0">
<div class="wrn-next__group-label">{group.label}</div>
<div class="wrn-next__option-group" role="group" aria-label="{group.label}" data-show="visibleOptions(group.options || []).length > 0" data-wrn-owner="ComboBox" data-wrn-part="optionGroup" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<div class="wrn-next__group-label" data-wrn-owner="ComboBox" data-wrn-part="groupLabel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{group.label}</div>
{#each group.options || [] as option}
<button
type="button"
@@ -327,12 +327,12 @@ component ComboBox {
@mouseenter="activeIndex = optionIndex(option)"
@mousedown="event.preventDefault()"
@click="chooseOption(option)"
>
data-wrn-owner="ComboBox" data-wrn-part="selectOption" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#if optionTemplate === "icon" && option.icon}<i class="{option.icon}" aria-hidden="true"></i>{/if}
{#if optionTemplate === "avatar" && option.avatar}<img src="{option.avatar}" alt="" />{/if}
{#if optionTemplate === "color" && option.color}<i class="wrn-next__color-dot" style="--option-color: {option.color}"></i>{/if}
{#if optionTemplate === "color" && option.color}<i class="wrn-next__color-dot" style="--option-color: {option.color}" data-wrn-owner="ComboBox" data-wrn-part="colorDot" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></i>{/if}
<span><strong>{option.label}</strong>{#if option.description}<small>{option.description}</small>{/if}</span>
<i class="wrn-next__check icon-[lucide--check]" data-show="isSelected(option)" aria-hidden="true"></i>
<i class="wrn-next__check icon-[lucide--check]" data-show="isSelected(option)" aria-hidden="true" data-wrn-owner="ComboBox" data-wrn-part="check" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></i>
</button>
{/each}
</div>
@@ -350,12 +350,12 @@ component ComboBox {
@mouseenter="activeIndex = optionIndex(option)"
@mousedown="event.preventDefault()"
@click="chooseOption(option)"
>
data-wrn-owner="ComboBox" data-wrn-part="selectOption" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#if optionTemplate === "icon" && option.icon}<i class="{option.icon}" aria-hidden="true"></i>{/if}
{#if optionTemplate === "avatar" && option.avatar}<img src="{option.avatar}" alt="" />{/if}
{#if optionTemplate === "color" && option.color}<i class="wrn-next__color-dot" style="--option-color: {option.color}"></i>{/if}
{#if optionTemplate === "color" && option.color}<i class="wrn-next__color-dot" style="--option-color: {option.color}" data-wrn-owner="ComboBox" data-wrn-part="colorDot" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></i>{/if}
<span><strong>{option.label}</strong>{#if option.description}<small>{option.description}</small>{/if}</span>
<i class="wrn-next__check icon-[lucide--check]" data-show="isSelected(option)" aria-hidden="true"></i>
<i class="wrn-next__check icon-[lucide--check]" data-show="isSelected(option)" aria-hidden="true" data-wrn-owner="ComboBox" data-wrn-part="check" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></i>
</button>
{/each}
</div>
@@ -365,7 +365,7 @@ component ComboBox {
class="wrn-next__load-more"
data-wrn-select-load-more
data-show="infinite && hasMore"
>{loadMoreLabel}</button>
data-wrn-owner="ComboBox" data-wrn-part="loadMore" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{loadMoreLabel}</button>
</div>
{#if !allowCustomValue}
@@ -376,7 +376,7 @@ component ComboBox {
required="{required}"
data-error="{name}"
aria-describedby="{validationMessage ? `${name}-validation` : helpText ? `${name}-help` : ''}"
/>
data-wrn-owner="ComboBox" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"/>
{/if}
{#if helpText && !validationMessage}<small id="{name}-help">{helpText}</small>{/if}
@@ -384,7 +384,7 @@ component ComboBox {
id="{name}-validation"
class="wrn-next__validation"
data-error="{name}"
>{validationMessage}</small>
data-wrn-owner="ComboBox" data-wrn-part="validation" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{validationMessage}</small>
</div>
<SelectStyles hidden />
}
packages/ui/components/Confetti.wrn
+3 -3
View File
@@ -78,11 +78,11 @@ component Confetti {
}
view {
<div {...attrs} data-ui-component="Confetti" data-autostart="{autoStart}" data-running='{running ? "true" : "false"}' class='wrn-confetti {class}' style='--wrn-confetti-duration:{duration}ms'>
<button type="button" class="wrn-confetti__trigger" disabled='{disabled}' @click='start(event)'>
<div {...attrs} data-ui-component="Confetti" data-autostart="{autoStart}" data-running='{running ? "true" : "false"}' class='wrn-confetti {class}' style='--wrn-confetti-duration:{duration}ms' data-wrn-owner="Confetti" data-wrn-part="root" data-wrn-component="Confetti" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<button type="button" class="wrn-confetti__trigger" disabled='{disabled}' @click='start(event)' data-wrn-owner="Confetti" data-wrn-part="trigger" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<span class="icon-[lucide--party-popper]" aria-hidden="true"></span><span>{label}</span>
</button>
<canvas class="wrn-confetti__canvas" aria-hidden="true"></canvas><div class="wrn-confetti__burst" aria-hidden="true">
<canvas class="wrn-confetti__canvas" aria-hidden="true" data-wrn-owner="Confetti" data-wrn-part="canvas" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></canvas><div class="wrn-confetti__burst" aria-hidden="true" data-wrn-owner="Confetti" data-wrn-part="burst" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#each pieces() as piece, index}<i style='{pieceStyle(index)}'></i>{/each}
</div>
<slot />
packages/ui/components/Container.wrn
+1 -1
View File
@@ -32,7 +32,7 @@ component Container {
}
view {
<div
<div data-wrn-owner="Container" data-wrn-part="root" data-wrn-component="Container" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"
{...attrs}
data-ui-component="Container"
class='wrn-container {class}'
packages/ui/components/ContextMenu.wrn
+17 -17
View File
@@ -143,7 +143,7 @@ component ContextMenu {
}
view {
<div
<div data-wrn-owner="ContextMenu" data-wrn-part="root" data-wrn-component="ContextMenu" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}"
{...attrs}
data-ui-component="ContextMenu"
data-open='{open || visible ? "true" : "false"}'
@@ -157,7 +157,7 @@ component ContextMenu {
style='--wrn-context-x:{positionX}px;--wrn-context-y:{positionY}px;--wrn-context-min-width:{minWidth};--wrn-context-max-width:{maxWidth};'
@keydown='handleKeydown(event)'
>
<div
<div data-wrn-owner="ContextMenu" data-wrn-part="trigger" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}"
class="wrn-context-menu__trigger"
tabindex='{disabled ? "-1" : "0"}'
aria-haspopup="menu"
@@ -170,7 +170,7 @@ component ContextMenu {
</div>
{#if closeOnOutside}
<button
<button data-wrn-owner="ContextMenu" data-wrn-part="dismissLayer" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}"
type="button"
class="wrn-context-menu__dismiss-layer"
data-show='{open || visible}'
@@ -179,7 +179,7 @@ component ContextMenu {
></button>
{/if}
<div
<div data-wrn-owner="ContextMenu" data-wrn-part="panel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}"
class="wrn-context-menu__panel"
data-wrn-anchored="true"
data-show='{open || visible}'
@@ -187,7 +187,7 @@ component ContextMenu {
aria-label='{label}'
>
{#if title || description}
<div class="wrn-context-menu__header">
<div data-wrn-owner="ContextMenu" data-wrn-part="header" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}" class="wrn-context-menu__header">
{#if title}
<strong>{title}</strong>
{/if}
@@ -199,14 +199,14 @@ component ContextMenu {
<slot name="header"></slot>
<div class="wrn-context-menu__items">
<div data-wrn-owner="ContextMenu" data-wrn-part="items" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}" class="wrn-context-menu__items">
{#each items as item, itemIndex}
{#if item.type === "divider"}
<div class="wrn-context-menu__divider" role="separator"></div>
<div data-wrn-owner="ContextMenu" data-wrn-part="divider" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}" class="wrn-context-menu__divider" role="separator"></div>
{:else if item.type === "header"}
<div class="wrn-context-menu__section-label">{item.label || item.title}</div>
<div data-wrn-owner="ContextMenu" data-wrn-part="sectionLabel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}" class="wrn-context-menu__section-label">{item.label || item.title}</div>
{:else if item.href}
<a
<a data-wrn-owner="ContextMenu" data-wrn-part="item" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}"
href='{item.href}'
target='{item.target || ""}'
rel='{item.external || item.target === "_blank" ? "noopener noreferrer" : (item.rel || "")}'
@@ -219,9 +219,9 @@ component ContextMenu {
@click='chooseItem(item, itemIndex, event)'
>
{#if item.icon}
<span class='wrn-context-menu__icon {item.icon}' aria-hidden="true"></span>
<span data-wrn-owner="ContextMenu" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}" class='wrn-context-menu__icon {item.icon}' aria-hidden="true"></span>
{/if}
<span class="wrn-context-menu__copy">
<span data-wrn-owner="ContextMenu" data-wrn-part="copy" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}" class="wrn-context-menu__copy">
<strong>{item.label || item.title}</strong>
{#if item.description}
<small>{item.description}</small>
@@ -230,13 +230,13 @@ component ContextMenu {
{#if item.shortcut}
<kbd>{item.shortcut}</kbd>
{:else if item.checked || item.selected}
<span class="icon-[lucide--check] wrn-context-menu__status" aria-hidden="true"></span>
<span data-wrn-owner="ContextMenu" data-wrn-part="status" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}" class="icon-[lucide--check] wrn-context-menu__status" aria-hidden="true"></span>
{:else if item.external}
<span class="icon-[lucide--arrow-up-right] wrn-context-menu__status" aria-hidden="true"></span>
<span data-wrn-owner="ContextMenu" data-wrn-part="status" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}" class="icon-[lucide--arrow-up-right] wrn-context-menu__status" aria-hidden="true"></span>
{/if}
</a>
{:else}
<button
<button data-wrn-owner="ContextMenu" data-wrn-part="item" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}"
type="button"
role="menuitem"
data-context-menu-item
@@ -247,9 +247,9 @@ component ContextMenu {
@click='chooseItem(item, itemIndex, event)'
>
{#if item.icon}
<span class='wrn-context-menu__icon {item.icon}' aria-hidden="true"></span>
<span data-wrn-owner="ContextMenu" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}" class='wrn-context-menu__icon {item.icon}' aria-hidden="true"></span>
{/if}
<span class="wrn-context-menu__copy">
<span data-wrn-owner="ContextMenu" data-wrn-part="copy" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}" class="wrn-context-menu__copy">
<strong>{item.label || item.title}</strong>
{#if item.description}
<small>{item.description}</small>
@@ -258,7 +258,7 @@ component ContextMenu {
{#if item.shortcut}
<kbd>{item.shortcut}</kbd>
{:else if item.checked || item.selected}
<span class="icon-[lucide--check] wrn-context-menu__status" aria-hidden="true"></span>
<span data-wrn-owner="ContextMenu" data-wrn-part="status" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}" class="icon-[lucide--check] wrn-context-menu__status" aria-hidden="true"></span>
{/if}
</button>
{/if}
packages/ui/components/CustomScrollbar.wrn
+1 -1
View File
@@ -45,7 +45,7 @@ component CustomScrollbar {
data-size='{size}'
data-axis='{axis}'
style='--scrollbar-thickness:{trackSize()}px;--scrollbar-radius:{radius};max-height:{maxHeight};'
>
data-wrn-owner="CustomScrollbar" data-wrn-part="root" data-wrn-component="CustomScrollbar" data-wrn-axis-color='{color}' data-wrn-axis-size='{size}' data-wrn-axis-radius="{radius}">
<slot />
</div>
}
packages/ui/components/DataMap.wrn
+1 -1
View File
@@ -19,7 +19,7 @@ component DataMap {
shared function shade(item) { return Math.max(6, Math.min(35, (Number(item.value) || 0) / 3)) + "%" }
}
view {
<section {...attrs} class="wrn-data-map {class}">{#if title}<strong>{title}</strong>{/if}{#if description}<p>{description}</p>{/if}<div class="wrn-data-map__grid" role="group" aria-label="{title}">{#each items as item}<button type="button" aria-pressed="{selectedLabel === item.label}" style="--heat:{shade(item)}" @click="choose(item)"><strong>{item.label}</strong><span>{item.value}</span></button>{/each}</div><small>Lower activity <span class="wrn-data-map__legend"></span> Higher activity</small><slot /></section>
<section {...attrs} class="wrn-data-map {class}" data-wrn-owner="DataMap" data-wrn-part="root" data-wrn-component="DataMap" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{#if title}<strong>{title}</strong>{/if}{#if description}<p>{description}</p>{/if}<div class="wrn-data-map__grid" role="group" aria-label="{title}" data-wrn-owner="DataMap" data-wrn-part="grid" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{#each items as item}<button type="button" aria-pressed="{selectedLabel === item.label}" style="--heat:{shade(item)}" @click="choose(item)" data-wrn-owner="DataMap" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><strong>{item.label}</strong><span>{item.value}</span></button>{/each}</div><small>Lower activity <span class="wrn-data-map__legend" data-wrn-owner="DataMap" data-wrn-part="legend" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span> Higher activity</small><slot /></section>
}
style {
packages/ui/components/DataTable.wrn
+40 -40
View File
@@ -738,20 +738,20 @@ component DataTable {
class='wrn-table {class}'
@window:wrnexus:datatable:rows='applyRows(event)'
@window:wrnexus:datatable:error='applyError(event)'
>
data-wrn-owner="DataTable" data-wrn-part="root" data-wrn-component="DataTable" data-wrn-axis-color='{color}' data-wrn-axis-size='{size}' data-wrn-axis-bordered='{bordered ? "true" : "false"}'>
{#if caption || description || searchable}
<div class="wrn-table__toolbar">
<div class="wrn-table__heading">
<div class="wrn-table__toolbar" data-wrn-owner="DataTable" data-wrn-part="toolbar" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<div class="wrn-table__heading" data-wrn-owner="DataTable" data-wrn-part="heading" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
{#if caption}
<h3 class="wrn-table__caption">{caption}</h3>
<h3 class="wrn-table__caption" data-wrn-owner="DataTable" data-wrn-part="caption" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">{caption}</h3>
{/if}
{#if description}
<p class="wrn-table__description">{description}</p>
<p class="wrn-table__description" data-wrn-owner="DataTable" data-wrn-part="description" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">{description}</p>
{/if}
</div>
<div class="wrn-table__actions" data-show="visibleActions().length">
<span class="wrn-table__selected-count" data-show="selectedCount()">
<div class="wrn-table__actions" data-show="visibleActions().length" data-wrn-owner="DataTable" data-wrn-part="actions" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<span class="wrn-table__selected-count" data-show="selectedCount()" data-wrn-owner="DataTable" data-wrn-part="selectedCount" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
{selectedCount()} selected
</span>
@@ -762,14 +762,14 @@ component DataTable {
data-key="entry.id"
data-tone='{entry.tone}'
@click='runAction(entry, event)'
>
data-wrn-owner="DataTable" data-wrn-part="action" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<span class='{entry.icon}' data-show="entry.icon" aria-hidden="true"></span>
<span>{entry.label}</span>
</button>
</div>
{#if searchable}
<div class="wrn-table__search">
<div class="wrn-table__search" data-wrn-owner="DataTable" data-wrn-part="search" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<svg
viewBox="0 0 24 24"
width="15"
@@ -779,7 +779,7 @@ component DataTable {
stroke-width="2"
stroke-linecap="round"
aria-hidden="true"
>
data-wrn-owner="DataTable" data-wrn-part="vector" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<circle cx="11" cy="11" r="7" />
<path d="m20 20-3.2-3.2" />
</svg>
@@ -789,18 +789,18 @@ component DataTable {
placeholder='{searchPlaceholder}'
aria-label='{searchPlaceholder}'
@input='updateQuery(event)'
/>
data-wrn-owner="DataTable" data-wrn-part="control" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}"/>
</div>
{/if}
</div>
{/if}
<div class="wrn-table__scroll">
<table class="wrn-table__table" data-show="layout !== 'comparison'">
<div class="wrn-table__scroll" data-wrn-owner="DataTable" data-wrn-part="scroll" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<table class="wrn-table__table" data-show="layout !== 'comparison'" data-wrn-owner="DataTable" data-wrn-part="table" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<thead>
<tr>
{#if selectable}
<th class="wrn-table__select-cell" scope="col">
<th class="wrn-table__select-cell" scope="col" data-wrn-owner="DataTable" data-wrn-part="selectCell" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<button
type="button"
class="wrn-table__check"
@@ -808,8 +808,8 @@ component DataTable {
aria-label="Select all rows on this page"
aria-checked='{allVisibleSelected() ? "true" : "false"}'
@click='toggleAll()'
>
<svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
data-wrn-owner="DataTable" data-wrn-part="check" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-wrn-owner="DataTable" data-wrn-part="vector" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<path d="m5 12 5 5 9-9" />
</svg>
</button>
@@ -830,7 +830,7 @@ component DataTable {
data-show="column.sortable"
data-active='{column.active}'
@click='sortBy(column.key)'
>
data-wrn-owner="DataTable" data-wrn-part="sort" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<span>{column.label}</span>
<svg
class="wrn-table__sort-icon"
@@ -843,7 +843,7 @@ component DataTable {
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
data-wrn-owner="DataTable" data-wrn-part="sortIcon" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<path d="m7 15 5 5 5-5" />
<path d="m7 9 5-5 5 5" />
</svg>
@@ -861,7 +861,7 @@ component DataTable {
@click='emitRowClick(row.raw, event)'
>
{#if selectable}
<td class="wrn-table__select-cell">
<td class="wrn-table__select-cell" data-wrn-owner="DataTable" data-wrn-part="selectCell" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<button
type="button"
class="wrn-table__check"
@@ -869,8 +869,8 @@ component DataTable {
aria-label="Select row"
aria-checked='{row.selected}'
@click='toggleRowAt(row.key, event)'
>
<svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
data-wrn-owner="DataTable" data-wrn-part="check" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-wrn-owner="DataTable" data-wrn-part="vector" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<path d="m5 12 5 5 9-9" />
</svg>
</button>
@@ -891,7 +891,7 @@ component DataTable {
</table>
<!-- Comparison layout: fields down the left, one column per record. -->
<table class="wrn-table__table wrn-table__table--comparison" data-show="layout === 'comparison'">
<table class="wrn-table__table wrn-table__table--comparison" data-show="layout === 'comparison'" data-wrn-owner="DataTable" data-wrn-part="table" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<thead>
<tr>
<th scope="col">{caption}</th>
@@ -906,7 +906,7 @@ component DataTable {
</thead>
<tbody>
<tr data-for="field in comparisonRows()" data-key="field.key">
<th scope="row" class="wrn-table__field-label">{field.label}</th>
<th scope="row" class="wrn-table__field-label" data-wrn-owner="DataTable" data-wrn-part="fieldLabel" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">{field.label}</th>
<td
data-for="cell in field.cells"
data-key="cell.key"
@@ -919,14 +919,14 @@ component DataTable {
</tbody>
</table>
<div class="wrn-table__status" data-show="loading">
<span class="wrn-table__spinner" aria-hidden="true"></span>
<div class="wrn-table__status" data-show="loading" data-wrn-owner="DataTable" data-wrn-part="status" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<span class="wrn-table__spinner" aria-hidden="true" data-wrn-owner="DataTable" data-wrn-part="spinner" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}"></span>
<span>{loadingLabel}</span>
</div>
<div class="wrn-table__status wrn-table__status--error" data-show="loadError">
<div class="wrn-table__status wrn-table__status--error" data-show="loadError" data-wrn-owner="DataTable" data-wrn-part="status" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<span>{loadError}</span>
<button type="button" class="wrn-table__action" @click='reload()'>
<button type="button" class="wrn-table__action" @click='reload()' data-wrn-owner="DataTable" data-wrn-part="action" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
{retryLabel}
</button>
</div>
@@ -934,24 +934,24 @@ component DataTable {
<div
class="wrn-table__status"
data-show="!loading && !loadError && totalCount() === 0"
>
data-wrn-owner="DataTable" data-wrn-part="status" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<span>{emptyMessage()}</span>
<button
type="button"
class="wrn-table__action"
data-show="isFiltered()"
@click='clearSearch()'
>
data-wrn-owner="DataTable" data-wrn-part="action" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
{clearSearchLabel}
</button>
</div>
</div>
<div class="wrn-table__footer" data-show="paginated && totalCount() > 0">
<p class="wrn-table__range">{rangeLabel()}</p>
<div class="wrn-table__footer" data-show="paginated && totalCount() > 0" data-wrn-owner="DataTable" data-wrn-part="footer" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<p class="wrn-table__range" data-wrn-owner="DataTable" data-wrn-part="range" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">{rangeLabel()}</p>
<div class="wrn-table__pager">
<span class="wrn-table__page-size">
<div class="wrn-table__pager" data-wrn-owner="DataTable" data-wrn-part="pager" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<span class="wrn-table__page-size" data-wrn-owner="DataTable" data-wrn-part="pageSize" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<span>Rows</span>
<!-- The shared Dropdown rather than a native select: a select
renders its list with the operating system styling, which
@@ -978,7 +978,7 @@ component DataTable {
aria-label="Previous page"
disabled='{currentPage() <= 1}'
@click='goToPage(currentPage() - 1)'
>
data-wrn-owner="DataTable" data-wrn-part="pageButton" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<svg
viewBox="0 0 24 24"
width="14"
@@ -989,7 +989,7 @@ component DataTable {
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
data-wrn-owner="DataTable" data-wrn-part="vector" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<path d="m15 18-6-6 6-6" />
</svg>
</button>
@@ -997,14 +997,14 @@ component DataTable {
<span
class="wrn-table__page-indicator"
data-show="paginationStyle !== 'numbered'"
>
data-wrn-owner="DataTable" data-wrn-part="pageIndicator" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
{currentPage()} / {pageCount()}
</span>
<span
class="wrn-table__page-numbers"
data-show="paginationStyle === 'numbered'"
>
data-wrn-owner="DataTable" data-wrn-part="pageNumbers" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<button
type="button"
class="wrn-table__page-number"
@@ -1013,7 +1013,7 @@ component DataTable {
data-active='{entry.active}'
aria-label='{"Page " + entry.number}'
@click='goToPage(entry.number)'
>
data-wrn-owner="DataTable" data-wrn-part="pageNumber" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
{entry.number}
</button>
</span>
@@ -1024,7 +1024,7 @@ component DataTable {
aria-label="Next page"
disabled='{currentPage() >= pageCount()}'
@click='goToPage(currentPage() + 1)'
>
data-wrn-owner="DataTable" data-wrn-part="pageButton" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<svg
viewBox="0 0 24 24"
width="14"
@@ -1035,7 +1035,7 @@ component DataTable {
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
data-wrn-owner="DataTable" data-wrn-part="vector" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-bordered="{bordered}">
<path d="m9 18 6-6-6-6" />
</svg>
</button>
packages/ui/components/DatePicker.wrn
+5 -5
View File
@@ -154,11 +154,11 @@ size: string = "default"
client function handleInvalid(sourceEvent) { output.invalid({ name: name, message: sourceEvent.currentTarget.validationMessage, sourceEvent: sourceEvent }) }
}
view {
<div {...attrs} class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--field wrn-next--date-picker {class}" data-variant="{variant}" data-inline="{inline}" data-invalid="{error ? 'true' : 'false'}" data-expanded="{expanded}" @keydown="calendarKeydown(event)">
<div class="wrn-next__field-heading"><label for="{id || name}">{label}</label>{#if cornerHint}<span class="wrn-next__field-hint">{cornerHint}</span>{/if}</div>
<div class="wrn-next__picker-control"><input id="{id || name}" class="wrn-next__sr-only wrn-next__picker-value" type="text" name="{name}" value="{currentValue}" required="{required}" readonly aria-hidden="true" tabindex="-1" @invalid="handleInvalid(event)" /><button type="button" class="wrn-next__date-trigger" aria-label="{label}" disabled="{disabled || readonly}" aria-haspopup="dialog" aria-expanded="{expanded}" @click="openCalendar(event)" @focus="handleFocus(event)" @blur="handleBlur(event)"><span>{displayValue()}</span><i class="icon-[lucide--calendar-days]" aria-hidden="true"></i></button>{#if currentValue && !readonly && !disabled}<button type="button" class="wrn-next__picker-clear" aria-label="Clear date" @click="clearDate(event)">×</button>{/if}</div>
<button type="button" class="wrn-picker-dismiss" aria-label="Close calendar" data-show="expanded" @click="finishDate(event)"></button><div data-show="expanded" class="wrn-next__calendar" role="dialog" aria-label="{label}"><div class="wrn-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 calendarYears() as calendarYear}<option value="{calendarYear}" selected="{String(calendarYear) === selectedYear}" data-text="calendarYear"></option>{/each}</select></label></div><div class="wrn-next__calendar-weekdays" aria-hidden="true">{#each weekdays() as weekday}<span>{weekday}</span>{/each}</div><div class="wrn-next__calendar-grid">{#each calendarDays() as day}<button type="button" data-value="{day.value}" data-today="{day.today}" style="grid-column: {day.column}" disabled="{day.disabled}" aria-label="{day.label}" aria-pressed="{day.value === currentValue.slice(0, 10)}" @click="selectDay(event)">{day.day}</button>{/each}</div>{#if type === "datetime-local"}<TimePicker label="Time" value="{selectedTime}" @change="selectedTime = payload.value; currentValue = (currentValue ? currentValue.slice(0, 10) : selectedYear + '-' + selectedMonth + '-01') + 'T' + selectedTime; output.change({ value: currentValue, name: name })" />{/if}<button type="button" class="wrn-next__date-done" disabled="{!currentValue}" @click="finishDate(event)">Done</button></div>
{#if helperText}<small class="wrn-next__field-help">{helperText}</small>{/if}<small class="wrn-next__field-error" data-error="{name}">{error}</small>
<div {...attrs} class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--field wrn-next--date-picker {class}" data-variant="{variant}" data-inline="{inline}" data-invalid="{error ? 'true' : 'false'}" data-expanded="{expanded}" @keydown="calendarKeydown(event)" data-wrn-owner="DatePicker" data-wrn-part="root" data-wrn-component="DatePicker" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<div class="wrn-next__field-heading" data-wrn-owner="DatePicker" data-wrn-part="heading" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><label for="{id || name}" data-wrn-owner="DatePicker" data-wrn-part="label" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{label}</label>{#if cornerHint}<span class="wrn-next__field-hint" data-wrn-owner="DatePicker" data-wrn-part="hint" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{cornerHint}</span>{/if}</div>
<div class="wrn-next__picker-control" data-wrn-owner="DatePicker" data-wrn-part="pickerControl" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><input id="{id || name}" class="wrn-next__sr-only wrn-next__picker-value" type="text" name="{name}" value="{currentValue}" required="{required}" readonly aria-hidden="true" tabindex="-1" @invalid="handleInvalid(event)" data-wrn-owner="DatePicker" data-wrn-part="srOnly" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"/><button type="button" class="wrn-next__date-trigger" aria-label="{label}" disabled="{disabled || readonly}" aria-haspopup="dialog" aria-expanded="{expanded}" @click="openCalendar(event)" @focus="handleFocus(event)" @blur="handleBlur(event)" data-wrn-owner="DatePicker" data-wrn-part="dateTrigger" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><span>{displayValue()}</span><i class="icon-[lucide--calendar-days]" aria-hidden="true"></i></button>{#if currentValue && !readonly && !disabled}<button type="button" class="wrn-next__picker-clear" aria-label="Clear date" @click="clearDate(event)" data-wrn-owner="DatePicker" data-wrn-part="pickerClear" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">×</button>{/if}</div>
<button type="button" class="wrn-picker-dismiss" aria-label="Close calendar" data-show="expanded" @click="finishDate(event)" data-wrn-owner="DatePicker" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></button><div data-show="expanded" class="wrn-next__calendar" role="dialog" aria-label="{label}" data-wrn-owner="DatePicker" data-wrn-part="calendar" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><div class="wrn-next__date-selectors" data-wrn-owner="DatePicker" data-wrn-part="dateSelectors" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><label data-wrn-owner="DatePicker" data-wrn-part="label" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">Month<select value="{selectedMonth}" @change="updateDate('month', event.currentTarget.value, event)" data-wrn-owner="DatePicker" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{#each months as month}<option value="{month.value}" selected="{month.value === selectedMonth}">{month.label}</option>{/each}</select></label><label data-wrn-owner="DatePicker" data-wrn-part="label" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">Year<select value="{selectedYear}" @change="updateDate('year', event.currentTarget.value, event)" data-wrn-owner="DatePicker" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{#each calendarYears() as calendarYear}<option value="{calendarYear}" selected="{String(calendarYear) === selectedYear}" data-text="calendarYear"></option>{/each}</select></label></div><div class="wrn-next__calendar-weekdays" aria-hidden="true" data-wrn-owner="DatePicker" data-wrn-part="calendarWeekdays" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{#each weekdays() as weekday}<span>{weekday}</span>{/each}</div><div class="wrn-next__calendar-grid" data-wrn-owner="DatePicker" data-wrn-part="calendarGrid" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{#each calendarDays() as day}<button type="button" data-value="{day.value}" data-today="{day.today}" style="grid-column: {day.column}" disabled="{day.disabled}" aria-label="{day.label}" aria-pressed="{day.value === currentValue.slice(0, 10)}" @click="selectDay(event)" data-wrn-owner="DatePicker" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{day.day}</button>{/each}</div>{#if type === "datetime-local"}<TimePicker label="Time" value="{selectedTime}" @change="selectedTime = payload.value; currentValue = (currentValue ? currentValue.slice(0, 10) : selectedYear + '-' + selectedMonth + '-01') + 'T' + selectedTime; output.change({ value: currentValue, name: name })" />{/if}<button type="button" class="wrn-next__date-done" disabled="{!currentValue}" @click="finishDate(event)" data-wrn-owner="DatePicker" data-wrn-part="dateDone" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">Done</button></div>
{#if helperText}<small class="wrn-next__field-help" data-wrn-owner="DatePicker" data-wrn-part="help" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{helperText}</small>{/if}<small class="wrn-next__field-error" data-error="{name}" data-wrn-owner="DatePicker" data-wrn-part="error" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{error}</small>
</div>
}
packages/ui/components/DeviceFrame.wrn
+3 -3
View File
@@ -26,9 +26,9 @@ 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="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--device-frame wrn-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="wrn-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="wrn-next__device-shell">{#if src || srcdoc}<iframe title="{frameTitle}" src="{src}" srcdoc="{srcdoc}" allow="{allow}"></iframe>{:else}<div class="wrn-next__device-content"><slot /></div>{/if}</div>
<section {...attrs} class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--device-frame wrn-next--variant-{variant} {class}" data-device="{device}" data-orientation="{currentOrientation}" data-wrn-owner="DeviceFrame" data-wrn-part="root" data-wrn-component="DeviceFrame" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<header><div>{#if title}<strong>{title}</strong>{/if}{#if description}<p>{description}</p>{/if}</div>{#if showToolbar}<div class="wrn-next__device-actions" role="toolbar" aria-label="Preview device" data-wrn-owner="DeviceFrame" data-wrn-part="deviceActions" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{#each items as item}<button type="button" aria-pressed="{item.value === device}" @click="setDevice(item.value, event)" data-wrn-owner="DeviceFrame" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.label}</button>{/each}<button type="button" aria-label="Rotate preview" @click="rotateFrame(event)" data-wrn-owner="DeviceFrame" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">↻</button></div>{/if}</header>
<div class="wrn-next__device-shell" data-wrn-owner="DeviceFrame" data-wrn-part="deviceShell" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{#if src || srcdoc}<iframe title="{frameTitle}" src="{src}" srcdoc="{srcdoc}" allow="{allow}" data-wrn-owner="DeviceFrame" data-wrn-part="embeddedFrame" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></iframe>{:else}<div class="wrn-next__device-content" data-wrn-owner="DeviceFrame" data-wrn-part="deviceContent" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><slot /></div>{/if}</div>
</section>
}
packages/ui/components/Divider.wrn
+4 -4
View File
@@ -44,10 +44,10 @@ component Divider {
data-labelled='{label ? "true" : "false"}'
role="separator"
aria-orientation='{isVertical() ? "vertical" : "horizontal"}'
>
<span class="wrn-divider__rule" aria-hidden="true"></span>
<span class="wrn-divider__label" data-show="label">{label}</span>
<span class="wrn-divider__rule" data-show="label" aria-hidden="true"></span>
data-wrn-owner="Divider" data-wrn-part="root" data-wrn-component="Divider" data-wrn-axis-size='{size}' data-wrn-axis-color='{color}' data-wrn-axis-variant='{variant}'>
<span class="wrn-divider__rule" aria-hidden="true" data-wrn-owner="Divider" data-wrn-part="rule" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
<span class="wrn-divider__label" data-show="label" data-wrn-owner="Divider" data-wrn-part="label" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{label}</span>
<span class="wrn-divider__rule" data-show="label" aria-hidden="true" data-wrn-owner="Divider" data-wrn-part="rule" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
</div>
}
packages/ui/components/DragAndDrop.wrn
+1 -1
View File
@@ -32,7 +32,7 @@ component DragAndDrop {
client function dropAt(index, sourceEvent) { sourceEvent.preventDefault(); move(draggedIndex, index, sourceEvent); draggedIndex = -1; output.drop({ index: index, items: orderedItems }) }
}
view {
<section {...attrs} class="wrn-sortable {class}">{#if title}<strong>{title}</strong>{/if}{#if description}<p>{description}</p>{/if}<ol>{#each orderedItems as item, index}<li draggable="true" @dragstart="startDrag(index, event)" @dragover="enter(event)" @dragleave="leave(event)" @dragend="finish(event)" @drop="dropAt(index, event)"><span class="icon-[lucide--grip-vertical]" aria-hidden="true"></span><span>{item.label}</span><button type="button" aria-label="Move {item.label} up" disabled="{index === 0}" @click="move(index, index - 1, event)">↑</button><button type="button" aria-label="Move {item.label} down" disabled="{index === orderedItems.length - 1}" @click="move(index, index + 1, event)">↓</button></li>{/each}</ol><slot /></section>
<section {...attrs} class="wrn-sortable {class}" data-wrn-owner="DragAndDrop" data-wrn-part="root" data-wrn-component="DragAndDrop" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{#if title}<strong>{title}</strong>{/if}{#if description}<p>{description}</p>{/if}<ol>{#each orderedItems as item, index}<li draggable="true" @dragstart="startDrag(index, event)" @dragover="enter(event)" @dragleave="leave(event)" @dragend="finish(event)" @drop="dropAt(index, event)"><span class="icon-[lucide--grip-vertical]" aria-hidden="true"></span><span>{item.label}</span><button type="button" aria-label="Move {item.label} up" disabled="{index === 0}" @click="move(index, index - 1, event)" data-wrn-owner="DragAndDrop" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">↑</button><button type="button" aria-label="Move {item.label} down" disabled="{index === orderedItems.length - 1}" @click="move(index, index + 1, event)" data-wrn-owner="DragAndDrop" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">↓</button></li>{/each}</ol><slot /></section>
}
style {
packages/ui/components/Drawer.wrn
+16 -16
View File
@@ -82,7 +82,7 @@ open: boolean = false
data-scrollable='{scrollable ? "true" : "false"}'
class='wrn-drawer {class}'
style='--drawer-duration: {duration}ms'
>
data-wrn-owner="Drawer" data-wrn-part="root" data-wrn-component="Drawer" data-wrn-axis-size='{size}' data-wrn-axis-color='{color}' data-wrn-axis-variant='{variant}'>
{#if triggerLabel}
<button
@@ -91,7 +91,7 @@ open: boolean = false
aria-haspopup="dialog"
aria-expanded='{open || visible ? "true" : "false"}'
@click='showDrawer(event)'
>
data-wrn-owner="Drawer" data-wrn-part="trigger" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if triggerIcon}
<span class='{triggerIcon}' aria-hidden="true"></span>
{/if}
@@ -99,7 +99,7 @@ open: boolean = false
</button>
{/if}
<span class="wrn-drawer__trigger-slot" @click='showDrawer(event)'>
<span class="wrn-drawer__trigger-slot" @click='showDrawer(event)' data-wrn-owner="Drawer" data-wrn-part="triggerSlot" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<slot name="trigger"></slot>
</span>
@@ -107,14 +107,14 @@ open: boolean = false
class="wrn-drawer__layer"
role="presentation"
@keydown='handleKeydown(event)'
>
data-wrn-owner="Drawer" data-wrn-part="layer" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if overlay}
<button
type="button"
class="wrn-drawer__backdrop"
aria-label='{closeLabel}'
@click='if (closeOnBackdrop) { cancelDrawer(event) }'
></button>
data-wrn-owner="Drawer" data-wrn-part="backdrop" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></button>
{/if}
<section
@@ -123,19 +123,19 @@ open: boolean = false
aria-modal="true"
aria-label='{label || title}'
tabindex="-1"
>
<div class="wrn-drawer__handle" aria-hidden="true"></div>
data-wrn-owner="Drawer" data-wrn-part="panel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<div class="wrn-drawer__handle" aria-hidden="true" data-wrn-owner="Drawer" data-wrn-part="handle" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></div>
<header class="wrn-drawer__header">
<div class="wrn-drawer__heading">
<header class="wrn-drawer__header" data-wrn-owner="Drawer" data-wrn-part="header" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<div class="wrn-drawer__heading" data-wrn-owner="Drawer" data-wrn-part="heading" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if icon}
<span class='wrn-drawer__icon {icon}' aria-hidden="true"></span>
<span class='wrn-drawer__icon {icon}' aria-hidden="true" data-wrn-owner="Drawer" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
{/if}
<div class="wrn-drawer__heading-copy">
<div class="wrn-drawer__heading-copy" data-wrn-owner="Drawer" data-wrn-part="headingCopy" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<slot name="header"></slot>
{#if title}
<h2>{title}</h2>
<h2 data-wrn-owner="Drawer" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{title}</h2>
{/if}
{#if description}
<p>{description}</p>
@@ -149,17 +149,17 @@ open: boolean = false
class="wrn-drawer__close"
aria-label='{closeLabel}'
@click='hideDrawer("close-button", event)'
>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M6 6l12 12M18 6 6 18" /></svg>
data-wrn-owner="Drawer" data-wrn-part="close" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false" data-wrn-owner="Drawer" data-wrn-part="vector" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><path d="M6 6l12 12M18 6 6 18" /></svg>
</button>
{/if}
</header>
<div class="wrn-drawer__body">
<div class="wrn-drawer__body" data-wrn-owner="Drawer" data-wrn-part="body" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<slot></slot>
</div>
<footer class="wrn-drawer__footer">
<footer class="wrn-drawer__footer" data-wrn-owner="Drawer" data-wrn-part="footer" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<slot name="footer"></slot>
</footer>
</section>
packages/ui/components/DrawflowCanvas.wrn
+16
View File
@@ -0,0 +1,16 @@
component DrawflowCanvas {
outputs { select(payload: object) connect(payload: object) move(payload: object) add(payload: object) }
props { nodes=[] palette=[] activeNode="" label="Workflow" arrangeLabel="Arrange nodes" connectLabel="Connect" color="primary" size="default"
toolbar=true
class=""
}
view {
<section {...attrs} class="wrn-drawflow {class}" data-wrnexus-runtime="drawflow" data-drawflow-editor data-flow-nodes="{JSON.stringify(nodes)}" data-active-node="{activeNode}" aria-label="{label}" @flowselect="output.select(event.detail)" @flowconnect="output.connect(event.detail)" @flowmove="output.move(event.detail)" @flowadd="output.add(event.detail)" data-wrn-owner="DrawflowCanvas" data-wrn-part="root" data-wrn-component="DrawflowCanvas" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
{#if toolbar}<div class="wrn-drawflow-toolbar" data-wrn-owner="DrawflowCanvas" data-wrn-part="toolbar" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{#each palette as item}<button type="button" draggable="true" data-flow-kind="{item.kind}" @click="output.add({kind:item.kind,sourceEvent:event})" data-wrn-owner="DrawflowCanvas" data-wrn-part="button" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{item.label}</button>{/each}<button type="button" data-flow-arrange data-wrn-owner="DrawflowCanvas" data-wrn-part="button" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{arrangeLabel}</button><button type="button" data-flow-zoom="in" aria-label="Zoom in" data-wrn-owner="DrawflowCanvas" data-wrn-part="button" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">+</button><button type="button" data-flow-zoom="out" aria-label="Zoom out" data-wrn-owner="DrawflowCanvas" data-wrn-part="button" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">−</button><button type="button" data-flow-zoom="reset" aria-label="Reset zoom" data-wrn-owner="DrawflowCanvas" data-wrn-part="button" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">100%</button></div>{/if}
<div data-drawflow-host role="group" aria-label="{label}" data-wrn-owner="DrawflowCanvas" data-wrn-part="viewport" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"></div>
</section>
}
style {
.wrn-drawflow { margin:0; border-radius:12px; }
}
}
packages/ui/components/Dropdown.wrn
+22 -22
View File
@@ -161,7 +161,7 @@ items: unknown[] = []
class='wrn-dropdown {class}'
@keydown='handleKeydown(event)'
@focusout='handleFocusout(event)'
>
data-wrn-owner="Dropdown" data-wrn-part="root" data-wrn-component="Dropdown" data-wrn-axis-size='{size}' data-wrn-axis-color='{color}' data-wrn-axis-variant='{variant}'>
<button
type="button"
class="wrn-dropdown__trigger"
@@ -170,16 +170,16 @@ items: unknown[] = []
aria-label='{ariaLabel || label}'
aria-expanded='{open || visible ? "true" : "false"}'
@click='toggleMenu(event)'
>
data-wrn-owner="Dropdown" data-wrn-part="trigger" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<slot name="trigger"></slot>
{#if icon}
<span class='wrn-dropdown__trigger-icon {icon}' aria-hidden="true"></span>
<span class='wrn-dropdown__trigger-icon {icon}' aria-hidden="true" data-wrn-owner="Dropdown" data-wrn-part="triggerIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
{/if}
{#if label}
<span class="wrn-dropdown__trigger-label">{label}</span>
<span class="wrn-dropdown__trigger-label" data-wrn-owner="Dropdown" data-wrn-part="triggerLabel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{label}</span>
{/if}
{#if showChevron}
<span class="icon-[lucide--chevron-down] wrn-dropdown__chevron" aria-hidden="true"></span>
<span class="icon-[lucide--chevron-down] wrn-dropdown__chevron" aria-hidden="true" data-wrn-owner="Dropdown" data-wrn-part="chevron" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
{/if}
</button>
@@ -190,7 +190,7 @@ items: unknown[] = []
hidden='{!(open || visible)}'
aria-label="Close menu"
@click='hideMenu("outside", event)'
></button>
data-wrn-owner="Dropdown" data-wrn-part="dismissLayer" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></button>
{/if}
<div
@@ -199,15 +199,15 @@ items: unknown[] = []
hidden='{!(open || visible)}'
role="menu"
aria-label='{menuLabel}'
>
data-wrn-owner="Dropdown" data-wrn-part="panel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<slot name="header"></slot>
<div class="wrn-dropdown__items">
<div class="wrn-dropdown__items" data-wrn-owner="Dropdown" data-wrn-part="items" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#each items as item, itemIndex}
{#if item.type === "divider"}
<div class="wrn-dropdown__divider" role="separator"></div>
<div class="wrn-dropdown__divider" role="separator" data-wrn-owner="Dropdown" data-wrn-part="divider" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></div>
{:else if item.type === "header"}
<div class="wrn-dropdown__section-label">{item.label || item.title}</div>
<div class="wrn-dropdown__section-label" data-wrn-owner="Dropdown" data-wrn-part="sectionLabel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.label || item.title}</div>
{:else if item.href}
<a
href='{item.href}'
@@ -221,24 +221,24 @@ items: unknown[] = []
tabindex='{item.disabled ? "-1" : "0"}'
class="wrn-dropdown__item"
@click='chooseItem(item, itemIndex, event)'
>
data-wrn-owner="Dropdown" data-wrn-part="item" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if item.icon}
<span class='wrn-dropdown__item-icon {item.icon}' aria-hidden="true"></span>
<span class='wrn-dropdown__item-icon {item.icon}' aria-hidden="true" data-wrn-owner="Dropdown" data-wrn-part="itemIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
{/if}
<span class="wrn-dropdown__copy">
<span class="wrn-dropdown__copy" data-wrn-owner="Dropdown" data-wrn-part="copy" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<strong>{item.label || item.title}</strong>
{#if item.description}
<small>{item.description}</small>
{/if}
</span>
{#if item.badge}
<span class="wrn-dropdown__badge">{item.badge}</span>
<span class="wrn-dropdown__badge" data-wrn-owner="Dropdown" data-wrn-part="badge" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.badge}</span>
{:else if item.shortcut}
<kbd>{item.shortcut}</kbd>
{:else if value !== "" ? String(item.value) === String(value) : item.checked || item.selected}
<span class="icon-[lucide--check] wrn-dropdown__status" aria-hidden="true"></span>
<span class="icon-[lucide--check] wrn-dropdown__status" aria-hidden="true" data-wrn-owner="Dropdown" data-wrn-part="status" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
{:else if item.external}
<span class="icon-[lucide--arrow-up-right] wrn-dropdown__status" aria-hidden="true"></span>
<span class="icon-[lucide--arrow-up-right] wrn-dropdown__status" aria-hidden="true" data-wrn-owner="Dropdown" data-wrn-part="status" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
{/if}
</a>
{:else}
@@ -251,27 +251,27 @@ items: unknown[] = []
disabled='{item.disabled}'
class="wrn-dropdown__item"
@click='chooseItem(item, itemIndex, event)'
>
data-wrn-owner="Dropdown" data-wrn-part="item" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if item.icon}
<span class='wrn-dropdown__item-icon {item.icon}' aria-hidden="true"></span>
<span class='wrn-dropdown__item-icon {item.icon}' aria-hidden="true" data-wrn-owner="Dropdown" data-wrn-part="itemIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
{/if}
<span class="wrn-dropdown__copy">
<span class="wrn-dropdown__copy" data-wrn-owner="Dropdown" data-wrn-part="copy" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<strong>{item.label || item.title}</strong>
{#if item.description}
<small>{item.description}</small>
{/if}
</span>
{#if item.badge}
<span class="wrn-dropdown__badge">{item.badge}</span>
<span class="wrn-dropdown__badge" data-wrn-owner="Dropdown" data-wrn-part="badge" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.badge}</span>
{:else if item.shortcut}
<kbd>{item.shortcut}</kbd>
{:else if value !== "" ? String(item.value) === String(value) : item.checked || item.selected}
<span class="icon-[lucide--check] wrn-dropdown__status" aria-hidden="true"></span>
<span class="icon-[lucide--check] wrn-dropdown__status" aria-hidden="true" data-wrn-owner="Dropdown" data-wrn-part="status" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
{/if}
</button>
{/if}
{:empty}
<div class="wrn-dropdown__empty">{emptyLabel}</div>
<div class="wrn-dropdown__empty" data-wrn-owner="Dropdown" data-wrn-part="empty" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{emptyLabel}</div>
{/each}
</div>
packages/ui/components/FeatureCard.wrn
+21 -21
View File
@@ -50,58 +50,58 @@ component FeatureCard {
data-stretched-link='{stretchedLink ? "true" : "false"}'
class='wrn-feature-card {class}'
aria-disabled='{disabled ? "true" : "false"}'
>
data-wrn-owner="FeatureCard" data-wrn-part="root" data-wrn-component="FeatureCard" data-wrn-axis-size='{size}' data-wrn-axis-color='{color}' data-wrn-axis-variant='{variant}'>
{#if image}
<div class="wrn-feature-card__media">
<div class="wrn-feature-card__media" data-wrn-owner="FeatureCard" data-wrn-part="media" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<img
src='{image}'
alt='{imageAlt}'
loading='{imageLoading}'
class="wrn-feature-card__image"
/>
<div class="wrn-feature-card__media-overlay" aria-hidden="true"></div>
data-wrn-owner="FeatureCard" data-wrn-part="image" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"/>
<div class="wrn-feature-card__media-overlay" aria-hidden="true" data-wrn-owner="FeatureCard" data-wrn-part="mediaOverlay" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></div>
</div>
{/if}
<slot name="media"></slot>
<div class="wrn-feature-card__body">
<div class="wrn-feature-card__top">
<div class="wrn-feature-card__leading">
<div class="wrn-feature-card__body" data-wrn-owner="FeatureCard" data-wrn-part="body" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<div class="wrn-feature-card__top" data-wrn-owner="FeatureCard" data-wrn-part="top" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<div class="wrn-feature-card__leading" data-wrn-owner="FeatureCard" data-wrn-part="leading" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<slot name="icon"></slot>
{#if icon}
<div class="wrn-feature-card__icon" aria-hidden="true">
<div class="wrn-feature-card__icon" aria-hidden="true" data-wrn-owner="FeatureCard" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span class='{icon}'></span>
</div>
{/if}
</div>
{#if badge}
<span class="wrn-feature-card__badge" data-color='{badgeColor}'>
<span class="wrn-feature-card__badge" data-color='{badgeColor}' data-wrn-owner="FeatureCard" data-wrn-part="badge" data-wrn-axis-size="{size}" data-wrn-axis-color='{badgeColor}' data-wrn-axis-variant="{variant}">
{badge}
</span>
{/if}
</div>
<div class="wrn-feature-card__copy">
<div class="wrn-feature-card__copy" data-wrn-owner="FeatureCard" data-wrn-part="copy" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if eyebrow}
<p class="wrn-feature-card__eyebrow">{eyebrow}</p>
<p class="wrn-feature-card__eyebrow" data-wrn-owner="FeatureCard" data-wrn-part="eyebrow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{eyebrow}</p>
{/if}
<h3 class="wrn-feature-card__title">{title}</h3>
<h3 class="wrn-feature-card__title" data-wrn-owner="FeatureCard" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{title}</h3>
{#if description}
<p class="wrn-feature-card__description">{description}</p>
<p class="wrn-feature-card__description" data-wrn-owner="FeatureCard" data-wrn-part="description" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{description}</p>
{/if}
</div>
<div class="wrn-feature-card__content">
<div class="wrn-feature-card__content" data-wrn-owner="FeatureCard" data-wrn-part="content" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<slot></slot>
</div>
<div class="wrn-feature-card__footer">
<div class="wrn-feature-card__footer-content">
<div class="wrn-feature-card__footer" data-wrn-owner="FeatureCard" data-wrn-part="footer" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<div class="wrn-feature-card__footer-content" data-wrn-owner="FeatureCard" data-wrn-part="footerContent" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<slot name="footer"></slot>
</div>
@@ -112,19 +112,19 @@ component FeatureCard {
rel='{external || target === "_blank" ? "noopener noreferrer" : rel}'
class="wrn-feature-card__action"
aria-label='{actionLabel + ": " + title}'
>
data-wrn-owner="FeatureCard" data-wrn-part="action" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span>{actionLabel}</span>
{#if actionIcon}
<span class='wrn-feature-card__action-icon {actionIcon}' aria-hidden="true"></span>
<span class='wrn-feature-card__action-icon {actionIcon}' aria-hidden="true" data-wrn-owner="FeatureCard" data-wrn-part="actionIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
{:else if external}
<span class="wrn-feature-card__action-icon icon-[lucide--external-link]" aria-hidden="true"></span>
<span class="wrn-feature-card__action-icon icon-[lucide--external-link]" aria-hidden="true" data-wrn-owner="FeatureCard" data-wrn-part="actionIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
{:else if showArrow}
<span class="wrn-feature-card__action-icon icon-[lucide--arrow-right]" aria-hidden="true"></span>
<span class="wrn-feature-card__action-icon icon-[lucide--arrow-right]" aria-hidden="true" data-wrn-owner="FeatureCard" data-wrn-part="actionIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
{/if}
</a>
{:else if actionLabel}
<span class="wrn-feature-card__action wrn-feature-card__action--disabled">
<span class="wrn-feature-card__action wrn-feature-card__action--disabled" data-wrn-owner="FeatureCard" data-wrn-part="action" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span>{actionLabel}</span>
</span>
{/if}
packages/ui/components/FeatureGrid.wrn
+3 -3
View File
@@ -36,9 +36,9 @@ component FeatureGrid {
class='wrn-feature-grid wrn-component--color-{color} wrn-component--size-{size} {class}'
aria-label='{label}'
style='--wrn-feature-grid-columns: {columns}; --wrn-feature-grid-tablet-columns: {tabletColumns}; --wrn-feature-grid-mobile-columns: {mobileColumns}; --wrn-feature-grid-min-item-width: {minItemWidth || "17rem"};'
>
<div class="wrn-feature-grid__inner">
<div class="wrn-feature-grid__grid">
data-wrn-owner="FeatureGrid" data-wrn-part="root" data-wrn-component="FeatureGrid" data-wrn-axis-size='{size}' data-wrn-axis-color='{color}' data-wrn-axis-variant='{variant}'>
<div class="wrn-feature-grid__inner" data-wrn-owner="FeatureGrid" data-wrn-part="inner" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<div class="wrn-feature-grid__grid" data-wrn-owner="FeatureGrid" data-wrn-part="grid" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if items.length > 0}
{#each items as item, itemIndex}
<FeatureCard
packages/ui/components/FeatureIconCard.wrn
+6 -6
View File
@@ -27,24 +27,24 @@ component FeatureIconCard {
data-ui-component="FeatureIconCard"
data-size='{size}' data-variant='{variant}' data-hover='{hover}' data-align='{align}' data-radius='{radius}' data-shadow='{shadow}' data-clickable-surface='{clickableSurface ? "true" : "false"}' data-description-tone='{descriptionTone}'
class='wrn-feature-icon-card {class}'
>
data-wrn-owner="FeatureIconCard" data-wrn-part="root" data-wrn-component="FeatureIconCard" data-wrn-axis-size='{size}' data-wrn-axis-color="{color}" data-wrn-axis-variant='{variant}' data-wrn-axis-radius='{radius}' data-wrn-axis-shadow='{shadow}'>
<div
class="wrn-feature-icon-card__icon"
data-size='{iconSize}' data-variant='{iconVariant}' data-color='{color}'
>
<span class='{icon + " wrn-feature-icon-card__icon-glyph"}' aria-hidden="true"></span>
data-wrn-owner="FeatureIconCard" data-wrn-part="icon" data-wrn-axis-size='{iconSize}' data-wrn-axis-color='{color}' data-wrn-axis-variant='{iconVariant}' data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}">
<span class='{icon + " wrn-feature-icon-card__icon-glyph"}' aria-hidden="true" data-wrn-owner="FeatureIconCard" data-wrn-part="iconGlyph" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}"></span>
{#if badge}
<span class="wrn-feature-icon-card__badge">
<span class="wrn-feature-icon-card__badge" data-wrn-owner="FeatureIconCard" data-wrn-part="badge" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}">
{badge}
</span>
{/if}
</div>
<h3 class="wrn-feature-icon-card__title">{title}</h3>
<h3 class="wrn-feature-icon-card__title" data-wrn-owner="FeatureIconCard" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}">{title}</h3>
{#if description}
<p class="wrn-feature-icon-card__description">{description}</p>
<p class="wrn-feature-icon-card__description" data-wrn-owner="FeatureIconCard" data-wrn-part="description" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}">{description}</p>
{/if}
<slot></slot>
packages/ui/components/FileInput.wrn
+4 -4
View File
@@ -46,10 +46,10 @@ size: string = "default"
client function preventReadonly(sourceEvent) { if (readonly) sourceEvent.preventDefault() }
}
view {
<div {...attrs} class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--field wrn-next--file-input {class}" data-variant="{variant}" data-inline="{inline}" data-invalid="{error ? 'true' : 'false'}">
<div class="wrn-next__field-heading"><label class="{hiddenLabel ? 'wrn-next__sr-only' : ''}" for="{id || name}">{label}</label>{#if cornerHint}<span class="wrn-next__field-hint">{cornerHint}</span>{/if}</div>
<div class="wrn-next__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)" @change="handleChange(event)" @focus="emitField('focus', event)" @blur="emitField('blur', event)" @invalid="emitField('invalid', event)" /></div>
{#if helperText}<small class="wrn-next__field-help">{helperText}</small>{/if}<small class="wrn-next__field-error" data-error="{name}">{error}</small>
<div {...attrs} class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--field wrn-next--file-input {class}" data-variant="{variant}" data-inline="{inline}" data-invalid="{error ? 'true' : 'false'}" data-wrn-owner="FileInput" data-wrn-part="root" data-wrn-component="FileInput" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<div class="wrn-next__field-heading" data-wrn-owner="FileInput" data-wrn-part="heading" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><label class="{hiddenLabel ? 'wrn-next__sr-only' : ''}" for="{id || name}" data-wrn-owner="FileInput" data-wrn-part="srOnly" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{label}</label>{#if cornerHint}<span class="wrn-next__field-hint" data-wrn-owner="FileInput" data-wrn-part="hint" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{cornerHint}</span>{/if}</div>
<div class="wrn-next__file-control" data-icon-position="{iconPosition}" data-wrn-owner="FileInput" data-wrn-part="fileControl" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{#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)" @change="handleChange(event)" @focus="emitField('focus', event)" @blur="emitField('blur', event)" @invalid="emitField('invalid', event)" data-wrn-owner="FileInput" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"/></div>
{#if helperText}<small class="wrn-next__field-help" data-wrn-owner="FileInput" data-wrn-part="help" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{helperText}</small>{/if}<small class="wrn-next__field-error" data-error="{name}" data-wrn-owner="FileInput" data-wrn-part="error" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{error}</small>
</div>
}
packages/ui/components/FileUploadProgress.wrn
+4 -4
View File
@@ -31,11 +31,11 @@ size: string = "default"
client function completeUpload(sourceEvent) { currentValue = max; currentStatus = "complete"; output.complete(detail(sourceEvent)) }
}
view {
<div {...attrs} class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--file-upload-progress {class}" data-status="{currentStatus}" aria-live="polite">
<div class="wrn-next__row"><span class="wrn-next__upload-file" aria-hidden="true"></span><span class="wrn-next__upload-info">{#if fileName}<strong>{fileName}</strong><small>{#if uploadedSize || fileSize}{uploadedSize}{#if uploadedSize && fileSize} of {/if}{fileSize}{:else}{label}{/if}</small>{:else}<strong>{label}</strong>{/if}</span>{#if showValue}<strong>{percent()}%</strong>{/if}</div>
<div {...attrs} class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--file-upload-progress {class}" data-status="{currentStatus}" aria-live="polite" data-wrn-owner="FileUploadProgress" data-wrn-part="root" data-wrn-component="FileUploadProgress" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<div class="wrn-next__row" data-wrn-owner="FileUploadProgress" data-wrn-part="row" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"><span class="wrn-next__upload-file" aria-hidden="true" data-wrn-owner="FileUploadProgress" data-wrn-part="uploadFile" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></span><span class="wrn-next__upload-info" data-wrn-owner="FileUploadProgress" data-wrn-part="uploadInfo" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{#if fileName}<strong>{fileName}</strong><small>{#if uploadedSize || fileSize}{uploadedSize}{#if uploadedSize && fileSize} of {/if}{fileSize}{:else}{label}{/if}</small>{:else}<strong>{label}</strong>{/if}</span>{#if showValue}<strong>{percent()}%</strong>{/if}</div>
<progress value="{currentValue}" max="{max}" aria-label="{label}"></progress>
<div class="wrn-next__upload-status"><span class="wrn-next__upload-status-icon" aria-hidden="true"></span><span>{#if currentStatus === "uploading"}Uploading securely…{:else if currentStatus === "complete"}Upload complete{:else if currentStatus === "error"}Upload failed{:else}Upload cancelled{/if}</span></div>
<div class="wrn-next__upload-actions">{#if currentStatus === "uploading"}<button type="button" @click="cancelUpload(event)">{cancelLabel}</button>{#if showCompleteAction}<button type="button" @click="completeUpload(event)">Complete</button>{/if}{/if}{#if currentStatus === "error" || currentStatus === "cancelled"}<button type="button" @click="retryUpload(event)">{retryLabel}</button>{/if}</div>
<div class="wrn-next__upload-status" data-wrn-owner="FileUploadProgress" data-wrn-part="uploadStatus" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"><span class="wrn-next__upload-status-icon" aria-hidden="true" data-wrn-owner="FileUploadProgress" data-wrn-part="uploadStatusIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></span><span>{#if currentStatus === "uploading"}Uploading securely…{:else if currentStatus === "complete"}Upload complete{:else if currentStatus === "error"}Upload failed{:else}Upload cancelled{/if}</span></div>
<div class="wrn-next__upload-actions" data-wrn-owner="FileUploadProgress" data-wrn-part="uploadActions" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{#if currentStatus === "uploading"}<button type="button" @click="cancelUpload(event)" data-wrn-owner="FileUploadProgress" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{cancelLabel}</button>{#if showCompleteAction}<button type="button" @click="completeUpload(event)" data-wrn-owner="FileUploadProgress" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">Complete</button>{/if}{/if}{#if currentStatus === "error" || currentStatus === "cancelled"}<button type="button" @click="retryUpload(event)" data-wrn-owner="FileUploadProgress" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{retryLabel}</button>{/if}</div>
</div>
}
packages/ui/components/FlowCanvas.wrn
+84
View File
@@ -0,0 +1,84 @@
component FlowCanvas {
outputs { select(payload: object) connect(payload: object) move(payload: object) add(payload: object) }
props {
nodes=[]
palette=[]
activeNode=""
label="Workflow"
arrangeLabel="Arrange nodes"
connectLabel="Connect"
color="primary"
size="default"
class=""
}
state currentNodes = nodes
state selected = ""
state pending = null
state drag = null
functions {
shared function findNode(list,id) {for(var i=0;i<list.length;i++){if(list[i].id===id){return list[i];}}return null;}
shared function rows() {
var result=[];
for(var i=0;i<nodes.length;i++){var base=nodes[i];var saved=findNode(currentNodes,base.id);var n=saved || base;result.push({id:base.id,label:base.label,x:n.x ?? 40+i*280,y:n.y ?? 60+(i%2)*100,ports:n.ports || []});}return result;
}
shared function stageWidth() {var width=1000;var list=rows();for(var i=0;i<list.length;i++){width=Math.max(width,list[i].x+300);}return width;}
shared function stageHeight() {var height=460;var list=rows();for(var i=0;i<list.length;i++){height=Math.max(height,list[i].y+180);}return height;}
shared function paths() {
var list=rows();var edges=[];
for(var j=0;j<list.length;j++){var node=list[j];for(var i=0;i<node.ports.length;i++){var port=node.ports[i];var target=findNode(list,port.target);if(target){var x=node.x+230;var y=node.y+62+i*32;var tx=target.x;var ty=target.y+25;edges.push({id:node.id+':'+port.key,path:'M '+x+' '+y+' C '+(x+70)+' '+y+' '+(tx-70)+' '+ty+' '+tx+' '+ty});}}}return edges;
}
client function choose(id,event) {
if(pending){if(pending.source!==id){var list=rows();for(var j=0;j<list.length;j++){var node=list[j];if(node.id===pending.source){var ports=[];for(var i=0;i<node.ports.length;i++){var port=node.ports[i];ports.push({key:port.key,label:port.label,target:port.key===pending.port ? id : port.target});}node.ports=ports;}}currentNodes=list;output.connect({source:pending.source,port:pending.port,target:id,sourceEvent:event});}pending=null;}
selected=id;output.select({id:id,sourceEvent:event});
}
client function begin(node,event) {
if(event.button!==0 || pending){return;}
event.currentTarget.closest('.wrn-flow-viewport').setPointerCapture(event.pointerId);drag={id:node.id,startX:event.clientX,startY:event.clientY,x:node.x,y:node.y};
}
client function moving(event) {
if(!drag){return;}var list=rows();for(var i=0;i<list.length;i++){var n=list[i];if(n.id===drag.id){list[i]={id:n.id,label:n.label,x:Math.max(16,drag.x+event.clientX-drag.startX),y:Math.max(16,drag.y+event.clientY-drag.startY),ports:n.ports};}}currentNodes=list;
}
client function end(event) {if(!drag){return;}var nodeId=drag.id;drag=null;choose(nodeId,event);output.move({nodes:currentNodes,sourceEvent:event});}
client function key(nodeId,event) {
if(event.key==='Escape'){pending=null;return;}
var delta={ArrowLeft:[-20,0],ArrowRight:[20,0],ArrowUp:[0,-20],ArrowDown:[0,20]}[event.key];
if(!delta){return;}event.preventDefault();var list=rows();for(var i=0;i<list.length;i++){var n=list[i];if(n.id===nodeId){list[i]={id:n.id,label:n.label,x:Math.max(16,n.x+delta[0]),y:Math.max(16,n.y+delta[1]),ports:n.ports};}}currentNodes=list;output.move({nodes:currentNodes,sourceEvent:event});
}
client function arrange(event) {var list=rows();for(var i=0;i<list.length;i++){list[i].x=40+i*280;list[i].y=60+(i%2)*100;}currentNodes=list;output.move({nodes:currentNodes,sourceEvent:event});}
client function paletteDrag(kind,event) {event.dataTransfer.setData('application/x-wrn-flow-node',kind);event.dataTransfer.effectAllowed='copy';}
client function drop(event) {event.preventDefault();var kind=event.dataTransfer.getData('application/x-wrn-flow-node');for(var i=0;i<palette.length;i++){if(palette[i].kind===kind){output.add({kind:kind,sourceEvent:event});return;}}}
}
view {
<section {...attrs} class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-flow {class}" data-ui-component="FlowCanvas" aria-label="{label}" data-wrn-owner="FlowCanvas" data-wrn-part="root" data-wrn-component="FlowCanvas" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<div class="wrn-flow-toolbar" data-wrn-owner="FlowCanvas" data-wrn-part="toolbar" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{#each palette as item}<button type="button" draggable="true" @dragstart="paletteDrag(item.kind,event)" @click="output.add({kind:item.kind,sourceEvent:event})" data-wrn-owner="FlowCanvas" data-wrn-part="button" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{item.label}</button>{/each}<button type="button" @click="arrange(event)" data-wrn-owner="FlowCanvas" data-wrn-part="button" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{arrangeLabel}</button></div>
<div class="wrn-flow-viewport" @dragover="event.preventDefault()" @drop="drop(event)" @pointermove="moving(event)" @pointerup="end(event)" @pointercancel="end(event)" data-wrn-owner="FlowCanvas" data-wrn-part="viewport" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<div class="wrn-flow-stage" style="min-width: {stageWidth(currentNodes,nodes)}px; min-height: {stageHeight(currentNodes,nodes)}px" data-wrn-owner="FlowCanvas" data-wrn-part="stage" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<svg class="wrn-flow-links" aria-hidden="true" data-wrn-owner="FlowCanvas" data-wrn-part="links" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{#each paths(currentNodes,nodes) as edge}<path d="{edge.path}" />{/each}</svg>
{#each rows(currentNodes,nodes) as node}<div class="wrn-flow-node" style="left: {node.x}px; top: {node.y}px" data-selected="{(activeNode || selected)===node.id}" data-wrn-owner="FlowCanvas" data-wrn-part="node" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<button type="button" class="wrn-flow-node-title" data-flow-node-id="{node.id}" aria-label="{node.label+' · '+node.id}" aria-pressed="{(activeNode || selected)===node.id}" @click="choose(node.id,event)" @pointerdown="begin(node,event)" @keydown="key(node.id,event)" data-wrn-owner="FlowCanvas" data-wrn-part="nodeTitle" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"><span>{node.label}</span><small>{node.id}</small></button>
{#each node.ports as port}<button type="button" class="wrn-flow-port" data-pending="{pending?.source===node.id && pending?.port===port.key}" aria-label="{connectLabel+' '+node.id+' '+port.label}" @click="pending={source:node.id,port:port.key}" data-wrn-owner="FlowCanvas" data-wrn-part="port" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{port.label}<span aria-hidden="true"></span></button>{/each}
</div>{/each}
</div>
</div>
</section>
}
style {
.wrn-flow{border:1px solid var(--wrn-color-border);border-radius:var(--wrn-radius-lg,12px);background:var(--wrn-color-surface);overflow:hidden}
.wrn-flow-toolbar{display:flex;gap:8px;flex-wrap:wrap;padding:12px;border-bottom:1px solid var(--wrn-color-border)}
.wrn-flow-toolbar button{padding:8px 12px;border:1px solid var(--wrn-color-border);border-radius:8px;color:var(--wrn-color-text);background:var(--wrn-color-surface-muted);cursor:pointer}
.wrn-flow-toolbar button:last-child{margin-inline-start:auto}
.wrn-flow-viewport{overflow:auto;max-height:65vh;background-image:radial-gradient(var(--wrn-color-border) 1px,transparent 1px);background-size:20px 20px}
.wrn-flow-stage{position:relative;isolation:isolate}
.wrn-flow-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.wrn-flow-links path{fill:none;stroke:var(--wrn-color-primary,#0e9db6);stroke-width:2}
.wrn-flow-node{position:absolute;width:230px;border:1px solid var(--wrn-color-border);border-radius:12px;background:var(--wrn-color-surface);box-shadow:0 2px 8px #0002;overflow:hidden}
.wrn-flow-node[data-selected=true]{border-color:var(--wrn-color-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--wrn-color-primary) 20%,transparent)}
.wrn-flow-node-title{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:14px;border:0;color:var(--wrn-color-text);background:transparent;touch-action:none;cursor:grab;text-align:start}
.wrn-flow-node-title small{font-size:11px;color:var(--wrn-color-text-muted)}
.wrn-flow-port{display:flex;align-items:center;justify-content:space-between;width:100%;padding:6px 14px;border:0;border-top:1px solid var(--wrn-color-border);background:transparent;color:var(--wrn-color-text-muted);cursor:crosshair}
.wrn-flow-port span{width:9px;height:9px;border-radius:50%;background:var(--wrn-color-primary)}
.wrn-flow-port[data-pending=true]{color:var(--wrn-color-primary);background:var(--wrn-color-surface-muted)}
.wrn-flow button:focus-visible{outline:2px solid var(--wrn-color-primary);outline-offset:-3px}
}
}
packages/ui/components/Footer.wrn
+20 -20
View File
@@ -40,13 +40,13 @@ component Footer {
data-color='{color}'
data-mobile-columns='{mobileColumns}' data-mobile-copyright-align='{mobileCopyrightAlign}'
class='wrn-footer {maxWidth === "full" ? "wrn-footer--width-full" : ""} {class}'
>
data-wrn-owner="Footer" data-wrn-part="root" data-wrn-component="Footer" data-wrn-axis-size='{size}' data-wrn-axis-color='{color}'>
<div
class="wrn-footer__grid"
>
data-wrn-owner="Footer" data-wrn-part="grid" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<div
class="wrn-footer__pre"
>
data-wrn-owner="Footer" data-wrn-part="pre" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<slot
name="pre-footer"
>
@@ -57,13 +57,13 @@ component Footer {
<nav
class='wrn-footer__links wrn-footer--columns-{columns}'
aria-label='{label}'
>
data-wrn-owner="Footer" data-wrn-part="links" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#each items as item, itemIndex}
{#if item.type === "header"}
<section
class="wrn-footer__column"
aria-labelledby='footer-heading-{itemIndex}'
>
data-wrn-owner="Footer" data-wrn-part="column" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#if item.icon}
<span
class='{item.icon}'
@@ -76,7 +76,7 @@ component Footer {
id='footer-heading-{itemIndex}'
class="wrn-footer__heading"
data-t='{translationKey(item, "label")}'
>
data-wrn-owner="Footer" data-wrn-part="heading" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{item.label || item.title}
</h2>
@@ -89,7 +89,7 @@ component Footer {
{#if (item.items || item.links || []).length > 0}
<div
class="wrn-footer__column-links"
>
data-wrn-owner="Footer" data-wrn-part="columnLinks" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#each item.items || item.links || [] as child, childIndex}
<a
href='{child.href || "#"}'
@@ -98,7 +98,7 @@ component Footer {
aria-current='{child.active ? "page" : "false"}'
class="wrn-footer__link"
@click='output.select({ item: child, parent: item, itemIndex: childIndex, sectionIndex: itemIndex }); child.action && output.action({ item: child, parent: item, itemIndex: childIndex, sectionIndex: itemIndex })'
>
data-wrn-owner="Footer" data-wrn-part="link" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#if child.icon}
<span
class='{child.icon}'
@@ -135,10 +135,10 @@ component Footer {
{:else if item.type === "link" || item.href}
<section
class="wrn-footer__column"
>
data-wrn-owner="Footer" data-wrn-part="column" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<div
class="wrn-footer__column-links"
>
data-wrn-owner="Footer" data-wrn-part="columnLinks" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<a
href='{item.href || "#"}'
target='{item.target || ""}'
@@ -146,7 +146,7 @@ component Footer {
aria-current='{item.active ? "page" : "false"}'
class="wrn-footer__link"
@click='output.select({ item: item, itemIndex: itemIndex }); item.action && output.action({ item: item, itemIndex: itemIndex })'
>
data-wrn-owner="Footer" data-wrn-part="link" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#if item.icon}
<span
class='{item.icon}'
@@ -182,7 +182,7 @@ component Footer {
<section
class="wrn-footer__column"
aria-labelledby='footer-heading-{itemIndex}'
>
data-wrn-owner="Footer" data-wrn-part="column" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#if item.icon}
<span
class='{item.icon}'
@@ -196,7 +196,7 @@ component Footer {
id='footer-heading-{itemIndex}'
class="wrn-footer__heading"
data-t='{translationKey(item, "label")}'
>
data-wrn-owner="Footer" data-wrn-part="heading" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{item.title || item.label}
</h2>
{/if}
@@ -210,7 +210,7 @@ component Footer {
{#if (item.items || item.links || []).length > 0}
<div
class="wrn-footer__column-links"
>
data-wrn-owner="Footer" data-wrn-part="columnLinks" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#each item.items || item.links || [] as child, childIndex}
<a
href='{child.href || "#"}'
@@ -219,7 +219,7 @@ component Footer {
aria-current='{child.active ? "page" : ""}'
class="wrn-footer__link"
@click='output.select({ item: child, parent: item, itemIndex: childIndex, sectionIndex: itemIndex }); child.action && output.action({ item: child, parent: item, itemIndex: childIndex, sectionIndex: itemIndex })'
>
data-wrn-owner="Footer" data-wrn-part="link" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#if child.icon}
<span
class='{child.icon}'
@@ -259,7 +259,7 @@ component Footer {
<div
class="wrn-footer__post"
>
data-wrn-owner="Footer" data-wrn-part="post" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<slot
name="post-footer"
>
@@ -269,10 +269,10 @@ component Footer {
<div
class="wrn-footer__bottom wrn-footer__bottom--slots"
>
data-wrn-owner="Footer" data-wrn-part="bottom" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<div
class="wrn-footer__copyright-left"
>
data-wrn-owner="Footer" data-wrn-part="copyrightLeft" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<slot
name="copyright-left"
>
@@ -282,14 +282,14 @@ component Footer {
{#if copyright}
<p
class="wrn-footer__copyright"
>
data-wrn-owner="Footer" data-wrn-part="copyright" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<span data-t='{copyrightKey}'>{copyright}</span>
</p>
{/if}
<div
class="wrn-footer__copyright-right"
>
data-wrn-owner="Footer" data-wrn-part="copyrightRight" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<slot
name="copyright-right"
>
packages/ui/components/Grid.wrn
+1 -1
View File
@@ -47,7 +47,7 @@ component Grid {
data-columns='{columnCount()}'
data-auto='{minItemWidth ? "true" : "false"}'
style='--grid-auto-track:{autoTrack()};'
>
data-wrn-owner="Grid" data-wrn-part="root" data-wrn-component="Grid" data-wrn-axis-size='{size}' data-wrn-axis-color='{color}'>
<slot></slot>
</div>
}
packages/ui/components/Hero.wrn
+46 -46
View File
@@ -63,54 +63,54 @@ component Hero {
data-full-bleed='{fullBleed}'
aria-label='{title}'
class='wrn-hero {class}'
>
data-wrn-owner="Hero" data-wrn-part="root" data-wrn-component="Hero" data-wrn-axis-size='{size}' data-wrn-axis-color='{color}' data-wrn-axis-variant='{variant}'>
{#if showDecorations}
<div class="wrn-hero__decorations" aria-hidden="true">
<span class="wrn-hero__glow wrn-hero__glow--one"></span>
<span class="wrn-hero__glow wrn-hero__glow--two"></span>
<span class="wrn-hero__grid-pattern"></span>
<div class="wrn-hero__decorations" aria-hidden="true" data-wrn-owner="Hero" data-wrn-part="decorations" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span class="wrn-hero__glow wrn-hero__glow--one" data-wrn-owner="Hero" data-wrn-part="glow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
<span class="wrn-hero__glow wrn-hero__glow--two" data-wrn-owner="Hero" data-wrn-part="glow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
<span class="wrn-hero__grid-pattern" data-wrn-owner="Hero" data-wrn-part="gridPattern" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
</div>
{/if}
<div class="wrn-hero__inner">
<div class="wrn-hero__layout">
<div class="wrn-hero__content">
<div class="wrn-hero__inner" data-wrn-owner="Hero" data-wrn-part="inner" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<div class="wrn-hero__layout" data-wrn-owner="Hero" data-wrn-part="layout" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<div class="wrn-hero__content" data-wrn-owner="Hero" data-wrn-part="content" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<slot name="eyebrow"></slot>
{#if eyebrow}
<div class="wrn-hero__eyebrow">
<div class="wrn-hero__eyebrow" data-wrn-owner="Hero" data-wrn-part="eyebrow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if eyebrowIcon}
<span class='wrn-hero__eyebrow-icon {eyebrowIcon}' aria-hidden="true"></span>
<span class='wrn-hero__eyebrow-icon {eyebrowIcon}' aria-hidden="true" data-wrn-owner="Hero" data-wrn-part="eyebrowIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
{:else}
<span class="wrn-hero__eyebrow-dot" aria-hidden="true"></span>
<span class="wrn-hero__eyebrow-dot" aria-hidden="true" data-wrn-owner="Hero" data-wrn-part="eyebrowDot" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
{/if}
<span>{eyebrow}</span>
</div>
{/if}
<div class="wrn-hero__heading-row">
<div class="wrn-hero__heading-row" data-wrn-owner="Hero" data-wrn-part="headingRow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if icon}
<div class="wrn-hero__icon" aria-hidden="true">
<div class="wrn-hero__icon" aria-hidden="true" data-wrn-owner="Hero" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span class='{icon}'></span>
</div>
{/if}
<div class="wrn-hero__heading-copy">
<h1 class="wrn-hero__title">
<div class="wrn-hero__heading-copy" data-wrn-owner="Hero" data-wrn-part="headingCopy" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<h1 class="wrn-hero__title" data-wrn-owner="Hero" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span>{title}</span>
{#if highlight}
<span class="wrn-hero__highlight">{highlight}</span>
<span class="wrn-hero__highlight" data-wrn-owner="Hero" data-wrn-part="highlight" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{highlight}</span>
{/if}
</h1>
{#if description}
<p class="wrn-hero__description">{description}</p>
<p class="wrn-hero__description" data-wrn-owner="Hero" data-wrn-part="description" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{description}</p>
{/if}
</div>
</div>
{#if badges.length > 0}
<div class="wrn-hero__badges">
<div class="wrn-hero__badges" data-wrn-owner="Hero" data-wrn-part="badges" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#each badges as badge}
<Badge
label='{badge.label || badge.title || badge}'
@@ -123,17 +123,17 @@ component Hero {
</div>
{/if}
<div class="wrn-hero__actions">
<div class="wrn-hero__actions" data-wrn-owner="Hero" data-wrn-part="actions" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if primaryLabel}
<a
href='{primaryHref || "#"}'
target='{primaryTarget}'
rel='{primaryTarget === "_blank" ? "noopener noreferrer" : ""}'
class="wrn-hero__action wrn-hero__action--primary"
>
data-wrn-owner="Hero" data-wrn-part="action" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span>{primaryLabel}</span>
{#if primaryIcon}
<span class='wrn-hero__action-icon {primaryIcon}' aria-hidden="true"></span>
<span class='wrn-hero__action-icon {primaryIcon}' aria-hidden="true" data-wrn-owner="Hero" data-wrn-part="actionIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
{/if}
</a>
{/if}
@@ -144,9 +144,9 @@ component Hero {
target='{secondaryTarget}'
rel='{secondaryTarget === "_blank" ? "noopener noreferrer" : ""}'
class="wrn-hero__action wrn-hero__action--secondary"
>
data-wrn-owner="Hero" data-wrn-part="action" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if secondaryIcon}
<span class='wrn-hero__action-icon {secondaryIcon}' aria-hidden="true"></span>
<span class='wrn-hero__action-icon {secondaryIcon}' aria-hidden="true" data-wrn-owner="Hero" data-wrn-part="actionIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
{/if}
<span>{secondaryLabel}</span>
</a>
@@ -158,10 +158,10 @@ component Hero {
target='{tertiaryTarget}'
rel='{tertiaryTarget === "_blank" ? "noopener noreferrer" : ""}'
class="wrn-hero__action wrn-hero__action--tertiary"
>
data-wrn-owner="Hero" data-wrn-part="action" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span>{tertiaryLabel}</span>
{#if tertiaryIcon}
<span class='wrn-hero__action-icon {tertiaryIcon}' aria-hidden="true"></span>
<span class='wrn-hero__action-icon {tertiaryIcon}' aria-hidden="true" data-wrn-owner="Hero" data-wrn-part="actionIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
{/if}
</a>
{/if}
@@ -170,13 +170,13 @@ component Hero {
</div>
{#if trustItems.length > 0}
<div class="wrn-hero__trust" aria-label="Highlights">
<div class="wrn-hero__trust" aria-label="Highlights" data-wrn-owner="Hero" data-wrn-part="trust" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#each trustItems as item}
<span class="wrn-hero__trust-item">
<span class="wrn-hero__trust-item" data-wrn-owner="Hero" data-wrn-part="trustItem" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span
class='wrn-hero__trust-icon {(item.icon || "icon-[lucide--check-circle-2]")}'
aria-hidden="true"
></span>
data-wrn-owner="Hero" data-wrn-part="trustIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
<span>{item.label || item.title || item}</span>
</span>
{/each}
@@ -187,62 +187,62 @@ component Hero {
<slot></slot>
</div>
<div class="wrn-hero__visual">
<div class="wrn-hero__visual" data-wrn-owner="Hero" data-wrn-part="visual" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<slot name="visual"></slot>
{#if visualImage || visualTitle || visualDescription || visualItems.length > 0}
<div class="wrn-hero__visual-card">
<div class="wrn-hero__visual-card" data-wrn-owner="Hero" data-wrn-part="visualCard" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if visualImage}
<div class="wrn-hero__visual-media">
<div class="wrn-hero__visual-media" data-wrn-owner="Hero" data-wrn-part="visualMedia" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<img
src='{visualImage}'
alt='{visualAlt || visualTitle || title}'
class="wrn-hero__visual-image"
/>
data-wrn-owner="Hero" data-wrn-part="visualImage" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"/>
</div>
{/if}
{#if visualIcon || visualEyebrow || visualTitle || visualDescription}
<div class="wrn-hero__visual-header">
<div class="wrn-hero__visual-header" data-wrn-owner="Hero" data-wrn-part="visualHeader" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if visualIcon}
<span class="wrn-hero__visual-icon" aria-hidden="true">
<span class="wrn-hero__visual-icon" aria-hidden="true" data-wrn-owner="Hero" data-wrn-part="visualIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span class='{visualIcon}'></span>
</span>
{/if}
<div class="wrn-hero__visual-copy">
<div class="wrn-hero__visual-copy" data-wrn-owner="Hero" data-wrn-part="visualCopy" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if visualEyebrow}
<p class="wrn-hero__visual-eyebrow">{visualEyebrow}</p>
<p class="wrn-hero__visual-eyebrow" data-wrn-owner="Hero" data-wrn-part="visualEyebrow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{visualEyebrow}</p>
{/if}
{#if visualTitle}
<h2 class="wrn-hero__visual-title">{visualTitle}</h2>
<h2 class="wrn-hero__visual-title" data-wrn-owner="Hero" data-wrn-part="visualTitle" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{visualTitle}</h2>
{/if}
{#if visualDescription}
<p class="wrn-hero__visual-description">{visualDescription}</p>
<p class="wrn-hero__visual-description" data-wrn-owner="Hero" data-wrn-part="visualDescription" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{visualDescription}</p>
{/if}
</div>
</div>
{/if}
{#if visualItems.length > 0}
<div class="wrn-hero__visual-items">
<div class="wrn-hero__visual-items" data-wrn-owner="Hero" data-wrn-part="visualItems" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#each visualItems as item}
<div class="wrn-hero__visual-item">
<div class="wrn-hero__visual-item" data-wrn-owner="Hero" data-wrn-part="visualItem" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if item.icon}
<span class='wrn-hero__visual-item-icon {item.icon}' aria-hidden="true"></span>
<span class='wrn-hero__visual-item-icon {item.icon}' aria-hidden="true" data-wrn-owner="Hero" data-wrn-part="visualItemIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
{/if}
<div class="wrn-hero__visual-item-copy">
<span class="wrn-hero__visual-item-label">{item.label || item.title}</span>
<div class="wrn-hero__visual-item-copy" data-wrn-owner="Hero" data-wrn-part="visualItemCopy" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span class="wrn-hero__visual-item-label" data-wrn-owner="Hero" data-wrn-part="visualItemLabel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.label || item.title}</span>
{#if item.description}
<span class="wrn-hero__visual-item-description">{item.description}</span>
<span class="wrn-hero__visual-item-description" data-wrn-owner="Hero" data-wrn-part="visualItemDescription" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.description}</span>
{/if}
</div>
{#if item.value}
<strong class="wrn-hero__visual-item-value">{item.value}</strong>
<strong class="wrn-hero__visual-item-value" data-wrn-owner="Hero" data-wrn-part="visualItemValue" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.value}</strong>
{/if}
</div>
{/each}
@@ -253,7 +253,7 @@ component Hero {
</div>
</div>
<div class="wrn-hero__footer">
<div class="wrn-hero__footer" data-wrn-owner="Hero" data-wrn-part="footer" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<slot name="footer"></slot>
</div>
</div>
packages/ui/components/HeroActions.wrn
+1 -1
View File
@@ -22,7 +22,7 @@ component HeroActions {
data-stack-mobile='{stackOnMobile ? "true" : "false"}'
data-full-mobile='{fullWidthMobile ? "true" : "false"}'
class='wrn-hero-actions {class}'
>
data-wrn-owner="HeroActions" data-wrn-part="root" data-wrn-component="HeroActions" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#each actions as action, index}
{#if action.label}
<Button
packages/ui/components/Image.wrn
+4 -4
View File
@@ -31,7 +31,7 @@ component Image {
data-color='{color}'
data-fit='{fit}'
data-rounded='{rounded}'
>
data-wrn-owner="Image" data-wrn-part="root" data-wrn-component="Image" data-wrn-axis-size='{size}' data-wrn-axis-color='{color}' data-wrn-axis-rounded='{rounded}'>
<img
class="wrn-image__img"
data-show="src"
@@ -41,15 +41,15 @@ component Image {
height='{height}'
loading='{loading}'
decoding="async"
/>
data-wrn-owner="Image" data-wrn-part="img" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-rounded="{rounded}"/>
<div
class="wrn-image__placeholder"
data-show="!src"
role="img"
aria-label='{alt || "Image placeholder"}'
>
<span class="icon-[lucide--image] wrn-image__placeholder-icon" aria-hidden="true"></span>
data-wrn-owner="Image" data-wrn-part="placeholder" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-rounded="{rounded}">
<span class="icon-[lucide--image] wrn-image__placeholder-icon" aria-hidden="true" data-wrn-owner="Image" data-wrn-part="placeholderIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-rounded="{rounded}"></span>
</div>
<slot></slot>
packages/ui/components/InputGroup.wrn
+9 -9
View File
@@ -39,16 +39,16 @@ component InputGroup {
client function handleAction(sourceEvent) { output.action({ name: name, sourceEvent: sourceEvent }) }
}
view {
<div {...attrs} class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--field wrn-next--input-group {class}" data-variant="{variant}" data-inline="{inline}" data-invalid="{error ? 'true' : 'false'}">
<div class="wrn-next__field-heading"><label class="{hiddenLabel ? 'wrn-next__sr-only' : ''}" for="{id || name}">{label}</label>{#if cornerHint}<span class="wrn-next__field-hint">{cornerHint}</span>{/if}</div>
<div class="wrn-next__input-group-control">
{#if startText}<span class="wrn-next__input-addon">{startText}</span>{/if}
{#if icon}<span class="{icon} wrn-next__field-icon" data-position="{iconPosition}" aria-hidden="true"></span>{/if}
<input id="{id || name}" type="{type}" name="{name}" value="{value}" placeholder="{placeholder}" readonly="{readonly}" disabled="{disabled}" required="{required}" aria-invalid="{error ? 'true' : 'false'}" @input="emitField('input', event)" @change="emitField('change', event)" @focus="emitField('focus', event)" @blur="emitField('blur', event)" @keydown="handleKeydown(event)" />
{#if endText}<span class="wrn-next__input-addon">{endText}</span>{/if}
{#if actionLabel}<button type="button" disabled="{disabled}" @click="handleAction(event)">{actionLabel}</button>{/if}
<div {...attrs} class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--field wrn-next--input-group {class}" data-variant="{variant}" data-inline="{inline}" data-invalid="{error ? 'true' : 'false'}" data-wrn-owner="InputGroup" data-wrn-part="root" data-wrn-component="InputGroup" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<div class="wrn-next__field-heading" data-wrn-owner="InputGroup" data-wrn-part="heading" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><label class="{hiddenLabel ? 'wrn-next__sr-only' : ''}" for="{id || name}" data-wrn-owner="InputGroup" data-wrn-part="srOnly" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{label}</label>{#if cornerHint}<span class="wrn-next__field-hint" data-wrn-owner="InputGroup" data-wrn-part="hint" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{cornerHint}</span>{/if}</div>
<div class="wrn-next__input-group-control" data-wrn-owner="InputGroup" data-wrn-part="inputGroupControl" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if startText}<span class="wrn-next__input-addon" data-wrn-owner="InputGroup" data-wrn-part="inputAddon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{startText}</span>{/if}
{#if icon}<span class="{icon} wrn-next__field-icon" data-position="{iconPosition}" aria-hidden="true" data-wrn-owner="InputGroup" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>{/if}
<input id="{id || name}" type="{type}" name="{name}" value="{value}" placeholder="{placeholder}" readonly="{readonly}" disabled="{disabled}" required="{required}" aria-invalid="{error ? 'true' : 'false'}" @input="emitField('input', event)" @change="emitField('change', event)" @focus="emitField('focus', event)" @blur="emitField('blur', event)" @keydown="handleKeydown(event)" data-wrn-owner="InputGroup" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"/>
{#if endText}<span class="wrn-next__input-addon" data-wrn-owner="InputGroup" data-wrn-part="inputAddon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{endText}</span>{/if}
{#if actionLabel}<button type="button" disabled="{disabled}" @click="handleAction(event)" data-wrn-owner="InputGroup" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{actionLabel}</button>{/if}
</div>
{#if helperText}<small class="wrn-next__field-help">{helperText}</small>{/if}<small class="wrn-next__field-error" data-error="{name}">{error}</small>
{#if helperText}<small class="wrn-next__field-help" data-wrn-owner="InputGroup" data-wrn-part="help" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{helperText}</small>{/if}<small class="wrn-next__field-error" data-error="{name}" data-wrn-owner="InputGroup" data-wrn-part="error" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{error}</small>
</div>
}
packages/ui/components/InputNumber.wrn
+26 -26
View File
@@ -421,18 +421,18 @@ component InputNumber {
data-full-width='{fullWidth ? "true" : "false"}'
style='--input-number-accent: {componentColor()};'
class='wrn-input-number {class}'
>
data-wrn-owner="InputNumber" data-wrn-part="root" data-wrn-component="InputNumber" data-wrn-axis-size='{size}' data-wrn-axis-color='{color}' data-wrn-axis-variant='{variant}'>
{#if label !== "" && variant !== "labeled" && variant !== "seat"}
<label
for='{inputId()}'
class='wrn-input-number__label'
>
data-wrn-owner="InputNumber" data-wrn-part="label" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span>{label}</span>
{#if required}
<span
aria-hidden="true"
class='wrn-input-number__required'
>*</span>
data-wrn-owner="InputNumber" data-wrn-part="required" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">*</span>
{/if}
</label>
{/if}
@@ -441,14 +441,14 @@ component InputNumber {
<p
id='{descriptionId()}'
class='wrn-input-number__description'
>
data-wrn-owner="InputNumber" data-wrn-part="description" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{description}
</p>
{/if}
<div
class='wrn-input-number__control'
>
data-wrn-owner="InputNumber" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if variant === "horizontal" && showButtons}
<button
type="button"
@@ -457,30 +457,30 @@ component InputNumber {
disabled='{decrementDisabled()}'
@click='decrementValue(event)'
class='wrn-input-number__button wrn-input-number__button--start'
>
data-wrn-owner="InputNumber" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span
aria-hidden="true"
class='icon-[lucide--minus] wrn-input-number__icon'
></span>
data-wrn-owner="InputNumber" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
</button>
{/if}
<div
class='wrn-input-number__content'
>
data-wrn-owner="InputNumber" data-wrn-part="content" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if variant === "labeled" || variant === "seat"}
<div class='wrn-input-number__copy'>
<div class='wrn-input-number__copy' data-wrn-owner="InputNumber" data-wrn-part="copy" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if label !== ""}
<label
for='{inputId()}'
class='wrn-input-number__inner-label'
>
data-wrn-owner="InputNumber" data-wrn-part="innerLabel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{label}
{#if required}
<span
aria-hidden="true"
class='wrn-input-number__required'
>*</span>
data-wrn-owner="InputNumber" data-wrn-part="required" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">*</span>
{/if}
</label>
{/if}
@@ -489,7 +489,7 @@ component InputNumber {
<span
id='{descriptionId()}'
class='wrn-input-number__inner-description'
>
data-wrn-owner="InputNumber" data-wrn-part="innerDescription" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{description}
</span>
{/if}
@@ -498,12 +498,12 @@ component InputNumber {
<div
class='wrn-input-number__field'
>
data-wrn-owner="InputNumber" data-wrn-part="field" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if prefix !== ""}
<span
aria-hidden="true"
class='wrn-input-number__prefix'
>
data-wrn-owner="InputNumber" data-wrn-part="prefix" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{prefix}
</span>
{/if}
@@ -533,13 +533,13 @@ component InputNumber {
@keydown='handleKeydown(event)'
@wheel='handleWheel(event)'
class='wrn-input-number__input'
/>
data-wrn-owner="InputNumber" data-wrn-part="input" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"/>
{#if suffix !== ""}
<span
aria-hidden="true"
class='wrn-input-number__suffix'
>
data-wrn-owner="InputNumber" data-wrn-part="suffix" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{suffix}
</span>
{/if}
@@ -554,11 +554,11 @@ component InputNumber {
disabled='{incrementDisabled()}'
@click='incrementValue(event)'
class='wrn-input-number__button wrn-input-number__button--end'
>
data-wrn-owner="InputNumber" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span
aria-hidden="true"
class='icon-[lucide--plus] wrn-input-number__icon'
></span>
data-wrn-owner="InputNumber" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
</button>
{:else}
{#if showButtons}
@@ -566,7 +566,7 @@ component InputNumber {
role="group"
aria-label='{controlsLabel}'
class='wrn-input-number__buttons'
>
data-wrn-owner="InputNumber" data-wrn-part="buttons" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<button
type="button"
aria-label='{decrementLabel}'
@@ -574,11 +574,11 @@ component InputNumber {
disabled='{decrementDisabled()}'
@click='decrementValue(event)'
class='wrn-input-number__button wrn-input-number__button--decrement'
>
data-wrn-owner="InputNumber" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span
aria-hidden="true"
class='icon-[lucide--minus] wrn-input-number__icon'
></span>
data-wrn-owner="InputNumber" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
</button>
<button
@@ -588,11 +588,11 @@ component InputNumber {
disabled='{incrementDisabled()}'
@click='incrementValue(event)'
class='wrn-input-number__button wrn-input-number__button--increment'
>
data-wrn-owner="InputNumber" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span
aria-hidden="true"
class='icon-[lucide--plus] wrn-input-number__icon'
></span>
data-wrn-owner="InputNumber" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
</button>
</div>
{/if}
@@ -605,11 +605,11 @@ component InputNumber {
role="alert"
aria-live="polite"
class='wrn-input-number__message wrn-input-number__message--error'
>
data-wrn-owner="InputNumber" data-wrn-part="message" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span
aria-hidden="true"
class='icon-[lucide--circle-alert] wrn-input-number__error-icon'
></span>
data-wrn-owner="InputNumber" data-wrn-part="errorIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
<span>{validationMessage()}</span>
</p>
{/if}
@@ -618,7 +618,7 @@ component InputNumber {
<p
id='{messageId()}'
class='wrn-input-number__message'
>
data-wrn-owner="InputNumber" data-wrn-part="message" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{helpText}
</p>
{/if}
packages/ui/components/Kbd.wrn
+1 -1
View File
@@ -16,7 +16,7 @@ component Kbd {
}
view {
<kbd {...attrs} class='wrn-kbd {class}' data-size='{size}' data-color='{color}'>
<kbd {...attrs} class='wrn-kbd {class}' data-size='{size}' data-color='{color}' data-wrn-owner="Kbd" data-wrn-part="root" data-wrn-component="Kbd" data-wrn-axis-size='{size}' data-wrn-axis-color='{color}'>
<slot>{label}</slot>
</kbd>
}
packages/ui/components/LayoutSplitter.wrn
+5 -5
View File
@@ -94,8 +94,8 @@ component LayoutSplitter {
data-wrn-splitter-step='{stepSize()}'
style='--wrn-split:{currentSize()}%;'
@wrnexus:splitter:resize='reportResize(event)'
>
<div class="wrn-splitter__pane wrn-splitter__pane--start">
data-wrn-owner="LayoutSplitter" data-wrn-part="root" data-wrn-component="LayoutSplitter" data-wrn-axis-color='{color}'>
<div class="wrn-splitter__pane wrn-splitter__pane--start" data-wrn-owner="LayoutSplitter" data-wrn-part="pane" data-wrn-axis-color="{color}">
<slot name="start"></slot>
</div>
@@ -109,11 +109,11 @@ component LayoutSplitter {
aria-valuenow='{currentSize()}'
aria-valuemin='{lowerBound()}'
aria-valuemax='{upperBound()}'
>
<span class="wrn-splitter__grip" aria-hidden="true"></span>
data-wrn-owner="LayoutSplitter" data-wrn-part="handle" data-wrn-axis-color="{color}">
<span class="wrn-splitter__grip" aria-hidden="true" data-wrn-owner="LayoutSplitter" data-wrn-part="grip" data-wrn-axis-color="{color}"></span>
</div>
<div class="wrn-splitter__pane wrn-splitter__pane--end">
<div class="wrn-splitter__pane wrn-splitter__pane--end" data-wrn-owner="LayoutSplitter" data-wrn-part="pane" data-wrn-axis-color="{color}">
<slot name="end"></slot>
</div>
packages/ui/components/LegendIndicator.wrn
+2 -2
View File
@@ -22,10 +22,10 @@ component LegendIndicator {
}
}
view {
<div class="wrn-legend {class}">
<div class="wrn-legend {class}" data-wrn-owner="LegendIndicator" data-wrn-part="root" data-wrn-component="LegendIndicator" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if title}<strong>{title}</strong>{/if}
{#if description}<p>{description}</p>{/if}
<div class="wrn-legend__items">{#each items as item, index}<button type="button" aria-pressed="{!hiddenItems.includes(index)}" @click="toggleItem(item, index, event)"><i style="background:{item.color || 'var(--wrn-color-primary)'}" aria-hidden="true"></i><span>{item.label}</span>{#if item.value}<small>{item.value}</small>{/if}</button>{/each}</div><slot />
<div class="wrn-legend__items" data-wrn-owner="LegendIndicator" data-wrn-part="items" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{#each items as item, index}<button type="button" aria-pressed="{!hiddenItems.includes(index)}" @click="toggleItem(item, index, event)" data-wrn-owner="LegendIndicator" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><i style="background:{item.color || 'var(--wrn-color-primary)'}" aria-hidden="true"></i><span>{item.label}</span>{#if item.value}<small>{item.value}</small>{/if}</button>{/each}</div><slot />
</div>
}
style {
packages/ui/components/Link.wrn
+3 -3
View File
@@ -33,13 +33,13 @@ component Link {
data-color='{color}'
data-underline='{underline}'
data-external='{external}'
>
<span class="wrn-link__label">{label}</span>
data-wrn-owner="Link" data-wrn-part="root" data-wrn-component="Link" data-wrn-axis-size='{size}' data-wrn-axis-color='{color}'>
<span class="wrn-link__label" data-wrn-owner="Link" data-wrn-part="label" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{label}</span>
<span
class="icon-[lucide--external-link] wrn-link__icon"
data-show="external"
aria-hidden="true"
></span>
data-wrn-owner="Link" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></span>
<slot></slot>
</a>
}
packages/ui/components/List.wrn
+22 -22
View File
@@ -18,14 +18,14 @@ component List {
data-ui-component="List"
aria-label='{title}'
class='wrn-list {class}'
>
data-wrn-owner="List" data-wrn-part="root" data-wrn-component="List" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if title || description}
<header class="wrn-list__header">
<header class="wrn-list__header" data-wrn-owner="List" data-wrn-part="header" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if title}
<h3 class="wrn-list__title">{title}</h3>
<h3 class="wrn-list__title" data-wrn-owner="List" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{title}</h3>
{/if}
{#if description}
<p class="wrn-list__description">{description}</p>
<p class="wrn-list__description" data-wrn-owner="List" data-wrn-part="description" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{description}</p>
{/if}
</header>
{/if}
@@ -33,60 +33,60 @@ component List {
<ul
class="wrn-list__items"
data-variant='{variant}'
>
data-wrn-owner="List" data-wrn-part="items" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant='{variant}'>
{#each items as item, index}
<li
class="wrn-list__item"
data-variant='{variant}'
@click='if (!item.href) { output.select({ item: item, index: index }) }'
>
data-wrn-owner="List" data-wrn-part="item" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant='{variant}'>
{#if item.href}
<a
href='{item.href}'
class="wrn-list__row"
data-size='{size}'
@click='output.select({ item: item, index: index })'
>
data-wrn-owner="List" data-wrn-part="row" data-wrn-axis-size='{size}' data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if item.icon}
<span class="wrn-list__leading-icon"><span class='{item.icon}' aria-hidden="true"></span>
<span class="wrn-list__leading-icon" data-wrn-owner="List" data-wrn-part="leadingIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><span class='{item.icon}' aria-hidden="true"></span>
</span>
{/if}
{#if item.imageSrc}
<img src='{item.imageSrc}' alt='{item.imageAlt || ""}' class="wrn-list__image" loading="lazy" />
<img src='{item.imageSrc}' alt='{item.imageAlt || ""}' class="wrn-list__image" loading="lazy" data-wrn-owner="List" data-wrn-part="image" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"/>
{/if}
<div class="wrn-list__body">
<div class="wrn-list__heading">
<p class="wrn-list__item-title">{item.title || item.label}</p>
<div class="wrn-list__body" data-wrn-owner="List" data-wrn-part="body" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<div class="wrn-list__heading" data-wrn-owner="List" data-wrn-part="heading" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<p class="wrn-list__item-title" data-wrn-owner="List" data-wrn-part="itemTitle" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.title || item.label}</p>
{#if item.meta}
<span class="wrn-list__meta">{item.meta}</span>
<span class="wrn-list__meta" data-wrn-owner="List" data-wrn-part="meta" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.meta}</span>
{/if}
</div>
{#if item.description}
<p class="wrn-list__item-description">{item.description}</p>
<p class="wrn-list__item-description" data-wrn-owner="List" data-wrn-part="itemDescription" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.description}</p>
{/if}
{#if item.badge}
<span class="wrn-list__badge">{item.badge}</span>
<span class="wrn-list__badge" data-wrn-owner="List" data-wrn-part="badge" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.badge}</span>
{/if}
</div>
<span class="icon-[lucide--chevron-right] wrn-list__chevron" aria-hidden="true"></span>
<span class="icon-[lucide--chevron-right] wrn-list__chevron" aria-hidden="true" data-wrn-owner="List" data-wrn-part="chevron" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
</a>
{:else}
<div class="wrn-list__row" data-size='{size}'>
<div class="wrn-list__row" data-size='{size}' data-wrn-owner="List" data-wrn-part="row" data-wrn-axis-size='{size}' data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if item.icon}
<span class="wrn-list__leading-icon"><span class='{item.icon}' aria-hidden="true"></span>
<span class="wrn-list__leading-icon" data-wrn-owner="List" data-wrn-part="leadingIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><span class='{item.icon}' aria-hidden="true"></span>
</span>
{/if}
<div class="wrn-list__body">
<p class="wrn-list__item-title">{item.title || item.label}</p>
<div class="wrn-list__body" data-wrn-owner="List" data-wrn-part="body" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<p class="wrn-list__item-title" data-wrn-owner="List" data-wrn-part="itemTitle" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.title || item.label}</p>
{#if item.description}
<p class="wrn-list__item-description">{item.description}</p>
<p class="wrn-list__item-description" data-wrn-owner="List" data-wrn-part="itemDescription" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.description}</p>
{/if}
</div>
</div>
{/if}
</li>
{:empty}
<li class="wrn-list__empty">
<li class="wrn-list__empty" data-wrn-owner="List" data-wrn-part="empty" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
No items available.
</li>
{/each}
packages/ui/components/ListGroup.wrn
+2 -2
View File
@@ -24,9 +24,9 @@ component ListGroup {
}
}
view {
<section {...attrs} class="wrn-list-group {class}">
<section {...attrs} class="wrn-list-group {class}" data-wrn-owner="ListGroup" data-wrn-part="root" data-wrn-component="ListGroup" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if title}<strong>{title}</strong>{/if}{#if description}<p>{description}</p>{/if}
<div class="wrn-list-group__items" role="group" aria-label="{title}">{#each items as item, index}<button type="button" disabled="{item.disabled}" aria-pressed="{selectedValue === String(item.value || index)}" @click="choose(item, index)">{#if item.icon}<span class="{item.icon}" aria-hidden="true"></span>{/if}<span><strong>{item.label}</strong>{#if item.description}<small>{item.description}</small>{/if}</span>{#if item.badge}<span class="wrn-list-group__badge">{item.badge}</span>{/if}</button>{/each}</div><slot />
<div class="wrn-list-group__items" role="group" aria-label="{title}" data-wrn-owner="ListGroup" data-wrn-part="items" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{#each items as item, index}<button type="button" disabled="{item.disabled}" aria-pressed="{selectedValue === String(item.value || index)}" @click="choose(item, index)" data-wrn-owner="ListGroup" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{#if item.icon}<span class="{item.icon}" aria-hidden="true"></span>{/if}<span><strong>{item.label}</strong>{#if item.description}<small>{item.description}</small>{/if}</span>{#if item.badge}<span class="wrn-list-group__badge" data-wrn-owner="ListGroup" data-wrn-part="badge" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.badge}</span>{/if}</button>{/each}</div><slot />
</section>
}
packages/ui/components/Map.wrn
+18 -18
View File
@@ -43,18 +43,18 @@ component Map {
data-ui-component="Map"
aria-label='{title}'
class='wrn-map {class}'
>
data-wrn-owner="Map" data-wrn-part="root" data-wrn-component="Map" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if title || description}
<header class="wrn-map__header">
<header class="wrn-map__header" data-wrn-owner="Map" data-wrn-part="header" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<div>
{#if title}
<h3 class="wrn-map__title">{title}</h3>
<h3 class="wrn-map__title" data-wrn-owner="Map" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{title}</h3>
{/if}
{#if description}
<p class="wrn-map__description">{description}</p>
<p class="wrn-map__description" data-wrn-owner="Map" data-wrn-part="description" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{description}</p>
{/if}
</div>
<span class="wrn-map__header-icon"><span class="icon-[lucide--map]" aria-hidden="true"></span>
<span class="wrn-map__header-icon" data-wrn-owner="Map" data-wrn-part="headerIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><span class="icon-[lucide--map]" aria-hidden="true"></span>
</span>
</header>
{/if}
@@ -62,18 +62,18 @@ component Map {
<div
class="wrn-map__viewport"
data-size='{size}'
>
data-wrn-owner="Map" data-wrn-part="viewport" data-wrn-axis-size='{size}' data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if !imageSrc}
{#if provider === "google" && !apiKey}<p class="wrn-map__selection">Add your Google Maps Embed API key to display this map.</p>{:else}<iframe title="{title || 'Location map'}" src="{mapUrl()}" loading="lazy" referrerpolicy="no-referrer-when-downgrade" allowfullscreen style="width:100%;height:100%;min-height:320px;border:0"></iframe>{/if}
{:else}<div class="wrn-map__canvas" style="transform:scale({imageZoom})">
{#if imageSrc}<img class="wrn-map__image" src="{imageSrc}" alt="{imageAlt}" />{/if}
{#if provider === "google" && !apiKey}<p class="wrn-map__selection" data-wrn-owner="Map" data-wrn-part="selection" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">Add your Google Maps Embed API key to display this map.</p>{:else}<iframe title="{title || 'Location map'}" src="{mapUrl()}" loading="lazy" referrerpolicy="no-referrer-when-downgrade" allowfullscreen style="width:100%;height:100%;min-height:320px;border:0" data-wrn-owner="Map" data-wrn-part="embeddedFrame" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></iframe>{/if}
{:else}<div class="wrn-map__canvas" style="transform:scale({imageZoom})" data-wrn-owner="Map" data-wrn-part="canvas" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if imageSrc}<img class="wrn-map__image" src="{imageSrc}" alt="{imageAlt}" data-wrn-owner="Map" data-wrn-part="image" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"/>{/if}
<div
class="wrn-map__grid"
style="background-image: linear-gradient(var(--wrn-color-border) 1px, transparent 1px), linear-gradient(90deg, var(--wrn-color-border) 1px, transparent 1px); background-size: 32px 32px;"
aria-hidden="true"
></div>
data-wrn-owner="Map" data-wrn-part="grid" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></div>
<div class="wrn-map__content">
<div class="wrn-map__content" data-wrn-owner="Map" data-wrn-part="content" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<slot></slot>
</div>
@@ -85,30 +85,30 @@ component Map {
class="wrn-map__marker"
style='left: {item.x || (20 + index * 12)}%; top: {item.y || (30 + (index % 3) * 18)}%;'
@click='chooseMarker(item)'
>
data-wrn-owner="Map" data-wrn-part="marker" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span class='{item.icon || "icon-[lucide--map-pin]"}' aria-hidden="true"></span>
</button>
{/each}
{/if}
</div>
{#if selectedLabel}<output class="wrn-map__selection">{selectedLabel}</output>{/if}
<div class="wrn-map__controls">
{#if selectedLabel}<output class="wrn-map__selection" data-wrn-owner="Map" data-wrn-part="selection" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{selectedLabel}</output>{/if}
<div class="wrn-map__controls" data-wrn-owner="Map" data-wrn-part="controls" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<button
type="button"
aria-label="Zoom in"
class="wrn-map__control"
@click='changeZoom(1)'
>
<span class="icon-[lucide--plus] wrn-map__control-icon" aria-hidden="true"></span>
data-wrn-owner="Map" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span class="icon-[lucide--plus] wrn-map__control-icon" aria-hidden="true" data-wrn-owner="Map" data-wrn-part="controlIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
</button>
<button
type="button"
aria-label="Zoom out"
class="wrn-map__control"
@click='changeZoom(-1)'
>
<span class="icon-[lucide--minus] wrn-map__control-icon" aria-hidden="true"></span>
data-wrn-owner="Map" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span class="icon-[lucide--minus] wrn-map__control-icon" aria-hidden="true" data-wrn-owner="Map" data-wrn-part="controlIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
</button>
</div>{/if}
</div>
packages/ui/components/MarketingSectionHeader.wrn
+1 -1
View File
@@ -24,7 +24,7 @@ component MarketingSectionHeader {
data-size='{size}'
data-color='{color}'
class='wrn-marketing-section-header {class}'
>
data-wrn-owner="MarketingSectionHeader" data-wrn-part="root" data-wrn-component="MarketingSectionHeader" data-wrn-axis-size='{size}' data-wrn-axis-color='{color}'>
<SectionHeader
id='{id}'
eyebrow='{eyebrow}'
packages/ui/components/Marquee.wrn
+15 -15
View File
@@ -22,11 +22,11 @@ component Marquee {
data-ui-component="Marquee"
aria-label='{title}'
class='wrn-marquee {class}'
>
<div class="wrn-marquee__layout">
data-wrn-owner="Marquee" data-wrn-part="root" data-wrn-component="Marquee" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<div class="wrn-marquee__layout" data-wrn-owner="Marquee" data-wrn-part="layout" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if title}
<div class="wrn-marquee__title">
<span class="icon-[lucide--megaphone] wrn-marquee__icon" aria-hidden="true"></span>
<div class="wrn-marquee__title" data-wrn-owner="Marquee" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span class="icon-[lucide--megaphone] wrn-marquee__icon" aria-hidden="true" data-wrn-owner="Marquee" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
<span>{title}</span>
</div>
{/if}
@@ -37,28 +37,28 @@ component Marquee {
@mouseleave='paused = false; output.resume({})'
@focusin='paused = true'
@focusout='paused = false'
>
data-wrn-owner="Marquee" data-wrn-part="window" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<div
class="wrn-marquee__track"
class:wrn-marquee-paused='paused'
>
data-wrn-owner="Marquee" data-wrn-part="track" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#each items as item}
<a
href='{item.href || "#"}'
class="wrn-marquee__item"
>
data-wrn-owner="Marquee" data-wrn-part="item" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span
class="wrn-marquee__dot"
data-color='{item.color || "primary"}'
aria-hidden="true"
></span>
data-wrn-owner="Marquee" data-wrn-part="dot" data-wrn-axis-size="{size}" data-wrn-axis-color='{item.color || "primary"}' data-wrn-axis-variant="{variant}"></span>
<span>{item.label || item.title}</span>
{#if item.meta}
<span class="wrn-marquee__meta">{item.meta}</span>
<span class="wrn-marquee__meta" data-wrn-owner="Marquee" data-wrn-part="meta" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.meta}</span>
{/if}
</a>
{:empty}
<p class="wrn-marquee__empty">{description || "No announcements available."}</p>
<p class="wrn-marquee__empty" data-wrn-owner="Marquee" data-wrn-part="empty" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{description || "No announcements available."}</p>
{/each}
{#if items.length > 0}
@@ -68,8 +68,8 @@ component Marquee {
aria-hidden="true"
tabindex="-1"
class="wrn-marquee__item"
>
<span class="wrn-marquee__dot" aria-hidden="true"></span>
data-wrn-owner="Marquee" data-wrn-part="item" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span class="wrn-marquee__dot" aria-hidden="true" data-wrn-owner="Marquee" data-wrn-part="dot" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
<span>{item.label || item.title}</span>
</a>
{/each}
@@ -82,9 +82,9 @@ component Marquee {
aria-label='{paused ? "Resume announcements" : "Pause announcements"}'
class="wrn-marquee__toggle"
@click='paused = !paused; paused ? output.pause({}) : output.resume({})'
>
<span class="icon-[lucide--pause] wrn-marquee__icon" data-show='!paused' aria-hidden="true"></span>
<span class="icon-[lucide--play] wrn-marquee__icon" data-show='paused' aria-hidden="true"></span>
data-wrn-owner="Marquee" data-wrn-part="toggle" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span class="icon-[lucide--pause] wrn-marquee__icon" data-show='!paused' aria-hidden="true" data-wrn-owner="Marquee" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
<span class="icon-[lucide--play] wrn-marquee__icon" data-show='paused' aria-hidden="true" data-wrn-owner="Marquee" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
</button>
</div>
packages/ui/components/MegaMenu.wrn
+34 -34
View File
@@ -187,7 +187,7 @@ component MegaMenu {
@keydown='handleKeydown(event)'
@mouseenter='cancelScheduledHide()'
@mouseleave='scheduleHide()'
>
data-wrn-owner="MegaMenu" data-wrn-part="root" data-wrn-component="MegaMenu" data-wrn-axis-color='{color}' data-wrn-axis-size='{size}' data-wrn-axis-variant='{variant}'>
<button
type="button"
class="wrn-mega__trigger"
@@ -196,10 +196,10 @@ component MegaMenu {
aria-label='{label || "Menu"}'
@click='activatePanel(event)'
@mouseenter='hoverPanel(event)'
>
<span class='wrn-mega__trigger-icon {icon}' data-show="icon" aria-hidden="true"></span>
<span class="wrn-mega__trigger-label" data-label='{label || "Menu"}' aria-hidden="true"></span>
<span class="wrn-mega__arrow" aria-hidden="true">&#8250;</span>
data-wrn-owner="MegaMenu" data-wrn-part="trigger" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">
<span class='wrn-mega__trigger-icon {icon}' data-show="icon" aria-hidden="true" data-wrn-owner="MegaMenu" data-wrn-part="triggerIcon" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}"></span>
<span class="wrn-mega__trigger-label" data-label='{label || "Menu"}' aria-hidden="true" data-wrn-owner="MegaMenu" data-wrn-part="triggerLabel" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}"></span>
<span class="wrn-mega__arrow" aria-hidden="true" data-wrn-owner="MegaMenu" data-wrn-part="arrow" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">&#8250;</span>
</button>
<div
@@ -209,19 +209,19 @@ component MegaMenu {
style='{visible ? "" : "display:none"}'
data-wrn-roving="both"
@mouseenter='cancelScheduledHide()'
>
<div class="wrn-mega__layout">
data-wrn-owner="MegaMenu" data-wrn-part="panel" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">
<div class="wrn-mega__layout" data-wrn-owner="MegaMenu" data-wrn-part="layout" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">
{#if railList().length > 0}
<aside class="wrn-mega__rail">
<aside class="wrn-mega__rail" data-wrn-owner="MegaMenu" data-wrn-part="rail" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">
{#each railList() as item, index}
{#if variant === "catalog"}
<button type="button" class="wrn-mega__rail-link" data-active='{activeCategoryIndex() === index ? "true" : "false"}' aria-pressed='{activeCategoryIndex() === index ? "true" : "false"}' @click='chooseCategory(item, index, event)'>
{#if item.icon}<span class="wrn-mega__rail-icon" aria-hidden="true"><span class='{item.icon}'></span></span>{/if}
<button type="button" class="wrn-mega__rail-link" data-active='{activeCategoryIndex() === index ? "true" : "false"}' aria-pressed='{activeCategoryIndex() === index ? "true" : "false"}' @click='chooseCategory(item, index, event)' data-wrn-owner="MegaMenu" data-wrn-part="railLink" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">
{#if item.icon}<span class="wrn-mega__rail-icon" aria-hidden="true" data-wrn-owner="MegaMenu" data-wrn-part="railIcon" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}"><span class='{item.icon}'></span></span>{/if}
<span><strong>{item.label}</strong>{#if item.description}<small>{item.description}</small>{/if}</span>
</button>
{:else}
<a class="wrn-mega__rail-link" href='{item.href || "#"}' @click='choose(item)'>
{#if item.icon}<span class="wrn-mega__rail-icon" aria-hidden="true"><span class='{item.icon}'></span></span>{/if}
<a class="wrn-mega__rail-link" href='{item.href || "#"}' @click='choose(item)' data-wrn-owner="MegaMenu" data-wrn-part="railLink" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">
{#if item.icon}<span class="wrn-mega__rail-icon" aria-hidden="true" data-wrn-owner="MegaMenu" data-wrn-part="railIcon" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}"><span class='{item.icon}'></span></span>{/if}
<span><strong>{item.label}</strong>{#if item.description}<small>{item.description}</small>{/if}</span>
</a>
{/if}
@@ -229,53 +229,53 @@ component MegaMenu {
</aside>
{/if}
<div class="wrn-mega__columns">
<div class="wrn-mega__columns" data-wrn-owner="MegaMenu" data-wrn-part="columns" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">
{#each visibleColumns() as column}
<section class="wrn-mega__column">
<header class="wrn-mega__column-header">
{#if column.eyebrow}<p class="wrn-mega__eyebrow">{column.eyebrow}</p>{/if}
<h3 class="wrn-mega__heading" data-show="column.heading">{column.heading}</h3>
{#if column.description}<p class="wrn-mega__column-description">{column.description}</p>{/if}
<section class="wrn-mega__column" data-wrn-owner="MegaMenu" data-wrn-part="column" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">
<header class="wrn-mega__column-header" data-wrn-owner="MegaMenu" data-wrn-part="columnHeader" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">
{#if column.eyebrow}<p class="wrn-mega__eyebrow" data-wrn-owner="MegaMenu" data-wrn-part="eyebrow" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">{column.eyebrow}</p>{/if}
<h3 class="wrn-mega__heading" data-show="column.heading" data-wrn-owner="MegaMenu" data-wrn-part="heading" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">{column.heading}</h3>
{#if column.description}<p class="wrn-mega__column-description" data-wrn-owner="MegaMenu" data-wrn-part="columnDescription" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">{column.description}</p>{/if}
</header>
{#if column.image}<img class="wrn-mega__column-image" src='{column.image}' alt='{column.imageAlt || ""}' loading="lazy" />{/if}
<ul class="wrn-mega__list">
{#if column.image}<img class="wrn-mega__column-image" src='{column.image}' alt='{column.imageAlt || ""}' loading="lazy" data-wrn-owner="MegaMenu" data-wrn-part="columnImage" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}"/>{/if}
<ul class="wrn-mega__list" data-wrn-owner="MegaMenu" data-wrn-part="list" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">
{#each itemsOf(column) as item}
<li>
<a class="wrn-mega__link" href='{item.href || "#"}' data-wrn-roving-item="true" aria-disabled='{item.disabled ? "true" : "false"}' @click='choose(item)'>
{#if item.image}<img class="wrn-mega__link-image" src='{item.image}' alt="" loading="lazy" />{/if}
<a class="wrn-mega__link" href='{item.href || "#"}' data-wrn-roving-item="true" aria-disabled='{item.disabled ? "true" : "false"}' @click='choose(item)' data-wrn-owner="MegaMenu" data-wrn-part="link" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">
{#if item.image}<img class="wrn-mega__link-image" src='{item.image}' alt="" loading="lazy" data-wrn-owner="MegaMenu" data-wrn-part="linkImage" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}"/>{/if}
{#if item.icon}
<span class='wrn-mega__link-icon {item.icon}' aria-hidden="true"></span>
<span class='wrn-mega__link-icon {item.icon}' aria-hidden="true" data-wrn-owner="MegaMenu" data-wrn-part="linkIcon" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}"></span>
{:else if variant === "catalog"}
<span class="wrn-mega__link-icon wrn-mega__link-icon--fallback" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M3 9h18"></path><path d="M9 21V9"></path></svg>
<span class="wrn-mega__link-icon wrn-mega__link-icon--fallback" aria-hidden="true" data-wrn-owner="MegaMenu" data-wrn-part="linkIcon" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-wrn-owner="MegaMenu" data-wrn-part="vector" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}"><rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M3 9h18"></path><path d="M9 21V9"></path></svg>
</span>
{/if}
<span class="wrn-mega__link-body">
{#if item.eyebrow}<span class="wrn-mega__link-eyebrow">{item.eyebrow}</span>{/if}
<span class="wrn-mega__link-label">{item.label}{#if item.badge}<span class="wrn-mega__badge">{item.badge}</span>{/if}</span>
{#if item.description}<span class="wrn-mega__link-description">{item.description}</span>{/if}
<span class="wrn-mega__link-body" data-wrn-owner="MegaMenu" data-wrn-part="linkBody" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">
{#if item.eyebrow}<span class="wrn-mega__link-eyebrow" data-wrn-owner="MegaMenu" data-wrn-part="linkEyebrow" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">{item.eyebrow}</span>{/if}
<span class="wrn-mega__link-label" data-wrn-owner="MegaMenu" data-wrn-part="linkLabel" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">{item.label}{#if item.badge}<span class="wrn-mega__badge" data-wrn-owner="MegaMenu" data-wrn-part="badge" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">{item.badge}</span>{/if}</span>
{#if item.description}<span class="wrn-mega__link-description" data-wrn-owner="MegaMenu" data-wrn-part="linkDescription" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">{item.description}</span>{/if}
</span>
</a>
</li>
{/each}
</ul>
{#if column.actionLabel}<a class="wrn-mega__column-action" href='{column.actionHref || "#"}'>{column.actionLabel}<span class="icon-[lucide--arrow-right]" aria-hidden="true"></span></a>{/if}
{#if column.actionLabel}<a class="wrn-mega__column-action" href='{column.actionHref || "#"}' data-wrn-owner="MegaMenu" data-wrn-part="columnAction" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">{column.actionLabel}<span class="icon-[lucide--arrow-right]" aria-hidden="true"></span></a>{/if}
</section>
{/each}
</div>
{#if featured.title || featured.image}
<aside class="wrn-mega__featured">
{#if featured.eyebrow}<p class="wrn-mega__eyebrow">{featured.eyebrow}</p>{/if}
<aside class="wrn-mega__featured" data-wrn-owner="MegaMenu" data-wrn-part="featured" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">
{#if featured.eyebrow}<p class="wrn-mega__eyebrow" data-wrn-owner="MegaMenu" data-wrn-part="eyebrow" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">{featured.eyebrow}</p>{/if}
{#if featured.image}<img src='{featured.image}' alt='{featured.imageAlt || ""}' loading="lazy" />{/if}
{#if featured.title}<strong>{featured.title}</strong>{/if}
{#if featured.description}<p>{featured.description}</p>{/if}
{#if featured.actionLabel}<a href='{featured.actionHref || "#"}'>{featured.actionLabel}<span class="icon-[lucide--arrow-right]" aria-hidden="true"></span></a>{/if}
{#if featured.actionLabel}<a href='{featured.actionHref || "#"}' data-wrn-owner="MegaMenu" data-wrn-part="link" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">{featured.actionLabel}<span class="icon-[lucide--arrow-right]" aria-hidden="true"></span></a>{/if}
</aside>
{/if}
</div>
{#if footer || actionLabel}<div class="wrn-mega__footer"><span>{footer}</span>{#if actionLabel}<a href='{actionHref || "#"}'>{actionLabel}<span class='{actionIcon}' aria-hidden="true"></span></a>{/if}</div>{/if}
{#if footer || actionLabel}<div class="wrn-mega__footer" data-wrn-owner="MegaMenu" data-wrn-part="footer" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}"><span>{footer}</span>{#if actionLabel}<a href='{actionHref || "#"}' data-wrn-owner="MegaMenu" data-wrn-part="link" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">{actionLabel}<span class='{actionIcon}' aria-hidden="true"></span></a>{/if}</div>{/if}
<slot />
</div>
</div>
packages/ui/components/MetricCard.wrn
+29 -29
View File
@@ -84,46 +84,46 @@ component MetricCard {
@click='selectCard(event)'
@keydown='if (selectable && (event.key === "Enter" || event.key === " ")) { event.preventDefault(); selectCard(event) }'
style='--wrn-metric-progress: {progress}%;'
>
<div class="wrn-metric-card__top">
<div class="wrn-metric-card__heading">
data-wrn-owner="MetricCard" data-wrn-part="root" data-wrn-component="MetricCard" data-wrn-axis-size='{size}' data-wrn-axis-color='{color}' data-wrn-axis-variant='{variant}'>
<div class="wrn-metric-card__top" data-wrn-owner="MetricCard" data-wrn-part="top" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<div class="wrn-metric-card__heading" data-wrn-owner="MetricCard" data-wrn-part="heading" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if label}
<p class="wrn-metric-card__label">{label}</p>
<p class="wrn-metric-card__label" data-wrn-owner="MetricCard" data-wrn-part="label" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{label}</p>
{/if}
{#if badge}
<span class="wrn-metric-card__badge">{badge}</span>
<span class="wrn-metric-card__badge" data-wrn-owner="MetricCard" data-wrn-part="badge" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{badge}</span>
{/if}
</div>
{#if icon}
<div class="wrn-metric-card__icon" aria-hidden="true">
<div class="wrn-metric-card__icon" aria-hidden="true" data-wrn-owner="MetricCard" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span class='{icon}'></span>
</div>
{/if}
</div>
<div class="wrn-metric-card__value-row">
<div class="wrn-metric-card__value-row" data-wrn-owner="MetricCard" data-wrn-part="valueRow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if prefix}
<span class="wrn-metric-card__prefix">{prefix}</span>
<span class="wrn-metric-card__prefix" data-wrn-owner="MetricCard" data-wrn-part="prefix" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{prefix}</span>
{/if}
<strong class="wrn-metric-card__value">{value}</strong>
<strong class="wrn-metric-card__value" data-wrn-owner="MetricCard" data-wrn-part="value" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{value}</strong>
{#if suffix}
<span class="wrn-metric-card__suffix">{suffix}</span>
<span class="wrn-metric-card__suffix" data-wrn-owner="MetricCard" data-wrn-part="suffix" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{suffix}</span>
{/if}
</div>
{#if description}
<p class="wrn-metric-card__description">{description}</p>
<p class="wrn-metric-card__description" data-wrn-owner="MetricCard" data-wrn-part="description" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{description}</p>
{/if}
<slot></slot>
{#if progress >= 0}
<div class="wrn-metric-card__progress-block">
<div class="wrn-metric-card__progress-meta">
<div class="wrn-metric-card__progress-block" data-wrn-owner="MetricCard" data-wrn-part="progressBlock" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<div class="wrn-metric-card__progress-meta" data-wrn-owner="MetricCard" data-wrn-part="progressMeta" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span>{progressLabel || "Progress"}</span>
<strong>{progress}%</strong>
</div>
@@ -134,8 +134,8 @@ component MetricCard {
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow='{progress}'
>
<span class="wrn-metric-card__progress-value"></span>
data-wrn-owner="MetricCard" data-wrn-part="progressTrack" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span class="wrn-metric-card__progress-value" data-wrn-owner="MetricCard" data-wrn-part="progressValue" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
</div>
</div>
{/if}
@@ -144,26 +144,26 @@ component MetricCard {
<div
class="wrn-metric-card__trend"
data-direction='{trendDirection}'
>
data-wrn-owner="MetricCard" data-wrn-part="trend" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if trendDirection === "up" || trendDirection === "positive"}
<span class="icon-[lucide--trending-up] wrn-metric-card__trend-icon" aria-hidden="true"></span>
<span class="icon-[lucide--trending-up] wrn-metric-card__trend-icon" aria-hidden="true" data-wrn-owner="MetricCard" data-wrn-part="trendIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
{:else if trendDirection === "down" || trendDirection === "negative"}
<span class="icon-[lucide--trending-down] wrn-metric-card__trend-icon" aria-hidden="true"></span>
<span class="icon-[lucide--trending-down] wrn-metric-card__trend-icon" aria-hidden="true" data-wrn-owner="MetricCard" data-wrn-part="trendIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
{:else}
<span class="icon-[lucide--minus] wrn-metric-card__trend-icon" aria-hidden="true"></span>
<span class="icon-[lucide--minus] wrn-metric-card__trend-icon" aria-hidden="true" data-wrn-owner="MetricCard" data-wrn-part="trendIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
{/if}
{#if trend}
<strong class="wrn-metric-card__trend-value">{trend}</strong>
<strong class="wrn-metric-card__trend-value" data-wrn-owner="MetricCard" data-wrn-part="trendValue" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{trend}</strong>
{/if}
{#if trendLabel}
<span class="wrn-metric-card__trend-label">{trendLabel}</span>
<span class="wrn-metric-card__trend-label" data-wrn-owner="MetricCard" data-wrn-part="trendLabel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{trendLabel}</span>
{/if}
</div>
{/if}
<div class="wrn-metric-card__footer">
<div class="wrn-metric-card__footer" data-wrn-owner="MetricCard" data-wrn-part="footer" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<slot name="footer"></slot>
{#if href}
@@ -174,15 +174,15 @@ component MetricCard {
class="wrn-metric-card__action"
aria-disabled='{disabled ? "true" : "false"}'
@click='activateAction(event)'
>
data-wrn-owner="MetricCard" data-wrn-part="action" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span>{actionLabel || "View details"}</span>
{#if actionIcon}
<span class='wrn-metric-card__action-icon {actionIcon}' aria-hidden="true"></span>
<span class='wrn-metric-card__action-icon {actionIcon}' aria-hidden="true" data-wrn-owner="MetricCard" data-wrn-part="actionIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
{:else if external}
<span class="wrn-metric-card__action-icon icon-[lucide--external-link]" aria-hidden="true"></span>
<span class="wrn-metric-card__action-icon icon-[lucide--external-link]" aria-hidden="true" data-wrn-owner="MetricCard" data-wrn-part="actionIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
{:else if showArrow}
<span class="wrn-metric-card__action-icon icon-[lucide--arrow-right]" aria-hidden="true"></span>
<span class="wrn-metric-card__action-icon icon-[lucide--arrow-right]" aria-hidden="true" data-wrn-owner="MetricCard" data-wrn-part="actionIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
{/if}
</a>
{:else if actionLabel}
@@ -191,12 +191,12 @@ component MetricCard {
class="wrn-metric-card__action"
disabled='{disabled}'
@click='activateAction(event)'
>
data-wrn-owner="MetricCard" data-wrn-part="action" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span>{actionLabel}</span>
{#if actionIcon}
<span class='wrn-metric-card__action-icon {actionIcon}' aria-hidden="true"></span>
<span class='wrn-metric-card__action-icon {actionIcon}' aria-hidden="true" data-wrn-owner="MetricCard" data-wrn-part="actionIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
{:else if showArrow}
<span class="wrn-metric-card__action-icon icon-[lucide--arrow-right]" aria-hidden="true"></span>
<span class="wrn-metric-card__action-icon icon-[lucide--arrow-right]" aria-hidden="true" data-wrn-owner="MetricCard" data-wrn-part="actionIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
{/if}
</button>
{/if}
packages/ui/components/MetricGrid.wrn
+4 -4
View File
@@ -55,9 +55,9 @@ component MetricGrid {
data-auto-fit='{minItemWidth ? "true" : "false"}'
class='wrn-metric-grid {class}'
style='display:block;width:100%;min-width:0;--wrn-metric-columns:{columns};--wrn-metric-tablet-columns:{tabletColumns};--wrn-metric-mobile-columns:{mobileColumns};--wrn-metric-min-item-width:{minItemWidth || "18rem"};'
>
<div class="wrn-metric-grid__frame">
<div class="wrn-metric-grid__surface">
data-wrn-owner="MetricGrid" data-wrn-part="root" data-wrn-component="MetricGrid" data-wrn-axis-size='{size}' data-wrn-axis-color='{color}' data-wrn-axis-variant='{variant}'>
<div class="wrn-metric-grid__frame" data-wrn-owner="MetricGrid" data-wrn-part="frame" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<div class="wrn-metric-grid__surface" data-wrn-owner="MetricGrid" data-wrn-part="surface" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#each items as item, itemIndex}
<MetricCard
label='{item.label || item.title || "Metric"}'
@@ -92,7 +92,7 @@ component MetricGrid {
@action='forwardAction(item, itemIndex, event)'
/>
{:empty}
<div class="wrn-metric-grid__empty" role="status">
<div class="wrn-metric-grid__empty" role="status" data-wrn-owner="MetricGrid" data-wrn-part="empty" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<slot>No metrics are available.</slot>
</div>
{/each}
packages/ui/components/Modal.wrn
+18 -18
View File
@@ -96,7 +96,7 @@ component Modal {
}
view {
<div
<div data-wrn-owner="Modal" data-wrn-part="root" data-wrn-component="Modal" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}"
{...attrs}
data-ui-component="Modal"
data-open='{(open || visible) ? "true" : "false"}'
@@ -112,7 +112,7 @@ component Modal {
@wrnexus:modal:close='hideModal("api", event)'
>
{#if triggerLabel}
<button
<button data-wrn-owner="Modal" data-wrn-part="trigger" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}"
type="button"
class="wrn-modal__trigger"
aria-haspopup="dialog"
@@ -130,7 +130,7 @@ component Modal {
</button>
{/if}
<span
<span data-wrn-owner="Modal" data-wrn-part="triggerSlot" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}"
class="wrn-modal__trigger-slot"
@click='showModal(event)'
>
@@ -140,13 +140,13 @@ component Modal {
</slot>
</span>
<div
<div data-wrn-owner="Modal" data-wrn-part="layer" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}"
class="wrn-modal__layer"
data-show="(open || visible)"
role="presentation"
@keydown='handleKeydown(event)'
>
<button
<button data-wrn-owner="Modal" data-wrn-part="backdrop" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}"
type="button"
class="wrn-modal__backdrop"
aria-label='{closeLabel}'
@@ -154,28 +154,28 @@ component Modal {
>
</button>
<section
<section data-wrn-owner="Modal" data-wrn-part="panel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}"
class="wrn-modal__panel"
role="dialog"
aria-modal="true"
aria-label='{label || title}'
tabindex="-1"
>
{#if showHeader}<header
{#if showHeader}<header data-wrn-owner="Modal" data-wrn-part="header" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}"
class="wrn-modal__header"
>
<div
<div data-wrn-owner="Modal" data-wrn-part="heading" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}"
class="wrn-modal__heading"
>
{#if icon}
<span
<span data-wrn-owner="Modal" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}"
class='wrn-modal__icon {icon}'
aria-hidden="true"
>
</span>
{/if}
<div
<div data-wrn-owner="Modal" data-wrn-part="headingCopy" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}"
class="wrn-modal__heading-copy"
>
<slot
@@ -192,7 +192,7 @@ component Modal {
</div>
{#if showClose}
<button
<button data-wrn-owner="Modal" data-wrn-part="close" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}"
type="button"
class="wrn-modal__close"
aria-label='{closeLabel}'
@@ -216,17 +216,17 @@ component Modal {
{/if}
</header>{/if}
<div
<div data-wrn-owner="Modal" data-wrn-part="body" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}"
class="wrn-modal__body"
>
<slot></slot>
</div>
{#if showFooter}
<footer
<footer data-wrn-owner="Modal" data-wrn-part="footer" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}"
class="wrn-modal__footer"
>
<div
<div data-wrn-owner="Modal" data-wrn-part="customFooter" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}"
class="wrn-modal__custom-footer"
>
<slot
@@ -235,11 +235,11 @@ component Modal {
</slot>
</div>
<div
<div data-wrn-owner="Modal" data-wrn-part="actions" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}"
class="wrn-modal__actions"
>
{#if cancelLabel}
<button
<button data-wrn-owner="Modal" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}"
type="button"
class="wrn-modal__button wrn-modal__button--secondary"
@click='cancelModal(event)'
@@ -256,14 +256,14 @@ component Modal {
{/if}
{#if confirmLabel}
<button
<button data-wrn-owner="Modal" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}"
type="button"
class="wrn-modal__button wrn-modal__button--primary"
disabled='{confirmDisabled || confirmLoading}'
@click='confirmModal(event)'
>
{#if confirmLoading}
<span
<span data-wrn-owner="Modal" data-wrn-part="spinner" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-open="{open || visible}"
class="wrn-modal__spinner"
aria-hidden="true"
>
packages/ui/components/Nav.wrn
+23 -23
View File
@@ -57,7 +57,7 @@ component Nav {
}
view {
<nav
<nav data-wrn-owner="Nav" data-wrn-part="root" data-wrn-component="Nav" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"
{...attrs}
data-ui-component="Nav"
class='wrn-nav {class}'
@@ -68,7 +68,7 @@ component Nav {
role="navigation"
aria-label='{label}'
>
<button
<button data-wrn-owner="Nav" data-wrn-part="toggle" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"
type="button"
class="wrn-nav__toggle"
data-show="collapsible"
@@ -76,14 +76,14 @@ component Nav {
aria-label='{toggleLabel}'
@click='toggleMenu()'
>
<span class="wrn-nav__toggle-bar" aria-hidden="true"></span>
<span class="wrn-nav__toggle-text">{toggleLabel}</span>
<span data-wrn-owner="Nav" data-wrn-part="toggleBar" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" class="wrn-nav__toggle-bar" aria-hidden="true"></span>
<span data-wrn-owner="Nav" data-wrn-part="toggleText" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" class="wrn-nav__toggle-text">{toggleLabel}</span>
</button>
<ul class="wrn-nav__list" data-wrn-roving='{rovingAxis()}'>
<ul data-wrn-owner="Nav" data-wrn-part="list" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" class="wrn-nav__list" data-wrn-roving='{rovingAxis()}'>
{#each itemList() as item}
<li class="wrn-nav__item" data-has-children='{childrenOf(item).length > 0}'>
<a
<li data-wrn-owner="Nav" data-wrn-part="item" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" class="wrn-nav__item" data-has-children='{childrenOf(item).length > 0}'>
<a data-wrn-owner="Nav" data-wrn-part="link" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"
class="wrn-nav__link"
href='{item.href || "#"}'
data-wrn-roving-item="true"
@@ -92,28 +92,28 @@ component Nav {
aria-disabled='{item.disabled ? "true" : "false"}'
@click='choose(item)'
>
<span
<span data-wrn-owner="Nav" data-wrn-part="icon" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"
class='wrn-nav__icon {item.icon}'
data-show="item.icon"
aria-hidden="true"
></span>
<span class="wrn-nav__label">{item.label}</span>
<span class="wrn-nav__badge" data-show="item.badge">{item.badge}</span>
<span
<span data-wrn-owner="Nav" data-wrn-part="label" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" class="wrn-nav__label">{item.label}</span>
<span data-wrn-owner="Nav" data-wrn-part="badge" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" class="wrn-nav__badge" data-show="item.badge">{item.badge}</span>
<span data-wrn-owner="Nav" data-wrn-part="arrow" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"
class="wrn-nav__arrow"
data-show="childrenOf(item).length > 0"
aria-hidden="true"
>&#8250;</span>
</a>
<ul
<ul data-wrn-owner="Nav" data-wrn-part="submenu" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"
class="wrn-nav__submenu"
data-wrn-anchored="true"
data-show="childrenOf(item).length > 0"
>
{#each childrenOf(item) as child}
<li class="wrn-nav__item" data-has-children='{childrenOf(child).length > 0}'>
<a
<li data-wrn-owner="Nav" data-wrn-part="item" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" class="wrn-nav__item" data-has-children='{childrenOf(child).length > 0}'>
<a data-wrn-owner="Nav" data-wrn-part="link" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"
class="wrn-nav__link"
href='{child.href || "#"}'
data-active='{isActive(child)}'
@@ -121,28 +121,28 @@ component Nav {
aria-disabled='{child.disabled ? "true" : "false"}'
@click='choose(child)'
>
<span
<span data-wrn-owner="Nav" data-wrn-part="icon" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"
class='wrn-nav__icon {child.icon}'
data-show="child.icon"
aria-hidden="true"
></span>
<span class="wrn-nav__label">{child.label}</span>
<span class="wrn-nav__badge" data-show="child.badge">{child.badge}</span>
<span
<span data-wrn-owner="Nav" data-wrn-part="label" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" class="wrn-nav__label">{child.label}</span>
<span data-wrn-owner="Nav" data-wrn-part="badge" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" class="wrn-nav__badge" data-show="child.badge">{child.badge}</span>
<span data-wrn-owner="Nav" data-wrn-part="arrow" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"
class="wrn-nav__arrow"
data-show="childrenOf(child).length > 0"
aria-hidden="true"
>&#8250;</span>
</a>
<ul
<ul data-wrn-owner="Nav" data-wrn-part="submenu" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"
class="wrn-nav__submenu wrn-nav__submenu--level3"
data-wrn-anchored="true"
data-show="childrenOf(child).length > 0"
>
{#each childrenOf(child) as leaf}
<li class="wrn-nav__item">
<a
<li data-wrn-owner="Nav" data-wrn-part="item" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" class="wrn-nav__item">
<a data-wrn-owner="Nav" data-wrn-part="link" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"
class="wrn-nav__link"
href='{leaf.href || "#"}'
data-active='{isActive(leaf)}'
@@ -150,12 +150,12 @@ component Nav {
aria-disabled='{leaf.disabled ? "true" : "false"}'
@click='choose(leaf)'
>
<span
<span data-wrn-owner="Nav" data-wrn-part="icon" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"
class='wrn-nav__icon {leaf.icon}'
data-show="leaf.icon"
aria-hidden="true"
></span>
<span class="wrn-nav__label">{leaf.label}</span>
<span data-wrn-owner="Nav" data-wrn-part="label" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" class="wrn-nav__label">{leaf.label}</span>
</a>
</li>
{/each}
packages/ui/components/Navbar.wrn
+40 -44
View File
@@ -157,7 +157,7 @@ size: string = "default"
}
client function toggleDropdown(event, item) {
output[event.currentTarget.open ? "open" : "close"]({
output[event.detail.open ? "open" : "close"]({
source: "menu",
item: item
})
@@ -165,22 +165,22 @@ size: string = "default"
}
view {
<header class="wrn-navbar wrn-navbar--width-{maxWidth} wrn-component--color-{color} wrn-component--size-{size} {sticky ? 'wrn-navbar--sticky' : ''} {floating ? 'wrn-navbar--floating' : ''} {class}" style="--wrn-navbar-floating-start: {startFloating};" data-wrn-navbar data-open-on-hover="{openOnHover}" data-floating="{floating ? 'true' : 'false'}" data-collapse-at="{collapseAt}" data-mobile-panel="{mobilePanel}" data-mobile-utilities-position="{mobileUtilitiesPosition}" data-gutter="{gutter}" data-content-gutter="{contentGutter}" data-flush-mobile="{flushMobile ? 'true' : 'false'}">
<div class="wrn-navbar__topbar" aria-label="{topbarLabel}">
<header class="wrn-navbar wrn-navbar--width-{maxWidth} wrn-component--color-{color} wrn-component--size-{size} {sticky ? 'wrn-navbar--sticky' : ''} {floating ? 'wrn-navbar--floating' : ''} {class}" style="--wrn-navbar-floating-start: {startFloating};" data-wrn-navbar data-open-on-hover="{openOnHover}" data-floating="{floating ? 'true' : 'false'}" data-collapse-at="{collapseAt}" data-mobile-panel="{mobilePanel}" data-mobile-utilities-position="{mobileUtilitiesPosition}" data-gutter="{gutter}" data-content-gutter="{contentGutter}" data-flush-mobile="{flushMobile ? 'true' : 'false'}" data-wrn-owner="Navbar" data-wrn-part="root" data-wrn-component="Navbar" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<div class="wrn-navbar__topbar" aria-label="{topbarLabel}" data-wrn-owner="Navbar" data-wrn-part="topbar" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<slot name="topbar" />
</div>
<div class="wrn-navbar__main">
<div class="wrn-navbar__main" data-wrn-owner="Navbar" data-wrn-part="main" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#if brand.logo || brand.icon || brand.label || brand.description}
<a class="wrn-navbar__brand" href="{brand.href || '/'}" aria-label="{brand.ariaLabel || brand.label || label}">
<a class="wrn-navbar__brand" href="{brand.href || '/'}" aria-label="{brand.ariaLabel || brand.label || label}" data-wrn-owner="Navbar" data-wrn-part="brand" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#if brand.logo}
<img class="wrn-navbar__brand-logo" src="{brand.logo}" alt="{brand.logoAlt || brand.label || ''}" width="{brand.logoWidth || ''}" height="{brand.logoHeight || ''}" />
<img class="wrn-navbar__brand-logo" src="{brand.logo}" alt="{brand.logoAlt || brand.label || ''}" width="{brand.logoWidth || ''}" height="{brand.logoHeight || ''}" data-wrn-owner="Navbar" data-wrn-part="brandLogo" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"/>
{/if}
{#if brand.icon}
<span class="wrn-navbar__brand-icon {brand.icon}" aria-hidden="true"></span>
<span class="wrn-navbar__brand-icon {brand.icon}" aria-hidden="true" data-wrn-owner="Navbar" data-wrn-part="brandIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></span>
{/if}
{#if brand.label || brand.description}
<span class="wrn-navbar__brand-copy">
<span class="wrn-navbar__brand-copy" data-wrn-owner="Navbar" data-wrn-part="brandCopy" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#if brand.label}<strong data-t="{brand.labelKey || (translationPrefix ? translationPrefix + '.brand' : '')}">{brand.label}</strong>{/if}
{#if brand.description}<small data-t="{brand.descriptionKey || (translationPrefix ? translationPrefix + '.brand.description' : '')}">{brand.description}</small>{/if}
</span>
@@ -189,8 +189,8 @@ size: string = "default"
{/if}
<slot name="brand" />
<div class="wrn-navbar__collapse {mobileOpen ? 'is-open' : ''}">
<nav class="wrn-navbar__menus" aria-label="{label}" data-wrn-roving="horizontal">
<div class="wrn-navbar__collapse {mobileOpen ? 'is-open' : ''}" data-wrn-owner="Navbar" data-wrn-part="collapse" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<nav class="wrn-navbar__menus" aria-label="{label}" data-wrn-roving="horizontal" data-wrn-owner="Navbar" data-wrn-part="menus" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#each items as item}
{#if itemType(item) === "mega"}
<MegaMenu
@@ -214,32 +214,32 @@ size: string = "default"
actionIcon="{megaData(item).actionIcon || 'icon-[lucide--arrow-right]'}"
footer="{megaData(item).footer || ''}"
/>
<a class="wrn-navbar__menu-link wrn-navbar__mobile-mega-link" data-wrn-roving-item="true" href="{item.href || megaData(item).actionHref || '#'}" target="{item.target || ''}" rel="{item.rel || ''}" aria-current="{isItemActive(item) ? 'page' : 'false'}" @click="selectItem(item, 1, event)">
<a class="wrn-navbar__menu-link wrn-navbar__mobile-mega-link" data-wrn-roving-item="true" href="{item.href || megaData(item).actionHref || '#'}" target="{item.target || ''}" rel="{item.rel || ''}" aria-current="{isItemActive(item) ? 'page' : 'false'}" @click="selectItem(item, 1, event)" data-wrn-owner="Navbar" data-wrn-part="menuLink" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#if item.icon}<span class="{item.icon}" aria-hidden="true"></span>{/if}
<span data-t="{translationKey(item, 'label')}">{item.label}</span>
</a>
{:else if itemType(item) === "dropdown"}
<details class="wrn-navbar__dropdown wrn-navbar__dropdown--{item.type || 'dropdown'}" name="wrn-navbar-menu" @toggle="toggleDropdown(event, item)">
<summary data-wrn-roving-item="true" aria-current="{isItemActive(item) ? 'page' : 'false'}">
<div data-wrn-menu data-open="false" class="wrn-navbar__dropdown wrn-navbar__dropdown--{item.type || 'dropdown'}" name="wrn-navbar-menu" @wrn-menu-toggle="toggleDropdown(event, item)" data-wrn-owner="Navbar" data-wrn-part="dropdown" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<button type="button" data-wrn-menu-toggle aria-expanded="false" data-wrn-roving-item="true" aria-current="{isItemActive(item) ? 'page' : 'false'}" data-wrn-owner="Navbar" data-wrn-part="trigger" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#if item.icon}<span class="{item.icon}" aria-hidden="true"></span>{/if}
<span data-t="{translationKey(item, 'label')}">{item.label}</span>
<span class="wrn-navbar__chevron" aria-hidden="true"></span>
</summary>
<div class="wrn-navbar__panel wrn-navbar__panel--columns-{item.columns || 1}">
{#if item.description}<p class="wrn-navbar__panel-intro" data-t="{translationKey(item, 'description')}">{item.description}</p>{/if}
<span class="wrn-navbar__chevron" aria-hidden="true" data-wrn-owner="Navbar" data-wrn-part="chevron" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></span>
</button>
<div class="wrn-navbar__panel wrn-navbar__panel--columns-{item.columns || 1}" data-wrn-owner="Navbar" data-wrn-part="panel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#if item.description}<p class="wrn-navbar__panel-intro" data-t="{translationKey(item, 'description')}" data-wrn-owner="Navbar" data-wrn-part="panelIntro" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{item.description}</p>{/if}
{#each dropdownItems(item) as child}
<div class="wrn-navbar__group">
<div class="wrn-navbar__group" data-wrn-owner="Navbar" data-wrn-part="group" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#if dropdownGroupItems(child).length}
{#if child.label}<strong class="wrn-navbar__group-title" data-t="{translationKey(child, 'label')}">{child.label}</strong>{/if}
{#if child.label}<strong class="wrn-navbar__group-title" data-t="{translationKey(child, 'label')}" data-wrn-owner="Navbar" data-wrn-part="groupTitle" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{child.label}</strong>{/if}
{#if child.description}<small data-t="{translationKey(child, 'description')}">{child.description}</small>{/if}
{#each dropdownGroupItems(child) as nested}
<a href="{nested.href || '#'}" target="{nested.target || ''}" rel="{nested.rel || ''}" aria-current="{nested.value === active ? 'page' : 'false'}" @click="selectItem(nested, 3, event)">
<a href="{nested.href || '#'}" target="{nested.target || ''}" rel="{nested.rel || ''}" aria-current="{nested.value === active ? 'page' : 'false'}" @click="selectItem(nested, 3, event)" data-wrn-owner="Navbar" data-wrn-part="link" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#if nested.icon}<span class="{nested.icon}" aria-hidden="true"></span>{/if}
<span><strong data-t="{translationKey(nested, 'label')}">{nested.label}</strong>{#if nested.description}<small data-t="{translationKey(nested, 'description')}">{nested.description}</small>{/if}</span>
</a>
{/each}
{:else}
<a href="{child.href || '#'}" target="{child.target || ''}" rel="{child.rel || ''}" aria-current="{child.value === active ? 'page' : 'false'}" @click="selectItem(child, 2, event)">
<a href="{child.href || '#'}" target="{child.target || ''}" rel="{child.rel || ''}" aria-current="{child.value === active ? 'page' : 'false'}" @click="selectItem(child, 2, event)" data-wrn-owner="Navbar" data-wrn-part="link" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#if child.icon}<span class="{child.icon}" aria-hidden="true"></span>{/if}
<span><strong data-t="{translationKey(child, 'label')}">{child.label}</strong>{#if child.description}<small data-t="{translationKey(child, 'description')}">{child.description}</small>{/if}</span>
</a>
@@ -247,9 +247,9 @@ size: string = "default"
</div>
{/each}
</div>
</details>
</div>
{:else}
<a class="wrn-navbar__menu-link" data-wrn-roving-item="true" href="{item.href || '#'}" target="{item.target || ''}" rel="{item.rel || ''}" aria-current="{item.value === active ? 'page' : 'false'}" @click="selectItem(item, 1, event)">
<a class="wrn-navbar__menu-link" data-wrn-roving-item="true" href="{item.href || '#'}" target="{item.target || ''}" rel="{item.rel || ''}" aria-current="{item.value === active ? 'page' : 'false'}" @click="selectItem(item, 1, event)" data-wrn-owner="Navbar" data-wrn-part="menuLink" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#if item.icon}<span class="{item.icon}" aria-hidden="true"></span>{/if}
<span data-t="{translationKey(item, 'label')}">{item.label}</span>
</a>
@@ -257,10 +257,10 @@ size: string = "default"
{/each}
</nav>
<div class="wrn-navbar__actions">
<div class="wrn-navbar__actions" data-wrn-owner="Navbar" data-wrn-part="actions" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<slot name="actions" />
{#each actions as item}
<a class="wrn-navbar__action wrn-navbar__action--{item.variant || 'link'}" href="{item.href || '#'}" target="{item.target || ''}" rel="{item.rel || ''}" @click="selectAction(item, event)">
<a class="wrn-navbar__action wrn-navbar__action--{item.variant || 'link'}" href="{item.href || '#'}" target="{item.target || ''}" rel="{item.rel || ''}" @click="selectAction(item, event)" data-wrn-owner="Navbar" data-wrn-part="action" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#if item.icon}<span class="{item.icon}" aria-hidden="true"></span>{/if}
<span data-t="{translationKey(item, 'label')}">{item.label}</span>
</a>
@@ -268,9 +268,9 @@ size: string = "default"
</div>
</div>
<div class="wrn-navbar__utilities"><slot name="utilities" /></div>
<div class="wrn-navbar__utilities" data-wrn-owner="Navbar" data-wrn-part="utilities" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"><slot name="utilities" /></div>
<button type="button" class="wrn-navbar__toggle" aria-label="{mobileLabel}" aria-expanded="{mobileOpen}" @click="toggleNavigation(event)">
<button type="button" class="wrn-navbar__toggle" aria-label="{mobileLabel}" aria-expanded="{mobileOpen}" @click="toggleNavigation(event)" data-wrn-owner="Navbar" data-wrn-part="toggle" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<span aria-hidden="true"></span><span aria-hidden="true"></span><span aria-hidden="true"></span>
</button>
</div>
@@ -353,7 +353,7 @@ size: string = "default"
.wrn-navbar__brand,
.wrn-navbar__menu-link,
.wrn-navbar__dropdown summary,
.wrn-navbar__dropdown [data-wrn-menu-toggle],
.wrn-navbar__action,
.wrn-navbar__panel a {
color: inherit;
@@ -465,7 +465,7 @@ size: string = "default"
}
.wrn-navbar__menu-link,
.wrn-navbar__dropdown > summary,
.wrn-navbar__dropdown > [data-wrn-menu-toggle],
.wrn-navbar__action {
display: inline-flex;
min-height: 2.25rem;
@@ -482,14 +482,14 @@ size: string = "default"
}
.wrn-navbar__menu-link:hover,
.wrn-navbar__dropdown > summary:hover,
.wrn-navbar__dropdown > [data-wrn-menu-toggle]:hover,
.wrn-navbar__mega .wrn-mega__trigger:hover {
color: var(--wrn-color-text);
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
}
.wrn-navbar__menu-link[aria-current="page"],
.wrn-navbar__dropdown > summary[aria-current="page"],
.wrn-navbar__dropdown > [data-wrn-menu-toggle][aria-current="page"],
.wrn-navbar__mega[data-active="true"] .wrn-mega__trigger {
color: var(--wrn-color-text);
font-weight: 600;
@@ -498,7 +498,7 @@ size: string = "default"
}
.wrn-navbar__menu-link[aria-current="page"]:hover,
.wrn-navbar__dropdown > summary[aria-current="page"]:hover,
.wrn-navbar__dropdown > [data-wrn-menu-toggle][aria-current="page"]:hover,
.wrn-navbar__mega[data-active="true"] .wrn-mega__trigger:hover {
color: var(--wrn-color-text);
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
@@ -508,14 +508,10 @@ size: string = "default"
position: relative;
}
.wrn-navbar__dropdown > summary {
.wrn-navbar__dropdown > [data-wrn-menu-toggle] {
list-style: none;
}
.wrn-navbar__dropdown > summary::-webkit-details-marker {
display: none;
}
.wrn-navbar__chevron {
width: 0.45rem;
height: 0.45rem;
@@ -525,7 +521,7 @@ size: string = "default"
transition: transform var(--wrn-motion-fast, 150ms) ease;
}
.wrn-navbar__dropdown[open] .wrn-navbar__chevron {
.wrn-navbar__dropdown[data-open="true"] .wrn-navbar__chevron {
transform: rotate(225deg) translate(-0.1rem, -0.1rem);
}
@@ -560,14 +556,14 @@ size: string = "default"
content: "";
}
.wrn-navbar__dropdown:not([open]) > .wrn-navbar__panel {
.wrn-navbar__dropdown:not([data-open="true"]) > .wrn-navbar__panel {
display: none;
opacity: 0;
transform: translateX(-50%) translateY(-0.5rem) scale(0.98);
}
@starting-style {
.wrn-navbar__dropdown[open] > .wrn-navbar__panel {
.wrn-navbar__dropdown[data-open="true"] > .wrn-navbar__panel {
opacity: 0;
transform: translateX(-50%) translateY(-0.5rem) scale(0.98);
}
@@ -768,7 +764,7 @@ size: string = "default"
.wrn-navbar__mega { display: none; }
.wrn-navbar__mobile-mega-link { display: flex; }
.wrn-navbar__menu-link,
.wrn-navbar__dropdown > summary,
.wrn-navbar__dropdown > [data-wrn-menu-toggle],
.wrn-navbar__action {
width: 100%;
}
@@ -789,8 +785,8 @@ size: string = "default"
max-width: 100%;
margin-top: 0.25rem;
}
.wrn-navbar__dropdown:not([open]) > .wrn-navbar__panel,
.wrn-navbar__dropdown[open] > .wrn-navbar__panel {
.wrn-navbar__dropdown:not([data-open="true"]) > .wrn-navbar__panel,
.wrn-navbar__dropdown[data-open="true"] > .wrn-navbar__panel {
transform: none;
}
.wrn-navbar__panel[class*="wrn-navbar__panel--columns-"] {
@@ -828,7 +824,7 @@ size: string = "default"
flex: none;
flex-direction: column;
}
.wrn-navbar[data-collapse-at="1100px"] :is(.wrn-navbar__menu-link, .wrn-navbar__dropdown > summary, .wrn-navbar__action) { width: 100%; }
.wrn-navbar[data-collapse-at="1100px"] :is(.wrn-navbar__menu-link, .wrn-navbar__dropdown > [data-wrn-menu-toggle], .wrn-navbar__action) { width: 100%; }
.wrn-navbar[data-collapse-at="1100px"] :is(.wrn-navbar__mega, .wrn-navbar__mega .wrn-mega__trigger) { width: 100%; }
.wrn-navbar[data-collapse-at="1100px"] .wrn-navbar__mega { display: none; }
.wrn-navbar[data-collapse-at="1100px"] .wrn-navbar__mobile-mega-link { display: flex; }
packages/ui/components/PageHeader.wrn
+26 -26
View File
@@ -31,7 +31,7 @@ component PageHeader {
}
view {
<section
<section data-wrn-owner="PageHeader" data-wrn-part="root" data-wrn-component="PageHeader" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
{...attrs}
data-ui-component="PageHeader"
data-size='{size}'
@@ -44,29 +44,29 @@ component PageHeader {
aria-labelledby='{id}'
class='wrn-page-header {class}'
>
<div
<div data-wrn-owner="PageHeader" data-wrn-part="decoration" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
class="wrn-page-header__decoration"
aria-hidden="true"
>
<span
<span data-wrn-owner="PageHeader" data-wrn-part="glow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
class="wrn-page-header__glow wrn-page-header__glow--one"
>
</span>
<span
<span data-wrn-owner="PageHeader" data-wrn-part="glow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
class="wrn-page-header__glow wrn-page-header__glow--two"
>
</span>
<span
<span data-wrn-owner="PageHeader" data-wrn-part="gridPattern" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
class="wrn-page-header__grid-pattern"
>
</span>
</div>
<div
<div data-wrn-owner="PageHeader" data-wrn-part="inner" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
class="wrn-page-header__inner"
>
{#if showBreadcrumbs && breadcrumbs.length > 0}
<div
<div data-wrn-owner="PageHeader" data-wrn-part="breadcrumb" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
class="wrn-page-header__breadcrumb"
>
<Breadcrumb
@@ -79,7 +79,7 @@ component PageHeader {
/>
</div>
{:else if showBreadcrumbs && breadcrumbParent}
<div
<div data-wrn-owner="PageHeader" data-wrn-part="breadcrumb" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
class="wrn-page-header__breadcrumb"
>
<Breadcrumb
@@ -103,7 +103,7 @@ current: true
/>
</div>
{:else if showBreadcrumbs && (breadcrumbCurrent || title)}
<div
<div data-wrn-owner="PageHeader" data-wrn-part="breadcrumb" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
class="wrn-page-header__breadcrumb"
>
<Breadcrumb
@@ -123,33 +123,33 @@ current: true
</div>
{/if}
<div
<div data-wrn-owner="PageHeader" data-wrn-part="layout" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
class="wrn-page-header__layout"
>
<div
<div data-wrn-owner="PageHeader" data-wrn-part="content" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
class="wrn-page-header__content"
>
<div
<div data-wrn-owner="PageHeader" data-wrn-part="intro" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
class="wrn-page-header__intro"
>
{#if icon}
<span
<span data-wrn-owner="PageHeader" data-wrn-part="iconWrap" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
class="wrn-page-header__icon-wrap"
>
{#if icon === "sparkles"}
<span
<span data-wrn-owner="PageHeader" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
class="icon-[lucide--sparkles] wrn-page-header__icon"
aria-hidden="true"
>
</span>
{:else if icon === "component"}
<span
<span data-wrn-owner="PageHeader" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
class="icon-[lucide--component] wrn-page-header__icon"
aria-hidden="true"
>
</span>
{:else}
<span
<span data-wrn-owner="PageHeader" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
class='{icon} wrn-page-header__icon'
aria-hidden="true"
>
@@ -158,19 +158,19 @@ current: true
</span>
{/if}
<div
<div data-wrn-owner="PageHeader" data-wrn-part="copy" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
class="wrn-page-header__copy"
>
{#if eyebrow}
<div
<div data-wrn-owner="PageHeader" data-wrn-part="eyebrowRow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
class="wrn-page-header__eyebrow-row"
>
<span
<span data-wrn-owner="PageHeader" data-wrn-part="eyebrowMark" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
class="wrn-page-header__eyebrow-mark"
aria-hidden="true"
>
</span>
<p
<p data-wrn-owner="PageHeader" data-wrn-part="eyebrow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
class="wrn-page-header__eyebrow"
>
{eyebrow}
@@ -179,7 +179,7 @@ current: true
{/if}
{#if title}
<h1
<h1 data-wrn-owner="PageHeader" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
id='{id}'
class="wrn-page-header__title"
>
@@ -188,14 +188,14 @@ current: true
{/if}
{#if description}
<p
<p data-wrn-owner="PageHeader" data-wrn-part="description" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
class="wrn-page-header__description"
>
{description}
</p>
{/if}
<div
<div data-wrn-owner="PageHeader" data-wrn-part="meta" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
class="wrn-page-header__meta"
>
<slot
@@ -208,7 +208,7 @@ current: true
</div>
{#if primaryLabel || secondaryLabel}
<div
<div data-wrn-owner="PageHeader" data-wrn-part="actions" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
class="wrn-page-header__actions"
>
{#if secondaryLabel}
@@ -241,7 +241,7 @@ current: true
</slot>
</div>
{:else}
<div
<div data-wrn-owner="PageHeader" data-wrn-part="actions" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
class="wrn-page-header__actions wrn-page-header__actions--slot-only"
>
<slot
@@ -252,7 +252,7 @@ current: true
{/if}
</div>
<div
<div data-wrn-owner="PageHeader" data-wrn-part="body" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
class="wrn-page-header__body"
>
<slot></slot>
packages/ui/components/Pagination.wrn
+21 -21
View File
@@ -121,12 +121,12 @@ component Pagination {
data-size='{size}'
role="navigation"
aria-label='{label}'
>
<p class="wrn-pagination__summary" data-show="showSummary">
data-wrn-owner="Pagination" data-wrn-part="root" data-wrn-component="Pagination" data-wrn-axis-color='{color}' data-wrn-axis-size='{size}' data-wrn-axis-variant='{variant}'>
<p class="wrn-pagination__summary" data-show="showSummary" data-wrn-owner="Pagination" data-wrn-part="summary" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">
{firstShown()} to {lastShown()} of {total}
</p>
<div class="wrn-pagination__controls">
<div class="wrn-pagination__controls" data-wrn-owner="Pagination" data-wrn-part="controls" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">
{#if hrefTemplate}
<a
class="wrn-pagination__step"
@@ -134,9 +134,9 @@ component Pagination {
href='{pageHref(currentPage() - 1)}'
aria-disabled='{currentPage() <= 1}'
data-disabled='{currentPage() <= 1}'
>
<span class="wrn-pagination__step-icon" aria-hidden="true">&#8249;</span>
<span class="wrn-pagination__step-label">{previousLabel}</span>
data-wrn-owner="Pagination" data-wrn-part="step" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">
<span class="wrn-pagination__step-icon" aria-hidden="true" data-wrn-owner="Pagination" data-wrn-part="stepIcon" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">&#8249;</span>
<span class="wrn-pagination__step-label" data-wrn-owner="Pagination" data-wrn-part="stepLabel" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">{previousLabel}</span>
</a>
{:else}
<button
@@ -144,16 +144,16 @@ component Pagination {
class="wrn-pagination__step"
aria-label='{previousLabel}'
@click='goPrevious()'
>
<span class="wrn-pagination__step-icon" aria-hidden="true">&#8249;</span>
<span class="wrn-pagination__step-label">{previousLabel}</span>
data-wrn-owner="Pagination" data-wrn-part="step" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">
<span class="wrn-pagination__step-icon" aria-hidden="true" data-wrn-owner="Pagination" data-wrn-part="stepIcon" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">&#8249;</span>
<span class="wrn-pagination__step-label" data-wrn-owner="Pagination" data-wrn-part="stepLabel" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">{previousLabel}</span>
</button>
{/if}
<ol class="wrn-pagination__pages" data-show="variant === 'numbered'">
<ol class="wrn-pagination__pages" data-show="variant === 'numbered'" data-wrn-owner="Pagination" data-wrn-part="pages" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">
{#each pageNumbers() as entry}
<li class="wrn-pagination__slot">
<span class="wrn-pagination__gap" data-show="entry.gap">{entry.label}</span>
<li class="wrn-pagination__slot" data-wrn-owner="Pagination" data-wrn-part="slot" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">
<span class="wrn-pagination__gap" data-show="entry.gap" data-wrn-owner="Pagination" data-wrn-part="gap" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">{entry.label}</span>
{#if hrefTemplate}
<a
class="wrn-pagination__page"
@@ -161,7 +161,7 @@ component Pagination {
data-active='{entry.value === currentPage()}'
aria-current='{entry.value === currentPage() ? "page" : "false"}'
href='{pageHref(entry.value)}'
>
data-wrn-owner="Pagination" data-wrn-part="page" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">
{entry.label}
</a>
{:else}
@@ -172,7 +172,7 @@ component Pagination {
data-active='{entry.value === currentPage()}'
aria-current='{entry.value === currentPage() ? "page" : "false"}'
@click='goToPage(entry.value)'
>
data-wrn-owner="Pagination" data-wrn-part="page" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">
{entry.label}
</button>
{/if}
@@ -180,7 +180,7 @@ component Pagination {
{/each}
</ol>
<p class="wrn-pagination__compact" data-show="variant !== 'numbered'">
<p class="wrn-pagination__compact" data-show="variant !== 'numbered'" data-wrn-owner="Pagination" data-wrn-part="compact" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">
{currentPage()} / {lastPage()}
</p>
@@ -191,9 +191,9 @@ component Pagination {
href='{pageHref(currentPage() + 1)}'
aria-disabled='{currentPage() >= lastPage()}'
data-disabled='{currentPage() >= lastPage()}'
>
<span class="wrn-pagination__step-label">{nextLabel}</span>
<span class="wrn-pagination__step-icon" aria-hidden="true">&#8250;</span>
data-wrn-owner="Pagination" data-wrn-part="step" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">
<span class="wrn-pagination__step-label" data-wrn-owner="Pagination" data-wrn-part="stepLabel" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">{nextLabel}</span>
<span class="wrn-pagination__step-icon" aria-hidden="true" data-wrn-owner="Pagination" data-wrn-part="stepIcon" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">&#8250;</span>
</a>
{:else}
<button
@@ -201,9 +201,9 @@ component Pagination {
class="wrn-pagination__step"
aria-label='{nextLabel}'
@click='goNext()'
>
<span class="wrn-pagination__step-label">{nextLabel}</span>
<span class="wrn-pagination__step-icon" aria-hidden="true">&#8250;</span>
data-wrn-owner="Pagination" data-wrn-part="step" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">
<span class="wrn-pagination__step-label" data-wrn-owner="Pagination" data-wrn-part="stepLabel" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">{nextLabel}</span>
<span class="wrn-pagination__step-icon" aria-hidden="true" data-wrn-owner="Pagination" data-wrn-part="stepIcon" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-variant="{variant}">&#8250;</span>
</button>
{/if}
</div>
packages/ui/components/PinInput.wrn
+8 -8
View File
@@ -58,8 +58,8 @@ component PinInput {
data-value="{value}"
disabled="{disabled}"
aria-describedby="{validationMessage ? `${name}-validation` : helpText ? `${name}-help` : ''}"
>
<div class="wrn-next__pin-heading">
data-wrn-owner="PinInput" data-wrn-part="root" data-wrn-component="PinInput" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<div class="wrn-next__pin-heading" data-wrn-owner="PinInput" data-wrn-part="pinHeading" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<legend>{label}</legend>
<button
type="button"
@@ -68,13 +68,13 @@ component PinInput {
aria-label="{clearLabel}"
title="{clearLabel}"
style="{clearable && value ? '' : 'display: none'}"
>
data-wrn-owner="PinInput" data-wrn-part="pinClear" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<span class="icon-[lucide--rotate-ccw]" aria-hidden="true"></span>
<span>{clearLabel}</span>
</button>
</div>
<div class="wrn-next__pin-cells" role="group" aria-label="{label}">
<div class="wrn-next__pin-cells" role="group" aria-label="{label}" data-wrn-owner="PinInput" data-wrn-part="pinCells" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#each inputIndexes() as index}
<input
data-pin-cell
@@ -91,9 +91,9 @@ component PinInput {
readonly="{readonly}"
disabled="{disabled}"
autofocus="{autoFocus && index === 0}"
/>
data-wrn-owner="PinInput" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"/>
{#if separator && groupSize !== 0 && (index + 1) % groupSize === 0 && index + 1 !== length}
<span class="wrn-next__pin-separator" aria-hidden="true">{separator}</span>
<span class="wrn-next__pin-separator" aria-hidden="true" data-wrn-owner="PinInput" data-wrn-part="pinSeparator" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{separator}</span>
{/if}
{/each}
</div>
@@ -104,14 +104,14 @@ component PinInput {
value="{value}"
required="{required}"
data-pin-value
/>
data-wrn-owner="PinInput" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"/>
{#if helpText && !validationMessage}<small id="{name}-help">{helpText}</small>{/if}
<small
id="{name}-validation"
class="wrn-next__validation"
data-error="{name}"
>{validationMessage}</small>
data-wrn-owner="PinInput" data-wrn-part="validation" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{validationMessage}</small>
</fieldset>
}
packages/ui/components/Popover.wrn
+15 -15
View File
@@ -93,7 +93,7 @@ component Popover {
data-variant='{variant}'
class='wrn-popover {class}'
@keydown='handleKeydown(event)'
>
data-wrn-owner="Popover" data-wrn-part="root" data-wrn-component="Popover" data-wrn-axis-size='{size}' data-wrn-axis-color='{color}' data-wrn-axis-variant='{variant}'>
<button
type="button"
class="wrn-popover__trigger"
@@ -101,7 +101,7 @@ component Popover {
aria-haspopup="dialog"
aria-expanded='{open || visible ? "true" : "false"}'
@click='togglePopover(event)'
>
data-wrn-owner="Popover" data-wrn-part="trigger" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<slot name="trigger"></slot>
{#if triggerIcon}
<span class='{triggerIcon}' aria-hidden="true"></span>
@@ -118,7 +118,7 @@ component Popover {
data-show='{open || visible}'
aria-label='{closeLabel}'
@click='hidePopover("outside", event)'
></button>
data-wrn-owner="Popover" data-wrn-part="dismissLayer" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></button>
{/if}
<section
@@ -127,21 +127,21 @@ component Popover {
data-show='{open || visible}'
role="dialog"
aria-label='{title || triggerLabel}'
>
data-wrn-owner="Popover" data-wrn-part="panel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if showArrow}
<span class="wrn-popover__arrow" data-wrn-anchor-arrow="true" aria-hidden="true"></span>
<span class="wrn-popover__arrow" data-wrn-anchor-arrow="true" aria-hidden="true" data-wrn-owner="Popover" data-wrn-part="arrow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
{/if}
{#if title || description || icon || showClose}
<header class="wrn-popover__header">
<div class="wrn-popover__heading">
<header class="wrn-popover__header" data-wrn-owner="Popover" data-wrn-part="header" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<div class="wrn-popover__heading" data-wrn-owner="Popover" data-wrn-part="heading" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if icon}
<span class='wrn-popover__icon {icon}' aria-hidden="true"></span>
<span class='wrn-popover__icon {icon}' aria-hidden="true" data-wrn-owner="Popover" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
{/if}
<div class="wrn-popover__heading-copy">
<div class="wrn-popover__heading-copy" data-wrn-owner="Popover" data-wrn-part="headingCopy" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<slot name="header"></slot>
{#if title}
<h3>{title}</h3>
<h3 data-wrn-owner="Popover" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{title}</h3>
{/if}
{#if description}
<p>{description}</p>
@@ -155,25 +155,25 @@ component Popover {
class="wrn-popover__close"
aria-label='{closeLabel}'
@click='hidePopover("close-button", event)'
>
data-wrn-owner="Popover" data-wrn-part="close" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span class="icon-[lucide--x]" aria-hidden="true"></span>
</button>
{/if}
</header>
{/if}
<div class="wrn-popover__body">
<div class="wrn-popover__body" data-wrn-owner="Popover" data-wrn-part="body" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<slot></slot>
</div>
{#if actionLabel}
<footer class="wrn-popover__footer">
<footer class="wrn-popover__footer" data-wrn-owner="Popover" data-wrn-part="footer" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if actionHref}
<a
href='{actionHref}'
class="wrn-popover__action"
@click='activateAction(event)'
>
data-wrn-owner="Popover" data-wrn-part="action" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span>{actionLabel}</span>
{#if actionIcon}
<span class='{actionIcon}' aria-hidden="true"></span>
@@ -186,7 +186,7 @@ component Popover {
type="button"
class="wrn-popover__action"
@click='activateAction(event)'
>
data-wrn-owner="Popover" data-wrn-part="action" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span>{actionLabel}</span>
{#if actionIcon}
<span class='{actionIcon}' aria-hidden="true"></span>
packages/ui/components/PortalDashboard.wrn
+22 -22
View File
@@ -32,12 +32,12 @@ component PortalDashboard {
}
view {
<main class="wrn-portal-dashboard wrn-component--color-{color} wrn-component--size-{size} {class}">
<header class="wrn-portal-dashboard__hero">
<main class="wrn-portal-dashboard wrn-component--color-{color} wrn-component--size-{size} {class}" data-wrn-owner="PortalDashboard" data-wrn-part="root" data-wrn-component="PortalDashboard" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<header class="wrn-portal-dashboard__hero" data-wrn-owner="PortalDashboard" data-wrn-part="hero" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<div>
{#if eyebrowKey}<span class="wrn-portal-dashboard__eyebrow" data-t="{eyebrowKey}">{eyebrow}</span>{/if}
{#if !eyebrowKey}<span class="wrn-portal-dashboard__eyebrow">{eyebrow}</span>{/if}
<h1>
{#if eyebrowKey}<span class="wrn-portal-dashboard__eyebrow" data-t="{eyebrowKey}" data-wrn-owner="PortalDashboard" data-wrn-part="eyebrow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{eyebrow}</span>{/if}
{#if !eyebrowKey}<span class="wrn-portal-dashboard__eyebrow" data-wrn-owner="PortalDashboard" data-wrn-part="eyebrow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{eyebrow}</span>{/if}
<h1 data-wrn-owner="PortalDashboard" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#if titleKey}<span data-t="{titleKey}">{title}</span>{/if}
{#if !titleKey}<span>{title}</span>{/if}
{#if userName}, {userName}{/if}
@@ -45,24 +45,24 @@ component PortalDashboard {
{#if descriptionKey}<p data-t="{descriptionKey}">{description}</p>{/if}
{#if !descriptionKey && description}<p>{description}</p>{/if}
</div>
<div class="wrn-portal-dashboard__hero-slot"><slot name="hero-action" /></div>
<div class="wrn-portal-dashboard__hero-slot" data-wrn-owner="PortalDashboard" data-wrn-part="heroSlot" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"><slot name="hero-action" /></div>
</header>
<section class="wrn-portal-dashboard__metrics" aria-label="Summary">
<section class="wrn-portal-dashboard__metrics" aria-label="Summary" data-wrn-owner="PortalDashboard" data-wrn-part="metrics" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#each metrics as item}
<article class="wrn-portal-dashboard__metric">
<span class="wrn-portal-dashboard__metric-icon {item.icon || 'icon-[lucide--activity]'}" aria-hidden="true"></span>
<article class="wrn-portal-dashboard__metric" data-wrn-owner="PortalDashboard" data-wrn-part="metric" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<span class="wrn-portal-dashboard__metric-icon {item.icon || 'icon-[lucide--activity]'}" aria-hidden="true" data-wrn-owner="PortalDashboard" data-wrn-part="metricIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></span>
<div><small>{item.label}</small><strong>{item.value}</strong>{#if item.detail}<span>{item.detail}</span>{/if}</div>
</article>
{/each}
</section>
<div class="wrn-portal-dashboard__grid">
<section class="wrn-portal-dashboard__panel wrn-portal-dashboard__panel--actions">
<div class="wrn-portal-dashboard__panel-heading"><div><small>Shortcuts</small><h2>Quick actions</h2></div></div>
<div class="wrn-portal-dashboard__actions">
<div class="wrn-portal-dashboard__grid" data-wrn-owner="PortalDashboard" data-wrn-part="grid" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<section class="wrn-portal-dashboard__panel wrn-portal-dashboard__panel--actions" data-wrn-owner="PortalDashboard" data-wrn-part="panel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<div class="wrn-portal-dashboard__panel-heading" data-wrn-owner="PortalDashboard" data-wrn-part="panelHeading" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"><div><small>Shortcuts</small><h2 data-wrn-owner="PortalDashboard" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">Quick actions</h2></div></div>
<div class="wrn-portal-dashboard__actions" data-wrn-owner="PortalDashboard" data-wrn-part="actions" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#each actions as item, index}
<a href="{item.href || '#'}" @click="chooseAction(item, index)">
<a href="{item.href || '#'}" @click="chooseAction(item, index)" data-wrn-owner="PortalDashboard" data-wrn-part="link" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<span class="{item.icon || 'icon-[lucide--arrow-up-right]'}" aria-hidden="true"></span>
<span><strong>{item.label}</strong>{#if item.description}<small>{item.description}</small>{/if}</span>
<span class="icon-[lucide--chevron-right]" aria-hidden="true"></span>
@@ -71,12 +71,12 @@ component PortalDashboard {
</div>
</section>
<section class="wrn-portal-dashboard__panel">
<div class="wrn-portal-dashboard__panel-heading"><div><small>Priority</small><h2>Tasks requiring attention</h2></div></div>
<div class="wrn-portal-dashboard__list">
<section class="wrn-portal-dashboard__panel" data-wrn-owner="PortalDashboard" data-wrn-part="panel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<div class="wrn-portal-dashboard__panel-heading" data-wrn-owner="PortalDashboard" data-wrn-part="panelHeading" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"><div><small>Priority</small><h2 data-wrn-owner="PortalDashboard" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">Tasks requiring attention</h2></div></div>
<div class="wrn-portal-dashboard__list" data-wrn-owner="PortalDashboard" data-wrn-part="list" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#each tasks as item, index}
<a href="{item.href || '#'}" @click="chooseNavigation(item, index)">
<span class="wrn-portal-dashboard__status wrn-portal-dashboard__status--{item.status || 'default'}"></span>
<a href="{item.href || '#'}" @click="chooseNavigation(item, index)" data-wrn-owner="PortalDashboard" data-wrn-part="link" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<span class="wrn-portal-dashboard__status wrn-portal-dashboard__status--{item.status || 'default'}" data-wrn-owner="PortalDashboard" data-wrn-part="status" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></span>
<span><strong>{item.label}</strong>{#if item.detail}<small>{item.detail}</small>{/if}</span>
{#if item.meta}<em>{item.meta}</em>{/if}
</a>
@@ -84,9 +84,9 @@ component PortalDashboard {
</div>
</section>
<section class="wrn-portal-dashboard__panel wrn-portal-dashboard__panel--updates">
<div class="wrn-portal-dashboard__panel-heading"><div><small>Latest</small><h2>Recent updates</h2></div></div>
<div class="wrn-portal-dashboard__timeline">
<section class="wrn-portal-dashboard__panel wrn-portal-dashboard__panel--updates" data-wrn-owner="PortalDashboard" data-wrn-part="panel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<div class="wrn-portal-dashboard__panel-heading" data-wrn-owner="PortalDashboard" data-wrn-part="panelHeading" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"><div><small>Latest</small><h2 data-wrn-owner="PortalDashboard" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">Recent updates</h2></div></div>
<div class="wrn-portal-dashboard__timeline" data-wrn-owner="PortalDashboard" data-wrn-part="timeline" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#each updates as item}
<article>
<span class="{item.icon || 'icon-[lucide--bell]'}" aria-hidden="true"></span>
packages/ui/components/PreferenceSwitcher.wrn
+29 -31
View File
@@ -44,51 +44,51 @@ size: string = "default"
}
view {
<div class="wrn-preferences wrn-component--color-{color} wrn-component--size-{size} {compact ? 'wrn-preferences--compact' : ''} {class}" data-wrn-preferences data-icon-only="{iconOnly ? 'true' : 'false'}" data-panel-placement="{panelPlacement}" data-mobile-panel="{mobilePanel}" aria-label="Display and language preferences">
<details class="wrn-preferences__menu" name="wrn-preference-menu">
<summary aria-label="{themeLabel}" title="{themeLabel}">
<div class="wrn-preferences wrn-component--color-{color} wrn-component--size-{size} {compact ? 'wrn-preferences--compact' : ''} {class}" data-wrn-preferences data-icon-only="{iconOnly ? 'true' : 'false'}" data-panel-placement="{panelPlacement}" data-mobile-panel="{mobilePanel}" aria-label="Display and language preferences" data-wrn-owner="PreferenceSwitcher" data-wrn-part="root" data-wrn-component="PreferenceSwitcher" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-compact="{compact}">
<div data-wrn-menu data-open="false" class="wrn-preferences__menu" name="wrn-preference-menu" data-wrn-owner="PreferenceSwitcher" data-wrn-part="menu" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-compact="{compact}">
<button type="button" data-wrn-menu-toggle aria-expanded="false" aria-label="{themeLabel}" title="{themeLabel}" data-wrn-owner="PreferenceSwitcher" data-wrn-part="trigger" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-compact="{compact}">
<span class="{themeIcon}" aria-hidden="true"></span>
{#if !iconOnly && !compact}<span>{themeLabel}</span>{/if}
</summary>
<div class="wrn-preferences__panel">
</button>
<div class="wrn-preferences__panel" data-wrn-owner="PreferenceSwitcher" data-wrn-part="panel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-compact="{compact}">
<strong>{themeLabel}</strong>
<div class="wrn-preferences__options">
<button type="button" data-wrn-theme-set="light" @click="choose('theme', 'light')"><span class="icon-[lucide--sun]" aria-hidden="true"></span>Light</button>
<button type="button" data-wrn-theme-set="dark" @click="choose('theme', 'dark')"><span class="icon-[lucide--moon]" aria-hidden="true"></span>Dark</button>
<div class="wrn-preferences__options" data-wrn-owner="PreferenceSwitcher" data-wrn-part="options" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-compact="{compact}">
<button type="button" data-wrn-theme-set="light" @click="choose('theme', 'light')" data-wrn-owner="PreferenceSwitcher" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-compact="{compact}"><span class="icon-[lucide--sun]" aria-hidden="true"></span>Light</button>
<button type="button" data-wrn-theme-set="dark" @click="choose('theme', 'dark')" data-wrn-owner="PreferenceSwitcher" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-compact="{compact}"><span class="icon-[lucide--moon]" aria-hidden="true"></span>Dark</button>
</div>
</div>
</details>
</div>
<details class="wrn-preferences__menu" name="wrn-preference-menu">
<summary aria-label="{colorLabel}" title="{colorLabel}">
<div data-wrn-menu data-open="false" class="wrn-preferences__menu" name="wrn-preference-menu" data-wrn-owner="PreferenceSwitcher" data-wrn-part="menu" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-compact="{compact}">
<button type="button" data-wrn-menu-toggle aria-expanded="false" aria-label="{colorLabel}" title="{colorLabel}" data-wrn-owner="PreferenceSwitcher" data-wrn-part="trigger" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-compact="{compact}">
<span class="{colorIcon}" aria-hidden="true"></span>
{#if !iconOnly && !compact}<span>{colorLabel}</span>{/if}
</summary>
<div class="wrn-preferences__panel wrn-preferences__panel--colors">
</button>
<div class="wrn-preferences__panel wrn-preferences__panel--colors" data-wrn-owner="PreferenceSwitcher" data-wrn-part="panel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-compact="{compact}">
<strong>{colorLabel}</strong>
<div class="wrn-preferences__swatches">
<div class="wrn-preferences__swatches" data-wrn-owner="PreferenceSwitcher" data-wrn-part="swatches" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-compact="{compact}">
{#each colors as item}
<button type="button" data-wrn-accent-set="{item.value}" aria-label="{item.label}" title="{item.label}" style="--wrn-preference-swatch: {item.hex}" @click="choose('color', item.value)"></button>
<button type="button" data-wrn-accent-set="{item.value}" aria-label="{item.label}" title="{item.label}" style="--wrn-preference-swatch: {item.hex}" @click="choose('color', item.value)" data-wrn-owner="PreferenceSwitcher" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-compact="{compact}"></button>
{/each}
</div>
</div>
</details>
</div>
<details class="wrn-preferences__menu wrn-preferences__menu--language" name="wrn-preference-menu">
<summary aria-label="{languageLabel}" title="{languageLabel}">
<div data-wrn-menu data-open="false" class="wrn-preferences__menu wrn-preferences__menu--language" name="wrn-preference-menu" data-wrn-owner="PreferenceSwitcher" data-wrn-part="menu" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-compact="{compact}">
<button type="button" data-wrn-menu-toggle aria-expanded="false" aria-label="{languageLabel}" title="{languageLabel}" data-wrn-owner="PreferenceSwitcher" data-wrn-part="trigger" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-compact="{compact}">
<span class="{languageIcon}" aria-hidden="true"></span>
{#if showCurrentLanguage}<span class="wrn-preferences__current-language" aria-hidden="true">EN</span>{/if}
{#if showCurrentLanguage}<span class="wrn-preferences__current-language" aria-hidden="true" data-wrn-owner="PreferenceSwitcher" data-wrn-part="currentLanguage" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-compact="{compact}">EN</span>{/if}
{#if !iconOnly && !compact}<span>{languageLabel}</span>{/if}
</summary>
<div class="wrn-preferences__panel wrn-preferences__panel--language">
</button>
<div class="wrn-preferences__panel wrn-preferences__panel--language" data-wrn-owner="PreferenceSwitcher" data-wrn-part="panel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-compact="{compact}">
<strong>{languageLabel}</strong>
{#each languages as item}
<button type="button" data-wrn-lang-set="{item.value}" lang="{item.value}" @click="choose('language', item.value)">
<button type="button" data-wrn-lang-set="{item.value}" lang="{item.value}" @click="choose('language', item.value)" data-wrn-owner="PreferenceSwitcher" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-compact="{compact}">
<span>{item.shortLabel}</span>{item.label}
</button>
{/each}
</div>
</details>
</div>
</div>
}
@@ -104,7 +104,7 @@ size: string = "default"
position: relative;
}
.wrn-preferences__menu > summary {
.wrn-preferences__menu > [data-wrn-menu-toggle] {
display: inline-flex;
min-width: 2.25rem;
min-height: 2.25rem;
@@ -119,18 +119,14 @@ size: string = "default"
list-style: none;
}
.wrn-preferences__menu > summary::-webkit-details-marker {
display: none;
}
.wrn-preferences__menu > summary:hover,
.wrn-preferences__menu[open] > summary {
.wrn-preferences__menu > [data-wrn-menu-toggle]:hover,
.wrn-preferences__menu[data-open="true"] > [data-wrn-menu-toggle] {
color: var(--wrn-color-text);
border-color: var(--wrn-color-border);
background: var(--wrn-color-surface);
}
.wrn-preferences__menu > summary > span:first-child {
.wrn-preferences__menu > [data-wrn-menu-toggle] > span:first-child {
width: 1rem;
height: 1rem;
}
@@ -143,6 +139,8 @@ size: string = "default"
letter-spacing: 0.02em;
}
.wrn-preferences__menu:not([data-open="true"]) > .wrn-preferences__panel { display: none; }
.wrn-preferences__panel {
position: absolute;
z-index: 80;
packages/ui/components/PublicPageShell.wrn
+2 -2
View File
@@ -24,14 +24,14 @@ component PublicPageShell {
data-overflow='{overflow}'
data-min-height='{minHeight}'
data-header-offset='{headerOffset}'
>
data-wrn-owner="PublicPageShell" data-wrn-part="root" data-wrn-component="PublicPageShell" data-wrn-axis-size='{size}' data-wrn-axis-color='{color}' data-wrn-axis-variant='{variant}'>
<slot name="before"></slot>
<main
class="wrn-page-shell__main"
data-full-width='{fullWidth}'
data-max-width='{maxWidth}'
>
data-wrn-owner="PublicPageShell" data-wrn-part="main" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<slot></slot>
</main>
packages/ui/components/RangeSlider.wrn
+12 -12
View File
@@ -81,23 +81,23 @@ component RangeSlider {
}
view {
<div {...attrs} class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--field wrn-next--range-slider {class}" data-readonly="{readonly}" data-disabled="{disabled}" data-variant="{variant}" data-inline="{inline}" data-invalid="{error ? 'true' : 'false'}">
<div class="wrn-next__field-heading"><label class="{hiddenLabel ? 'wrn-next__sr-only' : ''}" for="{id || name}">{label}</label>{#if cornerHint}<span class="wrn-next__field-hint">{cornerHint}</span>{/if}</div>
<div class="wrn-next__range-control" data-variant="{variant}" data-icon-position="{iconPosition}" data-show-steps="{showSteps}">
<div {...attrs} class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--field wrn-next--range-slider {class}" data-readonly="{readonly}" data-disabled="{disabled}" data-variant="{variant}" data-inline="{inline}" data-invalid="{error ? 'true' : 'false'}" data-wrn-owner="RangeSlider" data-wrn-part="root" data-wrn-component="RangeSlider" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<div class="wrn-next__field-heading" data-wrn-owner="RangeSlider" data-wrn-part="heading" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><label class="{hiddenLabel ? 'wrn-next__sr-only' : ''}" for="{id || name}" data-wrn-owner="RangeSlider" data-wrn-part="srOnly" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{label}</label>{#if cornerHint}<span class="wrn-next__field-hint" data-wrn-owner="RangeSlider" data-wrn-part="hint" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{cornerHint}</span>{/if}</div>
<div class="wrn-next__range-control" data-variant="{variant}" data-icon-position="{iconPosition}" data-show-steps="{showSteps}" data-wrn-owner="RangeSlider" data-wrn-part="rangeControl" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if icon}<span class="{icon}" aria-hidden="true"></span>{/if}
<button type="button" class="wrn-next__range-stepper" aria-label="Decrease {label}" disabled="{disabled || readonly}" @click="decreaseValue(event)"><svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="M3.5 8h9"></path></svg></button>
<div class="wrn-next__range-track">
<input id="{id || name}" class="wrn-next__sr-only wrn-next__range-value" type="number" name="{name}" value="{currentValue}" min="{min}" max="{max}" step="{step}" required="{required}" readonly />
<div class="wrn-next__custom-slider" role="slider" tabindex="{disabled ? '-1' : '0'}" aria-label="{hiddenLabel ? label : ''}" aria-valuemin="{min}" aria-valuemax="{max}" aria-valuenow="{currentValue}" aria-disabled="{disabled}" aria-readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" style="--wrn-range-progress: {percent()}%" @pointerdown="beginSlide(event)" @pointermove="moveSlide(event)" @pointerup="endSlide(event)" @pointercancel="endSlide(event)" @keydown="handleKey(event)" @focus="emitFocus('focus', event)" @blur="emitFocus('blur', event)">
<span class="wrn-next__slider-fill"></span><span class="wrn-next__slider-thumb"></span>
{#if marks.length}<span class="wrn-next__slider-marks">{#each marks as mark}<button type="button" data-value="{mark.value}" style="left: {(Number(mark.value) - Number(min)) / (Number(max) - Number(min)) * 100}%" aria-label="{mark.label}" @click="selectMark(event)"></button>{/each}</span>{/if}
<button type="button" class="wrn-next__range-stepper" aria-label="Decrease {label}" disabled="{disabled || readonly}" @click="decreaseValue(event)" data-wrn-owner="RangeSlider" data-wrn-part="rangeStepper" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true" data-wrn-owner="RangeSlider" data-wrn-part="vector" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><path d="M3.5 8h9"></path></svg></button>
<div class="wrn-next__range-track" data-wrn-owner="RangeSlider" data-wrn-part="rangeTrack" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<input id="{id || name}" class="wrn-next__sr-only wrn-next__range-value" type="number" name="{name}" value="{currentValue}" min="{min}" max="{max}" step="{step}" required="{required}" readonly data-wrn-owner="RangeSlider" data-wrn-part="srOnly" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"/>
<div class="wrn-next__custom-slider" role="slider" tabindex="{disabled ? '-1' : '0'}" aria-label="{hiddenLabel ? label : ''}" aria-valuemin="{min}" aria-valuemax="{max}" aria-valuenow="{currentValue}" aria-disabled="{disabled}" aria-readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" style="--wrn-range-progress: {percent()}%" @pointerdown="beginSlide(event)" @pointermove="moveSlide(event)" @pointerup="endSlide(event)" @pointercancel="endSlide(event)" @keydown="handleKey(event)" @focus="emitFocus('focus', event)" @blur="emitFocus('blur', event)" data-wrn-owner="RangeSlider" data-wrn-part="customSlider" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span class="wrn-next__slider-fill" data-wrn-owner="RangeSlider" data-wrn-part="sliderFill" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span><span class="wrn-next__slider-thumb" data-wrn-owner="RangeSlider" data-wrn-part="sliderThumb" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
{#if marks.length}<span class="wrn-next__slider-marks" data-wrn-owner="RangeSlider" data-wrn-part="sliderMarks" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{#each marks as mark}<button type="button" data-value="{mark.value}" style="left: {(Number(mark.value) - Number(min)) / (Number(max) - Number(min)) * 100}%" aria-label="{mark.label}" @click="selectMark(event)" data-wrn-owner="RangeSlider" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></button>{/each}</span>{/if}
</div>
{#if showBounds}<div class="wrn-next__range-bounds"><span>{min}</span><span>Step {step}</span><span>{max}</span></div>{/if}
{#if showBounds}<div class="wrn-next__range-bounds" data-wrn-owner="RangeSlider" data-wrn-part="rangeBounds" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><span>{min}</span><span>Step {step}</span><span>{max}</span></div>{/if}
</div>
{#if showValue}<output for="{id || name}">{currentValue}</output>{/if}
<button type="button" class="wrn-next__range-stepper" aria-label="Increase {label}" disabled="{disabled || readonly}" @click="increaseValue(event)"><svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="M3.5 8h9"></path><path d="M8 3.5v9"></path></svg></button>
<button type="button" class="wrn-next__range-stepper" aria-label="Increase {label}" disabled="{disabled || readonly}" @click="increaseValue(event)" data-wrn-owner="RangeSlider" data-wrn-part="rangeStepper" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true" data-wrn-owner="RangeSlider" data-wrn-part="vector" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><path d="M3.5 8h9"></path><path d="M8 3.5v9"></path></svg></button>
</div>
{#if helperText}<small class="wrn-next__field-help">{helperText}</small>{/if}<small class="wrn-next__field-error" data-error="{name}">{error}</small>
{#if helperText}<small class="wrn-next__field-help" data-wrn-owner="RangeSlider" data-wrn-part="help" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{helperText}</small>{/if}<small class="wrn-next__field-error" data-error="{name}" data-wrn-owner="RangeSlider" data-wrn-part="error" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{error}</small>
</div>
}
packages/ui/components/Rating.wrn
+4 -4
View File
@@ -33,12 +33,12 @@ component Rating {
}
}
view {
<div {...attrs} class="wrn-rating {class}">
<div {...attrs} class="wrn-rating {class}" data-wrn-owner="Rating" data-wrn-part="root" data-wrn-component="Rating" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if title}<strong>{title}</strong>{/if}
{#if description}<p>{description}</p>{/if}
<div role="group" aria-label="{title || 'Rating'}" class="wrn-rating__stars">
{#each stars() as star, index}<button type="button" aria-label="Rate {index + 1} of {max}" aria-pressed="{selectedValue === index + 1}" disabled="{disabled || readonly}" data-filled="{index < selectedValue}" style="--fill:{Math.max(0, Math.min(1, selectedValue - index)) * 100}%" @click="choose(index, event)"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-3-5.6 3 1.1-6.2L3 9.6l6.2-.9Z" /></svg><svg class="wrn-rating__fill" viewBox="0 0 24 24" aria-hidden="true"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-3-5.6 3 1.1-6.2L3 9.6l6.2-.9Z" /></svg></button>{/each}
<input class="wrn-rating__precise" type="range" aria-label="Precise rating" min="0" max="{max}" step="{step}" value="{selectedValue}" disabled="{disabled || readonly}" @input="selectedValue = Number(event.currentTarget.value); output.input({ value: selectedValue })" @change="output.change({ value: selectedValue })" /><output aria-live="polite">{selectedValue} / {max}</output>
<div role="group" aria-label="{title || 'Rating'}" class="wrn-rating__stars" data-wrn-owner="Rating" data-wrn-part="stars" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#each stars() as star, index}<button type="button" aria-label="Rate {index + 1} of {max}" aria-pressed="{selectedValue === index + 1}" disabled="{disabled || readonly}" data-filled="{index < selectedValue}" style="--fill:{Math.max(0, Math.min(1, selectedValue - index)) * 100}%" @click="choose(index, event)" data-wrn-owner="Rating" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><svg viewBox="0 0 24 24" aria-hidden="true" data-wrn-owner="Rating" data-wrn-part="vector" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-3-5.6 3 1.1-6.2L3 9.6l6.2-.9Z" /></svg><svg class="wrn-rating__fill" viewBox="0 0 24 24" aria-hidden="true" data-wrn-owner="Rating" data-wrn-part="fill" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-3-5.6 3 1.1-6.2L3 9.6l6.2-.9Z" /></svg></button>{/each}
<input class="wrn-rating__precise" type="range" aria-label="Precise rating" min="0" max="{max}" step="{step}" value="{selectedValue}" disabled="{disabled || readonly}" @input="selectedValue = Number(event.currentTarget.value); output.input({ value: selectedValue })" @change="output.change({ value: selectedValue })" data-wrn-owner="Rating" data-wrn-part="precise" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"/><output aria-live="polite">{selectedValue} / {max}</output>
</div><slot />
</div>
}
packages/ui/components/Scrollspy.wrn
+6 -6
View File
@@ -52,19 +52,19 @@ component Scrollspy {
data-wrn-scrollspy="true"
role="navigation"
aria-label='{label}'
>
<p class="wrn-scrollspy__heading" data-show="heading">{heading}</p>
data-wrn-owner="Scrollspy" data-wrn-part="root" data-wrn-component="Scrollspy" data-wrn-axis-color='{color}' data-wrn-axis-size='{size}'>
<p class="wrn-scrollspy__heading" data-show="heading" data-wrn-owner="Scrollspy" data-wrn-part="heading" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{heading}</p>
<ul class="wrn-scrollspy__list">
<ul class="wrn-scrollspy__list" data-wrn-owner="Scrollspy" data-wrn-part="list" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
{#each itemList() as item}
<li class="wrn-scrollspy__item">
<li class="wrn-scrollspy__item" data-wrn-owner="Scrollspy" data-wrn-part="item" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<a
class="wrn-scrollspy__link"
href='{item.href || "#"}'
data-active='{isActive(item)}'
aria-current='{isActive(item) ? "location" : "false"}'
>
<span class="wrn-scrollspy__label">{item.label}</span>
data-wrn-owner="Scrollspy" data-wrn-part="link" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<span class="wrn-scrollspy__label" data-wrn-owner="Scrollspy" data-wrn-part="label" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{item.label}</span>
</a>
</li>
{/each}
packages/ui/components/SearchBox.wrn
+9 -9
View File
@@ -28,19 +28,19 @@ component SearchBox {
role="search"
class='wrn-search-box {class}'
@submit='event.preventDefault(); output.search({ value: query, name: name })'
>
data-wrn-owner="SearchBox" data-wrn-part="root" data-wrn-component="SearchBox" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<label
class="wrn-search-box__label"
data-hidden='{label === "" ? "true" : "false"}'
>
data-wrn-owner="SearchBox" data-wrn-part="label" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{label}
</label>
<div class="wrn-search-box__control">
<div class="wrn-search-box__control" data-wrn-owner="SearchBox" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<span
class="icon-[lucide--search] wrn-search-box__search-icon"
aria-hidden="true"
></span>
data-wrn-owner="SearchBox" data-wrn-part="searchIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></span>
<input
name='{name}'
@@ -57,7 +57,7 @@ component SearchBox {
data-size='{size}'
@input='query = event.target.value'
@change='query = event.target.value'
/>
data-wrn-owner="SearchBox" data-wrn-part="input" data-wrn-axis-size='{size}' data-wrn-axis-color="{color}"/>
<button
type="button"
@@ -65,8 +65,8 @@ component SearchBox {
data-show='query.length > 0 && !disabled'
class="wrn-search-box__button wrn-search-box__clear"
@click='query = ""; event.currentTarget.parentElement.querySelector("input")?.focus(); output.clear({ value: "", name: name })'
>
<span class="icon-[lucide--x] wrn-search-box__button-icon" aria-hidden="true"></span>
data-wrn-owner="SearchBox" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<span class="icon-[lucide--x] wrn-search-box__button-icon" aria-hidden="true" data-wrn-owner="SearchBox" data-wrn-part="buttonIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></span>
</button>
<button
@@ -74,8 +74,8 @@ component SearchBox {
aria-label='{label || "Search"}'
disabled='{disabled}'
class="wrn-search-box__button wrn-search-box__submit"
>
<span class="icon-[lucide--arrow-right] wrn-search-box__button-icon" aria-hidden="true"></span>
data-wrn-owner="SearchBox" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<span class="icon-[lucide--arrow-right] wrn-search-box__button-icon" aria-hidden="true" data-wrn-owner="SearchBox" data-wrn-part="buttonIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></span>
</button>
</div>
</form>
packages/ui/components/Section.wrn
+1 -1
View File
@@ -26,7 +26,7 @@ component Section {
data-spacing='{spacing}'
data-border-top='{borderTop}'
data-border-bottom='{borderBottom}'
>
data-wrn-owner="Section" data-wrn-part="root" data-wrn-component="Section" data-wrn-axis-size='{size}' data-wrn-axis-color='{color}' data-wrn-axis-variant='{variant}'>
{#if fullWidth}
<slot></slot>
{:else}
packages/ui/components/SectionHeader.wrn
+9 -9
View File
@@ -21,27 +21,27 @@ component SectionHeader {
data-size='{size}'
data-color='{color}'
data-max-width='{maxWidth}'
>
<div class="wrn-section-header__copy">
<div class="wrn-section-header__eyebrow-row">
data-wrn-owner="SectionHeader" data-wrn-part="root" data-wrn-component="SectionHeader" data-wrn-axis-size='{size}' data-wrn-axis-color='{color}'>
<div class="wrn-section-header__copy" data-wrn-owner="SectionHeader" data-wrn-part="copy" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<div class="wrn-section-header__eyebrow-row" data-wrn-owner="SectionHeader" data-wrn-part="eyebrowRow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<slot name="icon"></slot>
<p class="wrn-section-header__eyebrow" data-show="eyebrow">{eyebrow}</p>
<p class="wrn-section-header__eyebrow" data-show="eyebrow" data-wrn-owner="SectionHeader" data-wrn-part="eyebrow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{eyebrow}</p>
</div>
{#if headingLevel === 1}
<h1 id='{id}' class="wrn-section-header__title">{title}</h1>
<h1 id='{id}' class="wrn-section-header__title" data-wrn-owner="SectionHeader" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{title}</h1>
{:else if headingLevel === 3}
<h3 id='{id}' class="wrn-section-header__title">{title}</h3>
<h3 id='{id}' class="wrn-section-header__title" data-wrn-owner="SectionHeader" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{title}</h3>
{:else}
<h2 id='{id}' class="wrn-section-header__title">{title}</h2>
<h2 id='{id}' class="wrn-section-header__title" data-wrn-owner="SectionHeader" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{title}</h2>
{/if}
<p class="wrn-section-header__description" data-show="description">{description}</p>
<p class="wrn-section-header__description" data-show="description" data-wrn-owner="SectionHeader" data-wrn-part="description" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{description}</p>
<slot></slot>
</div>
<div class="wrn-section-header__actions">
<div class="wrn-section-header__actions" data-wrn-owner="SectionHeader" data-wrn-part="actions" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<slot name="actions"></slot>
</div>
</header>
packages/ui/components/Sidebar.wrn
+40 -40
View File
@@ -106,23 +106,23 @@ component Sidebar {
data-color='{color}'
data-size='{size}'
data-mobile='{mobile ? "true" : "false"}'
>
data-wrn-owner="Sidebar" data-wrn-part="root" data-wrn-component="Sidebar" data-wrn-axis-color='{color}' data-wrn-axis-size='{size}'>
<button
type="button"
class="wrn-sidebar__launcher"
aria-label='{mobileLabel}'
aria-expanded='{drawerOpen}'
@click='openDrawer(event)'
>
<span class="wrn-sidebar__launcher-bar" aria-hidden="true"></span>
<span class="wrn-sidebar__launcher-text">{mobileLabel}</span>
data-wrn-owner="Sidebar" data-wrn-part="launcher" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<span class="wrn-sidebar__launcher-bar" aria-hidden="true" data-wrn-owner="Sidebar" data-wrn-part="launcherBar" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"></span>
<span class="wrn-sidebar__launcher-text" data-wrn-owner="Sidebar" data-wrn-part="launcherText" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{mobileLabel}</span>
</button>
<nav class="wrn-sidebar__rail" aria-label='{label}'>
<ul class="wrn-sidebar__list" data-wrn-roving="vertical">
<nav class="wrn-sidebar__rail" aria-label='{label}' data-wrn-owner="Sidebar" data-wrn-part="rail" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<ul class="wrn-sidebar__list" data-wrn-roving="vertical" data-wrn-owner="Sidebar" data-wrn-part="list" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
{#each entryList() as entry}
<li class="wrn-sidebar__entry" data-group='{isGroup(entry)}'>
<p class="wrn-sidebar__heading" data-show="entry.heading">{entry.heading}</p>
<li class="wrn-sidebar__entry" data-group='{isGroup(entry)}' data-wrn-owner="Sidebar" data-wrn-part="entry" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<p class="wrn-sidebar__heading" data-show="entry.heading" data-wrn-owner="Sidebar" data-wrn-part="heading" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{entry.heading}</p>
<a
class='wrn-sidebar__link {isActive(entry) ? "wrn-sidebar__link--active" : ""}'
@@ -134,19 +134,19 @@ component Sidebar {
aria-disabled='{entry.disabled ? "true" : "false"}'
tabindex='{entry.disabled ? "-1" : "0"}'
@click='choose(entry, 1, event)'
>
data-wrn-owner="Sidebar" data-wrn-part="link" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<span
class='wrn-sidebar__icon {entry.icon}'
data-show="entry.icon"
aria-hidden="true"
></span>
<span class="wrn-sidebar__label">{entry.label}</span>
<span class="wrn-sidebar__badge" data-show="entry.badge">{entry.badge}</span>
data-wrn-owner="Sidebar" data-wrn-part="icon" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"></span>
<span class="wrn-sidebar__label" data-wrn-owner="Sidebar" data-wrn-part="label" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{entry.label}</span>
<span class="wrn-sidebar__badge" data-show="entry.badge" data-wrn-owner="Sidebar" data-wrn-part="badge" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{entry.badge}</span>
</a>
<ul class="wrn-sidebar__sublist" data-show="childrenOf(entry).length > 0">
<ul class="wrn-sidebar__sublist" data-show="childrenOf(entry).length > 0" data-wrn-owner="Sidebar" data-wrn-part="sublist" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
{#each childrenOf(entry) as child}
<li class="wrn-sidebar__entry">
<li class="wrn-sidebar__entry" data-wrn-owner="Sidebar" data-wrn-part="entry" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<a
class='wrn-sidebar__link {isActive(child) ? "wrn-sidebar__link--active" : ""}'
href='{child.href || "#"}'
@@ -156,22 +156,22 @@ component Sidebar {
data-wrn-roving-item="true"
tabindex='{child.disabled ? "-1" : "0"}'
@click='choose(child, 2, event)'
>
data-wrn-owner="Sidebar" data-wrn-part="link" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<span
class='wrn-sidebar__icon {child.icon}'
data-show="child.icon"
aria-hidden="true"
></span>
<span class="wrn-sidebar__label">{child.label}</span>
<span class="wrn-sidebar__badge" data-show="child.badge">{child.badge}</span>
data-wrn-owner="Sidebar" data-wrn-part="icon" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"></span>
<span class="wrn-sidebar__label" data-wrn-owner="Sidebar" data-wrn-part="label" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{child.label}</span>
<span class="wrn-sidebar__badge" data-show="child.badge" data-wrn-owner="Sidebar" data-wrn-part="badge" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{child.badge}</span>
</a>
<ul
class="wrn-sidebar__sublist wrn-sidebar__sublist--level3"
data-show="childrenOf(child).length > 0"
>
data-wrn-owner="Sidebar" data-wrn-part="sublist" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
{#each childrenOf(child) as leaf}
<li class="wrn-sidebar__entry">
<li class="wrn-sidebar__entry" data-wrn-owner="Sidebar" data-wrn-part="entry" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<a
class='wrn-sidebar__link {isActive(leaf) ? "wrn-sidebar__link--active" : ""}'
href='{leaf.href || "#"}'
@@ -181,8 +181,8 @@ component Sidebar {
data-wrn-roving-item="true"
tabindex='{leaf.disabled ? "-1" : "0"}'
@click='choose(leaf, 3, event)'
>
<span class="wrn-sidebar__label">{leaf.label}</span>
data-wrn-owner="Sidebar" data-wrn-part="link" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<span class="wrn-sidebar__label" data-wrn-owner="Sidebar" data-wrn-part="label" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{leaf.label}</span>
</a>
</li>
{/each}
@@ -204,11 +204,11 @@ component Sidebar {
label={label}
@close="closeDrawer()"
>
<nav class="wrn-sidebar__drawer-nav" aria-label='{label}'>
<ul class="wrn-sidebar__list" data-wrn-roving="vertical">
<nav class="wrn-sidebar__drawer-nav" aria-label='{label}' data-wrn-owner="Sidebar" data-wrn-part="drawerNav" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<ul class="wrn-sidebar__list" data-wrn-roving="vertical" data-wrn-owner="Sidebar" data-wrn-part="list" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
{#each entryList() as entry}
<li class="wrn-sidebar__entry" data-group='{isGroup(entry)}'>
<p class="wrn-sidebar__heading" data-show="entry.heading">{entry.heading}</p>
<li class="wrn-sidebar__entry" data-group='{isGroup(entry)}' data-wrn-owner="Sidebar" data-wrn-part="entry" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<p class="wrn-sidebar__heading" data-show="entry.heading" data-wrn-owner="Sidebar" data-wrn-part="heading" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{entry.heading}</p>
<a
class='wrn-sidebar__link {isActive(entry) ? "wrn-sidebar__link--active" : ""}'
@@ -220,19 +220,19 @@ component Sidebar {
aria-disabled='{entry.disabled ? "true" : "false"}'
tabindex='{entry.disabled ? "-1" : "0"}'
@click='choose(entry, 1, event)'
>
data-wrn-owner="Sidebar" data-wrn-part="link" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<span
class='wrn-sidebar__icon {entry.icon}'
data-show="entry.icon"
aria-hidden="true"
></span>
<span class="wrn-sidebar__label">{entry.label}</span>
<span class="wrn-sidebar__badge" data-show="entry.badge">{entry.badge}</span>
data-wrn-owner="Sidebar" data-wrn-part="icon" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"></span>
<span class="wrn-sidebar__label" data-wrn-owner="Sidebar" data-wrn-part="label" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{entry.label}</span>
<span class="wrn-sidebar__badge" data-show="entry.badge" data-wrn-owner="Sidebar" data-wrn-part="badge" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{entry.badge}</span>
</a>
<ul class="wrn-sidebar__sublist" data-show="childrenOf(entry).length > 0">
<ul class="wrn-sidebar__sublist" data-show="childrenOf(entry).length > 0" data-wrn-owner="Sidebar" data-wrn-part="sublist" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
{#each childrenOf(entry) as child}
<li class="wrn-sidebar__entry">
<li class="wrn-sidebar__entry" data-wrn-owner="Sidebar" data-wrn-part="entry" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<a
class='wrn-sidebar__link {isActive(child) ? "wrn-sidebar__link--active" : ""}'
href='{child.href || "#"}'
@@ -242,22 +242,22 @@ component Sidebar {
data-wrn-roving-item="true"
tabindex='{child.disabled ? "-1" : "0"}'
@click='choose(child, 2, event)'
>
data-wrn-owner="Sidebar" data-wrn-part="link" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<span
class='wrn-sidebar__icon {child.icon}'
data-show="child.icon"
aria-hidden="true"
></span>
<span class="wrn-sidebar__label">{child.label}</span>
<span class="wrn-sidebar__badge" data-show="child.badge">{child.badge}</span>
data-wrn-owner="Sidebar" data-wrn-part="icon" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"></span>
<span class="wrn-sidebar__label" data-wrn-owner="Sidebar" data-wrn-part="label" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{child.label}</span>
<span class="wrn-sidebar__badge" data-show="child.badge" data-wrn-owner="Sidebar" data-wrn-part="badge" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{child.badge}</span>
</a>
<ul
class="wrn-sidebar__sublist wrn-sidebar__sublist--level3"
data-show="childrenOf(child).length > 0"
>
data-wrn-owner="Sidebar" data-wrn-part="sublist" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
{#each childrenOf(child) as leaf}
<li class="wrn-sidebar__entry">
<li class="wrn-sidebar__entry" data-wrn-owner="Sidebar" data-wrn-part="entry" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<a
class='wrn-sidebar__link {isActive(leaf) ? "wrn-sidebar__link--active" : ""}'
href='{leaf.href || "#"}'
@@ -267,8 +267,8 @@ component Sidebar {
data-wrn-roving-item="true"
tabindex='{leaf.disabled ? "-1" : "0"}'
@click='choose(leaf, 3, event)'
>
<span class="wrn-sidebar__label">{leaf.label}</span>
data-wrn-owner="Sidebar" data-wrn-part="link" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<span class="wrn-sidebar__label" data-wrn-owner="Sidebar" data-wrn-part="label" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{leaf.label}</span>
</a>
</li>
{/each}
packages/ui/components/SplitHero.wrn
+35 -35
View File
@@ -57,59 +57,59 @@ component SplitHero {
style='--wrn-split-title-max-width: {titleMaxWidth || "18ch"}'
data-visual-style='{visualStyle}'
class='wrn-split-hero {class}'
>
data-wrn-owner="SplitHero" data-wrn-part="root" data-wrn-component="SplitHero" data-wrn-axis-size='{size}' data-wrn-axis-color='{color}' data-wrn-axis-variant='{variant}'>
{#if backgroundImage}
<img
src='{backgroundImage}'
alt=""
aria-hidden="true"
class="wrn-split-hero__background-image"
/>
data-wrn-owner="SplitHero" data-wrn-part="backgroundImage" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"/>
{/if}
<div class="wrn-split-hero__glow wrn-split-hero__glow--one" aria-hidden="true"></div>
<div class="wrn-split-hero__glow wrn-split-hero__glow--two" aria-hidden="true"></div>
<div class="wrn-split-hero__glow wrn-split-hero__glow--one" aria-hidden="true" data-wrn-owner="SplitHero" data-wrn-part="glow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></div>
<div class="wrn-split-hero__glow wrn-split-hero__glow--two" aria-hidden="true" data-wrn-owner="SplitHero" data-wrn-part="glow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></div>
<div class="wrn-split-hero__inner">
<div class="wrn-split-hero__layout">
<div class="wrn-split-hero__content">
<div class="wrn-split-hero__inner" data-wrn-owner="SplitHero" data-wrn-part="inner" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<div class="wrn-split-hero__layout" data-wrn-owner="SplitHero" data-wrn-part="layout" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<div class="wrn-split-hero__content" data-wrn-owner="SplitHero" data-wrn-part="content" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if eyebrow}
<div class="wrn-split-hero__eyebrow">
<div class="wrn-split-hero__eyebrow" data-wrn-owner="SplitHero" data-wrn-part="eyebrow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if eyebrowIcon}
<span class='wrn-split-hero__eyebrow-icon {eyebrowIcon}' aria-hidden="true"></span>
<span class='wrn-split-hero__eyebrow-icon {eyebrowIcon}' aria-hidden="true" data-wrn-owner="SplitHero" data-wrn-part="eyebrowIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
{/if}
<span>{eyebrow}</span>
</div>
{/if}
<h1 class="wrn-split-hero__title">
<h1 class="wrn-split-hero__title" data-wrn-owner="SplitHero" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span>{title}</span>
{#if highlight}
<span class="wrn-split-hero__highlight">{highlight}</span>
<span class="wrn-split-hero__highlight" data-wrn-owner="SplitHero" data-wrn-part="highlight" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{highlight}</span>
{/if}
</h1>
{#if description}
<p class="wrn-split-hero__description">{description}</p>
<p class="wrn-split-hero__description" data-wrn-owner="SplitHero" data-wrn-part="description" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{description}</p>
{/if}
<slot></slot>
{#if primaryLabel || secondaryLabel}
<div class="wrn-split-hero__actions">
<div class="wrn-split-hero__actions" data-wrn-owner="SplitHero" data-wrn-part="actions" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if primaryLabel}
<a href='{primaryHref || "#"}' class="wrn-split-hero__action wrn-split-hero__action--primary">
<a href='{primaryHref || "#"}' class="wrn-split-hero__action wrn-split-hero__action--primary" data-wrn-owner="SplitHero" data-wrn-part="action" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if primaryIcon}
<span class='wrn-split-hero__action-icon {primaryIcon}' aria-hidden="true"></span>
<span class='wrn-split-hero__action-icon {primaryIcon}' aria-hidden="true" data-wrn-owner="SplitHero" data-wrn-part="actionIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
{/if}
<span>{primaryLabel}</span>
</a>
{/if}
{#if secondaryLabel}
<a href='{secondaryHref || "#"}' class="wrn-split-hero__action wrn-split-hero__action--secondary">
<a href='{secondaryHref || "#"}' class="wrn-split-hero__action wrn-split-hero__action--secondary" data-wrn-owner="SplitHero" data-wrn-part="action" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if secondaryIcon}
<span class='wrn-split-hero__action-icon {secondaryIcon}' aria-hidden="true"></span>
<span class='wrn-split-hero__action-icon {secondaryIcon}' aria-hidden="true" data-wrn-owner="SplitHero" data-wrn-part="actionIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
{/if}
<span>{secondaryLabel}</span>
</a>
@@ -118,15 +118,15 @@ component SplitHero {
<slot name="actions"></slot>
</div>
{:else}
<div class="wrn-split-hero__actions wrn-split-hero__actions--slot">
<div class="wrn-split-hero__actions wrn-split-hero__actions--slot" data-wrn-owner="SplitHero" data-wrn-part="actions" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<slot name="actions"></slot>
</div>
{/if}
{#if trustItems.length > 0}
<div class="wrn-split-hero__trust">
<div class="wrn-split-hero__trust" data-wrn-owner="SplitHero" data-wrn-part="trust" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#each trustItems as item}
<span class="wrn-split-hero__trust-item">
<span class="wrn-split-hero__trust-item" data-wrn-owner="SplitHero" data-wrn-part="trustItem" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span class='{item.icon || "icon-[lucide--check-circle-2]"}' aria-hidden="true"></span>
<span>{item.label || item.title || item}</span>
</span>
@@ -137,53 +137,53 @@ component SplitHero {
<slot name="trust"></slot>
</div>
<div class="wrn-split-hero__visual-column">
<div class="wrn-split-hero__visual-column" data-wrn-owner="SplitHero" data-wrn-part="visualColumn" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<slot name="visual"></slot>
{#if visualImage || visualIcon || visualEyebrow || visualTitle || visualDescription || visualItems.length > 0}
<div class="wrn-split-hero__visual">
<div class="wrn-split-hero__visual" data-wrn-owner="SplitHero" data-wrn-part="visual" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if visualImage}
<div class="wrn-split-hero__visual-media">
<img src='{visualImage}' alt='{visualAlt}' class="wrn-split-hero__visual-image" />
<div class="wrn-split-hero__visual-media" data-wrn-owner="SplitHero" data-wrn-part="visualMedia" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<img src='{visualImage}' alt='{visualAlt}' class="wrn-split-hero__visual-image" data-wrn-owner="SplitHero" data-wrn-part="visualImage" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"/>
</div>
{/if}
{#if visualIcon || visualEyebrow || visualTitle || visualDescription}
<div class="wrn-split-hero__visual-header">
<div class="wrn-split-hero__visual-header" data-wrn-owner="SplitHero" data-wrn-part="visualHeader" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if visualIcon}
<div class="wrn-split-hero__visual-icon" aria-hidden="true">
<div class="wrn-split-hero__visual-icon" aria-hidden="true" data-wrn-owner="SplitHero" data-wrn-part="visualIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span class='{visualIcon}'></span>
</div>
{/if}
<div class="wrn-split-hero__visual-copy">
<div class="wrn-split-hero__visual-copy" data-wrn-owner="SplitHero" data-wrn-part="visualCopy" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if visualEyebrow}
<p class="wrn-split-hero__visual-eyebrow">{visualEyebrow}</p>
<p class="wrn-split-hero__visual-eyebrow" data-wrn-owner="SplitHero" data-wrn-part="visualEyebrow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{visualEyebrow}</p>
{/if}
{#if visualTitle}
<h2 class="wrn-split-hero__visual-title">{visualTitle}</h2>
<h2 class="wrn-split-hero__visual-title" data-wrn-owner="SplitHero" data-wrn-part="visualTitle" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{visualTitle}</h2>
{/if}
{#if visualDescription}
<p class="wrn-split-hero__visual-description">{visualDescription}</p>
<p class="wrn-split-hero__visual-description" data-wrn-owner="SplitHero" data-wrn-part="visualDescription" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{visualDescription}</p>
{/if}
</div>
</div>
{/if}
{#if visualItems.length > 0}
<div class="wrn-split-hero__visual-list">
<div class="wrn-split-hero__visual-list" data-wrn-owner="SplitHero" data-wrn-part="visualList" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#each visualItems as item}
<div class="wrn-split-hero__visual-item">
<div class="wrn-split-hero__visual-item" data-wrn-owner="SplitHero" data-wrn-part="visualItem" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if item.icon}
<div class="wrn-split-hero__visual-item-icon" aria-hidden="true">
<div class="wrn-split-hero__visual-item-icon" aria-hidden="true" data-wrn-owner="SplitHero" data-wrn-part="visualItemIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span class='{item.icon}'></span>
</div>
{/if}
<div class="wrn-split-hero__visual-item-copy">
<div class="wrn-split-hero__visual-item-heading">
<div class="wrn-split-hero__visual-item-copy" data-wrn-owner="SplitHero" data-wrn-part="visualItemCopy" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<div class="wrn-split-hero__visual-item-heading" data-wrn-owner="SplitHero" data-wrn-part="visualItemHeading" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<strong>{item.label || item.title}</strong>
{#if item.value}
<span>{item.value}</span>
packages/ui/components/StatsBar.wrn
+18 -18
View File
@@ -32,73 +32,73 @@ component StatsBar {
data-radius='{radius}' data-shadow='{shadow}' data-gutter='{gutter}' data-outer-spacing='{outerSpacing}' data-mobile-columns='{mobileColumns}'
class='wrn-stats-bar {class}'
aria-label="Key statistics"
>
<div class="wrn-stats-bar__inner">
<div class="wrn-stats-bar__surface">
data-wrn-owner="StatsBar" data-wrn-part="root" data-wrn-component="StatsBar" data-wrn-axis-compact='{compact ? "true" : "false"}' data-wrn-axis-size='{size}' data-wrn-axis-color='{color}' data-wrn-axis-variant='{variant}' data-wrn-axis-radius='{radius}' data-wrn-axis-shadow='{shadow}'>
<div class="wrn-stats-bar__inner" data-wrn-owner="StatsBar" data-wrn-part="inner" data-wrn-axis-compact="{compact}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}">
<div class="wrn-stats-bar__surface" data-wrn-owner="StatsBar" data-wrn-part="surface" data-wrn-axis-compact="{compact}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}">
{#each items as item, itemIndex}
<article
class="wrn-stats-bar__item"
data-color='{item.color || color}'
data-index='{itemIndex}'
>
<div class="wrn-stats-bar__content">
data-wrn-owner="StatsBar" data-wrn-part="item" data-wrn-axis-compact="{compact}" data-wrn-axis-size="{size}" data-wrn-axis-color='{item.color || color}' data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}">
<div class="wrn-stats-bar__content" data-wrn-owner="StatsBar" data-wrn-part="content" data-wrn-axis-compact="{compact}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}">
{#if item.label}
<p class="wrn-stats-bar__label">{item.label}</p>
<p class="wrn-stats-bar__label" data-wrn-owner="StatsBar" data-wrn-part="label" data-wrn-axis-compact="{compact}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}">{item.label}</p>
{/if}
<div class="wrn-stats-bar__value-row">
<strong class="wrn-stats-bar__value">{item.value}</strong>
<div class="wrn-stats-bar__value-row" data-wrn-owner="StatsBar" data-wrn-part="valueRow" data-wrn-axis-compact="{compact}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}">
<strong class="wrn-stats-bar__value" data-wrn-owner="StatsBar" data-wrn-part="value" data-wrn-axis-compact="{compact}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}">{item.value}</strong>
{#if item.suffix}
<span class="wrn-stats-bar__suffix">{item.suffix}</span>
<span class="wrn-stats-bar__suffix" data-wrn-owner="StatsBar" data-wrn-part="suffix" data-wrn-axis-compact="{compact}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}">{item.suffix}</span>
{/if}
</div>
{#if item.description}
<p class="wrn-stats-bar__description">{item.description}</p>
<p class="wrn-stats-bar__description" data-wrn-owner="StatsBar" data-wrn-part="description" data-wrn-axis-compact="{compact}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}">{item.description}</p>
{/if}
{#if item.trend || item.trendLabel}
<div
class="wrn-stats-bar__trend"
data-direction='{item.trendDirection || "neutral"}'
>
data-wrn-owner="StatsBar" data-wrn-part="trend" data-wrn-axis-compact="{compact}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}">
{#if item.trendDirection === "up"}
<span
class="icon-[lucide--trending-up] wrn-stats-bar__trend-icon"
aria-hidden="true"
></span>
data-wrn-owner="StatsBar" data-wrn-part="trendIcon" data-wrn-axis-compact="{compact}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}"></span>
{:else if item.trendDirection === "down"}
<span
class="icon-[lucide--trending-down] wrn-stats-bar__trend-icon"
aria-hidden="true"
></span>
data-wrn-owner="StatsBar" data-wrn-part="trendIcon" data-wrn-axis-compact="{compact}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}"></span>
{:else}
<span
class="icon-[lucide--minus] wrn-stats-bar__trend-icon"
aria-hidden="true"
></span>
data-wrn-owner="StatsBar" data-wrn-part="trendIcon" data-wrn-axis-compact="{compact}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}"></span>
{/if}
{#if item.trend}
<span class="wrn-stats-bar__trend-value">{item.trend}</span>
<span class="wrn-stats-bar__trend-value" data-wrn-owner="StatsBar" data-wrn-part="trendValue" data-wrn-axis-compact="{compact}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}">{item.trend}</span>
{/if}
{#if item.trendLabel}
<span class="wrn-stats-bar__trend-label">{item.trendLabel}</span>
<span class="wrn-stats-bar__trend-label" data-wrn-owner="StatsBar" data-wrn-part="trendLabel" data-wrn-axis-compact="{compact}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}">{item.trendLabel}</span>
{/if}
</div>
{/if}
</div>
{#if icons && item.icon}
<div class="wrn-stats-bar__icon" aria-hidden="true">
<div class="wrn-stats-bar__icon" aria-hidden="true" data-wrn-owner="StatsBar" data-wrn-part="icon" data-wrn-axis-compact="{compact}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}">
<span class='{item.icon}'></span>
</div>
{/if}
</article>
{:empty}
<div class="wrn-stats-bar__empty" role="status">No statistics are available.</div>
<div class="wrn-stats-bar__empty" role="status" data-wrn-owner="StatsBar" data-wrn-part="empty" data-wrn-axis-compact="{compact}" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}">No statistics are available.</div>
{/each}
</div>
</div>
packages/ui/components/Stepper.wrn
+20 -20
View File
@@ -146,72 +146,72 @@ component Stepper {
data-color='{color}'
data-size='{size}'
data-clickable='{clickable}'
>
data-wrn-owner="Stepper" data-wrn-part="root" data-wrn-component="Stepper" data-wrn-axis-color='{color}' data-wrn-axis-size='{size}'>
<ol
class="wrn-stepper__list"
data-wrn-roving='{rovingAxis()}'
aria-label='{label}'
>
data-wrn-owner="Stepper" data-wrn-part="list" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
{#each stepList() as step, index}
<li
class="wrn-stepper__step"
data-status='{statusFor(index)}'
aria-current='{statusFor(index) === "current" ? "step" : "false"}'
>
data-wrn-owner="Stepper" data-wrn-part="step" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<button
type="button"
class="wrn-stepper__button"
data-wrn-roving-item='{clickable ? "true" : "false"}'
@click='selectStep(index, step)'
>
<span class="wrn-stepper__marker" aria-hidden="true">
<span class='wrn-stepper__icon {step.icon}' data-show="step.icon"></span>
<span class="wrn-stepper__number" data-show="!step.icon">{index + 1}</span>
data-wrn-owner="Stepper" data-wrn-part="button" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<span class="wrn-stepper__marker" aria-hidden="true" data-wrn-owner="Stepper" data-wrn-part="marker" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<span class='wrn-stepper__icon {step.icon}' data-show="step.icon" data-wrn-owner="Stepper" data-wrn-part="icon" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"></span>
<span class="wrn-stepper__number" data-show="!step.icon" data-wrn-owner="Stepper" data-wrn-part="number" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{index + 1}</span>
</span>
<span class="wrn-stepper__body">
<span class="wrn-stepper__label">{step.label}</span>
<span class="wrn-stepper__description" data-show="step.description">
<span class="wrn-stepper__body" data-wrn-owner="Stepper" data-wrn-part="body" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<span class="wrn-stepper__label" data-wrn-owner="Stepper" data-wrn-part="label" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{step.label}</span>
<span class="wrn-stepper__description" data-show="step.description" data-wrn-owner="Stepper" data-wrn-part="description" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
{step.description}
</span>
</span>
</button>
<span class="wrn-stepper__custom">
<span class="wrn-stepper__custom" data-wrn-owner="Stepper" data-wrn-part="custom" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<slot name="step-{index}"></slot>
</span>
</li>
{/each}
</ol>
<div class="wrn-stepper__panels" data-show="showPanel">
<div class="wrn-stepper__panels" data-show="showPanel" data-wrn-owner="Stepper" data-wrn-part="panels" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
{#each stepList() as step, index}
<div
class="wrn-stepper__panel"
data-show='isActiveStep(index)'
aria-hidden='{index === activeIndex() ? "false" : "true"}'
>
<h4 class="wrn-stepper__panel-title" data-show="step.title">{step.title}</h4>
<p class="wrn-stepper__panel-body" data-show="step.content">{step.content}</p>
data-wrn-owner="Stepper" data-wrn-part="panel" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<h4 class="wrn-stepper__panel-title" data-show="step.title" data-wrn-owner="Stepper" data-wrn-part="panelTitle" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{step.title}</h4>
<p class="wrn-stepper__panel-body" data-show="step.content" data-wrn-owner="Stepper" data-wrn-part="panelBody" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{step.content}</p>
<slot name="panel-{index}"></slot>
</div>
{/each}
</div>
<div class="wrn-stepper__controls" data-show="controls">
<div class="wrn-stepper__controls" data-show="controls" data-wrn-owner="Stepper" data-wrn-part="controls" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<button
type="button"
class="wrn-stepper__button-control wrn-stepper__back"
disabled='{activeIndex() === 0}'
@click='goBack()'
>
data-wrn-owner="Stepper" data-wrn-part="buttonControl" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
{backLabel}
</button>
<span class="wrn-stepper__controls-spacer"></span>
<span class="wrn-stepper__controls-spacer" data-wrn-owner="Stepper" data-wrn-part="controlsSpacer" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"></span>
<button
type="button"
class="wrn-stepper__button-control wrn-stepper__skip"
data-show="allowSkip && !onLastStep()"
@click='goSkip()'
>
data-wrn-owner="Stepper" data-wrn-part="buttonControl" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
{skipLabel}
</button>
<button
@@ -220,7 +220,7 @@ component Stepper {
data-primary="true"
disabled='{nextDisabled}'
@click='goNext()'
>
data-wrn-owner="Stepper" data-wrn-part="buttonControl" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
{onLastStep() ? finishLabel : nextLabel}
</button>
</div>
packages/ui/components/StrongPassword.wrn
+19 -19
View File
@@ -139,10 +139,10 @@ component StrongPassword {
data-wrn-strong-password
data-strength="{password ? strengthLevel() : 'empty'}"
data-score="{password ? score() : 0}"
>
<label for="{name}-strong-password">{label}</label>
<div class="wrn-next__strong-password-anchor">
<span class="wrn-next__strong-password-leading-icon" aria-hidden="true"></span>
data-wrn-owner="StrongPassword" data-wrn-part="root" data-wrn-component="StrongPassword" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<label for="{name}-strong-password" data-wrn-owner="StrongPassword" data-wrn-part="label" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{label}</label>
<div class="wrn-next__strong-password-anchor" data-wrn-owner="StrongPassword" data-wrn-part="anchor" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<span class="wrn-next__strong-password-leading-icon" aria-hidden="true" data-wrn-owner="StrongPassword" data-wrn-part="leadingIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></span>
<input
{...attrs}
id="{name}-strong-password"
@@ -161,7 +161,7 @@ component StrongPassword {
@blur="detailsOpen = false"
@invalid="handleInvalid(event)" @input="nativeError = ''; password = event.target.value; output.input({ value: password, score: score(), maximumScore: maximumScore(), percent: strengthPercent(), level: strengthLevel() }); output.strength({ value: password, score: score(), maximumScore: maximumScore(), percent: strengthPercent(), level: strengthLevel() })"
@change="output.change({ value: password, score: score(), maximumScore: maximumScore(), percent: strengthPercent(), level: strengthLevel() })"
/>
data-wrn-owner="StrongPassword" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"/>
<button
type="button"
class="wrn-next__strong-password-toggle"
@@ -170,17 +170,17 @@ component StrongPassword {
aria-pressed="{revealed ? 'true' : 'false'}"
disabled="{disabled || readonly}"
@click="toggleVisibility()"
><span aria-hidden="true"></span></button>
data-wrn-owner="StrongPassword" data-wrn-part="toggle" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"><span aria-hidden="true"></span></button>
{#if presentation === "popover"}
<div
class="wrn-next__strong-password-popover"
data-open="{detailsOpen ? 'true' : 'false'}"
role="status"
>
<div class="wrn-next__strong-password-popover-arrow" aria-hidden="true"></div>
<div class="wrn-next__strong-password-details">
<div class="wrn-next__strong-password-summary">
data-wrn-owner="StrongPassword" data-wrn-part="popover" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<div class="wrn-next__strong-password-popover-arrow" aria-hidden="true" data-wrn-owner="StrongPassword" data-wrn-part="popoverArrow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></div>
<div class="wrn-next__strong-password-details" data-wrn-owner="StrongPassword" data-wrn-part="details" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<div class="wrn-next__strong-password-summary" data-wrn-owner="StrongPassword" data-wrn-part="summary" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<span>Password strength</span>
<strong>{password ? strengthLabel() : emptyLabel}</strong>
</div>
@@ -191,18 +191,18 @@ component StrongPassword {
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow="{password ? strengthPercent() : 0}"
>
data-wrn-owner="StrongPassword" data-wrn-part="meter" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<span style="width: {password ? strengthPercent() : 0}%"></span>
</div>
{#if showRequirements}
<ul class="wrn-next__strong-password-requirements">
<ul class="wrn-next__strong-password-requirements" data-wrn-owner="StrongPassword" data-wrn-part="requirements" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<li data-met="{password && hasMinimumLength() ? 'true' : 'false'}">
<span aria-hidden="true"></span>At least {minLength} characters
</li>
{#if requireLowercase}<li data-met="{password && hasLowercase() ? 'true' : 'false'}"><span aria-hidden="true"></span>One lowercase letter</li>{/if}
{#if requireUppercase}<li data-met="{password && hasUppercase() ? 'true' : 'false'}"><span aria-hidden="true"></span>One uppercase letter</li>{/if}
{#if requireNumber}<li data-met="{password && hasNumber() ? 'true' : 'false'}"><span aria-hidden="true"></span>One number</li>{/if}
{#if requireSpecialCharacter}<li class="wrn-next__strong-password-special" data-met="{password && hasSpecialCharacter() ? 'true' : 'false'}"><span aria-hidden="true"></span>One special character: {specialCharactersSet}</li>{/if}
{#if requireSpecialCharacter}<li class="wrn-next__strong-password-special" data-met="{password && hasSpecialCharacter() ? 'true' : 'false'}" data-wrn-owner="StrongPassword" data-wrn-part="special" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"><span aria-hidden="true"></span>One special character: {specialCharactersSet}</li>{/if}
</ul>
{/if}
{#if hintText}<small id="{name}-hint">{hintText}</small>{/if}
@@ -212,8 +212,8 @@ component StrongPassword {
</div>
{#if presentation !== "popover"}
<div class="wrn-next__strong-password-details">
<div class="wrn-next__strong-password-summary">
<div class="wrn-next__strong-password-details" data-wrn-owner="StrongPassword" data-wrn-part="details" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<div class="wrn-next__strong-password-summary" data-wrn-owner="StrongPassword" data-wrn-part="summary" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<span>Password strength</span>
<strong>{password ? strengthLabel() : emptyLabel}</strong>
</div>
@@ -224,23 +224,23 @@ component StrongPassword {
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow="{password ? strengthPercent() : 0}"
>
data-wrn-owner="StrongPassword" data-wrn-part="meter" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<span style="width: {password ? strengthPercent() : 0}%"></span>
</div>
{#if showRequirements}
<ul class="wrn-next__strong-password-requirements">
<ul class="wrn-next__strong-password-requirements" data-wrn-owner="StrongPassword" data-wrn-part="requirements" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<li data-met="{password && hasMinimumLength() ? 'true' : 'false'}"><span aria-hidden="true"></span>At least {minLength} characters</li>
{#if requireLowercase}<li data-met="{password && hasLowercase() ? 'true' : 'false'}"><span aria-hidden="true"></span>One lowercase letter</li>{/if}
{#if requireUppercase}<li data-met="{password && hasUppercase() ? 'true' : 'false'}"><span aria-hidden="true"></span>One uppercase letter</li>{/if}
{#if requireNumber}<li data-met="{password && hasNumber() ? 'true' : 'false'}"><span aria-hidden="true"></span>One number</li>{/if}
{#if requireSpecialCharacter}<li class="wrn-next__strong-password-special" data-met="{password && hasSpecialCharacter() ? 'true' : 'false'}"><span aria-hidden="true"></span>One special character: {specialCharactersSet}</li>{/if}
{#if requireSpecialCharacter}<li class="wrn-next__strong-password-special" data-met="{password && hasSpecialCharacter() ? 'true' : 'false'}" data-wrn-owner="StrongPassword" data-wrn-part="special" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"><span aria-hidden="true"></span>One special character: {specialCharactersSet}</li>{/if}
</ul>
{/if}
{#if hintText}<small id="{name}-hint">{hintText}</small>{/if}
</div>
{/if}
<small id="{name}-validation" class="wrn-next__validation" data-error="{name}">{(validationMessage || nativeError)}</small>
<small id="{name}-validation" class="wrn-next__validation" data-error="{name}" data-wrn-owner="StrongPassword" data-wrn-part="validation" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{(validationMessage || nativeError)}</small>
</div>
}
packages/ui/components/StyledIcon.wrn
+1 -1
View File
@@ -12,7 +12,7 @@ component StyledIcon {
}
view {
<span {...attrs} class="wrn-styled-icon {class}" data-size="{size}" data-color="{color}" data-variant="{variant}" role="{label ? 'img' : 'presentation'}" aria-label="{label}" aria-hidden="{label ? 'false' : 'true'}"><span class="{icon}"></span></span>
<span {...attrs} class="wrn-styled-icon {class}" data-size="{size}" data-color="{color}" data-variant="{variant}" role="{label ? 'img' : 'presentation'}" aria-label="{label}" aria-hidden="{label ? 'false' : 'true'}" data-wrn-owner="StyledIcon" data-wrn-part="root" data-wrn-component="StyledIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><span class="{icon}"></span></span>
}
style {
packages/ui/components/Tabs.wrn
+11 -11
View File
@@ -127,14 +127,14 @@ component Tabs {
data-slide='{slideFrom}'
data-mode='{mode}'
data-param='{param}'
>
data-wrn-owner="Tabs" data-wrn-part="root" data-wrn-component="Tabs" data-wrn-axis-color='{color}' data-wrn-axis-size='{size}'>
<div
class="wrn-tabs__list"
role="tablist"
aria-label='{label}'
aria-orientation='{orientation}'
data-wrn-roving='{rovingAxis()}'
>
data-wrn-owner="Tabs" data-wrn-part="list" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
{#each itemList() as item, index}
<button
type="button"
@@ -147,15 +147,15 @@ component Tabs {
aria-selected='{isSelected(item, index) ? "true" : "false"}'
aria-disabled='{item.disabled ? "true" : "false"}'
@click='selectTab(item, index, event)'
>
<span class='wrn-tabs__icon {item.icon}' data-show="item.icon" aria-hidden="true"></span>
<span class="wrn-tabs__label">{item.label || item.title}</span>
<span class="wrn-tabs__badge" data-show="item.badge">{item.badge}</span>
data-wrn-owner="Tabs" data-wrn-part="tab" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<span class='wrn-tabs__icon {item.icon}' data-show="item.icon" aria-hidden="true" data-wrn-owner="Tabs" data-wrn-part="icon" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"></span>
<span class="wrn-tabs__label" data-wrn-owner="Tabs" data-wrn-part="label" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{item.label || item.title}</span>
<span class="wrn-tabs__badge" data-show="item.badge" data-wrn-owner="Tabs" data-wrn-part="badge" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{item.badge}</span>
</button>
{/each}
</div>
<div class="wrn-tabs__panels">
<div class="wrn-tabs__panels" data-wrn-owner="Tabs" data-wrn-part="panels" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
{#each itemList() as item, index}
<div
class="wrn-tabs__panel"
@@ -164,12 +164,12 @@ component Tabs {
aria-labelledby='{tabId(item, index)}'
tabindex="0"
data-show='isSelected(item, index)'
>
<h3 class="wrn-tabs__title" data-show="item.title && item.title !== item.label">
data-wrn-owner="Tabs" data-wrn-part="panel" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<h3 class="wrn-tabs__title" data-show="item.title && item.title !== item.label" data-wrn-owner="Tabs" data-wrn-part="title" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
{item.title}
</h3>
<p class="wrn-tabs__description" data-show="item.description">{item.description}</p>
<div class="wrn-tabs__content" data-show="item.content">{item.content}</div>
<p class="wrn-tabs__description" data-show="item.description" data-wrn-owner="Tabs" data-wrn-part="description" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{item.description}</p>
<div class="wrn-tabs__content" data-show="item.content" data-wrn-owner="Tabs" data-wrn-part="content" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{item.content}</div>
<slot name='{panelSlot(item, index)}'></slot>
</div>
{/each}
packages/ui/components/TextLink.wrn
+8 -8
View File
@@ -30,15 +30,15 @@ label: string = "Learn more"
data-color='{color}'
data-variant='{variant}'
class='wrn-text-link {class}'
>
data-wrn-owner="TextLink" data-wrn-part="root" data-wrn-component="TextLink" data-wrn-axis-size='{size}' data-wrn-axis-color='{color}' data-wrn-axis-variant='{variant}'>
{#if disabled}
<span
aria-disabled="true"
class="wrn-text-link__control"
data-size='{size}'
>
data-wrn-owner="TextLink" data-wrn-part="control" data-wrn-axis-size='{size}' data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if icon && iconPosition === "start"}
<span class='{icon + " wrn-text-link__icon"}' aria-hidden="true"></span>
<span class='{icon + " wrn-text-link__icon"}' aria-hidden="true" data-wrn-owner="TextLink" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
{/if}
<span>{label}</span>
</span>
@@ -52,21 +52,21 @@ label: string = "Learn more"
data-color='{color}'
data-variant='{variant}'
data-underline='{underline ? "true" : "false"}'
>
data-wrn-owner="TextLink" data-wrn-part="control" data-wrn-axis-size='{size}' data-wrn-axis-color='{color}' data-wrn-axis-variant='{variant}'>
{#if icon && iconPosition === "start"}
<span class='{icon + " wrn-text-link__icon"}' aria-hidden="true"></span>
<span class='{icon + " wrn-text-link__icon"}' aria-hidden="true" data-wrn-owner="TextLink" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
{/if}
<span>{label}</span>
{#if icon && iconPosition === "end"}
<span class='{icon + " wrn-text-link__icon"}' aria-hidden="true"></span>
<span class='{icon + " wrn-text-link__icon"}' aria-hidden="true" data-wrn-owner="TextLink" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
{/if}
{#if external}
<span class="icon-[lucide--external-link] wrn-text-link__icon" aria-hidden="true"></span>
<span class="icon-[lucide--external-link] wrn-text-link__icon" aria-hidden="true" data-wrn-owner="TextLink" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
{:else if showArrow}
<span class="icon-[lucide--arrow-right] wrn-text-link__icon wrn-text-link__arrow" aria-hidden="true"></span>
<span class="icon-[lucide--arrow-right] wrn-text-link__icon wrn-text-link__arrow" aria-hidden="true" data-wrn-owner="TextLink" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
{/if}
</a>
{/if}
packages/ui/components/TimePicker.wrn
+9 -9
View File
@@ -51,16 +51,16 @@ size: string = "default"
client function handleInvalid(sourceEvent) { output.invalid({ name: name, message: sourceEvent.currentTarget.validationMessage, sourceEvent: sourceEvent }) }
}
view {
<div {...attrs} class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--field wrn-next--time-picker {class}" data-variant="{variant}" data-inline="{inline}" data-floating="{variant === 'floating'}" data-invalid="{error ? 'true' : 'false'}" data-expanded="{expanded}" @keydown="if (event.key === 'Escape') { closePicker(event) }">
<div class="wrn-next__field-heading"><label class="{hiddenLabel ? 'wrn-next__sr-only' : ''}" for="{id || name}">{label}</label>{#if cornerHint}<span class="wrn-next__field-hint">{cornerHint}</span>{/if}</div>
<div class="wrn-next__field-control" data-icon-position="{iconPosition}">
{#if icon}<span class="{icon} wrn-next__field-icon" aria-hidden="true"></span>{/if}
<input id="{id || name}" class="wrn-next__sr-only wrn-next__time-value" type="text" name="{name}" value="{currentValue}" required="{required}" readonly aria-hidden="true" tabindex="-1" @invalid="handleInvalid(event)" />
<button type="button" class="wrn-next__time-trigger" disabled="{disabled || readonly}" aria-haspopup="dialog" aria-expanded="{expanded}" @click="openPicker(event)" @focus="handleFocus(event)" @blur="handleBlur(event)"><span>{currentValue || placeholder || "Select time"}</span><i class="{icon}" aria-hidden="true"></i></button>
<div {...attrs} class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--field wrn-next--time-picker {class}" data-variant="{variant}" data-inline="{inline}" data-floating="{variant === 'floating'}" data-invalid="{error ? 'true' : 'false'}" data-expanded="{expanded}" @keydown="if (event.key === 'Escape') { closePicker(event) }" data-wrn-owner="TimePicker" data-wrn-part="root" data-wrn-component="TimePicker" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<div class="wrn-next__field-heading" data-wrn-owner="TimePicker" data-wrn-part="heading" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><label class="{hiddenLabel ? 'wrn-next__sr-only' : ''}" for="{id || name}" data-wrn-owner="TimePicker" data-wrn-part="srOnly" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{label}</label>{#if cornerHint}<span class="wrn-next__field-hint" data-wrn-owner="TimePicker" data-wrn-part="hint" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{cornerHint}</span>{/if}</div>
<div class="wrn-next__field-control" data-icon-position="{iconPosition}" data-wrn-owner="TimePicker" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if icon}<span class="{icon} wrn-next__field-icon" aria-hidden="true" data-wrn-owner="TimePicker" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>{/if}
<input id="{id || name}" class="wrn-next__sr-only wrn-next__time-value" type="text" name="{name}" value="{currentValue}" required="{required}" readonly aria-hidden="true" tabindex="-1" @invalid="handleInvalid(event)" data-wrn-owner="TimePicker" data-wrn-part="srOnly" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"/>
<button type="button" class="wrn-next__time-trigger" disabled="{disabled || readonly}" aria-haspopup="dialog" aria-expanded="{expanded}" @click="openPicker(event)" @focus="handleFocus(event)" @blur="handleBlur(event)" data-wrn-owner="TimePicker" data-wrn-part="timeTrigger" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><span>{currentValue || placeholder || "Select time"}</span><i class="{icon}" aria-hidden="true"></i></button>
</div>
<button type="button" class="wrn-time-dismiss" aria-label="Close time picker" data-show="expanded" @click="closePicker(event)"></button><div data-show="expanded" class="wrn-next__time-panel" role="dialog" aria-label="{label}"><div><strong>Hour</strong><div class="wrn-next__time-options">{#each hours as hour}<button type="button" data-part="hour" data-value="{hour}" aria-pressed="{!!currentValue && String(hour) === selectedHour}" @click="selectTimePart(event)">{hour}</button>{/each}</div></div><div><strong>Minute</strong><div class="wrn-next__time-options">{#each minutes as minute}<button type="button" data-part="minute" data-value="{minute}" aria-pressed="{!!currentValue && String(minute) === selectedMinute}" @click="selectTimePart(event)">{minute}</button>{/each}</div></div><button type="button" class="wrn-next__time-done" @click="closePicker(event)">Done</button></div>
{#if helperText}<small class="wrn-next__field-help">{helperText}</small>{/if}
<small class="wrn-next__field-error" data-error="{name}">{error}</small>
<button type="button" class="wrn-time-dismiss" aria-label="Close time picker" data-show="expanded" @click="closePicker(event)" data-wrn-owner="TimePicker" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></button><div data-show="expanded" class="wrn-next__time-panel" role="dialog" aria-label="{label}" data-wrn-owner="TimePicker" data-wrn-part="timePanel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><div><strong>Hour</strong><div class="wrn-next__time-options" data-wrn-owner="TimePicker" data-wrn-part="timeOptions" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{#each hours as hour}<button type="button" data-part="hour" data-value="{hour}" aria-pressed="{!!currentValue && String(hour) === selectedHour}" @click="selectTimePart(event)" data-wrn-owner="TimePicker" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{hour}</button>{/each}</div></div><div><strong>Minute</strong><div class="wrn-next__time-options" data-wrn-owner="TimePicker" data-wrn-part="timeOptions" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{#each minutes as minute}<button type="button" data-part="minute" data-value="{minute}" aria-pressed="{!!currentValue && String(minute) === selectedMinute}" @click="selectTimePart(event)" data-wrn-owner="TimePicker" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{minute}</button>{/each}</div></div><button type="button" class="wrn-next__time-done" @click="closePicker(event)" data-wrn-owner="TimePicker" data-wrn-part="timeDone" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">Done</button></div>
{#if helperText}<small class="wrn-next__field-help" data-wrn-owner="TimePicker" data-wrn-part="help" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{helperText}</small>{/if}
<small class="wrn-next__field-error" data-error="{name}" data-wrn-owner="TimePicker" data-wrn-part="error" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{error}</small>
</div>
}
packages/ui/components/Timeline.wrn
+18 -18
View File
@@ -37,32 +37,32 @@ component Timeline {
data-size='{size}'
data-color='{color}'
data-variant='{variant}'
>
data-wrn-owner="Timeline" data-wrn-part="root" data-wrn-component="Timeline" data-wrn-axis-size='{size}' data-wrn-axis-color='{color}' data-wrn-axis-variant='{variant}'>
{#if title || description}
<header class="wrn-timeline__header">
<header class="wrn-timeline__header" data-wrn-owner="Timeline" data-wrn-part="header" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if title}
<h3 class="wrn-timeline__title">{title}</h3>
<h3 class="wrn-timeline__title" data-wrn-owner="Timeline" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{title}</h3>
{/if}
{#if description}
<p class="wrn-timeline__description">{description}</p>
<p class="wrn-timeline__description" data-wrn-owner="Timeline" data-wrn-part="description" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{description}</p>
{/if}
</header>
{/if}
<ol class="wrn-timeline__list">
<ol class="wrn-timeline__list" data-wrn-owner="Timeline" data-wrn-part="list" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#each items as item, index}
<li
class="wrn-timeline__item"
data-status='{statusOf(item, index)}'
data-interactive='{item.href ? "true" : "false"}'
@click='output.select({ item: item, index: index })'
>
data-wrn-owner="Timeline" data-wrn-part="item" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span
class="wrn-timeline__marker"
data-status='{statusOf(item, index)}'
>
data-wrn-owner="Timeline" data-wrn-part="marker" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if numbered}
<span class="wrn-timeline__number" aria-hidden="true">{index + 1}</span>
<span class="wrn-timeline__number" aria-hidden="true" data-wrn-owner="Timeline" data-wrn-part="number" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{index + 1}</span>
{:else}
<span class='{item.icon || "icon-[lucide--circle-check]"}' aria-hidden="true"></span>
{/if}
@@ -71,8 +71,8 @@ component Timeline {
<article
class="wrn-timeline__card"
data-variant='{variant}'
>
<div class="wrn-timeline__card-header">
data-wrn-owner="Timeline" data-wrn-part="card" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant='{variant}'>
<div class="wrn-timeline__card-header" data-wrn-owner="Timeline" data-wrn-part="cardHeader" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<div>
<!--
Items sit under this component's own title when it has one.
@@ -81,33 +81,33 @@ component Timeline {
the page's heading order.
-->
{#if title}
<h4 class="wrn-timeline__item-title">{item.title || item.label}</h4>
<h4 class="wrn-timeline__item-title" data-wrn-owner="Timeline" data-wrn-part="itemTitle" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.title || item.label}</h4>
{:else}
<h3 class="wrn-timeline__item-title">{item.title || item.label}</h3>
<h3 class="wrn-timeline__item-title" data-wrn-owner="Timeline" data-wrn-part="itemTitle" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.title || item.label}</h3>
{/if}
{#if item.subtitle}
<p class="wrn-timeline__subtitle">{item.subtitle}</p>
<p class="wrn-timeline__subtitle" data-wrn-owner="Timeline" data-wrn-part="subtitle" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.subtitle}</p>
{/if}
</div>
{#if item.date || item.time || item.meta}
<time class="wrn-timeline__time">{item.date || item.time || item.meta}</time>
<time class="wrn-timeline__time" data-wrn-owner="Timeline" data-wrn-part="time" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.date || item.time || item.meta}</time>
{/if}
</div>
{#if item.description}
<p class="wrn-timeline__copy">{item.description}</p>
<p class="wrn-timeline__copy" data-wrn-owner="Timeline" data-wrn-part="copy" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{item.description}</p>
{/if}
{#if item.href}
<a href='{item.href}' class="wrn-timeline__action">
<a href='{item.href}' class="wrn-timeline__action" data-wrn-owner="Timeline" data-wrn-part="action" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span>{item.actionLabel || "View details"}</span>
<span class="icon-[lucide--arrow-right] wrn-timeline__action-icon" aria-hidden="true"></span>
<span class="icon-[lucide--arrow-right] wrn-timeline__action-icon" aria-hidden="true" data-wrn-owner="Timeline" data-wrn-part="actionIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
</a>
{/if}
</article>
</li>
{:empty}
<li class="wrn-timeline__empty">No timeline items available.</li>
<li class="wrn-timeline__empty" data-wrn-owner="Timeline" data-wrn-part="empty" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">No timeline items available.</li>
{/each}
</ol>
packages/ui/components/Toaster.wrn
+14 -14
View File
@@ -449,7 +449,7 @@ component Toaster {
@window:wrnexus:toast:dismiss='dismissById(event)'
@window:wrnexus:toast:clear='clearAll()'
@window:wrnexus:toast:remove='removeById(event)'
>
data-wrn-owner="Toaster" data-wrn-part="root" data-wrn-component="Toaster" data-wrn-axis-color="{color}" data-wrn-axis-size='{size}'>
<!-- Hover is bound to the list, not to each toast, and pauses the whole
stack. A row is a data-for clone that is recreated whenever state
changes, so a per-row mouseleave would be bound to a node the
@@ -467,7 +467,7 @@ component Toaster {
@mouseleave='resumeAll()'
@focusin='pauseAll()'
@focusout='resumeAll()'
>
data-wrn-owner="Toaster" data-wrn-part="list" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<li
class="wrn-toast"
data-for="item in toasts"
@@ -478,7 +478,7 @@ component Toaster {
<span
class="wrn-toast__indicator"
aria-hidden="true"
>
data-wrn-owner="Toaster" data-wrn-part="indicator" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
</span>
<!-- An app-supplied icon class (iconify or otherwise). -->
@@ -486,7 +486,7 @@ component Toaster {
class='wrn-toast__icon {item.icon}'
data-show="item.showIcon && item.icon"
aria-hidden="true"
>
data-wrn-owner="Toaster" data-wrn-part="icon" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
</span>
<!-- Built-in fallback. Inline SVG on purpose: the package cannot
@@ -505,7 +505,7 @@ component Toaster {
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
data-wrn-owner="Toaster" data-wrn-part="icon" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<g data-show="item.tone === 'success'">
<circle cx="12" cy="12" r="10" />
<path d="m9 12 2 2 4-4" />
@@ -529,16 +529,16 @@ component Toaster {
<div
class="wrn-toast__body"
>
data-wrn-owner="Toaster" data-wrn-part="body" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<p
class="wrn-toast__title"
data-show="item.title"
>
data-wrn-owner="Toaster" data-wrn-part="title" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
{item.title}
</p>
<p
class="wrn-toast__message"
>
data-wrn-owner="Toaster" data-wrn-part="message" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
{item.message}
</p>
</div>
@@ -549,14 +549,14 @@ component Toaster {
<div
class="wrn-toast__actions"
data-show="item.actions.length"
>
data-wrn-owner="Toaster" data-wrn-part="actions" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<button
type="button"
class="wrn-toast__action"
data-show="item.actions.length > 0"
data-tone='{item.actions[0].tone}'
@click='runAction(item.id, 0, event)'
>
data-wrn-owner="Toaster" data-wrn-part="action" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
{item.actions[0].label}
</button>
@@ -566,7 +566,7 @@ component Toaster {
data-show="item.actions.length > 1"
data-tone='{item.actions[1].tone}'
@click='runAction(item.id, 1, event)'
>
data-wrn-owner="Toaster" data-wrn-part="action" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
{item.actions[1].label}
</button>
</div>
@@ -577,7 +577,7 @@ component Toaster {
data-show="closable"
aria-label='{closeLabel}'
@click='dismissToast(item.id, "close-button")'
>
data-wrn-owner="Toaster" data-wrn-part="close" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<svg
viewBox="0 0 24 24"
width="14"
@@ -587,7 +587,7 @@ component Toaster {
stroke-width="2.2"
stroke-linecap="round"
aria-hidden="true"
>
data-wrn-owner="Toaster" data-wrn-part="vector" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<path d="M18 6 6 18" />
<path d="M6 6 18 18" />
</svg>
@@ -600,7 +600,7 @@ component Toaster {
data-show="showProgress && item.duration"
style="--toast-duration: {item.duration}ms"
aria-hidden="true"
>
data-wrn-owner="Toaster" data-wrn-part="progress" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
</span>
</li>
</ol>
packages/ui/components/ToggleCount.wrn
+8 -8
View File
@@ -223,10 +223,10 @@ component ToggleCount {
data-value="{selectedValue}"
data-disabled="{disabled ? 'true' : 'false'}"
class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--toggle-count wrn-next--toggle-count-{variant} {fullWidth ? 'wrn-next--toggle-count-full' : ''} {disabled ? 'wrn-next--disabled' : ''} {class}"
>
<input type="hidden" name="{name}" value="{selectedValue}" />
data-wrn-owner="ToggleCount" data-wrn-part="root" data-wrn-component="ToggleCount" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<input type="hidden" name="{name}" value="{selectedValue}" data-wrn-owner="ToggleCount" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"/>
<div class="wrn-next__toggle-count-control wrn-next__toggle-count-control--{align}">
<div class="wrn-next__toggle-count-control wrn-next__toggle-count-control--{align}" data-wrn-owner="ToggleCount" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if variant === "switch"}
<span data-selected="{isFirstSelected() ? 'true' : 'false'}">{firstLabel}</span>
<button
@@ -237,30 +237,30 @@ component ToggleCount {
disabled="{disabled}"
@click="toggleValue(event)"
class="wrn-next__toggle-count-switch"
>
data-wrn-owner="ToggleCount" data-wrn-part="switch" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<span aria-hidden="true"></span>
</button>
<span data-selected="{isSecondSelected() ? 'true' : 'false'}">{secondLabel}</span>
{:else}
<div class="wrn-next__toggle-count-segmented" role="group" aria-label="{ariaLabel}">
<div class="wrn-next__toggle-count-segmented" role="group" aria-label="{ariaLabel}" data-wrn-owner="ToggleCount" data-wrn-part="segmented" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<button
type="button"
aria-pressed="{isFirstSelected() ? 'true' : 'false'}"
disabled="{disabled}"
@click="selectValue(event, firstValue)"
>{firstLabel}</button>
data-wrn-owner="ToggleCount" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{firstLabel}</button>
<button
type="button"
aria-pressed="{isSecondSelected() ? 'true' : 'false'}"
disabled="{disabled}"
@click="selectValue(event, secondValue)"
>{secondLabel}</button>
data-wrn-owner="ToggleCount" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{secondLabel}</button>
</div>
{/if}
</div>
{#if items.length > 0}
<div class="wrn-next__toggle-count-items">
<div class="wrn-next__toggle-count-items" data-wrn-owner="ToggleCount" data-wrn-part="items" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#each items as item}
<article>
<span>{item.label || item.name}</span>
packages/ui/components/TogglePassword.wrn
+19 -19
View File
@@ -68,13 +68,13 @@ component TogglePassword {
class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--toggle-password {invalid || validationMessage || nativeError ? 'wrn-next--invalid' : ''} {disabled ? 'wrn-next--disabled' : ''} {class}"
data-wrn-toggle-password
data-visible="{revealed ? 'true' : 'false'}"
>
data-wrn-owner="TogglePassword" data-wrn-part="root" data-wrn-component="TogglePassword" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#if fields.length}
<div class="wrn-next__password-fields">
<div class="wrn-next__password-fields" data-wrn-owner="TogglePassword" data-wrn-part="passwordFields" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#each fields as field, index}
<div class="wrn-next__password-field">
<label for="{fieldId(field, index)}">{field.label || label}</label>
<div class="wrn-next__password-control">
<div class="wrn-next__password-field" data-wrn-owner="TogglePassword" data-wrn-part="passwordField" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<label for="{fieldId(field, index)}" data-wrn-owner="TogglePassword" data-wrn-part="label" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{field.label || label}</label>
<div class="wrn-next__password-control" data-wrn-owner="TogglePassword" data-wrn-part="passwordControl" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<input
id="{fieldId(field, index)}"
type="{revealed ? 'text' : 'password'}"
@@ -91,7 +91,7 @@ component TogglePassword {
aria-invalid="{invalid || nativeError ? 'true' : 'false'}"
@invalid="handleInvalid(event)" @input="nativeError = ''; output.input({ name: event.target.name, value: event.target.value, visible: revealed })"
@change="output.change({ name: event.target.name, value: event.target.value, visible: revealed })"
/>
data-wrn-owner="TogglePassword" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"/>
{#if toggleable && toggleMode === "button"}
<button
type="button"
@@ -101,8 +101,8 @@ component TogglePassword {
aria-pressed="{revealed ? 'true' : 'false'}"
disabled="{disabled || readonly}"
@click="toggleVisibility(); output.toggle({ visible: revealed })"
>
<span class="wrn-next__password-icon wrn-next__password-icon--show" aria-hidden="true"></span>
data-wrn-owner="TogglePassword" data-wrn-part="passwordToggle" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<span class="wrn-next__password-icon wrn-next__password-icon--show" aria-hidden="true" data-wrn-owner="TogglePassword" data-wrn-part="passwordIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></span>
</button>
{/if}
</div>
@@ -110,14 +110,14 @@ component TogglePassword {
{/each}
</div>
{:else}
<div class="wrn-next__password-heading">
<label for="{name}-password">{label}</label>
<div class="wrn-next__password-heading" data-wrn-owner="TogglePassword" data-wrn-part="passwordHeading" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<label for="{name}-password" data-wrn-owner="TogglePassword" data-wrn-part="label" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{label}</label>
{#if cornerHint}
{#if cornerHref}<a href="{cornerHref}">{cornerHint}</a>{:else}<span>{cornerHint}</span>{/if}
{#if cornerHref}<a href="{cornerHref}" data-wrn-owner="TogglePassword" data-wrn-part="link" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{cornerHint}</a>{:else}<span>{cornerHint}</span>{/if}
{/if}
</div>
<div class="wrn-next__password-control">
{#if icon}<span class="wrn-next__password-leading-icon {icon}" aria-hidden="true"></span>{/if}
<div class="wrn-next__password-control" data-wrn-owner="TogglePassword" data-wrn-part="passwordControl" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#if icon}<span class="wrn-next__password-leading-icon {icon}" aria-hidden="true" data-wrn-owner="TogglePassword" data-wrn-part="passwordLeadingIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></span>{/if}
<input
{...attrs}
id="{name}-password"
@@ -136,7 +136,7 @@ component TogglePassword {
aria-describedby="{(validationMessage || nativeError) ? name + '-validation' : helpText ? name + '-help' : ''}"
@invalid="handleInvalid(event)" @input="nativeError = ''; output.input({ value: event.target.value, visible: revealed })"
@change="output.change({ value: event.target.value, visible: revealed })"
/>
data-wrn-owner="TogglePassword" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"/>
{#if toggleable && toggleMode === "button"}
<button
type="button"
@@ -146,20 +146,20 @@ component TogglePassword {
aria-pressed="{revealed ? 'true' : 'false'}"
disabled="{disabled || readonly}"
@click="toggleVisibility(); output.toggle({ visible: revealed })"
>
<span class="wrn-next__password-icon wrn-next__password-icon--show" aria-hidden="true"></span>
data-wrn-owner="TogglePassword" data-wrn-part="passwordToggle" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<span class="wrn-next__password-icon wrn-next__password-icon--show" aria-hidden="true" data-wrn-owner="TogglePassword" data-wrn-part="passwordIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></span>
</button>
{/if}
</div>
{/if}
{#if toggleable && toggleMode === "checkbox"}
<label class="wrn-next__password-checkbox">
<label class="wrn-next__password-checkbox" data-wrn-owner="TogglePassword" data-wrn-part="passwordCheckbox" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<input
type="checkbox"
checked="{revealed}"
disabled="{disabled || readonly}"
@change="revealed = event.target.checked; output.toggle({ visible: revealed })"
/>
data-wrn-owner="TogglePassword" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"/>
<span>{checkboxLabel}</span>
</label>
{/if}
@@ -168,7 +168,7 @@ component TogglePassword {
id="{name}-validation"
class="wrn-next__validation"
data-error="{name}"
>{(validationMessage || nativeError)}</small>
data-wrn-owner="TogglePassword" data-wrn-part="validation" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{(validationMessage || nativeError)}</small>
</fieldset>
}
packages/ui/components/TreeView.wrn
+14 -14
View File
@@ -50,26 +50,26 @@ component TreeView {
}
view {
<section {...attrs} data-ui-component="TreeView" class='wrn-tree-view {class}'>
{#if title}<strong class="wrn-tree-view__title">{title}</strong>{/if}
{#if description}<p class="wrn-tree-view__description">{description}</p>{/if}
<div class="wrn-tree-view__tree" role="tree" aria-label='{title}' data-wrn-roving="vertical">
<section {...attrs} data-ui-component="TreeView" class='wrn-tree-view {class}' data-wrn-owner="TreeView" data-wrn-part="root" data-wrn-component="TreeView" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#if title}<strong class="wrn-tree-view__title" data-wrn-owner="TreeView" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{title}</strong>{/if}
{#if description}<p class="wrn-tree-view__description" data-wrn-owner="TreeView" data-wrn-part="description" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{description}</p>{/if}
<div class="wrn-tree-view__tree" role="tree" aria-label='{title}' data-wrn-roving="vertical" data-wrn-owner="TreeView" data-wrn-part="tree" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#each items as item, index}
<div class="wrn-tree-view__branch" role="none">
<div class="wrn-tree-view__row" role="treeitem" aria-level="1" aria-expanded='{item.children && item.children.length ? isExpanded(nodeValue(item, index, "root-")) : ""}' aria-selected='{selectedValue === nodeValue(item, index, "root-") ? "true" : "false"}'>
<div class="wrn-tree-view__branch" role="none" data-wrn-owner="TreeView" data-wrn-part="branch" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<div class="wrn-tree-view__row" role="treeitem" aria-level="1" aria-expanded='{item.children && item.children.length ? isExpanded(nodeValue(item, index, "root-")) : ""}' aria-selected='{selectedValue === nodeValue(item, index, "root-") ? "true" : "false"}' data-wrn-owner="TreeView" data-wrn-part="row" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#if item.children && item.children.length}
<button type="button" class="wrn-tree-view__toggle" aria-label='{isExpanded(nodeValue(item, index, "root-")) ? "Collapse " + item[labelKey] : "Expand " + item[labelKey]}' @click='toggleNode(item, nodeValue(item, index, "root-"), event)'><span class="icon-[lucide--chevron-right]" aria-hidden="true"></span></button>
{:else}<span class="wrn-tree-view__toggle" aria-hidden="true"></span>{/if}
<button type="button" class="wrn-tree-view__node" data-wrn-roving-item @click='selectNode(item, nodeValue(item, index, "root-"), event)'>
<button type="button" class="wrn-tree-view__toggle" aria-label='{isExpanded(nodeValue(item, index, "root-")) ? "Collapse " + item[labelKey] : "Expand " + item[labelKey]}' @click='toggleNode(item, nodeValue(item, index, "root-"), event)' data-wrn-owner="TreeView" data-wrn-part="toggle" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"><span class="icon-[lucide--chevron-right]" aria-hidden="true"></span></button>
{:else}<span class="wrn-tree-view__toggle" aria-hidden="true" data-wrn-owner="TreeView" data-wrn-part="toggle" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></span>{/if}
<button type="button" class="wrn-tree-view__node" data-wrn-roving-item @click='selectNode(item, nodeValue(item, index, "root-"), event)' data-wrn-owner="TreeView" data-wrn-part="node" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#if item.icon}<span class='{item.icon}' aria-hidden="true"></span>{/if}<span>{item[labelKey]}</span>
</button>
</div>
{#if item.children && item.children.length}
<div class="wrn-tree-view__group" role="group" data-show='isExpanded(nodeValue(item, index, "root-"))'>
<div class="wrn-tree-view__group" role="group" data-show='isExpanded(nodeValue(item, index, "root-"))' data-wrn-owner="TreeView" data-wrn-part="group" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#each item.children as child, childIndex}
<div class="wrn-tree-view__row" role="treeitem" aria-level="2" aria-selected='{selectedValue === nodeValue(child, childIndex, nodeValue(item, index, "root-") + "-") ? "true" : "false"}'>
<span class="wrn-tree-view__toggle" aria-hidden="true"></span>
<button type="button" class="wrn-tree-view__node" data-wrn-roving-item @click='selectNode(child, nodeValue(child, childIndex, nodeValue(item, index, "root-") + "-"), event)'>
<div class="wrn-tree-view__row" role="treeitem" aria-level="2" aria-selected='{selectedValue === nodeValue(child, childIndex, nodeValue(item, index, "root-") + "-") ? "true" : "false"}' data-wrn-owner="TreeView" data-wrn-part="row" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<span class="wrn-tree-view__toggle" aria-hidden="true" data-wrn-owner="TreeView" data-wrn-part="toggle" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></span>
<button type="button" class="wrn-tree-view__node" data-wrn-roving-item @click='selectNode(child, nodeValue(child, childIndex, nodeValue(item, index, "root-") + "-"), event)' data-wrn-owner="TreeView" data-wrn-part="node" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#if child.icon}<span class='{child.icon}' aria-hidden="true"></span>{/if}<span>{child[labelKey]}</span>
</button>
</div>
@@ -77,7 +77,7 @@ component TreeView {
</div>
{/if}
</div>
{:empty}<p class="wrn-tree-view__empty">No tree items available.</p>{/each}
{:empty}<p class="wrn-tree-view__empty" data-wrn-owner="TreeView" data-wrn-part="empty" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">No tree items available.</p>{/each}
</div>
<slot />
</section>
packages/ui/components/Typography.wrn
+1 -1
View File
@@ -16,7 +16,7 @@ component Typography {
data-columns='{columns}'
data-gap='{gap}'
data-max-width='{maxWidth}'
>
data-wrn-owner="Typography" data-wrn-part="root" data-wrn-component="Typography" data-wrn-axis-size='{size}' data-wrn-axis-color="{color}">
<slot></slot>
</div>
}
packages/ui/components/WysiwygEditor.wrn
+10 -10
View File
@@ -32,17 +32,17 @@ component WysiwygEditor {
client function finish(sourceEvent) { output.change({ value: sourceEvent.currentTarget.innerHTML, text: sourceEvent.currentTarget.textContent }); output.blur({ sourceEvent: sourceEvent }) }
}
view {
<section {...attrs} class="wrn-editor {class}">
<section {...attrs} class="wrn-editor {class}" data-wrn-owner="WysiwygEditor" data-wrn-part="root" data-wrn-component="WysiwygEditor" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
{#if title}<strong>{title}</strong>{/if}{#if description}<p>{description}</p>{/if}
<div class="wrn-editor__surface">
<div role="toolbar" aria-label="Text formatting" class="wrn-editor__toolbar">
<button type="button" disabled="{readonly}" aria-label="Bold" @mousedown="event.preventDefault()" @click="format('bold', event)"><strong>B</strong></button>
<button type="button" disabled="{readonly}" aria-label="Italic" @mousedown="event.preventDefault()" @click="format('italic', event)"><em>I</em></button>
<button type="button" disabled="{readonly}" aria-label="Underline" @mousedown="event.preventDefault()" @click="format('underline', event)"><u>U</u></button>
<button type="button" disabled="{readonly}" aria-label="Bulleted list" @mousedown="event.preventDefault()" @click="format('insertUnorderedList', event)"><span class="icon-[lucide--list]" aria-hidden="true"></span></button>
<button type="button" disabled="{readonly}" aria-label="Undo" @mousedown="event.preventDefault()" @click="format('undo', event)"><span class="icon-[lucide--undo-2]" aria-hidden="true"></span></button>
<button type="button" disabled="{readonly}" aria-label="Strike through" @mousedown="event.preventDefault()" @click="format('strikeThrough', event)">S̶</button><button type="button" disabled="{readonly}" aria-label="Numbered list" @mousedown="event.preventDefault()" @click="format('insertOrderedList', event)">1.</button><button type="button" disabled="{readonly}" aria-label="Align left" @mousedown="event.preventDefault()" @click="format('justifyLeft', event)">⇤</button><button type="button" disabled="{readonly}" aria-label="Align center" @mousedown="event.preventDefault()" @click="format('justifyCenter', event)">↔</button><button type="button" disabled="{readonly}" aria-label="Align right" @mousedown="event.preventDefault()" @click="format('justifyRight', event)">⇥</button><button type="button" disabled="{readonly}" aria-label="Indent" @mousedown="event.preventDefault()" @click="format('indent', event)">→</button><button type="button" disabled="{readonly}" aria-label="Outdent" @mousedown="event.preventDefault()" @click="format('outdent', event)">←</button><button type="button" disabled="{readonly}" aria-label="Remove formatting" @mousedown="event.preventDefault()" @click="format('removeFormat', event)">Tx</button><button type="button" disabled="{readonly}" aria-label="Redo" @mousedown="event.preventDefault()" @click="format('redo', event)">↻</button> </div>
<div contenteditable="{readonly ? 'false' : 'true'}" role="textbox" aria-label="{title || 'Rich text editor'}" aria-multiline="true" aria-readonly="{readonly}" data-placeholder="{placeholder}" class="wrn-editor__content" @input="edit(event)" @blur="finish(event)" @focus="output.focus({ sourceEvent: event })">{value}</div>
<div class="wrn-editor__surface" data-wrn-owner="WysiwygEditor" data-wrn-part="surface" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<div role="toolbar" aria-label="Text formatting" class="wrn-editor__toolbar" data-wrn-owner="WysiwygEditor" data-wrn-part="toolbar" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
<button type="button" disabled="{readonly}" aria-label="Bold" @mousedown="event.preventDefault()" @click="format('bold', event)" data-wrn-owner="WysiwygEditor" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><strong>B</strong></button>
<button type="button" disabled="{readonly}" aria-label="Italic" @mousedown="event.preventDefault()" @click="format('italic', event)" data-wrn-owner="WysiwygEditor" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><em>I</em></button>
<button type="button" disabled="{readonly}" aria-label="Underline" @mousedown="event.preventDefault()" @click="format('underline', event)" data-wrn-owner="WysiwygEditor" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><u>U</u></button>
<button type="button" disabled="{readonly}" aria-label="Bulleted list" @mousedown="event.preventDefault()" @click="format('insertUnorderedList', event)" data-wrn-owner="WysiwygEditor" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><span class="icon-[lucide--list]" aria-hidden="true"></span></button>
<button type="button" disabled="{readonly}" aria-label="Undo" @mousedown="event.preventDefault()" @click="format('undo', event)" data-wrn-owner="WysiwygEditor" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><span class="icon-[lucide--undo-2]" aria-hidden="true"></span></button>
<button type="button" disabled="{readonly}" aria-label="Strike through" @mousedown="event.preventDefault()" @click="format('strikeThrough', event)" data-wrn-owner="WysiwygEditor" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">S̶</button><button type="button" disabled="{readonly}" aria-label="Numbered list" @mousedown="event.preventDefault()" @click="format('insertOrderedList', event)" data-wrn-owner="WysiwygEditor" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">1.</button><button type="button" disabled="{readonly}" aria-label="Align left" @mousedown="event.preventDefault()" @click="format('justifyLeft', event)" data-wrn-owner="WysiwygEditor" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">⇤</button><button type="button" disabled="{readonly}" aria-label="Align center" @mousedown="event.preventDefault()" @click="format('justifyCenter', event)" data-wrn-owner="WysiwygEditor" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">↔</button><button type="button" disabled="{readonly}" aria-label="Align right" @mousedown="event.preventDefault()" @click="format('justifyRight', event)" data-wrn-owner="WysiwygEditor" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">⇥</button><button type="button" disabled="{readonly}" aria-label="Indent" @mousedown="event.preventDefault()" @click="format('indent', event)" data-wrn-owner="WysiwygEditor" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">→</button><button type="button" disabled="{readonly}" aria-label="Outdent" @mousedown="event.preventDefault()" @click="format('outdent', event)" data-wrn-owner="WysiwygEditor" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">←</button><button type="button" disabled="{readonly}" aria-label="Remove formatting" @mousedown="event.preventDefault()" @click="format('removeFormat', event)" data-wrn-owner="WysiwygEditor" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">Tx</button><button type="button" disabled="{readonly}" aria-label="Redo" @mousedown="event.preventDefault()" @click="format('redo', event)" data-wrn-owner="WysiwygEditor" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">↻</button> </div>
<div contenteditable="{readonly ? 'false' : 'true'}" role="textbox" aria-label="{title || 'Rich text editor'}" aria-multiline="true" aria-readonly="{readonly}" data-placeholder="{placeholder}" class="wrn-editor__content" @input="edit(event)" @blur="finish(event)" @focus="output.focus({ sourceEvent: event })" data-wrn-owner="WysiwygEditor" data-wrn-part="content" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{value}</div>
</div><slot />
</section>
}
packages/ui/components/alert.wrn
+6 -6
View File
@@ -65,7 +65,7 @@ component Alert {
}
view {
<section
<section data-wrn-owner="Alert" data-wrn-part="root" data-wrn-component="Alert" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}"
{...attrs}
data-wrn-alert
data-color="{color}"
@@ -79,7 +79,7 @@ component Alert {
class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--alert wrn-next--alert-{variant} {compact ? 'wrn-next--alert-compact' : ''} {class}"
>
{#if showIcon}
<span class="wrn-next__alert-icon" aria-hidden="true">
<span data-wrn-owner="Alert" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}" class="wrn-next__alert-icon" aria-hidden="true">
{#if icon}
<span class="{icon}"></span>
{:else if color === "success"}
@@ -94,8 +94,8 @@ component Alert {
</span>
{/if}
<div class="wrn-next__alert-body">
{#if title}<strong class="wrn-next__alert-title">{title}</strong>{/if}
<div data-wrn-owner="Alert" data-wrn-part="body" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}" class="wrn-next__alert-body">
{#if title}<strong data-wrn-owner="Alert" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}" class="wrn-next__alert-title">{title}</strong>{/if}
{#if description}<p>{description}</p>{/if}
{#if items.length > 0}
@@ -105,7 +105,7 @@ component Alert {
{/if}
{#if actions.length > 0 || actionLabel || linkLabel}
<div class="wrn-next__alert-actions">
<div data-wrn-owner="Alert" data-wrn-part="actions" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}" class="wrn-next__alert-actions">
{#each actions as item}
<a
href="{item.href || '#'}"
@@ -132,7 +132,7 @@ component Alert {
</div>
{#if dismissible}
<button
<button data-wrn-owner="Alert" data-wrn-part="dismiss" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-radius="{radius}" data-wrn-axis-shadow="{shadow}"
type="button"
class="wrn-next__alert-dismiss"
aria-label="{dismissLabel}"
packages/ui/components/avatar.wrn
+10 -10
View File
@@ -34,7 +34,7 @@ src: string = ""
{...attrs}
class="wrn-component wrn-next--avatar {description ? 'wrn-next--avatar-media' : ''} {class}"
data-wrn-avatar
>
data-wrn-owner="Avatar" data-wrn-part="root" data-wrn-component="Avatar" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-shape="{shape}">
<span
class="wrn-next__avatar-wrap"
data-shape="{shape}"
@@ -44,14 +44,14 @@ src: string = ""
data-status-position="{statusPosition}"
tabindex="{tooltip ? '0' : '-1'}"
aria-label="{tooltip || name || alt || initials || 'Avatar'}"
>
<span class="wrn-next__avatar">
data-wrn-owner="Avatar" data-wrn-part="wrap" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-shape="{shape}">
<span class="wrn-next__avatar" data-wrn-owner="Avatar" data-wrn-part="avatar" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-shape="{shape}">
{#if src}
<img src="{src}" alt="{alt || name}" loading="{loading}" />
{:else if initials}
<span class="wrn-next__avatar-initials" aria-hidden="true">{initials}</span>
<span class="wrn-next__avatar-initials" aria-hidden="true" data-wrn-owner="Avatar" data-wrn-part="initials" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-shape="{shape}">{initials}</span>
{:else}
<span class="wrn-next__avatar-placeholder icon-[lucide--user-round]" aria-hidden="true"></span>
<span class="wrn-next__avatar-placeholder icon-[lucide--user-round]" aria-hidden="true" data-wrn-owner="Avatar" data-wrn-part="placeholder" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-shape="{shape}"></span>
{/if}
</span>
@@ -61,26 +61,26 @@ src: string = ""
data-status="{status}"
title="{statusLabel || status}"
aria-label="{statusLabel || status}"
></span>
data-wrn-owner="Avatar" data-wrn-part="status" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-shape="{shape}"></span>
{/if}
{#if badgeIcon}
<span class="wrn-next__avatar-badge" aria-label="{badgeLabel || 'Linked account'}">
<span class="wrn-next__avatar-badge" aria-label="{badgeLabel || 'Linked account'}" data-wrn-owner="Avatar" data-wrn-part="badge" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-shape="{shape}">
<span class="{badgeIcon}" aria-hidden="true"></span>
</span>
{:else if badge}
<span class="wrn-next__avatar-badge wrn-next__avatar-badge--text" aria-label="{badgeLabel || badge}">
<span class="wrn-next__avatar-badge wrn-next__avatar-badge--text" aria-label="{badgeLabel || badge}" data-wrn-owner="Avatar" data-wrn-part="badge" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-shape="{shape}">
{badge}
</span>
{/if}
{#if tooltip}
<span class="wrn-next__avatar-tooltip" role="tooltip">{tooltip}</span>
<span class="wrn-next__avatar-tooltip" role="tooltip" data-wrn-owner="Avatar" data-wrn-part="tooltip" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-shape="{shape}">{tooltip}</span>
{/if}
</span>
{#if description}
<span class="wrn-next__avatar-copy">
<span class="wrn-next__avatar-copy" data-wrn-owner="Avatar" data-wrn-part="copy" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-shape="{shape}">
<strong>{name || alt || initials}</strong>
<span>{description}</span>
</span>
packages/ui/components/badge.wrn
+10 -10
View File
@@ -54,9 +54,9 @@ component Badge {
data-placement="{placement}"
data-show="visible"
aria-hidden="{visible ? 'false' : 'true'}"
>
data-wrn-owner="Badge" data-wrn-part="root" data-wrn-component="Badge" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-shape="{shape}">
{#if anchorLabel || anchorIcon}
<button type="button" class="wrn-next__badge-anchor" aria-label="{anchorLabelText}">
<button type="button" class="wrn-next__badge-anchor" aria-label="{anchorLabelText}" data-wrn-owner="Badge" data-wrn-part="badgeAnchor" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-shape="{shape}">
{#if anchorIcon}<span class="{anchorIcon}" aria-hidden="true"></span>{/if}
{#if anchorLabel}<span>{anchorLabel}</span>{/if}
</button>
@@ -72,29 +72,29 @@ component Badge {
style="--wrn-badge-max-width:{maxWidth}"
role="{dotOnly ? 'status' : ''}"
aria-label="{dotOnly ? dotLabel : ''}"
>
data-wrn-owner="Badge" data-wrn-part="badge" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-shape="{shape}">
{#if animated}
<span class="wrn-next__badge-ping" aria-hidden="true"></span>
<span class="wrn-next__badge-ping" aria-hidden="true" data-wrn-owner="Badge" data-wrn-part="badgePing" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-shape="{shape}"></span>
{/if}
{#if avatarSrc}
<img class="wrn-next__badge-avatar" src="{avatarSrc}" alt="{avatarAlt}" loading="lazy" />
<img class="wrn-next__badge-avatar" src="{avatarSrc}" alt="{avatarAlt}" loading="lazy" data-wrn-owner="Badge" data-wrn-part="badgeAvatar" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-shape="{shape}"/>
{/if}
{#if dot || dotOnly}
<span class="wrn-next__badge-dot" aria-hidden="true"></span>
<span class="wrn-next__badge-dot" aria-hidden="true" data-wrn-owner="Badge" data-wrn-part="badgeDot" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-shape="{shape}"></span>
{/if}
{#if icon && iconPosition === "start"}
<span class="wrn-next__badge-icon {icon}" aria-hidden="true"></span>
<span class="wrn-next__badge-icon {icon}" aria-hidden="true" data-wrn-owner="Badge" data-wrn-part="badgeIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-shape="{shape}"></span>
{/if}
{#if !dotOnly}
<span class="wrn-next__badge-label {truncate ? 'wrn-next__badge-label--truncate' : ''}">
<span class="wrn-next__badge-label {truncate ? 'wrn-next__badge-label--truncate' : ''}" data-wrn-owner="Badge" data-wrn-part="badgeLabel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-shape="{shape}">
{humanize ? label.replaceAll('_', ' ').replaceAll('-', ' ') : label}
</span>
{/if}
{#if icon && iconPosition === "end"}
<span class="wrn-next__badge-icon {icon}" aria-hidden="true"></span>
<span class="wrn-next__badge-icon {icon}" aria-hidden="true" data-wrn-owner="Badge" data-wrn-part="badgeIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-shape="{shape}"></span>
{/if}
{#if dismissible}
<button type="button" class="wrn-next__badge-dismiss" aria-label="{dismissLabel}" @click="dismissBadge(event)">
<button type="button" class="wrn-next__badge-dismiss" aria-label="{dismissLabel}" @click="dismissBadge(event)" data-wrn-owner="Badge" data-wrn-part="badgeDismiss" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-shape="{shape}">
<span class="icon-[lucide--x]" aria-hidden="true"></span>
</button>
{/if}
packages/ui/components/button.wrn
+17 -17
View File
@@ -35,13 +35,13 @@ label: string = "Button"
}
view {
<span
<span data-wrn-owner="Button" data-wrn-part="root" data-wrn-component="Button" data-wrn-axis-variant="{variant}" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-pill="{pill}"
class="wrn-action {fullWidth ? 'w-full' : ''} {class}"
data-full-width="{fullWidth ? 'true' : 'false'}"
>
{#if as === "a" || (as === "" && href)}
<!-- No aria-pressed here: it states a toggle button's state, and a link has none. -->
<a
<a data-wrn-owner="Button" data-wrn-part="control" data-wrn-axis-variant="{variant}" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-pill="{pill}"
{...attrs}
href="{disabled || loading ? '' : href}"
target="{target}"
@@ -56,29 +56,29 @@ label: string = "Button"
class="wrn-btn wrn-btn--variant-{variant} wrn-btn--color-{color} wrn-btn--size-{size} {pill ? 'wrn-btn--pill' : ''} {description ? 'wrn-btn--with-description' : ''} {fullWidth ? 'w-full' : ''} {controlClass}"
>
{#if loading}
<span
<span data-wrn-owner="Button" data-wrn-part="spinner" data-wrn-axis-variant="{variant}" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-pill="{pill}"
class="wrn-spinner wrn-spinner--inline"
aria-hidden="true"
>
</span>
{/if}
{#if icon && !loading && iconPosition === "start"}
<span
<span data-wrn-owner="Button" data-wrn-part="icon" data-wrn-axis-variant="{variant}" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-pill="{pill}"
class="wrn-btn__icon {icon}"
aria-hidden="true"
>
</span>
{/if}
<span
<span data-wrn-owner="Button" data-wrn-part="copy" data-wrn-axis-variant="{variant}" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-pill="{pill}"
class="wrn-btn__copy {(size === 'icon' || size === 'icon-xs' || size === 'icon-sm' || size === 'icon-lg') ? 'wrn-visually-hidden' : ''}"
>
<span
<span data-wrn-owner="Button" data-wrn-part="label" data-wrn-axis-variant="{variant}" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-pill="{pill}"
class="wrn-btn__label"
>
<slot>{loading ? loadingLabel : label}</slot>
</span>
{#if description && !loading}
<span
<span data-wrn-owner="Button" data-wrn-part="description" data-wrn-axis-variant="{variant}" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-pill="{pill}"
class="wrn-btn__description"
>
{description}
@@ -86,14 +86,14 @@ label: string = "Button"
{/if}
</span>
{#if icon && !loading && iconPosition === "end"}
<span
<span data-wrn-owner="Button" data-wrn-part="icon" data-wrn-axis-variant="{variant}" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-pill="{pill}"
class="wrn-btn__icon {icon}"
aria-hidden="true"
>
</span>
{/if}
{#if (size === "icon" || size === "icon-xs" || size === "icon-sm" || size === "icon-lg") && (ariaLabel || label)}
<span
<span data-wrn-owner="Button" data-wrn-part="tooltip" data-wrn-axis-variant="{variant}" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-pill="{pill}"
class="wrn-btn__tooltip wrn-btn__tooltip--{tooltipPlacement}"
data-placement="{tooltipPlacement}"
role="tooltip"
@@ -104,7 +104,7 @@ label: string = "Button"
{/if}
</a>
{:else}
<button
<button data-wrn-owner="Button" data-wrn-part="control" data-wrn-axis-variant="{variant}" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-pill="{pill}"
{...attrs}
type="{type}"
title="{title}"
@@ -118,29 +118,29 @@ label: string = "Button"
class="wrn-btn wrn-btn--variant-{variant} wrn-btn--color-{color} wrn-btn--size-{size} {pill ? 'wrn-btn--pill' : ''} {description ? 'wrn-btn--with-description' : ''} {fullWidth ? 'w-full' : ''} {controlClass}"
>
{#if loading}
<span
<span data-wrn-owner="Button" data-wrn-part="spinner" data-wrn-axis-variant="{variant}" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-pill="{pill}"
class="wrn-spinner wrn-spinner--inline"
aria-hidden="true"
>
</span>
{/if}
{#if icon && !loading && iconPosition === "start"}
<span
<span data-wrn-owner="Button" data-wrn-part="icon" data-wrn-axis-variant="{variant}" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-pill="{pill}"
class="wrn-btn__icon {icon}"
aria-hidden="true"
>
</span>
{/if}
<span
<span data-wrn-owner="Button" data-wrn-part="copy" data-wrn-axis-variant="{variant}" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-pill="{pill}"
class="wrn-btn__copy {(size === 'icon' || size === 'icon-xs' || size === 'icon-sm' || size === 'icon-lg') ? 'wrn-visually-hidden' : ''}"
>
<span
<span data-wrn-owner="Button" data-wrn-part="label" data-wrn-axis-variant="{variant}" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-pill="{pill}"
class="wrn-btn__label"
>
<slot>{loading ? loadingLabel : label}</slot>
</span>
{#if description && !loading}
<span
<span data-wrn-owner="Button" data-wrn-part="description" data-wrn-axis-variant="{variant}" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-pill="{pill}"
class="wrn-btn__description"
>
{description}
@@ -148,14 +148,14 @@ label: string = "Button"
{/if}
</span>
{#if icon && !loading && iconPosition === "end"}
<span
<span data-wrn-owner="Button" data-wrn-part="icon" data-wrn-axis-variant="{variant}" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-pill="{pill}"
class="wrn-btn__icon {icon}"
aria-hidden="true"
>
</span>
{/if}
{#if (size === "icon" || size === "icon-xs" || size === "icon-sm" || size === "icon-lg") && (ariaLabel || label)}
<span
<span data-wrn-owner="Button" data-wrn-part="tooltip" data-wrn-axis-variant="{variant}" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" data-wrn-axis-pill="{pill}"
class="wrn-btn__tooltip wrn-btn__tooltip--{tooltipPlacement}"
data-placement="{tooltipPlacement}"
role="tooltip"
packages/ui/components/checkbox.wrn
+8 -8
View File
@@ -41,7 +41,7 @@ size: string = "default"
client function preventReadonly(sourceEvent) { if (readonly) sourceEvent.preventDefault() }
}
view {
<div
<div data-wrn-owner="Checkbox" data-wrn-part="root" data-wrn-component="Checkbox" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
{...attrs}
class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--choice-field wrn-next--checkbox-field {class}"
data-inline="{inline}"
@@ -51,7 +51,7 @@ size: string = "default"
data-list="{list}"
data-right-aligned="{rightAligned}"
>
<div
<div data-wrn-owner="Checkbox" data-wrn-part="heading" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
class="wrn-next__field-heading"
>
{#if options.length || cornerHint}
@@ -61,7 +61,7 @@ size: string = "default"
{label}
</span>
{#if cornerHint}
<span
<span data-wrn-owner="Checkbox" data-wrn-part="hint" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
class="wrn-next__field-hint"
>
{cornerHint}
@@ -82,7 +82,7 @@ size: string = "default"
data-variant="{variant}"
data-disabled="{disabled || option.disabled}"
>
<input
<input data-wrn-owner="Checkbox" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
id="{id || name}-{option.value}"
type="checkbox"
name="{name}"
@@ -98,7 +98,7 @@ size: string = "default"
@blur="emitField('blur', event)"
@invalid="emitField('invalid', event)"
/>
<span
<span data-wrn-owner="Checkbox" data-wrn-part="copy" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
class="wrn-next__choice-copy"
>
<strong>{option.label}</strong>
@@ -118,7 +118,7 @@ size: string = "default"
data-variant="{variant}"
data-icon-position="{iconPosition}"
>
<input
<input data-wrn-owner="Checkbox" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
id="{id || name}"
type="checkbox"
name="{name}"
@@ -157,13 +157,13 @@ size: string = "default"
</div>
{/if}
{#if helperText}
<small
<small data-wrn-owner="Checkbox" data-wrn-part="help" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
class="wrn-next__field-help"
>
{helperText}
</small>
{/if}
<small
<small data-wrn-owner="Checkbox" data-wrn-part="error" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
class="wrn-next__field-error"
data-error="{name}"
>
packages/ui/components/input.wrn
+10 -10
View File
@@ -71,7 +71,7 @@ component Input {
client function handleKeyup(sourceEvent) { sourceEvent.stopPropagation(); output.keyup({ key: sourceEvent.key, value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }) }
}
view {
<div
<div data-wrn-owner="Input" data-wrn-part="root" data-wrn-component="Input" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
{...attrs}
class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--field wrn-next--input {class}"
data-variant="{variant}"
@@ -80,36 +80,36 @@ component Input {
data-invalid="{error || validationError ? 'true' : 'false'}"
data-input-type="{type}"
>
<div
<div data-wrn-owner="Input" data-wrn-part="heading" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
class="wrn-next__field-heading"
>
<label
<label data-wrn-owner="Input" data-wrn-part="label" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
class="{hiddenLabel ? 'wrn-next__sr-only' : ''}"
for="{id || name}"
>
{label}
</label>
{#if cornerHint}
<span
<span data-wrn-owner="Input" data-wrn-part="hint" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
class="wrn-next__field-hint"
>
{cornerHint}
</span>
{/if}
</div>
<div
<div data-wrn-owner="Input" data-wrn-part="controlContainer" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
class="wrn-next__field-control"
data-icon-position="{iconPosition}"
data-has-icon="{icon || type === 'date' || type === 'datetime-local' || type === 'time' || type === 'month' || type === 'week' ? 'true' : 'false'}"
>
{#if icon || type === "date" || type === "datetime-local" || type === "time" || type === "month" || type === "week"}
<span
<span data-wrn-owner="Input" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
class="{icon || (type === 'time' ? 'icon-[lucide--clock-3]' : type === 'datetime-local' ? 'icon-[lucide--calendar-clock]' : 'icon-[lucide--calendar-days]')} wrn-next__field-icon"
aria-hidden="true"
>
</span>
{/if}
<input
<input data-wrn-owner="Input" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
id="{id || name}"
type="{type}"
name="{name}"
@@ -137,7 +137,7 @@ component Input {
@keyup="handleKeyup(event)"
/>
{#if variant === "floating"}
<span
<span data-wrn-owner="Input" data-wrn-part="floatingLabel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
class="wrn-next__field-floating-label"
>
{label}
@@ -145,14 +145,14 @@ component Input {
{/if}
</div>
{#if helperText}
<small
<small data-wrn-owner="Input" data-wrn-part="help" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
id="{(id || name) + '-help'}"
class="wrn-next__field-help"
>
{helperText}
</small>
{/if}
<small
<small data-wrn-owner="Input" data-wrn-part="error" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
id="{(id || name) + '-error'}"
class="wrn-next__field-error"
data-error="{name}"
packages/ui/components/progress.wrn
+3 -3
View File
@@ -9,9 +9,9 @@ component Progress {
class: string = ""
}
view {
<div class="wrn-progress-component {class}" data-color="{color}" data-size="{size}">
<div class="wrn-progress-component__row"><span>{label}</span>{#if showValue}<strong>{value}%</strong>{/if}</div>
<progress class="wrn-progress-component__track" value="{value}" max="{max}" aria-label="{label}"></progress>
<div class="wrn-progress-component {class}" data-color="{color}" data-size="{size}" data-wrn-owner="Progress" data-wrn-part="root" data-wrn-component="Progress" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<div class="wrn-progress-component__row" data-wrn-owner="Progress" data-wrn-part="row" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"><span>{label}</span>{#if showValue}<strong>{value}%</strong>{/if}</div>
<progress class="wrn-progress-component__track" value="{value}" max="{max}" aria-label="{label}" data-wrn-owner="Progress" data-wrn-part="track" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></progress>
</div>
}
packages/ui/components/radio.wrn
+6 -6
View File
@@ -39,21 +39,21 @@ size: string = "default"
client function preventReadonly(sourceEvent) { if (readonly) sourceEvent.preventDefault() }
}
view {
<div {...attrs} class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--choice-field wrn-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="wrn-next__field-heading">{#if options.length || cornerHint}<span class="{hiddenLabel ? 'wrn-next__sr-only' : ''}">{label}</span>{#if cornerHint}<span class="wrn-next__field-hint">{cornerHint}</span>{/if}{/if}</div>
<div data-wrn-owner="Radio" data-wrn-part="root" data-wrn-component="Radio" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" {...attrs} class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--choice-field wrn-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 data-wrn-owner="Radio" data-wrn-part="heading" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" class="wrn-next__field-heading">{#if options.length || cornerHint}<span class="{hiddenLabel ? 'wrn-next__sr-only' : ''}">{label}</span>{#if cornerHint}<span data-wrn-owner="Radio" data-wrn-part="hint" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" class="wrn-next__field-hint">{cornerHint}</span>{/if}{/if}</div>
{#if options.length}
<div class="wrn-next__radio-group" role="radiogroup" aria-label="{hiddenLabel ? label : ''}" aria-invalid="{error ? 'true' : 'false'}">
{#each options as option}
<label class="wrn-next__choice wrn-next--radio" data-variant="{variant}" data-disabled="{disabled || option.disabled}">
<input id="{id || name}-{option.value}" type="radio" name="{name}" value="{option.value}" checked="{option.value === value || option.checked}" disabled="{disabled || option.disabled}" required="{required}" readonly="{readonly}" @click="preventReadonly(event)" @input="emitField('input', event)" @change="emitField('change', event)" @focus="emitField('focus', event)" @blur="emitField('blur', event)" @invalid="emitField('invalid', event)" />
<span class="wrn-next__choice-copy"><strong>{option.label}</strong>{#if option.description}<small>{option.description}</small>{/if}</span>
<input data-wrn-owner="Radio" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" id="{id || name}-{option.value}" type="radio" name="{name}" value="{option.value}" checked="{option.value === value || option.checked}" disabled="{disabled || option.disabled}" required="{required}" readonly="{readonly}" @click="preventReadonly(event)" @input="emitField('input', event)" @change="emitField('change', event)" @focus="emitField('focus', event)" @blur="emitField('blur', event)" @invalid="emitField('invalid', event)" />
<span data-wrn-owner="Radio" data-wrn-part="copy" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" class="wrn-next__choice-copy"><strong>{option.label}</strong>{#if option.description}<small>{option.description}</small>{/if}</span>
</label>
{/each}
</div>
{:else}
<label class="wrn-next__choice wrn-next--radio" data-variant="{variant}" data-icon-position="{iconPosition}"><input id="{id || name}" type="radio" name="{name}" value="{value}" checked="{checked}" disabled="{disabled}" required="{required}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" @click="preventReadonly(event)" @input="emitField('input', event)" @change="emitField('change', event)" @focus="emitField('focus', event)" @blur="emitField('blur', event)" @invalid="emitField('invalid', event)" />{#if icon}<span class="{icon}" aria-hidden="true"></span>{/if}<span class="{hiddenLabel || cornerHint ? 'wrn-next__sr-only' : ''}">{label}</span></label>
<label class="wrn-next__choice wrn-next--radio" data-variant="{variant}" data-icon-position="{iconPosition}"><input data-wrn-owner="Radio" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" id="{id || name}" type="radio" name="{name}" value="{value}" checked="{checked}" disabled="{disabled}" required="{required}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" @click="preventReadonly(event)" @input="emitField('input', event)" @change="emitField('change', event)" @focus="emitField('focus', event)" @blur="emitField('blur', event)" @invalid="emitField('invalid', event)" />{#if icon}<span class="{icon}" aria-hidden="true"></span>{/if}<span class="{hiddenLabel || cornerHint ? 'wrn-next__sr-only' : ''}">{label}</span></label>
{/if}
{#if helperText}<small class="wrn-next__field-help">{helperText}</small>{/if}<small class="wrn-next__field-error" data-error="{name}">{error}</small>
{#if helperText}<small data-wrn-owner="Radio" data-wrn-part="help" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" class="wrn-next__field-help">{helperText}</small>{/if}<small data-wrn-owner="Radio" data-wrn-part="error" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" class="wrn-next__field-error" data-error="{name}">{error}</small>
</div>
}
packages/ui/components/select.wrn
+23 -12
View File
@@ -35,33 +35,44 @@ size: string = "default"
}
state validationError: string = ""
functions {
shared function optionValue(option) { return option.value }
shared function selected(option) {
if (multiple) return values.includes(option.value)
return option.value === value
}
client function emitField(nameEvent, sourceEvent) {
const fieldValue = sourceEvent.currentTarget.value
const fieldValues = multiple ? Array.from(sourceEvent.currentTarget.selectedOptions).map(optionValue) : []
sourceEvent.stopPropagation()
if (sourceEvent.currentTarget.validity.valid) { validationError = ""; sourceEvent.currentTarget.setAttribute("aria-invalid", error ? "true" : "false"); sourceEvent.currentTarget.closest(".wrn-next--field").setAttribute("data-invalid", error ? "true" : "false") }
output[nameEvent]({ value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent })
output[nameEvent]({ value: fieldValue, values: fieldValues, name: name, sourceEvent: sourceEvent })
}
client function handleFocus(sourceEvent) { emitField("focus", sourceEvent); output.open({ name: name, sourceEvent: sourceEvent }) }
client function handleBlur(sourceEvent) { emitField("blur", sourceEvent); output.close({ name: name, sourceEvent: sourceEvent }) }
client function handleInvalid(sourceEvent) { sourceEvent.preventDefault(); sourceEvent.stopPropagation(); validationError = error || "Choose an option."; sourceEvent.currentTarget.setAttribute("aria-invalid", "true"); sourceEvent.currentTarget.closest(".wrn-next--field").setAttribute("data-invalid", "true"); output.invalid({ name: name, message: validationError, sourceEvent: sourceEvent }) }
client function handleInvalid(sourceEvent) { sourceEvent.preventDefault(); sourceEvent.stopPropagation()
validationError = error || "Choose an option."; sourceEvent.currentTarget.setAttribute("aria-invalid", "true"); sourceEvent.currentTarget.closest(".wrn-next--field").setAttribute("data-invalid", "true"); output.invalid({ name: name, message: validationError, sourceEvent: sourceEvent }) }
}
view {
<div {...attrs} class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--field wrn-next--select {class}" data-variant="{variant}" data-inline="{inline}" data-floating="{variant === 'floating'}" data-invalid="{error || validationError ? 'true' : 'false'}" data-readonly="{readonly}">
<div class="wrn-next__field-heading"><label class="{hiddenLabel ? 'wrn-next__sr-only' : ''}" for="{id || name}">{label}</label>{#if cornerHint}<span class="wrn-next__field-hint">{cornerHint}</span>{/if}</div>
<div class="wrn-next__field-control" data-icon-position="{iconPosition}" data-has-icon="{icon ? 'true' : 'false'}">
{#if icon}<span class="{icon} wrn-next__field-icon" aria-hidden="true"></span>{/if}
<select id="{id || name}" name="{name}" multiple="{multiple}" disabled="{disabled || readonly}" required="{required}" aria-readonly="{readonly}" aria-invalid="{error || validationError ? 'true' : 'false'}" aria-describedby="{error || validationError ? (id || name) + '-error' : (helperText ? (id || name) + '-help' : '')}" @input="emitField('input', event)" @change="emitField('change', event)" @focus="handleFocus(event)" @blur="handleBlur(event)" @invalid="handleInvalid(event)">
<div data-wrn-owner="Select" data-wrn-part="root" data-wrn-component="Select" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" {...attrs} class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--field wrn-next--select {class}" data-variant="{variant}" data-inline="{inline}" data-floating="{variant === 'floating'}" data-invalid="{error || validationError ? 'true' : 'false'}" data-readonly="{readonly}">
<div data-wrn-owner="Select" data-wrn-part="heading" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" class="wrn-next__field-heading"><label data-wrn-owner="Select" data-wrn-part="label" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" class="{hiddenLabel ? 'wrn-next__sr-only' : ''}" for="{id || name}">{label}</label>{#if cornerHint}<span data-wrn-owner="Select" data-wrn-part="hint" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" class="wrn-next__field-hint">{cornerHint}</span>{/if}</div>
<div data-wrn-owner="Select" data-wrn-part="controlContainer" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" class="wrn-next__field-control" data-icon-position="{iconPosition}" data-has-icon="{icon ? 'true' : 'false'}">
{#if icon}<span data-wrn-owner="Select" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" class="{icon} wrn-next__field-icon" aria-hidden="true"></span>{/if}
{#if multiple}
<select data-wrn-owner="Select" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" id="{id || name}" name="{name}" multiple="{multiple}" disabled="{disabled || readonly}" required="{required}" aria-readonly="{readonly}" aria-invalid="{error || validationError ? 'true' : 'false'}" aria-describedby="{error || validationError ? (id || name) + '-error' : (helperText ? (id || name) + '-help' : '')}" @input="emitField('input', event)" @change="emitField('change', event)" @focus="handleFocus(event)" @blur="handleBlur(event)" @invalid="handleInvalid(event)">
{#if !multiple}<option value="" selected="{value === ''}" disabled="{required}">{placeholder}</option>{/if}
{#each options as option}<option value="{option.value}" selected="{selected(option)}" disabled="{option.disabled}">{option.label}</option>{/each}
{#each options as option}<option value="{option.value}" selected="{multiple ? values.includes(option.value) : option.value === value}" disabled="{option.disabled}">{option.label}</option>{/each}
</select>
{#if !multiple}<svg class="wrn-next__select-indicator" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m6 9 6 6 6-6"></path></svg>{/if}
{#if variant === "floating"}<span class="wrn-next__field-floating-label">{label}</span>{/if}
{:else}
<select data-wrn-owner="Select" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" value="{value}" id="{id || name}" name="{name}" multiple="{multiple}" disabled="{disabled || readonly}" required="{required}" aria-readonly="{readonly}" aria-invalid="{error || validationError ? 'true' : 'false'}" aria-describedby="{error || validationError ? (id || name) + '-error' : (helperText ? (id || name) + '-help' : '')}" @input="emitField('input', event)" @change="emitField('change', event)" @focus="handleFocus(event)" @blur="handleBlur(event)" @invalid="handleInvalid(event)">
{#if !multiple}<option value="" selected="{value === ''}" disabled="{required}">{placeholder}</option>{/if}
{#each options as option}<option value="{option.value}" selected="{multiple ? values.includes(option.value) : option.value === value}" disabled="{option.disabled}">{option.label}</option>{/each}
</select>
{/if}
{#if !multiple}<svg data-wrn-owner="Select" data-wrn-part="indicator" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" class="wrn-next__select-indicator" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m6 9 6 6 6-6"></path></svg>{/if}
{#if variant === "floating"}<span data-wrn-owner="Select" data-wrn-part="floatingLabel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" class="wrn-next__field-floating-label">{label}</span>{/if}
</div>
{#if helperText}<small class="wrn-next__field-help">{helperText}</small>{/if}
<small id="{(id || name) + '-error'}" class="wrn-next__field-error" data-error="{name}" aria-live="polite">{error || validationError}</small>
{#if helperText}<small data-wrn-owner="Select" data-wrn-part="help" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" class="wrn-next__field-help">{helperText}</small>{/if}
<small data-wrn-owner="Select" data-wrn-part="error" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" id="{(id || name) + '-error'}" class="wrn-next__field-error" data-error="{name}" aria-live="polite">{error || validationError}</small>
</div>
}
packages/ui/components/skeleton.wrn
+8 -8
View File
@@ -7,16 +7,16 @@ component Skeleton {
class: string = ""
}
view {
<div class="wrn-skeleton-component {class}" data-color="{color}" data-size="{size}" role="status" aria-label="{label}" aria-busy="true">
<div class="wrn-skeleton-component__head" aria-hidden="true">
<span class="wrn-skeleton-component__avatar"></span>
<span class="wrn-skeleton-component__heading">
<span class="wrn-skeleton-component__bar wrn-skeleton-component__bar--title"></span>
<span class="wrn-skeleton-component__bar wrn-skeleton-component__bar--meta"></span>
<div class="wrn-skeleton-component {class}" data-color="{color}" data-size="{size}" role="status" aria-label="{label}" aria-busy="true" data-wrn-owner="Skeleton" data-wrn-part="root" data-wrn-component="Skeleton" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<div class="wrn-skeleton-component__head" aria-hidden="true" data-wrn-owner="Skeleton" data-wrn-part="head" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<span class="wrn-skeleton-component__avatar" data-wrn-owner="Skeleton" data-wrn-part="avatar" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"></span>
<span class="wrn-skeleton-component__heading" data-wrn-owner="Skeleton" data-wrn-part="heading" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<span class="wrn-skeleton-component__bar wrn-skeleton-component__bar--title" data-wrn-owner="Skeleton" data-wrn-part="bar" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"></span>
<span class="wrn-skeleton-component__bar wrn-skeleton-component__bar--meta" data-wrn-owner="Skeleton" data-wrn-part="bar" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"></span>
</span>
</div>
<div class="wrn-skeleton-component__body" aria-hidden="true">
{#each Array(lines).fill(0) as line}<span class="wrn-skeleton-component__line wrn-skeleton-component__bar"></span>{/each}
<div class="wrn-skeleton-component__body" aria-hidden="true" data-wrn-owner="Skeleton" data-wrn-part="body" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
{#each Array(lines).fill(0) as line}<span class="wrn-skeleton-component__line wrn-skeleton-component__bar" data-wrn-owner="Skeleton" data-wrn-part="line" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"></span>{/each}
</div>
</div>
}
Loaded 100 of 693 files, more files were not shown because too many files have changed in this diff. Show more