@reliability-design/web 1.4.4 → 1.4.6

package/dist/components/rel-sheet/rel-sheet.ts

@@ -1,8 +1,11 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html, css, nothing } from "lit";
 import { customElement, property, query } from "lit/decorators.js";
 import "@reliability-design/icons/rel-icon";
+import "../rel-progress/rel-progress.js";
+import { getDeepActiveElement, getFocusableElements, trapTabKey } from "../../utils/focus.js";
 
 export type ModalSide = "top" | "bottom" | "center";
+export type ModalSize = "sm" | "md" | "lg" | "xl" | "fullscreen";
 
 @customElement("rel-modal")
 export class RelModal extends LitElement {
@@ -10,9 +13,37 @@ export class RelModal extends LitElement {
   @property({ type: String }) side: ModalSide = "bottom";
   @property({ type: String }) title = "";
   @property({ type: String }) description = "";
+  /** Alias for `description`; rendered only when `description` is empty. */
+  @property({ type: String }) subtitle = "";
   @property({ type: Boolean }) dismissible = true;
   @property({ type: Boolean }) modal = true;
 
+  /** Panel width scale. `md` matches the Figma Modal Sheet width; `fullscreen` covers the viewport. */
+  @property({ type: String, reflect: true }) size: ModalSize = "md";
+
+  /* Granular dismissal switches — each is ANDed with the legacy coarse
+     `dismissible` switch so existing `dismissible={false}` consumers keep
+     their fully-locked behavior. */
+  @property({ type: Boolean, attribute: "close-on-backdrop-click" }) closeOnBackdropClick = true;
+  @property({ type: Boolean, attribute: "close-on-escape" }) closeOnEscape = true;
+  @property({ type: Boolean, attribute: "show-close-button" }) showCloseButton = true;
+
+  /** Move focus into the panel when opened (modal mode only). */
+  @property({ type: Boolean, attribute: "auto-focus" }) autoFocus = true;
+  /** Return focus to the opener when closed. */
+  @property({ type: Boolean, attribute: "restore-focus" }) restoreFocus = true;
+
+  /** When false, the body no longer scrolls internally — tall content clips at the panel's max height. */
+  @property({ type: Boolean }) scrollable = true;
+
+  /** Shows a spinner overlay and blocks all interaction inside the panel. */
+  @property({ type: Boolean, reflect: true }) loading = false;
+  /** Blocks user-initiated closes (X / backdrop / Escape) and footer actions. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  /** Stacking order of the whole modal (backdrop + panel). */
+  @property({ type: Number, attribute: "z-index" }) zIndex = 1000;
+
   /**
    * Figma "Breakpoint" axis. responsive (default) collapses to a full-width
    * bottom sheet below 480px; web keeps the fixed desktop panel at every size.
@@ -21,6 +52,7 @@ export class RelModal extends LitElement {
   breakpoint: "responsive" | "web" = "responsive";
 
   @query(".overlay") private overlayElement!: HTMLElement;
+  @query(".panel") private panelElement!: HTMLElement;
 
   private previousFocus: HTMLElement | null = null;
   private originalBodyOverflow = "";
@@ -84,16 +116,30 @@ export class RelModal extends LitElement {
       overflow: hidden;
       outline: none;
       font-family: var(--rel-fonts-font-family);
-      width: clamp(360px, 49vw, 708px);
+      /* md is the Figma Modal Sheet Breakpoint=Web width (708px cap). */
+      --modal-width: clamp(360px, 49vw, 708px);
+      width: var(--modal-width);
       left: 50%;
       transition: transform var(--modal-transition-duration) var(--modal-transition-timing),
         opacity var(--modal-transition-duration) var(--modal-transition-timing);
     }
 
+    .panel[data-size="sm"] {
+      --modal-width: min(400px, calc(100vw - 32px));
+    }
+
+    .panel[data-size="lg"] {
+      --modal-width: min(900px, calc(100vw - 48px));
+    }
+
+    .panel[data-size="xl"] {
+      --modal-width: min(1140px, calc(100vw - 48px));
+    }
+
     .panel[data-side="bottom"] {
       bottom: 48px;
       left: 50%;
-      width: clamp(360px, 49vw, 708px);
+      width: var(--modal-width);
       max-height: calc(100vh - 96px);
       border-radius: var(--rel-border-radius-sm);
       transform: translateX(-50%) translateY(calc(100% + 48px));
@@ -106,7 +152,7 @@ export class RelModal extends LitElement {
     .panel[data-side="top"] {
       top: 48px;
       left: 50%;
-      width: clamp(360px, 49vw, 708px);
+      width: var(--modal-width);
       max-height: calc(100vh - 96px);
       border-radius: var(--rel-border-radius-sm);
       transform: translateX(-50%) translateY(calc(-100% - 48px));
@@ -119,7 +165,7 @@ export class RelModal extends LitElement {
     .panel[data-side="center"] {
       top: 50%;
       left: 50%;
-      width: clamp(360px, 49vw, 708px);
+      width: var(--modal-width);
       max-height: calc(100vh - 96px);
       border-radius: var(--rel-border-radius-sm);
       transform: translate(-50%, -50%) scale(0.96);
@@ -157,6 +203,50 @@ export class RelModal extends LitElement {
       }
     }
 
+    /* size="fullscreen" — edge-to-edge at every side value; declared after the
+       side and responsive-collapse rules so it wins their specificity ties. */
+    .panel[data-size="fullscreen"],
+    .panel[data-size="fullscreen"][data-side="top"],
+    .panel[data-size="fullscreen"][data-side="center"],
+    .panel[data-size="fullscreen"][data-side="bottom"] {
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      width: 100%;
+      height: 100%;
+      max-height: none;
+      border-radius: 0;
+      transform: translateY(16px);
+      opacity: 0;
+    }
+
+    .modal-container.open .panel[data-size="fullscreen"],
+    .modal-container.open .panel[data-size="fullscreen"][data-side="top"],
+    .modal-container.open .panel[data-size="fullscreen"][data-side="center"],
+    .modal-container.open .panel[data-size="fullscreen"][data-side="bottom"] {
+      transform: translateY(0);
+      opacity: 1;
+    }
+
+    @media (max-width: 480px) {
+      :host([breakpoint="responsive"]) .panel[data-size="fullscreen"] {
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        width: 100%;
+        height: 100%;
+        max-height: none;
+        border-radius: 0;
+        transform: translateY(16px);
+      }
+
+      :host([breakpoint="responsive"]) .modal-container.open .panel[data-size="fullscreen"] {
+        transform: translateY(0);
+      }
+    }
+
     .header {
       display: flex;
       align-items: flex-start;
@@ -239,12 +329,51 @@ export class RelModal extends LitElement {
       outline-offset: 2px;
     }
 
+    .close-button:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    .close-button:disabled:hover {
+      background: transparent;
+    }
+
     .content {
       flex: 1;
       overflow-y: auto;
       padding: var(--rel-spacing-xl);
     }
 
+    .content.no-scroll {
+      overflow-y: visible;
+    }
+
+    :host([disabled]) .footer {
+      opacity: 0.5;
+    }
+
+    .loading-overlay {
+      position: absolute;
+      inset: 0;
+      z-index: 10;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    /* Scrim as a pseudo-element so its opacity doesn't dull the spinner. */
+    .loading-overlay::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background: var(--rel-bg-surface);
+      opacity: 0.7;
+    }
+
+    .loading-overlay rel-progress {
+      position: relative;
+    }
+
     .footer {
       display: none;
     }
@@ -322,9 +451,23 @@ export class RelModal extends LitElement {
   }
 
   private handleOpen() {
-    this.previousFocus = document.activeElement as HTMLElement;
+    // Deep-resolved — document.activeElement retargets to shadow hosts whose
+    // .focus() may be a no-op, silently dropping the restore.
+    this.previousFocus = getDeepActiveElement();
     this.lockScroll();
     document.addEventListener("keydown", this.handleKeydown);
+
+    // Move focus into the dialog — before this, a keyboard user had to Tab
+    // through the entire page behind the overlay to reach the sheet.
+    if (this.modal && this.autoFocus) {
+      this.updateComplete.then(() => {
+        const panel = this.panelElement;
+        if (!panel) return;
+        const focusTarget = getFocusableElements(panel)[0];
+        if (focusTarget) focusTarget.focus();
+        else panel.focus();
+      });
+    }
     this.dispatchEvent(
       new CustomEvent("rel-open-change", {
         detail: true,
@@ -337,11 +480,13 @@ export class RelModal extends LitElement {
   private handleClose() {
     this.unlockScroll();
     document.removeEventListener("keydown", this.handleKeydown);
-    if (this.previousFocus?.focus) {
+    if (this.restoreFocus && this.previousFocus?.focus) {
       this.updateComplete.then(() => {
         this.previousFocus?.focus();
         this.previousFocus = null;
       });
+    } else {
+      this.previousFocus = null;
     }
     this.dispatchEvent(
       new CustomEvent("rel-open-change", {
@@ -371,30 +516,38 @@ export class RelModal extends LitElement {
 
   private handleKeydown = (e: KeyboardEvent) => {
     if (!this.open) return;
-    if (e.key === "Escape" && this.dismissible) {
+    if (e.key === "Escape" && this.dismissible && this.closeOnEscape && !this.disabled) {
       e.preventDefault();
       this.open = false;
+      return;
+    }
+    // aria-modal promised containment; actually deliver it.
+    if (e.key === "Tab" && this.modal && this.panelElement) {
+      trapTabKey(e, this.panelElement);
     }
   };
 
   private handleOverlayClick = (e: MouseEvent) => {
-    if (!this.dismissible) return;
+    if (!this.dismissible || !this.closeOnBackdropClick || this.disabled || this.loading) return;
     if (e.target === this.overlayElement) {
       this.open = false;
     }
   };
 
   private handleCloseButtonClick() {
+    if (this.disabled || this.loading) return;
     this.open = false;
   }
 
   render() {
     const hasTitle = !!this.title;
-    const hasDescription = !!this.description;
-    const showHeader = hasTitle || hasDescription || this.dismissible;
+    const effectiveDescription = this.description || this.subtitle;
+    const hasDescription = !!effectiveDescription;
+    const showCloseX = this.dismissible && this.showCloseButton;
+    const showHeader = hasTitle || hasDescription || showCloseX;
 
     return html`
-      <div class="modal-container ${this.open ? "open" : ""}">
+      <div class="modal-container ${this.open ? "open" : ""}" style="z-index: ${this.zIndex}">
         <div
           part="overlay"
           class="overlay ${!this.modal ? 'no-modal' : ''}"
@@ -404,19 +557,26 @@ export class RelModal extends LitElement {
           part="panel"
           class="panel"
           data-side="${this.side}"
+          data-size="${this.size}"
           role="${this.modal ? "dialog" : "region"}"
           aria-modal="${this.modal}"
+          aria-busy="${this.loading ? "true" : nothing}"
+          aria-labelledby="${hasTitle ? "modal-title" : nothing}"
+          aria-describedby="${hasDescription ? "modal-description" : nothing}"
+          aria-label="${hasTitle ? nothing : "Dialog"}"
           tabindex="-1">
 
-          <div part="header" class="header ${!showHeader ? "empty" : ""}">
+          <div part="header" class="header ${!showHeader ? "empty" : ""}" ?inert=${this.loading}>
             <div class="header-text">
-              ${hasTitle ? html`<h2 class="title">${this.title}</h2>` : ""}
-              ${hasDescription ? html`<p class="description">${this.description}</p>` : ""}
+              ${hasTitle ? html`<h2 class="title" id="modal-title">${this.title}</h2>` : ""}
+              ${hasDescription ? html`<p class="description" id="modal-description">${effectiveDescription}</p>` : ""}
+              <slot name="header"></slot>
             </div>
-            ${this.dismissible
+            ${showCloseX
               ? html`<button
                   part="close-button"
                   class="close-button"
+                  ?disabled=${this.disabled}
                   @click="${this.handleCloseButtonClick}"
                   aria-label="Close">
                   <rel-icon name="close" size="sm"></rel-icon>
@@ -424,13 +584,19 @@ export class RelModal extends LitElement {
               : ""}
           </div>
 
-          <div part="content" class="content">
+          <div part="content" class="content ${this.scrollable ? "" : "no-scroll"}" ?inert=${this.loading}>
             <slot></slot>
           </div>
 
-          <div part="footer" class="footer">
+          <div part="footer" class="footer" ?inert=${this.loading || this.disabled}>
             <slot name="footer"></slot>
           </div>
+
+          ${this.loading
+            ? html`<div part="loading" class="loading-overlay">
+                <rel-progress mode="circular-indeterminate" label="Loading"></rel-progress>
+              </div>`
+            : ""}
         </div>
       </div>
     `;

package/dist/components/rel-sidebar/rel-sidebar.ts

@@ -1,6 +1,8 @@
 import { LitElement, html, css, nothing } from "lit";
 import { customElement, property, state, query } from "lit/decorators.js";
 import "@reliability-design/icons/rel-icon";
+import { matchesShortcut, isEditableTarget } from "../../utils/shortcuts.js";
+import { getDeepActiveElement } from "../../utils/focus.js";
 
 export type SidebarVariant = "sidebar" | "floating" | "inset";
 export type SidebarSide = "left" | "right";
@@ -11,12 +13,12 @@ export type SidebarChangeReason = "trigger" | "rail" | "overlay" | "escape" | "s
 // ============================================================================
 // rel-sidebar-provider (Root State Manager)
 // ============================================================================
-/**
- * @deprecated The rel-sidebar family has no Figma design in RelDS 2.0 and is
- * excluded from the parity contract. Compose sidebars from rel-drawer,
- * rel-menu and rel-resizable instead. It remains exported for compatibility
- * but will be removed in a future major version.
- */
+/**
+ * @deprecated The rel-sidebar family has no Figma design in RelDS 2.0 and is
+ * excluded from the parity contract. Compose sidebars from rel-drawer,
+ * rel-menu and rel-resizable instead. It remains exported for compatibility
+ * but will be removed in a future major version.
+ */
 @customElement("rel-sidebar-provider")
 export class RelSidebarProvider extends LitElement {
   @property({ type: Boolean, reflect: true }) open?: boolean;
@@ -206,17 +208,19 @@ export class RelSidebarProvider extends LitElement {
   private handleKeyDown = (e: KeyboardEvent) => {
     if (!this.keyboardShortcut) return;
 
-    // Ctrl/Cmd + B
-    if ((e.ctrlKey || e.metaKey) && e.key === "b") {
-      e.preventDefault();
+    // Ctrl+B (Cmd+B on Apple) via the shared matcher — stricter than the old
+    // hand-rolled check, which also fired on Ctrl+Shift+B.
+    if (!matchesShortcut(e, "mod+b")) return;
+    // Leave the combo alone in text-editing contexts (bold in editors).
+    if (isEditableTarget(e)) return;
+    e.preventDefault();
 
-      if (this.isMobile || this.collapsible === "offcanvas") {
-        // Toggle open state
-        this.setOpen(!this.activeOpen, "shortcut");
-      } else if (this.collapsible === "icon") {
-        // Toggle collapsed state
-        this.setCollapsed(!this.activeCollapsed, "shortcut");
-      }
+    if (this.isMobile || this.collapsible === "offcanvas") {
+      // Toggle open state
+      this.setOpen(!this.activeOpen, "shortcut");
+    } else if (this.collapsible === "icon") {
+      // Toggle collapsed state
+      this.setCollapsed(!this.activeCollapsed, "shortcut");
     }
   };
 
@@ -529,7 +533,7 @@ export class RelSidebar extends LitElement {
   }
 
   private setupFocusTrap() {
-    this.triggerElement = document.activeElement as HTMLElement;
+    this.triggerElement = getDeepActiveElement();
     document.addEventListener("keydown", this.handleKeydown);
 
     // Focus first focusable element or container
@@ -666,6 +670,7 @@ export class RelSidebar extends LitElement {
           data-side="${this.side}"
           style="--sidebar-width: ${this.getWidthValue()}"
           role="navigation"
+          aria-label="Sidebar"
           aria-hidden="${isOffcanvas && !this.isOpen}"
           tabindex="-1"
         >
@@ -774,11 +779,16 @@ export class RelSidebarTrigger extends LitElement {
   };
 
   render() {
+    const p = this.provider;
+    const expanded =
+      p && !p.isMobile && p.collapsible === "icon"
+        ? !this.isCollapsed
+        : this.isOpen;
     return html`
       <button
         @click="${this.handleClick}"
         type="button"
-        aria-expanded="${this.isOpen}"
+        aria-expanded="${expanded}"
         aria-label="Toggle sidebar"
       >
         <slot>
@@ -888,26 +898,26 @@ export class RelSidebarGroup extends LitElement {
 export class RelSidebarGroupLabel extends LitElement {
   static styles = css`
     :host {
-      display: block;
+      display: block;
       color: var(--rel-text-placeholder);
-      text-transform: uppercase;
+      text-transform: uppercase;
       padding: var(--rel-spacing-xs, 8px) var(--rel-spacing-sm, 12px) var(--rel-spacing-2xs, 4px);
-      margin-bottom: var(--rel-spacing-2xs, 4px);
-      font-family: var(--rel-body-xs-semibold-font-family);
-      font-weight: var(--rel-body-xs-semibold-font-weight);
-      font-size: var(--rel-body-xs-semibold-font-size);
-      line-height: var(--rel-body-xs-semibold-line-height);
-      letter-spacing: var(--rel-body-xs-semibold-letter-spacing);
+      margin-bottom: var(--rel-spacing-2xs, 4px);
+      font-family: var(--rel-body-xs-semibold-font-family);
+      font-weight: var(--rel-body-xs-semibold-font-weight);
+      font-size: var(--rel-body-xs-semibold-font-size);
+      line-height: var(--rel-body-xs-semibold-line-height);
+      letter-spacing: var(--rel-body-xs-semibold-letter-spacing);
     }
 
     :host(.collapsed) {
-      text-align: center;
-      padding: var(--rel-spacing-xs, 8px) var(--rel-spacing-2xs, 4px) var(--rel-spacing-2xs, 4px);
-      font-family: var(--rel-body-xs-regular-font-family);
-      font-weight: var(--rel-body-xs-regular-font-weight);
-      font-size: var(--rel-body-xs-regular-font-size);
-      line-height: var(--rel-body-xs-regular-line-height);
-      letter-spacing: var(--rel-body-xs-regular-letter-spacing);
+      text-align: center;
+      padding: var(--rel-spacing-xs, 8px) var(--rel-spacing-2xs, 4px) var(--rel-spacing-2xs, 4px);
+      font-family: var(--rel-body-xs-regular-font-family);
+      font-weight: var(--rel-body-xs-regular-font-weight);
+      font-size: var(--rel-body-xs-regular-font-size);
+      line-height: var(--rel-body-xs-regular-line-height);
+      letter-spacing: var(--rel-body-xs-regular-letter-spacing);
     }
   `;
 
@@ -1023,16 +1033,16 @@ export class RelSidebarMenuButton extends LitElement {
       background: none;
       border: none;
       border-radius: var(--rel-border-radius-sm, 8px);
-      cursor: pointer;
+      cursor: pointer;
       color: var(--rel-text-default);
       transition: background 0.15s ease, color 0.15s ease;
       text-align: left;
-      position: relative;
-      font-family: var(--rel-body-md-medium-font-family);
-      font-weight: var(--rel-body-md-medium-font-weight);
-      font-size: var(--rel-body-md-medium-font-size);
-      line-height: var(--rel-body-md-medium-line-height);
-      letter-spacing: var(--rel-body-md-medium-letter-spacing);
+      position: relative;
+      font-family: var(--rel-body-md-medium-font-family);
+      font-weight: var(--rel-body-md-medium-font-weight);
+      font-size: var(--rel-body-md-medium-font-size);
+      line-height: var(--rel-body-md-medium-line-height);
+      letter-spacing: var(--rel-body-md-medium-letter-spacing);
     }
 
     button:hover:not([disabled]) {

package/dist/components/rel-skeleton/rel-skeleton.ts

@@ -16,6 +16,15 @@ export class RelSkeleton extends LitElement {
   protected override updated(changed: Map<string, unknown>) {
     if (changed.has("width") && this.width) this.style.width = this.width;
     if (changed.has("height") && this.height) this.style.height = this.height;
+    if (changed.has("loaded")) {
+      if (this.loaded) {
+        this.removeAttribute("role");
+        this.removeAttribute("aria-label");
+      } else {
+        this.setAttribute("role", "status");
+        this.setAttribute("aria-label", "Loading");
+      }
+    }
   }
 
   static styles = css`

package/dist/components/rel-slider/rel-slider.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html, css, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 
 /**
@@ -34,6 +34,8 @@ export class RelSlider extends LitElement {
   /** Upper value when type="range" (attribute value-end). */
   @property({ type: Number, attribute: "value-end" }) valueEnd: number = 100;
 
+  @property({ type: String, attribute: "field-aria-label" }) fieldAriaLabel?: string;
+
   @state() private ticks: number[] = [];
 
   private _onChange: (value: number) => void = () => {};
@@ -619,7 +621,7 @@ export class RelSlider extends LitElement {
           <input
             class="slider-input"
             type="range"
-            aria-label="Range start"
+            aria-label="${this.fieldAriaLabel ? `${this.fieldAriaLabel} minimum` : "Minimum value"}"
             .min="${String(this.min)}"
             .max="${String(this.max)}"
             .step="${String(this.step)}"
@@ -630,7 +632,7 @@ export class RelSlider extends LitElement {
           <input
             class="slider-input"
             type="range"
-            aria-label="Range end"
+            aria-label="${this.fieldAriaLabel ? `${this.fieldAriaLabel} maximum` : "Maximum value"}"
             .min="${String(this.min)}"
             .max="${String(this.max)}"
             .step="${String(this.step)}"
@@ -653,6 +655,7 @@ export class RelSlider extends LitElement {
         <input
           class="slider-input"
           type="range"
+          aria-label="${this.fieldAriaLabel || nothing}"
           .min="${String(this.min)}"
           .max="${String(this.max)}"
           .step="${this.type === 'discrete' ? String(this.step) : '1'}"

package/dist/components/rel-snackbar/rel-snackbar.ts

@@ -1,6 +1,7 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import "@reliability-design/icons/rel-icon";
+import { announce } from "../../utils/announce";
 
 export type SnackbarLines = "single" | "double";
 export type SnackbarType = "default" | "success" | "error" | "warning";
@@ -100,19 +101,19 @@ export class RelSnackbar extends LitElement {
       min-width: 0;
     }
 
-    .snackbar-message {
+    .snackbar-message {
       margin-right: var(--rel-spacing-sm);
-      flex: 1;
+      flex: 1;
 
-      font-family: var(--rel-body-md-regular-font-family);
+      font-family: var(--rel-body-md-regular-font-family);
 
-      font-weight: var(--rel-body-md-regular-font-weight);
+      font-weight: var(--rel-body-md-regular-font-weight);
 
-      font-size: var(--rel-body-md-regular-font-size);
+      font-size: var(--rel-body-md-regular-font-size);
 
-      line-height: var(--rel-body-md-regular-line-height);
+      line-height: var(--rel-body-md-regular-line-height);
 
-      letter-spacing: var(--rel-body-md-regular-letter-spacing);
+      letter-spacing: var(--rel-body-md-regular-letter-spacing);
 
     }
 
@@ -137,17 +138,17 @@ export class RelSnackbar extends LitElement {
     .snackbar-action {
       background: none;
       border: none;
-      color: var(--rel-text-static-light);
+      color: var(--rel-text-static-light);
       cursor: pointer;
       padding: 0;
       display: flex;
       align-items: center;
-      transition: opacity 0.2s ease;
-      font-family: var(--rel-action-md-font-family);
-      font-weight: var(--rel-action-md-font-weight);
-      font-size: var(--rel-action-md-font-size);
-      line-height: var(--rel-action-md-line-height);
-      letter-spacing: var(--rel-action-md-letter-spacing);
+      transition: opacity 0.2s ease;
+      font-family: var(--rel-action-md-font-family);
+      font-weight: var(--rel-action-md-font-weight);
+      font-size: var(--rel-action-md-font-size);
+      line-height: var(--rel-action-md-line-height);
+      letter-spacing: var(--rel-action-md-letter-spacing);
     }
 
     .snackbar-action:hover {
@@ -232,6 +233,9 @@ export class RelSnackbar extends LitElement {
     if ((changed.has("duration") || changed.has("longerAction")) && this.show) {
       this.setAutoDismiss();
     }
+    if ((changed.has("show") || changed.has("message")) && this.show) {
+      announce(this.message, this.type === "error" ? "assertive" : "polite");
+    }
   }
 
   disconnectedCallback() {
@@ -297,7 +301,7 @@ export class RelSnackbar extends LitElement {
       .join(" ");
 
     return html`
-      <div class="${snackbarClasses}">
+      <div class="${snackbarClasses}" role="${this.type === "error" ? "alert" : "status"}">
         <div class="snackbar-body">
           ${this.type !== "default" ? this.renderIcon() : ""}
           <div part="label" class="snackbar-message">${this.message}</div>
@@ -313,7 +317,7 @@ export class RelSnackbar extends LitElement {
             : ""}
           ${this.iconClose
             ? html`
-                <button part="close-button" class="snackbar-close" @click="${this.dismiss}">
+                <button part="close-button" class="snackbar-close" @click="${this.dismiss}" aria-label="Close">
                   <rel-icon name="close" size="md"></rel-icon>
                 </button>
               `