origam 2.16.0 → 2.17.0

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

@@ -1,133 +1,140 @@
 <template>
-	<component
-			:is="tag"
-			:id="id"
-			v-contrast
-			:class="alertClasses"
-			:role="isUrgentStatus ? 'alert' : 'status'"
-			:aria-live="isUrgentStatus ? 'assertive' : 'polite'"
-			@mouseenter="handleMouseenter"
-			@mouseleave="handleMouseleave"
-	>
+  <component
+    :is="tag"
+    v-if="isActive"
+    :id="id"
+    v-contrast
+    :class="alertClasses"
+    :role="isUrgentStatus ? 'alert' : 'status'"
+    :aria-live="isUrgentStatus ? 'assertive' : 'polite'"
+    @mouseenter="handleMouseenter"
+    @mouseleave="handleMouseleave"
+  >
     <span
-		    key="underlay"
-		    class="origam-alert__underlay"
+      key="underlay"
+      class="origam-alert__underlay"
     />
 
-		<slot name="wrapper">
-			<template v-if="hasPrepend">
-				<div
-						key="prepend"
-						class="origam-alert__prepend"
-						@click="handleClickPrepend"
-				>
-					<slot name="prepend">
-						<origam-avatar
-								v-if="prependAvatar"
-								key="prepend-avatar"
-								:density="density"
-								:image="prependAvatar"
-						/>
-						<origam-icon
-								v-if="prependIcon"
-								key="prepend-icon"
-								:density="density"
-								:icon="prependIcon"
-						/>
-					</slot>
-				</div>
-			</template>
-
-			<div class="origam-alert__content">
-				<div
-						v-if="hasHeader"
-						class="origam-alert__header"
-				>
-					<template v-if="hasIcon">
-						<origam-icon
-								key="content-icon"
-								:icon="icon"
-						/>
-					</template>
-					<template v-if="hasTitle">
+    <slot name="wrapper">
+      <template v-if="hasPrepend">
+        <div
+          key="prepend"
+          class="origam-alert__prepend"
+          :role="isPrependClickable ? 'button' : undefined"
+          :tabindex="isPrependClickable ? 0 : undefined"
+          @click="handleClickPrepend"
+          @keydown="handleKeydownPrepend"
+        >
+          <slot name="prepend">
+            <origam-avatar
+              v-if="prependAvatar"
+              key="prepend-avatar"
+              :density="density"
+              :image="prependAvatar"
+            />
+            <origam-icon
+              v-if="prependIcon"
+              key="prepend-icon"
+              :density="density"
+              :icon="prependIcon"
+            />
+          </slot>
+        </div>
+      </template>
+
+      <div class="origam-alert__content">
+        <div
+          v-if="hasHeader"
+          class="origam-alert__header"
+        >
+          <template v-if="hasIcon">
+            <origam-icon
+              key="content-icon"
+              :icon="icon"
+            />
+          </template>
+          <template v-if="hasTitle">
 						<span class="origam-alert__title" :style="typographyStyles">
 							<slot name="title">{{ title }}</slot>
 						</span>
