npm - @synergy-design-system/metadata - Versions diffs - 3.0.1 → 3.2.0 - Mend

@synergy-design-system/metadata 3.0.1 → 3.2.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 (62) hide show

package/data/layers/examples/style/style:syn-heading.md CHANGED Viewed

@@ -1,5 +1,48 @@
 ## Default
 ```html
-<span class="syn-heading--3x-large"> This is a default heading text </span>
+<span class="syn-heading--4x-large"> This is a default heading text </span>
+```
+---
+## Available Headings
+```html
+<section class="heading-stories-list">
+  <h6 class="syn-heading--medium">
+    The quick brown fox jumped over the lazy dog.
+  </h6>
+  <h5 class="syn-heading--large">
+    The quick brown fox jumped over the lazy dog.
+  </h5>
+  <h4 class="syn-heading--x-large">
+    The quick brown fox jumped over the lazy dog.
+  </h4>
+  <h3 class="syn-heading--2x-large">
+    The quick brown fox jumped over the lazy dog.
+  </h3>
+  <h2 class="syn-heading--3x-large">
+    The quick brown fox jumped over the lazy dog.
+  </h2>
+  <h1 class="syn-heading--4x-large">
+    The quick brown fox jumped over the lazy dog.
+  </h1>
+</section>
+<style>
+  section.heading-stories-list {
+    display: flex;
+    gap: var(--syn-spacing-medium);
+    flex-direction: column;
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      margin: 0;
+    }
+  }
+</style>
 ```

package/data/layers/examples/template/template:loading-screen.md ADDED Viewed

