origam 2.15.0 → 2.17.0

package/dist/src/components/Dialog/OrigamDialog.vue

@@ -1,11 +1,13 @@
 <template>
 	<origam-overlay
+			:id="id"
 			ref="origamOverlayRef"
 			v-model="isActive"
 			:activator-props="activatorProps"
 			:class="dialogClasses"
 			:style="dialogStyles"
 			v-bind="{...overlayProps, ...scopeId}"
+			@click:outside="handleClickOutside"
 	>
 			<template #activator="{props}">
 			<slot
@@ -22,6 +24,7 @@
 				<origam-card
 						ref="origamCardRef"
 						:aria-labelledby="dialogTitleId"
+						:title-id="dialogTitleId"
 						aria-modal="true"
 						role="dialog"
 						v-bind="cardProps"
@@ -40,12 +43,24 @@
 						<slot name="header"/>
 					</template>
 
-					<template #header-append>
+					<!--
+						#412 — the target names below (`#header.append`, …) address
+						`<OrigamCard>`'s OWN slots, which it reads as `slots['header.append']`
+						(point notation, `OrigamCard.vue:70`). Dialog's PUBLIC slot names
+						exposed to ITS OWN consumers stay dash-named (`<slot name="header-append">`
+						right below) — the two are independent identifiers: a named
+						template's target must match the CHILD's slot name, not whatever
+						name this component re-exposes upward. Pre-fix these were both
+						written as `#header-append` (dash) — a literal string that never
+						matched Card's `header.append`, so the five header zones (including
+						the default close button) were silently discarded. See #412.
+					-->
+					<template #header.append>
 						<slot name="header-append">
 							<origam-btn
 									:icon="MDI_ICONS.CLOSE"
 									:rounded="0"
-									aria-label="Close dialog"
+									:aria-label="t(closeLabel)"
 									bg-color="transparent"
 									@click="handleClose"
 							/>
@@ -54,7 +69,7 @@
 
 					<template
 							v-if="hasPrepend"
-							#header-prepend
+							#header.prepend
 					>
 						<slot name="header-prepend">
 							<origam-icon
@@ -68,7 +83,7 @@
 
 					<template
 							v-if="slots['header-title']"
-							#header-title
+							#header.title
 					>
 						<slot
 								name="header-title"
@@ -78,14 +93,14 @@
 
 					<template
 							v-if="slots['header-subtitle']"
-							#header-subtitle
+							#header.subtitle
 					>
 						<slot name="header-subtitle"/>
 					</template>
 
 					<template
 							v-if="slots['header-content']"
-							#header-content
+							#header.content
 					>
 						<slot name="header-content"/>
 					</template>
@@ -126,25 +141,29 @@
 
 <script lang="ts" setup>
 import { computed, mergeProps, nextTick, ref, StyleValue, useSlots, watch } from "vue";
