@salesforcedevs/dx-components 1.2.13 → 1.2.15-alpha.0

package/lwc.config.json

@@ -5,6 +5,7 @@
         "dx/brandThemeProvider",
         "dx/breadcrumbs",
         "dx/button",
+        "dx/buttonToggle",
         "dx/cardBlogPost",
         "dx/cardCallout",
         "dx/cardContent",
@@ -19,6 +20,7 @@
         "dx/cardSmall",
         "dx/cardTrailheadModule",
         "dx/cardTrial",
+        "dx/cardTrialExpanded",
         "dx/cardVideoPreview",
         "dx/checkbox",
         "dx/checkboxGroup",
@@ -46,6 +48,7 @@
         "dx/imageAndLabel",
         "dx/input",
         "dx/logo",
+        "dx/modal",
         "dx/metadataBadge",
         "dx/modalDrawer",
         "dx/pagination",
@@ -64,7 +67,8 @@
         "dx/skipNavLink",
         "dx/socials",
         "dx/spinner",
-        "dx/toc",
+        "dx/tabPanel",
+        "dx/tabPanelList",
         "dx/toc",
         "dx/tooltip",
         "dx/tree",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.2.13",
+    "version": "1.2.15-alpha.0",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -27,6 +27,5 @@
         "@types/lodash.get": "^4.4.6",
         "@types/lodash.kebabcase": "^4.1.7",
         "@types/vimeo__player": "^2.16.2"
-    },
-    "gitHead": "f2b622c2ef0b9b6da1b29a3e822273e86c8f058e"
+    }
 }

package/src/assets/icons/salesforcebrand-sprite/svg/symbols.svg

