@aquera/nile-elements 0.0.74 → 0.0.76

package/dist/index.iife.js

@@ -1894,6 +1894,7 @@ const rN=Symbol.for(""),xN=M=>{if((null==M?void 0:M.r)===rN)return null==M?void
     `}},M.NileBadge.styles=VN,N([$M({reflect:!0})],M.NileBadge.prototype,"variant",void 0),N([$M({type:Boolean,reflect:!0})],M.NileBadge.prototype,"rounded",void 0),N([$M({reflect:!0})],M.NileBadge.prototype,"pilltype",void 0),M.NileBadge=N([FM("nile-badge")],M.NileBadge);const FN=new Map,HN=new WeakMap;function XN(M,N){return"rtl"===N.toLowerCase()?{keyframes:M.rtlKeyframes||M.keyframes,options:M.options}:M}function $N(M,N){FN.set(M,function(M){return M??{keyframes:[],options:{duration:0}}}(N))}function _N(M,N,D){const i=HN.get(M);if(i?.[N])return XN(i[N],D.dir);const j=FN.get(N);return j?XN(j,D.dir):{keyframes:[],options:{duration:0}}}const qN=new Set;function KN(M){if(qN.add(M),!document.body.classList.contains("nile-scroll-lock")){const M=function(){const M=document.documentElement.clientWidth;return Math.abs(window.innerWidth-M)}();document.body.classList.add("nile-scroll-lock"),document.body.style.setProperty("--nile-scroll-lock-size",`${M}px`)}}function MD(M){qN.delete(M),0===qN.size&&(document.body.classList.remove("nile-scroll-lock"),document.body.style.removeProperty("--nile-scroll-lock-size"))}function ND(M,N,D="vertical",i="smooth"){const j=function(M,N){return{top:Math.round(M.getBoundingClientRect().top-N.getBoundingClientRect().top),left:Math.round(M.getBoundingClientRect().left-N.getBoundingClientRect().left)}}(M,N),t=j.top+N.scrollTop,I=j.left+N.scrollLeft,z=N.scrollLeft,u=N.scrollLeft+N.offsetWidth,g=N.scrollTop,e=N.scrollTop+N.offsetHeight;"horizontal"!==D&&"both"!==D||(I<z?N.scrollTo({left:I,behavior:i}):I+M.clientWidth>u&&N.scrollTo({left:I-N.offsetWidth+M.clientWidth,behavior:i})),"vertical"!==D&&"both"!==D||(t<g?N.scrollTo({top:t,behavior:i}):t+M.clientHeight>e&&N.scrollTo({top:t-N.offsetHeight+M.clientHeight,behavior:i}))}function DD(M){return M.charAt(0).toUpperCase()+M.slice(1)}function iD(M,N){return new Promise((D=>{M.addEventListener(N,(function i(j){j.target===M&&(M.removeEventListener(N,i),D())}))}))}function jD(M){const N=M.tagName.toLowerCase();return"-1"!==M.getAttribute("tabindex")&&(!M.hasAttribute("disabled")&&((!M.hasAttribute("aria-disabled")||"false"===M.getAttribute("aria-disabled"))&&(!("input"===N&&"radio"===M.getAttribute("type")&&!M.hasAttribute("checked"))&&(null!==M.offsetParent&&("hidden"!==window.getComputedStyle(M).visibility&&(!("audio"!==N&&"video"!==N||!M.hasAttribute("controls"))||(!!M.hasAttribute("tabindex")||(!(!M.hasAttribute("contenteditable")||"false"===M.getAttribute("contenteditable"))||["button","input","select","textarea","a","audio","video","summary"].includes(N)))))))))}function tD(M){const N=[];!function M(D){D instanceof HTMLElement&&(N.push(D),null!==D.shadowRoot&&"open"===D.shadowRoot.mode&&M(D.shadowRoot)),[...D.children].forEach((N=>M(N)))}(M);return{start:N.find((M=>jD(M)))??null,end:N.reverse().find((M=>jD(M)))??null}}let ID=[];class zD{constructor(M){this.tabDirection="forward",this.element=M,this.handleFocusIn=this.handleFocusIn.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleKeyUp=this.handleKeyUp.bind(this)}activate(){ID.push(this.element),document.addEventListener("focusin",this.handleFocusIn),document.addEventListener("keydown",this.handleKeyDown),document.addEventListener("keyup",this.handleKeyUp)}deactivate(){ID=ID.filter((M=>M!==this.element)),document.removeEventListener("focusin",this.handleFocusIn),document.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("keyup",this.handleKeyUp)}isActive(){return ID[ID.length-1]===this.element}checkFocus(){if(this.isActive()&&!this.element.matches(":focus-within")){const{start:M,end:N}=tD(this.element),D="forward"===this.tabDirection?M:N;"function"==typeof D?.focus&&D.focus({preventScroll:!0})}}handleFocusIn(){this.checkFocus()}handleKeyDown(M){"Tab"===M.key&&M.shiftKey&&(this.tabDirection="backward",requestAnimationFrame((()=>this.checkFocus())))}handleKeyUp(){this.tabDirection="forward"}}var uD=[z`
   :host {
     box-sizing: border-box;
+    --nile-drawer-remove-icon-color:#000;
   }
 
   :host *,
@@ -2053,6 +2054,10 @@ const rN=Symbol.for(""),xN=M=>{if((null==M?void 0:M.r)===rN)return null==M?void
     display: none;
   }
 
+  .drawer__close:hover {
+    cursor:pointer;
+  }
+
   @media (forced-colors: active) {
     .drawer__panel {
       border: solid 1px hsl(0, 0%, 100%);
@@ -2063,7 +2068,12 @@ const rN=Symbol.for(""),xN=M=>{if((null==M?void 0:M.r)===rN)return null==M?void
         part="base"
         class=${uN({drawer:!0,"drawer--open":this.open,"drawer--top":"top"===this.placement,"drawer--end":"end"===this.placement,"drawer--bottom":"bottom"===this.placement,"drawer--start":"start"===this.placement,"drawer--contained":this.contained,"drawer--fixed":!this.contained,"drawer--rtl":"rtl","drawer--has-footer":this.hasSlotController.test("footer")})}
       >
-        <div part="overlay" class="drawer__overlay" @click=${()=>this.requestClose("overlay")} tabindex="-1"></div>
+        <div
+          part="overlay"
+          class="drawer__overlay"
+          @click=${()=>this.requestClose("overlay")}
+          tabindex="-1"
+        ></div>
 
         <div
           part="panel"
@@ -2079,19 +2089,21 @@ const rN=Symbol.for(""),xN=M=>{if((null==M?void 0:M.r)===rN)return null==M?void
                 <header part="header" class="drawer__header">
                   <h2 part="title" class="drawer__title" id="title">
                     <!-- If there's no label, use an invisible character to prevent the header from collapsing -->
-                    <slot name="label"> ${this.label.length>0?this.label:String.fromCharCode(65279)} </slot>
+                    <slot name="label">
+                      ${this.label.length>0?this.label:String.fromCharCode(65279)}
+                    </slot>
                   </h2>
                   <div part="header-actions" class="drawer__header-actions">
                     <slot name="header-actions"></slot>
-                    <nile-icon-button
-                      part="close-button"
-                      exportparts="base:close-button__base"
+                    <nile-icon
                       class="drawer__close"
                       name="close"
-                      label='close'
-                      library="system"
+                      label="close"
+                      part="close-button"
+                      exportparts="base:close-button__base"
+                      color="var(--nile-drawer-remove-icon-color)"
                       @click=${()=>this.requestClose("close-button")}
-                    ></nile-icon-button>
+                    ></nile-icon>
                   </div>
                 </header>
               `}
@@ -2107,25 +2119,26 @@ const rN=Symbol.for(""),xN=M=>{if((null==M?void 0:M.r)===rN)return null==M?void
   :host {
     display: inline-block;
   }
-
+ 
   :host(.full-width) {
     width: 100%;
   }
-
+ 
   .checkbox {
     position: relative;
     display: inline-flex;
-    align-items: stretch;
+    align-items: top;
     font-weight: 400;
     color: var(--nile-colors-dark-900);
     vertical-align: middle;
     cursor: pointer;
   }
-
-  .checkbox--only__subtitle{
-    align-items: center;
+ 
+  .checkbox--medium {
+    --toggle-size: var(--nile-type-scale-3);
+    font-size: var(--nile-type-scale-3);
   }
-
+ 
   .checkbox__control {
     flex: 0 0 auto;
     position: relative;
@@ -2136,13 +2149,13 @@ const rN=Symbol.for(""),xN=M=>{if((null==M?void 0:M.r)===rN)return null==M?void
     height: var(--nile-type-scale-3);
     border: solid 1px var(--nile-checkbox-color-border-standard);
     background-color: var(--nile-checkbox-color-background-standard);
-    border-radius: 3px;
+    border-radius: 4px;
     transition: var(--nile-transition-duration-default border-color),
       var(--nile-transition-duration-default) background-color,
       var(--nile-transition-duration-default) color,
       var(--nile-transition-duration-default box-shadow);
   }
-
+ 
   .checkbox__input {
     position: absolute;
     opacity: 0;
@@ -2150,11 +2163,11 @@ const rN=Symbol.for(""),xN=M=>{if((null==M?void 0:M.r)===rN)return null==M?void
     margin: 0;
     pointer-events: none;
   }
-
+ 
   /* svg {
       display:none !important;
   } */
-
+ 
   /* Hover */
   .checkbox:not(.checkbox--checked):not(.checkbox--disabled)
     .checkbox__control:hover {
@@ -2162,7 +2175,7 @@ const rN=Symbol.for(""),xN=M=>{if((null==M?void 0:M.r)===rN)return null==M?void
     border: 1px solid var(--nile-checkbox-color-border-hover);
     border-radius: 4px;
   }
-
+ 
   /* Focus */
   .checkbox:not(.checkbox--checked):not(.checkbox--disabled)
     .checkbox__input:focus-visible
@@ -2170,14 +2183,14 @@ const rN=Symbol.for(""),xN=M=>{if((null==M?void 0:M.r)===rN)return null==M?void
     outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);
     outline-offset: 1px;
   }
-
+ 
   /* Checked/indeterminate */
   .checkbox--checked .checkbox__control,
   .checkbox--indeterminate .checkbox__control {
     border-color: var(--nile-checkbox-color-border-checked-standard);
     background-color: var(--nile-checkbox-color-background-checked-standard);
   }
-
+ 
   /* Checked/indeterminate + hover */
   .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,
   .checkbox.checkbox--indeterminate:not(.checkbox--disabled)
@@ -2185,7 +2198,7 @@ const rN=Symbol.for(""),xN=M=>{if((null==M?void 0:M.r)===rN)return null==M?void
     background: var(--nile-checkbox-color-background-checked-hover);
     border: 1px solid var(--nile-checkbox-color-border-checked-hover);
   }
-
+ 
   /* Checked/indeterminate + focus */
   .checkbox.checkbox--checked:not(.checkbox--disabled)
     .checkbox__input:focus-visible
@@ -2196,121 +2209,100 @@ const rN=Symbol.for(""),xN=M=>{if((null==M?void 0:M.r)===rN)return null==M?void
     outline: solid 3px var(--nile-checkbox-color-outline-standard);
     outline-offset: 1px;
   }
-
+ 
   /* Disabled */
   .checkbox--disabled {
     opacity: 0.3;
     cursor: not-allowed;
   }
-
+ 
+ 
   .checkbox__label {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    font-family: var(--nile-font-family-serif);
-    margin-left: 8px;
+    display: inline-block;
+    line-height: 14px;
+    font-size: 14px;
+    margin-inline-start: 0.5em;
     user-select: none;
+    margin-top: 2px;
     color: var(--nile-colors-dark-900);
+    font-family: Colfax-regular;
     font-style: normal;
-    letter-spacing: 0.2px;
-    box-sizing: border-box;
-  }
-
-  .checkbox__icon__container{
-    display:flex;
-    align-items:center;
-  }
-
-  .checkbox__label__text {
-    display: block;
-    font-size: 14px;
-    font-weight: 500;
-    color: #344054;
-  }
-
-  .checkbox__sublabel__text {
-    display: block;
-    font-size: 14px;
     font-weight: 400;
-    line-height: 20px;
-    color: #475467;
+    letter-spacing: 0.2px;
   }
-
+ 
   :host([required]) .checkbox__label::after {
     content: '*';
     margin-inline-start: -2px;
   }
-
+ 
   .checkbox__checked-icon {
     --nile-svg-stroke: white;
   }
-
+ 
   .checkbox__indeterminate-icon {
     --nile-svg-stroke: white;
   }
-
+ 
   .checkbox__helptext-icon {
     float: right;
     cursor: pointer;
     margin-right: 12px;
   }
-`;M.NileCheckbox=class extends kN{constructor(){super(),this.hasFocus=!1,this.title="",this.name="",this.size="medium",this.disabled=!1,this.checked=!1,this.label="",this.subLabel="",this.indeterminate=!1,this.defaultChecked=!1,this.helpText="",this.errorMessage="",this.showHelpText=!1,this.form="",this.required=!1}handleClick(){this.checked=!this.checked,this.indeterminate=!1,this.dispatchEvent(new CustomEvent("valueChange",{composed:!0,bubbles:!0,detail:{checked:this.checked}}))}handleBlur(){this.hasFocus=!1,this.emit("blur")}handleInput(){this.emit("input")}handleFocus(){this.hasFocus=!0,this.emit("focus")}handleStateChange(){this.input.checked=this.checked,this.input.indeterminate=this.indeterminate}click(){this.input.click()}focus(M){this.input.focus(M)}blur(){this.input.blur()}connectedCallback(){super.connectedCallback(),this.updateHostClass(),this.emit("nile-init")}disconnectedCallback(){super.disconnectedCallback(),this.emit("nile-destroy")}updated(M){super.updated(M),M.has("helpText")&&this.updateHostClass(),this.checkboxIconContainer.style.height=this.labelContainer.scrollHeight+"px"}updateHostClass(){this.helpText?this.classList.add("full-width"):this.classList.remove("full-width")}render(){const M=!!this.helpText,N=!!this.errorMessage;return EM`
+`;M.NileCheckbox=class extends kN{constructor(){super(),this.hasFocus=!1,this.title="",this.name="",this.size="medium",this.disabled=!1,this.checked=!1,this.label="",this.indeterminate=!1,this.defaultChecked=!1,this.helpText="",this.errorMessage="",this.showHelpText=!1,this.form="",this.required=!1}toggleHelpText(){this.showHelpText=!this.showHelpText}handleClick(){this.checked=!this.checked,this.indeterminate=!1,this.dispatchEvent(new CustomEvent("valueChange",{composed:!0,bubbles:!0,detail:{checked:this.checked}}))}handleBlur(){this.hasFocus=!1,this.emit("blur")}handleInput(){this.emit("input")}handleFocus(){this.hasFocus=!0,this.emit("focus")}handleStateChange(){this.input.checked=this.checked,this.input.indeterminate=this.indeterminate}click(){this.input.click()}focus(M){this.input.focus(M)}blur(){this.input.blur()}connectedCallback(){super.connectedCallback(),this.updateHostClass(),this.emit("nile-init")}disconnectedCallback(){super.disconnectedCallback(),this.emit("nile-destroy")}updated(M){super.updated(M),M.has("helpText")&&this.updateHostClass()}updateHostClass(){this.helpText?this.classList.add("full-width"):this.classList.remove("full-width")}render(){const M=!!this.helpText,N=!!this.errorMessage;return EM`
       <label
         part="base"
-        class=${uN({checkbox:!0,"checkbox--checked":this.checked,"checkbox--disabled":this.disabled,"checkbox--focused":this.hasFocus,"checkbox--indeterminate":this.indeterminate})} 
+        class=${uN({checkbox:!0,"checkbox--checked":this.checked,"checkbox--disabled":this.disabled,"checkbox--focused":this.hasFocus,"checkbox--indeterminate":this.indeterminate,"checkbox--medium":"medium"===this.size})}
       >
-        <div class="checkbox__icon__container">
-          <span
-            part="control${this.checked?" control--checked":""}${this.indeterminate?" control--indeterminate":""}"
-            class="checkbox__control"
-          >
-            <!-- An empty title prevents browser validation tooltips from appearing on hover -->
-            <input
-              class="checkbox__input"
-              type="checkbox"
-              title=${this.title}
-              name=${this.name}
-              value=${SN(this.value)}
-              .indeterminate=${vN(this.indeterminate)}
-              .checked=${vN(this.checked)}
-              .disabled=${this.disabled}
-              .required=${this.required}
-              aria-checked=${this.checked?"true":"false"}
-              @click=${this.handleClick}
-              @input=${this.handleInput}
-              @blur=${this.handleBlur}
-              @focus=${this.handleFocus}
-            />
-            ${this.checked?EM`
-                  <nile-icon
-                    part="checked-icon"
-                    class="checkbox__checked-icon"
-                    color="white"
-                    library="system"
-                    name="tick"
-                    size="12"
-                  ></nile-icon>
-                `:""}
-            ${!this.checked&&this.indeterminate?EM`
-                  <nile-icon
-                    part="indeterminate-icon"
-                    class="checkbox__indeterminate-icon"
-                    library="system"
-                    color="white"
-                    name="minus"
-                    size="12"
-                  ></nile-icon>
-                `:""}
-          </span>
-        </div>
-
-        <div part="label" class="checkbox__label" style="${this.label||this.subLabel?"":"margin-left:0;"}">
-          ${this.label?EM`<span class="checkbox__label__text">${this.label}</span>`:""}
-          ${this.subLabel?EM`<span class="checkbox__sublabel__text">${this.subLabel}</span>`:""}
+        <input
+          class="checkbox__input"
+          type="checkbox"
+          title=${this.title}
+          name=${this.name}
+          value=${SN(this.value)}
+          .indeterminate=${vN(this.indeterminate)}
+          .checked=${vN(this.checked)}
+          .disabled=${this.disabled}
+          .required=${this.required}
+          aria-checked=${this.checked?"true":"false"}
+          @click=${this.handleClick}
+          @input=${this.handleInput}
+          @blur=${this.handleBlur}
+          @focus=${this.handleFocus}
+        />
+ 
+        <span
+          part="control${this.checked?" control--checked":""}${this.indeterminate?" control--indeterminate":""}"
+          class="checkbox__control"
+        >
+          ${this.checked?EM`
+                <nile-icon
+                  part="checked-icon"
+                  class="checkbox__checked-icon"
+                  color="white"
+                  library="system"
+                  name="tick"
+                  size="12"
+                ></nile-icon>
+              `:""}
+          ${!this.checked&&this.indeterminate?EM`
+                <nile-icon
+                  part="indeterminate-icon"
+                  class="checkbox__indeterminate-icon"
+                  library="system"
+                  color="white"
+                  name="minus"
+                  size="12"
+                ></nile-icon>
+              `:""}
+        </span>
+ 
+        <div part="label" class="checkbox__label">
+          ${"boolean"==typeof this.label?"":this.label}
           <slot></slot>
         </div>
       </label>
-
+ 
       ${M?EM`
             <nile-tooltip content="${this.helpText}" placement="bottom">
               <nile-icon
@@ -2318,9 +2310,14 @@ const rN=Symbol.for(""),xN=M=>{if((null==M?void 0:M.r)===rN)return null==M?void
                 class="checkbox__helptext-icon"
               ></nile-icon>
             </nile-tooltip>
-          `:hM}
-      ${N?EM`<nile-form-error-message>${this.errorMessage}</nile-form-error-message>`:hM}
-    `}},M.NileCheckbox.styles=gD,N([KM('input[type="checkbox"]')],M.NileCheckbox.prototype,"input",void 0),N([_M()],M.NileCheckbox.prototype,"hasFocus",void 0),N([$M()],M.NileCheckbox.prototype,"title",void 0),N([$M()],M.NileCheckbox.prototype,"name",void 0),N([$M()],M.NileCheckbox.prototype,"value",void 0),N([$M({reflect:!0})],M.NileCheckbox.prototype,"size",void 0),N([$M({type:Boolean,reflect:!0})],M.NileCheckbox.prototype,"disabled",void 0),N([$M({type:Boolean,reflect:!0})],M.NileCheckbox.prototype,"checked",void 0),N([$M({type:String,reflect:!0})],M.NileCheckbox.prototype,"label",void 0),N([$M({type:String,reflect:!0,attribute:"sub-label"})],M.NileCheckbox.prototype,"subLabel",void 0),N([$M({type:Boolean,reflect:!0})],M.NileCheckbox.prototype,"indeterminate",void 0),N([UN("checked")],M.NileCheckbox.prototype,"defaultChecked",void 0),N([$M({attribute:"help-text",reflect:!0})],M.NileCheckbox.prototype,"helpText",void 0),N([$M({attribute:"error-message",reflect:!0})],M.NileCheckbox.prototype,"errorMessage",void 0),N([$M({type:Boolean})],M.NileCheckbox.prototype,"showHelpText",void 0),N([$M({reflect:!0})],M.NileCheckbox.prototype,"form",void 0),N([$M({type:Boolean,reflect:!0})],M.NileCheckbox.prototype,"required",void 0),N([KM(".checkbox__label__text")],M.NileCheckbox.prototype,"labelContainer",void 0),N([KM("div.checkbox__icon__container")],M.NileCheckbox.prototype,"checkboxIconContainer",void 0),N([hN(["checked","indeterminate"],{waitUntilFirstUpdate:!0})],M.NileCheckbox.prototype,"handleStateChange",null),M.NileCheckbox=N([FM("nile-checkbox")],M.NileCheckbox);const eD=z`
+          `:""}
+ 
+      ${N?EM`
+            <nile-form-error-message
+              >${this.errorMessage}</nile-form-error-message
+            >
+          `:""}
+    `}},M.NileCheckbox.styles=gD,N([KM('input[type="checkbox"]')],M.NileCheckbox.prototype,"input",void 0),N([_M()],M.NileCheckbox.prototype,"hasFocus",void 0),N([$M()],M.NileCheckbox.prototype,"title",void 0),N([$M()],M.NileCheckbox.prototype,"name",void 0),N([$M()],M.NileCheckbox.prototype,"value",void 0),N([$M({reflect:!0})],M.NileCheckbox.prototype,"size",void 0),N([$M({type:Boolean,reflect:!0})],M.NileCheckbox.prototype,"disabled",void 0),N([$M({type:Boolean,reflect:!0})],M.NileCheckbox.prototype,"checked",void 0),N([$M({type:String,reflect:!0})],M.NileCheckbox.prototype,"label",void 0),N([$M({type:Boolean,reflect:!0})],M.NileCheckbox.prototype,"indeterminate",void 0),N([UN("checked")],M.NileCheckbox.prototype,"defaultChecked",void 0),N([$M({attribute:"help-text",reflect:!0})],M.NileCheckbox.prototype,"helpText",void 0),N([$M({attribute:"error-message",reflect:!0})],M.NileCheckbox.prototype,"errorMessage",void 0),N([$M({type:Boolean})],M.NileCheckbox.prototype,"showHelpText",void 0),N([$M({reflect:!0})],M.NileCheckbox.prototype,"form",void 0),N([$M({type:Boolean,reflect:!0})],M.NileCheckbox.prototype,"required",void 0),N([hN(["checked","indeterminate"],{waitUntilFirstUpdate:!0})],M.NileCheckbox.prototype,"handleStateChange",null),M.NileCheckbox=N([FM("nile-checkbox")],M.NileCheckbox);const eD=z`
   :host {
     display: block;
   }
@@ -3527,21 +3524,22 @@ const rN=Symbol.for(""),xN=M=>{if((null==M?void 0:M.r)===rN)return null==M?void
 `,di=z`
   :host {
     display: inline-block;
-    --nile-remove-icon-color: var(--nile-colors-blue-500);
   }
 
   .tag {
     display: flex;
     align-items: center;
-    justify-items: center;
-    text-align: center;
-    gap: 3px;
+    border: solid 2px;
+    line-height: 1;
     white-space: nowrap;
     user-select: none;
     border-radius: 4px;
-    box-sizing: border-box;
-    color: var(--colors-text-text-secondary-700, #344054);
-    font-family: var(--nile-font-family-serif);
+    gap: 6px;
+  }
+
+  .tag__remove::part(base) {
+    color: inherit;
+    padding: 0;
   }
 
   /*
@@ -3549,120 +3547,101 @@ const rN=Symbol.for(""),xN=M=>{if((null==M?void 0:M.r)===rN)return null==M?void
    */
 
   .tag--primary {
-    background: #005ea6;
-    color: #fff;
-    --nile-remove-icon-color: var(--nile-colors-blue-500);
+    background: #005EA6;
+    border-color: #005EA6;
+    border: 2px solid  #005EA6;
+    color: #FFF;
   }
 
   .tag--primary:hover {
-    outline: 2px solid rgba(0, 94, 166, 0.5);
+    border: 2px solid rgba(0, 94, 166, 0.50);
   }
 
-  .tag--primary:active > nile-icon {
+  .tag--primary:active > nile-icon-button {
     color: hsl(200.4 98% 39.4%);
   }
 
   .tag--success {
-    background: #a5f3e1;
+    background: #A5F3E1;
+    border: 2px solid #A5F3E1;
     color: #000;
-    --nile-remove-icon-color: var(--nile-colors-green-500);
   }
 
   .tag--success:hover {
-    outline: 2px solid #43e5c0;
+    border: 2px solid #43E5C0;
   }
 
-  .tag--success:active > nile-icon {
+  .tag--success:active > nile-icon-button {
     color: hsl(142.1 76.2% 36.3%);
   }
 
   .tag--normal {
-    background: #e5e9eb;
+    background: #E5E9EB;
+    border: 2px solid #E5E9EB;
     color: #000;
-    --nile-remove-icon-color: var(--nile-colors-dark-500);
   }
 
   .tag--normal:hover {
-    outline: 2px solid #c7ced4;
+    border: 2px solid #C7CED4;
   }
 
-  .tag--normal:active > nile-icon {
+
+  .tag--normal:active > nile-icon-button {
     color: hsl(240 5.2% 33.9%);
   }
 
   .tag--warning {
-    background: #f3e0a5;
+    background: #F3E0A5;
+    border: 2px solid #F3E0A5;
     color: #000;
-    --nile-remove-icon-color: var(--nile-colors-yellow-500);
   }
 
   .tag--warning:hover {
-    outline: 2px solid #e5bf43;
+    border: 2px solid #E5BF43;
   }
 
-  .tag--warning:active > nile-icon {
+  .tag--warning:active > nile-icon-button {
     color: hsl(32.1 94.6% 43.7%);
   }
 
+
   .tag--error {
-    background: #f3a5aa;
+    background: #F3A5AA;
+    border: 2px solid #F3A5AA;
     color: #000;
-    --nile-remove-icon-color: var(--nile-colors-red-500);
   }
 
   .tag--error:hover {
-    outline: 2px solid #e5434d;
+    border: 2px solid #E5434D;
   }
 
-  .tag--error:active > nile-icon {
+  .tag--error:active > nile-icon-button {
     color: hsl(0 72.2% 50.6%);
   }
 
   .tag--info {
-    background: #a5d3f3;
+    background: #A5D3F3;
+    border: 2px solid #A5D3F3;
     color: #000000;
-    --nile-remove-icon-color: var(--nile-colors-blue-500);
   }
 
   .tag--info:hover {
-    outline: 2px solid #42a3e5;
+    border: 2px solid #42A3E5;
   }
 
-  .tag--info:active > nile-icon {
+  .tag--info:active > nile-icon-button {
     color: hsl(0 72.2% 50.6%);
   }
 
-  .tag--gray {
-    background: var(--nile-tag-gray-background-color);
-    border: 1px solid var(--nile-colors-gray-light-mode-300);
-    color: var(--nile-tag-gray-color);
-    --nile-remove-icon-color: var(--nile-tag-gray-x-color);
-  }
-
-  .tag--gray:hover {
-    background-color: var(--nile-tag-gray-hover-background-color);
-  }
-
-  /* .tag--gray:active > nile-icon {
-    color: #101828;
-  } */
-
-  .tag--small {
-    height: 24px;
-    padding: 3px 8px;
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 18px;
-  }
 
   .tag--medium {
-    height: 24px;
-    padding: 2px 9px;
     font-size: 14px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 20px;
+    height: 26px;
+    padding: 0 0.75rem;
+  }
+
+  .tag__remove {
+    margin-inline-start: 0.5rem;
   }
 
   /*
@@ -3673,59 +3652,35 @@ const rN=Symbol.for(""),xN=M=>{if((null==M?void 0:M.r)===rN)return null==M?void
     border-radius: 9999px;
   }
 
-  .tag__content {
-    display: inline-block;
-  }
-
-  .tag--medium .tag__remove-wrapper {
-    display: inline-flex;
-    justify-content: centre;
-    box-sizing: border-box;
-    height: 16px;
-    width: 16px;
-    padding: 2px;
-  }
-
-  .tag--small .tag__remove-wrapper {
-    display: inline-flex;
-    justify-content: centre;
-    box-sizing: border-box;
-    height: 14px;
-    width: 14px;
-    padding: 2px;
-  }
+  .tag__prefix {
+  padding: 3px 6px;
+}
 
-  .tag--removable {
-    padding: 2px 2px 2px 9px;
-  }
+ .tag__content {
+  font-size: 14px;
+}
 
-  .tag__remove:hover {
-    cursor: pointer;
-    --nile-remove-icon-color: #101828;
-    color: red;
-  }
-`;M.NileTag=class extends kN{constructor(){super(...arguments),this.variant="normal",this.size="medium",this.pill=!1,this.removable=!1}handleRemoveClick(){this.emit("nile-remove")}render(){return EM`
+`;M.NileTag=class extends kN{constructor(){super(...arguments),this.variant="normal",this.size="medium",this.pill=!1,this.removable=!1}handleRemoveClick(){this.emit("nile-remove")}getCloseButtonColor(){switch(this.variant){case"primary":case"info":return"--nile-colors-blue-500";case"success":return"--nile-colors-green-500";case"normal":default:return"--nile-colors-dark-500";case"warning":return"--nile-colors-yellow-500";case"error":return"--nile-colors-red-500"}}render(){const M=this.getCloseButtonColor();return EM`
       <span
         part="base"
-        class=${uN({tag:!0,"tag--primary":"primary"===this.variant,"tag--success":"success"===this.variant,"tag--normal":"normal"===this.variant,"tag--warning":"warning"===this.variant,"tag--error":"error"===this.variant,"tag--info":"info"===this.variant,"tag--gray":"gray"===this.variant,"tag--small":"small"===this.size,"tag--medium":"medium"===this.size,"tag--large":"large"===this.size,"tag--pill":this.pill,"tag--removable":this.removable})}
+        class=${uN({tag:!0,"tag--primary":"primary"===this.variant,"tag--success":"success"===this.variant,"tag--normal":"normal"===this.variant,"tag--warning":"warning"===this.variant,"tag--error":"error"===this.variant,"tag--info":"info"===this.variant,"tag--small":"small"===this.size,"tag--medium":"medium"===this.size,"tag--large":"large"===this.size,"tag--pill":this.pill,"tag--removable":this.removable})}
       >
         <slot name="prefix" part="prefix" class="tag__prefix"></slot>
 
         <slot part="content" class="tag__content"></slot>
 
         ${this.removable?EM`
-          <span class="tag__remove-wrapper">
-              <nile-icon 
-              name="close"
-              part="remove-button"
-              exportparts="base:remove-button__base"
-              class="tag__remove"
-              @click=${this.handleRemoveClick}
-              tabindex="-1"
-              color="var(--nile-remove-icon-color)"
-              size="${"small"===this.size?"10":"12"}"
-              /> </nile-icon>
-          </span>
+              <nile-icon-button
+                part="remove-button"
+                exportparts="base:remove-button__base"
+                name="close"
+                library="system"
+                label="remove"
+                class="tag__remove"
+                @click=${this.handleRemoveClick}
+                tabindex="-1"
+                color="var(${M})"
+              ></nile-icon-button>
             `:""}
       </span>
     `}},M.NileTag.styles=di,N([$M({reflect:!0})],M.NileTag.prototype,"variant",void 0),N([$M({reflect:!0})],M.NileTag.prototype,"size",void 0),N([$M({type:Boolean,reflect:!0})],M.NileTag.prototype,"pill",void 0),N([$M({type:Boolean})],M.NileTag.prototype,"removable",void 0),M.NileTag=N([FM("nile-tag")],M.NileTag),M.NileSelect=class extends kN{constructor(){super(...arguments),this.formControlController=new nN(this,{assumeInteractionOn:["nile-blur","nile-input"]}),this.hasSlotController=new oN(this,"help-text","label"),this.typeToSelectString="",this.hasFocus=!1,this.displayLabel="",this.selectedOptions=[],this.oldValue="",this.name="",this.value="",this.defaultValue="",this.size="medium",this.placeholder="Select...",this.searchValue="",this.searchEnabled=!1,this.blockValueChange=!1,this.disableLocalSearch=!1,this.optionsLoading=!1,this.noWidthSync=!1,this.multiple=!1,this.helpText="",this.errorMessage="",this.warning=!1,this.error=!1,this.success=!1,this.maxOptionsVisible=3,this.disabled=!1,this.clearable=!1,this.open=!1,this.hoist=!1,this.filled=!1,this.pill=!1,this.label="",this.placement="bottom",this.form="",this.required=!1,this.showSelected=!1,this.oldMaxOptionsVisible=1,this.showNoResults=!1,this.noResultsMessage="No results found"}get validity(){return this.valueInput?.validity}get validationMessage(){return this.valueInput?.validationMessage}connectedCallback(){super.connectedCallback(),this.handleDocumentFocusIn=this.handleDocumentFocusIn.bind(this),this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this),this.handleDocumentMouseDown=this.handleDocumentMouseDown.bind(this),this.open=!1,this.emit("nile-init")}disconnectedCallback(){super.disconnectedCallback(),this.emit("nile-destroy")}addOpenListeners(){document.addEventListener("focusin",this.handleDocumentFocusIn),document.addEventListener("keydown",this.handleDocumentKeyDown),document.addEventListener("mousedown",this.handleDocumentMouseDown)}removeOpenListeners(){document.removeEventListener("focusin",this.handleDocumentFocusIn),document.removeEventListener("keydown",this.handleDocumentKeyDown),document.removeEventListener("mousedown",this.handleDocumentMouseDown)}handleFocus(){this.hasFocus=!0,this.displayInput.setSelectionRange(0,0),this.emit("nile-focus",{value:this.value,name:this.name})}handleBlur(){this.hasFocus=!1,this.emit("nile-blur",{value:this.value,name:this.name})}handleDocumentFocusIn(M){const N=M.composedPath();this&&!N.includes(this)&&this.hide()}handleFooterClick(M){M.stopPropagation(),M.preventDefault()}toggleShowSelected(M){if(M.stopPropagation(),M.preventDefault(),0===this.selectedOptions?.length)return;this.showSelected=!this.showSelected;this.getAllOptions().forEach((M=>{M.selected||(M.hidden=this.showSelected)})),this.requestUpdate()}unSlectAll(){this.showSelected=!1;this.getAllOptions().forEach((M=>{M.selected=!1,M.hidden=!1})),this.value="",this.selectionChanged(),this.emit("nile-change",{value:this.value,name:this.name})}handleDocumentKeyDown(M){const N=M.target,D=null!==N.closest(".select__clear"),i=null!==N.closest("nile-icon-button");if(!D&&!i){if("Escape"===M.key&&this.open&&(M.preventDefault(),M.stopPropagation(),this.hide(),this.displayInput.focus({preventScroll:!0})),"Enter"===M.key||" "===M.key&&""===this.typeToSelectString)return M.preventDefault(),M.stopImmediatePropagation(),this.open?void(this.currentOption&&!this.currentOption.disabled&&(this.multiple?this.toggleOptionSelection(this.currentOption):this.setSelectedOptions(this.currentOption),this.updateComplete.then((()=>{this.emit("nile-input",{value:this.value,name:this.name}),this.emit("nile-change",{value:this.value,name:this.name})})),this.multiple||(this.hide(),this.displayInput.focus({preventScroll:!0})))):void this.show();if(["ArrowUp","ArrowDown","Home","End"].includes(M.key)){const N=this.getAllOptions(),D=N.indexOf(this.currentOption);let i=Math.max(0,D);if(M.preventDefault(),!this.open&&(this.show(),this.currentOption))return;"ArrowDown"===M.key?(i=D+1,i>N.length-1&&(i=0)):"ArrowUp"===M.key?(i=D-1,i<0&&(i=N.length-1)):"Home"===M.key?i=0:"End"===M.key&&(i=N.length-1),this.setCurrentOption(N[i])}if(1===M.key.length||"Backspace"===M.key){const N=this.getAllOptions();if(M.metaKey||M.ctrlKey||M.altKey)return;if(!this.open){if("Backspace"===M.key)return;this.show()}M.stopPropagation(),M.preventDefault(),clearTimeout(this.typeToSelectTimeout),this.typeToSelectTimeout=window.setTimeout((()=>this.typeToSelectString=""),1e3),"Backspace"===M.key?this.typeToSelectString=this.typeToSelectString.slice(0,-1):this.typeToSelectString+=M.key.toLowerCase();for(const M of N){if(M.getTextLabel().toLowerCase().startsWith(this.typeToSelectString)){this.setCurrentOption(M);break}}}}}handleDocumentMouseDown(M){const N=M.composedPath();this&&!N.includes(this)&&this.hide()}handleLabelClick(){this.displayInput.focus(),this.hide()}handleComboboxMouseDown(M){const N=M.composedPath().some((M=>M instanceof Element&&"nile-icon-button"===M.tagName.toLowerCase()));this.disabled||N||(M.preventDefault(),this.displayInput.focus({preventScroll:!0}),this.open=!this.open)}handleComboboxKeyDown(M){M.stopPropagation(),this.handleDocumentKeyDown(M)}handleClearClick(M){M.stopPropagation(),""!==this.value&&(this.setSelectedOptions([]),this.displayInput.focus({preventScroll:!0}),this.updateComplete.then((()=>{this.emit("nile-clear",{value:this.value,name:this.name}),this.emit("nile-input",{value:this.value,name:this.name}),this.emit("nile-change",{value:this.value,name:this.name})})))}handleClearMouseDown(M){M.stopPropagation(),M.preventDefault()}handleOptionClick(M){const N=M.target.closest("nile-option");if(this.blockValueChange&&N)return this.emit("nile-block-change",{value:N?.value,name:this.name}),void this.hide();const D=this.value;if(this.oldValue=D,N&&!N.disabled&&(this.multiple?this.toggleOptionSelection(N):this.setSelectedOptions(N),this.updateComplete.then((()=>this.displayInput.focus({preventScroll:!0}))),this.value!==D&&this.updateComplete.then((()=>{this.emit("nile-input",{value:this.value,name:this.name}),this.emit("nile-change",{value:this.value,name:this.name})})),this.multiple||(this.hide(),this.displayInput.focus({preventScroll:!0}))),this.showSelected){this.getAllOptions().forEach((M=>{M.selected||(M.hidden=this.showSelected)})),this.requestUpdate()}}handleDefaultSlotChange(){const M=this.getAllOptions(),N=Array.isArray(this.value)?this.value:[this.value],D=[];customElements.get("nile-option")?(M.forEach((M=>D.push(M.value))),this.setSelectedOptions(M.filter((M=>N.map(String).includes(M.value))))):customElements.whenDefined("nile-option").then((()=>this.handleDefaultSlotChange()))}handleTagRemove(M,N){if(M.stopPropagation(),!this.disabled){this.toggleOptionSelection(N,!1);this.getAllOptions().forEach((M=>{M.selected||(M.hidden=this.showSelected)})),this.updateComplete.then((()=>{this.emit("nile-input",{value:this.value,name:this.name}),this.emit("nile-change",{value:this.value,name:this.name})}))}}getAllOptions(){const M=[...this.querySelectorAll("nile-option")];return this.multiple&&this.oldValue?.length>0&&M.sort(((M,N)=>{let D=this.oldValue.indexOf(M.value),i=this.oldValue.indexOf(N.value);return-1===D&&(D=1/0),-1===i&&(i=1/0),D<i?-1:D>i?1:0})),M}getOptionPrefix(M){const N=M.shadowRoot?.querySelector('slot[name="prefix"]');if(!N)return"";const D=N.assignedNodes(),i=[];return D.forEach((M=>{M instanceof HTMLElement?i.push(M.outerHTML):M.nodeType===Node.TEXT_NODE&&i.push(M.textContent||"")})),i.join("")}getFirstOption(){return this.querySelector("nile-option")}setCurrentOption(M){this.getAllOptions().forEach((M=>{M.current=!1,M.tabIndex=-1})),M&&(this.currentOption=M,M.current=!0,M.tabIndex=0,M.focus())}setSelectedOptions(M){const N=this.getAllOptions(),D=Array.isArray(M)?M:[M];N.forEach((M=>M.selected=!1)),D.length&&D.forEach((M=>M.selected=!0)),this.selectionChanged()}toggleOptionSelection(M,N){M.selected=!0===N||!1===N?N:!M.selected,this.selectionChanged()}selectionChanged(){if(this.selectedOptions=this.getAllOptions().filter((M=>M.selected)),this.multiple){if(this.value=this.selectedOptions.map((M=>M.value)),this.placeholder&&0===this.value.length?this.displayLabel="":this.displayLabel=this.selectedOptions.length+" selected",0===this.selectedOptions.length){this.showSelected=!1;this.getAllOptions().forEach((M=>{M.selected||(M.hidden=this.showSelected)})),this.requestUpdate()}}else this.value=this.selectedOptions[0]?.value??this.value,this.displayLabel=this.selectedOptions[0]?.getTextLabel()?this.selectedOptions[0].getTextLabel():this.value??"";this.updateComplete.then((()=>{this.formControlController.updateValidity()})),this.calculateTotalWidthOfTags()}handleSearchFocus(){document.removeEventListener("keydown",this.handleDocumentKeyDown)}handleSearchBlur(){document.addEventListener("keydown",this.handleDocumentKeyDown)}handleSearchChange(M){if(this.searchValue=M.detail.value,!this.disableLocalSearch){0===this.filterOptions(this.searchValue).length?this.showNoResults=!0:this.showNoResults=!1}}filterOptions(M){const N=this.getAllOptions(),D=M.toLowerCase();let i=[];return N.forEach((M=>{const N=M.getTextLabel().toLowerCase(),j=(M.value||"").toLowerCase();N.includes(D)||j.includes(D)?(M.hidden=!1,i.push(M)):M.hidden=!0})),i}handleInvalid(M){this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(M)}handleDisabledChange(){this.disabled&&(this.open=!1,this.handleOpenChange())}handleValueChange(){const M=this.getAllOptions(),N=Array.isArray(this.value)?this.value:[this.value];this.setSelectedOptions(M.filter((M=>N.includes(M.value))))}async handleOpenChange(){if(this.open&&!this.disabled){this.setCurrentOption(this.selectedOptions[0]||this.getFirstOption()),this.emit("nile-show",{value:this.value,name:this.name}),this.addOpenListeners(),this.showNoResults=!this.getAllOptions()?.length,await JN(this),this.listbox.hidden=!1,this.popup.active=!0,requestAnimationFrame((()=>{this.setCurrentOption(this.currentOption)}));const{keyframes:M,options:N}=_N(this,"select.show",{dir:"ltr"});await PN(this.popup.popup,M,N),this.currentOption&&ND(this.currentOption,this.listbox,"vertical","auto"),this.emit("nile-after-show",{value:this.value,name:this.name})}else{this.emit("nile-hide",{value:this.value,name:this.name}),this.searchValue="",this.filterOptions(this.searchValue),this.removeOpenListeners(),await JN(this);const{keyframes:M,options:N}=_N(this,"select.hide",{dir:"ltr"});await PN(this.popup.popup,M,N),this.listbox.hidden=!0,this.popup.active=!1,this.emit("nile-after-hide",{value:this.value,name:this.name})}}async show(){if(!this.open&&!this.disabled)return this.open=!0,iD(this,"nile-after-show");this.open=!1}async hide(){if(this.open&&!this.disabled)return this.open=!1,iD(this,"nile-after-hide");this.open=!1}checkValidity(){return this.valueInput.checkValidity()}getForm(){return this.formControlController.getForm()}reportValidity(){return this.valueInput.reportValidity()}setCustomValidity(M){this.valueInput.setCustomValidity(M),this.formControlController.updateValidity()}focus(M){this.displayInput.focus(M)}blur(){this.displayInput.blur()}onInputChange(M){M.stopPropagation()}calculateWidthOfSelectTagsDiv(){if(this.shadowRoot){const M=this.shadowRoot.querySelector("div.select__tags");if(M instanceof HTMLElement){return M.offsetWidth-70}}}calculateTotalWidthOfTags(){this.maxOptionsVisible!==1/0&&(this.oldMaxOptionsVisible=this.maxOptionsVisible),this.maxOptionsVisible=1/0,setTimeout((()=>{let M=[];if(this.shadowRoot){this.shadowRoot.querySelectorAll("nile-tag").forEach((N=>{N instanceof HTMLElement&&M.push(N.offsetWidth)}))}if(this.value.length!==M.length)return;const N=this.calculateWidthOfSelectTagsDiv();if(!N)return;let D=0,i=0;for(let j=0;j<M.length;j++)if(D+=M[j],D>N){i=j;break}this.maxOptionsVisible=i}),1)}render(){const M=this.hasSlotController.test("label");this.hasSlotController.test("help-text");const N=this.hasSlotController.test("label-suffix"),D=this.hasSlotController.test("custom-select"),i=!!this.label||!!M,j=this.clearable&&!this.disabled&&this.value.length>0,t=this.placeholder&&0===this.value.length,I=!!this.helpText,z=!!this.errorMessage,u=this.selectedOptions[0]?this.getOptionPrefix(this.selectedOptions[0]):"";return EM`
@@ -5087,6 +5042,19 @@ const rN=Symbol.for(""),xN=M=>{if((null==M?void 0:M.r)===rN)return null==M?void
     gap: 4px 7px;
   }
 
+  .day-names {
+    flex-wrap: nowrap;
+  }
+
+
+  @media not all and (min-resolution: .001dpcm) {
+    @supports (-webkit-appearance:none)
+    { .day-names, .days {
+       column-gap: 6px;
+      }
+    }
+  }
+
   .days {
     height: auto;
     padding: 0 12px 12px 12px;
@@ -7210,7 +7178,7 @@ const rN=Symbol.for(""),xN=M=>{if((null==M?void 0:M.r)===rN)return null==M?void
     flex-direction: column;
     justify-items: strecth;
     background-color: var(--nile-colors-white-base);
-    border: solid var(--border-width) var(--border-color);
+    outline: solid var(--border-width) var(--border-color);
     border-radius: var(--border-radius);
     min-width: 273px;
     max-width: 350px;
@@ -7253,7 +7221,7 @@ const rN=Symbol.for(""),xN=M=>{if((null==M?void 0:M.r)===rN)return null==M?void
   .card:hover {
     box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
       0px 2px 4px -2px rgba(16, 24, 40, 0.06);
-    border: solid 1px var(--border-color);
+    outline: solid 1px var(--border-color);
   }
 `;M.NileCard=class extends kN{constructor(){super(...arguments),this.hasSlotController=new oN(this,"footer")}render(){return EM`
       <div