origam 2.35.1 → 2.36.0

package/CHANGELOG.md

@@ -18,6 +18,16 @@ This project follows [Semantic Versioning](https://semver.org).
 
 ## [Unreleased]
 
+## [2.36.0] - 2026-10-19
+
+### Added — `OrigamCodeGroup` : groupe de code à onglets (npm / pnpm / yarn) en une seule surface (#1179)
+
+- Nouveau composant `OrigamCodeGroup`, qui réunit `OrigamTabs` et `OrigamCode` : une seule surface (bordure, rayon et élévation portés par le groupe, blocs internes aplatis et sans en-tête), un seul bouton copier qui copie le code de l'onglet actif (slot `copy` pour le remplacer), `v-model` sur l'onglet actif.
+- Deux formes : prop `items` (`{ label, code, lang?, filename?, value? }`) ou slot avec des `<origam-code>` enfants ; le libellé de l'onglet vient de `label`, sinon de `filename`, sinon de la position.
+- Chaque zone défilante porte un nom accessible distinct (`{groupe}, {onglet}, code block {n} of {total}, scrollable region`, clés `origam.code_group.*` en `en` et `fr`) : plus de `landmark-unique` axe entre panneaux. Donner un `label` à chaque groupe quand plusieurs se trouvent sur une même page.
+- `OrigamCode` gagne `hideHeader`, `flat` et `scrollerAriaLabel`, utilisables seuls.
+- Aucun nouveau token : le groupe lit `--origam-code---*`, donc un thème qui restyle `OrigamCode` restyle aussi le groupe.
+
 ## [2.35.1] - 2026-10-19
 
 ### Fixed — `OrigamCode` : un 2e bloc monté pendant un import de `shiki` en échec restait vide (#1189)

package/dist/src/assets/locales/en.json

@@ -175,6 +175,11 @@
       "scroller_aria_label_filename": "{filename}, code block, scrollable region",
       "scroller_aria_label_lang": "{lang} code block, scrollable region"
     },
+    "code_group": {
+      "tabs_aria_label": "Code variants",
+      "scroller_aria_label": "{label}, code block {position} of {total}, scrollable region",
+      "scroller_aria_label_group": "{group}, {label}, code block {position} of {total}, scrollable region"
+    },
     "qr_code": {
       "aria_label": "QR code for {value}"
     },

package/dist/src/assets/locales/fr.json

@@ -175,6 +175,11 @@
       "scroller_aria_label_filename": "{filename}, bloc de code, zone défilante",
       "scroller_aria_label_lang": "Bloc de code {lang}, zone défilante"
     },
+    "code_group": {
+      "tabs_aria_label": "Variantes du code",
+      "scroller_aria_label": "{label}, bloc de code {position} sur {total}, zone défilante",
+      "scroller_aria_label_group": "{group}, {label}, bloc de code {position} sur {total}, zone défilante"
+    },
     "qr_code": {
       "aria_label": "QR code pour {value}"
     },

package/dist/src/components/Code/OrigamCode.vue

