aeico-components 0.1.1

package/src/styles/components/text-input.css

@@ -0,0 +1,110 @@
+:host {
+  display: block;
+  flex: 1;
+  min-width: 0;
+  font-size: var(--size-base);
+
+  /* Layout variables */
+  --input-field-gap: 4px;
+  
+  /* Input element variables */
+  --input-font-size: 1em;
+  --input-padding: 0.333em 0.583em;
+  --input-border-width: 1px;
+  --input-border-radius: 2px;
+  --input-border-color: var(--border-subtle);
+  --input-border-color-hover: var(--border-default);
+  --input-border-color-focus: var(--border-focus);
+  --input-bg: var(--surface-base);
+  --input-bg-hover: var(--surface-raised);
+  --input-bg-focus: var(--surface-raised);
+  --input-color: var(--color-text-muted);
+  --input-placeholder-color: var(--color-text-disabled);
+  --input-transition: border-color 0.12s, background 0.12s;
+}
+
+.input-container {
+  display: flex;
+  align-items: center;
+  gap: var(--input-field-gap);
+  width: 100%;
+}
+
+input {
+  flex: 1;
+  min-width: 0;
+  font-size: var(--input-font-size);
+  padding: var(--input-padding);
+  border: var(--input-border-width) solid var(--input-border-color);
+  border-radius: var(--input-border-radius);
+  background: var(--input-bg);
+  color: var(--input-color);
+  transition: var(--input-transition);
+}
+
+input::placeholder {
+  color: var(--input-placeholder-color);
+}
+
+input:focus {
+  outline: none;
+  border-color: var(--input-border-color-focus);
+  background: var(--input-bg-focus);
+}
+
+input:hover:not(:focus) {
+  border-color: var(--input-border-color-hover);
+  background: var(--input-bg-hover);
+}
+
+input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Clear button styles */
+.clear-btn {
+  width: 1.333em;
+  height: 1.333em;
+  border: none;
+  border-radius: var(--clear-btn-border-radius);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--clear-btn-bg);
+  color: var(--clear-btn-color);
+  transition: var(--clear-btn-transition);
+  flex-shrink: 0;
+  line-height: 1;
+}
+
+.clear-btn:hover {
+  background: var(--clear-btn-bg-hover);
+  color: var(--clear-btn-color-hover);
+}
+
+/* Reset button styles */
+.reset-btn {
+  width: 1.333em;
+  height: 1.333em;
+  border: none;
+  border-radius: var(--reset-btn-border-radius);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--reset-btn-bg);
+  color: var(--reset-btn-color);
+  transition: var(--reset-btn-transition);
+  flex-shrink: 0;
+  line-height: 1;
+}
+
+.reset-btn:hover {
+  background: var(--reset-btn-bg-hover);
+  color: var(--reset-btn-color-hover);
+}
+
+
+

package/src/styles/layout.css

@@ -0,0 +1,43 @@
+/* 
+   layout.css — Light DOM utility classes
+   This file is for use in the user's light DOM (regular HTML),
+   NOT imported by any Web Component internally.
+
+   Import it once in your page:
+     import 'aeico/styles/layout.css'
+   or:
+     <link rel="stylesheet" href="path/to/layout.css">
+
+   The layout tokens defined here on :root are intentionally mirrored
+   in variables.css (:root, :host) so that ae-navbar's shadow DOM
+   inner content also aligns automatically.
+*/
+
+/* Layout tokens — defined on :root so all light DOM elements can use them */
+:root {
+  --container-max-width: 1280px;
+  --container-padding-x: 1.5rem;
+}
+
+/*
+   .container
+   Fixed max-width, centred, with horizontal padding.
+   Same padding-x as ae-navbar's inner content area.
+*/
+.container {
+  width: 100%;
+  max-width: var(--container-max-width, 1280px);
+  margin-inline: auto;
+  padding-inline: var(--container-padding-x, 1.5rem);
+  box-sizing: border-box;
+}
+
+/* 
+   .container-fluid
+   Full-width, only applies horizontal padding.
+*/
+.container-fluid {
+  width: 100%;
+  padding-inline: var(--container-padding-x, 1.5rem);
+  box-sizing: border-box;
+}

