@kubex/zinc 1.0.4 → 1.0.6

package/docs/pages/components/item.md

@@ -8,7 +8,7 @@ layout: component
 ```html:preview
 
 <zn-sp divide no-gap>
-  <zn-item caption="Full name" edit-on-hover>
+  <zn-item caption="Full name" description="this is description" edit-on-hover>
     <zn-inline-edit name="name" 
                     value="EN"
                     options="{&quot;&quot;:&quot;-&quot;,&quot;EN&quot;:&quot;English&quot;,&quot;IT&quot;:&quot;Italian&quot;,&quot;FR&quot;:&quot;French&quot;,&quot;DE&quot;:&quot;German&quot;,&quot;ES&quot;:&quot;Spanish&quot;,&quot;PT&quot;:&quot;Portuguese&quot;,&quot;AB&quot;:&quot;Abkhazian&quot;,&quot;OM&quot;:&quot;Afan\/Oromoor\/Oriya&quot;,&quot;AA&quot;:&quot;Afar&quot;,&quot;AF&quot;:&quot;Afrikaans&quot;,&quot;SQ&quot;:&quot;Albanian&quot;,&quot;AM&quot;:&quot;Amharic&quot;,&quot;AR&quot;:&quot;Arabic&quot;,&quot;HY&quot;:&quot;Armenian&quot;,&quot;AS&quot;:&quot;Assamese&quot;,&quot;AY&quot;:&quot;Aymara&quot;,&quot;AZ&quot;:&quot;Azerbaijani&quot;,&quot;BA&quot;:&quot;Bashkir&quot;,&quot;EU&quot;:&quot;Basque&quot;,&quot;BN&quot;:&quot;Bengali\/Bangla&quot;,&quot;DZ&quot;:&quot;Bhutani&quot;,&quot;BH&quot;:&quot;Bihari&quot;,&quot;BI&quot;:&quot;Bislama&quot;,&quot;BR&quot;:&quot;Breton&quot;,&quot;BG&quot;:&quot;Bulgarian&quot;,&quot;MY&quot;:&quot;Burmese&quot;,&quot;BE&quot;:&quot;Byelorussian&quot;,&quot;KM&quot;:&quot;Cambodian&quot;,&quot;CA&quot;:&quot;Catalan&quot;,&quot;ZH&quot;:&quot;Chinese&quot;,&quot;CO&quot;:&quot;Corsican&quot;,&quot;HR&quot;:&quot;Croatian&quot;,&quot;CS&quot;:&quot;Czech&quot;,&quot;DA&quot;:&quot;Danish&quot;,&quot;NL&quot;:&quot;Dutch&quot;,&quot;EO&quot;:&quot;Esperanto&quot;,&quot;ET&quot;:&quot;Estonian&quot;,&quot;FO&quot;:&quot;Faeroese&quot;,&quot;FJ&quot;:&quot;Fiji&quot;,&quot;FI&quot;:&quot;Finnish&quot;,&quot;FY&quot;:&quot;Frisian&quot;,&quot;GL&quot;:&quot;Galician&quot;,&quot;KA&quot;:&quot;Georgian&quot;,&quot;EL&quot;:&quot;Greek&quot;,&quot;KL&quot;:&quot;Greenlandic&quot;,&quot;GN&quot;:&quot;Guarani&quot;,&quot;GU&quot;:&quot;Gujarati&quot;,&quot;HA&quot;:&quot;Hausa&quot;,&quot;HE&quot;:&quot;Hebrew&quot;,&quot;HI&quot;:&quot;Hindi&quot;,&quot;HU&quot;:&quot;Hungarian&quot;,&quot;IS&quot;:&quot;Icelandic&quot;,&quot;ID&quot;:&quot;Indonesian&quot;,&quot;IA&quot;:&quot;Interlingua&quot;,&quot;IE&quot;:&quot;Interlingue&quot;,&quot;IK&quot;:&quot;Inupiak&quot;,&quot;GA&quot;:&quot;Irish&quot;,&quot;JA&quot;:&quot;Japanese&quot;,&quot;JV&quot;:&quot;Javanese&quot;,&quot;KN&quot;:&quot;Kannada&quot;,&quot;KS&quot;:&quot;Kashmiri&quot;,&quot;KK&quot;:&quot;Kazakh&quot;,&quot;RW&quot;:&quot;Kinyarwanda&quot;,&quot;KY&quot;:&quot;Kirghiz&quot;,&quot;RN&quot;:&quot;Kirundi&quot;,&quot;KO&quot;:&quot;Korean&quot;,&quot;KU&quot;:&quot;Kurdish&quot;,&quot;LO&quot;:&quot;Laothian&quot;,&quot;LA&quot;:&quot;Latin&quot;,&quot;LV&quot;:&quot;Latvian\/Lettish&quot;,&quot;LN&quot;:&quot;Lingala&quot;,&quot;LT&quot;:&quot;Lithuanian&quot;,&quot;MK&quot;:&quot;Macedonian&quot;,&quot;MG&quot;:&quot;Malagasy&quot;,&quot;MS&quot;:&quot;Malay&quot;,&quot;ML&quot;:&quot;Malayalam&quot;,&quot;MT&quot;:&quot;Maltese&quot;,&quot;MI&quot;:&quot;Maori&quot;,&quot;MR&quot;:&quot;Marathi&quot;,&quot;MO&quot;:&quot;Moldavian&quot;,&quot;MN&quot;:&quot;Mongolian&quot;,&quot;NA&quot;:&quot;Nauru&quot;,&quot;NB&quot;:&quot;Norwegian Bokm\u00e5l&quot;,&quot;NE&quot;:&quot;Nepali&quot;,&quot;NO&quot;:&quot;Norwegian&quot;,&quot;OC&quot;:&quot;Occitan&quot;,&quot;PS&quot;:&quot;Pashto\/Pushto&quot;,&quot;FA&quot;:&quot;Persian&quot;,&quot;PL&quot;:&quot;Polish&quot;,&quot;PA&quot;:&quot;Punjabi&quot;,&quot;QU&quot;:&quot;Quechua&quot;,&quot;RM&quot;:&quot;Rhaeto-Romance&quot;,&quot;RO&quot;:&quot;Romanian&quot;,&quot;RU&quot;:&quot;Russian&quot;,&quot;SM&quot;:&quot;Samoan&quot;,&quot;SG&quot;:&quot;Sangro&quot;,&quot;SA&quot;:&quot;Sanskrit&quot;,&quot;GD&quot;:&quot;Scots\/Gaelic&quot;,&quot;SR&quot;:&quot;Serbian&quot;,&quot;SH&quot;:&quot;Serbo-Croatian&quot;,&quot;ST&quot;:&quot;Sesotho&quot;,&quot;TN&quot;:&quot;Setswana&quot;,&quot;SN&quot;:&quot;Shona&quot;,&quot;SD&quot;:&quot;Sindhi&quot;,&quot;SE&quot;:&quot;Northern Sami&quot;,&quot;SI&quot;:&quot;Singhalese&quot;,&quot;SS&quot;:&quot;Siswati&quot;,&quot;SK&quot;:&quot;Slovak&quot;,&quot;SL&quot;:&quot;Slovenian&quot;,&quot;SO&quot;:&quot;Somali&quot;,&quot;SU&quot;:&quot;Sundanese&quot;,&quot;SW&quot;:&quot;Swahili&quot;,&quot;SV&quot;:&quot;Swedish&quot;,&quot;TL&quot;:&quot;Tagalog&quot;,&quot;TG&quot;:&quot;Tajik&quot;,&quot;TA&quot;:&quot;Tamil&quot;,&quot;TT&quot;:&quot;Tatar&quot;,&quot;TE&quot;:&quot;Tegulu&quot;,&quot;TH&quot;:&quot;Thai&quot;,&quot;BO&quot;:&quot;Tibetan&quot;,&quot;TI&quot;:&quot;Tigrinya&quot;,&quot;TO&quot;:&quot;Tonga&quot;,&quot;TS&quot;:&quot;Tsonga&quot;,&quot;TR&quot;:&quot;Turkish&quot;,&quot;TK&quot;:&quot;Turkmen&quot;,&quot;TW&quot;:&quot;Twi&quot;,&quot;UK&quot;:&quot;Ukrainian&quot;,&quot;UR&quot;:&quot;Urdu&quot;,&quot;UZ&quot;:&quot;Uzbek&quot;,&quot;VI&quot;:&quot;Vietnamese&quot;,&quot;VO&quot;:&quot;Volapuk&quot;,&quot;CY&quot;:&quot;Welsh&quot;,&quot;WO&quot;:&quot;Wolof&quot;,&quot;XH&quot;:&quot;Xhosa&quot;,&quot;JI&quot;:&quot;Yiddish&quot;,&quot;YO&quot;:&quot;Yoruba&quot;,&quot;ZU&quot;:&quot;Zulu&quot;}"></zn-inline-edit>
@@ -41,7 +41,7 @@ layout: component
 
 ```html:preview
 
