@webority/theme 0.8.5 → 0.8.7

package/scss/wui/_media.scss

@@ -388,7 +388,7 @@
 }
 .attach-meta {
     display: flex;
-    align-items: baseline;
+    align-items: flex-start;
     justify-content: space-between;
     gap: 12px;
     padding: 10px 14px;
@@ -399,9 +399,17 @@
     font-size: 13px;
     font-weight: 500;
     color: var(--color-text);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    // Keep any file name inside the (fixed-width) attachment: min-width:0 lets it
+    // shrink below its content, and overflow-wrap:anywhere breaks a long, space-less
+    // name across lines instead of pushing past the container edge.
+    min-width: 0;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+}
+// In the image-preview meta the name sits in a ROW beside the size, so it must also
+// flex-grow/shrink to take the leftover width (in the compact column it must not).
+.attach-meta .attach-name {
+    flex: 1 1 auto;
 }
 .attach-size {
     font-size: 12px;
@@ -954,6 +962,60 @@
     position: relative;
     display: inline-block;
 }
+
+// ── Inline (profile-row) layout ── ring on the left, a title/subtitle/hint column beside it —
+// the account-settings avatar row (name + role + allowed-files hint on one line). The field
+// spans its container rather than shrinking to the ring the way the stacked layout does.
+.set-uploader-field--inline {
+    width: 100%;
+    max-width: none;
+}
+.set-uploader-row {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+.set-uploader-meta {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+}
+.set-uploader-title {
+    font-size: 15px;
+    font-weight: 700;
+    line-height: 1.35;
+    color: var(--color-text);
+}
+.set-uploader-subtitle {
+    font-size: 14px;
+    line-height: 1.4;
+    color: var(--color-text-muted);
+}
+// In the row layout the hint sits under the subtitle in the meta column — no top gap to the
+// ring and no 240px cap (it reads as a full line beside the avatar, like the reference).
+.set-uploader-meta .set-uploader-hint {
+    margin-top: 6px;
+    max-width: none;
+}
+
+// ── Profile (vertical identity) layout ── the same title/subtitle/hint block as inline, but
+// stacked and centred beneath the ring — an account card / directory tile. The field shrinks to
+// its content and centres the ring + text column.
+.set-uploader-field--profile {
+    align-items: center;
+    text-align: center;
+    width: max-content;
+    max-width: 100%;
+}
+.set-uploader-field--profile .set-uploader-meta {
+    align-items: center;
+    margin-top: 12px;
+}
+// Centred under the ring, the hint reads best with a sensible cap rather than running full width.
+.set-uploader-field--profile .set-uploader-meta .set-uploader-hint {
+    max-width: 240px;
+}
 // Ring highlights while a file is dragged over it.
 .set-uploader.is-dragging .set-uploader-ring {
     border-color: var(--color-primary);

package/scss/wui/_navigation.scss

@@ -21,12 +21,20 @@
     flex-direction: column;
 }
 .app-sidebar-menu .offcanvas-body {
-    padding: 0;
+    // Inset the content to the same 20px gutter as the header/footer so plain body
+    // content doesn't stick to the panel edge. Full-bleed content (edge-to-edge nav
+    // rows) can zero it back out via `bodyClassName="p-0"`.
+    padding: 18px 20px;
     display: flex;
     flex-direction: column;
     flex: 1;
     min-height: 0;
 }
+// Let a caller's bodyClassName padding utility actually win over the default above
+// (the descendant selector would otherwise out-specify a single utility class).
+.app-sidebar-menu .offcanvas-body.p-0 {
+    padding: 0;
+}
 .app-sidebar-menu .asm-footer {
     padding: 16px 20px;
     border-top: 1px solid var(--color-border);

package/scss/wui/_shell.scss

@@ -236,9 +236,11 @@
 .app-sidebar-brand {
     display: flex;
     align-items: center;
-    gap: 10px;
+    // Match .app-nav-item's gap so a logo mark → wordmark spaces exactly like a nav icon → label.
+    gap: 12px;
     min-height: 32px;
     margin-bottom: 8px;
+    padding: 0 0px;
     // The brand row must not shrink when the nav list below it overflows.
     flex: none;
     overflow: hidden;
@@ -392,6 +394,12 @@
 .app-shell.collapsed .app-sidebar-start {
     display: none;
 }
+// Collapsed rail: centre the lone logo mark and drop the inset, matching the icon-only nav rows.
+.app-shell.collapsed .app-sidebar-brand {
+    justify-content: center;
+    gap: 0;
+    padding: 0;
+}
 // The label leaves the VISUAL flow but must stay in the accessibility tree — an
 // icon-only rail link with display:none text has no accessible name (axe
 // link-name, serious). Clip-rect keeps the name; no phantom gap since it takes
@@ -561,10 +569,17 @@
     left: calc(var(--app-sidebar-rail-w) - 12px);
 }
 .app-sidebar-toggle > * {
+    // `block` kills the inline-block baseline gap (.wui-icon is inline-block), which otherwise
+    // pushes the glyph a hair down in the round button — so the grid can centre it exactly.
+    display: block;
+    // Optical centring nudge for the chevron in the round button.
+    // (translateX is in the icon's own frame, so after the collapsed 180° rotation the same value
+    // mirrors on screen — keeping the flipped chevron optically centred too.)
+    transform: translateX(-2px);
     transition: transform 0.2s ease;
 }
 .app-shell.collapsed .app-sidebar-toggle > * {
-    transform: rotate(180deg);
+    transform: rotate(180deg) translateX(2px);
 }
 
 .app-main {

package/scss/wui/_utilities.scss

@@ -160,7 +160,8 @@
 }
 .page-header-bar {
     display: flex;
-    align-items: flex-end;
+    // Left (title stack) and right (actions) are vertically centred against each other.
+    align-items: center;
     justify-content: space-between;
     gap: 16px;
 }
@@ -343,6 +344,15 @@
     padding: 8px;
     border-radius: 999px;
     corner-shape: round;
+    // The base .btn flex/centring rule excludes .btn-icon, so without this an icon
+    // button falls back to inline-block and its line-box inflates the HEIGHT past its
+    // width (e.g. 34×41). A 999px radius on that non-square box renders an oval, not a
+    // circle. Centre the glyph in a square box so the pill radius reads as a true circle.
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+    aspect-ratio: 1;
 }
 
 // Circular icon buttons in the top bar (minimal dashboard chrome).
@@ -675,9 +685,19 @@
 }
 
 .info-callout-content {
+    // Grows to fill the row so a trailing action (and the dismiss ×) sit at the right edge.
+    flex: 1 1 auto;
     min-width: 0;
     font-size: 12px;
 }
