@webority/ui-react 0.102.3 → 0.103.0

package/dist/canvas-kit/manifest.json

@@ -2,7 +2,7 @@
   "kind": "WeborityWeb",
   "library": {
     "name": "@webority/ui-react",
-    "version": "0.102.3"
+    "version": "0.103.0"
   },
   "rendererProtocolVersion": 12,
   "platform": "Web",
@@ -170,6 +170,17 @@
           "description": "A destructive tint.",
           "default": false
         },
+        {
+          "name": "density",
+          "type": "enum",
+          "enum": [
+            "comfortable",
+            "compact"
+          ],
+          "required": false,
+          "description": "How much room surrounds the glyph: comfortable keeps an 8px ring, compact 4px (a 16px glyph in a 24px disc).",
+          "default": "comfortable"
+        },
         {
           "name": "disabled",
           "type": "boolean",
@@ -216,6 +227,13 @@
           "description": "Allows several files. File mode only.",
           "default": false
         },
+        {
+          "name": "neutral",
+          "type": "boolean",
+          "required": false,
+          "description": "Muted ink with a muted surface on hover, for an action on a card or a quiet surface. Not with danger.",
+          "default": false
+        },
         {
           "name": "shortcut",
           "type": "string",
@@ -4167,6 +4185,17 @@
           "type": "string",
           "required": false,
           "description": "The value this chip submits when selected."
+        },
+        {
+          "name": "variant",
+          "type": "enum",
+          "enum": [
+            "soft",
+            "solid"
+          ],
+          "required": false,
+          "description": "Checked look: a soft primary tint (soft) or a primary fill with a translucent count (solid).",
+          "default": "soft"
         }
       ],
       "itemsTakeAction": [],
@@ -7596,6 +7625,18 @@
               "required": false,
               "description": "Marks the row as destructive."
             },
+            {
+              "name": "disabled",
+              "type": "boolean",
+              "required": false,
+              "description": "Shows the row greyed out. It stays focusable and cannot be chosen, and renders no link."
+            },
+            {
+              "name": "disabledReason",
+              "type": "string",
+              "required": false,
+              "description": "Why the row is disabled. Shown as a tooltip on hover and focus, and read by screen readers. Needs disabled."
+            },
             {
               "name": "divider",
               "type": "boolean",
@@ -7674,6 +7715,17 @@
           "description": "Class for the menu panel.",
           "default": ""
         },
+        {
+          "name": "menuWidth",
+          "type": "enum",
+          "enum": [
+            "lg",
+            "md",
+            "sm"
+          ],
+          "required": false,
+          "description": "A fixed menu width (15, 20 or 25rem); long rows wrap instead of widening the menu. Unset, the menu fits its rows."
+        },
         {
           "name": "show",
           "type": "boolean",
@@ -7686,6 +7738,15 @@
           "required": false,
           "description": "Class for the toggle button, replacing the default toggle look."
         },
+        {
+          "name": "toggleVariant",
+          "type": "enum",
+          "enum": [
+            "neutral"
+          ],
+          "required": false,
+          "description": "neutral: a custom trigger that keeps the surrounding font and colour, with a muted fill on hover and while open. Needs trigger."
+        },
         {
           "name": "trigger",
           "type": "node",
@@ -12027,6 +12088,13 @@
           "required": false,
           "description": "The accessible name when the title is not plain text, or when the header is hidden."
         },
+        {
+          "name": "backLabel",
+          "type": "string",
+          "required": false,
+          "description": "The accessible name of the back arrow shown when onBack is set.",
+          "default": "Back"
+        },
         {
           "name": "confirmDiscard",
           "type": "string",
@@ -17637,6 +17705,13 @@
           "required": false,
           "description": "Disables the control."
         },
+        {
+          "name": "emptyText",
+          "type": "string",
+          "required": false,
+          "description": "Text shown in the menu when a search matches nothing.",
+          "default": "No matches"
+        },
         {
           "name": "error",
           "type": "string",
@@ -18332,6 +18407,13 @@
           "description": "Compact sets the content's top padding to 12px.",
           "default": "comfortable"
         },
+        {
+          "name": "foldedCookie",
+          "type": "string",
+          "required": false,
+          "description": "The cookie that remembers the folded collapsible groups, as their keys joined by dots.",
+          "default": "wui-nav-folded"
+        },
         {
           "name": "footer",
           "type": "node",
@@ -18348,6 +18430,13 @@
               "required": false,
               "description": "A node rendered right after the group's links, such as an add-a-space row. It is hidden on the collapsed rail and shown in the drawer."
             },
+            {
+              "name": "collapsible",
+              "type": "boolean",
+              "required": false,
+              "description": "Folds the group from its heading. Its folded state is remembered in a cookie (foldedCookie).",
+              "default": false
+            },
             {
               "name": "items",
               "type": "array",
@@ -18387,6 +18476,12 @@
                   "required": false,
                   "description": "Sub-items. The row becomes an expandable parent."
                 },
