origam 2.3.0 → 2.6.1

package/dist/src/components/Alert/OrigamAlert.vue

@@ -2,8 +2,10 @@
 	<component
 			:is="tag"
 			:id="id"
+			v-contrast
 			:class="alertClasses"
-			role="alert"
+			:role="status === 'warning' || status === 'error' ? 'alert' : 'status'"
+			:aria-live="status === 'warning' || status === 'error' ? 'assertive' : 'polite'"
 			@mouseenter="handleMouseenter"
 			@mouseleave="handleMouseleave"
 	>
@@ -51,7 +53,7 @@
 						/>
 					</template>
 					<template v-if="hasTitle">
-						<span class="origam-alert__title">
+						<span class="origam-alert__title" :style="typographyStyles">
 							<slot name="title">{{ title }}</slot>
 						</span>
 					</template>
@@ -109,9 +111,10 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, useSlots } from "vue";
 import { OrigamAvatar, OrigamBtn, OrigamIcon } from "../../components";
+import { vContrast } from "../../directives";
 import {
   useActive,
   useAdjacent,
@@ -124,7 +127,8 @@ import {
   useProps,
   useStateEffect,
   useStatus,
-  useStyle
+  useStyle,
+  useTypography
 } from "../../composables";
 import { DENSITY, MDI_ICONS } from "../../enums";
 const props = defineProps({
@@ -132,15 +136,14 @@ const props = defineProps({
   closeIcon: { type: null, required: false, default: MDI_ICONS.CLOSE },
   closeLabel: { type: String, required: false, default: "origam.close" },
   modelValue: { type: Boolean, required: false, default: true },
-  prominent: { type: Boolean, required: false },
   title: { type: String, required: false },
   text: { 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: "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 },
   border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
   borderTop: { type: [Boolean, Number, String], required: false },
   borderLeft: { type: [Boolean, Number, String], required: false },
@@ -190,11 +193,17 @@ 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 },
+  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 emits = defineEmits(["click:close", "update:modelValue", "update:hover"]);
+const emits = defineEmits(["update:modelValue", "click:close", "update:hover"]);
 const { filterProps } = useProps(props);
 const { t } = useLocale();
+const { typographyStyles } = useTypography(props, "alert__title");
 const slots = useSlots();
 const { activeClasses, isActive, activeState, onActive } = useActive(props, "modelValue");
 const { isHover, hoverState, onMouseenter: handleMouseenter, onMouseleave: handleMouseleave, hoverClasses } = useHover(props);
@@ -210,9 +219,7 @@ const handleClose = (e) => {
   onActive();
   emits("click:close", e);
 };
-const size = computed(() => {
-  return props.prominent ? 44 : 28;
-});
+const size = 28;
 const hasIcon = computed(() => {
   return !!icon.value;
 });
@@ -246,9 +253,6 @@ const alertStyles = computed(() => {
 const alertClasses = computed(() => {
   return [
     "origam-alert",
-    {
-      "origam-alert--prominent": props.prominent
-    },
     hoverClasses.value,
     activeClasses.value,
     statusClasses.value,
@@ -423,14 +427,6 @@ defineExpose({
 			--origam-alert---position: relative;
 		}
 
-		&--prominent {
-			grid-template-areas: "prepend content append close" "prepend content . .";
-
-			#{$this}__prepend {
-				--origam-alert__prepend---align-self: center;
-			}
-		}
-
 		&__close {
 			align-self: flex-start;
 			flex: 0 1 auto;

package/dist/src/components/App/OrigamApp.vue

@@ -4,6 +4,10 @@
 			ref="origamAppRef"
 			:class="appClasses"
 			:style="appStyles"
+			:color="color"
+			:bg-color="bgColor"
+			:full-height="fullHeight"
+			:overlaps="overlaps"
 	>
 		<template #default>
 			<slot name="default"/>
@@ -11,16 +15,18 @@
 	</origam-layout>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamLayout } from "../../components";
 import { useProps, useRtl, useStyle } from "../../composables";
 import { computed, ref, StyleValue } from "vue";
 const props = defineProps({
-  overlaps: { type: Array, required: false },
   fullHeight: { type: Boolean, required: false, default: true },
+  overlaps: { type: Array, 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 },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
 });
 const { filterProps } = useProps(props);
 const { rtlClasses } = useRtl();

package/dist/src/components/App/OrigamAppBar.vue

@@ -4,6 +4,7 @@
 			:class="appBarClasses"
 			:collapse="isCollapsed"
 			:flat="isFlat"
+			:active="toolbarActive"
 			:style="appBarStyles"
 			v-bind="toolbarProps"
 	>
@@ -45,16 +46,16 @@
 	</origam-toolbar>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamImg, OrigamToolbar } from "../../components";
 import {
-  useActive,
   useLayoutItem,
   useProps,
   useScroll,
   useSsrBoot,
   useStyle,
-  useToggleScope
+  useToggleScope,
+  useVModel
 } from "../../composables";
 import { BLOCK, DENSITY } from "../../enums";
 import { forwardRefs, int } from "../../utils";
@@ -64,7 +65,6 @@ const props = defineProps({
   image: { type: Object, required: false },
   collapse: { type: Boolean, required: false },
   flat: { type: Boolean, required: false },
-  floating: { type: Boolean, required: false },
   title: { type: String, required: false },
   modelValue: { type: Boolean, required: false, default: true },
   tag: { type: String, required: false, default: "header" },
@@ -87,8 +87,8 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
-  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 },
@@ -110,16 +110,17 @@ const props = defineProps({
   right: { type: [Number, String], required: false },
   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 },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, 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 },
   name: { type: String, required: false },
   order: { type: [String, Number], required: false },
-  absolute: { type: Boolean, required: false },
   scrollBehavior: { type: null, required: false },
   scrollTarget: { type: String, required: false },
   scrollThreshold: { type: [String, Number], required: false, default: 300 }
@@ -130,7 +131,7 @@ const { ssrBootStyles } = useSsrBoot();
 const slots = useSlots();
 const origamToolbarRef = ref();
 const toolbarProps = computed(() => {
-  return origamToolbarRef.value?.filterProps(props, ["class", "style", "collapse", "flat"]);
+  return origamToolbarRef.value?.filterProps(props, ["class", "style", "collapse", "flat", "floating", "active", "width", "minWidth", "maxWidth"]);
 });
 const hasImage = computed(() => {
   return !!(props.image || slots.img);
@@ -144,7 +145,7 @@ const hasContent = computed(() => {
 const hasAppend = computed(() => {
   return slots.append;
 });
-const { isActive, activeClasses } = useActive(props, "modelValue");
+const visible = useVModel(props, "modelValue");
 const scrollBehavior = computed(() => {
   const behavior = new Set(props.scrollBehavior?.split(" ") ?? []);
   return {
@@ -153,13 +154,17 @@ const scrollBehavior = computed(() => {
     inverted: behavior.has("inverted"),
     collapse: behavior.has("collapse"),
     elevate: behavior.has("elevate"),
+    // Engage the bar's `active` design-state once the page is scrolled
+    // (transparent at the top → painted/`--active` on scroll). Opt-in,
+    // like every other behaviour token.
+    active: behavior.has("active"),
     fadeImage: behavior.has("fade-image")
     // shrink: behavior.has('shrink'),
   };
 });
 const canScroll = computed(() => {
   const behavior = scrollBehavior.value;
-  return behavior.hide || behavior.inverted || behavior.collapse || behavior.elevate || behavior.fadeImage || !isActive.value;
+  return behavior.hide || behavior.inverted || behavior.collapse || behavior.elevate || behavior.active || behavior.fadeImage || !visible.value;
 });
 const {
   currentScroll,
@@ -171,15 +176,25 @@ useToggleScope(computed(() => !!props.scrollBehavior), () => {
   watchEffect(() => {
     if (scrollBehavior.value.hide) {
       if (scrollBehavior.value.inverted) {
-        isActive.value = currentScroll.value > scrollThreshold.value;
+        visible.value = currentScroll.value > scrollThreshold.value;
       } else {
-        isActive.value = isScrollingUp.value || currentScroll.value < scrollThreshold.value;
+        visible.value = isScrollingUp.value || currentScroll.value < scrollThreshold.value;
       }
     } else {
-      isActive.value = true;
+      visible.value = true;
     }
   });
 });
+const isScrolled = computed(() => currentScroll.value > 0);
+const isScrollActive = computed(() => scrollBehavior.value.active && isScrolled.value);
+const barActiveClasses = computed(() => {
+  return isScrollActive.value ? ["origam-app-bar--active"] : [];
+});
+const toolbarActive = computed(() => {
+  const override = props.active && typeof props.active === "object" ? props.active : void 0;
+  if (!scrollBehavior.value.active || !override) return props.active;
+  return isScrollActive.value ? { ...override, enabled: true } : false;
+});
 const isCollapsed = computed(() => props.collapse || scrollBehavior.value.collapse && (scrollBehavior.value.inverted ? scrollRatio.value > 0 : scrollRatio.value === 0));
 const isFlat = computed(() => props.flat || scrollBehavior.value.elevate && (scrollBehavior.value.inverted ? currentScroll.value > 0 : currentScroll.value === 0));
 const height = computed(() => {
@@ -202,8 +217,11 @@ const { layoutItemStyles } = useLayoutItem({
   position: toRef(props, "location"),
   layoutSize: height,
   elementSize: shallowRef(void 0),
-  active: isActive,
-  absolute: toRef(props, "absolute")
+  active: visible,
+  // `absolute` is not part of the AppBar surface (it only toggles
+  // absolute↔fixed and never scrolls the bar away). The layout defaults
+  // to fixed for the root bar.
+  absolute: shallowRef(void 0)
 });
 const appBarStyles = computed(() => {
   return [
@@ -216,7 +234,7 @@ const appBarClasses = computed(() => {
   return [
     "origam-app-bar",
     `origam-app-bar--${props.location}`,
-    activeClasses.value,
+    barActiveClasses.value,
     props.class
   ];
 });