js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

made changes to sidebar

Browse Source
This commit is contained in:
Kelsey Jackson
2025-06-06 13:41:45 -05:00
parent 2496497213
commit 62d4ceb186
16 changed files with 73 additions and 677 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
packages/webawesome/docs/assets/examples/layout-patterns/checkout.html
View File

@@ -1,165 +0,0 @@
<!DOCTYPE html>
<html lang="en" class="wa-cloak">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="/dist/styles/themes/default.css" />
<link rel="stylesheet" href="/dist/styles/webawesome.css" />
<script type="module" src="/dist/webawesome.loader.js"></script>
<style>
</style>
</head>
<body>
<wa-page>
<a href="#" slot="banner" style="background-color: var(--wa-color-warning-fill-normal)">Get in on our holiday
deals!</a>
<header slot="header" class="wa-cluster wa-desktop-only" style="justify-content: space-between">
<a href="/assets/examples/layout-patterns/" style="background-color: black; height: 40px; width: 40px"></a>
<wa-input placeholder="Search the best shops in the country" size="medium" style="width: 50%;">
<wa-icon name="magnifying-glass" variant="solid" slot="suffix"></wa-icon>
</wa-input>
<div class="wa-cluster"><wa-icon name="circle-user"></wa-icon><wa-icon name="shopping-cart"></wa-icon></div>
</header>
<main style="margin: 0 auto; max-width: 140ch;">
<div class="wa-grid wa-gap-3xl">
<div class="wa-stack">
<h4>Contact</h4>
<wa-input type="email" label="Email Address"></wa-input>
<wa-divider></wa-divider>
<h4>Shipping</h4>
<wa-select label="Country" value="us">
<wa-option value="ca">Canada</wa-option>
<wa-option value="mx">Mexico</wa-option>
<wa-option value="us">United States</wa-option>
</wa-select>
<div class="wa-grid">
<wa-input label="First Name"></wa-input>
<wa-input label="Last Name"></wa-input>
</div>
<wa-input label="Company"></wa-input>
<wa-input label="Address"></wa-input>
<div class="wa-grid" style="--min-column-size: 10ch;">
<wa-input label="City"></wa-input>
<wa-input label="State"></wa-input>
<wa-input label="Postal Code"></wa-input>
</div>
<wa-input label="Phone"></wa-input>
<wa-divider></wa-divider>
<wa-radio-group label="Shipping Method" name="shipping-method" value="standard" orientation="horizontal">
<wa-radio value="standard" hint="7-10 business days">Standard</wa-radio>
<wa-radio value="express" hint="2-5 business days">Express</wa-radio>
</wa-radio-group>
<wa-divider></wa-divider>
<h4>Payment</h4>
<wa-radio-group label="Payment Method" name="payment-method" value="credit" orientation="horizontal">
<wa-radio value="credit">Credit Card</wa-radio>
<wa-radio value="paypal">Paypal</wa-radio>
</wa-radio-group>
<wa-input label="Card Number"></wa-input>
<wa-input label="Name on Card"></wa-input>
<div class="wa-grid">
<wa-input label="Expiration Date" placeholder="MM/YY"></wa-input>
<wa-input label="CVC"></wa-input>
</div>
</div>
<div class="wa-stack">
<h4>Order Summary</h4>
<wa-card>
<div class="wa-stack">
<div class="wa-flank wa-align-items-start" style="--flank-size: 7rem">
<div class="wa-frame wa-border-radius-s">
<img
src="https://images.unsplash.com/photo-1595950653106-6c9ebd614d3a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDM1MzB8&ixlib=rb-4.0.3&q=80&w=1080"
alt="">
</div>
<div class="wa-stack wa-gap-xs">
<div class="wa-split">
<span class="wa-heading-s">Dolce Runners</span>
<wa-icon-button name="trash" label="Remove from cart"></wa-icon-button>
</div>
<span class="wa-caption-m">Cream/Seafoam</span>
<span class="wa-caption-m">12.5</span>
<div class="wa-split">
<span>$135.00</span>
<wa-select value="1" size="small" style="max-width: 8ch">
<wa-option value="1">1</wa-option>
<wa-option value="2">2</wa-option>
<wa-option value="3">3</wa-option>
</wa-select>
</div>
</div>
</div>
<wa-divider></wa-divider>
<div class="wa-flank wa-align-items-start" style="--flank-size: 7rem">
<div class="wa-frame wa-border-radius-s">
<img
src="https://images.unsplash.com/photo-1514989940723-e8e51635b782?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDM1Njh8&ixlib=rb-4.0.3&q=80&w=1080"
alt="">
</div>
<div class="wa-stack wa-gap-xs">
<div class="wa-split">
<span class="wa-heading-s">Dunk High</span>
<wa-icon-button name="trash" label="Remove from cart"></wa-icon-button>
</div>
<span class="wa-caption-m">Sand/Amber/Black</span>
<span class="wa-caption-m">12.5</span>
<div class="wa-split">
<span>$180.00</span>
<wa-select value="1" size="small" style="max-width: 8ch">
<wa-option value="1">1</wa-option>
<wa-option value="2">2</wa-option>
<wa-option value="3">3</wa-option>
</wa-select>
</div>
</div>
</div>
<wa-divider></wa-divider>
<div class="wa-flank wa-align-items-start" style="--flank-size: 7rem">
<div class="wa-frame wa-border-radius-s">
<img
src="https://images.unsplash.com/photo-1606107557195-0e29a4b5b4aa?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDM2MTF8&ixlib=rb-4.0.3&q=80&w=1080"
alt="">
</div>
<div class="wa-stack wa-gap-xs">
<div class="wa-split">
<span class="wa-heading-s">NB Runner</span>
<wa-icon-button name="trash" label="Remove from cart"></wa-icon-button>
</div>
<span class="wa-caption-m">Forrest Green</span>
<span class="wa-caption-m">12.5</span>
<div class="wa-split">
<span>$48.99</span>
<wa-select value="1" size="small" style="max-width: 8ch">
<wa-option value="1">1</wa-option>
<wa-option value="2">2</wa-option>
<wa-option value="3">3</wa-option>
</wa-select>
</div>
</div>
</div>
<wa-divider></wa-divider>
<div class="wa-stack">
<div class="wa-split wa-caption-m">
<span>Subtotal</span>
<span>$363.99</span>
</div>
<div class="wa-split wa-caption-m">
<span>Shipping</span>
<span>FREE</span>
</div>
<div class="wa-split wa-heading-m">
<span>Total</span>
<span>$363.99</span>
</div>
</div>
<wa-divider></wa-divider>
<wa-button variant="brand">Confirm Order</wa-button>
</div>
</wa-card>
</div>
</div>
</main>

