origam 2.16.0 → 2.17.1

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

@@ -0,0 +1,217 @@
+<template>
+	<origam-input
+			:id="id"
+			ref="origamInputRef"
+			v-model="model"
+			:class="checkboxGroupClasses"
+			:style="checkboxGroupStyles"
+			v-bind="{ ...rootAttrs, ...inputProps }"
+	>
+		<template #default="{id, messagesId, isDisabled, isReadonly, isValid}">
+			<slot
+					name="default"
+					v-bind="{id, messagesId, isDisabled, isReadonly, isValid}"
+			>
+
+				<slot
+						name="label"
+						v-bind="{label, required}"
+				>
+					<origam-label
+							:id="id"
+							:required="required"
+							:text="label"
+					/>
+				</slot>
+
+				<origam-defaults-provider :defaults="checkboxDefaults">
+					<origam-selection-control-group
+							:id="id"
+							ref="origamSelectionControlGroupRef"
+							v-model="model"
+							:aria-describedby="messagesId"
+							:aria-labelledby="label ? id : undefined"
+							:disabled="isDisabled"
+							:items="items"
+							:multiple="multiple"
+							:readonly="isReadonly"
+							v-bind="{ ...controlProps , ...controlAttrs}"
+					>
+						<template #item="{item}">
+							<slot
+									name="item"
+									v-bind="{id, messagesId, isDisabled, isReadonly, isValid}"
+							>
+								<origam-checkbox
+										v-model="model"
+										:aria-describedby="messagesId"
+										:disabled="isDisabled"
+										:readonly="isReadonly"
+										v-bind="item"
+								/>
+							</slot>
+						</template>
+					</origam-selection-control-group>
+				</origam-defaults-provider>
+			</slot>
+		</template>
+	</origam-input>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, StyleValue, useAttrs } from "vue";
+import OrigamCheckbox from "./OrigamCheckbox.vue";
+import OrigamDefaultsProvider from "../DefaultsProvider/OrigamDefaultsProvider.vue";
+import OrigamInput from "../Input/OrigamInput.vue";
+import OrigamLabel from "../Label/OrigamLabel.vue";
+import OrigamSelectionControlGroup from "../SelectionControl/OrigamSelectionControlGroup.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 { filterInputAttrs } from "../../utils/Input/input.util";
+import { getUid } from "../../utils/Commons/getCurrentInstance.util";
+import { omitUndefined } from "../../utils/Commons/commons.util";
+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 },
+  centerAffix: { type: Boolean, required: false },
+  hideDetails: { type: [Boolean, String], required: false },
+  hideSpinButtons: { type: Boolean, required: false },
+  hint: { type: String, required: false },
+  persistentHint: { type: Boolean, required: false },
+  messages: { type: [Array, String], required: false },
+  density: { type: null, required: false, default: DENSITY.DEFAULT },
+  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 },
+  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 },
+  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 },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
+  borderTop: { type: [Boolean, Number, String], required: false },
+  borderLeft: { type: [Boolean, Number, String], required: false },
+  borderBottom: { type: [Boolean, Number, String], required: false },
+  borderRight: { type: [Boolean, Number, String], required: false },
+  borderBlock: { type: [Boolean, Number, String], required: false },
+  borderInline: { type: [Boolean, Number, String], required: false },
+  borderColor: { type: String, required: false },
+  borderStyle: { type: String, required: false },
+  borderTopColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderRightColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderBottomColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  elevation: { type: [Number, String], required: false },
+  height: { type: [Number, String], required: false },
+  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 },
+  direction: { type: null, required: false },
+  disabled: { type: Boolean, required: false },
+  error: { type: [String, Boolean], required: false },
+  errorMessages: { type: [Array, String], required: false },
+  maxErrors: { type: [Number, String], required: false },
+  name: { type: String, required: false },
+  readonly: { type: Boolean, required: false },
+  rules: { type: Array, required: false },
+  modelValue: { type: null, required: false },
+  validateOn: { type: null, required: false },
+  validationValue: { type: null, required: false },
+  focused: { type: Boolean, required: false },
+  appendAvatar: { type: String, required: false },
+  appendIcon: { type: null, required: false },
+  prependAvatar: { type: String, required: false },
+  prependIcon: { type: null, required: false },
+  size: { type: null, required: false },
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, required: false },
+  lineHeight: { type: null, required: false },
+  indeterminate: { type: Boolean, required: false },
+  indeterminateIcon: { type: null, required: false },
+  label: { type: String, required: false },
+  value: { type: null, required: false },
+  required: { 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, default: true },
+  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 },
+  items: { type: [Array, Object], required: false }
+});
+defineSlots();
+defineEmits(["update:modelValue"]);
+const { filterProps } = useProps(props);
+const origamSelectionControlGroupRef = ref();
+const origamInputRef = ref();
+const attrs = useAttrs();
+const uid = getUid();
+const id = computed(() => {
+  return props.id || `checkbox-group-${uid}`;
+});
+const model = useVModel(props, "modelValue");
+const [rootAttrs, controlAttrs] = filterInputAttrs(attrs);
+const inputProps = computed(() => {
+  return origamInputRef.value?.filterProps(props, ["modelValue", "id", "focused", "style", "class"]);
+});
+const controlProps = computed(() => {
+  return origamSelectionControlGroupRef.value?.filterProps(props, ["modelValue", "id", "style", "class", "readonly", "disabled", "type", "multiple", "items"]);
+});
+const wasPropPassed = usePassedProps(props);
+const checkboxDefaults = computed(() => ({
+  "origam-checkbox": omitUndefined({
+    color: wasPropPassed("color") ? props.color : void 0,
+    bgColor: wasPropPassed("bgColor") ? props.bgColor : void 0,
+    density: wasPropPassed("density") ? props.density : void 0,
+    size: wasPropPassed("size") ? props.size : void 0
+  })
+}));
+const items = computed(() => {
+  return props.items ?? [];
+});
+const checkboxGroupStyles = computed(() => {
+  return [
+    props.style
+  ];
+});
+const checkboxGroupClasses = computed(() => {
+  return [
+    "origam-checkbox-group",
+    props.class
+  ];
+});
+const { id: styleId, css, load, isLoaded, unload } = useStyle(checkboxGroupStyles);
+defineExpose({
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded,
+  styleId
+});
+</script>