-					</template>
-				</div>
-
-				<div class="origam-alert__body">
-					<slot name="text">{{ text }}</slot>
-				</div>
-
-				<slot name="default"/>
-			</div>
-
-			<template v-if="hasAppend">
-				<div
-						key="append"
-						class="origam-alert__append"
-						@click="handleClickAppend"
-				>
-					<slot name="append">
-						<origam-avatar
-								v-if="appendAvatar"
-								key="append-avatar"
-								:density="density"
-								:image="appendAvatar"
-						/>
-						<origam-icon
-								v-if="appendIcon"
-								key="append-icon"
-								:density="density"
-								:icon="appendIcon"
-						/>
-					</slot>
-				</div>
-			</template>
-		</slot>
-
-		<div
-				v-if="hasClose"
-				key="close"
-				class="origam-alert__close"
-		>
-			<slot name="close">
-				<origam-btn
-						key="close-btn"
-						:aria-label="t(closeLabel)"
-						:icon="closeIcon"
-						data-cy="close"
-						size="x-small"
-						@click="handleClose"
-				/>
-			</slot>
-		</div>
-	</component>
+          </template>
+        </div>
+
+        <div class="origam-alert__body">
+          <slot name="text">{{ text }}</slot>
+        </div>
+
+        <slot name="default"/>
+      </div>
+
+      <template v-if="hasAppend">
+        <div
+          key="append"
+          class="origam-alert__append"
+          :role="isAppendClickable ? 'button' : undefined"
+          :tabindex="isAppendClickable ? 0 : undefined"
+          @click="handleClickAppend"
+          @keydown="handleKeydownAppend"
+        >
+          <slot name="append">
+            <origam-avatar
+              v-if="appendAvatar"
+              key="append-avatar"
+              :density="density"
+              :image="appendAvatar"
+            />
+            <origam-icon
+              v-if="appendIcon"
+              key="append-icon"
+              :density="density"
+              :icon="appendIcon"
+            />
+          </slot>
+        </div>
+      </template>
+    </slot>
+
+    <div
+      v-if="hasClose"
+      key="close"
+      class="origam-alert__close"
+    >
+      <slot name="close">
+        <origam-btn
+          key="close-btn"
+          :aria-label="t(closeLabel)"
+          :icon="closeIcon"
+          data-cy="close"
+          size="x-small"
+          @click="handleClose"
+        />
+      </slot>
+    </div>
+  </component>
 </template>
 
 <script lang="ts" setup>
 import { computed, useSlots } from "vue";
