origam 2.14.1 → 2.16.0

package/CHANGELOG.md

@@ -13,6 +13,239 @@ This project follows [Semantic Versioning](https://semver.org).
 
 ## [Unreleased]
 
+## [2.16.0] - 2026-08-19
+
+A release about **things that were declared but did nothing**. Seven
+components emitted events they never declared; one prop had been inert since
+it shipped; another prop had no reason to exist at all. None of it was
+visible — that is precisely why it lasted.
+
+### Fixed
+
+- **Seven components emitted `update:*` without declaring it.** `OrigamForm`,
+  `OrigamSheet`, `OrigamBracketCompetitor`, `OrigamBracketMatch`,
+  `OrigamDialogConfirmation`, `OrigamRadioGroup` and `OrigamSnackbar` write
+  through a `useVModel` held by a composable they hand their `props` to — so
+  the emit exists without any `emit(...)` appearing in the component. Vue
+  warned on every mount, and the `onUpdate:*` handler stayed in `$attrs`,
+  where `inheritAttrs` pinned it onto the root element instead of wiring it
+  as an event. `v-model` on these components now behaves as documented, with
+  no console noise.
+
+- **`density` did nothing on `OrigamCounter`.** `ICounterProps` has extended
+  `IDensityProps` since it shipped, but the component never called
+  `useDensity` — the story even exposed a control for it. The three density
+  classes are now emitted.
+
+  ⚠️ Known limitation, tracked in
+  [#356](https://github.com/Elyseranet/origam/issues/356): the counter's font
+  size does not currently respond to **any** channel — not a prop, not a
+  token, not a theme, not even an inline style. The class is emitted and the
+  SCSS rule matches; the rendered size does not follow, and the cause is not
+  yet identified. The prop→class link is proven; the visual effect is not
+  claimed.
+
+### Removed
+
+- **`disabled` is gone from the whole `Icon` family** — `OrigamIcon`,
+  `OrigamClassIcon`, `OrigamComponentIcon`, `OrigamLigatureIcon`,
+  `OrigamSvgIcon`.
+
+  **Migration: delete it, nothing else changes.** None of the five components
+  ever read it — no class, no attribute, no style — so `<origam-icon
+  disabled>` was already a no-op. Your rendering is identical before and
+  after; only the TypeScript signature narrows, so a stale `disabled` now
+  raises a compile error instead of failing silently.
+
+  An icon renders a glyph; it does not respond to input. Paint the disabled
+  state on the control that **owns** the icon — the button, the field, the
+  list item — and the icon inherits its opacity and cursor. That is also what
+  keeps one control from showing two divergent disabled treatments.
+
+### Tooling
+
+- **New architecture guard: `emits-completeness`.** Any reachable `update:*`
+  must be declared. Precision measured at 5/5 with zero false positives —
+  every baselined entry was mounted and made to emit. What makes it work is
+  the *reachability* filter (is `onActive` actually destructured? is the
+  `useVModel` ref written or bound to a `v-model`?), not relay detection: a
+  guard without it would push you to declare emits "just in case", which
+  changes `$attrs` behaviour rather than being neutral hygiene.
+
+  Five real defects are recorded in its baseline and deliberately **not**
+  fixed in this release — `OrigamDrawer`, `OrigamColorPickerField`,
+  `OrigamDatePickerField`, `OrigamContextualMenu`, `OrigamSelect`. Tracked in
+  [#358](https://github.com/Elyseranet/origam/issues/358).
+
+## [2.15.0] - 2026-08-14
+
+A structural release. Most of it is invisible at runtime — public typing
+surface that was missing, and internal files moved to where you would expect
+to find them. The visible part is four bugs, one of which had been inert
+since the component shipped.
+
+### Added
+
+- **Every component now exposes its instance type.** `TOrigamXxx =
+  InstanceType<typeof OrigamXxx>` is what you need to type a template ref
+  (`const btnRef = ref<TOrigamBtn>()`). Before this release 63 components had
+  none, so you fell back to `any` or rebuilt the type by hand. All 217 have
+  one now.
+
+- **Emit and slot interfaces.** 129 components rendered a `<slot>` without a
+  `defineSlots<IXxxSlots>()`, so the slot scope was untyped and you wrote
+  those templates blind. Six more declared emits with an inline type instead
+  of a named `IXxxEmits`. Both are now consistent across the catalogue, with
+  the scope actually typed — `OrigamVirtualScroll` needed four distinct scope
+  interfaces because its indexed slot and its fallback slot genuinely do not
+  expose the same data.
+
+- **`INTENT` enum** (`enums/Commons/intent.enum.ts`). The most-used vocabulary
+  of the design system — `neutral | primary | secondary | ghost | success |
+  warning | danger | info` — had no enum. It lived in three parallel places,
+  one of which was a runtime `Set` carrying a comment asking you to keep it in
+  sync by hand. `TIntent` now derives from the enum; the type is character-
+  for-character identical, only its source changed.
+
+### Fixed
+
+- **`borderBlock` and `borderInline` did nothing.** Declared on
+  `IBorderProps`, never consumed. Passing them produced no border and no
+  warning. The fix turned out to have two floors: `useBorder` ignored them,
+  and beneath it `useStateEffect` — the path ~32 components take — rebuilt
+  its props through a hardcoded getter list that never learned about them. So
+  fixing `useBorder` alone would still have left those components inert.
+
+- **`OrigamBadge` dropped its prepend and append content.** The interface
+  inherited `IAdjacentProps` but the component never consumed `useAdjacent`,
+  reimplementing the detection by hand. A `#prepend` slot passed without an
+  icon prop never rendered at all, and no click was ever emitted.
+
+- **`<origam-parallax event="orientation">` never moved.** The guard for the
+  orientation branch tested `props.event === 'move'` — a condition that
+  cannot hold inside a branch only reached when the event is `orientation`.
+  The listener was registered and did fire; the movement was simply never
+  applied. Present since the component's first implementation (2025-07-18),
+  and just as inert on a real device with a real sensor as in a test.
+
+- **`useSnackbarGroup` ignored a story-level default.** Unrelated to consumer
+  code — see *Known issues* below for the remaining half of that one.
+
+### Changed — internal file layout
+
+Enum, type and const files are now named after the **component** that owns
+them, one file per component, with the concept living in the symbol name
+rather than the filename. `tabs-variant.enum.ts` became `tab.enum.ts`;
+`chart-honeycomb-color-mode.enum.ts` and
+`chart-honeycomb-orientation.enum.ts` merged into `chart-honeycomb.enum.ts`.
+The intent is that finding a component's surface means opening one file, not
+hunting several differently-suffixed ones. A CI guard now enforces it.
+
+Ownership was decided by reading which component actually consumes each
+symbol, not by the filename. Two cases were counter-intuitive: the `Mask/`
+files belong to `OrigamTextField` (input masking) and not to `OrigamTextMask`
+(a text-rendering component that consumes none of them); and the toolbar
+enums belong to `OrigamRichToolbar`, a component in its own right — there is
+no `OrigamTextarea`.
+
+Several transverse symbols moved to `Commons/` — `mdi`, and the duplicated
+`horizontal | vertical` declarations that had accumulated under eight
+different names. Where a component-specific name was worth keeping, it now
+derives from the Commons one (`TStepperOrientation = TDirection`) rather than
+redeclaring the same values.
+
+### Deep import paths are not a supported API
+
+`package.json` exposes a `"./*"` wildcard, so `origam/enums/Audio/audio-variant.enum`
+resolved in 2.14.1. **74 such paths no longer exist** after the reorganisation
+above (48 types, 15 enums, 11 consts).
+
+If you import from `origam` — the path documented everywhere — nothing
+changes. If you import a deep path into a source file, it may break. Those
+paths are internal structure, not API, and they will keep moving.
+
+**`"./*"` will be removed from the exports map in 3.0.0**, which turns
+today's ambiguity into an explicit contract. The declared entry points
+(`origam`, `origam/styles`, `origam/tokens/*`, `origam/nuxt`,
+`origam/components`, `origam/composables`, …) are unaffected.
+
+The 41 renames git could track:
+
+| Before | After |
+|---|---|
+| `origam/consts/Chart/pictorial-icons.const` | `origam/consts/Chart/chart-pictorial.const` |
+| `origam/consts/Chart/world-geographic.const` | `origam/consts/Chart/chart-map.const` |
+| `origam/consts/Icon/mdi.const` | `origam/consts/Commons/mdi.const` |
+| `origam/consts/Parallax/parallax-container.const` | `origam/consts/Parallax/parallax.const` |
+| `origam/consts/Sheet/sheet-snap-points.const` | `origam/consts/Sheet/sheet.const` |
+| `origam/consts/Textarea/textarea.const` | `origam/consts/TextareaField/textarea-field.const` |
+| `origam/enums/Blockquote/blockquote-variant.enum` | `origam/enums/Blockquote/blockquote.enum` |
+| `origam/enums/Bracket/bracket-match-status.enum` | `origam/enums/Bracket/bracket-match.enum` |
+| `origam/enums/Bracket/bracket-variant.enum` | `origam/enums/Bracket/bracket.enum` |
+| `origam/enums/Chart/chart-cartesian-kind.enum` | `origam/enums/Chart/chart-cartesian.enum` |
+| `origam/enums/Chart/chart-honeycomb-orientation.enum` | `origam/enums/Chart/chart-honeycomb.enum` |
+| `origam/enums/Chart/chart-map-mode.enum` | `origam/enums/Chart/chart-map.enum` |
+| `origam/enums/Chart/chart-pictorial-mode.enum` | `origam/enums/Chart/chart-pictorial.enum` |
+| `origam/enums/Chart/chart-polar-kind.enum` | `origam/enums/Chart/chart-polar.enum` |
+| `origam/enums/Chart/chart-pyramid-kind.enum` | `origam/enums/Chart/chart-pyramid.enum` |
+| `origam/enums/Chart/chart-sparkline-kind.enum` | `origam/enums/Chart/chart-sparkline.enum` |
+| `origam/enums/Chart/chart-streamgraph-offset.enum` | `origam/enums/Chart/chart-streamgraph.enum` |
+| `origam/enums/Chart/chart-treemap-algorithm.enum` | `origam/enums/Chart/chart-treemap.enum` |
+| `origam/enums/Chart/chart-word-cloud-rotation.enum` | `origam/enums/Chart/chart-word-cloud.enum` |
+| `origam/enums/Code/code-lang.enum` | `origam/enums/Code/code.enum` |
+| `origam/enums/EmptyState/empty-state-preset.enum` | `origam/enums/EmptyState/empty-state.enum` |
+| `origam/enums/Icon/mdi.enum` | `origam/enums/Commons/mdi.enum` |
+| `origam/enums/InlineEdit/inline-edit-action.enum` | `origam/enums/InlineEdit/inline-edit.enum` |
+| `origam/enums/SliderField/slider-field-variant.enum` | `origam/enums/SliderField/slider-field.enum` |
+| `origam/enums/Tabs/tab-variant.enum` | `origam/enums/Tabs/tab.enum` |
+| `origam/enums/Textarea/textarea-output.enum` | `origam/enums/TextareaField/textarea-field.enum` |
+| `origam/enums/Textarea/textarea-toolbar-command.enum` | `origam/enums/RichToolbar/rich-toolbar.enum` |
+| `origam/types/Bracket/bracket-round-side.type` | `origam/types/Bracket/bracket-round.type` |
+| `origam/types/Chart/chart-cartesian-kind.type` | `origam/types/Chart/chart-cartesian.type` |
+| `origam/types/Chart/chart-legend-position.type` | `origam/types/Chart/chart-legend.type` |
+| `origam/types/Chart/chart-map-mode.type` | `origam/types/Chart/chart-map.type` |
+| `origam/types/Chart/chart-polar-kind.type` | `origam/types/Chart/chart-polar.type` |
+| `origam/types/Chart/chart-pyramid-kind.type` | `origam/types/Chart/chart-pyramid.type` |
+| `origam/types/Chart/chart-sparkline-kind.type` | `origam/types/Chart/chart-sparkline.type` |
+| `origam/types/Chart/chart-treemap-algorithm.type` | `origam/types/Chart/chart-treemap.type` |
+| `origam/types/CommandPalette/command-palette-hotkey.type` | `origam/types/CommandPalette/command-palette.type` |
+| `origam/types/Grid/grid-align.type` | `origam/types/Grid/grid.type` |
+| `origam/types/InlineEdit/inline-edit-input-type.type` | `origam/types/InlineEdit/inline-edit.type` |
+| `origam/types/Masonry/masonry-align.type` | `origam/types/Masonry/masonry.type` |
+| `origam/types/NumberFormat/number-format-format.type` | `origam/types/NumberFormat/number-format.type` |
+| `origam/types/QrCode/qr-code-error-correction.type` | `origam/types/QrCode/qr-code.type` |
+
+The remaining 33 were merged into an existing file rather than renamed; the
+symbols kept their names and are all still exported from `origam`.
+
+### Known issues
+
+Found while repairing the test suite, documented rather than rushed into this
+release:
+
+- **Theme-level component defaults reach only part of the catalogue.** The
+  `components` block of a theme is delivered through `useDefaults()`, which a
+  component must opt into — 173 of 217 do not, so setting a prop there does
+  nothing for them, silently. On top of that, a component that does opt in
+  reads the merged value in its script but the template sees the raw props,
+  so `<origam-selection-control>` inside its group renders an `<input>`
+  without a `type` attribute and never emits. Both are being addressed
+  together; the 2.14.1 fix to `usePassedProps` was a third failure of the same
+  path.
+
+- **`defaultDuration` on `<origam-snackbar-group>` is decorative.** Declared,
+  defaulted, never read — `notify()` always uses the built-in 5 000 ms.
+
+- **`<origam-snackbar-item>` never renders its prepend area,** including a
+  custom `#prepend` slot. `icon` is typed `TIcon | false` with no explicit
+  default, so Vue resolves an unpassed prop to `false` rather than
+  `undefined`, and the template hides the whole area.
+
+- **Transitions ignore `group` when it changes after mount.** The tag is a
+  flat `shallowRef` read once at setup instead of a computed, so
+  `<component :is>` never re-evaluates. Affects the 12 components built on
+  `useCssTransition` / `useWindowTransition`. Setting `group` statically works.
+
 ## [2.14.1] - 2026-08-13
 
 Two fixes, both found while converting variants to props presets on the v3

package/dist/src/components/Alert/OrigamAlert.vue

@@ -1,11 +1,11 @@
 <template>
 	<component
-			:is="props.tag"
+			:is="tag"
 			:id="id"
 			v-contrast
 			:class="alertClasses"
-			:role="status === 'warning' || status === 'error' ? 'alert' : 'status'"
-			:aria-live="status === 'warning' || status === 'error' ? 'assertive' : 'polite'"
+			:role="isUrgentStatus ? 'alert' : 'status'"
+			:aria-live="isUrgentStatus ? 'assertive' : 'polite'"
 			@mouseenter="handleMouseenter"
 			@mouseleave="handleMouseleave"
 	>
@@ -27,14 +27,12 @@
 								key="prepend-avatar"
 								:density="density"
 								:image="prependAvatar"
-								:size="size"
 						/>
 						<origam-icon
 								v-if="prependIcon"
 								key="prepend-icon"
 								:density="density"
 								:icon="prependIcon"
-								:size="size"
 						/>
 					</slot>
 				</div>
@@ -49,7 +47,6 @@
 						<origam-icon
 								key="content-icon"
 								:icon="icon"
-								:size="size"
 						/>
 					</template>
 					<template v-if="hasTitle">
@@ -78,14 +75,12 @@
 								key="append-avatar"
 								:density="density"
 								:image="appendAvatar"
-								:size="size"
 						/>
 						<origam-icon
 								v-if="appendIcon"
 								key="append-icon"
 								:density="density"
 								:icon="appendIcon"
-								:size="size"
 						/>
 					</slot>
 				</div>
@@ -131,7 +126,7 @@ import {
   useStyle,
   useTypography
 } from "../../composables";
-import { DENSITY, MDI_ICONS } from "../../enums";
+import { DENSITY, MDI_ICONS, STATUS } from "../../enums";
 const _props = defineProps({
   closable: { type: Boolean, required: false },
   closeIcon: { type: null, required: false, default: MDI_ICONS.CLOSE },
@@ -199,18 +194,19 @@ const _props = defineProps({
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
-  fontFamily: { type: String, required: false },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false },
-  lineHeight: { type: String, required: false },
-  letterSpacing: { type: String, required: false }
+  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 }
 });
 const props = useDefaults(_props);
 const emits = defineEmits(["update:modelValue", "click:close", "update:hover"]);
+defineSlots();
+const slots = useSlots();
 const { filterProps } = useProps(props);
 const { t } = useLocale();
 const { typographyStyles } = useTypography(props, "alert__title");
-const slots = useSlots();
 const { activeClasses, isActive, activeState, onActive } = useActive(props, "modelValue");
 const { isHover, hoverState, onMouseenter: handleMouseenter, onMouseleave: handleMouseleave, hoverClasses } = useHover(props);
 const { colorClasses, colorStyles, borderClasses, borderStyles, roundedClasses, roundedStyles, elevationClasses, elevationStyles, paddingClasses, paddingStyles, marginClasses, marginStyles } = useStateEffect(props, isHover, isActive, hoverState, activeState);
@@ -225,7 +221,9 @@ const handleClose = (e) => {
   onActive();
   emits("click:close", e);
 };
-const size = 28;
+const isUrgentStatus = computed(() => {
+  return props.status === STATUS.WARNING || props.status === STATUS.ERROR;
+});
 const hasIcon = computed(() => {
   return !!icon.value;
 });

package/dist/src/components/App/OrigamApp.vue

@@ -30,6 +30,7 @@ const _props = defineProps({
 });
 const props = useDefaults(_props);
 const { filterProps } = useProps(props);
+defineSlots();
 const { rtlClasses } = useRtl();
 const origamAppRef = ref();
 const appStyles = computed(() => {

package/dist/src/components/App/OrigamAppBar.vue

@@ -118,11 +118,11 @@ const props = defineProps({
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   hover: { type: [Boolean, Object], required: false },
-  fontFamily: { type: String, required: false },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false },
-  lineHeight: { type: String, required: false },
-  letterSpacing: { type: String, required: false },
+  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 },
   name: { type: String, required: false },
   order: { type: [String, Number], required: false },
   scrollBehavior: { type: null, required: false },
@@ -130,6 +130,7 @@ const props = defineProps({
   scrollThreshold: { type: [String, Number], required: false, default: 300 }
 });
 defineEmits(["update:modelValue"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const { ssrBootStyles } = useSsrBoot();
 const slots = useSlots();

package/dist/src/components/Audio/OrigamAudio.vue

@@ -280,7 +280,7 @@ const props = defineProps({
   currentTrackIndex: { type: Number, required: false, default: 0 },
   preload: { type: String, required: false, default: "metadata" },
   crossorigin: { type: String, required: false, default: void 0 },
-  controls: { type: String, required: false, default: "custom" },
+  controls: { type: null, required: false, default: "custom" },
   playbackRates: { type: Array, required: false, default: () => [0.5, 0.75, 1, 1.25, 1.5, 2] },
   playbackRate: { type: Number, required: false, default: 1 },
   allowRemotePlayback: { type: Boolean, required: false, default: false },
@@ -336,13 +336,14 @@ const props = defineProps({
   right: { type: [Number, String], required: false, default: void 0 },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true, default: void 0 },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true, default: void 0 },
-  fontFamily: { type: String, required: false },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false },
-  lineHeight: { type: String, required: false },
-  letterSpacing: { type: String, required: false }
+  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 }
 });
 const emit = defineEmits(["play", "pause", "ended", "timeupdate", "volumechange", "loadedmetadata", "error", "update:playbackRate", "download", "waveform", "previous", "next", "update:currentTrackIndex", "update:loopMode", "update:shuffle", "track-change"]);
+defineSlots();
 const ICONS = {
   LOADING: MDI_ICONS.LOADING,
   ALERT: MDI_ICONS.ALERT_CIRCLE

package/dist/src/components/Avatar/OrigamAvatar.vue

@@ -108,14 +108,15 @@ const _props = defineProps({
   hover: { type: [Boolean, Object], required: false },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
-  fontFamily: { type: String, required: false },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false },
-  lineHeight: { type: String, required: false },
-  letterSpacing: { type: String, required: false }
+  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 }
 });
 const props = useDefaults(_props);
 defineEmits(["update:active", "update:hover"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const { hoverClasses, isHover, hoverState, onMouseleave: handleMouseleave, onMouseenter: handleMouseenter } = useHover(props);
 const { activeClasses, isActive, activeState, onActive: handleClick } = useActive(props);

package/dist/src/components/Avatar/OrigamAvatarGroup.vue

@@ -120,6 +120,7 @@ const slotDefaults = computed(() => ({
   })
 }));
 defineEmits(["update:active", "update:hover"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const { isRtl } = useRtl();
 const isExpanded = ref(false);

package/dist/src/components/Badge/OrigamBadge.vue

@@ -11,61 +11,84 @@
 			<slot name="default"/>
 
 			<origam-transition :transition="transition">
-        <span
-		        v-show="modelValue"
-		        :id="id"
-		        v-contrast
-		        :aria-label="t(label, content)"
-		        :class="badgeContentClasses"
-		        :style="typographyStyles"
-		        aria-atomic="true"
-		        aria-live="polite"
-		        role="status"
-		        v-bind="badgeAttrs"
-        >
-          <template v-if="!dot">
-            <slot name="badge">
-              <template v-if="hasPrependIcon">
-                <slot name="prepend">
-                  <origam-icon
-                          key="prepend-icon"
-                          class="origam-badge__prepend"
-                          :icon="prependIcon"
-                  />
-                </slot>
-              </template>
-
-              <template v-if="hasIcon">
-                <origam-icon
-                        key="content-icon"
-                        :icon="icon"
-                />
-              </template>
-              <template v-else-if="content !== undefined && content !== null && content !== ''">
-                <span class="origam-badge__content">{{ content }}</span>
-              </template>
-
-              <template v-if="hasAppendIcon">
-                <slot name="append">
-                  <origam-icon
-                          key="append-icon"
-                          class="origam-badge__append"
-                          :icon="appendIcon"
-                  />
-                </slot>
-              </template>
-            </slot>
-          </template>
-        </span>
+				<span
+						v-show="modelValue"
+						:id="id"
+						v-contrast
+						:aria-label="t(label, content)"
+						:class="badgeContentClasses"
+						:style="typographyStyles"
+						aria-atomic="true"
+						aria-live="polite"
+						role="status"
+						v-bind="badgeAttrs"
+				>
+					<template v-if="!dot">
+						<slot name="badge">
+							<template v-if="hasPrepend">
+								<span
+										key="prepend"
+										class="origam-badge__prepend"
+										@click="handleClickPrepend"
+								>
+									<slot name="prepend">
+										<origam-avatar
+												v-if="prependAvatar"
+												key="prepend-avatar"
+												:image="prependAvatar"
+										/>
+										<origam-icon
+												v-if="prependIcon"
+												key="prepend-icon"
+												:icon="prependIcon"
+										/>
+									</slot>
+								</span>
+							</template>
+
+							<template v-if="hasIcon">
+								<origam-icon
+										key="content-icon"
+										:icon="icon"
+								/>
+							</template>
+							<template v-else-if="content !== undefined && content !== null && content !== ''">
+								<span class="origam-badge__content">{{ content }}</span>
+							</template>
+
+							<template v-if="hasAppend">
+								<span
+										key="append"
+										class="origam-badge__append"
+										@click="handleClickAppend"
+								>
+									<slot name="append">
+										<origam-avatar
+												v-if="appendAvatar"
+												key="append-avatar"
+												:image="appendAvatar"
+										/>
+										<origam-icon
+												v-if="appendIcon"
+												key="append-icon"
+												:icon="appendIcon"
+										/>
+									</slot>
+								</span>
+							</template>
+						</slot>
+					</template>
+				</span>
 			</origam-transition>
 		</div>
 	</component>
 </template>
 
 <script lang="ts" setup>
-import { OrigamFade, OrigamIcon, OrigamTransition } from "../../components";
+import { OrigamAvatar, OrigamFade, OrigamIcon, OrigamTransition } from "../../components";
 import {
   useActive,
+  useAdjacent,
   useHover,
   useLocale,
   useLocation,
@@ -120,12 +143,18 @@ const props = defineProps({
   icon: { type: null, required: false },
   hover: { type: [Boolean, Object], required: false },
   elevation: { type: [Number, String], required: false },
-  fontFamily: { type: String, required: false },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false },
-  lineHeight: { type: String, required: false },
-  letterSpacing: { type: String, required: false }
+  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 },
+  appendAvatar: { type: String, required: false },
+  appendIcon: { type: null, required: false },
+  prependAvatar: { type: String, required: false },
+  prependIcon: { type: null, required: false }
 });
+defineEmits(["click:append", "click:prepend"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const { t } = useLocale();
 const attrs = useAttrs();
@@ -134,6 +163,12 @@ const { activeClasses, isActive, activeState } = useActive(props, "modelValue");
 const { colorClasses, colorStyles, borderClasses, borderStyles, roundedClasses, roundedStyles, elevationClasses, elevationStyles } = useStateEffect(props, isHover, isActive, hoverState, activeState);
 const { typographyStyles } = useTypography(props, "badge__badge");
 const { icon, prependIcon, appendIcon, statusClasses } = useStatus(props);
+const {
+  onClickPrepend: handleClickPrepend,
+  onClickAppend: handleClickAppend,
+  hasAppend,
+  hasPrepend
+} = useAdjacent(props, prependIcon, appendIcon);
 const { locationStyles } = useLocation(props, true, (side) => {
   const base = props.floating ? props.dot ? 2 : 4 : props.dot ? 8 : 12;
   return base + (["top", "bottom"].includes(side) ? +(props.offsetY ?? 0) : ["left", "right"].includes(side) ? +(props.offsetX ?? 0) : 0);
@@ -141,12 +176,6 @@ const { locationStyles } = useLocation(props, true, (side) => {
 const hasIcon = computed(() => {
   return !!icon.value;
 });
-const hasPrependIcon = computed(() => {
-  return !!prependIcon.value;
-});
-const hasAppendIcon = computed(() => {
-  return !!appendIcon.value;
-});
 const content = computed(() => {
   const value = Number(props.content);
   if (!props.max || isNaN(value)) {

package/dist/src/components/Blockquote/OrigamBlockquote.vue

@@ -60,12 +60,12 @@ import {
 import { QUOTE_MARKS_BY_LANG } from "../../consts/Blockquote/blockquote.const";
 import { isIntent, warnDeprecatedProp } from "../../utils";
 const props = defineProps({
-  variant: { type: String, required: false, default: "default" },
+  variant: { type: null, required: false, default: "default" },
   author: { type: String, required: false },
   source: { type: String, required: false },
   cite: { type: String, required: false },
-  lang: { type: String, required: false, default: "auto" },
-  align: { type: String, required: false },
+  lang: { type: null, required: false, default: "auto" },
+  align: { type: null, required: false },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
@@ -106,12 +106,13 @@ const props = defineProps({
   marginRight: { type: [Boolean, Number, String], required: false },
   marginBlock: { type: [Boolean, Number, String], required: false },
   marginInline: { type: [Boolean, Number, String], required: false },
-  fontFamily: { type: String, required: false },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false },
-  lineHeight: { type: String, required: false },
-  letterSpacing: { type: String, required: false }
+  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 }
 });
+defineSlots();
 const slots = useSlots();
 const resolvedLang = ref("en");
 const lookupLangFromDOM = () => {