origam 2.12.1 → 2.13.0

package/dist/src/components/Breadcrumb/OrigamBreadcrumbItem.vue

@@ -13,7 +13,7 @@
 		<template v-if="hasPrepend">
       <span
 		      key="prepend"
-		      class="origam-breadcrumbs__prepend"
+		      class="origam-breadcrumb-item__prepend"
 		      @click="handleClickPrepend"
       >
         <slot name="prepend">
@@ -40,7 +40,7 @@
 		<template v-if="hasAppend">
       <span
 		      key="append"
-		      class="origam-breadcrumbs__append"
+		      class="origam-breadcrumb-item__append"
 		      @click="handleClickAppend"
       >
        <slot name="append">

package/dist/src/components/Btn/OrigamBtn.vue

@@ -386,7 +386,7 @@ const btnClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(btnStyles);
+const { id, css, load, isLoaded, unload } = useStyle(btnStyles, () => props.id);
 defineExpose({
   group,
   filterProps,

package/dist/src/components/Calendar/OrigamCalendar.vue

@@ -459,13 +459,13 @@ const VIEW_LABEL_FALLBACK = {
 function viewLabel(view) {
   return t(`origam.calendar.view.${view}`, VIEW_LABEL_FALLBACK[view]);
 }
-const ariaLabel = computed(() => t("origam.calendar.ariaLabel", "Calendar"));
+const ariaLabel = computed(() => t("origam.calendar.aria_label", "Calendar"));
 const ariaToolbarLabel = computed(() => t("origam.calendar.toolbar", "Calendar toolbar"));
 const ariaPrevLabel = computed(() => t("origam.calendar.previous", "Previous"));
 const ariaNextLabel = computed(() => t("origam.calendar.next", "Next"));
 const ariaTodayLabel = computed(() => t("origam.calendar.today", "Today"));
-const ariaViewListLabel = computed(() => t("origam.calendar.viewSwitcher", "View"));
-const ariaMonthLabel = computed(() => t("origam.calendar.monthGrid", "Month grid"));
+const ariaViewListLabel = computed(() => t("origam.calendar.view_switcher", "View"));
+const ariaMonthLabel = computed(() => t("origam.calendar.month_grid", "Month grid"));
 const todayLabel = computed(() => t("origam.calendar.today", "Today"));
 const emptyLabel = computed(() => t("origam.calendar.empty", "No events to display"));
 const slotPx = DEFAULT_SLOT_HEIGHT_PX;

package/dist/src/components/Carousel/OrigamCarousel.vue

@@ -243,7 +243,7 @@ const controlProps = (item, index, group) => {
     item,
     {
       id: `carousel-item-${item.id}`,
-      "aria-label": t("origam.carousel.ariaLabel.delimiter", index + 1, group.items.value.length),
+      "aria-label": t("origam.carousel.aria_label.delimiter", index + 1, group.items.value.length),
       // The SELECTED dot is active. When the consumer passes an
       // `active` STATE object, the selected dot wears that surface
       // (forced); otherwise it just reads as active. Hover applies

package/dist/src/components/Clipboard/OrigamClipboard.vue

@@ -108,7 +108,7 @@ const { t } = useLocale();
 const resolvedFeedbackText = computed(() => props.successText ?? props.feedbackText ?? "Copied!");
 const defaultIcon = MDI_ICONS.CONTENT_COPY;
 const defaultAriaLabel = computed(
-  () => copied.value ? t("origam.clipboard.copiedAriaLabel", "Value copied to clipboard") : t("origam.clipboard.copyAriaLabel", "Copy to clipboard")
+  () => copied.value ? t("origam.clipboard.copied_aria_label", "Value copied to clipboard") : t("origam.clipboard.copy_aria_label", "Copy to clipboard")
 );
 async function handleCopy() {
   if (props.disabled) return false;

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

@@ -267,7 +267,7 @@ const copyButtonLabel = computed(
   () => copied.value ? t("origam.code.copied", "Copied!") : t("origam.code.copy", "Copy")
 );
 const copyAriaLabel = computed(
-  () => copied.value ? t("origam.code.copiedAriaLabel", "Code copied to clipboard") : t("origam.code.copyAriaLabel", "Copy code to clipboard")
+  () => copied.value ? t("origam.code.copied_aria_label", "Code copied to clipboard") : t("origam.code.copy_aria_label", "Copy code to clipboard")
 );
 const copyBtnStyle = {
   padding: "var(--origam-code__copy---padding-block) var(--origam-code__copy---padding-inline)"

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

@@ -128,12 +128,12 @@ const updateCanvas = () => {
   ctx.fillRect(0, 0, canvas.width, canvas.height);
 };
 const canvasAriaLabel = computed(() => {
-  return props.ariaLabel ?? t("origam.colorPicker.canvas.ariaLabel");
+  return props.ariaLabel ?? t("origam.color_picker.canvas.aria_label");
 });
 const canvasAriaValueText = computed(() => {
   const s = Math.round((props.colorHsv?.s ?? 0) * 100);
   const v = Math.round((props.colorHsv?.v ?? 0) * 100);
-  return t("origam.colorPicker.canvas.value", s, v);
+  return t("origam.color_picker.canvas.value", s, v);
 });
 const STEP_SMALL = 0.01;
 const STEP_LARGE = 0.05;

package/dist/src/components/ContextualMenu/OrigamContextualMenu.vue

@@ -92,6 +92,7 @@ const props = defineProps({
   borderBottomColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   density: { type: null, required: false },
+  size: { type: null, required: false },
   rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
   roundedTopRight: { type: [Boolean, Number, String], required: false },
   roundedTopLeft: { type: [Boolean, Number, String], required: false },

package/dist/src/components/DataTable/OrigamDataTableFooter.vue

@@ -50,18 +50,18 @@ const props = defineProps({
   nextIcon: { type: null, required: false },
   firstIcon: { type: null, required: false },
   lastIcon: { type: null, required: false },
-  itemsPerPageText: { type: String, required: false, default: "origam.dataFooter.itemsPerPageText" },
-  pageText: { type: String, required: false, default: "origam.dataFooter.pageText" },
-  firstPageLabel: { type: String, required: false, default: "origam.dataFooter.firstPage" },
-  prevPageLabel: { type: String, required: false, default: "origam.dataFooter.prevPage" },
-  nextPageLabel: { type: String, required: false, default: "origam.dataFooter.nextPage" },
-  lastPageLabel: { type: String, required: false, default: "origam.dataFooter.lastPage" },
+  itemsPerPageText: { type: String, required: false, default: "origam.data_footer.items_per_page_text" },
+  pageText: { type: String, required: false, default: "origam.data_footer.page_text" },
+  firstPageLabel: { type: String, required: false, default: "origam.data_footer.first_page" },
+  prevPageLabel: { type: String, required: false, default: "origam.data_footer.prev_page" },
+  nextPageLabel: { type: String, required: false, default: "origam.data_footer.next_page" },
+  lastPageLabel: { type: String, required: false, default: "origam.data_footer.last_page" },
   itemsPerPageOptions: { type: Array, required: false, default: () => [
     { value: 10, title: "10" },
     { value: 25, title: "25" },
     { value: 50, title: "50" },
     { value: 100, title: "100" },
-    { value: -1, title: "origam.dataFooter.itemsPerPageAll" }
+    { value: -1, title: "origam.data_footer.items_per_page_all" }
   ] },
   showCurrentPage: { type: Boolean, required: false, default: true },
   id: { type: String, required: false },
@@ -90,7 +90,7 @@ const itemsPerPageOptions = computed(() => props.itemsPerPageOptions.map((option
   if (typeof option === "number") {
     return {
       value: option,
-      title: option === -1 ? t("origam.dataFooter.itemsPerPageAll") : String(option)
+      title: option === -1 ? t("origam.data_footer.items_per_page_all") : String(option)
     };
   }
   return {

package/dist/src/components/DataTable/OrigamDataTableHeadersCellMobile.vue

@@ -13,7 +13,7 @@
 							:append-icon="appendIcon"
 							:density="DENSITY.DEFAULT"
 							:items="displayItems"
-							:label="t('origam.dataTable.sortBy')"
+							:label="t('origam.data_table.sort_by')"
 							:multiple="multiSort"
 							chips
 							class="origam-data-table-headers-cell__sort-select"

package/dist/src/components/DataTable/OrigamDataTableRow.vue

@@ -43,7 +43,7 @@
 							>
 								<origam-btn
 										:aria-expanded="isExpanded(item)"
-										:aria-label="isExpanded(item) ? t('origam.dataTableRow.collapseRow', 'Collapse row') : t('origam.dataTableRow.expandRow', 'Expand row')"
+										:aria-label="isExpanded(item) ? t('origam.data_table_row.collapse_row', 'Collapse row') : t('origam.data_table_row.expand_row', 'Expand row')"
 										:icon="isExpanded(item) ? MDI_ICONS.CHEVRON_UP : MDI_ICONS.CHEVRON_DOWN"
 										:size="SIZES.SMALL"
 										@click="handleBtnClick"

package/dist/src/components/DataTable/OrigamDataTableRows.vue

@@ -90,14 +90,14 @@ const attrs = useAttrs();
 const props = defineProps({
   hideNoData: { type: Boolean, required: false },
   items: { type: Array, required: false },
-  noDataText: { type: String, required: false, default: "origam.noDataText" },
+  noDataText: { type: String, required: false, default: "origam.no_data_text" },
   rowProps: { type: [Object, Function], required: false },
   cellProps: { type: [Object, Function], required: false },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   loading: { type: [Boolean, Number, Object], required: false },
-  loadingText: { type: String, required: false, default: "origam.dataIterator.loadingText" },
+  loadingText: { type: String, required: false, default: "origam.data_iterator.loading_text" },
   tag: { type: String, required: false },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   mobileBreakpoint: { type: null, required: false }

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

@@ -174,7 +174,7 @@ const props = defineProps({
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   hover: { type: [Boolean, Object], required: false },
-  title: { type: String, required: false, default: "origam.datePicker.title" },
+  title: { type: String, required: false, default: "origam.date_picker.title" },
   fontFamily: { type: String, required: false },
   fontSize: { type: String, required: false },
   fontWeight: { type: String, required: false },
@@ -206,7 +206,7 @@ const props = defineProps({
   weekdays: { type: Array, required: false },
   weeksInMonth: { type: null, required: false, default: CALENDAR_STRATEGY.STATIC },
   firstDayOfWeek: { type: Number, required: false },
-  header: { type: String, required: false, default: "origam.datePicker.header" },
+  header: { type: String, required: false, default: "origam.date_picker.header" },
   appendAvatar: { type: String, required: false },
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
@@ -244,7 +244,7 @@ const year = ref(Number(props.year ?? adapter.getYear(adapter.startOfYear(adapte
 const isReversing = shallowRef(false);
 const header = computed(() => {
   if ((props.multiple || props.range) && model.value?.length > 1) {
-    return t("origam.datePicker.itemsSelected", model.value?.length);
+    return t("origam.date_picker.items_selected", model.value?.length);
   }
   return model.value?.[0] && adapter.isValid(model.value?.[0]) ? adapter.format(adapter.date(model.value?.[0]), "normalDateWithWeekday") : t(props.header);
 });

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

@@ -86,7 +86,7 @@
 				<template v-if="isRange">
 					<span class="origam-date-picker-field__selection-text">
             <slot name="rangeSelection">
-              {{ t('origam.datePickerRangeField.text', selectedValues[0], selectedValues[1]) }}
+              {{ t('origam.date_picker_range_field.text', selectedValues[0], selectedValues[1]) }}
             </slot>
           </span>
 				</template>

package/dist/src/components/ExpansionPanel/OrigamExpansionPanelHeader.vue

@@ -46,10 +46,15 @@
 					class="origam-expansion-panel-header__title"
 			>
         <slot
-		        name="default"
+		        name="title"
 		        v-bind="slotProps"
         >
-          {{ title }}
+          <slot
+			        name="default"
+			        v-bind="slotProps"
+          >
+            {{ title }}
+          </slot>
         </slot>
       </span>
 
@@ -189,7 +194,7 @@ const slotProps = computed(() => {
   };
 });
 const hasTitle = computed(() => {
-  return slots.default || props.title;
+  return slots.title || slots.default || props.title != null;
 });
 const {
   hasAppend,

package/dist/src/components/FileField/OrigamFileField.vue

@@ -395,8 +395,8 @@ import { filterInputAttrs, forwardRefs, humanReadableFileSize, wrapInArray } fro
 const _props = defineProps({
   chips: { type: Boolean, required: false },
   counter: { type: Boolean, required: false },
-  counterSizeString: { type: String, required: false, default: "origam.fileField.counterSize" },
-  counterString: { type: String, required: false, default: "origam.fileField.counter" },
+  counterSizeString: { type: String, required: false, default: "origam.file_field.counter_size" },
+  counterString: { type: String, required: false, default: "origam.file_field.counter" },
   placeholder: { type: String, required: false },
   persistentPlaceholder: { type: Boolean, required: false },
   persistentCounter: { type: Boolean, required: false },
@@ -414,9 +414,9 @@ const _props = defineProps({
   downloadIcon: { type: String, required: false, default: MDI_ICONS.DOWNLOAD },
   downloadable: { type: Boolean, required: false },
   progress: { type: Array, required: false },
-  dropzoneTitle: { type: String, required: false, default: "origam.fileField.dropzoneTitle" },
-  dropzoneSubtitle: { type: String, required: false, default: "origam.fileField.dropzoneSubtitle" },
-  browseText: { type: String, required: false, default: "origam.fileField.browse" },
+  dropzoneTitle: { type: String, required: false, default: "origam.file_field.dropzone_title" },
+  dropzoneSubtitle: { type: String, required: false, default: "origam.file_field.dropzone_subtitle" },
+  browseText: { type: String, required: false, default: "origam.file_field.browse" },
   maxFileSizeErrorString: { type: String, required: false, default: "origam.validation.max_size_error" },
   display: { type: String, required: false, default: "list" },
   dropzone: { type: Boolean, required: false },
@@ -692,16 +692,16 @@ const fileNames = computed(() => {
 const selectionText = computed(() => {
   if (!hasFiles.value) return "";
   if (props.multiple) {
-    return t(props.counterString, [model.value?.length ?? 0]);
+    return t(props.counterString, model.value?.length ?? 0);
   }
   return fileNames.value[0] ?? "";
 });
 const counterValue = computed(() => {
   const fileCount = model.value?.length ?? 0;
   if (props.showSize) {
-    return t(props.counterSizeString, [fileCount, totalBytesReadable.value]);
+    return t(props.counterSizeString, fileCount, totalBytesReadable.value);
   }
-  return t(props.counterString, [fileCount]);
+  return t(props.counterString, fileCount);
 });
 const hasFiles = computed(() => {
   return Array.isArray(model.value) && model.value.length > 0;

package/dist/src/components/InfiniteScroll/OrigamInfiniteScroll.vue

@@ -134,8 +134,8 @@ import {
 const props = defineProps({
   side: { type: null, required: false, default: INFINITE_SCROLL_SIDE.END },
   mode: { type: null, required: false, default: INFINITE_SCROLL_MODE.INTERSECT },
-  loadMoreText: { type: String, required: false, default: "origam.infiniteScroll.loadMore" },
-  emptyText: { type: String, required: false, default: "origam.infiniteScroll.empty" },
+  loadMoreText: { type: String, required: false, default: "origam.infinite_scroll.load_more" },
+  emptyText: { type: String, required: false, default: "origam.infinite_scroll.empty" },
   margin: { type: String, required: false },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },

package/dist/src/components/List/OrigamList.vue

@@ -2,6 +2,7 @@
 	<component
 			:is="tag"
 			:id="id"
+			ref="contentRef"
 			:class="listClasses"
 			:style="listStyles"
 			:tabindex="tabIndex"
@@ -132,6 +133,7 @@ const props = defineProps({
   borderBottomColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
+  size: { type: null, required: false },
   rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
   roundedTopRight: { type: [Boolean, Number, String], required: false },
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
@@ -177,6 +179,7 @@ const { filterProps } = useProps(props);
 const slotDefaults = computed(() => ({
   "origam-list-item": {
     density: props.density,
+    size: props.size,
     color: props.color,
     bgColor: props.bgColor
   }
@@ -384,6 +387,10 @@ defineExpose({
 			--origam-list---density: -8px;
 		}
 
+		&--density-comfortable {
+			--origam-list---density: 8px;
+		}
+
 		&__overlay {
 			background-color: var(--origam-list__overlay---background-color, var(--origam-color__overlay---scrim));
 			border-radius: var(--origam-list__overlay---border-radius, inherit);

package/dist/src/components/List/OrigamListItem.vue

@@ -124,6 +124,7 @@ import {
   useList,
   useNestedItem,
   useProps,
+  useSize,
   useStateEffect,
   useStyle,
   useTypography
@@ -171,6 +172,7 @@ const _props = defineProps({
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
+  size: { type: null, required: false },
   tag: { type: String, required: false, default: "div" },
   href: { type: String, required: false },
   replace: { type: Boolean, required: false },
@@ -222,6 +224,7 @@ const {
 const list = useList();
 const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, "bgColor"));
 const { densityClasses } = useDensity(props);
+const { sizeClasses } = useSize(props);
 const { isHover, hoverState } = useHover(props);
 const {
   borderClasses,
@@ -337,6 +340,7 @@ const listItemClasses = computed(() => {
     backgroundColorClasses.value,
     borderClasses.value,
     densityClasses.value,
+    sizeClasses.value,
     elevationClasses.value,
     lineClasses.value,
     roundedClasses.value,
@@ -365,6 +369,11 @@ defineExpose({
 	.origam-list-item {
 		$this: &;
 
+		// Declared locally rather than inherited from the global reset in
+		// `assets/scss/main.scss`: the row height is the contract of the
+		// `--size-*` rungs below, and it must resolve to the same number
+		// whether or not the consumer imported the reset sheet. Same
+		// precedent as `.origam-field__input`, which declares it too.
 		align-items: var(--origam-list-item---align-items, center);
 		display: var(--origam-list-item---display, grid);
 		flex: var(--origam-list-item---flex, none);
@@ -372,15 +381,34 @@ defineExpose({
 		grid-template-columns: var(--origam-list-item---grid-template-columns, max-content 1fr auto);
 
 		max-width: var(--origam-list-item---max-width, 100%);
-		min-height: calc(var(--origam-list-item---min-height, 40px) + var(--origam-list---density, 0px));
+		// Density is added ONCE, on this term only — mirrors
+		// `.origam-field__input`'s own `min-height: max(calc(height + density), lineHeight + padding)`.
+		// The block padding below stays fixed per rung (no density term), exactly
+		// like the field's `--origam-field__input---padding-top/bottom`, which are
+		// only rung-dependent. Adding density a second time here (or a third time
+		// via the block padding) double/triple-counts it — see the mixin comment.
+		// `border-box` is declared here rather than inherited: the rung scale
+		// below resolves to a DIFFERENT height under each box model, so leaving
+		// it to the consumer's reset made the row depend on whether that reset
+		// was loaded. Measured on x-large + comfortable: 60px without the reset
+		// (content-box), 52px with it (border-box) — the second is what a built
+		// app renders, and it silently broke the control/row match. Declaring
+		// the model makes the scale mean one thing everywhere.
+		box-sizing: border-box;
+
+		// Density is added ONCE, on this term only — mirrors
+		// `.origam-field__input`'s own `min-height: max(height + density, …)`.
+		// Under `border-box` this min-height IS the row height, so the rungs
+		// below hand it the FULL rung, not the rung minus its padding.
+		min-height: max(calc(var(--origam-list-item---min-height, 56px) + var(--origam-list---density, 0px)), 1.5rem);
 
 		text-decoration: var(--origam-list-item---text-decoration, none);
 
 		outline: var(--origam-list-item---outline, none);
 		position: var(--origam-list-item---position, relative);
 
-		padding-block-start: calc(var(--origam-list-item---padding-block-start, 8px) + var(--origam-list---density, 0px));
-		padding-block-end: calc(var(--origam-list-item---padding-block-end, 8px) + var(--origam-list---density, 0px));
+		padding-block-start: var(--origam-list-item---padding-block-start, 8px);
+		padding-block-end: var(--origam-list-item---padding-block-end, 8px);
 		padding-inline-start: calc(var(--origam-list-item---padding-inline-start, 16px) + var(--origam-list---indent-padding, 0px) + var(--origam-list---density, 0px));
 		padding-inline-end: calc(var(--origam-list-item---padding-inline-end, 16px) + var(--origam-list---density, 0px));
 
@@ -402,6 +430,46 @@ defineExpose({
 			--origam-list-item---border-radius: 4px;
 		}
 
+		// Row-height scale, aligned rung for rung on the control-height scale
+		// (`--origam-input__control---height-{sm,md,lg,xl}` = 28/36/44/52px) so
+		// a row and a field of the same `size` share an identical vertical
+		// footprint. The block padding is the field's own per-size padding —
+		// (rung - 24px title line-height) / 2.
+		//
+		// The row is `border-box` (declared on the base rule above), so the
+		// `min-height` there IS the rendered height: the rung goes in whole,
+		// and the block padding only positions the 24px title inside it.
+		// Density is NOT touched here — the base rule already applies it once,
+		// to `min-height` only, which is where the field applies it too.
+		//
+		// The result reproduces `.origam-field__input` exactly:
+		// `max(controlHeight + density, 1.5rem + paddingTop + paddingBottom)`.
+		@mixin size-rung($rung, $block) {
+			--origam-list-item---min-height: #{$rung};
+			--origam-list-item---padding-block-start: #{$block};
+			--origam-list-item---padding-block-end: #{$block};
+		}
+
+		&--size-small {
+			@include size-rung(var(--origam-list-item---height-sm, 28px), var(--origam-list-item---padding-block-sm, 2px));
+		}
+
+		// `x-small` maps onto the default rung on purpose: `.origam-field` has no
+		// `--size-x-small` rule, so a field at that size renders at 36px. Giving
+		// the row a smaller rung would re-create the mismatch instead of fixing it.
+		&--size-x-small,
+		&--size-default {
+			@include size-rung(var(--origam-list-item---height-md, 36px), var(--origam-list-item---padding-block-md, 6px));
+		}
+
+		&--size-large {
+			@include size-rung(var(--origam-list-item---height-lg, 44px), var(--origam-list-item---padding-block-lg, 10px));
+		}
+
+		&--size-x-large {
+			@include size-rung(var(--origam-list-item---height-xl, 52px), var(--origam-list-item---padding-block-xl, 14px));
+		}
+
 		&--active {
 			#{$this}__prepend,
 			#{$this}__append {

package/dist/src/components/Media/OrigamMediaController.vue

@@ -213,18 +213,18 @@ const muteLabel = computed(() => t("origam.media.mute", "Mute"));
 const unmuteLabel = computed(() => t("origam.media.unmute", "Unmute"));
 const volumeLabel = computed(() => t("origam.media.volume", "Volume"));
 const seekLabel = computed(() => t("origam.media.seek", "Seek"));
-const previousLabel = computed(() => t("origam.media.previousTrack", "Previous track"));
-const nextLabel = computed(() => t("origam.media.nextTrack", "Next track"));
-const loopAllLabel = computed(() => t("origam.media.loopAll", "Loop playlist"));
-const loopOneLabel = computed(() => t("origam.media.loopOne", "Loop track"));
-const loopOffLabel = computed(() => t("origam.media.loopOff", "Loop off"));
+const previousLabel = computed(() => t("origam.media.previous_track", "Previous track"));
+const nextLabel = computed(() => t("origam.media.next_track", "Next track"));
+const loopAllLabel = computed(() => t("origam.media.loop_all", "Loop playlist"));
+const loopOneLabel = computed(() => t("origam.media.loop_one", "Loop track"));
+const loopOffLabel = computed(() => t("origam.media.loop_off", "Loop off"));
 const shuffleLabel = computed(() => t("origam.media.shuffle", "Shuffle"));
-const castLabel = computed(() => t("origam.media.castToDevice", "Cast to device"));
-const stopCastLabel = computed(() => t("origam.media.stopCasting", "Stop casting"));
+const castLabel = computed(() => t("origam.media.cast_to_device", "Cast to device"));
+const stopCastLabel = computed(() => t("origam.media.stop_casting", "Stop casting"));
 const settingsLabel = computed(() => t("origam.media.settings", "Settings"));
 const downloadLabel = computed(() => t("origam.media.download", "Download"));
-const speedLabel = computed(() => t("origam.media.playbackSpeed", "Playback speed"));
-const normalSpeedLabel = computed(() => t("origam.media.normalSpeed", "Normal"));
+const speedLabel = computed(() => t("origam.media.playback_speed", "Playback speed"));
+const normalSpeedLabel = computed(() => t("origam.media.normal_speed", "Normal"));
 const qualityLabel = computed(() => t("origam.media.quality", "Quality"));
 const transportLabel = computed(() => t("origam.media.transport", "Transport controls"));
 const state = computed(() => props.state);

package/dist/src/components/Menu/OrigamMenu.vue

@@ -29,7 +29,11 @@
 					:style="[colorStyles, roundedStyles, borderStyles, elevationStyles, paddingStyles, marginStyles]"
 			>
 				<slot name="default">
-					<origam-list class="origam-menu__list">
+					<origam-list
+							:density="density"
+							:size="size"
+							class="origam-menu__list"
+					>
 						<origam-list-subheader
 								v-if="title"
 								class="origam-menu__title"
@@ -155,6 +159,7 @@ const _props = defineProps({
   borderBottomColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   density: { type: null, required: false },
+  size: { type: null, required: false },
   rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
   roundedTopRight: { type: [Boolean, Number, String], required: false },
   roundedTopLeft: { type: [Boolean, Number, String], required: false },

package/dist/src/components/Pagination/OrigamPagination.vue

@@ -190,13 +190,13 @@ const props = defineProps({
   prevIcon: { type: null, required: false, default: MDI_ICONS.CHEVRON_LEFT },
   nextIcon: { type: null, required: false, default: MDI_ICONS.CHEVRON_RIGHT },
   lastIcon: { type: null, required: false, default: MDI_ICONS.CHEVRON_DOUBLE_RIGHT },
-  ariaLabel: { type: String, required: false, default: "origam.pagination.ariaLabel.root" },
-  pageAriaLabel: { type: String, required: false, default: "origam.pagination.ariaLabel.page" },
-  currentPageAriaLabel: { type: String, required: false, default: "origam.pagination.ariaLabel.currentPage" },
-  firstAriaLabel: { type: String, required: false, default: "origam.pagination.ariaLabel.first" },
-  previousAriaLabel: { type: String, required: false, default: "origam.pagination.ariaLabel.previous" },
-  nextAriaLabel: { type: String, required: false, default: "origam.pagination.ariaLabel.next" },
-  lastAriaLabel: { type: String, required: false, default: "origam.pagination.ariaLabel.last" },
+  ariaLabel: { type: String, required: false, default: "origam.pagination.aria_label.root" },
+  pageAriaLabel: { type: String, required: false, default: "origam.pagination.aria_label.page" },
+  currentPageAriaLabel: { type: String, required: false, default: "origam.pagination.aria_label.current_page" },
+  firstAriaLabel: { type: String, required: false, default: "origam.pagination.aria_label.first" },
+  previousAriaLabel: { type: String, required: false, default: "origam.pagination.aria_label.previous" },
+  nextAriaLabel: { type: String, required: false, default: "origam.pagination.aria_label.next" },
+  lastAriaLabel: { type: String, required: false, default: "origam.pagination.aria_label.last" },
   ellipsis: { type: String, required: false, default: "..." },
   showFirstLastPage: { type: Boolean, required: false },
   compact: { type: Boolean, required: false, default: false },
@@ -208,7 +208,7 @@ const props = defineProps({
   infoText: { type: String, required: false, default: "origam.pagination.info" },
   previousText: { type: String, required: false },
   nextText: { type: String, required: false },
-  pageNumberAriaLabel: { type: String, required: false, default: "origam.pagination.ariaLabel.pageNumber" },
+  pageNumberAriaLabel: { type: String, required: false, default: "origam.pagination.aria_label.page_number" },
   hoverColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   hoverBgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   activeColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },

package/dist/src/components/RatingField/OrigamRatingFieldItem.vue

@@ -45,7 +45,7 @@ const props = defineProps({
   index: { type: Number, required: false, default: -1 },
   value: { type: Number, required: true },
   label: { type: String, required: false },
-  itemAriaLabel: { type: String, required: false, default: "origam.rating.ariaLabel.item" },
+  itemAriaLabel: { type: String, required: false, default: "origam.rating.aria_label.item" },
   showStar: { type: Boolean, required: false, default: true },
   isFilled: { type: Boolean, required: false },
   isHovered: { type: Boolean, required: false },

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

@@ -85,8 +85,10 @@
 							v-if="hasList"
 							:id="listboxId"
 							ref="origamListRef"
+							:density="density"
 							:select-strategy="multiple ? SELECT_STRATEGY.INDEPENDENT : SELECT_STRATEGY.SINGLE_INDEPENDENT"
 							:selected="selectedValues"
+							:size="listSize"
 							:tabindex="-1"
 							aria-live="polite"
 							v-bind="{ ...listProps }"
@@ -308,6 +310,7 @@ import {
   KEYBOARD_VALUES,
   MDI_ICONS,
   SELECT_STRATEGY,
+  SIZES,
   TEXT_FIELD_TYPE
 } from "../../enums";
 import { deepEqual, forwardRefs, getUid, matchesSelector, noop, wrapInArray } from "../../utils";
@@ -322,7 +325,7 @@ const _props = defineProps({
   menuProps: { type: Object, required: false },
   chipProps: { type: Object, required: false },
   multiple: { type: Boolean, required: false },
-  noDataText: { type: String, required: false, default: "origam.noDataText" },
+  noDataText: { type: String, required: false, default: "origam.no_data_text" },
   openOnClear: { type: Boolean, required: false },
   autocomplete: { type: Boolean, required: false },
   autoSelectFirst: { type: [Boolean, String], required: false },
@@ -867,6 +870,9 @@ const hasList = computed(() => {
 const textFieldProps = computed(() => {
   return origamTextFieldRef.value?.filterProps(props, ["class", "id", "style", "counterValue", "dirty", "modelValue", "placeholder", "validationValue", "focused"]);
 });
+const listSize = computed(() => {
+  return props.size ?? SIZES.DEFAULT;
+});
 const isDirty = computed(() => {
   return model.value.length > 0;
 });
@@ -1099,7 +1105,6 @@ defineExpose(forwardRefs({
 	}
 
 	.origam-select__content .origam-list-item {
-		--origam-list-item---min-height: 32px;
 		--origam-list-item---padding-inline-start: 32px;
 	}
 </style>

package/dist/src/components/SelectionControl/OrigamSelectionControl.vue

@@ -50,8 +50,11 @@
       </div>
     </div>
 
-    <div class="origam-selection-control__label">
-      <slot name="label">
+    <div
+      v-if="label || $slots.label"
+      class="origam-selection-control__label"
+    >
+      <slot name="label" v-bind="{text: label, color, props: { id, onClick: handleClickLabel, ...labelProps}}">
         <origam-label
           ref="origamLabelRef"
           :for="id"
@@ -192,7 +195,7 @@ group?.onForceUpdate(() => {
 });
 const origamLabelRef = ref();
 const labelProps = computed(() => {
-  return origamLabelRef.value?.filterProps(props, ["text", "color", "bgColor", "class", "style", "id", "for"]);
+  return origamLabelRef.value?.filterProps(props, ["text", "color", "bgColor", "border", "elevation", "class", "style", "id", "for"]);
 });
 const handleFocus = (e) => {
   if (!isInteractive.value) return;