independer-design-system 1.2.0 → 1.2.2

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=4.2.0"
   },
-  "version": "1.2.0",
+  "version": "1.2.2",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/assets/images/number-hexagon-closed.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M29.4542 21.6927V10.321C29.4542 9.06701 28.7833 7.90884 27.6956 7.28494L17.741 1.57522C16.6624 0.956614 15.3367 0.956615 14.2582 1.57523L4.30353 7.28494C3.21578 7.90885 2.54492 9.067 2.54492 10.321V21.6927C2.54492 22.9478 3.21693 24.1068 4.30616 24.7303L14.2608 30.4286C15.338 31.0452 16.6611 31.0452 17.7383 30.4286L27.693 24.7303C28.7822 24.1068 29.4542 22.9478 29.4542 21.6927Z" fill="white" stroke="#A29EDB" stroke-linejoin="round"/>
+</svg>

package/dist/runtime/assets/images/number-hexagon-editing.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M29.4542 21.6927V10.321C29.4542 9.06701 28.7833 7.90884 27.6956 7.28494L17.741 1.57522C16.6624 0.956614 15.3367 0.956615 14.2582 1.57523L4.30353 7.28494C3.21578 7.90885 2.54492 9.067 2.54492 10.321V21.6927C2.54492 22.9478 3.21693 24.1068 4.30616 24.7303L14.2608 30.4286C15.338 31.0452 16.6611 31.0452 17.7383 30.4286L27.693 24.7303C28.7822 24.1068 29.4542 22.9478 29.4542 21.6927Z" fill="#6E46CF" stroke="#6E46CF" stroke-linejoin="round"/>
+</svg>

package/dist/runtime/assets/images/number-hexagon-saved.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M29.4542 21.6927V10.321C29.4542 9.06701 28.7833 7.90884 27.6956 7.28494L17.741 1.57522C16.6624 0.956614 15.3367 0.956615 14.2582 1.57523L4.30353 7.28494C3.21578 7.90885 2.54492 9.067 2.54492 10.321V21.6927C2.54492 22.9478 3.21693 24.1068 4.30616 24.7303L14.2608 30.4286C15.338 31.0452 16.6611 31.0452 17.7383 30.4286L27.693 24.7303C28.7822 24.1068 29.4542 22.9478 29.4542 21.6927Z" fill="#00C19E" stroke="#00C19E" stroke-linejoin="round"/>
+<path d="M15.2272 17.8177L20.2725 11.1924C20.7179 10.6071 21.5525 10.4924 22.1405 10.9391C22.7272 11.3857 22.8405 12.2204 22.3939 12.8071L16.3019 20.8071C16.0525 21.1364 15.6632 21.3311 15.2512 21.3324H15.2419C14.8312 21.3324 14.4445 21.1444 14.1912 20.8217L10.9499 16.6791C10.4952 16.1004 10.5979 15.2617 11.1779 14.8084C11.7565 14.3537 12.5965 14.4551 13.0499 15.0364L15.2272 17.8177Z" fill="white"/>
+</svg>

package/dist/runtime/assets/images/number-hexagon.svg

@@ -0,0 +1,3 @@
+<svg width="28" height="32" viewBox="0 0 28 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.9463 6.85122C27.1895 7.56425 27.9562 8.88787 27.9562 10.321V21.6927C27.9562 23.1271 27.1882 24.4517 25.9433 25.1642L15.9887 30.8625C14.7576 31.5672 13.2454 31.5672 12.0144 30.8625L2.05972 25.1642C0.814881 24.4517 0.046875 23.1271 0.046875 21.6927V10.321C0.046875 8.88786 0.813567 7.56425 2.05671 6.85122L12.0114 1.14151C13.2439 0.434523 14.7591 0.434521 15.9917 1.1415L25.9463 6.85122Z" fill="#6E46CF"/>
+</svg>

package/dist/runtime/assets/style.css

