@cargosense/cargo-design-system 1.0.5 → 1.0.8

package/dist/atoms/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../assets/index.cjs.js");require("../fonts/index.cjs.js");exports.Badge=e.Badge;exports.Body=e.Body;exports.Checkbox=e.Checkbox;exports.Counter=e.Counter;exports.DataObject=e.DataObject;exports.ErrorMessage=e.ErrorMessage;exports.FlexContainer=e.FlexContainer;exports.Icon=e.Icon;exports.Informational=e.Informational;exports.Key=e.Key;exports.KeyValue=e.KeyValue;exports.Label=e.Label;exports.NavImage=e.NavImage;exports.Radio=e.Radio;exports.Select=e.Select;exports.Spinner=e.Spinner;exports.Tag=e.Tag;exports.registerBadge=e.registerBadge;exports.registerBody=e.registerBody;exports.registerCheckbox=e.registerCheckbox;exports.registerCounter=e.registerCounter;exports.registerDataObject=e.registerDataObject;exports.registerErrorMessage=e.registerErrorMessage;exports.registerFlexContainer=e.registerFlexContainer;exports.registerIcon=e.registerIcon;exports.registerInformational=e.registerInformational;exports.registerKey=e.registerKey;exports.registerKeyValue=e.registerKeyValue;exports.registerLabel=e.registerLabel;exports.registerNavImage=e.registerNavImage;exports.registerRadio=e.registerRadio;exports.registerSelect=e.registerSelect;exports.registerSpinner=e.registerSpinner;exports.registerTag=e.registerTag;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../assets/index.cjs.js");require("../fonts/index.cjs.js");exports.Badge=e.Badge;exports.Body=e.Body;exports.Checkbox=e.Checkbox;exports.Counter=e.Counter;exports.DataObject=e.DataObject;exports.ErrorMessage=e.ErrorMessage;exports.FlexContainer=e.FlexContainer;exports.Icon=e.Icon;exports.Informational=e.Informational;exports.Key=e.Key;exports.KeyValue=e.KeyValue;exports.Label=e.Label;exports.NavImage=e.NavImage;exports.Radio=e.Radio;exports.Select=e.Select;exports.Spinner=e.Spinner;exports.Tag=e.Tag;exports.Textarea=e.Textarea;exports.registerBadge=e.registerBadge;exports.registerBody=e.registerBody;exports.registerCheckbox=e.registerCheckbox;exports.registerCounter=e.registerCounter;exports.registerDataObject=e.registerDataObject;exports.registerErrorMessage=e.registerErrorMessage;exports.registerFlexContainer=e.registerFlexContainer;exports.registerIcon=e.registerIcon;exports.registerInformational=e.registerInformational;exports.registerKey=e.registerKey;exports.registerKeyValue=e.registerKeyValue;exports.registerLabel=e.registerLabel;exports.registerNavImage=e.registerNavImage;exports.registerRadio=e.registerRadio;exports.registerSelect=e.registerSelect;exports.registerSpinner=e.registerSpinner;exports.registerTag=e.registerTag;exports.registerTextarea=e.registerTextarea;
 //# sourceMappingURL=index.cjs.js.map

package/dist/atoms/index.es.js

