@tacc/core-styles 2.53.2 → 2.54.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tacc/core-styles",
-  "version": "2.53.2",
+  "version": "2.54.0",
   "license": "MIT",
   "author": "TACC COA CMD <coa-cmd@tacc.utexas.edu>",
   "contributors": [
@@ -10,8 +10,8 @@
   "files": [
     "dist",
     "docs/bootstrap.md",
-    "fractal.config.js",
-    "fractal.theme.js",
+    "fractality.config.js",
+    "fractality.theme.js",
     "src/cli.js",
     "src/bin",
     "src/lib",
@@ -20,20 +20,19 @@
   "main": "src/main.js",
   "bin": "src/cli.js",
   "scripts": {
-    "start": "fractal start --sync",
+    "start": "fractality start --sync",
     "build": "npm run build:css && npm run build:demo",
     "build:css": "bin/build.js --build-id=$npm_config_build_id",
     "build:tokens": "bin/build-tokens.js",
     "postbuild:css": "rm -rf dist/fonts && cp -r src/lib/fonts dist/fonts",
     "prebuild:demo": "rm -rf dist/_utils && cp -r src/lib/_utils dist/_utils",
     "prestart": "npm run prebuild:demo",
-    "build:demo": "fractal build",
-    "test": "bin/test.js && echo \"Test output at 'dist/_tests' (compare to test input)\"",
-    "build:watch": "npm run build:css && touch src/lib/_imports/fractal.server.refresh.css",
+    "build:demo": "fractality build",
+    "build:watch": "npm run build:css && touch src/lib/_imports/fractality.server.refresh.css",
     "watch": "npm-watch"
   },
   "engines": {
-    "node": ">=15.x",
+    "node": ">=20.x",
     "npm": ">=7.x"
   },
   "homepage": "https://github.com/TACC/Core-Styles",
@@ -71,9 +70,9 @@
     "postcss-replace": "To edit relative paths to fonts"
   },
   "devDependencies": {
-    "@frctl/fractal": "^1.5.15",
-    "@frctl/handlebars": "^1.2.15",
-    "@frctl/mandelbrot": "^1.10.1",
+    "@fractality/fractality": "^1.6.3",
+    "@fractality/handlebars": "^1.4.3",
+    "@fractality/mandelbrot": "^1.12.3",
     "minimist": "^1.2.7",
     "npm-watch": "^0.13.0"
   },
@@ -90,7 +89,7 @@
       "patterns": "src/**/*",
       "extensions": "css,json",
       "ignore": [
-        "fractal.server.refresh.css",
+        "fractality.server.refresh.css",
         "tokens/*.json"
       ]
     }

package/src/lib/_imports/README.md

@@ -16,7 +16,7 @@ These directories are based on [ITCSS][tacc-itcss].
 
 ## Documentation Format
 
-See [Fractal: User Guide: Components][fractal-docs-guide]. (What we call "Patterns", Fractal calls "Components".)
+See [Fractality: User Guide: Components][fractality-docs-guide]. (What we call "Patterns", Fractality calls "Components".)
 
 ### Overview
 
@@ -37,4 +37,4 @@ See [TACC: CSS Style Guide][tacc-style-guide].
 
 [tacc-oocss]: https://tacc-main.atlassian.net/wiki/x/7Atv 'TACC: Object-Oriented CSS'
 [tacc-style-guide]: https://tacc-main.atlassian.net/wiki/x/7Bdv 'TACC: CSS Style Guide'
-[fractal-docs-guide]: https://fractal.build/guide/components/#what-defines-a-component 'Fractal: User Guide: Components'
+[fractality-docs-guide]: https://fractal.build/guide/components/#what-defines-a-component 'Fractality: User Guide: Components'

package/src/lib/_imports/_preview.hbs

@@ -16,6 +16,7 @@
 <style>
   @import url('https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css') layer(foundation);
 </style>
