@for-the-people-initiative/design-system 1.3.1

package/src/components/InlineMessage/InlineMessage.scss

@@ -0,0 +1,69 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: inline-message;
+
+.#{$c} {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--inline-message-gap, $inline-message-gap);
+  padding: var(--inline-message-padding-y, $inline-message-padding-y) var(--inline-message-padding-x, $inline-message-padding-x);
+  border-radius: var(--inline-message-radius, $inline-message-radius);
+  font-size: var(--inline-message-fontSize, $inline-message-fontSize);
+  font-weight: var(--inline-message-fontWeight, $inline-message-fontWeight);
+  line-height: 1.4;
+}
+
+.#{$c}__icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--inline-message-iconSize, $inline-message-iconSize);
+  height: var(--inline-message-iconSize, $inline-message-iconSize);
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.#{$c}__text {
+  flex: 1;
+}
+
+// Severity variants
+.#{$c}--success {
+  background-color: var(--inline-message-background-success, $inline-message-background-success);
+  color: var(--inline-message-text-success, $inline-message-text-success);
+
+  .#{$c}__icon {
+    color: var(--inline-message-icon-success, $inline-message-icon-success);
+  }
+}
+
+.#{$c}--info {
+  background-color: var(--inline-message-background-info, $inline-message-background-info);
+  color: var(--inline-message-text-info, $inline-message-text-info);
+
+  .#{$c}__icon {
+    color: var(--inline-message-icon-info, $inline-message-icon-info);
+  }
+}
+
+.#{$c}--warn {
+  background-color: var(--inline-message-background-warn, $inline-message-background-warn);
+  color: var(--inline-message-text-warn, $inline-message-text-warn);
+
+  .#{$c}__icon {
+    color: var(--inline-message-icon-warn, $inline-message-icon-warn);
+  }
+}
+
+.#{$c}--error {
+  background-color: var(--inline-message-background-error, $inline-message-background-error);
+  color: var(--inline-message-text-error, $inline-message-text-error);
+
+  .#{$c}__icon {
+    color: var(--inline-message-icon-error, $inline-message-icon-error);
+  }
+}

package/src/components/InlineMessage/InlineMessage.vue

@@ -0,0 +1,47 @@
+<template>
+  <span class="inline-message" :class="additionalClasses" role="status">
+    <slot name="icon">
+      <span v-if="hasIcon" class="inline-message__icon">
+        <!-- Success icon -->
+        <svg v-if="severity === 'success'" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="currentColor"/>
+        </svg>
+        <!-- Info icon -->
+        <svg v-else-if="severity === 'info'" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" fill="currentColor"/>
+        </svg>
+        <!-- Warning icon -->
+        <svg v-else-if="severity === 'warn'" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="currentColor"/>
+        </svg>
+        <!-- Error icon -->
+        <svg v-else-if="severity === 'error'" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" fill="currentColor"/>
+        </svg>
+      </span>
+    </slot>
+    <span class="inline-message__text">
+      <slot />
+    </span>
+  </span>
+</template>
+
+<style src="./InlineMessage.scss"></style>
+
+<script setup lang="ts">
+import type { InlineMessageProps } from '../../types';
+import { computed } from "vue";
+
+defineOptions({ name: 'FtpInlineMessage' });
+
+const props = withDefaults(defineProps<InlineMessageProps>(), {
+  severity: "info",
+  icon: true,
+});
+
+const hasIcon = computed(() => props.icon);
+
+const additionalClasses = computed(() =>
+  [`inline-message--${props.severity}`].join(" ")
+);
+</script>

package/src/components/InputChips/InputChips.scss

