@tmorrow/cre8-wc 1.1.2 → 1.1.3

package/lib/components/tabs/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../components/tabs/tabs.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAG,MAAM,KAAK,CAAC;AAC5B,OAAO,EACH,QAAQ,EAAE,KAAK,EAAE,qBAAqB,EAAE,KAAK,GAChD,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAEtC,IAAI,KAAK,GAAG,CAAC,CAAC;AAEd;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,MAAM,OAAO,QAAS,SAAQ,WAAW;IAoFrC;;;;OAIG;IACH,IAAI,KAAK;QACL,OAAO,QAAQ,CAAC,GAAG,KAAK,KAAK,CAAC;IAClC,CAAC;IAED;;OAEG;IACH;QACI,KAAK,EAAE,CAAC;QAtEZ;;;WAGG;QAEH,gBAAW,GAAY,CAAC,CAAC;QAUzB;;;;;WAKG;QAEH,YAAO,GAAa,IAAI,CAAC;QAEzB;;;;;WAKG;QAEH,UAAK,GAAa,KAAK,CAAC;QAwCpB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACjD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACjD,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7C,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACzC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE3C;;WAEG;QACH,IAAI,CAAC,KAAK,GAAG,iBAAiB,KAAK,EAAE,CAAC;QACtC,KAAK,IAAI,CAAC,CAAC;IACf,CAAC;IAED;;;OAGG;IACH,iBAAiB;QACb,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IACzD,CAAC;IAED;;;;OAIG;IACH,oBAAoB;QAChB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IAC5D,CAAC;IAED;;;;;;OAMG;IACH,KAAK,CAAC,YAAY;QACd,OAAO;QACP,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,MAAM,IAAI,CAAC,cAAc,CAAC;QAE1B,OAAO;QACP,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;QAC/E,IAAI,CAAC,YAAY,EAAE,CAAC;QAEpB,OAAO;QACP,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,IAAI,CAAC,QAAQ,EAAE,CAAC;QAEhB,OAAO;QACP,IAAI,CAAC,aAAa,EAAE,CAAC;IACzB,CAAC;IAED;;;;;OAKG;IACH,KAAK,CAAC,OAAO,CAAC,iBAAuC;QACjD,iBAAiB,CAAC,OAAO,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE;YACnD,IAAI,QAAQ,KAAK,aAAa,IAAI,IAAI,CAAC,WAAW,KAAK,QAAQ,EAAE,CAAC;gBAC9D,MAAM,IAAI,CAAC,cAAc,CAAC;gBAE1B,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;oBACjB,IAAI,CAAC,uBAAuB,EAAE,CAAC,CAAC,OAAO;gBAC3C,CAAC;gBAED,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;gBACtD,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,OAAO;YAChC,CAAC;QACL,CAAC,CAAC,CAAC;IACP,CAAC;IAED;;;;;OAKG;IACH,YAAY;QACR,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,OAAO;QAC1B,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,OAAO;IAC5B,CAAC;IAED;;;;;OAKG;IACH,YAAY;QACR,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,OAAO;QAC1B,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,OAAO;IAC5B,CAAC;IAED;;;OAGG;IACH,UAAU;QACN,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACb,IAAI,IAAI,CAAC,mBAAmB,CAAC,UAAU,GAAG,CAAC,EAAE,CAAC;gBAC1C,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACxB,CAAC;iBAAM,CAAC;gBACJ,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACzB,CAAC;QACL,CAAC;aAAM,IAAI,IAAI,CAAC,mBAAmB,CAAC,UAAU,GAAG,CAAC,EAAE,CAAC;YACjD,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACzB,CAAC;aAAM,CAAC;YACJ,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACxB,CAAC;IACL,CAAC;IAED;;;OAGG;IACH,QAAQ;QACJ,IAAI,IAAI,CAAC,YAAY,EAAE,KAAK,IAAI,EAAE,CAAC;YAC/B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QACtB,CAAC;aAAM,CAAC;YACJ,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACvB,CAAC;IACL,CAAC;IAED;;;;;OAKG;IACH,YAAY;QACR,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACpE,MAAM,UAAU,GAAG,SAAS,CAAC,UAAU,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;QACtE,IAAI,CAAC,UAAU,EAAE,CAAC;YACd,OAAO,KAAK,CAAC,CAAC,+CAA+C;QACjE,CAAC;QAED,MAAM,IAAI,GAAG,UAAU,CAAC,qBAAqB,EAAE,CAAC,CAAC,OAAO;QACxD,MAAM,WAAW,GAAG,MAAM,CAAC,UAAU,IAAI,QAAQ,CAAC,eAAe,CAAC,WAAW,CAAC;QAC9E,OAAO,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,KAAK,IAAI,WAAW,CAAC,CAAC,OAAO;IAC/D,CAAC;IAED;;;OAGG;IACH,aAAa;QACT,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,EAAE,CAAC;YACrB,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,GAAY,EAAE,EAAE;gBACxC,GAAG,CAAC,IAAI,GAAG,IAAI,CAAC;YACpB,CAAC,CAAC,CAAC;QACP,CAAC;IACL,CAAC;IAED;;;;;OAKG;IACH,gBAAgB;QACZ,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;YACtC,OAAO;YACP,GAAG,CAAC,KAAK,GAAG,KAAK,CAAC;YAElB,OAAO;YACP,MAAM,cAAc,GAAG,GAAG,CAAC,cAAc,CAAC;YAC1C,MAAM,EAAE,GAAG,cAAc,IAAI,MAAM,EAAE,CAAC;YACtC,GAAG,CAAC,cAAc,GAAG,EAAE,CAAC;YAGxB,OAAO;YACP,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;YAC5C,QAAQ,CAAC,KAAK,GAAG,KAAK,CAAC;QAC3B,CAAC,CAAC,CAAC;IACP,CAAC;IAED;;;;OAIG;IACH,YAAY;QACR,OAAO;QACP,IAAI,CAAC,SAAS,CAAC,QAAQ,GAAG,IAAI,CAAC;QAE/B,OAAO;QACP,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,KAAK,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QACvG,IAAI,cAAc,EAAE,CAAC;YACjB,cAAc,CAAC,QAAQ,GAAG,IAAI,CAAC;QACnC,CAAC;IACL,CAAC;IAED;;OAEG;IACH,iBAAiB;QACb,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,aAAa,CAAc,aAAa,CAAC,CAAC,KAAK,EAAE,CAAC;IACjF,CAAC;IAED;;;;;;;OAOG;IACH,iBAAiB,CAAC,KAAiB;QAC/B,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;QAEzB,OAAO;QACP,IAAI,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,MAAiB,CAAC,EAAE,CAAC;YACjD,OAAO;YACP,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;gBACjB,IAAI,CAAC,uBAAuB,EAAE,CAAC;YACnC,CAAC;YAED,OAAO;YACP,IAAI,CAAC,SAAS,GAAG,MAAiB,CAAC;YACnC,MAAM,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,KAAK,IAAI,CAAC,SAAS,CAAC,CAAC;YAClF,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;YAC/B,IAAI,CAAC,YAAY,EAAE,CAAC;YAEpB,OAAO;YACP,IAAI,CAAC,SAAS,EAAE,CAAC;QACrB,CAAC;IACL,CAAC;IAED;;;;;;;;;OASG;IACH,aAAa,CAAC,KAAoB;QAC9B,OAAO;QACP,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;QACzB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAwB,CAAC;QAClD,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE,CAAC;YAC/B,OAAO;QACX,CAAC;QACD,QAAQ,KAAK,CAAC,GAAG,EAAE,CAAC;YAChB,OAAO;YACP,KAAK,YAAY;gBACb,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,oBAAoB,CAAC,MAAiB,CAAC,CAAC;gBAC7C,MAAM;YACV,OAAO;YACP,KAAK,WAAW;gBACZ,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,wBAAwB,CAAC,MAAiB,CAAC,CAAC;gBACjD,MAAM;YACV,OAAO;YACP,KAAK,MAAM;gBACP,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;gBAC7E,MAAM;YACV,OAAO;YACP,KAAK,KAAK;gBACN,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;gBACrD,MAAM;YACV,OAAO;YACP,KAAK,QAAQ;gBACT,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;gBACtB,MAAM;YACV,QAAQ;YACR,aAAa;QACjB,CAAC;IACL,CAAC;IAED;;;;;;;OAOG;IACH,wBAAwB,CAAC,UAAmB;QACxC,OAAO;QACP,MAAM,WAAW,GAAG,UAAU,CAAC,KAAK,CAAC;QACrC,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAE/B,OAAO;QACP,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;QACpD,IAAI,WAAW,KAAK,CAAC,EAAE,CAAC;YACpB,IAAI,CAAC,WAAW,GAAG,aAAa,CAAC;YACjC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;QACvD,CAAC;aAAM,CAAC;YACJ,MAAM,aAAa,GAAG,WAAW,GAAG,CAAC,CAAC;YACtC,IAAI,CAAC,WAAW,GAAG,aAAa,CAAC;YACjC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;QACvD,CAAC;QAED,OAAO;QACP,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAEzB,OAAO;QACP,IAAI,CAAC,SAAS,EAAE,CAAC;IACrB,CAAC;IAED;;;;;;;OAOG;IACH,oBAAoB,CAAC,UAAmB;QACpC,OAAO;QACP,MAAM,WAAW,GAAG,UAAU,CAAC,KAAK,CAAC;QACrC,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAE/B,OAAO;QACP,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;QACpD,IAAI,WAAW,KAAK,aAAa,EAAE,CAAC;YAChC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;YACrB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;QAC3C,CAAC;aAAM,CAAC;YACJ,MAAM,SAAS,GAAG,WAAW,GAAG,CAAC,CAAC;YAClC,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;YAC7B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;QACnD,CAAC;QAED,OAAO;QACP,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAEzB,OAAO;QACP,IAAI,CAAC,SAAS,EAAE,CAAC;IACrB,CAAC;IAED;;;;OAIG;IACH,uBAAuB;QACnB,OAAO;QACP,IAAI,CAAC,SAAS,CAAC,QAAQ,GAAG,KAAK,CAAC;QAEhC,OAAO;QACP,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,KAAK,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QACvG,IAAI,cAAc,EAAE,CAAC;YACjB,cAAc,CAAC,QAAQ,GAAG,KAAK,CAAC;QACpC,CAAC;IACL,CAAC;IAED;;OAEG;IACH,SAAS;QACL,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC,WAAW,EAAE;YAC7C,MAAM,EAAE;gBACJ,KAAK,EAAE,IAAI,CAAC,SAAS;gBACrB,cAAc,EAAE,IAAI,CAAC,WAAW;aACnC;YACD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACjB,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IACpC,CAAC;IAED,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,aAAa,EAAE;YAChE,eAAe,EAAE,IAAI,CAAC,OAAO,KAAK,IAAI;YACtC,aAAa,EAAE,IAAI,CAAC,KAAK,KAAK,IAAI;YAClC,yBAAyB,EAAE,IAAI,CAAC,SAAS;SAC5C,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;sBACG,mBAAmB;;;;;;8BAMX,IAAI,CAAC,YAAY;+BAChB,IAAI,CAAC,aAAa;6BACpB,IAAI,CAAC,iBAAiB;;;;;;;;;KAS9C,CAAC;IACF,CAAC;;AAnfM,eAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAUzB;IADC,QAAQ,EAAE;sCACC;AAOZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CACvB;AAcpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACF;AAQzB;IADC,KAAK,EAAE;2CACY;AASpB;IADC,KAAK,EAAE;yCACiB;AASzB;IADC,KAAK,EAAE;uCACgB;AAMxB;IADC,qBAAqB,EAAE;+CACM;AAM9B;IADC,qBAAqB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gDACL;AAMpC;IADC,KAAK,CAAC,sBAAsB,CAAC;iDACD;AAM7B;IADC,KAAK,CAAC,oBAAoB,CAAC;qDACK;AAqarC,IAAI,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE,CAAC;IAChD,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;AACjD,CAAC;AAQD,eAAe,QAAQ,CAAC","sourcesContent":["import { html, } from 'lit';\nimport {\n    property, query, queryAssignedElements, state,\n} from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport { Cre8Element } from '../cre8-element';\nimport { Cre8TabPanel } from '../tab-panel/tab-panel';\nimport { Cre8Tab } from '../tab/tab';\nimport styles from './tabs.styles.js';\n\nlet tabId = 1;\n\n/**\n * Tabs are used to quickly navigate back and forth between views.\n * The Tab design and interaction varies depending on the requirements for your organization and project.\n * Standardizing on the best individual controls will improve usability and reduce development and QA time.\n *\n * Create a standard set of Tab controls:\n * Primary Tabs (for system navigation), Secondary Tabs (for sub navigation within a screen).\n *\n * ## Usability Guidelines\n * - The selected Tab should be visually differentiated from the other Tabs.\n *   The deselected Tabs should still look enabled.\n *   Dimming the other Tabs decreases the legibility of items that are actually active and clickable.\n * - There must be a minimum of 2 Tabs.\n * - Showing status in a Tab is non-standard (such as 0%, 10%).\n * - Tab labels and content should be parallel, with the exception of a Summary or Overview Tab\n *   which can be a rollup of content across other Tabs.\n * - Keep the font size of the Tabs the same.\n *   If the Tabs are a fixed width and one of the labels is too long,\n *   don't resize the text to fit and consider wrapping text to a second line.\n * - If possible, don't truncate text because it makes it harder to understand what's in the Tab.\n * - Try not to use more than six Tabs to keep the UI uncluttered.\n * - Do not stack Tabs on top of each other, and do not nest Tabs within Tabs.\n *   Find alternate ways of navigating page hierarchy.\n *\n * @slot default - Default, unnamed slot container for each `cre8-tab` button\n * @slot panel - Container for each `cre8-tab-panel` content item\n */\n\nexport class Cre8Tabs extends Cre8Element {\n    static styles = [styles];\n\n    /**\n     * Tab sizes\n     * - **default** displays the cre8-tab text with cre8-typography-label-default\n     * - **sm** displays the cre8-tab text with cre8-typography-label-small\n     * @type {\"sm\"}\n     * @attr\n     */\n    @property()\n    size?: 'sm';\n\n    /**\n     * Displays a set of tabs with a spanning the width of the element\n     * @attr {boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n    fullWidth?: boolean;\n\n    /**\n     * Auto Increment id to sync tab and tab panel\n     *\n     * _*This property is dynamically set_\n     */\n    tabId: string;\n\n    /**\n     * Sets the initial active tab (e.g. 0 sets the first tab, 1 sets the second tab, etc.)\n     * @attr {number}\n     */\n    @property({ type: Number })\n    activeIndex?: number = 0;\n\n    /**\n     * The active tab\n     *\n     * _*This property is dynamically set_\n     */\n    @state()\n    activeTab?: Cre8Tab;\n\n    /**\n     * If position from left is greater than 0, set isStart to false. Otherwise set isStart to true.\n     *\n     * _*This property is dynamically set_\n     * @attr {boolean}\n     */\n    @state()\n    isStart?: boolean = true;\n\n    /**\n     * If last child is fully in the viewport, set isEnd to true. Otherwise, set isEnd to false.\n     *\n     * _*This property is dynamically set_\n     * @attr {boolean}\n     */\n    @state()\n    isEnd?: boolean = false;\n\n    /**\n     * Query all the tab items\n     */\n    @queryAssignedElements()\n    _Cre8TabItems: Array<Cre8Tab>;\n\n    /**\n     * Query all the tab panels\n     */\n    @queryAssignedElements({ slot: 'panel' })\n    _Cre8TabPanels: Array<Cre8TabPanel>;\n\n    /**\n     * Query the tabs header element\n     */\n    @query('.cre8-c-tabs__header')\n    _Cre8TabsHeader: HTMLElement;\n\n    /**\n     * Query the tabs header list element\n     */\n    @query('.cre8-c-tabs__list')\n    _Cre8TabsHeaderList: HTMLElement;\n\n    /**\n     * Query the document direction value\n     *\n     * _*This property is dynamically set_\n     */\n    get isRTL() {\n        return document.dir === 'rtl';\n    }\n\n    /**\n     * Initialize Functions\n     */\n    constructor() {\n        super();\n        this.handleScroll = this.handleScroll.bind(this);\n        this.handleResize = this.handleResize.bind(this);\n        this.setIsStart = this.setIsStart.bind(this);\n        this.setIsEnd = this.setIsEnd.bind(this);\n        this.emitEvent = this.emitEvent.bind(this);\n\n        /**\n         * Set the tab id.\n         */\n        this.tabId = `cre8-tabpanel-${tabId}`;\n        tabId += 1;\n    }\n\n    /**\n     * Connected Callback Lifecycle\n     * 1. Fires each time a custom element is appended into a document-connected element.\n     */\n    connectedCallback() {\n        super.connectedCallback();\n        window.addEventListener('resize', this.handleResize);\n    }\n\n    /**\n     * Disconnected Callback Lifecycle\n     * 1. Removes the event listeners to ensure that any memory allocated by your component\n     *    will be cleaned up when your component is destroyed or disconnected from the page.\n     */\n    disconnectedCallback() {\n        super.disconnectedCallback();\n        window.removeEventListener('resize', this.handleResize);\n    }\n\n    /**\n     * First Updated Lifecycle Hook\n     * 1. Sets the `aria-labelledby` prop for accessible tabs if user doesn't define the `ariaLabelledBy` prop.\n     * 2. Sets the active tab if activeIndex is defined. Otherwise, set the first tab as active by default.\n     * 3. Initialize isStart and isEnd.\n     * 4. Set the varaint on the cre8-tab according to the cre8-tabs variant.\n     */\n    async firstUpdated() {\n        /* 1 */\n        this.setTabAttributes();\n        await this.updateComplete;\n\n        /* 2 */\n        this.activeTab = this._Cre8TabItems[this.activeIndex] || this._Cre8TabItems[0];\n        this.setActiveTab();\n\n        /* 3 */\n        this.setIsStart();\n        this.setIsEnd();\n\n        /* 4 */\n        this.setTabVariant();\n    }\n\n    /**\n     * Updated Lifecycle Hook\n     * 1. remove selected state from previously selected tab\n     * 2. Checks to see if the old `activeIndex` property has been updated.\n     *    If the new value doesn't equal the old value, activate the proper tab\n     */\n    async updated(changedProperties: Map<string, unknown>) {\n        changedProperties.forEach(async (oldValue, propName) => {\n            if (propName === 'activeIndex' && this.activeIndex !== oldValue) {\n                await this.updateComplete;\n\n                if (this.activeTab) {\n                    this.removePreviousActiveTab(); /* 1 */\n                }\n\n                this.activeTab = this._Cre8TabItems[this.activeIndex];\n                this.setActiveTab(); /* 2 */\n            }\n        });\n    }\n\n    /**\n     * Handle Resize\n     * 1. On resize, if position from left is greater than 0, set isStart to false. Otherwise set isStart to true.\n     * 2. On resize, If last child is fully in the viewport, set isEnd to true. Otherwise, set isEnd to false.\n     * @fires resize\n     */\n    handleResize() {\n        this.setIsStart(); /* 1 */\n        this.setIsEnd(); /* 2 */\n    }\n\n    /**\n     * Handle Scroll\n     * 1. On scroll, if position from left is greater than 0, set isStart to false. Otherwise set isStart to true.\n     * 2. On scroll, If last child is fully in the viewport, set isEnd to true. Otherwise, set isEnd to false.\n     * @fires scroll\n     */\n    handleScroll() {\n        this.setIsStart(); /* 1 */\n        this.setIsEnd(); /* 2 */\n    }\n\n    /**\n     * Set isStart State\n     * 1. If position from left is greater than 0, set isStart to false. Otherwise set isStart to true.\n     */\n    setIsStart() {\n        if (this.isRTL) {\n            if (this._Cre8TabsHeaderList.scrollLeft > 0) {\n                this.isStart = true;\n            } else {\n                this.isStart = false;\n            }\n        } else if (this._Cre8TabsHeaderList.scrollLeft > 0) {\n            this.isStart = false;\n        } else {\n            this.isStart = true;\n        }\n    }\n\n    /**\n     * Set isEnd State\n     * 1. If last child is fully in the viewport, set isEnd to true. Otherwise, set isEnd to false.\n     */\n    setIsEnd() {\n        if (this.isInViewport() === true) {\n            this.isEnd = true;\n        } else {\n            this.isEnd = false;\n        }\n    }\n\n    /**\n     * Check if last overflow list item is in the viewport\n     * 1. Get children of the overflow list inner container and get bounding client rectangle of last child\n     * 2. Return true if the left property is greater than or equal to 0 and if the right property is less\n     * than or equal to the window inner width or document client width\n     */\n    isInViewport() {\n        const lastChild = this._Cre8TabItems[this._Cre8TabItems.length - 1];\n        const tabElement = lastChild.shadowRoot?.querySelector('.cre8-c-tab');\n        if (!tabElement) {\n            return false; // Return false if the tab element is not found\n        }\n\n        const rect = tabElement.getBoundingClientRect(); /* 1 */\n        const windowWidth = window.innerWidth || document.documentElement.clientWidth;\n        return rect.left >= 0 && rect.right <= windowWidth; /* 2 */\n    }\n\n    /**\n     * Set Tab Variant\n     * 1. Loop through all the cre8-tab Components and set the size to 'sm' if the parent has size 'sm'.\n     */\n    setTabVariant() {\n        if (this.size === 'sm') {\n            this._Cre8TabItems.forEach((tab: Cre8Tab) => {\n                tab.size = 'sm';\n            });\n        }\n    }\n\n    /**\n     * Set the attributes on tab and tab panel\n     * 1. Sets the index value on the tab items.\n     * 2. Sets the `aria-labelledby` on the tab items.\n     * 3. Set the index and id on the tab-panel to match the tab.\n     */\n    setTabAttributes() {\n        this._Cre8TabItems.forEach((tab, index) => {\n            /* 1 */\n            tab.index = index;\n\n            /* 2 */\n            const ariaLabelledBy = tab.ariaLabelledBy;\n            const id = ariaLabelledBy || nanoid();\n            tab.ariaLabelledBy = id;\n\n\n            /* 3 */\n            const tabPanel = this._Cre8TabPanels[index];\n            tabPanel.index = index;\n        });\n    }\n\n    /**\n     * Set Active Tab\n     * 1. Sets the active state for the selected tab.\n     * 2. Sets the active state for the tab panel with the same index value as the selected tab.\n     */\n    setActiveTab() {\n        /* 1 */\n        this.activeTab.isActive = true;\n\n        /* 2 */\n        const activeTabPanel = this._Cre8TabPanels.find((tabPanel) => tabPanel.index === this.activeTab.index);\n        if (activeTabPanel) {\n            activeTabPanel.isActive = true;\n        }\n    }\n\n    /**\n     * Set Active Tab Focus\n     */\n    setActiveTabFocus() {\n        this.activeTab.shadowRoot?.querySelector<HTMLElement>('.cre8-c-tab').focus();\n    }\n\n    /**\n     * Handle Tab Selected\n     * 1. Only continue if event target is a tab\n     * 2. If tab is active, make the previous selected tab inactive.\n     * 3. Set the clicked tab active.\n     * 4. Emit the custom event.\n     * @fires tabSelected\n     */\n    handleTabSelected(event: MouseEvent) {\n        const { target } = event;\n\n        /* 1 */\n        if (this._Cre8TabItems.includes(target as Cre8Tab)) {\n            /* 2 */\n            if (this.activeTab) {\n                this.removePreviousActiveTab();\n            }\n\n            /* 3 */\n            this.activeTab = target as Cre8Tab;\n            const activeIndex = this._Cre8TabItems.findIndex((tab) => tab === this.activeTab);\n            this.activeIndex = activeIndex;\n            this.setActiveTab();\n\n            /* 4 */\n            this.emitEvent();\n        }\n    }\n\n    /**\n     * Handle Keydown\n     * 1. If the active tab is not focused then handle the keydown events.\n     * 2. On keydown of the right arrow, make the next tab active.\n     * 3. On keydown of the left arrow, make the previous tab active.\n     * 4. On keydown of the home key, make the first tab active.\n     * 5. On keydown of the end key, make the last tab active.\n     * 6. On keydown of the escape key, remove the focus.\n     * @fires keydown\n     */\n    handleKeydown(event: KeyboardEvent) {\n        /* 1 */\n        const { target } = event;\n        const focused = document.activeElement as Cre8Tab;\n        if (!focused.matches('cre8-tab')) {\n            return;\n        }\n        switch (event.key) {\n            /* 2 */\n            case 'ArrowRight':\n                event.preventDefault();\n                this.setSelectedToNextTab(target as Cre8Tab);\n                break;\n            /* 3 */\n            case 'ArrowLeft':\n                event.preventDefault();\n                this.setSelectedToPreviousTab(target as Cre8Tab);\n                break;\n            /* 4 */\n            case 'Home':\n                event.preventDefault();\n                this.setSelectedToNextTab(this._Cre8TabItems[this._Cre8TabItems.length - 1]);\n                break;\n            /* 5 */\n            case 'End':\n                event.preventDefault();\n                this.setSelectedToPreviousTab(this._Cre8TabItems[0]);\n                break;\n            /* 6 */\n            case 'Escape':\n                this.activeTab.blur();\n                break;\n            default:\n            // no default\n        }\n    }\n\n    /**\n     * Set Selected To Previous Tab\n     * 1. Get current selected Tab index then deactivate previously selected tab.\n     * 2. If current activeIndex is in first position then move the tab focus to last tab.\n     * 3. Set the active tab and focus.\n     * 4. Emit custom event.\n     * @fires tabChange\n     */\n    setSelectedToPreviousTab(currentTab: Cre8Tab) {\n        /* 1 */\n        const activeIndex = currentTab.index;\n        this.removePreviousActiveTab();\n\n        /* 2 */\n        const tabListLength = this._Cre8TabItems.length - 1;\n        if (activeIndex === 0) {\n            this.activeIndex = tabListLength;\n            this.activeTab = this._Cre8TabItems[tabListLength];\n        } else {\n            const previousIndex = activeIndex - 1;\n            this.activeIndex = previousIndex;\n            this.activeTab = this._Cre8TabItems[previousIndex];\n        }\n\n        /* 3 */\n        this.setActiveTab();\n        this.setActiveTabFocus();\n\n        /* 4 */\n        this.emitEvent();\n    }\n\n    /**\n     * Set Selected To Next Tab\n     * 1. Get current selected Tab index then deactivate previously selected tab.\n     * 2. If current activeIndex is in last position then move the tab focus to first tab.\n     * 3. Set the active tab and focus.\n     * 4. Emit custom event.\n     * @fires tabChange\n     */\n    setSelectedToNextTab(currentTab: Cre8Tab) {\n        /* 1 */\n        const activeIndex = currentTab.index;\n        this.removePreviousActiveTab();\n\n        /* 2 */\n        const tabListLength = this._Cre8TabItems.length - 1;\n        if (activeIndex === tabListLength) {\n            this.activeIndex = 0;\n            this.activeTab = this._Cre8TabItems[0];\n        } else {\n            const nextIndex = activeIndex + 1;\n            this.activeIndex = nextIndex;\n            this.activeTab = this._Cre8TabItems[nextIndex];\n        }\n\n        /* 3 */\n        this.setActiveTab();\n        this.setActiveTabFocus();\n\n        /* 4 */\n        this.emitEvent();\n    }\n\n    /**\n     * Remove Active from Previous Tab\n     * 1. Get current selected Tab index then deactivate previously selected tab\n     * 2. If current activeIndex is in first position then move the tab focus to last tab\n     */\n    removePreviousActiveTab() {\n        /* 1 */\n        this.activeTab.isActive = false;\n\n        /* 2 */\n        const activeTabPanel = this._Cre8TabPanels.find((tabPanel) => tabPanel.index === this.activeTab.index);\n        if (activeTabPanel) {\n            activeTabPanel.isActive = false;\n        }\n    }\n\n    /**\n     * Emit custom event\n     */\n    emitEvent() {\n        const customEvent = new CustomEvent('tabChange', {\n            detail: {\n                value: this.activeTab,\n                activeTabIndex: this.activeIndex,\n            },\n            bubbles: true,\n            composed: true,\n        });\n        this.dispatchEvent(customEvent);\n    }\n\n    render() {\n        const componentClassNames = this.componentClassNames('cre8-c-tabs', {\n            'cre8-is-start': this.isStart === true,\n            'cre8-is-end': this.isEnd === true,\n            'cre8-c-tabs--full-width': this.fullWidth,\n        });\n\n        return html`\n        <div class=\"${componentClassNames}\">\n            <div class=\"cre8-c-tabs__header\">\n                <div\n                    class=\"cre8-c-tabs__list\"\n                    role=\"tablist\"\n                    tabindex=0\n                    @scroll=${this.handleScroll}\n                    @keydown=${this.handleKeydown}\n                    @click=${this.handleTabSelected}\n                >\n                    <slot></slot>\n                </div>\n            </div>\n            <div class=\"cre8-c-tabs__body\">\n                <slot name=\"panel\"></slot>\n            </div>\n        </div>\n    `;\n    }\n}\n\nif (customElements.get('cre8-tabs') === undefined) {\n    customElements.define('cre8-tabs', Cre8Tabs);\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-tabs': Cre8Tabs;\n    }\n}\n\nexport default Cre8Tabs;\n"]}

package/lib/components/tabs/tabs.styles.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+const styles = css `*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:block}.cre8-c-tabs__header{position:relative;display:flex;flex-direction:column;align-items:baseline;overflow:hidden}.cre8-c-tabs:not(.cre8-is-start) .cre8-c-tabs__header::before{content:"";display:block;position:absolute;pointer-events:none;background:linear-gradient(var(--rtlGradientToRight, 90deg), var(--cre8-color-bg-default), rgba(255, 255, 255, 0.001) 30%);height:100%;inset-block-start:0;inset-inline-start:0;width:3rem;z-index:1}.cre8-c-tabs:not(.cre8-is-end) .cre8-c-tabs__header::after{content:"";display:block !important;position:absolute;pointer-events:none;background:linear-gradient(var(--rtlGradientToRight, 90deg), rgba(255, 255, 255, 0.001) 30%, var(--cre8-color-bg-default));height:100%;inset-block-start:0;inset-inline-end:0;width:3rem;z-index:1}.cre8-c-tabs__list{display:flex;overflow:auto;width:100%;margin:0;position:relative;padding:var(--cre8-border-width-focus);scrollbar-width:none;-ms-overflow-style:none}.cre8-c-tabs__list::-webkit-scrollbar{display:none}.cre8-c-tabs__body{padding-block-start:1rem}.cre8-c-tabs--full-width .cre8-c-tabs__body{border-top:var(--cre8-border-width-tab-selected) var(--cre8-border-style-default) var(--cre8-color-border-default);margin-top:calc(var(--cre8-border-width-tab-selected)*-2)}`;
+export default styles;
+//# sourceMappingURL=tabs.styles.js.map

package/lib/components/tabs/tabs.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.styles.js","sourceRoot":"","sources":["../../../components/tabs/tabs.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,u/FAAu/F,CAAC;AAC1gG,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:block}.cre8-c-tabs__header{position:relative;display:flex;flex-direction:column;align-items:baseline;overflow:hidden}.cre8-c-tabs:not(.cre8-is-start) .cre8-c-tabs__header::before{content:\"\";display:block;position:absolute;pointer-events:none;background:linear-gradient(var(--rtlGradientToRight, 90deg), var(--cre8-color-bg-default), rgba(255, 255, 255, 0.001) 30%);height:100%;inset-block-start:0;inset-inline-start:0;width:3rem;z-index:1}.cre8-c-tabs:not(.cre8-is-end) .cre8-c-tabs__header::after{content:\"\";display:block !important;position:absolute;pointer-events:none;background:linear-gradient(var(--rtlGradientToRight, 90deg), rgba(255, 255, 255, 0.001) 30%, var(--cre8-color-bg-default));height:100%;inset-block-start:0;inset-inline-end:0;width:3rem;z-index:1}.cre8-c-tabs__list{display:flex;overflow:auto;width:100%;margin:0;position:relative;padding:var(--cre8-border-width-focus);scrollbar-width:none;-ms-overflow-style:none}.cre8-c-tabs__list::-webkit-scrollbar{display:none}.cre8-c-tabs__body{padding-block-start:1rem}.cre8-c-tabs--full-width .cre8-c-tabs__body{border-top:var(--cre8-border-width-tab-selected) var(--cre8-border-style-default) var(--cre8-color-border-default);margin-top:calc(var(--cre8-border-width-tab-selected)*-2)}`;\nexport default styles;\n"]}

package/lib/components/tag/tag.js

@@ -1,141 +1,211 @@
-import { s as p } from "../../icon-D22g8aWB.js";
-import { css as u, html as g } from "lit";
-import { property as o, query as b } from "lit/decorators.js";
-import { nanoid as f } from "nanoid";
-import { ifDefined as l } from "lit-html/directives/if-defined.js";
-import { Cre8FormElement as y } from "../cre8-form-element.js";
-const v = u`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:inline-flex}.cre8-c-tag{font-family:var(--cre8-typography-label-small-font-family);font-size:var(--cre8-typography-label-small-font-size);font-weight:var(--cre8-typography-label-small-font-weight);line-height:var(--cre8-typography-label-small-line-height);text-decoration:var(--cre8-typography-label-small-text-decoration);text-transform:var(--cre8-typography-label-small-text-transform);display:flex;align-items:center;background-color:var(--cre8-color-bg-default);border:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);color:var(--cre8-color-content-default);cursor:pointer;gap:var(--cre8-spacing-8);padding:var(--cre8-spacing-4) var(--cre8-spacing-16);transition:all var(--cre8-anim-fade-quick) var(--cre8-anim-ease);white-space:nowrap}.cre8-c-tag--square{border-radius:var(--cre8-border-radius-small)}.cre8-c-tag--round{border-radius:var(--cre8-border-radius-round)}.cre8-c-tag--neutral:hover,.cre8-c-tag--neutral:focus{background-color:var(--cre8-color-bg-default-hover);border:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong)}.cre8-c-tag--branded{background-color:var(--cre8-color-bg-brand);border:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-transparent)}.cre8-c-tag--branded:hover,.cre8-c-tag--branded:focus{background-color:var(--cre8-color-bg-brand-hover)}.cre8-c-tag--neutral-hybrid{color:var(--cre8-color-content-brand)}.cre8-c-tag--neutral-hybrid:hover,.cre8-c-tag--neutral-hybrid:focus{background-color:var(--cre8-color-bg-default-hover)}.cre8-c-tag--neutral-selected,.cre8-c-tag--neutral-hybrid-selected{background-color:var(--cre8-color-bg-brand-strong);border:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-transparent);color:var(--cre8-color-content-knockout)}.cre8-c-tag--neutral-selected:hover,.cre8-c-tag--neutral-selected:focus,.cre8-c-tag--neutral-hybrid-selected:hover,.cre8-c-tag--neutral-hybrid-selected:focus{background-color:var(--cre8-color-bg-brand-strong-hover)}.cre8-c-tag--branded-selected{background-color:var(--cre8-color-bg-brand-xstrong);border:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-transparent);color:var(--cre8-color-content-knockout)}.cre8-c-tag--branded-selected:hover,.cre8-c-tag--branded-selected:focus{background-color:var(--cre8-color-bg-brand-xstrong-hover)}.cre8-c-tag:focus{outline:var(--cre8-border-width-focus) var(--cre8-border-style-default) var(--cre8-color-border-active-outline);outline-offset:var(--cre8-border-width-focus)}.cre8-c-tag.cre8-c-tag--disabled,.cre8-c-tag.cre8-c-tag--disabled:hover,.cre8-c-tag.cre8-c-tag--disabled:focus{background-color:var(--cre8-color-bg-disabled);border:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-disabled);color:var(--cre8-color-content-disabled);cursor:not-allowed;outline:none}.cre8-c-tag__input{font-family:var(--cre8-typography-body-small-font-family);font-size:var(--cre8-typography-body-small-font-size);font-weight:var(--cre8-typography-body-small-font-weight);line-height:var(--cre8-typography-body-small-line-height);text-decoration:var(--cre8-typography-body-small-text-decoration);text-transform:var(--cre8-typography-body-small-text-transform);display:none}.cre8-tag-text{cursor:pointer}.cre8-c-tag--disabled>.cre8-tag-text{cursor:not-allowed}cre8-icon{display:flex;align-items:center}`;
-var m = Object.defineProperty, i = (n, e, r, t) => {
-  for (var c = void 0, s = n.length - 1, h; s >= 0; s--)
-    (h = n[s]) && (c = h(e, r, c) || c);
-  return c && m(e, r, c), c;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-const d = class d extends y {
-  constructor() {
-    super(...arguments), this.variant = "neutral", this.shape = "square";
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.fieldId = this.fieldId || f(), window.addEventListener("click", this._clickCheckHandler, !1), window.addEventListener("click", this._clickRadioHandler, !1), window.addEventListener("keydown", this._handleCheckKeyDown, !1), window.addEventListener("keydown", this.handleRadioKeyDown, !1);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), window.removeEventListener("click", this._clickCheckHandler, !1), window.removeEventListener("click", this._clickRadioHandler, !1), window.removeEventListener("keydown", this._handleCheckKeyDown, !1), window.removeEventListener("keydown", this.handleRadioKeyDown, !1);
-  }
-  renderCheckboxIcon() {
-    return this.type === "checkbox" && this.isSelected ? g`
-    <cre8-icon svg="${p}" class="cre8-tag-icon" aria-hidden="true"></cre8-icon>
-     ` : null;
-  }
-  _clickCheckHandler() {
-    this.isDisabled || (this.type === "checkbox" && (this.isSelected = !this.isSelected), this.dispatchEvent(new CustomEvent("change", { detail: { isSelected: this.isSelected, type: this.type } })));
-  }
-  _handleCheckKeyDown(e) {
-    (e.key === " " || e.key === "Enter") && (e.preventDefault(), this._clickCheckHandler());
-  }
-  /**
-  * Reset the radio tag field
-  */
-  resetField() {
-    this._internals.setFormValue(null);
-  }
-  /**
-  * Reset the radio field tags tab indeces
-  */
-  resetTabIndeces(e) {
-    e.forEach((r) => {
-      r.shadowRoot.querySelector(".cre8-c-tag").setAttribute("tabindex", "0");
-    });
-  }
-  /**
-  * Remove checked
-  * 1) Remove checked property from all tags and set tabindex to -1
-  * 2) Reset the form field to not checked
-  */
-  _removeChecked() {
-    this.parentNode && this.parentNode.querySelectorAll("cre8-tag").forEach((r) => {
-      r.isSelected = !1, r.shadowRoot.querySelector(".cre8-c-tag").setAttribute("tabindex", "-1"), r.resetField();
-    });
-  }
-  /**
-  * Reset form callback
-  * 1) Remove the checked state from all radio tags
-  * 2) Set the checked state to the initial checked state
-  * 3) Set the radio field input checked attribute to the initial checked state
-  */
-  formResetCallback() {
-    this._removeChecked(), this.isSelected = this.initialSelected, this.field.checked = this.initialSelected;
-  }
-  _clickRadioHandler() {
-    this._removeChecked(), this.isSelected = !this.isSelected;
-    const e = this.shadowRoot?.querySelector(".cre8-c-tag");
-    e && e.setAttribute("tabindex", "0"), this.isSelected ? this._internals.setFormValue(this.value || "on") : this._internals.setFormValue(null);
-  }
-  _updateSibling(e, r, t) {
-    e.preventDefault(), this._removeChecked(), t.focus(), t.setAttribute("tabindex", "0"), r.setAttribute("isSelected", "");
-  }
-  _checkPreviousTag(e) {
-    let r = this.previousElementSibling;
-    for (; r; ) {
-      const t = r?.shadowRoot?.querySelector(
-        '.cre8-c-tag:not([aria-disabled="true"])'
-      );
-      if (t) {
-        this._updateSibling(e, r, t);
-        return;
-      }
-      r = r.previousElementSibling;
-    }
-  }
-  _checkNextTag(e) {
-    let r = this.nextElementSibling;
-    for (; r; ) {
-      const t = r?.shadowRoot?.querySelector(
-        '.cre8-c-tag:not([aria-disabled="true"])'
-      );
-      if (t) {
-        this._updateSibling(e, r, t);
-        return;
-      }
-      r = r.nextElementSibling;
-    }
-  }
-  handleRadioKeyDown(e) {
-    if (e.code === "ArrowLeft" || e.code === "ArrowUp")
-      this._checkPreviousTag(e);
-    else if (e.code === "ArrowRight" || e.code === "ArrowDown")
-      this._checkNextTag(e);
-    else if (e.code === "Tab" && !this.isSelected) {
-      const r = this.parentNode.querySelectorAll("cre8-tag");
-      r.forEach((t) => {
-        t.shadowRoot.querySelector(".cre8-c-tag").setAttribute("tabindex", "-1");
-      }), setTimeout(this.resetTabIndeces, 100, r);
-    }
-  }
-  /**
-  * access role when tag embedded in tag-list
-  */
-  _getRole() {
-    if (this.closest("cre8-tag-list"))
-      return "listitem";
-  }
-  render() {
-    const e = this.componentClassNames("cre8-c-tag", {
-      [`cre8-c-tag--${this.type}`]: !0,
-      [`cre8-c-tag--${this.shape}`]: !0,
-      [`cre8-c-tag--${this.variant}`]: !0,
-      [`cre8-c-tag--${this.variant}-selected`]: this.isSelected,
-      "cre8-c-tag--disabled": this.isDisabled
-    }), r = this.isSelected === !0 || this.initialSelected === !0;
-    return g` 
-        <div role="${l(this._getRole())}">
-            <div role="${l(this.type)}" aria-checked="${r}" class="${e}"
-                aria-disabled="${l(this.isDisabled)}"
-                @click="${this.type === "radio" ? this._clickRadioHandler : this._clickCheckHandler}"
-                @keydown="${this.type === "radio" ? this.handleRadioKeyDown : this._handleCheckKeyDown}"
+import svgCheck from '/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/icons/System/Regular/Check.svg?raw';
+import { html, } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { nanoid } from 'nanoid';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { Cre8FormElement } from '../cre8-form-element';
+import '../icon/icon';
+import styles from './tag.styles.js';
+/**
+ * The tag component allows you to make selections, filter content, or trigger actions. While buttons are
+ * expected to appear consistently and with familiar calls to actions, tags should appear dynamically
+ * as a group of multiple interactions elements. It is a flexible
+ * component that comes in the following types:
+ *  - **radio**  Clicking a Radio Button causes it to change color. These tags only allow
+ * one option to be chosen and can be used in place of radio button when they need to be listed
+ * horizontally
+ *
+ *  - **checkbox** It allows for selecting options, It can be toggled on and off.
+ */
+export class Cre8Tag extends Cre8FormElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Color variant
+         * **neutral** renders the default, unselected tag
+         * **branded** renders a selected tag
+         * **neutral-hybrid** renders a tag when mouse is hovering tag
+         */
+        this.variant = 'neutral';
+        /**
+         * shape of the tag, supports square and round, and default not mentioned its a square
+         */
+        this.shape = 'square';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.fieldId = this.fieldId || nanoid();
+        window.addEventListener('click', this._clickCheckHandler, false);
+        window.addEventListener('click', this._clickRadioHandler, false);
+        window.addEventListener('keydown', this._handleCheckKeyDown, false);
+        window.addEventListener('keydown', this.handleRadioKeyDown, false);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener('click', this._clickCheckHandler, false);
+        window.removeEventListener('click', this._clickRadioHandler, false);
+        window.removeEventListener('keydown', this._handleCheckKeyDown, false);
+        window.removeEventListener('keydown', this.handleRadioKeyDown, false);
+    }
+    renderCheckboxIcon() {
+        if (this.type === 'checkbox' && this.isSelected) {
+            return html `
+    <cre8-icon svg="${svgCheck}" class="cre8-tag-icon" aria-hidden="true"></cre8-icon>
+     `;
+        }
+        return null;
+    }
+    _clickCheckHandler() {
+        if (!this.isDisabled) {
+            if (this.type === 'checkbox') {
+                this.isSelected = !this.isSelected;
+            }
+            this.dispatchEvent(new CustomEvent('change', { detail: { isSelected: this.isSelected, type: this.type } }));
+        }
+    }
+    _handleCheckKeyDown(event) {
+        if (event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault();
+            this._clickCheckHandler();
+        }
+    }
+    /**
+    * Reset the radio tag field
+    */
+    resetField() {
+        this._internals.setFormValue(null);
+    }
+    /**
+    * Reset the radio field tags tab indeces
+    */
+    resetTabIndeces(tags) {
+        tags.forEach((element) => {
+            element.shadowRoot.querySelector('.cre8-c-tag').setAttribute('tabindex', '0');
+        });
+    }
+    /**
+    * Remove checked
+    * 1) Remove checked property from all tags and set tabindex to -1
+    * 2) Reset the form field to not checked
+    */
+    _removeChecked() {
+        if (this.parentNode) {
+            /* 1 */
+            const tags = this.parentNode.querySelectorAll('cre8-tag');
+            tags.forEach((element) => {
+                element.isSelected = false;
+                element.shadowRoot.querySelector('.cre8-c-tag').setAttribute('tabindex', '-1');
+                element.resetField();
+            });
+        }
+    }
+    /**
+    * Reset form callback
+    * 1) Remove the checked state from all radio tags
+    * 2) Set the checked state to the initial checked state
+    * 3) Set the radio field input checked attribute to the initial checked state
+    */
+    formResetCallback() {
+        this._removeChecked();
+        this.isSelected = this.initialSelected;
+        this.field.checked = this.initialSelected;
+    }
+    _clickRadioHandler() {
+        this._removeChecked();
+        this.isSelected = !this.isSelected;
+        const tagInput = this.shadowRoot?.querySelector('.cre8-c-tag');
+        if (tagInput) {
+            tagInput.setAttribute('tabindex', '0');
+        }
+        if (this.isSelected) {
+            this._internals.setFormValue(this.value || 'on');
+        }
+        else {
+            this._internals.setFormValue(null);
+        }
+    }
+    _updateSibling(event, sibling, element) {
+        event.preventDefault();
+        this._removeChecked();
+        element.focus();
+        element.setAttribute('tabindex', '0');
+        sibling.setAttribute('isSelected', '');
+    }
+    _checkPreviousTag(event) {
+        let previous = this.previousElementSibling;
+        while (previous) {
+            const previousElement = previous?.shadowRoot?.querySelector('.cre8-c-tag:not([aria-disabled="true"])');
+            if (previousElement) {
+                this._updateSibling(event, previous, previousElement);
+                return;
+            }
+            previous = previous.previousElementSibling;
+        }
+    }
+    _checkNextTag(event) {
+        let next = this.nextElementSibling;
+        while (next) {
+            const nextElement = next?.shadowRoot?.querySelector('.cre8-c-tag:not([aria-disabled="true"])');
+            if (nextElement) {
+                this._updateSibling(event, next, nextElement);
+                return;
+            }
+            next = next.nextElementSibling;
+        }
+    }
+    handleRadioKeyDown(event) {
+        if (event.code === 'ArrowLeft' || event.code === 'ArrowUp') {
+            this._checkPreviousTag(event);
+        }
+        else if (event.code === 'ArrowRight' || event.code === 'ArrowDown') {
+            this._checkNextTag(event);
+        }
+        else if (event.code === 'Tab' && !this.isSelected) {
+            const tags = this.parentNode.querySelectorAll('cre8-tag');
+            tags.forEach((element) => {
+                element.shadowRoot.querySelector('.cre8-c-tag').setAttribute('tabindex', '-1');
+            });
+            // After making tabbing away from the fieldset,
+            // reset the items to be tabbable again so the user can come back to the fieldset
+            setTimeout(this.resetTabIndeces, 100, tags);
+        }
+    }
+    /**
+    * access role when tag embedded in tag-list
+    */
+    _getRole() {
+        const tagContainer = this.closest('cre8-tag-list');
+        if (tagContainer) {
+            return 'listitem';
+        }
+        return undefined;
+    }
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-tag', {
+            [`cre8-c-tag--${this.type}`]: true,
+            [`cre8-c-tag--${this.shape}`]: true,
+            [`cre8-c-tag--${this.variant}`]: true,
+            [`cre8-c-tag--${this.variant}-selected`]: this.isSelected,
+            'cre8-c-tag--disabled': this.isDisabled,
+        });
+        const isSelected = this.isSelected === true || this.initialSelected === true;
+        return html ` 
+        <div role="${ifDefined(this._getRole())}">
+            <div role="${ifDefined(this.type)}" aria-checked="${isSelected}" class="${componentClassNames}"
+                aria-disabled="${ifDefined(this.isDisabled)}"
+                @click="${this.type === 'radio' ? this._clickRadioHandler : this._clickCheckHandler}"
+                @keydown="${this.type === 'radio' ? this.handleRadioKeyDown : this._handleCheckKeyDown}"
                 tabindex="0"
             >
                 ${this.renderCheckboxIcon()}
                 <label 
-                    @input="${this.type === "radio" ? this._clickRadioHandler : this._clickCheckHandler}"
+                    @input="${this.type === 'radio' ? this._clickRadioHandler : this._clickCheckHandler}"
                     for="${this.fieldId}" class="cre8-tag-text">${this.text}
                 </label>
             </div>
@@ -146,40 +216,39 @@ const d = class d extends y {
                 name=${this.text}
                 .value="${this.text}"
                 ?disabled="${this.isDisabled}"
-                .checked = "${r}"
+                .checked = "${isSelected}"
             />
         </div>
   `;
-  }
-};
-d.styles = [v];
-let a = d;
-i([
-  o()
-], a.prototype, "text");
-i([
-  o()
-], a.prototype, "type");
-i([
-  o()
-], a.prototype, "variant");
-i([
-  o()
-], a.prototype, "shape");
-i([
-  o({ type: Boolean })
-], a.prototype, "isDisabled");
-i([
-  o({ type: Boolean })
-], a.prototype, "isSelected");
-i([
-  b("input")
-], a.prototype, "field");
-i([
-  o()
-], a.prototype, "fieldId");
-customElements.get("cre8-tag") === void 0 && customElements.define("cre8-tag", a);
-export {
-  a as Cre8Tag,
-  a as default
-};
+    }
+}
+Cre8Tag.styles = [styles];
+__decorate([
+    property()
+], Cre8Tag.prototype, "text", void 0);
+__decorate([
+    property()
+], Cre8Tag.prototype, "type", void 0);
+__decorate([
+    property()
+], Cre8Tag.prototype, "variant", void 0);
+__decorate([
+    property()
+], Cre8Tag.prototype, "shape", void 0);
+__decorate([
+    property({ type: Boolean })
+], Cre8Tag.prototype, "isDisabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], Cre8Tag.prototype, "isSelected", void 0);
+__decorate([
+    query('input')
+], Cre8Tag.prototype, "field", void 0);
+__decorate([
+    property()
+], Cre8Tag.prototype, "fieldId", void 0);
+if (customElements.get('cre8-tag') === undefined) {
+    customElements.define('cre8-tag', Cre8Tag);
+}
+export default Cre8Tag;
+//# sourceMappingURL=tag.js.map

package/lib/components/tag/tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.js","sourceRoot":"","sources":["../../../components/tag/tag.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAQ,MAAM,mGAAmG,CAAC;AACzH,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChC,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,cAAc,CAAC;AACtB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC;;;;;;;;;;GAUG;AAEH,MAAM,OAAO,OAAQ,SAAQ,eAAe;IAA5C;;QAeE;;;;;WAKG;QAGC,YAAO,GAA6C,SAAS,CAAC;QAElE;;WAEG;QAEC,UAAK,GAAuB,QAAQ,CAAC;IAgP3C,CAAC;IA9MC,iBAAiB;QACb,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,MAAM,EAAE,CAAC;QACxC,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC;QACjE,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC;QACjE,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,mBAAmB,EAAE,KAAK,CAAC,CAAC;QACpE,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC;IACvE,CAAC;IAED,oBAAoB;QAChB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC;QACpE,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC;QACpE,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,mBAAmB,EAAE,KAAK,CAAC,CAAC;QACvE,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC;IAC1E,CAAC;IAED,kBAAkB;QACd,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YAC9C,OAAO,IAAI,CAAA;sBACC,QAAQ;MACxB,CAAC;QACD,CAAC;QACD,OAAO,IAAI,CAAC;IAChB,CAAC;IAEO,kBAAkB;QACtB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACnB,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;gBAC3B,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;YACvC,CAAC;YACD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC;QAChH,CAAC;IACL,CAAC;IAEO,mBAAmB,CAAC,KAAoB;QAC5C,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YAC7C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC9B,CAAC;IACL,CAAC;IAEH;;MAEE;IACO,UAAU;QACb,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;IACvC,CAAC;IAEH;;MAEE;IACA,eAAe,CAAC,IAAe;QAC3B,IAAI,CAAC,OAAO,CAAC,CAAC,OAAoB,EAAE,EAAE;YAClC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;QAClF,CAAC,CAAC,CAAC;IACP,CAAC;IAEH;;;;MAIE;IACQ,cAAc;QAClB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACtB,OAAO;YACH,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC;YAC1D,IAAI,CAAC,OAAO,CAAC,CAAC,OAAgB,EAAE,EAAE;gBAC9B,OAAO,CAAC,UAAU,GAAG,KAAK,CAAC;gBAC3B,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;gBAC/E,OAAO,CAAC,UAAU,EAAE,CAAC;YACzB,CAAC,CAAC,CAAC;QACP,CAAC;IACL,CAAC;IAEH;;;;;MAKE;IACA,iBAAiB;QACb,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,eAAe,CAAC;QACvC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC;IAC9C,CAAC;IAEO,kBAAkB;QACtB,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;QACnC,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAmB,aAAa,CAAC,CAAC;QACjF,IAAI,QAAQ,EAAE,CAAC;YACX,QAAQ,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;QAC3C,CAAC;QACD,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YAClB,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC;QACrD,CAAC;aAAM,CAAC;YACJ,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QACvC,CAAC;IACL,CAAC;IAEO,cAAc,CAAC,KAAoB,EAAE,OAAgB,EAAE,OAAoB;QAC/E,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,OAAO,CAAC,KAAK,EAAE,CAAC;QAChB,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;QACtC,OAAO,CAAC,YAAY,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;IAC3C,CAAC;IAEO,iBAAiB,CAAC,KAAoB;QAC1C,IAAI,QAAQ,GAAG,IAAI,CAAC,sBAAsB,CAAC;QAC3C,OAAO,QAAQ,EAAE,CAAC;YACd,MAAM,eAAe,GAAG,QAAQ,EAAE,UAAU,EAAE,aAAa,CACvD,yCAAyC,CAC5C,CAAC;YAEF,IAAI,eAAe,EAAE,CAAC;gBAClB,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,QAAQ,EAAE,eAAe,CAAC,CAAC;gBACtD,OAAO;YACX,CAAC;YAED,QAAQ,GAAG,QAAQ,CAAC,sBAAsB,CAAC;QAC/C,CAAC;IACL,CAAC;IAEO,aAAa,CAAC,KAAoB;QACtC,IAAI,IAAI,GAAG,IAAI,CAAC,kBAAkB,CAAC;QACnC,OAAO,IAAI,EAAE,CAAC;YACV,MAAM,WAAW,GAAG,IAAI,EAAE,UAAU,EAAE,aAAa,CAC/C,yCAAyC,CAC5C,CAAC;YAEF,IAAI,WAAW,EAAE,CAAC;gBACd,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC;gBAC9C,OAAO;YACX,CAAC;YAED,IAAI,GAAG,IAAI,CAAC,kBAAkB,CAAC;QACnC,CAAC;IACL,CAAC;IAED,kBAAkB,CAAC,KAAoB;QACnC,IAAI,KAAK,CAAC,IAAI,KAAK,WAAW,IAAI,KAAK,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;YACzD,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAClC,CAAC;aAAM,IAAI,KAAK,CAAC,IAAI,KAAK,YAAY,IAAI,KAAK,CAAC,IAAI,KAAK,WAAW,EAAE,CAAC;YACnE,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC;aAAM,IAAI,KAAK,CAAC,IAAI,KAAK,KAAK,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YAClD,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC;YAC1D,IAAI,CAAC,OAAO,CAAC,CAAC,OAAoB,EAAE,EAAE;gBAClC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;YACnF,CAAC,CAAC,CAAC;YAEP,+CAA+C;YAC/C,iFAAiF;YAC7E,UAAU,CAAC,IAAI,CAAC,eAAe,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC;QAChD,CAAC;IACL,CAAC;IAED;;MAEE;IACM,QAAQ;QACZ,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;QACnD,IAAI,YAAY,EAAE,CAAC;YACf,OAAO,UAAU,CAAC;QACtB,CAAC;QACD,OAAO,SAAS,CAAC;IACrB,CAAC;IAED,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,YAAY,EAAE;YAC/D,CAAC,eAAe,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;YAClC,CAAC,eAAe,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI;YACnC,CAAC,eAAe,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;YACrC,CAAC,eAAe,IAAI,CAAC,OAAO,WAAW,CAAC,EAAE,IAAI,CAAC,UAAU;YACzD,sBAAsB,EAAE,IAAI,CAAC,UAAU;SAC1C,CAAC,CAAC;QAEH,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,KAAK,IAAI,IAAI,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC;QAE7E,OAAO,IAAI,CAAA;qBACI,SAAS,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;yBACtB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,UAAU,YAAY,mBAAmB;iCACxE,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC;0BACjC,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB;4BACvE,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,mBAAmB;;;kBAGpF,IAAI,CAAC,kBAAkB,EAAE;;8BAEb,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB;2BAC5E,IAAI,CAAC,OAAO,2BAA2B,IAAI,CAAC,IAAI;;;;;wBAKnD,IAAI,CAAC,IAAI;sBACX,IAAI,CAAC,OAAO;uBACX,IAAI,CAAC,IAAI;0BACN,IAAI,CAAC,IAAI;6BACN,IAAI,CAAC,UAAU;8BACd,UAAU;;;GAGrC,CAAC;IACF,CAAC;;AA3QQ,cAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAGvB;IADH,QAAQ,EAAE;qCACM;AASb;IADH,QAAQ,EAAE;qCACmB;AAU1B;IADH,QAAQ,EAAE;wCACuD;AAM9D;IADH,QAAQ,EAAE;sCAC8B;AAOrC;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CACH;AAOrB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CACH;AAMrB;IADH,KAAK,CAAC,OAAO,CAAC;sCACc;AAOzB;IADH,QAAQ,EAAE;wCACU;AAuNvB,IAAI,cAAc,CAAC,GAAG,CAAC,UAAU,CAAC,KAAK,SAAS,EAAE,CAAC;IAC/C,cAAc,CAAC,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;AAC/C,CAAC;AAQD,eAAe,OAAO,CAAC","sourcesContent":["import svgCheck from '/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/icons/System/Regular/Check.svg?raw';\nimport { html,  } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { Cre8FormElement } from '../cre8-form-element';\nimport '../icon/icon';\nimport styles from './tag.styles.js';\n\n/**\n * The tag component allows you to make selections, filter content, or trigger actions. While buttons are\n * expected to appear consistently and with familiar calls to actions, tags should appear dynamically\n * as a group of multiple interactions elements. It is a flexible\n * component that comes in the following types:\n *  - **radio**  Clicking a Radio Button causes it to change color. These tags only allow\n * one option to be chosen and can be used in place of radio button when they need to be listed\n * horizontally\n *\n *  - **checkbox** It allows for selecting options, It can be toggled on and off.\n */\n\nexport class Cre8Tag extends Cre8FormElement {\n    static styles = [styles];\n\n  @property()\n      text: string;\n\n  /**\n   * Type of tag\n   * **checkbox** renders a checkbox tag\n   ***radio** renders a radio tag\n   */\n\n  @property()\n      type: 'checkbox'| 'radio';\n\n  /**\n   * Color variant\n   * **neutral** renders the default, unselected tag\n   * **branded** renders a selected tag\n   * **neutral-hybrid** renders a tag when mouse is hovering tag\n   */\n\n  @property()\n      variant: 'neutral' | 'branded' | 'neutral-hybrid' = 'neutral';\n\n  /**\n   * shape of the tag, supports square and round, and default not mentioned its a square\n   */\n  @property()\n      shape: 'square' | 'round' = 'square';\n\n  /*\n  * Disabled attribute\n  * renders a greyed out tag that the user cannot interact with\n  */\n  @property({ type: Boolean })\n      isDisabled?: boolean;\n\n  /*\n  * Selected attribute\n  * renders a selected tag\n  */\n  @property({ type: Boolean })\n      isSelected?: boolean;\n\n  /**\n  * Get the radio field item input\n  */\n  @query('input')\n      field!: HTMLInputElement;\n\n  /**\n   * The fieldId attribute is assigned to the HTML input element of the radio button and the for attribute of the\n   * corresponding label.\n   */\n  @property()\n      fieldId?: string;\n\n  /**\n  * Initial checked for initial checked state\n  */\n  private initialSelected?: boolean;\n\n  connectedCallback() {\n      super.connectedCallback();\n      this.fieldId = this.fieldId || nanoid();\n      window.addEventListener('click', this._clickCheckHandler, false);\n      window.addEventListener('click', this._clickRadioHandler, false);\n      window.addEventListener('keydown', this._handleCheckKeyDown, false);\n      window.addEventListener('keydown', this.handleRadioKeyDown, false);\n  }\n\n  disconnectedCallback() {\n      super.disconnectedCallback();\n      window.removeEventListener('click', this._clickCheckHandler, false);\n      window.removeEventListener('click', this._clickRadioHandler, false);\n      window.removeEventListener('keydown', this._handleCheckKeyDown, false);\n      window.removeEventListener('keydown', this.handleRadioKeyDown, false);\n  }\n\n  renderCheckboxIcon() {\n      if (this.type === 'checkbox' && this.isSelected) {\n          return html`\n    <cre8-icon svg=\"${svgCheck}\" class=\"cre8-tag-icon\" aria-hidden=\"true\"></cre8-icon>\n     `;\n      }\n      return null;\n  }\n\n  private _clickCheckHandler() {\n      if (!this.isDisabled) {\n          if (this.type === 'checkbox') {\n              this.isSelected = !this.isSelected;\n          }\n          this.dispatchEvent(new CustomEvent('change', { detail: { isSelected: this.isSelected, type: this.type } }));\n      }\n  }\n\n  private _handleCheckKeyDown(event: KeyboardEvent) {\n      if (event.key === ' ' || event.key === 'Enter') {\n          event.preventDefault();\n          this._clickCheckHandler();\n      }\n  }\n\n/**\n* Reset the radio tag field\n*/\n  public resetField() {\n      this._internals.setFormValue(null);\n  }\n\n/**\n* Reset the radio field tags tab indeces\n*/\n  resetTabIndeces(tags: Cre8Tag[]) {\n      tags.forEach((element: HTMLElement) => {\n          element.shadowRoot.querySelector('.cre8-c-tag').setAttribute('tabindex', '0');\n      });\n  }\n\n/**\n* Remove checked\n* 1) Remove checked property from all tags and set tabindex to -1\n* 2) Reset the form field to not checked\n*/\n  private _removeChecked() {\n      if (this.parentNode) {\n      /* 1 */\n          const tags = this.parentNode.querySelectorAll('cre8-tag');\n          tags.forEach((element: Cre8Tag) => {\n              element.isSelected = false;\n              element.shadowRoot.querySelector('.cre8-c-tag').setAttribute('tabindex', '-1');\n              element.resetField();\n          });\n      }\n  }\n\n/**\n* Reset form callback\n* 1) Remove the checked state from all radio tags\n* 2) Set the checked state to the initial checked state\n* 3) Set the radio field input checked attribute to the initial checked state\n*/\n  formResetCallback(): void {\n      this._removeChecked();\n      this.isSelected = this.initialSelected;\n      this.field.checked = this.initialSelected;\n  }\n\n  private _clickRadioHandler() {\n      this._removeChecked();\n      this.isSelected = !this.isSelected;\n      const tagInput = this.shadowRoot?.querySelector<HTMLInputElement>('.cre8-c-tag');\n      if (tagInput) {\n          tagInput.setAttribute('tabindex', '0');\n      }\n      if (this.isSelected) {\n          this._internals.setFormValue(this.value || 'on');\n      } else {\n          this._internals.setFormValue(null);\n      }\n  }\n\n  private _updateSibling(event: KeyboardEvent, sibling: Element, element: HTMLElement) {\n      event.preventDefault();\n      this._removeChecked();\n      element.focus();\n      element.setAttribute('tabindex', '0');\n      sibling.setAttribute('isSelected', '');\n  }\n\n  private _checkPreviousTag(event: KeyboardEvent) {\n      let previous = this.previousElementSibling;\n      while (previous) {\n          const previousElement = previous?.shadowRoot?.querySelector<HTMLInputElement>(\n              '.cre8-c-tag:not([aria-disabled=\"true\"])'\n          );\n\n          if (previousElement) {\n              this._updateSibling(event, previous, previousElement);\n              return;\n          }\n\n          previous = previous.previousElementSibling;\n      }\n  }\n\n  private _checkNextTag(event: KeyboardEvent) {\n      let next = this.nextElementSibling;\n      while (next) {\n          const nextElement = next?.shadowRoot?.querySelector<HTMLInputElement>(\n              '.cre8-c-tag:not([aria-disabled=\"true\"])'\n          );\n\n          if (nextElement) {\n              this._updateSibling(event, next, nextElement);\n              return;\n          }\n\n          next = next.nextElementSibling;\n      }\n  }\n\n  handleRadioKeyDown(event: KeyboardEvent) {\n      if (event.code === 'ArrowLeft' || event.code === 'ArrowUp') {\n          this._checkPreviousTag(event);\n      } else if (event.code === 'ArrowRight' || event.code === 'ArrowDown') {\n          this._checkNextTag(event);\n      } else if (event.code === 'Tab' && !this.isSelected) {\n          const tags = this.parentNode.querySelectorAll('cre8-tag');\n          tags.forEach((element: HTMLElement) => {\n              element.shadowRoot.querySelector('.cre8-c-tag').setAttribute('tabindex', '-1');\n          });\n\n      // After making tabbing away from the fieldset,\n      // reset the items to be tabbable again so the user can come back to the fieldset\n          setTimeout(this.resetTabIndeces, 100, tags);\n      }\n  }\n\n  /**\n  * access role when tag embedded in tag-list\n  */\n  private _getRole(): 'listitem' | undefined {\n      const tagContainer = this.closest('cre8-tag-list');\n      if (tagContainer) {\n          return 'listitem';\n      }\n      return undefined;\n  }\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-tag', {\n          [`cre8-c-tag--${this.type}`]: true,\n          [`cre8-c-tag--${this.shape}`]: true,\n          [`cre8-c-tag--${this.variant}`]: true,\n          [`cre8-c-tag--${this.variant}-selected`]: this.isSelected,\n          'cre8-c-tag--disabled': this.isDisabled,\n      });\n\n      const isSelected = this.isSelected === true || this.initialSelected === true;\n\n      return html` \n        <div role=\"${ifDefined(this._getRole())}\">\n            <div role=\"${ifDefined(this.type)}\" aria-checked=\"${isSelected}\" class=\"${componentClassNames}\"\n                aria-disabled=\"${ifDefined(this.isDisabled)}\"\n                @click=\"${this.type === 'radio' ? this._clickRadioHandler : this._clickCheckHandler}\"\n                @keydown=\"${this.type === 'radio' ? this.handleRadioKeyDown : this._handleCheckKeyDown}\"\n                tabindex=\"0\"\n            >\n                ${this.renderCheckboxIcon()}\n                <label \n                    @input=\"${this.type === 'radio' ? this._clickRadioHandler : this._clickCheckHandler}\"\n                    for=\"${this.fieldId}\" class=\"cre8-tag-text\">${this.text}\n                </label>\n            </div>\n            <input\n                class=\"cre8-c-tag__input\" \n                type=\"${this.type}\"\n                id=\"${this.fieldId}\"\n                name=${this.text}\n                .value=\"${this.text}\"\n                ?disabled=\"${this.isDisabled}\"\n                .checked = \"${isSelected}\"\n            />\n        </div>\n  `;\n  }\n}\n\nif (customElements.get('cre8-tag') === undefined) {\n    customElements.define('cre8-tag', Cre8Tag);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-tag': Cre8Tag;\n  }\n}\n\nexport default Cre8Tag;\n"]}

package/lib/components/tag/tag.styles.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+const styles = css `*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:inline-flex}.cre8-c-tag{font-family:var(--cre8-typography-label-small-font-family);font-size:var(--cre8-typography-label-small-font-size);font-weight:var(--cre8-typography-label-small-font-weight);line-height:var(--cre8-typography-label-small-line-height);text-decoration:var(--cre8-typography-label-small-text-decoration);text-transform:var(--cre8-typography-label-small-text-transform);display:flex;align-items:center;background-color:var(--cre8-color-bg-default);border:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);color:var(--cre8-color-content-default);cursor:pointer;gap:var(--cre8-spacing-8);padding:var(--cre8-spacing-4) var(--cre8-spacing-16);transition:all var(--cre8-anim-fade-quick) var(--cre8-anim-ease);white-space:nowrap}.cre8-c-tag--square{border-radius:var(--cre8-border-radius-small)}.cre8-c-tag--round{border-radius:var(--cre8-border-radius-round)}.cre8-c-tag--neutral:hover,.cre8-c-tag--neutral:focus{background-color:var(--cre8-color-bg-default-hover);border:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong)}.cre8-c-tag--branded{background-color:var(--cre8-color-bg-brand);border:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-transparent)}.cre8-c-tag--branded:hover,.cre8-c-tag--branded:focus{background-color:var(--cre8-color-bg-brand-hover)}.cre8-c-tag--neutral-hybrid{color:var(--cre8-color-content-brand)}.cre8-c-tag--neutral-hybrid:hover,.cre8-c-tag--neutral-hybrid:focus{background-color:var(--cre8-color-bg-default-hover)}.cre8-c-tag--neutral-selected,.cre8-c-tag--neutral-hybrid-selected{background-color:var(--cre8-color-bg-brand-strong);border:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-transparent);color:var(--cre8-color-content-knockout)}.cre8-c-tag--neutral-selected:hover,.cre8-c-tag--neutral-selected:focus,.cre8-c-tag--neutral-hybrid-selected:hover,.cre8-c-tag--neutral-hybrid-selected:focus{background-color:var(--cre8-color-bg-brand-strong-hover)}.cre8-c-tag--branded-selected{background-color:var(--cre8-color-bg-brand-xstrong);border:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-transparent);color:var(--cre8-color-content-knockout)}.cre8-c-tag--branded-selected:hover,.cre8-c-tag--branded-selected:focus{background-color:var(--cre8-color-bg-brand-xstrong-hover)}.cre8-c-tag:focus{outline:var(--cre8-border-width-focus) var(--cre8-border-style-default) var(--cre8-color-border-active-outline);outline-offset:var(--cre8-border-width-focus)}.cre8-c-tag.cre8-c-tag--disabled,.cre8-c-tag.cre8-c-tag--disabled:hover,.cre8-c-tag.cre8-c-tag--disabled:focus{background-color:var(--cre8-color-bg-disabled);border:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-disabled);color:var(--cre8-color-content-disabled);cursor:not-allowed;outline:none}.cre8-c-tag__input{font-family:var(--cre8-typography-body-small-font-family);font-size:var(--cre8-typography-body-small-font-size);font-weight:var(--cre8-typography-body-small-font-weight);line-height:var(--cre8-typography-body-small-line-height);text-decoration:var(--cre8-typography-body-small-text-decoration);text-transform:var(--cre8-typography-body-small-text-transform);display:none}.cre8-tag-text{cursor:pointer}.cre8-c-tag--disabled>.cre8-tag-text{cursor:not-allowed}cre8-icon{display:flex;align-items:center}`;
+export default styles;
+//# sourceMappingURL=tag.styles.js.map

package/lib/components/tag/tag.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.styles.js","sourceRoot":"","sources":["../../../components/tag/tag.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,2qKAA2qK,CAAC;AAC9rK,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:inline-flex}.cre8-c-tag{font-family:var(--cre8-typography-label-small-font-family);font-size:var(--cre8-typography-label-small-font-size);font-weight:var(--cre8-typography-label-small-font-weight);line-height:var(--cre8-typography-label-small-line-height);text-decoration:var(--cre8-typography-label-small-text-decoration);text-transform:var(--cre8-typography-label-small-text-transform);display:flex;align-items:center;background-color:var(--cre8-color-bg-default);border:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);color:var(--cre8-color-content-default);cursor:pointer;gap:var(--cre8-spacing-8);padding:var(--cre8-spacing-4) var(--cre8-spacing-16);transition:all var(--cre8-anim-fade-quick) var(--cre8-anim-ease);white-space:nowrap}.cre8-c-tag--square{border-radius:var(--cre8-border-radius-small)}.cre8-c-tag--round{border-radius:var(--cre8-border-radius-round)}.cre8-c-tag--neutral:hover,.cre8-c-tag--neutral:focus{background-color:var(--cre8-color-bg-default-hover);border:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong)}.cre8-c-tag--branded{background-color:var(--cre8-color-bg-brand);border:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-transparent)}.cre8-c-tag--branded:hover,.cre8-c-tag--branded:focus{background-color:var(--cre8-color-bg-brand-hover)}.cre8-c-tag--neutral-hybrid{color:var(--cre8-color-content-brand)}.cre8-c-tag--neutral-hybrid:hover,.cre8-c-tag--neutral-hybrid:focus{background-color:var(--cre8-color-bg-default-hover)}.cre8-c-tag--neutral-selected,.cre8-c-tag--neutral-hybrid-selected{background-color:var(--cre8-color-bg-brand-strong);border:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-transparent);color:var(--cre8-color-content-knockout)}.cre8-c-tag--neutral-selected:hover,.cre8-c-tag--neutral-selected:focus,.cre8-c-tag--neutral-hybrid-selected:hover,.cre8-c-tag--neutral-hybrid-selected:focus{background-color:var(--cre8-color-bg-brand-strong-hover)}.cre8-c-tag--branded-selected{background-color:var(--cre8-color-bg-brand-xstrong);border:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-transparent);color:var(--cre8-color-content-knockout)}.cre8-c-tag--branded-selected:hover,.cre8-c-tag--branded-selected:focus{background-color:var(--cre8-color-bg-brand-xstrong-hover)}.cre8-c-tag:focus{outline:var(--cre8-border-width-focus) var(--cre8-border-style-default) var(--cre8-color-border-active-outline);outline-offset:var(--cre8-border-width-focus)}.cre8-c-tag.cre8-c-tag--disabled,.cre8-c-tag.cre8-c-tag--disabled:hover,.cre8-c-tag.cre8-c-tag--disabled:focus{background-color:var(--cre8-color-bg-disabled);border:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-disabled);color:var(--cre8-color-content-disabled);cursor:not-allowed;outline:none}.cre8-c-tag__input{font-family:var(--cre8-typography-body-small-font-family);font-size:var(--cre8-typography-body-small-font-size);font-weight:var(--cre8-typography-body-small-font-weight);line-height:var(--cre8-typography-body-small-line-height);text-decoration:var(--cre8-typography-body-small-text-decoration);text-transform:var(--cre8-typography-body-small-text-transform);display:none}.cre8-tag-text{cursor:pointer}.cre8-c-tag--disabled>.cre8-tag-text{cursor:not-allowed}cre8-icon{display:flex;align-items:center}`;\nexport default styles;\n"]}