@affinda/wc 0.0.1 → 0.0.2

package/dist/collection/assets/illustrations/thinking-white-ivory.svg

@@ -0,0 +1,89 @@
+<svg width="432" height="432" viewBox="0 0 432 432" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="432" height="432" fill="#FFF9EE"/>
+<g filter="url(#filter0_g_536_16863)">
+<path d="M251.219 193.578C272.974 203.788 287.512 194.343 293.043 184.91C299.31 174.224 308.372 148.452 285.019 136.626C295.83 126.484 295.808 105.044 290.378 94.1977C280.218 73.9067 258.256 72.2432 249.359 72.0715C239.307 71.8783 225.959 76.2534 218.779 83.2938C221.366 69.3312 215.492 59.0175 206.545 51.5229C203.186 48.711 199.125 46.8401 194.94 45.5415C181.736 41.4453 166.868 43.0337 154.83 49.8343C142.792 56.635 133.752 68.5442 130.446 81.9666C126.694 72.2897 116.559 67.546 105.047 67.7607C94.6688 67.9539 80.2948 71.102 71.1474 85.5261C61.6065 100.576 64.4433 124.144 74.2812 130.612C56.1152 133.134 43.1972 154.187 43.3153 176.117C43.4691 204.256 69.3372 218.548 84.9132 219.611C106.081 221.052 117.36 211.805 124.093 200.708C127.567 219.836 145.407 224.812 149.206 226.053C156.919 228.565 167.605 227.717 175.268 224.458C185.148 220.251 192.207 213.218 193.337 203.051C204.252 213.279 221.824 219.335 234.989 212.23C242.412 208.227 248.114 201.409 251.216 193.578H251.219Z" fill="#C0AB8D"/>
+</g>
+<g filter="url(#filter1_g_536_16863)">
+<path d="M133.95 95.4375C146.995 92.7337 155.347 99.1681 158.256 105.401L158.257 105.402C162.016 113.467 163.131 122.086 157.394 130.303C151.916 138.147 140.739 142.728 130.851 139.939L130.381 139.801C125.173 138.202 121.393 134.613 119.023 130.685C116.683 126.807 115.538 122.309 115.885 118.498L115.886 118.495C116.236 114.677 117.205 109.71 119.86 105.283C122.563 100.777 126.957 96.9475 133.767 95.4844C133.827 95.4684 133.888 95.4504 133.95 95.4375ZM151.912 108.359C150.378 105.074 145.269 100.282 135.479 102.269C135.443 102.277 135.407 102.289 135.37 102.297C130.554 103.295 127.684 105.847 125.863 108.884C123.969 112.041 123.16 115.831 122.857 119.135C122.667 121.226 123.316 124.251 125.016 127.068C126.686 129.836 129.194 132.115 132.435 133.109H132.436C139.323 135.224 147.701 131.958 151.655 126.296C155.436 120.881 155.073 115.141 151.912 108.36V108.359Z" fill="#C6D5D1"/>
+</g>
+<g filter="url(#filter2_g_536_16863)">
+<path d="M148.276 159.659C152.147 158.857 154.428 160.758 155.18 162.369C156.349 164.878 156.599 167.305 154.99 169.609C153.381 171.913 150.031 173.242 147.176 172.366C144.32 171.489 142.926 168.398 143.108 166.403C143.328 163.995 144.31 160.483 148.276 159.661V159.659Z" fill="#C6D5D1"/>
+</g>
+<g filter="url(#filter3_g_536_16863)">
+<path d="M93.4882 143.871C94.875 142.667 96.4575 142.835 97.2526 143.056C97.9385 143.247 98.503 143.592 98.6498 143.68L103.907 146.763C106.39 148.218 109.404 149.979 112.345 151.691C115.287 153.404 118.15 155.062 120.337 156.312C121.431 156.938 122.345 157.455 123.011 157.824C123.345 158.009 123.602 158.147 123.78 158.241C123.859 158.283 123.908 158.308 123.933 158.32C124.85 158.708 125.562 159.47 125.884 160.42C126.232 161.448 126.083 162.58 125.481 163.484L125.479 163.487C125.108 164.043 124.586 164.48 123.978 164.748L123.712 164.852L123.708 164.854C123.704 164.856 123.7 164.857 123.694 164.859C123.681 164.864 123.662 164.87 123.638 164.878C123.589 164.895 123.517 164.921 123.424 164.953C123.236 165.018 122.96 165.112 122.61 165.233C121.909 165.475 120.908 165.82 119.706 166.233C117.304 167.059 114.097 168.157 110.885 169.242C107.676 170.327 104.446 171.405 102.002 172.19C100.787 172.58 99.7349 172.908 98.9694 173.128C98.5976 173.235 98.2329 173.335 97.9315 173.402C97.801 173.432 97.5636 173.483 97.3014 173.51C97.1983 173.521 96.8847 173.551 96.4973 173.509C96.3133 173.488 95.8971 173.431 95.4179 173.214C94.9384 172.996 94.0119 172.434 93.5682 171.223C93.4858 170.998 93.445 170.812 93.432 170.753C93.4135 170.668 93.4016 170.597 93.3944 170.553C93.3798 170.464 93.3691 170.386 93.3631 170.336C93.3506 170.231 93.3405 170.117 93.3314 170.014C93.3127 169.802 93.2914 169.524 93.2691 169.203C93.2242 168.554 93.1687 167.661 93.1067 166.611C92.9827 164.509 92.8308 161.74 92.683 158.97C92.3892 153.466 92.1058 147.841 92.0944 147.471L92.0934 147.453C92.0861 147.163 92.0934 146.726 92.1801 146.249C92.2324 145.962 92.445 144.789 93.4723 143.885C93.4775 143.881 93.483 143.876 93.4882 143.871ZM99.6729 158.596C99.8037 161.048 99.938 163.489 100.052 165.463C102.421 164.7 105.526 163.664 108.643 162.611C110.499 161.984 112.353 161.352 114.051 160.771C112.428 159.834 110.638 158.797 108.824 157.741C105.455 155.781 101.994 153.754 99.3385 152.198C99.4363 154.1 99.553 156.351 99.6729 158.596Z" fill="#C6D5D1"/>
+</g>
+<g filter="url(#filter4_g_536_16863)">
+<path d="M363.477 346.127C363.824 346.004 365.189 345.566 366.611 346.429C367.036 346.687 367.412 347.045 367.515 347.141C367.72 347.332 367.957 347.564 368.21 347.819C368.72 348.333 369.377 349.018 370.126 349.81C371.628 351.398 373.562 353.484 375.549 355.634C379.066 359.441 382.696 363.395 384.555 365.339L385.239 366.043L385.244 366.048C386.757 367.582 386.936 370.017 385.594 371.757C385.578 371.778 385.559 371.797 385.543 371.817C384.122 373.671 380.021 379.009 376.186 383.859C374.247 386.312 372.355 388.667 370.907 390.388C370.191 391.24 369.541 391.986 369.032 392.521C368.793 392.772 368.498 393.069 368.198 393.316C368.075 393.417 367.773 393.661 367.364 393.863C367.172 393.958 366.725 394.161 366.119 394.223C365.459 394.291 364.301 394.202 363.321 393.272C362.997 392.964 358.206 388.25 353.556 383.55C351.226 381.195 348.901 378.812 347.171 376.966C346.312 376.05 345.564 375.227 345.027 374.592C344.768 374.286 344.499 373.953 344.283 373.642C344.185 373.501 344.017 373.249 343.871 372.94C343.8 372.791 343.671 372.5 343.588 372.119C343.523 371.823 343.354 370.911 343.819 369.882L343.93 369.659C344.042 369.45 344.147 369.294 344.153 369.285C344.22 369.183 344.296 369.071 344.373 368.96C344.53 368.735 344.738 368.444 344.983 368.105C345.477 367.424 346.16 366.501 346.965 365.425C348.576 363.272 350.704 360.474 352.858 357.716C355.005 354.968 357.207 352.223 358.955 350.19C359.819 349.186 360.63 348.287 361.297 347.638C361.612 347.331 362.007 346.969 362.426 346.678C362.619 346.544 362.99 346.301 363.477 346.127ZM364.262 354.754C362.622 356.66 360.501 359.303 358.374 362.026C356.253 364.74 354.155 367.499 352.569 369.619C352.13 370.206 351.732 370.741 351.385 371.211C351.652 371.504 351.949 371.828 352.277 372.178C353.941 373.953 356.213 376.282 358.533 378.626C360.848 380.966 363.192 383.304 364.992 385.089C365.224 385.319 365.448 385.539 365.66 385.75C367.024 384.123 368.817 381.894 370.695 379.518C373.639 375.794 376.745 371.77 378.655 369.288C376.577 367.081 373.382 363.605 370.407 360.384C368.419 358.233 366.51 356.175 365.04 354.62C364.922 354.495 364.806 354.374 364.694 354.256C364.556 354.414 364.412 354.58 364.262 354.754Z" fill="#C6D5D1"/>
+</g>
+<g filter="url(#filter5_g_536_16863)">
+<path d="M340.076 396.914C339.141 396.847 324.935 394.06 324.258 394.117C323.581 394.173 320.618 409.93 320.695 410.378C320.772 410.827 337.247 414.038 337.66 414.1C338.072 414.162 340.078 396.914 340.078 396.914H340.076Z" fill="#C6D5D1"/>
+</g>
+<g filter="url(#filter6_g_536_16863)">
+<path d="M354.776 234.592C354.776 231.556 355.51 198.013 344.024 165.301C338.291 148.971 329.587 133.077 316.436 121.288C303.358 109.564 285.693 101.723 261.615 101.723C237.344 101.723 219.877 108.1 207.207 117.431C194.505 126.786 186.373 139.3 181.118 151.957C175.859 164.625 173.528 177.33 172.381 186.894C171.808 191.67 171.533 195.632 171.327 198.439C171.227 199.804 171.138 201.003 171.029 201.847C170.98 202.231 170.9 202.767 170.747 203.258C170.686 203.453 170.505 204.022 170.063 204.58C169.824 204.883 169.369 205.36 168.637 205.67C168.31 205.809 167.971 205.893 167.632 205.93C167.601 205.936 167.565 205.942 167.524 205.95C167.338 205.985 167.05 206.044 166.674 206.129C165.92 206.301 164.818 206.582 163.486 207.013C160.811 207.878 157.268 209.325 153.751 211.641C146.821 216.204 139.934 224.137 139.934 238.192C139.934 245.247 141.847 250.409 144.57 254.247C147.32 258.122 151.034 260.839 154.887 262.742C158.744 264.647 162.644 265.687 165.607 266.247C167.081 266.525 168.302 266.68 169.142 266.765C169.561 266.808 169.884 266.833 170.094 266.847C170.199 266.854 170.275 266.858 170.321 266.861C170.344 266.862 170.36 266.862 170.368 266.863H170.369C172.205 266.931 173.677 268.407 173.738 270.244L177.516 383.556C177.58 385.488 176.066 387.106 174.134 387.17C172.202 387.235 170.584 385.72 170.52 383.789L166.844 273.536C166.098 273.433 165.245 273.301 164.309 273.125C160.933 272.487 156.381 271.287 151.787 269.018C147.188 266.747 142.45 263.356 138.861 258.298C135.246 253.204 132.934 246.608 132.934 238.192C132.934 221.306 141.439 211.367 149.901 205.794C154.08 203.043 158.235 201.355 161.332 200.353C162.437 199.995 163.416 199.723 164.224 199.519C164.26 199.066 164.302 198.538 164.347 197.928C164.551 195.137 164.837 191.02 165.432 186.06C166.621 176.151 169.057 162.752 174.653 149.272C180.255 135.78 189.067 122.097 203.056 111.794C217.077 101.468 236.046 94.7232 261.615 94.7231C287.378 94.7231 306.717 103.173 321.108 116.075C335.426 128.91 344.658 145.976 350.629 162.983C362.553 196.945 361.776 231.587 361.776 234.592V270.731C361.776 272.335 360.686 273.733 359.131 274.125L336.322 279.868C336.356 280.382 336.393 280.957 336.426 281.587C336.583 284.569 336.715 288.813 336.619 293.9C336.427 304.052 335.324 317.668 331.638 331.345C327.957 345.004 321.634 358.964 310.836 369.537C299.95 380.195 284.754 387.172 263.88 387.172C261.947 387.172 260.38 385.605 260.38 383.672C260.38 381.739 261.947 380.172 263.88 380.172C283.029 380.172 296.436 373.84 305.939 364.535C315.53 355.144 321.386 342.484 324.879 329.524C328.367 316.583 329.435 303.579 329.62 293.767C329.713 288.872 329.585 284.797 329.436 281.956C329.361 280.536 329.281 279.425 329.22 278.676C329.189 278.302 329.163 278.018 329.146 277.831C329.137 277.737 329.13 277.668 329.126 277.624C329.124 277.601 329.122 277.585 329.121 277.576L329.12 277.567L329.101 277.244C329.078 275.637 330.161 274.201 331.746 273.802L354.776 268.002V234.592ZM166.677 199.003C166.688 199.068 166.759 199.5 167.214 202.417L166.681 199.002C166.679 199.003 166.678 199.003 166.677 199.003ZM168.04 199.048C168.024 199.045 168.009 199.041 167.993 199.038C168.009 199.041 168.024 199.045 168.04 199.048Z" fill="#14343B"/>
+</g>
+<defs>
+<filter id="filter0_g_536_16863" x="42.6209" y="42.6116" width="258.215" height="185.597" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feTurbulence type="fractalNoise" baseFrequency="0.12076154351234436 0.12076154351234436" numOctaves="3" seed="5163" />
+<feDisplacementMap in="shape" scale="1.3871122598648071" xChannelSelector="R" yChannelSelector="G" result="displacedImage" width="100%" height="100%" />
+<feMerge result="effect1_texture_536_16863">
+<feMergeNode in="displacedImage"/>
+</feMerge>
+</filter>
+<filter id="filter1_g_536_16863" x="115.378" y="94.3571" width="46.4552" height="46.8502" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feTurbulence type="fractalNoise" baseFrequency="0.18774552643299103 0.18774552643299103" numOctaves="3" seed="5163" />
+<feDisplacementMap in="shape" scale="0.89221745729446411" xChannelSelector="R" yChannelSelector="G" result="displacedImage" width="100%" height="100%" />
+<feMerge result="effect1_texture_536_16863">
+<feMergeNode in="displacedImage"/>
+</feMerge>
+</filter>
+<filter id="filter2_g_536_16863" x="142.479" y="158.857" width="14.2606" height="14.3937" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feTurbulence type="fractalNoise" baseFrequency="0.13669003546237946 0.13669003546237946" numOctaves="3" seed="5163" />
+<feDisplacementMap in="shape" scale="1.225472092628479" xChannelSelector="R" yChannelSelector="G" result="displacedImage" width="100%" height="100%" />
+<feMerge result="effect1_texture_536_16863">
+<feMergeNode in="displacedImage"/>
+</feMerge>
+</filter>
+<filter id="filter3_g_536_16863" x="91.6452" y="142.453" width="34.8698" height="31.5237" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feTurbulence type="fractalNoise" baseFrequency="0.18774552643299103 0.18774552643299103" numOctaves="3" seed="5163" />
+<feDisplacementMap in="shape" scale="0.89221745729446411" xChannelSelector="R" yChannelSelector="G" result="displacedImage" width="100%" height="100%" />
+<feMerge result="effect1_texture_536_16863">
+<feMergeNode in="displacedImage"/>
+</feMerge>
+</filter>
+<filter id="filter4_g_536_16863" x="343.058" y="345.461" width="43.8868" height="49.2262" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feTurbulence type="fractalNoise" baseFrequency="0.18774552643299103 0.18774552643299103" numOctaves="3" seed="5163" />
+<feDisplacementMap in="shape" scale="0.89221745729446411" xChannelSelector="R" yChannelSelector="G" result="displacedImage" width="100%" height="100%" />
+<feMerge result="effect1_texture_536_16863">
+<feMergeNode in="displacedImage"/>
+</feMerge>
+</filter>
+<filter id="filter5_g_536_16863" x="320.081" y="393.503" width="20.6107" height="21.2098" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feTurbulence type="fractalNoise" baseFrequency="0.13669003546237946 0.13669003546237946" numOctaves="3" seed="5163" />
+<feDisplacementMap in="shape" scale="1.225472092628479" xChannelSelector="R" yChannelSelector="G" result="displacedImage" width="100%" height="100%" />
+<feMerge result="effect1_texture_536_16863">
+<feMergeNode in="displacedImage"/>
+</feMerge>
+</filter>
+<filter id="filter6_g_536_16863" x="132.394" y="94.1838" width="229.932" height="293.528" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feTurbulence type="fractalNoise" baseFrequency="0.15529854595661163 0.15529854595661163" numOctaves="3" seed="5163" />
+<feDisplacementMap in="shape" scale="1.0786310434341431" xChannelSelector="R" yChannelSelector="G" result="displacedImage" width="100%" height="100%" />
+<feMerge result="effect1_texture_536_16863">
+<feMergeNode in="displacedImage"/>
+</feMerge>
+</filter>
+</defs>
+</svg>

