@24vlh/vds 0.3.0 → 0.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/components/content-blocks.css +109 -0
  2. package/dist/components/content-blocks.min.css +1 -1
  3. package/dist/components/flows.css +1 -2
  4. package/dist/components/forms.css +13 -1
  5. package/dist/components/forms.min.css +1 -1
  6. package/dist/components/hero.css +1 -1
  7. package/dist/components/icons.css +11 -1
  8. package/dist/components/icons.min.css +1 -1
  9. package/dist/components/inbox.css +64 -8
  10. package/dist/components/inbox.min.css +1 -1
  11. package/dist/identity.css +1 -1
  12. package/dist/vds.css +218 -12
  13. package/dist/vds.min.css +1 -1
  14. package/package.json +3 -24
package/dist/components/inbox.css CHANGED
@@ -385,12 +385,12 @@
385
385
  transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
386
386
  }
387
387
 
388
- .inbox-row:hover {
388
+ .inbox-row__hover:hover {
389
389
  background: var(--inbox-row-bg-hover);
390
390
  border-color: var(--color-border-strong, var(--color-border-subtle));
391
391
  }
392
392
 
393
- .inbox-row:focus-visible {
393
+ .inbox-row__focus-visible:focus-visible {
394
394
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
395
395
  outline-offset: var(--focus-ring-offset);
396
396
  }
@@ -929,7 +929,6 @@ a.inbox-action {
929
929
  .inbox-action--flat {
930
930
  border-color: transparent;
931
931
  background: transparent;
932
- color: var(--color-text-muted);
933
932
  }
934
933
 
935
934
  .inbox-action--borderless {
@@ -943,7 +942,6 @@ a.inbox-action {
943
942
  .inbox-action--flat:hover:not(:disabled):not([aria-disabled="true"]):not(.is-disabled) {
944
943
  background: var(--color-surface-subtle);
945
944
  border-color: transparent;
946
- color: var(--color-text);
947
945
  transform: none;
948
946
  }
949
947
 
@@ -952,14 +950,12 @@ a.inbox-action {
952
950
  .inbox--actions-flat .inbox-action {
953
951
  border-color: transparent;
954
952
  background: transparent;
955
- color: var(--color-text-muted);
956
953
  transform: none;
957
954
  }
958
955
 
959
956
  .inbox--actions-flat .inbox-action:hover:not(:disabled):not([aria-disabled="true"]):not(.is-disabled) {
960
957
  background: var(--color-surface-subtle);
961
958
  border-color: transparent;
962
- color: var(--color-text);
963
959
  }
964
960
 
965
961
  .inbox-action:disabled,
@@ -1002,10 +998,12 @@ a.inbox-action.is-disabled {
1002
998
  background: var(--color-bg-soft, var(--color-surface-subtle));
1003
999
  color: var(--color-text);
1004
1000
  display: none;
1001
+ flex-direction: column;
1002
+ gap: var(--space-3);
1005
1003
  }
1006
1004
 
1007
1005
  .inbox-row--open .inbox-row__expanded {
1008
- display: block;
1006
+ display: flex;
1009
1007
  }
1010
1008
 
1011
1009
  .inbox-row--open .inbox-row__glance {
@@ -1139,11 +1137,27 @@ a.inbox-action.is-disabled {
1139
1137
  white-space: nowrap;
1140
1138
  }
1141
1139
 
1142
- .inbox-filter__chip--active {
1140
+ button.inbox-filter__chip {
1141
+ -webkit-appearance: none;
1142
+ -moz-appearance: none;
1143
+ appearance: none;
1144
+ cursor: pointer;
1145
+ font: inherit;
1146
+ }
1147
+
1148
+ .inbox-filter__chip--active,
1149
+ .inbox-filter__chip.is-active,
1150
+ .inbox-filter__chip[aria-pressed="true"] {
1143
1151
  border-color: var(--color-accent);
1144
1152
  background: var(--color-accent-soft);
1145
1153
  }
1146
1154
 
1155
+ button.inbox-filter__chip:disabled,
1156
+ button.inbox-filter__chip[aria-disabled="true"] {
1157
+ cursor: not-allowed;
1158
+ opacity: 0.6;
1159
+ }
1160
+
1147
1161
  .inbox-filter__actions {
1148
1162
  margin-left: auto;
1149
1163
  display: inline-flex;
@@ -1302,6 +1316,48 @@ a.inbox-action.is-disabled {
1302
1316
  white-space: nowrap;
1303
1317
  }
1304
1318
 
1319
+ .inbox__stack {
1320
+ display: flex;
1321
+ flex-direction: column;
1322
+ gap: var(--space-3);
1323
+ }
1324
+
1325
+ .inbox__stack--tight {
1326
+ gap: var(--space-2);
1327
+ }
1328
+
1329
+ .inbox__stack--loose {
1330
+ gap: var(--space-4);
1331
+ }
1332
+
1333
+ .inbox__cluster {
1334
+ display: flex;
1335
+ flex-wrap: wrap;
1336
+ align-items: center;
1337
+ gap: var(--space-2) var(--space-3);
1338
+ }
1339
+
1340
+ .inbox__form {
1341
+ display: flex;
1342
+ flex-direction: column;
1343
+ gap: var(--space-3);
1344
+ min-width: 0;
1345
+ }
1346
+
1347
+ .inbox__form-row {
1348
+ display: flex;
1349
+ flex-wrap: wrap;
1350
+ align-items: flex-start;
1351
+ gap: var(--space-3);
1352
+ }
1353
+
1354
+ .inbox__form-actions {
1355
+ display: flex;
1356
+ flex-wrap: wrap;
1357
+ align-items: center;
1358
+ gap: var(--space-2);
1359
+ }
1360
+
1305
1361
  .inbox__sr-only {
1306
1362
  position: absolute !important;
1307
1363
  width: 1px !important;
package/dist/components/inbox.min.css CHANGED
@@ -1 +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%}.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))}.inbox-nav{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-4)}.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;min-height:calc(var(--space-3)*2 + var(--space-1)*2 + var(--space-2)*2 + var(--text-sm));padding:var(--space-3) var(--space-4)}.inbox-nav__left,.inbox-nav__right{align-items:center;display:inline-flex;flex:0 0 auto;gap:var(--space-2)}.inbox-nav__bottom{align-items:center;display:flex;gap:var(--space-3);justify-content:space-between}.inbox-nav__bottom-left,.inbox-nav__bottom-right{align-items:center;display:inline-flex;gap:var(--space-2)}.inbox-nav__bottom-left:empty,.inbox-nav__bottom-right:empty{display:none}.inbox-nav__bottom--left{justify-content:flex-start}.inbox-nav__bottom--center{justify-content:center}.inbox-nav__bottom--right{justify-content:flex-end}.inbox-nav__bottom--split{justify-content:space-between}.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)}.inbox-tab,.inbox-tabs{align-items:center;display:inline-flex}.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}.inbox-tab.is-active,.inbox-tab:hover:not(:disabled):not([aria-disabled=true]):not(.is-disabled),.inbox-tab[aria-selected=true]{background:var(--color-surface);color:var(--color-text)}.inbox-tab.is-active,.inbox-tab[aria-selected=true]{border:1px solid var(--color-border-subtle)}.inbox-tab:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.inbox-tab.is-disabled,.inbox-tab:disabled,.inbox-tab[aria-disabled=true]{background:transparent;border-color:transparent;color:var(--color-text-muted);cursor:not-allowed;opacity:.6;pointer-events:none}.inbox-tab__count{background:var(--color-surface-subtle);border:1px solid var(--color-border-subtle);border-radius:var(--radius-pill);color:var(--color-text-muted);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)}.inbox-search,.inbox-tab__count{align-items:center;display:inline-flex}.inbox-search{gap:var(--space-2);min-width:0}.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)}.inbox-search__toggle:hover:not(:disabled):not([aria-disabled=true]):not(.is-disabled){background:var(--color-surface-subtle,var(--color-surface-hover));border-color:var(--color-border-strong,var(--color-border-subtle))}.inbox-search__toggle.is-disabled,.inbox-search__toggle:disabled,.inbox-search__toggle[aria-disabled=true]{background:var(--color-surface-subtle);border-color:var(--color-border-subtle);color:var(--color-text-muted);cursor:not-allowed;opacity:.6;pointer-events:none}.inbox-search__toggle svg{color:currentColor;height:1rem;height:var(--icon-xs,1rem);width:1rem;width:var(--icon-xs,1rem)}.inbox-search__field{align-items:center;display:inline-flex;flex:1 1 auto;gap:var(--space-2);min-width:0;opacity:0;overflow:hidden;pointer-events:none;transition:width var(--transition-normal),opacity var(--transition-fast);width:0}.inbox-search__input{background:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);color:var(--color-text);flex:1 1 auto;font-size:var(--text-sm);line-height:var(--line-height-normal);max-width:none;min-width:10rem;padding:var(--space-2) var(--space-3);width:100%}.inbox-search.is-open .inbox-search__field,.inbox-search__toggle[aria-expanded=true]+.inbox-search__field{opacity:1;pointer-events:auto;width:100%}.inbox-nav__bar--search-full .inbox-nav__left,.inbox-nav__bar--search-full .inbox-search{flex:1 1 auto;width:100%}.inbox-nav__bar--search-full .inbox-search__field{opacity:1;pointer-events:auto;width:100%}.inbox-nav__bar--search-full .inbox-search__input{max-width:none}.inbox-nav__bar--search-full .inbox-nav__right,.inbox-nav__bar--search-full .inbox-tabs{display:none}.inbox__list{display:flex;flex-direction:column;gap:var(--space-2)}.inbox--flat .inbox__list{border-bottom:1px solid var(--color-border-subtle);border-top:1px solid var(--color-border-subtle);gap:0}.inbox--flat .inbox-row{border-left:0;border-radius:0;border-right:0;border-top:0}.inbox--flat .inbox-row+.inbox-row{border-top:1px solid var(--color-border-subtle)}.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%}.inbox-row:hover{background:var(--inbox-row-bg-hover);border-color:var(--color-border-strong,var(--color-border-subtle))}.inbox-row:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.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%}.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)}.inbox-row__badges{grid-area:badges}.inbox-row__meta{grid-area:meta}.inbox-row__actions{grid-area:actions}.inbox-row__data{display:flex;flex-direction:column;gap:var(--space-2);grid-area:data;min-width:0}@media (max-width:768px){.inbox-row__inner{grid-template-areas:"badges" "meta" "data" "actions";grid-template-columns:1fr}.inbox-row__actions{justify-content:flex-end;min-width:0;padding-top:0}}.inbox-row__labels{justify-content:flex-start;margin-left:0;text-align:left}.inbox-row__title{min-width:0}.inbox-row--minimal .inbox-row__inner{gap:var(--space-3);padding:var(--space-3) var(--space-3)}.inbox-row--minimal{--inbox-title-size:var(--text-xs);--inbox-desc-size:var(--text-xxs,var(--text-xs))}.inbox-row--normal .inbox-row__inner{gap:var(--space-4);padding:var(--space-4) var(--space-4)}.inbox-row--rich .inbox-row__inner{gap:var(--space-5);padding:var(--space-5) var(--space-5)}.inbox-row--rich{--inbox-title-size:var(--text-md,var(--text-sm));--inbox-desc-size:var(--text-sm)}.inbox-row--mega .inbox-row__inner{gap:var(--space-6);padding:var(--space-6) var(--space-6)}.inbox-row--mega{--inbox-title-size:var(--text-lg,var(--text-md,var(--text-sm)));--inbox-desc-size:var(--text-sm)}.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)}.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}.inbox-badge svg{color:currentColor;height:var(--icon-xxs);width:var(--icon-xxs)}.inbox-badge--accent{background:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-text)}.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))}.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))}.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))}.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))}.inbox-row__meta{flex-direction:column}.inbox-row__meta,.inbox-row__titleline{display:flex;gap:var(--space-2);min-width:0}.inbox-row__titleline{align-items:center}.inbox-row__status{align-items:center;display:inline-flex;flex:0 0 auto;gap:var(--space-1_5)}.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)}.inbox-row__status-icon svg{height:100%;width:100%}.inbox-row.is-bookmarked .inbox-row__status-icon--bookmark,.inbox-row.is-starred .inbox-row__status-icon--star{color:var(--color-accent)}.inbox-row.is-flagged .inbox-row__status-icon--flag{color:var(--color-danger-strong,var(--color-danger))}.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}.inbox-row__labels{flex:0 0 auto;gap:var(--space-1_5);min-width:0}.inbox-label,.inbox-row__labels{align-items:center;display:inline-flex}.inbox-label{background:transparent;border:1px solid var(--color-border-subtle);border-radius:var(--radius-pill);color:var(--color-text-muted);font-size:var(--text-xxs);font-weight:var(--font-weight-semibold);height:1.4rem;padding:0 var(--space-2);white-space:nowrap}.inbox-label--accent{background:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-text)}.inbox-label--muted{background:var(--color-surface-subtle);border-color:var(--color-border-subtle);color:var(--color-text-muted)}.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}.inbox-row--rich .inbox-row__glance{-webkit-line-clamp:3}.inbox-row--mega .inbox-row__glance{-webkit-line-clamp:4}.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)}.inbox-row__metafoot strong{color:var(--color-text-muted);font-weight:var(--font-weight-semibold)}.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)}.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)}.inbox-row__details-item svg{color:currentColor;height:var(--icon-xxs);width:var(--icon-xxs)}.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)}.inbox-row--actions-below .inbox-row__inner{grid-template-areas:"badges" "meta" "data" "actions";grid-template-columns:1fr}.inbox-row--actions-below .inbox-row__actions{justify-content:flex-start;padding-top:0}.inbox-row--actions-full .inbox-row__actions{grid-column:1/-1;justify-content:flex-start;padding-top:0}.inbox-row__actions--left{justify-content:flex-start}.inbox-row__actions--center{justify-content:center}.inbox-row__actions--right{justify-content:flex-end}.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.inbox-action{-webkit-text-decoration:none;text-decoration:none}.inbox-action svg{color:currentColor;height:var(--icon-xxs);width:var(--icon-xxs)}.inbox-action:hover:not(:disabled):not([aria-disabled=true]):not(.is-disabled){background:var(--color-surface-subtle,var(--color-surface-hover));border-color:var(--color-border-strong,var(--color-border-subtle));transform:translateY(-1px)}.inbox-action:active:not(:disabled):not([aria-disabled=true]):not(.is-disabled){transform:translateY(0)}.inbox-action--danger{border-color:var(--color-danger,var(--color-border-strong));color:var(--color-danger-strong,var(--color-danger))}.inbox-action--accent{background:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-text)}.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)}.inbox-action--flat{background:transparent;color:var(--color-text-muted)}.inbox-action--borderless,.inbox-action--borderless:hover:not(:disabled):not([aria-disabled=true]):not(.is-disabled),.inbox-action--flat{border-color:transparent}.inbox-action--flat:hover:not(:disabled):not([aria-disabled=true]):not(.is-disabled){background:var(--color-surface-subtle);border-color:transparent;color:var(--color-text);transform:none}.inbox--actions-flat .inbox-action{background:transparent;border-color:transparent;color:var(--color-text-muted);transform:none}.inbox--actions-flat .inbox-action:hover:not(:disabled):not([aria-disabled=true]):not(.is-disabled){background:var(--color-surface-subtle);border-color:transparent;color:var(--color-text)}.inbox-action.is-disabled,.inbox-action:disabled,.inbox-action[aria-disabled=true]{background:var(--color-surface-subtle);border-color:var(--color-border-subtle);color:var(--color-text-muted);cursor:not-allowed;opacity:.6;transform:none}.inbox-action--borderless.is-disabled,.inbox-action--borderless:disabled,.inbox-action--borderless[aria-disabled=true],.inbox-action--flat.is-disabled,.inbox-action--flat:disabled,.inbox-action--flat[aria-disabled=true]{background:transparent;border-color:transparent}a.inbox-action.is-disabled,a.inbox-action[aria-disabled=true]{pointer-events:none;-webkit-text-decoration:none;text-decoration:none}.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)}.inbox-row--open .inbox-row__expanded{display:block}.inbox-row--glance-open .inbox-row__glance,.inbox-row--open .inbox-row__glance{-webkit-line-clamp:none;overflow:visible}.inbox--flat .inbox-row__expanded{background:var(--color-surface-subtle)}.inbox-row__expanded.is-hidden{display:none!important}.inbox-row__expanded.is-visible{display:block!important}.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}.inbox-row--flag-1{--inbox-flag-color:var(--color-danger);--inbox-flag-surface:var(--semantic-danger-bg,var(--color-danger-soft))}.icon-flag--1{color:var(--color-danger)}.inbox-row--flag-2{--inbox-flag-color:var(--color-warning);--inbox-flag-surface:var(--semantic-warning-bg,var(--color-warning-soft))}.icon-flag--2{color:var(--color-warning)}.inbox-row--flag-3{--inbox-flag-color:var(--color-info);--inbox-flag-surface:var(--semantic-info-bg,var(--color-info-soft))}.icon-flag--3{color:var(--color-info)}.inbox-row--flag-4{--inbox-flag-color:var(--color-success);--inbox-flag-surface:var(--semantic-success-bg,var(--color-success-soft))}.icon-flag--4{color:var(--color-success)}.inbox-row--flag-5{--inbox-flag-color:var(--color-accent);--inbox-flag-surface:var(--color-accent-soft)}.icon-flag--5{color:var(--color-accent)}.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)}.inbox-filter__group{align-items:center;display:inline-flex;gap:var(--space-2);min-width:0}.inbox-filter__label{color:var(--color-text-muted)}.inbox-filter__chip,.inbox-filter__label{font-size:var(--text-xs);font-weight:var(--font-weight-semibold);white-space:nowrap}.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)}.inbox-filter__chip--active{background:var(--color-accent-soft);border-color:var(--color-accent)}.inbox-filter__actions{margin-left:auto}.inbox-cornerbar,.inbox-filter__actions{align-items:center;display:inline-flex;gap:var(--space-2)}.inbox-cornerbar{bottom:var(--space-6);left:auto;pointer-events:none;position:fixed;right:var(--space-6);top:auto;z-index:40}.inbox-cornerbar--left{bottom:var(--space-6);left:var(--space-6);right:auto;top:auto}.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){.inbox-row__inner{gap:var(--space-3);grid-template-columns:1fr}.inbox-row__actions{justify-content:flex-start;padding-top:0}.inbox-row__titleline{flex-wrap:wrap;row-gap:var(--space-1_5)}.inbox-row__title{flex-basis:100%;overflow:visible;text-overflow:clip;white-space:normal}.inbox-row__labels{flex-basis:100%;justify-content:flex-start}.inbox-nav__bar{flex-wrap:wrap;gap:var(--space-3);justify-content:center}.inbox-tabs{justify-content:center;order:1;width:100%}.inbox-nav__left{order:0}.inbox-nav__right{order:2}.inbox-nav__bottom{align-items:stretch;flex-direction:column}.inbox-nav__bottom-left,.inbox-nav__bottom-right{justify-content:flex-start}.inbox-search.is-open .inbox-search__field,.inbox-search__toggle[aria-expanded=true]+.inbox-search__field{width:100%}.inbox__hide-sm{display:none!important}}@media (min-width:769px){.inbox__show-sm{display:none!important}}@media (max-width:1024px){.inbox__hide-md{display:none!important}}@media (min-width:1025px){.inbox__show-md{display:none!important}}.inbox__truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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}
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%}.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))}.inbox-nav{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-4)}.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;min-height:calc(var(--space-3)*2 + var(--space-1)*2 + var(--space-2)*2 + var(--text-sm));padding:var(--space-3) var(--space-4)}.inbox-nav__left,.inbox-nav__right{align-items:center;display:inline-flex;flex:0 0 auto;gap:var(--space-2)}.inbox-nav__bottom{align-items:center;display:flex;gap:var(--space-3);justify-content:space-between}.inbox-nav__bottom-left,.inbox-nav__bottom-right{align-items:center;display:inline-flex;gap:var(--space-2)}.inbox-nav__bottom-left:empty,.inbox-nav__bottom-right:empty{display:none}.inbox-nav__bottom--left{justify-content:flex-start}.inbox-nav__bottom--center{justify-content:center}.inbox-nav__bottom--right{justify-content:flex-end}.inbox-nav__bottom--split{justify-content:space-between}.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)}.inbox-tab,.inbox-tabs{align-items:center;display:inline-flex}.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}.inbox-tab.is-active,.inbox-tab:hover:not(:disabled):not([aria-disabled=true]):not(.is-disabled),.inbox-tab[aria-selected=true]{background:var(--color-surface);color:var(--color-text)}.inbox-tab.is-active,.inbox-tab[aria-selected=true]{border:1px solid var(--color-border-subtle)}.inbox-tab:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.inbox-tab.is-disabled,.inbox-tab:disabled,.inbox-tab[aria-disabled=true]{background:transparent;border-color:transparent;color:var(--color-text-muted);cursor:not-allowed;opacity:.6;pointer-events:none}.inbox-tab__count{background:var(--color-surface-subtle);border:1px solid var(--color-border-subtle);border-radius:var(--radius-pill);color:var(--color-text-muted);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)}.inbox-search,.inbox-tab__count{align-items:center;display:inline-flex}.inbox-search{gap:var(--space-2);min-width:0}.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)}.inbox-search__toggle:hover:not(:disabled):not([aria-disabled=true]):not(.is-disabled){background:var(--color-surface-subtle,var(--color-surface-hover));border-color:var(--color-border-strong,var(--color-border-subtle))}.inbox-search__toggle.is-disabled,.inbox-search__toggle:disabled,.inbox-search__toggle[aria-disabled=true]{background:var(--color-surface-subtle);border-color:var(--color-border-subtle);color:var(--color-text-muted);cursor:not-allowed;opacity:.6;pointer-events:none}.inbox-search__toggle svg{color:currentColor;height:1rem;height:var(--icon-xs,1rem);width:1rem;width:var(--icon-xs,1rem)}.inbox-search__field{align-items:center;display:inline-flex;flex:1 1 auto;gap:var(--space-2);min-width:0;opacity:0;overflow:hidden;pointer-events:none;transition:width var(--transition-normal),opacity var(--transition-fast);width:0}.inbox-search__input{background:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);color:var(--color-text);flex:1 1 auto;font-size:var(--text-sm);line-height:var(--line-height-normal);max-width:none;min-width:10rem;padding:var(--space-2) var(--space-3);width:100%}.inbox-search.is-open .inbox-search__field,.inbox-search__toggle[aria-expanded=true]+.inbox-search__field{opacity:1;pointer-events:auto;width:100%}.inbox-nav__bar--search-full .inbox-nav__left,.inbox-nav__bar--search-full .inbox-search{flex:1 1 auto;width:100%}.inbox-nav__bar--search-full .inbox-search__field{opacity:1;pointer-events:auto;width:100%}.inbox-nav__bar--search-full .inbox-search__input{max-width:none}.inbox-nav__bar--search-full .inbox-nav__right,.inbox-nav__bar--search-full .inbox-tabs{display:none}.inbox__list{display:flex;flex-direction:column;gap:var(--space-2)}.inbox--flat .inbox__list{border-bottom:1px solid var(--color-border-subtle);border-top:1px solid var(--color-border-subtle);gap:0}.inbox--flat .inbox-row{border-left:0;border-radius:0;border-right:0;border-top:0}.inbox--flat .inbox-row+.inbox-row{border-top:1px solid var(--color-border-subtle)}.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%}.inbox-row__hover:hover{background:var(--inbox-row-bg-hover);border-color:var(--color-border-strong,var(--color-border-subtle))}.inbox-row__focus-visible:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.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%}.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)}.inbox-row__badges{grid-area:badges}.inbox-row__meta{grid-area:meta}.inbox-row__actions{grid-area:actions}.inbox-row__data{display:flex;flex-direction:column;gap:var(--space-2);grid-area:data;min-width:0}@media (max-width:768px){.inbox-row__inner{grid-template-areas:"badges" "meta" "data" "actions";grid-template-columns:1fr}.inbox-row__actions{justify-content:flex-end;min-width:0;padding-top:0}}.inbox-row__labels{justify-content:flex-start;margin-left:0;text-align:left}.inbox-row__title{min-width:0}.inbox-row--minimal .inbox-row__inner{gap:var(--space-3);padding:var(--space-3) var(--space-3)}.inbox-row--minimal{--inbox-title-size:var(--text-xs);--inbox-desc-size:var(--text-xxs,var(--text-xs))}.inbox-row--normal .inbox-row__inner{gap:var(--space-4);padding:var(--space-4) var(--space-4)}.inbox-row--rich .inbox-row__inner{gap:var(--space-5);padding:var(--space-5) var(--space-5)}.inbox-row--rich{--inbox-title-size:var(--text-md,var(--text-sm));--inbox-desc-size:var(--text-sm)}.inbox-row--mega .inbox-row__inner{gap:var(--space-6);padding:var(--space-6) var(--space-6)}.inbox-row--mega{--inbox-title-size:var(--text-lg,var(--text-md,var(--text-sm)));--inbox-desc-size:var(--text-sm)}.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)}.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}.inbox-badge svg{color:currentColor;height:var(--icon-xxs);width:var(--icon-xxs)}.inbox-badge--accent{background:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-text)}.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))}.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))}.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))}.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))}.inbox-row__meta{flex-direction:column}.inbox-row__meta,.inbox-row__titleline{display:flex;gap:var(--space-2);min-width:0}.inbox-row__titleline{align-items:center}.inbox-row__status{align-items:center;display:inline-flex;flex:0 0 auto;gap:var(--space-1_5)}.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)}.inbox-row__status-icon svg{height:100%;width:100%}.inbox-row.is-bookmarked .inbox-row__status-icon--bookmark,.inbox-row.is-starred .inbox-row__status-icon--star{color:var(--color-accent)}.inbox-row.is-flagged .inbox-row__status-icon--flag{color:var(--color-danger-strong,var(--color-danger))}.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}.inbox-row__labels{flex:0 0 auto;gap:var(--space-1_5);min-width:0}.inbox-label,.inbox-row__labels{align-items:center;display:inline-flex}.inbox-label{background:transparent;border:1px solid var(--color-border-subtle);border-radius:var(--radius-pill);color:var(--color-text-muted);font-size:var(--text-xxs);font-weight:var(--font-weight-semibold);height:1.4rem;padding:0 var(--space-2);white-space:nowrap}.inbox-label--accent{background:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-text)}.inbox-label--muted{background:var(--color-surface-subtle);border-color:var(--color-border-subtle);color:var(--color-text-muted)}.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}.inbox-row--rich .inbox-row__glance{-webkit-line-clamp:3}.inbox-row--mega .inbox-row__glance{-webkit-line-clamp:4}.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)}.inbox-row__metafoot strong{color:var(--color-text-muted);font-weight:var(--font-weight-semibold)}.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)}.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)}.inbox-row__details-item svg{color:currentColor;height:var(--icon-xxs);width:var(--icon-xxs)}.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)}.inbox-row--actions-below .inbox-row__inner{grid-template-areas:"badges" "meta" "data" "actions";grid-template-columns:1fr}.inbox-row--actions-below .inbox-row__actions{justify-content:flex-start;padding-top:0}.inbox-row--actions-full .inbox-row__actions{grid-column:1/-1;justify-content:flex-start;padding-top:0}.inbox-row__actions--left{justify-content:flex-start}.inbox-row__actions--center{justify-content:center}.inbox-row__actions--right{justify-content:flex-end}.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.inbox-action{-webkit-text-decoration:none;text-decoration:none}.inbox-action svg{color:currentColor;height:var(--icon-xxs);width:var(--icon-xxs)}.inbox-action:hover:not(:disabled):not([aria-disabled=true]):not(.is-disabled){background:var(--color-surface-subtle,var(--color-surface-hover));border-color:var(--color-border-strong,var(--color-border-subtle));transform:translateY(-1px)}.inbox-action:active:not(:disabled):not([aria-disabled=true]):not(.is-disabled){transform:translateY(0)}.inbox-action--danger{border-color:var(--color-danger,var(--color-border-strong));color:var(--color-danger-strong,var(--color-danger))}.inbox-action--accent{background:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-text)}.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)}.inbox-action--flat{background:transparent}.inbox-action--borderless,.inbox-action--borderless:hover:not(:disabled):not([aria-disabled=true]):not(.is-disabled),.inbox-action--flat{border-color:transparent}.inbox-action--flat:hover:not(:disabled):not([aria-disabled=true]):not(.is-disabled){background:var(--color-surface-subtle);border-color:transparent;transform:none}.inbox--actions-flat .inbox-action{background:transparent;border-color:transparent;transform:none}.inbox--actions-flat .inbox-action:hover:not(:disabled):not([aria-disabled=true]):not(.is-disabled){background:var(--color-surface-subtle);border-color:transparent}.inbox-action.is-disabled,.inbox-action:disabled,.inbox-action[aria-disabled=true]{background:var(--color-surface-subtle);border-color:var(--color-border-subtle);color:var(--color-text-muted);cursor:not-allowed;opacity:.6;transform:none}.inbox-action--borderless.is-disabled,.inbox-action--borderless:disabled,.inbox-action--borderless[aria-disabled=true],.inbox-action--flat.is-disabled,.inbox-action--flat:disabled,.inbox-action--flat[aria-disabled=true]{background:transparent;border-color:transparent}a.inbox-action.is-disabled,a.inbox-action[aria-disabled=true]{pointer-events:none;-webkit-text-decoration:none;text-decoration:none}.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;flex-direction:column;gap:var(--space-3);grid-column:1/-1;grid-row:2;padding:var(--space-4)}.inbox-row--open .inbox-row__expanded{display:flex}.inbox-row--glance-open .inbox-row__glance,.inbox-row--open .inbox-row__glance{-webkit-line-clamp:none;overflow:visible}.inbox--flat .inbox-row__expanded{background:var(--color-surface-subtle)}.inbox-row__expanded.is-hidden{display:none!important}.inbox-row__expanded.is-visible{display:block!important}.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}.inbox-row--flag-1{--inbox-flag-color:var(--color-danger);--inbox-flag-surface:var(--semantic-danger-bg,var(--color-danger-soft))}.icon-flag--1{color:var(--color-danger)}.inbox-row--flag-2{--inbox-flag-color:var(--color-warning);--inbox-flag-surface:var(--semantic-warning-bg,var(--color-warning-soft))}.icon-flag--2{color:var(--color-warning)}.inbox-row--flag-3{--inbox-flag-color:var(--color-info);--inbox-flag-surface:var(--semantic-info-bg,var(--color-info-soft))}.icon-flag--3{color:var(--color-info)}.inbox-row--flag-4{--inbox-flag-color:var(--color-success);--inbox-flag-surface:var(--semantic-success-bg,var(--color-success-soft))}.icon-flag--4{color:var(--color-success)}.inbox-row--flag-5{--inbox-flag-color:var(--color-accent);--inbox-flag-surface:var(--color-accent-soft)}.icon-flag--5{color:var(--color-accent)}.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)}.inbox-filter__group{align-items:center;display:inline-flex;gap:var(--space-2);min-width:0}.inbox-filter__label{color:var(--color-text-muted)}.inbox-filter__chip,.inbox-filter__label{font-size:var(--text-xs);font-weight:var(--font-weight-semibold);white-space:nowrap}.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)}button.inbox-filter__chip{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;font:inherit}.inbox-filter__chip--active,.inbox-filter__chip.is-active,.inbox-filter__chip[aria-pressed=true]{background:var(--color-accent-soft);border-color:var(--color-accent)}button.inbox-filter__chip:disabled,button.inbox-filter__chip[aria-disabled=true]{cursor:not-allowed;opacity:.6}.inbox-filter__actions{margin-left:auto}.inbox-cornerbar,.inbox-filter__actions{align-items:center;display:inline-flex;gap:var(--space-2)}.inbox-cornerbar{bottom:var(--space-6);left:auto;pointer-events:none;position:fixed;right:var(--space-6);top:auto;z-index:40}.inbox-cornerbar--left{bottom:var(--space-6);left:var(--space-6);right:auto;top:auto}.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){.inbox-row__inner{gap:var(--space-3);grid-template-columns:1fr}.inbox-row__actions{justify-content:flex-start;padding-top:0}.inbox-row__titleline{flex-wrap:wrap;row-gap:var(--space-1_5)}.inbox-row__title{flex-basis:100%;overflow:visible;text-overflow:clip;white-space:normal}.inbox-row__labels{flex-basis:100%;justify-content:flex-start}.inbox-nav__bar{flex-wrap:wrap;gap:var(--space-3);justify-content:center}.inbox-tabs{justify-content:center;order:1;width:100%}.inbox-nav__left{order:0}.inbox-nav__right{order:2}.inbox-nav__bottom{align-items:stretch;flex-direction:column}.inbox-nav__bottom-left,.inbox-nav__bottom-right{justify-content:flex-start}.inbox-search.is-open .inbox-search__field,.inbox-search__toggle[aria-expanded=true]+.inbox-search__field{width:100%}.inbox__hide-sm{display:none!important}}@media (min-width:769px){.inbox__show-sm{display:none!important}}@media (max-width:1024px){.inbox__hide-md{display:none!important}}@media (min-width:1025px){.inbox__show-md{display:none!important}}.inbox__truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.inbox__stack{display:flex;flex-direction:column;gap:var(--space-3)}.inbox__stack--tight{gap:var(--space-2)}.inbox__stack--loose{gap:var(--space-4)}.inbox__cluster{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-3)}.inbox__form{flex-direction:column;min-width:0}.inbox__form,.inbox__form-row{display:flex;gap:var(--space-3)}.inbox__form-row{align-items:flex-start;flex-wrap:wrap}.inbox__form-actions{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-2)}.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/identity.css CHANGED
@@ -355,7 +355,7 @@
355
355
  .ke-text-secondary {
356
356
  fill: currentColor;
357
357
  font-family: var(--font-family-sans), ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif,
358
- "Segoe UI", Roboto, Arial, sans-serif;
358
+ "Segoe UI", Roboto, Arial, sans-serif;
359
359
  }
