Upgrade to Lit 3 and latest scoped element packages

.changeset/witty-lemons-wink.md

@@ -0,0 +1,5 @@
+---
+'@ithaka/pharos': patch
+---
+
+Upgrade to Lit 3 and latest scoped element packages

package.json

@@ -94,7 +94,7 @@
     "globals": "^15.8.0",
     "husky": "^9.1.1",
     "lint-staged": "^15.2.7",
-    "lit": "^2.8.0",
+    "lit": "^3.1.4",
     "lit-analyzer": "^2.0.3",
     "markdown-toc": "^1.2.0",
     "postcss": "^8.4.39",

packages/pharos-cli/package.json

@@ -16,12 +16,12 @@
   },
   "devDependencies": {
     "@types/jest": "^29.5.12",
-    "@types/node": "^20.14.11",
+    "@types/node": "^20.14.12",
     "jest": "^29.7.0",
     "ts-jest": "^29.2.3",
     "ts-morph": "^23.0.0",
     "ts-node": "^10.9.2",
-    "typescript": "^5.5.3"
+    "typescript": "^5.5.4"
   },
   "scripts": {
     "test": "jest",

packages/pharos-site/package.json

@@ -8,7 +8,7 @@
   "dependencies": {
     "@ithaka/pharos": "^14.0.1",
     "@reach/router": "^1.3.4",
-    "@webcomponents/scoped-custom-element-registry": "^0.0.3",
+    "@webcomponents/scoped-custom-element-registry": "^0.0.9",
     "gatsby": "^5.13.7",
     "gatsby-plugin-alias-imports": "^1.0.5",
     "gatsby-plugin-google-tagmanager": "^5.13.1",
@@ -35,7 +35,7 @@
     "@types/react-dom": "^18.3.0",
     "@types/react-helmet": "^6.1.11",
     "babel-preset-gatsby": "^3.13.2",
-    "typescript": "^5.5.3"
+    "typescript": "^5.5.4"
   },
   "author": "ITHAKA",
   "license": "MIT",

packages/pharos-site/src/pages/getting-started.tsx

@@ -57,7 +57,7 @@ const GettingStartedPage: FC = () => {
         is generally achieved by including this script tag in the head of your application.
       </p>
       <CodeBlock
-        code={`<script src="https://cdn.jsdelivr.net/npm/@webcomponents/[email protected].3/scoped-custom-element-registry.min.js"></script>`}
+        code={`<script src="https://cdn.jsdelivr.net/npm/@webcomponents/[email protected].9/scoped-custom-element-registry.min.js"></script>`}
       />
       <p>
         You then need to register components on the [custom element
@@ -101,7 +101,7 @@ const GettingStartedPage: FC = () => {
         produce a basic button, as seen below the code
       </p>
       <CodeBlock
-        code={`   
+        code={`
         import {PharosButton} from '@ithaka/pharos/lib/react-components';
           ...
 

packages/pharos/package.json

@@ -57,9 +57,9 @@
   "dependencies": {
     "@floating-ui/dom": "^1.6.8",
     "@ithaka/focus-trap": "2.0.1",
-    "@lit-labs/scoped-registry-mixin": "^1.0.1",
+    "@lit-labs/scoped-registry-mixin": "^1.0.3",
     "@open-wc/dedupe-mixin": "^1.4.0",
-    "lit": "^2.8.0",
+    "lit": "^3.1.4",
     "uuid": "^10.0.0"
   },
   "peerDependencies": {
@@ -88,7 +88,7 @@
     "sinon": "^18.0.0",
     "style-dictionary": "^3.9.2",
     "ts-lit-plugin": "^2.0.2",
-    "typescript": "^5.5.3"
+    "typescript": "^5.5.4"
   },
   "customElements": "custom-elements.json",
   "exports": {

packages/pharos/src/components/alert/pharos-alert.wc.stories.jsx

@@ -15,7 +15,7 @@ export default {
 
 const Base = {
   render: ({ status, text, closable }) =>
-    html`<storybook-pharos-alert status=${status} ?closable=${closable}
+    html`<storybook-pharos-alert status=${status} closable=${closable}
       >${text}</storybook-pharos-alert
     >`,
   args: defaultArgs,
@@ -39,7 +39,7 @@ export const Success = {
 
 export const Warning = {
   render: ({ status, text, closable }) =>
-    html` <storybook-pharos-alert status=${status} ?closable=${closable}>
+    html` <storybook-pharos-alert status=${status} closable=${closable}>
       <p class="alert-example__content">${text}</p>
       <p class="alert-example__content">
         See <storybook-pharos-link href="#">how to fix this</storybook-pharos-link>.
@@ -53,7 +53,7 @@ export const Warning = {
 
 export const Error = {
   render: ({ status, text, closable }) =>
-    html` <storybook-pharos-alert status=${status} ?closable=${closable}>
+    html` <storybook-pharos-alert status=${status} closable=${closable}>
       <p class="alert-example__content">${text}</p>
       <p class="alert-example__content">
         For more information,

packages/pharos/src/components/button/pharos-button.wc.stories.jsx

@@ -20,21 +20,21 @@ export default {
 export const Base = {
   render: (args) => html`
     <storybook-pharos-button
-      ?disabled=${ifDefined(args.disabled)}
+      disabled=${ifDefined(args.disabled)}
       download=${ifDefined(args.download)}
       icon=${ifDefined(args.icon)}
-      ?icon-condensed=${ifDefined(args.iconCondensed)}
+      icon-condensed=${ifDefined(args.iconCondensed)}
       icon-left=${ifDefined(args.iconLeft)}
       icon-right=${ifDefined(args.iconRight)}
-      ?full-width=${ifDefined(args.fullWidth)}
+      full-width=${ifDefined(args.fullWidth)}
       href=${ifDefined(args.href)}
       hreflang=${ifDefined(args.hreflang)}
       a11y-label=${ifDefined(args.a11yLabel)}
       a11y-expanded=${ifDefined(args.a11yExpanded)}
       a11y-pressed=${ifDefined(args.a11yPressed)}
       a11y-disabled=${ifDefined(args.a11yDisabled)}
-      ?large=${ifDefined(args.large)}
-      ?is-on-background=${ifDefined(args.isOnBackground)}
+      large=${ifDefined(args.large)}
+      is-on-background=${ifDefined(args.isOnBackground)}
       ping=${ifDefined(args.ping)}
       target=${ifDefined(args.target)}
       type=${ifDefined(args.type)}

packages/pharos/src/components/checkbox-group/pharos-checkbox-group.wc.stories.jsx

@@ -20,13 +20,13 @@ export default {
 export const Base = {
   render: (args) =>
     html` <storybook-pharos-checkbox-group
-      ?disabled=${args.disabled}
-      ?hide-label="${args.hideLabel}"
-      ?horizontal=${args.horizontal}
-      ?invalidated=${args.invalidated}
+      disabled=${args.disabled}
+      hide-label="${args.hideLabel}"
+      horizontal=${args.horizontal}
+      invalidated=${args.invalidated}
       .message="${args.message}"
-      ?required=${args.required}
-      ?validated=${args.validated}
+      required=${args.required}
+      validated=${args.validated}
     >
       <span slot="legend">Checkbox Group Header</span>
       <storybook-pharos-checkbox value="1"

packages/pharos/src/components/checkbox/pharos-checkbox.wc.stories.jsx

@@ -17,11 +17,11 @@ export default {
 export const Base = {
   render: (args) =>
     html`<storybook-pharos-checkbox
-      ?checked=${args.checked}
-      ?disabled=${args.disabled}
-      ?hide-label=${args.hideLabel}
-      ?required=${args.required}
-      ?invalidated=${args.invalidated}
+      checked=${args.checked}
+      disabled=${args.disabled}
+      hide-label=${args.hideLabel}
+      required=${args.required}
+      invalidated=${args.invalidated}
       .message=${args.message}
     >
       <span slot="label">${args.label}</span>

packages/pharos/src/components/coach-mark/pharos-coach-mark.wc.stories.jsx

@@ -26,7 +26,7 @@ export const Base = {
       </div>
       <storybook-pharos-coach-mark
         id="example-coachmark"
-        ?hide=${ifDefined(args.hide)}
+        hide=${ifDefined(args.hide)}
         side=${ifDefined(args.side)}
         alignment=${ifDefined(args.alignment)}
         header=${ifDefined(args.header)}

packages/pharos/src/components/combobox/pharos-combobox.wc.stories.jsx

@@ -23,15 +23,15 @@ export const Base = {
     <storybook-pharos-combobox
       .value=${ifDefined(args.value)}
       .name=${ifDefined(args.name)}
-      ?open=${args.open}
-      ?loose-match=${args.looseMatch}
-      ?disabled=${args.disabled}
-      ?hide-label=${args.hideLabel}
-      ?invalidated=${args.invalidated}
-      ?validated=${args.validated}
+      open=${args.open}
+      loose-match=${args.looseMatch}
+      disabled=${args.disabled}
+      hide-label=${args.hideLabel}
+      invalidated=${args.invalidated}
+      validated=${args.validated}
       .placeholder=${ifDefined(args.placeholder)}
       message=${ifDefined(args.message)}
-      ?required=${args.required}
+      required=${args.required}
       style="display: grid; grid-template-columns: 300px;"
     >
       <span slot="label">${args.label}</span>
@@ -143,9 +143,9 @@ export const Validity = {
         placeholder="Enter some text"
         @change="${(e) => action('Change')(e.target.value)}"
         @input="${(e) => action('Input')(e.target['_input'].value)}"
-        ?required="${args.required}"
-        ?invalidated="${args.invalidated}"
-        ?validated="${args.validated}"
+        required="${args.required}"
+        invalidated="${args.invalidated}"
+        validated="${args.validated}"
         message="${args.message}"
       >
         <span slot="label">Test me out</span>

packages/pharos/src/components/dropdown-menu/pharos-dropdown-menu-item.test.ts

@@ -1,7 +1,5 @@
 import { fixture, expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
-import sinon from 'sinon';
-import type { SinonSpy } from 'sinon';
 
 import { PharosIcon } from '../icon/pharos-icon';
 import type { PharosDropdownMenuItem } from './pharos-dropdown-menu-item';
@@ -119,26 +117,13 @@ describe('pharos-dropdown-menu-item', () => {
   });
 
   it('cannot be clicked when disabled', async () => {
-    const event = new MouseEvent('click');
-    const clickSpy: SinonSpy = sinon.spy(event, 'preventDefault');
-    component.disabled = true;
-    await component.updateComplete;
-    component.dispatchEvent(event);
-    expect(clickSpy.callCount).to.equal(1);
-  });
-
-  it('does not propagate a click event when disabled with click handler present', async () => {
-    const event = new MouseEvent('click');
+    let sentinel = -1;
     component = await fixture(html`
-      <test-pharos-dropdown-menu-item disabled @click="${() => alert('clicked')}"
+      <test-pharos-dropdown-menu-item disabled @click="${() => (sentinel += 1)}"
         >I am an item</test-pharos-dropdown-menu-item
       >
     `);
-    await component.updateComplete;
-    const clickSpy: SinonSpy = sinon.spy(event, 'preventDefault');
-    const propagationSpy: SinonSpy = sinon.spy(event, 'stopPropagation');
-    component.dispatchEvent(event);
-    expect(clickSpy.callCount).to.equal(1);
-    expect(propagationSpy.callCount).to.equal(1);
+    component.click();
+    expect(sentinel).to.equal(-1);
   });
 });

packages/pharos/src/components/image-card/pharos-image-card.wc.stories.jsx

@@ -25,9 +25,9 @@ const Template = {
       ><storybook-pharos-image-card
         title="South Hall"
         link="https://www.jstor.org/stable/10.2307/community.26220188"
-        ?error=${args.error}
-        ?subtle=${args.subtle}
-        ?indicate-link-visited=${args.indicateLinkVisited}
+        error=${args.error}
+        subtle=${args.subtle}
+        indicate-link-visited=${args.indicateLinkVisited}
         style="grid-column: span 2"
       >
         <img id="image" src="${collection5}" alt="south hall" slot="image" />
@@ -37,7 +37,7 @@ const Template = {
           Part of
           <storybook-pharos-link
             href="https://www.jstor.org/site/pratt/buildings-image"
-            ?is-on-background=${args.subtle}
+            is-on-background=${args.subtle}
             >Pratt Institute Buildings Image Collection</storybook-pharos-link
           >
         </div>
@@ -130,7 +130,7 @@ export const ErrorStateCollection = {
             title="${collection.title}"
             link="#"
             variant="collection"
-            ?error=${index === 2}
+            error=${index === 2}
           >
             <img
               id="image-${index}"

packages/pharos/src/components/link/pharos-link.test.ts

@@ -63,9 +63,9 @@ describe('pharos-link', () => {
   });
 
   it('delegates focus to the target when clicked in the skip state', async () => {
-    let activeElement = null;
+    let focusTargets = null;
     const onFocusIn = (event: Event): void => {
-      activeElement = event.composedPath()[0];
+      focusTargets = event.composedPath();
     };
     document.addEventListener('focusin', onFocusIn);
 
@@ -84,7 +84,7 @@ describe('pharos-link', () => {
     await nextFrame();
     await nextFrame();
 
-    expect(activeElement === link.renderRoot.querySelector('#link-element')).to.be.true;
+    expect(focusTargets).to.contain(link);
     document.removeEventListener('focusin', onFocusIn);
   });
 });

packages/pharos/src/components/link/pharos-link.wc.stories.jsx

@@ -16,19 +16,19 @@ export const Base = {
   render: (args) =>
     html` <div style="display: grid; grid-gap: 1rem; grid-template-columns: 300px;">
       <storybook-pharos-link
-        ?bold=${args.bold}
+        bold=${args.bold}
         download=${ifDefined(args.download)}
-        ?flex=${args.flex}
+        flex=${args.flex}
         href=${ifDefined(args.href)}
         hreflang=${ifDefined(args.hreflang)}
-        ?indicate-visited=${args.indicateVisited}
+        indicate-visited=${args.indicateVisited}
         a11y-label=${ifDefined(args.a11yLabel)}
-        ?no-hover=${args.noHover}
-        ?is-on-background=${args.isOnBackground}
+        no-hover=${args.noHover}
+        is-on-background=${args.isOnBackground}
         ping=${ifDefined(args.ping)}
         rel=${ifDefined(args.rel)}
-        ?skip=${args.skip}
-        ?subtle=${args.subtle}
+        skip=${args.skip}
+        subtle=${args.subtle}
         target=${ifDefined(args.target)}
         type=${ifDefined(args.type)}
       >

packages/pharos/src/components/modal/pharos-modal.wc.stories.jsx

@@ -28,9 +28,9 @@ export const Base = {
     </storybook-pharos-button>
     <storybook-pharos-modal
       id="my-base-modal"
-      ?footer-divider=${ifDefined(args.footerDivider)}
+      footer-divider=${ifDefined(args.footerDivider)}
       header=${ifDefined(args.header)}
-      ?open=${ifDefined(args.open)}
+      open=${ifDefined(args.open)}
       size=${ifDefined(args.size)}
     >
       <p>I am a modal</p>

packages/pharos/src/components/radio-button/pharos-radio-button.wc.stories.jsx

@@ -15,11 +15,11 @@ export default {
 export const Base = {
   render: (args) => html`
     <storybook-pharos-radio-button
-      ?checked=${args.checked}
-      ?disabled=${args.disabled}
-      ?hide-label=${args.hideLabel}
-      ?invalidated=${args.invalidated}
-      ?required=${args.required}
+      checked=${args.checked}
+      disabled=${args.disabled}
+      hide-label=${args.hideLabel}
+      invalidated=${args.invalidated}
+      required=${args.required}
       .message=${args.message}
     >
       <span slot="label">${args.label}</span>

packages/pharos/src/components/radio-group/pharos-radio-group.wc.stories.jsx

@@ -19,12 +19,12 @@ export const Base = {
   render: (args) => html`
     <storybook-pharos-radio-group
       name=${args.name}
-      ?horizontal=${args.horizontal}
-      ?disabled=${args.disabled}
-      ?hide-label=${args.hideLabel}
-      ?required=${args.required}
-      ?invalidated=${args.invalidated}
-      ?validated=${args.validated}
+      horizontal=${args.horizontal}
+      disabled=${args.disabled}
+      hide-label=${args.hideLabel}
+      required=${args.required}
+      invalidated=${args.invalidated}
+      validated=${args.validated}
       .message=${args.message}
     >
       <span slot="legend">Radio Group Header</span>