package/dist/src/components/Checkbox/index.cjs

@@ -15,6 +15,13 @@ Object.defineProperty(exports, "OrigamCheckboxBtn", {
     return _OrigamCheckboxBtn.default;
   }
 });
+Object.defineProperty(exports, "OrigamCheckboxGroup", {
+  enumerable: true,
+  get: function () {
+    return _OrigamCheckboxGroup.default;
+  }
+});
 var _OrigamCheckbox = _interopRequireDefault(require("./OrigamCheckbox.vue"));
 var _OrigamCheckboxBtn = _interopRequireDefault(require("./OrigamCheckboxBtn.vue"));
+var _OrigamCheckboxGroup = _interopRequireDefault(require("./OrigamCheckboxGroup.vue"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/src/components/Checkbox/index.d.ts

@@ -1,2 +1,3 @@
 export { default as OrigamCheckbox } from './OrigamCheckbox.vue';
 export { default as OrigamCheckboxBtn } from './OrigamCheckboxBtn.vue';
+export { default as OrigamCheckboxGroup } from './OrigamCheckboxGroup.vue';

package/dist/src/components/Checkbox/index.js

@@ -1,2 +1,3 @@
 export { default as OrigamCheckbox } from "./OrigamCheckbox.vue";
 export { default as OrigamCheckboxBtn } from "./OrigamCheckboxBtn.vue";
+export { default as OrigamCheckboxGroup } from "./OrigamCheckboxGroup.vue";

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

@@ -1,6 +1,7 @@
 <template>
 	<component
-			:is="link.tag"
+			:is="rootTag"
+			:id="id"
 			v-ripple="rippleProps"
 			v-contrast
 			:class="chipClasses"
@@ -9,8 +10,9 @@
 			:href="link.href.value"
 			:style="chipStyles"
 			:tabindex="isClickable ? 0 : undefined"
+			:type="typeAttr"
 			@click="handleClick"
-			@keydown="isClickable && !isLink && handleKeydown"
+			@keydown="handleKeydown"
 	>
     <span
 		    v-if="isClickable"
@@ -42,7 +44,10 @@
 				v-if="hasPrepend"
 				key="prepend"
 				class="origam-chip__prepend"
+				:role="isPrependZoneFocusable ? 'button' : undefined"
+				:tabindex="isPrependZoneFocusable ? 0 : undefined"
 				@click="handleClickPrepend"
+				@keydown="handleKeydownPrepend"
 		>
 			<slot name="prepend">
 				<origam-avatar
@@ -76,7 +81,10 @@
 				v-if="hasAppend"
 				key="append"
 				class="origam-chip__append"
+				:role="isAppendZoneFocusable ? 'button' : undefined"
+				:tabindex="isAppendZoneFocusable ? 0 : undefined"
 				@click="handleClickAppend"
+				@keydown="handleKeydownAppend"
 		>
 			<slot name="append">
 				<origam-avatar
@@ -125,28 +133,29 @@
 </template>
 
 <script lang="ts" setup>
-import { OrigamAvatar, OrigamBtn, OrigamExpandX, OrigamIcon } from "../../components";
-import {
-  useAdjacent,
-  useBothColor,
-  useDefaults,
-  useDensity,
-  useGroupItem,
-  useHover,
-  useLink,
-  useLocale,
-  useProps,
-  useSize,
-  useStateEffect,
-  useStyle,
-  useTypography,
-  useVModel
-} from "../../composables";
-import { ORIGAM_CHIP_GROUP_KEY } from "../../consts";
-import { vContrast, vRipple } from "../../directives";
-import { KEYBOARD_VALUES, MDI_ICONS, SIZES } from "../../enums";
+import OrigamAvatar from "../Avatar/OrigamAvatar.vue";
+import OrigamBtn from "../Btn/OrigamBtn.vue";
+import OrigamExpandX from "../Transition/OrigamExpandX.vue";
+import OrigamIcon from "../Icon/OrigamIcon.vue";
+import { useAdjacent } from "../../composables/Commons/adjacent.composable";
+import { useDensity } from "../../composables/Commons/density.composable";
+import { useGroupItem } from "../../composables/Commons/groupItem.composable";
+import { useLink } from "../../composables/Commons/link.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useSize } from "../../composables/Commons/size.composable";
+import { useStateEffect } from "../../composables/Commons/stateEffect.composable";
+import { useStateFlag } from "../../composables/Commons/stateFlag.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useTypography } from "../../composables/Commons/typography.composable";
+import { ORIGAM_CHIP_GROUP_KEY } from "../../consts/Chip/chip-group.const";
+import vContrast from "../../directives/Contrast/contrast.directive";
+import vRipple from "../../directives/Ripple/ripple.directive";
+import { KEYBOARD_VALUES } from "../../enums/Commons/hotkey.enum";
+import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
+import { SIZES } from "../../enums/Commons/size.enum";
 import { computed, StyleValue, toRef, useAttrs, useSlots } from "vue";
-const _props = defineProps({
+const props = defineProps({
   closable: { type: Boolean, required: false },
   closeIcon: { type: null, required: false, default: MDI_ICONS.CLOSE_CIRCLE_OUTLINE },
   closeLabel: { type: String, required: false, default: "origam.close" },
@@ -214,13 +223,10 @@ const _props = defineProps({
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   hover: { type: [Boolean, Object], required: false },
-  fontFamily: { type: null, required: false },
+  hoverClass: { type: String, required: false },
   fontSize: { type: null, required: false },
-  fontWeight: { type: null, required: false },
-  lineHeight: { type: null, required: false },
-  letterSpacing: { type: null, required: false }
+  fontWeight: { 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);
@@ -228,8 +234,11 @@ const { t } = useLocale();
 const attrs = useAttrs();
 const slots = useSlots();
 const { densityClasses } = useDensity(props);
-const { isHover, hoverState } = useHover(props);
+const { isOn: isHover, config: hoverState } = useStateFlag(props, { state: "hover" });
+const { isOn: active, config: activeState, classes: activeClasses } = useStateFlag(props, { state: "active" });
 const {
+  colorClasses,
+  colorStyles,
   borderClasses,
   borderStyles,
   roundedClasses,
@@ -239,19 +248,29 @@ const {
   paddingStyles,
   marginClasses,
   marginStyles
-} = useStateEffect(props, isHover, void 0, hoverState, void 0);
+} = useStateEffect(props, isHover, active, hoverState, activeState);
 const { sizeClasses, sizeStyles } = useSize(props);
 const { typographyStyles } = useTypography(props, "chip");
-const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
-const isActive = useVModel(props, "modelValue");
+const { unset: closeChip } = useStateFlag(props, { state: "active", source: "modelValue" });
 const group = useGroupItem(props, ORIGAM_CHIP_GROUP_KEY, false);
 const link = useLink(props, attrs);
 const {
   onClickPrepend: handleClickPrepend,
   onClickAppend: handleClickAppend,
+  onKeydownPrepend: handleKeydownPrepend,
+  onKeydownAppend: handleKeydownAppend,
+  isPrependClickable,
+  isAppendClickable,
   hasPrepend,
   hasAppend
 } = useAdjacent(props, toRef(props, "prependIcon"), toRef(props, "appendIcon"));
+const isPrependZoneFocusable = computed(() => isPrependClickable.value && !link.isLink.value);
+const isAppendZoneFocusable = computed(() => isAppendClickable.value && !link.isLink.value);
+const isButtonSafe = computed(() => {
+  return props.tag === "span" && isClickable.value && !link.isLink.value && !hasClose.value && !isPrependZoneFocusable.value && !isAppendZoneFocusable.value;
+});
+const rootTag = computed(() => isButtonSafe.value ? "button" : link.tag.value);
+const typeAttr = computed(() => rootTag.value === "button" ? "button" : void 0);
 const isLink = computed(() => {
   return props.link && link.isLink.value;
 });
@@ -283,13 +302,14 @@ const onClick = (e) => {
 const handleClickClose = (e) => {
   e.preventDefault();
   e.stopPropagation();
-  isActive.value = false;
+  closeChip();
   emits("click:close", e);
 };
 const handleClick = (e) => {
   onClick(e);
 };
 const handleKeydown = (e) => {
+  if (!isClickable.value || isLink.value || rootTag.value === "button") return;
   if (e.key === KEYBOARD_VALUES.ENTER || e.key === " ") {
     e.preventDefault();
     onClick(e);
@@ -337,10 +357,11 @@ const chipClasses = computed(() => {
     sizeClasses.value,
     paddingClasses.value,
     marginClasses.value,
+    activeClasses.value,
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(chipStyles);
+const { id, css, load, isLoaded, unload } = useStyle(chipStyles, () => props.id);
 defineExpose({
   filterProps,
   css,
@@ -357,6 +378,16 @@ defineExpose({
 
 		align-items: center;
 		display: inline-flex;
+		// Every `&--size-*` height below is a CONTENT-box measurement (chip
+		// only ever rendered as `<span>`/`<a>`, both `content-box` under the
+		// UA stylesheet, when those were authored). #530 made a purely
+		// clickable chip render as a real `<button>` — and `button` is
+		// `box-sizing: border-box` by default in the UA stylesheet, which
+		// would silently shrink every bordered/outlined chip by its own
+		// border-width (measured: 26px → 24px with `border: true` + `thin`).
+		// Pinning `content-box` here keeps the token math identical no
+		// matter which tag ends up on the root.
+		box-sizing: content-box;
 		font-weight: var(--origam-chip---font-weight, 400);
 		max-width: 100%;
 		min-width: 0;
@@ -420,11 +451,11 @@ defineExpose({
 			background-color: var(--origam-chip__overlay---background-color, currentColor);
 			border-radius: var(--origam-chip__overlay---border-radius, inherit);
 			pointer-events: var(--origam-chip__overlay---pointer-events, none);
-			opacity: var(--origam-chip__overlay---opacity, 0);
+			opacity: var(--origam-chip__overlay---opacity, var(--origam-chip---overlay-opacity, 0));
 			transition:
 				var(--origam-chip__overlay---transition-property, opacity)
-				var(--origam-chip__overlay---transition-duration, 0.2s)
-				var(--origam-chip__overlay---transition-timing-function, ease-in-out);
+				var(--origam-chip__overlay---transition-duration, var(--origam-chip---transition-duration, 0.2s))
+				var(--origam-chip__overlay---transition-timing-function, var(--origam-chip---transition-easing, ease-in-out));
 		}
 
 		&--disabled {
@@ -437,6 +468,19 @@ defineExpose({
 			border-radius: var(--origam-chip---border-radius-label, 4px);
 		}
 
+		// C7 — `origam-chip--pill` was emitted by the template and targeted by
+		// NO rule anywhere in the DS: the prop was inert. The base class is
+		// already fully round, so "pill makes the chip round" (what the doc
+		// claimed) describes the DEFAULT, not this prop. What `pill` does own
+		// is the explicit opt-IN, the twin of `--label`'s opt-out: it restores
+		// the full radius over anything that squared it — `label`, or a
+		// `rounded` utility class (weaker cascade, but a theme can raise it).
+		// Declared AFTER `--label` on purpose: both selectors carry the same
+		// specificity, so source order is what decides `pill label`.
+		&--pill {
+			border-radius: var(--origam-chip---border-radius, 9999px);
+		}
+
 		&--selected {
 			background-color: var(--origam-chip--selected---background-color);
 			color: var(--origam-chip--selected---color);

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

@@ -1,5 +1,6 @@
 <template>
 	<origam-slide-group
+			:id="id"
 			ref="origamSlideGroupRef"
 			:class="chipGroupClasses"
 			:style="chipGroupStyles"
@@ -15,11 +16,20 @@
 </template>
 
 <script lang="ts" setup>
-import { OrigamDefaultsProvider, OrigamSlideGroup } from "../../components";
-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 OrigamDefaultsProvider from "../DefaultsProvider/OrigamDefaultsProvider.vue";
+import OrigamSlideGroup from "../Slide/OrigamSlideGroup.vue";
+import { useBorder } from "../../composables/Commons/border.composable";
+import { useGroup } from "../../composables/Commons/group.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 { useRounded } from "../../composables/Commons/rounded.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { ORIGAM_CHIP_GROUP_KEY } from "../../consts/Chip/chip-group.const";
+import { DIRECTION } from "../../enums/Commons/direction.enum";
+import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
+import { omitUndefined } from "../../utils/Commons/commons.util";
 import { computed, ref, StyleValue } from "vue";
 const props = defineProps({
   column: { type: Boolean, required: false },
@@ -93,7 +103,20 @@ const slotDefaults = computed(() => ({
     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
+    hover: wasPropPassed("hover") ? props.hover : void 0,
+    /*********************************************************
+     * filter
+     *
+     * @description
+     * `filter` etait declaree sur IChipGroupProps et lue NULLE PART :
+     * zero occurrence de props.filter dans ce script hors la
+     * declaration de type. Elle ne cascadait pas vers les chips
+     * enfants, et OrigamChip n'affiche .origam-chip__filter que si SA
+     * PROPRE prop filter est vraie — activer la case du groupe
+     * n'avait donc aucun effet observable. Prop morte, cascadee ici
+     * comme color / bgColor / active / hover.
+     ********************************************************/
+    filter: wasPropPassed("filter") ? props.filter : void 0
   })
 }));
 const slideGroupProps = computed(() => {
@@ -121,7 +144,7 @@ const chipGroupClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(chipGroupStyles);
+const { id, css, load, isLoaded, unload } = useStyle(chipGroupStyles, () => props.id);
 defineExpose({
   filterProps,
   css,

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

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