origam 2.23.2 → 2.25.0

package/dist/src/interfaces/Btn/btn.interface.d.ts

@@ -9,7 +9,7 @@ import type { IElevationProps } from '../Commons/elevation.interface';
 import type { IGroupEmits, IGroupItemProps } from '../Commons/group.interface';
 import type { IHoverProps } from '../Commons/hover.interface';
 import type { ILinkProps } from '../Commons/router.interface';
-import type { ILoaderProps } from '../Commons/loader.interface';
+import type { IControlLoaderProps } from '../Commons/loader.interface';
 import type { ILocationProps } from '../Commons/location.interface';
 import type { IMarginProps } from '../Commons/margin.interface';
 import type { IPaddingProps } from '../Commons/padding.interface';
@@ -25,7 +25,7 @@ import type { TStatus, TStatusPosition } from '../../types/Commons/status.type';
  *  `icon` prop accepts `boolean | TIcon` (boolean = icon-only mode) which is
  *  wider than `IIconProps.icon?: TIcon`.  Pulling the two status props in
  *  directly avoids the TS2430 incompatible-extends error. */
-export interface IBtnProps extends ICommonsComponentProps, IColorProps, IBgColorProps, IBorderProps, IDensityProps, IDimensionProps, IElevationProps, IRoundedProps, ITagProps, ISizeProps, ILinkProps, IRippleProps, ILoaderProps, IPositionProps, ILocationProps, IGroupItemProps, IPaddingProps, IMarginProps, IAdjacentProps, IHoverProps, IActiveProps, IActionVariantProps, Pick<ITypographyProps, 'fontSize' | 'fontWeight' | 'lineHeight' | 'letterSpacing'> {
+export interface IBtnProps extends ICommonsComponentProps, IColorProps, IBgColorProps, IBorderProps, IDensityProps, IDimensionProps, IElevationProps, IRoundedProps, ITagProps, ISizeProps, ILinkProps, IRippleProps, IControlLoaderProps, IPositionProps, ILocationProps, IGroupItemProps, IPaddingProps, IMarginProps, IAdjacentProps, IHoverProps, IActiveProps, IActionVariantProps, Pick<ITypographyProps, 'fontSize' | 'fontWeight' | 'lineHeight' | 'letterSpacing'> {
     /** @deprecated Use `variant="flat"` instead. Kept for backward compat. */
     flat?: boolean;
     /** Pass `true` to activate icon-only mode; pass a `TIcon` value to set the icon. */
@@ -62,7 +62,7 @@ export interface IBtnEmits extends IGroupEmits {
 export interface IBtnSlots extends IAdjacentSlots {
     /** Overrides the whole loader/prepend/content/append layout. */
     wrapper?: () => any;
-    /** Overrides the active loader (line/circular/skeleton), receives the
+    /** Overrides the active loader (line/circular), receives the
      *  forwarded `<OrigamProgress>` props. */
     loader?: (data: Record<string, unknown>) => any;
     default?: () => any;

package/dist/src/interfaces/Commons/loader.interface.d.ts

@@ -1,6 +1,6 @@
 import type { IColorProps } from './color.interface';
 import type { ICommonsComponentProps, ITagProps } from './commons.interface';
-import type { TLoaderConfig, TLoaderKind, TLoadingValue } from '../../types/Commons/loader.type';
+import type { TControlLoadingValue, TLoaderConfig, TLoaderKind, TLoadingValue } from '../../types/Commons/loader.type';
 /*********************************************************
  * ILoaderProps / IResolvedLoader
  *
@@ -20,6 +20,18 @@ export interface ILoaderProps extends ICommonsComponentProps, ITagProps, IColorP
     loading?: TLoadingValue;
     loadingText?: string;
 }
+/*********************************************************
+ * IControlLoaderProps
+ *
+ * @description
+ * `ILoaderProps` for a CONTROL (`OrigamBtn`, `OrigamSwitch`, `OrigamField`
+ * and its derivatives): same surface, but `loading` refuses
+ * `{ type: 'skeleton' }` - an action in flight never replaces the control
+ * (see `TControlLoaderConfig`).
+ ********************************************************/
+export interface IControlLoaderProps extends Omit<ILoaderProps, 'loading'> {
+    loading?: TControlLoadingValue;
+}
 /**
  * Resolved loader state — what each consumer component reads to decide
  * which renderer to mount and with which props.

package/dist/src/interfaces/Field/field.interface.d.ts

@@ -7,7 +7,7 @@ import type { IDensityProps } from '../Commons/density.interface';
 import type { IElevationProps } from '../Commons/elevation.interface';
 import type { IFocusEmits, IFocusProps } from '../Commons/focus.interface';
 import type { ILabelProps } from '../Label/label.interface';
-import type { ILoaderProps } from '../Commons/loader.interface';
+import type { IControlLoaderProps } from '../Commons/loader.interface';
 import type { IRoundedProps } from '../Commons/rounded.interface';
 import type { ISizeProps } from '../Commons/size.interface';
 import type { ITypographyProps } from '../Commons/typography.interface';
@@ -31,7 +31,7 @@ import type { IInputVariantProps } from '../Commons/variant.interface';
  * `--origam-field---border-*` token channel the three outline legs already
  * read, so the notch keeps opening under `--active` / `--focused`.
  ********************************************************/
-export interface IFieldProps extends ICommonsComponentProps, ILoaderProps, IColorProps, IBgColorProps, IAdjacentInnerProps, IBorderProps, IFocusProps, IDensityProps, ILabelProps, IActiveProps, IInputVariantProps, IRoundedProps, IElevationProps, ISizeProps, Pick<ITypographyProps, 'fontSize' | 'fontWeight' | 'lineHeight' | 'letterSpacing'> {
+export interface IFieldProps extends ICommonsComponentProps, IControlLoaderProps, IColorProps, IBgColorProps, IAdjacentInnerProps, IBorderProps, IFocusProps, IDensityProps, ILabelProps, IActiveProps, IInputVariantProps, IRoundedProps, IElevationProps, ISizeProps, Pick<ITypographyProps, 'fontSize' | 'fontWeight' | 'lineHeight' | 'letterSpacing'> {
     centerAffix?: boolean;
     dirty?: boolean;
     disabled?: boolean;

package/dist/src/interfaces/Skeleton/skeleton-group.interface.cjs

@@ -0,0 +1 @@
+"use strict";

package/dist/src/interfaces/Skeleton/skeleton-group.interface.d.ts

@@ -0,0 +1,34 @@
+import type { ComputedRef } from 'vue';
+import type { ICommonsComponentProps } from '../Commons/commons.interface';
+import type { TSkeletonAnimation } from '../../types/Skeleton/skeleton.type';
+export interface ISkeletonGroupProps extends ICommonsComponentProps {
+    /*********************************************************
+     * animation
+     *
+     * @description
+     * One animation clock for the whole group. `pulse` (default) animates
+     * the group container itself, so blocks that mount at different moments
+     * still breathe together. `wave` lets each block sweep its own shimmer.
+     * `none` is static. Blocks inherit it unless they set their own.
+     ********************************************************/
+    animation?: TSkeletonAnimation;
+    /*********************************************************
+     * label
+     *
+     * @description
+     * Locale key of the ONE announcement made for the whole zone
+     * (`role="status"`, `aria-busy="true"`). Defaults to `'origam.loading'`.
+     ********************************************************/
+    label?: string;
+}
+/*********************************************************
+ * ISkeletonGroupProvide
+ *
+ * @description
+ * Shape provided to the blocks of a group.
+ ********************************************************/
+export interface ISkeletonGroupProvide {
+    animation: ComputedRef<TSkeletonAnimation>;
+}
+export interface ISkeletonGroupEmits {
+}

package/dist/src/interfaces/Skeleton/skeleton.interface.d.ts

@@ -1,27 +1,44 @@
 import type { IBgColorProps, IColorProps } from '../Commons/color.interface';
 import type { ICommonsComponentProps } from '../Commons/commons.interface';
+import type { IDimensionProps } from '../Commons/dimension.interface';
 import type { IRoundedProps } from '../Commons/rounded.interface';
 import type { ISizeProps } from '../Commons/size.interface';
-import type { TSkeletonVariant } from '../../types/Skeleton/skeleton.type';
-export interface ISkeletonProps extends ICommonsComponentProps, IColorProps, IBgColorProps, ISizeProps, IRoundedProps {
+import type { TSkeletonAnimation, TSkeletonVariant } from '../../types/Skeleton/skeleton.type';
+export interface ISkeletonProps extends ICommonsComponentProps, IColorProps, IBgColorProps, ISizeProps, IRoundedProps, IDimensionProps {
     variant?: TSkeletonVariant;
-    width?: string | number;
-    height?: string | number;
     loading?: boolean;
-    pulse?: boolean;
+    /*********************************************************
+     * animation
+     *
+     * @description
+     * How the placeholder moves: `pulse` (default — an opacity breath),
+     * `wave` (a shimmer sweeping across) or `none`. Left unset, a block
+     * follows the `<OrigamSkeletonGroup>` it sits in, and falls back to
+     * `pulse` outside any group.
+     *
+     * @description
+     * Every animation stops after a finite number of loops
+     * (`--origam-skeleton---animation-iterations`, ~10 s) and is switched
+     * off under `prefers-reduced-motion: reduce` (WCAG 2.2.2).
+     ********************************************************/
+    animation?: TSkeletonAnimation;
     /*********************************************************
      * label
      *
      * @description
-     * Accessible label announced on the `role="status"` placeholder
-     * (aria-label). Carries a LOCALE KEY, not final text — it is resolved
-     * through the DS `t()` mechanism, so it follows the active locale out
-     * of the box. Defaults to `'origam.loading'`, the shared key also used
-     * by Progress / Video / Audio / Switch for this same announcement.
+     * Accessible label announced on a STANDALONE placeholder
+     * (`role="status"` + `aria-label`). Carries a LOCALE KEY, not final
+     * text — it is resolved through the DS `t()` mechanism, so it follows
+     * the active locale out of the box. Defaults to `'origam.loading'`, the
+     * shared key also used by Progress / Video / Audio / Switch for this
+     * same announcement.
      * @description
      * A raw string that matches no key is returned unchanged, so
      * `label="Loading your invoices"` still works for consumers who prefer
      * to translate on their side.
+     * @description
+     * Ignored inside an `<OrigamSkeletonGroup>`: the group owns the one
+     * announcement and its blocks are `aria-hidden`.
      ********************************************************/
     label?: string;
 }

package/dist/src/interfaces/Switch/switch.interface.d.ts

@@ -7,13 +7,13 @@ import type { IElevationProps } from '../Commons/elevation.interface';
 import type { IFocusEmits } from '../Commons/focus.interface';
 import type { IHoverProps } from '../Commons/hover.interface';
 import type { IInputProps } from '../Input/input.interface';
-import type { ILoaderProps } from '../Commons/loader.interface';
+import type { IControlLoaderProps } from '../Commons/loader.interface';
 import type { IMarginProps } from '../Commons/margin.interface';
 import type { IPaddingProps } from '../Commons/padding.interface';
 import type { IRoundedProps } from '../Commons/rounded.interface';
 import type { ISelectionControlProps } from '../SelectionControl/selection-control.interface';
 import type { ISwitchTrackSlotsProps } from './switch-track.interface';
-export interface ISwitchProps extends ICommonsComponentProps, ITagProps, IPaddingProps, IMarginProps, IBorderProps, IRoundedProps, IInputProps, ISelectionControlProps, ILoaderProps, IColorProps, IDensityProps, IElevationProps, IActiveProps, IHoverProps {
+export interface ISwitchProps extends ICommonsComponentProps, ITagProps, IPaddingProps, IMarginProps, IBorderProps, IRoundedProps, IInputProps, ISelectionControlProps, IControlLoaderProps, IColorProps, IDensityProps, IElevationProps, IActiveProps, IHoverProps {
     indeterminate?: boolean;
     inset?: boolean;
 }

package/dist/src/interfaces/index.cjs

@@ -2709,6 +2709,17 @@ Object.keys(_skeleton).forEach(function (key) {
     }
   });
 });
+var _skeletonGroup = require("./Skeleton/skeleton-group.interface.cjs");
+Object.keys(_skeletonGroup).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _skeletonGroup[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _skeletonGroup[key];
+    }
+  });
+});
 var _kbd = require("./Kbd/kbd.interface.cjs");
 Object.keys(_kbd).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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

@@ -244,6 +244,7 @@ export * from './VirtualScroll/virtual-scroll-item.interface';
 export * from './Window/window.interface';
 export * from './Window/window-item.interface';
 export * from './Skeleton/skeleton.interface';
+export * from './Skeleton/skeleton-group.interface';
 export * from './Kbd/kbd.interface';
 export * from './Stepper/stepper.interface';
 export * from './Stepper/stepper-item.interface';

package/dist/src/interfaces/index.js

@@ -244,6 +244,7 @@ export * from "./VirtualScroll/virtual-scroll-item.interface.js";
 export * from "./Window/window.interface.js";
 export * from "./Window/window-item.interface.js";
 export * from "./Skeleton/skeleton.interface.js";
+export * from "./Skeleton/skeleton-group.interface.js";
 export * from "./Kbd/kbd.interface.js";
 export * from "./Stepper/stepper.interface.js";
 export * from "./Stepper/stepper-item.interface.js";

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

@@ -402,8 +402,7 @@ const origamLightTheme = exports.origamLightTheme = {
       borderColor: "var(--origam-color__border---default)"
     },
     "origam-skeleton": {
-      variant: "text",
-      rounded: "sm"
+      variant: "text"
     },
     "origam-slider-field": {
       variant: "field"
@@ -817,8 +816,7 @@ const origamDarkTheme = exports.origamDarkTheme = {
       borderColor: "var(--origam-color__border---default)"
     },
     "origam-skeleton": {
-      variant: "text",
-      rounded: "sm"
+      variant: "text"
     },
     "origam-slider-field": {
       variant: "field"

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

@@ -207,7 +207,7 @@ export const origamLightTheme = {
     "origam-rating-field": { tag: "div", size: "default" },
     "origam-select": { border: true, rounded: true, variant: "outlined", density: "compact" },
     "origam-sheet": { border: true, borderColor: "var(--origam-color__border---default)" },
-    "origam-skeleton": { variant: "text", rounded: "sm" },
+    "origam-skeleton": { variant: "text" },
     "origam-slider-field": { variant: "field" },
     "origam-snackbar": { location: "bottom", border: true, rounded: true, elevation: 1 },
     "origam-stepper": { size: "default" },
@@ -377,7 +377,7 @@ export const origamDarkTheme = {
     "origam-rating-field": { tag: "div", size: "default" },
     "origam-select": { border: true, rounded: true, variant: "outlined", density: "compact" },
     "origam-sheet": { border: true, borderColor: "var(--origam-color__border---default)" },
-    "origam-skeleton": { variant: "text", rounded: "sm" },
+    "origam-skeleton": { variant: "text" },
     "origam-slider-field": { variant: "field" },
     "origam-snackbar": { location: "bottom", border: true, rounded: true, elevation: 1 },
     "origam-stepper": { size: "default" },

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

@@ -35,3 +35,27 @@ export type TLoaderConfig = ({
  * | `{ type: 'line' \| 'circular' \| 'skeleton', … }` | Loading with explicit kind override and per-instance prop overrides. |
  */
 export type TLoadingValue = boolean | number | TLoaderConfig;
+/*********************************************************
+ * TControlLoaderConfig / TControlLoadingValue
+ *
+ * @description
+ * Per-kind override config of a CONTROL (`OrigamBtn`, `OrigamSwitch`,
+ * `OrigamField` and its derivatives). A control that is mid-action keeps its
+ * label, its value and its input rendered: an action in flight is signalled
+ * by an indicator (spinner / strip), never by a placeholder that stands in
+ * for the control.
+ *
+ * @description
+ * So the `skeleton` member of `TLoaderConfig` is REFUSED at compile time
+ * here: `{ type: 'skeleton' }` is a type error on these components.
+ * Skeleton placeholders stay available on the containers whose content
+ * genuinely does not exist yet (Card, ExpansionPanel, DataTable).
+ *
+ * @description
+ * `TControlLoadingValue` is the `loading` prop value a control accepts:
+ * `TLoadingValue` minus the skeleton placeholder.
+ ********************************************************/
+export type TControlLoaderConfig = Exclude<TLoaderConfig, {
+    type: `${LOADER_KIND.SKELETON}`;
+}>;
+export type TControlLoadingValue = boolean | number | TControlLoaderConfig;

package/dist/src/types/Skeleton/skeleton.type.d.ts

@@ -1,4 +1,7 @@
 import OrigamSkeleton from '../../components/Skeleton/OrigamSkeleton.vue';
-import { SKELETON_VARIANT } from '../../enums/Skeleton/skeleton.enum';
+import OrigamSkeletonGroup from '../../components/Skeleton/OrigamSkeletonGroup.vue';
+import { SKELETON_ANIMATION, SKELETON_VARIANT } from '../../enums/Skeleton/skeleton.enum';
 export type TOrigamSkeleton = InstanceType<typeof OrigamSkeleton>;
+export type TOrigamSkeletonGroup = InstanceType<typeof OrigamSkeletonGroup>;
 export type TSkeletonVariant = `${SKELETON_VARIANT}`;
+export type TSkeletonAnimation = `${SKELETON_ANIMATION}`;