@salemcobalt/ui 0.2.0-rc.10 → 0.2.0-rc.11

package/dist/styles.css

@@ -1,4 +1,4 @@
-/* @salemcobalt/ui 0.2.0-rc.10 — requires @salemcobalt/tokens/css. */
+/* @salemcobalt/ui 0.2.0-rc.11 — requires @salemcobalt/tokens/css. */
 @layer sc {
   /* ---- base.css ---- */
   /* Shared: focus ring, reduced motion. Component files follow. */
@@ -4654,6 +4654,47 @@
     cursor: not-allowed;
   }
   
+  /* The file's name as a preview button (FileInput `preview`): a foreign node placed before FilePond's info,
+     which keeps its size line; FilePond's own name span hides while the button is there. FilePond turns
+     pointer events off inside rows, so the button turns them back on. */
+  .sc-file-input .filepond--file:has(> .sc-file-input__preview) .filepond--file-info-main {
+    display: none;
+  }
+  /* With the name in the button, the info holds only the size: it keeps its width (and its margin clear of
+     the ×) and the button's name truncates instead. */
+  .sc-file-input .filepond--file:has(> .sc-file-input__preview) .filepond--file-info {
+    flex: none;
+  }
+  .sc-file-input .sc-file-input__preview {
+    flex: 0 1 auto;
+    min-inline-size: 0;
+    margin: 0 var(--sc-spacing-xs) 0 calc(-1 * var(--sc-spacing-3xs));
+    padding: 0 var(--sc-spacing-3xs);
+    overflow: hidden;
+    border: 0;
+    border-radius: var(--sc-radius-sm);
+    background: transparent;
+    color: var(--sc-color-text-link);
+    font: inherit;
+    font-weight: var(--sc-font-weight-medium);
+    line-height: var(--sc-font-line-height-ui);
+    text-align: start;
+    text-decoration: underline;
+    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
+    text-underline-offset: 0.2em;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    pointer-events: auto;
+    cursor: pointer;
+  }
+  .sc-file-input .sc-file-input__preview:hover {
+    text-decoration-color: currentColor;
+  }
+  .sc-file-input .sc-file-input__preview:focus-visible {
+    outline: var(--sc-border-width-focus) solid var(--sc-color-border-focus);
+    outline-offset: 0;
+  }
+  
   /* The message slot stays in the tree (it is the live region); out of the flow while empty. */
   .sc-file-input__messages {
     display: flex;
@@ -4671,4 +4712,66 @@
     }
   }
   
+  /* ---- file-preview-dialog.css ---- */
+  /* ---- FilePreviewDialog -------------------------------------------------------
+     A `lg` Dialog whose body holds the file: a PDF frame, a text block or an image, each held inside the
+     viewport so the popup itself rarely scrolls. */
+  .sc-file-preview__frame,
+  .sc-file-preview__text,
+  .sc-file-preview__image {
+    display: block;
+    box-sizing: border-box;
+    inline-size: 100%;
+    border: var(--sc-border-width-hairline) solid var(--sc-color-border-default);
+    border-radius: var(--sc-radius-md);
+  }
+  .sc-file-preview__frame {
+    /* The popup's 85dvh cap, less its title, description, padding and the action row, so it never scrolls. */
+    block-size: clamp(16rem, 85dvh - 11rem, 60rem);
+    background: var(--sc-color-surface-sunken);
+  }
+  .sc-file-preview__text {
+    max-block-size: 60dvh;
+    margin: 0;
+    padding: var(--sc-spacing-sm) var(--sc-spacing-md);
+    overflow: auto;
+    background: var(--sc-color-surface-sunken);
+    color: var(--sc-color-text-default);
+    font-family: var(--sc-font-family-mono);
+    font-size: var(--sc-font-size-xs);
+    line-height: var(--sc-font-line-height-normal);
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+  .sc-file-preview__text:focus-visible {
+    outline: var(--sc-border-width-focus) solid var(--sc-color-border-focus);
+    outline-offset: var(--sc-border-width-focus);
+  }
+  .sc-file-preview__image {
+    inline-size: auto;
+    max-inline-size: 100%;
+    max-block-size: 65dvh;
+    margin-inline: auto;
+    object-fit: contain;
+    background: var(--sc-color-surface-sunken);
+  }
+  .sc-file-preview__actions {
+    display: flex;
+    justify-content: flex-end;
+    margin-block-start: var(--sc-spacing-md);
+  }
+  .sc-file-preview__tab {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--sc-spacing-sm);
+  }
+  .sc-file-preview__note {
+    margin: var(--sc-spacing-xs) 0 0;
+    color: var(--sc-color-text-muted);
+  }
+  .sc-file-preview__tab > .sc-file-preview__note {
+    margin: 0;
+  }
+  
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salemcobalt/ui",
-  "version": "0.2.0-rc.10",
+  "version": "0.2.0-rc.11",
   "description": "React components for the Salem Cobalt design system: Button, IconButton, Icon set, BroomIcon, Badge, Card, Stack, Inline, Kbd, Dialog, Tooltip, Menu, Popover, PriorityNav, Toolbar, Banner, Spinner, Progress, Tabs, Input, Textarea, Select, FileInput, Checkbox, Switch, Heading, Text, Table, Stat, Chip, Disclosure, EmptyState, Skeleton.",
   "license": "MIT",
   "repository": {
@@ -33,7 +33,7 @@
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@salemcobalt/tokens": "^0.2.0-rc.10"
+    "@salemcobalt/tokens": "^0.2.0-rc.11"
   },
   "dependencies": {
     "@base-ui/react": "^1.9.0",
@@ -57,7 +57,7 @@
     "tsup": "^9.0.0",
     "typescript": "^5.9.3",
     "vitest": "^5.0.5",
-    "@salemcobalt/tokens": "^0.2.0-rc.10"
+    "@salemcobalt/tokens": "^0.2.0-rc.11"
   },
   "publishConfig": {
     "access": "public"