@@ -1,5 +1,45 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <symbol id="net-zero" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+        <path class="acls-1"
+            d="M44.61 39H51a2 2 0 0 0 1.71-3l-19-31a2 2 0 0 0-3.42 0l-19 31A2 2 0 0 0 13 39h6.39L11.3 51.94a2 2 0 0 0-.05 2A2 2 0 0 0 13 55h17v3a2 2 0 0 0 4 0v-3h17a2 2 0 0 0 1.75-1 2 2 0 0 0 0-2zM34 51V37a2 2 0 0 0-4 0v14H16.61l8.09-12.94a2 2 0 0 0 .05-2A2 2 0 0 0 23 35h-6.43L32 9.83 47.43 35H41a2 2 0 0 0-1.75 1 2 2 0 0 0 0 2l8.14 13z"
+            fill="#194e31" />
+        <path class="acls-1"
+            d="M32.88 19.3a2 2 0 0 0-2.75.66l-5.47 8.94a2 2 0 0 0 .66 2.75 2 2 0 0 0 1 .29 2 2 0 0 0 1.71-1L33.5 22a2 2 0 0 0-.62-2.7z"
+            fill="#194e31" />
+    </symbol>
+    <symbol id="education" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" class="aa"
+            d="M59.4 26.2c0 .8-.5 1.5-1.2 1.8l-7.7 3.4V42c0 .6-.3 1.1-.7 1.5-6 5.3-11.7 7-16.6 7-9.9 0-16.7-7-16.8-7.1-.3-.4-.5-.9-.5-1.4V31.5l-4.3-1.9v6.8l2.6 4.4c.6.9.2 2.1-.7 2.7-.3.2-.6.3-1 .3-.7 0-1.3-.4-1.7-1l-1.2-2-1.2 2c-.4.7-1 1-1.7 1-.3 0-.7-.1-1-.3-1-.5-1.3-1.8-.7-2.7l2.6-4.4v-8.7c-.5-.4-.7-.9-.7-1.5 0-.8.5-1.5 1.2-1.8l24.2-10.7c.5-.2 1.1-.2 1.6 0l24.3 10.7c.7.3 1.2 1 1.2 1.8zm-6.9 0l-19.3-8.5-19.3 8.5 4 1.7 15.3 6.7 15.3-6.7zm-6.1 14.9v-7.9l-12.5 5.5c-.3.1-.5.2-.8.2-.3 0-.5-.1-.8-.2l-12.5-5.5v8c2.5 2.3 13.5 10.8 26.7-.1z"
+            fill="#481a54" />
+    </symbol>
+    <symbol id="automotive" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+        <path class="aa"
+            d="M51.4 14.5c1.3 2 2.3 4.4 3.1 7l-5.7 3.3-10.1-3.7h-.1c-.6-2.5-1.5-4.8-2.6-6.9l9.5 2.7c.1.1.3.1.5.1.3 0 .6-.1.9-.2zM50 40.8l5.7-3.1c-.5 2.7-1.2 5.4-2.1 7.7l-7.5 2.5-8-3.2c.7-2.4 1.3-5 1.6-7.7l8.5 3.8c.2.1.5.2.8.2.3 0 .7-.1 1-.2zM50 28.7l5.4-3c.3 2.1.5 4.2.5 6.4v.8l-7.1 3.9-8.9-4.1V32c0-2.2-.1-4.3-.4-6.3l8.8 3.2c.2.1.5.1.7.1.4 0 .7-.1 1-.3zM22 40c-2.2 0-4-3.6-4-8s1.8-8 4-8 4 3.6 4 8-1.8 8-4 8zM32.4 9c-.3-.3-.6-.7-1-1H42c2.5 0 4.9 1.2 6.8 3.3l-3.1 1.6-13.2-3.8-.1-.1zM46.7 52l4.1-1.4c-2.4 3.4-5.5 5.5-8.8 5.5H31.4c2.1-2 3.9-4.5 5.3-7.6l8.6 3.4c.2.1.4.1.7.1h.7z"
+            fill="none" />
+        <path class="aa"
+            d="M22 56C14.4 56 8 45 8 32S14.4 8 22 8s14 11 14 24-6.4 24-14 24zm-8-24c0-6.7 3.5-12 8-12s8 5.3 8 12-3.5 12-8 12-8-5.3-8-12z"
+            fill="none" />
+        <path fill-rule="evenodd" class="ab"
+            d="M22 44c-4.5 0-8-5.3-8-12s3.5-12 8-12 8 5.3 8 12-3.5 12-8 12zm0-4c1.9 0 4-3.4 4-8s-2.1-8-4-8-4 3.4-4 8 2.1 8 4 8z"
+            fill="#481a54" />
+        <path fill-rule="evenodd" class="ab"
+            d="M60 32c0 15.7-7.9 28-18 28H22C11.9 60 4 47.7 4 32S11.9 4 22 4h20c10.1 0 18 12.3 18 28zm-4.6 5.7l-5.6 3.1c-.3.1-.7.2-1 .2-.3 0-.5-.1-.8-.2L39.6 37c-.3 2.7-.8 5.3-1.6 7.7l8 3.2 7.5-2.5c1-2.3 1.7-5 1.9-7.7zm.1-12.1L50 28.7c-.3.2-.6.3-1 .3-.2 0-.5 0-.6-.1l-8.8-3.2c.2 2 .4 4.1.4 6.3v.7l8.9 4 7.1-3.9V32c0-2.2-.2-4.3-.5-6.4zm-.9-4.1c-.8-2.6-1.8-5-3.1-7l-4.6 2.3c-.3.1-.6.2-.9.2-.2 0-.4 0-.6-.1L36 14.2c1 2.1 1.9 4.4 2.6 6.9h.1l10.1 3.7zM42 8.1H31.4c.3.3.7.6 1 1h.1l13.3 3.8 3.1-1.6C46.9 9.2 44.5 8 42 8zM22 56c7.6 0 14-11 14-24S29.6 8 22 8 8 19 8 32s6.4 24 14 24zm28.7-5.5l-4.1 1.4c-.2.1-.4.1-.6.1-.3 0-.5 0-.7-.2l-8.6-3.4c-1.4 3.1-3.2 5.7-5.3 7.6H42c3.3 0 6.4-2.1 8.7-5.5z"
+            fill="#481a54" />
+    </symbol>
+    <symbol id="nonprofit" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" class="aa"
+            d="M59.5 44.4c-.3.8-.9 1.6-1.5 2.2l-8.6 8.6c-.4.3-.9.5-1.4.5-.5.1-1-.1-1.4-.5L45 53.6c-4.2 2.8-9.3 4.5-14.7 4.5h-.4C15.6 57.9 4.1 46.3 4.1 32c0-14.2 11.4-25.8 25.6-26.1h.5c14.4 0 26.1 11.7 26.1 26.1 0 1.3-.1 2.5-.3 3.7 3.3 1.5 4.8 5.3 3.5 8.7zm-4.4-.7c1.1-1 1.1-2.7 0-3.8l-.1-.1c-.5-.5-1.1-.7-1.8-.7h-.5c-.6.1-1.1.4-1.5.8l-2 2c-.4.4-.9.6-1.4.6-.5 0-1-.2-1.4-.6l-2-2c-.3-.4-.7-.6-1.1-.7-.2-.1-.5-.1-.8-.1-.7 0-1.4.3-1.9.8-1.1 1-1.1 2.7 0 3.8l5.7 5.6 1.6 1.6zm-15.2-8c0-.6.1-1.1.1-1.7h-8.1v8.2c1.4 0 2.8.2 4 .4-.4-2.8 1.2-5.7 4-6.9zm-8.1-12.5v6.7h8.1c-.1-2.9-.5-5.5-1.2-7.7-.2.1-.4.1-.6.2-1.8.5-3.9.8-6.3.8zm5.5-4.7c-1.7-3.4-3.7-5.7-5.4-7v7.8c2-.1 3.8-.4 5.4-.8zM47.4 37l.3.4.2.2.5-.5c1-1 2.2-1.7 3.6-1.9.1-.4.2-.8.2-1.2H44c0 .4-.1.8-.1 1.2 1.3.2 2.5.9 3.5 1.8zm.1-18.8c-.9.6-2.6 1.7-5 2.7.8 2.6 1.4 5.6 1.5 9.1h8.2c-.4-4.4-2.1-8.5-4.7-11.8zm-2.9-2.9c-2.2-1.9-4.7-3.4-7.5-4.3 1.4 1.6 2.8 3.6 4 6.2 1.6-.7 2.8-1.4 3.5-1.9zM31.9 52.5c1.4-1.2 3.2-3 4.7-5.7-1.4-.3-3-.5-4.7-.6zM42 50.7l-1.9-1.9q-1.5 2.5-3 4.2c1.7-.6 3.3-1.4 4.9-2.3zm-14.1-8.4V34h-7.8c.2 3.7.9 6.8 1.8 9.4 2.1-.5 4.1-.9 6-1.1zm-4.2 4.8c1.3 2.3 2.9 4 4.2 5.1v-5.9c-1.4.2-2.8.4-4.2.8zm-4 1.2c-.9.4-1.8.8-2.8 1.3 1.8 1.4 3.8 2.4 5.9 3.2-1-1.2-2.1-2.7-3.1-4.5zM27.8 30v-6.8c-2-.2-4.1-.6-6.4-1.3-.7 2.3-1.2 5-1.3 8.1zm-5-18.9c-2.6 1-5 2.3-7 4.1 1.1.6 2.2 1.1 3.3 1.6 1.1-2.3 2.4-4.1 3.7-5.7zM13 18.2c-2.7 3.3-4.4 7.4-4.8 11.8h7.9c.2-3.6.8-6.7 1.6-9.4-1.6-.7-3.2-1.5-4.7-2.4zM8.2 34c.4 4.9 2.5 9.3 5.6 12.8 1.4-.8 2.9-1.5 4.3-2.1-1-2.9-1.8-6.4-2-10.7zm19.7-22.3c-1.6 1.4-3.5 3.4-5 6.5 1.8.5 3.4.8 5 1z"
+            fill="#481a54" />
+    </symbol>
+    <symbol id="public-sector" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+        <path class="aa"
+            d="M41.8 28.5v18h-3.2c-.1-1.1-.4-2.2-.8-3.2V28.5zM45.8 28.5h4v18h-4zM33.8 30.2v7.2c-1.2-1.1-2.5-2.1-4-2.8 1.7-1.1 3.1-2.7 4-4.4zM51.8 50.5h2v4H38.9v-4h4.9zM30.1 13.8c1.8-.8 3.7-1.3 5.8-1.3 7.1 0 12.9 5.2 13.9 12H35.4v-.4c0-4.3-2.1-8-5.3-10.3z"
+            fill="none" />
+        <path fill-rule="evenodd" class="ab"
+            d="M57.9 48.5v8c0 1.1-.9 2-2 2H8.2c-1.1 0-2-.9-2-2V49c0-6.3 3.7-11.8 9-14.4-3.3-2.3-5.5-6.2-5.5-10.5 0-7.1 5.7-12.8 12.8-12.8 1.1 0 2.1.2 3.1.4 2.4-1.7 5.2-2.8 8.2-3.1V7.5c0-1.1.9-2 2-2s2 .9 2 2v1.1c8.3.9 15 7.6 15.9 15.9h2.1c1.1 0 2 .9 2 2s-.9 2-2 2h-2v18h2c1.1 0 2 .9 2.1 2zm-16-2v-18h-4v14.8c.3 1 .6 2.1.8 3.2zm-24.1 8.1h17.1v-5.5c0-.9-.1-1.7-.3-2.5-.2-.8-.5-1.6-.8-2.4-.9-2-2.3-3.7-4-4.9-1.2-.9-2.5-1.5-4-1.9-1.1-.3-2.2-.5-3.3-.5h-.7c-1.4.1-2.8.4-4 .9-4.5 1.8-7.7 6.2-7.7 11.2v5.5h7.7zm-3-26.3c.7 1.3 1.7 2.4 3 3.2 1.2.8 2.5 1.3 4 1.4h.7q1.8 0 3.3-.6c1.6-.6 3-1.8 4-3.2.1-.1.2-.3.3-.5.7-1.2 1.1-2.5 1.2-4v-.4c0-3.5-2.1-6.5-5-7.9-1.1-.6-2.4-.9-3.8-.9h-.8c-4.4.4-7.9 4.1-7.9 8.7 0 .6.1 1.1.2 1.7.1.9.4 1.7.8 2.5zm19 9v-7.2c-1 1.8-2.3 3.4-4 4.5 1.5.7 2.8 1.7 4 2.7zm12 9.2h4v-18h-4zM30 13.8c3.2 2.3 5.3 6.1 5.3 10.3v.4h14.4c-1-6.8-6.9-12-13.9-12-2 0-4 .5-5.8 1.3zm23.8 36.7H38.9v4h14.9z"
+            fill="#481a54" />
+    </symbol>
     <symbol viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" id="analytics">
         <g id="Atoms" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
             <g id="ICONS-symbols" transform="translate(-1849.000000, -3.000000)" fill-rule="nonzero">