@@ -124,6 +124,9 @@ const props = defineProps({
   filename: { type: String, required: false, default: void 0 },
   compact: { type: Boolean, required: false, default: false },
   prompt: { type: String, required: false, default: void 0 },
+  hideHeader: { type: Boolean, required: false, default: false },
+  flat: { type: Boolean, required: false, default: false },
+  scrollerAriaLabel: { type: String, required: false, default: void 0 },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
@@ -207,6 +210,7 @@ const { typographyStyles } = useTypography(props, "code");
 const { highlight } = useCode();
 const { t } = useLocale();
 const scrollerLabel = computed(() => {
+  if (props.scrollerAriaLabel) return props.scrollerAriaLabel;
   if (props.filename) return t("origam.code.scroller_aria_label_filename", { filename: props.filename });
   if (props.lang && props.lang !== CODE_LANG.PLAINTEXT) return t("origam.code.scroller_aria_label_lang", { lang: props.lang });
   return t("origam.code.scroller_aria_label");
@@ -323,7 +327,7 @@ const copyAriaLabel = computed(
 const copyBtnStyle = {
   padding: "var(--origam-code__copy---padding-block) var(--origam-code__copy---padding-inline)"
 };
-const showHeader = computed(() => !props.compact && (!!props.filename || !!slots.header || props.copyable));
+const showHeader = computed(() => !props.compact && !props.hideHeader && (!!props.filename || !!slots.header || props.copyable));
 const compactCopyIcon = computed(() => copied.value ? "mdi-check" : "mdi-content-copy");
 const headerTag = computed(() => props.tag === "figure" ? "figcaption" : "div");
 const codeClasses = computed(() => [
@@ -335,21 +339,22 @@ const codeClasses = computed(() => [
     "origam-code--wrap": props.wrap,
     "origam-code--has-header": showHeader.value,
     "origam-code--copyable": props.copyable,
-    "origam-code--max-height": props.maxHeight != null
+    "origam-code--max-height": props.maxHeight != null,
+    "origam-code--flat": props.flat
   },
-  borderClasses.value,
-  roundedClasses.value,
-  elevationClasses.value,
+  props.flat ? [] : borderClasses.value,
+  props.flat ? [] : roundedClasses.value,
+  props.flat ? [] : elevationClasses.value,
   paddingClasses.value,
-  marginClasses.value,
+  props.flat ? [] : marginClasses.value,
   colorClasses.value,
   props.class
 ]);
 const codeStyles = computed(() => [
-  borderStyles.value,
-  roundedStyles.value,
+  props.flat ? {} : borderStyles.value,
+  props.flat ? {} : roundedStyles.value,
   paddingStyles.value,
-  marginStyles.value,
+  props.flat ? {} : marginStyles.value,
   colorStyles.value,
   dimensionStyles.value,
   typographyStyles.value,
@@ -420,6 +425,13 @@ defineExpose({ rebuild, copied, codeRef });
 		white-space: nowrap;
 	}
 
+	.origam-code--flat {
+		border: 0;
+		border-radius: 0;
+		box-shadow: none;
+		margin: 0;
+	}
+
 	.origam-code__prompt {
 		flex: none;
 		color: var(--origam-code__prompt---color);

package/dist/src/components/CodeGroup/OrigamCodeGroup.vue

@@ -0,0 +1,215 @@
+<template>
+	<component
+			:is="tag"
+			:id="id"
+			:class="groupClasses"
+			:style="groupStyles"
+	>
+		<origam-tabs
+				v-model="model"
+				class="origam-code-group__tabs"
+				variant="underline"
+				:aria-label="tabsLabel"
+				data-cy="origam-code-group-tabs"
+		>
+			<origam-tab
+					v-for="item in getItems()"
+					:key="item.value"
+					:value="item.value"
+					:text="item.label"
+			/>
+		</origam-tabs>
+
+		<slot
+				v-if="copyable"
+				name="copy"
+				:copy="handleCopy"
+				:copied="copied"
+		>
+			<origam-btn
+					variant="text"
+					class="origam-code__copy origam-code-group__copy"
+					:text="copyButtonLabel"
+					:aria-label="copyAriaLabel"
+					:style="copyBtnStyle"
+					aria-live="polite"
+					data-cy="origam-code-group-copy"
+					@click="handleCopy"
+			/>
+		</slot>
+
+		<origam-tab-panels
+				v-model="model"
+				class="origam-code-group__panels"
+				:transition="false"
+		>
+			<origam-tab-panel
+					v-for="item in getItems()"
+					:key="item.value"
+					:value="item.value"
+			>
+				<component :is="item.vnode"/>
+			</origam-tab-panel>
+		</origam-tab-panels>
+	</component>
+</template>
+
+<script lang="ts" setup>
+import { computed, useSlots } from "vue";
+import OrigamBtn from "../Btn/OrigamBtn.vue";
+import OrigamTab from "../Tabs/OrigamTab.vue";
+import OrigamTabPanel from "../Tabs/OrigamTabPanel.vue";
+import OrigamTabPanels from "../Tabs/OrigamTabPanels.vue";
+import OrigamTabs from "../Tabs/OrigamTabs.vue";
+import { useBorder } from "../../composables/Commons/border.composable";
+import { useClipboard } from "../../composables/Clipboard/clipboard.composable";
+import { useDimension } from "../../composables/Commons/dimension.composable";
+import { useElevation } from "../../composables/Commons/elevation.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useMargin } from "../../composables/Commons/margin.composable";
+import { useRounded } from "../../composables/Commons/rounded.composable";
+import { useVModel } from "../../composables/Commons/vModel.composable";
+import { CODE_DEFAULTS } from "../../consts/Code/code.const";
+import { findCodeGroupItem, resolveCodeGroupItems } from "../../utils/CodeGroup/code-group.util";
+const props = defineProps({
+  items: { type: Array, required: false, default: () => [] },
+  modelValue: { type: String, required: false, default: void 0 },
+  label: { type: String, required: false, default: void 0 },
+  copyable: { type: Boolean, required: false, default: true },
+  lineNumbers: { type: Boolean, required: false, default: false },
+  wrap: { type: Boolean, required: false, default: 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: "figure" },
+  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 },
+  borderRight: { type: [Boolean, Number, String], required: false },
+  borderBlock: { type: [Boolean, Number, String], required: false },
+  borderInline: { type: [Boolean, Number, String], required: false },
+  borderInlineStart: { type: [Boolean, Number, String], required: false },
+  borderInlineEnd: { type: [Boolean, Number, String], required: false },
+  borderBlockStart: { type: [Boolean, Number, String], required: false },
+  borderBlockEnd: { type: [Boolean, Number, String], required: false },
+  borderColor: { type: String, required: false },
+  borderStyle: { type: String, required: false },
+  borderTopColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderRightColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderBottomColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderInlineStartColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderInlineEndColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderBlockStartColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  borderBlockEndColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: 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 },
+  roundedStartStart: { type: [Boolean, Number, String], required: false },
+  roundedStartEnd: { type: [Boolean, Number, String], required: false },
+  roundedEndStart: { type: [Boolean, Number, String], required: false },
+  roundedEndEnd: { type: [Boolean, Number, String], required: false },
+  elevation: { type: [Number, String], required: false },
+  margin: { type: [Boolean, Number, String], required: false },
+  marginTop: { type: [Boolean, Number, String], required: false },
+  marginLeft: { type: [Boolean, Number, String], required: false },
+  marginBottom: { type: [Boolean, Number, String], required: false },
+  marginRight: { type: [Boolean, Number, String], required: false },
+  marginBlock: { type: [Boolean, Number, String], required: false },
+  marginInline: { type: [Boolean, Number, String], required: false },
+  marginInlineStart: { type: [Boolean, Number, String], required: false },
+  marginInlineEnd: { type: [Boolean, Number, String], required: false },
+  marginBlockStart: { type: [Boolean, Number, String], required: false },
+  marginBlockEnd: { type: [Boolean, Number, String], required: false },
+  height: { type: [Number, String], required: false },
+  maxHeight: { type: [Number, String], required: false },
+  maxWidth: { type: [Number, String], required: false },
+  minHeight: { type: [Number, String], required: false },
+  minWidth: { type: [Number, String], required: false },
+  width: { type: [Number, String], required: false }
+});
+const emit = defineEmits(["update:modelValue", "copy"]);
+defineSlots();
+const slots = useSlots();
+const { t } = useLocale();
+function getItems() {
+  return resolveCodeGroupItems(props.items, slots.default?.(), {
+    label: props.label,
+    lineNumbers: props.lineNumbers,
+    wrap: props.wrap,
+    t
+  });
+}
+const model = useVModel(props, "modelValue", () => getItems()[0]?.value);
+const tabsLabel = computed(() => props.label ?? t("origam.code_group.tabs_aria_label"));
+const { copy, copied } = useClipboard({ feedbackDuration: CODE_DEFAULTS.copyFeedbackDurationMs });
+async function handleCopy() {
+  const code = findCodeGroupItem(getItems(), model.value)?.code ?? "";
+  if (await copy(code)) emit("copy", code);
+}
+const copyButtonLabel = computed(() => copied.value ? t("origam.code.copied") : t("origam.code.copy"));
+const copyAriaLabel = computed(() => copied.value ? t("origam.code.copied_aria_label") : t("origam.code.copy_aria_label"));
+const copyBtnStyle = {
+  padding: "var(--origam-code__copy---padding-block) var(--origam-code__copy---padding-inline)"
+};
+const { borderClasses, borderStyles } = useBorder(props);
+const { roundedClasses, roundedStyles } = useRounded(props);
+const { elevationClasses } = useElevation(props);
+const { marginClasses, marginStyles } = useMargin(props);
+const { dimensionStyles } = useDimension(props);
+const groupClasses = computed(() => [
+  "origam-code-group",
+  { "origam-code-group--copyable": props.copyable },
+  borderClasses.value,
+  roundedClasses.value,
+  elevationClasses.value,
+  marginClasses.value,
+  props.class
+]);
+const groupStyles = computed(() => [
+  borderStyles.value,
+  roundedStyles.value,
+  marginStyles.value,
+  dimensionStyles.value,
+  props.style
+]);
+defineExpose({ copied, model });
+</script>
+
+<style lang="scss">
+	.origam-code-group {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr) auto;
+		grid-template-areas:
+			"tabs copy"
+			"panels panels";
+		align-items: center;
+		margin: 0;
+		overflow: hidden;
+		background-color: var(--origam-code__header---background-color);
+		color: var(--origam-code---color);
+		border: var(--origam-code---border-width) solid var(--origam-code---border-color);
+		border-radius: var(--origam-code---border-radius);
+	}
+
+	.origam-code-group__tabs {
+		grid-area: tabs;
+		min-inline-size: 0;
+		overflow-x: auto;
+	}
+
+	.origam-code-group__copy {
+		grid-area: copy;
+		margin-inline-end: var(--origam-code__header---padding-inline);
+	}
+
+	.origam-code-group__panels {
+		grid-area: panels;
+		min-inline-size: 0;
+		background-color: var(--origam-code---background-color);
+		border-top: var(--origam-code---border-width) solid var(--origam-code---border-color);
+	}
+</style>

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

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

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

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

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

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

package/dist/src/components/index.cjs

@@ -201,6 +201,17 @@ Object.keys(_Code).forEach(function (key) {
     }
   });
 });
+var _CodeGroup = require("./CodeGroup/index.cjs");
+Object.keys(_CodeGroup).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _CodeGroup[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _CodeGroup[key];
+    }
+  });
+});
 var _ColorPicker = require("./ColorPicker/index.cjs");
 Object.keys(_ColorPicker).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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

