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

package/dist/collection/components/ic-input-label/test/basic/ic-input-label.spec.js

@@ -6,86 +6,57 @@ describe("ic-input-label", () => {
             components: [InputLabel],
             html: `<ic-input-label for="test-input-id" label="Test label"></ic-input-label>`,
         });
-        expect(page.root).toEqualHtml(`
-    <ic-input-label for="test-input-id" label="Test label">
-      <ic-typography variant="label">
-        <label htmlfor="test-input-id">
-          Test label
-        </label>
-      </ic-typography>
-    </ic-input-label>
-    `);
+        expect(page.root).toMatchSnapshot();
     });
     it("should render required variant", async () => {
         const page = await newSpecPage({
             components: [InputLabel],
             html: `<ic-input-label for="test-input-id" label="Test label" required=true></ic-input-label>`,
         });
-        expect(page.root).toEqualHtml(`
-    <ic-input-label for="test-input-id" label="Test label" required="true">
-      <ic-typography variant="label">
-        <label htmlfor="test-input-id">
-          Test label *
-        </label>
-      </ic-typography>
-    </ic-input-label>
-    `);
+        expect(page.root).toMatchSnapshot();
     });
     it("should render disabled variant", async () => {
         const page = await newSpecPage({
             components: [InputLabel],
             html: `<ic-input-label for="test-input-id" label="Test label" required=true disabled=true></ic-input-label>`,
         });
-        expect(page.root).toEqualHtml(`
-    <ic-input-label class="ic-input-label-disabled" disabled="true" for="test-input-id" label="Test label" required="true">
-      <ic-typography variant="label">
-        <label htmlfor="test-input-id">
-          Test label *
-        </label>
-      </ic-typography>
-    </ic-input-label>
-    `);
+        expect(page.root).toMatchSnapshot();
     });
     it("should render readonly variant", async () => {
         const page = await newSpecPage({
             components: [InputLabel],
             html: `<ic-input-label for="test-input-id" label="Test label" required=true readonly=true></ic-input-label>`,
         });
-        expect(page.root).toEqualHtml(`
-    <ic-input-label class="ic-input-label-readonly" for="test-input-id" label="Test label" readonly="true" required="true">
-      <ic-typography class="readonly-label" variant="label">
-        Test label *
-      </ic-typography>
-    </ic-input-label>
-    `);
+        expect(page.root).toMatchSnapshot();
     });
     it("should render error variant", async () => {
         const page = await newSpecPage({
             components: [InputLabel],
             html: `<ic-input-label for="test-input-id" label="Test label" status="error"></ic-input-label>`,
         });
-        expect(page.root).toEqualHtml(`
-    <ic-input-label status="error" for="test-input-id" label="Test label">
-      <ic-typography class="error-label" variant="label">
-        <label htmlfor="test-input-id">
-          Test label
-        </label>
-      </ic-typography>
-    </ic-input-label>
-    `);
+        expect(page.root).toMatchSnapshot();
     });
     it("should render with helpertext", async () => {
         const page = await newSpecPage({
             components: [InputLabel],
             html: `<ic-input-label for="test-input-id" label="Test label" required=true helper-text="Some helper text"></ic-input-label>`,
         });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render with label text not wrapped in label tag", async () => {
+        const page = await newSpecPage({
+            components: [InputLabel],
+            html: `<ic-input-label label="Test label" required=true helper-text="Some helper text" use-label-tag=false></ic-input-label>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should remove label but keep helpertext", async () => {
+        const page = await newSpecPage({
+            components: [InputLabel],
+            html: `<ic-input-label for="test-input-id" label="Test label" hide-label='true' helper-text="Some helper text"></ic-input-label>`,
+        });
         expect(page.root).toEqualHtml(`
-    <ic-input-label class="with-helper" for="test-input-id" helper-text="Some helper text" label="Test label" required="true">
-      <ic-typography variant="label">
-        <label htmlfor="test-input-id">
-          Test label *
-        </label>
-      </ic-typography>
+    <ic-input-label class="with-helper" for="test-input-id" helper-text="Some helper text" hide-label="true" label="Test label">
       <ic-typography class="helpertext helpertext-normal" variant="caption">
         <span id="test-input-id-helper-text">
           Some helper text
@@ -94,5 +65,20 @@ describe("ic-input-label", () => {
     </ic-input-label>
     `);
     });
+    it("should remove helpertext but keep label", async () => {
+        const page = await newSpecPage({
+            components: [InputLabel],
+            html: `<ic-input-label for="test-input-id" label="Test label" helper-text=""></ic-input-label>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <ic-input-label for="test-input-id" helper-text="" label="Test label">
+        <ic-typography variant="label">
+          <label htmlfor="test-input-id">
+            Test label
+          </label>
+        </ic-typography>
+      </ic-input-label>
+    `);
+    });
 });
 //# sourceMappingURL=ic-input-label.spec.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ic-input-label.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-input-label/test/basic/ic-input-label.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC9B,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;QAC7B,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,0EAA0E;SACjF,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;QAC9C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,wFAAwF;SAC/F,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;QAC9C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,sGAAsG;SAC7G,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;QAC9C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,sGAAsG;SAC7G,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;QAC3C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,yFAAyF;SAChG,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,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,UAAU,CAAC;YACxB,IAAI,EAAE,uHAAuH;SAC9H,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;KAa7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { InputLabel } from \"../../ic-input-label\";\nimport { newSpecPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-input-label\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [InputLabel],\n      html: `<ic-input-label for=\"test-input-id\" label=\"Test label\"></ic-input-label>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-label for=\"test-input-id\" label=\"Test label\">\n      <ic-typography variant=\"label\">\n        <label htmlfor=\"test-input-id\">\n          Test label\n        </label>\n      </ic-typography>\n    </ic-input-label>\n    `);\n  });\n\n  it(\"should render required variant\", async () => {\n    const page = await newSpecPage({\n      components: [InputLabel],\n      html: `<ic-input-label for=\"test-input-id\" label=\"Test label\" required=true></ic-input-label>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-label for=\"test-input-id\" label=\"Test label\" required=\"true\">\n      <ic-typography variant=\"label\">\n        <label htmlfor=\"test-input-id\">\n          Test label *\n        </label>\n      </ic-typography>\n    </ic-input-label>\n    `);\n  });\n\n  it(\"should render disabled variant\", async () => {\n    const page = await newSpecPage({\n      components: [InputLabel],\n      html: `<ic-input-label for=\"test-input-id\" label=\"Test label\" required=true disabled=true></ic-input-label>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-label class=\"ic-input-label-disabled\" disabled=\"true\" for=\"test-input-id\" label=\"Test label\" required=\"true\">\n      <ic-typography variant=\"label\">\n        <label htmlfor=\"test-input-id\">\n          Test label *\n        </label>\n      </ic-typography>\n    </ic-input-label>\n    `);\n  });\n\n  it(\"should render readonly variant\", async () => {\n    const page = await newSpecPage({\n      components: [InputLabel],\n      html: `<ic-input-label for=\"test-input-id\" label=\"Test label\" required=true readonly=true></ic-input-label>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-label class=\"ic-input-label-readonly\" for=\"test-input-id\" label=\"Test label\" readonly=\"true\" required=\"true\">\n      <ic-typography class=\"readonly-label\" variant=\"label\">\n        Test label *\n      </ic-typography>\n    </ic-input-label>\n    `);\n  });\n\n  it(\"should render error variant\", async () => {\n    const page = await newSpecPage({\n      components: [InputLabel],\n      html: `<ic-input-label for=\"test-input-id\" label=\"Test label\" status=\"error\"></ic-input-label>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-label status=\"error\" for=\"test-input-id\" label=\"Test label\">\n      <ic-typography class=\"error-label\" variant=\"label\">\n        <label htmlfor=\"test-input-id\">\n          Test label\n        </label>\n      </ic-typography>\n    </ic-input-label>\n    `);\n  });\n\n  it(\"should render with helpertext\", async () => {\n    const page = await newSpecPage({\n      components: [InputLabel],\n      html: `<ic-input-label for=\"test-input-id\" label=\"Test label\" required=true helper-text=\"Some helper text\"></ic-input-label>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-label class=\"with-helper\" for=\"test-input-id\" helper-text=\"Some helper text\" label=\"Test label\" required=\"true\">\n      <ic-typography variant=\"label\">\n        <label htmlfor=\"test-input-id\">\n          Test label *\n        </label>\n      </ic-typography>\n      <ic-typography class=\"helpertext helpertext-normal\" variant=\"caption\">\n        <span id=\"test-input-id-helper-text\">\n          Some helper text\n        </span>\n      </ic-typography>\n    </ic-input-label>\n    `);\n  });\n});\n"]}
+{"version":3,"file":"ic-input-label.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-input-label/test/basic/ic-input-label.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC9B,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;QAC7B,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,0EAA0E;SACjF,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;QAC9C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,wFAAwF;SAC/F,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;QAC9C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,sGAAsG;SAC7G,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;QAC9C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,sGAAsG;SAC7G,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;QAC3C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,yFAAyF;SAChG,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+BAA+B,EAAE,KAAK,IAAI,EAAE;QAC7C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,uHAAuH;SAC9H,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wDAAwD,EAAE,KAAK,IAAI,EAAE;QACtE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,uHAAuH;SAC9H,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yCAAyC,EAAE,KAAK,IAAI,EAAE;QACvD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,2HAA2H;SAClI,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yCAAyC,EAAE,KAAK,IAAI,EAAE;QACvD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,yFAAyF;SAChG,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { InputLabel } from \"../../ic-input-label\";\nimport { newSpecPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-input-label\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [InputLabel],\n      html: `<ic-input-label for=\"test-input-id\" label=\"Test label\"></ic-input-label>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render required variant\", async () => {\n    const page = await newSpecPage({\n      components: [InputLabel],\n      html: `<ic-input-label for=\"test-input-id\" label=\"Test label\" required=true></ic-input-label>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render disabled variant\", async () => {\n    const page = await newSpecPage({\n      components: [InputLabel],\n      html: `<ic-input-label for=\"test-input-id\" label=\"Test label\" required=true disabled=true></ic-input-label>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render readonly variant\", async () => {\n    const page = await newSpecPage({\n      components: [InputLabel],\n      html: `<ic-input-label for=\"test-input-id\" label=\"Test label\" required=true readonly=true></ic-input-label>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render error variant\", async () => {\n    const page = await newSpecPage({\n      components: [InputLabel],\n      html: `<ic-input-label for=\"test-input-id\" label=\"Test label\" status=\"error\"></ic-input-label>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with helpertext\", async () => {\n    const page = await newSpecPage({\n      components: [InputLabel],\n      html: `<ic-input-label for=\"test-input-id\" label=\"Test label\" required=true helper-text=\"Some helper text\"></ic-input-label>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with label text not wrapped in label tag\", async () => {\n    const page = await newSpecPage({\n      components: [InputLabel],\n      html: `<ic-input-label label=\"Test label\" required=true helper-text=\"Some helper text\" use-label-tag=false></ic-input-label>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should remove label but keep helpertext\", async () => {\n    const page = await newSpecPage({\n      components: [InputLabel],\n      html: `<ic-input-label for=\"test-input-id\" label=\"Test label\" hide-label='true' helper-text=\"Some helper text\"></ic-input-label>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-label class=\"with-helper\" for=\"test-input-id\" helper-text=\"Some helper text\" hide-label=\"true\" label=\"Test label\">\n      <ic-typography class=\"helpertext helpertext-normal\" variant=\"caption\">\n        <span id=\"test-input-id-helper-text\">\n          Some helper text\n        </span>\n      </ic-typography>\n    </ic-input-label>\n    `);\n  });\n\n  it(\"should remove helpertext but keep label\", async () => {\n    const page = await newSpecPage({\n      components: [InputLabel],\n      html: `<ic-input-label for=\"test-input-id\" label=\"Test label\" helper-text=\"\"></ic-input-label>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-input-label for=\"test-input-id\" helper-text=\"\" label=\"Test label\">\n        <ic-typography variant=\"label\">\n          <label htmlfor=\"test-input-id\">\n            Test label\n          </label>\n        </ic-typography>\n      </ic-input-label>\n    `);\n  });\n});\n"]}

package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.css

@@ -603,6 +603,7 @@ video {
 }
 
 :host(.inner-label) .ic-loading-circular-inner {
+  height: 100%;
   display: grid;
 }
 

package/dist/collection/components/ic-menu/ic-menu.css

@@ -452,9 +452,8 @@ video {
 }
 
 :host {
-  border-radius: var(--ic-border-radius);
   max-height: 0;
-  width: var(--input-width, 20rem);
+  width: var(--menu-width, var(--input-width, 20rem));
   color: var(--ic-color-text-primary);
 
   --ic-typography-color: var(--ic-color-text-primary);
@@ -464,10 +463,16 @@ video {
   z-index: var(--ic-z-index-menu);
   box-sizing: border-box;
   box-shadow: var(--ic-elevation-overlay);
+  border-radius: var(--ic-border-radius);
 }
 
-:host(:not(.ic-menu-no-focus):focus-within) {
+:host(.ic-menu-open:not(.ic-menu-no-focus):focus-within) {
   box-shadow: var(--ic-border-focus);
+  outline: var(--ic-hc-focus-outline);
+}
+
+:host(.ic-select-select-all-focused) {
+  box-shadow: var(--ic-elevation-overlay) !important;
 }
 
 #retry-button::part(button) {
@@ -485,14 +490,17 @@ video {
 .menu {
   text-decoration: none;
   list-style-type: none;
-  border: var(--ic-border-width) solid var(--ic-architectural-400);
-  border-radius: var(--ic-border-radius);
+  border-radius: 1px;
   background-color: var(--ic-architectural-white);
   visibility: hidden;
   max-height: 0;
   overflow-y: hidden;
 }
 
+.menu:has(+ .option-bar) {
+  border-radius: 0 0 1px 1px;
+}
+
 .menu-scroll {
   overflow-y: auto;
 }
@@ -503,7 +511,10 @@ video {
 
 :host(.ic-menu-open) {
   max-height: none;
-  display: block;
+  display: flex;
+  flex-direction: column-reverse;
+  border: var(--ic-border-width) solid var(--ic-architectural-400);
+  transition: box-shadow var(--ic-easing-transition-fast);
 }
 
 :host(.ic-menu-open) .menu {
@@ -511,6 +522,14 @@ video {
   max-height: calc(var(--ic-space-xl) * 10 + var(--ic-space-xxxs));
 }
 
+:host(.ic-menu-open) .option-bar {
+  visibility: visible;
+}
+
+:host(.ic-menu-open) .select-all-button {
+  display: block;
+}
+
 :host(.ic-menu-full-width) {
   width: 100%;
 }
@@ -520,7 +539,10 @@ video {
   cursor: pointer;
   display: flex;
   align-items: center;
-  overflow-wrap: anywhere;
+}
+
+.loading-option p {
+  margin-bottom: 0 !important;
 }
 
 .option:not(.loading-option) {
@@ -536,11 +558,11 @@ video {
 }
 
 .option:last-child {
-  border-radius: 0 0 var(--ic-space-1px) var(--ic-space-1px);
+  border-radius: 0 0 1px 1px;
 }
 
-.option:first-child {
-  border-radius: var(--ic-space-1px) var(--ic-space-1px) 0 0;
+:not(.menu:has(+ .option-bar)) .option:first-child {
+  border-radius: 1px 1px 0 0;
 }
 
 .option:not(.disabled-option):hover {
@@ -565,6 +587,11 @@ video {
   align-items: top;
 }
 
+.option .option-label ic-typography {
+  max-width: 100%;
+  word-wrap: break-word;
+}
+
 .option .option-element {
   margin-top: var(--ic-space-xxs);
 }
@@ -578,6 +605,11 @@ video {
 
 .option-text-container {
   pointer-events: none;
+  width: 100%;
+}
+
+.option-text-container.show-check-icon {
+  width: calc(var(--ic-space-lg) * 10 + var(--ic-space-xl));
 }
 
 .option.loading-option .option-text-container {
@@ -602,6 +634,7 @@ video {
 
 .check-icon {
   height: var(--ic-space-lg);
+  min-width: var(--ic-space-lg);
   width: var(--ic-space-lg);
   margin-left: var(--ic-space-xs);
   pointer-events: none;
@@ -652,6 +685,33 @@ video {
   background-color: transparent;
 }
 
+.option-bar {
+  padding: var(--ic-space-xxs) var(--ic-space-xs);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: var(--ic-architectural-40);
+  visibility: hidden;
+  border-bottom: var(--ic-border-width) solid var(--ic-architectural-400);
+  border-radius: 1px 1px 0 0;
+}
+
+.option-bar p {
+  margin-bottom: 0 !important;
+}
+
+:host(.ic-menu-large) .option-bar {
+  padding: var(--ic-space-xs);
+}
+
+.select-all-button {
+  display: none;
+}
+
+.select-all-button:focus {
+  z-index: calc(var(--ic-z-index-menu) + 1);
+}
+
 @media (forced-colors: active) {
   .focused-option:focus {
     outline: none;