@@ -0,0 +1,393 @@
+## Loading Screen Light Theme
+The loading screen can be displayed in light mode, which is the default theme for all applications.
+```html
+<div style="height: 400px">Content Placeholder</div>
+<!-- Begin of loading screen -->
+<div
+  aria-busy="true"
+  role="status"
+  style="
+    align-items: center;
+    background: #fff;
+    display: flex;
+    inset: 0;
+    justify-content: center;
+    position: absolute;
+    will-change: transform;
+    z-index: calc(infinity);
+  "
+>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 360 360"
+    width="360"
+    height="360"
+    aria-label="Loading"
+    role="img"
+  >
+    <title>Loading</title>
+    <g transform="translate(180 180)" fill="#005aff">
+      <circle cx="0" cy="-171" r="5" opacity="1"></circle>
+      <circle cx="65" cy="-158" r="5" opacity="0">
+        <animate
+          attributeName="opacity"
+          values="1;1;0;0"
+          keyTimes="0;0.5;0.5;1"
+          repeatCount="indefinite"
+          dur="1.5s"
+          begin="0.09375s"
+        ></animate>
+      </circle>
+      <circle cx="121" cy="-121" r="5" opacity="0">
+        <animate
+          attributeName="opacity"
+          values="1;1;0;0"
+          keyTimes="0;0.5;0.5;1"
+          repeatCount="indefinite"
+          dur="1.5s"
+          begin="0.140625s"
+        ></animate>
+      </circle>
+      <circle cx="158" cy="-65" r="5" opacity="0">
+        <animate
+          attributeName="opacity"
+          values="1;1;0;0"
+          keyTimes="0;0.5;0.5;1"
+          repeatCount="indefinite"
+          dur="1.5s"
+          begin="0.1875s"
+        ></animate>
+      </circle>
+      <circle cx="171" cy="0" r="5" opacity="0">
+        <animate
+          attributeName="opacity"
+          values="1;1;0;0"
+          keyTimes="0;0.5;0.5;1"
+          repeatCount="indefinite"
+          dur="1.5s"
+          begin="0.234375s"
+        ></animate>
+      </circle>
+      <circle cx="158" cy="65" r="5" opacity="0">
+        <animate
+          attributeName="opacity"
+          values="1;1;0;0"
+          keyTimes="0;0.5;0.5;1"
+          repeatCount="indefinite"
+          dur="1.5s"
+          begin="0.28125s"
+        ></animate>
+      </circle>
+      <circle cx="121" cy="121" r="5" opacity="0">
+        <animate
+          attributeName="opacity"
+          values="1;1;0;0"
+          keyTimes="0;0.5;0.5;1"
+          repeatCount="indefinite"
+          dur="1.5s"
+          begin="0.328125s"
+        ></animate>
+      </circle>
+      <circle cx="65" cy="158" r="5" opacity="0">
+        <animate
+          attributeName="opacity"
+          values="1;1;0;0"
+          keyTimes="0;0.5;0.5;1"
+          repeatCount="indefinite"
+          dur="1.5s"
+          begin="0.375s"
+        ></animate>
+      </circle>
+      <circle cx="0" cy="171" r="5" opacity="0">
+        <animate
+          attributeName="opacity"
+          values="1;1;0;0"
+          keyTimes="0;0.5;0.5;1"
+          repeatCount="indefinite"
+          dur="1.5s"
+          begin="0.421875s"
+        ></animate>
+      </circle>
+      <circle cx="-65" cy="158" r="5" opacity="0">
+        <animate
+          attributeName="opacity"
+          values="1;1;0;0"
+          keyTimes="0;0.5;0.5;1"
+          repeatCount="indefinite"
+          dur="1.5s"
+          begin="0.46875s"
+        ></animate>
+      </circle>
+      <circle cx="-121" cy="121" r="5" opacity="0">
+        <animate
+          attributeName="opacity"
+          values="1;1;0;0"
+          keyTimes="0;0.5;0.5;1"
+          repeatCount="indefinite"
+          dur="1.5s"
+          begin="0.515625s"
+        ></animate>
+      </circle>
+      <circle cx="-158" cy="65" r="5" opacity="0">
+        <animate
+          attributeName="opacity"
+          values="1;1;0;0"
+          keyTimes="0;0.5;0.5;1"
+          repeatCount="indefinite"
+          dur="1.5s"
+          begin="0.5625s"
+        ></animate>
+      </circle>
+      <circle cx="-171" cy="0" r="5" opacity="0">
+        <animate
+          attributeName="opacity"
+          values="1;1;0;0"
+          keyTimes="0;0.5;0.5;1"
+          repeatCount="indefinite"
+          dur="1.5s"
+          begin="0.609375s"
+        ></animate>
+      </circle>
+      <circle cx="-158" cy="-65" r="5" opacity="0">
+        <animate
+          attributeName="opacity"
+          values="1;1;0;0"
+          keyTimes="0;0.5;0.5;1"
+          repeatCount="indefinite"
+          dur="1.5s"
+          begin="0.65625s"
+        ></animate>
+      </circle>
+      <circle cx="-121" cy="-121" r="5" opacity="0">
+        <animate
+          attributeName="opacity"
+          values="1;1;0;0"
+          keyTimes="0;0.5;0.5;1"
+          repeatCount="indefinite"
+          dur="1.5s"
+          begin="0.703125s"
+        ></animate>
+      </circle>
+      <circle cx="-65" cy="-158" r="5" opacity="0">
+        <animate
+          attributeName="opacity"
+          values="1;1;0;0"
+          keyTimes="0;0.5;0.5;1"
+          repeatCount="indefinite"
+          dur="1.5s"
+          begin="0.75s"
+        ></animate>
+      </circle>
+    </g>
+    <g transform="translate(180 180) scale(0.58) translate(-147.5 -74)">
+      <path
+        d="M0.153685 70.3263H54.2782C62.1961 68.7465 61.3146 58.7595 54.2782 57.3757H26.4942C11.7042 57.3757 0 44.7431 0 29.6971C0 15.2239 10.8168 1.67781 26.4942 1.67781H56.9828C69.5519 1.67781 78.5289 11.0934 78.5289 23.0341H26.4957C19.4985 24.035 19.0555 34.7637 26.4942 35.9832H54.2029C69.4088 36.3902 81.5303 48.4982 81.5303 63.8276C81.5303 77.9526 69.5504 92.1424 54.2767 92.1424H25.7032C13.5454 92.1424 0.150673 85.5758 0.150673 70.3263H0.153685ZM89.5521 1.67329V92.1408H110.907V1.67329H89.5521ZM208.029 69.2681L188.933 58.8937C184.736 67.0551 176.273 72.5242 166.773 72.5242C153.199 72.5242 141.84 61.3524 141.84 47.1309C141.84 32.9095 153.198 21.7392 166.773 21.7392C176.082 21.7392 184.349 26.9957 188.625 34.8828L207.746 24.5596C199.828 9.92365 184.449 0 166.773 0C141.002 0 120.113 21.1 120.113 47.1309C120.113 73.1618 141.002 94.2649 166.773 94.2649C184.622 94.2649 200.18 84.1437 208.029 69.2681ZM216.078 1.67329V92.1408H237.675V57.0893H245.266L267.993 92.1408H294.556L264.406 47.4776L295 1.67329H268.446L245.995 37.9565H237.677V1.67329H216.078ZM0.748842 123.219C0.748842 118.555 5.61405 116.376 9.76508 116.376C14.2898 116.376 18.2027 118.452 19.155 123.422H15.4123C14.6303 120.495 11.9408 119.61 9.59482 119.61C7.79127 119.61 4.69495 120.462 4.69495 123.048C4.69495 125.091 6.32824 126.146 8.43766 126.588L11.3637 127.201C15.3113 128.019 19.6311 129.515 19.6311 134.486C19.6311 139.388 14.9362 141.94 10.1387 141.94C4.42224 141.94 0.578582 138.774 0 133.601H3.8105C4.5262 136.971 6.80437 138.706 10.2759 138.706C13.4746 138.706 15.7197 137.175 15.7197 134.792C15.7197 132.238 13.2697 131.217 10.6164 130.673L7.58786 130.06C4.08322 129.345 0.750347 127.37 0.750347 123.217L0.748842 123.219ZM39.4656 136.12C38.6158 139.15 35.8932 141.94 31.2314 141.94C25.3115 141.94 22.1142 137.617 22.1142 132.307C22.1142 126.623 25.9247 122.845 31.1304 122.845C36.7791 122.845 40.0789 127.474 39.7037 133.432H25.7544C26.095 136.803 28.2375 138.913 31.0958 138.913C33.6467 138.913 35.1443 137.858 35.8932 136.121L39.4656 136.12ZM36.0303 130.639C35.9278 127.915 34.0233 125.736 31.0973 125.736C28.3415 125.736 26.2999 127.165 25.8237 130.639H36.0303ZM52.1221 122.843C56.5443 122.843 58.2454 125.703 58.2454 129.957V141.497H54.7076V130.91C54.7076 128.255 54.2662 125.804 50.9303 125.804C47.8686 125.804 46.3709 128.017 46.3709 131.659V141.497H42.8332V123.184H46.3709V125.839C47.4256 124.034 49.2639 122.843 52.1221 122.843ZM68.5891 125.668C66.8533 125.668 64.9835 126.383 64.9835 127.881C64.9835 129.243 65.868 129.821 67.5344 130.162L70.1546 130.673C73.6246 131.355 76.6531 132.545 76.6531 136.12C76.6531 139.83 73.1816 141.94 68.9643 141.94C64.3371 141.94 61.5135 139.251 61.0705 135.812H64.6761C65.1523 137.888 66.5128 139.113 69.0652 139.113C71.3449 139.113 73.1138 138.161 73.1138 136.527C73.1138 134.825 71.5152 134.143 69.6091 133.77L66.8533 133.225C64.0975 132.681 61.512 131.456 61.512 128.017C61.512 124.784 64.9142 122.809 68.9281 122.809C72.603 122.809 75.5622 124.749 76.2432 128.29H72.7386C72.2278 126.418 70.6654 125.668 68.5891 125.668ZM87.506 141.94C83.1847 141.94 78.6254 139.012 78.6254 132.408C78.6254 125.771 83.1847 122.843 87.506 122.843C91.8604 122.843 96.4198 125.771 96.4198 132.408C96.4198 139.012 91.8604 141.94 87.506 141.94ZM92.6771 132.408C92.6771 127.847 90.1925 125.839 87.506 125.839C84.8512 125.839 82.3681 127.779 82.3681 132.408C82.3681 136.935 84.8512 138.945 87.506 138.945C90.194 138.945 92.6771 136.869 92.6771 132.408ZM107.306 126.724C104.583 126.724 103.155 128.052 103.155 131.897V141.497H99.6171V123.184H103.087V126.418C104.039 124.342 105.876 123.149 108.156 123.116C108.462 123.116 108.837 123.116 109.143 123.151V126.828C108.496 126.76 107.883 126.724 107.306 126.724ZM119.895 141.498V116.82H123.773V141.498H119.895ZM137.654 122.843C142.077 122.843 143.778 125.703 143.778 129.957V141.497H140.24V130.91C140.24 128.255 139.798 125.804 136.462 125.804C133.401 125.804 131.903 128.017 131.903 131.659V141.497H128.365V123.184H131.903V125.839C132.958 124.034 134.796 122.843 137.654 122.843ZM151.943 118.487V123.184H155.548V125.873H151.943V136.323C151.943 138.195 152.248 138.672 154.017 138.672H155.515V141.497H152.929C149.221 141.497 148.405 140.577 148.405 136.8V125.872H145.616V123.183H148.405V118.485L151.943 118.487ZM174.397 136.12C173.547 139.15 170.825 141.94 166.163 141.94C160.243 141.94 157.046 137.617 157.046 132.307C157.046 126.623 160.856 122.845 166.062 122.845C171.711 122.845 175.011 127.474 174.635 133.432H160.686C161.027 136.803 163.169 138.913 166.027 138.913C168.578 138.913 170.076 137.858 170.825 136.121L174.397 136.12ZM170.962 130.639C170.859 127.915 168.955 125.736 166.029 125.736C163.273 125.736 161.232 127.165 160.755 130.639H170.962ZM177.595 141.498V116.82H181.132V141.498H177.595ZM185.386 141.498V116.82H188.924V141.498H185.386ZM196.716 120.733H193.179V116.818H196.716V120.733ZM196.716 141.498H193.179V123.186H196.716V141.498ZM216.687 123.184V139.353C216.687 142.722 215.972 144.527 214.713 145.787C213.317 147.251 211.106 148 208.317 148C204.233 148 201.24 146.23 200.661 142.383H204.301C204.675 144.052 205.73 145.038 208.383 145.038C210.119 145.038 211.309 144.561 212.058 143.71C212.772 142.927 213.146 141.973 213.146 140.101V138.161C212.023 140.033 210.185 141.191 207.499 141.191C203.245 141.191 199.707 137.82 199.707 132C199.707 126.213 203.245 122.843 207.499 122.843C210.187 122.843 212.023 124.001 213.146 125.873V123.184H216.684H216.687ZM203.486 132C203.486 135.982 205.391 138.298 208.317 138.298C211.039 138.298 213.284 136.393 213.284 132C213.284 127.643 211.039 125.771 208.317 125.771C205.391 125.771 203.486 128.085 203.486 132ZM236.997 136.12C236.147 139.15 233.425 141.94 228.763 141.94C222.843 141.94 219.646 137.617 219.646 132.307C219.646 126.623 223.456 122.845 228.662 122.845C234.311 122.845 237.61 127.474 237.235 133.432H223.286C223.626 136.803 225.769 138.913 228.627 138.913C231.178 138.913 232.676 137.858 233.425 136.121L236.997 136.12ZM233.562 130.639C233.459 127.915 231.555 125.736 228.629 125.736C225.873 125.736 223.831 127.165 223.355 130.639H233.562ZM249.483 122.843C253.906 122.843 255.607 125.703 255.607 129.957V141.497H252.069V130.91C252.069 128.255 251.627 125.804 248.292 125.804C245.23 125.804 243.732 128.017 243.732 131.659V141.497H240.194V123.184H243.732V125.839C244.787 124.034 246.625 122.843 249.483 122.843ZM271.497 129.38C271.123 127.302 269.252 125.873 266.937 125.873C264.385 125.873 262.037 127.881 262.037 132.34C262.037 136.867 264.42 138.91 266.937 138.91C269.182 138.91 271.156 137.582 271.632 135.404H275.205C274.489 139.251 270.918 141.94 266.869 141.94C261.596 141.94 258.262 137.889 258.262 132.375C258.262 126.929 261.698 122.843 267.108 122.843C271.293 122.843 274.49 125.804 275.034 129.38H271.497ZM294.29 136.12C293.441 139.15 290.718 141.94 286.056 141.94C280.136 141.94 276.939 137.617 276.939 132.307C276.939 126.623 280.749 122.845 285.955 122.845C291.604 122.845 294.904 127.474 294.528 133.432H280.579C280.92 136.803 283.062 138.913 285.921 138.913C288.471 138.913 289.969 137.858 290.718 136.121L294.29 136.12ZM290.854 130.639C290.751 127.915 288.847 125.736 285.921 125.736C283.165 125.736 281.123 127.165 280.647 130.639H290.854Z"
+        fill="#005aff"
+      ></path>
+    </g>
+  </svg>
+</div>
+<!-- End of loading screen -->
+```
+---
+## Loading Screen Dark Theme
+The loading screen can be displayed in dark mode, which is suitable for low-light environments or user preferences.
+```html
+<div style="height: 400px">Content Placeholder</div>
+<!-- Begin of loading screen -->
+<div
+  aria-busy="true"
+  role="status"
+  style="
+    align-items: center;
+    background: #000206;
+    display: flex;
+    inset: 0;
+    justify-content: center;
+    position: absolute;
+    will-change: transform;
+    z-index: calc(infinity);
+  "
+>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 360 360"
+    width="360"
+    height="360"
+    aria-label="Loading"
+    role="img"
+  >
+    <title>Loading</title>
+    <g transform="translate(180 180)" fill="#005aff">
+      <circle cx="0" cy="-171" r="5" opacity="1"></circle>
+      <circle cx="65" cy="-158" r="5" opacity="0">
+        <animate
+          attributeName="opacity"
+          values="1;1;0;0"
+          keyTimes="0;0.5;0.5;1"
+          repeatCount="indefinite"
+          dur="1.5s"
+          begin="0.09375s"
+        ></animate>
+      </circle>
+      <circle cx="121" cy="-121" r="5" opacity="0">
+        <animate
+          attributeName="opacity"
+          values="1;1;0;0"
+          keyTimes="0;0.5;0.5;1"
+          repeatCount="indefinite"
+          dur="1.5s"
+          begin="0.140625s"
+        ></animate>
+      </circle>
+      <circle cx="158" cy="-65" r="5" opacity="0">
+        <animate
+          attributeName="opacity"
+          values="1;1;0;0"
+          keyTimes="0;0.5;0.5;1"
+          repeatCount="indefinite"
+          dur="1.5s"
+          begin="0.1875s"
+        ></animate>
+      </circle>
+      <circle cx="171" cy="0" r="5" opacity="0">
+        <animate
+          attributeName="opacity"
+          values="1;1;0;0"
+          keyTimes="0;0.5;0.5;1"
+          repeatCount="indefinite"
+          dur="1.5s"
+          begin="0.234375s"
+        ></animate>
+      </circle>
+      <circle cx="158" cy="65" r="5" opacity="0">
+        <animate
+          attributeName="opacity"
+          values="1;1;0;0"
+          keyTimes="0;0.5;0.5;1"
+          repeatCount="indefinite"
+          dur="1.5s"
+          begin="0.28125s"
+        ></animate>
+      </circle>
+      <circle cx="121" cy="121" r="5" opacity="0">
+        <animate
+          attributeName="opacity"
+          values="1;1;0;0"
+          keyTimes="0;0.5;0.5;1"
+          repeatCount="indefinite"
+          dur="1.5s"
+          begin="0.328125s"
+        ></animate>
+      </circle>
+      <circle cx="65" cy="158" r="5" opacity="0">
+        <animate
+          attributeName="opacity"
+          values="1;1;0;0"
+          keyTimes="0;0.5;0.5;1"
+          repeatCount="indefinite"
+          dur="1.5s"
+          begin="0.375s"
+        ></animate>
+      </circle>
+      <circle cx="0" cy="171" r="5" opacity="0">
+        <animate
+          attributeName="opacity"
+          values="1;1;0;0"
+          keyTimes="0;0.5;0.5;1"
+          repeatCount="indefinite"
+          dur="1.5s"
+          begin="0.421875s"
+        ></animate>
+      </circle>
+      <circle cx="-65" cy="158" r="5" opacity="0">
+        <animate
+          attributeName="opacity"
+          values="1;1;0;0"
+          keyTimes="0;0.5;0.5;1"
+          repeatCount="indefinite"
+          dur="1.5s"
+          begin="0.46875s"
+        ></animate>
+      </circle>
+      <circle cx="-121" cy="121" r="5" opacity="0">
+        <animate
+          attributeName="opacity"
+          values="1;1;0;0"
+          keyTimes="0;0.5;0.5;1"
+          repeatCount="indefinite"
+          dur="1.5s"
+          begin="0.515625s"
+        ></animate>
+      </circle>
+      <circle cx="-158" cy="65" r="5" opacity="0">
+        <animate
+          attributeName="opacity"
+          values="1;1;0;0"
+          keyTimes="0;0.5;0.5;1"
+          repeatCount="indefinite"
+          dur="1.5s"
+          begin="0.5625s"
+        ></animate>
+      </circle>
+      <circle cx="-171" cy="0" r="5" opacity="0">
+        <animate
+          attributeName="opacity"
+          values="1;1;0;0"
+          keyTimes="0;0.5;0.5;1"
+          repeatCount="indefinite"
+          dur="1.5s"
+          begin="0.609375s"
+        ></animate>
+      </circle>
+      <circle cx="-158" cy="-65" r="5" opacity="0">
+        <animate
+          attributeName="opacity"
+          values="1;1;0;0"
+          keyTimes="0;0.5;0.5;1"
+          repeatCount="indefinite"
+          dur="1.5s"
+          begin="0.65625s"
+        ></animate>
+      </circle>
+      <circle cx="-121" cy="-121" r="5" opacity="0">
+        <animate
+          attributeName="opacity"
+          values="1;1;0;0"
+          keyTimes="0;0.5;0.5;1"
+          repeatCount="indefinite"
+          dur="1.5s"
+          begin="0.703125s"
+        ></animate>
+      </circle>
+      <circle cx="-65" cy="-158" r="5" opacity="0">
+        <animate
+          attributeName="opacity"
+          values="1;1;0;0"
+          keyTimes="0;0.5;0.5;1"
+          repeatCount="indefinite"
+          dur="1.5s"
+          begin="0.75s"
+        ></animate>
+      </circle>
+    </g>
+    <g transform="translate(180 180) scale(0.58) translate(-147.5 -74)">
+      <path
+        d="M0.153685 70.3263H54.2782C62.1961 68.7465 61.3146 58.7595 54.2782 57.3757H26.4942C11.7042 57.3757 0 44.7431 0 29.6971C0 15.2239 10.8168 1.67781 26.4942 1.67781H56.9828C69.5519 1.67781 78.5289 11.0934 78.5289 23.0341H26.4957C19.4985 24.035 19.0555 34.7637 26.4942 35.9832H54.2029C69.4088 36.3902 81.5303 48.4982 81.5303 63.8276C81.5303 77.9526 69.5504 92.1424 54.2767 92.1424H25.7032C13.5454 92.1424 0.150673 85.5758 0.150673 70.3263H0.153685ZM89.5521 1.67329V92.1408H110.907V1.67329H89.5521ZM208.029 69.2681L188.933 58.8937C184.736 67.0551 176.273 72.5242 166.773 72.5242C153.199 72.5242 141.84 61.3524 141.84 47.1309C141.84 32.9095 153.198 21.7392 166.773 21.7392C176.082 21.7392 184.349 26.9957 188.625 34.8828L207.746 24.5596C199.828 9.92365 184.449 0 166.773 0C141.002 0 120.113 21.1 120.113 47.1309C120.113 73.1618 141.002 94.2649 166.773 94.2649C184.622 94.2649 200.18 84.1437 208.029 69.2681ZM216.078 1.67329V92.1408H237.675V57.0893H245.266L267.993 92.1408H294.556L264.406 47.4776L295 1.67329H268.446L245.995 37.9565H237.677V1.67329H216.078ZM0.748842 123.219C0.748842 118.555 5.61405 116.376 9.76508 116.376C14.2898 116.376 18.2027 118.452 19.155 123.422H15.4123C14.6303 120.495 11.9408 119.61 9.59482 119.61C7.79127 119.61 4.69495 120.462 4.69495 123.048C4.69495 125.091 6.32824 126.146 8.43766 126.588L11.3637 127.201C15.3113 128.019 19.6311 129.515 19.6311 134.486C19.6311 139.388 14.9362 141.94 10.1387 141.94C4.42224 141.94 0.578582 138.774 0 133.601H3.8105C4.5262 136.971 6.80437 138.706 10.2759 138.706C13.4746 138.706 15.7197 137.175 15.7197 134.792C15.7197 132.238 13.2697 131.217 10.6164 130.673L7.58786 130.06C4.08322 129.345 0.750347 127.37 0.750347 123.217L0.748842 123.219ZM39.4656 136.12C38.6158 139.15 35.8932 141.94 31.2314 141.94C25.3115 141.94 22.1142 137.617 22.1142 132.307C22.1142 126.623 25.9247 122.845 31.1304 122.845C36.7791 122.845 40.0789 127.474 39.7037 133.432H25.7544C26.095 136.803 28.2375 138.913 31.0958 138.913C33.6467 138.913 35.1443 137.858 35.8932 136.121L39.4656 136.12ZM36.0303 130.639C35.9278 127.915 34.0233 125.736 31.0973 125.736C28.3415 125.736 26.2999 127.165 25.8237 130.639H36.0303ZM52.1221 122.843C56.5443 122.843 58.2454 125.703 58.2454 129.957V141.497H54.7076V130.91C54.7076 128.255 54.2662 125.804 50.9303 125.804C47.8686 125.804 46.3709 128.017 46.3709 131.659V141.497H42.8332V123.184H46.3709V125.839C47.4256 124.034 49.2639 122.843 52.1221 122.843ZM68.5891 125.668C66.8533 125.668 64.9835 126.383 64.9835 127.881C64.9835 129.243 65.868 129.821 67.5344 130.162L70.1546 130.673C73.6246 131.355 76.6531 132.545 76.6531 136.12C76.6531 139.83 73.1816 141.94 68.9643 141.94C64.3371 141.94 61.5135 139.251 61.0705 135.812H64.6761C65.1523 137.888 66.5128 139.113 69.0652 139.113C71.3449 139.113 73.1138 138.161 73.1138 136.527C73.1138 134.825 71.5152 134.143 69.6091 133.77L66.8533 133.225C64.0975 132.681 61.512 131.456 61.512 128.017C61.512 124.784 64.9142 122.809 68.9281 122.809C72.603 122.809 75.5622 124.749 76.2432 128.29H72.7386C72.2278 126.418 70.6654 125.668 68.5891 125.668ZM87.506 141.94C83.1847 141.94 78.6254 139.012 78.6254 132.408C78.6254 125.771 83.1847 122.843 87.506 122.843C91.8604 122.843 96.4198 125.771 96.4198 132.408C96.4198 139.012 91.8604 141.94 87.506 141.94ZM92.6771 132.408C92.6771 127.847 90.1925 125.839 87.506 125.839C84.8512 125.839 82.3681 127.779 82.3681 132.408C82.3681 136.935 84.8512 138.945 87.506 138.945C90.194 138.945 92.6771 136.869 92.6771 132.408ZM107.306 126.724C104.583 126.724 103.155 128.052 103.155 131.897V141.497H99.6171V123.184H103.087V126.418C104.039 124.342 105.876 123.149 108.156 123.116C108.462 123.116 108.837 123.116 109.143 123.151V126.828C108.496 126.76 107.883 126.724 107.306 126.724ZM119.895 141.498V116.82H123.773V141.498H119.895ZM137.654 122.843C142.077 122.843 143.778 125.703 143.778 129.957V141.497H140.24V130.91C140.24 128.255 139.798 125.804 136.462 125.804C133.401 125.804 131.903 128.017 131.903 131.659V141.497H128.365V123.184H131.903V125.839C132.958 124.034 134.796 122.843 137.654 122.843ZM151.943 118.487V123.184H155.548V125.873H151.943V136.323C151.943 138.195 152.248 138.672 154.017 138.672H155.515V141.497H152.929C149.221 141.497 148.405 140.577 148.405 136.8V125.872H145.616V123.183H148.405V118.485L151.943 118.487ZM174.397 136.12C173.547 139.15 170.825 141.94 166.163 141.94C160.243 141.94 157.046 137.617 157.046 132.307C157.046 126.623 160.856 122.845 166.062 122.845C171.711 122.845 175.011 127.474 174.635 133.432H160.686C161.027 136.803 163.169 138.913 166.027 138.913C168.578 138.913 170.076 137.858 170.825 136.121L174.397 136.12ZM170.962 130.639C170.859 127.915 168.955 125.736 166.029 125.736C163.273 125.736 161.232 127.165 160.755 130.639H170.962ZM177.595 141.498V116.82H181.132V141.498H177.595ZM185.386 141.498V116.82H188.924V141.498H185.386ZM196.716 120.733H193.179V116.818H196.716V120.733ZM196.716 141.498H193.179V123.186H196.716V141.498ZM216.687 123.184V139.353C216.687 142.722 215.972 144.527 214.713 145.787C213.317 147.251 211.106 148 208.317 148C204.233 148 201.24 146.23 200.661 142.383H204.301C204.675 144.052 205.73 145.038 208.383 145.038C210.119 145.038 211.309 144.561 212.058 143.71C212.772 142.927 213.146 141.973 213.146 140.101V138.161C212.023 140.033 210.185 141.191 207.499 141.191C203.245 141.191 199.707 137.82 199.707 132C199.707 126.213 203.245 122.843 207.499 122.843C210.187 122.843 212.023 124.001 213.146 125.873V123.184H216.684H216.687ZM203.486 132C203.486 135.982 205.391 138.298 208.317 138.298C211.039 138.298 213.284 136.393 213.284 132C213.284 127.643 211.039 125.771 208.317 125.771C205.391 125.771 203.486 128.085 203.486 132ZM236.997 136.12C236.147 139.15 233.425 141.94 228.763 141.94C222.843 141.94 219.646 137.617 219.646 132.307C219.646 126.623 223.456 122.845 228.662 122.845C234.311 122.845 237.61 127.474 237.235 133.432H223.286C223.626 136.803 225.769 138.913 228.627 138.913C231.178 138.913 232.676 137.858 233.425 136.121L236.997 136.12ZM233.562 130.639C233.459 127.915 231.555 125.736 228.629 125.736C225.873 125.736 223.831 127.165 223.355 130.639H233.562ZM249.483 122.843C253.906 122.843 255.607 125.703 255.607 129.957V141.497H252.069V130.91C252.069 128.255 251.627 125.804 248.292 125.804C245.23 125.804 243.732 128.017 243.732 131.659V141.497H240.194V123.184H243.732V125.839C244.787 124.034 246.625 122.843 249.483 122.843ZM271.497 129.38C271.123 127.302 269.252 125.873 266.937 125.873C264.385 125.873 262.037 127.881 262.037 132.34C262.037 136.867 264.42 138.91 266.937 138.91C269.182 138.91 271.156 137.582 271.632 135.404H275.205C274.489 139.251 270.918 141.94 266.869 141.94C261.596 141.94 258.262 137.889 258.262 132.375C258.262 126.929 261.698 122.843 267.108 122.843C271.293 122.843 274.49 125.804 275.034 129.38H271.497ZM294.29 136.12C293.441 139.15 290.718 141.94 286.056 141.94C280.136 141.94 276.939 137.617 276.939 132.307C276.939 126.623 280.749 122.845 285.955 122.845C291.604 122.845 294.904 127.474 294.528 133.432H280.579C280.92 136.803 283.062 138.913 285.921 138.913C288.471 138.913 289.969 137.858 290.718 136.121L294.29 136.12ZM290.854 130.639C290.751 127.915 288.847 125.736 285.921 125.736C283.165 125.736 281.123 127.165 280.647 130.639H290.854Z"
+        fill="#005aff"
+      ></path>
+    </g>
+  </svg>
+</div>
+<!-- End of loading screen -->
+```