+                {
+                  "name": "header",
+                  "type": "string",
+                  "required": false,
+                  "description": "A sub-heading row inside the group, drawn with no link. Shown only while a link follows it."
+                },
                 {
                   "name": "href",
                   "type": "url",
@@ -18428,8 +18523,8 @@
                 {
                   "name": "label",
                   "type": "string",
-                  "required": true,
-                  "description": "The visible label of the row."
+                  "required": false,
+                  "description": "The visible label of the row. Every row but a header row has one."
                 },
                 {
                   "name": "match",
@@ -18469,6 +18564,12 @@
               "required": true,
               "description": "The nav rows of the group."
             },
+            {
+              "name": "key",
+              "type": "string",
+              "required": false,
+              "description": "A stable name for the group. Needed with collapsible; lower-case letters, digits and hyphens."
+            },
             {
               "name": "label",
               "type": "string",

package/dist/canvas-kit/release.json

@@ -1,21 +1,21 @@
 {
   "name": "webority-web",
-  "version": "0.102.3",
+  "version": "0.103.0",
   "platform": "Web",
   "kitModuleVersion": 2,
   "rendererProtocolVersion": 12,
   "library": {
     "name": "@webority/ui-react",
-    "version": "0.102.3"
+    "version": "0.103.0"
   },
   "files": {
     "manifest.json": {
-      "sha256": "de065a2042e59a8c8fc00a368e4b0d08e48654324c6721c2b7f6d20dade8cb00",
-      "bytes": 850905
+      "sha256": "8ac25bea96fbf346aedb9ba820dc67b0017acd21093c2444ac67e0e9b4b18491",
+      "bytes": 854597
     },
     "kit.js": {
-      "sha256": "e759d6a89ee9e3a9ec2cc6644436c3327a99da23a3944ec0a9cde6ac794e813b",
-      "bytes": 10876977
+      "sha256": "675af856fb26ffd640a7b842964948dc16e5b483deee53e15c61108406e0500f",
+      "bytes": 10884921
     },
     "kit.css": {
       "sha256": "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855",

package/dist/components/AppActionIcon.js

@@ -1 +1 @@
-import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import{devWarn as t}from"../lib/devWarn.js";import n from"./warnInvalidValue.js";import r from"./warnUnknownProps.js";import{shortcutAria as i}from"../lib/shortcutChip.js";import a from"./withTooltip.js";import o from"./renderIconProp.js";import{useRef as s}from"react";import{Fragment as c,jsx as l,jsxs as u}from"react/jsx-runtime";var d=[`linear`,`outline`,`bold`,`bulk`,`broken`,`twotone`];function f(f){let{icon:p,iconVariant:m,label:h,tooltipPlacement:g=`auto`,shortcut:_,danger:v=!1,disabled:y=!1,size:b=20,onClick:x,className:S=``,as:C,href:w,accept:T,multiple:E=!1,onFiles:D,...O}=f,k=Number(b),A=Number.isFinite(k)&&k>0?k:20;b!==void 0&&!(Number.isFinite(k)&&k>0)&&t(`AppActionIcon: size must be a positive number of px.`),r(`AppActionIcon`,C===void 0?O:{...O,as:C}),n(`AppActionIcon`,`iconVariant`,m,d);let j=typeof D==`function`;j&&(C!==void 0||w!==void 0)&&t(`AppActionIcon: file mode renders a button; href and as are ignored.`),!j&&(T!==void 0||E)&&t(`AppActionIcon: accept and multiple apply only in file mode (pass onFiles).`);let M=s(null),N=e=>{let t=[...e.target.files];e.target.value=``,t.length>0&&D(t)},P=[`u-action`,v?`danger`:``,S].filter(Boolean).join(` `),{style:F,...I}=O,L={"--wui-action-size":`${A+16}px`,...F},R=j?`button`:C??(w?`a`:`button`),z=R===`button`,B=a(l(R,{type:z?`button`:void 0,href:z||y?void 0:w,className:P,style:L,"aria-label":h,"aria-keyshortcuts":i(_),disabled:z?y:void 0,"aria-disabled":!z&&y?`true`:void 0,role:!z&&y?`link`:void 0,tabIndex:!z&&y?-1:void 0,onClick:e=>{if(y){e.preventDefault(),e.stopPropagation();return}x?.(e),j&&!e.defaultPrevented&&M.current?.click()},...e(`AppActionIcon`,f),...I,children:o(p,{size:A,variant:m})}),h,g,_);return j?u(c,{children:[B,l(`input`,{type:`file`,ref:M,className:`wui-action-icon-file`,hidden:!0,tabIndex:-1,"aria-hidden":`true`,accept:T,multiple:E,onChange:N,onClick:e=>e.stopPropagation()})]}):B}export{f as default};
+import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import{devWarn as t}from"../lib/devWarn.js";import n from"./warnInvalidValue.js";import r from"./warnUnknownProps.js";import{shortcutAria as i}from"../lib/shortcutChip.js";import a from"./withTooltip.js";import o from"./renderIconProp.js";import{useRef as s}from"react";import{Fragment as c,jsx as l,jsxs as u}from"react/jsx-runtime";var d=[`linear`,`outline`,`bold`,`bulk`,`broken`,`twotone`],f=[`comfortable`,`compact`];function p(p){let{icon:m,iconVariant:h,label:g,tooltipPlacement:_=`auto`,shortcut:v,danger:y=!1,density:b=`comfortable`,neutral:x=!1,disabled:S=!1,size:C=20,onClick:w,className:T=``,as:E,href:D,accept:O,multiple:k=!1,onFiles:A,...j}=p,M=Number(C),N=Number.isFinite(M)&&M>0?M:20;C!==void 0&&!(Number.isFinite(M)&&M>0)&&t(`AppActionIcon: size must be a positive number of px.`),r(`AppActionIcon`,E===void 0?j:{...j,as:E}),n(`AppActionIcon`,`iconVariant`,h,d),n(`AppActionIcon`,`density`,b,f),y&&x&&t(`AppActionIcon: danger and neutral are exclusive; danger wins.`);let P=typeof A==`function`;P&&(E!==void 0||D!==void 0)&&t(`AppActionIcon: file mode renders a button; href and as are ignored.`),!P&&(O!==void 0||k)&&t(`AppActionIcon: accept and multiple apply only in file mode (pass onFiles).`);let F=s(null),I=e=>{let t=[...e.target.files];e.target.value=``,t.length>0&&A(t)},L=[`u-action`,y?`danger`:``,x&&!y?`neutral`:``,T].filter(Boolean).join(` `),{style:R,...z}=j,B={"--wui-action-size":`${N+(b===`compact`?8:16)}px`,...R},V=P?`button`:E??(D?`a`:`button`),H=V===`button`,U=a(l(V,{type:H?`button`:void 0,href:H||S?void 0:D,className:L,style:B,"aria-label":g,"aria-keyshortcuts":i(v),disabled:H?S:void 0,"aria-disabled":!H&&S?`true`:void 0,role:!H&&S?`link`:void 0,tabIndex:!H&&S?-1:void 0,onClick:e=>{if(S){e.preventDefault(),e.stopPropagation();return}w?.(e),P&&!e.defaultPrevented&&F.current?.click()},...e(`AppActionIcon`,p),...z,children:o(m,{size:N,variant:h})}),g,_,v);return P?u(c,{children:[U,l(`input`,{type:`file`,ref:F,className:`wui-action-icon-file`,hidden:!0,tabIndex:-1,"aria-hidden":`true`,accept:O,multiple:k,onChange:I,onClick:e=>e.stopPropagation()})]}):U}export{p as default};

package/dist/components/AppChoiceCard.js

@@ -1 +1 @@
-import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import t from"./warnInvalidValue.js";import n from"./warnUnknownProps.js";import r from"./AppIcon.js";import{Fragment as i,jsx as a,jsxs as o}from"react/jsx-runtime";var s={sm:` wui-struct-card-sm`,md:``,lg:` wui-struct-card-lg`},c={inline:``,stacked:` wui-struct-card-stacked`},l={sm:16,md:18,lg:22};function u(u){let{name:d,multiple:f=!1,value:p,checked:m,onChange:h,icon:g,iconNode:_,iconSize:v,image:y,imageAlt:b=``,children:x,title:S,description:C,checkIcon:w=`check`,checkSize:T=18,hideCheck:E=!1,disabled:D=!1,size:O=`md`,layout:k=`inline`,className:A=``,...j}=u;n(`AppChoiceCard`,j),t(`AppChoiceCard`,`size`,O,Object.keys(s)),t(`AppChoiceCard`,`layout`,k,Object.keys(c));let M=s[O]??``,N=c[k]??``,P=v??l[O]??l.md;return o(`label`,{className:`struct-card${y?` struct-card-img-card`:``}${M}${N}${E?` wui-struct-card-no-check`:``}${m?` checked`:``}${A?` ${A}`:``}`,"aria-disabled":D||void 0,...e(`AppChoiceCard`,u),...j,children:[a(`input`,{type:f?`checkbox`:`radio`,name:d,value:p,className:`struct-card-input`,checked:m,onChange:h,disabled:D}),y?a(`span`,{className:`struct-card-media`,children:a(`img`,{className:`struct-card-img`,src:y,alt:b})}):_||g?a(`span`,{className:`struct-card-ic`,children:_||a(r,{name:g,size:P,variant:m?`bold`:void 0})}):null,a(`span`,{className:`struct-card-body`,children:x||o(i,{children:[S&&a(`span`,{className:`struct-card-title`,children:S}),C&&a(`span`,{className:`struct-card-desc`,children:C})]})}),!E&&a(`span`,{className:`struct-card-check`,children:a(r,{name:w,size:T})})]})}export{u as default};
+import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import t from"./warnInvalidValue.js";import n from"./warnUnknownProps.js";import r from"./AppIcon.js";import{Fragment as i,jsx as a,jsxs as o}from"react/jsx-runtime";var s={sm:` wui-struct-card-sm`,md:``,lg:` wui-struct-card-lg`},c={inline:``,stacked:` wui-struct-card-stacked`},l={sm:16,md:18,lg:22};function u(u){let{name:d,multiple:f=!1,value:p,checked:m,onChange:h,icon:g,iconNode:_,iconSize:v,image:y,imageAlt:b=``,children:x,title:S,description:C,checkIcon:w=`check`,checkSize:T=18,hideCheck:E=!1,disabled:D=!1,size:O=`md`,layout:k=`inline`,className:A=``,...j}=u;n(`AppChoiceCard`,j),t(`AppChoiceCard`,`size`,O,Object.keys(s)),t(`AppChoiceCard`,`layout`,k,Object.keys(c));let M=s[O]??``,N=c[k]??``,P=v??l[O]??l.md;return o(`label`,{className:`struct-card${y?` struct-card-img-card`:``}${M}${N}${E?` wui-struct-card-no-check`:``}${A?` ${A}`:``}`,"aria-disabled":D||void 0,...e(`AppChoiceCard`,u),...j,children:[a(`input`,{type:f?`checkbox`:`radio`,name:d,value:p,className:`struct-card-input`,checked:m,onChange:h,disabled:D}),y?a(`span`,{className:`struct-card-media`,children:a(`img`,{className:`struct-card-img`,src:y,alt:b})}):_||g?a(`span`,{className:`struct-card-ic`,children:_||o(i,{children:[a(`span`,{className:`wui-struct-card-glyph`,children:a(r,{name:g,size:P})}),a(`span`,{className:`wui-struct-card-glyph-on`,children:a(r,{name:g,size:P,variant:`bold`})})]})}):null,a(`span`,{className:`struct-card-body`,children:x||o(i,{children:[S&&a(`span`,{className:`struct-card-title`,children:S}),C&&a(`span`,{className:`struct-card-desc`,children:C})]})}),!E&&a(`span`,{className:`struct-card-check`,children:a(r,{name:w,size:T})})]})}export{u as default};

package/dist/components/AppChoiceChip.js

@@ -1 +1 @@
-import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import t from"./warnInvalidValue.js";import n from"./warnUnknownProps.js";import{jsx as r,jsxs as i}from"react/jsx-runtime";var a=[`sm`,`md`,`lg`];function o(o){let{multiple:s=!0,label:c,name:l,value:u,checked:d,onChange:f,children:p,count:m,size:h=`md`,disabled:g=!1,className:_=``,...v}=o;return n(`AppChoiceChip`,v),t(`AppChoiceChip`,`size`,h,a),i(`label`,{className:`choice-chip${d?` checked`:``}${h===`sm`?` choice-chip-sm`:h===`lg`?` choice-chip-lg`:``}${_?` ${_}`:``}`,...e(`AppChoiceChip`,o),...v,children:[r(`input`,{type:s?`checkbox`:`radio`,name:l,value:u,checked:d,disabled:g,onChange:f}),r(`span`,{children:c??p}),m!=null&&r(`span`,{className:`count`,children:m})]})}export{o as default};
+import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import t from"./warnInvalidValue.js";import n from"./warnUnknownProps.js";import{jsx as r,jsxs as i}from"react/jsx-runtime";var a=[`sm`,`md`,`lg`],o=[`soft`,`solid`];function s(s){let{multiple:c=!0,label:l,name:u,value:d,checked:f,onChange:p,children:m,count:h,size:g=`md`,variant:_=`soft`,disabled:v=!1,className:y=``,...b}=s;return n(`AppChoiceChip`,b),t(`AppChoiceChip`,`size`,g,a),t(`AppChoiceChip`,`variant`,_,o),i(`label`,{className:`choice-chip${f?` checked`:``}${g===`sm`?` choice-chip-sm`:g===`lg`?` choice-chip-lg`:``}${_===`solid`?` wui-choice-chip-solid`:``}${y?` ${y}`:``}`,...e(`AppChoiceChip`,s),...b,children:[r(`input`,{type:c?`checkbox`:`radio`,name:u,value:d,checked:f,disabled:v,onChange:p}),r(`span`,{children:l??m}),h!=null&&r(`span`,{className:`count`,children:h})]})}export{s as default};

package/dist/components/AppDropdown.js

@@ -1 +1 @@
-import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import{devWarn as t}from"../lib/devWarn.js";import n from"./warnInvalidValue.js";import r from"./warnUnknownProps.js";import{shortcutAria as i,shortcutChip as a}from"../lib/shortcutChip.js";import o from"./AppIcon.js";import s from"./renderIconProp.js";import{forwardRef as c,useEffect as l,useRef as u,useState as d}from"react";import{Dropdown as f}from"react-bootstrap";import{jsx as p,jsxs as m}from"react/jsx-runtime";var h=[`sm`,`md`,`lg`,`xl`],g=!1;function _(){let e=!0;try{e=process.env.NODE_ENV!==`production`}catch{e=!0}!e||g||(g=!0,t("[@webority/ui-react] <AppDropdown> icon-only toggle has no accessible name — pass `label` or `ariaLabel`."))}function v(t){let{icon:o,iconSize:c,toggleClassName:g,label:v,ariaLabel:b,align:x=`end`,items:S=[],menuClassName:C=``,linkComponent:w,children:T,trigger:E,show:D,onToggle:O,...k}=t;r(`AppDropdown`,k);for(let e of S)n(`AppDropdown`,`items[].hiddenFrom`,e.hiddenFrom,h);!E&&!b&&!v&&_();let A=g??(E?`wui-dropdown-trigger`:`topbar-icon-btn`),j=D!==void 0,[M,N]=d(!1),P=j?!!D:M,F=u(null);F.current=(e,t)=>{j||N(e),O?.(e,t)};let I=u(null);return l(()=>{if(!P)return;let e=I.current?.getBoundingClientRect(),t=()=>{let t=I.current?.getBoundingClientRect();(!e||!t||Math.abs(t.top-e.top)>2||Math.abs(t.left-e.left)>2)&&F.current(!1,{source:`scroll`})},n=()=>F.current(!1,{source:`resize`});return window.addEventListener(`scroll`,t,{capture:!0,passive:!0}),window.addEventListener(`resize`,n),()=>{window.removeEventListener(`scroll`,t,{capture:!0}),window.removeEventListener(`resize`,n)}},[P]),m(f,{ref:I,align:x,show:P,onToggle:(e,t)=>F.current(e,t),...e(`AppDropdown`,t),...k,children:[p(f.Toggle,{as:y,icon:o,iconSize:c,btnClassName:A,trigger:E,title:v,"aria-label":b??(E?void 0:v)}),p(f.Menu,{className:C,renderOnMount:!0,popperConfig:{strategy:`fixed`},children:T??S.map(e=>{if(e.header!=null)return p(`div`,{className:`dropdown-header`,children:e.header},e.key);if(e.divider)return p(f.Divider,{},e.key);let t=e.to?w?{as:w,to:e.to}:{as:`a`,href:e.to}:{as:`button`,type:`button`},n=[e.danger&&`danger`,h.includes(e.hiddenFrom)&&`wui-hidden-from-${e.hiddenFrom}`].filter(Boolean).join(` `)||void 0;return m(f.Item,{...t,onClick:e.onClick,className:n,"aria-keyshortcuts":i(e.shortcut),children:[e.image?p(`img`,{src:e.image,alt:``}):s(e.icon,{size:16}),e.label,a(e.shortcut)]},e.key)})})]})}var y=c(function({icon:e,iconSize:t=20,btnClassName:n=`topbar-icon-btn`,trigger:r,"aria-label":i,className:a,...s},c){return p(`button`,{ref:c,type:`button`,className:n,"aria-label":i,...s,children:r??p(o,{name:e,size:t})})});export{v as default};
+import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import{devWarn as t}from"../lib/devWarn.js";import n from"./warnInvalidValue.js";import r from"./warnUnknownProps.js";import{shortcutAria as i,shortcutChip as a}from"../lib/shortcutChip.js";import o from"./withTooltip.js";import s from"./AppIcon.js";import c from"./renderIconProp.js";import{Fragment as l,forwardRef as u,useEffect as d,useRef as f,useState as p}from"react";import{Dropdown as m}from"react-bootstrap";import{jsx as h,jsxs as g}from"react/jsx-runtime";var _=[`sm`,`md`,`lg`,`xl`],v=[`neutral`],y=[`sm`,`md`,`lg`],b=e=>{e.preventDefault(),e.stopPropagation()},x=u(function(e,t){return h(`button`,{...e,ref:t,"aria-disabled":`true`})}),S=!1;function C(){let e=!0;try{e=process.env.NODE_ENV!==`production`}catch{e=!0}!e||S||(S=!0,t("[@webority/ui-react] <AppDropdown> icon-only toggle has no accessible name — pass `label` or `ariaLabel`."))}function w(s){let{icon:u,iconSize:S,toggleClassName:w,toggleVariant:E,menuWidth:D,label:O,ariaLabel:k,align:A=`end`,items:j=[],menuClassName:M=``,linkComponent:N,children:P,trigger:F,show:I,onToggle:L,...R}=s;r(`AppDropdown`,R);for(let e of j)n(`AppDropdown`,`items[].hiddenFrom`,e.hiddenFrom,_);!F&&!k&&!O&&C(),n(`AppDropdown`,`toggleVariant`,E,v),n(`AppDropdown`,`menuWidth`,D,y),E&&!F&&t(`AppDropdown: toggleVariant needs a trigger; the icon toggle ignores it.`);let z=(w??(F?`wui-dropdown-trigger`:`topbar-icon-btn`))+(F&&E===`neutral`?` wui-dropdown-trigger-neutral`:``),B=[M,y.includes(D)?`wui-dropdown-menu-${D}`:``].filter(Boolean).join(` `),V=I!==void 0,[H,U]=p(!1),W=V?!!I:H,G=f(null);G.current=(e,t)=>{V||U(e),L?.(e,t)};let K=f(null);return d(()=>{if(!W)return;let e=K.current?.getBoundingClientRect(),t=()=>{let t=K.current?.getBoundingClientRect();(!e||!t||Math.abs(t.top-e.top)>2||Math.abs(t.left-e.left)>2)&&G.current(!1,{source:`scroll`})},n=()=>G.current(!1,{source:`resize`});return window.addEventListener(`scroll`,t,{capture:!0,passive:!0}),window.addEventListener(`resize`,n),()=>{window.removeEventListener(`scroll`,t,{capture:!0}),window.removeEventListener(`resize`,n)}},[W]),g(m,{ref:K,align:A,show:W,onToggle:(e,t)=>G.current(e,t),...e(`AppDropdown`,s),...R,children:[h(m.Toggle,{as:T,icon:u,iconSize:S,btnClassName:z,trigger:F,title:O,"aria-label":k??(F?void 0:O)}),h(m.Menu,{className:B,renderOnMount:!0,popperConfig:{strategy:`fixed`},children:P??j.map(e=>{if(e.header!=null)return h(`div`,{className:`dropdown-header`,children:e.header},e.key);if(e.divider)return h(m.Divider,{},e.key);if(e.disabled)return h(l,{children:o(g(m.Item,{as:x,type:`button`,className:[e.danger&&`danger`,`wui-dropdown-item-disabled`].filter(Boolean).join(` `),onClick:b,children:[e.image?h(`img`,{src:e.image,alt:``}):c(e.icon,{size:16}),e.label,e.disabledReason&&g(`span`,{className:`visually-hidden wui-dropdown-item-reason`,children:[`: `,e.disabledReason]})]}),e.disabledReason,`auto`)},e.key);let t=e.to?N?{as:N,to:e.to}:{as:`a`,href:e.to}:{as:`button`,type:`button`},n=[e.danger&&`danger`,_.includes(e.hiddenFrom)&&`wui-hidden-from-${e.hiddenFrom}`].filter(Boolean).join(` `)||void 0;return g(m.Item,{...t,onClick:e.onClick,className:n,"aria-keyshortcuts":i(e.shortcut),children:[e.image?h(`img`,{src:e.image,alt:``}):c(e.icon,{size:16}),e.label,a(e.shortcut)]},e.key)})})]})}var T=u(function({icon:e,iconSize:t=20,btnClassName:n=`topbar-icon-btn`,trigger:r,"aria-label":i,className:a,...o},c){return h(`button`,{ref:c,type:`button`,className:n,"aria-label":i,...o,children:r??h(s,{name:e,size:t})})});export{w as default};

package/dist/components/AppModal.js

@@ -1 +1 @@
-import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import{devWarn as t}from"../lib/devWarn.js";import n from"./warnInvalidValue.js";import r from"./warnUnknownProps.js";import i from"./AppIcon.js";import a from"../lib/DiscardPrompt.js";import{useCallback as o,useEffect as s,useRef as c,useState as l}from"react";import{Modal as u}from"react-bootstrap";import{jsx as d,jsxs as f}from"react/jsx-runtime";var p=[`default`,`danger`,`success`,`warning`],m=[`center`,`top`],h=`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])`,g={sm:380,md:440,lg:640,xl:880},ee=`wui-modal-fullscreen`,_=!1;function v(){let e=!0;try{e=process.env.NODE_ENV!==`production`}catch{e=!0}!e||_||(_=!0,t("[@webority/ui-react] <AppModal hideHeader> has no accessible name — pass `ariaLabel` (or a string `title`)."))}function y(e,t){if(e.key!==`Tab`)return;let n=Array.from(t.querySelectorAll(h));if(!n.length){e.preventDefault(),t.focus();return}let r=n[0],i=n[n.length-1],a=document.activeElement;e.shiftKey&&(a===r||a===t)?(e.preventDefault(),i.focus()):!e.shiftKey&&a===i&&(e.preventDefault(),r.focus())}function te(){let e=[];for(let t of document.body.children)t.hasAttribute(`inert`)||t.matches(`.modal, .modal-backdrop`)||(t.setAttribute(`inert`,``),e.push(t));return e}function b(t){let{open:_,eyebrow:b,title:x,subtitle:S,headerIcon:C,tone:w=`default`,dismissible:T=!0,onClose:E,footer:D,size:O=`md`,placement:k=`center`,hideHeader:A=!1,staticBackdrop:j=!1,confirmDiscard:M,dirty:N=!1,ariaLabel:P,className:F=``,children:I,"data-canvas":ne,...L}=t;r(`AppModal`,L),n(`AppModal`,`tone`,w,p),n(`AppModal`,`placement`,k,m),n(`AppModal`,`size`,typeof O==`string`?O:null,[...Object.keys(g),`fullscreen`]);let{style:R,ref:z,"data-wui":B,"data-wui-props":V,...H}=L,U=B?{"data-wui":B,"data-wui-props":V}:e(`AppModal`,t),W=U[`data-wui`],G=U[`data-wui-props`];A&&!P&&typeof x!=`string`&&v();let K=c(null),q=c(null),[J,Y]=l(!1);s(()=>{_||Y(!1)},[_]),s(()=>{J&&q.current?.focus()},[J]),s(()=>{let e=K.current?.closest(`.modal`);e&&(M?e.setAttribute(`confirm-discard`,M):e.removeAttribute(`confirm-discard`))},[_,M]);let X=c(null),Z=o(e=>{X.current=e,typeof z==`function`?z(e):z&&(z.current=e)},[z]);s(()=>{let e=X.current?.dialog;e&&(e.setAttribute(`data-wui`,W),G===void 0?e.removeAttribute(`data-wui-props`):e.setAttribute(`data-wui-props`,G))},[_,W,G]),s(()=>{if(!_)return;let e=K.current?.closest(`.modal-content`);if(!e)return;let t=()=>Array.from(e.querySelectorAll(h));(e.querySelector(`[data-autofocus]`)||t().find(e=>!e.classList.contains(`wui-modal-close`))||t()[0]||e).focus?.();let n=e.closest(`.modal`),r=te(),i=e=>y(e,n);return n?.addEventListener(`keydown`,i),()=>{n?.removeEventListener(`keydown`,i);for(let e of r)e.removeAttribute(`inert`);n&&setTimeout(()=>{n.isConnected&&!n.classList.contains(`show`)&&n.dispatchEvent(new Event(`transitionend`,{bubbles:!0}))},500)}},[_]);let Q=()=>{if(M&&N){Y(!0);return}E?.()},re=()=>{Y(!1),E?.()},ie=()=>{Y(!1),(K.current?.querySelector(`input:not([type="hidden"]):not([disabled]),select:not([disabled]),textarea:not([disabled])`))?.focus()},$=O===`fullscreen`,ae=typeof O==`number`?O:g[O]??g.md,oe=[`wui-modal`,w==="default"?``:`tone-${w}`,F].filter(Boolean).join(` `);return f(u,{...H,ref:Z,show:_,onHide:Q,backdrop:!j||`static`,keyboard:!j,autoFocus:!1,enforceFocus:!0,restoreFocus:!0,centered:k!==`top`,className:$?`wui-modal-shell ${ee}`:`wui-modal-shell`,style:$?R:{"--wui-modal-max-width":`${ae}px`,...R},dialogClassName:`wui-rb-dialog`,contentClassName:oe,backdropClassName:`wui-modal-dim`,"aria-label":P||(typeof x==`string`?x:void 0),children:[!A&&f(`div`,{className:`wui-modal-header`,children:[f(`div`,{className:`wui-modal-heading`,children:[C&&d(`span`,{className:`wui-modal-headicon`,children:d(i,{name:C,size:18})}),f(`div`,{className:`wui-modal-headtext`,children:[b&&d(`div`,{className:`wui-modal-eyebrow`,children:b}),d(`div`,{className:`wui-modal-title`,children:x}),S&&d(`div`,{className:`wui-modal-subtitle`,children:S})]})]}),T&&d(`button`,{type:`button`,className:`wui-modal-close`,onClick:Q,"aria-label":`Close`,children:d(`svg`,{width:`18`,height:`18`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,children:d(`path`,{d:`M18 6 6 18M6 6l12 12`})})})]}),d(`div`,{className:`wui-modal-body`,ref:K,children:I}),(D||J)&&f(`div`,{className:J?`wui-modal-footer wui-drawer-discarding`:`wui-modal-footer`,children:[J&&d(a,{text:M,confirmRef:q,onDiscard:re,onKeep:ie}),D]})]})}export{b as default};
+import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import{devWarn as t}from"../lib/devWarn.js";import n from"./warnInvalidValue.js";import r from"./warnUnknownProps.js";import i from"./AppIcon.js";import a from"../lib/DiscardPrompt.js";import{useCallback as o,useEffect as s,useRef as c,useState as ee}from"react";import{Modal as l}from"react-bootstrap";import{jsx as u,jsxs as d}from"react/jsx-runtime";var te=[`default`,`danger`,`success`,`warning`],f=[`center`,`top`],p=`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])`,m={sm:380,md:440,lg:640,xl:880},h=`wui-modal-fullscreen`,g=!1;function _(){let e=!0;try{e=process.env.NODE_ENV!==`production`}catch{e=!0}!e||g||(g=!0,t("[@webority/ui-react] <AppModal hideHeader> has no accessible name — pass `ariaLabel` (or a string `title`)."))}function v(e,t){if(e.key!==`Tab`)return;let n=Array.from(t.querySelectorAll(p));if(!n.length){e.preventDefault(),t.focus();return}let r=n[0],i=n[n.length-1],a=document.activeElement;e.shiftKey&&(a===r||a===t)?(e.preventDefault(),i.focus()):!e.shiftKey&&a===i&&(e.preventDefault(),r.focus())}function y(){let e=[];for(let t of document.body.children)t.hasAttribute(`inert`)||t.matches(`.modal, .modal-backdrop`)||(t.setAttribute(`inert`,``),e.push(t));return e}function b(t){let{open:g,eyebrow:b,title:x,subtitle:S,headerIcon:C,tone:w=`default`,dismissible:T=!0,onClose:E,onBack:D,backLabel:O=`Back`,footer:k,size:A=`md`,placement:j=`center`,hideHeader:M=!1,staticBackdrop:N=!1,confirmDiscard:P,dirty:F=!1,ariaLabel:I,className:ne=``,children:re,"data-canvas":ie,...L}=t;r(`AppModal`,L),n(`AppModal`,`tone`,w,te),n(`AppModal`,`placement`,j,f),n(`AppModal`,`size`,typeof A==`string`?A:null,[...Object.keys(m),`fullscreen`]);let{style:R,ref:z,"data-wui":B,"data-wui-props":V,...H}=L,U=B?{"data-wui":B,"data-wui-props":V}:e(`AppModal`,t),W=U[`data-wui`],G=U[`data-wui-props`];M&&!I&&typeof x!=`string`&&_();let K=c(null),q=c(null),[J,Y]=ee(!1);s(()=>{g||Y(!1)},[g]),s(()=>{J&&q.current?.focus()},[J]),s(()=>{let e=K.current?.closest(`.modal`);e&&(P?e.setAttribute(`confirm-discard`,P):e.removeAttribute(`confirm-discard`))},[g,P]);let X=c(null),ae=o(e=>{X.current=e,typeof z==`function`?z(e):z&&(z.current=e)},[z]);s(()=>{let e=X.current?.dialog;e&&(e.setAttribute(`data-wui`,W),G===void 0?e.removeAttribute(`data-wui-props`):e.setAttribute(`data-wui-props`,G))},[g,W,G]),s(()=>{if(!g)return;let e=K.current?.closest(`.modal-content`);if(!e)return;let t=()=>Array.from(e.querySelectorAll(p));(e.querySelector(`[data-autofocus]`)||t().find(e=>!e.classList.contains(`wui-modal-close`)&&!e.classList.contains(`wui-modal-back`))||t()[0]||e).focus?.();let n=e.closest(`.modal`),r=y(),i=e=>v(e,n);return n?.addEventListener(`keydown`,i),()=>{n?.removeEventListener(`keydown`,i);for(let e of r)e.removeAttribute(`inert`);n&&setTimeout(()=>{n.isConnected&&!n.classList.contains(`show`)&&n.dispatchEvent(new Event(`transitionend`,{bubbles:!0}))},500)}},[g]);let Z=()=>{if(P&&F){Y(!0);return}E?.()},Q=()=>{Y(!1),E?.()},oe=()=>{Y(!1),(K.current?.querySelector(`input:not([type="hidden"]):not([disabled]),select:not([disabled]),textarea:not([disabled])`))?.focus()},$=A===`fullscreen`,se=typeof A==`number`?A:m[A]??m.md,ce=[`wui-modal`,w==="default"?``:`tone-${w}`,ne].filter(Boolean).join(` `);return d(l,{...H,ref:ae,show:g,onHide:Z,backdrop:!N||`static`,keyboard:!N,autoFocus:!1,enforceFocus:!0,restoreFocus:!0,centered:j!==`top`,className:$?`wui-modal-shell ${h}`:`wui-modal-shell`,style:$?R:{"--wui-modal-max-width":`${se}px`,...R},dialogClassName:`wui-rb-dialog`,contentClassName:ce,backdropClassName:`wui-modal-dim`,"aria-label":I||(typeof x==`string`?x:void 0),children:[!M&&d(`div`,{className:`wui-modal-header`,children:[D&&u(`button`,{type:`button`,className:`wui-modal-back`,onClick:D,"aria-label":O,children:u(i,{name:`arrow-left`,size:18})}),d(`div`,{className:`wui-modal-heading`,children:[C&&u(`span`,{className:`wui-modal-headicon`,children:u(i,{name:C,size:18})}),d(`div`,{className:`wui-modal-headtext`,children:[b&&u(`div`,{className:`wui-modal-eyebrow`,children:b}),u(`div`,{className:`wui-modal-title`,children:x}),S&&u(`div`,{className:`wui-modal-subtitle`,children:S})]})]}),T&&u(`button`,{type:`button`,className:`wui-modal-close`,onClick:Z,"aria-label":`Close`,children:u(`svg`,{width:`18`,height:`18`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,children:u(`path`,{d:`M18 6 6 18M6 6l12 12`})})})]}),u(`div`,{className:`wui-modal-body`,ref:K,children:re}),(k||J)&&d(`div`,{className:J?`wui-modal-footer wui-drawer-discarding`:`wui-modal-footer`,children:[J&&u(a,{text:P,confirmRef:q,onDiscard:Q,onKeep:oe}),k]})]})}export{b as default};

package/dist/components/AppSelect.js

@@ -1 +1 @@
-import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import t from"./warnInvalidValue.js";import n from"./warnUnknownProps.js";import ee from"../lib/FieldMessage.js";import r from"./AppInfoTip.js";import i from"./AppRequiredMark.js";import a from"./useNodeLabels.js";import o,{optionsEqual as s}from"./useWuiControl.js";import{forwardRef as c,useId as te,useLayoutEffect as ne,useRef as re}from"react";import{Fragment as l,jsx as u,jsxs as d}from"react/jsx-runtime";import"@webority/ui-elements/elements/select";var f=[`sm`,`lg`,`xl`],p=[`off`,`border`,`above`],m=(e,t)=>({value:e.value,label:t,icon:e.icon}),h=c(function(c,h){let{value:g,onChange:_,options:v=[],placeholder:ie=`Select...`,searchPlaceholder:ae=`Search...`,searchable:oe=!1,clearable:se=!1,size:y,icon:ce,prefix:b,suffix:x,floatingLabel:S=`off`,disabled:C,open:w,label:T,required:E=!1,error:D,hint:O,help:k,helpLabel:A=`More information`,id:j,name:M,className:N=``,fieldClassName:P=``,"aria-label":F,"aria-labelledby":I,"aria-describedby":L,"data-canvas":le,...R}=c;n(`AppSelect`,R),t(`AppSelect`,`size`,y,f),t(`AppSelect`,`floatingLabel`,S,p);let z=te(),{setRef:B,innerRef:V}=o({ref:h,value:g??``,onChange:_}),{portal:H,toElementOptions:U}=a(v),W=re({el:null,options:null,map:null});ne(()=>{let e=V.current;if(!e||W.current.el===e&&W.current.options===v&&W.current.map===U)return;W.current={el:e,options:v,map:U};let t=U(v,m);s(t,e.options)||(e.options=t)});let G=j||z,K=S!==`off`&&T,q=D&&G?`${G}-error`:void 0,J=O&&G?`${G}-hint`:void 0,ue=q||J||L,Y=!K&&(b!=null||x!=null),X=!T&&!D&&!O,Z=e(`AppSelect`,c),Q=d(l,{children:[u(`wui-select`,{"aria-label":F||(typeof T==`string`?T:void 0),"aria-labelledby":I||void 0,"aria-describedby":ue||void 0,"aria-invalid":D?`true`:void 0,ref:B,value:g||void 0,id:G,name:M,placeholder:S!==`off`&&T?` `:ie,"search-placeholder":ae,searchable:oe?``:void 0,clearable:se?``:void 0,size:y||void 0,icon:ce||void 0,disabled:C?``:void 0,open:w?``:void 0,required:E?``:void 0,className:N||void 0,...X&&!Y?Z:null,...R}),H]}),$=Y?d(`div`,{...X?Z:null,className:`input-affixed`,children:[b!=null&&u(`span`,{className:`affix affix-pre`,children:b}),Q,x!=null&&u(`span`,{className:`affix affix-suf`,children:x})]}):Q;if(X)return $;let de=[`field`,P].filter(Boolean).join(` `);return d(`div`,{...Z,className:de,children:[T&&!K&&d(`label`,{className:`label`,htmlFor:G,children:[T,E&&u(i,{}),k&&u(r,{label:A,children:k})]}),K?d(`div`,{className:S===`above`?`field-float wui-float-above`:`field-float`,children:[Q,d(`label`,{className:`float-label`,htmlFor:G,children:[T,E&&u(i,{})]})]}):$,u(ee,{error:D,hint:O,errorId:q,hintId:J})]})});export{h as default};
+import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import t from"./warnInvalidValue.js";import n from"./warnUnknownProps.js";import ee from"../lib/FieldMessage.js";import r from"./AppInfoTip.js";import i from"./AppRequiredMark.js";import a from"./useNodeLabels.js";import o,{optionsEqual as s}from"./useWuiControl.js";import{forwardRef as c,useId as te,useLayoutEffect as ne,useRef as l}from"react";import{Fragment as u,jsx as d,jsxs as f}from"react/jsx-runtime";import"@webority/ui-elements/elements/select";var re=[`sm`,`lg`,`xl`],ie=[`off`,`border`,`above`],p=(e,t)=>({value:e.value,label:t,icon:e.icon}),m=c(function(c,m){let{value:h,onChange:g,options:_=[],placeholder:v=`Select...`,searchPlaceholder:ae=`Search...`,emptyText:oe,searchable:se=!1,clearable:ce=!1,size:y,icon:le,prefix:b,suffix:x,floatingLabel:S=`off`,disabled:C,open:w,label:T,required:E=!1,error:D,hint:O,help:k,helpLabel:A=`More information`,id:j,name:M,className:N=``,fieldClassName:P=``,"aria-label":F,"aria-labelledby":I,"aria-describedby":ue,"data-canvas":de,...L}=c;n(`AppSelect`,L),t(`AppSelect`,`size`,y,re),t(`AppSelect`,`floatingLabel`,S,ie);let R=te(),{setRef:z,innerRef:B}=o({ref:m,value:h??``,onChange:g}),{portal:V,toElementOptions:H}=a(_),U=l({el:null,options:null,map:null});ne(()=>{let e=B.current;if(!e||U.current.el===e&&U.current.options===_&&U.current.map===H)return;U.current={el:e,options:_,map:H};let t=H(_,p);s(t,e.options)||(e.options=t)});let W=j||R,G=S!==`off`&&T,K=D&&W?`${W}-error`:void 0,q=O&&W?`${W}-hint`:void 0,J=K||q||ue,Y=!G&&(b!=null||x!=null),X=!T&&!D&&!O,Z=e(`AppSelect`,c),Q=f(u,{children:[d(`wui-select`,{"aria-label":F||(typeof T==`string`?T:void 0),"aria-labelledby":I||void 0,"aria-describedby":J||void 0,"aria-invalid":D?`true`:void 0,ref:z,value:h||void 0,id:W,name:M,placeholder:S!==`off`&&T?` `:v,"search-placeholder":ae,"empty-text":oe||void 0,searchable:se?``:void 0,clearable:ce?``:void 0,size:y||void 0,icon:le||void 0,disabled:C?``:void 0,open:w?``:void 0,required:E?``:void 0,className:N||void 0,...X&&!Y?Z:null,...L}),V]}),$=Y?f(`div`,{...X?Z:null,className:`input-affixed`,children:[b!=null&&d(`span`,{className:`affix affix-pre`,children:b}),Q,x!=null&&d(`span`,{className:`affix affix-suf`,children:x})]}):Q;if(X)return $;let fe=[`field`,P].filter(Boolean).join(` `);return f(`div`,{...Z,className:fe,children:[T&&!G&&f(`label`,{className:`label`,htmlFor:W,children:[T,E&&d(i,{}),k&&d(r,{label:A,children:k})]}),G?f(`div`,{className:S===`above`?`field-float wui-float-above`:`field-float`,children:[Q,f(`label`,{className:`float-label`,htmlFor:W,children:[T,E&&d(i,{})]})]}):$,d(ee,{error:D,hint:O,errorId:K,hintId:q})]})});export{m as default};

package/dist/components/AppShell.js

@@ -1 +1 @@
-import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import t from"./warnInvalidValue.js";import n from"./warnUnknownProps.js";import r from"./AppIcon.js";import i from"./AppAvatar.js";import{navMatchScore as a}from"../lib/navMatch.js";import{readShellCollapsed as o,writeShellCollapsed as s}from"../lib/shellCookie.js";import{initScrollEdges as c}from"@webority/ui-elements/helpers";import{useEffect as l,useId as u,useMemo as d,useRef as f,useState as p}from"react";import{Fragment as m,jsx as h,jsxs as g}from"react/jsx-runtime";var _=99,v=4,y=5,b=[`prefix`,`exact`],x=[`comfortable`,`compact`],S=[`default`,`primary`],C=[`linear`,`outline`,`bold`,`bulk`,`broken`,`twotone`],w=new Set([`key`,`label`,`icon`,`iconVariant`,`iconSize`,`href`,`badge`,`badgeTone`,`badgeTitle`,`trailingIcon`,`active`,`match`,`matchAlso`,`tab`,`tabLabel`,`children`]),T=e=>e>_?`${_}+`:String(e);function E(i){let{groups:a=[],brand:u,sidebarStart:m,sidebarStartCompact:_,sidebarFooter:v,topbarStart:y,topbarEnd:b,footer:w,launcher:T,children:E,collapsed:O,onCollapsedChange:j,noSidebar:N=!1,density:F=`comfortable`,itemHeight:I,iconVariant:L,topbarTone:R=`default`,navLabel:ne=`Main navigation`,linkComponent:z,currentPath:B,rememberCollapsed:V=!1,collapsedCookie:H=`wui-shell-collapsed`,tabBarLabel:re=`Quick navigation`,moreLabel:ie=`More`,userMenu:U,notifications:W,search:G,className:ae=``,style:K,...q}=i;n(`AppShell`,q),t(`AppShell`,`density`,F,x),t(`AppShell`,`topbarTone`,R,S),t(`AppShell`,`iconVariant`,L,C);let oe=I>0?{...K,"--wui-nav-item-height":`${I}px`}:K,[se,ce]=p(()=>V&&O===void 0&&typeof document<`u`?o(H)??!1:!1),[J,Y]=p(!1),[le,ue]=p(!1),[de,fe]=p(!1),X=f(null),Z=O??se,pe=()=>{let e=!Z;O===void 0&&ce(e),V&&s(e,H),j?.(e)},Q=d(()=>D(a,B),[a,B]),$=N?null:k(Q);return l(()=>{let e=()=>ue(window.scrollY>4);return e(),window.addEventListener(`scroll`,e,{passive:!0}),()=>window.removeEventListener(`scroll`,e)},[]),l(()=>{c()},[]),l(()=>{let e=X.current,t=e?.querySelector(`.app-nav-item[aria-current="page"]`);if(!e||!t)return;let n=t.getBoundingClientRect(),r=e.getBoundingClientRect();n.top<r.top?e.scrollTop-=r.top-n.top:n.bottom>r.bottom&&(e.scrollTop+=n.bottom-r.bottom)},[]),l(()=>{let e=X.current;if(!e)return;let t=()=>fe(e.scrollHeight>e.clientHeight);if(t(),typeof ResizeObserver>`u`)return;let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[Q]),l(()=>{if(!J)return;let e=e=>{e.key===`Escape`&&Y(!1)};return document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[J]),g(`div`,{className:[`app-shell`,Z?`collapsed`:``,N?`no-sidebar`:``,J?`mobile-open`:``,ae].filter(Boolean).join(` `),"data-density":F===`compact`?`compact`:void 0,style:oe,...e(`AppShell`,i),...q,children:[h(`a`,{className:`wui-skip-link`,href:`#main-content`,children:`Skip to content`}),g(`aside`,{className:`app-sidebar`,children:[u&&h(`div`,{className:`app-sidebar-brand`,children:u}),m&&h(`div`,{className:`app-sidebar-start`,children:m}),_&&h(`div`,{className:`app-sidebar-start-compact`,children:_}),h(`nav`,{className:`app-sidebar-scroll`,"aria-label":ne,ref:X,tabIndex:de?0:void 0,children:Q.map((e,t)=>g(`div`,{className:`app-nav-group`,children:[e.label&&h(`div`,{className:`app-nav-group-label`,children:e.label}),e.items.map(e=>h(M,{item:e,linkComponent:z,onNavigate:()=>Y(!1),iconVariant:L},e.key??e.href??e.label)),e.after&&h(`div`,{className:`wui-nav-group-after`,children:e.after})]},e.label??`group-${t}`))}),v&&h(`div`,{className:`app-sidebar-foot`,children:v}),!N&&h(`button`,{type:`button`,className:`app-sidebar-toggle`,onClick:pe,"aria-label":Z?`Expand navigation`:`Collapse navigation`,"aria-expanded":!Z,children:h(r,{name:`chevrons-left`,size:20})})]}),g(`div`,{className:`app-main`,children:[g(`header`,{className:`app-topbar${le?` scrolled`:``}`,"data-tone":R===`primary`?`primary`:void 0,children:[g(`div`,{className:`app-topbar-start`,children:[h(`button`,{type:`button`,className:`app-topbar-menu`,onClick:()=>Y(!0),"aria-label":`Open navigation`,"aria-expanded":J,children:h(r,{name:`menu`,size:18})}),y,G&&h(te,{config:G})]}),g(`div`,{className:`app-topbar-end`,children:[b,W&&h(ee,{config:W}),U&&h(P,{config:U,linkComponent:z})]})]}),h(`main`,{className:`app-content`,id:`main-content`,children:E}),w&&h(`footer`,{className:`app-footer`,children:w})]}),T&&h(`div`,{className:`wui-shell-launcher`,children:T}),$&&g(`nav`,{className:`wui-tabbar`,"aria-label":re,children:[$.tabs.map(e=>h(A,{tab:e,linkComponent:z,iconVariant:L},e.key??e.href)),$.hasMore&&g(`button`,{type:`button`,className:`wui-tabbar-item${$.moreActive?` active`:``}`,onClick:()=>Y(!0),children:[h(`span`,{className:`wui-tabbar-icon`,children:h(r,{name:`more`,size:24})}),h(`span`,{className:`wui-tabbar-label`,children:ie})]})]}),h(`button`,{type:`button`,className:`app-scrim`,onClick:()=>Y(!1),"aria-label":`Close navigation`,tabIndex:J?0:-1})]})}function D(e,r){let i=e=>(e??[]).map(e=>Array.isArray(e.children)?{...e,children:i(e.children)}:{...e}).filter(e=>(e.children?.length??0)>0||!!e.href),o=e.map(e=>({...e,items:i(e.items)})).filter(e=>e.items.length>0),s=[],c=e=>{for(let t of e)s.push(t),t.children&&c(t.children)};for(let e of o)c(e.items);for(let e of s)n(`AppShell items`,O(e)),t(`AppShell`,`match`,e.match,b),t(`AppShell`,`iconVariant`,e.iconVariant,C);let l=null;if(r!=null&&!s.some(e=>e.active===!0)){let e=-1;for(let t of s){if(t.active!=null||t.children?.length&&!t.href)continue;let n=a(r,t.href,{exact:t.match===`exact`,also:t.matchAlso});if(n<0)continue;let i=t.match===`exact`&&a(r,t.href,{exact:!0})>=0?1/0:n;i>e&&(e=i,l=t)}}for(let e of s)e.active=e.active??e===l;return o}function O(e){return Object.fromEntries(Object.entries(e).filter(([e])=>!w.has(e)))}function k(e){let t=[],n=e=>{for(let r of e)r.children?.length?n(r.children):t.push(r)};for(let t of e)n(t.items);let r=t.filter(e=>e.tab);if(r.length===0)return null;let i=r.length<t.length,a=i?v:y;if(r.length>a)throw Error(`<AppShell>: ${r.length} items carry tab: true, but the phone tab bar holds ${a} (${i?`4 plus More, because other items exist`:`5 when every item is a tab`}). Flag fewer items.`);return{tabs:r,hasMore:i,moreActive:t.some(e=>!e.tab&&e.active)}}function A({tab:e,linkComponent:t,iconVariant:n}){let i=`wui-tabbar-item${e.active?` active`:``}`,a=g(m,{children:[e.icon&&h(`span`,{className:`wui-tabbar-icon`,children:typeof e.icon==`string`?h(r,{name:e.icon,size:24,variant:e.iconVariant??n}):e.icon}),h(`span`,{className:`wui-tabbar-label`,children:e.tabLabel??e.label}),e.badge!=null&&h(`span`,{className:`wui-tabbar-badge${e.badgeTone?` tone-${e.badgeTone}`:``}`,title:e.badgeTitle||void 0,children:e.badge})]}),o=e.active?`page`:void 0;return t?h(t,{className:i,to:e.href,"aria-current":o,children:a}):h(`a`,{className:i,href:e.href,"aria-current":o,children:a})}function j(e){for(let t of e){if(t.active)return t;let e=t.children?.length?j(t.children):void 0;if(e)return e}}function M({item:e,linkComponent:t,onNavigate:n,depth:i=0,iconVariant:a}){let o=i>0,s=i>1?` wui-nav-depth-${Math.min(i,6)}`:``,c=Array.isArray(e.children)&&e.children.length>0,u=c?j(e.children):void 0,d=!!u,f=u?u.key??u.href??u.label:null,[_,v]=p(d);l(()=>{f!=null&&v(!0)},[f]);let y=typeof e.label==`string`?e.label:void 0,b=!o&&e.icon&&h(`span`,{className:`app-nav-icon`,children:typeof e.icon==`string`?h(r,{name:e.icon,size:e.iconSize??22,variant:e.iconVariant??a}):e.icon}),x=e.badge!=null&&h(`span`,{className:`app-nav-badge${e.badgeTone?` tone-${e.badgeTone}`:``}`,title:e.badgeTitle||void 0,children:e.badge}),S=g(m,{children:[b,h(`span`,{className:`app-nav-text`,children:e.label}),x,e.trailingIcon&&h(`span`,{className:`app-nav-trailing`,children:typeof e.trailingIcon==`string`?h(r,{name:e.trailingIcon,size:16}):e.trailingIcon})]}),C=e.active?`page`:void 0;if(c){let c=h(`div`,{className:`app-nav-sub${_?` expanded`:``}`,inert:!_,"aria-hidden":!_||void 0,children:h(`div`,{className:`app-nav-sub-inner`,children:e.children.map(e=>h(M,{item:e,linkComponent:t,onNavigate:n,depth:i+1,iconVariant:a},e.key??e.href))})});if(e.href){let i=t?h(t,{className:`wui-nav-split-link`,to:e.href,"aria-current":C,onClick:n,children:S}):h(`a`,{className:`wui-nav-split-link`,href:e.href,"aria-current":C,onClick:n,children:S});return g(m,{children:[g(`div`,{className:`app-nav-item has-children wui-nav-split${o?` app-nav-subitem`:``}${d||e.active?` active`:``}${s}`,"data-label":y,children:[i,h(`button`,{type:`button`,className:`app-nav-caret wui-nav-split-toggle`,"aria-expanded":_,"aria-label":`Show or hide ${y??``} pages`,onClick:()=>v(e=>!e),children:h(r,{name:`chevron-right`,size:16})})]}),c]})}return g(m,{children:[g(`button`,{type:`button`,className:`app-nav-item${o?` app-nav-subitem`:``} has-children${d?` active`:``}${s}`,"aria-expanded":_,"data-label":y,onClick:()=>v(e=>!e),children:[b,h(`span`,{className:`app-nav-text`,children:e.label}),x,h(`span`,{className:`app-nav-caret`,children:h(r,{name:`chevron-right`,size:16})})]}),c]})}let w=`app-nav-item${o?` app-nav-subitem`:``}${e.active?` active`:``}${s}`;return t?h(t,{className:w,to:e.href,"aria-current":C,"data-label":y,onClick:n,children:S}):h(`a`,{className:w,href:e.href,"aria-current":C,"data-label":y,onClick:n,children:S})}function N(){let[e,t]=p(!1),n=f(null);return l(()=>{if(!e)return;let r=e=>{n.current?.contains(e.target)||t(!1)},i=e=>{e.key===`Escape`&&(t(!1),n.current?.querySelector(`button`)?.focus())};return document.addEventListener(`mousedown`,r),document.addEventListener(`keydown`,i),()=>{document.removeEventListener(`mousedown`,r),document.removeEventListener(`keydown`,i)}},[e]),{open:e,setOpen:t,ref:n}}function P({config:e,linkComponent:t}){let n=u(),{open:a,setOpen:o,ref:s}=N(),{name:c,role:l,roles:d=[],photo:f,profileHref:p,profileLabel:_=`My profile`,onLogout:v,logoutAction:y,logoutLabel:b=`Sign out`,items:x=[]}=e;if(!c)throw Error(`<AppShell> userMenu.name is required; the trigger and the avatar are named from it.`);let S=d.map(e=>(e??``).trim()).filter(Boolean),C=()=>o(!1),w=(e,n,r,i)=>t?h(t,{className:`dropdown-item`,to:e,onClick:i,children:n},r):h(`a`,{className:`dropdown-item`,href:e,onClick:i,children:n},r),T=g(m,{children:[h(r,{name:`log-out`,size:18}),b]});return g(`div`,{className:`dropdown wui-usermenu`,ref:s,children:[g(`button`,{type:`button`,id:n,className:`wui-usermenu-trigger`,"aria-expanded":a,"aria-label":`Account menu for ${c}`,onClick:()=>o(e=>!e),children:[h(i,{name:c,src:f,tone:`auto`}),g(`span`,{className:`wui-usermenu-text`,children:[h(`span`,{className:`wui-usermenu-name`,children:c}),l&&h(`span`,{className:`wui-usermenu-role`,children:l})]}),h(r,{name:`chevron-down`,size:14,className:`wui-usermenu-caret`})]}),g(`div`,{className:`dropdown-menu dropdown-menu-end wui-usermenu-menu${a?` show`:``}`,"aria-labelledby":n,"data-bs-popper":a?`static`:void 0,children:[g(`div`,{className:`wui-usermenu-head`,children:[h(i,{name:c,src:f,size:`lg`,tone:`auto`}),g(`div`,{className:`wui-usermenu-who`,children:[h(`div`,{className:`wui-usermenu-name`,children:c}),l&&h(`div`,{className:`wui-usermenu-role`,children:l}),S.length>0&&g(`div`,{className:`wui-usermenu-roles`,children:[h(`span`,{className:`wui-usermenu-roles-label`,children:S.length===1?`Role:`:`Roles:`}),` ${S.join(`, `)}`]})]})]}),p&&w(p,g(m,{children:[h(r,{name:`user`,size:18}),_]}),void 0,C),x.map(e=>{if(e.divider)return h(`hr`,{className:`dropdown-divider`},e.key);let t=g(m,{children:[e.icon&&h(r,{name:e.icon,size:18}),e.label]}),n=()=>{e.onClick?.(),C()};return e.href?w(e.href,t,e.key,n):h(`button`,{type:`button`,className:`dropdown-item`,onClick:n,children:t},e.key)}),y?h(`form`,{method:`post`,action:y,className:`wui-usermenu-logout`,children:h(`button`,{type:`submit`,className:`dropdown-item danger`,children:T})}):v&&h(`button`,{type:`button`,className:`dropdown-item danger`,onClick:()=>{C(),v()},children:T})]})]})}function ee({config:e}){let t=u(),{open:n,setOpen:i,ref:a}=N(),{unread:o=0,items:s,loading:c=!1,onOpen:d,onMarkAllRead:_,viewAllHref:v,label:y=`Notifications`,emptyText:b=`You are all caught up.`}=e,[x,S]=p(``),C=f(o);l(()=>{C.current!==o&&(C.current=o,S(o===0?`No unread notifications`:`${T(o)} unread notifications`))},[o]);let w=null;return s?.length?w=h(`div`,{className:`wui-bell-items`,children:s.map((e,t)=>{let n=`wui-bell-item${e.read?` wui-bell-item-read`:``}`,i=g(m,{children:[h(`span`,{className:`wui-bell-dot`,"aria-hidden":`true`}),e.icon&&h(`span`,{className:`wui-bell-icon`,children:h(r,{name:e.icon,size:18})}),g(`span`,{className:`wui-bell-body`,children:[!e.read&&h(`span`,{className:`visually-hidden`,children:`Unread: `}),h(`span`,{className:`wui-bell-item-title`,children:e.title}),e.time&&h(`span`,{className:`wui-bell-when`,children:e.time})]})]});return e.href?h(`a`,{className:n,href:e.href,"data-id":e.id,children:i},e.id??t):h(`div`,{className:n,"data-id":e.id,children:i},e.id??t)})}):c?w=h(`div`,{className:`wui-bell-state`,children:`Loading…`}):s&&(w=h(`div`,{className:`wui-bell-state`,children:b})),g(`div`,{className:`dropdown wui-bell`,ref:a,children:[g(`button`,{type:`button`,id:t,className:`topbar-icon-btn wui-bell-trigger`,"aria-expanded":n,"aria-label":o===0?y:`${y}, ${T(o)} unread`,onClick:()=>{let e=!n;i(e),e&&d?.()},children:[h(r,{name:`notification`,size:20}),h(`span`,{className:`wui-bell-count`,"aria-hidden":`true`,hidden:o===0,children:T(o)})]}),h(`span`,{className:`visually-hidden`,"aria-live":`polite`,children:x}),g(`div`,{className:`dropdown-menu dropdown-menu-end wui-bell-menu${n?` show`:``}`,"aria-labelledby":t,"data-bs-popper":n?`static`:void 0,children:[g(`div`,{className:`wui-bell-head`,children:[h(`span`,{className:`wui-bell-title`,children:y}),_&&h(`button`,{type:`button`,className:`wui-bell-markall`,onClick:_,children:`Mark all read`})]}),h(`div`,{className:`wui-bell-list`,"aria-busy":c||void 0,children:w}),v&&h(`a`,{className:`wui-bell-foot`,href:v,children:`View all`})]})]})}var F=e=>!!e&&(e.isContentEditable||/^(INPUT|TEXTAREA|SELECT)$/.test(e.tagName));function te({config:e}){let t=u(),{value:n=``,onChange:i,results:a=null,loading:o=!1,onSelect:s,onSubmit:c,placeholder:m=`Search`}=e,[_,v]=p(!1),[y,b]=p(!1),[x,S]=p({results:null,index:-1}),C=x.results===a?x.index:-1,w=e=>S({results:a,index:e}),T=f(null),E=f(null),D=f([]),O=d(()=>(a??[]).flatMap(e=>e.hits??[]),[a]),k=a!=null&&!y,A=O.length;l(()=>{let e=e=>{e.key!==`/`||e.ctrlKey||e.metaKey||e.altKey||F(e.target)||(e.preventDefault(),v(!0),E.current?.focus())},t=e=>{T.current?.contains(e.target)||(b(!0),v(!1))};return document.addEventListener(`keydown`,e),document.addEventListener(`pointerdown`,t),()=>{document.removeEventListener(`keydown`,e),document.removeEventListener(`pointerdown`,t)}},[]);let j=e=>{if(e.key===`ArrowDown`||e.key===`ArrowUp`){if(!k||A===0)return;e.preventDefault(),w((C+(e.key===`ArrowDown`?1:-1)+A)%A)}else e.key===`Enter`?k&&C>=0&&D.current[C]?(e.preventDefault(),D.current[C].click()):c&&n.trim()!==``&&(e.preventDefault(),c(n.trim())):e.key===`Escape`&&(k?(e.preventDefault(),b(!0)):_&&(e.preventDefault(),v(!1)))},M=-1;return D.current=[],g(`div`,{className:`wui-topsearch${_?` is-open`:``}${o?` is-loading`:``}`,ref:T,children:[h(`button`,{type:`button`,className:`topbar-icon-btn wui-topsearch-open`,"aria-label":m,"aria-expanded":_,"aria-controls":`${t}-panel`,onClick:()=>{let e=!_;v(e),e&&E.current?.focus()},children:h(r,{name:`search`,size:20})}),g(`div`,{className:`wui-topsearch-panel`,id:`${t}-panel`,children:[g(`div`,{className:`search-wrap`,children:[h(r,{name:`search`,size:18,className:`search-icon`}),h(`input`,{ref:E,type:`search`,className:`form-control input search-input`,id:`${t}-input`,placeholder:m,"aria-label":m,role:`combobox`,"aria-autocomplete":`list`,"aria-expanded":k,"aria-controls":`${t}-list`,"aria-activedescendant":k&&C>=0?`${t}-opt-${C}`:void 0,autoComplete:`off`,value:n,onChange:e=>{b(!1),i?.(e.target.value)},onKeyDown:j})]}),h(`div`,{className:`wui-topsearch-results`,id:`${t}-list`,role:`listbox`,"aria-label":`Search results`,hidden:!k,children:k&&g(`div`,{className:`wui-topsearch-groups`,role:`presentation`,children:[A===0&&g(`div`,{className:`wui-topsearch-empty`,role:`option`,"aria-disabled":`true`,"aria-selected":`false`,children:[`No results for “`,n,`”`]}),a.filter(e=>e.hits?.length).map((e,n)=>g(`div`,{className:`wui-topsearch-group`,role:`group`,"aria-label":e.label??``,children:[e.label&&h(`div`,{className:`wui-topsearch-group-label`,role:`presentation`,children:e.label}),e.hits.map(e=>{M+=1;let n=M;return g(`a`,{className:`wui-topsearch-hit${n===C?` is-active`:``}`,role:`option`,"aria-selected":n===C,id:`${t}-opt-${n}`,href:e.href,ref:e=>{D.current[n]=e},onClick:t=>s?.(e,t),children:[e.icon&&h(`span`,{className:`wui-topsearch-hit-icon`,children:h(r,{name:e.icon,size:18})}),g(`span`,{className:`wui-topsearch-hit-text`,children:[h(`span`,{className:`wui-topsearch-hit-title`,children:e.title}),e.subtitle&&h(`span`,{className:`wui-topsearch-hit-sub`,children:e.subtitle})]})]},`${e.href}-${n}`)})]},e.label??n))]})})]}),h(`span`,{className:`visually-hidden`,"aria-live":`polite`,children:k?A===0?`No results`:`${A} ${A===1?`result`:`results`}`:``})]})}export{E as default};
+import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import{devWarn as t}from"../lib/devWarn.js";import n from"./warnInvalidValue.js";import r from"./warnUnknownProps.js";import i from"./AppIcon.js";import a from"./AppAvatar.js";import{navMatchScore as o}from"../lib/navMatch.js";import{SHELL_FOLDED_COOKIE as s,readNavFolded as c,readShellCollapsed as l,writeNavFolded as u,writeShellCollapsed as d}from"../lib/shellCookie.js";import{initScrollEdges as f}from"@webority/ui-elements/helpers";import{useEffect as p,useId as m,useMemo as h,useRef as g,useState as _}from"react";import{Fragment as v,jsx as y,jsxs as b}from"react/jsx-runtime";var x=99,S=4,C=5,w=/^[a-z0-9-]+$/,T=[`prefix`,`exact`],E=[`comfortable`,`compact`],D=[`default`,`primary`],O=[`linear`,`outline`,`bold`,`bulk`,`broken`,`twotone`],k=new Set([`key`,`label`,`icon`,`iconVariant`,`iconSize`,`href`,`badge`,`badgeTone`,`badgeTitle`,`trailingIcon`,`active`,`match`,`matchAlso`,`tab`,`tabLabel`,`children`]),A=e=>e>x?`${x}+`:String(e);function j(t){let{groups:a=[],brand:o,sidebarStart:m,sidebarStartCompact:v,sidebarFooter:x,topbarStart:S,topbarEnd:C,footer:w,launcher:T,children:k,collapsed:A,onCollapsedChange:j,noSidebar:N=!1,density:P=`comfortable`,itemHeight:F,iconVariant:I,topbarTone:L=`default`,navLabel:B=`Main navigation`,linkComponent:V,currentPath:H,rememberCollapsed:U=!1,collapsedCookie:W=`wui-shell-collapsed`,foldedCookie:G=s,tabBarLabel:ae=`Quick navigation`,moreLabel:oe=`More`,userMenu:K,notifications:q,search:se,className:ce=``,style:le,...ue}=t;r(`AppShell`,ue),n(`AppShell`,`density`,P,E),n(`AppShell`,`topbarTone`,L,D),n(`AppShell`,`iconVariant`,I,O);let de=F>0?{...le,"--wui-nav-item-height":`${F}px`}:le,[fe,pe]=_(()=>U&&A===void 0&&typeof document<`u`?l(W)??!1:!1),[J,Y]=_(!1),[me,he]=_(!1),[ge,_e]=_(!1),X=g(null),Z=A??fe,ve=()=>{let e=!Z;A===void 0&&pe(e),U&&d(e,W),j?.(e)},ye=a.some(e=>e.collapsible),[be,xe]=_(()=>ye&&typeof document<`u`?c(G):new Set),Se=e=>{let t=new Set(be);t.has(e)?t.delete(e):t.add(e),xe(t),u(t,G)},Q=h(()=>M(a,H),[a,H]),$=N?null:ee(Q);return p(()=>{let e=()=>he(window.scrollY>4);return e(),window.addEventListener(`scroll`,e,{passive:!0}),()=>window.removeEventListener(`scroll`,e)},[]),p(()=>{f()},[]),p(()=>{let e=X.current,t=e?.querySelector(`.app-nav-item[aria-current="page"]`);if(!e||!t)return;let n=t.getBoundingClientRect(),r=e.getBoundingClientRect();n.top<r.top?e.scrollTop-=r.top-n.top:n.bottom>r.bottom&&(e.scrollTop+=n.bottom-r.bottom)},[]),p(()=>{let e=X.current;if(!e)return;let t=()=>_e(e.scrollHeight>e.clientHeight);if(t(),typeof ResizeObserver>`u`)return;let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[Q]),p(()=>{if(!J)return;let e=e=>{e.key===`Escape`&&Y(!1)};return document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[J]),b(`div`,{className:[`app-shell`,Z?`collapsed`:``,N?`no-sidebar`:``,J?`mobile-open`:``,ce].filter(Boolean).join(` `),"data-density":P===`compact`?`compact`:void 0,"data-wui-folded-cookie":ye?G:void 0,style:de,...e(`AppShell`,t),...ue,children:[y(`a`,{className:`wui-skip-link`,href:`#main-content`,children:`Skip to content`}),b(`aside`,{className:`app-sidebar`,children:[o&&y(`div`,{className:`app-sidebar-brand`,children:o}),m&&y(`div`,{className:`app-sidebar-start`,children:m}),v&&y(`div`,{className:`app-sidebar-start-compact`,children:v}),y(`nav`,{className:`app-sidebar-scroll`,"aria-label":B,ref:X,tabIndex:ge?0:void 0,children:Q.map((e,t)=>{let n=e.items.map(e=>e.header==null?y(z,{item:e,linkComponent:V,onNavigate:()=>Y(!1),iconVariant:I},e.key??e.href??e.label):y(`div`,{className:`wui-nav-header`,children:e.header},e.key??e.header));if(!e.collapsible)return b(`div`,{className:`app-nav-group`,children:[e.label&&y(`div`,{className:`app-nav-group-label`,children:e.label}),n,e.after&&y(`div`,{className:`wui-nav-group-after`,children:e.after})]},e.key??e.label??`group-${t}`);let r=!be.has(e.key)||!!R(e.items),a=`wui-nav-group-${e.key}`;return b(`div`,{className:`app-nav-group wui-nav-group-collapsible${r?``:` wui-nav-group-folded`}`,"data-wui-nav-group":e.key,children:[b(`button`,{type:`button`,className:`app-nav-group-label wui-nav-group-toggle`,"aria-expanded":r,"aria-controls":a,onClick:()=>Se(e.key),children:[y(`span`,{className:`wui-nav-group-text`,children:e.label}),y(`span`,{className:`wui-nav-group-caret`,children:y(i,{name:`chevron-down`,size:16})})]}),b(`div`,{className:`wui-nav-group-body`,id:a,children:[n,e.after&&y(`div`,{className:`wui-nav-group-after`,children:e.after})]})]},e.key??`group-${t}`)})}),x&&y(`div`,{className:`app-sidebar-foot`,children:x}),!N&&y(`button`,{type:`button`,className:`app-sidebar-toggle`,onClick:ve,"aria-label":Z?`Expand navigation`:`Collapse navigation`,"aria-expanded":!Z,children:y(i,{name:`chevrons-left`,size:20})})]}),b(`div`,{className:`app-main`,children:[b(`header`,{className:`app-topbar${me?` scrolled`:``}`,"data-tone":L===`primary`?`primary`:void 0,children:[b(`div`,{className:`app-topbar-start`,children:[y(`button`,{type:`button`,className:`app-topbar-menu`,onClick:()=>Y(!0),"aria-label":`Open navigation`,"aria-expanded":J,children:y(i,{name:`menu`,size:18})}),S,se&&y(ie,{config:se})]}),b(`div`,{className:`app-topbar-end`,children:[C,q&&y(re,{config:q}),K&&y(ne,{config:K,linkComponent:V})]})]}),y(`main`,{className:`app-content`,id:`main-content`,children:k}),w&&y(`footer`,{className:`app-footer`,children:w})]}),T&&y(`div`,{className:`wui-shell-launcher`,children:T}),$&&b(`nav`,{className:`wui-tabbar`,"aria-label":ae,children:[$.tabs.map(e=>y(te,{tab:e,linkComponent:V,iconVariant:I},e.key??e.href)),$.hasMore&&b(`button`,{type:`button`,className:`wui-tabbar-item${$.moreActive?` active`:``}`,onClick:()=>Y(!0),children:[y(`span`,{className:`wui-tabbar-icon`,children:y(i,{name:`more`,size:24})}),y(`span`,{className:`wui-tabbar-label`,children:oe})]})]}),y(`button`,{type:`button`,className:`app-scrim`,onClick:()=>Y(!1),"aria-label":`Close navigation`,tabIndex:J?0:-1})]})}function M(e,t){for(let t of e)t.collapsible&&L(t);let i=(e,t=!1)=>(e??[]).map(e=>Array.isArray(e.children)?{...e,children:i(e.children)}:{...e}).filter(e=>P(e)?t:(e.children?.length??0)>0||!!e.href),a=e.map(e=>({...e,items:F(i(e.items,!0))})).filter(e=>e.items.some(e=>!P(e))),s=[],c=e=>{for(let t of e)P(t)||(s.push(t),t.children&&c(t.children))};for(let e of a)c(e.items);for(let e of s)r(`AppShell items`,N(e)),n(`AppShell`,`match`,e.match,T),n(`AppShell`,`iconVariant`,e.iconVariant,O);let l=null;if(t!=null&&!s.some(e=>e.active===!0)){let e=-1;for(let n of s){if(n.active!=null||n.children?.length&&!n.href)continue;let r=o(t,n.href,{exact:n.match===`exact`,also:n.matchAlso});if(r<0)continue;let i=n.match===`exact`&&o(t,n.href,{exact:!0})>=0?1/0:r;i>e&&(e=i,l=n)}}for(let e of s)e.active=e.active??e===l;return a}function N(e){return Object.fromEntries(Object.entries(e).filter(([e])=>!k.has(e)))}var P=e=>e.header!=null;function F(e){return e.filter((t,n)=>{if(!P(t))return!0;let r=e.findIndex((e,t)=>t>n&&P(e));return e.slice(n+1,r<0?void 0:r).length>0})}var I=new Set;function L(e){if(e.key!=null&&w.test(e.key))return;let n=e.key==null?`<AppShell> a collapsible group needs a key so its folded state can be remembered.`:`<AppShell> collapsible group key "${e.key}" must use lower-case letters, digits and hyphens.`,r=!0;try{r=process.env.NODE_ENV!==`production`}catch{r=!0}!r||I.has(n)||(I.add(n),t(n))}function ee(e){let t=[],n=e=>{for(let r of e)P(r)||(r.children?.length?n(r.children):t.push(r))};for(let t of e)n(t.items);let r=t.filter(e=>e.tab);if(r.length===0)return null;let i=r.length<t.length,a=i?S:C;if(r.length>a)throw Error(`<AppShell>: ${r.length} items carry tab: true, but the phone tab bar holds ${a} (${i?`4 plus More, because other items exist`:`5 when every item is a tab`}). Flag fewer items.`);return{tabs:r,hasMore:i,moreActive:t.some(e=>!e.tab&&e.active)}}function te({tab:e,linkComponent:t,iconVariant:n}){let r=`wui-tabbar-item${e.active?` active`:``}`,a=b(v,{children:[e.icon&&y(`span`,{className:`wui-tabbar-icon`,children:typeof e.icon==`string`?y(i,{name:e.icon,size:24,variant:e.iconVariant??n}):e.icon}),y(`span`,{className:`wui-tabbar-label`,children:e.tabLabel??e.label}),e.badge!=null&&y(`span`,{className:`wui-tabbar-badge${e.badgeTone?` tone-${e.badgeTone}`:``}`,title:e.badgeTitle||void 0,children:e.badge})]}),o=e.active?`page`:void 0;return t?y(t,{className:r,to:e.href,"aria-current":o,children:a}):y(`a`,{className:r,href:e.href,"aria-current":o,children:a})}function R(e){for(let t of e){if(t.active)return t;let e=t.children?.length?R(t.children):void 0;if(e)return e}}function z({item:e,linkComponent:t,onNavigate:n,depth:r=0,iconVariant:a}){let o=r>0,s=r>1?` wui-nav-depth-${Math.min(r,6)}`:``,c=Array.isArray(e.children)&&e.children.length>0,l=c?R(e.children):void 0,u=!!l,d=l?l.key??l.href??l.label:null,[f,m]=_(u);p(()=>{d!=null&&m(!0)},[d]);let h=typeof e.label==`string`?e.label:void 0,g=!o&&e.icon&&y(`span`,{className:`app-nav-icon`,children:typeof e.icon==`string`?y(i,{name:e.icon,size:e.iconSize??22,variant:e.iconVariant??a}):e.icon}),x=e.badge!=null&&y(`span`,{className:`app-nav-badge${e.badgeTone?` tone-${e.badgeTone}`:``}`,title:e.badgeTitle||void 0,children:e.badge}),S=b(v,{children:[g,y(`span`,{className:`app-nav-text`,children:e.label}),x,e.trailingIcon&&y(`span`,{className:`app-nav-trailing`,children:typeof e.trailingIcon==`string`?y(i,{name:e.trailingIcon,size:16}):e.trailingIcon})]}),C=e.active?`page`:void 0;if(c){let c=y(`div`,{className:`app-nav-sub${f?` expanded`:``}`,inert:!f,"aria-hidden":!f||void 0,children:y(`div`,{className:`app-nav-sub-inner`,children:e.children.map(e=>y(z,{item:e,linkComponent:t,onNavigate:n,depth:r+1,iconVariant:a},e.key??e.href))})});if(e.href){let r=t?y(t,{className:`wui-nav-split-link`,to:e.href,"aria-current":C,onClick:n,children:S}):y(`a`,{className:`wui-nav-split-link`,href:e.href,"aria-current":C,onClick:n,children:S});return b(v,{children:[b(`div`,{className:`app-nav-item has-children wui-nav-split${o?` app-nav-subitem`:``}${u||e.active?` active`:``}${s}`,"data-label":h,children:[r,y(`button`,{type:`button`,className:`app-nav-caret wui-nav-split-toggle`,"aria-expanded":f,"aria-label":`Show or hide ${h??``} pages`,onClick:()=>m(e=>!e),children:y(i,{name:`chevron-right`,size:16})})]}),c]})}return b(v,{children:[b(`button`,{type:`button`,className:`app-nav-item${o?` app-nav-subitem`:``} has-children${u?` active`:``}${s}`,"aria-expanded":f,"data-label":h,onClick:()=>m(e=>!e),children:[g,y(`span`,{className:`app-nav-text`,children:e.label}),x,y(`span`,{className:`app-nav-caret`,children:y(i,{name:`chevron-right`,size:16})})]}),c]})}let w=`app-nav-item${o?` app-nav-subitem`:``}${e.active?` active`:``}${s}`;return t?y(t,{className:w,to:e.href,"aria-current":C,"data-label":h,onClick:n,children:S}):y(`a`,{className:w,href:e.href,"aria-current":C,"data-label":h,onClick:n,children:S})}function B(){let[e,t]=_(!1),n=g(null);return p(()=>{if(!e)return;let r=e=>{n.current?.contains(e.target)||t(!1)},i=e=>{e.key===`Escape`&&(t(!1),n.current?.querySelector(`button`)?.focus())};return document.addEventListener(`mousedown`,r),document.addEventListener(`keydown`,i),()=>{document.removeEventListener(`mousedown`,r),document.removeEventListener(`keydown`,i)}},[e]),{open:e,setOpen:t,ref:n}}function ne({config:e,linkComponent:t}){let n=m(),{open:r,setOpen:o,ref:s}=B(),{name:c,role:l,roles:u=[],photo:d,profileHref:f,profileLabel:p=`My profile`,onLogout:h,logoutAction:g,logoutLabel:_=`Sign out`,items:x=[]}=e;if(!c)throw Error(`<AppShell> userMenu.name is required; the trigger and the avatar are named from it.`);let S=u.map(e=>(e??``).trim()).filter(Boolean),C=()=>o(!1),w=(e,n,r,i)=>t?y(t,{className:`dropdown-item`,to:e,onClick:i,children:n},r):y(`a`,{className:`dropdown-item`,href:e,onClick:i,children:n},r),T=b(v,{children:[y(i,{name:`log-out`,size:18}),_]});return b(`div`,{className:`dropdown wui-usermenu`,ref:s,children:[b(`button`,{type:`button`,id:n,className:`wui-usermenu-trigger`,"aria-expanded":r,"aria-label":`Account menu for ${c}`,onClick:()=>o(e=>!e),children:[y(a,{name:c,src:d,tone:`auto`}),b(`span`,{className:`wui-usermenu-text`,children:[y(`span`,{className:`wui-usermenu-name`,children:c}),l&&y(`span`,{className:`wui-usermenu-role`,children:l})]}),y(i,{name:`chevron-down`,size:14,className:`wui-usermenu-caret`})]}),b(`div`,{className:`dropdown-menu dropdown-menu-end wui-usermenu-menu${r?` show`:``}`,"aria-labelledby":n,"data-bs-popper":r?`static`:void 0,children:[b(`div`,{className:`wui-usermenu-head`,children:[y(a,{name:c,src:d,size:`lg`,tone:`auto`}),b(`div`,{className:`wui-usermenu-who`,children:[y(`div`,{className:`wui-usermenu-name`,children:c}),l&&y(`div`,{className:`wui-usermenu-role`,children:l}),S.length>0&&b(`div`,{className:`wui-usermenu-roles`,children:[y(`span`,{className:`wui-usermenu-roles-label`,children:S.length===1?`Role:`:`Roles:`}),` ${S.join(`, `)}`]})]})]}),f&&w(f,b(v,{children:[y(i,{name:`user`,size:18}),p]}),void 0,C),x.map(e=>{if(e.divider)return y(`hr`,{className:`dropdown-divider`},e.key);let t=b(v,{children:[e.icon&&y(i,{name:e.icon,size:18}),e.label]}),n=()=>{e.onClick?.(),C()};return e.href?w(e.href,t,e.key,n):y(`button`,{type:`button`,className:`dropdown-item`,onClick:n,children:t},e.key)}),g?y(`form`,{method:`post`,action:g,className:`wui-usermenu-logout`,children:y(`button`,{type:`submit`,className:`dropdown-item danger`,children:T})}):h&&y(`button`,{type:`button`,className:`dropdown-item danger`,onClick:()=>{C(),h()},children:T})]})]})}function re({config:e}){let t=m(),{open:n,setOpen:r,ref:a}=B(),{unread:o=0,items:s,loading:c=!1,onOpen:l,onMarkAllRead:u,viewAllHref:d,label:f=`Notifications`,emptyText:h=`You are all caught up.`}=e,[x,S]=_(``),C=g(o);p(()=>{C.current!==o&&(C.current=o,S(o===0?`No unread notifications`:`${A(o)} unread notifications`))},[o]);let w=null;return s?.length?w=y(`div`,{className:`wui-bell-items`,children:s.map((e,t)=>{let n=`wui-bell-item${e.read?` wui-bell-item-read`:``}`,r=b(v,{children:[y(`span`,{className:`wui-bell-dot`,"aria-hidden":`true`}),e.icon&&y(`span`,{className:`wui-bell-icon`,children:y(i,{name:e.icon,size:18})}),b(`span`,{className:`wui-bell-body`,children:[!e.read&&y(`span`,{className:`visually-hidden`,children:`Unread: `}),y(`span`,{className:`wui-bell-item-title`,children:e.title}),e.time&&y(`span`,{className:`wui-bell-when`,children:e.time})]})]});return e.href?y(`a`,{className:n,href:e.href,"data-id":e.id,children:r},e.id??t):y(`div`,{className:n,"data-id":e.id,children:r},e.id??t)})}):c?w=y(`div`,{className:`wui-bell-state`,children:`Loading…`}):s&&(w=y(`div`,{className:`wui-bell-state`,children:h})),b(`div`,{className:`dropdown wui-bell`,ref:a,children:[b(`button`,{type:`button`,id:t,className:`topbar-icon-btn wui-bell-trigger`,"aria-expanded":n,"aria-label":o===0?f:`${f}, ${A(o)} unread`,onClick:()=>{let e=!n;r(e),e&&l?.()},children:[y(i,{name:`notification`,size:20}),y(`span`,{className:`wui-bell-count`,"aria-hidden":`true`,hidden:o===0,children:A(o)})]}),y(`span`,{className:`visually-hidden`,"aria-live":`polite`,children:x}),b(`div`,{className:`dropdown-menu dropdown-menu-end wui-bell-menu${n?` show`:``}`,"aria-labelledby":t,"data-bs-popper":n?`static`:void 0,children:[b(`div`,{className:`wui-bell-head`,children:[y(`span`,{className:`wui-bell-title`,children:f}),u&&y(`button`,{type:`button`,className:`wui-bell-markall`,onClick:u,children:`Mark all read`})]}),y(`div`,{className:`wui-bell-list`,"aria-busy":c||void 0,children:w}),d&&y(`a`,{className:`wui-bell-foot`,href:d,children:`View all`})]})]})}var V=e=>!!e&&(e.isContentEditable||/^(INPUT|TEXTAREA|SELECT)$/.test(e.tagName));function ie({config:e}){let t=m(),{value:n=``,onChange:r,results:a=null,loading:o=!1,onSelect:s,onSubmit:c,placeholder:l=`Search`}=e,[u,d]=_(!1),[f,v]=_(!1),[x,S]=_({results:null,index:-1}),C=x.results===a?x.index:-1,w=e=>S({results:a,index:e}),T=g(null),E=g(null),D=g([]),O=h(()=>(a??[]).flatMap(e=>e.hits??[]),[a]),k=a!=null&&!f,A=O.length;p(()=>{let e=e=>{e.key!==`/`||e.ctrlKey||e.metaKey||e.altKey||V(e.target)||(e.preventDefault(),d(!0),E.current?.focus())},t=e=>{T.current?.contains(e.target)||(v(!0),d(!1))};return document.addEventListener(`keydown`,e),document.addEventListener(`pointerdown`,t),()=>{document.removeEventListener(`keydown`,e),document.removeEventListener(`pointerdown`,t)}},[]);let j=e=>{if(e.key===`ArrowDown`||e.key===`ArrowUp`){if(!k||A===0)return;e.preventDefault(),w((C+(e.key===`ArrowDown`?1:-1)+A)%A)}else e.key===`Enter`?k&&C>=0&&D.current[C]?(e.preventDefault(),D.current[C].click()):c&&n.trim()!==``&&(e.preventDefault(),c(n.trim())):e.key===`Escape`&&(k?(e.preventDefault(),v(!0)):u&&(e.preventDefault(),d(!1)))},M=-1;return D.current=[],b(`div`,{className:`wui-topsearch${u?` is-open`:``}${o?` is-loading`:``}`,ref:T,children:[y(`button`,{type:`button`,className:`topbar-icon-btn wui-topsearch-open`,"aria-label":l,"aria-expanded":u,"aria-controls":`${t}-panel`,onClick:()=>{let e=!u;d(e),e&&E.current?.focus()},children:y(i,{name:`search`,size:20})}),b(`div`,{className:`wui-topsearch-panel`,id:`${t}-panel`,children:[b(`div`,{className:`search-wrap`,children:[y(i,{name:`search`,size:18,className:`search-icon`}),y(`input`,{ref:E,type:`search`,className:`form-control input search-input`,id:`${t}-input`,placeholder:l,"aria-label":l,role:`combobox`,"aria-autocomplete":`list`,"aria-expanded":k,"aria-controls":`${t}-list`,"aria-activedescendant":k&&C>=0?`${t}-opt-${C}`:void 0,autoComplete:`off`,value:n,onChange:e=>{v(!1),r?.(e.target.value)},onKeyDown:j})]}),y(`div`,{className:`wui-topsearch-results`,id:`${t}-list`,role:`listbox`,"aria-label":`Search results`,hidden:!k,children:k&&b(`div`,{className:`wui-topsearch-groups`,role:`presentation`,children:[A===0&&b(`div`,{className:`wui-topsearch-empty`,role:`option`,"aria-disabled":`true`,"aria-selected":`false`,children:[`No results for “`,n,`”`]}),a.filter(e=>e.hits?.length).map((e,n)=>b(`div`,{className:`wui-topsearch-group`,role:`group`,"aria-label":e.label??``,children:[e.label&&y(`div`,{className:`wui-topsearch-group-label`,role:`presentation`,children:e.label}),e.hits.map(e=>{M+=1;let n=M;return b(`a`,{className:`wui-topsearch-hit${n===C?` is-active`:``}`,role:`option`,"aria-selected":n===C,id:`${t}-opt-${n}`,href:e.href,ref:e=>{D.current[n]=e},onClick:t=>s?.(e,t),children:[e.icon&&y(`span`,{className:`wui-topsearch-hit-icon`,children:y(i,{name:e.icon,size:18})}),b(`span`,{className:`wui-topsearch-hit-text`,children:[y(`span`,{className:`wui-topsearch-hit-title`,children:e.title}),e.subtitle&&y(`span`,{className:`wui-topsearch-hit-sub`,children:e.subtitle})]})]},`${e.href}-${n}`)})]},e.label??n))]})})]}),y(`span`,{className:`visually-hidden`,"aria-live":`polite`,children:k?A===0?`No results`:`${A} ${A===1?`result`:`results`}`:``})]})}export{j as default};

package/dist/guidance.json

@@ -2,7 +2,7 @@
   "format": "webority-guidance/1",
   "package": {
     "name": "@webority/ui-react",
-    "version": "0.102.3"
+    "version": "0.103.0"
   },
   "components": [
     {

package/dist/lib/shellCookie.js

@@ -1 +1 @@
-var e=`wui-shell-collapsed`,t=e=>e instanceof DOMException&&e.name===`SecurityError`;function n(n=e,r=document){let i;try{i=r.cookie}catch(e){if(t(e))return null;throw e}for(let e of i.split(`;`)){let t=e.indexOf(`=`);if(t<0||e.slice(0,t).trim()!==n)continue;let r=e.slice(t+1).trim();return r===`1`||r!==`0`&&null}return null}function r(n,r=e,i=document){try{i.cookie=`${r}=${n?`1`:`0`}; Path=/; Max-Age=31536000; SameSite=Lax`}catch(e){if(!t(e))throw e}}export{e as SHELL_COLLAPSED_COOKIE,n as readShellCollapsed,r as writeShellCollapsed};
+var e=`wui-shell-collapsed`,t=31536e3,n=e=>e instanceof DOMException&&e.name===`SecurityError`;function r(t=e,r=document){let i;try{i=r.cookie}catch(e){if(n(e))return null;throw e}for(let e of i.split(`;`)){let n=e.indexOf(`=`);if(n<0||e.slice(0,n).trim()!==t)continue;let r=e.slice(n+1).trim();return r===`1`||r!==`0`&&null}return null}function i(r,i=e,a=document){try{a.cookie=`${i}=${r?`1`:`0`}; Path=/; Max-Age=${t}; SameSite=Lax`}catch(e){if(!n(e))throw e}}var a=`wui-nav-folded`;function o(e=a,t=document){let r;try{r=t.cookie}catch(e){if(n(e))return new Set;throw e}for(let t of r.split(`;`)){let n=t.indexOf(`=`);if(!(n<0||t.slice(0,n).trim()!==e))return new Set(t.slice(n+1).trim().split(`.`).filter(Boolean))}return new Set}function s(e,r=a,i=document){try{i.cookie=`${r}=${[...e].join(`.`)}; Path=/; Max-Age=${t}; SameSite=Lax`}catch(e){if(!n(e))throw e}}export{e as SHELL_COLLAPSED_COOKIE,a as SHELL_FOLDED_COOKIE,o as readNavFolded,r as readShellCollapsed,s as writeNavFolded,i as writeShellCollapsed};

package/dist/types/components/AppActionIcon.d.ts

@@ -16,6 +16,8 @@
  * @param {'auto'|'top'|'bottom'|'start'|'end'} [props.tooltipPlacement]
  * @param {string} [props.shortcut]
  * @param {boolean} [props.danger]
+ * @param {"comfortable"|"compact"} [props.density]
+ * @param {boolean} [props.neutral]
  * @param {boolean} [props.disabled]
  * @param {number} [props.size]
  * @param {() => void} [props.onClick]
@@ -48,6 +50,16 @@ export default function AppActionIcon(props: {
      * @default false
      */
     danger?: boolean;
+    /**
+     * How much room surrounds the glyph: comfortable keeps an 8px ring, compact 4px (a 16px glyph in a 24px disc).
+     * @default "comfortable"
+     */
+    density?: "comfortable" | "compact";
+    /**
+     * Muted ink with a muted surface on hover, for an action on a card or a quiet surface. Not with danger.
+     * @default false
+     */
+    neutral?: boolean;
     /**
      * Turns the action off.
      * @default false

package/dist/types/components/AppChoiceChip.d.ts

@@ -11,6 +11,7 @@
  * @param {import('react').ReactNode} props.children
  * @param {import('react').ReactNode} [props.count]
  * @param {'sm'|'md'|'lg'} [props.size]
+ * @param {'soft'|'solid'} [props.variant]
  * @param {boolean} [props.disabled]
  * @param {string} [props.className]
  */
@@ -37,6 +38,11 @@ export default function AppChoiceChip(props: {
      * @default "md"
      */
     size?: 'sm' | 'md' | 'lg';
+    /**
+     * Checked look: a soft primary tint (soft) or a primary fill with a translucent count (solid).
+     * @default "soft"
+     */
+    variant?: 'soft' | 'solid';
     /**
      * The chip dims and cannot be picked.
      * @default false

package/dist/types/components/AppDropdown.d.ts

@@ -12,10 +12,14 @@
  * @param {string} [props.icon]
  * @param {number} [props.iconSize]
  * @param {string} [props.toggleClassName]
+ * @param {"neutral"} [props.toggleVariant] A custom trigger that keeps the surrounding font and colour, with a
+ *   muted fill on hover and while open. Needs `trigger`.
+ * @param {"sm"|"md"|"lg"} [props.menuWidth] A fixed menu width (15, 20 or 25rem); long rows wrap instead of
+ *   widening the menu. Unset, the menu fits its rows.
  * @param {string} [props.label]
  * @param {"start"|"end"} [props.align]
  * @param {string} [props.ariaLabel]
- * @param {{ key: string, label?: string, icon?: string|import('react').ReactNode, image?: string, to?: string, onClick?: () => void, danger?: boolean, shortcut?: string, divider?: boolean, header?: string, hiddenFrom?: 'sm'|'md'|'lg'|'xl' }[]} [props.items]
+ * @param {{ key: string, label?: string, icon?: string|import('react').ReactNode, image?: string, to?: string, onClick?: () => void, danger?: boolean, disabled?: boolean, disabledReason?: string, shortcut?: string, divider?: boolean, header?: string, hiddenFrom?: 'sm'|'md'|'lg'|'xl' }[]} [props.items]
  * @param {string} [props.menuClassName]
  * @param {import('react').ElementType} [props.linkComponent] Component for `to` items (e.g. Link).
  * @param {import('react').ReactNode} [props.children] Rich menu content — renders inside the
@@ -37,6 +41,10 @@ export default function AppDropdown(props: {
     iconSize?: number;
     /** Class for the toggle button, replacing the default toggle look. */
     toggleClassName?: string;
+    /** neutral: a custom trigger that keeps the surrounding font and colour, with a muted fill on hover and while open. Needs trigger. */
+    toggleVariant?: "neutral";
+    /** A fixed menu width (15, 20 or 25rem); long rows wrap instead of widening the menu. Unset, the menu fits its rows. */
+    menuWidth?: "sm" | "md" | "lg";
     /** Tooltip and accessible name fallback for the toggle. */
     label?: string;
     /**
@@ -58,6 +66,8 @@ export default function AppDropdown(props: {
         to?: string;
         onClick?: () => void;
         danger?: boolean;
+        disabled?: boolean;
+        disabledReason?: string;
         shortcut?: string;
         divider?: boolean;
         header?: string;

package/dist/types/components/AppModal.d.ts

@@ -10,6 +10,8 @@
  * @param {'default'|'danger'|'success'|'warning'} [props.tone]
  * @param {boolean} [props.dismissible]
  * @param {() => void} props.onClose
+ * @param {() => void} [props.onBack] Shows a back arrow before the title and runs this when it is pressed.
+ * @param {string} [props.backLabel] The back arrow's accessible name.
  * @param {import('react').ReactNode} [props.footer]
  * @param {'sm'|'md'|'lg'|'xl'|'fullscreen'|number} [props.size]
  * @param {'center'|'top'} [props.placement]
@@ -43,6 +45,12 @@ export default function AppModal(props: {
      */
     dismissible?: boolean;
     onClose: () => void;
+    onBack?: () => void;
+    /**
+     * The accessible name of the back arrow shown when onBack is set.
+     * @default "Back"
+     */
+    backLabel?: string;
     /** Content pinned at the bottom, usually the action buttons. */
     footer?: import('react').ReactNode;
     /**

package/dist/types/components/AppSelect.d.ts

@@ -37,6 +37,11 @@ declare const AppSelect: import("react").ForwardRefExoticComponent<{
      * @default "Search..."
      */
     searchPlaceholder?: string;
+    /**
+     * Text shown in the menu when a search matches nothing.
+     * @default "No matches"
+     */
+    emptyText?: string;
     /**
      * Show the search box in the menu.
      * @default false

package/dist/types/components/AppShell.d.ts

@@ -1,6 +1,9 @@
 export type NavItemShape = {
     key?: string;
-    label: string;
+    /**
+     * Every row but a header row has one.
+     */
+    label?: string;
     /**
      * library icon name, or a node, so a
      * product with its own content-icon set (iconsax behind a product `Icon` seam) can use it.
@@ -59,6 +62,10 @@ export type NavItemShape = {
      * Sub-items — the row becomes an expandable parent.
      */
     children?: NavItemShape[];
+    /**
+     * A sub-heading row in a group, drawn with no link. Shown only while a link follows it.
+     */
+    header?: string;
 };
 export type UserMenuShape = {
     /**
@@ -186,7 +193,8 @@ export type SearchShape = {
  * each item's `active` decides, as before.
  *
  * @param {object} props
- * @param {{ label?: string, items: NavItemShape[], after?: import('react').ReactNode }[]} [props.groups]
+ * @param {{ key?: string, label?: string, collapsible?: boolean, items: NavItemShape[], after?: import('react').ReactNode }[]} [props.groups]
+ *   A `collapsible` group with a `key` folds from its heading; its folded state is remembered in `foldedCookie`.
  * @param {import('react').ReactNode} [props.brand]
  * @param {import('react').ReactNode} [props.sidebarStart]
  * @param {import('react').ReactNode} [props.sidebarStartCompact]
@@ -207,6 +215,7 @@ export type SearchShape = {
  * @param {string} [props.currentPath]
  * @param {boolean} [props.rememberCollapsed]
  * @param {string} [props.collapsedCookie]
+ * @param {string} [props.foldedCookie]
  * @param {string} [props.tabBarLabel]
  * @param {string} [props.moreLabel]
  * @param {UserMenuShape} [props.userMenu]
@@ -220,7 +229,9 @@ export default function AppShell(props: {
      * @default []
      */
     groups?: {
+        key?: string;
         label?: string;
+        collapsible?: boolean;
         items: NavItemShape[];
         after?: import('react').ReactNode;
     }[];
@@ -280,6 +291,11 @@ export default function AppShell(props: {
      * @default "wui-shell-collapsed"
      */
     collapsedCookie?: string;
+    /**
+     * The cookie that remembers the folded collapsible groups, as their keys joined by dots.
+     * @default "wui-nav-folded"
+     */
+    foldedCookie?: string;
     /**
      * Accessible name of the phone tab bar.
      * @default "Quick navigation"