+{{> @import-client-styles styles=bootstrap5Styles }}
 {{/unless}}
 {{/if}}
 {{#if _target.context.shouldLoadBootstrap }}

package/src/lib/_imports/bootstrap4/components/btn/btn.hbs

@@ -9,18 +9,18 @@
         class="btn btn-{{type}}{{#if size}} btn-{{size}}{{/if}}{{#if active}} active{{/if}}"
         {{#if disabled}}disabled{{/if}}
     >
-        {{#if hasIconBefore}}<i class="icon icon-user"></i>{{/if}}
+        {{#if hasIconBefore}}<i class="icon icon-user">Meaningful text or add [aria-hidden="true"]</i>{{/if}}
         {{text}}
-        {{#if hasIconAfter}}<i class="icon icon-user"></i>{{/if}}
+        {{#if hasIconAfter}}<i class="icon icon-user">Meaningful text or add [aria-hidden="true"]</i>{{/if}}
     </button>
     {{else}}
     <a
         href="{{href}}"
         class="btn btn-link"
     >
-        {{#if hasIconBefore}}<i class="icon icon-user"></i>{{/if}}
+        {{#if hasIconBefore}}<i class="icon icon-user">Meaningful text or add [aria-hidden="true"]</i>{{/if}}
         {{text}}
-        {{#if hasIconAfter}}<i class="icon icon-user"></i>{{/if}}
+        {{#if hasIconAfter}}<i class="icon icon-user">Meaningful text or add [aria-hidden="true"]</i>{{/if}}
     </a>
     {{/unless}}
     </dd>

package/src/lib/_imports/bootstrap4/utilities/{color/color--text.hbs → color-text/color-text.hbs}

@@ -7,9 +7,9 @@
         class="text-{{type}}{{#if size}} text-{{size}}{{/if}}"
         {{#if disabled}}disabled{{/if}}
     >
-        {{#if hasIconBefore}}<i class="icon icon-user"></i>{{/if}}
+        {{#if hasIconBefore}}<i class="icon icon-user">Meaningful text or add [aria-hidden="true"]</i>{{/if}}
         {{text}}
-        {{#if hasIconAfter}}<i class="icon icon-user"></i>{{/if}}
+        {{#if hasIconAfter}}<i class="icon icon-user">Meaningful text or add [aria-hidden="true"]</i>{{/if}}
     </{{#if asLink}}a{{else}}p{{/if}}>
     </dd>
     {{/types}}

package/src/lib/_imports/bootstrap4/utilities/{color → color-text}/config.yml

@@ -1,7 +1,4 @@
-variants:
-  - name: default
-    hidden: True
-  - name: text
+label: Color (Text)
 context:
   shouldLoadBootstrap: true
   supportStyles:

package/src/lib/_imports/bootstrap4/utilities/color-text.css

@@ -43,7 +43,7 @@ a.text-primary:is(
   :hover,
   :focus
 ) {
-  color: var(--global-color-accent--normal) !important;
+  color: var(--global-color-accent--light) !important;
 }
 a.text-secondary:is(
   :link,
@@ -62,5 +62,5 @@ a[class*="text-"]:not(
   :hover,
   :focus
 ) {
-  color: var(--global-color-accent--normal) !important;
+  color: var(--global-color-accent--light) !important;
 }

package/src/lib/_imports/bootstrap5/utilities/config.yml

@@ -0,0 +1,2 @@
+context:
+  subdir: bootstrap5/utilities

package/src/lib/_imports/bootstrap5/utilities/link/config.yml

@@ -0,0 +1,15 @@
+label: Link
+context:
+  shouldLoadBootstrap5: true
+  groups:
+    - title: Colored links
+      types:
+      - type: primary
+      - type: secondary
+      - type: success
+      - type: danger
+      - type: warning
+      - type: info
+      - type: light
+      - type: dark
+      - type: body-emphasis

package/src/lib/_imports/bootstrap5/utilities/link/link.hbs

@@ -0,0 +1,17 @@
+{{#groups}}
+<dl>
+    <dt>{{title}}</dt>
+    {{#types}}
+    <dd><a href="#" class="link-{{type}}">{{type}}</a></dd>
+    {{/types}}
+</dl>
+{{/groups}}
+<dl>
+  <dt>Summary</dt>
+  <dd>
+    <details>
+      <summary class="link-primary">Toggle</summary>
+      <p>Content</p>
+    </details>
+  </dd>
+</dl>

package/src/lib/_imports/bootstrap5/utilities/link/readme.md

@@ -0,0 +1,3 @@
+To skin [Bootstrap 5 colored links](https://getbootstrap.com/docs/5.3/helpers/colored-links/).
+
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/bootstrap5/utilities/link.css

@@ -0,0 +1,61 @@
+@import url("../../tools/x-link.css");
+
+@import url("./link.selectors.css");
+
+:not(a):is(
+  .link-primary,
+  .link-secondary
+) {
+  @mixin link;
+
+  &:--link-disabled {
+    @mixin link--disabled;
+  }
+  &:hover {
+    @mixin link--hover;
+  }
+  &:active {
+    @mixin link--active;
+  }
+}
+
+.link-primary {
+  &,
+  &:hover,
+  &:active,
+  &:focus,
+  &:focus-visible,
+  &:--link-disabled {
+    color: var(--global-color-accent--normal) !important;
+    text-decoration-color: currentColor !important;
+  }
+}
+
+.link-secondary {
+  &,
+  &:hover,
+  &:active,
+  &:focus,
+  &:focus-visible,
+  &:--link-disabled {
+    color: var(--global-color-secondary--normal) !important;
+    text-decoration-color: currentColor !important;
+  }
+}
+
+.link-success,
+.link-danger,
+.link-warning,
+.link-info,
+.link-light,
+.link-dark,
+.link-body-emphasis {
+  &,
+  &:hover,
+  &:active,
+  &:focus,
+  &:focus-visible {
+    color: inherit !important;
+    text-decoration-color: currentColor !important;
+  }
+}

package/src/lib/_imports/bootstrap5/utilities/link.selectors.css

@@ -0,0 +1,5 @@
+@custom-selector :--link-disabled
+    a:not([href]),
+    :disabled,
+    [aria-disabled="true"],
+    .disabled;

package/src/lib/_imports/components/bootstrap.modal.css

@@ -42,7 +42,6 @@
 
 /* To darken close button */
 .modal-header .close {
-  color: var(--global-color-primary--x-dark);
   opacity: 1;
 }
 /* FAQ: The specificity matches Bootstrap */

package/src/lib/_imports/components/bootstrap.nav-tabs.css

@@ -7,6 +7,7 @@
 
 .nav-tabs {
   @extend .x-tabs;
+  border-bottom: none;
 }
 ul.nav-tabs {
   padding-left: unset; /* overwrite core-styles.cms.css */

package/src/lib/_imports/components/c-app-card/c-app-card.hbs

@@ -8,7 +8,7 @@
     <div class="c-app-card">
     {{/if}}
       <h3 class="c-app-card__title">
-        {{#if icon}}<i class="icon icon-user"></i>{{/if}}
+        {{#if icon}}<i class="icon icon-user">Meaningful text or add [aria-hidden="true"]</i>{{/if}}
         {{!-- FAQ: These custom icons are not available in Cortal --}}
         {{!-- {{#if icon}}<i class="icon icon-{{icon}}"></i>{{/if}} --}}
         {{title}}

package/src/lib/_imports/components/c-feed-list/c-feed-list.hbs

@@ -13,7 +13,7 @@
             <h3>Upcoming Events</h3>
 
             <article>
-                <time>May 15, 2024</time>
+                <time datetime="2024-05-15">May 15, 2024</time>
                 <h4>
                     <a href="#">Workshop: Advanced Data Analysis</a>
                 </h4>
@@ -43,8 +43,12 @@
             <h3>User Updates</h3>
 
             <article>
-                <time data-prefix="Published:" datetime="2024-04-29">
-                    <span>April 29, 2024</span>
+                <time
+                    data-prefix="Published:"
+                    aria-label="Published April 29, 2024"
+                    datetime="2024-04-29"
+                >
+                    April 29, 2024
                 </time>
                 <h4><a href="#" target="_blank">New Feature Release</a></h4>
                 <p>We're excited to announce the release of new features to enhance your experience. These updates include improved performance and additional customization options.</p>
@@ -52,9 +56,18 @@
             </article>
 
             <article class="has-update">
-                <time data-prefix="Published:" datetime="2024-04-28">
-                    <span>April 28, 2024</span>
-                    <span class="c-pill c-pill--is-updated">Update</span>
+                <time
+                    data-prefix="Published:"
+                    aria-label="Published April 28, 2024"
+                    datetime="2024-04-28"
+                >
+                    April 28, 2024
+
+                    <span
+                        class="c-pill c-pill--is-updated"
+                    >
+                        Updated
+                    </span>
                 </time>
                 <h4><a href="#" target="_blank">System Maintenance</a></h4>
                 <p>Planned maintenance will occur this weekend. The system will be unavailable from 10 PM to 2 AM.</p>

package/src/lib/_imports/components/c-update/c-update.hbs

@@ -4,7 +4,11 @@
     <aside class="c-update">
       <header class="c-update__header">
         <h3 class="c-update__title">
-          <span class="c-pill c-pill--is-updated">Update</span>&nbsp;
+          <span
+            class="c-pill c-pill--is-updated"
+          >
+            Updated
+          </span>&nbsp;
         </h3>
         <span>Published:</span>&nbsp;
         <time datetime="2023-10-13T14:27:18.637000">

package/src/lib/_imports/core-styles.bootstrap4.css

@@ -3,4 +3,4 @@
 
 @import url("./bootstrap4/components/btn.css");
 @import url("./bootstrap4/components/card.css");
-@import url("./bootstrap4/utilities/color.css");
+@import url("./bootstrap4/utilities/color-text.css");

package/src/lib/_imports/core-styles.bootstrap5.css

@@ -0,0 +1,4 @@
+/*! core-styles.bootstrap5.css */
+/* DO NOT ADD STYLES HERE; ONLY IMPORT OTHER STYLESHEETS */
+
+@import url("./bootstrap5/utilities/link.css");

package/src/lib/_imports/elements/demo.css

@@ -18,7 +18,7 @@ main > dl {
 
   & :is(dt, dd):not(.no-demo-styles > *) {
     font-family: var(--global-font-family--sans);
-    color: #484848;
+    color: var(--global-color-primary--xx-dark);
     line-height: normal;
   }
   & dt:not(.no-demo-styles > *) {

package/src/lib/_imports/elements/monospace.css

@@ -56,7 +56,7 @@ pre {
 & :--monospace--block,
 & :--monospace--inline {
   background-color: var(--global-color-primary--x-light);
-  color: var(--global-color-primary--x-dark);
+  color: var(--global-color-primary--xx-dark);
   border: var(--global-border--normal);
 }
 & :--monospace--output:not(:--monospace--boxed) {

package/src/lib/_imports/elements/root.css

@@ -38,7 +38,7 @@ body {
   min-width: 290px; /* developer-decided value */
 
   /* To overwrite Bootstrap */
-  color: var(--global-color-primary--x-dark);
+  color: var(--global-color-primary--xx-dark);
 
   /* Prevent trackpad scroll from showing white background beyond page height */
   overscroll-behavior-y: none;

package/src/lib/_imports/elements/table--basic.css

@@ -60,8 +60,6 @@ tr:nth-child(even) :is(th, td),
   vertical-align: top;
   padding-block: var(--cell-pad-vert);
   padding-inline: var(--cell-pad-horz);
-
-  color: var(--global-color-primary--dark);
 }
 /* To ensure <thead> height matches between browsers */
 /* IMPORTANT: More than for consistency; `table--nested.css` requires this */
@@ -79,8 +77,6 @@ tr:nth-child(even) :is(th, td),
 }
 
 th {
-  color: var(--global-color-primary--x-dark);
-
   text-align: inherit; /* copied from Bootstrap 4.0.0 */
 }
 thead > tr > th {

package/src/lib/_imports/generics/attributes/attributes.hbs

@@ -1,3 +1,7 @@
-<time data-prefix="Published:" >
-  <span>OCTOBER 3, 2023</span>
-</time>
+<time
+  data-prefix="Published:"
+  aria-label="Published October 3, 2023"
+  datetime="2023-10-03"
+>
+  OCTOBER 3, 2023
+</time>

package/src/lib/_imports/generics/attributes.css

@@ -1,4 +1,5 @@
 /* To render data-prefix value as prefixed text */
+/* WARNING: Important text must also have `aria-label="some explanation"` */
 [data-prefix]::before {
   display: inline-block;
   content: attr(data-prefix);

package/src/lib/_imports/objects/o-section.css

@@ -71,20 +71,17 @@
 /* Modifers: Style: Options */
 
 :--o-section--light {
-  --color--text: var(--global-color-primary--x-dark);
-  --color--text-strong: var(--global-color-primary--xx-dark);
+  --color--text: var(--global-color-primary--xx-dark);
   --color--bkgd: var(--global-color-primary--xx-light);
   --color--line: var(--global-color-primary--normal);
 }
 :--o-section--muted {
-  --color--text: var(--global-color-primary--x-dark);
-  --color--text-strong: var(--global-color-primary--xx-dark);
+  --color--text: var(--global-color-primary--xx-dark);
   --color--bkgd: var(--global-color-primary--x-light);
   --color--line: var(--global-color-primary--dark);
 }
 :--o-section--dark {
   --color--text: var(--global-color-primary--xx-light);
-  --color--text-strong: var(--global-color-primary--xx-light);
   --color--bkgd: var(--global-color-primary--xx-dark);
   --color--line: var(--global-color-primary--xx-light);
 }
@@ -104,17 +101,6 @@
   box-shadow: none;
 }
 
-/* Modifers: Style: Child Text */
-
-/* To color text, but not those within certain contexts */
-:--o-section--style :is(h1, h3, h4, h5, h6):not(
-  :--c-card--plain *,
-  :--c-card--standard *,
-  :--c-card--standard-N *
-) {
-  color: var(--color--text-strong);
-}
-
 
 
 /* Modifers: Layout */

package/src/lib/_imports/objects/o-table-wrap/o-table-wrap--overflow-scroll-extra.css

@@ -1,2 +1,2 @@
 /* This file exists solely so UI demo loads a `.html` page for it */
-/* FAQ: Without this file, the page only works via `fractal start` */
+/* FAQ: Without this file, the page only works via `fractality start` */

package/src/lib/_imports/settings/color/color.hbs

@@ -12,10 +12,19 @@
             {{> @color--swatch name="--global-color-primary--xx-light"}}
             {{> @color--swatch name="--global-color-primary--x-light"}}
             {{> @color--swatch name="--global-color-primary--light"}}
+            {{> @color--swatch name="--global-color-primary--light-alt"}}
             {{> @color--swatch name="--global-color-primary--normal"}}
             {{> @color--swatch name="--global-color-primary--dark"}}
             {{> @color--swatch name="--global-color-primary--x-dark"}}
             {{> @color--swatch name="--global-color-primary--xx-dark"}}
+            {{> @color--swatch name="--global-color-primary--xxx-dark"
+                not-available="true"}}
+          </div>
+        </dd>
+        <dt>Deprecated</dt>
+        <dd>
+          <div class="demo-palette">
+            {{> @color--swatch name="--global-color-primary--xxx-light"}}
             {{> @color--swatch name="--global-color-primary--xxx-dark"}}
           </div>
         </dd>
@@ -40,15 +49,18 @@
         <dt>Tints &amp; Shades</dt>
         <dd>
           <div class="demo-palette">
-            {{> @color--swatch name="--global-color-accent--xxx-light"}}
+            {{> @color--swatch name="--global-color-accent--xxx-light"
+                not-available="true"}}
             {{> @color--swatch name="--global-color-accent--xx-light"}}
             {{> @color--swatch name="--global-color-accent--x-light"}}
             {{> @color--swatch name="--global-color-accent--light"}}
+            {{> @color--swatch name="--global-color-accent--light-alt"}}
             {{> @color--swatch name="--global-color-accent--normal"}}
             {{> @color--swatch name="--global-color-accent--dark"}}
             {{> @color--swatch name="--global-color-accent--x-dark"}}
             {{> @color--swatch name="--global-color-accent--xx-dark"}}
-            {{> @color--swatch name="--global-color-accent--xxx-dark"}}
+            {{> @color--swatch name="--global-color-accent--xxx-dark"
+                not-available="true"}}
           </div>
         </dd>
         <dt>Deprecated</dt>
@@ -56,6 +68,8 @@
           <div class="demo-palette">
             {{> @color--swatch name="--global-color-accent--secondary"}}
             {{> @color--swatch name="--global-color-accent--tertiary"}}
+            {{> @color--swatch name="--global-color-accent--xxx-light"}}
+            {{> @color--swatch name="--global-color-accent--xxx-dark"}}
           </div>
         </dd>
       </dl>

package/src/lib/_imports/settings/color.accent.css

@@ -5,7 +5,7 @@
   --global-color-accent--xxx-light: #ffffff; /* DEPRECATED */
   --global-color-accent--xx-light: #dfeafe;
   --global-color-accent--x-light: design-token('color.v2.blue.light-2x');
-  --global-color-accent--light: design-token('color.v2.blue.light-x');
+  --global-color-accent--light: design-token('color.v2.blue.light-alt');
   --global-color-accent--normal: design-token('color.v2.blue.light');
   --global-color-accent--dark: design-token('color.v2.blue.medium');
   --global-color-accent--x-dark: design-token('color.v2.blue.dark');

package/src/lib/_imports/settings/color.css

@@ -25,7 +25,7 @@
   --global-color-primary--dark: design-token('color.gray.dark');
   --global-color-primary--x-dark: design-token('color.gray.dark-x');
   --global-color-primary--xx-dark: design-token('color.gray.dark-2x');
-  --global-color-primary--xxx-dark: #000000;
+  --global-color-primary--xxx-dark: #000000; /* DEPRECATED */
 
 
 
@@ -34,7 +34,7 @@
   --global-color-accent--xxx-light: #dfeafe; /* DEPRECATED */
   --global-color-accent--xx-light: design-token('color.v2.blue.light-2x');
   --global-color-accent--x-light: design-token('color.v2.blue.light-x');
-  --global-color-accent--light-old: design-token('color.v2.blue.light-old'); /* DEPRECATED */
+  --global-color-accent--light-alt: design-token('color.v2.blue.light-alt');
   --global-color-accent--light: design-token('color.v2.blue.light');
   --global-color-accent--normal: design-token('color.v2.blue.medium');
   --global-color-accent--dark: design-token('color.v2.blue.dark');
@@ -114,6 +114,6 @@
   /* DEPRECATED */
   /* TODO: Rely on :--light-context and :--dark-context instead */
 
-  --global-color-link-on-light--normal: var(--global-color-accent--normal);
+  --global-color-link-on-light--normal: var(--global-color-accent--light);
   --global-color-link-on-dark--normal: var(--global-color-accent--xxx-light);
 }

package/src/lib/_imports/tools/x-feed-list/x-feed-list.hbs

@@ -13,7 +13,12 @@
             <h3 class="x-feed-list__title">Upcoming Events</h3>
             
             <article class="x-feed-list__item">
-                <time class="x-feed-list__item-time">May 15, 2024</time>
+                <time
+                    class="x-feed-list__item-time"
+                    datetime="2024-05-15"
+                >
+                    May 15, 2024
+                </time>
                 <h4 class="x-feed-list__item-name">
                     <a href="#">Workshop: Advanced Data Analysis</a>
                 </h4>
@@ -43,8 +48,13 @@
             <h3 class="x-feed-list__title">User Updates</h3>
             
             <article class="x-feed-list__item">
-                <time class="x-feed-list__item-time" data-prefix="Published:" datetime="2024-04-29">
-                    <span>April 29, 2024</span>
+                <time
+                    class="x-feed-list__item-time"
+                    data-prefix="Published:"
+                    aria-label="Published April 29, 2024"
+                    datetime="2024-04-29"
+                >
+                    April 29, 2024
                 </time>
                 <h4 class="x-feed-list__item-name"><a href="#" target="_blank">New Feature Release</a></h4>
                 <p class="x-feed-list__item-desc">We're excited to announce the release of new features to enhance your experience. These updates include improved performance and additional customization options.</p>
@@ -52,9 +62,19 @@
             </article>
 
             <article class="x-feed-list__item has-update">
-                <time class="x-feed-list__item-time" data-prefix="Published:" datetime="2024-04-28">
-                    <span>April 28, 2024</span>
-                    <span class="c-pill c-pill--is-updated">Update</span>
+                <time
+                    class="x-feed-list__item-time"
+                    data-prefix="Published:"
+                    aria-label="Published April 28, 2024"
+                    datetime="2024-04-28"
+                >
+                    April 28, 2024
+
+                    <span
+                        class="c-pill c-pill--is-updated"
+                    >
+                        Updated
+                    </span>
                 </time>
                 <h4 class="x-feed-list__item-name"><a href="#" target="_blank">System Maintenance</a></h4>
                 <p class="x-feed-list__item-desc">Planned maintenance will occur this weekend. The system will be unavailable from 10 PM to 2 AM.</p>