package/src/assets/svg/big-moon.svg

@@ -0,0 +1 @@
+<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 397 322" width="397" height="322"><defs><clipPath clipPathUnits="userSpaceOnUse" id="cp1"><path d="m0 0h397v322h-397z"/></clipPath></defs><style>.a{fill:#3a49da}.b{fill:none;stroke:#90d0fe;stroke-width:2}.c{fill:none;stroke:#90d0fe;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.d{fill:none;stroke:#90d0fe;stroke-linecap:round;stroke-width:2}</style><g clip-path="url(#cp1)"><path class="a" d="m424.5 322c-207.1 0-374.5-167.4-374.5-374.5 0-207.1 167.4-374.5 374.5-374.5 207.1 0 374.5 167.4 374.5 374.5 0 207.1-167.4 374.5-374.5 374.5z"/><path class="b" d="m270 137c-5.5 0-10-4.5-10-10 0-5.5 4.5-10 10-10 5.5 0 10 4.5 10 10 0 5.5-4.5 10-10 10z"/><path class="c" d="m356.2 93.2c5.3-9.8 5.8-21.3 1.4-31.6"/><path class="c" d="m353.3 97.7c-10 13.4-27.9 19.1-44.4 14.2-16.4-5-27.6-19.5-27.6-36q0-2.7 0.4-5.3"/><path class="c" d="m282.9 65.2c4.6-14.3 17.5-24.8 33.2-26.6 15.6-1.9 30.9 5.2 38.9 18.1"/><path class="c" d="m291.6 70.4h-13.9"/><path class="c" d="m272.3 70.4h-3.3"/><path class="c" d="m374.5 57.3h-4.7"/><path class="c" d="m363.9 57.3h-14.5"/><path class="b" d="m364.6 58.2c-0.5 0-0.9-0.4-0.9-0.9 0-0.5 0.4-0.9 0.9-0.9 0.6 0 1 0.4 1 0.9 0 0.5-0.4 0.9-1 0.9z"/><path class="c" d="m363.5 97.5h-14.7"/><path class="c" d="m331.5 172l2.1 5.7q0.3 0.6 0.9 0.9l5.7 2.1c1.3 0.5 1.3 2.3 0 2.8l-5.7 2.1q-0.6 0.3-0.9 0.9l-2.1 5.7c-0.5 1.3-2.3 1.3-2.8 0l-2.1-5.7q-0.3-0.6-0.9-0.9l-5.7-2.1c-1.3-0.5-1.3-2.3 0-2.8l5.7-2.1q0.6-0.3 0.9-0.9l2.1-5.7c0.5-1.3 2.3-1.3 2.8 0z"/><path class="c" d="m162.4 32.6l3.4 9.3q0.5 1.1 1.5 1.5l9.3 3.4c2.1 0.8 2.1 3.8 0 4.6l-9.3 3.4q-1 0.4-1.5 1.5l-3.4 9.3c-0.8 2.1-3.8 2.1-4.6 0l-3.4-9.3q-0.5-1.1-1.5-1.5l-9.3-3.4c-2.1-0.8-2.1-3.8 0-4.6l9.3-3.4q1-0.4 1.5-1.5l3.4-9.3c0.8-2.1 3.8-2.1 4.6 0z"/><path class="c" d="m8 284v-16"/><path class="c" d="m16.1 276h-16.1"/><path class="d" d="m160 176h28"/><path class="d" d="m204 176h-9"/><path class="b" d="m200 106c-1.1 0-2-0.9-2-2 0-1.1 0.9-2 2-2 1.1 0 2 0.9 2 2 0 1.1-0.9 2-2 2z"/><path class="b" d="m150 246c-1.1 0-2-0.9-2-2 0-1.1 0.9-2 2-2 1.1 0 2 0.9 2 2 0 1.1-0.9 2-2 2z"/></g></svg>

package/src/assets/svg/blue-circle.svg

@@ -0,0 +1,3 @@
+<svg width="126" height="126" viewBox="0 0 126 126" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="63" cy="63" r="62" fill="white" stroke="#90D0FE" stroke-width="2"/>
+</svg>

package/src/assets/svg/trial-left.svg

@@ -0,0 +1,6 @@
+<svg width="477" height="393" viewBox="0 0 477 393" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M475.962 306.74C475.962 309.003 474.129 310.836 471.866 310.836C469.604 310.836 467.771 309.003 467.771 306.74C467.771 304.478 469.604 302.644 471.866 302.644C474.129 302.644 475.962 304.478 475.962 306.74Z" stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M98.9625 36.7401C98.9625 39.0031 97.1295 40.836 94.8665 40.836C92.6045 40.836 90.7715 39.0031 90.7715 36.7401C90.7715 34.4781 92.6045 32.644 94.8665 32.644C97.1295 32.644 98.9625 34.4781 98.9625 36.7401Z" stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.95075 376.485L6.43275 380.586C6.32475 380.879 6.09375 381.11 5.80075 381.218L1.69975 382.736C0.76675 383.081 0.76675 384.4 1.69975 384.745L5.80075 386.262C6.09375 386.371 6.32475 386.602 6.43275 386.895L7.95075 390.996C8.29575 391.928 9.61475 391.928 9.95975 390.996L11.4768 386.895C11.5858 386.602 11.8167 386.371 12.1097 386.262L16.2107 384.745C17.1427 384.4 17.1427 383.081 16.2107 382.736L12.1097 381.218C11.8167 381.11 11.5858 380.879 11.4768 380.586L9.95975 376.485C9.61475 375.552 8.29575 375.552 7.95075 376.485Z" stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M126.951 1.69975L125.433 5.80075C125.325 6.09475 125.094 6.32475 124.801 6.43275L120.7 7.95075C119.767 8.29675 119.767 9.61474 120.7 9.95974L124.801 11.4768C125.094 11.5858 125.325 11.8167 125.433 12.1097L126.951 16.2117C127.296 17.1427 128.615 17.1427 128.96 16.2117L130.477 12.1097C130.586 11.8167 130.817 11.5858 131.11 11.4768L135.211 9.95974C136.143 9.61474 136.143 8.29675 135.211 7.95075L131.11 6.43275C130.817 6.32475 130.586 6.09475 130.477 5.80075L128.96 1.69975C128.615 0.76675 127.296 0.76675 126.951 1.69975Z" stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/svg/trial-right.svg

@@ -0,0 +1,26 @@
+<svg width="562" height="325" viewBox="0 0 562 325" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_7706_186134)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M88.8185 -16.518C88.8185 8.049 68.9035 27.964 44.3365 27.964C19.7695 27.964 -0.146484 8.049 -0.146484 -16.518C-0.146484 -41.084 19.7695 -61 44.3365 -61C68.9035 -61 88.8185 -41.084 88.8185 -16.518Z" stroke="#90D0FE" stroke-width="2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M553.142 35.5865L551.624 39.6875C551.516 39.9815 551.286 40.2115 550.993 40.3195L546.891 41.8375C545.958 42.1835 545.958 43.5015 546.891 43.8465L550.993 45.3635C551.286 45.4725 551.516 45.7035 551.624 45.9965L553.142 50.0985C553.488 51.0295 554.806 51.0295 555.151 50.0985L556.668 45.9965C556.777 45.7035 557.008 45.4725 557.301 45.3635L561.403 43.8465C562.335 43.5015 562.335 42.1835 561.403 41.8375L557.301 40.3195C557.008 40.2115 556.777 39.9815 556.668 39.6875L555.151 35.5865C554.806 34.6535 553.488 34.6535 553.142 35.5865Z" stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M252.008 244.108C246.009 232.496 242.621 219.315 242.621 205.343C242.621 193.94 244.878 183.064 248.969 173.137" stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M410.92 193.214C411.488 197.175 411.782 201.225 411.782 205.343C411.782 252.056 373.915 289.923 327.202 289.923C298.728 289.923 273.538 275.852 258.211 254.283" stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M254.555 162.004C269.323 137.303 296.331 120.764 327.202 120.764C365.504 120.764 397.86 146.223 408.27 181.142" stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M398.511 85.7866L395.059 95.1156C394.813 95.7826 394.286 96.3075 393.619 96.5555L384.29 100.008C382.169 100.792 382.169 103.792 384.29 104.577L393.619 108.029C394.286 108.276 394.813 108.802 395.059 109.469L398.511 118.798C399.296 120.919 402.296 120.919 403.08 118.798L406.532 109.469C406.78 108.802 407.305 108.276 407.972 108.029L417.301 104.577C419.422 103.792 419.422 100.792 417.301 100.008L407.972 96.5555C407.305 96.3075 406.78 95.7826 406.532 95.1156L403.08 85.7866C402.296 83.6656 399.296 83.6656 398.511 85.7866Z" stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M262.252 314.385C262.252 320.076 257.638 324.69 251.946 324.69C246.255 324.69 241.641 320.076 241.641 314.385C241.641 308.693 246.255 304.079 251.946 304.079C257.638 304.079 262.252 308.693 262.252 314.385Z" stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M327.116 162.502C327.116 165.278 324.865 167.529 322.09 167.529C319.313 167.529 317.062 165.278 317.062 162.502C317.062 159.727 319.313 157.476 322.09 157.476C324.865 157.476 327.116 159.727 327.116 162.502Z" fill="#90D0FE"/>
+<path d="M389.715 192.771H419.487" stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M430.93 192.771H438.019" stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M245.277 163.33H268.519" stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M213.107 163.33H223.16" stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M236.056 163.33C236.056 164.441 235.156 165.341 234.045 165.341C232.935 165.341 232.035 164.441 232.035 163.33C232.035 162.22 232.935 161.32 234.045 161.32C235.156 161.32 236.056 162.22 236.056 163.33Z" fill="#90D0FE"/>
+<path d="M236.424 253.626H267.833" stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M279.898 253.627C279.898 254.737 278.998 255.638 277.887 255.638C276.777 255.638 275.877 254.737 275.877 253.627C275.877 252.517 276.777 251.616 277.887 251.616C278.998 251.616 279.898 252.517 279.898 253.627Z" fill="#90D0FE"/>
+<path d="M356.52 230.398V214.362" stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M364.535 222.382L348.484 222.384" stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_7706_186134">
+<rect width="562" height="325" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/modules/dx/button/button.css