360
360
 
361
361
  .ke-text-primary {
package/dist/vds.css CHANGED
@@ -5739,6 +5739,125 @@ a.button:hover {
5739
5739
  color: var(--semantic-danger-text);
5740
5740
  }
5741
5741
 
5742
+ /* ---------------------------------------------------------
5743
+ 11b. CHIP GROUPS (LABEL + ACTIONS)
5744
+ --------------------------------------------------------- */
5745
+
5746
+ .chip-group {
5747
+ display: inline-flex;
5748
+ align-items: center;
5749
+ gap: 0.5rem;
5750
+ gap: var(--component-gap-xs);
5751
+ padding: 0.75rem 1rem;
5752
+ padding: var(--component-gap-sm) var(--component-gap-md);
5753
+ height: var(--content-block-tag-size-md);
5754
+ font-size: 0.8125rem;
5755
+ font-size: var(--text-xs);
5756
+ border-radius: 9999px;
5757
+ border: var(--content-block-component-border-sm) solid var(--color-border-subtle);
5758
+ background-color: var(--color-surface);
5759
+ color: var(--color-text);
5760
+ }
5761
+
5762
+ .chip-group--sm {
5763
+ height: var(--content-block-tag-size-sm);
5764
+ }
5765
+
5766
+ .chip-group--lg {
5767
+ height: var(--content-block-tag-size-lg);
5768
+ }
5769
+
5770
+ .chip-group--soft {
5771
+ background-color: var(--color-surface-subtle);
5772
+ }
5773
+
5774
+ .chip-group--outline {
5775
+ background-color: transparent;
5776
+ border-color: var(--color-border-strong);
5777
+ }
5778
+
5779
+ .chip-group--interactive {
5780
+ cursor: pointer;
5781
+ transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out;
5782
+ transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
5783
+ }
5784
+
5785
+ .chip-group--interactive:hover {
5786
+ background-color: var(--color-surface-hover);
5787
+ border-color: var(--color-border-strong);
5788
+ }
5789
+
5790
+ .chip-group--interactive:focus-visible {
5791
+ outline: 2px solid var(--focus-ring-color);
5792
+ outline: var(--focus-ring-width) solid var(--focus-ring-color);
5793
+ outline-offset: 2px;
5794
+ outline-offset: var(--focus-ring-offset);
5795
+ }
5796
+
5797
+ .chip-group--disabled {
5798
+ opacity: 0.5;
5799
+ opacity: var(--content-block-component-disabled--opacity, 0.5);
5800
+ cursor: not-allowed;
5801
+ pointer-events: none;
5802
+ }
5803
+
5804
+ .chip-group.semantic-info {
5805
+ background-color: var(--semantic-info-bg);
5806
+ color: var(--semantic-info-text);
5807
+ }
5808
+
5809
+ .chip-group.semantic-warning {
5810
+ background-color: var(--semantic-warning-bg);
5811
+ color: var(--semantic-warning-text);
5812
+ }
5813
+
5814
+ .chip-group.semantic-success {
5815
+ background-color: var(--semantic-success-bg);
5816
+ color: var(--semantic-success-text);
5817
+ }
5818
+
5819
+ .chip-group.semantic-danger {
5820
+ background-color: var(--semantic-danger-bg);
5821
+ color: var(--semantic-danger-text);
5822
+ }
5823
+
5824
+ .chip-group__label,
5825
+ .chip-group__action {
5826
+ display: inline-flex;
5827
+ align-items: center;
5828
+ gap: 0.5rem;
5829
+ gap: var(--component-gap-xs);
5830
+ padding: 0;
5831
+ border: 0;
5832
+ background: transparent;
5833
+ color: inherit;
5834
+ font: inherit;
5835
+ line-height: 1;
5836
+ }
5837
+
5838
+ .chip-group__label {
5839
+ cursor: default;
5840
+ }
5841
+
5842
+ .chip-group__action {
5843
+ cursor: pointer;
5844
+ padding: 0 0.5rem;
5845
+ padding: 0 var(--space-2);
5846
+ border-left: var(--content-block-component-border-sm) solid var(--color-border-subtle);
5847
+ }
5848
+
5849
+ .chip-group__action:hover {
5850
+ background-color: var(--color-surface-hover);
5851
+ }
5852
+
5853
+ .chip-group__label:focus-visible,
5854
+ .chip-group__action:focus-visible {
5855
+ outline: 2px solid var(--focus-ring-color);
5856
+ outline: var(--focus-ring-width) solid var(--focus-ring-color);
5857
+ outline-offset: 2px;
5858
+ outline-offset: var(--focus-ring-offset);
5859
+ }
5860
+
5742
5861
  /* ---------------------------------------------------------
5743
5862
  12. AVATAR + STATUS
5744
5863
  --------------------------------------------------------- */
@@ -8695,8 +8814,7 @@ a.button:hover {
8695
8814
  transparent 75%,
8696
8815
  transparent
8697
8816
  );
8698
- background-size: calc(var(--flow-progress-stripe-size) * 2)
8699
- calc(var(--flow-progress-stripe-size) * 2);
8817
+ background-size: calc(var(--flow-progress-stripe-size) * 2) calc(var(--flow-progress-stripe-size) * 2);
8700
8818
  animation: flow-progress-stripes var(--flow-progress-stripe-speed) linear infinite;
8701
8819
  }
