@spectrum-web-components/coachmark 0.40.5 → 0.41.1

package/src/Coachmark.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["Coachmark.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    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\n\nimport styles from './coachmark.css.js';\n\n/**\n * @element sp-coachmark\n */\nexport class Coachmark extends SpectrumElement {\n    public static override get styles(): CSSResultArray {\n        return [styles];\n    }\n\n    @property({ type: Boolean, reflect: true })\n    public quiet = false;\n\n    @property({ reflect: true })\n    public variant: 'dark' | 'light' | '' = '';\n\n    protected override render(): TemplateResult {\n        return html`\n            <div class=\"ring\"></div>\n            <div class=\"ring\"></div>\n            <div class=\"ring\"></div>\n        `;\n    }\n}\n"],
-  "mappings": "qNAYA,OAEI,QAAAA,EACA,mBAAAC,MAEG,gCACP,OAAS,YAAAC,MAAgB,kDAEzB,OAAOC,MAAY,qBAKZ,aAAM,kBAAkBF,CAAgB,CAAxC,kCAMH,KAAO,MAAQ,GAGf,KAAO,QAAiC,GARxC,WAA2B,QAAyB,CAChD,MAAO,CAACE,CAAM,CAClB,CAQmB,QAAyB,CACxC,OAAOH;AAAA;AAAA;AAAA;AAAA,SAKX,CACJ,CAZWI,EAAA,CADNF,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GALjC,UAMF,qBAGAE,EAAA,CADNF,EAAS,CAAE,QAAS,EAAK,CAAC,GARlB,UASF",
-  "names": ["html", "SpectrumElement", "property", "styles", "__decorateClass"]
+  "sourcesContent": ["/*\nCopyright 2023 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\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    nothing,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { when } from '@spectrum-web-components/base/src/directives.js';\nimport { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';\nimport coachmarkStyles from './coachmark.css.js';\nimport chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-chevron200.js';\nimport { Popover } from '@spectrum-web-components/popover';\nimport { join } from 'lit/directives/join.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport type { Placement } from '@spectrum-web-components/overlay';\nimport { MediaType } from './CoachmarkItem.js';\nimport type { CoachmarkItem } from './CoachmarkItem.js';\nimport '@spectrum-web-components/asset/sp-asset.js';\nimport '@spectrum-web-components/button/sp-button.js';\nimport '@spectrum-web-components/button-group/sp-button-group.js';\nimport '@spectrum-web-components/quick-actions/sp-quick-actions.js';\n\n/**\n * @element sp-coachmark\n * @fires primary - Announces that the \"primary\" button has been clicked.\n * @fires secondary - Announces that the \"secondary\" button has been clicked.\n * @slot cover-photo - This is the cover photo for Default and Quiet Coachmark\n * @slot heading - HTML content to be listed as the heading\n * @slot description - A description of the card\n * @slot actions - an `sp-action-menu` element outlining actions to take on the represened object\n */\nexport class Coachmark extends LikeAnchor(Popover) {\n    public static override get styles(): CSSResultArray {\n        return [...super.styles, coachmarkStyles, chevronStyles];\n    }\n    @property({ type: Object })\n    public item?: CoachmarkItem;\n\n    @property({ type: String })\n    public override placement: Placement = 'right';\n\n    @property({ type: Object, attribute: false })\n    private content?: {\n        title?: string;\n        description?: string;\n        imageAlt?: string;\n    };\n\n    @property({ attribute: 'shortcut-key' })\n    private shortcutKey?: string;\n\n    @property({ type: Array })\n    public modifierKeys?: string[] = [];\n\n    @property({ attribute: 'src' })\n    private source?: string;\n\n    @property({ attribute: 'media-type' })\n    private mediaType?: MediaType;\n\n    @property({ type: Boolean, attribute: 'has-asset', reflect: true })\n    public hasAsset = false;\n\n    @property()\n    public asset?: 'file' | 'folder';\n\n    @property({ type: Number, attribute: 'current-step' })\n    public currentStep?: number;\n\n    @property({ type: Number, attribute: 'total-steps' })\n    public totalSteps?: number;\n\n    @property({ type: String, attribute: 'primary-cta' })\n    primaryCTA?: string;\n\n    @property({ type: String, attribute: 'secondary-cta' })\n    secondaryCTA?: string;\n\n    // render video and images\n    private renderMedia(): TemplateResult {\n        const isImage = this.mediaType === MediaType.IMAGE;\n        if (!isImage) {\n            return html`\n                <slot name=\"asset\"></slot>\n            `;\n        }\n        return html`\n            <sp-asset id=\"cover-photo\">\n                <div class=\"image-wrapper\">\n                    <img\n                        class=\"image\"\n                        loading=\"lazy\"\n                        slot=\"cover-photo\"\n                        src=\"${ifDefined(this.source)}\"\n                        alt=\"${ifDefined(this?.content?.imageAlt)}\"\n                    />\n                </div>\n            </sp-asset>\n        `;\n    }\n    // method to render modifier\n    private renderModifier(\n        modifierKey: string,\n        type: 'modifier' | 'shortcut' = 'modifier'\n    ): TemplateResult {\n        return html`\n            <span type=\"${type}\" class=\"keyboard-shortcut\">${modifierKey}</span>\n        `;\n    }\n\n    private renderJoiner(): TemplateResult {\n        return html`\n            <span class=\"plus\">&plus;</span>\n        `;\n    }\n    // render heading title and modifier\n    private renderHeader(): TemplateResult {\n        const hasModifier = this.modifierKeys && this.modifierKeys?.length > 0;\n        const hasShortcut = Boolean(this.shortcutKey);\n        const hasTitle = Boolean(this.content?.title);\n        if (!hasTitle && !hasModifier && !hasShortcut) {\n            return html`\n                <div class=\"title\"><slot name=\"title\"></slot></div>\n            `;\n        }\n        return html`\n            ${hasTitle\n                ? html`\n                      <div class=\"title\">${this.content?.title}</div>\n                  `\n                : nothing}\n            ${hasModifier || hasShortcut\n                ? html`\n                      <kbd class=\"keys spectrum-Body spectrum-Body--sizeS\">\n                          ${hasModifier\n                              ? join(\n                                    this.modifierKeys?.map((k) =>\n                                        this.renderModifier(k)\n                                    ),\n                                    this.renderJoiner()\n                                )\n                              : nothing}\n                          ${hasShortcut && hasModifier\n                              ? this.renderJoiner()\n                              : nothing}\n                          ${hasShortcut\n                              ? this.renderModifier(\n                                    this.shortcutKey!,\n                                    'shortcut'\n                                )\n                              : nothing}\n                      </kbd>\n                  `\n                : nothing}\n        `;\n    }\n    // render description\n    private renderContent(): TemplateResult {\n        const hasDescription = Boolean(this.content?.description);\n        if (!hasDescription)\n            return html`\n                <slot name=\"content\"></slot>\n            `;\n        return html`\n            <div>${this.content?.description}</div>\n        `;\n    }\n\n    private stopPropagationOnHref(event: Event): void {\n        if (this.href) {\n            event.stopPropagation();\n        }\n    }\n\n    // event on primary button\n    private handlePrimaryCTA(): void {\n        this.dispatchEvent(\n            new Event('primary', {\n                bubbles: true,\n                composed: true,\n            })\n        );\n    }\n    // event on secondary button\n    private handleSecondaryCTA(): void {\n        this.dispatchEvent(\n            new Event('secondary', {\n                bubbles: true,\n                composed: true,\n            })\n        );\n    }\n\n    private renderSecondaryButton = (): TemplateResult => {\n        return html`\n            <sp-button\n                treatment=\"outline\"\n                variant=\"secondary\"\n                @click=${this.handleSecondaryCTA}\n            >\n                ${this.secondaryCTA}\n            </sp-button>\n        `;\n    };\n\n    private renderPrimaryButton = (): TemplateResult => {\n        return html`\n            <sp-button\n                size=\"s\"\n                treatment=\"outline\"\n                variant=\"primary\"\n                @click=${this.handlePrimaryCTA}\n            >\n                ${this.primaryCTA}\n            </sp-button>\n        `;\n    };\n\n    private renderSecondaryButtonMobile = (): TemplateResult => {\n        return html`\n            <sp-button\n                variant=\"secondary\"\n                treatment=\"outline\"\n                icon-only\n                aria-label=\"previous\"\n                @click=${this.handleSecondaryCTA}\n            >\n                <sp-icon-chevron200\n                    size=\"s\"\n                    class=\"spectrum-UIIcon-ChevronLeft75\"\n                    slot=\"icon\"\n                ></sp-icon-chevron200>\n            </sp-button>\n        `;\n    };\n\n    private renderPrimaryButtonMobile = (): TemplateResult => {\n        return html`\n            <sp-button\n                size=\"s\"\n                treatment=\"outline\"\n                variant=\"primary\"\n                @click=${this.handlePrimaryCTA}\n            >\n                ${this.primaryCTA}\n            </sp-button>\n        `;\n    };\n\n    protected renderButtons(): TemplateResult {\n        return html`\n            <sp-button-group class=\"spectrum-ButtonGroup buttongroup\">\n                ${when(this.secondaryCTA, this.renderSecondaryButton)}\n                ${when(this.primaryCTA, this.renderPrimaryButton)}\n            </sp-button-group>\n            <sp-button-group\n                class=\"spectrum-ButtonGroup buttongroup-mobile\"\n                size=\"s\"\n            >\n                ${when(this.secondaryCTA, this.renderSecondaryButtonMobile)}\n                ${when(this.primaryCTA, this.renderPrimaryButtonMobile)}\n            </sp-button-group>\n        `;\n    }\n\n    // render steps\n    protected renderSteps = (): TemplateResult => {\n        return html`\n            <div class=\"step\" role=\"status\">\n                <span aria-live=\"polite\">\n                    ${this.currentStep} of ${this.totalSteps}\n                </span>\n            </div>\n        `;\n    };\n    // render action menu\n    protected renderActionMenu = (): TemplateResult => {\n        return html`\n            <div class=\"action-menu\" @pointerdown=${this.stopPropagationOnHref}>\n                <slot name=\"actions\"></slot>\n            </div>\n        `;\n    };\n\n    protected override render(): TemplateResult {\n        return html`\n            ${this.renderMedia()}\n            <div class=\"header\">\n                <div class=\"flex-container\">${this.renderHeader()}</div>\n                <div class=\"static-item\">\n                    ${when(\n                        this.secondaryCTA && this.primaryCTA,\n                        this.renderActionMenu\n                    )}\n                </div>\n            </div>\n\n            <div class=\"content\">${this.renderContent()}</div>\n            <div class=\"footer\">\n                ${when(\n                    this.totalSteps && this.totalSteps > 1,\n                    this.renderSteps\n                )}\n                ${this.renderButtons()}\n            </div>\n        `;\n    }\n}\n"],
+  "mappings": "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",
+  "names": ["html", "nothing", "property", "when", "LikeAnchor", "coachmarkStyles", "chevronStyles", "Popover", "join", "ifDefined", "MediaType", "_a", "modifierKey", "type", "_b", "_c", "_d", "hasModifier", "hasShortcut", "hasTitle", "k", "event", "__decorateClass"]
 }

