origam 2.5.0 → 2.6.1

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

@@ -2,6 +2,7 @@
 	<component
 			:is="link.tag"
 			v-ripple="isClickable && ripple"
+			v-contrast
 			:class="cardClasses"
 			:href="link.href"
 			:style="cardStyles"
@@ -120,6 +121,7 @@
 						<slot name="text">
 							<origam-card-text
 									key="text"
+									:density="density"
 									:text="text"
 									class="origam-card__text"
 							/>
@@ -139,7 +141,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamCardHeader, OrigamCardText, OrigamImg, OrigamProgress, OrigamSkeleton } from "../../components";
 import {
   useActive,
@@ -155,7 +157,7 @@ import {
   useStateEffect,
   useStyle
 } from "../../composables";
-import { vRipple } from "../../directives";
+import { vContrast, vRipple } from "../../directives";
 import { DENSITY, PROGRESS_TYPE } from "../../enums";
 import { computed, StyleValue, toRef, useAttrs, useSlots } from "vue";
 const props = defineProps({
@@ -268,7 +270,7 @@ const isClickable = computed(() => {
   return !props.disabled && props.link && (props.link || link.isClickable.value);
 });
 const handleClick = (event) => {
-  onActive(event);
+  onActive();
   if (isClickable.value && link.navigate) {
     link.navigate(event);
   }
@@ -373,6 +375,8 @@ defineExpose({
 		cursor: var(--origam-card---cursor);
 
 		background-color: var(--origam-card---background);
+		backdrop-filter: var(--origam-card---backdrop-filter, none);
+		-webkit-backdrop-filter: var(--origam-card---backdrop-filter, none);
 		box-shadow: var(--origam-card---box-shadow);
 		color: var(--origam-card---color);
 
@@ -503,6 +507,19 @@ defineExpose({
 			}
 		}
 
+		&--loading &__loader:has(.origam-card__progress--circular) {
+			position: absolute;
+			inset: 0;
+			z-index: var(--origam-card__loader---z-index, 3);
+			min-height: 0;
+			border-radius: inherit;
+			background-color: var(--origam-card__loader---overlay-background, color-mix(in srgb, var(--origam-card---background) 62%, transparent));
+
+			:deep(.origam-progress--circular) {
+				margin: 0;
+			}
+		}
+
 		&--rounded-shaped {
 			border-start-start-radius: var(--origam-card---border-radius-rounded, 16px);
 			border-start-end-radius: 0;
@@ -533,6 +550,10 @@ defineExpose({
 			--origam-card---density: -8px;
 		}
 
+		&--density-comfortable {
+			--origam-card---density: 8px;
+		}
+
 		&:hover,
 		&:focus-visible,
 		&:focus {

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

@@ -41,6 +41,7 @@
 						v-if="hasTitle"
 						key="title"
 						class="origam-card-header__title"
+						:style="titleTypographyStyles"
 				>
 					<slot
 							name="title"
@@ -53,6 +54,7 @@
 						v-if="hasSubtitle"
 						key="subtitle"
 						class="origam-card-header__subtitle"
+						:style="subtitleTypographyStyles"
 				>
 					<slot
 							name="subtitle"
@@ -89,13 +91,14 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamAvatar, OrigamIcon } from "../../components";
 import {
   useAdjacent,
   useDensity,
   useProps,
-  useStyle
+  useStyle,
+  useTypography
 } from "../../composables";
 import { computed, StyleValue, toRef, useSlots } from "vue";
 const props = defineProps({
@@ -137,12 +140,19 @@ const props = defineProps({
   appendAvatar: { type: String, required: false },
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
-  prependIcon: { type: null, required: false }
+  prependIcon: { 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 }
 });
 defineEmits(["click:append", "click:prepend"]);
 const { filterProps } = useProps(props);
 const slots = useSlots();
 const { densityClasses } = useDensity(props);
+const { typographyStyles: titleTypographyStyles } = useTypography(props, "card-header__title");
+const { typographyStyles: subtitleTypographyStyles } = useTypography(props, "card-header__subtitle");
 const {
   onClickPrepend: handleClickPrepend,
   onClickAppend: handleClickAppend,
@@ -266,6 +276,10 @@ defineExpose({
 			--origam-card-header---density: -8px;
 		}
 
+		&--density-comfortable {
+			--origam-card-header---density: 8px;
+		}
+
 		&__underlay {
 			position: var(--origam-card-header__underlay---position);
 		}

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

@@ -10,8 +10,8 @@
 	</component>
 </template>
 
-<script setup>
-import { useProps, useStyle } from "../../composables";
+<script lang="ts" setup>
+import { useDensity, useProps, useStyle, useTypography } from "../../composables";
 import { computed, StyleValue } from "vue";
 const props = defineProps({
   text: { type: [String, Number], required: false },
@@ -46,17 +46,27 @@ const props = defineProps({
   marginBottom: { type: [Boolean, Number, String], required: false },
   marginRight: { type: [Boolean, Number, String], required: false },
   marginBlock: { type: [Boolean, Number, String], required: false },
-  marginInline: { type: [Boolean, Number, String], required: false }
+  marginInline: { type: [Boolean, Number, String], required: false },
+  density: { 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 }
 });
 const { filterProps } = useProps(props);
+const { densityClasses } = useDensity(props);
+const { typographyStyles } = useTypography(props, "card-text");
 const cardTextStyles = computed(() => {
   return [
+    typographyStyles.value,
     props.style
   ];
 });
 const cardTextClasses = computed(() => {
   return [
     "origam-card-text",
+    densityClasses.value,
     props.class
   ];
 });
@@ -79,10 +89,10 @@ defineExpose({
 		letter-spacing: var(--origam-card-text---letter-spacing);
 		text-transform: var(--origam-card-text---text-transform);
 
-		padding-block-start: var(--origam-card-text---padding-block-start);
-		padding-block-end: var(--origam-card-text---padding-block-end);
-		padding-inline-start: var(--origam-card-text---padding-inline-start);
-		padding-inline-end: var(--origam-card-text---padding-inline-end);
+		padding-block-start: calc(var(--origam-card-text---padding-block-start) + var(--origam-card-text---density, 0px));
+		padding-block-end: calc(var(--origam-card-text---padding-block-end) + var(--origam-card-text---density, 0px));
+		padding-inline-start: calc(var(--origam-card-text---padding-inline-start) + var(--origam-card-text---density, 0px));
+		padding-inline-end: calc(var(--origam-card-text---padding-inline-end) + var(--origam-card-text---density, 0px));
 
 		margin-block-start: var(--origam-card-text---margin-block-start);
 		margin-block-end: var(--origam-card-text---margin-block-end);
@@ -93,6 +103,18 @@ defineExpose({
 		border-style: var(--origam-card-text---border-style);
 		border-width: var(--origam-card-text---border-width);
 		border-radius: var(--origam-card-text---border-radius);
+
+		&--density-default {
+			--origam-card-text---density: 0px;
+		}
+
+		&--density-compact {
+			--origam-card-text---density: -8px;
+		}
+
+		&--density-comfortable {
+			--origam-card-text---density: 8px;
+		}
 	}
 </style>
 

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

@@ -35,7 +35,7 @@
 									name="item"
 									v-bind="{props: controlProps(item, index, group), item, index}"
 							>
-								<origam-btn v-bind="controlProps(item, index, group)"/>
+								<origam-btn v-bind="(controlProps(item, index, group) as any)"/>
 							</slot>
 						</slot>
 					</template>
@@ -86,16 +86,17 @@
 	</origam-window>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamBtn, OrigamProgressLinear, OrigamWindow } from "../../components";
 import {
+  useDimension,
   useLocale,
   useProps,
   useStyle,
   useVModel
 } from "../../composables";
 import { DENSITY, MDI_ICONS, SIZES } from "../../enums";
-import { convertToUnit } from "../../utils";
+import { intentBgExpr, isCssColor, isIntent } from "../../utils/Commons/color.util";
 import { computed, onBeforeUnmount, onMounted, ref, StyleValue, useSlots, watch } from "vue";
 const props = defineProps({
   cycle: { type: Boolean, required: false },
@@ -149,6 +150,10 @@ const props = defineProps({
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  hover: { type: [Boolean, Object], required: false },
+  active: { type: [Boolean, Object], required: false },
+  activeClass: { type: String, required: false },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   height: { type: [Number, String], required: false, default: 500 },
   maxHeight: { type: [Number, String], required: false },
@@ -235,21 +240,28 @@ const controlProps = (item, index, group) => {
     {
       id: `carousel-item-${item.id}`,
       "aria-label": t("origam.carousel.ariaLabel.delimiter", index + 1, group.items.value.length),
-      active: group.isSelected(item.id),
+      // The SELECTED dot is active. When the consumer passes an
+      // `active` STATE object, the selected dot wears that surface
+      // (forced); otherwise it just reads as active. Hover applies
+      // to any dot on hover.
+      active: group.isSelected(item.id) ? props.active && typeof props.active === "object" ? { ...props.active, enabled: true } : true : false,
+      hover: props.hover,
       class: [
         "origam-carousel__controls-item"
       ],
       onClick: () => group.select(item.id, true),
       icon: props.delimiterIcon,
+      bgColor: props.bgColor,
       size: SIZES.SMALL,
       density: DENSITY.COMPACT
     }
   );
 };
 const slots = useSlots();
+const { dimensionStyles } = useDimension(props);
 const carouselStyles = computed(() => {
   return [
-    { height: convertToUnit(props.height) },
+    dimensionStyles.value,
     props.style
   ];
 });
@@ -263,11 +275,18 @@ const carouselClasses = computed(() => {
     props.class
   ];
 });
+const dotCenterColor = computed(() => {
+  const bg = props.bgColor;
+  if (bg && isIntent(bg)) return `color-mix(in srgb, ${intentBgExpr(bg, "default")}, #ffffff 55%)`;
+  if (bg && typeof bg === "string" && isCssColor(bg)) return `color-mix(in srgb, ${bg}, #ffffff 55%)`;
+  return void 0;
+});
 const carouselControlsStyles = computed(() => {
   return [
     {
       left: props.verticalDelimiters === "left" && props.verticalDelimiters ? 0 : "auto",
-      right: props.verticalDelimiters === "right" ? 0 : "auto"
+      right: props.verticalDelimiters === "right" ? 0 : "auto",
+      "--origam-carousel__controls-item---center-color": dotCenterColor.value
     },
     props.style
   ];
@@ -311,12 +330,13 @@ defineExpose({
 		&__controls-item {
 			margin-inline: var(--origam-carousel__controls-item---margin-inline, 8px);
 
-			.origam-icon {
+			:deep(.origam-icon) {
 				opacity: var(--origam-carousel__controls-item---opacity, 0.5);
+				color: var(--origam-carousel__controls-item---center-color, currentColor);
 			}
 
 			&--active {
-				.origam-icon {
+				:deep(.origam-icon) {
 					opacity: var(--origam-carousel__controls-item---opacity-active, 1);
 					vertical-align: middle;
 				}
@@ -325,7 +345,7 @@ defineExpose({
 			&:hover {
 				background: none;
 
-				.origam-icon {
+				:deep(.origam-icon) {
 					opacity: var(--origam-carousel__controls-item---opacity-hover, 0.8);
 				}
 			}

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

@@ -9,7 +9,7 @@
 			<slot name="default">
 				<origam-img
 						ref="origamImgRef"
-						v-bind="{...attrs , ...imgProps}"
+						v-bind="({...attrs , ...imgProps} as any)"
 				>
 					<template
 							v-if="slots.content"
@@ -37,7 +37,7 @@
 	</origam-window-item>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamImg, OrigamWindowItem } from "../../components";
 import {
   useProps,

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

@@ -399,7 +399,7 @@
 	</origam-chart-sparkline>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, ref } from "vue";
 import OrigamChartCartesian from "./OrigamChartCartesian.vue";
 import OrigamChartGauge from "./OrigamChartGauge.vue";
@@ -460,6 +460,8 @@ const props = defineProps({
   plotBands: { type: Array, required: false },
   plotLines: { type: Array, required: false },
   annotations: { type: Array, required: false },
+  drilldown: { type: Object, required: false },
+  secondaryYAxis: { type: Object, required: false },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },

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

@@ -83,7 +83,7 @@
 	</g>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 defineOptions({
   name: "OrigamChartAxis"
 });

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

@@ -2,7 +2,7 @@
 	<div
 			class="origam-chart-box-plot"
 			:class="rootClasses"
-			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles]"
+			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles, headerTypographyStyles]"
 			role="figure"
 			:aria-label="ariaLabel"
 			data-cy="origam-chart-box-plot"
@@ -249,7 +249,7 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   computed,
   ref
@@ -257,6 +257,7 @@ import {
 import OrigamChartLegend from "./OrigamChartLegend.vue";
 import OrigamChartTooltip from "./OrigamChartTooltip.vue";
 import {
+  useChartHeaderTypography,
   useBackgroundColor,
   useDimension,
   useElevation,
@@ -319,7 +320,9 @@ const props = defineProps({
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
-  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false }
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
 const { dimensionStyles } = useDimension(props);
@@ -328,6 +331,7 @@ const { elevationClasses, elevationStyles } = useElevation(props);
 const { marginClasses, marginStyles } = useMargin(props);
 const { paddingClasses, paddingStyles } = usePadding(props);
 const { roundedClasses, roundedStyles } = useRounded(props);
+const { headerTypographyStyles } = useChartHeaderTypography(props);
 const SVG_WIDTH = 600;
 const SVG_HEIGHT = 400;
 const PADDING = { top: 20, right: 20, bottom: 40, left: 52 };

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

@@ -2,7 +2,7 @@
 	<div
 			class="origam-chart-bullet"
 			:class="rootClasses"
-			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles]"
+			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles, headerTypographyStyles]"
 			role="figure"
 			:aria-label="ariaLabel"
 			data-cy="origam-chart-bullet"
@@ -213,7 +213,7 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   computed,
   ref
@@ -221,6 +221,7 @@ import {
 import OrigamChartLegend from "./OrigamChartLegend.vue";
 import OrigamChartTooltip from "./OrigamChartTooltip.vue";
 import {
+  useChartHeaderTypography,
   useBackgroundColor,
   useDimension,
   useElevation,
@@ -281,7 +282,9 @@ const props = defineProps({
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
-  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false }
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
 const { dimensionStyles } = useDimension(props);
@@ -290,6 +293,7 @@ const { elevationClasses, elevationStyles } = useElevation(props);
 const { marginStyles } = useMargin(props);
 const { paddingStyles } = usePadding(props);
 const { roundedClasses, roundedStyles } = useRounded(props);
+const { headerTypographyStyles } = useChartHeaderTypography(props);
 const SVG_WIDTH = 600;
 const SVG_HEIGHT = 400;
 const AXIS_TICK_COUNT = 5;

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

@@ -2,7 +2,7 @@
 	<div
 			class="origam-chart-candlestick"
 			:class="rootClasses"
-			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles]"
+			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles, headerTypographyStyles]"
 			role="figure"
 			:aria-label="ariaLabel"
 			data-cy="origam-chart-candlestick"
@@ -188,7 +188,7 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   computed,
   ref
@@ -196,6 +196,7 @@ import {
 import OrigamChartLegend from "./OrigamChartLegend.vue";
 import OrigamChartTooltip from "./OrigamChartTooltip.vue";
 import {
+  useChartHeaderTypography,
   useBackgroundColor,
   useDimension,
   useElevation,
@@ -257,7 +258,9 @@ const props = defineProps({
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
-  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false }
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
 const { dimensionStyles } = useDimension(props);
@@ -266,6 +269,7 @@ const { elevationClasses, elevationStyles } = useElevation(props);
 const { marginClasses, marginStyles } = useMargin(props);
 const { paddingClasses, paddingStyles } = usePadding(props);
 const { roundedClasses, roundedStyles } = useRounded(props);
+const { headerTypographyStyles } = useChartHeaderTypography(props);
 const SVG_WIDTH = 600;
 const SVG_HEIGHT = 400;
 const PADDING = { top: 20, right: 20, bottom: 36, left: 56 };

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

@@ -2,7 +2,7 @@
 	<div
 			class="origam-chart-cartesian"
 			:class="rootClasses"
-			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles]"
+			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles, headerTypographyStyles]"
 			role="figure"
 			:aria-label="ariaLabel"
 			data-cy="origam-chart-cartesian"
@@ -43,13 +43,15 @@
 				aria-label="Drilldown navigation"
 				data-cy="origam-chart-cartesian-breadcrumb"
 		>
-			<button
+			<origam-btn
 					class="origam-chart-cartesian__breadcrumb-back"
-					type="button"
+					variant="outlined"
+					:text="drilldownBackLabel"
 					:aria-label="drilldownBackLabel"
+					:style="{ '--origam-btn---min-height': '0', '--origam-btn---min-width': '0' }"
 					data-cy="origam-chart-cartesian-breadcrumb-back"
 					@click="onDrillUp"
-			>{{ drilldownBackLabel }}</button>
+			/>
 			<ol class="origam-chart-cartesian__breadcrumb-trail">
 				<li
 						v-for="item in breadcrumbItems"
@@ -481,13 +483,14 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   computed,
   ref,
   watch
 } from "vue";
 import {
+  useChartHeaderTypography,
   useBackgroundColor,
   useChart,
   useChartZoom,
@@ -503,6 +506,7 @@ import {
   computePlotLineGeometry
 } from "../../composables/Chart/chart.composable";
 import { CHART_RANGE_SELECTOR_DEFAULT_BUTTONS } from "../../consts/Chart/chart.const";
+import { OrigamBtn } from "../Btn";
 import OrigamChartAxis from "./OrigamChartAxis.vue";
 import OrigamChartLegend from "./OrigamChartLegend.vue";
 import OrigamChartRangeSelector from "./OrigamChartRangeSelector.vue";
@@ -568,7 +572,9 @@ const props = defineProps({
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
-  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false }
 });
 const emit = defineEmits(["drill", "drill-up", "zoom", "reset-zoom", "point-click", "legend-click", "series-toggle"]);
 const drillStack = ref([]);
@@ -626,6 +632,7 @@ const { elevationClasses, elevationStyles } = useElevation(props);
 const { marginClasses, marginStyles } = useMargin(props);
 const { paddingClasses, paddingStyles } = usePadding(props);
 const { roundedClasses, roundedStyles } = useRounded(props);
+const { headerTypographyStyles } = useChartHeaderTypography(props);
 const SVG_WIDTH = 600;
 const SVG_HEIGHT = 360;
 const PADDING_DEFAULT = { top: 24, right: 24, bottom: 36, left: 48 };
@@ -642,7 +649,6 @@ const zoom = useChartZoom({ dataLength: () => activeCategories.value.length });
 const {
   zoomStart,
   zoomEnd,
-  zoomEndRaw,
   isDragging,
   dragStartPx,
   dragEndPx,
@@ -650,9 +656,7 @@ const {
   zoomTo,
   zoomReset: zoomResetState,
   zoomBy,
-  panBy,
   pxToCategoryIndex,
-  categoryIndexToPx,
   WHEEL_ZOOM_STEP
 } = zoom;
 const visibleCategories = computed(() => {
@@ -1013,7 +1017,7 @@ const svgDesc = computed(() => {
   if (!seriesCount) return "No data";
   const range = yRange.value;
   const points = slotCount.value;
-  return `${props.type} chart with ${seriesCount} ${seriesCount === 1 ? "series" : "series"} and ${points} ${points === 1 ? "point" : "points"}, values ranging from ${range.min} to ${range.max}.`;
+  return `${props.type} chart with ${seriesCount} series and ${points} ${points === 1 ? "point" : "points"}, values ranging from ${range.min} to ${range.max}.`;
 });
 const pointAriaLabel = (path) => {
   const dataIdx = path.dataIndex ?? 0;

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

@@ -2,7 +2,7 @@
 	<div
 			class="origam-chart-gauge"
 			:class="rootClasses"
-			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles]"
+			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles, headerTypographyStyles]"
 			role="figure"
 			:aria-label="ariaLabel"
 			data-cy="origam-chart-gauge"
@@ -129,13 +129,14 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   computed
 } from "vue";
 import { useChartGauge } from "../../composables/Chart/chart-gauge.composable";
 import {
   useBackgroundColor,
+  useChartHeaderTypography,
   useDimension,
   useElevation,
   useMargin,
@@ -194,7 +195,9 @@ const props = defineProps({
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
-  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false }
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
 void emit;
@@ -204,6 +207,7 @@ const { elevationClasses, elevationStyles } = useElevation(props);
 const { marginClasses, marginStyles } = useMargin(props);
 const { paddingClasses, paddingStyles } = usePadding(props);
 const { roundedClasses, roundedStyles } = useRounded(props);
+const { headerTypographyStyles } = useChartHeaderTypography(props);
 const SVG_WIDTH = 360;
 const SVG_HEIGHT = 280;
 const PADDING_GAUGE = { top: 28, right: 28, bottom: 28, left: 28 };