@tekkare/romulus 0.1.72 → 0.1.74

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.16.0"
   },
-  "version": "0.1.71",
+  "version": "0.1.73",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/runtime/assets/styles/shell.css

@@ -1 +1 @@
-:root{--rm-shell-bg:#f9f9fa;--rm-shell-surface:#fff;--rm-shell-border:#dbdef0;--rm-shell-subtle:#f5f5f9;--rm-shell-text:#1e293b;--rm-shell-text-dark:#475569;--rm-shell-text-muted:#878ca6;--rm-shell-accent:#2017ad;--rm-shell-inset:8px;--rm-shell-radius:12px;--rm-bar-h:56px;--rm-nav-w:240px;--rm-nav-collapsed-w:64px;--rm-rail-w:56px;--rm-dots-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAcUlEQVR42u3TwQmAMAxAUdfQfUoSZ3OBTNMFHEqLVBEtCB6M8B8EevwktOsAAACAl0SkNzNXtaw6zut7SikNYeJq2Hksh4gs27rG7ZH+eWA7bttigMC78x4TIdBbceX8fJKnkSL1s5RY8zBxAAAA+LUF0ula10BxVDoAAAAASUVORK5CYII=");--rm-dots-size:12px;--rm-dots-opacity:0.1}body.night{--rm-shell-bg:var(--bg-app);--rm-shell-surface:var(--bg-surface,#1a1a24);--rm-shell-border:var(--border-default);--rm-shell-subtle:var(--bg-subtle,#22222e);--rm-shell-text:var(--text-primary);--rm-shell-text-dark:var(--text-secondary);--rm-shell-text-muted:var(--text-muted);--rm-shell-accent:var(--color-primary);--rm-dots-opacity:0.06}.rm-shell{background:var(--rm-shell-bg);color:var(--rm-shell-text);font-family:var(--font-sans,"Figtree",sans-serif);inset:0;overflow:hidden;position:fixed}.rm-shell__dots{background-image:var(--rm-dots-image);background-repeat:repeat;background-size:var(--rm-dots-size) var(--rm-dots-size);inset:0;opacity:var(--rm-dots-opacity);pointer-events:none;position:absolute}.rm-shell__frame{border:1px solid var(--rm-shell-border);border-radius:var(--rm-shell-radius);display:flex;inset:var(--rm-shell-inset);overflow:hidden;position:absolute}.rm-shell__body{display:flex;flex:1;flex-direction:column;min-width:0}.rm-shell__main{flex:1;min-width:0;overflow-y:auto}.rm-sb{background:var(--rm-shell-surface);display:flex;flex-direction:column;flex-shrink:0;height:100%}.rm-sb--left{border-right:1px solid var(--rm-shell-border);position:relative;transition:width .2s;width:var(--rm-nav-w);z-index:200}.rm-sb--left.rm-sb--collapsed{width:var(--rm-nav-collapsed-w)}.rm-sb--right{border-left:1px solid var(--rm-shell-border);width:var(--rm-rail-w)}.rm-sb__header{align-items:center;border-bottom:1px solid var(--rm-shell-border);display:flex;flex-shrink:0;gap:8px;height:var(--rm-bar-h);padding:0 16px}.rm-sb--collapsed .rm-sb__header{justify-content:center;padding:0}.rm-sb__logo{align-items:center;color:var(--rm-shell-text);display:flex;flex:1;font-size:20px;font-weight:700;gap:8px;line-height:1.4;min-width:0;overflow:hidden;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}.rm-sb__toggle{-moz-appearance:none;appearance:none;-webkit-appearance:none;background:none;border:none;border-radius:0;box-shadow:none;color:var(--rm-shell-text-muted);cursor:pointer;display:block;flex-shrink:0;height:20px;margin:0;padding:0;transition:color .15s;width:20px}.rm-sb__toggle:hover{color:var(--rm-shell-text)}.rm-sb__toggle svg{display:block;height:100%;width:100%}.rm-sb__nav{display:flex;flex:1;flex-direction:column;gap:16px;overflow-y:auto;padding:16px}.rm-sb--collapsed .rm-sb__nav{padding-left:8px;padding-right:8px}.rm-sb__group{display:flex;flex-direction:column;gap:4px}.rm-sb__label{align-items:center;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:none;border:none;border-radius:0;box-shadow:none;color:var(--rm-shell-text-muted);display:flex;font-family:inherit;font-size:10px;font-weight:500;gap:4px;letter-spacing:.025em;line-height:1.6;margin:0;padding:0 2px;text-align:left;text-transform:uppercase;width:100%}button.rm-sb__label{cursor:pointer}button.rm-sb__label:hover{color:var(--rm-shell-text)}.rm-sb__label-text{flex:1;min-width:0}.rm-sb__chev{display:block;flex-shrink:0;height:12px;transition:transform .2s;width:12px}.rm-sb__label[aria-expanded=true] .rm-sb__chev{transform:rotate(90deg)}.rm-sb__rule{background:var(--rm-shell-border);height:1px;margin:4px}.rm-mi{align-items:center;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:none;border:none;border-radius:4px;box-shadow:none;color:var(--rm-shell-text);cursor:pointer;display:flex;font-family:inherit;gap:8px;height:26px;margin:0;padding:2px;text-align:left;text-decoration:none;transition:background-color .15s;width:100%}.rm-mi:hover{background:color-mix(in srgb,var(--rm-shell-subtle) 50%,transparent)}.rm-mi.rm-mi--active{background:var(--rm-shell-subtle)}.rm-mi.rm-mi--current{background:color-mix(in srgb,var(--rm-shell-accent) 5%,transparent)}.rm-mi.rm-mi--current .rm-mi__icon{background:var(--rm-shell-accent);color:#fff}.rm-mi.rm-mi--current .rm-mi__icon svg{stroke:#fff}.rm-mi__icon{align-items:center;background:var(--rm-shell-subtle);border-radius:4px;color:var(--rm-shell-text-dark);display:flex;flex-shrink:0;height:22px;justify-content:center;line-height:1;width:22px}.rm-mi__icon svg{display:block;height:14px;width:14px}.rm-mi__icon i{font-size:14px;line-height:1}.rm-mi__label{color:var(--rm-shell-text);flex:1;font-size:14px;line-height:1.625;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-mi__badge{background:var(--rm-shell-subtle);border-radius:4px;color:var(--rm-shell-text-muted);flex-shrink:0;font-size:9px;font-weight:700;letter-spacing:.025em;padding:2px 4px;text-transform:uppercase}.rm-sb--collapsed .rm-mi{justify-content:center}.rm-sb--collapsed .rm-mi>:not(.rm-mi__icon),.rm-sb--collapsed .rm-sb__sub{display:none}.rm-sb__tip{background:var(--rm-shell-surface);border:1px solid var(--rm-shell-border);border-radius:6px;box-shadow:0 4px 12px rgba(30,41,59,.1);color:var(--rm-shell-text);font-size:12px;line-height:1.3;padding:5px 9px;pointer-events:none;position:fixed;transform:translateY(-50%);white-space:nowrap;z-index:60}.rm-sb__sub{display:flex;flex-direction:column;gap:2px;padding:2px 0 2px 28px}.rm-sb__sub-item{border-radius:4px;color:var(--rm-shell-text);display:block;font-size:14px;line-height:1.625;overflow:hidden;padding:2px 4px;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}.rm-sb__sub-item:hover{background:color-mix(in srgb,var(--rm-shell-subtle) 50%,transparent)}.rm-rail__item{align-items:center;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:none;border:none;border-radius:0;box-shadow:none;cursor:pointer;display:flex;flex-direction:column;font-family:inherit;gap:4px;margin:0;padding:12px 0 8px;text-decoration:none;width:100%}.rm-rail__avatar{align-items:center;border:2px solid var(--rm-shell-surface);border-radius:9999px;color:#fff;display:flex;font-size:14px;height:32px;justify-content:center;transition:opacity .15s;width:32px}.rm-rail__item:hover .rm-rail__avatar{opacity:.8}.rm-rail__tile{align-items:center;background:var(--rm-shell-subtle);border-radius:8px;color:var(--rm-shell-text-dark);display:flex;font-size:16px;height:32px;justify-content:center;transition:background-color .15s,color .15s;width:32px}.rm-rail__item:hover .rm-rail__tile{background:var(--rm-shell-border)}.rm-rail__item.rm-rail__item--active .rm-rail__tile{background:var(--rm-shell-accent);color:#fff}.rm-rail__tile{position:relative}.rm-rail__badge{background:var(--rm-shell-accent);border-radius:9999px;color:#fff;font-size:10px;font-weight:700;height:16px;line-height:16px;min-width:16px;padding:0 4px;position:absolute;right:-4px;text-align:center;top:-4px}.rm-rail__item--active .rm-rail__badge{background:#fff;color:var(--rm-shell-accent)}.rm-rail__caption{color:var(--rm-shell-text-muted);font-size:10px;line-height:1;max-width:100%;overflow:hidden;padding:0 2px;text-overflow:ellipsis;transition:color .15s;white-space:nowrap}.rm-rail__item--active .rm-rail__caption,.rm-rail__item:hover .rm-rail__caption{color:var(--rm-shell-text)}.rm-rail__bottom{display:flex;justify-content:center;margin-top:auto;padding-bottom:16px}.rm-lang{background:var(--rm-shell-subtle);border:1px solid var(--rm-shell-accent);border-radius:9999px;display:grid;gap:2px;grid-template-rows:1fr 1fr;padding:3px;position:relative}.rm-lang__thumb{background:var(--rm-shell-surface);border-radius:9999px;box-shadow:0 1px 4px rgba(30,41,59,.16);height:32px;left:3px;position:absolute;top:3px;transition:transform .26s cubic-bezier(.34,1.56,.64,1);width:32px}.rm-lang--second .rm-lang__thumb{transform:translateY(34px)}.rm-lang__option{align-items:center;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:none;border:none;border-radius:9999px;box-shadow:none;cursor:pointer;display:flex;filter:grayscale(1);font-size:17px;height:32px;justify-content:center;line-height:1;margin:0;opacity:.5;padding:0;position:relative;transition:filter .18s ease,opacity .18s ease,transform .18s ease;width:32px}.rm-lang__option:hover{filter:grayscale(0);opacity:.85}.rm-lang__option.rm-lang__option--active{filter:grayscale(0);opacity:1}.rm-lang__option:focus-visible{outline:2px solid var(--rm-shell-accent);outline-offset:2px}@media (prefers-reduced-motion:reduce){.rm-lang__option,.rm-lang__thumb{transition:none}}.rm-hd{background:var(--rm-shell-surface);border-bottom:1px solid var(--rm-shell-border);display:flex;flex-direction:column;flex-shrink:0}.rm-hd__row{gap:16px;height:var(--rm-bar-h);padding:0 16px}.rm-hd__crumbs,.rm-hd__row{align-items:center;display:flex}.rm-hd__crumbs{flex:1;font-size:14px;gap:4px;min-width:0}.rm-hd__crumb{align-items:center;color:var(--rm-shell-text-muted);display:inline-flex;gap:6px;text-decoration:none;transition:color .15s;white-space:nowrap}a.rm-hd__crumb:hover{color:var(--rm-shell-text)}.rm-hd__sep{color:var(--rm-shell-text-muted)}.rm-hd__picker{display:inline-flex;min-width:0;position:relative}.rm-hd__crumb--picker{-moz-appearance:none;appearance:none;-webkit-appearance:none;background:none;border:none;border-radius:4px;box-shadow:none;cursor:pointer;font:inherit;font-size:14px;margin:0;padding:2px 4px;transition:background-color .15s,color .15s}.rm-hd__crumb--picker:hover{background:var(--rm-shell-subtle)}.rm-hd__caret{display:block;flex-shrink:0;height:12px;opacity:.7;transition:transform .15s;width:12px}.rm-hd__caret--open{transform:rotate(180deg)}.rm-hd__menu{background:var(--rm-shell-surface);border:1px solid var(--rm-shell-border);border-radius:8px;box-shadow:0 8px 24px rgba(30,41,59,.12);left:0;max-height:60vh;max-width:320px;min-width:200px;overflow-y:auto;padding:4px;position:absolute;top:calc(100% + 4px);z-index:300}.rm-hd__menu-item{align-items:center;border-radius:4px;color:var(--rm-shell-text);display:flex;font-size:14px;gap:8px;line-height:1.5;overflow:hidden;padding:4px 6px;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}.rm-hd__menu-item:hover{background:var(--rm-shell-subtle)}.rm-hd__menu-group{color:var(--rm-shell-text-muted);display:block;font-size:10px;font-weight:500;letter-spacing:.025em;line-height:1.6;padding:8px 6px 2px;text-transform:uppercase}.rm-hd__menu-group:first-child{padding-top:2px}.rm-hd__menu-item--active{background:color-mix(in srgb,var(--rm-shell-accent) 5%,transparent);font-weight:600}.rm-hd__menu-icon{align-items:center;background:var(--rm-shell-subtle);border-radius:4px;color:var(--rm-shell-text-dark);display:flex;flex-shrink:0;height:22px;justify-content:center;line-height:1;width:22px}.rm-hd__menu-icon i{font-size:14px;line-height:1}.rm-hd__menu-item--active .rm-hd__menu-icon{background:var(--rm-shell-accent);color:#fff}.rm-hd__crumb--last{color:var(--rm-shell-text);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-hd__search{align-items:center;background:var(--rm-shell-surface);border:1px solid var(--rm-shell-border);border-radius:9999px;display:flex;flex-shrink:0;gap:4px;padding:4px 12px;width:300px}.rm-hd__search input{background:transparent;border:none;color:var(--rm-shell-text);flex:1;font-family:inherit;font-size:14px;line-height:20px;min-width:0;outline:none;padding:0}.rm-hd__search input::-moz-placeholder{color:var(--rm-shell-text-muted)}.rm-hd__search input::placeholder{color:var(--rm-shell-text-muted)}.rm-hd__search i,.rm-hd__search svg{color:var(--rm-shell-text-muted);display:block;flex-shrink:0;font-size:14px;height:14px;line-height:20px;width:14px}.rm-hd__tabs{display:flex;gap:16px;padding:0 16px}.rm-hd__tab{align-items:flex-start;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:none;border:none;border-bottom:2px solid transparent;border-radius:0;box-shadow:none;color:var(--rm-shell-text-dark);cursor:pointer;display:flex;flex-direction:column;font-family:inherit;font-size:14px;font-weight:700;line-height:1.6;margin:0;padding:4px 4px 8px;white-space:nowrap}.rm-hd__tab--active{border-bottom-color:var(--rm-shell-accent);color:var(--rm-shell-text)}@media (max-width:767px){.rm-sb--left{inset:0 auto 0 0;position:absolute;transform:translateX(-100%);transition:transform .2s;z-index:40}.rm-sb--left.rm-sb--open{transform:translateX(0)}.rm-sb--right{display:none}.rm-hd__search{flex:1;width:auto}}.rm-panel{background:var(--rm-shell-surface);border-left:1px solid var(--rm-shell-border);bottom:0;box-shadow:-8px 0 24px rgba(30,41,59,.08);display:flex;flex-direction:column;position:absolute;right:0;top:0;width:var(--rm-panel-w,360px);z-index:401}.rm-panel__veil{backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);background:var(--rm-panel-veil,rgba(100,116,139,.12));cursor:default;inset:0;position:absolute;z-index:400}.rm-panel-veil-enter-active,.rm-panel-veil-leave-active{transition:opacity .22s ease}.rm-panel-veil-enter-from,.rm-panel-veil-leave-to{opacity:0}@media (prefers-reduced-motion:reduce){.rm-panel-veil-enter-active,.rm-panel-veil-leave-active{transition:none}}.rm-sb--right{position:relative;z-index:402}.rm-panel-enter-active,.rm-panel-leave-active,.rm-sb--right{transition:transform .22s cubic-bezier(.4,0,.2,1)}.rm-panel-enter-from,.rm-panel-leave-to{transform:translateX(100%)}@media (prefers-reduced-motion:reduce){.rm-panel-enter-active,.rm-panel-leave-active,.rm-sb--right{transition:none}}.rm-panel__header{align-items:center;border-bottom:1px solid var(--rm-shell-border);display:flex;flex-shrink:0;gap:8px;height:var(--rm-bar-h);padding:0 16px}.rm-panel__title{color:var(--rm-shell-text);flex:1;font-size:14px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-panel__close{-moz-appearance:none;appearance:none;-webkit-appearance:none;background:none;border:none;border-radius:0;box-shadow:none;color:var(--rm-shell-text-muted);cursor:pointer;display:block;flex-shrink:0;height:20px;margin:0;padding:0;transition:color .15s;width:20px}.rm-panel__close:hover{color:var(--rm-shell-text)}.rm-panel__close svg{display:block;height:100%;width:100%}.rm-panel__body{flex:1;min-height:0;overflow-y:auto;padding:16px}@media (max-width:767px){.rm-panel{border-left:none;left:0;width:auto}}
+:root{--rm-shell-bg:#f9f9fa;--rm-shell-surface:#fff;--rm-shell-border:#dbdef0;--rm-shell-subtle:#f5f5f9;--rm-shell-text:#1e293b;--rm-shell-text-dark:#475569;--rm-shell-text-muted:#878ca6;--rm-shell-accent:#2017ad;--rm-shell-inset:8px;--rm-shell-radius:12px;--rm-bar-h:56px;--rm-nav-w:240px;--rm-nav-collapsed-w:64px;--rm-rail-w:56px;--rm-dots-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAcUlEQVR42u3TwQmAMAxAUdfQfUoSZ3OBTNMFHEqLVBEtCB6M8B8EevwktOsAAACAl0SkNzNXtaw6zut7SikNYeJq2Hksh4gs27rG7ZH+eWA7bttigMC78x4TIdBbceX8fJKnkSL1s5RY8zBxAAAA+LUF0ula10BxVDoAAAAASUVORK5CYII=");--rm-dots-size:12px;--rm-dots-opacity:0.1}body.night{--rm-shell-bg:var(--bg-app);--rm-shell-surface:var(--bg-surface,#1a1a24);--rm-shell-border:var(--border-default);--rm-shell-subtle:var(--bg-subtle,#22222e);--rm-shell-text:var(--text-primary);--rm-shell-text-dark:var(--text-secondary);--rm-shell-text-muted:var(--text-muted);--rm-shell-accent:var(--color-primary);--rm-dots-opacity:0.06}.rm-shell{background:var(--rm-shell-bg);color:var(--rm-shell-text);font-family:var(--font-sans,"Figtree",sans-serif);inset:0;overflow:hidden;position:fixed}.rm-shell__dots{background-image:var(--rm-dots-image);background-repeat:repeat;background-size:var(--rm-dots-size) var(--rm-dots-size);inset:0;opacity:var(--rm-dots-opacity);pointer-events:none;position:absolute}.rm-shell__frame{border:1px solid var(--rm-shell-border);border-radius:var(--rm-shell-radius);display:flex;inset:var(--rm-shell-inset);overflow:hidden;position:absolute}.rm-shell__body{display:flex;flex:1;flex-direction:column;min-width:0}.rm-shell__main{flex:1;min-width:0;overflow-y:auto}.rm-sb{background:var(--rm-shell-surface);display:flex;flex-direction:column;flex-shrink:0;height:100%}.rm-sb--left{border-right:1px solid var(--rm-shell-border);position:relative;transition:width .2s;width:var(--rm-nav-w);z-index:200}.rm-sb--left.rm-sb--collapsed{width:var(--rm-nav-collapsed-w)}.rm-sb--right{border-left:1px solid var(--rm-shell-border);width:var(--rm-rail-w)}.rm-sb__header{align-items:center;border-bottom:1px solid var(--rm-shell-border);display:flex;flex-shrink:0;gap:8px;height:var(--rm-bar-h);padding:0 16px}.rm-sb--collapsed .rm-sb__header{justify-content:center;padding:0}.rm-sb__logo{align-items:center;color:var(--rm-shell-text);display:flex;flex:1;font-size:20px;font-weight:700;gap:8px;line-height:1.4;min-width:0;overflow:hidden;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}.rm-sb__toggle{-moz-appearance:none;appearance:none;-webkit-appearance:none;background:none;border:none;border-radius:0;box-shadow:none;color:var(--rm-shell-text-muted);cursor:pointer;display:block;flex-shrink:0;height:20px;margin:0;padding:0;transition:color .15s;width:20px}.rm-sb__toggle:hover{color:var(--rm-shell-text)}.rm-sb__toggle svg{display:block;height:100%;width:100%}.rm-sb__nav{display:flex;flex:1;flex-direction:column;gap:16px;overflow-y:auto;padding:16px}.rm-sb--collapsed .rm-sb__nav{padding-left:8px;padding-right:8px}.rm-sb__group{display:flex;flex-direction:column;gap:4px}.rm-sb__label{align-items:center;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:none;border:none;border-radius:0;box-shadow:none;color:var(--rm-shell-text-muted);display:flex;font-family:inherit;font-size:10px;font-weight:500;gap:4px;letter-spacing:.025em;line-height:1.6;margin:0;padding:0 2px;text-align:left;text-transform:uppercase;width:100%}button.rm-sb__label{cursor:pointer}button.rm-sb__label:hover{color:var(--rm-shell-text)}.rm-sb__label-text{flex:1;min-width:0}.rm-sb__chev{display:block;flex-shrink:0;height:12px;transition:transform .2s;width:12px}.rm-sb__label[aria-expanded=true] .rm-sb__chev{transform:rotate(90deg)}.rm-sb__rule{background:var(--rm-shell-border);height:1px;margin:4px}.rm-mi{align-items:center;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:none;border:none;border-radius:4px;box-shadow:none;color:var(--rm-shell-text);cursor:pointer;display:flex;font-family:inherit;gap:8px;height:26px;margin:0;padding:2px;text-align:left;text-decoration:none;transition:background-color .15s;width:100%}.rm-mi:hover{background:color-mix(in srgb,var(--rm-shell-subtle) 50%,transparent)}.rm-mi.rm-mi--active{background:var(--rm-shell-subtle)}.rm-mi.rm-mi--current{background:color-mix(in srgb,var(--rm-shell-accent) 5%,transparent)}.rm-mi.rm-mi--current .rm-mi__icon{background:var(--rm-shell-accent);color:#fff}.rm-mi.rm-mi--current .rm-mi__icon svg{stroke:#fff}.rm-mi__icon{align-items:center;background:var(--rm-shell-subtle);border-radius:4px;color:var(--rm-shell-text-dark);display:flex;flex-shrink:0;height:22px;justify-content:center;line-height:1;width:22px}.rm-mi__icon svg{display:block;height:14px;width:14px}.rm-mi__icon i{font-size:14px;line-height:1}.rm-mi__label{color:var(--rm-shell-text);flex:1;font-size:14px;line-height:1.625;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-mi__badge{background:var(--rm-shell-subtle);border-radius:4px;color:var(--rm-shell-text-muted);flex-shrink:0;font-size:9px;font-weight:700;letter-spacing:.025em;padding:2px 4px;text-transform:uppercase}.rm-sb--collapsed .rm-mi{justify-content:center}.rm-sb--collapsed .rm-mi>:not(.rm-mi__icon),.rm-sb--collapsed .rm-sb__sub{display:none}.rm-sb__tip{background:var(--rm-shell-surface);border:1px solid var(--rm-shell-border);border-radius:6px;box-shadow:0 4px 12px rgba(30,41,59,.1);color:var(--rm-shell-text);font-size:12px;line-height:1.3;padding:5px 9px;pointer-events:none;position:fixed;transform:translateY(-50%);white-space:nowrap;z-index:60}.rm-sb__sub{display:flex;flex-direction:column;gap:2px;padding:2px 0 2px 28px}.rm-sb__sub-item{border-radius:4px;color:var(--rm-shell-text);display:block;font-size:14px;line-height:1.625;overflow:hidden;padding:2px 4px;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}.rm-sb__sub-item:hover{background:color-mix(in srgb,var(--rm-shell-subtle) 50%,transparent)}.rm-rail__item{align-items:center;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:none;border:none;border-radius:0;box-shadow:none;cursor:pointer;display:flex;flex-direction:column;font-family:inherit;gap:4px;margin:0;padding:12px 0 8px;text-decoration:none;width:100%}.rm-rail__avatar{align-items:center;border:2px solid var(--rm-shell-surface);border-radius:9999px;color:#fff;display:flex;font-size:14px;height:32px;justify-content:center;transition:opacity .15s;width:32px}.rm-rail__item:hover .rm-rail__avatar{opacity:.8}.rm-rail__tile{align-items:center;background:var(--rm-shell-subtle);border-radius:8px;color:var(--rm-shell-text-dark);display:flex;font-size:16px;height:32px;justify-content:center;transition:background-color .15s,color .15s;width:32px}.rm-rail__item:hover .rm-rail__tile{background:var(--rm-shell-border)}.rm-rail__item.rm-rail__item--active .rm-rail__tile{background:var(--rm-shell-accent);color:#fff}.rm-rail__tile{position:relative}.rm-rail__badge{background:var(--rm-shell-accent);border-radius:9999px;color:#fff;font-size:10px;font-weight:700;height:16px;line-height:16px;min-width:16px;padding:0 4px;position:absolute;right:-4px;text-align:center;top:-4px}.rm-rail__item--active .rm-rail__badge{background:#fff;color:var(--rm-shell-accent)}.rm-rail__dot{animation:rm-rail-dot-pulse 2s ease-out infinite;background:var(--color-success,#16a34a);border:2px solid var(--rm-shell-surface);border-radius:9999px;height:10px;position:absolute;right:-2px;top:-2px;width:10px}@keyframes rm-rail-dot-pulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.55)}70%{box-shadow:0 0 0 6px rgba(22,163,74,0)}to{box-shadow:0 0 0 0 rgba(22,163,74,0)}}@media (prefers-reduced-motion:reduce){.rm-rail__dot{animation:none}}.rm-rail__item--active .rm-rail__dot{border-color:var(--rm-shell-accent)}.rm-rail__caption{color:var(--rm-shell-text-muted);font-size:10px;line-height:1;max-width:100%;overflow:hidden;padding:0 2px;text-overflow:ellipsis;transition:color .15s;white-space:nowrap}.rm-rail__item--active .rm-rail__caption,.rm-rail__item:hover .rm-rail__caption{color:var(--rm-shell-text)}.rm-rail__bottom{display:flex;justify-content:center;margin-top:auto;padding-bottom:16px}.rm-lang{background:var(--rm-shell-subtle);border:1px solid var(--rm-shell-accent);border-radius:9999px;display:grid;gap:2px;grid-template-rows:1fr 1fr;padding:3px;position:relative}.rm-lang__thumb{background:var(--rm-shell-surface);border-radius:9999px;box-shadow:0 1px 4px rgba(30,41,59,.16);height:32px;left:3px;position:absolute;top:3px;transition:transform .26s cubic-bezier(.34,1.56,.64,1);width:32px}.rm-lang--second .rm-lang__thumb{transform:translateY(34px)}.rm-lang__option{align-items:center;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:none;border:none;border-radius:9999px;box-shadow:none;cursor:pointer;display:flex;filter:grayscale(1);font-size:17px;height:32px;justify-content:center;line-height:1;margin:0;opacity:.5;padding:0;position:relative;transition:filter .18s ease,opacity .18s ease,transform .18s ease;width:32px}.rm-lang__option:hover{filter:grayscale(0);opacity:.85}.rm-lang__option.rm-lang__option--active{filter:grayscale(0);opacity:1}.rm-lang__option:focus-visible{outline:2px solid var(--rm-shell-accent);outline-offset:2px}@media (prefers-reduced-motion:reduce){.rm-lang__option,.rm-lang__thumb{transition:none}}.rm-hd{background:var(--rm-shell-surface);border-bottom:1px solid var(--rm-shell-border);display:flex;flex-direction:column;flex-shrink:0}.rm-hd__row{gap:16px;height:var(--rm-bar-h);padding:0 16px}.rm-hd__crumbs,.rm-hd__row{align-items:center;display:flex}.rm-hd__crumbs{flex:1;font-size:14px;gap:4px;min-width:0}.rm-hd__crumb{align-items:center;color:var(--rm-shell-text-muted);display:inline-flex;gap:6px;text-decoration:none;transition:color .15s;white-space:nowrap}a.rm-hd__crumb:hover{color:var(--rm-shell-text)}.rm-hd__sep{color:var(--rm-shell-text-muted)}.rm-hd__picker{display:inline-flex;min-width:0;position:relative}.rm-hd__crumb--picker{-moz-appearance:none;appearance:none;-webkit-appearance:none;background:none;border:none;border-radius:4px;box-shadow:none;cursor:pointer;font:inherit;font-size:14px;margin:0;padding:2px 4px;transition:background-color .15s,color .15s}.rm-hd__crumb--picker:hover{background:var(--rm-shell-subtle)}.rm-hd__caret{display:block;flex-shrink:0;height:12px;opacity:.7;transition:transform .15s;width:12px}.rm-hd__caret--open{transform:rotate(180deg)}.rm-hd__menu{background:var(--rm-shell-surface);border:1px solid var(--rm-shell-border);border-radius:8px;box-shadow:0 8px 24px rgba(30,41,59,.12);left:0;max-height:60vh;max-width:320px;min-width:200px;overflow-y:auto;padding:4px;position:absolute;top:calc(100% + 4px);z-index:300}.rm-hd__menu-item{align-items:center;border-radius:4px;color:var(--rm-shell-text);display:flex;font-size:14px;gap:8px;line-height:1.5;overflow:hidden;padding:4px 6px;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}.rm-hd__menu-item:hover{background:var(--rm-shell-subtle)}.rm-hd__menu-group{color:var(--rm-shell-text-muted);display:block;font-size:10px;font-weight:500;letter-spacing:.025em;line-height:1.6;padding:8px 6px 2px;text-transform:uppercase}.rm-hd__menu-group:first-child{padding-top:2px}.rm-hd__menu-item--active{background:color-mix(in srgb,var(--rm-shell-accent) 5%,transparent);font-weight:600}.rm-hd__menu-icon{align-items:center;background:var(--rm-shell-subtle);border-radius:4px;color:var(--rm-shell-text-dark);display:flex;flex-shrink:0;height:22px;justify-content:center;line-height:1;width:22px}.rm-hd__menu-icon i{font-size:14px;line-height:1}.rm-hd__menu-item--active .rm-hd__menu-icon{background:var(--rm-shell-accent);color:#fff}.rm-hd__crumb--last{color:var(--rm-shell-text);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-hd__search{align-items:center;background:var(--rm-shell-surface);border:1px solid var(--rm-shell-border);border-radius:9999px;display:flex;flex-shrink:0;gap:4px;padding:4px 12px;width:300px}.rm-hd__search input{background:transparent;border:none;color:var(--rm-shell-text);flex:1;font-family:inherit;font-size:14px;line-height:20px;min-width:0;outline:none;padding:0}.rm-hd__search input::-moz-placeholder{color:var(--rm-shell-text-muted)}.rm-hd__search input::placeholder{color:var(--rm-shell-text-muted)}.rm-hd__search i,.rm-hd__search svg{color:var(--rm-shell-text-muted);display:block;flex-shrink:0;font-size:14px;height:14px;line-height:20px;width:14px}.rm-hd__tabs{display:flex;gap:16px;padding:0 16px}.rm-hd__tab{align-items:flex-start;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:none;border:none;border-bottom:2px solid transparent;border-radius:0;box-shadow:none;color:var(--rm-shell-text-dark);cursor:pointer;display:flex;flex-direction:column;font-family:inherit;font-size:14px;font-weight:700;line-height:1.6;margin:0;padding:4px 4px 8px;white-space:nowrap}.rm-hd__tab--active{border-bottom-color:var(--rm-shell-accent);color:var(--rm-shell-text)}@media (max-width:767px){.rm-sb--left{inset:0 auto 0 0;position:absolute;transform:translateX(-100%);transition:transform .2s;z-index:40}.rm-sb--left.rm-sb--open{transform:translateX(0)}.rm-sb--right{display:none}.rm-hd__search{flex:1;width:auto}}.rm-panel{background:var(--rm-shell-surface);border-left:1px solid var(--rm-shell-border);bottom:0;box-shadow:-8px 0 24px rgba(30,41,59,.08);display:flex;flex-direction:column;position:absolute;right:0;top:0;width:var(--rm-panel-w,360px);z-index:401}.rm-panel__veil{backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);background:var(--rm-panel-veil,rgba(100,116,139,.12));cursor:default;inset:0;position:absolute;z-index:400}.rm-panel-veil-enter-active,.rm-panel-veil-leave-active{transition:opacity .22s ease}.rm-panel-veil-enter-from,.rm-panel-veil-leave-to{opacity:0}@media (prefers-reduced-motion:reduce){.rm-panel-veil-enter-active,.rm-panel-veil-leave-active{transition:none}}.rm-sb--right{position:relative;z-index:402}.rm-panel-enter-active,.rm-panel-leave-active,.rm-sb--right{transition:transform .22s cubic-bezier(.4,0,.2,1)}.rm-panel-enter-from,.rm-panel-leave-to{transform:translateX(100%)}@media (prefers-reduced-motion:reduce){.rm-panel-enter-active,.rm-panel-leave-active,.rm-sb--right{transition:none}}.rm-panel__header{align-items:center;border-bottom:1px solid var(--rm-shell-border);display:flex;flex-shrink:0;gap:8px;height:var(--rm-bar-h);padding:0 16px}.rm-panel__title{color:var(--rm-shell-text);flex:1;font-size:14px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-panel__close{-moz-appearance:none;appearance:none;-webkit-appearance:none;background:none;border:none;border-radius:0;box-shadow:none;color:var(--rm-shell-text-muted);cursor:pointer;display:block;flex-shrink:0;height:20px;margin:0;padding:0;transition:color .15s;width:20px}.rm-panel__close:hover{color:var(--rm-shell-text)}.rm-panel__close svg{display:block;height:100%;width:100%}.rm-panel__body{flex:1;min-height:0;overflow-y:auto;padding:16px}@media (max-width:767px){.rm-panel{border-left:none;left:0;width:auto}}

package/dist/runtime/components/ComplexSelect.vue

@@ -0,0 +1,366 @@
+<!--
+  RmComplexSelect - champ de filtre a deux colonnes : ajouter d'un cote,
+  retirer de l'autre.
+
+  Reprend `arg-complex-select` d'Auriga : un intitule, un champ qui enumere la
+  selection, et un panneau large ou la colonne de gauche propose les valeurs
+  disponibles (avec selections rapides et recherche) pendant que celle de
+  droite tient la selection en cours.
+
+  Laquelle prendre : celle-ci quand le referentiel est trop long pour se
+  cocher d'un bloc (des milliers de marques, de molecules, de pays) ;
+  `RmMultipleSelect` pour une liste courte a cocher ; `RmFilterComplex` pour
+  la pastille equivalente dans une barre de filtres.
+
+  Trois choses changent par rapport a Auriga.
+
+  La selection est un `v-model`, plus le couple `already_selected` en entree
+  et `update:Selection` en sortie : les deux se repondaient en boucle des que
+  la page reposait la selection elle-meme.
+
+  Les lignes sont des boutons : la colonne se parcourt au clavier, alors
+  qu'Auriga posait des `div` avec un `@click` et un `@mouseover` pour changer
+  l'icone, invisible pour qui n'a pas de souris.
+
+  Le mode « appliquer / annuler » a ete laisse de cote : il etait deja mis en
+  commentaire dans Auriga, et aucune page ne l'appelait.
+-->
+<script setup lang="ts">
+import { computed, nextTick, onUnmounted, ref, watch } from 'vue'
+
+export interface RmComplexSelectPreset {
+  label: string
+  values: string[]
+}
+
+const props = withDefaults(defineProps<{
+  /** Intitule pose au-dessus du champ. */
+  label: string
+  options: string[]
+  loading?: boolean
+  disabled?: boolean
+  /** Selections rapides. Vides, la section ne sort pas. */
+  presets?: RmComplexSelectPreset[] | null
+  /** Action « Tout » en tete de la colonne de gauche. */
+  showSelectAll?: boolean
+  /** L'action « Tout » annonce combien de valeurs elle ajouterait. */
+  selectAllCount?: boolean
+  /**
+   * La liste est tronquee par le serveur : le compte de l'action « Tout »
+   * s'annonce comme un maximum, sinon il se lit comme le total du
+   * referentiel.
+   */
+  hasMore?: boolean
+  addPlaceholder?: string
+  removePlaceholder?: string
+  emptyLabel?: string
+  emptyContent?: string
+  /**
+   * Filtrage local de la colonne de gauche. A passer a `false` quand les
+   * options arrivent deja filtrees du serveur (cf. `RmDropdownSelect`).
+   */
+  filterSearch?: boolean
+  /** Pastille du nombre de valeurs retenues, posee sur le champ. */
+  showAmount?: boolean
+  /** Pastille d'aide a cote de l'intitule, qui emet `openInfo`. */
+  labelInfo?: boolean
+  /** Nombre de lignes posees d'un coup dans la colonne de gauche. */
+  maxOptions?: number
+  lang?: 'fr' | 'en'
+}>(), {
+  loading: false,
+  disabled: false,
+  presets: null,
+  showSelectAll: false,
+  selectAllCount: false,
+  hasMore: false,
+  addPlaceholder: undefined,
+  removePlaceholder: undefined,
+  emptyLabel: undefined,
+  emptyContent: undefined,
+  filterSearch: true,
+  showAmount: true,
+  labelInfo: false,
+  maxOptions: 500,
+  lang: 'fr',
+})
+
+const emit = defineEmits<{
+  /** Selection complete apres le changement. Double le `v-model`. */
+  change: [values: string[]]
+  /** Saisie de la colonne « ajouter », amortie a 500 ms. */
+  search: [value: string]
+  openInfo: []
+}>()
+
+const selected = defineModel<string[]>({ default: () => [] })
+
+const WORDS = {
+  fr: {
+    empty: 'Aucune sélection',
+    quick: 'Sélection rapide',
+    add: 'Ajouter',
+    custom: 'Sélection personnalisée',
+    all: 'Tout',
+    current: 'Sélection en cours',
+    clear: 'Tout effacer',
+    searchAdd: 'Rechercher une valeur',
+    searchDel: 'Rechercher dans la sélection',
+    notFound: 'Aucun résultat',
+    loading: 'Chargement',
+    noSelection: 'Rien de retenu pour le moment',
+  },
+  en: {
+    empty: 'No selection',
+    quick: 'Quick selection',
+    add: 'Add',
+    custom: 'Custom selection',
+    all: 'All',
+    current: 'Current selection',
+    clear: 'Clear all',
+    searchAdd: 'Search a value',
+    searchDel: 'Search in the selection',
+    notFound: 'No result',
+    loading: 'Loading',
+    noSelection: 'Nothing selected yet',
+  },
+} as const
+
+const t = computed(() => WORDS[props.lang])
+
+const isOpen = ref(false)
+const addSearch = ref('')
+const removeSearch = ref('')
+const activePreset = ref<string>()
+const rootRef = ref<HTMLElement>()
+const addRef = ref<HTMLInputElement>()
+
+/** La colonne de gauche ne propose que ce qui n'est pas deja retenu. */
+const addOptions = computed(() => {
+  const needle = addSearch.value.trim().toLowerCase()
+  const parts = needle && props.filterSearch ? needle.split(' ').filter(Boolean) : []
+  return props.options
+    .filter(option => !selected.value.includes(option))
+    .filter(option => parts.every(part => option.toLowerCase().includes(part)))
+    .slice(0, props.maxOptions)
+})
+
+const removeOptions = computed(() => {
+  const needle = removeSearch.value.trim().toLowerCase()
+  if (!needle) return selected.value
+  return selected.value.filter(option => option.toLowerCase().includes(needle))
+})
+
+const summary = computed(() => selected.value.join(', '))
+
+const selectAllLabel = computed(() => {
+  if (!props.selectAllCount) return t.value.all
+  const count = props.hasMore ? `Max: ${addOptions.value.length}` : addOptions.value.length
+  return `${t.value.all} (${count})`
+})
+
+let debounceId: ReturnType<typeof setTimeout> | undefined
+watch(addSearch, (value) => {
+  clearTimeout(debounceId)
+  debounceId = setTimeout(() => emit('search', value), 500)
+})
+
+function close() {
+  isOpen.value = false
+  document.removeEventListener('click', onDocumentClick)
+}
+
+function onDocumentClick(event: MouseEvent) {
+  if (!rootRef.value?.contains(event.target as Node)) close()
+}
+
+async function toggle() {
+  if (props.disabled) return
+  if (isOpen.value) return close()
+
+  isOpen.value = true
+  document.addEventListener('click', onDocumentClick)
+  await nextTick()
+  addRef.value?.focus()
+}
+
+function commit(values: string[]) {
+  selected.value = values
+  emit('change', values)
+}
+
+function add(option: string) {
+  activePreset.value = undefined
+  commit([...selected.value, option])
+}
+
+function remove(option: string) {
+  activePreset.value = undefined
+  commit(selected.value.filter(value => value !== option))
+}
+
+function addAll() {
+  activePreset.value = undefined
+  commit([...selected.value, ...addOptions.value])
+}
+
+function clearAll() {
+  activePreset.value = undefined
+  commit([])
+}
+
+/** Une selection rapide remplace la selection : elle ne s'y ajoute pas. */
+function applyPreset(preset: RmComplexSelectPreset) {
+  if (activePreset.value === preset.label) {
+    clearAll()
+    return
+  }
+  commit([...new Set(preset.values)])
+  activePreset.value = preset.label
+}
+
+onUnmounted(() => {
+  clearTimeout(debounceId)
+  document.removeEventListener('click', onDocumentClick)
+})
+</script>
+
+<template>
+  <div ref="rootRef" class="rm-csel" @keydown.escape="close">
+    <p class="rm-csel__label">
+      {{ label }}
+      <button v-if="labelInfo" type="button" class="rm-csel__info" @click="emit('openInfo')">
+        <RmIcon name="Info" :size="14" />
+      </button>
+    </p>
+
+    <button
+      type="button"
+      class="rm-csel__field"
+      :class="{ 'is-open': isOpen, 'is-disabled': disabled }"
+      :disabled="disabled"
+      :aria-expanded="isOpen"
+      aria-haspopup="true"
+      @click.stop="toggle"
+    >
+      <RmTooltip :text="summary" :disabled="selected.length === 0" class="rm-csel__value-slot">
+        <span class="rm-csel__value" :class="{ 'is-empty': selected.length === 0 }">
+          {{ selected.length > 0 ? summary : emptyLabel || t.empty }}
+        </span>
+      </RmTooltip>
+      <span v-if="showAmount && selected.length > 0" class="rm-csel__count">
+        {{ selected.length > 99 ? '99+' : selected.length }}
+      </span>
+      <RmIcon name="CaretDown" :size="16" />
+    </button>
+
+    <div v-show="isOpen" class="rm-csel__panel" @click.stop>
+      <div class="rm-csel__column">
+        <div v-if="presets && presets.length > 0" class="rm-csel__presets">
+          <h2 class="rm-csel__section">{{ t.quick }}</h2>
+          <div class="rm-csel__pills">
+            <button
+              v-for="preset in presets"
+              :key="preset.label"
+              type="button"
+              class="rm-csel__pill"
+              :class="{ 'is-active': activePreset === preset.label }"
+              :aria-pressed="activePreset === preset.label"
+              @click="applyPreset(preset)"
+            >
+              {{ preset.label }}
+            </button>
+          </div>
+        </div>
+
+        <div class="rm-csel__head">
+          <h2 class="rm-csel__section">{{ presets && presets.length > 0 ? t.custom : t.add }}</h2>
+          <button
+            v-if="showSelectAll || selectAllCount"
+            type="button"
+            class="rm-csel__action"
+            :disabled="addOptions.length === 0"
+            @click="addAll"
+          >
+            {{ selectAllLabel }}
+          </button>
+        </div>
+
+        <div class="rm-csel__search">
+          <RmIcon name="MagnifyingGlass" :size="14" />
+          <input
+            ref="addRef"
+            v-model="addSearch"
+            type="search"
+            class="rm-csel__search-input"
+            :placeholder="addPlaceholder || t.searchAdd"
+            :aria-label="addPlaceholder || t.searchAdd"
+          >
+        </div>
+
+        <p v-if="loading" class="rm-csel__state" aria-busy="true">{{ t.loading }}</p>
+        <p v-else-if="addOptions.length === 0" class="rm-csel__state">
+          {{ emptyContent || t.notFound }}
+        </p>
+        <div v-else class="rm-csel__list">
+          <button
+            v-for="option in addOptions"
+            :key="option"
+            type="button"
+            class="rm-csel__option rm-csel__option--add"
+            @click="add(option)"
+          >
+            <RmIcon name="PlusCircle" :size="14" />
+            <span>{{ option }}</span>
+          </button>
+        </div>
+      </div>
+
+      <div class="rm-csel__column rm-csel__column--right">
+        <div class="rm-csel__head">
+          <h2 class="rm-csel__section">{{ t.current }}</h2>
+          <button
+            type="button"
+            class="rm-csel__action rm-csel__action--clear"
+            :disabled="selected.length === 0"
+            @click="clearAll"
+          >
+            {{ t.clear }}
+          </button>
+        </div>
+
+        <div class="rm-csel__search">
+          <RmIcon name="MagnifyingGlass" :size="14" />
+          <input
+            v-model="removeSearch"
+            type="search"
+            class="rm-csel__search-input"
+            :placeholder="removePlaceholder || t.searchDel"
+            :aria-label="removePlaceholder || t.searchDel"
+          >
+        </div>
+
+        <p v-if="selected.length === 0" class="rm-csel__state">{{ t.noSelection }}</p>
+        <p v-else-if="removeOptions.length === 0" class="rm-csel__state">
+          {{ emptyContent || t.notFound }}
+        </p>
+        <div v-else class="rm-csel__list">
+          <button
+            v-for="option in removeOptions"
+            :key="option"
+            type="button"
+            class="rm-csel__option rm-csel__option--remove"
+            @click="remove(option)"
+          >
+            <RmIcon name="MinusCircle" :size="16" />
+            <span>{{ option }}</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.rm-csel{align-items:flex-start;display:flex;flex-direction:column;gap:4px;position:relative}.rm-csel__label{align-items:center;color:var(--text-secondary);display:flex;font-size:var(--font-12,12px);gap:4px;line-height:14px}.rm-csel__info{background:none;border:none;color:var(--text-muted);cursor:pointer;display:flex;padding:0}.rm-csel__field{align-items:center;background:var(--bg-surface);border:1.5px solid var(--border-default);border-radius:var(--radius-md,8px);color:var(--text-primary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-14,14px);font-weight:700;gap:4px;line-height:16px;padding:12px;text-align:left;width:196px}.rm-csel__field:hover:not(.is-disabled){border-color:rgba(var(--brand-rgb),.3)}.rm-csel__field.is-open{border-color:var(--color-primary)}.rm-csel__field.is-disabled{background:var(--bg-surface-2);color:var(--text-muted);cursor:not-allowed}.rm-csel__field:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.rm-csel__value-slot{display:block;flex:1;min-width:0}.rm-csel__value{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-csel__value.is-empty{color:var(--text-muted);font-style:italic;font-weight:400}.rm-csel__field :deep(svg){color:var(--text-secondary);flex-shrink:0}.rm-csel__count{align-items:center;background:rgba(var(--brand-rgb),.1);border-radius:50%;color:var(--color-primary);display:flex;flex-shrink:0;font-size:var(--font-12,12px);font-weight:600;height:20px;justify-content:center;width:20px}.rm-csel__panel{background:var(--bg-surface);border:1.5px solid var(--border-default);border-radius:var(--radius-lg,12px);box-shadow:var(--r-shadow-lg,0 8px 24px rgba(0,0,0,.12));box-sizing:border-box;display:flex;left:0;margin-top:8px;max-width:calc(100vw - 32px);position:absolute;top:100%;width:620px;z-index:12}.rm-csel__column{display:flex;flex:1;flex-direction:column;gap:8px;min-width:0;padding:16px}.rm-csel__column--right{background:var(--bg-surface-2);border-left:1px solid var(--border-soft);border-radius:0 var(--radius-lg,12px) var(--radius-lg,12px) 0}.rm-csel__presets{border-bottom:1px solid var(--border-soft);display:flex;flex-direction:column;gap:8px;padding-bottom:8px}.rm-csel__pills{display:flex;flex-wrap:wrap;gap:4px}.rm-csel__pill{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:9999px;color:var(--text-secondary);cursor:pointer;font-family:inherit;font-size:var(--font-12,12px);padding:4px 10px}.rm-csel__pill.is-active,.rm-csel__pill:hover{border-color:var(--color-primary);color:var(--color-primary)}.rm-csel__pill.is-active{background:rgba(var(--brand-rgb),.1);font-weight:700}.rm-csel__head{align-items:center;display:flex;gap:8px;justify-content:space-between}.rm-csel__section{color:var(--text-secondary);font-size:var(--font-12,12px);font-weight:700;margin:0}.rm-csel__action{background:none;border:none;color:var(--color-primary);cursor:pointer;font-family:inherit;font-size:var(--font-12,12px);font-weight:600;padding:0}.rm-csel__action:disabled{color:var(--text-muted);cursor:not-allowed}.rm-csel__action:hover:not(:disabled){text-decoration:underline}.rm-csel__action--clear:not(:disabled){color:var(--color-danger)}.rm-csel__search{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md,8px);display:flex;gap:8px;padding:6px 10px}.rm-csel__search :deep(svg){color:var(--text-muted);flex-shrink:0}.rm-csel__search-input{background:none;border:none;color:var(--text-primary);font-family:inherit;font-size:var(--font-14,14px);width:100%}.rm-csel__search-input::-moz-placeholder{color:var(--text-muted);font-size:var(--font-12,12px)}.rm-csel__search-input::placeholder{color:var(--text-muted);font-size:var(--font-12,12px)}.rm-csel__search-input:focus-visible{outline:none}.rm-csel__state{color:var(--text-secondary);font-size:var(--font-14,14px);font-style:italic;padding-top:8px}.rm-csel__list{display:flex;flex-direction:column;gap:4px;height:260px;overflow-y:auto;scrollbar-width:thin}.rm-csel__option{align-items:flex-start;background:none;border:none;border-radius:var(--radius-sm,4px);color:var(--text-primary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-14,14px);gap:8px;line-height:160%;padding:2px 4px;text-align:left}.rm-csel__option :deep(svg){flex-shrink:0;margin-top:4px}.rm-csel__option:hover{background:rgba(var(--brand-rgb),.05)}.rm-csel__option:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.rm-csel__option--add :deep(svg){color:var(--color-primary)}.rm-csel__option--remove :deep(svg){color:var(--color-danger)}@media (max-width:767px){.rm-csel__panel{flex-direction:column;width:calc(100vw - 32px)}.rm-csel__column--right{border-left:none;border-top:1px solid var(--border-soft)}.rm-csel__list{height:180px}}
+</style>

package/dist/runtime/components/MultipleSelect.vue

@@ -0,0 +1,256 @@
+<!--
+  RmMultipleSelect - champ de filtre a choix multiple.
+
+  Reprend `arg-multiple-select` d'Auriga : un intitule, un champ qui enumere
+  ce qui est retenu avec le compte a droite, et un panneau de cases a cocher
+  avec, au besoin, une recherche et une ligne « Tout ».
+
+  Laquelle prendre : celle-ci pour cocher plusieurs valeurs dans un panneau de
+  filtres ; `RmDropdownSelect` pour un choix unique ; `RmComplexSelect` quand
+  la liste est trop longue pour se cocher et se mene en deux colonnes
+  (ajouter / retirer).
+
+  Trois choses changent par rapport a Auriga.
+
+  La selection est un `v-model` sur les valeurs retenues, plus un couple
+  `default_select` en entree et `update:Selection` en sortie : les deux se
+  desynchronisaient des que la page reposait la selection elle-meme.
+
+  Les options sont des cases a cocher (`role="checkbox"`, `aria-checked`)
+  atteignables au clavier, la ou Auriga posait des `div` cliquables.
+
+  Les colonnes multiples, les listes imbriquees et les options desactivees par
+  rang ont ete laissees de cote : aucune page ne s'en sert, et le rang comme
+  identifiant cassait des que la liste etait filtree.
+-->
+<script setup lang="ts">
+import { computed, nextTick, onUnmounted, ref, watch } from 'vue'
+
+const props = withDefaults(defineProps<{
+  /** Intitule pose au-dessus du champ. */
+  label: string
+  options: string[]
+  /** Champ de recherche en tete du panneau. */
+  search?: boolean
+  disabled?: boolean
+  loading?: boolean
+  /** Ligne « Tout » en tete de liste. */
+  showAll?: boolean
+  /** Pastille du nombre de valeurs retenues, posee sur le champ. */
+  showAmount?: boolean
+  /** Tout est retenu tant que la page n'a rien choisi. */
+  preselectAll?: boolean
+  emptyLabel?: string
+  emptyContent?: string
+  searchPlaceholder?: string
+  /**
+   * Filtrage local de la liste sur la saisie. A passer a `false` quand les
+   * options arrivent deja filtrees du serveur (cf. `RmDropdownSelect`).
+   */
+  filterSearch?: boolean
+  /** Pastille d'aide a cote de l'intitule, qui emet `openInfo`. */
+  labelInfo?: boolean
+  lang?: 'fr' | 'en'
+}>(), {
+  search: true,
+  disabled: false,
+  loading: false,
+  showAll: false,
+  showAmount: true,
+  preselectAll: false,
+  emptyLabel: undefined,
+  emptyContent: undefined,
+  searchPlaceholder: undefined,
+  filterSearch: true,
+  labelInfo: false,
+  lang: 'fr',
+})
+
+const emit = defineEmits<{
+  /** Selection complete apres le changement. Double le `v-model`. */
+  change: [values: string[]]
+  /** Saisie de recherche, amortie a 500 ms. */
+  search: [value: string]
+  openInfo: []
+  close: []
+}>()
+
+const selected = defineModel<string[]>({ default: () => [] })
+
+const WORDS = {
+  fr: { empty: 'Aucune sélection', search: 'Rechercher...', notFound: 'Aucun résultat', loading: 'Chargement', all: 'Tout' },
+  en: { empty: 'No selection', search: 'Search...', notFound: 'No result', loading: 'Loading', all: 'All' },
+} as const
+
+const t = computed(() => WORDS[props.lang])
+
+const isOpen = ref(false)
+const searchTerm = ref('')
+const rootRef = ref<HTMLElement>()
+const searchRef = ref<HTMLInputElement>()
+
+// Tout cocher d'entree, une fois : refaire la selection a chaque arrivee
+// d'options ecraserait ce que la page vient de decocher.
+const preselectDone = ref(false)
+watch(() => props.options, (options) => {
+  if (!props.preselectAll || preselectDone.value || options.length === 0) return
+  preselectDone.value = true
+  commit([...options])
+}, { immediate: true })
+
+const visibleOptions = computed(() => {
+  const needle = searchTerm.value.trim().toLowerCase()
+  if (!needle || !props.filterSearch) return props.options
+  const parts = needle.split(' ').filter(Boolean)
+  return props.options.filter(option => parts.every(part => option.toLowerCase().includes(part)))
+})
+
+const allSelected = computed(() =>
+  props.options.length > 0 && props.options.every(option => selected.value.includes(option)),
+)
+
+/** Le champ enumere ce qui est retenu : le compte seul ne dit pas quoi. */
+const summary = computed(() => selected.value.join(', '))
+
+let debounceId: ReturnType<typeof setTimeout> | undefined
+watch(searchTerm, (value) => {
+  clearTimeout(debounceId)
+  debounceId = setTimeout(() => emit('search', value), 500)
+})
+
+function close() {
+  if (!isOpen.value) return
+  isOpen.value = false
+  document.removeEventListener('click', onDocumentClick)
+  emit('close')
+}
+
+function onDocumentClick(event: MouseEvent) {
+  if (!rootRef.value?.contains(event.target as Node)) close()
+}
+
+async function toggle() {
+  if (props.disabled) return
+  if (isOpen.value) return close()
+
+  isOpen.value = true
+  searchTerm.value = ''
+  document.addEventListener('click', onDocumentClick)
+  if (!props.search) return
+  await nextTick()
+  searchRef.value?.focus()
+}
+
+function commit(values: string[]) {
+  selected.value = values
+  emit('change', values)
+}
+
+function toggleOption(option: string) {
+  commit(selected.value.includes(option)
+    ? selected.value.filter(value => value !== option)
+    : [...selected.value, option])
+}
+
+function toggleAll() {
+  commit(allSelected.value ? [] : [...props.options])
+}
+
+onUnmounted(() => {
+  clearTimeout(debounceId)
+  document.removeEventListener('click', onDocumentClick)
+})
+</script>
+
+<template>
+  <div ref="rootRef" class="rm-msel" @keydown.escape="close">
+    <p class="rm-msel__label">
+      {{ label }}
+      <button v-if="labelInfo" type="button" class="rm-msel__info" @click="emit('openInfo')">
+        <RmIcon name="Info" :size="14" />
+      </button>
+    </p>
+
+    <button
+      type="button"
+      class="rm-msel__field"
+      :class="{ 'is-open': isOpen, 'is-disabled': disabled }"
+      :disabled="disabled"
+      :aria-expanded="isOpen"
+      aria-haspopup="true"
+      @click.stop="toggle"
+    >
+      <RmTooltip :text="summary" :disabled="selected.length === 0" class="rm-msel__value-slot">
+        <span class="rm-msel__value" :class="{ 'is-empty': selected.length === 0 }">
+          {{ selected.length > 0 ? summary : emptyLabel || t.empty }}
+        </span>
+      </RmTooltip>
+      <span v-if="showAmount && selected.length > 0" class="rm-msel__count">
+        {{ selected.length > 99 ? '99+' : selected.length }}
+      </span>
+      <RmIcon name="CaretDown" :size="16" />
+    </button>
+
+    <div v-show="isOpen" class="rm-msel__panel" @click.stop>
+      <div v-if="search" class="rm-msel__search">
+        <RmIcon name="MagnifyingGlass" :size="16" />
+        <input
+          ref="searchRef"
+          v-model="searchTerm"
+          type="search"
+          class="rm-msel__search-input"
+          :placeholder="searchPlaceholder || t.search"
+          :aria-label="searchPlaceholder || t.search"
+        >
+      </div>
+
+      <p v-if="loading" class="rm-msel__state" aria-busy="true">{{ t.loading }}</p>
+      <p v-else-if="visibleOptions.length === 0" class="rm-msel__state">
+        {{ emptyContent || t.notFound }}
+      </p>
+
+      <div v-else class="rm-msel__list">
+        <button
+          v-if="showAll"
+          type="button"
+          role="checkbox"
+          class="rm-msel__option"
+          :class="{ 'is-checked': allSelected }"
+          :aria-checked="allSelected"
+          @click="toggleAll"
+        >
+          <RmIcon
+            :name="allSelected ? 'CheckSquare' : 'Square'"
+            :size="16"
+            :weight="allSelected ? 'fill' : 'regular'"
+          />
+          <span>{{ t.all }}</span>
+        </button>
+
+        <div :class="{ 'rm-msel__indent': showAll }">
+          <button
+            v-for="option in visibleOptions"
+            :key="option"
+            type="button"
+            role="checkbox"
+            class="rm-msel__option"
+            :class="{ 'is-checked': selected.includes(option) }"
+            :aria-checked="selected.includes(option)"
+            @click="toggleOption(option)"
+          >
+            <RmIcon
+              :name="selected.includes(option) ? 'CheckSquare' : 'Square'"
+              :size="16"
+              :weight="selected.includes(option) ? 'fill' : 'regular'"
+            />
+            <span>{{ option }}</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.rm-msel{align-items:flex-start;display:flex;flex-direction:column;gap:4px;position:relative}.rm-msel__label{align-items:center;color:var(--text-secondary);display:flex;font-size:var(--font-12,12px);gap:4px;line-height:14px}.rm-msel__info{background:none;border:none;color:var(--text-muted);cursor:pointer;display:flex;padding:0}.rm-msel__field{align-items:center;background:var(--bg-surface);border:1.5px solid var(--border-default);border-radius:var(--radius-md,8px);color:var(--text-primary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-14,14px);font-weight:700;gap:4px;line-height:16px;padding:12px;text-align:left;width:196px}.rm-msel__field:hover:not(.is-disabled){border-color:rgba(var(--brand-rgb),.3)}.rm-msel__field.is-open{border-color:var(--color-primary)}.rm-msel__field.is-disabled{background:var(--bg-surface-2);color:var(--text-muted);cursor:not-allowed}.rm-msel__field:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.rm-msel__value-slot{display:block;flex:1;min-width:0}.rm-msel__value{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-msel__value.is-empty{color:var(--text-muted);font-style:italic;font-weight:400}.rm-msel__field :deep(svg){color:var(--text-secondary);flex-shrink:0}.rm-msel__count{align-items:center;background:rgba(var(--brand-rgb),.1);border-radius:50%;color:var(--color-primary);display:flex;flex-shrink:0;font-size:var(--font-12,12px);font-weight:600;height:20px;justify-content:center;width:20px}.rm-msel__panel{border:1.5px solid var(--border-default);border-radius:var(--radius-lg,12px);box-shadow:var(--r-shadow-lg,0 8px 24px rgba(0,0,0,.12));box-sizing:border-box;flex-direction:column;left:0;margin-top:8px;max-height:500px;max-width:320px;min-width:230px;padding:16px;position:absolute;top:100%;z-index:12}.rm-msel__panel,.rm-msel__search{background:var(--bg-surface);display:flex}.rm-msel__search{align-items:center;border:1px solid var(--border-default);border-radius:var(--radius-md,8px);gap:8px;padding:8px 12px}.rm-msel__search :deep(svg){color:var(--text-muted);flex-shrink:0}.rm-msel__search-input{background:none;border:none;color:var(--text-primary);font-family:inherit;font-size:var(--font-14,14px);width:100%}.rm-msel__search-input::-moz-placeholder{color:var(--text-muted);font-size:var(--font-12,12px)}.rm-msel__search-input::placeholder{color:var(--text-muted);font-size:var(--font-12,12px)}.rm-msel__search-input:focus-visible{outline:none}.rm-msel__state{color:var(--text-secondary);font-size:var(--font-14,14px);font-style:italic;padding-top:16px;text-align:center}.rm-msel__list{display:flex;flex-direction:column;min-height:10px;overflow-y:auto}.rm-msel__list:not(:only-child){margin-top:16px}.rm-msel__indent{margin-left:16px}.rm-msel__option{align-items:center;background:none;border:none;border-radius:var(--radius-sm,4px);color:var(--text-primary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-14,14px);gap:8px;line-height:160%;margin:4px 0;min-height:24px;padding:2px 4px;text-align:left;width:100%}.rm-msel__option :deep(svg){color:var(--text-muted);flex-shrink:0}.rm-msel__option:hover{background:rgba(var(--brand-rgb),.05)}.rm-msel__option:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.rm-msel__option.is-checked{font-weight:700}.rm-msel__option.is-checked :deep(svg),.rm-msel__option:hover :deep(svg){color:var(--color-primary)}
+</style>

package/dist/runtime/components/ViewPill.vue

@@ -7,9 +7,11 @@
   enregistrees, basculer sur une vue favorite, ouvrir le reste (toutes les
   vues, enregistrer, et ce que la page ajoute).
 
-  Un point orange parait des que l'ecran ne correspond plus a la vue active :
-  c'est le seul etat que la pastille porte elle-meme, parce que c'est le seul
-  qui se perd si on ne le voit pas.
+  Un point pulse a droite du nom des qu'il y a un etat a dire : vert quand une
+  vue est posee, orange quand l'ecran ne correspond plus a cette vue. Le second
+  couvre le premier, parce qu'une modification non enregistree est ce qui se
+  perd si on ne le voit pas. Meme forme que le point du rail : un seul signe a
+  apprendre pour les deux endroits ou l'etat d'une vue se lit.
 
   La pastille ne connait ni l'API ni le magasin de vues : elle recoit une
   liste et emet ce que l'utilisateur demande.
@@ -74,6 +76,7 @@ const WORDS = {
     favorites: 'Favoris',
     actions: 'Actions',
     unsaved: 'Modifications non enregistrées',
+    applied: 'Vue appliquée',
     save: 'Sauvegarder',
     aria: 'Vue affichée',
   },
@@ -83,6 +86,7 @@ const WORDS = {
     favorites: 'Favorites',
     actions: 'Actions',
     unsaved: 'Unsaved changes',
+    applied: 'View applied',
     save: 'Save',
     aria: 'Current view',
   },
@@ -142,7 +146,18 @@ onBeforeUnmount(() => {
       <RmIcon name="BookmarkSimple" :size="16" class="rm-vpill__icon" />
       <span class="rm-vpill__key">{{ t.key }}</span>
       <span class="rm-vpill__value">{{ label }}</span>
-      <span v-if="dirty" class="rm-vpill__dot" :title="t.unsaved" aria-hidden="true" />
+      <span
+        v-if="dirty"
+        class="rm-vpill__dot rm-vpill__dot--unsaved"
+        :title="t.unsaved"
+        aria-hidden="true"
+      />
+      <span
+        v-else-if="viewName"
+        class="rm-vpill__dot rm-vpill__dot--applied"
+        :title="t.applied"
+        aria-hidden="true"
+      />
       <RmIcon class="rm-vpill__caret" name="CaretDown" :size="14" />
     </button>
 
@@ -194,5 +209,5 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
-.rm-vpill{position:relative}.rm-vpill,.rm-vpill__pill{align-items:center;display:flex}.rm-vpill__pill{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-pill);color:var(--text-primary);cursor:pointer;font-family:var(--font-sans);font-size:var(--font-14);font-weight:var(--weight-medium);gap:6px;height:var(--rm-fbar-field-h,32px);padding:0 14px;white-space:nowrap}.rm-vpill__pill:hover{background:var(--bg-surface-3)}.rm-vpill__pill.is-open{border-color:var(--color-primary);color:var(--color-primary)}.rm-vpill__icon{color:currentColor;flex-shrink:0}.rm-vpill__key{color:var(--text-muted);font-weight:var(--weight-normal)}.rm-vpill__value{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-vpill__pill.has-unsaved{border-color:var(--color-warning)}.rm-vpill__dot{animation:rm-vpill-pulse 2s ease-out infinite;background:var(--color-warning);border-radius:50%;flex-shrink:0;height:8px;width:8px}@keyframes rm-vpill-pulse{0%{box-shadow:0 0 0 0 rgba(217,119,6,.6)}70%{box-shadow:0 0 0 6px rgba(217,119,6,0)}to{box-shadow:0 0 0 0 rgba(217,119,6,0)}}@media (prefers-reduced-motion:reduce){.rm-vpill__dot,.rm-vpill__unsaved-dot:before{animation:none}}.rm-vpill__caret{color:var(--text-muted);flex-shrink:0}.rm-vpill__menu{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:8px;box-shadow:var(--shadow-lg);box-sizing:border-box;font-family:var(--font-sans);left:0;max-width:460px;min-width:320px;padding:6px;position:absolute;top:calc(100% + 6px);z-index:60}.rm-vpill__unsaved{align-items:center;background:var(--color-warning-bg);border-radius:var(--radius-md);color:var(--color-warning);display:flex;font-size:var(--font-12);gap:8px;padding:8px 12px}.rm-vpill__unsaved-dot{align-items:center;display:inline-flex;flex-shrink:0;height:14px;justify-content:center;width:14px}.rm-vpill__unsaved-dot:before{animation:rm-vpill-pulse 2s ease-out infinite;background:var(--color-warning);border-radius:50%;content:"";height:7px;width:7px}.rm-vpill__unsaved-label{flex:1;font-weight:var(--weight-semibold)}.rm-vpill__unsaved-cta{background:transparent;border:none;color:var(--color-warning);cursor:pointer;font-family:inherit;font-size:inherit;font-weight:var(--weight-bold);padding:0;text-decoration:underline;text-underline-offset:2px}.rm-vpill__unsaved-cta:hover{color:var(--text-primary)}.rm-vpill__divider{background:var(--border-soft);height:1px;margin:6px -6px}.rm-vpill__section{color:var(--text-muted);font-size:var(--font-10);font-weight:var(--weight-bold);letter-spacing:.08em;margin:0;padding:8px 12px 4px 34px;text-align:left;text-transform:uppercase}.rm-vpill__item{align-items:center;background:none;border:none;border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-13);gap:8px;padding:8px 12px;text-align:left;transition:background .1s,color .1s;width:100%}.rm-vpill__item:hover{background:var(--bg-hover);color:var(--text-primary)}.rm-vpill__item.is-active{background:var(--bg-hover);color:var(--color-secondary);font-weight:var(--weight-semibold)}.rm-vpill__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-vpill__item--view .rm-vpill__check{color:var(--color-secondary);flex-shrink:0;opacity:0;transition:opacity .1s}.rm-vpill__item--view.is-active .rm-vpill__check{opacity:1}
+.rm-vpill{position:relative}.rm-vpill,.rm-vpill__pill{align-items:center;display:flex}.rm-vpill__pill{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-pill);color:var(--text-primary);cursor:pointer;font-family:var(--font-sans);font-size:var(--font-14);font-weight:var(--weight-medium);gap:6px;height:var(--rm-fbar-field-h,32px);padding:0 14px;white-space:nowrap}.rm-vpill__pill:hover{background:var(--bg-surface-3)}.rm-vpill__pill.is-open{border-color:var(--color-primary);color:var(--color-primary)}.rm-vpill__icon{color:currentColor;flex-shrink:0}.rm-vpill__key{color:var(--text-muted);font-weight:var(--weight-normal)}.rm-vpill__value{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-vpill__pill.has-unsaved{border-color:var(--color-warning)}.rm-vpill__dot{border-radius:50%;flex-shrink:0;height:8px;width:8px}.rm-vpill__dot--applied{animation:rm-vpill-pulse-applied 2s ease-out infinite;background:var(--color-success)}.rm-vpill__dot--unsaved{animation:rm-vpill-pulse 2s ease-out infinite;background:var(--color-warning)}@keyframes rm-vpill-pulse{0%{box-shadow:0 0 0 0 rgba(217,119,6,.6)}70%{box-shadow:0 0 0 6px rgba(217,119,6,0)}to{box-shadow:0 0 0 0 rgba(217,119,6,0)}}@keyframes rm-vpill-pulse-applied{0%{box-shadow:0 0 0 0 rgba(22,163,74,.55)}70%{box-shadow:0 0 0 6px rgba(22,163,74,0)}to{box-shadow:0 0 0 0 rgba(22,163,74,0)}}@media (prefers-reduced-motion:reduce){.rm-vpill__dot,.rm-vpill__unsaved-dot:before{animation:none}}.rm-vpill__caret{color:var(--text-muted);flex-shrink:0}.rm-vpill__menu{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:8px;box-shadow:var(--shadow-lg);box-sizing:border-box;font-family:var(--font-sans);left:0;max-width:460px;min-width:320px;padding:6px;position:absolute;top:calc(100% + 6px);z-index:60}.rm-vpill__unsaved{align-items:center;background:var(--color-warning-bg);border-radius:var(--radius-md);color:var(--color-warning);display:flex;font-size:var(--font-12);gap:8px;padding:8px 12px}.rm-vpill__unsaved-dot{align-items:center;display:inline-flex;flex-shrink:0;height:14px;justify-content:center;width:14px}.rm-vpill__unsaved-dot:before{animation:rm-vpill-pulse 2s ease-out infinite;background:var(--color-warning);border-radius:50%;content:"";height:7px;width:7px}.rm-vpill__unsaved-label{flex:1;font-weight:var(--weight-semibold)}.rm-vpill__unsaved-cta{background:transparent;border:none;color:var(--color-warning);cursor:pointer;font-family:inherit;font-size:inherit;font-weight:var(--weight-bold);padding:0;text-decoration:underline;text-underline-offset:2px}.rm-vpill__unsaved-cta:hover{color:var(--text-primary)}.rm-vpill__divider{background:var(--border-soft);height:1px;margin:6px -6px}.rm-vpill__section{color:var(--text-muted);font-size:var(--font-10);font-weight:var(--weight-bold);letter-spacing:.08em;margin:0;padding:8px 12px 4px 34px;text-align:left;text-transform:uppercase}.rm-vpill__item{align-items:center;background:none;border:none;border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-13);gap:8px;padding:8px 12px;text-align:left;transition:background .1s,color .1s;width:100%}.rm-vpill__item:hover{background:var(--bg-hover);color:var(--text-primary)}.rm-vpill__item.is-active{background:var(--bg-hover);color:var(--color-secondary);font-weight:var(--weight-semibold)}.rm-vpill__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-vpill__item--view .rm-vpill__check{color:var(--color-secondary);flex-shrink:0;opacity:0;transition:opacity .1s}.rm-vpill__item--view.is-active .rm-vpill__check{opacity:1}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tekkare/romulus",
-  "version": "0.1.72",
+  "version": "0.1.74",
   "description": "Romulus Design System - Nuxt module by Tekkare",
   "license": "MIT",
   "type": "module",