update version in tag

Bump changelog
🚀 Add Launch Announcement Banner (#1662 )
2026-01-21 08:14:16 +00:00 · 2025-12-02 19:02:03 -05:00 · 2025-10-28 12:13:59 -04:00 · 2025-10-28 11:07:08 -04:00 · 2025-10-28 10:42:52 -04:00
9 changed files with 141 additions and 30 deletions
--- a/packages/webawesome/docs/_includes/_banner-wa-launch.njk
+++ b/packages/webawesome/docs/_includes/_banner-wa-launch.njk
@@ -0,0 +1,19 @@
+{% raw %}
+  {%- if not currentUser.hasPro -%}
+  <div slot="banner" class="banner-wa-launch wa-dark">
+    <div class="banner-content wa-split">
+      <div class="wa-cluster wa-gap-s">
+        <wa-icon name="badge-percent" class="banner-icon"></wa-icon>
+        <p class="wa-body-s">
+          <strong style="margin-inline-end: var(--wa-space-2xs)">Web Awesome is here!</strong>
+          Celebrate with <span class="appearance-underlined variant-drawn">20% off</span> on a Web Awesome Pro plan&hellip; <span class="appearance-underlined variant-drawn">for life</span>!
+        </p>
+      </div>
+      <wa-button appearance="outlined" variant="brand" size="small" href="/purchase" class="brand-font">
+        <wa-icon slot="start" variant="regular" name="rocket-launch"></wa-icon>
+        Get Pro + Save 20%
+      </wa-button>
+    </div>
+  </div>
+  {%- endif -%}
+{% endraw %}
--- a/packages/webawesome/docs/_includes/base.njk
+++ b/packages/webawesome/docs/_includes/base.njk
@@ -27,7 +27,11 @@
    </script>
  </head>
  <body class="layout-{{ layout | stripExtension }} page-{{ pageClass or page.fileSlug or 'home' }}{{ ' page-wide' if wide }}">
-    {% set defaultWaPageAttributes = defaultWaPageAttributes or { view: 'desktop', 'disable-navigation-toggle': true, 'mobile-breakpoint': 1180 } %}
+    {% if hasBanner == undefined %}
+      {% set hasBanner = true %}
+    {% endif %}
+
+    {% set defaultWaPageAttributes = defaultWaPageAttributes or { view: 'desktop', 'disable-navigation-toggle': true, 'mobile-breakpoint': 1180, 'disable-sticky': 'banner' } %}
    {% set waPageAttributes = waPageAttributes or {} %}
    {% set mergedWaPageAttributes = defaultWaPageAttributes | merge(waPageAttributes) %}
    <wa-page
@@ -37,6 +41,13 @@
        {% endif %}
      {% endfor %}
    >
+        {% block pageBanner %}
+          {% if hasBanner %}
+            {#- WA Launch Banner -#}
+            {% include "_banner-wa-launch.njk" ignore missing %}
+          {% endif %}
+        {% endblock %}
+
        {% block pageHeader %}
          <header slot="header" class="wa-split">
            {# Nav toggle #}
--- a/packages/webawesome/docs/assets/styles/docs.css
+++ b/packages/webawesome/docs/assets/styles/docs.css
@@ -27,6 +27,43 @@ body.theme-transitioning {
  transition: opacity 200ms ease-out;
 }

+/* banner */
+wa-page > [slot='banner'] {
+  padding: var(--wa-space-0);
+
+  .banner-content {
+    /* match docs header padding-inline by default */
+    padding-inline: var(--wa-space-xl);
+    padding-block: var(--wa-space-m);
+  }
+
+  &.banner-wa-launch {
+    /* custom brand colors carrried over from theme-site for the banner */
+    --wa-color-brand-95: #fef0ec;
+    --wa-color-brand-90: #fce0d8;
+    --wa-color-brand-80: #f8bcac;
+    --wa-color-brand-70: #fa9378;
+    --wa-color-brand-60: #f46a45;
+    --wa-color-brand-50: #cb4b27;
+    --wa-color-brand-40: #9d371a;
+    --wa-color-brand-30: #7c2a13;
+    --wa-color-brand-20: #5d1d0b;
+    --wa-color-brand-10: #3b0f05;
+    --wa-color-brand-05: #270802;
+    --wa-color-brand: var(--wa-color-brand-60);
+    --wa-color-brand-on: var(--wa-color-brand-10);
+
+    .banner-icon {
+      color: var(--wa-color-brand-fill-loud);
+      font-size: var(--wa-font-size-xl);
+    }
+
+    .appearance-underlined.variant-drawn {
+      --underline-color: var(--wa-color-brand);
+    }
+  }
+}
+
 /* Header */
 wa-page::part(header) {
  background-color: var(--wa-color-surface-default);
--- a/packages/webawesome/docs/assets/styles/utils.css
+++ b/packages/webawesome/docs/assets/styles/utils.css
@@ -127,6 +127,28 @@

  /* #region funsies + cosmetics */

+  /* decorative underline emphasis */
+  .appearance-underlined.variant-drawn {
+    --underline-color: currentColor;
+    position: relative;
+    text-decoration: none;
+    padding-bottom: 0.4em;
+
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      height: 0.4em;
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cpath d='M0,12 Q50,8 100,12' stroke='black' stroke-width='4' fill='none'/%3E%3C/svg%3E");
+      mask-repeat: no-repeat;
+      mask-size: 100% auto;
+      mask-position: 0 100%;
+      background-color: var(--underline-color);
+    }
+  }
+
  /* grid background */
  .background-grid {
    --grid-spacing: var(--wa-space-2xl);
--- a/packages/webawesome/docs/docs/components/card.md
+++ b/packages/webawesome/docs/docs/components/card.md
@@ -100,19 +100,20 @@ If using SSR, you need to also use the `with-media` attribute to add a media sec
 ```html {.example}
 <div class="wa-grid">
  <wa-card class="card-media">
-    <img
-      slot="media"
-      src="https://images.unsplash.com/photo-1547191783-94d5f8f6d8b1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80"
-      alt="A kitten walks towards camera on top of pallet."
-    />
-    This is a kitten, but not just any kitten. This kitten likes walking along pallets.
+    <div slot="media" class="wa-frame:landscape">
+      <img
+        src="https://images.unsplash.com/photo-1547191783-94d5f8f6d8b1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80"
+        alt="A kitten walks towards camera on top of pallet."
+      />
+    </div>
+    This card has an image of a kitten walking along a pallet. 
  </wa-card>
  <wa-card class="card-media">
    <video slot="media" controls>
      <source src="https://uploads.webawesome.com/dog-with-glasses.mp4" />
      <p>Your browser doesn't support HTML video</p>
    </video>
-    This is a kitten, but not just any kitten. This kitten likes walking along pallets.
+    This card has a video of a dog wearing shades.
  </wa-card>
 </div>

@@ -153,10 +154,10 @@ Use the `appearance` attribute to change the card's visual appearance.
 ### Orientation

 Set the `orientation` attribute to `horizontal` to create a card with a horizontal, side-by-side layout. Make sure to set a width or maximum width for the media slot. Horizontal cards do not currently contain the header and footer slots.
-<wa-callout>
-<wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
+
+:::info
 The `actions` slot is only available for the horizontal orientation
-</wa-callout>
+:::

 ```html {.example}
 <div class="wa-grid">
@@ -166,7 +167,7 @@ The `actions` slot is only available for the horizontal orientation
      src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
      alt="A kitten sits patiently between a terracotta pot and decorative grasses."
    />
-    This is a kitten, but not just any kitten. This kitten likes walking along pallets.
+    This card has a horizontal orientation with media, body, and actions arranged side-by-side.
    <wa-button slot="actions" variant="neutral" appearance="plain"
      ><wa-icon name="ellipsis" label="actions"></wa-icon
    ></wa-button>
--- a/packages/webawesome/docs/docs/resources/changelog.md
+++ b/packages/webawesome/docs/docs/resources/changelog.md
@@ -10,7 +10,7 @@ Web Awesome follows [Semantic Versioning](https://semver.org/). Breaking changes

 Components with the <wa-badge variant="warning">Experimental</wa-badge> badge should not be used in production. They are made available as release candidates for development and testing purposes. As such, changes to experimental components will not be subject to semantic versioning.

-## Next
+## 3.0.0

 - 🚨 BREAKING: Changed `appearance="filled outlined"` to `appearance="filled-outlined"` in the following elements [issue:1127]
  - `<wa-badge>`
@@ -27,6 +27,7 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 - Added back the missing `form-control-label` part to `<wa-textarea>` for consistency with other form controls [pr:1533]
 - Added focus delegation to `<wa-button>` to ensure tabbing works properly when using `tabindex` [issue:1622]
 - Added [text utilities](/docs/utilities/text/) for longform text, form control text, font sizes, font weights, text color, and truncation [pr:1602]
+- Added version 1.0.0 of the [official Web Awesome Figma Design Kit](/docs/resources/figma)
 - Fixed a bug in `<wa-button>` where slotted badges weren't properly positioned in buttons with an `href` [issue:1377]
 - Fixed focus outline styles in `<wa-details>` and native `<details>` [issue:1456]
 - Fixed focus outline styles in `<wa-scroller>`, `<wa-dialog>`, and `<wa-drawer>` [issue:1484]
@@ -40,7 +41,9 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 - Fixed a bug that caused the required `*` in form labels to have incorrect spacing in `<wa-checkbox>` and `<wa-switch>` [issue:1472]
 - Fixed a bug in `<wa-dialog>` and `<wa-drawer>` that caused the component to prematurely hide when certain child elements are used [pr:1636]
 - Fixed a bug in `<wa-popover>` and `<wa-tooltip>` that prevented dots and other valid ID characters from being used [issue:1648]
+- [Pro] Fixed a bug in `<wa-page>` that caused menu and aside content to reserve space for slots with `disable-sticky`
 - Fixed incorrect docs for the `wa-include-error` event which is dispatched by `<wa-include>` [issue:1663]
+- Fixed a bug in `<wa-card>` where slotted header and footer content wasn't properly aligned [pr:1435]
 - Improved autofill styles in `<wa-input>` so they span the entire width of the visual input [issue:1439]
 - Improved [text utilities](/docs/utilities/text/) so that each size modifier always exactly matches the applied font size [pr:1602]
 - Improved Native Styles to use the `--wa-font-weight-code` design token
@@ -489,4 +492,4 @@ Many of these changes and improvements were the direct result of feedback from u

 </details>

-Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome/discussions)
+Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome/discussions)
--- a/packages/webawesome/package.json
+++ b/packages/webawesome/package.json
@@ -4,7 +4,7 @@
    "access": "public"
  },
  "description": "A forward-thinking library of web components.",
-  "version": "3.0.0-beta.6",
+  "version": "3.0.0",
  "homepage": "https://webawesome.com/",
  "author": "Web Awesome",
  "license": "MIT",
--- a/packages/webawesome/src/components/card/card.css
+++ b/packages/webawesome/src/components/card/card.css
@@ -77,9 +77,7 @@
 }

 .header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+  display: block;
  border-block-end-style: inherit;
  border-block-end-color: var(--wa-color-surface-border);
  border-block-end-width: var(--wa-panel-border-width);
@@ -92,15 +90,20 @@
 }

 .footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+  display: block;
  border-block-start-style: inherit;
  border-block-start-color: var(--wa-color-surface-border);
  border-block-start-width: var(--wa-panel-border-width);
  padding: var(--spacing);
 }

