origam 2.3.0 → 2.6.1

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

@@ -4,11 +4,12 @@
 			:class="itemClasses"
 			:type="isClickable ? 'button' : undefined"
 			:aria-current="resolvedStatus === 'active' ? 'step' : undefined"
-			:aria-label="title ? `Step ${(index ?? 0) + 1}: ${title}` : undefined"
+			:aria-label="stepAriaLabel"
 			:disabled="isClickable && resolvedStatus === 'active' ? true : undefined"
 			@click="handleClick"
 	>
 		<span
+				v-contrast
 				:class="indicatorClasses"
 				aria-hidden="true"
 		>
@@ -39,12 +40,13 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, inject } from "vue";
 import { OrigamIcon } from "../../components";
 import { ORIGAM_STEPPER_KEY } from "../../consts";
 import { MDI_ICONS } from "../../enums";
-import { useProps } from "../../composables";
+import { useLocale, useProps } from "../../composables";
+import { vContrast } from "../../directives";
 const props = defineProps({
   index: { type: Number, required: false, default: 0 },
   title: { type: String, required: false },
@@ -56,6 +58,11 @@ const props = defineProps({
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true }
 });
+const { t } = useLocale();
+const stepAriaLabel = computed(() => {
+  if (!props.title) return void 0;
+  return t("origam.stepper.stepAriaLabel", (props.index ?? 0) + 1, props.title);
+});
 const emit = defineEmits(["click"]);
 const { filterProps } = useProps(props);
 const stepper = inject(ORIGAM_STEPPER_KEY);

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

@@ -1,12 +1,16 @@
 <template>
-	<origam-skeleton
+	<div
 			v-if="isSkeletonLoading"
-			variant="rectangular"
-			:rounded="true"
-			:width="'52px'"
-			:height="'32px'"
-			v-bind="loaderConfig.overrides"
-	/>
+			class="origam-switch__skeleton"
+			:class="{ 'origam-switch__skeleton--inset': inset }"
+			aria-busy="true"
+			aria-label="Loading"
+			role="status"
+			data-cy="origam-switch-skeleton"
+	>
+		<span class="origam-switch__skeleton-track"/>
+		<span class="origam-switch__skeleton-thumb"/>
+	</div>
 
 	<origam-input
 			v-else
@@ -63,6 +67,22 @@
 									v-bind="slotProps"
 							/>
 						</template>
+
+						<template
+								v-if="isLineLoading"
+								#overlay
+						>
+							<origam-progress
+									:active="loaderConfig.isActive"
+									:color="color"
+									:indeterminate="loaderConfig.indeterminate"
+									:model-value="loaderConfig.modelValue"
+									:type="PROGRESS_TYPE.LINEAR"
+									class="origam-switch__progress origam-switch__progress--linear"
+									data-cy="origam-switch-progress-linear"
+									v-bind="loaderConfig.overrides"
+							/>
+						</template>
 					</origam-switch-track>
 				</template>
 
@@ -79,31 +99,30 @@
 							:class="getSwitchThumbClasses(icon)"
 					>
 						<origam-translate-scale>
-							<template v-if="!loaderConfig.isActive">
-								<origam-icon
-										v-if="icon"
-										:icon="icon"
-										size="x-small"
-								/>
-							</template>
-
-							<template v-if="hasLoading">
+							<div
+									v-if="hasCircularLoading"
+									class="origam-switch__loader"
+							>
 								<slot name="loader">
-									<div class="origam-switch__loader">
-										<origam-progress
-												:active="loaderConfig.isActive"
-												:color="color"
-												:indeterminate="loaderConfig.indeterminate"
-												:model-value="loaderConfig.modelValue"
-												:size="SIZES.X_SMALL"
-												:type="PROGRESS_TYPE.CIRCULAR"
-												class="origam-switch__progress origam-switch__progress--circular"
-												thickness="2"
-												v-bind="loaderConfig.overrides"
-										/>
-									</div>
+									<origam-progress
+											:active="loaderConfig.isActive"
+											:color="color"
+											:indeterminate="loaderConfig.indeterminate"
+											:model-value="loaderConfig.modelValue"
+											:size="SIZES.X_SMALL"
+											:type="PROGRESS_TYPE.CIRCULAR"
+											class="origam-switch__progress origam-switch__progress--circular"
+											thickness="2"
+											v-bind="loaderConfig.overrides"
+									/>
 								</slot>
-							</template>
+							</div>
+
+							<origam-icon
+									v-else-if="icon"
+									:icon="icon"
+									size="x-small"
+							/>
 						</origam-translate-scale>
 					</div>
 				</template>
@@ -112,14 +131,13 @@
 	</origam-input>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, ref, StyleValue, useAttrs, useSlots } from "vue";
 import {
   OrigamIcon,
   OrigamInput,
   OrigamProgress,
   OrigamSelectionControl,
-  OrigamSkeleton,
   OrigamSwitchTrack,
   OrigamTranslateScale
 } from "../../components";
