origam 0.3.9 → 2.2.1

package/dist/src/components/TextareaField/OrigamTextareaField.vue

@@ -6,7 +6,9 @@
 			:class="textareaFieldClasses"
 			:focused="isFocused"
 			:style="textareaFieldStyles"
-			v-bind="{ ...rootAttrs, ...inputProps }"
+			v-bind="{...rootAttrs, ...inputProps, rules: enrichedRules}"
+			@click:prepend="handleClickPrepend"
+			@click:append="handleClickAppend"
 	>
 		<template
 				v-if="slots.prepend"
@@ -68,14 +70,14 @@
 					<slot name="prefix"/>
 				</template>
 
-				<template #default="{class: fieldSlotClass, ...fieldSlotProps}">
+				<template #default="{class: fieldSlotClass, ref, ...fieldSlotProps}">
 					<div
 							:class="fieldSlotClass"
 							data-no-activator=""
 					>
 						<slot
 								name="default"
-								v-bind="fieldSlotProps"
+								v-bind="{ref, ...fieldSlotProps}"
 						/>
 						<textarea
 								ref="textareaRef"
@@ -94,7 +96,7 @@
 						/>
 					</div>
 					<div
-							v-if="!autoGrow"
+							v-if="!autoGrow && !noResize"
 							ref="verticalDragger"
 							class="origam-textarea-field__grip"
 					>
@@ -155,18 +157,18 @@
 					v-bind="detailsSlotProps"
 			>
 				<origam-counter
-						:active="props.persistentCounter || isFocused"
-						:disabled="props.disabled"
+						:active="persistentCounter || isFocused"
+						:disabled="disabled"
 						:max="max"
 						:value="counterValue"
 				>
 					<template
 							v-if="slots.counter"
-							#default="{counter, value, max}"
+							#default="{counter, max, value}"
 					>
 						<slot
 								name="counter"
-								v-bind="{counter, value, max}"
+								v-bind="{counter, max, value}"
 						/>
 					</template>
 				</origam-counter>
@@ -203,21 +205,33 @@ import {
   ref,
   shallowRef,
   StyleValue,
+  toRef,
   useAttrs,
   useSlots,
   watch,
   watchEffect
 } from "vue";
 import { OrigamCounter, OrigamField, OrigamInput } from "../../components";
-import { useAdjacentInner, useDragResizer, useFocus, useProps, useVModel } from "../../composables";
+import {
+  useAdjacent,
+  useAdjacentInner,
+  useDefaults,
+  useDragResizer,
+  useFocus,
+  useLocale,
+  useProps,
+  useStyle,
+  useVModel
+} from "../../composables";
 import { vIntersect } from "../../directives";
 import { AXIS, DENSITY, MDI_ICONS } from "../../enums";
