origam 2.14.0 → 2.15.0

package/CHANGELOG.md

@@ -13,6 +13,207 @@ This project follows [Semantic Versioning](https://semver.org).
 
 ## [Unreleased]
 
+## [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
+line. Neither is caused by that work — they predate it and affect this 2.x
+line, so they are shipped here rather than held back for a major.
+
+### Fixed
+
+- **A theme default could be silently ignored.** `usePassedProps` counted a key
+  present in `vnode.props` with the value `undefined` as "passed". Vue does not
+  drop a dynamically-bound key just because its current value is `undefined`, so
+  the most ordinary consumer pattern — `:bg-color="state.bgColor"` — reported
+  the prop as declared while it was empty, and the theme default was skipped.
+
+  The symptom was a component that appeared not to follow its theme, with
+  nothing logged and no error. Requiring a non-`undefined` value brings this in
+  line with Vue's own `withDefaults()`, where an `undefined` prop falls back to
+  its default.
+
+- **`color-mix()` was not recognised as a CSS colour.** `isCssColor` matched
+  `color(...)` (Color Level 4) but not `color-mix(...)`, which is a full
+  `<color>` function and one the design system uses itself. Values passed that
+  way fell through silently. Purely additive — no caller could have depended on
+  a `color-mix(...)` string being dropped. `useElevation` already listed
+  `color-mix` in its equivalent detector; this brings `isCssColor` in line.
+
+### Notes for consumers
+
+No API change, no visual change by default. If a component of yours looked like
+it was ignoring a theme default while you bound a possibly-`undefined` value to
+one of its props, that is the first fix above.
+
 ## [2.14.0] - 2026-08-07
 
 Reported from a real integration, not from a code review. Each item was
@@ -178,8 +379,13 @@ Nuxt advisories published during this release cycle are cleared too:
 (server-side RCE via Runtime, unauthenticated OOM crash, CPU exhaustion
 while parsing). `nuxt` moves to `^4.5.1` and `typeorm` to `^0.3.31`,
 staying on the `0.3.x` line — the fix landed there, and `1.x` is a
-breaking change. `pnpm audit --prod` now reports **no known
-vulnerabilities**.
+breaking change. Every advisory listed above is cleared as of this release.
+
+Advisories are a moving target, so this is stated as of a date rather than as
+a standing guarantee: on 2026-08-11, `pnpm audit --prod` surfaced three new
+`high` advisories unrelated to the ones above (`image-size` ICNS and JXL/HEIF
+parsers, `nanoid` custom generators). They arrived after this release and are
+tracked separately — run `pnpm audit --prod` yourself for the current state.
 
 Scope note for consumers: the published `origam` package depends only on
 `@mdi/font` and `qrcode-generator`, with `shiki` / `vue` / `vue-i18n` /

package/README.md

@@ -5,7 +5,7 @@ and TypeScript types.
 
 > 📖 **Full documentation & interactive theme builder:**
 > [https://origam.dev](https://origam.dev) *(coming soon)* ·
-> [GitHub repository](https://github.com/arnaudprioul/origam)
+> [GitHub repository](https://github.com/Elyseranet/origam)
 
 ## Installation
 
@@ -75,9 +75,9 @@ Token stylesheets are exposed as dedicated entries: `origam/styles`
 ## Links
 
 - [Documentation & theme builder](https://origam.dev) *(coming soon)*
-- [Changelog](https://github.com/arnaudprioul/origam/blob/main/CHANGELOG.md)
-- [Issues](https://github.com/arnaudprioul/origam/issues)
+- [Changelog](https://github.com/Elyseranet/origam/blob/main/CHANGELOG.md)
+- [Issues](https://github.com/Elyseranet/origam/issues)
 
 ## License
 
-[MIT](https://github.com/arnaudprioul/origam/blob/main/LICENSE) © Prioul Arnaud
+[MIT](https://github.com/Elyseranet/origam/blob/main/LICENSE) © Prioul Arnaud

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

@@ -207,6 +207,7 @@ const _props = defineProps({
 });
 const props = useDefaults(_props);
 const emits = defineEmits(["update:modelValue", "click:close", "update:hover"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const { t } = useLocale();
 const { typographyStyles } = useTypography(props, "alert__title");

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

@@ -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 },
@@ -343,6 +343,7 @@ const props = defineProps({
   letterSpacing: { type: String, 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

@@ -116,6 +116,7 @@ const _props = defineProps({
 });
 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,
@@ -124,8 +147,14 @@ const props = defineProps({
   fontSize: { type: String, required: false },
   fontWeight: { type: String, required: false },
   lineHeight: { type: String, required: false },
-  letterSpacing: { type: String, required: false }
+  letterSpacing: { type: String, 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

@@ -112,6 +112,7 @@ const props = defineProps({
   lineHeight: { type: String, required: false },
   letterSpacing: { type: String, required: false }
 });
+defineSlots();
 const slots = useSlots();
 const resolvedLang = ref("en");
 const lookupLangFromDOM = () => {

package/dist/src/components/BottomNav/OrigamBottomNav.vue

@@ -128,6 +128,7 @@ const props = defineProps({
   transition: { type: [Boolean, String, Object], required: false, default: () => ({ component: OrigamTranslateBottom }) }
 });
 defineEmits(["update:modelValue", "update:active", "update:hover"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const { t } = useLocale();
 const colorLocked = computed(() => props.color ? "true" : void 0);

package/dist/src/components/Bracket/OrigamBracket.vue

@@ -329,6 +329,7 @@ const props = defineProps({
   letterSpacing: { type: String, required: false }
 });
 const emit = defineEmits(["match-click", "winner-click", "competitor-click"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const resolvedId = computed(() => props.id ?? "origam-bracket");
 const ariaLabel = "Tournament bracket";

package/dist/src/components/Bracket/OrigamBracketMatch.vue

@@ -94,6 +94,7 @@ import OrigamBracketCompetitor from "./OrigamBracketCompetitor.vue";
 import OrigamDivider from "../Divider/OrigamDivider.vue";
 import { useActive, useDensity, useDimension, useHover, useMargin, usePadding, useProps } from "../../composables";
 import { bracketSurfaceVars, resolveBracketForeground } from "../../utils/Bracket/bracket-surface.util";
+import { BRACKET_MATCH_STATUS } from "../../enums";
 const props = defineProps({
   match: { type: Object, required: true },
   status: { type: null, required: false },
@@ -153,6 +154,7 @@ const props = defineProps({
   marginInline: { type: [Boolean, Number, String], required: false }
 });
 const emit = defineEmits(["click", "competitor-click", "winner-click"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const resolvedStatus = computed(() => props.status ?? props.match.status);
 const STATUS_LABELS = {
@@ -192,8 +194,8 @@ const isLoserB = computed(() => {
   if (!props.match.competitorB) return false;
   return props.match.competitorB.id !== props.match.winnerId;
 });
-const isForfeitA = computed(() => resolvedStatus.value === "forfeited" && isLoserA.value);
-const isForfeitB = computed(() => resolvedStatus.value === "forfeited" && isLoserB.value);
+const isForfeitA = computed(() => resolvedStatus.value === BRACKET_MATCH_STATUS.FORFEITED && isLoserA.value);
+const isForfeitB = computed(() => resolvedStatus.value === BRACKET_MATCH_STATUS.FORFEITED && isLoserB.value);
 const advantageFor = (competitor) => {
   const advantage = props.match.advantage;
   if (!advantage || !competitor) return void 0;
@@ -223,7 +225,7 @@ const handleCompetitorClick = (event, competitor, side) => {
 const matchRef = ref(null);
 const { hoverClasses, isHover, hoverState, onMouseenter, onMouseleave } = useHover(props);
 const { activeClasses, isActive, activeState, onActive } = useActive(props);
-const isLive = computed(() => resolvedStatus.value === "live");
+const isLive = computed(() => resolvedStatus.value === BRACKET_MATCH_STATUS.LIVE);
 const isActiveOrLive = computed(() => isActive.value || isLive.value);
 const surfaceInput = computed(() => {
   if (isHover.value && hoverState.value) return { ...props, ...hoverState.value };

package/dist/src/components/Bracket/OrigamBracketRound.vue

@@ -63,7 +63,7 @@ const props = defineProps({
   showScores: { type: Boolean, required: false, default: true },
   showSeed: { type: Boolean, required: false, default: false },
   interactive: { type: Boolean, required: false, default: true },
-  color: { type: String, required: false, default: "primary" },
+  color: { type: null, required: false, default: "primary" },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
@@ -76,6 +76,7 @@ const props = defineProps({
   letterSpacing: { type: String, required: false }
 });
 const emit = defineEmits(["match-click", "competitor-click", "winner-click"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const { typographyStyles } = useTypography(props, "bracket-round-title");
 const resolvedId = computed(() => props.id ?? `origam-bracket-round-${props.round.id}`);

package/dist/src/components/Breadcrumb/OrigamBreadcrumb.vue

@@ -112,6 +112,7 @@ const props = defineProps({
   activeClass: { type: String, required: false }
 });
 const { filterProps } = useProps(props);
+defineSlots();
 const { t } = useLocale();
 const slotDefaults = computed(() => ({
   "origam-breadcrumb-item": {

package/dist/src/components/Breadcrumb/OrigamBreadcrumbDivider.vue

@@ -48,6 +48,7 @@ const props = defineProps({
   size: { type: null, required: false }
 });
 const { filterProps } = useProps(props);
+defineSlots();
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const isIcon = computed(() => {
   return typeof props.divider !== "string" || Object.values(MDI_ICONS).includes(props.divider);

package/dist/src/components/Breadcrumb/OrigamBreadcrumbItem.vue

@@ -134,6 +134,7 @@ const _props = defineProps({
 });
 const props = useDefaults(_props);
 defineEmits(["click:append", "click:prepend"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const attrs = useAttrs();
 const link = useLink(props, attrs);

package/dist/src/components/Btn/OrigamBtn.vue

@@ -239,6 +239,7 @@ const _props = defineProps({
 const props = useDefaults(_props);
 const colorLocked = computed(() => props.color ? "true" : void 0);
 defineEmits(["click:append", "click:prepend", "group:selected"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const origamProgressRef = ref();
 const group = useGroupItem(props, ORIGAM_BTN_TOGGLE_KEY, false);

package/dist/src/components/Btn/OrigamBtnGroup.vue

@@ -91,6 +91,7 @@ const _props = defineProps({
 });
 const props = useDefaults(_props);
 const { filterProps } = useProps(props);
+defineSlots();
 const wasPropPassed = usePassedProps(props);
 const slotDefaults = computed(() => ({
   "origam-btn": omitUndefined({

package/dist/src/components/Btn/OrigamBtnToggle.vue

@@ -95,6 +95,7 @@ const _props = defineProps({
 });
 const props = useDefaults(_props);
 defineEmits(["update:modelValue"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const { isSelected, next, prev, select, selected } = useGroup(props, ORIGAM_BTN_TOGGLE_KEY);
 const slots = useSlots();

package/dist/src/components/Calendar/OrigamCalendar.vue

@@ -440,6 +440,7 @@ const props = defineProps({
   marginInline: { type: [Boolean, Number, String], required: false }
 });
 const emit = defineEmits(["update:view", "update:currentDate", "event-click", "date-click", "range-select", "create-event-request", "view-change", "navigate"]);
+defineSlots();
 const VIEW = {
   MONTH: "month",
   WEEK: "week",

package/dist/src/components/Card/OrigamCard.vue

@@ -239,6 +239,7 @@ const _props = defineProps({
 });
 const props = useDefaults(_props);
 defineEmits(["click:append", "click:prepend", "update:active", "update:hover"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const attrs = useAttrs();
 const link = useLink(props, attrs);

package/dist/src/components/Card/OrigamCardHeader.vue

@@ -152,6 +152,7 @@ const props = defineProps({
   letterSpacing: { type: String, required: false }
 });
 defineEmits(["click:append", "click:prepend"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const slots = useSlots();
 const { densityClasses } = useDensity(props);