From cff504a0075f6d43c0133e73250c581e6b3a4265 Mon Sep 17 00:00:00 2001
From: Italo Israel Baeza Cabrera <DarkGhostHunter@Gmail.com>
Date: Thu, 16 Nov 2023 01:11:07 -0300
Subject: [PATCH 1/7] feat(Ladder): new component

---
 .../examples/LadderExampleStepObjects.vue     |  13 +
 docs/content/2.elements/12.ladder.md          | 149 +++++++++++
 src/runtime/components/elements/Ladder.vue    | 236 ++++++++++++++++++
 src/runtime/types/index.d.ts                  |   1 +
 src/runtime/types/ladder.d.ts                 |  19 ++
 src/runtime/ui.config.ts                      |  71 ++++++
 6 files changed, 489 insertions(+)
 create mode 100644 docs/components/content/examples/LadderExampleStepObjects.vue
 create mode 100644 docs/content/2.elements/12.ladder.md
 create mode 100644 src/runtime/components/elements/Ladder.vue
 create mode 100644 src/runtime/types/ladder.d.ts

diff --git a/docs/components/content/examples/LadderExampleStepObjects.vue b/docs/components/content/examples/LadderExampleStepObjects.vue
new file mode 100644
index 0000000000..d036e0cdba
--- /dev/null
+++ b/docs/components/content/examples/LadderExampleStepObjects.vue
@@ -0,0 +1,13 @@
+<template>
+  <ULadder :steps="steps" />
+</template>
+
+<script setup>
+const steps = [
+  { label: 'Address', icon: 'i-heroicons-home' },
+  { label: 'Shipping', icon: 'i-heroicons-truck' },
+  { label: 'Trade-in', icon: 'i-heroicons-arrow-path', disabled: true },
+  { label: 'Payment', icon: 'i-heroicons-banknotes', click: () => alert('You clicked Payment!')},
+  { label: 'Checkout', icon: 'i-heroicons-check' }
+]
+</script>
diff --git a/docs/content/2.elements/12.ladder.md b/docs/content/2.elements/12.ladder.md
new file mode 100644
index 0000000000..73b797e221
--- /dev/null
+++ b/docs/content/2.elements/12.ladder.md
@@ -0,0 +1,149 @@
+---
+description: 'Display a progress as a list of ordered steps.'
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/data/Table.vue
+---
+
+## Usage
+
+Pass the step index as `v-model`, an array of steps as strings to the `steps` prop of the Ladder component.
+
+::component-card
+---
+baseProps:
+  steps:
+    - Address
+    - Shipping
+    - Trade-in
+    - Payment
+    - Checkout
+props:
+  modelValue: 3
+options:
+  - name: modelValue
+    restriction: only
+    values:
+      - 0
+      - 1
+      - 2
+      - 3
+      - 4
+---
+::
+
+You may also pass an array of objects with following properties:
+
+- `label` - The label of the step.
+- `icon` - The icon of the step.
+- `disabled` - Whether the step is disabled.
+- `click` - The click handler of the step.
+- `to` - Execute navigation to the set destination.
+
+:component-example{component="ladder-example-step-objects"}
+
+::callout{icon="i-heroicons-exclamation-triangle"}
+The `click` handler will take precedence over the navigation handler. If `click` is set to `false`, the navigation handler is disabled, even if `to` is declared.
+::
+
+## Click 
+
+Steps don't change when the user clicks on it. To enable this behaviour, you can either set the `click` prop to `true`, or on each step setting `click` to `true`.
+
+::component-card
+---
+baseProps:
+  modelValue: 0
+  steps:
+    - Address
+    - Shipping
+    - Trade-in
+    - Payment
+    - Checkout
+props:
+  click: true
+---
+::
+
+## Separators
+
+The steps are separated with horizontal lines that can be disabled by setting `separators` to `false`. 
+
+::component-card
+---
+baseProps:
+  steps:
+    - Address
+    - Shipping
+    - Trade-in
+    - Payment
+    - Checkout
+props:
+  separators: false
+---
+::
+
+## Style
+
+Steps can be either active or inactive. You may change the color of each state using the corresponding prop:
+
+- `color` for an active step 
+- `inactiveColor` for an inactive step
+
+Besides all the colors from the `ui.colors` object, you can also use the `gray`.
+
+::component-card
+---
+baseProps:
+  steps:
+    - Address
+    - Shipping
+    - Trade-in
+    - Payment
+    - Checkout
+props:
+  color: red
+  inactiveColor: blue
+---
+::
+
+::callout{icon="i-heroicons-exclamation-triangle"}
+The inactive color also affects the separator colors. 
+::
+
+## Size
+
+Use the `size` prop to change the size of the ladder.
+
+::component-card
+---
+baseProps:
+  steps:
+    - Address
+    - Shipping
+    - Trade-in
+    - Payment
+    - Checkout
+props:
+  size: md
+options:
+  - name: size
+    restriction: included
+    values:
+      - 2xs
+      - xs
+      - sm
+      - md
+      - lg
+      - xl
+---
+::
+
+## Props
+
+:component-props
+
+## Config
+
+:component-preset
diff --git a/src/runtime/components/elements/Ladder.vue b/src/runtime/components/elements/Ladder.vue
new file mode 100644
index 0000000000..4cbe17f8ee
--- /dev/null
+++ b/src/runtime/components/elements/Ladder.vue
@@ -0,0 +1,236 @@
+<template>
+  <ol :class="ladderClass" v-bind="attrs">
+    <template v-for="(step, key) in computedSteps" :key="key">
+      <li :class="ladderStepContainerClass">
+        <div :class="ladderStepClass">
+          <div :class="ladderStepIndicatorClass">
+            <div v-if="hasSeparators" :class="ladderStepSeparatorsWrapperClass">
+              <div :class="[ladderStepSeparatorClass, key < 1 ? 'invisible' : '']" />
+              <div :class="[ladderStepSeparatorClass, key > computedSteps.length - 2 ? 'invisible' : '']" />
+            </div>
+            <div :class="ladderStepIconWrapperClass">
+              <component
+                :is="step.step.click || step.step.to ? 'UButton' : 'div'"
+                :class="[ladderStepIconClass, step.isActive ? ladderStepActiveIconClass : ladderStepInactiveIconClass]"
+                type="button"
+                variant="ghost"
+                v-bind="omit(step.step, ['label', 'click', 'icon'])"
+                @click="step.step.click"
+              >
+                <UIcon v-if="step.step.icon" :name="step.step.icon" />
+                <div v-else>
+                  {{ key + 1 }}
+                </div>
+              </component>
+            </div>
+          </div>
+
+          <div :class="[ladderStepLabelClass, step.isActive ? ladderStepActiveLabelClass : ladderStepInactiveLabelClass]">
+            {{ step.step.label }}
+          </div>
+        </div>
+      </li>
+    </template>
+  </ol>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, toRef } from 'vue'
+import type { ComputedRef, PropType } from 'vue'
+import { twJoin } from 'tailwind-merge'
+import { useUI } from '../../composables/useUI'
+import { mergeConfig, omit } from '../../utils'
+import { Strategy, LadderSize, LadderStep, LadderStepWrapper, LadderStepColor } from '../../types'
+// @ts-expect-error
+import appConfig from '#build/app.config'
+import { ladder } from '#ui/ui.config'
+import UButton from './Link.vue'
+
+const config = mergeConfig<typeof ladder>(appConfig.ui.strategy, appConfig.ui.ladder, ladder)
+
+export default defineComponent({
+  components: {
+    UButton
+  },
+  inheritAttrs: false,
+  props: {
+    modelValue: {
+      type: Number,
+      default: 0
+    },
+    steps: {
+      type: Array as PropType<String[] | LadderStep[]>,
+      default: () => []
+    },
+    separators: {
+      type: Boolean,
+      default: true
+    },
+    color: {
+      type: String as PropType<LadderStepColor>,
+      default: () => config.default.color,
+      validator (value: string) {
+        return [...appConfig.ui.colors, 'gray'].includes(value)
+      }
+    },
+    inactiveColor: {
+      type: String as PropType<LadderStepColor>,
+      default: () => config.default.inactiveColor,
+      validator (value: string) {
+        return [...appConfig.ui.colors, 'gray'].includes(value)
+      }
+    },
+    click: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String as PropType<LadderSize>,
+      default: () => config.default.size,
+      validator (value: string) {
+        return Object.keys(config.label.size).includes(value)
+      }
+    },
+    class: {
+      type: [String, Object, Array] as PropType<any>,
+      default: undefined
+    },
+    ui: {
+      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      default: undefined
+    }
+  },
+  emits: ['update:modelValue'],
+  setup (props, { emit }) {
+    const { ui, attrs } = useUI('ladder', toRef(props, 'ui'), config, toRef(props, 'class'))
+
+    const hasSeparators = computed(() => props.separators)
+
+    const ladderClass = computed(() => {
+      return twJoin(
+        ui.value.base
+      )
+    })
+
+    const ladderStepContainerClass = computed(() => {
+      return twJoin(
+        ui.value.container
+      )
+    })
+
+    const ladderStepClass = computed(() => {
+      return twJoin(
+        ui.value.step
+      )
+    })
+
+    const ladderStepIndicatorClass = computed(() => {
+      return twJoin(
+        ui.value.indicator
+      )
+    })
+
+    const ladderStepSeparatorsWrapperClass = computed(() => {
+      return twJoin(
+        ui.value.separator.wrapper
+      )
+    })
+
+    const ladderStepSeparatorClass = computed(() => {
+      return twJoin(
+        ui.value.separator.base,
+        ui.value.separator.color.replaceAll('{color}', props.inactiveColor),
+        ui.value.separator.size[props.size]
+      )
+    })
+
+    const ladderStepIconWrapperClass = computed(() => {
+      return twJoin(
+        ui.value.icon.wrapper
+      )
+    })
+
+    const ladderStepIconClass = computed(() => {
+      return twJoin(
+        ui.value.icon.base,
+        ui.value.icon.rounded,
+        ui.value.icon.shadow,
+        ui.value.icon.size[props.size]
+      )
+    })
+
+    const ladderStepActiveIconClass = computed(() => {
+      return twJoin(
+        ui.value.icon.active.background.replaceAll('{color}', props.color),
+        ui.value.icon.active.ring.replaceAll('{color}', props.color),
+        ui.value.icon.active.color.replaceAll('{color}', props.color),
+        ui.value.icon.active.shadow
+      )
+    })
+
+    const ladderStepInactiveIconClass = computed(() => {
+      return twJoin(
+        ui.value.icon.inactive.background.replaceAll('{color}', props.inactiveColor),
+        ui.value.icon.inactive.ring.replaceAll('{color}', props.inactiveColor),
+        ui.value.icon.inactive.color.replaceAll('{color}', props.inactiveColor),
+        ui.value.icon.inactive.shadow
+      )
+    })
+
+    const ladderStepLabelClass = computed(() => {
+      return twJoin(
+        ui.value.label.base,
+        ui.value.label.size[props.size]
+      )
+    })
+
+    const ladderStepActiveLabelClass = computed(() => {
+      return twJoin(
+        ui.value.label.active.replaceAll('{color}', props.color)
+      )
+    })
+
+    const ladderStepInactiveLabelClass = computed(() => {
+      return twJoin(
+        ui.value.label.inactive.replaceAll('{color}', props.inactiveColor)
+      )
+    })
+
+    const computedSteps: ComputedRef<LadderStepWrapper[]> = computed(() => {
+      return props.steps.map((receivedStep, index: number) => {
+        const step = typeof receivedStep === 'string' ? { label: receivedStep } : receivedStep
+
+        const isActive = index === props.modelValue
+
+        if (isActive) {
+          step.click = false
+        } else if (props.click || step.click === true) {
+          step.click = () => emit('update:modelValue', index)
+        }
+
+        return { step, isActive }
+      })
+    })
+
+    return {
+      attrs,
+      hasSeparators,
+      ladderClass,
+      ladderStepContainerClass,
+      ladderStepClass,
+      ladderStepIndicatorClass,
+      ladderStepSeparatorsWrapperClass,
+      ladderStepSeparatorClass,
+      ladderStepIconWrapperClass,
+      ladderStepIconClass,
+      ladderStepActiveIconClass,
+      ladderStepInactiveIconClass,
+      ladderStepLabelClass,
+      ladderStepActiveLabelClass,
+      ladderStepInactiveLabelClass,
+      computedSteps,
+      omit
+    }
+  }
+})
+</script>
diff --git a/src/runtime/types/index.d.ts b/src/runtime/types/index.d.ts
index e274f25e92..3d9ef82487 100644
--- a/src/runtime/types/index.d.ts
+++ b/src/runtime/types/index.d.ts
@@ -7,6 +7,7 @@ export * from './clipboard'
 export * from './command-palette'
 export * from './dropdown'
 export * from './form'