187
packages/webawesome/docs/assets/examples/layout-patterns/index.html
View File

@@ -1,187 +0,0 @@
<!doctype html>
<html lang="en" class="wa-cloak">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="/dist/styles/themes/default.css" />
<link rel="stylesheet" href="/dist/styles/webawesome.css" />
<script type="module" src="/dist/webawesome.loader.js"></script>
<style>
</style>
</head>
<body>
<wa-page>
<a href="#" slot="banner" style="background-color: var(--wa-color-warning-fill-normal)">Get in on our holiday
deals!</a>
<header slot="header" class="wa-cluster wa-desktop-only" style="justify-content: space-between">
<a href="/assets/examples/layout-patterns/" style="background-color: black; height: 40px; width: 40px"></a>
<wa-input placeholder="Search the best shops in the country" size="medium" style="width: 50%;">
<wa-icon name="magnifying-glass" variant="solid" slot="suffix"></wa-icon>
</wa-input>
<div class="wa-cluster"><wa-icon name="circle-user"></wa-icon><wa-icon name="shopping-cart"></wa-icon></div>
</header>
<main style="margin: 0 auto; max-width: 140ch;">
<!--<img style="object-fit: none;" src="https://uploads.webawesome.com/cta-1440.jpg" alt="" sizes="(max-width: 480px) 480px,
(max-width: 600px) 600px, (max-width: 900px) 900px, 1440px"
srcset="https://uploads.webawesome.com/cta-480.jpg 480w, https://uploads.webawesome.com/cta-600.jpg 600w, https://uploads.webawesome.com/cta-900.jpg 900w, https://uploads.webawesome.com/cta-1440.jpg 1440w" />
<div class="wa-stack wa-align-items-center wa-gap-xl" style="margin-block: var(--wa-space-4xl);">
<h2 class="wa-heading-3xl" style="text-align: center">
Unlock Your Future: <br />Start Learning Web Development Today!
</h2>
<div class="wa-cluster wa-gap-xs">
<wa-button>Get Started</wa-button>
<wa-button appearance="plain">Find out more <wa-icon slot="suffix" name="arrow-right"></wa-icon></wa-button>
</div>
</div>-->
<div style="margin-block: var(--wa-space-4xl);">
<div class="wa-grid wa-align-items-center wa-gap-3xl">
<div class="wa-stack wa-gap-3xl">
<h2 class="wa-heading-3xl">Unlock Your Future: <br />Start Learning Web Development Today!</h2>
<div class="wa-cluster wa-gap-xs">
<wa-button>Get Started</wa-button>
<wa-button appearance="plain">Find out more <wa-icon slot="suffix"
name="arrow-right"></wa-icon></wa-button>
</div>
</div>
<div class="wa-frame wa-border-radius-l">
<img
src="https://images.unsplash.com/photo-1586864387634-2f33030dab41?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="" />
</div>
</div>
</div>
<div class="wa-stack wa-align">
<h2 class="wa-heading-2xl">Recipes</h2>
<div class="wa-grid">
<a href="#" class="wa-frame wa-align-items-center wa-border-radius-m wa-link-plain wa-heading-xl wa-dark"
style="padding: var(--wa-space-3xl);background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1548340748-6d2b7d7da280?q=80&w=3027&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');background-size: cover;background-position: center; text-align: center;">
Appetizers and Snacks
</a>
<a href="#" class="wa-frame wa-align-items-center wa-border-radius-m wa-link-plain wa-heading-xl wa-dark"
style="padding: var(--wa-space-3xl);background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1644704265419-96ddaf628e71?q=80&w=5340&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');background-size: cover;background-position: center; text-align: center">
Main Dishes
</a>
<a href="#" class="wa-frame wa-align-items-center wa-border-radius-m wa-link-plain wa-heading-xl wa-dark"
style="padding: var(--wa-space-3xl);background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1551024506-0bccd828d307?q=80&w=3200&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');background-size: cover;background-position: center; text-align: center;">
Desserts
</a>
</div>
<wa-button appearance="plain"><wa-icon slot="suffix" name="arrow-right"></wa-icon>View More Recipes</wa-button>
</div>
<div class="wa-grid wa-gap-2xl">
<a class="wa-stack wa-align-items-center wa-gap-xs wa-link-plain"
href="/assets/examples/layout-patterns/product-single.html">
<div class="wa-frame wa-border-radius-m">
<img
src="https://images.unsplash.com/photo-1633933329864-5d4c4423ad54?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Bunch of fresh basil leaves with purple veins (Photograph by Svitlana)" />
</div>
<strong>Basil</strong>
<wa-rating label="Rating" size="small" readonly value="5"></wa-rating>
<span class="wa-caption-m">41 Reviews</span>
<strong>$8.59</strong>
</a>
<a class="wa-stack wa-align-items-center wa-gap-xs wa-link-plain" href="">
<div class="wa-frame wa-border-radius-m">
<img
src="https://images.unsplash.com/photo-1662892194342-f95c33cc16e3?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Bunch of cut chamomile blooms (Photograph by Rootnot Creations)" />
</div>
<strong>Chamomile</strong>
<wa-rating label="Rating" size="small" readonly value="3"></wa-rating>
<span class="wa-caption-m">17 Reviews</span>
<strong>$10.29</strong>
</a>
<a class="wa-stack wa-align-items-center wa-gap-xs wa-link-plain" href="">
<div class="wa-frame wa-border-radius-m">
<img
src="https://images.unsplash.com/photo-1636396279461-f875646332d9?q=80&w=3360&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Canvas bundle of cut lavender blooms (Photograph by volant)" />
</div>
<strong>Lavender</strong>
<wa-rating label="Rating" size="small" readonly value="4"></wa-rating>
<span class="wa-caption-m">29 Reviews</span>
<strong>$9.99</strong>
</a>
<a class="wa-stack wa-align-items-center wa-gap-xs wa-link-plain" href="">
<div class="wa-frame wa-border-radius-m">
<img
src="https://images.unsplash.com/photo-1501085934018-450c8e615dbc?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Blooming marjoram plant (Photograph by Monika Grabkowska)" />
</div>
<strong>Marjoram</strong>
<wa-rating label="Rating" size="small" readonly value="4"></wa-rating>
<span class="wa-caption-m">11 Reviews</span>
<strong>$8.59</strong>
</a>
<a class="wa-stack wa-align-items-center wa-gap-xs wa-link-plain" href="">
<div class="wa-frame wa-border-radius-m">
<img
src="https://images.unsplash.com/photo-1688633767797-455f59c98272?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Group of mature oregano plants (Photograph Nikolett Emmert)" />
</div>
<strong>Oregano</strong>
<wa-rating label="Rating" size="small" readonly value="5"></wa-rating>
<span class="wa-caption-m">38 Reviews</span>
<strong>$8.59</strong>
</a>
<a class="wa-stack wa-align-items-center wa-gap-xs wa-link-plain" href="">
<div class="wa-frame wa-border-radius-m">
<img
src="https://images.unsplash.com/photo-1603109731710-dba41b1096a7?q=80&w=2259&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Cluster of peppermint plants (Photograph by Josefin)" />
</div>
<strong>Peppermint</strong>
<wa-rating label="Rating" size="small" readonly value="5"></wa-rating>
<span class="wa-caption-m">26 Reviews</span>
<strong>$9.99</strong>
</a>
<a class="wa-stack wa-align-items-center wa-gap-xs wa-link-plain" href="">
<div class="wa-frame wa-border-radius-m">
<img
src="https://images.unsplash.com/photo-1726994803809-0e065bd4b25b?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Mature rosemary stems (Photograph by 360floralflaves)" />
</div>
<strong>Rosemary</strong>
<wa-rating label="Rating" size="small" readonly value="4"></wa-rating>
<span class="wa-caption-m">34 Reviews</span>
<strong>$8.59</strong>
</a>
<a class="wa-stack wa-align-items-center wa-gap-xs wa-link-plain" href="">
<div class="wa-frame wa-border-radius-m">
<img
src="https://images.unsplash.com/photo-1659834742696-44573974981b?q=80&w=3542&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Group of sage plants (Photograph by Susie Burleson)" />
</div>
<strong>Sage</strong>
<wa-rating label="Rating" size="small" readonly value="5"></wa-rating>
<span class="wa-caption-m">24 Reviews</span>
<strong>$9.29</strong>
</a>
</div>
</main>
<footer slot="footer" class="wa-stack wa-gap-xl">
<div class="wa-split">
<div class="wa-cluster wa-gap-xs wa-heading-xl">
<wa-icon name="gears"></wa-icon>
<span>Widget UI</span>
</div>
<form class="wa-flank:end wa-gap-xs wa-align-items-end">
<wa-input placeholder="Enter your email" label="Stay in the Know" type="email"></wa-input>
<wa-button>Subscribe</wa-button>
</form>
</div>
<wa-divider></wa-divider>
<p style="text-align: right">© 2025 All rights reserved.</p>
</footer>
</wa-page>
</body>
</html>

