@roadtrip/components 3.2.1 → 3.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (124) hide show
  1. package/dist/cjs/index-a2306350.js +16 -4
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/road-alert.cjs.entry.js +1 -1
  4. package/dist/cjs/road-badge_14.cjs.entry.js +2 -2
  5. package/dist/cjs/road-button-floating.cjs.entry.js +66 -0
  6. package/dist/cjs/road-global-navigation.cjs.entry.js +1 -1
  7. package/dist/cjs/road-progress-indicator-horizontal.cjs.entry.js +40 -0
  8. package/dist/cjs/road-progress-tracker-item.cjs.entry.js +19 -0
  9. package/dist/cjs/road-progress-tracker.cjs.entry.js +19 -0
  10. package/dist/cjs/roadtrip.cjs.js +1 -1
  11. package/dist/collection/collection-manifest.json +4 -1
  12. package/dist/collection/components/alert/alert.css +8 -4
  13. package/dist/collection/components/button/button.css +1 -2
  14. package/dist/collection/components/button-floating/button-floating.css +122 -0
  15. package/dist/collection/components/button-floating/button-floating.js +220 -0
  16. package/dist/collection/components/button-floating/button-floating.stories.js +75 -0
  17. package/dist/collection/components/global-navigation/global-navigation.css +1 -0
  18. package/dist/collection/components/icon/icon.css +10 -9
  19. package/dist/collection/components/icon/svg/becommerce-color.svg +1 -0
  20. package/dist/collection/components/icon/svg/becommerce-outline.svg +1 -0
  21. package/dist/collection/components/icon/svg/discount-workshop-color.svg +1 -0
  22. package/dist/collection/components/icon/svg/discount-workshop-outline.svg +1 -0
  23. package/dist/collection/components/icon/svg/discount-workshop-solid.svg +1 -0
  24. package/dist/collection/components/icon/svg/flag-belgium-color.svg +1 -1
  25. package/dist/collection/components/icon/svg/garage-color.svg +1 -1
  26. package/dist/collection/components/icon/svg/garage-house-color.svg +1 -1
  27. package/dist/collection/components/icon/svg/garage-house-outline.svg +1 -1
  28. package/dist/collection/components/icon/svg/garage-outline.svg +1 -1
  29. package/dist/collection/components/icon/svg/keep-in-repair-outline.svg +1 -1
  30. package/dist/collection/components/icon/svg/location-pin-all-color.svg +1 -1
  31. package/dist/collection/components/icon/svg/location-pin-all-outline.svg +1 -1
  32. package/dist/collection/components/icon/svg/location-pin-all-solid.svg +1 -1
  33. package/dist/collection/components/icon/svg/location-pin-color.svg +1 -1
  34. package/dist/collection/components/icon/svg/location-pin-garage-auto5-color.svg +1 -0
  35. package/dist/collection/components/icon/svg/location-pin-garage-auto5-outline.svg +1 -0
  36. package/dist/collection/components/icon/svg/location-pin-garage-auto5-solid.svg +1 -1
  37. package/dist/collection/components/icon/svg/location-pin-garage-color.svg +1 -0
  38. package/dist/collection/components/icon/svg/location-pin-garage-norauto-color.svg +1 -0
  39. package/dist/collection/components/icon/svg/location-pin-garage-norauto-outline.svg +1 -0
  40. package/dist/collection/components/icon/svg/location-pin-garage-norauto-solid.svg +1 -1
  41. package/dist/collection/components/icon/svg/location-pin-garage-outline.svg +1 -0
  42. package/dist/collection/components/icon/svg/location-pin-garage-solid.svg +1 -1
  43. package/dist/collection/components/icon/svg/location-pin-number-outline.svg +1 -0
  44. package/dist/collection/components/icon/svg/location-pin-number-solid.svg +1 -1
  45. package/dist/collection/components/icon/svg/location-pin-outline.svg +1 -1
  46. package/dist/collection/components/icon/svg/location-pin-solid.svg +1 -1
  47. package/dist/collection/components/icon/svg/tire-pressure-color.svg +1 -0
  48. package/dist/collection/components/icon/svg/tire-pressure-outline.svg +1 -0
  49. package/dist/collection/components/{stepper/stepper.css → progress-indicator-horizontal/progress-indicator-horizontal.css} +40 -38
  50. package/dist/collection/components/{stepper/stepper.js → progress-indicator-horizontal/progress-indicator-horizontal.js} +24 -24
  51. package/dist/collection/components/progress-indicator-horizontal/progress-indicator-horizontal.stories.js +201 -0
  52. package/dist/collection/components/progress-tracker/progress-tracker.css +25 -0
  53. package/dist/collection/components/progress-tracker/progress-tracker.js +26 -0
  54. package/dist/collection/components/progress-tracker/progress-tracker.stories.js +264 -0
  55. package/dist/collection/components/progress-tracker-item/progress-tracker-item.css +163 -0
  56. package/dist/collection/components/progress-tracker-item/progress-tracker-item.js +28 -0
  57. package/dist/esm/index-a99a5e7b.js +16 -4
  58. package/dist/esm/loader.js +1 -1
  59. package/dist/esm/road-alert.entry.js +1 -1
  60. package/dist/esm/road-badge_14.entry.js +2 -2
  61. package/dist/esm/road-button-floating.entry.js +62 -0
  62. package/dist/esm/road-global-navigation.entry.js +1 -1
  63. package/dist/esm/road-progress-indicator-horizontal.entry.js +36 -0
  64. package/dist/esm/road-progress-tracker-item.entry.js +15 -0
  65. package/dist/esm/road-progress-tracker.entry.js +15 -0
  66. package/dist/esm/roadtrip.js +1 -1
  67. package/dist/html.html-data.json +162 -92
  68. package/dist/icons/icons.svg +1 -1
  69. package/dist/icons/index.d.ts +14 -1
  70. package/dist/icons/index.js +79 -64
  71. package/dist/roadtrip/p-00762fb0.entry.js +1 -0
  72. package/dist/roadtrip/p-47472e0c.entry.js +1 -0
  73. package/dist/roadtrip/p-604b9899.entry.js +1 -0
  74. package/dist/roadtrip/{p-dd9eea16.entry.js → p-72612490.entry.js} +1 -1
  75. package/dist/roadtrip/p-b3f165f4.entry.js +1 -0
  76. package/dist/roadtrip/p-b68c2056.entry.js +1 -0
  77. package/dist/roadtrip/p-e51617fb.entry.js +1 -0
  78. package/dist/roadtrip/roadtrip.css +1 -1
  79. package/dist/roadtrip/roadtrip.esm.js +1 -1
  80. package/dist/roadtrip/svg/becommerce-color.svg +1 -0
  81. package/dist/roadtrip/svg/becommerce-outline.svg +1 -0
  82. package/dist/roadtrip/svg/discount-workshop-color.svg +1 -0
  83. package/dist/roadtrip/svg/discount-workshop-outline.svg +1 -0
  84. package/dist/roadtrip/svg/discount-workshop-solid.svg +1 -0
  85. package/dist/roadtrip/svg/flag-belgium-color.svg +1 -1
  86. package/dist/roadtrip/svg/garage-color.svg +1 -1
  87. package/dist/roadtrip/svg/garage-house-color.svg +1 -1
  88. package/dist/roadtrip/svg/garage-house-outline.svg +1 -1
  89. package/dist/roadtrip/svg/garage-outline.svg +1 -1
  90. package/dist/roadtrip/svg/keep-in-repair-outline.svg +1 -1
  91. package/dist/roadtrip/svg/location-pin-all-color.svg +1 -1
  92. package/dist/roadtrip/svg/location-pin-all-outline.svg +1 -1
  93. package/dist/roadtrip/svg/location-pin-all-solid.svg +1 -1
  94. package/dist/roadtrip/svg/location-pin-color.svg +1 -1
  95. package/dist/roadtrip/svg/location-pin-garage-auto5-color.svg +1 -0
  96. package/dist/roadtrip/svg/location-pin-garage-auto5-outline.svg +1 -0
  97. package/dist/roadtrip/svg/location-pin-garage-auto5-solid.svg +1 -1
  98. package/dist/roadtrip/svg/location-pin-garage-color.svg +1 -0
  99. package/dist/roadtrip/svg/location-pin-garage-norauto-color.svg +1 -0
  100. package/dist/roadtrip/svg/location-pin-garage-norauto-outline.svg +1 -0
  101. package/dist/roadtrip/svg/location-pin-garage-norauto-solid.svg +1 -1
  102. package/dist/roadtrip/svg/location-pin-garage-outline.svg +1 -0
  103. package/dist/roadtrip/svg/location-pin-garage-solid.svg +1 -1
  104. package/dist/roadtrip/svg/location-pin-number-outline.svg +1 -0
  105. package/dist/roadtrip/svg/location-pin-number-solid.svg +1 -1
  106. package/dist/roadtrip/svg/location-pin-outline.svg +1 -1
  107. package/dist/roadtrip/svg/location-pin-solid.svg +1 -1
  108. package/dist/roadtrip/svg/tire-pressure-color.svg +1 -0
  109. package/dist/roadtrip/svg/tire-pressure-outline.svg +1 -0
  110. package/dist/types/components/button-floating/button-floating.d.ts +48 -0
  111. package/dist/types/components/{stepper/stepper.d.ts → progress-indicator-horizontal/progress-indicator-horizontal.d.ts} +13 -13
  112. package/dist/types/components/progress-tracker/progress-tracker.d.ts +11 -0
  113. package/dist/types/components/progress-tracker-item/progress-tracker-item.d.ts +14 -0
  114. package/dist/types/components.d.ts +168 -85
  115. package/icons/icons.svg +1 -1
  116. package/icons/index.d.ts +14 -1
  117. package/icons/index.js +79 -64
  118. package/package.json +1 -1
  119. package/dist/cjs/road-stepper.cjs.entry.js +0 -40
  120. package/dist/collection/components/stepper/stepper.stories.js +0 -201
  121. package/dist/esm/road-stepper.entry.js +0 -36
  122. package/dist/roadtrip/p-2ebc384d.entry.js +0 -1
  123. package/dist/roadtrip/p-91dacad4.entry.js +0 -1
  124. package/dist/roadtrip/p-e6e9d15a.entry.js +0 -1
