origam 2.14.0 → 2.15.0

package/dist/src/components/Transition/OrigamScaleRotate.vue

@@ -20,6 +20,7 @@ const props = defineProps({
   origin: { type: String, required: false }
 });
 const { filterProps } = useProps(props);
+defineSlots();
 const { name, tag, transitionProps } = useCssTransition(props);
 defineExpose({
   filterProps

package/dist/src/components/Transition/OrigamSlideX.vue

@@ -20,6 +20,7 @@ const props = defineProps({
   origin: { type: String, required: false }
 });
 const { filterProps } = useProps(props);
+defineSlots();
 const { name, tag, transitionProps } = useCssTransition(props);
 defineExpose({
   filterProps

package/dist/src/components/Transition/OrigamSlideY.vue

@@ -20,6 +20,7 @@ const props = defineProps({
   origin: { type: String, required: false }
 });
 const { filterProps } = useProps(props);
+defineSlots();
 const { name, tag, transitionProps } = useCssTransition(props);
 defineExpose({
   filterProps

package/dist/src/components/Transition/OrigamSnack.vue

@@ -20,6 +20,7 @@ const props = defineProps({
   origin: { type: String, required: false }
 });
 const { filterProps } = useProps(props);
+defineSlots();
 const { name, tag, transitionProps } = useCssTransition(props);
 defineExpose({
   filterProps

package/dist/src/components/Transition/OrigamTransition.vue

@@ -17,6 +17,7 @@ const props = defineProps({
   disabled: { type: Boolean, required: false }
 });
 const { filterProps } = useProps(props);
+defineSlots();
 const attrs = useAttrs();
 const { isDisabled } = useTransition(props);
 const component = computed(() => {

package/dist/src/components/Transition/OrigamTranslateBottom.vue

@@ -20,6 +20,7 @@ const props = defineProps({
   origin: { type: String, required: false }
 });
 const { filterProps } = useProps(props);
+defineSlots();
 const { name, tag, transitionProps } = useCssTransition(props);
 defineExpose({
   filterProps

package/dist/src/components/Transition/OrigamTranslatePicker.vue

@@ -20,6 +20,7 @@ const props = defineProps({
   origin: { type: String, required: false }
 });
 const { filterProps } = useProps(props);
+defineSlots();
 const { name, tag, transitionProps } = useCssTransition(props);
 defineExpose({
   filterProps

package/dist/src/components/Transition/OrigamTranslateScale.vue

@@ -23,6 +23,7 @@ const props = defineProps({
   origin: { type: String, required: false }
 });
 const { filterProps } = useProps(props);
+defineSlots();
 const hasTarget = computed(() => {
   return !!props.target;
 });

package/dist/src/components/Transition/OrigamWindowXReverseTranslate.vue

@@ -20,6 +20,7 @@ const props = defineProps({
   origin: { type: String, required: false }
 });
 const { filterProps } = useProps(props);
+defineSlots();
 const { name, tag, transitionProps } = useWindowTransition(props);
 defineExpose({
   filterProps

package/dist/src/components/Transition/OrigamWindowXTranslate.vue

@@ -20,6 +20,7 @@ const props = defineProps({
   origin: { type: String, required: false }
 });
 const { filterProps } = useProps(props);
+defineSlots();
 const { name, tag, transitionProps } = useWindowTransition(props);
 defineExpose({
   filterProps

package/dist/src/components/Transition/OrigamWindowYReverseTranslate.vue

@@ -20,6 +20,7 @@ const props = defineProps({
   origin: { type: String, required: false }
 });
 const { filterProps } = useProps(props);
+defineSlots();
 const { name, tag, transitionProps } = useWindowTransition(props);
 defineExpose({
   filterProps

package/dist/src/components/Transition/OrigamWindowYTranslate.vue

@@ -20,6 +20,7 @@ const props = defineProps({
   origin: { type: String, required: false }
 });
 const { filterProps } = useProps(props);
+defineSlots();
 const { name, tag, transitionProps } = useWindowTransition(props);
 defineExpose({
   filterProps

package/dist/src/components/Video/OrigamVideo.vue

@@ -239,7 +239,7 @@ const props = defineProps({
   autoplay: { type: Boolean, required: false, default: false },
   muted: { type: Boolean, required: false, default: false },
   loop: { type: Boolean, required: false, default: false },
-  controls: { type: String, required: false, default: "custom" },
+  controls: { type: null, required: false, default: "custom" },
   playsInline: { type: Boolean, required: false, default: true },
   preload: { type: String, required: false, default: "metadata" },
   aspectRatio: { type: String, required: false, default: "16/9" },
@@ -305,6 +305,7 @@ const props = defineProps({
   letterSpacing: { type: String, required: false }
 });
 const emit = defineEmits(["enterfullscreen", "exitfullscreen", "enterpip", "exitpip", "skip", "quality-change", "download", "play", "pause", "ended", "timeupdate", "volumechange", "loadedmetadata", "error", "update:playbackRate"]);
+defineSlots();
 const ICONS = {
   PLAY: MDI_ICONS.PLAY,
   PAUSE: MDI_ICONS.PAUSE,

package/dist/src/components/VirtualScroll/OrigamVirtualScroll.vue

@@ -104,6 +104,7 @@ const props = defineProps({
   scrollDuration: { type: Number, required: false },
   scrollEasing: { type: String, required: false }
 });
+defineSlots();
 const { filterProps } = useProps(props);
 const vm = getCurrentInstance("OrigamVirtualScroll");
 const { dimensionStyles } = useDimension(props);

package/dist/src/components/VirtualScroll/OrigamVirtualScrollItem.vue

@@ -31,6 +31,7 @@ const props = defineProps({
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true }
 });
 const emits = defineEmits(["update:height"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const attrs = useAttrs();
 const { resizeRef, contentRect } = useResizeObserver(void 0, "border");

package/dist/src/components/Watermark/OrigamWatermark.vue

@@ -59,6 +59,7 @@ const resolvedOptions = computed(() => ({
   pointerEvents: props.pointerEvents,
   zIndex: props.zIndex
 }));
+defineSlots();
 const { patternUrl } = useWatermark(resolvedOptions);
 const rootEl = ref(null);
 const layerEl = ref(null);

package/dist/src/components/Window/OrigamWindow.vue

@@ -133,6 +133,7 @@ const props = defineProps({
   activeClass: { type: String, required: false }
 });
 defineEmits(["update:modelValue"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const { t } = useLocale();
 const group = useGroup(props, ORIGAM_WINDOW_GROUP_KEY);

package/dist/src/components/Window/OrigamWindowItem.vue

@@ -42,6 +42,7 @@ const props = defineProps({
   selectedClass: { type: String, required: false }
 });
 defineEmits(["group:selected"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const window = inject(ORIGAM_WINDOW_KEY);
 const groupItem = useGroupItem(props, ORIGAM_WINDOW_GROUP_KEY);

package/dist/src/composables/Commons/border.composable.cjs

@@ -53,6 +53,24 @@ function useBorder(props, name = (0, _utils.getCurrentInstanceName)()) {
       } = props;
       if (!(0, _utils.isEmpty)(borderColor)) styles.push(`border-color: ${borderColor}`);
       if (!(0, _utils.isEmpty)(borderStyle)) styles.push(`border-style: ${borderStyle}`);
+      _consts.BORDER_LOGICAL_AXIS_MAP.forEach(({
+        axis,
+        widthProp
+      }) => {
+        const axisValue = props[widthProp];
+        if (typeof axisValue === "number") {
+          styles.push(`border-${axis}-width: ${(0, _utils.convertToUnit)(axisValue)}`);
+          styles.push(`border-${axis}-style: solid`);
+          styles.push(`border-${axis}-color: currentColor`);
+        } else if (axisValue === true) {
+          styles.push(`border-${axis}-width: var(--origam-border__width---thin)`);
+          styles.push(`border-${axis}-style: solid`);
+          styles.push(`border-${axis}-color: currentColor`);
+        } else if (typeof axisValue === "string" && axisValue !== "") {
+          const parsed = (0, _utils.parseBorderPositionValue)(axisValue);
+          if (parsed) styles.push(...(0, _utils.formatBorderPositionStylesVar)(axis, parsed));
+        }
+      });
       _consts.BORDER_POSITION_MAP.forEach(({
         side,
         widthProp,

package/dist/src/composables/Commons/border.composable.d.ts

@@ -12,16 +12,20 @@ import { TDirectionBoth } from "../../types";
  *
  *   1. global `border` shorthand (1/2/4-value, logical properties)
  *   2. global standalone `borderColor` / `borderStyle`
- *   3. per-side `borderTop` / `borderRight` / `borderBottom` / `borderLeft`
- *      (physical properties — width, and style/color when a full string
- *      like `"2px dashed red"` is given)
- *   4. per-side `borderTopColor` / `borderRightColor` /
+ *   3. logical-axis `borderBlock` / `borderInline` (width, and
+ *      style/color when a full string like `"2px dashed red"` is given)
+ *   4. per-side `borderTop` / `borderRight` / `borderBottom` / `borderLeft`
+ *      (physical properties — more specific than the axis rung above:
+ *      `borderTop` overrides whatever `borderBlock` set for the top edge)
+ *   5. per-side `borderTopColor` / `borderRightColor` /
  *      `borderBottomColor` / `borderLeftColor`
  *
- * So `borderTop` beats `border` for the top side, and `borderTopColor`
- * beats both the color embedded in `borderTop` and the global
- * `borderColor` — each rung only overrides the physical side(s) it
- * actually targets, everything else keeps cascading from the rung below.
+ * So `borderBlock` beats `border` for the top+bottom edges, `borderTop`
+ * beats both `border` and `borderBlock` for the top side specifically,
+ * and `borderTopColor` beats the color embedded in `borderTop`, the
+ * axis-level color, and the global `borderColor` — each rung only
+ * overrides the side(s)/axis it actually targets, everything else keeps
+ * cascading from the rung below.
  ********************************************************/
 export declare function useBorder(props: IBorderProps | Ref<boolean | number | string | TDirectionBoth | Array<TDirectionBoth> | null | undefined>, name?: string): {
     borderClasses: import("vue").ComputedRef<string[]>;

package/dist/src/composables/Commons/border.composable.js

@@ -1,5 +1,5 @@
 import { computed, isRef } from "vue";
-import { BORDER_POSITION_MAP, BORDER_REGEX, DIRECTION_ARRAY } from "../../consts/index.js";
+import { BORDER_LOGICAL_AXIS_MAP, BORDER_POSITION_MAP, BORDER_REGEX, DIRECTION_ARRAY } from "../../consts/index.js";
 import {
   convertToUnit,
   formatBorderPositionStylesVar,
@@ -56,6 +56,21 @@ export function useBorder(props, name = getCurrentInstanceName()) {
       const { borderColor, borderStyle } = props;
       if (!isEmpty(borderColor)) styles.push(`border-color: ${borderColor}`);
       if (!isEmpty(borderStyle)) styles.push(`border-style: ${borderStyle}`);
+      BORDER_LOGICAL_AXIS_MAP.forEach(({ axis, widthProp }) => {
+        const axisValue = props[widthProp];
+        if (typeof axisValue === "number") {
+          styles.push(`border-${axis}-width: ${convertToUnit(axisValue)}`);
+          styles.push(`border-${axis}-style: solid`);
+          styles.push(`border-${axis}-color: currentColor`);
+        } else if (axisValue === true) {
+          styles.push(`border-${axis}-width: var(--origam-border__width---thin)`);
+          styles.push(`border-${axis}-style: solid`);
+          styles.push(`border-${axis}-color: currentColor`);
+        } else if (typeof axisValue === "string" && axisValue !== "") {
+          const parsed = parseBorderPositionValue(axisValue);
+          if (parsed) styles.push(...formatBorderPositionStylesVar(axis, parsed));
+        }
+      });
       BORDER_POSITION_MAP.forEach(({ side, widthProp, colorProp }) => {
         const sideValue = props[widthProp];
         const sideColor = props[colorProp];

package/dist/src/composables/Commons/defaults.composable.cjs

@@ -18,7 +18,7 @@ function usePassedProps(_props, instanceLabel = "usePassedProps") {
   return key => {
     const vnodeProps = vm.vnode.props || {};
     for (const k in vnodeProps) {
-      if (k === key || camelize(k) === key) return true;
+      if (k === key || camelize(k) === key) return vnodeProps[k] !== void 0;
     }
     return false;
   };

package/dist/src/composables/Commons/defaults.composable.js

@@ -9,7 +9,7 @@ export function usePassedProps(_props, instanceLabel = "usePassedProps") {
   return (key) => {
     const vnodeProps = vm.vnode.props || {};
     for (const k in vnodeProps) {
-      if (k === key || camelize(k) === key) return true;
+      if (k === key || camelize(k) === key) return vnodeProps[k] !== void 0;
     }
     return false;
   };

package/dist/src/composables/Commons/nested.composable.cjs

@@ -67,7 +67,7 @@ const useNested = props => {
         const arr = [];
         if (selected.value) {
           for (const [key, value] of selected.value.entries()) {
-            if (value === "on") arr.push(key);
+            if (value === _enums.SELECTED.ON) arr.push(key);
           }
         }
         return arr;
@@ -181,8 +181,8 @@ function useNestedItem(id, isGroup) {
         parent.root.select(computedId.value, selected, e);
       }
     },
-    isSelected: (0, _vue.computed)(() => Boolean(parent?.root?.selected.value.get((0, _vue.toRaw)(computedId.value)) === "on")),
-    isIndeterminate: (0, _vue.computed)(() => Boolean(parent?.root?.selected.value.get(computedId.value) === "indeterminate")),
+    isSelected: (0, _vue.computed)(() => Boolean(parent?.root?.selected.value.get((0, _vue.toRaw)(computedId.value)) === _enums.SELECTED.ON)),
+    isIndeterminate: (0, _vue.computed)(() => Boolean(parent?.root?.selected.value.get(computedId.value) === _enums.SELECTED.INDETERMINATE)),
     isLeaf: (0, _vue.computed)(() => Boolean(!parent?.root?.children.value.get(computedId.value))),
     isGroupActivator: parent?.isGroupActivator
   };

package/dist/src/composables/Commons/nested.composable.d.ts

@@ -1,10 +1,11 @@
+import { SELECTED } from '../../enums';
 import type { INestedProps } from '../../interfaces';
 import { Ref } from 'vue';
 export declare const useNested: (props: INestedProps) => {
     children: Ref<Map<unknown, Array<unknown>>>;
     parents: Ref<Map<unknown, unknown>>;
     opened: Ref<Set<unknown>>;
-    selected: Ref<Map<unknown, `${import("../../enums").SELECTED}`>>;
+    selected: Ref<Map<unknown, `${SELECTED}`>>;
     selectedValues: Ref<Array<unknown>>;
     register: (id: unknown, parentId: unknown, isGroup?: boolean) => void;
     unregister: (id: unknown) => void;
@@ -30,7 +31,7 @@ export declare function useNestedItem(id: Ref<unknown>, isGroup: boolean): {
         children: Ref<Map<unknown, Array<unknown>>>;
         parents: Ref<Map<unknown, unknown>>;
         opened: Ref<Set<unknown>>;
-        selected: Ref<Map<unknown, `${import("../../enums").SELECTED}`>>;
+        selected: Ref<Map<unknown, `${SELECTED}`>>;
         selectedValues: Ref<Array<unknown>>;
         register: (id: unknown, parentId: unknown, isGroup?: boolean) => void;
         unregister: (id: unknown) => void;

package/dist/src/composables/Commons/nested.composable.js

@@ -6,7 +6,7 @@ import {
   ORIGAM_NESTED_KEY,
   SINGLE_OPEN_STRATEGY
 } from "../../consts/index.js";
-import { OPEN_STRATEGY, SELECT_STRATEGY } from "../../enums/index.js";
+import { OPEN_STRATEGY, SELECTED, SELECT_STRATEGY } from "../../enums/index.js";
 import {
   classicSelectStrategy,
   getCurrentInstance,
@@ -79,7 +79,7 @@ export const useNested = (props) => {
         const arr = [];
         if (selected.value) {
           for (const [key, value] of selected.value.entries()) {
-            if (value === "on") arr.push(key);
+            if (value === SELECTED.ON) arr.push(key);
           }
         }
         return arr;
@@ -182,8 +182,8 @@ export function useNestedItem(id, isGroup) {
         parent.root.select(computedId.value, selected, e);
       }
     },
-    isSelected: computed(() => Boolean(parent?.root?.selected.value.get(toRaw(computedId.value)) === "on")),
-    isIndeterminate: computed(() => Boolean(parent?.root?.selected.value.get(computedId.value) === "indeterminate")),
+    isSelected: computed(() => Boolean(parent?.root?.selected.value.get(toRaw(computedId.value)) === SELECTED.ON)),
+    isIndeterminate: computed(() => Boolean(parent?.root?.selected.value.get(computedId.value) === SELECTED.INDETERMINATE)),
     isLeaf: computed(() => Boolean(!parent?.root?.children.value.get(computedId.value))),
     isGroupActivator: parent?.isGroupActivator
   };

package/dist/src/composables/Commons/stateEffect.composable.cjs

@@ -110,6 +110,12 @@ function useStateEffect(props, isHover = noopRef, isActive = noopRef, hoverState
     get borderStyle() {
       return props.borderStyle;
     },
+    get borderBlock() {
+      return props.borderBlock;
+    },
+    get borderInline() {
+      return props.borderInline;
+    },
     get borderTop() {
       return props.borderTop;
     },

package/dist/src/composables/Commons/stateEffect.composable.js

@@ -121,6 +121,12 @@ export function useStateEffect(props, isHover = noopRef, isActive = noopRef, hov
       get borderStyle() {
         return props.borderStyle;
       },
+      get borderBlock() {
+        return props.borderBlock;
+      },
+      get borderInline() {
+        return props.borderInline;
+      },
       get borderTop() {
         return props.borderTop;
       },

package/dist/src/composables/Commons/style.composable.cjs

@@ -63,7 +63,10 @@ function toDeclarations(value) {
 }
 function useStyle(styles, uniq = void 0, name = (0, _utils.getCurrentInstanceName)()) {
   const fallbackId = `${name}-${(0, _utils.getUid)()}`;
-  const id = (0, _vue.computed)(() => (0, _vue.toValue)(uniq) || fallbackId);
+  const id = (0, _vue.computed)(() => {
+    const requested = (0, _vue.toValue)(uniq);
+    return typeof requested === "string" && requested.length > 0 ? requested : fallbackId;
+  });
   const customCss = (0, _vue.computed)(() => {
     const stylesArray = toDeclarations(styles.value);
     return `#${(0, _utils.escapeCssIdent)(id.value)} {${stylesArray.join(";")}}`;

package/dist/src/composables/Commons/style.composable.js

@@ -65,7 +65,10 @@ function toDeclarations(value) {
 }
 export function useStyle(styles, uniq = void 0, name = getCurrentInstanceName()) {
   const fallbackId = `${name}-${getUid()}`;
-  const id = computed(() => toValue(uniq) || fallbackId);
+  const id = computed(() => {
+    const requested = toValue(uniq);
+    return typeof requested === "string" && requested.length > 0 ? requested : fallbackId;
+  });
   const customCss = computed(() => {
     const stylesArray = toDeclarations(styles.value);
     return `#${escapeCssIdent(id.value)} {${stylesArray.join(";")}}`;

package/dist/src/composables/Commons/teleport-typography.composable.cjs

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTeleportTypography = useTeleportTypography;
+var _vue = require("vue");
+function useTeleportTypography(fieldRef, isOpen, extraVars, measureSelector = ".origam-field", neutralFontSize = "16px") {
+  const typographyStyles = (0, _vue.ref)({});
+  const fieldElement = () => {
+    const root = fieldRef.value?.$el;
+    if (!root || typeof root.querySelector !== "function") return void 0;
+    return root.querySelector(measureSelector) ?? root;
+  };
+  const sync = () => {
+    const el = fieldElement();
+    if (!el || typeof window === "undefined") return;
+    const styles = window.getComputedStyle(el);
+    const fontSize = styles.fontSize;
+    if (!fontSize) return;
+    if (fontSize === neutralFontSize) {
+      typographyStyles.value = {};
+      return;
+    }
+    typographyStyles.value = {
+      "font-family": styles.fontFamily,
+      "font-size": fontSize,
+      "letter-spacing": styles.letterSpacing,
+      ...extraVars(fontSize)
+    };
+  };
+  (0, _vue.watch)(isOpen, open => {
+    if (open) (0, _vue.nextTick)(sync);
+  });
+  return {
+    typographyStyles
+  };
+}

package/dist/src/composables/Commons/teleport-typography.composable.d.ts

@@ -0,0 +1,86 @@
+import type { Ref } from 'vue';
+/**
+ * useTeleportTypography — bridges the field's REAL typography across a
+ * teleported surface (menu, picker, …).
+ *
+ * @description
+ * Floating surfaces (`OrigamMenu` and everything built on it — Select's
+ * option list, ColorPickerField's channel editor, DatePickerField's
+ * calendar) are teleported out of the field's DOM subtree, to escape
+ * `overflow` and stacking contexts. A CSS rule the consuming application
+ * writes against the field — `.my-field * { font-size: 13px }`, a compact
+ * form theme, a scaled container — therefore never reaches the popup: the
+ * selector simply does not match nodes outside the field's subtree.
+ *
+ * Re-inheriting `font-size` on the teleported root is NOT enough on its
+ * own, either. Descendant text that sizes itself with a `rem`-based token
+ * (`var(--origam-list-item__title---font-size, 1rem)`,
+ * `var(--origam-picker-title---font-size, .75rem)`, …) resolves `rem`
+ * against the DOCUMENT ROOT, not the inherited value — it would keep the
+ * root size whatever the teleported ancestor inherits.
+ *
+ * So this composable measures the typography that ACTUALLY WON on the
+ * field when the surface opens (`getComputedStyle`, not the props — the
+ * props can't see a consumer's own stylesheet) and hands back a plain
+ * style object the caller republishes on the teleported content root as
+ * both generic CSS (`font-family` / `font-size` / `letter-spacing`, for
+ * whatever inherits normally) AND the specific component tokens the
+ * surface's own `rem`-sized text reads (via `extraVars`), so the two
+ * layers of the bug are closed together. Originates from `OrigamSelect`
+ * (commit `8354407c`) — extracted here so `OrigamColorPickerField` /
+ * `OrigamDatePickerField` don't reimplement the same measurement.
+ *
+ * Measured on `.origam-field` (NOT the raw `<input>`), which is the one
+ * element every `<origam-text-field>`-based field renders with a plain,
+ * unconditional `font-size: 16px` (no prop/token influences it — see
+ * `OrigamField`'s own SCSS). The raw `<input>` is NOT a safe measurement
+ * point: on `OrigamColorPickerField` / `OrigamDatePickerField` it is
+ * deliberately taken out of flow and carries none of `OrigamInput`'s
+ * classes, so it renders at the BROWSER's own default control font
+ * (13.3333px in Chrome) rather than the design system's — a value with
+ * nothing to do with the field's real typography.
+ *
+ * That same "16px, unconditionally" fact is also what keeps this bridge a
+ * true no-op absent a consumer override: `neutralFontSize` (default
+ * `'16px'`) is the value `.origam-field` would show with zero consuming-app
+ * CSS involved. When the measured size still equals it, nothing diverges —
+ * `typographyStyles` stays empty and every surface keeps its OWN historical
+ * default (`.75rem` list-item text, `.85rem` calendar cells, …), instead of
+ * being forced to 16px on every open. Only an ACTUAL divergence (a
+ * consumer's stylesheet, a different field wrapper with its own baseline)
+ * republishes the tokens.
+ *
+ * @param fieldRef  ref to the field sub-component (e.g. the wrapped
+ *                  `<origam-text-field>`). Its `$el` is the DOM root the
+ *                  typography is measured FROM.
+ * @param isOpen    ref toggled when the teleported surface opens; the
+ *                  measurement re-runs on every open (the consumer's CSS
+ *                  can change between opens — a live theme switch, a
+ *                  responsive breakpoint, …).
+ * @param extraVars given the resolved `font-size`, returns the extra
+ *                  `{ '--origam-…---font-size': value }` entries for the
+ *                  specific tokens the surface's own `rem`-sized text
+ *                  reads. Read the surface's SCSS before adding one —
+ *                  republishing a var nothing consumes is a no-op.
+ * @param measureSelector  selector for the element the typography is read
+ *                  from, resolved within `fieldRef`'s root (defaults to
+ *                  `'.origam-field'`). Falls back to the root itself when
+ *                  no match is found.
+ * @param neutralFontSize  the `measureSelector` element's OWN unstyled
+ *                  `font-size` (defaults to `'16px'`, `.origam-field`'s
+ *                  literal default). When the measured value still equals
+ *                  this, the bridge is a no-op for this open — see above.
+ *
+ * @example
+ * const { typographyStyles } = useTeleportTypography(origamTextFieldRef, menu, (fontSize) => ({
+ *     '--origam-list-item__title---font-size': fontSize,
+ *     '--origam-list-item__subtitle---font-size': `calc(${ fontSize } * 0.875)`
+ * }))
+ * // …
+ * contentProps: { style: [typographyStyles.value, consumerContentProps.style] }
+ */
+export declare function useTeleportTypography(fieldRef: Ref<{
+    $el?: HTMLElement;
+} | undefined>, isOpen: Ref<boolean>, extraVars: (fontSize: string) => Record<string, string>, measureSelector?: string, neutralFontSize?: string): {
+    typographyStyles: Ref<Record<string, string>, Record<string, string>>;
+};

package/dist/src/composables/Commons/teleport-typography.composable.js

@@ -0,0 +1,30 @@
+import { nextTick, ref, watch } from "vue";
+export function useTeleportTypography(fieldRef, isOpen, extraVars, measureSelector = ".origam-field", neutralFontSize = "16px") {
+  const typographyStyles = ref({});
+  const fieldElement = () => {
+    const root = fieldRef.value?.$el;
+    if (!root || typeof root.querySelector !== "function") return void 0;
+    return root.querySelector(measureSelector) ?? root;
+  };
+  const sync = () => {
+    const el = fieldElement();
+    if (!el || typeof window === "undefined") return;
+    const styles = window.getComputedStyle(el);
+    const fontSize = styles.fontSize;
+    if (!fontSize) return;
+    if (fontSize === neutralFontSize) {
+      typographyStyles.value = {};
+      return;
+    }
+    typographyStyles.value = {
+      "font-family": styles.fontFamily,
+      "font-size": fontSize,
+      "letter-spacing": styles.letterSpacing,
+      ...extraVars(fontSize)
+    };
+  };
+  watch(isOpen, (open) => {
+    if (open) nextTick(sync);
+  });
+  return { typographyStyles };
+}

package/dist/src/composables/Sheet/sheetSwipe.composable.cjs

@@ -6,13 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "DEFAULT_SHEET_SNAP_POINTS", {
   enumerable: true,
   get: function () {
-    return _sheetSnapPoints.DEFAULT_SHEET_SNAP_POINTS;
+    return _sheet.DEFAULT_SHEET_SNAP_POINTS;
   }
 });
 exports.useSheetSwipe = useSheetSwipe;
 var _vue = require("vue");
-var _sheetSnapPoints = require("../../consts/Sheet/sheet-snap-points.const.cjs");
-var _sheetSwipe = require("../../consts/Sheet/sheet-swipe.const.cjs");
+var _sheet = require("../../consts/Sheet/sheet.const.cjs");
 function resolveHeightPx(height) {
   if (typeof height === "number") return height;
   if (typeof window === "undefined") return 0;
@@ -54,7 +53,7 @@ function useSheetSwipe(options) {
     persistent
   } = options;
   const sortedSnaps = (0, _vue.computed)(() => {
-    const src = snapPoints?.value ?? _sheetSnapPoints.DEFAULT_SHEET_SNAP_POINTS;
+    const src = snapPoints?.value ?? _sheet.DEFAULT_SHEET_SNAP_POINTS;
     return [...src].sort((a, b) => resolveHeightPx(a.height) - resolveHeightPx(b.height));
   });
   const currentSnap = (0, _vue.ref)(defaultSnap?.value ?? "half");
@@ -78,7 +77,7 @@ function useSheetSwipe(options) {
     const goingUp = velocity > 0;
     const goingDown = velocity < 0;
     const speed = Math.abs(velocity);
-    if (speed >= _sheetSwipe.SHEET_FAST_FLICK_THRESHOLD) {
+    if (speed >= _sheet.SHEET_FAST_FLICK_THRESHOLD) {
       const nextIdx = goingUp ? Math.min(snaps.length - 1, currentIdx + 1) : goingDown ? Math.max(0, currentIdx - 1) : currentIdx;
       const candidate = snaps[nextIdx];
       return enforcePersistent(candidate.id, snaps);

package/dist/src/composables/Sheet/sheetSwipe.composable.d.ts

@@ -1,5 +1,5 @@
 import type { ISheetSwipeOptions, ISheetSwipeReturn } from '../../interfaces';
-export { DEFAULT_SHEET_SNAP_POINTS } from '../../consts/Sheet/sheet-snap-points.const';
+export { DEFAULT_SHEET_SNAP_POINTS } from '../../consts/Sheet/sheet.const';
 /**
  * Bottom-sheet swipe gesture composable.
  *

package/dist/src/composables/Sheet/sheetSwipe.composable.js

@@ -6,9 +6,8 @@ import {
   shallowRef,
   watch
 } from "vue";
-import { DEFAULT_SHEET_SNAP_POINTS } from "../../consts/Sheet/sheet-snap-points.const.js";
-import { SHEET_FAST_FLICK_THRESHOLD as FAST_FLICK_THRESHOLD } from "../../consts/Sheet/sheet-swipe.const.js";
-export { DEFAULT_SHEET_SNAP_POINTS } from "../../consts/Sheet/sheet-snap-points.const.js";
+import { DEFAULT_SHEET_SNAP_POINTS, SHEET_FAST_FLICK_THRESHOLD as FAST_FLICK_THRESHOLD } from "../../consts/Sheet/sheet.const.js";
+export { DEFAULT_SHEET_SNAP_POINTS } from "../../consts/Sheet/sheet.const.js";
 function resolveHeightPx(height) {
   if (typeof height === "number") return height;
   if (typeof window === "undefined") return 0;

package/dist/src/composables/index.cjs

@@ -588,6 +588,18 @@ Object.keys(_teleport).forEach(function (key) {
     }
   });
 });
+var _teleportTypography = require("./Commons/teleport-typography.composable.cjs");
+Object.keys(_teleportTypography).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _teleportTypography[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _teleportTypography[key];
+    }
+  });
+});
 var _hydration = require("./Commons/hydration.composable.cjs");
 Object.keys(_hydration).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;