@@ -177,8 +195,8 @@ const props = defineProps({
   persistentHint: { type: Boolean, required: false },
   messages: { type: [Array, String], required: false },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   elevation: { type: [Number, String], required: false },
   height: { type: [Number, String], required: false },
   maxHeight: { type: [Number, String], required: false },
@@ -188,7 +206,7 @@ const props = defineProps({
   width: { type: [Number, String], required: false },
   direction: { type: null, required: false },
   disabled: { type: Boolean, required: false },
-  error: { type: Boolean, required: false },
+  error: { type: [String, Boolean], required: false },
   errorMessages: { type: [Array, String], required: false },
   maxErrors: { type: [Number, String], required: false },
   name: { type: String, required: false },
@@ -204,10 +222,17 @@ 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 },
   trueValue: { type: null, required: false },
   falseValue: { type: null, required: false },
   value: { type: null, required: false },
   required: { type: Boolean, required: false },
+  activeColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  activeBgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   inline: { type: Boolean, required: false },
   falseIcon: { type: null, required: false },
   trueIcon: { type: null, required: false },
@@ -243,6 +268,7 @@ const handleChange = () => {
   }
 };
 const handleTrackClick = (_e) => {
+  ;
   origamSelectionControlRef.value?.inputRef?.click();
 };
 const [rootAttrs, controlAttrs] = filterInputAttrs(attrs);
@@ -252,12 +278,17 @@ const inputProps = computed(() => {
 const controlProps = computed(() => {
   return origamSelectionControlRef.value?.filterProps(props, ["modelValue", "type", "disabled", "readonly", "class", "style", "id"]);
 });
-const hasLoading = computed(() => {
-  return slots.loader || loaderConfig.value.isActive;
-});
 const isSkeletonLoading = computed(() => {
   return loaderConfig.value.isActive && loaderConfig.value.kind === "skeleton";
 });
+const isLineLoading = computed(() => {
+  return loaderConfig.value.isActive && loaderConfig.value.kind === "line";
+});
+const hasCircularLoading = computed(() => {
+  if (slots.loader) return true;
+  const cfg = loaderConfig.value;
+  return cfg.isActive && cfg.kind !== "line" && cfg.kind !== "skeleton";
+});
 const switchStyles = computed(() => {
   return [
     props.style
@@ -294,6 +325,59 @@ 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; }
+		50%      { opacity: 0.55; }
+	}
+
+	.origam-switch__skeleton {
+		position: relative;
+		display: inline-block;
+		width: var(--origam-switch__skeleton---width, 52px);
+		height: var(--origam-switch__skeleton---height, 32px);
+		animation: origam-switch-skeleton-pulse 1.6s ease-in-out infinite;
+
+		@media (prefers-reduced-motion: reduce) {
+			animation: none;
+		}
+
+		.origam-switch__skeleton-track {
+			position: absolute;
+			inset: 0;
+			border-radius: 999px;
+			background-color: var(--origam-switch__skeleton-track---background-color, color-mix(in srgb, currentColor 14%, transparent));
+		}
+
+		.origam-switch__skeleton-thumb {
+			position: absolute;
+			top: 50%;
+			left: 6px;
+			width: 20px;
+			height: 20px;
+			border-radius: 50%;
+			transform: translateY(-50%);
+			background-color: var(--origam-switch__skeleton-thumb---background-color, color-mix(in srgb, currentColor 28%, transparent));
+			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
+		}
+
+		&--inset {
+			.origam-switch__skeleton-thumb {
+				/* inset switches use a 24px thumb that overflows the track */
+				width: 24px;
+				height: 24px;
+				left: 4px;
+			}
+		}
+	}
+
 	.origam-switch {
 		$this: &;
 
@@ -301,6 +385,43 @@ 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;
+			pointer-events: none;
+			z-index: 0;
+			overflow: hidden;
+
+			:deep(.origam-progress__background),
+			:deep(.origam-progress__loader),
+			:deep(.origam-progress__bar) {
+				height: 100% !important;
+			}
+		}
+
 		&__loader {
 			display: flex;
 
@@ -381,12 +502,12 @@ defineExpose({
 			background-color: var(--origam-switch__thumb---background-color, rgb(255, 255, 255));
 			color: var(--origam-switch__thumb---color, currentColor);
 			border: 1px solid var(--origam-switch__thumb---border-color, rgba(0, 0, 0, 0.18));
-			border-radius: 50%;
+			border-radius: var(--origam-switch__thumb---border-radius, 50%);
 			display: flex;
 			font-size: 0.75rem;
-			height: 20px;
+			height: var(--origam-switch__thumb---size, 20px);
 			justify-content: center;
-			width: 20px;
+			width: var(--origam-switch__thumb---size, 20px);
 			pointer-events: none;
 			transition: 0.15s 0.05s transform cubic-bezier(0, 0, 0.2, 1), 0.2s color cubic-bezier(0.4, 0, 0.2, 1), 0.2s background-color cubic-bezier(0.4, 0, 0.2, 1), 0.2s border-color cubic-bezier(0.4, 0, 0.2, 1);
 			position: relative;
@@ -496,9 +617,3 @@ defineExpose({
 		}
 	}
 </style>
-
-<style>
-	:root {
-
-	}
-</style>

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

@@ -25,10 +25,15 @@
 					v-bind="slotProps"
 			/>
 		</div>
+
+		<slot
+				name="overlay"
+				v-bind="slotProps"
+		/>
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, StyleValue, useSlots } from "vue";
 import {
   useBackgroundColor,
@@ -45,8 +50,8 @@ 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 },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true }
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
 });
 const emits = defineEmits(["click", "update:modelValue"]);
 defineSlots();
@@ -101,17 +106,22 @@ defineExpose({
 	.origam-switch-track {
 		$this: &;
 
+		position: relative;
 		display: inline-flex;
 		align-items: center;
 		font-size: 0.5rem;
 		padding: 0 5px;
 		background-color: var(--origam-switch__track---background-color, rgb(163, 163, 163));
-		border-radius: 9999px;
-		height: 14px;
-		opacity: 0.6;
-		min-width: 36px;
+		border-radius: var(--origam-switch__track---border-radius, 9999px);
+		height: var(--origam-switch__track---height, 14px);
+		min-width: var(--origam-switch__track---width, 36px);
 		cursor: pointer;
 		transition: 0.2s background-color cubic-bezier(0.4, 0, 0.2, 1);
+		overflow: hidden;
+
+		@media (prefers-reduced-motion: reduce) {
+			transition: none;
+		}
 
 		@media (forced-colors: active) {
 			border: 1px solid;
@@ -141,6 +151,7 @@ defineExpose({
 
 		&--disabled {
 			cursor: default;
+			opacity: var(--origam-switch---opacity-disabled, 0.32);
 		}
 
 		&--dirty#{$this}--disabled {
@@ -155,10 +166,10 @@ defineExpose({
 		}
 
 		&--inset {
-			border-radius: 9999px;
+			border-radius: var(--origam-switch__track---border-radius, 9999px);
 			font-size: 0.75rem;
-			height: 32px;
-			min-width: 52px;
+			height: var(--origam-switch__track--inset---height, 32px);
+			min-width: var(--origam-switch__track--inset---width, 52px);
 
 			@media (forced-colors: active) {
 				border-width: 2px;
@@ -173,9 +184,3 @@ defineExpose({
 		}
 	}
 </style>
-
-<style>
-	:root {
-
-	}
-</style>

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

@@ -1,6 +1,7 @@
 <template>
 	<component
 			:is="tag"
+			v-contrast
 			:class="systemBarClasses"
 			:style="systemBarStyles"
 	>
@@ -8,7 +9,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, shallowRef, StyleValue, toRef } from "vue";
 import {
   useBorder,
@@ -19,8 +20,10 @@ import {
   useProps,
   useRounded,
   useSsrBoot,
-  useStyle
+  useStyle,
+  useTypography
 } from "../../composables";
+import { vContrast } from "../../directives";
 const props = defineProps({
   window: { type: Boolean, required: false },
   id: { type: String, required: false },
@@ -28,8 +31,8 @@ const props = defineProps({
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   tag: { type: String, required: false, default: "div" },
   elevation: { type: [Number, String], required: false },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   name: { type: String, required: false },
   order: { type: [String, Number], required: false },
   absolute: { type: Boolean, required: false },
@@ -53,19 +56,25 @@ const props = defineProps({
   maxWidth: { type: [Number, String], required: false },
   minHeight: { type: [Number, String], required: false },
   minWidth: { type: [Number, String], required: false },
-  width: { 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 }
 });
 const { filterProps } = useProps(props);
 const { dimensionStyles } = useDimension(props);
 const { borderClasses, borderStyles } = useBorder(props);
 const { roundedStyles, roundedClasses } = useRounded(props);
 const { elevationClasses } = useElevation(props);
+const { typographyStyles } = useTypography(props, "system-bar");
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const { ssrBootStyles } = useSsrBoot();
 const height = computed(() => props.height ?? (props.window ? 32 : 24));
 const { layoutItemStyles } = useLayoutItem({
   id: props.name,
-  order: computed(() => parseInt(props.order, 10)),
+  order: computed(() => parseInt(String(props.order ?? 0), 10)),
   position: shallowRef("top"),
   layoutSize: height,
   elementSize: height,
@@ -78,6 +87,7 @@ const systemBarStyles = computed(() => {
     roundedStyles.value,
     dimensionStyles.value,
     colorStyles.value,
+    typographyStyles.value,
     ssrBootStyles.value,
     layoutItemStyles.value,
     props.style

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

@@ -13,7 +13,12 @@
 				:style="tableWrapperStyles"
 		>
 			<slot name="wrapper">
-				<table>
+				<table :aria-rowcount="ariaRowcount || undefined">
+					<caption
+							v-if="caption"
+							:class="['origam-table__caption', {'origam-table__caption--visible': captionVisible}]"
+							:style="captionTypographyStyles"
+					>{{ caption }}</caption>
 					<slot name="default"/>
 				</table>
 			</slot>
@@ -23,7 +28,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, StyleValue, useSlots } from "vue";
 import {
   useDensity,
@@ -31,12 +36,16 @@ import {
   useHover,
   useProps,
   useStateEffect,
-  useStyle
+  useStyle,
+  useTypography
 } from "../../composables";
 import { DENSITY } from "../../enums";
 const props = defineProps({
   fixedHeader: { type: Boolean, required: false },
   fixedFooter: { type: Boolean, required: false },
+  caption: { type: String, required: false },
+  captionVisible: { type: Boolean, required: false },
+  ariaRowcount: { type: Number, 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 },
@@ -77,7 +86,12 @@ const props = defineProps({
   minWidth: { type: [Number, String], required: false },
   width: { type: [Number, String], required: false },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
-  tag: { type: String, required: false, default: "div" }
+  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 }
 });
 const { filterProps } = useProps(props);
 const slots = useSlots();
@@ -95,12 +109,17 @@ const {
   marginClasses,
   marginStyles
 } = useStateEffect(props, isHover, void 0, hoverState);
+const { typographyStyles: tableTypographyStyles } = useTypography(props, "table");
+const { typographyStyles: captionTypographyStyles } = useTypography(props, "table__caption");
+const { typographyStyles: headerCellTypographyStyles } = useTypography(props, "table__header-cell");
 const tableStyles = computed(() => {
   return [
     borderStyles.value,
     roundedStyles.value,
     paddingStyles.value,
     marginStyles.value,
+    tableTypographyStyles.value,
+    headerCellTypographyStyles.value,
     props.style
   ];
 });
@@ -154,6 +173,32 @@ defineExpose({
 		border-radius: var(--origam-table---border-radius, 0);
 		overflow: hidden;
 
+		&__caption {
+			position: absolute;
+			width: 1px;
+			height: 1px;
+			padding: 0;
+			margin: -1px;
+			overflow: hidden;
+			clip: rect(0, 0, 0, 0);
+			white-space: nowrap;
+			border: 0;
+
+			&--visible {
+				position: static;
+				width: auto;
+				height: auto;
+				padding: var(--origam-table__caption---padding, 8px 16px);
+				margin: 0;
+				overflow: visible;
+				clip: auto;
+				white-space: normal;
+				font-size: var(--origam-table__caption---font-size, 0.875rem);
+				color: var(--origam-table__caption---color, var(--origam-color__text---secondary));
+				text-align: var(--origam-table__caption---text-align, start);
+			}
+		}
+
 		&__wrapper {
 			overflow-x: auto;
 

package/dist/src/components/Tabs/OrigamTab.vue

@@ -3,6 +3,7 @@
 			:is="tag"
 			:id="tabDomId"
 			ref="rootRef"
+			v-contrast
 			role="tab"
 			type="button"
 			:class="tabClasses"
@@ -46,15 +47,17 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, inject, ref, StyleValue } from "vue";
 import { OrigamIcon } from "../../components";
 import {
   useDefaults,
   useGroupItem,
   useProps,
-  useStyle
+  useStyle,
+  useTypography
 } from "../../composables";
+import { vContrast } from "../../directives";
 import { ORIGAM_TABS_KEY, ORIGAM_TAB_PANELS_KEY } from "../../consts";
 const _props = defineProps({
   text: { type: String, required: false, default: "" },
@@ -67,7 +70,12 @@ const _props = defineProps({
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   value: { type: null, required: false, default: void 0 },
   disabled: { type: Boolean, required: false },
-  selectedClass: { type: String, required: false }
+  selectedClass: { 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 }
 });
 const props = useDefaults(_props);
 const { filterProps } = useProps(props);
@@ -102,8 +110,10 @@ const handleClick = (event) => {
   groupItem.select(true);
 };
 const hasIndicator = computed(() => props.variant === "underline");
+const { typographyStyles } = useTypography(props, "tabs__item");
 const tabStyles = computed(() => {
   return [
+    typographyStyles.value,
     props.style
   ];
 });

package/dist/src/components/Tabs/OrigamTabPanel.vue

@@ -23,7 +23,7 @@
 	</Transition>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, inject, ref, StyleValue } from "vue";
 import {
   useGroupItem,

package/dist/src/components/Tabs/OrigamTabPanels.vue

@@ -16,7 +16,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, provide, ref, shallowRef, StyleValue, watch } from "vue";
 import { OrigamDefaultsProvider } from "../../components";
 import {