@spectrum-web-components/coachmark 0.40.5 → 0.41.1

package/src/spectrum-coachmark.css.dev.js

@@ -1,81 +1,103 @@
 "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{--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}
 `;
 export default styles;
 //# sourceMappingURL=spectrum-coachmark.css.dev.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["spectrum-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)}\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}\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;AAmGf,eAAe;",
   "names": []
 }

package/src/spectrum-coachmark.css.js

@@ -1,78 +1,100 @@
 "use strict";import{css as a}from"@spectrum-web-components/base";const r=a`
-@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{--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}
 `;export default r;
 //# sourceMappingURL=spectrum-coachmark.css.js.map

package/src/spectrum-coachmark.css.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["spectrum-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)}\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,EA6Ef,eAAeC",
+  "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}\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAmGf,eAAeC",
   "names": ["css", "styles"]
 }

package/src/spectrum-config.js

@@ -13,7 +13,7 @@ governing permissions and limitations under the License.
 
 import { converterFor } from '../../../tasks/process-spectrum-utils.js';
 
-const converter = converterFor('spectrum-CoachMarkIndicator');
+const converter = converterFor('spectrum-CoachMark');
 
 /**
  * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter }
@@ -21,52 +21,46 @@ const converter = converterFor('spectrum-CoachMarkIndicator');
 const config = {
     conversions: [
         {
-            inPackage: '@spectrum-css/coachmark',
+            inPackage: '@spectrum-css/coachindicator',
             outPackage: 'coachmark',
-            fileName: 'coachmark',
-            excludeByComponents: [
-                {
-                    type: 'class',
-                    name: 'spectrum-CoachMarkPopover',
-                },
-                {
-                    type: 'class',
-                    name: 'spectrum-CoachMarkPopover-image',
-                },
-                {
-                    type: 'class',
-                    name: 'spectrum-CoachMarkPopover-content',
-                },
-                {
-                    type: 'class',
-                    name: 'spectrum-CoachMarkPopover-footer',
-                },
-                {
-                    type: 'class',
-                    name: 'spectrum-CoachMarkPopover-header',
-                },
-                {
-                    type: 'class',
-                    name: 'spectrum-CoachMarkPopover-step',
-                },
-                {
-                    type: 'class',
-                    name: 'spectrum-CoachMarkPopover-title',
-                },
-            ],
+            fileName: 'coach-indicator',
             components: [
-                converter.classToHost(),
-                converter.classToClass('spectrum-CoachMarkIndicator-ring'),
+                converter.classToHost('spectrum-CoachIndicator'),
+                converter.classToClass('spectrum-CoachIndicator-ring', 'ring'),
                 converter.classToAttribute(
-                    'spectrum-CoachMarkIndicator--quiet'
+                    'spectrum-CoachIndicator--quiet',
+                    'quiet'
                 ),
                 ...converter.enumerateAttributes(
                     [
-                        ['spectrum-CoachMarkIndicator--dark'],
-                        ['spectrum-CoachMarkIndicator--light'],
+                        ['spectrum-CoachIndicator--dark', 'black'],
+                        ['spectrum-CoachIndicator--light', 'white'],
                     ],
-                    'variant'
+                    'static'
+                ),
+            ],
+        },
+        {
+            inPackage: '@spectrum-css/coachmark',
+            outPackage: 'coachmark',
+            fileName: 'coachmark',
+            components: [
+                converter.classToHost(),
+                converter.classToClass('spectrum-CoachMark-ring'),
+                converter.classToClass('spectrum-CoachMark-buttongroup'),
+                converter.classToClass(
+                    'spectrum-CoachMark-buttongroup--mobile',
+                    'buttongroup-mobile'
                 ),
+                converter.classToClass('spectrum-CoachMark-menu'),
+                converter.classToClass('spectrum-CoachMark-image-wrapper'),
+                converter.classToClass('spectrum-CoachMark-image'),
+                converter.classToClass('spectrum-CoachMark-header'),
+                converter.classToClass('spectrum-CoachMark-content'),
+                converter.classToClass('spectrum-CoachMark-footer'),
+                converter.classToClass('spectrum-CoachMark-action-menu'),
+                converter.classToClass('spectrum-CoachMark-title'),
+                converter.classToClass('spectrum-CoachMark-step'),
             ],
         },
     ],

package/stories/coach-indicator-static.stories.js

@@ -0,0 +1,22 @@
+"use strict";
+import { html } from "@spectrum-web-components/base";
+import { makeOverBackground } from "../../button/stories/index.js";
+import "@spectrum-web-components/coachmark/sp-coach-indicator.js";
+export default {
+  title: "CoachIndicator",
+  component: "sp-coach-indicator",
+  decorators: [makeOverBackground()]
+};
+export const staticWhite = () => {
+  return html`
+        <sp-coach-indicator variant="white"></sp-coach-indicator>
+        <sp-coach-indicator quiet variant="white"></sp-coach-indicator>
+    `;
+};
+export const staticBlack = () => {
+  return html`
+        <sp-coach-indicator variant="black"></sp-coach-indicator>
+        <sp-coach-indicator quiet variant="black"></sp-coach-indicator>
+    `;
+};
+//# sourceMappingURL=coach-indicator-static.stories.js.map