origam 2.3.0 → 2.6.1

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

@@ -0,0 +1,742 @@
+<template>
+	<div
+			class="origam-chart-polar"
+			:class="rootClasses"
+			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles, headerTypographyStyles]"
+			role="figure"
+			:aria-label="ariaLabel"
+			data-cy="origam-chart-polar"
+	>
+		<div
+				v-if="hasTitleBlock"
+				class="origam-chart-polar__header"
+				data-cy="origam-chart-polar-header"
+		>
+			<slot name="title">
+				<div
+						v-if="title"
+						class="origam-chart-polar__title"
+				>
+					{{ title }}
+				</div>
+				<div
+						v-if="subtitle"
+						class="origam-chart-polar__subtitle"
+				>
+					{{ subtitle }}
+				</div>
+			</slot>
+		</div>
+
+		<nav
+				v-if="hasDrilldown && isDrilled"
+				class="origam-chart-polar__breadcrumb"
+				aria-label="Drilldown navigation"
+				data-cy="origam-chart-polar-breadcrumb"
+		>
+			<origam-btn
+					class="origam-chart-polar__breadcrumb-back"
+					variant="outlined"
+					:text="drilldownBackLabel"
+					:aria-label="drilldownBackLabel"
+					:style="{ '--origam-btn---min-height': '0', '--origam-btn---min-width': '0' }"
+					data-cy="origam-chart-polar-breadcrumb-back"
+					@click="onDrillUp"
+			/>
+			<ol class="origam-chart-polar__breadcrumb-trail">
+				<li
+						v-for="item in breadcrumbItems"
+						:key="item.depth"
+						class="origam-chart-polar__breadcrumb-item"
+						:class="{ 'origam-chart-polar__breadcrumb-item--active': item.depth === drillStack.length - 1 }"
+				>
+					<button
+							v-if="item.depth < drillStack.length - 1"
+							class="origam-chart-polar__breadcrumb-link"
+							type="button"
+							@click="onBreadcrumbClick(item.depth)"
+					>{{ item.name }}</button>
+					<span
+							v-else
+							class="origam-chart-polar__breadcrumb-current"
+							aria-current="page"
+					>{{ item.name }}</span>
+				</li>
+			</ol>
+		</nav>
+
+		<div
+				class="origam-chart-polar__body"
+				:class="bodyClasses"
+				data-cy="origam-chart-polar-body"
+		>
+			<svg
+					ref="svgRef"
+					class="origam-chart-polar__svg origam-chart__svg"
+					:class="svgClasses"
+					:viewBox="viewBox"
+					role="img"
+					:aria-label="svgAriaLabel"
+					preserveAspectRatio="xMidYMid meet"
+					data-cy="origam-chart-polar-svg"
+					@mousemove="onSvgMouseMove"
+					@mouseleave="onSvgMouseLeave"
+			>
+				<title>{{ svgTitle }}</title>
+				<desc>{{ svgDesc }}</desc>
+
+				<g
+						class="origam-chart__series"
+						data-cy="origam-chart-polar-series"
+				>
+					<path
+							v-for="(path, i) in paths"
+							:key="`slice-${ i }`"
+							class="origam-chart__slice"
+							:d="path.d"
+							:fill="path.color"
+							:data-cy="`origam-chart-slice-${ path.dataIndex }`"
+							tabindex="0"
+							role="button"
+							:aria-label="sliceAriaLabel(path)"
+							@click="onPointActivate(path, $event)"
+							@keydown.enter.prevent="onPointActivate(path, $event)"
+							@keydown.space.prevent="onPointActivate(path, $event)"
+							@mouseenter="onPointEnter(path)"
+							@mouseleave="onPointLeaveEvent"
+					/>
+				</g>
+			</svg>
+
+			<origam-chart-tooltip
+					v-if="showTooltip"
+					:point="hoveredPoint"
+					:series="hoveredSeries"
+					:category="hoveredCategory"
+					:x="mousePos.x"
+					:y="mousePos.y"
+					:x-axis-format="xAxisFormat"
+					:y-axis-format="yAxisFormat"
+			>
+				<template
+						v-if="$slots.tooltip"
+						#default="bindings"
+				>
+					<slot
+							name="tooltip"
+							v-bind="bindings"
+					/>
+				</template>
+			</origam-chart-tooltip>
+
+			<div
+					v-if="showEmpty"
+					class="origam-chart-polar__empty origam-chart__empty"
+					data-cy="origam-chart-polar-empty"
+			>
+				<slot name="empty">
+					<span>No data to display</span>
+				</slot>
+			</div>
+		</div>
+
+		<origam-chart-legend
+				v-if="showLegend"
+				:items="legend"
+				:position="legendPosition"
+				@legend-click="onLegendClick"
+				@series-toggle="onSeriesToggle"
+		>
+			<template
+					v-if="$slots['legend-item']"
+					#legend-item="bindings"
+			>
+				<slot
+						name="legend-item"
+						v-bind="bindings"
+				/>
+			</template>
+		</origam-chart-legend>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import {
+  computed,
+  ref
+} from "vue";
+import {
+  useChartHeaderTypography,
+  useBackgroundColor,
+  useChart,
+  useDimension,
+  useElevation,
+  useMargin,
+  usePadding,
+  useRounded
+} from "../../composables";
+import { OrigamBtn } from "../Btn";
+import OrigamChartLegend from "./OrigamChartLegend.vue";
+import OrigamChartTooltip from "./OrigamChartTooltip.vue";
+defineOptions({
+  name: "OrigamChartPolar"
+});
+const props = defineProps({
+  type: { type: String, 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 },
+  yAxisFormat: { type: Function, required: false, default: void 0 },
+  drilldown: { type: Object, required: false, default: void 0 },
+  series: { type: Array, required: true },
+  categories: { type: Array, required: false, default: () => [] },
+  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" },
+  animated: { type: Boolean, required: false, default: true },
+  animationDuration: { type: Number, required: false, default: 600 },
+  colorScheme: { type: Array, required: false, default: () => [] },
+  aspectRatio: { type: String, required: false, default: void 0 },
+  id: { type: String, required: false },
+  class: { type: [String, Array, Object], required: false },
+  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
+  height: { type: [Number, String], required: false, default: 300 },
+  maxHeight: { type: [Number, String], required: false },
+  maxWidth: { type: [Number, String], required: false },
+  minHeight: { type: [Number, String], required: false },
+  minWidth: { type: [Number, String], required: false },
+  width: { type: [Number, String], required: false },
+  margin: { type: [Boolean, Number, String], required: false },
+  marginTop: { type: [Boolean, Number, String], required: false },
+  marginLeft: { type: [Boolean, Number, String], required: false },
+  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 },
+  padding: { type: [Boolean, Number, String], required: false },
+  paddingTop: { type: [Boolean, Number, String], required: false },
+  paddingLeft: { type: [Boolean, Number, String], required: false },
+  paddingBottom: { type: [Boolean, Number, String], required: false },
+  paddingRight: { type: [Boolean, Number, String], required: false },
+  paddingBlock: { type: [Boolean, Number, String], required: false },
+  paddingInline: { type: [Boolean, Number, String], required: false },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
+  roundedTopRight: { type: [Boolean, Number, String], required: false },
+  roundedTopLeft: { type: [Boolean, Number, String], required: false },
+  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 },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false }
+});
+const emit = defineEmits(["drill", "drill-up", "point-click", "legend-click", "series-toggle"]);
+const drillStack = ref([]);
+const activeSeries = computed(() => {
+  if (!drillStack.value.length) return props.series;
+  return drillStack.value[drillStack.value.length - 1].series;
+});
+const activeCategories = computed(() => {
+  if (!drillStack.value.length) return props.categories;
+  return drillStack.value[drillStack.value.length - 1].categories;
+});
+const hasDrilldown = computed(() => Boolean(props.drilldown?.datasets?.length));
+const isDrilled = computed(() => drillStack.value.length > 0);
+const breadcrumbItems = computed(() => {
+  const root = { name: props.title ?? "Root", depth: -1 };
+  return [root, ...drillStack.value.map((frame, i) => ({ name: frame.name, depth: i }))];
+});
+const drilldownBackLabel = computed(() => props.drilldown?.backLabel ?? "\u2190 Back");
+const resolveDrilldownLink = (link) => {
+  if (!props.drilldown) return null;
+  const dataset = props.drilldown.datasets.find((d) => d.id === link.id);
+  if (!dataset) return null;
+  return {
+    name: dataset.name,
+    series: dataset.series,
+    categories: dataset.categories ?? []
+  };
+};
+const isDrilldownCycle = (id) => drillStack.value.some((frame) => frame.name === id);
+const onDrillIn = (link, point) => {
+  if (isDrilldownCycle(link.id)) return;
+  const frame = resolveDrilldownLink(link);
+  if (!frame) return;
+  drillStack.value = [...drillStack.value, frame];
+  hoveredPath.value = null;
+  emit("drill", link, point);
+};
+const onDrillUp = () => {
+  if (!drillStack.value.length) return;
+  drillStack.value = drillStack.value.slice(0, -1);
+  hoveredPath.value = null;
+  emit("drill-up");
+};
+const onBreadcrumbClick = (depth) => {
+  if (depth === -1) {
+    drillStack.value = [];
+  } else {
+    drillStack.value = drillStack.value.slice(0, depth + 1);
+  }
+  hoveredPath.value = null;
+};
+const { dimensionStyles } = useDimension(props);
+const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, "bgColor");
+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_POLAR = { top: 12, right: 12, bottom: 12, left: 12 };
+const svgRef = ref(null);
+const mousePos = ref({ x: 0, y: 0 });
+const hiddenLabels = ref(/* @__PURE__ */ new Set());
+const seriesWithVisibility = computed(
+  () => activeSeries.value.map((s) => ({
+    ...s,
+    visible: !hiddenLabels.value.has(s.name)
+  }))
+);
+const chart = useChart({
+  type: () => props.type,
+  series: () => seriesWithVisibility.value,
+  categories: () => activeCategories.value,
+  stacked: () => false,
+  donutHoleSize: () => props.donutHoleSize,
+  colorScheme: () => props.colorScheme,
+  smoothing: () => "none",
+  yMin: () => void 0,
+  yMax: () => void 0,
+  width: () => SVG_WIDTH,
+  height: () => SVG_HEIGHT,
+  padding: () => PADDING_POLAR,
+  hiddenLabels: () => hiddenLabels.value
+});
+const { viewBox, paths, legend, slotCount } = chart;
+const hoveredPath = ref(null);
+const hoveredPoint = computed(() => {
+  const p = hoveredPath.value;
+  if (!p) return null;
+  const series = p.series;
+  const dataIdx = p.dataIndex ?? 0;
+  const entry = series.data[dataIdx];
+  const x = typeof entry === "number" ? activeCategories.value[dataIdx] ?? dataIdx : entry.x;
+  const y = typeof entry === "number" ? entry : entry.y;
+  return {
+    seriesIndex: p.seriesIndex,
+    seriesName: series.name,
+    dataIndex: dataIdx,
+    x,
+    y,
+    color: p.color
+  };
+});
+const hoveredSeries = computed(
+  () => hoveredPath.value?.series ?? null
+);
+const hoveredCategory = computed(() => {
+  if (!hoveredPoint.value) return "";
+  return activeCategories.value[hoveredPoint.value.dataIndex] ?? hoveredPoint.value.x;
+});
+const showEmpty = computed(() => {
+  if (!activeSeries.value?.length) return true;
+  return activeSeries.value.every((s) => !s.data?.length || s.visible === false);
+});
+const rootClasses = computed(() => [
+  {
+    [`origam-chart-polar--${props.type}`]: true,
+    [`origam-chart-polar--legend-${props.legendPosition}`]: true,
+    "origam-chart-polar--no-animation": !props.animated
+  },
+  backgroundColorClasses.value,
+  elevationClasses.value,
+  marginClasses.value,
+  paddingClasses.value,
+  roundedClasses.value
+]);
+const rootStyles = computed(() => {
+  const out = {};
+  if (props.aspectRatio) {
+    out.aspectRatio = props.aspectRatio;
+  }
+  out["--origam-chart---animation-duration"] = `${props.animationDuration}ms`;
+  return out;
+});
+const bodyClasses = computed(() => ({
+  "origam-chart-polar__body--with-side-legend": props.showLegend && (props.legendPosition === "left" || props.legendPosition === "right")
+}));
+const svgClasses = computed(() => ({
+  "origam-chart__svg--animated": props.animated
+}));
+const hasTitleBlock = computed(() => Boolean(props.title || props.subtitle));
+const formatY = (value) => {
+  if (props.yAxisFormat) return props.yAxisFormat(value);
+  return String(value);
+};
+const onPointEnter = (path) => {
+  hoveredPath.value = path;
+  if (hoveredPoint.value) chart.onPointHover(hoveredPoint.value);
+};
+const onPointLeaveEvent = () => {
+  hoveredPath.value = null;
+  chart.onPointHover(null);
+};
+const onSvgMouseMove = (event) => {
+  const target = svgRef.value;
+  if (!target) return;
+  const rect = target.getBoundingClientRect();
+  mousePos.value = {
+    x: event.clientX - rect.left,
+    y: event.clientY - rect.top
+  };
+};
+const onSvgMouseLeave = () => {
+  onPointLeaveEvent();
+};
+const onPointActivate = (path, event) => {
+  if (!hoveredPoint.value || hoveredPath.value !== path) {
+    hoveredPath.value = path;
+  }
+  if (!hoveredPoint.value) return;
+  const currentPoint = hoveredPoint.value;
+  if (hasDrilldown.value) {
+    const dataIdx = path.dataIndex ?? 0;
+    const entry = path.series.data[dataIdx];
+    const drillLink = typeof entry !== "number" ? entry.drilldown : void 0;
+    if (drillLink) {
+      onDrillIn(drillLink, currentPoint);
+      return;
+    }
+  }
+  emit("point-click", currentPoint, event);
+};
+const onLegendClick = (series, index) => {
+  emit("legend-click", series, index);
+};
+const onSeriesToggle = (series, nextVisible) => {
+  if (nextVisible) hiddenLabels.value.delete(series.name);
+  else hiddenLabels.value.add(series.name);
+  emit("series-toggle", series, nextVisible);
+};
+const ariaLabel = computed(() => props.title ?? "Chart");
+const svgAriaLabel = computed(() => props.title ?? `${props.type} chart`);
+const svgTitle = computed(() => props.title ?? `${props.type} chart`);
+const svgDesc = computed(() => {
+  const seriesCount = activeSeries.value.length;
+  if (!seriesCount) return "No data";
+  const points = slotCount.value;
+  return `${props.type} chart with ${seriesCount} series and ${points} ${points === 1 ? "point" : "points"}.`;
+});
+const sliceAriaLabel = (path) => {
+  const idx = path.dataIndex ?? 0;
+  const entry = path.series.data[idx] ?? path.series.data[0];
+  const y = entry == null ? NaN : typeof entry === "number" ? entry : entry.y;
+  const cat = activeCategories.value[idx] ?? path.series.name ?? idx;
+  return `${cat}: ${formatY(y)}`;
+};
+</script>
+
+<style lang="scss" scoped>
+	.origam-chart-polar {
+		$this: &;
+
+		display: grid;
+		gap: var(--origam-chart---gap, 12px);
+		padding: var(--origam-chart---padding, 12px);
+		background-color: var(--origam-chart---background-color, transparent);
+		color: var(--origam-chart---color, inherit);
+		width: 100%;
+		box-sizing: border-box;
+		grid-template-rows: auto auto 1fr auto;
+		grid-template-columns: 1fr;
+		grid-template-areas:
+			"header"
+			"breadcrumb"
+			"body"
+			"legend";
+
+		&--legend-top {
+			grid-template-areas:
+				"header"
+				"breadcrumb"
+				"legend"
+				"body";
+			grid-template-rows: auto auto auto 1fr;
+		}
+
+		&--legend-bottom {
+			grid-template-areas:
+				"header"
+				"breadcrumb"
+				"body"
+				"legend";
+			grid-template-rows: auto auto 1fr auto;
+		}
+
+		&--legend-left {
+			grid-template-columns: auto minmax(0, 1fr);
+			grid-template-rows: auto auto minmax(0, 1fr);
+			grid-template-areas:
+				"header header"
+				"breadcrumb breadcrumb"
+				"legend body";
+		}
+
+		&--legend-right {
+			grid-template-columns: minmax(0, 1fr) auto;
+			grid-template-rows: auto auto minmax(0, 1fr);
+			grid-template-areas:
+				"header header"
+				"breadcrumb breadcrumb"
+				"body legend";
+		}
+
+		&__header {
+			grid-area: header;
+			display: flex;
+			flex-direction: column;
+			gap: 4px;
+		}
+
+		&__breadcrumb {
+			grid-area: breadcrumb;
+			display: flex;
+			align-items: center;
+			gap: var(--origam-chart__breadcrumb---gap, 8px);
+			font-size: var(--origam-chart__breadcrumb---font-size, 0.8125rem);
+			color: var(--origam-chart__breadcrumb---color, var(--origam-color-text-secondary, #6b7280));
+		}
+
+		&__breadcrumb-back {
+			display: inline-flex;
+			align-items: center;
+			gap: 4px;
+			padding: 4px 10px;
+			border: 1px solid var(--origam-chart__breadcrumb-back---border-color, var(--origam-color-border-default, #d1d5db));
+			border-radius: var(--origam-chart__breadcrumb-back---border-radius, 4px);
+			background-color: var(--origam-chart__breadcrumb-back---background-color, transparent);
+			color: var(--origam-chart__breadcrumb-back---color, inherit);
+			font-size: inherit;
+			cursor: pointer;
+			white-space: nowrap;
+			transition: background-color 120ms ease, border-color 120ms ease;
+
+			&:hover,
+			&:focus-visible {
+				background-color: var(--origam-chart__breadcrumb-back---hover-background-color, rgba(0, 0, 0, 0.05));
+				outline: none;
+			}
+		}
+
+		&__breadcrumb-trail {
+			display: flex;
+			align-items: center;
+			gap: 4px;
+			list-style: none;
+			margin: 0;
+			padding: 0;
+			flex-wrap: wrap;
+		}
+
+		&__breadcrumb-item {
+			display: flex;
+			align-items: center;
+			gap: 4px;
+
+			&:not(:last-child)::after {
+				content: "/";
+				opacity: 0.5;
+			}
+		}
+
+		&__breadcrumb-link {
+			background: none;
+			border: none;
+			padding: 0;
+			color: var(--origam-chart__breadcrumb-link---color, var(--origam-color-action-primary-text, #3b82f6));
+			font-size: inherit;
+			cursor: pointer;
+			text-decoration: underline;
+			text-underline-offset: 2px;
+
+			&:hover,
+			&:focus-visible {
+				opacity: 0.8;
+				outline: none;
+			}
+		}
+
+		&__breadcrumb-current {
+			font-weight: var(--origam-chart__breadcrumb-current---font-weight, 600);
+			color: var(--origam-chart__breadcrumb-current---color, inherit);
+		}
+
+		&__title {
+			font-size: var(--origam-chart__title---font-size, 1.125rem);
+			font-weight: var(--origam-chart__title---font-weight, 600);
+			color: var(--origam-chart__title---color, inherit);
+		}
+
+		&__subtitle {
+			font-size: var(--origam-chart__subtitle---font-size, 0.875rem);
+			color: var(--origam-chart__subtitle---color, var(--origam-color-text-secondary, #6b7280));
+		}
+
+		&__body {
+			grid-area: body;
+			position: relative;
+			display: flex;
+			min-height: 0;
+			min-width: 0;
+
+			&--with-side-legend {
+				min-width: var(--origam-chart__body---min-width, 200px);
+			}
+		}
+
+		&__svg {
+			flex: 1 1 auto;
+			width: 100%;
+			height: 100%;
+			min-width: 0;
+			min-height: 0;
+			overflow: visible;
+			display: block;
+		}
+
+		.origam-chart__slice {
+			stroke: var(--origam-chart__pie---stroke-color, var(--origam-color-surface-default, #ffffff));
+			stroke-width: var(--origam-chart__pie---stroke-width, 2);
+			cursor: pointer;
+			transition: transform 150ms ease;
+
+			&:hover,
+			&:focus-visible {
+				outline: none;
+				transform: scale(1.03);
+				transform-origin: center;
+			}
+		}
+
+		.origam-chart__svg--animated .origam-chart__slice {
+			transform-origin: center;
+			animation: origam-chart-polar-fade var(--origam-chart---animation-duration, 600ms) ease-out both;
+		}
+
+		:deep(.origam-chart__tooltip) {
+			position: absolute;
+			pointer-events: none;
+			background-color: var(--origam-chart__tooltip---background-color, var(--origam-color-surface-overlay, #1f2937));
+			color: var(--origam-chart__tooltip---color, #ffffff);
+			padding: var(--origam-chart__tooltip---padding, 8px 12px);
+			border-radius: var(--origam-chart__tooltip---border-radius, 6px);
+			font-size: 0.8125rem;
+			box-shadow: var(--origam-chart__tooltip---shadow, 0 4px 16px rgba(0, 0, 0, 0.15));
+			z-index: 10;
+		}
+
+		:deep(.origam-chart__tooltip-title) {
+			font-weight: 600;
+			margin-bottom: 4px;
+		}
+
+		:deep(.origam-chart__tooltip-row) {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+		}
+
+		:deep(.origam-chart__tooltip-swatch) {
+			display: inline-block;
+			width: 10px;
+			height: 10px;
+			border-radius: 2px;
+		}
+
+		:deep(.origam-chart__tooltip-value) {
+			font-weight: 600;
+			margin-left: auto;
+		}
+
+		&__empty {
+			position: absolute;
+			inset: 0;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			color: var(--origam-chart__empty---color, var(--origam-color-text-secondary, #6b7280));
+		}
+
+		:deep(.origam-chart__legend) {
+			grid-area: legend;
+			list-style: none;
+			margin: 0;
+			padding: 0;
+			display: flex;
+			flex-wrap: wrap;
+			gap: var(--origam-chart__legend---gap, 12px);
+			align-content: center;
+		}
+
+		:deep(.origam-chart__legend--top),
+		:deep(.origam-chart__legend--bottom) {
+			flex-direction: row;
+			justify-content: center;
+		}
+
+		:deep(.origam-chart__legend--left),
+		:deep(.origam-chart__legend--right) {
+			flex-direction: column;
+			justify-content: center;
+			flex-wrap: nowrap;
+			align-self: stretch;
+		}
+
+		:deep(.origam-chart__legend--left) {
+			padding-right: var(--origam-chart__legend---side-gap, 8px);
+		}
+
+		:deep(.origam-chart__legend--right) {
+			padding-left: var(--origam-chart__legend---side-gap, 8px);
+		}
+
+		:deep(.origam-chart__legend-item) {
+			display: flex;
+			align-items: center;
+			gap: 6px;
+			cursor: pointer;
+			font-size: 0.8125rem;
+			user-select: none;
+		}
+
+		:deep(.origam-chart__legend-item--hidden) {
+			opacity: 0.4;
+			text-decoration: line-through;
+		}
+
+		:deep(.origam-chart__legend-swatch) {
+			display: inline-block;
+			width: 12px;
+			height: 12px;
+			border-radius: var(--origam-chart__legend-swatch---border-radius, 3px);
+		}
+
+		&--no-animation .origam-chart__slice {
+			animation: none;
+		}
+	}
+
+	@keyframes origam-chart-polar-fade {
+		from { opacity: 0; transform: scale(0.8); }
+		to { opacity: 1; transform: scale(1); }
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.origam-chart-polar .origam-chart__svg--animated .origam-chart__slice {
+			animation: none;
+		}
+	}
+</style>