@@ -0,0 +1 @@
1
+ <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M22.68 24.39h5.88l.66 4.03h2.53l-2.52-15.5h-2.57l-9.31 15.5h2.92l2.42-4.03h-.01Zm4.63-7.7.85 5.2h-3.97l3.13-5.2h-.01ZM37.94 29.35c2.61 0 4.67-1.27 5.81-3.59.86-1.75.9-3.83.11-5.3-.63-1.18-1.76-1.94-3.17-2.13-.94-.13-1.78-.04-2.52.15l.99-2.68h6.23l.45-2.5h-8.42l-3.24 8.75h2.56c.06-.06 1.49-1.53 3.62-1.24.62.08 1.04.35 1.3.83.41.76.35 2.01-.15 3.03-.71 1.45-1.91 2.19-3.56 2.19-.79 0-1.5-.27-1.87-.7-.29-.34-.38-.79-.28-1.39h-2.51c-.13 1.45.39 2.43.88 3.01.85 1 2.23 1.58 3.78 1.58l-.01-.01Z"/><path d="M32.25 1C19.43 1 9 11.43 9 24.25c0 9.59 5.05 15.19 10.4 21.1 4.52 5 9.18 10.16 11.65 18.37h2.39c2.46-8.2 7.13-13.37 11.65-18.37 5.35-5.92 10.4-11.51 10.4-21.11C55.5 11.43 45.07 1 32.25 1Zm10.99 42.68c-3.87 4.29-8.19 9.07-10.99 15.93-2.8-6.86-7.12-11.64-10.99-15.93-5.24-5.79-9.76-10.8-9.76-19.43 0-11.44 9.31-20.75 20.75-20.75S53 12.81 53 24.25c0 8.63-4.52 13.64-9.76 19.43Z"/><path d="M46.79 30.67c-.53-.44-1.32-.37-1.76.16-.04.05-4.42 5.17-12.82 5.17s-12.6-4.96-12.78-5.17c-.44-.53-1.23-.6-1.76-.16-.53.44-.61 1.23-.17 1.76.21.25 5.14 6.07 14.7 6.07 9.56 0 14.53-5.82 14.74-6.07.44-.53.37-1.32-.16-1.76h.01Z" fill="var(--road-icon-variant, rgb(252, 183, 49))"/></svg>
@@ -0,0 +1 @@
1
+ <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M22.68 24.39h5.88l.66 4.03h2.53l-2.52-15.5h-2.57l-9.31 15.5h2.92l2.42-4.03h-.01Zm4.63-7.7.85 5.2h-3.97l3.13-5.2h-.01ZM37.94 29.35c2.61 0 4.67-1.27 5.81-3.59.86-1.75.9-3.83.11-5.3-.63-1.18-1.76-1.94-3.17-2.13-.94-.13-1.78-.04-2.52.15l.99-2.68h6.23l.45-2.5h-8.42l-3.24 8.75h2.56c.06-.06 1.49-1.53 3.62-1.24.62.08 1.04.35 1.3.83.41.76.35 2.01-.15 3.03-.71 1.45-1.91 2.19-3.56 2.19-.79 0-1.5-.27-1.87-.7-.29-.34-.38-.79-.28-1.39h-2.51c-.13 1.45.39 2.43.88 3.01.85 1 2.23 1.58 3.78 1.58l-.01-.01Z"/><path d="M32.25 1C19.43 1 9 11.43 9 24.25c0 9.59 5.05 15.19 10.4 21.1 4.52 5 9.18 10.16 11.65 18.37h2.39c2.46-8.2 7.13-13.37 11.65-18.37 5.35-5.92 10.4-11.51 10.4-21.11C55.5 11.43 45.07 1 32.25 1Zm10.99 42.68c-3.87 4.29-8.19 9.07-10.99 15.93-2.8-6.86-7.12-11.64-10.99-15.93-5.24-5.79-9.76-10.8-9.76-19.43 0-11.44 9.31-20.75 20.75-20.75S53 12.81 53 24.25c0 8.63-4.52 13.64-9.76 19.43Z"/><path d="M46.79 30.67c-.53-.44-1.32-.37-1.76.16-.04.05-4.42 5.17-12.82 5.17s-12.6-4.96-12.78-5.17c-.44-.53-1.23-.6-1.76-.16-.53.44-.61 1.23-.17 1.76.21.25 5.14 6.07 14.7 6.07 9.56 0 14.53-5.82 14.74-6.07.44-.53.37-1.32-.16-1.76h.01Z"/></svg>
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M26.176 18.167h-.042l-3.568 6.643h4.279l-.669-6.643Z"/><path d="M32 2C19.2 2 8.8 12 8.8 24.4 8.8 36.8 17.2 46 26.4 56c1.2 1.2 5.6 6 5.6 6s4.4-4.8 5.6-6c9.2-10 17.6-19.2 17.6-31.6C55.2 12 44.8 2 32 2Zm2.165 25.363h3.449a2.283 2.283 0 0 0 .336 1.708 2.124 2.124 0 0 0 1.617.5c1.888 0 3.079-1.088 3.542-3.267.095-.42.144-.85.147-1.28a1.923 1.923 0 0 0-2.144-2.2 2.969 2.969 0 0 0-2.518 1.312H35.37l3.749-9.749 9.471.008-.676 3.066-7.3-.006-1.385 3.628a7.64 7.64 0 0 1 3.618-.986 3.846 3.846 0 0 1 3 1.239 4.637 4.637 0 0 1 1.11 3.236 6.96 6.96 0 0 1-.181 1.55 7.9 7.9 0 0 1-2.824 4.57 7.608 7.608 0 0 1-4.979 1.805 5.626 5.626 0 0 1-3.56-1.138 3.449 3.449 0 0 1-1.447-2.832c0-.396.068-.79.199-1.164ZM24.972 14.38h4.049l2.344 16.792h-3.809l-.345-3.463h-6.193l-1.915 3.463H15.41l9.562-16.792Zm6.966 26.667c-9.177 0-16.554-6.294-16.554-7.044s7.377 4.352 16.554 4.352 16.678-5.089 16.678-4.352c0 .737-7.501 7.044-16.678 7.044Z"/></svg>
1
+ <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M32.25 1C19.43 1 9 11.43 9 24.25c0 9.59 5.05 15.19 10.4 21.1 4.52 5 9.18 10.16 11.65 18.37h2.39c2.46-8.2 7.13-13.37 11.65-18.37 5.35-5.92 10.4-11.51 10.4-21.11C55.5 11.43 45.07 1 32.25 1Zm1.66 24.75h3.45c-.12.59 0 1.21.34 1.71.22.19.48.33.76.42.28.09.57.11.86.08 1.89 0 3.08-1.09 3.54-3.27.09-.42.14-.85.15-1.28.05-.29.02-.6-.07-.88a2.1 2.1 0 0 0-.45-.76c-.21-.21-.46-.38-.74-.47-.28-.1-.58-.13-.88-.09-.5 0-.99.11-1.43.34-.44.23-.82.56-1.09.98h-3.22l3.75-9.75h9.47l-.68 3.07h-7.3l-1.39 3.62c1.11-.62 2.35-.96 3.62-.99a3.846 3.846 0 0 1 3 1.24c.77.9 1.17 2.06 1.11 3.24 0 .52-.06 1.04-.18 1.55a7.932 7.932 0 0 1-2.82 4.57 7.634 7.634 0 0 1-4.98 1.81c-1.28.04-2.54-.36-3.56-1.14a3.456 3.456 0 0 1-1.45-2.83c0-.4.07-.79.2-1.16l-.01-.01Zm-9.19-12.98h4.05l2.34 16.79H27.3l-.34-3.46h-6.19l-1.91 3.46h-3.69l9.55-16.79Zm-5.75 17.79-.06.1-.16-.1h.22Zm12.71 8.88c-9.18 0-16.55-6.29-16.55-7.04s7.38 4.35 16.55 4.35c9.17 0 16.68-5.09 16.68-4.35 0 .74-7.5 7.04-16.68 7.04Z"/><path d="M25.92 16.56h-.04l-3.57 6.64h4.28l-.67-6.64Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="m41.33 27.67-1.45-4.31c-.3-.91-1.15-1.52-2.11-1.52H26.74c-.96 0-1.81.61-2.11 1.52l-1.45 4.31h-.24c-.69 0-1.25.56-1.25 1.25 0 .65.51 1.17 1.14 1.23v7.46a1.25 1.25 0 0 0 2.5 0v-.85h13.86v.85a1.25 1.25 0 0 0 2.5 0v-7.46a1.24 1.24 0 0 0 1.14-1.23c0-.69-.56-1.25-1.25-1.25h-.25Zm-14.4-3.33h10.64l1.12 3.33H25.81l1.12-3.33Zm-1.61 5.83h13.86v4.08H25.32v-4.08Z"/><path d="M32.25 1C19.43 1 9 11.43 9 24.25c0 9.59 5.05 15.19 10.4 21.11 4.52 5 9.18 10.16 11.65 18.37h2.39c2.46-8.2 7.13-13.37 11.65-18.37 5.35-5.92 10.4-11.51 10.4-21.1C55.5 11.43 45.07 1 32.25 1Zm10.99 42.68c-3.87 4.29-8.19 9.07-10.99 15.93-2.8-6.86-7.12-11.64-10.99-15.93-5.24-5.79-9.76-10.8-9.76-19.43 0-11.44 9.31-20.75 20.75-20.75S53 12.81 53 24.25c0 8.63-4.52 13.63-9.76 19.43Z"/><path d="M48.58 16.53h-4.46v-5.89H20.34v5.89h-4.42v2.5h1.05v15.71h2.5V19.03h25.51v15.71h2.5V19.03h1.09v-2.5h.01Zm-25.73 0v-3.39h18.77v3.39H22.84h.01Z" fill="var(--road-icon-variant, rgb(252, 183, 49))"/><path d="M37.05 33.51a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5ZM27.45 33.51a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Z" fill="var(--road-icon-variant, rgb(252, 183, 49))"/></svg>
@@ -0,0 +1 @@
1
+ <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="m35.67 27.23-5.88-8.98c-.28-.42-.75-.68-1.25-.68h-1.71l-1.95 13.35h2.53l1.41-9.62 5.86 8.94c.28.42.75.68 1.25.68h1.75l1.91-13.35h-2.53l-1.38 9.66h-.01Z"/><path d="M32.25 1C19.43 1 9 11.43 9 24.25c0 9.59 5.05 15.19 10.4 21.1 4.52 5 9.18 10.16 11.65 18.37h2.39c2.46-8.2 7.13-13.37 11.65-18.37 5.35-5.92 10.4-11.51 10.4-21.11C55.5 11.43 45.07 1 32.25 1Zm10.99 42.68c-3.87 4.29-8.19 9.07-10.99 15.93-2.8-6.86-7.12-11.64-10.99-15.93-5.24-5.79-9.76-10.8-9.76-19.43 0-11.44 9.31-20.75 20.75-20.75S53 12.81 53 24.25c0 8.63-4.52 13.64-9.76 19.43Z"/><path d="M44.15 13.94c-2.46-3.02-5.97-4.87-9.88-5.21-4.18-.36-8.29 1.01-11.58 3.87-6.55 5.69-7.62 15.54-2.4 21.96 2.46 3.02 5.97 4.87 9.88 5.21.44.04.88.06 1.31.06 3.72 0 7.32-1.37 10.27-3.93 6.55-5.69 7.62-15.54 2.4-21.96Zm-4.04 20.07c-2.77 2.41-6.23 3.57-9.72 3.27-3.23-.28-6.13-1.81-8.16-4.3-4.38-5.39-3.44-13.68 2.1-18.49 2.49-2.16 5.52-3.31 8.63-3.31.36 0 .73.02 1.09.05 3.23.28 6.13 1.81 8.15 4.3 4.38 5.38 3.44 13.68-2.1 18.49l.01-.01Z" fill="var(--road-icon-variant, rgb(252, 183, 49))"/></svg>
@@ -0,0 +1 @@
1
+ <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="m35.67 27.23-5.88-8.98c-.28-.42-.75-.68-1.25-.68h-1.71l-1.95 13.35h2.53l1.41-9.62 5.86 8.94c.28.42.75.68 1.25.68h1.75l1.91-13.35h-2.53l-1.38 9.66h-.01Z"/><path d="M32.25 1C19.43 1 9 11.43 9 24.25c0 9.59 5.05 15.19 10.4 21.1 4.52 5 9.18 10.16 11.65 18.37h2.39c2.46-8.2 7.13-13.37 11.65-18.37 5.35-5.92 10.4-11.51 10.4-21.11C55.5 11.43 45.07 1 32.25 1Zm10.99 42.68c-3.87 4.29-8.19 9.07-10.99 15.93-2.8-6.86-7.12-11.64-10.99-15.93-5.24-5.79-9.76-10.8-9.76-19.43 0-11.44 9.31-20.75 20.75-20.75S53 12.81 53 24.25c0 8.63-4.52 13.64-9.76 19.43Z"/><path d="M44.15 13.94c-2.46-3.02-5.97-4.87-9.88-5.21-4.18-.36-8.29 1.01-11.58 3.87-6.55 5.69-7.62 15.54-2.4 21.96 2.46 3.02 5.97 4.87 9.88 5.21.44.04.88.06 1.31.06 3.72 0 7.32-1.37 10.27-3.93 6.55-5.69 7.62-15.54 2.4-21.96Zm-4.04 20.07c-2.77 2.41-6.23 3.57-9.72 3.27-3.23-.28-6.13-1.81-8.16-4.3-4.38-5.39-3.44-13.68 2.1-18.49 2.49-2.16 5.52-3.31 8.63-3.31.36 0 .73.02 1.09.05 3.23.28 6.13 1.81 8.15 4.3 4.38 5.38 3.44 13.68-2.1 18.49l.01-.01Z"/></svg>
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M33.535 14.019c-5.528 0-10.5 4.008-11.47 10.778-.97 6.77 2.9 10.64 8.428 10.64 5.528 0 10.5-3.869 11.47-10.64.968-6.771-2.901-10.778-8.428-10.778ZM37.2 30.946h-1.763a1.576 1.576 0 0 1-1.458-.652l-4.893-7.348-1.125 8h-2.838l1.8-12.307h1.533c1 0 1.3.077 1.688.652l4.846 7.4 1.135-8.092h2.837L37.2 30.946Z"/><path d="M32 2C19.2 2 8.8 12 8.8 24.4 8.8 36.8 17.2 46 26.4 56c1.2 1.2 5.6 6 5.6 6s4.4-4.8 5.6-6c9.2-10 17.6-19.2 17.6-31.6C55.2 12 44.8 2 32 2Zm-2.487 40.292c-9.766 0-16.79-6.9-15.242-17.5A20.352 20.352 0 0 1 34.514 7.168c9.766 0 16.672 7.025 15.244 17.624a20.334 20.334 0 0 1-20.245 17.5Z"/></svg>
1
+ <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M33.75 13.8c-5.39 0-10.24 3.91-11.19 10.51-.95 6.6 2.83 10.38 8.22 10.38 5.39 0 10.24-3.77 11.19-10.38.94-6.6-2.83-10.51-8.22-10.51Zm3.57 16.51H35.6c-.27.03-.55-.01-.8-.12s-.47-.29-.62-.51l-4.77-7.17-1.1 7.8h-2.77l1.76-12h1.5c.98 0 1.27.07 1.65.64l4.73 7.22 1.11-7.89h2.77l-1.72 12.04-.02-.01Z"/><path d="M32.25 1C19.43 1 9 11.43 9 24.25c0 9.59 5.05 15.19 10.4 21.1 4.52 5 9.18 10.16 11.65 18.37h2.39c2.46-8.2 7.13-13.37 11.65-18.37 5.35-5.92 10.4-11.51 10.4-21.11C55.5 11.43 45.07 1 32.25 1ZM42.9 36.55a19.864 19.864 0 0 1-13.08 4.83c-9.52 0-16.37-6.73-14.86-17.07.65-4.77 3-9.15 6.64-12.31 3.63-3.16 8.29-4.9 13.11-4.88 9.52 0 16.26 6.85 14.87 17.19-.67 4.75-3.04 9.1-6.67 12.24h-.01Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="m41.33 27.67-1.45-4.31c-.3-.91-1.15-1.52-2.11-1.52H26.74c-.96 0-1.81.61-2.11 1.52l-1.45 4.31h-.24c-.69 0-1.25.56-1.25 1.25 0 .65.51 1.17 1.14 1.23v7.46a1.25 1.25 0 0 0 2.5 0v-.85h13.86v.85a1.25 1.25 0 0 0 2.5 0v-7.46a1.24 1.24 0 0 0 1.14-1.23c0-.69-.56-1.25-1.25-1.25h-.25Zm-14.4-3.33h10.64l1.12 3.33H25.81l1.12-3.33Zm-1.61 5.83h13.86v4.08H25.32v-4.08Z"/><path d="M32.25 1C19.43 1 9 11.43 9 24.25c0 9.59 5.05 15.19 10.4 21.11 4.52 5 9.18 10.16 11.65 18.37h2.39c2.46-8.2 7.13-13.37 11.65-18.37 5.35-5.92 10.4-11.51 10.4-21.1C55.5 11.43 45.07 1 32.25 1Zm10.99 42.68c-3.87 4.29-8.19 9.07-10.99 15.93-2.8-6.86-7.12-11.64-10.99-15.93-5.24-5.79-9.76-10.8-9.76-19.43 0-11.44 9.31-20.75 20.75-20.75S53 12.81 53 24.25c0 8.63-4.52 13.63-9.76 19.43Z"/><path d="M48.58 16.53h-4.46v-5.89H20.34v5.89h-4.42v2.5h1.05v15.71h2.5V19.03h25.51v15.71h2.5V19.03h1.09v-2.5h.01Zm-25.73 0v-3.39h18.77v3.39H22.84h.01Z"/><path d="M37.05 33.51a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5ZM27.45 33.51a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Z"/></svg>
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M43.127 22.509H20.961v1.013h22.166v-1.013Zm-6.661 10.01h-.386a1.166 1.166 0 1 0 1.015.329 1.132 1.132 0 0 0-.629-.329Z"/><path d="M32 2C19.2 2 8.8 12 8.8 24.4 8.8 36.8 17.2 46 26.4 56c1.2 1.2 5.6 6 5.6 6s4.4-4.8 5.6-6c9.2-10 17.6-19.2 17.6-31.6C55.2 12 44.8 2 32 2Zm8.364 29.969a.55.55 0 0 1-.55.55h-.799v5.46a.75.75 0 0 1-.767.767h-.8a.748.748 0 0 1-.767-.767v-.8h-9.35v.8a.75.75 0 0 1-.767.767h-.8a.75.75 0 0 1-.767-.767v-5.46h-.8a.548.548 0 0 1-.55-.55v-.448a.548.548 0 0 1 .55-.55h1.065l1.344-3.912a1.041 1.041 0 0 1 1.133-.767h8.546a1.04 1.04 0 0 1 1.132.767l1.345 3.912h1.065a.549.549 0 0 1 .549.55l-.012.448Zm6.053 5.188h-3.291V24.649H20.961v12.508h-3.378V15.308a1.489 1.489 0 0 1 .46-1.113 1.528 1.528 0 0 1 1.1-.449H44.86a1.53 1.53 0 0 1 1.559 1.562l-.002 21.849Z"/><path d="m27.727 27.461-1.169 3.506h10.884l-1.17-3.506h-8.545Zm.192 5.058h-.385a1.15 1.15 0 1 0 .385 0Zm15.208-12.092H20.961v.983h22.166v-.983Z"/></svg>
1
+ <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M26.96 33.37a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5ZM37.56 33.37a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5ZM37.58 24.19H26.94l-1.12 3.33H38.7l-1.12-3.33Z"/><path d="M32.25 1C19.43 1 9 11.43 9 24.25c0 9.59 5.05 15.19 10.4 21.11 4.52 5 9.18 10.16 11.65 18.37h2.39c2.46-8.2 7.13-13.37 11.65-18.37 5.35-5.92 10.4-11.51 10.4-21.1C55.5 11.43 45.07 1 32.25 1Zm9.44 29v7.46a1.25 1.25 0 0 1-2.5 0v-.85H25.33v.85a1.25 1.25 0 0 1-2.5 0V30c-.63-.06-1.14-.58-1.14-1.23 0-.69.56-1.25 1.25-1.25h.25l1.45-4.31c.3-.91 1.15-1.52 2.11-1.52h11.03c.96 0 1.8.61 2.11 1.52l1.45 4.31h.24c.69 0 1.25.56 1.25 1.25 0 .65-.5 1.17-1.14 1.23Zm6.89-11.11h-1.09V34.6h-2.5V18.89H19.48V34.6h-2.5V18.89h-1.05v-2.5h4.42V11.5h23.77v4.89h4.46v2.5Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M30.67 58.34c-2.07-6.9-6.01-11.26-9.82-15.47-4.55-5.04-8.85-9.8-8.85-18C12 14.29 21.29 5 31.87 5c10.58 0 19.87 9.29 19.87 19.87 0 8.19-4.3 12.95-8.86 17.99-3.81 4.21-7.75 8.57-9.82 15.47h-2.39v.01Zm1.2-50.84c-9.25 0-17.37 8.12-17.37 17.37 0 7.23 3.8 11.44 8.21 16.32 3.21 3.55 6.78 7.5 9.16 13.11 2.38-5.61 5.95-9.56 9.16-13.11 4.41-4.87 8.21-9.08 8.21-16.32 0-9.25-8.12-17.37-17.37-17.37Z"/></svg>
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M44.919 11.075a18.225 18.225 0 0 0-12.891-5.3H32a18.188 18.188 0 0 0-18.266 18.05c0 11.482 13.244 28.346 17.3 33.242l.966 1.16.962-1.16c4.059-4.896 17.3-21.756 17.3-33.216a17.845 17.845 0 0 0-5.343-12.776Z"/></svg>
1
+ <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M31.87 5C21.29 5 12 14.29 12 24.87c0 8.19 4.3 12.95 8.86 17.99 3.81 4.21 7.75 8.57 9.82 15.47h2.39c2.07-6.9 6.01-11.26 9.82-15.47 4.55-5.04 8.86-9.8 8.86-17.99C51.74 14.29 42.46 5 31.87 5Z"/></svg>
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32 32.202a7.9 7.9 0 1 1 7.9-7.9 7.911 7.911 0 0 1-7.9 7.9Zm0-13.3a5.4 5.4 0 1 0 3.817 1.581A5.409 5.409 0 0 0 32 18.898v.004Z"/><path d="m32 58.452-.962-1.16c-4.06-4.9-17.3-21.76-17.3-33.242A18.188 18.188 0 0 1 32 6h.028a18.225 18.225 0 0 1 12.891 5.3 17.842 17.842 0 0 1 5.346 12.772c0 11.46-13.244 28.32-17.3 33.215L32 58.452ZM32 8.5a15.685 15.685 0 0 0-15.766 15.551c0 8.121 7.966 20.837 15.766 30.47 7.795-9.63 15.765-22.337 15.765-30.449a15.373 15.373 0 0 0-4.6-11A15.742 15.742 0 0 0 32.026 8.5H32Z"/></svg>
1
+ <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M30.67 58.34c-2.07-6.9-6.01-11.26-9.82-15.47-4.55-5.04-8.85-9.8-8.85-18C12 14.29 21.29 5 31.87 5c10.58 0 19.87 9.29 19.87 19.87 0 8.19-4.3 12.95-8.86 17.99-3.81 4.21-7.75 8.57-9.82 15.47h-2.39v.01Zm1.2-50.84c-9.25 0-17.37 8.12-17.37 17.37 0 7.23 3.8 11.44 8.21 16.32 3.21 3.55 6.78 7.5 9.16 13.11 2.38-5.61 5.95-9.56 9.16-13.11 4.41-4.87 8.21-9.08 8.21-16.32 0-9.25-8.12-17.37-17.37-17.37Z"/><path d="M31.9 32.28c-4.13 0-7.48-3.33-7.48-7.43s3.36-7.43 7.48-7.43c4.12 0 7.48 3.33 7.48 7.43s-3.36 7.43-7.48 7.43Zm0-12.36c-2.75 0-4.98 2.21-4.98 4.93 0 2.72 2.24 4.93 4.98 4.93s4.98-2.21 4.98-4.93c0-2.72-2.24-4.93-4.98-4.93Z"/></svg>
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M44.919 11.075a18.225 18.225 0 0 0-12.891-5.3H32a18.188 18.188 0 0 0-18.266 18.05c0 11.482 13.244 28.346 17.3 33.242l.966 1.16.962-1.16c4.059-4.896 17.3-21.756 17.3-33.216a17.845 17.845 0 0 0-5.343-12.776ZM32 31.232a7.158 7.158 0 1 1 7.159-7.157A7.166 7.166 0 0 1 32 31.232Z"/></svg>
1
+ <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M31.87 5C21.29 5 12 14.29 12 24.87c0 8.19 4.3 12.95 8.86 17.99 3.81 4.21 7.75 8.57 9.82 15.47h2.39c2.07-6.9 6.01-11.26 9.82-15.47 4.55-5.04 8.86-9.8 8.86-17.99C51.74 14.29 42.46 5 31.87 5Zm.03 26.03c-3.44 0-6.23-2.77-6.23-6.18 0-3.41 2.79-6.18 6.23-6.18 3.44 0 6.23 2.77 6.23 6.18 0 3.41-2.79 6.18-6.23 6.18Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M54.49 16.24c-.91-1.11-1.41-2.44-1.41-3.77V7.69h-2.5v4.78c0 1.9.7 3.8 1.97 5.35 7.84 9.56 7.15 23.37-1.61 32.13l-.37.37v5.09c0 .96-.79 1.75-1.75 1.75h-3.68v-5.35h-2.5v5.35h-5.43v-5.35h-2.5v5.35h-5.43v-5.35h-2.5v5.35h-5.43v-5.35h-2.5v5.35h-3.68c-.96 0-1.75-.79-1.75-1.75v-5.09l-.37-.37C4.3 41.2 3.6 27.38 11.44 17.82c1.27-1.55 1.98-3.45 1.98-5.35V7.31h-2.5v5.16c0 1.32-.5 2.66-1.41 3.77-8.55 10.42-7.92 25.42 1.41 35.11v4.06a4.26 4.26 0 0 0 4.25 4.25h33.67a4.26 4.26 0 0 0 4.25-4.25v-4.06a26.375 26.375 0 0 0 1.41-35.11h-.01Z"/><path d="M33.25 15.12h-2.5v14h2.5v-14ZM33.25 33.55h-2.5v3.33h2.5v-3.33Z"/><path d="M11.53 39.17c1.58 4.77 6.16 7.97 11.38 7.97h18.16c5.36 0 10.14-3.57 11.62-8.68 1.99-6.84.1-14.21-4.92-19.23a5.701 5.701 0 0 1-1.68-4.07V7.69h-2.5v7.47c0 2.2.86 4.28 2.42 5.83 4.38 4.38 6.02 10.8 4.29 16.76-1.17 4.05-4.97 6.88-9.22 6.88H22.92c-4.14 0-7.76-2.51-9-6.26-2.04-6.15-.48-12.81 4.09-17.38a8.193 8.193 0 0 0 2.42-5.83V7.31h-2.5v7.85c0 1.51-.61 3-1.68 4.07-5.24 5.24-7.04 12.88-4.7 19.94h-.02Z" fill="var(--road-icon-variant, rgb(252, 183, 49))"/></svg>
@@ -0,0 +1 @@
1
+ <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M54.49 16.24c-.91-1.11-1.41-2.44-1.41-3.77V7.69h-2.5v4.78c0 1.9.7 3.8 1.97 5.35 7.84 9.56 7.15 23.37-1.61 32.13l-.37.37v5.09c0 .96-.79 1.75-1.75 1.75h-3.68v-5.35h-2.5v5.35h-5.43v-5.35h-2.5v5.35h-5.43v-5.35h-2.5v5.35h-5.43v-5.35h-2.5v5.35h-3.68c-.96 0-1.75-.79-1.75-1.75v-5.09l-.37-.37C4.3 41.2 3.6 27.38 11.44 17.82c1.27-1.55 1.98-3.45 1.98-5.35V7.31h-2.5v5.16c0 1.32-.5 2.66-1.41 3.77-8.55 10.42-7.92 25.42 1.41 35.11v4.06a4.26 4.26 0 0 0 4.25 4.25h33.67a4.26 4.26 0 0 0 4.25-4.25v-4.06a26.375 26.375 0 0 0 1.41-35.11h-.01Z"/><path d="M33.25 15.12h-2.5v14h2.5v-14ZM33.25 33.55h-2.5v3.33h2.5v-3.33Z"/><path d="M11.53 39.17c1.58 4.77 6.16 7.97 11.38 7.97h18.16c5.36 0 10.14-3.57 11.62-8.68 1.99-6.84.1-14.21-4.92-19.23a5.701 5.701 0 0 1-1.68-4.07V7.69h-2.5v7.47c0 2.2.86 4.28 2.42 5.83 4.38 4.38 6.02 10.8 4.29 16.76-1.17 4.05-4.97 6.88-9.22 6.88H22.92c-4.14 0-7.76-2.51-9-6.26-2.04-6.15-.48-12.81 4.09-17.38a8.193 8.193 0 0 0 2.42-5.83V7.31h-2.5v7.85c0 1.51-.61 3-1.68 4.07-5.24 5.24-7.04 12.88-4.7 19.94h-.02Z"/></svg>
@@ -1,5 +1,5 @@
1
1
  /*
2
- * Stepper
2
+ * Progress-indicator-horizontal
3
3
  *
4
4
  * Index
5
5
  * - Item
@@ -13,10 +13,10 @@
13
13
  display: block;
14
14
  }
15
15
 
16
- /* STEPPER
16
+ /* PROGRESS INDICATOR HORIZONTAL
17
17
  -------------------- */
