contain-css-svelte 1.1.4 → 1.1.6

package/dist/overlays/Tooltip.svelte

@@ -2,12 +2,18 @@
 let tooltipDiv = $state();
 let targetDiv = $state();
 let tooltipMeasurementDiv = $state();
-let { tooltipText = "", vertical = "bottom", horizontal = "right", children, tooltip, } = $props();
+let { tooltipText = "", vertical = "bottom", horizontal = "right", children, tooltip, block = false, } = $props();
+// svelte-ignore state_referenced_locally
 let renderedVertical = $state(vertical);
+// svelte-ignore state_referenced_locally
 let renderedHorizontal = $state(horizontal);
 function showPopover() {
     // Get the position of the target element
     // with respect to our screen
+    if (!targetDiv?.children[0])
+        return;
+    if (!tooltipDiv || !tooltipMeasurementDiv)
+        return;
     const targetRect = targetDiv.children[0].getBoundingClientRect();
     let targetHeight = tooltipMeasurementDiv.getBoundingClientRect().height;
     let targetWidth = tooltipMeasurementDiv.getBoundingClientRect().width;
@@ -64,35 +70,67 @@ function showPopover() {
 }
 </script>
 
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-  class="tooltip-wrapper"
-  onmouseenter={() => showPopover()}
-  onmouseleave={() => (tooltipDiv ? tooltipDiv.togglePopover(false) : null)}
-  onfocusin={() => showPopover()}
-  onfocusout={() => (tooltipDiv ? tooltipDiv.togglePopover(false) : null)}
-  bind:this={targetDiv}
->
-  {@render children?.()}
+{#if block}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
-    popover="auto"
-    class="tooltip"
-    bind:this={tooltipDiv}
-    class:bottom={renderedVertical === "bottom"}
-    class:top={renderedVertical === "top"}
-    class:left={renderedHorizontal === "left"}
-    class:right={renderedHorizontal === "right"}
+    class="tooltip-wrapper"
+    onmouseenter={() => showPopover()}
+    onmouseleave={() => (tooltipDiv ? tooltipDiv.togglePopover(false) : null)}
+    onfocusin={() => showPopover()}
+    onfocusout={() => (tooltipDiv ? tooltipDiv.togglePopover(false) : null)}
+    bind:this={targetDiv}
   >
-    {#if tooltip}{@render tooltip()}{:else}
-      {tooltipText}
-    {/if}
+    {@render children?.()}
+    <div
+      popover="auto"
+      class="tooltip"
+      bind:this={tooltipDiv}
+      class:bottom={renderedVertical === "bottom"}
+      class:top={renderedVertical === "top"}
+      class:left={renderedHorizontal === "left"}
+      class:right={renderedHorizontal === "right"}
+    >
+      {#if tooltip}{@render tooltip()}{:else}
+        {tooltipText}
+      {/if}
+    </div>
+    <div class="tooltip invisible measure" bind:this={tooltipMeasurementDiv}>
+      {#if tooltip}{@render tooltip()}{:else}
+        {tooltipText}
+      {/if}
+    </div>
   </div>
-  <div class="tooltip invisible measure" bind:this={tooltipMeasurementDiv}>
-    {#if tooltip}{@render tooltip()}{:else}
-      {tooltipText}
-    {/if}
-  </div>
-</div>
+{:else}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <span
+    class="tooltip-wrapper"
+    onmouseenter={() => showPopover()}
+    onmouseleave={() => (tooltipDiv ? tooltipDiv.togglePopover(false) : null)}
+    onfocusin={() => showPopover()}
+    onfocusout={() => (tooltipDiv ? tooltipDiv.togglePopover(false) : null)}
+    bind:this={targetDiv}
+  >
+    {@render children?.()}
+    <span
+      popover="auto"
+      class="tooltip"
+      bind:this={tooltipDiv}
+      class:bottom={renderedVertical === "bottom"}
+      class:top={renderedVertical === "top"}
+      class:left={renderedHorizontal === "left"}
+      class:right={renderedHorizontal === "right"}
+    >
+      {#if tooltip}{@render tooltip()}{:else}
+        {tooltipText}
+      {/if}
+    </span>
+    <span class="tooltip invisible measure" bind:this={tooltipMeasurementDiv}>
+      {#if tooltip}{@render tooltip()}{:else}
+        {tooltipText}
+      {/if}
+    </span>
+  </span>
+{/if}
 
 <style>/* Warning: because we define a fallback
   media query, the media query can override the container

package/dist/overlays/Tooltip.svelte.d.ts

@@ -4,6 +4,7 @@ interface Props {
     horizontal?: string;
     children?: import("svelte").Snippet;
     tooltip?: import("svelte").Snippet;
+    block?: boolean;
 }
 declare const Tooltip: import("svelte").Component<Props, {}, "">;
 type Tooltip = ReturnType<typeof Tooltip>;

package/dist/review/loadReviewAppPage.d.ts

@@ -1,6 +1,6 @@
 import { type ReviewThemeName } from "./themes";
 export declare function loadReviewAppPage(scenario: string, theme: ReviewThemeName): {
-    scenario: "incredible-app-shell" | "layout-workbench" | "launch-studio" | "table-workbench";
+    scenario: "incredible-app-shell" | "layout-workbench" | "launch-studio" | "table-workbench" | "visual-system-board";
     theme: "canyon-modern-serif-fancy" | "forest-editorial-rounded" | "dark-ibm-layered" | "light-airy-solid" | "bootstrap" | "dark" | "light" | "light-or-dark" | "material" | "purple" | "retro";
     themeLabel: string;
 };

package/dist/review/scenarios/IncredibleAppShell.svelte

@@ -16,32 +16,32 @@ import Stack from "../../layout/Stack.svelte";
 import TextLayout from "../../typography/TextLayout.svelte";
 let showSummary = $state(false);
 let loggedIn = $state(true);
-let search = $state("migration");
-let sortBy = $state("recent");
+let search = $state("reefer");
+let sortBy = $state("berth");
 let showAssignedOnly = $state(true);
 let confidenceThreshold = $state(68);
 let statusMessage = $derived(loggedIn
     ? showSummary
-        ? "Advanced filters are visible."
-        : "Everything looks normal."
-    : "Signed out. Header should still hold together cleanly.");
+        ? "Manifest filters are open for inspection."
+        : "All containers are lashed, logged, and behaving like responsible rectangles."
+    : "Signed out. The bridge should still hold together cleanly.");
 const workItems = [
     {
-        title: "Rewrite onboarding email copy",
-        detail: "Marketing · Edited 42 minutes ago",
-        owner: "TS",
-        cta: "Review",
+        title: "Inspect reefer stack on bay 42",
+        detail: "Cold chain · Temperature report updated 42 minutes ago",
+        owner: "RF",
+        cta: "Inspect",
     },
     {
-        title: "Resolve design QA pass for navbar spacing",
-        detail: "Design Systems · Edited yesterday",
-        owner: "AL",
+        title: "Rebalance twist-lock notes for port rail",
+        detail: "Deck crew · Spacing review completed yesterday",
+        owner: "TL",
         cta: "Compare",
     },
     {
-        title: "Confirm analytics event names for account settings",
-        detail: "Platform · Needs input from data team",
-        owner: "RJ",
+        title: "Confirm manifest names for nested cargo cards",
+        detail: "Harbor ops · Needs input from the quay team",
+        owner: "QC",
         cta: "Open",
     },
 ];
@@ -58,8 +58,8 @@ function logout() {
   {#snippet header()}
     <Bar secondary>
       <Stack class="brand">
-        <div class="eyebrow">Contain CSS Review Harness</div>
-        <h1>My Incredible App</h1>
+        <div class="eyebrow">North Atlantic Harbor Desk</div>
+        <h1>Harbor Containership Console</h1>
       </Stack>
 
       <Inline class="header-actions">
@@ -73,9 +73,7 @@ function logout() {
         </Button>
 
         <span class="session">
-          Logged in as <span class="user"
-            >{loggedIn ? "Joe Schmoe" : "Guest"}</span
-          >
+          Logged in as <span class="user">{loggedIn ? "Captain Box" : "Guest"}</span>
         </span>
 
         <MiniButton aria-label="Log out" title="Log out" onclick={logout}>
@@ -87,12 +85,14 @@ function logout() {
 
   <TextLayout>
     <Stack class="hero-copy">
-      <p class="kicker">Proof Of Concept</p>
-      <h1>This is an incredible page</h1>
+      <p class="kicker">Containership Operations</p>
+      <h1>A bridge display for very opinionated cargo rectangles</h1>
       <p>
-        This route is intentionally opinionated: it shows a realistic app shell,
-        a set of form controls, and a data list using the library components
-        directly.
+        The harbor team uses this console to track reefers, dry boxes, twist
+        locks, and manifest oddities before the ship clears the breakwater. By
+        dawn, every suspicious seal, late manifest, and chilled pallet should
+        have a berth assignment, a watch officer, and a paper trail tidy enough
+        to survive a salty breeze.
       </p>
       <p>{statusMessage}</p>
     </Stack>
@@ -100,14 +100,17 @@ function logout() {
     <Form layout="above" fullWidth globalInputStyles>
       <Fieldset>
         {#snippet legend()}
-          Filters
+          Manifest Filters
         {/snippet}
 
         <FormItem>
           {#snippet label()}
-            Search
+            Search Cargo
           {/snippet}
-          <Input bind:value={search} placeholder="Search work items" />
+          <Input
+            bind:value={search}
+            placeholder="Search containers, bays, or crews"
+          />
         </FormItem>
 
         <FormItem>
@@ -115,22 +118,24 @@ function logout() {
             Sort By
           {/snippet}
           <Select bind:value={sortBy} data-audit-action="open-select">
-            <option value="recent">Recently Updated</option>
-            <option value="priority">Priority</option>
-            <option value="owner">Owner</option>
+            <option value="berth">Berth Order</option>
+            <option value="temperature">Temperature Risk</option>
+            <option value="bay">Bay Number</option>
           </Select>
         </FormItem>
 
         <FormItem>
           {#snippet label()}
-            Assigned
+            Watchlist
           {/snippet}
-          <Checkbox bind:checked={showAssignedOnly}>Only show my items</Checkbox>
+          <Checkbox bind:checked={showAssignedOnly}>
+            Only show containers on my deck watch
+          </Checkbox>
         </FormItem>
 
         <FormItem>
           {#snippet label()}
-            Confidence Threshold ({confidenceThreshold}%)
+            Seaworthiness Threshold ({confidenceThreshold}%)
           {/snippet}
           <Slider bind:value={confidenceThreshold} min={0} max={100} step={1} />
         </FormItem>
@@ -142,7 +147,7 @@ function logout() {
         <Form layout="above" fullWidth>
           <Fieldset>
             {#snippet legend()}
-              Summary
+              Manifest Summary
             {/snippet}
             <FormItem>
               {#snippet label()}
@@ -150,8 +155,10 @@ function logout() {
               {/snippet}
               <p>
                 Query <strong>{search}</strong>, sorted by <strong>{sortBy}</strong>,
-                assigned only: <strong>{showAssignedOnly ? "yes" : "no"}</strong>,
-                confidence: <strong>{confidenceThreshold}%</strong>.
+                watchlist only: <strong>{showAssignedOnly ? "yes" : "no"}</strong>,
+                seaworthiness: <strong>{confidenceThreshold}%</strong>. The manifest
+                clerk has underlined this in blue pencil, which is how serious
+                container people express whimsy.
               </p>
             </FormItem>
           </Fieldset>