@24vlh/vds 0.1.7 → 0.1.8

package/dist/components/inbox.css

@@ -294,6 +294,33 @@
     pointer-events: auto;
 }
 
+/* Toolbar takeover: search spans the entire nav bar */
+
+.vds-inbox-nav__bar--search-full .vds-inbox-nav__left {
+    flex: 1 1 auto;
+    width: 100%;
+}
+
+.vds-inbox-nav__bar--search-full .vds-inbox-search {
+    flex: 1 1 auto;
+    width: 100%;
+}
+
+.vds-inbox-nav__bar--search-full .vds-inbox-search__field {
+    width: 100%;
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.vds-inbox-nav__bar--search-full .vds-inbox-search__input {
+    max-width: none;
+}
+
+.vds-inbox-nav__bar--search-full .vds-inbox-tabs,
+.vds-inbox-nav__bar--search-full .vds-inbox-nav__right {
+    display: none;
+}
+
 /* ---------------------------------------------------------
    2. LIST (rounded vs flat)
 --------------------------------------------------------- */

package/dist/components/inbox.min.css

@@ -1 +1 @@
-.vds-inbox,[data-vds-inbox]{--inbox-row-radius:var(--radius-lg,var(--radius-md));--inbox-row-border:var(--color-border-subtle);--inbox-row-bg:var(--color-surface);--inbox-row-bg-hover:var(--color-surface-subtle,var(--color-surface-hover));--inbox-row-shadow:none;--inbox-title-size:var(--text-sm);--inbox-desc-size:var(--text-xs);--inbox-icon-size:var(--icon-sm);--inbox-icon-muted:var(--color-icon-muted,var(--color-text-soft));--inbox-icon-strong:var(--color-icon-strong,var(--color-text));--inbox-action-gap:var(--space-2);--inbox-badge-gap:var(--space-2);--inbox-row-pad-x:var(--space-4);--inbox-row-pad-y:var(--space-4);--inbox-actions-min-width:0;--inbox-actions-justify:flex-end;width:100%}.vds-inbox--dense{--inbox-row-pad-x:var(--space-3);--inbox-row-pad-y:var(--space-3);--inbox-title-size:var(--text-xs);--inbox-desc-size:var(--text-xxs,var(--text-xs))}.vds-inbox-nav{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-4)}.vds-inbox-nav__bar{align-items:center;background:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);display:flex;gap:var(--space-4);justify-content:space-between;padding:var(--space-3) var(--space-4)}.vds-inbox-nav__left,.vds-inbox-nav__right{align-items:center;display:inline-flex;flex:0 0 auto;gap:var(--space-2)}.vds-inbox-nav__bottom{align-items:center;display:flex;gap:var(--space-3);justify-content:space-between}.vds-inbox-nav__bottom-left,.vds-inbox-nav__bottom-right{align-items:center;display:inline-flex;gap:var(--space-2)}.vds-inbox-nav__bottom-left:empty,.vds-inbox-nav__bottom-right:empty{display:none}.vds-inbox-nav__bottom--left{justify-content:flex-start}.vds-inbox-nav__bottom--center{justify-content:center}.vds-inbox-nav__bottom--right{justify-content:flex-end}.vds-inbox-nav__bottom--split{justify-content:space-between}.vds-inbox-tabs{background:var(--color-surface-subtle);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);flex:1 1 auto;gap:var(--space-1);justify-content:center;min-width:0;padding:var(--space-1)}.vds-inbox-tab,.vds-inbox-tabs{align-items:center;display:inline-flex}.vds-inbox-tab{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--radius-md);color:var(--color-text-muted);cursor:pointer;font-size:var(--text-sm);font-weight:var(--font-weight-semibold);gap:var(--space-2);line-height:1;padding:var(--space-2) var(--space-3);-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.vds-inbox-tab:hover{background:var(--color-surface);color:var(--color-text)}.vds-inbox-tab.is-active,.vds-inbox-tab[aria-selected=true]{background:var(--color-surface);border:1px solid var(--color-border-subtle);color:var(--color-text)}.vds-inbox-tab:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.vds-inbox-tab__count{align-items:center;background:var(--color-surface-subtle);border:1px solid var(--color-border-subtle);border-radius:var(--radius-pill);color:var(--color-text-muted);display:inline-flex;font-size:var(--text-xs);font-weight:var(--font-weight-semibold);height:1.5rem;justify-content:center;min-width:1.5rem;padding:0 var(--space-2)}.vds-inbox-search{align-items:center;display:inline-flex;gap:var(--space-2);min-width:0}.vds-inbox-search__toggle{align-items:center;background:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);color:var(--color-text);display:inline-flex;height:2.25rem;height:var(--icon-container-md,2.25rem);justify-content:center;transition:background-color var(--transition-fast),border-color var(--transition-fast);width:2.25rem;width:var(--icon-container-md,2.25rem)}.vds-inbox-search__toggle:hover{background:var(--color-surface-subtle,var(--color-surface-hover));border-color:var(--color-border-strong,var(--color-border-subtle))}.vds-inbox-search__toggle svg{color:currentColor;height:1rem;height:var(--icon-xs,1rem);width:1rem;width:var(--icon-xs,1rem)}.vds-inbox-search__field{align-items:center;display:inline-flex;gap:var(--space-2);opacity:0;overflow:hidden;pointer-events:none;transition:width var(--transition-normal),opacity var(--transition-fast);width:0}.vds-inbox-search__input{background:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);color:var(--color-text);font-size:var(--text-sm);line-height:var(--line-height-normal);max-width:32rem;min-width:10rem;padding:var(--space-2) var(--space-3);width:100%}.vds-inbox-search.is-open .vds-inbox-search__field,.vds-inbox-search__toggle[aria-expanded=true]+.vds-inbox-search__field{opacity:1;pointer-events:auto;width:min(36rem,52vw)}.vds-inbox-search--full{width:100%}.vds-inbox-search--full .vds-inbox-search__field{opacity:1;pointer-events:auto;width:100%}.vds-inbox__list{display:flex;flex-direction:column;gap:var(--space-2)}.vds-inbox--flat .vds-inbox__list{border-bottom:1px solid var(--color-border-subtle);border-top:1px solid var(--color-border-subtle);gap:0}.vds-inbox--flat .vds-inbox-row{border-left:0;border-radius:0;border-right:0;border-top:0}.vds-inbox--flat .vds-inbox-row+.vds-inbox-row{border-top:1px solid var(--color-border-subtle)}.vds-inbox-row{background:var(--inbox-row-bg);border:1px solid var(--inbox-row-border);border-radius:var(--inbox-row-radius);box-shadow:var(--inbox-row-shadow);overflow:clip;position:relative;transition:background-color var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast);width:100%}.vds-inbox-row:hover{background:var(--inbox-row-bg-hover);border-color:var(--color-border-strong,var(--color-border-subtle))}.vds-inbox-row:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.vds-inbox-row__main{background:transparent;border:0;color:inherit;display:grid;grid-template-columns:1fr;grid-template-rows:auto auto;padding:0;text-align:left;width:100%}.vds-inbox-row__inner{grid-gap:var(--space-4);align-items:start;display:grid;gap:var(--space-4);grid-column:1/-1;grid-row:1;grid-template-areas:"badges  badges" "meta    actions" "data    data";grid-template-columns:1fr auto;padding:var(--inbox-row-pad-y) var(--inbox-row-pad-x)}.vds-inbox-row__badges{grid-area:badges}.vds-inbox-row__meta{grid-area:meta}.vds-inbox-row__actions{grid-area:actions}.vds-inbox-row__data{display:flex;flex-direction:column;gap:var(--space-2);grid-area:data;min-width:0}@media (max-width:768px){.vds-inbox-row__inner{grid-template-areas:"badges" "meta" "data" "actions";grid-template-columns:1fr}.vds-inbox-row__actions{justify-content:flex-end;min-width:0;padding-top:0}}.vds-inbox-row__labels{justify-content:flex-start;margin-left:0;text-align:left}.vds-inbox-row__title{min-width:0}.vds-inbox-row--minimal .vds-inbox-row__inner{gap:var(--space-3);padding:var(--space-3) var(--space-3)}.vds-inbox-row--minimal{--inbox-title-size:var(--text-xs);--inbox-desc-size:var(--text-xxs,var(--text-xs))}.vds-inbox-row--normal .vds-inbox-row__inner{gap:var(--space-4);padding:var(--space-4) var(--space-4)}.vds-inbox-row--rich .vds-inbox-row__inner{gap:var(--space-5);padding:var(--space-5) var(--space-5)}.vds-inbox-row--rich{--inbox-title-size:var(--text-md,var(--text-sm));--inbox-desc-size:var(--text-sm)}.vds-inbox-row--mega .vds-inbox-row__inner{gap:var(--space-6);padding:var(--space-6) var(--space-6)}.vds-inbox-row--mega{--inbox-title-size:var(--text-lg,var(--text-md,var(--text-sm)));--inbox-desc-size:var(--text-sm)}.vds-inbox-row__badges{align-items:center;display:flex;flex-wrap:wrap;gap:var(--inbox-badge-gap);grid-column:1/-1;margin-bottom:var(--space-3)}.vds-inbox-badge{align-items:center;background:var(--color-surface-subtle);border:1px solid var(--color-border-subtle);border-radius:var(--radius-pill);color:var(--color-text);display:inline-flex;font-size:var(--text-xxs);font-weight:var(--font-weight-semibold);gap:var(--space-1_5);letter-spacing:.02em;line-height:1.1;padding:var(--space-1) var(--space-2_5);white-space:nowrap}.vds-inbox-badge svg{color:currentColor;height:var(--icon-xxs);width:var(--icon-xxs)}.vds-inbox-badge--accent{background:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-text)}.vds-inbox-badge--info{background:var(--semantic-info-bg,var(--color-info-soft));border-color:var(--semantic-info-border,var(--color-info));color:var(--semantic-info-text,var(--color-text))}.vds-inbox-badge--success{background:var(--semantic-success-bg,var(--color-success-soft));border-color:var(--semantic-success-border,var(--color-success));color:var(--semantic-success-text,var(--color-text))}.vds-inbox-badge--warning{background:var(--semantic-warning-bg,var(--color-warning-soft));border-color:var(--semantic-warning-border,var(--color-warning));color:var(--semantic-warning-text,var(--color-text))}.vds-inbox-badge--danger{background:var(--semantic-danger-bg,var(--color-danger-soft));border-color:var(--semantic-danger-border,var(--color-danger));color:var(--semantic-danger-text,var(--color-text))}.vds-inbox-row__meta{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}.vds-inbox-row__titleline{align-items:center;display:flex;gap:var(--space-2);min-width:0}.vds-inbox-row__status{align-items:center;display:inline-flex;flex:0 0 auto;gap:var(--space-1_5)}.vds-inbox-row__status-icon{align-items:center;color:var(--inbox-icon-muted);display:inline-flex;height:var(--inbox-icon-size);justify-content:center;width:var(--inbox-icon-size)}.vds-inbox-row__status-icon svg{height:100%;width:100%}.vds-inbox-row.is-bookmarked .vds-inbox-row__status-icon--bookmark,.vds-inbox-row.is-starred .vds-inbox-row__status-icon--star{color:var(--color-accent)}.vds-inbox-row.is-flagged .vds-inbox-row__status-icon--flag{color:var(--color-danger-strong,var(--color-danger))}.vds-inbox-row__title{color:var(--color-text);flex:1 1 auto;font-size:var(--inbox-title-size);font-weight:var(--font-weight-semibold);letter-spacing:0;letter-spacing:var(--letter-tight,0);line-height:var(--line-height-snug);max-width:100%;min-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vds-inbox-row__labels{align-items:center;display:inline-flex;flex:0 0 auto;gap:var(--space-1_5);min-width:0}.vds-inbox-label{align-items:center;background:transparent;border:1px solid var(--color-border-subtle);border-radius:var(--radius-pill);color:var(--color-text-muted);display:inline-flex;font-size:var(--text-xxs);font-weight:var(--font-weight-semibold);height:1.4rem;padding:0 var(--space-2);white-space:nowrap}.vds-inbox-label--accent{background:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-text)}.vds-inbox-label--muted{background:var(--color-surface-subtle);border-color:var(--color-border-subtle);color:var(--color-text-muted)}.vds-inbox-row__glance{-webkit-box-orient:vertical;-webkit-line-clamp:2;color:var(--color-text-muted);display:-webkit-box;font-size:var(--inbox-desc-size);line-height:var(--line-height-relaxed);min-width:0;overflow:hidden}.vds-inbox-row--rich .vds-inbox-row__glance{-webkit-line-clamp:3}.vds-inbox-row--mega .vds-inbox-row__glance{-webkit-line-clamp:4}.vds-inbox-row__metafoot{align-items:center;color:var(--color-text-soft,var(--color-text-muted));display:flex;flex-wrap:wrap;font-size:var(--text-xxs,var(--text-xs));gap:var(--space-2) var(--space-4)}.vds-inbox-row__metafoot strong{color:var(--color-text-muted);font-weight:var(--font-weight-semibold)}.vds-inbox-row__details{color:var(--color-text-muted);display:flex;flex-wrap:wrap;font-size:var(--text-xs);gap:var(--space-2) var(--space-3)}.vds-inbox-row__details-item{align-items:center;background:var(--color-surface-subtle);border:1px solid var(--color-border-subtle);border-radius:var(--radius-pill);display:inline-flex;gap:var(--space-1_5);line-height:1.1;padding:var(--space-1) var(--space-2)}.vds-inbox-row__details-item svg{color:currentColor;height:var(--icon-xxs);width:var(--icon-xxs)}.vds-inbox-row__actions{align-items:flex-start;display:flex;flex-wrap:wrap;gap:var(--inbox-action-gap);justify-content:var(--inbox-actions-justify);min-width:var(--inbox-actions-min-width);padding-top:var(--space-0_5)}.vds-inbox-row--actions-below .vds-inbox-row__inner{grid-template-areas:"badges" "meta" "data" "actions";grid-template-columns:1fr}.vds-inbox-row--actions-below .vds-inbox-row__actions{justify-content:flex-start;padding-top:0}.vds-inbox-row--actions-full .vds-inbox-row__actions{grid-column:1/-1;justify-content:flex-start;padding-top:0}.vds-inbox-row__actions--left{justify-content:flex-start}.vds-inbox-row__actions--center{justify-content:center}.vds-inbox-row__actions--right{justify-content:flex-end}.vds-inbox-action{align-items:center;background:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-sm);color:var(--color-text);display:inline-flex;font-size:var(--text-xs);font-weight:var(--font-weight-semibold);gap:var(--space-1_5);justify-content:center;padding:var(--space-1_5) var(--space-2_5);transition:background-color var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast),transform var(--transition-fast)}a.vds-inbox-action{-webkit-text-decoration:none;text-decoration:none}.vds-inbox-action svg{color:currentColor;height:var(--icon-xxs);width:var(--icon-xxs)}.vds-inbox-action:hover{background:var(--color-surface-subtle,var(--color-surface-hover));border-color:var(--color-border-strong,var(--color-border-subtle));transform:translateY(-1px)}.vds-inbox-action:active{transform:translateY(0)}.vds-inbox-action--danger{border-color:var(--color-danger,var(--color-border-strong));color:var(--color-danger-strong,var(--color-danger))}.vds-inbox-action--accent{background:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-text)}.vds-inbox-action--icon{height:2.25rem;height:var(--icon-container-md,2.25rem);padding:0;width:2.25rem;width:var(--icon-container-md,2.25rem)}.vds-inbox-action--flat{background:transparent;border-color:transparent;color:var(--color-text-muted)}.vds-inbox-action--flat:hover{background:var(--color-surface-subtle);border-color:transparent;color:var(--color-text);transform:none}.vds-inbox--actions-flat .vds-inbox-action{background:transparent;border-color:transparent;color:var(--color-text-muted);transform:none}.vds-inbox--actions-flat .vds-inbox-action:hover{background:var(--color-surface-subtle);border-color:transparent;color:var(--color-text)}.vds-inbox-row__expanded{background:var(--color-bg-soft,var(--color-surface-subtle));border-top:1px solid var(--color-border-subtle);color:var(--color-text);display:none;grid-column:1/-1;grid-row:2;padding:var(--space-4)}.vds-inbox-row--open .vds-inbox-row__expanded{display:block}.vds-inbox-row--open .vds-inbox-row__glance{-webkit-line-clamp:none;overflow:visible}.vds-inbox--flat .vds-inbox-row__expanded{background:var(--color-surface-subtle)}.vds-inbox-row__expanded.vds-is-hidden{display:none!important}.vds-inbox-row__expanded.vds-is-visible{display:block!important}.vds-inbox-row.is-flagged:before{background:var(--inbox-flag-color,var(--color-danger));bottom:0;content:"";left:0;position:absolute;right:auto;top:0;width:6px}.vds-inbox-row--flag-1{--inbox-flag-color:var(--color-danger);--inbox-flag-surface:var(--semantic-danger-bg,var(--color-danger-soft))}.vds-icon-flag--1{color:var(--color-danger)}.vds-inbox-row--flag-2{--inbox-flag-color:var(--color-warning);--inbox-flag-surface:var(--semantic-warning-bg,var(--color-warning-soft))}.vds-icon-flag--2{color:var(--color-warning)}.vds-inbox-row--flag-3{--inbox-flag-color:var(--color-info);--inbox-flag-surface:var(--semantic-info-bg,var(--color-info-soft))}.vds-icon-flag--3{color:var(--color-info)}.vds-inbox-row--flag-4{--inbox-flag-color:var(--color-success);--inbox-flag-surface:var(--semantic-success-bg,var(--color-success-soft))}.vds-icon-flag--4{color:var(--color-success)}.vds-inbox-row--flag-5{--inbox-flag-color:var(--color-accent);--inbox-flag-surface:var(--color-accent-soft)}.vds-icon-flag--5{color:var(--color-accent)}.vds-inbox-filter{align-items:center;background:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-3);padding:var(--space-3) var(--space-4)}.vds-inbox-filter__group{align-items:center;display:inline-flex;gap:var(--space-2);min-width:0}.vds-inbox-filter__label{color:var(--color-text-muted)}.vds-inbox-filter__chip,.vds-inbox-filter__label{font-size:var(--text-xs);font-weight:var(--font-weight-semibold);white-space:nowrap}.vds-inbox-filter__chip{align-items:center;background:var(--color-surface-subtle);border:1px solid var(--color-border-subtle);border-radius:var(--radius-pill);color:var(--color-text);display:inline-flex;gap:var(--space-1_5);line-height:1.1;padding:var(--space-1_5) var(--space-2_5)}.vds-inbox-filter__chip--active{background:var(--color-accent-soft);border-color:var(--color-accent)}.vds-inbox-filter__actions{margin-left:auto}.vds-inbox-cornerbar,.vds-inbox-filter__actions{align-items:center;display:inline-flex;gap:var(--space-2)}.vds-inbox-cornerbar{bottom:var(--space-6);left:auto;pointer-events:none;position:fixed;right:var(--space-6);top:auto;z-index:40}.vds-inbox-cornerbar--left{bottom:var(--space-6);left:var(--space-6);right:auto;top:auto}.vds-inbox-cornerbar__inner{align-items:center;background:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-xl,var(--radius-lg));box-shadow:none;box-shadow:var(--shadow-md,none);display:inline-flex;gap:var(--space-2);padding:var(--space-2);pointer-events:auto}@media (max-width:768px){.vds-inbox-row__inner{gap:var(--space-3);grid-template-columns:1fr}.vds-inbox-row__actions{justify-content:flex-start;padding-top:0}.vds-inbox-row__titleline{flex-wrap:wrap;row-gap:var(--space-1_5)}.vds-inbox-row__title{flex-basis:100%;overflow:visible;text-overflow:clip;white-space:normal}.vds-inbox-row__labels{flex-basis:100%;justify-content:flex-start}.vds-inbox-nav__bar{flex-wrap:wrap;gap:var(--space-3);justify-content:center}.vds-inbox-tabs{justify-content:center;order:1;width:100%}.vds-inbox-nav__left{order:0}.vds-inbox-nav__right{order:2}.vds-inbox-nav__bottom{align-items:stretch;flex-direction:column}.vds-inbox-nav__bottom-left,.vds-inbox-nav__bottom-right{justify-content:flex-start}.vds-inbox-search.is-open .vds-inbox-search__field,.vds-inbox-search__toggle[aria-expanded=true]+.vds-inbox-search__field{width:min(100%,40rem)}.vds-inbox__hide-sm{display:none!important}}@media (min-width:769px){.vds-inbox__show-sm{display:none!important}}@media (max-width:1024px){.vds-inbox__hide-md{display:none!important}}@media (min-width:1025px){.vds-inbox__show-md{display:none!important}}.vds-inbox__truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vds-inbox__sr-only{clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}
+.vds-inbox,[data-vds-inbox]{--inbox-row-radius:var(--radius-lg,var(--radius-md));--inbox-row-border:var(--color-border-subtle);--inbox-row-bg:var(--color-surface);--inbox-row-bg-hover:var(--color-surface-subtle,var(--color-surface-hover));--inbox-row-shadow:none;--inbox-title-size:var(--text-sm);--inbox-desc-size:var(--text-xs);--inbox-icon-size:var(--icon-sm);--inbox-icon-muted:var(--color-icon-muted,var(--color-text-soft));--inbox-icon-strong:var(--color-icon-strong,var(--color-text));--inbox-action-gap:var(--space-2);--inbox-badge-gap:var(--space-2);--inbox-row-pad-x:var(--space-4);--inbox-row-pad-y:var(--space-4);--inbox-actions-min-width:0;--inbox-actions-justify:flex-end;width:100%}.vds-inbox--dense{--inbox-row-pad-x:var(--space-3);--inbox-row-pad-y:var(--space-3);--inbox-title-size:var(--text-xs);--inbox-desc-size:var(--text-xxs,var(--text-xs))}.vds-inbox-nav{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-4)}.vds-inbox-nav__bar{align-items:center;background:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);display:flex;gap:var(--space-4);justify-content:space-between;padding:var(--space-3) var(--space-4)}.vds-inbox-nav__left,.vds-inbox-nav__right{align-items:center;display:inline-flex;flex:0 0 auto;gap:var(--space-2)}.vds-inbox-nav__bottom{align-items:center;display:flex;gap:var(--space-3);justify-content:space-between}.vds-inbox-nav__bottom-left,.vds-inbox-nav__bottom-right{align-items:center;display:inline-flex;gap:var(--space-2)}.vds-inbox-nav__bottom-left:empty,.vds-inbox-nav__bottom-right:empty{display:none}.vds-inbox-nav__bottom--left{justify-content:flex-start}.vds-inbox-nav__bottom--center{justify-content:center}.vds-inbox-nav__bottom--right{justify-content:flex-end}.vds-inbox-nav__bottom--split{justify-content:space-between}.vds-inbox-tabs{background:var(--color-surface-subtle);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);flex:1 1 auto;gap:var(--space-1);justify-content:center;min-width:0;padding:var(--space-1)}.vds-inbox-tab,.vds-inbox-tabs{align-items:center;display:inline-flex}.vds-inbox-tab{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--radius-md);color:var(--color-text-muted);cursor:pointer;font-size:var(--text-sm);font-weight:var(--font-weight-semibold);gap:var(--space-2);line-height:1;padding:var(--space-2) var(--space-3);-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.vds-inbox-tab:hover{background:var(--color-surface);color:var(--color-text)}.vds-inbox-tab.is-active,.vds-inbox-tab[aria-selected=true]{background:var(--color-surface);border:1px solid var(--color-border-subtle);color:var(--color-text)}.vds-inbox-tab:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.vds-inbox-tab__count{align-items:center;background:var(--color-surface-subtle);border:1px solid var(--color-border-subtle);border-radius:var(--radius-pill);color:var(--color-text-muted);display:inline-flex;font-size:var(--text-xs);font-weight:var(--font-weight-semibold);height:1.5rem;justify-content:center;min-width:1.5rem;padding:0 var(--space-2)}.vds-inbox-search{align-items:center;display:inline-flex;gap:var(--space-2);min-width:0}.vds-inbox-search__toggle{align-items:center;background:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);color:var(--color-text);display:inline-flex;height:2.25rem;height:var(--icon-container-md,2.25rem);justify-content:center;transition:background-color var(--transition-fast),border-color var(--transition-fast);width:2.25rem;width:var(--icon-container-md,2.25rem)}.vds-inbox-search__toggle:hover{background:var(--color-surface-subtle,var(--color-surface-hover));border-color:var(--color-border-strong,var(--color-border-subtle))}.vds-inbox-search__toggle svg{color:currentColor;height:1rem;height:var(--icon-xs,1rem);width:1rem;width:var(--icon-xs,1rem)}.vds-inbox-search__field{align-items:center;display:inline-flex;gap:var(--space-2);opacity:0;overflow:hidden;pointer-events:none;transition:width var(--transition-normal),opacity var(--transition-fast);width:0}.vds-inbox-search__input{background:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);color:var(--color-text);font-size:var(--text-sm);line-height:var(--line-height-normal);max-width:32rem;min-width:10rem;padding:var(--space-2) var(--space-3);width:100%}.vds-inbox-search.is-open .vds-inbox-search__field,.vds-inbox-search__toggle[aria-expanded=true]+.vds-inbox-search__field{opacity:1;pointer-events:auto;width:min(36rem,52vw)}.vds-inbox-search--full{width:100%}.vds-inbox-search--full .vds-inbox-search__field{opacity:1;pointer-events:auto;width:100%}.vds-inbox-nav__bar--search-full .vds-inbox-nav__left,.vds-inbox-nav__bar--search-full .vds-inbox-search{flex:1 1 auto;width:100%}.vds-inbox-nav__bar--search-full .vds-inbox-search__field{opacity:1;pointer-events:auto;width:100%}.vds-inbox-nav__bar--search-full .vds-inbox-search__input{max-width:none}.vds-inbox-nav__bar--search-full .vds-inbox-nav__right,.vds-inbox-nav__bar--search-full .vds-inbox-tabs{display:none}.vds-inbox__list{display:flex;flex-direction:column;gap:var(--space-2)}.vds-inbox--flat .vds-inbox__list{border-bottom:1px solid var(--color-border-subtle);border-top:1px solid var(--color-border-subtle);gap:0}.vds-inbox--flat .vds-inbox-row{border-left:0;border-radius:0;border-right:0;border-top:0}.vds-inbox--flat .vds-inbox-row+.vds-inbox-row{border-top:1px solid var(--color-border-subtle)}.vds-inbox-row{background:var(--inbox-row-bg);border:1px solid var(--inbox-row-border);border-radius:var(--inbox-row-radius);box-shadow:var(--inbox-row-shadow);overflow:clip;position:relative;transition:background-color var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast);width:100%}.vds-inbox-row:hover{background:var(--inbox-row-bg-hover);border-color:var(--color-border-strong,var(--color-border-subtle))}.vds-inbox-row:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.vds-inbox-row__main{background:transparent;border:0;color:inherit;display:grid;grid-template-columns:1fr;grid-template-rows:auto auto;padding:0;text-align:left;width:100%}.vds-inbox-row__inner{grid-gap:var(--space-4);align-items:start;display:grid;gap:var(--space-4);grid-column:1/-1;grid-row:1;grid-template-areas:"badges  badges" "meta    actions" "data    data";grid-template-columns:1fr auto;padding:var(--inbox-row-pad-y) var(--inbox-row-pad-x)}.vds-inbox-row__badges{grid-area:badges}.vds-inbox-row__meta{grid-area:meta}.vds-inbox-row__actions{grid-area:actions}.vds-inbox-row__data{display:flex;flex-direction:column;gap:var(--space-2);grid-area:data;min-width:0}@media (max-width:768px){.vds-inbox-row__inner{grid-template-areas:"badges" "meta" "data" "actions";grid-template-columns:1fr}.vds-inbox-row__actions{justify-content:flex-end;min-width:0;padding-top:0}}.vds-inbox-row__labels{justify-content:flex-start;margin-left:0;text-align:left}.vds-inbox-row__title{min-width:0}.vds-inbox-row--minimal .vds-inbox-row__inner{gap:var(--space-3);padding:var(--space-3) var(--space-3)}.vds-inbox-row--minimal{--inbox-title-size:var(--text-xs);--inbox-desc-size:var(--text-xxs,var(--text-xs))}.vds-inbox-row--normal .vds-inbox-row__inner{gap:var(--space-4);padding:var(--space-4) var(--space-4)}.vds-inbox-row--rich .vds-inbox-row__inner{gap:var(--space-5);padding:var(--space-5) var(--space-5)}.vds-inbox-row--rich{--inbox-title-size:var(--text-md,var(--text-sm));--inbox-desc-size:var(--text-sm)}.vds-inbox-row--mega .vds-inbox-row__inner{gap:var(--space-6);padding:var(--space-6) var(--space-6)}.vds-inbox-row--mega{--inbox-title-size:var(--text-lg,var(--text-md,var(--text-sm)));--inbox-desc-size:var(--text-sm)}.vds-inbox-row__badges{align-items:center;display:flex;flex-wrap:wrap;gap:var(--inbox-badge-gap);grid-column:1/-1;margin-bottom:var(--space-3)}.vds-inbox-badge{align-items:center;background:var(--color-surface-subtle);border:1px solid var(--color-border-subtle);border-radius:var(--radius-pill);color:var(--color-text);display:inline-flex;font-size:var(--text-xxs);font-weight:var(--font-weight-semibold);gap:var(--space-1_5);letter-spacing:.02em;line-height:1.1;padding:var(--space-1) var(--space-2_5);white-space:nowrap}.vds-inbox-badge svg{color:currentColor;height:var(--icon-xxs);width:var(--icon-xxs)}.vds-inbox-badge--accent{background:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-text)}.vds-inbox-badge--info{background:var(--semantic-info-bg,var(--color-info-soft));border-color:var(--semantic-info-border,var(--color-info));color:var(--semantic-info-text,var(--color-text))}.vds-inbox-badge--success{background:var(--semantic-success-bg,var(--color-success-soft));border-color:var(--semantic-success-border,var(--color-success));color:var(--semantic-success-text,var(--color-text))}.vds-inbox-badge--warning{background:var(--semantic-warning-bg,var(--color-warning-soft));border-color:var(--semantic-warning-border,var(--color-warning));color:var(--semantic-warning-text,var(--color-text))}.vds-inbox-badge--danger{background:var(--semantic-danger-bg,var(--color-danger-soft));border-color:var(--semantic-danger-border,var(--color-danger));color:var(--semantic-danger-text,var(--color-text))}.vds-inbox-row__meta{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}.vds-inbox-row__titleline{align-items:center;display:flex;gap:var(--space-2);min-width:0}.vds-inbox-row__status{align-items:center;display:inline-flex;flex:0 0 auto;gap:var(--space-1_5)}.vds-inbox-row__status-icon{align-items:center;color:var(--inbox-icon-muted);display:inline-flex;height:var(--inbox-icon-size);justify-content:center;width:var(--inbox-icon-size)}.vds-inbox-row__status-icon svg{height:100%;width:100%}.vds-inbox-row.is-bookmarked .vds-inbox-row__status-icon--bookmark,.vds-inbox-row.is-starred .vds-inbox-row__status-icon--star{color:var(--color-accent)}.vds-inbox-row.is-flagged .vds-inbox-row__status-icon--flag{color:var(--color-danger-strong,var(--color-danger))}.vds-inbox-row__title{color:var(--color-text);flex:1 1 auto;font-size:var(--inbox-title-size);font-weight:var(--font-weight-semibold);letter-spacing:0;letter-spacing:var(--letter-tight,0);line-height:var(--line-height-snug);max-width:100%;min-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vds-inbox-row__labels{align-items:center;display:inline-flex;flex:0 0 auto;gap:var(--space-1_5);min-width:0}.vds-inbox-label{align-items:center;background:transparent;border:1px solid var(--color-border-subtle);border-radius:var(--radius-pill);color:var(--color-text-muted);display:inline-flex;font-size:var(--text-xxs);font-weight:var(--font-weight-semibold);height:1.4rem;padding:0 var(--space-2);white-space:nowrap}.vds-inbox-label--accent{background:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-text)}.vds-inbox-label--muted{background:var(--color-surface-subtle);border-color:var(--color-border-subtle);color:var(--color-text-muted)}.vds-inbox-row__glance{-webkit-box-orient:vertical;-webkit-line-clamp:2;color:var(--color-text-muted);display:-webkit-box;font-size:var(--inbox-desc-size);line-height:var(--line-height-relaxed);min-width:0;overflow:hidden}.vds-inbox-row--rich .vds-inbox-row__glance{-webkit-line-clamp:3}.vds-inbox-row--mega .vds-inbox-row__glance{-webkit-line-clamp:4}.vds-inbox-row__metafoot{align-items:center;color:var(--color-text-soft,var(--color-text-muted));display:flex;flex-wrap:wrap;font-size:var(--text-xxs,var(--text-xs));gap:var(--space-2) var(--space-4)}.vds-inbox-row__metafoot strong{color:var(--color-text-muted);font-weight:var(--font-weight-semibold)}.vds-inbox-row__details{color:var(--color-text-muted);display:flex;flex-wrap:wrap;font-size:var(--text-xs);gap:var(--space-2) var(--space-3)}.vds-inbox-row__details-item{align-items:center;background:var(--color-surface-subtle);border:1px solid var(--color-border-subtle);border-radius:var(--radius-pill);display:inline-flex;gap:var(--space-1_5);line-height:1.1;padding:var(--space-1) var(--space-2)}.vds-inbox-row__details-item svg{color:currentColor;height:var(--icon-xxs);width:var(--icon-xxs)}.vds-inbox-row__actions{align-items:flex-start;display:flex;flex-wrap:wrap;gap:var(--inbox-action-gap);justify-content:var(--inbox-actions-justify);min-width:var(--inbox-actions-min-width);padding-top:var(--space-0_5)}.vds-inbox-row--actions-below .vds-inbox-row__inner{grid-template-areas:"badges" "meta" "data" "actions";grid-template-columns:1fr}.vds-inbox-row--actions-below .vds-inbox-row__actions{justify-content:flex-start;padding-top:0}.vds-inbox-row--actions-full .vds-inbox-row__actions{grid-column:1/-1;justify-content:flex-start;padding-top:0}.vds-inbox-row__actions--left{justify-content:flex-start}.vds-inbox-row__actions--center{justify-content:center}.vds-inbox-row__actions--right{justify-content:flex-end}.vds-inbox-action{align-items:center;background:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-sm);color:var(--color-text);display:inline-flex;font-size:var(--text-xs);font-weight:var(--font-weight-semibold);gap:var(--space-1_5);justify-content:center;padding:var(--space-1_5) var(--space-2_5);transition:background-color var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast),transform var(--transition-fast)}a.vds-inbox-action{-webkit-text-decoration:none;text-decoration:none}.vds-inbox-action svg{color:currentColor;height:var(--icon-xxs);width:var(--icon-xxs)}.vds-inbox-action:hover{background:var(--color-surface-subtle,var(--color-surface-hover));border-color:var(--color-border-strong,var(--color-border-subtle));transform:translateY(-1px)}.vds-inbox-action:active{transform:translateY(0)}.vds-inbox-action--danger{border-color:var(--color-danger,var(--color-border-strong));color:var(--color-danger-strong,var(--color-danger))}.vds-inbox-action--accent{background:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-text)}.vds-inbox-action--icon{height:2.25rem;height:var(--icon-container-md,2.25rem);padding:0;width:2.25rem;width:var(--icon-container-md,2.25rem)}.vds-inbox-action--flat{background:transparent;border-color:transparent;color:var(--color-text-muted)}.vds-inbox-action--flat:hover{background:var(--color-surface-subtle);border-color:transparent;color:var(--color-text);transform:none}.vds-inbox--actions-flat .vds-inbox-action{background:transparent;border-color:transparent;color:var(--color-text-muted);transform:none}.vds-inbox--actions-flat .vds-inbox-action:hover{background:var(--color-surface-subtle);border-color:transparent;color:var(--color-text)}.vds-inbox-row__expanded{background:var(--color-bg-soft,var(--color-surface-subtle));border-top:1px solid var(--color-border-subtle);color:var(--color-text);display:none;grid-column:1/-1;grid-row:2;padding:var(--space-4)}.vds-inbox-row--open .vds-inbox-row__expanded{display:block}.vds-inbox-row--open .vds-inbox-row__glance{-webkit-line-clamp:none;overflow:visible}.vds-inbox--flat .vds-inbox-row__expanded{background:var(--color-surface-subtle)}.vds-inbox-row__expanded.vds-is-hidden{display:none!important}.vds-inbox-row__expanded.vds-is-visible{display:block!important}.vds-inbox-row.is-flagged:before{background:var(--inbox-flag-color,var(--color-danger));bottom:0;content:"";left:0;position:absolute;right:auto;top:0;width:6px}.vds-inbox-row--flag-1{--inbox-flag-color:var(--color-danger);--inbox-flag-surface:var(--semantic-danger-bg,var(--color-danger-soft))}.vds-icon-flag--1{color:var(--color-danger)}.vds-inbox-row--flag-2{--inbox-flag-color:var(--color-warning);--inbox-flag-surface:var(--semantic-warning-bg,var(--color-warning-soft))}.vds-icon-flag--2{color:var(--color-warning)}.vds-inbox-row--flag-3{--inbox-flag-color:var(--color-info);--inbox-flag-surface:var(--semantic-info-bg,var(--color-info-soft))}.vds-icon-flag--3{color:var(--color-info)}.vds-inbox-row--flag-4{--inbox-flag-color:var(--color-success);--inbox-flag-surface:var(--semantic-success-bg,var(--color-success-soft))}.vds-icon-flag--4{color:var(--color-success)}.vds-inbox-row--flag-5{--inbox-flag-color:var(--color-accent);--inbox-flag-surface:var(--color-accent-soft)}.vds-icon-flag--5{color:var(--color-accent)}.vds-inbox-filter{align-items:center;background:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-3);padding:var(--space-3) var(--space-4)}.vds-inbox-filter__group{align-items:center;display:inline-flex;gap:var(--space-2);min-width:0}.vds-inbox-filter__label{color:var(--color-text-muted)}.vds-inbox-filter__chip,.vds-inbox-filter__label{font-size:var(--text-xs);font-weight:var(--font-weight-semibold);white-space:nowrap}.vds-inbox-filter__chip{align-items:center;background:var(--color-surface-subtle);border:1px solid var(--color-border-subtle);border-radius:var(--radius-pill);color:var(--color-text);display:inline-flex;gap:var(--space-1_5);line-height:1.1;padding:var(--space-1_5) var(--space-2_5)}.vds-inbox-filter__chip--active{background:var(--color-accent-soft);border-color:var(--color-accent)}.vds-inbox-filter__actions{margin-left:auto}.vds-inbox-cornerbar,.vds-inbox-filter__actions{align-items:center;display:inline-flex;gap:var(--space-2)}.vds-inbox-cornerbar{bottom:var(--space-6);left:auto;pointer-events:none;position:fixed;right:var(--space-6);top:auto;z-index:40}.vds-inbox-cornerbar--left{bottom:var(--space-6);left:var(--space-6);right:auto;top:auto}.vds-inbox-cornerbar__inner{align-items:center;background:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-xl,var(--radius-lg));box-shadow:none;box-shadow:var(--shadow-md,none);display:inline-flex;gap:var(--space-2);padding:var(--space-2);pointer-events:auto}@media (max-width:768px){.vds-inbox-row__inner{gap:var(--space-3);grid-template-columns:1fr}.vds-inbox-row__actions{justify-content:flex-start;padding-top:0}.vds-inbox-row__titleline{flex-wrap:wrap;row-gap:var(--space-1_5)}.vds-inbox-row__title{flex-basis:100%;overflow:visible;text-overflow:clip;white-space:normal}.vds-inbox-row__labels{flex-basis:100%;justify-content:flex-start}.vds-inbox-nav__bar{flex-wrap:wrap;gap:var(--space-3);justify-content:center}.vds-inbox-tabs{justify-content:center;order:1;width:100%}.vds-inbox-nav__left{order:0}.vds-inbox-nav__right{order:2}.vds-inbox-nav__bottom{align-items:stretch;flex-direction:column}.vds-inbox-nav__bottom-left,.vds-inbox-nav__bottom-right{justify-content:flex-start}.vds-inbox-search.is-open .vds-inbox-search__field,.vds-inbox-search__toggle[aria-expanded=true]+.vds-inbox-search__field{width:min(100%,40rem)}.vds-inbox__hide-sm{display:none!important}}@media (min-width:769px){.vds-inbox__show-sm{display:none!important}}@media (max-width:1024px){.vds-inbox__hide-md{display:none!important}}@media (min-width:1025px){.vds-inbox__show-md{display:none!important}}.vds-inbox__truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vds-inbox__sr-only{clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}

package/dist/vds.css

@@ -10946,6 +10946,33 @@ select.form-control:not([multiple]):not([size]) {
     pointer-events: auto;
 }
 
+/* Toolbar takeover: search spans the entire nav bar */
+
+.vds-inbox-nav__bar--search-full .vds-inbox-nav__left {
+    flex: 1 1 auto;
+    width: 100%;
+}
+
+.vds-inbox-nav__bar--search-full .vds-inbox-search {
+    flex: 1 1 auto;
+    width: 100%;
+}
+
+.vds-inbox-nav__bar--search-full .vds-inbox-search__field {
+    width: 100%;
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.vds-inbox-nav__bar--search-full .vds-inbox-search__input {
+    max-width: none;
+}
+
+.vds-inbox-nav__bar--search-full .vds-inbox-tabs,
+.vds-inbox-nav__bar--search-full .vds-inbox-nav__right {
+    display: none;
+}
+
 /* ---------------------------------------------------------
    2. LIST (rounded vs flat)
 --------------------------------------------------------- */