@slotted/angular 0.1.0-beta.1 → 0.1.0-beta.11

package/fesm2022/slotted-angular-notification-center.mjs

@@ -147,6 +147,7 @@ const WAITING_ROWS = [0, 1, 2];
 const TONE_GLYPH = {
     accent: 'circle-info',
     secondary: 'bell',
+    info: 'circle-info',
     success: 'circle-check',
     warning: 'circle-alert',
     danger: 'circle-x',
@@ -661,35 +662,35 @@ class SlNotificationCenter {
         outside?.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlNotificationCenter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlNotificationCenter, isStandalone: true, selector: "[slNotificationCenter]", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, growing: { classPropertyName: "growing", publicName: "growing", isSignal: true, isRequired: false, transformFunction: null }, arrivals: { classPropertyName: "arrivals", publicName: "arrivals", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, controls: { classPropertyName: "controls", publicName: "controls", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, now: { classPropertyName: "now", publicName: "now", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, defaultView: { classPropertyName: "defaultView", publicName: "defaultView", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { view: "viewChange", viewRequest: "viewRequest", readRequest: "readRequest", removeRequest: "removeRequest", openRequest: "openRequest", revealRequest: "revealRequest", loadMoreRequest: "loadMoreRequest", unreadChange: "unreadChange" }, host: { attributes: { "data-ui": "notification-center", "data-part": "root" }, properties: { "attr.data-size": "sizeValue()", "attr.data-level": "levelValue()", "attr.data-growing": "growingValue()", "attr.data-arrivals": "arrivalsValue()", "attr.data-time-format": "timeFormatValue()", "attr.data-controls": "controlsValue()", "attr.data-view": "currentView()", "attr.data-loading": "loading() ? '' : null", "attr.aria-labelledby": "labelledBy()" } }, queries: [{ propertyName: "itemTemplate", first: true, predicate: SlNotificationItem, descendants: true, isSignal: true }, { propertyName: "visualTemplate", first: true, predicate: SlNotificationVisual, descendants: true, isSignal: true }, { propertyName: "actionsTemplate", first: true, predicate: SlNotificationActions, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "feedElement", first: true, predicate: ["feed"], descendants: true, isSignal: true }, { propertyName: "freshElement", first: true, predicate: ["fresh"], descendants: true, isSignal: true }, { propertyName: "moreElement", first: true, predicate: ["more"], descendants: true, isSignal: true }], exportAs: ["slNotificationCenter"], ngImport: i0, template: `
-    <div data-part="header">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlNotificationCenter, isStandalone: true, selector: "[slNotificationCenter]", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, growing: { classPropertyName: "growing", publicName: "growing", isSignal: true, isRequired: false, transformFunction: null }, arrivals: { classPropertyName: "arrivals", publicName: "arrivals", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, controls: { classPropertyName: "controls", publicName: "controls", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, now: { classPropertyName: "now", publicName: "now", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, defaultView: { classPropertyName: "defaultView", publicName: "defaultView", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { view: "viewChange", viewRequest: "viewRequest", readRequest: "readRequest", removeRequest: "removeRequest", openRequest: "openRequest", revealRequest: "revealRequest", loadMoreRequest: "loadMoreRequest", unreadChange: "unreadChange" }, host: { attributes: { "data-ui": "notification-center", "data-ui-notification-center": "", "data-part": "root", "data-part-root": "" }, properties: { "attr.data-size": "sizeValue()", "attr.data-level": "levelValue()", "attr.data-growing": "growingValue()", "attr.data-arrivals": "arrivalsValue()", "attr.data-time-format": "timeFormatValue()", "attr.data-controls": "controlsValue()", "attr.data-view": "currentView()", "attr.data-loading": "loading() ? '' : null", "attr.aria-labelledby": "labelledBy()" } }, queries: [{ propertyName: "itemTemplate", first: true, predicate: SlNotificationItem, descendants: true, isSignal: true }, { propertyName: "visualTemplate", first: true, predicate: SlNotificationVisual, descendants: true, isSignal: true }, { propertyName: "actionsTemplate", first: true, predicate: SlNotificationActions, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "feedElement", first: true, predicate: ["feed"], descendants: true, isSignal: true }, { propertyName: "freshElement", first: true, predicate: ["fresh"], descendants: true, isSignal: true }, { propertyName: "moreElement", first: true, predicate: ["more"], descendants: true, isSignal: true }], exportAs: ["slNotificationCenter"], ngImport: i0, template: `
+    <div data-part="header" data-part-header="">
       @switch (levelValue()) {
         @case ('3') {
-          <h3 data-part="title" [id]="titleId">
+          <h3 data-part="title" data-part-title="" [id]="titleId">
             {{ t('title') }}
             @if (unread() > 0) {
-              <span data-part="count">{{ unread() }}</span>
+              <span data-part="count" data-part-count="">{{ unread() }}</span>
             }
           </h3>
         }
         @case ('4') {
-          <h4 data-part="title" [id]="titleId">
+          <h4 data-part="title" data-part-title="" [id]="titleId">
             {{ t('title') }}
             @if (unread() > 0) {
-              <span data-part="count">{{ unread() }}</span>
+              <span data-part="count" data-part-count="">{{ unread() }}</span>
             }
           </h4>
         }
         @default {
-          <h2 data-part="title" [id]="titleId">
+          <h2 data-part="title" data-part-title="" [id]="titleId">
             {{ t('title') }}
             @if (unread() > 0) {
-              <span data-part="count">{{ unread() }}</span>
+              <span data-part="count" data-part-count="">{{ unread() }}</span>
             }
           </h2>
         }
       }
-      <span data-part="mark-all">
+      <span data-part="mark-all" data-part-mark-all="">
         <button
           slButton
           size="sm"
@@ -705,7 +706,7 @@ class SlNotificationCenter {
       <ng-content select="[slNotificationCenterActions]" />
     </div>
     @if (viewList().length > 1) {
-      <div data-part="views">
+      <div data-part="views" data-part-views="">
         <div
           slTabs
           track="none"
@@ -718,7 +719,7 @@ class SlNotificationCenter {
               <div slTab [value]="entry.value" [controls]="feedId">
                 {{ entry.label }}
                 @if (entry.count !== undefined && entry.count > 0) {
-                  &ngsp;<span data-part="count">{{ entry.count }}</span>
+                  &ngsp;<span data-part="count" data-part-count="">{{ entry.count }}</span>
                 }
               </div>
             }
@@ -727,13 +728,20 @@ class SlNotificationCenter {
       </div>
     }
     @if (held().length > 0) {
-      <button #fresh data-part="fresh" type="button" (click)="reveal(pressReason($event), $event)">
+      <button
+        #fresh
+        data-part="fresh"
+        data-part-fresh=""
+        type="button"
+        (click)="reveal(pressReason($event), $event)"
+      >
         {{ t('fresh', { count: held().length }) }}
       </button>
     }
     <div
       #feed
       data-part="feed"
+      data-part-feed=""
       role="feed"
       [id]="feedId"
       [attr.aria-labelledby]="titleId"
@@ -742,9 +750,13 @@ class SlNotificationCenter {
     >
       @if (waiting()) {
         @for (row of waitingRows; track row) {
-          <div data-part="item" aria-hidden="true">
-            <span data-part="visual"><span slSkeleton shape="circle" size="sm"></span></span>
-            <div data-part="content"><span slSkeletonText [lines]="2"></span></div>
+          <div data-part="item" data-part-item="" aria-hidden="true">
+            <span data-part="visual" data-part-visual=""
+              ><span slSkeleton shape="circle" size="sm"></span
+            ></span>
+            <div data-part="content" data-part-content="">
+              <span slSkeletonText [lines]="2"></span>
+            </div>
           </div>
         }
       } @else if (groupBy() === undefined) {
@@ -756,16 +768,16 @@ class SlNotificationCenter {
         }
       } @else {
         @for (group of groups(); track group.label; let offset = $index) {
-          <div data-part="group">
+          <div data-part="group" data-part-group="">
             @switch (levelValue()) {
               @case ('3') {
-                <h4 data-part="group-label">{{ group.label }}</h4>
+                <h4 data-part="group-label" data-part-group-label="">{{ group.label }}</h4>
               }
               @case ('4') {
-                <h5 data-part="group-label">{{ group.label }}</h5>
+                <h5 data-part="group-label" data-part-group-label="">{{ group.label }}</h5>
               }
               @default {
-                <h3 data-part="group-label">{{ group.label }}</h3>
+                <h3 data-part="group-label" data-part-group-label="">{{ group.label }}</h3>
               }
             }
             @for (item of group.items; track item.key; let index = $index) {
@@ -779,18 +791,18 @@ class SlNotificationCenter {
       }
     </div>
     @if (showEmpty()) {
-      <div data-part="empty">
+      <div data-part="empty" data-part-empty="">
         <ng-content select="[slNotificationCenterEmpty]">{{ emptyWords() }}</ng-content>
       </div>
     } @else if (growingValue() !== 'none') {
       @if (loading()) {
-        <div #more aria-live="polite" data-part="more">{{ t('loading') }}</div>
+        <div #more aria-live="polite" data-part="more" data-part-more="">{{ t('loading') }}</div>
       } @else if (growingValue() === 'button') {
-        <button #more data-part="more" type="button" (click)="loadMore($event)">
+        <button #more data-part="more" data-part-more="" type="button" (click)="loadMore($event)">
           {{ t('loadMore') }}
         </button>
       } @else {
-        <div #more data-part="more"></div>
+        <div #more data-part="more" data-part-more=""></div>
       }
     }
     <ng-content select="[slNotificationCenterFooter]" />
@@ -799,6 +811,7 @@ class SlNotificationCenter {
       @let context = contextOf(item, position);
       <article
         data-part="item"
+        data-part-item=""
         tabindex="0"
         [attr.data-key]="item.key"
         [attr.data-tone]="context.tone"
@@ -809,26 +822,29 @@ class SlNotificationCenter {
         [attr.aria-setsize]="setSize()"
       >
         @if (visualTemplate(); as visual) {
-          <span data-part="visual" [attr.data-tone]="item.tone ?? null">
+          <span data-part="visual" data-part-visual="" [attr.data-tone]="item.tone ?? null">
             <ng-container
               [ngTemplateOutlet]="visual.template"
               [ngTemplateOutletContext]="context"
             />
           </span>
         } @else if (item.tone !== undefined) {
-          <span data-part="visual" [attr.data-tone]="item.tone"
+          <span data-part="visual" data-part-visual="" [attr.data-tone]="item.tone"
             ><span slIcon data-tone-glyph=""><svg slGlyph [name]="toneGlyph(item.tone)"></svg></span
           ></span>
         }
-        <div data-part="content">
+        <div data-part="content" data-part-content="">
           @if (itemTemplate(); as own) {
             <ng-container [ngTemplateOutlet]="own.template" [ngTemplateOutletContext]="context" />
           } @else {
             @if (item.href === undefined) {
-              <span data-part="title" [id]="context.ids.title">{{ item.title }}</span>
+              <span data-part="title" data-part-title="" [id]="context.ids.title">{{
+                item.title
+              }}</span>
             } @else {
               <a
                 data-part="title"
+                data-part-title=""
                 [id]="context.ids.title"
                 [attr.href]="item.href"
                 (click)="open(item.key, $event)"
@@ -836,16 +852,19 @@ class SlNotificationCenter {
               >
             }
             @if (item.description) {
-              <p data-part="description" [id]="context.ids.description">{{ item.description }}</p>
+              <p data-part="description" data-part-description="" [id]="context.ids.description">
+                {{ item.description }}
+              </p>
             }
             <time
               data-part="time"
+              data-part-time=""
               [attr.datetime]="context.time.dateTime"
               [attr.title]="context.time.title"
               >{{ context.time.text }}</time
             >
             @if (actionsTemplate(); as actions) {
-              <div data-part="actions">
+              <div data-part="actions" data-part-actions="">
                 <ng-container
                   [ngTemplateOutlet]="actions.template"
                   [ngTemplateOutletContext]="context"
@@ -855,11 +874,12 @@ class SlNotificationCenter {
           }
         </div>
         @if (controlsValue() !== 'none') {
-          <div data-part="controls">
+          <div data-part="controls" data-part-controls="">
             @if (controlsValue() !== 'dismiss') {
               <button
                 slNotificationControl
                 data-part="read-toggle"
+                data-part-read-toggle=""
                 [text]="item.read ? t('markUnread') : t('markRead')"
                 (click)="requestRead([item.key], !item.read, pressReason($event), $event)"
               >
@@ -870,6 +890,7 @@ class SlNotificationCenter {
               <button
                 slNotificationControl
                 data-part="dismiss"
+                data-part-dismiss=""
                 [text]="t('dismiss')"
                 (click)="remove(item.key, pressReason($event), $event)"
               >
@@ -880,7 +901,7 @@ class SlNotificationCenter {
         }
       </article>
     </ng-template>
-  `, isInline: true, styles: ["@layer slotted.components{[data-ui=notification-center]{--_text: var(--slotted-text, CanvasText);--_muted: var(--slotted-text-muted, GrayText);--_rule: var(--slotted-notification-center-border, var(--slotted-border-subtle, ButtonBorder));--_ground: var(--slotted-notification-center-background, var(--slotted-surface, Canvas));--_hover: var(--slotted-tone-secondary-subtle-hover, ButtonFace);--_active: var(--slotted-tone-secondary-subtle-active, ButtonFace);--_tone-solid: var(--slotted-tone-accent-solid, Highlight);--_tone-text: var(--slotted-tone-accent-text, Highlight);--_tone-surface: var(--slotted-tone-accent-surface, Canvas);--_unread-ground: color-mix( in oklab, var(--_tone-text) calc(var(--slotted-highlight-tint-opacity, .075) * 100%), transparent );--_inset-inline: var( --slotted-notification-center-inset-inline-md, var(--slotted-space-6, 1rem) );--_inset-block: var( --slotted-notification-center-inset-block-md, var(--slotted-space-5, .75rem) );--_gap: var(--slotted-notification-center-gap-md, var(--slotted-space-5, .75rem));--_title-size: var( --slotted-notification-center-title-size-md, var(--slotted-font-size-lg, 1rem) );--_title-line-height: var(--slotted-line-height-lg, 1.5);--_item-title-size: var(--slotted-font-size-md, .875rem);--_item-title-line-height: var(--slotted-line-height-md, 1.5);--_meta-size: var(--slotted-font-size-sm, .8125rem);--_meta-line-height: var(--slotted-line-height-sm, 1.45);--_visual: var(--slotted-avatar-size-sm, 28px);--_visual-glyph: calc(var(--_visual) * 6 / 7);--_count-size: var(--slotted-font-size-xs, .75rem);--_count-box: calc( var(--_count-size) + 2 * var(--slotted-space-1, .125rem) + 2 * var(--slotted-border-width-thin, 1px) );--_glyph: var(--slotted-control-icon-size-sm, 14px);--_control: min( calc(var(--_glyph) + 2 * var(--slotted-space-2, .25rem)), var(--slotted-control-inner-size-md, 24px) );--_rule-size: var(--slotted-border-width-thin, 1px);--_duration: var(--slotted-control-transition-duration);--_easing: var(--slotted-control-transition-easing);--_scrollbar-thumb: var( --slotted-notification-center-scrollbar-thumb-color, var(--slotted-border-strong, ButtonBorder) );--_scrollbar-track: var(--slotted-notification-center-scrollbar-track-color, transparent);background-color:var(--_ground);color:var(--_text);container-name:notification-center;container-type:inline-size;display:flex;flex-direction:column;font-family:var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);min-inline-size:0}[data-ui=notification-center][data-size=sm]{min-inline-size:var( --slotted-notification-center-min-inline-size-sm, min(22rem, calc(100vw - var(--slotted-space-8, 2rem))) );--_inset-inline: var( --slotted-notification-center-inset-inline-sm, var(--slotted-space-5, .75rem) );--_inset-block: var( --slotted-notification-center-inset-block-sm, var(--slotted-space-4, .5rem) );--_gap: var(--slotted-notification-center-gap-sm, var(--slotted-space-4, .5rem));--_title-size: var( --slotted-notification-center-title-size-sm, var(--slotted-font-size-md, .875rem) );--_title-line-height: var(--slotted-line-height-md, 1.5);--_item-title-size: var(--slotted-font-size-sm, .8125rem);--_item-title-line-height: var(--slotted-line-height-sm, 1.45);--_meta-size: var(--slotted-font-size-xs, .75rem);--_meta-line-height: var(--slotted-line-height-xs, 1.4);--_control: min( calc(var(--_glyph) + 2 * var(--slotted-space-2, .25rem)), var(--slotted-control-inner-size-sm, 22px) );--_visual: var(--slotted-avatar-size-xs, 24px);--_visual-glyph: calc(var(--_visual) * 6 / 7)}[data-ui=notification-center]>[data-part=header]{align-items:center;border-block-end:var(--_rule-size) solid var(--_rule);display:flex;flex-wrap:wrap;gap:var(--slotted-space-3, .375rem) var(--_gap);justify-content:flex-end;min-inline-size:0;padding-block:var(--_inset-block);padding-inline:var(--_inset-inline)}[data-ui=notification-center]>[data-part=header]>[data-part=title]{align-items:center;color:var(--_text);display:inline-flex;font-family:var( --slotted-font-family-heading, var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif) );font-size:var(--_title-size);font-weight:var(--slotted-font-weight-semibold, 600);gap:var(--slotted-space-3, .375rem);letter-spacing:-.01em;line-height:var(--_title-line-height);margin:0;margin-inline-end:auto;min-inline-size:0}[data-ui=notification-center] [data-part=count]{align-items:center;background-color:var(--slotted-surface-sunken, Canvas);block-size:var(--_count-box);border-radius:var(--slotted-radius-full, 9999px);border:var(--slotted-border-width-thin, 1px) solid color-mix(in oklab,currentcolor 20%,transparent);box-sizing:border-box;color:var(--_muted);display:inline-flex;font-size:var(--_count-size);font-variant-numeric:tabular-nums;font-weight:var(--slotted-font-weight-semibold, 600);justify-content:center;line-height:1;min-inline-size:var(--_count-box);padding-block:0;padding-inline:var(--slotted-space-2, .25rem)}[data-ui=notification-center]>[data-part=header]>[data-part=title]>[data-part=count]{background-color:var(--slotted-tone-accent-surface, Canvas);color:var(--slotted-tone-accent-text, Highlight)}[data-ui=notification-center]>[data-part=header]>[data-part=mark-all]{display:inline-flex}[data-ui=notification-center]>[data-part=header]>[data-part=actions]{align-items:center;display:inline-flex;font-size:var(--_meta-size);gap:var(--slotted-control-gap-sm, 6px);line-height:var(--_meta-line-height)}[data-ui=notification-center]>[data-part=views]{border-block-end:var(--_rule-size) solid var(--_rule);min-inline-size:0;padding-inline:var(--_inset-inline)}[data-ui=notification-center]>[data-part=fresh],[data-ui=notification-center]>button[data-part=more]{align-items:center;appearance:none;background-color:var(--_ground);border:var(--_rule-size) solid var(--_rule);border-radius:var(--slotted-radius-full, 9999px);color:var(--_text);cursor:pointer;display:flex;font:inherit;font-size:var(--_meta-size);font-weight:var(--slotted-font-weight-medium, 500);gap:var(--slotted-control-gap-sm, 6px);inline-size:fit-content;justify-content:center;line-height:var(--slotted-control-line-height, 1);margin-block:var(--_inset-block);margin-inline:auto;min-block-size:var(--slotted-control-height-sm, 30px);padding-inline:var(--slotted-control-padding-inline-md, 13px);transition:background-color var(--_duration) var(--_easing),border-color var(--_duration) var(--_easing),color var(--_duration) var(--_easing)}[data-ui=notification-center]>[data-part=fresh]{background-color:var(--slotted-tone-accent-surface, Canvas);border-color:var(--slotted-tone-accent-border, Highlight);color:var(--slotted-tone-accent-text, Highlight)}[data-ui=notification-center]>[data-part=fresh]:enabled:hover{background-color:var(--slotted-tone-accent-subtle-hover, Canvas)}[data-ui=notification-center]>[data-part=fresh]:enabled:active{background-color:var(--slotted-tone-accent-subtle-active, Canvas)}[data-ui=notification-center]>button[data-part=more]:enabled:hover{background-color:var(--_hover)}[data-ui=notification-center]>button[data-part=more]:enabled:active{background-color:var(--_active)}[data-ui=notification-center]>button[data-part=more]:disabled{color:var(--slotted-disabled-foreground, GrayText);cursor:default}[data-ui=notification-center]>div[data-part=more]{color:var(--_muted);font-size:var(--_meta-size);line-height:var(--_meta-line-height);min-block-size:var(--slotted-space-6, 1rem);padding-block:var(--_inset-block);padding-inline:var(--_inset-inline);text-align:center}[data-ui=notification-center]>[data-part=fresh]:focus-visible,[data-ui=notification-center]>button[data-part=more]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=notification-center]>[data-part=feed]{display:flex;flex:1 1 auto;flex-direction:column;min-block-size:0;min-inline-size:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:var(--_scrollbar-thumb) var(--_scrollbar-track);scrollbar-gutter:stable;scrollbar-width:thin}[data-ui=notification-center]>[data-part=feed]:has(+[data-part=footer])>[data-part=item]:last-child,[data-ui=notification-center]>[data-part=feed]:has(+[data-part=footer])>[data-part=group]:last-child>[data-part=item]:last-child{border-block-end:0}[data-ui=notification-center]>[data-part=feed]>[data-part=group]{display:flex;flex-direction:column;min-inline-size:0}[data-ui=notification-center]>[data-part=feed]>[data-part=group]>[data-part=group-label]{color:var(--_muted);font-size:var(--slotted-font-size-xs, .75rem);font-weight:var(--slotted-font-weight-semibold, 600);letter-spacing:.06em;line-height:var(--slotted-line-height-xs, 1.4);margin:0;padding-block:var(--_inset-block) var(--slotted-space-2, .25rem);padding-inline:var(--_inset-inline);text-transform:uppercase}[data-ui=notification-center]>[data-part=feed] [data-part=item]{align-items:flex-start;border-block-end:var(--_rule-size) solid var(--_rule);display:grid;gap:0 var(--slotted-space-4, .5rem);grid-template-columns:auto minmax(0,1fr) auto;min-inline-size:0;padding-block:var(--_inset-block);padding-inline:var(--_inset-inline);position:relative;transition:background-color var(--_duration) var(--_easing)}[data-ui=notification-center]>[data-part=feed] [data-part=item][data-tone=secondary]{--_tone-solid: var(--slotted-tone-secondary-solid, ButtonText);--_tone-text: var(--slotted-tone-secondary-text, ButtonText);--_tone-surface: var(--slotted-tone-secondary-surface, Canvas)}[data-ui=notification-center]>[data-part=feed] [data-part=item][data-tone=success]{--_tone-solid: var(--slotted-tone-success-solid, ButtonText);--_tone-text: var(--slotted-tone-success-text, ButtonText);--_tone-surface: var(--slotted-tone-success-surface, Canvas)}[data-ui=notification-center]>[data-part=feed] [data-part=item][data-tone=warning]{--_tone-solid: var(--slotted-tone-warning-solid, ButtonText);--_tone-text: var(--slotted-tone-warning-text, ButtonText);--_tone-surface: var(--slotted-tone-warning-surface, Canvas)}[data-ui=notification-center]>[data-part=feed] [data-part=item][data-tone=danger]{--_tone-solid: var(--slotted-tone-danger-solid, ButtonText);--_tone-text: var(--slotted-tone-danger-text, ButtonText);--_tone-surface: var(--slotted-tone-danger-surface, Canvas)}[data-ui=notification-center]>[data-part=feed] [data-part=item]:not([data-read]){background-color:var(--_unread-ground)}[data-ui=notification-center]>[data-part=feed] [data-part=item]:not([data-disabled]):hover{background-color:var(--_hover)}[data-ui=notification-center]>[data-part=feed] [data-part=item]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=visual]{align-items:center;display:flex;grid-column:1;justify-content:center;min-inline-size:0}[data-ui=notification-center]>[data-part=feed] [data-part=item]:not(:has(>[data-part=visual]))>[data-part=content]{grid-column:1 / 3}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=visual]:empty:not([data-tone]){display:none}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=visual][data-tone]:has(>[data-tone-glyph]){--slotted-icon-size: var(--_visual-glyph);align-items:center;background-image:radial-gradient(circle,var(--_tone-surface) calc(var(--_visual-glyph) * 9.5 / 24 - .5px),transparent calc(var(--_visual-glyph) * 9.5 / 24 + .5px));block-size:var(--_visual);color:var(--_tone-text);display:flex;inline-size:var(--_visual);justify-content:center}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=content]{display:flex;flex-direction:column;font-size:var(--_item-title-size);gap:var(--slotted-space-1, .125rem);grid-column:2;line-height:var(--_item-title-line-height);margin-block-start:max(0px,calc((var(--_visual) - 1lh) / 2));min-inline-size:0}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=content]>[data-part=title]{-webkit-box-orient:vertical;-webkit-line-clamp:var(--slotted-notification-center-title-clamp, 2);color:var(--_text);display:-webkit-box;font-size:var(--_item-title-size);font-weight:var(--slotted-font-weight-medium, 500);line-height:var(--_item-title-line-height);margin:0;overflow:hidden;overflow-wrap:anywhere;text-decoration:none}[data-ui=notification-center]>[data-part=feed] [data-part=item]:not([data-read])>[data-part=content]>[data-part=title]{font-weight:var(--slotted-font-weight-semibold, 600)}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=content]>a[data-part=title]:after{content:\"\";inset:0;position:absolute}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=content]>a[data-part=title]:not([data-disabled]):hover{text-decoration:underline;text-underline-offset:.15em}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=content]>a[data-part=title]:focus-visible{outline:none}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=content]>[data-part=description]{-webkit-box-orient:vertical;-webkit-line-clamp:var(--slotted-notification-center-description-clamp, 3);color:var(--_muted);display:-webkit-box;font-size:var(--_meta-size);line-height:var(--_meta-line-height);margin:0;overflow:hidden;overflow-wrap:anywhere}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=content]>[data-part=time]{color:var(--_muted);font-size:var(--_meta-size);font-variant-numeric:tabular-nums;line-height:var(--_meta-line-height)}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=content]>[data-part=actions]{align-items:center;display:flex;flex-wrap:wrap;gap:var(--slotted-control-gap-sm, 6px);margin-block-start:var(--slotted-space-2, .25rem);position:relative;z-index:1}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=controls]{display:flex;gap:var(--slotted-space-1, .125rem);grid-column:3;margin-block-start:max(0px,calc((var(--_visual) - var(--_control)) / 2));position:relative;z-index:1}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=controls]>button{--slotted-icon-size: var(--_glyph);align-items:center;appearance:none;background:none;block-size:var(--_control);border:0;border-radius:var(--slotted-control-radius, 4px);color:var(--_muted);cursor:pointer;display:inline-flex;font:inherit;inline-size:var(--_control);justify-content:center;padding:0;position:relative;transition:color var(--_duration) var(--_easing),background-color var(--_duration) var(--_easing)}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=controls]>button:before{block-size:max(var(--_control),var(--slotted-target-min, 24px));content:\"\";inline-size:max(var(--_control),var(--slotted-target-min, 24px));inset-block-start:50%;inset-inline-start:50%;position:absolute;translate:-50% -50%}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=controls]>button:enabled:hover{background-color:var(--_hover);color:var(--_text)}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=controls]>button:enabled:active{background-color:var(--_active)}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=controls]>button:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=notification-center][data-controls=read]>[data-part=feed] [data-part=item]>[data-part=controls]>[data-part=dismiss],[data-ui=notification-center][data-controls=dismiss]>[data-part=feed] [data-part=item]>[data-part=controls]>[data-part=read-toggle],[data-ui=notification-center][data-controls=none]>[data-part=feed] [data-part=item]>[data-part=controls]{display:none}[data-ui=notification-center]>[data-part=feed]>[data-part=item][aria-hidden]{background-color:transparent}[data-ui=notification-center]>[data-part=empty]{color:var(--_muted);display:grid;font-size:var(--_meta-size);line-height:var(--_meta-line-height);min-block-size:calc(2 * var(--slotted-space-12, 4rem));padding-block:var(--_inset-block);padding-inline:var(--_inset-inline);place-items:center;text-align:center}[data-ui=notification-center]>[data-part=footer]{align-items:center;border-block-start:var(--_rule-size) solid var(--_rule);display:flex;font-size:var(--_meta-size);gap:var(--_gap);justify-content:center;line-height:var(--_meta-line-height);margin-block-start:auto;padding-block:var(--_inset-block);padding-inline:var(--_inset-inline)}@container notification-center (max-width: 319px){[data-ui=notification-center]>[data-part=feed] [data-part=item]{grid-template-columns:auto minmax(0,1fr)}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=controls]{grid-column:2;justify-content:flex-end;margin-block-start:var(--slotted-space-2, .25rem)}}@media(pointer:coarse){[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=controls]{--_control: var(--slotted-target-comfortable, 44px);margin-block-start:calc((var(--_visual) - var(--_control)) / 2)}}@media(forced-colors:active){[data-ui=notification-center] [data-part=count]{background-color:Highlight;border-color:Highlight;color:HighlightText;forced-color-adjust:none}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SlButton, selector: "button[slButton]", inputs: ["disabled", "focusableWhenDisabled", "fullWidth", "loading", "loadingDelay", "messages", "size", "tone", "type", "variant"], exportAs: ["slButton"] }, { kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }, { kind: "component", type: SlNotificationControl, selector: "button[slNotificationControl]", inputs: ["text"] }, { kind: "component", type: SlSkeleton, selector: "[slSkeleton]", inputs: ["shape", "size", "animation", "loading", "inlineSize", "blockSize"], exportAs: ["slSkeleton"] }, { kind: "component", type: SlSkeletonText, selector: "[slSkeletonText]", inputs: ["lines", "animation", "loading", "lastLineSize", "inlineSize"], exportAs: ["slSkeletonText"] }, { kind: "component", type: SlTab, selector: "[slTab]", inputs: ["value", "disabled", "dismissible", "dismissLabel", "href", "controls"], exportAs: ["slTab"] }, { kind: "directive", type: SlTabList, selector: "[slTabList]", exportAs: ["slTabList"] }, { kind: "component", type: SlTabs, selector: "[slTabs]", inputs: ["value", "defaultValue", "activation", "orientation", "size", "variant", "track", "fit", "mount", "loop", "disabled"], outputs: ["valueChange", "tabDismiss"], exportAs: ["slTabs"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: ["@layer slotted.components{[data-ui-notification-center]{--_text: var(--slotted-text, CanvasText);--_muted: var(--slotted-text-muted, GrayText);--_rule: var(--slotted-notification-center-border, var(--slotted-border-subtle, ButtonBorder));--_ground: var(--slotted-notification-center-background, var(--slotted-surface, Canvas));--_hover: var(--slotted-tone-secondary-subtle-hover, ButtonFace);--_active: var(--slotted-tone-secondary-subtle-active, ButtonFace);--_tone-solid: var(--slotted-tone-accent-solid, Highlight);--_tone-text: var(--slotted-tone-accent-text, Highlight);--_tone-surface: var(--slotted-tone-accent-surface, Canvas);--_unread-ground: color-mix( in oklab, var(--_tone-text) calc(var(--slotted-highlight-tint-opacity, .075) * 100%), transparent );--_inset-inline: var( --slotted-notification-center-inset-inline-md, var(--slotted-space-6, 1rem) );--_inset-block: var( --slotted-notification-center-inset-block-md, var(--slotted-space-5, .75rem) );--_gap: var(--slotted-notification-center-gap-md, var(--slotted-space-5, .75rem));--_title-size: var( --slotted-notification-center-title-size-md, var(--slotted-font-size-lg, 1rem) );--_title-line-height: var(--slotted-line-height-lg, 1.5);--_item-title-size: var(--slotted-font-size-md, .875rem);--_item-title-line-height: var(--slotted-line-height-md, 1.5);--_meta-size: var(--slotted-font-size-sm, .8125rem);--_meta-line-height: var(--slotted-line-height-sm, 1.45);--_visual: var(--slotted-avatar-size-sm, 28px);--_visual-glyph: calc(var(--_visual) * 6 / 7);--_count-size: var(--slotted-font-size-xs, .75rem);--_count-box: calc( var(--_count-size) + 2 * var(--slotted-space-1, .125rem) + 2 * var(--slotted-border-width-thin, 1px) );--_glyph: var(--slotted-control-icon-size-sm, 14px);--_control: min( calc(var(--_glyph) + 2 * var(--slotted-space-2, .25rem)), var(--slotted-control-inner-size-md, 24px) );--_rule-size: var(--slotted-border-width-thin, 1px);--_duration: var(--slotted-control-transition-duration);--_easing: var(--slotted-control-transition-easing);--_scrollbar-thumb: var( --slotted-notification-center-scrollbar-thumb-color, var(--slotted-border-strong, ButtonBorder) );--_scrollbar-track: var(--slotted-notification-center-scrollbar-track-color, transparent);background-color:var(--_ground);color:var(--_text);container-name:notification-center;container-type:inline-size;display:flex;flex-direction:column;font-family:var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);min-inline-size:0}[data-ui-notification-center][data-size=sm]{min-inline-size:var( --slotted-notification-center-min-inline-size-sm, min(22rem, calc(100vw - var(--slotted-space-8, 2rem))) );--_inset-inline: var( --slotted-notification-center-inset-inline-sm, var(--slotted-space-5, .75rem) );--_inset-block: var( --slotted-notification-center-inset-block-sm, var(--slotted-space-4, .5rem) );--_gap: var(--slotted-notification-center-gap-sm, var(--slotted-space-4, .5rem));--_title-size: var( --slotted-notification-center-title-size-sm, var(--slotted-font-size-md, .875rem) );--_title-line-height: var(--slotted-line-height-md, 1.5);--_item-title-size: var(--slotted-font-size-sm, .8125rem);--_item-title-line-height: var(--slotted-line-height-sm, 1.45);--_meta-size: var(--slotted-font-size-xs, .75rem);--_meta-line-height: var(--slotted-line-height-xs, 1.4);--_control: min( calc(var(--_glyph) + 2 * var(--slotted-space-2, .25rem)), var(--slotted-control-inner-size-sm, 22px) );--_visual: var(--slotted-avatar-size-xs, 24px);--_visual-glyph: calc(var(--_visual) * 6 / 7)}[data-ui-notification-center]>[data-part-header]{align-items:center;border-block-end:var(--_rule-size) solid var(--_rule);display:flex;flex-wrap:wrap;gap:var(--slotted-space-3, .375rem) var(--_gap);justify-content:flex-end;min-inline-size:0;padding-block:var(--_inset-block);padding-inline:var(--_inset-inline)}[data-ui-notification-center]>[data-part-header]>[data-part-title]{align-items:center;color:var(--_text);display:inline-flex;font-family:var( --slotted-font-family-heading, var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif) );font-size:var(--_title-size);font-weight:var(--slotted-font-weight-semibold, 600);gap:var(--slotted-space-3, .375rem);letter-spacing:-.01em;line-height:var(--_title-line-height);margin:0;margin-inline-end:auto;min-inline-size:0}[data-ui-notification-center] [data-part-count]{align-items:center;background-color:var(--slotted-surface-sunken, Canvas);block-size:var(--_count-box);border-radius:var(--slotted-radius-full, 9999px);border:var(--slotted-border-width-thin, 1px) solid color-mix(in oklab,currentcolor 20%,transparent);box-sizing:border-box;color:var(--_muted);display:inline-flex;font-size:var(--_count-size);font-variant-numeric:tabular-nums;font-weight:var(--slotted-font-weight-semibold, 600);justify-content:center;line-height:1;min-inline-size:var(--_count-box);padding-block:0;padding-inline:var(--slotted-space-2, .25rem)}[data-ui-notification-center]>[data-part-header]>[data-part-title]>[data-part-count]{background-color:var(--slotted-tone-accent-surface, Canvas);color:var(--slotted-tone-accent-text, Highlight)}[data-ui-notification-center]>[data-part-header]>[data-part-mark-all]{display:inline-flex}[data-ui-notification-center]>[data-part-header]>[data-part-actions]{align-items:center;display:inline-flex;font-size:var(--_meta-size);gap:var(--slotted-control-gap-sm, 6px);line-height:var(--_meta-line-height)}[data-ui-notification-center]>[data-part-views]{border-block-end:var(--_rule-size) solid var(--_rule);min-inline-size:0;padding-inline:var(--_inset-inline)}[data-ui-notification-center]>[data-part-fresh],[data-ui-notification-center]>button[data-part-more]{align-items:center;appearance:none;background-color:var(--_ground);border:var(--_rule-size) solid var(--_rule);border-radius:var(--slotted-radius-full, 9999px);color:var(--_text);cursor:pointer;display:flex;font:inherit;font-size:var(--_meta-size);font-weight:var(--slotted-font-weight-medium, 500);gap:var(--slotted-control-gap-sm, 6px);inline-size:fit-content;justify-content:center;line-height:var(--slotted-control-line-height, 1);margin-block:var(--_inset-block);margin-inline:auto;min-block-size:var(--slotted-control-height-sm, 30px);padding-inline:var(--slotted-control-padding-inline-md, 13px);transition:background-color var(--_duration) var(--_easing),border-color var(--_duration) var(--_easing),color var(--_duration) var(--_easing)}[data-ui-notification-center]>[data-part-fresh]{background-color:var(--slotted-tone-accent-surface, Canvas);border-color:var(--slotted-tone-accent-border, Highlight);color:var(--slotted-tone-accent-text, Highlight)}[data-ui-notification-center]>[data-part-fresh]:enabled:hover{background-color:var(--slotted-tone-accent-subtle-hover, Canvas)}[data-ui-notification-center]>[data-part-fresh]:enabled:active{background-color:var(--slotted-tone-accent-subtle-active, Canvas)}[data-ui-notification-center]>button[data-part-more]:enabled:hover{background-color:var(--_hover)}[data-ui-notification-center]>button[data-part-more]:enabled:active{background-color:var(--_active)}[data-ui-notification-center]>button[data-part-more]:disabled{color:var(--slotted-disabled-foreground, GrayText);cursor:default}[data-ui-notification-center]>div[data-part-more]{color:var(--_muted);font-size:var(--_meta-size);line-height:var(--_meta-line-height);min-block-size:var(--slotted-space-6, 1rem);padding-block:var(--_inset-block);padding-inline:var(--_inset-inline);text-align:center}[data-ui-notification-center]>[data-part-fresh]:focus-visible,[data-ui-notification-center]>button[data-part-more]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui-notification-center]>[data-part-feed]{display:flex;flex:1 1 auto;flex-direction:column;min-block-size:0;min-inline-size:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:var(--_scrollbar-thumb) var(--_scrollbar-track);scrollbar-gutter:stable;scrollbar-width:thin}[data-ui-notification-center]>[data-part-feed]:has(+[data-part-footer])>[data-part-item]:last-child,[data-ui-notification-center]>[data-part-feed]:has(+[data-part-footer])>[data-part-group]:last-child>[data-part-item]:last-child{border-block-end:0}[data-ui-notification-center]>[data-part-feed]>[data-part-group]{display:flex;flex-direction:column;min-inline-size:0}[data-ui-notification-center]>[data-part-feed]>[data-part-group]>[data-part-group-label]{color:var(--_muted);font-size:var(--slotted-font-size-xs, .75rem);font-weight:var(--slotted-font-weight-semibold, 600);letter-spacing:.06em;line-height:var(--slotted-line-height-xs, 1.4);margin:0;padding-block:var(--_inset-block) var(--slotted-space-2, .25rem);padding-inline:var(--_inset-inline);text-transform:uppercase}[data-ui-notification-center]>[data-part-feed] [data-part-item]{align-items:flex-start;border-block-end:var(--_rule-size) solid var(--_rule);display:grid;gap:0 var(--slotted-space-4, .5rem);grid-template-columns:auto minmax(0,1fr) auto;min-inline-size:0;padding-block:var(--_inset-block);padding-inline:var(--_inset-inline);position:relative;transition:background-color var(--_duration) var(--_easing)}[data-ui-notification-center]>[data-part-feed] [data-part-item][data-tone=secondary]{--_tone-solid: var(--slotted-tone-secondary-solid, ButtonText);--_tone-text: var(--slotted-tone-secondary-text, ButtonText);--_tone-surface: var(--slotted-tone-secondary-surface, Canvas)}[data-ui-notification-center]>[data-part-feed] [data-part-item][data-tone=success]{--_tone-solid: var(--slotted-tone-success-solid, ButtonText);--_tone-text: var(--slotted-tone-success-text, ButtonText);--_tone-surface: var(--slotted-tone-success-surface, Canvas)}[data-ui-notification-center]>[data-part-feed] [data-part-item][data-tone=info]{--_tone-solid: var(--slotted-tone-info-solid, ButtonText);--_tone-text: var(--slotted-tone-info-text, ButtonText);--_tone-surface: var(--slotted-tone-info-surface, Canvas)}[data-ui-notification-center]>[data-part-feed] [data-part-item][data-tone=warning]{--_tone-solid: var(--slotted-tone-warning-solid, ButtonText);--_tone-text: var(--slotted-tone-warning-text, ButtonText);--_tone-surface: var(--slotted-tone-warning-surface, Canvas)}[data-ui-notification-center]>[data-part-feed] [data-part-item][data-tone=danger]{--_tone-solid: var(--slotted-tone-danger-solid, ButtonText);--_tone-text: var(--slotted-tone-danger-text, ButtonText);--_tone-surface: var(--slotted-tone-danger-surface, Canvas)}[data-ui-notification-center]>[data-part-feed] [data-part-item]:not([data-read]){background-color:var(--_unread-ground)}[data-ui-notification-center]>[data-part-feed] [data-part-item]:not([data-disabled]):hover{background-color:var(--_hover)}[data-ui-notification-center]>[data-part-feed] [data-part-item]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui-notification-center]>[data-part-feed] [data-part-item]>[data-part-visual]{align-items:center;display:flex;grid-column:1;justify-content:center;min-inline-size:0}[data-ui-notification-center]>[data-part-feed] [data-part-item]:not(:has(>[data-part-visual]))>[data-part-content]{grid-column:1 / 3}[data-ui-notification-center]>[data-part-feed] [data-part-item]>[data-part-visual]:empty:not([data-tone]){display:none}[data-ui-notification-center]>[data-part-feed] [data-part-item]>[data-part-visual][data-tone]:has(>[data-tone-glyph]){--slotted-icon-size: var(--_visual-glyph);align-items:center;background-image:radial-gradient(circle,var(--_tone-surface) calc(var(--_visual-glyph) * 9.5 / 24 - .5px),transparent calc(var(--_visual-glyph) * 9.5 / 24 + .5px));block-size:var(--_visual);color:var(--_tone-text);display:flex;inline-size:var(--_visual);justify-content:center}[data-ui-notification-center]>[data-part-feed] [data-part-item]>[data-part-content]{display:flex;flex-direction:column;font-size:var(--_item-title-size);gap:var(--slotted-space-1, .125rem);grid-column:2;line-height:var(--_item-title-line-height);margin-block-start:max(0px,calc((var(--_visual) - 1lh) / 2));min-inline-size:0}[data-ui-notification-center]>[data-part-feed] [data-part-item]>[data-part-content]>[data-part-title]{-webkit-box-orient:vertical;-webkit-line-clamp:var(--slotted-notification-center-title-clamp, 2);color:var(--_text);display:-webkit-box;font-size:var(--_item-title-size);font-weight:var(--slotted-font-weight-medium, 500);line-height:var(--_item-title-line-height);margin:0;overflow:hidden;overflow-wrap:anywhere;text-decoration:none}[data-ui-notification-center]>[data-part-feed] [data-part-item]:not([data-read])>[data-part-content]>[data-part-title]{font-weight:var(--slotted-font-weight-semibold, 600)}[data-ui-notification-center]>[data-part-feed] [data-part-item]>[data-part-content]>a[data-part-title]:after{content:\"\";inset:0;position:absolute}[data-ui-notification-center]>[data-part-feed] [data-part-item]>[data-part-content]>a[data-part-title]:not([data-disabled]):hover{text-decoration:underline;text-underline-offset:.15em}[data-ui-notification-center]>[data-part-feed] [data-part-item]>[data-part-content]>a[data-part-title]:focus-visible{outline:none}[data-ui-notification-center]>[data-part-feed] [data-part-item]>[data-part-content]>[data-part-description]{-webkit-box-orient:vertical;-webkit-line-clamp:var(--slotted-notification-center-description-clamp, 3);color:var(--_muted);display:-webkit-box;font-size:var(--_meta-size);line-height:var(--_meta-line-height);margin:0;overflow:hidden;overflow-wrap:anywhere}[data-ui-notification-center]>[data-part-feed] [data-part-item]>[data-part-content]>[data-part-time]{color:var(--_muted);font-size:var(--_meta-size);font-variant-numeric:tabular-nums;line-height:var(--_meta-line-height)}[data-ui-notification-center]>[data-part-feed] [data-part-item]>[data-part-content]>[data-part-actions]{align-items:center;display:flex;flex-wrap:wrap;gap:var(--slotted-control-gap-sm, 6px);margin-block-start:var(--slotted-space-2, .25rem);position:relative;z-index:1}[data-ui-notification-center]>[data-part-feed] [data-part-item]>[data-part-controls]{display:flex;gap:var(--slotted-space-1, .125rem);grid-column:3;margin-block-start:max(0px,calc((var(--_visual) - var(--_control)) / 2));position:relative;z-index:1}[data-ui-notification-center]>[data-part-feed] [data-part-item]>[data-part-controls]>button{--slotted-icon-size: var(--_glyph);align-items:center;appearance:none;background:none;block-size:var(--_control);border:0;border-radius:var(--slotted-control-radius, 4px);color:var(--_muted);cursor:pointer;display:inline-flex;font:inherit;inline-size:var(--_control);justify-content:center;padding:0;position:relative;transition:color var(--_duration) var(--_easing),background-color var(--_duration) var(--_easing)}[data-ui-notification-center]>[data-part-feed] [data-part-item]>[data-part-controls]>button:before{block-size:max(var(--_control),var(--slotted-target-min, 24px));content:\"\";inline-size:max(var(--_control),var(--slotted-target-min, 24px));inset-block-start:50%;inset-inline-start:50%;position:absolute;translate:-50% -50%}[data-ui-notification-center]>[data-part-feed] [data-part-item]>[data-part-controls]>button:enabled:hover{background-color:var(--_hover);color:var(--_text)}[data-ui-notification-center]>[data-part-feed] [data-part-item]>[data-part-controls]>button:enabled:active{background-color:var(--_active)}[data-ui-notification-center]>[data-part-feed] [data-part-item]>[data-part-controls]>button:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui-notification-center][data-controls=read]>[data-part-feed] [data-part-item]>[data-part-controls]>[data-part-dismiss],[data-ui-notification-center][data-controls=dismiss]>[data-part-feed] [data-part-item]>[data-part-controls]>[data-part-read-toggle],[data-ui-notification-center][data-controls=none]>[data-part-feed] [data-part-item]>[data-part-controls]{display:none}[data-ui-notification-center]>[data-part-feed]>[data-part-item][aria-hidden]{background-color:transparent}[data-ui-notification-center]>[data-part-empty]{color:var(--_muted);display:grid;font-size:var(--_meta-size);line-height:var(--_meta-line-height);min-block-size:calc(2 * var(--slotted-space-12, 4rem));padding-block:var(--_inset-block);padding-inline:var(--_inset-inline);place-items:center;text-align:center}[data-ui-notification-center]>[data-part-footer]{align-items:center;border-block-start:var(--_rule-size) solid var(--_rule);display:flex;font-size:var(--_meta-size);gap:var(--_gap);justify-content:center;line-height:var(--_meta-line-height);margin-block-start:auto;padding-block:var(--_inset-block);padding-inline:var(--_inset-inline)}@container notification-center (max-width: 319px){[data-ui-notification-center]>[data-part-feed] [data-part-item]{grid-template-columns:auto minmax(0,1fr)}[data-ui-notification-center]>[data-part-feed] [data-part-item]>[data-part-controls]{grid-column:2;justify-content:flex-end;margin-block-start:var(--slotted-space-2, .25rem)}}@media(pointer:coarse){[data-ui-notification-center]>[data-part-feed] [data-part-item]>[data-part-controls]{--_control: var(--slotted-target-comfortable, 44px);margin-block-start:calc((var(--_visual) - var(--_control)) / 2)}}@media(forced-colors:active){[data-ui-notification-center] [data-part-count]{background-color:Highlight;border-color:Highlight;color:HighlightText;forced-color-adjust:none}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SlButton, selector: "button[slButton]", inputs: ["disabled", "focusableWhenDisabled", "fullWidth", "justify", "loading", "loadingDelay", "messages", "size", "tone", "type", "variant"], exportAs: ["slButton"] }, { kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }, { kind: "component", type: SlNotificationControl, selector: "button[slNotificationControl]", inputs: ["text"] }, { kind: "component", type: SlSkeleton, selector: "[slSkeleton]", inputs: ["shape", "size", "animation", "loading", "inlineSize", "blockSize"], exportAs: ["slSkeleton"] }, { kind: "component", type: SlSkeletonText, selector: "[slSkeletonText]", inputs: ["lines", "animation", "loading", "lastLineSize", "inlineSize"], exportAs: ["slSkeletonText"] }, { kind: "component", type: SlTab, selector: "[slTab]", inputs: ["value", "disabled", "dismissible", "dismissLabel", "href", "controls"], exportAs: ["slTab"] }, { kind: "directive", type: SlTabList, selector: "[slTabList]", exportAs: ["slTabList"] }, { kind: "component", type: SlTabs, selector: "[slTabs]", inputs: ["value", "defaultValue", "activation", "orientation", "size", "variant", "track", "fit", "mount", "loop", "disabled"], outputs: ["valueChange", "tabDismiss"], exportAs: ["slTabs"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlNotificationCenter, decorators: [{
             type: Component,
@@ -896,34 +917,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         SlTabList,
                         SlTabs,
                     ], template: `
-    <div data-part="header">
+    <div data-part="header" data-part-header="">
       @switch (levelValue()) {
         @case ('3') {
-          <h3 data-part="title" [id]="titleId">
+          <h3 data-part="title" data-part-title="" [id]="titleId">
             {{ t('title') }}
             @if (unread() > 0) {
-              <span data-part="count">{{ unread() }}</span>
+              <span data-part="count" data-part-count="">{{ unread() }}</span>
             }
           </h3>
         }
         @case ('4') {
-          <h4 data-part="title" [id]="titleId">
+          <h4 data-part="title" data-part-title="" [id]="titleId">
             {{ t('title') }}
             @if (unread() > 0) {
-              <span data-part="count">{{ unread() }}</span>
+              <span data-part="count" data-part-count="">{{ unread() }}</span>
             }
           </h4>
         }
         @default {
-          <h2 data-part="title" [id]="titleId">
+          <h2 data-part="title" data-part-title="" [id]="titleId">
             {{ t('title') }}
             @if (unread() > 0) {
-              <span data-part="count">{{ unread() }}</span>
+              <span data-part="count" data-part-count="">{{ unread() }}</span>
             }
           </h2>
         }
       }
-      <span data-part="mark-all">
+      <span data-part="mark-all" data-part-mark-all="">
         <button
           slButton
           size="sm"
@@ -939,7 +960,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
       <ng-content select="[slNotificationCenterActions]" />
     </div>
     @if (viewList().length > 1) {
-      <div data-part="views">
+      <div data-part="views" data-part-views="">
         <div
           slTabs
           track="none"
@@ -952,7 +973,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
               <div slTab [value]="entry.value" [controls]="feedId">
                 {{ entry.label }}
                 @if (entry.count !== undefined && entry.count > 0) {
-                  &ngsp;<span data-part="count">{{ entry.count }}</span>
+                  &ngsp;<span data-part="count" data-part-count="">{{ entry.count }}</span>
                 }
               </div>
             }
@@ -961,13 +982,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
       </div>
     }
     @if (held().length > 0) {
-      <button #fresh data-part="fresh" type="button" (click)="reveal(pressReason($event), $event)">
+      <button
+        #fresh
+        data-part="fresh"
+        data-part-fresh=""
+        type="button"
+        (click)="reveal(pressReason($event), $event)"
+      >
         {{ t('fresh', { count: held().length }) }}
       </button>
     }
     <div
       #feed
       data-part="feed"
+      data-part-feed=""
       role="feed"
       [id]="feedId"
       [attr.aria-labelledby]="titleId"
@@ -976,9 +1004,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
     >
       @if (waiting()) {
         @for (row of waitingRows; track row) {
-          <div data-part="item" aria-hidden="true">
-            <span data-part="visual"><span slSkeleton shape="circle" size="sm"></span></span>
-            <div data-part="content"><span slSkeletonText [lines]="2"></span></div>
+          <div data-part="item" data-part-item="" aria-hidden="true">
+            <span data-part="visual" data-part-visual=""
+              ><span slSkeleton shape="circle" size="sm"></span
+            ></span>
+            <div data-part="content" data-part-content="">
+              <span slSkeletonText [lines]="2"></span>
+            </div>
           </div>
         }
       } @else if (groupBy() === undefined) {
@@ -990,16 +1022,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
         }
       } @else {
         @for (group of groups(); track group.label; let offset = $index) {
-          <div data-part="group">
+          <div data-part="group" data-part-group="">
             @switch (levelValue()) {
               @case ('3') {
-                <h4 data-part="group-label">{{ group.label }}</h4>
+                <h4 data-part="group-label" data-part-group-label="">{{ group.label }}</h4>
               }
               @case ('4') {
-                <h5 data-part="group-label">{{ group.label }}</h5>
+                <h5 data-part="group-label" data-part-group-label="">{{ group.label }}</h5>
               }
               @default {
-                <h3 data-part="group-label">{{ group.label }}</h3>
+                <h3 data-part="group-label" data-part-group-label="">{{ group.label }}</h3>
               }
             }
             @for (item of group.items; track item.key; let index = $index) {
@@ -1013,18 +1045,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
       }
     </div>
     @if (showEmpty()) {
-      <div data-part="empty">
+      <div data-part="empty" data-part-empty="">
         <ng-content select="[slNotificationCenterEmpty]">{{ emptyWords() }}</ng-content>
       </div>
     } @else if (growingValue() !== 'none') {
       @if (loading()) {
-        <div #more aria-live="polite" data-part="more">{{ t('loading') }}</div>
+        <div #more aria-live="polite" data-part="more" data-part-more="">{{ t('loading') }}</div>
       } @else if (growingValue() === 'button') {
-        <button #more data-part="more" type="button" (click)="loadMore($event)">
+        <button #more data-part="more" data-part-more="" type="button" (click)="loadMore($event)">
           {{ t('loadMore') }}
         </button>
       } @else {
-        <div #more data-part="more"></div>
+        <div #more data-part="more" data-part-more=""></div>
       }
     }
     <ng-content select="[slNotificationCenterFooter]" />
@@ -1033,6 +1065,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
       @let context = contextOf(item, position);
       <article
         data-part="item"
+        data-part-item=""
         tabindex="0"
         [attr.data-key]="item.key"
         [attr.data-tone]="context.tone"
@@ -1043,26 +1076,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
         [attr.aria-setsize]="setSize()"
       >
         @if (visualTemplate(); as visual) {
-          <span data-part="visual" [attr.data-tone]="item.tone ?? null">
+          <span data-part="visual" data-part-visual="" [attr.data-tone]="item.tone ?? null">
             <ng-container
               [ngTemplateOutlet]="visual.template"
               [ngTemplateOutletContext]="context"
             />
           </span>
         } @else if (item.tone !== undefined) {
-          <span data-part="visual" [attr.data-tone]="item.tone"
+          <span data-part="visual" data-part-visual="" [attr.data-tone]="item.tone"
             ><span slIcon data-tone-glyph=""><svg slGlyph [name]="toneGlyph(item.tone)"></svg></span
           ></span>
         }
-        <div data-part="content">
+        <div data-part="content" data-part-content="">
           @if (itemTemplate(); as own) {
             <ng-container [ngTemplateOutlet]="own.template" [ngTemplateOutletContext]="context" />
           } @else {
             @if (item.href === undefined) {
-              <span data-part="title" [id]="context.ids.title">{{ item.title }}</span>
+              <span data-part="title" data-part-title="" [id]="context.ids.title">{{
+                item.title
+              }}</span>
             } @else {
               <a
                 data-part="title"
+                data-part-title=""
                 [id]="context.ids.title"
                 [attr.href]="item.href"
                 (click)="open(item.key, $event)"
@@ -1070,16 +1106,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
               >
             }
             @if (item.description) {
-              <p data-part="description" [id]="context.ids.description">{{ item.description }}</p>
+              <p data-part="description" data-part-description="" [id]="context.ids.description">
+                {{ item.description }}
+              </p>
             }
             <time
               data-part="time"
+              data-part-time=""
               [attr.datetime]="context.time.dateTime"
               [attr.title]="context.time.title"
               >{{ context.time.text }}</time
             >
             @if (actionsTemplate(); as actions) {
-              <div data-part="actions">
+              <div data-part="actions" data-part-actions="">
                 <ng-container
                   [ngTemplateOutlet]="actions.template"
                   [ngTemplateOutletContext]="context"
@@ -1089,11 +1128,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
           }
         </div>
         @if (controlsValue() !== 'none') {
-          <div data-part="controls">
+          <div data-part="controls" data-part-controls="">
             @if (controlsValue() !== 'dismiss') {
               <button
                 slNotificationControl
                 data-part="read-toggle"
+                data-part-read-toggle=""
                 [text]="item.read ? t('markUnread') : t('markRead')"
                 (click)="requestRead([item.key], !item.read, pressReason($event), $event)"
               >
@@ -1104,6 +1144,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
               <button
                 slNotificationControl
                 data-part="dismiss"
+                data-part-dismiss=""
                 [text]="t('dismiss')"
                 (click)="remove(item.key, pressReason($event), $event)"
               >
@@ -1116,7 +1157,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
     </ng-template>
   `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'slNotificationCenter', host: {
                         'data-ui': 'notification-center',
+                        'data-ui-notification-center': '',
                         'data-part': 'root',
+                        'data-part-root': '',
                         '[attr.data-size]': 'sizeValue()',
                         '[attr.data-level]': 'levelValue()',
                         '[attr.data-growing]': 'growingValue()',
@@ -1126,32 +1169,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         '[attr.data-view]': 'currentView()',
                         '[attr.data-loading]': "loading() ? '' : null",
                         '[attr.aria-labelledby]': 'labelledBy()',
-                    }, styles: ["@layer slotted.components{[data-ui=notification-center]{--_text: var(--slotted-text, CanvasText);--_muted: var(--slotted-text-muted, GrayText);--_rule: var(--slotted-notification-center-border, var(--slotted-border-subtle, ButtonBorder));--_ground: var(--slotted-notification-center-background, var(--slotted-surface, Canvas));--_hover: var(--slotted-tone-secondary-subtle-hover, ButtonFace);--_active: var(--slotted-tone-secondary-subtle-active, ButtonFace);--_tone-solid: var(--slotted-tone-accent-solid, Highlight);--_tone-text: var(--slotted-tone-accent-text, Highlight);--_tone-surface: var(--slotted-tone-accent-surface, Canvas);--_unread-ground: color-mix( in oklab, var(--_tone-text) calc(var(--slotted-highlight-tint-opacity, .075) * 100%), transparent );--_inset-inline: var( --slotted-notification-center-inset-inline-md, var(--slotted-space-6, 1rem) );--_inset-block: var( --slotted-notification-center-inset-block-md, var(--slotted-space-5, .75rem) );--_gap: var(--slotted-notification-center-gap-md, var(--slotted-space-5, .75rem));--_title-size: var( --slotted-notification-center-title-size-md, var(--slotted-font-size-lg, 1rem) );--_title-line-height: var(--slotted-line-height-lg, 1.5);--_item-title-size: var(--slotted-font-size-md, .875rem);--_item-title-line-height: var(--slotted-line-height-md, 1.5);--_meta-size: var(--slotted-font-size-sm, .8125rem);--_meta-line-height: var(--slotted-line-height-sm, 1.45);--_visual: var(--slotted-avatar-size-sm, 28px);--_visual-glyph: calc(var(--_visual) * 6 / 7);--_count-size: var(--slotted-font-size-xs, .75rem);--_count-box: calc( var(--_count-size) + 2 * var(--slotted-space-1, .125rem) + 2 * var(--slotted-border-width-thin, 1px) );--_glyph: var(--slotted-control-icon-size-sm, 14px);--_control: min( calc(var(--_glyph) + 2 * var(--slotted-space-2, .25rem)), var(--slotted-control-inner-size-md, 24px) );--_rule-size: var(--slotted-border-width-thin, 1px);--_duration: var(--slotted-control-transition-duration);--_easing: var(--slotted-control-transition-easing);--_scrollbar-thumb: var( --slotted-notification-center-scrollbar-thumb-color, var(--slotted-border-strong, ButtonBorder) );--_scrollbar-track: var(--slotted-notification-center-scrollbar-track-color, transparent);background-color:var(--_ground);color:var(--_text);container-name:notification-center;container-type:inline-size;display:flex;flex-direction:column;font-family:var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);min-inline-size:0}[data-ui=notification-center][data-size=sm]{min-inline-size:var( --slotted-notification-center-min-inline-size-sm, min(22rem, calc(100vw - var(--slotted-space-8, 2rem))) );--_inset-inline: var( --slotted-notification-center-inset-inline-sm, var(--slotted-space-5, .75rem) );--_inset-block: var( --slotted-notification-center-inset-block-sm, var(--slotted-space-4, .5rem) );--_gap: var(--slotted-notification-center-gap-sm, var(--slotted-space-4, .5rem));--_title-size: var( --slotted-notification-center-title-size-sm, var(--slotted-font-size-md, .875rem) );--_title-line-height: var(--slotted-line-height-md, 1.5);--_item-title-size: var(--slotted-font-size-sm, .8125rem);--_item-title-line-height: var(--slotted-line-height-sm, 1.45);--_meta-size: var(--slotted-font-size-xs, .75rem);--_meta-line-height: var(--slotted-line-height-xs, 1.4);--_control: min( calc(var(--_glyph) + 2 * var(--slotted-space-2, .25rem)), var(--slotted-control-inner-size-sm, 22px) );--_visual: var(--slotted-avatar-size-xs, 24px);--_visual-glyph: calc(var(--_visual) * 6 / 7)}[data-ui=notification-center]>[data-part=header]{align-items:center;border-block-end:var(--_rule-size) solid var(--_rule);display:flex;flex-wrap:wrap;gap:var(--slotted-space-3, .375rem) var(--_gap);justify-content:flex-end;min-inline-size:0;padding-block:var(--_inset-block);padding-inline:var(--_inset-inline)}[data-ui=notification-center]>[data-part=header]>[data-part=title]{align-items:center;color:var(--_text);display:inline-flex;font-family:var( --slotted-font-family-heading, var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif) );font-size:var(--_title-size);font-weight:var(--slotted-font-weight-semibold, 600);gap:var(--slotted-space-3, .375rem);letter-spacing:-.01em;line-height:var(--_title-line-height);margin:0;margin-inline-end:auto;min-inline-size:0}[data-ui=notification-center] [data-part=count]{align-items:center;background-color:var(--slotted-surface-sunken, Canvas);block-size:var(--_count-box);border-radius:var(--slotted-radius-full, 9999px);border:var(--slotted-border-width-thin, 1px) solid color-mix(in oklab,currentcolor 20%,transparent);box-sizing:border-box;color:var(--_muted);display:inline-flex;font-size:var(--_count-size);font-variant-numeric:tabular-nums;font-weight:var(--slotted-font-weight-semibold, 600);justify-content:center;line-height:1;min-inline-size:var(--_count-box);padding-block:0;padding-inline:var(--slotted-space-2, .25rem)}[data-ui=notification-center]>[data-part=header]>[data-part=title]>[data-part=count]{background-color:var(--slotted-tone-accent-surface, Canvas);color:var(--slotted-tone-accent-text, Highlight)}[data-ui=notification-center]>[data-part=header]>[data-part=mark-all]{display:inline-flex}[data-ui=notification-center]>[data-part=header]>[data-part=actions]{align-items:center;display:inline-flex;font-size:var(--_meta-size);gap:var(--slotted-control-gap-sm, 6px);line-height:var(--_meta-line-height)}[data-ui=notification-center]>[data-part=views]{border-block-end:var(--_rule-size) solid var(--_rule);min-inline-size:0;padding-inline:var(--_inset-inline)}[data-ui=notification-center]>[data-part=fresh],[data-ui=notification-center]>button[data-part=more]{align-items:center;appearance:none;background-color:var(--_ground);border:var(--_rule-size) solid var(--_rule);border-radius:var(--slotted-radius-full, 9999px);color:var(--_text);cursor:pointer;display:flex;font:inherit;font-size:var(--_meta-size);font-weight:var(--slotted-font-weight-medium, 500);gap:var(--slotted-control-gap-sm, 6px);inline-size:fit-content;justify-content:center;line-height:var(--slotted-control-line-height, 1);margin-block:var(--_inset-block);margin-inline:auto;min-block-size:var(--slotted-control-height-sm, 30px);padding-inline:var(--slotted-control-padding-inline-md, 13px);transition:background-color var(--_duration) var(--_easing),border-color var(--_duration) var(--_easing),color var(--_duration) var(--_easing)}[data-ui=notification-center]>[data-part=fresh]{background-color:var(--slotted-tone-accent-surface, Canvas);border-color:var(--slotted-tone-accent-border, Highlight);color:var(--slotted-tone-accent-text, Highlight)}[data-ui=notification-center]>[data-part=fresh]:enabled:hover{background-color:var(--slotted-tone-accent-subtle-hover, Canvas)}[data-ui=notification-center]>[data-part=fresh]:enabled:active{background-color:var(--slotted-tone-accent-subtle-active, Canvas)}[data-ui=notification-center]>button[data-part=more]:enabled:hover{background-color:var(--_hover)}[data-ui=notification-center]>button[data-part=more]:enabled:active{background-color:var(--_active)}[data-ui=notification-center]>button[data-part=more]:disabled{color:var(--slotted-disabled-foreground, GrayText);cursor:default}[data-ui=notification-center]>div[data-part=more]{color:var(--_muted);font-size:var(--_meta-size);line-height:var(--_meta-line-height);min-block-size:var(--slotted-space-6, 1rem);padding-block:var(--_inset-block);padding-inline:var(--_inset-inline);text-align:center}[data-ui=notification-center]>[data-part=fresh]:focus-visible,[data-ui=notification-center]>button[data-part=more]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=notification-center]>[data-part=feed]{display:flex;flex:1 1 auto;flex-direction:column;min-block-size:0;min-inline-size:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:var(--_scrollbar-thumb) var(--_scrollbar-track);scrollbar-gutter:stable;scrollbar-width:thin}[data-ui=notification-center]>[data-part=feed]:has(+[data-part=footer])>[data-part=item]:last-child,[data-ui=notification-center]>[data-part=feed]:has(+[data-part=footer])>[data-part=group]:last-child>[data-part=item]:last-child{border-block-end:0}[data-ui=notification-center]>[data-part=feed]>[data-part=group]{display:flex;flex-direction:column;min-inline-size:0}[data-ui=notification-center]>[data-part=feed]>[data-part=group]>[data-part=group-label]{color:var(--_muted);font-size:var(--slotted-font-size-xs, .75rem);font-weight:var(--slotted-font-weight-semibold, 600);letter-spacing:.06em;line-height:var(--slotted-line-height-xs, 1.4);margin:0;padding-block:var(--_inset-block) var(--slotted-space-2, .25rem);padding-inline:var(--_inset-inline);text-transform:uppercase}[data-ui=notification-center]>[data-part=feed] [data-part=item]{align-items:flex-start;border-block-end:var(--_rule-size) solid var(--_rule);display:grid;gap:0 var(--slotted-space-4, .5rem);grid-template-columns:auto minmax(0,1fr) auto;min-inline-size:0;padding-block:var(--_inset-block);padding-inline:var(--_inset-inline);position:relative;transition:background-color var(--_duration) var(--_easing)}[data-ui=notification-center]>[data-part=feed] [data-part=item][data-tone=secondary]{--_tone-solid: var(--slotted-tone-secondary-solid, ButtonText);--_tone-text: var(--slotted-tone-secondary-text, ButtonText);--_tone-surface: var(--slotted-tone-secondary-surface, Canvas)}[data-ui=notification-center]>[data-part=feed] [data-part=item][data-tone=success]{--_tone-solid: var(--slotted-tone-success-solid, ButtonText);--_tone-text: var(--slotted-tone-success-text, ButtonText);--_tone-surface: var(--slotted-tone-success-surface, Canvas)}[data-ui=notification-center]>[data-part=feed] [data-part=item][data-tone=warning]{--_tone-solid: var(--slotted-tone-warning-solid, ButtonText);--_tone-text: var(--slotted-tone-warning-text, ButtonText);--_tone-surface: var(--slotted-tone-warning-surface, Canvas)}[data-ui=notification-center]>[data-part=feed] [data-part=item][data-tone=danger]{--_tone-solid: var(--slotted-tone-danger-solid, ButtonText);--_tone-text: var(--slotted-tone-danger-text, ButtonText);--_tone-surface: var(--slotted-tone-danger-surface, Canvas)}[data-ui=notification-center]>[data-part=feed] [data-part=item]:not([data-read]){background-color:var(--_unread-ground)}[data-ui=notification-center]>[data-part=feed] [data-part=item]:not([data-disabled]):hover{background-color:var(--_hover)}[data-ui=notification-center]>[data-part=feed] [data-part=item]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=visual]{align-items:center;display:flex;grid-column:1;justify-content:center;min-inline-size:0}[data-ui=notification-center]>[data-part=feed] [data-part=item]:not(:has(>[data-part=visual]))>[data-part=content]{grid-column:1 / 3}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=visual]:empty:not([data-tone]){display:none}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=visual][data-tone]:has(>[data-tone-glyph]){--slotted-icon-size: var(--_visual-glyph);align-items:center;background-image:radial-gradient(circle,var(--_tone-surface) calc(var(--_visual-glyph) * 9.5 / 24 - .5px),transparent calc(var(--_visual-glyph) * 9.5 / 24 + .5px));block-size:var(--_visual);color:var(--_tone-text);display:flex;inline-size:var(--_visual);justify-content:center}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=content]{display:flex;flex-direction:column;font-size:var(--_item-title-size);gap:var(--slotted-space-1, .125rem);grid-column:2;line-height:var(--_item-title-line-height);margin-block-start:max(0px,calc((var(--_visual) - 1lh) / 2));min-inline-size:0}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=content]>[data-part=title]{-webkit-box-orient:vertical;-webkit-line-clamp:var(--slotted-notification-center-title-clamp, 2);color:var(--_text);display:-webkit-box;font-size:var(--_item-title-size);font-weight:var(--slotted-font-weight-medium, 500);line-height:var(--_item-title-line-height);margin:0;overflow:hidden;overflow-wrap:anywhere;text-decoration:none}[data-ui=notification-center]>[data-part=feed] [data-part=item]:not([data-read])>[data-part=content]>[data-part=title]{font-weight:var(--slotted-font-weight-semibold, 600)}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=content]>a[data-part=title]:after{content:\"\";inset:0;position:absolute}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=content]>a[data-part=title]:not([data-disabled]):hover{text-decoration:underline;text-underline-offset:.15em}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=content]>a[data-part=title]:focus-visible{outline:none}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=content]>[data-part=description]{-webkit-box-orient:vertical;-webkit-line-clamp:var(--slotted-notification-center-description-clamp, 3);color:var(--_muted);display:-webkit-box;font-size:var(--_meta-size);line-height:var(--_meta-line-height);margin:0;overflow:hidden;overflow-wrap:anywhere}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=content]>[data-part=time]{color:var(--_muted);font-size:var(--_meta-size);font-variant-numeric:tabular-nums;line-height:var(--_meta-line-height)}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=content]>[data-part=actions]{align-items:center;display:flex;flex-wrap:wrap;gap:var(--slotted-control-gap-sm, 6px);margin-block-start:var(--slotted-space-2, .25rem);position:relative;z-index:1}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=controls]{display:flex;gap:var(--slotted-space-1, .125rem);grid-column:3;margin-block-start:max(0px,calc((var(--_visual) - var(--_control)) / 2));position:relative;z-index:1}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=controls]>button{--slotted-icon-size: var(--_glyph);align-items:center;appearance:none;background:none;block-size:var(--_control);border:0;border-radius:var(--slotted-control-radius, 4px);color:var(--_muted);cursor:pointer;display:inline-flex;font:inherit;inline-size:var(--_control);justify-content:center;padding:0;position:relative;transition:color var(--_duration) var(--_easing),background-color var(--_duration) var(--_easing)}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=controls]>button:before{block-size:max(var(--_control),var(--slotted-target-min, 24px));content:\"\";inline-size:max(var(--_control),var(--slotted-target-min, 24px));inset-block-start:50%;inset-inline-start:50%;position:absolute;translate:-50% -50%}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=controls]>button:enabled:hover{background-color:var(--_hover);color:var(--_text)}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=controls]>button:enabled:active{background-color:var(--_active)}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=controls]>button:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=notification-center][data-controls=read]>[data-part=feed] [data-part=item]>[data-part=controls]>[data-part=dismiss],[data-ui=notification-center][data-controls=dismiss]>[data-part=feed] [data-part=item]>[data-part=controls]>[data-part=read-toggle],[data-ui=notification-center][data-controls=none]>[data-part=feed] [data-part=item]>[data-part=controls]{display:none}[data-ui=notification-center]>[data-part=feed]>[data-part=item][aria-hidden]{background-color:transparent}[data-ui=notification-center]>[data-part=empty]{color:var(--_muted);display:grid;font-size:var(--_meta-size);line-height:var(--_meta-line-height);min-block-size:calc(2 * var(--slotted-space-12, 4rem));padding-block:var(--_inset-block);padding-inline:var(--_inset-inline);place-items:center;text-align:center}[data-ui=notification-center]>[data-part=footer]{align-items:center;border-block-start:var(--_rule-size) solid var(--_rule);display:flex;font-size:var(--_meta-size);gap:var(--_gap);justify-content:center;line-height:var(--_meta-line-height);margin-block-start:auto;padding-block:var(--_inset-block);padding-inline:var(--_inset-inline)}@container notification-center (max-width: 319px){[data-ui=notification-center]>[data-part=feed] [data-part=item]{grid-template-columns:auto minmax(0,1fr)}[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=controls]{grid-column:2;justify-content:flex-end;margin-block-start:var(--slotted-space-2, .25rem)}}@media(pointer:coarse){[data-ui=notification-center]>[data-part=feed] [data-part=item]>[data-part=controls]{--_control: var(--slotted-target-comfortable, 44px);margin-block-start:calc((var(--_visual) - var(--_control)) / 2)}}@media(forced-colors:active){[data-ui=notification-center] [data-part=count]{background-color:Highlight;border-color:Highlight;color:HighlightText;forced-color-adjust:none}}}\n"] }]
+                    }, styles: ["@layer slotted.components{[data-ui-notification-center]{--_text: var(--slotted-text, CanvasText);--_muted: var(--slotted-text-muted, GrayText);--_rule: var(--slotted-notification-center-border, var(--slotted-border-subtle, ButtonBorder));--_ground: var(--slotted-notification-center-background, var(--slotted-surface, Canvas));--_hover: var(--slotted-tone-secondary-subtle-hover, ButtonFace);--_active: var(--slotted-tone-secondary-subtle-active, ButtonFace);--_tone-solid: var(--slotted-tone-accent-solid, Highlight);--_tone-text: var(--slotted-tone-accent-text, Highlight);--_tone-surface: var(--slotted-tone-accent-surface, Canvas);--_unread-ground: color-mix( in oklab, var(--_tone-text) calc(var(--slotted-highlight-tint-opacity, .075) * 100%), transparent );--_inset-inline: var( --slotted-notification-center-inset-inline-md, var(--slotted-space-6, 1rem) );--_inset-block: var( --slotted-notification-center-inset-block-md, var(--slotted-space-5, .75rem) );--_gap: var(--slotted-notification-center-gap-md, var(--slotted-space-5, .75rem));--_title-size: var( --slotted-notification-center-title-size-md, var(--slotted-font-size-lg, 1rem) );--_title-line-height: var(--slotted-line-height-lg, 1.5);--_item-title-size: var(--slotted-font-size-md, .875rem);--_item-title-line-height: var(--slotted-line-height-md, 1.5);--_meta-size: var(--slotted-font-size-sm, .8125rem);--_meta-line-height: var(--slotted-line-height-sm, 1.45);--_visual: var(--slotted-avatar-size-sm, 28px);--_visual-glyph: calc(var(--_visual) * 6 / 7);--_count-size: var(--slotted-font-size-xs, .75rem);--_count-box: calc( var(--_count-size) + 2 * var(--slotted-space-1, .125rem) + 2 * var(--slotted-border-width-thin, 1px) );--_glyph: var(--slotted-control-icon-size-sm, 14px);--_control: min( calc(var(--_glyph) + 2 * var(--slotted-space-2, .25rem)), var(--slotted-control-inner-size-md, 24px) );--_rule-size: var(--slotted-border-width-thin, 1px);--_duration: var(--slotted-control-transition-duration);--_easing: var(--slotted-control-transition-easing);--_scrollbar-thumb: var( --slotted-notification-center-scrollbar-thumb-color, var(--slotted-border-strong, ButtonBorder) );--_scrollbar-track: var(--slotted-notification-center-scrollbar-track-color, transparent);background-color:var(--_ground);color:var(--_text);container-name:notification-center;container-type:inline-size;display:flex;flex-direction:column;font-family:var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);min-inline-size:0}[data-ui-notification-center][data-size=sm]{min-inline-size:var( --slotted-notification-center-min-inline-size-sm, min(22rem, calc(100vw - var(--slotted-space-8, 2rem))) );--_inset-inline: var( --slotted-notification-center-inset-inline-sm, var(--slotted-space-5, .75rem) );--_inset-block: var( --slotted-notification-center-inset-block-sm, var(--slotted-space-4, .5rem) );--_gap: var(--slotted-notification-center-gap-sm, var(--slotted-space-4, .5rem));--_title-size: var( --slotted-notification-center-title-size-sm, var(--slotted-font-size-md, .875rem) );--_title-line-height: var(--slotted-line-height-md, 1.5);--_item-title-size: var(--slotted-font-size-sm, .8125rem);--_item-title-line-height: var(--slotted-line-height-sm, 1.45);--_meta-size: var(--slotted-font-size-xs, .75rem);--_meta-line-height: var(--slotted-line-height-xs, 1.4);--_control: min( calc(var(--_glyph) + 2 * var(--slotted-space-2, .25rem)), var(--slotted-control-inner-size-sm, 22px) );--_visual: var(--slotted-avatar-size-xs, 24px);--_visual-glyph: calc(var(--_visual) * 6 / 7)}[data-ui-notification-center]>[data-part-header]{align-items:center;border-block-end:var(--_rule-size) solid var(--_rule);display:flex;flex-wrap:wrap;gap:var(--slotted-space-3, .375rem) var(--_gap);justify-content:flex-end;min-inline-size:0;padding-block:var(--_inset-block);padding-inline:var(--_inset-inline)}[data-ui-notification-center]>[data-part-header]>[data-part-title]{align-items:center;color:var(--_text);display:inline-flex;font-family:var( --slotted-font-family-heading, var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif) );font-size:var(--_title-size);font-weight:var(--slotted-font-weight-semibold, 600);gap:var(--slotted-space-3, .375rem);letter-spacing:-.01em;line-height:var(--_title-line-height);margin:0;margin-inline-end:auto;min-inline-size:0}[data-ui-notification-center] [data-part-count]{align-items:center;background-color:var(--slotted-surface-sunken, Canvas);block-size:var(--_count-box);border-radius:var(--slotted-radius-full, 9999px);border:var(--slotted-border-width-thin, 1px) solid color-mix(in oklab,currentcolor 20%,transparent);box-sizing:border-box;color:var(--_muted);display:inline-flex;font-size:var(--_count-size);font-variant-numeric:tabular-nums;font-weight:var(--slotted-font-weight-semibold, 600);justify-content:center;line-height:1;min-inline-size:var(--_count-box);padding-block:0;padding-inline:var(--slotted-space-2, .25rem)}[data-ui-notification-center]>[data-part-header]>[data-part-title]>[data-part-count]{background-color:var(--slotted-tone-accent-surface, Canvas);color:var(--slotted-tone-accent-text, Highlight)}[data-ui-notification-center]>[data-part-header]>[data-part-mark-all]{display:inline-flex}[data-ui-notification-center]>[data-part-header]>[data-part-actions]{align-items:center;display:inline-flex;font-size:var(--_meta-size);gap:var(--slotted-control-gap-sm, 6px);line-height:var(--_meta-line-height)}[data-ui-notification-center]>[data-part-views]{border-block-end:var(--_rule-size) solid var(--_rule);min-inline-size:0;padding-inline:var(--_inset-inline)}[data-ui-notification-center]>[data-part-fresh],[data-ui-notification-center]>button[data-part-more]{align-items:center;appearance:none;background-color:var(--_ground);border:var(--_rule-size) solid var(--_rule);border-radius:var(--slotted-radius-full, 9999px);color:var(--_text);cursor:pointer;display:flex;font:inherit;font-size:var(--_meta-size);font-weight:var(--slotted-font-weight-medium, 500);gap:var(--slotted-control-gap-sm, 6px);inline-size:fit-content;justify-content:center;line-height:var(--slotted-control-line-height, 1);margin-block:var(--_inset-block);margin-inline:auto;min-block-size:var(--slotted-control-height-sm, 30px);padding-inline:var(--slotted-control-padding-inline-md, 13px);transition:background-color var(--_duration) var(--_easing),border-color var(--_duration) var(--_easing),color var(--_duration) var(--_easing)}[data-ui-notification-center]>[data-part-fresh]{background-color:var(--slotted-tone-accent-surface, Canvas);border-color:var(--slotted-tone-accent-border, Highlight);color:var(--slotted-tone-accent-text, Highlight)}[data-ui-notification-center]>[data-part-fresh]:enabled:hover{background-color:var(--slotted-tone-accent-subtle-hover, Canvas)}[data-ui-notification-center]>[data-part-fresh]:enabled:active{background-color:var(--slotted-tone-accent-subtle-active, Canvas)}[data-ui-notification-center]>button[data-part-more]:enabled:hover{background-color:var(--_hover)}[data-ui-notification-center]>button[data-part-more]:enabled:active{background-color:var(--_active)}[data-ui-notification-center]>button[data-part-more]:disabled{color:var(--slotted-disabled-foreground, GrayText);cursor:default}[data-ui-notification-center]>div[data-part-more]{color:var(--_muted);font-size:var(--_meta-size);line-height:var(--_meta-line-height);min-block-size:var(--slotted-space-6, 1rem);padding-block:var(--_inset-block);padding-inline:var(--_inset-inline);text-align:center}[data-ui-notification-center]>[data-part-fresh]:focus-visible,[data-ui-notification-center]>button[data-part-more]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui-notification-center]>[data-part-feed]{display:flex;flex:1 1 auto;flex-direction:column;min-block-size:0;min-inline-size:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:var(--_scrollbar-thumb) var(--_scrollbar-track);scrollbar-gutter:stable;scrollbar-width:thin}[data-ui-notification-center]>[data-part-feed]:has(+[data-part-footer])>[data-part-item]:last-child,[data-ui-notification-center]>[data-part-feed]:has(+[data-part-footer])>[data-part-group]:last-child>[data-part-item]:last-child{border-block-end:0}[data-ui-notification-center]>[data-part-feed]>[data-part-group]{display:flex;flex-direction:column;min-inline-size:0}[data-ui-notification-center]>[data-part-feed]>[data-part-group]>[data-part-group-label]{color:var(--_muted);font-size:var(--slotted-font-size-xs, .75rem);font-weight:var(--slotted-font-weight-semibold, 600);letter-spacing:.06em;line-height:var(--slotted-line-height-xs, 1.4);margin:0;padding-block:var(--_inset-block) var(--slotted-space-2, .25rem);padding-inline:var(--_inset-inline);text-transform:uppercase}[data-ui-notification-center]>[data-part-feed] [data-part-item]{align-items:flex-start;border-block-end:var(--_rule-size) solid var(--_rule);display:grid;gap:0 var(--slotted-space-4, .5rem);grid-template-columns:auto minmax(0,1fr) auto;min-inline-size:0;padding-block:var(--_inset-block);padding-inline:var(--_inset-inline);position:relative;transition:background-color var(--_duration) var(--_easing)}[data-ui-notification-center]>[data-part-feed] [data-part-item][data-tone=secondary]{--_tone-solid: var(--slotted-tone-secondary-solid, ButtonText);--_tone-text: var(--slotted-tone-secondary-text, ButtonText);--_tone-surface: var(--slotted-tone-secondary-surface, Canvas)}[data-ui-notification-center]>[data-part-feed] [data-part-item][data-tone=success]{--_tone-solid: var(--slotted-tone-success-solid, ButtonText);--_tone-text: var(--slotted-tone-success-text, ButtonText);--_tone-surface: var(--slotted-tone-success-surface, Canvas)}[data-ui-notification-center]>[data-part-feed] [data-part-item][data-tone=info]{--_tone-solid: var(--slotted-tone-info-solid, ButtonText);--_tone-text: var(--slotted-tone-info-text, ButtonText);--_tone-surface: var(--slotted-tone-info-surface, Canvas)}[data-ui-notification-center]>[data-part-feed] [data-part-item][data-tone=warning]{--_tone-solid: var(--slotted-tone-warning-solid, ButtonText);--_tone-text: var(--slotted-tone-warning-text, ButtonText);--_tone-surface: var(--slotted-tone-warning-surface, Canvas)}[data-ui-notification-center]>[data-part-feed] [data-part-item][data-tone=danger]{--_tone-solid: var(--slotted-tone-danger-solid, ButtonText);--_tone-text: var(--slotted-tone-danger-text, ButtonText);--_tone-surface: var(--slotted-tone-danger-surface, Canvas)}[data-ui-notification-center]>[data-part-feed] [data-part-item]:not([data-read]){background-color:var(--_unread-ground)}[data-ui-notification-center]>[data-part-feed] [data-part-item]:not([data-disabled]):hover{background-color:var(--_hover)}[data-ui-notification-center]>[data-part-feed] [data-part-item]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui-notification-center]>[data-part-feed] [data-part-item]>[data-part-visual]{align-items:center;display:flex;grid-column:1;justify-content:center;min-inline-size:0}[data-ui-notification-center]>[data-part-feed] [data-part-item]:not(:has(>[data-part-visual]))>[data-part-content]{grid-column:1 / 3}[data-ui-notification-center]>[data-part-feed] [data-part-item]>[data-part-visual]:empty:not([data-tone]){display:none}[data-ui-notification-center]>[data-part-feed] [data-part-item]>[data-part-visual][data-tone]:has(>[data-tone-glyph]){--slotted-icon-size: var(--_visual-glyph);align-items:center;background-image:radial-gradient(circle,var(--_tone-surface) calc(var(--_visual-glyph) * 9.5 / 24 - .5px),transparent calc(var(--_visual-glyph) * 9.5 / 24 + .5px));block-size:var(--_visual);color:var(--_tone-text);display:flex;inline-size:var(--_visual);justify-content:center}[data-ui-notification-center]>[data-part-feed] [data-part-item]>[data-part-content]{display:flex;flex-direction:column;font-size:var(--_item-title-size);gap:var(--slotted-space-1, .125rem);grid-column:2;line-height:var(--_item-title-line-height);margin-block-start:max(0px,calc((var(--_visual) - 1lh) / 2));min-inline-size:0}[data-ui-notification-center]>[data-part-feed] [data-part-item]>[data-part-content]>[data-part-title]{-webkit-box-orient:vertical;-webkit-line-clamp:var(--slotted-notification-center-title-clamp, 2);color:var(--_text);display:-webkit-box;font-size:var(--_item-title-size);font-weight:var(--slotted-font-weight-medium, 500);line-height:var(--_item-title-line-height);margin:0;overflow:hidden;overflow-wrap:anywhere;text-decoration:none}[data-ui-notification-center]>[data-part-feed] [data-part-item]:not([data-read])>[data-part-content]>[data-part-title]{font-weight:var(--slotted-font-weight-semibold, 600)}[data-ui-notification-center]>[data-part-feed] [data-part-item]>[data-part-content]>a[data-part-title]:after{content:\"\";inset:0;position:absolute}[data-ui-notification-center]>[data-part-feed] [data-part-item]>[data-part-content]>a[data-part-title]:not([data-disabled]):hover{text-decoration:underline;text-underline-offset:.15em}[data-ui-notification-center]>[data-part-feed] [data-part-item]>[data-part-content]>a[data-part-title]:focus-visible{outline:none}[data-ui-notification-center]>[data-part-feed] [data-part-item]>[data-part-content]>[data-part-description]{-webkit-box-orient:vertical;-webkit-line-clamp:var(--slotted-notification-center-description-clamp, 3);color:var(--_muted);display:-webkit-box;font-size:var(--_meta-size);line-height:var(--_meta-line-height);margin:0;overflow:hidden;overflow-wrap:anywhere}[data-ui-notification-center]>[data-part-feed] [data-part-item]>[data-part-content]>[data-part-time]{color:var(--_muted);font-size:var(--_meta-size);font-variant-numeric:tabular-nums;line-height:var(--_meta-line-height)}[data-ui-notification-center]>[data-part-feed] [data-part-item]>[data-part-content]>[data-part-actions]{align-items:center;display:flex;flex-wrap:wrap;gap:var(--slotted-control-gap-sm, 6px);margin-block-start:var(--slotted-space-2, .25rem);position:relative;z-index:1}[data-ui-notification-center]>[data-part-feed] [data-part-item]>[data-part-controls]{display:flex;gap:var(--slotted-space-1, .125rem);grid-column:3;margin-block-start:max(0px,calc((var(--_visual) - var(--_control)) / 2));position:relative;z-index:1}[data-ui-notification-center]>[data-part-feed] [data-part-item]>[data-part-controls]>button{--slotted-icon-size: var(--_glyph);align-items:center;appearance:none;background:none;block-size:var(--_control);border:0;border-radius:var(--slotted-control-radius, 4px);color:var(--_muted);cursor:pointer;display:inline-flex;font:inherit;inline-size:var(--_control);justify-content:center;padding:0;position:relative;transition:color var(--_duration) var(--_easing),background-color var(--_duration) var(--_easing)}[data-ui-notification-center]>[data-part-feed] [data-part-item]>[data-part-controls]>button:before{block-size:max(var(--_control),var(--slotted-target-min, 24px));content:\"\";inline-size:max(var(--_control),var(--slotted-target-min, 24px));inset-block-start:50%;inset-inline-start:50%;position:absolute;translate:-50% -50%}[data-ui-notification-center]>[data-part-feed] [data-part-item]>[data-part-controls]>button:enabled:hover{background-color:var(--_hover);color:var(--_text)}[data-ui-notification-center]>[data-part-feed] [data-part-item]>[data-part-controls]>button:enabled:active{background-color:var(--_active)}[data-ui-notification-center]>[data-part-feed] [data-part-item]>[data-part-controls]>button:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui-notification-center][data-controls=read]>[data-part-feed] [data-part-item]>[data-part-controls]>[data-part-dismiss],[data-ui-notification-center][data-controls=dismiss]>[data-part-feed] [data-part-item]>[data-part-controls]>[data-part-read-toggle],[data-ui-notification-center][data-controls=none]>[data-part-feed] [data-part-item]>[data-part-controls]{display:none}[data-ui-notification-center]>[data-part-feed]>[data-part-item][aria-hidden]{background-color:transparent}[data-ui-notification-center]>[data-part-empty]{color:var(--_muted);display:grid;font-size:var(--_meta-size);line-height:var(--_meta-line-height);min-block-size:calc(2 * var(--slotted-space-12, 4rem));padding-block:var(--_inset-block);padding-inline:var(--_inset-inline);place-items:center;text-align:center}[data-ui-notification-center]>[data-part-footer]{align-items:center;border-block-start:var(--_rule-size) solid var(--_rule);display:flex;font-size:var(--_meta-size);gap:var(--_gap);justify-content:center;line-height:var(--_meta-line-height);margin-block-start:auto;padding-block:var(--_inset-block);padding-inline:var(--_inset-inline)}@container notification-center (max-width: 319px){[data-ui-notification-center]>[data-part-feed] [data-part-item]{grid-template-columns:auto minmax(0,1fr)}[data-ui-notification-center]>[data-part-feed] [data-part-item]>[data-part-controls]{grid-column:2;justify-content:flex-end;margin-block-start:var(--slotted-space-2, .25rem)}}@media(pointer:coarse){[data-ui-notification-center]>[data-part-feed] [data-part-item]>[data-part-controls]{--_control: var(--slotted-target-comfortable, 44px);margin-block-start:calc((var(--_visual) - var(--_control)) / 2)}}@media(forced-colors:active){[data-ui-notification-center] [data-part-count]{background-color:Highlight;border-color:Highlight;color:HighlightText;forced-color-adjust:none}}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], views: [{ type: i0.Input, args: [{ isSignal: true, alias: "views", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], growing: [{ type: i0.Input, args: [{ isSignal: true, alias: "growing", required: false }] }], arrivals: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrivals", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], controls: [{ type: i0.Input, args: [{ isSignal: true, alias: "controls", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], timeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZone", required: false }] }], now: [{ type: i0.Input, args: [{ isSignal: true, alias: "now", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], defaultView: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultView", required: false }] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }, { type: i0.Output, args: ["viewChange"] }], viewRequest: [{ type: i0.Output, args: ["viewRequest"] }], readRequest: [{ type: i0.Output, args: ["readRequest"] }], removeRequest: [{ type: i0.Output, args: ["removeRequest"] }], openRequest: [{ type: i0.Output, args: ["openRequest"] }], revealRequest: [{ type: i0.Output, args: ["revealRequest"] }], loadMoreRequest: [{ type: i0.Output, args: ["loadMoreRequest"] }], unreadChange: [{ type: i0.Output, args: ["unreadChange"] }], feedElement: [{ type: i0.ViewChild, args: ['feed', { isSignal: true }] }], freshElement: [{ type: i0.ViewChild, args: ['fresh', { isSignal: true }] }], moreElement: [{ type: i0.ViewChild, args: ['more', { isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlNotificationItem), { isSignal: true }] }], visualTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlNotificationVisual), { isSignal: true }] }], actionsTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlNotificationActions), { isSignal: true }] }] } });
 /** The consumer's own controls in the header, after mark-all: a preferences link, a menu. */
 class SlNotificationCenterActions {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlNotificationCenterActions, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlNotificationCenterActions, isStandalone: true, selector: "[slNotificationCenterActions]", host: { attributes: { "data-part": "actions" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlNotificationCenterActions, isStandalone: true, selector: "[slNotificationCenterActions]", host: { attributes: { "data-part": "actions", "data-part-actions": "" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlNotificationCenterActions, decorators: [{
             type: Directive,
             args: [{
                     selector: '[slNotificationCenterActions]',
                     standalone: true,
-                    host: { 'data-part': 'actions' },
+                    host: { 'data-part': 'actions', 'data-part-actions': '' },
                 }]
         }] });
 /** The consumer's link from the popover to the page. */
 class SlNotificationCenterFooter {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlNotificationCenterFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlNotificationCenterFooter, isStandalone: true, selector: "[slNotificationCenterFooter]", host: { attributes: { "data-part": "footer" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlNotificationCenterFooter, isStandalone: true, selector: "[slNotificationCenterFooter]", host: { attributes: { "data-part": "footer", "data-part-footer": "" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlNotificationCenterFooter, decorators: [{
             type: Directive,
             args: [{
                     selector: '[slNotificationCenterFooter]',
                     standalone: true,
-                    host: { 'data-part': 'footer' },
+                    host: { 'data-part': 'footer', 'data-part-footer': '' },
                 }]
         }] });
 /** The empty page: a result-state, projected in place of the family's words. */