origam 2.5.0 → 2.6.2

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

@@ -14,8 +14,10 @@
         <span
 		        v-show="modelValue"
 		        :id="id"
+		        v-contrast
 		        :aria-label="t(label, content)"
 		        :class="badgeContentClasses"
+		        :style="typographyStyles"
 		        aria-atomic="true"
 		        aria-live="polite"
 		        role="status"
@@ -60,7 +62,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamFade, OrigamIcon, OrigamTransition } from "../../components";
 import {
   useActive,
@@ -70,8 +72,10 @@ import {
   useProps,
   useStateEffect,
   useStatus,
-  useStyle
+  useStyle,
+  useTypography
 } from "../../composables";
+import { vContrast } from "../../directives";
 import { omit, pick } from "../../utils";
 import { computed, ComputedRef, StyleValue, useAttrs } from "vue";
 const props = defineProps({
@@ -111,7 +115,12 @@ const props = defineProps({
   statusIconPosition: { type: null, required: false },
   icon: { type: null, required: false },
   hover: { type: [Boolean, Object], required: false },
-  elevation: { type: [Number, String], required: false }
+  elevation: { type: [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 { t } = useLocale();
@@ -119,6 +128,7 @@ const attrs = useAttrs();
 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 { typographyStyles } = useTypography(props, "badge__badge");
 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;

package/dist/src/components/Blockquote/OrigamBlockquote.vue

@@ -41,7 +41,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   computed,
   onMounted,
@@ -49,7 +49,16 @@ import {
   StyleValue,
   useSlots
 } from "vue";
+import {
+  useBorder,
+  useElevation,
+  useMargin,
+  usePadding,
+  useRounded,
+  useTypography
+} from "../../composables";
 import { QUOTE_MARKS_BY_LANG } from "../../consts/Blockquote/blockquote.const";
+import { isIntent } from "../../utils";
 const props = defineProps({
   variant: { type: String, required: false, default: "default" },
   author: { type: String, required: false },
@@ -57,11 +66,46 @@ const props = defineProps({
   cite: { type: String, required: false },
   lang: { type: String, required: false, default: "auto" },
   align: { type: String, required: false },
-  color: { 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: "blockquote" }
+  tag: { type: String, required: false, default: "blockquote" },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, 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 },
+  elevation: { type: [Number, String], required: false },
+  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 },
+  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 },
+  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 },
+  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 slots = useSlots();
 const resolvedLang = ref("en");
@@ -93,20 +137,56 @@ const effectiveAlign = computed(() => {
   if (props.align) return props.align;
   return props.variant === "pull" ? "center" : "left";
 });
+const { roundedClasses, roundedStyles } = useRounded(props);
+const { elevationClasses } = useElevation(props);
+const { borderClasses, borderStyles } = useBorder(props);
+const { paddingClasses, paddingStyles } = usePadding(props);
+const { marginClasses, marginStyles } = useMargin(props);
+const { typographyStyles } = useTypography(props, "blockquote");
+const colorIsIntent = computed(() => typeof props.color === "string" && isIntent(props.color));
+const accentIsIntent = computed(() => typeof props.bgColor === "string" && isIntent(props.bgColor));
+const customColorStyles = computed(() => {
+  const styles = {};
+  if (props.color && !colorIsIntent.value) {
+    styles["--origam-blockquote---color"] = String(props.color);
+    styles["--origam-blockquote__source---color"] = String(props.color);
+  }
+  if (props.bgColor && !accentIsIntent.value) {
+    const accent = String(props.bgColor);
+    styles["--origam-blockquote---resolved-accent-color"] = accent;
+    styles["--origam-blockquote---resolved-quote-mark-color"] = accent;
+    styles["--origam-blockquote---resolved-author-color"] = accent;
+  }
+  return styles;
+});
 const blockquoteClasses = computed(() => {
   return [
     "origam-blockquote",
     `origam-blockquote--variant-${props.variant}`,
     `origam-blockquote--align-${effectiveAlign.value}`,
     {
-      [`origam-blockquote--color-${props.color}`]: !!props.color,
+      [`origam-blockquote--color-${props.color}`]: colorIsIntent.value,
+      [`origam-blockquote--accent-${props.bgColor}`]: accentIsIntent.value,
       "origam-blockquote--has-attribution": hasAttribution.value
     },
+    roundedClasses.value,
+    elevationClasses.value,
+    borderClasses.value,
+    paddingClasses.value,
+    marginClasses.value,
     props.class
   ];
 });
 const blockquoteStyles = computed(() => {
-  return [props.style];
+  return [
+    roundedStyles.value,
+    borderStyles.value,
+    paddingStyles.value,
+    marginStyles.value,
+    typographyStyles.value,
+    customColorStyles.value,
+    props.style
+  ];
 });
 defineExpose({
   effectiveLang,
@@ -207,6 +287,8 @@ defineExpose({
 		font-style: var(--origam-blockquote__elegant---font-style, italic);
 		line-height: var(--origam-blockquote__elegant---line-height, 2);
 		padding-block: var(--origam-blockquote__elegant---padding-block, 24px);
+		border-inline-start: var(--origam-blockquote__accent---width, 4px) solid var(--origam-blockquote---resolved-accent-color);
+		padding-inline-start: calc(var(--origam-blockquote---resolved-padding-inline) + var(--origam-blockquote__accent---width, 4px));
 	}
 
 	.origam-blockquote--variant-quoted {
@@ -228,6 +310,8 @@ defineExpose({
 		font-style: var(--origam-blockquote__minimal---font-style, italic);
 		padding-inline: var(--origam-blockquote__minimal---padding-inline, 12px);
 		padding-block: 0;
+		border-inline-start: var(--origam-blockquote--minimal---accent-width, 2px) solid var(--origam-blockquote---resolved-accent-color);
+		padding-inline-start: calc(var(--origam-blockquote__minimal---padding-inline, 12px) + var(--origam-blockquote--minimal---accent-width, 2px));
 	}
 
 	.origam-blockquote--variant-pull {
@@ -241,51 +325,91 @@ defineExpose({
 		border-block-end: var(--origam-blockquote__pull---rule-width, 2px) solid var(--origam-blockquote---resolved-accent-color);
 	}
 
-	.origam-blockquote--color-primary {
+	.origam-blockquote--accent-primary {
 		--origam-blockquote---resolved-accent-color: var(--origam-color__action--primary---bg);
 		--origam-blockquote---resolved-quote-mark-color: var(--origam-color__action--primary---bg);
 		--origam-blockquote---resolved-author-color: var(--origam-color__action--primary---fgSubtle);
 	}
 
-	.origam-blockquote--color-secondary {
+	.origam-blockquote--accent-secondary {
 		--origam-blockquote---resolved-accent-color: var(--origam-color__action--secondary---bg);
 		--origam-blockquote---resolved-quote-mark-color: var(--origam-color__action--secondary---bg);
 		--origam-blockquote---resolved-author-color: var(--origam-color__action--secondary---fgSubtle);
 	}
 
-	.origam-blockquote--color-success {
+	.origam-blockquote--accent-success {
 		--origam-blockquote---resolved-accent-color: var(--origam-color__feedback--success---bg);
 		--origam-blockquote---resolved-quote-mark-color: var(--origam-color__feedback--success---bg);
 		--origam-blockquote---resolved-author-color: var(--origam-color__feedback--success---fgSubtle);
 	}
 
-	.origam-blockquote--color-warning {
+	.origam-blockquote--accent-warning {
 		--origam-blockquote---resolved-accent-color: var(--origam-color__feedback--warning---bg);
 		--origam-blockquote---resolved-quote-mark-color: var(--origam-color__feedback--warning---bg);
 		--origam-blockquote---resolved-author-color: var(--origam-color__feedback--warning---fgSubtle);
 	}
 
-	.origam-blockquote--color-danger {
+	.origam-blockquote--accent-danger {
 		--origam-blockquote---resolved-accent-color: var(--origam-color__feedback--danger---bg);
 		--origam-blockquote---resolved-quote-mark-color: var(--origam-color__feedback--danger---bg);
 		--origam-blockquote---resolved-author-color: var(--origam-color__feedback--danger---fgSubtle);
 	}
 
-	.origam-blockquote--color-info {
+	.origam-blockquote--accent-info {
 		--origam-blockquote---resolved-accent-color: var(--origam-color__feedback--info---bg);
 		--origam-blockquote---resolved-quote-mark-color: var(--origam-color__feedback--info---bg);
 		--origam-blockquote---resolved-author-color: var(--origam-color__feedback--info---fgSubtle);
 	}
 
-	.origam-blockquote--color-neutral {
+	.origam-blockquote--accent-neutral {
 		--origam-blockquote---resolved-accent-color: var(--origam-color__text---primary);
 		--origam-blockquote---resolved-quote-mark-color: var(--origam-color__text---primary);
 		--origam-blockquote---resolved-author-color: var(--origam-color__text---secondary);
 	}
 
-	.origam-blockquote--color-ghost {
+	.origam-blockquote--accent-ghost {
 		--origam-blockquote---resolved-accent-color: var(--origam-color__border---subtle);
 		--origam-blockquote---resolved-quote-mark-color: var(--origam-color__text---secondary);
 		--origam-blockquote---resolved-author-color: var(--origam-color__text---secondary);
 	}
+
+	.origam-blockquote--color-primary {
+		--origam-blockquote---color: var(--origam-color__action--primary---fgSubtle);
+		--origam-blockquote__source---color: var(--origam-color__action--primary---fgSubtle);
+	}
+
+	.origam-blockquote--color-secondary {
+		--origam-blockquote---color: var(--origam-color__action--secondary---fgSubtle);
+		--origam-blockquote__source---color: var(--origam-color__action--secondary---fgSubtle);
+	}
+
+	.origam-blockquote--color-success {
+		--origam-blockquote---color: var(--origam-color__feedback--success---fgSubtle);
+		--origam-blockquote__source---color: var(--origam-color__feedback--success---fgSubtle);
+	}
+
+	.origam-blockquote--color-warning {
+		--origam-blockquote---color: var(--origam-color__feedback--warning---fgSubtle);
+		--origam-blockquote__source---color: var(--origam-color__feedback--warning---fgSubtle);
+	}
+
+	.origam-blockquote--color-danger {
+		--origam-blockquote---color: var(--origam-color__feedback--danger---fgSubtle);
+		--origam-blockquote__source---color: var(--origam-color__feedback--danger---fgSubtle);
+	}
+
+	.origam-blockquote--color-info {
+		--origam-blockquote---color: var(--origam-color__feedback--info---fgSubtle);
+		--origam-blockquote__source---color: var(--origam-color__feedback--info---fgSubtle);
+	}
+
+	.origam-blockquote--color-neutral {
+		--origam-blockquote---color: var(--origam-color__text---primary);
+		--origam-blockquote__source---color: var(--origam-color__text---secondary);
+	}
+
+	.origam-blockquote--color-ghost {
+		--origam-blockquote---color: var(--origam-color__action--ghost---fg);
+		--origam-blockquote__source---color: var(--origam-color__action--ghost---fg);
+	}
 </style>

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

@@ -4,6 +4,8 @@
 				:is="tag"
 				v-if="isActive"
 				:id="id"
+				v-contrast
+				:data-origam-color-locked="colorLocked"
 				:class="bottomNavClasses"
 				aria-label="Bottom navigation"
 				@mouseenter="handleMouseenter"
@@ -39,11 +41,13 @@
 	</origam-transition>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamBtn, OrigamDefaultsProvider, OrigamTransition, OrigamTranslateBottom } from "../../components";
+import { vContrast } from "../../directives";
 import {
   useActive,
   useDensity,
+  useDimension,
   useGroup,
   useHover,
   useLayoutItem,
@@ -55,11 +59,12 @@ import {
 import { ORIGAM_BTN_TOGGLE_KEY } from "../../consts";
 import { MODE } from "../../enums";
 import { convertToUnit, int } from "../../utils";
-import { computed, ref, Ref, StyleValue, toRef } from "vue";
+import { computed, ref, StyleValue, toRef } from "vue";
 const props = defineProps({
   grow: { type: Boolean, required: false },
   mode: { type: null, required: false, default: MODE.VERTICAL },
   items: { type: Array, required: false, default: () => [] },
+  position: { type: null, required: false, default: "start" },
   tag: { type: String, required: false, default: "nav" },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
@@ -113,10 +118,13 @@ const props = defineProps({
   max: { type: Number, required: false },
   selectedClass: { type: String, required: false, default: "origam-bottom-nav__btn--selected" },
   hover: { type: [Boolean, Object], required: false },
+  active: { type: [Boolean, Object], required: false },
+  activeClass: { type: String, required: false },
   transition: { type: [Boolean, String, Object], required: false, default: () => ({ component: OrigamTranslateBottom }) }
 });
 defineEmits(["update:modelValue", "update:active", "update:hover"]);
 const { filterProps } = useProps(props);
+const colorLocked = computed(() => props.color ? "true" : void 0);
 const slotDefaults = computed(() => ({
   "origam-btn": {
     density: props.density,
@@ -142,7 +150,7 @@ const height = computed(() => {
 });
 const { layoutItemStyles } = useLayoutItem({
   id: props.name,
-  order: computed(() => int(props.order)),
+  order: computed(() => int(props.order ?? 0)),
   position: computed(() => "bottom"),
   layoutSize: computed(() => isActive.value ? height.value : 0),
   elementSize: height,
@@ -154,8 +162,13 @@ const items = computed(() => {
 });
 useGroup(props, ORIGAM_BTN_TOGGLE_KEY);
 const { densityClasses } = useDensity(props);
+const { dimensionStyles } = useDimension(props);
 const bottomNavStyles = computed(() => {
   return [
+    // All dimension props (width / minWidth / maxWidth / minHeight /
+    // maxHeight / height). The custom `height` below overrides the
+    // plain height with the density-aware value.
+    dimensionStyles.value,
     {
       height: props.height ? convertToUnit(height.value) : void 0
     },
@@ -173,6 +186,7 @@ const bottomNavClasses = computed(() => {
   return [
     "origam-bottom-nav",
     `origam-bottom-nav--${props.mode}`,
+    `origam-bottom-nav--position-${props.position}`,
     {
       "origam-bottom-nav--grow": props.grow
     },
@@ -216,7 +230,7 @@ defineExpose({
 		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));
+		min-height: calc(var(--origam-bottom-bar---height) - var(--origam-bottom-bar---density));
 
 		background-color: var(--origam-bottom-bar---background);
 		box-shadow: var(--origam-bottom-bar---box-shadow);
@@ -274,6 +288,22 @@ defineExpose({
 			--origam-bottom-bar---box-shadow: var(--origam-bottom-bar--elevated---box-shadow);
 		}
 
+		&--position-start {
+			left: 0;
+			right: auto;
+		}
+
+		&--position-center {
+			left: 0;
+			right: 0;
+			margin-inline: auto;
+		}
+
+		&--position-end {
+			left: auto;
+			right: 0;
+		}
+
 		&--border {
 			--origam-bottom-bar---border-width: thin;
 			--origam-bottom-bar---border-top-width: thin;