fixed conflicts in changelog

* add notes about skips

* prettier

* re-add support for 'unpublished: true'

* prettier

packages/webawesome/docs/.eleventy.js

@@ -160,6 +160,15 @@ export default async function (eleventyConfig) {
   // Use our own markdown instance
   eleventyConfig.setLibrary('md', markdown);
 
+  // for files with `unpublished: true`, it will make sure they do not make it into the final build at all, but will be usable in development.
+  eleventyConfig.addPreprocessor('unpublished', '*', (data, content) => {
+    if (data.unpublished && process.env.ELEVENTY_RUN_MODE === 'build') {
+      return false;
+    }
+
+    return content;
+  });
+
   // Add anchors to headings
   eleventyConfig.addTransform('doc-transforms', function (content) {
     let doc = HTMLParse(content, { blockTextElements: { code: true } });

packages/webawesome/docs/_includes/sidebar.njk

@@ -356,6 +356,9 @@
         <li>
           <a href="/docs/patterns/layouts/ecommerce/">Ecommerce</a>
         </li>
+        <li>
+          <a href="/docs/patterns/layouts/app/">App</a>
+        </li>
         <li>
           <a href="/docs/patterns/layouts/blog/">Blog</a>
         </li>

packages/webawesome/docs/docs/components/card.md

@@ -17,10 +17,8 @@ category: Organization
   This kitten is as cute as he is playful. Bring him home today!<br />
   <small class="wa-caption-m">6 weeks old</small>
 
-  <div slot="footer" class="wa-split">
-    <wa-button variant="brand" pill>More Info</wa-button>
-    <wa-rating label="Rating"></wa-rating>
-  </div>
+  <wa-button slot="footer" variant="brand" pill>More Info</wa-button>
+  <wa-rating slot="footer-actions" label="Rating"></wa-rating>
 </wa-card>
 
 <style>
@@ -55,14 +53,11 @@ If using SSR, you need to also use the `with-header` attribute to add a header t
 
 ```html {.example}
 <wa-card class="card-header">
-  <div slot="header" class="wa-split">
-    Header Title
-    <wa-button appearance="plain">
-      <wa-icon name="gear" variant="solid" label="Settings"></wa-icon>
-    </wa-button>
-  </div>
-
+  <h3 slot="header">Header Title</h3>
   This card has a header. You can put all sorts of things in it!
+  <wa-button appearance="plain" slot="header-actions">
+    <wa-icon name="gear" variant="solid" label="Settings"></wa-icon>
+  </wa-button>
 </wa-card>
 
 <style>
@@ -85,10 +80,9 @@ If using SSR, you need to also use the `with-footer` attribute to add a footer t
 <wa-card class="card-footer">
   This card has a footer. You can put all sorts of things in it!
 
-  <div slot="footer" class="wa-split">
-    <wa-rating></wa-rating>
-    <wa-button variant="brand">Preview</wa-button>
-  </div>
+  <wa-rating slot="footer"></wa-rating>
+
+  <wa-button slot="footer-actions" variant="brand">Preview</wa-button>
 </wa-card>
 
 <style>
@@ -155,3 +149,35 @@ Use the `appearance` attribute to change the card's visual appearance.
   {%- endfor %}
 </div>
 ```
+
+### 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>
+The `actions` slot is only available for the horizontal orientation
+</wa-callout>
+
+```html {.example}
+<div class="wa-grid">
+  <wa-card orientation="horizontal" class="horizontal-card">
+    <img
+      slot="media"
+      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.
+    <wa-button slot="actions" variant="neutral" appearance="plain"
+      ><wa-icon name="ellipsis" label="actions"></wa-icon
+    ></wa-button>
+  </wa-card>
+</div>
+
+<style>
+  .horizontal-card {
+    img[slot='media'] {
+      max-width: 300px;
+    }
+  }
+</style>
+```

packages/webawesome/docs/docs/localization.md

@@ -56,7 +56,7 @@ To contribute new translations or improvements to existing translations, please
 
 Regional translations are welcome! For example, if a German translation (`de`) exists it's perfectly acceptable to submit a German (Switzerland) (`de-CH`) translation.
 
-If you have any questions, please start a [discussion](https://github.com/shoelace-style/shoelace/discussions) or ask in the [community chat](https://discord.gg/mg8f26C).
+If you have any questions, please start a [discussion](https://github.com/shoelace-style/webawesome/discussions) or ask in the [community chat](https://discord.gg/mg8f26C).
 
 :::info
 Web Awesome provides a localization mechanism for component internals. This is not designed to be used as localization tool for your entire application. You should use a more appropriate tool such as [i18next](https://www.i18next.com/) if you need to localize content in your app.

packages/webawesome/docs/docs/resources/accessibility.md

@@ -14,7 +14,7 @@ Furthermore, accessibility doesn’t stop at the component level. Using accessib
 
 My commitment to Web Awesome users is this: Everything we develop will be built with accessibility in mind. We will test and improve every component to the best of our ability and knowledge. We will work around upstream issues, such as browser bugs and limitations, to the best of our ability and within reason.
 
-We’re fully aware that we may not get it right every time for every user, so we invite the community to participate in this ongoing effort by submitting [issues](https://github.com/shoelace-style/shoelace/issues?q=is%3Aissue+is%3Aopen+label%3Aa11y), [pull requests](https://github.com/shoelace-style/shoelace/pulls?q=is%3Aopen+is%3Apr+label%3Aa11y), and [discussions](https://github.com/shoelace-style/shoelace/discussions). Many accessibility improvements have already been made thanks to contributors submitting code, feedback, and suggestions.
+We’re fully aware that we may not get it right every time for every user, so we invite the community to participate in this ongoing effort by submitting [issues](https://github.com/shoelace-style/shoelace/issues?q=is%3Aissue+is%3Aopen+label%3Aa11y), [pull requests](https://github.com/shoelace-style/shoelace/pulls?q=is%3Aopen+is%3Apr+label%3Aa11y), and [discussions](https://github.com/shoelace-style/webawesome/discussions). Many accessibility improvements have already been made thanks to contributors submitting code, feedback, and suggestions.
 
 This is the path forward. Together, we will continue to make Web Awesome accessible to as many users as possible.
 

packages/webawesome/docs/docs/resources/changelog.md

@@ -36,6 +36,8 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 - Fixed a bug in `<wa-input>` that prevented the value from changing when assigning non-string values to `value` [issue:1323]
 - Fixed a bug in `<wa-color-picker>` that prevent the picker from staying in the viewport
 - Fixed a bug that in `<wa-icon>` that caused `library`, `family`, `variant` and `name` to not reflect [pr:#1395]
+- Fixed a bug in `<wa-format-date>` and `<wa-relative-time>` that caused spaces to appear before and after the output [#1417]
+- Added horizontal orientation support with `orientation="horizontal"` for `<wa-card>`
 
 ## 3.0.0-beta.4
 

packages/webawesome/docs/docs/resources/community.md

@@ -10,14 +10,14 @@ Please be respectful of other users and remember that Web Awesome is an open sou
 
 ## Discussion Forum
 
-The [discussion forum](https://github.com/shoelace-style/shoelace/discussions) is open to anyone with a GitHub account. This is the best place to:
+The [discussion forum](https://github.com/shoelace-style/webawesome/discussions) is open to anyone with a GitHub account. This is the best place to:
 
 - Ask for help
 - Share ideas and get feedback
 - Show the community what you're working on
 - Learn more about the project, its values, and its roadmap
 
-<wa-button variant="brand" href="https://github.com/shoelace-style/shoelace/discussions" target="_blank" style="margin-block-end: var(--wa-content-spacing);">
+<wa-button variant="brand" href="https://github.com/shoelace-style/webawesome/discussions" target="_blank" style="margin-block-end: var(--wa-content-spacing);">
   <wa-icon name="github" family="brands" slot="start"></wa-icon>
   Join the Discussion
 </wa-button>
@@ -40,9 +40,9 @@ The [community chat](https://discord.gg/mg8f26C) is open to the public and power
 
 Follow [@webawesomer](https://twitter.com/webawesomer) on Twitter for general updates and announcements about Web Awesome. This is a great place to say "hi" or to share something you're working on.
 
-**Please avoid using Twitter for support questions.** The [discussion forum](https://github.com/shoelace-style/shoelace/discussions) is a much better place to share code snippets, screenshots, and other troubleshooting info. You'll have much better luck there, as more users will have a chance to help you.
+**Please avoid using Twitter for support questions.** The [discussion forum](https://github.com/shoelace-style/webawesome/discussions) is a much better place to share code snippets, screenshots, and other troubleshooting info. You'll have much better luck there, as more users will have a chance to help you.
 
 <wa-button variant="brand" href="https://twitter.com/webawesomer" target="_blank" style="margin-block-end: var(--wa-content-spacing);">
   <wa-icon name="twitter" family="brands" slot="start"></wa-icon>
   Follow on Twitter
-</wa-button>
+</wa-button>

packages/webawesome/package.json

@@ -29,7 +29,8 @@
     "./dist/react": "./dist/react/index.js",
     "./dist/react/*": "./dist/react/*",
     "./dist/translations": "./dist/translations",
-    "./dist/translations/*": "./dist/translations/*"
+    "./dist/translations/*": "./dist/translations/*",
+    "./package.json": "./package.json"
   },
   "files": [
     "README.md",

packages/webawesome/scripts/build.js

@@ -123,6 +123,7 @@ export async function build(options = {}) {
   function generateReactWrappers() {
     // Used by webawesome-app to make re-rendering not miserable with extra React file generation.
     if (process.env.SKIP_SLOW_STEPS === 'true') {
+      spinner.info('Skipping React Wrapper generation.');
       return Promise.resolve();
     }
 
@@ -162,6 +163,7 @@ export async function build(options = {}) {
   async function generateTypes() {
     // Used by webawesome-app to make re-rendering not miserable with extra TS compilations.
     if (process.env.SKIP_SLOW_STEPS === 'true') {
+      spinner.info('Skipping TypeScript compiler.');
       return Promise.resolve();
     }
 

packages/webawesome/src/components/card/card.css

@@ -77,7 +77,9 @@
 }
 
 .header {
-  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   border-block-end-style: inherit;
   border-block-end-color: var(--wa-color-surface-border);
   border-block-end-width: var(--wa-panel-border-width);
@@ -90,7 +92,9 @@
 }
 
 .footer {
-  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   border-block-start-style: inherit;
   border-block-start-color: var(--wa-color-surface-border);
   border-block-start-width: var(--wa-panel-border-width);
@@ -102,3 +106,27 @@
 :host(:not([with-media])) .media {
   display: none;
 }
+
+/* Orientation Styles */
+:host([orientation='horizontal']) {
+  flex-direction: row;
+
+  .media {
+    border-start-start-radius: var(--inner-border-radius);
+    border-end-start-radius: var(--inner-border-radius);
+    border-start-end-radius: 0;
+    object-fit: cover;
+  }
+}
+
+:host([orientation='horizontal']) ::slotted([slot='body']) {
+  display: block;
+  height: 100%;
+  margin: 0;
+}
+
+:host([orientation='horizontal']) ::slotted([slot='actions']) {
+  display: flex;
+  align-items: center;
+  padding: var(--spacing);
+}

packages/webawesome/src/components/card/card.ts

@@ -15,6 +15,9 @@ import styles from './card.css';
  * @slot header - An optional header for the card.
  * @slot footer - An optional footer for the card.
  * @slot media - An optional media section to render at the start of the card.
+ * @slot actions - An optional actions section to render at the end for the horizontal card.
+ * @slot header-actions - An optional actions section to render in the header of the vertical card.
+ * @slot footer-actions - An optional actions section to render in the footer of the vertical card.
  *
  * @csspart media - The container that wraps the card's media.
  * @csspart header - The container that wraps the card's header.
@@ -42,6 +45,10 @@ export default class WaCard extends WebAwesomeElement {
   /** Renders the card with a footer. Only needed for SSR, otherwise is automatically added. */
   @property({ attribute: 'with-footer', type: Boolean, reflect: true }) withFooter = false;
 
+  /** Renders the card's orientation **/
+  @property({ reflect: true })
+  orientation: 'horizontal' | 'vertical' = 'vertical';
+
   updated() {
     // Enable the respective slots when detected
     if (!this.withHeader && this.hasSlotController.test('header')) this.withHeader = true;
@@ -50,11 +57,27 @@ export default class WaCard extends WebAwesomeElement {
   }
 
   render() {
+    // Horizontal Orientation
+    if (this.orientation === 'horizontal') {
+      return html`
+        <slot name="media" part="media" class="media"></slot>
+        <slot part="body" class="body"></slot>
+        <slot name="actions" part="actions" class="actions"></slot>
+      `;
+    }
+
+    // Vertical Orientation
     return html`
       <slot name="media" part="media" class="media"></slot>
-      <slot name="header" part="header" class="header"></slot>
+      <header part="header" class="header">
+        <slot name="header"></slot>
+        <slot name="header-actions"></slot>
+      </header>
       <slot part="body" class="body"></slot>
-      <slot name="footer" part="footer" class="footer"></slot>
+      <footer part="footer" class="footer">
+        <slot name="footer"></slot>
+        <slot name="footer-actions"></slot>
+      </footer>
     `;
   }
 }

packages/webawesome/src/components/format-date/format-date.ts

@@ -66,23 +66,22 @@ export default class WaFormatDate extends WebAwesomeElement {
       return undefined;
     }
 
-    return html`
-      <time datetime=${date.toISOString()}>
-        ${this.localize.date(date, {
-          weekday: this.weekday,
-          era: this.era,
-          year: this.year,
-          month: this.month,
-          day: this.day,
-          hour: this.hour,
-          minute: this.minute,
-          second: this.second,
-          timeZoneName: this.timeZoneName,
-          timeZone: this.timeZone,
-          hour12: hour12,
-        })}
-      </time>
-    `;
+    const displayDate = this.localize.date(date, {
+      weekday: this.weekday,
+      era: this.era,
+      year: this.year,
+      month: this.month,
+      day: this.day,
+      hour: this.hour,
+      minute: this.minute,
+      second: this.second,
+      timeZoneName: this.timeZoneName,
+      timeZone: this.timeZone,
+      hour12: hour12,
+    });
+
+    // No whitespace before or after
+    return html`<time datetime=${date.toISOString()}>${displayDate}</time>`;
   }
 }
 

packages/webawesome/src/components/relative-time/relative-time.ts

@@ -99,7 +99,8 @@ export default class WaRelativeTime extends WebAwesomeElement {
       this.updateTimeout = setTimeout(() => this.requestUpdate(), nextInterval);
     }
 
-    return html` <time datetime=${this.isoTime}>${this.relativeTime}</time> `;
+    // No whitespace before or after
+    return html`<time datetime=${this.isoTime}>${this.relativeTime}</time>`;
   }
 }