origam 2.14.1 → 2.16.0

package/dist/src/components/Select/OrigamSelect.vue

@@ -411,11 +411,11 @@ const _props = defineProps({
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { 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 },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   variant: { type: null, required: false },
@@ -461,6 +461,7 @@ const _props = defineProps({
 });
 const props = useDefaults(_props);
 defineEmits(["click:control", "mousedown:control", "update:menu", "update:modelValue", "update:focused", "click:append", "click:prepend", "click:appendInner", "click:prependInner", "click:clear"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const { t } = useLocale();
 const origamTextFieldRef = ref();

package/dist/src/components/SelectionControl/OrigamSelectionControl.vue

@@ -159,9 +159,10 @@ const isMultiple = computed(() => {
 const valueComparator = computed(() => {
   return props.valueComparator ?? deepEqual;
 });
+const currentModel = () => group ? group.modelValue.value : modelValue.value;
 const model = computed({
   get() {
-    const val = group ? group.modelValue.value : modelValue.value;
+    const val = currentModel();
     return isMultiple.value ? wrapInArray(val).some((v) => valueComparator.value(v, trueValue.value)) : valueComparator.value(val, trueValue.value);
   },
   set(val) {
@@ -169,7 +170,8 @@ const model = computed({
     const currentValue = val ? trueValue.value : falseValue.value;
     let newVal = currentValue;
     if (isMultiple.value) {
-      newVal = val ? [...wrapInArray(modelValue.value), currentValue] : wrapInArray(modelValue.value).filter((item) => !valueComparator.value(item, trueValue.value));
+      const previous = currentModel();
+      newVal = val ? [...wrapInArray(previous), currentValue] : wrapInArray(previous).filter((item) => !valueComparator.value(item, trueValue.value));
     }
     if (group) {
       group.modelValue.value = newVal;

package/dist/src/components/SelectionControl/OrigamSelectionControlGroup.vue

@@ -33,13 +33,14 @@
 import { computed, onScopeDispose, provide, StyleValue } from "vue";
 import { OrigamDefaultsProvider } from "../../components";
 import {
+  usePassedProps,
   useProps,
   useStyle,
   useVModel
 } from "../../composables";
 import { ORIGAM_SELECTION_CONTROL_GROUP_KEY } from "../../consts";
 import { DENSITY } from "../../enums";
-import { getUid } from "../../utils";
+import { getUid, omitUndefined } from "../../utils";
 const props = defineProps({
   disabled: { type: Boolean, required: false },
   error: { type: [String, Boolean], required: false },
@@ -63,21 +64,22 @@ const props = defineProps({
 defineEmits(["update:modelValue"]);
 defineSlots();
 const { filterProps } = useProps(props);
+const wasPropPassed = usePassedProps(props);
 const slotDefaults = computed(() => ({
-  "origam-selection-control": {
-    density: props.density,
-    color: props.color,
-    type: props.type,
-    disabled: props.disabled,
-    readonly: props.readonly,
-    error: props.error,
-    multiple: props.multiple,
-    name: props.name,
-    ripple: props.ripple,
-    falseIcon: props.falseIcon,
-    trueIcon: props.trueIcon,
-    valueComparator: props.valueComparator
-  }
+  "origam-selection-control": omitUndefined({
+    density: wasPropPassed("density") ? props.density : void 0,
+    color: wasPropPassed("color") ? props.color : void 0,
+    type: wasPropPassed("type") ? props.type : void 0,
+    disabled: wasPropPassed("disabled") ? props.disabled : void 0,
+    readonly: wasPropPassed("readonly") ? props.readonly : void 0,
+    error: wasPropPassed("error") ? props.error : void 0,
+    multiple: wasPropPassed("multiple") ? props.multiple : void 0,
+    name: wasPropPassed("name") ? props.name : void 0,
+    ripple: wasPropPassed("ripple") ? props.ripple : void 0,
+    falseIcon: wasPropPassed("falseIcon") ? props.falseIcon : void 0,
+    trueIcon: wasPropPassed("trueIcon") ? props.trueIcon : void 0,
+    valueComparator: wasPropPassed("valueComparator") ? props.valueComparator : void 0
+  })
 }));
 const modelValue = useVModel(props, "modelValue");
 const uid = getUid();

package/dist/src/components/Sheet/OrigamSheet.vue

@@ -44,7 +44,7 @@ const props = defineProps({
   side: { type: null, required: false, default: void 0 },
   swipeable: { type: Boolean, required: false, default: false },
   snapPoints: { type: Array, required: false },
-  defaultSnap: { type: [String, Object], required: false, default: "half" },
+  defaultSnap: { type: null, required: false, default: "half" },
   open: { type: Boolean, required: false, default: void 0 },
   disabled: { type: Boolean, required: false, default: false },
   persistent: { type: Boolean, required: false, default: false },
@@ -103,7 +103,8 @@ const props = defineProps({
   activeClass: { type: String, required: false },
   hover: { type: [Boolean, Object], required: false }
 });
-const emit = defineEmits(["update:snap", "update:open"]);
+const emit = defineEmits(["update:snap", "update:open", "update:active"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const { colorClasses, colorStyles } = useBothColor(
   toRef(props, "bgColor"),

package/dist/src/components/Skeleton/OrigamSkeleton.vue

@@ -56,7 +56,7 @@ import {
 import { convertToUnit } from "../../utils";
 import { computed, toRef } from "vue";
 const props = defineProps({
-  variant: { type: String, required: false, default: "rectangular" },
+  variant: { type: null, required: false, default: "rectangular" },
   width: { type: [String, Number], required: false },
   height: { type: [String, Number], required: false },
   loading: { type: Boolean, required: false, default: true },
@@ -74,6 +74,7 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false }
 });
 const { filterProps } = useProps(props);
+defineSlots();
 const { roundedClasses, roundedStyles } = useRounded(props);
 const { sizeClasses, sizeStyles } = useSize(props);
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));

package/dist/src/components/Slide/OrigamSlideGroup.vue

@@ -134,6 +134,7 @@ const props = defineProps({
   mobileBreakpoint: { type: null, required: false }
 });
 defineEmits(["update:modelValue"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const { roundedClasses, roundedStyles } = useRounded(props);
 const { borderClasses, borderStyles } = useBorder(props);
@@ -145,7 +146,7 @@ const isOverflowing = shallowRef(false);
 const scrollOffset = shallowRef(0);
 const containerSize = shallowRef(0);
 const contentSize = shallowRef(0);
-const isHorizontal = computed(() => props.direction === "horizontal");
+const isHorizontal = computed(() => props.direction === DIRECTION.HORIZONTAL);
 const { resizeRef: containerRef, contentRect: containerRect } = useResizeObserver();
 const { resizeRef: contentRef, contentRect } = useResizeObserver();
 const { isRtl } = useRtl();

package/dist/src/components/SliderField/OrigamSliderField.vue

@@ -524,15 +524,16 @@ const _props = defineProps({
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
   size: { 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 },
   ripple: { type: [Boolean, Object], required: false }
 });
 const props = useDefaults(_props);
 const emits = defineEmits(["start", "end", "update:modelValue", "update:focused"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const origamInputRef = ref();
 const slots = useSlots();

package/dist/src/components/SliderField/OrigamSliderFieldTrack.vue

@@ -80,6 +80,7 @@ const props = defineProps({
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false }
 });
+defineSlots();
 const { filterProps } = useProps(props);
 const slots = useSlots();
 const isDisabled = computed(() => {
@@ -104,14 +105,11 @@ const size = computed(() => {
 const showTicks = computed(() => {
   return !!props.showTicks;
 });
-const roundedProps = computed(() => {
-  return props.rounded;
-});
 const parsedTicks = computed(() => {
   const ticks = props.ticks ?? [];
   return props.isVertical ? ticks.slice().reverse() : ticks;
 });
-const { roundedClasses, roundedStyles } = useRounded(roundedProps);
+const { roundedClasses, roundedStyles } = useRounded(props);
 const {
   backgroundColorClasses: trackFillColorClasses,
   backgroundColorStyles: trackFillColorStyles

package/dist/src/components/Snackbar/OrigamSnackbar.vue

@@ -202,6 +202,8 @@ const _props = defineProps({
   hover: { type: [Boolean, Object], required: false }
 });
 const props = useDefaults(_props);
+defineSlots();
+defineEmits(["update:modelValue"]);
 const { filterProps } = useProps(props);
 const slots = useSlots();
 const isActive = useVModel(props, "modelValue");

package/dist/src/components/Snackbar/OrigamSnackbarGroup.vue

@@ -36,10 +36,11 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, StyleValue } from "vue";
+import { computed, ref, StyleValue, watch } from "vue";
 import OrigamSnackbarItem from "./OrigamSnackbarItem.vue";
 import { useProps, useStyle } from "../../composables";
 import { useSnackbarGroupInternal } from "../../composables/Snackbar/snackbar-group.composable";
+import { INTENT, SNACKBAR_GROUP_DIRECTION } from "../../enums";
 import {
   SNACKBAR_GROUP_DEFAULT_DURATION,
   SNACKBAR_GROUP_DEFAULT_ID,
@@ -48,29 +49,32 @@ import {
 } from "../../consts";
 const props = defineProps({
   id: { type: String, required: false, default: SNACKBAR_GROUP_DEFAULT_ID },
-  location: { type: String, required: false, default: "bottom-right" },
+  location: { type: null, required: false, default: "bottom-right" },
   max: { type: Number, required: false, default: SNACKBAR_GROUP_DEFAULT_MAX },
   defaultDuration: { type: Number, required: false, default: SNACKBAR_GROUP_DEFAULT_DURATION },
   spacing: { type: [String, Number], required: false, default: SNACKBAR_GROUP_DEFAULT_SPACING },
-  direction: { type: String, required: false },
+  direction: { type: null, 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" }
 });
 const { filterProps } = useProps(props);
 const rootRef = ref();
-const { rawItems } = useSnackbarGroupInternal(props.id);
+const { rawItems, registerDefaultDuration } = useSnackbarGroupInternal(props.id);
+watch(() => props.defaultDuration, (duration) => {
+  registerDefaultDuration(duration);
+}, { immediate: true });
 const visibleItems = computed(() => {
   const items = rawItems.value;
   const sliced = items.slice(-props.max);
-  return effectiveDirection.value === "bottom-up" ? [...sliced].reverse() : sliced;
+  return effectiveDirection.value === SNACKBAR_GROUP_DIRECTION.BOTTOM_UP ? [...sliced].reverse() : sliced;
 });
 const effectiveDirection = computed(() => {
   if (props.direction) return props.direction;
-  return props.location.startsWith("top") ? "top-down" : "bottom-up";
+  return props.location.startsWith("top") ? SNACKBAR_GROUP_DIRECTION.TOP_DOWN : SNACKBAR_GROUP_DIRECTION.BOTTOM_UP;
 });
 const resolveAriaRole = (intent) => {
-  return intent === "warning" || intent === "danger" ? "alert" : "status";
+  return intent === INTENT.WARNING || intent === INTENT.DANGER ? "alert" : "status";
 };
 const resolveAriaLive = (intent) => {
   return intent === "warning" || intent === "danger" ? "assertive" : "polite";

package/dist/src/components/Snackbar/OrigamSnackbarItem.vue

@@ -10,12 +10,12 @@
   >
     <div class="origam-snackbar-item__content">
       <div
-        v-if="resolvedIcon !== false"
+        v-if="hasPrepend"
         class="origam-snackbar-item__prepend"
       >
         <slot name="prepend">
           <origam-icon
-            :icon="resolvedIcon"
+            :icon="iconToRender"
             :size="24"
           />
         </slot>
@@ -74,11 +74,11 @@
 <script lang="ts" setup>
 import { computed, useSlots } from "vue";
 import { OrigamBtn, OrigamIcon } from "../../components";
-import { useLocale, useProps, useTypography } from "../../composables";
+import { useLocale, usePassedProps, useProps, useTypography } from "../../composables";
 import { vContrast } from "../../directives";
 import { MDI_ICONS } from "../../enums";
 const props = defineProps({
-  intent: { type: String, required: false, default: "info" },
+  intent: { type: null, required: false, default: "info" },
   title: { type: String, required: false },
   message: { type: String, required: false },
   icon: { type: [String, Array, Boolean], required: false, skipCheck: true },
@@ -91,18 +91,20 @@ 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: 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 { t } = useLocale();
 const dismissLabel = computed(() => props.dismissLabel ?? t("origam.snackbar.dismiss", "Dismiss notification"));
 const { filterProps } = useProps(props);
+const wasIconPassed = usePassedProps(props, "OrigamSnackbarItem");
 const { typographyStyles } = useTypography(props, "snackbar-item");
 const slots = useSlots();
 const emit = defineEmits(["dismiss", "action"]);
+defineSlots();
 const INTENT_ICONS = {
   primary: MDI_ICONS.INFORMATION,
   secondary: MDI_ICONS.INFORMATION,
@@ -114,10 +116,15 @@ const INTENT_ICONS = {
   info: MDI_ICONS.INFORMATION
 };
 const resolvedIcon = computed(() => {
-  if (props.icon === false) return false;
-  if (props.icon) return props.icon;
+  if (wasIconPassed("icon")) return props.icon;
   return INTENT_ICONS[props.intent ?? "info"];
 });
+const hasPrepend = computed(() => {
+  return resolvedIcon.value !== false || !!slots["prepend"];
+});
+const iconToRender = computed(() => {
+  return resolvedIcon.value === false ? void 0 : resolvedIcon.value;
+});
 const resolvedRole = computed(() => {
   if (props.role) return props.role;
   return props.intent === "warning" || props.intent === "danger" ? "alert" : "status";

package/dist/src/components/Stepper/OrigamStepper.vue

@@ -34,7 +34,7 @@
 import { computed, provide, ref, StyleValue, useSlots, watch } from "vue";
 import { OrigamStepperItem } from "../../components";
 import { ORIGAM_STEPPER_KEY } from "../../consts";
-import { DENSITY, SIZES } from "../../enums";
+import { DENSITY, DIRECTION, SIZES } from "../../enums";
 import { vContrast } from "../../directives";
 import {
   useDensity,
@@ -100,6 +100,7 @@ const props = defineProps({
 });
 const { t } = useLocale();
 const emit = defineEmits(["update:modelValue"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const slots = useSlots();
 const internalModel = ref(props.modelValue ?? 0);
@@ -108,7 +109,7 @@ watch(() => props.modelValue, (val) => {
 });
 provide(ORIGAM_STEPPER_KEY, {
   modelValue: internalModel,
-  orientation: computed(() => props.orientation ?? "horizontal"),
+  orientation: computed(() => props.orientation ?? DIRECTION.HORIZONTAL),
   clickable: computed(() => props.clickable ?? false),
   color: computed(() => props.color)
 });
@@ -160,7 +161,7 @@ const stepperStyles = computed(() => {
 });
 const stepperClasses = computed(() => [
   "origam-stepper",
-  `origam-stepper--${props.orientation ?? "horizontal"}`,
+  `origam-stepper--${props.orientation ?? DIRECTION.HORIZONTAL}`,
   colorClasses.value,
   densityClasses.value,
   sizeClasses.value,

package/dist/src/components/Stepper/OrigamStepperItem.vue

@@ -3,9 +3,9 @@
 			:is="isClickable ? 'button' : 'div'"
 			:class="itemClasses"
 			:type="isClickable ? 'button' : undefined"
-			:aria-current="resolvedStatus === 'active' ? 'step' : undefined"
+			:aria-current="resolvedStatus === STEPPER_ITEM_STATUS.ACTIVE ? 'step' : undefined"
 			:aria-label="stepAriaLabel"
-			:disabled="isClickable && resolvedStatus === 'active' ? true : undefined"
+			:disabled="isClickable && resolvedStatus === STEPPER_ITEM_STATUS.ACTIVE ? true : undefined"
 			@click="handleClick"
 	>
 		<span
@@ -13,10 +13,10 @@
 				:class="indicatorClasses"
 				aria-hidden="true"
 		>
-			<template v-if="resolvedStatus === 'done'">
+			<template v-if="resolvedStatus === STEPPER_ITEM_STATUS.DONE">
 				<origam-icon :icon="MDI_ICONS.CHECK" />
 			</template>
-			<template v-else-if="resolvedStatus === 'error'">
+			<template v-else-if="resolvedStatus === STEPPER_ITEM_STATUS.ERROR">
 				<origam-icon :icon="MDI_ICONS.EXCLAMATION" />
 			</template>
 			<template v-else-if="icon">
@@ -44,7 +44,7 @@
 import { computed, inject } from "vue";
 import { OrigamIcon } from "../../components";
 import { ORIGAM_STEPPER_KEY } from "../../consts";
-import { MDI_ICONS } from "../../enums";
+import { DIRECTION, MDI_ICONS, STEPPER_ITEM_STATUS } from "../../enums";
 import { useLocale, useProps } from "../../composables";
 import { vContrast } from "../../directives";
 const props = defineProps({
@@ -52,7 +52,7 @@ const props = defineProps({
   title: { type: String, required: false },
   subtitle: { type: String, required: false },
   icon: { type: null, required: false },
-  status: { type: String, required: false },
+  status: { type: null, required: false },
   clickable: { type: Boolean, required: false },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
@@ -74,9 +74,9 @@ const resolvedStatus = computed(() => {
   if (props.status !== void 0) return props.status;
   const modelValue = stepper?.modelValue.value ?? 0;
   const idx = props.index ?? 0;
-  if (idx < modelValue) return "done";
-  if (idx === modelValue) return "active";
-  return "pending";
+  if (idx < modelValue) return STEPPER_ITEM_STATUS.DONE;
+  if (idx === modelValue) return STEPPER_ITEM_STATUS.ACTIVE;
+  return STEPPER_ITEM_STATUS.PENDING;
 });
 const handleClick = () => {
   if (!isClickable.value) return;
@@ -85,7 +85,7 @@ const handleClick = () => {
     stepper.modelValue.value = props.index ?? 0;
   }
 };
-const orientation = computed(() => stepper?.orientation.value ?? "horizontal");
+const orientation = computed(() => stepper?.orientation.value ?? DIRECTION.HORIZONTAL);
 const itemClasses = computed(() => [
   "origam-stepper-item",
   `origam-stepper-item--${resolvedStatus.value}`,

package/dist/src/components/Switch/OrigamSwitch.vue

@@ -4,7 +4,7 @@
     class="origam-switch__skeleton"
     :class="{ 'origam-switch__skeleton--inset': inset }"
     aria-busy="true"
-    aria-label="Loading"
+    :aria-label="loadingLabel"
     role="status"
     data-cy="origam-switch-skeleton"
   >
@@ -149,13 +149,14 @@ import {
   useFocus,
   useHover,
   useLoader,
+  useLocale,
   useProps,
   useRounded,
   useStateEffect,
   useStyle,
   useVModel
 } from "../../composables";
-import { DENSITY, PROGRESS_TYPE, SIZES } from "../../enums";
+import { DENSITY, LOADER_KIND, PROGRESS_TYPE, SIZES } from "../../enums";
 import { filterInputAttrs, getUid } from "../../utils";
 const _props = defineProps({
   indeterminate: { type: Boolean, required: false },
@@ -231,11 +232,11 @@ const _props = defineProps({
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
   size: { 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 },
   trueValue: { type: null, required: false },
   falseValue: { type: null, required: false },
   value: { type: null, required: false },
@@ -257,6 +258,7 @@ const _props = defineProps({
 });
 const props = useDefaults(_props);
 defineEmits(["update:modelValue", "update:focused", "update:indeterminate", "click:label"]);
+defineSlots();
 const { isHover, hoverState } = useHover(props);
 useStateEffect(props, isHover, void 0, hoverState, void 0);
 const { filterProps } = useProps(props);
@@ -268,7 +270,9 @@ const model = useVModel(props, "modelValue");
 const { isFocused, onFocus: handleFocus, onBlur: handleBlur } = useFocus(props);
 const attrs = useAttrs();
 const slots = useSlots();
-const { loaderClasses, loaderConfig } = useLoader(props, "circular");
+const { loaderClasses, loaderConfig } = useLoader(props, LOADER_KIND.CIRCULAR);
+const { t } = useLocale();
+const loadingLabel = computed(() => t("origam.loading"));
 const uid = getUid();
 const id = computed(() => {
   return props.id || `switch-${uid}`;
@@ -345,14 +349,6 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
-  /*
-   * Skeleton placeholder mimicking the switch silhouette — a 52×32
-   * rounded track + a 20px circular thumb pinned to the left so the
-   * shape is unmistakably a switch (vs the previous plain rectangle
-   * which looked like a generic loading bar). Both halves share the
-   * `--origam-switch__skeleton-bg` pulse animation inherited from
-   * the broader skeleton token so the rhythm matches OrigamSkeleton.
-   */
   @keyframes origam-switch-skeleton-pulse {
     0%, 100% {
       opacity: 1;
@@ -394,7 +390,6 @@ defineExpose({
 
     &--inset {
       .origam-switch__skeleton-thumb {
-        /* inset switches use a 24px thumb that overflows the track */
         width: 24px;
         height: 24px;
         left: 4px;
@@ -409,29 +404,10 @@ defineExpose({
       padding-inline-start: 10px;
     }
 
-    /*
-     * Line loader — thin linear progress positioned ON the track,
-     * spanning the full switch footprint (46×14 standard or 52×32
-     * inset). Sits BEHIND the thumb so the thumb stays visually
-     * dominant and the consumer still sees the on/off position
-     * while the background indicates async work in flight.
-     *
-     * `OrigamProgressLinear` ships an inline `height: thickness`
-     * (4 px default) that wins over standard CSS — we force it
-     * to 100 % via `:deep()` so the bar fills the track height
-     * regardless of the standard / inset variant.
-     */
     &__progress--linear {
       position: absolute !important;
       inset: 0 !important;
       width: 100% !important;
-      /*
-       * `OrigamProgressLinear` inlines `height: 4px` on its root via
-       * `:style="{ height: thickness }"`, which beats any non-important
-       * scoped rule. `!important` here is the only way to expand the
-       * loader to the full track height without subclassing the
-       * progress component.
-       */
       height: 100% !important;
       line-height: 1 !important;
       border-radius: inherit;
@@ -466,24 +442,6 @@ defineExpose({
     .origam-selection-control {
       min-height: calc(var(--origam-switch__selection-control---min-height, 56px) + var(--origam-input---density, 0px));
 
-      /*
-       * The base SelectionControl wrapper reserves a fixed
-       * `calc(40px + 1.5 * density)` box sized for a checkbox/radio
-       * input glyph. Switch instead renders a variable-width track
-       * (36–52px depending on `--origam-switch__track---width` /
-       * the `inset` variant, plus its own horizontal padding) as
-       * the wrapper's only in-flow child — `__input` is forced
-       * `position: absolute` below so it no longer participates in
-       * the flex layout. That fixed formula was never track-aware:
-       * under `density="compact"` (-8px) the wrapper shrinks to
-       * 28px while the standard track needs ~46px, so the track
-       * visually overflows into the neighbouring label ("Flat"
-       * rendering as "lat"). Let the wrapper size to its actual
-       * content (`max-content`) instead, keeping the original
-       * density formula only as a floor via `min-width`/`min-height`
-       * so the checkbox-sized footprint is preserved whenever the
-       * track is smaller than it (never smaller than before).
-       */
       :deep(.origam-selection-control__wrapper) {
         width: max-content;
         height: max-content;

package/dist/src/components/SystemBar/OrigamSystemBar.vue

@@ -61,13 +61,14 @@ const props = defineProps({
   minHeight: { type: [Number, String], required: false },
   minWidth: { type: [Number, String], required: false },
   width: { 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 }
 });
 const { filterProps } = useProps(props);
+defineSlots();
 const { dimensionStyles } = useDimension(props);
 const { borderClasses, borderStyles } = useBorder(props);
 const { roundedStyles, roundedClasses } = useRounded(props);

package/dist/src/components/Table/OrigamTable.vue

@@ -92,13 +92,14 @@ const _props = defineProps({
   width: { type: [Number, String], required: false },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
   tag: { type: String, required: false, default: "div" },
-  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);
+defineSlots();
 const { filterProps } = useProps(props);
 const slots = useSlots();
 const { densityClasses } = useDensity(props);