+/* Push slots to sides when the action slots renders */
+.has-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
 :host(:not([with-header])) .header,
 :host(:not([with-footer])) .footer,
 :host(:not([with-media])) .media {
@@ -115,7 +118,12 @@
    border-start-start-radius: var(--inner-border-radius);
    border-end-start-radius: var(--inner-border-radius);
    border-start-end-radius: 0;
-    object-fit: cover;
+
+    &::slotted(*) {
+      block-size: 100%;
+      inline-size: 100%;
+      object-fit: cover;
+    }
  }
 }

--- a/packages/webawesome/src/components/card/card.ts
+++ b/packages/webawesome/src/components/card/card.ts
@@ -69,15 +69,25 @@ export default class WaCard extends WebAwesomeElement {
    // Vertical Orientation
    return html`
      <slot name="media" part="media" class="media"></slot>
-      <header part="header" class="header">
-        <slot name="header"></slot>
-        <slot name="header-actions"></slot>
-      </header>
+
+      ${this.hasSlotController.test('header-actions')
+        ? html` <header part="header" class="header has-actions">
+            <slot name="header"></slot>
+            <slot name="header-actions"></slot>
+          </header>`
+        : html` <header part="header" class="header">
+            <slot name="header"></slot>
+          </header>`}
+
      <slot part="body" class="body"></slot>
-      <footer part="footer" class="footer">
-        <slot name="footer"></slot>
-        <slot name="footer-actions"></slot>
-      </footer>
+      ${this.hasSlotController.test('footer-actions')
+        ? html` <footer part="footer" class="footer has-actions">
+            <slot name="footer"></slot>
+            <slot name="footer-actions"></slot>
+          </footer>`
+        : html` <footer part="footer" class="footer">
+            <slot name="footer"></slot>
+          </footer>`}
    `;
  }
 }
Author	SHA1	Message	Date
konnorrogers	fc38e59d9f	update version in tag	2025-12-02 19:02:03 -05:00
konnorrogers	9716ecec41	Bump changelog	2025-10-28 12:13:59 -04:00
Brian Talbot	776b980ce5	🚀 Add Launch Announcement Banner (#1662 ) * adding decorative underline to utils.css * adding banner to base.njk * disabling sticky banner in layouts * adding logic to show/hide pageBanner * add changelog for `<wa-page>` fix in related Pro PR --------- Co-authored-by: lindsaym-fa <dev@lindsaym.design>	2025-10-28 11:07:08 -04:00
Kelsey Jackson	02f58d3c8b	Fix `<wa-card>` header and footer slot alignment (#1435 ) * fixes to the card component * linter fix * updated doc css * style touchup * docs touchup * remove docs.css change * add changelog (and sneak in missing Figma entry) --------- Co-authored-by: lindsaym-fa <dev@lindsaym.design>	2025-10-28 10:42:52 -04:00