package/dist/collection/collection-manifest.json

@@ -1,10 +1,11 @@
 {
   "entries": [
-    "components/af-button/af-button.js",
-    "components/af-badge/af-badge.js",
-    "components/af-icon-button/af-icon-button.js",
-    "components/af-card/af-card.js",
-    "components/af-input/af-input.js"
+    "components/af-heading/af-heading.js",
+    "components/af-text/af-text.js",
+    "components/af-color-swatch/af-color-swatch.js",
+    "components/af-container/af-container.js",
+    "components/af-aspect-ratio/af-aspect-ratio.js",
+    "components/af-nav-item/af-nav-item.js"
   ],
   "compiler": {
     "name": "@stencil/core",

package/dist/collection/components/af-aspect-ratio/af-aspect-ratio.css

@@ -0,0 +1,17 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.aspect-ratio-container {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+/* Ensure slotted content fills the container */
+.aspect-ratio-container ::slotted(*) {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}

package/dist/collection/components/af-aspect-ratio/af-aspect-ratio.js

@@ -0,0 +1,117 @@
+import { h } from "@stencil/core";
+/**
+ * A container component that maintains a fixed aspect ratio for its content.
+ * Useful for images, videos, or any content that needs to maintain specific proportions.
+ */
+export class AfAspectRatio {
+    constructor() {
+        /**
+         * The aspect ratio to maintain. Can be:
+         * - A predefined ratio: '1:1', '16:9', '4:3', 'golden-portrait', 'golden-landscape', 'a4-portrait', 'a4-landscape', 'letter-portrait', 'letter-landscape', etc.
+         * - A custom ratio in format 'width / height': '16 / 9', '4 / 3', '1.618 / 1', etc.
+         *
+         * @example
+         * <af-aspect-ratio ratio="16:9">Content</af-aspect-ratio>
+         * <af-aspect-ratio ratio="1.618 / 1">Content</af-aspect-ratio>
+         */
+        this.ratio = '1:1';
+    }
+    getRatioValue() {
+        // Map common ratio shortcuts to actual CSS aspect-ratio values
+        const ratioMap = {
+            // Common ratios
+            '1:1': '1 / 1',
+            '1:2': '1 / 2',
+            '2:1': '2 / 1',
+            '2:3': '2 / 3',
+            '3:1': '3 / 1',
+            '3:2': '3 / 2',
+            '3:4': '3 / 4',
+            '4:1': '4 / 1',
+            '4:3': '4 / 3',
+            '4:5': '4 / 5',
+            '5:2': '5 / 2',
+            '5:4': '5 / 4',
+            '8:3': '8 / 3',
+            '8:5': '8 / 5',
+            // Screen ratios
+            '9:8': '9 / 8',
+            '9:16': '9 / 16',
+            '9:21': '9 / 21',
+            '10:16': '10 / 16',
+            '14:3': '14 / 3',
+            '16:5': '16 / 5',
+            '16:9': '16 / 9',
+            '16:10': '16 / 10',
+            '21:9': '21 / 9',
+            '32:9': '32 / 9',
+            // Golden ratio variants
+            'golden-portrait': '1 / 1.618',
+            'golden-landscape': '1.618 / 1',
+            'golden-portrait-half': '1 / 0.809',
+            'golden-landscape-half': '0.809 / 1',
+            // Paper sizes - A4
+            'a4-portrait': '1 / 1.414',
+            'a4-landscape': '1.414 / 1',
+            'a4-portrait-half': '1 / 0.707',
+            'a4-landscape-half': '0.707 / 1',
+            // Paper sizes - Letter
+            'letter-portrait': '1 / 1.294',
+            'letter-landscape': '1.294 / 1',
+            'letter-portrait-half': '1 / 0.647',
+            'letter-landscape-half': '0.647 / 1',
+            // Special
+            '6:7': '6 / 7'
+        };
+        // If it's a predefined ratio, return the mapped value
+        if (ratioMap[this.ratio]) {
+            return ratioMap[this.ratio];
+        }
+        // Otherwise, assume it's a custom ratio already in the correct format
+        return this.ratio;
+    }
+    render() {
+        const ratioValue = this.getRatioValue();
+        return (h("div", { key: '02bfa5463911ecd25903521e90a0570bb3bca0ad', class: "aspect-ratio-container", style: { aspectRatio: ratioValue } }, h("slot", { key: '9575c859052e8f1b1b362d9395fdfdf43d46b0b4' })));
+    }
+    static get is() { return "af-aspect-ratio"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-aspect-ratio.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-aspect-ratio.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "ratio": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<af-aspect-ratio ratio=\"16:9\">Content</af-aspect-ratio>\n<af-aspect-ratio ratio=\"1.618 / 1\">Content</af-aspect-ratio>"
+                        }],
+                    "text": "The aspect ratio to maintain. Can be:\n- A predefined ratio: '1:1', '16:9', '4:3', 'golden-portrait', 'golden-landscape', 'a4-portrait', 'a4-landscape', 'letter-portrait', 'letter-landscape', etc.\n- A custom ratio in format 'width / height': '16 / 9', '4 / 3', '1.618 / 1', etc."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ratio",
+                "defaultValue": "'1:1'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-aspect-ratio.js.map

package/dist/collection/components/af-aspect-ratio/af-aspect-ratio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-aspect-ratio.js","sourceRoot":"","sources":["../../../src/components/af-aspect-ratio/af-aspect-ratio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;GAGG;AAMH,MAAM,OAAO,aAAa;IAL1B;QAME;;;;;;;;WAQG;QACK,UAAK,GAAW,KAAK,CAAC;KAuE/B;IArES,aAAa;QACnB,+DAA+D;QAC/D,MAAM,QAAQ,GAA8B;YAC1C,gBAAgB;YAChB,KAAK,EAAE,OAAO;YACd,KAAK,EAAE,OAAO;YACd,KAAK,EAAE,OAAO;YACd,KAAK,EAAE,OAAO;YACd,KAAK,EAAE,OAAO;YACd,KAAK,EAAE,OAAO;YACd,KAAK,EAAE,OAAO;YACd,KAAK,EAAE,OAAO;YACd,KAAK,EAAE,OAAO;YACd,KAAK,EAAE,OAAO;YACd,KAAK,EAAE,OAAO;YACd,KAAK,EAAE,OAAO;YACd,KAAK,EAAE,OAAO;YACd,KAAK,EAAE,OAAO;YACd,gBAAgB;YAChB,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,QAAQ;YAChB,MAAM,EAAE,QAAQ;YAChB,OAAO,EAAE,SAAS;YAClB,MAAM,EAAE,QAAQ;YAChB,MAAM,EAAE,QAAQ;YAChB,MAAM,EAAE,QAAQ;YAChB,OAAO,EAAE,SAAS;YAClB,MAAM,EAAE,QAAQ;YAChB,MAAM,EAAE,QAAQ;YAChB,wBAAwB;YACxB,iBAAiB,EAAE,WAAW;YAC9B,kBAAkB,EAAE,WAAW;YAC/B,sBAAsB,EAAE,WAAW;YACnC,uBAAuB,EAAE,WAAW;YACpC,mBAAmB;YACnB,aAAa,EAAE,WAAW;YAC1B,cAAc,EAAE,WAAW;YAC3B,kBAAkB,EAAE,WAAW;YAC/B,mBAAmB,EAAE,WAAW;YAChC,uBAAuB;YACvB,iBAAiB,EAAE,WAAW;YAC9B,kBAAkB,EAAE,WAAW;YAC/B,sBAAsB,EAAE,WAAW;YACnC,uBAAuB,EAAE,WAAW;YACpC,UAAU;YACV,KAAK,EAAE,OAAO;SACf,CAAC;QAEF,sDAAsD;QACtD,IAAI,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;YACzB,OAAO,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC;QAED,sEAAsE;QACtE,OAAO,IAAI,CAAC,KAAK,CAAC;IACpB,CAAC;IAED,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;QAExC,OAAO,CACL,4DACE,KAAK,EAAC,wBAAwB,EAC9B,KAAK,EAAE,EAAE,WAAW,EAAE,UAAU,EAAE;YAElC,8DAAa,CACT,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/**\n * A container component that maintains a fixed aspect ratio for its content.\n * Useful for images, videos, or any content that needs to maintain specific proportions.\n */\n@Component({\n  tag: 'af-aspect-ratio',\n  styleUrl: 'af-aspect-ratio.css',\n  shadow: true\n})\nexport class AfAspectRatio {\n  /**\n   * The aspect ratio to maintain. Can be:\n   * - A predefined ratio: '1:1', '16:9', '4:3', 'golden-portrait', 'golden-landscape', 'a4-portrait', 'a4-landscape', 'letter-portrait', 'letter-landscape', etc.\n   * - A custom ratio in format 'width / height': '16 / 9', '4 / 3', '1.618 / 1', etc.\n   *\n   * @example\n   * <af-aspect-ratio ratio=\"16:9\">Content</af-aspect-ratio>\n   * <af-aspect-ratio ratio=\"1.618 / 1\">Content</af-aspect-ratio>\n   */\n  @Prop() ratio: string = '1:1';\n\n  private getRatioValue(): string {\n    // Map common ratio shortcuts to actual CSS aspect-ratio values\n    const ratioMap: { [key: string]: string } = {\n      // Common ratios\n      '1:1': '1 / 1',\n      '1:2': '1 / 2',\n      '2:1': '2 / 1',\n      '2:3': '2 / 3',\n      '3:1': '3 / 1',\n      '3:2': '3 / 2',\n      '3:4': '3 / 4',\n      '4:1': '4 / 1',\n      '4:3': '4 / 3',\n      '4:5': '4 / 5',\n      '5:2': '5 / 2',\n      '5:4': '5 / 4',\n      '8:3': '8 / 3',\n      '8:5': '8 / 5',\n      // Screen ratios\n      '9:8': '9 / 8',\n      '9:16': '9 / 16',\n      '9:21': '9 / 21',\n      '10:16': '10 / 16',\n      '14:3': '14 / 3',\n      '16:5': '16 / 5',\n      '16:9': '16 / 9',\n      '16:10': '16 / 10',\n      '21:9': '21 / 9',\n      '32:9': '32 / 9',\n      // Golden ratio variants\n      'golden-portrait': '1 / 1.618',\n      'golden-landscape': '1.618 / 1',\n      'golden-portrait-half': '1 / 0.809',\n      'golden-landscape-half': '0.809 / 1',\n      // Paper sizes - A4\n      'a4-portrait': '1 / 1.414',\n      'a4-landscape': '1.414 / 1',\n      'a4-portrait-half': '1 / 0.707',\n      'a4-landscape-half': '0.707 / 1',\n      // Paper sizes - Letter\n      'letter-portrait': '1 / 1.294',\n      'letter-landscape': '1.294 / 1',\n      'letter-portrait-half': '1 / 0.647',\n      'letter-landscape-half': '0.647 / 1',\n      // Special\n      '6:7': '6 / 7'\n    };\n\n    // If it's a predefined ratio, return the mapped value\n    if (ratioMap[this.ratio]) {\n      return ratioMap[this.ratio];\n    }\n\n    // Otherwise, assume it's a custom ratio already in the correct format\n    return this.ratio;\n  }\n\n  render() {\n    const ratioValue = this.getRatioValue();\n\n    return (\n      <div\n        class=\"aspect-ratio-container\"\n        style={{ aspectRatio: ratioValue }}\n      >\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/af-color-swatch/af-color-swatch.css

@@ -0,0 +1,42 @@
+:host {
+  display: block;
+}
+
+.swatch {
+  display: flex;
+  flex-direction: column;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid #ece6f5;
+  background: white;
+}
+
+.color-preview {
+  width: 100%;
+  height: 120px;
+  flex-shrink: 0;
+}
+
+.size-large .color-preview {
+  height: 140px;
+}
+
+.color-info {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.color-name {
+  font-family: 'NeuSans', 'Inter', system-ui, sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+  color: #14343B;
+}
+
+.color-value {
+  font-family: 'Helvetica', 'Inter', monospace, system-ui, sans-serif;
+  font-size: 14px;
+  color: #708380;
+}

package/dist/collection/components/af-color-swatch/af-color-swatch.js

@@ -0,0 +1,88 @@
+import { h } from "@stencil/core";
+export class AfColorSwatch {
+    constructor() {
+        /** Size variant */
+        this.size = 'default';
+    }
+    render() {
+        return (h("div", { key: '57a141b5af5c538c5cf842a61173dd391a91d59b', class: {
+                'swatch': true,
+                [`size-${this.size}`]: true
+            }, part: "base" }, h("div", { key: '505252d9fbfb36df24f1907cd5a30278e55bf268', class: "color-preview", part: "preview", style: { backgroundColor: this.color } }), h("div", { key: '095621914872670c129c23825aa012bbba4e33bb', class: "color-info", part: "info" }, h("div", { key: '86b6164f0aed4a938a8faa210651bbc6746dd4f2', class: "color-name", part: "name" }, this.name), h("div", { key: '1d533780d3756b119ae36a6e8fa0c2b6b3acb7b4', class: "color-value", part: "value" }, this.color))));
+    }
+    static get is() { return "af-color-swatch"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-color-swatch.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-color-swatch.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color value (hex)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color name"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'large'",
+                    "resolved": "\"default\" | \"large\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'default'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-color-swatch.js.map

package/dist/collection/components/af-color-swatch/af-color-swatch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-color-swatch.js","sourceRoot":"","sources":["../../../src/components/af-color-swatch/af-color-swatch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,aAAa;IAL1B;QAYE,mBAAmB;QACX,SAAI,GAAwB,SAAS,CAAC;KAoB/C;IAlBC,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE;gBACV,QAAQ,EAAE,IAAI;gBACd,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;aAC5B,EAAE,IAAI,EAAC,MAAM;YACZ,4DACE,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,CAAC,KAAK,EAAE,GACjC;YACP,4DAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM;gBACjC,4DAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAO;gBACrD,4DAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAO,CACpD,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'af-color-swatch',\n  styleUrl: 'af-color-swatch.css',\n  shadow: true\n})\nexport class AfColorSwatch {\n  /** Color value (hex) */\n  @Prop() color!: string;\n\n  /** Color name */\n  @Prop() name!: string;\n\n  /** Size variant */\n  @Prop() size: 'default' | 'large' = 'default';\n\n  render() {\n    return (\n      <div class={{\n        'swatch': true,\n        [`size-${this.size}`]: true\n      }} part=\"base\">\n        <div\n          class=\"color-preview\"\n          part=\"preview\"\n          style={{ backgroundColor: this.color }}\n        ></div>\n        <div class=\"color-info\" part=\"info\">\n          <div class=\"color-name\" part=\"name\">{this.name}</div>\n          <div class=\"color-value\" part=\"value\">{this.color}</div>\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/af-container/af-container.css

@@ -0,0 +1,76 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.container {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  box-sizing: border-box;
+
+  /* Mobile first: xsmall breakpoint (320px) */
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+/* Small breakpoint (375px) */
+@media (min-width: 375px) {
+  .container {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+}
+
+/* Medium breakpoint (768px) */
+@media (min-width: 768px) {
+  .container {
+    padding-left: 32px;
+    padding-right: 32px;
+  }
+
+  .max-width-medium {
+    max-width: 768px;
+  }
+}
+
+/* Large breakpoint (1024px) */
+@media (min-width: 1024px) {
+  .container {
+    padding-left: 64px;
+    padding-right: 64px;
+  }
+
+  .max-width-large {
+    max-width: 1024px;
+  }
+
+  .max-width-medium {
+    max-width: 768px;
+  }
+}
+
+/* XLarge breakpoint (1440px) */
+@media (min-width: 1440px) {
+  .container {
+    padding-left: 80px;
+    padding-right: 80px;
+  }
+
+  .max-width-xlarge {
+    max-width: 1440px;
+  }
+
+  .max-width-large {
+    max-width: 1024px;
+  }
+
+  .max-width-medium {
+    max-width: 768px;
+  }
+}
+
+/* Fluid has no max-width */
+.max-width-fluid {
+  max-width: none;
+}

package/dist/collection/components/af-container/af-container.js

@@ -0,0 +1,57 @@
+import { h } from "@stencil/core";
+/**
+ * A responsive container component that provides consistent margins and max-width
+ * constraints based on the Affinda grid system.
+ */
+export class AfContainer {
+    constructor() {
+        /**
+         * Maximum width constraint for the container
+         * - 'xlarge': 1440px container (default)
+         * - 'large': 1024px container
+         * - 'medium': 768px container
+         * - 'fluid': No max-width constraint, full width with margins
+         */
+        this.maxWidth = 'xlarge';
+    }
+    render() {
+        return (h("div", { key: '4a40fad6df79915adeb7273a7c71ed26b327ff8f', class: `container max-width-${this.maxWidth}` }, h("slot", { key: 'a1759c05860511cdb6b916e44925df7f7a80bcf1' })));
+    }
+    static get is() { return "af-container"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-container.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-container.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "maxWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'xlarge' | 'large' | 'medium' | 'fluid'",
+                    "resolved": "\"fluid\" | \"large\" | \"medium\" | \"xlarge\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum width constraint for the container\n- 'xlarge': 1440px container (default)\n- 'large': 1024px container\n- 'medium': 768px container\n- 'fluid': No max-width constraint, full width with margins"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-width",
+                "defaultValue": "'xlarge'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-container.js.map

package/dist/collection/components/af-container/af-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-container.js","sourceRoot":"","sources":["../../../src/components/af-container/af-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;GAGG;AAMH,MAAM,OAAO,WAAW;IALxB;QAME;;;;;;WAMG;QACK,aAAQ,GAA4C,QAAQ,CAAC;KAStE;IAPC,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,uBAAuB,IAAI,CAAC,QAAQ,EAAE;YAChD,8DAAa,CACT,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/**\n * A responsive container component that provides consistent margins and max-width\n * constraints based on the Affinda grid system.\n */\n@Component({\n  tag: 'af-container',\n  styleUrl: 'af-container.css',\n  shadow: true\n})\nexport class AfContainer {\n  /**\n   * Maximum width constraint for the container\n   * - 'xlarge': 1440px container (default)\n   * - 'large': 1024px container\n   * - 'medium': 768px container\n   * - 'fluid': No max-width constraint, full width with margins\n   */\n  @Prop() maxWidth: 'xlarge' | 'large' | 'medium' | 'fluid' = 'xlarge';\n\n  render() {\n    return (\n      <div class={`container max-width-${this.maxWidth}`}>\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/af-heading/af-heading.css

@@ -0,0 +1,99 @@
+:host {
+  display: block;
+}
+
+.heading {
+  margin: 0;
+  padding: 0;
+  font-family: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;
+  font-weight: 500;
+  color: #14343b;
+  letter-spacing: -0.02em;
+}
+
+/* Alignment */
+.align-left {
+  text-align: left;
+}
+
+.align-center {
+  text-align: center;
+}
+
+.align-right {
+  text-align: right;
+}
+
+/* Heading XL */
+.level-xl {
+  font-size: 50px;
+  line-height: 1;
+}
+
+@media (min-width: 768px) {
+  .level-xl {
+    font-size: 80px;
+  }
+}
+
+/* Heading 1 */
+.level-1 {
+  font-size: 38px;
+  line-height: 1;
+}
+
+@media (min-width: 768px) {
+  .level-1 {
+    font-size: 56px;
+  }
+}
+
+/* Heading 2 */
+.level-2 {
+  font-size: 32px;
+  line-height: 1;
+}
+
+@media (min-width: 768px) {
+  .level-2 {
+    font-size: 44px;
+  }
+}
+
+/* Heading 3 */
+.level-3 {
+  font-size: 25px;
+  line-height: 1;
+}
+
+@media (min-width: 768px) {
+  .level-3 {
+    font-size: 34px;
+  }
+}
+
+/* Heading 4 */
+.level-4 {
+  font-size: 20px;
+  line-height: 1.1;
+}
+
+@media (min-width: 768px) {
+  .level-4 {
+    font-size: 24px;
+    line-height: 1.2;
+  }
+}
+
+/* Heading 5 */
+.level-5 {
+  font-size: 18px;
+  line-height: 1.1;
+}
+
+@media (min-width: 768px) {
+  .level-5 {
+    font-size: 20px;
+    line-height: 1.2;
+  }
+}