origam 0.3.10 → 2.3.0

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

@@ -113,22 +113,21 @@ import { OrigamAvatar, OrigamIcon } from "../../components";
 import {
   useAdjacent,
   useBackgroundColor,
-  useBorder,
+  useDefaults,
   useDensity,
   useDimension,
-  useElevation,
+  useHover,
   useLink,
   useList,
-  useMargin,
   useNestedItem,
-  usePadding,
   useProps,
-  useRounded
+  useStateEffect,
+  useStyle
 } from "../../composables";
 import { vRipple } from "../../directives";
 import { KEYBOARD_VALUES } from "../../enums";
 const attrs = useAttrs();
-const props = defineProps({
+const _props = defineProps({
   active: { type: Boolean, required: false },
   activeClass: { type: String, required: false },
   disabled: { type: Boolean, required: false },
@@ -159,7 +158,7 @@ const props = defineProps({
   minWidth: { type: [Number, String], required: false },
   width: { type: [Number, String], required: false },
   elevation: { type: [Number, String], 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 },
@@ -171,10 +170,6 @@ const props = defineProps({
   exact: { type: Boolean, 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 },
   ripple: { type: [Boolean, Object], required: false },
   padding: { type: [Boolean, Number, String], required: false },
   paddingTop: { type: [Boolean, Number, String], required: false },
@@ -193,8 +188,10 @@ const props = defineProps({
   appendAvatar: { type: String, required: false },
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
-  prependIcon: { type: null, required: false }
+  prependIcon: { type: null, required: false },
+  hover: { type: [Boolean, Object], required: false }
 });
+const props = useDefaults(_props);
 const emits = defineEmits(["click", "click:append", "click:prepend"]);
 const { filterProps } = useProps(props);
 const slots = useSlots();
@@ -210,14 +207,21 @@ const {
   openOnSelect
 } = useNestedItem(id, false);
 const list = useList();
-const { backgroundColorStyles } = useBackgroundColor(toRef(props, "bgColor"));
-const { borderClasses, borderStyles } = useBorder(props);
-const { paddingClasses, paddingStyles } = usePadding(props);
-const { marginClasses, marginStyles } = useMargin(props);
+const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, "bgColor"));
 const { densityClasses } = useDensity(props);
+const { isHover, hoverState } = useHover(props);
+const {
+  borderClasses,
+  borderStyles,
+  roundedClasses,
+  roundedStyles,
+  elevationClasses,
+  paddingClasses,
+  paddingStyles,
+  marginClasses,
+  marginStyles
+} = useStateEffect(props, isHover, void 0, hoverState, void 0);
 const { dimensionStyles } = useDimension(props);
-const { elevationClasses } = useElevation(props);
-const { roundedClasses, roundedStyles } = useRounded({ rounded: props.rounded || props.nav });
 const {
   onClickPrepend: handleClickPrepend,
   onClickAppend: handleClickAppend,
@@ -231,7 +235,7 @@ const isLink = computed(() => {
   return props.link && link.isLink.value;
 });
 const isClickable = computed(() => {
-  return !props.disabled && props.link && (props.link || link.isClickable.value || props.value != null && !!list);
+  return !props.disabled && (props.link || link.isClickable.value || props.value != null && !!list);
 });
 const lineClasses = computed(() => {
   return [
@@ -315,6 +319,7 @@ const listItemClasses = computed(() => {
       "origam-list-item--slim": props.slim,
       [`${props.activeClass}`]: props.activeClass && isActive.value
     },
+    backgroundColorClasses.value,
     borderClasses.value,
     densityClasses.value,
     elevationClasses.value,
@@ -325,12 +330,19 @@ const listItemClasses = computed(() => {
     props.class
   ];
 });
+const { id: styleId, css, load, isLoaded, unload } = useStyle(listItemStyles);
 defineExpose({
   isGroupActivator,
   isSelected,
   list,
   select,
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded,
+  styleId
 });
 </script>
 
@@ -338,38 +350,37 @@ defineExpose({
 	.origam-list-item {
 		$this: &;
 
-		align-items: var(--origam-list-item---align-items);
-		display: var(--origam-list-item---display);
-		flex: var(--origam-list-item---flex);
-		grid-template-areas: var(--origam-list-item---grid-template-areas);
-		grid-template-columns: var(--origam-list-item---grid-template-columns);
+		align-items: var(--origam-list-item---align-items, center);
+		display: var(--origam-list-item---display, grid);
+		flex: var(--origam-list-item---flex, none);
+		grid-template-areas: var(--origam-list-item---grid-template-areas, "prepend content append");
+		grid-template-columns: var(--origam-list-item---grid-template-columns, max-content 1fr auto);
 
-		max-width: var(--origam-list-item---max-width);
-		min-height: calc(var(--origam-list-item---min-height) + var(--origam-list---density));
+		max-width: var(--origam-list-item---max-width, 100%);
+		min-height: calc(var(--origam-list-item---min-height, 40px) + var(--origam-list---density, 0px));
 
-		text-decoration: var(--origam-list-item---text-decoration);
+		text-decoration: var(--origam-list-item---text-decoration, none);
 
-		outline: var(--origam-list-item---outline);
-		position: var(--origam-list-item---position);
+		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) + var(--origam-list---density));
-		padding-block-end: calc(var(--origam-list-item---padding-block-end) + var(--origam-list---density));
-		padding-inline-start: calc(var(--origam-list-item---padding-inline-start) + var(--origam-list---indent-padding) + var(--origam-list---density));
-		padding-inline-end: calc(var(--origam-list-item---padding-inline-end) + var(--origam-list---density));
+		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-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));
 
-		margin-block-start: var(--origam-list-item---margin-block-start);
-		margin-block-end: var(--origam-list-item---margin-block-end);
-		margin-inline-start: var(--origam-list-item---margin-inline-start);
-		margin-inline-end: var(--origam-list-item---margin-inline-end);
+		margin-block-start: var(--origam-list-item---margin-block-start, 0);
+		margin-block-end: var(--origam-list-item---margin-block-end, 0);
+		margin-inline-start: var(--origam-list-item---margin-inline-start, 0);
+		margin-inline-end: var(--origam-list-item---margin-inline-end, 0);
 
-		border-color: var(--origam-list-item---border-color);
-		border-style: var(--origam-list-item---border-style);
-		border-width: var(--origam-list-item---border-width);
-		border-radius: var(--origam-list-item---border-radius);
+		border-color: var(--origam-list-item---border-color, var(--origam-color__text---primary));
+		border-style: var(--origam-list-item---border-style, solid);
+		border-width: var(--origam-list-item---border-width, 0);
+		border-radius: var(--origam-list-item---border-radius, 0px);
 
 		&--border {
 			--origam-list-item---border-width: thin;
-			--origam-list-item---box-shadow: none;
 		}
 
 		&--rounded {
@@ -389,13 +400,13 @@ defineExpose({
 		}
 
 		&--disabled {
-			pointer-events: var(--origam-list-item---pointer-events);
-			user-select: var(--origam-list-item---user-select);
-			opacity: var(--origam-list-item---opacity);
+			pointer-events: var(--origam-list-item---pointer-events, none);
+			user-select: var(--origam-list-item---user-select, none);
+			opacity: var(--origam-list-item---opacity, 0.6);
 		}
 
 		&--link {
-			cursor: var(--origam-list-item---cursor);
+			cursor: var(--origam-list-item---cursor, pointer);
 		}
 
 		&--one-line {
@@ -446,35 +457,46 @@ defineExpose({
 			}
 		}
 
-		&,
+		&--link {
+			&:hover,
+			&:focus-visible {
+				> #{$this}__overlay {
+					--origam-list-item__overlay---opacity: calc(0.08 * 1);
+				}
+			}
+		}
+
 		&--active,
 		[aria-haspopup=menu][aria-expanded=true] {
-			&,
+			> #{$this}__overlay {
+				--origam-list-item__overlay---opacity: calc(0.12 * 1);
+			}
+
 			&:hover,
 			&:focus-visible {
 				> #{$this}__overlay {
-					--origam-list-item__overlay---opacity: calc(0.12 * 1);
+					--origam-list-item__overlay---opacity: calc(0.16 * 1);
 				}
 			}
 		}
 
 		&__overlay {
-			background-color: var(--origam-list-item__overlay---background-color);
-			border-radius: var(--origam-list-item__overlay---border-radius);
-			opacity: var(--origam-list-item__overlay---opacity);
-			pointer-events: var(--origam-list-item__overlay---pointer-events);
-			position: var(--origam-list-item__overlay---position);
-			bottom: var(--origam-list-item__overlay---position-bottom);
-			left: var(--origam-list-item__overlay---position-left);
-			right: var(--origam-list-item__overlay---position-right);
-			top: var(--origam-list-item__overlay---position-top);
-			transition-property: var(--origam-list-item__overlay---transition-property);
-			transition-duration: var(--origam-list-item__overlay---transition-duration);
-			transition-timing-function: var(--origam-list-item__overlay---transition-timing-function);
+			background-color: var(--origam-list-item__overlay---background-color, currentColor);
+			border-radius: var(--origam-list-item__overlay---border-radius, inherit);
+			opacity: var(--origam-list-item__overlay---opacity, 0);
+			pointer-events: var(--origam-list-item__overlay---pointer-events, none);
+			position: var(--origam-list-item__overlay---position, absolute);
+			bottom: var(--origam-list-item__overlay---position-bottom, 0);
+			left: var(--origam-list-item__overlay---position-left, 0);
+			right: var(--origam-list-item__overlay---position-right, 0);
+			top: var(--origam-list-item__overlay---position-top, 0);
+			transition-property: var(--origam-list-item__overlay---transition-property, opacity);
+			transition-duration: var(--origam-list-item__overlay---transition-duration, 0.2s);
+			transition-timing-function: var(--origam-list-item__overlay---transition-timing-function, ease-in-out);
 		}
 
 		&__underlay {
-			position: var(--origam-list-item__underlay---position);
+			position: var(--origam-list-item__underlay---position, absolute);
 		}
 
 		&__prepend,
@@ -482,188 +504,70 @@ defineExpose({
 			&,
 			> .origam-badge {
 				.origam-icon {
-					opacity: var(--origam-list-item__icon---opacity);
+					opacity: var(--origam-list-item__icon---opacity, 0.87);
 				}
 			}
 		}
 
 		&__prepend {
-			align-items: var(--origam-list-item__prepend---align-items);
-			align-self: var(--origam-list-item__prepend---align-self);
-			display: var(--origam-list-item__prepend---display);
-			grid-area: var(--origam-list-item__prepend---grid-area);
-			min-width: var(--origam-list-item__prepend---min-width);
-			min-height: var(--origam-list-item__prepend---min-height);
+			align-items: var(--origam-list-item__prepend---align-items, center);
+			align-self: var(--origam-list-item__prepend---align-self, center);
+			display: var(--origam-list-item__prepend---display, flex);
+			grid-area: var(--origam-list-item__prepend---grid-area, prepend);
+			min-width: var(--origam-list-item__prepend---min-width, 24px);
+			min-height: var(--origam-list-item__prepend---min-height, 24px);
 		}
 
 		&__append {
-			align-items: var(--origam-list-item__append---align-items);
-			align-self: var(--origam-list-item__append---align-self);
-			display: var(--origam-list-item__append---display);
-			grid-area: var(--origam-list-item__append---grid-area);
-			min-width: var(--origam-list-item__append---min-width);
-			min-height: var(--origam-list-item__append---min-height);
+			align-items: var(--origam-list-item__append---align-items, center);
+			align-self: var(--origam-list-item__append---align-self, center);
+			display: var(--origam-list-item__append---display, flex);
+			grid-area: var(--origam-list-item__append---grid-area, append);
+			min-width: var(--origam-list-item__append---min-width, 24px);
+			min-height: var(--origam-list-item__append---min-height, 24px);
 		}
 
 		&__content {
-			align-self: var(--origam-list-item__content---align-self);
-			grid-area: var(--origam-list-item__content---grid-area);
-			overflow: var(--origam-list-item__content---overflow);
+			align-self: var(--origam-list-item__content---align-self, center);
+			grid-area: var(--origam-list-item__content---grid-area, content);
+			overflow: var(--origam-list-item__content---overflow, hidden);
 		}
 
 		&__title {
-			hyphens: var(--origam-list-item__title---hyphens);
-			overflow-wrap: var(--origam-list-item__title---overflow-wrap);
-			overflow: var(--origam-list-item__title---overflow);
-			padding-block-start: var(--origam-list-item__title---padding-block-start);
-			padding-block-end: var(--origam-list-item__title---padding-block-end);
-			padding-inline-start: var(--origam-list-item__title---padding-inline-start);
-			padding-inline-end: var(--origam-list-item__title---padding-inline-end);
-			white-space: var(--origam-list-item__title---white-space);
-			text-overflow: var(--origam-list-item__title---text-overflow);
-			word-break: var(--origam-list-item__title---word-break);
-			word-wrap: var(--origam-list-item__title---word-wrap);
-			font-size: var(--origam-list-item__title---font-size);
-			font-weight: var(--origam-list-item__title---font-weight);
-			letter-spacing: var(--origam-list-item__title---letter-spacing);
-			line-height: var(--origam-list-item__title---line-height);
-			text-transform: var(--origam-list-item__title---text-transform);
+			hyphens: var(--origam-list-item__title---hyphens, auto);
+			overflow-wrap: var(--origam-list-item__title---overflow-wrap, normal);
+			overflow: var(--origam-list-item__title---overflow, hidden);
+			padding-block-start: var(--origam-list-item__title---padding-block-start, 0);
+			padding-block-end: var(--origam-list-item__title---padding-block-end, 0);
+			padding-inline-start: var(--origam-list-item__title---padding-inline-start, 0);
+			padding-inline-end: var(--origam-list-item__title---padding-inline-end, 0);
+			white-space: var(--origam-list-item__title---white-space, nowrap);
+			text-overflow: var(--origam-list-item__title---text-overflow, ellipsis);
+			word-break: var(--origam-list-item__title---word-break, normal);
+			word-wrap: var(--origam-list-item__title---word-wrap, break-word);
+			font-size: var(--origam-list-item__title---font-size, 1rem);
+			font-weight: var(--origam-list-item__title---font-weight, 400);
+			letter-spacing: var(--origam-list-item__title---letter-spacing, 0.009375em);
+			line-height: var(--origam-list-item__title---line-height, 1.5rem);
+			text-transform: var(--origam-list-item__title---text-transform, none);
 		}
 
 		&__subtitle {
 			-webkit-box-orient: vertical;
-			display: var(--origam-list-item__subtitle---display);
-			opacity: var(--origam-list-item__subtitle---opacity);
-			overflow: var(--origam-list-item__subtitle---overflow);
-			padding-block-start: var(--origam-list-item__subtitle---padding-block-start);
-			padding-block-end: var(--origam-list-item__subtitle---padding-block-end);
-			padding-inline-start: var(--origam-list-item__subtitle---padding-inline-start);
-			padding-inline-end: var(--origam-list-item__subtitle---padding-inline-end);
-			text-overflow: var(--origam-list-item__subtitle---text-overflow);
-			word-break: var(--origam-list-item__subtitle---word-break);
-			font-size: var(--origam-list-item__subtitle---font-size);
-			font-weight: var(--origam-list-item__subtitle---font-weight);
-			letter-spacing: var(--origam-list-item__subtitle---letter-spacing);
-			line-height: var(--origam-list-item__subtitle---line-height);
-			text-transform: var(--origam-list-item__subtitle---text-transform);
+			display: var(--origam-list-item__subtitle---display, -webkit-box);
+			opacity: var(--origam-list-item__subtitle---opacity, 0.6);
+			overflow: var(--origam-list-item__subtitle---overflow, hidden);
+			padding-block-start: var(--origam-list-item__subtitle---padding-block-start, 0);
+			padding-block-end: var(--origam-list-item__subtitle---padding-block-end, 0);
+			padding-inline-start: var(--origam-list-item__subtitle---padding-inline-start, 0);
+			padding-inline-end: var(--origam-list-item__subtitle---padding-inline-end, 0);
+			text-overflow: var(--origam-list-item__subtitle---text-overflow, ellipsis);
+			word-break: var(--origam-list-item__subtitle---word-break, break-all);
+			font-size: var(--origam-list-item__subtitle---font-size, 0.875rem);
+			font-weight: var(--origam-list-item__subtitle---font-weight, 400);
+			letter-spacing: var(--origam-list-item__subtitle---letter-spacing, 0.0178571429em);
+			line-height: var(--origam-list-item__subtitle---line-height, 1rem);
+			text-transform: var(--origam-list-item__subtitle---text-transform, none);
 		}
 	}
 </style>
-
-<style>
-	:root {
-		--origam-list-item---align-items: center;
-		--origam-list-item---display: grid;
-		--origam-list-item---flex: none;
-		--origam-list-item---grid-template-areas: "prepend content append";
-		--origam-list-item---grid-template-columns: max-content 1fr auto;
-
-		--origam-list-item---max-width: 100%;
-		--origam-list-item---min-height: 40px;
-
-		--origam-list-item---text-decoration: none;
-
-		--origam-list-item---border-top-width: 0;
-		--origam-list-item---border-left-width: 0;
-		--origam-list-item---border-bottom-width: 0;
-		--origam-list-item---border-right-width: 0;
-		--origam-list-item---border-width: var(--origam-list-item---border-top-width) var(--origam-list-item---border-left-width) var(--origam-list-item---border-bottom-width) var(--origam-list-item---border-right-width);
-		--origam-list-item---border-color: rgba(0, 0, 0, 0.87);
-		--origam-list-item---border-style: solid;
-		--origam-list-item---border-start-start-radius: 0;
-		--origam-list-item---border-start-end-radius: 0;
-		--origam-list-item---border-end-start-radius: 0;
-		--origam-list-item---border-end-end-radius: 0;
-		--origam-list-item---border-radius: var(--origam-list-item---border-start-start-radius) var(--origam-list-item---border-start-end-radius) var(--origam-list-item---border-end-start-radius) var(--origam-list-item---border-end-end-radius);
-
-		--origam-list-item---padding-block-start: 8px;
-		--origam-list-item---padding-block-end: 8px;
-		--origam-list-item---padding-inline-start: 16px;
-		--origam-list-item---padding-inline-end: 16px;
-
-		--origam-list-item---margin-block-start: 0;
-		--origam-list-item---margin-block-end: 0;
-		--origam-list-item---margin-inline-start: 0;
-		--origam-list-item---margin-inline-end: 0;
-
-		--origam-list-item---position: relative;
-		--origam-list-item---outline: none;
-
-		--origam-list-item---pointer-events: none;
-		--origam-list-item---user-select: none;
-		--origam-list-item---opacity: 0.6;
-
-		--origam-list-item---cursor: pointer;
-
-		--origam-list-item__overlay---opacity: 0.2;
-		--origam-list-item__overlay---background-color: #000;
-		--origam-list-item__overlay---border-radius: inherit;
-		--origam-list-item__overlay---pointer-events: none;
-		--origam-list-item__overlay---position: absolute;
-		--origam-list-item__overlay---position-bottom: 0;
-		--origam-list-item__overlay---position-left: 0;
-		--origam-list-item__overlay---position-right: 0;
-		--origam-list-item__overlay---position-top: 0;
-		--origam-list-item__overlay---transition-property: opacity;
-		--origam-list-item__overlay---transition-duration: 0.2s;
-		--origam-list-item__overlay---transition-timing-function: ease-in-out;
-
-		--origam-list-item__underlay---position: absolute;
-
-		--origam-list-item__icon---opacity: 0.87;
-
-		--origam-list-item__prepend---align-items: center;
-		--origam-list-item__prepend---align-self: center;
-		--origam-list-item__prepend---display: flex;
-		--origam-list-item__prepend---grid-area: prepend;
-		--origam-list-item__prepend---min-width: 24px;
-		--origam-list-item__prepend---min-height: 24px;
-
-		--origam-list-item__append---align-items: center;
-		--origam-list-item__append---align-self: center;
-		--origam-list-item__append---display: flex;
-		--origam-list-item__append---grid-area: append;
-		--origam-list-item__append---min-width: 24px;
-		--origam-list-item__append---min-height: 24px;
-
-		--origam-list-item__content---align-self: center;
-		--origam-list-item__content---grid-area: content;
-		--origam-list-item__content---overflow: hidden;
-
-		--origam-list-item__title---hyphens: auto;
-		--origam-list-item__title---overflow-wrap: normal;
-		--origam-list-item__title---overflow: hidden;
-
-		--origam-list-item__title---padding-block-start: 0;
-		--origam-list-item__title---padding-block-end: 0;
-		--origam-list-item__title---padding-inline-start: 0;
-		--origam-list-item__title---padding-inline-end: 0;
-
-		--origam-list-item__title---white-space: nowrap;
-		--origam-list-item__title---text-overflow: ellipsis;
-		--origam-list-item__title---word-break: normal;
-		--origam-list-item__title---word-wrap: break-word;
-		--origam-list-item__title---font-size: 1rem;
-		--origam-list-item__title---font-weight: 400;
-		--origam-list-item__title---letter-spacing: 0.009375em;
-		--origam-list-item__title---line-height: 1.5rem;
-		--origam-list-item__title---text-transform: none;
-
-		--origam-list-item__subtitle---display: -webkit-box;
-		--origam-list-item__subtitle---opacity: 0.6;
-		--origam-list-item__subtitle---overflow: hidden;
-
-		--origam-list-item__subtitle---padding-block-start: 0;
-		--origam-list-item__subtitle---padding-block-end: 0;
-		--origam-list-item__subtitle---padding-inline-start: 0;
-		--origam-list-item__subtitle---padding-inline-end: 0;
-
-		--origam-list-item__subtitle---text-overflow: ellipsis;
-		--origam-list-item__subtitle---word-break: break-all;
-		--origam-list-item__subtitle---font-size: 0.875rem;
-		--origam-list-item__subtitle---font-weight: 400;
-		--origam-list-item__subtitle---letter-spacing: 0.0178571429em;
-		--origam-list-item__subtitle---line-height: 1rem;
-		--origam-list-item__subtitle---text-transform: none;
-	}
-</style>

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

@@ -20,7 +20,15 @@
 
 <script setup>
 import { computed, StyleValue, toRef, useSlots } from "vue";
-import { useBorder, useBothColor, useMargin, usePadding, useProps, useRounded } from "../../composables";
+import {
+  useBorder,
+  useBothColor,
+  useMargin,
+  usePadding,
+  useProps,
+  useRounded,
+  useStyle
+} from "../../composables";
 const props = defineProps({
   inset: { type: Boolean, required: false },
   sticky: { type: Boolean, required: false },
@@ -31,10 +39,6 @@ const props = defineProps({
   tag: { type: String, required: false, default: "div" },
   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 },
@@ -58,14 +62,14 @@ const props = defineProps({
   borderInline: { type: [Boolean, Number, String], required: false },
   borderColor: { type: String, required: false },
   borderStyle: { type: String, 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 }
 });
 const { filterProps } = useProps(props);
-const { colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
+const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const { roundedClasses, roundedStyles } = useRounded(props);
 const { borderClasses, borderStyles } = useBorder(props);
 const { paddingClasses, paddingStyles } = usePadding(props);
@@ -91,6 +95,7 @@ const listSubheaderClasses = computed(() => {
       "origam-list-subheader--inset": props.inset,
       "origam-list-subheader--sticky": props.sticky
     },
+    colorClasses.value,
     roundedClasses.value,
     borderClasses.value,
     paddingClasses.value,
@@ -98,23 +103,29 @@ const listSubheaderClasses = computed(() => {
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(listSubheaderStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
 
-<style lang="css" scoped>
+<style lang="scss" scoped>
 	.origam-list-subheader {
 		align-items: center;
 		background: inherit;
-		color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+		color: var(--origam-list-subheader---color, var(--origam-color__text---secondary));
 		display: flex;
-		font-size: 0.875rem;
-		font-weight: 400;
-		line-height: 1.375rem;
-		padding-inline-end: 16px;
-		min-height: 40px;
-		transition: 0.2s min-height cubic-bezier(0.4, 0, 0.2, 1);
+		font-size: var(--origam-list-subheader---font-size, 0.875rem);
+		font-weight: var(--origam-list-subheader---font-weight, 400);
+		line-height: var(--origam-list-subheader---line-height, 1.375rem);
+		padding-inline-end: var(--origam-list-subheader---padding-inline-end, 16px);
+		min-height: var(--origam-list-subheader---min-height, 40px);
+		transition: var(--origam-list-subheader---transition-duration, 0.2s) min-height var(--origam-list-subheader---transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
 
 		&__text {
 			overflow: hidden;
@@ -123,7 +134,7 @@ defineExpose({
 		}
 
 		&--inset {
-			--origam-list---indent-padding: 32px;
+			--origam-list---indent-padding: var(--origam-list-subheader---inset-indent-padding, 32px);
 		}
 
 		&--sticky {

package/dist/src/components/Loader/OrigamLoader.vue

@@ -11,6 +11,7 @@
 						:size="23"
 						:type="PROGRESS_TYPE.CIRCULAR"
 						:width="2"
+						class="origam-loader__progress"
 						indeterminate
 				/>
 			</slot>
@@ -24,21 +25,16 @@
 <script setup>
 import { computed, StyleValue } from "vue";
 import { OrigamProgress } from "../../components";
-import { useProps } from "../../composables";
+import { useProps, useStyle } from "../../composables";
 import { PROGRESS_TYPE } from "../../enums";
 const props = defineProps({
-  loading: { type: [Boolean, Number], required: false },
+  loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, 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 },
   tag: { type: String, required: false, default: "span" },
-  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 }
+  color: { type: [String, Boolean, null], required: false, skipCheck: true }
 });
 const { filterProps } = useProps(props);
 const isLoading = computed(() => {
@@ -55,7 +51,31 @@ const loaderClasses = computed(() => {
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(loaderStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
+
+<style lang="scss" scoped>
+	.origam-loader {
+		height: var(--origam-loader---height, 100%);
+
+		&--fullscreen {
+			position: var(--origam-loader__fullscreen---position, fixed);
+			top: var(--origam-loader__fullscreen---top, 0);
+			left: var(--origam-loader__fullscreen---left, 0);
+			height: var(--origam-loader__fullscreen---height, 100vh);
+			width: var(--origam-loader__fullscreen---width, 100vw);
+		}
+
+		&__progress {
+			margin: var(--origam-loader__progress---margin, auto);
+		}
+	}
+</style>