package/src/styles/size.css

@@ -0,0 +1,7 @@
+:host([size="xs"]) { font-size: var(--size-xs); }
+:host([size="sm"]) { font-size: var(--size-s); }
+:host([size="md"]) { font-size: var(--size-m); }
+:host([size="lg"]) { font-size: var(--size-l); }
+:host([size="xl"]) { font-size: var(--size-xl); }
+:host([size="3xs"]) { font-size: var(--size-3xs); }
+:host([size="2xs"]) { font-size: var(--size-2xs); }

package/src/styles/variables.css

@@ -0,0 +1,368 @@
+:root,
+:host {
+  --ae-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
+    "Noto Sans", "Liberation Sans", Arial, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --ae-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
+  font-family: var(--ae-font-sans-serif);
+  --blue:   #0e639c;
+  --green:  #28a745;
+  --red:    #dc3545;
+  --yellow: #ffc107;
+  --cyan:   #17a2b8;
+  --gray:   #6e6e6e;
+  --slate:  #64748b;
+  --dark:   #343a40;
+  --light:  #f8f9fa;
+}
+
+:root,
+:host {
+  /* Blue */
+  --blue-100: color-mix(in srgb, var(--blue) 20%, white);
+  --blue-200: color-mix(in srgb, var(--blue) 40%, white);
+  --blue-300: color-mix(in srgb, var(--blue) 60%, white);
+  --blue-400: color-mix(in srgb, var(--blue) 80%, white);
+  --blue-500: var(--blue);
+  --blue-600: color-mix(in srgb, var(--blue) 80%, black);
+  --blue-700: color-mix(in srgb, var(--blue) 60%, black);
+  --blue-800: color-mix(in srgb, var(--blue) 40%, black);
+  --blue-900: color-mix(in srgb, var(--blue) 20%, black);
+
+  /* Green */
+  --green-100: color-mix(in srgb, var(--green) 20%, white);
+  --green-200: color-mix(in srgb, var(--green) 40%, white);
+  --green-300: color-mix(in srgb, var(--green) 60%, white);
+  --green-400: color-mix(in srgb, var(--green) 80%, white);
+  --green-500: var(--green);
+  --green-600: color-mix(in srgb, var(--green) 80%, black);
+  --green-700: color-mix(in srgb, var(--green) 60%, black);
+  --green-800: color-mix(in srgb, var(--green) 40%, black);
+  --green-900: color-mix(in srgb, var(--green) 20%, black);
+
+  /* Red */
+  --red-100: color-mix(in srgb, var(--red) 20%, white);
+  --red-200: color-mix(in srgb, var(--red) 40%, white);
+  --red-300: color-mix(in srgb, var(--red) 60%, white);
+  --red-400: color-mix(in srgb, var(--red) 80%, white);
+  --red-500: var(--red);
+  --red-600: color-mix(in srgb, var(--red) 80%, black);
+  --red-700: color-mix(in srgb, var(--red) 60%, black);
+  --red-800: color-mix(in srgb, var(--red) 40%, black);
+  --red-900: color-mix(in srgb, var(--red) 20%, black);
+
+  /* Yellow */
+  --yellow-100: color-mix(in srgb, var(--yellow) 20%, white);
+  --yellow-200: color-mix(in srgb, var(--yellow) 40%, white);
+  --yellow-300: color-mix(in srgb, var(--yellow) 60%, white);
+  --yellow-400: color-mix(in srgb, var(--yellow) 80%, white);
+  --yellow-500: var(--yellow);
+  --yellow-600: color-mix(in srgb, var(--yellow) 80%, black);
+  --yellow-700: color-mix(in srgb, var(--yellow) 60%, black);
+  --yellow-800: color-mix(in srgb, var(--yellow) 40%, black);
+  --yellow-900: color-mix(in srgb, var(--yellow) 20%, black);
+
+  /* Cyan */
+  --cyan-100: color-mix(in srgb, var(--cyan) 20%, white);
+  --cyan-200: color-mix(in srgb, var(--cyan) 40%, white);
+  --cyan-300: color-mix(in srgb, var(--cyan) 60%, white);
+  --cyan-400: color-mix(in srgb, var(--cyan) 80%, white);
+  --cyan-500: var(--cyan);
+  --cyan-600: color-mix(in srgb, var(--cyan) 80%, black);
+  --cyan-700: color-mix(in srgb, var(--cyan) 60%, black);
+  --cyan-800: color-mix(in srgb, var(--cyan) 40%, black);
+  --cyan-900: color-mix(in srgb, var(--cyan) 20%, black);
+
+  /* Gray  (neutral — base #6e6e6e) */
+  --gray-100: color-mix(in srgb, var(--gray) 20%, white);
+  --gray-200: color-mix(in srgb, var(--gray) 40%, white);
+  --gray-300: color-mix(in srgb, var(--gray) 60%, white);
+  --gray-400: color-mix(in srgb, var(--gray) 80%, white);
+  --gray-500: var(--gray);
+  --gray-600: color-mix(in srgb, var(--gray) 80%, black);
+  --gray-700: color-mix(in srgb, var(--gray) 60%, black);
+  --gray-800: color-mix(in srgb, var(--gray) 40%, black);
+  --gray-900: color-mix(in srgb, var(--gray) 20%, black);
+
+  /* Slate  (blue-gray — base #64748b, used for 'secondary') */
+  --slate-100: color-mix(in srgb, var(--slate) 20%, white);
+  --slate-200: color-mix(in srgb, var(--slate) 40%, white);
+  --slate-300: color-mix(in srgb, var(--slate) 60%, white);
+  --slate-400: color-mix(in srgb, var(--slate) 80%, white);
+  --slate-500: var(--slate);
+  --slate-600: color-mix(in srgb, var(--slate) 80%, black);
+  --slate-700: color-mix(in srgb, var(--slate) 60%, black);
+  --slate-800: color-mix(in srgb, var(--slate) 40%, black);
+  --slate-900: color-mix(in srgb, var(--slate) 20%, black);
+
+  /* Dark  (base #343a40) */
+  --dark-100: color-mix(in srgb, var(--dark) 20%, white);
+  --dark-200: color-mix(in srgb, var(--dark) 40%, white);
+  --dark-300: color-mix(in srgb, var(--dark) 60%, white);
+  --dark-400: color-mix(in srgb, var(--dark) 80%, white);
+  --dark-500: var(--dark);
+  --dark-600: color-mix(in srgb, var(--dark) 80%, black);
+  --dark-700: color-mix(in srgb, var(--dark) 60%, black);
+  --dark-800: color-mix(in srgb, var(--dark) 40%, black);
+  --dark-900: color-mix(in srgb, var(--dark) 20%, black);
+
+  /* Light  (base #f8f9fa) */
+  --light-100: color-mix(in srgb, var(--light) 20%, white);
+  --light-200: color-mix(in srgb, var(--light) 40%, white);
+  --light-300: color-mix(in srgb, var(--light) 60%, white);
+  --light-400: color-mix(in srgb, var(--light) 80%, white);
+  --light-500: var(--light);
+  --light-600: color-mix(in srgb, var(--light) 80%, black);
+  --light-700: color-mix(in srgb, var(--light) 60%, black);
+  --light-800: color-mix(in srgb, var(--light) 40%, black);
+  --light-900: color-mix(in srgb, var(--light) 20%, black);
+}
+
+:root,
+:host {
+  /* Hover / active mix (light default — overridden in § 6 dark) */
+  --color-mix-hover:  black 10%;
+  --color-mix-active: black 20%;
+
+  /* Primary (Blue) */
+  --color-primary:          var(--blue-500);
+  --color-primary-hover:    color-mix(in srgb, var(--color-primary), var(--color-mix-hover));
+  --color-primary-active:   color-mix(in srgb, var(--color-primary), var(--color-mix-active));
+  --color-primary-disabled: color-mix(in srgb, var(--blue) 50%, var(--gray-500));
+
+  /* Success (Green) */
+  --color-success:          var(--green-500);
+  --color-success-hover:    color-mix(in srgb, var(--color-success), var(--color-mix-hover));
+  --color-success-active:   color-mix(in srgb, var(--color-success), var(--color-mix-active));
+  --color-success-disabled: color-mix(in srgb, var(--green) 50%, var(--gray-500));
+
+  /* Danger (Red) */
+  --color-danger:           var(--red-500);
+  --color-danger-hover:     color-mix(in srgb, var(--color-danger), var(--color-mix-hover));
+  --color-danger-active:    color-mix(in srgb, var(--color-danger), var(--color-mix-active));
+  --color-danger-disabled:  color-mix(in srgb, var(--red) 50%, var(--gray-500));
+
+  /* Warning (Yellow) */
+  --color-warning:          var(--yellow-500);
+  --color-warning-hover:    color-mix(in srgb, var(--color-warning), var(--color-mix-hover));
+  --color-warning-active:   color-mix(in srgb, var(--color-warning), var(--color-mix-active));
+  --color-warning-disabled: color-mix(in srgb, var(--yellow) 50%, var(--gray-500));
+
+  /* Info (Cyan) */
+  --color-info:             var(--cyan-500);
+  --color-info-hover:       color-mix(in srgb, var(--color-info), var(--color-mix-hover));
+  --color-info-active:      color-mix(in srgb, var(--color-info), var(--color-mix-active));
+  --color-info-disabled:    color-mix(in srgb, var(--cyan) 50%, var(--gray-500));
+
+  /* Secondary (Slate) — base differs per theme, overridden in § 6 dark */
+  --color-secondary:        var(--slate-500);
+  --color-secondary-hover:  color-mix(in srgb, var(--color-secondary), var(--color-mix-hover));
+  --color-secondary-active: color-mix(in srgb, var(--color-secondary), var(--color-mix-active));
+  --color-secondary-text:   var(--slate-700);
+
+  /* On-solid — text color on filled (saturated) backgrounds.
+     Fixed white: blue/green/red/cyan buttons always have white text.
+     Does NOT follow --color-text-main. */
+  --color-on-solid: white;
+}
+
+
+.theme-light,
+:root[theme="light"],
+:host([theme="light"]),
+:host-context([theme="light"]),
+:where(:root),
+:host {
+  color-scheme: light;
+
+  /* Gray UI aliases — lighter palette steps for elements on white background */
+  --color-gray-dark:     var(--gray-400);
+  --color-gray:          var(--gray-300);
+  --color-gray-light:    var(--gray-200);
+  --color-gray-lighter:  var(--gray-100);
+  --color-gray-lightest: color-mix(in srgb, var(--gray) 10%, white);
+
+  /* Text */
+  --color-text-main:       var(--dark-700);
+  --color-text-muted:      var(--gray-600);
+  --color-text-disabled:   var(--gray-300);
+  --color-text-link:       var(--blue-500);
+  --color-text-link-hover: var(--blue-700);
+
+  /* Surfaces */
+  --surface-sunken:  var(--light-500);
+  --surface-base:    white;
+  --surface-raised:  var(--light-500);
+  --surface-overlay: white;
+  --color-overlay:   rgba(0, 0, 0, 0.4);
+
+  /* Borders */
+  --border-subtle:   rgba(0, 0, 0, 0.08);
+  --border-default:  rgba(0, 0, 0, 0.15);
+  --border-hover:    rgba(0, 0, 0, 0.25);
+  --border-focus:    var(--color-primary);
+  --border-disabled: rgba(0, 0, 0, 0.06);
+
+  /* Focus ring */
+  --focus-ring:    rgb(from var(--blue) r g b / 0.30);
+  --focus-ring-sm: rgb(from var(--blue) r g b / 0.15);
+
+  /* Subtle intent tokens — light context */
+  --color-primary-bg-subtle:       rgb(from var(--blue) r g b / 0.08);
+  --color-primary-border-subtle:   rgb(from var(--blue) r g b / 0.40);
+  --color-primary-text-emphasis:   var(--blue-700);
+
+  --color-success-bg-subtle:       rgb(from var(--green) r g b / 0.08);
+  --color-success-border-subtle:   rgb(from var(--green) r g b / 0.40);
+  --color-success-text-emphasis:   var(--green-700);
+
+  --color-danger-bg-subtle:        rgb(from var(--red) r g b / 0.08);
+  --color-danger-border-subtle:    rgb(from var(--red) r g b / 0.40);
+  --color-danger-text-emphasis:    var(--red-700);
+
+  --color-warning-bg-subtle:       rgb(from var(--yellow) r g b / 0.08);
+  --color-warning-border-subtle:   rgb(from var(--yellow) r g b / 0.40);
+  --color-warning-text-emphasis:   var(--yellow-700);
+
+  --color-info-bg-subtle:          rgb(from var(--cyan) r g b / 0.08);
+  --color-info-border-subtle:      rgb(from var(--cyan) r g b / 0.40);
+  --color-info-text-emphasis:      var(--cyan-700);
+
+  --color-secondary-bg-subtle:     rgb(from var(--slate) r g b / 0.08);
+  --color-secondary-border-subtle: rgb(from var(--slate) r g b / 0.40);
+  --color-secondary-text-emphasis: var(--slate-700);
+
+  --color-light-bg-subtle:         var(--gray-100);   /* opaque on white: ~#e2e2e2 */
+  --color-light-border-subtle:     var(--gray-200);   /* opaque on white: ~#c4c4c4 */
+
+  --color-dark-bg-subtle:          var(--dark-100);   /* opaque on white: ~#d6d8d9 */
+  --color-dark-border-subtle:      var(--dark-300);   /* opaque on white: ~#85898c */
+
+  /* Component tokens — light defaults */
+  --action-btn-bg:          var(--gray-200);
+  --action-btn-bg-hover:    var(--color-primary);
+  --action-btn-color:       var(--gray-600);
+  --action-btn-color-hover: white;
+
+  --clear-btn-bg-hover:     var(--color-danger);
+  --clear-btn-color-hover:  white;
+
+  --reset-btn-border-radius: 2px;
+  --reset-btn-bg:            var(--action-btn-bg);
+  --reset-btn-bg-hover:      var(--action-btn-bg-hover);
+  --reset-btn-color:         var(--action-btn-color);
+  --reset-btn-color-hover:   var(--action-btn-color-hover);
+  --reset-btn-transition:    all 0.12s;
+
+  --clear-btn-border-radius: 2px;
+  --clear-btn-bg:            var(--action-btn-bg);
+  --clear-btn-color:         var(--action-btn-color);
+  --clear-btn-transition:    all 0.12s;
+}
+
+:root,
+:host {
+  --size-scale: 1;
+  --size-base:  calc(1rem * var(--size-scale));                    /* 16px */
+  --size-xl:    round(calc(var(--size-l) * 1.125), 1px);           /* 23px */
+  --size-l:     round(calc(var(--size-m) * 1.125 * 1.125), 1px);   /* 20px */
+  --size-m:     var(--size-base);                                  /* 16px */
+  --size-s:     round(calc(var(--size-m) / 1.125), 1px);           /* 14px */
+  --size-xs:    round(calc(var(--size-s) / 1.125), 1px);           /* 12px */
+  --size-2xs:   round(calc(var(--size-xs) / 1.125), 1px);          /* 11px */
+  --size-3xs:   round(calc(var(--size-2xs) / 1.125), 1px);         /* 10px */
+}
+
+/* Layout tokens — defined on :root so all light DOM elements can use them */
+:root,
+:host {
+  --container-max-width: 1280px;
+  --container-padding-x: 1.5rem;
+}
+
+.theme-dark,
+:root[theme="dark"],
+:host([theme="dark"]),
+:host-context([theme="dark"]) {
+  color-scheme: dark;
+
+  /* Hover / active — slightly gentler on dark backgrounds */
+  --color-mix-hover:  black 8%;
+  --color-mix-active: black 16%;
+
+  /* Gray UI aliases — darker palette steps for elements on dark background */
+  --color-gray-dark:     var(--gray-800);
+  --color-gray:          var(--gray-700);
+  --color-gray-light:    var(--gray-600);
+  --color-gray-lighter:  var(--gray-500);
+  --color-gray-lightest: var(--gray-400);
+
+  /* Secondary — deeper base on dark background */
+  --color-secondary:      var(--slate-700);
+  --color-secondary-text: var(--slate-300);
+
+  /* Text */
+  --color-text-main:       white;
+  --color-text-muted:      var(--gray-200);
+  --color-text-disabled:   var(--gray-500);
+  --color-text-link:       var(--blue-300);
+  --color-text-link-hover: var(--blue-200);
+
+  /* Surfaces */
+  --surface-sunken:  var(--gray-900);
+  --surface-base:    color-mix(in srgb, var(--gray) 27%, black);
+  --surface-raised:  color-mix(in srgb, var(--gray) 34%, black);
+  --surface-overlay: color-mix(in srgb, var(--gray) 38%, black);
+  --color-overlay:   rgba(0, 0, 0, 0.6);
+
+  /* Borders */
+  --border-subtle:   rgba(255, 255, 255, 0.08);
+  --border-default:  rgba(255, 255, 255, 0.12);
+  --border-hover:    rgba(255, 255, 255, 0.20);
+  --border-focus:    var(--color-primary);
+  --border-disabled: rgba(255, 255, 255, 0.06);
+
+  /* Focus ring */
+  --focus-ring:    rgb(from var(--blue) r g b / 0.25);
+  --focus-ring-sm: rgb(from var(--blue) r g b / 0.10);
+
+  /* Subtle intent tokens — dark context (more alpha, lighter text-emphasis) */
+  --color-primary-bg-subtle:       rgb(from var(--blue) r g b / 0.10);
+  --color-primary-border-subtle:   rgb(from var(--blue) r g b / 0.30);
+  --color-primary-text-emphasis:   var(--blue-300);
+
+  --color-success-bg-subtle:       rgb(from var(--green) r g b / 0.10);
+  --color-success-border-subtle:   rgb(from var(--green) r g b / 0.30);
+  --color-success-text-emphasis:   var(--green-300);
+
+  --color-danger-bg-subtle:        rgb(from var(--red) r g b / 0.10);
+  --color-danger-border-subtle:    rgb(from var(--red) r g b / 0.30);
+  --color-danger-text-emphasis:    var(--red-300);
+
+  --color-warning-bg-subtle:       rgb(from var(--yellow) r g b / 0.10);
+  --color-warning-border-subtle:   rgb(from var(--yellow) r g b / 0.30);
+  --color-warning-text-emphasis:   var(--yellow-300);
+
+  --color-info-bg-subtle:          rgb(from var(--cyan) r g b / 0.10);
+  --color-info-border-subtle:      rgb(from var(--cyan) r g b / 0.30);
+  --color-info-text-emphasis:      var(--cyan-300);
+
+  --color-secondary-bg-subtle:     rgb(from var(--slate) r g b / 0.10);
+  --color-secondary-border-subtle: rgb(from var(--slate) r g b / 0.30);
+  --color-secondary-text-emphasis: var(--slate-300);
+
+  --color-light-bg-subtle:         rgb(from var(--light) r g b / 0.20);
+  --color-light-border-subtle:     rgb(from var(--light) r g b / 0.25);
+
+  --color-dark-bg-subtle:          rgb(from var(--dark) r g b / 0.30);
+  --color-dark-border-subtle:      rgb(from var(--dark) r g b / 0.50);
+
+  /* Component tokens — dark overrides */
+  --action-btn-bg:          var(--color-gray);
+  --action-btn-bg-hover:    color-mix(in srgb, var(--blue) 25%, var(--gray-800));
+  --action-btn-color:       var(--gray-400);
+  --action-btn-color-hover: var(--cyan-300);
+  --clear-btn-bg-hover:     color-mix(in srgb, var(--red) 25%, var(--gray-800));
+  --clear-btn-color-hover:  var(--red-300);
+}

