origam 2.8.1 → 2.9.0

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

@@ -28,14 +28,17 @@
 <script lang="ts" setup>
 import { OrigamBtn, OrigamDefaultsProvider } from "../../components";
 import {
+  useDefaults,
   useDensity,
   useProps,
+  useSize,
   useStateEffect,
-  useStyle
+  useStyle,
+  useVariant
 } from "../../composables";
 import { DENSITY } from "../../enums";
 import { computed, StyleValue, useSlots } from "vue";
-const props = defineProps({
+const _props = defineProps({
   divided: { type: Boolean, required: false },
   items: { type: Array, required: false, default: () => [] },
   tag: { type: String, required: false, default: "div" },
@@ -80,14 +83,19 @@ const props = defineProps({
   paddingInline: { type: [Boolean, Number, String], required: false },
   hover: { type: [Boolean, Object], required: false },
   active: { type: [Boolean, Object], required: false },
-  activeClass: { type: String, required: false }
+  activeClass: { type: String, required: false },
+  variant: { type: null, required: false },
+  size: { type: null, required: false }
 });
+const props = useDefaults(_props);
 const { filterProps } = useProps(props);
 const slotDefaults = computed(() => ({
   "origam-btn": {
+    variant: props.variant,
     density: props.density,
     color: props.color,
     bgColor: props.bgColor,
+    size: props.size,
     // New API: `hover` / `active` accept boolean | IHoverState |
     // IActiveState; pass-through propagates the parent's intent
     // override to each child OrigamBtn.
@@ -101,6 +109,8 @@ const hasItems = computed(() => {
   return slots.default || !!items.value;
 });
 const { densityClasses } = useDensity(props);
+const { sizeClasses } = useSize(props);
+const { variantClasses } = useVariant(props);
 const {
   colorStyles,
   borderClasses,
@@ -137,6 +147,8 @@ const btnGroupClasses = computed(() => {
     roundedClasses.value,
     marginClasses.value,
     paddingClasses.value,
+    variantClasses.value,
+    sizeClasses.value,
     props.class
   ];
 });
@@ -155,13 +167,31 @@ defineExpose({
 	.origam-btn-group {
 		display: inline-flex;
 		flex-wrap: nowrap;
-		align-items: center;
+		align-items: stretch;
+		// `overflow: hidden` does the whole job of shaping the children:
+		// per CSS, the clip follows the PADDING-BOX curvature — the outer
+		// radius minus the border width — so square-cornered children are
+		// clipped flush against the inside of the border ring, on any
+		// border thickness, with the browser computing the inner radius.
 		overflow: hidden;
 		vertical-align: middle;
 
 		max-width: 100%;
 		min-width: 0;
-		min-height: calc(var(--origam-btn-group---height, 36px) + var(--origam-btn-group---density, 0));
+		// `--origam-btn-group---height` (own custom property, set by the
+		// `&--size-*` rules below) — NOT `--origam-btn---height` directly:
+		// that token is scoped LOCALLY to each Btn instance by its own
+		// size modifier class, it does not cascade from a sibling Split
+		// button down to the group. `box-sizing: border-box` makes this a
+		// TOTAL height (border included) — matching how Btn's own `height`
+		// already works — so the group's border-box height equals a themed
+		// btn's border-box height by construction, never taller by the
+		// border's own width. Children are `height: auto` + `align-items:
+		// stretch` (see :deep below): they fill the content box inside the
+		// border, exactly like a btn's own content sits inside its own
+		// border.
+		box-sizing: border-box;
+		height: calc(var(--origam-btn-group---height, 36px) + var(--origam-btn-group---density, 0px));
 
 		border-width: var(--origam-btn-group---border-width);
 		border-style: var(--origam-btn-group---border-style);
@@ -215,36 +245,177 @@ defineExpose({
 			--origam-btn-group---density: -8px;
 		}
 
-		:deep(.origam-btn) {
-			border-color: inherit;
+		// Same height values as `OrigamBtn`'s own `&--size-*` rules, one for
+		// one — a themed `<origam-btn-toggle size="small">` must resolve to
+		// the exact height a standalone `size="small"` Btn does.
+		&--size-x-small {
+			--origam-btn-group---height: 20px;
+		}
 
-			&:not(:last-child) {
-				border-inline-end: none;
-			}
+		&--size-small {
+			--origam-btn-group---height: 28px;
+		}
+
+		&--size-default {
+			--origam-btn-group---height: 36px;
+		}
+
+		&--size-large {
+			--origam-btn-group---height: 44px;
+		}
+
+		&--size-x-large {
+			--origam-btn-group---height: 52px;
+		}
+
+		// Full parity with `OrigamBtn`'s own variant rules — same CSS
+		// custom properties, same literal values, one-for-one. A themed
+		// `origam-btn: { variant: 'outlined' }` (cartoon/geek/editorial)
+		// must produce the SAME border-width/border-color/background/
+		// box-shadow on the group as it does on a standalone Btn; the
+		// group is not allowed to fall back to a subset. Earlier passes
+		// only ported the `background-color` half of each rule (border/
+		// shadow were silently dropped), which is exactly what made the
+		// toggle read as "thin border, no shadow" next to a themed Btn's
+		// thick border + hard shadow under cartoon.
+		&--variant-flat {
+			box-shadow: none;
+		}
 
-			&:not(:first-child) {
-				border-inline-start: none;
+		&--variant-text,
+		&--variant-plain {
+			background-color: transparent !important;
+			box-shadow: none;
+		}
+
+		&--variant-elevated {
+			box-shadow: var(--origam-btn---box-shadow-elevated, var(--origam-shadow---md));
+		}
+
+		&--variant-tonal {
+			background-color: var(
+				--origam-btn---background-color-tonal,
+				var(--origam-color__surface---overlay)
+			) !important;
+			box-shadow: none;
+		}
+
+		&--variant-outlined {
+			background-color: transparent !important;
+			// Mirror the literal border-width into the SAME custom property
+			// `--origam-btn-group---inner-border-radius` calc()s against
+			// (see the base rule above) — that calc reads the CUSTOM
+			// PROPERTY, which this rule would otherwise never touch (it
+			// only ever set the literal `border-width` property directly),
+			// leaving the calc's border-width input silently at its
+			// pre-variant fallback of 0 regardless of the REAL rendered
+			// border. `calc(20px - 0px)` still LOOKS plausible, so this
+			// class of bug doesn't throw or visibly break — it just quietly
+			// gives the child's fill the wrong inset curve.
+			--origam-btn-group---border-width: var(--origam-btn---border-width-outlined, var(--origam-border__width---thin));
+			border-width: var(--origam-btn-group---border-width);
+			border-style: solid;
+			border-color: var(--origam-btn---border-color, currentColor);
+			box-shadow: none;
+		}
+
+		&--variant-ghost {
+			background-color: var(
+				--origam-btn---background-color-ghost,
+				color-mix(in srgb, currentColor 12%, transparent)
+			) !important;
+			// See the matching comment in `&--variant-outlined` above.
+			--origam-btn-group---border-width: var(--origam-btn---border-width-ghost, var(--origam-border__width---thin));
+			border-width: var(--origam-btn-group---border-width);
+			border-style: solid;
+			border-color: var(
+				--origam-btn---border-color-ghost,
+				color-mix(in srgb, currentColor 24%, transparent)
+			);
+			box-shadow: var(
+				--origam-btn---box-shadow-ghost,
+				0 0 0 1px color-mix(in srgb, currentColor 18%, transparent),
+				0 4px 18px 0 color-mix(in srgb, currentColor 28%, transparent),
+				0 1px 0 0 color-mix(in srgb, white 35%, transparent) inset
+			);
+
+			@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
+				backdrop-filter: var(--origam-btn---backdrop-filter-ghost, blur(8px));
+				-webkit-backdrop-filter: var(--origam-btn---backdrop-filter-ghost, blur(8px));
 			}
 		}
 
-		// The GROUP owns the rounding (outer corners, via its own
-		// border-radius + overflow:hidden) and the elevation (a single
-		// shadow around the whole group). Child buttons are forced flat
-		// and shadowless so a per-child `rounded` / `elevation` (own prop
-		// or active/hover state) can't break the unified segmented look —
-		// e.g. rounded pills with the group surface bleeding through the
-		// gaps. `!important` is intentional: the group's design wins.
+		// A btnGroup/btnToggle reads as ONE button with internal
+		// separators — not N bordered buttons glued together. The GROUP
+		// owns the ONE visible border, the ONE outer radius and the ONE
+		// elevation; every child button is rendered "naked" (zero border
+		// of its own, zero radius, zero shadow) regardless of what the
+		// theme's OWN `origam-btn` config would normally paint on a
+		// standalone button — a themed `origam-btn: { border: true }`
+		// would otherwise stack a second border directly on top of the
+		// group's, reading as a visibly doubled/thicker line. `!important`
+		// is intentional: the group's design wins over the child's own
+		// resolved theme props.
+		//
+		// `overflow: hidden` alone clips the group to its own rounded
+		// shape but does NOT round the first/last child's own corners —
+		// a fully square button sitting inside a rounded clip leaves a
+		// visible gap at each of the 4 corners (the group's background
+		// showing through a "square peg in a round hole"). The first and
+		// last child must adopt the group's INNER radius — the outer
+		// radius minus the border's own width, i.e. the curve of the
+		// surface the border ring encloses, not the outer edge of the
+		// border itself. Using the outer radius here (as a previous pass
+		// did) is off by exactly `border-width`: on a thick border
+		// (cartoon's 3px) the active segment's fill corner curved too
+		// early, leaving a sliver of the group's own background visible
+		// between the fill and the inside of the border ring.
 		:deep(.origam-btn) {
+			border-width: 0 !important;
+			border-style: none !important;
 			border-radius: 0 !important;
 			box-shadow: none !important;
+			// `auto` releases the child's own explicit height so
+			// `align-items: stretch` fills the group's content box —
+			// the child occupies the inside of the border ring exactly
+			// like a standalone btn's content sits inside its own border.
+			height: auto !important;
+			min-height: 0 !important;
+
+			// Resting (non-selected) segments stay fully naked — no
+			// background of their own — so the group's ONE surface
+			// (painted above via `variantClasses`) shows through evenly
+			// across the whole strip instead of each child individually
+			// re-painting its own themed variant background (that
+			// per-child repaint, at varying opacity/tint per button, is
+			// what produced the inconsistent/blank-looking group surface
+			// bug). The SELECTED segment inside an `OrigamBtnToggle`
+			// keeps its own active-state background — that fill is the
+			// documented, intentional "reads as a real filled button"
+			// affordance for the current selection (see `OrigamBtn`'s
+			// `&--variant-outlined &--active` / `&--variant-tonal
+			// &--active` rules) and is NOT the bug being fixed here.
+			&:not(.origam-btn--active) {
+				background-color: transparent !important;
+			}
+
+			// NO per-corner radius overrides: children stay square
+			// (`border-radius: 0` above) and the group's `overflow: hidden`
+			// clips them to its own inner curvature — the browser derives
+			// the inner radius (outer − border-width) natively.
 		}
 
+		// `divided` adds back a THIN, intentional separator between
+		// segments — NOT the child's own border reinstated (still zeroed
+		// on every other side by the block above). Colour matches the
+		// group's own resolved border color so it reads as part of the
+		// same single surface, not a second competing border.
 		&--divided {
 			:deep(.origam-btn) {
 				&:not(:last-child) {
-					border-inline-end-width: thin;
-					border-inline-end-style: solid;
-					border-inline-end-color: rgba(var(--v-border-color), var(--v-border-opacity));
+					border-inline-end-width: thin !important;
+					border-inline-end-style: solid !important;
+					border-inline-end-color: var(--origam-btn-group---border-color, currentColor) !important;
 				}
 			}
 		}
@@ -259,6 +430,17 @@ defineExpose({
 		--origam-btn-group---border-width: var(--origam-btn---border-width, 0);
 		--origam-btn-group---border-style: var(--origam-btn---border-style, solid);
 		--origam-btn-group---border-color: var(--origam-btn---border-color, currentColor);
+		/* Base surface fallback for the `flat`/`elevated`/unset variants
+		 * (the ones that DON'T override background via their own
+		 * `--variant-*` rule above) — mirrors `OrigamBtn`'s own base
+		 * `background-color: var(--origam-btn---background-color, …)`
+		 * rule so the group's resting surface always matches the
+		 * theme's btn, never a hardcoded/transparent default. */
+		--origam-btn-group---background-color: var(--origam-btn---background-color, transparent);
+		/* Same fallback chain as background-color/border-* above — without
+		 * it the group's text/currentColor (used by outlined/ghost border
+		 * fallbacks) drifted from Btn's own default instead of matching. */
+		--origam-btn-group---color: var(--origam-btn---color, rgba(30, 30, 30, 0.87));
 
 	}
 </style>

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

@@ -30,6 +30,7 @@
 <script lang="ts" setup>
 import { OrigamBtnGroup } from "../../components";
 import {
+  useDefaults,
   useGroup,
   useProps,
   useStyle
@@ -37,7 +38,7 @@ import {
 import { ORIGAM_BTN_TOGGLE_KEY } from "../../consts";
 import { DENSITY } from "../../enums";
 import { computed, ref, StyleValue, useSlots } from "vue";
-const props = defineProps({
+const _props = defineProps({
   divided: { type: Boolean, required: false },
   items: { type: Array, required: false, default: () => [] },
   tag: { type: String, required: false, default: "div" },
@@ -83,6 +84,8 @@ const props = defineProps({
   hover: { type: [Boolean, Object], required: false },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
+  variant: { type: null, required: false },
+  size: { type: null, required: false },
   disabled: { type: Boolean, required: false },
   modelValue: { type: null, required: false },
   multiple: { type: Boolean, required: false },
@@ -90,6 +93,7 @@ const props = defineProps({
   max: { type: Number, required: false },
   selectedClass: { type: String, required: false }
 });
+const props = useDefaults(_props);
 defineEmits(["update:modelValue"]);
 const { filterProps } = useProps(props);
 const { isSelected, next, prev, select, selected } = useGroup(props, ORIGAM_BTN_TOGGLE_KEY);

package/dist/src/components/Card/OrigamCard.vue

@@ -146,6 +146,7 @@ import { OrigamCardHeader, OrigamCardText, OrigamImg, OrigamProgress, OrigamSkel
 import {
   useActive,
   useAdjacent,
+  useDefaults,
   useDensity,
   useDimension,
   useHover,
@@ -160,7 +161,7 @@ import {
 import { vContrast, vRipple } from "../../directives";
 import { DENSITY, PROGRESS_TYPE } from "../../enums";
 import { computed, StyleValue, toRef, useAttrs, useSlots } from "vue";
-const props = defineProps({
+const _props = defineProps({
   disabled: { type: Boolean, required: false },
   flat: { type: Boolean, required: false },
   hover: { type: Boolean, required: false },
@@ -236,12 +237,14 @@ const props = defineProps({
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false }
 });
+const props = useDefaults(_props);
 defineEmits(["click:append", "click:prepend", "update:active", "update:hover"]);
 const { filterProps } = useProps(props);
 const attrs = useAttrs();
 const link = useLink(props, attrs);
 const { isHover, hoverState, hoverClasses, onMouseenter, onMouseleave } = useHover(props);
 const { isActive, activeState, activeClasses, onActive } = useActive(props);
+const flatForElevation = computed(() => props.elevation != null ? false : props.flat);
 const {
   colorClasses,
   colorStyles,
@@ -262,7 +265,7 @@ const {
   hoverState,
   activeState,
   computed(() => !!props.disabled),
-  toRef(props, "flat")
+  flatForElevation
 );
 const {
   onClickPrepend: handleClickPrepend,

package/dist/src/components/Checkbox/OrigamCheckbox.vue

@@ -58,6 +58,7 @@
 <script lang="ts" setup>
 import { OrigamCheckboxBtn, OrigamInput } from "../../components";
 import {
+  useDefaults,
   useFocus,
   useMargin,
   usePadding,
@@ -68,7 +69,7 @@ import {
 import { DENSITY } from "../../enums";
 import { filterInputAttrs, getUid } from "../../utils";
 import { computed, ref, StyleValue, useAttrs, useSlots } from "vue";
-const props = defineProps({
+const _props = defineProps({
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
@@ -162,6 +163,7 @@ const props = defineProps({
   activeClass: { type: String, required: false },
   hover: { type: [Boolean, Object], required: false }
 });
+const props = useDefaults(_props);
 const emits = defineEmits(["update:modelValue", "update:focused", "click:label"]);
 defineSlots();
 const { filterProps } = useProps(props);

package/dist/src/components/Chip/OrigamChip.vue

@@ -365,6 +365,8 @@ defineExpose({
 
 		background-color: var(--origam-chip---background-color);
 		color: var(--origam-chip---color);
+		backdrop-filter: var(--origam-chip---backdrop-filter, none);
+		-webkit-backdrop-filter: var(--origam-chip---backdrop-filter, none);
 
 		&__content {
 			align-items: center;

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

@@ -1,6 +1,6 @@
 <template>
 	<component
-			:is="tag"
+			:is="props.tag"
 			v-contrast
 			:class="codeClasses"
 			:style="codeStyles"
@@ -82,6 +82,7 @@ import {
   useDimension,
   useElevation,
   useLocale,
+  useDefaults,
   useMargin,
   usePadding,
   useRounded,
@@ -91,7 +92,7 @@ import { vContrast } from "../../directives";
 import { CODE_DEFAULTS } from "../../consts";
 import { CODE_LANG } from "../../enums";
 import { parseHighlightLines } from "../../utils";
-const props = defineProps({
+const _props = defineProps({
   code: { type: String, required: false, default: void 0 },
   lang: { type: null, required: false, default: CODE_LANG.PLAINTEXT },
   lineNumbers: { type: Boolean, required: false, default: false },
@@ -153,6 +154,7 @@ const props = defineProps({
   lineHeight: { type: String, required: false },
   letterSpacing: { type: String, required: false }
 });
+const props = useDefaults(_props);
 const emit = defineEmits(["copy"]);
 const slots = useSlots();
 const { borderClasses, borderStyles } = useBorder(props);

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

@@ -128,12 +128,12 @@
 
 <script lang="ts" setup>
 import { OrigamColorPicker, OrigamMenu, OrigamSheet, OrigamTextField, OrigamTranslateScale } from "../../components";
-import { useLocale, useProps, useVModel, useStyle } from "../../composables";
+import { useDefaults, useLocale, useProps, useVModel, useStyle } from "../../composables";
 import { COLOR_NULL, ORIGAM_FORM_KEY } from "../../consts";
 import { BLOCK, DENSITY, DIRECTION, TEXT_FIELD_TYPE } from "../../enums";
 import { forwardRefs, HSVtoCSS, matchesSelector } from "../../utils";
 import { computed, inject, nextTick, ref, shallowRef, StyleValue, useSlots, watch } from "vue";
-const props = defineProps({
+const _props = defineProps({
   menu: { type: Boolean, required: false },
   menuProps: { type: Object, required: false },
   openOnClear: { type: Boolean, required: false },
@@ -251,6 +251,7 @@ const props = defineProps({
   prependIcon: { type: null, required: false },
   transition: { type: [Boolean, String, Object], required: false, default: () => ({ component: OrigamTranslateScale }) }
 });
+const props = useDefaults(_props);
 const { filterProps } = useProps(props);
 const { t } = useLocale();
 const origamTextFieldRef = ref();
@@ -418,5 +419,21 @@ defineExpose(forwardRefs({
 			font-size: 0.875em;
 			letter-spacing: 0.03em;
 		}
+
+		// `.origam-field__input` is `display: flex; flex-wrap: wrap` by
+		// default (`OrigamField`'s base rule, meant for multi-chip inputs).
+		// This field renders BOTH the hex `colorSelection` span AND the
+		// underlying native `<input>` in that same row — in a narrow
+		// container (e.g. a dense side panel) the two don't fit on one
+		// line and wrap onto two, DOUBLING the field's height versus a
+		// plain text-field of the same density (confirmed: 55px vs 26px
+		// at compact density, identical width). The native input's own
+		// text is not meant to be visible here (the formatted
+		// `colorSelection` span is the real display value) — forcing
+		// `nowrap` lets the invisible native input shrink instead of
+		// pushing a wrap, with zero visual loss.
+		:deep(.origam-field__input) {
+			flex-wrap: nowrap;
+		}
 	}
 </style>

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

@@ -180,12 +180,12 @@ import {
   OrigamTextField,
   OrigamTranslateScale
 } from "../../components";
-import { useDate, useLocale, useProps, useTextColor, useVModel, useStyle } from "../../composables";
+import { useDate, useDefaults, useLocale, useProps, useTextColor, useVModel, useStyle } from "../../composables";
 import { ORIGAM_FORM_KEY } from "../../consts";
 import { BLOCK, DENSITY, DIRECTION, KEYBOARD_VALUES, MDI_ICONS, TEXT_FIELD_TYPE } from "../../enums";
 import { forwardRefs, isEmpty, matchesSelector, wrapInArray } from "../../utils";
 import { computed, inject, nextTick, ref, shallowRef, StyleValue, toRef, useSlots, watch } from "vue";
-const props = defineProps({
+const _props = defineProps({
   menu: { type: Boolean, required: false },
   menuProps: { type: Object, required: false },
   range: { type: Boolean, required: false, default: false },
@@ -307,6 +307,7 @@ const props = defineProps({
   prependIcon: { type: null, required: false },
   transition: { type: [Boolean, String, Object], required: false, default: () => ({ component: OrigamTranslateScale }) }
 });
+const props = useDefaults(_props);
 const { filterProps } = useProps(props);
 const { t } = useLocale();
 const origamTextFieldRef = ref();

package/dist/src/components/Dialog/OrigamDialog.vue

@@ -184,7 +184,7 @@ const props = defineProps({
   contained: { type: Boolean, required: false },
   eager: { type: Boolean, required: false },
   transition: { type: [Boolean, String, Object], required: false, default: () => ({ component: OrigamTranslateScale }) },
-  scrim: { type: [Boolean, String], required: false },
+  scrim: { type: [Boolean, String], required: false, default: true },
   flat: { type: Boolean, required: false },
   hover: { type: Boolean, required: false },
   image: { type: String, required: false },

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

@@ -520,6 +520,8 @@ defineExpose({
 		grid-area: control;
 		position: relative;
 		padding-inline: var(--origam-field---padding-start) var(--origam-field---padding-end);
+		backdrop-filter: var(--origam-field---backdrop-filter, none);
+		-webkit-backdrop-filter: var(--origam-field---backdrop-filter, none);
 
 		&__skeleton {
 			width: 100%;
@@ -788,6 +790,11 @@ defineExpose({
 			#{$this}__label {
 				opacity: 1;
 			}
+
+			&:not(#{$this}--disabled) {
+				outline: var(--origam-field---focus-ring-width, 0px) solid var(--origam-field---focus-ring-color, transparent);
+				outline-offset: var(--origam-field---focus-ring-offset, 0px);
+			}
 		}
 
 		&--disabled,

package/dist/src/components/Layout/OrigamLayout.vue

@@ -151,8 +151,17 @@ defineExpose({
 		}
 
 		&--full-height &__wrapper {
+			// `min-height` (not `height`) — full-height means "occupy AT
+			// LEAST the viewport", not "clip to exactly the viewport".
+			// A fixed `height: 100vh` kept the wrapper's own box capped
+			// at one screen even when its content (app-bar + main slot)
+			// grows taller — the overflow still rendered (no
+			// `overflow: hidden` here) but the wrapper's box, and
+			// anything painting a background on an ancestor sized off
+			// it, never grew to match, leaving a visible gap below the
+			// first viewport on any page taller than one screen.
 			width: 100vw;
-			height: 100vh;
+			min-height: 100vh;
 		}
 	}
 </style>

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

@@ -81,6 +81,7 @@ import {
 } from "../../components";
 import {
   useBothColor,
+  useDefaults,
   useProps,
   useScopeId,
   useStateEffect,
@@ -90,7 +91,7 @@ import {
 import { ORIGAM_MENU_KEY } from "../../consts";
 import { INLINE, KEYBOARD_VALUES, LOCATION_STRATEGIES, MDI_ICONS, SCROLL_STRATEGIES } from "../../enums";
 import { focusableChildren, focusChild, forwardRefs, getNextElement, getUid } from "../../utils";
-const props = defineProps({
+const _props = defineProps({
   id: { type: String, required: false },
   absolute: { type: Boolean, required: false },
   attach: { type: [Boolean, String], required: false, skipCheck: true },
@@ -208,6 +209,7 @@ const props = defineProps({
   lineHeight: { type: String, required: false },
   letterSpacing: { type: String, required: false }
 });
+const props = useDefaults(_props);
 defineEmits(["contextmenu", "update:modelValue"]);
 const { filterProps } = useProps(props);
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));

package/dist/src/components/NumberField/OrigamNumberField.vue

@@ -269,10 +269,10 @@
 <script lang="ts" setup>
 import { computed, nextTick, onMounted, ref, shallowRef, StyleValue, useSlots, watch } from "vue";
 import { OrigamBtn, OrigamDivider, OrigamInput, OrigamTextField } from "../../components";
-import { useAdjacentInner, useFocus, useHold, useProps, useVModel, useStyle } from "../../composables";
+import { useAdjacentInner, useDefaults, useFocus, useHold, useProps, useVModel, useStyle } from "../../composables";
 import { DIRECTION, MDI_ICONS, TEXT_FIELD_TYPE } from "../../enums";
 import { clamp, forwardRefs } from "../../utils";
-const props = defineProps({
+const _props = defineProps({
   autofocus: { type: Boolean, required: false },
   placeholder: { type: String, required: false },
   persistentPlaceholder: { type: Boolean, required: false },
@@ -391,6 +391,7 @@ const props = defineProps({
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false }
 });
+const props = useDefaults(_props);
 const emits = defineEmits(["click:control", "mousedown:control", "click:clear", "increment", "decrement", "update:focused", "update:modelValue", "click:appendInner", "click:prependInner", "update:active", "click:append", "click:prepend"]);
 defineSlots();
 const { filterProps } = useProps(props);

package/dist/src/components/Overlay/OrigamOverlayScrim.vue

@@ -72,6 +72,8 @@ defineExpose({
 <style lang="scss" scoped>
 	.origam-scrim {
 		background-color: var(--origam-overlay-scrim---background-color, var(--origam-color__overlay---scrim)); // TODO: rename to color.overlay.backdrop once #arbitration2 resolved
+		backdrop-filter: var(--origam-overlay-scrim---backdrop-filter, none);
+		-webkit-backdrop-filter: var(--origam-overlay-scrim---backdrop-filter, none);
 		pointer-events: var(--origam-overlay-scrim---pointer-events, auto);
 		border-radius: inherit;
 		inset: 0;

package/dist/src/components/Radio/OrigamRadio.vue

@@ -103,6 +103,7 @@
 import { computed, ref, StyleValue, useAttrs, useSlots } from "vue";
 import { OrigamInput, OrigamRadioBtn } from "../../components";
 import {
+  useDefaults,
   useFocus,
   useHover,
   useMargin,
@@ -114,7 +115,7 @@ import {
 } from "../../composables";
 import { DENSITY } from "../../enums";
 import { filterInputAttrs, getUid } from "../../utils";
-const props = defineProps({
+const _props = defineProps({
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
@@ -206,6 +207,7 @@ const props = defineProps({
   activeClass: { type: String, required: false },
   hover: { type: [Boolean, Object], required: false }
 });
+const props = useDefaults(_props);
 const emits = defineEmits(["update:modelValue", "update:focused", "click:label"]);
 const { isHover, hoverState } = useHover(props);
 useStateEffect(props, isHover, void 0, hoverState, void 0);