@getflip/swirl-components 0.116.0 → 0.118.0

package/dist/collection/collection-manifest.json

@@ -115,6 +115,7 @@
     "./components/swirl-icon/icons/swirl-icon-delete.js",
     "./components/swirl-icon/icons/swirl-icon-description.js",
     "./components/swirl-icon/icons/swirl-icon-discover.js",
+    "./components/swirl-icon/icons/swirl-icon-dock-left.js",
     "./components/swirl-icon/icons/swirl-icon-double-arrow-left.js",
     "./components/swirl-icon/icons/swirl-icon-double-arrow-right.js",
     "./components/swirl-icon/icons/swirl-icon-download.js",

package/dist/collection/components/swirl-app-bar/swirl-app-bar.js

@@ -21,6 +21,7 @@ export class SwirlAppBar {
       this.stepDownButtonClick.emit(event);
     };
     this.backButtonLabel = "Go back";
+    this.closeButtonIcon = "<swirl-icon-close></swirl-icon-close>";
     this.closeButtonLabel = "Close";
     this.stepUpButtonLabel = "Previous item";
     this.stepDownButtonLabel = "Next item";
@@ -51,7 +52,7 @@ export class SwirlAppBar {
       "app-bar--has-cta": this.hasCta,
       "app-bar--has-right-controls": hasRightControls,
     });
-    return (h(Host, null, h("div", { class: className }, showLeftControls && (h("div", { class: "app-bar__left-controls" }, (this.showBackButton || this.showCloseButton) && (h("div", { class: "app-bar__main-navigation-control" }, this.showBackButton && (h("swirl-button", { hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButtonLabel, onClick: this.onBackButtonClick })), this.showCloseButton && (h("swirl-button", { hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })))), this.showStepperControls && (h("div", { class: "app-bar__stepper-controls" }, h("swirl-button", { hideLabel: true, icon: "<swirl-icon-arrow-upward></swirl-icon-arrow-upward>", label: this.stepUpButtonLabel, onClick: this.onStepUpButtonClick }), h("swirl-button", { hideLabel: true, icon: "<swirl-icon-arrow-downward></swirl-icon-arrow-downward>", label: this.stepDownButtonLabel, onClick: this.onStepDownButtonClick }))))), h("div", { class: "app-bar__cta" }, h("slot", { name: "cta" })), h("div", { class: "app-bar__heading" }, h("slot", { name: "heading" })), h("div", { class: "app-bar__center-controls" }, h("slot", { name: "center-controls" })), h("div", { class: "app-bar__right-controls" }, h("slot", { name: "right-controls" })))));
+    return (h(Host, null, h("div", { class: className }, showLeftControls && (h("div", { class: "app-bar__left-controls" }, (this.showBackButton || this.showCloseButton) && (h("div", { class: "app-bar__main-navigation-control" }, this.showBackButton && (h("swirl-button", { hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButtonLabel, onClick: this.onBackButtonClick })), this.showCloseButton && (h("swirl-button", { hideLabel: true, icon: this.closeButtonIcon, label: this.closeButtonLabel, onClick: this.onCloseButtonClick })))), this.showStepperControls && (h("div", { class: "app-bar__stepper-controls" }, h("swirl-button", { hideLabel: true, icon: "<swirl-icon-arrow-upward></swirl-icon-arrow-upward>", label: this.stepUpButtonLabel, onClick: this.onStepUpButtonClick }), h("swirl-button", { hideLabel: true, icon: "<swirl-icon-arrow-downward></swirl-icon-arrow-downward>", label: this.stepDownButtonLabel, onClick: this.onStepDownButtonClick }))))), h("div", { class: "app-bar__cta" }, h("slot", { name: "cta" })), h("div", { class: "app-bar__heading" }, h("slot", { name: "heading" })), h("div", { class: "app-bar__center-controls" }, h("slot", { name: "center-controls" })), h("div", { class: "app-bar__right-controls" }, h("slot", { name: "right-controls" })))));
   }
   static get is() { return "swirl-app-bar"; }
   static get encapsulation() { return "shadow"; }
@@ -85,6 +86,24 @@ export class SwirlAppBar {
         "reflect": false,
         "defaultValue": "\"Go back\""
       },