@@ -1,4 +1,4 @@
-import { B as r, h as t, s as g, C as i, D as o, E as n, F as l, I as c, u as d, m, K as y, L as C, N as I, R as b, G as p, S as u, T as x, g as B, j as K, t as S, d as f, k as h, y as j, q as k, r as v, v as D, n as E, l as F, w as L, c as N, A as R, H as T, p as M, z as O } from "../assets/index.es.js";
+import { B as r, h as t, s as g, C as i, D as o, E as n, F as l, I as c, u as d, m, K as x, L as y, N as C, R as I, G as b, S as p, T as u, J as B, g as K, j as S, t as T, d as f, k as h, y as j, q as k, r as v, v as D, n as E, l as F, w as L, c as M, A as N, H as R, p as O, z as V, M as q } from "../assets/index.es.js";
 import "../fonts/index.es.js";
 export {
   r as Badge,
@@ -11,16 +11,17 @@ export {
   c as Icon,
   d as Informational,
   m as Key,
-  y as KeyValue,
-  C as Label,
-  I as NavImage,
-  b as Radio,
-  p as Select,
-  u as Spinner,
-  x as Tag,
-  B as registerBadge,
-  K as registerBody,
-  S as registerCheckbox,
+  x as KeyValue,
+  y as Label,
+  C as NavImage,
+  I as Radio,
+  b as Select,
+  p as Spinner,
+  u as Tag,
+  B as Textarea,
+  K as registerBadge,
+  S as registerBody,
+  T as registerCheckbox,
   f as registerCounter,
   h as registerDataObject,
   j as registerErrorMessage,
@@ -30,10 +31,11 @@ export {
   E as registerKey,
   F as registerKeyValue,
   L as registerLabel,
-  N as registerNavImage,
-  R as registerRadio,
-  T as registerSelect,
-  M as registerSpinner,
-  O as registerTag
+  M as registerNavImage,
+  N as registerRadio,
+  R as registerSelect,
+  O as registerSpinner,
+  V as registerTag,
+  q as registerTextarea
 };
 //# sourceMappingURL=index.es.js.map

package/dist/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./assets/index.cjs.js");require("./fonts/index.cjs.js");const r=require("./molecules/index.cjs.js");exports.Badge=e.Badge;exports.Body=e.Body;exports.Checkbox=e.Checkbox;exports.Counter=e.Counter;exports.DataObject=e.DataObject;exports.ErrorMessage=e.ErrorMessage;exports.FlexContainer=e.FlexContainer;exports.Icon=e.Icon;exports.Informational=e.Informational;exports.Key=e.Key;exports.KeyValue=e.KeyValue;exports.Label=e.Label;exports.NavImage=e.NavImage;exports.Radio=e.Radio;exports.Select=e.Select;exports.Spinner=e.Spinner;exports.Tag=e.Tag;exports.registerBadge=e.registerBadge;exports.registerBody=e.registerBody;exports.registerCheckbox=e.registerCheckbox;exports.registerCounter=e.registerCounter;exports.registerDataObject=e.registerDataObject;exports.registerErrorMessage=e.registerErrorMessage;exports.registerFlexContainer=e.registerFlexContainer;exports.registerIcon=e.registerIcon;exports.registerInformational=e.registerInformational;exports.registerKey=e.registerKey;exports.registerKeyValue=e.registerKeyValue;exports.registerLabel=e.registerLabel;exports.registerNavImage=e.registerNavImage;exports.registerRadio=e.registerRadio;exports.registerSelect=e.registerSelect;exports.registerSpinner=e.registerSpinner;exports.registerTag=e.registerTag;exports.Button=r.Button;exports.DateComponent=r.DateComponent;exports.Header=r.Header;exports.IconContainer=r.IconContainer;exports.Input=r.Input;exports.NavBar=r.NavBar;exports.NavItem=r.NavItem;exports.NavProfile=r.NavProfile;exports.Search=r.Search;exports.Tab=r.Tab;exports.TabContainer=r.TabContainer;exports.Table=r.Table;exports.TimeComponent=r.TimeComponent;exports.ToolTip=r.ToolTip;exports.Value=r.Value;exports.registerButton=r.registerButton;exports.registerDate=r.registerDate;exports.registerHeader=r.registerHeader;exports.registerIconContainer=r.registerIconContainer;exports.registerInput=r.registerInput;exports.registerNavBar=r.registerNavBar;exports.registerNavItem=r.registerNavItem;exports.registerNavProfile=r.registerNavProfile;exports.registerSearch=r.registerSearch;exports.registerTab=r.registerTab;exports.registerTabContainer=r.registerTabContainer;exports.registerTable=r.registerTable;exports.registerTime=r.registerTime;exports.registerToolTip=r.registerToolTip;exports.registerValue=r.registerValue;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./assets/index.cjs.js");require("./fonts/index.cjs.js");const r=require("./molecules/index.cjs.js");exports.Badge=e.Badge;exports.Body=e.Body;exports.Checkbox=e.Checkbox;exports.Counter=e.Counter;exports.DataObject=e.DataObject;exports.ErrorMessage=e.ErrorMessage;exports.FlexContainer=e.FlexContainer;exports.Icon=e.Icon;exports.Informational=e.Informational;exports.Key=e.Key;exports.KeyValue=e.KeyValue;exports.Label=e.Label;exports.NavImage=e.NavImage;exports.Radio=e.Radio;exports.Select=e.Select;exports.Spinner=e.Spinner;exports.Tag=e.Tag;exports.Textarea=e.Textarea;exports.registerBadge=e.registerBadge;exports.registerBody=e.registerBody;exports.registerCheckbox=e.registerCheckbox;exports.registerCounter=e.registerCounter;exports.registerDataObject=e.registerDataObject;exports.registerErrorMessage=e.registerErrorMessage;exports.registerFlexContainer=e.registerFlexContainer;exports.registerIcon=e.registerIcon;exports.registerInformational=e.registerInformational;exports.registerKey=e.registerKey;exports.registerKeyValue=e.registerKeyValue;exports.registerLabel=e.registerLabel;exports.registerNavImage=e.registerNavImage;exports.registerRadio=e.registerRadio;exports.registerSelect=e.registerSelect;exports.registerSpinner=e.registerSpinner;exports.registerTag=e.registerTag;exports.registerTextarea=e.registerTextarea;exports.Button=r.Button;exports.DateComponent=r.DateComponent;exports.Header=r.Header;exports.IconContainer=r.IconContainer;exports.Input=r.Input;exports.NavBar=r.NavBar;exports.NavItem=r.NavItem;exports.NavProfile=r.NavProfile;exports.Search=r.Search;exports.Tab=r.Tab;exports.TabContainer=r.TabContainer;exports.Table=r.Table;exports.TimeComponent=r.TimeComponent;exports.ToolTip=r.ToolTip;exports.Value=r.Value;exports.registerButton=r.registerButton;exports.registerDate=r.registerDate;exports.registerHeader=r.registerHeader;exports.registerIconContainer=r.registerIconContainer;exports.registerInput=r.registerInput;exports.registerNavBar=r.registerNavBar;exports.registerNavItem=r.registerNavItem;exports.registerNavProfile=r.registerNavProfile;exports.registerSearch=r.registerSearch;exports.registerTab=r.registerTab;exports.registerTabContainer=r.registerTabContainer;exports.registerTable=r.registerTable;exports.registerTime=r.registerTime;exports.registerToolTip=r.registerToolTip;exports.registerValue=r.registerValue;
 //# sourceMappingURL=index.cjs.js.map

package/dist/index.es.js

@@ -1,70 +1,72 @@
-import { B as s, h as t, s as i, C as g, D as o, E as n, F as l, I as T, u as m, m as c, K as C, L as I, N as b, R as p, G as u, S as d, T as v, g as B, j as N, t as y, d as S, k as f, y as x, q as h, r as D, v as K, n as V, l as j, w as k, c as E, A as F, H, p as L, z as R } from "./assets/index.es.js";
+import { B as s, h as t, s as i, C as g, D as o, E as n, F as l, I as T, u as m, m as c, K as C, L as I, N as b, R as p, G as u, S as d, T as v, J as B, g as N, j as x, t as y, d as S, k as f, y as h, q as D, r as K, v as V, n as j, l as k, w as E, c as F, A as H, H as L, p as M, z as R, M as O } from "./assets/index.es.js";
 import "./fonts/index.es.js";
-import { Button as O, DateComponent as P, Header as q, IconContainer as w, Input as z, NavBar as A, NavItem as G, NavProfile as J, Search as Q, Tab as U, TabContainer as W, Table as X, TimeComponent as Y, ToolTip as Z, Value as _, registerButton as $, registerDate as ee, registerHeader as re, registerIconContainer as ae, registerInput as se, registerNavBar as te, registerNavItem as ie, registerNavProfile as ge, registerSearch as oe, registerTab as ne, registerTabContainer as le, registerTable as Te, registerTime as me, registerToolTip as ce, registerValue as Ce } from "./molecules/index.es.js";
+import { Button as q, DateComponent as w, Header as z, IconContainer as A, Input as G, NavBar as J, NavItem as Q, NavProfile as U, Search as W, Tab as X, TabContainer as Y, Table as Z, TimeComponent as _, ToolTip as $, Value as ee, registerButton as re, registerDate as ae, registerHeader as se, registerIconContainer as te, registerInput as ie, registerNavBar as ge, registerNavItem as oe, registerNavProfile as ne, registerSearch as le, registerTab as Te, registerTabContainer as me, registerTable as ce, registerTime as Ce, registerToolTip as Ie, registerValue as be } from "./molecules/index.es.js";
 export {
   s as Badge,
   t as Body,
-  O as Button,
+  q as Button,
   i as Checkbox,
   g as Counter,
   o as DataObject,
-  P as DateComponent,
+  w as DateComponent,
   n as ErrorMessage,
   l as FlexContainer,
-  q as Header,
+  z as Header,
   T as Icon,
-  w as IconContainer,
+  A as IconContainer,
   m as Informational,
-  z as Input,
+  G as Input,
   c as Key,
   C as KeyValue,
   I as Label,
-  A as NavBar,
+  J as NavBar,
   b as NavImage,
-  G as NavItem,
-  J as NavProfile,
+  Q as NavItem,
+  U as NavProfile,
   p as Radio,
-  Q as Search,
+  W as Search,
   u as Select,
   d as Spinner,
-  U as Tab,
-  W as TabContainer,
-  X as Table,
+  X as Tab,
+  Y as TabContainer,
+  Z as Table,
   v as Tag,
-  Y as TimeComponent,
-  Z as ToolTip,
-  _ as Value,
-  B as registerBadge,
-  N as registerBody,
-  $ as registerButton,
+  B as Textarea,
+  _ as TimeComponent,
+  $ as ToolTip,
+  ee as Value,
+  N as registerBadge,
+  x as registerBody,
+  re as registerButton,
   y as registerCheckbox,
   S as registerCounter,
   f as registerDataObject,
-  ee as registerDate,
-  x as registerErrorMessage,
-  h as registerFlexContainer,
-  re as registerHeader,
-  D as registerIcon,
-  ae as registerIconContainer,
-  K as registerInformational,
-  se as registerInput,
-  V as registerKey,
-  j as registerKeyValue,
-  k as registerLabel,
-  te as registerNavBar,
-  E as registerNavImage,
-  ie as registerNavItem,
-  ge as registerNavProfile,
-  F as registerRadio,
-  oe as registerSearch,
-  H as registerSelect,
-  L as registerSpinner,
-  ne as registerTab,
-  le as registerTabContainer,
-  Te as registerTable,
+  ae as registerDate,
+  h as registerErrorMessage,
+  D as registerFlexContainer,
+  se as registerHeader,
+  K as registerIcon,
+  te as registerIconContainer,
+  V as registerInformational,
+  ie as registerInput,
+  j as registerKey,
+  k as registerKeyValue,
+  E as registerLabel,
+  ge as registerNavBar,
+  F as registerNavImage,
+  oe as registerNavItem,
+  ne as registerNavProfile,
+  H as registerRadio,
+  le as registerSearch,
+  L as registerSelect,
+  M as registerSpinner,
+  Te as registerTab,
+  me as registerTabContainer,
+  ce as registerTable,
   R as registerTag,
-  me as registerTime,
-  ce as registerToolTip,
-  Ce as registerValue
+  O as registerTextarea,
+  Ce as registerTime,
+  Ie as registerToolTip,
+  be as registerValue
 };
 //# sourceMappingURL=index.es.js.map

package/dist/molecules/index.cjs.js

@@ -240,6 +240,10 @@
       outline: 2px solid var(--input-error-border-color);
     }
 