-<zn-item caption="Full name" icon="person">
+<zn-item caption="Full name" icon="person" description="this is description">
   This is the content
 </zn-item>
 

package/docs/pages/components/menu-item.md

@@ -6,14 +6,23 @@ layout: component
 ---
 
 ```html:preview
-<zn-menu-item></zn-menu-item>
+<zn-menu-item>Menu item</zn-menu-item>
 ```
 
 ## Examples
 
-### First Example
+### Colors Example
 
-TODO
+```html:preview
+<zn-menu-item>Menu item</zn-menu-item>
+<zn-menu-item color="primary">Menu item</zn-menu-item>
+<zn-menu-item color="secondary">Menu item</zn-menu-item>
+<zn-menu-item color="transparent">Menu item</zn-menu-item>
+<zn-menu-item color="error">Menu item</zn-menu-item>
+<zn-menu-item color="info">Menu item</zn-menu-item>
+<zn-menu-item color="success">Menu item</zn-menu-item>
+<zn-menu-item color="warning">Menu item</zn-menu-item>
+```
 
 ### Second Example
 

package/docs/pages/components/panel.md

@@ -121,4 +121,21 @@ panel. This can be useful when using other components such as `zn-tabs`.
 </zn-panel>
 ```
 
+### Cosmic Panel
 
+```html:preview
+
+<zn-panel flush cosmic>
+
+  <!-- Example panel content -->
+  <zn-sp flush no-gap divide>
+    <zn-inline-edit padded inline caption="Label 1" value="This is Awesome"></zn-inline-edit>
+    <zn-inline-edit padded inline caption="Label 2" value="This is Awesome"></zn-inline-edit>
+  </zn-sp>
+
+  <!-- Panel Footer -->
+  <span slot="footer">
+    Some awesome footer information
+  </span>
+</zn-panel>
+```

package/docs/pages/components/progress-tile.md

@@ -6,7 +6,23 @@ layout: component
 ---
 
 ```html:preview
