@ukic/web-components 2.29.1 → 3.0.0-alpha.2

package/dist/collection/components/ic-chip/test/basic/ic-chip.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-chip.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-chip/test/basic/ic-chip.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,KAAK,OAAO,MAAM,2BAA2B,CAAC;AAErD,QAAQ,CAAC,iCAAiC,EAAE,GAAG,EAAE;IAC/C,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE;;;;uBAIW;SAClB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2BAA2B,EAAE,KAAK,IAAI,EAAE;QACzC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE;;;;uBAIW;SAClB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wBAAwB,EAAE,KAAK,IAAI,EAAE;QACtC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE;;;;uBAIW;SAClB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qBAAqB,EAAE,KAAK,IAAI,EAAE;QACnC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE;;;;yBAIa;SACpB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;QAChD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE;;;;WAID;SACN,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;QACpD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE;;;;WAID;SACN,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kEAAkE,EAAE,KAAK,IAAI,EAAE;QAChF,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE;;;;WAID;SACN,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+DAA+D,EAAE,KAAK,IAAI,EAAE;QAC7E,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE,mEAAmE;SAC1E,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC;QAE/B,MAAM,IAAI,GAAG,MAAM,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;QAEtD,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAEnE,MAAM,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;QAE3D,MAAM,KAAK,GAAG,IAAI,KAAK,CAAC,YAAY,EAAE;YACpC,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI;SACjB,CAAC,CAAC;QAEH,aAAa,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACnC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC;IAC9D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kEAAkE,EAAE,KAAK,IAAI,EAAE;QAChF,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE,mEAAmE;SAC1E,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC;QAE/B,MAAM,IAAI,GAAG,MAAM,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;QAEtD,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAEnE,MAAM,UAAU,GAAG,IAAI,KAAK,CAAC,YAAY,EAAE;YACzC,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI;SACjB,CAAC,CAAC;QAEH,aAAa,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QACxC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC;QAE5D,MAAM,UAAU,GAAG,IAAI,KAAK,CAAC,YAAY,EAAE;YACzC,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI;SACjB,CAAC,CAAC;QAEH,aAAa,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QAExC,MAAM,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;IAC7D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;QAClD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE,oEAAoE;SAC3E,CAAC,CAAC;QAEH,IAAI,IAAI,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC3D,MAAM,aAAa,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAEzE,MAAM,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;QAC5B,MAAM,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;QAErC,MAAM,aAAa,CAAC,KAAK,EAAE,CAAC;QAE5B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,IAAI,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAEvD,MAAM,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC;IAC1B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6CAA6C,EAAE,KAAK,IAAI,EAAE;QAC3D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE,oEAAoE;SAC3E,CAAC,CAAC;QAEH,6EAA6E;QAC7E,MAAM,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,gBAAgB,CAAC;IACtD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kDAAkD,EAAE,KAAK,IAAI,EAAE;QAChE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE,4DAA4D;SACnE,CAAC,CAAC;QAEH,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;QAE/C,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAEtD,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;QAC7B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACxD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mDAAmD,EAAE,KAAK,IAAI,EAAE;QACjE,MAAM,CAAC,cAAc,CAAC,OAAO,EAAE,cAAc,EAAE;YAC7C,KAAK,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;SACvC,CAAC,CAAC;QAEH,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,IAAI,CAAC;YAClB,IAAI,EAAE,qCAAqC;SAC5C,CAAC,CAAC;QAEH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC9C,MAAM,CACJ,IAAI,CAAC,IAAI,CAAC,UAAU;aACjB,aAAa,CAAC,eAAe,CAAC;aAC9B,SAAS,CAAC,QAAQ,CAAC,YAAY,CAAC,CACpC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACf,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Chip } from \"../../ic-chip\";\nimport * as helpers from \"../../../../utils/helpers\";\n\ndescribe(\"ic-chip component renders label\", () => {\n  it(\"should render static\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Label\">\n            <svg slot=\"icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z\" fill=\"currentColor\"/>\n</svg>\n            </ic-chip>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render dismissible\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Label\" dismissible=\"true\">\n            <svg slot=\"icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z\" fill=\"currentColor\"/>\n</svg>\n            </ic-chip>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render disabled\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Label\" dismissible=\"true\" disabled=\"true\">\n            <svg slot=\"icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z\" fill=\"currentColor\"/>\n</svg>\n            </ic-chip>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render small\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Label\" dismissible=\"true\" size=\"small\">\n              <svg slot=\"icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z\" fill=\"currentColor\"/>\n  </svg>\n              </ic-chip>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with custom colour\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Label\" custom-color=\"#F8C8DC\">\n            <svg slot=\"icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z\" fill=\"currentColor\"/>\n</svg>\n</ic-chip>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with custom rgb colour\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Label\" custom-color=\"rgb(248,200,220)\">\n            <svg slot=\"icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z\" fill=\"currentColor\"/>\n</svg>\n</ic-chip>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with custom colour that sets white foreground text\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Label\" custom-color=\"#00008B\">\n            <svg slot=\"icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z\" fill=\"currentColor\"/>\n</svg>\n</ic-chip>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should apply 'hovered' style when cursor is on dismiss button\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip id=\"test-id\" label=\"Label\" dismissible=\"true\"></ic-chip>`,\n    });\n\n    expect(page.root).not.toBeNull;\n\n    const chip = await document.getElementById(\"test-id\");\n\n    const dismissButton = page.root.shadowRoot.querySelector(\"button\");\n\n    await expect(chip.classList.contains(\"hovered\")).toBeFalsy;\n\n    const event = new Event(\"mouseenter\", {\n      bubbles: true,\n      cancelable: true,\n    });\n\n    dismissButton.dispatchEvent(event);\n    await page.waitForChanges();\n\n    await expect(chip.classList.contains(\"hovered\")).toBeTruthy;\n  });\n\n  it(\"should lose 'hovered' style when cursor moves off dismiss button\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip id=\"test-id\" label=\"Label\" dismissible=\"true\"></ic-chip>`,\n    });\n\n    expect(page.root).not.toBeNull;\n\n    const chip = await document.getElementById(\"test-id\");\n\n    const dismissButton = page.root.shadowRoot.querySelector(\"button\");\n\n    const enterEvent = new Event(\"mouseenter\", {\n      bubbles: true,\n      cancelable: true,\n    });\n\n    dismissButton.dispatchEvent(enterEvent);\n    await page.waitForChanges();\n\n    await expect(chip.classList.contains(\"hovered\")).toBeTruthy;\n\n    const leaveEvent = new Event(\"mouseleave\", {\n      bubbles: true,\n      cancelable: true,\n    });\n\n    dismissButton.dispatchEvent(leaveEvent);\n\n    await expect(chip.classList.contains(\"hovered\")).toBeFalsy;\n  });\n\n  it(\"should close on dismiss icon click\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"This is dismissible\" dismissible=\"true\"></ic-chip>`,\n    });\n\n    let chip = await page.root.shadowRoot.querySelector(\"div\");\n    const dismissButton = await page.root.shadowRoot.querySelector(\"button\");\n\n    expect(chip).not.toBeNull();\n    expect(dismissButton).not.toBeNull();\n\n    await dismissButton.click();\n\n    await page.waitForChanges();\n    chip = await page.root.shadowRoot.querySelector(\"div\");\n\n    expect(chip).toBeNull();\n  });\n\n  it(\"should call 'setFocus' when chip is focused\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"This is dismissible\" dismissible=\"true\"></ic-chip>`,\n    });\n\n    //Can't expect anything in this test - this is to increase code coverage only\n    await page.rootInstance.setFocus().toHaveBeenCalled;\n  });\n\n  it(\"should switch custom colour after initial render\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Default\" custom-color=\"#F8C8DC\"></ic-chip>`,\n    });\n\n    const chip = document.querySelector(\"ic-chip\");\n\n    expect(page.rootInstance.customColor).toBe(\"#F8C8DC\");\n\n    chip.customColor = \"#00008B\";\n    await page.waitForChanges();\n\n    expect(page.rootInstance.customColor).toBe(\"#00008B\");\n  });\n\n  it(\"should apply the correct class when in an AG Grid\", async () => {\n    Object.defineProperty(helpers, \"isElInAGGrid\", {\n      value: jest.fn().mockReturnValue(true),\n    });\n\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Default\"></ic-chip>`,\n    });\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.inAGGrid).toBe(true);\n    expect(\n      page.root.shadowRoot\n        .querySelector(\"ic-typography\")\n        .classList.contains(\"in-ag-grid\")\n    ).toBe(true);\n  });\n});\n"]}
+{"version":3,"file":"ic-chip.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-chip/test/basic/ic-chip.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Chip } from \"../../ic-chip\";\nimport * as helpers from \"../../../../utils/helpers\";\n\ndescribe(\"ic-chip component renders label\", () => {\n  it(\"should render static\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Label\">\n            <svg slot=\"icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z\" fill=\"currentColor\"/>\n</svg>\n            </ic-chip>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render dismissible\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Label\" dismissible=\"true\">\n            <svg slot=\"icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z\" fill=\"currentColor\"/>\n</svg>\n            </ic-chip>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render disabled\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Label\" dismissible=\"true\" disabled=\"true\">\n            <svg slot=\"icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z\" fill=\"currentColor\"/>\n</svg>\n            </ic-chip>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render small\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Label\" dismissible=\"true\" size=\"small\">\n              <svg slot=\"icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z\" fill=\"currentColor\"/>\n  </svg>\n              </ic-chip>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with custom colour\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Label\" custom-color=\"#F8C8DC\">\n            <svg slot=\"icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z\" fill=\"currentColor\"/>\n</svg>\n</ic-chip>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with custom rgb colour\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Label\" custom-color=\"rgb(248,200,220)\">\n            <svg slot=\"icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z\" fill=\"currentColor\"/>\n</svg>\n</ic-chip>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with custom colour that sets white foreground text\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Label\" custom-color=\"#00008B\">\n            <svg slot=\"icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z\" fill=\"currentColor\"/>\n</svg>\n</ic-chip>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render outlined variant\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Label\" variant=\"outlined\">\n        </ic-chip>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render outlined variant with solid-background\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Label\" variant=\"outlined\" transparent-background=\"false\">\n        </ic-chip>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should apply 'hovered' style when cursor is on dismiss button\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip id=\"test-id\" label=\"Label\" dismissible=\"true\"></ic-chip>`,\n    });\n\n    expect(page.root).not.toBeNull;\n\n    const chip = await document.getElementById(\"test-id\");\n\n    const dismissButton = page.root.shadowRoot.querySelector(\"button\");\n\n    await expect(chip.classList.contains(\"hovered\")).toBeFalsy;\n\n    const event = new Event(\"mouseenter\", {\n      bubbles: true,\n      cancelable: true,\n    });\n\n    dismissButton.dispatchEvent(event);\n    await page.waitForChanges();\n\n    await expect(chip.classList.contains(\"hovered\")).toBeTruthy;\n  });\n\n  it(\"should lose 'hovered' style when cursor moves off dismiss button\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip id=\"test-id\" label=\"Label\" dismissible=\"true\"></ic-chip>`,\n    });\n\n    expect(page.root).not.toBeNull;\n\n    const chip = await document.getElementById(\"test-id\");\n\n    const dismissButton = page.root.shadowRoot.querySelector(\"button\");\n\n    const enterEvent = new Event(\"mouseenter\", {\n      bubbles: true,\n      cancelable: true,\n    });\n\n    dismissButton.dispatchEvent(enterEvent);\n    await page.waitForChanges();\n\n    await expect(chip.classList.contains(\"hovered\")).toBeTruthy;\n\n    const leaveEvent = new Event(\"mouseleave\", {\n      bubbles: true,\n      cancelable: true,\n    });\n\n    dismissButton.dispatchEvent(leaveEvent);\n\n    await expect(chip.classList.contains(\"hovered\")).toBeFalsy;\n  });\n\n  it(\"should close on dismiss icon click\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"This is dismissible\" dismissible=\"true\"></ic-chip>`,\n    });\n\n    let chip = await page.root.shadowRoot.querySelector(\"div\");\n    const dismissButton = await page.root.shadowRoot.querySelector(\"button\");\n\n    expect(chip).not.toBeNull();\n    expect(dismissButton).not.toBeNull();\n\n    await dismissButton.click();\n\n    await page.waitForChanges();\n    chip = await page.root.shadowRoot.querySelector(\"div\");\n\n    expect(chip).toBeNull();\n  });\n\n  it(\"should call 'setFocus' when chip is focused\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"This is dismissible\" dismissible=\"true\"></ic-chip>`,\n    });\n\n    //Can't expect anything in this test - this is to increase code coverage only\n    await page.rootInstance.setFocus().toHaveBeenCalled;\n  });\n\n  it(\"should switch custom colour after initial render\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Default\" custom-color=\"#F8C8DC\"></ic-chip>`,\n    });\n\n    const chip = document.querySelector(\"ic-chip\");\n\n    expect(page.rootInstance.customColor).toBe(\"#F8C8DC\");\n\n    chip.customColor = \"#00008B\";\n    await page.waitForChanges();\n\n    expect(page.rootInstance.customColor).toBe(\"#00008B\");\n  });\n\n  it(\"should apply the correct class when in an AG Grid\", async () => {\n    Object.defineProperty(helpers, \"isElInAGGrid\", {\n      value: jest.fn().mockReturnValue(true),\n    });\n\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Default\"></ic-chip>`,\n    });\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.inAGGrid).toBe(true);\n    expect(\n      page.root.shadowRoot\n        .querySelector(\"ic-typography\")\n        .classList.contains(\"in-ag-grid\")\n    ).toBe(true);\n  });\n});\n"]}

