@mt-gloss/styles 0.0.3

package/src/lib/components/_feedback.scss

@@ -0,0 +1,128 @@
+// ============================================
+// COMPONENT: FEEDBACK (CHIPS, BADGES, TAGS, LINKS)
+// ============================================
+
+@use '../tokens' as *;
+@use '../mixins' as *;
+
+// --- CHIPS ---
+.gloss-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: $space-2;
+  font-size: $text-sm;
+  font-weight: 500;
+  padding: $space-1 $space-3;
+  border-radius: $radius-full;
+  background: $color-white;
+  border: 1px solid $alias-border-default;
+  @include shadow-input-default;
+  transition: all 0.2s;
+  cursor: default;
+
+  &:hover {
+    background: $alias-bg-hover;
+    border-color: $alias-border-hover;
+    @include shadow-elevation-hover;
+    transform: translateY(-1px);
+  }
+
+  &--selected {
+    background: $alias-primary;
+    border-color: $alias-primary;
+    color: white;
+
+    &:hover {
+      background: $alias-primary-hover;
+    }
+  }
+
+  &--error {
+    background: $alias-bg-error;
+    border-color: transparent;
+    color: $alias-text-error;
+  }
+}
+
+.gloss-chip__close {
+  background: rgba(0,0,0,0.1);
+  border: none;
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: inherit;
+}
+
+// --- BADGES ---
+.gloss-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: $text-xs;
+  font-weight: 600;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 $space-2;
+  border-radius: $radius-full;
+
+  &--default {
+    background: $color-gray-200;
+    color: $alias-text-secondary;
+  }
+
+  &--informational {
+    background: $color-blue-100;
+    color: $color-blue-700;
+  }
+
+  &--success {
+    background: $color-green-100;
+    color: $color-green-600;
+  }
+
+  &--attention {
+    background: $color-amber-100;
+    color: $color-amber-600;
+  }
+
+  &--critical {
+    background: $color-red-100;
+    color: $color-red-600;
+  }
+}
+
+// --- TAGS ---
+.gloss-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: $space-1;
+  font-size: $text-xs;
+  font-weight: 500;
+  padding: $space-1 $space-2;
+  border-radius: $radius-sm;
+  background: $color-gray-100;
+  color: $alias-text-secondary;
+  border: 1px solid $alias-border-default;
+}
+
+// --- LINKS ---
+.gloss-link {
+  color: $alias-text-link;
+  text-decoration: none;
+  font-weight: 400;
+  transition: color 0.1s;
+  cursor: pointer;
+
+  &:hover {
+    color: $color-blue-700;
+    text-decoration: underline;
+  }
+
+  &--bold {
+    font-weight: 600;
+  }
+}

package/src/lib/components/_form.scss

