@sula-tech/webcomponents 0.10.0 → 0.11.1

package/dist/cjs/webcomponents.cjs.js

@@ -18,7 +18,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await index.globalScripts();
-  return index.bootstrapLazy([["sula-avatar_20.cjs",[[1,"sula-modal",{"opened":[1028],"blockBodyScroll":[1028,"block-body-scroll"],"closeOnClickOutside":[1028,"close-on-click-outside"],"type":[1],"headerIcon":[1,"header-icon"],"modalTitle":[1,"modal-title"],"promoImage":[1,"promo-image"],"subTitle":[1,"sub-title"],"primaryButtonText":[1,"primary-button-text"],"secondaryButtonText":[1,"secondary-button-text"],"slotOverflow":[1,"slot-overflow"],"isAnimating":[32],"shouldRender":[32]},null,{"opened":["handleOpenedChange"]}],[1,"sula-chip",{"text":[1025],"appearance":[1025],"disabled":[1028],"items":[1040],"isFocused":[32],"showItems":[32]},[[4,"click","handleDocumentClick"]]],[1,"sula-dropdown",{"label":[1025],"disabled":[1028],"items":[1040],"value":[1040],"searchable":[516],"selectedItem":[32],"showItems":[32],"isFocused":[32],"searchTerm":[32],"filteredItems":[32]},[[4,"click","handleDocumentClick"]],{"value":["handleValueChange"],"showItems":["handleShowItemsChange"]}],[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-checkbox",{"type":[1025],"label":[1025],"subTitle":[1025,"sub-title"],"disabled":[1028],"checked":[1028],"isFocus":[32]}],[1,"sula-progress-bar",{"appearance":[1025],"state":[1025],"topLabel":[1025,"top-label"],"bottomLabel":[1025,"bottom-label"],"progress":[1026],"showProgress":[1028,"show-progress"]},null,{"progress":["validateProgress"]}],[1,"sula-search-bar",{"value":[1025],"searchBarStyle":[1025,"search-bar-style"],"placeholder":[1025],"leftIcon":[1025,"left-icon"],"rightIcon":[1025,"right-icon"],"isFocused":[32],"textValue":[32]}],[1,"sula-segmented-control",{"items":[1040],"type":[1025],"size":[1025],"color":[1025]}],[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],"maskPattern":[1,"mask-pattern"],"inputIsOpen":[32],"textValue":[32],"showPassword":[32],"inputIsFocused":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"]}],[1,"sula-tiles",{"type":[1],"size":[1],"ellipsis":[4],"icon":[1],"text":[1],"subText":[1,"sub-text"],"disabled":[4]}],[1,"sula-timeline-list",{"sulaTimelineList":[1040,"sula-timeline-list"]}],[1,"sula-radio-button",{"checked":[1028],"label":[1025],"disabled":[1028],"radioIsFocus":[32]}],[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],"labelPadding":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"]}],[1,"sula-button",{"text":[1025],"icon":[1025],"leftIcon":[1025,"left-icon"],"rightIcon":[1025,"right-icon"],"appearance":[1025],"type":[1025],"size":[1025],"status":[1025],"loading":[1028],"buttonDisabled":[1028,"button-disabled"],"fullWidth":[1028,"full-width"]}],[1,"sula-loader",{"size":[1],"animationInstance":[32]}],[1,"sula-menu-select-list",{"items":[1040],"fullWidth":[4,"full-width"],"selectedValue":[16,"selected-value"]}],[0,"sula-icon",{"icon":[1],"customClass":[1,"custom-class"]}]]]], options);
+  return index.bootstrapLazy([["sula-avatar_21.cjs",[[1,"sula-modal",{"opened":[1028],"blockBodyScroll":[1028,"block-body-scroll"],"closeOnClickOutside":[1028,"close-on-click-outside"],"type":[1],"headerIcon":[1,"header-icon"],"modalTitle":[1,"modal-title"],"promoImage":[1,"promo-image"],"subTitle":[1,"sub-title"],"primaryButtonText":[1,"primary-button-text"],"secondaryButtonText":[1,"secondary-button-text"],"slotOverflow":[1,"slot-overflow"],"isAnimating":[32],"shouldRender":[32]},null,{"opened":["handleOpenedChange"]}],[1,"sula-chip",{"text":[1025],"appearance":[1025],"disabled":[1028],"items":[1040],"selected":[1028],"isFocused":[32],"showItems":[32]},[[4,"click","handleDocumentClick"]]],[1,"sula-dropdown",{"label":[1025],"disabled":[1028],"items":[1040],"value":[1040],"searchable":[516],"selectedItem":[32],"showItems":[32],"isFocused":[32],"searchTerm":[32],"filteredItems":[32]},[[4,"click","handleDocumentClick"]],{"value":["handleValueChange"],"showItems":["handleShowItemsChange"]}],[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-breadcrumb",{"items":[1040]}],[1,"sula-checkbox",{"type":[1025],"label":[1025],"subTitle":[1025,"sub-title"],"disabled":[1028],"checked":[1028],"isFocus":[32]}],[1,"sula-progress-bar",{"appearance":[1025],"state":[1025],"topLabel":[1025,"top-label"],"bottomLabel":[1025,"bottom-label"],"progress":[1026],"showProgress":[1028,"show-progress"]},null,{"progress":["validateProgress"]}],[1,"sula-search-bar",{"value":[1025],"searchBarStyle":[1025,"search-bar-style"],"placeholder":[1025],"leftIcon":[1025,"left-icon"],"rightIcon":[1025,"right-icon"],"isFocused":[32],"textValue":[32]}],[1,"sula-segmented-control",{"items":[1040],"type":[1025],"size":[1025],"color":[1025]}],[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],"maskPattern":[1,"mask-pattern"],"inputIsOpen":[32],"textValue":[32],"showPassword":[32],"inputIsFocused":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"]}],[1,"sula-tiles",{"type":[1],"size":[1],"ellipsis":[4],"icon":[1],"text":[1],"subText":[1,"sub-text"],"disabled":[4]}],[1,"sula-timeline-list",{"sulaTimelineList":[1040,"sula-timeline-list"]}],[1,"sula-radio-button",{"checked":[1028],"label":[1025],"disabled":[1028],"radioIsFocus":[32]}],[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],"labelPadding":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"]}],[1,"sula-button",{"text":[1025],"icon":[1025],"leftIcon":[1025,"left-icon"],"rightIcon":[1025,"right-icon"],"appearance":[1025],"type":[1025],"size":[1025],"status":[1025],"loading":[1028],"buttonDisabled":[1028,"button-disabled"],"fullWidth":[1028,"full-width"]}],[1,"sula-loader",{"size":[1],"animationInstance":[32]}],[1,"sula-menu-select-list",{"items":[1040],"fullWidth":[4,"full-width"],"selectedValue":[16,"selected-value"]}],[0,"sula-icon",{"icon":[1],"customClass":[1,"custom-class"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -2,6 +2,7 @@
   "entries": [
     "components/sula-avatar/sula-avatar.js",
     "components/sula-badge/sula-badge.js",
+    "components/sula-breadcrumb/sula-breadcrumb.js",
     "components/sula-button/sula-button.js",
     "components/sula-checkbox/sula-checkbox.js",
     "components/sula-chip/sula-chip.js",

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=sula-breadcrumb.model.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sula-breadcrumb.model.js","sourceRoot":"","sources":["../../../../src/components/sula-breadcrumb/model/sula-breadcrumb.model.ts"],"names":[],"mappings":"","sourcesContent":["export interface SulaMenuBreadcrumb {\n    id?: string | number;\n    title: string;\n    path?: string;\n}"]}

package/dist/collection/components/sula-breadcrumb/sula-breadcrumb.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:#012b15;--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:#330d00;--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:#402705;--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:#401204;--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:#402301;--color-gray-50:#fff;--color-gray-100:#f3f4f4;--color-gray-200:#e5e6e6;--color-gray-300:#bfc0c0;--color-gray-400:#acaeae;--color-gray-500:#949595;--color-gray-600:#737575;--color-gray-700:#6c6e6e;--color-gray-800:#313333;--color-gray-900:#272929;--color-gray-950:#191d1d;--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:#071e40;--color-extra-color-blue-light:#e7f0f4;--color-extra-color-blue-dark:#162931;--color-black-opacity-50:rgba(25,29,29,.02);--color-black-opacity-100:rgba(25,29,29,.05);--color-black-opacity-200:rgba(25,29,29,.11);--color-black-opacity-300:rgba(25,29,29,.28);--color-black-opacity-400:rgba(25,29,29,.36);--color-black-opacity-500:rgba(25,29,29,.44);--color-black-opacity-600:rgba(25,29,29,.62);--color-black-opacity-700:rgba(25,29,29,.64);--color-black-opacity-800:rgba(25,29,29,.72);--color-black-opacity-900:rgba(25,29,29,.8);--color-black-opacity-950:rgba(25,29,29,.96);--color-shadow-opacity-50:rgba(0,0,0,.04);--color-shadow-opacity-100:rgba(0,0,0,.06);--color-shadow-opacity-200:rgba(0,0,0,.12);--color-shadow-opacity-300:rgba(0,0,0,.2);--color-shadow-opacity-400:rgba(0,0,0,.32);--color-shadow-opacity-500:rgba(0,0,0,.5);--color-shadow-opacity-600:rgba(0,0,0,.55);--color-shadow-opacity-700:rgba(0,0,0,.64);--color-shadow-opacity-800:rgba(0,0,0,.73);--color-shadow-opacity-900:rgba(0,0,0,.8);--color-shadow-opacity-950:rgba(0,0,0,.91);--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:#f3f4f4;--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:#313333;--color-text-secondary:#6c6e6e;--color-text-disabled:#949595;--color-text-link:#1355b4;--color-states-empty-bg-hover:rgba(25,29,29,.05);--color-states-empty-bg-pressed:rgba(25,29,29,.11);--color-states-bg-disabled:rgba(25,29,29,.02);--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:#e5e6e6;--color-states-negative-pressed:#bfc0c0;--color-icon-primary:#6c6e6e;--color-icon-secondary:#fff;--color-icon-tertiary:#b30404;--color-icon-disabled:#acaeae;--color-neutral-neutral-1:#fff;--color-neutral-neutral-2:#f3f4f4;--color-neutral-neutral-3:#acaeae;--color-neutral-neutral-4:#949595;--color-neutral-neutral-5:#737575;--color-neutral-neutral-6:#6c6e6e;--color-neutral-neutral-7:#313333;--color-neutral-neutral-8:#272929;--color-negative-negative-1:#fff;--color-negative-negative-2:#313333;--color-opacity-body:#fffc;--color-opacity-on-body:rgba(25,29,29,.02);--color-opacity-overlay:rgba(25,29,29,.62);--color-opacity-on-overlay:#ffffff1a;--color-line-input:#949595;--color-line-general-strong:#bfc0c0;--color-line-general:#e5e6e6;--color-line-hair:rgba(25,29,29,.05);--color-box-shadow-body:#fff;--color-box-shadow-shadow-color-1:rgba(0,0,0,.04);--color-box-shadow-shadow-color-2:rgba(0,0,0,.06)}.static{position:static}.flex{display:flex}.inline-flex{display:inline-flex}.h-\[5\.25px\]{height:5.25px}.w-\[9px\]{width:9px}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.rounded{border-radius:.25rem}.px-12{padding-left:.75rem;padding-right:.75rem}.align-middle{vertical-align:middle}.text-paragraph-medium-bold{font-size:1rem;font-weight:700;letter-spacing:0;line-height:24px}.tracking-\[-0\.01em\]{letter-spacing:-.01em}.text-brand-primary{color:var(--color-brand-primary)}.text-text-secondary{color:var(--color-text-secondary)}.no-underline{text-decoration-line:none}.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)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.hover\:text-text-primary:hover{color:var(--color-text-primary)}.hover\:underline:hover{text-decoration-line:underline}.hover\:decoration-solid:hover{text-decoration-style:solid}.hover\:decoration-1:hover{text-decoration-thickness:1px}.focus\:rounded:focus{border-radius:.25rem}.focus\:outline:focus{outline-style:solid}.focus\:outline-2:focus{outline-width:2px}.focus\:outline-offset-2:focus{outline-offset:2px}.focus\:outline-feedback-informational:focus{outline-color:var(--color-feedback-informational)}.active\:text-text-secondary:active{color:var(--color-text-secondary)}.active\:underline:active{text-decoration-line:underline}.active\:decoration-solid:active{text-decoration-style:solid}.active\:decoration-1:active{text-decoration-thickness:1px}

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

@@ -0,0 +1,98 @@
+import { Host, h } from "@stencil/core";
+export class SulaBreadcrumb {
+    constructor() {
+        /**
+         * Breadcrumb items list
+         */
+        this.items = [];
+    }
+    handleItemClick(item, isActive) {
+        if (isActive || !item.path)
+            return;
+        this.breadcrumbItemClicked.emit(item);
+    }
+    render() {
+        return (h(Host, { key: '4441eb43f2910be34a47b72e7089a00128bdb2fc' }, h("nav", { key: '6b0af3636a82d15581b949b42cf4193bf2b12e4c', class: "flex items-center", "aria-label": "Breadcrumb" }, h("ol", { key: '14941d47b8e9e69627fa2a3c756f631c621a5882', class: "flex items-center" }, this.items.map((item, index) => {
+            const isActive = index === this.items.length - 1;
+            const hasPath = !!item.path && !isActive;
+            return (h("li", { class: "flex items-center" }, h("a", { class: {
+                    'text-paragraph-medium-bold align-middle transition-colors duration-200': true,
+                    'tracking-[-0.01em]': true,
+                    'no-underline': true,
+                    'text-text-secondary cursor-default': !isActive,
+                    'text-brand-primary cursor-default': isActive,
+                    'cursor-pointer hover:text-text-primary hover:underline hover:decoration-solid hover:decoration-1 focus:outline focus:outline-2 focus:outline-feedback-informational focus:outline-offset-2 focus:rounded': hasPath,
+                    'active:text-text-secondary active:underline active:decoration-solid active:decoration-1 active:decoration-skip-ink-auto': hasPath && !isActive,
+                }, href: hasPath ? item.path : undefined, "aria-current": isActive ? 'page' : undefined, onClick: e => {
+                    e.preventDefault();
+                    this.handleItemClick(item, isActive);
+                } }, item.title), !isActive && (h("span", { class: "inline-flex items-center px-12" }, h("sula-icon", { icon: "ph-bold ph-caret-right", customClass: "text-brand-primary w-[9px] h-[5.25px] flex items-center justify-center" })))));
+        })))));
+    }
+    static get is() { return "sula-breadcrumb"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sula-breadcrumb.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sula-breadcrumb.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "unknown",
+                "attribute": "items",
+                "mutable": true,
+                "complexType": {
+                    "original": "SulaMenuBreadcrumb[]",
+                    "resolved": "SulaMenuBreadcrumb[]",
+                    "references": {
+                        "SulaMenuBreadcrumb": {
+                            "location": "import",
+                            "path": "./model/sula-breadcrumb.model",
+                            "id": "src/components/sula-breadcrumb/model/sula-breadcrumb.model.ts::SulaMenuBreadcrumb"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Breadcrumb items list"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "breadcrumbItemClicked",
+                "name": "breadcrumbItemClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when a breadcrumb item is clicked"
+                },
+                "complexType": {
+                    "original": "SulaMenuBreadcrumb",
+                    "resolved": "SulaMenuBreadcrumb",
+                    "references": {
+                        "SulaMenuBreadcrumb": {
+                            "location": "import",
+                            "path": "./model/sula-breadcrumb.model",
+                            "id": "src/components/sula-breadcrumb/model/sula-breadcrumb.model.ts::SulaMenuBreadcrumb"
+                        }
+                    }
+                }
+            }];
+    }
+}
+//# sourceMappingURL=sula-breadcrumb.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sula-breadcrumb.js","sourceRoot":"","sources":["../../../src/components/sula-breadcrumb/sula-breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQ9E,MAAM,OAAO,cAAc;IAL3B;QAME;;WAEG;QAEH,UAAK,GAAyB,EAAE,CAAC;KAyDlC;IAjDS,eAAe,CAAC,IAAwB,EAAE,QAAiB;QACjE,IAAI,QAAQ,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO;QACnC,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACxC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,mBAAmB,gBAAY,YAAY;gBACpD,2DAAI,KAAK,EAAC,mBAAmB,IAC1B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;oBAC9B,MAAM,QAAQ,GAAG,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;oBACjD,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC;oBAEzC,OAAO,CACL,UAAI,KAAK,EAAC,mBAAmB;wBAC3B,SACE,KAAK,EAAE;gCACL,wEAAwE,EAAE,IAAI;gCAC9E,oBAAoB,EAAE,IAAI;gCAC1B,cAAc,EAAE,IAAI;gCACpB,oCAAoC,EAAE,CAAC,QAAQ;gCAC/C,mCAAmC,EAAE,QAAQ;gCAC7C,0MAA0M,EAAE,OAAO;gCACnN,yHAAyH,EAAE,OAAO,IAAI,CAAC,QAAQ;6BAChJ,EACD,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,kBACvB,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC3C,OAAO,EAAE,CAAC,CAAC,EAAE;gCACX,CAAC,CAAC,cAAc,EAAE,CAAC;gCACnB,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;4BACvC,CAAC,IAEA,IAAI,CAAC,KAAK,CACT;wBAEH,CAAC,QAAQ,IAAI,CACZ,YAAM,KAAK,EAAC,gCAAgC;4BAC1C,iBAAW,IAAI,EAAC,wBAAwB,EAAC,WAAW,EAAC,wEAAwE,GAAa,CACrI,CACR,CACE,CACN,CAAC;gBACJ,CAAC,CAAC,CACC,CACD,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\nimport { SulaMenuBreadcrumb } from './model/sula-breadcrumb.model';\n\n@Component({\n  tag: 'sula-breadcrumb',\n  styleUrl: 'sula-breadcrumb.scss',\n  shadow: true,\n})\nexport class SulaBreadcrumb {\n  /**\n   * Breadcrumb items list\n   */\n  @Prop({ mutable: true })\n  items: SulaMenuBreadcrumb[] = [];\n\n  /**\n   * Event emitted when a breadcrumb item is clicked\n   */\n  @Event()\n  breadcrumbItemClicked: EventEmitter<SulaMenuBreadcrumb>;\n\n  private handleItemClick(item: SulaMenuBreadcrumb, isActive: boolean) {\n    if (isActive || !item.path) return;\n    this.breadcrumbItemClicked.emit(item);\n  }\n\n  render() {\n    return (\n      <Host>\n        <nav class=\"flex items-center\" aria-label=\"Breadcrumb\">\n          <ol class=\"flex items-center\">\n            {this.items.map((item, index) => {\n              const isActive = index === this.items.length - 1;\n              const hasPath = !!item.path && !isActive;\n\n              return (\n                <li class=\"flex items-center\">\n                  <a\n                    class={{\n                      'text-paragraph-medium-bold align-middle transition-colors duration-200': true,\n                      'tracking-[-0.01em]': true,\n                      'no-underline': true,\n                      'text-text-secondary cursor-default': !isActive,\n                      'text-brand-primary cursor-default': isActive,\n                      'cursor-pointer hover:text-text-primary hover:underline hover:decoration-solid hover:decoration-1 focus:outline focus:outline-2 focus:outline-feedback-informational focus:outline-offset-2 focus:rounded': hasPath,\n                      'active:text-text-secondary active:underline active:decoration-solid active:decoration-1 active:decoration-skip-ink-auto': hasPath && !isActive,\n                    }}\n                    href={hasPath ? item.path : undefined}\n                    aria-current={isActive ? 'page' : undefined}\n                    onClick={e => {\n                      e.preventDefault();\n                      this.handleItemClick(item, isActive);\n                    }}\n                  >\n                    {item.title}\n                  </a>\n\n                  {!isActive && (\n                    <span class=\"inline-flex items-center px-12\">\n                      <sula-icon icon=\"ph-bold ph-caret-right\" customClass=\"text-brand-primary w-[9px] h-[5.25px] flex items-center justify-center\"></sula-icon>\n                    </span>\n                  )}\n                </li>\n              );\n            })}\n          </ol>\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,116 @@
+export default {
+    title: 'Components/sula-breadcrumb',
+    tags: ['autodocs'],
+    argTypes: {
+        items: {
+            control: 'object',
+            description: 'Array de itens do breadcrumb com label e link',
+            table: {
+                type: { summary: 'Array<{id?: string | number, label: string, link?: string}>' },
+                defaultValue: { summary: '[]' },
+            },
+        },
+        breadcrumbItemClicked: {
+            action: 'breadcrumbItemClicked',
+            description: 'Evento emitido quando um item do breadcrumb é clicado',
+            table: {
+                type: { summary: 'CustomEvent<SulaMenuBreadcrumb>' },
+            },
+        },
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: `
+O componente **Sula Breadcrumb** é utilizado para navegação hierárquica, mostrando a localização 
+atual do usuário dentro da estrutura do site ou aplicação.
+
+### Características principais:
+- Navegação hierárquica clara
+- Separador usando ícone ph-caret-right
+- Suporte a links e itens não clicáveis
+- Último item sempre aparece em laranja (cor primária) e em negrito
+- Estados: hover, pressed e focused
+      `,
+            },
+        },
+    },
+};
+const Template = args => {
+    const container = document.createElement('div');
+    container.style.margin = '20px';
+    container.style.padding = '20px';
+    const el = document.createElement('sula-breadcrumb');
+    // Define os items como propriedade
+    if (args.items && args.items.length > 0) {
+        el.items = args.items.map(item => ({
+            id: item.id,
+            title: item.label,
+            path: item.link,
+        }));
+    }
+    // Event listener
+    el.addEventListener('breadcrumbItemClicked', e => {
+        console.log('Breadcrumb item clicked:', e.detail);
+        args.breadcrumbItemClicked(e);
+    });
+    container.appendChild(el);
+    return container;
+};
+export const Playground = Template.bind({});
+Playground.args = {
+    items: [
+        { label: 'Home', link: '/' },
+        { label: 'Produtos', link: '/produtos' },
+        { label: 'Categoria', link: '/produtos/categoria' },
+        { label: 'Item Atual' },
+    ],
+};
+export const ShortPath = Template.bind({});
+ShortPath.args = {
+    items: [
+        { label: 'Home', link: '/' },
+        { label: 'Página Atual' },
+    ],
+};
+ShortPath.parameters = {
+    docs: {
+        description: {
+            story: 'Breadcrumb com apenas dois níveis.',
+        },
+    },
+};
+export const LongPath = Template.bind({});
+LongPath.args = {
+    items: [
+        { label: 'Home', link: '/' },
+        { label: 'Departamento', link: '/departamento' },
+        { label: 'Seção', link: '/departamento/secao' },
+        { label: 'Categoria', link: '/departamento/secao/categoria' },
+        { label: 'Subcategoria', link: '/departamento/secao/categoria/subcategoria' },
+        { label: 'Item Final' },
+    ],
+};
+LongPath.parameters = {
+    docs: {
+        description: {
+            story: 'Breadcrumb com múltiplos níveis de navegação.',
+        },
+    },
+};
+export const WithoutLinks = Template.bind({});
+WithoutLinks.args = {
+    items: [
+        { label: 'Início' },
+        { label: 'Configurações' },
+        { label: 'Perfil' },
+    ],
+};
+WithoutLinks.parameters = {
+    docs: {
+        description: {
+            story: 'Breadcrumb sem links, apenas para visualização da hierarquia.',
+        },
+    },
+};
+//# sourceMappingURL=sula-breadcrumb.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sula-breadcrumb.stories.js","sourceRoot":"","sources":["../../../src/components/sula-breadcrumb/sula-breadcrumb.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["export default {\n  title: 'Components/sula-breadcrumb',\n  tags: ['autodocs'],\n  argTypes: {\n    items: {\n      control: 'object',\n      description: 'Array de itens do breadcrumb com label e link',\n      table: {\n        type: { summary: 'Array<{id?: string | number, label: string, link?: string}>' },\n        defaultValue: { summary: '[]' },\n      },\n    },\n    breadcrumbItemClicked: {\n      action: 'breadcrumbItemClicked',\n      description: 'Evento emitido quando um item do breadcrumb é clicado',\n      table: {\n        type: { summary: 'CustomEvent<SulaMenuBreadcrumb>' },\n      },\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        component: `\nO componente **Sula Breadcrumb** é utilizado para navegação hierárquica, mostrando a localização \natual do usuário dentro da estrutura do site ou aplicação.\n\n### Características principais:\n- Navegação hierárquica clara\n- Separador usando ícone ph-caret-right\n- Suporte a links e itens não clicáveis\n- Último item sempre aparece em laranja (cor primária) e em negrito\n- Estados: hover, pressed e focused\n      `,\n      },\n    },\n  },\n};\n\nconst Template = args => {\n  const container = document.createElement('div');\n  container.style.margin = '20px';\n  container.style.padding = '20px';\n\n  const el = document.createElement('sula-breadcrumb');\n\n  // Define os items como propriedade\n  if (args.items && args.items.length > 0) {\n    el.items = args.items.map(item => ({\n      id: item.id,\n      title: item.label,\n      path: item.link,\n    }));\n  }\n\n  // Event listener\n  el.addEventListener('breadcrumbItemClicked', e => {\n    console.log('Breadcrumb item clicked:', e.detail);\n    args.breadcrumbItemClicked(e);\n  });\n\n  container.appendChild(el);\n  return container;\n};\n\nexport const Playground = Template.bind({});\nPlayground.args = {\n  items: [\n    { label: 'Home', link: '/' },\n    { label: 'Produtos', link: '/produtos' },\n    { label: 'Categoria', link: '/produtos/categoria' },\n    { label: 'Item Atual' },\n  ],\n};\n\nexport const ShortPath = Template.bind({});\nShortPath.args = {\n  items: [\n    { label: 'Home', link: '/' },\n    { label: 'Página Atual' },\n  ],\n};\nShortPath.parameters = {\n  docs: {\n    description: {\n      story: 'Breadcrumb com apenas dois níveis.',\n    },\n  },\n};\n\nexport const LongPath = Template.bind({});\nLongPath.args = {\n  items: [\n    { label: 'Home', link: '/' },\n    { label: 'Departamento', link: '/departamento' },\n    { label: 'Seção', link: '/departamento/secao' },\n    { label: 'Categoria', link: '/departamento/secao/categoria' },\n    { label: 'Subcategoria', link: '/departamento/secao/categoria/subcategoria' },\n    { label: 'Item Final' },\n  ],\n};\nLongPath.parameters = {\n  docs: {\n    description: {\n      story: 'Breadcrumb com múltiplos níveis de navegação.',\n    },\n  },\n};\n\nexport const WithoutLinks = Template.bind({});\nWithoutLinks.args = {\n  items: [\n    { label: 'Início' },\n    { label: 'Configurações' },\n    { label: 'Perfil' },\n  ],\n};\nWithoutLinks.parameters = {\n  docs: {\n    description: {\n      story: 'Breadcrumb sem links, apenas para visualização da hierarquia.',\n    },\n  },\n};\n"]}

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

@@ -153,7 +153,7 @@ export class SulaButton {
         return SulaLoaderSize.Medium;
     }
     render() {
-        return (h(Host, { key: '8ad1fe3267dba64fa2ebfc01473f9eaa3164154f' }, h("button", { key: 'c71cf6caa78e79e4b8a8c47dc161830b5814a8bf', id: "button-container", class: this.getBaseButtonClass(), disabled: this.buttonDisabled || this.loading, onClick: this.handleClick }, this.loading && (h("div", { key: 'f8742f3ed286c9cbf491cd8e0f457603ecd1ed58' }, h("sula-loader", { key: '31f3e0e5a3c920d80b8909ead485c487c8121860', size: this.getLoadingSize() }))), !this.loading && (h("div", { key: '2779b0b1030542e8d0f60c93ff5469bdb7412ad8', class: "flex w-full justify-center items-center" }, this.leftIcon && h("sula-icon", { key: 'e58369da6b7ad85672dadb557e20797bde2d170d', icon: this.leftIcon, customClass: "text-lg mr-8" }), this.renderIconContent(), this.renderTextContent(), this.renderArrowIcon(), this.rightIcon && h("sula-icon", { key: '81b66dcf02b3db28ed8fca0da2ad8c41f26f051d', icon: this.rightIcon, customClass: "text-lg ml-8" }))))));
+        return (h(Host, { key: '1c1409076f20518df6a3a722d40f3ea80ca66f76' }, h("button", { key: '418ecd2a69e07eeccd8f9f42951ef4e7739e10d9', id: "button-container", class: this.getBaseButtonClass(), disabled: this.buttonDisabled || this.loading, onClick: this.handleClick }, this.loading && (h("div", { key: 'b3e1dce8d48638856806552e2dc1cd4d135673f6' }, h("sula-loader", { key: 'af9ea685849daf30b45518c6f13b71b9e9e48509', size: this.getLoadingSize() }))), !this.loading && (h("div", { key: 'f865dbf7286efb931c89b4fc366c2b2410b82516', class: "flex w-full justify-center items-center" }, this.leftIcon && h("sula-icon", { key: '24ced9ecfd42c590f884226ffb0d135164febeed', icon: this.leftIcon, customClass: "text-lg mr-8" }), this.renderIconContent(), this.renderTextContent(), this.renderArrowIcon(), this.rightIcon && h("sula-icon", { key: 'def421acb1a2d3e66fd0556e20ba9ddb7f2789e3', icon: this.rightIcon, customClass: "text-lg ml-8" }))))));
     }
     static get is() { return "sula-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -41,20 +41,20 @@ export class SulaCheckbox {
         return 'text-negative-negative-1';
     }
     render() {
-        return (h(Host, { key: '1f62bb3865134760716112f168c78a1412b770d0' }, h("div", { key: '2edbfdbfc3b48135383c5681cf5763b276942ff9', class: {
+        return (h(Host, { key: '0fd61b767c3596d432c165dd46ff8d51809322d7' }, h("div", { key: '125d5c775a4555bbad19515a062bb0613a09509c', class: {
                 'outline-none': true,
                 'flex items-center space-x-12': !!this.label && this.type === SulaCheckboxType.Default,
                 'flex items-center justify-between bg-surface-on-body rounded-md w-[280px] min-h-[85px] px-24 py-16': this.type === SulaCheckboxType.List,
                 'hover:bg-states-empty-bg-hover active:bg-states-empty-bg-pressed cursor-pointer': this.type === SulaCheckboxType.List && !this.disabled,
                 'container-focus': this.isFocus && this.type === SulaCheckboxType.List,
-            }, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.toggle, tabIndex: 0 }, this.type === SulaCheckboxType.List && (h("div", { key: '577dc485bf9f39bb64ae98f0e17b410af4910d9a', class: "flex flex-col flex-1 mr-16 overflow-hidden" }, !!this.label && h("label", { key: '5c352cfa5f71a29848e4dd0069b487968cf31018', class: "text-text-primary font-bold text-base cursor-pointer break-words" }, this.label), !!this.subTitle && h("span", { key: '473f6dcdb47d590037970172455dcc705350b9b1', class: "text-text-secondary text-base break-words" }, this.subTitle))), h("div", { key: 'dbc2782e0f323927dc42c90c7eaceaa04ce8d870', tabIndex: 0, class: {
+            }, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.toggle, tabIndex: 0 }, this.type === SulaCheckboxType.List && (h("div", { key: '0be2b402e083e38e2142574498a33f7cdf3f612a', class: "flex flex-col flex-1 mr-16 overflow-hidden" }, !!this.label && h("label", { key: 'c03f67836a92c3d9a556316fd56691e2dc14efc5', class: "text-text-primary font-bold text-base cursor-pointer break-words" }, this.label), !!this.subTitle && h("span", { key: 'b66906e1cad21d9bf9db411806c9e9f2ffb663f6', class: "text-text-secondary text-base break-words" }, this.subTitle))), h("div", { key: '79fe97660d576e181ef8505c44a0f0f0865df3dc', tabIndex: 0, class: {
                 'flex justify-center items-center rounded-xs w-[27px] h-[27px] border outline-none flex-shrink-0': true,
                 'checkbox-focus': this.isFocus && this.type === SulaCheckboxType.Default,
                 'cursor-pointer active:bg-states-empty-bg-pressed': !this.disabled,
                 'bg-states-bg-disabled border-states-bg-disabled': this.disabled,
                 'bg-brand-primary border-brand-primary': this.checked,
                 'bg-surface-body border-line-input': !this.checked,
-            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, this.checked && (h("div", { key: 'bc2712c3d43788ffbddcee8bd920f985d867d357', class: "flex justify-center items-center" }, h("sula-icon", { key: '00808ef092a0f06a1692f77cf11a700f5e6be3ce', icon: "ph-bold ph-check", customClass: `${this.getIconColor()} text-xl` })))), !!this.label && this.type === SulaCheckboxType.Default && h("label", { key: '67a977a81ee6e282976fff2621630f6f45c96da3', class: "text-text-secondary text-base cursor-pointer break-words" }, this.label))));
+            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, this.checked && (h("div", { key: '660a8055e046769e99ff0aad2f0456fa7cbfbd3d', class: "flex justify-center items-center" }, h("sula-icon", { key: 'd38c416debc187f68d8a2f5a3eb2646917661c31', icon: "ph-bold ph-check", customClass: `${this.getIconColor()} text-xl` })))), !!this.label && this.type === SulaCheckboxType.Default && h("label", { key: '3e916f2afef3b9fa5ccd2ed77a7d7283056fade4', class: "text-text-secondary text-base cursor-pointer break-words" }, this.label))));
     }
     static get is() { return "sula-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sula-chip/sula-chip.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}.outline{outline-style:solid}:host{display:block}.chip-focus{outline:2px solid var(--color-feedback-informational)!important;outline-offset:2px!important}.chip-opened{box-shadow:0 0 0 2px hsla(0,0%,8%,.102)}: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:#012b15;--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:#330d00;--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:#402705;--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:#401204;--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:#402301;--color-gray-50:#fff;--color-gray-100:#f3f4f4;--color-gray-200:#e5e6e6;--color-gray-300:#bfc0c0;--color-gray-400:#acaeae;--color-gray-500:#949595;--color-gray-600:#737575;--color-gray-700:#6c6e6e;--color-gray-800:#313333;--color-gray-900:#272929;--color-gray-950:#191d1d;--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:#071e40;--color-extra-color-blue-light:#e7f0f4;--color-extra-color-blue-dark:#162931;--color-black-opacity-50:rgba(25,29,29,.02);--color-black-opacity-100:rgba(25,29,29,.05);--color-black-opacity-200:rgba(25,29,29,.11);--color-black-opacity-300:rgba(25,29,29,.28);--color-black-opacity-400:rgba(25,29,29,.36);--color-black-opacity-500:rgba(25,29,29,.44);--color-black-opacity-600:rgba(25,29,29,.62);--color-black-opacity-700:rgba(25,29,29,.64);--color-black-opacity-800:rgba(25,29,29,.72);--color-black-opacity-900:rgba(25,29,29,.8);--color-black-opacity-950:rgba(25,29,29,.96);--color-shadow-opacity-50:rgba(0,0,0,.04);--color-shadow-opacity-100:rgba(0,0,0,.06);--color-shadow-opacity-200:rgba(0,0,0,.12);--color-shadow-opacity-300:rgba(0,0,0,.2);--color-shadow-opacity-400:rgba(0,0,0,.32);--color-shadow-opacity-500:rgba(0,0,0,.5);--color-shadow-opacity-600:rgba(0,0,0,.55);--color-shadow-opacity-700:rgba(0,0,0,.64);--color-shadow-opacity-800:rgba(0,0,0,.73);--color-shadow-opacity-900:rgba(0,0,0,.8);--color-shadow-opacity-950:rgba(0,0,0,.91);--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:#f3f4f4;--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:#313333;--color-text-secondary:#6c6e6e;--color-text-disabled:#949595;--color-text-link:#1355b4;--color-states-empty-bg-hover:rgba(25,29,29,.05);--color-states-empty-bg-pressed:rgba(25,29,29,.11);--color-states-bg-disabled:rgba(25,29,29,.02);--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:#e5e6e6;--color-states-negative-pressed:#bfc0c0;--color-icon-primary:#6c6e6e;--color-icon-secondary:#fff;--color-icon-tertiary:#b30404;--color-icon-disabled:#acaeae;--color-neutral-neutral-1:#fff;--color-neutral-neutral-2:#f3f4f4;--color-neutral-neutral-3:#acaeae;--color-neutral-neutral-4:#949595;--color-neutral-neutral-5:#737575;--color-neutral-neutral-6:#6c6e6e;--color-neutral-neutral-7:#313333;--color-neutral-neutral-8:#272929;--color-negative-negative-1:#fff;--color-negative-negative-2:#313333;--color-opacity-body:#fffc;--color-opacity-on-body:rgba(25,29,29,.02);--color-opacity-overlay:rgba(25,29,29,.62);--color-opacity-on-overlay:#ffffff1a;--color-line-input:#949595;--color-line-general-strong:#bfc0c0;--color-line-general:#e5e6e6;--color-line-hair:rgba(25,29,29,.05);--color-box-shadow-body:#fff;--color-box-shadow-shadow-color-1:rgba(0,0,0,.04);--color-box-shadow-shadow-color-2:rgba(0,0,0,.06)}.static{position:static}.absolute{position:absolute}.relative{position:relative}.left-0{left:0}.top-40{top:2.5rem}.z-50{z-index:50}.ml-8{margin-left:.5rem}.flex{display:flex}.min-h-40{min-height:2.5rem}.w-fit{width:fit-content}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-xxl{border-radius:18.75rem}.border{border-width:1px}.border-line-input{border-color:var(--color-line-input)}.bg-negative-negative-1{background-color:var(--color-negative-negative-1)}.bg-states-bg-disabled{background-color:var(--color-states-bg-disabled)}.bg-states-empty-bg-pressed{background-color:var(--color-states-empty-bg-pressed)}.bg-states-negative-pressed{background-color:var(--color-states-negative-pressed)}.bg-surface-on-body{background-color:var(--color-surface-on-body)}.px-16{padding-left:1rem;padding-right:1rem}.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-2{color:var(--color-negative-negative-2)}.text-text-disabled{color:var(--color-text-disabled)}.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)}.outline-none{outline:2px solid transparent;outline-offset:2px}.hover\:bg-states-empty-bg-hover:hover{background-color:var(--color-states-empty-bg-hover)}.hover\:bg-states-negative-hover:hover{background-color:var(--color-states-negative-hover)}.active\:bg-states-empty-bg-pressed:active{background-color:var(--color-states-empty-bg-pressed)}.active\:bg-states-negative-pressed:active{background-color:var(--color-states-negative-pressed)}.max-h-\[260px\]{max-height:260px}.w-full{width:100%}.overflow-auto{overflow:auto}.rounded-sm{border-radius:.75rem}.border-line-general{border-color:var(--color-line-general)}.bg-surface-body{background-color:var(--color-surface-body)}.px-24{padding-left:1.5rem;padding-right:1.5rem}.py-12{padding-bottom:.75rem;padding-top:.75rem}.py-16{padding-bottom:1rem;padding-top:1rem}.text-text-brand{color:var(--color-text-brand)}
+*,: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}.outline{outline-style:solid}:host{display:block}.chip-focus{outline:2px solid var(--color-feedback-informational)!important;outline-offset:2px!important}.chip-opened{box-shadow:0 0 0 2px hsla(0,0%,8%,.102)}: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:#012b15;--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:#330d00;--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:#402705;--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:#401204;--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:#402301;--color-gray-50:#fff;--color-gray-100:#f3f4f4;--color-gray-200:#e5e6e6;--color-gray-300:#bfc0c0;--color-gray-400:#acaeae;--color-gray-500:#949595;--color-gray-600:#737575;--color-gray-700:#6c6e6e;--color-gray-800:#313333;--color-gray-900:#272929;--color-gray-950:#191d1d;--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:#071e40;--color-extra-color-blue-light:#e7f0f4;--color-extra-color-blue-dark:#162931;--color-black-opacity-50:rgba(25,29,29,.02);--color-black-opacity-100:rgba(25,29,29,.05);--color-black-opacity-200:rgba(25,29,29,.11);--color-black-opacity-300:rgba(25,29,29,.28);--color-black-opacity-400:rgba(25,29,29,.36);--color-black-opacity-500:rgba(25,29,29,.44);--color-black-opacity-600:rgba(25,29,29,.62);--color-black-opacity-700:rgba(25,29,29,.64);--color-black-opacity-800:rgba(25,29,29,.72);--color-black-opacity-900:rgba(25,29,29,.8);--color-black-opacity-950:rgba(25,29,29,.96);--color-shadow-opacity-50:rgba(0,0,0,.04);--color-shadow-opacity-100:rgba(0,0,0,.06);--color-shadow-opacity-200:rgba(0,0,0,.12);--color-shadow-opacity-300:rgba(0,0,0,.2);--color-shadow-opacity-400:rgba(0,0,0,.32);--color-shadow-opacity-500:rgba(0,0,0,.5);--color-shadow-opacity-600:rgba(0,0,0,.55);--color-shadow-opacity-700:rgba(0,0,0,.64);--color-shadow-opacity-800:rgba(0,0,0,.73);--color-shadow-opacity-900:rgba(0,0,0,.8);--color-shadow-opacity-950:rgba(0,0,0,.91);--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:#f3f4f4;--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:#313333;--color-text-secondary:#6c6e6e;--color-text-disabled:#949595;--color-text-link:#1355b4;--color-states-empty-bg-hover:rgba(25,29,29,.05);--color-states-empty-bg-pressed:rgba(25,29,29,.11);--color-states-bg-disabled:rgba(25,29,29,.02);--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:#e5e6e6;--color-states-negative-pressed:#bfc0c0;--color-icon-primary:#6c6e6e;--color-icon-secondary:#fff;--color-icon-tertiary:#b30404;--color-icon-disabled:#acaeae;--color-neutral-neutral-1:#fff;--color-neutral-neutral-2:#f3f4f4;--color-neutral-neutral-3:#acaeae;--color-neutral-neutral-4:#949595;--color-neutral-neutral-5:#737575;--color-neutral-neutral-6:#6c6e6e;--color-neutral-neutral-7:#313333;--color-neutral-neutral-8:#272929;--color-negative-negative-1:#fff;--color-negative-negative-2:#313333;--color-opacity-body:#fffc;--color-opacity-on-body:rgba(25,29,29,.02);--color-opacity-overlay:rgba(25,29,29,.62);--color-opacity-on-overlay:#ffffff1a;--color-line-input:#949595;--color-line-general-strong:#bfc0c0;--color-line-general:#e5e6e6;--color-line-hair:rgba(25,29,29,.05);--color-box-shadow-body:#fff;--color-box-shadow-shadow-color-1:rgba(0,0,0,.04);--color-box-shadow-shadow-color-2:rgba(0,0,0,.06)}.static{position:static}.absolute{position:absolute}.relative{position:relative}.left-0{left:0}.top-40{top:2.5rem}.z-50{z-index:50}.ml-8{margin-left:.5rem}.flex{display:flex}.min-h-40{min-height:2.5rem}.w-fit{width:fit-content}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-xxl{border-radius:18.75rem}.border{border-width:1px}.border-line-input{border-color:var(--color-line-input)}.bg-brand-primary{background-color:var(--color-brand-primary)}.bg-negative-negative-1{background-color:var(--color-negative-negative-1)}.bg-states-bg-disabled{background-color:var(--color-states-bg-disabled)}.bg-states-empty-bg-pressed{background-color:var(--color-states-empty-bg-pressed)}.bg-states-negative-pressed{background-color:var(--color-states-negative-pressed)}.bg-surface-on-body{background-color:var(--color-surface-on-body)}.px-16{padding-left:1rem;padding-right:1rem}.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)}.text-negative-negative-2{color:var(--color-negative-negative-2)}.text-text-disabled{color:var(--color-text-disabled)}.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)}.outline-none{outline:2px solid transparent;outline-offset:2px}.hover\:bg-states-empty-bg-hover:hover{background-color:var(--color-states-empty-bg-hover)}.hover\:bg-states-negative-hover:hover{background-color:var(--color-states-negative-hover)}.active\:bg-states-empty-bg-pressed:active{background-color:var(--color-states-empty-bg-pressed)}.active\:bg-states-negative-pressed:active{background-color:var(--color-states-negative-pressed)}.max-h-\[260px\]{max-height:260px}.w-full{width:100%}.overflow-auto{overflow:auto}.rounded-sm{border-radius:.75rem}.border-line-general{border-color:var(--color-line-general)}.bg-surface-body{background-color:var(--color-surface-body)}.px-24{padding-left:1.5rem;padding-right:1.5rem}.py-12{padding-bottom:.75rem;padding-top:.75rem}.py-16{padding-bottom:1rem;padding-top:1rem}.text-text-brand{color:var(--color-text-brand)}

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

@@ -18,6 +18,10 @@ export class SulaChip {
          * Items for list
          */
         this.items = [];
+        /**
+         * Chip is selected
+         */
+        this.selected = false;
         this.isFocused = false;
         this.showItems = false;
         this.handleFocus = () => {
@@ -63,20 +67,22 @@ export class SulaChip {
         }
     }
     render() {
-        return (h(Host, { key: '6d1b92a6fda24fde41243d60571f6ef34fefd79e', ref: node => (this.node = node) }, h("div", { key: 'ad1ed1703e015a284fd315364ed3fb70b65c6b25', class: "w-fit relative" }, h("div", { key: 'fc717fc929968ffe49438a88012d7c11f9ac4e20', class: {
+        return (h(Host, { key: '4ce6ddbbacc4244deb57208be164f388476f96b6', ref: node => (this.node = node) }, h("div", { key: '09f9a30a050938dae1a783de76367bd0bd96f50c', class: "w-fit relative" }, h("div", { key: '53d65bf23d328ee7c5893097e2a31ab36ef2e97c', class: {
                 'flex justify-center items-center px-16 py-2 rounded-xxl min-h-40 w-fit outline-none': true,
-                'bg-surface-on-body hover:bg-states-empty-bg-hover active:bg-states-empty-bg-pressed': this.appearance === SulaChipAppearance.Default && !this.disabled,
-                'bg-negative-negative-1 hover:bg-states-negative-hover active:bg-states-negative-pressed': this.appearance === SulaChipAppearance.Negative && !this.disabled,
+                'bg-surface-on-body hover:bg-states-empty-bg-hover active:bg-states-empty-bg-pressed': this.appearance === SulaChipAppearance.Default && !this.disabled && !this.selected,
+                'bg-brand-primary': this.selected && !this.disabled,
+                'bg-negative-negative-1 hover:bg-states-negative-hover active:bg-states-negative-pressed': this.appearance === SulaChipAppearance.Negative && !this.disabled && !this.selected,
                 'bg-states-bg-disabled cursor-not-allowed': this.disabled,
                 'cursor-pointer': !this.disabled,
                 'border border-line-input chip-opened': !this.disabled && this.showItems,
                 'chip-focus': this.isFocused,
-            }, tabIndex: 0, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("span", { key: 'e08903b3bcd3e101aeec7f2deb9213636818682a', class: {
+            }, tabIndex: 0, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("span", { key: 'ab94ad10eef369aca2dc62fb41345a3bd25ac15c', class: {
                 'text-base font-bold leading-4': true,
-                'text-text-primary': this.appearance === SulaChipAppearance.Default && !this.disabled,
-                'text-negative-negative-2': this.appearance === SulaChipAppearance.Negative && !this.disabled,
+                'text-text-primary': this.appearance === SulaChipAppearance.Default && !this.disabled && !this.selected,
+                'text-negative-negative-2': this.appearance === SulaChipAppearance.Negative && !this.disabled && !this.selected,
+                'text-negative-negative-1': this.selected && !this.disabled,
                 'text-text-disabled': this.disabled,
-            } }, this.text), this.items.length > 0 && (h("div", { key: 'bf169918f272474e80295c1685bdc081e52b0659', class: "flex items-center justify-center ml-8 leading-4" }, h("sula-icon", { key: '4725462c18f295d2bdfd2ac878af6f28329c43ae', icon: `ph-bold ph-caret-${this.showItems ? 'up' : 'down'}`, customClass: this.getIconClass() })))), this.showItems && (h("div", { key: 'f4ed2a67fcaebafb80e2a308f9e3949814ec791d', class: "absolute z-50 top-40 left-0" }, h("sula-menu-select-list", { key: '03b02174a28fd59aa5dbab6c773c15a4d6bdc91e', items: this.items, onItemSelected: this.handleItemSelected }))))));
+            } }, this.text), this.items.length > 0 && (h("div", { key: '71e7f0156e20c26c0d7ff382fbcebd64cfee9c2d', class: "flex items-center justify-center ml-8 leading-4" }, h("sula-icon", { key: '5f2ae8918360c3272f747321db7c6f18439a365f', icon: `ph-bold ph-caret-${this.showItems ? 'up' : 'down'}`, customClass: this.getIconClass() })))), this.showItems && (h("div", { key: 'ac7f4d93375825d1a8fb8e1b065dabc71978ee29', class: "absolute z-50 top-40 left-0" }, h("sula-menu-select-list", { key: '21a55a038bae34507667610e5c2288a8467a3345', items: this.items, onItemSelected: this.handleItemSelected }))))));
     }
     static get is() { return "sula-chip"; }
     static get encapsulation() { return "shadow"; }
@@ -182,6 +188,26 @@ export class SulaChip {
                 "getter": false,
                 "setter": false,
                 "defaultValue": "[]"
+            },
+            "selected": {
+                "type": "boolean",
+                "attribute": "selected",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Chip is selected"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"sula-chip.js","sourceRoot":"","sources":["../../../src/components/sula-chip/sula-chip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Host, Listen, Prop, State, h } from '@stencil/core';\nimport { SulaMenuListItem } from '../sula-menu-select-list/model/sula-menu-select-list.model';\nimport { SulaChipAppearance } from './model/sula-chip.model';\nimport { SulaMenuSelectListCustomEvent } from '../../components';\n\n@Component({\n  tag: 'sula-chip',\n  styleUrl: 'sula-chip.scss',\n  shadow: true,\n})\nexport class SulaChip {\n  /**\n   * Chip text\n   */\n  @Prop({ mutable: true })\n  text: string = '';\n\n  /**\n   * Chip appearance\n   */\n  @Prop({ mutable: true })\n  appearance: SulaChipAppearance = SulaChipAppearance.Default;\n\n  /**\n   * Chip is disabled\n   */\n  @Prop({ mutable: true })\n  disabled: boolean = false;\n\n  /**\n   * Items for list\n   */\n  @Prop({ mutable: true })\n  items: SulaMenuListItem[] = [];\n\n  /**\n   * Event emitted when chip is clicked\n   */\n  @Event()\n  itemClicked: EventEmitter<void>;\n\n  /**\n   * Event emitted when item is selected\n   */\n  @Event()\n  menuItemSelected: EventEmitter<SulaMenuListItem>;\n\n  @State()\n  isFocused = false;\n\n  @State()\n  showItems = false;\n\n  node?: HTMLElement;\n\n  @Listen('click', { target: 'document' })\n  handleDocumentClick(event: Event) {\n    if (!this.node) return;\n\n    const clickInside = this.node.contains(event.target as Node);\n\n    if (!clickInside) {\n      this.showItems = false;\n    }\n  }\n\n  handleFocus = () => {\n    if (this.disabled) return;\n    this.isFocused = true;\n  };\n\n  handleBlur = () => {\n    if (this.disabled) return;\n    this.isFocused = false;\n  };\n\n  handleClick = () => {\n    if (this.disabled) return;\n\n    this.itemClicked.emit();\n\n    if (this.items.length > 0) {\n      this.showItems = !this.showItems;\n      this.isFocused = false;\n    }\n  };\n\n  handleItemSelected = (item: SulaMenuSelectListCustomEvent<SulaMenuListItem>) => {\n    this.menuItemSelected.emit(item.detail);\n    this.showItems = false;\n  };\n\n  getIconClass() {\n    if (this.disabled) return 'text-text-disabled';\n\n    if (this.appearance === SulaChipAppearance.Default) {\n      return 'text-text-primary';\n    } else {\n      return 'text-negative-negative-2';\n    }\n  }\n\n  render() {\n    return (\n      <Host ref={node => (this.node = node)}>\n        <div class=\"w-fit relative\">\n          <div\n            class={{\n              'flex justify-center items-center px-16 py-2 rounded-xxl min-h-40 w-fit outline-none': true,\n              'bg-surface-on-body hover:bg-states-empty-bg-hover active:bg-states-empty-bg-pressed': this.appearance === SulaChipAppearance.Default && !this.disabled,\n              'bg-negative-negative-1 hover:bg-states-negative-hover active:bg-states-negative-pressed': this.appearance === SulaChipAppearance.Negative && !this.disabled,\n              'bg-states-bg-disabled cursor-not-allowed': this.disabled,\n              'cursor-pointer': !this.disabled,\n              'border border-line-input chip-opened': !this.disabled && this.showItems,\n              'chip-focus': this.isFocused,\n            }}\n            tabIndex={0}\n            onClick={this.handleClick}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          >\n            <span\n              class={{\n                'text-base font-bold leading-4': true,\n                'text-text-primary': this.appearance === SulaChipAppearance.Default && !this.disabled,\n                'text-negative-negative-2': this.appearance === SulaChipAppearance.Negative && !this.disabled,\n                'text-text-disabled': this.disabled,\n              }}\n            >\n              {this.text}\n            </span>\n\n            {this.items.length > 0 && (\n              <div class=\"flex items-center justify-center ml-8 leading-4\">\n                <sula-icon icon={`ph-bold ph-caret-${this.showItems ? 'up' : 'down'}`} customClass={this.getIconClass()}></sula-icon>\n              </div>\n            )}\n          </div>\n          {this.showItems && (\n            <div class=\"absolute z-50 top-40 left-0\">\n              <sula-menu-select-list items={this.items} onItemSelected={this.handleItemSelected}></sula-menu-select-list>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"sula-chip.js","sourceRoot":"","sources":["../../../src/components/sula-chip/sula-chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAE7F,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAQ7D,MAAM,OAAO,QAAQ;IALrB;QAME;;WAEG;QAEH,SAAI,GAAW,EAAE,CAAC;QAElB;;WAEG;QAEH,eAAU,GAAuB,kBAAkB,CAAC,OAAO,CAAC;QAE5D;;WAEG;QAEH,aAAQ,GAAY,KAAK,CAAC;QAE1B;;WAEG;QAEH,UAAK,GAAuB,EAAE,CAAC;QAE/B;;WAEG;QAEH,aAAQ,GAAY,KAAK,CAAC;QAe1B,cAAS,GAAG,KAAK,CAAC;QAGlB,cAAS,GAAG,KAAK,CAAC;QAelB,gBAAW,GAAG,GAAG,EAAE;YACjB,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACxB,CAAC,CAAC;QAEF,eAAU,GAAG,GAAG,EAAE;YAChB,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC,CAAC;QAEF,gBAAW,GAAG,GAAG,EAAE;YACjB,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;YAExB,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAC1B,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;gBACjC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACzB,CAAC;QACH,CAAC,CAAC;QAEF,uBAAkB,GAAG,CAAC,IAAqD,EAAE,EAAE;YAC7E,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YACxC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC,CAAC;KA6DH;IA/FC,mBAAmB,CAAC,KAAY;QAC9B,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO;QAEvB,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,CAAC;QAE7D,IAAI,CAAC,WAAW,EAAE,CAAC;YACjB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC;IACH,CAAC;IA4BD,YAAY;QACV,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO,oBAAoB,CAAC;QAE/C,IAAI,IAAI,CAAC,UAAU,KAAK,kBAAkB,CAAC,OAAO,EAAE,CAAC;YACnD,OAAO,mBAAmB,CAAC;QAC7B,CAAC;aAAM,CAAC;YACN,OAAO,0BAA0B,CAAC;QACpC,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,GAAG,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;YACnC,4DAAK,KAAK,EAAC,gBAAgB;gBACzB,4DACE,KAAK,EAAE;wBACL,qFAAqF,EAAE,IAAI;wBAC3F,qFAAqF,EACnF,IAAI,CAAC,UAAU,KAAK,kBAAkB,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;wBACpF,kBAAkB,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;wBACnD,yFAAyF,EACvF,IAAI,CAAC,UAAU,KAAK,kBAAkB,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;wBACrF,0CAA0C,EAAE,IAAI,CAAC,QAAQ;wBACzD,gBAAgB,EAAE,CAAC,IAAI,CAAC,QAAQ;wBAChC,sCAAsC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS;wBACxE,YAAY,EAAE,IAAI,CAAC,SAAS;qBAC7B,EACD,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU;oBAEvB,6DACE,KAAK,EAAE;4BACL,+BAA+B,EAAE,IAAI;4BACrC,mBAAmB,EAAE,IAAI,CAAC,UAAU,KAAK,kBAAkB,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;4BACvG,0BAA0B,EAAE,IAAI,CAAC,UAAU,KAAK,kBAAkB,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;4BAC/G,0BAA0B,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;4BAC3D,oBAAoB,EAAE,IAAI,CAAC,QAAQ;yBACpC,IAEA,IAAI,CAAC,IAAI,CACL;oBAEN,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CACxB,4DAAK,KAAK,EAAC,iDAAiD;wBAC1D,kEAAW,IAAI,EAAE,oBAAoB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,EAAE,EAAE,WAAW,EAAE,IAAI,CAAC,YAAY,EAAE,GAAc,CACjH,CACP,CACG;gBACL,IAAI,CAAC,SAAS,IAAI,CACjB,4DAAK,KAAK,EAAC,6BAA6B;oBACtC,8EAAuB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,cAAc,EAAE,IAAI,CAAC,kBAAkB,GAA0B,CACvG,CACP,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, Host, Listen, Prop, State, h } from '@stencil/core';\nimport { SulaMenuListItem } from '../sula-menu-select-list/model/sula-menu-select-list.model';\nimport { SulaChipAppearance } from './model/sula-chip.model';\nimport { SulaMenuSelectListCustomEvent } from '../../components';\n\n@Component({\n  tag: 'sula-chip',\n  styleUrl: 'sula-chip.scss',\n  shadow: true,\n})\nexport class SulaChip {\n  /**\n   * Chip text\n   */\n  @Prop({ mutable: true })\n  text: string = '';\n\n  /**\n   * Chip appearance\n   */\n  @Prop({ mutable: true })\n  appearance: SulaChipAppearance = SulaChipAppearance.Default;\n\n  /**\n   * Chip is disabled\n   */\n  @Prop({ mutable: true })\n  disabled: boolean = false;\n\n  /**\n   * Items for list\n   */\n  @Prop({ mutable: true })\n  items: SulaMenuListItem[] = [];\n\n  /**\n   * Chip is selected\n   */\n  @Prop({ mutable: true })\n  selected: boolean = false;\n\n  /**\n   * Event emitted when chip is clicked\n   */\n  @Event()\n  itemClicked: EventEmitter<void>;\n\n  /**\n   * Event emitted when item is selected\n   */\n  @Event()\n  menuItemSelected: EventEmitter<SulaMenuListItem>;\n\n  @State()\n  isFocused = false;\n\n  @State()\n  showItems = false;\n\n  node?: HTMLElement;\n\n  @Listen('click', { target: 'document' })\n  handleDocumentClick(event: Event) {\n    if (!this.node) return;\n\n    const clickInside = this.node.contains(event.target as Node);\n\n    if (!clickInside) {\n      this.showItems = false;\n    }\n  }\n\n  handleFocus = () => {\n    if (this.disabled) return;\n    this.isFocused = true;\n  };\n\n  handleBlur = () => {\n    if (this.disabled) return;\n    this.isFocused = false;\n  };\n\n  handleClick = () => {\n    if (this.disabled) return;\n\n    this.itemClicked.emit();\n\n    if (this.items.length > 0) {\n      this.showItems = !this.showItems;\n      this.isFocused = false;\n    }\n  };\n\n  handleItemSelected = (item: SulaMenuSelectListCustomEvent<SulaMenuListItem>) => {\n    this.menuItemSelected.emit(item.detail);\n    this.showItems = false;\n  };\n\n  getIconClass() {\n    if (this.disabled) return 'text-text-disabled';\n\n    if (this.appearance === SulaChipAppearance.Default) {\n      return 'text-text-primary';\n    } else {\n      return 'text-negative-negative-2';\n    }\n  }\n\n  render() {\n    return (\n      <Host ref={node => (this.node = node)}>\n        <div class=\"w-fit relative\">\n          <div\n            class={{\n              'flex justify-center items-center px-16 py-2 rounded-xxl min-h-40 w-fit outline-none': true,\n              'bg-surface-on-body hover:bg-states-empty-bg-hover active:bg-states-empty-bg-pressed':\n                this.appearance === SulaChipAppearance.Default && !this.disabled && !this.selected,\n              'bg-brand-primary': this.selected && !this.disabled,\n              'bg-negative-negative-1 hover:bg-states-negative-hover active:bg-states-negative-pressed':\n                this.appearance === SulaChipAppearance.Negative && !this.disabled && !this.selected,\n              'bg-states-bg-disabled cursor-not-allowed': this.disabled,\n              'cursor-pointer': !this.disabled,\n              'border border-line-input chip-opened': !this.disabled && this.showItems,\n              'chip-focus': this.isFocused,\n            }}\n            tabIndex={0}\n            onClick={this.handleClick}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          >\n            <span\n              class={{\n                'text-base font-bold leading-4': true,\n                'text-text-primary': this.appearance === SulaChipAppearance.Default && !this.disabled && !this.selected,\n                'text-negative-negative-2': this.appearance === SulaChipAppearance.Negative && !this.disabled && !this.selected,\n                'text-negative-negative-1': this.selected && !this.disabled,\n                'text-text-disabled': this.disabled,\n              }}\n            >\n              {this.text}\n            </span>\n\n            {this.items.length > 0 && (\n              <div class=\"flex items-center justify-center ml-8 leading-4\">\n                <sula-icon icon={`ph-bold ph-caret-${this.showItems ? 'up' : 'down'}`} customClass={this.getIconClass()}></sula-icon>\n              </div>\n            )}\n          </div>\n          {this.showItems && (\n            <div class=\"absolute z-50 top-40 left-0\">\n              <sula-menu-select-list items={this.items} onItemSelected={this.handleItemSelected}></sula-menu-select-list>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -28,6 +28,14 @@ export default {
                 required: false,
             },
         },
+        selected: {
+            control: 'boolean',
+            defaultValue: false,
+            description: 'Is chip selected',
+            type: {
+                required: false,
+            },
+        },
         items: {
             control: 'object',
             defaultValue: [],
@@ -61,6 +69,8 @@ const Template = args => {
         el.setAttribute('text', args.text);
     el.setAttribute('appearance', args.appearance);
     el.setAttribute('disabled', args.disabled.toString());
+    if (args.selected)
+        el.setAttribute('selected', args.selected.toString());
     if (args.items && args.items.length > 0) {
         el.items = args.items;
     }
@@ -88,6 +98,15 @@ DisabledChip.args = {
     text: 'Disabled Chip',
     appearance: SulaChipAppearance.Default,
     disabled: true,
+    selected: false,
+    items: [],
+};
+export const SelectedChip = Template.bind({});
+SelectedChip.args = {
+    text: 'Selected Chip',
+    appearance: SulaChipAppearance.Default,
+    disabled: false,
+    selected: true,
     items: [],
 };
 export const ChipWithDropdown = Template.bind({});
@@ -95,6 +114,7 @@ ChipWithDropdown.args = {
     text: 'Chip with Options',
     appearance: SulaChipAppearance.Default,
     disabled: false,
+    selected: false,
     items: [
         { id: '1', title: 'Option 1' },
         { id: '2', title: 'Option 2' },
@@ -106,6 +126,7 @@ NegativeChipWithDropdown.args = {
     text: 'Negative with Options',
     appearance: SulaChipAppearance.Negative,
     disabled: false,
+    selected: false,
     items: [
         { id: '1', title: 'Remove Item 1' },
         { id: '2', title: 'Remove Item 2' },
@@ -117,6 +138,7 @@ DisabledChipWithItems.args = {
     text: 'Disabled with Items',
     appearance: SulaChipAppearance.Default,
     disabled: true,
+    selected: false,
     items: [
         { id: '1', title: 'Option 1' },
         { id: '2', title: 'Option 2' },