package/src/CoachmarkItem.d.ts

@@ -0,0 +1,18 @@
+export declare type CoachmarkItem = {
+    id?: string;
+    heading: string;
+    shortcutKey?: string;
+    modifierKeys?: string[];
+    content: string;
+    src?: string;
+    imageAlt?: string;
+    mediaType?: string;
+    currentStep?: number;
+    totalSteps?: number;
+    primaryCTA?: string;
+    secondaryCTA?: string;
+};
+export declare enum MediaType {
+    IMAGE = "image",
+    VIDEO = "video"
+}

package/src/CoachmarkItem.dev.js

@@ -0,0 +1,7 @@
+"use strict";
+export var MediaType = /* @__PURE__ */ ((MediaType2) => {
+  MediaType2["IMAGE"] = "image";
+  MediaType2["VIDEO"] = "video";
+  return MediaType2;
+})(MediaType || {});
+//# sourceMappingURL=CoachmarkItem.dev.js.map

package/src/CoachmarkItem.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["CoachmarkItem.ts"],
+  "sourcesContent": ["/*\nCopyright 2021 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\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\nexport type CoachmarkItem = {\n    id?: string;\n    heading: string;\n    shortcutKey?: string;\n    modifierKeys?: string[];\n    content: string;\n    src?: string;\n    imageAlt?: string;\n    mediaType?: string;\n    currentStep?: number;\n    totalSteps?: number;\n    primaryCTA?: string;\n    secondaryCTA?: string;\n};\n\nexport enum MediaType {\n    IMAGE = 'image',\n    VIDEO = 'video',\n}\n"],
+  "mappings": ";AA0BO,WAAK,YAAL,kBAAKA,eAAL;AACH,EAAAA,WAAA,WAAQ;AACR,EAAAA,WAAA,WAAQ;AAFA,SAAAA;AAAA,GAAA;",
+  "names": ["MediaType"]
+}

package/src/CoachmarkItem.js

@@ -0,0 +1,2 @@
+"use strict";export var MediaType=(t=>(t.IMAGE="image",t.VIDEO="video",t))(MediaType||{});
+//# sourceMappingURL=CoachmarkItem.js.map

package/src/CoachmarkItem.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["CoachmarkItem.ts"],
+  "sourcesContent": ["/*\nCopyright 2021 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\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\nexport type CoachmarkItem = {\n    id?: string;\n    heading: string;\n    shortcutKey?: string;\n    modifierKeys?: string[];\n    content: string;\n    src?: string;\n    imageAlt?: string;\n    mediaType?: string;\n    currentStep?: number;\n    totalSteps?: number;\n    primaryCTA?: string;\n    secondaryCTA?: string;\n};\n\nexport enum MediaType {\n    IMAGE = 'image',\n    VIDEO = 'video',\n}\n"],
+  "mappings": "aA0BO,WAAK,WAAAA,IACRA,EAAA,MAAQ,QACRA,EAAA,MAAQ,QAFAA,IAAA",
+  "names": ["MediaType"]
+}

package/src/coach-indicator.css.d.ts

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

package/src/coach-indicator.css.dev.js

@@ -0,0 +1,91 @@
+"use strict";
+import { css } from "@spectrum-web-components/base";
+const styles = css`
+:host{--spectrum-coach-indicator-animation-keyframe-0-scale:1;--spectrum-coach-indicator-animation-keyframe-0-opacity:0;--spectrum-coach-indicator-animation-keyframe-50-scale:1.5;--spectrum-coach-indicator-animation-keyframe-50-opacity:1;--spectrum-coach-indicator-animation-keyframe-100-scale:2;--spectrum-coach-indicator-animation-keyframe-100-opacity:0;--spectrum-coach-indicator-quiet-animation-keyframe-0-scale:0.8}@keyframes pulse{0%{opacity:var(--spectrum-coach-indicator-animation-keyframe-0-opacity);-webkit-transform:scale(var(--spectrum-coach-indicator-animation-keyframe-0-scale))}50%{opacity:var(--spectrum-coach-indicator-animation-keyframe-50-opacity);-webkit-transform:scale(var(--spectrum-coach-indicator-animation-keyframe-50-scale))}to{opacity:var(--spectrum-coach-indicator-animation-keyframe-100-opacity);-webkit-transform:scale(var(--spectrum-coach-indicator-animation-keyframe-100-scale))}}@keyframes pulse--quiet{0%{opacity:var(--spectrum-coach-indicator-animation-keyframe-0-opacity);-webkit-transform:scale(var(--spectrum-coach-indicator-quiet-animation-keyframe-0-scale))}50%{opacity:var(--spectrum-coach-indicator-animation-keyframe-50-opacity);-webkit-transform:scale(var(--spectrum-coach-indicator-animation-keyframe-50-scale))}to{opacity:var(--spectrum-coach-indicator-animation-keyframe-100-opacity);-webkit-transform:scale(var(--spectrum-coach-indicator-animation-keyframe-100-scale))}}:host{--spectrum-coach-indicator-ring-border-size:var(
+--spectrum-border-width-200
+);--spectrum-coach-indicator-min-inline-size:calc(var(--spectrum-coach-indicator-ring-diameter)*3);--spectrum-coach-indicator-min-block-size:calc(var(--spectrum-coach-indicator-ring-diameter)*3);--spectrum-coach-indicator-inline-size:var(
+--spectrum-coach-indicator-min-inline-size
+);--spectrum-coach-indicator-block-size:var(
+--spectrum-coach-indicator-min-block-size
+);--spectrum-coach-indicator-ring-inline-size:var(
+--spectrum-coach-indicator-ring-diameter
+);--spectrum-coach-indicator-ring-block-size:var(
+--spectrum-coach-indicator-ring-diameter
+);--spectrum-coach-indicator-top:calc(var(--spectrum-coach-indicator-block-size)/3 - var(--spectrum-coach-indicator-ring-border-size));--spectrum-coach-indicator-left:calc(var(--spectrum-coach-indicator-inline-size)/3 - var(--spectrum-coach-indicator-ring-border-size));--spectrum-coach-animation-indicator-ring-duration:var(
+--spectrum-animation-duration-6000
+);--spectrum-coach-animation-indicator-ring-inner-delay-multiple:-0.5;--spectrum-coach-animation-indicator-ring-center-delay-multiple:-0.66;--spectrum-coach-animation-indicator-ring-outer-delay-multiple:-1;--spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple:-0.33;--spectrum-coach-indicator-animation-name:pulse;--spectrum-coach-indicator-inner-animation-delay-multiple:var(
+--spectrum-coach-animation-indicator-ring-inner-delay-multiple
+)}:host([quiet]){--mod-coach-indicator-min-inline-size:calc(var(
+--mod-coach-indicator-quiet-ring-diameter,
+var(--spectrum-coach-indicator-quiet-ring-diameter)
+)*2.75);--mod-coach-indicator-min-block-size:calc(var(
+--mod-coach-indicator-quiet-ring-diameter,
+var(--spectrum-coach-indicator-quiet-ring-diameter)
+)*2.75);--mod-coach-indicator-inline-size:calc(var(
+--mod-coach-indicator-quiet-ring-diameter,
+var(--spectrum-coach-indicator-quiet-ring-diameter)
+)*2.75);--mod-coach-indicator-block-size:calc(var(
+--mod-coach-indicator-quiet-ring-diameter,
+var(--spectrum-coach-indicator-quiet-ring-diameter)
+)*2.75);--mod-coach-indicator-ring-inline-size:var(
+--mod-coach-indicator-quiet-ring-diameter,var(--spectrum-coach-indicator-quiet-ring-diameter)
+);--mod-coach-indicator-ring-block-size:var(
+--mod-coach-indicator-quiet-ring-diameter,var(--spectrum-coach-indicator-quiet-ring-diameter)
+);--mod-coach-indicator-top:calc(var(--mod-coach-indicator-min-inline-size)/3 - var(--spectrum-coach-indicator-ring-border-size));--mod-coach-indicator-left:calc(var(--mod-coach-indicator-min-inline-size)/3 - var(--spectrum-coach-indicator-ring-border-size));--mod-coach-indicator-animation-name:pulse--quiet;--mod-coach-indicator-inner-animation-delay-multiple:var(
+--mod-coach-indicator-quiet-animation-ring-inner-delay-multiple,var(
+--spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple
+)
+)}:host{block-size:var(
+--mod-coach-indicator-block-size,var(--spectrum-coach-indicator-block-size)
+);inline-size:var(
+--mod-coach-indicator-inline-size,var(--spectrum-coach-indicator-inline-size)
+);margin:var(--mod-coach-indicator-gap,var(--spectrum-coach-indicator-gap));min-block-size:var(
+--mod-coach-indicator-min-block-size,var(--spectrum-coach-indicator-min-block-size)
+);min-inline-size:var(
+--mod-coach-indicator-min-inline-size,var(--spectrum-coach-indicator-min-inline-size)
+);position:relative}.ring{animation:var(
+--mod-coach-indicator-animation-name,var(--spectrum-coach-indicator-animation-name)
+) var(
+--mod-coach-animation-indicator-ring-duration,var(--spectrum-coach-animation-indicator-ring-duration)
+) linear infinite;block-size:var(
+--mod-coach-indicator-ring-block-size,var(--spectrum-coach-indicator-ring-block-size)
+);border-color:var(
+--mod-coach-indicator-ring-default-color,var(--spectrum-coach-indicator-ring-default-color)
+);border-radius:50%;border-style:solid;border-width:var(
+--mod-coach-indicator-ring-border-size,var(--spectrum-coach-indicator-ring-border-size)
+);display:block;inline-size:var(
+--mod-coach-indicator-ring-inline-size,var(--spectrum-coach-indicator-ring-inline-size)
+);inset-block-start:var(
+--mod-coach-indicator-top,var(--spectrum-coach-indicator-top)
+);inset-inline-start:var(
+--mod-coach-indicator-left,var(--spectrum-coach-indicator-left)
+);position:absolute}.ring:first-child{animation-delay:calc(var(
+--mod-coach-animation-indicator-ring-duration,
+var(--spectrum-coach-animation-indicator-ring-duration)
+)*var(
+--mod-coach-indicator-inner-animation-delay-multiple,
+var(--spectrum-coach-indicator-inner-animation-delay-multiple)
+))}.ring:nth-child(2){animation-delay:calc(var(
+--mod-coach-animation-indicator-ring-duration,
+var(--spectrum-coach-animation-indicator-ring-duration)
+)*var(
+--mod-coach-animation-indicator-ring-center-delay-multiple,
+var(
+--spectrum-coach-animation-indicator-ring-center-delay-multiple
+)
+))}.ring:nth-child(3){animation-delay:calc(var(
+--mod-coach-animation-indicator-ring-duration,
+var(--spectrum-coach-animation-indicator-ring-duration)
+)*var(
+--mod-coach-animation-indicator-ring-outer-delay-multiple,
+var(
+--spectrum-coach-animation-indicator-ring-outer-delay-multiple
+)
+))}:host([static=white]) .ring{border-color:var(
+--mod-coach-indicator-ring-light-color,var(--spectrum-coach-indicator-ring-light-color)
+)}:host([static=black]) .ring{border-color:var(
+--mod-coach-indicator-ring-dark-color,var(--spectrum-coach-indicator-ring-dark-color)
+)}@media (prefers-reduced-motion:reduce){.ring{animation:none}}:host{display:inline-block}
+`;
+export default styles;
+//# sourceMappingURL=coach-indicator.css.dev.js.map