@@ -0,0 +1,165 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: input-chips;
+
+.#{$c} {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--input-chips-gap, $input-chips-gap);
+  width: 100%;
+  min-height: var(--input-chips-height-md, $input-chips-height-md);
+  padding: var(--input-chips-padding-y, $input-chips-padding-y) var(--input-chips-padding-x, $input-chips-padding-x);
+  background-color: var(--input-chips-background-default, $input-chips-background-default);
+  border: var(--input-chips-border-width, $input-chips-border-width) solid var(--input-chips-border-color-default, $input-chips-border-color-default);
+  border-radius: var(--input-chips-radius, $input-chips-radius);
+  cursor: text;
+  transition: border-color 0.15s ease;
+
+  &:hover:not(.#{$c}--disabled) {
+    border-color: var(--input-chips-border-color-hover, $input-chips-border-color-hover);
+  }
+}
+
+.#{$c}--focused {
+  outline: var(--input-chips-focus-ringWidth, $input-chips-focus-ringWidth) solid var(--input-chips-focus-ringColor, $input-chips-focus-ringColor);
+  outline-offset: var(--input-chips-focus-ringOffset, $input-chips-focus-ringOffset);
+  border-color: var(--input-chips-border-color-focus, $input-chips-border-color-focus);
+}
+
+.#{$c}--disabled {
+  cursor: not-allowed;
+  background-color: var(--input-chips-background-disabled, $input-chips-background-disabled);
+  border-color: var(--input-chips-border-color-disabled, $input-chips-border-color-disabled);
+}
+
+.#{$c}--invalid {
+  border-color: var(--input-chips-border-color-error, $input-chips-border-color-error);
+
+  &.#{$c}--focused {
+    border-color: var(--input-chips-border-color-error, $input-chips-border-color-error);
+  }
+}
+
+// Sizes
+.#{$c}--size-sm {
+  min-height: var(--input-chips-height-sm, $input-chips-height-sm);
+
+  .#{$c}__input {
+    font-size: var(--input-chips-fontSize-sm, $input-chips-fontSize-sm);
+  }
+
+  .#{$c}__chip {
+    font-size: 12px;
+  }
+}
+
+.#{$c}--size-md {
+  min-height: var(--input-chips-height-md, $input-chips-height-md);
+
+  .#{$c}__input {
+    font-size: var(--input-chips-fontSize-md, $input-chips-fontSize-md);
+  }
+}
+
+.#{$c}--size-lg {
+  min-height: var(--input-chips-height-lg, $input-chips-height-lg);
+
+  .#{$c}__input {
+    font-size: var(--input-chips-fontSize-lg, $input-chips-fontSize-lg);
+  }
+
+  .#{$c}__chip {
+    font-size: 14px;
+    padding: 4px 8px;
+  }
+}
+
+// Chip
+.#{$c}__chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--input-chips-chip-gap, $input-chips-chip-gap);
+  padding: var(--input-chips-chip-padding-y, $input-chips-chip-padding-y) var(--input-chips-chip-padding-x, $input-chips-chip-padding-x);
+  background-color: var(--input-chips-chip-background-default, $input-chips-chip-background-default);
+  border-radius: var(--input-chips-chip-radius, $input-chips-chip-radius);
+  font-size: var(--input-chips-chip-fontSize, $input-chips-chip-fontSize);
+  color: var(--input-chips-chip-text, $input-chips-chip-text);
+  line-height: 1.4;
+  user-select: none;
+  transition: background-color 0.15s ease;
+
+  &:hover {
+    background-color: var(--input-chips-chip-background-hover, $input-chips-chip-background-hover);
+  }
+}
+
+.#{$c}__chip-label {
+  white-space: nowrap;
+}
+
+.#{$c}__chip-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--input-chips-remove-size, $input-chips-remove-size);
+  height: var(--input-chips-remove-size, $input-chips-remove-size);
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 50%;
+  color: var(--input-chips-remove-color-default, $input-chips-remove-color-default);
+  cursor: pointer;
+  transition: color 0.15s ease;
+  flex-shrink: 0;
+
+  &:hover {
+    color: var(--input-chips-remove-color-hover, $input-chips-remove-color-hover);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--input-chips-focus-ringColor, $input-chips-focus-ringColor);
+    outline-offset: 1px;
+  }
+}
+
+.#{$c}__chip-remove-icon {
+  width: 12px;
+  height: 12px;
+}
+
+// Input
+.#{$c}__input {
+  flex: 1;
+  min-width: 80px;
+  border: none;
+  background: transparent;
+  padding: 0;
+  color: var(--input-chips-text-default, $input-chips-text-default);
+  font-size: var(--input-chips-fontSize-md, $input-chips-fontSize-md);
+  line-height: 1.5;
+
+  &::placeholder {
+    color: var(--input-chips-text-placeholder, $input-chips-text-placeholder);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    color: var(--input-chips-text-disabled, $input-chips-text-disabled);
+  }
+}
+
+// Disabled chip styling
+.#{$c}--disabled {
+  .#{$c}__chip {
+    opacity: 0.6;
+  }
+}

