remove unused var

updated usage example

docs/docs/components/icon.md

@@ -440,7 +440,11 @@ Icons in this library are licensed under the [MIT License](https://github.com/ta
   import { registerIconLibrary } from '/dist/webawesome.js';
 
   registerIconLibrary('tabler', {
-    resolver: name => `https://cdn.jsdelivr.net/npm/@tabler/icons@1.68.0/icons/${name}.svg`
+    resolver: name => `https://cdn.jsdelivr.net/npm/@tabler/icons@1.68.0/icons/${name}.svg`,
+    mutator: svg => {
+      svg.style.fill = 'none';
+      svg.setAttribute('stroke', 'currentColor');
+    }
   });
 </script>
 

docs/docs/resources/changelog.md

@@ -12,7 +12,11 @@ Components with the <wa-badge variant="warning" pill>Experimental</wa-badge> bad
 During the alpha period, things might break! We take breaking changes very seriously, but sometimes they're necessary to make the final product that much better. We appreciate your patience!
 :::
 
-## Web Awesome 1.0.0-alpha.1
+## Next
+
+- Fixed a bug where `<wa-relative-time>` would announce the full time instead of the relative time in screen readers [#22](https://github.com/shoelace-style/webawesome-alpha/issues/22)
+
+## 1.0.0-alpha.1
 
 - This is the initial release of Web Awesome alpha!
 

package-lock.json

@@ -1,11 +1,11 @@
 {
-  "name": "@shoelace-style/shoelace",
+  "name": "@shoelace-style/webawesome",
   "version": "3.0.0-alpha.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "@shoelace-style/shoelace",
+      "name": "@shoelace-style/webawesome",
       "version": "3.0.0-alpha.2",
       "license": "MIT",
       "dependencies": {

scripts/plop/plopfile.js

@@ -47,7 +47,7 @@ export default function (plop) {
       },
       {
         type: 'add',
-        path: '../../docs/pages/components/{{ tagWithoutPrefix tag }}.md',
+        path: '../../docs/docs/components/{{ tagWithoutPrefix tag }}.md',
         templateFile: 'templates/component/docs.hbs'
       }
     ]

scripts/plop/templates/component/component.hbs

@@ -1,16 +1,17 @@
-import { property } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 import { html } from 'lit';
 import { LocalizeController } from '../../utilities/localize.js';
 import { watch } from '../../internal/watch.js';
+import componentStyles from '../../styles/component.styles.js';
+import styles from './test-element.styles.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
-import styles from './{{ tagWithoutPrefix tag }}.styles.js';
 import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Short summary of the component's intended use.
  * @documentation https://backers.webawesome.com/docs/components/{{ tagWithoutPrefix tag }}
  * @status experimental
- * @since 2.0
+ * @since 3.0
  *
  * @dependency wa-example
  *
@@ -23,6 +24,7 @@ import type { CSSResultGroup } from 'lit';
  *
  * @cssproperty --example - An example CSS custom property.
  */
+ @customElement("{{ tag }}")
 export default class {{ properCase tag }} extends WebAwesomeElement {
   static styles: CSSResultGroup = [componentStyles, styles];
 

scripts/plop/templates/component/docs.hbs

@@ -1,7 +1,6 @@
 ---
-meta:
-  title: {{ tagToTitle tag }}
-  description:
+title: {{ tagToTitle tag }}
+description: Description of component.
 layout: component
 ---
 
@@ -18,5 +17,3 @@ TODO
 ### Second Example
 
 TODO
-
-[component-metadata:{{ tag }}]

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

@@ -31,7 +31,6 @@ export default class WaRelativeTime extends WebAwesomeElement {
 
   @state() private isoTime = '';
   @state() private relativeTime = '';
-  @state() private titleTime = '';
 
   /**
    * The date from which to calculate time from. If not set, the current date and time will be used. When passing a
@@ -72,15 +71,6 @@ export default class WaRelativeTime extends WebAwesomeElement {
     const { unit, value } = availableUnits.find(singleUnit => Math.abs(diff) < singleUnit.max)!;
 
     this.isoTime = then.toISOString();
-    this.titleTime = this.localize.date(then, {
-      month: 'long',
-      year: 'numeric',
-      day: 'numeric',
-      hour: 'numeric',
-      minute: 'numeric',
-      timeZoneName: 'short'
-    });
-
     this.relativeTime = this.localize.relativeTime(Math.round(diff / value), unit, {
       numeric: this.numeric,
       style: this.format
@@ -109,7 +99,7 @@ export default class WaRelativeTime extends WebAwesomeElement {
       this.updateTimeout = window.setTimeout(() => this.requestUpdate(), nextInterval);
     }
 
-    return html` <time datetime=${this.isoTime} title=${this.titleTime}>${this.relativeTime}</time> `;
+    return html` <time datetime=${this.isoTime} title=${this.relativeTime}>${this.relativeTime}</time> `;
   }
 }
 

src/components/tab/tab.ts

@@ -41,7 +41,11 @@ export default class WaTab extends WebAwesomeElement {
   /** Disables the tab and prevents selection. */
   @property({ type: Boolean, reflect: true }) disabled = false;
 
-  tabIndex = 0;
+  /**
+   * @internal
+   * Need to wrap in a `@property()` otherwise NextJS blows up.
+   */
+  @property({ type: Number, reflect: true }) tabIndex = 0;
 
   connectedCallback() {
     super.connectedCallback();