barua-ui 0.3.4 → 0.4.1

package/css/components/media.css

@@ -1,7 +1,8 @@
 /* ==========================================================================
    Barua UI — Media
-   Image Viewer, Image Gallery, Carousel, Video Player frame, Audio Player,
-   Media Controls, Thumbnail, Media Placeholder, Upload Preview grid.
+   Image Viewer, Image Gallery, Carousel, Billboard, Poster, Video Player
+   frame, Audio Player, Media Controls, Thumbnail, Media Placeholder, Upload
+   Preview grid.
    ========================================================================== */
 
 @layer components {
@@ -69,7 +70,7 @@
     border-radius: var(--b-radius-lg);
     overflow: hidden;
   }
-  .b-carousel__slide img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
+  .b-carousel__slide > img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
   .b-carousel__nav {
     position: absolute;
     inset-block-start: 50%;
@@ -99,6 +100,152 @@
     background: var(--b-color-accent);
   }
 
+  /* Posters on a carousel make a shelf: each slide narrows to a poster and
+     stops clipping, because the poster owns its frame and needs room to lift. */
+  .b-carousel--posters { --b-slide-w: clamp(7.5rem, 30vw, 10.5rem); }
+  .b-carousel--posters .b-carousel__track { padding-block: var(--b-space-2); scroll-padding-inline: 0; }
+  .b-carousel--posters .b-carousel__slide { border-radius: 0; overflow: visible; }
+  @media (hover: none) { .b-carousel--posters .b-carousel__nav { display: none; } }
+
+  /* ---- Billboard: the featured title, art behind, words in front ------------
+     A media storefront's front window. The block is tall on a phone so the
+     picture reads, and capped on a desktop so the shelves stay above the
+     fold. The scrim fades the art into the page colour from below and from
+     the start edge, so the words never fight the picture and the shelf
+     underneath feels attached rather than pasted on. Put .b-container on the
+     body for the gutters; --b-billboard-h and --b-billboard-focus are the
+     knobs, one for the height and one for where the picture's subject is. */
+  .b-billboard {
+    position: relative;
+    display: flex;
+    align-items: flex-end;
+    min-block-size: var(--b-billboard-h, min(62svh, 34rem));
+    overflow: hidden;
+    color: var(--b-text);
+    background: var(--b-fill-tertiary);
+  }
+  .b-billboard__art {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+    object-position: var(--b-billboard-focus, 50% 20%);
+  }
+  .b-billboard__scrim {
+    position: absolute;
+    inset: 0;
+    background:
+      linear-gradient(to top,
+        var(--b-bg) 0%,
+        color-mix(in srgb, var(--b-bg) 55%, transparent) 42%,
+        transparent 78%),
+      linear-gradient(to right,
+        color-mix(in srgb, var(--b-bg) 70%, transparent),
+        transparent 60%);
+  }
+  .b-billboard__body {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--b-space-3);
+    padding-block: var(--b-space-6);
+  }
+  .b-billboard__body > * { margin: 0; max-inline-size: var(--b-billboard-measure, 38rem); }
+  .b-billboard__title {
+    margin: 0;
+    font-size: clamp(2rem, 8vw, 3.5rem);
+    font-weight: var(--b-weight-bold);
+    line-height: 1.02;
+    letter-spacing: var(--b-tracking-tight);
+    text-wrap: balance;
+  }
+  .b-billboard__lede { margin: 0; color: var(--b-text-secondary); line-height: var(--b-leading-body); }
+  .b-billboard__actions { display: flex; flex-wrap: wrap; gap: var(--b-space-2); }
+
+  /* ---- Poster: a title as a picture with its name under it ------------------
+     The unit of a catalogue. The whole block is one link — one thing to tap.
+     The frame holds its 2:3 shape before the picture arrives, so a slow
+     connection never makes the shelf jump, and a title with no picture shows
+     its initial on a plate tinted from the accent rather than a broken image.
+     .b-poster--wide is the 16:9 form for an episode; .is-selected marks the
+     one that is playing. */
+  .b-poster {
+    display: flex;
+    flex-direction: column;
+    gap: var(--b-space-2);
+    min-inline-size: 0;
+    color: inherit;
+    text-decoration: none;
+  }
+  .b-poster:hover { color: inherit; text-decoration: none; }
+  .b-poster__frame {
+    position: relative;
+    display: grid;
+    place-items: center;
+    aspect-ratio: var(--b-poster-ratio, 2 / 3);
+    overflow: hidden;
+    border-radius: var(--b-radius-lg);
+    background: color-mix(in srgb, var(--b-color-accent) 18%, var(--b-fill-tertiary));
+    container-type: inline-size;
+    transition: translate var(--b-duration-normal) var(--b-ease-out), box-shadow var(--b-duration-normal);
+  }
+  .b-poster__frame > :is(img, video) {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    aspect-ratio: auto;
+    object-fit: cover;
+  }
+  .b-poster__initial {
+    font-size: 30cqi;
+    font-weight: var(--b-weight-bold);
+    line-height: 1;
+    color: color-mix(in srgb, var(--b-color-accent) 55%, var(--b-text-quaternary));
+    user-select: none;
+  }
+  .b-poster__badge {
+    position: absolute;
+    inset-block-start: var(--b-space-2);
+    inset-inline-start: var(--b-space-2);
+  }
+  .b-poster__meta { display: flex; flex-direction: column; gap: 0.125rem; min-inline-size: 0; }
+  .b-poster__title {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    margin: 0;
+    font-size: var(--b-text-subheadline);
+    font-weight: var(--b-weight-medium);
+    line-height: var(--b-leading-tight);
+  }
+  .b-poster__facts {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--b-space-2);
+    margin: 0;
+    font-size: var(--b-text-caption);
+    color: var(--b-text-secondary);
+  }
+  .b-poster--wide { --b-poster-ratio: 16 / 9; }
+  @media (hover: hover) {
+    .b-poster:hover .b-poster__frame { translate: 0 -2px; box-shadow: var(--b-elevation-3); }
+  }
+  .b-poster:focus-visible { outline: none; }
+  .b-poster:focus-visible .b-poster__frame,
+  .b-poster.is-selected .b-poster__frame { outline: 2px solid var(--b-color-accent); outline-offset: 2px; }
+
+  /* A wall of posters: as many across as fit — three on a phone, eight on a
+     wide screen — with the poster's minimum width as the one knob. */
+  .b-poster-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(var(--b-poster-min, 6.5rem), 1fr));
+    gap: var(--b-space-4) var(--b-space-3);
+  }
+
   /* ---- Video Player frame ------------------------------------------------------ */
   .b-video {
     position: relative;

package/css/liquid.css

@@ -41,7 +41,7 @@
 
   /* ---- Chrome: bars, sidebars, rails, status ------------------------------- */
   [data-glass="liquid"] :is(.b-topnav, .b-bottomnav, .b-mobile-header,
-    .b-mobile-toolbar, .b-statusbar) {
+    .b-mobile-toolbar, .b-statusbar, .b-marketing-nav) {
     background: light-dark(rgba(250, 251, 254, 0.45), rgba(20, 20, 26, 0.45));
     -webkit-backdrop-filter: var(--b-glass-heavy);
     backdrop-filter: var(--b-glass-heavy);
@@ -198,6 +198,17 @@
   }
 
   /* ---- Feedback ------------------------------------------------------------------ */
+  [data-glass="liquid"] .b-spinner {
+    border-color: var(--b-lg-border);
+    border-top-color: var(--b-color-accent);
+    box-shadow: var(--b-glass-edge);
+  }
+  [data-glass="liquid"] .b-btn.is-loading::after { border-color: var(--b-lg-border); border-top-color: currentColor; }
+  [data-glass="liquid"] .b-btn--primary.is-loading::after { border-color: rgba(255, 255, 255, 0.35); border-top-color: #fff; }
+
+  /* ---- Media ------------------------------------------------------------------------- */
+  [data-glass="liquid"] .b-poster__frame { box-shadow: var(--b-glass-edge); }
+  [data-glass="liquid"] .b-billboard__actions .b-badge { background: var(--b-lg-pane); box-shadow: var(--b-glass-edge); }
   [data-glass="liquid"] .b-alert {
     -webkit-backdrop-filter: var(--b-glass-light);
     backdrop-filter: var(--b-glass-light);

package/css/utilities.css

@@ -171,6 +171,12 @@
      otherwise compress its children to fit and nothing would ever scroll. */
   .b-scroll-area > * { flex-shrink: 0; }
   .b-scroll-area--x { overflow: auto hidden; }
+  /* A row inside a sideways scroll area is meant to overflow: it keeps its
+     content's width instead of squeezing every item to fit. */
+  .b-scroll-area--x > .b-hstack { width: max-content; min-width: 100%; }
+  /* …and is scrolled by thumb or wheel, so it carries no scrollbar of its own. */
+  .b-scroll-area--x:has(> .b-hstack) { scrollbar-width: none; }
+  .b-scroll-area--x:has(> .b-hstack)::-webkit-scrollbar { display: none; }
   .b-scroll-area--y { overflow: hidden auto; }
   .b-scroll-area--fade {
     mask-image: linear-gradient(to bottom, transparent, black var(--b-space-4),

package/dist/index.cjs

@@ -43,6 +43,13 @@ __export(index_exports, {
   Bars: () => Bars,
   BaruaProvider: () => BaruaProvider,
   Bento: () => Bento,
+  Billboard: () => Billboard,
+  BillboardActions: () => BillboardActions,
+  BillboardArt: () => BillboardArt,
+  BillboardBody: () => BillboardBody,
+  BillboardLede: () => BillboardLede,
+  BillboardScrim: () => BillboardScrim,
+  BillboardTitle: () => BillboardTitle,
   BottomNav: () => BottomNav,
   BottomNavItem: () => BottomNavItem,
   BottomSheet: () => BottomSheet,
@@ -203,6 +210,13 @@ __export(index_exports, {
   PaginationItem: () => PaginationItem,
   PillNav: () => PillNav,
   Popover: () => Popover,
+  Poster: () => Poster,
+  PosterFacts: () => PosterFacts,
+  PosterFrame: () => PosterFrame,
+  PosterGrid: () => PosterGrid,
+  PosterInitial: () => PosterInitial,
+  PosterMeta: () => PosterMeta,
+  PosterTitle: () => PosterTitle,
   Progress: () => Progress,
   PromoBand: () => PromoBand,
   Quote: () => Quote,
@@ -1267,6 +1281,7 @@ var iconNames = [
   "doc",
   "download",
   "drop",
+  "film",
   "filter",
   "flame",
   "folder",
@@ -1306,6 +1321,7 @@ var iconNames = [
   "star",
   "sun",
   "trash",
+  "tv",
   "warning",
   "waveform",
   "wifi"
@@ -1346,6 +1362,10 @@ var GLYPHS = {
   ] }),
   "download": /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M10 3.5v9M6.5 9.5l3.5 3 3.5-3M4 16.5h12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
   "drop": /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M10 2.8C7.7 6 5.5 8.6 5.5 11.4a4.5 4.5 0 0 0 9 0c0-2.8-2.2-5.4-4.5-8.6Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }) }),
+  "film": /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M3.5 8.5h13V15a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 15V8.5Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "m3.5 8.5 1-3.4 11.6 1.7-.6 1.7M7.6 5.6 6.6 8.2M11.2 6.1l-1 2.4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] }),
   "filter": /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M3.5 5.5h13M6 10h8M8.5 14.5h3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }),
   "flame": /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M10 3c-2.5 3-4.5 5.2-4.5 7.4a4.5 4.5 0 0 0 9 0C14.5 8.2 12.5 6 10 3Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }) }),
   "folder": /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M3.5 5.5A1.5 1.5 0 0 1 5 4h3l1.5 2H15a1.5 1.5 0 0 1 1.5 1.5V14a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 14V5.5Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }) }),
