@eos-ui/vue 0.4.0 → 0.5.1

package/dist/components/SignaturePad/ESignaturePad.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ESignaturePad.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_createElementVNode","_unref","_normalizeStyle","_createVNode","EIcon","_createTextVNode","_toDisplayString","_createCommentVNode","EButton","_withCtx","EIcon_default","EButton_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","ESignaturePad_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","props","__props","model","useModel","t","useMessages","id","useUid","canvas","ref","empty","strokes","current","paint","color","stroke","first","rest","ctx","p","setup","cv","dpr","onMounted","useResizeObserver","point","r","down","move","from","exportImage","out","up","wipe","clear","watch","v","openBlock","createElementBlock","createElementVNode","unref","normalizeStyle","createVNode","createTextVNode","toDisplayString","createCommentVNode","withCtx"],"sources":["../../../src/components/SignaturePad/ESignaturePad.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, ref, watch } from \"vue\";\nimport { useResizeObserver } from \"@vueuse/core\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EButton from \"../Button/EButton.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The height of the drawing area in pixels. */\n    height?: number;\n    /** Ignores drawing and disables Clear. */\n    disabled?: boolean;\n    /** The id of the canvas. @default generated */\n    id?: string;\n  }>(),\n  { height: 160 },\n);\n\n/** A PNG data URL (black on transparent); empty while clear. Set `\"\"` to clear. */\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst id = useUid(() => props.id);\nconst canvas = ref<HTMLCanvasElement | null>(null);\nconst empty = ref(!model.value);\n\ninterface Point {\n  x: number;\n  y: number;\n}\nconst strokes: Point[][] = [];\nlet current: Point[] | null = null;\n\nfunction paint(ctx: CanvasRenderingContext2D, color: string) {\n  ctx.lineWidth = 2.5;\n  ctx.lineCap = \"round\";\n  ctx.lineJoin = \"round\";\n  ctx.strokeStyle = color;\n  ctx.fillStyle = color;\n  for (const stroke of strokes) {\n    const [first, ...rest] = stroke;\n    if (!first) continue;\n    ctx.beginPath();\n    ctx.arc(first.x, first.y, 1.2, 0, 6.3);\n    ctx.fill();\n    ctx.beginPath();\n    ctx.moveTo(first.x, first.y);\n    for (const p of rest) ctx.lineTo(p.x, p.y);\n    ctx.stroke();\n  }\n}\n\nfunction setup() {\n  const cv = canvas.value;\n  if (!cv) return;\n  const dpr = window.devicePixelRatio || 1;\n  cv.width = Math.round((cv.clientWidth || 320) * dpr);\n  cv.height = Math.round(props.height * dpr);\n  const ctx = cv.getContext(\"2d\");\n  if (!ctx) return;\n  ctx.scale(dpr, dpr);\n  paint(ctx, getComputedStyle(cv).color);\n}\nonMounted(setup);\nuseResizeObserver(canvas, setup);\n\nfunction point(e: PointerEvent): Point {\n  const r = canvas.value!.getBoundingClientRect();\n  return { x: e.clientX - r.left, y: e.clientY - r.top };\n}\n\nfunction down(e: PointerEvent) {\n  if (props.disabled) return;\n  e.preventDefault();\n  try {\n    canvas.value!.setPointerCapture(e.pointerId);\n  } catch {}\n  const p = point(e);\n  current = [p];\n  strokes.push(current);\n  const ctx = canvas.value!.getContext(\"2d\")!;\n  ctx.fillStyle = getComputedStyle(canvas.value!).color;\n  ctx.beginPath();\n  ctx.arc(p.x, p.y, 1.2, 0, 6.3);\n  ctx.fill();\n}\n\nfunction move(e: PointerEvent) {\n  if (!current) return;\n  const from = current[current.length - 1]!;\n  const p = point(e);\n  current.push(p);\n  const ctx = canvas.value!.getContext(\"2d\")!;\n  ctx.strokeStyle = getComputedStyle(canvas.value!).color;\n  ctx.beginPath();\n  ctx.moveTo(from.x, from.y);\n  ctx.lineTo(p.x, p.y);\n  ctx.stroke();\n}\n\nfunction exportImage(): string {\n  const cv = canvas.value!;\n  const out = document.createElement(\"canvas\");\n  out.width = cv.width;\n  out.height = cv.height;\n  const ctx = out.getContext(\"2d\")!;\n  ctx.scale(cv.width / (cv.clientWidth || 320), cv.height / props.height);\n  paint(ctx, \"black\");\n  return out.toDataURL(\"image/png\");\n}\n\nfunction up() {\n  if (!current) return;\n  current = null;\n  empty.value = false;\n  model.value = exportImage();\n}\n\nfunction wipe() {\n  strokes.length = 0;\n  current = null;\n  empty.value = true;\n  const cv = canvas.value;\n  const ctx = cv?.getContext(\"2d\");\n  if (cv && ctx) {\n    ctx.save();\n    ctx.setTransform(1, 0, 0, 1, 0, 0);\n    ctx.clearRect(0, 0, cv.width, cv.height);\n    ctx.restore();\n  }\n}\n\nfunction clear() {\n  wipe();\n  model.value = \"\";\n}\n\nwatch(model, (v) => {\n  if (!v && !empty.value) wipe();\n});\n\ndefineExpose({\n  clear,\n  canvas,\n});\n</script>\n\n<template>\n  <div class=\"e-pad\">\n    <div class=\"e-pad-surface\" :data-empty=\"empty ? '' : undefined\">\n      <canvas\n        :id=\"id\"\n        ref=\"canvas\"\n        class=\"e-pad-canvas\"\n        role=\"img\"\n        :style=\"{ height: `${height}px`, color: 'var(--e-ink)' }\"\n        :aria-label=\"t('drawSignature')\"\n        :aria-describedby=\"`${id}-hint`\"\n        @pointerdown=\"down\"\n        @pointermove=\"move\"\n        @pointerup=\"up\"\n        @pointercancel=\"up\"\n      />\n      <span v-if=\"empty\" class=\"e-pad-placeholder\" aria-hidden=\"true\">\n        <EIcon name=\"signature\" />\n        {{ t(\"signEmpty\") }}\n      </span>\n    </div>\n    <div class=\"e-pad-foot\">\n      <p :id=\"`${id}-hint`\" class=\"e-field-hint\">{{ t(\"signDrawHint\") }}</p>\n      <EButton variant=\"quiet\" icon=\"eraser\" :disabled=\"empty || disabled\" @click=\"clear\">\n        {{ t(\"signClear\") }}\n      </EButton>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer e.composites {\n  .e-pad {\n    display: grid;\n    gap: var(--e-space-2);\n  }\n\n  .e-pad-surface {\n    position: relative;\n    overflow: hidden;\n    border: var(--e-stroke-edge) solid var(--e-border-strong);\n    border-radius: var(--e-radius-md);\n    background: var(--e-surface);\n    box-shadow: var(--e-well);\n  }\n\n  .e-pad-surface::after {\n    content: \"\";\n    position: absolute;\n    inset-inline: var(--e-space-4);\n    bottom: 36px;\n    border-bottom: var(--e-stroke-edge) solid var(--e-ink);\n    pointer-events: none;\n  }\n\n  .e-pad-canvas {\n    display: block;\n    width: 100%;\n    touch-action: none;\n    cursor: crosshair;\n  }\n\n  .e-pad-placeholder {\n    position: absolute;\n    inset: 0;\n    display: grid;\n    place-content: center;\n    justify-items: center;\n    gap: var(--e-space-2);\n    color: var(--e-muted);\n    font: 400 var(--e-text-sm)/1.4 var(--e-font-sans);\n    pointer-events: none;\n  }\n\n  .e-pad-foot {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--e-space-2) var(--e-space-4);\n  }\n\n  .e-pad-foot .e-field-hint {\n    margin: 0;\n    flex: 1 1 14rem;\n  }\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"ESignaturePad.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_createElementVNode","_unref","_normalizeStyle","_createVNode","EIcon","_createTextVNode","_toDisplayString","_createCommentVNode","EButton","_withCtx","EIcon_default","EButton_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","ESignaturePad_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","props","__props","model","useModel","t","useMessages","id","useUid","canvas","ref","empty","strokes","current","paint","color","stroke","first","rest","ctx","p","setup","cv","dpr","onMounted","useResizeObserver","point","r","down","move","from","exportImage","out","up","wipe","clear","watch","v","openBlock","createElementBlock","createElementVNode","unref","normalizeStyle","createVNode","createTextVNode","toDisplayString","createCommentVNode","withCtx"],"sources":["../../../src/components/SignaturePad/ESignaturePad.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, ref, watch } from \"vue\";\nimport { useResizeObserver } from \"@vueuse/core\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EButton from \"../Button/EButton.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The height of the drawing area in pixels. */\n    height?: number;\n    /** Ignores drawing and disables Clear. */\n    disabled?: boolean;\n    /** The id of the canvas. @default generated */\n    id?: string;\n  }>(),\n  { height: 160 },\n);\n\n/** A PNG data URL (black on transparent); empty while clear. Set `\"\"` to clear. */\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst id = useUid(() => props.id);\nconst canvas = ref<HTMLCanvasElement | null>(null);\nconst empty = ref(!model.value);\n\ninterface Point {\n  x: number;\n  y: number;\n}\nconst strokes: Point[][] = [];\nlet current: Point[] | null = null;\n\nfunction paint(ctx: CanvasRenderingContext2D, color: string) {\n  ctx.lineWidth = 2.5;\n  ctx.lineCap = \"round\";\n  ctx.lineJoin = \"round\";\n  ctx.strokeStyle = color;\n  ctx.fillStyle = color;\n  for (const stroke of strokes) {\n    const [first, ...rest] = stroke;\n    if (!first) continue;\n    ctx.beginPath();\n    ctx.arc(first.x, first.y, 1.2, 0, 6.3);\n    ctx.fill();\n    ctx.beginPath();\n    ctx.moveTo(first.x, first.y);\n    for (const p of rest) ctx.lineTo(p.x, p.y);\n    ctx.stroke();\n  }\n}\n\nfunction setup() {\n  const cv = canvas.value;\n  if (!cv) return;\n  const dpr = window.devicePixelRatio || 1;\n  cv.width = Math.round((cv.clientWidth || 320) * dpr);\n  cv.height = Math.round(props.height * dpr);\n  const ctx = cv.getContext(\"2d\");\n  if (!ctx) return;\n  ctx.scale(dpr, dpr);\n  paint(ctx, getComputedStyle(cv).color);\n}\nonMounted(setup);\nuseResizeObserver(canvas, setup);\n\nfunction point(e: PointerEvent): Point {\n  const r = canvas.value!.getBoundingClientRect();\n  return { x: e.clientX - r.left, y: e.clientY - r.top };\n}\n\nfunction down(e: PointerEvent) {\n  if (props.disabled) return;\n  e.preventDefault();\n  try {\n    canvas.value!.setPointerCapture(e.pointerId);\n  } catch {}\n  const p = point(e);\n  current = [p];\n  strokes.push(current);\n  const ctx = canvas.value!.getContext(\"2d\")!;\n  ctx.fillStyle = getComputedStyle(canvas.value!).color;\n  ctx.beginPath();\n  ctx.arc(p.x, p.y, 1.2, 0, 6.3);\n  ctx.fill();\n}\n\nfunction move(e: PointerEvent) {\n  if (!current) return;\n  const from = current[current.length - 1]!;\n  const p = point(e);\n  current.push(p);\n  const ctx = canvas.value!.getContext(\"2d\")!;\n  ctx.strokeStyle = getComputedStyle(canvas.value!).color;\n  ctx.beginPath();\n  ctx.moveTo(from.x, from.y);\n  ctx.lineTo(p.x, p.y);\n  ctx.stroke();\n}\n\nfunction exportImage(): string {\n  const cv = canvas.value!;\n  const out = document.createElement(\"canvas\");\n  out.width = cv.width;\n  out.height = cv.height;\n  const ctx = out.getContext(\"2d\")!;\n  ctx.scale(cv.width / (cv.clientWidth || 320), cv.height / props.height);\n  paint(ctx, \"black\");\n  return out.toDataURL(\"image/png\");\n}\n\nfunction up() {\n  if (!current) return;\n  current = null;\n  empty.value = false;\n  model.value = exportImage();\n}\n\nfunction wipe() {\n  strokes.length = 0;\n  current = null;\n  empty.value = true;\n  const cv = canvas.value;\n  const ctx = cv?.getContext(\"2d\");\n  if (cv && ctx) {\n    ctx.save();\n    ctx.setTransform(1, 0, 0, 1, 0, 0);\n    ctx.clearRect(0, 0, cv.width, cv.height);\n    ctx.restore();\n  }\n}\n\nfunction clear() {\n  wipe();\n  model.value = \"\";\n}\n\nwatch(model, (v) => {\n  if (!v && !empty.value) wipe();\n});\n\ndefineExpose({\n  clear,\n  canvas,\n});\n</script>\n\n<template>\n  <div class=\"e-pad\">\n    <div class=\"e-pad-surface\" :data-empty=\"empty ? '' : undefined\">\n      <canvas\n        :id=\"id\"\n        ref=\"canvas\"\n        class=\"e-pad-canvas\"\n        role=\"img\"\n        :style=\"{ height: `${height}px`, color: 'var(--e-ink)' }\"\n        :aria-label=\"t('drawSignature')\"\n        :aria-describedby=\"`${id}-hint`\"\n        @pointerdown=\"down\"\n        @pointermove=\"move\"\n        @pointerup=\"up\"\n        @pointercancel=\"up\"\n      />\n      <span v-if=\"empty\" class=\"e-pad-placeholder\" aria-hidden=\"true\">\n        <EIcon name=\"signature\" />\n        {{ t(\"signEmpty\") }}\n      </span>\n    </div>\n    <div class=\"e-pad-foot\">\n      <p :id=\"`${id}-hint`\" class=\"e-field-hint\">{{ t(\"signDrawHint\") }}</p>\n      <EButton variant=\"quiet\" icon=\"eraser\" :disabled=\"empty || disabled\" @click=\"clear\">\n        {{ t(\"signClear\") }}\n      </EButton>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer e.composites {\n  .e-pad {\n    display: grid;\n    gap: var(--e-space-2);\n  }\n\n  .e-pad-surface {\n    position: relative;\n    overflow: hidden;\n    border-radius: var(--e-radius-md);\n    background: var(--e-surface);\n    box-shadow:\n      inset 0 0 0 var(--e-stroke-edge) var(--e-border-strong),\n      var(--e-well);\n  }\n\n  .e-pad-surface::after {\n    content: \"\";\n    position: absolute;\n    inset-inline: var(--e-space-4);\n    bottom: 36px;\n    border-bottom: var(--e-stroke-edge) solid var(--e-ink);\n    pointer-events: none;\n  }\n\n  .e-pad-canvas {\n    display: block;\n    width: 100%;\n    touch-action: none;\n    cursor: crosshair;\n  }\n\n  .e-pad-placeholder {\n    position: absolute;\n    inset: 0;\n    display: grid;\n    place-content: center;\n    justify-items: center;\n    gap: var(--e-space-2);\n    color: var(--e-muted);\n    font: 400 var(--e-text-sm)/1.4 var(--e-font-sans);\n    pointer-events: none;\n  }\n\n  .e-pad-foot {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--e-space-2) var(--e-space-4);\n  }\n\n  .e-pad-foot .e-field-hint {\n    margin: 0;\n    flex: 1 1 14rem;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/components/Stack/EStack.js.map

