spectrum-web-components Update Getting Started docs to import v1.5.0 instead of v0.40

Code of conduct

[x] I agree to follow this project's code of conduct.

Description of issue

Hi Spectrum Team, The Getting Started page https://opensource.adobe.com/spectrum-web-components/getting-started/ suggests loading the library with:

<script
    src="https://jspm.dev/@spectrum-web-components/bundle/elements.js"
    type="module"
    async
></script>

Unfortunately, that loads v0.40 which was published in 2023-11.

% curl -s https://jspm.dev/@spectrum-web-components/bundle/elements.js |head
import "/npm:@spectrum-web-components/[email protected]/sp-accordion.js";
import "/npm:@spectrum-web-components/[email protected]/sp-accordion-item.js";
import "/npm:@spectrum-web-components/[email protected]/sp-action-bar.js";
import "/npm:@spectrum-web-components/[email protected]/sp-action-button.js";
import "/npm:@spectrum-web-components/[email protected]/sp-action-group.js";
import "/npm:@spectrum-web-components/[email protected]/sp-action-menu.js";
import "/npm:@spectrum-web-components/alert-dialog/sp-alert-dialog.js";
import "/npm:@spectrum-web-components/[email protected]/sp-asset.js";
import "/npm:@spectrum-web-components/[email protected]/sp-avatar.js";
import "/npm:@spectrum-web-components/[email protected]/sp-badge.js";

My partner is doing a masters degree in Design, taking a coding course using Adobe Spectrum Web Components. The class is struggling with bugs (sp-number-field field ignores min), missing components (breadcrumbs), and mismatches between the docs and the code. I think these are due to them using an old version of the library.

Would you please deploy the latest version of the library to jspm.dev?

Another option is to build the @spectrum-web-components/bundle package and its dependencies and host the bundle.js with GitHub Pages.

Sincerely, Michael

I built the bundle and it loads (creating <slot> elements), but styles are not working.

index.js

import * as spectrum from "@spectrum-web-components/bundle";
window.spectrum=spectrum;

index.html

<!DOCTYPE html>
<html lang='en'>
<head>
    <script src="spectrum.js" async></script>
</head>
<body>
<sp-theme system="express" color="light" scale="large">
    <sp-button>ABC</sp-button>
</sp-theme>
</body>
</html>

package.json

{
  "main": "index.js",
  "dependencies": {
    "@spectrum-web-components/bundle": "1.4.0",
    "esbuild": "0.25.2"
  }
}

example % docker run --rm --volume .:/src node:23 /usr/bin/env bash -c \
'cd /src && npm i && npx esbuild index.js --bundle --outfile=spectrum.js --format=iife --global-name=spectrum'

up to date, audited 96 packages in 323ms

found 0 vulnerabilities
npm notice
npm notice New major version of npm available! 10.9.2 -> 11.3.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.3.0
npm notice To update run: npm install -g [email protected]
npm notice

  spectrum.js  1.6mb ⚠️

⚡ Done in 186ms
example % open index.html

example % cd ..                   
~ % zip example.zip example/index.* example/package.json example/spectrum.js 
  adding: example/index.html (deflated 28%)
  adding: example/index.js (deflated 21%)
  adding: example/package.json (deflated 15%)
  adding: example/spectrum.js (deflated 83%)

example.zip

Apr 14 '25 02:04 mleonhard

I have raised an issue on the jspm platform: https://github.com/jspm/jspm/issues/2595

Apr 15 '25 10:04 Rajdeepc

Hi @mleonhard jspm.dev was deprecated and you can read more about this here - https://jspm.org/jspm-dev-deprecation.

Instead, we recommend using import maps now with ga.jspm.io for superior caching of modules, where spectrum components at 1.4.0 can be supported in the JSPM generator with an import map, see for example: https://stackblitz.com/edit/stackblitz-starters-efnx1r6e?description=HTML/CSS/JS%20Starter&file=themes.js,index.html&terminalHeight=10&title=Static%20Starter

Apr 24 '25 17:04 Rajdeepc

Hi @Rajdeepc, Thanks for your reply. How about updating instructions in the Getting Started page?

Apr 29 '25 22:04 mleonhard

This work is being evaluated in an upcoming sprint and hopefully we can address the documentation. In the meantime, I suggest trying another bundling tool such as https://unpkg.com/@spectrum-web-components/[email protected]/elements.js.

May 07 '25 16:05 castastrophe