@eagami/ui 5.0.1 → 5.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eagami/ui",
-  "version": "5.0.1",
+  "version": "5.2.0",
   "description": "Lightweight, accessible, themeable Angular UI component library and icon set built on CSS custom properties",
   "author": "Michal Wiraszka <michal@eagami.com>",
   "license": "MIT",

package/src/styles/_form-field.scss

@@ -0,0 +1,55 @@
+@use 'mixins' as ea;
+
+// Native controls projected into <ea-form-field> get the same visual treatment
+// as the library's own fields. Global because projected content sits outside
+// the component's style encapsulation. Descendant (not direct-child) so a
+// control wrapped for layout is styled like the aria wiring that already finds
+// it at any depth; the field's own label and messages hold no form controls.
+.ea-form-field input,
+.ea-form-field select,
+.ea-form-field textarea {
+  width: 100%;
+  min-height: 2.5em;
+  padding: 0 0.75em;
+  font-size: var(--font-size-md);
+  line-height: var(--line-height-normal);
+  font-family: var(--font-family-sans);
+  border: var(--border-width-thin) solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  outline: none;
+  background-color: var(--color-bg-base);
+  color: var(--color-text-primary);
+  transition: var(--transition-colors), var(--transition-shadow);
+
+  // `opacity: 1` overrides the Firefox/WebKit default of ~0.54 on placeholders,
+  // which would wash out the tertiary token and collapse contrast in dark mode
+  &::placeholder {
+    color: var(--color-text-tertiary);
+    opacity: 1;
+  }
+
+  &:focus {
+    border-color: var(--color-border-focus);
+    @include ea.focus-ring;
+  }
+
+  &[aria-invalid='true'] {
+    border-color: var(--color-error-default);
+
+    &:focus {
+      @include ea.focus-ring(var(--shadow-focus-ring-error));
+    }
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    background-color: var(--color-bg-muted);
+    cursor: not-allowed;
+  }
+}
+
+.ea-form-field textarea {
+  min-height: 5em;
+  padding: 0.5em 0.75em;
+  resize: vertical;
+}

package/src/styles/_mixins.scss

@@ -25,6 +25,22 @@
   }
 }
 
+// Hides an element visually while keeping it in the accessibility tree, so
+// screen readers still announce it. The clip pattern is used instead of
+// `display: none` or `visibility: hidden`, which would remove it entirely.
+@mixin visually-hidden {
+  position: absolute;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  white-space: nowrap;
+  border: 0;
+}
+
 // Standard icon button: clear, close/dismiss, password-toggle, nav, etc. The box
 // is `--ea-icon-button-size` (em) so it scales with the host component's size and
 // is consistent across components at a given size tier. The glyph is enlarged so

package/src/styles/eagami-ui.scss

@@ -4,4 +4,5 @@
 @use 'tokens/index';
 @use 'reset';
 @use 'tooltip';
+@use 'form-field';
 @use 'rtl';