@uh-design-system/component-library 1.5.2-rc.1 → 1.6.0-rc.0

package/dist/collection/components/01-base-components/ds-action-menu/stories/ds-action-menu.features.stories.js

@@ -0,0 +1,449 @@
+import { html, render } from "lit";
+import meta from "./ds-action-menu.stories";
+export default {
+    ...meta,
+    title: 'Base Components/ActionMenu/Features',
+};
+const fullContent = html `
+  <ds-action-list>
+    <ds-action-list-item ds-variant="action" ds-label="Add..." ds-icon="add"></ds-action-list-item>
+    <ds-action-list-item ds-variant="action" ds-label="Edit" ds-icon="edit"></ds-action-list-item>
+    <ds-action-list-item ds-variant="action" ds-label="Share" ds-icon="share"></ds-action-list-item>
+    <ds-action-list-item ds-variant="action" ds-label="Download" ds-icon="download"></ds-action-list-item>
+  </ds-action-list>
+  <ds-action-list-divider></ds-action-list-divider>
+  <ds-action-list>
+    <ds-action-list-item ds-variant="single-select" ds-label="Email" ds-icon="mail" ds-selected="true"></ds-action-list-item>
+    <ds-action-list-item ds-variant="single-select" ds-label="Phone" ds-icon="call"></ds-action-list-item>
+    <ds-action-list-item ds-variant="single-select" ds-label="Text message" ds-icon="chat"></ds-action-list-item>
+    <ds-action-list-item ds-variant="single-select" ds-label="Post" ds-icon="send"></ds-action-list-item>
+  </ds-action-list>
+  <ds-action-list-divider></ds-action-list-divider>
+  <ds-action-list>
+    <ds-action-list-item ds-variant="multi-select" ds-label="Student number" ds-selected="true"></ds-action-list-item>
+    <ds-action-list-item ds-variant="multi-select" ds-label="Study programme"></ds-action-list-item>
+    <ds-action-list-item ds-variant="multi-select" ds-label="Study track"></ds-action-list-item>
+    <ds-action-list-item ds-variant="multi-select" ds-label="Thesis advisor"></ds-action-list-item>
+  </ds-action-list>
+  <ds-action-list-divider></ds-action-list-divider>
+  <ds-action-list>
+    <ds-action-list-item ds-variant="action" ds-label="Archive" ds-icon="archive"></ds-action-list-item>
+    <ds-action-list-item ds-variant="action-danger" ds-label="Delete" ds-icon="delete"></ds-action-list-item>
+  </ds-action-list>
+`;
+export const ButtonTrigger = {
+    name: 'Button Trigger',
+    render: () => html `
+    <div>
+      <p style="font-size: 0.875rem; color: #555; margin-bottom: 0.5rem;">Button</p>
+      <ds-action-menu ds-button-text="Actions" ds-button-variant="secondary">${fullContent}</ds-action-menu>
+    </div>
+  `,
+};
+export const IconButtonTrigger = {
+    name: 'Icon Button Trigger',
+    render: () => html `
+    <div>
+      <p style="font-size: 0.875rem; color: #555; margin-bottom: 0.5rem;">Icon button</p>
+      <ds-action-menu ds-icon-only="true" ds-aria-label="Actions">${fullContent}</ds-action-menu>
+    </div>
+  `,
+};
+export const ButtonVariants = {
+    name: 'Button Variants',
+    render: () => html `
+    <div>
+      <p style="font-size: 0.875rem; color: #555; margin-bottom: 1rem;">User can also choose any button variant</p>
+      <div style="display: grid; grid-template-columns: auto auto; gap: 0.75rem; width: fit-content;">
+        <ds-action-menu ds-button-text="Actions" ds-button-variant="primary">
+          <ds-action-list>
+            <ds-action-list-item ds-variant="action" ds-label="Edit" ds-icon="edit"></ds-action-list-item>
+          </ds-action-list>
+        </ds-action-menu>
+        <ds-action-menu ds-icon-only="true" ds-aria-label="Actions" ds-button-variant="primary">
+          <ds-action-list>
+            <ds-action-list-item ds-variant="action" ds-label="Edit" ds-icon="edit"></ds-action-list-item>
+          </ds-action-list>
+        </ds-action-menu>
+
+        <ds-action-menu ds-button-text="Actions" ds-button-variant="secondary">
+          <ds-action-list>
+            <ds-action-list-item ds-variant="action" ds-label="Edit" ds-icon="edit"></ds-action-list-item>
+          </ds-action-list>
+        </ds-action-menu>
+        <ds-action-menu ds-icon-only="true" ds-aria-label="Actions" ds-button-variant="secondary">
+          <ds-action-list>
+            <ds-action-list-item ds-variant="action" ds-label="Edit" ds-icon="edit"></ds-action-list-item>
+          </ds-action-list>
+        </ds-action-menu>
+
+        <ds-action-menu ds-button-text="Actions" ds-button-variant="supplementary">
+          <ds-action-list>
+            <ds-action-list-item ds-variant="action" ds-label="Edit" ds-icon="edit"></ds-action-list-item>
+          </ds-action-list>
+        </ds-action-menu>
+        <ds-action-menu ds-icon-only="true" ds-aria-label="Actions" ds-button-variant="supplementary">
+          <ds-action-list>
+            <ds-action-list-item ds-variant="action" ds-label="Edit" ds-icon="edit"></ds-action-list-item>
+          </ds-action-list>
+        </ds-action-menu>
+      </div>
+    </div>
+  `,
+};
+export const AlignmentAndPlacement = {
+    name: 'Alignment And Placement',
+    render: () => html `
+    <div style="display: flex; flex-direction: column; gap: 2rem; padding: 1rem;">
+      <div>
+        <p style="font-size: 0.875rem; color: #555; margin-bottom: 0.75rem; font-weight: 600;">Placement: bottom</p>
+        <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; align-items: start;">
+          <div>
+            <p style="font-size: 0.75rem; color: #555; margin-bottom: 0.5rem;">Align start</p>
+            <ds-action-menu ds-button-text="Actions" ds-align="start" ds-placement="bottom">${fullContent}</ds-action-menu>
+          </div>
+          <div style="display: flex; flex-direction: column; align-items: center;">
+            <p style="font-size: 0.75rem; color: #555; margin-bottom: 0.5rem;">Align center</p>
+            <ds-action-menu ds-button-text="Actions" ds-align="center" ds-placement="bottom">${fullContent}</ds-action-menu>
+          </div>
+          <div style="display: flex; flex-direction: column; align-items: flex-end;">
+            <p style="font-size: 0.75rem; color: #555; margin-bottom: 0.5rem;">Align end</p>
+            <ds-action-menu ds-button-text="Actions" ds-align="end" ds-placement="bottom">${fullContent}</ds-action-menu>
+          </div>
+        </div>
+      </div>
+
+      <div style="padding-top: 22rem;">
+        <p style="font-size: 0.875rem; color: #555; margin-bottom: 0.75rem; font-weight: 600;">Placement: top</p>
+        <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; align-items: start;">
+          <div>
+            <p style="font-size: 0.75rem; color: #555; margin-bottom: 0.5rem;">Align start</p>
+            <ds-action-menu ds-button-text="Actions" ds-align="start" ds-placement="top">${fullContent}</ds-action-menu>
+          </div>
+          <div style="display: flex; flex-direction: column; align-items: center;">
+            <p style="font-size: 0.75rem; color: #555; margin-bottom: 0.5rem;">Align center</p>
+            <ds-action-menu ds-button-text="Actions" ds-align="center" ds-placement="top">${fullContent}</ds-action-menu>
+          </div>
+          <div style="display: flex; flex-direction: column; align-items: flex-end;">
+            <p style="font-size: 0.75rem; color: #555; margin-bottom: 0.5rem;">Align end</p>
+            <ds-action-menu ds-button-text="Actions" ds-align="end" ds-placement="top">${fullContent}</ds-action-menu>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+};
+const shortContent = html `
+  <ds-action-list>
+    <ds-action-list-item ds-variant="action" ds-label="Add..." ds-icon="add"></ds-action-list-item>
+    <ds-action-list-item ds-variant="action" ds-label="Edit" ds-icon="edit"></ds-action-list-item>
+    <ds-action-list-item ds-variant="action" ds-label="Share" ds-icon="share"></ds-action-list-item>
+  </ds-action-list>
+  <ds-action-list-divider></ds-action-list-divider>
+  <ds-action-list>
+    <ds-action-list-item ds-variant="action" ds-label="Archive" ds-icon="archive"></ds-action-list-item>
+    <ds-action-list-item ds-variant="action-danger" ds-label="Delete" ds-icon="delete"></ds-action-list-item>
+  </ds-action-list>
+`;
+export const AutoPlacement = {
+    name: 'Auto Placement',
+    render: () => html `
+    <div style="padding: 1rem;">
+      <div style="height: 65vh; display: flex; align-items: flex-end; justify-content: center;">
+        <p style="font-size: 0.875rem; color: #555;" aria-hidden="true">↓ Scroll down ↓</p>
+      </div>
+
+      <p style="font-size: 0.875rem; color: #555; margin-bottom: 0.5rem;">Near bottom of viewport — opens <strong>above</strong></p>
+      <ds-action-menu ds-button-text="Actions" ds-placement="auto">${shortContent}</ds-action-menu>
+
+      <div style="height: 120vh; display: flex; align-items: center; justify-content: center;">
+        <p style="font-size: 0.875rem; color: #555;" aria-hidden="true">↓ Keep scrolling ↓</p>
+      </div>
+
+      <p style="font-size: 0.875rem; color: #555; margin-bottom: 0.5rem;">Near top of viewport — automatically flips to open <strong>below</strong></p>
+      <ds-action-menu ds-button-text="Actions" ds-placement="auto">${shortContent}</ds-action-menu>
+
+      <div style="height: 65vh;"></div>
+    </div>
+  `,
+};
+export const MenuWidth = {
+    name: 'Menu Width',
+    render: () => html `
+    <div style="display: flex; gap: 2rem; flex-wrap: wrap; align-items: flex-start;">
+      <div>
+        <p style="font-size: 0.875rem; color: #555; margin-bottom: 0.5rem;">Default (fits content, min 288px)</p>
+        <ds-action-menu ds-button-text="Actions">
+          <ds-action-list>
+            <ds-action-list-item ds-variant="action" ds-label="Edit" ds-icon="edit"></ds-action-list-item>
+            <ds-action-list-item ds-variant="action" ds-label="Share" ds-icon="share"></ds-action-list-item>
+            <ds-action-list-item ds-variant="action-danger" ds-label="Delete" ds-icon="delete"></ds-action-list-item>
+          </ds-action-list>
+        </ds-action-menu>
+      </div>
+      <div>
+        <p style="font-size: 0.875rem; color: #555; margin-bottom: 0.5rem;">ds-menu-width="200px"</p>
+        <ds-action-menu ds-button-text="Actions" ds-menu-width="200px">
+          <ds-action-list>
+            <ds-action-list-item ds-variant="action" ds-label="Edit" ds-icon="edit"></ds-action-list-item>
+            <ds-action-list-item ds-variant="action" ds-label="Share" ds-icon="share"></ds-action-list-item>
+            <ds-action-list-item ds-variant="action-danger" ds-label="Delete" ds-icon="delete"></ds-action-list-item>
+          </ds-action-list>
+        </ds-action-menu>
+      </div>
+      <div>
+        <p style="font-size: 0.875rem; color: #555; margin-bottom: 0.5rem;">ds-menu-width="480px"</p>
+        <ds-action-menu ds-button-text="Actions" ds-menu-width="480px">
+          <ds-action-list>
+            <ds-action-list-item ds-variant="action" ds-label="Edit" ds-icon="edit"></ds-action-list-item>
+            <ds-action-list-item ds-variant="action" ds-label="Share" ds-icon="share"></ds-action-list-item>
+            <ds-action-list-item ds-variant="action-danger" ds-label="Delete" ds-icon="delete"></ds-action-list-item>
+          </ds-action-list>
+        </ds-action-menu>
+      </div>
+    </div>
+  `,
+};
+export const MaxHeight = {
+    name: 'Max Height (Scrollable)',
+    render: () => html `
+    <div>
+      <p style="font-size: 0.875rem; color: #555; margin-bottom: 0.75rem;">Max height (free)</p>
+      <ds-action-menu ds-button-text="Lisää liitetyyppi" ds-menu-max-height="240px">
+        <ds-action-list>
+          <ds-action-list-item ds-variant="single-select" ds-label="Hakuperustetutkinto: Master of Sambia"></ds-action-list-item>
+          <ds-action-list-item ds-variant="single-select" ds-label="Muu koulutus: Bachelor of Sambia"></ds-action-list-item>
+          <ds-action-list-item ds-variant="single-select" ds-label="Hakukohde: PAPU"></ds-action-list-item>
+          <ds-action-list-item ds-variant="single-select" ds-label="Hakukohde: ATM-DP"></ds-action-list-item>
+          <ds-action-list-item ds-variant="single-select" ds-label="Hakukohde: CHEMS"></ds-action-list-item>
+          <ds-action-list-item ds-variant="single-select" ds-label="Opintosuoritusote"></ds-action-list-item>
+          <ds-action-list-item ds-variant="single-select" ds-label="CSSD:n raportti opintosuoritusotteesta"></ds-action-list-item>
+          <ds-action-list-item ds-variant="single-select" ds-label="Muu koulutus: Associate Degree in Sambia"></ds-action-list-item>
+          <ds-action-list-item ds-variant="single-select" ds-label="Muu koulutus: Professional Training in Sambia"></ds-action-list-item>
+        </ds-action-list>
+      </ds-action-menu>
+    </div>
+  `,
+};
+export const ActionListItemVariants = {
+    name: 'Action List Item Variants',
+    render: () => html `
+    <div style="display: flex; gap: 2rem; flex-wrap: wrap; align-items: flex-start;">
+      <div>
+        <p style="font-weight: bold; margin-bottom: 0.5rem;">Actions</p>
+        <div style="width: 180px; border: 1px solid #ddd; border-radius: 4px;">
+          <ds-action-list>
+            <ds-action-list-item ds-variant="action" ds-label="Add..." ds-icon="add"></ds-action-list-item>
+            <ds-action-list-item ds-variant="action" ds-label="Edit" ds-icon="edit"></ds-action-list-item>
+            <ds-action-list-item ds-variant="action" ds-label="Share" ds-icon="share"></ds-action-list-item>
+            <ds-action-list-item ds-variant="action" ds-label="Download" ds-icon="download"></ds-action-list-item>
+            <ds-action-list-item ds-variant="action" ds-label="Action list item" ds-icon="person"></ds-action-list-item>
+            <ds-action-list-item ds-variant="action" ds-label="Action list item" ds-icon="person"></ds-action-list-item>
+            <ds-action-list-item ds-variant="action" ds-label="Action list item" ds-icon="person"></ds-action-list-item>
+          </ds-action-list>
+        </div>
+      </div>
+
+      <div>
+        <p style="font-weight: bold; margin-bottom: 0.5rem;">Single select</p>
+        <div style="width: 180px; border: 1px solid #ddd; border-radius: 4px;">
+          <ds-action-list>
+            <ds-action-list-item ds-variant="single-select" ds-label="Email" ds-icon="mail" ds-selected="true"></ds-action-list-item>
+            <ds-action-list-item ds-variant="single-select" ds-label="Phone" ds-icon="call"></ds-action-list-item>
+            <ds-action-list-item ds-variant="single-select" ds-label="Text message" ds-icon="chat"></ds-action-list-item>
+            <ds-action-list-item ds-variant="single-select" ds-label="Post" ds-icon="send"></ds-action-list-item>
+            <ds-action-list-item ds-variant="single-select" ds-label="Action list item" ds-icon="person"></ds-action-list-item>
+            <ds-action-list-item ds-variant="single-select" ds-label="Action list item" ds-icon="person"></ds-action-list-item>
+            <ds-action-list-item ds-variant="single-select" ds-label="Action list item" ds-icon="person"></ds-action-list-item>
+          </ds-action-list>
+        </div>
+      </div>
+
+      <div>
+        <p style="font-weight: bold; margin-bottom: 0.5rem;">Multi select</p>
+        <div style="width: 180px; border: 1px solid #ddd; border-radius: 4px;">
+          <ds-action-list>
+            <ds-action-list-item ds-variant="multi-select" ds-label="Student number" ds-selected="true"></ds-action-list-item>
+            <ds-action-list-item ds-variant="multi-select" ds-label="Study programme"></ds-action-list-item>
+            <ds-action-list-item ds-variant="multi-select" ds-label="Study track"></ds-action-list-item>
+            <ds-action-list-item ds-variant="multi-select" ds-label="Thesis advisor"></ds-action-list-item>
+            <ds-action-list-item ds-variant="multi-select" ds-label="Action list item"></ds-action-list-item>
+            <ds-action-list-item ds-variant="multi-select" ds-label="Action list item"></ds-action-list-item>
+            <ds-action-list-item ds-variant="multi-select" ds-label="Action list item"></ds-action-list-item>
+          </ds-action-list>
+        </div>
+      </div>
+    </div>
+  `,
+};
+export const ActionListFeatures = {
+    name: 'Action List Features',
+    render: () => html `
+    <div style="display: flex; gap: 2rem; flex-wrap: wrap; align-items: flex-start;">
+      <div>
+        <p style="font-weight: bold; margin-bottom: 0.5rem;">With divider</p>
+        <div style="width: 180px; border: 1px solid #ddd; border-radius: 4px;">
+          <ds-action-list>
+            <ds-action-list-item ds-variant="action" ds-label="Add..." ds-icon="add"></ds-action-list-item>
+            <ds-action-list-item ds-variant="action" ds-label="Edit" ds-icon="edit"></ds-action-list-item>
+            <ds-action-list-item ds-variant="action" ds-label="Share" ds-icon="share"></ds-action-list-item>
+          </ds-action-list>
+          <ds-action-list-divider></ds-action-list-divider>
+          <ds-action-list>
+            <ds-action-list-item ds-variant="action" ds-label="Archive" ds-icon="archive"></ds-action-list-item>
+            <ds-action-list-item ds-variant="action-danger" ds-label="Delete" ds-icon="delete"></ds-action-list-item>
+          </ds-action-list>
+        </div>
+      </div>
+
+      <div>
+        <p style="font-weight: bold; margin-bottom: 0.5rem;">With group title</p>
+        <div style="width: 180px; border: 1px solid #ddd; border-radius: 4px;">
+          <ds-action-list>
+            <ds-action-list-group-title ds-title="Group title"></ds-action-list-group-title>
+            <ds-action-list-item ds-variant="action" ds-label="Add..." ds-icon="add"></ds-action-list-item>
+            <ds-action-list-item ds-variant="action" ds-label="Edit" ds-icon="edit"></ds-action-list-item>
+            <ds-action-list-item ds-variant="action" ds-label="Share" ds-icon="share"></ds-action-list-item>
+            <ds-action-list-item ds-variant="action" ds-label="Download" ds-icon="download"></ds-action-list-item>
+          </ds-action-list>
+        </div>
+      </div>
+    </div>
+  `,
+};
+export const Groups = {
+    name: 'Groups',
+    render: () => html `
+    <ds-action-menu ds-button-text="Actions">
+      <ds-action-list>
+        <ds-action-list-item ds-variant="action" ds-label="Add..." ds-icon="add"></ds-action-list-item>
+        <ds-action-list-item ds-variant="action" ds-label="Edit" ds-icon="edit"></ds-action-list-item>
+      </ds-action-list>
+      <ds-action-list-divider></ds-action-list-divider>
+      <ds-action-list>
+        <ds-action-list-item ds-variant="action" ds-label="Share" ds-icon="share"></ds-action-list-item>
+        <ds-action-list-item ds-variant="action" ds-label="Download" ds-icon="download"></ds-action-list-item>
+      </ds-action-list>
+      <ds-action-list-divider></ds-action-list-divider>
+      <ds-action-list>
+        <ds-action-list-item ds-variant="action-danger" ds-label="Delete" ds-icon="delete"></ds-action-list-item>
+      </ds-action-list>
+    </ds-action-menu>
+  `,
+};
+export const ItemStates = {
+    name: 'Item States',
+    render: () => html `
+    <div style="display: flex; gap: 2rem; flex-wrap: wrap; align-items: flex-start;">
+      <div>
+        <p style="font-weight: bold; margin-bottom: 0.5rem;">Disabled</p>
+        <div style="width: 240px; border: 1px solid #ddd;">
+          <ds-action-list>
+            <ds-action-list-item ds-variant="action" ds-label="Edit" ds-icon="edit"></ds-action-list-item>
+            <ds-action-list-item ds-variant="action" ds-label="Share" ds-icon="share" ds-disabled="true"></ds-action-list-item>
+            <ds-action-list-item ds-variant="action" ds-label="Download" ds-icon="download"></ds-action-list-item>
+          </ds-action-list>
+          <ds-action-list-divider></ds-action-list-divider>
+          <ds-action-list>
+            <ds-action-list-item ds-variant="single-select" ds-label="Email" ds-icon="mail" ds-selected="true"></ds-action-list-item>
+            <ds-action-list-item ds-variant="single-select" ds-label="Phone" ds-icon="call" ds-disabled="true"></ds-action-list-item>
+          </ds-action-list>
+          <ds-action-list-divider></ds-action-list-divider>
+          <ds-action-list>
+            <ds-action-list-item ds-variant="multi-select" ds-label="Student number" ds-selected="true"></ds-action-list-item>
+            <ds-action-list-item ds-variant="multi-select" ds-label="Study programme" ds-disabled="true"></ds-action-list-item>
+          </ds-action-list>
+          <ds-action-list-divider></ds-action-list-divider>
+          <ds-action-list>
+            <ds-action-list-item ds-variant="action-danger" ds-label="Delete" ds-icon="delete" ds-disabled="true"></ds-action-list-item>
+          </ds-action-list>
+        </div>
+      </div>
+
+      <div>
+        <p style="font-weight: bold; margin-bottom: 0.5rem;">Unavailable</p>
+        <div style="width: 240px; border: 1px solid #ddd;">
+          <ds-action-list>
+            <ds-action-list-item ds-variant="action" ds-label="Edit" ds-icon="edit"></ds-action-list-item>
+            <ds-action-list-item ds-variant="action" ds-label="Share" ds-icon="share" ds-unavailable="true" ds-description="No sharing rights"></ds-action-list-item>
+            <ds-action-list-item ds-variant="action" ds-label="Download" ds-icon="download"></ds-action-list-item>
+          </ds-action-list>
+          <ds-action-list-divider></ds-action-list-divider>
+          <ds-action-list>
+            <ds-action-list-item ds-variant="single-select" ds-label="Email" ds-icon="mail" ds-selected="true"></ds-action-list-item>
+            <ds-action-list-item ds-variant="single-select" ds-label="Phone" ds-icon="call" ds-unavailable="true" ds-description="Not available"></ds-action-list-item>
+          </ds-action-list>
+          <ds-action-list-divider></ds-action-list-divider>
+          <ds-action-list>
+            <ds-action-list-item ds-variant="multi-select" ds-label="Student number" ds-selected="true"></ds-action-list-item>
+            <ds-action-list-item ds-variant="multi-select" ds-label="Study programme" ds-unavailable="true" ds-description="Not available"></ds-action-list-item>
+          </ds-action-list>
+          <ds-action-list-divider></ds-action-list-divider>
+          <ds-action-list>
+            <ds-action-list-item
+              ds-variant="action-danger"
+              ds-label="Delete"
+              ds-icon="delete"
+              ds-unavailable="true"
+              ds-description="Insufficient permissions"
+            ></ds-action-list-item>
+          </ds-action-list>
+        </div>
+      </div>
+
+      <div>
+        <p style="font-weight: bold; margin-bottom: 0.5rem;">Checked</p>
+        <div style="width: 240px; border: 1px solid #ddd;">
+          <ds-action-list>
+            <ds-action-list-item ds-variant="single-select" ds-label="Email" ds-icon="mail" ds-selected="true"></ds-action-list-item>
+            <ds-action-list-item ds-variant="single-select" ds-label="Phone" ds-icon="call"></ds-action-list-item>
+            <ds-action-list-item ds-variant="single-select" ds-label="Post" ds-icon="send"></ds-action-list-item>
+          </ds-action-list>
+          <ds-action-list-divider></ds-action-list-divider>
+          <ds-action-list>
+            <ds-action-list-item ds-variant="multi-select" ds-label="Student number" ds-selected="true"></ds-action-list-item>
+            <ds-action-list-item ds-variant="multi-select" ds-label="Study programme" ds-selected="true"></ds-action-list-item>
+            <ds-action-list-item ds-variant="multi-select" ds-label="Study track"></ds-action-list-item>
+          </ds-action-list>
+          <ds-action-list-divider></ds-action-list-divider>
+          <ds-action-list>
+            <ds-action-list-item ds-variant="single-select" ds-label="Email" ds-icon="mail" ds-selected="true" ds-disabled="true"></ds-action-list-item>
+            <ds-action-list-item ds-variant="multi-select" ds-label="Student number" ds-selected="true" ds-disabled="true"></ds-action-list-item>
+          </ds-action-list>
+          <ds-action-list-divider></ds-action-list-divider>
+          <ds-action-list>
+            <ds-action-list-item
+              ds-variant="single-select"
+              ds-label="Email"
+              ds-icon="mail"
+              ds-selected="true"
+              ds-unavailable="true"
+              ds-description="Not available"
+            ></ds-action-list-item>
+            <ds-action-list-item ds-variant="multi-select" ds-label="Student number" ds-selected="true" ds-unavailable="true" ds-description="Not available"></ds-action-list-item>
+          </ds-action-list>
+        </div>
+      </div>
+    </div>
+  `,
+};
+export const CustomTagName = {
+    render: () => html `
+    <custom-ds-action-menu ds-button-text="Actions">
+      <custom-ds-action-list>
+        <custom-ds-action-list-item ds-variant="action" ds-label="Add..." ds-icon="add"></custom-ds-action-list-item>
+        <custom-ds-action-list-item ds-variant="action" ds-label="Edit" ds-icon="edit"></custom-ds-action-list-item>
+        <custom-ds-action-list-item ds-variant="action" ds-label="Share" ds-icon="share"></custom-ds-action-list-item>
+        <custom-ds-action-list-item ds-variant="action" ds-label="Download" ds-icon="download"></custom-ds-action-list-item>
+      </custom-ds-action-list>
+    </custom-ds-action-menu>
+  `,
+};
+export const ShadowDom = {
+    render: () => {
+        const host = document.createElement('div');
+        const shadowRoot = host.attachShadow({ mode: 'open' });
+        render(html ` <ds-action-menu ds-button-text="Actions" ds-button-variant="secondary"> ${fullContent} </ds-action-menu> `, shadowRoot);
+        return host;
+    },
+};