@spectrum-web-components/icon 0.0.0-20241209155954

package/README.md

@@ -0,0 +1,147 @@
+## Description
+
+`<sp-icon>` renders an icon to the page. By default the `name` attribute will pair with separately registered icon sets to deliver the icons. When not present, `<sp-icon>` will subsequently check for its `src` attribute which could populate the icon via an image, and then fallback to any slotted content for an element based icon.
+
+### Usage
+
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/icon?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/icon)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/icon?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/icon)
+
+```
+yarn add @spectrum-web-components/icon
+```
+
+Import the side effectful registration of `<sp-icon>` via:
+
+```
+import '@spectrum-web-components/icon/sp-icon.js';
+```
+
+When looking to leverage the `Icon` base class as a type and/or for extension purposes, do so via:
+
+```
+import { Icon } from '@spectrum-web-components/icon';
+```
+
+## Example
+
+Names icons on this page are provided by the [`<sp-icons-medium>` icon set](components/icons). Learn how to create your own via [`sp-iconset`](components/iconset).
+
+```html
+<sp-icons-medium></sp-icons-medium>
+<sp-icon name="ui:Arrow100"></sp-icon>
+```
+
+## Variants
+
+Icons are available in various sizes in Spectrum ranging from `s` to `xxl`. By default an `sp-icon` without a `size` attribute will appear as if it were `size="m"`. We can specify the size via `size` attribute.
+
+### Size variants
+
+```html
+<sp-icon size="s" name="ui:Arrow100"></sp-icon>
+<sp-icon size="m" name="ui:Arrow100"></sp-icon>
+<sp-icon size="l" name="ui:Arrow100"></sp-icon>
+<sp-icon size="xl" name="ui:Arrow100"></sp-icon>
+<sp-icon size="xxl" name="ui:Arrow100"></sp-icon>
+```
+
+## Color icon
+
+Icons apply their color as `currentColor` so change the `color` property of the element for customization.
+
+```html
+<sp-icon name="ui:Arrow100" style="color: red;"></sp-icon>
+```
+
+## Image icon
+
+An image icon can be supplied via the `src` attribute. Remember that you cannot style the contents of an image via CSS, so use graphics that are appropriately prepared for including in your applications design requirements.
+
+```html
+<sp-icon
+    size="s"
+    label="Previous"
+    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yOTU3Ljk5NSAtNTUzMC4wMzIgNiAxMCI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6bm9uZTtzdHJva2U6IzE0NzNlNjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImEiIGQ9Ik0yNTEuMywzMzNsNC00LTQtNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI3MDEuNjk1IC01MTk2LjAzMikgcm90YXRlKDE4MCkiLz48L3N2Zz4="
+></sp-icon>
+<sp-icon
+    size="m"
+    label="Previous"
+    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yOTU3Ljk5NSAtNTUzMC4wMzIgNiAxMCI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6bm9uZTtzdHJva2U6IzE0NzNlNjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImEiIGQ9Ik0yNTEuMywzMzNsNC00LTQtNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI3MDEuNjk1IC01MTk2LjAzMikgcm90YXRlKDE4MCkiLz48L3N2Zz4="
+></sp-icon>
+<sp-icon
+    size="l"
+    label="Previous"
+    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yOTU3Ljk5NSAtNTUzMC4wMzIgNiAxMCI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6bm9uZTtzdHJva2U6IzE0NzNlNjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImEiIGQ9Ik0yNTEuMywzMzNsNC00LTQtNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI3MDEuNjk1IC01MTk2LjAzMikgcm90YXRlKDE4MCkiLz48L3N2Zz4="
+></sp-icon>
+<sp-icon
+    size="xl"
+    label="Previous"
+    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yOTU3Ljk5NSAtNTUzMC4wMzIgNiAxMCI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6bm9uZTtzdHJva2U6IzE0NzNlNjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImEiIGQ9Ik0yNTEuMywzMzNsNC00LTQtNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI3MDEuNjk1IC01MTk2LjAzMikgcm90YXRlKDE4MCkiLz48L3N2Zz4="
+></sp-icon>
+<sp-icon
+    size="xxl"
+    label="Previous"
+    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yOTU3Ljk5NSAtNTUzMC4wMzIgNiAxMCI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6bm9uZTtzdHJva2U6IzE0NzNlNjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImEiIGQ9Ik0yNTEuMywzMzNsNC00LTQtNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI3MDEuNjk1IC01MTk2LjAzMikgcm90YXRlKDE4MCkiLz48L3N2Zz4="
+></sp-icon>
+```
+
+## Element icon
+
+Icons can also be supplied as HTML elements to be applied via the default `<slot>`.
+
+```html
+<sp-icon size="s">
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 22 22"
+        role="img"
+        fill="currentColor"
+        height="18"
+        width="18"
+        aria-hidden="true"
+    >
+        <path
+            d="M19.75,10.04h-15l5.97-5.97a.483.483,0,0,0,0-.7l-.35-.36a.513.513,0,0,0-.71,0L2.24,10.44a.513.513,0,0,0,0,.71l7.39,7.84a.513.513,0,0,0,.71,0l.35-.35a.513.513,0,0,0,0-.71L4.76,11.5H19.75a.25.25,0,0,0,.25-.25v-.96A.25.25,0,0,0,19.75,10.04Z"
+        ></path>
+    </svg>
+</sp-icon>
+<sp-icon>
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 22 22"
+        role="img"
+        fill="currentColor"
+        height="18"
+        width="18"
+        aria-hidden="true"
+    >
+        <path
+            d="M19.75,10.04h-15l5.97-5.97a.483.483,0,0,0,0-.7l-.35-.36a.513.513,0,0,0-.71,0L2.24,10.44a.513.513,0,0,0,0,.71l7.39,7.84a.513.513,0,0,0,.71,0l.35-.35a.513.513,0,0,0,0-.71L4.76,11.5H19.75a.25.25,0,0,0,.25-.25v-.96A.25.25,0,0,0,19.75,10.04Z"
+        ></path>
+    </svg>
+</sp-icon>
+<sp-icon size="xxl">
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 22 22"
+        role="img"
+        fill="currentColor"
+        height="18"
+        width="18"
+        aria-hidden="true"
+    >
+        <path
+            d="M19.75,10.04h-15l5.97-5.97a.483.483,0,0,0,0-.7l-.35-.36a.513.513,0,0,0-.71,0L2.24,10.44a.513.513,0,0,0,0,.71l7.39,7.84a.513.513,0,0,0,.71,0l.35-.35a.513.513,0,0,0,0-.71L4.76,11.5H19.75a.25.25,0,0,0,.25-.25v-.96A.25.25,0,0,0,19.75,10.04Z"
+        ></path>
+    </svg>
+</sp-icon>
+```
+
+## Accessibility
+
+`aria-hidden` is set to true by default for Icons. The `label` attribute suppresses this and adds the label text as the aria-label of the icon.
+
+```html
+<sp-icon name="ui:Arrow100" label="Arrow pointing to the right"></sp-icon>
+```

