@compa11y/web 0.1.0 → 0.1.2

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAGjD,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,UAAU,EAAE,CAAC;AAGpE,OAAO,EAEL,aAAa,EACb,QAAQ,EACR,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,aAAa,EAEb,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,oBAAoB,EAEpB,qBAAqB,EACrB,gBAAgB,EAChB,eAAe,EAEf,IAAI,EACJ,cAAc,EACd,iBAAiB,EAEjB,SAAS,EACT,oBAAoB,EACpB,mBAAmB,EACnB,eAAe,EAChB,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EACL,aAAa,EACb,QAAQ,EACR,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,oBAAoB,EACpB,qBAAqB,EACrB,gBAAgB,EAChB,eAAe,EACf,IAAI,EACJ,cAAc,EACd,iBAAiB,EACjB,SAAS,EACT,oBAAoB,EACpB,mBAAmB,EACnB,eAAe,GAChB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AACxE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAGrE,OAAO,EACL,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,UAAU,EACV,SAAS,EACT,YAAY,EACZ,UAAU,EACV,WAAW,EACX,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,iBAAiB,EACjB,cAAc,EACd,SAAS,GACV,CAAC;AAGF,OAAO,EAEL,aAAa,EACb,QAAQ,EACR,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,aAAa,EAEb,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,oBAAoB,EAEpB,qBAAqB,EACrB,gBAAgB,EAChB,eAAe,EAEf,IAAI,EACJ,cAAc,EACd,iBAAiB,EAEjB,SAAS,EACT,oBAAoB,EACpB,mBAAmB,EACnB,eAAe,EAChB,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EACL,aAAa,EACb,QAAQ,EACR,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,oBAAoB,EACpB,qBAAqB,EACrB,gBAAgB,EAChB,eAAe,EACf,IAAI,EACJ,cAAc,EACd,iBAAiB,EACjB,SAAS,EACT,oBAAoB,EACpB,mBAAmB,EACnB,eAAe,GAChB,CAAC"}

package/dist/utils/base-element.d.ts

@@ -1,7 +1,7 @@
 /**
  * Base class for compa11y Web Components
  */