+// Trailing action slot — a button (or any node) pinned to the right, vertically centred.
+.info-callout-action {
+    flex: none;
+    align-self: center;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+}
 .info-callout-heading {
     font-size: 14px;
     font-weight: 600;

package/scss/wui/_workspace.scss

@@ -25,12 +25,12 @@
     width: 100%;
     min-height: 48px;
     padding: 6px 10px;
-    // The trigger IS a closed picker, so it wears AppSelect's control skin (.input): a muted
-    // resting fill, a grey border, and the same border/box-shadow transition — nothing bespoke.
+    // Border / fill / hover / focus match AppInput exactly: a muted resting fill, a grey
+    // border, hover to a strong border, and focus/open onto a clean surface with the soft
+    // brand border (border is the cue — no ring, no shadow). The pill shape stays.
     background: var(--color-bg-muted);
     border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
-    corner-shape: squircle;
+    border-radius: 999px;
     color: var(--color-text);
     text-align: left;
     cursor: pointer;
@@ -38,12 +38,9 @@
         border-color 0.12s,
         box-shadow 0.12s;
 }
-// Hover while closed darkens the border, exactly like a resting AppSelect on hover.
 .workspace-switcher-trigger:hover:not(:focus):not([aria-expanded="true"]) {
     border-color: var(--color-border-strong);
 }
