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

Remove BEM-style namespaces on class names (#316)

Browse Source
This commit is contained in:
Lea Verou
2024-12-17 13:46:39 -05:00
committed by GitHub
parent 1a29875940
commit 5a82b7ad99
78 changed files with 557 additions and 588 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/assets/styles/docs.css
View File

@@ -25,11 +25,11 @@ wa-page::part(header) {
border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
}
wa-page::part(drawer__body) {
wa-page::part(body) {
padding-top: 0px;
}
wa-page::part(drawer__header-actions) {
wa-page::part(header-actions) {
align-self: center;
}

26
docs/docs/components/carousel.md
View File

@@ -534,12 +534,12 @@ The carousel has a robust API that makes it possible to extend and customize. Th
</wa-carousel>
<div class="thumbnails">
<div class="thumbnails__scroller">
<img alt="Thumbnail by 1" class="thumbnails__image active" src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?q=10" />
<img alt="Thumbnail by 2" class="thumbnails__image" src="https://images.unsplash.com/photo-1473448912268-2022ce9509d8?q=10" />
<img alt="Thumbnail by 3" class="thumbnails__image" src="https://images.unsplash.com/photo-1499002238440-d264edd596ec?q=10" />
<img alt="Thumbnail by 4" class="thumbnails__image" src="https://images.unsplash.com/photo-1475113548554-5a36f1f523d6?q=10" />
<img alt="Thumbnail by 5" class="thumbnails__image" src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?q=10" />
<div class="scroller">
<img alt="Thumbnail by 1" class="image active" src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?q=10" />
<img alt="Thumbnail by 2" class="image" src="https://images.unsplash.com/photo-1473448912268-2022ce9509d8?q=10" />
<img alt="Thumbnail by 3" class="image" src="https://images.unsplash.com/photo-1499002238440-d264edd596ec?q=10" />
<img alt="Thumbnail by 4" class="image" src="https://images.unsplash.com/photo-1475113548554-5a36f1f523d6?q=10" />
<img alt="Thumbnail by 5" class="image" src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?q=10" />
</div>
</div>
@@ -553,7 +553,7 @@ The carousel has a robust API that makes it possible to extend and customize. Th
justify-content: center;
}
.thumbnails__scroller {
.scroller {
display: flex;
gap: var(--wa-space-s);
overflow-x: auto;
@@ -562,11 +562,11 @@ The carousel has a robust API that makes it possible to extend and customize. Th
scroll-padding: var(--wa-space-s);
}
.thumbnails__scroller::-webkit-scrollbar {
.scroller::-webkit-scrollbar {
display: none;
}
.thumbnails__image {
.image {
width: 64px;
height: 64px;
object-fit: cover;
@@ -578,7 +578,7 @@ The carousel has a robust API that makes it possible to extend and customize. Th
cursor: pointer;
}
.thumbnails__image.active {
.image.active {
opacity: 1;
}
</style>
@@ -586,13 +586,13 @@ The carousel has a robust API that makes it possible to extend and customize. Th
<script>
{
const carousel = document.querySelector('.carousel-thumbnails');
const scroller = document.querySelector('.thumbnails__scroller');
const thumbnails = document.querySelectorAll('.thumbnails__image');
const scroller = document.querySelector('.scroller');
const thumbnails = document.querySelectorAll('.image');
scroller.addEventListener('click', e => {
const target = e.target;
if (target.matches('.thumbnails__image')) {
if (target.matches('.image')) {
const index = [...thumbnails].indexOf(target);
carousel.goToSlide(index);
}

6
src/components/animated-image/animated-image.css
View File

@@ -17,7 +17,7 @@ img[aria-hidden='true'] {
display: none;
}
.animated-image__control-box {
.control-box {
display: flex;
position: absolute;
align-items: center;
@@ -36,11 +36,11 @@ img[aria-hidden='true'] {
transition: opacity var(--wa-transition-normal) var(--wa-transition-easing);
}
:host([play]:hover) .animated-image__control-box {
:host([play]:hover) .control-box {
opacity: 1;
}
:host([play]:not(:hover)) .animated-image__control-box {
:host([play]:not(:hover)) .control-box {
opacity: 0;
}

8
src/components/animated-image/animated-image.ts
View File

@@ -30,7 +30,7 @@ import styles from './animated-image.css';
export default class WaAnimatedImage extends WebAwesomeElement {
static shadowStyle = styles;
@query('.animated-image__animated') animatedImage: HTMLImageElement;
@query('.animated') animatedImage: HTMLImageElement;
@state() frozenFrame: string;
@state() isLoaded = false;
@@ -85,7 +85,7 @@ export default class WaAnimatedImage extends WebAwesomeElement {
return html`
<div class="animated-image">
<img
class="animated-image__animated"
class="animated"
src=${this.src}
alt=${this.alt}
crossorigin="anonymous"
@@ -98,14 +98,14 @@ export default class WaAnimatedImage extends WebAwesomeElement {
${this.isLoaded
? html`
<img
class="animated-image__frozen"
class="frozen"
src=${this.frozenFrame}
alt=${this.alt}
aria-hidden=${this.play ? 'true' : 'false'}
@click=${this.handleClick}
/>
<div part="control-box" class="animated-image__control-box">
<div part="control-box" class="control-box">
<slot name="play-icon">
<wa-icon
name="play"

22
src/components/breadcrumb-item/breadcrumb-item.css
View File

@@ -16,7 +16,7 @@
white-space: nowrap;
}
.breadcrumb-item__label {
.label {
display: inline-block;
font: inherit;
text-decoration: none;
@@ -30,33 +30,33 @@
transition: color var(--wa-transition-normal) var(--wa-transition-easing);
}
:host(:not(:last-of-type)) .breadcrumb-item__label:hover {
:host(:not(:last-of-type)) .label:hover {
color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
}
:host(:not(:last-of-type)) .breadcrumb-item__label:active {
:host(:not(:last-of-type)) .label:active {
color: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
}
.breadcrumb-item__label:focus {
.label:focus {
outline: none;
}
.breadcrumb-item__label:focus-visible {
.label:focus-visible {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
.breadcrumb-item__prefix,
.breadcrumb-item__suffix {
.prefix,
.suffix {
display: none;
flex: 0 0 auto;
display: flex;
align-items: center;
}
.breadcrumb-item__prefix,
.breadcrumb-item__suffix {
.prefix,
.suffix {
display: inline-flex;
color: var(--wa-color-text-quiet);
}
@@ -69,11 +69,11 @@
margin-inline-start: var(--wa-space-s);
}
:host(:last-of-type) .breadcrumb-item__separator {
:host(:last-of-type) .separator {
display: none;
}
.breadcrumb-item__separator {
.separator {
color: var(--wa-color-text-quiet);
display: inline-flex;
align-items: center;

2
src/components/breadcrumb-item/breadcrumb-item.test.ts
View File

@@ -193,7 +193,7 @@ describe('<wa-breadcrumb-item>', () => {
await expect(el).to.be.accessible();
expect(el.shadowRoot!.querySelector('a')).to.be.null;
expect(el.shadowRoot!.querySelector('button')).to.be.null;
expect(el.shadowRoot!.querySelector('.breadcrumb-item__label--dropdown')).not.to.be.null;
expect(el.shadowRoot!.querySelector('.label--dropdown')).not.to.be.null;
});
});
});

12
src/components/breadcrumb-item/breadcrumb-item.ts
View File

@@ -73,7 +73,7 @@ export default class WaBreadcrumbItem extends WebAwesomeElement {
render() {
return html`
<div part="base" class="breadcrumb-item">
<span part="prefix" class="breadcrumb-item__prefix">
<span part="prefix" class="prefix">
<slot name="prefix"></slot>
</span>
@@ -81,7 +81,7 @@ export default class WaBreadcrumbItem extends WebAwesomeElement {
? html`
<a
part="label"
class="breadcrumb-item__label breadcrumb-item__label--link"
class="label label--link"
href="${this.href!}"
target="${ifDefined(this.target ? this.target : undefined)}"
rel=${ifDefined(this.target ? this.rel : undefined)}
@@ -92,24 +92,24 @@ export default class WaBreadcrumbItem extends WebAwesomeElement {
: ''}
${this.renderType === 'button'
? html`
<button part="label" type="button" class="breadcrumb-item__label breadcrumb-item__label--button">
<button part="label" type="button" class="label label--button">
<slot @slotchange=${this.handleSlotChange}></slot>
</button>
`
: ''}
${this.renderType === 'dropdown'
? html`
<div part="label" class="breadcrumb-item__label breadcrumb-item__label--dropdown">
<div part="label" class="label label--dropdown">
<slot @slotchange=${this.handleSlotChange}></slot>
</div>
`
: ''}
<span part="suffix" class="breadcrumb-item__suffix">
<span part="suffix" class="suffix">
<slot name="suffix"></slot>
</span>
<span part="separator" class="breadcrumb-item__separator" aria-hidden="true">
<span part="separator" class="separator" aria-hidden="true">
<slot name="separator"></slot>
</span>
</div>

18
src/components/button-group/button-group.test.ts
View File

@@ -40,14 +40,12 @@ describe('<wa-button-group>', () => {
`);
const allButtons = group.querySelectorAll('wa-button');
const hasGroupClass = Array.from(allButtons).every(button =>
button.classList.contains('wa-button-group__button'),
);
const hasGroupClass = Array.from(allButtons).every(button => button.classList.contains('button'));
expect(hasGroupClass).to.be.true;
expect(allButtons[0]).to.have.class('wa-button-group__button--first');
expect(allButtons[1]).to.have.class('wa-button-group__button--inner');
expect(allButtons[2]).to.have.class('wa-button-group__button--last');
expect(allButtons[0]).to.have.class('button--first');
expect(allButtons[1]).to.have.class('button--inner');
expect(allButtons[2]).to.have.class('button--last');
});
});
@@ -65,11 +63,11 @@ describe('<wa-button-group>', () => {
allButtons[0].dispatchEvent(new FocusEvent('focusin', { bubbles: true }));
await elementUpdated(allButtons[0]);
expect(allButtons[0].classList.contains('wa-button-group__button--focus')).to.be.true;
expect(allButtons[0].classList.contains('button--focus')).to.be.true;
allButtons[0].dispatchEvent(new FocusEvent('focusout', { bubbles: true }));
await elementUpdated(allButtons[0]);
expect(allButtons[0].classList.contains('wa-button-group__button--focus')).not.to.be.true;
expect(allButtons[0].classList.contains('button--focus')).not.to.be.true;
});
});
@@ -87,11 +85,11 @@ describe('<wa-button-group>', () => {
allButtons[0].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
await elementUpdated(allButtons[0]);
expect(allButtons[0].classList.contains('wa-button-group__button--hover')).to.be.true;
expect(allButtons[0].classList.contains('button--hover')).to.be.true;
allButtons[0].dispatchEvent(new MouseEvent('mouseout', { bubbles: true }));
await elementUpdated(allButtons[0]);
expect(allButtons[0].classList.contains('wa-button-group__button--hover')).not.to.be.true;
expect(allButtons[0].classList.contains('button--hover')).not.to.be.true;
});
});
});

18
src/components/button-group/button-group.ts
View File

@@ -41,22 +41,22 @@ export default class WaButtonGroup extends WebAwesomeElement {
private handleFocus(event: Event) {
const button = findButton(event.target as HTMLElement);
button?.classList.add('wa-button-group__button--focus');
button?.classList.add('button--focus');
}
private handleBlur(event: Event) {
const button = findButton(event.target as HTMLElement);
button?.classList.remove('wa-button-group__button--focus');
button?.classList.remove('button--focus');
}
private handleMouseOver(event: Event) {
const button = findButton(event.target as HTMLElement);
button?.classList.add('wa-button-group__button--hover');
button?.classList.add('button--hover');
}
private handleMouseOut(event: Event) {
const button = findButton(event.target as HTMLElement);
button?.classList.remove('wa-button-group__button--hover');
button?.classList.remove('button--hover');
}
private handleSlotChange() {
@@ -71,13 +71,13 @@ export default class WaButtonGroup extends WebAwesomeElement {
const button = findButton(el);
if (button) {
button.classList.add('wa-button-group__button');
button.classList.add('button');
button.classList.toggle('wa-button-group-horizontal', this.orientation === 'horizontal');
button.classList.toggle('wa-button-group-vertical', this.orientation === 'vertical');
button.classList.toggle('wa-button-group__button--first', index === 0);
button.classList.toggle('wa-button-group__button--inner', index > 0 && index < slottedElements.length - 1);
button.classList.toggle('wa-button-group__button--last', index === slottedElements.length - 1);
button.classList.toggle('wa-button-group__button--radio', button.tagName.toLowerCase() === 'wa-radio-button');
button.classList.toggle('button--first', index === 0);
button.classList.toggle('button--inner', index > 0 && index < slottedElements.length - 1);
button.classList.toggle('button--last', index === slottedElements.length - 1);
button.classList.toggle('button--radio', button.tagName.toLowerCase() === 'wa-radio-button');
}
});
}

18
src/components/card/card.css
View File

@@ -23,7 +23,7 @@
font: inherit;
}
.card__image {
.image {
display: flex;
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
@@ -31,38 +31,38 @@
overflow: hidden;
}
.card__image::slotted(img) {
.image::slotted(img) {
display: block;
width: 100%;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
.card:not(.card--has-image) .card__image {
.card:not(.card--has-image) .image {
display: none;
}
.card__header {
.header {
display: block;
border-bottom: inherit;
padding: calc(var(--spacing) / 2) var(--spacing);
}
.card:not(.card--has-header) .card__header {
.card:not(.card--has-header) .header {
display: none;
}
.card:not(.card--has-image) .card__header {
.card:not(.card--has-image) .header {
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
}
.card__body {
.body {
display: block;
padding: var(--spacing);
}
.card--has-footer .card__footer {
.card--has-footer .footer {
display: block;
border-top: inherit;
border-bottom-left-radius: var(--border-radius);
@@ -70,6 +70,6 @@
padding: var(--spacing);
}
.card:not(.card--has-footer) .card__footer {
.card:not(.card--has-footer) .footer {
display: none;
}

8
src/components/card/card.ts
View File

@@ -53,10 +53,10 @@ export default class WaCard extends WebAwesomeElement {
'card--has-header': this.withHeader,
})}
>
<slot name="image" part="image" class="card__image"></slot>
<slot name="header" part="header" class="card__header"></slot>
<slot part="body" class="card__body"></slot>
<slot name="footer" part="footer" class="card__footer"></slot>
<slot name="image" part="image" class="image"></slot>
<slot name="header" part="header" class="header"></slot>
<slot part="body" class="body"></slot>
<slot name="footer" part="footer" class="footer"></slot>
</div>
`;
}

38
src/components/carousel/carousel.css
View File

@@ -23,7 +23,7 @@
position: relative;
}
.carousel__pagination {
.pagination {
grid-area: pagination;
display: flex;
flex-wrap: wrap;
@@ -31,7 +31,7 @@
gap: var(--wa-space-s);
}
.carousel__slides {
.slides {
grid-area: slides;
display: grid;
@@ -49,12 +49,12 @@
}
@media (prefers-reduced-motion) {
:where(.carousel__slides) {
:where(.slides) {
scroll-behavior: auto;
}
}
.carousel__slides--horizontal {
.slides--horizontal {
grid-auto-flow: column;
grid-auto-columns: var(--slide-size);
grid-auto-rows: 100%;
@@ -65,7 +65,7 @@
overflow-y: hidden;
}
.carousel__slides--vertical {
.slides--vertical {
grid-auto-flow: row;
grid-auto-columns: 100%;
grid-auto-rows: var(--slide-size);
@@ -76,8 +76,8 @@
overflow-x: hidden;
}
.carousel__slides--dragging,
.carousel__slides--dropping {
.slides--dragging,
.slides--dropping {
scroll-snap-type: unset;
}
@@ -85,17 +85,17 @@
height: 100%;
}
.carousel__slides::-webkit-scrollbar {
.slides::-webkit-scrollbar {
display: none;
}
.carousel__navigation {
.navigation {
grid-area: navigation;
display: contents;
font-size: var(--wa-font-size-l);
}
.carousel__navigation-button {
.navigation-button {
flex: 0 0 auto;
display: flex;
align-items: center;
@@ -110,26 +110,26 @@
appearance: none;
}
.carousel__navigation-button-disabled {
.navigation-button-disabled {
opacity: 0.5;
cursor: not-allowed;
}
.carousel__navigation-button-disabled::part(base) {
.navigation-button-disabled::part(base) {
pointer-events: none;
}
.carousel__navigation-button-previous {
.navigation-button-previous {
grid-column: 1;
grid-row: 1;
}
.carousel__navigation-button-next {
.navigation-button-next {
grid-column: 3;
grid-row: 1;
}
.carousel__pagination-item {
.pagination-item {
display: block;
cursor: pointer;
background: none;
@@ -143,15 +143,15 @@
transition: transform var(--wa-transition-slow);
}
.carousel__pagination-item--active {
.pagination-item--active {
background-color: var(--pagination-color-active);
transform: scale(1.25);
}
/* Focus styles */
.carousel__slides:focus-visible,
.carousel__navigation-button:focus-visible,
.carousel__pagination-item:focus-visible {
.slides:focus-visible,
.navigation-button:focus-visible,
.pagination-item:focus-visible {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}

44
src/components/carousel/carousel.test.ts
View File

@@ -54,8 +54,8 @@ describe('<wa-carousel>', () => {
expect(el).to.exist;
expect(el).to.have.attribute('role', 'region');
expect(el).to.have.attribute('aria-label', 'Carousel');
expect(el.shadowRoot!.querySelector('.carousel__navigation')).not.to.exist;
expect(el.shadowRoot!.querySelector('.carousel__pagination')).not.to.exist;
expect(el.shadowRoot!.querySelector('.navigation')).not.to.exist;
expect(el.shadowRoot!.querySelector('.pagination')).not.to.exist;
});
describe('when `autoplay` attribute is provided', () => {
@@ -194,8 +194,8 @@ describe('<wa-carousel>', () => {
// Assert
expect(el).to.exist;
expect(el.shadowRoot!.querySelector('.carousel__navigation')).not.to.exist;
expect(el.shadowRoot!.querySelector('.carousel__pagination')).to.exist;
expect(el.shadowRoot!.querySelector('.navigation')).not.to.exist;
expect(el.shadowRoot!.querySelector('.pagination')).to.exist;
});
describe('and user clicks on a pagination button', () => {
@@ -212,7 +212,7 @@ describe('<wa-carousel>', () => {
await el.updateComplete;
// Act
const paginationItem = el.shadowRoot!.querySelectorAll('.carousel__pagination-item')[2] as HTMLElement;
const paginationItem = el.shadowRoot!.querySelectorAll('.pagination-item')[2] as HTMLElement;
await clickOnElement(paginationItem);
expect(el.goToSlide).to.have.been.calledWith(2);
@@ -233,8 +233,8 @@ describe('<wa-carousel>', () => {
// Assert
expect(el).to.exist;
expect(el.shadowRoot!.querySelector('.carousel__navigation')).to.exist;
expect(el.shadowRoot!.querySelector('.carousel__pagination')).not.to.exist;
expect(el.shadowRoot!.querySelector('.navigation')).to.exist;
expect(el.shadowRoot!.querySelector('.pagination')).not.to.exist;
});
});
@@ -282,7 +282,7 @@ describe('<wa-carousel>', () => {
`);
// Assert
const paginationItems = el.shadowRoot!.querySelectorAll('.carousel__pagination-item');
const paginationItems = el.shadowRoot!.querySelectorAll('.pagination-item');
expect(paginationItems.length).to.equal(expected);
});
},
@@ -330,7 +330,7 @@ describe('<wa-carousel>', () => {
</wa-carousel>
`);
const expectedSlides = el.querySelectorAll('.expected');
const nextButton: HTMLElement = el.shadowRoot!.querySelector('.carousel__navigation-button-next')!;
const nextButton: HTMLElement = el.shadowRoot!.querySelector('.navigation-button-next')!;
// Act
await clickOnElement(nextButton);
@@ -359,7 +359,7 @@ describe('<wa-carousel>', () => {
</wa-carousel>
`);
const expectedSlides = el.querySelectorAll('.expected');
const nextButton: HTMLElement = el.shadowRoot!.querySelector('.carousel__navigation-button-next')!;
const nextButton: HTMLElement = el.shadowRoot!.querySelector('.navigation-button-next')!;
// Act
await clickOnElement(nextButton);
@@ -506,7 +506,7 @@ describe('<wa-carousel>', () => {
<wa-carousel-item>Node 3</wa-carousel-item>
</wa-carousel>
`);
const nextButton: HTMLElement = el.shadowRoot!.querySelector('.carousel__navigation-button-next')!;
const nextButton: HTMLElement = el.shadowRoot!.querySelector('.navigation-button-next')!;
sandbox.stub(el, 'next');
await el.updateComplete;
@@ -529,7 +529,7 @@ describe('<wa-carousel>', () => {
<wa-carousel-item>Node 3</wa-carousel-item>
</wa-carousel>
`);
const nextButton: HTMLElement = el.shadowRoot!.querySelector('.carousel__navigation-button-next')!;
const nextButton: HTMLElement = el.shadowRoot!.querySelector('.navigation-button-next')!;
sandbox.stub(el, 'next');
el.goToSlide(2, 'auto');
@@ -556,7 +556,7 @@ describe('<wa-carousel>', () => {
<wa-carousel-item>Node 3</wa-carousel-item>
</wa-carousel>
`);
const nextButton: HTMLElement = el.shadowRoot!.querySelector('.carousel__navigation-button-next')!;
const nextButton: HTMLElement = el.shadowRoot!.querySelector('.navigation-button-next')!;
el.goToSlide(2, 'auto');
await oneEvent(el.scrollContainer, 'scrollend');
@@ -597,7 +597,7 @@ describe('<wa-carousel>', () => {
await oneEvent(el.scrollContainer, 'scrollend');
await el.updateComplete;
const previousButton: HTMLElement = el.shadowRoot!.querySelector('.carousel__navigation-button-previous')!;
const previousButton: HTMLElement = el.shadowRoot!.querySelector('.navigation-button-previous')!;
sandbox.stub(el, 'previous');
await el.updateComplete;
@@ -621,9 +621,7 @@ describe('<wa-carousel>', () => {
</wa-carousel>
`);
const previousButton: HTMLElement = el.shadowRoot!.querySelector(
'.carousel__navigation-button-previous',
)!;
const previousButton: HTMLElement = el.shadowRoot!.querySelector('.navigation-button-previous')!;
sandbox.stub(el, 'previous');
await el.updateComplete;
@@ -647,9 +645,7 @@ describe('<wa-carousel>', () => {
</wa-carousel>
`);
const previousButton: HTMLElement = el.shadowRoot!.querySelector(
'.carousel__navigation-button-previous',
)!;
const previousButton: HTMLElement = el.shadowRoot!.querySelector('.navigation-button-previous')!;
await el.updateComplete;
// Act
@@ -769,8 +765,8 @@ describe('<wa-carousel>', () => {
<wa-carousel-item>Node 3</wa-carousel-item>
</wa-carousel>
`);
const pagination = el.shadowRoot!.querySelector('.carousel__pagination')!;
const navigation = el.shadowRoot!.querySelector('.carousel__navigation')!;
const pagination = el.shadowRoot!.querySelector('.pagination')!;
const navigation = el.shadowRoot!.querySelector('.navigation')!;
await el.updateComplete;
// Assert
@@ -779,13 +775,13 @@ describe('<wa-carousel>', () => {
expect(pagination).to.have.attribute('role', 'tablist');
expect(pagination).to.have.attribute('aria-controls', el.scrollContainer.id);
for (const paginationItem of pagination.querySelectorAll('.carousel__pagination-item')) {
for (const paginationItem of pagination.querySelectorAll('.pagination-item')) {
expect(paginationItem).to.have.attribute('role', 'tab');
expect(paginationItem).to.have.attribute('aria-selected');
expect(paginationItem).to.have.attribute('aria-label');
}
for (const navigationItem of navigation.querySelectorAll('.carousel__navigation-item')) {
for (const navigationItem of navigation.querySelectorAll('.navigation-item')) {
expect(navigationItem).to.have.attribute('aria-controls', el.scrollContainer.id);
expect(navigationItem).to.have.attribute('aria-disabled');
expect(navigationItem).to.have.attribute('aria-label');

32
src/components/carousel/carousel.ts
View File

@@ -87,8 +87,8 @@ export default class WaCarousel extends WebAwesomeElement {
/** When set, it is possible to scroll through the slides by dragging them with the mouse. */
@property({ type: Boolean, reflect: true, attribute: 'mouse-dragging' }) mouseDragging = false;
@query('.carousel__slides') scrollContainer: HTMLElement;
@query('.carousel__pagination') paginationContainer: HTMLElement;
@query('.slides') scrollContainer: HTMLElement;
@query('.pagination') paginationContainer: HTMLElement;
// The index of the active slide
@state() activeSlide = 0;
@@ -574,10 +574,10 @@ export default class WaCarousel extends WebAwesomeElement {
id="scroll-container"
part="scroll-container"
class="${classMap({
carousel__slides: true,
'carousel__slides--horizontal': this.orientation === 'horizontal',
'carousel__slides--vertical': this.orientation === 'vertical',
'carousel__slides--dragging': this.dragging,
slides: true,
'slides--horizontal': this.orientation === 'horizontal',
'slides--vertical': this.orientation === 'vertical',
'slides--dragging': this.dragging,
})}"
style="--slides-per-page: ${this.slidesPerPage};"
aria-busy="${scrolling ? 'true' : 'false'}"
@@ -594,13 +594,13 @@ export default class WaCarousel extends WebAwesomeElement {
${this.navigation
? html`
<div part="navigation" class="carousel__navigation">
<div part="navigation" class="navigation">
<button
part="navigation-button navigation-button-previous"
class="${classMap({
'carousel__navigation-button': true,
'carousel__navigation-button-previous': true,
'carousel__navigation-button-disabled': !prevEnabled,
'navigation-button': true,
'navigation-button-previous': true,
'navigation-button-disabled': !prevEnabled,
})}"
aria-label="${this.localize.term('previousSlide')}"
aria-controls="scroll-container"
@@ -615,9 +615,9 @@ export default class WaCarousel extends WebAwesomeElement {
<button
part="navigation-button navigation-button-next"
class=${classMap({
'carousel__navigation-button': true,
'carousel__navigation-button-next': true,
'carousel__navigation-button-disabled': !nextEnabled,
'navigation-button': true,
'navigation-button-next': true,
'navigation-button-disabled': !nextEnabled,
})}
aria-label="${this.localize.term('nextSlide')}"
aria-controls="scroll-container"
@@ -633,15 +633,15 @@ export default class WaCarousel extends WebAwesomeElement {
: ''}
${this.pagination
? html`
<div part="pagination" role="tablist" class="carousel__pagination" aria-controls="scroll-container">
<div part="pagination" role="tablist" class="pagination" aria-controls="scroll-container">
${map(range(pagesCount), index => {
const isActive = index === currentPage;
return html`
<button
part="pagination-item ${isActive ? 'pagination-item--active' : ''}"
class="${classMap({
'carousel__pagination-item': true,
'carousel__pagination-item--active': isActive,
'pagination-item': true,
'pagination-item--active': isActive,
})}"
role="tab"
aria-selected="${isActive ? 'true' : 'false'}"

2
src/components/checkbox/checkbox.css
View File

@@ -31,7 +31,7 @@
}
}
.checkbox__control {
.control {
flex: 0 0 auto;
position: relative;
display: flex;

2
src/components/checkbox/checkbox.test.ts
View File

@@ -111,7 +111,7 @@ describe('<wa-checkbox>', () => {
//
const el = await fixture<WaCheckbox>(html` <wa-checkbox></wa-checkbox> `);
const label = el.shadowRoot!.querySelector('.checkbox')!;
const input = el.shadowRoot!.querySelector('.checkbox__input')!;
const input = el.shadowRoot!.querySelector('.input')!;
const labelPosition = getComputedStyle(label).position;
const inputPosition = getComputedStyle(input).position;

4
src/components/checkbox/checkbox.ts
View File

@@ -239,9 +239,9 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
})}
>
<label part="base">
<span class="checkbox__control">
<span class="control">
<input
class="checkbox__input"
class="input"
type="checkbox"
title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}
name=${this.name}

86
src/components/color-picker/color-picker.css
View File

@@ -29,7 +29,7 @@
-webkit-user-select: none;
}
.color-picker__grid {
.grid {
position: relative;
height: var(--grid-height);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%),
@@ -40,7 +40,7 @@
forced-color-adjust: none;
}
.color-picker__grid-handle {
.grid-handle {
position: absolute;
width: var(--grid-handle-size);
height: var(--grid-handle-size);
@@ -52,26 +52,26 @@
transition: scale var(--wa-transition-normal) var(--wa-transition-easing);
}
.color-picker__grid-handle--dragging {
.grid-handle--dragging {
cursor: none;
scale: 1.5;
}
.color-picker__grid-handle:focus-visible {
.grid-handle:focus-visible {
outline: var(--wa-focus-ring);
}
.color-picker__controls {
.controls {
padding: var(--spacing);
display: flex;
align-items: center;
}
.color-picker__sliders {
.sliders {
flex: 1 1 auto;
}
.color-picker__slider {
.slider {
position: relative;
height: var(--slider-height);
border-radius: var(--wa-border-radius-xs);
@@ -79,11 +79,11 @@
forced-color-adjust: none;
}
.color-picker__slider:not(:last-of-type) {
.slider:not(:last-of-type) {
margin-bottom: var(--wa-space-s);
}
.color-picker__slider-handle {
.slider-handle {
position: absolute;
top: calc(50% - var(--slider-handle-size) / 2);
width: var(--slider-handle-size);
@@ -94,11 +94,11 @@
margin-left: calc(var(--slider-handle-size) / -2);
}
.color-picker__slider-handle:focus-visible {
.slider-handle:focus-visible {
outline: var(--wa-focus-ring);
}
.color-picker__hue {
.hue {
background-image: linear-gradient(
to right,
rgb(255, 0, 0) 0%,
@@ -111,7 +111,7 @@
);
}
.color-picker__alpha .color-picker__alpha-gradient {
.alpha .alpha-gradient {
position: absolute;
top: 0;
left: 0;
@@ -120,7 +120,7 @@
border-radius: inherit;
}
.color-picker__preview {
.preview {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
@@ -136,7 +136,7 @@
forced-color-adjust: none;
}
.color-picker__preview:before {
.preview:before {
content: '';
position: absolute;
top: 0;
@@ -150,12 +150,12 @@
background-color: var(--preview-color);
}
.color-picker__preview:focus-visible {
.preview:focus-visible {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
.color-picker__preview-color {
.preview-color {
position: absolute;
top: 0;
left: 0;
@@ -164,7 +164,7 @@
border: solid 0.0625rem rgba(0, 0, 0, 0.125);
}
.color-picker__preview-color--copied {
.preview-color--copied {
animation: pulse 850ms;
}
@@ -180,26 +180,26 @@
}
}
.color-picker__user-input {
.user-input {
display: flex;
padding: 0 var(--spacing) var(--spacing) var(--spacing);
}
.color-picker__user-input wa-input {
.user-input wa-input {
min-width: 0; /* fix input width in Safari */
flex: 1 1 auto;
}
.color-picker__user-input wa-button-group {
.user-input wa-button-group {
margin-inline-start: var(--spacing);
}
.color-picker__user-input wa-button:first-of-type {
.user-input wa-button:first-of-type {
min-width: 3rem;
max-width: 3rem;
}
.color-picker__swatches {
.swatches {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(var(--swatch-size), 100%), 1fr));
grid-gap: var(--wa-space-xs);
@@ -210,14 +210,14 @@
forced-color-adjust: none;
}
.color-picker__swatch {
.swatch {
position: relative;
aspect-ratio: 1 / 1;
width: 100%;
border-radius: var(--swatch-border-radius);
}
.color-picker__swatch .color-picker__swatch-color {
.swatch .swatch-color {
position: absolute;
top: 0;
left: 0;
@@ -228,12 +228,12 @@
cursor: pointer;
}
.color-picker__swatch:focus-visible {
.swatch:focus-visible {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
.color-picker__transparent-bg {
.transparent-bg {
background-image: linear-gradient(45deg, var(--wa-color-neutral-fill-normal) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, var(--wa-color-neutral-fill-normal) 75%),
linear-gradient(45deg, transparent 75%, var(--wa-color-neutral-fill-normal) 75%),
@@ -251,13 +251,13 @@
cursor: not-allowed;
}
.color-picker--disabled .color-picker__grid,
.color-picker--disabled .color-picker__grid-handle,
.color-picker--disabled .color-picker__slider,
.color-picker--disabled .color-picker__slider-handle,
.color-picker--disabled .color-picker__preview,
.color-picker--disabled .color-picker__swatch,
.color-picker--disabled .color-picker__swatch-color {
.color-picker--disabled .grid,
.color-picker--disabled .grid-handle,
.color-picker--disabled .slider,
.color-picker--disabled .slider-handle,
.color-picker--disabled .preview,
.color-picker--disabled .swatch,
.color-picker--disabled .swatch-color {
pointer-events: none;
}
@@ -277,7 +277,7 @@
overflow: visible;
}
.color-dropdown__trigger {
.trigger {
display: block;
position: relative;
background-color: transparent;
@@ -286,25 +286,25 @@
forced-color-adjust: none;
}
.color-dropdown__trigger.color-dropdown__trigger--small {
.trigger.trigger--small {
width: var(--wa-form-control-height-s);
height: var(--wa-form-control-height-s);
border-radius: var(--trigger-border-radius);
}
.color-dropdown__trigger.color-dropdown__trigger--medium {
.trigger.trigger--medium {
width: var(--wa-form-control-height-m);
height: var(--wa-form-control-height-m);
border-radius: var(--trigger-border-radius);
}
.color-dropdown__trigger.color-dropdown__trigger--large {
.trigger.trigger--large {
width: var(--wa-form-control-height-l);
height: var(--wa-form-control-height-l);
border-radius: var(--trigger-border-radius);
}
.color-dropdown__trigger:before {
.trigger:before {
content: '';
position: absolute;
top: 0;
@@ -318,25 +318,25 @@
inset 0 0 0 0.25rem var(--wa-color-surface-default);
}
.color-dropdown__trigger--empty:before {
.trigger--empty:before {
background-color: transparent;
}
.color-dropdown__trigger:focus-visible {
.trigger:focus-visible {
outline: none;
}
.color-dropdown__trigger:focus-visible:not(.color-dropdown__trigger--disabled) {
.trigger:focus-visible:not(.trigger--disabled) {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
:host(:disabled) :is(.color-dropdown__label, .color-dropdown__trigger) {
:host(:disabled) :is(.label, .trigger) {
opacity: 0.5;
cursor: not-allowed;
}
.form-control.form-control--has-label .form-control__label {
.form-control.form-control--has-label .label {
cursor: pointer;
display: inline-block;
}

71
src/components/color-picker/color-picker.ts
View File

@@ -257,9 +257,9 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
this.previewButton.focus();
// Show copied animation
this.previewButton.classList.add('color-picker__preview-color--copied');
this.previewButton.classList.add('preview-color--copied');
this.previewButton.addEventListener('animationend', () => {
this.previewButton.classList.remove('color-picker__preview-color--copied');
this.previewButton.classList.remove('preview-color--copied');
});
}
@@ -283,8 +283,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
}
private handleAlphaDrag(event: PointerEvent) {
const container = this.shadowRoot!.querySelector<HTMLElement>('.color-picker__slider.color-picker__alpha')!;
const handle = container.querySelector<HTMLElement>('.color-picker__slider-handle')!;
const container = this.shadowRoot!.querySelector<HTMLElement>('.slider.alpha')!;
const handle = container.querySelector<HTMLElement>('.slider-handle')!;
const { width } = container.getBoundingClientRect();
let initialValue = this.value;
let currentValue = this.value;
@@ -313,8 +313,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
}
private handleHueDrag(event: PointerEvent) {
const container = this.shadowRoot!.querySelector<HTMLElement>('.color-picker__slider.color-picker__hue')!;
const handle = container.querySelector<HTMLElement>('.color-picker__slider-handle')!;
const container = this.shadowRoot!.querySelector<HTMLElement>('.slider.hue')!;
const handle = container.querySelector<HTMLElement>('.slider-handle')!;
const { width } = container.getBoundingClientRect();
let initialValue = this.value;
let currentValue = this.value;
@@ -343,8 +343,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
}
private handleGridDrag(event: PointerEvent) {
const grid = this.shadowRoot!.querySelector<HTMLElement>('.color-picker__grid')!;
const handle = grid.querySelector<HTMLElement>('.color-picker__grid-handle')!;
const grid = this.shadowRoot!.querySelector<HTMLElement>('.grid')!;
const handle = grid.querySelector<HTMLElement>('.grid-handle')!;
const { width, height } = grid.getBoundingClientRect();
let initialValue = this.value;
let currentValue = this.value;
@@ -665,7 +665,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
}
private handleAfterHide() {
this.previewButton.classList.remove('color-picker__preview-color--copied');
this.previewButton.classList.remove('preview-color--copied');
// Update validity so we get a new anchor.
this.updateValidity();
}
@@ -894,7 +894,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
>
<div
part="grid"
class="color-picker__grid"
class="grid"
style=${styleMap({ backgroundColor: this.getHexString(this.hue, 100, 100) })}
@pointerdown=${this.handleGridDrag}
@touchmove=${this.handleTouchMove}
@@ -902,8 +902,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
<span
part="grid-handle"
class=${classMap({
'color-picker__grid-handle': true,
'color-picker__grid-handle--dragging': this.isDraggingGridHandle,
'grid-handle': true,
'grid-handle--dragging': this.isDraggingGridHandle,
})}
style=${styleMap({
top: `${gridHandleY}%`,
@@ -917,17 +917,17 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
></span>
</div>
<div class="color-picker__controls">
<div class="color-picker__sliders">
<div class="controls">
<div class="sliders">
<div
part="slider hue-slider"
class="color-picker__hue color-picker__slider"
class="hue slider"
@pointerdown=${this.handleHueDrag}
@touchmove=${this.handleTouchMove}
>
<span
part="slider-handle hue-slider-handle"
class="color-picker__slider-handle"
class="slider-handle"
style=${styleMap({
left: `${this.hue === 0 ? 0 : 100 / (360 / this.hue)}%`,
backgroundColor: this.getHexString(this.hue, 100, 100),
@@ -947,12 +947,12 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
? html`
<div
part="slider opacity-slider"
class="color-picker__alpha color-picker__slider color-picker__transparent-bg"
class="alpha slider transparent-bg"
@pointerdown="${this.handleAlphaDrag}"
@touchmove=${this.handleTouchMove}
>
<div
class="color-picker__alpha-gradient"
class="alpha-gradient"
style=${styleMap({
backgroundImage: `linear-gradient(
to right,
@@ -963,7 +963,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
></div>
<span
part="slider-handle opacity-slider-handle"
class="color-picker__slider-handle"
class="slider-handle"
style=${styleMap({
left: `${this.alpha}%`,
backgroundColor: this.getHexString(this.hue, this.saturation, this.brightness, this.alpha),
@@ -985,7 +985,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
<button
type="button"
part="preview"
class="color-picker__preview color-picker__transparent-bg"
class="preview transparent-bg"
aria-label=${this.localize.term('copy')}
style=${styleMap({
'--preview-color': this.getHexString(this.hue, this.saturation, this.brightness, this.alpha),
@@ -994,7 +994,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
></button>
</div>
<div class="color-picker__user-input" aria-live="polite">
<div class="user-input" aria-live="polite">
<wa-input
part="input"
type="text"
@@ -1067,7 +1067,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
${swatches.length > 0
? html`
<div part="swatches" class="color-picker__swatches">
<div part="swatches" class="swatches">
${swatches.map(swatch => {
const parsedColor = this.parseColor(swatch);
@@ -1079,7 +1079,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
return html`
<div
part="swatch"
class="color-picker__swatch color-picker__transparent-bg"
class="swatch transparent-bg"
tabindex=${ifDefined(this.disabled ? undefined : '0')}
role="button"
aria-label=${swatch}
@@ -1087,10 +1087,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
@keydown=${(event: KeyboardEvent) =>
!this.disabled && event.key === 'Enter' && this.setColor(parsedColor.hexa)}
>
<div
class="color-picker__swatch-color"
style=${styleMap({ backgroundColor: parsedColor.hexa })}
></div>
<div class="swatch-color" style=${styleMap({ backgroundColor: parsedColor.hexa })}></div>
</div>
`;
})}
@@ -1113,7 +1110,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
>
<div
class=${classMap({
'color-dropdown__container': true,
container: true,
'form-control': true,
'form-control--small': this.size === 'small',
'form-control--medium': this.size === 'medium',
@@ -1141,7 +1138,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
}
}}
>
<div part="form-control-label" class="form-control__label" id="form-control-label">
<div part="form-control-label" class="label" id="form-control-label">
<slot name="label">${this.label}</slot>
</div>
@@ -1149,14 +1146,14 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
id="trigger"
part="trigger form-control-input"
class=${classMap({
'color-dropdown__trigger': true,
'color-dropdown__trigger--disabled': this.disabled,
'color-dropdown__trigger--small': this.size === 'small',
'color-dropdown__trigger--medium': this.size === 'medium',
'color-dropdown__trigger--large': this.size === 'large',
'color-dropdown__trigger--empty': this.isEmpty,
'color-dropdown__trigger--focused': this.hasFocus,
'color-picker__transparent-bg': true,
trigger: true,
'trigger--disabled': this.disabled,
'trigger--small': this.size === 'small',
'trigger--medium': this.size === 'medium',
'trigger--large': this.size === 'large',
'trigger--empty': this.isEmpty,
'trigger--focused': this.hasFocus,
'transparent-bg': true,
'form-control-input': true,
})}
style=${styleMap({

12
src/components/copy-button/copy-button.css
View File

@@ -8,7 +8,7 @@
color: var(--wa-color-text-quiet);
}
.copy-button__button {
.button {
flex: 0 0 auto;
display: flex;
align-items: center;
@@ -22,13 +22,13 @@
transition: color var(--wa-transition-fast) var(--wa-transition-easing);
}
.copy-button__button:hover:not([disabled]),
.copy-button__button:focus-visible:not([disabled]) {
.button:hover:not([disabled]),
.button:focus-visible:not([disabled]) {
background-color: var(--background-color-hover);
color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
}
.copy-button__button:active:not([disabled]) {
.button:active:not([disabled]) {
color: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
}
@@ -40,12 +40,12 @@ slot[name='error-icon'] {
color: var(--error-color);
}
.copy-button__button:focus-visible {
.button:focus-visible {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
.copy-button__button[disabled] {
.button[disabled] {
opacity: 0.5;
cursor: not-allowed !important;
}

2
src/components/copy-button/copy-button.ts
View File

@@ -193,7 +193,7 @@ export default class WaCopyButton extends WebAwesomeElement {
render() {
return html`
<button
class="copy-button__button"
class="button"
part="button"
type="button"
id="copy-button"

16
src/components/dialog/dialog.css
View File

@@ -68,7 +68,7 @@
opacity: 1;
}
.dialog__header {
.header {
flex: 0 0 auto;
display: flex;
flex-wrap: nowrap;
@@ -76,7 +76,7 @@
padding-block-end: 0;
}
.dialog__title {
.title {
align-self: center;
flex: 1 1 auto;
font-family: inherit;
@@ -86,7 +86,7 @@
margin: 0;
}
.dialog__header-actions {
.header-actions {
align-self: start;
display: flex;
flex-shrink: 0;
@@ -96,15 +96,15 @@
padding-inline-start: var(--spacing);
}
.dialog__header-actions wa-icon-button,
.dialog__header-actions ::slotted(wa-icon-button) {
.header-actions wa-icon-button,
.header-actions ::slotted(wa-icon-button) {
flex: 0 0 auto;
display: flex;
align-items: center;
font-size: var(--wa-font-size-m);
}
.dialog__body {
.body {
flex: 1 1 auto;
display: block;
padding: var(--spacing);
@@ -112,7 +112,7 @@
-webkit-overflow-scrolling: touch;
}
.dialog__footer {
.footer {
flex: 0 0 auto;
display: flex;
flex-wrap: wrap;
@@ -122,7 +122,7 @@
padding-block-start: 0;
}
.dialog__footer ::slotted(wa-button:not(:first-of-type)) {
.footer ::slotted(wa-button:not(:first-of-type)) {
margin-inline-start: var(--wa-spacing-xs);
}

12
src/components/dialog/dialog.ts
View File

@@ -236,17 +236,17 @@ export default class WaDialog extends WebAwesomeElement {
>
${this.withHeader
? html`
<header part="header" class="dialog__header">
<h2 part="title" class="dialog__title" id="title">
<header part="header" class="header">
<h2 part="title" class="title" id="title">
<!-- If there's no label, use an invisible character to prevent the header from collapsing -->
<slot name="label"> ${this.label.length > 0 ? this.label : String.fromCharCode(65279)} </slot>
</h2>
<div part="header-actions" class="dialog__header-actions">
<div part="header-actions" class="header-actions">
<slot name="header-actions"></slot>
<wa-icon-button
part="close-button"
exportparts="base:close-button__base"
class="dialog__close"
class="close"
name="xmark"
label=${this.localize.term('close')}
library="system"
@@ -258,11 +258,11 @@ export default class WaDialog extends WebAwesomeElement {
`
: ''}
<div part="body" class="dialog__body"><slot></slot></div>
<div part="body" class="body"><slot></slot></div>
${this.withFooter
? html`
<footer part="footer" class="dialog__footer">
<footer part="footer" class="footer">
<slot name="footer"></slot>
</footer>
`

16
src/components/drawer/drawer.css
View File

@@ -133,14 +133,14 @@
height: 100%;
}
.drawer__header {
.header {
display: flex;
flex-wrap: nowrap;
padding: var(--spacing);
padding-block-end: 0;
}
.drawer__title {
.title {
align-self: center;
flex: 1 1 auto;
font: inherit;
@@ -150,7 +150,7 @@
margin: 0;
}
.drawer__header-actions {
.header-actions {
align-self: start;
display: flex;
flex-shrink: 0;
@@ -160,15 +160,15 @@
padding-inline-start: var(--spacing);
}
.drawer__header-actions wa-icon-button,
.drawer__header-actions ::slotted(wa-icon-button) {
.header-actions wa-icon-button,
.header-actions ::slotted(wa-icon-button) {
flex: 0 0 auto;
display: flex;
align-items: center;
font-size: var(--wa-font-size-m);
}
.drawer__body {
.body {
flex: 1 1 auto;
display: block;
padding: var(--spacing);
@@ -176,7 +176,7 @@
-webkit-overflow-scrolling: touch;
}
.drawer__footer {
.footer {
display: flex;
flex-wrap: wrap;
gap: var(--wa-space-xs);
@@ -185,7 +185,7 @@
padding-block-start: 0;
}
.drawer__footer ::slotted(wa-button:not(:last-of-type)) {
.footer ::slotted(wa-button:not(:last-of-type)) {
margin-inline-end: var(--wa-spacing-xs);
}

12
src/components/drawer/drawer.ts
View File

@@ -253,17 +253,17 @@ export default class WaDrawer extends WebAwesomeElement {
>
${this.withHeader
? html`
<header part="header" class="drawer__header">
<h2 part="title" class="drawer__title" id="title">
<header part="header" class="header">
<h2 part="title" class="title" id="title">
<!-- If there's no label, use an invisible character to prevent the header from collapsing -->
<slot name="label"> ${this.label.length > 0 ? this.label : String.fromCharCode(65279)} </slot>
</h2>
<div part="header-actions" class="drawer__header-actions">
<div part="header-actions" class="header-actions">
<slot name="header-actions"></slot>
<wa-icon-button
part="close-button"
exportparts="base:close-button__base"
class="drawer__close"
class="close"
name="xmark"
label=${this.localize.term('close')}
library="system"
@@ -275,11 +275,11 @@ export default class WaDrawer extends WebAwesomeElement {
`
: ''}
<div part="body" class="drawer__body"><slot></slot></div>
<div part="body" class="body"><slot></slot></div>
${this.withFooter
? html`
<footer part="footer" class="drawer__footer">
<footer part="footer" class="footer">
<slot name="footer"></slot>
</footer>
`

6
src/components/dropdown/dropdown.css
View File

@@ -24,18 +24,18 @@
transform-origin: left;
}
.dropdown__trigger {
.trigger {
display: block;
}
.dropdown__panel {
.panel {
font: inherit;
box-shadow: var(--box-shadow);
border-radius: var(--wa-border-radius-s);
pointer-events: none;
}
.dropdown--open .dropdown__panel {
.dropdown--open .panel {
display: block;
pointer-events: all;
}

8
src/components/dropdown/dropdown.ts
View File

@@ -46,8 +46,8 @@ export default class WaDropdown extends WebAwesomeElement {
static shadowStyle = styles;
@query('.dropdown') popup: WaPopup;
@query('.dropdown__trigger') trigger: HTMLSlotElement;
@query('.dropdown__panel') panel: HTMLSlotElement;
@query('.trigger') trigger: HTMLSlotElement;
@query('.panel') panel: HTMLSlotElement;
private closeWatcher: CloseWatcher | null;
@@ -431,7 +431,7 @@ export default class WaDropdown extends WebAwesomeElement {
name="trigger"
slot="anchor"
part="trigger"
class="dropdown__trigger"
class="trigger"
@click=${this.handleTriggerClick}
@keydown=${this.handleTriggerKeyDown}
@keyup=${this.handleTriggerKeyUp}
@@ -439,7 +439,7 @@ export default class WaDropdown extends WebAwesomeElement {
></slot>
<div aria-hidden=${this.open ? 'false' : 'true'} aria-labelledby="dropdown">
<slot part="panel" class="dropdown__panel"></slot>
<slot part="panel" class="panel"></slot>
</div>
</wa-popup>
`;

2
src/components/icon-button/icon-button.css
View File

@@ -44,6 +44,6 @@
outline-offset: var(--wa-focus-ring-offset);
}
.icon-button__icon {
.icon {
pointer-events: none;
}

2
src/components/icon-button/icon-button.ts
View File

@@ -133,7 +133,7 @@ export default class WaIconButton extends WebAwesomeFormAssociatedElement {
@click=${this.handleClick}
>
<wa-icon
class="icon-button__icon"
class="icon"
name=${ifDefined(this.name)}
family=${ifDefined(this.family)}
variant=${ifDefined(this.variant)}

2
src/components/icon/library.system.ts
View File

@@ -54,7 +54,7 @@ const systemLibrary: IconLibrary = {
case 'indeterminate':
return dataUri(`
<svg part="indeterminate-icon" class="checkbox__icon" viewBox="0 0 16 16"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round"><g stroke="currentColor" stroke-width="2"><g transform="translate(2.285714, 6.857143)"><path d="M10.2857143,1.14285714 L1.14285714,1.14285714"></path></g></g></g></svg>
<svg part="indeterminate-icon" class="icon" viewBox="0 0 16 16"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round"><g stroke="currentColor" stroke-width="2"><g transform="translate(2.285714, 6.857143)"><path d="M10.2857143,1.14285714 L1.14285714,1.14285714"></path></g></g></g></svg>
`);
case 'minus':

20
src/components/image-comparer/image-comparer.css
View File

@@ -14,22 +14,22 @@
overflow: hidden;
}
.image-comparer__before,
.image-comparer__after {
.before,
.after {
display: block;
pointer-events: none;
}
.image-comparer__before::slotted(img),
.image-comparer__after::slotted(img),
.image-comparer__before::slotted(svg),
.image-comparer__after::slotted(svg) {
.before::slotted(img),
.after::slotted(img),
.before::slotted(svg),
.after::slotted(svg) {
display: block;
max-width: 100% !important;
height: auto;
}
.image-comparer__after {
.after {
position: absolute;
top: 0;
left: 0;
@@ -37,7 +37,7 @@
width: 100%;
}
.image-comparer__divider {
.divider {
display: flex;
align-items: center;
justify-content: center;
@@ -50,7 +50,7 @@
cursor: ew-resize;
}
.image-comparer__handle {
.handle {
display: flex;
align-items: center;
justify-content: center;
@@ -66,7 +66,7 @@
z-index: 10;
}
.image-comparer__handle:focus-visible {
.handle:focus-visible {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}

12
src/components/image-comparer/image-comparer.ts
View File

@@ -43,7 +43,7 @@ export default class WaImageComparer extends WebAwesomeElement {
private readonly localize = new LocalizeController(this);
@query('.image-comparer') base: HTMLElement;
@query('.image-comparer__handle') handle: HTMLElement;
@query('.handle') handle: HTMLElement;
/** The position of the divider as a percentage. */
@property({ type: Number, reflect: true }) position = 50;
@@ -109,14 +109,14 @@ export default class WaImageComparer extends WebAwesomeElement {
})}
@keydown=${this.handleKeyDown}
>
<div class="image-comparer__image">
<div part="before" class="image-comparer__before">
<div class="image">
<div part="before" class="before">
<slot name="before"></slot>
</div>
<div
part="after"
class="image-comparer__after"
class="after"
style=${styleMap({
clipPath: isRtl ? `inset(0 0 0 ${100 - this.position}%)` : `inset(0 ${100 - this.position}% 0 0)`,
})}
@@ -127,7 +127,7 @@ export default class WaImageComparer extends WebAwesomeElement {
<div
part="divider"
class="image-comparer__divider"
class="divider"
style=${styleMap({
left: isRtl ? `${100 - this.position}%` : `${this.position}%`,
})}
@@ -136,7 +136,7 @@ export default class WaImageComparer extends WebAwesomeElement {
>
<div
part="handle"
class="image-comparer__handle"
class="handle"
role="scrollbar"
aria-valuenow=${this.position}
aria-valuemin="0"

54
src/components/input/input.css
View File

@@ -10,7 +10,7 @@
position: relative;
}
.input__control {
.control {
flex: 1 1 auto;
min-width: 0;
height: 100%;
@@ -25,27 +25,27 @@
-webkit-appearance: none;
}
.input__control::-webkit-search-decoration,
.input__control::-webkit-search-cancel-button,
.input__control::-webkit-search-results-button,
.input__control::-webkit-search-results-decoration {
.control::-webkit-search-decoration,
.control::-webkit-search-cancel-button,
.control::-webkit-search-results-button,
.control::-webkit-search-results-decoration {
-webkit-appearance: none;
}
.input__control:focus {
.control:focus {
outline: none;
}
.input__prefix,
.input__suffix {
.prefix,
.suffix {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
cursor: default;
}
.input__prefix ::slotted(wa-icon),
.input__suffix ::slotted(wa-icon) {
.prefix ::slotted(wa-icon),
.suffix ::slotted(wa-icon) {
color: var(--wa-color-neutral-on-quiet);
}
@@ -56,21 +56,21 @@
font-size: var(--wa-font-size-s);
height: var(--wa-form-control-height-s);
.input__control {
.control {
height: calc(var(--wa-form-control-height-s) - var(--border-width) * 2);
padding: 0 var(--wa-space-s);
}
.input__clear,
.input__password-toggle {
.clear,
.password-toggle {
width: calc(1em + var(--wa-space-s) * 2);
}
.input__prefix ::slotted(*) {
.prefix ::slotted(*) {
margin-inline-start: var(--wa-space-s);
}
.input__suffix ::slotted(*) {
.suffix ::slotted(*) {
margin-inline-end: var(--wa-space-s);
}
}
@@ -79,21 +79,21 @@
font-size: var(--wa-font-size-m);
height: var(--wa-form-control-height-m);
.input__control {
.control {
height: calc(var(--wa-form-control-height-m) - var(--border-width) * 2);
padding: 0 var(--wa-space-m);
}
.input__clear,
.input__password-toggle {
.clear,
.password-toggle {
width: calc(1em + var(--wa-space-m) * 2);
}
.input__prefix ::slotted(*) {
.prefix ::slotted(*) {
margin-inline-start: var(--wa-space-m);
}
.input__suffix ::slotted(*) {
.suffix ::slotted(*) {
margin-inline-end: var(--wa-space-m);
}
}
@@ -102,21 +102,21 @@
font-size: var(--wa-font-size-l);
height: var(--wa-form-control-height-l);
.input__control {
.control {
height: calc(var(--wa-form-control-height-l) - var(--border-width) * 2);
padding: 0 var(--wa-space-l);
}
.input__clear,
.input__password-toggle {
.clear,
.password-toggle {
width: calc(1em + var(--wa-space-l) * 2);
}
.input__prefix ::slotted(*) {
.prefix ::slotted(*) {
margin-inline-start: var(--wa-space-l);
}
.input__suffix ::slotted(*) {
.suffix ::slotted(*) {
margin-inline-end: var(--wa-space-l);
}
}
@@ -125,8 +125,8 @@
* Clearable + Password Toggle
*/
.input__clear,
.input__password-toggle {
.clear,
.password-toggle {
display: inline-flex;
align-items: center;
justify-content: center;

19
src/components/input/input.ts
View File

@@ -74,7 +74,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
private readonly hasSlotController = new HasSlotController(this, 'hint', 'label');
private readonly localize = new LocalizeController(this);
@query('.input__control') input: HTMLInputElement;
@query('.control') input: HTMLInputElement;
@state() private hasFocus = false;
@property() title = ''; // make reactive to pass through
@@ -414,12 +414,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
'form-control--has-label': hasLabel,
})}
>
<label
part="form-control-label"
class="form-control__label"
for="input"
aria-hidden=${hasLabel ? 'false' : 'true'}
>
<label part="form-control-label" class="label" for="input" aria-hidden=${hasLabel ? 'false' : 'true'}>
<slot name="label">${this.label}</slot>
</label>
@@ -444,14 +439,14 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
'input--no-spin-buttons': this.noSpinButtons,
})}
>
<span part="prefix" class="input__prefix">
<span part="prefix" class="prefix">
<slot name="prefix"></slot>
</span>
<input
part="input"
id="input"
class="input__control"
class="control"
type=${this.type === 'password' && this.passwordVisible ? 'text' : this.type}
title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}
name=${ifDefined(this.name)}
@@ -485,7 +480,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
? html`
<button
part="clear-button"
class="input__clear"
class="clear"
type="button"
aria-label=${this.localize.term('clearEntry')}
@click=${this.handleClearClick}
@@ -501,7 +496,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
? html`
<button
part="password-toggle-button"
class="input__password-toggle"
class="password-toggle"
type="button"
aria-label=${this.localize.term(this.passwordVisible ? 'hidePassword' : 'showPassword')}
@click=${this.handlePasswordToggle}
@@ -522,7 +517,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
`
: ''}
<span part="suffix" class="input__suffix">
<span part="suffix" class="suffix">
<slot name="suffix"></slot>
</span>
</div>

18
src/components/menu-item/menu-item.css
View File

@@ -50,30 +50,30 @@
opacity: 1;
}
.menu-item .menu-item__label {
.menu-item .label {
flex: 1 1 auto;
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
}
.menu-item .menu-item__prefix {
.menu-item .prefix {
flex: 0 0 auto;
display: flex;
align-items: center;
}
.menu-item .menu-item__prefix::slotted(*) {
.menu-item .prefix::slotted(*) {
margin-inline-end: var(--wa-space-xs);
}
.menu-item .menu-item__suffix {
.menu-item .suffix {
flex: 0 0 auto;
display: flex;
align-items: center;
}
.menu-item .menu-item__suffix::slotted(*) {
.menu-item .suffix::slotted(*) {
margin-inline-start: var(--wa-space-xs);
}
@@ -111,8 +111,8 @@
opacity: 1;
}
.menu-item .menu-item__check,
.menu-item .menu-item__chevron {
.menu-item .check,
.menu-item .chevron {
flex: 0 0 auto;
display: flex;
align-items: center;
@@ -122,8 +122,8 @@
visibility: hidden;
}
.menu-item--checked .menu-item__check,
.menu-item--has-submenu .menu-item__chevron {
.menu-item--checked .check,
.menu-item--has-submenu .chevron {
visibility: visible;
}

10
src/components/menu-item/menu-item.ts
View File

@@ -183,17 +183,17 @@ export default class WaMenuItem extends WebAwesomeElement {
?aria-haspopup="${this.isSubmenu()}"
?aria-expanded="${isSubmenuExpanded ? true : false}"
>
<span part="checked-icon" class="menu-item__check">
<span part="checked-icon" class="check">
<wa-icon name="check" library="system" variant="solid" aria-hidden="true"></wa-icon>
</span>
<slot name="prefix" part="prefix" class="menu-item__prefix"></slot>
<slot name="prefix" part="prefix" class="prefix"></slot>
<slot part="label" class="menu-item__label" @slotchange=${this.handleDefaultSlotChange}></slot>
<slot part="label" class="label" @slotchange=${this.handleDefaultSlotChange}></slot>
<slot name="suffix" part="suffix" class="menu-item__suffix"></slot>
<slot name="suffix" part="suffix" class="suffix"></slot>
<span part="submenu-icon" class="menu-item__chevron">
<span part="submenu-icon" class="chevron">
<wa-icon
name=${isRtl ? 'chevron-left' : 'chevron-right'}
library="system"

14
src/components/option/option.css
View File

@@ -43,12 +43,12 @@
cursor: not-allowed;
}
.option__label {
.label {
flex: 1 1 auto;
display: inline-block;
}
.option .option__check {
.option .check {
flex: 0 0 auto;
display: flex;
align-items: center;
@@ -58,22 +58,22 @@
width: var(--wa-space-xl);
}
.option--selected .option__check {
.option--selected .check {
visibility: visible;
}
.option__prefix,
.option__suffix {
.prefix,
.suffix {
flex: 0 0 auto;
display: flex;
align-items: center;
}
.option__prefix::slotted(*) {
.prefix::slotted(*) {
margin-inline-end: var(--wa-space-xs);
}
.option__suffix::slotted(*) {
.suffix::slotted(*) {
margin-inline-start: var(--wa-space-xs);
}

10
src/components/option/option.ts
View File

@@ -37,7 +37,7 @@ export default class WaOption extends WebAwesomeElement {
// @ts-expect-error - Controller is currently unused
private readonly localize = new LocalizeController(this);
@query('.option__label') defaultSlot: HTMLSlotElement;
@query('.label') defaultSlot: HTMLSlotElement;
@state() current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)
@state() selected = false; // the option is selected and has aria-selected="true"
@@ -138,15 +138,15 @@ export default class WaOption extends WebAwesomeElement {
>
<wa-icon
part="checked-icon"
class="option__check"
class="check"
name="check"
library="system"
variant="solid"
aria-hidden="true"
></wa-icon>
<slot part="prefix" name="prefix" class="option__prefix"></slot>
<slot part="label" class="option__label" @slotchange=${this.handleDefaultSlotChange}></slot>
<slot part="suffix" name="suffix" class="option__suffix"></slot>
<slot part="prefix" name="prefix" class="prefix"></slot>
<slot part="label" class="label" @slotchange=${this.handleDefaultSlotChange}></slot>
<slot part="suffix" name="suffix" class="suffix"></slot>
</div>
`;
}

2
src/components/popup/popup.css
View File

@@ -29,7 +29,7 @@
display: none;
}
.popup__arrow {
.arrow {
position: absolute;
width: calc(var(--arrow-size-diagonal) * 2);
height: calc(var(--arrow-size-diagonal) * 2);

4
src/components/popup/popup.ts
View File

@@ -63,7 +63,7 @@ export default class WaPopup extends WebAwesomeElement {
/** A reference to the internal popup container. Useful for animating and styling the popup with JavaScript. */
@query('.popup') popup: HTMLElement;
@query('.popup__arrow') private arrowEl: HTMLElement;
@query('.arrow') private arrowEl: HTMLElement;
/**
* The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor
@@ -571,7 +571,7 @@ export default class WaPopup extends WebAwesomeElement {
})}
>
<slot></slot>
${this.arrow ? html`<div part="arrow" class="popup__arrow" role="presentation"></div>` : ''}
${this.arrow ? html`<div part="arrow" class="arrow" role="presentation"></div>` : ''}
</div>
`;
}

8
src/components/progress-bar/progress-bar.css
View File

@@ -17,7 +17,7 @@
overflow: hidden;
}
.progress-bar__indicator {
.indicator {
height: 100%;
font: inherit;
background-color: var(--indicator-color);
@@ -34,12 +34,12 @@
}
/* Indeterminate */
.progress-bar--indeterminate .progress-bar__indicator {
.progress-bar--indeterminate .indicator {
position: absolute;
animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);
}
.progress-bar--indeterminate.progress-bar--rtl .progress-bar__indicator {
.progress-bar--indeterminate.progress-bar--rtl .indicator {
animation-name: indeterminate-rtl;
}
@@ -49,7 +49,7 @@
background-color: var(--wa-color-surface-default);
}
.progress-bar__indicator {
.indicator {
outline: solid 1px SelectedItem;
background-color: SelectedItem;
}

4
src/components/progress-bar/progress-bar.ts
View File

@@ -55,8 +55,8 @@ export default class WaProgressBar extends WebAwesomeElement {
aria-valuemax="100"
aria-valuenow=${this.indeterminate ? 0 : this.value}
>
<div part="indicator" class="progress-bar__indicator" style=${styleMap({ width: `${this.value}%` })}>
${!this.indeterminate ? html` <slot part="label" class="progress-bar__label"></slot> ` : ''}
<div part="indicator" class="indicator" style=${styleMap({ width: `${this.value}%` })}>
${!this.indeterminate ? html` <slot part="label" class="label"></slot> ` : ''}
</div>
</div>
`;

12
src/components/progress-ring/progress-ring.css
View File

@@ -16,15 +16,15 @@
position: relative;
}
.progress-ring__image {
.image {
width: var(--size);
height: var(--size);
rotate: -90deg;
transform-origin: 50% 50%;
}
.progress-ring__track,
.progress-ring__indicator {
.track,
.indicator {
--radius: calc(var(--size) / 2 - max(var(--track-width), var(--indicator-width)) * 0.5);
--circumference: calc(var(--radius) * 2 * 3.141592654);
@@ -34,12 +34,12 @@
cy: calc(var(--size) / 2);
}
.progress-ring__track {
.track {
stroke: var(--track-color);
stroke-width: var(--track-width);
}
.progress-ring__indicator {
.indicator {
stroke: var(--indicator-color);
stroke-width: var(--indicator-width);
stroke-linecap: round;
@@ -49,7 +49,7 @@
stroke-dashoffset: calc(var(--circumference) - var(--percentage) * var(--circumference));
}
.progress-ring__label {
.label {
display: flex;
align-items: center;
justify-content: center;

10
src/components/progress-ring/progress-ring.ts
View File

@@ -28,7 +28,7 @@ export default class WaProgressRing extends WebAwesomeElement {
private readonly localize = new LocalizeController(this);
@query('.progress-ring__indicator') indicator: SVGCircleElement;
@query('.indicator') indicator: SVGCircleElement;
@state() indicatorOffset: string;
@@ -68,12 +68,12 @@ export default class WaProgressRing extends WebAwesomeElement {
aria-valuenow="${this.value}"
style="--percentage: ${this.value / 100}"
>
<svg class="progress-ring__image">
<circle class="progress-ring__track"></circle>
<circle class="progress-ring__indicator" style="stroke-dashoffset: ${this.indicatorOffset}"></circle>
<svg class="image">
<circle class="track"></circle>
<circle class="indicator" style="stroke-dashoffset: ${this.indicatorOffset}"></circle>
</svg>
<slot id="label" part="label" class="progress-ring__label"></slot>
<slot id="label" part="label" class="label"></slot>
</div>
`;
}

12
src/components/radio-button/radio-button.test.ts
View File

@@ -43,12 +43,12 @@ describe('<wa-radio-button>', () => {
radio3.updateComplete,
]);
expect(radio1.classList.contains('wa-button-group__button')).to.be.true;
expect(radio1.classList.contains('wa-button-group__button--first')).to.be.true;
expect(radio2.classList.contains('wa-button-group__button')).to.be.true;
expect(radio2.classList.contains('wa-button-group__button--inner')).to.be.true;
expect(radio3.classList.contains('wa-button-group__button')).to.be.true;
expect(radio3.classList.contains('wa-button-group__button--last')).to.be.true;
expect(radio1.classList.contains('button')).to.be.true;
expect(radio1.classList.contains('button--first')).to.be.true;
expect(radio2.classList.contains('button')).to.be.true;
expect(radio2.classList.contains('button--inner')).to.be.true;
expect(radio3.classList.contains('button')).to.be.true;
expect(radio3.classList.contains('button--last')).to.be.true;
});
});
}

4
src/components/radio-group/radio-group.css
View File

@@ -9,11 +9,11 @@
margin: 0;
}
.form-control__label {
.label {
padding: 0;
}
.radio-group--required .radio-group__label::after {
.radio-group--required .label::after {
content: var(--wa-form-control-required-content);
margin-inline-start: var(--wa-form-control-required-content-offset);
}

2
src/components/radio-group/radio-group.ts
View File

@@ -335,7 +335,7 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
<label
part="form-control-label"
id="label"
class="form-control__label"
class="label"
aria-hidden=${hasLabel ? 'false' : 'true'}
@click=${this.handleLabelClick}
>

12
src/components/radio/radio.css
View File

@@ -26,7 +26,7 @@
cursor: pointer;
}
.radio__checked-icon {
.checked-icon {
display: flex;
fill: currentColor;
width: var(--toggle-size);
@@ -34,7 +34,7 @@
scale: var(--checked-icon-scale);
}
.radio__control {
.control {
flex: 0 0 auto;
position: relative;
display: flex;
@@ -56,7 +56,7 @@
color var(--wa-transition-normal) var(--wa-transition-easing);
}
.radio__input {
.input {
position: absolute;
opacity: 0;
padding: 0;
@@ -65,14 +65,14 @@
}
/* Checked */
.radio--checked .radio__control {
.radio--checked .control {
color: var(--checked-icon-color);
border-color: var(--border-color-checked);
background-color: var(--background-color-checked);
}
/* Checked + focus */
:host(:focus-visible) .radio__control {
:host(:focus-visible) .control {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
@@ -88,7 +88,7 @@
opacity: 0;
}
.radio__label {
.label {
display: inline-block;
color: var(--wa-form-control-value-color);
line-height: var(--toggle-size);

11
src/components/radio/radio.ts
View File

@@ -128,22 +128,17 @@ export default class WaRadio extends WebAwesomeFormAssociatedElement {
'radio--disabled': this.disabled,
})}
>
<span part="control" class="radio__control">
<span part="control" class="control">
${this.checked
? html`
<svg
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
part="checked-icon"
class="radio__checked-icon"
>
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" part="checked-icon" class="checked-icon">
<circle cx="8" cy="8" r="8" />
</svg>
`
: ''}
</span>
<slot part="label" class="radio__label"></slot>
<slot part="label" class="label"></slot>
</span>
`;
}

56
src/components/range/range.css
View File

@@ -19,7 +19,7 @@
height: max(var(--thumb-size), var(--track-height));
}
.range__control {
.control {
--percent: 0%;
-webkit-appearance: none;
border-radius: calc(var(--track-height) / 2);
@@ -41,7 +41,7 @@
);
}
.range--rtl .range__control {
.range--rtl .control {
background-image: linear-gradient(
to left,
var(--track-color-inactive) 0%,
@@ -54,14 +54,14 @@
}
/* Webkit */
.range__control::-webkit-slider-runnable-track {
.control::-webkit-slider-runnable-track {
width: 100%;
height: var(--track-height);
border-radius: 3px;
border: none;
}
.range__control::-webkit-slider-thumb {
.control::-webkit-slider-thumb {
width: var(--thumb-size);
height: var(--thumb-size);
border-radius: 50%;
@@ -74,27 +74,27 @@
cursor: pointer;
}
.range__control:enabled:focus-visible::-webkit-slider-thumb {
.control:enabled:focus-visible::-webkit-slider-thumb {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
.range__control:enabled::-webkit-slider-thumb:active {
.control:enabled::-webkit-slider-thumb:active {
cursor: grabbing;
}
/* Firefox */
.range__control::-moz-focus-outer {
.control::-moz-focus-outer {
border: 0;
}
.range__control::-moz-range-progress {
.control::-moz-range-progress {
background-color: var(--track-color-active);
border-radius: 3px;
height: var(--track-height);
}
.range__control::-moz-range-track {
.control::-moz-range-track {
width: 100%;
height: var(--track-height);
background-color: var(--track-color-inactive);
@@ -102,7 +102,7 @@
border: none;
}
.range__control::-moz-range-thumb {
.control::-moz-range-thumb {
height: var(--thumb-size);
width: var(--thumb-size);
border-radius: 50%;
@@ -118,34 +118,34 @@
cursor: pointer;
}
.range__control:enabled:focus-visible::-moz-range-thumb {
.control:enabled:focus-visible::-moz-range-thumb {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
.range__control:enabled::-moz-range-thumb:active {
.control:enabled::-moz-range-thumb:active {
cursor: grabbing;
}
/* States */
.range__control:focus-visible {
.control:focus-visible {
outline: none;
}
.range__control:disabled {
.control:disabled {
opacity: 0.5;
}
.range__control:disabled::-webkit-slider-thumb {
.control:disabled::-webkit-slider-thumb {
cursor: not-allowed;
}
.range__control:disabled::-moz-range-thumb {
.control:disabled::-moz-range-thumb {
cursor: not-allowed;
}
/* Tooltip output */
.range__tooltip {
.tooltip {
position: absolute;
z-index: 1000;
left: 0;
@@ -161,7 +161,7 @@
pointer-events: none;
}
.range__tooltip:after {
.tooltip:after {
content: '';
position: absolute;
width: 0;
@@ -170,16 +170,16 @@
translate: calc(-1 * var(--wa-tooltip-arrow-size));
}
.range--tooltip-visible .range__tooltip {
.range--tooltip-visible .tooltip {
opacity: 1;
}
/* Tooltip on top */
.range--tooltip-top .range__tooltip {
.range--tooltip-top .tooltip {
bottom: calc(50% + (var(--thumb-size) / 2) + var(--tooltip-offset));
}
.range--tooltip-top .range__tooltip:after {
.range--tooltip-top .tooltip:after {
border-top: var(--wa-tooltip-arrow-size) solid var(--wa-color-neutral-fill-loud);
border-left: var(--wa-tooltip-arrow-size) solid transparent;
border-right: var(--wa-tooltip-arrow-size) solid transparent;
@@ -187,11 +187,11 @@
}
/* Tooltip on bottom */
.range--tooltip-bottom .range__tooltip {
.range--tooltip-bottom .tooltip {
top: calc(50% + (var(--thumb-size) / 2) + var(--tooltip-offset));
}
.range--tooltip-bottom .range__tooltip:after {
.range--tooltip-bottom .tooltip:after {
border-bottom: var(--wa-tooltip-arrow-size) solid var(--wa-color-neutral-fill-loud);
border-left: var(--wa-tooltip-arrow-size) solid transparent;
border-right: var(--wa-tooltip-arrow-size) solid transparent;
@@ -199,20 +199,20 @@
}
@media (forced-colors: active) {
.range__control,
.range__tooltip {
.control,
.tooltip {
border: solid 1px transparent;
}
.range__control::-webkit-slider-thumb {
.control::-webkit-slider-thumb {
border: solid 1px transparent;
}
.range__control::-moz-range-thumb {
.control::-moz-range-thumb {
border: solid 1px transparent;
}
.range__tooltip:after {
.tooltip:after {
display: none;
}
}

15
src/components/range/range.ts
View File

@@ -60,8 +60,8 @@ export default class WaRange extends WebAwesomeFormAssociatedElement {
private readonly localize = new LocalizeController(this);
private resizeObserver: ResizeObserver;
@query('.range__control') input: HTMLInputElement;
@query('.range__tooltip') output: HTMLOutputElement | null;
@query('.control') input: HTMLInputElement;
@query('.tooltip') output: HTMLOutputElement | null;
@state() private hasFocus = false;
@state() private hasTooltip = false;
@@ -288,12 +288,7 @@ export default class WaRange extends WebAwesomeFormAssociatedElement {
'form-control--has-label': hasLabel,
})}
>
<label
part="form-control-label"
class="form-control__label"
for="input"
aria-hidden=${hasLabel ? 'false' : 'true'}
>
<label part="form-control-label" class="label" for="input" aria-hidden=${hasLabel ? 'false' : 'true'}>
<slot name="label">${this.label}</slot>
</label>
@@ -317,7 +312,7 @@ export default class WaRange extends WebAwesomeFormAssociatedElement {
<input
part="input"
id="input"
class="range__control"
class="control"
title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}
type="range"
name=${ifDefined(this.name)}
@@ -334,7 +329,7 @@ export default class WaRange extends WebAwesomeFormAssociatedElement {
/>
${this.tooltip !== 'none' && !this.disabled
? html`
<output part="tooltip" class="range__tooltip">
<output part="tooltip" class="tooltip">
${typeof this.tooltipFormatter === 'function' ? this.tooltipFormatter(this.value) : this.value}
</output>
`

28
src/components/rating/rating.css
View File

@@ -23,7 +23,7 @@
outline-offset: var(--wa-focus-ring-offset);
}
.rating__symbols {
.symbols {
display: inline-flex;
position: relative;
font-size: var(--symbol-size);
@@ -33,41 +33,41 @@
cursor: pointer;
}
.rating__symbols > * {
.symbols > * {
padding: var(--symbol-spacing);
}
.rating__symbol--active,
.rating__partial--filled {
.symbol--active,
.partial--filled {
color: var(--symbol-color-active);
}
.rating__partial-symbol-container {
.partial-symbol-container {
position: relative;
}
.rating__partial--filled {
.partial--filled {
position: absolute;
top: var(--symbol-spacing);
left: var(--symbol-spacing);
}
.rating__symbol {
.symbol {
transition: scale var(--wa-transition-normal) var(--wa-transition-easing);
pointer-events: none;
}
.rating__symbol--hover {
.symbol--hover {
scale: 1.2;
}
.rating--disabled .rating__symbols,
.rating--readonly .rating__symbols {
.rating--disabled .symbols,
.rating--readonly .symbols {
cursor: default;
}
.rating--disabled .rating__symbol--hover,
.rating--readonly .rating__symbol--hover {
.rating--disabled .symbol--hover,
.rating--readonly .symbol--hover {
scale: none;
}
@@ -75,13 +75,13 @@
opacity: 0.5;
}
.rating--disabled .rating__symbols {
.rating--disabled .symbols {
cursor: not-allowed;
}
/* Forced colors mode */
@media (forced-colors: active) {
.rating__symbol--active {
.symbol--active {
color: SelectedItem;
}
}

4
src/components/rating/rating.test.ts
View File

@@ -57,7 +57,7 @@ describe('<wa-rating>', () => {
it('should emit wa-change when clicked', async () => {
const el = await fixture<WaRating>(html` <wa-rating></wa-rating> `);
const lastSymbol = el.shadowRoot!.querySelector<HTMLSpanElement>('.rating__symbol:last-child')!;
const lastSymbol = el.shadowRoot!.querySelector<HTMLSpanElement>('.symbol:last-child')!;
const changeHandler = sinon.spy();
el.addEventListener('wa-change', changeHandler);
@@ -85,7 +85,7 @@ describe('<wa-rating>', () => {
it('should not emit wa-change when disabled', async () => {
const el = await fixture<WaRating>(html` <wa-rating value="5" disabled></wa-rating> `);
const lastSymbol = el.shadowRoot!.querySelector<HTMLSpanElement>('.rating__symbol:last-child')!;
const lastSymbol = el.shadowRoot!.querySelector<HTMLSpanElement>('.symbol:last-child')!;
const changeHandler = sinon.spy();
el.addEventListener('wa-change', changeHandler);

16
src/components/rating/rating.ts
View File

@@ -251,7 +251,7 @@ export default class WaRating extends WebAwesomeElement {
@mousemove=${this.handleMouseMove}
@touchmove=${this.handleTouchMove}
>
<span class="rating__symbols">
<span class="symbols">
${counter.map(index => {
if (displayValue > index && displayValue < index + 1) {
// Users can click the current value to clear the rating. When this happens, we set this.isHovering to
@@ -260,9 +260,9 @@ export default class WaRating extends WebAwesomeElement {
return html`
<span
class=${classMap({
rating__symbol: true,
'rating__partial-symbol-container': true,
'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
symbol: true,
'partial-symbol-container': true,
'symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
})}
role="presentation"
>
@@ -276,7 +276,7 @@ export default class WaRating extends WebAwesomeElement {
${unsafeHTML(this.getSymbol(index + 1))}
</div>
<div
class="rating__partial--filled"
class="partial--filled"
style=${styleMap({
clipPath: isRtl
? `inset(0 0 0 ${100 - (displayValue - index) * 100}%)`
@@ -292,9 +292,9 @@ export default class WaRating extends WebAwesomeElement {
return html`
<span
class=${classMap({
rating__symbol: true,
'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
'rating__symbol--active': displayValue >= index + 1,
symbol: true,
'symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
'symbol--active': displayValue >= index + 1,
})}
role="presentation"
>

2
src/components/select/select.ts
View File

@@ -803,7 +803,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
<label
id="label"
part="form-control-label"
class="form-control__label"
class="label"
aria-hidden=${hasLabel ? 'false' : 'true'}
@click=${this.handleLabelClick}
>

6
src/components/skeleton/skeleton.css vendored
View File

@@ -14,19 +14,19 @@
min-height: 1rem;
}
.skeleton__indicator {
.indicator {
flex: 1 1 auto;
background: var(--color);
border-radius: var(--border-radius);
}
.skeleton--sheen .skeleton__indicator {
.skeleton--sheen .indicator {
background: linear-gradient(270deg, var(--sheen-color), var(--color), var(--color), var(--sheen-color));
background-size: 400% 100%;
animation: sheen 8s ease-in-out infinite;
}
.skeleton--pulse .skeleton__indicator {
.skeleton--pulse .indicator {
animation: pulse 2s ease-in-out 0.5s infinite;
}

2
src/components/skeleton/skeleton.test.ts
View File

@@ -15,7 +15,7 @@ describe('<wa-skeleton>', () => {
const indicator = el.shadowRoot!.querySelector<HTMLElement>('[part~="indicator"]')!;
expect(base.getAttribute('class')).to.equal(' skeleton ');
expect(indicator.getAttribute('class')).to.equal('skeleton__indicator');
expect(indicator.getAttribute('class')).to.equal('indicator');
});
it('should set pulse effect by attribute', async () => {

2
src/components/skeleton/skeleton.ts
View File

@@ -34,7 +34,7 @@ export default class WaSkeleton extends WebAwesomeElement {
'skeleton--sheen': this.effect === 'sheen',
})}
>
<div part="indicator" class="skeleton__indicator"></div>
<div part="indicator" class="indicator"></div>
</div>
`;
}

4
src/components/spinner/spinner.css
View File

@@ -22,11 +22,11 @@ svg {
animation: spin var(--speed) linear infinite;
}
.spinner__track {
.track {
stroke: var(--track-color);
}
.spinner__indicator {
.indicator {
stroke: var(--indicator-color);
stroke-dasharray: 75, 100;
stroke-dashoffset: -5;

4
src/components/spinner/spinner.ts
View File

@@ -33,8 +33,8 @@ export default class WaSpinner extends WebAwesomeElement {
viewBox="0 0 50 50"
xmlns="http://www.w3.org/2000/svg"
>
<circle class="spinner__track" cx="25" cy="25" r="20" fill="none" stroke-width="5" />
<circle class="spinner__indicator" cx="25" cy="25" r="20" fill="none" stroke-width="5" />
<circle class="track" cx="25" cy="25" r="20" fill="none" stroke-width="5" />
<circle class="indicator" cx="25" cy="25" r="20" fill="none" stroke-width="5" />
</svg>
`;
}

20
src/components/switch/switch.css
View File

@@ -38,7 +38,7 @@
cursor: pointer;
}
.switch__control {
.control {
flex: 0 0 auto;
position: relative;
display: flex;
@@ -57,7 +57,7 @@
border-color var(--wa-transition-normal) var(--wa-transition-easing);
}
.switch__control .switch__thumb {
.control .thumb {
width: var(--thumb-size);
height: var(--thumb-size);
background-color: var(--thumb-color);
@@ -71,7 +71,7 @@
box-shadow var(--wa-transition-normal) var(--wa-transition-easing);
}
.switch__input {
.input {
position: absolute;
opacity: 0;
padding: 0;
@@ -80,18 +80,18 @@
}
/* Focus */
.switch:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {
.switch:not(.switch--disabled) .input:focus-visible ~ .control .thumb {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
/* Checked */
.switch--checked .switch__control {
.switch--checked .control {
background-color: var(--background-color-checked);
border-color: var(--border-color-checked);
}
.switch--checked .switch__control .switch__thumb {
.switch--checked .control .thumb {
background-color: var(--thumb-color-checked);
translate: calc((var(--width) - var(--height)) / 2);
}
@@ -102,7 +102,7 @@
cursor: not-allowed;
}
.switch__label {
.label {
display: inline-block;
line-height: var(--height);
margin-inline-start: 0.5em;
@@ -110,15 +110,15 @@
-webkit-user-select: none;
}
:host([required]) .switch__label::after {
:host([required]) .label::after {
content: var(--wa-form-control-required-content);
color: var(--wa-form-control-required-content-color);
margin-inline-start: var(--wa-form-control-required-content-offset);
}
@media (forced-colors: active) {
.switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb,
.switch--checked .switch__control .switch__thumb {
.switch.switch--checked:not(.switch--disabled) .control:hover .thumb,
.switch--checked .control .thumb {
background-color: ButtonText;
}
}

2
src/components/switch/switch.test.ts
View File

@@ -127,7 +127,7 @@ describe('<wa-switch>', () => {
//
const el = await fixture<WaSwitch>(html` <wa-switch></wa-switch> `);
const label = el.shadowRoot!.querySelector('.switch')!;
const input = el.shadowRoot!.querySelector('.switch__input')!;
const input = el.shadowRoot!.querySelector('.input')!;
const labelPosition = getComputedStyle(label).position;
const inputPosition = getComputedStyle(input).position;

8
src/components/switch/switch.ts
View File

@@ -259,7 +259,7 @@ export default class WaSwitch extends WebAwesomeFormAssociatedElement {
})}
>
<input
class="switch__input"
class="input"
type="checkbox"
title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}
name=${this.name}
@@ -277,11 +277,11 @@ export default class WaSwitch extends WebAwesomeFormAssociatedElement {
@keydown=${this.handleKeyDown}
/>
<span part="control" class="switch__control">
<span part="thumb" class="switch__thumb"></span>
<span part="control" class="control">
<span part="thumb" class="thumb"></span>
</span>
<div part="label" class="switch__label">
<div part="label" class="label">
<slot></slot>
</div>
</label>

62
src/components/tab-group/tab-group.css
View File

@@ -11,26 +11,26 @@
border-radius: 0;
}
.tab-group__tabs {
.tabs {
display: flex;
position: relative;
}
.tab-group__indicator {
.indicator {
position: absolute;
}
.tab-group--has-scroll-controls .tab-group__nav-container {
.tab-group--has-scroll-controls .nav-container {
position: relative;
padding: 0 var(--wa-space-xl);
}
.tab-group__body {
.body {
display: block;
overflow: auto;
}
.tab-group__scroll-button {
.scroll-button {
display: flex;
align-items: center;
justify-content: center;
@@ -40,20 +40,20 @@
width: var(--wa-space-xl);
}
.tab-group__scroll-button-start {
.scroll-button-start {
left: 0;
}
.tab-group__scroll-button-end {
.scroll-button-end {
right: 0;
}
.tab-group--rtl .tab-group__scroll-button-start {
.tab-group--rtl .scroll-button-start {
left: auto;
right: 0;
}
.tab-group--rtl .tab-group__scroll-button-end {
.tab-group--rtl .scroll-button-end {
left: 0;
right: auto;
}
@@ -66,11 +66,11 @@
flex-direction: column;
}
.tab-group--top .tab-group__nav-container {
.tab-group--top .nav-container {
order: 1;
}
.tab-group--top .tab-group__nav {
.tab-group--top .nav {
display: flex;
overflow-x: auto;
@@ -79,24 +79,24 @@
}
/* Hide scrollbar in Chrome/Safari */
.tab-group--top .tab-group__nav::-webkit-scrollbar {
.tab-group--top .nav::-webkit-scrollbar {
width: 0;
height: 0;
}
.tab-group--top .tab-group__tabs {
.tab-group--top .tabs {
flex: 1 1 auto;
position: relative;
flex-direction: row;
border-bottom: solid var(--track-width) var(--track-color);
}
.tab-group--top .tab-group__indicator {
.tab-group--top .indicator {
bottom: calc(-1 * var(--track-width));
border-bottom: solid var(--track-width) var(--indicator-color);
}
.tab-group--top .tab-group__body {
.tab-group--top .body {
order: 2;
}
@@ -117,11 +117,11 @@
flex-direction: column;
}
.tab-group--bottom .tab-group__nav-container {
.tab-group--bottom .nav-container {
order: 2;
}
.tab-group--bottom .tab-group__nav {
.tab-group--bottom .nav {
display: flex;
overflow-x: auto;
@@ -130,24 +130,24 @@
}
/* Hide scrollbar in Chrome/Safari */
.tab-group--bottom .tab-group__nav::-webkit-scrollbar {
.tab-group--bottom .nav::-webkit-scrollbar {
width: 0;
height: 0;
}
.tab-group--bottom .tab-group__tabs {
.tab-group--bottom .tabs {
flex: 1 1 auto;
position: relative;
flex-direction: row;
border-top: solid var(--track-width) var(--track-color);
}
.tab-group--bottom .tab-group__indicator {
.tab-group--bottom .indicator {
top: calc(-1 * var(--track-width));
border-top: solid var(--track-width) var(--indicator-color);
}
.tab-group--bottom .tab-group__body {
.tab-group--bottom .body {
order: 1;
}
@@ -168,27 +168,27 @@
flex-direction: row;
}
.tab-group--start .tab-group__nav-container {
.tab-group--start .nav-container {
order: 1;
}
.tab-group--start .tab-group__tabs {
.tab-group--start .tabs {
flex: 0 0 auto;
flex-direction: column;
border-inline-end: solid var(--track-width) var(--track-color);
}
.tab-group--start .tab-group__indicator {
.tab-group--start .indicator {
right: calc(-1 * var(--track-width));
border-right: solid var(--track-width) var(--indicator-color);
}
.tab-group--start.tab-group--rtl .tab-group__indicator {
.tab-group--start.tab-group--rtl .indicator {
right: auto;
left: calc(-1 * var(--track-width));
}
.tab-group--start .tab-group__body {
.tab-group--start .body {
flex: 1 1 auto;
order: 2;
}
@@ -210,27 +210,27 @@
flex-direction: row;
}
.tab-group--end .tab-group__nav-container {
.tab-group--end .nav-container {
order: 2;
}
.tab-group--end .tab-group__tabs {
.tab-group--end .tabs {
flex: 0 0 auto;
flex-direction: column;
border-left: solid var(--track-width) var(--track-color);
}
.tab-group--end .tab-group__indicator {
.tab-group--end .indicator {
left: calc(-1 * var(--track-width));
border-inline-start: solid var(--track-width) var(--indicator-color);
}
.tab-group--end.tab-group--rtl .tab-group__indicator {
.tab-group--end.tab-group--rtl .indicator {
right: calc(-1 * var(--track-width));
left: auto;
}
.tab-group--end .tab-group__body {
.tab-group--end .body {
flex: 1 1 auto;
order: 1;
}

16
src/components/tab-group/tab-group.ts
View File

@@ -57,8 +57,8 @@ export default class WaTabGroup extends WebAwesomeElement {
private readonly localize = new LocalizeController(this);
@query('.tab-group') tabGroup: HTMLElement;
@query('.tab-group__body') body: HTMLSlotElement;
@query('.tab-group__nav') nav: HTMLElement;
@query('.body') body: HTMLSlotElement;
@query('.nav') nav: HTMLElement;
@state() private hasScrollControls = false;
@@ -388,13 +388,13 @@ export default class WaTabGroup extends WebAwesomeElement {
@click=${this.handleClick}
@keydown=${this.handleKeyDown}
>
<div class="tab-group__nav-container" part="nav">
<div class="nav-container" part="nav">
${this.hasScrollControls
? html`
<wa-icon-button
part="scroll-button scroll-button-start"
exportparts="base:scroll-button__base"
class="tab-group__scroll-button tab-group__scroll-button-start"
class="scroll-button scroll-button-start"
name=${isRtl ? 'chevron-right' : 'chevron-left'}
library="system"
variant="solid"
@@ -405,8 +405,8 @@ export default class WaTabGroup extends WebAwesomeElement {
: ''}
<!-- We have a focus listener because in Firefox (and soon to be Chrome) overflow containers are focusable. -->
<div class="tab-group__nav" @focus=${() => this.activeTab?.focus({ preventScroll: true })}>
<div part="tabs" class="tab-group__tabs" role="tablist">
<div class="nav" @focus=${() => this.activeTab?.focus({ preventScroll: true })}>
<div part="tabs" class="tabs" role="tablist">
<slot name="nav" @slotchange=${this.syncTabsAndPanels}></slot>
</div>
</div>
@@ -415,8 +415,8 @@ export default class WaTabGroup extends WebAwesomeElement {
? html`
<wa-icon-button
part="scroll-button scroll-button-end"
class="scroll-button scroll-button-end"
exportparts="base:scroll-button__base"
class="tab-group__scroll-button tab-group__scroll-button-end"
name=${isRtl ? 'chevron-left' : 'chevron-right'}
library="system"
variant="solid"
@@ -427,7 +427,7 @@ export default class WaTabGroup extends WebAwesomeElement {
: ''}
</div>
<slot part="body" class="tab-group__body" @slotchange=${this.syncTabsAndPanels}></slot>
<slot part="body" class="body" @slotchange=${this.syncTabsAndPanels}></slot>
</div>
`;
}

2
src/components/tab/tab.ts
View File

@@ -19,7 +19,7 @@ let id = 0;
*
* @csspart base - The component's base wrapper.
* @csspart close-button - The close button, an `<wa-icon-button>`.
* @csspart close-button__base - The close button's exported `base` part.
* @csspart base - The close button's exported `base` part.
*/
@customElement('wa-tab')
export default class WaTab extends WebAwesomeElement {

4
src/components/tag/tag.ts
View File

@@ -49,7 +49,7 @@ export default class WaTag extends WebAwesomeElement {
render() {
return html`
<slot part="content" class="tag__content"></slot>
<slot part="content" class="content"></slot>
${this.removable
? html`
@@ -60,7 +60,7 @@ export default class WaTag extends WebAwesomeElement {
library="system"
variant="solid"
label=${this.localize.term('remove')}
class="tag__remove"
class="remove"
@click=${this.handleRemoveClick}
tabindex="-1"
></wa-icon-button>

28
src/components/textarea/textarea.css
View File

@@ -35,12 +35,12 @@
cursor: text;
}
.textarea__control,
.textarea__size-adjuster {
.control,
.size-adjuster {
grid-area: 1 / 1 / 2 / 2;
}
.textarea__size-adjuster {
.size-adjuster {
visibility: hidden;
pointer-events: none;
opacity: 0;
@@ -69,7 +69,7 @@
cursor: not-allowed;
}
.textarea__control {
.control {
font: inherit;
line-height: var(--wa-line-height-expanded);
color: var(--wa-form-control-value-color);
@@ -80,20 +80,20 @@
-webkit-appearance: none;
}
.textarea__control::-webkit-search-decoration,
.textarea__control::-webkit-search-cancel-button,
.textarea__control::-webkit-search-results-button,
.textarea__control::-webkit-search-results-decoration {
.control::-webkit-search-decoration,
.control::-webkit-search-cancel-button,
.control::-webkit-search-results-button,
.control::-webkit-search-results-decoration {
-webkit-appearance: none;
}
.textarea__control::placeholder {
.control::placeholder {
color: var(--wa-form-control-placeholder-color);
user-select: none;
-webkit-user-select: none;
}
.textarea__control:focus {
.control:focus {
outline: none;
}
@@ -112,7 +112,7 @@
--padding-inline: var(--wa-space-l);
}
.textarea__control {
.control {
padding: 0.5em var(--padding-inline);
}
@@ -120,15 +120,15 @@
* Resize types
*/
.textarea--resize-none .textarea__control {
.textarea--resize-none .control {
resize: none;
}
.textarea--resize-vertical .textarea__control {
.textarea--resize-vertical .control {
resize: vertical;
}
.textarea--resize-auto .textarea__control {
.textarea--resize-auto .control {
height: auto;
resize: none;
overflow-y: hidden;

15
src/components/textarea/textarea.ts
View File

@@ -56,8 +56,8 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
private readonly hasSlotController = new HasSlotController(this, 'hint', 'label');
private resizeObserver: ResizeObserver;
@query('.textarea__control') input: HTMLTextAreaElement;
@query('.textarea__size-adjuster') sizeAdjuster: HTMLTextAreaElement;
@query('.control') input: HTMLTextAreaElement;
@query('.size-adjuster') sizeAdjuster: HTMLTextAreaElement;
@state() private hasFocus = false;
@property() title = ''; // make reactive to pass through
@@ -323,12 +323,7 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
'form-control--has-label': hasLabel,
})}
>
<label
part="form-control-label"
class="form-control__label"
for="input"
aria-hidden=${hasLabel ? 'false' : 'true'}
>
<label part="form-control-label" class="label" for="input" aria-hidden=${hasLabel ? 'false' : 'true'}>
<slot name="label">${this.label}</slot>
</label>
@@ -353,7 +348,7 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
<textarea
part="textarea"
id="input"
class="textarea__control"
class="control"
title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}
name=${ifDefined(this.name)}
.value=${live(this.value)}
@@ -378,7 +373,7 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
></textarea>
<!-- This "adjuster" exists to prevent layout shifting. https://github.com/shoelace-style/shoelace/issues/2180 -->
<div part="textarea-adjuster" class="textarea__size-adjuster" ?hidden=${this.resize !== 'auto'}></div>
<div part="textarea-adjuster" class="size-adjuster" ?hidden=${this.resize !== 'auto'}></div>
</div>
</div>

2
src/components/tooltip/tooltip.css
View File

@@ -35,7 +35,7 @@
transform-origin: left;
}
.tooltip__body {
.body {
display: block;
width: max-content;
max-width: var(--max-width);

2
src/components/tooltip/tooltip.test.ts
View File

@@ -153,7 +153,7 @@ describe('<wa-tooltip>', () => {
<wa-button id="wa-button">Hover Me</wa-button>
`);
const tooltipBody = el.shadowRoot!.querySelector('.tooltip__body')!;
const tooltipBody = el.shadowRoot!.querySelector('.body')!;
const userSelect = getComputedStyle(tooltipBody).userSelect || getComputedStyle(tooltipBody).webkitUserSelect;
expect(userSelect).to.equal('none');

4
src/components/tooltip/tooltip.ts
View File

@@ -50,7 +50,7 @@ export default class WaTooltip extends WebAwesomeElement {
private closeWatcher: CloseWatcher | null;
@query('slot:not([name])') defaultSlot: HTMLSlotElement;
@query('.tooltip__body') body: HTMLElement;
@query('.body') body: HTMLElement;
@query('wa-popup') popup: WaPopup;
/**
@@ -361,7 +361,7 @@ export default class WaTooltip extends WebAwesomeElement {
hover-bridge
.anchor=${this.anchor}
>
<div part="body" class="tooltip__body">
<div part="body" class="body">
<slot></slot>
</div>
</wa-popup>

46
src/components/tree-item/tree-item.css
View File

@@ -29,29 +29,29 @@ slot:not([name])::slotted(wa-icon) {
-webkit-user-select: none;
}
.tree-item__checkbox {
.checkbox {
pointer-events: none;
}
.tree-item__expand-button,
.tree-item__checkbox,
.tree-item__label {
.expand-button,
.checkbox,
.label {
font: inherit;
font-size: var(--wa-font-size-m);
}
.tree-item__checkbox::part(base) {
.checkbox::part(base) {
display: flex;
align-items: center;
}
.tree-item__indentation {
.indentation {
display: block;
width: 1em;
flex-shrink: 0;
}
.tree-item__expand-button {
.expand-button {
display: flex;
align-items: center;
justify-content: center;
@@ -62,15 +62,15 @@ slot:not([name])::slotted(wa-icon) {
cursor: pointer;
}
.tree-item__expand-button {
.expand-button {
transition: rotate var(--wa-transition-normal) var(--wa-transition-easing);
}
.tree-item--expanded .tree-item__expand-button {
.tree-item--expanded .expand-button {
rotate: 90deg;
}
.tree-item--expanded.tree-item--rtl .tree-item__expand-button {
.tree-item--expanded.tree-item--rtl .expand-button {
rotate: -90deg;
}
@@ -79,58 +79,58 @@ slot:not([name])::slotted(wa-icon) {
display: none;
}
.tree-item:not(.tree-item--has-expand-button) .tree-item__expand-icon-slot {
.tree-item:not(.tree-item--has-expand-button) .expand-icon-slot {
display: none;
}
.tree-item__expand-button--visible {
.expand-button--visible {
cursor: pointer;
}
.tree-item__item {
.item {
display: flex;
align-items: center;
border-inline-start: solid 3px transparent;
}
.tree-item--disabled .tree-item__item {
.tree-item--disabled .item {
opacity: 0.5;
outline: none;
cursor: not-allowed;
}
:host(:focus-visible) .tree-item__item {
:host(:focus-visible) .item {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
z-index: 2;
}
:host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {
:host(:not([aria-disabled='true'])) .tree-item--selected .item {
background-color: var(--selection-background-color);
border-inline-start-color: var(--selection-indicator-color);
}
:host(:not([aria-disabled='true'])) .tree-item__expand-button {
:host(:not([aria-disabled='true'])) .expand-button {
color: var(--expand-button-color);
}
.tree-item__label {
.label {
display: flex;
align-items: center;
transition: color var(--wa-transition-normal) var(--wa-transition-easing);
}
.tree-item__children {
.children {
display: block;
font-size: calc(1em + var(--indent-size, var(--wa-space-m)));
}
/* Indentation lines */
.tree-item__children {
.children {
position: relative;
}
.tree-item__children::before {
.children::before {
content: '';
position: absolute;
top: var(--indent-guide-offset);
@@ -140,13 +140,13 @@ slot:not([name])::slotted(wa-icon) {
z-index: 1;
}
.tree-item--rtl .tree-item__children::before {
.tree-item--rtl .children::before {
left: auto;
right: 1em;
}
@media (forced-colors: active) {
:host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {
:host(:not([aria-disabled='true'])) .tree-item--selected .item {
outline: dashed 1px SelectedItem;
}
}

10
src/components/tree-item/tree-item.test.ts
View File

@@ -38,7 +38,7 @@ describe('<wa-tree-item>', () => {
it('should show the expand button', () => {
// Arrange
const expandButton = parentItem.shadowRoot?.querySelector('.tree-item__expand-button');
const expandButton = parentItem.shadowRoot?.querySelector('.expand-button');
// Act
@@ -97,7 +97,7 @@ describe('<wa-tree-item>', () => {
describe('and the item is disabled', () => {
it('should not expand', async () => {
// Arrange
const expandButton: HTMLElement = parentItem.shadowRoot!.querySelector('.tree-item__expand-button')!;
const expandButton: HTMLElement = parentItem.shadowRoot!.querySelector('.expand-button')!;
parentItem.disabled = true;
// Act
@@ -128,7 +128,7 @@ describe('<wa-tree-item>', () => {
await leafItem.updateComplete;
// Assert
expect(leafItem.shadowRoot?.querySelector('.tree-item__item')?.part.contains('item--selected')).to.be.true;
expect(leafItem.shadowRoot?.querySelector('.item')?.part.contains('item--selected')).to.be.true;
});
});
@@ -148,7 +148,7 @@ describe('<wa-tree-item>', () => {
await leafItem.updateComplete;
// Assert
expect(leafItem.shadowRoot?.querySelector('.tree-item__item')?.part.contains('item--disabled')).to.be.true;
expect(leafItem.shadowRoot?.querySelector('.item')?.part.contains('item--disabled')).to.be.true;
});
});
@@ -159,7 +159,7 @@ describe('<wa-tree-item>', () => {
await leafItem.updateComplete;
// Assert
expect(leafItem.shadowRoot?.querySelector('.tree-item__item')?.part.contains('item--expanded')).to.be.true;
expect(leafItem.shadowRoot?.querySelector('.item')?.part.contains('item--expanded')).to.be.true;
});
});

24
src/components/tree-item/tree-item.ts
View File

@@ -97,9 +97,9 @@ export default class WaTreeItem extends WebAwesomeElement {
@query('slot:not([name])') defaultSlot: HTMLSlotElement;
@query('slot[name=children]') childrenSlot: HTMLSlotElement;
@query('.tree-item__item') itemElement: HTMLDivElement;
@query('.tree-item__children') childrenContainer: HTMLDivElement;
@query('.tree-item__expand-button slot') expandButtonSlot: HTMLSlotElement;
@query('.item') itemElement: HTMLDivElement;
@query('.children') childrenContainer: HTMLDivElement;
@query('.expand-button slot') expandButtonSlot: HTMLSlotElement;
connectedCallback() {
super.connectedCallback();
@@ -262,25 +262,25 @@ export default class WaTreeItem extends WebAwesomeElement {
'tree-item--rtl': this.localize.dir() === 'rtl',
})}"
>
<div class="tree-item__item" part="item">
<div class="tree-item__indentation" part="indentation"></div>
<div class="item" part="item">
<div class="indentation" part="indentation"></div>
<div
part="expand-button"
class=${classMap({
'tree-item__expand-button': true,
'tree-item__expand-button--visible': showExpandButton,
'expand-button': true,
'expand-button--visible': showExpandButton,
})}
aria-hidden="true"
>
<slot class="expand-icon-slot" name="expand-icon">
${when(
this.loading,
() => html` <wa-spinner part="spinner" exportparts="base:spinner__base"></wa-spinner> `,
)}
<slot class="tree-item__expand-icon-slot" name="expand-icon">
<wa-icon name=${isRtl ? 'chevron-left' : 'chevron-right'} library="system" variant="solid"></wa-icon>
</slot>
<slot class="tree-item__expand-icon-slot" name="collapse-icon">
<slot class="expand-icon-slot" name="collapse-icon">
<wa-icon name=${isRtl ? 'chevron-left' : 'chevron-right'} library="system" variant="solid"></wa-icon>
</slot>
</div>
@@ -297,7 +297,7 @@ export default class WaTreeItem extends WebAwesomeElement {
indeterminate-icon:checkbox__indeterminate-icon,
label:checkbox__label
"
class="tree-item__checkbox"
class="checkbox"
?disabled="${this.disabled}"
?checked="${live(this.selected)}"
?indeterminate="${this.indeterminate}"
@@ -306,10 +306,10 @@ export default class WaTreeItem extends WebAwesomeElement {
`,
)}
<slot class="tree-item__label" part="label"></slot>
<slot class="label" part="label"></slot>
</div>
<div class="tree-item__children" part="children" role="group">
<div class="children" part="children" role="group">
<slot name="children" @slotchange="${this.handleChildrenSlotChange}"></slot>
</div>
</div>

2
src/components/tree/tree.test.ts
View File

@@ -434,7 +434,7 @@ describe('<wa-tree>', () => {
const node = el.children[2] as WaTreeItem;
await node.updateComplete;
const expandButton: HTMLElement = node.shadowRoot!.querySelector('.tree-item__expand-button')!;
const expandButton: HTMLElement = node.shadowRoot!.querySelector('.expand-button')!;
// Act
await clickOnElement(expandButton);

4
src/components/tree/tree.ts
View File

@@ -292,9 +292,7 @@ export default class WaTree extends WebAwesomeElement {
private handleClick(event: Event) {
const target = event.target as WaTreeItem;
const treeItem = target.closest('wa-tree-item')!;
const isExpandButton = event
.composedPath()
.some((el: HTMLElement) => el?.classList?.contains('tree-item__expand-button'));
const isExpandButton = event.composedPath().some((el: HTMLElement) => el?.classList?.contains('expand-button'));
//
// Don't Do anything if there's no tree item, if it's disabled, or if the click doesn't match the initial target

6
src/styles/shadow/form-control.css
View File

@@ -1,9 +1,9 @@
.form-control .form-control__label {
.form-control .label {
display: none;
}
/* Label */
.form-control--has-label .form-control__label {
.form-control--has-label .label {
display: inline-block;
color: var(--wa-form-control-label-color);
font-weight: var(--wa-form-control-label-font-weight);
@@ -23,7 +23,7 @@
}
}
:host([required]) .form-control--has-label .form-control__label::after {
:host([required]) .form-control--has-label .label::after {
content: var(--wa-form-control-required-content);
margin-inline-start: var(--wa-form-control-required-content-offset);
color: var(--wa-form-control-required-content-color);