-<zn-progress-tile></zn-progress-tile>
+
+<zn-progress-tile
+  id="progress-tile"
+  caption="John Doe"
+  status="Active"
+  avatar="JohnDoe@avatar"
+  wait-time="60">
+</zn-progress-tile>
+
+<script>
+  // set start time to current time for demo purposes - 10 seconds ago
+  const startTime = Math.floor(Date.now() / 1000) - 40;
+  const progressTile = document.getElementById('progress-tile');
+
+  progressTile.setAttribute('start-time', startTime);
+  
+</script>
 ```
 
 ## Examples

package/docs/pages/components/settings-container.md

@@ -0,0 +1,137 @@
+---
+meta:
+  title: Settings Container
+  description:
+layout: component
+---
+
+By default, all elements inside a `<zn-settings-container>` are shown.
+You can add filters to toggle visibility of specific elements based on their attributes.
+
+```html:preview
+
+<div style="width: 100%; height: 300px; border: 1px solid #ccc;">
+  <zn-settings-container store-key="example-filters">
+
+    <zn-tile private caption="Leslie Alexander" description="Leslie.alexander@example.com" href="https://google.com">
+      <zn-icon slot="image" size="40" src="https://i.pravatar.cc/60?img=70" round></zn-icon>
+      <div slot="actions">
+        <zn-button href="#">Action</zn-button>
+      </div>
+    </zn-tile>
+
+    <zn-tile private caption="Leslie Alexander" description="Leslie.alexander@example.com" href="https://google.com">
+      <zn-icon slot="image" size="40" src="https://i.pravatar.cc/60?img=70" round></zn-icon>
+      <div slot="actions">
+        <zn-button href="#">Action</zn-button>
+      </div>
+    </zn-tile>
+
+    <zn-tile private caption="Leslie Alexander" description="Leslie.alexander@example.com" href="https://google.com">
+      <zn-icon slot="image" size="40" src="https://i.pravatar.cc/60?img=70" round></zn-icon>
+      <div slot="actions">
+        <zn-button href="#">Action</zn-button>
+      </div>
+    </zn-tile>
+
+    <zn-tile original caption="Leslie Alexander" description="Leslie.alexander@example.com" href="https://google.com">
+      <zn-icon slot="image" size="40" src="https://i.pravatar.cc/60?img=70" round></zn-icon>
+      <div slot="actions">
+        <zn-button href="#">Action</zn-button>
+      </div>
+    </zn-tile>
+
+    <zn-tile original caption="Leslie Alexander" description="Leslie.alexander@example.com" href="https://google.com">
+      <zn-icon slot="image" size="40" src="https://i.pravatar.cc/60?img=70" round></zn-icon>
+      <div slot="actions">
+        <zn-button href="#">Action</zn-button>
+      </div>
+    </zn-tile>
+
+    <div slot="filter" attribute="private" default="true">Toggle Private Messages</div>
+    <div slot="filter" attribute="original" default="true">Toggle Original Messages</div>
+
+  </zn-settings-container>
+</div>
+```
+
+## Examples
+
+### Specific Elements Only
+
+You can pass to the settings container only specific elements you want to be affected by the filters.
+for example by adding item-selector="zn-inline-edit" only the inline edit elements will be affected by the filters.
+
+```html:preview
+
+<style>
+  zn-tile, zn-inline-edit {
+    position: relative;
+  }
+
+  [private]:after, [original]:after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    font-size: 10px;
+    padding: 2px 4px;
+    border-radius: 0 0 0 4px;
+    color: #000;
+    font-weight: bold;
+  }
+
+  [private]:after {
+    content: " (private)";
+    border: 1px solid #f00;
+    background: #fee;
+  }
+
+  [original]:after {
+    content: " (original)";
+    border: 1px solid #00f;
+    background: #eef;
+  }
+</style>
+
+<div style="width: 100%; height: 300px; border: 1px solid #ccc;">
+  <zn-settings-container item-selector="zn-inline-edit">
+
+    <zn-inline-edit private caption="Something" value="1" action="#" method="GET"
+                    options="{&quot;1&quot;: &quot;Option 1&quot;,&quot;2&quot;: &quot;Option 2&quot;}">
+    </zn-inline-edit>
+
+    <zn-tile private caption="Leslie Alexander" description="Leslie.alexander@example.com" href="https://google.com">
+      <zn-icon slot="image" size="40" src="https://i.pravatar.cc/60?img=70" round></zn-icon>
+      <div slot="actions">
+        <zn-button href="#">Action</zn-button>
+      </div>
+    </zn-tile>
+
+    <zn-tile private caption="Leslie Alexander" description="Leslie.alexander@example.com" href="https://google.com">
+      <zn-icon slot="image" size="40" src="https://i.pravatar.cc/60?img=70" round></zn-icon>
+      <div slot="actions">
+        <zn-button href="#">Action</zn-button>
+      </div>
+    </zn-tile>
+
+    <zn-inline-edit original caption="Something" value="1" action="#" method="GET"
+                    options="{&quot;1&quot;: &quot;Option 1&quot;,&quot;2&quot;: &quot;Option 2&quot;}">
+    </zn-inline-edit>
+
+    <zn-tile original caption="Leslie Alexander" description="Leslie.alexander@example.com" href="https://google.com">
+      <zn-icon slot="image" size="40" src="https://i.pravatar.cc/60?img=70" round></zn-icon>
+      <div slot="actions">
+        <zn-button href="#">Action</zn-button>
+      </div>
+    </zn-tile>
+
+    <div slot="filter" attribute="private" default="true" item-selector="zn-inline-edit">Toggle Inline Edit Private Messages</div>
+    <div slot="filter" attribute="original" default="true" item-selector="zn-tile">Toggle Tile Original Messages</div>
+
+  </zn-settings-container>
+</div>
+```
+
+### Second Example
+
+TODO

package/docs/pages/components/textarea.md

@@ -28,7 +28,7 @@ Add descriptive help text to a textarea with the `help-text` attribute. For help
 `help-text` slot instead.
 
 ```html:preview
