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

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.12 — requires @salemcobalt/tokens/css. */
 @layer sc {
   /* ---- base.css ---- */
   /* Shared: focus ring, reduced motion. Component files follow. */
@@ -1376,6 +1376,15 @@
     overflow-x: auto;
   }
   /* Select */
+  /* iOS Safari zooms the page when a focused text field's font is under 16px, and stays zoomed. On touch screens,
+     text fields render at 16px or more; mouse-and-keyboard density is unchanged. 16px is Safari's threshold, not a
+     design value, so it is a literal. Disabling zoom in the viewport meta instead would also block pinch-zoom. */
+  @media (pointer: coarse) {
+    .sc-input,
+    .sc-textarea[data-variant='code'] {
+      font-size: max(16px, var(--_fs));
+    }
+  }
   .sc-select__wrap {
     position: relative;
     display: inline-flex;
@@ -1459,9 +1468,12 @@
     color: var(--sc-color-text-subtle);
     cursor: not-allowed;
   }
+  /* The value clips for the ellipsis, so it needs a real line box: the trigger's line-height of 1 cut off descenders
+     ("Any age"). Same fix as .sc-chip__label. */
   .sc-select__value {
     overflow: hidden;
     text-overflow: ellipsis;
+    line-height: var(--sc-font-line-height-ui);
   }
   .sc-select__value[data-placeholder] {
     color: var(--sc-color-text-subtle);
@@ -4654,6 +4666,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 +4724,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.12",
   "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.12"
   },
   "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.12"
   },
   "publishConfig": {
     "access": "public"