origam 0.3.9 → 2.2.1

package/dist/src/components/Badge/OrigamBadge.vue

@@ -15,19 +15,42 @@
 		        v-show="modelValue"
 		        :id="id"
 		        :aria-label="t(label, content)"
+		        :class="badgeContentClasses"
 		        aria-atomic="true"
 		        aria-live="polite"
-		        class="origam-badge__badge"
 		        role="status"
 		        v-bind="badgeAttrs"
         >
           <template v-if="!dot">
             <slot name="badge">
+              <template v-if="hasPrependIcon">
+                <slot name="prepend">
+                  <origam-icon
+                          key="prepend-icon"
+                          class="origam-badge__prepend"
+                          :icon="prependIcon"
+                  />
+                </slot>
+              </template>
+
               <template v-if="hasIcon">
-                <origam-icon :icon="icon"/>
+                <origam-icon
+                        key="content-icon"
+                        :icon="icon"
+                />
+              </template>
+              <template v-else-if="content !== undefined && content !== null && content !== ''">
+                <span class="origam-badge__content">{{ content }}</span>
               </template>
-              <template v-else>
-                {{ content }}
+
+              <template v-if="hasAppendIcon">
+                <slot name="append">
+                  <origam-icon
+                          key="append-icon"
+                          class="origam-badge__append"
+                          :icon="appendIcon"
+                  />
+                </slot>
               </template>
             </slot>
           </template>
@@ -38,22 +61,19 @@
 </template>
 
 <script setup>
-import { OrigamIcon, OrigamScaleRotate, OrigamTransition } from "../../components";
+import { OrigamFade, OrigamIcon, OrigamTransition } from "../../components";
 import {
   useActive,
-  useBorder,
-  useColorEffect,
-  useElevation,
   useHover,
   useLocale,
   useLocation,
   useProps,
-  useRounded,
+  useStateEffect,
   useStatus,
   useStyle
 } from "../../composables";
 import { omit, pick } from "../../utils";