@@ -1 +1 @@
-@import url("https://use.typekit.net/uxr2esn.css");@import "tailwindcss";@theme{--container-mobile:320px;--container-tablet:768px;--container-desktop:1136px;--container-desktop-lg:1432px;--breakpoint-tablet:768px;--breakpoint-desktop:1136px;--breakpoint-desktop-lg:1432px;--font-sans:"proxima-nova",system-ui;--font-serif:"roboto-slab",system-ui;--text-xs:.75rem;--text-xs--line-height:1rem;--text-sm:.875rem;--text-sm--line-height:1.25rem;--text-base:1rem;--text-base--line-height:1.5rem;--text-lg:1.125rem;--text-lg--line-height:1.75rem;--text-xl:1.25rem;--text-xl--line-height:1.75rem;--text-2xl:1.5rem;--text-2xl--line-height:2rem;--text-3xl:2rem;--text-3xl--line-height:2.5rem;--text-4xl:2.5rem;--text-4xl--line-height:3rem;--text-5xl:3rem;--text-5xl--line-height:3.5rem;--color-interface:#f2f1fd;--color-transparent:transparent;--color-current:currentColor;--color-purple-100:#f2f1fd;--color-purple-200:#d9d5f8;--color-purple-300:#c1b9f2;--color-purple-400:#aa9ceb;--color-purple-500:#9480e4;--color-purple-600:#8063dc;--color-purple-700:#6e42d2;--color-purple-800:#5532a7;--color-purple-900:#3f247e;--color-purple-1000:#291556;--color-purple-darkest:#291556;--color-purple-dark:#3f247e;--color-purple:#6e42d2;--color-purple-light:#d9d5f8;--color-purple-lighter:#f2f1fd;--color-peach-100:#ffefe7;--color-peach-200:#ffcfb7;--color-peach-300:#f4b18e;--color-peach-400:#d99876;--color-peach-500:#b4856b;--color-peach-600:#976f59;--color-peach-700:#7a5a47;--color-peach-800:#604536;--color-peach-900:#473227;--color-peach-1000:#461000;--color-peach-darkest:#461000;--color-peach-dark:#d99876;--color-peach:#f4b18e;--color-peach-light:#ffcfb7;--color-peach-lighter:#ffefe7;--color-grey-100:#f2f2f2;--color-grey-200:#d7d9da;--color-grey-300:#b3b7c1;--color-grey-400:#a4a7a9;--color-grey-500:#908e84;--color-grey-600:#74787a;--color-grey-700:#626066;--color-grey-800:#4c4b4f;--color-grey-900:#37363a;--color-grey-1000:#232225;--color-grey-darkest:#232225;--color-grey-dark:#74787a;--color-grey:#a4a7a9;--color-grey-light:#d7d9da;--color-grey-lighter:#f2f2f2;--color-blue-100:#e5f4ff;--color-blue-200:#b4dffd;--color-blue-300:#7dc8fa;--color-blue-400:#33b0f5;--color-blue-500:#0097e0;--color-blue-600:#007dc5;--color-blue-700:#0063aa;--color-blue-800:#004b90;--color-blue-900:#003478;--color-blue-1000:#001c60;--color-blue-darkest:#001c60;--color-blue-dark:#007dc5;--color-blue:#33b0f5;--color-blue-light:#e5f4ff;--color-green-100:#e4f6f0;--color-green-200:#abe4d2;--color-green-300:#6ed2b7;--color-green-400:#00bc9a;--color-green-500:#00a281;--color-green-600:#00886a;--color-green-700:#006e52;--color-green-800:#00563c;--color-green-900:#004028;--color-green-1000:#002914;--color-green-darkest:#002914;--color-green-dark:#006e52;--color-green:#00bc9a;--color-green-light:#abe4d2;--color-yellow-100:#fff2bd;--color-yellow-200:#fcd610;--color-yellow-300:#e3bd00;--color-yellow-400:#c8a300;--color-yellow-500:#b08a00;--color-yellow-600:#987200;--color-yellow-700:#7f5a00;--color-yellow-800:#684300;--color-yellow-900:#542e00;--color-yellow-1000:#3e1800;--color-yellow-darkest:#542e00;--color-yellow-dark:#e3bd00;--color-yellow:#fcd610;--color-yellow-light:#fff2bd;--color-orange-100:#fff1e6;--color-orange-200:#ffd1a9;--color-orange-300:#ffae66;--color-orange-400:#f68c12;--color-orange-500:#db7400;--color-orange-600:#c05b00;--color-orange-700:#a54300;--color-orange-800:#8b2800;--color-orange-900:#720a00;--color-orange-1000:#4f0000;--color-orange-darkest:#4f0000;--color-orange-dark:#f68c12;--color-orange:#f68c12;--color-orange-light:#ffd1a9;--color-orange-lighter:#fff1e6;--color-red-100:#ffeff0;--color-red-200:#ffcdd2;--color-red-300:#ffa8b3;--color-red-400:#ff7f94;--color-red-500:#fb4f74;--color-red-600:#e02f5e;--color-red-700:#b7254b;--color-red-800:#901b3a;--color-red-900:#6d1129;--color-red-1000:#490819;--color-red-darkest:#490819;--color-red-dark:#b7254b;--color-red:#e02f5e;--color-red-light:#ffcdd2;--animate-pulse-fast:pulse 1.5s cubic-bezier(0.4,0,0.6,1) infinite;--default-transition-duration:200ms;--default-transition-timing-function:cubic-bezier(0,0,0.2,1);--shadow-default:0 0 1px 0 rgba(0,0,0,.1),0 0 3px 0 rgba(0,0,0,.1),0 0 16px 4px rgba(0,0,0,.05)}.iconify{@apply block w-6 h-6 flex-shrink-0}
+@import url("https://use.typekit.net/uxr2esn.css");@import "tailwindcss";@source "../components/**/*.{vue,js,ts}";:root{--ind-color-purple-100:#f2f1fd;--ind-color-purple-200:#d9d5f8;--ind-color-purple-300:#c1b9f2;--ind-color-purple-400:#aa9ceb;--ind-color-purple-500:#9480e4;--ind-color-purple-600:#8063dc;--ind-color-purple-700:#6e46cf;--ind-color-purple-800:#5532a7;--ind-color-purple-900:#3f247e;--ind-color-purple-1000:#291556;--ind-color-peach-100:#ffefe7;--ind-color-peach-200:#ffcfb7;--ind-color-peach-300:#f4b18e;--ind-color-peach-400:#d99876;--ind-color-peach-500:#b4856b;--ind-color-peach-600:#976f59;--ind-color-peach-700:#8d5232;--ind-color-peach-800:#753c1a;--ind-color-peach-900:#473227;--ind-color-peach-1000:#461000;--ind-color-grey-100:#f2f2f2;--ind-color-grey-200:#d7d9da;--ind-color-grey-300:#b3b7c1;--ind-color-grey-400:#a4a7a9;--ind-color-grey-500:#8b9091;--ind-color-grey-600:#74787a;--ind-color-grey-700:#5d6263;--ind-color-grey-800:#4c4b4f;--ind-color-grey-900:#37363a;--ind-color-grey-1000:#1f2325;--ind-color-blue-100:#e5f4ff;--ind-color-blue-200:#b4dffd;--ind-color-blue-300:#7dc8fa;--ind-color-blue-400:#33b0f5;--ind-color-blue-500:#0097e0;--ind-color-blue-600:#007dc5;--ind-color-blue-700:#0063aa;--ind-color-blue-800:#004b90;--ind-color-blue-900:#003478;--ind-color-blue-1000:#001c60;--ind-color-green-100:#e4f6f0;--ind-color-green-200:#abe4d2;--ind-color-green-300:#6ed2b7;--ind-color-green-400:#00bc9a;--ind-color-green-500:#00a281;--ind-color-green-600:#00886a;--ind-color-green-700:#006e52;--ind-color-green-800:#00563c;--ind-color-green-900:#004028;--ind-color-green-1000:#002914;--ind-color-yellow-100:#fff2bd;--ind-color-yellow-200:#fcd610;--ind-color-yellow-300:#e3bd00;--ind-color-yellow-400:#c8a300;--ind-color-yellow-500:#b08a00;--ind-color-yellow-600:#987200;--ind-color-yellow-700:#7f5a00;--ind-color-yellow-800:#684300;--ind-color-yellow-900:#542e00;--ind-color-yellow-1000:#3e1800;--ind-color-orange-100:#fff1e6;--ind-color-orange-200:#ffd1a9;--ind-color-orange-300:#ffae66;--ind-color-orange-400:#f68c12;--ind-color-orange-500:#db7400;--ind-color-orange-600:#c05b00;--ind-color-orange-700:#a54300;--ind-color-orange-800:#8b2800;--ind-color-orange-900:#720a00;--ind-color-orange-1000:#4f0000;--ind-color-red-100:#ffeff0;--ind-color-red-200:#ffcdd2;--ind-color-red-300:#ffa8b3;--ind-color-red-400:#ff7f94;--ind-color-red-500:#fb4f74;--ind-color-red-600:#e02f5e;--ind-color-red-700:#b7254b;--ind-color-red-800:#901b3a;--ind-color-red-900:#6d1129;--ind-color-red-1000:#490819;--ind-theme-color-background-interface:var(--ind-color-purple-100,#f2f1fd);--ind-theme-color-background-brand-primary-subtlest:var(--ind-color-purple-100,#f2f1fd);--ind-theme-color-background-brand-primary-subtler:var(--ind-color-purple-200,#d9d5f8);--ind-theme-color-background-brand-primary:var(--ind-color-purple-700,#6e46cf);--ind-theme-color-background-brand-primary-strong:var(--ind-color-purple-900,#3f247e);--ind-theme-color-background-brand-primary-strongest:var(--ind-color-purple-1000,#291556);--ind-theme-color-background-brand-secondary-subtlest:var(--ind-color-peach-100,#ffefe7);--ind-theme-color-background-brand-secondary-subtle:var(--ind-color-peach-200,#ffcfb7);--ind-theme-color-background-brand-secondary:var(--ind-color-peach-300,#f4b18e);--ind-theme-color-background-accent-subtlest:var(--ind-color-yellow-100,#fff2bd);--ind-theme-color-background-accent:var(--ind-color-yellow-200,#fcd610);--ind-theme-color-background-accent-hovered:var(--ind-color-yellow-300,#e3bd00);--ind-theme-color-background-positive-strong:var(--ind-color-green-400,#00bc9a);--ind-theme-color-background-negative-strong:var(--ind-color-red-600,#e02f5e);--ind-theme-color-background-warning:var(--ind-color-orange-100,#fff1e6);--ind-theme-color-background-warning-strong:var(--ind-color-orange-400,#f68c12);--ind-theme-color-background-spotlight:var(--ind-color-blue-100,#e5f4ff);--ind-theme-color-background-neutral-subtlest:var(--ind-color-grey-100,#f2f2f2);--ind-theme-color-background-neutral:var(--ind-color-grey-200,#d7d9da);--ind-theme-color-background-neutral-strong:var(--ind-color-grey-600,#74787a);--ind-theme-color-border-default-strong:var(--ind-color-grey-400,#a4a7a9);--ind-theme-color-border-spotlight:var(--ind-color-blue-400,#33b0f5);--ind-theme-color-outline-focus-ring-positive:var(--ind-color-green-200,#abe4d2);--ind-theme-color-text-default:var(--ind-color-grey-1000,#1f2325);--ind-theme-color-text-accent-inverse:var(--ind-color-yellow-900,#542e00);--ind-theme-color-text-expert-strong:var(--ind-color-peach-1000,#461000);--ind-theme-color-text-spotlight-strong:var(--ind-color-blue-1000,#001c60);--ind-theme-color-transparent:transparent;--ind-theme-color-current:currentColor}@theme{--container-mobile:320px;--container-tablet:768px;--container-desktop:1136px;--container-desktop-lg:1432px;--breakpoint-tablet:768px;--breakpoint-desktop:1136px;--breakpoint-desktop-lg:1432px;--font-sans:"proxima-nova",system-ui;--font-serif:"roboto-slab",system-ui;--text-xs:.75rem;--text-xs--line-height:1rem;--text-sm:.875rem;--text-sm--line-height:1.25rem;--text-base:1rem;--text-base--line-height:1.5rem;--text-lg:1.125rem;--text-lg--line-height:1.75rem;--text-xl:1.25rem;--text-xl--line-height:1.75rem;--text-2xl:1.5rem;--text-2xl--line-height:2rem;--text-3xl:2rem;--text-3xl--line-height:2.5rem;--text-4xl:2.5rem;--text-4xl--line-height:3rem;--text-5xl:3rem;--text-5xl--line-height:3.5rem;--color-interface:var(--ind-theme-color-background-interface,#f2f1fd);--color-brand-primary-subtlest:var(--ind-theme-color-background-brand-primary-subtlest,#f2f1fd);--color-brand-primary-subtler:var(--ind-theme-color-background-brand-primary-subtler,#d9d5f8);--color-brand-primary:var(--ind-theme-color-background-brand-primary,#6e46cf);--color-brand-primary-strong:var(--ind-theme-color-background-brand-primary-strong,#3f247e);--color-brand-primary-strongest:var(--ind-theme-color-background-brand-primary-strongest,#291556);--color-brand-secondary-subtlest:var(--ind-theme-color-background-brand-secondary-subtlest,#ffefe7);--color-brand-secondary-subtle:var(--ind-theme-color-background-brand-secondary-subtle,#ffcfb7);--color-brand-secondary:var(--ind-theme-color-background-brand-secondary,#f4b18e);--color-accent-subtlest:var(--ind-theme-color-background-accent-subtlest,#fff2bd);--color-accent:var(--ind-theme-color-background-accent,#fcd610);--color-accent-hovered:var(--ind-theme-color-background-accent-hovered,#e3bd00);--color-positive-strong:var(--ind-theme-color-background-positive-strong,#00bc9a);--color-negative-strong:var(--ind-theme-color-background-negative-strong,#e02f5e);--color-warning:var(--ind-theme-color-background-warning,#fff1e6);--color-warning-strong:var(--ind-theme-color-background-warning-strong,#f68c12);--color-spotlight:var(--ind-theme-color-background-spotlight,#e5f4ff);--color-neutral-subtlest:var(--ind-theme-color-background-neutral-subtlest,#f2f2f2);--color-neutral:var(--ind-theme-color-background-neutral,#d7d9da);--color-neutral-strong:var(--ind-theme-color-background-neutral-strong,#74787a);--color-border-default-strong:var(--ind-theme-color-border-default-strong,#a4a7a9);--color-border-spotlight:var(--ind-theme-color-border-spotlight,#33b0f5);--color-outline-focus-ring-positive:var(--ind-theme-color-outline-focus-ring-positive,#abe4d2);--color-text-default:var(--ind-theme-color-text-default,#1f2325);--color-text-accent-inverse:var(--ind-theme-color-text-accent-inverse,#542e00);--color-text-expert-strong:var(--ind-theme-color-text-expert-strong,#461000);--color-text-spotlight-strong:var(--ind-theme-color-text-spotlight-strong,#001c60);--color-transparent:var(--ind-theme-color-transparent,transparent);--color-current:var(--ind-theme-color-current,currentColor);--color-purple-100:var(--ind-color-purple-100,#f2f1fd);--color-purple-200:var(--ind-color-purple-200,#d9d5f8);--color-purple-300:var(--ind-color-purple-300,#c1b9f2);--color-purple-400:var(--ind-color-purple-400,#aa9ceb);--color-purple-500:var(--ind-color-purple-500,#9480e4);--color-purple-600:var(--ind-color-purple-600,#8063dc);--color-purple-700:var(--ind-color-purple-700,#6e46cf);--color-purple-800:var(--ind-color-purple-800,#5532a7);--color-purple-900:var(--ind-color-purple-900,#3f247e);--color-purple-1000:var(--ind-color-purple-1000,#291556);--color-purple-darkest:var(--ind-color-purple-1000,#291556);--color-purple-dark:var(--ind-color-purple-900,#3f247e);--color-purple:var(--ind-color-purple-700,#6e46cf);--color-purple-light:var(--ind-color-purple-200,#d9d5f8);--color-purple-lighter:var(--ind-color-purple-100,#f2f1fd);--color-peach-100:var(--ind-color-peach-100,#ffefe7);--color-peach-200:var(--ind-color-peach-200,#ffcfb7);--color-peach-300:var(--ind-color-peach-300,#f4b18e);--color-peach-400:var(--ind-color-peach-400,#d99876);--color-peach-500:var(--ind-color-peach-500,#b4856b);--color-peach-600:var(--ind-color-peach-600,#976f59);--color-peach-700:var(--ind-color-peach-700,#8d5232);--color-peach-800:var(--ind-color-peach-800,#753c1a);--color-peach-900:var(--ind-color-peach-900,#473227);--color-peach-1000:var(--ind-color-peach-1000,#461000);--color-peach-darkest:var(--ind-color-peach-1000,#461000);--color-peach-dark:var(--ind-color-peach-400,#d99876);--color-peach:var(--ind-color-peach-300,#f4b18e);--color-peach-light:var(--ind-color-peach-200,#ffcfb7);--color-peach-lighter:var(--ind-color-peach-100,#ffefe7);--color-grey-100:var(--ind-color-grey-100,#f2f2f2);--color-grey-200:var(--ind-color-grey-200,#d7d9da);--color-grey-300:var(--ind-color-grey-300,#b3b7c1);--color-grey-400:var(--ind-color-grey-400,#a4a7a9);--color-grey-500:var(--ind-color-grey-500,#8b9091);--color-grey-600:var(--ind-color-grey-600,#74787a);--color-grey-700:var(--ind-color-grey-700,#5d6263);--color-grey-800:var(--ind-color-grey-800,#4c4b4f);--color-grey-900:var(--ind-color-grey-900,#37363a);--color-grey-1000:var(--ind-color-grey-1000,#1f2325);--color-grey-darkest:var(--ind-color-grey-1000,#1f2325);--color-grey-dark:var(--ind-color-grey-600,#74787a);--color-grey:var(--ind-color-grey-400,#a4a7a9);--color-grey-light:var(--ind-color-grey-200,#d7d9da);--color-grey-lighter:var(--ind-color-grey-100,#f2f2f2);--color-blue-100:var(--ind-color-blue-100,#e5f4ff);--color-blue-200:var(--ind-color-blue-200,#b4dffd);--color-blue-300:var(--ind-color-blue-300,#7dc8fa);--color-blue-400:var(--ind-color-blue-400,#33b0f5);--color-blue-500:var(--ind-color-blue-500,#0097e0);--color-blue-600:var(--ind-color-blue-600,#007dc5);--color-blue-700:var(--ind-color-blue-700,#0063aa);--color-blue-800:var(--ind-color-blue-800,#004b90);--color-blue-900:var(--ind-color-blue-900,#003478);--color-blue-1000:var(--ind-color-blue-1000,#001c60);--color-blue-darkest:var(--ind-color-blue-1000,#001c60);--color-blue-dark:var(--ind-color-blue-600,#007dc5);--color-blue:var(--ind-color-blue-400,#33b0f5);--color-blue-light:var(--ind-color-blue-100,#e5f4ff);--color-green-100:var(--ind-color-green-100,#e4f6f0);--color-green-200:var(--ind-color-green-200,#abe4d2);--color-green-300:var(--ind-color-green-300,#6ed2b7);--color-green-400:var(--ind-color-green-400,#00bc9a);--color-green-500:var(--ind-color-green-500,#00a281);--color-green-600:var(--ind-color-green-600,#00886a);--color-green-700:var(--ind-color-green-700,#006e52);--color-green-800:var(--ind-color-green-800,#00563c);--color-green-900:var(--ind-color-green-900,#004028);--color-green-1000:var(--ind-color-green-1000,#002914);--color-green-darkest:var(--ind-color-green-1000,#002914);--color-green-dark:var(--ind-color-green-700,#006e52);--color-green:var(--ind-color-green-400,#00bc9a);--color-green-light:var(--ind-color-green-200,#abe4d2);--color-yellow-100:var(--ind-color-yellow-100,#fff2bd);--color-yellow-200:var(--ind-color-yellow-200,#fcd610);--color-yellow-300:var(--ind-color-yellow-300,#e3bd00);--color-yellow-400:var(--ind-color-yellow-400,#c8a300);--color-yellow-500:var(--ind-color-yellow-500,#b08a00);--color-yellow-600:var(--ind-color-yellow-600,#987200);--color-yellow-700:var(--ind-color-yellow-700,#7f5a00);--color-yellow-800:var(--ind-color-yellow-800,#684300);--color-yellow-900:var(--ind-color-yellow-900,#542e00);--color-yellow-1000:var(--ind-color-yellow-1000,#3e1800);--color-yellow-darkest:var(--ind-color-yellow-900,#542e00);--color-yellow-dark:var(--ind-color-yellow-300,#e3bd00);--color-yellow:var(--ind-color-yellow-200,#fcd610);--color-yellow-light:var(--ind-color-yellow-100,#fff2bd);--color-orange-100:var(--ind-color-orange-100,#fff1e6);--color-orange-200:var(--ind-color-orange-200,#ffd1a9);--color-orange-300:var(--ind-color-orange-300,#ffae66);--color-orange-400:var(--ind-color-orange-400,#f68c12);--color-orange-500:var(--ind-color-orange-500,#db7400);--color-orange-600:var(--ind-color-orange-600,#c05b00);--color-orange-700:var(--ind-color-orange-700,#a54300);--color-orange-800:var(--ind-color-orange-800,#8b2800);--color-orange-900:var(--ind-color-orange-900,#720a00);--color-orange-1000:var(--ind-color-orange-1000,#4f0000);--color-orange-darkest:var(--ind-color-orange-1000,#4f0000);--color-orange-dark:var(--ind-color-orange-400,#f68c12);--color-orange:var(--ind-color-orange-400,#f68c12);--color-orange-light:var(--ind-color-orange-200,#ffd1a9);--color-orange-lighter:var(--ind-color-orange-100,#fff1e6);--color-red-100:var(--ind-color-red-100,#ffeff0);--color-red-200:var(--ind-color-red-200,#ffcdd2);--color-red-300:var(--ind-color-red-300,#ffa8b3);--color-red-400:var(--ind-color-red-400,#ff7f94);--color-red-500:var(--ind-color-red-500,#fb4f74);--color-red-600:var(--ind-color-red-600,#e02f5e);--color-red-700:var(--ind-color-red-700,#b7254b);--color-red-800:var(--ind-color-red-800,#901b3a);--color-red-900:var(--ind-color-red-900,#6d1129);--color-red-1000:var(--ind-color-red-1000,#490819);--color-red-darkest:var(--ind-color-red-1000,#490819);--color-red-dark:var(--ind-color-red-700,#b7254b);--color-red:var(--ind-color-red-600,#e02f5e);--color-red-light:var(--ind-color-red-200,#ffcdd2);--animate-pulse-fast:pulse 1.5s cubic-bezier(0.4,0,0.6,1) infinite;--default-transition-duration:200ms;--default-transition-timing-function:cubic-bezier(0,0,0.2,1);--shadow-default:0 0 1px 0 rgba(0,0,0,.1),0 0 3px 0 rgba(0,0,0,.1),0 0 16px 4px rgba(0,0,0,.05)}html{scroll-behavior:smooth}body{@apply text-grey-darkest;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}.h1,h1{@apply text-3xl tablet:text-4xl text-purple-dark font-serif font-bold}.h2,h2{@apply text-2xl tablet:text-3xl text-purple-dark font-serif font-bold}.h3,h3{@apply text-xl tablet:text-2xl text-purple-dark font-serif font-bold}.h4,h4{@apply text-base tablet:text-xl text-purple-dark font-serif font-bold}.h5,h5{@apply text-base text-purple-dark font-semibold}strong{@apply font-semibold}.iconify{@apply block w-6 h-6 flex-shrink-0}

package/dist/runtime/components/Form/Fieldset.d.vue.ts

@@ -0,0 +1,41 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    title: StringConstructor;
+    step: BooleanConstructor;
+    section: {
+        type: ObjectConstructor;
+        default: () => {
+            state: string;
+        };
+        required: false;
+    };
+    name: StringConstructor;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    edit: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    title: StringConstructor;
+    step: BooleanConstructor;
+    section: {
+        type: ObjectConstructor;
+        default: () => {
+            state: string;
+        };
+        required: false;
+    };
+    name: StringConstructor;
+}>> & Readonly<{
+    onEdit?: ((...args: any[]) => any) | undefined;
+}>, {
+    section: Record<string, any>;
+    step: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    saved?: ((props: {}) => any) | undefined;
+} & {
+    editing?: ((props: {}) => any) | undefined;
+};

package/dist/runtime/components/Form/Fieldset.vue

@@ -0,0 +1,84 @@
+<template>
+    <fieldset class="card w-full shrink-0 grow-0 mb-4 p-4 bg-white rounded-xl tablet:p-6 transition-all shadow-sm scroll-mt-6 tablet:scroll-mt-8" ref="sectionRef" :class="classesCard">
+        <header v-if="title" class="flex items-start border-b-grey-light" :class="classesHeader">
+          <div v-if="step" class="hexagon w-7 h-7 tablet:w-8 tablet:h-8 mr-2 tablet:mr-4 z-10" :class="classesHexagon"></div>
+
+          <h3 class="transition-all" :class="classesTitle">
+            {{ title }}
+          </h3>
+
+          <button v-if="section.state === 'saved' || section.state === 'paused'" class="!p-0 text-purple cursor-pointer hover:text-purple-dark ml-auto" @click.prevent="emit('edit', $event)">
+            <Icon name="eva:edit-outline" />   
+          </button>
+        </header>
+
+        <div class="desktop:mx-12">
+          <Collapse :when="section.state === 'saved' || section.state === 'paused'" class="v-collapse"> 
+            <slot name="saved" />
+          </Collapse>
+
+          <Collapse :when="section.state === 'editing'" class="v-collapse">
+            <slot name="editing" />
+          </Collapse>
+        </div>
+    </fieldset>
+</template>
+
+<script setup>
+import { Collapse } from "vue-collapsed";
+const emit = defineEmits(["edit"]);
+const props = defineProps({
+  title: String,
+  step: Boolean,
+  section: {
+    type: Object,
+    default: () => ({ state: "editing" }),
+    required: false
+  },
+  name: String
+});
+const sectionRef = ref(null);
+const classesCard = computed(() => {
+  return {
+    "editing": "card--editing",
+    "paused": "card--paused",
+    "saved": "card--saved",
+    "closed": "card--closed cursor-not-allowed"
+  }[props.section.state];
+});
+const classesHeader = computed(() => {
+  return {
+    "editing": "pb-4",
+    "paused": "pb-4",
+    "saved": "pb-4",
+    "closed": "!mb-0"
+  }[props.section.state];
+});
+const classesTitle = computed(() => {
+  return {
+    "editing": "text-purple-dark",
+    "saved": "text-purple-dark",
+    "paused": "text-purple-dark",
+    "closed": "!text-grey-dark"
+  }[props.section.state];
+});
+const classesHexagon = computed(() => {
+  return {
+    "editing": "hexagon--editing",
+    "paused": "hexagon--closed",
+    "saved": "hexagon--saved",
+    "closed": "hexagon--closed"
+  }[props.section.state];
+});
+watch(() => props.section.state, (value) => {
+  if (value === "editing") {
+    setTimeout(() => {
+      sectionRef.value.scrollIntoView({ behavior: "smooth", block: "start" });
+    }, 400);
+  }
+});
+</script>
+
+<style>
+@reference "../../assets/style.css";.card{position:relative}@media screen and (min-width:1136px){.card:before{content:"";height:100%;left:39.5px;position:absolute;top:0;width:1px;z-index:2;@apply bg-purple-light transition-all}.card--first:before{height:calc(100% - 32px);top:32px}.card--last:before{height:32px}}.hexagon{background:50%/contain no-repeat url(../../assets/images/number-hexagon-saved.svg);@apply transition-all}.hexagon--editing{background-image:url(../../assets/images/number-hexagon-editing.svg)}.hexagon--saved{background-image:url(../../assets/images/number-hexagon-saved.svg)}.hexagon--closed{background-image:url(../../assets/images/number-hexagon-closed.svg)}
+</style>

package/dist/runtime/components/Form/Fieldset.vue.d.ts

@@ -0,0 +1,41 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    title: StringConstructor;
+    step: BooleanConstructor;
+    section: {
+        type: ObjectConstructor;
+        default: () => {
+            state: string;
+        };
+        required: false;
+    };
+    name: StringConstructor;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    edit: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    title: StringConstructor;
+    step: BooleanConstructor;
+    section: {
+        type: ObjectConstructor;
+        default: () => {
+            state: string;
+        };
+        required: false;
+    };
+    name: StringConstructor;
+}>> & Readonly<{
+    onEdit?: ((...args: any[]) => any) | undefined;
+}>, {
+    section: Record<string, any>;
+    step: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    saved?: ((props: {}) => any) | undefined;
+} & {
+    editing?: ((props: {}) => any) | undefined;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "independer-design-system",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "Vue 3 component library for the Independer Design System (DS2)",
   "repository": "arjanvanrees/independer-design-system",
   "license": "MIT",
@@ -42,7 +42,8 @@
     "@nuxt/kit": "^4.3.1",
     "@nuxtjs/tailwindcss": "^6.14.0",
     "@tailwindcss/vite": "^4.2.1",
-    "tailwindcss": "^4.2.1"
+    "tailwindcss": "^4.2.1",
+    "vue-collapsed": "^1.3.5"
   },
   "devDependencies": {
     "@iconify-json/eva": "^1.2.3",