-import { getUid } from "../../utils";
-import { OrigamBtn, OrigamCard, OrigamIcon, OrigamOverlay, OrigamTranslateScale } from "../../components";
-import {
-  useProps,
-  useScopeId,
-  useSize,
-  useStatus,
-  useStyle,
-  useVModel
-} from "../../composables";
-import { IN_BROWSER } from "../../consts";
-import { vIntersect } from "../../directives";
-import { MDI_ICONS } from "../../enums";
-import { focusableChildren, forwardRefs } from "../../utils";
+import { getUid } from "../../utils/Commons/getCurrentInstance.util";
+import OrigamBtn from "../Btn/OrigamBtn.vue";
+import OrigamCard from "../Card/OrigamCard.vue";
+import OrigamIcon from "../Icon/OrigamIcon.vue";
+import OrigamOverlay from "../Overlay/OrigamOverlay.vue";
+import OrigamTranslateScale from "../Transition/OrigamTranslateScale.vue";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useScopeId } from "../../composables/Commons/scopeId.composable";
+import { useSize } from "../../composables/Commons/size.composable";
+import { useStatus } from "../../composables/Commons/status.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useVModel } from "../../composables/Commons/vModel.composable";
+import { IN_BROWSER } from "../../consts/Commons/commons.const";
+import vIntersect from "../../directives/Intersect/intersect.directive";
+import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
+import { focusableChildren } from "../../utils/Commons/commons.util";
+import { forwardRefs } from "../../utils/Commons/forwardRefs.util";
 const props = defineProps({
   fullscreen: { type: Boolean, required: false },
   retainFocus: { type: Boolean, required: false, default: true },
-  scrollable: { type: Boolean, required: false },
   size: { type: null, required: false },
+  closeLabel: { type: String, required: false, default: "origam.close" },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
@@ -193,6 +212,7 @@ const props = defineProps({
   text: { type: [String, Number], required: false },
   title: { type: [String, Number], required: false },
   type: { type: null, required: false },
+  titleId: { type: String, required: false },
   tag: { type: String, required: false },
   border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
   borderTop: { type: [Boolean, Number, String], required: false },
@@ -257,6 +277,7 @@ defineSlots();
 const { filterProps } = useProps(props);
 const isActive = useVModel(props, "modelValue");
 const { scopeId } = useScopeId();
+const { t } = useLocale();
 const slots = useSlots();
 const uid = getUid();
 const dialogTitleId = computed(() => `origam-dialog-title-${uid}`);
@@ -320,6 +341,9 @@ const cardProps = computed(() => {
 const handleClose = () => {
   isActive.value = false;
 };
+const handleClickOutside = (e) => {
+  emits("click:outside", e);
+};
 const handleIntersect = (_isIntersecting, entries) => {
   if (entries[entries.length - 1].isIntersecting) {
     emits("isRead", true);
@@ -334,15 +358,14 @@ const dialogClasses = computed(() => {
   return [
     "origam-dialog",
     {
-      "origam-dialog--fullscreen": props.fullscreen,
-      "origam-dialog--scrollable": props.scrollable
+      "origam-dialog--fullscreen": props.fullscreen
     },
     sizeClasses.value,
     statusClasses.value,
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(dialogStyles);
+const { id, css, load, isLoaded, unload } = useStyle(dialogStyles, () => props.id);
 defineExpose(forwardRefs({
   filterProps,
   css,

package/dist/src/components/Dialog/OrigamDialogConfirmation.vue

@@ -1,5 +1,6 @@
 <template>
 	<origam-dialog
+			:id="id"
 			ref="origamDialogRef"
 			v-model="isActive"
 			v-bind="dialogProps"
@@ -99,7 +100,7 @@
 						<origam-col cols="auto">
 							<origam-btn
 									v-if="cancellable"
-									text="Cancel"
+									:text="cancelText"
 									@click="handleCancel"
 							/>
 						</origam-col>
@@ -107,7 +108,7 @@
 						<origam-col cols="auto">
 							<origam-btn
 									:disabled="!validatable"
-									text="Validate"
+									:text="validateText"
 									@click="handleValidate"
 							/>
 						</origam-col>
@@ -120,15 +121,23 @@
 
 <script lang="ts" setup>
 import { computed, ref, useSlots } from "vue";
-import { OrigamBtn, OrigamCol, OrigamContainer, OrigamDialog, OrigamRow } from "../../components";
-import { useProps, useVModel } from "../../composables";
-import { JUSTIFY } from "../../enums";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import OrigamBtn from "../Btn/OrigamBtn.vue";
+import OrigamCol from "../Grids/OrigamCol.vue";
+import OrigamContainer from "../Grids/OrigamContainer.vue";
+import OrigamDialog from "./OrigamDialog.vue";
+import OrigamRow from "../Grids/OrigamRow.vue";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useVModel } from "../../composables/Commons/vModel.composable";
+import { JUSTIFY } from "../../enums/Commons/justify.enum";
 const props = defineProps({
   cancellable: { type: Boolean, required: false, default: true },
+  cancelTextKey: { type: String, required: false, default: "origam.dialog.confirmation.cancel" },
+  validateTextKey: { type: String, required: false, default: "origam.dialog.confirmation.validate" },
   fullscreen: { type: Boolean, required: false },
   retainFocus: { type: Boolean, required: false },
-  scrollable: { type: Boolean, required: false },
   size: { type: null, required: false },
+  closeLabel: { 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 },
@@ -177,6 +186,7 @@ const props = defineProps({
   text: { type: [String, Number], required: false },
   title: { type: [String, Number], required: false },
   type: { type: null, required: false },
+  titleId: { type: String, required: false },
   tag: { type: String, required: false },
   border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
   borderTop: { type: [Boolean, Number, String], required: false },
@@ -236,7 +246,10 @@ const props = defineProps({
   statusIconPosition: { type: null, required: false },
   icon: { type: null, required: false }
 });
-const emits = defineEmits(["validate", "cancel"]);
+const emits = defineEmits(["validate", "cancel", "update:modelValue"]);
+const { t } = useLocale();
+const cancelText = computed(() => t(props.cancelTextKey));
+const validateText = computed(() => t(props.validateTextKey));
 defineSlots();
 const { filterProps } = useProps(props);
 const origamDialogRef = ref();

package/dist/src/components/Divider/OrigamDivider.vue

@@ -1,5 +1,6 @@
 <template>
 	<hr
+			:id="id"
 			:aria-orientation="dividerOrientation"
 			:class="dividerClasses"
 			:role="dividerRole"
@@ -9,14 +10,12 @@
 
 <script lang="ts" setup>
 import { computed, StyleValue, toRef, useAttrs } from "vue";
-import {
-  useBothColor,
-  useMargin,
-  useProps,
-  useStyle
-} from "../../composables";
-import { DIRECTION } from "../../enums";
-import { convertToUnit } from "../../utils";
+import { useBothColor } from "../../composables/Commons/bothColor.composable";
+import { useMargin } from "../../composables/Commons/margin.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { DIRECTION } from "../../enums/Commons/direction.enum";
+import { convertToUnit } from "../../utils/Commons/commons.util";
 const attrs = useAttrs();
 const props = defineProps({
   inset: { type: Boolean, required: false },
@@ -37,6 +36,8 @@ const props = defineProps({
   direction: { type: null, required: false, default: DIRECTION.HORIZONTAL }
 });
 const { filterProps } = useProps(props);
+defineEmits([]);
+defineSlots();
 const dividerOrientation = computed(() => {
   return !attrs.role || attrs.role === "separator" ? props.direction : void 0;
 });
@@ -71,7 +72,7 @@ const dividerStyles = computed(() => {
   }
   return styles;
 });
-const { id, css, load, isLoaded, unload } = useStyle(dividerStyles);
+const { id, css, load, isLoaded, unload } = useStyle(dividerStyles, () => props.id);
 defineExpose({
   filterProps,
   css,
@@ -91,18 +92,23 @@ defineExpose({
 		max-width: var(--origam-divider---max-width, 100%);
 		opacity: var(--origam-divider---opacity, 0.12);
 		transition: inherit;
-		border-style: solid;
+		border-style: var(--origam-divider---border-style, solid);
 
-		border-top-width: var(--origam-divider---border-top-width, thin);
+		border-top-width: var(--origam-divider---border-top-width, var(--origam-divider---thickness, thin));
 		border-right-width: 0;
 		border-bottom-width: 0;
 		border-left-width: 0;
 		margin: 0;
+		margin-block: var(--origam-divider---margin-block, 0);
+		padding-block-start: var(--origam-divider---padding-block-start, 0);
+		padding-block-end: var(--origam-divider---padding-block-end, 0);
+		padding-inline-start: var(--origam-divider---padding-inline-start, 0);
+		padding-inline-end: var(--origam-divider---padding-inline-end, 0);
 
 		&--vertical {
 			align-self: stretch;
 			border-top-width: 0;
-			border-right-width: var(--origam-divider---border-right-width, thin);
+			border-right-width: var(--origam-divider---border-right-width, var(--origam-divider---thickness, thin));
 			border-bottom-width: 0;
 			border-left-width: 0;
 			display: inline-flex;

package/dist/src/components/Drawer/OrigamDrawer.vue

@@ -8,8 +8,9 @@
 			<component
 					:is="tag"
 					v-if="isActive"
+					:id="id"
 					:ref="rootEl"
-					:aria-label="props.name || 'Navigation'"
+					:aria-label="drawerAriaLabel"
 					:class="drawerClasses"
 					:style="drawerStyles"
 					v-bind="{...scopeId, ...$attrs}"
@@ -68,26 +69,25 @@ import {
   useSlots,
   watch
 } from "vue";
-import { OrigamOverlayScrim, OrigamTransition } from "../../components";
-import {
-  useActive,
-  useBackgroundColor,
-  useDensity,
-  useHover,
-  useLayoutItem,
-  useProps,
-  useRouter,
-  useScopeId,
-  useSsrBoot,
-  useStateEffect,
-  useSticky,
-  useStyle,
-  useToggleScope,
-  useTouch,
-  useVModel
-} from "../../composables";
-import { INLINE } from "../../enums";
-import { int } from "../../utils";
+import OrigamOverlayScrim from "../Overlay/OrigamOverlayScrim.vue";
+import OrigamTransition from "../Transition/OrigamTransition.vue";
+import { useBackgroundColor } from "../../composables/Commons/backgroundColor.composable";
+import { useDensity } from "../../composables/Commons/density.composable";
+import { useLayoutItem } from "../../composables/Commons/layoutItem.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useRouter } from "../../composables/Commons/router.composable";
+import { useScopeId } from "../../composables/Commons/scopeId.composable";
+import { useSsrBoot } from "../../composables/Commons/ssrBoot.composable";
+import { useStateEffect } from "../../composables/Commons/stateEffect.composable";
+import { useStateFlag } from "../../composables/Commons/stateFlag.composable";
+import { useSticky } from "../../composables/Commons/sticky.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useToggleScope } from "../../composables/Commons/toggleScope.composable";
+import { useTouch } from "../../composables/Commons/touch.composable";
+import { useVModel } from "../../composables/Commons/vModel.composable";
+import { INLINE } from "../../enums/Commons/anchor.enum";
+import { int } from "../../utils/Commons/commons.util";
 const props = defineProps({
   disableResizeWatcher: { type: Boolean, required: false },
   disableRouteWatcher: { type: Boolean, required: false },
@@ -148,19 +148,19 @@ const props = defineProps({
   marginBlock: { type: [Boolean, Number, String], required: false },
   marginInline: { type: [Boolean, Number, String], required: false },
   transition: { type: [Boolean, String, Object], required: false, default: "origam-transition--drawer" },
-  disabled: { type: Boolean, required: false },
   scrim: { type: [Boolean, String], required: false, default: true },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
-  hover: { type: [Boolean, Object], required: false }
+  hover: { type: [Boolean, Object], required: false },
+  hoverClass: { type: String, required: false }
 });
-const emits = defineEmits(["update:rail"]);
+const emits = defineEmits(["update:rail", "update:modelValue"]);
 defineSlots();
 const { filterProps } = useProps(props);
 const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, "bgColor"));
 const { densityClasses } = useDensity(props);
-const { isHover, hoverState } = useHover(props);
-const { activeState } = useActive(props);
+const { isOn: isHover, config: hoverState } = useStateFlag(props, { state: "hover" });
+const { config: activeState } = useStateFlag(props, { state: "active" });
 const isActive = useVModel(props, "modelValue", false, (v) => !!v);
 const {
   borderClasses,
@@ -177,10 +177,11 @@ const slots = useSlots();
 const router = useRouter();
 const { ssrBootStyles } = useSsrBoot();
 const { scopeId } = useScopeId();
+const { t } = useLocale();
 const rootEl = ref();
 const isHovering = shallowRef(false);
 const width = computed(() => {
-  return props.rail && props.expandOnHover && isHovering.value ? Number(props.width) : Number(props.rail ? props.railWidth : props.width);
+  return props.rail && props.expandOnHover && isHovering.value ? int(props.width) : int(props.rail ? props.railWidth : props.width);
 });
 const location = computed(() => {
   return props.location;
@@ -214,7 +215,7 @@ const { isDragging, dragProgress, dragStyles } = useTouch({
 });
 const layoutSize = computed(() => {
   if (!isPushing.value) return 0;
-  const size = isTemporary.value ? 0 : props.rail && props.expandOnHover ? Number(props.railWidth) : width.value;
+  const size = isTemporary.value ? 0 : props.rail && props.expandOnHover ? int(props.railWidth) : width.value;
   return isDragging.value ? size * dragProgress.value : size;
 });
 const isPushing = computed(() => {
@@ -280,6 +281,7 @@ const hasContent = computed(() => {
 const hasAppend = computed(() => {
   return slots.append;
 });
+const drawerAriaLabel = computed(() => props.name || t("origam.drawer.aria_label"));
 const drawerStyles = computed(() => {
   return [
     backgroundColorStyles.value,
@@ -317,7 +319,7 @@ const drawerClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(drawerStyles);
+const { id, css, load, isLoaded, unload } = useStyle(drawerStyles, () => props.id);
 defineExpose({
   filterProps,
   css,
@@ -347,7 +349,7 @@ defineExpose({
 		transition-timing-function: var(--origam-drawer---transition-timing-function);
 
 		position: var(--origam-layout---position, var(--origam-drawer---position));
-		z-index: var(--origam-layout---zIndex, 1000);
+		z-index: var(--origam-layout---zIndex, var(--origam-drawer---z-index, 1000));
 
 		border-color: var(--origam-drawer---border-color);
 		border-style: var(--origam-drawer---border-style);
@@ -365,34 +367,35 @@ defineExpose({
 		color: var(--origam-drawer---color);
 
 		&--border {
-			--origam-drawer---border-top-width: thin;
-			--origam-drawer---border-right-width: thin;
-			--origam-drawer---border-bottom-width: thin;
-			--origam-drawer---border-left-width: thin;
+			--origam-drawer---border-top-width: var(--origam-drawer__border---border-width, thin);
+			--origam-drawer---border-right-width: var(--origam-drawer__border---border-width, thin);
+			--origam-drawer---border-bottom-width: var(--origam-drawer__border---border-width, thin);
+			--origam-drawer---border-left-width: var(--origam-drawer__border---border-width, thin);
+			--origam-drawer---box-shadow: var(--origam-drawer__border---box-shadow, var(--origam-shadow---none));
 		}
 
 		&--top {
 			top: 0;
-			--origam-drawer---border-bottom-width: thin;
+			--origam-drawer---border-bottom-width: var(--origam-drawer__top---border-bottom-width, thin);
 		}
 
 		&--bottom {
 			left: 0;
-			--origam-drawer---border-top-width: thin;
+			--origam-drawer---border-top-width: var(--origam-drawer__bottom---border-top-width, thin);
 		}
 
 		&--left {
 			top: 0;
 			left: 0;
 			right: auto;
-			--origam-drawer---border-right-width: thin;
+			--origam-drawer---border-right-width: var(--origam-drawer__left---border-right-width, thin);
 		}
 
 		&--right {
 			top: 0;
 			left: auto;
 			right: 0;
-			--origam-drawer---border-left-width: thin;
+			--origam-drawer---border-left-width: var(--origam-drawer__right---border-left-width, thin);
 		}
 
 		&--floating {
@@ -400,12 +403,12 @@ defineExpose({
 		}
 
 		&--temporary {
-			--origam-drawer---box-shadow: var(--origam-shadow---lg);
+			--origam-drawer---box-shadow: var(--origam-drawer__temporary---box-shadow, var(--origam-shadow---lg));
 		}
 
 		&--sticky {
-			--origam-drawer---height: auto;
-			--origam-drawer---transition-property: box-shadow, transform, visibility, width, height, left, right;
+			--origam-drawer---height: var(--origam-drawer__sticky---height, auto);
+			--origam-drawer---transition-property: var(--origam-drawer__sticky---transition-property, box-shadow, transform, visibility, width, height, left, right);
 		}
 
 		&:deep(.origam-list) {
@@ -413,20 +416,20 @@ defineExpose({
 		}
 
 		&__content {
-			flex: 0 1 auto;
-			height: 100%;
-			max-width: 100%;
-			overflow-x: hidden;
-			overflow-y: auto;
+			flex: var(--origam-drawer__content---flex, 0 1 auto);
+			height: var(--origam-drawer__content---height, 100%);
+			max-width: var(--origam-drawer__content---max-width, 100%);
+			overflow-x: var(--origam-drawer__content---overflow-x, hidden);
+			overflow-y: var(--origam-drawer__content---overflow-y, auto);
 		}
 
 		&__img {
-			height: 100%;
+			height: var(--origam-drawer__img---height, 100%);
 			left: 0;
-			position: absolute;
+			position: var(--origam-drawer__img---position, absolute);
 			top: 0;
-			width: 100%;
-			z-index: -1;
+			width: var(--origam-drawer__img---width, 100%);
+			z-index: var(--origam-drawer__img---z-index, -1);
 
 			img {
 				height: inherit;
@@ -446,7 +449,7 @@ defineExpose({
 			transition-property: var(--origam-drawer__scrim---transition-property, opacity);
 			transition-duration: var(--origam-drawer__scrim---transition-duration, var(--origam-motion__duration---medium));
 			transition-timing-function: var(--origam-drawer__scrim---transition-timing-function, var(--origam-motion__easing---standard));
-			z-index: var(--origam-drawer__scrim---z-index, var(--origam-z-index-raised));
+			z-index: var(--origam-drawer__scrim---z-index, var(--origam-zIndex---raised));
 		}
 
 		&__prepend,

package/dist/src/components/EmptyState/OrigamEmptyState.vue

@@ -1,6 +1,7 @@
 <template>
 	<component
 			:is="tag"
+			:id="id"
 			:class="emptyStateClasses"
 			:style="emptyStateStyles"
 			role="status"
@@ -54,26 +55,26 @@ import {
   useSlots
 } from "vue";
 import { OrigamIcon } from "../Icon";
-import { useTypography } from "../../composables";
+import { useTypography } from "../../composables/Commons/typography.composable";
 import { EMPTY_STATE_PRESET_CONFIG } from "../../consts/EmptyState/empty-state.const";
 const props = defineProps({
-  preset: { type: String, required: false, default: "no-data" },
+  preset: { type: null, required: false, default: "no-data" },
   title: { type: String, required: false },
   description: { type: String, required: false },
   icon: { type: null, required: false },
   iconColor: { type: null, required: false },
   size: { type: String, required: false, default: "md" },
-  align: { type: String, required: false, default: "center" },
+  align: { type: null, required: false, default: "center" },
   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" },
-  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 }
+  fontFamily: { type: null, required: false },
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, required: false },
+  lineHeight: { type: null, required: false }
 });
+defineEmits([]);
 defineSlots();
 const slots = useSlots();
 const presetConfig = computed(() => EMPTY_STATE_PRESET_CONFIG[props.preset]);
@@ -137,6 +138,7 @@ defineExpose({
 		color: var(--origam-empty-state---resolved-icon-color);
 		font-size: var(--origam-empty-state---resolved-icon-size);
 		line-height: 1;
+		margin-bottom: var(--origam-empty-state__icon---margin-bottom, 0);
 	}
 
 	.origam-empty-state__icon-glyph {