+      "closeButtonIcon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "close-button-icon",
+        "reflect": false,
+        "defaultValue": "\"<swirl-icon-close></swirl-icon-close>\""
+      },
       "closeButtonLabel": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/swirl-app-icon/swirl-app-icon.css

@@ -9,10 +9,9 @@
 .app-icon {
   position: relative;
   overflow: hidden;
-  width: 2.5rem;
-  height: 2.5rem;
-  border-radius: 0.625rem;
-  background-color: var(--s-surface-default);
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: var(--s-border-radius-s);
 }
 
 .app-icon > img {
@@ -20,28 +19,10 @@
     height: 100%;
   }
 
-.app-icon::after {
-  position: absolute;
-  top: 0;
-  display: block;
-  width: 100%;
-  height: 100%;
-  border-radius: 0.625rem;
-  content: "";
-  box-shadow: 0 0 var(--s-border-width-default) rgba(0, 0, 0, 0.1) inset,
-    0 0 var(--s-border-width-default) rgba(0, 0, 0, 0.1) inset;
-}
-
-.app-icon--hide-border::after {
-  box-shadow: none;
-}
-
 .app-icon__icon {
   display: inline-flex;
   width: 100%;
   height: 100%;
   justify-content: center;
   align-items: center;
-
-  color: var(--s-icon-default);
 }

package/dist/collection/components/swirl-app-icon/swirl-app-icon.js

@@ -10,7 +10,6 @@ export class SwirlAppIcon {
     };
     this.icon = undefined;
     this.src = undefined;
-    this.hideBorder = false;
     this.imageAvailable = undefined;
   }
   render() {
@@ -20,7 +19,6 @@ export class SwirlAppIcon {
     const showFallbackIcon = !showImage && !showIcon;
     const className = classnames("app-icon", {
       "app-icon--has-icon": showIcon || showFallbackIcon,
-      "app-icon--hide-border": this.hideBorder,
     });
     return (h(Host, null, h("span", { class: className }, showImage && (h("img", { alt: "", height: "40", onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: "40" })), showIcon && (h("span", { class: "app-icon__icon", innerHTML: this.icon })))));
   }
@@ -71,24 +69,6 @@ export class SwirlAppIcon {
         },
         "attribute": "src",
         "reflect": false
-      },
-      "hideBorder": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "hide-border",
-        "reflect": false,
-        "defaultValue": "false"
       }
     };
   }

package/dist/collection/components/swirl-app-layout/swirl-app-layout.css

@@ -80,6 +80,18 @@
   }
     }
 