8702
8820
 
@@ -9694,6 +9812,20 @@ select.form-control:not([multiple]):not([size]) {
9694
9812
  color: var(--color-text-muted);
9695
9813
  }
9696
9814
 
9815
+ .form-help-row {
9816
+ display: flex;
9817
+ flex-wrap: wrap;
9818
+ align-items: center;
9819
+ justify-content: space-between;
9820
+ gap: 0.5rem;
9821
+ gap: var(--space-2);
9822
+ }
9823
+
9824
+ .form-help-row__counter {
9825
+ margin-left: auto;
9826
+ text-align: right;
9827
+ }
9828
+
9697
9829
  .form-help--error {
9698
9830
  color: var(--color-danger);
9699
9831
  }
@@ -13378,7 +13510,7 @@ select.form-control:not([multiple]):not([size]) {
13378
13510
  --hero-border-color: var(--color-border-subtle);
13379
13511
  --hero-soft-bg: var(--color-surface-subtle);
13380
13512
 
13381
- --hero-full-overlay: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.0));
13513
+ --hero-full-overlay: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.0));
13382
13514
  }
13383
13515
 
13384
13516
  /* ---------------------------------------------------------
@@ -14295,6 +14427,11 @@ select.form-control:not([multiple]):not([size]) {
14295
14427
  mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='3' width='8' height='2' fill='white'/%3E%3Crect x='7.375' y='5' width='1.25' height='5.5' fill='white'/%3E%3Cpath d='M5.5 9 L8 12.2 L10.5 9 Z' fill='white'/%3E%3C/svg%3E");
14296
14428
  }
14297
14429
 
14430
+ .icon--transfer {
14431
+ -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 2 L7.5 5 H6 V10 H3 V5 H1.5 Z' fill='white'/%3E%3Cpath d='M11.5 11 L8.5 8 H10 V3 H13 V8 H14.5 Z' fill='white'/%3E%3Crect x='2' y='12' width='12' height='2' fill='white'/%3E%3C/svg%3E");
14432
+ mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 2 L7.5 5 H6 V10 H3 V5 H1.5 Z' fill='white'/%3E%3Cpath d='M11.5 11 L8.5 8 H10 V3 H13 V8 H14.5 Z' fill='white'/%3E%3Crect x='2' y='12' width='12' height='2' fill='white'/%3E%3C/svg%3E");
14433
+ }
14434
+
14298
14435
  .icon--user {
14299
14436
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='5' r='3'/%3E%3Cpath d='M3 13c1.2-2 2.9-3 5-3s3.8 1 5 3'/%3E%3C/svg%3E");
14300
14437
  mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='5' r='3'/%3E%3Cpath d='M3 13c1.2-2 2.9-3 5-3s3.8 1 5 3'/%3E%3C/svg%3E");
@@ -14455,6 +14592,11 @@ select.form-control:not([multiple]):not([size]) {
14455
14592
  mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cpath d='M8 2l1.2 2.8L12 6l-2.8 1.2L8 10l-1.2-2.8L4 6l2.8-1.2L8 2z'/%3E%3Cpath d='M3 11l.6 1.4L5 13l-1.4.6L3 15l-.6-1.4L1 13l1.4-.6L3 11z'/%3E%3Cpath d='M13 9l.6 1.4L15 11l-1.4.6L13 13l-.6-1.4L11 11l1.4-.6L13 9z'/%3E%3C/svg%3E");
14456
14593
  }
14457
14594
 
14595
+ .icon--ai-text {
14596
+ -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='2' y='12' font-family='Arial,%20sans-serif' font-size='9' font-weight='700' fill='white'%3EAI%3C/text%3E%3C/svg%3E");
14597
+ mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='2' y='12' font-family='Arial,%20sans-serif' font-size='9' font-weight='700' fill='white'%3EAI%3C/text%3E%3C/svg%3E");
14598
+ }
14599
+
14458
14600
  /* ---------------------------------------------------------
14459
14601
  5. LOADER ICONS (GLYPHS ONLY)
14460
14602
  --------------------------------------------------------- */
