aeico-components 0.1.6 → 0.1.8

package/src/styles/components/textarea.css

@@ -2,20 +2,11 @@
   display: block;
   flex: 1;
   min-width: 0;
-  font-size: var(--size-base);
+  font-size: var(--ae-size-base);
 
   --textarea-font-size: 1em;
   --textarea-padding: 0.333em 0.583em;
   --textarea-border-width: 1px;
-  --textarea-border-radius: 2px;
-  --textarea-border-color: var(--border-subtle);
-  --textarea-border-color-hover: var(--border-default);
-  --textarea-border-color-focus: var(--border-focus);
-  --textarea-bg: var(--surface-base);
-  --textarea-bg-hover: var(--surface-raised);
-  --textarea-bg-focus: var(--surface-raised);
-  --textarea-color: var(--color-text-muted);
-  --textarea-placeholder-color: var(--color-text-disabled);
   --textarea-transition: border-color 0.12s, background 0.12s;
 }
 
@@ -35,27 +26,27 @@ textarea {
   font-family: inherit;
   line-height: 1.5;
   padding: var(--textarea-padding);
-  border: var(--textarea-border-width) solid var(--textarea-border-color);
-  border-radius: var(--textarea-border-radius);
-  background: var(--textarea-bg);
-  color: var(--textarea-color);
+  border: var(--textarea-border-width) solid var(--ae-border-subtle);
+  border-radius: var(--ae-border-radius, var(--ae-radius-xs));
+  background: var(--ae-surface-base);
+  color: var(--ae-color-text-muted);
   transition: var(--textarea-transition);
   resize: vertical;
 }
 
 textarea::placeholder {
-  color: var(--textarea-placeholder-color);
+  color: var(--ae-color-text-disabled);
 }
 
 textarea:focus {
   outline: none;
-  border-color: var(--textarea-border-color-focus);
-  background: var(--textarea-bg-focus);
+  border-color: var(--ae-border-focus);
+  background: var(--ae-surface-raised);
 }
 
 textarea:hover:not(:focus) {
-  border-color: var(--textarea-border-color-hover);
-  background: var(--textarea-bg-hover);
+  border-color: var(--ae-border-default);
+  background: var(--ae-surface-raised);
 }
 
 textarea:disabled {
@@ -66,10 +57,10 @@ textarea:disabled {
 
 /* Error state */
 :host([error]) textarea {
-  border-color: var(--field-error-color, var(--red));
+  border-color: var(--field-error-color, var(--ae-red));
 }
 
 :host([error]) textarea:hover:not(:focus),
 :host([error]) textarea:focus {
-  border-color: var(--field-error-color, var(--red));
+  border-color: var(--field-error-color, var(--ae-red));
 }

package/src/styles/components/tooltip.css

@@ -4,19 +4,18 @@
   vertical-align: middle;
 
   --ae-tooltip-z-index: 1000;
-  --ae-tooltip-bg: var(--dark, #343a40);
+  --ae-tooltip-bg: var(--ae-dark, #343a40);
   --ae-tooltip-color: #fff;
   --ae-tooltip-padding: 0.3125rem 0.625rem;
   --ae-tooltip-font-size: 0.8125rem;
-  --ae-tooltip-border-radius: 4px;
   --ae-tooltip-arrow-size: 5px;
   --ae-tooltip-gap: 6px;
   --ae-tooltip-max-width: 20rem;
 }
 
 :host-context([theme="dark"]) {
-  --ae-tooltip-bg: var(--light, #f8f9fa);
-  --ae-tooltip-color: var(--dark, #343a40);
+  --ae-tooltip-bg: var(--ae-light, #f8f9fa);
+  --ae-tooltip-color: var(--ae-dark, #343a40);
 }
 
 .tooltip-panel {
@@ -28,7 +27,7 @@
   padding: var(--ae-tooltip-padding);
   font-size: var(--ae-tooltip-font-size);
   font-family: inherit;
-  border-radius: var(--ae-tooltip-border-radius);
+  border-radius: var(--ae-border-radius, var(--ae-radius-sm));
   line-height: 1.4;
   white-space: nowrap;
   max-width: var(--ae-tooltip-max-width);

package/src/styles/components/tree-item.css

@@ -3,12 +3,12 @@
   --ae-tree-indent: 1.25rem;
   --tree-item-height: 2rem;
   --tree-item-font-size: 0.9375rem;
-  --tree-item-color: var(--color-text-main, #343a40);
-  --tree-item-color-disabled: var(--color-text-disabled, #bbb);
-  --tree-item-bg-hover: var(--surface-raised, rgba(0, 0, 0, 0.04));
-  --tree-item-bg-selected: var(--color-primary-bg-subtle, rgba(14, 99, 156, 0.08));
-  --tree-item-color-selected: var(--color-primary, #0e639c);
-  --tree-item-line-color: var(--border-default, rgba(0, 0, 0, 0.15));
+  --tree-item-color: var(--ae-color-text-main, #343a40);
+  --tree-item-color-disabled: var(--ae-color-text-disabled, #bbb);
+  --tree-item-bg-hover: var(--ae-surface-raised, rgba(0, 0, 0, 0.04));
+  --tree-item-bg-selected: var(--ae-color-primary-bg-subtle, rgba(14, 99, 156, 0.08));
+  --tree-item-color-selected: var(--ae-color-primary, #0e639c);
+  --tree-item-line-color: var(--ae-border-default, rgba(0, 0, 0, 0.15));
   --tree-item-expand-size: 1rem;
 }
 
@@ -23,7 +23,7 @@
   color: var(--tree-item-color);
   cursor: pointer;
   user-select: none;
-  border-radius: var(--ae-radius-sm, 4px);
+  border-radius: var(--ae-border-radius, var(--ae-radius-sm));
   transition: background 0.1s, color 0.1s;
   box-sizing: border-box;
 }
@@ -44,7 +44,7 @@
   background: transparent;
   color: inherit;
   cursor: pointer;
-  border-radius: var(--ae-radius-sm, 4px);
+  border-radius: var(--ae-border-radius, var(--ae-radius-sm));
   transition: transform 0.18s;
   outline: none;
   -webkit-appearance: none;
@@ -52,7 +52,7 @@
 }
 
 .expand-btn:focus-visible {
-  outline: 2px solid var(--color-primary, #0e639c);
+  outline: 2px solid var(--ae-color-primary, #0e639c);
   outline-offset: 1px;
 }
 
@@ -92,7 +92,7 @@
   height: 0.875rem;
   margin: 0;
   cursor: pointer;
-  accent-color: var(--color-primary, #0e639c);
+  accent-color: var(--ae-color-primary, #0e639c);
 }
 
 .tree-item-label {
@@ -118,9 +118,9 @@
 }
 
 .tree-item-label:focus-visible {
-  outline: 2px solid var(--color-primary, #0e639c);
+  outline: 2px solid var(--ae-color-primary, #0e639c);
   outline-offset: -2px;
-  border-radius: var(--ae-radius-sm, 4px);
+  border-radius: var(--ae-border-radius, var(--ae-radius-sm));
 }
 
 :host([selected]) .tree-item-content {

package/src/styles/layout.css

@@ -4,9 +4,12 @@
    NOT imported by any Web Component internally.
 
    Import it once in your page:
-     import 'aeico/styles/layout.css'
+     import 'aeico-components/styles/layout.css'
    or:
-     <link rel="stylesheet" href="path/to/layout.css">
+     <link rel="stylesheet" href="node_modules/aeico-components/src/styles/layout.css">
+
+   Requires variables.css for the --space-* and --container-* tokens:
+     import 'aeico-components/styles/variables.css'
 
    All utility rules live inside @layer aeico-layout so that your own
    un-layered (or later-layered) styles always override them without !important.

package/src/styles/radius.css

@@ -0,0 +1,25 @@
+/*
+   radius.css — Light DOM border-radius 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-components/styles/radius.css'
+
+   Requires variables.css for the --ae-radius-* tokens:
+     import 'aeico-components/styles/variables.css'
+
+   All utility rules live inside @layer aeico-radius so that your own
+   un-layered (or later-layered) styles always override them without !important.
+*/
+
+@layer aeico-radius {
+  .ae-radius-square  { border-radius: var(--ae-radius-square);  }
+  .ae-radius-xs      { border-radius: var(--ae-radius-xs);      }
+  .ae-radius-sm      { border-radius: var(--ae-radius-sm);      }
+  .ae-radius-md      { border-radius: var(--ae-radius-md);      }
+  .ae-radius-lg      { border-radius: var(--ae-radius-lg);      }
+  .ae-radius-xl      { border-radius: var(--ae-radius-xl);      }
+  .ae-radius-pill    { border-radius: var(--ae-radius-pill);    }
+  .ae-radius-circle  { border-radius: var(--ae-radius-circle);  }
+}

package/src/styles/size.css

@@ -1,7 +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); }
+:host([size="xs"]) { font-size: var(--ae-size-xs); }
+:host([size="sm"]) { font-size: var(--ae-size-s); }
+:host([size="md"]) { font-size: var(--ae-size-m); }
+:host([size="lg"]) { font-size: var(--ae-size-l); }
+:host([size="xl"]) { font-size: var(--ae-size-xl); }
+:host([size="3xs"]) { font-size: var(--ae-size-3xs); }
+:host([size="2xs"]) { font-size: var(--ae-size-2xs); }