@tekkare/romulus 0.1.18 → 0.1.20

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.16.0"
   },
-  "version": "0.1.17",
+  "version": "0.1.19",
   "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);transition:width .2s;width:var(--rm-nav-w)}.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{color:var(--rm-shell-text);flex:1;font-size:20px;font-weight:700;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__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__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{color:var(--rm-shell-text-muted);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__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:30}.rm-sb--right{position:relative;z-index:31}.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__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__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__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:200}.rm-sb--right{position:relative;z-index:201}.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/AppHeader.vue

@@ -18,6 +18,11 @@ export interface RmCrumb {
   to?: string
   /** Lien externe : la plateforme vit sur un autre domaine. */
   href?: string
+  /**
+   * Code ISO 3166-1 alpha-2 : le maillon porte le drapeau du pays devant son
+   * libelle. En SVG, pas en emoji — cf. RmFlag.
+   */
+  flag?: string
 }
 
 export interface RmHeaderTab {
@@ -48,17 +53,17 @@ const emit = defineEmits<{ tab: [key: string] }>()
             v-if="crumb.href && i < crumbs.length - 1"
             class="rm-hd__crumb"
             :href="crumb.href"
-          >{{ crumb.label }}</a>
+          ><RmFlag v-if="crumb.flag" :code="crumb.flag" :height="12" />{{ crumb.label }}</a>
           <NuxtLink
             v-else-if="crumb.to && i < crumbs.length - 1"
             class="rm-hd__crumb"
             :to="crumb.to"
-          >{{ crumb.label }}</NuxtLink>
+          ><RmFlag v-if="crumb.flag" :code="crumb.flag" :height="12" />{{ crumb.label }}</NuxtLink>
           <span
             v-else
             class="rm-hd__crumb rm-hd__crumb--last"
             :aria-current="i === crumbs.length - 1 ? 'page' : undefined"
-          >{{ crumb.label }}</span>
+          ><RmFlag v-if="crumb.flag" :code="crumb.flag" :height="12" />{{ crumb.label }}</span>
         </template>
       </nav>
 

package/dist/runtime/components/Flag.vue

@@ -0,0 +1,53 @@
+<!--
+  RmFlag - un drapeau national en SVG, designe par son code ISO 3166-1 alpha-2.
+
+  A utiliser partout ou le chrome montre un pays. L'emoji ne suffit pas : sous
+  Windows, Segoe UI Emoji ne ligature pas les indicateurs regionaux et Chrome
+  affiche « FR » dans deux carres. Le detail est dans internal/flags.ts, qui
+  porte aussi la table.
+
+  Un code absent de la table retombe sur l'emoji : le chrome montre quelque
+  chose partout, et seul le systeme qui ne sait pas le rendre est degrade.
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+import { RM_FLAGS, rmFlagEmoji } from '../internal/flags'
+
+const props = withDefaults(defineProps<{
+  /** Code ISO 3166-1 alpha-2, insensible a la casse ("fr", "GB"). */
+  code: string
+  /** Hauteur en pixels. La largeur suit le rapport 21/15 du dessin. */
+  height?: number
+  /** Nom lu par les lecteurs d'ecran. Absent : le drapeau est decoratif. */
+  title?: string
+  /** Coins arrondis. Un drapeau a angles vifs jure a cote d'une icone. */
+  rounded?: boolean
+}>(), {
+  height: 14,
+  title: undefined,
+  rounded: true,
+})
+
+const key = computed(() => (props.code || '').toLowerCase())
+const svg = computed(() => RM_FLAGS[key.value])
+const width = computed(() => (props.height * 21) / 15)
+</script>
+
+<template>
+  <svg
+    v-if="svg"
+    class="rm-flag"
+    :class="{ 'rm-flag--rounded': rounded }"
+    :width="width"
+    :height="height"
+    viewBox="0 0 21 15"
+    :role="title ? 'img' : undefined"
+    :aria-hidden="title ? undefined : true"
+    v-html="(title ? `<title>${title}</title>` : '') + svg"
+  />
+  <span v-else class="rm-flag rm-flag--emoji" :title="title" aria-hidden="true">{{ rmFlagEmoji(key) }}</span>
+</template>
+
+<style scoped>
+.rm-flag{display:inline-block;flex-shrink:0;vertical-align:-.15em}.rm-flag--rounded{border-radius:2px;box-shadow:inset 0 0 0 .5px rgba(30,41,59,.18)}
+</style>

package/dist/runtime/components/SidebarLeft.vue

@@ -43,6 +43,11 @@ export interface RmNavSection {
 const props = withDefaults(defineProps<{
   /** Identite affichee dans l'en-tete. Un emoji au debut est dans l'esprit du portail. */
   title: string
+  /**
+   * Code ISO 3166-1 alpha-2 : l'en-tete porte le drapeau du pays devant le
+   * titre. A preferer a un emoji colle dans `title` — cf. RmFlag.
+   */
+  flag?: string
   /** Cible du titre. Absent : le titre n'est pas un lien. */
   titleTo?: string
   sections: RmNavSection[]
@@ -54,6 +59,7 @@ const props = withDefaults(defineProps<{
   collapseLabel?: string
   expandLabel?: string
 }>(), {
+  flag: undefined,
   titleTo: undefined,
   activePath: undefined,
   collapsed: false,
@@ -100,8 +106,12 @@ const isActive = (item: RmNavItem) => item.active ?? (!!item.to && item.to === p
            un element <nuxtlink> inerte dans le DOM — le titre et les entrees de
            menu ne repondaient plus au clic. Les deux branches sont ecrites en
            dur pour que le compilateur les resolve. -->
-      <NuxtLink v-if="!collapsed && titleTo" :to="titleTo" class="rm-sb__logo">{{ title }}</NuxtLink>
-      <span v-else-if="!collapsed" class="rm-sb__logo">{{ title }}</span>
+      <NuxtLink v-if="!collapsed && titleTo" :to="titleTo" class="rm-sb__logo">
+        <RmFlag v-if="flag" :code="flag" :height="16" />{{ title }}
+      </NuxtLink>
+      <span v-else-if="!collapsed" class="rm-sb__logo">
+        <RmFlag v-if="flag" :code="flag" :height="16" />{{ title }}
+      </span>
 
       <!-- Le pictogramme est celui d'oip7, repris trait pour trait : un cadre
            arrondi barre d'un trait vertical. -->

package/dist/runtime/internal/flags.d.ts

@@ -0,0 +1,3 @@
+export declare const RM_FLAGS: Record<string, string>;
+/** Drapeau emoji, replis quand le code n'est pas dans la table. */
+export declare const rmFlagEmoji: (code: string) => string;

package/dist/runtime/internal/flags.js

@@ -0,0 +1,76 @@
+const UNION = `
+<rect width="21" height="15" fill="#012169"/>
+<path d="M0 0L21 15M21 0L0 15" stroke="#FFFFFF" stroke-width="3"/>
+<path d="M0 0L21 15M21 0L0 15" stroke="#C8102E" stroke-width="1.6"/>
+<path d="M10.5 0V15M0 7.5H21" stroke="#FFFFFF" stroke-width="5"/>
+<path d="M10.5 0V15M0 7.5H21" stroke="#C8102E" stroke-width="3"/>`;
+const nordic = (field, cross, inner) => `
+<rect width="21" height="15" fill="${field}"/>
+<path d="M7.5 0V15M0 7.5H21" stroke="${cross}" stroke-width="3.4"/>
+${inner ? `<path d="M7.5 0V15M0 7.5H21" stroke="${inner}" stroke-width="1.4"/>` : ""}`;
+const vertical = (a, b, c) => `
+<rect width="7" height="15" fill="${a}"/>
+<rect x="7" width="7" height="15" fill="${b}"/>
+<rect x="14" width="7" height="15" fill="${c}"/>`;
+const horizontal = (a, b, c) => `
+<rect width="21" height="5" fill="${a}"/>
+<rect y="5" width="21" height="5" fill="${b}"/>
+<rect y="10" width="21" height="5" fill="${c}"/>`;
+const star = (cx, cy, r, fill = "#FFFFFF") => {
+  const points = Array.from({ length: 10 }, (_, i) => {
+    const radius = i % 2 ? r * 0.382 : r;
+    const angle = Math.PI / 5 * i - Math.PI / 2;
+    return `${(cx + radius * Math.cos(angle)).toFixed(2)},${(cy + radius * Math.sin(angle)).toFixed(2)}`;
+  });
+  return `<polygon points="${points.join(" ")}" fill="${fill}"/>`;
+};
+export const RM_FLAGS = {
+  fr: vertical("#002654", "#FFFFFF", "#ED2939"),
+  be: vertical("#000000", "#FDDA24", "#EF3340"),
+  ie: vertical("#169B62", "#FFFFFF", "#FF883E"),
+  it: vertical("#008C45", "#F4F5F0", "#CD212A"),
+  ro: vertical("#002B7F", "#FCD116", "#CE1126"),
+  de: horizontal("#000000", "#DD0000", "#FFCE00"),
+  nl: horizontal("#AE1C28", "#FFFFFF", "#21468B"),
+  lu: horizontal("#ED2939", "#FFFFFF", "#00A1DE"),
+  at: horizontal("#ED2939", "#FFFFFF", "#ED2939"),
+  // Bandes inegales : le jaune occupe la moitie de la hauteur.
+  es: `<rect width="21" height="15" fill="#AA151B"/><rect y="3.75" width="21" height="7.5" fill="#F1BF00"/>`,
+  pt: `<rect width="21" height="15" fill="#FF0000"/><rect width="8.4" height="15" fill="#006600"/><circle cx="8.4" cy="7.5" r="2.6" fill="#FFE800"/><circle cx="8.4" cy="7.5" r="1.7" fill="#FF0000"/>`,
+  pl: `<rect width="21" height="15" fill="#FFFFFF"/><rect y="7.5" width="21" height="7.5" fill="#DC143C"/>`,
+  cz: `<rect width="21" height="15" fill="#FFFFFF"/><rect y="7.5" width="21" height="7.5" fill="#D7141A"/><polygon points="0,0 10,7.5 0,15" fill="#11457E"/>`,
+  ch: `<rect width="21" height="15" fill="#FF0000"/><path d="M10.5 3.5V11.5M6.5 7.5H14.5" stroke="#FFFFFF" stroke-width="2.4"/>`,
+  dk: nordic("#C8102E", "#FFFFFF"),
+  se: nordic("#006AA7", "#FECC00"),
+  fi: nordic("#FFFFFF", "#003580"),
+  no: nordic("#BA0C2F", "#FFFFFF", "#00205B"),
+  is: nordic("#02529C", "#FFFFFF", "#DC1E35"),
+  gb: UNION,
+  uk: UNION,
+  us: `<rect width="21" height="15" fill="#B31942"/>
+${[1, 3, 5, 7, 9, 11].map((i) => `<rect y="${(i * 15 / 13).toFixed(2)}" width="21" height="${(15 / 13).toFixed(2)}" fill="#FFFFFF"/>`).join("")}
+<rect width="8.4" height="${(7 * 15 / 13).toFixed(2)}" fill="#0A3161"/>
+${[0, 1, 2].flatMap((row) => [0, 1, 2].map((col) => `<circle cx="${2 + col * 2.2}" cy="${1.8 + row * 2.4}" r="0.5" fill="#FFFFFF"/>`)).join("")}`,
+  ca: `<rect width="21" height="15" fill="#FFFFFF"/><rect width="5.25" height="15" fill="#D80621"/><rect x="15.75" width="5.25" height="15" fill="#D80621"/>
+<path d="M10.5 3.2 11.3 5.2 12.9 4.6 12.4 6.6 14 6.3 13.3 7.6 14.6 8.6 12.9 9.2 13.2 10.3 11.2 10 11.4 12.3 10.5 11.4 9.6 12.3 9.8 10 7.8 10.3 8.1 9.2 6.4 8.6 7.7 7.6 7 6.3 8.6 6.6 8.1 4.6 9.7 5.2Z" fill="#D80621"/>`,
+  jp: `<rect width="21" height="15" fill="#FFFFFF"/><circle cx="10.5" cy="7.5" r="4.2" fill="#BC002D"/>`,
+  // Taegeuk simplifie : deux demi-disques et les quatre trigrammes ramenes a
+  // des barres. A 21x15 les traits interrompus ne se distinguent plus.
+  kr: `<rect width="21" height="15" fill="#FFFFFF"/>
+<path d="M7.2 7.5a3.3 3.3 0 0 1 6.6 0 1.65 1.65 0 0 0-3.3 0 1.65 1.65 0 0 1-3.3 0Z" fill="#CD2E3A"/>
+<path d="M7.2 7.5a1.65 1.65 0 0 1 3.3 0 1.65 1.65 0 0 0 3.3 0 3.3 3.3 0 0 1-6.6 0Z" fill="#0047A0"/>
+<g stroke="#000000" stroke-width="0.7"><path d="M2.6 3.1 4.8 4.6M2 4 4.2 5.5M4.2 10.4 2 11.9M4.8 11.3 2.6 12.8M16.2 4.6 18.4 3.1M16.8 5.5 19 4M16.2 10.4 18.4 11.9M16.8 11.3 19 12.8"/></g>`,
+  cn: `<rect width="21" height="15" fill="#EE1C25"/>${star(4.5, 4.2, 2.4, "#FFDE00")}${star(8.6, 1.9, 0.9, "#FFDE00")}${star(9.9, 3.7, 0.9, "#FFDE00")}${star(9.9, 5.9, 0.9, "#FFDE00")}${star(8.6, 7.6, 0.9, "#FFDE00")}`,
+  au: `<rect width="21" height="15" fill="#012169"/><g transform="scale(0.5)">${UNION}</g>
+${star(5.2, 11.4, 1.1)}${star(16.5, 3.4, 0.9)}${star(18.2, 7.4, 0.9)}${star(16.2, 11.2, 0.9)}${star(14.2, 8.6, 0.6)}`,
+  nz: `<rect width="21" height="15" fill="#012169"/><g transform="scale(0.5)">${UNION}</g>
+${star(17.4, 3.6, 0.9, "#C8102E")}${star(15.4, 7, 0.9, "#C8102E")}${star(18.6, 8.2, 0.9, "#C8102E")}${star(16.4, 11.4, 0.9, "#C8102E")}`,
+  br: `<rect width="21" height="15" fill="#009B3A"/><polygon points="10.5,1.8 19.4,7.5 10.5,13.2 1.6,7.5" fill="#FEDF00"/><circle cx="10.5" cy="7.5" r="3.1" fill="#002776"/><path d="M7.6 6.4a9 9 0 0 1 5.9 1.5" stroke="#FFFFFF" stroke-width="0.8" fill="none"/>`,
+  // Le cercle des douze etoiles, pose au disque : une etoile a cinq branches
+  // d'un pixel de rayon n'a plus de branches.
+  eu: `<rect width="21" height="15" fill="#003399"/>${Array.from({ length: 12 }, (_, i) => {
+    const angle = Math.PI / 6 * i - Math.PI / 2;
+    return `<circle cx="${(10.5 + 4.6 * Math.cos(angle)).toFixed(2)}" cy="${(7.5 + 4.6 * Math.sin(angle)).toFixed(2)}" r="0.7" fill="#FFCC00"/>`;
+  }).join("")}`
+};
+export const rmFlagEmoji = (code) => code.length === 2 ? String.fromCodePoint(...[...code.toUpperCase()].map((c) => 127462 + c.charCodeAt(0) - 65)) : "";

package/package.json

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