package/src/switch/index.ts

@@ -0,0 +1,2 @@
+export { default, default as Switch } from './switch';
+export type { SwitchProps } from './switch';

package/src/switch/switch.ts

@@ -0,0 +1,88 @@
+import AeicoField from '../aeico-field';
+import type { InferProps, Props } from 'aeico';
+import { html } from 'aeico';
+import styleVariables from '../styles/variables.css?inline';
+import sizeCSS from '../styles/size.css?inline';
+import colorCSS from '../styles/color.css?inline';
+import styles from '../styles/components/switch.css?inline';
+
+class Switch extends AeicoField {
+  protected fieldElement: HTMLInputElement | null = null;
+
+  static tagName = 'switch';
+
+  static props: Props = {
+    checked: { type: Boolean },
+    defaultChecked: { type: Boolean },
+  };
+
+  declare checked?: boolean;
+  declare defaultChecked?: boolean;
+
+  protected static styles = [styleVariables, sizeCSS, colorCSS, styles];
+
+  protected getValue(): boolean {
+    return this.fieldElement?.checked ?? false;
+  }
+
+  protected writeValue(checked: boolean): void {
+    if (this.fieldElement) {
+      this.fieldElement.checked = Boolean(checked);
+    }
+  }
+
+  protected getEventPayload(checked: boolean, oldChecked: boolean, action: any) {
+    return { checked, oldChecked, action };
+  }
+
+  protected setValue(checked: boolean, options?: { silent?: boolean; action?: any }): void {
+    const oldChecked = this.getValue();
+    this.checked = checked;
+    this.writeValue(checked);
+    if (options?.silent === false) {
+      this.emit('change', {
+        detail: this.getEventPayload(checked, oldChecked, options.action || 'change'),
+      });
+    }
+  }
+
+  public reset(checked?: boolean, options?: { silent?: boolean }): void {
+    this.setValue(checked !== undefined ? checked : (this.defaultChecked ?? false), {
+      ...options,
+      action: 'reset',
+    });
+  }
+
+  public clear(options?: { silent?: boolean }): void {
+    this.setValue(false, { ...options, action: 'clear' });
+  }
+
+  render() {
+    return html(({ div, input, span }) => {
+      div({ className: 'switch-container' }, () => {
+        div({ className: 'switch-wrapper' }, () => {
+          this.fieldElement = input({
+            type: 'checkbox',
+            className: 'field-input',
+            checked: Boolean(this.checked),
+            disabled: Boolean(this.disabled),
+            '@change': this.boundOnChange,
+          });
+          span({ className: 'toggle-slider' });
+        });
+        this.renderActionButtons();
+      });
+    });
+  }
+}
+
+Switch.register();
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ae-switch': Switch;
+  }
+}
+
+export default Switch;
+export type SwitchProps = InferProps<typeof Switch>;

package/src/tabs/defines.ts

@@ -0,0 +1 @@
+export type TabActiveIndex = number;

package/src/tabs/index.ts

@@ -0,0 +1,3 @@
+export { default, default as Tabs } from './tabs';
+export { default as Tab } from './tab';
+export { default as TabPanel } from './tab-panel';

package/src/tabs/tab-panel.ts

@@ -0,0 +1,23 @@
+import tabPanelStyle from '../styles/components/tab-panel.css?inline';
+import AeicoComponent from '../aeico-component';
+import { html } from 'aeico';
+
+class TabPanel extends AeicoComponent {
+  protected static styles = [tabPanelStyle];
+
+  protected render() {
+    return html(({ slot }) => {
+      slot();
+    });
+  }
+}
+
+TabPanel.register();
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ae-tab-panel': TabPanel;
+  }
+}
+
+export default TabPanel;