@@ -16,6 +16,7 @@ export * from './Chip';
 export * from './ClientOnly';
 export * from './Clipboard';
 export * from './Code';
+export * from './CodeGroup';
 export * from './ColorPicker';
 export * from './ColorPickerField';
 export * from './CommandPalette';

package/dist/src/components/index.js

@@ -16,6 +16,7 @@ export * from "./Chip/index.js";
 export * from "./ClientOnly/index.js";
 export * from "./Clipboard/index.js";
 export * from "./Code/index.js";
+export * from "./CodeGroup/index.js";
 export * from "./ColorPicker/index.js";
 export * from "./ColorPickerField/index.js";
 export * from "./CommandPalette/index.js";

package/dist/src/consts/CodeGroup/code-group.const.cjs

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CODE_GROUP_EMBED_PROPS = exports.CODE_GROUP_DEFAULTS = void 0;
+const CODE_GROUP_EMBED_PROPS = exports.CODE_GROUP_EMBED_PROPS = {
+  hideHeader: true,
+  flat: true,
+  copyable: false
+};
+const CODE_GROUP_DEFAULTS = exports.CODE_GROUP_DEFAULTS = {
+  tag: "figure",
+  copyable: true,
+  lineNumbers: false,
+  wrap: false
+};

package/dist/src/consts/CodeGroup/code-group.const.d.ts