package/src/coach-indicator.css.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["coach-indicator.css.ts"],
+  "sourcesContent": ["/*\nCopyright 2024 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 { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-coach-indicator-animation-keyframe-0-scale:1;--spectrum-coach-indicator-animation-keyframe-0-opacity:0;--spectrum-coach-indicator-animation-keyframe-50-scale:1.5;--spectrum-coach-indicator-animation-keyframe-50-opacity:1;--spectrum-coach-indicator-animation-keyframe-100-scale:2;--spectrum-coach-indicator-animation-keyframe-100-opacity:0;--spectrum-coach-indicator-quiet-animation-keyframe-0-scale:0.8}@keyframes pulse{0%{opacity:var(--spectrum-coach-indicator-animation-keyframe-0-opacity);-webkit-transform:scale(var(--spectrum-coach-indicator-animation-keyframe-0-scale))}50%{opacity:var(--spectrum-coach-indicator-animation-keyframe-50-opacity);-webkit-transform:scale(var(--spectrum-coach-indicator-animation-keyframe-50-scale))}to{opacity:var(--spectrum-coach-indicator-animation-keyframe-100-opacity);-webkit-transform:scale(var(--spectrum-coach-indicator-animation-keyframe-100-scale))}}@keyframes pulse--quiet{0%{opacity:var(--spectrum-coach-indicator-animation-keyframe-0-opacity);-webkit-transform:scale(var(--spectrum-coach-indicator-quiet-animation-keyframe-0-scale))}50%{opacity:var(--spectrum-coach-indicator-animation-keyframe-50-opacity);-webkit-transform:scale(var(--spectrum-coach-indicator-animation-keyframe-50-scale))}to{opacity:var(--spectrum-coach-indicator-animation-keyframe-100-opacity);-webkit-transform:scale(var(--spectrum-coach-indicator-animation-keyframe-100-scale))}}:host{--spectrum-coach-indicator-ring-border-size:var(\n--spectrum-border-width-200\n);--spectrum-coach-indicator-min-inline-size:calc(var(--spectrum-coach-indicator-ring-diameter)*3);--spectrum-coach-indicator-min-block-size:calc(var(--spectrum-coach-indicator-ring-diameter)*3);--spectrum-coach-indicator-inline-size:var(\n--spectrum-coach-indicator-min-inline-size\n);--spectrum-coach-indicator-block-size:var(\n--spectrum-coach-indicator-min-block-size\n);--spectrum-coach-indicator-ring-inline-size:var(\n--spectrum-coach-indicator-ring-diameter\n);--spectrum-coach-indicator-ring-block-size:var(\n--spectrum-coach-indicator-ring-diameter\n);--spectrum-coach-indicator-top:calc(var(--spectrum-coach-indicator-block-size)/3 - var(--spectrum-coach-indicator-ring-border-size));--spectrum-coach-indicator-left:calc(var(--spectrum-coach-indicator-inline-size)/3 - var(--spectrum-coach-indicator-ring-border-size));--spectrum-coach-animation-indicator-ring-duration:var(\n--spectrum-animation-duration-6000\n);--spectrum-coach-animation-indicator-ring-inner-delay-multiple:-0.5;--spectrum-coach-animation-indicator-ring-center-delay-multiple:-0.66;--spectrum-coach-animation-indicator-ring-outer-delay-multiple:-1;--spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple:-0.33;--spectrum-coach-indicator-animation-name:pulse;--spectrum-coach-indicator-inner-animation-delay-multiple:var(\n--spectrum-coach-animation-indicator-ring-inner-delay-multiple\n)}:host([quiet]){--mod-coach-indicator-min-inline-size:calc(var(\n--mod-coach-indicator-quiet-ring-diameter,\nvar(--spectrum-coach-indicator-quiet-ring-diameter)\n)*2.75);--mod-coach-indicator-min-block-size:calc(var(\n--mod-coach-indicator-quiet-ring-diameter,\nvar(--spectrum-coach-indicator-quiet-ring-diameter)\n)*2.75);--mod-coach-indicator-inline-size:calc(var(\n--mod-coach-indicator-quiet-ring-diameter,\nvar(--spectrum-coach-indicator-quiet-ring-diameter)\n)*2.75);--mod-coach-indicator-block-size:calc(var(\n--mod-coach-indicator-quiet-ring-diameter,\nvar(--spectrum-coach-indicator-quiet-ring-diameter)\n)*2.75);--mod-coach-indicator-ring-inline-size:var(\n--mod-coach-indicator-quiet-ring-diameter,var(--spectrum-coach-indicator-quiet-ring-diameter)\n);--mod-coach-indicator-ring-block-size:var(\n--mod-coach-indicator-quiet-ring-diameter,var(--spectrum-coach-indicator-quiet-ring-diameter)\n);--mod-coach-indicator-top:calc(var(--mod-coach-indicator-min-inline-size)/3 - var(--spectrum-coach-indicator-ring-border-size));--mod-coach-indicator-left:calc(var(--mod-coach-indicator-min-inline-size)/3 - var(--spectrum-coach-indicator-ring-border-size));--mod-coach-indicator-animation-name:pulse--quiet;--mod-coach-indicator-inner-animation-delay-multiple:var(\n--mod-coach-indicator-quiet-animation-ring-inner-delay-multiple,var(\n--spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple\n)\n)}:host{block-size:var(\n--mod-coach-indicator-block-size,var(--spectrum-coach-indicator-block-size)\n);inline-size:var(\n--mod-coach-indicator-inline-size,var(--spectrum-coach-indicator-inline-size)\n);margin:var(--mod-coach-indicator-gap,var(--spectrum-coach-indicator-gap));min-block-size:var(\n--mod-coach-indicator-min-block-size,var(--spectrum-coach-indicator-min-block-size)\n);min-inline-size:var(\n--mod-coach-indicator-min-inline-size,var(--spectrum-coach-indicator-min-inline-size)\n);position:relative}.ring{animation:var(\n--mod-coach-indicator-animation-name,var(--spectrum-coach-indicator-animation-name)\n) var(\n--mod-coach-animation-indicator-ring-duration,var(--spectrum-coach-animation-indicator-ring-duration)\n) linear infinite;block-size:var(\n--mod-coach-indicator-ring-block-size,var(--spectrum-coach-indicator-ring-block-size)\n);border-color:var(\n--mod-coach-indicator-ring-default-color,var(--spectrum-coach-indicator-ring-default-color)\n);border-radius:50%;border-style:solid;border-width:var(\n--mod-coach-indicator-ring-border-size,var(--spectrum-coach-indicator-ring-border-size)\n);display:block;inline-size:var(\n--mod-coach-indicator-ring-inline-size,var(--spectrum-coach-indicator-ring-inline-size)\n);inset-block-start:var(\n--mod-coach-indicator-top,var(--spectrum-coach-indicator-top)\n);inset-inline-start:var(\n--mod-coach-indicator-left,var(--spectrum-coach-indicator-left)\n);position:absolute}.ring:first-child{animation-delay:calc(var(\n--mod-coach-animation-indicator-ring-duration,\nvar(--spectrum-coach-animation-indicator-ring-duration)\n)*var(\n--mod-coach-indicator-inner-animation-delay-multiple,\nvar(--spectrum-coach-indicator-inner-animation-delay-multiple)\n))}.ring:nth-child(2){animation-delay:calc(var(\n--mod-coach-animation-indicator-ring-duration,\nvar(--spectrum-coach-animation-indicator-ring-duration)\n)*var(\n--mod-coach-animation-indicator-ring-center-delay-multiple,\nvar(\n--spectrum-coach-animation-indicator-ring-center-delay-multiple\n)\n))}.ring:nth-child(3){animation-delay:calc(var(\n--mod-coach-animation-indicator-ring-duration,\nvar(--spectrum-coach-animation-indicator-ring-duration)\n)*var(\n--mod-coach-animation-indicator-ring-outer-delay-multiple,\nvar(\n--spectrum-coach-animation-indicator-ring-outer-delay-multiple\n)\n))}:host([static=white]) .ring{border-color:var(\n--mod-coach-indicator-ring-light-color,var(--spectrum-coach-indicator-ring-light-color)\n)}:host([static=black]) .ring{border-color:var(\n--mod-coach-indicator-ring-dark-color,var(--spectrum-coach-indicator-ring-dark-color)\n)}@media (prefers-reduced-motion:reduce){.ring{animation:none}}:host{display:inline-block}\n`;\nexport default styles;"],
+  "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuFf,eAAe;",
+  "names": []
+}

