origam 2.16.0 → 2.17.1

package/dist/src/components/ColorPicker/OrigamColorPickerSwatches.vue

@@ -1,5 +1,6 @@
 <template>
 	<div
+			:id="id"
 			:class="colorPickerSwatchesClasses"
 			:style="colorPickerSwatchesStyles"
 	>
@@ -12,20 +13,25 @@
 						v-for="(color, _colorIndex) in swatch"
 						:key="_colorIndex"
 				>
-					<div
+					<button
+							type="button"
 							class="origam-color-picker-swatches__color"
+							:aria-label="swatchLabel(color)"
+							:aria-pressed="isSelected(color)"
+							:disabled="disabled"
 							@click="handleUpdateColor(color)"
 					>
 						<div :style="{ 'background-color': background(color)}">
-							<template v-if="colorHsv && deepEqual(colorHsv, hsva)">
+							<template v-if="isSelected(color)">
 								<origam-icon
 										:color="getContrast(color, '#FFFFFF') > 2 ? 'white' : 'black'"
 										:icon="MDI_ICONS.CHECK_CIRCLE_OUTLINE"
+										aria-hidden="true"
 										size="x-small"
 								/>
 							</template>
 						</div>
-					</div>
+					</button>
 				</template>
 			</div>
 		</template>
@@ -33,10 +39,14 @@
 </template>
 
 <script lang="ts" setup>
