aeico-components 0.1.1 → 0.1.3

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

@@ -1,110 +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);
-}
-
-
-
+: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

@@ -1,43 +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;
-}
+/* 
+   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

@@ -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(--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); }