package/package.json

@@ -0,0 +1,96 @@
+{
+    "name": "@spectrum-web-components/icon",
+    "version": "0.0.0-20241209155954",
+    "publishConfig": {
+        "access": "public"
+    },
+    "description": "",
+    "license": "Apache-2.0",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/adobe/spectrum-web-components.git",
+        "directory": "packages/icon"
+    },
+    "author": "",
+    "homepage": "https://opensource.adobe.com/spectrum-web-components/components/icon",
+    "bugs": {
+        "url": "https://github.com/adobe/spectrum-web-components/issues"
+    },
+    "main": "./src/index.js",
+    "module": "./src/index.js",
+    "type": "module",
+    "exports": {
+        ".": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
+        "./package.json": "./package.json",
+        "./src/Icon.js": {
+            "development": "./src/Icon.dev.js",
+            "default": "./src/Icon.js"
+        },
+        "./src/IconBase.js": {
+            "development": "./src/IconBase.dev.js",
+            "default": "./src/IconBase.js"
+        },
+        "./src/icon-arrow-overrides.css.js": "./src/icon-arrow-overrides.css.js",
+        "./src/icon-asterisk-overrides.css.js": "./src/icon-asterisk-overrides.css.js",
+        "./src/icon-checkmark-overrides.css.js": "./src/icon-checkmark-overrides.css.js",
+        "./src/icon-chevron-overrides.css.js": "./src/icon-chevron-overrides.css.js",
+        "./src/icon-corner-triangle-overrides.css.js": "./src/icon-corner-triangle-overrides.css.js",
+        "./src/icon-cross-overrides.css.js": "./src/icon-cross-overrides.css.js",
+        "./src/icon-dash-overrides.css.js": "./src/icon-dash-overrides.css.js",
+        "./src/icon-overrides.css.js": "./src/icon-overrides.css.js",
+        "./src/icon-single-gripper-overrides.css.js": "./src/icon-single-gripper-overrides.css.js",
+        "./src/icon-triple-gripper-overrides.css.js": "./src/icon-triple-gripper-overrides.css.js",
+        "./src/icon.css.js": "./src/icon.css.js",
+        "./src/index.js": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
+        "./src/spectrum-icon-arrow.css.js": "./src/spectrum-icon-arrow.css.js",
+        "./src/spectrum-icon-asterisk.css.js": "./src/spectrum-icon-asterisk.css.js",
+        "./src/spectrum-icon-checkmark.css.js": "./src/spectrum-icon-checkmark.css.js",
+        "./src/spectrum-icon-chevron.css.js": "./src/spectrum-icon-chevron.css.js",
+        "./src/spectrum-icon-corner-triangle.css.js": "./src/spectrum-icon-corner-triangle.css.js",
+        "./src/spectrum-icon-cross.css.js": "./src/spectrum-icon-cross.css.js",
+        "./src/spectrum-icon-dash.css.js": "./src/spectrum-icon-dash.css.js",
+        "./src/spectrum-icon-double-gripper.css.js": "./src/spectrum-icon-double-gripper.css.js",
+        "./src/spectrum-icon-single-gripper.css.js": "./src/spectrum-icon-single-gripper.css.js",
+        "./src/spectrum-icon-triple-gripper.css.js": "./src/spectrum-icon-triple-gripper.css.js",
+        "./sp-icon.js": {
+            "development": "./sp-icon.dev.js",
+            "default": "./sp-icon.js"
+        }
+    },
+    "scripts": {
+        "test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
+    },
+    "files": [
+        "**/*.d.ts",
+        "**/*.js",
+        "**/*.js.map",
+        "custom-elements.json",
+        "!stories/",
+        "!test/"
+    ],
+    "keywords": [
+        "spectrum css",
+        "web components",
+        "lit-element",
+        "lit-html"
+    ],
+    "dependencies": {
+        "@spectrum-web-components/base": "0.0.0-20241209155954",
+        "@spectrum-web-components/iconset": "0.0.0-20241209155954"
+    },
+    "devDependencies": {
+        "@spectrum-css/icon": "^8.0.0-s2-foundations.17"
+    },
+    "types": "./src/index.d.ts",
+    "customElements": "custom-elements.json",
+    "sideEffects": [
+        "./sp-*.js",
+        "./**/*.dev.js"
+    ]
+}

package/sp-icon.d.ts

@@ -0,0 +1,6 @@
+import { Icon } from './src/Icon.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'sp-icon': Icon;
+    }
+}

package/sp-icon.dev.js

@@ -0,0 +1,5 @@
+"use strict";
+import { Icon } from "./src/Icon.dev.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
+defineElement("sp-icon", Icon);
+//# sourceMappingURL=sp-icon.dev.js.map

package/sp-icon.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-icon.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { Icon } from './src/Icon.dev.js'\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-icon', Icon);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-icon': Icon;\n    }\n}\n"],
+  "mappings": ";AAWA,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAE9B,cAAc,WAAW,IAAI;",
+  "names": []
+}

package/sp-icon.js

@@ -0,0 +1,2 @@
+"use strict";import{Icon as e}from"./src/Icon.js";import{defineElement as o}from"@spectrum-web-components/base/src/define-element.js";o("sp-icon",e);
+//# sourceMappingURL=sp-icon.js.map

package/sp-icon.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-icon.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { Icon } from './src/Icon.js';\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-icon', Icon);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-icon': Icon;\n    }\n}\n"],
+  "mappings": "aAWA,OAAS,QAAAA,MAAY,gBACrB,OAAS,iBAAAC,MAAqB,sDAE9BA,EAAc,UAAWD,CAAI",
+  "names": ["Icon", "defineElement"]
+}

