@gtivr4/a1-design-system-react 0.1.0 → 0.2.4

package/src/components/menu/menu.css

@@ -1,45 +1,185 @@
+/* ── Menu shell ───────────────────────────────────────────────────────────── */
+
 .a1-menu {
-  /* Override browser centering; place below the header on the right */
   position: fixed;
-  top: 72px; /* 64px header + 8px gap */
-  right: var(--base-spacing-16);
+  z-index: var(--component-menu-z-index, 1000);
+  top: var(--a1-menu-top, 0);
+  right: auto;
   bottom: auto;
-  left: auto;
+  left: var(--a1-menu-left, 0);
   margin: 0;
+  box-sizing: border-box;
 
-  width: 260px;
-  max-height: calc(100dvh - 88px);
+  width: var(--component-menu-width);
+  max-width: calc(100dvw - (var(--component-menu-viewport-offset) * 2));
+  max-height: var(--a1-menu-max-height, calc(100dvh - var(--component-menu-viewport-offset)));
+  overflow-x: hidden;
   overflow-y: auto;
+  overscroll-behavior: contain;
 
-  padding: var(--base-spacing-20);
-  border: 1px solid var(--semantic-color-border-subtle);
+  padding: var(--base-spacing-8);
+  border: var(--component-menu-border-width) solid var(--semantic-color-border-subtle);
   border-radius: var(--base-radius-lg);
   background: var(--semantic-color-surface-panel);
   box-shadow: var(--semantic-shadow-lg);
   color: var(--semantic-color-text-default);
 }
 
+.a1-menu > .a1-menu__close {
+  display: none;
+}
+
 .a1-menu::backdrop {
-  background: color-mix(in srgb, var(--base-color-neutral-900) 30%, transparent);
+  background: transparent;
 }
 
+/* ── Section ─────────────────────────────────────────────────────────────── */
+
 .a1-menu__section {
   display: flex;
   flex-direction: column;
-  gap: var(--base-spacing-8);
+  gap: var(--base-spacing-2);
+  min-width: 0;
 }
 