197
packages/webawesome/docs/assets/examples/layout-patterns/product-single.html
View File

@@ -1,197 +0,0 @@
<!DOCTYPE html>
<html lang="en" class="wa-cloak">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="/dist/styles/themes/default.css" />
<link rel="stylesheet" href="/dist/styles/webawesome.css" />
<script type="module" src="/dist/webawesome.loader.js"></script>
<style>
</style>
</head>
<body>
<wa-page>
<a href="#" slot="banner" style="background-color: var(--wa-color-warning-fill-normal)">Get in on our holiday
deals!</a>
<header slot="header" class="wa-cluster wa-desktop-only" style="justify-content: space-between">
<a href="/assets/examples/layout-patterns/" style="background-color: black; height: 40px; width: 40px"></a>
<wa-input placeholder="Search the best shops in the country" size="medium" style="width: 50%;">
<wa-icon name="magnifying-glass" variant="solid" slot="suffix"></wa-icon>
</wa-input>
<div class="wa-cluster"><wa-icon name="circle-user"></wa-icon><wa-icon name="shopping-cart"></wa-icon></div>
</header>
<main style="margin: 0 auto; max-width: 140ch;">
<div class="wa-stack wa-gap-2xl">
<wa-carousel pagination navigation loop style="--aspect-ratio: 3 / 2;">
<wa-carousel-item>
<img
src="https://images.unsplash.com/photo-1601379327928-bedfaf9da2d0?q=80&w=3456&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Four folded and stacked knit sweaters in three colors (Photograph by Tijana Drndarski)" />
</wa-carousel-item>
<wa-carousel-item>
<img
src="https://images.unsplash.com/photo-1519804270019-39e929a7afb5?q=80&w=3774&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Knit sweater in sand color full view, showing waffle knit pattern, relaxed fit, and crew neckline (Photograph by Jonathan Zerger)" />
</wa-carousel-item>
<wa-carousel-item>
<img
src="https://images.unsplash.com/photo-1519805614447-6f49142e6697?q=80&w=3633&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Knit sweater in sand color shoulder detail, showing relaxed fit on broader shoulders (Photograph by Jonathan Zerger)" />
</wa-carousel-item>
<wa-carousel-item>
<img
src="https://images.unsplash.com/photo-1522230130022-498e355165c5?q=80&w=3774&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Knit sweater in sand color sleeve detail, showing loose fit around the arms (Photograph by Jonathan Zerger)" />
</wa-carousel-item>
</wa-carousel>
<div class="wa-grid wa-gap-2xl" style="--min-column-size: 30ch;">
<div class="wa-stack">
<div class="wa-split">
<h3>Pullover Sweater</h3>
<span class="wa-body-xl">$140</span>
</div>
<wa-rating label="Rating" precision="0.5" value="4.5" readonly></wa-rating>
<p>Wrap yourself in warmth and effortless style with this wool knit Pullover Sweater. Designed for
unparalleled
comfort. The relaxed fit and classic crew neckline make it a versatile staple for layering or wearing
solo.</p>
<wa-radio-group label="Color" name="color" value="sand" orientation="horizontal">
<wa-radio-button value="sand">
<wa-icon slot="prefix" name="circle" style="color: burlywood;"></wa-icon>
Sand
</wa-radio-button>
<wa-radio-button value="shale">
<wa-icon slot="prefix" name="circle" style="color: silver;"></wa-icon>
Shale
</wa-radio-button>
<wa-radio-button value="slate">
<wa-icon slot="prefix" name="circle" style="color: dimgray;"></wa-icon>
Slate
</wa-radio-button>
</wa-radio-group>
<wa-radio-group label="Size" name="size" value="s" orientation="horizontal">
<wa-radio-button value="xs">XS</wa-radio-button>
<wa-radio-button value="s">S</wa-radio-button>
<wa-radio-button value="m">M</wa-radio-button>
<wa-radio-button value="l">L</wa-radio-button>
<wa-radio-button value="xl">XL</wa-radio-button>
</wa-radio-group>
<wa-drawer label="Drawer" id="drawer-overview">
<div class="wa-stack">
<article class="wa-flank" style="--flank-size: 6rem">
<div class="wa-frame wa-border-radius-m">
<img
src="https://images.unsplash.com/photo-1704677982224-89cd6d039fa6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDEwOTJ8&ixlib=rb-4.0.3&q=80&w=1080"
alt="" />
</div>
<div class="wa-stack wa-gap-2xs">
<div class="wa-split wa-gap-2xs">
<strong>AJ1 Low</strong>
<strong>$170.00</strong>
</div>
<span class="wa-caption-m">Multi-color</span>
<div class="wa-split wa-gap-2xs">
<span class="wa-body-s">Qty: 1</span>
<wa-button appearance="plain" size="small">Remove</wa-button>
</div>
</div>
</article>
<wa-divider></wa-divider>
<article class="wa-flank" style="--flank-size: 6rem">
<div class="wa-frame wa-border-radius-m">
<img
src="https://images.unsplash.com/photo-1672908615254-71a0b373eaba?q=80&w=3560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="(Photograph by Hamed darzi)" />
</div>
<div class="wa-stack wa-gap-2xs">
<div class="wa-split wa-gap-2xs">
<strong>The Trails</strong>
<strong>$35.00</strong>
</div>
<span class="wa-caption-m">Twilight Blue</span>
<div class="wa-split wa-gap-2xs">
<span class="wa-body-s">Qty: 1</span>
<wa-button appearance="plain" size="small">Remove</wa-button>
</div>
</div>
</article>
<wa-divider></wa-divider>
<article class="wa-flank" style="--flank-size: 6rem">
<div class="wa-frame wa-border-radius-m">
<img
src="https://images.unsplash.com/photo-1693443687750-611ad77f3aba?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="(Photograph by tian dayong)" />
</div>
<div class="wa-stack wa-gap-2xs">
<div class="wa-split wa-gap-2xs">
<strong>Outcast 2-pack</strong>
<strong>$27.00</strong>
</div>
<span class="wa-caption-m">Black / White</span>
<div class="wa-split wa-gap-2xs">
<span class="wa-body-s">Qty: 1</span>
<wa-button appearance="plain" size="small">Remove</wa-button>
</div>
</div>
</article>
</div>
<div slot="footer" class="wa-stack" style="width: 100%">
<div class="wa-split">
<strong>Subtotal</strong>
<strong>$232.00</strong>
</div>
<span class="wa-caption-m">Shipping and taxes calculated at checkout.</span>
<wa-button variant="brand" href="/assets/examples/layout-patterns/checkout.html">Checkout</wa-button>
<wa-button appearance="plain" size="small" variant="brand" data-drawer="close">
Continue Shopping
<wa-icon name="arrow-right"></wa-icon>
</wa-button>
</div>
</wa-drawer>
<wa-button variant="brand">Add to Cart</wa-button>
</div>
<div class="wa-stack">
<wa-details summary="Size and Fit" open>
<ul class="wa-body-s">
<li>True to size with a relaxed fit</li>
<li>Fits all shoulder shapes, broad to narrow</li>
<li>No pinching in the arms or irritating seams</li>
<li>Ribbed cuffs and hem</li>
</ul>
</wa-details>
<wa-details summary="Materials and Care">
<ul class="wa-body-s">
<li>Durable Merino and Yak wool blend</li>
<li>Machine wash cold on delicate cycle</li>
<li>Lay flat to dry</li>
<li>Made with <wa-icon name="heart" label="love"></wa-icon> in Bentonville, USA</li>
</ul>
</wa-details>
<wa-details summary="Shipping">
<ul class="wa-body-s">
<li>Flat $9 shipping free for orders under $200.</li>
<li>Free shipping on orders over $200, anywhere in the world.</li>
</ul>
</wa-details>
</div>
</div>
</div>
</main>
</wa-page>
<script>
const drawer = document.querySelector('#drawer-overview');
const openButton = drawer.nextElementSibling;
openButton.addEventListener('click', () => drawer.open = true);
</script>
</body>
</html>