package/src/Icon.d.ts

@@ -0,0 +1,21 @@
+import { TemplateResult } from '@spectrum-web-components/base';
+import { IconBase } from './IconBase.js';
+/**
+ * @element sp-icon
+ */
+export declare class Icon extends IconBase {
+    src?: string;
+    name?: string;
+    private iconContainer?;
+    private updateIconPromise?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    attributeChangedCallback(name: string, old: string, value: string): void;
+    private iconsetListener;
+    private announceIconImageSrcError;
+    protected render(): TemplateResult;
+    private updateIcon;
+    private parseIcon;
+    protected getUpdateComplete(): Promise<boolean>;
+}

package/src/Icon.dev.js

@@ -0,0 +1,121 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+import { html } from "@spectrum-web-components/base";
+import {
+  property,
+  query
+} from "@spectrum-web-components/base/src/decorators.js";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
+import { IconsetRegistry } from "@spectrum-web-components/iconset/src/iconset-registry.js";
+import { IconBase } from "./IconBase.dev.js";
+export class Icon extends IconBase {
+  constructor() {
+    super(...arguments);
+    this.iconsetListener = (event) => {
+      if (!this.name) {
+        return;
+      }
+      const icon = this.parseIcon(this.name);
+      if (event.detail.name === icon.iconset) {
+        this.updateIconPromise = this.updateIcon();
+      }
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("sp-iconset-added", this.iconsetListener);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener("sp-iconset-added", this.iconsetListener);
+  }
+  firstUpdated() {
+    this.updateIconPromise = this.updateIcon();
+  }
+  attributeChangedCallback(name, old, value) {
+    super.attributeChangedCallback(name, old, value);
+    this.updateIconPromise = this.updateIcon();
+  }
+  announceIconImageSrcError() {
+    this.dispatchEvent(
+      new Event("error", {
+        cancelable: false,
+        bubbles: false,
+        composed: false
+      })
+    );
+  }
+  render() {
+    if (this.name) {
+      return html`
+                <div id="container"></div>
+            `;
+    } else if (this.src) {
+      return html`
+                <img
+                    src="${this.src}"
+                    alt=${ifDefined(this.label)}
+                    @error=${this.announceIconImageSrcError}
+                />
+            `;
+    }
+    return super.render();
+  }
+  async updateIcon() {
+    if (this.updateIconPromise) {
+      await this.updateIconPromise;
+    }
+    if (!this.name) {
+      return Promise.resolve();
+    }
+    const icon = this.parseIcon(this.name);
+    const iconset = IconsetRegistry.getInstance().getIconset(icon.iconset);
+    if (!iconset) {
+      return Promise.resolve();
+    }
+    if (!this.iconContainer) {
+      return Promise.resolve();
+    }
+    this.iconContainer.innerHTML = "";
+    return iconset.applyIconToElement(
+      this.iconContainer,
+      icon.icon,
+      this.size || "",
+      this.label ? this.label : ""
+    );
+  }
+  parseIcon(icon) {
+    const iconParts = icon.split(":");
+    let iconsetName = "default";
+    let iconName = icon;
+    if (iconParts.length > 1) {
+      iconsetName = iconParts[0];
+      iconName = iconParts[1];
+    }
+    return { iconset: iconsetName, icon: iconName };
+  }
+  async getUpdateComplete() {
+    const complete = await super.getUpdateComplete();
+    await this.updateIconPromise;
+    return complete;
+  }
+}
+__decorateClass([
+  property()
+], Icon.prototype, "src", 2);
+__decorateClass([
+  property()
+], Icon.prototype, "name", 2);
+__decorateClass([
+  query("#container")
+], Icon.prototype, "iconContainer", 2);
+//# sourceMappingURL=Icon.dev.js.map

package/src/Icon.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["Icon.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport {\n    property,\n    query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\n\nimport { IconsetRegistry } from '@spectrum-web-components/iconset/src/iconset-registry.js';\n\nimport { IconBase } from './IconBase.dev.js'\n\n/**\n * @element sp-icon\n */\nexport class Icon extends IconBase {\n    @property()\n    public src?: string;\n\n    @property()\n    public name?: string;\n\n    @query('#container')\n    private iconContainer?: HTMLElement;\n\n    private updateIconPromise?: Promise<void>;\n\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        window.addEventListener('sp-iconset-added', this.iconsetListener);\n    }\n\n    public override disconnectedCallback(): void {\n        super.disconnectedCallback();\n        window.removeEventListener('sp-iconset-added', this.iconsetListener);\n    }\n\n    public override firstUpdated(): void {\n        this.updateIconPromise = this.updateIcon();\n    }\n\n    public override attributeChangedCallback(\n        name: string,\n        old: string,\n        value: string\n    ): void {\n        super.attributeChangedCallback(name, old, value);\n        this.updateIconPromise = this.updateIcon(); // any of our attributes change, update our icon\n    }\n\n    private iconsetListener = (event: CustomEvent): void => {\n        if (!this.name) {\n            return;\n        }\n        // parse the icon name to get iconset name\n        const icon = this.parseIcon(this.name);\n        if (event.detail.name === icon.iconset) {\n            this.updateIconPromise = this.updateIcon();\n        }\n    };\n\n    private announceIconImageSrcError(): void {\n        this.dispatchEvent(\n            new Event('error', {\n                cancelable: false,\n                bubbles: false,\n                composed: false,\n            })\n        );\n    }\n\n    protected override render(): TemplateResult {\n        if (this.name) {\n            return html`\n                <div id=\"container\"></div>\n            `;\n        } else if (this.src) {\n            return html`\n                <img\n                    src=\"${this.src}\"\n                    alt=${ifDefined(this.label)}\n                    @error=${this.announceIconImageSrcError}\n                />\n            `;\n        }\n        return super.render();\n    }\n\n    private async updateIcon(): Promise<void> {\n        if (this.updateIconPromise) {\n            await this.updateIconPromise;\n        }\n        if (!this.name) {\n            return Promise.resolve();\n        }\n        // parse the icon name to get iconset name\n        const icon = this.parseIcon(this.name);\n        // try to retrieve the iconset\n        const iconset = IconsetRegistry.getInstance().getIconset(icon.iconset);\n        if (!iconset) {\n            // we can stop here as there's nothing to be done till we get the iconset\n            return Promise.resolve();\n        }\n        if (!this.iconContainer) {\n            return Promise.resolve();\n        }\n        this.iconContainer.innerHTML = '';\n        return iconset.applyIconToElement(\n            this.iconContainer,\n            icon.icon,\n            this.size || '',\n            this.label ? this.label : ''\n        );\n    }\n\n    private parseIcon(icon: string): { iconset: string; icon: string } {\n        const iconParts = icon.split(':');\n        let iconsetName = 'default';\n        let iconName = icon;\n        if (iconParts.length > 1) {\n            iconsetName = iconParts[0];\n            iconName = iconParts[1];\n        }\n        return { iconset: iconsetName, icon: iconName };\n    }\n\n    protected override async getUpdateComplete(): Promise<boolean> {\n        const complete = (await super.getUpdateComplete()) as boolean;\n        await this.updateIconPromise;\n        return complete;\n    }\n}\n"],
+  "mappings": ";;;;;;;;;;;AAYA,SAAS,YAA4B;AACrC;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,SAAS,iBAAiB;AAE1B,SAAS,uBAAuB;AAEhC,SAAS,gBAAgB;AAKlB,aAAM,aAAa,SAAS;AAAA,EAA5B;AAAA;AAmCH,SAAQ,kBAAkB,CAAC,UAA6B;AACpD,UAAI,CAAC,KAAK,MAAM;AACZ;AAAA,MACJ;AAEA,YAAM,OAAO,KAAK,UAAU,KAAK,IAAI;AACrC,UAAI,MAAM,OAAO,SAAS,KAAK,SAAS;AACpC,aAAK,oBAAoB,KAAK,WAAW;AAAA,MAC7C;AAAA,IACJ;AAAA;AAAA,EAhCgB,oBAA0B;AACtC,UAAM,kBAAkB;AACxB,WAAO,iBAAiB,oBAAoB,KAAK,eAAe;AAAA,EACpE;AAAA,EAEgB,uBAA6B;AACzC,UAAM,qBAAqB;AAC3B,WAAO,oBAAoB,oBAAoB,KAAK,eAAe;AAAA,EACvE;AAAA,EAEgB,eAAqB;AACjC,SAAK,oBAAoB,KAAK,WAAW;AAAA,EAC7C;AAAA,EAEgB,yBACZ,MACA,KACA,OACI;AACJ,UAAM,yBAAyB,MAAM,KAAK,KAAK;AAC/C,SAAK,oBAAoB,KAAK,WAAW;AAAA,EAC7C;AAAA,EAaQ,4BAAkC;AACtC,SAAK;AAAA,MACD,IAAI,MAAM,SAAS;AAAA,QACf,YAAY;AAAA,QACZ,SAAS;AAAA,QACT,UAAU;AAAA,MACd,CAAC;AAAA,IACL;AAAA,EACJ;AAAA,EAEmB,SAAyB;AACxC,QAAI,KAAK,MAAM;AACX,aAAO;AAAA;AAAA;AAAA,IAGX,WAAW,KAAK,KAAK;AACjB,aAAO;AAAA;AAAA,2BAEQ,KAAK,GAAG;AAAA,0BACT,UAAU,KAAK,KAAK,CAAC;AAAA,6BAClB,KAAK,yBAAyB;AAAA;AAAA;AAAA,IAGnD;AACA,WAAO,MAAM,OAAO;AAAA,EACxB;AAAA,EAEA,MAAc,aAA4B;AACtC,QAAI,KAAK,mBAAmB;AACxB,YAAM,KAAK;AAAA,IACf;AACA,QAAI,CAAC,KAAK,MAAM;AACZ,aAAO,QAAQ,QAAQ;AAAA,IAC3B;AAEA,UAAM,OAAO,KAAK,UAAU,KAAK,IAAI;AAErC,UAAM,UAAU,gBAAgB,YAAY,EAAE,WAAW,KAAK,OAAO;AACrE,QAAI,CAAC,SAAS;AAEV,aAAO,QAAQ,QAAQ;AAAA,IAC3B;AACA,QAAI,CAAC,KAAK,eAAe;AACrB,aAAO,QAAQ,QAAQ;AAAA,IAC3B;AACA,SAAK,cAAc,YAAY;AAC/B,WAAO,QAAQ;AAAA,MACX,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK,QAAQ;AAAA,MACb,KAAK,QAAQ,KAAK,QAAQ;AAAA,IAC9B;AAAA,EACJ;AAAA,EAEQ,UAAU,MAAiD;AAC/D,UAAM,YAAY,KAAK,MAAM,GAAG;AAChC,QAAI,cAAc;AAClB,QAAI,WAAW;AACf,QAAI,UAAU,SAAS,GAAG;AACtB,oBAAc,UAAU,CAAC;AACzB,iBAAW,UAAU,CAAC;AAAA,IAC1B;AACA,WAAO,EAAE,SAAS,aAAa,MAAM,SAAS;AAAA,EAClD;AAAA,EAEA,MAAyB,oBAAsC;AAC3D,UAAM,WAAY,MAAM,MAAM,kBAAkB;AAChD,UAAM,KAAK;AACX,WAAO;AAAA,EACX;AACJ;AAlHW;AAAA,EADN,SAAS;AAAA,GADD,KAEF;AAGA;AAAA,EADN,SAAS;AAAA,GAJD,KAKF;AAGC;AAAA,EADP,MAAM,YAAY;AAAA,GAPV,KAQD;",
+  "names": []
+}