@@ -4,6 +4,7 @@
     width: min-content;
     font-size: inherit;
 
+    --dx-c-button-background-color: transparent;
     --dx-c-button-primary-color: var(--dx-g-blue-vibrant-50);
     --dx-c-button-primary-color-hover: var(--dx-g-blue-vibrant-40);
     --dx-c-button-secondary-color-hover: var(--dx-g-cloud-blue-vibrant-90);
@@ -11,20 +12,25 @@
     --dx-c-button-justify-content: center;
     --dx-c-button-opacity: 1;
     --dx-c-button-font-size: var(--dx-g-text-sm);
+    --dx-c-button-font-weight: var(--dx-g-font-normal);
+    --dx-c-button-display: flex;
 }
 
 .button {
+    background-color: var(--dx-c-button-background-color);
     opacity: var(--dx-c-button-opacity);
     width: inherit;
-    display: flex;
+    display: var(--dx-c-button-display);
     align-items: center;
     justify-content: var(--dx-c-button-justify-content);
     user-select: none;
     white-space: nowrap;
     font-size: var(--dx-c-button-font-size);
     transition: var(--dx-g-transition-hue-1x);
-    padding: 0 var(--dx-c-button-horizontal-spacing, var(--dx-g-spacing-md));
+    padding: var(--dx-c-button-vertical-spacing, 0)
+        var(--dx-c-button-horizontal-spacing, var(--dx-g-spacing-md));
     border-radius: var(--dx-g-spacing-xs);
+    font-weight: var(--dx-c-button-font-weight);
 }
 
 .button:focus {
@@ -54,6 +60,7 @@
 .button > span {
     font-family: inherit;
     font-size: inherit;
+    font-weight: inherit;
 }
 
 .button:not(.variant_inline-inherit).font-display {
@@ -129,7 +136,7 @@
 
 .button.variant_secondary {
     color: var(--dx-c-button-primary-color);
-    background: transparent;
+    background: var(--dx-c-button-background-color);
     border: 1px solid var(--dx-c-button-primary-color);
 }
 

package/src/modules/dx/buttonToggle/buttonToggle.css

@@ -0,0 +1,50 @@
+@import "dxHelpers/reset";
+
+button {
+    border: 2px solid var(--dx-g-gray-50);
+    border-radius: 4px;
+    color: var(--dx-g-gray-50);
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-sm);
+    font-weight: var(--dx-g-font-bold);
+    padding: var(--dx-g-spacing-xs) var(--dx-g-spacing-smd);
+}
+
+button:focus {
+    outline: 5px solid var(--dx-g-blue-vibrant-60);
+    border-color: var(--dx-g-blue-vibrant-50);
+}
+
+button:hover {
+    border-color: var(--dx-g-blue-vibrant-20);
+}
+
+button:focus,
+button:hover {
+    background-color: var(--dx-g-blue-vibrant-95);
+    color: var(--dx-g-blue-vibrant-20);
+}
+
+button:disabled,
+button:disabled:hover {
+    background-color: var(--dx-g-gray-80);
+    border-color: var(--dx-g-gray-80);
+    color: white;
+    cursor: default;
+}
+
+button:focus:hover {
+    border-color: var(--dx-g-blue-vibrant-50);
+}
+
+.label-container {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.pressed {
+    background-color: var(--sds-g-gray-14);
+    border-color: var(--sds-g-gray-14);
+    color: white;
+}

package/src/modules/dx/buttonToggle/buttonToggle.html

@@ -0,0 +1,17 @@
+<template>
+    <button
+        aria-labelledby="label"
+        class={className}
+        onclick={handleMouseEvent}
+        onmouseenter={handleMouseEvent}
+        onmouseleave={handleMouseEvent}
+        onfocus={handleMouseEvent}
+        onblur={handleMouseEvent}
+        disabled={disabled}
+    >
+        <div class="label-container">
+            <span id="label">{label}</span>
+            <dx-icon sprite="utility" symbol={symbol} size="small"></dx-icon>
+        </div>
+    </button>
+</template>

package/src/modules/dx/buttonToggle/buttonToggle.ts

@@ -0,0 +1,75 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { normalizeBoolean } from "dxUtils/normalizers";
+
+export default class ButtonToggle extends LightningElement {
+    @api label!: string;
+
+    @api
+    get value() {
+        return this._value;
+    }
+    set value(value: boolean) {
+        this._value = normalizeBoolean(value);
+    }
+
+    @api
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value: boolean) {
+        this._disabled = normalizeBoolean(value);
+    }
+
+    private _value: boolean = false;
+    private _disabled: boolean = false;
+    private mouseHovering: boolean = false;
+    private hasFocus: boolean = false;
+
+    private get className(): string {
+        return cx(this.value && "pressed");
+    }
+
+    private get symbol() {
+        if (
+            (this.value && this.mouseHovering && !this.hasFocus) ||
+            (this.value && this.hasFocus)
+        ) {
+            return "close";
+        } else if (this.value) {
+            return "check";
+        }
+
+        return "add";
+    }
+
+    private handleMouseEvent(e: MouseEvent) {
+        switch (e.type) {
+            case "click":
+                this._value = !this._value;
+                this.dispatchEvent(
+                    new CustomEvent("toggle", {
+                        detail: {
+                            label: this.label,
+                            value: this.value
+                        }
+                    })
+                );
+                break;
+            case "mouseenter":
+                this.mouseHovering = true;
+                break;
+            case "mouseleave":
+                this.mouseHovering = false;
+                break;
+            case "focus":
+                this.hasFocus = true;
+                break;
+            case "blur":
+                this.hasFocus = false;
+                break;
+            default:
+                break;
+        }
+    }
+}

package/src/modules/dx/cardTrial/cardTrial.css

@@ -9,7 +9,7 @@
 }
 
 .card-trial.has-image {
-    padding-bottom: 80px;
+    padding-bottom: 90px;
 }
 
 dx-icon-badge.badge-main {
@@ -20,7 +20,9 @@ dx-icon-badge.badge-main {
 }
 
 .label {
-    margin-bottom: var(--dx-g-spacing-sm);
+    color: var(--dx-g-gray-30);
+    margin-top: 5px;
+    margin-bottom: var(--dx-g-spacing-md);
 }
 
 dx-card-title {
@@ -28,10 +30,11 @@ dx-card-title {
 }
 
 .body {
-    margin-bottom: var(--dx-g-spacing-sm);
+    margin-bottom: var(--dx-g-spacing-md);
 }
 
 .terms {
+    margin-top: auto;
     font-weight: var(--dx-g-font-bold);
 }
 
@@ -46,6 +49,10 @@ dx-hr {
     flex-direction: column;
 }
 
+.details_top-margin {
+    margin-top: var(--dx-g-spacing-lg);
+}
+
 .detail {
     display: flex;
     flex-direction: row;
@@ -67,5 +74,59 @@ img {
     position: absolute;
     bottom: 0;
     right: var(--dx-g-spacing-mlg);
-    width: var(--dx-g-spacing-6xl);
+}
+
+dx-button {
+    --dx-c-button-font-size: var(--dx-g-text-base);
+    --dx-c-button-font-weight: var(--dx-g-font-bold);
+}
+
+.recommended-container {
+    background-color: var(--dx-g-blue-vibrant-50);
+    border-radius: var(--dx-g-card-border-radius) var(--dx-g-card-border-radius)
+        0 0;
+    height: var(--dx-g-spacing-3xl);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.recommended-label {
+    color: white;
+    font-family: var(--dx-g-font-sans);
+    font-weight: var(--dx-g-font-bold);
+    font-size: var(--dx-g-text-base);
+}
+
+.recommended-border {
+    border: 3px solid var(--dx-g-blue-vibrant-50);
+
+    /* overwrite inherited border-radius */
+    border-radius: 0 0 var(--dx-g-card-border-radius)
+        var(--dx-g-card-border-radius) !important;
+}
+
+.top-text .recommended-border {
+    margin-top: var(--dx-g-spacing-mlg);
+}
+
+.top-text {
+    color: var(--dx-g-gray-30);
+}
+
+.badge-container {
+    display: flex;
+    justify-content: space-between;
+}
+
+.button-container {
+    display: flex;
+    justify-content: space-between;
+    gap: 10px;
+}
+
+.button-one,
+.button-two {
+    margin-top: 15px;
+    width: 100%;
 }

package/src/modules/dx/cardTrial/cardTrial.html

@@ -1,21 +1,104 @@
 <template>
-    <a class={className} href={href} target={target}>
-        <dx-icon-badge
-            class="badge-main"
-            background-color={badgeBackgroundColor}
-            symbol={badgeSymbol}
-            sprite={badgeSprite}
-        ></dx-icon-badge>
-        <span class="label dx-text-label-3">{label}</span>
+    <dx-modal
+        if:true={hasTwoButtons}
+        open={_modalOpen}
+        ontogglemodal={toggleModal}
+    >
+        <dx-card-trial-expanded
+            badge-background-color={badgeBackgroundColor}
+            badge-sprite={badgeSprite}
+            badge-symbol={badgeSymbol}
+            body={body}
+            button-cta={buttonOneCta}
+            button-href={buttonOneHref}
+            button-icon={buttonOneIcon}
+            button-icon-size={buttonOneIconSize}
+            details={details}
+            href={href}
+            label={label}
+            col-two-title={modalTitle}
+            col-two-details={modalDetails}
+            target={target}
+            terms={terms}
+            title={title}
+            ontogglemodal={toggleModal}
+        ></dx-card-trial-expanded>
+    </dx-modal>
+    <div class="recommended-container" if:true={recommended}>
+        <span class="recommended-label">Recommended</span>
+    </div>
+    <div
+        class={className}
+        role={ariaRole}
+        href={href}
+        target={target}
+        onclick={handleClick}
+    >
+        <template if:true={topText}>
+            <span class="top-text dx-text-body-4">{topText}</span>
+            <dx-hr spacing="md"></dx-hr>
+        </template>
+        <div class="badge-container">
+            <dx-icon-badge
+                class="badge-main"
+                background-color={badgeBackgroundColor}
+                symbol={badgeSymbol}
+                sprite={badgeSprite}
+            ></dx-icon-badge>
+            <dx-type-badge
+                if:true={typeBadgeValue}
+                value={typeBadgeValue}
+                color={typeBadgeColor}
+                size={typeBadgeSize}
+                type={typeBadgeType}
+            ></dx-type-badge>
+        </div>
         <dx-card-title
             href={href}
             target={target}
             title={title}
         ></dx-card-title>
-        <p class="body dx-text-body-3 static-font">{body}</p>
+        <span class="label dx-text-body-3">{label}</span>
+        <p class="body dx-text-body-2 static-font">{body}</p>
         <span class="terms dx-text-body-3 static-font">{terms}</span>
-        <dx-hr spacing="md"></dx-hr>
-        <ul class="details">
+        <dx-hr if:false={hasButtons} spacing="lg"></dx-hr>
+        <dx-button
+            if:true={hasOneButton}
+            class="button-one"
+            size="large"
+            href={buttonOneHref}
+            variant="primary"
+            font="sans"
+            icon-symbol={buttonOneIcon}
+            icon-size={buttonOneIconSize}
+        >
+            {buttonOneCta}
+        </dx-button>
+        <div if:true={hasTwoButtons} class="button-container">
+            <dx-button
+                class="button-one"
+                size="large"
+                href={buttonOneHref}
+                variant="primary"
+                font="sans"
+                icon-symbol={buttonOneIcon}
+                icon-size={buttonOneIconSize}
+            >
+                {buttonOneCta}
+            </dx-button>
+            <dx-button
+                class="button-two"
+                size="large"
+                onclick={toggleModal}
+                variant="secondary"
+                font="sans"
+                icon-symbol={buttonTwoIcon}
+                icon-size={buttonTwoIconSize}
+            >
+                {buttonTwoCta}
+            </dx-button>
+        </div>
+        <ul class={detailsClassName} if:true={hasDetails}>
             <template for:each={details} for:item="detail">
                 <li class="detail" key={detail}>
                     <dx-icon-badge
@@ -27,5 +110,5 @@
             </template>
         </ul>
         <img if:true={imgSrc} src={imgSrc} alt="" />
-    </a>
+    </div>
 </template>