4
packages/webawesome/src/react/breadcrumb-item/index.ts
View File

@@ -11,8 +11,8 @@ const tagName = 'wa-breadcrumb-item';
* @since 2.0
*
* @slot - The breadcrumb item's label.
* @slot prefix - An optional prefix, usually an icon or icon button.
* @slot suffix - An optional suffix, usually an icon or icon button.
* @slot prefix - An optional prefix, usually an icon.
* @slot suffix - An optional suffix, usually an icon.
* @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If
* you want to change it for all items in the group, set the separator on `<wa-breadcrumb>` instead.
*

2
packages/webawesome/src/react/card/index.ts
View File

@@ -24,7 +24,7 @@ const tagName = 'wa-card';
* @cssproperty [--border-color=var(--wa-color-surface-border)] - The color of the card's borders. Expects a single value.
* @cssproperty [--inner-border-color=var(--wa-color-surface-border)] - The color of the card's inner borders, e.g. those separating headers and footers from the main content. Expects a single value.
* @cssproperty [--border-width=var(--wa-panel-border-width)] - The width of the card's borders. Expects a single value.
* @cssproperty [--spacing=var(--wa-space)] - The amount of space around and between sections of the card. Expects a single value.
* @cssproperty [--spacing=var(--wa-space-l)] - The amount of space around and between sections of the card. Expects a single value.
*/
const reactWrapper = createComponent({
tagName,

8
packages/webawesome/src/react/dialog/index.ts
View File

@@ -14,11 +14,11 @@ const tagName = 'wa-dialog';
* @status stable
* @since 2.0
*
* @dependency wa-icon-button
* @dependency wa-button
*
* @slot - The dialog's main content.
* @slot label - The dialog's label. Alternatively, you can use the `label` attribute.
* @slot header-actions - Optional actions to add to the header. Works best with `<wa-icon-button>`.
* @slot header-actions - Optional actions to add to the header. Works best with `<wa-button>`.
* @slot footer - The dialog's footer, usually one or more buttons representing various options.
*
* @event wa-show - Emitted when the dialog opens.
@@ -31,9 +31,9 @@ const tagName = 'wa-dialog';
* @event wa-after-hide - Emitted after the dialog closes and all animations are complete.
*
* @csspart header - The dialog's header. This element wraps the title and header actions.
* @csspart header-actions - Optional actions to add to the header. Works best with `<wa-icon-button>`.
* @csspart header-actions - Optional actions to add to the header. Works best with `<wa-button>`.
* @csspart title - The dialog's title.
* @csspart close-button - The close button, a `<wa-icon-button>`.
* @csspart close-button - The close button, a `<wa-button>`.
* @csspart close-button__base - The close button's exported `base` part.
* @csspart body - The dialog's body.
* @csspart footer - The dialog's footer.

14
packages/webawesome/src/react/drawer/index.ts
View File

@@ -14,11 +14,11 @@ const tagName = 'wa-drawer';
* @status stable
* @since 2.0
*
* @dependency wa-icon-button
* @dependency wa-button
*
* @slot - The drawer's main content.
* @slot label - The drawer's label. Alternatively, you can use the `label` attribute.
* @slot header-actions - Optional actions to add to the header. Works best with `<wa-icon-button>`.
* @slot header-actions - Optional actions to add to the header. Works best with `<wa-button>`.
* @slot footer - The drawer's footer, usually one or more buttons representing various options.
*
* @event wa-show - Emitted when the drawer opens.
@@ -26,15 +26,15 @@ const tagName = 'wa-drawer';
* @event wa-hide - Emitted when the drawer closes.
* @event wa-after-hide - Emitted after the drawer closes and all animations are complete.
* @event {{ source: Element }} wa-hide - Emitted when the drawer is requesting to close. Calling
* `event.preventDefault()` will prevent the dialog from closing. You can inspect `event.detail.source` to see which
* element caused the dialog to close. If the source is the dialog element itself, the user has pressed [[Escape]] or
* the dialog has been closed programmatically. Avoid using this unless closing the dialog will result in destructive
* `event.preventDefault()` will prevent the drawer from closing. You can inspect `event.detail.source` to see which
* element caused the drawer to close. If the source is the drawer element itself, the user has pressed [[Escape]] or
* the drawer has been closed programmatically. Avoid using this unless closing the drawer will result in destructive
* behavior such as data loss.
*
* @csspart header - The drawer's header. This element wraps the title and header actions.
* @csspart header-actions - Optional actions to add to the header. Works best with `<wa-icon-button>`.
* @csspart header-actions - Optional actions to add to the header. Works best with `<wa-button>`.
* @csspart title - The drawer's title.
* @csspart close-button - The close button, a `<wa-icon-button>`.
* @csspart close-button - The close button, a `<wa-button>`.
* @csspart close-button__base - The close button's exported `base` part.
* @csspart body - The drawer's body.
* @csspart footer - The drawer's footer.

33
packages/webawesome/src/react/icon-button/index.ts
View File

@@ -1,33 +0,0 @@
import { createComponent } from '@lit/react';
import * as React from 'react';
import Component from '../../components/icon-button/icon-button.js';
const tagName = 'wa-icon-button';
/**
* @summary Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
* @documentation https://backers.webawesome.com/docs/components/icon-button
* @status stable
* @since 2.0
*
* @dependency wa-icon
*
* @event blur - Emitted when the icon button loses focus.
* @event focus - Emitted when the icon button gains focus.
*
* @cssproperty [--background-color-hover=var(--wa-color-neutral-fill-quiet)] - The color of the button's background on hover.
* @cssproperty [--background-color-active=var(--wa-color-neutral-fill-quiet)] - The color of the button's background on `:active`.
* @cssproperty --text-color-hover - The color of the button's background on hover.
* @cssproperty --text-color-active - The color of the button's background on `:active`.
*
* @csspart base - The component's base wrapper.
*/
const reactWrapper = createComponent({
tagName,
elementClass: Component,
react: React,
events: {},
displayName: 'WaIconButton',
});
export default reactWrapper;

44
packages/webawesome/src/react/index.ts
View File

@@ -1,15 +1,15 @@
export { default as WaAnimatedImage } from './animated-image/index.js';
export { default as WaAvatar } from './avatar/index.js';
export { default as WaBadge } from './badge/index.js';
export { default as WaAnimation } from './animation/index.js';
export { default as WaBreadcrumb } from './breadcrumb/index.js';
export { default as WaButton } from './button/index.js';
export { default as WaBreadcrumbItem } from './breadcrumb-item/index.js';
export { default as WaButton } from './button/index.js';
export { default as WaBadge } from './badge/index.js';
export { default as WaAvatar } from './avatar/index.js';
export { default as WaButtonGroup } from './button-group/index.js';
export { default as WaCallout } from './callout/index.js';
export { default as WaCard } from './card/index.js';
export { default as WaCarouselItem } from './carousel-item/index.js';
export { default as WaCarousel } from './carousel/index.js';
export { default as WaCarouselItem } from './carousel-item/index.js';
export { default as WaCheckbox } from './checkbox/index.js';
export { default as WaColorPicker } from './color-picker/index.js';
export { default as WaComparison } from './comparison/index.js';
@@ -17,43 +17,43 @@ export { default as WaCopyButton } from './copy-button/index.js';
export { default as WaDetails } from './details/index.js';
export { default as WaDialog } from './dialog/index.js';
export { default as WaDivider } from './divider/index.js';
export { default as WaFormatBytes } from './format-bytes/index.js';
export { default as WaDropdown } from './dropdown/index.js';
export { default as WaDrawer } from './drawer/index.js';
export { default as WaDropdown } from './dropdown/index.js';
export { default as WaFormatBytes } from './format-bytes/index.js';
export { default as WaFormatDate } from './format-date/index.js';
export { default as WaFormatNumber } from './format-number/index.js';
export { default as WaIcon } from './icon/index.js';
export { default as WaIconButton } from './icon-button/index.js';
export { default as WaInclude } from './include/index.js';
export { default as WaInput } from './input/index.js';
export { default as WaMenuItem } from './menu-item/index.js';
export { default as WaOption } from './option/index.js';
export { default as WaMutationObserver } from './mutation-observer/index.js';
export { default as WaMenuLabel } from './menu-label/index.js';
export { default as WaMenu } from './menu/index.js';
export { default as WaProgressRing } from './progress-ring/index.js';
export { default as WaProgressBar } from './progress-bar/index.js';
export { default as WaMenuItem } from './menu-item/index.js';
export { default as WaMenuLabel } from './menu-label/index.js';
export { default as WaMutationObserver } from './mutation-observer/index.js';
export { default as WaPage } from './page/index.js';
export { default as WaPopover } from './popover/index.js';
export { default as WaPopup } from './popup/index.js';
export { default as WaProgressRing } from './progress-ring/index.js';
export { default as WaQrCode } from './qr-code/index.js';
export { default as WaRadioGroup } from './radio-group/index.js';
export { default as WaRating } from './rating/index.js';
export { default as WaOption } from './option/index.js';
export { default as WaRadio } from './radio/index.js';
export { default as WaRadioGroup } from './radio-group/index.js';
export { default as WaRelativeTime } from './relative-time/index.js';
export { default as WaProgressBar } from './progress-bar/index.js';
export { default as WaResizeObserver } from './resize-observer/index.js';
export { default as WaScroller } from './scroller/index.js';
export { default as WaSelect } from './select/index.js';
export { default as WaRating } from './rating/index.js';
export { default as WaSkeleton } from './skeleton/index.js';
export { default as WaSpinner } from './spinner/index.js';
export { default as WaSlider } from './slider/index.js';
export { default as WaSplitPanel } from './split-panel/index.js';
export { default as WaSelect } from './select/index.js';
export { default as WaSwitch } from './switch/index.js';
export { default as WaTabGroup } from './tab-group/index.js';
export { default as WaTabPanel } from './tab-panel/index.js';
export { default as WaTab } from './tab/index.js';
export { default as WaTabGroup } from './tab-group/index.js';
export { default as WaSpinner } from './spinner/index.js';
export { default as WaTag } from './tag/index.js';
export { default as WaTextarea } from './textarea/index.js';
export { default as WaTooltip } from './tooltip/index.js';
export { default as WaTree } from './tree/index.js';
export { default as WaViewportDemo } from './viewport-demo/index.js';
export { default as WaTreeItem } from './tree-item/index.js';
export { default as WaTabPanel } from './tab-panel/index.js';
export { default as WaTreeItem } from './tree-item/index.js';
export { default as WaZoomableFrame } from './zoomable-frame/index.js';
export { default as WaTooltip } from './tooltip/index.js';

2
packages/webawesome/src/react/radio/index.ts
View File

@@ -13,7 +13,6 @@ const tagName = 'wa-radio';
* @dependency wa-icon
*
* @slot - The radio's label.
* @slot hint - Text that describes how to use the checkbox. Alternatively, you can use the `hint` attribute.
*
* @event blur - Emitted when the control loses focus.
* @event focus - Emitted when the control gains focus.
@@ -21,7 +20,6 @@ const tagName = 'wa-radio';
* @csspart control - The circular container that wraps the radio's checked state.
* @csspart checked-icon - The checked icon.
* @csspart label - The container that wraps the radio's label.
* @csspart hint - The hint's wrapper.
*
* @cssproperty --background-color - The radio's background color.
* @cssproperty --background-color-checked - The radio's background color when checked.

1
packages/webawesome/src/react/select/index.ts
View File

@@ -73,6 +73,7 @@ const tagName = 'wa-select';
* @cssproperty --border-color - The border color of the select's combobox.
* @cssproperty --border-width - The width of the select's borders, including the listbox.
* @cssproperty --box-shadow - The shadow effects around the edges of the select's combobox.
* @cssproperty [--tag-max-size=10ch] - When using `multiple`, the max size of tags before their content is truncated.
*
* @cssstate blank - The select is empty.
*/

47
packages/webawesome/src/react/slider/index.ts
View File

@@ -9,13 +9,19 @@ export type { WaInvalidEvent } from '../../events/events.js';
const tagName = 'wa-slider';
/**
* <wa-slider>
*
* @summary Ranges allow the user to select a single value within a given range using a slider.
* @documentation https://backers.webawesome.com/docs/components/range
* @status stable
* @since 2.0
*
* @dependency wa-tooltip
*
* @slot label - The slider label. Alternatively, you can use the `label` attribute.
* @slot hint - Text that describes how to use the input. Alternatively, you can use the `hint` attribute.
* instead.
* @slot reference - One or more reference labels to show visually below the slider.
*
* @event blur - Emitted when the control loses focus.
* @event change - Emitted when an alteration to the control's value is committed by the user.
@@ -23,22 +29,33 @@ const tagName = 'wa-slider';
* @event input - Emitted when the control receives input.
* @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
*
* @csspart form-control - The form control that wraps the label, input, and hint.
* @csspart form-control-label - The input's label.
* @csspart form-control-input - The input's wrapper.
* @csspart hint - The hint's wrapper.
* @csspart base - The internal `<input>` element.
* @csspart tooltip - The slider tooltip.
* @csspart label - The element that contains the sliders's label.
* @csspart hint - The element that contains the slider's description.
* @csspart slider - The focusable element with `role="slider"`. Contains the track and reference slot.
* @csspart track - The slider's track.
* @csspart indicator - The colored indicator that shows from the start of the slider to the current value.
* @csspart markers - The container that holds all the markers when `with-markers` is used.
* @csspart marker - The individual markers that are shown when `with-markers` is used.
* @csspart references - The container that holds references that get slotted in.
* @csspart thumb - The slider's thumb.
* @csspart thumb-min - The min value thumb in a range slider.
* @csspart thumb-max - The max value thumb in a range slider.
* @csspart tooltip - The tooltip, a `<wa-tooltip>` element.
* @csspart tooltip__tooltip - The tooltip's `tooltip` part.
* @csspart tooltip__content - The tooltip's `content` part.
* @csspart tooltip__arrow - The tooltip's `arrow` part.
*
* @cssproperty --thumb-color - The color of the thumb.
* @cssproperty --thumb-gap - The visual gap between the edges of the thumb and the track.
* @cssproperty --thumb-shadow - The shadow effects around the edges of the thumb.
* @cssproperty --thumb-size - The size of the thumb.
* @cssproperty --tooltip-offset - The vertical distance the tooltip is offset from the thumb.
* @cssproperty --track-color-active - The color of the portion of the track that represents the current value.
* @cssproperty --track-color-inactive - The of the portion of the track that represents the remaining value.
* @cssproperty --track-height - The height of the track.
* @cssproperty --track-active-offset - The point of origin of the active track.
* @cssstate disabled - Applied when the slider is disabled.
* @cssstate dragging - Applied when the slider is being dragged.
* @cssstate focused - Applied when the slider has focus.
* @cssstate user-valid - Applied when the slider is valid and the user has sufficiently interacted with it.
* @cssstate user-invalid - Applied when the slider is invalid and the user has sufficiently interacted with it.
*
* @cssproperty [--track-size=0.75em] - The height or width of the slider's track.
* @cssproperty [--marker-width=0.1875em] - The width of each individual marker.
* @cssproperty [--marker-height=0.1875em] - The height of each individual marker.
* @cssproperty [--thumb-width=1.25em] - The width of the thumb.
* @cssproperty [--thumb-height=1.25em] - The height of the thumb.
*/
const reactWrapper = createComponent({
tagName,

4
packages/webawesome/src/react/tab-group/index.ts
View File

@@ -14,7 +14,7 @@ const tagName = 'wa-tab-group';
* @status stable
* @since 2.0
*
* @dependency wa-icon-button
* @dependency wa-button
* @dependency wa-tab
* @dependency wa-tab-panel
*
@@ -29,7 +29,7 @@ const tagName = 'wa-tab-group';
* @csspart nav - The tab group's navigation container where tabs are slotted in.
* @csspart tabs - The container that wraps the tabs.
* @csspart body - The tab group's body where tab panels are slotted in.
* @csspart scroll-button - The previous/next scroll buttons that show when tabs are scrollable, an `<wa-icon-button>`.
* @csspart scroll-button - The previous/next scroll buttons that show when tabs are scrollable, a `<wa-button>`.
* @csspart scroll-button-start - The starting scroll button.
* @csspart scroll-button-end - The ending scroll button.
* @csspart scroll-button__base - The scroll button's exported `base` part.

2
packages/webawesome/src/react/tab/index.ts
View File

@@ -15,8 +15,6 @@ const tagName = 'wa-tab';
* @cssproperty --active-tab-color - The color of the active tab's label.
*
* @csspart base - The component's base wrapper.
* @csspart close-button - The close button, an `<wa-icon-button>`.
* @csspart base - The close button's exported `base` part.
*/
const reactWrapper = createComponent({
tagName,

4
packages/webawesome/src/react/tag/index.ts
View File

@@ -14,7 +14,7 @@ const tagName = 'wa-tag';
* @status stable
* @since 2.0
*
* @dependency wa-icon-button
* @dependency wa-button
*
* @slot - The tag's content.
*
@@ -22,7 +22,7 @@ const tagName = 'wa-tag';
*
* @csspart base - The component's base wrapper.
* @csspart content - The tag's content.
* @csspart remove-button - The tag's remove button, an `<wa-icon-button>`.
* @csspart remove-button - The tag's remove button, a `<wa-button>`.
* @csspart remove-button__base - The remove button's exported `base` part.
*/
const reactWrapper = createComponent({

36
packages/webawesome/src/react/viewport-demo/index.ts
View File

@@ -1,36 +0,0 @@
import { createComponent } from '@lit/react';
import * as React from 'react';
import Component from '../../components/viewport-demo/viewport-demo.js';
const tagName = 'wa-viewport-demo';
/**
* @summary Viewport demos can be used to display an iframe as a resizable, zoomable preview.
* @documentation https://backers.webawesome.com/docs/components/viewport-demo
* @status experimental
* @since 3.0
*
* @dependency wa-icon-button
*
* @slot - The iframe (usually an `<iframe>` element).
*
* @csspart frame - The visible frame around the viewport.
*
* @cssproperty --viewport-initial-aspect-ratio - The initial aspect ratio of the viewport, when the `viewport` attribute is used. Defaults to `16 / 9`.
* @cssproperty --viewport-bezel-width - The width of the bezel around the viewport. Defaults to `0.25em`.
* @cssproperty --viewport-background-color - The background color of the viewport. Defaults to `var(--wa-color-surface-default, canvas)`.
* @cssproperty --viewport-resize - The resize behavior of the viewport. Defaults to `both`.
* @cssproperty --viewport-min-width - The minimum width of the viewport. Defaults to `2em`.
* @cssproperty --viewport-max-width - The maximum width of the viewport. Defaults to `100%`. Anything over 100% will be clipped.
* @cssproperty --viewport-padding - The padding of the viewport. Defaults to `var(--wa-space-2xl, 2rem)`.
*
*/
const reactWrapper = createComponent({
tagName,
elementClass: Component,
react: React,
events: {},
displayName: 'WaViewportDemo',
});
export default reactWrapper;