package/src/Icon.js

@@ -0,0 +1,10 @@
+"use strict";var p=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var o=(s,r,e,t)=>{for(var i=t>1?void 0:t?l(r,e):r,n=s.length-1,a;n>=0;n--)(a=s[n])&&(i=(t?a(r,e,i):a(i))||i);return t&&i&&p(r,e,i),i};import{html as c}from"@spectrum-web-components/base";import{property as d,query as m}from"@spectrum-web-components/base/src/decorators.js";import{ifDefined as u}from"@spectrum-web-components/base/src/directives.js";import{IconsetRegistry as h}from"@spectrum-web-components/iconset/src/iconset-registry.js";import{IconBase as v}from"./IconBase.js";export class Icon extends v{constructor(){super(...arguments);this.iconsetListener=e=>{if(!this.name)return;const t=this.parseIcon(this.name);e.detail.name===t.iconset&&(this.updateIconPromise=this.updateIcon())}}connectedCallback(){super.connectedCallback(),window.addEventListener("sp-iconset-added",this.iconsetListener)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("sp-iconset-added",this.iconsetListener)}firstUpdated(){this.updateIconPromise=this.updateIcon()}attributeChangedCallback(e,t,i){super.attributeChangedCallback(e,t,i),this.updateIconPromise=this.updateIcon()}announceIconImageSrcError(){this.dispatchEvent(new Event("error",{cancelable:!1,bubbles:!1,composed:!1}))}render(){return this.name?c`
+                <div id="container"></div>
+            `:this.src?c`
+                <img
+                    src="${this.src}"
+                    alt=${u(this.label)}
+                    @error=${this.announceIconImageSrcError}
+                />
+            `:super.render()}async updateIcon(){if(this.updateIconPromise&&await this.updateIconPromise,!this.name)return Promise.resolve();const e=this.parseIcon(this.name),t=h.getInstance().getIconset(e.iconset);return!t||!this.iconContainer?Promise.resolve():(this.iconContainer.innerHTML="",t.applyIconToElement(this.iconContainer,e.icon,this.size||"",this.label?this.label:""))}parseIcon(e){const t=e.split(":");let i="default",n=e;return t.length>1&&(i=t[0],n=t[1]),{iconset:i,icon:n}}async getUpdateComplete(){const e=await super.getUpdateComplete();return await this.updateIconPromise,e}}o([d()],Icon.prototype,"src",2),o([d()],Icon.prototype,"name",2),o([m("#container")],Icon.prototype,"iconContainer",2);
+//# sourceMappingURL=Icon.js.map

