origam 2.16.0 → 2.17.1

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

@@ -1,9 +1,9 @@
 <template>
-	<div
+	<figure
+			:id="id"
 			class="origam-chart-variwide"
 			:class="rootClasses"
 			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles, headerTypographyStyles]"
-			role="figure"
 			:aria-label="ariaLabel"
 			data-cy="origam-chart-variwide"
 	>
@@ -207,7 +207,7 @@
 					data-cy="origam-chart-variwide-empty"
 			>
 				<slot name="empty">
-					<span>No data to display</span>
+					<span>{{ t('origam.chart.no_data_text') }}</span>
 				</slot>
 			</div>
 		</div>
@@ -229,7 +229,7 @@
 				/>
 			</template>
 		</origam-chart-legend>
-	</div>
+	</figure>
 </template>
 
 <script lang="ts" setup>
@@ -239,15 +239,15 @@ import {
 } from "vue";
 import OrigamChartLegend from "./OrigamChartLegend.vue";
 import OrigamChartTooltip from "./OrigamChartTooltip.vue";
-import {
-  useChartHeaderTypography,
-  useBackgroundColor,
-  useDimension,
-  useElevation,
-  useMargin,
-  usePadding,
-  useRounded
-} from "../../composables";
+import { useChartHeaderTypography } from "../../composables/Chart/chart-header-typography.composable";
+import { useChartAnimationStyle } from "../../composables/Chart/chart-animation.composable";
+import { useBackgroundColor } from "../../composables/Commons/backgroundColor.composable";
+import { useDimension } from "../../composables/Commons/dimension.composable";
+import { useElevation } from "../../composables/Commons/elevation.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useMargin } from "../../composables/Commons/margin.composable";
+import { usePadding } from "../../composables/Commons/padding.composable";
+import { useRounded } from "../../composables/Commons/rounded.composable";
 import { intentBgExpr, isIntent } from "../../utils/Commons/color.util";
 defineOptions({
   name: "OrigamChartVariwide"
@@ -307,13 +307,15 @@ const props = defineProps({
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
 defineSlots();
+const { t } = useLocale();
 const { dimensionStyles } = useDimension(props);
 const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, "bgColor");
 const { elevationClasses, elevationStyles } = useElevation(props);
-const { marginStyles } = useMargin(props);
-const { paddingStyles } = usePadding(props);
+const { marginClasses, marginStyles } = useMargin(props);
+const { paddingClasses, paddingStyles } = usePadding(props);
 const { roundedClasses, roundedStyles } = useRounded(props);
 const { headerTypographyStyles } = useChartHeaderTypography(props);
+const chartAnimationStyle = useChartAnimationStyle(props);
 const SVG_WIDTH = 600;
 const SVG_HEIGHT = 400;
 const TICK_SIZE = 4;
@@ -500,15 +502,18 @@ const rootClasses = computed(() => [
   },
   backgroundColorClasses.value,
   elevationClasses.value,
-  roundedClasses.value
+  marginClasses.value,
+  paddingClasses.value,
+  roundedClasses.value,
+  props.class
 ]);
 const rootStyles = computed(() => {
   const out = {};
   if (props.aspectRatio) {
     out.aspectRatio = props.aspectRatio;
   }
-  out["--origam-chart---animation-duration"] = `${props.animationDuration}ms`;
-  return out;
+  Object.assign(out, chartAnimationStyle.value);
+  return [out, props.style];
 });
 const bodyClasses = computed(() => ({
   "origam-chart-variwide__body--with-side-legend": props.showLegend && (props.legendPosition === "left" || props.legendPosition === "right")
@@ -517,14 +522,14 @@ const svgClasses = computed(() => ({
   "origam-chart__svg--animated": props.animated
 }));
 const hasTitleBlock = computed(() => Boolean(props.title || props.subtitle));
-const ariaLabel = computed(() => props.title ?? "variwide chart");
-const svgAriaLabel = computed(() => props.title ?? "variwide chart");
-const svgTitle = computed(() => props.title ?? "variwide chart");
-const svgDesc = computed(() => {
-  const n = columns.value.length;
-  return `Variwide chart with ${n} ${n === 1 ? "column" : "columns"}.`;
-});
-const columnAriaLabel = (col) => `${col.category}: value ${col.formattedValue}, width ${col.formattedWidth}`;
+const defaultAriaLabel = computed(() => t("origam.chart.variwide.aria_label"));
+const ariaLabel = computed(() => props.title ?? defaultAriaLabel.value);
+const svgAriaLabel = computed(() => props.title ?? defaultAriaLabel.value);
+const svgTitle = computed(() => props.title ?? defaultAriaLabel.value);
+const svgDesc = computed(
+  () => t("origam.chart.variwide.desc", columns.value.length, { chart: defaultAriaLabel.value })
+);
+const columnAriaLabel = (col) => t("origam.chart.variwide.column_aria_label", col.category, col.formattedValue, col.formattedWidth);
 const onColumnEnter = (col) => {
   hoveredIndex.value = col.index;
 };
@@ -563,7 +568,17 @@ const onSeriesToggle = (series, visible) => {
 
 		display: grid;
 		gap: var(--origam-chart---gap, 12px);
-		padding: var(--origam-chart---padding, 12px);
+
+		// ⛔ #C2 — zero-specificity default so a scale-driven utility
+		// class (`.origam--p-4` from `padding="4"`) wins the cascade.
+		// Without `:where()`, this scoped rule's [data-v-hash] pushes it
+		// to (0,2,0), beating the utility's (0,1,0), and the `padding`
+		// prop's scale form goes silently inert. See CLAUDE.md "CSS-first"
+		// table — `:where(…)` is the documented zero-specificity default.
+		:where(&) {
+			padding: var(--origam-chart---padding, 12px);
+		}
+
 		background-color: var(--origam-chart---background-color, transparent);
 		color: var(--origam-chart---color, inherit);
 		width: 100%;
@@ -622,7 +637,7 @@ const onSeriesToggle = (series, visible) => {
 
 		&__subtitle {
 			font-size: var(--origam-chart__subtitle---font-size, 0.875rem);
-			color: var(--origam-chart__subtitle---color, var(--origam-color-text-secondary, #6b7280));
+			color: var(--origam-chart__subtitle---color, var(--origam-color__text---secondary, #6b7280));
 		}
 
 		&__body {
@@ -648,31 +663,31 @@ const onSeriesToggle = (series, visible) => {
 		}
 
 		&__grid-line {
-			stroke: var(--origam-chart-variwide__grid---stroke, var(--origam-color-border-subtle, #e5e7eb));
+			stroke: var(--origam-chart-variwide__grid---stroke, var(--origam-color__border---subtle, #e5e7eb));
 			stroke-width: 1;
 			stroke-dasharray: 4 4;
 		}
 
 		&__axis-line {
-			stroke: var(--origam-chart-variwide__axis---stroke, var(--origam-color-border-default, #d1d5db));
+			stroke: var(--origam-chart-variwide__axis---stroke, var(--origam-color__border---default, #d1d5db));
 			stroke-width: 1;
 		}
 
 		&__tick-mark {
-			stroke: var(--origam-chart-variwide__tick---stroke, var(--origam-color-border-default, #d1d5db));
+			stroke: var(--origam-chart-variwide__tick---stroke, var(--origam-color__border---default, #d1d5db));
 			stroke-width: 1;
 		}
 
 		&__tick-label {
 			font-size: var(--origam-chart-variwide__tick-label---font-size, 0.6875rem);
-			fill: var(--origam-chart-variwide__tick-label---fill, var(--origam-color-text-secondary, #6b7280));
+			fill: var(--origam-chart-variwide__tick-label---fill, var(--origam-color__text---secondary, #6b7280));
 			user-select: none;
 		}
 
 		&__bar {
 			cursor: pointer;
 			transition: opacity 150ms ease, filter 150ms ease;
-			stroke: var(--origam-chart-variwide__bar---stroke-color, var(--origam-color-surface-default, #ffffff));
+			stroke: var(--origam-chart-variwide__bar---stroke-color, var(--origam-color__surface---default, #ffffff));
 			stroke-width: var(--origam-chart-variwide__bar---stroke-width, 1);
 
 			&:hover,
@@ -687,7 +702,7 @@ const onSeriesToggle = (series, visible) => {
 			pointer-events: none;
 			font-size: var(--origam-chart-variwide__bar-label---font-size, 0.6875rem);
 			font-weight: var(--origam-chart-variwide__bar-label---font-weight, 600);
-			fill: var(--origam-chart-variwide__bar-label---fill, var(--origam-color-text-primary, currentColor));
+			fill: var(--origam-chart-variwide__bar-label---fill, var(--origam-color__text---primary, currentColor));
 			user-select: none;
 		}
 
@@ -698,7 +713,7 @@ const onSeriesToggle = (series, visible) => {
 		:deep(.origam-chart__tooltip) {
 			position: absolute;
 			pointer-events: none;
-			background-color: var(--origam-chart__tooltip---background-color, var(--origam-color-surface-overlay, #1f2937));
+			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);
@@ -736,7 +751,7 @@ const onSeriesToggle = (series, visible) => {
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			color: var(--origam-chart__empty---color, var(--origam-color-text-secondary, #6b7280));
+			color: var(--origam-chart__empty---color, var(--origam-color__text---secondary, #6b7280));
 		}
 
 		:deep(.origam-chart__legend) {

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

@@ -1,9 +1,9 @@
 <template>
-	<div
+	<figure
+			:id="id"
 			class="origam-chart-word-cloud"
 			:class="rootClasses"
-			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles]"
-			role="figure"
+			:style="[rootStyles, dimensionStyles, marginStyles, paddingStyles, backgroundColorStyles, elevationStyles, roundedStyles, headerTypographyStyles]"
 			:aria-label="ariaLabel"
 			data-cy="origam-chart-word-cloud"
 	>
@@ -105,7 +105,7 @@
 					data-cy="origam-chart-word-cloud-empty"
 			>
 				<slot name="empty">
-					<span>No data to display</span>
+					<span>{{ t('origam.chart.no_data_text') }}</span>
 				</slot>
 			</div>
 		</div>
@@ -127,7 +127,7 @@
 				/>
 			</template>
 		</origam-chart-legend>
-	</div>
+	</figure>
 </template>
 
 <script lang="ts" setup>
@@ -137,14 +137,16 @@ import {
 } from "vue";
 import OrigamChartLegend from "./OrigamChartLegend.vue";
 import OrigamChartTooltip from "./OrigamChartTooltip.vue";
-import {
-  useBackgroundColor,
-  useDimension,
-  useElevation,
-  useMargin,
-  usePadding,
-  useRounded
-} from "../../composables";
+import { useUnsupportedProp } from "../../composables/Commons/unsupportedProp.composable";
+import { useChartAnimationStyle } from "../../composables/Chart/chart-animation.composable";
+import { useChartHeaderTypography } from "../../composables/Chart/chart-header-typography.composable";
+import { useBackgroundColor } from "../../composables/Commons/backgroundColor.composable";
+import { useDimension } from "../../composables/Commons/dimension.composable";
+import { useElevation } from "../../composables/Commons/elevation.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useMargin } from "../../composables/Commons/margin.composable";
+import { usePadding } from "../../composables/Commons/padding.composable";
+import { useRounded } from "../../composables/Commons/rounded.composable";
 import { intentBgExpr, isIntent } from "../../utils/Commons/color.util";
 defineOptions({
   name: "OrigamChartWordCloud"
@@ -202,12 +204,24 @@ const props = defineProps({
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
 defineSlots();
+const { t } = useLocale();
 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);
+useUnsupportedProp(
+  "OrigamChartWordCloud",
+  "categories",
+  "a word cloud places words by weight \u2014 there is no category axis.",
+  () => (props.categories?.length ?? 0) > 0
+);
+const { headerTypographyStyles } = useChartHeaderTypography({
+  get fontSize() {
+    return props.fontSize;
+  }
+});
 const SVG_WIDTH = 800;
 const SVG_HEIGHT = 500;
 const CENTER_X = SVG_WIDTH / 2;
@@ -380,6 +394,7 @@ const showEmpty = computed(() => {
   if (!first?.data?.length) return true;
   return placedWords.value.length === 0;
 });
+const chartAnimationStyle = useChartAnimationStyle(props);
 const rootClasses = computed(() => [
   {
     [`origam-chart-word-cloud--legend-${props.legendPosition}`]: true,
@@ -389,15 +404,16 @@ const rootClasses = computed(() => [
   elevationClasses.value,
   marginClasses.value,
   paddingClasses.value,
-  roundedClasses.value
+  roundedClasses.value,
+  props.class
 ]);
 const rootStyles = computed(() => {
   const out = {};
   if (props.aspectRatio) {
     out.aspectRatio = props.aspectRatio;
   }
-  out["--origam-chart---animation-duration"] = `${props.animationDuration}ms`;
-  return out;
+  Object.assign(out, chartAnimationStyle.value);
+  return [out, props.style];
 });
 const bodyClasses = computed(() => ({
   "origam-chart-word-cloud__body--with-side-legend": props.showLegend && (props.legendPosition === "left" || props.legendPosition === "right")
@@ -406,13 +422,13 @@ const svgClasses = computed(() => ({
   "origam-chart__svg--animated": props.animated
 }));
 const hasTitleBlock = computed(() => Boolean(props.title || props.subtitle));
-const ariaLabel = computed(() => props.title ?? "word cloud chart");
-const svgAriaLabel = computed(() => props.title ?? "word cloud chart");
-const svgTitle = computed(() => props.title ?? "word cloud chart");
-const svgDesc = computed(() => {
-  const n = placedWords.value.length;
-  return `Word cloud chart with ${n} ${n === 1 ? "word" : "words"}.`;
-});
+const defaultAriaLabel = computed(() => t("origam.chart.word_cloud.aria_label"));
+const ariaLabel = computed(() => props.title ?? defaultAriaLabel.value);
+const svgAriaLabel = computed(() => props.title ?? defaultAriaLabel.value);
+const svgTitle = computed(() => props.title ?? defaultAriaLabel.value);
+const svgDesc = computed(
+  () => t("origam.chart.word_cloud.desc", placedWords.value.length, { chart: defaultAriaLabel.value })
+);
 const onWordEnter = (word) => {
   hoveredIndex.value = word.index;
 };
@@ -451,7 +467,17 @@ const onSeriesToggle = (series, nextVisible) => {
 
 		display: grid;
 		gap: var(--origam-chart---gap, 12px);
-		padding: var(--origam-chart---padding, 12px);
+
+		// ⛔ #C2 — zero-specificity default so a scale-driven utility
+		// class (`.origam--p-4` from `padding="4"`) wins the cascade.
+		// Without `:where()`, this scoped rule's [data-v-hash] pushes it
+		// to (0,2,0), beating the utility's (0,1,0), and the `padding`
+		// prop's scale form goes silently inert. See CLAUDE.md "CSS-first"
+		// table — `:where(…)` is the documented zero-specificity default.
+		:where(&) {
+			padding: var(--origam-chart---padding, 12px);
+		}
+
 		background-color: var(--origam-chart---background-color, transparent);
 		color: var(--origam-chart---color, inherit);
 		width: 100%;
@@ -510,7 +536,7 @@ const onSeriesToggle = (series, nextVisible) => {
 
 		&__subtitle {
 			font-size: var(--origam-chart__subtitle---font-size, 0.875rem);
-			color: var(--origam-chart__subtitle---color, var(--origam-color-text-secondary, #6b7280));
+			color: var(--origam-chart__subtitle---color, var(--origam-color__text---secondary, #6b7280));
 		}
 
 		&__body {
@@ -556,7 +582,7 @@ const onSeriesToggle = (series, nextVisible) => {
 		:deep(.origam-chart__tooltip) {
 			position: absolute;
 			pointer-events: none;
-			background-color: var(--origam-chart__tooltip---background-color, var(--origam-color-surface-overlay, #1f2937));
+			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);
@@ -594,7 +620,7 @@ const onSeriesToggle = (series, nextVisible) => {
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			color: var(--origam-chart__empty---color, var(--origam-color-text-secondary, #6b7280));
+			color: var(--origam-chart__empty---color, var(--origam-color__text---secondary, #6b7280));
 		}
 
 		:deep(.origam-chart__legend) {

package/dist/src/components/Checkbox/OrigamCheckbox.vue

@@ -16,12 +16,13 @@
 				<origam-checkbox-btn
 						:id="id"
 						ref="origamCheckboxBtnRef"
+						v-bind="{ ...checkboxBtnProps, ...controlAttrs }"
 						v-model="model"
 						:aria-describedby="messagesId"
 						:disabled="isDisabled"
 						:error="!isValid"
 						:readonly="isReadonly"
-						v-bind="{ ...checkboxBtnProps, ...controlAttrs }"
+						:value="value"
 						@blur="handleBlur"
 						@focus="handleFocus"
 						@click:label="handleClickLabel"
@@ -56,20 +57,20 @@
 </template>
 
 <script lang="ts" setup>
-import { OrigamCheckboxBtn, OrigamInput } from "../../components";
-import {
-  useDefaults,
-  useFocus,
-  useMargin,
-  usePadding,
-  useProps,
-  useStyle,
-  useVModel
-} from "../../composables";
-import { DENSITY } from "../../enums";
-import { filterInputAttrs, getUid } from "../../utils";
+import OrigamCheckboxBtn from "./OrigamCheckboxBtn.vue";
+import OrigamInput from "../Input/OrigamInput.vue";
+import { useFocus } from "../../composables/Commons/focus.composable";
+import { useMargin } from "../../composables/Commons/margin.composable";
+import { usePadding } from "../../composables/Commons/padding.composable";
+import { usePassedProps } from "../../composables/Commons/passedProps.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useVModel } from "../../composables/Commons/vModel.composable";
+import { DENSITY } from "../../enums/Commons/density.enum";
+import { filterInputAttrs } from "../../utils/Input/input.util";
+import { getUid } from "../../utils/Commons/getCurrentInstance.util";
 import { computed, ref, StyleValue, useAttrs, useSlots } from "vue";
-const _props = defineProps({
+const props = defineProps({
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
@@ -127,7 +128,6 @@ const _props = defineProps({
   errorMessages: { type: [Array, String], required: false },
   maxErrors: { type: [Number, String], required: false },
   name: { type: String, required: false },
-  label: { type: String, required: false },
   readonly: { type: Boolean, required: false },
   rules: { type: Array, required: false },
   modelValue: { type: null, required: false },
@@ -139,36 +139,34 @@ const _props = defineProps({
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
   size: { type: null, 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 },
+  label: { type: String, required: false },
   trueValue: { type: null, required: false },
   falseValue: { type: null, required: false },
   value: { type: null, required: false },
   required: { type: Boolean, required: false },
-  activeColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  inline: { type: Boolean, required: false },
+  type: { type: String, required: false },
+  valueComparator: { type: Function, required: false },
   falseIcon: { type: null, required: false },
   trueIcon: { type: null, required: false },
   multiple: { type: Boolean, required: false },
-  type: { type: String, required: false },
-  valueComparator: { type: Function, required: false },
+  inline: { type: Boolean, required: false },
+  hover: { type: [Boolean, Object], required: false },
+  hoverClass: { type: String, required: false },
   ripple: { type: [Boolean, Object], required: false },
   active: { type: [Boolean, Object], required: false },
-  activeClass: { type: String, required: false },
-  hover: { type: [Boolean, Object], required: false }
+  activeClass: { type: String, required: false }
 });
-const props = useDefaults(_props);
 const emits = defineEmits(["update:modelValue", "update:focused", "click:label"]);
 defineSlots();
 const { filterProps } = useProps(props);
 const origamInputRef = ref();
 const origamCheckboxBtnRef = ref();
+const wasPropPassed = usePassedProps(props);
 const model = useVModel(props, "modelValue");
 const { isFocused, onFocus: handleFocus, onBlur: handleBlur } = useFocus(props);
 const attrs = useAttrs();
@@ -185,7 +183,9 @@ const inputProps = computed(() => {
   return origamInputRef.value?.filterProps(props, ["modelValue", "class", "style", "id", "focused"]);
 });
 const checkboxBtnProps = computed(() => {
-  return origamCheckboxBtnRef.value?.filterProps(props, ["class", "style", "modelValue", "id", "disabled", "readonly", "error"]);
+  const excludes = ["class", "style", "modelValue", "id", "disabled", "readonly", "error"];
+  if (!wasPropPassed("multiple")) excludes.push("multiple");
+  return origamCheckboxBtnRef.value?.filterProps(props, excludes);
 });
 const { paddingClasses, paddingStyles } = usePadding(props);
 const { marginClasses, marginStyles } = useMargin(props);

package/dist/src/components/Checkbox/OrigamCheckboxBtn.vue

@@ -1,14 +1,16 @@
 <template>
 	<origam-selection-control
+			:id="id"
 			ref="origamSelectionControlRef"
+			v-bind="controlProps"
 			v-model="model"
 			:aria-checked="indeterminate ? 'mixed' : undefined"
 			:class="checkboxBtnClasses"
 			:false-icon="falseIcon"
 			:style="checkboxBtnStyles"
 			:true-icon="trueIcon"
+			:value="value"
 			type="checkbox"
-			v-bind="controlProps"
 			@update:model-value="handleChange"
 			@click:label="handleClickLabel"
 	>
@@ -39,13 +41,13 @@
 </template>
 
 <script lang="ts" setup>
-import { OrigamSelectionControl } from "../../components";
-import {
-  useProps,
-  useStyle,
-  useVModel
-} from "../../composables";
-import { DENSITY, MDI_ICONS } from "../../enums";
+import OrigamSelectionControl from "../SelectionControl/OrigamSelectionControl.vue";
+import { usePassedProps } from "../../composables/Commons/passedProps.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useVModel } from "../../composables/Commons/vModel.composable";
+import { DENSITY } from "../../enums/Commons/density.enum";
+import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
 import { computed, ref, StyleValue, useSlots } from "vue";
 const props = defineProps({
   indeterminate: { type: Boolean, required: false },
@@ -58,26 +60,22 @@ const props = defineProps({
   falseValue: { type: null, required: false },
   value: { type: null, required: false },
   required: { type: Boolean, required: false },
-  activeColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   disabled: { type: Boolean, required: false },
   error: { type: [String, Boolean], required: false },
-  inline: { type: Boolean, required: false },
-  falseIcon: { type: null, required: false, default: MDI_ICONS.CHECKBOX_BLANK_OUTLINE },
-  trueIcon: { type: null, required: false, default: MDI_ICONS.CHECKBOX_MARKED_OUTLINE },
-  multiple: { type: Boolean, required: false },
   name: { type: String, required: false },
   readonly: { type: Boolean, required: false },
-  modelValue: { type: null, required: false },
   type: { type: String, required: false },
+  modelValue: { type: null, required: false },
   valueComparator: { type: Function, required: false },
+  falseIcon: { type: null, required: false, default: MDI_ICONS.CHECKBOX_BLANK_OUTLINE },
+  trueIcon: { type: null, required: false, default: MDI_ICONS.CHECKBOX_MARKED_OUTLINE },
+  multiple: { type: Boolean, required: false },
+  inline: { type: Boolean, required: false },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  density: { type: null, required: false, default: DENSITY.DEFAULT },
-  ripple: { type: [Boolean, Object], required: false },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  active: { type: [Boolean, Object], required: false },
-  activeClass: { type: String, required: false },
   hover: { type: [Boolean, Object], required: false },
+  hoverClass: { type: String, required: false },
+  density: { type: null, required: false, default: DENSITY.DEFAULT },
   border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
   borderTop: { type: [Boolean, Number, String], required: false },
   borderLeft: { type: [Boolean, Number, String], required: false },
@@ -96,11 +94,13 @@ const props = defineProps({
   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 }
+  elevation: { type: [Number, String], required: false },
+  ripple: { type: [Boolean, Object], required: false }
 });
-const emits = defineEmits(["update:indeterminate", "update:modelValue", "update:focused", "click:label"]);
+const emits = defineEmits(["update:indeterminate", "update:modelValue", "click:label"]);
 defineSlots();
 const { filterProps } = useProps(props);
+const wasPropPassed = usePassedProps(props);
 const origamSelectionControlRef = ref();
 const indeterminate = useVModel(props, "indeterminate");
 const model = useVModel(props, "modelValue");
@@ -120,7 +120,9 @@ const trueIcon = computed(() => {
   return indeterminate.value ? props.indeterminateIcon : props.trueIcon;
 });
 const controlProps = computed(() => {
-  return origamSelectionControlRef.value?.filterProps(props, ["modelValue", "falseIcon", "trueIcon", "type", "class", "style"]);
+  const excludes = ["modelValue", "falseIcon", "trueIcon", "type", "class", "style"];
+  if (!wasPropPassed("multiple")) excludes.push("multiple");
+  return origamSelectionControlRef.value?.filterProps(props, excludes);
 });
 const checkboxBtnStyles = computed(() => {
   return [
@@ -133,7 +135,7 @@ const checkboxBtnClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(checkboxBtnStyles);
+const { id, css, load, isLoaded, unload } = useStyle(checkboxBtnStyles, () => props.id);
 defineExpose({
   filterProps,
   css,