barua-ui 0.4.2 → 0.6.0

package/css/base.css

@@ -29,7 +29,10 @@
     min-height: 100dvh;
   }
 
-  img, picture, video, canvas, svg { display: block; max-width: 100%; }
+  img, picture, video, canvas, svg, iframe { display: block; max-width: 100%; }
+  /* An iframe's inset border is legacy chrome, like a button's face. A mail
+     body or an embedded document should sit on the page, not in a box. */
+  iframe { border: 0; }
   input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
   p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
 

package/css/components/content.css

@@ -225,7 +225,21 @@
     gap: var(--b-space-3);
     padding: var(--b-space-3) var(--b-space-4);
     font-size: var(--b-text-subheadline);
+    /* A row that does something is a <button>, and a <button> arrives wearing
+       the browser's own face: a grey plate, a border and centred text. Left
+       unstated, a whole list of actions renders as a column of grey slabs —
+       which is exactly what a mailbox did. Said once here, because every list
+       of actions would otherwise have to say it again. */
+    width: 100%;
+    text-align: start;
+    color: inherit;
+    background: none;
+    border: none;
   }
+  /* Three lines and a timestamp: the mark and the time belong beside the first
+     line, not floating in the middle of a tall row. */
+  .b-list-item--top { align-items: flex-start; }
+  .b-list-item--top .b-list-item__trailing { align-items: flex-end; flex-direction: column; gap: var(--b-space-1); }
   .b-list > .b-list-item + .b-list-item { border-top: 1px solid var(--b-separator); }
   .b-list--inset-divider > .b-list-item + .b-list-item {
     border-top: none;
@@ -678,6 +692,7 @@
     color: currentColor;
   }
   .b-icon svg { width: 100%; height: 100%; }
+  .b-icon--xs { width: 0.75rem; height: 0.75rem; }
   .b-icon--sm { width: 1rem; height: 1rem; }
   .b-icon--lg { width: 1.5rem; height: 1.5rem; }
   .b-icon--xl { width: 2rem; height: 2rem; }
@@ -692,6 +707,7 @@
   }
   /* iOS Settings-row size: small solid square, white glyph */
   .b-icon-tile--sm { width: 1.85rem; height: 1.85rem; border-radius: var(--b-radius-sm); }