-import { clamp, convertToUnit, filterInputAttrs } from "../../utils";
-const props = defineProps({
+import { clamp, convertToUnit, filterInputAttrs, forwardRefs } from "../../utils";
+const _props = defineProps({
   autoGrow: { type: Boolean, required: false },
   autofocus: { type: Boolean, required: false },
   counter: { type: [Boolean, Number, String], required: false },
   counterValue: { type: [Number, Function], required: false },
+  persistentClear: { type: Boolean, required: false },
   prefix: { type: String, required: false },
   placeholder: { type: String, required: false },
   persistentPlaceholder: { type: Boolean, required: false },
@@ -231,26 +245,21 @@ const props = defineProps({
   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 },
-  activeColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
-  active: { type: Boolean, required: false },
   centerAffix: { type: Boolean, required: false },
   dirty: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
-  error: { type: Boolean, required: false },
+  error: { type: [String, Boolean], required: false },
   flat: { type: Boolean, required: false },
+  inline: { type: Boolean, required: false },
   label: { type: String, required: false },
-  persistentClear: { type: Boolean, required: false },
   reverse: { type: Boolean, required: false },
   singleLine: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
-  loading: { type: [Boolean, Number], required: false },
+  loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false },
   tag: { type: String, required: false },
+  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
   appendInnerAvatar: { type: String, required: false },
   appendInnerIcon: { type: null, required: false },
   prependInnerAvatar: { type: String, required: false },
@@ -258,18 +267,9 @@ const props = defineProps({
   clearIcon: { type: null, required: false, default: MDI_ICONS.CLOSE_CIRCLE_OUTLINE },
   clearable: { type: Boolean, required: false },
   focused: { type: Boolean, required: false },
-  hideDetails: { type: [Boolean, String], required: false },
-  hideSpinButtons: { type: Boolean, required: false },
-  hint: { type: String, required: false },
-  persistentHint: { type: Boolean, required: false },
-  messages: { type: [Array, String], required: false },
-  padding: { type: [Boolean, Number, String], required: false },
-  paddingTop: { type: [Boolean, Number, String], required: false },
-  paddingLeft: { type: [Boolean, Number, String], required: false },
-  paddingBottom: { type: [Boolean, Number, String], required: false },
-  paddingRight: { type: [Boolean, Number, String], required: false },
-  paddingBlock: { type: [Boolean, Number, String], required: false },
-  paddingInline: { type: [Boolean, Number, String], required: false },
+  text: { type: String, required: false },
+  floating: { type: Boolean, required: false },
+  name: { type: String, required: false },
   margin: { type: [Boolean, Number, String], required: false },
   marginTop: { type: [Boolean, Number, String], required: false },
   marginLeft: { type: [Boolean, Number, String], required: false },
@@ -277,12 +277,14 @@ const props = defineProps({
   marginRight: { type: [Boolean, Number, String], required: false },
   marginBlock: { type: [Boolean, Number, String], required: false },
   marginInline: { type: [Boolean, Number, String], required: false },
-  rounded: { type: [Boolean, String, Number, null], required: false, skipCheck: true, default: true },
-  roundedTopRight: { type: [Boolean, Number, String], required: false },
-  roundedTopLeft: { type: [Boolean, Number, String], required: false },
-  roundedBottomLeft: { type: [Boolean, Number, String], required: false },
-  roundedBottomRight: { type: [Boolean, Number, String], required: false },
-  border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true, default: true },
+  padding: { type: [Boolean, Number, String], required: false },
+  paddingTop: { type: [Boolean, Number, String], required: false },
+  paddingLeft: { type: [Boolean, Number, String], required: false },
+  paddingBottom: { type: [Boolean, Number, String], required: false },
+  paddingRight: { type: [Boolean, Number, String], required: false },
+  paddingBlock: { type: [Boolean, Number, String], required: false },
+  paddingInline: { type: [Boolean, Number, String], required: false },
+  border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
   borderTop: { type: [Boolean, Number, String], required: false },
   borderLeft: { type: [Boolean, Number, String], required: false },
   borderBottom: { type: [Boolean, Number, String], required: false },
@@ -291,7 +293,21 @@ const props = defineProps({
   borderInline: { type: [Boolean, Number, String], required: false },
   borderColor: { type: String, required: false },
   borderStyle: { type: String, required: false },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true, default: true },
+  roundedTopRight: { type: [Boolean, Number, String], required: false },
+  roundedTopLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomRight: { type: [Boolean, Number, String], required: false },
+  active: { type: [Boolean, Object], required: false },
+  activeClass: { type: String, required: false },
+  variant: { type: null, required: false },
   elevation: { type: [Number, String], required: false },
+  size: { type: null, required: false },
+  hideDetails: { type: [Boolean, String], required: false },
+  hideSpinButtons: { type: Boolean, required: false },
+  hint: { type: String, required: false },
+  persistentHint: { type: Boolean, required: false },
+  messages: { type: [Array, String], required: false },
   height: { type: [Number, String], required: false },
   maxHeight: { type: [Number, String], required: false },
   maxWidth: { type: [Number, String], required: false },
@@ -301,7 +317,6 @@ const props = defineProps({
   direction: { type: null, required: false },
   errorMessages: { type: [Array, String], required: false },
   maxErrors: { type: [Number, String], required: false },
-  name: { type: String, required: false },
   readonly: { type: Boolean, required: false },
   rules: { type: Array, required: false },
   modelValue: { type: null, required: false },
@@ -312,24 +327,21 @@ const props = defineProps({
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false }
 });
-const emits = defineEmits(["click:control", "mousedown:control", "update:focused", "update:modelValue", "click:clear", "click:prepend", "click:append", "click:appendInner", "click:prependInner"]);
-const { filterProps } = useProps(props);
-const attrs = useAttrs();
+const props = useDefaults(_props);
+const emits = defineEmits(["update:height", "click:control", "mousedown:control", "update:focused", "update:modelValue", "click:appendInner", "click:prependInner", "click:clear", "update:active", "click:append", "click:prepend"]);
+defineSlots();
 const slots = useSlots();
+const attrs = useAttrs();
+const { t } = useLocale();
 const model = useVModel(props, "modelValue");
-const { isFocused, onFocus, onBlur: handleBlur } = useFocus(props);
 const {
   onClickAppendInner: handleClickAppendInner,
   onClickPrependInner: handleClickPrependInner
 } = useAdjacentInner(props);
-const counterValue = computed(() => {
-  return typeof props.counterValue === "function" ? props.counterValue(model.value) : (model.value || "").toString().length;
-});
-const max = computed(() => {
-  if (attrs.maxlength) return attrs.maxlength;
-  if (!props.counter || typeof props.counter !== "number" && typeof props.counter !== "string") return void 0;
-  return props.counter;
-});
+const {
+  onClickPrepend: handleClickPrepend,
+  onClickAppend: handleClickAppend
+} = useAdjacent(props, toRef(props, "prependIcon"), toRef(props, "appendIcon"));
 const intersect = computed(() => {
   return [{
     handler: handleIntersect
@@ -343,6 +355,7 @@ const origamInputRef = ref();
 const origamFieldRef = ref();
 const textareaRef = ref();
 const verticalDragger = ref();
+const { isFocused, onFocus, onBlur: handleBlur } = useFocus(props);
 const isActive = computed(() => {
   return props.persistentPlaceholder || isFocused.value || props.active;
 });
@@ -381,39 +394,58 @@ const handleInput = (e) => {
 const handleFocus = () => {
   focus();
 };
-const rows = ref(+props.rows);
+const rows = ref(+(props.rows ?? 3));
 const isUniqueRow = computed(() => {
   return rows.value === 1;
 });
 watchEffect(() => {
-  if (!props.autoGrow) rows.value = +props.rows;
+  if (!props.autoGrow) rows.value = +(props.rows ?? 3);
 });
+const parseCssFloat = (value, fallback = 0) => {
+  const parsed = parseFloat(value);
+  return Number.isNaN(parsed) ? fallback : parsed;
+};
+const getPadding = (style) => {
+  return parseCssFloat(style.getPropertyValue("--origam-field---padding-top")) + parseCssFloat(style.getPropertyValue("--origam-input---padding-top")) + parseCssFloat(style.getPropertyValue("--origam-field---padding-bottom"));
+};
+const getLineHeight = (style) => {
+  const lh = parseCssFloat(style.lineHeight);
+  return lh > 0 ? lh : parseCssFloat(style.fontSize, 16) * 1.5;
+};
 const minHeight = computed(() => {
   if (!textareaRef.value || !origamFieldRef.value) return 0;
   const style = getComputedStyle(textareaRef.value);
   const fieldStyle = getComputedStyle(origamFieldRef.value.$el);
-  const padding = parseFloat(style.getPropertyValue("--origam-field---padding-top")) + parseFloat(style.getPropertyValue("--origam-input---padding-top")) + parseFloat(style.getPropertyValue("--origam-field---padding-bottom"));
-  const lineHeight = parseFloat(style.lineHeight);
+  const padding = getPadding(style);
+  const lineHeight = getLineHeight(style);
+  const rowCount = +(props.rows ?? 3);
+  const fieldMinHeight = parseCssFloat(fieldStyle.getPropertyValue("--origam-input__control---height"));
   return Math.max(
-    parseFloat(props.rows) * lineHeight + padding,
-    parseFloat(fieldStyle.getPropertyValue("--origam-input__control---height"))
+    rowCount * lineHeight + padding,
+    fieldMinHeight
   );
 });
 const maxHeight = computed(() => {
-  if (!textareaRef.value) return 0;
+  if (!textareaRef.value) return Infinity;
+  if (props.maxRows == null) return Infinity;
   const style = getComputedStyle(textareaRef.value);
-  const padding = parseFloat(style.getPropertyValue("--origam-field---padding-top")) + parseFloat(style.getPropertyValue("--origam-input---padding-top")) + parseFloat(style.getPropertyValue("--origam-field---padding-bottom"));
-  const lineHeight = parseFloat(style.lineHeight);
-  return parseFloat(props.maxRows) * lineHeight + padding || Infinity;
+  const padding = getPadding(style);
+  const lineHeight = getLineHeight(style);
+  const maxRowCount = +props.maxRows;
+  if (Number.isNaN(maxRowCount) || maxRowCount <= 0) return Infinity;
+  return maxRowCount * lineHeight + padding;
 });
 const controlHeight = shallowRef(0);
 const calculateInputHeight = () => {
   if (!props.autoGrow) return;
   nextTick(() => {
     if (!textareaRef.value) return;
-    const style = getComputedStyle(textareaRef.value);
-    const padding = parseFloat(style.getPropertyValue("--origam-field---padding-top")) + parseFloat(style.getPropertyValue("--origam-input---padding-top")) + parseFloat(style.getPropertyValue("--origam-field---padding-bottom"));
-    controlHeight.value = clamp((textareaRef.value?.scrollHeight ?? 0) + padding, minHeight.value, maxHeight.value);
+    const padding = getPadding(getComputedStyle(textareaRef.value));
+    textareaRef.value.style.height = "0";
+    const scrollHeight = textareaRef.value.scrollHeight;
+    textareaRef.value.style.height = "";
+    controlHeight.value = clamp(scrollHeight + padding, minHeight.value, maxHeight.value);
+    emits("update:height", controlHeight.value);
   });
 };
 watch([model, () => props.maxRows, () => props.density, () => props.rows], () => {
@@ -430,8 +462,9 @@ watch(controlHeight, (newHeight) => {
   nextTick(() => {
     if (!textareaRef.value) return;
     const style = getComputedStyle(textareaRef.value);
-    const padding = parseFloat(style.getPropertyValue("--origam-field---padding-top")) + parseFloat(style.getPropertyValue("--origam-input---padding-top")) + parseFloat(style.getPropertyValue("--origam-field---padding-bottom"));
-    const lineHeight = parseFloat(style.lineHeight);
+    const padding = getPadding(style);
+    const lineHeight = getLineHeight(style);
+    if (lineHeight <= 0) return;
     rows.value = Math.floor((newHeight - padding) / lineHeight);
   });
 });
@@ -447,12 +480,28 @@ watch(textareaRef, (val) => {
 onBeforeUnmount(() => {
   observer?.disconnect();
 });
+const counterValue = computed(() => {
+  return typeof props.counterValue === "function" ? props.counterValue(model.value) : (model.value || "").toString().length;
+});
+const max = computed(() => {
+  if (attrs.maxlength) return attrs.maxlength;
+  if (!props.counter || typeof props.counter !== "number" && typeof props.counter !== "string") return void 0;
+  return props.counter;
+});
 const hasCounter = computed(() => {
   return slots.counter || props.counter || props.counterValue;
 });
 const hasDetails = computed(() => {
   return hasCounter.value || slots.details;
 });
+const enrichedRules = computed(() => {
+  const base = Array.isArray(props.rules) ? [...props.rules] : [];
+  if (props.counter && typeof props.counter === "number") {
+    const limit = props.counter;
+    base.push((v) => !v || v.length <= limit || t("origam.validation.max_length", [limit]));
+  }
+  return base;
+});
 const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
 const inputProps = computed(() => {
   return origamInputRef.value?.filterProps(props, ["modelValue", "class", "style", "id", "focused", "centerAffix"]);
@@ -484,15 +533,24 @@ const textareaFieldFieldStyles = computed(() => {
     "--origam-textarea-field__control---height": convertToUnit(controlHeight.value)
   };
 });
-defineExpose({
-  filterProps
-});
+const { filterProps } = useProps(props);
+const { id, css, load, isLoaded, unload } = useStyle(textareaFieldStyles);
+defineExpose(forwardRefs({
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
+}, origamFieldRef, origamInputRef, textareaRef));
 </script>
 
 <style lang="scss" scoped>
 	.origam-textarea-field {
 		$this: &;
 
+		--origam-field__input---padding-bottom: var(--origam-field__input---padding-top);
+
 		:deep(.origam-field) {
 			--origam-textarea-field__control---height: var(--origam-input__control---height);
 
@@ -513,6 +571,12 @@ defineExpose({
 					opacity: 1;
 				}
 			}
+
+			textarea {
+				border: none;
+				background: transparent;
+				resize: none;
+			}
 		}
 
 		:deep(textarea) {
@@ -539,19 +603,19 @@ defineExpose({
 		}
 
 		&__grip {
-			width: 100%;
 			position: absolute;
 			bottom: 0;
-			left: 0;
-			border: 1px solid #ddd;
+			left: calc(0px - var(--origam-field---padding-start));
+			border: 1px solid var(--origam-textarea-field__grip---border-color, var(--origam-color__border---subtle));
 			border-top-width: 0;
 			cursor: ns-resize;
-			height: 9px;
+			height: var(--origam-textarea-field__grip---height, 9px);
 			overflow: hidden;
 			display: flex;
 			justify-content: center;
 			align-items: center;
-			opacity: 0.2;
+			opacity: var(--origam-textarea-field__grip---opacity, 0.2);
+			width: calc(100% + var(--origam-field---padding-start) + var(--origam-field---padding-end));
 
 			&:hover {
 				color: currentColor;

package/dist/src/components/ThemeProvider/OrigamThemeProvider.vue

@@ -0,0 +1,29 @@
+<template>
+	<component
+			:is="tag"
+			:class="themeProviderClasses"
+			:data-theme="dataTheme"
+	>
+		<slot/>
+	</component>
+</template>
+
+<script setup>
+import { computed, useAttrs } from "vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  theme: { type: [String, Object], required: false, default: "auto" },
+  tag: { type: String, required: false, default: "div" }
+});
+const attrs = useAttrs();
+const dataTheme = computed(() => props.theme === "auto" ? void 0 : props.theme);
+const themeProviderClasses = computed(() => {
+  return ["origam-theme-provider", attrs.class];
+});
+</script>
+
+<style lang="scss" scoped>
+	.origam-theme-provider {
+		display: contents;
+	}
+</style>

package/dist/src/components/ThemeProvider/index.cjs

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "OrigamThemeProvider", {
+  enumerable: true,
+  get: function () {
+    return _OrigamThemeProvider.default;
+  }
+});
+var _OrigamThemeProvider = _interopRequireDefault(require("./OrigamThemeProvider.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/src/components/ThemeProvider/index.d.ts

@@ -0,0 +1 @@
+export { default as OrigamThemeProvider } from './OrigamThemeProvider.vue';

package/dist/src/components/ThemeProvider/index.js

@@ -0,0 +1 @@
+export { default as OrigamThemeProvider } from "./OrigamThemeProvider.vue";

package/dist/src/components/Timeline/OrigamTimeline.vue

@@ -0,0 +1,209 @@
+<template>
+	<component
+		:is="tag || 'div'"
+		:class="timelineClasses"
+		:style="timelineStyles"
+		role="list"
+		:aria-label="ariaLabel"
+	>
+		<div
+				v-if="orientation === 'horizontal'"
+				class="origam-timeline__track-wrapper"
+		>
+			<slot name="default">
+				<origam-timeline-item
+					v-for="(entry, index) in items"
+					:key="index"
+					:title="entry.title"
+					:subtitle="entry.subtitle"
+					:description="entry.description"
+					:icon="entry.icon"
+					:intent="entry.intent"
+					:is-last="index === items!.length - 1"
+					:truncate-line="truncateLine ?? false"
+					:side="side ?? 'start'"
+					:orientation="orientation"
+					:index="index"
+					:data-cy="`timeline-item-${index}`"
+				/>
+			</slot>
+		</div>
+
+		<slot v-else name="default">
+			<origam-timeline-item
+				v-for="(entry, index) in items"
+				:key="index"
+				:title="entry.title"
+				:subtitle="entry.subtitle"
+				:description="entry.description"
+				:icon="entry.icon"
+				:intent="entry.intent"
+				:is-last="index === items!.length - 1"
+				:truncate-line="truncateLine ?? false"
+				:side="side ?? 'start'"
+				:orientation="orientation"
+				:index="index"
+				:data-cy="`timeline-item-${index}`"
+			/>
+		</slot>
+	</component>
+</template>
+
+<script setup>
+import { computed, provide } from "vue";
+import { OrigamTimelineItem } from "../../components";
+import {
+  useDensity,
+  useProps,
+  useSize,
+  useStyle
+} from "../../composables";
+import { TIMELINE_CONTEXT_KEY } from "../../consts";
+const props = defineProps({
+  items: { type: Array, required: false },
+  orientation: { type: String, required: false, default: "vertical" },
+  side: { type: String, required: false, default: "start" },
+  truncateLine: { type: Boolean, required: false, default: false },
+  ariaLabel: { type: String, 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 },
+  tag: { type: String, required: false, default: "div" },
+  color: { type: [String, Boolean, null], required: false, skipCheck: true },
+  size: { type: null, required: false },
+  density: { type: null, required: false }
+});
+const { filterProps } = useProps(props);
+const orientation = computed(() => props.orientation ?? "vertical");
+const { densityClasses } = useDensity(props);
+const { sizeClasses } = useSize(props);
+provide(TIMELINE_CONTEXT_KEY, {
+  get side() {
+    return props.side ?? "start";
+  },
+  get truncateLine() {
+    return props.truncateLine ?? false;
+  },
+  get orientation() {
+    return orientation.value;
+  },
+  get color() {
+    const c = props.color;
+    return typeof c === "string" ? c : void 0;
+  }
+});
+const timelineClasses = computed(() => [
+  "origam-timeline",
+  `origam-timeline--orientation-${orientation.value}`,
+  {
+    [`origam-timeline--side-${props.side}`]: !!props.side,
+    "origam-timeline--truncate-line": props.truncateLine
+  },
+  densityClasses.value,
+  sizeClasses.value,
+  props.class
+]);
+const timelineStyles = computed(() => [
+  props.style
+]);
+const { id, css, load, isLoaded, unload } = useStyle(timelineStyles);
+defineExpose({
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
+});
+</script>
+
+<style lang="scss" scoped>
+	.origam-timeline {
+		display: flex;
+		flex-direction: column;
+		background-color: var(--origam-timeline---background-color, var(--origam-color__surface---default));
+		color: var(--origam-timeline---color, var(--origam-color__text---primary));
+		padding-block: var(--origam-timeline---padding-block, 8px);
+		padding-inline: var(--origam-timeline---padding-inline, 16px);
+
+		// ── Size variants ────────────────────────────────────────────
+		// Each tier scales the dot, the track width, the gap between
+		// adjacent items, and both title / subtitle font-sizes. Token
+		// values are inherited by descendants (OrigamTimelineItem) via
+		// CSS custom-property cascade.
+		&--size-x-small {
+			--origam-timeline---dot-size: 8px;
+			--origam-timeline---track-width: 16px;
+			--origam-timeline---gap: 8px;
+			--origam-timeline---title-font-size: 0.75rem;
+			--origam-timeline---subtitle-font-size: 0.625rem;
+		}
+
+		&--size-small {
+			--origam-timeline---dot-size: 10px;
+			--origam-timeline---track-width: 20px;
+			--origam-timeline---gap: 10px;
+			--origam-timeline---title-font-size: 0.8125rem;
+			--origam-timeline---subtitle-font-size: 0.6875rem;
+		}
+
+		&--size-default {
+			--origam-timeline---dot-size: 12px;
+			--origam-timeline---track-width: 24px;
+			--origam-timeline---gap: 14px;
+			--origam-timeline---title-font-size: 0.875rem;
+			--origam-timeline---subtitle-font-size: 0.75rem;
+		}
+
+		&--size-large {
+			--origam-timeline---dot-size: 16px;
+			--origam-timeline---track-width: 32px;
+			--origam-timeline---gap: 18px;
+			--origam-timeline---title-font-size: 1rem;
+			--origam-timeline---subtitle-font-size: 0.8125rem;
+		}
+
+		&--size-x-large {
+			--origam-timeline---dot-size: 20px;
+			--origam-timeline---track-width: 40px;
+			--origam-timeline---gap: 22px;
+			--origam-timeline---title-font-size: 1.125rem;
+			--origam-timeline---subtitle-font-size: 0.875rem;
+		}
+
+		// ── Orientation: vertical (default) ──────────────────────────
+		&--orientation-vertical {
+			flex-direction: column;
+		}
+
+		// ── Orientation: horizontal ──────────────────────────────────
+		// Wraps items inside a scroll-snapping track so the user can
+		// navigate point-to-point with a swipe / scroll / arrow keys.
+		// Each item lays out as a column (dot on top, content below).
+		&--orientation-horizontal {
+			flex-direction: row;
+			overflow: hidden;
+
+			.origam-timeline__track-wrapper {
+				display: flex;
+				flex-direction: row;
+				align-items: flex-start;
+				gap: 0;
+				overflow-x: auto;
+				overflow-y: hidden;
+				scroll-snap-type: x mandatory;
+				scroll-behavior: smooth;
+				width: 100%;
+				padding-block: var(--origam-timeline---padding-block, 8px);
+
+				// Hide the scrollbar — the dots + their connectors are
+				// enough of a progress affordance.
+				scrollbar-width: none;
+
+				&::-webkit-scrollbar {
+					display: none;
+				}
+			}
+		}
+	}
+</style>