@affinda/wc 0.0.14 → 0.0.16

package/dist/collection/components/af-input/af-input.css

@@ -0,0 +1,246 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+/* Wrapper */
+.input-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sds-size-space-200, 8px);
+  width: 100%;
+}
+
+/* Label row */
+.label-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.label {
+  flex: 1;
+  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
+  font-weight: var(--font-weight-book, 500);
+  font-size: 16px;
+  line-height: 24px;
+  color: var(--forms-fields-label, var(--colour-brand-inkwell, #14343b));
+  cursor: default;
+}
+
+.required {
+  color: var(--forms-fields-error, #be292a);
+  margin-left: 2px;
+}
+
+/* Info icon button */
+.info-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--forms-fields-label, var(--colour-brand-inkwell, #14343b));
+  flex-shrink: 0;
+}
+
+.info-icon svg {
+  width: 20px;
+  height: 20px;
+}
+
+.info-icon:hover {
+  opacity: 0.7;
+}
+
+.info-icon:focus-visible {
+  outline: 2px solid var(--buttons-secondary-stroke, #14343b);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+/* Description */
+.description {
+  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
+  font-weight: var(--font-weight-regular, 400);
+  font-size: 16px;
+  line-height: 24px;
+  color: var(--forms-fields-description, var(--colour-inkwell-400, #2b484f));
+  margin: 0;
+}
+
+/* Input container */
+.input-container {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  background: var(--forms-fields-bg-default, #ffffff);
+  border: 1px solid var(--forms-fields-stroke-default, #d0d6d8);
+  border-radius: var(--radii-input, 8px);
+  transition: all 0.15s ease;
+  min-height: 48px;
+  box-sizing: border-box;
+}
+
+/* Hover state */
+.input-container.hovered {
+  background: var(--forms-fields-bg-hover, #f3f5f5);
+}
+
+/* Focus state */
+.input-container.focused {
+  background: var(--forms-fields-bg-default, #ffffff);
+  border-color: var(--forms-fields-stroke-active, var(--colour-brand-inkwell, #14343b));
+  box-shadow: 
+    0 0 0 4px var(--background-base, #ffffff), 
+    0 0 0 5px var(--buttons-secondary-stroke, #14343b);
+}
+
+/* Error state */
+.input-container.error {
+  border-color: var(--forms-fields-stroke-error, #be292a);
+}
+
+/* Disabled state */
+.input-container.disabled {
+  background: var(--forms-fields-bg-disabled, #e8ebeb);
+  border-color: var(--forms-fields-stroke-default, #d0d6d8);
+  cursor: not-allowed;
+}
+
+/* Search icon */
+.search-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  color: var(--forms-fields-label, var(--colour-brand-inkwell, #14343b));
+}
+
+.search-icon svg {
+  width: 20px;
+  height: 20px;
+}
+
+.disabled .search-icon {
+  opacity: 0.5;
+}
+
+/* Native input */
+.input {
+  flex: 1;
+  min-width: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
+  font-weight: var(--font-weight-regular, 400);
+  font-size: 16px;
+  line-height: 24px;
+  color: var(--forms-fields-input, var(--colour-brand-inkwell, #14343b));
+  outline: none;
+}
+
+.input::placeholder {
+  color: var(--forms-fields-placeholder, #60767b);
+  opacity: 1;
+}
+
+.input:disabled {
+  cursor: not-allowed;
+  color: var(--forms-fields-placeholder, #60767b);
+}
+
+.input:disabled::placeholder {
+  color: var(--forms-fields-placeholder, #60767b);
+}
+
+/* Hide native browser styling for search inputs */
+.input[type="search"]::-webkit-search-decoration,
+.input[type="search"]::-webkit-search-cancel-button,
+.input[type="search"]::-webkit-search-results-button,
+.input[type="search"]::-webkit-search-results-decoration {
+  display: none;
+}
+
+/* Hide number input spinners */
+.input[type="number"]::-webkit-inner-spin-button,
+.input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+/* Clear button */
+.clear-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--forms-fields-label, var(--colour-brand-inkwell, #14343b));
+  flex-shrink: 0;
+  opacity: 0.6;
+  transition: opacity 0.15s ease;
+}
+
+.clear-button svg {
+  width: 16px;
+  height: 16px;
+}
+
+.clear-button:hover {
+  opacity: 1;
+}
+
+.clear-button:focus-visible {
+  outline: 2px solid var(--buttons-secondary-stroke, #14343b);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+/* Error row */
+.error-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.error-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  color: var(--forms-fields-error, #be292a);
+}
+
+.error-icon svg {
+  width: 20px;
+  height: 20px;
+}
+
+.error-text {
+  flex: 1;
+  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
+  font-weight: var(--font-weight-regular, 400);
+  font-size: 16px;
+  line-height: 24px;
+  color: var(--forms-fields-error, #be292a);
+}
+