@@ -0,0 +1,16 @@
+import type { ICodeProps } from '../../interfaces/Code/code.interface';
+/*********************************************************
+ * CODE_GROUP_EMBED_PROPS
+ *
+ * @description
+ * What `<OrigamCodeGroup>` forces on every `<OrigamCode>` it hosts: the tab
+ * already shows the label, the group already owns the one surface and the
+ * one copy button.
+ ********************************************************/
+export declare const CODE_GROUP_EMBED_PROPS: Pick<ICodeProps, 'hideHeader' | 'flat' | 'copyable'>;
+export declare const CODE_GROUP_DEFAULTS: {
+    readonly tag: "figure";
+    readonly copyable: true;
+    readonly lineNumbers: false;
+    readonly wrap: false;
+};

package/dist/src/consts/CodeGroup/code-group.const.js

@@ -0,0 +1,11 @@
+export const CODE_GROUP_EMBED_PROPS = {
+  hideHeader: true,
+  flat: true,
+  copyable: false
+};
+export const CODE_GROUP_DEFAULTS = {
+  tag: "figure",
+  copyable: true,
+  lineNumbers: false,
+  wrap: false
+};

package/dist/src/consts/index.cjs

@@ -366,6 +366,17 @@ Object.keys(_code).forEach(function (key) {
     }
   });
 });
+var _codeGroup = require("./CodeGroup/code-group.const.cjs");
+Object.keys(_codeGroup).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _codeGroup[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _codeGroup[key];
+    }
+  });
+});
 var _selectionControl = require("./SelectionControl/selection-control.const.cjs");
 Object.keys(_selectionControl).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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

@@ -31,6 +31,7 @@ export * from './Commons/vmodel.const';
 export * from './Commons/forwardRefs.const';
 export * from './ColorPicker/color-picker.const';
 export * from './Code/code.const';
+export * from './CodeGroup/code-group.const';
 export * from './SelectionControl/selection-control.const';
 export * from './Snackbar/snackbar-group.const';
 export * from './Snackbar/snackbar.const';

package/dist/src/consts/index.js

@@ -31,6 +31,7 @@ export * from "./Commons/vmodel.const.js";
 export * from "./Commons/forwardRefs.const.js";
 export * from "./ColorPicker/color-picker.const.js";
 export * from "./Code/code.const.js";
+export * from "./CodeGroup/code-group.const.js";
 export * from "./SelectionControl/selection-control.const.js";
 export * from "./Snackbar/snackbar-group.const.js";
 export * from "./Snackbar/snackbar.const.js";

package/dist/src/interfaces/Code/code.interface.d.ts

@@ -88,7 +88,27 @@ export interface ICodeProps extends ICommonsComponentProps, ITagProps, IBorderPr
      * Most useful paired with `compact` for an install-command pill.
      */
     prompt?: string;
+    hideHeader?: boolean;
+    flat?: boolean;
+    scrollerAriaLabel?: string;
 }
