1. NPM package version picker

defaults, last version should be preselected

        <custom-element src="./npm-versions.html#npm-version" package-name="@epa-wg/custom-element-dist"></custom-element>
    

2. preselected NPM package version picker

version 22 should be selected and date shown

        <custom-element tag="custom-element-version" src="./npm-versions.html#npm-version"></custom-element>
        <custom-element-version package-name="@epa-wg/custom-element" current-version="0.0.22" show-date="true"></custom-element-version>
    

3. value attribute changed and propagated to slice

upon selection change the version should be shown as 'selected-version' slice value

        <custom-element tag="npm-version" src="./npm-versions.html#npm-version"></custom-element>

        <custom-element>
            <template>
                <npm-version slice="selected-version" package-name="@epa-wg/custom-element"></npm-version>
                <p><code>selected-version</code> slice: {//selected-version/@value}</p>
            </template>
        </custom-element>

    

selected-version slice:

4. label slot override

upon selection change the version should be shown as 'selected-version' slice value

        <custom-element tag="npm-version-1" src="./npm-versions.html#npm-version"></custom-element>

        <custom-element>
            <template>
                <npm-version-1 slice="selected" package-name="@epa-wg/custom-element">
                    <i slot="label">select:</i>
                </npm-version-1>
                <p><code>selected-version</code> slice: {//selected}</p>
            </template>
        </custom-element>

    
select:

selected-version slice:

5. control version in URL

1.
2. switch the package version in select and observe the URL change.

        <custom-element src="@epa-wg/custom-element-dist/demo/npm-versions.html#npm-version-to-url" package-name="@epa-wg/custom-element-dist"></custom-element>