origam 2.14.1 → 2.16.0

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

@@ -52,6 +52,7 @@ import {
   useHover,
   useLayoutItem,
   useLocale,
+  usePassedProps,
   useProps,
   useSsrBoot,
   useStateEffect,
@@ -59,7 +60,7 @@ import {
 } from "../../composables";
 import { ORIGAM_BTN_TOGGLE_KEY } from "../../consts";
 import { MODE } from "../../enums";
-import { convertToUnit, int } from "../../utils";
+import { convertToUnit, int, omitUndefined } from "../../utils";
 import { computed, ref, StyleValue, toRef } from "vue";
 const props = defineProps({
   grow: { type: Boolean, required: false },
@@ -128,21 +129,23 @@ 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);
+const wasPropPassed = usePassedProps(props);
 const slotDefaults = computed(() => ({
-  "origam-btn": {
-    density: props.density,
-    color: props.color,
-    bgColor: props.bgColor,
+  "origam-btn": omitUndefined({
+    density: wasPropPassed("density") ? props.density : void 0,
+    color: wasPropPassed("color") ? props.color : void 0,
+    bgColor: wasPropPassed("bgColor") ? props.bgColor : void 0,
     // New API: forward `hover` / `active` (boolean | object)
     // to each child OrigamBtn; the legacy split `hoverColor` /
     // `hoverBgColor` / `activeColor` / `activeBgColor` props no
     // longer exist on the parent or the children.
-    hover: props.hover,
-    active: props.active
-  }
+    hover: wasPropPassed("hover") ? props.hover : void 0,
+    active: wasPropPassed("active") ? props.active : void 0
+  })
 }));
 const { isActive, activeClasses } = useActive(props, "modelValue");
 const { hoverClasses, onMouseenter: handleMouseenter, onMouseleave: handleMouseleave } = useHover(props);

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

@@ -258,7 +258,7 @@ import {
   BRACKET_DEFAULT_MATCH_WIDTH,
   BRACKET_DEFAULT_ROUND_GAP
 } from "../../consts";
-import { BRACKET_VARIANT, DIRECTION } from "../../enums";
+import { BRACKET_ROUND_SIDE, BRACKET_VARIANT, DIRECTION } from "../../enums";
 import {
   bracketDashArray,
   bracketSurfaceVars,
@@ -322,27 +322,28 @@ const props = defineProps({
   paddingRight: { type: [Boolean, Number, String], required: false },
   paddingBlock: { type: [Boolean, Number, String], required: false },
   paddingInline: { 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 }
 });
 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";
 const roundColor = computed(() => props.color);
 const displayRounds = computed(() => {
   if (props.variant !== BRACKET_VARIANT.DOUBLE_ELIMINATION) return props.rounds;
-  const winners = props.rounds.filter((r) => r.side === "winner" || r.side === void 0);
-  const losers = props.rounds.filter((r) => r.side === "loser");
-  const grandFinals = props.rounds.filter((r) => r.side === "grand-final");
+  const winners = props.rounds.filter((r) => r.side === BRACKET_ROUND_SIDE.WINNER || r.side === void 0);
+  const losers = props.rounds.filter((r) => r.side === BRACKET_ROUND_SIDE.LOSER);
+  const grandFinals = props.rounds.filter((r) => r.side === BRACKET_ROUND_SIDE.GRAND_FINAL);
   return [...winners, ...losers, ...grandFinals];
 });
-const winnerRounds = computed(() => props.rounds.filter((r) => r.side === "winner" || r.side === void 0));
-const loserRounds = computed(() => props.rounds.filter((r) => r.side === "loser"));
-const grandFinalRounds = computed(() => props.rounds.filter((r) => r.side === "grand-final"));
+const winnerRounds = computed(() => props.rounds.filter((r) => r.side === BRACKET_ROUND_SIDE.WINNER || r.side === void 0));
+const loserRounds = computed(() => props.rounds.filter((r) => r.side === BRACKET_ROUND_SIDE.LOSER));
+const grandFinalRounds = computed(() => props.rounds.filter((r) => r.side === BRACKET_ROUND_SIDE.GRAND_FINAL));
 const doubleSections = computed(() => {
   const all = [
     { key: "winners", label: props.winnersLabel ?? "", rounds: winnerRounds.value },
@@ -732,10 +733,6 @@ defineExpose({
 			display: flex;
 			position: relative;
 			gap: var(--origam-bracket---round-gap, 48px);
-			/* Pin to natural size — otherwise a wider parent stretches
-			 * the tree, the connectors SVG stretches with it (via
-			 * preserveAspectRatio="none"), but the round columns keep
-			 * their fixed width → connectors land outside the cards. */
 			width: max-content;
 
 			&--direction-horizontal {

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

@@ -129,13 +129,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 }
 });
-const emit = defineEmits(["click"]);
+const emit = defineEmits(["click", "update:active"]);
 const { filterProps } = useProps(props);
 const { typographyStyles: competitorTypographyStyles } = useTypography(props, "bracket-competitor");
 const { typographyStyles: seedTypographyStyles } = useTypography(props, "bracket-seed");

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 },
@@ -152,14 +153,15 @@ const props = defineProps({
   marginBlock: { type: [Boolean, Number, String], required: false },
   marginInline: { type: [Boolean, Number, String], required: false }
 });
-const emit = defineEmits(["click", "competitor-click", "winner-click"]);
+const emit = defineEmits(["click", "competitor-click", "winner-click", "update:active"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const resolvedStatus = computed(() => props.status ?? props.match.status);
 const STATUS_LABELS = {
-  pending: "TBD",
-  live: "LIVE",
-  completed: "Completed",
-  forfeited: "Forfeit"
+  [BRACKET_MATCH_STATUS.PENDING]: "TBD",
+  [BRACKET_MATCH_STATUS.LIVE]: "LIVE",
+  [BRACKET_MATCH_STATUS.COMPLETED]: "Completed",
+  [BRACKET_MATCH_STATUS.FORFEITED]: "Forfeit"
 };
 const statusLabel = computed(() => {
   if (!resolvedStatus.value) return "";
@@ -169,7 +171,7 @@ const watchLabel = "Watch live";
 const statusClasses = computed(() => {
   return [
     "origam-bracket-match__status",
-    `origam-bracket-match__status--${resolvedStatus.value ?? "pending"}`
+    `origam-bracket-match__status--${resolvedStatus.value ?? BRACKET_MATCH_STATUS.PENDING}`
   ];
 });
 const isWinnerA = computed(() => {
@@ -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 };
@@ -308,6 +310,24 @@ defineExpose({
 		border-style: var(--origam-bracket-match---border-style, solid);
 		border-color: var(--origam-bracket-match---border-color, var(--origam-color__border---subtle, rgba(0, 0, 0, 0.12)));
 		border-radius: var(--origam-bracket-match---border-radius, 6px);
+
+		border-block-width: var(--origam-bracket-match---border-block-width, var(--origam-bracket-match---border-width, 1px));
+		border-inline-width: var(--origam-bracket-match---border-inline-width, var(--origam-bracket-match---border-width, 1px));
+
+		border-top-width: var(--origam-bracket-match---border-top-width, var(--origam-bracket-match---border-block-width, var(--origam-bracket-match---border-width, 1px)));
+		border-right-width: var(--origam-bracket-match---border-right-width, var(--origam-bracket-match---border-inline-width, var(--origam-bracket-match---border-width, 1px)));
+		border-bottom-width: var(--origam-bracket-match---border-bottom-width, var(--origam-bracket-match---border-block-width, var(--origam-bracket-match---border-width, 1px)));
+		border-left-width: var(--origam-bracket-match---border-left-width, var(--origam-bracket-match---border-inline-width, var(--origam-bracket-match---border-width, 1px)));
+
+		border-top-color: var(--origam-bracket-match---border-top-color, var(--origam-bracket-match---border-color, var(--origam-color__border---subtle, rgba(0, 0, 0, 0.12))));
+		border-right-color: var(--origam-bracket-match---border-right-color, var(--origam-bracket-match---border-color, var(--origam-color__border---subtle, rgba(0, 0, 0, 0.12))));
+		border-bottom-color: var(--origam-bracket-match---border-bottom-color, var(--origam-bracket-match---border-color, var(--origam-color__border---subtle, rgba(0, 0, 0, 0.12))));
+		border-left-color: var(--origam-bracket-match---border-left-color, var(--origam-bracket-match---border-color, var(--origam-color__border---subtle, rgba(0, 0, 0, 0.12))));
+
+		border-top-left-radius: var(--origam-bracket-match---border-top-left-radius, var(--origam-bracket-match---border-radius, 6px));
+		border-top-right-radius: var(--origam-bracket-match---border-top-right-radius, var(--origam-bracket-match---border-radius, 6px));
+		border-bottom-left-radius: var(--origam-bracket-match---border-bottom-left-radius, var(--origam-bracket-match---border-radius, 6px));
+		border-bottom-right-radius: var(--origam-bracket-match---border-bottom-right-radius, var(--origam-bracket-match---border-radius, 6px));
 		box-shadow: var(--origam-bracket-match---box-shadow, 0 1px 2px rgba(0, 0, 0, 0.06));
 		overflow: hidden;
 		transition: background-color var(--origam-bracket-match---transition-duration, 120ms) ease,

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

@@ -63,19 +63,20 @@ 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 },
   tag: { type: String, required: false, default: "div" },
   direction: { type: null, required: false, default: DIRECTION.HORIZONTAL },
-  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(["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

@@ -56,11 +56,13 @@ import { OrigamBreadcrumbDivider, OrigamBreadcrumbItem, OrigamDefaultsProvider }
 import {
   useDensity,
   useLocale,
+  usePassedProps,
   useProps,
   useStateEffect,
   useStyle
 } from "../../composables";
 import { vContrast } from "../../directives";
+import { omitUndefined } from "../../utils";
 import { DENSITY } from "../../enums";
 import { computed, StyleValue, useSlots } from "vue";
 const props = defineProps({
@@ -112,16 +114,18 @@ const props = defineProps({
   activeClass: { type: String, required: false }
 });
 const { filterProps } = useProps(props);
+defineSlots();
 const { t } = useLocale();
+const wasPropPassed = usePassedProps(props);
 const slotDefaults = computed(() => ({
-  "origam-breadcrumb-item": {
-    density: props.density,
-    color: props.color,
-    bgColor: props.bgColor,
-    hover: props.hover,
-    active: props.active,
-    disabled: props.disabled
-  }
+  "origam-breadcrumb-item": omitUndefined({
+    density: wasPropPassed("density") ? props.density : void 0,
+    color: wasPropPassed("color") ? props.color : void 0,
+    bgColor: wasPropPassed("bgColor") ? props.bgColor : void 0,
+    hover: wasPropPassed("hover") ? props.hover : void 0,
+    active: wasPropPassed("active") ? props.active : void 0,
+    disabled: wasPropPassed("disabled") ? props.disabled : void 0
+  })
 }));
 const { colorClasses, colorStyles, borderClasses, borderStyles, roundedClasses, roundedStyles, elevationClasses, elevationStyles, paddingClasses, paddingStyles, marginClasses, marginStyles } = useStateEffect(props, void 0, void 0, void 0, void 0, computed(() => !!props.disabled));
 const normalizedItems = computed(() => {

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

@@ -149,7 +149,7 @@ import {
 } from "../../composables";
 import { ORIGAM_BTN_TOGGLE_KEY } from "../../consts";
 import { vContrast, vRipple } from "../../directives";
-import { DENSITY, PROGRESS_TYPE, SIZES } from "../../enums";
+import { DENSITY, LOADER_KIND, PROGRESS_TYPE, SIZES } from "../../enums";
 const attrs = useAttrs();
 const _props = defineProps({
   active: { type: [Boolean, Object], required: false, default: void 0 },
@@ -230,15 +230,16 @@ const _props = defineProps({
   prependIcon: { type: null, required: false },
   hover: { type: [Boolean, Object], required: false },
   variant: { 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 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);
@@ -275,7 +276,7 @@ const isRipple = computed(() => {
 });
 const { densityClasses } = useDensity(props);
 const { dimensionStyles } = useDimension(props);
-const { loaderClasses, loaderConfig } = useLoader(props, "circular");
+const { loaderClasses, loaderConfig } = useLoader(props, LOADER_KIND.CIRCULAR);
 const { locationStyles } = useLocation(props);
 const { positionClasses } = usePosition(props);
 const { sizeClasses, sizeStyles } = useSize(props);

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

@@ -34,7 +34,7 @@
             :aria-label="ariaPrevLabel"
             :disabled="!canPrev"
             data-cy="origam-calendar-prev"
-            @click="onNavigate('prev')"
+            @click="onNavigate(CALENDAR_NAVIGATE.PREV)"
           />
           <origam-btn
             variant="text"
@@ -42,7 +42,7 @@
             :text="todayLabel"
             :aria-label="ariaTodayLabel"
             data-cy="origam-calendar-today"
-            @click="onNavigate('today')"
+            @click="onNavigate(CALENDAR_NAVIGATE.TODAY)"
           />
           <origam-btn
             variant="text"
@@ -51,7 +51,7 @@
             :aria-label="ariaNextLabel"
             :disabled="!canNext"
             data-cy="origam-calendar-next"
-            @click="onNavigate('next')"
+            @click="onNavigate(CALENDAR_NAVIGATE.NEXT)"
           />
         </origam-btn-group>
 
@@ -85,7 +85,7 @@
     </slot>
 
     <div
-      v-if="resolvedView === VIEW.MONTH"
+      v-if="resolvedView === CALENDAR_VIEW.MONTH"
       class="origam-calendar__body origam-calendar__body--month"
       data-cy="origam-calendar-body-month"
     >
@@ -188,11 +188,11 @@
     </div>
 
     <div
-      v-else-if="resolvedView === VIEW.WEEK || resolvedView === VIEW.DAY"
+      v-else-if="resolvedView === CALENDAR_VIEW.WEEK || resolvedView === CALENDAR_VIEW.DAY"
       class="origam-calendar__body"
       :class="{
-					'origam-calendar__body--week': resolvedView === VIEW.WEEK,
-					'origam-calendar__body--day': resolvedView === VIEW.DAY
+					'origam-calendar__body--week': resolvedView === CALENDAR_VIEW.WEEK,
+					'origam-calendar__body--day': resolvedView === CALENDAR_VIEW.DAY
 				}"
       :data-cy="`origam-calendar-body-${resolvedView}`"
     >
@@ -221,7 +221,7 @@
             :data-cy="`origam-calendar-timeline-day-${dayCellKey(day)}`"
           >
             <div
-              v-if="resolvedView === VIEW.WEEK"
+              v-if="resolvedView === CALENDAR_VIEW.WEEK"
               class="origam-calendar__day-header"
             >
               <slot
@@ -345,6 +345,7 @@ import {
   watch
 } from "vue";
 import { OrigamBtn, OrigamBtnGroup } from "../../components";
+import { CALENDAR_NAVIGATE, CALENDAR_VIEW, INTENT, VARIANT } from "../../enums";
 import {
   useCalendar,
   useDensity,
@@ -376,11 +377,11 @@ import {
   toDate
 } from "../../utils/Calendar/date.util";
 const props = defineProps({
-  view: { type: String, required: false, default: "month" },
+  view: { type: null, required: false, default: "month" },
   currentDate: { type: [Date, String], required: false, default: () => /* @__PURE__ */ new Date() },
   events: { type: Array, required: false, default: () => [] },
   firstDayOfWeek: { type: Number, required: false, default: 1 },
-  timeFormat: { type: String, required: false, default: "24h" },
+  timeFormat: { type: null, required: false, default: "24h" },
   locale: { type: String, required: false, default: void 0 },
   selectable: { type: Boolean, required: false, default: true },
   eventColorKey: { type: String, required: false, default: "category" },
@@ -440,21 +441,16 @@ 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"]);
-const VIEW = {
-  MONTH: "month",
-  WEEK: "week",
-  DAY: "day",
-  AGENDA: "agenda"
-};
-const VIEW_OPTIONS = [VIEW.MONTH, VIEW.WEEK, VIEW.DAY, VIEW.AGENDA];
+defineSlots();
+const VIEW_OPTIONS = [CALENDAR_VIEW.MONTH, CALENDAR_VIEW.WEEK, CALENDAR_VIEW.DAY, CALENDAR_VIEW.AGENDA];
 const MONTH_EVENT_LIMIT = 3;
 const DEFAULT_SLOT_HEIGHT_PX = 32;
 const { t } = useLocale();
 const VIEW_LABEL_FALLBACK = {
-  month: "Month",
-  week: "Week",
-  day: "Day",
-  agenda: "Agenda"
+  [CALENDAR_VIEW.MONTH]: "Month",
+  [CALENDAR_VIEW.WEEK]: "Week",
+  [CALENDAR_VIEW.DAY]: "Day",
+  [CALENDAR_VIEW.AGENDA]: "Agenda"
 };
 function viewLabel(view) {
   return t(`origam.calendar.view.${view}`, VIEW_LABEL_FALLBACK[view]);
@@ -474,7 +470,7 @@ const dayStartHour = computed(() => props.dayStartHour);
 const dayEndHour = computed(() => props.dayEndHour);
 const showWeekNumbers = computed(() => props.showWeekNumbers);
 const weekendHighlight = computed(() => props.weekendHighlight);
-const internalView = ref(props.view ?? "month");
+const internalView = ref(props.view ?? CALENDAR_VIEW.MONTH);
 const internalDate = ref(toDate(props.currentDate) ?? /* @__PURE__ */ new Date());
 watch(() => props.view, (next) => {
   if (next != null) internalView.value = next;
@@ -533,14 +529,14 @@ function isViewActive(view) {
   return resolvedView.value === view;
 }
 function viewBtnVariant(view) {
-  return isViewActive(view) ? "flat" : "text";
+  return isViewActive(view) ? VARIANT.FLAT : VARIANT.TEXT;
 }
 const toolbarIntent = computed(() => {
   const bg = props.bgColor;
   if (bg && isIntent(bg)) return bg;
   const fg = props.color;
   if (fg && isIntent(fg)) return fg;
-  return "primary";
+  return INTENT.PRIMARY;
 });
 function viewBtnBgColor(view) {
   return isViewActive(view) ? toolbarIntent.value : void 0;
@@ -549,21 +545,21 @@ const headerTitle = computed(() => {
   const date = resolvedDate.value;
   const locale = resolvedLocale.value;
   switch (resolvedView.value) {
-    case "week": {
+    case CALENDAR_VIEW.WEEK: {
       const range = calendar.visibleDateRange.value;
       const startLabel = formatDate(range.start, locale, { month: "short", day: "numeric" });
       const endLabel = formatDate(range.end, locale, { month: "short", day: "numeric", year: "numeric" });
       return `${startLabel} \u2014 ${endLabel}`;
     }
-    case "day":
+    case CALENDAR_VIEW.DAY:
       return formatDate(date, locale, {
         weekday: "long",
         month: "long",
         day: "numeric",
         year: "numeric"
       });
-    case "month":
-    case "agenda":
+    case CALENDAR_VIEW.MONTH:
+    case CALENDAR_VIEW.AGENDA:
     default:
       return formatDate(date, locale, { month: "long", year: "numeric" });
   }
@@ -630,7 +626,7 @@ function ariaDayLabel(date) {
   });
 }
 const timelineDays = computed(() => {
-  if (resolvedView.value === "day") return [startOfDay(resolvedDate.value)];
+  if (resolvedView.value === CALENDAR_VIEW.DAY) return [startOfDay(resolvedDate.value)];
   const range = calendar.visibleDateRange.value;
   const out = [];
   let cursor = startOfDay(range.start);
@@ -684,16 +680,7 @@ function agendaDayHeader(date) {
     day: "numeric"
   });
 }
-const INTENT_NAMES = [
-  "neutral",
-  "primary",
-  "secondary",
-  "ghost",
-  "success",
-  "warning",
-  "danger",
-  "info"
-];
+const INTENT_NAMES = Object.values(INTENT);
 function colorFor(event) {
   if (props.eventColorKey === "color" && event.color) {
     return resolveColor(event.color);

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

@@ -4,7 +4,7 @@
 			v-ripple="isClickable && ripple"
 			v-contrast
 			:class="cardClasses"
-			:href="link.href"
+			:href="link.href.value"
 			:style="cardStyles"
 			:tabindex="disabled ? -1 : undefined"
 			@click="handleClick"
@@ -159,7 +159,7 @@ import {
   useStyle
 } from "../../composables";
 import { vContrast, vRipple } from "../../directives";
-import { DENSITY, PROGRESS_TYPE } from "../../enums";
+import { DENSITY, LOADER_KIND, PROGRESS_TYPE } from "../../enums";
 import { computed, StyleValue, toRef, useAttrs, useSlots } from "vue";
 const _props = defineProps({
   disabled: { type: Boolean, required: false },
@@ -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);
@@ -274,7 +275,7 @@ const {
   hasPrepend
 } = useAdjacent(props, toRef(props, "prependIcon"), toRef(props, "appendIcon"));
 const isClickable = computed(() => {
-  return !props.disabled && props.link && (props.link || link.isClickable.value);
+  return !props.disabled && (props.link || link.isClickable.value);
 });
 const handleClick = (event) => {
   onActive();
@@ -282,7 +283,7 @@ const handleClick = (event) => {
     link.navigate(event);
   }
 };
-const { loaderClasses, loaderConfig } = useLoader(props, "line");
+const { loaderClasses, loaderConfig } = useLoader(props, LOADER_KIND.LINE);
 const slots = useSlots();
 const hasLoading = computed(() => {
   return slots.loader || loaderConfig.value.isActive;

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

@@ -95,8 +95,12 @@
 import { OrigamAvatar, OrigamIcon } from "../../components";
 import {
   useAdjacent,
+  useBorder,
   useDensity,
+  useMargin,
+  usePadding,
   useProps,
+  useRounded,
   useStyle,
   useTypography
 } from "../../composables";
@@ -145,16 +149,21 @@ 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 }
 });
 defineEmits(["click:append", "click:prepend"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const slots = useSlots();
 const { densityClasses } = useDensity(props);
+const { paddingClasses, paddingStyles } = usePadding(props);
+const { marginClasses, marginStyles } = useMargin(props);
+const { borderClasses, borderStyles } = useBorder(props);
+const { roundedClasses, roundedStyles } = useRounded(props);
 const { typographyStyles: titleTypographyStyles } = useTypography(props, "card-header__title");
 const { typographyStyles: subtitleTypographyStyles } = useTypography(props, "card-header__subtitle");
 const {
@@ -171,6 +180,10 @@ const hasSubtitle = computed(() => {
 });
 const cardHeaderStyles = computed(() => {
   return [
+    borderStyles.value,
+    roundedStyles.value,
+    marginStyles.value,
+    paddingStyles.value,
     props.style
   ];
 });
@@ -178,6 +191,10 @@ const cardHeaderClasses = computed(() => {
   return [
     "origam-card-header",
     densityClasses.value,
+    borderClasses.value,
+    roundedClasses.value,
+    paddingClasses.value,
+    marginClasses.value,
     props.class
   ];
 });