package/src/Icon.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["Icon.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport {\n    property,\n    query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\n\nimport { IconsetRegistry } from '@spectrum-web-components/iconset/src/iconset-registry.js';\n\nimport { IconBase } from './IconBase.js';\n\n/**\n * @element sp-icon\n */\nexport class Icon extends IconBase {\n    @property()\n    public src?: string;\n\n    @property()\n    public name?: string;\n\n    @query('#container')\n    private iconContainer?: HTMLElement;\n\n    private updateIconPromise?: Promise<void>;\n\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        window.addEventListener('sp-iconset-added', this.iconsetListener);\n    }\n\n    public override disconnectedCallback(): void {\n        super.disconnectedCallback();\n        window.removeEventListener('sp-iconset-added', this.iconsetListener);\n    }\n\n    public override firstUpdated(): void {\n        this.updateIconPromise = this.updateIcon();\n    }\n\n    public override attributeChangedCallback(\n        name: string,\n        old: string,\n        value: string\n    ): void {\n        super.attributeChangedCallback(name, old, value);\n        this.updateIconPromise = this.updateIcon(); // any of our attributes change, update our icon\n    }\n\n    private iconsetListener = (event: CustomEvent): void => {\n        if (!this.name) {\n            return;\n        }\n        // parse the icon name to get iconset name\n        const icon = this.parseIcon(this.name);\n        if (event.detail.name === icon.iconset) {\n            this.updateIconPromise = this.updateIcon();\n        }\n    };\n\n    private announceIconImageSrcError(): void {\n        this.dispatchEvent(\n            new Event('error', {\n                cancelable: false,\n                bubbles: false,\n                composed: false,\n            })\n        );\n    }\n\n    protected override render(): TemplateResult {\n        if (this.name) {\n            return html`\n                <div id=\"container\"></div>\n            `;\n        } else if (this.src) {\n            return html`\n                <img\n                    src=\"${this.src}\"\n                    alt=${ifDefined(this.label)}\n                    @error=${this.announceIconImageSrcError}\n                />\n            `;\n        }\n        return super.render();\n    }\n\n    private async updateIcon(): Promise<void> {\n        if (this.updateIconPromise) {\n            await this.updateIconPromise;\n        }\n        if (!this.name) {\n            return Promise.resolve();\n        }\n        // parse the icon name to get iconset name\n        const icon = this.parseIcon(this.name);\n        // try to retrieve the iconset\n        const iconset = IconsetRegistry.getInstance().getIconset(icon.iconset);\n        if (!iconset) {\n            // we can stop here as there's nothing to be done till we get the iconset\n            return Promise.resolve();\n        }\n        if (!this.iconContainer) {\n            return Promise.resolve();\n        }\n        this.iconContainer.innerHTML = '';\n        return iconset.applyIconToElement(\n            this.iconContainer,\n            icon.icon,\n            this.size || '',\n            this.label ? this.label : ''\n        );\n    }\n\n    private parseIcon(icon: string): { iconset: string; icon: string } {\n        const iconParts = icon.split(':');\n        let iconsetName = 'default';\n        let iconName = icon;\n        if (iconParts.length > 1) {\n            iconsetName = iconParts[0];\n            iconName = iconParts[1];\n        }\n        return { iconset: iconsetName, icon: iconName };\n    }\n\n    protected override async getUpdateComplete(): Promise<boolean> {\n        const complete = (await super.getUpdateComplete()) as boolean;\n        await this.updateIconPromise;\n        return complete;\n    }\n}\n"],
+  "mappings": "qNAYA,OAAS,QAAAA,MAA4B,gCACrC,OACI,YAAAC,EACA,SAAAC,MACG,kDACP,OAAS,aAAAC,MAAiB,kDAE1B,OAAS,mBAAAC,MAAuB,2DAEhC,OAAS,YAAAC,MAAgB,gBAKlB,aAAM,aAAaA,CAAS,CAA5B,kCAmCH,KAAQ,gBAAmBC,GAA6B,CACpD,GAAI,CAAC,KAAK,KACN,OAGJ,MAAMC,EAAO,KAAK,UAAU,KAAK,IAAI,EACjCD,EAAM,OAAO,OAASC,EAAK,UAC3B,KAAK,kBAAoB,KAAK,WAAW,EAEjD,EAhCgB,mBAA0B,CACtC,MAAM,kBAAkB,EACxB,OAAO,iBAAiB,mBAAoB,KAAK,eAAe,CACpE,CAEgB,sBAA6B,CACzC,MAAM,qBAAqB,EAC3B,OAAO,oBAAoB,mBAAoB,KAAK,eAAe,CACvE,CAEgB,cAAqB,CACjC,KAAK,kBAAoB,KAAK,WAAW,CAC7C,CAEgB,yBACZC,EACAC,EACAC,EACI,CACJ,MAAM,yBAAyBF,EAAMC,EAAKC,CAAK,EAC/C,KAAK,kBAAoB,KAAK,WAAW,CAC7C,CAaQ,2BAAkC,CACtC,KAAK,cACD,IAAI,MAAM,QAAS,CACf,WAAY,GACZ,QAAS,GACT,SAAU,EACd,CAAC,CACL,CACJ,CAEmB,QAAyB,CACxC,OAAI,KAAK,KACEV;AAAA;AAAA,cAGA,KAAK,IACLA;AAAA;AAAA,2BAEQ,KAAK,GAAG;AAAA,0BACTG,EAAU,KAAK,KAAK,CAAC;AAAA,6BAClB,KAAK,yBAAyB;AAAA;AAAA,cAI5C,MAAM,OAAO,CACxB,CAEA,MAAc,YAA4B,CAItC,GAHI,KAAK,mBACL,MAAM,KAAK,kBAEX,CAAC,KAAK,KACN,OAAO,QAAQ,QAAQ,EAG3B,MAAMI,EAAO,KAAK,UAAU,KAAK,IAAI,EAE/BI,EAAUP,EAAgB,YAAY,EAAE,WAAWG,EAAK,OAAO,EAKrE,MAJI,CAACI,GAID,CAAC,KAAK,cACC,QAAQ,QAAQ,GAE3B,KAAK,cAAc,UAAY,GACxBA,EAAQ,mBACX,KAAK,cACLJ,EAAK,KACL,KAAK,MAAQ,GACb,KAAK,MAAQ,KAAK,MAAQ,EAC9B,EACJ,CAEQ,UAAUA,EAAiD,CAC/D,MAAMK,EAAYL,EAAK,MAAM,GAAG,EAChC,IAAIM,EAAc,UACdC,EAAWP,EACf,OAAIK,EAAU,OAAS,IACnBC,EAAcD,EAAU,CAAC,EACzBE,EAAWF,EAAU,CAAC,GAEnB,CAAE,QAASC,EAAa,KAAMC,CAAS,CAClD,CAEA,MAAyB,mBAAsC,CAC3D,MAAMC,EAAY,MAAM,MAAM,kBAAkB,EAChD,aAAM,KAAK,kBACJA,CACX,CACJ,CAlHWC,EAAA,CADNf,EAAS,GADD,KAEF,mBAGAe,EAAA,CADNf,EAAS,GAJD,KAKF,oBAGCe,EAAA,CADPd,EAAM,YAAY,GAPV,KAQD",
+  "names": ["html", "property", "query", "ifDefined", "IconsetRegistry", "IconBase", "event", "icon", "name", "old", "value", "iconset", "iconParts", "iconsetName", "iconName", "complete", "__decorateClass"]
+}

