@sybilion/uilib 1.3.48 → 1.3.50

package/dist/esm/components/ui/AnalysesSelector/AnalysesSelector.js

@@ -25,9 +25,9 @@ function renderIcon(icon) {
     if (!icon)
         return null;
     if (typeof icon === 'string') {
-        return jsx("img", { src: icon, alt: "", className: S.icon });
+        return (jsx("img", { src: icon, alt: "", width: 16, height: 16, "data-slot": "analysis-icon", className: cn(S.icon, S.iconImage) }));
     }
-    return jsx("span", { className: S.icon, children: icon });
+    return (jsx("span", { "data-slot": "analysis-icon", className: cn(S.icon, S.iconWrapper), children: icon }));
 }
 function AnalysesSelector({ items, selectedIds, onItemToggle, inlineMode = false, placeholder, disabled, size = 'md', variant = 'default', darker = false, className, triggerProps, onFailedItemClick, showHistorical = true, enableToggleHidden = false, maxVisibleItems = 1, preventDeselection = false, hiddenSeries: hiddenSeriesProp = new Set(), onToggleSeries = () => { }, isAnalysisInProgress: isAnalysisInProgressProp = defaultIsAnalysisInProgress, }) {
     const historicalAutoSelectedRef = useRef(false);

package/dist/esm/components/ui/AnalysesSelector/AnalysesSelector.styl.js

@@ -1,7 +1,7 @@
 import styleInject from 'style-inject';
 
-var css_248z = ".AnalysesSelector_root__V8v0T{align-items:center;display:flex;flex-wrap:wrap;justify-content:flex-start}.AnalysesSelector_variant-default__lbURP.AnalysesSelector_single__rAPT6{background-color:var(--background);border-radius:var(--p-4);padding:0 var(--p-2)}.AnalysesSelector_item__d3pDt{align-items:center;cursor:pointer;display:flex;gap:var(--p-2);margin:var(--p-1);transition:opacity .2s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none}.AnalysesSelector_item__d3pDt.AnalysesSelector_disabled__6JhJQ,.AnalysesSelector_item__d3pDt:hover{opacity:.5}.AnalysesSelector_item__d3pDt.AnalysesSelector_disabled__6JhJQ:hover{opacity:.8}.AnalysesSelector_item__d3pDt.AnalysesSelector_historical__hAqpN{pointer-events:none}.AnalysesSelector_item__d3pDt.AnalysesSelector_dimmed__mYWY7{opacity:.5}.AnalysesSelector_icon__1Tb0U{align-items:center;display:flex;flex-shrink:0;height:16px;justify-content:center;position:relative;width:16px}.AnalysesSelector_label__m-9Ml{flex-grow:1;font-size:var(--text-xs);white-space:nowrap}.AnalysesSelector_selectItemContent__iRsNR{align-items:center;display:flex;gap:var(--p-2);width:100%}.AnalysesSelector_selectTrigger__Avjkd{font-size:var(--text-xs);height:auto;min-width:auto}.AnalysesSelector_selectTriggerLabelWithId__C32ph{display:flex}.AnalysesSelector_itemLabelWithId__8c0mY{align-items:center;display:flex;flex-grow:1;min-width:0}";
-var S = {"root":"AnalysesSelector_root__V8v0T","variant-default":"AnalysesSelector_variant-default__lbURP","single":"AnalysesSelector_single__rAPT6","item":"AnalysesSelector_item__d3pDt","disabled":"AnalysesSelector_disabled__6JhJQ","historical":"AnalysesSelector_historical__hAqpN","dimmed":"AnalysesSelector_dimmed__mYWY7","icon":"AnalysesSelector_icon__1Tb0U","label":"AnalysesSelector_label__m-9Ml","selectItemContent":"AnalysesSelector_selectItemContent__iRsNR","selectTrigger":"AnalysesSelector_selectTrigger__Avjkd","selectTriggerLabelWithId":"AnalysesSelector_selectTriggerLabelWithId__C32ph","itemLabelWithId":"AnalysesSelector_itemLabelWithId__8c0mY"};
+var css_248z = ".AnalysesSelector_root__V8v0T{align-items:center;display:flex;flex-wrap:wrap;justify-content:flex-start}.AnalysesSelector_variant-default__lbURP.AnalysesSelector_single__rAPT6{background-color:var(--background);border-radius:var(--p-4);padding:0 var(--p-2)}.AnalysesSelector_item__d3pDt{align-items:center;cursor:pointer;display:flex;gap:var(--p-2);margin:var(--p-1);transition:opacity .2s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none}.AnalysesSelector_item__d3pDt.AnalysesSelector_disabled__6JhJQ,.AnalysesSelector_item__d3pDt:hover{opacity:.5}.AnalysesSelector_item__d3pDt.AnalysesSelector_disabled__6JhJQ:hover{opacity:.8}.AnalysesSelector_item__d3pDt.AnalysesSelector_historical__hAqpN{pointer-events:none}.AnalysesSelector_item__d3pDt.AnalysesSelector_dimmed__mYWY7{opacity:.5}.AnalysesSelector_icon__1Tb0U{flex-shrink:0;height:16px;max-height:16px;max-width:16px;overflow:hidden;width:16px}.AnalysesSelector_iconImage__r9yJx{display:block;-o-object-fit:contain;object-fit:contain}.AnalysesSelector_iconWrapper__2Kx8j{align-items:center;display:flex;justify-content:center;position:relative}.AnalysesSelector_iconWrapper__2Kx8j>img{height:100%;max-height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain;width:100%}[data-slot=select-item] [data-slot=analysis-icon]{flex-shrink:0;height:16px!important;max-height:16px!important;max-width:16px!important;-o-object-fit:contain;object-fit:contain;overflow:hidden;width:16px!important}.AnalysesSelector_label__m-9Ml{flex-grow:1;font-size:var(--text-xs);white-space:nowrap}.AnalysesSelector_selectItemContent__iRsNR{align-items:center;display:flex;gap:var(--p-2);width:100%}.AnalysesSelector_selectTrigger__Avjkd{font-size:var(--text-xs);height:auto;min-width:auto}.AnalysesSelector_selectTriggerLabelWithId__C32ph{display:flex}.AnalysesSelector_itemLabelWithId__8c0mY{align-items:center;display:flex;flex-grow:1;min-width:0}";
+var S = {"root":"AnalysesSelector_root__V8v0T","variant-default":"AnalysesSelector_variant-default__lbURP","single":"AnalysesSelector_single__rAPT6","item":"AnalysesSelector_item__d3pDt","disabled":"AnalysesSelector_disabled__6JhJQ","historical":"AnalysesSelector_historical__hAqpN","dimmed":"AnalysesSelector_dimmed__mYWY7","icon":"AnalysesSelector_icon__1Tb0U","iconImage":"AnalysesSelector_iconImage__r9yJx","iconWrapper":"AnalysesSelector_iconWrapper__2Kx8j","label":"AnalysesSelector_label__m-9Ml","selectItemContent":"AnalysesSelector_selectItemContent__iRsNR","selectTrigger":"AnalysesSelector_selectTrigger__Avjkd","selectTriggerLabelWithId":"AnalysesSelector_selectTriggerLabelWithId__C32ph","itemLabelWithId":"AnalysesSelector_itemLabelWithId__8c0mY"};
 styleInject(css_248z);
 
 export { S as default };

package/dist/esm/components/ui/Page/PageTabs/PageTabs.js

@@ -15,8 +15,8 @@ function hasTabPanelContent(content) {
         return false;
     return true;
 }
-function PageTabs({ className, contentClassName, innerClassName, scrollbarClassName, items, tabsListProps, ...props }) {
-    return (jsxs(Tabs, { className: cn(S.root, className), variant: "link", ...props, children: [jsx(TabsList, { ...tabsListProps, className: cn(S.list, tabsListProps?.withPaddings && S.withPaddings), children: jsx(PageXScroll, { size: "sm", scrollbarClassName: cn(S.scrollbar, scrollbarClassName), innerClassName: innerClassName, children: items.map(item => (jsx(TabsTrigger, { value: item.value, children: item.label }, item.value))) }) }), items.map(item => hasTabPanelContent(item.content) ? (jsx(TabsContent, { value: item.value, className: cn(S.content, contentClassName), children: item.content }, item.value)) : null)] }));
+function PageTabs({ className, contentClassName, innerClassName, scrollbarClassName, items, tabsListProps, variant = 'link', ...props }) {
+    return (jsxs(Tabs, { className: cn(S.root, className), variant: variant, ...props, children: [jsx(TabsList, { ...tabsListProps, className: cn(S.list, tabsListProps?.withPaddings && S.withPaddings), children: jsx(PageXScroll, { size: "sm", scrollbarClassName: cn(S.scrollbar, scrollbarClassName), innerClassName: innerClassName, children: items.map((item, index) => (jsx(TabsTrigger, { value: item.value, children: item.label }, item.key ?? `${item.value}-${index}`))) }) }), items.map(item => hasTabPanelContent(item.content) ? (jsx(TabsContent, { value: item.value, className: cn(S.content, contentClassName), children: item.content }, item.value)) : null)] }));
 }
 
 export { PageTabs };

package/dist/esm/components/ui/Select/Select.styl.js

@@ -1,6 +1,6 @@
 import styleInject from 'style-inject';
 
-var css_248z = ".Select_selectTrigger__oTOBl{align-items:center;background-color:var(--background);border:none;border-radius:var(--p-4);box-shadow:none;color:var(--foreground);cursor:pointer;display:flex;font-size:var(--text-sm);font-weight:500;gap:var(--p-1);justify-content:space-between;max-width:calc(90vw - var(--page-x-padding)*2);outline:none;overflow:hidden;padding:var(--p-1) var(--p-3);position:relative;transition:all .2s ease-in-out;white-space:nowrap;width:-moz-fit-content;width:fit-content}.Select_selectTrigger__oTOBl:before{background-image:linear-gradient(to right,transparent,var(--background));content:\"\";display:block;height:100%;left:60vw;min-height:100%;min-width:var(--page-x-padding);position:absolute;width:var(--page-x-padding);width:20%}.Select_selectTrigger__oTOBl[aria-expanded=true]:before{display:none}.Select_selectTrigger__oTOBl.Select_darker__wwisI{background-color:var(--muted)}.Select_selectTrigger__oTOBl:hover{box-shadow:0 0 0 2px var(--background)}.Select_selectTrigger__oTOBl[data-size=md]{height:1.75rem}.Select_selectTrigger__oTOBl[data-size=sm]{font-size:var(--text-xs);height:1.75rem}.Select_selectTrigger__oTOBl[data-size=lg]{font-size:var(--text-sm);height:2.25rem}.Select_selectTrigger__oTOBl[data-placeholder]{color:var(--muted-foreground)}.Select_selectTrigger__oTOBl:focus-visible{border-color:var(--ring)}.Select_selectTrigger__oTOBl[aria-invalid=true]{border-color:var(--destructive)}.Select_selectTrigger__oTOBl:disabled{cursor:not-allowed;opacity:.5}.Select_selectTrigger__oTOBl [data-slot=select-value]{align-items:center;display:flex;gap:var(--p-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Select_selectTrigger__oTOBl svg{flex-shrink:0;pointer-events:none}.Select_selectTrigger__oTOBl svg:not([class*=text-]){color:var(--foreground)}.Select_selectTrigger__oTOBl svg:not([class*=size-]){height:1rem;width:1rem}.dark .Select_selectTrigger__oTOBl:not(.Select_darker__wwisI){background-color:var(--background)}.dark .Select_selectTrigger__oTOBl:not(.Select_darker__wwisI):hover{background-color:var(--background-alpha-800)}.Select_clear__vxo-N{background-color:transparent;border:none;box-shadow:none;padding:0}.Select_clear__vxo-N:focus-visible{border:none;box-shadow:none}@media (prefers-color-scheme:dark){.Select_clear__vxo-N,.Select_clear__vxo-N:hover{background-color:transparent}}.Select_selectContent__Wbegi{background-color:var(--popover);border:1px solid var(--border);border-radius:var(--p-4);box-shadow:0 10px 15px -3px rgba(0,0,0,.1);color:var(--popover-foreground);max-height:var(--radix-select-content-available-height);min-width:8rem;overflow-x:hidden;overflow-y:auto;position:relative;transform-origin:var(--radix-select-content-transform-origin);z-index:1100}.Select_selectContent__Wbegi[data-state=open]{animation:Select_fadeIn__hm7v- .25s,Select_zoomIn__ep77v .1s}.Select_selectContent__Wbegi[data-state=closed]{animation:Select_fadeOut__A-ccN .25s,Select_zoomOut__pZ-7e .1s}.Select_selectContent__Wbegi[data-side=bottom]{animation:Select_fadeIn__hm7v- .25s,Select_slideInFromTop__O1LeF .1s}.Select_selectContent__Wbegi[data-side=left]{animation:Select_fadeIn__hm7v- .25s,Select_slideInFromRight__iJq-J .1s}.Select_selectContent__Wbegi[data-side=right]{animation:Select_fadeIn__hm7v- .25s,Select_slideInFromLeft__8tm7S .1s}.Select_selectContent__Wbegi[data-side=top]{animation:Select_fadeIn__hm7v- .25s,Select_slideInFromBottom__PsvX6 .1s}.Select_selectContentPopper__TU8Jn[data-side=bottom]{transform:translateY(.25rem)}.Select_selectContentPopper__TU8Jn[data-side=left]{transform:translateX(-.25rem)}.Select_selectContentPopper__TU8Jn[data-side=right]{transform:translateX(.25rem)}.Select_selectContentPopper__TU8Jn[data-side=top]{transform:translateY(-.25rem)}.Select_selectViewport__OtOW7{padding:var(--p-1)}.Select_selectViewportPopper__dUoFi{height:var(--radix-select-trigger-height);min-width:var(--radix-select-trigger-width);scroll-margin:var(--p-1) 0;width:100%}.Select_selectLabel__rX9cj{color:var(--muted-foreground);font-size:var(--text-xs);padding:var(--p-2) var(--p-2);padding-bottom:var(--p-2);padding-top:var(--p-2)}.Select_selectItem__JLg4D{align-items:center;border-radius:var(--radius-sm);cursor:default;display:flex;flex-grow:1;font-size:var(--text-sm);gap:var(--p-2);outline:none;padding:var(--p-1) var(--p-2);position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.Select_selectItem__JLg4D.Select_selected__tmqut{background-color:var(--accent);font-weight:600}.Select_selectItem__JLg4D:first-child{border-top-left-radius:var(--p-3);border-top-right-radius:var(--p-3)}.Select_selectItem__JLg4D:last-child{border-bottom-left-radius:var(--p-3);border-bottom-right-radius:var(--p-3)}.Select_selectItem__JLg4D:focus{background-color:var(--accent);color:var(--accent-foreground)}.Select_selectItem__JLg4D[data-disabled]{opacity:.5;pointer-events:none}.Select_selectItem__JLg4D svg{flex-shrink:0;pointer-events:none}.Select_selectItem__JLg4D svg:not([class*=text-]){color:var(--muted-foreground)}.Select_selectItem__JLg4D svg:not([class*=size-]){height:1rem;width:1rem}.Select_selectItem__JLg4D span{display:flex;flex-grow:1;width:100%}.Select_selectItem__JLg4D span:last-child{align-items:center;display:flex;gap:var(--p-2)}.Select_selectItemText__9JXv9{align-items:center;display:flex;gap:var(--p-1)}.Select_selectItemIndicatorContainer__Vte2-{align-items:center;display:flex;height:var(--p-8);justify-content:center;position:absolute;right:0;width:var(--p-8)}.Select_selectItemIndicator__9HcxQ{height:1rem;width:1rem}.Select_selectSeparator__OZw53{background-color:var(--border);height:1px;margin:-.25rem var(--p-1) var(--p-1);pointer-events:none}.Select_selectScrollButton__-z-iR{align-items:center;cursor:default;display:flex;justify-content:center;padding:var(--p-1) 0}.Select_selectIcon__-TfP9{height:1rem;margin-right:calc(var(--p-1)*-1);opacity:.5;width:1rem}.Select_selectScrollIcon__ZyTUI{height:1rem;width:1rem}@keyframes Select_fadeIn__hm7v-{0%{opacity:0}to{opacity:1}}@keyframes Select_fadeOut__A-ccN{0%{opacity:1}to{opacity:0}}@keyframes Select_zoomIn__ep77v{0%{transform:scale(.95)}to{transform:scale(1)}}@keyframes Select_zoomOut__pZ-7e{0%{transform:scale(1)}to{transform:scale(.95)}}@keyframes Select_slideInFromTop__O1LeF{0%{transform:translateY(-.5rem)}to{transform:translateY(.2)}}@keyframes Select_slideInFromBottom__PsvX6{0%{transform:translateY(.5rem)}to{transform:translateY(.2)}}@keyframes Select_slideInFromLeft__8tm7S{0%{transform:translateX(-.5rem)}to{transform:translateX(.2)}}@keyframes Select_slideInFromRight__iJq-J{0%{transform:translateX(.5rem)}to{transform:translateY(.2)}}";
+var css_248z = ".Select_selectTrigger__oTOBl{align-items:center;background-color:var(--background);border:none;border-radius:var(--p-4);box-shadow:none;color:var(--foreground);cursor:pointer;display:flex;font-size:var(--text-sm);font-weight:500;gap:var(--p-1);justify-content:space-between;max-width:calc(90vw - var(--page-x-padding)*2);outline:none;overflow:hidden;padding:var(--p-1) var(--p-3);position:relative;transition:all .2s ease-in-out;white-space:nowrap;width:-moz-fit-content;width:fit-content}.Select_selectTrigger__oTOBl:before{background-image:linear-gradient(to right,transparent,var(--background));content:\"\";display:block;height:100%;left:60vw;min-height:100%;min-width:var(--page-x-padding);position:absolute;width:var(--page-x-padding);width:20%}.Select_selectTrigger__oTOBl[aria-expanded=true]:before{display:none}.Select_selectTrigger__oTOBl.Select_darker__wwisI{background-color:var(--muted)}.Select_selectTrigger__oTOBl:hover{box-shadow:0 0 0 2px var(--background)}.Select_selectTrigger__oTOBl[data-size=md]{height:1.75rem}.Select_selectTrigger__oTOBl[data-size=sm]{font-size:var(--text-xs);height:1.75rem}.Select_selectTrigger__oTOBl[data-size=lg]{font-size:var(--text-sm);height:2.25rem}.Select_selectTrigger__oTOBl[data-placeholder]{color:var(--muted-foreground)}.Select_selectTrigger__oTOBl:focus-visible{border-color:var(--ring)}.Select_selectTrigger__oTOBl[aria-invalid=true]{border-color:var(--destructive)}.Select_selectTrigger__oTOBl:disabled{cursor:not-allowed;opacity:.5}.Select_selectTrigger__oTOBl [data-slot=select-value]{align-items:center;display:flex;gap:var(--p-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Select_selectTrigger__oTOBl svg{flex-shrink:0;pointer-events:none}.Select_selectTrigger__oTOBl svg:not([class*=text-]){color:var(--foreground)}.Select_selectTrigger__oTOBl svg:not([class*=size-]){height:1rem;width:1rem}.dark .Select_selectTrigger__oTOBl:not(.Select_darker__wwisI){background-color:var(--background)}.dark .Select_selectTrigger__oTOBl:not(.Select_darker__wwisI):hover{background-color:var(--background-alpha-800)}.Select_clear__vxo-N{background-color:transparent;border:none;box-shadow:none;padding:0}.Select_clear__vxo-N:focus-visible{border:none;box-shadow:none}@media (prefers-color-scheme:dark){.Select_clear__vxo-N,.Select_clear__vxo-N:hover{background-color:transparent}}.Select_selectContent__Wbegi{background-color:var(--popover);border:1px solid var(--border);border-radius:var(--p-4);box-shadow:0 10px 15px -3px rgba(0,0,0,.1);color:var(--popover-foreground);max-height:var(--radix-select-content-available-height);min-width:8rem;overflow-x:hidden;overflow-y:auto;position:relative;transform-origin:var(--radix-select-content-transform-origin);z-index:1100}.Select_selectContent__Wbegi[data-state=open]{animation:Select_fadeIn__hm7v- .25s,Select_zoomIn__ep77v .1s}.Select_selectContent__Wbegi[data-state=closed]{animation:Select_fadeOut__A-ccN .25s,Select_zoomOut__pZ-7e .1s}.Select_selectContent__Wbegi[data-side=bottom]{animation:Select_fadeIn__hm7v- .25s,Select_slideInFromTop__O1LeF .1s}.Select_selectContent__Wbegi[data-side=left]{animation:Select_fadeIn__hm7v- .25s,Select_slideInFromRight__iJq-J .1s}.Select_selectContent__Wbegi[data-side=right]{animation:Select_fadeIn__hm7v- .25s,Select_slideInFromLeft__8tm7S .1s}.Select_selectContent__Wbegi[data-side=top]{animation:Select_fadeIn__hm7v- .25s,Select_slideInFromBottom__PsvX6 .1s}.Select_selectContentPopper__TU8Jn[data-side=bottom]{transform:translateY(.25rem)}.Select_selectContentPopper__TU8Jn[data-side=left]{transform:translateX(-.25rem)}.Select_selectContentPopper__TU8Jn[data-side=right]{transform:translateX(.25rem)}.Select_selectContentPopper__TU8Jn[data-side=top]{transform:translateY(-.25rem)}.Select_selectViewport__OtOW7{padding:var(--p-1)}.Select_selectViewportPopper__dUoFi{height:var(--radix-select-trigger-height);min-width:var(--radix-select-trigger-width);scroll-margin:var(--p-1) 0;width:100%}.Select_selectLabel__rX9cj{color:var(--muted-foreground);font-size:var(--text-xs);padding:var(--p-2) var(--p-2);padding-bottom:var(--p-2);padding-top:var(--p-2)}.Select_selectItem__JLg4D{align-items:center;border-radius:var(--radius-sm);cursor:default;display:flex;flex-grow:1;font-size:var(--text-sm);gap:var(--p-2);outline:none;padding:var(--p-1) var(--p-2);position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.Select_selectItem__JLg4D.Select_selected__tmqut{background-color:var(--accent);font-weight:600}.Select_selectItem__JLg4D:first-child{border-top-left-radius:var(--p-3);border-top-right-radius:var(--p-3)}.Select_selectItem__JLg4D:last-child{border-bottom-left-radius:var(--p-3);border-bottom-right-radius:var(--p-3)}.Select_selectItem__JLg4D:focus{background-color:var(--accent);color:var(--accent-foreground)}.Select_selectItem__JLg4D[data-disabled]{opacity:.5;pointer-events:none}.Select_selectItem__JLg4D svg{flex-shrink:0;pointer-events:none}.Select_selectItem__JLg4D svg:not([class*=text-]){color:var(--muted-foreground)}.Select_selectItem__JLg4D svg:not([class*=size-]){height:1rem;width:1rem}.Select_selectItem__JLg4D span:not([data-slot=analysis-icon]){display:flex;flex-grow:1;width:100%}.Select_selectItem__JLg4D span:last-child{align-items:center;display:flex;gap:var(--p-2)}.Select_selectItemText__9JXv9{align-items:center;display:flex;gap:var(--p-1)}.Select_selectItemIndicatorContainer__Vte2-{align-items:center;display:flex;height:var(--p-8);justify-content:center;position:absolute;right:0;width:var(--p-8)}.Select_selectItemIndicator__9HcxQ{height:1rem;width:1rem}.Select_selectSeparator__OZw53{background-color:var(--border);height:1px;margin:-.25rem var(--p-1) var(--p-1);pointer-events:none}.Select_selectScrollButton__-z-iR{align-items:center;cursor:default;display:flex;justify-content:center;padding:var(--p-1) 0}.Select_selectIcon__-TfP9{height:1rem;margin-right:calc(var(--p-1)*-1);opacity:.5;width:1rem}.Select_selectScrollIcon__ZyTUI{height:1rem;width:1rem}@keyframes Select_fadeIn__hm7v-{0%{opacity:0}to{opacity:1}}@keyframes Select_fadeOut__A-ccN{0%{opacity:1}to{opacity:0}}@keyframes Select_zoomIn__ep77v{0%{transform:scale(.95)}to{transform:scale(1)}}@keyframes Select_zoomOut__pZ-7e{0%{transform:scale(1)}to{transform:scale(.95)}}@keyframes Select_slideInFromTop__O1LeF{0%{transform:translateY(-.5rem)}to{transform:translateY(.2)}}@keyframes Select_slideInFromBottom__PsvX6{0%{transform:translateY(.5rem)}to{transform:translateY(.2)}}@keyframes Select_slideInFromLeft__8tm7S{0%{transform:translateX(-.5rem)}to{transform:translateX(.2)}}@keyframes Select_slideInFromRight__iJq-J{0%{transform:translateX(.5rem)}to{transform:translateY(.2)}}";
 var S = {"selectTrigger":"Select_selectTrigger__oTOBl","darker":"Select_darker__wwisI","clear":"Select_clear__vxo-N","selectContent":"Select_selectContent__Wbegi","fadeIn":"Select_fadeIn__hm7v-","zoomIn":"Select_zoomIn__ep77v","fadeOut":"Select_fadeOut__A-ccN","zoomOut":"Select_zoomOut__pZ-7e","slideInFromTop":"Select_slideInFromTop__O1LeF","slideInFromRight":"Select_slideInFromRight__iJq-J","slideInFromLeft":"Select_slideInFromLeft__8tm7S","slideInFromBottom":"Select_slideInFromBottom__PsvX6","selectContentPopper":"Select_selectContentPopper__TU8Jn","selectViewport":"Select_selectViewport__OtOW7","selectViewportPopper":"Select_selectViewportPopper__dUoFi","selectLabel":"Select_selectLabel__rX9cj","selectItem":"Select_selectItem__JLg4D","selected":"Select_selected__tmqut","selectItemText":"Select_selectItemText__9JXv9","selectItemIndicatorContainer":"Select_selectItemIndicatorContainer__Vte2-","selectItemIndicator":"Select_selectItemIndicator__9HcxQ","selectSeparator":"Select_selectSeparator__OZw53","selectScrollButton":"Select_selectScrollButton__-z-iR","selectIcon":"Select_selectIcon__-TfP9","selectScrollIcon":"Select_selectScrollIcon__ZyTUI"};
 styleInject(css_248z);
 

package/dist/esm/components/ui/Tabs/Tabs.styl.js

@@ -1,7 +1,7 @@
 import styleInject from 'style-inject';
 
-var css_248z = ".Tabs_root__cB9Au{display:flex;flex-direction:column;gap:.5rem}.Tabs_list__9Hs22{align-items:center;color:var(--muted-foreground);display:inline-flex;height:48px;justify-content:center;width:-moz-fit-content;width:fit-content}.Tabs_list__9Hs22.Tabs_fullWidth__Lj2Dd{width:100%}.Tabs_variant-link__xOMDg>.Tabs_list__9Hs22{background-color:transparent!important}.Tabs_variant-button__wtc8k .Tabs_list__9Hs22{border-radius:1.5rem;box-shadow:none;gap:.25rem;height:auto}.Tabs_trigger__uzdqH{align-items:center;border:1px solid transparent;border-radius:.375rem;color:var(--muted-foreground);cursor:pointer;display:inline-flex;flex:1;font-size:var(--text-sm);font-weight:500;gap:.375rem;height:calc(100% - 1px);justify-content:center;padding:.25rem .5rem;transition:color .2s,box-shadow .2s;white-space:nowrap}.Tabs_trigger__uzdqH:focus-visible{border-color:var(--ring);box-shadow:0 0 0 3px var(--ring-50);outline:1px solid var(--ring);outline-offset:0}.Tabs_trigger__uzdqH:disabled{opacity:.5;pointer-events:none}.Tabs_trigger__uzdqH[data-state=active]{background-color:var(--background);box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}.Tabs_trigger__uzdqH:hover,.Tabs_trigger__uzdqH[data-state=active]{color:var(--foreground)!important}.Tabs_darker__l-R0I .Tabs_trigger__uzdqH{background-color:var(--muted)}.Tabs_variant-button__wtc8k .Tabs_list__9Hs22 .Tabs_trigger__uzdqH{border:none;border-radius:var(--p-4);box-shadow:none;color:var(--muted-foreground);flex-shrink:0;font-weight:600;padding:var(--p-1) var(--p-3);transition:all .15s ease-in-out}.Tabs_variant-button__wtc8k .Tabs_list__9Hs22 .Tabs_trigger__uzdqH[data-state=active]{border-radius:var(--p-6);box-shadow:0 1px 2px 0 rgba(0,0,0,.05);color:var(--foreground)}.Tabs_variant-link__xOMDg>.Tabs_list__9Hs22 .Tabs_trigger__uzdqH{background-color:transparent!important;border:0!important;border-radius:0!important;box-shadow:0!important;font-size:16px;padding:12px 16px}.Tabs_variant-link__xOMDg>.Tabs_list__9Hs22 .Tabs_trigger__uzdqH[data-state=active]{box-shadow:inset 0 -3px 0 -1px var(--sb-cyan-400)!important}.Tabs_trigger__uzdqH svg{flex-shrink:0;pointer-events:none}.Tabs_trigger__uzdqH svg:not([class*=size-]){height:1rem;width:1rem}.dark .Tabs_trigger__uzdqH{color:var(--muted-foreground)}.dark .Tabs_trigger__uzdqH[data-state=active]{background-color:var(--input-30);border-color:var(--input);color:var(--foreground)}.Tabs_content__K27Vl{flex:1;outline:none}.Tabs_root__cB9Au.Tabs_variant-button__wtc8k.Tabs_sizeSm__gfpc6 .Tabs_list__9Hs22 .Tabs_trigger__uzdqH{font-size:var(--text-xs);padding:var(--p-1) var(--p-2)}.Tabs_root__cB9Au.Tabs_variant-button__wtc8k.Tabs_sizeSm__gfpc6 .Tabs_list__9Hs22 .Tabs_trigger__uzdqH[data-state=active]{border-radius:var(--p-4)}.Tabs_root__cB9Au.Tabs_variant-button__wtc8k.Tabs_sizeLg__CcRFZ .Tabs_list__9Hs22 .Tabs_trigger__uzdqH{font-size:var(--text-base);padding:var(--p-2) var(--p-4)}.Tabs_root__cB9Au.Tabs_variant-button__wtc8k.Tabs_sizeLg__CcRFZ .Tabs_list__9Hs22 .Tabs_trigger__uzdqH[data-state=active]{border-radius:var(--p-8)}.Tabs_root__cB9Au.Tabs_variant-link__xOMDg.Tabs_sizeSm__gfpc6>.Tabs_list__9Hs22{height:auto;min-height:36px}.Tabs_root__cB9Au.Tabs_variant-link__xOMDg.Tabs_sizeSm__gfpc6>.Tabs_list__9Hs22 .Tabs_trigger__uzdqH{font-size:14px;padding:8px 12px}.Tabs_root__cB9Au.Tabs_variant-link__xOMDg.Tabs_sizeLg__CcRFZ>.Tabs_list__9Hs22{height:auto;min-height:56px}.Tabs_root__cB9Au.Tabs_variant-link__xOMDg.Tabs_sizeLg__CcRFZ>.Tabs_list__9Hs22 .Tabs_trigger__uzdqH{font-size:18px;padding:16px 24px}";
-var S = {"root":"Tabs_root__cB9Au","list":"Tabs_list__9Hs22","fullWidth":"Tabs_fullWidth__Lj2Dd","variant-link":"Tabs_variant-link__xOMDg","variant-button":"Tabs_variant-button__wtc8k","trigger":"Tabs_trigger__uzdqH","darker":"Tabs_darker__l-R0I","content":"Tabs_content__K27Vl","sizeSm":"Tabs_sizeSm__gfpc6","sizeLg":"Tabs_sizeLg__CcRFZ"};
+var css_248z = ".Tabs_root__cB9Au{display:flex;flex-direction:column;gap:.5rem}.Tabs_list__9Hs22{align-items:center;color:var(--muted-foreground);display:inline-flex;height:48px;justify-content:center;width:-moz-fit-content;width:fit-content}.Tabs_list__9Hs22.Tabs_fullWidth__Lj2Dd{width:100%}.Tabs_variant-link__xOMDg>.Tabs_list__9Hs22{background-color:transparent!important}.Tabs_variant-button__wtc8k .Tabs_list__9Hs22,.Tabs_variant-outline__2CJJg .Tabs_list__9Hs22{border-radius:1.5rem;box-shadow:none;gap:.25rem;height:auto}.Tabs_variant-outline__2CJJg .Tabs_list__9Hs22{background-color:transparent!important;gap:var(--p-2)}.Tabs_trigger__uzdqH{align-items:center;border:1px solid transparent;border-radius:.375rem;color:var(--muted-foreground);cursor:pointer;display:inline-flex;flex:1;font-size:var(--text-sm);font-weight:500;gap:.375rem;height:calc(100% - 1px);justify-content:center;padding:.25rem .5rem;transition:color .2s,box-shadow .2s;white-space:nowrap}.Tabs_trigger__uzdqH:focus-visible{border-color:var(--ring);box-shadow:0 0 0 3px var(--ring-50);outline:1px solid var(--ring);outline-offset:0}.Tabs_trigger__uzdqH:disabled{opacity:.5;pointer-events:none}.Tabs_trigger__uzdqH[data-state=active]{background-color:var(--background);box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}.Tabs_trigger__uzdqH:hover,.Tabs_trigger__uzdqH[data-state=active]{color:var(--foreground)!important}.Tabs_darker__l-R0I .Tabs_trigger__uzdqH{background-color:var(--muted)}.Tabs_variant-button__wtc8k .Tabs_list__9Hs22 .Tabs_trigger__uzdqH{border:none;border-radius:var(--p-4);box-shadow:none;color:var(--muted-foreground);flex-shrink:0;font-weight:600;padding:var(--p-1) var(--p-3);transition:all .15s ease-in-out}.Tabs_variant-button__wtc8k .Tabs_list__9Hs22 .Tabs_trigger__uzdqH[data-state=active]{border-radius:var(--p-6);box-shadow:0 1px 2px 0 rgba(0,0,0,.05);color:var(--foreground)}.Tabs_variant-outline__2CJJg .Tabs_list__9Hs22 .Tabs_trigger__uzdqH{background-color:var(--background);border-radius:var(--p-6);color:var(--muted-foreground);flex-shrink:0;font-weight:600;padding:var(--p-1) var(--p-4);transition:box-shadow .15s ease-in-out,color .15s ease-in-out}.Tabs_variant-outline__2CJJg .Tabs_list__9Hs22 .Tabs_trigger__uzdqH:hover{color:var(--foreground)}.Tabs_variant-outline__2CJJg .Tabs_list__9Hs22 .Tabs_trigger__uzdqH[data-state=active]{background-color:var(--background);box-shadow:inset 0 0 0 2px var(--selected-tab-outline-color,var(--brand-color-400));color:var(--foreground)}.Tabs_variant-link__xOMDg>.Tabs_list__9Hs22 .Tabs_trigger__uzdqH{background-color:transparent!important;border:0!important;border-radius:0!important;box-shadow:0!important;font-size:16px;padding:12px 16px}.Tabs_variant-link__xOMDg>.Tabs_list__9Hs22 .Tabs_trigger__uzdqH[data-state=active]{box-shadow:inset 0 -3px 0 -1px var(--selected-tab-outline-color,var(--brand-color-400))!important}.Tabs_trigger__uzdqH svg{flex-shrink:0;pointer-events:none}.Tabs_trigger__uzdqH svg:not([class*=size-]){height:1rem;width:1rem}.dark .Tabs_trigger__uzdqH{color:var(--muted-foreground)}.dark .Tabs_trigger__uzdqH[data-state=active]{background-color:var(--input-30);border-color:var(--input);color:var(--foreground)}.dark .Tabs_variant-outline__2CJJg .Tabs_list__9Hs22 .Tabs_trigger__uzdqH[data-state=active]{background-color:var(--background);box-shadow:inset 0 0 0 2px var(--selected-tab-outline-color,var(--brand-color-400));color:var(--foreground)}.Tabs_content__K27Vl{flex:1;outline:none}.Tabs_root__cB9Au.Tabs_variant-button__wtc8k.Tabs_sizeSm__gfpc6 .Tabs_list__9Hs22 .Tabs_trigger__uzdqH{font-size:var(--text-xs);padding:var(--p-1) var(--p-2)}.Tabs_root__cB9Au.Tabs_variant-button__wtc8k.Tabs_sizeSm__gfpc6 .Tabs_list__9Hs22 .Tabs_trigger__uzdqH[data-state=active]{border-radius:var(--p-4)}.Tabs_root__cB9Au.Tabs_variant-button__wtc8k.Tabs_sizeLg__CcRFZ .Tabs_list__9Hs22 .Tabs_trigger__uzdqH{font-size:var(--text-base);padding:var(--p-2) var(--p-4)}.Tabs_root__cB9Au.Tabs_variant-button__wtc8k.Tabs_sizeLg__CcRFZ .Tabs_list__9Hs22 .Tabs_trigger__uzdqH[data-state=active]{border-radius:var(--p-8)}.Tabs_root__cB9Au.Tabs_variant-outline__2CJJg.Tabs_sizeSm__gfpc6 .Tabs_list__9Hs22 .Tabs_trigger__uzdqH{border-radius:var(--p-4);font-size:var(--text-xs);padding:var(--p-1) var(--p-3)}.Tabs_root__cB9Au.Tabs_variant-outline__2CJJg.Tabs_sizeSm__gfpc6 .Tabs_list__9Hs22 .Tabs_trigger__uzdqH[data-state=active]{border-radius:var(--p-4)}.Tabs_root__cB9Au.Tabs_variant-outline__2CJJg.Tabs_sizeLg__CcRFZ .Tabs_list__9Hs22 .Tabs_trigger__uzdqH{border-radius:var(--p-8);font-size:var(--text-base);padding:var(--p-2) var(--p-5)}.Tabs_root__cB9Au.Tabs_variant-outline__2CJJg.Tabs_sizeLg__CcRFZ .Tabs_list__9Hs22 .Tabs_trigger__uzdqH[data-state=active]{border-radius:var(--p-8)}.Tabs_root__cB9Au.Tabs_variant-link__xOMDg.Tabs_sizeSm__gfpc6>.Tabs_list__9Hs22{height:auto;min-height:36px}.Tabs_root__cB9Au.Tabs_variant-link__xOMDg.Tabs_sizeSm__gfpc6>.Tabs_list__9Hs22 .Tabs_trigger__uzdqH{font-size:14px;padding:8px 12px}.Tabs_root__cB9Au.Tabs_variant-link__xOMDg.Tabs_sizeLg__CcRFZ>.Tabs_list__9Hs22{height:auto;min-height:56px}.Tabs_root__cB9Au.Tabs_variant-link__xOMDg.Tabs_sizeLg__CcRFZ>.Tabs_list__9Hs22 .Tabs_trigger__uzdqH{font-size:18px;padding:16px 24px}";
+var S = {"root":"Tabs_root__cB9Au","list":"Tabs_list__9Hs22","fullWidth":"Tabs_fullWidth__Lj2Dd","variant-link":"Tabs_variant-link__xOMDg","variant-button":"Tabs_variant-button__wtc8k","variant-outline":"Tabs_variant-outline__2CJJg","trigger":"Tabs_trigger__uzdqH","darker":"Tabs_darker__l-R0I","content":"Tabs_content__K27Vl","sizeSm":"Tabs_sizeSm__gfpc6","sizeLg":"Tabs_sizeLg__CcRFZ"};
 styleInject(css_248z);
 
 export { S as default };

package/dist/esm/types/src/components/ui/Page/PageTabs/PageTabs.d.ts

@@ -1,14 +1,18 @@
-import { TabsListProps, TabsProps } from '#uilib/components/ui/Tabs';
-export declare function PageTabs({ className, contentClassName, innerClassName, scrollbarClassName, items, tabsListProps, ...props }: {
-    items: {
-        value: string;
-        label: string;
-        content?: React.ReactNode;
-    }[];
+import { TabsListProps, TabsProps, type TabsVariant } from '#uilib/components/ui/Tabs';
+export type PageTabsItem = {
+    value: string;
+    label: React.ReactNode;
+    content?: React.ReactNode;
+    /** React list key when multiple items may share `value`. */
+    key?: string;
+};
+export declare function PageTabs({ className, contentClassName, innerClassName, scrollbarClassName, items, tabsListProps, variant, ...props }: {
+    items: PageTabsItem[];
     tabsListProps?: TabsListProps & {
         fullWidth?: boolean;
         withPaddings?: boolean;
     };
+    variant?: TabsVariant;
 } & TabsProps & {
     contentClassName?: string;
     innerClassName?: string;

package/dist/esm/types/src/components/ui/Page/index.d.ts

@@ -7,7 +7,7 @@ export { PageXScroll } from './PageXScroll/PageXScroll';
 export { Breadcrumbs } from './Breadcrumbs/Breadcrumbs';
 export { PageFooter } from './PageFooter/PageFooter';
 export type { PageFooterLinkItem, PageFooterProps, } from './PageFooter/PageFooter';
-export { PageTabs } from './PageTabs/PageTabs';
+export { PageTabs, type PageTabsItem } from './PageTabs/PageTabs';
 export { PageColumns } from './PageColumns/PageColumns';
 export { SectionHeader } from './SectionHeader';
 export type { SectionHeaderProps } from './SectionHeader';

package/dist/esm/types/src/components/ui/Tabs/Tabs.d.ts

@@ -1,6 +1,6 @@
-import { TabsContentProps, TabsListProps, TabsProps, TabsTriggerProps } from './Tabs.types';
+import { TabsContentProps, TabsListProps, TabsProps, TabsTriggerProps, TabsVariant } from './Tabs.types';
 declare function Tabs({ className, variant, size, darker, ...props }: TabsProps & {
-    variant?: 'button' | 'link';
+    variant?: TabsVariant;
     size?: 'sm' | 'md' | 'lg';
     darker?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/ui/Tabs/Tabs.types.d.ts

@@ -1,5 +1,6 @@
 import { ComponentProps } from 'react';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
+export type TabsVariant = 'button' | 'link' | 'outline';
 export type TabsProps = ComponentProps<typeof TabsPrimitive.Root>;
 export type TabsListProps = ComponentProps<typeof TabsPrimitive.List>;
 export type TabsTriggerProps = ComponentProps<typeof TabsPrimitive.Trigger>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.3.48",
+  "version": "1.3.50",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",

package/src/components/ui/AnalysesSelector/AnalysesSelector.styl

@@ -36,12 +36,38 @@
 .icon
   width 16px
   height 16px
+  max-width 16px
+  max-height 16px
   flex-shrink 0
+  overflow hidden
+
+.iconImage
+  display block
+  object-fit contain
+
+.iconWrapper
   position relative
   display flex
   align-items center
   justify-content center
 
+  > img
+    width 100%
+    height 100%
+    max-width 100%
+    max-height 100%
+    object-fit contain
+
+// Restore icon sizing in portal dropdown (large source assets e.g. Expert.png)
+:global([data-slot="select-item"] [data-slot="analysis-icon"])
+  width 16px !important
+  height 16px !important
+  max-width 16px !important
+  max-height 16px !important
+  flex-shrink 0
+  overflow hidden
+  object-fit contain
+
 .label
   flex-grow 1
   font-size var(--text-xs)

package/src/components/ui/AnalysesSelector/AnalysesSelector.styl.d.ts

@@ -5,6 +5,8 @@ interface CssExports {
   'disabled': string;
   'historical': string;
   'icon': string;
+  'iconImage': string;
+  'iconWrapper': string;
   'item': string;
   'itemLabelWithId': string;
   'label': string;

package/src/components/ui/AnalysesSelector/AnalysesSelector.tsx

@@ -54,9 +54,22 @@ function renderItemContent(item: AnalysesSelectorItem) {
 function renderIcon(icon: AnalysesSelectorItem['icon']) {
   if (!icon) return null;
   if (typeof icon === 'string') {
-    return <img src={icon} alt="" className={S.icon} />;
+    return (
+      <img
+        src={icon}
+        alt=""
+        width={16}
+        height={16}
+        data-slot="analysis-icon"
+        className={cn(S.icon, S.iconImage)}
+      />
+    );
   }
-  return <span className={S.icon}>{icon}</span>;
+  return (
+    <span data-slot="analysis-icon" className={cn(S.icon, S.iconWrapper)}>
+      {icon}
+    </span>
+  );
 }
 
 export function AnalysesSelector({

package/src/components/ui/Page/PageTabs/PageTabs.tsx

@@ -8,6 +8,7 @@ import {
   TabsListProps,
   TabsProps,
   TabsTrigger,
+  type TabsVariant,
 } from '#uilib/components/ui/Tabs';
 
 import S from './PageTabs.styl';
@@ -20,6 +21,14 @@ function hasTabPanelContent(content: React.ReactNode | undefined): boolean {
   return true;
 }
 
+export type PageTabsItem = {
+  value: string;
+  label: React.ReactNode;
+  content?: React.ReactNode;
+  /** React list key when multiple items may share `value`. */
+  key?: string;
+};
+
 export function PageTabs({
   className,
   contentClassName,
@@ -27,20 +36,22 @@ export function PageTabs({
   scrollbarClassName,
   items,
   tabsListProps,
+  variant = 'link',
   ...props
 }: {
-  items: { value: string; label: string; content?: React.ReactNode }[];
+  items: PageTabsItem[];
   tabsListProps?: TabsListProps & {
     fullWidth?: boolean;
     withPaddings?: boolean;
   };
+  variant?: TabsVariant;
 } & TabsProps & {
     contentClassName?: string;
     innerClassName?: string;
     scrollbarClassName?: string;
   }) {
   return (
-    <Tabs className={cn(S.root, className)} variant="link" {...props}>
+    <Tabs className={cn(S.root, className)} variant={variant} {...props}>
       <TabsList
         {...tabsListProps}
         className={cn(S.list, tabsListProps?.withPaddings && S.withPaddings)}
@@ -50,8 +61,11 @@ export function PageTabs({
           scrollbarClassName={cn(S.scrollbar, scrollbarClassName)}
           innerClassName={innerClassName}
         >
-          {items.map(item => (
-            <TabsTrigger value={item.value} key={item.value}>
+          {items.map((item, index) => (
+            <TabsTrigger
+              value={item.value}
+              key={item.key ?? `${item.value}-${index}`}
+            >
               {item.label}
             </TabsTrigger>
           ))}

package/src/components/ui/Page/index.ts

@@ -15,7 +15,7 @@ export type {
   PageFooterLinkItem,
   PageFooterProps,
 } from './PageFooter/PageFooter';
-export { PageTabs } from './PageTabs/PageTabs';
+export { PageTabs, type PageTabsItem } from './PageTabs/PageTabs';
 export { PageColumns } from './PageColumns/PageColumns';
 export { SectionHeader } from './SectionHeader';
 export type { SectionHeaderProps } from './SectionHeader';

package/src/components/ui/Select/Select.styl

@@ -220,7 +220,7 @@
       width 1rem
       height 1rem
 
-  span
+  span:not([data-slot='analysis-icon'])
     display flex
     width 100%
     flex-grow 1

package/src/components/ui/Tabs/Tabs.styl

@@ -19,6 +19,7 @@
     background-color transparent !important
 
   .variant-button &
+  .variant-outline &
     // background-color var(--muted-50)
     border-radius 1.5rem // 24px
     // padding 0.25rem // 4px
@@ -26,6 +27,10 @@
     box-shadow none
     height auto
 
+  .variant-outline &
+    gap var(--p-2)
+    background-color transparent !important
+
 .trigger
   display inline-flex
   flex 1
@@ -83,6 +88,23 @@
       color var(--foreground)
       box-shadow 0 1px 2px 0 rgba(0, 0, 0, 0.05)
 
+  .variant-outline .list &
+    flex-shrink 0
+    background-color var(--background)
+    padding var(--p-1) var(--p-4)
+    border-radius var(--p-6)
+    transition box-shadow 0.15s ease-in-out, color 0.15s ease-in-out
+    font-weight 600
+    color var(--muted-foreground)
+
+    &:hover
+      color var(--foreground)
+
+    &[data-state="active"]
+      box-shadow inset 0 0 0 2px var(--selected-tab-outline-color, var(--brand-color-400))
+      background-color var(--background)
+      color var(--foreground)
+
   .variant-link > .list &
     background-color transparent !important
     border 0 !important
@@ -92,7 +114,7 @@
     font-size 16px
 
     &[data-state="active"]
-      box-shadow inset 0 -3px 0 -1px var(--sb-cyan-400) !important
+      box-shadow inset 0 -3px 0 -1px var(--selected-tab-outline-color, var(--brand-color-400)) !important
 
 
   & svg
@@ -111,6 +133,12 @@
       border-color var(--input)
       color var(--foreground)
 
+  :global(.dark) .variant-outline .list &
+    &[data-state="active"]
+      background-color var(--background)
+      box-shadow inset 0 0 0 2px var(--selected-tab-outline-color, var(--brand-color-400))
+      color var(--foreground)
+
 .content
   flex 1
   outline none
@@ -134,6 +162,25 @@
         &[data-state="active"]
           border-radius var(--p-8)
 
+  &.variant-outline
+    &.sizeSm
+      .list .trigger
+        padding var(--p-1) var(--p-3)
+        font-size var(--text-xs)
+        border-radius var(--p-4)
+
+        &[data-state="active"]
+          border-radius var(--p-4)
+
+    &.sizeLg
+      .list .trigger
+        padding var(--p-2) var(--p-5)
+        font-size var(--text-base)
+        border-radius var(--p-8)
+
+        &[data-state="active"]
+          border-radius var(--p-8)
+
   &.variant-link
     &.sizeSm
       > .list

package/src/components/ui/Tabs/Tabs.styl.d.ts

@@ -11,6 +11,7 @@ interface CssExports {
   'trigger': string;
   'variant-button': string;
   'variant-link': string;
+  'variant-outline': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

package/src/components/ui/Tabs/Tabs.tsx

@@ -8,6 +8,7 @@ import {
   TabsListProps,
   TabsProps,
   TabsTriggerProps,
+  TabsVariant,
 } from './Tabs.types';
 
 function Tabs({
@@ -17,7 +18,7 @@ function Tabs({
   darker = false,
   ...props
 }: TabsProps & {
-  variant?: 'button' | 'link';
+  variant?: TabsVariant;
   size?: 'sm' | 'md' | 'lg';
   darker?: boolean;
 }) {

package/src/components/ui/Tabs/Tabs.types.ts

@@ -2,6 +2,8 @@ import { ComponentProps } from 'react';
 
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 
+export type TabsVariant = 'button' | 'link' | 'outline';
+
 export type TabsProps = ComponentProps<typeof TabsPrimitive.Root>;
 export type TabsListProps = ComponentProps<typeof TabsPrimitive.List>;
 export type TabsTriggerProps = ComponentProps<typeof TabsPrimitive.Trigger>;

package/src/docs/pages/PageTabsPage.tsx

@@ -3,6 +3,13 @@ import { PageContentSection, PageTabs } from '#uilib/components/ui/Page';
 import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
 import { DocsHeaderActions } from '../docsHeaderActions';
 
+const OUTLINE_ITEMS = [
+  { value: 'outline-1', label: 'Crude Oil ↘ 15%' },
+  { value: 'outline-2', label: 'Consumer Staples ↘ 12%' },
+  { value: 'outline-3', label: 'Energy ↘ 8%' },
+  { value: 'outline-4', label: 'Metals ↘ 10%' },
+];
+
 const SCROLL_TEST_ITEMS = Array.from({ length: 10 }, (_, i) => {
   const n = i + 1;
   return {
@@ -54,6 +61,33 @@ export default function PageTabsPage() {
             />
           </div>
         </section>
+
+        <section>
+          <h3 style={{ marginBottom: '0.75rem' }}>Outline variant</h3>
+          <p
+            style={{
+              marginBottom: '1rem',
+              color: 'var(--muted-foreground)',
+            }}
+          >
+            <code>variant=&quot;outline&quot;</code> with horizontal scroll on a
+            muted surface.
+          </p>
+          <div
+            style={{
+              maxWidth: 500,
+              padding: '0.5rem 0',
+              borderRadius: 'var(--p-3)',
+              backgroundColor: 'var(--muted)',
+            }}
+          >
+            <PageTabs
+              variant="outline"
+              defaultValue={OUTLINE_ITEMS[0].value}
+              items={OUTLINE_ITEMS}
+            />
+          </div>
+        </section>
       </PageContentSection>
     </>
   );

package/src/docs/pages/TabsPage.tsx

@@ -1,22 +1,57 @@
+import type { CSSProperties } from 'react';
+
 import { PageContentSection } from '#uilib/components/ui/Page';
 import {
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
+  type TabsVariant,
 } from '#uilib/components/ui/Tabs';
 
 import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
 import { DocsHeaderActions } from '../docsHeaderActions';
 
-const VARIANTS = ['button', 'link'] as const;
+const VARIANTS: TabsVariant[] = ['button', 'link', 'outline'];
 const SIZES = ['sm', 'md', 'lg'] as const;
 
+const OUTLINE_DEMO_TABS = [
+  { value: 'crude-oil', label: 'Crude Oil', pct: 15 },
+  { value: 'consumer-staples', label: 'Consumer Staples Euro', pct: 15 },
+  { value: 'energy', label: 'Energy', pct: 8 },
+  { value: 'metals', label: 'Metals', pct: 12 },
+  { value: 'agriculture', label: 'Agriculture', pct: 5 },
+] as const;
+
+function OutlineTabLabel({ label, pct }: { label: string; pct: number }) {
+  return (
+    <span
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 'var(--p-2)',
+      }}
+    >
+      <span>{label}</span>
+      <span
+        style={{
+          color: 'var(--destructive)',
+          fontSize: 'var(--text-xs)',
+          fontWeight: 600,
+          fontVariantNumeric: 'tabular-nums',
+        }}
+      >
+        ↘ {pct}%
+      </span>
+    </span>
+  );
+}
+
 function TabsDemoCell({
   variant,
   size,
 }: {
-  variant: (typeof VARIANTS)[number];
+  variant: TabsVariant;
   size: (typeof SIZES)[number];
 }) {
   const id = `${variant}-${size}`;
@@ -92,6 +127,55 @@ export default function TabsPage() {
           </div>
         </section>
 
+        <section>
+          <h3 style={{ marginBottom: '1rem' }}>Outline</h3>
+          <p
+            style={{
+              marginBottom: '0.75rem',
+              color: 'var(--muted-foreground)',
+            }}
+          >
+            White pill triggers; active tab uses a border via{' '}
+            <code>--selected-tab-outline-color</code> (defaults to{' '}
+            <code>--sb-cyan-400</code>).
+          </p>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: '1.5rem',
+              padding: '1rem',
+              borderRadius: 'var(--p-3)',
+              backgroundColor: 'var(--muted)',
+            }}
+          >
+            <Tabs variant="outline" defaultValue={OUTLINE_DEMO_TABS[0].value}>
+              <TabsList>
+                {OUTLINE_DEMO_TABS.map(tab => (
+                  <TabsTrigger key={tab.value} value={tab.value}>
+                    <OutlineTabLabel label={tab.label} pct={tab.pct} />
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+            </Tabs>
+
+            <Tabs
+              variant="outline"
+              defaultValue="custom-a"
+              style={
+                {
+                  '--selected-tab-outline-color': 'oklch(0.55 0.2 250)',
+                } as CSSProperties
+              }
+            >
+              <TabsList>
+                <TabsTrigger value="custom-a">Custom outline</TabsTrigger>
+                <TabsTrigger value="custom-b">Second tab</TabsTrigger>
+              </TabsList>
+            </Tabs>
+          </div>
+        </section>
+
         <section>
           <h3 style={{ marginBottom: '1rem' }}>Darker</h3>
           <p