Graphite Signal Input

1<template>
2  <div
3    class="signal-field"
4    :class="[
5      qualityClass,
6      {
7        'is-focused': focused,
8        'has-value': localValue.length > 0,
9        'is-open': open && visibleSuggestions.length > 0,
10        'is-loading': loading,
11        'is-disabled': disabled,
12        'is-submitted': submitted
13      }
14    ]"
15  >
16    <div class="signal-card">
17      <div class="signal-grid" aria-hidden="true"></div>
18      <div class="signal-orb orb-left" aria-hidden="true"></div>
19      <div class="signal-orb orb-right" aria-hidden="true"></div>
20
21      <label
22        class="signal-shell"
23        :for="inputId"
24        role="combobox"
25        :aria-expanded="open && visibleSuggestions.length > 0 ? 'true' : 'false'"
26        :aria-controls="listId"
27        aria-haspopup="listbox"
28      >
29        <span class="signal-scan" aria-hidden="true"></span>
30
31        <span class="signal-icon" aria-hidden="true">
32          <svg viewBox="0 0 24 24">
33            <path d="M4.75 8.25 9 12l-4.25 3.75" />
34            <path d="M11.5 16.75h7.75" />
35          </svg>
36        </span>
37
38        <span class="signal-core">
39          <span class="signal-topline">
40            <span class="signal-label">{{ label }}</span>
41            <span class="signal-quality">{{ qualityLabel }}</span>
42          </span>
43
44          <input
45            :id="inputId"
46            ref="input"
47            class="signal-input"
48            :value="localValue"
49            :placeholder="placeholder"
50            :disabled="disabled"
51            :aria-describedby="hintId"
52            :aria-activedescendant="activeOptionId"
53            autocomplete="off"
54            spellcheck="false"
55            @input="onInput"
56            @focus="onFocus"
57            @blur="onBlur"
58            @keydown="onKeydown"
59          />
60        </span>
61
62        <span class="signal-meta" aria-hidden="true">
63          <span class="signal-shortcut">{{ shortcut }}</span>
64
65          <span class="signal-bars">
66            <i
67              v-for="bar in 4"
68              :key="bar"
69              :class="{ 'is-active': bar <= activeBars }"
70            ></i>
71          </span>
72        </span>
73
74        <span class="signal-actions">
75          <button
76            v-if="clearable && localValue.length > 0 && !disabled && !loading"
77            class="signal-button signal-clear"
78            type="button"
79            aria-label="Eingabe löschen"
80            @mousedown.prevent
81            @click="clearInput"
82          >
83            <svg viewBox="0 0 24 24">
84              <path d="M7 7l10 10M17 7 7 17" />
85            </svg>
86          </button>
87
88          <span
89            v-if="loading"
90            class="signal-loader"
91            aria-label="Lädt"
92          ></span>
93
94          <button
95            v-if="!loading"
96            class="signal-button signal-submit"
97            type="button"
98            aria-label="Suchen"
99            :disabled="disabled"
100            @mousedown.prevent
101            @click="submitValue"
102          >
103            <svg viewBox="0 0 24 24">
104              <path d="M5 12h13" />
105              <path d="m14 7 5 5-5 5" />
106            </svg>
107          </button>
108        </span>
109      </label>
110
111      <div
112        v-if="open && visibleSuggestions.length > 0"
113        :id="listId"
114        class="signal-list"
115        role="listbox"
116      >
117        <button
118          v-for="(item, index) in visibleSuggestions"
119          :id="optionId(index)"
120          :key="item"
121          class="signal-option"
122          :class="{ 'is-active': selectedIndex === index }"
123          type="button"
124          role="option"
125          :aria-selected="selectedIndex === index ? 'true' : 'false'"
126          @mousedown.prevent
127          @click="chooseSuggestion(item)"
128        >
129          <span class="option-index">0{{ index + 1 }}</span>
130
131          <span class="option-content">
132            <strong>{{ item }}</strong>
133            <small>{{ optionSubtitle(item) }}</small>
134          </span>
135
136          <span class="option-arrow" aria-hidden="true">
137            <svg viewBox="0 0 24 24">
138              <path d="M5 12h13" />
139              <path d="m14 7 5 5-5 5" />
140            </svg>
141          </span>
142        </button>
143      </div>
144    </div>
145
146    <div
147      :id="hintId"
148      class="signal-footer"
149      aria-live="polite"
150    >
151      <p class="signal-message">
152        <span class="message-led" aria-hidden="true"></span>
153        {{ messageText }}
154      </p>
155
156      <p class="signal-count">
157        {{ localValue.length }} Zeichen
158      </p>
159    </div>
160  </div>
161</template>
162
163<script>
164export default {
165  name: 'GraphiteSignalInput',
166
167  props: {
168    modelValue: {
169      type: String,
170      default: ''
171    },
172
173    label: {
174      type: String,
175      default: 'Command Input'
176    },
177
178    placeholder: {
179      type: String,
180      default: 'Komponente, Tag oder Aktion eingeben...'
181    },
182
183    hint: {
184      type: String,
185      default: 'Nutze Pfeiltasten, Enter oder den Shortcut zum schnellen Suchen.'
186    },
187
188    shortcut: {
189      type: String,
190      default: '⌘ K'
191    },
192
193    loading: {
194      type: Boolean,
195      default: false
196    },
197
198    disabled: {
199      type: Boolean,
200      default: false
201    },
202
203    clearable: {
204      type: Boolean,
205      default: true
206    },
207
208    suggestions: {
209      type: Array,
210      default: function () {
211        return [
212          'Create Component',
213          'Search Buttons',
214          'Open Inputs',
215          'Review Layout',
216          'Publish Element',
217          'Check Accessibility',
218          'Generate Variant',
219          'Export Code'
220        ]
221      }
222    }
223  },
224
225  emits: ['update:modelValue', 'input', 'search', 'clear', 'select'],
226
227  data: function () {
228    return {
229      localValue: this.modelValue || '',
230      focused: false,
231      open: false,
232      submitted: false,
233      selectedIndex: -1,
234      inputId: 'signal-input-' + Math.random().toString(36).slice(2, 10),
235      listId: 'signal-list-' + Math.random().toString(36).slice(2, 10),
236      hintId: 'signal-hint-' + Math.random().toString(36).slice(2, 10)
237    }
238  },
239
240  computed: {
241    visibleSuggestions: function () {
242      var value = String(this.localValue || '').toLowerCase().trim()
243
244      if (!value) {
245        return this.suggestions.slice(0, 5)
246      }
247
248      return this.suggestions
249        .filter(function (item) {
250          return String(item).toLowerCase().indexOf(value) !== -1
251        })
252        .slice(0, 5)
253    },
254
255    activeOptionId: function () {
256      if (this.selectedIndex < 0) {
257        return null
258      }
259
260      return this.optionId(this.selectedIndex)
261    },
262
263    activeBars: function () {
264      var length = this.localValue.length
265
266      if (length === 0) {
267        return 0
268      }
269
270      if (length < 4) {
271        return 1
272      }
273
274      if (length < 8) {
275        return 2
276      }
277
278      if (length < 14) {
279        return 3
280      }
281
282      return 4
283    },
284
285    qualityLabel: function () {
286      if (this.localValue.length === 0) {
287        return 'idle'
288      }
289
290      if (this.activeBars === 1) {
291        return 'weak'
292      }
293
294      if (this.activeBars === 2) {
295        return 'fair'
296      }
297
298      if (this.activeBars === 3) {
299        return 'solid'
300      }
301
302      return 'strong'
303    },
304
305    qualityClass: function () {
306      return 'quality-' + this.qualityLabel
307    },
308
309    messageText: function () {
310      if (this.disabled) {
311        return 'Dieses Feld ist deaktiviert.'
312      }
313
314      if (this.loading) {
315        return 'Signal wird verarbeitet...'
316      }
317
318      if (this.localValue.length > 0 && this.visibleSuggestions.length === 0) {
319        return 'Keine Treffer gefunden. Enter startet trotzdem die Suche.'
320      }
321
322      if (this.open && this.visibleSuggestions.length > 0) {
323        return this.visibleSuggestions.length + ' Vorschläge verfügbar.'
324      }
325
326      if (this.submitted) {
327        return 'Befehl wurde ausgelöst.'
328      }
329
330      return this.hint
331    }
332  },
333
334  watch: {
335    modelValue: function (newValue) {
336      this.localValue = newValue || ''
337    }
338  },
339
340  mounted: function () {
341    document.addEventListener('keydown', this.handleGlobalShortcut)
342  },
343
344  beforeUnmount: function () {
345    document.removeEventListener('keydown', this.handleGlobalShortcut)
346  },
347
348  beforeDestroy: function () {
349    document.removeEventListener('keydown', this.handleGlobalShortcut)
350  },
351
352  methods: {
353    onInput: function (event) {
354      this.localValue = event.target.value
355      this.open = true
356      this.submitted = false
357      this.selectedIndex = this.visibleSuggestions.length > 0 ? 0 : -1
358
359      this.$emit('update:modelValue', this.localValue)
360      this.$emit('input', this.localValue)
361    },
362
363    onFocus: function () {
364      if (this.disabled) {
365        return
366      }
367
368      this.focused = true
369      this.open = true
370
371      if (this.visibleSuggestions.length > 0 && this.selectedIndex < 0) {
372        this.selectedIndex = 0
373      }
374    },
375
376    onBlur: function () {
377      var self = this
378
379      window.setTimeout(function () {
380        self.focused = false
381        self.open = false
382        self.selectedIndex = -1
383      }, 120)
384    },
385
386    onKeydown: function (event) {
387      if (event.key === 'ArrowDown') {
388        event.preventDefault()
389        this.moveSelection(1)
390      }
391
392      if (event.key === 'ArrowUp') {
393        event.preventDefault()
394        this.moveSelection(-1)
395      }
396
397      if (event.key === 'Enter') {
398        event.preventDefault()
399        this.submitValue()
400      }
401
402      if (event.key === 'Escape') {
403        this.open = false
404        this.selectedIndex = -1
405      }
406    },
407
408    moveSelection: function (direction) {
409      var max = this.visibleSuggestions.length - 1
410
411      if (max < 0) {
412        this.selectedIndex = -1
413        return
414      }
415
416      if (this.selectedIndex < 0) {
417        this.selectedIndex = 0
418        return
419      }
420
421      this.selectedIndex = this.selectedIndex + direction
422
423      if (this.selectedIndex > max) {
424        this.selectedIndex = 0
425      }
426
427      if (this.selectedIndex < 0) {
428        this.selectedIndex = max
429      }
430    },
431
432    chooseSuggestion: function (item) {
433      this.localValue = item
434      this.open = false
435      this.selectedIndex = -1
436      this.submitted = true
437
438      this.$emit('update:modelValue', item)
439      this.$emit('input', item)
440      this.$emit('select', item)
441      this.$emit('search', item)
442
443      this.resetSubmitted()
444    },
445
446    clearInput: function () {
447      this.localValue = ''
448      this.open = true
449      this.selectedIndex = 0
450      this.submitted = false
451
452      this.$emit('update:modelValue', '')
453      this.$emit('input', '')
454      this.$emit('clear')
455
456      if (this.$refs.input) {
457        this.$refs.input.focus()
458      }
459    },
460
461    submitValue: function () {
462      if (this.open && this.selectedIndex >= 0 && this.visibleSuggestions[this.selectedIndex]) {
463        this.chooseSuggestion(this.visibleSuggestions[this.selectedIndex])
464        return
465      }
466
467      this.submitted = true
468      this.open = false
469      this.selectedIndex = -1
470
471      this.$emit('search', this.localValue)
472
473      this.resetSubmitted()
474    },
475
476    resetSubmitted: function () {
477      var self = this
478
479      window.setTimeout(function () {
480        self.submitted = false
481      }, 700)
482    },
483
484    handleGlobalShortcut: function (event) {
485      var key = String(event.key || '').toLowerCase()
486      var isShortcut = (event.metaKey || event.ctrlKey) && key === 'k'
487
488      if (!isShortcut || this.disabled) {
489        return
490      }
491
492      event.preventDefault()
493
494      if (this.$refs.input) {
495        this.$refs.input.focus()
496      }
497    },
498
499    optionId: function (index) {
500      return this.listId + '-option-' + index
501    },
502
503    optionSubtitle: function (item) {
504      var text = String(item).toLowerCase()
505
506      if (text.indexOf('create') !== -1 || text.indexOf('generate') !== -1) {
507        return 'Neue Aktion vorbereiten'
508      }
509
510      if (text.indexOf('search') !== -1 || text.indexOf('open') !== -1) {
511        return 'Direkt zur passenden Kategorie'
512      }
513
514      if (text.indexOf('review') !== -1 || text.indexOf('check') !== -1) {
515        return 'Qualität und Details prüfen'
516      }
517
518      if (text.indexOf('publish') !== -1 || text.indexOf('export') !== -1) {
519        return 'Komponente bereitstellen'
520      }
521
522      return 'Schneller Command-Vorschlag'
523    }
524  }
525}
526</script>
527
528<style scoped>
529.signal-field {
530  --bg: #05070b;
531  --panel: rgba(10, 14, 21, 0.94);
532  --panel-strong: rgba(13, 18, 28, 0.98);
533  --line: rgba(255, 255, 255, 0.12);
534  --line-strong: rgba(255, 255, 255, 0.2);
535  --text: #eef2f7;
536  --muted: #8792a2;
537  --dim: #586271;
538  --amber: #f2b45a;
539  --amber-deep: #aa6a24;
540  --green: #9ee66f;
541  --red: #fb7185;
542  --bluegray: #9fb3c8;
543
544  width: min(100%, 560px);
545  color: var(--text);
546  font-family:
547    Inter,
548    ui-sans-serif,
549    system-ui,
550    -apple-system,
551    BlinkMacSystemFont,
552    "Segoe UI",
553    sans-serif;
554}
555
556.signal-card {
557  position: relative;
558  padding: 10px;
559  border: 1px solid rgba(255, 255, 255, 0.09);
560  border-radius: 28px;
561  background:
562    radial-gradient(circle at 10% 0%, rgba(242, 180, 90, 0.16), transparent 34%),
563    radial-gradient(circle at 90% 100%, rgba(158, 230, 111, 0.1), transparent 34%),
564    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
565    var(--panel);
566  box-shadow:
567    0 34px 100px rgba(0, 0, 0, 0.48),
568    0 12px 28px rgba(0, 0, 0, 0.35),
569    inset 0 1px 0 rgba(255, 255, 255, 0.08);
570  overflow: hidden;
571  isolation: isolate;
572}
573
574.signal-grid {
575  position: absolute;
576  inset: 0;
577  z-index: -4;
578  background-image:
579    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
580    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
581  background-size: 24px 24px;
582  opacity: 0.6;
583  pointer-events: none;
584}
585
586.signal-orb {
587  position: absolute;
588  z-index: -3;
589  border-radius: 999px;
590  filter: blur(24px);
591  opacity: 0.56;
592  pointer-events: none;
593  transition:
594    transform 260ms ease,
595    opacity 260ms ease;
596}
597
598.orb-left {
599  width: 140px;
600  height: 140px;
601  left: -54px;
602  top: -48px;
603  background: rgba(242, 180, 90, 0.28);
604}
605
606.orb-right {
607  width: 180px;
608  height: 180px;
609  right: -78px;
610  bottom: -80px;
611  background: rgba(158, 230, 111, 0.16);
612}
613
614.signal-shell {
615  position: relative;
616  display: grid;
617  grid-template-columns: 42px minmax(0, 1fr) auto auto;
618  align-items: center;
619  gap: 12px;
620  min-height: 78px;
621  padding: 10px 12px;
622  border: 1px solid var(--line);
623  border-radius: 22px;
624  background:
625    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025)),
626    var(--panel-strong);
627  box-shadow:
628    inset 0 1px 0 rgba(255, 255, 255, 0.08),
629    inset 0 -1px 0 rgba(0, 0, 0, 0.32);
630  cursor: text;
631  overflow: hidden;
632  transition:
633    transform 220ms ease,
634    border-color 220ms ease,
635    box-shadow 220ms ease,
636    background 220ms ease;
637}
638
639.signal-shell::before {
640  content: "";
641  position: absolute;
642  inset: -1px;
643  z-index: -2;
644  border-radius: inherit;
645  background:
646    linear-gradient(
647      120deg,
648      rgba(242, 180, 90, 0.9),
649      rgba(158, 230, 111, 0.56),
650      rgba(159, 179, 200, 0.48),
651      rgba(242, 180, 90, 0.9)
652    );
653  opacity: 0;
654  transition: opacity 260ms ease;
655}
656
657.signal-shell::after {
658  content: "";
659  position: absolute;
660  inset: 1px;
661  z-index: -1;
662  border-radius: 21px;
663  background:
664    radial-gradient(circle at 18% 0%, rgba(242, 180, 90, 0.12), transparent 30%),
665    linear-gradient(180deg, rgba(13, 18, 28, 0.98), rgba(5, 7, 11, 0.98));
666}
667
668.signal-scan {
669  position: absolute;
670  left: -20%;
671  top: 0;
672  width: 14%;
673  height: 100%;
674  z-index: 1;
675  background:
676    linear-gradient(
677      90deg,
678      transparent,
679      rgba(242, 180, 90, 0.16),
680      rgba(158, 230, 111, 0.1),
681      transparent
682    );
683  transform: skewX(-16deg);
684  opacity: 0;
685  pointer-events: none;
686}
687
688.signal-icon {
689  position: relative;
690  z-index: 2;
691  display: grid;
692  place-items: center;
693  width: 42px;
694  height: 42px;
695  border: 1px solid rgba(255, 255, 255, 0.11);
696  border-radius: 16px;
697  background:
698    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
699  color: var(--amber);
700  box-shadow:
701    0 14px 30px rgba(0, 0, 0, 0.22),
702    inset 0 1px 0 rgba(255, 255, 255, 0.09);
703  transition:
704    transform 220ms ease,
705    border-color 220ms ease,
706    color 220ms ease;
707}
708
709.signal-icon svg,
710.signal-button svg,
711.option-arrow svg {
712  width: 21px;
713  height: 21px;
714  fill: none;
715  stroke: currentColor;
716  stroke-width: 1.9;
717  stroke-linecap: round;
718  stroke-linejoin: round;
719}
720
721.signal-core {
722  position: relative;
723  z-index: 2;
724  display: grid;
725  gap: 4px;
726  min-width: 0;
727}
728
729.signal-topline {
730  display: flex;
731  align-items: center;
732  justify-content: space-between;
733  gap: 8px;
734  min-width: 0;
735}
736
737.signal-label {
738  color: var(--muted);
739  font-size: 12px;
740  font-weight: 820;
741  letter-spacing: 0.08em;
742  text-transform: uppercase;
743}
744
745.signal-quality {
746  color: var(--dim);
747  font-size: 11px;
748  font-weight: 900;
749  letter-spacing: 0.08em;
750  text-transform: uppercase;
751}
752
753.signal-input {
754  width: 100%;
755  min-width: 0;
756  height: 34px;
757  border: 0;
758  outline: 0;
759  background: transparent;
760  color: var(--text);
761  font-size: 17px;
762  font-weight: 760;
763  letter-spacing: -0.02em;
764  caret-color: var(--amber);
765}
766
767.signal-input::placeholder {
768  color: rgba(135, 146, 162, 0.72);
769  font-weight: 560;
770}
771
772.signal-meta {
773  position: relative;
774  z-index: 2;
775  display: grid;
776  justify-items: end;
777  gap: 8px;
778}
779
780.signal-shortcut {
781  display: inline-flex;
782  align-items: center;
783  justify-content: center;
784  min-width: 44px;
785  height: 28px;
786  padding: 0 9px;
787  border: 1px solid rgba(255, 255, 255, 0.11);
788  border-radius: 10px;
789  background: rgba(255, 255, 255, 0.045);
790  color: rgba(238, 242, 247, 0.78);
791  font-size: 12px;
792  font-weight: 880;
793  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
794}
795
796.signal-bars {
797  display: inline-flex;
798  align-items: flex-end;
799  gap: 3px;
800  height: 16px;
801}
802
803.signal-bars i {
804  display: block;
805  width: 5px;
806  border-radius: 999px;
807  background: rgba(255, 255, 255, 0.13);
808  transition:
809    height 180ms ease,
810    background 180ms ease,
811    box-shadow 180ms ease;
812}
813
814.signal-bars i:nth-child(1) {
815  height: 6px;
816}
817
818.signal-bars i:nth-child(2) {
819  height: 9px;
820}
821
822.signal-bars i:nth-child(3) {
823  height: 12px;
824}
825
826.signal-bars i:nth-child(4) {
827  height: 15px;
828}
829
830.signal-bars i.is-active {
831  background: var(--amber);
832  box-shadow: 0 0 14px rgba(242, 180, 90, 0.32);
833}
834
835.signal-actions {
836  position: relative;
837  z-index: 3;
838  display: inline-flex;
839  align-items: center;
840  gap: 8px;
841}
842
843.signal-button {
844  display: grid;
845  place-items: center;
846  width: 38px;
847  height: 38px;
848  flex: 0 0 auto;
849  border: 1px solid rgba(255, 255, 255, 0.11);
850  border-radius: 14px;
851  background: rgba(255, 255, 255, 0.045);
852  color: var(--muted);
853  cursor: pointer;
854  transition:
855    transform 180ms ease,
856    color 180ms ease,
857    background 180ms ease,
858    border-color 180ms ease;
859}
860
861.signal-button:hover {
862  transform: translateY(-1px);
863  color: var(--text);
864  border-color: rgba(242, 180, 90, 0.24);
865  background: rgba(255, 255, 255, 0.075);
866}
867
868.signal-button:focus-visible {
869  outline: 3px solid rgba(242, 180, 90, 0.24);
870  outline-offset: 3px;
871}
872
873.signal-submit {
874  color: var(--amber);
875  background:
876    linear-gradient(180deg, rgba(242, 180, 90, 0.16), rgba(242, 180, 90, 0.055));
877}
878
879.signal-submit:disabled {
880  cursor: not-allowed;
881  opacity: 0.48;
882}
883
884.signal-loader {
885  width: 25px;
886  height: 25px;
887  border: 2px solid rgba(255, 255, 255, 0.13);
888  border-top-color: var(--amber);
889  border-right-color: var(--green);
890  border-radius: 999px;
891  animation: signal-spin 760ms linear infinite;
892}
893
894.signal-list {
895  display: grid;
896  gap: 8px;
897  margin-top: 10px;
898  padding: 8px;
899  border: 1px solid var(--line);
900  border-radius: 20px;
901  background:
902    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.022)),
903    rgba(7, 10, 16, 0.96);
904  box-shadow:
905    0 22px 56px rgba(0, 0, 0, 0.34),
906    inset 0 1px 0 rgba(255, 255, 255, 0.06);
907  animation: signal-list-in 170ms ease both;
908}
909
910.signal-option {
911  display: grid;
912  grid-template-columns: 38px minmax(0, 1fr) 34px;
913  align-items: center;
914  gap: 10px;
915  min-height: 58px;
916  padding: 9px 10px;
917  border: 1px solid transparent;
918  border-radius: 16px;
919  background: transparent;
920  color: var(--text);
921  text-align: left;
922  cursor: pointer;
923  transition:
924    transform 160ms ease,
925    background 160ms ease,
926    border-color 160ms ease;
927}
928
929.signal-option:hover,
930.signal-option.is-active {
931  transform: translateX(2px);
932  border-color: rgba(242, 180, 90, 0.18);
933  background: rgba(242, 180, 90, 0.075);
934}
935
936.option-index {
937  display: grid;
938  place-items: center;
939  width: 38px;
940  height: 38px;
941  border-radius: 13px;
942  background: rgba(255, 255, 255, 0.045);
943  color: var(--amber);
944  font-size: 12px;
945  font-weight: 900;
946  letter-spacing: -0.01em;
947}
948
949.option-content {
950  display: grid;
951  gap: 2px;
952  min-width: 0;
953}
954
955.option-content strong {
956  color: var(--text);
957  font-size: 14px;
958  font-weight: 820;
959  letter-spacing: -0.014em;
960}
961
962.option-content small {
963  color: var(--muted);
964  font-size: 12.5px;
965  font-weight: 560;
966}
967
968.option-arrow {
969  display: grid;
970  place-items: center;
971  color: var(--dim);
972  transition:
973    color 160ms ease,
974    transform 160ms ease;
975}
976
977.signal-option:hover .option-arrow,
978.signal-option.is-active .option-arrow {
979  color: var(--amber);
980  transform: translateX(2px);
981}
982
983.signal-footer {
984  display: flex;
985  align-items: flex-start;
986  justify-content: space-between;
987  gap: 12px;
988  margin: 10px 6px 0;
989}
990
991.signal-message {
992  display: flex;
993  align-items: center;
994  gap: 8px;
995  margin: 0;
996  color: var(--muted);
997  font-size: 13px;
998  line-height: 1.4;
999}
1000
1001.message-led {
1002  width: 7px;
1003  height: 7px;
1004  flex: 0 0 auto;
1005  border-radius: 999px;
1006  background: var(--amber);
1007  box-shadow: 0 0 14px rgba(242, 180, 90, 0.42);
1008}
1009
1010.signal-count {
1011  margin: 0;
1012  color: var(--dim);
1013  font-size: 12px;
1014  font-weight: 780;
1015  line-height: 1.4;
1016  white-space: nowrap;
1017}
1018
1019.signal-field.is-focused .signal-shell {
1020  transform: translateY(-1px);
1021  border-color: transparent;
1022  box-shadow:
1023    0 26px 78px rgba(0, 0, 0, 0.48),
1024    0 0 0 5px rgba(242, 180, 90, 0.08),
1025    inset 0 1px 0 rgba(255, 255, 255, 0.1);
1026}
1027
1028.signal-field.is-focused .signal-shell::before {
1029  opacity: 1;
1030}
1031
1032.signal-field.is-focused .signal-scan {
1033  opacity: 1;
1034  animation: signal-scan 1100ms ease;
1035}
1036
1037.signal-field.is-focused .signal-icon {
1038  color: var(--green);
1039  border-color: rgba(158, 230, 111, 0.22);
1040  transform: scale(1.04);
1041}
1042
1043.signal-field.is-focused .orb-left {
1044  opacity: 0.76;
1045  transform: translate(10px, 8px) scale(1.08);
1046}
1047
1048.signal-field.is-focused .orb-right {
1049  opacity: 0.72;
1050  transform: translate(-10px, -6px) scale(1.06);
1051}
1052
1053.signal-field.quality-strong .signal-bars i.is-active {
1054  background: var(--green);
1055  box-shadow: 0 0 14px rgba(158, 230, 111, 0.32);
1056}
1057
1058.signal-field.quality-strong .message-led {
1059  background: var(--green);
1060  box-shadow: 0 0 14px rgba(158, 230, 111, 0.42);
1061}
1062
1063.signal-field.quality-weak.has-value .signal-bars i.is-active {
1064  background: var(--red);
1065  box-shadow: 0 0 14px rgba(251, 113, 133, 0.3);
1066}
1067
1068.signal-field.is-submitted .signal-shell {
1069  animation: signal-confirm 700ms ease;
1070}
1071
1072.signal-field.is-disabled {
1073  opacity: 0.58;
1074}
1075
1076.signal-field.is-disabled .signal-shell,
1077.signal-field.is-disabled .signal-input {
1078  cursor: not-allowed;
1079}
1080
1081@keyframes signal-spin {
1082  to {
1083    transform: rotate(360deg);
1084  }
1085}
1086
1087@keyframes signal-scan {
1088  from {
1089    left: -20%;
1090  }
1091
1092  to {
1093    left: 120%;
1094  }
1095}
1096
1097@keyframes signal-list-in {
1098  from {
1099    opacity: 0;
1100    transform: translateY(-5px) scale(0.985);
1101  }
1102
1103  to {
1104    opacity: 1;
1105    transform: translateY(0) scale(1);
1106  }
1107}
1108
1109@keyframes signal-confirm {
1110  0% {
1111    box-shadow:
1112      0 26px 78px rgba(0, 0, 0, 0.48),
1113      0 0 0 5px rgba(242, 180, 90, 0.08),
1114      inset 0 1px 0 rgba(255, 255, 255, 0.1);
1115  }
1116
1117  45% {
1118    box-shadow:
1119      0 26px 78px rgba(0, 0, 0, 0.48),
1120      0 0 0 7px rgba(158, 230, 111, 0.13),
1121      inset 0 1px 0 rgba(255, 255, 255, 0.1);
1122  }
1123
1124  100% {
1125    box-shadow:
1126      0 26px 78px rgba(0, 0, 0, 0.48),
1127      0 0 0 5px rgba(242, 180, 90, 0.08),
1128      inset 0 1px 0 rgba(255, 255, 255, 0.1);
1129  }
1130}
1131
1132@media (max-width: 560px) {
1133  .signal-field {
1134    width: 100%;
1135  }
1136
1137  .signal-card {
1138    padding: 8px;
1139    border-radius: 26px;
1140  }
1141
1142  .signal-shell {
1143    grid-template-columns: 38px minmax(0, 1fr) auto;
1144    gap: 10px;
1145    min-height: 72px;
1146    padding: 9px 10px;
1147    border-radius: 20px;
1148  }
1149
1150  .signal-meta {
1151    display: none;
1152  }
1153
1154  .signal-icon {
1155    width: 38px;
1156    height: 38px;
1157    border-radius: 14px;
1158  }
1159
1160  .signal-input {
1161    font-size: 15.5px;
1162  }
1163
1164  .signal-label {
1165    font-size: 11px;
1166  }
1167
1168  .signal-actions {
1169    gap: 6px;
1170  }
1171
1172  .signal-button {
1173    width: 35px;
1174    height: 35px;
1175    border-radius: 13px;
1176  }
1177
1178  .signal-footer {
1179    flex-direction: column;
1180    gap: 5px;
1181  }
1182
1183  .signal-option {
1184    grid-template-columns: 34px minmax(0, 1fr) 28px;
1185  }
1186
1187  .option-index {
1188    width: 34px;
1189    height: 34px;
1190  }
1191}
1192
1193@media (max-width: 390px) {
1194  .signal-shell {
1195    grid-template-columns: 36px minmax(0, 1fr) auto;
1196    gap: 8px;
1197  }
1198
1199  .signal-icon {
1200    width: 36px;
1201    height: 36px;
1202  }
1203
1204  .signal-button {
1205    width: 33px;
1206    height: 33px;
1207  }
1208
1209  .signal-submit {
1210    display: none;
1211  }
1212}
1213
1214@media (prefers-reduced-motion: reduce) {
1215  .signal-orb,
1216  .signal-shell,
1217  .signal-shell::before,
1218  .signal-scan,
1219  .signal-icon,
1220  .signal-bars i,
1221  .signal-button,
1222  .signal-loader,
1223  .signal-list,
1224  .signal-option,
1225  .option-arrow {
1226    animation: none;
1227    transition: none;
1228  }
1229}
1230</style>