[6.x] Remove web awesome dependency

packages/craftcms-cp/.storybook/preview.ts

@@ -4,12 +4,15 @@ import type {
 } from '@storybook/web-components-vite';
 import '../src/styles/cp.css';
 import './preview.css';
-import {icons} from '@lion/ui/icon.js';
-import {html} from 'lit';
 import {withThemeByDataAttribute} from '@storybook/addon-themes';
 import {setCustomElementsManifest} from '@storybook/web-components';
 import manifest from '../dist/custom-elements.json' with {type: 'json'};
 import {setStorybookHelpersConfig} from '@wc-toolkit/storybook-helpers';
+import {
+  createUrlIconResolver,
+  getIconUrl,
+  setIconResolver,
+} from '../src/utilities/icons.js';
 
 setStorybookHelpersConfig({
   /** hides the `arg ref` label on each control */
@@ -24,9 +27,18 @@ setStorybookHelpersConfig({
 
 setCustomElementsManifest(manifest);
 
-icons.addIconResolver('craft', (iconSet: string, name: string) => {
-  return html`<div>${iconSet} - ${name}</div>`;
-});
+const FONT_AWESOME_CDN_URL =
+  'https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.0.0/svgs';
+
+setIconResolver(
+  createUrlIconResolver((name, family, variant) => {
+    if (family === 'custom-icons' || variant === 'custom-icons') {
+      return null;
+    }
+
+    return getIconUrl(name, family, variant, FONT_AWESOME_CDN_URL);
+  })
+);
 
 const preview: Preview = {
   parameters: {

packages/craftcms-cp/package.json

@@ -70,14 +70,12 @@
   },
   "homepage": "https://github.com/craftcms/npm-packages#readme",
   "peerDependencies": {
-    "@awesome.me/webawesome": "^3.0.0",
     "@lion/ui": "0.x",
     "lit": "3.x"
   },
   "devDependencies": {
     "@adobe/leonardo-contrast-colors": "^1.1.0",
     "@arethetypeswrong/cli": "^0.18.2",
-    "@awesome.me/webawesome": "^3.6.0",
     "@custom-elements-manifest/analyzer": "^0.11.0",
     "@lion/ui": "^0.16.1",
     "@shoelace-style/shoelace": "^2.20.1",

packages/craftcms-cp/scripts/build.js

@@ -47,7 +47,7 @@ async function generateBundle(config = {}) {
         ...(await resolveFrom('./src/services/**/!(*.(styles|test)).ts')),
       },
       minify: !isDeveloping,
-      external: ['lit', '@lion/ui', '@awesome.me/webawesome'],
+      external: ['lit', '@lion/ui'],
       format: ['esm'],
       sourcemap: true,
       dts: true,

packages/craftcms-cp/scripts/generate-vue-wrappers.js

@@ -544,16 +544,6 @@ const ALL_COMPONENTS = [
     className: 'CraftDisclosure',
     importPath: '../components/disclosure/disclosure',
   },
-  {
-    tagName: 'craft-drawer',
-    className: 'CraftDrawer',
-    importPath: '../components/drawer/drawer',
-  },
-  {
-    tagName: 'craft-dropdown',
-    className: 'CraftDropdown',
-    importPath: '../components/dropdown/dropdown',
-  },
   {
     tagName: 'craft-indicator',
     className: 'CraftIndicator',
@@ -620,7 +610,7 @@ const ALL_COMPONENTS = [
     importPath: '../components/input-file/selected-file-list',
   },
   {
-    tagName: 'c-tooltip',
+    tagName: 'craft-tooltip',
     className: 'CraftTooltip',
     importPath: '../components/tooltip/tooltip',
   },

packages/craftcms-cp/src/components/breadcrumb-item/breadcrumb-item.test.ts

@@ -0,0 +1,58 @@
+import {beforeEach, describe, expect, it} from 'vitest';
+import type CraftBreadcrumbItem from './breadcrumb-item.js';
+import './breadcrumb-item.js';
+
+async function createItem(
+  attrs: Record<string, string> = {},
+  text = 'Entries'
+): Promise<CraftBreadcrumbItem> {
+  const element = document.createElement(
+    'craft-breadcrumb-item'
+  ) as CraftBreadcrumbItem;
+  for (const [name, value] of Object.entries(attrs)) {
+    element.setAttribute(name, value);
+  }
+  element.textContent = text;
+  document.body.append(element);
+  await element.updateComplete;
+  return element;
+}
+
+beforeEach(() => {
+  document.body.innerHTML = '';
+});
+
+describe('craft-breadcrumb-item', () => {
+  it('renders a span label without href', async () => {
+    const element = await createItem();
+    expect(element.shadowRoot!.querySelector('a')).toBeNull();
+    expect(element.shadowRoot!.querySelector('span.label')).not.toBeNull();
+  });
+
+  it('renders a link when href is set', async () => {
+    const element = await createItem({href: '/entries'});
+    const link = element.shadowRoot!.querySelector('a.label');
+    expect(link).not.toBeNull();
+    expect(link!.getAttribute('href')).toBe('/entries');
+  });
+
+  it('exposes href as a property', async () => {
+    const element = await createItem({href: '/entries'});
+    expect(element.href).toBe('/entries');
+  });
+
+  it('has a separator slot for breadcrumbs to fill', async () => {
+    const element = await createItem();
+    const separator = document.createElement('span');
+    separator.slot = 'separator';
+    separator.textContent = '/';
+    element.append(separator);
+    await element.updateComplete;
+
+    const slot = element.shadowRoot!.querySelector<HTMLSlotElement>(
+      'slot[name="separator"]'
+    );
+    expect(slot).not.toBeNull();
+    expect(slot!.assignedElements()).toEqual([separator]);
+  });
+});

packages/craftcms-cp/src/components/breadcrumb-item/breadcrumb-item.ts

@@ -1,34 +1,73 @@
-import {css} from 'lit';
-import WaBreadcrumbItem from '@awesome.me/webawesome/dist/components/breadcrumb-item/breadcrumb-item.js';
-
-export default class CraftBreadcrumbItem extends WaBreadcrumbItem {
-  static override get styles() {
-    return [
-      WaBreadcrumbItem.styles,
-      css`
-        :host {
-          --wa-font-weight-action: 400;
-          --wa-space-s: var(--c-spacing-sm);
-          white-space: nowrap;
-          display: inline-flex;
-          align-items: center;
-          color: inherit;
-        }
-
-        .start {
-          margin-inline-end: var(--c-spacing-sm);
-        }
-
-        .end {
-          margin-inline-start: var(--c-spacing-sm);
-        }
-
-        .separator {
-          color: var(--c-text-quiet);
-          margin: 0 var(--c-spacing-md);
-        }
-      `,
-    ];
+import {css, html, LitElement, nothing} from 'lit';
+import {property} from 'lit/decorators.js';
+
+/**
+ * A single crumb inside `craft-breadcrumbs`. Renders its default-slot content
+ * as a link when `href` is set. `craft-breadcrumbs` appends separator content
+ * into the `separator` slot.
+ */
+export default class CraftBreadcrumbItem extends LitElement {
+  /** When set, the label is rendered as a link. */
+  @property({reflect: true}) href?: string;
+
+  /** The link target (only used when `href` is set). */
+  @property() target?: '_blank' | '_parent' | '_self' | '_top';
+
+  /** The link rel (only used when `href` and `target` are set). */
+  @property() rel = 'noreferrer noopener';
+
+  static override styles = css`
+    :host {
+      white-space: nowrap;
+      display: inline-flex;
+      align-items: center;
+      color: inherit;
+    }
+
+    .label {
+      display: inline-flex;
+      align-items: center;
+      font-weight: 400;
+      color: inherit;
+      text-decoration: none;
+    }
+
+    a.label:hover {
+      text-decoration: underline;
+    }
+
+    slot[name='start']::slotted(*) {
+      margin-inline-end: var(--c-spacing-sm);
+    }
+
+    slot[name='end']::slotted(*) {
+      margin-inline-start: var(--c-spacing-sm);
+    }
+
+    slot[name='separator']::slotted(*) {
+      color: var(--c-text-quiet);
+      margin: 0 var(--c-spacing-md);
+    }
+  `;
+
+  override render() {
+    const label = this.href
+      ? html`<a
+          part="label"
+          class="label"
+          href=${this.href}
+          target=${this.target ?? nothing}
+          rel=${this.target ? this.rel : nothing}
+          ><slot></slot
+        ></a>`
+      : html`<span part="label" class="label"><slot></slot></span>`;
+
+    return html`
+      <slot name="start" part="start"></slot>
+      ${label}
+      <slot name="end" part="end"></slot>
+      <slot name="separator" part="separator" aria-hidden="true"></slot>
+    `;
   }
 }
 

packages/craftcms-cp/src/components/copy-button/copy-button.ts

@@ -149,7 +149,7 @@ export default class CraftCopyButton extends LitElement {
 
   override render() {
     return html`
-      <c-tooltip for="${this.id}">${this.tooltipLabel}</c-tooltip>
+      <craft-tooltip for="${this.id}">${this.tooltipLabel}</craft-tooltip>
       <button
         type="button"
         id="${this.id}"

packages/craftcms-cp/src/components/dialog/dialog.stories.ts

@@ -16,7 +16,7 @@ const meta = {
   render: function (args) {
     function openDialog() {
       const dialog = document.getElementById('storybook-dialog') as CraftDialog;
-      dialog.open = true;
+      dialog.opened = true;
     }
 
     return html`