origam 2.13.0 → 2.14.1

package/README.md

@@ -5,7 +5,7 @@ and TypeScript types.
 
 > 📖 **Full documentation & interactive theme builder:**
 > [https://origam.dev](https://origam.dev) *(coming soon)* ·
-> [GitHub repository](https://github.com/arnaudprioul/origam)
+> [GitHub repository](https://github.com/Elyseranet/origam)
 
 ## Installation
 
@@ -75,9 +75,9 @@ Token stylesheets are exposed as dedicated entries: `origam/styles`
 ## Links
 
 - [Documentation & theme builder](https://origam.dev) *(coming soon)*
-- [Changelog](https://github.com/arnaudprioul/origam/blob/main/CHANGELOG.md)
-- [Issues](https://github.com/arnaudprioul/origam/issues)
+- [Changelog](https://github.com/Elyseranet/origam/blob/main/CHANGELOG.md)
+- [Issues](https://github.com/Elyseranet/origam/issues)
 
 ## License
 
-[MIT](https://github.com/arnaudprioul/origam/blob/main/LICENSE) © Prioul Arnaud
+[MIT](https://github.com/Elyseranet/origam/blob/main/LICENSE) © Prioul Arnaud

package/dist/src/components/Avatar/OrigamAvatar.vue

@@ -189,6 +189,20 @@ defineExpose({
 	.origam-avatar {
 		$this: &;
 
+		// Declared on the ROOT, not only on `__wrapper`. Without it the root
+		// inherits the browser default — `inline` for `tag="span"` — and an
+		// inline box ignores `width`/`height`, so `size` silently did nothing:
+		// the avatar collapsed to its text. It only appeared to work when the
+		// parent was a flex container, which blockifies its children (measured:
+		// same component, 32x32 under `inline-flex`, 30x30 under `position:
+		// relative`, for a requested size of 72).
+		//
+		// `inline-flex` and not `block`: `tag="span"` exists so an avatar can sit
+		// in phrasing content — inside a `<button>`, whose content model rejects
+		// block-level elements.
+		display: var(--origam-avatar---display, inline-flex);
+		vertical-align: var(--origam-avatar---vertical-align, middle);
+
 		line-height: var(--origam-avatar---line-height);
 		text-align: var(--origam-avatar---text-align);
 		font-size: var(--origam-avatar---font-size);

package/dist/src/components/ColorPicker/OrigamColorPickerEdit.vue

@@ -128,7 +128,13 @@ defineExpose({
 			}
 
 			#{$this}__label {
-				font-size: .75rem
+				// `rem` resolves against the document root, not this component's
+				// ancestor — a plain literal here would be immune to the typography
+				// bridge `OrigamColorPickerField` republishes on the teleported
+				// surface (see `useTeleportTypography`). Generic-first read, same
+				// convention as `useTypography`'s rollout: the bridged var wins when
+				// present, the historical size is the fallback.
+				font-size: var(--origam-color-picker-edit__label---font-size, .75rem);
 			}
 		}
 	}

package/dist/src/components/ColorPickerField/OrigamColorPickerField.vue

@@ -128,7 +128,7 @@
 
 <script lang="ts" setup>
 import { OrigamColorPicker, OrigamMenu, OrigamSheet, OrigamTextField, OrigamTranslateScale } from "../../components";
-import { useDefaults, useLocale, useProps, useVModel, useStyle } from "../../composables";
+import { useDefaults, useLocale, useProps, useTeleportTypography, useVModel, useStyle } from "../../composables";
 import { COLOR_NULL, ORIGAM_FORM_KEY } from "../../consts";
 import { BLOCK, DENSITY, DIRECTION, TEXT_FIELD_TYPE } from "../../enums";
 import { forwardRefs, HSVtoCSS, matchesSelector } from "../../utils";
@@ -295,13 +295,24 @@ const form = inject(ORIGAM_FORM_KEY, null);
 const menuDisabled = computed(() => {
   return props.readonly || form?.isReadonly.value;
 });
+const { typographyStyles: menuTypographyStyles } = useTeleportTypography(origamTextFieldRef, menu, (fontSize) => ({
+  "--origam-picker-title---font-size": fontSize,
+  "--origam-color-picker-edit__label---font-size": fontSize
+}));
 const menuProps = computed(() => {
+  const consumerContentProps = props.menuProps?.contentProps ?? {};
   return {
     ...props.menuProps,
     activatorProps: {
       ...props.menuProps?.activatorProps || {},
       "aria-haspopup": "colorpickerbox"
       // Set aria-haspopup to 'listbox'
+    },
+    contentProps: {
+      ...consumerContentProps,
+      // The consumer's own style is listed last so it still wins —
+      // the bridge is a default, not a lock.
+      style: [menuTypographyStyles.value, consumerContentProps.style]
     }
   };
 });

package/dist/src/components/DatePicker/OrigamDatePickerMonth.vue

@@ -269,7 +269,12 @@ defineExpose({
 			display: grid;
 			grid-template-rows: repeat(7, 1fr);
 			column-gap: 4px;
-			font-size: .85rem;
+			// `rem` resolves against the document root, not this component's
+			// ancestor — a plain literal here would be immune to the typography
+			// bridge `OrigamDatePickerField` republishes on the teleported
+			// surface (see `useTeleportTypography`). Generic-first read, same
+			// convention as `useTypography`'s rollout.
+			font-size: var(--origam-date-picker-month__weeks---font-size, .85rem);
 
 			+ #{$this}__days {
 				grid-row-gap: 0;
@@ -277,7 +282,7 @@ defineExpose({
 		}
 
 		&__weekday {
-			font-size: .85rem;
+			font-size: var(--origam-date-picker-month__weekday---font-size, .85rem);
 		}
 
 		&__days {
@@ -300,6 +305,13 @@ defineExpose({
 			:deep(.origam-btn) {
 				--origam-btn---height: 24px;
 				--origam-btn---size: .85rem;
+				// `OrigamBtn`'s own `--size-*` modifier sets `--origam-btn---font-size`
+				// directly on this same element (its size prop is unset here, so it's
+				// the default rung) — an inherited custom property from an ancestor
+				// loses to that local declaration. A plain `font-size` read here, at
+				// equal locality, is what actually wins; same rem-trap as `&__weeks` /
+				// `&__weekday` above, bridged token first, historical size as fallback.
+				font-size: var(--origam-date-picker-month__day---font-size, .85rem);
 				z-index: 1;
 			}
 

package/dist/src/components/DatePickerField/OrigamDatePickerField.vue

@@ -180,7 +180,7 @@ import {
   OrigamTextField,
   OrigamTranslateScale
 } from "../../components";
-import { useDate, useDefaults, useLocale, useProps, useTextColor, useVModel, useStyle } from "../../composables";
+import { useDate, useDefaults, useLocale, useProps, useTeleportTypography, useTextColor, useVModel, useStyle } from "../../composables";
 import { ORIGAM_FORM_KEY } from "../../consts";
 import { BLOCK, DENSITY, DIRECTION, KEYBOARD_VALUES, MDI_ICONS, TEXT_FIELD_TYPE } from "../../enums";
 import { forwardRefs, isEmpty, matchesSelector, wrapInArray } from "../../utils";
@@ -370,13 +370,26 @@ const form = inject(ORIGAM_FORM_KEY, null);
 const menuDisabled = computed(() => {
   return props.readonly || form?.isReadonly.value;
 });
+const { typographyStyles: menuTypographyStyles } = useTeleportTypography(origamTextFieldRef, menu, (fontSize) => ({
+  "--origam-picker-title---font-size": fontSize,
+  "--origam-date-picker-month__weekday---font-size": fontSize,
+  "--origam-date-picker-month__weeks---font-size": fontSize,
+  "--origam-date-picker-month__day---font-size": fontSize
+}));
 const menuProps = computed(() => {
+  const consumerContentProps = props.menuProps?.contentProps ?? {};
   return {
     ...props.menuProps,
     activatorProps: {
       ...props.menuProps?.activatorProps || {},
       "aria-haspopup": "datepickerbox"
       // Set aria-haspopup to 'listbox'
+    },
+    contentProps: {
+      ...consumerContentProps,
+      // The consumer's own style is listed last so it still wins —
+      // the bridge is a default, not a lock.
+      style: [menuTypographyStyles.value, consumerContentProps.style]
     }
   };
 });

package/dist/src/components/Field/OrigamField.vue

@@ -783,15 +783,17 @@ defineExpose({
 		&--prepended {
 			--origam-field---padding-start: 6px;
 
-			// A prepend-inner (icon / swatch) already fills the left corner, so
-			// opt out of the corner-clearing floor: keep the inline padding and
-			// the start outline leg at the raw padding-start (widening them would
-			// draw the outline over the prepend content).
+			// Le CONTENU se rapproche du bord (l'icone/swatch remplit le coin),
+			// donc on retire le plancher de degagement sur le padding.
 			padding-inline: var(--origam-field---padding-start) var(--origam-field---padding-end);
 
-			#{$this}__outline--start {
-				flex-basis: var(--origam-field---padding-start);
-			}
+			// MAIS on ne touche PAS a la largeur de la patte d'outline : ce
+			// segment PORTE le rayon du coin gauche, et CSS reduit proportionnellement
+			// un `border-radius` qui depasse la boite qui le declare (une patte de
+			// 6px ne peut pas rendre un rayon de 12px+ : le coin sort plat). Le
+			// couplage n'avait pas lieu d'etre : `__outlines` est `position: absolute`
+			// + `pointer-events: none`, une couche decorative qui ne deplace aucun
+			// contenu — l'elargir ne dessine rien par-dessus le prepend.
 		}
 
 		&--appended {

package/dist/src/components/Messages/OrigamMessages.vue

@@ -5,6 +5,7 @@
 	>
 		<component
 				:is="props.tag"
+				:id="props.id"
 				:class="messagesClasses"
 				:style="[messagesStyles, rootTypographyStyles]"
 				aria-live="polite"

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

@@ -298,6 +298,7 @@ import {
   useProps,
   useScrolling,
   useStyle,
+  useTeleportTypography,
   useTextColor,
   useVModel
 } from "../../composables";
@@ -541,9 +542,23 @@ const displayItems = computed(() => {
 const menuDisabled = computed(() => {
   return props.hideNoData && !displayItems.value.length || props.readonly || form?.isReadonly.value;
 });
+const { typographyStyles: menuTypographyStyles } = useTeleportTypography(origamTextFieldRef, menu, (fontSize) => ({
+  "--origam-list-item__title---font-size": fontSize,
+  // Kept proportional to the title rather than pinned, so the pair
+  // keeps its relationship at any scale.
+  "--origam-list-item__subtitle---font-size": `calc(${fontSize} * 0.875)`
+}));
 const menuProps = computed(() => {
+  const consumerProps = props.menuProps ?? {};
+  const consumerContentProps = consumerProps.contentProps ?? {};
   return {
-    ...props.menuProps
+    ...consumerProps,
+    contentProps: {
+      ...consumerContentProps,
+      // The consumer's own style is listed last so it still wins —
+      // the bridge is a default, not a lock.
+      style: [menuTypographyStyles.value, consumerContentProps.style]
+    }
   };
 });
 const comboboxAriaAttrs = computed(() => {

package/dist/src/components/TextField/OrigamTextField.vue

@@ -483,7 +483,7 @@ const enrichedRules = computed(() => {
 });
 const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
 const inputProps = computed(() => {
-  return origamInputRef.value?.filterProps(props, ["modelValue", "class", "style", "id", "focused"]);
+  return origamInputRef.value?.filterProps(props, ["modelValue", "class", "style", "focused"]);
 });
 const fieldProps = computed(() => {
   return origamFieldRef.value?.filterProps(props, ["class", "id", "active", "dirty", "disabled", "focused", "error", "style"]);

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/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/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;

package/dist/src/composables/index.d.ts

@@ -46,6 +46,7 @@ export * from './Commons/margin.composable';
 export * from './Commons/lazy.composable';
 export * from './Commons/items.composable';
 export * from './Commons/teleport.composable';
+export * from './Commons/teleport-typography.composable';
 export * from './Commons/hydration.composable';
 export * from './Commons/stack.composable';
 export * from './Commons/activator.composable';

package/dist/src/composables/index.js

@@ -46,6 +46,7 @@ export * from "./Commons/margin.composable.js";
 export * from "./Commons/lazy.composable.js";
 export * from "./Commons/items.composable.js";
 export * from "./Commons/teleport.composable.js";
+export * from "./Commons/teleport-typography.composable.js";
 export * from "./Commons/hydration.composable.js";
 export * from "./Commons/stack.composable.js";
 export * from "./Commons/activator.composable.js";

package/dist/src/consts/Commons/rounded.const.d.ts

@@ -35,4 +35,4 @@ export declare const PREDEFINED_ROUNDED: Array<TRounded>;
  * backward compatibility and slated for removal in a future major. Use
  * `PREDEFINED_ROUNDED`.
  */
-export declare const PREDIFINED_ROUNDED: ("default" | "x-small" | "small" | "medium" | "large" | "x-large" | "shaped" | "shaped-invert")[];
+export declare const PREDIFINED_ROUNDED: TRounded[];

package/dist/src/enums/Commons/rounded.enum.cjs

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ROUNDED = void 0;
+exports.ROUNDED_TOKEN = exports.ROUNDED = void 0;
 var ROUNDED = exports.ROUNDED = /* @__PURE__ */(ROUNDED2 => {
   ROUNDED2["X_SMALL"] = "x-small";
   ROUNDED2["SMALL"] = "small";
@@ -14,4 +14,14 @@ var ROUNDED = exports.ROUNDED = /* @__PURE__ */(ROUNDED2 => {
   ROUNDED2["SHAPED"] = "shaped";
   ROUNDED2["SHAPED_INVERT"] = "shaped-invert";
   return ROUNDED2;
-})(ROUNDED || {});
+})(ROUNDED || {});
+var ROUNDED_TOKEN = exports.ROUNDED_TOKEN = /* @__PURE__ */(ROUNDED_TOKEN2 => {
+  ROUNDED_TOKEN2["NONE"] = "none";
+  ROUNDED_TOKEN2["XS"] = "xs";
+  ROUNDED_TOKEN2["SM"] = "sm";
+  ROUNDED_TOKEN2["MD"] = "md";
+  ROUNDED_TOKEN2["LG"] = "lg";
+  ROUNDED_TOKEN2["XL"] = "xl";
+  ROUNDED_TOKEN2["FULL"] = "full";
+  return ROUNDED_TOKEN2;
+})(ROUNDED_TOKEN || {});

package/dist/src/enums/Commons/rounded.enum.d.ts

@@ -15,3 +15,28 @@ export declare enum ROUNDED {
     SHAPED = "shaped",
     SHAPED_INVERT = "shaped-invert"
 }
+/**
+ * The token-scale rungs, resolved by `useRounded` to the generated utility
+ * classes (`.origam--rounded-full` → `var(--origam-radius---full)`).
+ *
+ * They were always accepted at runtime — the brand themes have shipped
+ * `rounded: 'md'` / `'lg'` / `'none'` for a while — but `TRounded` only
+ * described the component scale above, so TypeScript rejected them and they
+ * were invisible to autocompletion. `FULL` in particular is the only way to
+ * obtain a circle, which made a round avatar undiscoverable: none of the
+ * component-scale names produces one.
+ *
+ * Declared as a separate enum rather than merged into `ROUNDED` because the
+ * two scales are different things — `ROUNDED` names an intent (`shaped`),
+ * this one names a radius rung — and merging them would suggest
+ * `x-small` and `xs` are interchangeable. They are not.
+ */
+export declare enum ROUNDED_TOKEN {
+    NONE = "none",
+    XS = "xs",
+    SM = "sm",
+    MD = "md",
+    LG = "lg",
+    XL = "xl",
+    FULL = "full"
+}

package/dist/src/enums/Commons/rounded.enum.js

@@ -9,3 +9,13 @@ export var ROUNDED = /* @__PURE__ */ ((ROUNDED2) => {
   ROUNDED2["SHAPED_INVERT"] = "shaped-invert";
   return ROUNDED2;
 })(ROUNDED || {});
+export var ROUNDED_TOKEN = /* @__PURE__ */ ((ROUNDED_TOKEN2) => {
+  ROUNDED_TOKEN2["NONE"] = "none";
+  ROUNDED_TOKEN2["XS"] = "xs";
+  ROUNDED_TOKEN2["SM"] = "sm";
+  ROUNDED_TOKEN2["MD"] = "md";
+  ROUNDED_TOKEN2["LG"] = "lg";
+  ROUNDED_TOKEN2["XL"] = "xl";
+  ROUNDED_TOKEN2["FULL"] = "full";
+  return ROUNDED_TOKEN2;
+})(ROUNDED_TOKEN || {});

package/dist/src/themes/origam.theme.cjs

@@ -210,7 +210,7 @@ const origamLightTheme = exports.origamLightTheme = {
     "origam-avatar": {
       tag: "div",
       size: "default",
-      rounded: "lg",
+      rounded: "full",
       color: "primary"
     },
     "origam-badge": {
@@ -609,7 +609,7 @@ const origamDarkTheme = exports.origamDarkTheme = {
     "origam-avatar": {
       tag: "div",
       size: "default",
-      rounded: "lg",
+      rounded: "full",
       color: "primary"
     },
     "origam-badge": {

package/dist/src/themes/origam.theme.js

@@ -149,7 +149,7 @@ export const origamLightTheme = {
   components: {
     "origam-alert": { tag: "div", density: "default" },
     "origam-audio": { tag: "article", variant: "expanded", position: "relative" },
-    "origam-avatar": { tag: "div", size: "default", rounded: "lg", color: "primary" },
+    "origam-avatar": { tag: "div", size: "default", rounded: "full", color: "primary" },
     "origam-badge": { tag: "div", location: "top right" },
     "origam-blockquote": { tag: "blockquote", variant: "default" },
     "origam-bottom-nav": { tag: "nav", position: "start" },
@@ -299,7 +299,7 @@ export const origamDarkTheme = {
   components: {
     "origam-alert": { tag: "div", density: "default" },
     "origam-audio": { tag: "article", variant: "expanded", position: "relative" },
-    "origam-avatar": { tag: "div", size: "default", rounded: "lg", color: "primary" },
+    "origam-avatar": { tag: "div", size: "default", rounded: "full", color: "primary" },
     "origam-badge": { tag: "div", location: "top right" },
     "origam-blockquote": { tag: "blockquote", variant: "default" },
     "origam-bottom-nav": { tag: "nav", position: "start" },

package/dist/src/types/Commons/rounded.type.d.ts

@@ -1,2 +1,14 @@
-import { ROUNDED } from '../../enums';
-export type TRounded = `${ROUNDED}`;
+import { ROUNDED, ROUNDED_TOKEN } from '../../enums';
+/**
+ * Every value the `rounded` prop accepts.
+ *
+ * Two scales, deliberately kept distinct (see `rounded.enum.ts`):
+ *   - `ROUNDED` — the component scale, naming an intent (`shaped`, `large`);
+ *   - `ROUNDED_TOKEN` — the radius rungs (`md`, `full`), resolved to the
+ *     generated utility classes.
+ *
+ * The token scale was already honoured at runtime but was missing from this
+ * type, so `rounded="full"` — the only way to get a circle — failed to
+ * type-check and never surfaced in autocompletion.
+ */
+export type TRounded = `${ROUNDED}` | `${ROUNDED_TOKEN}`;

package/dist/src/utils/Commons/color.util.cjs

@@ -45,10 +45,10 @@ var _consts = require("../../consts/index.cjs");
 var _commons = require("./commons.util.cjs");
 var _console = require("./console.util.cjs");
 function isCssColor(color) {
-  return !!color && (/^(#|var\(--|(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch|color)\()/i.test(color) || _consts.CSS_NAMED_COLORS.has(color.toLowerCase()));
+  return !!color && (/^(#|var\(--|(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch|color-mix|color)\()/i.test(color) || _consts.CSS_NAMED_COLORS.has(color.toLowerCase()));
 }
 function isParsableColor(color) {
-  return isCssColor(color) && !/^((rgb|hsl)a?\()?var\(--/.test(color);
+  return isCssColor(color) && !/^((rgb|hsl)a?\()?var\(--/.test(color) && !/^color-mix\(/i.test(color);
 }
 function parseColor(color) {
   if (typeof color === "number") {