package/src/IconBase.d.ts

@@ -0,0 +1,13 @@
+import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
+export declare class IconBase extends SpectrumElement {
+    static get styles(): CSSResultArray;
+    private unsubscribeSystemContext;
+    spectrumVersion: number;
+    label: string;
+    size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private systemResolver;
+    protected update(changes: PropertyValues): void;
+    protected render(): TemplateResult;
+}

package/src/IconBase.dev.js

@@ -0,0 +1,74 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+import {
+  html,
+  SpectrumElement
+} from "@spectrum-web-components/base";
+import {
+  SystemResolutionController,
+  systemResolverUpdatedSymbol
+} from "@spectrum-web-components/reactive-controllers/src/SystemContextResolution.js";
+import {
+  property,
+  state
+} from "@spectrum-web-components/base/src/decorators.js";
+import iconStyles from "./icon.css.js";
+export class IconBase extends SpectrumElement {
+  constructor() {
+    super(...arguments);
+    this.unsubscribeSystemContext = null;
+    this.spectrumVersion = 1;
+    this.label = "";
+    this.systemResolver = new SystemResolutionController(this);
+  }
+  static get styles() {
+    return [iconStyles];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.unsubscribeSystemContext) {
+      this.unsubscribeSystemContext();
+      this.unsubscribeSystemContext = null;
+    }
+  }
+  update(changes) {
+    if (changes.has("label")) {
+      if (this.label) {
+        this.removeAttribute("aria-hidden");
+      } else {
+        this.setAttribute("aria-hidden", "true");
+      }
+    }
+    if (changes.has(systemResolverUpdatedSymbol)) {
+      this.spectrumVersion = this.systemResolver.system === "spectrum-two" ? 2 : 1;
+    }
+    super.update(changes);
+  }
+  render() {
+    return html`
+            <slot></slot>
+        `;
+  }
+}
+__decorateClass([
+  state()
+], IconBase.prototype, "spectrumVersion", 2);
+__decorateClass([
+  property({ reflect: true })
+], IconBase.prototype, "label", 2);
+__decorateClass([
+  property({ reflect: true })
+], IconBase.prototype, "size", 2);
+//# sourceMappingURL=IconBase.dev.js.map