package/src/components/InputChips/InputChips.vue

@@ -0,0 +1,169 @@
+<template>
+  <div
+    class="input-chips"
+    :class="additionalClasses"
+    @click="focusInput"
+  >
+    <span
+      v-for="(chip, index) in modelValue"
+      :key="`chip-${index}`"
+      class="input-chips__chip"
+    >
+      <span class="input-chips__chip-label">{{ chip }}</span>
+      <button
+        v-if="!isDisabled"
+        type="button"
+        class="input-chips__chip-remove"
+        aria-label="Remove"
+        @click.stop="removeChip(index)"
+      >
+        <svg
+          class="input-chips__chip-remove-icon"
+          viewBox="0 0 14 14"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M4.5 4.5L9.5 9.5M9.5 4.5L4.5 9.5"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </button>
+    </span>
+    <input
+      ref="inputRef"
+      v-model="inputValue"
+      class="input-chips__input"
+      type="text"
+      :placeholder="showPlaceholder ? placeholder : ''"
+      :disabled="isDisabled"
+      @keydown="onKeydown"
+      @paste="onPaste"
+      @focus="onFocus"
+      @blur="onBlur"
+    />
+  </div>
+</template>
+
+<style src="./InputChips.scss"></style>
+
+<script setup lang="ts">
+import type { InputChipsProps, InputChipsEmits } from '../../types';
+import { computed, ref, nextTick } from "vue";
+
+defineOptions({ name: 'FtpInputChips' });
+
+const props = withDefaults(defineProps<InputChipsProps>(), {
+  modelValue: () => [],
+  separator: null,
+  allowDuplicate: false,
+  max: null,
+  placeholder: "",
+  size: "md",
+  isDisabled: false,
+  isInvalid: false,
+});
+
+const emit = defineEmits(["update:modelValue", "add", "remove", "focus", "blur"]);
+
+const inputRef = ref<HTMLInputElement | null>(null);
+const inputValue = ref("");
+const isFocused = ref(false);
+
+const showPlaceholder = computed(() => props.modelValue.length === 0);
+
+const canAddMore = computed(() => {
+  if (props.max === null) return true;
+  return props.modelValue.length < props.max;
+});
+
+const addChip = (value: any) => {
+  const trimmedValue = value.trim();
+  if (!trimmedValue) return false;
+
+  if (!props.allowDuplicate && props.modelValue.includes(trimmedValue)) {
+    return false;
+  }
+
+  if (!canAddMore.value) return false;
+
+  const newValue = [...props.modelValue, trimmedValue];
+  emit("update:modelValue", newValue);
+  emit("add", { value: trimmedValue, chips: newValue });
+  return true;
+};
+
+const removeChip = (index: any) => {
+  const removedValue = props.modelValue[index];
+  const newValue = props.modelValue.filter((_, i) => i !== index);
+  emit("update:modelValue", newValue);
+  emit("remove", { value: removedValue, chips: newValue });
+};
+
+const processInput = (value: any) => {
+  if (props.separator) {
+    const parts = value.split(props.separator);
+    parts.forEach((part: any) => addChip(part));
+  } else {
+    addChip(value);
+  }
+  inputValue.value = "";
+};
+
+const onKeydown = (event: KeyboardEvent) => {
+  if (event.key === "Enter") {
+    event.preventDefault();
+    if (inputValue.value) {
+      processInput(inputValue.value);
+    }
+  } else if (event.key === "Backspace" && !inputValue.value && props.modelValue.length > 0) {
+    removeChip(props.modelValue.length - 1);
+  } else if (props.separator && typeof props.separator === "string" && event.key === props.separator) {
+    event.preventDefault();
+    if (inputValue.value) {
+      processInput(inputValue.value);
+    }
+  }
+};
+
+const onPaste = (event: ClipboardEvent) => {
+  if (props.separator) {
+    event.preventDefault();
+    const pastedText = event.clipboardData!.getData("text");
+    processInput(pastedText);
+  }
+};
+
+const onFocus = (event: FocusEvent) => {
+  isFocused.value = true;
+  emit("focus", { originalEvent: event });
+};
+
+const onBlur = (event: FocusEvent) => {
+  isFocused.value = false;
+  if (inputValue.value) {
+    processInput(inputValue.value);
+  }
+  emit("blur", { originalEvent: event });
+};
+
+const focusInput = () => {
+  inputRef.value?.focus();
+};
+
+const additionalClasses = computed(() => [
+  `input-chips--size-${props.size}`,
+  isFocused.value && "input-chips--focused",
+  props.isDisabled && "input-chips--disabled",
+  props.isInvalid && "input-chips--invalid",
+].filter(Boolean).join(" "));
+
+defineExpose({
+  focus: () => inputRef.value?.focus(),
+  blur: () => inputRef.value?.blur(),
+  el: inputRef,
+});
+</script>