@@ -1 +1 @@
-{"version":3,"file":"EStack.js","names":["_sfc_main","EStack_vue_vue_type_script_setup_true_lang_default","EStack_default"],"sources":["../../../src/components/Stack/EStack.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The element to render, `div` by default; such as `ul` (with `li` children). */\n    as?: string;\n    /** A space token number (1, 2, 3, 4, 6, 8) becomes `var(--e-space-N)`; a string is used as given, so any CSS length works. */\n    gap?: number | string;\n    /** Aligns the children across the column: `center` or `end`. Stretched by default. */\n    align?: \"center\" | \"end\";\n  }>(),\n  { as: \"div\", gap: 4 },\n);\n\ndefineSlots<{\n  /** The children, one under another. */\n  default(): unknown;\n}>();\n\nconst gapValue = computed(() => (typeof props.gap === \"number\" ? `var(--e-space-${props.gap})` : props.gap));\n</script>\n\n<template>\n  <component :is=\"as\" class=\"e-stack\" :class=\"align && `e-stack--${align}`\" :style=\"{ '--e-gap': gapValue }\">\n    <slot />\n  </component>\n</template>\n\n<style>\n@layer e.blocks {\n  .e-stack {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    align-content: start;\n    gap: var(--e-gap, var(--e-space-3));\n    min-width: 0;\n  }\n\n  .e-stack--center {\n    justify-items: center;\n  }\n\n  .e-stack--end {\n    justify-items: end;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"EStack.js","names":["_sfc_main","EStack_vue_vue_type_script_setup_true_lang_default","EStack_default"],"sources":["../../../src/components/Stack/EStack.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The element to render, such as `ul` (with `li` children). */\n    as?: string;\n    /** A space token number (1, 2, 3, 4, 6, 8) becomes `var(--e-space-N)`; a string is used as given, so any CSS length works. */\n    gap?: number | string;\n    /** Aligns the children across the column: `center` or `end`. Stretched by default. */\n    align?: \"center\" | \"end\";\n  }>(),\n  { as: \"div\", gap: 4 },\n);\n\ndefineSlots<{\n  /** The children, one under another. */\n  default(): unknown;\n}>();\n\nconst gapValue = computed(() => (typeof props.gap === \"number\" ? `var(--e-space-${props.gap})` : props.gap));\n</script>\n\n<template>\n  <component :is=\"as\" class=\"e-stack\" :class=\"align && `e-stack--${align}`\" :style=\"{ '--e-gap': gapValue }\">\n    <slot />\n  </component>\n</template>\n\n<style>\n@layer e.blocks {\n  .e-stack {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    align-content: start;\n    gap: var(--e-gap, var(--e-space-3));\n    min-width: 0;\n  }\n\n  .e-stack--center {\n    justify-items: center;\n  }\n\n  .e-stack--end {\n    justify-items: end;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Stack/EStack.vue.d.ts

@@ -1,5 +1,5 @@
 type __VLS_Props = {
-    /** The element to render, `div` by default; such as `ul` (with `li` children). */
+    /** The element to render, such as `ul` (with `li` children). */
     as?: string;
     /** A space token number (1, 2, 3, 4, 6, 8) becomes `var(--e-space-N)`; a string is used as given, so any CSS length works. */
     gap?: number | string;

package/dist/components/Stack/EStack.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"EStack.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_resolveDynamicComponent","_normalizeClass","_normalizeStyle","_withCtx","_renderSlot","EStack_vue_vue_type_script_setup_true_lang_default","props","__props","gapValue","computed","openBlock","createBlock","resolveDynamicComponent","normalizeClass","normalizeStyle","withCtx","renderSlot","_ctx"],"sources":["../../../src/components/Stack/EStack.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The element to render, `div` by default; such as `ul` (with `li` children). */\n    as?: string;\n    /** A space token number (1, 2, 3, 4, 6, 8) becomes `var(--e-space-N)`; a string is used as given, so any CSS length works. */\n    gap?: number | string;\n    /** Aligns the children across the column: `center` or `end`. Stretched by default. */\n    align?: \"center\" | \"end\";\n  }>(),\n  { as: \"div\", gap: 4 },\n);\n\ndefineSlots<{\n  /** The children, one under another. */\n  default(): unknown;\n}>();\n\nconst gapValue = computed(() => (typeof props.gap === \"number\" ? `var(--e-space-${props.gap})` : props.gap));\n</script>\n\n<template>\n  <component :is=\"as\" class=\"e-stack\" :class=\"align && `e-stack--${align}`\" :style=\"{ '--e-gap': gapValue }\">\n    <slot />\n  </component>\n</template>\n\n<style>\n@layer e.blocks {\n  .e-stack {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    align-content: start;\n    gap: var(--e-gap, var(--e-space-3));\n    min-width: 0;\n  }\n\n  .e-stack--center {\n    justify-items: center;\n  }\n\n  .e-stack--end {\n    justify-items: end;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;EAIA,IAAMQ,IAAQC,GAiBRC,IAAWC,QAAgB,OAAOH,EAAM,OAAQ,WAAW,iBAAiBA,EAAM,IAAI,KAAKA,EAAM,GAAI;E,kBAIzGR,EAAA,GAAAC,EAEYC,EAFIO,EAAA,EAAE,GAAA;GAAE,OAAKN,EAAA,CAAC,WAAkBM,EAAA,SAAK,YAAgBA,EAAA,OAAK,CAAA;GAAK,OAAKL,EAAA,EAAA,WAAeM,EAAA,MAAQ,CAAA;;GACrG,SAAAL,QAAQ,CAARC,EAAQa,EAAA,QAAA,SAAA,C"}
+{"version":3,"file":"EStack.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_resolveDynamicComponent","_normalizeClass","_normalizeStyle","_withCtx","_renderSlot","EStack_vue_vue_type_script_setup_true_lang_default","props","__props","gapValue","computed","openBlock","createBlock","resolveDynamicComponent","normalizeClass","normalizeStyle","withCtx","renderSlot","_ctx"],"sources":["../../../src/components/Stack/EStack.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The element to render, such as `ul` (with `li` children). */\n    as?: string;\n    /** A space token number (1, 2, 3, 4, 6, 8) becomes `var(--e-space-N)`; a string is used as given, so any CSS length works. */\n    gap?: number | string;\n    /** Aligns the children across the column: `center` or `end`. Stretched by default. */\n    align?: \"center\" | \"end\";\n  }>(),\n  { as: \"div\", gap: 4 },\n);\n\ndefineSlots<{\n  /** The children, one under another. */\n  default(): unknown;\n}>();\n\nconst gapValue = computed(() => (typeof props.gap === \"number\" ? `var(--e-space-${props.gap})` : props.gap));\n</script>\n\n<template>\n  <component :is=\"as\" class=\"e-stack\" :class=\"align && `e-stack--${align}`\" :style=\"{ '--e-gap': gapValue }\">\n    <slot />\n  </component>\n</template>\n\n<style>\n@layer e.blocks {\n  .e-stack {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    align-content: start;\n    gap: var(--e-gap, var(--e-space-3));\n    min-width: 0;\n  }\n\n  .e-stack--center {\n    justify-items: center;\n  }\n\n  .e-stack--end {\n    justify-items: end;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;EAIA,IAAMQ,IAAQC,GAiBRC,IAAWC,QAAgB,OAAOH,EAAM,OAAQ,WAAW,iBAAiBA,EAAM,IAAI,KAAKA,EAAM,GAAI;E,kBAIzGR,EAAA,GAAAC,EAEYC,EAFIO,EAAA,EAAE,GAAA;GAAE,OAAKN,EAAA,CAAC,WAAkBM,EAAA,SAAK,YAAgBA,EAAA,OAAK,CAAA;GAAK,OAAKL,EAAA,EAAA,WAAeM,EAAA,MAAQ,CAAA;;GACrG,SAAAL,QAAQ,CAARC,EAAQa,EAAA,QAAA,SAAA,C"}

package/dist/components/Stamp/EStamp.js.map

@@ -1 +1 @@
-{"version":3,"file":"EStamp.js","names":["_sfc_main","EStamp_vue_vue_type_script_setup_true_lang_default","EStamp_default"],"sources":["../../../src/components/Stamp/EStamp.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nexport type StampTone = \"neutral\" | \"ink\" | \"success\" | \"info\" | \"warning\" | \"danger\";\nexport type StampStatus =\n  \"paid\" | \"due\" | \"overdue\" | \"action\" | \"scheduled\" | \"confirmed\" | \"cancelled\" | \"signed\" | \"pending\" | \"complete\";\n\nconst props = defineProps<{\n  /** A preset: sets the tone and the word (message `status.<name>`). */\n  status?: StampStatus;\n  /** Overrides the preset's tone. Without a status it is `neutral` (ink; `ink` is the same). `success`: paid, confirmed. `info`: due, scheduled. `warning`: needs attention. `danger`: overdue, failed. @default \"ink\" */\n  tone?: StampTone;\n  /** The word. Overrides the preset's; the default slot overrides both. @default preset's word, else Status */\n  label?: string;\n  /** A glyph before the word. None by default. */\n  icon?: IconProp;\n  /** A date or day count, set after the word. */\n  detail?: string;\n  /** `sm` is shorter, for rows and tables. @default \"md\" */\n  size?: \"sm\" | \"md\";\n}>();\n\ndefineSlots<{\n  /** The word, instead of `label` or the preset's. Write sentence case; the stamp sets it in capitals. */\n  default?(): unknown;\n}>();\n\nconst PRESETS: Record<StampStatus, StampTone> = {\n  paid: \"success\",\n  due: \"info\",\n  overdue: \"danger\",\n  action: \"warning\",\n  scheduled: \"info\",\n  confirmed: \"success\",\n  cancelled: \"danger\",\n  signed: \"success\",\n  pending: \"info\",\n  complete: \"success\",\n};\n\nconst t = useMessages();\nconst preset = computed(() => (props.status ? PRESETS[props.status] : undefined));\nconst tone = computed<StampTone>(() => props.tone || preset.value || \"neutral\");\nconst toneClass = computed(() => (tone.value === \"neutral\" || tone.value === \"ink\" ? null : `e-stamp--${tone.value}`));\nconst text = computed(() => props.label || (preset.value ? t(`status.${props.status}`) : t(\"status\")));\n</script>\n\n<template>\n  <span class=\"e-stamp\" :class=\"[toneClass, size === 'sm' && 'e-stamp--sm']\">\n    <EIcon v-if=\"icon\" :name=\"icon\" bold />\n    <span class=\"e-stamp-word\"><slot>{{ text }}</slot></span>\n    <span v-if=\"detail\" class=\"e-stamp-detail\">{{ detail }}</span>\n  </span>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-stamp {\n    --e-soft: var(--e-surface-tint);\n    --e-strong: var(--e-ink);\n    --e-on: var(--e-surface);\n\n    display: inline-flex;\n    flex-wrap: nowrap;\n    white-space: nowrap;\n    align-items: center;\n    gap: var(--e-space-2);\n\n    --e-bc: var(--e-strong);\n\n    min-height: calc(var(--e-chip-height) + var(--e-space-1));\n    padding: 0 var(--e-space-3);\n    border-radius: var(--e-radius-sm);\n    background: var(--e-strong);\n    color: var(--e-on);\n    box-shadow: inset 0 0 0 var(--e-stroke-card) var(--e-bc);\n    cursor: default;\n    justify-self: start;\n  }\n\n  .e-stamp--success {\n    --e-soft: var(--e-secondary-soft);\n    --e-strong: var(--e-secondary);\n    --e-on: var(--e-on-secondary);\n  }\n\n  .e-stamp--info {\n    --e-soft: var(--e-surface-tint);\n    --e-strong: var(--e-primary);\n    --e-on: var(--e-on-primary);\n  }\n\n  .e-stamp--danger {\n    --e-soft: var(--e-danger-soft);\n    --e-strong: var(--e-danger);\n    --e-on: var(--e-on-danger);\n  }\n\n  .e-stamp--warning {\n    --e-soft: var(--e-warning-soft);\n    --e-strong: var(--e-warning-strong);\n    --e-on: var(--e-surface);\n  }\n\n  .e-stamp .e-stamp-detail {\n    border-inline-start-color: color-mix(in srgb, var(--e-on) 55%, transparent);\n  }\n\n  .e-stamp-word {\n    font: 600 var(--e-text-xs) / 16px var(--e-font-mono);\n    letter-spacing: 0.1em;\n    text-transform: uppercase;\n  }\n\n  .e-stamp-detail {\n    font: 500 var(--e-text-xs) / 1 var(--e-font-mono);\n    letter-spacing: 0.04em;\n    padding-inline-start: var(--e-space-2);\n    border-inline-start: var(--e-stroke-hair) solid currentColor;\n  }\n\n  .e-stamp .e-icon {\n    width: 14px;\n    height: 14px;\n  }\n\n  .e-stamp--sm {\n    min-height: var(--e-chip-height);\n    gap: var(--e-space-1);\n    align-self: flex-start;\n  }\n\n  .e-stamp--sm .e-icon {\n    width: 13px;\n    height: 13px;\n  }\n\n  .e-stamp--sm .e-stamp-word {\n    font-size: var(--e-text-xs);\n    line-height: 14px;\n    letter-spacing: 0.06em;\n  }\n\n  @media (forced-colors: active) {\n    .e-stamp {\n      border: var(--e-stroke-card) solid CanvasText;\n    }\n  }\n\n  @media print {\n    .e-stamp {\n      border: var(--e-stroke-card) solid var(--e-print-ink);\n      outline: 0;\n      background: none;\n      box-shadow: none;\n      color: var(--e-print-ink);\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"EStamp.js","names":["_sfc_main","EStamp_vue_vue_type_script_setup_true_lang_default","EStamp_default"],"sources":["../../../src/components/Stamp/EStamp.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nexport type StampTone = \"neutral\" | \"ink\" | \"success\" | \"info\" | \"warning\" | \"danger\";\nexport type StampStatus =\n  \"paid\" | \"due\" | \"overdue\" | \"action\" | \"scheduled\" | \"confirmed\" | \"cancelled\" | \"signed\" | \"pending\" | \"complete\";\n\nconst props = defineProps<{\n  /** A preset: sets the tone and the word (message `status.<name>`). */\n  status?: StampStatus;\n  /** Overrides the preset's tone. Without a status it is `neutral` (ink; `ink` is the same). `success`: paid, confirmed. `info`: due, scheduled. `warning`: needs attention. `danger`: overdue, failed. @default \"ink\" */\n  tone?: StampTone;\n  /** The word. Overrides the preset's; the default slot overrides both. @default preset's word, else Status */\n  label?: string;\n  /** A glyph before the word. None by default. */\n  icon?: IconProp;\n  /** A date or day count, set after the word. */\n  detail?: string;\n  /** Shorter, for rows and tables. */\n  small?: boolean;\n}>();\n\ndefineSlots<{\n  /** The word, instead of `label` or the preset's. Write sentence case; the stamp sets it in capitals. */\n  default?(): unknown;\n}>();\n\nconst PRESETS: Record<StampStatus, StampTone> = {\n  paid: \"success\",\n  due: \"info\",\n  overdue: \"danger\",\n  action: \"warning\",\n  scheduled: \"info\",\n  confirmed: \"success\",\n  cancelled: \"danger\",\n  signed: \"success\",\n  pending: \"info\",\n  complete: \"success\",\n};\n\nconst t = useMessages();\nconst preset = computed(() => (props.status ? PRESETS[props.status] : undefined));\nconst tone = computed<StampTone>(() => props.tone || preset.value || \"neutral\");\nconst toneClass = computed(() => (tone.value === \"neutral\" || tone.value === \"ink\" ? null : `e-stamp--${tone.value}`));\nconst text = computed(() => props.label || (preset.value ? t(`status.${props.status}`) : t(\"status\")));\n</script>\n\n<template>\n  <span class=\"e-stamp\" :class=\"[toneClass, small && 'e-stamp--sm']\">\n    <EIcon v-if=\"icon\" :name=\"icon\" bold />\n    <span class=\"e-stamp-word\"><slot>{{ text }}</slot></span>\n    <span v-if=\"detail\" class=\"e-stamp-detail\">{{ detail }}</span>\n  </span>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-stamp {\n    --e-soft: var(--e-surface-tint);\n    --e-strong: var(--e-ink);\n    --e-on: var(--e-surface);\n\n    display: inline-flex;\n    flex-wrap: nowrap;\n    white-space: nowrap;\n    align-items: center;\n    gap: var(--e-space-2);\n    min-height: calc(var(--e-chip-height) + var(--e-space-1));\n    padding: 0 var(--e-space-3);\n    border-radius: var(--e-radius-sm);\n    background: var(--e-strong);\n    color: var(--e-on);\n    cursor: default;\n    justify-self: start;\n  }\n\n  .e-stamp--success {\n    --e-soft: var(--e-secondary-soft);\n    --e-strong: var(--e-secondary);\n    --e-on: var(--e-on-secondary);\n  }\n\n  .e-stamp--info {\n    --e-soft: var(--e-surface-tint);\n    --e-strong: var(--e-primary);\n    --e-on: var(--e-on-primary);\n  }\n\n  .e-stamp--danger {\n    --e-soft: var(--e-danger-soft);\n    --e-strong: var(--e-danger);\n    --e-on: var(--e-on-danger);\n  }\n\n  .e-stamp--warning {\n    --e-soft: var(--e-warning-soft);\n    --e-strong: var(--e-warning-strong);\n    --e-on: var(--e-surface);\n  }\n\n  .e-stamp .e-stamp-detail {\n    border-inline-start-color: color-mix(in srgb, var(--e-on) 55%, transparent);\n  }\n\n  .e-stamp-word {\n    font: 600 var(--e-text-xs) / 16px var(--e-font-mono);\n    letter-spacing: 0.1em;\n    text-transform: uppercase;\n  }\n\n  .e-stamp-detail {\n    font: 500 var(--e-text-xs) / 1 var(--e-font-mono);\n    letter-spacing: 0.04em;\n    padding-inline-start: var(--e-space-2);\n    border-inline-start: var(--e-stroke-hair) solid currentColor;\n  }\n\n  .e-stamp .e-icon {\n    width: 14px;\n    height: 14px;\n  }\n\n  .e-stamp--sm {\n    min-height: var(--e-chip-height);\n    gap: var(--e-space-1);\n    align-self: flex-start;\n  }\n\n  .e-stamp--sm .e-icon {\n    width: 13px;\n    height: 13px;\n  }\n\n  .e-stamp--sm .e-stamp-word {\n    font-size: var(--e-text-xs);\n    line-height: 14px;\n    letter-spacing: 0.06em;\n  }\n\n  @media (forced-colors: active) {\n    .e-stamp {\n      border: var(--e-stroke-card) solid CanvasText;\n    }\n  }\n\n  @media print {\n    .e-stamp {\n      border: var(--e-stroke-card) solid var(--e-print-ink);\n      outline: 0;\n      background: none;\n      box-shadow: none;\n      color: var(--e-print-ink);\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Stamp/EStamp.vue.d.ts

@@ -12,8 +12,8 @@ type __VLS_Props = {
     icon?: IconProp;
     /** A date or day count, set after the word. */
     detail?: string;
-    /** `sm` is shorter, for rows and tables. @default "md" */
-    size?: "sm" | "md";
+    /** Shorter, for rows and tables. */
+    small?: boolean;
 };
 type __VLS_Slots = {
     /** The word, instead of `label` or the preset's. Write sentence case; the stamp sets it in capitals. */

package/dist/components/Stamp/EStamp.vue_vue_type_script_setup_true_lang.js

@@ -14,7 +14,7 @@ var p = { class: "e-stamp-word" }, m = {
 		label: {},
 		icon: {},
 		detail: {},
-		size: {}
+		small: { type: Boolean }
 	},
 	setup(c) {
 		let h = c, g = {
@@ -29,7 +29,7 @@ var p = { class: "e-stamp-word" }, m = {
 			pending: "info",
 			complete: "success"
 		}, _ = e(), v = n(() => h.status ? g[h.status] : void 0), y = n(() => h.tone || v.value || "neutral"), b = n(() => y.value === "neutral" || y.value === "ink" ? null : `e-stamp--${y.value}`), x = n(() => h.label || (v.value ? _(`status.${h.status}`) : _("status")));
-		return (e, n) => (u(), a("span", { class: l(["e-stamp", [b.value, c.size === "sm" && "e-stamp--sm"]]) }, [
+		return (e, n) => (u(), a("span", { class: l(["e-stamp", [b.value, c.small && "e-stamp--sm"]]) }, [
 			c.icon ? (u(), r(t, {
 				key: 0,
 				name: c.icon,

package/dist/components/Stamp/EStamp.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"EStamp.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_createBlock","EIcon","_createCommentVNode","_createElementVNode","_renderSlot","_createTextVNode","_toDisplayString","EIcon_default","_hoisted_1","_hoisted_2","EStamp_vue_vue_type_script_setup_true_lang_default","props","__props","PRESETS","t","useMessages","preset","computed","tone","toneClass","text","openBlock","createElementBlock","normalizeClass","createBlock","createCommentVNode","createElementVNode","renderSlot","_ctx","createTextVNode","toDisplayString"],"sources":["../../../src/components/Stamp/EStamp.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nexport type StampTone = \"neutral\" | \"ink\" | \"success\" | \"info\" | \"warning\" | \"danger\";\nexport type StampStatus =\n  \"paid\" | \"due\" | \"overdue\" | \"action\" | \"scheduled\" | \"confirmed\" | \"cancelled\" | \"signed\" | \"pending\" | \"complete\";\n\nconst props = defineProps<{\n  /** A preset: sets the tone and the word (message `status.<name>`). */\n  status?: StampStatus;\n  /** Overrides the preset's tone. Without a status it is `neutral` (ink; `ink` is the same). `success`: paid, confirmed. `info`: due, scheduled. `warning`: needs attention. `danger`: overdue, failed. @default \"ink\" */\n  tone?: StampTone;\n  /** The word. Overrides the preset's; the default slot overrides both. @default preset's word, else Status */\n  label?: string;\n  /** A glyph before the word. None by default. */\n  icon?: IconProp;\n  /** A date or day count, set after the word. */\n  detail?: string;\n  /** `sm` is shorter, for rows and tables. @default \"md\" */\n  size?: \"sm\" | \"md\";\n}>();\n\ndefineSlots<{\n  /** The word, instead of `label` or the preset's. Write sentence case; the stamp sets it in capitals. */\n  default?(): unknown;\n}>();\n\nconst PRESETS: Record<StampStatus, StampTone> = {\n  paid: \"success\",\n  due: \"info\",\n  overdue: \"danger\",\n  action: \"warning\",\n  scheduled: \"info\",\n  confirmed: \"success\",\n  cancelled: \"danger\",\n  signed: \"success\",\n  pending: \"info\",\n  complete: \"success\",\n};\n\nconst t = useMessages();\nconst preset = computed(() => (props.status ? PRESETS[props.status] : undefined));\nconst tone = computed<StampTone>(() => props.tone || preset.value || \"neutral\");\nconst toneClass = computed(() => (tone.value === \"neutral\" || tone.value === \"ink\" ? null : `e-stamp--${tone.value}`));\nconst text = computed(() => props.label || (preset.value ? t(`status.${props.status}`) : t(\"status\")));\n</script>\n\n<template>\n  <span class=\"e-stamp\" :class=\"[toneClass, size === 'sm' && 'e-stamp--sm']\">\n    <EIcon v-if=\"icon\" :name=\"icon\" bold />\n    <span class=\"e-stamp-word\"><slot>{{ text }}</slot></span>\n    <span v-if=\"detail\" class=\"e-stamp-detail\">{{ detail }}</span>\n  </span>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-stamp {\n    --e-soft: var(--e-surface-tint);\n    --e-strong: var(--e-ink);\n    --e-on: var(--e-surface);\n\n    display: inline-flex;\n    flex-wrap: nowrap;\n    white-space: nowrap;\n    align-items: center;\n    gap: var(--e-space-2);\n\n    --e-bc: var(--e-strong);\n\n    min-height: calc(var(--e-chip-height) + var(--e-space-1));\n    padding: 0 var(--e-space-3);\n    border-radius: var(--e-radius-sm);\n    background: var(--e-strong);\n    color: var(--e-on);\n    box-shadow: inset 0 0 0 var(--e-stroke-card) var(--e-bc);\n    cursor: default;\n    justify-self: start;\n  }\n\n  .e-stamp--success {\n    --e-soft: var(--e-secondary-soft);\n    --e-strong: var(--e-secondary);\n    --e-on: var(--e-on-secondary);\n  }\n\n  .e-stamp--info {\n    --e-soft: var(--e-surface-tint);\n    --e-strong: var(--e-primary);\n    --e-on: var(--e-on-primary);\n  }\n\n  .e-stamp--danger {\n    --e-soft: var(--e-danger-soft);\n    --e-strong: var(--e-danger);\n    --e-on: var(--e-on-danger);\n  }\n\n  .e-stamp--warning {\n    --e-soft: var(--e-warning-soft);\n    --e-strong: var(--e-warning-strong);\n    --e-on: var(--e-surface);\n  }\n\n  .e-stamp .e-stamp-detail {\n    border-inline-start-color: color-mix(in srgb, var(--e-on) 55%, transparent);\n  }\n\n  .e-stamp-word {\n    font: 600 var(--e-text-xs) / 16px var(--e-font-mono);\n    letter-spacing: 0.1em;\n    text-transform: uppercase;\n  }\n\n  .e-stamp-detail {\n    font: 500 var(--e-text-xs) / 1 var(--e-font-mono);\n    letter-spacing: 0.04em;\n    padding-inline-start: var(--e-space-2);\n    border-inline-start: var(--e-stroke-hair) solid currentColor;\n  }\n\n  .e-stamp .e-icon {\n    width: 14px;\n    height: 14px;\n  }\n\n  .e-stamp--sm {\n    min-height: var(--e-chip-height);\n    gap: var(--e-space-1);\n    align-self: flex-start;\n  }\n\n  .e-stamp--sm .e-icon {\n    width: 13px;\n    height: 13px;\n  }\n\n  .e-stamp--sm .e-stamp-word {\n    font-size: var(--e-text-xs);\n    line-height: 14px;\n    letter-spacing: 0.06em;\n  }\n\n  @media (forced-colors: active) {\n    .e-stamp {\n      border: var(--e-stroke-card) solid CanvasText;\n    }\n  }\n\n  @media print {\n    .e-stamp {\n      border: var(--e-stroke-card) solid var(--e-print-ink);\n      outline: 0;\n      background: none;\n      box-shadow: none;\n      color: var(--e-print-ink);\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAWA,IAAMc,IAAQC,GAoBRC,IAA0C;GAC9C,MAAM;GACN,KAAK;GACL,SAAS;GACT,QAAQ;GACR,WAAW;GACX,WAAW;GACX,WAAW;GACX,QAAQ;GACR,SAAS;GACT,UAAU;EACZ,GAEMC,IAAIC,EAAY,GAChBC,IAASC,QAAgBN,EAAM,SAASE,EAAQF,EAAM,UAAU,KAAA,CAAU,GAC1EO,IAAOD,QAA0BN,EAAM,QAAQK,EAAO,SAAS,SAAS,GACxEG,IAAYF,QAAgBC,EAAK,UAAU,aAAaA,EAAK,UAAU,QAAQ,OAAO,YAAYA,EAAK,OAAQ,GAC/GE,IAAOH,QAAeN,EAAM,UAAUK,EAAO,QAAQF,EAAE,UAAUH,EAAM,QAAQ,IAAIG,EAAE,QAAQ,EAAE;E,kBAInGjB,EAAA,GAAAC,EAIO,QAAA,EAJD,OAAKC,EAAA,CAAC,WAAS,CAAUoB,EAAA,OAAWP,EAAA,SAAI,QAAA,aAAA,CAAA,CAAA,E;GAC/BA,EAAA,QAAbf,EAAA,GAAAG,EAAuCC,GAAA;;IAAnB,MAAMW,EAAA;IAAM,MAAA;;GAChCT,EAAyD,QAAzDK,GAAyD,CAA9BJ,EAAuBwB,EAAA,QAAA,WAAA,CAAA,SAAA,CAAdvB,EAAAC,EAAAc,EAAA,KAAI,GAAA,CAAA,C;GAC5BR,EAAA,UAAZf,EAAA,GAAAC,EAA8D,QAA9DW,GAA8DH,EAAhBM,EAAA,MAAM,GAAA,CAAA,K"}
+{"version":3,"file":"EStamp.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_createBlock","EIcon","_createCommentVNode","_createElementVNode","_renderSlot","_createTextVNode","_toDisplayString","EIcon_default","_hoisted_1","_hoisted_2","EStamp_vue_vue_type_script_setup_true_lang_default","props","__props","PRESETS","t","useMessages","preset","computed","tone","toneClass","text","openBlock","createElementBlock","normalizeClass","createBlock","createCommentVNode","createElementVNode","renderSlot","_ctx","createTextVNode","toDisplayString"],"sources":["../../../src/components/Stamp/EStamp.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nexport type StampTone = \"neutral\" | \"ink\" | \"success\" | \"info\" | \"warning\" | \"danger\";\nexport type StampStatus =\n  \"paid\" | \"due\" | \"overdue\" | \"action\" | \"scheduled\" | \"confirmed\" | \"cancelled\" | \"signed\" | \"pending\" | \"complete\";\n\nconst props = defineProps<{\n  /** A preset: sets the tone and the word (message `status.<name>`). */\n  status?: StampStatus;\n  /** Overrides the preset's tone. Without a status it is `neutral` (ink; `ink` is the same). `success`: paid, confirmed. `info`: due, scheduled. `warning`: needs attention. `danger`: overdue, failed. @default \"ink\" */\n  tone?: StampTone;\n  /** The word. Overrides the preset's; the default slot overrides both. @default preset's word, else Status */\n  label?: string;\n  /** A glyph before the word. None by default. */\n  icon?: IconProp;\n  /** A date or day count, set after the word. */\n  detail?: string;\n  /** Shorter, for rows and tables. */\n  small?: boolean;\n}>();\n\ndefineSlots<{\n  /** The word, instead of `label` or the preset's. Write sentence case; the stamp sets it in capitals. */\n  default?(): unknown;\n}>();\n\nconst PRESETS: Record<StampStatus, StampTone> = {\n  paid: \"success\",\n  due: \"info\",\n  overdue: \"danger\",\n  action: \"warning\",\n  scheduled: \"info\",\n  confirmed: \"success\",\n  cancelled: \"danger\",\n  signed: \"success\",\n  pending: \"info\",\n  complete: \"success\",\n};\n\nconst t = useMessages();\nconst preset = computed(() => (props.status ? PRESETS[props.status] : undefined));\nconst tone = computed<StampTone>(() => props.tone || preset.value || \"neutral\");\nconst toneClass = computed(() => (tone.value === \"neutral\" || tone.value === \"ink\" ? null : `e-stamp--${tone.value}`));\nconst text = computed(() => props.label || (preset.value ? t(`status.${props.status}`) : t(\"status\")));\n</script>\n\n<template>\n  <span class=\"e-stamp\" :class=\"[toneClass, small && 'e-stamp--sm']\">\n    <EIcon v-if=\"icon\" :name=\"icon\" bold />\n    <span class=\"e-stamp-word\"><slot>{{ text }}</slot></span>\n    <span v-if=\"detail\" class=\"e-stamp-detail\">{{ detail }}</span>\n  </span>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-stamp {\n    --e-soft: var(--e-surface-tint);\n    --e-strong: var(--e-ink);\n    --e-on: var(--e-surface);\n\n    display: inline-flex;\n    flex-wrap: nowrap;\n    white-space: nowrap;\n    align-items: center;\n    gap: var(--e-space-2);\n    min-height: calc(var(--e-chip-height) + var(--e-space-1));\n    padding: 0 var(--e-space-3);\n    border-radius: var(--e-radius-sm);\n    background: var(--e-strong);\n    color: var(--e-on);\n    cursor: default;\n    justify-self: start;\n  }\n\n  .e-stamp--success {\n    --e-soft: var(--e-secondary-soft);\n    --e-strong: var(--e-secondary);\n    --e-on: var(--e-on-secondary);\n  }\n\n  .e-stamp--info {\n    --e-soft: var(--e-surface-tint);\n    --e-strong: var(--e-primary);\n    --e-on: var(--e-on-primary);\n  }\n\n  .e-stamp--danger {\n    --e-soft: var(--e-danger-soft);\n    --e-strong: var(--e-danger);\n    --e-on: var(--e-on-danger);\n  }\n\n  .e-stamp--warning {\n    --e-soft: var(--e-warning-soft);\n    --e-strong: var(--e-warning-strong);\n    --e-on: var(--e-surface);\n  }\n\n  .e-stamp .e-stamp-detail {\n    border-inline-start-color: color-mix(in srgb, var(--e-on) 55%, transparent);\n  }\n\n  .e-stamp-word {\n    font: 600 var(--e-text-xs) / 16px var(--e-font-mono);\n    letter-spacing: 0.1em;\n    text-transform: uppercase;\n  }\n\n  .e-stamp-detail {\n    font: 500 var(--e-text-xs) / 1 var(--e-font-mono);\n    letter-spacing: 0.04em;\n    padding-inline-start: var(--e-space-2);\n    border-inline-start: var(--e-stroke-hair) solid currentColor;\n  }\n\n  .e-stamp .e-icon {\n    width: 14px;\n    height: 14px;\n  }\n\n  .e-stamp--sm {\n    min-height: var(--e-chip-height);\n    gap: var(--e-space-1);\n    align-self: flex-start;\n  }\n\n  .e-stamp--sm .e-icon {\n    width: 13px;\n    height: 13px;\n  }\n\n  .e-stamp--sm .e-stamp-word {\n    font-size: var(--e-text-xs);\n    line-height: 14px;\n    letter-spacing: 0.06em;\n  }\n\n  @media (forced-colors: active) {\n    .e-stamp {\n      border: var(--e-stroke-card) solid CanvasText;\n    }\n  }\n\n  @media print {\n    .e-stamp {\n      border: var(--e-stroke-card) solid var(--e-print-ink);\n      outline: 0;\n      background: none;\n      box-shadow: none;\n      color: var(--e-print-ink);\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAWA,IAAMc,IAAQC,GAoBRC,IAA0C;GAC9C,MAAM;GACN,KAAK;GACL,SAAS;GACT,QAAQ;GACR,WAAW;GACX,WAAW;GACX,WAAW;GACX,QAAQ;GACR,SAAS;GACT,UAAU;EACZ,GAEMC,IAAIC,EAAY,GAChBC,IAASC,QAAgBN,EAAM,SAASE,EAAQF,EAAM,UAAU,KAAA,CAAU,GAC1EO,IAAOD,QAA0BN,EAAM,QAAQK,EAAO,SAAS,SAAS,GACxEG,IAAYF,QAAgBC,EAAK,UAAU,aAAaA,EAAK,UAAU,QAAQ,OAAO,YAAYA,EAAK,OAAQ,GAC/GE,IAAOH,QAAeN,EAAM,UAAUK,EAAO,QAAQF,EAAE,UAAUH,EAAM,QAAQ,IAAIG,EAAE,QAAQ,EAAE;E,kBAInGjB,EAAA,GAAAC,EAIO,QAAA,EAJD,OAAKC,EAAA,CAAC,WAAS,CAAUoB,EAAA,OAAWP,EAAA,SAAK,aAAA,CAAA,CAAA,E;GAChCA,EAAA,QAAbf,EAAA,GAAAG,EAAuCC,GAAA;;IAAnB,MAAMW,EAAA;IAAM,MAAA;;GAChCT,EAAyD,QAAzDK,GAAyD,CAA9BJ,EAAuBwB,EAAA,QAAA,WAAA,CAAA,SAAA,CAAdvB,EAAAC,EAAAc,EAAA,KAAI,GAAA,CAAA,C;GAC5BR,EAAA,UAAZf,EAAA,GAAAC,EAA8D,QAA9DW,GAA8DH,EAAhBM,EAAA,MAAM,GAAA,CAAA,K"}

package/dist/components/Stepper/EStepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"EStepper.js","names":["_sfc_main","EStepper_vue_vue_type_script_setup_true_lang_default","EStepper_default"],"sources":["../../../src/components/Stepper/EStepper.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EIcon from \"../Icon/EIcon.vue\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nexport interface Step {\n  /** The name of the step. */\n  label: string;\n  /** `done` is finished, `current` is where the person is, `upcoming` is still ahead (`todo` is accepted as the same thing). */\n  state: \"done\" | \"current\" | \"upcoming\" | \"todo\";\n}\n\ndefineProps<{\n  /** The steps in order: `{ label, state }`; `state` is `done`, `current` or `upcoming` (`todo` is an alias). Exactly one is normally `current`. Keep labels to one or two words. */\n  steps: Step[];\n  /** The list's accessible name. @default \"Progress\" */\n  label?: string;\n}>();\n\nconst t = useMessages();\n</script>\n\n<template>\n  <ol class=\"e-steps\" :aria-label=\"label || t('progress')\">\n    <li\n      v-for=\"(step, i) in steps\"\n      :key=\"i\"\n      class=\"e-step\"\n      :data-state=\"step.state === 'todo' ? 'upcoming' : step.state\"\n      :aria-current=\"step.state === 'current' ? 'step' : undefined\"\n    >\n      <span class=\"e-step-dot\">\n        <EIcon v-if=\"step.state === 'done'\" name=\"check\" small />\n        <template v-else>{{ i + 1 }}</template>\n      </span>\n      <span class=\"e-step-label\">\n        {{ step.label }}\n        <span v-if=\"step.state === 'done'\" class=\"e-sr\"> ({{ t(\"done\") }})</span>\n      </span>\n    </li>\n  </ol>\n</template>\n\n<style>\n@layer e.page {\n  .e-steps {\n    display: grid;\n    grid-auto-flow: column;\n    grid-auto-columns: 1fr;\n    gap: var(--e-space-2);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    counter-reset: s;\n  }\n\n  .e-step {\n    --e-dot: 28px;\n\n    display: grid;\n    justify-items: center;\n    align-content: start;\n    gap: var(--e-space-2);\n    position: relative;\n    text-align: center;\n    min-width: 0;\n  }\n\n  .e-step::before {\n    content: \"\";\n    position: absolute;\n    top: calc((var(--e-dot) - var(--e-stroke-focus)) / 2);\n    inset-inline-end: 50%;\n    width: 100%;\n    border-top: var(--e-stroke-focus) solid var(--e-border-strong);\n    z-index: 0;\n  }\n\n  .e-step:first-child::before {\n    display: none;\n  }\n\n  .e-step[data-state=\"done\"]::before {\n    border-top-color: var(--e-primary);\n  }\n\n  .e-step[data-state=\"current\"]::before {\n    border-top-color: var(--e-primary);\n  }\n\n  .e-step-dot {\n    position: relative;\n    z-index: var(--e-z-raised);\n    display: grid;\n    place-items: center;\n    width: var(--e-dot);\n    height: var(--e-dot);\n    border-radius: 50%;\n    border: var(--e-stroke-edge) dashed var(--e-border-strong);\n    background: var(--e-surface);\n    color: var(--e-muted);\n    font: 600 var(--e-text-xs) / 1 var(--e-font-mono);\n  }\n\n  .e-step[data-state=\"done\"] .e-step-dot {\n    border: var(--e-stroke-edge) solid var(--e-primary);\n    background: var(--e-primary);\n    color: var(--e-on-primary);\n  }\n\n  .e-step[data-state=\"current\"] .e-step-dot {\n    border: var(--e-stroke-focus) solid var(--e-primary);\n    color: var(--e-primary);\n    background: var(--e-surface);\n  }\n\n  .e-step-label {\n    font: 400 var(--e-text-sm) / 1.3 var(--e-font-sans);\n    color: var(--e-muted);\n    overflow-wrap: anywhere;\n  }\n\n  .e-step[data-state=\"current\"] .e-step-label {\n    color: var(--e-ink);\n    font-weight: 600;\n  }\n\n  .e-step[data-state=\"done\"] .e-step-label {\n    color: var(--e-ink);\n  }\n\n  /* stylelint-disable declaration-block-no-redundant-longhand-properties -- the longhands stay separate */\n  @media (max-width: 32rem) {\n    .e-steps {\n      grid-auto-flow: row;\n      gap: var(--e-space-3);\n    }\n\n    .e-step {\n      grid-template-columns: auto 1fr;\n      justify-items: start;\n      align-items: center;\n      text-align: start;\n    }\n\n    .e-step::before {\n      display: block;\n      top: calc(-1 * var(--e-space-3));\n      inset-inline-end: auto;\n      inset-inline-start: calc((var(--e-dot) - var(--e-stroke-focus)) / 2);\n      width: 0;\n      height: var(--e-space-3);\n      border-top: 0;\n      border-inline-start: var(--e-stroke-focus) solid var(--e-border-strong);\n    }\n\n    .e-step:first-child::before {\n      display: none;\n    }\n\n    .e-step[data-state=\"done\"]::before {\n      border-inline-start-color: var(--e-primary);\n    }\n\n    .e-step[data-state=\"current\"]::before {\n      border-inline-start-color: var(--e-primary);\n    }\n  }\n\n  /* stylelint-enable declaration-block-no-redundant-longhand-properties */\n\n  @media (forced-colors: active) {\n    .e-step[data-state=\"done\"] .e-step-dot {\n      forced-color-adjust: none;\n      background: Highlight;\n      border-color: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"EStepper.js","names":["_sfc_main","EStepper_vue_vue_type_script_setup_true_lang_default","EStepper_default"],"sources":["../../../src/components/Stepper/EStepper.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EIcon from \"../Icon/EIcon.vue\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nexport interface Step {\n  /** The name of the step. */\n  label: string;\n  /** `done` is finished, `current` is where the person is, `upcoming` is still ahead (`todo` is accepted as the same thing). */\n  state: \"done\" | \"current\" | \"upcoming\" | \"todo\";\n}\n\ndefineProps<{\n  /** The steps in order: `{ label, state }`; `state` is `done`, `current` or `upcoming` (`todo` is an alias). Exactly one is normally `current`. Keep labels to one or two words. */\n  steps: Step[];\n  /** The list's accessible name. @default \"Progress\" */\n  label?: string;\n}>();\n\nconst t = useMessages();\n</script>\n\n<template>\n  <ol class=\"e-steps\" :aria-label=\"label || t('progress')\">\n    <li\n      v-for=\"(step, i) in steps\"\n      :key=\"i\"\n      class=\"e-step\"\n      :data-state=\"step.state === 'todo' ? 'upcoming' : step.state\"\n      :aria-current=\"step.state === 'current' ? 'step' : undefined\"\n    >\n      <span class=\"e-step-dot\">\n        <EIcon v-if=\"step.state === 'done'\" name=\"check\" small />\n        <template v-else>{{ i + 1 }}</template>\n      </span>\n      <span class=\"e-step-label\">\n        {{ step.label }}\n        <span v-if=\"step.state === 'done'\" class=\"e-sr\"> ({{ t(\"done\") }})</span>\n      </span>\n    </li>\n  </ol>\n</template>\n\n<style>\n@layer e.page {\n  .e-steps {\n    display: grid;\n    grid-auto-flow: column;\n    grid-auto-columns: 1fr;\n    gap: var(--e-space-2);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    counter-reset: s;\n  }\n\n  .e-step {\n    --e-dot: 28px;\n\n    display: grid;\n    justify-items: center;\n    align-content: start;\n    gap: var(--e-space-2);\n    position: relative;\n    text-align: center;\n    min-width: 0;\n  }\n\n  .e-step::before {\n    content: \"\";\n    position: absolute;\n    top: calc((var(--e-dot) - var(--e-stroke-focus)) / 2);\n    inset-inline-end: 50%;\n    width: 100%;\n    border-top: var(--e-stroke-focus) solid var(--e-border-strong);\n    z-index: 0;\n  }\n\n  .e-step:first-child::before {\n    display: none;\n  }\n\n  .e-step[data-state=\"done\"]::before {\n    border-top-color: var(--e-primary);\n  }\n\n  .e-step[data-state=\"current\"]::before {\n    border-top-color: var(--e-primary);\n  }\n\n  .e-step-dot {\n    position: relative;\n    z-index: var(--e-z-raised);\n    display: grid;\n    place-items: center;\n    width: var(--e-dot);\n    height: var(--e-dot);\n    border-radius: 50%;\n    outline: var(--e-stroke-edge) dashed var(--e-border-strong);\n    outline-offset: calc(-1 * var(--e-stroke-edge));\n    background: var(--e-surface);\n    color: var(--e-muted);\n    font: 600 var(--e-text-xs) / 1 var(--e-font-mono);\n  }\n\n  .e-step[data-state=\"done\"] .e-step-dot {\n    outline: 0;\n    background: var(--e-primary);\n    color: var(--e-on-primary);\n  }\n\n  .e-step[data-state=\"current\"] .e-step-dot {\n    outline: 0;\n    box-shadow: inset 0 0 0 var(--e-stroke-focus) var(--e-primary);\n    color: var(--e-primary);\n    background: var(--e-surface);\n  }\n\n  .e-step-label {\n    font: 400 var(--e-text-sm) / 1.3 var(--e-font-sans);\n    color: var(--e-muted);\n    overflow-wrap: anywhere;\n  }\n\n  .e-step[data-state=\"current\"] .e-step-label {\n    color: var(--e-ink);\n    font-weight: 600;\n  }\n\n  .e-step[data-state=\"done\"] .e-step-label {\n    color: var(--e-ink);\n  }\n\n  /* stylelint-disable declaration-block-no-redundant-longhand-properties -- the longhands stay separate */\n  @media (max-width: 32rem) {\n    .e-steps {\n      grid-auto-flow: row;\n      gap: var(--e-space-3);\n    }\n\n    .e-step {\n      grid-template-columns: auto 1fr;\n      justify-items: start;\n      align-items: center;\n      text-align: start;\n    }\n\n    .e-step::before {\n      display: block;\n      top: calc(-1 * var(--e-space-3));\n      inset-inline-end: auto;\n      inset-inline-start: calc((var(--e-dot) - var(--e-stroke-focus)) / 2);\n      width: 0;\n      height: var(--e-space-3);\n      border-top: 0;\n      border-inline-start: var(--e-stroke-focus) solid var(--e-border-strong);\n    }\n\n    .e-step:first-child::before {\n      display: none;\n    }\n\n    .e-step[data-state=\"done\"]::before {\n      border-inline-start-color: var(--e-primary);\n    }\n\n    .e-step[data-state=\"current\"]::before {\n      border-inline-start-color: var(--e-primary);\n    }\n  }\n\n  /* stylelint-enable declaration-block-no-redundant-longhand-properties */\n\n  @media (forced-colors: active) {\n    .e-step[data-state=\"done\"] .e-step-dot {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Stepper/EStepper.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"EStepper.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_unref","_Fragment","_renderList","_createElementVNode","_createBlock","EIcon","_createTextVNode","_toDisplayString","_createCommentVNode","EIcon_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","EStepper_vue_vue_type_script_setup_true_lang_default","t","useMessages","openBlock","createElementBlock","__props","unref","Fragment","renderList","i","step","createElementVNode","createBlock","createTextVNode","toDisplayString","createCommentVNode"],"sources":["../../../src/components/Stepper/EStepper.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EIcon from \"../Icon/EIcon.vue\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nexport interface Step {\n  /** The name of the step. */\n  label: string;\n  /** `done` is finished, `current` is where the person is, `upcoming` is still ahead (`todo` is accepted as the same thing). */\n  state: \"done\" | \"current\" | \"upcoming\" | \"todo\";\n}\n\ndefineProps<{\n  /** The steps in order: `{ label, state }`; `state` is `done`, `current` or `upcoming` (`todo` is an alias). Exactly one is normally `current`. Keep labels to one or two words. */\n  steps: Step[];\n  /** The list's accessible name. @default \"Progress\" */\n  label?: string;\n}>();\n\nconst t = useMessages();\n</script>\n\n<template>\n  <ol class=\"e-steps\" :aria-label=\"label || t('progress')\">\n    <li\n      v-for=\"(step, i) in steps\"\n      :key=\"i\"\n      class=\"e-step\"\n      :data-state=\"step.state === 'todo' ? 'upcoming' : step.state\"\n      :aria-current=\"step.state === 'current' ? 'step' : undefined\"\n    >\n      <span class=\"e-step-dot\">\n        <EIcon v-if=\"step.state === 'done'\" name=\"check\" small />\n        <template v-else>{{ i + 1 }}</template>\n      </span>\n      <span class=\"e-step-label\">\n        {{ step.label }}\n        <span v-if=\"step.state === 'done'\" class=\"e-sr\"> ({{ t(\"done\") }})</span>\n      </span>\n    </li>\n  </ol>\n</template>\n\n<style>\n@layer e.page {\n  .e-steps {\n    display: grid;\n    grid-auto-flow: column;\n    grid-auto-columns: 1fr;\n    gap: var(--e-space-2);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    counter-reset: s;\n  }\n\n  .e-step {\n    --e-dot: 28px;\n\n    display: grid;\n    justify-items: center;\n    align-content: start;\n    gap: var(--e-space-2);\n    position: relative;\n    text-align: center;\n    min-width: 0;\n  }\n\n  .e-step::before {\n    content: \"\";\n    position: absolute;\n    top: calc((var(--e-dot) - var(--e-stroke-focus)) / 2);\n    inset-inline-end: 50%;\n    width: 100%;\n    border-top: var(--e-stroke-focus) solid var(--e-border-strong);\n    z-index: 0;\n  }\n\n  .e-step:first-child::before {\n    display: none;\n  }\n\n  .e-step[data-state=\"done\"]::before {\n    border-top-color: var(--e-primary);\n  }\n\n  .e-step[data-state=\"current\"]::before {\n    border-top-color: var(--e-primary);\n  }\n\n  .e-step-dot {\n    position: relative;\n    z-index: var(--e-z-raised);\n    display: grid;\n    place-items: center;\n    width: var(--e-dot);\n    height: var(--e-dot);\n    border-radius: 50%;\n    border: var(--e-stroke-edge) dashed var(--e-border-strong);\n    background: var(--e-surface);\n    color: var(--e-muted);\n    font: 600 var(--e-text-xs) / 1 var(--e-font-mono);\n  }\n\n  .e-step[data-state=\"done\"] .e-step-dot {\n    border: var(--e-stroke-edge) solid var(--e-primary);\n    background: var(--e-primary);\n    color: var(--e-on-primary);\n  }\n\n  .e-step[data-state=\"current\"] .e-step-dot {\n    border: var(--e-stroke-focus) solid var(--e-primary);\n    color: var(--e-primary);\n    background: var(--e-surface);\n  }\n\n  .e-step-label {\n    font: 400 var(--e-text-sm) / 1.3 var(--e-font-sans);\n    color: var(--e-muted);\n    overflow-wrap: anywhere;\n  }\n\n  .e-step[data-state=\"current\"] .e-step-label {\n    color: var(--e-ink);\n    font-weight: 600;\n  }\n\n  .e-step[data-state=\"done\"] .e-step-label {\n    color: var(--e-ink);\n  }\n\n  /* stylelint-disable declaration-block-no-redundant-longhand-properties -- the longhands stay separate */\n  @media (max-width: 32rem) {\n    .e-steps {\n      grid-auto-flow: row;\n      gap: var(--e-space-3);\n    }\n\n    .e-step {\n      grid-template-columns: auto 1fr;\n      justify-items: start;\n      align-items: center;\n      text-align: start;\n    }\n\n    .e-step::before {\n      display: block;\n      top: calc(-1 * var(--e-space-3));\n      inset-inline-end: auto;\n      inset-inline-start: calc((var(--e-dot) - var(--e-stroke-focus)) / 2);\n      width: 0;\n      height: var(--e-space-3);\n      border-top: 0;\n      border-inline-start: var(--e-stroke-focus) solid var(--e-border-strong);\n    }\n\n    .e-step:first-child::before {\n      display: none;\n    }\n\n    .e-step[data-state=\"done\"]::before {\n      border-inline-start-color: var(--e-primary);\n    }\n\n    .e-step[data-state=\"current\"]::before {\n      border-inline-start-color: var(--e-primary);\n    }\n  }\n\n  /* stylelint-enable declaration-block-no-redundant-longhand-properties */\n\n  @media (forced-colors: active) {\n    .e-step[data-state=\"done\"] .e-step-dot {\n      forced-color-adjust: none;\n      background: Highlight;\n      border-color: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;EAmBA,IAAMkB,IAAIC,EAAY;E,kBAIpBnB,EAAA,GAAAC,EAiBK,MAAA;GAjBD,OAAM;GAAW,cAAYqB,EAAA,SAASpB,EAAAgB,CAAA,CAAC,CAAA,UAAA;E,KACzClB,EAAA,EAAA,GAAAC,EAeKE,GAAA,MAAAC,EAdiBkB,EAAA,QAAZ,GAAM,OADhBtB,EAAA,GAAAC,EAeK,MAAA;GAbF,KAAKyB;GACN,OAAM;GACL,cAAYC,EAAK,UAAK,SAAA,aAA2BA,EAAK;GACtD,gBAAcA,EAAK,UAAK,YAAA,SAA0B,KAAA;E,IAEnDtB,EAGO,QAHPS,GAGO,CAFQa,EAAK,UAAK,UAAvB3B,EAAA,GAAAM,EAAyDC,GAAA;;GAArB,MAAK;GAAQ,OAAA;E,OACjDP,EAAA,GAAAC,EAAuCE,GAAA,EAAA,KAAA,EAAA,GAAA,CAAnBK,EAAAC,EAAAiB,IAAC,CAAA,GAAA,CAAA,C,WAEvBrB,EAGO,QAHPU,GAGO,CAFFP,EAAAC,EAAAkB,EAAK,KAAK,IAAG,KAChB,CAAA,GAAYA,EAAK,UAAK,UAAtB3B,EAAA,GAAAC,EAAyE,QAAzEe,GAAgD,OAAEP,EAAGP,EAAAgB,CAAA,CAAC,CAAA,MAAA,CAAA,IAAW,KAAC,CAAA,K"}
+{"version":3,"file":"EStepper.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_unref","_Fragment","_renderList","_createElementVNode","_createBlock","EIcon","_createTextVNode","_toDisplayString","_createCommentVNode","EIcon_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","EStepper_vue_vue_type_script_setup_true_lang_default","t","useMessages","openBlock","createElementBlock","__props","unref","Fragment","renderList","i","step","createElementVNode","createBlock","createTextVNode","toDisplayString","createCommentVNode"],"sources":["../../../src/components/Stepper/EStepper.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EIcon from \"../Icon/EIcon.vue\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nexport interface Step {\n  /** The name of the step. */\n  label: string;\n  /** `done` is finished, `current` is where the person is, `upcoming` is still ahead (`todo` is accepted as the same thing). */\n  state: \"done\" | \"current\" | \"upcoming\" | \"todo\";\n}\n\ndefineProps<{\n  /** The steps in order: `{ label, state }`; `state` is `done`, `current` or `upcoming` (`todo` is an alias). Exactly one is normally `current`. Keep labels to one or two words. */\n  steps: Step[];\n  /** The list's accessible name. @default \"Progress\" */\n  label?: string;\n}>();\n\nconst t = useMessages();\n</script>\n\n<template>\n  <ol class=\"e-steps\" :aria-label=\"label || t('progress')\">\n    <li\n      v-for=\"(step, i) in steps\"\n      :key=\"i\"\n      class=\"e-step\"\n      :data-state=\"step.state === 'todo' ? 'upcoming' : step.state\"\n      :aria-current=\"step.state === 'current' ? 'step' : undefined\"\n    >\n      <span class=\"e-step-dot\">\n        <EIcon v-if=\"step.state === 'done'\" name=\"check\" small />\n        <template v-else>{{ i + 1 }}</template>\n      </span>\n      <span class=\"e-step-label\">\n        {{ step.label }}\n        <span v-if=\"step.state === 'done'\" class=\"e-sr\"> ({{ t(\"done\") }})</span>\n      </span>\n    </li>\n  </ol>\n</template>\n\n<style>\n@layer e.page {\n  .e-steps {\n    display: grid;\n    grid-auto-flow: column;\n    grid-auto-columns: 1fr;\n    gap: var(--e-space-2);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    counter-reset: s;\n  }\n\n  .e-step {\n    --e-dot: 28px;\n\n    display: grid;\n    justify-items: center;\n    align-content: start;\n    gap: var(--e-space-2);\n    position: relative;\n    text-align: center;\n    min-width: 0;\n  }\n\n  .e-step::before {\n    content: \"\";\n    position: absolute;\n    top: calc((var(--e-dot) - var(--e-stroke-focus)) / 2);\n    inset-inline-end: 50%;\n    width: 100%;\n    border-top: var(--e-stroke-focus) solid var(--e-border-strong);\n    z-index: 0;\n  }\n\n  .e-step:first-child::before {\n    display: none;\n  }\n\n  .e-step[data-state=\"done\"]::before {\n    border-top-color: var(--e-primary);\n  }\n\n  .e-step[data-state=\"current\"]::before {\n    border-top-color: var(--e-primary);\n  }\n\n  .e-step-dot {\n    position: relative;\n    z-index: var(--e-z-raised);\n    display: grid;\n    place-items: center;\n    width: var(--e-dot);\n    height: var(--e-dot);\n    border-radius: 50%;\n    outline: var(--e-stroke-edge) dashed var(--e-border-strong);\n    outline-offset: calc(-1 * var(--e-stroke-edge));\n    background: var(--e-surface);\n    color: var(--e-muted);\n    font: 600 var(--e-text-xs) / 1 var(--e-font-mono);\n  }\n\n  .e-step[data-state=\"done\"] .e-step-dot {\n    outline: 0;\n    background: var(--e-primary);\n    color: var(--e-on-primary);\n  }\n\n  .e-step[data-state=\"current\"] .e-step-dot {\n    outline: 0;\n    box-shadow: inset 0 0 0 var(--e-stroke-focus) var(--e-primary);\n    color: var(--e-primary);\n    background: var(--e-surface);\n  }\n\n  .e-step-label {\n    font: 400 var(--e-text-sm) / 1.3 var(--e-font-sans);\n    color: var(--e-muted);\n    overflow-wrap: anywhere;\n  }\n\n  .e-step[data-state=\"current\"] .e-step-label {\n    color: var(--e-ink);\n    font-weight: 600;\n  }\n\n  .e-step[data-state=\"done\"] .e-step-label {\n    color: var(--e-ink);\n  }\n\n  /* stylelint-disable declaration-block-no-redundant-longhand-properties -- the longhands stay separate */\n  @media (max-width: 32rem) {\n    .e-steps {\n      grid-auto-flow: row;\n      gap: var(--e-space-3);\n    }\n\n    .e-step {\n      grid-template-columns: auto 1fr;\n      justify-items: start;\n      align-items: center;\n      text-align: start;\n    }\n\n    .e-step::before {\n      display: block;\n      top: calc(-1 * var(--e-space-3));\n      inset-inline-end: auto;\n      inset-inline-start: calc((var(--e-dot) - var(--e-stroke-focus)) / 2);\n      width: 0;\n      height: var(--e-space-3);\n      border-top: 0;\n      border-inline-start: var(--e-stroke-focus) solid var(--e-border-strong);\n    }\n\n    .e-step:first-child::before {\n      display: none;\n    }\n\n    .e-step[data-state=\"done\"]::before {\n      border-inline-start-color: var(--e-primary);\n    }\n\n    .e-step[data-state=\"current\"]::before {\n      border-inline-start-color: var(--e-primary);\n    }\n  }\n\n  /* stylelint-enable declaration-block-no-redundant-longhand-properties */\n\n  @media (forced-colors: active) {\n    .e-step[data-state=\"done\"] .e-step-dot {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;EAmBA,IAAMkB,IAAIC,EAAY;E,kBAIpBnB,EAAA,GAAAC,EAiBK,MAAA;GAjBD,OAAM;GAAW,cAAYqB,EAAA,SAASpB,EAAAgB,CAAA,CAAC,CAAA,UAAA;E,KACzClB,EAAA,EAAA,GAAAC,EAeKE,GAAA,MAAAC,EAdiBkB,EAAA,QAAZ,GAAM,OADhBtB,EAAA,GAAAC,EAeK,MAAA;GAbF,KAAKyB;GACN,OAAM;GACL,cAAYC,EAAK,UAAK,SAAA,aAA2BA,EAAK;GACtD,gBAAcA,EAAK,UAAK,YAAA,SAA0B,KAAA;E,IAEnDtB,EAGO,QAHPS,GAGO,CAFQa,EAAK,UAAK,UAAvB3B,EAAA,GAAAM,EAAyDC,GAAA;;GAArB,MAAK;GAAQ,OAAA;E,OACjDP,EAAA,GAAAC,EAAuCE,GAAA,EAAA,KAAA,EAAA,GAAA,CAAnBK,EAAAC,EAAAiB,IAAC,CAAA,GAAA,CAAA,C,WAEvBrB,EAGO,QAHPU,GAGO,CAFFP,EAAAC,EAAAkB,EAAK,KAAK,IAAG,KAChB,CAAA,GAAYA,EAAK,UAAK,UAAtB3B,EAAA,GAAAC,EAAyE,QAAzEe,GAAgD,OAAEP,EAAGP,EAAAgB,CAAA,CAAC,CAAA,MAAA,CAAA,IAAW,KAAC,CAAA,K"}

package/dist/components/Surface/ESurface.js.map

@@ -1 +1 @@
-{"version":3,"file":"ESurface.js","names":["_sfc_main","ESurface_vue_vue_type_script_setup_true_lang_default","ESurface_default"],"sources":["../../../src/components/Surface/ESurface.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EActions from \"../Actions/EActions.vue\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The element to render, `div` by default. Use `article`, `section` or `aside` for a real block. */\n    as?: string;\n    /** Padding: `sm`, `md` or `lg`. None by default. */\n    pad?: \"sm\" | \"md\" | \"lg\";\n    /** The lifted shadow of something floating above the page, such as a Toast. */\n    raised?: boolean;\n    /** Hides what overflows the rounded corners. Ignored when there is an `actions` slot. */\n    clip?: boolean;\n  }>(),\n  { as: \"div\" },\n);\n\ndefineSlots<{\n  /** The content of the card. */\n  default(): unknown;\n  /** Buttons for a bar at the foot of the card, edge to edge. The body takes the remaining height so cards in a row end level. */\n  actions(): unknown;\n}>();\n\nconst pad = computed(() => (props.pad ? `e-surface--pad-${props.pad}` : null));\nconst barElement = computed(() => (/^(article|section|aside)$/.test(props.as) ? \"footer\" : \"div\"));\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    class=\"e-surface\"\n    :class=\"[raised && 'e-surface--raised', $slots.actions ? 'e-surface--actions' : [pad, clip && 'e-surface--clip']]\"\n  >\n    <template v-if=\"$slots.actions\">\n      <div class=\"e-surface-body\" :class=\"pad\">\n        <slot />\n      </div>\n      <EActions :as=\"barElement\" bar>\n        <slot name=\"actions\" />\n      </EActions>\n    </template>\n    <slot v-else />\n  </component>\n</template>\n\n<style>\n@layer e.blocks {\n  .e-surface {\n    min-width: 0;\n    border-radius: var(--e-radius-md);\n    background: var(--e-surface);\n    box-shadow: var(--e-edge);\n  }\n\n  .e-surface--clip {\n    overflow: hidden;\n  }\n\n  .e-surface--actions {\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n  }\n\n  .e-surface-body {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .e-surface > .e-actions--bar:last-child {\n    border-end-start-radius: var(--e-radius-md);\n    border-end-end-radius: var(--e-radius-md);\n  }\n\n  .e-surface--raised {\n    box-shadow: var(--e-float);\n  }\n\n  .e-surface--pad-sm {\n    padding: var(--e-space-3) var(--e-space-4);\n  }\n\n  .e-surface--pad-md {\n    padding: var(--e-space-4);\n  }\n\n  .e-surface--pad-lg {\n    padding: var(--e-space-6);\n  }\n\n  @media print {\n    .e-surface {\n      box-shadow: none;\n      outline: 0;\n      border: var(--e-stroke-hair) solid var(--e-print-ink, #000);\n      break-inside: avoid;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-surface {\n      outline-color: CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ESurface.js","names":["_sfc_main","ESurface_vue_vue_type_script_setup_true_lang_default","ESurface_default"],"sources":["../../../src/components/Surface/ESurface.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EActions from \"../Actions/EActions.vue\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The element to render. Use `article`, `section` or `aside` for a real block. */\n    as?: string;\n    /** Padding: `sm`, `md` or `lg`. None by default. */\n    pad?: \"sm\" | \"md\" | \"lg\";\n    /** The lifted shadow of something floating above the page, such as a Toast. */\n    raised?: boolean;\n    /** Hides what overflows the rounded corners. Ignored when there is an `actions` slot. */\n    clip?: boolean;\n  }>(),\n  { as: \"div\" },\n);\n\ndefineSlots<{\n  /** The content of the card. */\n  default(): unknown;\n  /** Buttons for a bar at the foot of the card, edge to edge. The body takes the remaining height so cards in a row end level. */\n  actions(): unknown;\n}>();\n\nconst pad = computed(() => (props.pad ? `e-surface--pad-${props.pad}` : null));\nconst barElement = computed(() => (/^(article|section|aside)$/.test(props.as) ? \"footer\" : \"div\"));\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    class=\"e-surface\"\n    :class=\"[raised && 'e-surface--raised', $slots.actions ? 'e-surface--actions' : [pad, clip && 'e-surface--clip']]\"\n  >\n    <template v-if=\"$slots.actions\">\n      <div class=\"e-surface-body\" :class=\"pad\">\n        <slot />\n      </div>\n      <EActions :as=\"barElement\" bar>\n        <slot name=\"actions\" />\n      </EActions>\n    </template>\n    <slot v-else />\n  </component>\n</template>\n\n<style>\n@layer e.blocks {\n  .e-surface {\n    min-width: 0;\n    border-radius: var(--e-radius-md);\n    background: var(--e-surface);\n    box-shadow: var(--e-edge);\n  }\n\n  .e-surface--clip {\n    overflow: hidden;\n  }\n\n  .e-surface--actions {\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n  }\n\n  .e-surface-body {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .e-surface > .e-actions--bar:last-child {\n    border-end-start-radius: var(--e-radius-md);\n    border-end-end-radius: var(--e-radius-md);\n  }\n\n  .e-surface--raised {\n    box-shadow: var(--e-float);\n  }\n\n  .e-surface--pad-sm {\n    padding: var(--e-space-3) var(--e-space-4);\n  }\n\n  .e-surface--pad-md {\n    padding: var(--e-space-4);\n  }\n\n  .e-surface--pad-lg {\n    padding: var(--e-space-6);\n  }\n\n  @media print {\n    .e-surface {\n      box-shadow: none;\n      outline: 0;\n      border: var(--e-stroke-hair) solid var(--e-print-ink, #000);\n      break-inside: avoid;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-surface {\n      outline-color: CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Surface/ESurface.vue.d.ts

@@ -1,5 +1,5 @@
 type __VLS_Props = {
-    /** The element to render, `div` by default. Use `article`, `section` or `aside` for a real block. */
+    /** The element to render. Use `article`, `section` or `aside` for a real block. */
     as?: string;
     /** Padding: `sm`, `md` or `lg`. None by default. */
     pad?: "sm" | "md" | "lg";

package/dist/components/Surface/ESurface.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ESurface.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_createElementBlock","_Fragment","_createElementVNode","_renderSlot","_createVNode","EActions","EActions_default","ESurface_vue_vue_type_script_setup_true_lang_default","props","__props","pad","computed","barElement","openBlock","createBlock","resolveDynamicComponent","normalizeClass","_ctx","withCtx","createElementBlock","Fragment","createElementVNode","renderSlot","createVNode"],"sources":["../../../src/components/Surface/ESurface.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EActions from \"../Actions/EActions.vue\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The element to render, `div` by default. Use `article`, `section` or `aside` for a real block. */\n    as?: string;\n    /** Padding: `sm`, `md` or `lg`. None by default. */\n    pad?: \"sm\" | \"md\" | \"lg\";\n    /** The lifted shadow of something floating above the page, such as a Toast. */\n    raised?: boolean;\n    /** Hides what overflows the rounded corners. Ignored when there is an `actions` slot. */\n    clip?: boolean;\n  }>(),\n  { as: \"div\" },\n);\n\ndefineSlots<{\n  /** The content of the card. */\n  default(): unknown;\n  /** Buttons for a bar at the foot of the card, edge to edge. The body takes the remaining height so cards in a row end level. */\n  actions(): unknown;\n}>();\n\nconst pad = computed(() => (props.pad ? `e-surface--pad-${props.pad}` : null));\nconst barElement = computed(() => (/^(article|section|aside)$/.test(props.as) ? \"footer\" : \"div\"));\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    class=\"e-surface\"\n    :class=\"[raised && 'e-surface--raised', $slots.actions ? 'e-surface--actions' : [pad, clip && 'e-surface--clip']]\"\n  >\n    <template v-if=\"$slots.actions\">\n      <div class=\"e-surface-body\" :class=\"pad\">\n        <slot />\n      </div>\n      <EActions :as=\"barElement\" bar>\n        <slot name=\"actions\" />\n      </EActions>\n    </template>\n    <slot v-else />\n  </component>\n</template>\n\n<style>\n@layer e.blocks {\n  .e-surface {\n    min-width: 0;\n    border-radius: var(--e-radius-md);\n    background: var(--e-surface);\n    box-shadow: var(--e-edge);\n  }\n\n  .e-surface--clip {\n    overflow: hidden;\n  }\n\n  .e-surface--actions {\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n  }\n\n  .e-surface-body {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .e-surface > .e-actions--bar:last-child {\n    border-end-start-radius: var(--e-radius-md);\n    border-end-end-radius: var(--e-radius-md);\n  }\n\n  .e-surface--raised {\n    box-shadow: var(--e-float);\n  }\n\n  .e-surface--pad-sm {\n    padding: var(--e-space-3) var(--e-space-4);\n  }\n\n  .e-surface--pad-md {\n    padding: var(--e-space-4);\n  }\n\n  .e-surface--pad-lg {\n    padding: var(--e-space-6);\n  }\n\n  @media print {\n    .e-surface {\n      box-shadow: none;\n      outline: 0;\n      border: var(--e-stroke-hair) solid var(--e-print-ink, #000);\n      break-inside: avoid;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-surface {\n      outline-color: CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;EAKA,IAAMc,IAAQC,GAqBRC,IAAMC,QAAgBH,EAAM,MAAM,kBAAkBA,EAAM,QAAQ,IAAK,GACvEI,IAAaD,QAAgB,4BAA4B,KAAKH,EAAM,EAAE,IAAI,WAAW,KAAM;E,kBAI/Fb,EAAA,GAAAC,EAcYC,EAbLY,EAAA,EAAE,GAAA,EACP,OAAKX,EAAA,CAAC,aAAW,CACRW,EAAA,UAAM,qBAAyBf,EAAAA,OAAO,UAAO,uBAAA,CAA2BgB,EAAA,OAAKD,EAAA,QAAI,iBAAA,CAAA,CAAA,CAAA,E;GAE1F,SAAAV,QAOW,CAPKL,EAAAA,OAAO,WAAvBC,EAAA,GAAAK,EAOWC,GAAA,EAAA,KAAA,EAAA,GAAA,CANTC,EAEM,OAAA,EAFD,OAAKJ,EAAA,CAAC,kBAAyBY,EAAA,KAAG,CAAA,E,IACrCP,EAAQc,EAAA,QAAA,SAAA,C,OAEVb,EAEWC,GAAA;IAFA,IAAIO,EAAA;IAAY,KAAA;;IACzB,SAAAb,QAAuB,CAAvBI,EAAuBc,EAAA,QAAA,SAAA,C;;G,uBAG3Bd,EAAec,EAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,C"}
+{"version":3,"file":"ESurface.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_createElementBlock","_Fragment","_createElementVNode","_renderSlot","_createVNode","EActions","EActions_default","ESurface_vue_vue_type_script_setup_true_lang_default","props","__props","pad","computed","barElement","openBlock","createBlock","resolveDynamicComponent","normalizeClass","_ctx","withCtx","createElementBlock","Fragment","createElementVNode","renderSlot","createVNode"],"sources":["../../../src/components/Surface/ESurface.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EActions from \"../Actions/EActions.vue\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The element to render. Use `article`, `section` or `aside` for a real block. */\n    as?: string;\n    /** Padding: `sm`, `md` or `lg`. None by default. */\n    pad?: \"sm\" | \"md\" | \"lg\";\n    /** The lifted shadow of something floating above the page, such as a Toast. */\n    raised?: boolean;\n    /** Hides what overflows the rounded corners. Ignored when there is an `actions` slot. */\n    clip?: boolean;\n  }>(),\n  { as: \"div\" },\n);\n\ndefineSlots<{\n  /** The content of the card. */\n  default(): unknown;\n  /** Buttons for a bar at the foot of the card, edge to edge. The body takes the remaining height so cards in a row end level. */\n  actions(): unknown;\n}>();\n\nconst pad = computed(() => (props.pad ? `e-surface--pad-${props.pad}` : null));\nconst barElement = computed(() => (/^(article|section|aside)$/.test(props.as) ? \"footer\" : \"div\"));\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    class=\"e-surface\"\n    :class=\"[raised && 'e-surface--raised', $slots.actions ? 'e-surface--actions' : [pad, clip && 'e-surface--clip']]\"\n  >\n    <template v-if=\"$slots.actions\">\n      <div class=\"e-surface-body\" :class=\"pad\">\n        <slot />\n      </div>\n      <EActions :as=\"barElement\" bar>\n        <slot name=\"actions\" />\n      </EActions>\n    </template>\n    <slot v-else />\n  </component>\n</template>\n\n<style>\n@layer e.blocks {\n  .e-surface {\n    min-width: 0;\n    border-radius: var(--e-radius-md);\n    background: var(--e-surface);\n    box-shadow: var(--e-edge);\n  }\n\n  .e-surface--clip {\n    overflow: hidden;\n  }\n\n  .e-surface--actions {\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n  }\n\n  .e-surface-body {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .e-surface > .e-actions--bar:last-child {\n    border-end-start-radius: var(--e-radius-md);\n    border-end-end-radius: var(--e-radius-md);\n  }\n\n  .e-surface--raised {\n    box-shadow: var(--e-float);\n  }\n\n  .e-surface--pad-sm {\n    padding: var(--e-space-3) var(--e-space-4);\n  }\n\n  .e-surface--pad-md {\n    padding: var(--e-space-4);\n  }\n\n  .e-surface--pad-lg {\n    padding: var(--e-space-6);\n  }\n\n  @media print {\n    .e-surface {\n      box-shadow: none;\n      outline: 0;\n      border: var(--e-stroke-hair) solid var(--e-print-ink, #000);\n      break-inside: avoid;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-surface {\n      outline-color: CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;EAKA,IAAMc,IAAQC,GAqBRC,IAAMC,QAAgBH,EAAM,MAAM,kBAAkBA,EAAM,QAAQ,IAAK,GACvEI,IAAaD,QAAgB,4BAA4B,KAAKH,EAAM,EAAE,IAAI,WAAW,KAAM;E,kBAI/Fb,EAAA,GAAAC,EAcYC,EAbLY,EAAA,EAAE,GAAA,EACP,OAAKX,EAAA,CAAC,aAAW,CACRW,EAAA,UAAM,qBAAyBf,EAAAA,OAAO,UAAO,uBAAA,CAA2BgB,EAAA,OAAKD,EAAA,QAAI,iBAAA,CAAA,CAAA,CAAA,E;GAE1F,SAAAV,QAOW,CAPKL,EAAAA,OAAO,WAAvBC,EAAA,GAAAK,EAOWC,GAAA,EAAA,KAAA,EAAA,GAAA,CANTC,EAEM,OAAA,EAFD,OAAKJ,EAAA,CAAC,kBAAyBY,EAAA,KAAG,CAAA,E,IACrCP,EAAQc,EAAA,QAAA,SAAA,C,OAEVb,EAEWC,GAAA;IAFA,IAAIO,EAAA;IAAY,KAAA;;IACzB,SAAAb,QAAuB,CAAvBI,EAAuBc,EAAA,QAAA,SAAA,C;;G,uBAG3Bd,EAAec,EAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,C"}

package/dist/components/Switch/ESwitch.js.map

@@ -1 +1 @@
-{"version":3,"file":"ESwitch.js","names":["_sfc_main","ESwitch_vue_vue_type_script_setup_true_lang_default","ESwitch_default"],"sources":["../../../src/components/Switch/ESwitch.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\nimport \"../Checkbox/choice.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** The setting, named by what it does. */\n  label: string;\n  /** A line of detail under the label. */\n  description?: string;\n  /** Disables the switch. */\n  disabled?: boolean;\n  /** The name submitted with a form. */\n  name?: string;\n  /** The value submitted with a form when on. */\n  value?: string;\n  /** The id of the input; the label points at it. @default generated */\n  id?: string;\n}>();\n\n/** On or off. */\nconst model = defineModel<boolean>({ default: false });\n\nconst id = useUid(() => props.id);\nconst input = ref<HTMLInputElement | null>(null);\nconst attrs = useFieldAttrs();\n\ndefineExpose({\n  input,\n  focus: () => input.value?.focus(),\n});\n</script>\n\n<template>\n  <label\n    class=\"e-choice e-switch\"\n    :class=\"[{ 'e-choice--disabled': disabled }, attrs.wrapper().class]\"\n    :style=\"attrs.wrapper().style\"\n    :for=\"id\"\n  >\n    <input\n      :id=\"id\"\n      ref=\"input\"\n      type=\"checkbox\"\n      role=\"switch\"\n      class=\"e-switch-input\"\n      :name=\"name\"\n      :value=\"value\"\n      :checked=\"model\"\n      :disabled=\"disabled\"\n      v-bind=\"attrs.input()\"\n      @change=\"model = ($event.target as HTMLInputElement).checked\"\n    />\n    <span class=\"e-switch-track\" aria-hidden=\"true\" />\n    <span class=\"e-choice-text\">\n      {{ label }}\n      <span v-if=\"description\" class=\"e-choice-desc\">{{ description }}</span>\n    </span>\n  </label>\n</template>\n\n<style>\n@layer e.controls {\n  .e-switch-input {\n    position: absolute;\n    opacity: 0;\n    width: 1px;\n    height: 1px;\n  }\n\n  .e-switch-track {\n    --e-switch-w: 44px;\n    --e-thumb: 14px;\n    --e-thumb-inset: calc(var(--e-space-1) - var(--e-stroke-card));\n    --e-thumb-travel: calc(var(--e-switch-w) - 2 * var(--e-stroke-edge) - var(--e-thumb) - 2 * var(--e-thumb-inset));\n\n    position: relative;\n    flex: none;\n    width: var(--e-switch-w);\n    height: 24px;\n    border: var(--e-stroke-edge) solid var(--e-border-strong);\n    border-radius: var(--e-radius-pill);\n    background: var(--e-surface-tint);\n    transition:\n      background-color var(--e-duration-tap) var(--e-easing-out),\n      border-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-switch-track::after {\n    content: \"\";\n    position: absolute;\n    top: 50%;\n    inset-inline-start: var(--e-thumb-inset);\n    width: var(--e-thumb);\n    height: var(--e-thumb);\n    margin-top: calc(var(--e-thumb) / -2);\n    border-radius: 50%;\n    background: var(--e-ink);\n    transition: transform var(--e-duration-move, 160ms) var(--e-easing-out);\n  }\n\n  .e-switch:hover .e-switch-track {\n    border-color: var(--e-ink);\n\n  }\n\n  .e-switch-input:checked + .e-switch-track {\n    background: var(--e-primary);\n    border-color: var(--e-primary);\n\n  }\n\n  .e-switch-input:checked + .e-switch-track::after {\n    background: var(--e-on-primary);\n    transform: translateX(var(--e-thumb-travel));\n  }\n\n  .e-switch-input:disabled + .e-switch-track {\n    border-style: dashed;\n    outline: 0;\n    background: var(--e-surface-tint);\n  }\n\n  .e-switch-input:disabled + .e-switch-track::after {\n    background: var(--e-muted);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-switch-track::after {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-switch-input:checked + .e-switch-track {\n      forced-color-adjust: none;\n      background: Highlight;\n    }\n\n    .e-switch-track::after {\n      forced-color-adjust: none;\n      background: ButtonText;\n    }\n  }\n\n  :dir(rtl) .e-switch-input:checked + .e-switch-track::after {\n    transform: translateX(calc(-1 * var(--e-thumb-travel)));\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ESwitch.js","names":["_sfc_main","ESwitch_vue_vue_type_script_setup_true_lang_default","ESwitch_default"],"sources":["../../../src/components/Switch/ESwitch.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\nimport \"../Checkbox/choice.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** The setting, named by what it does. */\n  label: string;\n  /** A line of detail under the label. */\n  description?: string;\n  /** Disables the switch. */\n  disabled?: boolean;\n  /** The name submitted with a form. */\n  name?: string;\n  /** The value submitted with a form when on. */\n  value?: string;\n  /** The id of the input; the label points at it. @default generated */\n  id?: string;\n}>();\n\n/** On or off. */\nconst model = defineModel<boolean>({ default: false });\n\nconst id = useUid(() => props.id);\nconst input = ref<HTMLInputElement | null>(null);\nconst attrs = useFieldAttrs();\n\ndefineExpose({\n  input,\n  focus: () => input.value?.focus(),\n});\n</script>\n\n<template>\n  <label\n    class=\"e-choice e-switch\"\n    :class=\"[{ 'e-choice--disabled': disabled }, attrs.wrapper().class]\"\n    :style=\"attrs.wrapper().style\"\n    :for=\"id\"\n  >\n    <input\n      :id=\"id\"\n      ref=\"input\"\n      type=\"checkbox\"\n      role=\"switch\"\n      class=\"e-switch-input\"\n      :name=\"name\"\n      :value=\"value\"\n      :checked=\"model\"\n      :disabled=\"disabled\"\n      v-bind=\"attrs.input()\"\n      @change=\"model = ($event.target as HTMLInputElement).checked\"\n    />\n    <span class=\"e-switch-track\" aria-hidden=\"true\" />\n    <span class=\"e-choice-text\">\n      {{ label }}\n      <span v-if=\"description\" class=\"e-choice-desc\">{{ description }}</span>\n    </span>\n  </label>\n</template>\n\n<style>\n@layer e.controls {\n  .e-switch-input {\n    position: absolute;\n    opacity: 0;\n    width: 1px;\n    height: 1px;\n  }\n\n  .e-switch-track {\n    --e-switch-w: 44px;\n    --e-thumb: 14px;\n    --e-thumb-inset: var(--e-space-1);\n    --e-thumb-travel: calc(var(--e-switch-w) - var(--e-thumb) - 2 * var(--e-thumb-inset));\n    --e-ring: var(--e-border-strong);\n\n    position: relative;\n    flex: none;\n    width: var(--e-switch-w);\n    height: 24px;\n    border-radius: var(--e-radius-pill);\n    background: var(--e-surface-tint);\n    box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-ring);\n    transition:\n      background-color var(--e-duration-tap) var(--e-easing-out),\n      box-shadow var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-switch-track::after {\n    content: \"\";\n    position: absolute;\n    top: 50%;\n    inset-inline-start: var(--e-thumb-inset);\n    width: var(--e-thumb);\n    height: var(--e-thumb);\n    margin-top: calc(var(--e-thumb) / -2);\n    border-radius: 50%;\n    background: var(--e-ink);\n    transition: transform var(--e-duration-move, 160ms) var(--e-easing-out);\n  }\n\n  .e-switch:hover .e-switch-track {\n    --e-ring: var(--e-ink);\n  }\n\n  .e-switch-input:checked + .e-switch-track {\n    --e-ring: var(--e-primary);\n\n    background: var(--e-primary);\n  }\n\n  .e-switch-input:checked + .e-switch-track::after {\n    background: var(--e-on-primary);\n    transform: translateX(var(--e-thumb-travel));\n  }\n\n  .e-switch-input:disabled + .e-switch-track {\n    box-shadow: none;\n    outline: var(--e-stroke-edge) dashed var(--e-border-strong);\n    outline-offset: calc(-1 * var(--e-stroke-edge));\n    background: var(--e-surface-tint);\n  }\n\n  .e-switch-input:disabled + .e-switch-track::after {\n    background: var(--e-muted);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-switch-track::after {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-switch-input:checked + .e-switch-track {\n      forced-color-adjust: none;\n      background: Highlight;\n    }\n\n    .e-switch-track::after {\n      forced-color-adjust: none;\n      background: ButtonText;\n    }\n  }\n\n  :dir(rtl) .e-switch-input:checked + .e-switch-track::after {\n    transform: translateX(calc(-1 * var(--e-thumb-travel)));\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Switch/ESwitch.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ESwitch.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_normalizeClass","_unref","_normalizeStyle","_createElementVNode","_mergeProps","_createTextVNode","_toDisplayString","_createCommentVNode","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","ESwitch_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","props","__props","model","useModel","id","useUid","input","ref","attrs","useFieldAttrs","openBlock","createElementBlock","normalizeClass","unref","normalizeStyle","createElementVNode","mergeProps","_cache","$event","createTextVNode","toDisplayString","createCommentVNode"],"sources":["../../../src/components/Switch/ESwitch.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\nimport \"../Checkbox/choice.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** The setting, named by what it does. */\n  label: string;\n  /** A line of detail under the label. */\n  description?: string;\n  /** Disables the switch. */\n  disabled?: boolean;\n  /** The name submitted with a form. */\n  name?: string;\n  /** The value submitted with a form when on. */\n  value?: string;\n  /** The id of the input; the label points at it. @default generated */\n  id?: string;\n}>();\n\n/** On or off. */\nconst model = defineModel<boolean>({ default: false });\n\nconst id = useUid(() => props.id);\nconst input = ref<HTMLInputElement | null>(null);\nconst attrs = useFieldAttrs();\n\ndefineExpose({\n  input,\n  focus: () => input.value?.focus(),\n});\n</script>\n\n<template>\n  <label\n    class=\"e-choice e-switch\"\n    :class=\"[{ 'e-choice--disabled': disabled }, attrs.wrapper().class]\"\n    :style=\"attrs.wrapper().style\"\n    :for=\"id\"\n  >\n    <input\n      :id=\"id\"\n      ref=\"input\"\n      type=\"checkbox\"\n      role=\"switch\"\n      class=\"e-switch-input\"\n      :name=\"name\"\n      :value=\"value\"\n      :checked=\"model\"\n      :disabled=\"disabled\"\n      v-bind=\"attrs.input()\"\n      @change=\"model = ($event.target as HTMLInputElement).checked\"\n    />\n    <span class=\"e-switch-track\" aria-hidden=\"true\" />\n    <span class=\"e-choice-text\">\n      {{ label }}\n      <span v-if=\"description\" class=\"e-choice-desc\">{{ description }}</span>\n    </span>\n  </label>\n</template>\n\n<style>\n@layer e.controls {\n  .e-switch-input {\n    position: absolute;\n    opacity: 0;\n    width: 1px;\n    height: 1px;\n  }\n\n  .e-switch-track {\n    --e-switch-w: 44px;\n    --e-thumb: 14px;\n    --e-thumb-inset: calc(var(--e-space-1) - var(--e-stroke-card));\n    --e-thumb-travel: calc(var(--e-switch-w) - 2 * var(--e-stroke-edge) - var(--e-thumb) - 2 * var(--e-thumb-inset));\n\n    position: relative;\n    flex: none;\n    width: var(--e-switch-w);\n    height: 24px;\n    border: var(--e-stroke-edge) solid var(--e-border-strong);\n    border-radius: var(--e-radius-pill);\n    background: var(--e-surface-tint);\n    transition:\n      background-color var(--e-duration-tap) var(--e-easing-out),\n      border-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-switch-track::after {\n    content: \"\";\n    position: absolute;\n    top: 50%;\n    inset-inline-start: var(--e-thumb-inset);\n    width: var(--e-thumb);\n    height: var(--e-thumb);\n    margin-top: calc(var(--e-thumb) / -2);\n    border-radius: 50%;\n    background: var(--e-ink);\n    transition: transform var(--e-duration-move, 160ms) var(--e-easing-out);\n  }\n\n  .e-switch:hover .e-switch-track {\n    border-color: var(--e-ink);\n\n  }\n\n  .e-switch-input:checked + .e-switch-track {\n    background: var(--e-primary);\n    border-color: var(--e-primary);\n\n  }\n\n  .e-switch-input:checked + .e-switch-track::after {\n    background: var(--e-on-primary);\n    transform: translateX(var(--e-thumb-travel));\n  }\n\n  .e-switch-input:disabled + .e-switch-track {\n    border-style: dashed;\n    outline: 0;\n    background: var(--e-surface-tint);\n  }\n\n  .e-switch-input:disabled + .e-switch-track::after {\n    background: var(--e-muted);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-switch-track::after {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-switch-input:checked + .e-switch-track {\n      forced-color-adjust: none;\n      background: Highlight;\n    }\n\n    .e-switch-track::after {\n      forced-color-adjust: none;\n      background: ButtonText;\n    }\n  }\n\n  :dir(rtl) .e-switch-input:checked + .e-switch-track::after {\n    transform: translateX(calc(-1 * var(--e-thumb-travel)));\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASA,IAAMmB,IAAQC,GAgBRC,IAAQrB,EAAoBoB,GAAA,YAAmB,GAE/CG,IAAKC,QAAaL,EAAM,EAAE,GAC1BM,IAAQC,EAA6B,IAAI,GACzCC,IAAQC,EAAc;E,OAE5BV,EAAa;GACX;GACA,aAAaO,EAAM,OAAO,MAAM;EAClC,CAAC,I,UAICxB,EAAA,GAAAC,EAwBQ,SAAA;GAvBN,OAAKC,EAAA,CAAC,qBAAmB,CAAA,EAAA,sBACQiB,EAAA,SAAQ,GAAIhB,EAAAuB,CAAA,CAAK,CAAC,QAAO,CAAA,CAAG,KAAK,CAAA,CAAA;GACjE,OAAKtB,EAAED,EAAAuB,CAAA,CAAK,CAAC,QAAO,CAAA,CAAG,KAAK;GAC5B,KAAKvB,EAAAmB,CAAA;;GAENjB,EAYE,SAZFC,EAYE;IAXC,IAAIH,EAAAmB,CAAA;IACD,SAAA;IAAJ,KAAIE;IACJ,MAAK;IACL,MAAK;IACL,OAAM;IACL,MAAML,EAAA;IACN,OAAOA,EAAA;IACP,SAASC,EAAA;IACT,UAAUD,EAAA;GACH,GAAAhB,EAAAuB,CAAA,CAAK,CAAC,MAAK,GAAA,EAClB,UAAM,AAAAS,EAAA,QAAA,MAAE,EAAA,QAASC,EAAO,OAA4B,Q;GAEvD,AAAAD,EAAA,OAAA9B,EAAkD,QAAA;IAA5C,OAAM;IAAiB,eAAY;;GACzCA,EAGO,QAHPO,GAGO,CAFFL,EAAAC,EAAAW,EAAA,KAAK,IAAG,KACX,CAAA,GAAYA,EAAA,eAAZnB,EAAA,GAAAC,EAAuE,QAAvEY,GAAuEL,EAArBW,EAAA,WAAW,GAAA,CAAA,K"}
+{"version":3,"file":"ESwitch.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_normalizeClass","_unref","_normalizeStyle","_createElementVNode","_mergeProps","_createTextVNode","_toDisplayString","_createCommentVNode","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","ESwitch_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","props","__props","model","useModel","id","useUid","input","ref","attrs","useFieldAttrs","openBlock","createElementBlock","normalizeClass","unref","normalizeStyle","createElementVNode","mergeProps","_cache","$event","createTextVNode","toDisplayString","createCommentVNode"],"sources":["../../../src/components/Switch/ESwitch.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\nimport \"../Checkbox/choice.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** The setting, named by what it does. */\n  label: string;\n  /** A line of detail under the label. */\n  description?: string;\n  /** Disables the switch. */\n  disabled?: boolean;\n  /** The name submitted with a form. */\n  name?: string;\n  /** The value submitted with a form when on. */\n  value?: string;\n  /** The id of the input; the label points at it. @default generated */\n  id?: string;\n}>();\n\n/** On or off. */\nconst model = defineModel<boolean>({ default: false });\n\nconst id = useUid(() => props.id);\nconst input = ref<HTMLInputElement | null>(null);\nconst attrs = useFieldAttrs();\n\ndefineExpose({\n  input,\n  focus: () => input.value?.focus(),\n});\n</script>\n\n<template>\n  <label\n    class=\"e-choice e-switch\"\n    :class=\"[{ 'e-choice--disabled': disabled }, attrs.wrapper().class]\"\n    :style=\"attrs.wrapper().style\"\n    :for=\"id\"\n  >\n    <input\n      :id=\"id\"\n      ref=\"input\"\n      type=\"checkbox\"\n      role=\"switch\"\n      class=\"e-switch-input\"\n      :name=\"name\"\n      :value=\"value\"\n      :checked=\"model\"\n      :disabled=\"disabled\"\n      v-bind=\"attrs.input()\"\n      @change=\"model = ($event.target as HTMLInputElement).checked\"\n    />\n    <span class=\"e-switch-track\" aria-hidden=\"true\" />\n    <span class=\"e-choice-text\">\n      {{ label }}\n      <span v-if=\"description\" class=\"e-choice-desc\">{{ description }}</span>\n    </span>\n  </label>\n</template>\n\n<style>\n@layer e.controls {\n  .e-switch-input {\n    position: absolute;\n    opacity: 0;\n    width: 1px;\n    height: 1px;\n  }\n\n  .e-switch-track {\n    --e-switch-w: 44px;\n    --e-thumb: 14px;\n    --e-thumb-inset: var(--e-space-1);\n    --e-thumb-travel: calc(var(--e-switch-w) - var(--e-thumb) - 2 * var(--e-thumb-inset));\n    --e-ring: var(--e-border-strong);\n\n    position: relative;\n    flex: none;\n    width: var(--e-switch-w);\n    height: 24px;\n    border-radius: var(--e-radius-pill);\n    background: var(--e-surface-tint);\n    box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-ring);\n    transition:\n      background-color var(--e-duration-tap) var(--e-easing-out),\n      box-shadow var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-switch-track::after {\n    content: \"\";\n    position: absolute;\n    top: 50%;\n    inset-inline-start: var(--e-thumb-inset);\n    width: var(--e-thumb);\n    height: var(--e-thumb);\n    margin-top: calc(var(--e-thumb) / -2);\n    border-radius: 50%;\n    background: var(--e-ink);\n    transition: transform var(--e-duration-move, 160ms) var(--e-easing-out);\n  }\n\n  .e-switch:hover .e-switch-track {\n    --e-ring: var(--e-ink);\n  }\n\n  .e-switch-input:checked + .e-switch-track {\n    --e-ring: var(--e-primary);\n\n    background: var(--e-primary);\n  }\n\n  .e-switch-input:checked + .e-switch-track::after {\n    background: var(--e-on-primary);\n    transform: translateX(var(--e-thumb-travel));\n  }\n\n  .e-switch-input:disabled + .e-switch-track {\n    box-shadow: none;\n    outline: var(--e-stroke-edge) dashed var(--e-border-strong);\n    outline-offset: calc(-1 * var(--e-stroke-edge));\n    background: var(--e-surface-tint);\n  }\n\n  .e-switch-input:disabled + .e-switch-track::after {\n    background: var(--e-muted);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-switch-track::after {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-switch-input:checked + .e-switch-track {\n      forced-color-adjust: none;\n      background: Highlight;\n    }\n\n    .e-switch-track::after {\n      forced-color-adjust: none;\n      background: ButtonText;\n    }\n  }\n\n  :dir(rtl) .e-switch-input:checked + .e-switch-track::after {\n    transform: translateX(calc(-1 * var(--e-thumb-travel)));\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASA,IAAMmB,IAAQC,GAgBRC,IAAQrB,EAAoBoB,GAAA,YAAmB,GAE/CG,IAAKC,QAAaL,EAAM,EAAE,GAC1BM,IAAQC,EAA6B,IAAI,GACzCC,IAAQC,EAAc;E,OAE5BV,EAAa;GACX;GACA,aAAaO,EAAM,OAAO,MAAM;EAClC,CAAC,I,UAICxB,EAAA,GAAAC,EAwBQ,SAAA;GAvBN,OAAKC,EAAA,CAAC,qBAAmB,CAAA,EAAA,sBACQiB,EAAA,SAAQ,GAAIhB,EAAAuB,CAAA,CAAK,CAAC,QAAO,CAAA,CAAG,KAAK,CAAA,CAAA;GACjE,OAAKtB,EAAED,EAAAuB,CAAA,CAAK,CAAC,QAAO,CAAA,CAAG,KAAK;GAC5B,KAAKvB,EAAAmB,CAAA;;GAENjB,EAYE,SAZFC,EAYE;IAXC,IAAIH,EAAAmB,CAAA;IACD,SAAA;IAAJ,KAAIE;IACJ,MAAK;IACL,MAAK;IACL,OAAM;IACL,MAAML,EAAA;IACN,OAAOA,EAAA;IACP,SAASC,EAAA;IACT,UAAUD,EAAA;GACH,GAAAhB,EAAAuB,CAAA,CAAK,CAAC,MAAK,GAAA,EAClB,UAAM,AAAAS,EAAA,QAAA,MAAE,EAAA,QAASC,EAAO,OAA4B,Q;GAEvD,AAAAD,EAAA,OAAA9B,EAAkD,QAAA;IAA5C,OAAM;IAAiB,eAAY;;GACzCA,EAGO,QAHPO,GAGO,CAFFL,EAAAC,EAAAW,EAAA,KAAK,IAAG,KACX,CAAA,GAAYA,EAAA,eAAZnB,EAAA,GAAAC,EAAuE,QAAvEY,GAAuEL,EAArBW,EAAA,WAAW,GAAA,CAAA,K"}

package/dist/components/Table/ETable.js

@@ -0,0 +1,8 @@
+import e from "./ETable.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                       */
+//#region src/components/Table/ETable.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=ETable.js.map

package/dist/components/Table/ETable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ETable.js","names":["_sfc_main","ETable_vue_vue_type_script_setup_true_lang_default","ETable_default"],"sources":["../../../src/components/Table/ETable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport \"../../styles/base.css\";\nimport \"./table.css\";\n\nconst props = defineProps<{\n  /** Names the table for screen readers, and its scrolling region. It is also shown above the table unless `hideCaption` is set. */\n  caption: string;\n  /** Keeps the caption for screen readers and removes it from the page, for a table that a nearby heading already names. */\n  hideCaption?: boolean;\n  /** Tints every other row. */\n  striped?: boolean;\n  /** Smaller text and tighter cells, for reference tables with many rows. */\n  dense?: boolean;\n  /** Stops the table growing past this height (any CSS length) and scrolls inside it, with a sticky header row. */\n  maxHeight?: string;\n}>();\n\ndefineSlots<{\n  /** The table's rows: a `thead` and `tbody` (and a `tfoot`). Mark a number column with the class `e-num`. */\n  default(): unknown;\n}>();\n\nconst style = computed(() => (props.maxHeight ? { \"--e-table-max-h\": props.maxHeight } : undefined));\n</script>\n\n<template>\n  <div class=\"e-table-wrap\" :class=\"[striped && 'e-table-wrap--striped', dense && 'e-table-wrap--dense']\">\n    <div class=\"e-table-scroll\" tabindex=\"0\" role=\"region\" :aria-label=\"caption\" :style=\"style\">\n      <table class=\"e-table\">\n        <caption :class=\"hideCaption ? 'e-sr' : 'e-table-caption'\">{{ caption }}</caption>\n        <slot />\n      </table>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer e.containers {\n  .e-table-wrap {\n    position: relative;\n    min-width: 0;\n    border-radius: var(--e-radius-md);\n    background: var(--e-surface);\n  }\n\n  /* The outline is drawn once, above the scroller and its sticky headings, so nothing covers it. */\n  .e-table-wrap::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    z-index: var(--e-z-sticky);\n    box-shadow: inset 0 0 0 var(--e-stroke-card) var(--e-border);\n    pointer-events: none;\n  }\n\n  .e-table-scroll {\n    overflow: auto;\n    max-height: var(--e-table-max-h, none);\n    border-radius: inherit;\n  }\n\n  .e-table-scroll:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: calc(-1 * var(--e-stroke-focus));\n  }\n\n  .e-table-wrap .e-table {\n    background: var(--e-surface);\n  }\n\n  .e-table-caption {\n    padding: var(--e-space-3) var(--e-space-4);\n    border-bottom: var(--e-stroke-hair) solid var(--e-border);\n    text-align: start;\n    font: 600 var(--e-text-md) / 1.3 var(--e-font-sans);\n    color: var(--e-ink);\n  }\n\n  .e-table-wrap thead th {\n    position: sticky;\n    top: 0;\n    z-index: var(--e-z-raised);\n  }\n\n  .e-table-wrap--striped tbody tr:nth-child(even) :is(td, th) {\n    background: var(--e-surface-tint);\n  }\n\n  .e-table-wrap--striped tbody tr:hover :is(td, th) {\n    background: var(--e-surface-hover);\n  }\n\n  .e-table-wrap--dense .e-table {\n    font-size: var(--e-text-sm);\n  }\n\n  .e-table-wrap--dense .e-table :is(th, td, tbody th) {\n    padding: var(--e-space-2) var(--e-space-3);\n  }\n\n  @media print {\n    .e-table-scroll {\n      overflow: visible;\n      max-height: none;\n    }\n\n    .e-table-wrap::after {\n      display: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-table-wrap {\n      outline: 1px solid CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Table/ETable.vue.d.ts

@@ -0,0 +1,25 @@
+type __VLS_Props = {
+    /** Names the table for screen readers, and its scrolling region. It is also shown above the table unless `hideCaption` is set. */
+    caption: string;
+    /** Keeps the caption for screen readers and removes it from the page, for a table that a nearby heading already names. */
+    hideCaption?: boolean;
+    /** Tints every other row. */
+    striped?: boolean;
+    /** Smaller text and tighter cells, for reference tables with many rows. */
+    dense?: boolean;
+    /** Stops the table growing past this height (any CSS length) and scrolls inside it, with a sticky header row. */
+    maxHeight?: string;
+};
+type __VLS_Slots = {
+    /** The table's rows: a `thead` and `tbody` (and a `tfoot`). Mark a number column with the class `e-num`. */
+    default(): unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Table/ETable.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,28 @@
+/* empty css                */
+/* empty css      */
+import { computed as e, createElementBlock as t, createElementVNode as n, defineComponent as r, normalizeClass as i, normalizeStyle as a, openBlock as o, renderSlot as s, toDisplayString as c } from "vue";
+//#region src/components/Table/ETable.vue?vue&type=script&setup=true&lang.ts
+var l = ["aria-label"], u = { class: "e-table" }, d = /*@__PURE__*/ r({
+	__name: "ETable",
+	props: {
+		caption: {},
+		hideCaption: { type: Boolean },
+		striped: { type: Boolean },
+		dense: { type: Boolean },
+		maxHeight: {}
+	},
+	setup(r) {
+		let d = r, f = e(() => d.maxHeight ? { "--e-table-max-h": d.maxHeight } : void 0);
+		return (e, d) => (o(), t("div", { class: i(["e-table-wrap", [r.striped && "e-table-wrap--striped", r.dense && "e-table-wrap--dense"]]) }, [n("div", {
+			class: "e-table-scroll",
+			tabindex: "0",
+			role: "region",
+			"aria-label": r.caption,
+			style: a(f.value)
+		}, [n("table", u, [n("caption", { class: i(r.hideCaption ? "e-sr" : "e-table-caption") }, c(r.caption), 3), s(e.$slots, "default")])], 12, l)], 2));
+	}
+});
+//#endregion
+export { d as default };
+
+//# sourceMappingURL=ETable.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/Table/ETable.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ETable.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_normalizeStyle","_toDisplayString","_renderSlot","_hoisted_1","_hoisted_2","ETable_vue_vue_type_script_setup_true_lang_default","props","__props","style","computed","openBlock","createElementBlock","normalizeClass","createElementVNode","normalizeStyle","toDisplayString","renderSlot","_ctx"],"sources":["../../../src/components/Table/ETable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport \"../../styles/base.css\";\nimport \"./table.css\";\n\nconst props = defineProps<{\n  /** Names the table for screen readers, and its scrolling region. It is also shown above the table unless `hideCaption` is set. */\n  caption: string;\n  /** Keeps the caption for screen readers and removes it from the page, for a table that a nearby heading already names. */\n  hideCaption?: boolean;\n  /** Tints every other row. */\n  striped?: boolean;\n  /** Smaller text and tighter cells, for reference tables with many rows. */\n  dense?: boolean;\n  /** Stops the table growing past this height (any CSS length) and scrolls inside it, with a sticky header row. */\n  maxHeight?: string;\n}>();\n\ndefineSlots<{\n  /** The table's rows: a `thead` and `tbody` (and a `tfoot`). Mark a number column with the class `e-num`. */\n  default(): unknown;\n}>();\n\nconst style = computed(() => (props.maxHeight ? { \"--e-table-max-h\": props.maxHeight } : undefined));\n</script>\n\n<template>\n  <div class=\"e-table-wrap\" :class=\"[striped && 'e-table-wrap--striped', dense && 'e-table-wrap--dense']\">\n    <div class=\"e-table-scroll\" tabindex=\"0\" role=\"region\" :aria-label=\"caption\" :style=\"style\">\n      <table class=\"e-table\">\n        <caption :class=\"hideCaption ? 'e-sr' : 'e-table-caption'\">{{ caption }}</caption>\n        <slot />\n      </table>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer e.containers {\n  .e-table-wrap {\n    position: relative;\n    min-width: 0;\n    border-radius: var(--e-radius-md);\n    background: var(--e-surface);\n  }\n\n  /* The outline is drawn once, above the scroller and its sticky headings, so nothing covers it. */\n  .e-table-wrap::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    z-index: var(--e-z-sticky);\n    box-shadow: inset 0 0 0 var(--e-stroke-card) var(--e-border);\n    pointer-events: none;\n  }\n\n  .e-table-scroll {\n    overflow: auto;\n    max-height: var(--e-table-max-h, none);\n    border-radius: inherit;\n  }\n\n  .e-table-scroll:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: calc(-1 * var(--e-stroke-focus));\n  }\n\n  .e-table-wrap .e-table {\n    background: var(--e-surface);\n  }\n\n  .e-table-caption {\n    padding: var(--e-space-3) var(--e-space-4);\n    border-bottom: var(--e-stroke-hair) solid var(--e-border);\n    text-align: start;\n    font: 600 var(--e-text-md) / 1.3 var(--e-font-sans);\n    color: var(--e-ink);\n  }\n\n  .e-table-wrap thead th {\n    position: sticky;\n    top: 0;\n    z-index: var(--e-z-raised);\n  }\n\n  .e-table-wrap--striped tbody tr:nth-child(even) :is(td, th) {\n    background: var(--e-surface-tint);\n  }\n\n  .e-table-wrap--striped tbody tr:hover :is(td, th) {\n    background: var(--e-surface-hover);\n  }\n\n  .e-table-wrap--dense .e-table {\n    font-size: var(--e-text-sm);\n  }\n\n  .e-table-wrap--dense .e-table :is(th, td, tbody th) {\n    padding: var(--e-space-2) var(--e-space-3);\n  }\n\n  @media print {\n    .e-table-scroll {\n      overflow: visible;\n      max-height: none;\n    }\n\n    .e-table-wrap::after {\n      display: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-table-wrap {\n      outline: 1px solid CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;EAKA,IAAMU,IAAQC,GAkBRC,IAAQC,QAAgBH,EAAM,YAAY,EAAE,mBAAmBA,EAAM,UAAU,IAAI,KAAA,CAAU;E,kBAIjGV,EAAA,GAAAC,EAOM,OAAA,EAPD,OAAKC,EAAA,CAAC,gBAAc,CAAUS,EAAA,WAAO,yBAA6BA,EAAA,SAAK,qBAAA,CAAA,CAAA,E,IAC1ER,EAKM,OAAA;GALD,OAAM;GAAiB,UAAS;GAAI,MAAK;GAAU,cAAYQ,EAAA;GAAU,OAAKP,EAAEQ,EAAA,KAAK;E,IACxFT,EAGQ,SAHRK,GAGQ,CAFNL,EAAkF,WAAA,EAAxE,OAAKD,EAAES,EAAA,cAAW,SAAA,iBAAA,EAAkC,GAAAN,EAAAM,EAAA,OAAO,GAAA,CAAA,GACrEL,EAAQe,EAAA,QAAA,SAAA,C"}

package/dist/components/Table/index.d.ts

@@ -0,0 +1 @@
+export { default as ETable } from './ETable.vue.js';

package/dist/components/Tabs/ETabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ETabs.js","names":["_sfc_main","ETabs_vue_vue_type_script_setup_true_lang_default","ETabs_default"],"sources":["../../../src/components/Tabs/ETabs.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface TabItem {\n  /** Names the tab's slot, and is the value of `v-model`. */\n  id: string;\n  /** The tab's words. */\n  label: string;\n  /** A number or short word in a small badge after the label. */\n  count?: number | string;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, ref, watch } from \"vue\";\nimport { TabsContent, TabsList, TabsRoot, TabsTrigger } from \"reka-ui\";\nimport { useConfig } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nconst props = defineProps<{\n  /** The tabs, in order: `{ id, label, count? }`. Two to five, with short labels. `id` names the slot and is the `v-model` value. */\n  items?: TabItem[];\n  /** Share the width equally between the tabs instead of letting each take its own. For a narrow container where the tabs must all fit; labels truncate. @default false */\n  fill?: boolean;\n}>();\n\ndefineSlots<{\n  [id: string]: ((props: { item: TabItem }) => unknown) | undefined;\n  /** The panel of any tab that has no slot of its own. */\n  panel?(props: { item: TabItem }): unknown;\n}>();\n\nconst flat = computed(() => props.items ?? []);\n\n/** The `id` of the selected tab. Keeps its own state when unbound. @default first tab */\nconst model = defineModel<string>();\n\nconst config = useConfig();\nconst current = computed(() => model.value ?? flat.value[0]?.id);\nconst dir = computed<\"ltr\" | \"rtl\">(\n  () => config.dir ?? (typeof document !== \"undefined\" && document.documentElement.dir === \"rtl\" ? \"rtl\" : \"ltr\"),\n);\n\nconst list = ref<{ $el: HTMLElement } | null>(null);\n\nasync function reveal(smooth: boolean) {\n  await nextTick();\n  const el = list.value?.$el;\n  const tab = el?.querySelector<HTMLElement>('[aria-selected=\"true\"]');\n  if (!el || !tab || el.scrollWidth <= el.clientWidth) return;\n  const calm = typeof matchMedia !== \"undefined\" && matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n  const a = tab.getBoundingClientRect();\n  const b = el.getBoundingClientRect();\n  el.scrollBy({ left: a.left + a.width / 2 - (b.left + b.width / 2), behavior: smooth && !calm ? \"smooth\" : \"auto\" });\n}\n\nonMounted(() => reveal(false));\nwatch(current, () => reveal(true));\n</script>\n\n<template>\n  <TabsRoot class=\"e-tabs\" :class=\"{ 'e-tabs--fill': fill }\" :model-value=\"current\" :dir=\"dir\" @update:model-value=\"model = String($event)\">\n    <TabsList ref=\"list\" class=\"e-tablist\">\n      <TabsTrigger v-for=\"item in flat\" :key=\"item.id\" :value=\"item.id\" class=\"e-tab\">\n        {{ item.label }}\n        <span v-if=\"item.count != null\" class=\"e-tab-count\">{{ item.count }}</span>\n      </TabsTrigger>\n    </TabsList>\n    <TabsContent v-for=\"item in flat\" :key=\"item.id\" :value=\"item.id\" class=\"e-tabpanel\">\n      <slot :name=\"item.id\" :item=\"item\"><slot name=\"panel\" :item=\"item\" /></slot>\n    </TabsContent>\n  </TabsRoot>\n</template>\n\n<style>\n@layer e.containers {\n  .e-tablist {\n    display: flex;\n    gap: 0;\n    /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties -- the two axes are set apart */\n    overflow-x: auto;\n    overflow-y: hidden;\n    scrollbar-width: none;\n  }\n\n  .e-tablist::-webkit-scrollbar {\n    display: none;\n  }\n\n  /* Tabs are button-like: every tab is ringed and neighbours sit flush and share an edge, so only the outer ends of the row are rounded. The selected tab is outlined in the primary colour with a thick slab underneath. */\n  .e-tab {\n    --e-bc: var(--e-border-strong);\n\n    /* A selected tab rises: its face is a whole rounded box with an offset copy in the primary colour showing underneath. The margin gives back the room that copy takes, so every tab row is one control height tall. */\n    --e-lift: 0px;\n\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    gap: var(--e-space-2);\n    flex: none;\n    height: calc(var(--e-control-height) - var(--e-lift));\n    margin-block-end: var(--e-lift);\n    padding: 0 var(--e-space-4);\n    border: var(--e-stroke-edge) solid var(--e-bc);\n    border-radius: 0;\n    background: transparent;\n    color: var(--e-muted);\n    font: 500 var(--e-text-md) / 1 var(--e-font-sans);\n    cursor: pointer;\n    transition:\n      color var(--e-duration-tap) var(--e-easing-out),\n      background-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  /* Only the outer ends of the row are rounded. */\n  .e-tab:first-child {\n    border-start-start-radius: var(--e-radius-md);\n    border-end-start-radius: var(--e-radius-md);\n  }\n\n  .e-tab:last-child {\n    border-start-end-radius: var(--e-radius-md);\n    border-end-end-radius: var(--e-radius-md);\n  }\n\n  .e-tab + .e-tab {\n    margin-inline-start: calc(-1 * var(--e-stroke-edge));\n  }\n\n  .e-tab:hover {\n    --e-bc: var(--e-ink);\n\n    z-index: var(--e-z-raised);\n    color: var(--e-ink);\n    background-color: var(--e-surface-hover);\n  }\n\n  .e-tab[aria-selected=\"true\"] {\n    --e-bc: var(--e-primary);\n    --e-lift: var(--e-depth);\n\n    z-index: var(--e-z-sticky);\n    background-color: color-mix(in srgb, var(--e-surface-tint), var(--e-ink) 3%);\n    box-shadow: 0 var(--e-lift) 0 0 var(--e-primary);\n    color: var(--e-ink);\n    font-weight: 600;\n  }\n\n  .e-tab:focus-visible {\n    z-index: var(--e-z-focus);\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n  }\n\n  .e-tabs--fill .e-tablist {\n    overflow-x: hidden;\n  }\n\n  .e-tabs--fill .e-tab {\n    flex: 1 1 0;\n    min-width: 0;\n    justify-content: center;\n    padding-inline: var(--e-space-1);\n  }\n\n  .e-tab-count {\n    min-width: var(--e-space-6);\n    padding: 0 var(--e-space-2);\n    border-radius: var(--e-radius-pill);\n    background: color-mix(in srgb, var(--e-primary) 12%, var(--e-surface));\n    box-shadow: inset 0 0 0 var(--e-stroke-hair) var(--e-primary);\n    font: 600 var(--e-text-xs) / 20px var(--e-font-mono);\n    text-align: center;\n    color: var(--e-ink);\n  }\n\n  .e-tabpanel {\n    padding-top: var(--e-space-4);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-tab {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-tab[aria-selected=\"true\"] {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ETabs.js","names":["_sfc_main","ETabs_vue_vue_type_script_setup_true_lang_default","ETabs_default"],"sources":["../../../src/components/Tabs/ETabs.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface TabItem {\n  /** Names the tab's slot, and is the value of `v-model`. */\n  id: string;\n  /** The tab's words. */\n  label: string;\n  /** A number or short word in a small badge after the label. */\n  count?: number | string;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, ref, watch } from \"vue\";\nimport { TabsContent, TabsList, TabsRoot, TabsTrigger } from \"reka-ui\";\nimport { useConfig } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nconst props = defineProps<{\n  /** The tabs, in order: `{ id, label, count? }`. Two to five across, with short labels; a vertical list can be longer. `id` names the slot and is the `v-model` value. */\n  items?: TabItem[];\n  /** Share the width equally between the tabs instead of letting each take its own. For a narrow container where the tabs must all fit; labels truncate. @default false */\n  fill?: boolean;\n  /** `vertical` stacks the tabs in a column beside their panel, for a long list of sections. Use it when there are more tabs than fit across; `fill` has no effect. @default \"horizontal\" */\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Joins the tabs to their panel so the two read as one card: the panel is outlined, the row of tabs sits on its edge like folder tabs, and the chosen tab opens into the panel with no line between. The edge stays open where there are no tabs. @default false */\n  framed?: boolean;\n}>();\n\ndefineSlots<{\n  [id: string]: ((props: { item: TabItem }) => unknown) | undefined;\n  /** The panel of any tab that has no slot of its own. */\n  panel?(props: { item: TabItem }): unknown;\n}>();\n\nconst flat = computed(() => props.items ?? []);\n\n/** The `id` of the selected tab. Keeps its own state when unbound. @default first tab */\nconst model = defineModel<string>();\n\nconst config = useConfig();\nconst current = computed(() => model.value ?? flat.value[0]?.id);\nconst dir = computed<\"ltr\" | \"rtl\">(\n  () => config.dir ?? (typeof document !== \"undefined\" && document.documentElement.dir === \"rtl\" ? \"rtl\" : \"ltr\"),\n);\n\nconst list = ref<{ $el: HTMLElement } | null>(null);\n\nasync function reveal(smooth: boolean) {\n  await nextTick();\n  const el = list.value?.$el;\n  const tab = el?.querySelector<HTMLElement>('[aria-selected=\"true\"]');\n  if (props.orientation === \"vertical\" || !el || !tab || el.scrollWidth <= el.clientWidth) return;\n  const calm = typeof matchMedia !== \"undefined\" && matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n  const a = tab.getBoundingClientRect();\n  const b = el.getBoundingClientRect();\n  el.scrollBy({ left: a.left + a.width / 2 - (b.left + b.width / 2), behavior: smooth && !calm ? \"smooth\" : \"auto\" });\n}\n\nonMounted(() => reveal(false));\nwatch(current, () => reveal(true));\n</script>\n\n<template>\n  <TabsRoot\n    class=\"e-tabs\"\n    :class=\"{ 'e-tabs--fill': fill, 'e-tabs--vertical': orientation === 'vertical', 'e-tabs--framed': framed }\"\n    :orientation=\"orientation ?? 'horizontal'\"\n    :model-value=\"current\"\n    :dir=\"dir\"\n    @update:model-value=\"model = String($event)\"\n  >\n    <TabsList ref=\"list\" class=\"e-tablist\">\n      <TabsTrigger v-for=\"item in flat\" :key=\"item.id\" :value=\"item.id\" class=\"e-tab\">\n        {{ item.label }}\n        <span v-if=\"item.count != null\" class=\"e-tab-count\">{{ item.count }}</span>\n      </TabsTrigger>\n    </TabsList>\n    <TabsContent v-for=\"item in flat\" :key=\"item.id\" :value=\"item.id\" class=\"e-tabpanel\">\n      <slot :name=\"item.id\" :item=\"item\"><slot name=\"panel\" :item=\"item\" /></slot>\n    </TabsContent>\n  </TabsRoot>\n</template>\n\n<style>\n@layer e.containers {\n  .e-tablist {\n    display: flex;\n    flex: none;\n    gap: 0;\n    /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties -- the two axes are set apart */\n    overflow-x: auto;\n    overflow-y: hidden;\n    scrollbar-width: none;\n  }\n\n  .e-tablist::-webkit-scrollbar {\n    display: none;\n  }\n\n  /* Tabs are button-like: every tab is ringed and neighbours sit flush and share an edge, so only the outer ends of the row are rounded. The selected tab is outlined in the primary colour with a thick slab along its bottom. */\n  .e-tab {\n    --e-bc: var(--e-border-strong);\n\n    /* A selected tab rises: the slab is a band the tab paints along one edge itself, so there is no second shape behind the corners. Every tab is one control height tall either way. */\n    --e-lift: 0px;\n    --e-band: calc(var(--e-lift) + var(--e-stroke-edge));\n    --e-slab: var(--e-primary);\n\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    gap: var(--e-space-2);\n    flex: none;\n    height: var(--e-control-height);\n    padding: 0 var(--e-space-4) var(--e-lift);\n    border: 0;\n    border-radius: 0;\n    background: transparent;\n    box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-bc);\n    color: var(--e-muted);\n    font: 500 var(--e-text-md) / 1 var(--e-font-sans);\n    cursor: pointer;\n    transition:\n      color var(--e-duration-tap) var(--e-easing-out),\n      background-color var(--e-duration-tap) var(--e-easing-out),\n      box-shadow var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  /* Only the outer ends of the row are rounded. */\n  .e-tab:first-child {\n    border-start-start-radius: var(--e-radius-md);\n    border-end-start-radius: var(--e-radius-md);\n  }\n\n  .e-tab:last-child {\n    border-start-end-radius: var(--e-radius-md);\n    border-end-end-radius: var(--e-radius-md);\n  }\n\n  .e-tab + .e-tab {\n    margin-inline-start: calc(-1 * var(--e-stroke-edge));\n  }\n\n  .e-tab:hover {\n    --e-bc: var(--e-ink);\n\n    z-index: var(--e-z-raised);\n    color: var(--e-ink);\n    background-color: var(--e-surface-hover);\n  }\n\n  .e-tab[aria-selected=\"true\"] {\n    --e-bc: var(--e-primary);\n    --e-lift: var(--e-depth);\n\n    z-index: var(--e-z-sticky);\n    background-color: color-mix(in srgb, var(--e-surface-tint), var(--e-ink) 3%);\n    box-shadow:\n      inset 0 0 0 var(--e-stroke-edge) var(--e-bc),\n      inset 0 calc(-1 * var(--e-band)) 0 0 var(--e-slab);\n    color: var(--e-ink);\n    font-weight: 600;\n  }\n\n  /* The slab answers the pointer too: it darkens under the cursor, in step with the face. */\n  .e-tab[aria-selected=\"true\"]:hover {\n    --e-slab: color-mix(in srgb, var(--e-primary), var(--e-shade-slab));\n  }\n\n  .e-tab:focus-visible {\n    z-index: var(--e-z-focus);\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n  }\n\n  .e-tabs--fill > .e-tablist {\n    overflow-x: hidden;\n  }\n\n  .e-tabs--fill > .e-tablist > .e-tab {\n    flex: 1 1 0;\n    min-width: 0;\n    justify-content: center;\n    padding-inline: var(--e-space-1);\n  }\n\n  /* Vertical: the tabs stack beside the panel, flush and sharing edges. The selected tab rises towards the panel, so its slab is a band down the inline-start side, away from the panel, instead of along the bottom, and only the top and bottom ends of the column are rounded. */\n  .e-tabs--vertical {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--e-space-4);\n  }\n\n  .e-tabs--vertical > .e-tablist {\n    flex-direction: column;\n    flex: none;\n    overflow: visible;\n  }\n\n  .e-tabs--vertical > .e-tablist > .e-tab {\n    --e-lift: 0px;\n\n    height: var(--e-control-height);\n    padding-block-end: 0;\n    justify-content: flex-start;\n    border-radius: 0;\n  }\n\n  .e-tabs--vertical > .e-tablist > .e-tab:first-child {\n    border-start-start-radius: var(--e-radius-md);\n    border-start-end-radius: var(--e-radius-md);\n  }\n\n  .e-tabs--vertical > .e-tablist > .e-tab:last-child {\n    border-end-start-radius: var(--e-radius-md);\n    border-end-end-radius: var(--e-radius-md);\n  }\n\n  .e-tabs--vertical > .e-tablist > .e-tab + .e-tab {\n    margin-inline-start: 0;\n    margin-block-start: calc(-1 * var(--e-stroke-edge));\n  }\n\n  .e-tabs--vertical > .e-tablist > .e-tab[aria-selected=\"true\"] {\n    --e-lift: var(--e-depth);\n\n    padding-inline-start: calc(var(--e-space-4) + var(--e-lift));\n    box-shadow:\n      inset 0 0 0 var(--e-stroke-edge) var(--e-bc),\n      inset var(--e-band) 0 0 0 var(--e-slab);\n  }\n\n  .e-tabs--vertical > .e-tabpanel {\n    flex: 1 1 0;\n    min-width: 0;\n    padding-top: 0;\n  }\n\n  :dir(rtl) .e-tabs--vertical > .e-tablist > .e-tab[aria-selected=\"true\"] {\n    box-shadow:\n      inset 0 0 0 var(--e-stroke-edge) var(--e-bc),\n      inset calc(-1 * var(--e-band)) 0 0 0 var(--e-slab);\n  }\n\n  /* Framed: tabs and panel are one outlined card. The tab row sits over the panel's edge by one stroke, so a tab's lower edge and the panel's upper edge are the same line; the chosen tab has no edge on that side and its fill covers the panel's, opening into it. Tabs sit flush with their neighbours, square where they meet; only the card's outer corner at the first tab is rounded, and the panel's own corner beside it is square. The row always leaves a corner's width of open edge past the last tab, so the panel's curve never lands against a tab's straight edge. */\n  .e-tabs--framed > .e-tablist {\n    position: relative;\n    z-index: var(--e-z-raised);\n    margin-block-end: calc(-1 * var(--e-stroke-edge));\n  }\n\n  .e-tabs--framed > .e-tablist > .e-tab {\n    --e-bc: var(--e-border-strong);\n    --e-lift: 0px;\n\n    border-radius: 0;\n    background-color: var(--e-surface-tint);\n  }\n\n  .e-tabs--framed > .e-tablist > .e-tab:first-child {\n    border-start-start-radius: var(--e-radius-md);\n  }\n\n  .e-tabs--framed.e-tabs--fill > .e-tablist > .e-tab:last-child {\n    border-start-end-radius: var(--e-radius-md);\n  }\n\n  .e-tabs:not(.e-tabs--fill, .e-tabs--vertical).e-tabs--framed > .e-tablist {\n    padding-inline-end: var(--e-radius-md);\n  }\n\n  .e-tabs--framed > .e-tablist > .e-tab:hover {\n    background-color: var(--e-surface-hover);\n  }\n\n  /* The chosen tab rises like a button does, with its primary slab as a band on the edge away from the panel, and its open sides outlined in the primary colour. */\n  .e-tabs--framed > .e-tablist > .e-tab[aria-selected=\"true\"] {\n    --e-bc: var(--e-primary);\n    --e-lift: var(--e-depth);\n\n    padding-block: var(--e-lift) 0;\n    background-color: var(--e-surface);\n    box-shadow:\n      inset var(--e-stroke-edge) 0 0 0 var(--e-bc),\n      inset calc(-1 * var(--e-stroke-edge)) 0 0 0 var(--e-bc),\n      inset 0 var(--e-band) 0 0 var(--e-slab);\n  }\n\n  .e-tabs--framed > .e-tabpanel {\n    padding: var(--e-space-4);\n    border-radius: var(--e-radius-md);\n    border-start-start-radius: 0;\n    background: var(--e-surface);\n    box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-border-strong);\n  }\n\n  .e-tabs--framed.e-tabs--fill > .e-tabpanel {\n    border-start-end-radius: 0;\n  }\n\n  .e-tabs--framed.e-tabs--vertical {\n    gap: 0;\n    align-items: stretch;\n  }\n\n  .e-tabs--framed.e-tabs--vertical > .e-tablist {\n    align-self: flex-start;\n    margin-block-end: var(--e-radius-md);\n    margin-inline-end: calc(-1 * var(--e-stroke-edge));\n  }\n\n  .e-tabs--framed.e-tabs--vertical > .e-tablist > .e-tab {\n    border-radius: 0;\n  }\n\n  .e-tabs--framed.e-tabs--vertical > .e-tablist > .e-tab:first-child {\n    border-start-start-radius: var(--e-radius-md);\n  }\n\n  .e-tabs--framed.e-tabs--vertical > .e-tablist > .e-tab[aria-selected=\"true\"] {\n    margin-block: calc(-1 * var(--e-stroke-edge)) 0;\n    padding-block: 0;\n    padding-inline-start: calc(var(--e-space-4) + var(--e-lift));\n    box-shadow:\n      inset 0 var(--e-stroke-edge) 0 0 var(--e-bc),\n      inset 0 calc(-1 * var(--e-stroke-edge)) 0 0 var(--e-bc),\n      inset var(--e-band) 0 0 0 var(--e-slab);\n  }\n\n  :dir(rtl) .e-tabs--framed.e-tabs--vertical > .e-tablist > .e-tab[aria-selected=\"true\"] {\n    box-shadow:\n      inset 0 var(--e-stroke-edge) 0 0 var(--e-bc),\n      inset 0 calc(-1 * var(--e-stroke-edge)) 0 0 var(--e-bc),\n      inset calc(-1 * var(--e-band)) 0 0 0 var(--e-slab);\n  }\n\n  .e-tabs--framed.e-tabs--vertical > .e-tablist > .e-tab[aria-selected=\"true\"]:first-child {\n    margin-block-start: 0;\n  }\n\n  .e-tabs--framed.e-tabs--vertical > .e-tabpanel {\n    padding: var(--e-space-4);\n  }\n\n  .e-tab-count {\n    min-width: var(--e-space-6);\n    padding: 0 var(--e-space-2);\n    border-radius: var(--e-radius-pill);\n    background: color-mix(in srgb, var(--e-primary) 12%, var(--e-surface));\n    box-shadow: inset 0 0 0 var(--e-stroke-hair) var(--e-primary);\n    font: 600 var(--e-text-xs) / 20px var(--e-font-mono);\n    text-align: center;\n    color: var(--e-ink);\n  }\n\n  .e-tabpanel {\n    padding-top: var(--e-space-4);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-tab {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-tab[aria-selected=\"true\"] {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Tabs/ETabs.vue.d.ts

@@ -9,20 +9,28 @@ export interface TabItem {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<{
-    /** The tabs, in order: `{ id, label, count? }`. Two to five, with short labels. `id` names the slot and is the `v-model` value. */
+    /** The tabs, in order: `{ id, label, count? }`. Two to five across, with short labels; a vertical list can be longer. `id` names the slot and is the `v-model` value. */
     items?: TabItem[];
     /** Share the width equally between the tabs instead of letting each take its own. For a narrow container where the tabs must all fit; labels truncate. @default false */
     fill?: boolean;
+    /** `vertical` stacks the tabs in a column beside their panel, for a long list of sections. Use it when there are more tabs than fit across; `fill` has no effect. @default "horizontal" */
+    orientation?: "horizontal" | "vertical";
+    /** Joins the tabs to their panel so the two read as one card: the panel is outlined, the row of tabs sits on its edge like folder tabs, and the chosen tab opens into the panel with no line between. The edge stays open where there are no tabs. @default false */
+    framed?: boolean;
 } & {
     /** The `id` of the selected tab. Keeps its own state when unbound. @default first tab */
     modelValue?: string;
 }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: string | undefined) => any;
 }, string, import('vue').PublicProps, Readonly<{
-    /** The tabs, in order: `{ id, label, count? }`. Two to five, with short labels. `id` names the slot and is the `v-model` value. */
+    /** The tabs, in order: `{ id, label, count? }`. Two to five across, with short labels; a vertical list can be longer. `id` names the slot and is the `v-model` value. */
     items?: TabItem[];
     /** Share the width equally between the tabs instead of letting each take its own. For a narrow container where the tabs must all fit; labels truncate. @default false */
     fill?: boolean;
+    /** `vertical` stacks the tabs in a column beside their panel, for a long list of sections. Use it when there are more tabs than fit across; `fill` has no effect. @default "horizontal" */
+    orientation?: "horizontal" | "vertical";
+    /** Joins the tabs to their panel so the two read as one card: the panel is outlined, the row of tabs sits on its edge like folder tabs, and the chosen tab opens into the panel with no line between. The edge stays open where there are no tabs. @default false */
+    framed?: boolean;
 } & {
     /** The `id` of the selected tab. Keeps its own state when unbound. @default first tab */
     modelValue?: string;