package/src/IconBase.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["IconBase.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    PropertyValues,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    SystemResolutionController,\n    systemResolverUpdatedSymbol,\n} from '@spectrum-web-components/reactive-controllers/src/SystemContextResolution.js';\n\nimport {\n    property,\n    state,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport iconStyles from './icon.css.js';\n\nexport class IconBase extends SpectrumElement {\n    public static override get styles(): CSSResultArray {\n        return [iconStyles];\n    }\n\n    private unsubscribeSystemContext: (() => void) | null = null;\n\n    @state()\n    public spectrumVersion = 1;\n\n    @property({ reflect: true })\n    public label = '';\n\n    @property({ reflect: true })\n    public size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';\n\n    public override connectedCallback(): void {\n        super.connectedCallback();\n    }\n\n    public override disconnectedCallback(): void {\n        super.disconnectedCallback();\n        if (this.unsubscribeSystemContext) {\n            this.unsubscribeSystemContext();\n            this.unsubscribeSystemContext = null;\n        }\n    }\n\n    private systemResolver = new SystemResolutionController(this);\n\n    protected override update(changes: PropertyValues): void {\n        if (changes.has('label')) {\n            if (this.label) {\n                this.removeAttribute('aria-hidden');\n            } else {\n                this.setAttribute('aria-hidden', 'true');\n            }\n        }\n\n        if (changes.has(systemResolverUpdatedSymbol)) {\n            this.spectrumVersion =\n                this.systemResolver.system === 'spectrum-two' ? 2 : 1;\n        }\n\n        super.update(changes);\n    }\n\n    protected override render(): TemplateResult {\n        return html`\n            <slot></slot>\n        `;\n    }\n}\n"],
+  "mappings": ";;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EAEA;AAAA,OAEG;AACP;AAAA,EACI;AAAA,EACA;AAAA,OACG;AAEP;AAAA,EACI;AAAA,EACA;AAAA,OACG;AAEP,OAAO,gBAAgB;AAEhB,aAAM,iBAAiB,gBAAgB;AAAA,EAAvC;AAAA;AAKH,SAAQ,2BAAgD;AAGxD,SAAO,kBAAkB;AAGzB,SAAO,QAAQ;AAiBf,SAAQ,iBAAiB,IAAI,2BAA2B,IAAI;AAAA;AAAA,EA3B5D,WAA2B,SAAyB;AAChD,WAAO,CAAC,UAAU;AAAA,EACtB;AAAA,EAagB,oBAA0B;AACtC,UAAM,kBAAkB;AAAA,EAC5B;AAAA,EAEgB,uBAA6B;AACzC,UAAM,qBAAqB;AAC3B,QAAI,KAAK,0BAA0B;AAC/B,WAAK,yBAAyB;AAC9B,WAAK,2BAA2B;AAAA,IACpC;AAAA,EACJ;AAAA,EAImB,OAAO,SAA+B;AACrD,QAAI,QAAQ,IAAI,OAAO,GAAG;AACtB,UAAI,KAAK,OAAO;AACZ,aAAK,gBAAgB,aAAa;AAAA,MACtC,OAAO;AACH,aAAK,aAAa,eAAe,MAAM;AAAA,MAC3C;AAAA,IACJ;AAEA,QAAI,QAAQ,IAAI,2BAA2B,GAAG;AAC1C,WAAK,kBACD,KAAK,eAAe,WAAW,iBAAiB,IAAI;AAAA,IAC5D;AAEA,UAAM,OAAO,OAAO;AAAA,EACxB;AAAA,EAEmB,SAAyB;AACxC,WAAO;AAAA;AAAA;AAAA,EAGX;AACJ;AA5CW;AAAA,EADN,MAAM;AAAA,GAPE,SAQF;AAGA;AAAA,EADN,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAVlB,SAWF;AAGA;AAAA,EADN,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAblB,SAcF;",
+  "names": []
+}

package/src/IconBase.js

@@ -0,0 +1,4 @@
+"use strict";var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var l=(i,r,e,s)=>{for(var t=s>1?void 0:s?m(r,e):r,o=i.length-1,u;o>=0;o--)(u=i[o])&&(t=(s?u(r,e,t):u(t))||t);return s&&t&&c(r,e,t),t};import{html as n,SpectrumElement as a}from"@spectrum-web-components/base";import{SystemResolutionController as d,systemResolverUpdatedSymbol as b}from"@spectrum-web-components/reactive-controllers/src/SystemContextResolution.js";import{property as p,state as y}from"@spectrum-web-components/base/src/decorators.js";import v from"./icon.css.js";export class IconBase extends a{constructor(){super(...arguments);this.unsubscribeSystemContext=null;this.spectrumVersion=1;this.label="";this.systemResolver=new d(this)}static get styles(){return[v]}connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback(),this.unsubscribeSystemContext&&(this.unsubscribeSystemContext(),this.unsubscribeSystemContext=null)}update(e){e.has("label")&&(this.label?this.removeAttribute("aria-hidden"):this.setAttribute("aria-hidden","true")),e.has(b)&&(this.spectrumVersion=this.systemResolver.system==="spectrum-two"?2:1),super.update(e)}render(){return n`
+            <slot></slot>
+        `}}l([y()],IconBase.prototype,"spectrumVersion",2),l([p({reflect:!0})],IconBase.prototype,"label",2),l([p({reflect:!0})],IconBase.prototype,"size",2);
+//# sourceMappingURL=IconBase.js.map

package/src/IconBase.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["IconBase.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    PropertyValues,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    SystemResolutionController,\n    systemResolverUpdatedSymbol,\n} from '@spectrum-web-components/reactive-controllers/src/SystemContextResolution.js';\n\nimport {\n    property,\n    state,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport iconStyles from './icon.css.js';\n\nexport class IconBase extends SpectrumElement {\n    public static override get styles(): CSSResultArray {\n        return [iconStyles];\n    }\n\n    private unsubscribeSystemContext: (() => void) | null = null;\n\n    @state()\n    public spectrumVersion = 1;\n\n    @property({ reflect: true })\n    public label = '';\n\n    @property({ reflect: true })\n    public size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';\n\n    public override connectedCallback(): void {\n        super.connectedCallback();\n    }\n\n    public override disconnectedCallback(): void {\n        super.disconnectedCallback();\n        if (this.unsubscribeSystemContext) {\n            this.unsubscribeSystemContext();\n            this.unsubscribeSystemContext = null;\n        }\n    }\n\n    private systemResolver = new SystemResolutionController(this);\n\n    protected override update(changes: PropertyValues): void {\n        if (changes.has('label')) {\n            if (this.label) {\n                this.removeAttribute('aria-hidden');\n            } else {\n                this.setAttribute('aria-hidden', 'true');\n            }\n        }\n\n        if (changes.has(systemResolverUpdatedSymbol)) {\n            this.spectrumVersion =\n                this.systemResolver.system === 'spectrum-two' ? 2 : 1;\n        }\n\n        super.update(changes);\n    }\n\n    protected override render(): TemplateResult {\n        return html`\n            <slot></slot>\n        `;\n    }\n}\n"],
+  "mappings": "qNAYA,OAEI,QAAAA,EAEA,mBAAAC,MAEG,gCACP,OACI,8BAAAC,EACA,+BAAAC,MACG,+EAEP,OACI,YAAAC,EACA,SAAAC,MACG,kDAEP,OAAOC,MAAgB,gBAEhB,aAAM,iBAAiBL,CAAgB,CAAvC,kCAKH,KAAQ,yBAAgD,KAGxD,KAAO,gBAAkB,EAGzB,KAAO,MAAQ,GAiBf,KAAQ,eAAiB,IAAIC,EAA2B,IAAI,EA3B5D,WAA2B,QAAyB,CAChD,MAAO,CAACI,CAAU,CACtB,CAagB,mBAA0B,CACtC,MAAM,kBAAkB,CAC5B,CAEgB,sBAA6B,CACzC,MAAM,qBAAqB,EACvB,KAAK,2BACL,KAAK,yBAAyB,EAC9B,KAAK,yBAA2B,KAExC,CAImB,OAAOC,EAA+B,CACjDA,EAAQ,IAAI,OAAO,IACf,KAAK,MACL,KAAK,gBAAgB,aAAa,EAElC,KAAK,aAAa,cAAe,MAAM,GAI3CA,EAAQ,IAAIJ,CAA2B,IACvC,KAAK,gBACD,KAAK,eAAe,SAAW,eAAiB,EAAI,GAG5D,MAAM,OAAOI,CAAO,CACxB,CAEmB,QAAyB,CACxC,OAAOP;AAAA;AAAA,SAGX,CACJ,CA5CWQ,EAAA,CADNH,EAAM,GAPE,SAQF,+BAGAG,EAAA,CADNJ,EAAS,CAAE,QAAS,EAAK,CAAC,GAVlB,SAWF,qBAGAI,EAAA,CADNJ,EAAS,CAAE,QAAS,EAAK,CAAC,GAblB,SAcF",
+  "names": ["html", "SpectrumElement", "SystemResolutionController", "systemResolverUpdatedSymbol", "property", "state", "iconStyles", "changes", "__decorateClass"]
+}