+/*********************************************************
+ * Embedding props (`hideHeader`, `flat`, `scrollerAriaLabel`)
+ *
+ * @description
+ * `hideHeader` removes the header bar (filename / language badge / copy
+ * button) whatever `filename`, `copyable` or the `header` slot say.
+ * @description
+ * `flat` flattens the block into its host: no border, no radius, no
+ * elevation, no outer margin, so the host owns the one visible surface.
+ * @description
+ * `scrollerAriaLabel` is the accessible name of the scrollable region. Left
+ * out, it is derived from `filename`, then `lang`; set it when several blocks
+ * of the same language share a page.
+ * @description
+ * The three exist so a block can sit inside `<OrigamCodeGroup>`, a tab already
+ * showing the label and the group owning the surface and the copy button.
+ ********************************************************/
 /*********************************************************
  * ICodeOptions
  *

package/dist/src/interfaces/CodeGroup/code-group.interface.cjs

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

package/dist/src/interfaces/CodeGroup/code-group.interface.d.ts

@@ -0,0 +1,102 @@
+import type { VNode } from 'vue';
+import type { IBorderProps } from '../Commons/border.interface';
+import type { ICommonsComponentEmits, ICommonsComponentProps, ITagProps } from '../Commons/commons.interface';
+import type { IDimensionProps } from '../Commons/dimension.interface';
+import type { IElevationProps } from '../Commons/elevation.interface';
+import type { IMarginProps } from '../Commons/margin.interface';
+import type { IRoundedProps } from '../Commons/rounded.interface';
+import type { TCodeLangOpen } from '../../types/Code/code.type';
+/*********************************************************
+ * ICodeGroupItem
+ *
+ * @description
+ * One tab of an `<OrigamCodeGroup>` in its `items` form: the label shown on
+ * the tab and the code shown in its panel.
+ ********************************************************/
+export interface ICodeGroupItem {
+    label: string;
+    code: string;
+    lang?: TCodeLangOpen;
+    filename?: string;
+    value?: string;
+}
+/*********************************************************
+ * ICodeGroupResolvedItem
+ *
+ * @description
+ * An `ICodeGroupItem` once the group has settled its `value` and, in the
+ * slot form, kept the child `<OrigamCode>` vnode to render in the panel.
+ ********************************************************/
+export interface ICodeGroupResolvedItem extends Required<Pick<ICodeGroupItem, 'label' | 'code' | 'value'>>, Pick<ICodeGroupItem, 'lang' | 'filename'> {
+    vnode?: VNode;
+}
+/*********************************************************
+ * ICodeGroupRenderedItem
+ *
+ * @description
+ * A resolved item whose `vnode` is the `<OrigamCode>` to render in the panel,
+ * already flattened, header-less and named. Built by `resolveCodeGroupItems`.
+ ********************************************************/
+export interface ICodeGroupRenderedItem extends Omit<ICodeGroupResolvedItem, 'vnode'> {
+    vnode: VNode;
+}
+/*********************************************************
+ * ICodeGroupResolveOptions
+ *
+ * @description
+ * What `resolveCodeGroupItems` needs from the group: its `label` and `t` to
+ * name each scroller, and `lineNumbers` / `wrap` to forward to every block.
+ ********************************************************/
+export interface ICodeGroupResolveOptions {
+    label?: string;
+    lineNumbers: boolean;
+    wrap: boolean;
+    t: (key: string, ...params: unknown[]) => string;
+}
+/*********************************************************
+ * ICodeGroupProps
+ *
+ * @description
+ * Props for `<OrigamCodeGroup>` — tabbed code blocks (npm / pnpm / yarn)
+ * drawn as ONE surface with one shared copy button. Fed either by `items`
+ * or by `<origam-code>` children in the default slot (the tab label comes
+ * from the child's `label`, else its `filename`).
+ * @description
+ * `modelValue` is the `value` of the active tab (default: the first tab).
+ * `label` is the accessible name of the tab list (default: a localised
+ * generic name). `copyable`, `lineNumbers` and `wrap` apply to the whole
+ * group. `items` is ignored when the default slot holds code blocks.
+ ********************************************************/
+export interface ICodeGroupProps extends ICommonsComponentProps, ITagProps, IBorderProps, IRoundedProps, IElevationProps, IMarginProps, IDimensionProps {
+    items?: ICodeGroupItem[];
+    modelValue?: string;
+    label?: string;
+    copyable?: boolean;
+    lineNumbers?: boolean;
+    wrap?: boolean;
+}
+/*********************************************************
+ * ICodeGroupEmits
+ *
+ * @description
+ * `update:modelValue` carries the new active tab `value`; `copy` carries the
+ * code of the tab that was copied.
+ ********************************************************/
+export interface ICodeGroupEmits extends ICommonsComponentEmits {
+    (e: 'update:modelValue', value: string): void;
+    (e: 'copy', code: string): void;
+}
+/*********************************************************
+ * ICodeGroupSlots
+ *
+ * @description
+ * `default` takes the `<origam-code>` children, one per tab, when `items` is
+ * not used. `copy` replaces the shared copy button.
+ ********************************************************/
+export interface ICodeGroupSlots {
+    default?: () => any;
+    copy?: (data: {
+        copy: () => Promise<void>;
+        copied: boolean;
+    }) => any;
+}