package/dist/collection/components/ic-classification-banner/ic-classification-banner.css

@@ -452,9 +452,27 @@ video {
   width: 100%;
   height: var(--ic-space-lg);
   z-index: var(--ic-z-index-classification-banner);
+
+  --ic-typography-color: currentcolor;
+
+  /* classification official */
+  --ic-color-classification-official: var(--ic-color-classification-blue);
+  --ic-color-classification-official-foreground: #fff;
+
+  /* classification secret */
+  --ic-color-classification-secret: var(--ic-color-classification-yellow);
+  --ic-color-classification-secret-foreground: #000;
+
+  /* classification top secret */
+  --ic-color-classification-top-secret: var(--ic-color-classification-red);
+  --ic-color-classification-top-secret-foreground: #fff;
+
+  /* classification not set */
+  --ic-color-classification-not-set: var(--ic-color-classification-grey);
+  --ic-color-classification-not-set-foreground: #fff;
 }
 
-:host(.inline) {
+:host(.ic-classification-banner-inline) {
   position: static;
   left: auto;
   bottom: auto;
@@ -469,24 +487,24 @@ video {
 }
 
 .default {
-  background-color: var(--ic-classification-not-set);
-  color: var(--ic-classification-not-set-foreground);
+  background-color: var(--ic-color-classification-not-set);
+  color: var(--ic-color-classification-not-set-foreground);
 }
 
 .official,
 .official-sensitive {
-  background-color: var(--ic-classification-official);
-  color: var(--ic-classification-official-foreground);
+  background-color: var(--ic-color-classification-official);
+  color: var(--ic-color-classification-official-foreground);
 }
 
 .secret {
-  background-color: var(--ic-classification-secret);
-  color: var(--ic-classification-secret-foreground);
+  background-color: var(--ic-color-classification-secret);
+  color: var(--ic-color-classification-secret-foreground);
 }
 
 .top-secret {
-  background-color: var(--ic-classification-top-secret);
-  color: var(--ic-classification-top-secret-foreground);
+  background-color: var(--ic-color-classification-top-secret);
+  color: var(--ic-color-classification-top-secret-foreground);
 }
 
 .offscreen {
@@ -499,6 +517,6 @@ video {
 
 @media (forced-colors: active) {
   .classification-banner {
-    border: var(--ic-hc-border);
+    border: var(--ic-border-hc);
   }
 }

package/dist/collection/components/ic-classification-banner/ic-classification-banner.js

@@ -25,7 +25,7 @@ export class ClassificationBanner {
         if (!classification ||
             (classification && !classificationText[classification]))
             classification = "default";
-        return (h(Host, { class: { ["inline"]: inline } }, h("banner", { "aria-label": "Protective marking", class: {
+        return (h(Host, { class: { ["ic-classification-banner-inline"]: inline } }, h("banner", { "aria-label": "Protective marking", class: {
                 ["classification-banner"]: true,
                 [`${classification}`]: classification,
             } }, classification !== "default" ? (h("span", { class: "offscreen" }, "The protective marking of this page is:", " ")) : null, h("ic-typography", { variant: "caption-uppercase" }, classification === "default"

package/dist/collection/components/ic-classification-banner/ic-classification-banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-classification-banner.js","sourceRoot":"","sources":["../../../src/components/ic-classification-banner/ic-classification-banner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGzD,MAAM,kBAAkB,GAAG;IACzB,OAAO,EAAE,4BAA4B;IACrC,QAAQ,EAAE,UAAU;IACpB,oBAAoB,EAAE,oBAAoB;IAC1C,MAAM,EAAE,QAAQ;IAChB,YAAY,EAAE,YAAY;CAC3B,CAAC;AAOF,MAAM,OAAO,oBAAoB;;mCAIQ,EAAE;8BAIO,SAAS;uBAI9B,IAAI;sBAIJ,KAAK;oBAIP,KAAK;;IAE9B,MAAM;QACJ,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QAE9B,qDAAqD;QACrD,IAAI,EAAE,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;QAC5D,IAAI,CAAC,OAAO;YAAE,OAAO,GAAG,EAAE,CAAC;QAC3B,IAAI,CAAC,mBAAmB;YAAE,mBAAmB,GAAG,EAAE,CAAC;QACnD,IACE,CAAC,cAAc;YACf,CAAC,cAAc,IAAI,CAAC,kBAAkB,CAAC,cAAc,CAAC,CAAC;YAEvD,cAAc,GAAG,SAAS,CAAC;QAE7B,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE;YACjC,4BACa,oBAAoB,EAC/B,KAAK,EAAE;oBACL,CAAC,uBAAuB,CAAC,EAAE,IAAI;oBAC/B,CAAC,GAAG,cAAc,EAAE,CAAC,EAAE,cAAc;iBACtC;gBAEA,cAAc,KAAK,SAAS,CAAC,CAAC,CAAC,CAC9B,YAAM,KAAK,EAAC,WAAW;;oBACmB,GAAG,CACtC,CACR,CAAC,CAAC,CAAC,IAAI;gBACR,qBAAe,OAAO,EAAC,mBAAmB,IACvC,cAAc,KAAK,SAAS;oBAC3B,CAAC,CAAC,kBAAkB,CAAC,cAAc,CAAC;oBACpC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;iBACrB,OAAO;iBACP,kBAAkB,CAAC,cAAc,CAAC;iBAClC,mBAAmB,EAAE,CACZ,CACT,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from \"@stencil/core\";\nimport { IcProtectiveMarkings } from \"./ic-classification-banner.types\";\n\nconst classificationText = {\n  default: \"protective marking not set\",\n  official: \"official\",\n  \"official-sensitive\": \"official sensitive\",\n  secret: \"secret\",\n  \"top-secret\": \"top secret\",\n};\n\n@Component({\n  tag: \"ic-classification-banner\",\n  styleUrl: \"ic-classification-banner.css\",\n  shadow: true,\n})\nexport class ClassificationBanner {\n  /**\n   * The additional information that will be displayed after the classification.\n   */\n  @Prop() additionalSelectors?: string = \"\";\n  /**\n   * The classification level to be displayed - also determines the banner and text colour.\n   */\n  @Prop() classification?: IcProtectiveMarkings = \"default\";\n  /**\n   * The optional text that will be displayed before classification to specify relevant country/countries.\n   */\n  @Prop() country?: string = \"uk\";\n  /**\n   * If `true`, the banner will appear inline with the page, instead of sticking to the bottom of the page.\n   */\n  @Prop() inline?: boolean = false;\n  /**\n   * If `true`, \"Up to\" will be displayed before the classification and country.\n   */\n  @Prop() upTo?: boolean = false;\n\n  render() {\n    const { inline, upTo } = this;\n\n    // In case of unrecognized props, fallback to default\n    let { country, additionalSelectors, classification } = this;\n    if (!country) country = \"\";\n    if (!additionalSelectors) additionalSelectors = \"\";\n    if (\n      !classification ||\n      (classification && !classificationText[classification])\n    )\n      classification = \"default\";\n\n    return (\n      <Host class={{ [\"inline\"]: inline }}>\n        <banner\n          aria-label=\"Protective marking\"\n          class={{\n            [\"classification-banner\"]: true,\n            [`${classification}`]: classification,\n          }}\n        >\n          {classification !== \"default\" ? (\n            <span class=\"offscreen\">\n              The protective marking of this page is:{\" \"}\n            </span>\n          ) : null}\n          <ic-typography variant=\"caption-uppercase\">\n            {classification === \"default\"\n              ? classificationText[classification]\n              : `${upTo ? \"up to\" : \"\"} \n               ${country} \n               ${classificationText[classification]} \n               ${additionalSelectors}`}\n          </ic-typography>\n        </banner>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-classification-banner.js","sourceRoot":"","sources":["../../../src/components/ic-classification-banner/ic-classification-banner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGzD,MAAM,kBAAkB,GAAG;IACzB,OAAO,EAAE,4BAA4B;IACrC,QAAQ,EAAE,UAAU;IACpB,oBAAoB,EAAE,oBAAoB;IAC1C,MAAM,EAAE,QAAQ;IAChB,YAAY,EAAE,YAAY;CAC3B,CAAC;AAOF,MAAM,OAAO,oBAAoB;;mCAIQ,EAAE;8BAIO,SAAS;uBAI9B,IAAI;sBAIJ,KAAK;oBAIP,KAAK;;IAE9B,MAAM;QACJ,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QAE9B,qDAAqD;QACrD,IAAI,EAAE,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;QAC5D,IAAI,CAAC,OAAO;YAAE,OAAO,GAAG,EAAE,CAAC;QAC3B,IAAI,CAAC,mBAAmB;YAAE,mBAAmB,GAAG,EAAE,CAAC;QACnD,IACE,CAAC,cAAc;YACf,CAAC,cAAc,IAAI,CAAC,kBAAkB,CAAC,cAAc,CAAC,CAAC;YAEvD,cAAc,GAAG,SAAS,CAAC;QAE7B,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,CAAC,iCAAiC,CAAC,EAAE,MAAM,EAAE;YAC1D,4BACa,oBAAoB,EAC/B,KAAK,EAAE;oBACL,CAAC,uBAAuB,CAAC,EAAE,IAAI;oBAC/B,CAAC,GAAG,cAAc,EAAE,CAAC,EAAE,cAAc;iBACtC;gBAEA,cAAc,KAAK,SAAS,CAAC,CAAC,CAAC,CAC9B,YAAM,KAAK,EAAC,WAAW;;oBACmB,GAAG,CACtC,CACR,CAAC,CAAC,CAAC,IAAI;gBACR,qBAAe,OAAO,EAAC,mBAAmB,IACvC,cAAc,KAAK,SAAS;oBAC3B,CAAC,CAAC,kBAAkB,CAAC,cAAc,CAAC;oBACpC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;iBACrB,OAAO;iBACP,kBAAkB,CAAC,cAAc,CAAC;iBAClC,mBAAmB,EAAE,CACZ,CACT,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from \"@stencil/core\";\nimport { IcProtectiveMarkings } from \"./ic-classification-banner.types\";\n\nconst classificationText = {\n  default: \"protective marking not set\",\n  official: \"official\",\n  \"official-sensitive\": \"official sensitive\",\n  secret: \"secret\",\n  \"top-secret\": \"top secret\",\n};\n\n@Component({\n  tag: \"ic-classification-banner\",\n  styleUrl: \"ic-classification-banner.css\",\n  shadow: true,\n})\nexport class ClassificationBanner {\n  /**\n   * The additional information that will be displayed after the classification.\n   */\n  @Prop() additionalSelectors?: string = \"\";\n  /**\n   * The classification level to be displayed - also determines the banner and text colour.\n   */\n  @Prop() classification?: IcProtectiveMarkings = \"default\";\n  /**\n   * The optional text that will be displayed before classification to specify relevant country/countries.\n   */\n  @Prop() country?: string = \"uk\";\n  /**\n   * If `true`, the banner will appear inline with the page, instead of sticking to the bottom of the page.\n   */\n  @Prop() inline?: boolean = false;\n  /**\n   * If `true`, \"Up to\" will be displayed before the classification and country.\n   */\n  @Prop() upTo?: boolean = false;\n\n  render() {\n    const { inline, upTo } = this;\n\n    // In case of unrecognized props, fallback to default\n    let { country, additionalSelectors, classification } = this;\n    if (!country) country = \"\";\n    if (!additionalSelectors) additionalSelectors = \"\";\n    if (\n      !classification ||\n      (classification && !classificationText[classification])\n    )\n      classification = \"default\";\n\n    return (\n      <Host class={{ [\"ic-classification-banner-inline\"]: inline }}>\n        <banner\n          aria-label=\"Protective marking\"\n          class={{\n            [\"classification-banner\"]: true,\n            [`${classification}`]: classification,\n          }}\n        >\n          {classification !== \"default\" ? (\n            <span class=\"offscreen\">\n              The protective marking of this page is:{\" \"}\n            </span>\n          ) : null}\n          <ic-typography variant=\"caption-uppercase\">\n            {classification === \"default\"\n              ? classificationText[classification]\n              : `${upTo ? \"up to\" : \"\"} \n               ${country} \n               ${classificationText[classification]} \n               ${additionalSelectors}`}\n          </ic-typography>\n        </banner>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/{ic-data-entity/ic-data-entity.css → ic-data-list/ic-data-list.css}

@@ -445,13 +445,17 @@ video {
   display: block;
 }
 
+.heading {
+  --ic-typography-color: var(--ic-data-list-text-heading);
+}
+
 .rows {
   display: flex;
   flex-direction: column;
   gap: var(--ic-space-md);
 }
 
-:host(.small) .rows {
+:host(.ic-data-list-small) .rows {
   gap: var(--ic-space-xs);
 }
 
@@ -459,10 +463,10 @@ video {
   margin-top: var(--ic-space-lg);
   margin-bottom: var(--ic-space-md);
   height: var(--ic-border-width);
-  background-color: var(--ic-architectural-300);
+  background-color: var(--ic-data-list-keyline-heading);
 }
 
-:host(.small) .divider {
+:host(.ic-data-list-small) .divider {
   margin-top: var(--ic-space-sm);
   margin-bottom: var(--ic-space-xs);
 }

package/dist/collection/components/{ic-data-entity/ic-data-entity.js → ic-data-list/ic-data-list.js}

@@ -1,30 +1,33 @@
 import { Host, h } from "@stencil/core";
 /**
- * @slot heading - Content will be placed at the top of the data entity.
+ * @slot heading - Content will be placed at the top of the data list.
  */
-export class DataEntity {
+export class DataList {
     constructor() {
         this.heading = undefined;
-        this.size = "default";
-        this.small = false;
+        this.size = "medium";
+        this.theme = "inherit";
     }
     render() {
-        const { el, heading, small, size } = this;
-        if (small || size === "small") {
+        const { el, heading, size, theme } = this;
+        if (size === "small") {
             Array.from(el.children).forEach((child) => child.setAttribute("size", "small"));
         }
-        return (h(Host, { class: { small: small || size === "small" } }, h("div", { class: "heading", id: "data-entity-heading" }, h("slot", { name: "heading" }, h("ic-typography", { variant: "h3" }, heading))), h("div", { class: "divider" }), h("ul", { "aria-labelledby": "data-entity-heading", class: "rows" }, h("slot", null))));
+        return (h(Host, { class: {
+                "ic-data-list-small": size === "small",
+                [`ic-theme-${theme}`]: theme !== "inherit",
+            } }, h("div", { class: "heading", id: "data-list-heading" }, h("slot", { name: "heading" }, h("ic-typography", { variant: "h3" }, heading))), h("div", { class: "divider" }), h("ul", { "aria-labelledby": "data-list-heading", class: "rows" }, h("slot", null))));
     }
-    static get is() { return "ic-data-entity"; }
+    static get is() { return "ic-data-list"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["ic-data-entity.css"]
+            "$": ["ic-data-list.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["ic-data-entity.css"]
+            "$": ["ic-data-list.css"]
         };
     }
     static get properties() {
@@ -41,7 +44,7 @@ export class DataEntity {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The title for the data entity."
+                    "text": "The title for the data list."
                 },
                 "attribute": "heading",
                 "reflect": false
@@ -51,7 +54,7 @@ export class DataEntity {
                 "mutable": false,
                 "complexType": {
                     "original": "IcSizesNoLarge",
-                    "resolved": "\"default\" | \"small\"",
+                    "resolved": "\"medium\" | \"small\"",
                     "references": {
                         "IcSizesNoLarge": {
                             "location": "import",
@@ -64,35 +67,38 @@ export class DataEntity {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The size of the data entity component."
+                    "text": "The size of the data list component."
                 },
                 "attribute": "size",
                 "reflect": false,
-                "defaultValue": "\"default\""
+                "defaultValue": "\"medium\""
             },
-            "small": {
-                "type": "boolean",
+            "theme": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
+                    "original": "IcThemeMode",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "references": {
+                        "IcThemeMode": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeMode"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "This prop should not be used anymore. Set prop `size` to \"small\" instead."
-                        }],
-                    "text": ""
+                    "tags": [],
+                    "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
                 },
-                "attribute": "small",
+                "attribute": "theme",
                 "reflect": false,
-                "defaultValue": "false"
+                "defaultValue": "\"inherit\""
             }
         };
     }
     static get elementRef() { return "el"; }
 }
-//# sourceMappingURL=ic-data-entity.js.map
+//# sourceMappingURL=ic-data-list.js.map

package/dist/collection/components/ic-data-list/ic-data-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-data-list.js","sourceRoot":"","sources":["../../../src/components/ic-data-list/ic-data-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGlE;;GAEG;AAMH,MAAM,OAAO,QAAQ;;;oBAWa,QAAQ;qBAKV,SAAS;;IAEvC,MAAM;QACJ,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAE1C,IAAI,IAAI,KAAK,OAAO,EAAE,CAAC;YACrB,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,CACxC,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CACpC,CAAC;QACJ,CAAC;QAED,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,oBAAoB,EAAE,IAAI,KAAK,OAAO;gBACtC,CAAC,YAAY,KAAK,EAAE,CAAC,EAAE,KAAK,KAAK,SAAS;aAC3C;YAED,WAAK,KAAK,EAAC,SAAS,EAAC,EAAE,EAAC,mBAAmB;gBACzC,YAAM,IAAI,EAAC,SAAS;oBAClB,qBAAe,OAAO,EAAC,IAAI,IAAE,OAAO,CAAiB,CAChD,CACH;YACN,WAAK,KAAK,EAAC,SAAS,GAAG;YACvB,6BAAoB,mBAAmB,EAAC,KAAK,EAAC,MAAM;gBAClD,eAAa,CACV,CACA,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, h, Prop } from \"@stencil/core\";\nimport { IcSizesNoLarge, IcThemeMode } from \"../../utils/types\";\n\n/**\n * @slot heading - Content will be placed at the top of the data list.\n */\n@Component({\n  tag: \"ic-data-list\",\n  styleUrl: \"ic-data-list.css\",\n  shadow: true,\n})\nexport class DataList {\n  @Element() el: HTMLIcDataListElement;\n\n  /**\n   * The title for the data list.\n   */\n  @Prop() heading: string;\n\n  /**\n   * The size of the data list component.\n   */\n  @Prop() size?: IcSizesNoLarge = \"medium\";\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  render() {\n    const { el, heading, size, theme } = this;\n\n    if (size === \"small\") {\n      Array.from(el.children).forEach((child) =>\n        child.setAttribute(\"size\", \"small\")\n      );\n    }\n\n    return (\n      <Host\n        class={{\n          \"ic-data-list-small\": size === \"small\",\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n      >\n        <div class=\"heading\" id=\"data-list-heading\">\n          <slot name=\"heading\">\n            <ic-typography variant=\"h3\">{heading}</ic-typography>\n          </slot>\n        </div>\n        <div class=\"divider\" />\n        <ul aria-labelledby=\"data-list-heading\" class=\"rows\">\n          <slot></slot>\n        </ul>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/{ic-data-entity/test/basic/ic-data-entity.spec.js → ic-data-list/test/basic/ic-data-list.spec.js}

@@ -1,11 +1,11 @@
 import { newSpecPage } from "@stencil/core/testing";
-import { DataEntity } from "../../ic-data-entity";
-describe("ic-data-entity", () => {
+import { DataList } from "../../ic-data-list";
+describe("ic-data-list", () => {
     it("should render with data-row children", async () => {
         const page = await newSpecPage({
-            components: [DataEntity],
+            components: [DataList],
             html: `
-      <ic-data-entity heading="Heading">
+      <ic-data-list heading="Heading">
         <ic-data-row label="Label" value="value"></ic-data-row>
         <ic-data-row label="Label" value="value"></ic-data-row>
         <ic-data-row label="Label" value="value"></ic-data-row>
@@ -14,12 +14,12 @@ describe("ic-data-entity", () => {
         <ic-data-row label="Label" value="value"></ic-data-row>
         <ic-data-row label="Label" value="value"></ic-data-row>
         <ic-data-row label="Label" value="value"></ic-data-row>
-      </ic-data-entity>`,
+      </ic-data-list>`,
         });
         expect(page.root).toEqualHtml(`
-    <ic-data-entity heading="Heading">
+    <ic-data-list heading="Heading">
       <mock:shadow-root>
-        <div class="heading" id="data-entity-heading">
+        <div class="heading" id="data-list-heading">
           <slot name="heading">  
             <ic-typography variant="h3">
               Heading
@@ -27,7 +27,7 @@ describe("ic-data-entity", () => {
           </slot>
         </div>
         <div class="divider"></div>
-        <ul aria-labelledby="data-entity-heading" class="rows">
+        <ul aria-labelledby="data-list-heading" class="rows">
           <slot></slot>
         </ul>
       </mock:shadow-root>
@@ -39,23 +39,23 @@ describe("ic-data-entity", () => {
      <ic-data-row label="Label" value="value"></ic-data-row>
      <ic-data-row label="Label" value="value"></ic-data-row>
      <ic-data-row label="Label" value="value"></ic-data-row>
-    </ic-data-entity>
+    </ic-data-list>
     `);
     });
-    it("should render with small prop", async () => {
+    it("should render with size small", async () => {
         const page = await newSpecPage({
-            components: [DataEntity],
+            components: [DataList],
             html: `
-      <ic-data-entity heading="Heading" small>
+      <ic-data-list heading="Heading" size="small">
         <ic-data-row label="Label" value="value"></ic-data-row>
         <ic-data-row label="Label" value="value"></ic-data-row>
         <ic-data-row label="Label" value="value"></ic-data-row>
-      </ic-data-entity>`,
+      </ic-data-list>`,
         });
         expect(page.root).toEqualHtml(`
-    <ic-data-entity heading="Heading" class="small" small>
+    <ic-data-list heading="Heading" class="ic-data-list-small" size="small">
       <mock:shadow-root>
-        <div class="heading" id="data-entity-heading">
+        <div class="heading" id="data-list-heading">
           <slot name="heading">  
             <ic-typography variant="h3">
               Heading
@@ -63,21 +63,21 @@ describe("ic-data-entity", () => {
           </slot>
         </div>
         <div class="divider"></div>
-        <ul aria-labelledby="data-entity-heading" class="rows">
+        <ul aria-labelledby="data-list-heading" class="rows">
           <slot></slot>
         </ul>
       </mock:shadow-root>
      <ic-data-row size="small" label="Label" value="value"></ic-data-row>
      <ic-data-row size="small" label="Label" value="value"></ic-data-row>
      <ic-data-row size="small" label="Label" value="value"></ic-data-row>
-    </ic-data-entity>
+    </ic-data-list>
     `);
     });
     it("should render with a slotted heading", async () => {
         const page = await newSpecPage({
-            components: [DataEntity],
+            components: [DataList],
             html: `
-      <ic-data-entity>
+      <ic-data-list>
         <ic-typography variant="h3" slot="heading">Heading</ic-typography>
         <ic-data-row label="Label" value="value"></ic-data-row>
         <ic-data-row label="Label" value="value"></ic-data-row>
@@ -87,18 +87,18 @@ describe("ic-data-entity", () => {
         <ic-data-row label="Label" value="value"></ic-data-row>
         <ic-data-row label="Label" value="value"></ic-data-row>
         <ic-data-row label="Label" value="value"></ic-data-row>
-      </ic-data-entity>`,
+      </ic-data-list>`,
         });
         expect(page.root).toEqualHtml(`
-    <ic-data-entity>
+    <ic-data-list>
       <mock:shadow-root>
-        <div class="heading" id="data-entity-heading">
+        <div class="heading" id="data-list-heading">
           <slot name="heading">  
             <ic-typography variant="h3"></ic-typography>
           </slot>
         </div>
         <div class="divider"></div>
-        <ul aria-labelledby="data-entity-heading" class="rows">
+        <ul aria-labelledby="data-list-heading" class="rows">
           <slot></slot>
         </ul>
       </mock:shadow-root>
@@ -113,14 +113,14 @@ describe("ic-data-entity", () => {
      <ic-data-row label="Label" value="value"></ic-data-row>
      <ic-data-row label="Label" value="value"></ic-data-row>
      <ic-data-row label="Label" value="value"></ic-data-row>
-    </ic-data-entity>
+    </ic-data-list>
     `);
     });
     it("should render data-row children with slotted content", async () => {
         const page = await newSpecPage({
-            components: [DataEntity],
+            components: [DataList],
             html: `
-      <ic-data-entity heading="Heading">
+      <ic-data-list heading="Heading">
         <ic-data-row label="Label" value="value"><ic-link href="/" slot="end-component"></ic-link></ic-data-row>
         <ic-data-row label="Label" value="value"><ic-link href="/" slot="end-component"></ic-link></ic-data-row>
         <ic-data-row label="Label" value="value"><ic-link href="/" slot="end-component"></ic-link></ic-data-row>
@@ -129,12 +129,12 @@ describe("ic-data-entity", () => {
         <ic-data-row label="Label" value="value"><ic-link href="/" slot="end-component"></ic-link></ic-data-row>
         <ic-data-row label="Label" value="value"><ic-link href="/" slot="end-component"></ic-link></ic-data-row>
         <ic-data-row label="Label" value="value"><ic-link href="/" slot="end-component"></ic-link></ic-data-row>
-      </ic-data-entity>`,
+      </ic-data-list>`,
         });
         expect(page.root).toEqualHtml(`
-    <ic-data-entity heading="Heading">
+    <ic-data-list heading="Heading">
       <mock:shadow-root>
-        <div class="heading" id="data-entity-heading">
+        <div class="heading" id="data-list-heading">
           <slot name="heading">  
             <ic-typography variant="h3">
               Heading
@@ -142,7 +142,7 @@ describe("ic-data-entity", () => {
           </slot>
         </div>
         <div class="divider"></div>
-        <ul aria-labelledby="data-entity-heading" class="rows">
+        <ul aria-labelledby="data-list-heading" class="rows">
           <slot></slot>
         </ul>
       </mock:shadow-root>
@@ -154,8 +154,8 @@ describe("ic-data-entity", () => {
      <ic-data-row label="Label" value="value"><ic-link href="/" slot="end-component"></ic-link></ic-data-row>
      <ic-data-row label="Label" value="value"><ic-link href="/" slot="end-component"></ic-link></ic-data-row>
      <ic-data-row label="Label" value="value"><ic-link href="/" slot="end-component"></ic-link></ic-data-row>
-    </ic-data-entity>
+    </ic-data-list>
     `);
     });
 });
-//# sourceMappingURL=ic-data-entity.spec.js.map
+//# sourceMappingURL=ic-data-list.spec.js.map

package/dist/collection/components/ic-data-list/test/basic/ic-data-list.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-data-list.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-data-list/test/basic/ic-data-list.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;IAC5B,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;QACpD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE;;;;;;;;;;sBAUU;SACjB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;KAwB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+BAA+B,EAAE,KAAK,IAAI,EAAE;QAC7C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE;;;;;sBAKU;SACjB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;KAmB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;QACpD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE;;;;;;;;;;;sBAWU;SACjB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;KAyB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sDAAsD,EAAE,KAAK,IAAI,EAAE;QACpE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE;;;;;;;;;;sBAUU;SACjB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;KAwB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { DataList } from \"../../ic-data-list\";\n\ndescribe(\"ic-data-list\", () => {\n  it(\"should render with data-row children\", async () => {\n    const page = await newSpecPage({\n      components: [DataList],\n      html: `\n      <ic-data-list heading=\"Heading\">\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n      </ic-data-list>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-data-list heading=\"Heading\">\n      <mock:shadow-root>\n        <div class=\"heading\" id=\"data-list-heading\">\n          <slot name=\"heading\">  \n            <ic-typography variant=\"h3\">\n              Heading\n            </ic-typography>\n          </slot>\n        </div>\n        <div class=\"divider\"></div>\n        <ul aria-labelledby=\"data-list-heading\" class=\"rows\">\n          <slot></slot>\n        </ul>\n      </mock:shadow-root>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n    </ic-data-list>\n    `);\n  });\n\n  it(\"should render with size small\", async () => {\n    const page = await newSpecPage({\n      components: [DataList],\n      html: `\n      <ic-data-list heading=\"Heading\" size=\"small\">\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n      </ic-data-list>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-data-list heading=\"Heading\" class=\"ic-data-list-small\" size=\"small\">\n      <mock:shadow-root>\n        <div class=\"heading\" id=\"data-list-heading\">\n          <slot name=\"heading\">  \n            <ic-typography variant=\"h3\">\n              Heading\n            </ic-typography>\n          </slot>\n        </div>\n        <div class=\"divider\"></div>\n        <ul aria-labelledby=\"data-list-heading\" class=\"rows\">\n          <slot></slot>\n        </ul>\n      </mock:shadow-root>\n     <ic-data-row size=\"small\" label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row size=\"small\" label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row size=\"small\" label=\"Label\" value=\"value\"></ic-data-row>\n    </ic-data-list>\n    `);\n  });\n\n  it(\"should render with a slotted heading\", async () => {\n    const page = await newSpecPage({\n      components: [DataList],\n      html: `\n      <ic-data-list>\n        <ic-typography variant=\"h3\" slot=\"heading\">Heading</ic-typography>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n      </ic-data-list>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-data-list>\n      <mock:shadow-root>\n        <div class=\"heading\" id=\"data-list-heading\">\n          <slot name=\"heading\">  \n            <ic-typography variant=\"h3\"></ic-typography>\n          </slot>\n        </div>\n        <div class=\"divider\"></div>\n        <ul aria-labelledby=\"data-list-heading\" class=\"rows\">\n          <slot></slot>\n        </ul>\n      </mock:shadow-root>\n     <ic-typography slot=\"heading\" variant=\"h3\">\n      Heading\n     </ic-typography>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n    </ic-data-list>\n    `);\n  });\n\n  it(\"should render data-row children with slotted content\", async () => {\n    const page = await newSpecPage({\n      components: [DataList],\n      html: `\n      <ic-data-list heading=\"Heading\">\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n      </ic-data-list>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-data-list heading=\"Heading\">\n      <mock:shadow-root>\n        <div class=\"heading\" id=\"data-list-heading\">\n          <slot name=\"heading\">  \n            <ic-typography variant=\"h3\">\n              Heading\n            </ic-typography>\n          </slot>\n        </div>\n        <div class=\"divider\"></div>\n        <ul aria-labelledby=\"data-list-heading\" class=\"rows\">\n          <slot></slot>\n        </ul>\n      </mock:shadow-root>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n    </ic-data-list>\n    `);\n  });\n});\n"]}

package/dist/collection/components/ic-data-row/ic-data-row.css

@@ -455,13 +455,16 @@ video {
   display: flex;
   flex-grow: 1;
   min-width: 0;
+
+  --ic-typography-color: var(--ic-data-list-text-cell);
 }
 
 .label {
   width: 12.5rem;
   min-width: 12.5rem;
   margin-right: var(--ic-space-md);
-  color: var(--ic-color-tertiary-text);
+
+  --ic-typography-color: var(--ic-data-list-text-label);
 }
 
 .value {
@@ -489,10 +492,10 @@ slot[name="value"]::slotted(ic-text-field[readonly][hide-label][rows]) {
 .divider {
   margin-top: var(--ic-space-md);
   height: var(--ic-border-width);
-  background-color: var(--ic-architectural-300);
+  background-color: var(--ic-data-list-keyline-cell);
 }
 
-:host(.small) .divider {
+:host(.ic-data-row-small) .divider {
   margin-top: var(--ic-space-xs);
 }