-export declare abstract class A11yKitElement extends HTMLElement {
+export declare abstract class Compa11yElement extends HTMLElement {
     protected _internals: ElementInternals | null;
     protected _id: string;
     constructor();

package/dist/utils/base-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-element.d.ts","sourceRoot":"","sources":["../../src/utils/base-element.ts"],"names":[],"mappings":"AAAA;;GAEG;AAIH,8BAAsB,cAAe,SAAQ,WAAW;IACtD,SAAS,CAAC,UAAU,EAAE,gBAAgB,GAAG,IAAI,CAAQ;IACrD,SAAS,CAAC,GAAG,EAAE,MAAM,CAAC;;IAYtB;;OAEG;IACH,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAMzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAI5B;;OAEG;IACH,wBAAwB,CACtB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,GAAG,IAAI,EACvB,QAAQ,EAAE,MAAM,GAAG,IAAI,GACtB,IAAI;IAMP;;OAEG;IACH,SAAS,CAAC,QAAQ,CAAC,kBAAkB,IAAI,IAAI;IAE7C;;OAEG;IACH,SAAS,CAAC,QAAQ,CAAC,MAAM,IAAI,IAAI;IAEjC;;OAEG;IACH,SAAS,CAAC,mBAAmB,IAAI,IAAI;IAErC;;OAEG;IACH,SAAS,CAAC,qBAAqB,IAAI,IAAI;IAEvC;;OAEG;IACH,SAAS,CAAC,iBAAiB,CACzB,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,MAAM,GAAG,IAAI,EACxB,SAAS,EAAE,MAAM,GAAG,IAAI,GACvB,IAAI;IAEP;;OAEG;IACH,SAAS,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC,GAAG,OAAO;IAWpD;;OAEG;IACH,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,eAAe,GAAG,IAAI;IAIvD;;OAEG;IACH,SAAS,CAAC,kBAAkB,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,EAAE;CAO3D;AAED;;GAEG;AACH,wBAAgB,aAAa,CAC3B,IAAI,EAAE,MAAM,EACZ,WAAW,EAAE,wBAAwB,GACpC,IAAI,CAIN"}
+{"version":3,"file":"base-element.d.ts","sourceRoot":"","sources":["../../src/utils/base-element.ts"],"names":[],"mappings":"AAAA;;GAEG;AAIH,8BAAsB,eAAgB,SAAQ,WAAW;IACvD,SAAS,CAAC,UAAU,EAAE,gBAAgB,GAAG,IAAI,CAAQ;IACrD,SAAS,CAAC,GAAG,EAAE,MAAM,CAAC;;IAYtB;;OAEG;IACH,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAMzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAI5B;;OAEG;IACH,wBAAwB,CACtB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,GAAG,IAAI,EACvB,QAAQ,EAAE,MAAM,GAAG,IAAI,GACtB,IAAI;IAMP;;OAEG;IACH,SAAS,CAAC,QAAQ,CAAC,kBAAkB,IAAI,IAAI;IAE7C;;OAEG;IACH,SAAS,CAAC,QAAQ,CAAC,MAAM,IAAI,IAAI;IAEjC;;OAEG;IACH,SAAS,CAAC,mBAAmB,IAAI,IAAI;IAErC;;OAEG;IACH,SAAS,CAAC,qBAAqB,IAAI,IAAI;IAEvC;;OAEG;IACH,SAAS,CAAC,iBAAiB,CACzB,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,MAAM,GAAG,IAAI,EACxB,SAAS,EAAE,MAAM,GAAG,IAAI,GACvB,IAAI;IAEP;;OAEG;IACH,SAAS,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC,GAAG,OAAO;IAWpD;;OAEG;IACH,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,eAAe,GAAG,IAAI;IAIvD;;OAEG;IACH,SAAS,CAAC,kBAAkB,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,EAAE;CAO3D;AAED;;GAEG;AACH,wBAAgB,aAAa,CAC3B,IAAI,EAAE,MAAM,EACZ,WAAW,EAAE,wBAAwB,GACpC,IAAI,CAIN"}

package/dist/utils/styles.d.ts

@@ -24,8 +24,52 @@ export declare const TABS_STYLES = "\n  \n  :host {\n    display: block;\n    bo
  * Combobox-specific styles
  */
 export declare const COMBOBOX_STYLES = "\n  \n  :host {\n    display: block;\n    box-sizing: border-box;\n  }\n\n  :host([hidden]) {\n    display: none !important;\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: inherit;\n  }\n\n  \n  :host(:focus-visible),\n  :focus-visible {\n    outline: 2px solid var(--compa11y-focus-color, #0066cc);\n    outline-offset: 2px;\n  }\n\n\n\n  :host {\n    display: inline-block;\n    position: relative;\n    width: var(--compa11y-combobox-width, 250px);\n  }\n\n  .combobox-wrapper {\n    position: relative;\n  }\n\n  .input-wrapper {\n    position: relative;\n    display: flex;\n    align-items: center;\n  }\n\n  input {\n    width: 100%;\n    padding: var(--compa11y-combobox-input-padding, 0.5rem 2rem 0.5rem 0.75rem);\n    border: var(--compa11y-combobox-border, 1px solid #ccc);\n    border-radius: var(--compa11y-combobox-radius, 4px);\n    font: inherit;\n    background: var(--compa11y-combobox-bg, white);\n    color: var(--compa11y-combobox-color, inherit);\n  }\n\n  input:focus {\n    outline: 2px solid var(--compa11y-focus-color, #0066cc);\n    outline-offset: -1px;\n    border-color: var(--compa11y-focus-color, #0066cc);\n  }\n\n  input::placeholder {\n    color: var(--compa11y-combobox-placeholder-color, #999);\n  }\n\n  input:disabled {\n    background: var(--compa11y-combobox-disabled-bg, #f5f5f5);\n    cursor: not-allowed;\n    opacity: 0.7;\n  }\n\n  .chevron {\n    position: absolute;\n    right: 0.5rem;\n    pointer-events: none;\n    font-size: 0.75rem;\n    color: var(--compa11y-combobox-chevron-color, #666);\n    transition: transform 0.15s ease;\n  }\n\n  :host([open]) .chevron {\n    transform: rotate(180deg);\n  }\n\n  .clear-button {\n    \n  appearance: none;\n  background: none;\n  border: none;\n  padding: 0;\n  margin: 0;\n  font: inherit;\n  color: inherit;\n  cursor: pointer;\n\n    position: absolute;\n    right: 1.5rem;\n    width: 1.25rem;\n    height: 1.25rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 50%;\n    font-size: 1rem;\n    color: var(--compa11y-combobox-clear-color, #666);\n  }\n\n  .clear-button:hover {\n    background: var(--compa11y-combobox-clear-hover-bg, rgba(0, 0, 0, 0.1));\n  }\n\n  .clear-button[hidden] {\n    display: none;\n  }\n\n  .listbox {\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    z-index: var(--compa11y-combobox-z-index, 1000);\n    max-height: var(--compa11y-combobox-max-height, 200px);\n    overflow-y: auto;\n    margin: 0;\n    padding: var(--compa11y-combobox-listbox-padding, 0.25rem 0);\n    background: var(--compa11y-combobox-listbox-bg, white);\n    border: var(--compa11y-combobox-listbox-border, 1px solid #e0e0e0);\n    border-radius: var(--compa11y-combobox-radius, 4px);\n    box-shadow: var(--compa11y-combobox-shadow, 0 4px 6px -1px rgba(0, 0, 0, 0.1));\n    list-style: none;\n  }\n\n  /* Flip chevron when listbox is positioned above */\n  :host([data-position=\"top\"]) .chevron {\n    transform: rotate(180deg);\n  }\n\n  :host([data-position=\"top\"][open]) .chevron {\n    transform: rotate(0deg);\n  }\n\n  .listbox[hidden] {\n    display: none;\n  }\n\n  .listbox li[role=\"option\"] {\n    padding: var(--compa11y-combobox-option-padding, 0.5rem 0.75rem);\n    cursor: pointer;\n    transition: background 0.1s ease;\n  }\n\n  .listbox li[role=\"option\"]:hover,\n  .listbox li[role=\"option\"].highlighted {\n    background: var(--compa11y-combobox-option-hover-bg, #f5f5f5);\n  }\n\n  .listbox li[role=\"option\"][aria-selected=\"true\"] {\n    background: var(--compa11y-combobox-option-selected-bg, #e6f0ff);\n    font-weight: 500;\n  }\n\n  .listbox li[role=\"option\"].disabled,\n  .listbox li[role=\"option\"][aria-disabled=\"true\"] {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .empty-message {\n    padding: var(--compa11y-combobox-option-padding, 0.5rem 0.75rem);\n    color: var(--compa11y-combobox-empty-color, #666);\n    font-style: italic;\n  }\n\n  .options-source {\n    display: none;\n  }\n";
+/**
+ * Select-specific styles
+ */
+export declare const SELECT_STYLES = "\n  \n  :host {\n    display: block;\n    box-sizing: border-box;\n  }\n\n  :host([hidden]) {\n    display: none !important;\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: inherit;\n  }\n\n  \n  :host(:focus-visible),\n  :focus-visible {\n    outline: 2px solid var(--compa11y-focus-color, #0066cc);\n    outline-offset: 2px;\n  }\n\n\n\n  :host {\n    display: inline-block;\n    position: relative;\n    width: var(--compa11y-select-width, 250px);\n  }\n\n  .select-wrapper {\n    position: relative;\n  }\n\n  .select-trigger {\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: var(--compa11y-select-trigger-padding, 0.5rem 2rem 0.5rem 0.75rem);\n    border: var(--compa11y-select-border, 1px solid #ccc);\n    border-radius: var(--compa11y-select-radius, 4px);\n    font: inherit;\n    background: var(--compa11y-select-bg, white);\n    color: var(--compa11y-select-color, inherit);\n    cursor: pointer;\n    text-align: left;\n    position: relative;\n    appearance: none;\n  }\n\n  .select-trigger:focus {\n    outline: 2px solid var(--compa11y-focus-color, #0066cc);\n    outline-offset: -1px;\n    border-color: var(--compa11y-focus-color, #0066cc);\n  }\n\n  .select-trigger:disabled {\n    background: var(--compa11y-select-disabled-bg, #f5f5f5);\n    cursor: not-allowed;\n    opacity: 0.7;\n  }\n\n  .select-value {\n    flex: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .select-value.placeholder {\n    color: var(--compa11y-select-placeholder-color, #999);\n  }\n\n  .chevron {\n    position: absolute;\n    right: 0.5rem;\n    pointer-events: none;\n    font-size: 0.75rem;\n    color: var(--compa11y-select-chevron-color, #666);\n    transition: transform 0.15s ease;\n  }\n\n  :host([open]) .chevron {\n    transform: rotate(180deg);\n  }\n\n  :host([data-position=\"top\"]) .chevron {\n    transform: rotate(180deg);\n  }\n\n  :host([data-position=\"top\"][open]) .chevron {\n    transform: rotate(0deg);\n  }\n\n  .listbox {\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    z-index: var(--compa11y-select-z-index, 1000);\n    max-height: var(--compa11y-select-max-height, 200px);\n    overflow-y: auto;\n    margin: 0;\n    padding: var(--compa11y-select-listbox-padding, 0.25rem 0);\n    background: var(--compa11y-select-listbox-bg, white);\n    border: var(--compa11y-select-listbox-border, 1px solid #e0e0e0);\n    border-radius: var(--compa11y-select-radius, 4px);\n    box-shadow: var(--compa11y-select-shadow, 0 4px 6px -1px rgba(0, 0, 0, 0.1));\n    list-style: none;\n    margin-top: 4px;\n  }\n\n  .listbox[hidden] {\n    display: none;\n  }\n\n  .listbox li[role=\"option\"] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: var(--compa11y-select-option-padding, 0.5rem 0.75rem);\n    cursor: pointer;\n    transition: background 0.1s ease;\n  }\n\n  .listbox li[role=\"option\"]:hover,\n  .listbox li[role=\"option\"].highlighted {\n    background: var(--compa11y-select-option-hover-bg, #f5f5f5);\n  }\n\n  .listbox li[role=\"option\"][aria-selected=\"true\"] {\n    background: var(--compa11y-select-option-selected-bg, #e6f0ff);\n    font-weight: 500;\n  }\n\n  .listbox li[role=\"option\"].disabled,\n  .listbox li[role=\"option\"][aria-disabled=\"true\"] {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .check-mark {\n    font-size: 0.875rem;\n    color: var(--compa11y-select-check-color, #0066cc);\n    margin-left: 0.5rem;\n  }\n\n  .options-source {\n    display: none;\n  }\n";
 /**
  * Switch-specific styles
  */
 export declare const SWITCH_STYLES = "\n  \n  :host {\n    display: block;\n    box-sizing: border-box;\n  }\n\n  :host([hidden]) {\n    display: none !important;\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: inherit;\n  }\n\n  \n  :host(:focus-visible),\n  :focus-visible {\n    outline: 2px solid var(--compa11y-focus-color, #0066cc);\n    outline-offset: 2px;\n  }\n\n\n\n  :host {\n    display: inline-block;\n  }\n\n  .switch-wrapper {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--compa11y-switch-gap, 0.5rem);\n  }\n\n  /* Size variants */\n  .switch-wrapper.size-sm .switch-track {\n    width: var(--compa11y-switch-width-sm, 32px);\n    height: var(--compa11y-switch-height-sm, 18px);\n  }\n\n  .switch-wrapper.size-sm .switch-thumb {\n    width: var(--compa11y-switch-thumb-sm, 14px);\n    height: var(--compa11y-switch-thumb-sm, 14px);\n  }\n\n  .switch-wrapper.size-sm .switch-track.checked .switch-thumb {\n    transform: translateX(14px);\n  }\n\n  .switch-wrapper.size-md .switch-track {\n    width: var(--compa11y-switch-width-md, 44px);\n    height: var(--compa11y-switch-height-md, 24px);\n  }\n\n  .switch-wrapper.size-md .switch-thumb {\n    width: var(--compa11y-switch-thumb-md, 20px);\n    height: var(--compa11y-switch-thumb-md, 20px);\n  }\n\n  .switch-wrapper.size-md .switch-track.checked .switch-thumb {\n    transform: translateX(20px);\n  }\n\n  .switch-wrapper.size-lg .switch-track {\n    width: var(--compa11y-switch-width-lg, 56px);\n    height: var(--compa11y-switch-height-lg, 30px);\n  }\n\n  .switch-wrapper.size-lg .switch-thumb {\n    width: var(--compa11y-switch-thumb-lg, 26px);\n    height: var(--compa11y-switch-thumb-lg, 26px);\n  }\n\n  .switch-wrapper.size-lg .switch-track.checked .switch-thumb {\n    transform: translateX(26px);\n  }\n\n  .switch-track {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n    padding: 2px;\n    border: none;\n    border-radius: var(--compa11y-switch-radius, 9999px);\n    background: var(--compa11y-switch-bg, #d1d5db);\n    cursor: pointer;\n    transition: background-color 0.2s ease;\n    outline: none;\n  }\n\n  .switch-track:focus-visible {\n    outline: 2px solid var(--compa11y-focus-color, #0066cc);\n    outline-offset: 2px;\n  }\n\n  .switch-track.checked {\n    background: var(--compa11y-switch-checked-bg, #0066cc);\n  }\n\n  .switch-track:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .switch-thumb {\n    position: absolute;\n    left: 2px;\n    background: var(--compa11y-switch-thumb-bg, white);\n    border-radius: 50%;\n    box-shadow: var(--compa11y-switch-thumb-shadow, 0 1px 3px rgba(0, 0, 0, 0.2));\n    transition: transform 0.2s ease;\n    pointer-events: none;\n  }\n\n  .switch-label {\n    user-select: none;\n    cursor: pointer;\n    color: var(--compa11y-switch-label-color, inherit);\n  }\n\n  .switch-label.disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n";
+/**
+ * Input-specific styles
+ */
+export declare const INPUT_STYLES = "\n  \n  :host {\n    display: block;\n    box-sizing: border-box;\n  }\n\n  :host([hidden]) {\n    display: none !important;\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: inherit;\n  }\n\n  \n  :host(:focus-visible),\n  :focus-visible {\n    outline: 2px solid var(--compa11y-focus-color, #0066cc);\n    outline-offset: 2px;\n  }\n\n\n\n  :host {\n    display: block;\n    width: var(--compa11y-input-width, 100%);\n  }\n\n  .input-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: 0.25rem;\n  }\n\n  .input-label {\n    display: block;\n    color: var(--compa11y-input-label-color, inherit);\n    font-size: var(--compa11y-input-label-size, 0.875rem);\n    font-weight: var(--compa11y-input-label-weight, 500);\n  }\n\n  :host([disabled]) .input-label {\n    color: var(--compa11y-input-disabled-color, #999);\n  }\n\n  .input-required {\n    color: var(--compa11y-input-required-color, #ef4444);\n    margin-left: 0.125rem;\n  }\n\n  input {\n    width: 100%;\n    padding: var(--compa11y-input-padding, 0.5rem 0.75rem);\n    border: var(--compa11y-input-border, 1px solid #ccc);\n    border-radius: var(--compa11y-input-radius, 4px);\n    font: inherit;\n    font-size: var(--compa11y-input-font-size, 0.875rem);\n    background: var(--compa11y-input-bg, white);\n    color: inherit;\n  }\n\n  input:focus {\n    outline: 2px solid var(--compa11y-focus-color, #0066cc);\n    outline-offset: -1px;\n    border-color: var(--compa11y-input-border-focus, #0066cc);\n  }\n\n  input::placeholder {\n    color: var(--compa11y-input-placeholder-color, #999);\n  }\n\n  input:disabled {\n    background: var(--compa11y-input-disabled-bg, #f5f5f5);\n    cursor: not-allowed;\n    opacity: var(--compa11y-input-disabled-opacity, 0.7);\n  }\n\n  input[readonly] {\n    background: var(--compa11y-input-readonly-bg, #f9f9f9);\n  }\n\n  :host([data-error=\"true\"]) input {\n    border-color: var(--compa11y-input-border-error, #ef4444);\n  }\n\n  :host([data-error=\"true\"]) input:focus {\n    outline-color: var(--compa11y-input-border-error, #ef4444);\n    border-color: var(--compa11y-input-border-error, #ef4444);\n  }\n\n  .input-hint {\n    color: var(--compa11y-input-hint-color, #666);\n    font-size: var(--compa11y-input-hint-size, 0.8125rem);\n  }\n\n  .input-error {\n    color: var(--compa11y-input-error-color, #ef4444);\n    font-size: var(--compa11y-input-error-size, 0.8125rem);\n  }\n";
+/**
+ * Textarea-specific styles
+ */
+export declare const TEXTAREA_STYLES = "\n  \n  :host {\n    display: block;\n    box-sizing: border-box;\n  }\n\n  :host([hidden]) {\n    display: none !important;\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: inherit;\n  }\n\n  \n  :host(:focus-visible),\n  :focus-visible {\n    outline: 2px solid var(--compa11y-focus-color, #0066cc);\n    outline-offset: 2px;\n  }\n\n\n\n  :host {\n    display: block;\n    width: var(--compa11y-textarea-width, 100%);\n  }\n\n  .textarea-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: 0.25rem;\n  }\n\n  .textarea-label {\n    display: block;\n    color: var(--compa11y-textarea-label-color, inherit);\n    font-size: var(--compa11y-textarea-label-size, 0.875rem);\n    font-weight: var(--compa11y-textarea-label-weight, 500);\n  }\n\n  :host([disabled]) .textarea-label {\n    color: var(--compa11y-textarea-disabled-color, #999);\n  }\n\n  .textarea-required {\n    color: var(--compa11y-textarea-required-color, #ef4444);\n    margin-left: 0.125rem;\n  }\n\n  textarea {\n    width: 100%;\n    padding: var(--compa11y-textarea-padding, 0.5rem 0.75rem);\n    border: var(--compa11y-textarea-border, 1px solid #ccc);\n    border-radius: var(--compa11y-textarea-radius, 4px);\n    font: inherit;\n    font-size: var(--compa11y-textarea-font-size, 0.875rem);\n    line-height: 1.5;\n    background: var(--compa11y-textarea-bg, white);\n    color: inherit;\n    resize: var(--compa11y-textarea-resize, vertical);\n  }\n\n  textarea:focus {\n    outline: 2px solid var(--compa11y-focus-color, #0066cc);\n    outline-offset: -1px;\n    border-color: var(--compa11y-textarea-border-focus, #0066cc);\n  }\n\n  textarea::placeholder {\n    color: var(--compa11y-textarea-placeholder-color, #999);\n  }\n\n  textarea:disabled {\n    background: var(--compa11y-textarea-disabled-bg, #f5f5f5);\n    cursor: not-allowed;\n    opacity: var(--compa11y-textarea-disabled-opacity, 0.7);\n  }\n\n  textarea[readonly] {\n    background: var(--compa11y-textarea-readonly-bg, #f9f9f9);\n  }\n\n  :host([data-error=\"true\"]) textarea {\n    border-color: var(--compa11y-textarea-border-error, #ef4444);\n  }\n\n  :host([data-error=\"true\"]) textarea:focus {\n    outline-color: var(--compa11y-textarea-border-error, #ef4444);\n    border-color: var(--compa11y-textarea-border-error, #ef4444);\n  }\n\n  .textarea-hint {\n    color: var(--compa11y-textarea-hint-color, #666);\n    font-size: var(--compa11y-textarea-hint-size, 0.8125rem);\n  }\n\n  .textarea-error {\n    color: var(--compa11y-textarea-error-color, #ef4444);\n    font-size: var(--compa11y-textarea-error-size, 0.8125rem);\n  }\n";
+/**
+ * Button-specific styles
+ */
+export declare const BUTTON_STYLES = "\n  \n  :host {\n    display: block;\n    box-sizing: border-box;\n  }\n\n  :host([hidden]) {\n    display: none !important;\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: inherit;\n  }\n\n  \n  :host(:focus-visible),\n  :focus-visible {\n    outline: 2px solid var(--compa11y-focus-color, #0066cc);\n    outline-offset: 2px;\n  }\n\n\n\n  :host {\n    display: inline-block;\n  }\n\n  @keyframes compa11y-spin {\n    to { transform: rotate(360deg); }\n  }\n\n  button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.5rem;\n    border-radius: var(--compa11y-button-radius, 4px);\n    font: inherit;\n    font-weight: var(--compa11y-button-font-weight, 500);\n    line-height: 1.5;\n    cursor: pointer;\n    transition: background-color 0.15s ease, border-color 0.15s ease;\n    appearance: none;\n    text-decoration: none;\n  }\n\n  button:focus-visible {\n    outline: 2px solid var(--compa11y-focus-color, #0066cc);\n    outline-offset: 2px;\n  }\n\n  /* Sizes */\n  button.size-sm {\n    padding: var(--compa11y-button-padding-sm, 0.25rem 0.5rem);\n    font-size: var(--compa11y-button-font-size-sm, 0.75rem);\n  }\n\n  button.size-md {\n    padding: var(--compa11y-button-padding-md, 0.5rem 1rem);\n    font-size: var(--compa11y-button-font-size-md, 0.875rem);\n  }\n\n  button.size-lg {\n    padding: var(--compa11y-button-padding-lg, 0.75rem 1.5rem);\n    font-size: var(--compa11y-button-font-size-lg, 1rem);\n  }\n\n  /* Variants */\n  button.variant-primary {\n    background: var(--compa11y-button-primary-bg, #0066cc);\n    color: var(--compa11y-button-primary-color, white);\n    border: var(--compa11y-button-primary-border, 1px solid #0066cc);\n  }\n\n  button.variant-primary:hover:not(:disabled):not([aria-disabled=\"true\"]) {\n    background: var(--compa11y-button-primary-hover-bg, #0052a3);\n  }\n\n  button.variant-secondary {\n    background: var(--compa11y-button-secondary-bg, white);\n    color: var(--compa11y-button-secondary-color, #333);\n    border: var(--compa11y-button-secondary-border, 1px solid #ccc);\n  }\n\n  button.variant-secondary:hover:not(:disabled):not([aria-disabled=\"true\"]) {\n    background: var(--compa11y-button-secondary-hover-bg, #f0f0f0);\n  }\n\n  button.variant-danger {\n    background: var(--compa11y-button-danger-bg, #ef4444);\n    color: var(--compa11y-button-danger-color, white);\n    border: var(--compa11y-button-danger-border, 1px solid #ef4444);\n  }\n\n  button.variant-danger:hover:not(:disabled):not([aria-disabled=\"true\"]) {\n    background: var(--compa11y-button-danger-hover-bg, #dc2626);\n  }\n\n  button.variant-outline {\n    background: var(--compa11y-button-outline-bg, transparent);\n    color: var(--compa11y-button-outline-color, #0066cc);\n    border: var(--compa11y-button-outline-border, 1px solid #0066cc);\n  }\n\n  button.variant-outline:hover:not(:disabled):not([aria-disabled=\"true\"]) {\n    background: var(--compa11y-button-outline-hover-bg, rgba(0, 102, 204, 0.05));\n  }\n\n  button.variant-ghost {\n    background: var(--compa11y-button-ghost-bg, transparent);\n    color: var(--compa11y-button-ghost-color, #333);\n    border: var(--compa11y-button-ghost-border, 1px solid transparent);\n  }\n\n  button.variant-ghost:hover:not(:disabled):not([aria-disabled=\"true\"]) {\n    background: var(--compa11y-button-ghost-hover-bg, rgba(0, 0, 0, 0.05));\n  }\n\n  /* Disabled */\n  button:disabled,\n  button[aria-disabled=\"true\"] {\n    opacity: var(--compa11y-button-disabled-opacity, 0.5);\n    cursor: not-allowed;\n  }\n\n  /* Loading spinner */\n  .button-spinner {\n    display: inline-block;\n    width: 1em;\n    height: 1em;\n    border: 2px solid currentColor;\n    border-right-color: transparent;\n    border-radius: 50%;\n    animation: compa11y-spin 0.6s linear infinite;\n  }\n";
+/**
+ * Listbox-specific styles
+ */
+export declare const LISTBOX_STYLES = "\n  \n  :host {\n    display: block;\n    box-sizing: border-box;\n  }\n\n  :host([hidden]) {\n    display: none !important;\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: inherit;\n  }\n\n  \n  :host(:focus-visible),\n  :focus-visible {\n    outline: 2px solid var(--compa11y-focus-color, #0066cc);\n    outline-offset: 2px;\n  }\n\n\n\n  :host {\n    display: block;\n    width: var(--compa11y-listbox-width, 250px);\n  }\n\n  .listbox-wrapper {\n    max-height: var(--compa11y-listbox-max-height, 300px);\n    overflow-y: auto;\n    border: var(--compa11y-listbox-border, 1px solid #e0e0e0);\n    border-radius: var(--compa11y-listbox-radius, 4px);\n    background: var(--compa11y-listbox-bg, white);\n    padding: var(--compa11y-listbox-padding, 0.25rem 0);\n  }\n\n  :host([disabled]) .listbox-wrapper {\n    opacity: var(--compa11y-listbox-disabled-opacity, 0.5);\n    cursor: not-allowed;\n  }\n\n  :host(:focus-visible) .listbox-wrapper {\n    outline: 2px solid var(--compa11y-focus-color, #0066cc);\n    outline-offset: 2px;\n  }\n\n  :host([orientation=\"horizontal\"]) .listbox-wrapper {\n    display: flex;\n    flex-wrap: wrap;\n    max-height: none;\n    overflow-y: visible;\n  }\n";
+/**
+ * Option-specific styles (for a11y-option inside listbox)
+ */
+export declare const OPTION_STYLES = "\n  \n  :host {\n    display: block;\n    box-sizing: border-box;\n  }\n\n  :host([hidden]) {\n    display: none !important;\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: inherit;\n  }\n\n  \n  :host(:focus-visible),\n  :focus-visible {\n    outline: 2px solid var(--compa11y-focus-color, #0066cc);\n    outline-offset: 2px;\n  }\n\n\n\n  :host {\n    display: block;\n  }\n\n  .option-wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: var(--compa11y-listbox-option-padding, 0.5rem 0.75rem);\n    cursor: pointer;\n    transition: background 0.1s ease;\n    user-select: none;\n  }\n\n  :host([data-focused]) .option-wrapper {\n    background: var(--compa11y-listbox-option-hover-bg, #f5f5f5);\n  }\n\n  :host([aria-selected=\"true\"]) .option-wrapper {\n    background: var(--compa11y-listbox-option-selected-bg, #e6f0ff);\n    font-weight: 500;\n  }\n\n  :host([aria-selected=\"true\"][data-focused]) .option-wrapper {\n    background: var(--compa11y-listbox-option-selected-hover-bg, #cce0ff);\n  }\n\n  :host([aria-disabled=\"true\"]) .option-wrapper {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .option-content {\n    flex: 1;\n  }\n\n  .check-mark {\n    font-size: 0.875rem;\n    color: var(--compa11y-listbox-check-color, #0066cc);\n    margin-left: 0.5rem;\n    visibility: hidden;\n  }\n\n  :host([aria-selected=\"true\"]) .check-mark {\n    visibility: visible;\n  }\n";
+/**
+ * Optgroup-specific styles (for a11y-optgroup inside listbox)
+ */
+export declare const OPTGROUP_STYLES = "\n  \n  :host {\n    display: block;\n    box-sizing: border-box;\n  }\n\n  :host([hidden]) {\n    display: none !important;\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: inherit;\n  }\n\n  \n  :host(:focus-visible),\n  :focus-visible {\n    outline: 2px solid var(--compa11y-focus-color, #0066cc);\n    outline-offset: 2px;\n  }\n\n\n\n  :host {\n    display: block;\n  }\n\n  .optgroup-label {\n    padding: var(--compa11y-listbox-group-label-padding, 0.5rem 0.75rem 0.25rem);\n    font-size: var(--compa11y-listbox-group-label-size, 0.75rem);\n    font-weight: var(--compa11y-listbox-group-label-weight, 600);\n    color: var(--compa11y-listbox-group-label-color, #666);\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n  }\n\n  :host([disabled]) {\n    opacity: 0.5;\n  }\n";
+/**
+ * Checkbox-specific styles
+ */
+export declare const CHECKBOX_STYLES = "\n  \n  :host {\n    display: block;\n    box-sizing: border-box;\n  }\n\n  :host([hidden]) {\n    display: none !important;\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: inherit;\n  }\n\n  \n  :host(:focus-visible),\n  :focus-visible {\n    outline: 2px solid var(--compa11y-focus-color, #0066cc);\n    outline-offset: 2px;\n  }\n\n\n\n  :host {\n    display: inline-block;\n  }\n\n  .checkbox-wrapper {\n    display: inline-flex;\n    align-items: flex-start;\n    gap: var(--compa11y-checkbox-gap, 0.5rem);\n    cursor: pointer;\n    user-select: none;\n  }\n\n  :host([disabled]) .checkbox-wrapper {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .checkbox-control {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n\n  .checkbox-input {\n    position: absolute;\n    opacity: 0;\n    width: 100%;\n    height: 100%;\n    margin: 0;\n    cursor: inherit;\n    z-index: 1;\n  }\n\n  .checkbox-indicator {\n    width: var(--compa11y-checkbox-size, 1.25rem);\n    height: var(--compa11y-checkbox-size, 1.25rem);\n    min-width: 24px;\n    min-height: 24px;\n    border: var(--compa11y-checkbox-border, 2px solid #666);\n    border-radius: var(--compa11y-checkbox-radius, 3px);\n    background: var(--compa11y-checkbox-bg, white);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    transition: all 0.15s ease;\n    pointer-events: none;\n  }\n\n  :host([checked]) .checkbox-indicator {\n    background: var(--compa11y-checkbox-checked-bg, #0066cc);\n    border-color: var(--compa11y-checkbox-checked-border, #0066cc);\n  }\n\n  :host([indeterminate]) .checkbox-indicator {\n    background: var(--compa11y-checkbox-checked-bg, #0066cc);\n    border-color: var(--compa11y-checkbox-checked-border, #0066cc);\n  }\n\n  /* Size variants */\n  .checkbox-wrapper.size-sm .checkbox-indicator {\n    width: var(--compa11y-checkbox-size-sm, 1rem);\n    height: var(--compa11y-checkbox-size-sm, 1rem);\n    min-width: 24px;\n    min-height: 24px;\n  }\n\n  .checkbox-wrapper.size-lg .checkbox-indicator {\n    width: var(--compa11y-checkbox-size-lg, 1.5rem);\n    height: var(--compa11y-checkbox-size-lg, 1.5rem);\n  }\n\n  /* Check mark SVG */\n  .checkbox-check {\n    opacity: 0;\n    transform: scale(0);\n    transition: all 0.15s ease;\n    color: var(--compa11y-checkbox-check-color, white);\n  }\n\n  :host([checked]) .checkbox-check {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  :host([indeterminate]) .checkbox-check {\n    opacity: 0;\n    transform: scale(0);\n  }\n\n  /* Indeterminate dash */\n  .checkbox-dash {\n    opacity: 0;\n    transition: all 0.15s ease;\n    color: var(--compa11y-checkbox-check-color, white);\n  }\n\n  :host([indeterminate]) .checkbox-dash {\n    opacity: 1;\n  }\n\n  /* Focus visible on indicator when input is focused */\n  .checkbox-input:focus-visible + .checkbox-indicator {\n    outline: 2px solid var(--compa11y-focus-color, #0066cc);\n    outline-offset: 2px;\n  }\n\n  /* Hover */\n  .checkbox-wrapper:hover:not([disabled]) .checkbox-indicator {\n    border-color: var(--compa11y-checkbox-hover-border, #0066cc);\n  }\n\n  /* Label and text */\n  .checkbox-content {\n    display: flex;\n    flex-direction: column;\n    gap: 0.125rem;\n    padding-top: 0.125rem;\n  }\n\n  .checkbox-label {\n    color: var(--compa11y-checkbox-label-color, inherit);\n    font-size: var(--compa11y-checkbox-label-size, 1rem);\n    cursor: inherit;\n  }\n\n  .checkbox-hint {\n    color: var(--compa11y-checkbox-hint-color, #666);\n    font-size: var(--compa11y-checkbox-hint-size, 0.8125rem);\n  }\n\n  .checkbox-error {\n    color: var(--compa11y-checkbox-error-color, #ef4444);\n    font-size: var(--compa11y-checkbox-error-size, 0.8125rem);\n  }\n\n  .checkbox-required {\n    color: var(--compa11y-checkbox-required-color, #ef4444);\n    margin-left: 0.125rem;\n  }\n\n  /* Forced colors / high contrast mode */\n  @media (forced-colors: active) {\n    .checkbox-indicator {\n      border: 2px solid ButtonText;\n    }\n\n    :host([checked]) .checkbox-indicator,\n    :host([indeterminate]) .checkbox-indicator {\n      background: Highlight;\n      border-color: Highlight;\n    }\n\n    .checkbox-check,\n    .checkbox-dash {\n      color: HighlightText;\n    }\n  }\n";
+/**
+ * CheckboxGroup-specific styles
+ */
+export declare const CHECKBOX_GROUP_STYLES = "\n  \n  :host {\n    display: block;\n    box-sizing: border-box;\n  }\n\n  :host([hidden]) {\n    display: none !important;\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: inherit;\n  }\n\n  \n  :host(:focus-visible),\n  :focus-visible {\n    outline: 2px solid var(--compa11y-focus-color, #0066cc);\n    outline-offset: 2px;\n  }\n\n\n\n  :host {\n    display: block;\n  }\n\n  fieldset {\n    border: none;\n    margin: 0;\n    padding: 0;\n    min-width: 0;\n  }\n\n  legend {\n    padding: 0;\n    margin-bottom: var(--compa11y-checkbox-group-legend-gap, 0.5rem);\n    font-weight: var(--compa11y-checkbox-group-legend-weight, 600);\n    color: var(--compa11y-checkbox-group-legend-color, inherit);\n    font-size: var(--compa11y-checkbox-group-legend-size, 1rem);\n  }\n\n  .checkbox-group-items {\n    display: flex;\n    flex-direction: column;\n    gap: var(--compa11y-checkbox-group-gap, 0.75rem);\n  }\n\n  :host([orientation=\"horizontal\"]) .checkbox-group-items {\n    flex-direction: row;\n    flex-wrap: wrap;\n  }\n\n  .checkbox-group-error {\n    color: var(--compa11y-checkbox-group-error-color, #ef4444);\n    font-size: var(--compa11y-checkbox-group-error-size, 0.8125rem);\n    margin-top: 0.25rem;\n  }\n\n  :host([disabled]) {\n    opacity: 0.5;\n  }\n";
+/**
+ * RadioGroup-specific styles
+ */
+export declare const RADIO_GROUP_STYLES = "\n  \n  :host {\n    display: block;\n    box-sizing: border-box;\n  }\n\n  :host([hidden]) {\n    display: none !important;\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: inherit;\n  }\n\n  \n  :host(:focus-visible),\n  :focus-visible {\n    outline: 2px solid var(--compa11y-focus-color, #0066cc);\n    outline-offset: 2px;\n  }\n\n\n\n  :host {\n    display: block;\n  }\n\n  fieldset {\n    border: none;\n    margin: 0;\n    padding: 0;\n    min-width: 0;\n  }\n\n  legend {\n    padding: 0;\n    margin-bottom: var(--compa11y-radio-group-legend-gap, 0.5rem);\n    font-weight: var(--compa11y-radio-group-legend-weight, 600);\n    color: var(--compa11y-radio-group-legend-color, inherit);\n    font-size: var(--compa11y-radio-group-legend-size, 1rem);\n  }\n\n  .radio-group-items {\n    display: flex;\n    flex-direction: column;\n    gap: var(--compa11y-radio-group-gap, 0.75rem);\n  }\n\n  :host([orientation=\"horizontal\"]) .radio-group-items {\n    flex-direction: row;\n    flex-wrap: wrap;\n  }\n\n  .radio-group-hint {\n    color: var(--compa11y-radio-group-hint-color, #666);\n    font-size: var(--compa11y-radio-group-hint-size, 0.8125rem);\n    margin-top: 0.25rem;\n  }\n\n  .radio-group-error {\n    color: var(--compa11y-radio-group-error-color, #ef4444);\n    font-size: var(--compa11y-radio-group-error-size, 0.8125rem);\n    margin-top: 0.25rem;\n  }\n\n  .radio-group-required {\n    color: var(--compa11y-radio-group-required-color, #ef4444);\n    margin-left: 0.125rem;\n  }\n\n  :host([disabled]) {\n    opacity: 0.5;\n  }\n";
+/**
+ * Radio-specific styles
+ */
+export declare const RADIO_STYLES = "\n  \n  :host {\n    display: block;\n    box-sizing: border-box;\n  }\n\n  :host([hidden]) {\n    display: none !important;\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: inherit;\n  }\n\n  \n  :host(:focus-visible),\n  :focus-visible {\n    outline: 2px solid var(--compa11y-focus-color, #0066cc);\n    outline-offset: 2px;\n  }\n\n\n\n  :host {\n    display: inline-block;\n  }\n\n  .radio-wrapper {\n    display: inline-flex;\n    align-items: flex-start;\n    gap: var(--compa11y-radio-gap, 0.5rem);\n    cursor: pointer;\n    user-select: none;\n  }\n\n  :host([disabled]) .radio-wrapper {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .radio-control {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n\n  .radio-input {\n    position: absolute;\n    opacity: 0;\n    width: 100%;\n    height: 100%;\n    margin: 0;\n    cursor: inherit;\n    z-index: 1;\n  }\n\n  .radio-circle {\n    width: var(--compa11y-radio-size, 1.25rem);\n    height: var(--compa11y-radio-size, 1.25rem);\n    min-width: 24px;\n    min-height: 24px;\n    border: var(--compa11y-radio-border, 2px solid #666);\n    border-radius: 50%;\n    background: var(--compa11y-radio-bg, white);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    transition: all 0.15s ease;\n    pointer-events: none;\n  }\n\n  :host([checked]) .radio-circle {\n    background: var(--compa11y-radio-checked-bg, #0066cc);\n    border-color: var(--compa11y-radio-checked-border, #0066cc);\n  }\n\n  /* Focus visible on circle when input is focused */\n  .radio-input:focus-visible + .radio-circle {\n    outline: 2px solid var(--compa11y-focus-color, #0066cc);\n    outline-offset: 2px;\n  }\n\n  /* Hover */\n  .radio-wrapper:hover:not([disabled]) .radio-circle {\n    border-color: var(--compa11y-radio-hover-border, #0066cc);\n  }\n\n  /* Inner dot */\n  .radio-dot {\n    width: var(--compa11y-radio-dot-size, 0.5rem);\n    height: var(--compa11y-radio-dot-size, 0.5rem);\n    border-radius: 50%;\n    background: var(--compa11y-radio-dot-color, white);\n    opacity: 0;\n    transform: scale(0);\n    transition: all 0.15s ease;\n  }\n\n  :host([checked]) .radio-dot {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  /* Label and text */\n  .radio-content {\n    display: flex;\n    flex-direction: column;\n    gap: 0.125rem;\n    padding-top: 0.125rem;\n  }\n\n  .radio-label {\n    color: var(--compa11y-radio-label-color, inherit);\n    font-size: var(--compa11y-radio-label-size, 1rem);\n    cursor: inherit;\n  }\n\n  .radio-hint {\n    color: var(--compa11y-radio-hint-color, #666);\n    font-size: var(--compa11y-radio-hint-size, 0.8125rem);\n  }\n\n  /* Forced colors / high contrast mode */\n  @media (forced-colors: active) {\n    .radio-circle {\n      border: 2px solid ButtonText;\n    }\n\n    :host([checked]) .radio-circle {\n      background: Highlight;\n      border-color: Highlight;\n    }\n\n    .radio-dot {\n      background: HighlightText;\n    }\n  }\n";
 //# sourceMappingURL=styles.d.ts.map

package/dist/utils/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/utils/styles.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,eAAO,MAAM,sBAAsB,mLAUlC,CAAC;AAEF,eAAO,MAAM,mBAAmB,wJAS/B,CAAC;AAEF,eAAO,MAAM,oBAAoB,kJAMhC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,0VAiBvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,+zCAuCzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,ioDAoDvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,wlDA8CvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,y8HA6I3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,+4FAwGzB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/utils/styles.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,eAAO,MAAM,sBAAsB,mLAUlC,CAAC;AAEF,eAAO,MAAM,mBAAmB,wJAS/B,CAAC;AAEF,eAAO,MAAM,oBAAoB,kJAMhC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,0VAiBvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,+zCAuCzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,ioDAoDvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,wlDA8CvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,y8HA6I3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,+iHAkIzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,+4FAwGzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,63EA+ExB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,wjFAiF3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,gxHAmHzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,6rCAiC1B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,y7CAiDzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,uyBAmB3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,mxIAmK3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB,2wCA0CjC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,giDAqD9B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,6hGAwHxB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compa11y/web",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Accessible Web Components for any HTML page - CDN ready",
   "author": "Ivan Trajkovski",
   "license": "MIT",
@@ -45,6 +45,34 @@
     "./switch": {
       "types": "./dist/components/switch.d.ts",
       "import": "./dist/components/switch.js"
+    },
+    "./checkbox": {
+      "types": "./dist/components/checkbox.d.ts",
+      "import": "./dist/components/checkbox.js"
+    },
+    "./select": {
+      "types": "./dist/components/select.d.ts",
+      "import": "./dist/components/select.js"
+    },
+    "./input": {
+      "types": "./dist/components/input.d.ts",
+      "import": "./dist/components/input.js"
+    },
+    "./textarea": {
+      "types": "./dist/components/textarea.d.ts",
+      "import": "./dist/components/textarea.js"
+    },
+    "./button": {
+      "types": "./dist/components/button.d.ts",
+      "import": "./dist/components/button.js"
+    },
+    "./radio-group": {
+      "types": "./dist/components/radio-group.d.ts",
+      "import": "./dist/components/radio-group.js"
+    },
+    "./listbox": {
+      "types": "./dist/components/listbox.d.ts",
+      "import": "./dist/components/listbox.js"
     }
   },
   "unpkg": "./dist/compa11y.iife.js",
@@ -55,7 +83,7 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@compa11y/core": "0.1.0"
+    "@compa11y/core": "0.1.2"
   },
   "devDependencies": {
     "@types/node": "^20.11.0",
@@ -79,7 +107,15 @@
     "autocomplete",
     "select",
     "switch",
-    "toggle"
+    "toggle",
+    "checkbox",
+    "input",
+    "textarea",
+    "button",
+    "radio-group",
+    "radio",
+    "listbox",
+    "form"
   ],
   "scripts": {
     "build": "vite build",