package/src/components/InputGroup/InputGroup.scss

@@ -0,0 +1,57 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: input-group;
+
+.#{$c} {
+  display: inline-flex;
+  align-items: stretch;
+
+  // First child gets left border radius
+  > :first-child {
+    border-top-left-radius: var(--input-group-border-radius, $input-group-border-radius);
+    border-bottom-left-radius: var(--input-group-border-radius, $input-group-border-radius);
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  // Last child gets right border radius
+  > :last-child {
+    border-top-right-radius: var(--input-group-border-radius, $input-group-border-radius);
+    border-bottom-right-radius: var(--input-group-border-radius, $input-group-border-radius);
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  // Middle children have no radius
+  > :not(:first-child):not(:last-child) {
+    border-radius: 0;
+  }
+
+  // Only child keeps all radii
+  > :only-child {
+    border-radius: var(--input-group-border-radius, $input-group-border-radius);
+  }
+
+  // Remove duplicate borders between adjacent elements
+  > :not(:first-child) {
+    margin-left: -1px;
+  }
+
+  // Ensure focused element appears above siblings
+  > :focus,
+  > :focus-within {
+    position: relative;
+    z-index: 1;
+  }
+}
+
+.#{$c}--fluid {
+  display: flex;
+  width: 100%;
+
+  > .input-text,
+  > input {
+    flex: 1;
+    width: auto;
+  }
+}

package/src/components/InputGroup/InputGroup.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="input-group" :class="additionalClasses">
+    <slot />
+  </div>
+</template>
+
+<style src="./InputGroup.scss"></style>
+
+<script setup lang="ts">
+import type { InputGroupProps } from '../../types';
+import { computed } from "vue";
+
+defineOptions({ name: 'FtpInputGroup' });
+
+const props = withDefaults(defineProps<InputGroupProps>(), {
+  fluid: false,
+});
+
+const additionalClasses = computed(() =>
+  [props.fluid && "input-group--fluid"].filter(Boolean).join(" ")
+);
+</script>

package/src/components/InputGroupAddon/InputGroupAddon.scss

