@carissa-io/theme-default 0.3.16 → 0.3.17

package/DESIGN.md

@@ -280,13 +280,14 @@ just appears.
 
 **Scroll edges (Modal and Drawer).** The body scrolls between the header and the footer, so a long body used to be cut flush against the title and the buttons with nothing
 to show where the scroll area ends. The theme draws that edge: a **1px `--c-disabled-border` line** under the header and over the footer (the footer line exists only
-when there is a footer), plus a fixed 0.5rem gap between each line and the header or footer content (the components' default, left as it is). The line is the quiet
+when there is a footer), **only while the body overflows** (the component marks the dialog with `c-modal--overflowing` / `c-drawer--overflowing`, and the width lives under
+that class: a short dialog such as a confirmation has no lines at all, and the extra 1px of a line appears only with overflow), plus a fixed 0.5rem gap between each line and the header or footer content (the components' default, left as it is). The line is the quiet
 neutral border, not `--c-muted` (the Divider's 5.74:1 line would compete with the content and with the box border): on `--c-background` it is **1.48:1 in light**
 (`#d4d4d4` on `#fff`) and **1.91:1 in dark** (`#404040` on `#0a0a0a`). It is a decorative separator (the scroll position and the content are exposed by the scrollable region
 itself), so the 3:1 non-text minimum does not apply; the test only requires it to be distinguishable from the background (above 1.1:1) and records the two ratios,
-in the same spirit as the Progress track (a faint guide, 1.3:1). It is a custom property, so dark mode needs no extra rule. The unscrolled layout is the same as before:
+in the same spirit as the Progress track (a faint guide, 1.3:1). It is a custom property, so dark mode needs no extra rule. The layout of a dialog that does not overflow is the same as before the scroll edges (no line, no extra pixel):
 the header keeps 1.25rem above and 0.5rem below its content, and the body keeps the remaining 0.75rem (1.25rem less the 0.5rem gap) on each side, so the distance
-between the title and the content is still 1.25rem, now with the line inside it; a body without a header or without a footer keeps the whole 1.25rem on that side.
+between the title and the content is still 1.25rem (with overflow, the line sits inside that distance); a body without a header or without a footer keeps the whole 1.25rem on that side.
 
 ## Toast
 From [components-toast](components/components-toast): the fixed region of toasts (24rem wide, 1rem from the edges, 0.75rem between toasts, above the page content) and its six
@@ -377,7 +378,7 @@ and `--c-text` for the current page (`aria-current="page"`). The content collaps
 From [components-drawer](components/components-drawer): `Drawer`, the Modal's box as a panel on an edge of the screen (`start`, `end`, `top`, `bottom`; `sm` 20rem, `md` 28rem, `lg` 40rem). It is `--c-background` with `--c-text` (17.93:1 / 18.16:1), a 1px `--c-muted` border
 (the edge that still reads in dark), square, with the Modal's layered shadow and the same padding (1.5rem by 1.25rem) and close button (`--c-muted`, `--c-text` on hover). The **backdrop** is `rgb(0 0 0 / 0.5)` in both modes, with the shadow the only literal color of the block.
 The panel slides in over `$transition-duration`; with reduced motion it just appears.
-The header and footer lines and the 0.5rem gaps are the Modal's (see [Modal](#modal), scroll edges): 1px `--c-disabled-border`, 1.48:1 light and 1.91:1 dark on `--c-background`.
+The header and footer lines and the 0.5rem gaps are the Modal's (see [Modal](#modal), scroll edges): 1px `--c-disabled-border`, only while the body overflows, 1.48:1 light and 1.91:1 dark on `--c-background`.
 
 ## Menu
 From [components-menu](components/components-menu): `Menu`, `MenuItem`, `MenuSeparator` and `MenuLabel`. The panel is the Popover's (`--c-background`, a 1px `--c-muted` border, flat). Items are `--c-text` with 0.625rem of block and 0.75rem of side padding, and hover and keyboard focus share a `--c-surface-active`

package/dist/index.css

@@ -1668,7 +1668,7 @@
   align-items: flex-start;
   justify-content: space-between;
   padding: 1.25rem 1.5rem 0.5rem;
-  border-bottom: 1px solid var(--c-disabled-border);
+  border-bottom: 0 solid var(--c-disabled-border);
 }
 
 .c-modal__heading {
@@ -1728,7 +1728,15 @@
   gap: 1rem;
   justify-content: flex-end;
   padding: 0.5rem 1.5rem 1.25rem;
-  border-top: 1px solid var(--c-disabled-border);
+  border-top: 0 solid var(--c-disabled-border);
+}
+
+.c-modal--overflowing .c-modal__header {
+  border-bottom-width: 1px;
+}
+
+.c-modal--overflowing .c-modal__footer {
+  border-top-width: 1px;
 }
 
 @keyframes c-toast-enter {
@@ -3590,7 +3598,7 @@ hr.c-divider {
   align-items: flex-start;
   justify-content: space-between;
   padding: 1.25rem 1.5rem 0.5rem;
-  border-bottom: 1px solid var(--c-disabled-border);
+  border-bottom: 0 solid var(--c-disabled-border);
 }
 
 .c-drawer__heading {
@@ -3650,7 +3658,15 @@ hr.c-divider {
   gap: 1rem;
   justify-content: flex-end;
   padding: 0.5rem 1.5rem 1.25rem;
-  border-top: 1px solid var(--c-disabled-border);
+  border-top: 0 solid var(--c-disabled-border);
+}
+
+.c-drawer--overflowing .c-drawer__header {
+  border-bottom-width: 1px;
+}
+
+.c-drawer--overflowing .c-drawer__footer {
+  border-top-width: 1px;
 }
 
 .c-menu {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carissa-io/theme-default",
-  "version": "0.3.16",
+  "version": "0.3.17",
   "description": "Carissa UI: the default theme (Swiss minimalism) as SCSS variable overrides of the Carissa components, with a compiled CSS build",
   "type": "module",
   "style": "dist/index.css",
@@ -56,7 +56,7 @@
     "@carissa-io/components-card": "^0.1.0",
     "@carissa-io/components-alert": "^0.1.0",
     "@carissa-io/components-spinner": "^0.1.0",
-    "@carissa-io/components-modal": "^0.1.2",
+    "@carissa-io/components-modal": "^0.1.3",
     "@carissa-io/components-toast": "^0.1.0",
     "@carissa-io/components-divider": "^0.1.0",
     "@carissa-io/components-badge": "^0.1.0",
@@ -74,7 +74,7 @@
     "@carissa-io/components-stepper": "^0.1.0",
     "@carissa-io/components-sidebar": "^0.1.0",
     "@carissa-io/components-navbar": "^0.1.0",
-    "@carissa-io/components-drawer": "^0.1.2",
+    "@carissa-io/components-drawer": "^0.1.3",
     "@carissa-io/components-menu": "^0.1.0",
     "@carissa-io/components-table": "^0.1.0",
     "@carissa-io/components-list": "^0.1.0",
@@ -345,7 +345,7 @@
     "@carissa-io/components-date-range": "^0.1.0",
     "@carissa-io/components-description-list": "^0.1.0",
     "@carissa-io/components-divider": "^0.1.0",
-    "@carissa-io/components-drawer": "^0.1.2",
+    "@carissa-io/components-drawer": "^0.1.3",
     "@carissa-io/components-empty-state": "^0.1.0",
     "@carissa-io/components-faq": "^0.1.0",
     "@carissa-io/components-field": "^0.1.0",
@@ -358,7 +358,7 @@
     "@carissa-io/components-menu": "^0.1.0",
     "@carissa-io/components-message": "^0.1.0",
     "@carissa-io/components-message-list": "^0.1.0",
-    "@carissa-io/components-modal": "^0.1.2",
+    "@carissa-io/components-modal": "^0.1.3",
     "@carissa-io/components-navbar": "^0.1.0",
     "@carissa-io/components-number-input": "^0.1.0",
     "@carissa-io/components-otp-input": "^0.1.0",