package/src/coach-indicator.css.js

@@ -0,0 +1,88 @@
+"use strict";import{css as i}from"@spectrum-web-components/base";const a=i`
+:host{--spectrum-coach-indicator-animation-keyframe-0-scale:1;--spectrum-coach-indicator-animation-keyframe-0-opacity:0;--spectrum-coach-indicator-animation-keyframe-50-scale:1.5;--spectrum-coach-indicator-animation-keyframe-50-opacity:1;--spectrum-coach-indicator-animation-keyframe-100-scale:2;--spectrum-coach-indicator-animation-keyframe-100-opacity:0;--spectrum-coach-indicator-quiet-animation-keyframe-0-scale:0.8}@keyframes pulse{0%{opacity:var(--spectrum-coach-indicator-animation-keyframe-0-opacity);-webkit-transform:scale(var(--spectrum-coach-indicator-animation-keyframe-0-scale))}50%{opacity:var(--spectrum-coach-indicator-animation-keyframe-50-opacity);-webkit-transform:scale(var(--spectrum-coach-indicator-animation-keyframe-50-scale))}to{opacity:var(--spectrum-coach-indicator-animation-keyframe-100-opacity);-webkit-transform:scale(var(--spectrum-coach-indicator-animation-keyframe-100-scale))}}@keyframes pulse--quiet{0%{opacity:var(--spectrum-coach-indicator-animation-keyframe-0-opacity);-webkit-transform:scale(var(--spectrum-coach-indicator-quiet-animation-keyframe-0-scale))}50%{opacity:var(--spectrum-coach-indicator-animation-keyframe-50-opacity);-webkit-transform:scale(var(--spectrum-coach-indicator-animation-keyframe-50-scale))}to{opacity:var(--spectrum-coach-indicator-animation-keyframe-100-opacity);-webkit-transform:scale(var(--spectrum-coach-indicator-animation-keyframe-100-scale))}}:host{--spectrum-coach-indicator-ring-border-size:var(
+--spectrum-border-width-200
+);--spectrum-coach-indicator-min-inline-size:calc(var(--spectrum-coach-indicator-ring-diameter)*3);--spectrum-coach-indicator-min-block-size:calc(var(--spectrum-coach-indicator-ring-diameter)*3);--spectrum-coach-indicator-inline-size:var(
+--spectrum-coach-indicator-min-inline-size
+);--spectrum-coach-indicator-block-size:var(
+--spectrum-coach-indicator-min-block-size
+);--spectrum-coach-indicator-ring-inline-size:var(
+--spectrum-coach-indicator-ring-diameter
+);--spectrum-coach-indicator-ring-block-size:var(
+--spectrum-coach-indicator-ring-diameter
+);--spectrum-coach-indicator-top:calc(var(--spectrum-coach-indicator-block-size)/3 - var(--spectrum-coach-indicator-ring-border-size));--spectrum-coach-indicator-left:calc(var(--spectrum-coach-indicator-inline-size)/3 - var(--spectrum-coach-indicator-ring-border-size));--spectrum-coach-animation-indicator-ring-duration:var(
+--spectrum-animation-duration-6000
+);--spectrum-coach-animation-indicator-ring-inner-delay-multiple:-0.5;--spectrum-coach-animation-indicator-ring-center-delay-multiple:-0.66;--spectrum-coach-animation-indicator-ring-outer-delay-multiple:-1;--spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple:-0.33;--spectrum-coach-indicator-animation-name:pulse;--spectrum-coach-indicator-inner-animation-delay-multiple:var(
+--spectrum-coach-animation-indicator-ring-inner-delay-multiple
+)}:host([quiet]){--mod-coach-indicator-min-inline-size:calc(var(
+--mod-coach-indicator-quiet-ring-diameter,
+var(--spectrum-coach-indicator-quiet-ring-diameter)
+)*2.75);--mod-coach-indicator-min-block-size:calc(var(
+--mod-coach-indicator-quiet-ring-diameter,
+var(--spectrum-coach-indicator-quiet-ring-diameter)
+)*2.75);--mod-coach-indicator-inline-size:calc(var(
+--mod-coach-indicator-quiet-ring-diameter,
+var(--spectrum-coach-indicator-quiet-ring-diameter)
+)*2.75);--mod-coach-indicator-block-size:calc(var(
+--mod-coach-indicator-quiet-ring-diameter,
+var(--spectrum-coach-indicator-quiet-ring-diameter)
+)*2.75);--mod-coach-indicator-ring-inline-size:var(
+--mod-coach-indicator-quiet-ring-diameter,var(--spectrum-coach-indicator-quiet-ring-diameter)
+);--mod-coach-indicator-ring-block-size:var(
+--mod-coach-indicator-quiet-ring-diameter,var(--spectrum-coach-indicator-quiet-ring-diameter)
+);--mod-coach-indicator-top:calc(var(--mod-coach-indicator-min-inline-size)/3 - var(--spectrum-coach-indicator-ring-border-size));--mod-coach-indicator-left:calc(var(--mod-coach-indicator-min-inline-size)/3 - var(--spectrum-coach-indicator-ring-border-size));--mod-coach-indicator-animation-name:pulse--quiet;--mod-coach-indicator-inner-animation-delay-multiple:var(
+--mod-coach-indicator-quiet-animation-ring-inner-delay-multiple,var(
+--spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple
+)
+)}:host{block-size:var(
+--mod-coach-indicator-block-size,var(--spectrum-coach-indicator-block-size)
+);inline-size:var(
+--mod-coach-indicator-inline-size,var(--spectrum-coach-indicator-inline-size)
+);margin:var(--mod-coach-indicator-gap,var(--spectrum-coach-indicator-gap));min-block-size:var(
+--mod-coach-indicator-min-block-size,var(--spectrum-coach-indicator-min-block-size)
+);min-inline-size:var(
+--mod-coach-indicator-min-inline-size,var(--spectrum-coach-indicator-min-inline-size)
+);position:relative}.ring{animation:var(
+--mod-coach-indicator-animation-name,var(--spectrum-coach-indicator-animation-name)
+) var(
+--mod-coach-animation-indicator-ring-duration,var(--spectrum-coach-animation-indicator-ring-duration)
+) linear infinite;block-size:var(
+--mod-coach-indicator-ring-block-size,var(--spectrum-coach-indicator-ring-block-size)
+);border-color:var(
+--mod-coach-indicator-ring-default-color,var(--spectrum-coach-indicator-ring-default-color)
+);border-radius:50%;border-style:solid;border-width:var(
+--mod-coach-indicator-ring-border-size,var(--spectrum-coach-indicator-ring-border-size)
+);display:block;inline-size:var(
+--mod-coach-indicator-ring-inline-size,var(--spectrum-coach-indicator-ring-inline-size)
+);inset-block-start:var(
+--mod-coach-indicator-top,var(--spectrum-coach-indicator-top)
+);inset-inline-start:var(
+--mod-coach-indicator-left,var(--spectrum-coach-indicator-left)
+);position:absolute}.ring:first-child{animation-delay:calc(var(
+--mod-coach-animation-indicator-ring-duration,
+var(--spectrum-coach-animation-indicator-ring-duration)
+)*var(
+--mod-coach-indicator-inner-animation-delay-multiple,
+var(--spectrum-coach-indicator-inner-animation-delay-multiple)
+))}.ring:nth-child(2){animation-delay:calc(var(
+--mod-coach-animation-indicator-ring-duration,
+var(--spectrum-coach-animation-indicator-ring-duration)
+)*var(
+--mod-coach-animation-indicator-ring-center-delay-multiple,
+var(
+--spectrum-coach-animation-indicator-ring-center-delay-multiple
+)
+))}.ring:nth-child(3){animation-delay:calc(var(
+--mod-coach-animation-indicator-ring-duration,
+var(--spectrum-coach-animation-indicator-ring-duration)
+)*var(
+--mod-coach-animation-indicator-ring-outer-delay-multiple,
+var(
+--spectrum-coach-animation-indicator-ring-outer-delay-multiple
+)
+))}:host([static=white]) .ring{border-color:var(
+--mod-coach-indicator-ring-light-color,var(--spectrum-coach-indicator-ring-light-color)
+)}:host([static=black]) .ring{border-color:var(
+--mod-coach-indicator-ring-dark-color,var(--spectrum-coach-indicator-ring-dark-color)
+)}@media (prefers-reduced-motion:reduce){.ring{animation:none}}:host{display:inline-block}
+`;export default a;
+//# sourceMappingURL=coach-indicator.css.js.map