package/src/icon-arrow-overrides.css.d.ts

@@ -0,0 +1,2 @@
+declare const styles: import("@spectrum-web-components/base").CSSResult;
+export default styles;

package/src/icon-arrow-overrides.css.dev.js

@@ -0,0 +1,7 @@
+"use strict";
+import { css } from "@spectrum-web-components/base";
+const styles = css`
+    .spectrum-UIIcon-ArrowRight75{--spectrum-icon-size:var(--system-ui-icon-arrow-right-75-icon-size)}.spectrum-UIIcon-ArrowRight100{--spectrum-icon-size:var(--system-ui-icon-arrow-right-100-icon-size)}.spectrum-UIIcon-ArrowRight200{--spectrum-icon-size:var(--system-ui-icon-arrow-right-200-icon-size)}.spectrum-UIIcon-ArrowRight300{--spectrum-icon-size:var(--system-ui-icon-arrow-right-300-icon-size)}.spectrum-UIIcon-ArrowRight400{--spectrum-icon-size:var(--system-ui-icon-arrow-right-400-icon-size)}.spectrum-UIIcon-ArrowRight500{--spectrum-icon-size:var(--system-ui-icon-arrow-right-500-icon-size)}.spectrum-UIIcon-ArrowRight600{--spectrum-icon-size:var(--system-ui-icon-arrow-right-600-icon-size)}.spectrum-UIIcon-ArrowDown75{--spectrum-icon-size:var(--system-ui-icon-arrow-down-75-icon-size)}.spectrum-UIIcon-ArrowDown100{--spectrum-icon-size:var(--system-ui-icon-arrow-down-100-icon-size)}.spectrum-UIIcon-ArrowDown200{--spectrum-icon-size:var(--system-ui-icon-arrow-down-200-icon-size)}.spectrum-UIIcon-ArrowDown300{--spectrum-icon-size:var(--system-ui-icon-arrow-down-300-icon-size)}.spectrum-UIIcon-ArrowDown400{--spectrum-icon-size:var(--system-ui-icon-arrow-down-400-icon-size)}.spectrum-UIIcon-ArrowDown500{--spectrum-icon-size:var(--system-ui-icon-arrow-down-500-icon-size)}.spectrum-UIIcon-ArrowDown600{--spectrum-icon-size:var(--system-ui-icon-arrow-down-600-icon-size)}.spectrum-UIIcon-ArrowLeft75{--spectrum-icon-size:var(--system-ui-icon-arrow-left-75-icon-size)}.spectrum-UIIcon-ArrowLeft100{--spectrum-icon-size:var(--system-ui-icon-arrow-left-100-icon-size)}.spectrum-UIIcon-ArrowLeft200{--spectrum-icon-size:var(--system-ui-icon-arrow-left-200-icon-size)}.spectrum-UIIcon-ArrowLeft300{--spectrum-icon-size:var(--system-ui-icon-arrow-left-300-icon-size)}.spectrum-UIIcon-ArrowLeft400{--spectrum-icon-size:var(--system-ui-icon-arrow-left-400-icon-size)}.spectrum-UIIcon-ArrowLeft500{--spectrum-icon-size:var(--system-ui-icon-arrow-left-500-icon-size)}.spectrum-UIIcon-ArrowLeft600{--spectrum-icon-size:var(--system-ui-icon-arrow-left-600-icon-size)}.spectrum-UIIcon-ArrowUp75{--spectrum-icon-size:var(--system-ui-icon-arrow-up-75-icon-size)}.spectrum-UIIcon-ArrowUp100{--spectrum-icon-size:var(--system-ui-icon-arrow-up-100-icon-size)}.spectrum-UIIcon-ArrowUp200{--spectrum-icon-size:var(--system-ui-icon-arrow-up-200-icon-size)}.spectrum-UIIcon-ArrowUp300{--spectrum-icon-size:var(--system-ui-icon-arrow-up-300-icon-size)}.spectrum-UIIcon-ArrowUp400{--spectrum-icon-size:var(--system-ui-icon-arrow-up-400-icon-size)}.spectrum-UIIcon-ArrowUp500{--spectrum-icon-size:var(--system-ui-icon-arrow-up-500-icon-size)}.spectrum-UIIcon-ArrowUp600{--spectrum-icon-size:var(--system-ui-icon-arrow-up-600-icon-size)}
+`;
+export default styles;
+//# sourceMappingURL=icon-arrow-overrides.css.dev.js.map