@descope-ui/descope-list-item 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# Changelog
+
+This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
+
+## 0.0.1 (2025-07-21)
+
+### Dependency Updates
+
+* `e2e-utils` updated to version `0.0.1`
+* `@descope-ui/common` updated to version `0.0.18`
+* `@descope-ui/theme-globals` updated to version `0.0.19`
+# Changelog

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@descope-ui/descope-list-item",
+  "version": "0.0.1",
+  "exports": {
+    ".": {
+      "import": "./src/component/index.js"
+    },
+    "./theme": {
+      "import": "./src/theme.js"
+    },
+    "./class": {
+      "import": "./src/component/ListItemClass.js"
+    }
+  },
+  "devDependencies": {
+    "@playwright/test": "1.38.1",
+    "e2e-utils": "0.0.1"
+  },
+  "dependencies": {
+    "@descope-ui/common": "0.0.18",
+    "@descope-ui/theme-globals": "0.0.19"
+  },
+  "publishConfig": {
+    "link-workspace-packages": false
+  },
+  "scripts": {
+    "test": "echo 'No tests defined' && exit 0",
+    "test:e2e": "echo 'No e2e tests defined' && exit 0"
+  }
+}

package/project.json

@@ -0,0 +1,17 @@
+{
+  "name": "@descope-ui/descope-list-item",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/web-components/components/descope-list-item/src",
+  "projectType": "library",
+  "targets": {
+    "version": {
+      "executor": "@jscutlery/semver:version",
+      "options": {
+        "trackDeps": true,
+        "push": false,
+        "preset": "conventional"
+      }
+    }
+  },
+  "tags": []
+}

package/src/component/ListItemClass.js

@@ -0,0 +1,62 @@
+import {
+  createStyleMixin,
+  draggableMixin,
+  componentNameValidationMixin,
+  activeableMixin,
+} from '@descope-ui/common/components-mixins';
+import { compose } from '@descope-ui/common/utils';
+import { getComponentName } from '@descope-ui/common/components-helpers';
+import { injectStyle } from '@descope-ui/common/components-helpers';
+import { createBaseClass } from '@descope-ui/common/base-classes';
+
+export const componentName = getComponentName('list-item');
+
+const customMixin = (superclass) =>
+  class ListItemMixinClass extends superclass {
+    constructor() {
+      super();
+
+      this.attachShadow({ mode: 'open' }).innerHTML = `
+      <slot></slot>
+    `;
+
+      injectStyle(
+        `
+      slot {
+          width: 100%;
+          display: flex;
+          overflow: hidden;
+          box-sizing: border-box;
+      }
+      :host {
+        display: block;
+      }
+        `,
+        this
+      );
+    }
+  };
+
+export const ListItemClass = compose(
+  createStyleMixin({
+    mappings: {
+      padding: {},
+      backgroundColor: {},
+      borderColor: {},
+      borderStyle: {},
+      borderWidth: {},
+      borderRadius: {},
+      outline: {},
+      cursor: {},
+      gap: {},
+      maxWidth: { selector: () => ':host' },
+      alignItems: {},
+      flexDirection: {},
+      transition: {},
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin,
+  customMixin,
+  activeableMixin
+)(createBaseClass({ componentName, baseSelector: 'slot' }));

package/src/component/index.js

@@ -0,0 +1,5 @@
+import { componentName, ListItemClass } from './ListItemClass';
+
+customElements.define(componentName, ListItemClass);
+
+export { ListItemClass, componentName };

package/src/theme.js

@@ -0,0 +1,41 @@
+import globals from '@descope-ui/theme-globals';
+import { getThemeRefs } from '@descope-ui/common/theme-helpers';
+import { ListItemClass } from './component/ListItemClass';
+
+const globalRefs = getThemeRefs(globals);
+
+export const vars = ListItemClass.cssVarList;
+
+const listItem = {
+  [vars.backgroundColor]: globalRefs.colors.surface.main,
+  [vars.padding]: globalRefs.spacing.lg,
+  [vars.gap]: globalRefs.spacing.md,
+  [vars.borderStyle]: 'solid',
+  [vars.borderWidth]: globalRefs.border.xs,
+  [vars.borderColor]: globalRefs.colors.surface.main,
+  [vars.borderRadius]: globalRefs.radius.sm,
+  [vars.cursor]: 'pointer',
+  [vars.alignItems]: 'center',
+  [vars.flexDirection]: 'row',
+  [vars.transition]: 'border-color 0.2s, background-color 0.2s',
+
+  variant: {
+    tile: {
+      [vars.alignItems]: 'flex-start',
+      [vars.flexDirection]: 'column',
+      [vars.borderColor]: globalRefs.colors.surface.light,
+    },
+  },
+
+  _hover: {
+    [vars.backgroundColor]: globalRefs.colors.surface.highlight,
+  },
+
+  _active: {
+    [vars.backgroundColor]: globalRefs.colors.surface.main,
+    [vars.borderColor]: globalRefs.colors.primary.light,
+    [vars.outline]: `1px solid ${globalRefs.colors.primary.light}`,
+  },
+};
+
+export default listItem;