package/dist/src/interfaces/index.cjs

@@ -399,6 +399,17 @@ Object.keys(_code).forEach(function (key) {
     }
   });
 });
+var _codeGroup = require("./CodeGroup/code-group.interface.cjs");
+Object.keys(_codeGroup).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _codeGroup[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _codeGroup[key];
+    }
+  });
+});
 var _colorPicker = require("./ColorPicker/color-picker.interface.cjs");
 Object.keys(_colorPicker).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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

@@ -34,6 +34,7 @@ export * from './Chip/chip-group.interface';
 export * from './ClientOnly/client-only.interface';
 export * from './Clipboard/clipboard.interface';
 export * from './Code/code.interface';
+export * from './CodeGroup/code-group.interface';
 export * from './ColorPicker/color-picker.interface';
 export * from './ColorPicker/color-picker-canvas.interface';
 export * from './ConfirmWrapper/confirm-wrapper.interface';

package/dist/src/interfaces/index.js

@@ -34,6 +34,7 @@ export * from "./Chip/chip-group.interface.js";
 export * from "./ClientOnly/client-only.interface.js";
 export * from "./Clipboard/clipboard.interface.js";
 export * from "./Code/code.interface.js";
+export * from "./CodeGroup/code-group.interface.js";
 export * from "./ColorPicker/color-picker.interface.js";
 export * from "./ColorPicker/color-picker-canvas.interface.js";
 export * from "./ConfirmWrapper/confirm-wrapper.interface.js";

package/dist/src/types/CodeGroup/code-group.type.cjs

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

package/dist/src/types/CodeGroup/code-group.type.d.ts

@@ -0,0 +1,2 @@
+import OrigamCodeGroup from '../../components/CodeGroup/OrigamCodeGroup.vue';
+export type TOrigamCodeGroup = InstanceType<typeof OrigamCodeGroup>;

package/dist/src/types/index.cjs

@@ -333,6 +333,17 @@ Object.keys(_code).forEach(function (key) {
     }
   });
 });
+var _codeGroup = require("./CodeGroup/code-group.type.cjs");
+Object.keys(_codeGroup).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _codeGroup[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _codeGroup[key];
+    }
+  });
+});
 var _colorPicker = require("./ColorPicker/color-picker.type.cjs");
 Object.keys(_colorPicker).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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

@@ -28,6 +28,7 @@ export * from './Chip/chip-group.type';
 export * from './ClientOnly/client-only.type';
 export * from './Clipboard/clipboard.type';
 export * from './Code/code.type';
+export * from './CodeGroup/code-group.type';
 export * from './ColorPicker/color-picker.type';
 export * from './ColorPicker/color-picker-canvas.type';
 export * from './ColorPicker/color-picker-preview.type';

package/dist/src/types/index.js

@@ -28,6 +28,7 @@ export * from "./Chip/chip-group.type.js";
 export * from "./ClientOnly/client-only.type.js";
 export * from "./Clipboard/clipboard.type.js";
 export * from "./Code/code.type.js";
+export * from "./CodeGroup/code-group.type.js";
 export * from "./ColorPicker/color-picker.type.js";
 export * from "./ColorPicker/color-picker-canvas.type.js";
 export * from "./ColorPicker/color-picker-preview.type.js";