package/src/coach-indicator.css.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["coach-indicator.css.ts"],
+  "sourcesContent": ["/*\nCopyright 2024 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 { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-coach-indicator-animation-keyframe-0-scale:1;--spectrum-coach-indicator-animation-keyframe-0-opacity:0;--spectrum-coach-indicator-animation-keyframe-50-scale:1.5;--spectrum-coach-indicator-animation-keyframe-50-opacity:1;--spectrum-coach-indicator-animation-keyframe-100-scale:2;--spectrum-coach-indicator-animation-keyframe-100-opacity:0;--spectrum-coach-indicator-quiet-animation-keyframe-0-scale:0.8}@keyframes pulse{0%{opacity:var(--spectrum-coach-indicator-animation-keyframe-0-opacity);-webkit-transform:scale(var(--spectrum-coach-indicator-animation-keyframe-0-scale))}50%{opacity:var(--spectrum-coach-indicator-animation-keyframe-50-opacity);-webkit-transform:scale(var(--spectrum-coach-indicator-animation-keyframe-50-scale))}to{opacity:var(--spectrum-coach-indicator-animation-keyframe-100-opacity);-webkit-transform:scale(var(--spectrum-coach-indicator-animation-keyframe-100-scale))}}@keyframes pulse--quiet{0%{opacity:var(--spectrum-coach-indicator-animation-keyframe-0-opacity);-webkit-transform:scale(var(--spectrum-coach-indicator-quiet-animation-keyframe-0-scale))}50%{opacity:var(--spectrum-coach-indicator-animation-keyframe-50-opacity);-webkit-transform:scale(var(--spectrum-coach-indicator-animation-keyframe-50-scale))}to{opacity:var(--spectrum-coach-indicator-animation-keyframe-100-opacity);-webkit-transform:scale(var(--spectrum-coach-indicator-animation-keyframe-100-scale))}}:host{--spectrum-coach-indicator-ring-border-size:var(\n--spectrum-border-width-200\n);--spectrum-coach-indicator-min-inline-size:calc(var(--spectrum-coach-indicator-ring-diameter)*3);--spectrum-coach-indicator-min-block-size:calc(var(--spectrum-coach-indicator-ring-diameter)*3);--spectrum-coach-indicator-inline-size:var(\n--spectrum-coach-indicator-min-inline-size\n);--spectrum-coach-indicator-block-size:var(\n--spectrum-coach-indicator-min-block-size\n);--spectrum-coach-indicator-ring-inline-size:var(\n--spectrum-coach-indicator-ring-diameter\n);--spectrum-coach-indicator-ring-block-size:var(\n--spectrum-coach-indicator-ring-diameter\n);--spectrum-coach-indicator-top:calc(var(--spectrum-coach-indicator-block-size)/3 - var(--spectrum-coach-indicator-ring-border-size));--spectrum-coach-indicator-left:calc(var(--spectrum-coach-indicator-inline-size)/3 - var(--spectrum-coach-indicator-ring-border-size));--spectrum-coach-animation-indicator-ring-duration:var(\n--spectrum-animation-duration-6000\n);--spectrum-coach-animation-indicator-ring-inner-delay-multiple:-0.5;--spectrum-coach-animation-indicator-ring-center-delay-multiple:-0.66;--spectrum-coach-animation-indicator-ring-outer-delay-multiple:-1;--spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple:-0.33;--spectrum-coach-indicator-animation-name:pulse;--spectrum-coach-indicator-inner-animation-delay-multiple:var(\n--spectrum-coach-animation-indicator-ring-inner-delay-multiple\n)}:host([quiet]){--mod-coach-indicator-min-inline-size:calc(var(\n--mod-coach-indicator-quiet-ring-diameter,\nvar(--spectrum-coach-indicator-quiet-ring-diameter)\n)*2.75);--mod-coach-indicator-min-block-size:calc(var(\n--mod-coach-indicator-quiet-ring-diameter,\nvar(--spectrum-coach-indicator-quiet-ring-diameter)\n)*2.75);--mod-coach-indicator-inline-size:calc(var(\n--mod-coach-indicator-quiet-ring-diameter,\nvar(--spectrum-coach-indicator-quiet-ring-diameter)\n)*2.75);--mod-coach-indicator-block-size:calc(var(\n--mod-coach-indicator-quiet-ring-diameter,\nvar(--spectrum-coach-indicator-quiet-ring-diameter)\n)*2.75);--mod-coach-indicator-ring-inline-size:var(\n--mod-coach-indicator-quiet-ring-diameter,var(--spectrum-coach-indicator-quiet-ring-diameter)\n);--mod-coach-indicator-ring-block-size:var(\n--mod-coach-indicator-quiet-ring-diameter,var(--spectrum-coach-indicator-quiet-ring-diameter)\n);--mod-coach-indicator-top:calc(var(--mod-coach-indicator-min-inline-size)/3 - var(--spectrum-coach-indicator-ring-border-size));--mod-coach-indicator-left:calc(var(--mod-coach-indicator-min-inline-size)/3 - var(--spectrum-coach-indicator-ring-border-size));--mod-coach-indicator-animation-name:pulse--quiet;--mod-coach-indicator-inner-animation-delay-multiple:var(\n--mod-coach-indicator-quiet-animation-ring-inner-delay-multiple,var(\n--spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple\n)\n)}:host{block-size:var(\n--mod-coach-indicator-block-size,var(--spectrum-coach-indicator-block-size)\n);inline-size:var(\n--mod-coach-indicator-inline-size,var(--spectrum-coach-indicator-inline-size)\n);margin:var(--mod-coach-indicator-gap,var(--spectrum-coach-indicator-gap));min-block-size:var(\n--mod-coach-indicator-min-block-size,var(--spectrum-coach-indicator-min-block-size)\n);min-inline-size:var(\n--mod-coach-indicator-min-inline-size,var(--spectrum-coach-indicator-min-inline-size)\n);position:relative}.ring{animation:var(\n--mod-coach-indicator-animation-name,var(--spectrum-coach-indicator-animation-name)\n) var(\n--mod-coach-animation-indicator-ring-duration,var(--spectrum-coach-animation-indicator-ring-duration)\n) linear infinite;block-size:var(\n--mod-coach-indicator-ring-block-size,var(--spectrum-coach-indicator-ring-block-size)\n);border-color:var(\n--mod-coach-indicator-ring-default-color,var(--spectrum-coach-indicator-ring-default-color)\n);border-radius:50%;border-style:solid;border-width:var(\n--mod-coach-indicator-ring-border-size,var(--spectrum-coach-indicator-ring-border-size)\n);display:block;inline-size:var(\n--mod-coach-indicator-ring-inline-size,var(--spectrum-coach-indicator-ring-inline-size)\n);inset-block-start:var(\n--mod-coach-indicator-top,var(--spectrum-coach-indicator-top)\n);inset-inline-start:var(\n--mod-coach-indicator-left,var(--spectrum-coach-indicator-left)\n);position:absolute}.ring:first-child{animation-delay:calc(var(\n--mod-coach-animation-indicator-ring-duration,\nvar(--spectrum-coach-animation-indicator-ring-duration)\n)*var(\n--mod-coach-indicator-inner-animation-delay-multiple,\nvar(--spectrum-coach-indicator-inner-animation-delay-multiple)\n))}.ring:nth-child(2){animation-delay:calc(var(\n--mod-coach-animation-indicator-ring-duration,\nvar(--spectrum-coach-animation-indicator-ring-duration)\n)*var(\n--mod-coach-animation-indicator-ring-center-delay-multiple,\nvar(\n--spectrum-coach-animation-indicator-ring-center-delay-multiple\n)\n))}.ring:nth-child(3){animation-delay:calc(var(\n--mod-coach-animation-indicator-ring-duration,\nvar(--spectrum-coach-animation-indicator-ring-duration)\n)*var(\n--mod-coach-animation-indicator-ring-outer-delay-multiple,\nvar(\n--spectrum-coach-animation-indicator-ring-outer-delay-multiple\n)\n))}:host([static=white]) .ring{border-color:var(\n--mod-coach-indicator-ring-light-color,var(--spectrum-coach-indicator-ring-light-color)\n)}:host([static=black]) .ring{border-color:var(\n--mod-coach-indicator-ring-dark-color,var(--spectrum-coach-indicator-ring-dark-color)\n)}@media (prefers-reduced-motion:reduce){.ring{animation:none}}:host{display:inline-block}\n`;\nexport default styles;"],
+  "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAuFf,eAAeC",
+  "names": ["css", "styles"]
+}

package/src/coachmark.css.dev.js

