origam 2.13.0 → 2.14.0

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/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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "origam",
-  "version": "2.13.0",
+  "version": "2.14.0",
   "type": "module",
   "description": "origam — a Vue 3 design system with multi-theme design tokens, CSS-first components and TypeScript types.",
   "keywords": [
@@ -106,7 +106,8 @@
     "styles:build": "sass src/assets/scss/main.scss src/assets/css/main.css --no-source-map --style=compressed",
     "tokens:watch": "node scripts/build-tokens.mjs --watch",
     "tokens:lint": "node scripts/build-tokens.mjs --dry-run --strict",
-    "prepublishOnly": "pnpm run build"
+    "prepublishOnly": "pnpm run build",
+    "prepack": "node -e \"require('fs').copyFileSync('../../CHANGELOG.md','CHANGELOG.md')\""
   },
   "dependencies": {
     "@mdi/font": "^7.4.47",