@descope-ui/descope-list 0.0.1 → 0.1.0

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.1.0](https://github.com/descope/web-components-ui/compare/@descope-ui/descope-list-0.0.1...@descope-ui/descope-list-0.1.0) (2025-09-02)
+
+### Dependency Updates
+
+* `e2e-utils` updated to version `0.1.0`
+* `@descope-ui/descope-avatar` updated to version `0.1.0`
+* `@descope-ui/common` updated to version `0.1.0`
+* `@descope-ui/theme-globals` updated to version `0.0.20`
+* `@descope-ui/descope-list-item` updated to version `0.1.0`
+
+### Features
+
+* Trusted Devices ([#697](https://github.com/descope/web-components-ui/issues/697)) ([fb2f0eb](https://github.com/descope/web-components-ui/commit/fb2f0eb6773ed624354ed9f0b97d713bb8b10fce))
+
 ## 0.0.1 (2025-07-21)
 
 ### Dependency Updates

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope-ui/descope-list",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "exports": {
     ".": {
       "import": "./src/component/index.js"
@@ -15,12 +15,12 @@
   "devDependencies": {
     "@playwright/test": "1.38.1",
     "e2e-utils": "0.0.1",
-    "@descope-ui/descope-avatar": "0.0.19"
+    "@descope-ui/descope-avatar": "0.1.0"
   },
   "dependencies": {
-    "@descope-ui/common": "0.0.18",
-    "@descope-ui/theme-globals": "0.0.19",
-    "@descope-ui/descope-list-item": "0.0.1"
+    "@descope-ui/common": "0.1.0",
+    "@descope-ui/theme-globals": "0.0.20",
+    "@descope-ui/descope-list-item": "0.1.0"
   },
   "publishConfig": {
     "link-workspace-packages": false

package/src/component/ListClass.js

@@ -14,7 +14,10 @@ import { createBaseClass } from '@descope-ui/common/base-classes';
 
 export const componentName = getComponentName('list');
 
-class RawList extends createBaseClass({ componentName, baseSelector: '.wrapper' }) {
+class RawList extends createBaseClass({
+  componentName,
+  baseSelector: '.wrapper',
+}) {
   static get observedAttributes() {
     return ['variant', 'readonly'];
   }
@@ -61,7 +64,7 @@ class RawList extends createBaseClass({ componentName, baseSelector: '.wrapper'
         width: 100%;
       }
         `,
-      this
+      this,
     );
   }
 
@@ -89,7 +92,7 @@ class RawList extends createBaseClass({ componentName, baseSelector: '.wrapper'
       }
 
       const listItemVariant = this.variant === 'tiles' ? 'tile' : 'row';
-      listItem.setAttribute('variant', listItemVariant);
+      listItem?.setAttribute('variant', listItemVariant);
     });
   }
 
@@ -134,8 +137,14 @@ export const ListClass = compose(
       hostWidth: { selector: () => ':host', property: 'width' },
       maxHeight: { selector: () => ':host' },
       minHeight: {},
-      verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
-      horizontalPadding: [{ property: 'padding-left' }, { property: 'padding-right' }],
+      verticalPadding: [
+        { property: 'padding-top' },
+        { property: 'padding-bottom' },
+      ],
+      horizontalPadding: [
+        { property: 'padding-left' },
+        { property: 'padding-right' },
+      ],
       hostDirection: { selector: () => ':host', property: 'direction' },
       fontFamily: {},
       gap: {},
@@ -148,10 +157,22 @@ export const ListClass = compose(
 
       boxShadow: {},
       gridTemplateColumns: {},
-      maxItemsWidth: { selector: () => '::slotted(:not([slot]))', property: 'max-width' },
-      minItemsWidth: { selector: () => '::slotted(:not([slot]))', property: 'min-width' },
-      itemsHorizontalAlign: { selector: () => '::slotted(*)', property: 'justify-self' },
-      emptyStateTextColor: { selector: () => 'slot[name="empty-state"]', property: 'color' },
+      maxItemsWidth: {
+        selector: () => '::slotted(:not([slot]))',
+        property: 'max-width',
+      },
+      minItemsWidth: {
+        selector: () => '::slotted(:not([slot]))',
+        property: 'min-width',
+      },
+      itemsHorizontalAlign: {
+        selector: () => '::slotted(*)',
+        property: 'justify-self',
+      },
+      emptyStateTextColor: {
+        selector: () => 'slot[name="empty-state"]',
+        property: 'color',
+      },
       emptyStateTextFontFamily: {
         selector: () => 'slot[name="empty-state"]',
         property: 'font-family',
@@ -159,5 +180,5 @@ export const ListClass = compose(
     },
   }),
   draggableMixin,
-  componentNameValidationMixin
+  componentNameValidationMixin,
 )(RawList);