Message

Überblick

mmm-message ist ein Statusbanner für Rückmeldungen zu einer ganzen Seite oder einem ganzen Formular: farbiges Icon, optionale Headline, Fließtext und ein optionaler Close-Button.

Für Hinweise direkt unter einem einzelnen Feld (Input, Select, Checkbox) ist Field Message zuständig — mmm-message ist die größere, umrandete Variante darüber.

Varianten

Variante	Token	Verwendung
`error`	`--mmm-alerts-negative`	Fehler, die eine Aktion verhindern
`success`	`--mmm-alerts-positiv`	Erfolgreich abgeschlossene Aktion
`neutral`	`--mmm-alerts-priority-neutral-b`	Neutrale Information
`alert`	`--mmm-alerts-priority-high`	„Alert Prio“ — dringender Hinweis

Aufbau

Mit Headline: [headline] gesetzt — fette erste Zeile (Body 1 bold), darunter der projizierte Text.
Ohne Headline: [headline] weggelassen — einzeiliger Text neben dem Icon.
Viewport: Die Komponente füllt ihren Container; im schmalen Viewport (S) bricht der Text um, das Icon bleibt oben ausgerichtet. Es braucht keinen zusätzlichen Input.

Inputs

Input	Typ	Default	Beschreibung
`variant`	`'error' \| 'success' \| 'neutral' \| 'alert'`	`neutral`	Bestimmt Farbe und Default-Icon
`headline`	`string`	`''`	Optionale fette erste Zeile
`icon`	`string`	abhängig von `variant`	Ersetzt das Default-Icon; `'none'` blendet es aus
`closable`	`boolean`	`false`	Zeigt den Close-Button
`closeLabel`	`string`	`'Schließen'`	Accessible Name des Close-Buttons
`open`	`boolean` (Model)	`true`	Sichtbarkeit; als `[(open)]` von außen steuerbar

Outputs

Output	Typ	Beschreibung
`closed`	`OutputEmitterRef<void>`	Feuert, wenn der Close-Button benutzt wurde

SCSS-Variablen

Alle --mmm-message-* Properties werden auf dem Host deklariert und können dort, auf einem Wrapper oder auf :root überschrieben werden:

--mmm-message-accent
--mmm-message-background
--mmm-message-border-color
--mmm-message-text
--mmm-message-focus-color
--mmm-message-border-width
--mmm-message-border-width-start
--mmm-message-border-radius
--mmm-message-padding-block
--mmm-message-padding-inline
--mmm-message-gap
--mmm-message-icon-size
--mmm-message-close-size
--mmm-message-close-radius
--mmm-message-headline-size
--mmm-message-headline-line-height
--mmm-message-headline-weight
--mmm-message-body-size
--mmm-message-body-line-height

Die Varianten setzen nur --mmm-message-accent und --mmm-message-background neu. Ein Override von z.B. --mmm-message-padding-block bleibt beim Wechsel der Variante also erhalten.

Hinweise

Das Icon ergibt sich aus der variant und muss nur gesetzt werden, wenn ein anderes gewünscht ist.
Die linke Kante ist als Akzentbalken dicker (--mmm-border-width-3) als der restliche Rahmen (--mmm-border-width-1). Beides ist über --mmm-message-border-width-start bzw. --mmm-message-border-width einstellbar.
Das Icon wird mittig zum gesamten Block ausgerichtet, also bei gesetzter Headline über beide Zeilen. Der Close-Button bleibt auf Höhe der ersten Zeile.
Der Close-Button schließt die Message selbst: open wird auf false gesetzt (der Host bekommt hidden, der Inhalt bleibt im DOM) und closed gefeuert. Wer das Element stattdessen entfernen will, tut das im closed-Handler.
Accessibility: error rendert mit role="alert" und aria-live="assertive", alle anderen Varianten mit role="status" und aria-live="polite".
Die Komponente bringt keine eigenen Außenabstände mit. Mehrere Messages untereinander brauchen einen Container mit gap.

Beispiel

Headline – Body 1 bold

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy

Headline – Body 1 bold

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy

Headline – Body 1 bold

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy

Headline – Body 1 bold

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy

<!-- Mit Headline -->
<mmm-message variant="error" headline="Headline – Body 1 bold">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
</mmm-message>

<mmm-message variant="success" headline="Headline – Body 1 bold">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
</mmm-message>

<mmm-message variant="neutral" headline="Headline – Body 1 bold">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
</mmm-message>

<mmm-message variant="alert" headline="Headline – Body 1 bold">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
</mmm-message>

<!-- Ohne Headline -->
<mmm-message variant="error">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
</mmm-message>

<!-- Ohne Icon -->
<mmm-message variant="neutral" icon="none">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
</mmm-message>

<!-- Schliessbar: schliesst sich selbst, `open` laesst sie wieder einblenden -->
<mmm-message variant="alert" closable [(open)]="alertOpen">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
</mmm-message>

@if (!alertOpen()) {
  <button type="button" (click)="alertOpen.set(true)">
    Message wieder einblenden
  </button>
}

<!-- Schmaler Viewport (S): die Komponente fuellt den Container, der Text bricht um -->
<div style="max-width: 23rem">
  <mmm-message variant="error">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  </mmm-message>
</div>