-<zn-textarea label="Month in review" help-text="Tell us the highlights. Be sure to include details about any financial performance anomalies."> </zn-textarea>
+<zn-textarea transparent label="Month in review" help-text="Tell us the highlights. Be sure to include details about any financial performance anomalies."> </zn-textarea>
 <br />
 <zn-textarea label="Month in review">
   <div slot="help-text">Tell us the highlights. Be sure to include details about any financial performance <strong>anomalies</strong>.</div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",
@@ -41,6 +41,7 @@
     "watch": "node scripts/build.js --serve"
   },
   "dependencies": {
+    "@emoji-mart/data": "^1.2.1",
     "@floating-ui/dom": "^1.6.13",
     "@lit-labs/observers": "^2.0.4",
     "@lit/task": "^1.0.1",
@@ -49,6 +50,7 @@
     "apexcharts": "^4.5.0",
     "chart.js": "^4.4.8",
     "composed-offset-position": "^0.0.6",
+    "emoji-mart": "^5.6.0",
     "lit": "^2.7.6",
     "quill": "^2.0.3"
   },

package/scss/_root.scss

@@ -200,3 +200,29 @@
 .zn-success {
   color: rgb(var(--zn-color-success));
 }
+
+ul.gap{
+  li{
+    margin: 5px 0;
+  }
+}
+
+ul.circle, ul.decimal, ul.disc, ul.square {
+  padding: 5px 0 5px 15px;
+}
+
+ul.circle {
+  list-style-type: circle;
+}
+
+ul.decimal {
+  list-style-type: decimal;
+}
+
+ul.disc {
+  list-style-type: disc;
+}
+
+ul.square {
+  list-style-type: square;
+}