-import { computed, ComputedRef, ref, StyleValue, useAttrs } from "vue";
+import { computed, ComputedRef, StyleValue, useAttrs } from "vue";
 const props = defineProps({
   content: { type: [Number, String], required: false },
   dot: { type: Boolean, required: false },
@@ -79,34 +99,27 @@ const props = defineProps({
   borderStyle: { type: String, required: false },
   color: { type: [String, Boolean, null], required: false, skipCheck: true },
   bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
   location: { type: null, required: false, default: "top right" },
-  rounded: { type: [Boolean, String, Number, 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 },
-  transition: { type: [Boolean, String, Object], required: false, default: () => ({ component: OrigamScaleRotate }) },
+  transition: { type: [Boolean, String, Object], required: false, default: () => ({ component: OrigamFade }) },
   disabled: { type: Boolean, required: false },
   status: { type: null, required: false },
   statusIconPosition: { type: null, required: false },
   icon: { type: null, required: false },
-  hover: { type: Boolean, required: false },
+  hover: { type: [Boolean, Object], required: false },
   elevation: { type: [Number, String], required: false }
 });
 const { filterProps } = useProps(props);
 const { t } = useLocale();
 const attrs = useAttrs();
-const { hoverClasses, isHover, onMouseleave: handleMouseleave, onMouseenter: handleMouseenter } = useHover(props);
-const { activeClasses, isActive } = useActive(props, "modelValue");
-const { colorStyles, bgColor } = useColorEffect(props, isHover, isActive);
-const { roundedClasses, roundedStyles } = useRounded(props);
-const { borderClasses, borderStyles } = useBorder(props);
-const { elevationClasses, elevationStyles } = useElevation(props, ref(false), bgColor);
-const { icon, statusClasses } = useStatus(props);
+const { hoverClasses, isHover, hoverState, onMouseleave: handleMouseleave, onMouseenter: handleMouseenter } = useHover(props);
+const { activeClasses, isActive, activeState } = useActive(props, "modelValue");
+const { colorClasses, colorStyles, borderClasses, borderStyles, roundedClasses, roundedStyles, elevationClasses, elevationStyles } = useStateEffect(props, isHover, isActive, hoverState, activeState);
+const { icon, prependIcon, appendIcon, statusClasses } = useStatus(props);
 const { locationStyles } = useLocation(props, true, (side) => {
   const base = props.floating ? props.dot ? 2 : 4 : props.dot ? 8 : 12;
   return base + (["top", "bottom"].includes(side) ? +(props.offsetY ?? 0) : ["left", "right"].includes(side) ? +(props.offsetX ?? 0) : 0);
@@ -114,6 +127,12 @@ const { locationStyles } = useLocation(props, true, (side) => {
 const hasIcon = computed(() => {
   return !!icon.value;
 });
+const hasPrependIcon = computed(() => {
+  return !!prependIcon.value;
+});
+const hasAppendIcon = computed(() => {
+  return !!appendIcon.value;
+});
 const content = computed(() => {
   const value = Number(props.content);
   if (!props.max || isNaN(value)) {
@@ -154,11 +173,8 @@ const badgeClasses = computed(() => {
       "origam-badge--floating": props.floating,
       "origam-badge--inline": props.inline
     },
-    elevationClasses.value,
     activeClasses.value,
     hoverClasses.value,
-    roundedClasses.value,
-    borderClasses.value,
     statusClasses.value,
     props.class
   ];
@@ -172,6 +188,15 @@ const badgeContentStyles = computed(() => {
     props.inline ? {} : locationStyles.value
   ];
 });
+const badgeContentClasses = computed(() => {
+  return [
+    "origam-badge__badge",
+    colorClasses.value,
+    roundedClasses.value,
+    borderClasses.value,
+    elevationClasses.value
+  ];
+});
 const { id, css, load, isLoaded, unload } = useStyle(badgeContentStyles);
 defineExpose({
   filterProps,
@@ -194,6 +219,7 @@ defineExpose({
 			align-items: center;
 			justify-content: center;
 			display: inline-flex;
+			gap: var(--origam-badge__badge---gap, 2px);
 
 			position: var(--origam-badge__badge---position);
 			pointer-events: var(--origam-badge__badge---pointer-events);
@@ -211,6 +237,7 @@ defineExpose({
 			white-space: var(--origam-badge__badge---white-space);
 
 			height: var(--origam-badge__badge---height);
+			width: var(--origam-badge__badge---width, auto);
 			min-width: var(--origam-badge__badge---min-width);
 
 			padding-block-start: var(--origam-badge__badge---padding-block-start);
@@ -224,11 +251,11 @@ defineExpose({
 
 			background-color: var(--origam-badge__badge---background-color);
 			color: var(--origam-badge__badge---color);
+			box-shadow: var(--origam-badge__badge---box-shadow);
 
 			:deep(.origam-icon) {
 				color: inherit;
 				font-size: 0.75rem;
-				margin: 0 -2px;
 			}
 
 			:deep(img),
@@ -236,6 +263,56 @@ defineExpose({
 				height: 100%;
 				width: 100%;
 			}
+
+			&#{$this}--border {
+				--origam-badge__badge---border-width: 2px;
+			}
+
+			&#{$this}--elevated {
+				--origam-badge__badge---box-shadow: var(--origam-badge__badge---box-shadow-elevated, var(--origam-shadow---md));
+			}
+
+			&#{$this}--rounded {
+				--origam-badge__badge---border-radius: var(--origam-radius---md, 8px);
+			}
+
+			&#{$this}--rounded-x-small {
+				--origam-badge__badge---border-radius: var(--origam-radius---xs, 2px);
+			}
+
+			&#{$this}--rounded-small {
+				--origam-badge__badge---border-radius: var(--origam-radius---sm, 4px);
+			}
+
+			&#{$this}--rounded-default {
+				--origam-badge__badge---border-radius: var(--origam-radius---md, 8px);
+			}
+
+			&#{$this}--rounded-medium {
+				--origam-badge__badge---border-radius: var(--origam-radius---lg, 12px);
+			}
+
+			&#{$this}--rounded-large {
+				--origam-badge__badge---border-radius: var(--origam-radius---xl, 16px);
+			}
+
+			&#{$this}--rounded-x-large {
+				--origam-badge__badge---border-radius: var(--origam-radius---2xl, 24px);
+			}
+
+			&#{$this}--rounded-shaped {
+				border-start-start-radius: var(--origam-radius---xl, 16px);
+				border-start-end-radius: 0;
+				border-end-start-radius: 0;
+				border-end-end-radius: var(--origam-radius---xl, 16px);
+			}
+
+			&#{$this}--rounded-shaped-invert {
+				border-start-start-radius: 0;
+				border-start-end-radius: var(--origam-radius---xl, 16px);
+				border-end-start-radius: var(--origam-radius---xl, 16px);
+				border-end-end-radius: 0;
+			}
 		}
 
 		&__wrapper {
@@ -255,27 +332,16 @@ defineExpose({
 			margin-inline-end: var(--origam-badge__wrapper---margin-inline-end);
 		}
 
-		&--elevated {
-			#{$this}__badge {
-				--origam-badge__badge---box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
-			}
-		}
-
-		&--border {
-			#{$this}__badge {
-				--origam-badge__badge---border-width: 2px;
-			}
-		}
-
 		&--dot {
 			#{$this}__badge {
 				--origam-badge__badge---border-width: 1.5px;
-				--origam-badge__badge---border-radius: 4.5px;
 				--origam-badge__badge---height: 9px;
 				--origam-badge__badge---width: 9px;
 				--origam-badge__badge---min-width: 0;
-				--origam-badge__badge---padding-block: 0;
-				--origam-badge__badge---padding-inline: 0;
+				--origam-badge__badge---padding-block-start: 0;
+				--origam-badge__badge---padding-block-end: 0;
+				--origam-badge__badge---padding-inline-start: 0;
+				--origam-badge__badge---padding-inline-end: 0;
 				--origam-badge__badge---text-indent: -9999px;
 			}
 		}
@@ -295,74 +361,23 @@ defineExpose({
 		}
 
 		&--warning {
-			--origam-badge__badge---background-color: var(--origam-status--warning---background-color, rgb(251, 140, 0));
-			--origam-badge__badge---color: var(--origam-status--warning---color, #ffffff);
+			--origam-badge__badge---background-color: var(--origam-badge--warning---background-color, var(--origam-color__feedback--warning---bg));
+			--origam-badge__badge---color: var(--origam-badge--warning---color, var(--origam-color__feedback--warning---fg));
 		}
 
 		&--success {
-			--origam-badge__badge---background-color: var(--origam-status--success---background-color, rgb(76, 175, 80));
-			--origam-badge__badge---color: var(--origam-status--success---color, #ffffff);
+			--origam-badge__badge---background-color: var(--origam-badge--success---background-color, var(--origam-color__feedback--success---bg));
+			--origam-badge__badge---color: var(--origam-badge--success---color, var(--origam-color__feedback--success---fg));
 		}
 
 		&--info {
-			--origam-badge__badge---background-color: var(--origam-status--info---background-color, rgb(33, 150, 243));
-			--origam-badge__badge---color: var(--origam-status--info---color, #ffffff);
+			--origam-badge__badge---background-color: var(--origam-badge--info---background-color, var(--origam-color__feedback--info---bg));
+			--origam-badge__badge---color: var(--origam-badge--info---color, var(--origam-color__feedback--info---fg));
 		}
 
 		&--error {
-			--origam-badge__badge---background-color: var(--origam-status--error---background-color, rgb(207, 102, 121));
-			--origam-badge__badge---color: var(--origam-status--error---color, #ffffff);
+			--origam-badge__badge---background-color: var(--origam-badge--danger---background-color, var(--origam-color__feedback--danger---bg));
+			--origam-badge__badge---color: var(--origam-badge--danger---color, var(--origam-color__feedback--danger---fg));
 		}
 	}
 </style>
-
-<style>
-	:root {
-		--origam-badge__wrapper---display: flex;
-		--origam-badge__wrapper---align-items: stretch;
-		--origam-badge__wrapper---justify-content: start;
-		--origam-badge__wrapper---margin-inline-start: 0;
-		--origam-badge__wrapper---margin-inline-end: 0;
-		--origam-badge__wrapper---margin-block-start: 0;
-		--origam-badge__wrapper---margin-block-end: 0;
-		--origam-badge__wrapper---padding-block-start: 0;
-		--origam-badge__wrapper---padding-block-end: 0;
-		--origam-badge__wrapper---padding-inline-start: 0;
-		--origam-badge__wrapper---padding-inline-end: 0;
-
-		--origam-badge__badge---align-items: center;
-		--origam-badge__badge---justify-content: center;
-		--origam-badge__badge---display: inline-flex;
-		--origam-badge__badge---position: absolute;
-		--origam-badge__badge---font-size: 0.75rem;
-		--origam-badge__badge---font-weight: 500;
-		--origam-badge__badge---text-align: center;
-		--origam-badge__badge---text-indent: 0;
-		--origam-badge__badge---white-space: nowrap;
-		--origam-badge__badge---height: 1.25rem;
-		--origam-badge__badge---min-width: 20px;
-		--origam-badge__badge---pointer-events: auto;
-		--origam-badge__badge---transition-duration: 0.225s;
-		--origam-badge__badge---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-		--origam-badge__badge---transition-property: all;
-		--origam-badge__badge---transition: var(--origam-badge__badge---transition-property) var(--origam-badge__badge---transition-duration) var(--origam-badge__badge---transition-timing-function);
-		--origam-badge__badge---margin-inline-start: 0;
-		--origam-badge__badge---margin-inline-end: 0;
-		--origam-badge__badge---margin-block-start: 0;
-		--origam-badge__badge---margin-block-end: 0;
-		--origam-badge__badge---padding-block-start: 4px;
-		--origam-badge__badge---padding-block-end: 4px;
-		--origam-badge__badge---padding-inline-start: 6px;
-		--origam-badge__badge---padding-inline-end: 6px;
-		--origam-badge__badge---color: rgba(30, 30, 30, 0.87);
-		--origam-badge__badge---background-color: rgb(230, 230, 230);
-		--origam-badge__badge---border-top-width: 0;
-		--origam-badge__badge---border-left-width: 0;
-		--origam-badge__badge---border-bottom-width: 0;
-		--origam-badge__badge---border-right-width: 0;
-		--origam-badge__badge---border-width: var(--origam-badge__badge---border-top-width) var(--origam-badge__badge---border-left-width) var(--origam-badge__badge---border-bottom-width) var(--origam-badge__badge---border-right-width);
-		--origam-badge__badge---border-color: currentColor;
-		--origam-badge__badge---border-style: solid;
-		--origam-badge__badge---border-radius: 10px;
-	}
-</style>

package/dist/src/components/BottomNav/OrigamBottomNav.vue

@@ -1,60 +1,60 @@
 <template>
-	<component
-			:is="tag"
-			:id="id"
-			:class="bottomNavClasses"
-			@mouseenter="handleMouseenter"
-			@mouseleave="handleMouseleave"
-	>
-		<div class="origam-bottom-nav__content">
-			<slot name="default">
-				<template
-						v-for="(item, index) in items"
-						:key="index"
-				>
-					<slot
-							:name="`item.${index}`"
-							v-bind="{props: item}"
-					>
-						<slot
-								name="item"
-								v-bind="{props: item, index}"
+	<origam-transition :transition="transition">
+		<component
+				:is="tag"
+				v-if="isActive"
+				:id="id"
+				:class="bottomNavClasses"
+				@mouseenter="handleMouseenter"
+				@mouseleave="handleMouseleave"
+		>
+			<div class="origam-bottom-nav__content">
+				<origam-defaults-provider :defaults="slotDefaults">
+					<slot name="default">
+						<template
+								v-for="(item, index) in items"
+								:key="index"
 						>
-							<origam-btn
-									ref="origamBtnRef"
-									class="origam-bottom-nav__btn"
-									v-bind="item"
-							/>
-						</slot>
+							<slot
+									:name="`item.${index}`"
+									v-bind="{props: item}"
+							>
+								<slot
+										name="item"
+										v-bind="{props: item, index}"
+								>
+									<origam-btn
+											ref="origamBtnRef"
+											class="origam-bottom-nav__btn"
+											v-bind="item"
+									/>
+								</slot>
+							</slot>
+						</template>
 					</slot>
-				</template>
-			</slot>
-		</div>
-	</component>
+				</origam-defaults-provider>
+			</div>
+		</component>
+	</origam-transition>
 </template>
 
 <script setup>
-import { OrigamBtn } from "../../components";
+import { OrigamBtn, OrigamDefaultsProvider, OrigamTransition, OrigamTranslateBottom } from "../../components";
 import {
   useActive,
-  useBorder,
-  useColorEffect,
   useDensity,
-  useElevation,
   useGroup,
   useHover,
   useLayoutItem,
-  useMargin,
-  usePadding,
   useProps,
-  useRounded,
   useSsrBoot,
+  useStateEffect,
   useStyle
 } from "../../composables";
 import { ORIGAM_BTN_TOGGLE_KEY } from "../../consts";
 import { MODE } from "../../enums";
 import { convertToUnit, int } from "../../utils";
-import { computed, ComputedRef, Ref, StyleValue, toRef } from "vue";
+import { computed, ref, Ref, StyleValue, toRef } from "vue";
 const props = defineProps({
   grow: { type: Boolean, required: false },
   mode: { type: null, required: false, default: MODE.VERTICAL },
@@ -65,10 +65,6 @@ const props = defineProps({
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   color: { type: [String, Boolean, null], required: false, skipCheck: true },
   bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
   padding: { type: [Boolean, Number, String], required: false },
   paddingTop: { type: [Boolean, Number, String], required: false },
   paddingLeft: { type: [Boolean, Number, String], required: false },
@@ -100,13 +96,13 @@ const props = defineProps({
   minWidth: { type: [Number, String], required: false },
   width: { type: [Number, String], required: false },
   density: { type: null, required: false },
-  rounded: { type: [Boolean, String, Number, 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 },
   name: { type: String, required: false, default: "bottom-navigation" },
-  order: { type: [String, Number], required: true },
+  order: { type: [String, Number], required: false },
   absolute: { type: Boolean, required: false },
   location: { type: null, required: false },
   disabled: { type: Boolean, required: false },
@@ -115,19 +111,27 @@ const props = defineProps({
   mandatory: { type: Boolean, required: false },
   max: { type: Number, required: false },
   selectedClass: { type: String, required: false, default: "origam-bottom-nav__btn--selected" },
-  hover: { type: Boolean, required: false }
+  hover: { type: [Boolean, Object], required: false },
+  transition: { type: [Boolean, String, Object], required: false, default: () => ({ component: OrigamTranslateBottom }) }
 });
 defineEmits(["update:modelValue", "update:active", "update:hover"]);
 const { filterProps } = useProps(props);
-const { borderClasses, borderStyles } = useBorder(props);
+const slotDefaults = computed(() => ({
+  "origam-btn": {
+    density: props.density,
+    color: props.color,
+    bgColor: props.bgColor,
+    // New API: forward `hover` / `active` (boolean | object)
+    // to each child OrigamBtn; the legacy split `hoverColor` /
+    // `hoverBgColor` / `activeColor` / `activeBgColor` props no
+    // longer exist on the parent or the children.
+    hover: props.hover,
+    active: props.active
+  }
+}));
 const { isActive, activeClasses } = useActive(props, "modelValue");
-const { isHover, hoverClasses, onMouseenter: handleMouseenter, onMouseleave: handleMouseleave } = useHover(props);
-const { colorStyles } = useColorEffect(props, isHover, isActive);
-const { densityClasses } = useDensity(props);
-const { elevationClasses } = useElevation(props);
-const { roundedClasses, roundedStyles } = useRounded(props);
-const { paddingClasses, paddingStyles } = usePadding(props);
-const { marginClasses, marginStyles } = useMargin(props);
+const { hoverClasses, onMouseenter: handleMouseenter, onMouseleave: handleMouseleave } = useHover(props);
+const { colorClasses, colorStyles, borderClasses, borderStyles, roundedClasses, roundedStyles, elevationClasses, paddingClasses, paddingStyles, marginClasses, marginStyles } = useStateEffect(props, ref(false), ref(false));
 const { ssrBootStyles } = useSsrBoot();
 const height = computed(() => {
   if (props.height) {
@@ -145,25 +149,14 @@ const { layoutItemStyles } = useLayoutItem({
   absolute: toRef(props, "absolute")
 });
 const items = computed(() => {
-  return props.items.map((item) => {
-    return {
-      ...item,
-      density: props.density ?? item.density,
-      color: props.color ?? item.color,
-      bgColor: props.bgColor ?? item.bgColor,
-      hoverColor: props.hoverColor ?? item.hoverColor,
-      hoverBgColor: props.hoverBgColor ?? item.hoverBgColor,
-      activeColor: props.activeColor ?? item.activeColor,
-      activeBgColor: props.activeBgColor ?? item.activeBgColor
-    };
-  });
+  return props.items;
 });
 useGroup(props, ORIGAM_BTN_TOGGLE_KEY);
+const { densityClasses } = useDensity(props);
 const bottomNavStyles = computed(() => {
   return [
     {
-      height: props.height ? convertToUnit(height.value) : void 0,
-      transform: `translateY(${convertToUnit(!isActive.value ? 100 : 0, "%")})`
+      height: props.height ? convertToUnit(height.value) : void 0
     },
     roundedStyles.value,
     colorStyles.value,
@@ -185,6 +178,7 @@ const bottomNavClasses = computed(() => {
     activeClasses.value,
     hoverClasses.value,
     borderClasses.value,
+    colorClasses.value,
     densityClasses.value,
     elevationClasses.value,
     roundedClasses.value,
@@ -210,20 +204,29 @@ defineExpose({
 
 		display: flex;
 		overflow: hidden;
+
+		box-sizing: border-box;
 		position: absolute;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		width: 100%;
 
 		transition: var(--origam-bottom-bar---transition);
 
 		max-width: var(--origam-bottom-bar---max-width);
 		height: calc(var(--origam-bottom-bar---height) - var(--origam-bottom-bar---density));
 
-		background: var(--origam-bottom-bar---background);
+		background-color: var(--origam-bottom-bar---background);
 		box-shadow: var(--origam-bottom-bar---box-shadow);
 		color: var(--origam-bottom-bar---color);
 
 		border-color: var(--origam-bottom-bar---border-color);
 		border-style: var(--origam-bottom-bar---border-style);
-		border-width: var(--origam-bottom-bar---border-width);
+		border-top-width: var(--origam-bottom-bar---border-top-width, var(--origam-bottom-bar---border-width, 0));
+		border-right-width: var(--origam-bottom-bar---border-right-width, var(--origam-bottom-bar---border-width, 0));
+		border-bottom-width: var(--origam-bottom-bar---border-bottom-width, var(--origam-bottom-bar---border-width, 0));
+		border-left-width: var(--origam-bottom-bar---border-left-width, var(--origam-bottom-bar---border-width, 0));
 		border-radius: var(--origam-bottom-bar---border-radius);
 
 		padding-block-start: calc(var(--origam-bottom-bar---padding-block-start) - var(--origam-bottom-bar---density));
@@ -267,19 +270,47 @@ defineExpose({
 		}
 
 		&--elevated {
-			--origam-bottom-bar---box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
+			--origam-bottom-bar---box-shadow: var(--origam-bottom-bar--elevated---box-shadow);
 		}
 
 		&--border {
 			--origam-bottom-bar---border-width: thin;
+			--origam-bottom-bar---border-top-width: thin;
+			--origam-bottom-bar---border-right-width: thin;
+			--origam-bottom-bar---border-bottom-width: thin;
+			--origam-bottom-bar---border-left-width: thin;
 		}
 
 		&--rounded {
-			--origam-bottom-bar---border-radius: 4px;
+			--origam-bottom-bar---border-radius: var(--origam-radius---2xl, 24px);
+		}
+
+		&--rounded-x-small {
+			--origam-bottom-bar---border-radius: var(--origam-radius---xs, 2px);
+		}
+
+		&--rounded-small {
+			--origam-bottom-bar---border-radius: var(--origam-radius---sm, 4px);
+		}
+
+		&--rounded-default {
+			--origam-bottom-bar---border-radius: var(--origam-radius---md, 8px);
+		}
+
+		&--rounded-medium {
+			--origam-bottom-bar---border-radius: var(--origam-radius---lg, 12px);
+		}
+
+		&--rounded-large {
+			--origam-bottom-bar---border-radius: var(--origam-radius---xl, 16px);
+		}
+
+		&--rounded-x-large {
+			--origam-bottom-bar---border-radius: var(--origam-radius---2xl, 24px);
 		}
 
 		&--density-comfortable {
-			--origam-bottom-bar---density: 8px;
+			--origam-bottom-bar---density: -8px;
 		}
 
 		&--density-default {
@@ -291,7 +322,7 @@ defineExpose({
 		}
 
 		&--active {
-			--origam-bottom-bar---box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
+			--origam-bottom-bar---box-shadow: var(--origam-bottom-bar--active---box-shadow);
 		}
 
 		&--grow {
@@ -355,39 +386,3 @@ defineExpose({
 		}
 	}
 </style>
-
-<style>
-	:root {
-		--origam-bottom-bar---border-top-width: 0;
-		--origam-bottom-bar---border-left-width: 0;
-		--origam-bottom-bar---border-bottom-width: 0;
-		--origam-bottom-bar---border-right-width: 0;
-		--origam-bottom-bar---border-width: var(--origam-bottom-bar---border-top-width) var(--origam-bottom-bar---border-left-width) var(--origam-bottom-bar---border-bottom-width) var(--origam-bottom-bar---border-right-width);
-		--origam-bottom-bar---border-color: currentColor;
-		--origam-bottom-bar---border-style: solid;
-		--origam-bottom-bar---border-radius: 0;
-		--origam-bottom-bar---density: 0;
-		--origam-bottom-bar---max-width: 100%;
-		--origam-bottom-bar---height: 48px;
-		--origam-bottom-bar---box-shadow: none;
-		--origam-bottom-bar---color: rgba(0, 0, 0, 0.87);
-		--origam-bottom-bar---background: rgb(230, 230, 230);
-		--origam-bottom-bar---margin-inline-start: 0;
-		--origam-bottom-bar---margin-inline-end: 0;
-		--origam-bottom-bar---margin-block-start: 0;
-		--origam-bottom-bar---margin-block-end: 0;
-		--origam-bottom-bar---padding-block-start: 8px;
-		--origam-bottom-bar---padding-block-end: 8px;
-		--origam-bottom-bar---padding-inline-start: 8px;
-		--origam-bottom-bar---padding-inline-end: 8px;
-		--origam-bottom-bar---transition-duration: 0.2s, 0.1s;
-		--origam-bottom-bar---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-		--origam-bottom-bar---transition-property: transform, color;
-		--origam-bottom-bar---transition: var(--origam-bottom-bar---transition-property) var(--origam-bottom-bar---transition-duration) var(--origam-bottom-bar---transition-timing-function);
-
-		--origam-bottom-bar__content---justify-content: center;
-		--origam-bottom-bar__content---align-items: center;
-		--origam-bottom-bar__content---flex-wrap: nowrap;
-		--origam-bottom-bar__content--transform: none;
-	}
-</style>