package/dist/src/utils/CodeGroup/code-group.util.cjs

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.extractCodeGroupText = extractCodeGroupText;
+exports.findCodeGroupItem = findCodeGroupItem;
+exports.flattenCodeGroupVNodes = flattenCodeGroupVNodes;
+exports.resolveCodeGroupItems = resolveCodeGroupItems;
+exports.resolveCodeGroupSlotItems = resolveCodeGroupSlotItems;
+var _vue = require("vue");
+var _OrigamCode = _interopRequireDefault(require("../../components/Code/OrigamCode.vue"));
+var _codeGroup = require("../../consts/CodeGroup/code-group.const.cjs");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function flattenCodeGroupVNodes(nodes) {
+  const out = [];
+  for (const node of nodes ?? []) {
+    if (node.type === _vue.Fragment && Array.isArray(node.children)) {
+      out.push(...flattenCodeGroupVNodes(node.children));
+    } else if (node.type !== _vue.Comment && node.type !== _vue.Text) {
+      out.push(node);
+    }
+  }
+  return out;
+}
+function extractCodeGroupText(node) {
+  const children = node.children;
+  const raw = typeof children === "object" && children !== null && !Array.isArray(children) ? children.default?.() : children;
+  const parts = [];
+  const visit = value => {
+    if (value == null || typeof value === "boolean") return;
+    if (typeof value === "string" || typeof value === "number") {
+      parts.push(String(value));
+      return;
+    }
+    if (Array.isArray(value)) {
+      value.forEach(visit);
+      return;
+    }
+    visit(value.children);
+  };
+  visit(raw);
+  return parts.join("").replace(/^\n+/, "").replace(/\n+$/, "");
+}
+function resolveCodeGroupSlotItems(nodes) {
+  return flattenCodeGroupVNodes(nodes).map((vnode, index) => {
+    const attrs = vnode.props ?? {};
+    const label = String(attrs.label ?? attrs.filename ?? index + 1);
+    return {
+      label,
+      value: String(attrs.value ?? label),
+      code: typeof attrs.code === "string" ? attrs.code : extractCodeGroupText(vnode),
+      lang: attrs.lang,
+      filename: attrs.filename,
+      vnode
+    };
+  });
+}
+function resolveCodeGroupItems(items, nodes, options) {
+  const fromSlot = resolveCodeGroupSlotItems(nodes);
+  const source = fromSlot.length > 0 ? fromSlot : items.map(item => ({
+    ...item,
+    value: item.value ?? item.label
+  }));
+  return source.map((item, index) => {
+    const params = {
+      label: item.label,
+      position: index + 1,
+      total: source.length
+    };
+    const scrollerAriaLabel = options.label ? options.t("origam.code_group.scroller_aria_label_group", {
+      ...params,
+      group: options.label
+    }) : options.t("origam.code_group.scroller_aria_label", params);
+    const embed = {
+      ..._codeGroup.CODE_GROUP_EMBED_PROPS,
+      lineNumbers: options.lineNumbers || void 0,
+      wrap: options.wrap || void 0,
+      scrollerAriaLabel
+    };
+    const vnode = item.vnode ? (0, _vue.cloneVNode)(item.vnode, {
+      ...embed,
+      label: void 0,
+      value: void 0
+    }) : (0, _vue.h)(_OrigamCode.default, {
+      code: item.code,
+      lang: item.lang,
+      filename: item.filename,
+      ...embed
+    });
+    return {
+      ...item,
+      vnode
+    };
+  });
+}
+function findCodeGroupItem(items, value) {
+  return items.find(item => item.value === value) ?? items[0];
+}

package/dist/src/utils/CodeGroup/code-group.util.d.ts

@@ -0,0 +1,51 @@
+import type { VNode } from 'vue';
+import type { ICodeGroupRenderedItem, ICodeGroupResolvedItem, ICodeGroupResolveOptions } from '../../interfaces/CodeGroup/code-group.interface';
+/*********************************************************
+ * flattenCodeGroupVNodes
+ *
+ * @description
+ * Walks a default-slot vnode list, going through fragments (`v-for`), and
+ * returns the component vnodes only: comments and whitespace text are the
+ * template's noise, not tabs.
+ ********************************************************/
+export declare function flattenCodeGroupVNodes(nodes: VNode[] | undefined): VNode[];
+/*********************************************************
+ * extractCodeGroupText
+ *
+ * @description
+ * Text content of a child's default slot, used when the block gives its code
+ * in the slot rather than in the `code` prop (same rule as `<OrigamCode>`:
+ * leading and trailing blank lines dropped).
+ ********************************************************/
+export declare function extractCodeGroupText(node: VNode): string;
+/*********************************************************
+ * resolveCodeGroupSlotItems
+ *
+ * @description
+ * Builds the tabs of the slot form. The label is the child's `label`, else its
+ * `filename`, else its position, so a block is never left without a tab.
+ ********************************************************/
+export declare function resolveCodeGroupSlotItems(nodes: VNode[] | undefined): ICodeGroupResolvedItem[];
+/*********************************************************
+ * resolveCodeGroupItems
+ *
+ * @description
+ * One list for both forms of `<OrigamCodeGroup>`: the code blocks of the
+ * default slot win, `items` is the fallback. Every item comes back with the
+ * `<OrigamCode>` vnode to render, already flattened, header-less and named
+ * after the group `label`, its tab and its position — so the component does
+ * no per-item work in its template.
+ * @description
+ * `items` is typed `readonly unknown[]` on purpose: the compiled `.vue` that
+ * `nuxt typecheck` reads (`packages/ds/dist`) has its types stripped, so the
+ * prop reaches this call as `unknown[]` and an `ICodeGroupItem[]` parameter
+ * would add one error to the marketing type-check ratchet.
+ ********************************************************/
+export declare function resolveCodeGroupItems(items: readonly unknown[], nodes: VNode[] | undefined, options: ICodeGroupResolveOptions): ICodeGroupRenderedItem[];
+/*********************************************************
+ * findCodeGroupItem
+ *
+ * @description
+ * The item whose `value` is the active one, the first item when none matches.
+ ********************************************************/
+export declare function findCodeGroupItem(items: ICodeGroupRenderedItem[], value: unknown): ICodeGroupRenderedItem | undefined;