package/data/layers/full/component/component:syn-icon-button/components/icon-button.component.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-/* eslint-disable */
+import type { CSSResultGroup } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { html, literal } from 'lit/static-html.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -7,8 +7,6 @@ import componentStyles from '../../styles/component.styles.js';
 import SynergyElement from '../../internal/synergy-element.js';
 import SynIcon from '../icon/icon.component.js';
 import styles from './icon-button.styles.js';
-import customStyles from './icon-button.custom.styles.js';
-import type { CSSResultGroup } from 'lit';
 import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';
 /**
@@ -26,7 +24,8 @@ import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator
  */
 @enableDefaultSettings('SynIconButton')
 export default class SynIconButton extends SynergyElement {
-  static styles: CSSResultGroup = [componentStyles, styles, customStyles];
+  static styles: CSSResultGroup = [componentStyles, styles];
   static dependencies = { 'syn-icon': SynIcon };
   @query('.icon-button') button: HTMLButtonElement | HTMLLinkElement;
@@ -67,10 +66,10 @@ export default class SynIconButton extends SynergyElement {
   * The color of the icon button.
   * The default "currentColor" makes it possible to easily style the icon button from outside without any CSS variables.
   */
-  @property({ reflect: true }) color: 'currentColor' | 'primary' | 'neutral'  = 'currentColor';
+  @property({ reflect: true }) color: 'currentColor' | 'primary' | 'neutral' = 'currentColor';
   /** Disables the button. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
+  @property({ reflect: true, type: Boolean }) disabled = false;
   private handleBlur() {
     this.hasFocus = false;
@@ -104,11 +103,12 @@ export default class SynIconButton extends SynergyElement {
     this.button.blur();
   }
+  // eslint-disable-next-line complexity
   render() {
-    const isLink = this.href ? true : false;
+    const isLink = !!this.href;
     const tag = isLink ? literal`a` : literal`button`;
-    /* eslint-disable lit/binding-positions, lit/no-invalid-html */
+    /* eslint-disable lit/binding-positions, lit/no-invalid-html, @typescript-eslint/unbound-method */
     return html`
       <${tag}
         part="base"
@@ -116,9 +116,9 @@ export default class SynIconButton extends SynergyElement {
           'icon-button': true,
           'icon-button--disabled': !isLink && this.disabled,
           'icon-button--focused': this.hasFocus,
-          'icon-button--small': this.size === 'small',
-          'icon-button--medium': this.size === 'medium',
           'icon-button--large': this.size === 'large',
+          'icon-button--medium': this.size === 'medium',
+          'icon-button--small': this.size === 'small',
         })}
         ?disabled=${ifDefined(isLink ? undefined : this.disabled)}
         type=${ifDefined(isLink ? undefined : 'button')}

package/data/layers/full/component/component:syn-icon-button/components/icon-button.styles.ts CHANGED Viewed

@@ -1,26 +1,36 @@
-/* eslint-disable */
 import { css } from 'lit';
 export default css`
-	/* stylelint-disable */
   :host {
-    display: inline-block;
     color: var(--syn-color-neutral-600);
+    display: inline-block;
   }
   .icon-button {
-    flex: 0 0 auto;
-    display: flex;
     align-items: center;
+    /* stylelint-disable-next-line property-no-vendor-prefix */
+    -webkit-appearance: none;
+    appearance: none;
     background: none;
     border: none;
-    border-radius: var(--syn-border-radius-medium);
+    border-radius: 0;
+    color: currentColor;
+    cursor: pointer;
+    display: flex;
+    flex: 0 0 auto;
     font-size: inherit;
-    color: inherit;
     padding: var(--syn-spacing-x-small);
-    cursor: pointer;
     transition: var(--syn-transition-x-fast) color;
-    -webkit-appearance: none;
+  }
+  .icon-button:focus {
+    outline: none;
+  }
+  .icon-button:focus-visible {
+    border-radius: var(--syn-icon-button-focus-ring-border-radius); /* Remove round borders */
+    outline: var(--syn-focus-ring);
+    outline-offset: var(--syn-focus-ring-offset);
   }
   .icon-button:hover:not(.icon-button--disabled),
@@ -32,21 +42,70 @@ export default css`
     color: var(--syn-color-primary-700);
   }
-  .icon-button:focus {
-    outline: none;
-  }
   .icon-button--disabled {
-    opacity: 0.5;
     cursor: not-allowed;
-  }
-  .icon-button:focus-visible {
-    outline: var(--syn-focus-ring);
-    outline-offset: var(--syn-focus-ring-offset);
+    opacity: var(--syn-input-disabled-opacity); /* #429: Use token for opacity */
   }
   .icon-button__icon {
     pointer-events: none;
   }
+  /* Colors */
+  :host([color="currentColor"]) {
+    color: currentColor;
+  }
+  :host([color="primary"]),
+  :host([color="primary"]) .icon-button:focus-visible:not(.icon-button--disabled) {
+    color: var(--syn-interactive-emphasis-color);
+  }
+  :host([color="primary"]) .icon-button:hover:not(.icon-button--disabled) {
+    color: var(--syn-interactive-emphasis-color-hover);
+  }
+  :host([color="primary"]) .icon-button:active:not(.icon-button--disabled) {
+    color: var(--syn-interactive-emphasis-color-active);
+  }
+  :host([color="neutral"]) {
+    color: var(--syn-interactive-quiet-color);
+  }
+  :host([color="neutral"]) .icon-button:hover:not(.icon-button--disabled) {
+    color: var(--syn-interactive-quiet-color-hover);
+  }
+  :host([color="neutral"]) .icon-button:active:not(.icon-button--disabled) {
+    color: var(--syn-interactive-quiet-color-active);
+  }
+  :host([color="neutral"]) .icon-button:focus-visible:not(.icon-button--disabled):not(:hover) {
+    color: var(--syn-interactive-quiet-color);
+  }
+  /* Sizes */
+  .icon-button--small {
+    font-size: var(--syn-font-size-medium);
+  }
+  .icon-button--medium {
+    font-size: var(--syn-font-size-x-large);
+  }
+  .icon-button--large {
+    font-size: var(--syn-font-size-2x-large);
+  }
+  /* Force user to set "label" prop */
+  .icon-button[aria-label=""] {
+    border: var(--syn-border-width-large) var(--syn-color-error-600) solid;
+  }
+  .icon-button[aria-label=""]::after {
+    content: "Set label prop for a11y to get rid of this text and border!";
+    font-size: var(--syn-font-size-2x-small);
+    margin-left: var(--syn-spacing-2x-small);
+  }
 `;

package/data/layers/full/component/component:syn-icon-button/components/icon-button.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-/* eslint-disable */
 import SynIconButton from './icon-button.component.js';
 export * from './icon-button.component.js';

package/data/layers/full/setup/setup:angular-package/angular/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,21 @@
 # @synergy-design-system/angular
+## 3.13.1
+### Patch Changes
+- Updated dependencies [[`2444517`](https://github.com/synergy-design-system/synergy-design-system/commit/2444517aaedc22b115d9572dd14d47c43189ec5d)]:
+  - @synergy-design-system/components@3.13.1
+  - @synergy-design-system/tokens@3.13.1
+## 3.13.0
+### Patch Changes
+- Updated dependencies [[`930328a`](https://github.com/synergy-design-system/synergy-design-system/commit/930328af3af87ba91738b89984ad7b11edd78ec5)]:
+  - @synergy-design-system/tokens@3.13.0
+  - @synergy-design-system/components@3.13.0
 ## 3.12.1
 ### Patch Changes