Skip to content

Commit 0f12f28

Browse files
daneahdaneah
authored
chore(deps): upgrade to Lit 3 and latest web component deps (#943)
* chore(deps): upgrade to Lit 3 and latest web component deps * chore(deps): remove dependabot ignores for updated deps * fix(storybook): convert stories to use binding syntax for boolean attrs * fix: use binding syntax for boolean attributes in component code * fix(storybook): use property syntax * fix(image-card): switch back to boolean syntax for property * fix: re-add removed resolution * chore(deps): upgrade yarn and dedupe * chore: add changeset * fix(site): try disabling legacy gatsby integration * fix(site): try specifying @netlify/plugin-gatsby explicitly * chore: remove unused config * chore: update component attribute syntax in templates * fix(image-card): update disabled to be property for checkbox * chore(deps): update storybook and top-level Lit packages * chore: remove dependabot exclusion for @babel/core
1 parent 483b57d commit 0f12f28

File tree

64 files changed

+1581
-1893
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+1581
-1893
lines changed

‎.changeset/sweet-vans-stay.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@ithaka/pharos': minor
3+
---
4+
5+
Upgrade to Lit 3 and latest scoped custom elements dependencies

‎.github/dependabot.yml

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,6 @@ updates:
1212
- 'minor'
1313
- 'patch'
1414
ignore:
15-
# ithaka/pharos#745
16-
- dependency-name: '@lit-labs/scoped-registry-mixin'
17-
- dependency-name: '@webcomponents/scoped-custom-element-registry'
18-
19-
# ithaka/pharos#634
20-
- dependency-name: 'lit'
21-
update-types:
22-
- 'version-update:semver-major'
23-
2415
# ithaka/pharos#780
2516
- dependency-name: 'style-dictionary'
2617
update-types:
@@ -39,10 +30,3 @@ updates:
3930
- dependency-name: '@types/react-dom'
4031
update-types:
4132
- 'version-update:semver-major'
42-
43-
# ithaka/pharos#866
44-
- dependency-name: '@babel/core'
45-
update-types:
46-
- 'version-update:semver-patch'
47-
- 'version-update:semver-minor'
48-
- 'version-update:semver-major'

‎.yarn/patches/@storybook-react-npm-9.0.5-21b095f1f3.patch

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
diff --git a/dist/observable-like.d-b7430e69.d.ts b/dist/observable-like.d-b7430e69.d.ts
2+
index 6b6e836e5cdf38867893f8eebc1e09da086f96ce..03cf3d65517a96871365bf3c3684fa7f98acae85 100644
3+
--- a/dist/observable-like.d-b7430e69.d.ts
4+
+++ b/dist/observable-like.d-b7430e69.d.ts
5+
@@ -1,3 +1,5 @@
6+
+export {};
7+
+
8+
declare global {
9+
interface SymbolConstructor {
10+
readonly observable: symbol;

‎.yarn/releases/yarn-4.5.3.cjs

Lines changed: 0 additions & 934 deletions
This file was deleted.

‎.yarn/releases/yarn-4.9.2.cjs

Lines changed: 942 additions & 0 deletions
Large diffs are not rendered by default.

‎.yarnrc.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
nodeLinker: node-modules
22

3-
yarnPath: .yarn/releases/yarn-4.5.3.cjs
3+
yarnPath: .yarn/releases/yarn-4.9.2.cjs

‎package.json

Lines changed: 20 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,8 @@
5454
},
5555
"homepage": "https://github.com/ithaka/pharos#readme",
5656
"devDependencies": {
57-
"@babel/core": "^7.26.0",
58-
"@babel/eslint-parser": "^7.27.1",
57+
"@babel/core": "^7.27.4",
58+
"@babel/eslint-parser": "^7.27.5",
5959
"@babel/plugin-proposal-decorators": "^7.27.1",
6060
"@babel/plugin-proposal-export-default-from": "^7.27.1",
6161
"@babel/plugin-syntax-import-assertions": "^7.27.1",
@@ -66,16 +66,16 @@
6666
"@commitlint/config-conventional": "^19.8.1",
6767
"@emotion/babel-plugin": "^11.13.5",
6868
"@size-limit/preset-small-lib": "^11.2.0",
69-
"@storybook/addon-a11y": "^9.0.4",
70-
"@storybook/addon-docs": "^9.0.4",
71-
"@storybook/addon-links": "^9.0.4",
72-
"@storybook/react-vite": "^9.0.4",
73-
"@storybook/web-components": "^9.0.4",
74-
"@storybook/web-components-vite": "^9.0.4",
69+
"@storybook/addon-a11y": "^9.0.5",
70+
"@storybook/addon-docs": "^9.0.5",
71+
"@storybook/addon-links": "^9.0.5",
72+
"@storybook/react-vite": "^9.0.5",
73+
"@storybook/web-components": "^9.0.5",
74+
"@storybook/web-components-vite": "^9.0.5",
7575
"@types/uuid": "^10.0.0",
76-
"@typescript-eslint/eslint-plugin": "^8.33.0",
77-
"@typescript-eslint/parser": "^8.33.0",
78-
"@vitejs/plugin-react": "^4.5.0",
76+
"@typescript-eslint/eslint-plugin": "^8.33.1",
77+
"@typescript-eslint/parser": "^8.33.1",
78+
"@vitejs/plugin-react": "^4.5.1",
7979
"all-contributors-cli": "^6.26.1",
8080
"concurrently": "^9.1.2",
8181
"cssnano": "^7.0.7",
@@ -86,44 +86,43 @@
8686
"eslint-plugin-prettier": "^5.4.1",
8787
"eslint-plugin-react": "^7.37.5",
8888
"eslint-plugin-react-hooks": "^5.2.0",
89-
"eslint-plugin-storybook": "^9.0.4",
89+
"eslint-plugin-storybook": "^9.0.5",
9090
"eslint-plugin-wc": "^3.0.1",
9191
"globals": "^16.2.0",
9292
"husky": "^9.1.7",
9393
"lint-staged": "^16.1.0",
94-
"lit": "^2.8.0",
94+
"lit": "^3.3.0",
9595
"lit-analyzer": "^2.0.3",
9696
"markdown-toc": "^1.2.0",
9797
"postcss": "^8.5.4",
9898
"postcss-import": "^16.1.0",
9999
"postcss-media-minmax": "^5.0.0",
100-
"postcss-preset-env": "^10.2.0",
100+
"postcss-preset-env": "^10.2.1",
101101
"prettier": "^3.5.3",
102102
"pretty-quick": "^4.2.2",
103103
"react": "^18.3.1",
104104
"react-dom": "^18.3.1",
105105
"sass": "^1.89.1",
106106
"size-limit": "^11.2.0",
107-
"storybook": "^9.0.4",
107+
"storybook": "^9.0.5",
108108
"stylelint": "^16.20.0",
109109
"stylelint-config-standard-scss": "^15.0.1",
110110
"stylelint-scss": "^6.12.0",
111-
"svglint": "^3.1.0",
111+
"svglint": "^4.1.0",
112112
"vite": "^6.3.5"
113113
},
114114
"workspaces": {
115115
"packages": [
116116
"packages/*"
117117
]
118118
},
119+
"resolutions": {
120+
"@storybook/react@npm:9.0.5": "patch:@storybook/react@npm%3A9.0.5#~/.yarn/patches/@storybook-react-npm-9.0.5-21b095f1f3.patch"
121+
},
119122
"size-limit": [
120123
{
121124
"path": "packages/pharos/lib/index.js"
122125
}
123126
],
124-
"resolutions": {
125-
"@lit-labs/scoped-registry-mixin": "1.0.1",
126-
"@storybook/react@npm:9.0.4": "patch:@storybook/react@npm%3A9.0.4#~/.yarn/patches/@storybook-react-npm-9.0.4-d4223a50a3.patch"
127-
},
128-
"packageManager": "[email protected]"
127+
"packageManager": "[email protected]"
129128
}

‎packages/pharos-cli/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
},
1717
"devDependencies": {
1818
"@types/jest": "^29.5.14",
19-
"@types/node": "^22.15.29",
19+
"@types/node": "^22.15.30",
2020
"jest": "^29.7.0",
2121
"ts-jest": "^29.3.4",
2222
"ts-morph": "^26.0.0",

‎packages/pharos-site/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@
88
"dependencies": {
99
"@ithaka/pharos": "^14.5.0",
1010
"@reach/router": "^1.3.4",
11-
"@webcomponents/scoped-custom-element-registry": "^0.0.3",
12-
"gatsby": "^5.14.3",
11+
"@webcomponents/scoped-custom-element-registry": "^0.0.10",
12+
"gatsby": "^5.14.4",
1313
"gatsby-plugin-alias-imports": "^1.0.5",
1414
"gatsby-plugin-google-tagmanager": "^5.14.0",
1515
"gatsby-plugin-image": "^3.14.0",

‎packages/pharos/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,9 +57,9 @@
5757
"dependencies": {
5858
"@floating-ui/dom": "^1.7.1",
5959
"@ithaka/focus-trap": "2.0.1",
60-
"@lit-labs/scoped-registry-mixin": "^1.0.1",
60+
"@lit-labs/scoped-registry-mixin": "^1.0.4",
6161
"@open-wc/dedupe-mixin": "^1.4.0",
62-
"lit": "^2.8.0",
62+
"lit": "^3.3.0",
6363
"uuid": "^11.1.0"
6464
},
6565
"peerDependencies": {

‎packages/pharos/src/components/alert/pharos-alert.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ export class PharosAlert extends ScopedRegistryMixin(FocusMixin(PharosElement))
131131
[`alert--closable`]: this.closable,
132132
})}"
133133
>
134-
<pharos-icon class="alert__icon" name="${this._getIcon()}" a11y-hidden="true"></pharos-icon>
134+
<pharos-icon class="alert__icon" name=${this._getIcon()} a11y-hidden="true"></pharos-icon>
135135
<div class="alert__body">
136136
<slot @slotchange=${this._handleSlotChange}></slot>
137137
</div>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export default {
1515

1616
const Base = {
1717
render: ({ status, text, closable }) =>
18-
html`<storybook-pharos-alert status=${status} ?closable=${closable}
18+
html`<storybook-pharos-alert status=${status} .closable=${closable}
1919
>${text}</storybook-pharos-alert
2020
>`,
2121
args: defaultArgs,
@@ -39,7 +39,7 @@ export const Success = {
3939

4040
export const Warning = {
4141
render: ({ status, text, closable }) =>
42-
html` <storybook-pharos-alert status=${status} ?closable=${closable}>
42+
html` <storybook-pharos-alert status=${status} .closable=${closable}>
4343
<p class="alert-example__content">${text}</p>
4444
<p class="alert-example__content">
4545
See <storybook-pharos-link href="#">how to fix this</storybook-pharos-link>.
@@ -53,7 +53,7 @@ export const Warning = {
5353

5454
export const Error = {
5555
render: ({ status, text, closable }) =>
56-
html` <storybook-pharos-alert status=${status} ?closable=${closable}>
56+
html` <storybook-pharos-alert status=${status} .closable=${closable}>
5757
<p class="alert-example__content">${text}</p>
5858
<p class="alert-example__content">
5959
For more information,

‎packages/pharos/src/components/button/pharos-button.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -259,7 +259,7 @@ export class PharosButton extends ScopedRegistryMixin(FocusMixin(AnchorElement))
259259
icon = this.icon;
260260
}
261261

262-
return icon ? html` <pharos-icon name="${icon}" a11y-hidden="true"></pharos-icon> ` : nothing;
262+
return icon ? html` <pharos-icon name=${icon} a11y-hidden="true"></pharos-icon> ` : nothing;
263263
}
264264

265265
protected get buttonContent(): TemplateResult {
@@ -297,11 +297,11 @@ export class PharosButton extends ScopedRegistryMixin(FocusMixin(AnchorElement))
297297
: html`
298298
<button
299299
id="button-element"
300-
name="${ifDefined(this.name)}"
301-
value="${ifDefined(this.value)}"
300+
name=${ifDefined(this.name)}
301+
value=${ifDefined(this.value)}
302302
?autofocus=${this.autofocus}
303303
?disabled=${this.a11yDisabled ? false : this.disabled}
304-
type="${ifDefined(this.type)}"
304+
type=${ifDefined(this.type)}
305305
aria-label=${ifDefined(this.a11yLabel)}
306306
aria-pressed=${ifDefined(this.a11yPressed)}
307307
aria-expanded=${ifDefined(this.a11yExpanded)}

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,21 +20,21 @@ export default {
2020
export const Base = {
2121
render: (args) => html`
2222
<storybook-pharos-button
23-
?disabled=${ifDefined(args.disabled)}
23+
.disabled=${args.disabled}
2424
download=${ifDefined(args.download)}
2525
icon=${ifDefined(args.icon)}
26-
?icon-condensed=${ifDefined(args.iconCondensed)}
26+
.iconCondensed=${args.iconCondensed}
2727
icon-left=${ifDefined(args.iconLeft)}
2828
icon-right=${ifDefined(args.iconRight)}
29-
?full-width=${ifDefined(args.fullWidth)}
29+
.fullWidth=${ifDefined(args.fullWidth)}
3030
href=${ifDefined(args.href)}
3131
hreflang=${ifDefined(args.hreflang)}
3232
a11y-label=${ifDefined(args.a11yLabel)}
33-
a11y-expanded=${ifDefined(args.a11yExpanded)}
34-
a11y-pressed=${ifDefined(args.a11yPressed)}
35-
a11y-disabled=${ifDefined(args.a11yDisabled)}
36-
?large=${ifDefined(args.large)}
37-
?is-on-background=${ifDefined(args.isOnBackground)}
33+
.a11y-expanded=${args.a11yExpanded}
34+
.a11y-pressed=${args.a11yPressed}
35+
.a11y-disabled=${args.a11yDisabled}
36+
.large=${args.large}
37+
.isOnBackground=${args.isOnBackground}
3838
ping=${ifDefined(args.ping)}
3939
target=${ifDefined(args.target)}
4040
type=${ifDefined(args.type)}

‎packages/pharos/src/components/checkbox-group/pharos-checkbox-group.test.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ describe('pharos-checkbox-group', () => {
119119
it('renders a provided message', async () => {
120120
const text = 'Please make a selection';
121121
component = await fixture(html`
122-
<test-pharos-checkbox-group message="${text}">
122+
<test-pharos-checkbox-group message=${text}>
123123
<span slot="legend">Checkbox Group Header</span>
124124
<test-pharos-checkbox value="1"><span slot="label">Checkbox 1</span></test-pharos-checkbox>
125125
<test-pharos-checkbox value="2"><span slot="label">Checkbox 2</span></test-pharos-checkbox>
@@ -132,7 +132,7 @@ describe('pharos-checkbox-group', () => {
132132
it('renders the provided message as the groups accessible description', async () => {
133133
const text = 'Please make a selection';
134134
component = await fixture(html`
135-
<test-pharos-checkbox-group message="${text}">
135+
<test-pharos-checkbox-group message=${text}>
136136
<span slot="legend">Checkbox Group Header</span>
137137
<test-pharos-checkbox value="1"><span slot="label">Checkbox 1</span></test-pharos-checkbox>
138138
<test-pharos-checkbox value="2"><span slot="label">Checkbox 2</span></test-pharos-checkbox>

‎packages/pharos/src/components/checkbox-group/pharos-checkbox-group.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ export class PharosCheckboxGroup extends FormElement {
8585
return html`
8686
<fieldset
8787
class="checkbox-group checkbox-group--${this.horizontal ? 'horizontal' : 'vertical'}"
88-
aria-invalid="${this.invalidated}"
88+
aria-invalid=${this.invalidated}
8989
aria-describedby=${ifDefined(this.messageId)}
9090
>
9191
<legend id="legend" class="checkbox-group__legend">

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,13 @@ export default {
2020
export const Base = {
2121
render: (args) =>
2222
html` <storybook-pharos-checkbox-group
23-
?disabled=${args.disabled}
24-
?hide-label="${args.hideLabel}"
25-
?horizontal=${args.horizontal}
26-
?invalidated=${args.invalidated}
23+
.disabled=${args.disabled}
24+
.hide-label="${args.hideLabel}"
25+
.horizontal=${args.horizontal}
26+
.invalidated=${args.invalidated}
2727
.message="${args.message}"
28-
?required=${args.required}
29-
?validated=${args.validated}
28+
.required=${args.required}
29+
.validated=${args.validated}
3030
>
3131
<span slot="legend">Checkbox Group Header</span>
3232
<storybook-pharos-checkbox value="1"

‎packages/pharos/src/components/checkbox/pharos-checkbox.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -140,11 +140,11 @@ export class PharosCheckbox extends FormMixin(FormElement) {
140140
.value=${this.value}
141141
.indeterminate=${this.indeterminate}
142142
?checked=${this.checked}
143-
?required="${this.required}"
143+
?required=${this.required}
144144
?disabled=${this.disabled}
145-
aria-required="${this.required}"
146-
aria-invalid="${this.invalidated}"
147-
aria-describedby="${ifDefined(this.messageId)}"
145+
aria-required=${this.required}
146+
aria-invalid=${this.invalidated}
147+
aria-describedby=${ifDefined(this.messageId)}
148148
@change=${this.onChange}
149149
/>
150150
<div class="input-wrapper">
@@ -158,7 +158,7 @@ export class PharosCheckbox extends FormMixin(FormElement) {
158158
role="img"
159159
aria-hidden="true"
160160
focusable="false"
161-
@click="${this._handleClick}"
161+
@click=${this._handleClick}
162162
@mousedown=${this._handleMousedown}
163163
>
164164
<rect x="3" y="3" width="18" height="18" rx="3" class="focus" />
@@ -177,7 +177,7 @@ export class PharosCheckbox extends FormMixin(FormElement) {
177177
</svg>
178178
<label
179179
for="checkbox-element"
180-
@click="${this._handleClick}"
180+
@click=${this._handleClick}
181181
@mousedown=${this._handleMousedown}
182182
>
183183
<slot name="label"></slot>

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,11 @@ export default {
1717
export const Base = {
1818
render: (args) =>
1919
html`<storybook-pharos-checkbox
20-
?checked=${args.checked}
21-
?disabled=${args.disabled}
22-
?hide-label=${args.hideLabel}
23-
?required=${args.required}
24-
?invalidated=${args.invalidated}
20+
.checked=${args.checked}
21+
.disabled=${args.disabled}
22+
.hide-label=${args.hideLabel}
23+
.required=${args.required}
24+
.invalidated=${args.invalidated}
2525
.message=${args.message}
2626
>
2727
<span slot="label">${args.label}</span>

‎packages/pharos/src/components/coach-mark/pharos-coach-mark.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -140,10 +140,10 @@ export class PharosCoachMark extends ScopedRegistryMixin(PharosElement) {
140140
id="close-button"
141141
class="coach-mark__close"
142142
type="button"
143-
variant="${this.variant === 'light' ? 'subtle' : 'overlay'}"
143+
variant=${this.variant === 'light' ? 'subtle' : 'overlay'}
144144
icon="close"
145145
a11y-label="Close"
146-
@click="${this._hideCoachMark}"
146+
@click=${this._hideCoachMark}
147147
></pharos-button>
148148
<pharos-heading
149149
id="coach-mark-heading"

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export const Base = {
2626
</div>
2727
<storybook-pharos-coach-mark
2828
id="example-coachmark"
29-
?hide=${ifDefined(args.hide)}
29+
.hide=${ifDefined(args.hide)}
3030
side=${ifDefined(args.side)}
3131
alignment=${ifDefined(args.alignment)}
3232
header=${ifDefined(args.header)}

0 commit comments

Comments
 (0)