feature: Support for responsive default expanded items

As well as using a class attribute, elements can be expanded by default using `data-collapsable-default-expanded-media`. This data attribute should contain a media query string (e.g. `(min-width: 992px)`), which is then evaluated using `window.matchMedia`. If it matches, the item will also be expanded by default, regardless of class. It is therefore intended to be used without the default expanded class name.

src/CollapsableItem.ts

@@ -247,7 +247,16 @@ export class CollapsableItem {
 	}
 
 	public get isDefaultExpanded(): boolean {
-		return this.element.classList.contains(this.collapsable.options.classNames.defaultExpanded)
+		const defaultExpandedClass = this.element.classList.contains(this.collapsable.options.classNames.defaultExpanded)
+		const mediaDataset = this.element.dataset.defaultCollapsableExpandedMedia
+
+		if (defaultExpandedClass || !mediaDataset) {
+			return defaultExpandedClass
+		}
+
+		const defaultExpandedMedia = window.matchMedia(mediaDataset)
+
+		return defaultExpandedMedia.matches || defaultExpandedClass
 	}
 
 	public get isExpanded(): boolean {