diff --git a/docs/_includes/base.njk b/docs/_includes/base.njk index 7212cbdfa..b258b5227 100644 --- a/docs/_includes/base.njk +++ b/docs/_includes/base.njk @@ -50,11 +50,16 @@ {# Logo #}
+ {# Nav toggle #} + + + - {% include "logo.njk" %} + {% include "logo.njk" %} + {% include "logo-simple.njk" %} - {{ package.version }} - Alpha + {{ package.version }} + Alpha
@@ -63,8 +68,8 @@ - Light - Dark + Light + Dark Light @@ -78,7 +83,7 @@ Search - / + /
diff --git a/docs/_includes/logo-simple.njk b/docs/_includes/logo-simple.njk index 910ecd9d3..1d58e868e 100644 --- a/docs/_includes/logo-simple.njk +++ b/docs/_includes/logo-simple.njk @@ -1 +1,3 @@ - + + + \ No newline at end of file diff --git a/src/themes/cera_typeface.css b/docs/assets/styles/cera_typeface.css similarity index 100% rename from src/themes/cera_typeface.css rename to docs/assets/styles/cera_typeface.css diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css index 444b910bc..356a333d5 100644 --- a/docs/assets/styles/docs.css +++ b/docs/assets/styles/docs.css @@ -3,9 +3,11 @@ @import 'copy-code.css'; @import 'outline.css'; @import 'search.css'; +@import 'cera_typeface.css'; :root { --wa-brand-orange: #f36944; + --wa-brand-grey: #30323b; } html.wa-theme-default-dark .only-light, @@ -21,6 +23,11 @@ wa-page[view='desktop'] [data-toggle-nav] { display: none; } +wa-page[view='desktop'] .only-mobile, +wa-page:not([view='desktop']) .only-desktop { + display: none; +} + /* Header */ wa-page::part(header) { background-color: var(--wa-color-surface-default); @@ -32,7 +39,7 @@ wa-page > header { display: flex; align-items: center; justify-content: space-between; - height: 64px; + height: 4rem; padding-inline: var(--wa-space-xl); a[href='/'] { @@ -40,6 +47,14 @@ wa-page > header { line-height: 1; } + wa-button[data-toggle-nav] { + --label-color: currentColor; + margin-inline-end: 0.75rem; + &::part(base) { + padding: 0; + } + } + svg { width: auto; height: 1.75rem; @@ -207,7 +222,6 @@ wa-page > main { } /* Swatches */ - .swatch { background-color: transparent; border-color: var(--wa-color-neutral-border-normal); @@ -219,3 +233,9 @@ wa-page > main { height: 2.5em; padding-inline: var(--wa-space-xs); } + +/* Utilities */ +.two-columns { + columns: 2; + gap: 1rem; +} diff --git a/docs/assets/styles/search.css b/docs/assets/styles/search.css index 47ae0313d..d22bcc748 100644 --- a/docs/assets/styles/search.css +++ b/docs/assets/styles/search.css @@ -224,6 +224,7 @@ header { #site-search footer { flex: 0 0 auto; display: flex; + flex-direction: row; justify-content: center; gap: 2rem; color: var(--wa-color-text-quiet); diff --git a/docs/docs/experimental/style-guide.md b/docs/docs/experimental/style-guide.md index 3004c7a48..5efbf2593 100644 --- a/docs/docs/experimental/style-guide.md +++ b/docs/docs/experimental/style-guide.md @@ -21,11 +21,10 @@ Cras pulvinar mattis nunc sed blandit libero. Facilisis magna etiam tempor orci. ## Inline Text ```html - Feugiat nisl pretium fusce id. Ipsum dolor sit amet consectetur adipiscing elit. Eget nunc lobortis mattis aliquam faucibus purus. Metus dictum at tempor commodo ullamcorper a lacus vestibulum. Urna condimentum mattis pellentesque id nibh tortor id. ``` -
+

Bold

Italics

Underline

@@ -85,17 +84,17 @@ Individual details look like this. Grouping them provides accordion-style functionality. -
+
Enim diam

Nunc faucibus a pellentesque sit amet porttitor. Adipiscing tristique risus nec feugiat in fermentum. Leo duis ut diam quam nulla porttitor massa id. Mauris nunc congue nisi vitae.

-
+
Arcu non odio

Sed libero enim sed faucibus turpis in eu mi bibendum. Nunc mi ipsum faucibus vitae aliquet nec. Ultricies tristique nulla aliquet enim tortor. Tellus at urna condimentum mattis pellentesque.

-
+
Ut porttitor

Eu facilisis sed odio morbi quis commodo odio aenean sed. Sit amet purus gravida quis blandit turpis cursus. Eu consequat ac felis donec et odio pellentesque diam volutpat.

diff --git a/docs/docs/localization.md b/docs/docs/localization.md index e99b32811..f4cb00e24 100644 --- a/docs/docs/localization.md +++ b/docs/docs/localization.md @@ -4,7 +4,7 @@ description: Discover how to localize Web Awesome with minimal effort. layout: page.njk --- -Components can be localized by importing the appropriate translation file and setting the desired [`lang` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) and/or [`dir` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) on the `` element. Here's an example that renders Web Awesome components in Spanish. +Components can be localized by importing the appropriate translation file and setting the desired [`lang`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) and/or [`dir`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) attributes on the `` element. Here's an example that renders Web Awesome components in Spanish. ```html diff --git a/docs/docs/theming/component-groups.md b/docs/docs/theming/component-groups.md index d74af4409..1eaac0e8e 100644 --- a/docs/docs/theming/component-groups.md +++ b/docs/docs/theming/component-groups.md @@ -112,9 +112,6 @@ Tooltip styles are shared between the [tooltip](/docs/components/tooltip) compon | `--wa-tooltip-line-height` | `var(--wa-line-height-normal)` | ```html {.example} - - - -
- + +This is a tooltip ``` \ No newline at end of file diff --git a/docs/docs/theming/typography.md b/docs/docs/theming/typography.md index 567a40234..46fa02b39 100644 --- a/docs/docs/theming/typography.md +++ b/docs/docs/theming/typography.md @@ -75,7 +75,3 @@ Together with [`--wa-color-link`](/docs/theming/color/#text), these custom prope | ------------------------------ | ---------------------------------------------------------------------------------- | | `--wa-link-decoration-default` | `underline color-mix(in oklab, var(--wa-color-text-link) 70%, transparent) dotted` | | `--wa-link-decoration-hover` | `underline` | - -```html {.example} -Web Awesome anchor -``` \ No newline at end of file diff --git a/docs/index.md b/docs/index.md index df3cf2ff8..d3be2ea9d 100644 --- a/docs/index.md +++ b/docs/index.md @@ -4,6 +4,286 @@ description: Build better with Web Awesome, the open source library of web compo layout: page.njk --- -This is the homepage. It will soon look awesome. Until then, click the button. 👇 + -Go somewhere +
+
+ +

Make something awesome with open-source web components

+
+ Psst! You can pre-order Web Awesome Pro at a low, guaranteed-for-life price — but not for long. Get in while the gettin’s good. + +
+
+
+ +
+
+

What's Web Awesome?

+

Web Awesome is the biggest open-source library of meticulously designed, highly customizable, and framework-agnostic UI components.

+
+
+
+ +

Entirely native

+
+

Built on web standards to last for years to come. No excess tooling. No third-party bloat.

+
+
+
+ +

Fully customizable

+
+

Show off your own style with components that consistently adapt to your theme.

+
+
+
+ +

Accessibility forward

+
+

Build a website that everyone can use. Designed to be inclusive and usable by everyone.

+
+
+
+ +

Proudly open source

+
+

Use Web Awesome Free however you like. Always free, always open source.

+
+
+
+ +
+
+

You put the awesome in Web Awesome

+

Web Awesome started as an open-source project fueled by contributions from an engaged community of developers, and we want to keep it that way. The core of Web Awesome is — and always will be — free and open source.

+

Whether you’re a developer, designer, or budding tech nerd, we want you a part of the conversation.

+
+
+
+
+ +

Get in touch

+
+

Have a question? Want to share your feedback? Just stopping by to say 'hi'? Email us at hello@webawesome.com.

+
+
+
+ +

Follow us

+
+

Keep up with Web Awesome through updates, announcements, and polls. Find us on Twitter (X) and Instagram.

+
+
+
+ + + +
+ +
+
+ Let's Make Something Awesome +

Web Awesome is the design system platform and open source library of web components from your fellow nerds at Font Awesome.

+
+
+ Special thanks +
+ Lit + Custom Elements Manifest + 11ty + Floating UI + animate.css + Lunr +
+
+
+
+ © Fonticons, Inc. +
+
+
diff --git a/src/components/option/option.ts b/src/components/option/option.ts index afc3a822e..be3689f04 100644 --- a/src/components/option/option.ts +++ b/src/components/option/option.ts @@ -25,6 +25,7 @@ import type { CSSResultGroup } from 'lit'; * @cssproperty --background-color-hover - The options's background color on hover. * @cssproperty --label-color-current - The current option's label color. * @cssproperty --label-color-hover - The label color on hover. + * * @csspart checked-icon - The checked icon, a `` element. * @csspart base - The component's base wrapper. * @csspart label - The option's label. diff --git a/src/components/page/page.ts b/src/components/page/page.ts index b89055a7a..c901756b6 100644 --- a/src/components/page/page.ts +++ b/src/components/page/page.ts @@ -245,8 +245,9 @@ export default class WaPage extends WebAwesomeElement {
(this.navOpen = this.navigationDrawer.open)} @wa-after-hide=${() => (this.navOpen = this.navigationDrawer.open)}