@@ -0,0 +1,153 @@
+// ============================================
+// COMPONENT: FORM FIELD
+// ============================================
+
+@use '../tokens' as *;
+
+.gloss-form-field {
+  display: flex;
+  flex-direction: column;
+  gap: $space-2;
+  margin-bottom: $space-4;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+// --- LABEL POSITIONS ---
+.gloss-form-field--label-top {
+  flex-direction: column;
+}
+
+.gloss-form-field--label-left {
+  flex-direction: row;
+  align-items: flex-start;
+  gap: $space-4;
+
+  .gloss-form-field__label {
+    min-width: 120px;
+    padding-top: $space-3; // Align with input
+    text-align: right;
+  }
+
+  .gloss-form-field__control {
+    flex: 1;
+  }
+}
+
+.gloss-form-field--label-right {
+  flex-direction: row;
+  align-items: center;
+  gap: $space-3;
+
+  .gloss-form-field__control {
+    flex-shrink: 0;
+  }
+}
+
+// --- LABEL ---
+.gloss-form-field__label {
+  display: block;
+  font-family: $font-body;
+  font-size: $text-sm;
+  font-weight: 500;
+  color: $alias-text-primary;
+  line-height: 1.4;
+
+  &--hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+}
+
+.gloss-form-field__required {
+  color: $color-red-500;
+  margin-left: $space-1;
+}
+
+// --- CONTROL ---
+.gloss-form-field__control {
+  position: relative;
+}
+
+// --- FOOTER (Helper/Error) ---
+.gloss-form-field__footer {
+  min-height: 20px; // Prevent layout shift
+}
+
+.gloss-form-field__helper {
+  font-family: $font-body;
+  font-size: $text-xs;
+  color: $alias-text-tertiary;
+  line-height: 1.4;
+}
+
+.gloss-form-field__error {
+  font-family: $font-body;
+  font-size: $text-xs;
+  color: $alias-text-error;
+  line-height: 1.4;
+  display: flex;
+  align-items: center;
+  gap: $space-1;
+
+  &::before {
+    content: '';
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EF4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
+    background-size: contain;
+    flex-shrink: 0;
+  }
+}
+
+// --- ERROR STATE ---
+.gloss-form-field--error {
+  .gloss-form-field__label {
+    color: $alias-text-error;
+  }
+}
+
+// --- INLINE FORM FIELDS ---
+.gloss-form-inline {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $space-4;
+  align-items: flex-end;
+
+  .gloss-form-field {
+    margin-bottom: 0;
+    flex: 1;
+    min-width: 200px;
+  }
+}
+
+// --- FORM ACTIONS ---
+.gloss-form-actions {
+  display: flex;
+  gap: $space-3;
+  margin-top: $space-6;
+  padding-top: $space-4;
+  border-top: 1px solid $alias-border-default;
+
+  &--right {
+    justify-content: flex-end;
+  }
+
+  &--center {
+    justify-content: center;
+  }
+
+  &--between {
+    justify-content: space-between;
+  }
+}

package/src/lib/components/_inputs.scss

@@ -0,0 +1,459 @@
+// ============================================
+// COMPONENT: INPUTS
+// ============================================
+
+@use '../tokens' as *;
+@use '../mixins' as *;
+
+.gloss-input {
+  width: 100%;
+  font-family: $font-body;
+  font-size: $text-base;
+  font-weight: 500;
+  color: $alias-text-primary;
+  background: $color-white;
+  border: 1px solid $alias-border-default;
+  border-radius: $radius-md;
+  padding: $space-3 $space-4;
+  @include shadow-input-default;
+  outline: none;
+  @include input-transition-default;
+
+  &::placeholder {
+    color: $alias-text-tertiary;
+    font-weight: 400;
+  }
+
+  &:hover:not(:disabled):not(:focus):not(.gloss-input--error):not(.gloss-input--success) {
+    background: $alias-bg-hover;
+    border-color: $alias-border-hover;
+    @include input-transition-hover;
+  }
+
+  &:focus:not(.gloss-input--error):not(.gloss-input--success) {
+    background: $alias-bg-hover;
+    border-color: $alias-border-focus;
+    @include shadow-input-focus;
+    @include input-transition-focus;
+  }
+
+  &:disabled {
+    background: $alias-bg-disabled;
+    box-shadow: $shadow-input-disabled;
+    cursor: not-allowed;
+    color: $alias-text-tertiary;
+    border-color: transparent;
+  }
+}
+
+// --- SUCCESS STATE ---
+.gloss-input--success {
+  border-color: $alias-border-success;
+  @include shadow-input-default;
+
+  &:hover:not(:disabled):not(:focus) {
+    background: $alias-bg-hover;
+  }
+
+  &:focus {
+    background: $alias-bg-hover;
+    box-shadow: $shadow-input-success-focus;
+  }
+}
+
+// --- ERROR STATE ---
+.gloss-input--error {
+  border-color: $color-red-200;
+  background: $alias-bg-error;
+  color: $alias-text-error;
+  box-shadow: $shadow-input-error;
+
+  &:hover:not(:disabled):not(:focus) {
+    border-color: $color-red-400;
+  }
+
+  &:focus {
+    border-color: $color-red-400;
+    box-shadow: $shadow-input-error-focus;
+  }
+}
+
+// --- INPUT WRAPPER (for prefix/suffix) ---
+.gloss-input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.gloss-input__prefix,
+.gloss-input__suffix {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  color: $alias-text-tertiary;
+  font-size: $text-lg;
+  font-weight: 500;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.gloss-input__prefix {
+  left: $space-4;
+}
+
+.gloss-input__suffix {
+  right: $space-4;
+}
+
+// --- ICON ALIGNMENT ---
+.gloss-input__icon {
+  &--center {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  &--top {
+    top: $space-3;
+    transform: none;
+  }
+}
+
+.gloss-input--has-prefix {
+  padding-left: $space-10;
+}
+
+.gloss-input--has-suffix {
+  padding-right: $space-10;
+}
+
+// --- INPUT ANATOMY ---
+.gloss-input-anatomy {
+  display: flex;
+  flex-direction: column;
+  gap: $space-2;
+  width: 100%;
+}
+
+.gloss-input__label {
+  font-size: $text-sm;
+  font-weight: 500;
+  color: $alias-text-secondary;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.gloss-input__label-status {
+  font-size: $text-xs;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  &--success {
+    color: $alias-text-success;
+  }
+
+  &--error {
+    color: $alias-text-error;
+  }
+
+  &--required {
+    color: $alias-text-tertiary;
+    font-weight: 400;
+  }
+
+  &--pending {
+    color: $alias-primary;
+  }
+}
+
+.gloss-input__helper {
+  font-size: $text-xs;
+  color: $alias-text-tertiary;
+  margin-top: $space-1;
+  line-height: 1.4;
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+
+  &--error {
+    color: $alias-text-error;
+  }
+
+  svg {
+    flex-shrink: 0;
+    margin-top: 2px;
+  }
+}
+
+// --- CLEARABLE & COPYABLE BUTTONS ---
+.gloss-input__clear,
+.gloss-input__copy {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: $space-1;
+  background: transparent;
+  border: none;
+  border-radius: $radius-sm;
+  cursor: pointer;
+  color: $alias-text-tertiary;
+  transition: color 0.15s ease, background-color 0.15s ease;
+  pointer-events: auto;
+
+  &:hover {
+    color: $alias-text-primary;
+    background: $alias-bg-hover;
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px $alias-border-focus;
+  }
+}
+
+.gloss-input__clear {
+  opacity: 0.6;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.gloss-input__copy {
+  &--copied {
+    color: $alias-text-success;
+
+    &:hover {
+      color: $alias-text-success;
+    }
+  }
+}
+
+.gloss-input__right-icon {
+  display: flex;
+  align-items: center;
+}
+
+// Allow pointer events on suffix when it contains interactive elements
+.gloss-input__suffix:has(.gloss-input__clear, .gloss-input__copy) {
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  gap: $space-1;
+}
+
+// --- INPUT FOOTER (helper + counter) ---
+.gloss-input__footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: $space-4;
+  min-height: $space-4;
+
+  // When only counter, align right
+  &:has(.gloss-input__counter):not(:has(.gloss-input__helper)) {
+    justify-content: flex-end;
+  }
+}
+
+// --- CHARACTER COUNTER ---
+.gloss-input__counter {
+  font-size: $text-xs;
+  color: $alias-text-tertiary;
+  text-align: right;
+  flex-shrink: 0;
+  margin-top: $space-1;
+
+  &--warning {
+    color: $color-amber-500;
+  }
+
+  &--error {
+    color: $alias-text-error;
+  }
+}
+
+// --- INPUT GROUP ---
+.gloss-input-group {
+  display: flex;
+  width: 100%;
+
+  // Gap when not attached
+  &:not(.gloss-input-group--attached) {
+    gap: $space-2;
+  }
+
+  // Attached mode - merge borders
+  &--attached {
+    > .gloss-input,
+    > .gloss-input-wrapper > .gloss-input {
+      // Remove border radius from middle items
+      &:not(:first-child):not(:last-child) {
+        border-radius: 0;
+      }
+
+      // First item - remove right border radius
+      &:first-child {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+
+      // Last item - remove left border radius
+      &:last-child {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+
+      // Handle negative margin for overlapping borders
+      &:not(:first-child) {
+        margin-left: -1px;
+      }
+
+      &:focus {
+        z-index: 1;
+      }
+    }
+
+    // Handle addon + input combinations
+    > .gloss-input-addon + .gloss-input,
+    > .gloss-input-addon + .gloss-input-wrapper > .gloss-input {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    > .gloss-input + .gloss-input-addon,
+    > .gloss-input-wrapper + .gloss-input-addon {
+      margin-left: -1px;
+    }
+  }
+}
+
+// --- INPUT ADDON ---
+.gloss-input-addon {
+  display: flex;
+  align-items: center;
+  padding: 0 $space-4;
+  background: $alias-bg-secondary;
+  border: 1px solid $alias-border-default;
+  color: $alias-text-secondary;
+  font-size: $text-base;
+  font-weight: 500;
+  white-space: nowrap;
+
+  &--left {
+    border-right: none;
+    border-radius: $radius-md 0 0 $radius-md;
+  }
+
+  &--right {
+    border-left: none;
+    border-radius: 0 $radius-md $radius-md 0;
+  }
+}
+
+// Fix input in group to not have full width classes interfering
+.gloss-input-group .gloss-input {
+  flex: 1;
+  min-width: 0; // Allow shrinking
+}
+
+// --- NUMBER INPUT ---
+.gloss-number-input {
+  display: flex;
+  position: relative;
+
+  &__input {
+    text-align: center;
+    -moz-appearance: textfield; // Hide browser spinners
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+  }
+
+  // Right-side stepper (stacked)
+  &__stepper {
+    position: absolute;
+    right: 1px;
+    top: 1px;
+    bottom: 1px;
+    display: flex;
+    flex-direction: column;
+    border-left: 1px solid $alias-border-default;
+    border-radius: 0 $radius-md $radius-md 0;
+    overflow: hidden;
+  }
+
+  &__stepper-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 $space-2;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    color: $alias-text-secondary;
+    transition: background-color 0.15s ease, color 0.15s ease;
+
+    &:hover:not(:disabled) {
+      background: $alias-bg-hover;
+      color: $alias-text-primary;
+    }
+
+    &:active:not(:disabled) {
+      background: $color-gray-200;
+    }
+
+    &:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+  }
+
+  // Stacked stepper buttons
+  &__stepper &__stepper-btn {
+    flex: 1;
+
+    &--increment {
+      border-bottom: 1px solid $alias-border-default;
+    }
+  }
+
+  // When stepper is right, add padding to input
+  &:has(.gloss-number-input__stepper) .gloss-number-input__input {
+    padding-right: $space-10;
+  }
+
+  // Side stepper mode
+  &--stepper-sides {
+    .gloss-number-input__input {
+      border-radius: 0;
+      text-align: center;
+    }
+
+    .gloss-number-input__stepper-btn {
+      padding: 0 $space-3;
+      border: 1px solid $alias-border-default;
+      background: $alias-bg-surface;
+
+      &--decrement {
+        border-radius: $radius-md 0 0 $radius-md;
+        border-right: none;
+      }
+
+      &--increment {
+        border-radius: 0 $radius-md $radius-md 0;
+        border-left: none;
+      }
+
+      &:hover:not(:disabled) {
+        background: $alias-bg-hover;
+      }
+    }
+  }
+}