origam 2.3.0 → 2.6.1

package/dist/src/components/Label/OrigamLabel.vue

@@ -2,6 +2,7 @@
 	<component
 			:is="tag"
 			:id="id"
+			v-contrast
 			:class="labelClasses"
 			:style="labelStyles"
 			:name="name"
@@ -13,7 +14,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, StyleValue, toRef } from "vue";
 import {
   useBorder,
@@ -23,8 +24,10 @@ import {
   usePadding,
   useProps,
   useRounded,
-  useStyle
+  useStyle,
+  useTypography
 } from "../../composables";
+import { vContrast } from "../../directives";
 const _props = defineProps({
   text: { type: String, required: false },
   floating: { type: Boolean, required: false },
@@ -61,9 +64,14 @@ const _props = defineProps({
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  tag: { type: String, required: false, default: "label" }
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  tag: { type: String, required: false, default: "label" },
+  fontFamily: { type: String, required: false },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false },
+  lineHeight: { type: String, required: false },
+  letterSpacing: { type: String, required: false }
 });
 const props = useDefaults(_props);
 const emits = defineEmits(["click"]);
@@ -76,6 +84,7 @@ const { borderClasses, borderStyles } = useBorder(props);
 const { paddingClasses, paddingStyles } = usePadding(props);
 const { marginClasses, marginStyles } = useMargin(props);
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
+const { typographyStyles } = useTypography(props, "label");
 const labelStyles = computed(() => {
   return [
     roundedStyles.value,
@@ -83,6 +92,7 @@ const labelStyles = computed(() => {
     paddingStyles.value,
     marginStyles.value,
     colorStyles.value,
+    typographyStyles.value,
     props.style
   ];
 });
@@ -120,6 +130,7 @@ defineExpose({
 		line-height:     var(--origam-label---line-height);
 		letter-spacing:  var(--origam-label---letter-spacing);
 		pointer-events:  var(--origam-label---pointer-events);
+		transition-property:        var(--origam-label---transition-property, color);
 		transition-duration:        var(--origam-label---transition-duration);
 		transition-timing-function: var(--origam-label---transition-easing);
 

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

@@ -14,11 +14,18 @@
 	</div>
 </template>
 
-<script setup>
-import { computed, StyleValue } from "vue";
+<script lang="ts" setup>
+import { computed, StyleValue, toRef } from "vue";
 import {
+  useBorder,
+  useBothColor,
   useCreateLayout,
+  useDimension,
+  useElevation,
+  useMargin,
+  usePadding,
   useProps,
+  useRounded,
   useStyle
 } from "../../composables";
 const props = defineProps({
@@ -26,15 +33,77 @@ const props = defineProps({
   fullHeight: { type: Boolean, 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 }
+  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
+  height: { type: [Number, String], required: false },
+  maxHeight: { type: [Number, String], required: false },
+  maxWidth: { type: [Number, String], required: false },
+  minHeight: { type: [Number, String], required: false },
+  minWidth: { type: [Number, String], required: false },
+  width: { type: [Number, String], required: false },
+  margin: { type: [Boolean, Number, String], required: false },
+  marginTop: { type: [Boolean, Number, String], required: false },
+  marginLeft: { type: [Boolean, Number, String], required: false },
+  marginBottom: { type: [Boolean, Number, String], required: false },
+  marginRight: { type: [Boolean, Number, String], required: false },
+  marginBlock: { type: [Boolean, Number, String], required: false },
+  marginInline: { type: [Boolean, Number, String], required: false },
+  padding: { type: [Boolean, Number, String], required: false },
+  paddingTop: { type: [Boolean, Number, String], required: false },
+  paddingLeft: { type: [Boolean, Number, String], required: false },
+  paddingBottom: { type: [Boolean, Number, String], required: false },
+  paddingRight: { type: [Boolean, Number, String], required: false },
+  paddingBlock: { type: [Boolean, Number, String], required: false },
+  paddingInline: { type: [Boolean, Number, String], 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 },
+  roundedBottomLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomRight: { type: [Boolean, Number, String], required: false },
+  elevation: { type: [Number, String], required: false },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
+  borderTop: { type: [Boolean, Number, String], required: false },
+  borderLeft: { type: [Boolean, Number, String], required: false },
+  borderBottom: { type: [Boolean, Number, String], required: false },
+  borderRight: { type: [Boolean, Number, String], required: false },
+  borderBlock: { type: [Boolean, Number, String], required: false },
+  borderInline: { type: [Boolean, Number, String], required: false },
+  borderColor: { type: String, required: false },
+  borderStyle: { type: String, required: false }
 });
 const { filterProps } = useProps(props);
 const { layoutClasses, layoutStyles, layoutRef: origamLayoutRef, getLayoutItem, items, layoutId } = useCreateLayout(props);
+const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
+const { borderClasses, borderStyles } = useBorder(props);
+const { roundedClasses, roundedStyles } = useRounded(props);
+const { elevationClasses } = useElevation(props);
+const { dimensionStyles } = useDimension(props);
+const { paddingClasses, paddingStyles } = usePadding(props);
+const { marginClasses, marginStyles } = useMargin(props);
 const layStyles = computed(() => {
-  return [layoutStyles.value, props.style];
+  return [
+    layoutStyles.value,
+    colorStyles.value,
+    borderStyles.value,
+    roundedStyles.value,
+    dimensionStyles.value,
+    paddingStyles.value,
+    marginStyles.value,
+    props.style
+  ];
 });
 const layClasses = computed(() => {
-  return [layoutClasses.value, props.class];
+  return [
+    layoutClasses.value,
+    colorClasses.value,
+    borderClasses.value,
+    roundedClasses.value,
+    elevationClasses.value,
+    paddingClasses.value,
+    marginClasses.value,
+    props.class
+  ];
 });
 const { id, css, load, isLoaded, unload } = useStyle(layStyles);
 defineExpose({

package/dist/src/components/Lazy/OrigamLazy.vue

@@ -2,6 +2,7 @@
 	<component
 			:is="tag"
 			v-intersect="intersect"
+			:aria-busy="!isActive || undefined"
 			:class="lazyClasses"
 			:style="lazyStyles"
 	>
@@ -16,7 +17,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, StyleValue } from "vue";
 import { OrigamFade, OrigamTransition } from "../../components";
 import {

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

@@ -1,6 +1,7 @@
 <template>
 	<component
 			:is="tag"
+			:id="id"
 			:class="listClasses"
 			:style="listStyles"
 			:tabindex="tabIndex"
@@ -83,7 +84,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, ref, shallowRef, StyleValue, toRef, useSlots } from "vue";
 import { OrigamDefaultsProvider, OrigamListChildren } from "../../components";
 import {
@@ -150,8 +151,8 @@ const props = defineProps({
   itemProps: { type: null, required: false, default: "props" },
   returnObject: { type: Boolean, required: false },
   valueComparator: { type: null, required: false, default: deepEqual },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, 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 },

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

@@ -75,7 +75,7 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, useSlots } from "vue";
 import { OrigamDivider, OrigamListGroup, OrigamListItem, OrigamListSubheader } from "../../components";
 import { useCreateList, useProps } from "../../composables";

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

@@ -1,6 +1,7 @@
 <template>
 	<component
 			:is="tag"
+			v-contrast
 			:class="listGroupClasses"
 			:style="listGroupStyles"
 	>
@@ -41,7 +42,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, ref, StyleValue, toRef } from "vue";
 import { OrigamDefaultsProvider, OrigamExpandY, OrigamListGroupActivator, OrigamListItem, OrigamTransition } from "../../components";
 import {
@@ -54,6 +55,7 @@ import {
   useStateEffect,
   useStyle
 } from "../../composables";
+import { vContrast } from "../../directives";
 import { MDI_ICONS } from "../../enums";
 const props = defineProps({
   collapseIcon: { type: null, required: false, default: MDI_ICONS.CHEVRON_UP },
@@ -65,8 +67,8 @@ 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 },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, 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 },
@@ -141,6 +143,7 @@ const activatorProps = computed(() => {
     "onClick": handleClick
   };
 });
+const activatorEvents = computed(() => ({}));
 const prependActivatorIcon = computed(() => {
   return props.prependIcon;
 });

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

@@ -8,7 +8,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, StyleValue } from "vue";
 import {
   useNestedGroupActivator,

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

@@ -1,6 +1,7 @@
 <template>
 	<component
 			:is="link.tag"
+			:id="props.id"
 			v-ripple="isClickable && ripple"
 			:class="listItemClasses"
 			:href="link.href.value"
@@ -53,6 +54,7 @@
 						v-if="hasTitle"
 						key="title"
 						class="origam-list-item__title"
+						:style="titleTypographyStyles"
 				>
 					<slot
 							name="title"
@@ -65,6 +67,7 @@
 						v-if="hasSubtitle"
 						key="subtitle"
 						class="origam-list-item__subtitle"
+						:style="subtitleTypographyStyles"
 				>
 					<slot
 							name="subtitle"
@@ -107,7 +110,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, onBeforeMount, StyleValue, toRef, useAttrs, useSlots, watch } from "vue";
 import { OrigamAvatar, OrigamIcon } from "../../components";
 import {
@@ -122,7 +125,8 @@ import {
   useNestedItem,
   useProps,
   useStateEffect,
-  useStyle
+  useStyle,
+  useTypography
 } from "../../composables";
 import { vRipple } from "../../directives";
 import { KEYBOARD_VALUES } from "../../enums";
@@ -168,8 +172,8 @@ const _props = defineProps({
   replace: { type: Boolean, required: false },
   to: { type: null, required: false },
   exact: { type: Boolean, required: false },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, 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 },
@@ -189,7 +193,12 @@ const _props = defineProps({
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
-  hover: { type: [Boolean, Object], required: false }
+  hover: { type: [Boolean, Object], required: false },
+  fontFamily: { type: String, required: false },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false },
+  lineHeight: { type: String, required: false },
+  letterSpacing: { type: String, required: false }
 });
 const props = useDefaults(_props);
 const emits = defineEmits(["click", "click:append", "click:prepend"]);
@@ -222,6 +231,8 @@ const {
   marginStyles
 } = useStateEffect(props, isHover, void 0, hoverState, void 0);
 const { dimensionStyles } = useDimension(props);
+const { typographyStyles: titleTypographyStyles } = useTypography(props, "list-item__title");
+const { typographyStyles: subtitleTypographyStyles } = useTypography(props, "list-item__subtitle");
 const {
   onClickPrepend: handleClickPrepend,
   onClickAppend: handleClickAppend,

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

@@ -1,6 +1,7 @@
 <template>
 	<component
 			:is="tag"
+			v-contrast
 			:class="listSubheaderClasses"
 			:style="listSubheaderStyles"
 	>
@@ -18,7 +19,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, StyleValue, toRef, useSlots } from "vue";
 import {
   useBorder,
@@ -27,8 +28,10 @@ import {
   usePadding,
   useProps,
   useRounded,
-  useStyle
+  useStyle,
+  useTypography
 } from "../../composables";
+import { vContrast } from "../../directives";
 const props = defineProps({
   inset: { type: Boolean, required: false },
   sticky: { type: Boolean, required: false },
@@ -37,8 +40,8 @@ const props = defineProps({
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   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 },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, 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 },
@@ -66,7 +69,12 @@ const props = defineProps({
   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 }
+  roundedBottomRight: { type: [Boolean, Number, String], required: false },
+  fontFamily: { type: String, required: false },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false },
+  lineHeight: { type: String, required: false },
+  letterSpacing: { type: String, required: false }
 });
 const { filterProps } = useProps(props);
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
@@ -74,6 +82,7 @@ const { roundedClasses, roundedStyles } = useRounded(props);
 const { borderClasses, borderStyles } = useBorder(props);
 const { paddingClasses, paddingStyles } = usePadding(props);
 const { marginClasses, marginStyles } = useMargin(props);
+const { typographyStyles } = useTypography(props, "list-subheader");
 const slots = useSlots();
 const hasText = computed(() => {
   return slots.default || props.title;
@@ -85,6 +94,7 @@ const listSubheaderStyles = computed(() => {
     borderStyles.value,
     paddingStyles.value,
     marginStyles.value,
+    typographyStyles.value,
     props.style
   ];
 });

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

@@ -1,6 +1,8 @@
 <template>
 	<component
 			:is="tag"
+			:aria-busy="isLoading || undefined"
+			:aria-label="isLoading ? 'Loading' : undefined"
 			:class="loaderClasses"
 			:style="loaderStyles"
 	>
@@ -22,7 +24,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, StyleValue } from "vue";
 import { OrigamProgress } from "../../components";
 import { useProps, useStyle } from "../../composables";
@@ -34,7 +36,7 @@ const props = defineProps({
   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 }
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
 });
 const { filterProps } = useProps(props);
 const isLoading = computed(() => {

package/dist/src/components/Main/OrigamMain.vue

@@ -13,10 +13,12 @@
 	</component>
 </template>
 
-<script setup>
-import { computed, StyleValue } from "vue";
+<script lang="ts" setup>
+import { computed, StyleValue, toRef } from "vue";
 import {
   useBorder,
+  useBothColor,
+  useElevation,
   useLayout,
   useMargin,
   usePadding,
@@ -64,11 +66,16 @@ const props = defineProps({
   maxWidth: { type: [Number, String], required: false },
   minHeight: { type: [Number, String], required: false },
   minWidth: { type: [Number, String], required: false },
-  width: { type: [Number, String], required: false }
+  width: { type: [Number, String], required: false },
+  elevation: { type: [Number, String], required: false },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
 });
 const { filterProps } = useProps(props);
 const { mainStyles: mainLayoutStyles } = useLayout();
 const { ssrBootStyles } = useSsrBoot();
+const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
+const { elevationClasses } = useElevation(props);
 const { roundedClasses, roundedStyles } = useRounded(props);
 const { borderClasses, borderStyles } = useBorder(props);
 const { paddingClasses, paddingStyles } = usePadding(props);
@@ -77,6 +84,7 @@ const mainStyles = computed(() => {
   return [
     mainLayoutStyles.value,
     ssrBootStyles.value,
+    colorStyles.value,
     roundedStyles.value,
     borderStyles.value,
     paddingStyles.value,
@@ -90,6 +98,8 @@ const mainClasses = computed(() => {
     {
       "origam-main--scrollable": props.scrollable
     },
+    colorClasses.value,
+    elevationClasses.value,
     roundedClasses.value,
     borderClasses.value,
     paddingClasses.value,