package/scss/boot.scss

@@ -13,17 +13,43 @@
 @use "../node_modules/air-datepicker/air-datepicker.css";
 
 .air-datepicker {
+  --adp-color: rgba(var(--zn-text), var(--zn-text-opacity));
+  --adp-nav-color-secondary: rgb(var(--zn-purple-text));
+
   --adp-day-name-color: var(--zn-color-primary-600);
   --adp-day-name-color-hover: var(--zn-color-primary-700);
   --adp-cell-background-color-selected: var(--zn-color-primary-600);
   --adp-cell-background-color-selected-hover: var(--zn-color-primary-700);
   --adp-color-current-date: var(--zn-color-primary-600);
 
+  --adp-background-color: var(--zn-input-background-color);
+  --adp-background-color-hover: var(--zn-input-background-color-hover);
+  --adp-background-color-active: var(--zn-input-background-color-hover);
   --adp-background-color-selected-other-month: var(--zn-color-primary-300);
   --adp-background-color-in-range: var(--zn-color-primary-100);
 
+  --adp-border-color: rgb(var(--zn-border-color));
+  --adp-border-color-inline: rgb(var(--zn-border-color));
+  --adp-border-color-inner: rgb(var(--zn-border-color));
+
   --adp-cell-background-color-in-range: var(--zn-color-primary-100);
   --adp-cell-background-color-in-range-hover: var(--zn-color-primary-200);
+}
+
+.air-datepicker--pointer:after {
+  background-color: var(--zn-input-background-color);
+}
+
+// Utility to minimize flashing of undefined web components
+.zn-cloak:has(:not(:defined)) {
+  animation: 2s step-end zn-cloak;
+}
 
-  z-index: 1000000; // Needs to display over modals
+@keyframes zn-cloak {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }

package/scss/mixins/index.scss

@@ -1,2 +1,31 @@
 @forward "spacing-mixins";
-@forward "helper-mixins";
+@forward "helper-mixins";
+
+
+@mixin cosmic-border() {
+  border: 1px solid transparent;
+
+  &:before {
+    content: '';
+    z-index: -1;
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    height: calc(100% + 4px);
+    width: calc(100% + 4px);
+    filter: blur(var(--zn-blur, 1px));
+    opacity: 0.9;
+    border-radius: var(--zn-border-radius-large);
+
+    background-image: conic-gradient(
+        from var(--rotate) at 50% 50%,
+        #71d9ff 0%,
+        #a100ffff 22%,
+        #71d9ff 44%,
+        #ff00ceff 74%,
+        #71d9ff 94%
+    );
+
+    animation: rotate-gradient 6s linear infinite;
+  }
+}

package/scss/shared/_base.scss

