@ni/ok-components 1.13.0 → 1.15.0

package/dist/esm/fv/toolbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/fv/toolbar/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,wCAAwC,CAAC;AACjE,OAAO,EAAE,MAAM,EAAE,MAAM,uCAAuC,CAAC;AAE/D,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEjF,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAmBtC;;GAEG;AACH,MAAM,OAAO,SAAU,SAAQ,OAAO;IAAtC;;QAEW,kBAAa,GAAG,cAAc,CAAC;QAEtC,gBAAgB;QAET,gBAAW,GAAG,KAAK,CAAC;QAQV,UAAK,GAAG,IAAI,GAAG,EAA0B,CAAC;QAC1C,mBAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC;QACjE,qBAAgB,GAAG,IAAI,gBAAgB,CAAC,OAAO,CAAC,EAAE;YAC/D,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE,CAAC;gBAC3B,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,YAAY,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;gBACzF,IAAI,IAAI,IAAI,MAAM,CAAC,aAAa,KAAK,QAAQ,EAAE,CAAC;oBAC5C,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC;gBACrC,CAAC;gBACD,IAAI,IAAI,IAAI,MAAM,CAAC,aAAa,KAAK,gBAAgB,EAAE,CAAC;oBACpD,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC;gBACnD,CAAC;YACL,CAAC;YACD,IAAI,CAAC,cAAc,EAAE,CAAC;QAC1B,CAAC,CAAC,CAAC;QAEc,qBAAgB,GAAG,IAAI,GAAG,EAAW,CAAC;QAC/C,UAAK,GAAG,CAAC,CAAC;QA4CD,mBAAc,GAAG,GAAS,EAAE;YACzC,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE,CAAC;gBACxC,OAAO;YACX,CAAC;YACD,IAAI,CAAC,KAAK,GAAG,qBAAqB,CAAC,GAAG,EAAE;gBACpC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;gBACf,IAAI,CAAC,YAAY,EAAE,CAAC;YACxB,CAAC,CAAC,CAAC;QACP,CAAC,CAAC;IAgKN,CAAC;IAlNmB,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAClC,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QAC9E,IAAI,CAAC,cAAc,EAAE,CAAC;IAC1B,CAAC;IAEe,oBAAoB;QAChC,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;QACjC,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC;QACnC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QACjF,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACjC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;QACf,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,EAAE,CAAC;YACrC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QAC3B,CAAC;QACD,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;QACnB,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,CAAC;QAC9B,KAAK,CAAC,oBAAoB,EAAE,CAAC;IACjC,CAAC;IAED,IAAuB,eAAe;QAClC,OAAO;YACH,GAAG,KAAK,CAAC,eAAe;YACxB,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;SACrD,CAAC;IACN,CAAC;IAEO,gBAAgB;QACpB,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,EAAE;YAChC,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,IAAI;YACf,aAAa,EAAE,IAAI;YACnB,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE;gBACb,iBAAiB,EAAE,eAAe,EAAE,UAAU,EAAE,QAAQ;gBACxD,gBAAgB,EAAE,YAAY,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO;aAC3D;SACJ,CAAC,CAAC;IACP,CAAC;IAYO,WAAW,CAAC,IAAoB;QACpC,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QACjC,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,gBAAgB,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QAClE,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;IAC3B,CAAC;IAEO,SAAS;QACb,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM,CAC5C,CAAC,KAAK,EAAmB,EAAE,CAAC,KAAK,YAAY,MAAM,IAAI,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAC/F,CAAC;QACF,KAAK,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACtC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;gBAC5B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;gBACvB,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;YAC9B,CAAC;QACL,CAAC;QACD,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE,CAAC;YAC3B,MAAM,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,iBAAiB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;YACnE,MAAM,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YAClC,MAAM,MAAM,GAAI,CAAC,OAAO,EAAE,MAAM,EAAE,UAAU,CAAW,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;YAChG,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC;YACnE,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;mBAChF,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC;mBAC1B,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,yBAAyB,CAAC,CAAC,EAAE,CAAC;gBACnF,MAAM,IAAI,KAAK,CAAC,kIAAkI,CAAC,CAAC;YACxJ,CAAC;YACD,IAAI,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;YAClC,IAAI,CAAC,IAAI,EAAE,CAAC;gBACR,MAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;gBAC/D,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;oBACrC,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;wBACnB,MAAM,CAAC,KAAK,EAAE,CAAC;oBACnB,CAAC;gBACL,CAAC,CAAC,CAAC;gBACH,IAAI,GAAG;oBACH,MAAM;oBACN,MAAM;oBACN,QAAQ;oBACR,MAAM,EAAE,MAAM,CAAC,MAAM;oBACrB,aAAa,EAAE,MAAM,CAAC,aAAa;oBACnC,QAAQ;iBACX,CAAC;gBACF,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;YACjC,CAAC;YACD,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;YACrB,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;YACzB,IAAI,CAAC,QAAQ,CAAC,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;YACzC,MAAM,KAAK,GAAG,CAAC,MAAM,CAAC,YAAY,CAAC,YAAY,CAAC;mBACzC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC;qBAC3B,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS;uBACzC,CAAC,IAAI,YAAY,OAAO,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC;qBAC9D,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;YACxD,IAAI,CAAC,KAAK,EAAE,CAAC;gBACT,MAAM,IAAI,KAAK,CAAC,sEAAsE,CAAC,CAAC;YAC5F,CAAC;YACD,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,KAAK,KAAK,EAAE,CAAC;gBACtC,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,KAAK,CAAC;YACtC,CAAC;QACL,CAAC;QACD,OAAO,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,CAAE,CAAC,CAAC;IAC1D,CAAC;IAEO,YAAY;QAChB,kEAAkE;QAClE,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC;QACnC,IAAI,CAAC;YACD,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC;YACjD,MAAM,YAAY,GAAG,SAAS,IAAI,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;YAC1E,MAAM,iBAAiB,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;YACjE,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;YAC/B,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;YAChC,MAAM,aAAa,GAAG,IAAI,YAAY,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC;YACzG,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,KAAK,aAAa,CAAC,CAAC;YACtE,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;gBACxC,IAAI,KAAK,CAAC,aAAa,KAAK,IAAI,EAAE,CAAC;oBAC/B,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;oBACrC,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBACxC,CAAC;YACL,CAAC;YACD,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAChC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;oBACpC,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;oBACnC,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;gBACrC,CAAC;YACL,CAAC;YACD,MAAM,QAAQ,GAAG,IAAI,GAAG,EAAkB,CAAC;YAC3C,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;gBACvB,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;gBACjC,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,gBAAgB,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC;gBACzE,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,UAAU,EAAE,CAAC;oBAChD,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;oBACnB,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC;gBAC9B,CAAC;YACL,CAAC;YACD,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;YACrC,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,EAAE;iBACvD,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC;YAC7C,2FAA2F;YAC3F,KAAK,MAAM,KAAK,IAAI,CAAC,MAAM,EAAE,UAAU,CAAU,EAAE,CAAC;gBAChD,KAAK,MAAM,IAAI,IAAI,OAAO,EAAE,CAAC;oBACzB,IAAI,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC;wBACd,MAAM;oBACV,CAAC;oBACD,IAAI,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;wBACrD,SAAS;oBACb,CAAC;oBACD,IAAI,KAAK,KAAK,MAAM,EAAE,CAAC;wBACnB,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAC;oBACxD,CAAC;yBAAM,CAAC;wBACJ,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC;wBAC1B,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;wBACnB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;oBAC5B,CAAC;gBACL,CAAC;YACL,CAAC;YACD,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;YAC/D,MAAM,aAAa,GAAG,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YAC/D,IAAI,aAAa,CAAC,MAAM,KAAK,iBAAiB,CAAC,MAAM;mBAC9C,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,iBAAiB,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC,EAAE,CAAC;gBAC5E,IAAI,CAAC,cAAc,CAAC,IAAI,GAAG,KAAK,CAAC;gBACjC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,GAAG,aAAa,CAAC,CAAC;YACxD,CAAC;YACD,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;gBACpB,IAAI,CAAC,cAAc,CAAC,IAAI,GAAG,KAAK,CAAC;YACrC,CAAC;YACD,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC;YAC/C,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;YACnD,IAAI,CAAC,uBAAuB,EAAE,CAAC;YAC/B,IAAI,WAAW,IAAI,QAAQ,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;gBAC3C,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,CAAC;YAChC,CAAC;iBAAM,IAAI,YAAY,EAAE,CAAC;gBACtB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;oBACnB,IAAI,IAAI,CAAC,cAAc,CAAC,IAAI,IAAI,SAAS,YAAY,WAAW,IAAI,SAAS,CAAC,WAAW,EAAE,CAAC;wBACxF,SAAS,CAAC,KAAK,EAAE,CAAC;oBACtB,CAAC;yBAAM,CAAC;wBACJ,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,CAAC;oBAChC,CAAC;gBACL,CAAC;qBAAM,CAAC;oBACJ,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAc,gBAAgB,CAAC,CAAC;yBAC3D,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,sBAAsB,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;gBAC5E,CAAC;YACL,CAAC;QACL,CAAC;gBAAS,CAAC;YACP,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC5B,CAAC;IACL,CAAC;IAEO,YAAY,CAAC,IAAa;QAC9B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxB,8EAA8E;QAC9E,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,MAAM,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC;QAC1D,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,KAAK,CAAC;IACvC,CAAC;IAEO,IAAI;QACR,MAAM,MAAM,GAAG,IAAI,CAAC,UAAW,CAAC,aAAa,CAAc,qBAAqB,CAAE,CAAC;QACnF,OAAO,MAAM,CAAC,WAAW,IAAI,MAAM,CAAC,WAAW,CAAC;IACpD,CAAC;CACJ;AAhPU;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;gDACA;AAI/B;IADN,UAAU;8CACgB;AA8O/B,MAAM,WAAW,GAAG,SAAS,CAAC,OAAO,CAAC;IAClC,QAAQ,EAAE,YAAY;IACtB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAC;AACpE,MAAM,CAAC,MAAM,YAAY,GAAG,eAAe,CAAC","sourcesContent":["import { attr, observable } from '@ni/fast-element';\nimport { DesignSystem } from '@ni/fast-foundation';\nimport { Toolbar } from '@ni/nimble-components/dist/esm/toolbar';\nimport { Button } from '@ni/nimble-components/dist/esm/button';\nimport type { MenuButton } from '@ni/nimble-components/dist/esm/menu-button';\nimport { MenuItem, menuItemTag } from '@ni/nimble-components/dist/esm/menu-item';\nimport type { Menu } from '@ni/nimble-components/dist/esm/menu';\nimport { styles } from './styles';\nimport { template } from './template';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'ok-fv-toolbar': FvToolbar;\n    }\n}\n\ntype Presentation = 'label' | 'icon' | 'overflow';\n\ninterface ResponsiveItem {\n    button: Button;\n    stages: Presentation[];\n    priority: number;\n    contentHidden: boolean;\n    hidden: boolean;\n    menuItem: MenuItem;\n}\n\n/**\n * A Nimble toolbar that automatically collapses declaratively configured actions.\n */\nexport class FvToolbar extends Toolbar {\n    @attr({ attribute: 'overflow-label' })\n    public overflowLabel = 'More actions';\n\n    /** @internal */\n    @observable\n    public hasOverflow = false;\n\n    /** @internal */\n    public overflowButton!: MenuButton;\n\n    /** @internal */\n    public overflowMenu!: Menu;\n\n    private readonly items = new Map<Button, ResponsiveItem>();\n    private readonly resizeObserver = new ResizeObserver(() => this.scheduleLayout());\n    private readonly mutationObserver = new MutationObserver(records => {\n        for (const record of records) {\n            const item = record.target instanceof Button ? this.items.get(record.target) : undefined;\n            if (item && record.attributeName === 'hidden') {\n                item.hidden = item.button.hidden;\n            }\n            if (item && record.attributeName === 'content-hidden') {\n                item.contentHidden = item.button.contentHidden;\n            }\n        }\n        this.scheduleLayout();\n    });\n\n    private readonly observedChildren = new Set<Element>();\n    private frame = 0;\n\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        this.resizeObserver.observe(this);\n        this.observeMutations();\n        this.ownerDocument.fonts.addEventListener('loadingdone', this.scheduleLayout);\n        this.scheduleLayout();\n    }\n\n    public override disconnectedCallback(): void {\n        this.resizeObserver.disconnect();\n        this.mutationObserver.disconnect();\n        this.ownerDocument.fonts.removeEventListener('loadingdone', this.scheduleLayout);\n        cancelAnimationFrame(this.frame);\n        this.frame = 0;\n        for (const item of this.items.values()) {\n            this.restoreItem(item);\n        }\n        this.items.clear();\n        this.observedChildren.clear();\n        super.disconnectedCallback();\n    }\n\n    protected override get allSlottedItems(): (HTMLElement | Node)[] {\n        return [\n            ...super.allSlottedItems,\n            ...(this.hasOverflow ? [this.overflowButton] : [])\n        ];\n    }\n\n    private observeMutations(): void {\n        this.mutationObserver.observe(this, {\n            subtree: true,\n            childList: true,\n            characterData: true,\n            attributes: true,\n            attributeFilter: [\n                'data-responsive', 'data-priority', 'disabled', 'hidden',\n                'content-hidden', 'aria-label', 'slot', 'class', 'style'\n            ]\n        });\n    }\n\n    private readonly scheduleLayout = (): void => {\n        if (!this.isConnected || this.frame !== 0) {\n            return;\n        }\n        this.frame = requestAnimationFrame(() => {\n            this.frame = 0;\n            this.updateLayout();\n        });\n    };\n\n    private restoreItem(item: ResponsiveItem): void {\n        item.button.hidden = item.hidden;\n        item.button.toggleAttribute('content-hidden', item.contentHidden);\n        item.menuItem.remove();\n    }\n\n    private syncItems(): ResponsiveItem[] {\n        const buttons = Array.from(this.children).filter(\n            (child): child is Button => child instanceof Button && child.hasAttribute('data-responsive')\n        );\n        for (const [button, item] of this.items) {\n            if (!buttons.includes(button)) {\n                this.restoreItem(item);\n                this.items.delete(button);\n            }\n        }\n        for (const button of buttons) {\n            const value = button.getAttribute('data-responsive')?.trim() ?? '';\n            const tokens = value.split(/\\s+/);\n            const stages = (['label', 'icon', 'overflow'] as const).filter(stage => tokens.includes(stage));\n            const priority = Number(button.getAttribute('data-priority') ?? 0);\n            if (stages.length === 0 || tokens.some(token => !stages.some(stage => stage === token))\n                || !Number.isFinite(priority)\n                || (stages.includes('icon') && !button.querySelector(':scope > [slot=\"start\"]'))) {\n                throw new Error('ok-fv-toolbar requires valid data-responsive stages, a finite data-priority, and a direct start-slot icon for icon-only actions.');\n            }\n            let item = this.items.get(button);\n            if (!item) {\n                const menuItem = this.ownerDocument.createElement(menuItemTag);\n                menuItem.addEventListener('change', () => {\n                    if (!button.disabled) {\n                        button.click();\n                    }\n                });\n                item = {\n                    button,\n                    stages,\n                    priority,\n                    hidden: button.hidden,\n                    contentHidden: button.contentHidden,\n                    menuItem\n                };\n                this.items.set(button, item);\n            }\n            item.stages = stages;\n            item.priority = priority;\n            item.menuItem.disabled = button.disabled;\n            const label = (button.getAttribute('aria-label')\n                ?? Array.from(button.childNodes)\n                    .filter(node => node.nodeType === Node.TEXT_NODE\n                        || (node instanceof Element && !node.hasAttribute('slot')))\n                    .map(node => node.textContent).join('')).trim();\n            if (!label) {\n                throw new Error('ok-fv-toolbar responsive actions require a text label or aria-label.');\n            }\n            if (item.menuItem.textContent !== label) {\n                item.menuItem.textContent = label;\n            }\n        }\n        return buttons.map(button => this.items.get(button)!);\n    }\n\n    private updateLayout(): void {\n        // Ignore our own presentation mutations, not application changes.\n        this.mutationObserver.disconnect();\n        try {\n            const menuFocus = this.shadowRoot?.activeElement;\n            const menuHadFocus = menuFocus && this.overflowButton.contains(menuFocus);\n            const previousMenuItems = Array.from(this.overflowMenu.children);\n            const items = this.syncItems();\n            const root = this.getRootNode();\n            const activeElement = root instanceof ShadowRoot ? root.activeElement : this.ownerDocument.activeElement;\n            const focusedItem = items.find(item => item.button === activeElement);\n            for (const child of this.observedChildren) {\n                if (child.parentElement !== this) {\n                    this.resizeObserver.unobserve(child);\n                    this.observedChildren.delete(child);\n                }\n            }\n            for (const child of this.children) {\n                if (!this.observedChildren.has(child)) {\n                    this.resizeObserver.observe(child);\n                    this.observedChildren.add(child);\n                }\n            }\n            const overflow = new Set<ResponsiveItem>();\n            for (const item of items) {\n                item.button.hidden = item.hidden;\n                item.button.toggleAttribute('content-hidden', item.stages[0] === 'icon');\n                if (!item.hidden && item.stages[0] === 'overflow') {\n                    overflow.add(item);\n                    item.button.hidden = true;\n                }\n            }\n            this.showOverflow(overflow.size > 0);\n            const ordered = items.filter(item => !item.hidden).reverse()\n                .sort((a, b) => a.priority - b.priority);\n            // ponytail: measure each transition; cache widths only if large toolbars make this costly.\n            for (const stage of ['icon', 'overflow'] as const) {\n                for (const item of ordered) {\n                    if (this.fits()) {\n                        break;\n                    }\n                    if (overflow.has(item) || !item.stages.includes(stage)) {\n                        continue;\n                    }\n                    if (stage === 'icon') {\n                        item.button.toggleAttribute('content-hidden', true);\n                    } else {\n                        item.button.hidden = true;\n                        overflow.add(item);\n                        this.showOverflow(true);\n                    }\n                }\n            }\n            const overflowItems = items.filter(item => overflow.has(item));\n            const nextMenuItems = overflowItems.map(item => item.menuItem);\n            if (nextMenuItems.length !== previousMenuItems.length\n                || nextMenuItems.some((item, index) => previousMenuItems[index] !== item)) {\n                this.overflowButton.open = false;\n                this.overflowMenu.replaceChildren(...nextMenuItems);\n            }\n            if (!this.hasOverflow) {\n                this.overflowButton.open = false;\n            }\n            this.overflowButton.hidden = !this.hasOverflow;\n            this.overflowButton.classList.remove('unreserved');\n            this.reduceFocusableElements();\n            if (focusedItem && overflow.has(focusedItem)) {\n                this.overflowButton.focus();\n            } else if (menuHadFocus) {\n                if (this.hasOverflow) {\n                    if (this.overflowButton.open && menuFocus instanceof HTMLElement && menuFocus.isConnected) {\n                        menuFocus.focus();\n                    } else {\n                        this.overflowButton.focus();\n                    }\n                } else {\n                    Array.from(this.querySelectorAll<HTMLElement>('[tabindex=\"0\"]'))\n                        .find(control => !control.closest('[hidden], [disabled]'))?.focus();\n                }\n            }\n        } finally {\n            this.observeMutations();\n        }\n    }\n\n    private showOverflow(show: boolean): void {\n        this.hasOverflow = show;\n        // Remove the trigger from width calculations without hiding its focused menu.\n        this.overflowButton.classList.toggle('unreserved', !show);\n        this.overflowButton.hidden = false;\n    }\n\n    private fits(): boolean {\n        const region = this.shadowRoot!.querySelector<HTMLElement>('.positioning-region')!;\n        return region.scrollWidth <= region.clientWidth;\n    }\n}\n\nconst okFvToolbar = FvToolbar.compose({\n    baseName: 'fv-toolbar',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('ok').register(okFvToolbar());\nexport const fvToolbarTag = 'ok-fv-toolbar';\n"]}

package/dist/esm/fv/toolbar/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@ni/fast-element").ElementStyles;

package/dist/esm/fv/toolbar/styles.js

@@ -0,0 +1,39 @@
+import { css } from '@ni/fast-element';
+import { styles as toolbarStyles } from '@ni/nimble-components/dist/esm/toolbar/styles';
+export const styles = css `
+    ${toolbarStyles}
+
+    :host {
+        display: block;
+        min-width: 0;
+        max-width: 100%;
+    }
+
+    .positioning-region {
+        position: relative;
+        overflow-x: auto;
+    }
+
+    .unreserved {
+        position: absolute;
+        inset-inline-end: 0;
+    }
+
+    [part='start'],
+    [part='end'],
+    nimble-menu-button,
+    ::slotted(*) {
+        flex-shrink: 0;
+    }
+
+    [part='start'] {
+        margin: 0;
+        margin-inline-end: auto;
+    }
+
+    [part='end'] {
+        margin: 0;
+        margin-inline-start: auto;
+    }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/fv/toolbar/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/fv/toolbar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,+CAA+C,CAAC;AAExF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkClB,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { styles as toolbarStyles } from '@ni/nimble-components/dist/esm/toolbar/styles';\n\nexport const styles = css`\n    ${toolbarStyles}\n\n    :host {\n        display: block;\n        min-width: 0;\n        max-width: 100%;\n    }\n\n    .positioning-region {\n        position: relative;\n        overflow-x: auto;\n    }\n\n    .unreserved {\n        position: absolute;\n        inset-inline-end: 0;\n    }\n\n    [part='start'],\n    [part='end'],\n    nimble-menu-button,\n    ::slotted(*) {\n        flex-shrink: 0;\n    }\n\n    [part='start'] {\n        margin: 0;\n        margin-inline-end: auto;\n    }\n\n    [part='end'] {\n        margin: 0;\n        margin-inline-start: auto;\n    }\n`;\n"]}

package/dist/esm/fv/toolbar/template.d.ts

@@ -0,0 +1,4 @@
+import { type ViewTemplate } from '@ni/fast-element';
+import { type FoundationElementTemplate, type ToolbarOptions } from '@ni/fast-foundation';
+import type { FvToolbar } from '.';
+export declare const template: FoundationElementTemplate<ViewTemplate<FvToolbar>, ToolbarOptions>;

package/dist/esm/fv/toolbar/template.js

@@ -0,0 +1,40 @@
+import { children, elements, html, ref, slotted } from '@ni/fast-element';
+import { endSlotTemplate, startSlotTemplate } from '@ni/fast-foundation';
+import { menuButtonTag } from '@ni/nimble-components/dist/esm/menu-button';
+import { menuTag } from '@ni/nimble-components/dist/esm/menu';
+import { iconThreeDotsLineTag } from '@ni/nimble-components/dist/esm/icons/three-dots-line';
+export const template = (context, definition) => html `
+    <template
+        role="toolbar"
+        aria-label="${x => x.ariaLabel}"
+        aria-labelledby="${x => x.ariaLabelledby}"
+        aria-orientation="horizontal"
+        @mousedown="${(x, c) => x.mouseDownHandler(c.event)}"
+        @focusin="${(x, c) => x.focusinHandler(c.event)}"
+        @keydown="${(x, c) => x.keydownHandler(c.event)}"
+        ${children({ property: 'childItems', attributeFilter: ['disabled', 'hidden'], filter: elements(), subtree: true })}
+    >
+        <div class="positioning-region" part="positioning-region">
+            ${startSlotTemplate(context, definition)}
+            <slot ${slotted({ property: 'slottedItems', filter: elements() })}></slot>
+            ${endSlotTemplate(context, definition)}
+            <${menuButtonTag}
+                ${ref('overflowButton')}
+                hidden
+                appearance="ghost"
+                content-hidden
+                @keydown="${(x, c) => {
+    if (x.overflowButton.open) {
+        c.event.stopPropagation();
+    }
+    return true;
+}}"
+            >
+                <${iconThreeDotsLineTag} slot="start"></${iconThreeDotsLineTag}>
+                ${x => x.overflowLabel}
+                <${menuTag} slot="menu" ${ref('overflowMenu')}></${menuTag}>
+            </${menuButtonTag}>
+        </div>
+    </template>
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/fv/toolbar/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/fv/toolbar/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAqB,MAAM,kBAAkB,CAAC;AAC7F,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAuD,MAAM,qBAAqB,CAAC;AAC9H,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAC3E,OAAO,EAAE,OAAO,EAAE,MAAM,qCAAqC,CAAC;AAC9D,OAAO,EAAE,oBAAoB,EAAE,MAAM,sDAAsD,CAAC;AAG5F,MAAM,CAAC,MAAM,QAAQ,GAAuE,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE,CAAC,IAAI,CAAW;;;sBAG9G,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;2BACX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;;sBAE1B,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAmB,CAAC;oBACrD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAmB,CAAC;oBACjD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAsB,CAAC;UAC9D,QAAQ,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,eAAe,EAAE,CAAC,UAAU,EAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;;;cAG5G,iBAAiB,CAAC,OAAO,EAAE,UAAU,CAAC;oBAChC,OAAO,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC;cAC/D,eAAe,CAAC,OAAO,EAAE,UAAU,CAAC;eACnC,aAAa;kBACV,GAAG,CAAC,gBAAgB,CAAC;;;;4BAIX,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;IACjB,IAAI,CAAC,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;QACxB,CAAC,CAAC,KAAK,CAAC,eAAe,EAAE,CAAC;IAC9B,CAAC;IACD,OAAO,IAAI,CAAC;AAChB,CAAC;;mBAEE,oBAAoB,mBAAmB,oBAAoB;kBAC5D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa;mBACnB,OAAO,gBAAgB,GAAG,CAAC,cAAc,CAAC,MAAM,OAAO;gBAC1D,aAAa;;;CAG5B,CAAC","sourcesContent":["import { children, elements, html, ref, slotted, type ViewTemplate } from '@ni/fast-element';\nimport { endSlotTemplate, startSlotTemplate, type FoundationElementTemplate, type ToolbarOptions } from '@ni/fast-foundation';\nimport { menuButtonTag } from '@ni/nimble-components/dist/esm/menu-button';\nimport { menuTag } from '@ni/nimble-components/dist/esm/menu';\nimport { iconThreeDotsLineTag } from '@ni/nimble-components/dist/esm/icons/three-dots-line';\nimport type { FvToolbar } from '.';\n\nexport const template: FoundationElementTemplate<ViewTemplate<FvToolbar>, ToolbarOptions> = (context, definition) => html<FvToolbar>`\n    <template\n        role=\"toolbar\"\n        aria-label=\"${x => x.ariaLabel}\"\n        aria-labelledby=\"${x => x.ariaLabelledby}\"\n        aria-orientation=\"horizontal\"\n        @mousedown=\"${(x, c) => x.mouseDownHandler(c.event as MouseEvent)}\"\n        @focusin=\"${(x, c) => x.focusinHandler(c.event as FocusEvent)}\"\n        @keydown=\"${(x, c) => x.keydownHandler(c.event as KeyboardEvent)}\"\n        ${children({ property: 'childItems', attributeFilter: ['disabled', 'hidden'], filter: elements(), subtree: true })}\n    >\n        <div class=\"positioning-region\" part=\"positioning-region\">\n            ${startSlotTemplate(context, definition)}\n            <slot ${slotted({ property: 'slottedItems', filter: elements() })}></slot>\n            ${endSlotTemplate(context, definition)}\n            <${menuButtonTag}\n                ${ref('overflowButton')}\n                hidden\n                appearance=\"ghost\"\n                content-hidden\n                @keydown=\"${(x, c) => {\n                    if (x.overflowButton.open) {\n                        c.event.stopPropagation();\n                    }\n                    return true;\n                }}\"\n            >\n                <${iconThreeDotsLineTag} slot=\"start\"></${iconThreeDotsLineTag}>\n                ${x => x.overflowLabel}\n                <${menuTag} slot=\"menu\" ${ref('overflowMenu')}></${menuTag}>\n            </${menuButtonTag}>\n        </div>\n    </template>\n`;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/ok-components",
-  "version": "1.13.0",
+  "version": "1.15.0",
   "description": "NI Ok Components",
   "scripts": {
     "build": "npm run build:components && npm run build:cem",