@@ -1,81 +1,105 @@
 "use strict";
 import { css } from "@spectrum-web-components/base";
 const styles = css`
-@keyframes pulse{0%{opacity:var(
---spectrum-coachmark-animation-indicator-keyframe-0-opacity,0
-);-webkit-transform:scale(var(--spectrum-coachmark-animation-indicator-keyframe-0-scale,1))}50%{opacity:var(
---spectrum-coachmark-animation-indicator-keyframe-50-opacity,1
-);-webkit-transform:scale(var(--spectrum-coachmark-animation-indicator-keyframe-50-scale,1.5))}to{opacity:var(
---spectrum-coachmark-animation-indicator-keyframe-100-opacity,0
-);-webkit-transform:scale(var(--spectrum-coachmark-animation-indicator-keyframe-100-scale,2))}}@keyframes pulse--quiet{0%{opacity:var(
---spectrum-coachmark-animation-indicator-keyframe-0-opacity,0
-);-webkit-transform:scale(var(
---spectrum-coachmark-quiet-animation-indicator-keyframe-0-scale,.8
-))}50%{opacity:var(
---spectrum-coachmark-animation-indicator-keyframe-50-opacity,1
-);-webkit-transform:scale(var(--spectrum-coachmark-animation-indicator-keyframe-50-scale,1.5))}to{opacity:var(
---spectrum-coachmark-animation-indicator-keyframe-100-opacity,0
-);-webkit-transform:scale(var(--spectrum-coachmark-animation-indicator-keyframe-100-scale,2))}}:host{margin:var(
---spectrum-coachmark-indicator-gap,var(--spectrum-global-dimension-size-75)
-);position:relative}.ring{border-radius:50%;border-style:solid;border-width:var(
---spectrum-coachmark-indicator-ring-border-size,var(--spectrum-global-dimension-static-size-25)
-);display:block;position:absolute}.ring:nth-child(2){animation-delay:calc(var(--spectrum-coachmark-animation-indicator-ring-duration, 3s)*var(
---spectrum-coachmark-animation-indicator-ring-center-delay-multiple,
--.66
-))}.ring:nth-child(3){animation-delay:calc(var(--spectrum-coachmark-animation-indicator-ring-duration, 3s)*var(
---spectrum-coachmark-animation-indicator-ring-outer-delay-multiple,
--1
-))}:host{min-height:calc(var(
---spectrum-coachmark-indicator-ring-diameter,
-var(--spectrum-global-dimension-size-200)
-)*3);min-width:calc(var(
---spectrum-coachmark-indicator-ring-diameter,
-var(--spectrum-global-dimension-size-200)
-)*3)}:host([dir=ltr]) .ring{left:calc(var(
---spectrum-coachmark-indicator-ring-diameter,
-var(--spectrum-global-dimension-size-200)
-)*.75)}:host([dir=rtl]) .ring{right:calc(var(
---spectrum-coachmark-indicator-ring-diameter,
-var(--spectrum-global-dimension-size-200)
-)*.75)}.ring{animation:pulse var(--spectrum-coachmark-animation-indicator-ring-duration,3s) linear infinite;height:var(
---spectrum-coachmark-indicator-ring-diameter,var(--spectrum-global-dimension-size-200)
-);top:calc(var(
---spectrum-coachmark-indicator-ring-diameter,
-var(--spectrum-global-dimension-size-200)
-)*.75);width:var(
---spectrum-coachmark-indicator-ring-diameter,var(--spectrum-global-dimension-size-200)
-)}.ring:first-child{animation-delay:calc(var(--spectrum-coachmark-animation-indicator-ring-duration, 3s)*var(
---spectrum-coachmark-animation-indicator-ring-inner-delay-multiple,
--.5
-))}:host([quiet]){min-height:calc(var(
---spectrum-coachmark-quiet-indicator-ring-diameter,
-var(--spectrum-global-dimension-size-100)
-)*2.75);min-width:calc(var(
---spectrum-coachmark-quiet-indicator-ring-diameter,
-var(--spectrum-global-dimension-size-100)
-)*2.75)}:host([dir=ltr][quiet]) .ring{left:calc(var(
---spectrum-coachmark-quiet-indicator-ring-diameter,
-var(--spectrum-global-dimension-size-100)
-)*.75)}:host([dir=rtl][quiet]) .ring{right:calc(var(
---spectrum-coachmark-quiet-indicator-ring-diameter,
-var(--spectrum-global-dimension-size-100)
-)*.75)}:host([quiet]) .ring{animation:pulse--quiet var(--spectrum-coachmark-animation-indicator-ring-duration,3s) linear infinite;height:var(
---spectrum-coachmark-quiet-indicator-ring-diameter,var(--spectrum-global-dimension-size-100)
-);top:calc(var(
---spectrum-coachmark-quiet-indicator-ring-diameter,
-var(--spectrum-global-dimension-size-100)
-)*.75);width:var(
---spectrum-coachmark-quiet-indicator-ring-diameter,var(--spectrum-global-dimension-size-100)
-)}:host([quiet]) .ring:first-child{animation-delay:calc(var(--spectrum-coachmark-animation-indicator-ring-duration, 3s)*var(
---spectrum-coachmark-quiet-animation-indicator-ring-inner-delay-multiple,
--.33
-))}.ring{border-color:var(
---spectrum-coachmark-indicator-ring-default-color,var(--spectrum-alias-focus-color)
-)}:host([variant=light]) .ring{border-color:var(
---spectrum-coachmark-indicator-ring-low-contrast-color,var(--spectrum-global-color-gray-50)
-)}:host([variant=dark]) .ring{border-color:var(
---spectrum-coachmark-indicator-ring-high-contrast-color,var(--spectrum-global-color-gray-900)
-)}:host{display:inline-block}
+:host{--spectrum-coachmark-min-width:var(--spectrum-coach-mark-minimum-width);--spectrum-coachmark-width:var(--spectrum-coach-mark-width);--spectrum-coachmark-max-width:var(--spectrum-coach-mark-maximum-width);--spectrum-coachmark-media-height:var(--spectrum-coach-mark-media-height);--spectrum-coachmark-media-min-height:var(
+--spectrum-coach-mark-media-minimum-height
+);--spectrum-coachmark-border-size:var(--mod-popover-border-width);--spectrum-coachmark-border-radius:var(--mod-popover-corner-radius);--spectrum-coachmark-padding:var(--spectrum-coach-mark-edge-to-content);--spectrum-coachmark-heading-to-action-button:var(--spectrum-spacing-300);--spectrum-coachmark-header-to-body:var(--spectrum-spacing-200);--spectrum-coachmark-body-to-footer:var(--spectrum-spacing-300);--spectrum-coachmark-title-color:var(--spectrum-heading-color);--spectrum-coachmark-title-font-family:var(--spectrum-sans-serif-font);--spectrum-coachmark-title-font-style:var(
+--spectrum-heading-serif-font-style
+);--spectrum-coachmark-title-text-font-weight:var(
+--spectrum-heading-sans-serif-font-weight
+);--spectrum-coachmark-title-font-size:var(--spectrum-coach-mark-title-size);--spectrum-coachmark-title-text-line-height:var(
+--spectrum-heading-line-height
+);--spectrum-coachmark-content-font-color:var(--spectrum-body-color);--spectrum-coachmark-content-font-weight:var(
+--spectrum-body-sans-serif-font-weight
+);--spectrum-coachmark-content-font-family:var(--spectrum-sans-serif-font);--spectrum-coachmark-content-font-style:var(
+--spectrum-body-sans-serif-font-style
+);--spectrum-coachmark-content-line-height:var(--spectrum-body-line-height);--spectrum-coachmark-content-font-size:var(
+--spectrum-coach-mark-body-size
+);--spectrum-coachmark-step-color:var(
+--spectrum-coach-mark-pagination-color
+);--spectrum-coachmark-step-font-weight:var(
+--spectrum-body-medium-font-weight
+);--spectrum-coachmark-step-font-family:var(--spectrum-sans-serif-font);--spectrum-coachmark-step-font-style:var(
+--spectrum-body-sans-serif-font-style
+);--spectrum-coachmark-step-line-height:var(--spectrum-body-line-height);--spectrum-coachmark-step-font-size:var(
+--spectrum-coach-mark-pagination-body-size
+);--spectrum-coachmark-step-to-bottom:var(
+--spectrum-coach-mark-pagination-text-to-bottom-edge
+);--mod-buttongroup-justify-content:flex-end;--mod-popover-border-width:var(--spectrum-border-width-100);--mod-popover-corner-radius:var(--spectrum-corner-radius-100);--mod-popover-content-area-spacing-vertical:0;--mod-button-edge-to-visual-only:9px;inline-size:var(--mod-coachmark-width,var(--spectrum-coachmark-width));max-inline-size:var(
+--mod-coachmark-max-width,var(--spectrum-coachmark-max-width)
+);min-inline-size:var(
+--mod-coachmark-min-width,var(--spectrum-coachmark-min-width)
+);position:relative}.buttongroup{display:var(--spectrum-coachmark-buttongroup-display)}.buttongroup-mobile{--mod-buttongroup-spacing-horizontal:var(--spectrum-spacing-100);display:var(--spectrum-coachmark-buttongroup-mobile-display)}.menu{display:var(--spectrum-coachmark-menu-display)}.spectrum-CoachMark-menu--mobile{display:var(--spectrum-coachmark-menu-mobile-display)}.image-wrapper{block-size:var(
+--mod-coachmark-media-height,var(--spectrum-coachmark-media-height)
+);border-start-end-radius:inherit;border-start-start-radius:inherit;inline-size:calc(var(--mod-coachmark-width, var(--spectrum-coachmark-width)) - var(
+--mod-coachmark-border-size,
+var(--spectrum-coachmark-border-size)
+)*2);min-block-size:var(
+--mod-coachmark-media-min-height,var(--spectrum-coachmark-media-min-height)
+);object-fit:cover;object-position:center}.image{block-size:100%;border-start-end-radius:calc(var(
+--mod-coachmark-border-radius,
+var(--spectrum-coachmark-border-radius)
+) - var(
+--mod-coachmark-border-size,
+var(--spectrum-coachmark-border-size)
+));border-start-start-radius:calc(var(
+--mod-coachmark-border-radius,
+var(--spectrum-coachmark-border-radius)
+) - var(
+--mod-coachmark-border-size,
+var(--spectrum-coachmark-border-size)
+));display:block;inline-size:100%;object-fit:cover}.content,.footer,.header{padding-block:0;padding-inline:var(
+--mod-coachmark-padding,var(--spectrum-coachmark-padding)
+)}.header{align-items:center;display:flex;justify-content:space-between;margin-block-end:var(
+--mod-coachmark-header-to-body,var(--spectrum-coachmark-header-to-body)
+);padding-block-start:var(
+--mod-coachmark-padding,var(--spectrum-coachmark-padding)
+)}.action-menu{margin-inline-start:var(
+--mod-coachmark-heading-to-action-button,var(--spectrum-coachmark-heading-to-action-button)
+);white-space:nowrap;z-index:1}.content{color:var(
+--mod-coachmark-content-font-color,var(--spectrum-coachmark-content-font-color)
+);font-family:var(
+--mod-coachmark-content-font-family,var(--spectrum-coachmark-content-font-family)
+);font-size:var(
+--mod-coachmark-content-font-size,var(--spectrum-coachmark-content-font-size)
+);font-style:var(
+--mod-coachmark-content-font-style,var(--spectrum-coachmark-content-font-style)
+);font-weight:var(
+--mod-coachmark-content-font-weight,var(--spectrum-coachmark-content-font-weight)
+);line-height:var(
+--mod-coachmark-content-line-height,var(--spectrum-coachmark-content-line-height)
+);margin-block-end:var(
+--mod-coachmark-body-to-footer,var(--spectrum-coachmark-body-to-footer)
+)}.footer{align-items:end;display:grid;margin-block-start:0;padding-block-end:var(
+--mod-coachmark-padding,var(--spectrum-coachmark-padding)
+)}.footer .spectrum-ButtonGroup{grid-column-start:2}.title{color:var(
+--mod-coachmark-title-color,var(--spectrum-coachmark-title-color)
+);font-family:var(
+--mod-coachmark-title-font-family,var(--spectrum-coachmark-title-font-family)
+);font-size:var(
+--mod-coachmark-title-font-size,var(--spectrum-coachmark-title-font-size)
+);font-style:var(
+--mod-coachmark-title-font-style,var(--spectrum-coachmark-title-font-style)
+);font-weight:var(
+--mod-coachmark-title-text-font-weight,var(--spectrum-coachmark-title-text-font-weight)
+);line-height:var(
+--mod-coachmark-title-text-line-height,var(--spectrum-coachmark-title-text-line-height)
+);margin-block-end:0}.step{color:var(
+--mod-coachmark-step-color,var(--spectrum-coachmark-step-color)
+);font-size:var(
+--mod-coachmark-step-font-size,var(--spectrum-coachmark-step-font-size)
+);font-style:var(
+--mod-coachmark-step-font-style,var(--spectrum-coachmark-step-font-style)
+);font-weight:var(
+--mod-coachmark-step-text-font-weight,var(--spectrum-coachmark-step-text-font-weight)
+);justify-self:start;line-height:var(
+--mod-coachmark-step-text-line-height,var(--spectrum-coachmark-step-text-line-height)
+);margin-block-end:calc(var(
+--mod-coachmark-step-to-bottom,
+var(--spectrum-coachmark-step-to-bottom)
+) - var(--mod-coachmark-padding, var(--spectrum-coachmark-padding)));white-space:nowrap}:host{--spectrum-coachmark-dimension-size-175:14px;--spectrum-coachmark-dimension-size-200:16px;--spectrum-coachmark-dimension-size-100:8px;--spectrum-coachmark-dimension-size-50:4px;--spectrum-coachmark-content-font-family:var(--spectrum-font-family)}.keyboard-shortcut{align-items:center;background-color:var(--spectrum-gray-200);border:var(--spectrum-text-underline-gap) solid var(--spectrum-gray-200);border-radius:var(--spectrum-spacing-75);color:var(--spectrum-gray-800);display:inline-flex;flex-flow:row;justify-content:center;min-width:var(--spectrum-badge-min-width);padding-block:var(--spectrum-coachmark-dimension-size-50);padding-inline:var(--spectrum-coachmark-dimension-size-100)}.keys{column-gap:var(--spectrum-coachmark-dimension-size-50);flex-flow:wrap;font-family:var(
+--mod-body-sans-serif-font-family,var(--spectrum-body-sans-serif-font-family)
+)}.flex-container,.keys{align-items:center;display:flex;row-gap:var(--spectrum-coachmark-dimension-size-175)}.flex-container{column-gap:var(--spectrum-coachmark-dimension-size-200);flex-wrap:wrap}.static-item{align-self:flex-start;flex:0}
 `;
 export default styles;
 //# sourceMappingURL=coachmark.css.dev.js.map

