@morscherlab/mint-sdk 1.2.0-beta.8 → 1.2.0

package/src/components/SampleSelector.vue

@@ -25,6 +25,7 @@ import {
   removeSampleFromGroup as removeSampleFromSampleGroup,
   removeSampleGroups,
 } from './SampleSelector.groups'
+import DataStateInternal from './internal/DataStateInternal.vue'
 
 interface Props {
   samples?: string[]
@@ -35,6 +36,15 @@ interface Props {
   experimentId?: number
   designData?: Record<string, unknown>
   autoloadExperimentData?: boolean
+  /** Replace the selector body with a loading placeholder. */
+  loading?: boolean
+  /**
+   * Error message. When set, the selector body is replaced by an error state.
+   * `null`/`undefined` renders normally.
+   */
+  error?: string | null
+  /** Empty-state headline shown when there are no samples to select from. */
+  emptyMessage?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -45,6 +55,9 @@ const props = withDefaults(defineProps<Props>(), {
   experimentId: undefined,
   designData: undefined,
   autoloadExperimentData: true,
+  loading: false,
+  error: null,
+  emptyMessage: 'No samples available',
 })
 
 const emit = defineEmits<{
@@ -69,6 +82,8 @@ const internalGroups = computed({
 })
 
 const {
+  announcement: reorderAnnouncement,
+  announcerStyle,
   draggingSample,
   dragOverGroup,
   draggingGroup,
@@ -81,6 +96,7 @@ const {
   handleDragLeave,
   handleDrop,
   handleGroupDragStart,
+  handleGroupReorderKeydown,
   handleGroupDragEnd,
   handleGroupDragOver,
   handleGroupDragLeave,
@@ -227,6 +243,7 @@ const treeContext = computed<SampleGroupTreeContext>(() => ({
   onGroupDragOver: handleGroupDragOver,
   onGroupDragLeave: handleGroupDragLeave,
   onGroupDrop: handleGroupDrop,
+  onGroupReorderKeydown: handleGroupReorderKeydown,
 }))
 
 // New group
@@ -237,13 +254,36 @@ function addNewGroup() {
   newGroupName.value = ''
 }
 
+/** True while a loading, error or empty placeholder stands in for the body. */
+const isPlaceholderState = computed(() =>
+  props.loading || Boolean(props.error) || resolvedSamples.value.length === 0,
+)
+
 defineExpose({ handleSmartGroupApply })
 </script>
 
 <template>
   <div class="mint-sample-selector">
+    <div v-if="error" class="mint-sample-selector__state">
+      <slot name="error" :error="error">
+        <DataStateInternal state="error" size="sm" :title="error" />
+      </slot>
+    </div>
+
+    <div v-else-if="loading" class="mint-sample-selector__state">
+      <slot name="loading">
+        <DataStateInternal state="loading" size="sm" loading-label="Loading samples" />
+      </slot>
+    </div>
+
+    <div v-else-if="resolvedSamples.length === 0" class="mint-sample-selector__state">
+      <slot name="empty">
+        <DataStateInternal state="empty" size="sm" :title="emptyMessage" />
+      </slot>
+    </div>
+
     <!-- Select All Row -->
-    <label class="mint-sample-selector__select-all">
+    <label v-if="!isPlaceholderState" class="mint-sample-selector__select-all">
       <input
         type="checkbox"
         :checked="isAllSelected"
@@ -255,7 +295,7 @@ defineExpose({ handleSmartGroupApply })
     </label>
 
     <!-- Action Buttons Row -->
-    <div v-if="enableGrouping" class="mint-sample-selector__actions">
+    <div v-if="!isPlaceholderState && enableGrouping" class="mint-sample-selector__actions">
       <div class="mint-sample-selector__actions-row">
         <!-- Grouping Button -->
         <BaseButton
@@ -291,7 +331,7 @@ defineExpose({ handleSmartGroupApply })
     </div>
 
     <!-- Grouped View -->
-    <div v-if="groupingEnabled" class="mint-sample-selector__grouped">
+    <div v-if="!isPlaceholderState && groupingEnabled" class="mint-sample-selector__grouped">
       <!-- Groups Header -->
       <div class="mint-sample-selector__groups-header">
         <span class="mint-sample-selector__groups-title">Groups ({{ internalGroups.length }})</span>
@@ -320,7 +360,7 @@ defineExpose({ handleSmartGroupApply })
         />
 
         <!-- Empty state -->
-        <div v-if="internalGroups.length === 0" class="mint-sample-selector__empty">
+        <div v-if="internalGroups.length === 0" class="mint-sample-selector__hint">
           Click Smart to auto-group samples
         </div>
       </div>
@@ -394,7 +434,7 @@ defineExpose({ handleSmartGroupApply })
     </div>
 
     <!-- Flat View (when no groups) -->
-    <div v-if="!groupingEnabled" class="mint-sample-selector__flat">
+    <div v-if="!isPlaceholderState && !groupingEnabled" class="mint-sample-selector__flat">
       <!-- Search -->
       <div class="mint-sample-selector__search">
         <svg class="mint-sample-selector__search-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -427,7 +467,7 @@ defineExpose({ handleSmartGroupApply })
           <span class="mint-sample-selector__flat-name">{{ sample }}</span>
         </div>
 
-        <div v-if="filteredSamples.length === 0 && searchQuery.trim()" class="mint-sample-selector__empty">
+        <div v-if="filteredSamples.length === 0 && searchQuery.trim()" class="mint-sample-selector__hint">
           No samples match "{{ searchQuery }}"
         </div>
       </div>
@@ -443,9 +483,8 @@ defineExpose({ handleSmartGroupApply })
       :design-data="resolvedDesignData"
       @apply="handleSmartGroupApply"
     />
+
+    <!-- Group reorder announcements for screen readers -->
+    <div role="status" aria-live="polite" :style="announcerStyle">{{ reorderAnnouncement }}</div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/sample-selector.css';
-</style>

package/src/components/SampleSelectorGroupNode.vue

@@ -54,6 +54,18 @@ function onHeaderDrop(event: DragEvent) {
   if (dragKind.value === null) return
   props.ctx.onGroupDrop(dragName.value, dragKind.value, event)
 }
+
+/** Enter/Space expand the node; Alt+ArrowUp/Down reorder it among its siblings. */
+function onHeaderKeydown(event: KeyboardEvent) {
+  if (event.altKey) {
+    if (dragKind.value === null) return
+    props.ctx.onGroupReorderKeydown(dragName.value, dragKind.value, event)
+    return
+  }
+  if (event.key !== 'Enter' && event.key !== ' ') return
+  event.preventDefault()
+  props.ctx.toggleExpanded(props.node.key)
+}
 </script>
 
 <template>
@@ -81,7 +93,14 @@ function onHeaderDrop(event: DragEvent) {
         reorderEdge === 'after' ? 'mint-sample-selector__header--drag-over-after' : '',
       ]"
       :draggable="dragKind !== null"
+      role="button"
+      tabindex="0"
+      :aria-expanded="expanded"
+      :aria-label="dragKind !== null
+        ? `${node.label}. Press Alt with the up or down arrow keys to reorder.`
+        : node.label"
       @click="ctx.toggleExpanded(node.key)"
+      @keydown="onHeaderKeydown"
       @dragstart="onHeaderDragStart"
       @dragend="ctx.onGroupDragEnd"
       @dragover="onHeaderDragOver"

package/src/components/ScheduleCalendar.story.vue

@@ -86,6 +86,8 @@ const mockBlockedSlots: ScheduleBlockedSlot[] = [
 
 function initState() {
   return {
+    loading: false,
+    error: '',
     modelValue: today,
     view: 'week' as const,
     events: mockEvents,
@@ -106,6 +108,8 @@ function initState() {
       <template #default="{ state }">
         <div style="padding: 1rem; height: 700px;">
           <ScheduleCalendar
+            :loading="state.loading"
+            :error="state.error || null"
             v-model="state.modelValue"
             :view="state.view"
             :events="state.events"
@@ -123,6 +127,8 @@ function initState() {
         </div>
       </template>
       <template #controls="{ state }">
+        <HstCheckbox v-model="state.loading" title="Loading" />
+        <HstText v-model="state.error" title="Error Message" />
         <HstSelect
           v-model="state.view"
           title="View"

package/src/components/ScheduleCalendar.vue

@@ -7,11 +7,13 @@ import type {
   ScheduleBlockedSlot,
 } from '../types/components'
 import { useScheduleDrag } from '../composables/useScheduleDrag'
+import { useReorderAnnouncer } from '../composables/useListReorder'
 import {
   SCHEDULE_SLOT_HEIGHT,
   parseScheduleModelDate,
   useScheduleCalendarLayout,
 } from '../composables/useScheduleCalendarLayout'
+import DataStateInternal from './internal/DataStateInternal.vue'
 
 interface Props {
   modelValue?: Date | string
@@ -28,6 +30,19 @@ interface Props {
   showNavigation?: boolean
   statusColors?: Record<string, string>
   locale?: string
+  /** Replace the calendar grid with a loading placeholder. */
+  loading?: boolean
+  /**
+   * Error message. When set, the calendar grid is replaced by an error state.
+   * `null`/`undefined` renders normally.
+   */
+  error?: string | null
+  /**
+   * Opt-in empty-state headline. An empty grid is meaningful on a calendar, so
+   * the empty state only replaces it when this message is supplied and there
+   * are no events.
+   */
+  emptyMessage?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -43,6 +58,8 @@ const props = withDefaults(defineProps<Props>(), {
   showViewToggle: true,
   showNavigation: true,
   locale: 'en-US',
+  loading: false,
+  error: null,
 })
 
 const emit = defineEmits<{
@@ -57,6 +74,11 @@ const emit = defineEmits<{
 
 const SLOT_HEIGHT = SCHEDULE_SLOT_HEIGHT
 const currentView = ref<ScheduleView>(props.view)
+
+/** Empty state is opt-in: it needs an `emptyMessage` and an event-free range. */
+const showEmptyState = computed(() =>
+  Boolean(props.emptyMessage) && props.events.length === 0,
+)
 const currentDate = ref<Date>(parseScheduleModelDate(props.modelValue))
 const nowTimer = ref<ReturnType<typeof setInterval>>()
 const now = ref(new Date())
@@ -76,7 +98,9 @@ const weekStartsOnRef = computed(() => props.weekStartsOn)
 const localeRef = computed(() => props.locale)
 const showNowIndicatorRef = computed(() => props.showNowIndicator)
 
-const { isDragging, ghost, startCreate, startMove, startResize } = useScheduleDrag({
+const { announcement, announce, announcerStyle } = useReorderAnnouncer()
+
+const { isDragging, ghost, startCreate, startMove, startResize, nudgeEvent } = useScheduleDrag({
   slotDuration: slotDurationRef,
   dayStartHour: dayStartRef,
   dayEndHour: dayEndRef,
@@ -180,6 +204,35 @@ function onResizePointerDown(event: ScheduleEvent, edge: 'top' | 'bottom', dayIn
   startResize(event, edge, e.clientY, dayIndex)
 }
 
+/**
+ * Keyboard alternative to dragging an event: Alt+ArrowUp/Down move it by one
+ * slot, Shift+Alt+ArrowUp/Down shorten or lengthen it, Enter/Space open it.
+ */
+function onEventKeydown(event: ScheduleEvent, e: KeyboardEvent) {
+  if (e.key === 'Enter' || e.key === ' ') {
+    e.preventDefault()
+    emit('event-click', event)
+    return
+  }
+  if (!e.altKey) return
+  const direction = e.key === 'ArrowUp' ? -1 : e.key === 'ArrowDown' ? 1 : 0
+  if (direction === 0) return
+
+  e.preventDefault()
+  const mode = e.shiftKey ? 'resize' : 'move'
+  const applied = nudgeEvent(event, direction, mode)
+  announce(applied
+    ? `${event.title} ${mode === 'move' ? 'moved' : 'resized'} to ${formatEventTime(event)}.`
+    : `${event.title} cannot move further.`)
+}
+
+/** Instructions announced with each event. */
+function eventLabel(event: ScheduleEvent): string {
+  const base = `${event.title}, ${formatEventTime(event)}`
+  if (props.readonly || event.draggable === false) return base
+  return `${base}. Press Alt with the up or down arrow keys to reschedule it.`
+}
+
 function onMonthDayClick(date: Date) {
   currentDate.value = date
   emit('update:modelValue', date)
@@ -254,8 +307,27 @@ onUnmounted(() => {
       </div>
     </div>
 
+    <!-- Loading / error / empty placeholders replace the grid -->
+    <div v-if="error" class="mint-schedule__state">
+      <slot name="error" :error="error">
+        <DataStateInternal state="error" :title="error" />
+      </slot>
+    </div>
+
+    <div v-else-if="loading" class="mint-schedule__state">
+      <slot name="loading">
+        <DataStateInternal state="loading" loading-label="Loading schedule" />
+      </slot>
+    </div>
+
+    <div v-else-if="showEmptyState" class="mint-schedule__state">
+      <slot name="empty">
+        <DataStateInternal state="empty" :title="emptyMessage" />
+      </slot>
+    </div>
+
     <!-- Day / Week View -->
-    <template v-if="currentView === 'day' || currentView === 'week'">
+    <template v-else-if="currentView === 'day' || currentView === 'week'">
       <!-- Day headers -->
       <div v-if="currentView === 'week'" class="mint-schedule__day-headers">
         <div class="mint-schedule__day-header-gutter" />
@@ -312,7 +384,11 @@ onUnmounted(() => {
               :key="event.id"
               :class="['mint-schedule__event', getStatusClass(event.status)]"
               :style="getEventStyle(event, day) || undefined"
+              role="button"
+              tabindex="0"
+              :aria-label="eventLabel(event)"
               @click="onEventClick(event, $event)"
+              @keydown="onEventKeydown(event, $event)"
               @pointerdown="onEventPointerDown(event, dayIdx, $event)"
             >
               <slot name="event" :event="event">
@@ -364,7 +440,7 @@ onUnmounted(() => {
     </template>
 
     <!-- Month View -->
-    <template v-if="currentView === 'month'">
+    <template v-else-if="currentView === 'month'">
       <div class="mint-schedule__month-grid">
         <!-- Weekday headers -->
         <div
@@ -406,9 +482,8 @@ onUnmounted(() => {
         </div>
       </div>
     </template>
+
+    <!-- Reschedule announcements for screen readers -->
+    <div role="status" aria-live="polite" :style="announcerStyle">{{ announcement }}</div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/schedule-calendar.css';
-</style>

package/src/components/ScientificNumber.vue

@@ -191,7 +191,3 @@ async function copyToClipboard() {
     </button>
   </span>
 </template>
-
-<style>
-@import '../styles/components/scientific-number.css';
-</style>

package/src/components/SectionCard.vue

@@ -92,7 +92,3 @@ const cardClasses = computed(() => [
     </div>
   </section>
 </template>
-
-<style>
-@import '../styles/components/section-card.css';
-</style>

package/src/components/SegmentedControl.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-/** Renders a segmented button group for single-option selection, with simple or solid variants. */
-import { computed } from 'vue'
+/** Renders a segmented button group for single-option selection, defaulting to the card variant. */
+import { computed, type ComponentPublicInstance } from 'vue'
 import type { SegmentedOption, SegmentedOptionInput, SegmentedControlVariant, SegmentedControlSize } from '../types'
 import { normalizeOptionInput } from '../utils/options'
+import { useRovingFocus } from '../composables/useRovingFocus'
 
 interface Props {
   modelValue: string | number
@@ -15,7 +16,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  variant: 'simple',
+  variant: 'card',
   size: 'md',
   fullWidth: false,
   disabled: false,
@@ -42,11 +43,55 @@ function handleSelect(option: SegmentedOption) {
   emit('update:modelValue', option.value)
 }
 
+// Roving tabindex over the radio group: only the checked option is tabbable and
+// Left/Right (plus Home/End) move between the selectable options, matching BaseTabs.
+const optionRefs = new Map<string, HTMLElement>()
+
+function optionId(option: SegmentedOption): string {
+  return String(option.value)
+}
+
+function setOptionRef(id: string, el: Element | ComponentPublicInstance | null) {
+  if (el instanceof HTMLElement) {
+    optionRefs.set(id, el)
+  } else {
+    optionRefs.delete(id)
+  }
+}
+
+const selectableOptions = computed(() =>
+  normalizedOptions.value.filter(option => !isSelectionDisabled(option)),
+)
+
+/** The one option carrying `tabindex="0"`: the checked one, else the first selectable. */
+const tabbableId = computed(() => {
+  const checked = selectableOptions.value.find(option => option.value === props.modelValue)
+  const target = checked ?? selectableOptions.value[0]
+  return target ? optionId(target) : ''
+})
+
+function isTabbable(option: SegmentedOption): boolean {
+  return optionId(option) === tabbableId.value
+}
+
+const { handleKeydown: handleArrowKeydown } = useRovingFocus({
+  ids: () => selectableOptions.value.map(optionId),
+  activeId: () => tabbableId.value,
+  activate: (id) => {
+    const option = selectableOptions.value.find(candidate => optionId(candidate) === id)
+    if (option) handleSelect(option)
+  },
+  getElement: (id) => optionRefs.get(id),
+  orientation: 'horizontal',
+})
+
 function handleKeydown(event: KeyboardEvent, option: SegmentedOption) {
   if (event.key === 'Enter' || event.key === ' ') {
     event.preventDefault()
     handleSelect(option)
+    return
   }
+  handleArrowKeydown(event)
 }
 </script>
 
@@ -64,9 +109,11 @@ function handleKeydown(event: KeyboardEvent, option: SegmentedOption) {
     <button
       v-for="option in normalizedOptions"
       :key="String(option.value)"
+      :ref="(el) => setOptionRef(String(option.value), el)"
       type="button"
       role="radio"
       :aria-checked="modelValue === option.value"
+      :tabindex="isTabbable(option) ? 0 : -1"
       :disabled="isSelectionDisabled(option)"
       :class="[
         'mint-segmented-control__option',
@@ -88,7 +135,3 @@ function handleKeydown(event: KeyboardEvent, option: SegmentedOption) {
     </button>
   </div>
 </template>
-
-<style>
-@import '../styles/components/segmented-control.css';
-</style>

package/src/components/SequenceInput.vue

@@ -203,7 +203,3 @@ function getBaseClass(char: string): string {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/sequence-input.css';
-</style>

package/src/components/SequenceProgressBar.story.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import SequenceProgressBar from './SequenceProgressBar.vue'
+import type { SequenceProgress } from '../types'
+
+const running: SequenceProgress = {
+  sequence_name: 'HILIC-neg-2026-09-05',
+  current_sample: 37,
+  total_samples: 96,
+  elapsed_seconds: 4_260,
+  estimated_remaining_seconds: 6_780,
+  avg_sample_seconds: 115,
+  current_sample_name: 'PLASMA_QC_04',
+  current_method: 'HILIC_neg_12min',
+}
+
+const almostDone: SequenceProgress = {
+  ...running,
+  current_sample: 94,
+  estimated_remaining_seconds: 230,
+}
+
+const finished: SequenceProgress = {
+  ...running,
+  current_sample: 96,
+  estimated_remaining_seconds: 0,
+}
+
+const justStarted: SequenceProgress = {
+  sequence_name: 'RP-pos-batch-7',
+  current_sample: 1,
+  total_samples: 384,
+}
+
+function initState() {
+  return {
+    current: 37,
+    total: 96,
+    remaining: 6780,
+    compact: false,
+    showEta: true,
+    showRemaining: true,
+    label: 'samples',
+  }
+}
+</script>
+
+<template>
+  <Story title="Workflow/SequenceProgressBar">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 600px;">
+          <SequenceProgressBar
+            :progress="{
+              sequence_name: 'HILIC-neg-2026-09-05',
+              current_sample: state.current,
+              total_samples: state.total,
+              estimated_remaining_seconds: state.remaining,
+            }"
+            :compact="state.compact"
+            :label="state.label"
+            :show-eta="state.showEta"
+            :show-remaining="state.showRemaining"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstNumber v-model="state.current" title="Current sample" />
+        <HstNumber v-model="state.total" title="Total samples" />
+        <HstNumber v-model="state.remaining" title="Remaining (s)" />
+        <HstText v-model="state.label" title="Unit label" />
+        <HstCheckbox v-model="state.compact" title="Compact" />
+        <HstCheckbox v-model="state.showEta" title="Show ETA" />
+        <HstCheckbox v-model="state.showRemaining" title="Show remaining" />
+      </template>
+    </Variant>
+
+    <Variant title="Mid-run">
+      <div style="padding: 2rem; max-width: 600px;">
+        <SequenceProgressBar :progress="running" />
+      </div>
+    </Variant>
+
+    <Variant title="Compact (no footer)">
+      <!-- Compact drops the remaining/ETA row for dense instrument tables. -->
+      <div style="padding: 2rem; max-width: 600px;">
+        <SequenceProgressBar :progress="running" compact />
+      </div>
+    </Variant>
+
+    <Variant title="Nearly finished">
+      <div style="padding: 2rem; max-width: 600px;">
+        <SequenceProgressBar :progress="almostDone" />
+      </div>
+    </Variant>
+
+    <Variant title="Complete">
+      <div style="padding: 2rem; max-width: 600px;">
+        <SequenceProgressBar :progress="finished" />
+      </div>
+    </Variant>
+
+    <Variant title="Queued — no timing yet">
+      <!-- Without timing fields the footer collapses on its own. -->
+      <div style="padding: 2rem; max-width: 600px;">
+        <SequenceProgressBar :progress="justStarted" label="injections" />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/SequenceProgressBar.vue

@@ -65,7 +65,3 @@ const hasFooter = computed(() => {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/sequence-progress-bar.css';
-</style>

package/src/components/SettingsModal.vue

@@ -393,7 +393,3 @@ function canShowForCurrentUser(item: AccessControlled): boolean {
     </template>
   </BaseModal>
 </template>
-
-<style>
-@import '../styles/components/settings-modal.css';
-</style>

package/src/components/Skeleton.vue

@@ -68,7 +68,3 @@ const classes = computed(() => {
 <template>
   <div :class="classes" :style="style" />
 </template>
-
-<style>
-@import '../styles/components/skeleton.css';
-</style>

package/src/components/SmartGroupFieldRecipe.vue

@@ -144,8 +144,13 @@ function onDrop(event: DragEvent) {
 // CSV action menu — reuses the SDK's dropdown state (outside-click / Escape
 // close) but renders a compact action menu in the .fr-* styling, since the
 // items are actions (upload / download), not a persistent value selection.
-const { isOpen: csvMenuOpen, rootRef: csvMenuRoot, close: closeCsvMenu, toggle: toggleCsvMenu } =
-  useDropdownState()
+const {
+  isOpen: csvMenuOpen,
+  rootRef: csvMenuRoot,
+  triggerRef: csvMenuTrigger,
+  close: closeCsvMenu,
+  toggle: toggleCsvMenu,
+} = useDropdownState()
 
 function chooseUpload() {
   closeCsvMenu()
@@ -294,6 +299,7 @@ function onApply() {
       <div class="sg-head__spacer" />
       <div ref="csvMenuRoot" class="fr-csv">
         <button
+          ref="csvMenuTrigger"
           type="button"
           class="fr-upload"
           aria-haspopup="menu"
@@ -493,7 +499,3 @@ function onApply() {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/smart-group.css';
-</style>

package/src/components/SmartGroupManual.vue

@@ -392,7 +392,3 @@ function onDone() {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/smart-group.css';
-</style>

package/src/components/StatusIndicator.vue

@@ -34,7 +34,3 @@ const dotStyle = computed(() =>
     <span v-if="label" class="mint-status__label">{{ label }}</span>
   </span>
 </template>
-
-<style>
-@import '../styles/components/status-indicator.css';
-</style>