origam 2.14.1 → 2.16.0

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 },
@@ -328,7 +328,7 @@ const props = defineProps({
   title: { type: String, required: false, default: void 0 },
   subtitle: { type: String, required: false, default: void 0 },
   showLegend: { type: Boolean, required: false, default: true },
-  legendPosition: { type: String, required: false, default: "bottom" },
+  legendPosition: { type: null, required: false, default: "bottom" },
   showTooltip: { type: Boolean, required: false, default: true },
   animated: { type: Boolean, required: false, default: true },
   animationDuration: { type: Number, required: false, default: 600 },
@@ -364,10 +364,11 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false }
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, 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,17 +305,17 @@ 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" },
-  mode: { type: String, required: false, default: "stack" },
+  direction: { type: null, required: false, default: "vertical" },
+  mode: { type: null, required: false, default: "stack" },
   showLabel: { type: Boolean, required: false, default: true },
   showAxis: { type: Boolean, required: false, default: true },
   xAxisFormat: { type: Function, required: false, default: void 0 },
@@ -325,7 +325,7 @@ const props = defineProps({
   title: { type: String, required: false, default: void 0 },
   subtitle: { type: String, required: false, default: void 0 },
   showLegend: { type: Boolean, required: false, default: true },
-  legendPosition: { type: String, required: false, default: "bottom" },
+  legendPosition: { type: null, required: false, default: "bottom" },
   showTooltip: { type: Boolean, required: false, default: true },
   animated: { type: Boolean, required: false, default: true },
   animationDuration: { type: Number, required: false, default: 600 },
@@ -361,10 +361,11 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false }
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, 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

@@ -182,7 +182,7 @@ defineOptions({
   name: "OrigamChartPolar"
 });
 const props = defineProps({
-  type: { type: String, required: false, default: "pie" },
+  type: { type: null, required: false, default: "pie" },
   donutHoleSize: { type: Number, required: false, default: 0.6 },
   showTooltip: { type: Boolean, required: false, default: true },
   xAxisFormat: { type: Function, required: false, default: void 0 },
@@ -193,7 +193,7 @@ const props = defineProps({
   title: { type: String, required: false, default: void 0 },
   subtitle: { type: String, required: false, default: void 0 },
   showLegend: { type: Boolean, required: false, default: true },
-  legendPosition: { type: String, required: false, default: "bottom" },
+  legendPosition: { type: null, required: false, default: "bottom" },
   animated: { type: Boolean, required: false, default: true },
   animationDuration: { type: Number, required: false, default: 600 },
   colorScheme: { type: Array, required: false, default: () => [] },
@@ -228,10 +228,11 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false }
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, 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

@@ -187,7 +187,7 @@ const props = defineProps({
   title: { type: String, required: false, default: void 0 },
   subtitle: { type: String, required: false, default: void 0 },
   showLegend: { type: Boolean, required: false, default: true },
-  legendPosition: { type: String, required: false, default: "bottom" },
+  legendPosition: { type: null, required: false, default: "bottom" },
   showTooltip: { type: Boolean, required: false, default: true },
   animated: { type: Boolean, required: false, default: true },
   animationDuration: { type: Number, required: false, default: 600 },
@@ -223,10 +223,11 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false }
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, 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

@@ -183,7 +183,7 @@ const props = defineProps({
   title: { type: String, required: false, default: void 0 },
   subtitle: { type: String, required: false, default: void 0 },
   showLegend: { type: Boolean, required: false, default: true },
-  legendPosition: { type: String, required: false, default: "bottom" },
+  legendPosition: { type: null, required: false, default: "bottom" },
   showTooltip: { type: Boolean, required: false, default: true },
   animated: { type: Boolean, required: false, default: true },
   animationDuration: { type: Number, required: false, default: 600 },
@@ -219,10 +219,11 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false }
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, 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

@@ -161,7 +161,7 @@ const props = defineProps({
   title: { type: String, required: false, default: void 0 },
   subtitle: { type: String, required: false, default: void 0 },
   showLegend: { type: Boolean, required: false, default: true },
-  legendPosition: { type: String, required: false, default: "bottom" },
+  legendPosition: { type: null, required: false, default: "bottom" },
   showTooltip: { type: Boolean, required: false },
   animated: { type: Boolean, required: false, default: true },
   animationDuration: { type: Number, required: false, default: 600 },
@@ -197,10 +197,11 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false }
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, 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

@@ -197,7 +197,7 @@ const props = defineProps({
   title: { type: String, required: false, default: void 0 },
   subtitle: { type: String, required: false, default: void 0 },
   showLegend: { type: Boolean, required: false, default: false },
-  legendPosition: { type: String, required: false, default: "bottom" },
+  legendPosition: { type: null, required: false, default: "bottom" },
   showTooltip: { type: Boolean, required: false, default: true },
   animated: { type: Boolean, required: false, default: true },
   animationDuration: { type: Number, required: false, default: 600 },
@@ -233,10 +233,11 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false }
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, 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 },
@@ -194,10 +194,11 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false }
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, 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

@@ -197,7 +197,7 @@ defineOptions({
   name: "OrigamChartStreamgraph"
 });
 const props = defineProps({
-  offsetMode: { type: String, required: false, default: "wiggle" },
+  offsetMode: { type: null, required: false, default: "wiggle" },
   smoothing: { type: String, required: false, default: "curve" },
   showAxis: { type: Boolean, required: false, default: true },
   showGrid: { type: Boolean, required: false, default: false },
@@ -208,7 +208,7 @@ const props = defineProps({
   title: { type: String, required: false, default: void 0 },
   subtitle: { type: String, required: false, default: void 0 },
   showLegend: { type: Boolean, required: false, default: true },
-  legendPosition: { type: String, required: false, default: "bottom" },
+  legendPosition: { type: null, required: false, default: "bottom" },
   showTooltip: { type: Boolean, required: false, default: true },
   animated: { type: Boolean, required: false, default: true },
   animationDuration: { type: Number, required: false, default: 600 },
@@ -244,10 +244,11 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false }
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, 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

@@ -190,7 +190,7 @@ const props = defineProps({
   title: { type: String, required: false, default: void 0 },
   subtitle: { type: String, required: false, default: void 0 },
   showLegend: { type: Boolean, required: false, default: true },
-  legendPosition: { type: String, required: false, default: "bottom" },
+  legendPosition: { type: null, required: false, default: "bottom" },
   showTooltip: { type: Boolean, required: false, default: true },
   animated: { type: Boolean, required: false, default: true },
   animationDuration: { type: Number, required: false, default: 600 },
@@ -226,10 +226,11 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false }
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, 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

@@ -178,7 +178,7 @@ defineOptions({
   name: "OrigamChartTreemap"
 });
 const props = defineProps({
-  algorithm: { type: String, required: false, default: "squarified" },
+  algorithm: { type: null, required: false, default: "squarified" },
   showLabel: { type: Boolean, required: false, default: true },
   yAxisFormat: { type: Function, required: false, default: void 0 },
   series: { type: Array, required: true },
@@ -186,7 +186,7 @@ const props = defineProps({
   title: { type: String, required: false, default: void 0 },
   subtitle: { type: String, required: false, default: void 0 },
   showLegend: { type: Boolean, required: false, default: true },
-  legendPosition: { type: String, required: false, default: "bottom" },
+  legendPosition: { type: null, required: false, default: "bottom" },
   showTooltip: { type: Boolean, required: false, default: true },
   animated: { type: Boolean, required: false, default: true },
   animationDuration: { type: Number, required: false, default: 600 },
@@ -222,10 +222,11 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false }
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, 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

@@ -266,7 +266,7 @@ const props = defineProps({
   title: { type: String, required: false, default: void 0 },
   subtitle: { type: String, required: false, default: void 0 },
   showLegend: { type: Boolean, required: false, default: false },
-  legendPosition: { type: String, required: false, default: "bottom" },
+  legendPosition: { type: null, required: false, default: "bottom" },
   showTooltip: { type: Boolean, required: false, default: true },
   animated: { type: Boolean, required: false, default: true },
   animationDuration: { type: Number, required: false, default: 600 },
@@ -302,10 +302,11 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false }
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, 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

@@ -162,7 +162,7 @@ const props = defineProps({
   title: { type: String, required: false, default: void 0 },
   subtitle: { type: String, required: false, default: void 0 },
   showLegend: { type: Boolean, required: false, default: false },
-  legendPosition: { type: String, required: false, default: "bottom" },
+  legendPosition: { type: null, required: false, default: "bottom" },
   showTooltip: { type: Boolean, required: false, default: true },
   animated: { type: Boolean, required: false, default: true },
   animationDuration: { type: Number, required: false, default: 600 },
@@ -198,9 +198,10 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  fontSize: { type: String, required: false }
+  fontSize: { type: null, 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/Checkbox/OrigamCheckbox.vue

@@ -139,11 +139,11 @@ const _props = defineProps({
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
   size: { type: null, required: false },
-  fontFamily: { type: String, required: false },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false },
-  lineHeight: { type: String, required: false },
-  letterSpacing: { type: String, required: false },
+  fontFamily: { type: null, required: false },
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, required: false },
+  lineHeight: { type: null, required: false },
+  letterSpacing: { type: null, required: false },
   indeterminate: { type: Boolean, required: false },
   indeterminateIcon: { type: null, required: false },
   trueValue: { type: null, required: false },

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

@@ -6,7 +6,7 @@
 			:class="chipClasses"
 			:disabled="disabled"
 			:draggable="draggable"
-			:href="link.href"
+			:href="link.href.value"
 			:style="chipStyles"
 			:tabindex="isClickable ? 0 : undefined"
 			@click="handleClick"
@@ -214,14 +214,15 @@ const _props = defineProps({
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   hover: { type: [Boolean, Object], required: false },
-  fontFamily: { type: String, required: false },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false },
-  lineHeight: { type: String, required: false },
-  letterSpacing: { type: String, required: false }
+  fontFamily: { type: null, required: false },
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, required: false },
+  lineHeight: { type: null, required: false },
+  letterSpacing: { type: null, required: false }
 });
 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();
@@ -255,7 +256,7 @@ const isLink = computed(() => {
   return props.link && link.isLink.value;
 });
 const isClickable = computed(() => {
-  return !props.disabled && props.link && (!!group || props.link || link.isClickable.value);
+  return !props.disabled && (!!group || props.link || link.isClickable.value);
 });
 const rippleProps = computed(() => {
   return [isClickable.value && props.ripple, null];
@@ -315,6 +316,12 @@ const chipStyles = computed(() => {
 const chipClasses = computed(() => {
   return [
     "origam-chip",
+    // `OrigamChipGroup` declares `selectedClass: 'origam-chip--selected'`
+    // and the chip exposed it to the default slot only, so a chip that
+    // WAS selected carried no class on its root and stayed visually
+    // indistinguishable. Same position as `OrigamBtn`, `OrigamItem`,
+    // `OrigamTab` and `OrigamWindowItem`.
+    group?.selectedClass.value,
     {
       "origam-chip--disabled": props.disabled,
       "origam-chip--label": props.label,
@@ -430,6 +437,11 @@ defineExpose({
 			border-radius: var(--origam-chip---border-radius-label, 4px);
 		}
 
+		&--selected {
+			background-color: var(--origam-chip--selected---background-color);
+			color: var(--origam-chip--selected---color);
+		}
+
 		&--size-x-small {
 			font-size: var(--origam-chip---font-size, var(--origam-chip---font-size-xs, 0.625rem));
 			line-height: 1;

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

@@ -16,9 +16,10 @@
 
 <script lang="ts" setup>
 import { OrigamDefaultsProvider, OrigamSlideGroup } from "../../components";
-import { useBorder, useGroup, useMargin, usePadding, useProps, useRounded, useStyle } from "../../composables";
+import { useBorder, useGroup, useMargin, usePadding, usePassedProps, useProps, useRounded, useStyle } from "../../composables";
 import { ORIGAM_CHIP_GROUP_KEY } from "../../consts";
 import { DIRECTION, MDI_ICONS } from "../../enums";
+import { omitUndefined } from "../../utils";
 import { computed, ref, StyleValue } from "vue";
 const props = defineProps({
   column: { type: Boolean, required: false },
@@ -78,6 +79,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);
@@ -85,13 +87,14 @@ const { marginClasses, marginStyles } = useMargin(props);
 const { paddingClasses, paddingStyles } = usePadding(props);
 const { borderClasses, borderStyles } = useBorder(props);
 const { roundedClasses, roundedStyles } = useRounded(props);
+const wasPropPassed = usePassedProps(props);
 const slotDefaults = computed(() => ({
-  "origam-chip": {
-    color: props.color,
-    bgColor: props.bgColor,
-    active: props.active,
-    hover: props.hover
-  }
+  "origam-chip": omitUndefined({
+    color: wasPropPassed("color") ? props.color : void 0,
+    bgColor: wasPropPassed("bgColor") ? props.bgColor : void 0,
+    active: wasPropPassed("active") ? props.active : void 0,
+    hover: wasPropPassed("hover") ? props.hover : void 0
+  })
 }));
 const slideGroupProps = computed(() => {
   return origamSlideGroupRef.value?.filterProps(props);

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;