origam 2.14.0 → 2.15.0

package/dist/src/components/Card/OrigamCardText.vue

@@ -59,6 +59,7 @@ const props = defineProps({
   letterSpacing: { type: String, required: false }
 });
 const { filterProps } = useProps(props);
+defineSlots();
 const { densityClasses } = useDensity(props);
 const { typographyStyles } = useTypography(props, "card-text");
 const cardTextStyles = computed(() => {

package/dist/src/components/Carousel/OrigamCarousel.vue

@@ -167,6 +167,7 @@ const props = defineProps({
   width: { type: [Number, String], required: false }
 });
 defineEmits(["update:modelValue"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const { t } = useLocale();
 const model = useVModel(props, "modelValue");

package/dist/src/components/Carousel/OrigamCarouselItem.vue

@@ -111,6 +111,7 @@ const props = defineProps({
   selectedClass: { type: String, required: false }
 });
 const { filterProps } = useProps(props);
+defineSlots();
 const attrs = useAttrs();
 const origamWindowItemRef = ref();
 const origamImgRef = ref();

package/dist/src/components/Chart/OrigamChartBoxPlot.vue

@@ -325,6 +325,7 @@ const props = defineProps({
   fontWeight: { type: String, required: false }
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
+defineSlots();
 const { dimensionStyles } = useDimension(props);
 const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, "bgColor");
 const { elevationClasses, elevationStyles } = useElevation(props);

package/dist/src/components/Chart/OrigamChartBullet.vue

@@ -172,7 +172,7 @@
 					:y-axis-format="yAxisFormat"
 			>
 				<template
-						v-if="$slots.tooltip"
+						v-if="$slots.tooltip && hoveredBullet"
 						#default="bindings"
 				>
 					<slot
@@ -230,15 +230,16 @@ import {
   useRounded
 } from "../../composables";
 import { intentBgExpr, isIntent } from "../../utils/Commons/color.util";
+import { DIRECTION } from "../../enums";
 defineOptions({
   name: "OrigamChartBullet"
 });
 const props = defineProps({
   categories: { type: Array, required: false, default: () => [] },
-  barColor: { type: String, required: false, default: "primary" },
-  targetColor: { type: String, required: false, default: "danger" },
+  barColor: { type: null, required: false, default: "primary" },
+  targetColor: { type: null, required: false, default: "danger" },
   rangeColors: { type: Array, required: false, default: () => ["danger", "warning", "success"] },
-  orientation: { type: String, required: false, default: "horizontal" },
+  orientation: { type: null, required: false, default: "horizontal" },
   barThickness: { type: Number, required: false, default: 0.45 },
   showAxis: { type: Boolean, required: false, default: true },
   xAxisFormat: { type: Function, required: false, default: void 0 },
@@ -287,6 +288,7 @@ const props = defineProps({
   fontWeight: { type: String, required: false }
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
+defineSlots();
 const { dimensionStyles } = useDimension(props);
 const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, "bgColor");
 const { elevationClasses, elevationStyles } = useElevation(props);
@@ -299,7 +301,7 @@ const SVG_HEIGHT = 400;
 const AXIS_TICK_COUNT = 5;
 const TARGET_TICK_FRACTION = 0.7;
 const LABEL_GAP = 6;
-const isHorizontal = computed(() => props.orientation !== "vertical");
+const isHorizontal = computed(() => props.orientation !== DIRECTION.VERTICAL);
 const PADDING = computed(
   () => isHorizontal.value ? { top: 12, right: 24, bottom: 32, left: 120 } : { top: 24, right: 24, bottom: 48, left: 40 }
 );

package/dist/src/components/Chart/OrigamChartCandlestick.vue

@@ -147,7 +147,7 @@
 					:y-axis-format="yAxisFormat"
 			>
 				<template
-						v-if="$slots.tooltip"
+						v-if="$slots.tooltip && hoveredCandle"
 						#default="bindings"
 				>
 					<slot
@@ -210,8 +210,8 @@ defineOptions({
 });
 const props = defineProps({
   height: { type: [Number, String], required: false, default: 400 },
-  bullishColor: { type: String, required: false, default: "success" },
-  bearishColor: { type: String, required: false, default: "danger" },
+  bullishColor: { type: null, required: false, default: "success" },
+  bearishColor: { type: null, required: false, default: "danger" },
   candleWidth: { type: Number, required: false, default: 0.6 },
   wickWidth: { type: Number, required: false, default: 1 },
   showLegend: { type: Boolean, required: false, default: false },
@@ -263,6 +263,7 @@ const props = defineProps({
   fontWeight: { type: String, required: false }
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
+defineSlots();
 const { dimensionStyles } = useDimension(props);
 const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, "bgColor");
 const { elevationClasses, elevationStyles } = useElevation(props);
@@ -417,10 +418,10 @@ const enrichedTooltipBindings = (bindings) => {
   const c = hoveredCandle.value;
   return {
     ...bindings,
-    datum: c?.datum ?? null,
-    change: c?.change ?? 0,
-    changePct: c?.changePct ?? 0,
-    isBullish: c?.isBullish ?? true
+    datum: c.datum,
+    change: c.change,
+    changePct: c.changePct,
+    isBullish: c.isBullish
   };
 };
 const showEmpty = computed(() => {

package/dist/src/components/Chart/OrigamChartCartesian.vue

@@ -577,6 +577,7 @@ const props = defineProps({
   fontWeight: { type: String, required: false }
 });
 const emit = defineEmits(["drill", "drill-up", "zoom", "reset-zoom", "point-click", "legend-click", "series-toggle"]);
+defineSlots();
 const drillStack = ref([]);
 const activeSeries = computed(() => {
   if (!drillStack.value.length) return props.series;

package/dist/src/components/Chart/OrigamChartGauge.vue

@@ -201,6 +201,7 @@ const props = defineProps({
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
 void emit;
+defineSlots();
 const { dimensionStyles } = useDimension(props);
 const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, "bgColor");
 const { elevationClasses, elevationStyles } = useElevation(props);

package/dist/src/components/Chart/OrigamChartHeatmap.vue

@@ -200,7 +200,7 @@
 				>
 					<slot
 							name="tooltip"
-							v-bind="bindings"
+							v-bind="enrichedTooltipBindings(bindings)"
 					/>
 				</template>
 			</origam-chart-tooltip>
@@ -292,6 +292,7 @@ const props = defineProps({
   fontWeight: { type: String, required: false }
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
+defineSlots();
 const { dimensionStyles } = useDimension(props);
 const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, "bgColor");
 const { elevationClasses, elevationStyles } = useElevation(props);
@@ -470,6 +471,16 @@ const hoveredCategory = computed(() => {
   if (!c) return "";
   return `${c.xCat} \xD7 ${c.yCat}`;
 });
+const enrichedTooltipBindings = (bindings) => {
+  const c = hoveredCell.value;
+  return {
+    ...bindings,
+    color: c?.color ?? "",
+    xLabel: c ? formatXLabel(c.xCat) : "",
+    yLabel: c ? formatYLabel(c.yCat) : "",
+    value: c?.value ?? 0
+  };
+};
 const showEmpty = computed(() => {
   if (!props.series?.length) return true;
   const first = props.series[0];

package/dist/src/components/Chart/OrigamChartHoneycomb.vue

@@ -214,6 +214,7 @@ const props = defineProps({
   fontWeight: { type: String, required: false }
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
+defineSlots();
 const { dimensionStyles } = useDimension(props);
 const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, "bgColor");
 const { elevationClasses, elevationStyles } = useElevation(props);

package/dist/src/components/Chart/OrigamChartLegend.vue

@@ -43,6 +43,7 @@ const props = defineProps({
   position: { type: String, required: false, default: "bottom" }
 });
 const emit = defineEmits(["legend-click", "series-toggle"]);
+defineSlots();
 const legendClasses = computed(() => ({
   [`origam-chart__legend--${props.position}`]: true
 }));

package/dist/src/components/Chart/OrigamChartMap.vue

@@ -213,8 +213,8 @@ import {
   useRounded
 } from "../../composables";
 import { intentBgExpr, isIntent } from "../../utils/Commons/color.util";
-import { CHART_MAP_MODE } from "../../enums/Chart/chart-map-mode.enum";
-import { WORLD_GEOGRAPHIC_DATA } from "../../consts/Chart/world-geographic.const";
+import { CHART_MAP_MODE } from "../../enums/Chart/chart-map.enum";
+import { WORLD_GEOGRAPHIC_DATA } from "../../consts/Chart/chart-map.const";
 import { multiPolygonToSvgPath, multiPolygonCentroid } from "../../utils/Chart/mercator.util";
 defineOptions({
   name: "OrigamChartMap"
@@ -224,7 +224,7 @@ const props = defineProps({
   colorRange: { type: Array, required: false, default: () => ["info", "danger"] },
   defaultCountryFill: { type: String, required: false, default: "rgba(0,0,0,0.08)" },
   borderColor: { type: String, required: false, default: "rgba(0,0,0,0.2)" },
-  lineColor: { type: String, required: false, default: "primary" },
+  lineColor: { type: null, required: false, default: "primary" },
   nodeRadius: { type: Number, required: false, default: 4 },
   routeCurvature: { type: Number, required: false, default: 0.3 },
   yAxisFormat: { type: Function, required: false, default: void 0 },
@@ -273,6 +273,7 @@ const props = defineProps({
   fontWeight: { type: String, required: false }
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
+defineSlots();
 const { dimensionStyles } = useDimension(props);
 const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, "bgColor");
 const { elevationClasses, elevationStyles } = useElevation(props);

package/dist/src/components/Chart/OrigamChartPareto.vue

@@ -313,8 +313,8 @@ defineOptions({
   name: "OrigamChartPareto"
 });
 const props = defineProps({
-  barColor: { type: String, required: false, default: "primary" },
-  lineColor: { type: String, required: false, default: "danger" },
+  barColor: { type: null, required: false, default: "primary" },
+  lineColor: { type: null, required: false, default: "danger" },
   barGap: { type: Number, required: false, default: 4 },
   showLine: { type: Boolean, required: false, default: true },
   showLabel: { type: Boolean, required: false, default: false },
@@ -368,6 +368,7 @@ const props = defineProps({
   fontWeight: { type: String, required: false }
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
+defineSlots();
 const { dimensionStyles } = useDimension(props);
 const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, "bgColor");
 const { elevationClasses, elevationStyles } = useElevation(props);
@@ -562,15 +563,14 @@ const hoveredCategory = computed(
 );
 const tooltipBindings = (bindings) => {
   const bar = hoveredBar.value;
-  if (!bar) return bindings;
   return {
-    ...bindings,
-    category: bar.category,
-    value: bar.value,
-    formattedValue: bar.formattedValue,
-    share: bar.share,
-    cumulative: bar.cumulative,
-    color: bar.color
+    point: bindings.point,
+    category: bar?.category ?? "",
+    value: bar?.value ?? 0,
+    formattedValue: bar?.formattedValue ?? "",
+    share: bar?.share ?? 0,
+    cumulative: bar?.cumulative ?? 0,
+    color: bar?.color ?? ""
   };
 };
 const rootClasses = computed(() => [

package/dist/src/components/Chart/OrigamChartPictorial.vue

@@ -201,7 +201,7 @@
 				</g>
 
 				<g
-						v-if="mode === 'stack' && showAxis && direction === 'vertical'"
+						v-if="mode === 'stack' && showAxis && direction === DIRECTION.VERTICAL"
 						class="origam-chart-pictorial__axis"
 						data-cy="origam-chart-pictorial-axis"
 				>
@@ -219,7 +219,7 @@
 				</g>
 
 				<g
-						v-if="mode === 'stack' && showAxis && direction === 'horizontal'"
+						v-if="mode === 'stack' && showAxis && direction === DIRECTION.HORIZONTAL"
 						class="origam-chart-pictorial__axis"
 						data-cy="origam-chart-pictorial-axis"
 				>
@@ -305,16 +305,16 @@ import {
   useRounded
 } from "../../composables";
 import { intentBgExpr, isIntent } from "../../utils/Commons/color.util";
-import { CHART_PICTORIAL_MODE } from "../../enums";
+import { CHART_PICTORIAL_MODE, DIRECTION } from "../../enums";
 defineOptions({
   name: "OrigamChartPictorial"
 });
 const props = defineProps({
   icon: { type: String, required: false, default: "M12 2a4 4 0 0 1 4 4v1a4 4 0 0 1-8 0V6a4 4 0 0 1 4-4Zm-7 20a7 7 0 0 1 14 0v1H5v-1Z" },
-  iconColor: { type: String, required: false, default: void 0 },
+  iconColor: { type: null, required: false, default: void 0 },
   emptyIconColor: { type: String, required: false, default: "rgba(0,0,0,0.1)" },
   iconsPerUnit: { type: Number, required: false, default: 1 },
-  direction: { type: String, required: false, default: "vertical" },
+  direction: { type: null, required: false, default: "vertical" },
   mode: { type: String, required: false, default: "stack" },
   showLabel: { type: Boolean, required: false, default: true },
   showAxis: { type: Boolean, required: false, default: true },
@@ -365,6 +365,7 @@ const props = defineProps({
   fontWeight: { type: String, required: false }
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
+defineSlots();
 const { dimensionStyles } = useDimension(props);
 const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, "bgColor");
 const { elevationClasses, elevationStyles } = useElevation(props);
@@ -451,24 +452,24 @@ const seriesCount = computed(() => props.series?.length ?? 0);
 const axisH = computed(() => props.showAxis ? AXIS_LABEL_HEIGHT + AXIS_PADDING : 0);
 const valueLabelH = computed(() => props.showLabel ? VALUE_LABEL_HEIGHT : 0);
 const plotHeight = computed(() => {
-  if (props.direction === "horizontal") {
+  if (props.direction === DIRECTION.HORIZONTAL) {
     return SVG_HEIGHT - axisH.value;
   }
   return SVG_HEIGHT - axisH.value - valueLabelH.value;
 });
 const plotWidth = computed(() => {
-  if (props.direction === "horizontal") {
+  if (props.direction === DIRECTION.HORIZONTAL) {
     return SVG_WIDTH - axisH.value - valueLabelH.value;
   }
   return SVG_WIDTH;
 });
 const PLOT_Y = computed(() => props.showLabel ? VALUE_LABEL_HEIGHT : 0);
-const PLOT_X = computed(() => props.direction === "horizontal" && props.showAxis ? AXIS_LABEL_HEIGHT + AXIS_PADDING : 0);
+const PLOT_X = computed(() => props.direction === DIRECTION.HORIZONTAL && props.showAxis ? AXIS_LABEL_HEIGHT + AXIS_PADDING : 0);
 const columnWidth = computed(() => {
   const totalCols = categoryCount.value * seriesCount.value;
   if (totalCols <= 0) return 0;
   const totalGaps = (totalCols - 1) * SERIES_GAP;
-  if (props.direction === "vertical") {
+  if (props.direction === DIRECTION.VERTICAL) {
     return Math.max(4, (plotWidth.value - totalGaps) / totalCols);
   }
   const totalGapsH = (categoryCount.value - 1) * SERIES_GAP;
@@ -477,7 +478,7 @@ const columnWidth = computed(() => {
 const iconSize = computed(() => {
   const s = slotsPerColumn.value;
   if (s <= 0) return 0;
-  if (props.direction === "vertical") {
+  if (props.direction === DIRECTION.VERTICAL) {
     const slotH = plotHeight.value / s - ICON_GAP;
     const colBound2 = columnWidth.value - ICON_GAP;
     return Math.max(MIN_ICON_SIZE, Math.min(slotH, colBound2));
@@ -503,7 +504,7 @@ const columns = computed(() => {
       const isHidden = hiddenSeries.value.has(s.name);
       let x;
       let y;
-      if (props.direction === "vertical") {
+      if (props.direction === DIRECTION.VERTICAL) {
         x = PLOT_X.value + colIdx * (colW + SERIES_GAP);
         y = PLOT_Y.value;
       } else {
@@ -610,14 +611,14 @@ const fillColumnAriaLabel = (col) => {
   return `${col.category}: ${col.formatted} \u2014 ${pct}% of maximum`;
 };
 const iconX = (col, slotIdx) => {
-  if (props.direction === "horizontal") {
+  if (props.direction === DIRECTION.HORIZONTAL) {
     return slotIdx * (col.iconSize + ICON_GAP);
   }
   const colW = columnWidth.value;
   return (colW - col.iconSize) / 2;
 };
 const iconY = (col, slotIdx) => {
-  if (props.direction === "horizontal") {
+  if (props.direction === DIRECTION.HORIZONTAL) {
     const colW = columnWidth.value;
     return (colW - col.iconSize) / 2;
   }
@@ -626,14 +627,14 @@ const iconY = (col, slotIdx) => {
   return totalH - fromBottom * (col.iconSize + ICON_GAP) - col.iconSize;
 };
 const labelX = (col) => {
-  if (props.direction === "horizontal") {
+  if (props.direction === DIRECTION.HORIZONTAL) {
     const usedW = slotsPerColumn.value * (col.iconSize + ICON_GAP);
     return usedW + VALUE_LABEL_HEIGHT / 2;
   }
   return columnWidth.value / 2;
 };
 const labelY = (_col) => {
-  if (props.direction === "horizontal") {
+  if (props.direction === DIRECTION.HORIZONTAL) {
     return columnWidth.value / 2;
   }
   return -VALUE_LABEL_HEIGHT / 2;

package/dist/src/components/Chart/OrigamChartPolar.vue

@@ -232,6 +232,7 @@ const props = defineProps({
   fontWeight: { type: String, required: false }
 });
 const emit = defineEmits(["drill", "drill-up", "point-click", "legend-click", "series-toggle"]);
+defineSlots();
 const drillStack = ref([]);
 const activeSeries = computed(() => {
   if (!drillStack.value.length) return props.series;

package/dist/src/components/Chart/OrigamChartPolarBar.vue

@@ -227,6 +227,7 @@ const props = defineProps({
   fontWeight: { type: String, required: false }
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
+defineSlots();
 const { dimensionStyles } = useDimension(props);
 const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, "bgColor");
 const { elevationClasses, elevationStyles } = useElevation(props);

package/dist/src/components/Chart/OrigamChartPyramid.vue

@@ -223,6 +223,7 @@ const props = defineProps({
   fontWeight: { type: String, required: false }
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
+defineSlots();
 const { dimensionStyles } = useDimension(props);
 const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, "bgColor");
 const { elevationClasses, elevationStyles } = useElevation(props);

package/dist/src/components/Chart/OrigamChartRadar.vue

@@ -201,6 +201,7 @@ const props = defineProps({
   fontWeight: { type: String, required: false }
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
+defineSlots();
 const { dimensionStyles } = useDimension(props);
 const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, "bgColor");
 const { elevationClasses, elevationStyles } = useElevation(props);

package/dist/src/components/Chart/OrigamChartSankey.vue

@@ -237,6 +237,7 @@ const props = defineProps({
   fontWeight: { type: String, required: false }
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
+defineSlots();
 const { dimensionStyles } = useDimension(props);
 const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, "bgColor");
 const { elevationClasses, elevationStyles } = useElevation(props);

package/dist/src/components/Chart/OrigamChartSparkline.vue

@@ -150,7 +150,7 @@ defineOptions({
 const props = defineProps({
   series: { type: Array, required: true },
   type: { type: null, required: false, default: "line" },
-  color: { type: String, required: false, default: "primary" },
+  color: { type: null, required: false, default: "primary" },
   lineWidth: { type: Number, required: false, default: 1.5 },
   showMarkers: { type: Boolean, required: false, default: false },
   showMin: { type: Boolean, required: false, default: false },
@@ -198,6 +198,7 @@ const props = defineProps({
   fontWeight: { type: String, required: false }
 });
 defineEmits(["point-click"]);
+defineSlots();
 const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, "bgColor");
 const { elevationClasses, elevationStyles } = useElevation(props);
 const { marginStyles } = useMargin(props);

package/dist/src/components/Chart/OrigamChartStreamgraph.vue

@@ -248,6 +248,7 @@ const props = defineProps({
   fontWeight: { type: String, required: false }
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
+defineSlots();
 const { dimensionStyles } = useDimension(props);
 const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, "bgColor");
 const { elevationClasses, elevationStyles } = useElevation(props);

package/dist/src/components/Chart/OrigamChartSunburst.vue

@@ -230,6 +230,7 @@ const props = defineProps({
   fontWeight: { type: String, required: false }
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
+defineSlots();
 const { dimensionStyles } = useDimension(props);
 const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, "bgColor");
 const { elevationClasses, elevationStyles } = useElevation(props);

package/dist/src/components/Chart/OrigamChartTooltip.vue

@@ -40,6 +40,7 @@ const props = defineProps({
   xAxisFormat: { type: Function, required: false, default: void 0 },
   yAxisFormat: { type: Function, required: false, default: void 0 }
 });
+defineSlots();
 const formatX = (value) => {
   if (props.xAxisFormat) return props.xAxisFormat(value);
   return String(value);

package/dist/src/components/Chart/OrigamChartTreemap.vue

@@ -226,6 +226,7 @@ const props = defineProps({
   fontWeight: { type: String, required: false }
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
+defineSlots();
 const { dimensionStyles } = useDimension(props);
 const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, "bgColor");
 const { elevationClasses, elevationStyles } = useElevation(props);

package/dist/src/components/Chart/OrigamChartVariwide.vue

@@ -306,6 +306,7 @@ const props = defineProps({
   fontWeight: { type: String, required: false }
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
+defineSlots();
 const { dimensionStyles } = useDimension(props);
 const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, "bgColor");
 const { elevationClasses, elevationStyles } = useElevation(props);
@@ -482,15 +483,14 @@ const hoveredCategory = computed(
 );
 const tooltipBindings = (bindings) => {
   const col = hoveredColumn.value;
-  if (!col) return bindings;
   return {
-    ...bindings,
-    category: col.category,
-    value: col.value,
-    widthValue: col.widthValue,
-    formattedValue: col.formattedValue,
-    formattedWidth: col.formattedWidth,
-    color: col.color
+    point: bindings.point,
+    category: col?.category ?? "",
+    value: col?.value ?? 0,
+    widthValue: col?.widthValue ?? 0,
+    formattedValue: col?.formattedValue ?? "",
+    formattedWidth: col?.formattedWidth ?? "",
+    color: col?.color ?? ""
   };
 };
 const rootClasses = computed(() => [

package/dist/src/components/Chart/OrigamChartWordCloud.vue

@@ -201,6 +201,7 @@ const props = defineProps({
   fontSize: { type: String, required: false }
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
+defineSlots();
 const { dimensionStyles } = useDimension(props);
 const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, "bgColor");
 const { elevationClasses, elevationStyles } = useElevation(props);

package/dist/src/components/Chip/OrigamChip.vue

@@ -222,6 +222,7 @@ const _props = defineProps({
 });
 const props = useDefaults(_props);
 const emits = defineEmits(["update:modelValue", "click", "click:close", "click:append", "click:prepend", "group:selected"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const { t } = useLocale();
 const attrs = useAttrs();

package/dist/src/components/Chip/OrigamChipGroup.vue

@@ -78,6 +78,7 @@ const props = defineProps({
   mobileBreakpoint: { type: null, required: false }
 });
 defineEmits(["update:modelValue"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const origamSlideGroupRef = ref();
 const { isSelected, select, next, prev, selected } = useGroup(props, ORIGAM_CHIP_GROUP_KEY);

package/dist/src/components/ClientOnly/OrigamClientOnly.vue

@@ -21,6 +21,7 @@ defineProps({
   placeholderTag: { type: String, required: false },
   placeholderClass: { type: String, required: false }
 });
+defineSlots();
 const isMounted = ref(false);
 onMounted(() => {
   isMounted.value = true;

package/dist/src/components/Clipboard/OrigamClipboard.vue

@@ -95,6 +95,7 @@ const props = defineProps({
   letterSpacing: { type: String, required: false }
 });
 const emit = defineEmits(["copy", "error"]);
+defineSlots();
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const { borderClasses, borderStyles } = useBorder(props);
 const { roundedClasses, roundedStyles } = useRounded(props);

package/dist/src/components/Code/OrigamCode.vue

@@ -156,6 +156,7 @@ const _props = defineProps({
 });
 const props = useDefaults(_props);
 const emit = defineEmits(["copy"]);
+defineSlots();
 const slots = useSlots();
 const { borderClasses, borderStyles } = useBorder(props);
 const { roundedClasses, roundedStyles } = useRounded(props);

package/dist/src/components/ColorPicker/OrigamColorPicker.vue

@@ -185,6 +185,7 @@ const props = defineProps({
   swatches: { type: Array, required: false }
 });
 defineEmits(["update:modelValue", "update:mode"]);
+defineSlots();
 const slots = useSlots();
 const { filterProps } = useProps(props);
 const { rtlClasses } = useRtl();

package/dist/src/components/ColorPicker/OrigamColorPickerEdit.vue

@@ -128,7 +128,13 @@ defineExpose({
 			}
 
 			#{$this}__label {
-				font-size: .75rem
+				// `rem` resolves against the document root, not this component's
+				// ancestor — a plain literal here would be immune to the typography
+				// bridge `OrigamColorPickerField` republishes on the teleported
+				// surface (see `useTeleportTypography`). Generic-first read, same
+				// convention as `useTypography`'s rollout: the bridged var wins when
+				// present, the historical size is the fallback.
+				font-size: var(--origam-color-picker-edit__label---font-size, .75rem);
 			}
 		}
 	}

package/dist/src/components/ColorPickerField/OrigamColorPickerField.vue

@@ -128,7 +128,7 @@
 
 <script lang="ts" setup>
 import { OrigamColorPicker, OrigamMenu, OrigamSheet, OrigamTextField, OrigamTranslateScale } from "../../components";
-import { useDefaults, useLocale, useProps, useVModel, useStyle } from "../../composables";
+import { useDefaults, useLocale, useProps, useTeleportTypography, useVModel, useStyle } from "../../composables";
 import { COLOR_NULL, ORIGAM_FORM_KEY } from "../../consts";
 import { BLOCK, DENSITY, DIRECTION, TEXT_FIELD_TYPE } from "../../enums";
 import { forwardRefs, HSVtoCSS, matchesSelector } from "../../utils";
@@ -253,6 +253,7 @@ const _props = defineProps({
 });
 const props = useDefaults(_props);
 const { filterProps } = useProps(props);
+defineSlots();
 const { t } = useLocale();
 const origamTextFieldRef = ref();
 const origamMenuRef = ref();
@@ -295,13 +296,24 @@ const form = inject(ORIGAM_FORM_KEY, null);
 const menuDisabled = computed(() => {
   return props.readonly || form?.isReadonly.value;
 });
+const { typographyStyles: menuTypographyStyles } = useTeleportTypography(origamTextFieldRef, menu, (fontSize) => ({
+  "--origam-picker-title---font-size": fontSize,
+  "--origam-color-picker-edit__label---font-size": fontSize
+}));
 const menuProps = computed(() => {
+  const consumerContentProps = props.menuProps?.contentProps ?? {};
   return {
     ...props.menuProps,
     activatorProps: {
       ...props.menuProps?.activatorProps || {},
       "aria-haspopup": "colorpickerbox"
       // Set aria-haspopup to 'listbox'
+    },
+    contentProps: {
+      ...consumerContentProps,
+      // The consumer's own style is listed last so it still wins —
+      // the bridge is a default, not a lock.
+      style: [menuTypographyStyles.value, consumerContentProps.style]
     }
   };
 });