@@ -0,0 +1,28 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: input-group-addon;
+
+.#{$c} {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--input-group-addon-background-default, $input-group-addon-background-default);
+  color: var(--input-group-addon-text-default, $input-group-addon-text-default);
+  border: var(--input-group-addon-border-width, $input-group-addon-border-width) solid var(--input-group-addon-border-color, $input-group-addon-border-color);
+  padding: var(--input-group-addon-padding-y, $input-group-addon-padding-y) var(--input-group-addon-padding-x, $input-group-addon-padding-x);
+  font-size: var(--input-group-addon-fontSize, $input-group-addon-fontSize);
+  white-space: nowrap;
+}
+
+// Sizes - match InputText sizes
+.#{$c}--size-sm {
+  height: var(--input-text-height-sm, $input-text-height-sm);
+}
+
+.#{$c}--size-md {
+  height: var(--input-text-height-md, $input-text-height-md);
+}
+
+.#{$c}--size-lg {
+  height: var(--input-text-height-lg, $input-text-height-lg);
+}

package/src/components/InputGroupAddon/InputGroupAddon.vue

@@ -0,0 +1,22 @@
+<template>
+  <span class="input-group-addon" :class="additionalClasses">
+    <slot />
+  </span>
+</template>
+
+<style src="./InputGroupAddon.scss"></style>
+
+<script setup lang="ts">
+import type { InputGroupAddonProps } from '../../types';
+import { computed } from "vue";
+
+defineOptions({ name: 'FtpInputGroupAddon' });
+
+const props = withDefaults(defineProps<InputGroupAddonProps>(), {
+  size: "md",
+});
+
+const additionalClasses = computed(() =>
+  [`input-group-addon--size-${props.size}`].filter(Boolean).join(" ")
+);
+</script>

package/src/components/InputIcon/InputIcon.scss

@@ -0,0 +1,58 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: input-icon;
+
+.#{$c} {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--input-icon-color-default, $input-icon-color-default);
+  pointer-events: none;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+}
+
+// Positions
+.#{$c}--position-left {
+  left: var(--input-icon-offset, $input-icon-offset);
+}
+
+.#{$c}--position-right {
+  right: var(--input-icon-offset, $input-icon-offset);
+}
+
+// Sizes
+.#{$c}--size-sm {
+  width: var(--input-icon-size-sm, $input-icon-size-sm);
+  height: var(--input-icon-size-sm, $input-icon-size-sm);
+  font-size: var(--input-icon-size-sm, $input-icon-size-sm);
+
+  svg {
+    width: var(--input-icon-size-sm, $input-icon-size-sm);
+    height: var(--input-icon-size-sm, $input-icon-size-sm);
+  }
+}
+
+.#{$c}--size-md {
+  width: var(--input-icon-size-md, $input-icon-size-md);
+  height: var(--input-icon-size-md, $input-icon-size-md);
+  font-size: var(--input-icon-size-md, $input-icon-size-md);
+
+  svg {
+    width: var(--input-icon-size-md, $input-icon-size-md);
+    height: var(--input-icon-size-md, $input-icon-size-md);
+  }
+}
+
+.#{$c}--size-lg {
+  width: var(--input-icon-size-lg, $input-icon-size-lg);
+  height: var(--input-icon-size-lg, $input-icon-size-lg);
+  font-size: var(--input-icon-size-lg, $input-icon-size-lg);
+
+  svg {
+    width: var(--input-icon-size-lg, $input-icon-size-lg);
+    height: var(--input-icon-size-lg, $input-icon-size-lg);
+  }
+}

package/src/components/InputIcon/InputIcon.vue

@@ -0,0 +1,28 @@
+<template>
+  <span class="input-icon" :class="additionalClasses" aria-hidden="true">
+    <slot />
+  </span>
+</template>
+
+<style src="./InputIcon.scss"></style>
+
+<script setup lang="ts">
+import type { InputIconProps } from '../../types';
+import { computed } from "vue";
+
+defineOptions({ name: 'FtpInputIcon' });
+
+const props = withDefaults(defineProps<InputIconProps>(), {
+  size: "md",
+  position: "left",
+});
+
+const additionalClasses = computed(() =>
+  [
+    `input-icon--size-${props.size}`,
+    `input-icon--position-${props.position}`,
+  ]
+    .filter(Boolean)
+    .join(" ")
+);
+</script>