18
18
 
19
- .stepper {
19
+ .progress-indicator-horizontal {
20
20
  display: flex;
21
21
  padding-left: 0;
22
22
  margin: 0;
@@ -25,10 +25,10 @@
25
25
  list-style: none;
26
26
  }
27
27
 
28
- /* STEPPER ITEM
28
+ /* PROGRESS INDICATOR HORIZONTAL ITEM
29
29
  -------------------- */
30
30
 
31
- .stepper-item {
31
+ .progress-indicator-horizontal-item {
32
32
  display: flex;
33
33
  flex: 1;
34
34
  flex-direction: column;
@@ -40,18 +40,19 @@
40
40
  */
41
41
 
42
42
 
43
- .stepper-item:not(:last-child)::after {
43
+ .progress-indicator-horizontal-item:not(:last-child)::after {
44
44
  position: relative;
45
45
  top: 1rem;
46
- left: 50%;
46
+ left: calc(50% + 16px);
47
47
  order: -1;
48
+ width: calc(100% - 32px);
48
49
  height: 2px;
49
50
  content: "";
50
51
  background: var(--road-surface-disabled);
51
52
  }
52
53
 
53
- .stepper-outline-light .stepper-item:not(:last-child)::after,
54
- .stepper-secondary-outline-light .stepper-item:not(:last-child)::after {
54
+ .progress-indicator-horizontal-outline-light .progress-indicator-horizontal-item:not(:last-child)::after,
55
+ .progress-indicator-horizontal-secondary-outline-light .progress-indicator-horizontal-item:not(:last-child)::after {
55
56
  left: calc(50% + calc(2rem / 2));
56
57
  width: calc(100% - 2rem);
57
58
  }
@@ -61,14 +62,14 @@
61
62
  */
62
63
 
63
64
 
64
- .stepper-item:not(.completed) .stepper-link {
65
+ .progress-indicator-horizontal-item:not(.completed) .progress-indicator-horizontal-link {
65
66
  cursor: not-allowed;
66
67
  }
67
68
 
68
- /* STEPPER LINK
69
+ /* PROGRESS INDICATOR HORIZONTAL LINK
69
70
  -------------------- */
70
71
 
71
- .stepper-link {
72
+ .progress-indicator-horizontal-link {
72
73
  z-index: 1;
73
74
  display: flex;
74
75
  flex-direction: column;
@@ -76,10 +77,10 @@
76
77
  text-decoration: none;
77
78
  }
78
79
 
79
- /* STEPPER ICON
80
+ /* PROGRESS INDICATOR HORIZONTAL ICON
80
81
  -------------------- */
81
82
 
82
- .stepper-icon {
83
+ .progress-indicator-horizontal-icon {
83
84
  display: inline-flex;
84
85
  align-items: center;
85
86
  justify-content: center;
@@ -88,17 +89,17 @@
88
89
  font-size: var(--road-button-medium);
89
90
  font-weight: 700;
90
91
  color: var(--road-on-surface-disabled);
91
- background: var(--road-surface-inverse);
92
+ background: var(--road-surface-disabled);
92
93
  border-radius: 50%;
93
94
  fill: currentColor;
94
95
  }
95
96
 
96
- ::slotted(.stepper-icon) road-icon{
97
+ ::slotted(.progress-indicator-horizontal-icon) road-icon{
97
98
  color: var(--road-secondary-600);
98
99
  }
99
100
 
100
- .stepper-outline .stepper-icon,
101
- .stepper-secondary.stepper-outline .stepper-icon {
101
+ .progress-indicator-horizontal-outline .progress-indicator-horizontal-icon,
102
+ .progress-indicator-horizontal-secondary.progress-indicator-horizontal-outline .progress-indicator-horizontal-icon {
102
103
  width: calc(2rem - 4px);
103
104
  height: calc(2rem - 4px);
104
105
  color: var(--road-on-surface-disabled);
@@ -107,26 +108,26 @@
107
108
  fill: currentColor;
108
109
  }
109
110
 
110
- .stepper-outline-light .stepper-icon,
111
- .stepper-secondary.stepper-outline-light .stepper-icon {
111
+ .progress-indicator-horizontal-outline-light .progress-indicator-horizontal-icon,
112
+ .progress-indicator-horizontal-secondary.progress-indicator-horizontal-outline-light .progress-indicator-horizontal-icon {
112
113
  color: var(--road-on-surface-disabled);
113
114
  background: none;
114
115
  border: 2px solid var(--road-surface-disabled);
115
116
  fill: currentColor;
116
117
  }
117
118
 
118
- /* STEPPER TITLE
119
+ /* PROGRESS INDICATOR HORIZONTAL TITLE
119
120
  -------------------- */
120
121
 
121
- .stepper-title {
122
+ .progress-indicator-horizontal-title {
122
123
  display: block;
123
124
  margin-top: 0.25rem;
124
125
  font-size: var(--road-body-small);
125
126
  font-weight: 700;
126
- color: var(--road-on-surface-weak);
127
+ color: var(--road-on-surface-disabled);
127
128
  }
128
129
 
129
- .stepper-title span{
130
+ .progress-indicator-horizontal-title span{
130
131
  display: block;
131
132
  font-size: var(--road-body-small);
132
133
  font-weight: 400;
@@ -140,14 +141,14 @@
140
141
  background: var(--road-primary);
141
142
  }
142
143
 
143
- .stepper-secondary .completed:not(:last-child)::after,
144
- .stepper-secondary.stepper-outline .completed:not(:last-child)::after,
145
- .stepper-secondary.stepper-outline-light .completed:not(:last-child)::after {
144
+ .progress-indicator-horizontal-secondary .completed:not(:last-child)::after,
145
+ .progress-indicator-horizontal-secondary.progress-indicator-horizontal-outline .completed:not(:last-child)::after,
146
+ .progress-indicator-horizontal-secondary.progress-indicator-horizontal-outline-light .completed:not(:last-child)::after {
146
147
  background: var(--road-secondary);
147
148
  }
148
149
 
149
- .completed .stepper-icon,
150
- .current .stepper-icon {
150
+ .completed .progress-indicator-horizontal-icon,
151
+ .current .progress-indicator-horizontal-icon {
151
152
  width: 2rem;
152
153
  height: 2rem;
153
154
  color: var(--road-on-primary);
@@ -155,25 +156,25 @@
155
156
  border: 0;
156
157
  }
157
158
 
158
- .stepper-outline .completed .stepper-icon {
159
+ .progress-indicator-horizontal-outline .completed .progress-indicator-horizontal-icon {
159
160
  color: var(--road-primary);
160
161
  background: var(--road-surface);
161
162
  border: 2px solid var(--road-primary);
162
163
  }
163
164
 
164
- .stepper-outline-light .completed .stepper-icon {
165
+ .progress-indicator-horizontal-outline-light .completed .progress-indicator-horizontal-icon {
165
166
  color: var(--road-primary);
166
167
  background: none;
167
168
  border: 2px solid var(--road-primary);
168
169
  }
169
170
 
170
- .stepper-secondary .completed .stepper-icon {
171
+ .progress-indicator-horizontal-secondary .completed .progress-indicator-horizontal-icon {
171
172
  color: var(--road-on-secondary);
172
173
  background: var(--road-secondary);
173
174
  border: 0;
174
175
  }
175
176
 
176
- .stepper-secondary.stepper-outline .completed .stepper-icon {
177
+ .progress-indicator-horizontal-secondary.progress-indicator-horizontal-outline .completed .progress-indicator-horizontal-icon {
177
178
  width: calc(2rem - 4px);
178
179
  height: calc(2rem - 4px);
179
180
  color: var(--road-secondary);
@@ -181,7 +182,7 @@
181
182
  border: 2px solid var(--road-secondary);
182
183
  }
183
184
 
184
- .stepper-secondary.stepper-outline-light .completed .stepper-icon {
185
+ .progress-indicator-horizontal-secondary.progress-indicator-horizontal-outline-light .completed .progress-indicator-horizontal-icon {
185
186
  width: calc(2rem - 4px);
186
187
  height: calc(2rem - 4px);
187
188
  color: var(--road-secondary);
@@ -189,7 +190,7 @@
189
190
  border: 2px solid var(--road-secondary);
190
191
  }
191
192
 
192
- .stepper-secondary .current .stepper-icon {
193
+ .progress-indicator-horizontal-secondary .current .progress-indicator-horizontal-icon {
193
194
  width: calc(2rem - 4px);
194
195
  height: calc(2rem - 4px);
195
196
  color: var(--road-grey-900);
@@ -197,17 +198,18 @@
197
198
  border: 2px solid var(--road-secondary);
198
199
  }
199
200
 
200
- .stepper-secondary.stepper-outline .current .stepper-icon {
201
+ .progress-indicator-horizontal-secondary.progress-indicator-horizontal-outline .current .progress-indicator-horizontal-icon {
201
202
  color: var(--road-on-secondary);
202
203
  background: var(--road-secondary);
203
204
  }
204
205
 
205
- .stepper-secondary.stepper-outline-light .current .stepper-icon {
206
+ .progress-indicator-horizontal-secondary.progress-indicator-horizontal-outline-light .current .progress-indicator-horizontal-icon {
206
207
  color: var(--road-on-secondary);
207
208
  background: var(--road-secondary);
208
209
  }
209
210
 
210
- .current .stepper-title {
211
+ .current .progress-indicator-horizontal-title,
212
+ .completed .progress-indicator-horizontal-title {
211
213
  font-weight: 700;
212
214
  color: var(--road-on-surface);
213
215
  }
@@ -1,28 +1,28 @@
1
1
  import { Host, h } from '@stencil/core';
2
2
  /**
3
- * @slot stepper-icon - if the state of the step 1 is completed add
3
+ * @slot progress-indicator-horizontal-icon - if the state of the step 1 is completed add
4
4
  * `<road-icon name="check-small" class="d-block" color="white"></road-icon>` by default.
5
- * `<road-icon name="check-small" class="d-block" color="secondary"></road-icon>` if is outline.
6
- * `<road-icon name="check-small" class="d-block" color="defaut"></road-icon>` if the color is secondary.
5
+ * `<road-icon name="check-small" class="d-block" color="primary"></road-icon>` if is outline.
6
+ * `<road-icon name="check-small" class="d-block" color="defaut"></road-icon>`
7
7
  * `<road-icon name="check-small" class="d-block" color="warning"></road-icon>` if the color is secondary and outline.
8
- * @slot stepper-title
9
- * @slot stepper-icon2 - if the state of the step 2 is completed add
8
+ * @slot progress-indicator-horizontal-title
9
+ * @slot progress-indicator-horizontal-icon2 - if the state of the step 2 is completed add
10
10
  * `<road-icon name="check-small" class="d-block" color="white"></road-icon>` by default.
11
- * `<road-icon name="check-small" class="d-block" color="secondary"></road-icon>` if is outline.
12
- * `<road-icon name="check-small" class="d-block" color="defaut"></road-icon>` if the color is secondary.
11
+ * `<road-icon name="check-small" class="d-block" color="primary"></road-icon>` if is outline.
12
+ * `<road-icon name="check-small" class="d-block" color="defaut"></road-icon>`
13
13
  * `<road-icon name="check-small" class="d-block" color="warning"></road-icon>` if the color is secondary and outline.
14
- * @slot stepper-title2
15
- * @slot stepper-icon3 - if the state of the step 3 is completed add
14
+ * @slot progress-indicator-horizontal-title2
15
+ * @slot progress-indicator-horizontal-icon3 - if the state of the step 3 is completed add
16
16
  * `<road-icon name="check-small" class="d-block" color="white"></road-icon>` by default.
17
- * `<road-icon name="check-small" class="d-block" color="secondary"></road-icon>` if is outline.
18
- * `<road-icon name="check-small" class="d-block" color="defaut"></road-icon>` if the color is secondary.
17
+ * `<road-icon name="check-small" class="d-block" color="primary"></road-icon>` if is outline.
18
+ * `<road-icon name="check-small" class="d-block" color="defaut"></road-icon>`.
19
19
  * `<road-icon name="check-small" class="d-block" color="warning"></road-icon>` if the color is secondary and outline.
20
- * @slot stepper-title3
20
+ * @slot progress-indicator-horizontal-title3
21
21
  */
22
22
  export class Stepper {
23
23
  constructor() {
24
24
  /**
25
- * The color stepper.
25
+ * The color progress-indicator-horizontal.
26
26
  */
27
27
  this.color = 'default';
28
28
  /**
@@ -35,27 +35,27 @@ export class Stepper {
35
35
  this.outline = false;
36
36
  }
37
37
  render() {
38
- const colorClass = this.color !== undefined ? `stepper stepper-${this.color}` : 'stepper';
39
- const outlineClass = this.outline == true ? `stepper stepper-outline` : 'stepper';
40
- const lightClass = this.light == true ? `stepper stepper-outline-light` : 'stepper';
41
- const stateClass = this.stateFirstStep !== undefined ? `stepper-item ${this.stateFirstStep}` : 'stepper-item';
42
- const stateSecondStepClass = this.stateSecondStep !== undefined ? `stepper-item ${this.stateSecondStep}` : 'stepper-item';
43
- const stateThirdStepClass = this.stateSecondStep !== undefined ? `stepper-item ${this.stateThirdStep}` : 'stepper-item';
38
+ const colorClass = this.color !== undefined ? `progress-indicator-horizontal progress-indicator-horizontal-${this.color}` : 'progress-indicator-horizontal';
39
+ const outlineClass = this.outline == true ? `progress-indicator-horizontal progress-indicator-horizontal-outline` : 'progress-indicator-horizontal';
40
+ const lightClass = this.light == true ? `progress-indicator-horizontal progress-indicator-horizontal-outline-light` : 'progress-indicator-horizontal';
41
+ const stateClass = this.stateFirstStep !== undefined ? `progress-indicator-horizontal-item ${this.stateFirstStep}` : 'progress-indicator-horizontal-item';
42
+ const stateSecondStepClass = this.stateSecondStep !== undefined ? `progress-indicator-horizontal-item ${this.stateSecondStep}` : 'progress-indicator-horizontal-item';
43
+ const stateThirdStepClass = this.stateSecondStep !== undefined ? `progress-indicator-horizontal-item ${this.stateThirdStep}` : 'progress-indicator-horizontal-item';
44
44
  const urlStep1 = this.urlStep1 !== undefined ? `${this.urlStep1}` : '#';
45
45
  const urlStep2 = this.urlStep2 !== undefined ? `${this.urlStep2}` : '#';
46
46
  const urlStep3 = this.urlStep3 !== undefined ? `${this.urlStep3}` : '#';
47
- return (h(Host, null, h("nav", null, h("ul", { class: `${colorClass} ${outlineClass} ${lightClass}` }, h("li", { class: `${stateClass}` }, h("a", { class: "stepper-link", href: `${urlStep1}` }, h("span", { class: "stepper-icon" }, h("slot", { name: "stepper-icon" })), h("span", { class: "stepper-title" }, h("slot", { name: "stepper-title" })))), h("li", { class: `${stateSecondStepClass}` }, h("a", { class: "stepper-link", href: `${urlStep2}` }, h("span", { class: "stepper-icon" }, h("slot", { name: "stepper-icon2" })), h("span", { class: "stepper-title" }, h("slot", { name: "stepper-title2" })))), h("li", { class: `${stateThirdStepClass}` }, h("a", { class: "stepper-link", href: `${urlStep3}` }, h("span", { class: "stepper-icon" }, h("slot", { name: "stepper-icon3" })), h("span", { class: "stepper-title" }, h("slot", { name: "stepper-title3" }))))))));
47
+ return (h(Host, null, h("nav", null, h("ul", { class: `${colorClass} ${outlineClass} ${lightClass}` }, h("li", { class: `${stateClass}` }, h("a", { class: "progress-indicator-horizontal-link", href: `${urlStep1}` }, h("span", { class: "progress-indicator-horizontal-icon" }, h("slot", { name: "progress-indicator-horizontal-icon" })), h("span", { class: "progress-indicator-horizontal-title" }, h("slot", { name: "progress-indicator-horizontal-title" })))), h("li", { class: `${stateSecondStepClass}` }, h("a", { class: "progress-indicator-horizontal-link", href: `${urlStep2}` }, h("span", { class: "progress-indicator-horizontal-icon" }, h("slot", { name: "progress-indicator-horizontal-icon2" })), h("span", { class: "progress-indicator-horizontal-title" }, h("slot", { name: "progress-indicator-horizontal-title2" })))), h("li", { class: `${stateThirdStepClass}` }, h("a", { class: "progress-indicator-horizontal-link", href: `${urlStep3}` }, h("span", { class: "progress-indicator-horizontal-icon" }, h("slot", { name: "progress-indicator-horizontal-icon3" })), h("span", { class: "progress-indicator-horizontal-title" }, h("slot", { name: "progress-indicator-horizontal-title3" }))))))));
48
48
  }
49
- static get is() { return "road-stepper"; }
49
+ static get is() { return "road-progress-indicator-horizontal"; }
50
50
  static get encapsulation() { return "shadow"; }
51
51
  static get originalStyleUrls() {
52
52
  return {
53
- "$": ["stepper.css"]
53
+ "$": ["progress-indicator-horizontal.css"]
54
54
  };
55
55
  }
56
56
  static get styleUrls() {
57
57
  return {
58
- "$": ["stepper.css"]
58
+ "$": ["progress-indicator-horizontal.css"]
59
59
  };
60
60
  }
61
61
  static get properties() {
@@ -72,7 +72,7 @@ export class Stepper {
72
72
  "optional": true,
73
73
  "docs": {
74
74
  "tags": [],
75
- "text": "The color stepper."
75
+ "text": "The color progress-indicator-horizontal."
76
76
  },
77
77
  "attribute": "color",
78
78
  "reflect": true,