voa-ds-core 1.0.59 → 1.0.60

package/dist/cjs/voa-datepicker.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-4P_C6z2q.js');
 
-const datepickerCss = ".datepicker{padding:10px;border:1px solid #ccc;border-radius:4px;font-size:14px;width:100%}";
+const datepickerCss = ".datepicker{padding:10px;border:1px solid var(--structure-colors-border-color, #ccc);border-radius:4px;font-size:14px;width:100%;background-color:var(--structure-colors-bg-base, #ffffff);color:var(--text-primary, inherit)}.datepicker:focus{border-color:var(--brand-base, #007bff);outline:none;box-shadow:0 0 0 2px var(--brand-base-25, rgba(0, 123, 255, 0.25))}";
 
 const DatePicker = class {
     constructor(hostRef) {

package/dist/cjs/voa-datepicker.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"voa-datepicker.entry.cjs.js","sources":["src/components/voa-datepicker/datepicker.css?tag=voa-datepicker&encapsulation=shadow","src/components/voa-datepicker/datepicker.tsx"],"sourcesContent":[".datepicker {\r\n  padding: 10px;\r\n  border: 1px solid #ccc;\r\n  border-radius: 4px;\r\n  font-size: 14px;\r\n  width: 100%;\r\n}\r\n","import { Component, Prop, h, State } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-datepicker\",\r\n  styleUrl: \"datepicker.css\",\r\n  shadow: true,\r\n})\r\nexport class DatePicker {\r\n  @Prop() value: string;\r\n  @State() selectedDate: string;\r\n\r\n  private handleDateChange = (event: Event) => {\r\n    const input = event.target as HTMLInputElement;\r\n    this.selectedDate = input.value;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <input\r\n        class=\"datepicker\"\r\n        type=\"date\"\r\n        value={this.selectedDate}\r\n        onInput={this.handleDateChange}\r\n      />\r\n    );\r\n  }\r\n}\r\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,aAAa,GAAG,6FAA6F;;MCOtG,UAAU,GAAA,MAAA;AALvB,IAAA,WAAA,CAAA,OAAA,EAAA;;AASU,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,KAAY,KAAI;AAC1C,YAAA,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B;AAC9C,YAAA,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,KAAK;AACjC,SAAC;AAYF;IAVC,MAAM,GAAA;AACJ,QAAA,QACEA,oEACE,KAAK,EAAC,YAAY,EAClB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,CAAA;;;;;;;"}
+{"version":3,"file":"voa-datepicker.entry.cjs.js","sources":["src/components/voa-datepicker/datepicker.css?tag=voa-datepicker&encapsulation=shadow","src/components/voa-datepicker/datepicker.tsx"],"sourcesContent":[".datepicker {\r\n  padding: 10px;\r\n  border: 1px solid var(--structure-colors-border-color, #ccc);\r\n  border-radius: 4px;\r\n  font-size: 14px;\r\n  width: 100%;\r\n  background-color: var(--structure-colors-bg-base, #ffffff);\r\n  color: var(--text-primary, inherit);\r\n}\r\n\r\n.datepicker:focus {\r\n  border-color: var(--brand-base, #007bff);\r\n  outline: none;\r\n  box-shadow: 0 0 0 2px var(--brand-base-25, rgba(0, 123, 255, 0.25));\r\n}\r\n","import { Component, Prop, h, State } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-datepicker\",\r\n  styleUrl: \"datepicker.css\",\r\n  shadow: true,\r\n})\r\nexport class DatePicker {\r\n  @Prop() value: string;\r\n  @State() selectedDate: string;\r\n\r\n  private handleDateChange = (event: Event) => {\r\n    const input = event.target as HTMLInputElement;\r\n    this.selectedDate = input.value;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <input\r\n        class=\"datepicker\"\r\n        type=\"date\"\r\n        value={this.selectedDate}\r\n        onInput={this.handleDateChange}\r\n      />\r\n    );\r\n  }\r\n}\r\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,aAAa,GAAG,0WAA0W;;MCOnX,UAAU,GAAA,MAAA;AALvB,IAAA,WAAA,CAAA,OAAA,EAAA;;AASU,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,KAAY,KAAI;AAC1C,YAAA,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B;AAC9C,YAAA,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,KAAK;AACjC,SAAC;AAYF;IAVC,MAAM,GAAA;AACJ,QAAA,QACEA,oEACE,KAAK,EAAC,YAAY,EAClB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,CAAA;;;;;;;"}

package/dist/cjs/voa-drawer.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-4P_C6z2q.js');
 
-const drawerCss = ".drawer{position:fixed;top:0;left:0;height:100%;width:250px;background-color:#f4f4f4;box-shadow:2px 0 5px rgba(0, 0, 0, 0.3);overflow-x:hidden;transform:translateX(-100%);transition:transform 0.3s ease-out}.drawer.open{transform:translateX(0)}";
+const drawerCss = ".drawer{position:fixed;top:0;left:0;height:100%;width:250px;background-color:var(--structure-colors-bg-container, #f4f4f4);box-shadow:2px 0 5px rgba(0, 0, 0, 0.3);overflow-x:hidden;transform:translateX(-100%);transition:transform 0.3s ease-out;color:var(--text-primary, inherit)}.drawer.open{transform:translateX(0)}";
 
 const Drawer = class {
     constructor(hostRef) {

package/dist/cjs/voa-drawer.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"voa-drawer.entry.cjs.js","sources":["src/components/voa-drawer/drawer.css?tag=voa-drawer&encapsulation=shadow","src/components/voa-drawer/drawer.tsx"],"sourcesContent":[".drawer {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  height: 100%;\r\n  width: 250px;\r\n  background-color: #f4f4f4;\r\n  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);\r\n  overflow-x: hidden;\r\n  transform: translateX(-100%);\r\n  transition: transform 0.3s ease-out;\r\n}\r\n\r\n.drawer.open {\r\n  transform: translateX(0);\r\n}\r\n","import { Component, Prop, State, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-drawer\",\r\n  styleUrl: \"drawer.css\",\r\n  shadow: true,\r\n})\r\nexport class Drawer {\r\n  @Prop() open: boolean = false;\r\n  @State() isOpen: boolean = this.open;\r\n\r\n  toggleDrawer = () => {\r\n    this.isOpen = !this.isOpen;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <div>\r\n        <button onClick={this.toggleDrawer}>\r\n          {this.isOpen ? \"Close Drawer\" : \"Open Drawer\"}\r\n        </button>\r\n        <div class={`drawer ${this.isOpen ? \"open\" : \"\"}`}>\r\n          <slot></slot>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,SAAS,GAAG,qPAAqP;;MCO1P,MAAM,GAAA,MAAA;AALnB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAMU,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;AACpB,QAAA,IAAA,CAAA,MAAM,GAAY,IAAI,CAAC,IAAI;AAEpC,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;AAClB,YAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM;AAC5B,SAAC;AAcF;IAZC,MAAM,GAAA;AACJ,QAAA,QACEA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACEA,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,OAAO,EAAE,IAAI,CAAC,YAAY,IAC/B,IAAI,CAAC,MAAM,GAAG,cAAc,GAAG,aAAa,CACtC,EACTA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,UAAU,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,EAAE,CAAE,CAAA,EAAA,EAC/CA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACF;;;;;;;"}
+{"version":3,"file":"voa-drawer.entry.cjs.js","sources":["src/components/voa-drawer/drawer.css?tag=voa-drawer&encapsulation=shadow","src/components/voa-drawer/drawer.tsx"],"sourcesContent":[".drawer {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  height: 100%;\r\n  width: 250px;\r\n  background-color: var(--structure-colors-bg-container, #f4f4f4);\r\n  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);\r\n  overflow-x: hidden;\r\n  transform: translateX(-100%);\r\n  transition: transform 0.3s ease-out;\r\n  color: var(--text-primary, inherit);\r\n}\r\n\r\n.drawer.open {\r\n  transform: translateX(0);\r\n}\r\n","import { Component, Prop, State, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-drawer\",\r\n  styleUrl: \"drawer.css\",\r\n  shadow: true,\r\n})\r\nexport class Drawer {\r\n  @Prop() open: boolean = false;\r\n  @State() isOpen: boolean = this.open;\r\n\r\n  toggleDrawer = () => {\r\n    this.isOpen = !this.isOpen;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <div>\r\n        <button onClick={this.toggleDrawer}>\r\n          {this.isOpen ? \"Close Drawer\" : \"Open Drawer\"}\r\n        </button>\r\n        <div class={`drawer ${this.isOpen ? \"open\" : \"\"}`}>\r\n          <slot></slot>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,SAAS,GAAG,8TAA8T;;MCOnU,MAAM,GAAA,MAAA;AALnB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAMU,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;AACpB,QAAA,IAAA,CAAA,MAAM,GAAY,IAAI,CAAC,IAAI;AAEpC,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;AAClB,YAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM;AAC5B,SAAC;AAcF;IAZC,MAAM,GAAA;AACJ,QAAA,QACEA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACEA,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,OAAO,EAAE,IAAI,CAAC,YAAY,IAC/B,IAAI,CAAC,MAAM,GAAG,cAAc,GAAG,aAAa,CACtC,EACTA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,UAAU,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,EAAE,CAAE,CAAA,EAAA,EAC/CA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACF;;;;;;;"}

package/dist/cjs/voa-dropdown.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-4P_C6z2q.js');
 
-const dropdownCss = ".dropdown{position:relative;display:inline-block}.dropdown-button{padding:10px 20px;border:1px solid #ccc;border-radius:4px;background-color:#fff;cursor:pointer;transition:background-color 0.2s}.dropdown-list{position:absolute;top:100%;left:0;width:100%;border:1px solid #ccc;border-radius:4px;background-color:#fff;list-style:none;padding:0;margin:0;z-index:1}.dropdown-list li{padding:10px;cursor:pointer}.dropdown-list li:hover{background-color:#f4f4f4}";
+const dropdownCss = ".dropdown{position:relative;display:inline-block}.dropdown-button{padding:10px 20px;border:1px solid var(--structure-colors-border-color, #ccc);border-radius:4px;background-color:var(--structure-colors-bg-base, #fff);color:var(--text-primary, inherit);cursor:pointer;transition:background-color 0.2s, border-color 0.2s}.dropdown-button:hover{border-color:var(--brand-base, #007bff)}.dropdown-list{position:absolute;top:100%;left:0;width:100%;border:1px solid var(--structure-colors-border-color, #ccc);border-radius:4px;background-color:var(--structure-colors-bg-base, #fff);list-style:none;padding:0;margin:0;z-index:1;box-shadow:0 2px 8px rgba(0, 0, 0, 0.1)}.dropdown-list li{padding:10px;cursor:pointer;color:var(--text-primary, inherit);transition:background-color 0.2s}.dropdown-list li:hover{background-color:var(--structure-colors-bg-container, #f4f4f4)}.dropdown-list li.selected{background-color:var(--brand-base-15, rgba(0, 123, 255, 0.15));color:var(--brand-base, #007bff)}";
 
 const Dropdown = class {
     constructor(hostRef) {

package/dist/cjs/voa-dropdown.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"voa-dropdown.entry.cjs.js","sources":["src/components/voa-dropdown/dropdown.css?tag=voa-dropdown&encapsulation=shadow","src/components/voa-dropdown/dropdown.tsx"],"sourcesContent":[".dropdown {\r\n  position: relative;\r\n  display: inline-block;\r\n}\r\n\r\n.dropdown-button {\r\n  padding: 10px 20px;\r\n  border: 1px solid #ccc;\r\n  border-radius: 4px;\r\n  background-color: #fff;\r\n  cursor: pointer;\r\n  transition: background-color 0.2s;\r\n}\r\n\r\n.dropdown-list {\r\n  position: absolute;\r\n  top: 100%;\r\n  left: 0;\r\n  width: 100%;\r\n  border: 1px solid #ccc;\r\n  border-radius: 4px;\r\n  background-color: #fff;\r\n  list-style: none;\r\n  padding: 0;\r\n  margin: 0;\r\n  z-index: 1;\r\n}\r\n\r\n.dropdown-list li {\r\n  padding: 10px;\r\n  cursor: pointer;\r\n}\r\n\r\n.dropdown-list li:hover {\r\n  background-color: #f4f4f4;\r\n}\r\n","import { Component, Prop, State, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-dropdown\",\r\n  styleUrl: \"dropdown.css\",\r\n  shadow: true,\r\n})\r\nexport class Dropdown {\r\n  @Prop() options: string[] = [];\r\n  @State() isOpen: boolean = false;\r\n  @State() selected: string;\r\n\r\n  toggleDropdown = () => {\r\n    this.isOpen = !this.isOpen;\r\n  };\r\n\r\n  selectOption = (option: string) => {\r\n    this.selected = option;\r\n    this.isOpen = false;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"dropdown\">\r\n        <button onClick={this.toggleDropdown} class=\"dropdown-button\">\r\n          {this.selected || \"Select an option\"}\r\n        </button>\r\n        {this.isOpen && (\r\n          <ul class=\"dropdown-list\">\r\n            {this.options.map((option) => (\r\n              <li onClick={() => this.selectOption(option)}>{option}</li>\r\n            ))}\r\n          </ul>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,WAAW,GAAG,0cAA0c;;MCOjd,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAMU,QAAA,IAAO,CAAA,OAAA,GAAa,EAAE;AACrB,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAGhC,QAAA,IAAc,CAAA,cAAA,GAAG,MAAK;AACpB,YAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM;AAC5B,SAAC;AAED,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,MAAc,KAAI;AAChC,YAAA,IAAI,CAAC,QAAQ,GAAG,MAAM;AACtB,YAAA,IAAI,CAAC,MAAM,GAAG,KAAK;AACrB,SAAC;AAkBF;IAhBC,MAAM,GAAA;QACJ,QACEA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,UAAU,EAAA,EACnBA,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,OAAO,EAAE,IAAI,CAAC,cAAc,EAAE,KAAK,EAAC,iBAAiB,IAC1D,IAAI,CAAC,QAAQ,IAAI,kBAAkB,CAC7B,EACR,IAAI,CAAC,MAAM,KACVA,OAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACtB,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACvBA,OAAI,CAAA,IAAA,EAAA,EAAA,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAG,EAAA,MAAM,CAAM,CAC5D,CAAC,CACC,CACN,CACG;;;;;;;"}
+{"version":3,"file":"voa-dropdown.entry.cjs.js","sources":["src/components/voa-dropdown/dropdown.css?tag=voa-dropdown&encapsulation=shadow","src/components/voa-dropdown/dropdown.tsx"],"sourcesContent":[".dropdown {\r\n  position: relative;\r\n  display: inline-block;\r\n}\r\n\r\n.dropdown-button {\r\n  padding: 10px 20px;\r\n  border: 1px solid var(--structure-colors-border-color, #ccc);\r\n  border-radius: 4px;\r\n  background-color: var(--structure-colors-bg-base, #fff);\r\n  color: var(--text-primary, inherit);\r\n  cursor: pointer;\r\n  transition: background-color 0.2s, border-color 0.2s;\r\n}\r\n\r\n.dropdown-button:hover {\r\n  border-color: var(--brand-base, #007bff);\r\n}\r\n\r\n.dropdown-list {\r\n  position: absolute;\r\n  top: 100%;\r\n  left: 0;\r\n  width: 100%;\r\n  border: 1px solid var(--structure-colors-border-color, #ccc);\r\n  border-radius: 4px;\r\n  background-color: var(--structure-colors-bg-base, #fff);\r\n  list-style: none;\r\n  padding: 0;\r\n  margin: 0;\r\n  z-index: 1;\r\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.dropdown-list li {\r\n  padding: 10px;\r\n  cursor: pointer;\r\n  color: var(--text-primary, inherit);\r\n  transition: background-color 0.2s;\r\n}\r\n\r\n.dropdown-list li:hover {\r\n  background-color: var(--structure-colors-bg-container, #f4f4f4);\r\n}\r\n\r\n.dropdown-list li.selected {\r\n  background-color: var(--brand-base-15, rgba(0, 123, 255, 0.15));\r\n  color: var(--brand-base, #007bff);\r\n}\r\n","import { Component, Prop, State, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-dropdown\",\r\n  styleUrl: \"dropdown.css\",\r\n  shadow: true,\r\n})\r\nexport class Dropdown {\r\n  @Prop() options: string[] = [];\r\n  @State() isOpen: boolean = false;\r\n  @State() selected: string;\r\n\r\n  toggleDropdown = () => {\r\n    this.isOpen = !this.isOpen;\r\n  };\r\n\r\n  selectOption = (option: string) => {\r\n    this.selected = option;\r\n    this.isOpen = false;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"dropdown\">\r\n        <button onClick={this.toggleDropdown} class=\"dropdown-button\">\r\n          {this.selected || \"Select an option\"}\r\n        </button>\r\n        {this.isOpen && (\r\n          <ul class=\"dropdown-list\">\r\n            {this.options.map((option) => (\r\n              <li onClick={() => this.selectOption(option)}>{option}</li>\r\n            ))}\r\n          </ul>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,WAAW,GAAG,09BAA09B;;MCOj+B,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAMU,QAAA,IAAO,CAAA,OAAA,GAAa,EAAE;AACrB,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAGhC,QAAA,IAAc,CAAA,cAAA,GAAG,MAAK;AACpB,YAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM;AAC5B,SAAC;AAED,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,MAAc,KAAI;AAChC,YAAA,IAAI,CAAC,QAAQ,GAAG,MAAM;AACtB,YAAA,IAAI,CAAC,MAAM,GAAG,KAAK;AACrB,SAAC;AAkBF;IAhBC,MAAM,GAAA;QACJ,QACEA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,UAAU,EAAA,EACnBA,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,OAAO,EAAE,IAAI,CAAC,cAAc,EAAE,KAAK,EAAC,iBAAiB,IAC1D,IAAI,CAAC,QAAQ,IAAI,kBAAkB,CAC7B,EACR,IAAI,CAAC,MAAM,KACVA,OAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACtB,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACvBA,OAAI,CAAA,IAAA,EAAA,EAAA,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAG,EAAA,MAAM,CAAM,CAC5D,CAAC,CACC,CACN,CACG;;;;;;;"}

package/dist/cjs/voa-link.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-4P_C6z2q.js');
 
-const linkCss = ".link{color:#007bff;text-decoration:none;transition:color 0.2s}.link:hover{color:#0056b3}";
+const linkCss = ".link{color:var(--brand-base, #007bff);text-decoration:none;transition:color 0.2s}.link:hover{color:var(--brand-hover, #0056b3)}";
 
 const Link = class {
     constructor(hostRef) {

package/dist/cjs/voa-link.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"voa-link.entry.cjs.js","sources":["src/components/voa-link/link.css?tag=voa-link&encapsulation=shadow","src/components/voa-link/link.tsx"],"sourcesContent":[".link {\r\n  color: #007bff;\r\n  text-decoration: none;\r\n  transition: color 0.2s;\r\n}\r\n\r\n.link:hover {\r\n  color: #0056b3;\r\n}\r\n","import { Component, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-link\",\r\n  styleUrl: \"link.css\",\r\n  shadow: true,\r\n})\r\nexport class Link {\r\n  @Prop() href: string;\r\n  @Prop() target: string = \"_self\";\r\n\r\n  render() {\r\n    return (\r\n      <a class=\"link\" href={this.href} target={this.target}>\r\n        <slot></slot>\r\n      </a>\r\n    );\r\n  }\r\n}\r\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,OAAO,GAAG,2FAA2F;;MCO9F,IAAI,GAAA,MAAA;AALjB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOU,QAAA,IAAM,CAAA,MAAA,GAAW,OAAO;AASjC;IAPC,MAAM,GAAA;AACJ,QAAA,QACEA,OAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAA,EAClDA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACX;;;;;;;"}
+{"version":3,"file":"voa-link.entry.cjs.js","sources":["src/components/voa-link/link.css?tag=voa-link&encapsulation=shadow","src/components/voa-link/link.tsx"],"sourcesContent":[".link {\r\n  color: var(--brand-base, #007bff);\r\n  text-decoration: none;\r\n  transition: color 0.2s;\r\n}\r\n\r\n.link:hover {\r\n  color: var(--brand-hover, #0056b3);\r\n}\r\n","import { Component, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-link\",\r\n  styleUrl: \"link.css\",\r\n  shadow: true,\r\n})\r\nexport class Link {\r\n  @Prop() href: string;\r\n  @Prop() target: string = \"_self\";\r\n\r\n  render() {\r\n    return (\r\n      <a class=\"link\" href={this.href} target={this.target}>\r\n        <slot></slot>\r\n      </a>\r\n    );\r\n  }\r\n}\r\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,OAAO,GAAG,kIAAkI;;MCOrI,IAAI,GAAA,MAAA;AALjB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOU,QAAA,IAAM,CAAA,MAAA,GAAW,OAAO;AASjC;IAPC,MAAM,GAAA;AACJ,QAAA,QACEA,OAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAA,EAClDA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACX;;;;;;;"}

package/dist/cjs/voa-list.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-4P_C6z2q.js');
 
-const listCss = ".list{list-style:none;padding:0;margin:0}.list li{padding:10px;border-bottom:1px solid #ddd}.list li:last-child{border-bottom:none}";
+const listCss = ".list{list-style:none;padding:0;margin:0}.list li{padding:10px;border-bottom:1px solid var(--structure-colors-border-color-secondary, #ddd);color:var(--text-primary, inherit)}.list li:last-child{border-bottom:none}.list li:hover{background-color:var(--structure-colors-bg-container, #f9f9f9)}";
 
 const List = class {
     constructor(hostRef) {

package/dist/cjs/voa-list.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"voa-list.entry.cjs.js","sources":["src/components/voa-list/list.css?tag=voa-list&encapsulation=shadow","src/components/voa-list/list.tsx"],"sourcesContent":[".list {\r\n  list-style: none;\r\n  padding: 0;\r\n  margin: 0;\r\n}\r\n\r\n.list li {\r\n  padding: 10px;\r\n  border-bottom: 1px solid #ddd;\r\n}\r\n\r\n.list li:last-child {\r\n  border-bottom: none;\r\n}\r\n","import { Component, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-list\",\r\n  styleUrl: \"list.css\",\r\n  shadow: true,\r\n})\r\nexport class List {\r\n  @Prop() items: string[] = [];\r\n\r\n  render() {\r\n    return (\r\n      <ul class=\"list\">\r\n        {this.items.map((item) => (\r\n          <li>{item}</li>\r\n        ))}\r\n      </ul>\r\n    );\r\n  }\r\n}\r\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,OAAO,GAAG,qIAAqI;;MCOxI,IAAI,GAAA,MAAA;AALjB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAMU,QAAA,IAAK,CAAA,KAAA,GAAa,EAAE;AAW7B;IATC,MAAM,GAAA;AACJ,QAAA,QACEA,OAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,IACb,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,MACnBA,OAAA,CAAA,IAAA,EAAA,IAAA,EAAK,IAAI,CAAM,CAChB,CAAC,CACC;;;;;;;"}
+{"version":3,"file":"voa-list.entry.cjs.js","sources":["src/components/voa-list/list.css?tag=voa-list&encapsulation=shadow","src/components/voa-list/list.tsx"],"sourcesContent":[".list {\r\n  list-style: none;\r\n  padding: 0;\r\n  margin: 0;\r\n}\r\n\r\n.list li {\r\n  padding: 10px;\r\n  border-bottom: 1px solid var(--structure-colors-border-color-secondary, #ddd);\r\n  color: var(--text-primary, inherit);\r\n}\r\n\r\n.list li:last-child {\r\n  border-bottom: none;\r\n}\r\n\r\n.list li:hover {\r\n  background-color: var(--structure-colors-bg-container, #f9f9f9);\r\n}\r\n","import { Component, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-list\",\r\n  styleUrl: \"list.css\",\r\n  shadow: true,\r\n})\r\nexport class List {\r\n  @Prop() items: string[] = [];\r\n\r\n  render() {\r\n    return (\r\n      <ul class=\"list\">\r\n        {this.items.map((item) => (\r\n          <li>{item}</li>\r\n        ))}\r\n      </ul>\r\n    );\r\n  }\r\n}\r\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,OAAO,GAAG,sSAAsS;;MCOzS,IAAI,GAAA,MAAA;AALjB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAMU,QAAA,IAAK,CAAA,KAAA,GAAa,EAAE;AAW7B;IATC,MAAM,GAAA;AACJ,QAAA,QACEA,OAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,IACb,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,MACnBA,OAAA,CAAA,IAAA,EAAA,IAAA,EAAK,IAAI,CAAM,CAChB,CAAC,CACC;;;;;;;"}

package/dist/cjs/voa-progress.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-4P_C6z2q.js');
 
-const progressCss = ".progress{width:100%;background-color:#eee;border-radius:4px;overflow:hidden}.bar{height:20px;background-color:#007bff;transition:width 0.2s}";
+const progressCss = ".progress{width:100%;background-color:var(--structure-colors-bg-container, #eee);border-radius:4px;overflow:hidden}.bar{height:20px;background-color:var(--brand-base, #007bff);transition:width 0.2s}";
 
 const Progress = class {
     constructor(hostRef) {

package/dist/cjs/voa-progress.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"voa-progress.entry.cjs.js","sources":["src/components/voa-progress/progress.css?tag=voa-progress&encapsulation=shadow","src/components/voa-progress/progress.tsx"],"sourcesContent":[".progress {\r\n  width: 100%;\r\n  background-color: #eee;\r\n  border-radius: 4px;\r\n  overflow: hidden;\r\n}\r\n\r\n.bar {\r\n  height: 20px;\r\n  background-color: #007bff;\r\n  transition: width 0.2s;\r\n}\r\n","import { Component, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-progress\",\r\n  styleUrl: \"progress.css\",\r\n  shadow: true,\r\n})\r\nexport class Progress {\r\n  @Prop() value: number = 0;\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"progress\">\r\n        <div class=\"bar\" style={{ width: `${this.value}%` }}></div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,WAAW,GAAG,+IAA+I;;MCOtJ,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAMU,QAAA,IAAK,CAAA,KAAA,GAAW,CAAC;AAS1B;IAPC,MAAM,GAAA;AACJ,QAAA,QACEA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,UAAU,EAAA,EACnBA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,KAAK,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAG,CAAA,CAAA,EAAE,EAAQ,CAAA,CACvD;;;;;;;"}
+{"version":3,"file":"voa-progress.entry.cjs.js","sources":["src/components/voa-progress/progress.css?tag=voa-progress&encapsulation=shadow","src/components/voa-progress/progress.tsx"],"sourcesContent":[".progress {\r\n  width: 100%;\r\n  background-color: var(--structure-colors-bg-container, #eee);\r\n  border-radius: 4px;\r\n  overflow: hidden;\r\n}\r\n\r\n.bar {\r\n  height: 20px;\r\n  background-color: var(--brand-base, #007bff);\r\n  transition: width 0.2s;\r\n}\r\n","import { Component, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-progress\",\r\n  styleUrl: \"progress.css\",\r\n  shadow: true,\r\n})\r\nexport class Progress {\r\n  @Prop() value: number = 0;\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"progress\">\r\n        <div class=\"bar\" style={{ width: `${this.value}%` }}></div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,WAAW,GAAG,wMAAwM;;MCO/M,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAMU,QAAA,IAAK,CAAA,KAAA,GAAW,CAAC;AAS1B;IAPC,MAAM,GAAA;AACJ,QAAA,QACEA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,UAAU,EAAA,EACnBA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,KAAK,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAG,CAAA,CAAA,EAAE,EAAQ,CAAA,CACvD;;;;;;;"}

package/dist/cjs/voa-skeleton.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-4P_C6z2q.js');
 
-const skeletonCss = ".skeleton{border-radius:2px;display:inline-block;line-height:100%;width:100%;background-color:#fff;background-size:1000px 1000px;background-image:linear-gradient(\r\n        100deg,\r\n        #e8e8e8 20%,\r\n        #fafafa 50%,\r\n        #e8e8e8 60%\r\n    );animation:placeholderShimmer 1.5s linear infinite forwards}.skeleton--circle{border-radius:50%}@keyframes placeholderShimmer{0%{background-position:-500px 0}100%{background-position:500px 0}}";
+const skeletonCss = ".skeleton{border-radius:2px;display:inline-block;line-height:100%;width:100%;background-color:var(--structure-colors-bg-base, #fff);background-size:1000px 1000px;background-image:linear-gradient(\r\n    100deg,\r\n    var(--structure-colors-bg-elevated, #e8e8e8) 20%,\r\n    var(--structure-colors-bg-container, #fafafa) 50%,\r\n    var(--structure-colors-bg-elevated, #e8e8e8) 60%\r\n  );animation:placeholderShimmer 1.5s linear infinite forwards}.skeleton--circle{border-radius:50%}@keyframes placeholderShimmer{0%{background-position:-500px 0}100%{background-position:500px 0}}";
 
 const Skeleton = class {
     constructor(hostRef) {

package/dist/cjs/voa-skeleton.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"voa-skeleton.entry.cjs.js","sources":["src/components/voa-skeleton/skeleton.css?tag=voa-skeleton","src/components/voa-skeleton/skeleton.tsx"],"sourcesContent":[".skeleton{\r\n    border-radius: 2px;\r\n    display: inline-block;\r\n    line-height: 100%;\r\n    width: 100%;\r\n    background-color: #fff;\r\n    background-size: 1000px 1000px;\r\n    background-image: linear-gradient(\r\n        100deg,\r\n        #e8e8e8 20%,\r\n        #fafafa 50%,\r\n        #e8e8e8 60%\r\n    );\r\n    animation: placeholderShimmer 1.5s linear infinite forwards;\r\n}\r\n\r\n.skeleton--circle{\r\n    border-radius: 50%;\r\n}\r\n\r\n@keyframes placeholderShimmer{\r\n    0%{\r\n        background-position: -500px 0;\r\n    }\r\n    \r\n    100%{\r\n        background-position: 500px 0;\r\n    }\r\n\r\n}","import { Component, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n    tag: \"voa-skeleton\",\r\n    styleUrl: \"skeleton.css\",\r\n    shadow: false,\r\n})\r\nexport class Skeleton {\r\n    @Prop() width: string = \"200px\";\r\n    @Prop() height: string = \"100px\";\r\n    @Prop() variant: \"text\" | \"circle\" ;\r\n\r\n    handleClass() {\r\n        const isCircle = this.variant === 'circle';\r\n        return `skeleton ${isCircle ? 'skeleton--circle' : ''}`;;\r\n    }\r\n\r\n    render() {\r\n        return <span class={this.handleClass()} \r\n        style={{ width: this.width, height: this.height}}\r\n        ></span>\r\n    }\r\n}\r\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,WAAW,GAAG,ucAAuc;;MCO9c,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAMY,QAAA,IAAK,CAAA,KAAA,GAAW,OAAO;AACvB,QAAA,IAAM,CAAA,MAAA,GAAW,OAAO;AAanC;IAVG,WAAW,GAAA;AACP,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,KAAK,QAAQ;QAC1C,OAAO,CAAA,SAAA,EAAY,QAAQ,GAAG,kBAAkB,GAAG,EAAE,CAAA,CAAE;;IAG3D,MAAM,GAAA;AACF,QAAA,OAAOA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,EACtC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAC,EAAA,CACxC;;;;;;;"}
+{"version":3,"file":"voa-skeleton.entry.cjs.js","sources":["src/components/voa-skeleton/skeleton.css?tag=voa-skeleton","src/components/voa-skeleton/skeleton.tsx"],"sourcesContent":[".skeleton {\r\n  border-radius: 2px;\r\n  display: inline-block;\r\n  line-height: 100%;\r\n  width: 100%;\r\n  background-color: var(--structure-colors-bg-base, #fff);\r\n  background-size: 1000px 1000px;\r\n  background-image: linear-gradient(\r\n    100deg,\r\n    var(--structure-colors-bg-elevated, #e8e8e8) 20%,\r\n    var(--structure-colors-bg-container, #fafafa) 50%,\r\n    var(--structure-colors-bg-elevated, #e8e8e8) 60%\r\n  );\r\n  animation: placeholderShimmer 1.5s linear infinite forwards;\r\n}\r\n\r\n.skeleton--circle {\r\n  border-radius: 50%;\r\n}\r\n\r\n@keyframes placeholderShimmer {\r\n  0% {\r\n    background-position: -500px 0;\r\n  }\r\n\r\n  100% {\r\n    background-position: 500px 0;\r\n  }\r\n}\r\n","import { Component, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n    tag: \"voa-skeleton\",\r\n    styleUrl: \"skeleton.css\",\r\n    shadow: false,\r\n})\r\nexport class Skeleton {\r\n    @Prop() width: string = \"200px\";\r\n    @Prop() height: string = \"100px\";\r\n    @Prop() variant: \"text\" | \"circle\" ;\r\n\r\n    handleClass() {\r\n        const isCircle = this.variant === 'circle';\r\n        return `skeleton ${isCircle ? 'skeleton--circle' : ''}`;;\r\n    }\r\n\r\n    render() {\r\n        return <span class={this.handleClass()} \r\n        style={{ width: this.width, height: this.height}}\r\n        ></span>\r\n    }\r\n}\r\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,WAAW,GAAG,skBAAskB;;MCO7kB,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAMY,QAAA,IAAK,CAAA,KAAA,GAAW,OAAO;AACvB,QAAA,IAAM,CAAA,MAAA,GAAW,OAAO;AAanC;IAVG,WAAW,GAAA;AACP,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,KAAK,QAAQ;QAC1C,OAAO,CAAA,SAAA,EAAY,QAAQ,GAAG,kBAAkB,GAAG,EAAE,CAAA,CAAE;;IAG3D,MAAM,GAAA;AACF,QAAA,OAAOA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,EACtC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAC,EAAA,CACxC;;;;;;;"}

package/dist/cjs/voa-stepper.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-4P_C6z2q.js');
 
-const stepperCss = ".stepper{display:flex;align-items:center}.step{padding:10px 20px;border:1px solid #ccc;border-radius:4px;background-color:#f9f9f9;cursor:pointer;transition:background-color 0.2s;margin-right:10px}.step.active{background-color:#007bff;color:white}.step:hover{background-color:#eee}";
+const stepperCss = ".stepper{display:flex;align-items:center}.step{padding:10px 20px;border:1px solid var(--structure-colors-border-color, #ccc);border-radius:4px;background-color:var(--structure-colors-bg-container, #f9f9f9);cursor:pointer;transition:background-color 0.2s;margin-right:10px;color:var(--text-primary, inherit)}.step.active{background-color:var(--brand-base, #007bff);color:var(--text-on-primary, white);border-color:var(--brand-hover, #0056b3)}.step:hover:not(.active){background-color:var(--structure-colors-bg-elevated, #eee)}";
 
 const Stepper = class {
     constructor(hostRef) {

package/dist/cjs/voa-stepper.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"voa-stepper.entry.cjs.js","sources":["src/components/voa-stepper/stepper.css?tag=voa-stepper&encapsulation=shadow","src/components/voa-stepper/stepper.tsx"],"sourcesContent":[".stepper {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.step {\r\n  padding: 10px 20px;\r\n  border: 1px solid #ccc;\r\n  border-radius: 4px;\r\n  background-color: #f9f9f9;\r\n  cursor: pointer;\r\n  transition: background-color 0.2s;\r\n  margin-right: 10px;\r\n}\r\n\r\n.step.active {\r\n  background-color: #007bff;\r\n  color: white;\r\n}\r\n\r\n.step:hover {\r\n  background-color: #eee;\r\n}\r\n","import { Component, Prop, h, State, Event, EventEmitter } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-stepper\",\r\n  styleUrl: \"stepper.css\",\r\n  shadow: true,\r\n})\r\nexport class Stepper {\r\n  @Prop() steps: string[] = [];\r\n  @Prop() currentStep: number = 0;\r\n  @State() activeStep: number = this.currentStep;\r\n  @Event() stepChanged: EventEmitter<number>;\r\n\r\n  goToStep(step: number) {\r\n    this.activeStep = step;\r\n    this.stepChanged.emit(this.activeStep);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"stepper\">\r\n        {this.steps.map((step, index) => (\r\n          <div\r\n            class={`step ${this.activeStep === index ? \"active\" : \"\"}`}\r\n            onClick={() => this.goToStep(index)}\r\n          >\r\n            {step}\r\n          </div>\r\n        ))}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"names":["h","index"],"mappings":";;;;AAAA,MAAM,UAAU,GAAG,0RAA0R;;MCOhS,OAAO,GAAA,MAAA;AALpB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAMU,QAAA,IAAK,CAAA,KAAA,GAAa,EAAE;AACpB,QAAA,IAAW,CAAA,WAAA,GAAW,CAAC;AACtB,QAAA,IAAA,CAAA,UAAU,GAAW,IAAI,CAAC,WAAW;AAsB/C;AAnBC,IAAA,QAAQ,CAAC,IAAY,EAAA;AACnB,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI;QACtB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC;;IAGxC,MAAM,GAAA;AACJ,QAAA,QACEA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EACjB,EAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAEC,OAAK,MAC1BD,OACE,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,CAAA,KAAA,EAAQ,IAAI,CAAC,UAAU,KAAKC,OAAK,GAAG,QAAQ,GAAG,EAAE,CAAA,CAAE,EAC1D,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,CAACA,OAAK,CAAC,EAAA,EAElC,IAAI,CACD,CACP,CAAC,CACE;;;;;;;"}
+{"version":3,"file":"voa-stepper.entry.cjs.js","sources":["src/components/voa-stepper/stepper.css?tag=voa-stepper&encapsulation=shadow","src/components/voa-stepper/stepper.tsx"],"sourcesContent":[".stepper {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.step {\r\n  padding: 10px 20px;\r\n  border: 1px solid var(--structure-colors-border-color, #ccc);\r\n  border-radius: 4px;\r\n  background-color: var(--structure-colors-bg-container, #f9f9f9);\r\n  cursor: pointer;\r\n  transition: background-color 0.2s;\r\n  margin-right: 10px;\r\n  color: var(--text-primary, inherit);\r\n}\r\n\r\n.step.active {\r\n  background-color: var(--brand-base, #007bff);\r\n  color: var(--text-on-primary, white);\r\n  border-color: var(--brand-hover, #0056b3);\r\n}\r\n\r\n.step:hover:not(.active) {\r\n  background-color: var(--structure-colors-bg-elevated, #eee);\r\n}\r\n","import { Component, Prop, h, State, Event, EventEmitter } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-stepper\",\r\n  styleUrl: \"stepper.css\",\r\n  shadow: true,\r\n})\r\nexport class Stepper {\r\n  @Prop() steps: string[] = [];\r\n  @Prop() currentStep: number = 0;\r\n  @State() activeStep: number = this.currentStep;\r\n  @Event() stepChanged: EventEmitter<number>;\r\n\r\n  goToStep(step: number) {\r\n    this.activeStep = step;\r\n    this.stepChanged.emit(this.activeStep);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"stepper\">\r\n        {this.steps.map((step, index) => (\r\n          <div\r\n            class={`step ${this.activeStep === index ? \"active\" : \"\"}`}\r\n            onClick={() => this.goToStep(index)}\r\n          >\r\n            {step}\r\n          </div>\r\n        ))}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"names":["h","index"],"mappings":";;;;AAAA,MAAM,UAAU,GAAG,+gBAA+gB;;MCOrhB,OAAO,GAAA,MAAA;AALpB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAMU,QAAA,IAAK,CAAA,KAAA,GAAa,EAAE;AACpB,QAAA,IAAW,CAAA,WAAA,GAAW,CAAC;AACtB,QAAA,IAAA,CAAA,UAAU,GAAW,IAAI,CAAC,WAAW;AAsB/C;AAnBC,IAAA,QAAQ,CAAC,IAAY,EAAA;AACnB,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI;QACtB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC;;IAGxC,MAAM,GAAA;AACJ,QAAA,QACEA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EACjB,EAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAEC,OAAK,MAC1BD,OACE,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,CAAA,KAAA,EAAQ,IAAI,CAAC,UAAU,KAAKC,OAAK,GAAG,QAAQ,GAAG,EAAE,CAAA,CAAE,EAC1D,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,CAACA,OAAK,CAAC,EAAA,EAElC,IAAI,CACD,CACP,CAAC,CACE;;;;;;;"}

package/dist/cjs/voa-table.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-4P_C6z2q.js');
 
-const tableCss = ".table{width:100%;border-collapse:collapse}th,td{padding:10px;border:1px solid #ddd;text-align:left}th{background-color:#f4f4f4}";
+const tableCss = ".table{width:100%;border-collapse:collapse;background-color:var(--structure-colors-bg-base, #ffffff)}th,td{padding:10px;border:1px solid var(--structure-colors-border-color-secondary, #ddd);text-align:left;color:var(--text-primary, inherit)}th{background-color:var(--structure-colors-bg-container, #f4f4f4);font-weight:600}tr:hover td{background-color:var(--structure-colors-bg-container, #f9f9f9)}";
 
 const Table = class {
     constructor(hostRef) {

package/dist/cjs/voa-table.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"voa-table.entry.cjs.js","sources":["src/components/voa-table/table.css?tag=voa-table&encapsulation=shadow","src/components/voa-table/table.tsx"],"sourcesContent":[".table {\r\n  width: 100%;\r\n  border-collapse: collapse;\r\n}\r\n\r\nth,\r\ntd {\r\n  padding: 10px;\r\n  border: 1px solid #ddd;\r\n  text-align: left;\r\n}\r\n\r\nth {\r\n  background-color: #f4f4f4;\r\n}\r\n","import { Component, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-table\",\r\n  styleUrl: \"table.css\",\r\n  shadow: true,\r\n})\r\nexport class Table {\r\n  @Prop() data: any[] = [];\r\n  @Prop() columns: string[] = [];\r\n\r\n  render() {\r\n    return (\r\n      <table class=\"table\">\r\n        <thead>\r\n          <tr>\r\n            {this.columns.map((column) => (\r\n              <th>{column}</th>\r\n            ))}\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          {this.data.map((row) => (\r\n            <tr>\r\n              {this.columns.map((column) => (\r\n                <td>{row[column]}</td>\r\n              ))}\r\n            </tr>\r\n          ))}\r\n        </tbody>\r\n      </table>\r\n    );\r\n  }\r\n}\r\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,QAAQ,GAAG,kIAAkI;;MCOtI,KAAK,GAAA,MAAA;AALlB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAMU,QAAA,IAAI,CAAA,IAAA,GAAU,EAAE;AAChB,QAAA,IAAO,CAAA,OAAA,GAAa,EAAE;AAwB/B;IAtBC,MAAM,GAAA;QACJ,QACEA,OAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAC,OAAO,EAAA,EAClBA,OAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACEA,OAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACvBA,OAAK,CAAA,IAAA,EAAA,IAAA,EAAA,MAAM,CAAM,CAClB,CAAC,CACC,CACC,EACRA,OAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,MACjBA,OAAA,CAAA,IAAA,EAAA,IAAA,EACG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACvBA,OAAK,CAAA,IAAA,EAAA,IAAA,EAAA,GAAG,CAAC,MAAM,CAAC,CAAM,CACvB,CAAC,CACC,CACN,CAAC,CACI,CACF;;;;;;;"}
+{"version":3,"file":"voa-table.entry.cjs.js","sources":["src/components/voa-table/table.css?tag=voa-table&encapsulation=shadow","src/components/voa-table/table.tsx"],"sourcesContent":[".table {\r\n  width: 100%;\r\n  border-collapse: collapse;\r\n  background-color: var(--structure-colors-bg-base, #ffffff);\r\n}\r\n\r\nth,\r\ntd {\r\n  padding: 10px;\r\n  border: 1px solid var(--structure-colors-border-color-secondary, #ddd);\r\n  text-align: left;\r\n  color: var(--text-primary, inherit);\r\n}\r\n\r\nth {\r\n  background-color: var(--structure-colors-bg-container, #f4f4f4);\r\n  font-weight: 600;\r\n}\r\n\r\ntr:hover td {\r\n  background-color: var(--structure-colors-bg-container, #f9f9f9);\r\n}\r\n","import { Component, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-table\",\r\n  styleUrl: \"table.css\",\r\n  shadow: true,\r\n})\r\nexport class Table {\r\n  @Prop() data: any[] = [];\r\n  @Prop() columns: string[] = [];\r\n\r\n  render() {\r\n    return (\r\n      <table class=\"table\">\r\n        <thead>\r\n          <tr>\r\n            {this.columns.map((column) => (\r\n              <th>{column}</th>\r\n            ))}\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          {this.data.map((row) => (\r\n            <tr>\r\n              {this.columns.map((column) => (\r\n                <td>{row[column]}</td>\r\n              ))}\r\n            </tr>\r\n          ))}\r\n        </tbody>\r\n      </table>\r\n    );\r\n  }\r\n}\r\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,QAAQ,GAAG,gZAAgZ;;MCOpZ,KAAK,GAAA,MAAA;AALlB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAMU,QAAA,IAAI,CAAA,IAAA,GAAU,EAAE;AAChB,QAAA,IAAO,CAAA,OAAA,GAAa,EAAE;AAwB/B;IAtBC,MAAM,GAAA;QACJ,QACEA,OAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAC,OAAO,EAAA,EAClBA,OAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACEA,OAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACvBA,OAAK,CAAA,IAAA,EAAA,IAAA,EAAA,MAAM,CAAM,CAClB,CAAC,CACC,CACC,EACRA,OAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,MACjBA,OAAA,CAAA,IAAA,EAAA,IAAA,EACG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACvBA,OAAK,CAAA,IAAA,EAAA,IAAA,EAAA,GAAG,CAAC,MAAM,CAAC,CAAM,CACvB,CAAC,CACC,CACN,CAAC,CACI,CACF;;;;;;;"}

package/dist/cjs/voa-timepicker.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-4P_C6z2q.js');
 
-const timepickerCss = ".timepicker{padding:10px;border:1px solid #ccc;border-radius:4px;font-size:14px;width:100%}";
+const timepickerCss = ".timepicker{padding:10px;border:1px solid var(--structure-colors-border-color, #ccc);border-radius:4px;font-size:14px;width:100%;background-color:var(--structure-colors-bg-base, #ffffff);color:var(--text-primary, inherit)}.timepicker:focus{border-color:var(--brand-base, #007bff);outline:none;box-shadow:0 0 0 2px var(--brand-base-25, rgba(0, 123, 255, 0.25))}";
 
 const TimePicker = class {
     constructor(hostRef) {

package/dist/cjs/voa-timepicker.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"voa-timepicker.entry.cjs.js","sources":["src/components/voa-timepicker/timepicker.css?tag=voa-timepicker&encapsulation=shadow","src/components/voa-timepicker/timepicker.tsx"],"sourcesContent":[".timepicker {\r\n  padding: 10px;\r\n  border: 1px solid #ccc;\r\n  border-radius: 4px;\r\n  font-size: 14px;\r\n  width: 100%;\r\n}\r\n","import { Component, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-timepicker\",\r\n  styleUrl: \"timepicker.css\",\r\n  shadow: true,\r\n})\r\nexport class TimePicker {\r\n  @Prop() value: string;\r\n\r\n  render() {\r\n    return <input class=\"timepicker\" type=\"time\" value={this.value} />;\r\n  }\r\n}\r\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,aAAa,GAAG,6FAA6F;;MCOtG,UAAU,GAAA,MAAA;;;;IAGrB,MAAM,GAAA;QACJ,OAAOA,OAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI;;;;;;;"}
+{"version":3,"file":"voa-timepicker.entry.cjs.js","sources":["src/components/voa-timepicker/timepicker.css?tag=voa-timepicker&encapsulation=shadow","src/components/voa-timepicker/timepicker.tsx"],"sourcesContent":[".timepicker {\r\n  padding: 10px;\r\n  border: 1px solid var(--structure-colors-border-color, #ccc);\r\n  border-radius: 4px;\r\n  font-size: 14px;\r\n  width: 100%;\r\n  background-color: var(--structure-colors-bg-base, #ffffff);\r\n  color: var(--text-primary, inherit);\r\n}\r\n\r\n.timepicker:focus {\r\n  border-color: var(--brand-base, #007bff);\r\n  outline: none;\r\n  box-shadow: 0 0 0 2px var(--brand-base-25, rgba(0, 123, 255, 0.25));\r\n}\r\n","import { Component, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-timepicker\",\r\n  styleUrl: \"timepicker.css\",\r\n  shadow: true,\r\n})\r\nexport class TimePicker {\r\n  @Prop() value: string;\r\n\r\n  render() {\r\n    return <input class=\"timepicker\" type=\"time\" value={this.value} />;\r\n  }\r\n}\r\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,aAAa,GAAG,0WAA0W;;MCOnX,UAAU,GAAA,MAAA;;;;IAGrB,MAAM,GAAA;QACJ,OAAOA,OAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI;;;;;;;"}

package/dist/cjs/voa-upload.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-4P_C6z2q.js');
 
-const uploadCss = ".upload{position:relative;display:inline-block}.file-input{width:0.1px;height:0.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}.upload-label{display:inline-block;padding:10px 20px;border:1px solid #ccc;border-radius:4px;background-color:#007bff;color:white;cursor:pointer;transition:background-color 0.2s}.upload-label:hover{background-color:#0056b3}";
+const uploadCss = ".upload{position:relative;display:inline-block}.file-input{width:0.1px;height:0.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}.upload-label{display:inline-block;padding:10px 20px;border:1px solid var(--brand-base, #007bff);border-radius:4px;background-color:var(--brand-base, #007bff);color:var(--text-on-primary, white);cursor:pointer;transition:background-color 0.2s}.upload-label:hover{background-color:var(--brand-hover, #0056b3);border-color:var(--brand-hover, #0056b3)}";
 
 const Upload = class {
     constructor(hostRef) {

package/dist/cjs/voa-upload.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"voa-upload.entry.cjs.js","sources":["src/components/voa-upload/upload.css?tag=voa-upload&encapsulation=shadow","src/components/voa-upload/upload.tsx"],"sourcesContent":[".upload {\r\n  position: relative;\r\n  display: inline-block;\r\n}\r\n\r\n.file-input {\r\n  width: 0.1px;\r\n  height: 0.1px;\r\n  opacity: 0;\r\n  overflow: hidden;\r\n  position: absolute;\r\n  z-index: -1;\r\n}\r\n\r\n.upload-label {\r\n  display: inline-block;\r\n  padding: 10px 20px;\r\n  border: 1px solid #ccc;\r\n  border-radius: 4px;\r\n  background-color: #007bff;\r\n  color: white;\r\n  cursor: pointer;\r\n  transition: background-color 0.2s;\r\n}\r\n\r\n.upload-label:hover {\r\n  background-color: #0056b3;\r\n}\r\n","import { Component, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-upload\",\r\n  styleUrl: \"upload.css\",\r\n  shadow: true,\r\n})\r\nexport class Upload {\r\n  render() {\r\n    return (\r\n      <div class=\"upload\">\r\n        <input type=\"file\" id=\"file-upload\" class=\"file-input\" />\r\n        <label htmlFor=\"file-upload\" class=\"upload-label\">\r\n          Choose File\r\n        </label>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,SAAS,GAAG,4WAA4W;;MCOjX,MAAM,GAAA,MAAA;;;;IACjB,MAAM,GAAA;AACJ,QAAA,QACEA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,QAAQ,EAAA,EACjBA,OAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAC,EAAE,EAAC,aAAa,EAAC,KAAK,EAAC,YAAY,EAAG,CAAA,EACzDA,OAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,aAAa,EAAC,KAAK,EAAC,cAAc,EAAA,EAAA,aAAA,CAEzC,CACJ;;;;;;;"}
+{"version":3,"file":"voa-upload.entry.cjs.js","sources":["src/components/voa-upload/upload.css?tag=voa-upload&encapsulation=shadow","src/components/voa-upload/upload.tsx"],"sourcesContent":[".upload {\r\n  position: relative;\r\n  display: inline-block;\r\n}\r\n\r\n.file-input {\r\n  width: 0.1px;\r\n  height: 0.1px;\r\n  opacity: 0;\r\n  overflow: hidden;\r\n  position: absolute;\r\n  z-index: -1;\r\n}\r\n\r\n.upload-label {\r\n  display: inline-block;\r\n  padding: 10px 20px;\r\n  border: 1px solid var(--brand-base, #007bff);\r\n  border-radius: 4px;\r\n  background-color: var(--brand-base, #007bff);\r\n  color: var(--text-on-primary, white);\r\n  cursor: pointer;\r\n  transition: background-color 0.2s;\r\n}\r\n\r\n.upload-label:hover {\r\n  background-color: var(--brand-hover, #0056b3);\r\n  border-color: var(--brand-hover, #0056b3);\r\n}\r\n","import { Component, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-upload\",\r\n  styleUrl: \"upload.css\",\r\n  shadow: true,\r\n})\r\nexport class Upload {\r\n  render() {\r\n    return (\r\n      <div class=\"upload\">\r\n        <input type=\"file\" id=\"file-upload\" class=\"file-input\" />\r\n        <label htmlFor=\"file-upload\" class=\"upload-label\">\r\n          Choose File\r\n        </label>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,SAAS,GAAG,0eAA0e;;MCO/e,MAAM,GAAA,MAAA;;;;IACjB,MAAM,GAAA;AACJ,QAAA,QACEA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,QAAQ,EAAA,EACjBA,OAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAC,EAAE,EAAC,aAAa,EAAC,KAAK,EAAC,YAAY,EAAG,CAAA,EACzDA,OAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,aAAa,EAAC,KAAK,EAAC,cAAc,EAAA,EAAA,aAAA,CAEzC,CACJ;;;;;;;"}

package/dist/collection/components/voa-datepicker/datepicker.css

@@ -1,7 +1,15 @@
 .datepicker {
   padding: 10px;
-  border: 1px solid #ccc;
+  border: 1px solid var(--structure-colors-border-color, #ccc);
   border-radius: 4px;
   font-size: 14px;
   width: 100%;
+  background-color: var(--structure-colors-bg-base, #ffffff);
+  color: var(--text-primary, inherit);
+}
+
+.datepicker:focus {
+  border-color: var(--brand-base, #007bff);
+  outline: none;
+  box-shadow: 0 0 0 2px var(--brand-base-25, rgba(0, 123, 255, 0.25));
 }

package/dist/collection/components/voa-drawer/drawer.css

@@ -4,11 +4,12 @@
   left: 0;
   height: 100%;
   width: 250px;
-  background-color: #f4f4f4;
+  background-color: var(--structure-colors-bg-container, #f4f4f4);
   box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
   overflow-x: hidden;
   transform: translateX(-100%);
   transition: transform 0.3s ease-out;
+  color: var(--text-primary, inherit);
 }
 
 .drawer.open {

package/dist/collection/components/voa-dropdown/dropdown.css

@@ -5,11 +5,16 @@
 
 .dropdown-button {
   padding: 10px 20px;
-  border: 1px solid #ccc;
+  border: 1px solid var(--structure-colors-border-color, #ccc);
   border-radius: 4px;
-  background-color: #fff;
+  background-color: var(--structure-colors-bg-base, #fff);
+  color: var(--text-primary, inherit);
   cursor: pointer;
-  transition: background-color 0.2s;
+  transition: background-color 0.2s, border-color 0.2s;
+}
+
+.dropdown-button:hover {
+  border-color: var(--brand-base, #007bff);
 }
 
 .dropdown-list {
@@ -17,20 +22,28 @@
   top: 100%;
   left: 0;
   width: 100%;
-  border: 1px solid #ccc;
+  border: 1px solid var(--structure-colors-border-color, #ccc);
   border-radius: 4px;
-  background-color: #fff;
+  background-color: var(--structure-colors-bg-base, #fff);
   list-style: none;
   padding: 0;
   margin: 0;
   z-index: 1;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
 .dropdown-list li {
   padding: 10px;
   cursor: pointer;
+  color: var(--text-primary, inherit);
+  transition: background-color 0.2s;
 }
 
 .dropdown-list li:hover {
-  background-color: #f4f4f4;
+  background-color: var(--structure-colors-bg-container, #f4f4f4);
+}
+
+.dropdown-list li.selected {
+  background-color: var(--brand-base-15, rgba(0, 123, 255, 0.15));
+  color: var(--brand-base, #007bff);
 }

package/dist/collection/components/voa-link/link.css

@@ -1,9 +1,9 @@
 .link {
-  color: #007bff;
+  color: var(--brand-base, #007bff);
   text-decoration: none;
   transition: color 0.2s;
 }
 
 .link:hover {
-  color: #0056b3;
+  color: var(--brand-hover, #0056b3);
 }

package/dist/collection/components/voa-list/list.css

@@ -6,9 +6,14 @@
 
 .list li {
   padding: 10px;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--structure-colors-border-color-secondary, #ddd);
+  color: var(--text-primary, inherit);
 }
 
 .list li:last-child {
   border-bottom: none;
 }
+
+.list li:hover {
+  background-color: var(--structure-colors-bg-container, #f9f9f9);
+}

package/dist/collection/components/voa-progress/progress.css

@@ -1,12 +1,12 @@
 .progress {
   width: 100%;
-  background-color: #eee;
+  background-color: var(--structure-colors-bg-container, #eee);
   border-radius: 4px;
   overflow: hidden;
 }
 
 .bar {
   height: 20px;
-  background-color: #007bff;
+  background-color: var(--brand-base, #007bff);
   transition: width 0.2s;
 }

package/dist/collection/components/voa-skeleton/skeleton.css

@@ -1,30 +1,29 @@
-.skeleton{
-    border-radius: 2px;
-    display: inline-block;
-    line-height: 100%;
-    width: 100%;
-    background-color: #fff;
-    background-size: 1000px 1000px;
-    background-image: linear-gradient(
-        100deg,
-        #e8e8e8 20%,
-        #fafafa 50%,
-        #e8e8e8 60%
-    );
-    animation: placeholderShimmer 1.5s linear infinite forwards;
+.skeleton {
+  border-radius: 2px;
+  display: inline-block;
+  line-height: 100%;
+  width: 100%;
+  background-color: var(--structure-colors-bg-base, #fff);
+  background-size: 1000px 1000px;
+  background-image: linear-gradient(
+    100deg,
+    var(--structure-colors-bg-elevated, #e8e8e8) 20%,
+    var(--structure-colors-bg-container, #fafafa) 50%,
+    var(--structure-colors-bg-elevated, #e8e8e8) 60%
+  );
+  animation: placeholderShimmer 1.5s linear infinite forwards;
 }
 
-.skeleton--circle{
-    border-radius: 50%;
+.skeleton--circle {
+  border-radius: 50%;
 }
 
-@keyframes placeholderShimmer{
-    0%{
-        background-position: -500px 0;
-    }
-    
-    100%{
-        background-position: 500px 0;
-    }
+@keyframes placeholderShimmer {
+  0% {
+    background-position: -500px 0;
+  }
 
-}
+  100% {
+    background-position: 500px 0;
+  }
+}

package/dist/collection/components/voa-stepper/stepper.css

@@ -5,19 +5,21 @@
 
 .step {
   padding: 10px 20px;
-  border: 1px solid #ccc;
+  border: 1px solid var(--structure-colors-border-color, #ccc);
   border-radius: 4px;
-  background-color: #f9f9f9;
+  background-color: var(--structure-colors-bg-container, #f9f9f9);
   cursor: pointer;
   transition: background-color 0.2s;
   margin-right: 10px;
+  color: var(--text-primary, inherit);
 }
 
 .step.active {
-  background-color: #007bff;
-  color: white;
+  background-color: var(--brand-base, #007bff);
+  color: var(--text-on-primary, white);
+  border-color: var(--brand-hover, #0056b3);
 }
 
-.step:hover {
-  background-color: #eee;
+.step:hover:not(.active) {
+  background-color: var(--structure-colors-bg-elevated, #eee);
 }

package/dist/collection/components/voa-table/table.css

@@ -1,15 +1,22 @@
 .table {
   width: 100%;
   border-collapse: collapse;
+  background-color: var(--structure-colors-bg-base, #ffffff);
 }
 
 th,
 td {
   padding: 10px;
-  border: 1px solid #ddd;
+  border: 1px solid var(--structure-colors-border-color-secondary, #ddd);
   text-align: left;
+  color: var(--text-primary, inherit);
 }
 
 th {
-  background-color: #f4f4f4;
+  background-color: var(--structure-colors-bg-container, #f4f4f4);
+  font-weight: 600;
+}
+
+tr:hover td {
+  background-color: var(--structure-colors-bg-container, #f9f9f9);
 }

package/dist/collection/components/voa-timepicker/timepicker.css

@@ -1,7 +1,15 @@
 .timepicker {
   padding: 10px;
-  border: 1px solid #ccc;
+  border: 1px solid var(--structure-colors-border-color, #ccc);
   border-radius: 4px;
   font-size: 14px;
   width: 100%;
+  background-color: var(--structure-colors-bg-base, #ffffff);
+  color: var(--text-primary, inherit);
+}
+
+.timepicker:focus {
+  border-color: var(--brand-base, #007bff);
+  outline: none;
+  box-shadow: 0 0 0 2px var(--brand-base-25, rgba(0, 123, 255, 0.25));
 }

package/dist/collection/components/voa-upload/upload.css

@@ -15,14 +15,15 @@
 .upload-label {
   display: inline-block;
   padding: 10px 20px;
-  border: 1px solid #ccc;
+  border: 1px solid var(--brand-base, #007bff);
   border-radius: 4px;
-  background-color: #007bff;
-  color: white;
+  background-color: var(--brand-base, #007bff);
+  color: var(--text-on-primary, white);
   cursor: pointer;
   transition: background-color 0.2s;
 }
 
 .upload-label:hover {
-  background-color: #0056b3;
+  background-color: var(--brand-hover, #0056b3);
+  border-color: var(--brand-hover, #0056b3);
 }

package/dist/custom-elements/voa-datepicker.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h } from './p-CJlz_B6H.js';
 
-const datepickerCss = ".datepicker{padding:10px;border:1px solid #ccc;border-radius:4px;font-size:14px;width:100%}";
+const datepickerCss = ".datepicker{padding:10px;border:1px solid var(--structure-colors-border-color, #ccc);border-radius:4px;font-size:14px;width:100%;background-color:var(--structure-colors-bg-base, #ffffff);color:var(--text-primary, inherit)}.datepicker:focus{border-color:var(--brand-base, #007bff);outline:none;box-shadow:0 0 0 2px var(--brand-base-25, rgba(0, 123, 255, 0.25))}";
 
 const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends H {
     constructor(registerHost) {

package/dist/custom-elements/voa-datepicker.js.map

@@ -1 +1 @@
-{"file":"voa-datepicker.js","mappings":";;AAAA,MAAM,aAAa,GAAG,6FAA6F;;MCOtG,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AALvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AASU,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,KAAY,KAAI;AAC1C,YAAA,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B;AAC9C,YAAA,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,KAAK;AACjC,SAAC;AAYF;IAVC,MAAM,GAAA;AACJ,QAAA,QACE,8DACE,KAAK,EAAC,YAAY,EAClB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-datepicker/datepicker.css?tag=voa-datepicker&encapsulation=shadow","src/components/voa-datepicker/datepicker.tsx"],"sourcesContent":[".datepicker {\r\n  padding: 10px;\r\n  border: 1px solid #ccc;\r\n  border-radius: 4px;\r\n  font-size: 14px;\r\n  width: 100%;\r\n}\r\n","import { Component, Prop, h, State } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-datepicker\",\r\n  styleUrl: \"datepicker.css\",\r\n  shadow: true,\r\n})\r\nexport class DatePicker {\r\n  @Prop() value: string;\r\n  @State() selectedDate: string;\r\n\r\n  private handleDateChange = (event: Event) => {\r\n    const input = event.target as HTMLInputElement;\r\n    this.selectedDate = input.value;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <input\r\n        class=\"datepicker\"\r\n        type=\"date\"\r\n        value={this.selectedDate}\r\n        onInput={this.handleDateChange}\r\n      />\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"voa-datepicker.js","mappings":";;AAAA,MAAM,aAAa,GAAG,0WAA0W;;MCOnX,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AALvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AASU,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,KAAY,KAAI;AAC1C,YAAA,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B;AAC9C,YAAA,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,KAAK;AACjC,SAAC;AAYF;IAVC,MAAM,GAAA;AACJ,QAAA,QACE,8DACE,KAAK,EAAC,YAAY,EAClB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-datepicker/datepicker.css?tag=voa-datepicker&encapsulation=shadow","src/components/voa-datepicker/datepicker.tsx"],"sourcesContent":[".datepicker {\r\n  padding: 10px;\r\n  border: 1px solid var(--structure-colors-border-color, #ccc);\r\n  border-radius: 4px;\r\n  font-size: 14px;\r\n  width: 100%;\r\n  background-color: var(--structure-colors-bg-base, #ffffff);\r\n  color: var(--text-primary, inherit);\r\n}\r\n\r\n.datepicker:focus {\r\n  border-color: var(--brand-base, #007bff);\r\n  outline: none;\r\n  box-shadow: 0 0 0 2px var(--brand-base-25, rgba(0, 123, 255, 0.25));\r\n}\r\n","import { Component, Prop, h, State } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-datepicker\",\r\n  styleUrl: \"datepicker.css\",\r\n  shadow: true,\r\n})\r\nexport class DatePicker {\r\n  @Prop() value: string;\r\n  @State() selectedDate: string;\r\n\r\n  private handleDateChange = (event: Event) => {\r\n    const input = event.target as HTMLInputElement;\r\n    this.selectedDate = input.value;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <input\r\n        class=\"datepicker\"\r\n        type=\"date\"\r\n        value={this.selectedDate}\r\n        onInput={this.handleDateChange}\r\n      />\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/custom-elements/voa-drawer.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h } from './p-CJlz_B6H.js';
 
-const drawerCss = ".drawer{position:fixed;top:0;left:0;height:100%;width:250px;background-color:#f4f4f4;box-shadow:2px 0 5px rgba(0, 0, 0, 0.3);overflow-x:hidden;transform:translateX(-100%);transition:transform 0.3s ease-out}.drawer.open{transform:translateX(0)}";
+const drawerCss = ".drawer{position:fixed;top:0;left:0;height:100%;width:250px;background-color:var(--structure-colors-bg-container, #f4f4f4);box-shadow:2px 0 5px rgba(0, 0, 0, 0.3);overflow-x:hidden;transform:translateX(-100%);transition:transform 0.3s ease-out;color:var(--text-primary, inherit)}.drawer.open{transform:translateX(0)}";
 
 const Drawer = /*@__PURE__*/ proxyCustomElement(class Drawer extends H {
     constructor(registerHost) {

package/dist/custom-elements/voa-drawer.js.map

@@ -1 +1 @@
-{"file":"voa-drawer.js","mappings":";;AAAA,MAAM,SAAS,GAAG,qPAAqP;;MCO1P,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;AALnB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAMU,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;AACpB,QAAA,IAAA,CAAA,MAAM,GAAY,IAAI,CAAC,IAAI;AAEpC,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;AAClB,YAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM;AAC5B,SAAC;AAcF;IAZC,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,OAAO,EAAE,IAAI,CAAC,YAAY,IAC/B,IAAI,CAAC,MAAM,GAAG,cAAc,GAAG,aAAa,CACtC,EACT,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,UAAU,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,EAAE,CAAE,CAAA,EAAA,EAC/C,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-drawer/drawer.css?tag=voa-drawer&encapsulation=shadow","src/components/voa-drawer/drawer.tsx"],"sourcesContent":[".drawer {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  height: 100%;\r\n  width: 250px;\r\n  background-color: #f4f4f4;\r\n  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);\r\n  overflow-x: hidden;\r\n  transform: translateX(-100%);\r\n  transition: transform 0.3s ease-out;\r\n}\r\n\r\n.drawer.open {\r\n  transform: translateX(0);\r\n}\r\n","import { Component, Prop, State, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-drawer\",\r\n  styleUrl: \"drawer.css\",\r\n  shadow: true,\r\n})\r\nexport class Drawer {\r\n  @Prop() open: boolean = false;\r\n  @State() isOpen: boolean = this.open;\r\n\r\n  toggleDrawer = () => {\r\n    this.isOpen = !this.isOpen;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <div>\r\n        <button onClick={this.toggleDrawer}>\r\n          {this.isOpen ? \"Close Drawer\" : \"Open Drawer\"}\r\n        </button>\r\n        <div class={`drawer ${this.isOpen ? \"open\" : \"\"}`}>\r\n          <slot></slot>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"voa-drawer.js","mappings":";;AAAA,MAAM,SAAS,GAAG,8TAA8T;;MCOnU,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;AALnB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAMU,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;AACpB,QAAA,IAAA,CAAA,MAAM,GAAY,IAAI,CAAC,IAAI;AAEpC,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;AAClB,YAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM;AAC5B,SAAC;AAcF;IAZC,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,OAAO,EAAE,IAAI,CAAC,YAAY,IAC/B,IAAI,CAAC,MAAM,GAAG,cAAc,GAAG,aAAa,CACtC,EACT,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,UAAU,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,EAAE,CAAE,CAAA,EAAA,EAC/C,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-drawer/drawer.css?tag=voa-drawer&encapsulation=shadow","src/components/voa-drawer/drawer.tsx"],"sourcesContent":[".drawer {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  height: 100%;\r\n  width: 250px;\r\n  background-color: var(--structure-colors-bg-container, #f4f4f4);\r\n  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);\r\n  overflow-x: hidden;\r\n  transform: translateX(-100%);\r\n  transition: transform 0.3s ease-out;\r\n  color: var(--text-primary, inherit);\r\n}\r\n\r\n.drawer.open {\r\n  transform: translateX(0);\r\n}\r\n","import { Component, Prop, State, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-drawer\",\r\n  styleUrl: \"drawer.css\",\r\n  shadow: true,\r\n})\r\nexport class Drawer {\r\n  @Prop() open: boolean = false;\r\n  @State() isOpen: boolean = this.open;\r\n\r\n  toggleDrawer = () => {\r\n    this.isOpen = !this.isOpen;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <div>\r\n        <button onClick={this.toggleDrawer}>\r\n          {this.isOpen ? \"Close Drawer\" : \"Open Drawer\"}\r\n        </button>\r\n        <div class={`drawer ${this.isOpen ? \"open\" : \"\"}`}>\r\n          <slot></slot>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/custom-elements/voa-dropdown.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h } from './p-CJlz_B6H.js';
 
-const dropdownCss = ".dropdown{position:relative;display:inline-block}.dropdown-button{padding:10px 20px;border:1px solid #ccc;border-radius:4px;background-color:#fff;cursor:pointer;transition:background-color 0.2s}.dropdown-list{position:absolute;top:100%;left:0;width:100%;border:1px solid #ccc;border-radius:4px;background-color:#fff;list-style:none;padding:0;margin:0;z-index:1}.dropdown-list li{padding:10px;cursor:pointer}.dropdown-list li:hover{background-color:#f4f4f4}";
+const dropdownCss = ".dropdown{position:relative;display:inline-block}.dropdown-button{padding:10px 20px;border:1px solid var(--structure-colors-border-color, #ccc);border-radius:4px;background-color:var(--structure-colors-bg-base, #fff);color:var(--text-primary, inherit);cursor:pointer;transition:background-color 0.2s, border-color 0.2s}.dropdown-button:hover{border-color:var(--brand-base, #007bff)}.dropdown-list{position:absolute;top:100%;left:0;width:100%;border:1px solid var(--structure-colors-border-color, #ccc);border-radius:4px;background-color:var(--structure-colors-bg-base, #fff);list-style:none;padding:0;margin:0;z-index:1;box-shadow:0 2px 8px rgba(0, 0, 0, 0.1)}.dropdown-list li{padding:10px;cursor:pointer;color:var(--text-primary, inherit);transition:background-color 0.2s}.dropdown-list li:hover{background-color:var(--structure-colors-bg-container, #f4f4f4)}.dropdown-list li.selected{background-color:var(--brand-base-15, rgba(0, 123, 255, 0.15));color:var(--brand-base, #007bff)}";
 
 const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends H {
     constructor(registerHost) {