-.a1-menu__section + .a1-menu__section {
-  margin-top: var(--base-spacing-16);
-  padding-top: var(--base-spacing-16);
-  border-top: 1px solid var(--semantic-color-border-subtle);
+.a1-menu__section:first-of-type .a1-menu__section-divider {
+  display: none;
 }
 
 .a1-menu__section-label {
   margin: 0;
+  padding: var(--base-spacing-4) var(--base-spacing-8);
   color: var(--semantic-color-text-muted);
   font-size: var(--semantic-font-size-body-xs);
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
+  font-weight: var(--component-menu-section-label-font-weight);
+  overflow-wrap: anywhere;
+}
+
+/* ── MenuItem ────────────────────────────────────────────────────────────── */
+
+.a1-menu-item {
+  display: flex;
+  align-items: center;
+  gap: var(--base-spacing-8);
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  padding: var(--base-spacing-6) var(--base-spacing-8);
+  border: none;
+  border-radius: var(--base-radius-control);
+  background: transparent;
+  color: var(--semantic-color-text-default);
+  font-family: var(--semantic-font-family-body);
+  font-size: var(--semantic-font-size-body-sm);
+  font-weight: var(--component-menu-item-font-weight);
+  line-height: var(--component-menu-item-line-height);
+  text-align: start;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background var(--semantic-motion-duration-fast) var(--semantic-motion-easing-standard);
+}
+
+.a1-menu-item:hover {
+  background: color-mix(in srgb, var(--semantic-color-surface-panel), var(--semantic-color-text-default) 6%);
+}
+
+.a1-menu-item:active {
+  background: color-mix(in srgb, var(--semantic-color-surface-panel), var(--semantic-color-text-default) 12%);
+}
+
+.a1-menu-item:focus-visible {
+  outline: var(--component-menu-item-focus-ring-width) solid var(--semantic-color-text-accent);
+  outline-offset: var(--component-menu-item-focus-ring-offset);
+}
+
+.a1-menu-item:disabled,
+.a1-menu-item[aria-disabled="true"] {
+  opacity: var(--component-menu-item-disabled-opacity);
+  cursor: not-allowed;
+}
+
+.a1-menu-item:disabled:hover,
+.a1-menu-item[aria-disabled="true"]:hover {
+  background: transparent;
+}
+
+/* Active / current-page indicator */
+.a1-menu-item--active {
+  color: var(--semantic-color-text-default);
+  background: var(--semantic-color-action-surface);
+  border-inline-start: 2px solid var(--semantic-color-action-background);
+  padding-inline-start: calc(var(--base-spacing-8) - 2px);
+}
+
+.a1-menu-item--active .a1-menu-item__icon {
+  color: var(--semantic-color-action-background);
+}
+
+/* Destructive variant */
+.a1-menu-item--destructive {
+  color: var(--semantic-color-status-error-text);
+}
+
+.a1-menu-item--destructive:hover {
+  background: var(--semantic-color-status-error-surface);
+}
+
+.a1-menu-item--destructive:active {
+  background: color-mix(in srgb, var(--semantic-color-status-error-surface), var(--semantic-color-status-error-text) 12%);
+}
+
+/* Parts */
+.a1-menu-item__icon {
+  font-size: var(--component-menu-item-icon-size);
+  flex-shrink: 0;
+  color: var(--semantic-color-text-muted);
+}
+
+.a1-menu-item--destructive .a1-menu-item__icon {
+  color: var(--semantic-color-status-error-text);
+}
+
+.a1-menu-item__label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.a1-menu-item__shortcut {
+  flex: 0 1 auto;
+  max-width: 45%;
+  overflow: hidden;
+  font-size: var(--semantic-font-size-body-xs);
+  color: var(--semantic-color-text-muted);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@media (--bp-xs) {
+  .a1-menu {
+    inset: auto 0 0;
+    width: 100dvw;
+    max-width: 100dvw;
+    max-height: min(var(--component-menu-mobile-max-height), calc(100dvh - var(--base-spacing-32)));
+    padding:
+      var(--base-spacing-16)
+      var(--base-spacing-16)
+      calc(var(--base-spacing-40) + env(safe-area-inset-bottom, 0px));
+    border-right: none;
+    border-bottom: none;
+    border-left: none;
+    border-radius: var(--base-radius-xl) var(--base-radius-xl) 0 0;
+  }
+
+  .a1-menu > .a1-menu__close {
+    display: flex;
+    margin-inline-start: auto;
+    margin-bottom: var(--base-spacing-8);
+  }
+
+  .a1-menu::backdrop {
+    background: var(--component-scrim-color);
+    backdrop-filter: blur(var(--component-scrim-blur));
+  }
 }

package/src/components/message/Message.jsx

@@ -1,6 +1,7 @@
 import "./message.css";
 import { Icon } from "../icon/Icon.jsx";
-import { IconButton } from "../icon-button/IconButton.jsx";
+import { Heading } from "../heading/Heading.jsx";
+import { Paragraph } from "../paragraph/Paragraph.jsx";
 
 const STATUS_ICONS = {
   neutral: "info",
@@ -13,65 +14,30 @@ const STATUS_ICONS = {
 const STATUSES   = ["neutral", "info", "success", "warn", "error"];
 const ES_SCALES  = ["page", "section", "card"];
 
-/* ═══════════════════════════════════════════════════════════════════════════
-   MessageBanner
-   ═══════════════════════════════════════════════════════════════════════════ */
-
-export function MessageBanner({
-  status = "neutral",
-  title,
-  icon,
-  onDismiss,
-  children,
-}) {
-  const resolvedStatus = STATUSES.includes(status) ? status : "neutral";
-  const resolvedIcon = icon ?? STATUS_ICONS[resolvedStatus];
-
-  return (
-    <div
-      className={`a1-message-banner a1-message-banner--${resolvedStatus}`}
-      role="alert"
-      aria-live="polite"
-    >
-      <span className="a1-message-banner__icon" aria-hidden="true">
-        <Icon name={resolvedIcon} />
-      </span>
-
-      <div className="a1-message-banner__content">
-        {title   && <p className="a1-message-banner__title">{title}</p>}
-        {children && <p className="a1-message-banner__body">{children}</p>}
-      </div>
-
-      {onDismiss && (
-        <IconButton
-          icon="close"
-          label="Dismiss"
-          onClick={onDismiss}
-          className="a1-message-banner__dismiss"
-        />
-      )}
-    </div>
-  );
-}
+const ES_SCALE_CONFIG = {
+  page:    { headingAs: "h1", headingSize: "sm", paragraphSize: "lg" },
+  section: { headingAs: "h2", headingSize: "xs", paragraphSize: "md" },
+  card:    { headingAs: "h3", headingSize: "xs", paragraphSize: "sm" },
+};
 
 /* ═══════════════════════════════════════════════════════════════════════════
    MessageBadge  (inline filled status chip)
    ═══════════════════════════════════════════════════════════════════════════ */
 
-const VARIANTS = ["bold", "subtle"];
-
-export function MessageBadge({ status = "neutral", variant = "bold", icon, children }) {
+export function MessageBadge({ status = "neutral", subtle = false, size = "md", icon, children }) {
   const resolvedStatus = STATUSES.includes(status) ? status : "neutral";
-  const resolvedVariant = VARIANTS.includes(variant) ? variant : "bold";
-  const resolvedIcon = icon ?? STATUS_ICONS[resolvedStatus];
+  // icon={null} explicitly suppresses the icon; undefined falls back to the status default
+  const resolvedIcon = icon === null ? null : (icon ?? STATUS_ICONS[resolvedStatus]);
 
   return (
     <span className={[
       "a1-message-badge",
       `a1-message-badge--${resolvedStatus}`,
-      resolvedVariant === "subtle" && "a1-message-badge--subtle",
+      subtle && "a1-message-badge--subtle",
+      size === "sm" && "a1-message-badge--sm",
+      size === "lg" && "a1-message-badge--lg",
     ].filter(Boolean).join(" ")}>
-      <Icon name={resolvedIcon} />
+      {resolvedIcon && <Icon name={resolvedIcon} />}
       {children}
     </span>
   );
@@ -89,14 +55,23 @@ export function MessageEmptyState({
   action,
 }) {
   const resolvedScale = ES_SCALES.includes(scale) ? scale : "section";
+  const { headingAs, headingSize, paragraphSize } = ES_SCALE_CONFIG[resolvedScale];
 
   return (
     <div className={`a1-message-empty a1-message-empty--${resolvedScale}`}>
       <div className="a1-message-empty__icon-wrap" aria-hidden="true">
         <Icon name={icon} />
       </div>
-      {title       && <p className="a1-message-empty__title">{title}</p>}
-      {description && <p className="a1-message-empty__description">{description}</p>}
+      {title       && (
+        <Heading as={headingAs} size={headingSize} className="a1-message-empty__title">
+          {title}
+        </Heading>
+      )}
+      {description && (
+        <Paragraph size={paragraphSize} color="muted" className="a1-message-empty__description">
+          {description}
+        </Paragraph>
+      )}
       {action      && <div className="a1-message-empty__action">{action}</div>}
     </div>
   );

package/src/components/message/message.css

@@ -3,6 +3,7 @@
    ═══════════════════════════════════════════════════════════════════════════ */
 
 .a1-message-banner {
+  box-sizing: border-box;
   /* defaults: neutral */
   --a1-msg-surface: var(--semantic-color-surface-panel);
   --a1-msg-border:  var(--semantic-color-border-subtle);
@@ -42,7 +43,7 @@
   flex-shrink: 0;
   color: var(--a1-msg-accent);
   font-size: var(--component-message-banner-icon-size);
-  line-height: 1;
+  line-height: var(--component-message-badge-line-height);
   margin-top: var(--component-message-banner-icon-margin-top);
   --a1-icon-opsz: var(--component-message-banner-icon-optical-size);
 }
@@ -80,22 +81,27 @@
 }
 
 /* ═══════════════════════════════════════════════════════════════════════════
-   MessageBadge  (inline status chip — filled)
+   MessageBadge  (inline status chip)
    ═══════════════════════════════════════════════════════════════════════════ */
 
 .a1-message-badge {
-  /* defaults: neutral */
-  --a1-msg-accent:     var(--semantic-color-action-background);
-  --a1-msg-foreground: var(--semantic-color-action-foreground);
+  /* neutral defaults — bold and subtle vars */
+  --a1-badge-bg:            var(--semantic-color-text-muted);
+  --a1-badge-fg:            var(--semantic-color-text-inverse);
+  --a1-badge-subtle-bg:     var(--semantic-color-surface-raised);
+  --a1-badge-subtle-fg:     var(--semantic-color-text-muted);
+  --a1-badge-subtle-border: var(--semantic-color-border-default);
 
   display: inline-flex;
+  width: fit-content;
+  max-width: 100%;
   align-items: center;
   gap: var(--base-spacing-4);
   padding: var(--component-message-badge-padding-block)
            var(--component-message-badge-padding-inline);
   border-radius: var(--component-message-badge-border-radius);
-  background: var(--a1-msg-accent);
-  color: var(--a1-msg-foreground);
+  background: var(--a1-badge-bg);
+  color: var(--a1-badge-fg);
   font-family: var(--component-paragraph-font-family);
   font-size: var(--semantic-font-size-body-sm);
   font-weight: var(--component-message-badge-font-weight);
@@ -104,31 +110,55 @@
 }
 
 .a1-message-badge--info {
-  --a1-msg-accent:     var(--semantic-color-status-info-background);
-  --a1-msg-foreground: var(--semantic-color-status-info-foreground);
+  --a1-badge-bg:            var(--semantic-color-status-info-background);
+  --a1-badge-fg:            var(--semantic-color-status-info-foreground);
+  --a1-badge-subtle-bg:     var(--semantic-color-status-info-surface);
+  --a1-badge-subtle-fg:     var(--semantic-color-status-info-background);
+  --a1-badge-subtle-border: var(--semantic-color-status-info-border);
 }
 .a1-message-badge--success {
-  --a1-msg-accent:     var(--semantic-color-status-success-background);
-  --a1-msg-foreground: var(--semantic-color-status-success-foreground);
+  --a1-badge-bg:            var(--semantic-color-status-success-background);
+  --a1-badge-fg:            var(--semantic-color-status-success-foreground);
+  --a1-badge-subtle-bg:     var(--semantic-color-status-success-surface);
+  --a1-badge-subtle-fg:     var(--semantic-color-status-success-background);
+  --a1-badge-subtle-border: var(--semantic-color-status-success-border);
 }
 .a1-message-badge--warn {
-  --a1-msg-accent:     var(--semantic-color-status-warn-background);
-  --a1-msg-foreground: var(--semantic-color-status-warn-foreground);
+  --a1-badge-bg:            var(--base-color-warn-200);
+  --a1-badge-fg:            var(--base-color-neutral-900);
+  --a1-badge-subtle-bg:     var(--semantic-color-status-warn-surface);
+  --a1-badge-subtle-fg:     var(--semantic-color-status-warn-text);
+  --a1-badge-subtle-border: var(--semantic-color-status-warn-border);
 }
 .a1-message-badge--error {
-  --a1-msg-accent:     var(--semantic-color-status-error-background);
-  --a1-msg-foreground: var(--semantic-color-status-error-foreground);
+  --a1-badge-bg:            var(--semantic-color-status-error-background);
+  --a1-badge-fg:            var(--semantic-color-status-error-foreground);
+  --a1-badge-subtle-bg:     var(--semantic-color-status-error-surface);
+  --a1-badge-subtle-fg:     var(--semantic-color-status-error-text);
+  --a1-badge-subtle-border: var(--semantic-color-status-error-border);
 }
 
-/* Subtle variant — light surface + border, no fill */
+/* subtle — overrides to the surface/outlined style for whichever status is active */
 .a1-message-badge--subtle {
-  --a1-msg-accent:     var(--semantic-color-action-surface);
-  --a1-msg-foreground: var(--semantic-color-action-background);
-  border: 1px solid var(--semantic-color-action-border);
+  --a1-badge-bg: var(--a1-badge-subtle-bg);
+  --a1-badge-fg: var(--a1-badge-subtle-fg);
+  outline: var(--component-message-badge-border-width) solid var(--a1-badge-subtle-border);
+}
+
+.a1-message-badge--sm {
+  padding: var(--component-message-badge-sm-padding-block)
+           var(--component-message-badge-sm-padding-inline);
+  font-size: var(--semantic-font-size-body-xs);
+}
+
+.a1-message-badge--lg {
+  padding: var(--component-message-badge-lg-padding-block)
+           var(--component-message-badge-lg-padding-inline);
+  font-size: var(--semantic-font-size-body-md);
 }
 
 .a1-message-badge .a1-icon {
-  font-size: 1em;
+  font-size: var(--component-message-badge-icon-size);
 }
 
 /* ═══════════════════════════════════════════════════════════════════════════
@@ -202,25 +232,12 @@
 
 .a1-message-empty__title {
   margin: 0;
-  font-family: var(--component-heading-font-family-heading);
-  font-weight: var(--component-heading-font-weight-heading);
-  color: var(--semantic-color-text-default);
 }
 
-.a1-message-empty--page    .a1-message-empty__title { font-size: var(--semantic-font-size-heading-sm); }
-.a1-message-empty--section .a1-message-empty__title { font-size: var(--semantic-font-size-heading-xs); }
-.a1-message-empty--card    .a1-message-empty__title { font-size: var(--semantic-font-size-body-sm); }
-
 .a1-message-empty__description {
   margin: 0;
-  font-family: var(--component-paragraph-font-family);
-  color: var(--semantic-color-text-muted);
 }
 
-.a1-message-empty--page    .a1-message-empty__description { font-size: var(--semantic-font-size-body-md); }
-.a1-message-empty--section .a1-message-empty__description { font-size: var(--semantic-font-size-body-sm); }
-.a1-message-empty--card    .a1-message-empty__description { font-size: var(--semantic-font-size-body-xs); }
-
 .a1-message-empty__action {
   margin-top: var(--base-spacing-4);
 }

package/src/components/notification/Notification.jsx

@@ -47,7 +47,7 @@ export function Notification({
   return (
     <span className="a1-notification-root">
       {children}
-      <span className={classes} aria-label={ariaLabel}>
+      <span className={classes} role={ariaLabel ? "img" : undefined} aria-label={ariaLabel}>
         {content}
       </span>
     </span>

package/src/components/page-layout/PageLayout.jsx

@@ -5,7 +5,10 @@ export function PageLayout({
   footer,
   sidebar,
   sidebarPlacement = "start",
+  aside,
+  asidePlacement = "end",
   stickyHeader = false,
+  viewportHeight = false,
   className = "",
   children,
   ...props
@@ -13,7 +16,9 @@ export function PageLayout({
   const rootClasses = [
     "a1-page-layout",
     stickyHeader && "a1-page-layout--sticky-header",
+    viewportHeight && "a1-page-layout--viewport-height",
     sidebar && `a1-page-layout--sidebar-${sidebarPlacement}`,
+    aside && `a1-page-layout--aside-${asidePlacement}`,
     className,
   ]
     .filter(Boolean)
@@ -29,7 +34,17 @@ export function PageLayout({
         {sidebar && (
           <aside className="a1-page-layout__sidebar">{sidebar}</aside>
         )}
-        <main className="a1-page-layout__main">{children}</main>
+        <div className="a1-page-layout__content">
+          {aside && asidePlacement === "start" && (
+            <aside className="a1-page-layout__aside">{aside}</aside>
+          )}
+          <main className="a1-page-layout__main">
+            <div className="a1-page-layout__main-scroll" tabIndex={0}>{children}</div>
+          </main>
+          {aside && asidePlacement !== "start" && (
+            <aside className="a1-page-layout__aside">{aside}</aside>
+          )}
+        </div>
       </div>
 
       {footer && (

package/src/components/page-layout/page-layout.css

@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   min-height: 100vh;
+  min-height: 100dvh;
   background: var(--semantic-color-surface-page);
   color: var(--semantic-color-text-default);
 }
@@ -20,7 +21,6 @@
   display: flex;
   flex: 1 1 auto;
   min-height: 0;
-  gap: var(--component-page-layout-gap);
 }
 
 .a1-page-layout--sidebar-start .a1-page-layout__body {
@@ -41,21 +41,114 @@
   width: auto;
 }
 
+.a1-page-layout__content {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  min-width: 0;
+}
+
+.a1-page-layout--aside-start .a1-page-layout__content,
+.a1-page-layout--aside-end .a1-page-layout__content {
+  display: grid;
+  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+  align-items: start;
+}
+
+.a1-page-layout--aside-start .a1-page-layout__content {
+  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+}
+
+.a1-page-layout--aside-start .a1-page-layout__aside {
+  grid-column: 1;
+}
+
+.a1-page-layout--aside-start .a1-page-layout__main {
+  grid-column: 2;
+}
+
 .a1-page-layout__main {
   flex: 1 1 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+}
+
+.a1-page-layout__main-scroll {
+  flex: 1 1 0;
+  min-height: 0;
   min-width: 0;
 }
 
+.a1-page-layout__aside {
+  min-width: 0;
+  /* Stretch to match the main column height so that sticky children
+     have a tall-enough containing block to actually stick. */
+  align-self: stretch;
+}
+
 .a1-page-layout__footer {
   flex-shrink: 0;
 }
 
-@media (max-width: 640px) {
-  .a1-page-layout__body {
-    flex-direction: column !important;
+/* ── Viewport-height mode (editor / app shell layouts) ───────────────────── */
+/* Each panel scrolls independently; the outer container never overflows.     */
+
+.a1-page-layout--viewport-height {
+  height: 100vh;
+  height: 100dvh;
+  overflow: hidden;
+}
+
+.a1-page-layout--viewport-height .a1-page-layout__body {
+  overflow: hidden;
+}
+
+.a1-page-layout--viewport-height .a1-page-layout__sidebar {
+  overflow-y: auto;
+}
+
+.a1-page-layout--viewport-height .a1-page-layout__content {
+  overflow: hidden;
+}
+
+.a1-page-layout--viewport-height.a1-page-layout--aside-end .a1-page-layout__content,
+.a1-page-layout--viewport-height.a1-page-layout--aside-start .a1-page-layout__content {
+  align-items: stretch;
+}
+
+.a1-page-layout--viewport-height .a1-page-layout__aside {
+  overflow-y: auto;
+}
+
+.a1-page-layout--viewport-height .a1-page-layout__main {
+  overflow: hidden;
+}
+
+.a1-page-layout--viewport-height .a1-page-layout__main-scroll {
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+  -webkit-overflow-scrolling: touch;
+}
+
+@media (--bp-sm-down) {
+  .a1-page-layout.a1-page-layout .a1-page-layout__body {
+    flex-direction: column;
   }
 
   .a1-page-layout__sidebar {
     width: 100%;
   }
+
+  .a1-page-layout--aside-start .a1-page-layout__content,
+  .a1-page-layout--aside-end .a1-page-layout__content {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .a1-page-layout--aside-start .a1-page-layout__aside,
+  .a1-page-layout--aside-start .a1-page-layout__main {
+    grid-column: auto;
+  }
 }