@iroco/ui 0.16.0 → 0.17.0

package/lib/index.mjs

@@ -4211,8 +4211,9 @@ function create_each_block$1(ctx) {
 			? /*item*/ ctx[7].hrefOrCallback
 			: "#");
 
-			attr(a, "class", "svelte-1c8sozl");
-			attr(li, "class", li_class_value = "nav__" + /*type*/ ctx[1] + "__item" + " svelte-1c8sozl");
+			attr(a, "class", "svelte-v0jihd");
+			toggle_class(a, "iroco-ui-button", /*item*/ ctx[7].isButton());
+			attr(li, "class", li_class_value = "nav__" + /*type*/ ctx[1] + "__item" + " svelte-v0jihd");
 			toggle_class(li, "active", /*active*/ ctx[2] === /*item*/ ctx[7].name);
 		},
 		m(target, anchor) {
@@ -4236,7 +4237,11 @@ function create_each_block$1(ctx) {
 				attr(a, "href", a_href_value);
 			}
 
-			if (dirty & /*type*/ 2 && li_class_value !== (li_class_value = "nav__" + /*type*/ ctx[1] + "__item" + " svelte-1c8sozl")) {
+			if (dirty & /*navigationItems*/ 1) {
+				toggle_class(a, "iroco-ui-button", /*item*/ ctx[7].isButton());
+			}
+
+			if (dirty & /*type*/ 2 && li_class_value !== (li_class_value = "nav__" + /*type*/ ctx[1] + "__item" + " svelte-v0jihd")) {
 				attr(li, "class", li_class_value);
 			}
 
@@ -4284,10 +4289,10 @@ function create_fragment$8(ctx) {
 				each_blocks[i].c();
 			}
 
-			attr(button, "class", button_class_value = "nav__" + /*type*/ ctx[1] + "__close" + " svelte-1c8sozl");
-			attr(ul, "class", ul_class_value = "nav__" + /*type*/ ctx[1] + "__item-container" + " svelte-1c8sozl");
+			attr(button, "class", button_class_value = "nav__" + /*type*/ ctx[1] + "__close" + " svelte-v0jihd");
+			attr(ul, "class", ul_class_value = "nav__" + /*type*/ ctx[1] + "__item-container" + " svelte-v0jihd");
 			attr(nav, "data-testid", /*type*/ ctx[1]);
-			attr(nav, "class", nav_class_value = "nav__" + /*type*/ ctx[1] + " svelte-1c8sozl");
+			attr(nav, "class", nav_class_value = "nav__" + /*type*/ ctx[1] + " svelte-v0jihd");
 		},
 		m(target, anchor) {
 			insert(target, nav, anchor);
@@ -4308,7 +4313,7 @@ function create_fragment$8(ctx) {
 			}
 		},
 		p(ctx, [dirty]) {
-			if (!current || dirty & /*type*/ 2 && button_class_value !== (button_class_value = "nav__" + /*type*/ ctx[1] + "__close" + " svelte-1c8sozl")) {
+			if (!current || dirty & /*type*/ 2 && button_class_value !== (button_class_value = "nav__" + /*type*/ ctx[1] + "__close" + " svelte-v0jihd")) {
 				attr(button, "class", button_class_value);
 			}
 
@@ -4335,7 +4340,7 @@ function create_fragment$8(ctx) {
 				each_blocks.length = each_value.length;
 			}
 
-			if (!current || dirty & /*type*/ 2 && ul_class_value !== (ul_class_value = "nav__" + /*type*/ ctx[1] + "__item-container" + " svelte-1c8sozl")) {
+			if (!current || dirty & /*type*/ 2 && ul_class_value !== (ul_class_value = "nav__" + /*type*/ ctx[1] + "__item-container" + " svelte-v0jihd")) {
 				attr(ul, "class", ul_class_value);
 			}
 
@@ -4343,7 +4348,7 @@ function create_fragment$8(ctx) {
 				attr(nav, "data-testid", /*type*/ ctx[1]);
 			}
 
-			if (!current || dirty & /*type*/ 2 && nav_class_value !== (nav_class_value = "nav__" + /*type*/ ctx[1] + " svelte-1c8sozl")) {
+			if (!current || dirty & /*type*/ 2 && nav_class_value !== (nav_class_value = "nav__" + /*type*/ ctx[1] + " svelte-v0jihd")) {
 				attr(nav, "class", nav_class_value);
 			}
 		},
@@ -5732,4 +5737,19 @@ class Alert extends SvelteComponent {
 	}
 }
 
-export { Alert, Button, DataTable, Icon, IconFloppyDisk, IconInfo, IconIrocoLogo, IconMastodon, IconMoreSign as IconMore, IconTrashCan, IrocoLogo, Loader, NavBar, Navigation, NumberInput, RadioButton, TextInput };
+class NavigationItem {
+    constructor(name, hrefOrCallback) {
+        this.hrefOrCallback = hrefOrCallback;
+        this.name = name;
+    }
+    isButton() {
+        return typeof this.hrefOrCallback === 'function';
+    }
+}
+var ButtonKind;
+(function (ButtonKind) {
+    ButtonKind["REGULAR"] = "regular";
+    ButtonKind["DANGER"] = "danger";
+})(ButtonKind || (ButtonKind = {}));
+
+export { Alert, Button, ButtonKind, DataTable, Icon, IconFloppyDisk, IconInfo, IconIrocoLogo, IconMastodon, IconMoreSign as IconMore, IconTrashCan, IrocoLogo, Loader, NavBar, Navigation, NavigationItem, NumberInput, RadioButton, TextInput };

package/lib/index.mjs.css

@@ -16,6 +16,21 @@ svg.svelte-1cuxg7m {
   to {
     transform: rotate(359deg); } }
 
+.data-table.svelte-1ju5y8t {
+  border: 1px solid #464452;
+  width: 100%; }
+
+.data-table__header.svelte-1ju5y8t {
+  font-size: 1.5em;
+  height: 4rem; }
+
+.data-table__header__cell.svelte-1ju5y8t {
+  border-bottom: 1px solid #464452; }
+
+.data-table__body__cell.svelte-1ju5y8t {
+  text-align: center;
+  vertical-align: middle; }
+
 .iroco-ui-radio.svelte-156c82q.svelte-156c82q.svelte-156c82q {
   color: #f2ebe3;
   position: relative;
@@ -133,45 +148,6 @@ input.svelte-1y0402x.svelte-1y0402x:focus {
   .navigation--mobile__title-container.svelte-lqwgm1 h1.svelte-lqwgm1 {
     padding-left: 0.5em; } }
 
-@use "colors";
-@use "containers";
-@use "fonts";
-@use "forms";
-@use "layouts";
-.data-table.svelte-1ju5y8t {
-  border: 1px solid #464452;
-  width: 100%; }
-
-.data-table__header.svelte-1ju5y8t {
-  font-size: 1.5em;
-  height: 4rem; }
-
-.data-table__header__cell.svelte-1ju5y8t {
-  border-bottom: 1px solid #464452; }
-
-.data-table__body__cell.svelte-1ju5y8t {
-  text-align: center;
-  vertical-align: middle; }
-
-.alert.svelte-itln7g {
-  min-height: 2em;
-  display: inline-flex;
-  align-items: center;
-  border-radius: 0.3em;
-  padding: 0 1em 0 1em;
-  font-size: 1.2em;
-  justify-content: center;
-  margin-bottom: 1em;
-  cursor: pointer; }
-
-.alert--danger.svelte-itln7g {
-  background-color: rgba(255, 80, 77, 0.5);
-  border: 1px solid #ff504d; }
-
-.alert--success.svelte-itln7g {
-  background-color: rgba(0, 214, 146, 0.5);
-  border: 1px solid #00D692; }
-
 .container-wide.svelte-5qkkwb {
   width: calc(100% - 20px);
   max-width: 2360px;
@@ -351,7 +327,135 @@ input.svelte-1y0402x.svelte-1y0402x:focus {
 .iroco-ui-button.disabled.svelte-5qkkwb:hover {
   box-shadow: none; }
 
-.container-wide.svelte-1c8sozl.svelte-1c8sozl {
+.container-wide.svelte-v0jihd.svelte-v0jihd {
+  width: calc(100% - 20px);
+  max-width: 2360px;
+  margin-left: auto;
+  margin-right: auto;
+  transition: max-width ease-out 200ms; }
+
+@media all and (max-width: 2560px) {
+  .container-wide.svelte-v0jihd.svelte-v0jihd {
+    max-width: 1620px; } }
+
+@media all and (max-width: 1800px) {
+  .container-wide.svelte-v0jihd.svelte-v0jihd {
+    max-width: 1280px; } }
+
+@media all and (max-width: 1440px) {
+  .container-wide.svelte-v0jihd.svelte-v0jihd {
+    max-width: 884px; } }
+
+@media all and (max-width: 1024px) {
+  .container-wide.svelte-v0jihd.svelte-v0jihd {
+    max-width: 648px; } }
+
+@media all and (max-width: 768px) {
+  .container-wide.svelte-v0jihd.svelte-v0jihd {
+    max-width: 496px; } }
+
+@media all and (max-width: 596px) {
+  .container-wide.svelte-v0jihd.svelte-v0jihd {
+    max-width: 365px; } }
+
+@media all and (max-width: 425px) {
+  .container-wide.svelte-v0jihd.svelte-v0jihd {
+    max-width: calc(100% - 60px); } }
+
+@media all and (max-width: 375px) {
+  .container-wide.svelte-v0jihd.svelte-v0jihd {
+    max-width: calc(100% - 40px); } }
+
+@media all and (max-width: 320px) {
+  .container-wide.svelte-v0jihd.svelte-v0jihd {
+    max-width: calc(100% - 20px); } }
+
+.container-large.svelte-v0jihd.svelte-v0jihd {
+  width: calc(100% - 20px);
+  max-width: 1280px;
+  margin-left: auto;
+  margin-right: auto;
+  transition: max-width ease-out 200ms; }
+
+@media all and (max-width: 1440px) {
+  .container-large.svelte-v0jihd.svelte-v0jihd {
+    max-width: 884px; } }
+
+@media all and (max-width: 1024px) {
+  .container-large.svelte-v0jihd.svelte-v0jihd {
+    max-width: 648px; } }
+
+@media all and (max-width: 768px) {
+  .container-large.svelte-v0jihd.svelte-v0jihd {
+    max-width: 496px; } }
+
+@media all and (max-width: 596px) {
+  .container-large.svelte-v0jihd.svelte-v0jihd {
+    max-width: 365px; } }
+
+@media all and (max-width: 425px) {
+  .container-large.svelte-v0jihd.svelte-v0jihd {
+    max-width: calc(100% - 60px); } }
+
+@media all and (max-width: 375px) {
+  .container-large.svelte-v0jihd.svelte-v0jihd {
+    max-width: calc(100% - 40px); } }
+
+@media all and (max-width: 320px) {
+  .container-large.svelte-v0jihd.svelte-v0jihd {
+    max-width: calc(100% - 20px); } }
+
+.container-medium.svelte-v0jihd.svelte-v0jihd {
+  width: calc(100% - 20px);
+  max-width: 884px;
+  margin-left: auto;
+  margin-right: auto;
+  transition: max-width ease-out 200ms; }
+
+@media all and (max-width: 1024px) {
+  .container-medium.svelte-v0jihd.svelte-v0jihd {
+    max-width: 648px; } }
+
+@media all and (max-width: 768px) {
+  .container-medium.svelte-v0jihd.svelte-v0jihd {
+    max-width: 496px; } }
+
+@media all and (max-width: 596px) {
+  .container-medium.svelte-v0jihd.svelte-v0jihd {
+    max-width: 365px; } }
+
+@media all and (max-width: 425px) {
+  .container-medium.svelte-v0jihd.svelte-v0jihd {
+    max-width: calc(100% - 60px); } }
+
+@media all and (max-width: 375px) {
+  .container-medium.svelte-v0jihd.svelte-v0jihd {
+    max-width: calc(100% - 40px); } }
+
+@media all and (max-width: 320px) {
+  .container-medium.svelte-v0jihd.svelte-v0jihd {
+    max-width: calc(100% - 20px); } }
+
+.container-small.svelte-v0jihd.svelte-v0jihd {
+  width: calc(100% - 20px);
+  max-width: 496px;
+  margin-left: auto;
+  margin-right: auto;
+  transition: max-width ease-out 200ms; }
+
+@media all and (max-width: 425px) {
+  .container-small.svelte-v0jihd.svelte-v0jihd {
+    max-width: calc(100% - 60px); } }
+
+@media all and (max-width: 375px) {
+  .container-small.svelte-v0jihd.svelte-v0jihd {
+    max-width: calc(100% - 40px); } }
+
+@media all and (max-width: 320px) {
+  .container-small.svelte-v0jihd.svelte-v0jihd {
+    max-width: calc(100% - 20px); } }
+
+.container-wide.svelte-v0jihd.svelte-v0jihd {
   width: calc(100% - 20px);
   max-width: 2360px;
   margin-left: auto;
@@ -359,42 +463,42 @@ input.svelte-1y0402x.svelte-1y0402x:focus {
   transition: max-width ease-out 200ms; }
 
 @media all and (max-width: 2560px) {
-  .container-wide.svelte-1c8sozl.svelte-1c8sozl {
+  .container-wide.svelte-v0jihd.svelte-v0jihd {
     max-width: 1620px; } }
 
 @media all and (max-width: 1800px) {
-  .container-wide.svelte-1c8sozl.svelte-1c8sozl {
+  .container-wide.svelte-v0jihd.svelte-v0jihd {
     max-width: 1280px; } }
 
 @media all and (max-width: 1440px) {
-  .container-wide.svelte-1c8sozl.svelte-1c8sozl {
+  .container-wide.svelte-v0jihd.svelte-v0jihd {
     max-width: 884px; } }
 
 @media all and (max-width: 1024px) {
-  .container-wide.svelte-1c8sozl.svelte-1c8sozl {
+  .container-wide.svelte-v0jihd.svelte-v0jihd {
     max-width: 648px; } }
 
 @media all and (max-width: 768px) {
-  .container-wide.svelte-1c8sozl.svelte-1c8sozl {
+  .container-wide.svelte-v0jihd.svelte-v0jihd {
     max-width: 496px; } }
 
 @media all and (max-width: 596px) {
-  .container-wide.svelte-1c8sozl.svelte-1c8sozl {
+  .container-wide.svelte-v0jihd.svelte-v0jihd {
     max-width: 365px; } }
 
 @media all and (max-width: 425px) {
-  .container-wide.svelte-1c8sozl.svelte-1c8sozl {
+  .container-wide.svelte-v0jihd.svelte-v0jihd {
     max-width: calc(100% - 60px); } }
 
 @media all and (max-width: 375px) {
-  .container-wide.svelte-1c8sozl.svelte-1c8sozl {
+  .container-wide.svelte-v0jihd.svelte-v0jihd {
     max-width: calc(100% - 40px); } }
 
 @media all and (max-width: 320px) {
-  .container-wide.svelte-1c8sozl.svelte-1c8sozl {
+  .container-wide.svelte-v0jihd.svelte-v0jihd {
     max-width: calc(100% - 20px); } }
 
-.container-large.svelte-1c8sozl.svelte-1c8sozl {
+.container-large.svelte-v0jihd.svelte-v0jihd {
   width: calc(100% - 20px);
   max-width: 1280px;
   margin-left: auto;
@@ -402,34 +506,34 @@ input.svelte-1y0402x.svelte-1y0402x:focus {
   transition: max-width ease-out 200ms; }
 
 @media all and (max-width: 1440px) {
-  .container-large.svelte-1c8sozl.svelte-1c8sozl {
+  .container-large.svelte-v0jihd.svelte-v0jihd {
     max-width: 884px; } }
 
 @media all and (max-width: 1024px) {
-  .container-large.svelte-1c8sozl.svelte-1c8sozl {
+  .container-large.svelte-v0jihd.svelte-v0jihd {
     max-width: 648px; } }
 
 @media all and (max-width: 768px) {
-  .container-large.svelte-1c8sozl.svelte-1c8sozl {
+  .container-large.svelte-v0jihd.svelte-v0jihd {
     max-width: 496px; } }
 
 @media all and (max-width: 596px) {
-  .container-large.svelte-1c8sozl.svelte-1c8sozl {
+  .container-large.svelte-v0jihd.svelte-v0jihd {
     max-width: 365px; } }
 
 @media all and (max-width: 425px) {
-  .container-large.svelte-1c8sozl.svelte-1c8sozl {
+  .container-large.svelte-v0jihd.svelte-v0jihd {
     max-width: calc(100% - 60px); } }
 
 @media all and (max-width: 375px) {
-  .container-large.svelte-1c8sozl.svelte-1c8sozl {
+  .container-large.svelte-v0jihd.svelte-v0jihd {
     max-width: calc(100% - 40px); } }
 
 @media all and (max-width: 320px) {
-  .container-large.svelte-1c8sozl.svelte-1c8sozl {
+  .container-large.svelte-v0jihd.svelte-v0jihd {
     max-width: calc(100% - 20px); } }
 
-.container-medium.svelte-1c8sozl.svelte-1c8sozl {
+.container-medium.svelte-v0jihd.svelte-v0jihd {
   width: calc(100% - 20px);
   max-width: 884px;
   margin-left: auto;
@@ -437,30 +541,30 @@ input.svelte-1y0402x.svelte-1y0402x:focus {
   transition: max-width ease-out 200ms; }
 
 @media all and (max-width: 1024px) {
-  .container-medium.svelte-1c8sozl.svelte-1c8sozl {
+  .container-medium.svelte-v0jihd.svelte-v0jihd {
     max-width: 648px; } }
 
 @media all and (max-width: 768px) {
-  .container-medium.svelte-1c8sozl.svelte-1c8sozl {
+  .container-medium.svelte-v0jihd.svelte-v0jihd {
     max-width: 496px; } }
 
 @media all and (max-width: 596px) {
-  .container-medium.svelte-1c8sozl.svelte-1c8sozl {
+  .container-medium.svelte-v0jihd.svelte-v0jihd {
     max-width: 365px; } }
 
 @media all and (max-width: 425px) {
-  .container-medium.svelte-1c8sozl.svelte-1c8sozl {
+  .container-medium.svelte-v0jihd.svelte-v0jihd {
     max-width: calc(100% - 60px); } }
 
 @media all and (max-width: 375px) {
-  .container-medium.svelte-1c8sozl.svelte-1c8sozl {
+  .container-medium.svelte-v0jihd.svelte-v0jihd {
     max-width: calc(100% - 40px); } }
 
 @media all and (max-width: 320px) {
-  .container-medium.svelte-1c8sozl.svelte-1c8sozl {
+  .container-medium.svelte-v0jihd.svelte-v0jihd {
     max-width: calc(100% - 20px); } }
 
-.container-small.svelte-1c8sozl.svelte-1c8sozl {
+.container-small.svelte-v0jihd.svelte-v0jihd {
   width: calc(100% - 20px);
   max-width: 496px;
   margin-left: auto;
@@ -468,30 +572,81 @@ input.svelte-1y0402x.svelte-1y0402x:focus {
   transition: max-width ease-out 200ms; }
 
 @media all and (max-width: 425px) {
-  .container-small.svelte-1c8sozl.svelte-1c8sozl {
+  .container-small.svelte-v0jihd.svelte-v0jihd {
     max-width: calc(100% - 60px); } }
 
 @media all and (max-width: 375px) {
-  .container-small.svelte-1c8sozl.svelte-1c8sozl {
+  .container-small.svelte-v0jihd.svelte-v0jihd {
     max-width: calc(100% - 40px); } }
 
 @media all and (max-width: 320px) {
-  .container-small.svelte-1c8sozl.svelte-1c8sozl {
+  .container-small.svelte-v0jihd.svelte-v0jihd {
     max-width: calc(100% - 20px); } }
 
-.nav__sidebar__item.svelte-1c8sozl.svelte-1c8sozl, .nav__topbar__item.svelte-1c8sozl.svelte-1c8sozl {
+.iroco-ui-button.svelte-v0jihd.svelte-v0jihd {
+  cursor: pointer;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border: none;
+  flex-shrink: 0;
+  margin: 1em 0em;
+  position: relative;
+  text-transform: uppercase;
+  border-radius: 0.3em; }
+
+.iroco-ui-button--basic.svelte-v0jihd.svelte-v0jihd {
+  background: #f2ebe3;
+  border: 1px solid #18151E; }
+
+.iroco-ui-button--dark.svelte-v0jihd.svelte-v0jihd {
+  background: #18151E;
+  color: #f2ebe3; }
+
+.iroco-ui-button--success.svelte-v0jihd.svelte-v0jihd {
+  background: #00D692; }
+
+.iroco-ui-button--danger.svelte-v0jihd.svelte-v0jihd {
+  background: #ff504d; }
+
+.iroco-ui-button--regular.svelte-v0jihd.svelte-v0jihd {
+  padding: 1em 2em; }
+
+.iroco-ui-button--small.svelte-v0jihd.svelte-v0jihd {
+  padding: 0.5em 1em; }
+
+.iroco-ui-button--basic.svelte-v0jihd.svelte-v0jihd:hover, .iroco-ui-button--success.svelte-v0jihd.svelte-v0jihd:hover, .iroco-ui-button--danger.svelte-v0jihd.svelte-v0jihd:hover {
+  box-shadow: inset 0 0 0 10em rgba(0, 0, 0, 0.2); }
+
+.iroco-ui-button--dark.svelte-v0jihd.svelte-v0jihd:hover {
+  box-shadow: inset 0 0 0 10em rgba(255, 255, 255, 0.2); }
+
+.iroco-ui-button.svelte-v0jihd.svelte-v0jihd:active {
+  box-shadow: none; }
+
+.iroco-ui-button.disabled.svelte-v0jihd.svelte-v0jihd {
+  background-color: #f5f5f5;
+  cursor: default; }
+
+.iroco-ui-button.disabled.svelte-v0jihd.svelte-v0jihd:hover {
+  box-shadow: none; }
+
+.nav__sidebar__item.svelte-v0jihd.svelte-v0jihd, .nav__topbar__item.svelte-v0jihd.svelte-v0jihd {
   text-decoration: none;
   font-size: 0.75em;
   display: block; }
 
-.nav__sidebar__item.svelte-1c8sozl a.svelte-1c8sozl, .nav__topbar__item.svelte-1c8sozl a.svelte-1c8sozl {
+.nav__sidebar__item.svelte-v0jihd a.svelte-v0jihd, .nav__topbar__item.svelte-v0jihd a.svelte-v0jihd {
   color: #f2ebe3;
   font-size: 2em; }
 
-.nav__sidebar__close.svelte-1c8sozl.svelte-1c8sozl, .nav__topbar__close.svelte-1c8sozl.svelte-1c8sozl {
+.nav__sidebar__close.svelte-v0jihd.svelte-v0jihd, .nav__topbar__close.svelte-v0jihd.svelte-v0jihd {
   display: none; }
 
-.nav__sidebar.svelte-1c8sozl.svelte-1c8sozl {
+.nav__sidebar.svelte-v0jihd.svelte-v0jihd {
   height: 100%;
   width: 300px;
   position: absolute;
@@ -499,38 +654,38 @@ input.svelte-1y0402x.svelte-1y0402x:focus {
   left: 0;
   overflow-x: hidden; }
 
-.nav__sidebar__item-container.svelte-1c8sozl.svelte-1c8sozl {
+.nav__sidebar__item-container.svelte-v0jihd.svelte-v0jihd {
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100%; }
 
-.nav__sidebar__item.svelte-1c8sozl.svelte-1c8sozl {
+.nav__sidebar__item.svelte-v0jihd.svelte-v0jihd {
   padding: 2em;
   border-top: 1px solid #464452; }
 
-.nav__sidebar__item.svelte-1c8sozl.svelte-1c8sozl:first-child {
+.nav__sidebar__item.svelte-v0jihd.svelte-v0jihd:first-child {
   border-top: none; }
 
-.nav__sidebar.svelte-1c8sozl .active.svelte-1c8sozl {
+.nav__sidebar.svelte-v0jihd .active.svelte-v0jihd {
   border-top: 1px solid #00D692;
   border-bottom: 1px solid #00D692; }
 
-.nav__topbar.svelte-1c8sozl.svelte-1c8sozl {
+.nav__topbar.svelte-v0jihd.svelte-v0jihd {
   flex-grow: 1;
   display: flex;
   justify-content: flex-end; }
 
-.nav__topbar.svelte-1c8sozl ul.svelte-1c8sozl, .nav__topbar.svelte-1c8sozl li.svelte-1c8sozl {
+.nav__topbar.svelte-v0jihd ul.svelte-v0jihd, .nav__topbar.svelte-v0jihd li.svelte-v0jihd {
   display: inline; }
 
-.nav__topbar.svelte-1c8sozl ul.svelte-1c8sozl {
+.nav__topbar.svelte-v0jihd ul.svelte-v0jihd {
   display: flex;
   flex-grow: 1;
   justify-content: space-around; }
 
 @media all and (max-width: 768px) {
-  .nav__sidebar.svelte-1c8sozl.svelte-1c8sozl, .nav__topbar.svelte-1c8sozl.svelte-1c8sozl {
+  .nav__sidebar.svelte-v0jihd.svelte-v0jihd, .nav__topbar.svelte-v0jihd.svelte-v0jihd {
     position: fixed;
     background-color: #211D28;
     top: 0;
@@ -540,12 +695,12 @@ input.svelte-1y0402x.svelte-1y0402x:focus {
     padding-top: 2em;
     margin: 0;
     border-right: none; }
-  .nav__sidebar__item-container.svelte-1c8sozl.svelte-1c8sozl, .nav__topbar__item-container.svelte-1c8sozl.svelte-1c8sozl {
+  .nav__sidebar__item-container.svelte-v0jihd.svelte-v0jihd, .nav__topbar__item-container.svelte-v0jihd.svelte-v0jihd {
     padding: 0em;
     margin-top: 2rem; }
-  .nav__sidebar.svelte-1c8sozl ul.svelte-1c8sozl, .nav__sidebar.svelte-1c8sozl li.svelte-1c8sozl, .nav__topbar.svelte-1c8sozl ul.svelte-1c8sozl, .nav__topbar.svelte-1c8sozl li.svelte-1c8sozl {
+  .nav__sidebar.svelte-v0jihd ul.svelte-v0jihd, .nav__sidebar.svelte-v0jihd li.svelte-v0jihd, .nav__topbar.svelte-v0jihd ul.svelte-v0jihd, .nav__topbar.svelte-v0jihd li.svelte-v0jihd {
     display: block; }
-  .nav__sidebar__close.svelte-1c8sozl.svelte-1c8sozl, .nav__topbar__close.svelte-1c8sozl.svelte-1c8sozl {
+  .nav__sidebar__close.svelte-v0jihd.svelte-v0jihd, .nav__topbar__close.svelte-v0jihd.svelte-v0jihd {
     display: block;
     position: absolute;
     right: 0;
@@ -553,13 +708,37 @@ input.svelte-1y0402x.svelte-1y0402x:focus {
     background-color: transparent;
     border: none;
     color: #a9a29e; }
-  .nav__sidebar.svelte-1c8sozl.svelte-1c8sozl {
+  .nav__sidebar.svelte-v0jihd.svelte-v0jihd {
     top: 0;
     left: 0; }
-  .nav__sidebar__item.svelte-1c8sozl.svelte-1c8sozl:first-child {
+  .nav__sidebar__item.svelte-v0jihd.svelte-v0jihd:first-child {
     border-top: 1px solid #464452; }
-  .nav__topbar.svelte-1c8sozl.svelte-1c8sozl {
+  .nav__topbar.svelte-v0jihd.svelte-v0jihd {
     height: 100%; }
-  .nav__topbar__item.svelte-1c8sozl.svelte-1c8sozl {
+  .nav__topbar__item.svelte-v0jihd.svelte-v0jihd {
     padding: 2em;
     border-top: 1px solid #464452; } }
+
+@use "colors";
+@use "containers";
+@use "fonts";
+@use "forms";
+@use "layouts";
+.alert.svelte-itln7g {
+  min-height: 2em;
+  display: inline-flex;
+  align-items: center;
+  border-radius: 0.3em;
+  padding: 0 1em 0 1em;
+  font-size: 1.2em;
+  justify-content: center;
+  margin-bottom: 1em;
+  cursor: pointer; }
+
+.alert--danger.svelte-itln7g {
+  background-color: rgba(255, 80, 77, 0.5);
+  border: 1px solid #ff504d; }
+
+.alert--success.svelte-itln7g {
+  background-color: rgba(0, 214, 146, 0.5);
+  border: 1px solid #00D692; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iroco/ui",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "Iroco design system based on Svelte",
   "main": "lib/index.js",
   "module": "lib/index.mjs",

package/src/NavBar.svelte

@@ -26,10 +26,11 @@
 
 	<ul class="nav__{type}__item-container">
 		{#each navigationItems as item}
-			<li class="nav__{type}__item" class:active={active === item.name}>
+			<li class="nav__{type}__item" class:active={active === item.name}  >
 				<a
 					on:click={() => handleClickLink(item)}
 					href={typeof item.hrefOrCallback === 'string' ? item.hrefOrCallback : '#'}
+					class:iroco-ui-button= { item.isButton() }
 				>
 					{item.name}</a
 				>
@@ -42,6 +43,7 @@
 	@use '../scss/colors';
 	@use '../scss/constants';
 	@import '../scss/containers';
+	@import '../scss/button';
 
 	.nav {
 		&__sidebar,

package/src/definition.ts

@@ -12,7 +12,6 @@ export class NavigationItem  {
     }
 };
 
-
 export enum ButtonKind {
     REGULAR = "regular",
     DANGER = "danger"

package/src/index.ts

@@ -16,5 +16,6 @@ export { default as IconTrashCan } from './IconTrashCan.svelte'
 export { default as Alert } from './Alert.svelte'
 export { default as IconIrocoLogo } from './IconIrocoLogo.svelte'
 export { default as IrocoLogo } from './IrocoLogo.svelte'
+export * from './definition'