@@ -1457,6 +1477,10 @@ var GLYPHS = {
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M10 1.5v2m0 13v2M18.5 10h-2m-13 0h-2m14.5-6-1.4 1.4M4.9 15.1 3.5 16.5m0-13 1.4 1.4m10.2 10.2 1.4 1.4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
   ] }),
   "trash": /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M4 6h12M8 6V4.5h4V6M6.5 6l.5 10h6l.5-10M8.5 9v4M11.5 9v4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+  "tv": /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { x: "3", y: "6", width: "14", height: "9.5", rx: "1.8", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M7 17.5h6M7.5 2.5 10 5l2.5-2.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] }),
   "warning": /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M10 3.5 18 17H2L10 3.5Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M10 8.5V12M10 14.5h.01", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
@@ -2495,6 +2519,20 @@ var CommandCenterTile = block("div", "b-cc__tile", "CommandCenterTile");
 var CommandCenterLabel = block("div", "b-cc__label", "CommandCenterLabel");
 var CommandCenterStatus = block("div", "b-cc__status", "CommandCenterStatus");
 var ImageLens = block("div", "b-lens", "ImageLens");
+var Billboard = block("section", "b-billboard", "Billboard");
+var BillboardArt = block("img", "b-billboard__art", "BillboardArt");
+var BillboardScrim = block("div", "b-billboard__scrim", "BillboardScrim");
+var BillboardBody = block("div", "b-billboard__body", "BillboardBody");
+var BillboardTitle = block("h1", "b-billboard__title", "BillboardTitle");
+var BillboardLede = block("p", "b-billboard__lede", "BillboardLede");
+var BillboardActions = block("div", "b-billboard__actions", "BillboardActions");
+var Poster = block("a", "b-poster", "Poster");
+var PosterFrame = block("div", "b-poster__frame", "PosterFrame");
+var PosterInitial = block("span", "b-poster__initial", "PosterInitial");
+var PosterMeta = block("div", "b-poster__meta", "PosterMeta");
+var PosterTitle = block("p", "b-poster__title", "PosterTitle");
+var PosterFacts = block("p", "b-poster__facts", "PosterFacts");
+var PosterGrid = block("div", "b-poster-grid", "PosterGrid");
 
 // src/motion.tsx
 var import_react21 = require("react");
@@ -2603,6 +2641,13 @@ var ContextMenuTarget = (0, import_react21.forwardRef)(
   Bars,
   BaruaProvider,
   Bento,
+  Billboard,
+  BillboardActions,
+  BillboardArt,
+  BillboardBody,
+  BillboardLede,
+  BillboardScrim,
+  BillboardTitle,
   BottomNav,
   BottomNavItem,
   BottomSheet,
@@ -2763,6 +2808,13 @@ var ContextMenuTarget = (0, import_react21.forwardRef)(
   PaginationItem,
   PillNav,
   Popover,
+  Poster,
+  PosterFacts,
+  PosterFrame,
+  PosterGrid,
+  PosterInitial,
+  PosterMeta,
+  PosterTitle,
   Progress,
   PromoBand,
   Quote,