package/dist/src/utils/CodeGroup/code-group.util.js

@@ -0,0 +1,66 @@
+import { cloneVNode, Comment, Fragment, h, Text } from "vue";
+import OrigamCode from "../../components/Code/OrigamCode.vue";
+import { CODE_GROUP_EMBED_PROPS } from "../../consts/CodeGroup/code-group.const.js";
+export function flattenCodeGroupVNodes(nodes) {
+  const out = [];
+  for (const node of nodes ?? []) {
+    if (node.type === Fragment && Array.isArray(node.children)) {
+      out.push(...flattenCodeGroupVNodes(node.children));
+    } else if (node.type !== Comment && node.type !== Text) {
+      out.push(node);
+    }
+  }
+  return out;
+}
+export function extractCodeGroupText(node) {
+  const children = node.children;
+  const raw = typeof children === "object" && children !== null && !Array.isArray(children) ? children.default?.() : children;
+  const parts = [];
+  const visit = (value) => {
+    if (value == null || typeof value === "boolean") return;
+    if (typeof value === "string" || typeof value === "number") {
+      parts.push(String(value));
+      return;
+    }
+    if (Array.isArray(value)) {
+      value.forEach(visit);
+      return;
+    }
+    visit(value.children);
+  };
+  visit(raw);
+  return parts.join("").replace(/^\n+/, "").replace(/\n+$/, "");
+}
+export function resolveCodeGroupSlotItems(nodes) {
+  return flattenCodeGroupVNodes(nodes).map((vnode, index) => {
+    const attrs = vnode.props ?? {};
+    const label = String(attrs.label ?? attrs.filename ?? index + 1);
+    return {
+      label,
+      value: String(attrs.value ?? label),
+      code: typeof attrs.code === "string" ? attrs.code : extractCodeGroupText(vnode),
+      lang: attrs.lang,
+      filename: attrs.filename,
+      vnode
+    };
+  });
+}
+export function resolveCodeGroupItems(items, nodes, options) {
+  const fromSlot = resolveCodeGroupSlotItems(nodes);
+  const source = fromSlot.length > 0 ? fromSlot : items.map((item) => ({ ...item, value: item.value ?? item.label }));
+  return source.map((item, index) => {
+    const params = { label: item.label, position: index + 1, total: source.length };
+    const scrollerAriaLabel = options.label ? options.t("origam.code_group.scroller_aria_label_group", { ...params, group: options.label }) : options.t("origam.code_group.scroller_aria_label", params);
+    const embed = {
+      ...CODE_GROUP_EMBED_PROPS,
+      lineNumbers: options.lineNumbers || void 0,
+      wrap: options.wrap || void 0,
+      scrollerAriaLabel
+    };
+    const vnode = item.vnode ? cloneVNode(item.vnode, { ...embed, label: void 0, value: void 0 }) : h(OrigamCode, { code: item.code, lang: item.lang, filename: item.filename, ...embed });
+    return { ...item, vnode };
+  });
+}
+export function findCodeGroupItem(items, value) {
+  return items.find((item) => item.value === value) ?? items[0];
+}

package/dist/src/utils/index.cjs

@@ -696,6 +696,17 @@ Object.keys(_parseHighlightLines).forEach(function (key) {
     }
   });
 });
+var _codeGroup = require("./CodeGroup/code-group.util.cjs");
+Object.keys(_codeGroup).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _codeGroup[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _codeGroup[key];
+    }
+  });
+});
 var _sanitizeHtml = require("./TextareaField/sanitize-html.util.cjs");
 Object.keys(_sanitizeHtml).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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

@@ -61,6 +61,7 @@ export * from './DataTable/slot-name.util';
 export * from './DataTable/skeleton-cell.util';
 export * from './CommandPalette/fuzzy-match.util';
 export * from './Code/parse-highlight-lines.util';
+export * from './CodeGroup/code-group.util';
 export * from './TextareaField/sanitize-html.util';
 export * from './TextareaField/html-to-markdown.util';
 export * from './Commons/apply-mask.util';

package/dist/src/utils/index.js

@@ -61,6 +61,7 @@ export * from "./DataTable/slot-name.util.js";
 export * from "./DataTable/skeleton-cell.util.js";
 export * from "./CommandPalette/fuzzy-match.util.js";
 export * from "./Code/parse-highlight-lines.util.js";
+export * from "./CodeGroup/code-group.util.js";
 export * from "./TextareaField/sanitize-html.util.js";
 export * from "./TextareaField/html-to-markdown.util.js";
 export * from "./Commons/apply-mask.util.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "origam",
-  "version": "2.35.1",
+  "version": "2.36.0",
   "type": "module",
   "description": "origam — a Vue 3 design system with multi-theme design tokens, CSS-first components and TypeScript types.",
   "keywords": [