@neo-design/foundations 1.1.0 → 1.2.1

package/css/announcement-bar.css

@@ -0,0 +1,107 @@
+/* packages/foundations/css/announcement-bar.css — emitted without comments. The reasoning behind each decision lives in Neo's source repository. */
+
+.announcement-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--neo-space-lg-rem);
+  padding: var(--neo-space-lg-rem) var(--neo-space-4xl-rem);
+  background-color: var(--fill--deco--2--solid);
+  color: var(--text--base--contrast);
+}
+
+.announcement-bar__content {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: var(--neo-space-md-rem);
+  min-width: 0;
+  padding: 0 var(--neo-space-lg-rem) 0 0;
+}
+
+.announcement-bar__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  width: var(--neo-icon-size-md-rem);
+  height: var(--neo-icon-size-md-rem);
+}
+
+.announcement-bar__text {
+  flex: 1 1 0;
+  min-width: 0;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  font-size: var(--neo-type-body-lg-medium-size-rem);
+  font-weight: var(--neo-type-body-lg-medium-weight);
+  line-height: var(--neo-type-body-lg-medium-line-height-rem);
+}
+
+.announcement-bar__link,
+.announcement-bar__button {
+  flex-shrink: 0;
+  align-self: center;
+  white-space: nowrap;
+}
+
+.announcement-bar__link {
+  color: var(--text--base--contrast);
+}
+
+.announcement-bar__close {
+  flex-shrink: 0;
+}
+
+@media (max-width: 1279px) {
+  .announcement-bar {
+    padding: var(--neo-space-lg-rem) var(--neo-space-3xl-rem);
+  }
+}
+
+@media (max-width: 1023px) {
+  .announcement-bar {
+    padding: var(--neo-space-lg-rem) var(--neo-space-2xl-rem);
+  }
+}
+
+@media (max-width: 719px) {
+  .announcement-bar {
+    align-items: flex-start;
+    padding: var(--neo-space-lg-rem);
+  }
+
+  .announcement-bar__content {
+    padding: 0;
+  }
+
+  .announcement-bar__text {
+    -webkit-line-clamp: 4;
+    font-size: var(--neo-type-body-md-medium-size-rem);
+    font-weight: var(--neo-type-body-md-medium-weight);
+    line-height: var(--neo-type-body-md-medium-line-height-rem);
+  }
+
+  .announcement-bar__link,
+  .announcement-bar__button {
+    align-self: flex-start;
+    margin-left: calc(var(--neo-icon-size-md-rem) + var(--neo-space-md-rem));
+  }
+
+  .announcement-bar__text {
+    flex: 1 1 calc(100% - var(--neo-icon-size-md-rem) - var(--neo-space-md-rem));
+    padding-top: 0.125rem;
+  }
+
+  .announcement-bar__close {
+    margin-top: -0.625rem;
+    margin-right: -0.625rem;
+  }
+}
+
+.announcement-bar__link:focus-visible {
+  outline: var(--neo-stroke-focus-ring-width) solid var(--focus--ring--inverse);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 var(--neo-stroke-focus-ring-width) var(--focus--gap--inverse);
+  border-radius: var(--neo-radius-xs);
+}

package/css/brand-loader.css

@@ -178,13 +178,13 @@
   20%, 100% { opacity: 0; }
 }
 .brand-loader__messages--5 .brand-loader__message { animation: neo-brand-loader-message-5 15s linear infinite both; }
-.brand-loader__message:nth-child(2) { animation-delay: 3s; }
-.brand-loader__message:nth-child(3) { animation-delay: 6s; }
-.brand-loader__message:nth-child(4) { animation-delay: 9s; }
-.brand-loader__message:nth-child(5) { animation-delay: 12s; }
+.brand-loader__message:nth-of-type(2) { animation-delay: 3s; }
+.brand-loader__message:nth-of-type(3) { animation-delay: 6s; }
+.brand-loader__message:nth-of-type(4) { animation-delay: 9s; }
+.brand-loader__message:nth-of-type(5) { animation-delay: 12s; }
 
 @media (prefers-reduced-motion: reduce) {
   .brand-loader__load { animation: none; stroke-dashoffset: 0; }
   .brand-loader__messages .brand-loader__message { animation: none; }
-  .brand-loader__messages .brand-loader__message:not(:first-child) { visibility: hidden; }
+  .brand-loader__messages .brand-loader__message:not(:first-of-type) { visibility: hidden; }
 }

package/css/index.css

@@ -1,6 +1,7 @@
 /* packages/foundations/css/index.css — emitted without comments. The reasoning behind each decision lives in Neo's source repository. */
 
 @import './alert.css';
+@import './announcement-bar.css';
 @import './aspect-ratio.css';
 @import './badge.css';
 @import './banner.css';
@@ -29,10 +30,10 @@
 @import './toggle.css';
 @import './tooltip.css';
 
-.alert, .aspect-ratio, .badge, .notification, .banner, .btn, .checkbox, .checkbox-group,
+.alert, .announcement-bar, .aspect-ratio, .badge, .notification, .banner, .btn, .checkbox, .checkbox-group,
 .bottom-sheet, .brand-loader, .brand-loader-shell, .chip, .chips-group, .combobox, .drawer, .empty-state, .empty-state-shell, .link, .menu-item, .menu-list, .menu-divider, .modal-overlay, .modal-dialog,
 .modal-full, .radio, .radio-group, .select, .skeleton, .snackbar, .spinner, .tabs, .tag, .field, .toggle, .tooltip,
-.alert *, .aspect-ratio *, .badge *, .banner *, .btn *, .checkbox *, .chip *, .combobox *,
+.alert *, .announcement-bar *, .aspect-ratio *, .badge *, .banner *, .btn *, .checkbox *, .chip *, .combobox *,
 .bottom-sheet *, .brand-loader *, .drawer *, .empty-state *, .menu-item *, .menu-list *, .modal-dialog *, .modal-full *, .radio *, .select *, .snackbar *, .tabs *,
 .tag *, .field *, .toggle *, .tooltip *,
 [role="tablist"], [role="tab"] {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo-design/foundations",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "description": "Neo — the system foundations: semantic tokens in JS and CSS, icons and the plain CSS layer. It does not depend on React or Material UI.",
   "homepage": "https://github.com/jzamorano-ui/neo-ds/blob/main/docs/dev/INTEGRATION.md",
   "repository": {