@@ -64,7 +64,7 @@ small {
 }
 
 .hidden {
-  display: none;
+  display: none !important;
 }
 
 .visibility-hidden {

package/scss/shared/_button.scss

@@ -2,7 +2,7 @@
 @use '../variables';
 
 @mixin button {
-  border-radius: 5px;
+  border-radius: var(--zn-border-radius-medium);
   display: inline-flex;
   align-items: center;
   justify-content: center;

package/scss/shared/layout.scss

@@ -275,9 +275,16 @@
   border-bottom: 1px solid rgb(var(--zn-border-color));
   background-color: rgba(var(--zn-panel), 0.9);
   padding: 3px;
+  gap: 3px;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
+  z-index: 1;
+}
+
+.zn-panel-bar--large {
+  padding: 6px;
+  gap: 6px;
 }
 
 .scroll-container {

package/scss/themes/_dark.scss

@@ -246,11 +246,11 @@
   --zn-color-neutral-1000: hsl(0, 0%, 100%);
 
   /* Elevations */
-  --zn-shadow-x-small: 0 1px 2px hsl(0 0 0  / 18%);
-  --zn-shadow-small: 0 1px 2px hsl(0 0 0  / 24%);
-  --zn-shadow-medium: 0 2px 4px hsl(0 0 0  / 24%);
-  --zn-shadow-large: 0 2px 8px hsl(0 0 0  / 24%);
-  --zn-shadow-x-large: 0 4px 16px hsl(0 0 0  / 24%);
+  --zn-shadow-x-small: 0 1px 4px rgba(0, 0, 0, 0.18);
+  --zn-shadow-small: 0 3px 9px rgba(0, 0, 0, 0.24);
+  --zn-shadow-medium: 0 6px 18px rgba(0, 0, 0, 0.24);
+  --zn-shadow-large: 0 6px 20px rgba(0, 0, 0, 0.24);
+  --zn-shadow-x-large: 0 6px 20px rgba(0, 0, 0, 0.34);
 
   /* Inputs */
   --zn-input-background-color: hsl(223, 14%, 10%);

package/scss/themes/_light.scss

@@ -323,11 +323,11 @@
   --zn-border-radius-pill: 9999px;
 
   /* Elevations */
-  --zn-shadow-x-small: 0 1px 2px hsl(240 3.8% 46.1% / 6%);
-  --zn-shadow-small: 0 1px 2px hsl(240 3.8% 46.1% / 12%);
-  --zn-shadow-medium: 0 2px 4px hsl(240 3.8% 46.1% / 12%);
-  --zn-shadow-large: 0 2px 8px hsl(240 3.8% 46.1% / 12%);
-  --zn-shadow-x-large: 0 4px 16px hsl(240 3.8% 46.1% / 12%);
+  --zn-shadow-x-small: 0 1px 4px rgba(0, 0, 0, 0.10);
+  --zn-shadow-small: 0 3px 9px rgba(0, 0, 0, 0.15);
+  --zn-shadow-medium: 0 6px 18px rgba(0, 0, 0, 0.15);
+  --zn-shadow-large: 0 6px 20px rgba(0, 0, 0, 0.15);
+  --zn-shadow-x-large: 0 6px 20px rgba(0, 0, 0, 0.25);
 
   /* Spacings */
   --zn-spacing-3x-small: 0.125rem; // 2px
@@ -537,4 +537,5 @@
   --zn-z-index-dropdown: 900;
   --zn-z-index-toast: 950;
   --zn-z-index-tooltip: 1000;
+  --zn-z-index-editor-action: 100000;
 }

package/scss/variables/index.scss

@@ -1 +1,10 @@
 @forward "spacing";
+
+@keyframes rotate-gradient {
+  from {
+    --rotate: 0deg;
+  }
+  to {
+    --rotate: 360deg;
+  }
+}

package/src/components/alert/alert.component.ts

@@ -28,7 +28,7 @@ export default class ZnAlert extends ZincElement {
   @property({type: String}) icon: string = '';
   @property({type: String}) caption: string = '';
   @property({type: Boolean}) collapse: boolean = false;
-  @property({type: String}) level: 'primary' | 'error' | 'info' | 'success' | 'warning' | 'note' = 'info';
+  @property({type: String}) level: 'primary' | 'error' | 'info' | 'success' | 'warning' | 'note' | 'cosmic' = 'info';
   @property({type: String}) size: 'small' | 'medium' | 'large' = 'medium';
 
   render() {

package/src/components/alert/alert.scss

@@ -138,17 +138,16 @@ p {
 }
 
 
-
 :host([level="note"]) .wrapper {
   h6 {
     color: var(--zn-color-gray-800);
   }
 
-  border-color:  var(--zn-color-gray-500) !important;
-  background:  var(--zn-color-gray-100);
+  border-color: var(--zn-color-gray-500) !important;
+  background: var(--zn-color-gray-100);
 
   zn-icon {
-    --icon-color: var(--zn-color-gray-800) ;
+    --icon-color: var(--zn-color-gray-800);
   }
 }
 
@@ -168,3 +167,18 @@ p {
     font-size: 110%;
   }
 }
+
+:host([level="cosmic"]) {
+  @include wc.cosmic-border();
+  position: relative;
+  z-index: 0;
+
+  &:before {
+    border-radius: 11px;
+  }
+
+  .wrapper {
+    border: none !important;
+    background: rgba(var(--zn-panel), 0.99);
+  }
+}