+  .b-icon-tile svg { width: 1.25rem; height: 1.25rem; }
   .b-icon-tile--sm svg { width: 1.05rem; height: 1.05rem; }
   .b-icon-tile--solid  { color: #fff; background: var(--b-color-accent); }
   .b-icon-tile--green  { color: #fff; background: var(--b-color-green); }
@@ -701,7 +717,6 @@
   .b-icon-tile--teal   { color: #fff; background: var(--b-color-teal); }
   .b-icon-tile--indigo { color: #fff; background: var(--b-color-indigo); }
   .b-icon-tile--gray   { color: #fff; background: var(--b-gray-1); }
-  .b-icon-tile svg { width: 1.25rem; height: 1.25rem; }
 
   /* ---- Image ------------------------------------------------------------------------------------ */
   .b-img { border-radius: var(--b-radius-lg); object-fit: cover; }

package/css/components/feedback.css

@@ -35,6 +35,15 @@
   }
   .b-alert__close:hover { color: var(--b-text); }
 
+  /* No opinion. The default alert is info-tinted, which turns a plain
+     "still working on it" strip blue and gives it a meaning it does not
+     have. This is the same anatomy on the neutral surface. */
+  .b-alert--neutral {
+    background: var(--b-fill-quaternary);
+    border-color: var(--b-border);
+  }
+  .b-alert--neutral .b-alert__icon { color: var(--b-text-secondary); }
+
   .b-alert--success {
     background: var(--b-color-success-soft);
     border-color: color-mix(in srgb, var(--b-color-success) 30%, transparent);

package/css/components/overlays.css

@@ -158,6 +158,23 @@
     .b-sheet[open] { translate: 100% 0; }
   }
   .b-sheet::backdrop { background: var(--b-scrim); }
+
+  /* The scrim, as a class rather than a pseudo-element.
+     `::backdrop` is drawn by the browser for a top-layer element — a native
+     <dialog> or a [popover] — and nothing else. An overlay that portals a
+     plain <div> instead, to keep a focus trap the top layer cannot give it,
+     has no backdrop to style, and every such component was repeating these
+     six declarations inline. Opacity is left to the caller, because only it
+     knows whether the overlay is arriving or leaving. */
+  .b-scrim {
+    position: fixed;
+    inset: 0;
+    z-index: var(--b-z-modal);
+    background: var(--b-scrim);
+    -webkit-backdrop-filter: blur(var(--b-blur-xs));
+    backdrop-filter: blur(var(--b-blur-xs));
+    transition: opacity var(--b-duration-normal) var(--b-ease-out);
+  }
   .b-sheet__header {
     display: flex;
     align-items: center;

package/css/utilities.css

@@ -82,6 +82,15 @@
   .b-stack--stretch { align-items: stretch; }
   .b-stack--between { justify-content: space-between; }
   .b-stack--wrap    { flex-wrap: wrap; }
+
+  /* Main-axis placement, which the modifiers above do not cover: they set
+     align-items, so on a row they decide the cross axis. Centring a row
+     horizontally is a different instruction and needs its own word. */
+  .b-justify-start   { justify-content: flex-start; }
+  .b-justify-center  { justify-content: center; }
+  .b-justify-end     { justify-content: flex-end; }
+  .b-justify-between { justify-content: space-between; }
+  .b-justify-around  { justify-content: space-around; }
   .b-gap-0 { --b-gap: 0; }
   .b-gap-1 { --b-gap: var(--b-space-1); }
   .b-gap-2 { --b-gap: var(--b-space-2); }
@@ -196,6 +205,17 @@
     border-radius: var(--b-radius-lg);
   }
   .b-panel--plain { background: none; border: none; border-radius: 0; }
+
+  /* The list side of a list-and-detail split.
+     Full width on a phone, where it is the whole screen and a fixed column
+     would leave a band of empty glass beside it; a measured column once
+     there is room to show two things at once. This has to be a media query:
+     clamp() cannot say "fill, then stop filling", because it cannot see
+     whether anything is sitting next to it. */
+  .b-list-pane { inline-size: 100%; flex: none; }
+  @media (min-width: 768px) {
+    .b-list-pane { inline-size: clamp(20rem, 4rem + 25vw, 28rem); }
+  }
   .b-resizable { resize: horizontal; overflow: auto; min-width: 12rem; max-width: 70%; }
   .b-resizable--vertical { resize: vertical; min-height: 6rem; max-height: 80vh; }
   .b-resize-handle {
@@ -599,4 +619,115 @@
   @media (min-width: 768px) {
     .b-hide-desktop { display: none !important; }
   }
+
+  /* ---- Scroll: what a container's own position can drive ------------------
+     A container carrying data-b-scroll-geometry publishes --b-scroll-progress
+     (0–1) and --b-scroll-y, so a progress line or a parallax can be pure CSS.
+     .b-scroll-progress is that line: a hairline at the top of a scroll area
+     whose width is the distance scrolled. */
+  .b-scroll-progress {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: var(--b-z-raised);
+    height: 2px;
+    width: calc(var(--b-scroll-progress, 0) * 100%);
+    background: var(--b-color-accent);
+    transition: width 80ms linear;
+  }
+
+  /* A large title that condenses as its scroll area moves — SwiftUI's
+     navigation title, on the scroll timeline so the browser drives it. Put it
+     on .b-large-title or .b-mobile-header__large-title inside the scroller. */
+  @supports (animation-timeline: scroll()) {
+    .b-scroll-condense {
+      animation: b-condense linear both;
+      animation-timeline: scroll(nearest);
+      animation-range: 0 5rem;
+      transform-origin: 0 100%;
+    }
+    @keyframes b-condense {
+      to { scale: 0.62; opacity: 0.9; }
+    }
+  }
+
+  /* A bar over content that has moved gains its edge. */
+  .is-scrolled > .b-mobile-header,
+  .is-scrolled > .b-topnav,
+  .is-scrolled > .b-marketing-nav,
+  .b-mobile-header.is-scrolled,
+  .b-topnav.is-scrolled,
+  .b-marketing-nav.is-scrolled {
+    box-shadow: var(--b-shadow-sm);
+  }
+
+  /* data-b-visible: the entrance for browsers without a view timeline, and a
+     hook any element can use — .is-visible arrives when the threshold does. */
+  @supports not (animation-timeline: view()) {
+    .b-reveal[data-b-visible]:not(.is-visible) { opacity: 0; translate: 0 12px; }
+    .b-reveal[data-b-visible] { transition: opacity var(--b-duration-slow) var(--b-ease-out), translate var(--b-duration-slow) var(--b-ease-out); }
+  }
+
+  /* A backplate: glass put on any one element — SwiftUI's glassBackgroundEffect.
+     Blur behind, a lit top edge, a soft shadow, the system radius. */
+  .b-backplate {
+    background: var(--b-material-regular-bg);
+    -webkit-backdrop-filter: var(--b-glass);
+    backdrop-filter: var(--b-glass);
+    border-radius: var(--b-radius-xl);
+    box-shadow: var(--b-glass-edge), var(--b-shadow-md);
+  }
+
+  /* ---- Box behaviours ------------------------------------------------------
+     The handful of layout facts that Stack and Grid do not express, and that
+     every application reaches for eventually: a child that takes the room
+     left over, a child that refuses to shrink, a box allowed to be narrower
+     than its content, and the positioning contexts. Named plainly, because
+     each one says exactly what it does and nothing more. */
+  .b-flex-1 { flex: 1 1 0%; }
+  .b-shrink-0 { flex-shrink: 0; }
+  .b-grow-0 { flex-grow: 0; }
+
+  /* A flex or grid child will not go narrower than its content unless it is
+     told it may — which is why a long subject line pushes a mail row wider
+     instead of ellipsing. This is the permission. */
+  .b-min-w-0 { min-width: 0; }
+  .b-min-h-0 { min-height: 0; }
+
+  .b-w-full { inline-size: 100%; }
+  .b-h-full { block-size: 100%; }
+  .b-block { display: block; }
+  .b-inline-block { display: inline-block; }
+  .b-inline-flex { display: inline-flex; align-items: center; gap: var(--b-space-2); }
+
+  .b-relative { position: relative; }
+  .b-absolute { position: absolute; }
+  .b-sticky { position: sticky; }
+
+  .b-overflow-hidden { overflow: hidden; }
+  .b-overflow-auto { overflow: auto; }
+  .b-overflow-x-auto { overflow-x: auto; overflow-y: hidden; }
+
+  /* Figures, keys, record values: anything read character by character. */
+  .b-mono { font-family: var(--b-font-mono); font-size: 0.875em; }
+
+  /* Present to a screen reader, absent to the eye. */
+  .b-sr-only {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* For a glyph standing in as a busy indicator. The spinner component is the
+     better answer; this is for the cases that already have an icon. */
+  .b-spin { animation: b-spin 0.8s linear infinite; }
+  @keyframes b-spin { to { transform: rotate(360deg); } }
+  @media (prefers-reduced-motion: reduce) {
+    .b-spin { animation-duration: 2.4s; }
+  }
 }