+    .input-error::placeholder {
+      color: var(--input-error-border-color);
+    }
+
     .full-width {
       width: 100%;
     }
@@ -294,7 +298,7 @@
     `;static properties={name:{type:String,reflect:!0},type:{type:String,reflect:!0,converter:t=>["text","date","time","number","tel","url","phone","email","password"].includes(t)?t:"text"},disabled:{type:Boolean,reflect:!0},placeholder:{type:String,reflect:!0},readOnly:{type:Boolean,reflect:!0,attribute:"read-only"},required:{type:Boolean,reflect:!0},pattern:{type:String},error:{type:Boolean,reflect:!0},value:{type:String,reflect:!0},fullWidth:{type:Boolean,reflect:!0,attribute:"full-width"},variant:{type:String,reflect:!0},size:{type:String,reflect:!0,converter:t=>["sm","md","lg"].includes(t)?t:"md"},iconLeft:{type:String,reflect:!0,attribute:"icon-left"},iconRight:{type:String,reflect:!0,attribute:"icon-right"}};handleKeyPress(t){return this.dispatchEvent(new CustomEvent("keypress",{detail:{value:t.target.value,key:t.keyCode}})),t.key==="Enter"&&this.dispatchEvent(new CustomEvent("onenter",{detail:{value:t.target.value}})),this.dispatchEvent(new CustomEvent("onkeyup",{detail:{value:t.target.value,key:t.keyCode}})),this._internals.setFormValue(t.target.value),this.value=t.target.value,t.target.value}handleInput(t){return this.dispatchEvent(new CustomEvent("input",{detail:{value:t.target.value}})),this._internals.setFormValue(t.target.value),this.value=t.target.value,t.target.value}handleChange(t){return this.dispatchEvent(new CustomEvent("onchange",{detail:{value:t.target.value}})),this._internals.setFormValue(t.target.value),this.value=t.target.value,t.target.value}handleFocus(t){return this.dispatchEvent(new CustomEvent("onblur",{detail:{value:t.target.value}})),this._internals.setFormValue(t.target.value),this.value=t.target.value,t.target}constructor(){super(),this.value="",this.placeholder="",this.pattern="",this.variant="solid",this.size="md",this._internals=this.attachInternals()}render(){return e.x`
       ${this.iconLeft?e.x`<span class="icon-left-container"><cd-icon name="${this.iconLeft}" size="sm" class="icon-left"></cd-icon></span>`:""}
       <input id='${this.name}' class="${this.iconLeft?"icon-spacing-left":""} ${this.iconRight?" icon-spacing-right":""}  ${this.disabled?" disabled":""} ${this.error?" input-error":""} ${this.fullWidth?" full-width":""} ${this.variant==="dashed"?" dashed":this.variant=="dotted"?" dotted":""} ${this.size}" type="${this.type}" placeholder="${this.placeholder}" ?required=${this.required} .value="${this.value}"  ?readonly=${this.readOnly} ?disabled=${this.disabled} .pattern="${this.pattern}" @input="${this.handleInput}" @change="${this.handleChange}" @blur="${this.handleFocus}" @keypress=${this.handleKeyPress}/>