-import { OrigamIcon } from "../../components";
-import { useProps, useStyle } from "../../composables";
-import { MDI_ICONS } from "../../enums";
-import { convertToUnit, deepEqual, getContrast, parseColor, RGBtoCSS, RGBtoHSV } from "../../utils";
+import OrigamIcon from "../Icon/OrigamIcon.vue";
+import { useDimension } from "../../composables/Commons/dimension.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
+import { convertToUnit, deepEqual } from "../../utils/Commons/commons.util";
+import { getContrast, parseColor, RGBtoCSS, RGBtoHSV } from "../../utils/Commons/color.util";
 import { computed, StyleValue } from "vue";
 const props = defineProps({
   colorHsv: { type: [Object, null], required: false },
@@ -53,7 +63,9 @@ const props = defineProps({
   width: { type: [Number, String], required: false }
 });
 const emits = defineEmits(["update:colorHsv"]);
+defineSlots();
 const { filterProps } = useProps(props);
+const { t } = useLocale();
 const rgba = (color) => {
   return parseColor(color);
 };
@@ -63,14 +75,23 @@ const hsva = (color) => {
 const background = (color) => {
   return RGBtoCSS(rgba(color));
 };
+const isSelected = (color) => {
+  return !!props.colorHsv && deepEqual(props.colorHsv, hsva(color));
+};
+const swatchLabel = (color) => {
+  return t("origam.color_picker.swatches.aria_label", background(color));
+};
 const handleUpdateColor = (color) => {
+  if (props.disabled) return;
   const colorUpdate = hsva(color);
   if (colorUpdate) {
     emits("update:colorHsv", colorUpdate);
   }
 };
+const { dimensionStyles } = useDimension(props);
 const colorPickerSwatchesStyles = computed(() => {
   return [
+    dimensionStyles.value,
     {
       maxHeight: convertToUnit(props.maxHeight)
     },
@@ -83,7 +104,7 @@ const colorPickerSwatchesClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(colorPickerSwatchesStyles);
+const { id, css, load, isLoaded, unload } = useStyle(colorPickerSwatchesStyles, () => props.id);
 defineExpose({
   filterProps,
   css,
@@ -117,13 +138,26 @@ defineExpose({
 			max-height: 18px;
 			width: 45px;
 			margin: 2px 4px;
-			border-radius: 2px;
+			border-radius: var(--origam-color-picker__swatches__color---border-radius, 2px);
 			-webkit-user-select: none;
 			user-select: none;
 			overflow: hidden;
 			background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAAXNSR0IArs4c6QAAACRJREFUKFNjPHTo0H8GJGBnZ8eIzGekgwJk+0BsdCtRHEQbBQBbbh0dIGKknQAAAABJRU5ErkJggg==) repeat;
 			cursor: pointer;
 
+			// issue #443 — now a real <button> (was a bare <div>): reset the
+			// UA button chrome so the checkerboard background + dimensions
+			// aren't disturbed by a default border/padding/font.
+			border: none;
+			padding: 0;
+			font: inherit;
+			color: inherit;
+
+			&:disabled {
+				cursor: default;
+				opacity: 0.5;
+			}
+
 			> div {
 				display: flex;
 				align-items: center;

package/dist/src/components/ColorPickerField/OrigamColorPickerField.vue

@@ -1,15 +1,17 @@
 <template>
 	<origam-text-field
+			:id="id"
 			ref="origamTextFieldRef"
 			v-model:focused="isFocused"
-			:aria-label="t(label)"
+			:aria-label="t(accessibleLabel)"
 			:class="colorPickerFieldClasses"
 			:counter-value="counterValue"
 			:dirty="isDirty"
 			:placeholder="placeholder"
 			:style="colorPickerFieldStyles"
-			:title="t(label)"
-			:validation-value="validationValue"
+			:title="t(accessibleLabel)"
+			:validation-value="effectiveValidationValue"
+
 			v-bind="{ ...textFieldProps }"
 			@blur="handleBlur"
 			@change="handleChange"
@@ -127,13 +129,27 @@
 </template>
 
 <script lang="ts" setup>
-import { OrigamColorPicker, OrigamMenu, OrigamSheet, OrigamTextField, OrigamTranslateScale } from "../../components";
-import { useDefaults, useLocale, useProps, useTeleportTypography, useVModel, useStyle } from "../../composables";
-import { COLOR_NULL, ORIGAM_FORM_KEY } from "../../consts";
-import { BLOCK, DENSITY, DIRECTION, TEXT_FIELD_TYPE } from "../../enums";
-import { forwardRefs, HSVtoCSS, matchesSelector } from "../../utils";
+import OrigamColorPicker from "../ColorPicker/OrigamColorPicker.vue";
+import OrigamMenu from "../Menu/OrigamMenu.vue";
+import OrigamSheet from "../Sheet/OrigamSheet.vue";
+import OrigamTextField from "../TextField/OrigamTextField.vue";
+import OrigamTranslateScale from "../Transition/OrigamTranslateScale.vue";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useTeleportTypography } from "../../composables/Commons/teleport-typography.composable";
+import { useVModel } from "../../composables/Commons/vModel.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { COLOR_NULL } from "../../consts/ColorPicker/color-picker.const";
+import { ORIGAM_FORM_KEY } from "../../consts/Form/form.const";
+import { BLOCK } from "../../enums/Commons/anchor.enum";
+import { DENSITY } from "../../enums/Commons/density.enum";
+import { DIRECTION } from "../../enums/Commons/direction.enum";
+import { TEXT_FIELD_TYPE } from "../../enums/TextField/text-field.enum";
+import { forwardRefs } from "../../utils/Commons/forwardRefs.util";
+import { HSVtoCSS } from "../../utils/Commons/color.util";
+import { matchesSelector } from "../../utils/Commons/commons.util";
 import { computed, inject, nextTick, ref, shallowRef, StyleValue, useSlots, watch } from "vue";
-const _props = defineProps({
+const props = defineProps({
   menu: { type: Boolean, required: false },
   menuProps: { type: Object, required: false },
   openOnClear: { type: Boolean, required: false },
@@ -159,17 +175,13 @@ const _props = defineProps({
   dirty: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   error: { type: [String, Boolean], required: false },
-  flat: { type: Boolean, required: false },
   inline: { type: Boolean, required: false },
   label: { type: String, required: false },
   prefix: { type: String, required: false },
   suffix: { type: String, required: false },
   persistentClear: { type: Boolean, required: false },
-  reverse: { type: Boolean, required: false },
   singleLine: { type: Boolean, 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 },
   loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false },
   tag: { type: String, required: false },
@@ -180,6 +192,19 @@ const _props = defineProps({
   prependInnerIcon: { type: null, required: false },
   clearIcon: { type: null, required: false },
   clearable: { type: Boolean, required: false },
+  border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true, default: 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 },
   focused: { type: Boolean, required: false },
   text: { type: String, required: false },
   floating: { type: Boolean, required: false },
@@ -198,25 +223,11 @@ const _props = defineProps({
   paddingRight: { type: [Boolean, Number, String], required: false },
   paddingBlock: { type: [Boolean, Number, String], required: false },
   paddingInline: { type: [Boolean, Number, String], required: false },
-  border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true, default: 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 },
   rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true, default: 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 },
-  fontFamily: { type: null, required: false },
   fontSize: { type: null, required: false },
   fontWeight: { type: null, required: false },
   lineHeight: { type: null, required: false },
@@ -251,8 +262,8 @@ const _props = defineProps({
   prependIcon: { type: null, required: false },
   transition: { type: [Boolean, String, Object], required: false, default: () => ({ component: OrigamTranslateScale }) }
 });
-const props = useDefaults(_props);
 const { filterProps } = useProps(props);
+defineEmits(["update:modelValue", "update:menu"]);
 defineSlots();
 const { t } = useLocale();
 const origamTextFieldRef = ref();
@@ -275,8 +286,8 @@ const handleSelectColor = (color) => {
 const selectedValue = computed(() => {
   return model.value;
 });
-const validationValue = computed(() => {
-  return model.value;
+const effectiveValidationValue = computed(() => {
+  return props.validationValue === void 0 ? model.value : props.validationValue;
 });
 const hasSelectedValue = computed(() => {
   return selectedValue.value !== null;
@@ -367,9 +378,12 @@ const isDirty = computed(() => {
 const placeholder = computed(() => {
   return isDirty.value || !isFocused.value && props.label && !props.persistentPlaceholder ? void 0 : props.placeholder;
 });
-const label = computed(() => {
+const toggleLabel = computed(() => {
   return menu.value ? props.closeText : props.openText;
 });
+const accessibleLabel = computed(() => {
+  return props.label || toggleLabel.value;
+});
 watch(selectedValue, () => {
   isFocused.value = hasSelectedValue.value;
 }, {
@@ -390,7 +404,7 @@ const colorPickerFieldClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(colorPickerFieldStyles);
+const { id, css, load, isLoaded, unload } = useStyle(colorPickerFieldStyles, () => props.id);
 defineExpose(forwardRefs({
   filterProps,
   isFocused,

package/dist/src/components/CommandPalette/OrigamCommandPalette.vue

@@ -3,6 +3,7 @@
 		<transition name="origam-command-palette--fade">
 			<div
 					v-if="isActive"
+					:id="id"
 					ref="rootRef"
 					:class="rootClasses"
 					:style="rootStyles"
@@ -12,7 +13,7 @@
 			>
 				<div
 						ref="dialogRef"
-						:aria-labelledby="inputId"
+						:aria-label="dialogAriaLabel"
 						:class="dialogClasses"
 						:style="dialogStyles"
 						aria-modal="true"
@@ -33,7 +34,7 @@
 								:aria-activedescendant="activeOptionId"
 								:aria-controls="listboxId"
 								:aria-expanded="hasResults"
-								:placeholder="placeholder"
+								:placeholder="resolvedPlaceholder"
 								:style="inputTypographyStyles"
 								aria-autocomplete="list"
 								autocomplete="off"
@@ -51,7 +52,7 @@
 
 					<div
 							:id="listboxId"
-							:aria-label="placeholder"
+							:aria-label="resolvedPlaceholder"
 							:style="listStyles"
 							class="origam-command-palette__list"
 							role="listbox"
@@ -133,7 +134,7 @@
 								class="origam-command-palette__empty"
 						>
 							<slot name="empty">
-								{{ emptyText }}
+								{{ resolvedEmptyText }}
 							</slot>
 						</div>
 					</div>
@@ -165,26 +166,24 @@
 
 <script lang="ts" setup>
 import { computed, nextTick, ref, StyleValue, useSlots, watch } from "vue";
-import { OrigamIcon, OrigamKbd } from "../../components";
+import OrigamIcon from "../Icon/OrigamIcon.vue";
+import OrigamKbd from "../Kbd/OrigamKbd.vue";
 import { useCommand } from "../../composables/CommandPalette/command.composable";
 import { useHotkey } from "../../composables/Commons/hotkey.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
 import { useTypography } from "../../composables/Commons/typography.composable";
 import { useVModel } from "../../composables/Commons/vModel.composable";
-import {
-  COMMAND_PALETTE_DEFAULT_HOTKEY,
-  COMMAND_PALETTE_DEFAULT_MAX_HEIGHT,
-  COMMAND_PALETTE_DEFAULT_WIDTH,
-  IN_BROWSER
-} from "../../consts";
-import { MDI_ICONS } from "../../enums";
-import { getUid } from "../../utils";
+import { COMMAND_PALETTE_DEFAULT_HOTKEY, COMMAND_PALETTE_DEFAULT_MAX_HEIGHT, COMMAND_PALETTE_DEFAULT_WIDTH } from "../../consts/CommandPalette/command-palette.const";
+import { IN_BROWSER } from "../../consts/Commons/commons.const";
+import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
+import { getUid } from "../../utils/Commons/getCurrentInstance.util";
 import { fuzzyMatch } from "../../utils/CommandPalette/fuzzy-match.util";
 const props = defineProps({
   modelValue: { type: Boolean, required: false, default: false },
   hotkey: { type: [Array, null], required: false, default: () => COMMAND_PALETTE_DEFAULT_HOTKEY },
   commands: { type: Array, required: false },
-  placeholder: { type: String, required: false, default: "Search\u2026" },
-  emptyText: { type: String, required: false, default: "No results" },
+  placeholder: { type: String, required: false, default: "origam.command_palette.placeholder" },
+  emptyText: { type: String, required: false, default: "origam.command_palette.empty_text" },
   maxHeight: { type: [Number, String], required: false, default: COMMAND_PALETTE_DEFAULT_MAX_HEIGHT },
   width: { type: [Number, String], required: false, default: COMMAND_PALETTE_DEFAULT_WIDTH },
   loading: { type: Boolean, required: false, default: false },
@@ -194,11 +193,7 @@ 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 },
-  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 }
+  fontSize: { type: null, required: false }
 });
 const emit = defineEmits(["update:modelValue", "select", "query"]);
 defineSlots();
@@ -215,6 +210,10 @@ const uid = getUid();
 const inputId = computed(() => `origam-command-palette-input-${uid}`);
 const listboxId = computed(() => `origam-command-palette-listbox-${uid}`);
 const dataCy = computed(() => "origam-command-palette");
+const { t } = useLocale();
+const dialogAriaLabel = computed(() => t("origam.command_palette.aria_label"));
+const resolvedPlaceholder = computed(() => t(props.placeholder));
+const resolvedEmptyText = computed(() => t(props.emptyText));
 const rootRef = ref();
 const dialogRef = ref();
 const inputRef = ref();

package/dist/src/components/ConfirmWrapper/OrigamConfirmWrapper.vue

@@ -1,5 +1,6 @@
 <template>
 	<div
+			:id="id"
 			:class="confirmWrapperClasses"
 			:style="confirmWrapperStyles"
 	>
@@ -12,7 +13,10 @@
 		        v-if="hasPrepend"
 		        key="prepend"
 		        class="origam-confirm-wrapper__prepend"
+		        :role="isPrependClickable ? 'button' : undefined"
+		        :tabindex="isPrependClickable ? 0 : undefined"
 		        @click="handleClickPrepend"
+		        @keydown="handleKeydownPrepend"
         >
           <slot name="prepend">
             <origam-avatar
@@ -48,7 +52,10 @@
 						v-if="hasAppend"
 						key="append"
 						class="origam-confirm-wrapper__append"
+						:role="isAppendClickable ? 'button' : undefined"
+						:tabindex="isAppendClickable ? 0 : undefined"
 						@click="handleClickAppend"
+						@keydown="handleKeydownAppend"
 				>
           <slot name="append">
             <origam-avatar
@@ -126,24 +133,22 @@
 
 <script lang="ts" setup>
 import { computed, ref, StyleValue, useSlots, watch } from "vue";
-import {
-  OrigamAvatar,
-  OrigamDefaultsProvider,
-  OrigamIcon,
-  OrigamLabel,
-  OrigamMessages
-} from "../../components";
-import {
-  useAdjacent,
-  useDefaults,
-  useLocale,
-  useProps,
-  useStyle,
-  useVModel
-} from "../../composables";
-import { DENSITY, DIRECTION } from "../../enums";
-import { forwardRefs, getUid, wrapInArray } from "../../utils";
-const _props = defineProps({
+import OrigamAvatar from "../Avatar/OrigamAvatar.vue";
+import OrigamDefaultsProvider from "../DefaultsProvider/OrigamDefaultsProvider.vue";
+import OrigamIcon from "../Icon/OrigamIcon.vue";
+import OrigamLabel from "../Label/OrigamLabel.vue";
+import OrigamMessages from "../Messages/OrigamMessages.vue";
+import { useAdjacent } from "../../composables/Commons/adjacent.composable";
+import { useLocale } from "../../composables/Commons/locale.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 { DIRECTION } from "../../enums/Commons/direction.enum";
+import { forwardRefs } from "../../utils/Commons/forwardRefs.util";
+import { getUid } from "../../utils/Commons/getCurrentInstance.util";
+import { wrapInArray } from "../../utils/Commons/commons.util";
+const props = defineProps({
   modelValue: { type: null, required: false, default: "" },
   confirm: { type: null, required: false, default: "" },
   field: { type: String, required: false },
@@ -179,8 +184,7 @@ const _props = defineProps({
   variant: { type: null, required: false },
   focused: { type: Boolean, required: false }
 });
-const props = useDefaults(_props);
-defineEmits(["update:confirm", "update:modelValue", "click:append", "click:prepend", "update:focused"]);
+defineEmits(["update:confirm", "update:modelValue", "click:append", "click:prepend"]);
 defineSlots();
 const slots = useSlots();
 const { t } = useLocale();
@@ -190,7 +194,11 @@ const {
   hasPrepend,
   hasAppend,
   onClickPrepend: handleClickPrepend,
-  onClickAppend: handleClickAppend
+  onClickAppend: handleClickAppend,
+  onKeydownPrepend: handleKeydownPrepend,
+  onKeydownAppend: handleKeydownAppend,
+  isPrependClickable,
+  isAppendClickable
 } = useAdjacent(props);
 const origamLabelRef = ref();
 const hasTitle = computed(() => {

package/dist/src/components/ContextualMenu/OrigamContextualMenu.vue

@@ -1,12 +1,13 @@
 <template>
 	<origam-menu
+			:id="id"
 			ref="origamMenuRef"
 			v-model:model-value="modelValue"
 			:class="contextualMenuClasses"
-			:open-on-click="false"
+			:open-on-click="openOnClick"
+			:open-on-context-menu="openOnContextMenu"
 			:style="contextualMenuStyles"
 			activator="cursor"
-			open-on-context-menu
 			target="cursor"
 			v-bind="menuProps"
 	>
@@ -23,10 +24,15 @@
 </template>
 
 <script lang="ts" setup>
-import { OrigamMenu, OrigamTranslateScale } from "../../components";
-import { useProps, useVModel, useStyle } from "../../composables";
-import { INLINE, LOCATION_STRATEGIES, SCROLL_STRATEGIES } from "../../enums";
-import { forwardRefs } from "../../utils";
+import OrigamMenu from "../Menu/OrigamMenu.vue";
+import OrigamTranslateScale from "../Transition/OrigamTranslateScale.vue";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useVModel } from "../../composables/Commons/vModel.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { INLINE } from "../../enums/Commons/anchor.enum";
+import { LOCATION_STRATEGIES } from "../../enums/Commons/location.enum";
+import { SCROLL_STRATEGIES } from "../../enums/Commons/scroll.enum";
+import { forwardRefs } from "../../utils/Commons/forwardRefs.util";
 import { computed, ref, StyleValue } from "vue";
 const props = defineProps({
   id: { type: String, required: false },
@@ -141,17 +147,19 @@ const props = defineProps({
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, 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 }
 });
+defineEmits([]);
+defineSlots();
 const { filterProps } = useProps(props);
 const modelValue = useVModel(props, "modelValue", false);
 const origamMenuRef = ref();
 const menuProps = computed(() => {
-  return origamMenuRef.value?.filterProps(props, ["class", "id", "style", "modelValue", "activator", "target", "openOnClick", "openOnContextualMenu"]);
+  return origamMenuRef.value?.filterProps(props, ["class", "id", "style", "modelValue", "activator", "target", "openOnClick", "openOnContextMenu"]);
 });
 const contextualMenuStyles = computed(() => {
   return [
@@ -164,7 +172,7 @@ const contextualMenuClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(contextualMenuStyles);
+const { id, css, load, isLoaded, unload } = useStyle(contextualMenuStyles, () => props.id);
 defineExpose(forwardRefs({
   filterProps,
   css,

package/dist/src/components/Counter/OrigamCounter.vue

@@ -5,7 +5,7 @@
 	>
 		<component
 				:is="tag"
-				v-show="active"
+				:id="id"
 				:class="counterClasses"
 				:style="counterStyles"
 		>
@@ -20,22 +20,21 @@
 </template>
 
 <script lang="ts" setup>
-import { OrigamSlideY, OrigamTransition } from "../../components";
-import {
-  useBorder,
-  useBothColor,
-  useDensity,
-  useElevation,
-  useMargin,
-  usePadding,
-  useProps,
-  useRounded,
-  useSsrBoot,
-  useStyle
-} from "../../composables";
+import OrigamSlideY from "../Transition/OrigamSlideY.vue";
+import OrigamTransition from "../Transition/OrigamTransition.vue";
+import { useBorder } from "../../composables/Commons/border.composable";
+import { useBothColor } from "../../composables/Commons/bothColor.composable";
+import { useDensity } from "../../composables/Commons/density.composable";
+import { useElevation } from "../../composables/Commons/elevation.composable";
+import { useMargin } from "../../composables/Commons/margin.composable";
+import { usePadding } from "../../composables/Commons/padding.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useRounded } from "../../composables/Commons/rounded.composable";
+import { useSsrBoot } from "../../composables/Commons/ssrBoot.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
 import { computed, StyleValue, toRef } from "vue";
 const props = defineProps({
-  active: { type: Boolean, required: false },
+  active: { type: Boolean, required: false, default: false },
   disabled: { type: Boolean, required: false },
   max: { type: [String, Number], required: false },
   value: { type: [String, Number], required: false, default: 0 },
@@ -81,6 +80,7 @@ const props = defineProps({
   density: { type: null, required: false },
   transition: { type: [Boolean, String, Object], required: false, default: () => ({ component: OrigamSlideY }) }
 });
+defineEmits([]);
 defineSlots();
 const { filterProps } = useProps(props);
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
@@ -109,6 +109,7 @@ const counterClasses = computed(() => {
   return [
     "origam-counter",
     {
+      "origam-counter--active": props.active,
       "origam-counter--error": props.max && !props.disabled && parseFloat(props.value) > parseFloat(props.max)
     },
     colorClasses.value,
@@ -121,7 +122,7 @@ const counterClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(counterStyles);
+const { id, css, load, isLoaded, unload } = useStyle(counterStyles, () => props.id);
 defineExpose({
   filterProps,
   css,
@@ -134,21 +135,37 @@ defineExpose({
 
 <style lang="scss" scoped>
 	.origam-counter {
-		color: currentColor;
+		--origam-counter---density: 0px;
+
+		color: var(--origam-counter---color);
 		flex: 0 1 auto;
-		font-size: var(--origam-counter---font-size, 12px);
-		transition-duration: 150ms;
+		font-size: calc(var(--origam-counter---font-size, 12px) + var(--origam-counter---density));
+		font-weight: var(--origam-counter---font-weight);
+		letter-spacing: var(--origam-counter---letter-spacing);
+		padding-inline: var(--origam-counter---padding-inline);
+		opacity: var(--origam-counter---opacity);
+		transition-property: color, opacity;
+		transition-duration: var(--origam-counter---transition-duration, 150ms);
 
 		&--density-comfortable {
-			--origam-counter---font-size: 13px;
+			--origam-counter---density: 1px;
 		}
 
 		&--density-default {
-			--origam-counter---font-size: 12px;
+			--origam-counter---density: 0px;
 		}
 
 		&--density-compact {
-			--origam-counter---font-size: 11px;
+			--origam-counter---density: -1px;
+		}
+
+		&--active {
+			color: var(--origam-counter---color-active);
+			opacity: var(--origam-counter---opacity-active);
+		}
+
+		&--error {
+			color: var(--origam-counter---color-error);
 		}
 	}
 </style>