@lion-npm/ui 0.0.0-stage → 1.0.1

package/src/assets/css/buttons/buttons-ios.css

@@ -0,0 +1,213 @@
+/* ==========================================================================
+   iOS Human Interface Guidelines (HIG) - Base Configuration
+   ========================================================================== */
+
+.ios-btn {
+    /* Default CSS Variables for Color Inheritance */
+    --btn-color: #007aff; /* Apple standard system blue */
+    --btn-bg: var(--btn-color);
+    --btn-text: #ffffff;
+
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    outline: none;
+    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", sans-serif;
+    font-weight: 600;
+    letter-spacing: -0.24px;
+    cursor: pointer;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+
+    /* Native iOS Spring Transition Mechanics */
+    transition: opacity 0.1s ease-out, transform 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1), background-color 0.15s ease-in-out;
+    will-change: transform, opacity;
+}
+
+/* Native iOS Hover State (Desktop Web Match) */
+@media (hover: hover) {
+    .ios-btn-filled:hover:not(:disabled) {
+        filter: brightness(0.96);
+    }
+    .ios-btn-tinted:hover:not(:disabled) {
+        background-color: color-mix(in srgb, var(--btn-color) 22%, transparent);
+    }
+    .ios-btn-gray:hover:not(:disabled) {
+        background-color: rgba(120, 120, 128, 0.24);
+    }
+    .ios-btn-plain:hover:not(:disabled) {
+        opacity: 0.8;
+    }
+}
+
+/* Native iOS Active Press Behavior */
+.ios-btn:active:not(:disabled) {
+    opacity: 0.55;
+    transform: scale(0.96);
+    transition-duration: 0.05s;
+}
+
+/* Shapes: HIG Continuous Curved Corners (Squircle simulation via percentage-based radii) */
+.ios-btn-rounded.ios-btn-sm { border-radius: 9px; }
+.ios-btn-rounded.ios-btn-md { border-radius: 12px; }
+.ios-btn-rounded.ios-btn-lg { border-radius: 16px; }
+
+.ios-btn-capsule { border-radius: 9999px; }
+
+/* Disabled State */
+.ios-btn.disabled,
+.ios-btn:disabled {
+    opacity: 0.35 !important;
+    cursor: not-allowed;
+    transform: none !important;
+    filter: none !important;
+}
+
+/* ==========================================================================
+   iOS Button Styles (Filled, Tinted, Gray, Plain)
+   ========================================================================== */
+
+/* 1. Filled Button (High Emphasis) */
+.ios-btn-filled {
+    background-color: var(--btn-bg);
+    color: var(--btn-text) !important;
+}
+
+/* 2. Tinted Button (Medium Emphasis) */
+.ios-btn-tinted {
+    background-color: color-mix(in srgb, var(--btn-color) 15%, transparent);
+    color: var(--btn-color) !important;
+}
+
+/* 3. Gray Button (Neutral Background) */
+.ios-btn-gray {
+    background-color: rgba(120, 120, 128, 0.16);
+    color: var(--btn-color) !important;
+}
+
+/* 4. Plain Button (Low Emphasis / Text Only) */
+.ios-btn-plain {
+    background-color: transparent;
+    color: var(--btn-color) !important;
+    padding-left: 4px !important;
+    padding-right: 4px !important;
+}
+
+/* ==========================================================================
+   Sizes
+   ========================================================================== */
+
+.ios-btn-sm {
+    height: 28px;
+    padding: 0 10px;
+    font-size: 0.8125rem;
+}
+
+.ios-btn-md {
+    height: 36px;
+    padding: 0 16px;
+    font-size: 0.9375rem;
+}
+
+.ios-btn-lg {
+    height: 50px;
+    padding: 0 22px;
+    font-size: 1.0625rem;
+}
+
+/* ==========================================================================
+   Color Mapping & Readability Fixes
+   ========================================================================== */
+
+.ios-btn.btn-primary {
+    --btn-color: var(--bs-primary, #007aff);
+    --btn-text: #ffffff;
+}
+
+.ios-btn.btn-secondary {
+    --btn-color: var(--bs-secondary, #6c757d);
+    --btn-text: #ffffff;
+}
+
+.ios-btn.btn-success {
+    --btn-color: var(--bs-success, #34c759);
+    --btn-text: #ffffff;
+}
+
+.ios-btn.btn-danger {
+    --btn-color: var(--bs-danger, #ff3b30);
+    --btn-text: #ffffff;
+}
+
+.ios-btn.btn-warning {
+    --btn-color: var(--bs-warning, #ff9500);
+    --btn-text: #000000; /* Dark text for filled style */
+}
+
+.ios-btn.btn-info {
+    --btn-color: var(--bs-info, #5ac8fa);
+    --btn-text: #000000; /* Dark text for filled style */
+}
+
+/* Fix for btn-light:
+   --btn-color uses System Gray (#8e8e93) to provide contrast in tinted, gray, and plain styles.
+   --btn-bg handles the light background for filled style. */
+.ios-btn.btn-light {
+    --btn-color: #8e8e93;
+    --btn-bg: var(--bs-light, #e5e5ea);
+    --btn-text: #000000;
+}
+
+.ios-btn.btn-dark {
+    --btn-color: var(--bs-dark, #1c1c1e);
+    --btn-text: #ffffff;
+}
+
+.ios-btn.btn-link {
+    --btn-color: var(--bs-link-hover-color, #007aff);
+    --btn-text: #007aff;
+    background-color: transparent !important;
+    text-decoration: underline;
+}
+
+/* Custom Lion Variants */
+.ios-btn.btn-lion-packages {
+    --btn-color: var(--lion-packages, #af52de);
+    --btn-text: #ffffff;
+}
+
+.ios-btn.btn-lion-parking {
+    --btn-color: var(--lion-parking, #ff9500);
+    --btn-text: #ffffff;
+}
+
+.ios-btn.btn-lion-tech {
+    --btn-color: var(--lion-tech, #30b0c7);
+    --btn-text: #ffffff;
+}
+
+.ios-btn.btn-lion-glam {
+    --btn-color: var(--lion-glam, #ff2d55);
+    --btn-text: #ffffff;
+}
+
+/* ==========================================================================
+   Contrast Specific Overrides for Light Variations
+   ========================================================================== */
+
+/* Ensures readable dark text for LIGHT variant in transparent/subtle styles */
+.ios-btn-tinted.btn-light {
+    background-color: rgba(120, 120, 128, 0.12);
+    color: #1c1c1e !important;
+}
+
+.ios-btn-gray.btn-light {
+    background-color: rgba(120, 120, 128, 0.18);
+    color: #1c1c1e !important;
+}
+
+.ios-btn-plain.btn-light {
+    color: #1c1c1e !important;
+}

package/src/assets/css/buttons/buttons-web.css

@@ -0,0 +1,138 @@
+/* ==========================================================================
+   Bootstrap 5 Extended - Custom Lion Variants & Overrides
+   ========================================================================== */
+
+/* Fix for Native Bootstrap Outlined Light Button Contrast on Light Backgrounds */
+.btn-outline-light {
+    --bs-btn-color: #212529;
+    --bs-btn-border-color: #ced4da; /* Visible neutral border for light background */
+    --bs-btn-hover-color: #000000;
+    --bs-btn-hover-bg: #f8f9fa;
+    --bs-btn-hover-border-color: #ced4da;
+    --bs-btn-active-color: #000000;
+    --bs-btn-active-bg: #e9ecef;
+    --bs-btn-active-border-color: #ced4da;
+    --bs-btn-disabled-color: #6c757d;
+    --bs-btn-disabled-bg: transparent;
+    --bs-btn-disabled-border-color: #ced4da;
+}
+
+/* 1. Lion Packages Variant */
+.btn-lion-packages {
+    --bs-btn-color: var(--lion-white);
+    --bs-btn-bg: var(--lion-packages, #6f42c1);
+    --bs-btn-border-color: var(--lion-packages, #6f42c1);
+    --bs-btn-hover-color: var(--lion-white);
+    --bs-btn-hover-bg: color-mix(in srgb, var(--lion-packages, #6f42c1) 85%, #000000);
+    --bs-btn-hover-border-color: color-mix(in srgb, var(--lion-packages, #6f42c1) 85%, #000000);
+    --bs-btn-active-color: var(--lion-white);
+    --bs-btn-active-bg: color-mix(in srgb, var(--lion-packages, #6f42c1) 75%, #000000);
+    --bs-btn-active-border-color: color-mix(in srgb, var(--lion-packages, #6f42c1) 75%, #000000);
+    --bs-btn-disabled-color: var(--lion-white);
+    --bs-btn-disabled-bg: var(--lion-packages, #6f42c1);
+    --bs-btn-disabled-border-color: var(--lion-packages, #6f42c1);
+}
+
+.btn-outline-lion-packages {
+    --bs-btn-color: var(--lion-packages, #6f42c1);
+    --bs-btn-border-color: var(--lion-packages, #6f42c1);
+    --bs-btn-hover-color: var(--lion-white);
+    --bs-btn-hover-bg: var(--lion-packages, #6f42c1);
+    --bs-btn-hover-border-color: var(--lion-packages, #6f42c1);
+    --bs-btn-active-color: var(--lion-white);
+    --bs-btn-active-bg: var(--lion-packages, #6f42c1);
+    --bs-btn-active-border-color: var(--lion-packages, #6f42c1);
+    --bs-btn-disabled-color: var(--lion-packages, #6f42c1);
+    --bs-btn-disabled-bg: transparent;
+    --bs-btn-disabled-border-color: var(--lion-packages, #6f42c1);
+}
+
+/* 2. Lion Parking Variant */
+.btn-lion-parking {
+    --bs-btn-color: var(--lion-white);
+    --bs-btn-bg: var(--lion-parking, #fd7e14);
+    --bs-btn-border-color: var(--lion-parking, #fd7e14);
+    --bs-btn-hover-color: var(--lion-white);
+    --bs-btn-hover-bg: color-mix(in srgb, var(--lion-parking, #fd7e14) 85%, #000000);
+    --bs-btn-hover-border-color: color-mix(in srgb, var(--lion-parking, #fd7e14) 85%, #000000);
+    --bs-btn-active-color: var(--lion-white);
+    --bs-btn-active-bg: color-mix(in srgb, var(--lion-parking, #fd7e14) 75%, #000000);
+    --bs-btn-active-border-color: color-mix(in srgb, var(--lion-parking, #fd7e14) 75%, #000000);
+    --bs-btn-disabled-color: var(--lion-white);
+    --bs-btn-disabled-bg: var(--lion-parking, #fd7e14);
+    --bs-btn-disabled-border-color: var(--lion-parking, #fd7e14);
+}
+
+.btn-outline-lion-parking {
+    --bs-btn-color: var(--lion-parking, #fd7e14);
+    --bs-btn-border-color: var(--lion-parking, #fd7e14);
+    --bs-btn-hover-color: var(--lion-white);
+    --bs-btn-hover-bg: var(--lion-parking, #fd7e14);
+    --bs-btn-hover-border-color: var(--lion-parking, #fd7e14);
+    --bs-btn-active-color: var(--lion-white);
+    --bs-btn-active-bg: var(--lion-parking, #fd7e14);
+    --bs-btn-active-border-color: var(--lion-parking, #fd7e14);
+    --bs-btn-disabled-color: var(--lion-parking, #fd7e14);
+    --bs-btn-disabled-bg: transparent;
+    --bs-btn-disabled-border-color: var(--lion-parking, #fd7e14);
+}
+
+/* 3. Lion Tech Variant */
+.btn-lion-tech {
+    --bs-btn-color: var(--lion-white);
+    --bs-btn-bg: var(--lion-tech, #20c997);
+    --bs-btn-border-color: var(--lion-tech, #20c997);
+    --bs-btn-hover-color: var(--lion-white);
+    --bs-btn-hover-bg: color-mix(in srgb, var(--lion-tech, #20c997) 85%, #000000);
+    --bs-btn-hover-border-color: color-mix(in srgb, var(--lion-tech, #20c997) 85%, #000000);
+    --bs-btn-active-color: var(--lion-white);
+    --bs-btn-active-bg: color-mix(in srgb, var(--lion-tech, #20c997) 75%, #000000);
+    --bs-btn-active-border-color: color-mix(in srgb, var(--lion-tech, #20c997) 75%, #000000);
+    --bs-btn-disabled-color: var(--lion-white);
+    --bs-btn-disabled-bg: var(--lion-tech, #20c997);
+    --bs-btn-disabled-border-color: var(--lion-tech, #20c997);
+}
+
+.btn-outline-lion-tech {
+    --bs-btn-color: var(--lion-tech, #20c997);
+    --bs-btn-border-color: var(--lion-tech, #20c997);
+    --bs-btn-hover-color: var(--lion-white);
+    --bs-btn-hover-bg: var(--lion-tech, #20c997);
+    --bs-btn-hover-border-color: var(--lion-tech, #20c997);
+    --bs-btn-active-color: var(--lion-white);
+    --bs-btn-active-bg: var(--lion-tech, #20c997);
+    --bs-btn-active-border-color: var(--lion-tech, #20c997);
+    --bs-btn-disabled-color: var(--lion-tech, #20c997);
+    --bs-btn-disabled-bg: transparent;
+    --bs-btn-disabled-border-color: var(--lion-tech, #20c997);
+}
+
+/* 4. Lion Glam Variant */
+.btn-lion-glam {
+    --bs-btn-color: var(--lion-white);
+    --bs-btn-bg: var(--lion-glam, #e83e8c);
+    --bs-btn-border-color: var(--lion-glam, #e83e8c);
+    --bs-btn-hover-color: var(--lion-white);
+    --bs-btn-hover-bg: color-mix(in srgb, var(--lion-glam, #e83e8c) 85%, #000000);
+    --bs-btn-hover-border-color: color-mix(in srgb, var(--lion-glam, #e83e8c) 85%, #000000);
+    --bs-btn-active-color: var(--lion-white);
+    --bs-btn-active-bg: color-mix(in srgb, var(--lion-glam, #e83e8c) 75%, #000000);
+    --bs-btn-active-border-color: color-mix(in srgb, var(--lion-glam, #e83e8c) 75%, #000000);
+    --bs-btn-disabled-color: var(--lion-white);
+    --bs-btn-disabled-bg: var(--lion-glam, #e83e8c);
+    --bs-btn-disabled-border-color: var(--lion-glam, #e83e8c);
+}
+
+.btn-outline-lion-glam {
+    --bs-btn-color: var(--lion-glam, #e83e8c);
+    --bs-btn-border-color: var(--lion-glam, #e83e8c);
+    --bs-btn-hover-color: var(--lion-white);
+    --bs-btn-hover-bg: var(--lion-glam, #e83e8c);
+    --bs-btn-hover-border-color: var(--lion-glam, #e83e8c);
+    --bs-btn-active-color: var(--lion-white);
+    --bs-btn-active-bg: var(--lion-glam, #e83e8c);
+    --bs-btn-active-border-color: var(--lion-glam, #e83e8c);
+    --bs-btn-disabled-color: var(--lion-glam, #e83e8c);
+    --bs-btn-disabled-bg: transparent;
+    --bs-btn-disabled-border-color: var(--lion-glam, #e83e8c);
+}

package/src/assets/css/custom.css

@@ -0,0 +1,8 @@
+:root {
+    --default-color: var(--lion-packages);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+}

package/src/assets/css/index.css

@@ -0,0 +1,60 @@
+:root {
+    --lion-packages: #ff8731;
+    --lion-parking: #ff8731;
+    --lion-tech: #B11226;
+    --lion-glam: #FF69b4;
+    --lion-black: #111111;
+    --lion-white: #FFFFFF;
+}
+
+/** Background Colors */
+
+.bg-lion-black {
+    background-color: var(--lion-black);
+}
+
+.bg-lion-white {
+    background-color: var(--lion-white);
+}
+
+.bg-lion-packages {
+    background-color: var(--lion-packages);
+}
+
+.bg-lion-parking {
+    background-color: var(--lion-parking);
+}
+
+.bg-lion-tech {
+    background-color: var(--lion-tech);
+}
+
+.bg-lion-glam {
+    background-color: var(--lion-glam);
+}
+
+/** Text Colors */
+
+.text-lion-black {
+    color: var(--lion-black);
+}
+
+.text-lion-white {
+    color: var(--lion-white);
+}
+
+.text-lion-packages {
+    color: var(--lion-packages);
+}
+
+.text-lion-parking {
+    color: var(--lion-parking);
+}
+
+.text-lion-glam {
+    color: var(--lion-glam);
+}
+
+.text-lion-tech {
+    color: var(--lion-tech);
+}

package/src/assets/css/inputs/inputs-android.css

@@ -0,0 +1,259 @@
+/* ==========================================================================
+   Android Material Design 3 - Isolated Input Configuration
+   ========================================================================== */
+
+.android-input-container {
+    --android-input-color: var(--bs-primary, #0d6efd);
+    --android-input-label-bg: var(--bs-body-bg, #ffffff);
+    --android-input-border-color: var(--bs-border-color, #ccc);
+    --android-input-error-color: var(--bs-danger, #dc3545);
+
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: 100%;
+    font-family: var(--bs-body-font-family, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
+    box-sizing: border-box;
+}
+
+.android-input-field-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
+    transition: all 0.4s ease-in-out;
+}
+
+/* --- Real Input Element --- */
+.android-input-element {
+    width: 100%;
+    max-width: 100%;
+    border: 1px solid var(--android-input-border-color);
+    border-radius: var(--bs-border-radius-sm, 4px);
+    background-color: transparent;
+    color: var(--bs-body-color, #212529);
+    font: inherit;
+    font-size: 1rem;
+    outline: none;
+    box-sizing: border-box;
+    transition: border-color 0.4s, box-shadow 0.4s, background-color 0.4s;
+}
+
+/* Android Sizes */
+.android-input-field-wrapper.android-size-normal .android-input-element {
+    padding: 14.5px 14px;
+}
+
+.android-input-field-wrapper.android-size-small .android-input-element {
+    padding: 10px 12px;
+    font-size: 0.875rem;
+}
+
+/* --- Outlined Style (Default) --- */
+.android-input-field-wrapper.android-style-outlined {
+    background-color: transparent;
+}
+
+.android-input-field-wrapper.android-style-outlined .android-input-element:focus,
+.android-input-field-wrapper.android-style-outlined .android-input-element:not(:placeholder-shown) {
+    border-color: var(--android-active-color, var(--android-input-color));
+}
+
+.android-input-field-wrapper.android-style-outlined .android-input-element:focus {
+    box-shadow: 0 0 0 1px var(--android-active-color, var(--android-input-color));
+}
+
+/* --- Filled Style --- */
+.android-input-field-wrapper.android-style-filled {
+    background-color: color-mix(in srgb, var(--android-active-color, var(--android-input-color)) 8%, var(--bs-body-bg, #ffffff));
+    border-radius: 4px 4px 0 0;
+    border-bottom: 1px solid var(--android-input-border-color);
+}
+
+.android-input-field-wrapper.android-style-filled .android-input-element {
+    border: none;
+    background: transparent;
+}
+
+/* Specific top padding for Filled based on size */
+.android-input-field-wrapper.android-style-filled.android-size-normal .android-input-element {
+    padding: 22px 14px 6px 14px;
+}
+
+.android-input-field-wrapper.android-style-filled.android-size-small .android-input-element {
+    padding: 18px 12px 4px 12px;
+}
+
+/* Active bottom border and background for Filled with focus or value */
+.android-input-field-wrapper.android-style-filled.is-focused,
+.android-input-field-wrapper.android-style-filled:has(.android-input-element:not(:placeholder-shown)) {
+    border-bottom: 2px solid var(--android-active-color, var(--android-input-color));
+    background-color: color-mix(in srgb, var(--android-active-color, var(--android-input-color)) 14%, var(--bs-body-bg, #ffffff));
+}
+
+/* ==========================================================================
+   Android Floating Label Logic (Proportional to Normal and Small sizes)
+   ========================================================================== */
+
+.android-input-label {
+    position: absolute;
+    left: 14px;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+    color: var(--bs-secondary-color, #777);
+    font-size: 1rem;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    background-color: transparent;
+    padding: 0 4px;
+    z-index: 2;
+    margin: 0;
+    white-space: nowrap;
+    max-width: calc(100% - 28px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.android-input-field-wrapper.android-size-small .android-input-label {
+    left: 12px;
+    font-size: 0.875rem;
+    max-width: calc(100% - 24px);
+}
+
+/* --- Outlined Floating States --- */
+.android-input-field-wrapper.android-style-outlined.android-size-normal .android-input-element:focus ~ .android-input-label,
+.android-input-field-wrapper.android-style-outlined.android-size-normal .android-input-element:not(:placeholder-shown) ~ .android-input-label {
+    top: 0;
+    transform: translateY(-50%);
+    font-size: 0.75rem;
+    color: var(--android-active-color, var(--android-input-color));
+    background-color: var(--android-input-label-bg);
+}
+
+.android-input-field-wrapper.android-style-outlined.android-size-small .android-input-element:focus ~ .android-input-label,
+.android-input-field-wrapper.android-style-outlined.android-size-small .android-input-element:not(:placeholder-shown) ~ .android-input-label {
+    top: 0;
+    transform: translateY(-50%);
+    font-size: 0.68rem;
+    color: var(--android-active-color, var(--android-input-color));
+    background-color: var(--android-input-label-bg);
+}
+
+/* --- Filled Floating States (Proportionally adjusted for Normal and Small) --- */
+.android-input-field-wrapper.android-style-filled.android-size-normal .android-input-element:focus ~ .android-input-label,
+.android-input-field-wrapper.android-style-filled.android-size-normal .android-input-element:not(:placeholder-shown) ~ .android-input-label {
+    top: 8px;
+    transform: translateY(0);
+    font-size: 0.75rem;
+    color: var(--android-active-color, var(--android-input-color));
+    background-color: transparent;
+}
+
+.android-input-field-wrapper.android-style-filled.android-size-small .android-input-element:focus ~ .android-input-label,
+.android-input-field-wrapper.android-style-filled.android-size-small .android-input-element:not(:placeholder-shown) ~ .android-input-label {
+    top: 5px;
+    transform: translateY(0);
+    font-size: 0.68rem;
+    color: var(--android-active-color, var(--android-input-color));
+    background-color: transparent;
+}
+
+/* Hide placeholder at rest */
+.android-input-element:not(:focus)::placeholder {
+    color: transparent !important;
+}
+
+.android-input-element:focus::placeholder {
+    color: var(--bs-secondary-color, #aaa);
+    opacity: 0.7;
+}
+
+/* ==========================================================================
+   Android Color Variants Mapping
+   ========================================================================== */
+.android-input-container.android-variant-primary {
+    --android-active-color: var(--bs-primary, #0d6efd);
+}
+
+.android-input-container.android-variant-secondary {
+    --android-active-color: var(--bs-secondary, #6c757d);
+}
+
+.android-input-container.android-variant-success {
+    --android-active-color: var(--bs-success, #198754);
+}
+
+.android-input-container.android-variant-danger {
+    --android-active-color: var(--bs-danger, #dc3545);
+}
+
+.android-input-container.android-variant-warning {
+    --android-active-color: var(--bs-warning, #ffc107);
+}
+
+.android-input-container.android-variant-info {
+    --android-active-color: var(--bs-info, #0dcaf0);
+}
+
+.android-input-container.android-variant-dark {
+    --android-active-color: var(--bs-dark, #212529);
+}
+
+/* Custom Lion Variants */
+.android-input-container.android-variant-lion-packages {
+    --android-active-color: var(--lion-packages, #6f42c1);
+}
+
+.android-input-container.android-variant-lion-parking {
+    --android-active-color: var(--lion-parking, #20c997);
+}
+
+.android-input-container.android-variant-lion-tech {
+    --android-active-color: var(--lion-tech, #fd7e14);
+}
+
+.android-input-container.android-variant-lion-glam {
+    --android-active-color: var(--lion-glam, #e83e8c);
+}
+
+/* --- Error States & Subtext --- */
+.android-input-field-wrapper.has-error {
+    border-color: var(--android-input-error-color) !important;
+}
+
+.android-input-field-wrapper.has-error .android-input-element {
+    border-color: var(--android-input-error-color) !important;
+}
+
+.android-input-field-wrapper.has-error .android-input-label {
+    color: var(--android-input-error-color) !important;
+}
+
+.android-input-subtext-container {
+    display: flex;
+    justify-content: space-between;
+    padding: 0.25rem 0.25rem 0 0.25rem;
+}
+
+.android-input-error-text {
+    font-size: 0.78rem;
+    color: var(--android-input-error-color);
+    margin-top: 0.25rem;
+    font-weight: 500;
+}
+
+.android-input-helper-text {
+    font-size: 0.78rem;
+    color: var(--bs-secondary-color, #777);
+    margin-top: 0.25rem;
+}
+
+.android-input-counter {
+    margin-left: auto;
+    margin-top: 0.25rem;
+    color: var(--bs-secondary-color, #777);
+    font-size: 0.78rem;
+}