-import { OrigamAvatar, OrigamBtn, OrigamIcon } from "../../components";
-import { vContrast } from "../../directives";
-import {
-  useActive,
-  useAdjacent,
-  useDefaults,
-  useDensity,
-  useDimension,
-  useHover,
-  useLocale,
-  useLocation,
-  usePosition,
-  useProps,
-  useStateEffect,
-  useStatus,
-  useStyle,
-  useTypography
-} from "../../composables";
-import { DENSITY, MDI_ICONS, STATUS } from "../../enums";
-const _props = defineProps({
+import OrigamAvatar from "../Avatar/OrigamAvatar.vue";
+import OrigamBtn from "../Btn/OrigamBtn.vue";
+import OrigamIcon from "../Icon/OrigamIcon.vue";
+import vContrast from "../../directives/Contrast/contrast.directive";
+import { useAdjacent } from "../../composables/Commons/adjacent.composable";
+import { useDensity } from "../../composables/Commons/density.composable";
+import { useDimension } from "../../composables/Commons/dimension.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useLocation } from "../../composables/Commons/location.composable";
+import { usePosition } from "../../composables/Commons/position.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStateEffect } from "../../composables/Commons/stateEffect.composable";
+import { useStateFlag } from "../../composables/Commons/stateFlag.composable";
+import { useStatus } from "../../composables/Commons/status.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useTypography } from "../../composables/Commons/typography.composable";
+import { DENSITY } from "../../enums/Commons/density.enum";
+import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
+import { STATUS } from "../../enums/Commons/status.enum";
+const props = defineProps({
   closable: { type: Boolean, required: false },
   closeIcon: { type: null, required: false, default: MDI_ICONS.CLOSE },
   closeLabel: { type: String, required: false, default: "origam.close" },
@@ -190,30 +197,52 @@ const _props = defineProps({
   statusIconPosition: { type: null, required: false },
   icon: { type: null, required: false },
   hover: { type: [Boolean, Object], required: false, default: true },
+  hoverClass: { type: String, required: false },
   appendAvatar: { type: String, required: false },
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
-  fontFamily: { type: null, required: false },
   fontSize: { type: null, required: false },
   fontWeight: { type: null, required: false },
   lineHeight: { type: null, required: false },
   letterSpacing: { type: null, required: false }
 });
-const props = useDefaults(_props);
 const emits = defineEmits(["update:modelValue", "click:close", "update:hover"]);
 defineSlots();
 const slots = useSlots();
 const { filterProps } = useProps(props);
 const { t } = useLocale();
 const { typographyStyles } = useTypography(props, "alert__title");
-const { activeClasses, isActive, activeState, onActive } = useActive(props, "modelValue");
-const { isHover, hoverState, onMouseenter: handleMouseenter, onMouseleave: handleMouseleave, hoverClasses } = useHover(props);
-const { colorClasses, colorStyles, borderClasses, borderStyles, roundedClasses, roundedStyles, elevationClasses, elevationStyles, paddingClasses, paddingStyles, marginClasses, marginStyles } = useStateEffect(props, isHover, isActive, hoverState, activeState);
+const { classes: activeClasses, isOn: isActive, config: activeState, toggle: onActive } = useStateFlag(props, { state: "active", source: "modelValue" });
+const {
+  isOn: isHover,
+  config: hoverState,
+  set: handleMouseenter,
+  unset: handleMouseleave,
+  classes: hoverClasses
+} = useStateFlag(props, { state: "hover" });
+const {
+  colorClasses,
+  colorStyles,
+  borderClasses,
+  borderStyles,
+  roundedClasses,
+  roundedStyles,
+  elevationClasses,
+  elevationStyles,
+  paddingClasses,
+  paddingStyles,
+  marginClasses,
+  marginStyles
+} = useStateEffect(props, isHover, isActive, hoverState, activeState);
 const { icon, prependIcon, appendIcon, statusClasses } = useStatus(props);
 const {
   onClickPrepend: handleClickPrepend,
   onClickAppend: handleClickAppend,
+  onKeydownPrepend: handleKeydownPrepend,
+  onKeydownAppend: handleKeydownAppend,
+  isPrependClickable,
+  isAppendClickable,
   hasAppend,
   hasPrepend
 } = useAdjacent(props, prependIcon, appendIcon);
@@ -271,7 +300,7 @@ const alertClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(alertStyles);
+const { id, css, load, isLoaded, unload } = useStyle(alertStyles, () => props.id);
 defineExpose({
   filterProps,
   css,
@@ -283,228 +312,250 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
-	.origam-alert {
-		$this: &;
-
-		display: grid;
-		flex: 1 1;
-		grid-template-areas: "prepend content append close" ". content . .";
-		grid-template-columns: max-content auto max-content max-content;
-		overflow: hidden;
-		position: var(--origam-alert---position);
-
-		padding-block-start: calc(var(--origam-alert---padding-block-start) - var(--origam-alert---density));
-		padding-block-end: calc(var(--origam-alert---padding-block-end) - var(--origam-alert---density));
-		padding-inline-start: calc(var(--origam-alert---padding-inline-start) - var(--origam-alert---density));
-		padding-inline-end: calc(var(--origam-alert---padding-inline-end) - var(--origam-alert---density));
-		margin-block-start: var(--origam-alert---margin-block-start);
-		margin-block-end: var(--origam-alert---margin-block-end);
-		margin-inline-start: var(--origam-alert---margin-inline-start);
-		margin-inline-end: var(--origam-alert---margin-inline-end);
-
-		border-top-width: var(--origam-alert---border-top-width, var(--origam-alert---border-width, 0));
-		border-right-width: var(--origam-alert---border-right-width, var(--origam-alert---border-width, 0));
-		border-bottom-width: var(--origam-alert---border-bottom-width, var(--origam-alert---border-width, 0));
-		border-left-width: var(--origam-alert---border-left-width, var(--origam-alert---border-width, 0));
-		border-style: var(--origam-alert---border-style);
-		border-color: var(--origam-alert---border-color);
-		border-radius: var(--origam-alert---border-radius);
-
-		background-color: var(--origam-alert---background-color);
-		color: var(--origam-alert---color);
-
-		@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
-			backdrop-filter: var(--origam-alert---backdrop-filter, none);
-			-webkit-backdrop-filter: var(--origam-alert---backdrop-filter, none);
-		}
-
-		&--elevated {
-			box-shadow: var(--origam-alert---box-shadow-elevated, var(--origam-shadow---md));
-		}
-
-		&--border {
-			&#{$this}--border-left {
-				--origam-alert---border-left-width: calc(24px - var(--origam-alert---density));
-
-				#{$this}__underlay {
-					--origam-alert__underlay---border-top-left-radius: 0;
-					--origam-alert__underlay---border-bottom-left-radius: 0;
-				}
-			}
-
-			&#{$this}--border-right {
-				--origam-alert---border-right-width: calc(24px - var(--origam-alert---density));
-
-				#{$this}__underlay {
-					--origam-alert__underlay---border-top-right-radius: 0;
-					--origam-alert__underlay---border-bottom-right-radius: 0;
-				}
-			}
-
-			&#{$this}--border-top {
-				--origam-alert---border-top-width: calc(24px - var(--origam-alert---density));
-
-				#{$this}__underlay {
-					--origam-alert__underlay---border-top-left-radius: 0;
-					--origam-alert__underlay---border-top-right-radius: 0;
-				}
-			}
-
-			&#{$this}--border-bottom {
-				--origam-alert---border-bottom-width: calc(24px - var(--origam-alert---density));
-
-				#{$this}__underlay {
-					--origam-alert__underlay---border-bottom-left-radius: 0;
-					--origam-alert__underlay---border-bottom-right-radius: 0;
-				}
-			}
-		}
-
-		&--rounded {
-			--origam-alert---border-radius: var(--origam-radius---2xl, 24px);
-		}
-
-		&--rounded-x-small {
-			--origam-alert---border-radius: var(--origam-radius---xs, 2px);
-		}
-
-		&--rounded-small {
-			--origam-alert---border-radius: var(--origam-radius---sm, 4px);
-		}
-
-		&--rounded-default {
-			--origam-alert---border-radius: var(--origam-radius---md, 8px);
-		}
-
-		&--rounded-medium {
-			--origam-alert---border-radius: var(--origam-radius---lg, 12px);
-		}
-
-		&--rounded-large {
-			--origam-alert---border-radius: var(--origam-radius---xl, 16px);
-		}
-
-		&--rounded-x-large {
-			--origam-alert---border-radius: var(--origam-radius---2xl, 24px);
-		}
-
-		&--density-comfortable {
-			--origam-alert---density: -8px;
-		}
-
-		&--density-default {
-			--origam-alert---density: 0px;
-		}
-
-		&--density-compact {
-			--origam-alert---density: 8px;
-		}
-
-		&--warning {
-			--origam-alert---background-color: var(--origam-alert--warning---bg, var(--origam-color__feedback--warning---bg, rgb(251, 140, 0)));
-			--origam-alert---color: var(--origam-alert--warning---fg, var(--origam-color__feedback--warning---fg, #ffffff));
-		}
-
-		&--success {
-			--origam-alert---background-color: var(--origam-alert--success---bg, var(--origam-color__feedback--success---bg, rgb(76, 175, 80)));
-			--origam-alert---color: var(--origam-alert--success---fg, var(--origam-color__feedback--success---fg, #ffffff));
-		}
-
-		&--info {
-			--origam-alert---background-color: var(--origam-alert--info---bg, var(--origam-color__feedback--info---bg, rgb(33, 150, 243)));
-			--origam-alert---color: var(--origam-alert--info---fg, var(--origam-color__feedback--info---fg, #ffffff));
-		}
-
-		&--error {
-			--origam-alert---background-color: var(--origam-alert--danger---bg, var(--origam-color__feedback--danger---bg, rgb(207, 102, 121)));
-			--origam-alert---color: var(--origam-alert--danger---fg, var(--origam-color__feedback--danger---fg, #ffffff));
-		}
-
-		&--absolute {
-			--origam-alert---position: absolute;
-		}
-
-		&--fixed {
-			--origam-alert---position: fixed;
-		}
-
-		&--sticky {
-			--origam-alert---position: sticky;
-		}
-
-		&--relative {
-			--origam-alert---position: relative;
-		}
-
-		&__close {
-			align-self: flex-start;
-			flex: 0 1 auto;
-			grid-area: close;
-			padding-block-start: var(--origam-alert__close---padding-block-start);
-			padding-block-end: var(--origam-alert__close---padding-block-end);
-			padding-inline-start: var(--origam-alert__close---padding-inline-start);
-			padding-inline-end: var(--origam-alert__close---padding-inline-end);
-			margin-block-start: var(--origam-alert__close---margin-block-start);
-			margin-block-end: var(--origam-alert__close---margin-block-end);
-			margin-inline-start: calc(var(--origam-alert__close---margin-inline-start) - var(--origam-alert---density));
-			margin-inline-end: var(--origam-alert__close---margin-inline-end);
-		}
-
-		&__content {
-			align-self: center;
-			grid-area: content;
-			overflow: hidden;
-		}
-
-		&__append {
-			align-self: flex-start;
-			display: flex;
-			grid-area: append;
-			align-items: var(--origam-alert__append---align-items);
-			padding-block-start: var(--origam-alert__append---padding-block-start);
-			padding-block-end: var(--origam-alert__append---padding-block-end);
-			padding-inline-start: var(--origam-alert__append---padding-inline-start);
-			padding-inline-end: var(--origam-alert__append---padding-inline-end);
-			margin-block-start: var(--origam-alert__append---margin-block-start);
-			margin-block-end: var(--origam-alert__append---margin-block-end);
-			margin-inline-start: calc(var(--origam-alert__append---margin-inline-start) - var(--origam-alert---density));
-			margin-inline-end: var(--origam-alert__append---margin-inline-end);
-		}
-
-		&__prepend {
-			align-self: flex-start;
-			display: flex;
-			grid-area: prepend;
-			align-items: var(--origam-alert__prepend---align-items);
-			padding-block-start: var(--origam-alert__prepend---padding-block-start);
-			padding-block-end: var(--origam-alert__prepend---padding-block-end);
-			padding-inline-start: var(--origam-alert__prepend---padding-inline-start);
-			padding-inline-end: var(--origam-alert__prepend---padding-inline-end);
-			margin-block-start: var(--origam-alert__prepend---margin-block-start);
-			margin-block-end: var(--origam-alert__prepend---margin-block-end);
-			margin-inline-start: var(--origam-alert__prepend---margin-inline-start);
-			margin-inline-end: calc(var(--origam-alert__prepend---margin-inline-end) - var(--origam-alert---density));
-		}
-
-		&__underlay {
-			grid-area: none;
-			position: absolute;
-			border-radius: var(--origam-alert__underlay---border-radius)
-		}
-
-		&__title {
-			align-self: center;
-			display: flex;
-			align-items: var(--origam-alert__title---align-items);
-			font-size: var(--origam-alert__title---font-size);
-			font-weight: var(--origam-alert__title---font-weight);
-			hyphens: var(--origam-alert__title---hyphens);
-			letter-spacing: var(--origam-alert__title---letter-spacing);
-			line-height: var(--origam-alert__title---line-height);
-			overflow-wrap: var(--origam-alert__title---overflow-wrap);
-			text-transform: var(--origam-alert__title---text-transform);
-			word-break: var(--origam-alert__title---word-break);
-			word-wrap: var(--origam-alert__title---word-wrap);
-		}
-	}
+  .origam-alert {
+    $this: &;
+
+    display: grid;
+    flex: 1 1;
+    grid-template-areas: "prepend content append close" ". content . .";
+    grid-template-columns: max-content auto max-content max-content;
+    overflow: hidden;
+    position: var(--origam-alert---position);
+
+    padding-block-start: calc(var(--origam-alert---padding-block-start) - var(--origam-alert---density));
+    padding-block-end: calc(var(--origam-alert---padding-block-end) - var(--origam-alert---density));
+    padding-inline-start: calc(var(--origam-alert---padding-inline-start) - var(--origam-alert---density));
+    padding-inline-end: calc(var(--origam-alert---padding-inline-end) - var(--origam-alert---density));
+    margin-block-start: var(--origam-alert---margin-block-start);
+    margin-block-end: var(--origam-alert---margin-block-end);
+    margin-inline-start: var(--origam-alert---margin-inline-start);
+    margin-inline-end: var(--origam-alert---margin-inline-end);
+
+    border-top-width: var(--origam-alert---border-top-width, var(--origam-alert---border-width, 0));
+    border-right-width: var(--origam-alert---border-right-width, var(--origam-alert---border-width, 0));
+    border-bottom-width: var(--origam-alert---border-bottom-width, var(--origam-alert---border-width, 0));
+    border-left-width: var(--origam-alert---border-left-width, var(--origam-alert---border-width, 0));
+    border-style: var(--origam-alert---border-style);
+    border-color: var(--origam-alert---border-color);
+    border-radius: var(--origam-alert---border-radius);
+
+    background-color: var(--origam-alert---background-color);
+    color: var(--origam-alert---color);
+
+    @supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
+      backdrop-filter: var(--origam-alert---backdrop-filter, none);
+      -webkit-backdrop-filter: var(--origam-alert---backdrop-filter, none);
+    }
+
+    &--elevated {
+      box-shadow: var(--origam-alert---box-shadow-elevated, var(--origam-shadow---md));
+    }
+
+    &--border {
+      &#{$this}--border-left {
+        --origam-alert---border-left-width: calc(var(--origam-alert---accent-width, 24px) - var(--origam-alert---density));
+
+        #{$this}__underlay {
+          --origam-alert__underlay---border-top-left-radius: 0;
+          --origam-alert__underlay---border-bottom-left-radius: 0;
+        }
+      }
+
+      &#{$this}--border-right {
+        --origam-alert---border-right-width: calc(var(--origam-alert---accent-width, 24px) - var(--origam-alert---density));
+
+        #{$this}__underlay {
+          --origam-alert__underlay---border-top-right-radius: 0;
+          --origam-alert__underlay---border-bottom-right-radius: 0;
+        }
+      }
+
+      &#{$this}--border-top {
+        --origam-alert---border-top-width: calc(var(--origam-alert---accent-width, 24px) - var(--origam-alert---density));
+
+        #{$this}__underlay {
+          --origam-alert__underlay---border-top-left-radius: 0;
+          --origam-alert__underlay---border-top-right-radius: 0;
+        }
+      }
+
+      &#{$this}--border-bottom {
+        --origam-alert---border-bottom-width: calc(var(--origam-alert---accent-width, 24px) - var(--origam-alert---density));
+
+        #{$this}__underlay {
+          --origam-alert__underlay---border-bottom-left-radius: 0;
+          --origam-alert__underlay---border-bottom-right-radius: 0;
+        }
+      }
+    }
+
+    &--rounded {
+      --origam-alert---border-radius: var(--origam-radius---2xl, 24px);
+    }
+
+    &--rounded-x-small {
+      --origam-alert---border-radius: var(--origam-radius---xs, 2px);
+    }
+
+    &--rounded-small {
+      --origam-alert---border-radius: var(--origam-radius---sm, 4px);
+    }
+
+    &--rounded-default {
+      --origam-alert---border-radius: var(--origam-radius---md, 8px);
+    }
+
+    &--rounded-medium {
+      --origam-alert---border-radius: var(--origam-radius---lg, 12px);
+    }
+
+    &--rounded-large {
+      --origam-alert---border-radius: var(--origam-radius---xl, 16px);
+    }
+
+    &--rounded-x-large {
+      --origam-alert---border-radius: var(--origam-radius---2xl, 24px);
+    }
+
+    &--density-comfortable {
+      --origam-alert---density: -8px;
+    }
+
+    &--density-default {
+      --origam-alert---density: 0px;
+    }
+
+    &--density-compact {
+      --origam-alert---density: 8px;
+    }
+
+    &--warning {
+      --origam-alert---background-color: var(--origam-alert--warning---bg, var(--origam-color__feedback--warning---bg, rgb(251, 140, 0)));
+      --origam-alert---color: var(--origam-alert--warning---fg, var(--origam-color__feedback--warning---fg, #ffffff));
+    }
+
+    &--success {
+      --origam-alert---background-color: var(--origam-alert--success---bg, var(--origam-color__feedback--success---bg, rgb(76, 175, 80)));
+      --origam-alert---color: var(--origam-alert--success---fg, var(--origam-color__feedback--success---fg, #ffffff));
+    }
+
+    &--info {
+      --origam-alert---background-color: var(--origam-alert--info---bg, var(--origam-color__feedback--info---bg, rgb(33, 150, 243)));
+      --origam-alert---color: var(--origam-alert--info---fg, var(--origam-color__feedback--info---fg, #ffffff));
+    }
+
+    &--error {
+      --origam-alert---background-color: var(--origam-alert--danger---bg, var(--origam-color__feedback--danger---bg, rgb(207, 102, 121)));
+      --origam-alert---color: var(--origam-alert--danger---fg, var(--origam-color__feedback--danger---fg, #ffffff));
+    }
+
+    &--absolute {
+      --origam-alert---position: absolute;
+    }
+
+    &--fixed {
+      --origam-alert---position: fixed;
+    }
+
+    &--sticky {
+      --origam-alert---position: sticky;
+    }
+
+    &--relative {
+      --origam-alert---position: relative;
+    }
+
+    &__close {
+      align-self: flex-start;
+      flex: 0 1 auto;
+      grid-area: close;
+      padding-block-start: var(--origam-alert__close---padding-block-start);
+      padding-block-end: var(--origam-alert__close---padding-block-end);
+      padding-inline-start: var(--origam-alert__close---padding-inline-start);
+      padding-inline-end: var(--origam-alert__close---padding-inline-end);
+      margin-block-start: var(--origam-alert__close---margin-block-start);
+      margin-block-end: var(--origam-alert__close---margin-block-end);
+      margin-inline-start: calc(var(--origam-alert__close---margin-inline-start) - var(--origam-alert---density));
+      margin-inline-end: var(--origam-alert__close---margin-inline-end);
+    }
+
+    &__content {
+      align-self: center;
+      grid-area: content;
+      overflow: hidden;
+    }
+
+    &__append {
+      align-self: flex-start;
+      display: flex;
+      grid-area: append;
+      align-items: var(--origam-alert__append---align-items);
+      padding-block-start: var(--origam-alert__append---padding-block-start);
+      padding-block-end: var(--origam-alert__append---padding-block-end);
+      padding-inline-start: var(--origam-alert__append---padding-inline-start);
+      padding-inline-end: var(--origam-alert__append---padding-inline-end);
+      margin-block-start: var(--origam-alert__append---margin-block-start);
+      margin-block-end: var(--origam-alert__append---margin-block-end);
+      margin-inline-start: calc(var(--origam-alert__append---margin-inline-start) - var(--origam-alert---density));
+      margin-inline-end: var(--origam-alert__append---margin-inline-end);
+    }
+
+    &__prepend {
+      align-self: flex-start;
+      display: flex;
+      grid-area: prepend;
+      align-items: var(--origam-alert__prepend---align-items);
+      padding-block-start: var(--origam-alert__prepend---padding-block-start);
+      padding-block-end: var(--origam-alert__prepend---padding-block-end);
+      padding-inline-start: var(--origam-alert__prepend---padding-inline-start);
+      padding-inline-end: var(--origam-alert__prepend---padding-inline-end);
+      margin-block-start: var(--origam-alert__prepend---margin-block-start);
+      margin-block-end: var(--origam-alert__prepend---margin-block-end);
+      margin-inline-start: var(--origam-alert__prepend---margin-inline-start);
+      margin-inline-end: calc(var(--origam-alert__prepend---margin-inline-end) - var(--origam-alert---density));
+    }
+
+    /**
+     * Title/icon vertical alignment — the prepend icon and the
+     * title live in separate grid cells (prepend vs content) with no
+     * shared flex/grid `align-items` between them, so nothing keeps
+     * their vertical centres in sync. Both boxes are flush to the same
+     * grid-row top edge (empirically verified — no slack to redistribute
+     * via `align-self`), so any centre offset comes purely from a height
+     * mismatch between the icon's own box and the title's line-height
+     * box. Bind the prepend box's min-height to the SAME font-size /
+     * line-height tokens the title reads, so the two boxes share one
+     * height and `align-items: center` (already on __prepend) centres
+     * the icon glyph on that height — landing it on the title's centre
+     * exactly, token-driven, no magic number. Scoped via :has() to only
+     * a title being present — an icon-only alert (no title) keeps its
+     * natural intrinsic height.
+     */
+    &:has(#{$this}__title) {
+      #{$this}__prepend {
+        min-height: calc(var(--origam-alert__title---font-size) * var(--origam-alert__title---line-height));
+      }
+    }
+
+    &__underlay {
+      grid-area: none;
+      position: absolute;
+      border-radius: var(--origam-alert__underlay---border-radius)
+    }
+
+    &__title {
+      align-self: center;
+      display: flex;
+      align-items: var(--origam-alert__title---align-items);
+      font-size: var(--origam-alert__title---font-size);
+      font-weight: var(--origam-alert__title---font-weight);
+      hyphens: var(--origam-alert__title---hyphens);
+      letter-spacing: var(--origam-alert__title---letter-spacing);
+      line-height: var(--origam-alert__title---line-height);
+      overflow-wrap: var(--origam-alert__title---overflow-wrap);
+      text-transform: var(--origam-alert__title---text-transform);
+      word-break: var(--origam-alert__title---word-break);
+      word-wrap: var(--origam-alert__title---word-wrap);
+    }
+  }
 </style>