+export * from './ladder'
 export * from './link'
 export * from './meter'
 export * from './notification'
diff --git a/src/runtime/types/ladder.d.ts b/src/runtime/types/ladder.d.ts
new file mode 100644
index 0000000000..bb20ab769d
--- /dev/null
+++ b/src/runtime/types/ladder.d.ts
@@ -0,0 +1,19 @@
+import { RouteParams } from 'vue-router'
+import { ladder } from '../ui.config'
+import colors from '#ui-colors'
+
+export type LadderSize = keyof typeof ladder.icon.size
+export type LadderStepColor = 'gray' | typeof colors[number]
+
+export interface LadderStep {
+  label: string,
+  to?: RouteParams | string,
+  click?: Function | boolean,
+  icon?: string,
+  disabled?: boolean
+}
+
+export interface LadderStepWrapper {
+  step: LadderStep,
+  isActive: boolean,
+}
diff --git a/src/runtime/ui.config.ts b/src/runtime/ui.config.ts
index 1fac6cd84b..bd9bbf6c78 100644
--- a/src/runtime/ui.config.ts
+++ b/src/runtime/ui.config.ts
@@ -550,6 +550,77 @@ export const meterGroup = {
   }
 }
 
+export const ladder = {
+  base: 'w-full flex',
+  container: 'grow flex flex-items-center',
+  step: 'grow space-y-1',
+  indicator: 'w-full grid',
+  separator: {
+    wrapper: 'row-start-1 col-start-1 flex items-center',
+    base: 'grow w-1/2',
+    color: 'bg-{color}-200 dark:bg-{color}-700',
+    shadow: '',
+    size: {
+      '2xs': 'h-px',
+      xs: 'h-1',
+      sm: 'h-2',
+      md: 'h-2',
+      lg: 'h-2',
+      xl: 'h-3',
+      '2xl': 'h-3'
+    }
+  },
+  icon: {
+    wrapper: 'row-start-1 col-start-1 flex justify-center',
+    base: 'flex items-center justify-center transition-all disabled:cursor-not-allowed',
+    rounded: 'rounded-full',
+    shadow: '',
+    size: {
+      '2xs': 'text-xs h-5 w-5 ring-1',
+      xs: 'text-xs h-6 w-6 ring-1',
+      sm: 'text-sm h-7 w-7 ring-2',
+      md: 'text-md h-8 w-8 ring-2',
+      lg: 'text-lg h-9 w-9 ring-2',
+      xl: 'text-xl h-10 w-10 ring-4',
+      '2xl': 'text-2xl h-12 w-12 ring-4'
+    },
+    active: {
+      background: 'bg-white dark:bg-gray-900',
+      ring: 'ring-{color}-500',
+      color: '',
+      shadow: ''
+    },
+    inactive: {
+      background: 'bg-{color}-200 dark:bg-{color}-700',
+      ring: 'ring-transparent',
+      color: '',
+      shadow: ''
+    }
+  },
+  label: {
+    base: 'px-2 text-center truncate transition-colors',
+    size: {
+      '2xs': 'text-xs',
+      xs: 'text-xs',
+      sm: 'text-sm',
+      md: 'text-md',
+      lg: 'text-lg',
+      xl: 'text-xl',
+      '2xl': 'text-2xl'
+    },
+    active: 'text-{color}-500',
+    inactive: 'text-{color}-500'
+  },
+  colors: {
+    gray: ''
+  },
+  default: {
+    size: 'md',
+    color: 'primary',
+    inactiveColor: 'gray'
+  }
+}
+
 // Forms
 
 export const input = {

From 42d9c04af9133294e92b31b9b902e5541370b80b Mon Sep 17 00:00:00 2001
From: Italo Israel Baeza Cabrera <DarkGhostHunter@Gmail.com>
Date: Thu, 16 Nov 2023 01:33:52 -0300
Subject: [PATCH 2/7] Adds safe list colors

---
 src/colors.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/colors.ts b/src/colors.ts
index 2e853d5615..28d73f3b3a 100644
--- a/src/colors.ts
+++ b/src/colors.ts
@@ -177,6 +177,15 @@ const safelistByComponent = {
   }, {
     pattern: new RegExp(`text-(${colorsAsRegex})-500`)
   }],
