HELLO WORLD

I am an Astro SSR'ed Web Awesome app at 6/24/2026, 10:13:16 PM

Native

Native style tests ensure that supported native elements and utilities look the same as their Web Awesome component counterparts. Native elements may also support the same appearance, color, and size utilities as components.

Button

	`<wa-button>`	`<button>`
default	Button
`accent`	BrandNeutralSuccessWarningDanger
`filled-outlined`	BrandNeutralSuccessWarningDanger
`filled`	BrandNeutralSuccessWarningDanger
`outlined`	BrandNeutralSuccessWarningDanger
`plain`	BrandNeutralSuccessWarningDanger
`s`	Small
`m`	Medium
`l`	Large
`pill`	Pill

Checkbox

	`<wa-checkbox>`	`<input type="checkbox">`
default	Checkbox	Checkbox
`checked`	Checkbox	Checkbox

Color Picker

	`<wa-color-picker>`	`<input type="color">`
default		Color Picker

Details

	`<wa-details>`	`<details>`
default	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.	Summary Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
`dir="rtl"`	استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن	تبديلني استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن

Input

	`<wa-input>`	`<input>`
default		Input
`type="password"`		Input (password)
`type="date"`		Input (date)
`type="time"`		Input (time)
`filled`		Input (filled)
`s`		Input (small)
`m`		Input (medium)
`l`		Input (large)

Progress Bar

	`<wa-progress-bar>`	`<progress>`
default

Radio

	`<wa-radio>`	`<input type="radio">`
default	Radio	Radio
`checked`	Radio	Radio

Select

	`<wa-select>`	`<select>`
default	Option	Select
`filled`	Option	Select (filled)
`s`	Option	Select (small)
`m`	Option	Select (medium)
`l`	Option	Select (large)

Slider

	`<wa-slider>`	`<input type="range">`
default		Slider

Textarea

	`<wa-textarea>`	`<textarea>`
default		Textarea
`filled`		Textarea (filled)
`s`		Textarea (small)
`m`		Textarea (medium)
`l`		Textarea (large)

Size

Size tests ensure that both the size attribute and.wa-size-[xs|s|m|l|xl] classes have identical results for components that support them. Developers should be able to use both of these interchangeably on components to get the intended size.

Button

	`size=""`	`.wa-size-[xs\|s\|m\|l\|xl]`
`xs`	Button	Button
`s`	Button	Button
`m`	Button	Button
`l`	Button	Button
`xl`	Button	Button

Callout

	`size=""`	`.wa-size-[xs\|s\|m\|l\|xl]`
`xs`	Callout	Callout
`s`	Callout	Callout
`m`	Callout	Callout
`l`	Callout	Callout
`xl`	Callout	Callout

Checkbox

	`size=""`	`.wa-size-[xs\|s\|m\|l\|xl]`
`xs`	Checkbox	Checkbox
`s`	Checkbox	Checkbox
`m`	Checkbox	Checkbox
`l`	Checkbox	Checkbox
`xl`	Checkbox	Checkbox

Color Picker

	`size=""`	`.wa-size-[xs\|s\|m\|l\|xl]`
`xs`
`s`
`m`
`l`
`xl`

	`size=""`	`.wa-size-[xs\|s\|m\|l\|xl]`
`xs`	Dropdown Menu Item 1 Menu Item 2	Dropdown Menu Item 1 Menu Item 2
`s`	Dropdown Menu Item 1 Menu Item 2	Dropdown Menu Item 1 Menu Item 2
`m`	Dropdown Menu Item 1 Menu Item 2	Dropdown Menu Item 1 Menu Item 2
`l`	Dropdown Menu Item 1 Menu Item 2	Dropdown Menu Item 1 Menu Item 2
`xl`	Dropdown Menu Item 1 Menu Item 2	Dropdown Menu Item 1 Menu Item 2

Input

	`size=""`	`.wa-size-[xs\|s\|m\|l\|xl]`
`xs`
`s`
`m`
`l`
`xl`

Radio

	`size=""`	`.wa-size-[xs\|s\|m\|l\|xl]`
`xs`	Radio	Radio
`s`	Radio	Radio
`m`	Radio	Radio
`l`	Radio	Radio
`xl`	Radio	Radio

Radio Button

	`size=""`	`.wa-size-[xs\|s\|m\|l\|xl]`
`xs`	Radio Button	Radio Button
`s`	Radio Button	Radio Button
`m`	Radio Button	Radio Button
`l`	Radio Button	Radio Button
`xl`	Radio Button	Radio Button

Radio Group

	`size=""`	`.wa-size-[xs\|s\|m\|l\|xl]`
`xs`	Radio 1 Radio 2 Radio 1 Radio 2	Radio 1 Radio 2 Radio 1 Radio 2
`s`	Radio 1 Radio 2 Radio 1 Radio 2	Radio 1 Radio 2 Radio 1 Radio 2
`m`	Radio 1 Radio 2 Radio 1 Radio 2	Radio 1 Radio 2 Radio 1 Radio 2
`l`	Radio 1 Radio 2 Radio 1 Radio 2	Radio 1 Radio 2 Radio 1 Radio 2
`xl`	Radio 1 Radio 2 Radio 1 Radio 2	Radio 1 Radio 2 Radio 1 Radio 2

Rating

	`size=""`	`.wa-size-[xs\|s\|m\|l\|xl]`
`xs`
`s`
`m`
`l`
`xl`

Select

	`size=""`	`.wa-size-[xs\|s\|m\|l\|xl]`
`xs`	Option	Option
`s`	Option	Option
`m`	Option	Option
`l`	Option	Option
`xl`	Option	Option

Switch

	`size=""`	`.wa-size-[xs\|s\|m\|l\|xl]`
`xs`	Switch	Switch
`s`	Switch	Switch
`m`	Switch	Switch
`l`	Switch	Switch
`xl`	Switch	Switch

Textarea

	`size=""`	`.wa-size-[xs\|s\|m\|l\|xl]`
`xs`
`s`
`m`
`l`
`xl`