@@ -15038,7 +15180,7 @@ select.form-control:not([multiple]):not([size]) {
15038
15180
  }
15039
15181
 
15040
15182
  .icon-container--muted {
15041
- background-color: var(--color-bg-subtle);
15183
+ background-color: var(--color-bg-soft);
15042
15184
  color: var(--color-text-muted);
15043
15185
  }
15044
15186
 
@@ -15791,12 +15933,12 @@ select.form-control:not([multiple]):not([size]) {
15791
15933
  transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
15792
15934
  }
15793
15935
 
15794
- .inbox-row:hover {
15936
+ .inbox-row__hover:hover {
15795
15937
  background: var(--inbox-row-bg-hover);
15796
15938
  border-color: var(--color-border-strong, var(--color-border-subtle));
15797
15939
  }
15798
15940
 
15799
- .inbox-row:focus-visible {
15941
+ .inbox-row__focus-visible:focus-visible {
15800
15942
  outline: 2px solid var(--focus-ring-color);
15801
15943
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
15802
15944
  outline-offset: 2px;
@@ -16394,7 +16536,6 @@ a.inbox-action {
16394
16536
  .inbox-action--flat {
16395
16537
  border-color: transparent;
16396
16538
  background: transparent;
16397
- color: var(--color-text-muted);
16398
16539
  }
16399
16540
 
16400
16541
  .inbox-action--borderless {
@@ -16408,7 +16549,6 @@ a.inbox-action {
16408
16549
  .inbox-action--flat:hover:not(:disabled):not([aria-disabled="true"]):not(.is-disabled) {
16409
16550
  background: var(--color-surface-subtle);
16410
16551
  border-color: transparent;
16411
- color: var(--color-text);
16412
16552
  transform: none;
16413
16553
  }
16414
16554
 
@@ -16417,14 +16557,12 @@ a.inbox-action {
16417
16557
  .inbox--actions-flat .inbox-action {
16418
16558
  border-color: transparent;
16419
16559
  background: transparent;
16420
- color: var(--color-text-muted);
16421
16560
  transform: none;
16422
16561
  }
16423
16562
 
16424
16563
  .inbox--actions-flat .inbox-action:hover:not(:disabled):not([aria-disabled="true"]):not(.is-disabled) {
16425
16564
  background: var(--color-surface-subtle);
16426
16565
  border-color: transparent;
16427
- color: var(--color-text);
16428
16566
  }
16429
16567
 
16430
16568
  .inbox-action:disabled,
@@ -16468,10 +16606,13 @@ a.inbox-action.is-disabled {
16468
16606
  background: var(--color-bg-soft, var(--color-surface-subtle));
16469
16607
  color: var(--color-text);
16470
16608
  display: none;
16609
+ flex-direction: column;
16610
+ gap: 0.75rem;
16611
+ gap: var(--space-3);
16471
16612
  }
16472
16613
 
16473
16614
  .inbox-row--open .inbox-row__expanded {
16474
- display: block;
16615
+ display: flex;
16475
16616
  }
16476
16617
 
16477
16618
  .inbox-row--open .inbox-row__glance {
@@ -16619,11 +16760,27 @@ a.inbox-action.is-disabled {
16619
16760
  white-space: nowrap;
16620
16761
  }
16621
16762
 
16622
- .inbox-filter__chip--active {
16763
+ button.inbox-filter__chip {
16764
+ -webkit-appearance: none;
16765
+ -moz-appearance: none;
16766
+ appearance: none;
16767
+ cursor: pointer;
16768
+ font: inherit;
16769
+ }
16770
+
16771
+ .inbox-filter__chip--active,
16772
+ .inbox-filter__chip.is-active,
16773
+ .inbox-filter__chip[aria-pressed="true"] {
16623
16774
  border-color: var(--color-accent);
16624
16775
  background: var(--color-accent-soft);
16625
16776
  }
16626
16777
 
16778
+ button.inbox-filter__chip:disabled,
16779
+ button.inbox-filter__chip[aria-disabled="true"] {
16780
+ cursor: not-allowed;
16781
+ opacity: 0.6;
16782
+ }
16783
+
16627
16784
  .inbox-filter__actions {
16628
16785
  margin-left: auto;
16629
16786
  display: inline-flex;
@@ -16795,6 +16952,55 @@ a.inbox-action.is-disabled {
16795
16952
  white-space: nowrap;
16796
16953
  }
16797
16954
 
16955
+ .inbox__stack {
16956
+ display: flex;
16957
+ flex-direction: column;
16958
+ gap: 0.75rem;
16959
+ gap: var(--space-3);
16960
+ }
16961
+
16962
+ .inbox__stack--tight {
16963
+ gap: 0.5rem;
16964
+ gap: var(--space-2);
16965
+ }
16966
+
16967
+ .inbox__stack--loose {
16968
+ gap: 1rem;
16969
+ gap: var(--space-4);
16970
+ }
16971
+
16972
+ .inbox__cluster {
16973
+ display: flex;
16974
+ flex-wrap: wrap;
16975
+ align-items: center;
16976
+ gap: 0.5rem 0.75rem;
16977
+ gap: var(--space-2) var(--space-3);
16978
+ }
16979
+
16980
+ .inbox__form {
16981
+ display: flex;
16982
+ flex-direction: column;
16983
+ gap: 0.75rem;
16984
+ gap: var(--space-3);
16985
+ min-width: 0;
16986
+ }
16987
+
16988
+ .inbox__form-row {
16989
+ display: flex;
16990
+ flex-wrap: wrap;
16991
+ align-items: flex-start;
16992
+ gap: 0.75rem;
16993
+ gap: var(--space-3);
16994
+ }
16995
+
16996
+ .inbox__form-actions {
16997
+ display: flex;
16998
+ flex-wrap: wrap;
16999
+ align-items: center;
17000
+ gap: 0.5rem;
17001
+ gap: var(--space-2);
17002
+ }
17003
+
16798
17004
  .inbox__sr-only {
16799
17005
  position: absolute !important;
16800
17006
  width: 1px !important;