feat: release design system engine, studio and component contracts
This commit is contained in:
Clintchiz committed
1 parent
ff1065fb27
commit
3943b946d6
693 files changed
+175546
-3894
No files matched your search
@@ -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>
|
||||
|
||||
Reference in new issue
Block a user