+  ladder: (colorsAsRegex) => [{
+    pattern: new RegExp(`bg-(${colorsAsRegex})-200`)
+  }, {
+    pattern: new RegExp(`bg-(${colorsAsRegex})-700`),
+    variants: ['dark']
+  }, {
+    pattern: new RegExp(`bg-(${colorsAsRegex})-900`),
+    variants: ['dark']
+  }],
   meter: (colorsAsRegex) => [{
     pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
     variants: ['dark']

From 8a15097de7665f13ff239b006aa4086eec3c8be1 Mon Sep 17 00:00:00 2001
From: Italo Israel Baeza Cabrera <DarkGhostHunter@Gmail.com>
Date: Thu, 16 Nov 2023 01:34:24 -0300
Subject: [PATCH 3/7] Removes unnecessary size select

---
 docs/content/2.elements/12.ladder.md | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/docs/content/2.elements/12.ladder.md b/docs/content/2.elements/12.ladder.md
index 73b797e221..2a81a4cfe9 100644
--- a/docs/content/2.elements/12.ladder.md
+++ b/docs/content/2.elements/12.ladder.md
@@ -127,16 +127,6 @@ baseProps:
     - Checkout
 props:
   size: md
-options:
-  - name: size
-    restriction: included
-    values:
-      - 2xs
-      - xs
-      - sm
-      - md
-      - lg
-      - xl
 ---
 ::
 

From 5e0e2090b0e20968050ac881866c4b0300eeb19c Mon Sep 17 00:00:00 2001
From: Italo Israel Baeza Cabrera <DarkGhostHunter@Gmail.com>
Date: Thu, 16 Nov 2023 01:40:18 -0300
Subject: [PATCH 4/7] Minor style fix [skip ci]

---
 docs/components/content/examples/LadderExampleStepObjects.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/components/content/examples/LadderExampleStepObjects.vue b/docs/components/content/examples/LadderExampleStepObjects.vue
index d036e0cdba..403ae333ff 100644
--- a/docs/components/content/examples/LadderExampleStepObjects.vue
+++ b/docs/components/content/examples/LadderExampleStepObjects.vue
@@ -7,7 +7,7 @@ const steps = [
   { label: 'Address', icon: 'i-heroicons-home' },
   { label: 'Shipping', icon: 'i-heroicons-truck' },
   { label: 'Trade-in', icon: 'i-heroicons-arrow-path', disabled: true },
-  { label: 'Payment', icon: 'i-heroicons-banknotes', click: () => alert('You clicked Payment!')},
+  { label: 'Payment', icon: 'i-heroicons-banknotes', click: () => alert('You clicked Payment!') },
   { label: 'Checkout', icon: 'i-heroicons-check' }
 ]
 </script>

From 84643c9dacf5d684250be2b6007cb3caa6714e1b Mon Sep 17 00:00:00 2001
From: Italo Israel Baeza Cabrera <DarkGhostHunter@Gmail.com>
Date: Fri, 17 Nov 2023 18:53:43 -0300
Subject: [PATCH 5/7] Simplified behavior, code

---
 .../examples/LadderExampleStepObjects.vue     |   4 +-
 docs/content/2.elements/12.ladder.md          |  25 +---
 src/colors.ts                                 |   3 -
 src/runtime/components/elements/Ladder.vue    | 141 ++++++------------
 src/runtime/ui.config.ts                      |  42 ++----
 5 files changed, 59 insertions(+), 156 deletions(-)

diff --git a/docs/components/content/examples/LadderExampleStepObjects.vue b/docs/components/content/examples/LadderExampleStepObjects.vue
index 403ae333ff..ae54c1563f 100644
--- a/docs/components/content/examples/LadderExampleStepObjects.vue
+++ b/docs/components/content/examples/LadderExampleStepObjects.vue
@@ -4,8 +4,8 @@
 
 <script setup>
 const steps = [
-  { label: 'Address', icon: 'i-heroicons-home' },
-  { label: 'Shipping', icon: 'i-heroicons-truck' },
+  { label: 'Address', icon: 'i-heroicons-home', color: 'red' },
+  { label: 'Shipping', icon: 'i-heroicons-truck', inactiveColor: 'cyan' },
   { label: 'Trade-in', icon: 'i-heroicons-arrow-path', disabled: true },
   { label: 'Payment', icon: 'i-heroicons-banknotes', click: () => alert('You clicked Payment!') },
   { label: 'Checkout', icon: 'i-heroicons-check' }
diff --git a/docs/content/2.elements/12.ladder.md b/docs/content/2.elements/12.ladder.md
index 2a81a4cfe9..0f23f66b51 100644
--- a/docs/content/2.elements/12.ladder.md
+++ b/docs/content/2.elements/12.ladder.md
@@ -38,6 +38,8 @@ You may also pass an array of objects with following properties:
 - `label` - The label of the step.
 - `icon` - The icon of the step.
 - `disabled` - Whether the step is disabled.
+- `color` - The active color of the step.
+- `inactiveColor` - The inactive color of the step.
 - `click` - The click handler of the step.
 - `to` - Execute navigation to the set destination.
 
@@ -102,34 +104,13 @@ baseProps:
     - Trade-in
     - Payment
     - Checkout
+  click: true
 props:
   color: red
   inactiveColor: blue
 ---
 ::
 
-::callout{icon="i-heroicons-exclamation-triangle"}
-The inactive color also affects the separator colors. 
-::
-
-## Size
-
-Use the `size` prop to change the size of the ladder.
-
-::component-card
----
-baseProps:
-  steps:
-    - Address
-    - Shipping
-    - Trade-in
-    - Payment
-    - Checkout
-props:
-  size: md
----
-::
-
 ## Props
 
 :component-props
diff --git a/src/colors.ts b/src/colors.ts
index 28d73f3b3a..3fdb7800ff 100644
--- a/src/colors.ts
+++ b/src/colors.ts
@@ -182,9 +182,6 @@ const safelistByComponent = {
   }, {
     pattern: new RegExp(`bg-(${colorsAsRegex})-700`),
     variants: ['dark']
-  }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex})-900`),
-    variants: ['dark']
   }],
   meter: (colorsAsRegex) => [{
     pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
diff --git a/src/runtime/components/elements/Ladder.vue b/src/runtime/components/elements/Ladder.vue
index 4cbe17f8ee..f44fb01d52 100644
--- a/src/runtime/components/elements/Ladder.vue
+++ b/src/runtime/components/elements/Ladder.vue
@@ -1,23 +1,23 @@
 <template>
-  <ol :class="ladderClass" v-bind="attrs">
-    <template v-for="(step, key) in computedSteps" :key="key">
-      <li :class="ladderStepContainerClass">
-        <div :class="ladderStepClass">
-          <div :class="ladderStepIndicatorClass">
-            <div v-if="hasSeparators" :class="ladderStepSeparatorsWrapperClass">
-              <div :class="[ladderStepSeparatorClass, key < 1 ? 'invisible' : '']" />
-              <div :class="[ladderStepSeparatorClass, key > computedSteps.length - 2 ? 'invisible' : '']" />
+  <ol :class="ui.base" v-bind="attrs">
+    <template v-for="(wrapper, key) in computedSteps" :key="key">
+      <li :class="ui.container">
+        <div :class="ui.step">
+          <div :class="ui.indicator">
+            <div v-if="hasSeparators" :class="ui.separator.wrapper">
+              <div :class="[ui.separator.base, ui.separator.color, key < 1 ? 'invisible' : '']" />
+              <div :class="[ui.separator.base, ui.separator.color, key > computedSteps.length - 2 ? 'invisible' : '']" class="ml-10" />
             </div>
-            <div :class="ladderStepIconWrapperClass">
+            <div :class="ui.icon.wrapper">
               <component
-                :is="step.step.click || step.step.to ? 'UButton' : 'div'"
-                :class="[ladderStepIconClass, step.isActive ? ladderStepActiveIconClass : ladderStepInactiveIconClass]"
+                :is="wrapper.step.click || wrapper.step.to ? 'UButton' : 'div'"
+                :class="[ui.icon.base, ui.icon.rounded, ui.icon.shadow, ui.icon.size, ui.icon.ring, getIconClass(wrapper)]"
                 type="button"
                 variant="ghost"
-                v-bind="omit(step.step, ['label', 'click', 'icon'])"
-                @click="step.step.click"
+                v-bind="omit(wrapper.step, ['label', 'click', 'icon'])"
+                @click="wrapper.step.click"
               >
-                <UIcon v-if="step.step.icon" :name="step.step.icon" />
+                <UIcon v-if="wrapper.step.icon" :name="wrapper.step.icon" />
                 <div v-else>
                   {{ key + 1 }}
                 </div>
@@ -25,8 +25,8 @@
             </div>
           </div>
 
-          <div :class="[ladderStepLabelClass, step.isActive ? ladderStepActiveLabelClass : ladderStepInactiveLabelClass]">
-            {{ step.step.label }}
+          <div :class="[ui.label.base, ui.label.size, getLabelClass(wrapper)]">
+            {{ wrapper.step.label }}
           </div>
         </div>
       </li>
@@ -84,13 +84,6 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
-    size: {
-      type: String as PropType<LadderSize>,
-      default: () => config.default.size,
-      validator (value: string) {
-        return Object.keys(config.label.size).includes(value)
-      }
-    },
     class: {
       type: [String, Object, Array] as PropType<any>,
       default: undefined
@@ -106,58 +99,40 @@ export default defineComponent({
 
     const hasSeparators = computed(() => props.separators)
 
-    const ladderClass = computed(() => {
-      return twJoin(
-        ui.value.base
-      )
-    })
-
-    const ladderStepContainerClass = computed(() => {
-      return twJoin(
-        ui.value.container
-      )
-    })
-
-    const ladderStepClass = computed(() => {
-      return twJoin(
-        ui.value.step
-      )
-    })
+    function getIconClass (wrapper: LadderStepWrapper) {
+      const color = {
+        key: 'inactive',
+        name: wrapper.step.inactiveColor ?? props.inactiveColor
+      }
 
-    const ladderStepIndicatorClass = computed(() => {
-      return twJoin(
-        ui.value.indicator
-      )
-    })
+      if (wrapper.isActive) {
+        color.key = 'active'
+        color.name = wrapper.step.color ?? props.color
+      }
 
-    const ladderStepSeparatorsWrapperClass = computed(() => {
       return twJoin(
-        ui.value.separator.wrapper
+        ui.value.icon[color.key].background.replaceAll('{color}', color.name),
+        ui.value.icon[color.key].ring.replaceAll('{color}', color.name),
+        ui.value.icon[color.key].color.replaceAll('{color}', color.name),
+        ui.value.icon[color.key].shadow
       )
-    })
+    }
 
-    const ladderStepSeparatorClass = computed(() => {
-      return twJoin(
-        ui.value.separator.base,
-        ui.value.separator.color.replaceAll('{color}', props.inactiveColor),
-        ui.value.separator.size[props.size]
-      )
-    })
+    function getLabelClass (wrapper: LadderStepWrapper) {
+      const color = {
+        key: 'inactive',
+        name: wrapper.step.inactiveColor ?? props.inactiveColor
+      }
 
-    const ladderStepIconWrapperClass = computed(() => {
-      return twJoin(
-        ui.value.icon.wrapper
-      )
-    })
+      if (wrapper.isActive) {
+        color.key = 'active'
+        color.name = wrapper.step.color ?? props.color
+      }
 
-    const ladderStepIconClass = computed(() => {
       return twJoin(
-        ui.value.icon.base,
-        ui.value.icon.rounded,
-        ui.value.icon.shadow,
-        ui.value.icon.size[props.size]
+        ui.value.label[color.key].replaceAll('{color}', color.name)
       )
-    })
+    }
 
     const ladderStepActiveIconClass = computed(() => {
       return twJoin(
@@ -177,25 +152,6 @@ export default defineComponent({
       )
     })
 
-    const ladderStepLabelClass = computed(() => {
-      return twJoin(
-        ui.value.label.base,
-        ui.value.label.size[props.size]
-      )
-    })
-
-    const ladderStepActiveLabelClass = computed(() => {
-      return twJoin(
-        ui.value.label.active.replaceAll('{color}', props.color)
-      )
-    })
-
-    const ladderStepInactiveLabelClass = computed(() => {
-      return twJoin(
-        ui.value.label.inactive.replaceAll('{color}', props.inactiveColor)
-      )
-    })
-
     const computedSteps: ComputedRef<LadderStepWrapper[]> = computed(() => {
       return props.steps.map((receivedStep, index: number) => {
         const step = typeof receivedStep === 'string' ? { label: receivedStep } : receivedStep
@@ -214,20 +170,13 @@ export default defineComponent({
 
     return {
       attrs,
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
       hasSeparators,
-      ladderClass,
-      ladderStepContainerClass,
-      ladderStepClass,
-      ladderStepIndicatorClass,
-      ladderStepSeparatorsWrapperClass,
-      ladderStepSeparatorClass,
-      ladderStepIconWrapperClass,
-      ladderStepIconClass,
+      getIconClass,
+      getLabelClass,
       ladderStepActiveIconClass,
       ladderStepInactiveIconClass,
-      ladderStepLabelClass,
-      ladderStepActiveLabelClass,
-      ladderStepInactiveLabelClass,
       computedSteps,
       omit
     }
diff --git a/src/runtime/ui.config.ts b/src/runtime/ui.config.ts
index bd9bbf6c78..65018a22c8 100644
--- a/src/runtime/ui.config.ts
+++ b/src/runtime/ui.config.ts
@@ -557,57 +557,33 @@ export const ladder = {
   indicator: 'w-full grid',
   separator: {
     wrapper: 'row-start-1 col-start-1 flex items-center',
-    base: 'grow w-1/2',
-    color: 'bg-{color}-200 dark:bg-{color}-700',
-    shadow: '',
-    size: {
-      '2xs': 'h-px',
-      xs: 'h-1',
-      sm: 'h-2',
-      md: 'h-2',
-      lg: 'h-2',
-      xl: 'h-3',
-      '2xl': 'h-3'
-    }
+    base: 'grow h-px w-1/2',
+    color: 'bg-gray-200 dark:bg-gray-700',
+    shadow: ''
   },
   icon: {
     wrapper: 'row-start-1 col-start-1 flex justify-center',
     base: 'flex items-center justify-center transition-all disabled:cursor-not-allowed',
     rounded: 'rounded-full',
+    ring: '',
     shadow: '',
-    size: {
-      '2xs': 'text-xs h-5 w-5 ring-1',
-      xs: 'text-xs h-6 w-6 ring-1',
-      sm: 'text-sm h-7 w-7 ring-2',
-      md: 'text-md h-8 w-8 ring-2',
-      lg: 'text-lg h-9 w-9 ring-2',
-      xl: 'text-xl h-10 w-10 ring-4',
-      '2xl': 'text-2xl h-12 w-12 ring-4'
-    },
+    size: 'text-md h-8 w-8',
     active: {
-      background: 'bg-white dark:bg-gray-900',
-      ring: 'ring-{color}-500',
+      background: 'bg-{color}-500 dark:bg-{color}-500',
+      ring: '',
       color: '',
       shadow: ''
     },
     inactive: {
       background: 'bg-{color}-200 dark:bg-{color}-700',
-      ring: 'ring-transparent',
+      ring: '',
       color: '',
       shadow: ''
     }
   },
   label: {
     base: 'px-2 text-center truncate transition-colors',
-    size: {
-      '2xs': 'text-xs',
-      xs: 'text-xs',
-      sm: 'text-sm',
-      md: 'text-md',
-      lg: 'text-lg',
-      xl: 'text-xl',
-      '2xl': 'text-2xl'
-    },
+    size: 'text-md',
     active: 'text-{color}-500',
     inactive: 'text-{color}-500'
   },

From 15124b1bfc17b35718838c8d0c7d791452e87fa9 Mon Sep 17 00:00:00 2001
From: Italo Israel Baeza Cabrera <DarkGhostHunter@Gmail.com>
Date: Fri, 17 Nov 2023 19:48:41 -0300
Subject: [PATCH 6/7] Should have fixed lint.

---
 src/runtime/components/elements/Ladder.vue | 2 +-
 src/runtime/types/ladder.d.ts              | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/runtime/components/elements/Ladder.vue b/src/runtime/components/elements/Ladder.vue
index f44fb01d52..d02833d7be 100644
--- a/src/runtime/components/elements/Ladder.vue
+++ b/src/runtime/components/elements/Ladder.vue
@@ -40,7 +40,7 @@ import type { ComputedRef, PropType } from 'vue'
 import { twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, omit } from '../../utils'
-import { Strategy, LadderSize, LadderStep, LadderStepWrapper, LadderStepColor } from '../../types'
+import type { Strategy, LadderSize, LadderStep, LadderStepWrapper, LadderStepColor } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { ladder } from '#ui/ui.config'
diff --git a/src/runtime/types/ladder.d.ts b/src/runtime/types/ladder.d.ts
index bb20ab769d..04b0e333c2 100644
--- a/src/runtime/types/ladder.d.ts
+++ b/src/runtime/types/ladder.d.ts
@@ -10,7 +10,9 @@ export interface LadderStep {
   to?: RouteParams | string,
   click?: Function | boolean,
   icon?: string,
-  disabled?: boolean
+  disabled?: boolean,
+  color?: LadderStepColor,
+  inactiveColor?: LadderStepColor
 }
 
 export interface LadderStepWrapper {

From 26b1638bee0dee32eb39332399b8620d87612a65 Mon Sep 17 00:00:00 2001
From: Italo Israel Baeza Cabrera <DarkGhostHunter@Gmail.com>
Date: Fri, 17 Nov 2023 20:53:18 -0300
Subject: [PATCH 7/7] Fixes overflow on examples.

---
 docs/content/2.elements/12.ladder.md | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/docs/content/2.elements/12.ladder.md b/docs/content/2.elements/12.ladder.md
index 0f23f66b51..49e3504487 100644
--- a/docs/content/2.elements/12.ladder.md
+++ b/docs/content/2.elements/12.ladder.md
@@ -12,6 +12,7 @@ Pass the step index as `v-model`, an array of steps as strings to the `steps` pr
 
 ::component-card
 ---
+extraClass: overflow-x-auto
 baseProps:
   steps:
     - Address
@@ -43,7 +44,7 @@ You may also pass an array of objects with following properties:
 - `click` - The click handler of the step.
 - `to` - Execute navigation to the set destination.
 
-:component-example{component="ladder-example-step-objects"}
+:component-example{component="ladder-example-step-objects" extraClass="overflow-x-auto"}
 
 ::callout{icon="i-heroicons-exclamation-triangle"}
 The `click` handler will take precedence over the navigation handler. If `click` is set to `false`, the navigation handler is disabled, even if `to` is declared.
@@ -55,6 +56,7 @@ Steps don't change when the user clicks on it. To enable this behaviour, you can
 
 ::component-card
 ---
+extraClass: overflow-x-auto
 baseProps:
   modelValue: 0
   steps:
@@ -74,6 +76,7 @@ The steps are separated with horizontal lines that can be disabled by setting `s
 
 ::component-card
 ---
+extraClass: overflow-x-auto
 baseProps:
   steps:
     - Address
@@ -97,6 +100,7 @@ Besides all the colors from the `ui.colors` object, you can also use the `gray`.
 
 ::component-card
 ---
+extraClass: overflow-x-auto
 baseProps:
   steps:
     - Address