-// Focus / open lifts onto a white surface with the soft brand border — the same active cue
-// AppSelect gives a focused or open control (border is the cue; no ring, no shadow).
 .workspace-switcher-trigger:focus-visible,
 .workspace-switcher-trigger[aria-expanded="true"] {
     outline: none;
@@ -52,13 +49,13 @@
     box-shadow: none;
 }
 .workspace-switcher-trigger.is-compact {
-    width: 36px;
-    min-height: 36px;
-    height: 36px;
+    width: 40px;
+    min-height: 40px;
+    height: 40px;
     padding: 0;
     justify-content: center;
     gap: 0;
-    border-radius: var(--radius);
+    border-radius: 50%;
 }
 .workspace-switcher-trigger-name {
     flex: 1 1 auto;
@@ -82,11 +79,12 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 28px;
-    height: 28px;
-    border-radius: var(--radius);
-    corner-shape: squircle;
-    background: var(--color-primary-soft);
+    width: 30px;
+    height: 30px;
+    // A round logo chip on a clean white ring — the same avatar look in the trigger and the menu.
+    border-radius: 50%;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border-light);
     color: var(--color-primary);
     font-size: 11px;
     font-weight: 700;
@@ -195,19 +193,24 @@
 .workspace-switcher .workspace-switcher-create {
     display: flex;
     align-items: center;
-    gap: 10px;
+    gap: 12px;
     width: 100%;
-    padding: 7px 10px;
+    padding: 9px 12px;
     border: none;
-    border-radius: var(--radius);
+    border-radius: var(--radius-lg);
     corner-shape: squircle;
     background: transparent;
     color: var(--color-text);
-    font-size: 14px;
+    font-size: 15px;
     text-align: left;
     text-decoration: none;
     cursor: pointer;
 }
+// Menu avatars read larger than the trigger's — a comfortable identity row per the design.
+.workspace-switcher .workspace-switcher-option .workspace-switcher-mark {
+    width: 42px;
+    height: 42px;
+}
 .workspace-switcher .workspace-switcher-option:hover,
 .workspace-switcher .workspace-switcher-create:hover {
     background: var(--color-bg-subtle);
@@ -252,37 +255,52 @@
     color: var(--color-text-muted);
 }
 .workspace-switcher .workspace-switcher-create {
+    justify-content: center;
     color: var(--color-primary);
     font-weight: 600;
 }
+// The create / add rows lead with a round soft-tint "+" chip and centre their accent label,
+// matching the design's "Add Business" action.
+.workspace-switcher .workspace-switcher-create .wui-icon,
+.workspace-switcher .workspace-switcher-footer-action .wui-icon {
+    box-sizing: border-box;
+    width: 28px;
+    height: 28px;
+    padding: 6px;
+    border-radius: 50%;
+    background: var(--color-primary-soft);
+    color: var(--color-primary);
+}
 
 // ── Footer ──
 // A single workspace still gets a menu: current row + this footer. The divider is what makes
 // that read as a complete panel rather than a truncated list.
 .workspace-switcher-footer {
     margin-top: 6px;
-    padding-top: 6px;
-    border-top: 1px solid var(--color-border-light);
+    padding-top: 8px;
+    border-top: 1px dashed var(--color-border);
 }
 .workspace-switcher .workspace-switcher-footer-action {
     display: flex;
     align-items: center;
+    justify-content: center;
     gap: 10px;
     width: 100%;
-    padding: 7px 10px;
+    padding: 8px 12px;
     border: none;
-    border-radius: var(--radius);
+    border-radius: var(--radius-lg);
     corner-shape: squircle;
     background: transparent;
-    color: var(--color-text-muted);
-    font-size: 13px;
+    color: var(--color-primary);
+    font-size: 15px;
+    font-weight: 600;
     text-align: left;
     text-decoration: none;
     cursor: pointer;
 }
 .workspace-switcher .workspace-switcher-footer-action:hover {
-    background: var(--color-bg-subtle);
-    color: var(--color-text);
+    background: var(--color-primary-soft);
+    color: var(--color-primary);
 }
 
 @media (prefers-reduced-motion: reduce) {