-      ${this.iconRight?e.x`<span class="icon-right-container"><cd-icon name="${this.iconRight}" size="sm" class="icon-right"></cd-icon></span>`:""}
+      ${this.iconRight?e.x`<span class="icon-right-container"><cd-icon name="${this.iconRight}" size="sm" class="icon-right" color='${ifDefined(this.error?"var(--input-error-border-color)":void 0)}'></cd-icon></span>`:""}
       `}focus(){if(!this.shadowRoot){console.warn("Input element is not yet connected to the DOM.");return}if(!this.shadowRoot.querySelector("input")){console.warn("Input element is not found in the shadow DOM.");return}this.shadowRoot.querySelector("input").focus()}}function k(){typeof window<"u"&&!customElements.get("cd-input")&&customElements.define("cd-input",s)}e.registerNavImage();class l extends e.i{static styles=e.i$1`
     @font-face {
       font-family: 'Geist';
@@ -691,7 +695,7 @@
       ${this.variant==="default"?e.x`<a href="${e.o(this.link)}" class="value"><slot></slot></a>`:""}
       ${this.variant==="dropdown"?e.x`<span class="dropdown-value"><slot></slot></span>`:""}
       ${this.variant==="arrow"?e.x`<a href="${e.o(this.link)}" class="arrow-value"><slot></slot><cd-icon name="arrow" size="sm"></cd-icon></a>`:""}
-    `}}function C(){typeof window<"u"&&!customElements.get("cd-value")&&customElements.define("cd-value",h)}e.registerIcon();class b extends e.i{static styles=e.i$1`
+    `}}function C(){typeof window<"u"&&!customElements.get("cd-value")&&customElements.define("cd-value",h)}e.registerIcon();class v extends e.i{static styles=e.i$1`
     @font-face {
       font-family: 'Geist';
       src: url(${e.r(e.fontURL)}) format('woff');
@@ -897,7 +901,7 @@
         ${this.iconRight||this.collapsed?e.x`<span @click="${this.expandInput}" class="${this.collapsed?"icon-collapsed-container":"icon-right-container"}"><cd-icon name="search" class="${this.collapsed?"icon-collapsed "+this.size:"icon-right"}" variant="light-slate"></cd-icon></span>`:""}
         ${this.closeIcon?e.x`<span class="${this.collapsed?"hidden":"active"}" id='closeIcon' tabindex='0'><cd-icon name="exit" id="close-icon" class="icon close ${this.collapsed?"hidden-icon":"active-icon"}" @click="${this.collapseInput}"></cd-icon></span>`:""}
       </div>
-    `}firstUpdated(){if(!this.shadowRoot){console.warn("Shadow DOM is not available.");return}this.shadowRoot.querySelector(".active")&&(console.log("Adding event listener to active element"),this.shadowRoot.querySelector(".active").addEventListener("keydown",t=>{console.log("test"),t.keyCode===13&&this.collapseInput()}))}focus(){if(!this.shadowRoot){console.warn("Input element is not yet connected to the DOM.");return}if(!this.shadowRoot.querySelector("input")){console.warn("Input element is not found in the shadow DOM.");return}this.shadowRoot.querySelector("#search-input").focus()}expandInput(){this.collapsed&&(this.collapsed=!1,this.shadowRoot.querySelector("#search-input").focus(),this.shadowRoot.querySelector("#close-icon").classList.remove("hidden-icon"),this.shadowRoot.querySelector("#close-icon").classList.remove("hidden"),this.shadowRoot.querySelector("#close-icon").classList.add("active-icon"),this.shadowRoot.querySelector("#close-icon").classList.add("active"),this.requestUpdate(),this.shadowRoot.querySelector("#closeIcon").addEventListener("keydown",t=>{t.key==="Enter"&&this.collapseInput()}))}collapseInput(){this.collapsed||(this.collapsed=!0,this.value="",this.shadowRoot.querySelector("#close-icon").classList.add("hidden-icon"),this.shadowRoot.querySelector("#close-icon").classList.add("hidden"),this.shadowRoot.querySelector("#close-icon").classList.remove("active"),this.shadowRoot.querySelector("#close-icon").classList.remove("active-icon"),this.dispatchEvent(new CustomEvent("collapsed",{detail:{closed:!0},bubbles:!0,composed:!0})),this.requestUpdate())}}function T(){typeof window<"u"&&!customElements.get("cd-search")&&customElements.define("cd-search",b)}e.registerIcon();class v extends e.i{static styles=e.i$1`
+    `}firstUpdated(){if(!this.shadowRoot){console.warn("Shadow DOM is not available.");return}this.shadowRoot.querySelector(".active")&&(console.log("Adding event listener to active element"),this.shadowRoot.querySelector(".active").addEventListener("keydown",t=>{console.log("test"),t.keyCode===13&&this.collapseInput()}))}focus(){if(!this.shadowRoot){console.warn("Input element is not yet connected to the DOM.");return}if(!this.shadowRoot.querySelector("input")){console.warn("Input element is not found in the shadow DOM.");return}this.shadowRoot.querySelector("#search-input").focus()}expandInput(){this.collapsed&&(this.collapsed=!1,this.shadowRoot.querySelector("#search-input").focus(),this.shadowRoot.querySelector("#close-icon").classList.remove("hidden-icon"),this.shadowRoot.querySelector("#close-icon").classList.remove("hidden"),this.shadowRoot.querySelector("#close-icon").classList.add("active-icon"),this.shadowRoot.querySelector("#close-icon").classList.add("active"),this.requestUpdate(),this.shadowRoot.querySelector("#closeIcon").addEventListener("keydown",t=>{t.key==="Enter"&&this.collapseInput()}))}collapseInput(){this.collapsed||(this.collapsed=!0,this.value="",this.shadowRoot.querySelector("#close-icon").classList.add("hidden-icon"),this.shadowRoot.querySelector("#close-icon").classList.add("hidden"),this.shadowRoot.querySelector("#close-icon").classList.remove("active"),this.shadowRoot.querySelector("#close-icon").classList.remove("active-icon"),this.dispatchEvent(new CustomEvent("collapsed",{detail:{closed:!0},bubbles:!0,composed:!0})),this.requestUpdate())}}function T(){typeof window<"u"&&!customElements.get("cd-search")&&customElements.define("cd-search",v)}e.registerIcon();class b extends e.i{static styles=e.i$1`
     @font-face {
       font-family: 'Geist';
       src: url(${e.r(e.fontURL)}) format('woff');
@@ -1010,7 +1014,7 @@
         <slot name="end"></slot>
       </div>
     </div>
-    `}toggleActive(){this.active=!this.active}setActive(t){if(typeof t!="boolean")throw new TypeError("Active must be a boolean");if(this.disabled)throw new Error("Cannot set active state when the tab is disabled");this.active=t}setDisabled(t){if(typeof t!="boolean")throw new TypeError("Disabled must be a boolean");if(this.active&&t)throw new Error("Cannot disable an active tab");this.disabled=t}}function I(){typeof window<"u"&&!customElements.get("cd-tab")&&customElements.define("cd-tab",v)}class f extends e.i{static styles=e.i$1`
+    `}toggleActive(){this.active=!this.active}setActive(t){if(typeof t!="boolean")throw new TypeError("Active must be a boolean");if(this.disabled)throw new Error("Cannot set active state when the tab is disabled");this.active=t}setDisabled(t){if(typeof t!="boolean")throw new TypeError("Disabled must be a boolean");if(this.active&&t)throw new Error("Cannot disable an active tab");this.disabled=t}}function I(){typeof window<"u"&&!customElements.get("cd-tab")&&customElements.define("cd-tab",b)}class f extends e.i{static styles=e.i$1`
     @font-face {
       font-family: 'Geist';
       src: url(${e.r(e.fontURL)}) format('woff');
@@ -1129,6 +1133,11 @@
       flex-direction: row;
       align-items: center;
     }
+
+    .input-error::placeholder {
+      color: var(--input-error-border-color);
+    }
+
   `;static properties={value:{type:String,reflect:!0},shortcut:{type:String,reflect:!0},error:{type:Boolean,reflect:!0,attribute:"error"},disabled:{type:Boolean,reflect:!0},form:{type:String,reflect:!0,attribute:"form"},size:{type:String,reflect:!0,attribute:"size",converter:t=>["sm","md","lg"].includes(t)?t:"md"},fullWidth:{type:Boolean,reflect:!0,attribute:"full-width"},variant:{type:String,reflect:!0,attribute:"variant",converter:t=>["dashed","dotted"].includes(t)?t:"default"},timezone:{type:String,reflect:!0,attribute:"timezone",converter:t=>distinctTimezones.includes(t)?t:"America/New_York"}};constructor(){super(),this.value="",this.shortcut=void 0,this.disabled=void 0,this.form=void 0,this.size="md",this.fullWidth=!1,this.variant="default",this.timezone="America/New_York",this._internals=this.attachInternals(),this._internals.setValidity({customError:this.errorText&&this.errorText.length>0||!1})}handleChange=t=>(this.value=t.target.value,this._internals.setFormValue(this.value),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0})),this.value);handleInput=t=>(this.value=t.target.value,this._internals.setFormValue(this.value),this.dispatchEvent(new CustomEvent("input",{detail:{value:this.value},bubbles:!0,composed:!0})),this.value);handleFocus=t=>(this.value=t.target.value,this._internals.setFormValue(this.value),this.dispatchEvent(new CustomEvent("focus",{detail:{value:this.value},bubbles:!0,composed:!0})),this.value);handleBlur=t=>(this.value=t.target.value,this._internals.setFormValue(this.value),this.dispatchEvent(new CustomEvent("blur",{detail:{value:this.value},bubbles:!0,composed:!0})),this.value);render(){return e.x`
     <div class='container'>
       <input class='${this.error?"input-error":""} ${this.disabled?"disabled":""} ${this.fullWidth?"full-width":""} ${this.variant} ${this.size}' type='date' id='${this.name|"date"}' name='${this.name|"date"}' .value='${this.value}' @change='${this.handleChange}' @focus='${this.handleFocus}' @blur='${this.handleBlur}' @input='${this.handleInput}' ?disabled='${this.disabled}' />
@@ -1143,6 +1152,13 @@
       font-style: normal;
     }
 
+    .container {
+      display: flex;
+      gap: var(--input-gap);
+      flex-direction: row;
+      align-items: center;
+    }
+
     input {
       box-sizing: border-box;
       padding: 0 var(--input-horizontal-inline-padding);
@@ -1195,6 +1211,11 @@
       outline: 2px solid var(--input-error-border-color);
     }
 
+    .input-error::placeholder {
+      color: var(--input-error-border-color);
+    }
+
+
     .full-width {
       width: 100%;
     }
@@ -1221,8 +1242,10 @@
       padding: 0 var(--input-horizontal-inline-padding-sm, 12px);
     }
   `;static properties={value:{type:String,reflect:!0},shortcut:{type:String,reflect:!0},error:{type:Boolean,reflect:!0,attribute:"error"},disabled:{type:Boolean,reflect:!0},form:{type:String,reflect:!0,attribute:"form"},size:{type:String,reflect:!0,attribute:"size",converter:t=>["sm","md","lg"].includes(t)?t:"md"},fullWidth:{type:Boolean,reflect:!0,attribute:"full-width"},variant:{type:String,reflect:!0,attribute:"variant",converter:t=>["dashed","dotted"].includes(t)?t:"default"},timezone:{type:String,reflect:!0,attribute:"timezone",converter:t=>distinctTimezones.includes(t)?t:"America/New_York"}};constructor(){super(),this.value="",this.shortcut=void 0,this.error=!1,this.disabled=void 0,this.form=void 0,this.size="md",this.fullWidth=!1,this.variant="default",this.timezone="America/New_York",this._internals=this.attachInternals(),this._internals.setValidity({customError:this.errorText&&this.errorText.length>0||!1})}handleChange=t=>(this.value=t.target.value,this._internals.setFormValue(this.value),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0})),this.value);handleInput=t=>(this.value=t.target.value,this._internals.setFormValue(this.value),this.dispatchEvent(new CustomEvent("input",{detail:{value:this.value},bubbles:!0,composed:!0})),this.value);handleFocus=t=>(this.value=t.target.value,this._internals.setFormValue(this.value),this.dispatchEvent(new CustomEvent("focus",{detail:{value:this.value},bubbles:!0,composed:!0})),this.value);handleBlur=t=>(this.value=t.target.value,this._internals.setFormValue(this.value),this.dispatchEvent(new CustomEvent("blur",{detail:{value:this.value},bubbles:!0,composed:!0})),this.value);render(){return e.x`
-    <input class='${this.error?"input-error":""} ${this.disabled?"disabled":""} ${this.fullWidth?"full-width":""} ${this.variant} ${this.size}' type='time' id='${this.name|"time"}' name='${this.name|"time"}' .value='${this.value}' @change='${this.handleChange}' @focus='${this.handleFocus}' @blur='${this.handleBlur}' @input='${this.handleInput}' ?disabled='${this.disabled}' />
-    ${this.shortcut?e.x`<cd-button variant='primary' ?disabled='${this.disabled}'>${this.shortcut}</cd-button>`:""}
+    <div class='container'>
+      <input class='${this.error?"input-error":""} ${this.disabled?"disabled":""} ${this.fullWidth?"full-width":""} ${this.variant} ${this.size}' type='time' id='${this.name|"time"}' name='${this.name|"time"}' .value='${this.value}' @change='${this.handleChange}' @focus='${this.handleFocus}' @blur='${this.handleBlur}' @input='${this.handleInput}' ?disabled='${this.disabled}' />
+      ${this.shortcut?e.x`<cd-button variant='primary' ?disabled='${this.disabled}'>${this.shortcut}</cd-button>`:""}
+    </div>
     `}firstUpdated(){if(!this.shadowRoot){console.warn("Shadow DOM not available, TimeComponent may not render correctly.");return}this.shadowRoot.querySelector("cd-button")&&this.shadowRoot.querySelector("cd-button").addEventListener("button-click",()=>{this.setValue(this.timeNow()),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0}))})}timeNow(){console.log(this.timezone);let t=new Date().toLocaleString("en-US",{timeZone:this.timezone||"America/New_York"});if(console.log(t),console.log(t.split(" ")[2]),t.split(" ")[2]==="PM"){let o=t.split(" ");console.log(o),t=Number(o[1].split(":")[0])+12+":"+o[1].split(":")[1]+":"+o[1].split(":")[2]}else t=t.split(" ")[1];return t}setValue(t){this.value=t,this._internals.setFormValue(t),this.requestUpdate()}setError(t){if(typeof t!="error"){console.warn("Error text must be a string");return}this.error=t,this._internals.setValidity({customError:t}),this.requestUpdate()}setDisabled(t){this.disabled=t,this._internals.setValidity({customError:t}),this.requestUpdate()}}function L(){typeof window<"u"&&!customElements.get("cd-time")&&customElements.define("cd-time",m)}e.registerIcon();class x extends e.i{static styles=e.i$1`
     @font-face {
       font-family: 'GeistMono';
@@ -1290,5 +1313,5 @@
       <div class="icon-container ${this.variant}" @click="${this._handleIconClick}">
         ${this.icon?e.x`<cd-icon name="${this.icon}" size="${this.size|"md"}"></cd-icon>`:e.x`<slot></slot>`}
       </div>
-    `}}function _(){typeof window<"u"&&!customElements.get("cd-icon-container")&&customElements.define("cd-icon-container",x)}exports.Button=a;exports.DateComponent=g;exports.Header=n;exports.IconContainer=x;exports.Input=s;exports.NavBar=l;exports.NavItem=c;exports.NavProfile=p;exports.Search=b;exports.Tab=v;exports.TabContainer=f;exports.Table=d;exports.TimeComponent=m;exports.ToolTip=u;exports.Value=h;exports.registerButton=i;exports.registerDate=R;exports.registerHeader=w;exports.registerIconContainer=_;exports.registerInput=k;exports.registerNavBar=$;exports.registerNavItem=E;exports.registerNavProfile=A;exports.registerSearch=T;exports.registerTab=I;exports.registerTabContainer=B;exports.registerTable=z;exports.registerTime=L;exports.registerToolTip=S;exports.registerValue=C;
+    `}}function _(){typeof window<"u"&&!customElements.get("cd-icon-container")&&customElements.define("cd-icon-container",x)}exports.Button=a;exports.DateComponent=g;exports.Header=n;exports.IconContainer=x;exports.Input=s;exports.NavBar=l;exports.NavItem=c;exports.NavProfile=p;exports.Search=v;exports.Tab=b;exports.TabContainer=f;exports.Table=d;exports.TimeComponent=m;exports.ToolTip=u;exports.Value=h;exports.registerButton=i;exports.registerDate=R;exports.registerHeader=w;exports.registerIconContainer=_;exports.registerInput=k;exports.registerNavBar=$;exports.registerNavItem=E;exports.registerNavProfile=A;exports.registerSearch=T;exports.registerTab=I;exports.registerTabContainer=B;exports.registerTable=z;exports.registerTime=L;exports.registerToolTip=S;exports.registerValue=C;
 //# sourceMappingURL=index.cjs.js.map