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/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}'