@sula-tech/webcomponents 0.1.1 → 0.2.1

package/dist/cjs/webcomponents.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-7973b779.js');
+const index = require('./index-87eec792.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["sula-avatar_3.cjs",[[1,"sula-avatar",{"size":[1],"imageUrl":[1,"image-url"],"text":[1],"icon":[1]}],[1,"sula-button",{"text":[1025],"icon":[1025],"appearance":[1025],"type":[1025],"size":[1025],"status":[1025],"loading":[1028],"buttonDisabled":[1028,"button-disabled"]}],[0,"sula-icon",{"icon":[1],"customClass":[1,"custom-class"]}]]]], options);
+  return index.bootstrapLazy([["sula-avatar_9.cjs",[[1,"sula-avatar",{"size":[1],"imageUrl":[1,"image-url"],"text":[1],"icon":[1]}],[1,"sula-badge",{"status":[1025],"size":[1025],"type":[1025],"text":[1025],"icon":[1025],"hasSlotContent":[32]}],[1,"sula-button",{"text":[1025],"icon":[1025],"appearance":[1025],"type":[1025],"size":[1025],"status":[1025],"loading":[1028],"buttonDisabled":[1028,"button-disabled"]}],[1,"sula-checkbox",{"type":[1025],"label":[1025],"subTitle":[1025,"sub-title"],"disabled":[1028],"checked":[1028],"isFocus":[32]}],[1,"sula-tag",{"label":[1025],"icon":[1025],"iconStatus":[1025,"icon-status"],"size":[1025],"appearance":[1025],"fontWeight":[1025,"font-weight"]}],[1,"sula-textfield",{"value":[1025],"type":[1],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"icon":[1],"inputIsOpen":[32],"textValue":[32],"showPassword":[32],"inputIsFocused":[32]},[[4,"click","handleClick"]]],[1,"sula-switch",{"type":[1025],"active":[1028],"disabled":[1028],"label":[1025],"subTitle":[1025,"sub-title"],"isFocus":[32]}],[1,"sula-textarea",{"value":[1025],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"rows":[2],"isActive":[32],"textValue":[32],"textareaIsFocused":[32],"labelAnimationClass":[32]},[[4,"click","handleClick"]]],[0,"sula-icon",{"icon":[1],"customClass":[1,"custom-class"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -1,8 +1,14 @@
 {
   "entries": [
     "components/sula-avatar/sula-avatar.js",
+    "components/sula-badge/sula-badge.js",
     "components/sula-button/sula-button.js",
-    "components/sula-icon/sula-icon.js"
+    "components/sula-checkbox/sula-checkbox.js",
+    "components/sula-icon/sula-icon.js",
+    "components/sula-switch/sula-switch.js",
+    "components/sula-tag/sula-tag.js",
+    "components/sula-textarea/sula-textarea.js",
+    "components/sula-textfield/sula-textfield.js"
   ],
   "compiler": {
     "name": "@stencil/core",

package/dist/collection/components/sula-avatar/sula-avatar.css

@@ -1 +1 @@
-*,:after,:before{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: ;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.block{display:block}:host{--color-green-50:#f1f9f4;--color-green-100:#e6f4ed;--color-green-200:#cae7d8;--color-green-300:#a0d4b8;--color-green-400:#68bb8e;--color-green-500:#04843f;--color-green-600:#037236;--color-green-700:#03632f;--color-green-800:#035428;--color-green-900:#024521;--color-green-950:#02361a;--color-red-50:#fef6f6;--color-red-100:#fde8e8;--color-red-200:#fad1d1;--color-red-300:#f7abab;--color-red-400:#f17474;--color-red-500:#c80505;--color-red-600:#b30404;--color-red-700:#9f0404;--color-red-800:#860303;--color-red-900:#6d0303;--color-red-950:#500202;--color-yellow-50:#fdf4e7;--color-yellow-100:#fcedd9;--color-yellow-200:#fae0bd;--color-yellow-300:#f6c788;--color-yellow-400:#f3b159;--color-yellow-500:#ef9928;--color-yellow-600:#e49226;--color-yellow-700:#d17e10;--color-yellow-800:#b46d0e;--color-yellow-900:#93590b;--color-yellow-950:#683f08;--color-orange-50:#fef4f1;--color-orange-100:#fde8e2;--color-orange-200:#fbd2c6;--color-orange-300:#f8b4a0;--color-orange-400:#f58e70;--color-orange-500:#f05223;--color-orange-600:#ea4210;--color-orange-700:#d23b0e;--color-orange-800:#b5330c;--color-orange-900:#942a0a;--color-orange-950:#691e07;--color-blue-50:#ecf0f9;--color-blue-100:#dde3f4;--color-blue-200:#b2c2e5;--color-blue-300:#7994d2;--color-blue-400:#4066bf;--color-blue-500:#001e64;--color-blue-600:#001c5c;--color-blue-700:#00174c;--color-blue-800:#00123d;--color-blue-900:#000f33;--color-blue-950:#000d2b;--color-ambar-50:#fff6eb;--color-ambar-100:#ffefdc;--color-ambar-200:#fedfb9;--color-ambar-300:#fdca8b;--color-ambar-400:#fdb359;--color-ambar-500:#fc9c26;--color-ambar-600:#ec8403;--color-ambar-700:#d87803;--color-ambar-800:#ba6803;--color-ambar-900:#975402;--color-ambar-950:#6a3b01;--color-gray-50:#fff;--color-gray-100:#f4f4f4;--color-gray-200:#e6e6e6;--color-gray-300:#c3c3c3;--color-gray-400:#b9b9b9;--color-gray-500:#949494;--color-gray-600:#737373;--color-gray-700:#5c5c5c;--color-gray-800:#323232;--color-gray-900:#292929;--color-gray-950:#141414;--color-white-opacity-50:#ffffff0d;--color-white-opacity-100:#ffffff1a;--color-white-opacity-200:#ffffff26;--color-white-opacity-300:#ffffff45;--color-white-opacity-400:#ffffff5c;--color-white-opacity-500:#ffffff80;--color-white-opacity-600:#ffffff8c;--color-white-opacity-700:#ffffffa3;--color-white-opacity-800:#ffffffba;--color-white-opacity-900:#fffc;--color-white-opacity-950:#ffffffe8;--color-ciano-50:#f1f6fe;--color-ciano-100:#dfeafc;--color-ciano-200:#c3d9f9;--color-ciano-300:#90b9f4;--color-ciano-400:#5d98ee;--color-ciano-500:#1769e0;--color-ciano-600:#155fcb;--color-ciano-700:#1355b4;--color-ciano-800:#104899;--color-ciano-900:#0d3b7d;--color-ciano-950:#0a2e61;--color-extra-color-blue-light:#e7f0f4;--color-extra-color-blue-dark:#162931;--color-black-opacity-50:#14141405;--color-black-opacity-100:#1414141a;--color-black-opacity-200:#14141426;--color-black-opacity-300:#14141445;--color-black-opacity-400:#1414145c;--color-black-opacity-500:#14141480;--color-black-opacity-600:#1414148c;--color-black-opacity-700:#141414a3;--color-black-opacity-800:#141414ba;--color-black-opacity-900:#141414cc;--color-black-opacity-950:#141414e8;--color-feedback-success:#04843f;--color-feedback-error:#c80505;--color-feedback-informational:#1355b4;--color-feedback-alert:#ef9928;--color-brand-primary:#f05223;--color-brand-secondary:#001c5c;--color-brand-tertiary-1:#1769e0;--color-brand-tertiary-2:#fc9c26;--color-surface-body:#fff;--color-surface-on-body:#f4f4f4;--color-surface-on-body-blue:#e7f0f4;--color-surface-on-body-brand:#fff6eb;--color-surface-on-body-feedback-success:#e6f4ed;--color-surface-on-body-feedback-error:#fde8e8;--color-surface-on-body-feedback-alert:#fdf4e7;--color-surface-on-body-feedback-info:#dfeafc;--color-text-brand:#f05223;--color-text-primary:#323232;--color-text-secondary:#5c5c5c;--color-text-disabled:#949494;--color-text-link:#1355b4;--color-states-empty-bg-hover:#1414141a;--color-states-empty-bg-pressed:#14141426;--color-states-bg-disabled:#14141405;--color-states-bg-focus:#1355b4;--color-states-primary-hover:#ea4210;--color-states-primary-pressed:#d23b0e;--color-states-danger-hover:#b30404;--color-states-danger-pressed:#9f0404;--color-states-negative-hover:#e6e6e6;--color-states-negative-pressed:#c3c3c3;--color-icon-primary:#5c5c5c;--color-icon-secondary:#fff;--color-icon-disabled:#b9b9b9;--color-neutral-neutral-1:#fff;--color-neutral-neutral-2:#f4f4f4;--color-neutral-neutral-3:#b9b9b9;--color-neutral-neutral-4:#949494;--color-neutral-neutral-5:#737373;--color-neutral-neutral-6:#5c5c5c;--color-neutral-neutral-7:#323232;--color-neutral-neutral-8:#292929;--color-negative-negative-1:#fff;--color-negative-negative-2:#323232;--color-opacity-body:#fffc;--color-opacity-on-body:#14141405;--color-opacity-overlay:#1414148c;--color-opacity-on-overlay:#ffffff1a;--color-line-input:#949494;--color-line-general-strong:#c3c3c3;--color-line-general:#e6e6e6;display:block}:root{--color-green-50:#f1f9f4;--color-green-100:#e6f4ed;--color-green-200:#cae7d8;--color-green-300:#a0d4b8;--color-green-400:#68bb8e;--color-green-500:#04843f;--color-green-600:#037236;--color-green-700:#03632f;--color-green-800:#035428;--color-green-900:#024521;--color-green-950:#02361a;--color-red-50:#fef6f6;--color-red-100:#fde8e8;--color-red-200:#fad1d1;--color-red-300:#f7abab;--color-red-400:#f17474;--color-red-500:#c80505;--color-red-600:#b30404;--color-red-700:#9f0404;--color-red-800:#860303;--color-red-900:#6d0303;--color-red-950:#500202;--color-yellow-50:#fdf4e7;--color-yellow-100:#fcedd9;--color-yellow-200:#fae0bd;--color-yellow-300:#f6c788;--color-yellow-400:#f3b159;--color-yellow-500:#ef9928;--color-yellow-600:#e49226;--color-yellow-700:#d17e10;--color-yellow-800:#b46d0e;--color-yellow-900:#93590b;--color-yellow-950:#683f08;--color-orange-50:#fef4f1;--color-orange-100:#fde8e2;--color-orange-200:#fbd2c6;--color-orange-300:#f8b4a0;--color-orange-400:#f58e70;--color-orange-500:#f05223;--color-orange-600:#ea4210;--color-orange-700:#d23b0e;--color-orange-800:#b5330c;--color-orange-900:#942a0a;--color-orange-950:#691e07;--color-blue-50:#ecf0f9;--color-blue-100:#dde3f4;--color-blue-200:#b2c2e5;--color-blue-300:#7994d2;--color-blue-400:#4066bf;--color-blue-500:#001e64;--color-blue-600:#001c5c;--color-blue-700:#00174c;--color-blue-800:#00123d;--color-blue-900:#000f33;--color-blue-950:#000d2b;--color-ambar-50:#fff6eb;--color-ambar-100:#ffefdc;--color-ambar-200:#fedfb9;--color-ambar-300:#fdca8b;--color-ambar-400:#fdb359;--color-ambar-500:#fc9c26;--color-ambar-600:#ec8403;--color-ambar-700:#d87803;--color-ambar-800:#ba6803;--color-ambar-900:#975402;--color-ambar-950:#6a3b01;--color-gray-50:#fff;--color-gray-100:#f4f4f4;--color-gray-200:#e6e6e6;--color-gray-300:#c3c3c3;--color-gray-400:#b9b9b9;--color-gray-500:#949494;--color-gray-600:#737373;--color-gray-700:#5c5c5c;--color-gray-800:#323232;--color-gray-900:#292929;--color-gray-950:#141414;--color-white-opacity-50:#ffffff0d;--color-white-opacity-100:#ffffff1a;--color-white-opacity-200:#ffffff26;--color-white-opacity-300:#ffffff45;--color-white-opacity-400:#ffffff5c;--color-white-opacity-500:#ffffff80;--color-white-opacity-600:#ffffff8c;--color-white-opacity-700:#ffffffa3;--color-white-opacity-800:#ffffffba;--color-white-opacity-900:#fffc;--color-white-opacity-950:#ffffffe8;--color-ciano-50:#f1f6fe;--color-ciano-100:#dfeafc;--color-ciano-200:#c3d9f9;--color-ciano-300:#90b9f4;--color-ciano-400:#5d98ee;--color-ciano-500:#1769e0;--color-ciano-600:#155fcb;--color-ciano-700:#1355b4;--color-ciano-800:#104899;--color-ciano-900:#0d3b7d;--color-ciano-950:#0a2e61;--color-extra-color-blue-light:#e7f0f4;--color-extra-color-blue-dark:#162931;--color-black-opacity-50:#14141405;--color-black-opacity-100:#1414141a;--color-black-opacity-200:#14141426;--color-black-opacity-300:#14141445;--color-black-opacity-400:#1414145c;--color-black-opacity-500:#14141480;--color-black-opacity-600:#1414148c;--color-black-opacity-700:#141414a3;--color-black-opacity-800:#141414ba;--color-black-opacity-900:#141414cc;--color-black-opacity-950:#141414e8;--color-feedback-success:#04843f;--color-feedback-error:#c80505;--color-feedback-informational:#1355b4;--color-feedback-alert:#ef9928;--color-brand-primary:#f05223;--color-brand-secondary:#001c5c;--color-brand-tertiary-1:#1769e0;--color-brand-tertiary-2:#fc9c26;--color-surface-body:#fff;--color-surface-on-body:#f4f4f4;--color-surface-on-body-blue:#e7f0f4;--color-surface-on-body-brand:#fff6eb;--color-surface-on-body-feedback-success:#e6f4ed;--color-surface-on-body-feedback-error:#fde8e8;--color-surface-on-body-feedback-alert:#fdf4e7;--color-surface-on-body-feedback-info:#dfeafc;--color-text-brand:#f05223;--color-text-primary:#323232;--color-text-secondary:#5c5c5c;--color-text-disabled:#949494;--color-text-link:#1355b4;--color-states-empty-bg-hover:#1414141a;--color-states-empty-bg-pressed:#14141426;--color-states-bg-disabled:#14141405;--color-states-bg-focus:#1355b4;--color-states-primary-hover:#ea4210;--color-states-primary-pressed:#d23b0e;--color-states-danger-hover:#b30404;--color-states-danger-pressed:#9f0404;--color-states-negative-hover:#e6e6e6;--color-states-negative-pressed:#c3c3c3;--color-icon-primary:#5c5c5c;--color-icon-secondary:#fff;--color-icon-disabled:#b9b9b9;--color-neutral-neutral-1:#fff;--color-neutral-neutral-2:#f4f4f4;--color-neutral-neutral-3:#b9b9b9;--color-neutral-neutral-4:#949494;--color-neutral-neutral-5:#737373;--color-neutral-neutral-6:#5c5c5c;--color-neutral-neutral-7:#323232;--color-neutral-neutral-8:#292929;--color-negative-negative-1:#fff;--color-negative-negative-2:#323232;--color-opacity-body:#fffc;--color-opacity-on-body:#14141405;--color-opacity-overlay:#1414148c;--color-opacity-on-overlay:#ffffff1a;--color-line-input:#949494;--color-line-general-strong:#c3c3c3;--color-line-general:#e6e6e6}.static{position:static}.flex{display:flex}.h-\[240px\]{height:240px}.h-\[44px\]{height:44px}.h-\[56px\]{height:56px}.h-\[96px\]{height:96px}.w-\[240px\]{width:240px}.w-\[44px\]{width:44px}.w-\[56px\]{width:56px}.w-\[96px\]{width:96px}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-full{border-radius:9999px}.rounded-xxl{border-radius:18.75rem}.bg-surface-on-body{background-color:var(--color-surface-on-body)}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-5xl{font-size:3rem;line-height:1}.font-bold{font-weight:700}.text-text-primary{color:var(--color-text-primary)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}
+*,:after,:before{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: ;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.block{display:block}:host{display:block}:root{--color-green-50:#f1f9f4;--color-green-100:#e6f4ed;--color-green-200:#cae7d8;--color-green-300:#a0d4b8;--color-green-400:#68bb8e;--color-green-500:#04843f;--color-green-600:#037236;--color-green-700:#03632f;--color-green-800:#035428;--color-green-900:#024521;--color-green-950:#02361a;--color-red-50:#fef6f6;--color-red-100:#fde8e8;--color-red-200:#fad1d1;--color-red-300:#f7abab;--color-red-400:#f17474;--color-red-500:#c80505;--color-red-600:#b30404;--color-red-700:#9f0404;--color-red-800:#860303;--color-red-900:#6d0303;--color-red-950:#500202;--color-yellow-50:#fdf4e7;--color-yellow-100:#fcedd9;--color-yellow-200:#fae0bd;--color-yellow-300:#f6c788;--color-yellow-400:#f3b159;--color-yellow-500:#ef9928;--color-yellow-600:#e49226;--color-yellow-700:#d17e10;--color-yellow-800:#b46d0e;--color-yellow-900:#93590b;--color-yellow-950:#683f08;--color-orange-50:#fef4f1;--color-orange-100:#fde8e2;--color-orange-200:#fbd2c6;--color-orange-300:#f8b4a0;--color-orange-400:#f58e70;--color-orange-500:#f05223;--color-orange-600:#ea4210;--color-orange-700:#d23b0e;--color-orange-800:#b5330c;--color-orange-900:#942a0a;--color-orange-950:#691e07;--color-blue-50:#ecf0f9;--color-blue-100:#dde3f4;--color-blue-200:#b2c2e5;--color-blue-300:#7994d2;--color-blue-400:#4066bf;--color-blue-500:#001e64;--color-blue-600:#001c5c;--color-blue-700:#00174c;--color-blue-800:#00123d;--color-blue-900:#000f33;--color-blue-950:#000d2b;--color-ambar-50:#fff6eb;--color-ambar-100:#ffefdc;--color-ambar-200:#fedfb9;--color-ambar-300:#fdca8b;--color-ambar-400:#fdb359;--color-ambar-500:#fc9c26;--color-ambar-600:#ec8403;--color-ambar-700:#d87803;--color-ambar-800:#ba6803;--color-ambar-900:#975402;--color-ambar-950:#6a3b01;--color-gray-50:#fff;--color-gray-100:#f4f4f4;--color-gray-200:#e6e6e6;--color-gray-300:#c3c3c3;--color-gray-400:#b9b9b9;--color-gray-500:#949494;--color-gray-600:#737373;--color-gray-700:#5c5c5c;--color-gray-800:#323232;--color-gray-900:#292929;--color-gray-950:#141414;--color-white-opacity-50:#ffffff0d;--color-white-opacity-100:#ffffff1a;--color-white-opacity-200:#ffffff26;--color-white-opacity-300:#ffffff45;--color-white-opacity-400:#ffffff5c;--color-white-opacity-500:#ffffff80;--color-white-opacity-600:#ffffff8c;--color-white-opacity-700:#ffffffa3;--color-white-opacity-800:#ffffffba;--color-white-opacity-900:#fffc;--color-white-opacity-950:#ffffffe8;--color-ciano-50:#f1f6fe;--color-ciano-100:#dfeafc;--color-ciano-200:#c3d9f9;--color-ciano-300:#90b9f4;--color-ciano-400:#5d98ee;--color-ciano-500:#1769e0;--color-ciano-600:#155fcb;--color-ciano-700:#1355b4;--color-ciano-800:#104899;--color-ciano-900:#0d3b7d;--color-ciano-950:#0a2e61;--color-extra-color-blue-light:#e7f0f4;--color-extra-color-blue-dark:#162931;--color-black-opacity-50:#14141405;--color-black-opacity-100:#1414141a;--color-black-opacity-200:#14141426;--color-black-opacity-300:#14141445;--color-black-opacity-400:#1414145c;--color-black-opacity-500:#14141480;--color-black-opacity-600:#1414148c;--color-black-opacity-700:#141414a3;--color-black-opacity-800:#141414ba;--color-black-opacity-900:#141414cc;--color-black-opacity-950:#141414e8;--color-feedback-success:#04843f;--color-feedback-error:#c80505;--color-feedback-informational:#1355b4;--color-feedback-alert:#ef9928;--color-brand-primary:#f05223;--color-brand-secondary:#001c5c;--color-brand-tertiary-1:#1769e0;--color-brand-tertiary-2:#fc9c26;--color-surface-body:#fff;--color-surface-on-body:#f4f4f4;--color-surface-on-body-blue:#e7f0f4;--color-surface-on-body-brand:#fff6eb;--color-surface-on-body-feedback-success:#e6f4ed;--color-surface-on-body-feedback-error:#fde8e8;--color-surface-on-body-feedback-alert:#fdf4e7;--color-surface-on-body-feedback-info:#dfeafc;--color-text-brand:#f05223;--color-text-primary:#323232;--color-text-secondary:#5c5c5c;--color-text-disabled:#949494;--color-text-link:#1355b4;--color-states-empty-bg-hover:#1414141a;--color-states-empty-bg-pressed:#14141426;--color-states-bg-disabled:#14141405;--color-states-bg-focus:#1355b4;--color-states-primary-hover:#ea4210;--color-states-primary-pressed:#d23b0e;--color-states-danger-hover:#b30404;--color-states-danger-pressed:#9f0404;--color-states-negative-hover:#e6e6e6;--color-states-negative-pressed:#c3c3c3;--color-icon-primary:#5c5c5c;--color-icon-secondary:#fff;--color-icon-disabled:#b9b9b9;--color-neutral-neutral-1:#fff;--color-neutral-neutral-2:#f4f4f4;--color-neutral-neutral-3:#b9b9b9;--color-neutral-neutral-4:#949494;--color-neutral-neutral-5:#737373;--color-neutral-neutral-6:#5c5c5c;--color-neutral-neutral-7:#323232;--color-neutral-neutral-8:#292929;--color-negative-negative-1:#fff;--color-negative-negative-2:#323232;--color-opacity-body:#fffc;--color-opacity-on-body:#14141405;--color-opacity-overlay:#1414148c;--color-opacity-on-overlay:#ffffff1a;--color-line-input:#949494;--color-line-general-strong:#c3c3c3;--color-line-general:#e6e6e6}.static{position:static}.flex{display:flex}.h-\[240px\]{height:240px}.h-\[44px\]{height:44px}.h-\[56px\]{height:56px}.h-\[96px\]{height:96px}.w-\[240px\]{width:240px}.w-\[44px\]{width:44px}.w-\[56px\]{width:56px}.w-\[96px\]{width:96px}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-full{border-radius:9999px}.rounded-xxl{border-radius:18.75rem}.bg-surface-on-body{background-color:var(--color-surface-on-body)}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-5xl{font-size:3rem;line-height:1}.font-bold{font-weight:700}.text-text-primary{color:var(--color-text-primary)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}

package/dist/collection/components/sula-avatar/sula-avatar.stories.js

@@ -1,15 +1,6 @@
 import { SulaAvatarSize } from "./model/sula-avatar.model";
 export default {
     title: 'Components/sula-avatar',
-    decorators: [
-        SulaAvatar => {
-            return `
-          <div>
-            ${SulaAvatar()}
-          </div>
-        `;
-        },
-    ],
     tags: ['autodocs'],
     argTypes: {
         size: {
@@ -47,14 +38,20 @@ export default {
         },
     },
 };
-const Template = args => `
-  <sula-avatar 
-    size="${args.size}" 
-    image-url="${args.imageUrl}" 
-    text="${args.text}" 
-    icon="${args.icon}"
-  ></sula-avatar>
-`;
+const Template = args => {
+    const container = document.createElement('div');
+    container.style.margin = '20px';
+    const el = document.createElement('sula-avatar');
+    el.setAttribute('size', args.size);
+    if (args.imageUrl)
+        el.setAttribute('image-url', args.imageUrl);
+    if (args.text)
+        el.setAttribute('text', args.text);
+    if (args.icon)
+        el.setAttribute('icon', args.icon);
+    container.appendChild(el);
+    return container;
+};
 export const Default = Template.bind({});
 Default.args = {
     size: SulaAvatarSize.Medium,

package/dist/collection/components/sula-avatar/sula-avatar.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"sula-avatar.stories.js","sourceRoot":"","sources":["../../../src/components/sula-avatar/sula-avatar.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { SulaAvatarSize } from './model/sula-avatar.model';\n\nexport default {\n  title: 'Components/sula-avatar',\n  decorators: [\n    SulaAvatar => {\n      return `\n          <div>\n            ${SulaAvatar()}\n          </div>\n        `;\n    },\n  ],\n  tags: ['autodocs'],\n  argTypes: {\n    size: {\n      control: { type: 'select' },\n      options: Object.values(SulaAvatarSize),\n      defaultValue: SulaAvatarSize.Medium,\n      description: 'Avatar size',\n      type: {\n        required: false,\n      },\n    },\n    imageUrl: {\n      control: 'text',\n      defaultValue: '',\n      description: 'URL of the avatar image',\n      type: {\n        required: false,\n      },\n    },\n    text: {\n      control: 'text',\n      defaultValue: 'AB',\n      description: 'Text to display when image is not available',\n      type: {\n        required: false,\n      },\n    },\n    icon: {\n      control: 'text',\n      defaultValue: 'ph ph-user',\n      description: 'Icon to display when image is not set',\n      type: {\n        required: false,\n      },\n    },\n  },\n};\n\nconst Template = args => `\n  <sula-avatar \n    size=\"${args.size}\" \n    image-url=\"${args.imageUrl}\" \n    text=\"${args.text}\" \n    icon=\"${args.icon}\"\n  ></sula-avatar>\n`;\n\nexport const Default = Template.bind({});\nDefault.args = {\n  size: SulaAvatarSize.Medium,\n  imageUrl: '',\n  text: 'AB',\n  icon: '',\n};\n\nexport const WithImage = Template.bind({});\nWithImage.args = {\n  size: SulaAvatarSize.Medium,\n  imageUrl: 'https://i.pravatar.cc/300',\n  text: 'Avatar Alt Text',\n  icon: '',\n};\n\nexport const WithIcon = Template.bind({});\nWithIcon.args = {\n  size: SulaAvatarSize.Medium,\n  imageUrl: '',\n  text: '',\n  icon: 'ph ph-user',\n};\n\nexport const SmallSize = Template.bind({});\nSmallSize.args = {\n  size: SulaAvatarSize.Small,\n  imageUrl: '',\n  text: 'SM',\n  icon: '',\n};\n\nexport const LargeSize = Template.bind({});\nLargeSize.args = {\n  size: SulaAvatarSize.Large,\n  imageUrl: '',\n  text: 'LG',\n  icon: '',\n};\n\nexport const DisplaySize = Template.bind({});\nDisplaySize.args = {\n  size: SulaAvatarSize.Display,\n  imageUrl: '',\n  text: 'XL',\n  icon: '',\n};\n\nexport const SmallWithImage = Template.bind({});\nSmallWithImage.args = {\n  size: SulaAvatarSize.Small,\n  imageUrl: 'https://i.pravatar.cc/300',\n  text: 'Small Avatar',\n  icon: '',\n};\n\nexport const LargeWithImage = Template.bind({});\nLargeWithImage.args = {\n  size: SulaAvatarSize.Large,\n  imageUrl: 'https://i.pravatar.cc/300',\n  text: 'Large Avatar',\n  icon: '',\n};\n\nexport const DisplayWithImage = Template.bind({});\nDisplayWithImage.args = {\n  size: SulaAvatarSize.Display,\n  imageUrl: 'https://i.pravatar.cc/300',\n  text: 'Display Avatar',\n  icon: '',\n};\n\nexport const SmallWithIcon = Template.bind({});\nSmallWithIcon.args = {\n  size: SulaAvatarSize.Small,\n  imageUrl: '',\n  text: '',\n  icon: 'ph ph-user',\n};\n\nexport const LargeWithIcon = Template.bind({});\nLargeWithIcon.args = {\n  size: SulaAvatarSize.Large,\n  imageUrl: '',\n  text: '',\n  icon: 'ph ph-user',\n};\n\nexport const DisplayWithIcon = Template.bind({});\nDisplayWithIcon.args = {\n  size: SulaAvatarSize.Display,\n  imageUrl: '',\n  text: '',\n  icon: 'ph ph-user',\n};\n\nexport const WithPriority = Template.bind({});\nWithPriority.args = {\n  size: SulaAvatarSize.Medium,\n  imageUrl: 'https://i.pravatar.cc/300',\n  text: 'This text will not show',\n  icon: 'ph ph-user',\n};\n\nexport const WithIconPriority = Template.bind({});\nWithIconPriority.args = {\n  size: SulaAvatarSize.Medium,\n  imageUrl: '',\n  text: 'This text will not show',\n  icon: 'ph ph-user',\n};\n"]}
+{"version":3,"file":"sula-avatar.stories.js","sourceRoot":"","sources":["../../../src/components/sula-avatar/sula-avatar.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { SulaAvatarSize } from './model/sula-avatar.model';\n\nexport default {\n  title: 'Components/sula-avatar',\n  tags: ['autodocs'],\n  argTypes: {\n    size: {\n      control: { type: 'select' },\n      options: Object.values(SulaAvatarSize),\n      defaultValue: SulaAvatarSize.Medium,\n      description: 'Avatar size',\n      type: {\n        required: false,\n      },\n    },\n    imageUrl: {\n      control: 'text',\n      defaultValue: '',\n      description: 'URL of the avatar image',\n      type: {\n        required: false,\n      },\n    },\n    text: {\n      control: 'text',\n      defaultValue: 'AB',\n      description: 'Text to display when image is not available',\n      type: {\n        required: false,\n      },\n    },\n    icon: {\n      control: 'text',\n      defaultValue: 'ph ph-user',\n      description: 'Icon to display when image is not set',\n      type: {\n        required: false,\n      },\n    },\n  },\n};\n\nconst Template = args => {\n  const container = document.createElement('div');\n  container.style.margin = '20px';\n\n  const el = document.createElement('sula-avatar');\n\n  el.setAttribute('size', args.size);\n  if (args.imageUrl) el.setAttribute('image-url', args.imageUrl);\n  if (args.text) el.setAttribute('text', args.text);\n  if (args.icon) el.setAttribute('icon', args.icon);\n\n  container.appendChild(el);\n\n  return container;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  size: SulaAvatarSize.Medium,\n  imageUrl: '',\n  text: 'AB',\n  icon: '',\n};\n\nexport const WithImage = Template.bind({});\nWithImage.args = {\n  size: SulaAvatarSize.Medium,\n  imageUrl: 'https://i.pravatar.cc/300',\n  text: 'Avatar Alt Text',\n  icon: '',\n};\n\nexport const WithIcon = Template.bind({});\nWithIcon.args = {\n  size: SulaAvatarSize.Medium,\n  imageUrl: '',\n  text: '',\n  icon: 'ph ph-user',\n};\n\nexport const SmallSize = Template.bind({});\nSmallSize.args = {\n  size: SulaAvatarSize.Small,\n  imageUrl: '',\n  text: 'SM',\n  icon: '',\n};\n\nexport const LargeSize = Template.bind({});\nLargeSize.args = {\n  size: SulaAvatarSize.Large,\n  imageUrl: '',\n  text: 'LG',\n  icon: '',\n};\n\nexport const DisplaySize = Template.bind({});\nDisplaySize.args = {\n  size: SulaAvatarSize.Display,\n  imageUrl: '',\n  text: 'XL',\n  icon: '',\n};\n\nexport const SmallWithImage = Template.bind({});\nSmallWithImage.args = {\n  size: SulaAvatarSize.Small,\n  imageUrl: 'https://i.pravatar.cc/300',\n  text: 'Small Avatar',\n  icon: '',\n};\n\nexport const LargeWithImage = Template.bind({});\nLargeWithImage.args = {\n  size: SulaAvatarSize.Large,\n  imageUrl: 'https://i.pravatar.cc/300',\n  text: 'Large Avatar',\n  icon: '',\n};\n\nexport const DisplayWithImage = Template.bind({});\nDisplayWithImage.args = {\n  size: SulaAvatarSize.Display,\n  imageUrl: 'https://i.pravatar.cc/300',\n  text: 'Display Avatar',\n  icon: '',\n};\n\nexport const SmallWithIcon = Template.bind({});\nSmallWithIcon.args = {\n  size: SulaAvatarSize.Small,\n  imageUrl: '',\n  text: '',\n  icon: 'ph ph-user',\n};\n\nexport const LargeWithIcon = Template.bind({});\nLargeWithIcon.args = {\n  size: SulaAvatarSize.Large,\n  imageUrl: '',\n  text: '',\n  icon: 'ph ph-user',\n};\n\nexport const DisplayWithIcon = Template.bind({});\nDisplayWithIcon.args = {\n  size: SulaAvatarSize.Display,\n  imageUrl: '',\n  text: '',\n  icon: 'ph ph-user',\n};\n\nexport const WithPriority = Template.bind({});\nWithPriority.args = {\n  size: SulaAvatarSize.Medium,\n  imageUrl: 'https://i.pravatar.cc/300',\n  text: 'This text will not show',\n  icon: 'ph ph-user',\n};\n\nexport const WithIconPriority = Template.bind({});\nWithIconPriority.args = {\n  size: SulaAvatarSize.Medium,\n  imageUrl: '',\n  text: 'This text will not show',\n  icon: 'ph ph-user',\n};\n"]}

package/dist/collection/components/sula-badge/model/sula-badge.model.js

@@ -0,0 +1,23 @@
+export var SulaBadgeStatus;
+(function (SulaBadgeStatus) {
+    SulaBadgeStatus["Default"] = "default";
+    SulaBadgeStatus["Money"] = "money";
+    SulaBadgeStatus["Info"] = "info";
+    SulaBadgeStatus["Error"] = "error";
+    SulaBadgeStatus["Success"] = "success";
+    SulaBadgeStatus["Warning"] = "warning";
+})(SulaBadgeStatus || (SulaBadgeStatus = {}));
+export var SulaBadgeSize;
+(function (SulaBadgeSize) {
+    SulaBadgeSize["Small"] = "small";
+    SulaBadgeSize["Medium"] = "medium";
+    SulaBadgeSize["Large"] = "large";
+    SulaBadgeSize["Display"] = "display";
+})(SulaBadgeSize || (SulaBadgeSize = {}));
+export var SulaBadgeType;
+(function (SulaBadgeType) {
+    SulaBadgeType["Text"] = "text";
+    SulaBadgeType["Icon"] = "icon";
+    SulaBadgeType["Dot"] = "dot";
+})(SulaBadgeType || (SulaBadgeType = {}));
+//# sourceMappingURL=sula-badge.model.js.map

package/dist/collection/components/sula-badge/model/sula-badge.model.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sula-badge.model.js","sourceRoot":"","sources":["../../../../src/components/sula-badge/model/sula-badge.model.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,eAOX;AAPD,WAAY,eAAe;IACzB,sCAAmB,CAAA;IACnB,kCAAe,CAAA;IACf,gCAAa,CAAA;IACb,kCAAe,CAAA;IACf,sCAAmB,CAAA;IACnB,sCAAmB,CAAA;AACrB,CAAC,EAPW,eAAe,KAAf,eAAe,QAO1B;AAED,MAAM,CAAN,IAAY,aAKX;AALD,WAAY,aAAa;IACvB,gCAAe,CAAA;IACf,kCAAiB,CAAA;IACjB,gCAAe,CAAA;IACf,oCAAmB,CAAA;AACrB,CAAC,EALW,aAAa,KAAb,aAAa,QAKxB;AAED,MAAM,CAAN,IAAY,aAIX;AAJD,WAAY,aAAa;IACvB,8BAAa,CAAA;IACb,8BAAa,CAAA;IACb,4BAAW,CAAA;AACb,CAAC,EAJW,aAAa,KAAb,aAAa,QAIxB","sourcesContent":["export enum SulaBadgeStatus {\n  Default = 'default',\n  Money = 'money',\n  Info = 'info',\n  Error = 'error',\n  Success = 'success',\n  Warning = 'warning',\n}\n\nexport enum SulaBadgeSize {\n  Small = 'small',\n  Medium = 'medium',\n  Large = 'large',\n  Display = 'display',\n} \n\nexport enum SulaBadgeType {\n  Text = 'text',\n  Icon = 'icon',\n  Dot = 'dot',\n}\n  "]}

package/dist/collection/components/sula-badge/sula-badge.css

@@ -0,0 +1 @@
+*,:after,:before{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: ;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.block{display:block}:host{display:block}:root{--color-green-50:#f1f9f4;--color-green-100:#e6f4ed;--color-green-200:#cae7d8;--color-green-300:#a0d4b8;--color-green-400:#68bb8e;--color-green-500:#04843f;--color-green-600:#037236;--color-green-700:#03632f;--color-green-800:#035428;--color-green-900:#024521;--color-green-950:#02361a;--color-red-50:#fef6f6;--color-red-100:#fde8e8;--color-red-200:#fad1d1;--color-red-300:#f7abab;--color-red-400:#f17474;--color-red-500:#c80505;--color-red-600:#b30404;--color-red-700:#9f0404;--color-red-800:#860303;--color-red-900:#6d0303;--color-red-950:#500202;--color-yellow-50:#fdf4e7;--color-yellow-100:#fcedd9;--color-yellow-200:#fae0bd;--color-yellow-300:#f6c788;--color-yellow-400:#f3b159;--color-yellow-500:#ef9928;--color-yellow-600:#e49226;--color-yellow-700:#d17e10;--color-yellow-800:#b46d0e;--color-yellow-900:#93590b;--color-yellow-950:#683f08;--color-orange-50:#fef4f1;--color-orange-100:#fde8e2;--color-orange-200:#fbd2c6;--color-orange-300:#f8b4a0;--color-orange-400:#f58e70;--color-orange-500:#f05223;--color-orange-600:#ea4210;--color-orange-700:#d23b0e;--color-orange-800:#b5330c;--color-orange-900:#942a0a;--color-orange-950:#691e07;--color-blue-50:#ecf0f9;--color-blue-100:#dde3f4;--color-blue-200:#b2c2e5;--color-blue-300:#7994d2;--color-blue-400:#4066bf;--color-blue-500:#001e64;--color-blue-600:#001c5c;--color-blue-700:#00174c;--color-blue-800:#00123d;--color-blue-900:#000f33;--color-blue-950:#000d2b;--color-ambar-50:#fff6eb;--color-ambar-100:#ffefdc;--color-ambar-200:#fedfb9;--color-ambar-300:#fdca8b;--color-ambar-400:#fdb359;--color-ambar-500:#fc9c26;--color-ambar-600:#ec8403;--color-ambar-700:#d87803;--color-ambar-800:#ba6803;--color-ambar-900:#975402;--color-ambar-950:#6a3b01;--color-gray-50:#fff;--color-gray-100:#f4f4f4;--color-gray-200:#e6e6e6;--color-gray-300:#c3c3c3;--color-gray-400:#b9b9b9;--color-gray-500:#949494;--color-gray-600:#737373;--color-gray-700:#5c5c5c;--color-gray-800:#323232;--color-gray-900:#292929;--color-gray-950:#141414;--color-white-opacity-50:#ffffff0d;--color-white-opacity-100:#ffffff1a;--color-white-opacity-200:#ffffff26;--color-white-opacity-300:#ffffff45;--color-white-opacity-400:#ffffff5c;--color-white-opacity-500:#ffffff80;--color-white-opacity-600:#ffffff8c;--color-white-opacity-700:#ffffffa3;--color-white-opacity-800:#ffffffba;--color-white-opacity-900:#fffc;--color-white-opacity-950:#ffffffe8;--color-ciano-50:#f1f6fe;--color-ciano-100:#dfeafc;--color-ciano-200:#c3d9f9;--color-ciano-300:#90b9f4;--color-ciano-400:#5d98ee;--color-ciano-500:#1769e0;--color-ciano-600:#155fcb;--color-ciano-700:#1355b4;--color-ciano-800:#104899;--color-ciano-900:#0d3b7d;--color-ciano-950:#0a2e61;--color-extra-color-blue-light:#e7f0f4;--color-extra-color-blue-dark:#162931;--color-black-opacity-50:#14141405;--color-black-opacity-100:#1414141a;--color-black-opacity-200:#14141426;--color-black-opacity-300:#14141445;--color-black-opacity-400:#1414145c;--color-black-opacity-500:#14141480;--color-black-opacity-600:#1414148c;--color-black-opacity-700:#141414a3;--color-black-opacity-800:#141414ba;--color-black-opacity-900:#141414cc;--color-black-opacity-950:#141414e8;--color-feedback-success:#04843f;--color-feedback-error:#c80505;--color-feedback-informational:#1355b4;--color-feedback-alert:#ef9928;--color-brand-primary:#f05223;--color-brand-secondary:#001c5c;--color-brand-tertiary-1:#1769e0;--color-brand-tertiary-2:#fc9c26;--color-surface-body:#fff;--color-surface-on-body:#f4f4f4;--color-surface-on-body-blue:#e7f0f4;--color-surface-on-body-brand:#fff6eb;--color-surface-on-body-feedback-success:#e6f4ed;--color-surface-on-body-feedback-error:#fde8e8;--color-surface-on-body-feedback-alert:#fdf4e7;--color-surface-on-body-feedback-info:#dfeafc;--color-text-brand:#f05223;--color-text-primary:#323232;--color-text-secondary:#5c5c5c;--color-text-disabled:#949494;--color-text-link:#1355b4;--color-states-empty-bg-hover:#1414141a;--color-states-empty-bg-pressed:#14141426;--color-states-bg-disabled:#14141405;--color-states-bg-focus:#1355b4;--color-states-primary-hover:#ea4210;--color-states-primary-pressed:#d23b0e;--color-states-danger-hover:#b30404;--color-states-danger-pressed:#9f0404;--color-states-negative-hover:#e6e6e6;--color-states-negative-pressed:#c3c3c3;--color-icon-primary:#5c5c5c;--color-icon-secondary:#fff;--color-icon-disabled:#b9b9b9;--color-neutral-neutral-1:#fff;--color-neutral-neutral-2:#f4f4f4;--color-neutral-neutral-3:#b9b9b9;--color-neutral-neutral-4:#949494;--color-neutral-neutral-5:#737373;--color-neutral-neutral-6:#5c5c5c;--color-neutral-neutral-7:#323232;--color-neutral-neutral-8:#292929;--color-negative-negative-1:#fff;--color-negative-negative-2:#323232;--color-opacity-body:#fffc;--color-opacity-on-body:#14141405;--color-opacity-overlay:#1414148c;--color-opacity-on-overlay:#ffffff1a;--color-line-input:#949494;--color-line-general-strong:#c3c3c3;--color-line-general:#e6e6e6}.static{position:static}.absolute{position:absolute}.relative{position:relative}.bottom-\[-8px\]{bottom:-8px}.right-0{right:0}.top-0{top:0}.flex{display:flex}.h-12{height:.75rem}.h-\[20px\]{height:20px}.h-\[24px\]{height:24px}.h-\[32px\]{height:32px}.w-fit{width:fit-content}.w-full{width:100%}.min-w-12{min-width:.75rem}.min-w-\[20px\]{min-width:20px}.min-w-\[24px\]{min-width:24px}.min-w-\[32px\]{min-width:32px}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-full{border-radius:9999px}.bg-brand-primary{background-color:var(--color-brand-primary)}.bg-feedback-alert{background-color:var(--color-feedback-alert)}.bg-feedback-error{background-color:var(--color-feedback-error)}.bg-feedback-informational{background-color:var(--color-feedback-informational)}.bg-feedback-success{background-color:var(--color-feedback-success)}.p-0{padding:0}.p-4{padding:.25rem}.px-8{padding-left:.5rem;padding-right:.5rem}.py-2{padding-bottom:.125rem;padding-top:.125rem}.text-base{font-size:1rem;line-height:1.5rem}.font-bold{font-weight:700}.leading-4{line-height:1rem}.text-negative-negative-1{color:var(--color-negative-negative-1)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}

package/dist/collection/components/sula-badge/sula-badge.js

@@ -0,0 +1,230 @@
+import { Host, h } from "@stencil/core";
+import { SulaBadgeSize, SulaBadgeStatus, SulaBadgeType } from "./model/sula-badge.model";
+export class SulaBadge {
+    constructor() {
+        /**
+         * Badge status
+         */
+        this.status = SulaBadgeStatus.Default;
+        /**
+         * Badge size
+         */
+        this.size = SulaBadgeSize.Medium;
+        /**
+         * Badge type
+         */
+        this.type = SulaBadgeType.Text;
+        /**
+         * Badge text
+         */
+        this.text = '';
+        /**
+         * Badge icon
+         */
+        this.icon = '';
+        this.hasSlotContent = false;
+    }
+    componentDidLoad() {
+        this.checkSlotContent();
+    }
+    checkSlotContent() {
+        if (this.slotRef) {
+            const assignedNodes = this.slotRef.assignedNodes();
+            const hasContent = assignedNodes.some(node => {
+                if (node.nodeType === Node.TEXT_NODE) {
+                    return node.textContent.trim() !== '';
+                }
+                return true;
+            });
+            this.hasSlotContent = hasContent;
+        }
+    }
+    getSizeClass() {
+        const sizeStyles = {
+            [SulaBadgeSize.Small]: 'min-w-12 h-12',
+            [SulaBadgeSize.Medium]: 'min-w-[20px] h-[20px]',
+            [SulaBadgeSize.Large]: 'min-w-[24px] h-[24px]',
+            [SulaBadgeSize.Display]: 'min-w-[32px] h-[32px]',
+        };
+        return sizeStyles[this.size];
+    }
+    getPaddingByType() {
+        const paddingStyles = {
+            [SulaBadgeType.Dot]: 'p-0',
+            [SulaBadgeType.Text]: this.getTextPaddingBySize(),
+            [SulaBadgeType.Icon]: 'p-4',
+        };
+        return paddingStyles[this.type];
+    }
+    getTextPaddingBySize() {
+        const paddingStyles = {
+            [SulaBadgeSize.Small]: 'p-4',
+            [SulaBadgeSize.Medium]: 'p-4',
+            [SulaBadgeSize.Large]: 'px-8 py-2',
+            [SulaBadgeSize.Display]: 'px-8 py-2',
+        };
+        return paddingStyles[this.size];
+    }
+    getStatusClass() {
+        const statusStyles = {
+            [SulaBadgeStatus.Default]: 'bg-brand-primary',
+            [SulaBadgeStatus.Error]: 'bg-feedback-error',
+            [SulaBadgeStatus.Info]: 'bg-feedback-informational',
+            [SulaBadgeStatus.Success]: 'bg-feedback-success',
+            [SulaBadgeStatus.Warning]: 'bg-feedback-alert',
+        };
+        return statusStyles[this.status];
+    }
+    render() {
+        return (h(Host, { key: 'da65be951c2ef5b4ec1e918fd36d0ee52536dbfa' }, h("div", { key: '86b9e5d1745c65f5061fd9413d77b0d30068dac2', class: "relative flex w-fit" }, h("div", { key: '5fefffd4fa32bcde9cee01105dba984ec3d3eeaa', class: {
+                'absolute top-0 right-0': (this.type === SulaBadgeType.Dot || this.type === SulaBadgeType.Icon) && this.hasSlotContent,
+                'absolute bottom-[-8px] flex w-full justify-center items-center': this.type === SulaBadgeType.Text && this.hasSlotContent,
+            } }, h("div", { key: 'c8d397d8dba50bb0a65f98cf5e06848ed9113e45', class: {
+                [this.getSizeClass()]: true,
+                [this.getStatusClass()]: true,
+                [this.getPaddingByType()]: true,
+                'rounded-full flex justify-center items-center': true,
+            } }, this.icon && h("sula-icon", { key: 'cde6ab5506774e2a12e5cbfaeb0950eb7f57dd00', icon: this.icon, customClass: "text-base text-negative-negative-1" }), this.text && h("div", { key: '0ee0126995714eb03a37554c6726e11f942c084f', class: "font-bold text-base leading-4 text-negative-negative-1" }, this.text))), h("slot", { key: 'fa357b2a05a7d8f7a27274637f2b5e30deeb9699', ref: el => (this.slotRef = el) }))));
+    }
+    static get is() { return "sula-badge"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sula-badge.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sula-badge.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "status": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "SulaBadgeStatus",
+                    "resolved": "SulaBadgeStatus.Default | SulaBadgeStatus.Error | SulaBadgeStatus.Info | SulaBadgeStatus.Money | SulaBadgeStatus.Success | SulaBadgeStatus.Warning",
+                    "references": {
+                        "SulaBadgeStatus": {
+                            "location": "import",
+                            "path": "./model/sula-badge.model",
+                            "id": "src/components/sula-badge/model/sula-badge.model.ts::SulaBadgeStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Badge status"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "status",
+                "reflect": false,
+                "defaultValue": "SulaBadgeStatus.Default"
+            },
+            "size": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "SulaBadgeSize",
+                    "resolved": "SulaBadgeSize.Display | SulaBadgeSize.Large | SulaBadgeSize.Medium | SulaBadgeSize.Small",
+                    "references": {
+                        "SulaBadgeSize": {
+                            "location": "import",
+                            "path": "./model/sula-badge.model",
+                            "id": "src/components/sula-badge/model/sula-badge.model.ts::SulaBadgeSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Badge size"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "SulaBadgeSize.Medium"
+            },
+            "type": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "SulaBadgeType",
+                    "resolved": "SulaBadgeType.Dot | SulaBadgeType.Icon | SulaBadgeType.Text",
+                    "references": {
+                        "SulaBadgeType": {
+                            "location": "import",
+                            "path": "./model/sula-badge.model",
+                            "id": "src/components/sula-badge/model/sula-badge.model.ts::SulaBadgeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Badge type"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "SulaBadgeType.Text"
+            },
+            "text": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Badge text"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "text",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Badge icon"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon",
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasSlotContent": {}
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+}
+//# sourceMappingURL=sula-badge.js.map

package/dist/collection/components/sula-badge/sula-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sula-badge.js","sourceRoot":"","sources":["../../../src/components/sula-badge/sula-badge.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Element, State } from '@stencil/core';\nimport { SulaBadgeSize, SulaBadgeStatus, SulaBadgeType } from './model/sula-badge.model';\n\n@Component({\n  tag: 'sula-badge',\n  styleUrl: 'sula-badge.scss',\n  shadow: true,\n})\nexport class SulaBadge {\n  @Element() hostElement: HTMLElement;\n\n  /**\n   * Badge status\n   */\n  @Prop({ mutable: true }) status: SulaBadgeStatus = SulaBadgeStatus.Default;\n\n  /**\n   * Badge size\n   */\n  @Prop({ mutable: true }) size: SulaBadgeSize = SulaBadgeSize.Medium;\n\n  /**\n   * Badge type\n   */\n  @Prop({ mutable: true }) type: SulaBadgeType = SulaBadgeType.Text;\n\n  /**\n   * Badge text\n   */\n  @Prop({ mutable: true }) text: string = '';\n\n  /**\n   * Badge icon\n   */\n  @Prop({ mutable: true }) icon: string = '';\n\n  slotRef?: HTMLSlotElement;\n\n  @State()\n  hasSlotContent: boolean = false;\n\n  componentDidLoad() {\n    this.checkSlotContent();\n  }\n\n  checkSlotContent() {\n    if (this.slotRef) {\n      const assignedNodes = this.slotRef.assignedNodes();\n\n      const hasContent = assignedNodes.some(node => {\n        if (node.nodeType === Node.TEXT_NODE) {\n          return node.textContent.trim() !== '';\n        }\n        return true;\n      });\n\n      this.hasSlotContent = hasContent;\n    }\n  }\n\n  getSizeClass() {\n    const sizeStyles = {\n      [SulaBadgeSize.Small]: 'min-w-12 h-12',\n      [SulaBadgeSize.Medium]: 'min-w-[20px] h-[20px]',\n      [SulaBadgeSize.Large]: 'min-w-[24px] h-[24px]',\n      [SulaBadgeSize.Display]: 'min-w-[32px] h-[32px]',\n    };\n\n    return sizeStyles[this.size];\n  }\n\n  getPaddingByType() {\n    const paddingStyles = {\n      [SulaBadgeType.Dot]: 'p-0',\n      [SulaBadgeType.Text]: this.getTextPaddingBySize(),\n      [SulaBadgeType.Icon]: 'p-4',\n    };\n    return paddingStyles[this.type];\n  }\n\n  getTextPaddingBySize() {\n    const paddingStyles = {\n      [SulaBadgeSize.Small]: 'p-4',\n      [SulaBadgeSize.Medium]: 'p-4',\n      [SulaBadgeSize.Large]: 'px-8 py-2',\n      [SulaBadgeSize.Display]: 'px-8 py-2',\n    };\n\n    return paddingStyles[this.size];\n  }\n\n  getStatusClass() {\n    const statusStyles = {\n      [SulaBadgeStatus.Default]: 'bg-brand-primary',\n      [SulaBadgeStatus.Error]: 'bg-feedback-error',\n      [SulaBadgeStatus.Info]: 'bg-feedback-informational',\n      [SulaBadgeStatus.Success]: 'bg-feedback-success',\n      [SulaBadgeStatus.Warning]: 'bg-feedback-alert',\n    };\n\n    return statusStyles[this.status];\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"relative flex w-fit\">\n          <div\n            class={{\n              'absolute top-0 right-0': (this.type === SulaBadgeType.Dot || this.type === SulaBadgeType.Icon) && this.hasSlotContent,\n              'absolute bottom-[-8px] flex w-full justify-center items-center': this.type === SulaBadgeType.Text && this.hasSlotContent,\n            }}\n          >\n            <div\n              class={{\n                [this.getSizeClass()]: true,\n                [this.getStatusClass()]: true,\n                [this.getPaddingByType()]: true,\n                'rounded-full flex justify-center items-center': true,\n              }}\n            >\n              {this.icon && <sula-icon icon={this.icon} customClass=\"text-base text-negative-negative-1\"></sula-icon>}\n              {this.text && <div class=\"font-bold text-base leading-4 text-negative-negative-1\">{this.text}</div>}\n            </div>\n          </div>\n          <slot ref={el => (this.slotRef = el as HTMLSlotElement)}></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/sula-badge/sula-badge.stories.js

@@ -0,0 +1,148 @@
+import { SulaBadgeSize, SulaBadgeStatus, SulaBadgeType } from "./model/sula-badge.model";
+export default {
+    title: 'Components/sula-badge',
+    tags: ['autodocs'],
+    argTypes: {
+        text: {
+            control: 'text',
+            defaultValue: 'Badge',
+            description: 'Badge text when is text type',
+            type: {
+                required: false,
+            },
+        },
+        icon: {
+            control: 'text',
+            defaultValue: 'ph ph-bell',
+            description: 'Badge icon when is Icon type',
+            type: {
+                required: false,
+            },
+        },
+        status: {
+            control: { type: 'select' },
+            options: Object.values(SulaBadgeStatus),
+            defaultValue: SulaBadgeStatus.Default,
+            description: 'Badge status',
+            type: {
+                required: false,
+            },
+        },
+        size: {
+            control: { type: 'select' },
+            options: Object.values(SulaBadgeSize),
+            defaultValue: SulaBadgeSize.Medium,
+            description: 'Badge size',
+            type: {
+                required: false,
+            },
+        },
+        type: {
+            control: { type: 'select' },
+            options: Object.values(SulaBadgeType),
+            defaultValue: SulaBadgeType.Text,
+            description: 'Badge type',
+            type: {
+                required: false,
+            },
+        },
+    },
+};
+const Template = args => {
+    const container = document.createElement('div');
+    container.style.margin = '20px';
+    const el = document.createElement('sula-badge');
+    if (args.text)
+        el.setAttribute('text', args.text);
+    if (args.icon)
+        el.setAttribute('icon', args.icon);
+    el.setAttribute('status', args.status);
+    el.setAttribute('size', args.size);
+    el.setAttribute('type', args.type);
+    container.appendChild(el);
+    return container;
+};
+const TemplateWithAvatar = args => {
+    const container = document.createElement('div');
+    container.style.margin = '20px';
+    const el = document.createElement('sula-badge');
+    if (args.text)
+        el.setAttribute('text', args.text);
+    if (args.icon)
+        el.setAttribute('icon', args.icon);
+    el.setAttribute('status', args.status);
+    el.setAttribute('size', args.size);
+    el.setAttribute('type', args.type);
+    // Adiciona avatar como conteúdo do slot
+    const avatar = document.createElement('sula-avatar');
+    avatar.setAttribute('image-url', 'https://i.pravatar.cc/300');
+    avatar.setAttribute('size', 'medium');
+    el.appendChild(avatar);
+    container.appendChild(el);
+    return container;
+};
+export const Default = Template.bind({});
+Default.args = {
+    text: 'Badge',
+    icon: '',
+    status: SulaBadgeStatus.Default,
+    size: SulaBadgeSize.Medium,
+    type: SulaBadgeType.Text,
+};
+export const DotBadge = Template.bind({});
+DotBadge.args = {
+    text: '',
+    icon: '',
+    status: SulaBadgeStatus.Error,
+    size: SulaBadgeSize.Small,
+    type: SulaBadgeType.Dot,
+};
+export const IconBadge = Template.bind({});
+IconBadge.args = {
+    text: '',
+    icon: 'ph ph-bell',
+    status: SulaBadgeStatus.Info,
+    size: SulaBadgeSize.Medium,
+    type: SulaBadgeType.Icon,
+};
+export const SuccessBadge = Template.bind({});
+SuccessBadge.args = {
+    text: 'OK',
+    icon: '',
+    status: SulaBadgeStatus.Success,
+    size: SulaBadgeSize.Medium,
+    type: SulaBadgeType.Text,
+};
+export const WarningBadge = Template.bind({});
+WarningBadge.args = {
+    text: '!',
+    icon: '',
+    status: SulaBadgeStatus.Warning,
+    size: SulaBadgeSize.Medium,
+    type: SulaBadgeType.Text,
+};
+export const LargeBadge = Template.bind({});
+LargeBadge.args = {
+    text: '99+',
+    icon: '',
+    status: SulaBadgeStatus.Default,
+    size: SulaBadgeSize.Large,
+    type: SulaBadgeType.Text,
+};
+export const DisplayBadge = Template.bind({});
+DisplayBadge.args = {
+    text: '999',
+    icon: '',
+    status: SulaBadgeStatus.Default,
+    size: SulaBadgeSize.Display,
+    type: SulaBadgeType.Text,
+};
+export const BadgeWithAvatar = TemplateWithAvatar.bind({});
+BadgeWithAvatar.args = {
+    text: '',
+    icon: '',
+    status: SulaBadgeStatus.Error,
+    size: SulaBadgeSize.Small,
+    type: SulaBadgeType.Dot,
+};
+//# sourceMappingURL=sula-badge.stories.js.map