package/src/coachmark.css.dev.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["coachmark.css.ts"],
-  "sourcesContent": ["/*\nCopyright 2024 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 { css } from '@spectrum-web-components/base';\nconst styles = css`\n@keyframes pulse{0%{opacity:var(\n--spectrum-coachmark-animation-indicator-keyframe-0-opacity,0\n);-webkit-transform:scale(var(--spectrum-coachmark-animation-indicator-keyframe-0-scale,1))}50%{opacity:var(\n--spectrum-coachmark-animation-indicator-keyframe-50-opacity,1\n);-webkit-transform:scale(var(--spectrum-coachmark-animation-indicator-keyframe-50-scale,1.5))}to{opacity:var(\n--spectrum-coachmark-animation-indicator-keyframe-100-opacity,0\n);-webkit-transform:scale(var(--spectrum-coachmark-animation-indicator-keyframe-100-scale,2))}}@keyframes pulse--quiet{0%{opacity:var(\n--spectrum-coachmark-animation-indicator-keyframe-0-opacity,0\n);-webkit-transform:scale(var(\n--spectrum-coachmark-quiet-animation-indicator-keyframe-0-scale,.8\n))}50%{opacity:var(\n--spectrum-coachmark-animation-indicator-keyframe-50-opacity,1\n);-webkit-transform:scale(var(--spectrum-coachmark-animation-indicator-keyframe-50-scale,1.5))}to{opacity:var(\n--spectrum-coachmark-animation-indicator-keyframe-100-opacity,0\n);-webkit-transform:scale(var(--spectrum-coachmark-animation-indicator-keyframe-100-scale,2))}}:host{margin:var(\n--spectrum-coachmark-indicator-gap,var(--spectrum-global-dimension-size-75)\n);position:relative}.ring{border-radius:50%;border-style:solid;border-width:var(\n--spectrum-coachmark-indicator-ring-border-size,var(--spectrum-global-dimension-static-size-25)\n);display:block;position:absolute}.ring:nth-child(2){animation-delay:calc(var(--spectrum-coachmark-animation-indicator-ring-duration, 3s)*var(\n--spectrum-coachmark-animation-indicator-ring-center-delay-multiple,\n-.66\n))}.ring:nth-child(3){animation-delay:calc(var(--spectrum-coachmark-animation-indicator-ring-duration, 3s)*var(\n--spectrum-coachmark-animation-indicator-ring-outer-delay-multiple,\n-1\n))}:host{min-height:calc(var(\n--spectrum-coachmark-indicator-ring-diameter,\nvar(--spectrum-global-dimension-size-200)\n)*3);min-width:calc(var(\n--spectrum-coachmark-indicator-ring-diameter,\nvar(--spectrum-global-dimension-size-200)\n)*3)}:host([dir=ltr]) .ring{left:calc(var(\n--spectrum-coachmark-indicator-ring-diameter,\nvar(--spectrum-global-dimension-size-200)\n)*.75)}:host([dir=rtl]) .ring{right:calc(var(\n--spectrum-coachmark-indicator-ring-diameter,\nvar(--spectrum-global-dimension-size-200)\n)*.75)}.ring{animation:pulse var(--spectrum-coachmark-animation-indicator-ring-duration,3s) linear infinite;height:var(\n--spectrum-coachmark-indicator-ring-diameter,var(--spectrum-global-dimension-size-200)\n);top:calc(var(\n--spectrum-coachmark-indicator-ring-diameter,\nvar(--spectrum-global-dimension-size-200)\n)*.75);width:var(\n--spectrum-coachmark-indicator-ring-diameter,var(--spectrum-global-dimension-size-200)\n)}.ring:first-child{animation-delay:calc(var(--spectrum-coachmark-animation-indicator-ring-duration, 3s)*var(\n--spectrum-coachmark-animation-indicator-ring-inner-delay-multiple,\n-.5\n))}:host([quiet]){min-height:calc(var(\n--spectrum-coachmark-quiet-indicator-ring-diameter,\nvar(--spectrum-global-dimension-size-100)\n)*2.75);min-width:calc(var(\n--spectrum-coachmark-quiet-indicator-ring-diameter,\nvar(--spectrum-global-dimension-size-100)\n)*2.75)}:host([dir=ltr][quiet]) .ring{left:calc(var(\n--spectrum-coachmark-quiet-indicator-ring-diameter,\nvar(--spectrum-global-dimension-size-100)\n)*.75)}:host([dir=rtl][quiet]) .ring{right:calc(var(\n--spectrum-coachmark-quiet-indicator-ring-diameter,\nvar(--spectrum-global-dimension-size-100)\n)*.75)}:host([quiet]) .ring{animation:pulse--quiet var(--spectrum-coachmark-animation-indicator-ring-duration,3s) linear infinite;height:var(\n--spectrum-coachmark-quiet-indicator-ring-diameter,var(--spectrum-global-dimension-size-100)\n);top:calc(var(\n--spectrum-coachmark-quiet-indicator-ring-diameter,\nvar(--spectrum-global-dimension-size-100)\n)*.75);width:var(\n--spectrum-coachmark-quiet-indicator-ring-diameter,var(--spectrum-global-dimension-size-100)\n)}:host([quiet]) .ring:first-child{animation-delay:calc(var(--spectrum-coachmark-animation-indicator-ring-duration, 3s)*var(\n--spectrum-coachmark-quiet-animation-indicator-ring-inner-delay-multiple,\n-.33\n))}.ring{border-color:var(\n--spectrum-coachmark-indicator-ring-default-color,var(--spectrum-alias-focus-color)\n)}:host([variant=light]) .ring{border-color:var(\n--spectrum-coachmark-indicator-ring-low-contrast-color,var(--spectrum-global-color-gray-50)\n)}:host([variant=dark]) .ring{border-color:var(\n--spectrum-coachmark-indicator-ring-high-contrast-color,var(--spectrum-global-color-gray-900)\n)}:host{display:inline-block}\n`;\nexport default styles;"],
-  "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6Ef,eAAe;",
+  "sourcesContent": ["/*\nCopyright 2024 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 { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-coachmark-min-width:var(--spectrum-coach-mark-minimum-width);--spectrum-coachmark-width:var(--spectrum-coach-mark-width);--spectrum-coachmark-max-width:var(--spectrum-coach-mark-maximum-width);--spectrum-coachmark-media-height:var(--spectrum-coach-mark-media-height);--spectrum-coachmark-media-min-height:var(\n--spectrum-coach-mark-media-minimum-height\n);--spectrum-coachmark-border-size:var(--mod-popover-border-width);--spectrum-coachmark-border-radius:var(--mod-popover-corner-radius);--spectrum-coachmark-padding:var(--spectrum-coach-mark-edge-to-content);--spectrum-coachmark-heading-to-action-button:var(--spectrum-spacing-300);--spectrum-coachmark-header-to-body:var(--spectrum-spacing-200);--spectrum-coachmark-body-to-footer:var(--spectrum-spacing-300);--spectrum-coachmark-title-color:var(--spectrum-heading-color);--spectrum-coachmark-title-font-family:var(--spectrum-sans-serif-font);--spectrum-coachmark-title-font-style:var(\n--spectrum-heading-serif-font-style\n);--spectrum-coachmark-title-text-font-weight:var(\n--spectrum-heading-sans-serif-font-weight\n);--spectrum-coachmark-title-font-size:var(--spectrum-coach-mark-title-size);--spectrum-coachmark-title-text-line-height:var(\n--spectrum-heading-line-height\n);--spectrum-coachmark-content-font-color:var(--spectrum-body-color);--spectrum-coachmark-content-font-weight:var(\n--spectrum-body-sans-serif-font-weight\n);--spectrum-coachmark-content-font-family:var(--spectrum-sans-serif-font);--spectrum-coachmark-content-font-style:var(\n--spectrum-body-sans-serif-font-style\n);--spectrum-coachmark-content-line-height:var(--spectrum-body-line-height);--spectrum-coachmark-content-font-size:var(\n--spectrum-coach-mark-body-size\n);--spectrum-coachmark-step-color:var(\n--spectrum-coach-mark-pagination-color\n);--spectrum-coachmark-step-font-weight:var(\n--spectrum-body-medium-font-weight\n);--spectrum-coachmark-step-font-family:var(--spectrum-sans-serif-font);--spectrum-coachmark-step-font-style:var(\n--spectrum-body-sans-serif-font-style\n);--spectrum-coachmark-step-line-height:var(--spectrum-body-line-height);--spectrum-coachmark-step-font-size:var(\n--spectrum-coach-mark-pagination-body-size\n);--spectrum-coachmark-step-to-bottom:var(\n--spectrum-coach-mark-pagination-text-to-bottom-edge\n);--mod-buttongroup-justify-content:flex-end;--mod-popover-border-width:var(--spectrum-border-width-100);--mod-popover-corner-radius:var(--spectrum-corner-radius-100);--mod-popover-content-area-spacing-vertical:0;--mod-button-edge-to-visual-only:9px;inline-size:var(--mod-coachmark-width,var(--spectrum-coachmark-width));max-inline-size:var(\n--mod-coachmark-max-width,var(--spectrum-coachmark-max-width)\n);min-inline-size:var(\n--mod-coachmark-min-width,var(--spectrum-coachmark-min-width)\n);position:relative}.buttongroup{display:var(--spectrum-coachmark-buttongroup-display)}.buttongroup-mobile{--mod-buttongroup-spacing-horizontal:var(--spectrum-spacing-100);display:var(--spectrum-coachmark-buttongroup-mobile-display)}.menu{display:var(--spectrum-coachmark-menu-display)}.spectrum-CoachMark-menu--mobile{display:var(--spectrum-coachmark-menu-mobile-display)}.image-wrapper{block-size:var(\n--mod-coachmark-media-height,var(--spectrum-coachmark-media-height)\n);border-start-end-radius:inherit;border-start-start-radius:inherit;inline-size:calc(var(--mod-coachmark-width, var(--spectrum-coachmark-width)) - var(\n--mod-coachmark-border-size,\nvar(--spectrum-coachmark-border-size)\n)*2);min-block-size:var(\n--mod-coachmark-media-min-height,var(--spectrum-coachmark-media-min-height)\n);object-fit:cover;object-position:center}.image{block-size:100%;border-start-end-radius:calc(var(\n--mod-coachmark-border-radius,\nvar(--spectrum-coachmark-border-radius)\n) - var(\n--mod-coachmark-border-size,\nvar(--spectrum-coachmark-border-size)\n));border-start-start-radius:calc(var(\n--mod-coachmark-border-radius,\nvar(--spectrum-coachmark-border-radius)\n) - var(\n--mod-coachmark-border-size,\nvar(--spectrum-coachmark-border-size)\n));display:block;inline-size:100%;object-fit:cover}.content,.footer,.header{padding-block:0;padding-inline:var(\n--mod-coachmark-padding,var(--spectrum-coachmark-padding)\n)}.header{align-items:center;display:flex;justify-content:space-between;margin-block-end:var(\n--mod-coachmark-header-to-body,var(--spectrum-coachmark-header-to-body)\n);padding-block-start:var(\n--mod-coachmark-padding,var(--spectrum-coachmark-padding)\n)}.action-menu{margin-inline-start:var(\n--mod-coachmark-heading-to-action-button,var(--spectrum-coachmark-heading-to-action-button)\n);white-space:nowrap;z-index:1}.content{color:var(\n--mod-coachmark-content-font-color,var(--spectrum-coachmark-content-font-color)\n);font-family:var(\n--mod-coachmark-content-font-family,var(--spectrum-coachmark-content-font-family)\n);font-size:var(\n--mod-coachmark-content-font-size,var(--spectrum-coachmark-content-font-size)\n);font-style:var(\n--mod-coachmark-content-font-style,var(--spectrum-coachmark-content-font-style)\n);font-weight:var(\n--mod-coachmark-content-font-weight,var(--spectrum-coachmark-content-font-weight)\n);line-height:var(\n--mod-coachmark-content-line-height,var(--spectrum-coachmark-content-line-height)\n);margin-block-end:var(\n--mod-coachmark-body-to-footer,var(--spectrum-coachmark-body-to-footer)\n)}.footer{align-items:end;display:grid;margin-block-start:0;padding-block-end:var(\n--mod-coachmark-padding,var(--spectrum-coachmark-padding)\n)}.footer .spectrum-ButtonGroup{grid-column-start:2}.title{color:var(\n--mod-coachmark-title-color,var(--spectrum-coachmark-title-color)\n);font-family:var(\n--mod-coachmark-title-font-family,var(--spectrum-coachmark-title-font-family)\n);font-size:var(\n--mod-coachmark-title-font-size,var(--spectrum-coachmark-title-font-size)\n);font-style:var(\n--mod-coachmark-title-font-style,var(--spectrum-coachmark-title-font-style)\n);font-weight:var(\n--mod-coachmark-title-text-font-weight,var(--spectrum-coachmark-title-text-font-weight)\n);line-height:var(\n--mod-coachmark-title-text-line-height,var(--spectrum-coachmark-title-text-line-height)\n);margin-block-end:0}.step{color:var(\n--mod-coachmark-step-color,var(--spectrum-coachmark-step-color)\n);font-size:var(\n--mod-coachmark-step-font-size,var(--spectrum-coachmark-step-font-size)\n);font-style:var(\n--mod-coachmark-step-font-style,var(--spectrum-coachmark-step-font-style)\n);font-weight:var(\n--mod-coachmark-step-text-font-weight,var(--spectrum-coachmark-step-text-font-weight)\n);justify-self:start;line-height:var(\n--mod-coachmark-step-text-line-height,var(--spectrum-coachmark-step-text-line-height)\n);margin-block-end:calc(var(\n--mod-coachmark-step-to-bottom,\nvar(--spectrum-coachmark-step-to-bottom)\n) - var(--mod-coachmark-padding, var(--spectrum-coachmark-padding)));white-space:nowrap}:host{--spectrum-coachmark-dimension-size-175:14px;--spectrum-coachmark-dimension-size-200:16px;--spectrum-coachmark-dimension-size-100:8px;--spectrum-coachmark-dimension-size-50:4px;--spectrum-coachmark-content-font-family:var(--spectrum-font-family)}.keyboard-shortcut{align-items:center;background-color:var(--spectrum-gray-200);border:var(--spectrum-text-underline-gap) solid var(--spectrum-gray-200);border-radius:var(--spectrum-spacing-75);color:var(--spectrum-gray-800);display:inline-flex;flex-flow:row;justify-content:center;min-width:var(--spectrum-badge-min-width);padding-block:var(--spectrum-coachmark-dimension-size-50);padding-inline:var(--spectrum-coachmark-dimension-size-100)}.keys{column-gap:var(--spectrum-coachmark-dimension-size-50);flex-flow:wrap;font-family:var(\n--mod-body-sans-serif-font-family,var(--spectrum-body-sans-serif-font-family)\n)}.flex-container,.keys{align-items:center;display:flex;row-gap:var(--spectrum-coachmark-dimension-size-175)}.flex-container{column-gap:var(--spectrum-coachmark-dimension-size-200);flex-wrap:wrap}.static-item{align-self:flex-start;flex:0}\n`;\nexport default styles;"],
+  "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqGf,eAAe;",
   "names": []
 }