+@media (min-width: 768px) {
+        .app-layout--has-sidebar:not(.app-layout--has-navigation).app-layout--sidebar-active .app-layout__grid {
+          animation: app-layout-no-nav-sidebar-slide-in 0.3s;
+        }
+      }
+
+@media (min-width: 768px) {
+        .app-layout--has-sidebar:not(.app-layout--has-navigation).app-layout--sidebar-closing .app-layout__grid {
+          animation: app-layout-no-nav-sidebar-slide-out 0.3s;
+        }
+      }
+
 @media (min-width: 768px) {
       .app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid {
         grid-template-columns: 1fr min(50%, 25rem);
@@ -96,7 +108,7 @@
       "body";
   }
 
-@media (min-width: 1440px) {
+@media (min-width: 1800px) {
       .app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid {
         animation: app-layout-sidebar-slide-in 0.3s;
         grid-template-columns: 25rem 1fr 25rem;
@@ -132,7 +144,7 @@
   }
     }
 
-@media (min-width: 768px) and (max-width: 1439px) {
+@media (min-width: 768px) and (max-width: 1799px) {
     .app-layout--has-navigation.app-layout--has-sidebar .app-layout__sidebar {
       position: absolute;
       top: 0;
@@ -196,7 +208,7 @@
   }
     }
 
-@media (min-width: 1440px) {
+@media (min-width: 1800px) {
 
 .app-layout--sidebar-closing .app-layout__sidebar {
       animation: none
@@ -211,6 +223,14 @@
     display: block;
   }
 
+.app-layout--has-custom-sidebar-header .app-layout__sidebar-header {
+    display: none;
+  }
+
+.app-layout--has-custom-sidebar-header .app-layout__custom-sidebar-header {
+    display: block;
+  }
+
 .app-layout--hide-app-bar .app-layout__body {
     grid-template-rows: auto 1fr;
     grid-template-areas:
@@ -397,7 +417,7 @@
 }
   }
 
-@media (min-width: 1440px) {
+@media (min-width: 1800px) {
 
 .app-layout__sidebar {
     width: 25rem;
@@ -405,6 +425,14 @@
 }
   }
 
+.app-layout__custom-sidebar-header {
+  display: none;
+  min-width: 0;
+  border-bottom: var(--s-border-width-default) solid var(--s-border-default);
+  background-color: var(--s-background-default);
+  grid-area: sidebar-header;
+}
+
 .app-layout__sidebar-header {
   display: flex;
   min-width: 0;
@@ -777,3 +805,25 @@
   }
 }
 
+@keyframes app-layout-no-nav-sidebar-slide-in {
+  from {
+    overflow: hidden;
+    grid-template-columns: 1fr 0;
+  }
+  to {
+    overflow: hidden;
+    grid-template-columns: 1fr 25rem;
+  }
+}
+
+@keyframes app-layout-no-nav-sidebar-slide-out {
+  from {
+    overflow: hidden;
+    grid-template-columns: 1fr 25rem;
+  }
+  to {
+    overflow: hidden;
+    grid-template-columns: 1fr 0;
+  }
+}
+

package/dist/collection/components/swirl-app-layout/swirl-app-layout.js

@@ -11,6 +11,7 @@ import { isMobileViewport } from "../../utils";
  * @slot app-bar-mobile-menu-button - Used to add a mobile shell layout menu button to the app bar
  * @slot banner - Used to show a banner below the app bar
  * @slot sidebar - Content of the right sidebar
+ * @slot custom-sidebar-header - Replaces the default sidebar header
  */
 export class SwirlAppLayout {
   constructor() {
@@ -177,10 +178,12 @@ export class SwirlAppLayout {
       !this.hasCustomAppBarBackButton;
     const hasAppBarControls = Boolean(this.el.querySelector('[slot="app-bar-controls"]'));
     const hasAppBarMobileMenuButton = Boolean(this.el.querySelector('[slot="app-bar-mobile-menu-button"]'));
+    const hasCustomSidebarHeader = Boolean(this.el.querySelector('[slot="custom-sidebar-header"]'));
     const className = classnames("app-layout", `app-layout--mobile-view-${this.mobileView}`, `app-layout--transitioning-from-${this.transitioningFrom}`, `app-layout--transitioning-to-${this.transitioningTo}`, `app-layout--transition-style-${this.transitionStyle}`, {
       "app-layout--has-app-bar-mobile-menu-button": hasAppBarMobileMenuButton,
       "app-layout--has-app-bar-controls": hasAppBarControls,
       "app-layout--has-custom-app-bar-back-button": this.hasCustomAppBarBackButton,
+      "app-layout--has-custom-sidebar-header": hasCustomSidebarHeader,
       "app-layout--has-navigation": this.hasNavigation,
       "app-layout--has-sidebar": this.hasSidebar,
       "app-layout--hide-app-bar": this.hideAppBar,
@@ -189,7 +192,7 @@ export class SwirlAppLayout {
     });
     return (h(Host, null, h("section", { "aria-labelledby": "app-name", class: className, role: "document", tabIndex: 0 }, h("div", { class: "app-layout__grid" }, h("header", { class: "app-layout__header" }, h("span", { class: "app-layout__navigation-mobile-menu-button" }, h("slot", { name: "navigation-mobile-menu-button" })), this.showNavigationBackButton && (h("span", { class: "app-layout__navigation-back-button" }, h("swirl-button", { hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick }))), h("swirl-heading", { as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, text: this.appName }), this.hasNavigation && (h("span", { class: "app-layout__navigation-controls" }, h("slot", { name: "navigation-controls" })))), h("nav", { "aria-label": this.navigationLabel, class: "app-layout__navigation" }, h("slot", { name: "navigation" })), h("section", { "aria-labelledby": "app-name", class: "app-layout__body" }, !this.hideAppBar && (h("header", { class: "app-layout__app-bar" }, h("span", { class: "app-layout__app-bar-mobile-menu-button" }, h("slot", { name: "app-bar-mobile-menu-button" })), showBackToNavigationButton && (h("span", { class: "app-layout__back-to-navigation-button" }, h("swirl-button", { hideLabel: true, icon: this.transitionStyle === "dialog"
         ? "<swirl-icon-close></swirl-icon-close>"
-        : "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backToNavigationViewButtonLabel, onClick: this.onBackToNavigationViewButtonClick }))), h("span", { class: "app-layout__custom-app-bar-back-button" }, h("slot", { name: "custom-app-bar-back-button" })), h("div", { class: "app-layout__app-bar-content" }, h("slot", { name: "app-bar" })), h("div", { class: "app-layout__app-bar-controls" }, h("slot", { name: "app-bar-controls" })))), h("div", { class: "app-layout__banner" }, h("slot", { name: "banner" })), h("div", { class: "app-layout__content" }, h("slot", { name: "content" }))), h("aside", { class: "app-layout__sidebar" }, h("header", { class: "app-layout__sidebar-header" }, h("swirl-button", { class: "app-layout__sidebar-close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick }), h("swirl-heading", { as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), h("div", { class: "app-layout__sidebar-content" }, h("slot", { name: "sidebar" }))), this.ctaLabel && (h("span", { class: "app-layout__floating-cta" }, h("swirl-button", { hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })))))));
+        : "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backToNavigationViewButtonLabel, onClick: this.onBackToNavigationViewButtonClick }))), h("span", { class: "app-layout__custom-app-bar-back-button" }, h("slot", { name: "custom-app-bar-back-button" })), h("div", { class: "app-layout__app-bar-content" }, h("slot", { name: "app-bar" })), h("div", { class: "app-layout__app-bar-controls" }, h("slot", { name: "app-bar-controls" })))), h("div", { class: "app-layout__banner" }, h("slot", { name: "banner" })), h("div", { class: "app-layout__content" }, h("slot", { name: "content" }))), h("aside", { class: "app-layout__sidebar" }, h("header", { class: "app-layout__custom-sidebar-header" }, h("slot", { name: "custom-sidebar-header" })), h("header", { class: "app-layout__sidebar-header" }, h("swirl-button", { class: "app-layout__sidebar-close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick }), h("swirl-heading", { as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), h("div", { class: "app-layout__sidebar-content" }, h("slot", { name: "sidebar" }))), this.ctaLabel && (h("span", { class: "app-layout__floating-cta" }, h("swirl-button", { hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })))))));
   }
   static get is() { return "swirl-app-layout"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-badge/swirl-badge.css

@@ -15,13 +15,30 @@
   max-width: 100%;
   justify-content: center;
   align-items: center;
-  border: 0.25rem solid var(--swirl-badge-border-color);
+  border: 0.125rem solid var(--swirl-badge-border-color);
   border-radius: 2rem;
   color: var(--s-text-on-status);
   font-size: var(--s-font-size-sm);
   font-weight: var(--s-font-weight-medium);
 }
 
+.badge--size-xs {
+  min-width: 1.25rem;
+  height: 1.25rem;
+  font-size: 0.6875rem;
+}
+
+.badge--size-xs .badge__label {
+    padding-right: 0.125rem;
+    padding-left: 0.125rem;
+  }
+
+.badge--size-xs .badge__icon > swirl-icon,
+    .badge--size-xs .badge__icon > *::part(icon) {
+      width: 0.75rem;
+      height: 0.75rem;
+    }
+
 .badge--size-s {
   min-width: 1.5rem;
   height: 1.5rem;

package/dist/collection/components/swirl-badge/swirl-badge.js

@@ -90,7 +90,7 @@ export class SwirlBadge {
         "mutable": false,
         "complexType": {
           "original": "SwirlBadgeSize",
-          "resolved": "\"m\" | \"s\"",
+          "resolved": "\"m\" | \"s\" | \"xs\"",
           "references": {
             "SwirlBadgeSize": {
               "location": "local",

package/dist/collection/components/swirl-icon/icons/swirl-icon-dock-left.js

@@ -0,0 +1,52 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Fragment, h } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconDockLeft {
+  constructor() {
+    this.size = 24;
+  }
+  render() {
+    const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M3.33333 14C2.96667 14 2.65278 13.8694 2.39167 13.6083C2.13056 13.3472 2 13.0333 2 12.6667V3.33333C2 2.96667 2.13056 2.65278 2.39167 2.39167C2.65278 2.13056 2.96667 2 3.33333 2H12.6667C13.0333 2 13.3472 2.13056 13.6083 2.39167C13.8694 2.65278 14 2.96667 14 3.33333V12.6667C14 13.0333 13.8694 13.3472 13.6083 13.6083C13.3472 13.8694 13.0333 14 12.6667 14H3.33333ZM5.33333 12.6667V3.33333H3.33333V12.6667H5.33333ZM6.66667 12.6667H12.6667V3.33333H6.66667V12.6667Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM8 19V5H5V19H8ZM10 19H19V5H10V19Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M5.83333 24.5C5.19167 24.5 4.64236 24.2715 4.18542 23.8146C3.72847 23.3576 3.5 22.8083 3.5 22.1667V5.83333C3.5 5.19167 3.72847 4.64236 4.18542 4.18542C4.64236 3.72847 5.19167 3.5 5.83333 3.5H22.1667C22.8083 3.5 23.3576 3.72847 23.8146 4.18542C24.2715 4.64236 24.5 5.19167 24.5 5.83333V22.1667C24.5 22.8083 24.2715 23.3576 23.8146 23.8146C23.3576 24.2715 22.8083 24.5 22.1667 24.5H5.83333ZM9.33333 22.1667V5.83333H5.83333V22.1667H9.33333ZM11.6667 22.1667H22.1667V5.83333H11.6667V22.1667Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-dock-left"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlIconSize",
+          "resolved": "16 | 20 | 24 | 28",
+          "references": {
+            "SwirlIconSize": {
+              "location": "import",
+              "path": "../swirl-icon.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}

package/dist/collection/components/swirl-option-list-item/swirl-option-list-item.css

@@ -45,13 +45,13 @@
 }
   }
 
-.option-list-item--draggable .option-list-item__label {
+.option-list-item--draggable .option-list-item__label-container {
     padding-right: calc(var(--s-space-16) + 1.5rem);
   }
 
 @media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
 
-.option-list-item--draggable .option-list-item__label {
+.option-list-item--draggable .option-list-item__label-container {
       padding-right: calc(var(--s-space-16) + 1rem)
   }
     }
@@ -94,7 +94,8 @@
       color: var(--s-text-on-status);
     }
 
-.option-list-item--disabled .option-list-item__label {
+.option-list-item--disabled .option-list-item__label,
+  .option-list-item--disabled .option-list-item__description {
     color: var(--s-text-disabled);
   }
 
@@ -109,8 +110,13 @@
     background-color: var(--s-surface-overlay-default);
   }
 
-.option-list-item__label {
+.option-list-item__label-container {
+  display: flex;
   flex-grow: 1;
+  flex-direction: column;
+}
+
+.option-list-item__label {
   color: var(--s-text-default);
   font-size: var(--s-font-size-base);
   font-weight: var(--s-font-weight-medium);
@@ -126,6 +132,22 @@
 }
   }
 
+.option-list-item__description {
+  color: var(--s-text-subdued);
+  font-size: var(--s-font-size-base);
+  font-weight: var(--s-font-weight-medium);
+  line-height: var(--s-line-height-base);
+  text-align: left;
+}
+
+@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
+
+.option-list-item__description {
+    font-size: var(--s-font-size-sm);
+    line-height: var(--s-line-height-sm)
+}
+  }
+
 .option-list-item__icon {
   display: inline-flex;
   flex-shrink: 0;

package/dist/collection/components/swirl-option-list-item/swirl-option-list-item.js

@@ -1,9 +1,11 @@
 import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
 import { getDesktopMediaQuery } from "../../utils";
+import { v4 as uuid } from "uuid";
 export class SwirlOptionListItem {
   constructor() {
     this.desktopMediaQuery = getDesktopMediaQuery();
+    this.id = uuid();
     this.desktopMediaQueryHandler = (event) => {
       this.forceIconProps(event.matches);
       this.updateIconSize(event.matches);
@@ -22,6 +24,7 @@ export class SwirlOptionListItem {
     };
     this.allowDrag = undefined;
     this.context = "single-select";
+    this.description = undefined;
     this.disabled = undefined;
     this.dragging = undefined;
     this.dragHandleDescription = "Press spacebar to toggle grab";
@@ -61,7 +64,9 @@ export class SwirlOptionListItem {
       "option-list-item--dragging": this.dragging,
       "option-list-item--selected": this.selected,
     });
-    return (h(Host, null, h("div", { "aria-checked": this.swirlAriaRole === "menuitemradio" ? ariaSelected : undefined, "aria-disabled": ariaDisabled, "aria-selected": this.swirlAriaRole === "option" ? ariaSelected : undefined, class: className, onBlur: this.onBlur, onFocus: this.onFocus, part: "option-list-item", role: this.swirlAriaRole }, showIcon && (h("span", { class: "option-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), showCheckbox && (h("span", { class: "option-list-item__checkbox" }, h("span", { class: "option-list-item__checkbox-box" }, this.selected && (h("swirl-icon-check-strong", { class: "option-list-item__checkbox-icon", size: 16 }))))), h("span", { class: "option-list-item__label", part: "option-list-item__label" }, this.label), showSelectionIcon && (h("span", { class: "option-list-item__selection-icon" }, h("swirl-icon-check-small", { size: this.iconSize })))), this.allowDrag && (h("button", { "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "option-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, tabIndex: this.focused ? 0 : -1, type: "button" }, h("swirl-icon-drag-handle", { size: this.iconSize })))));
+    return (h(Host, null, h("div", { "aria-checked": this.swirlAriaRole === "menuitemradio" ? ariaSelected : undefined, "aria-describedby": Boolean(this.description)
+        ? `option-list-item-${this.id}-description`
+        : undefined, "aria-disabled": ariaDisabled, "aria-labelledby": `option-list-item-${this.id}-label`, "aria-selected": this.swirlAriaRole === "option" ? ariaSelected : undefined, class: className, id: `option-list-item-${this.id}`, onBlur: this.onBlur, onFocus: this.onFocus, part: "option-list-item", role: this.swirlAriaRole }, showIcon && (h("span", { class: "option-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), showCheckbox && (h("span", { class: "option-list-item__checkbox" }, h("span", { class: "option-list-item__checkbox-box" }, this.selected && (h("swirl-icon-check-strong", { class: "option-list-item__checkbox-icon", size: 16 }))))), h("span", { class: "option-list-item__label-container" }, h("span", { class: "option-list-item__label", id: `option-list-item-${this.id}-label`, part: "option-list-item__label" }, this.label), this.description && (h("span", { class: "option-list-item__description", id: `option-list-item-${this.id}-description` }, this.description))), showSelectionIcon && (h("span", { class: "option-list-item__selection-icon" }, h("swirl-icon-check-small", { size: this.iconSize })))), this.allowDrag && (h("button", { "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "option-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, tabIndex: this.focused ? 0 : -1, type: "button" }, h("swirl-icon-drag-handle", { size: this.iconSize })))));
   }
   static get is() { return "swirl-option-list-item"; }
   static get encapsulation() { return "scoped"; }
@@ -117,6 +122,23 @@ export class SwirlOptionListItem {
         "reflect": false,
         "defaultValue": "\"single-select\""
       },
+      "description": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "description",
+        "reflect": false
+      },
       "disabled": {
         "type": "boolean",
         "mutable": false,

package/dist/collection/components/swirl-option-list-item/swirl-option-list-item.spec.js

@@ -13,14 +13,17 @@ describe("swirl-option-list-item", () => {
               value="Value">
             </swirl-option-list-item>`,
     });
+    const id = page.root.children[0].id;
     expect(page.root).toEqualHtml(`
       <swirl-option-list-item context="single-select" disabled="false" icon="<swirl-icon-mention></swirl-icon-mention>" label="Option List Item" selected="true" value="Value">
-        <div aria-selected="true" class="option-list-item option-list-item--context-single-select option-list-item--selected" part="option-list-item" role="option">
+        <div aria-labelledby="${id}-label" aria-selected="true" class="option-list-item option-list-item--context-single-select option-list-item--selected" id="${id}" part="option-list-item" role="option">
           <span class="option-list-item__icon">
             <swirl-icon-mention size="24"></swirl-icon-mention>
           </span>
-          <span class="option-list-item__label" part="option-list-item__label">
-            Option List Item
+          <span class="option-list-item__label-container">
+            <span class="option-list-item__label" id="${id}-label" part="option-list-item__label">
+              Option List Item
+            </span>
           </span>
           <span class="option-list-item__selection-icon">
             <swirl-icon-check-small size="24"></swirl-icon-check-small>