barua-ui 0.5.0 → 0.7.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

@@ -144,6 +144,13 @@
     box-shadow: var(--b-glass-edge);
     pointer-events: none;
   }
+  /* Thick material — the same glass, denser veil. For panels carrying data or
+     a form, where whatever the customer set as a wallpaper must not compete
+     with the ink. Translucency is decoration; a bounce rate is not. */
+  .b-card--glass.b-card--thick {
+    background: var(--b-material-thick-bg);
+  }
+
   /* Glass clear — transparent, for media-rich backgrounds */
   .b-card--glass-clear {
     position: relative;
@@ -225,7 +232,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 +699,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 +714,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 +724,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; }
@@ -833,6 +855,14 @@
     backdrop-filter: blur(var(--b-blur-lg)) saturate(1.1);
     border-color: var(--b-material-neutral-edge);
   }
+  /* …but a table of numbers is not decoration. A card that asks for the thick
+     material keeps its blur and doubles the veil, so the picture still shows at
+     the edges without competing with the ink. The veil follows the wallpaper's
+     own scheme, so it lightens on a bright picture and darkens on a dark one. */
+  .b-has-wallpaper .b-card--thick {
+    background: var(--b-material-thick-bg);
+  }
+
   /* A panel inside glass is a fill, never a second material. */
   .b-has-wallpaper .b-card .b-card {
     background: var(--b-fill-quaternary);

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/marketing.css

@@ -82,6 +82,114 @@
   .b-hero__title { font-size: clamp(2.5rem, 7vw, 4.75rem); }
   .b-hero__media { margin-block-start: clamp(2.5rem, 5vw, 4rem); }
 
+  /* The tile field a hero stands on.
+
+     A flat page makes a centred headline look like it is floating in milk.
+     This is the quietest possible ground: three checkerboards at different
+     scales, each barely there, masked so the pattern dissolves before it
+     reaches the text. It is drawn entirely from gradients — no image, no
+     element per square — so it costs nothing and re-tints with the theme.
+     --b-tile is the cell; --b-tile-ink is how loud the squares are. */
+  /* The tile field is absolute, so whatever holds it has to be positioned and
+     has to clip. Saying it here means no page has to remember. */
+  .b-has-tiles { position: relative; overflow: hidden; }
+  .b-tile-field {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    pointer-events: none;
+    --b-tile: 5.5rem;
+    /* The field paints its own ground, a shade off the page, and the squares
+       sit *lighter* on it — which is the only way the pattern is visible on a
+       white page and still barely there on a dark one. Two knobs, both
+       translucent, so whatever surface it lands on shows through. */
+    --b-tile-ground: light-dark(rgba(20, 24, 38, 0.045), rgba(255, 255, 255, 0.014));
+    --b-tile-ink: light-dark(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.03));
+    background-color: var(--b-tile-ground);
+    background-image:
+      repeating-conic-gradient(var(--b-tile-ink) 0% 25%, transparent 0% 50%),
+      repeating-conic-gradient(var(--b-tile-ink) 0% 25%, transparent 0% 50%),
+      repeating-conic-gradient(var(--b-tile-ink) 0% 25%, transparent 0% 50%);
+    background-size:
+      var(--b-tile) var(--b-tile),
+      calc(var(--b-tile) * 1.62) calc(var(--b-tile) * 1.62),
+      calc(var(--b-tile) * 2.71) calc(var(--b-tile) * 2.71);
+    background-position: 0 0, calc(var(--b-tile) * 0.5) calc(var(--b-tile) * 0.8), calc(var(--b-tile) * -0.7) calc(var(--b-tile) * 0.3);
+    /* Nothing in the middle, where the words are. */
+    -webkit-mask-image: radial-gradient(120% 85% at 50% 0%, #000 0%, transparent 72%);
+    mask-image: radial-gradient(120% 85% at 50% 0%, #000 0%, transparent 72%);
+  }
+  /* Anything that has to sit on top of it says so once. */
+  .b-tile-field ~ * { position: relative; z-index: 1; }
+
+  /* ---- Announcement: one line of news above a headline --------------------- */
+  /* The pill every product page opens with — a release, a launch, a price
+     change. It is a link, so it is an <a>; the arrow is a text mark, not an
+     icon, and it steps forward on hover the way a link should suggest travel. */
+  .b-announce {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--b-space-2);
+    padding: var(--b-space-1) var(--b-space-3);
+    font-size: var(--b-text-footnote);
+    font-weight: var(--b-weight-medium);
+    color: var(--b-color-accent-text);
+    background: var(--b-color-accent-soft);
+    border: 1px solid color-mix(in srgb, var(--b-color-accent) 22%, transparent);
+    border-radius: var(--b-radius-full);
+    text-decoration: none;
+  }
+  .b-announce:hover { text-decoration: none; background: color-mix(in srgb, var(--b-color-accent) 18%, transparent); }
+  .b-announce .b-icon { width: 1rem; height: 1rem; }
+  .b-announce__go { transition: translate var(--b-duration-fast) var(--b-ease-out); }
+  .b-announce:hover .b-announce__go { translate: 2px 0; }
+
+  /* ---- Rating: borrowed credibility, stated plainly ------------------------ */
+  /* Five marks and who is vouching. The stars are the library's own star at
+     caption size; a star that was not earned carries .is-empty rather than
+     being left out, so the row is always five wide and reads as a score. */
+  .b-rating {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--b-space-2);
+    font-size: var(--b-text-footnote);
+    color: var(--b-text-secondary);
+  }
+  .b-rating__stars { display: inline-flex; gap: 0.125rem; color: var(--b-color-yellow); }
+  .b-rating__stars .b-icon { width: 0.95rem; height: 0.95rem; fill: currentColor; }
+  .b-rating__stars .is-empty { color: var(--b-fill); }
+
+  /* ---- Logo wall: the companies already here ------------------------------- */
+  /* A quiet row, evenly spaced, every mark the same height whatever its
+     proportions — which is the only way a wall of logos looks deliberate
+     rather than pasted. Inline SVG on currentColor is the intended form: it
+     inherits the wall's ink and therefore survives the dark theme. Raster
+     logos get greyed instead, because a PNG cannot follow the text colour. */
+  .b-logo-wall {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: clamp(var(--b-space-6), 5vw, var(--b-space-12));
+    padding-block: var(--b-space-8);
+    color: var(--b-text-secondary);
+  }
+  .b-logo-wall__logo {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--b-space-2);
+    height: var(--b-logo-h, 1.5rem);
+    font-size: var(--b-text-title3);
+    font-weight: var(--b-weight-semibold);
+    letter-spacing: var(--b-tracking-tight);
+    white-space: nowrap;
+    opacity: 0.7;
+    transition: opacity var(--b-duration-fast);
+  }
+  .b-logo-wall__logo:hover { opacity: 1; }
+  .b-logo-wall__logo :is(svg, img) { height: 100%; width: auto; }
+  .b-logo-wall__logo img { filter: grayscale(1); }
+
   /* ---- Figures: a picture is furniture, so it has a shape ------------------ */
   .b-figure { margin: 0; }
   .b-figure__frame {

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 {
@@ -656,4 +676,58 @@
     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; }
+  }
 }