@salemcobalt/ui 0.2.0-rc.35 → 0.2.0-rc.36

package/dist/index.d.ts

@@ -1310,12 +1310,19 @@ declare const Toolbar: {
 };
 
 type BannerTone = 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+type BannerPlacement = 'inline' | 'page';
 interface BannerProps extends ComponentPropsWithRef<'div'> {
     /** Colour and default icon. `warning` and `danger` are announced as alerts; the rest as status. */
     tone?: BannerTone | undefined;
+    /**
+     * `inline` (default): a rounded strip inside a view. `page`: a full-bleed notice across the top of the page, above
+     * the header: square, compact, with a hairline under it. A page notice is there on every load, so pass
+     * `role="status"` with a `warning` tone unless it must interrupt.
+     */
+    placement?: BannerPlacement | undefined;
     /** Replaces the tone's icon; `false` removes it. */
     icon?: ReactNode | false | undefined;
-    /** One Button, usually `variant="ghost" size="sm"`, at the end of the strip. */
+    /** One Button, usually `variant="ghost" size="sm"`, at the end of the strip; or an Inline of two (Details, Hide). */
     action?: ReactNode | undefined;
     /** Shows a close button that hides the banner. */
     dismissible?: boolean | undefined;
@@ -1327,7 +1334,7 @@ interface BannerProps extends ComponentPropsWithRef<'div'> {
     dismissLabel?: string | undefined;
 }
 /** A single-line status strip across the top of a view: paused, offline, "3 new since you looked". */
-declare function Banner({ tone, icon, action, dismissible, onDismiss, open, dismissLabel, role, className, children, ...rest }: BannerProps): react.JSX.Element | null;
+declare function Banner({ tone, placement, icon, action, dismissible, onDismiss, open, dismissLabel, role, className, children, ...rest }: BannerProps): react.JSX.Element | null;
 
 interface SpinnerProps extends ComponentPropsWithRef<'span'> {
     /** `xs` 12, `sm` 14, `md` 16 (default), `lg` 20, `xl` 24, or `em` to follow the font size. */

package/dist/index.js

@@ -1505,6 +1505,7 @@ var toneIcons = {
 };
 function Banner({
   tone = "info",
+  placement = "inline",
   icon,
   action,
   dismissible = false,
@@ -1526,6 +1527,7 @@ function Banner({
       role: role ?? (tone === "warning" || tone === "danger" ? "alert" : "status"),
       className: cx("sc-banner", className),
       "data-tone": tone,
+      "data-placement": placement === "page" ? "page" : void 0,
       ...rest,
       children: [
         glyph ? /* @__PURE__ */ jsx18("span", { className: "sc-banner__icon", "aria-hidden": "true", children: glyph }) : null,