@everchron/ec-shards 8.9.1 → 8.9.2

package/dist/ec-shards.js

@@ -7466,6 +7466,11 @@ const Iu = {
       type: Boolean,
       default: !1
     },
+    /** Renders the list item in a condensed variant. Note: this is reducing paddings inside the items, not reducing the font size (which is done by the `small` prop). */
+    condensed: {
+      type: Boolean,
+      default: !1
+    },
     /** Expands the list item identifer and content areas to 100% width, which makes the content area wrap. This should be used for content that is expected to be very long. */
     full: {
       type: Boolean,
@@ -7520,7 +7525,8 @@ const Iu = {
   data() {
     return {
       isVisible: this.visible,
-      expandId: ""
+      expandId: "",
+      definitionId: ""
     };
   },
   computed: {
@@ -7546,12 +7552,9 @@ const Iu = {
     }
   },
   created() {
-    this.expandId = this.generateUniqueId();
+    this.expandId = this.generateUniqueId(), this.definitionId = this.generateUniqueId();
   }
-}, $u = {
-  key: 0,
-  class: "ecs-data-list-identifier"
-}, Eu = ["aria-busy"], Pu = ["aria-valuenow"], Tu = ["id", "aria-hidden"];
+}, $u = ["id"], Eu = ["aria-busy", "aria-labelledby"], Pu = ["aria-valuenow"], Tu = ["id", "aria-hidden"];
 function Mu(e, s, t, a, n, i) {
   const r = p("ecs-button-more"), c = p("ecs-skeleton-loader");
   return o(), l("div", null, [
@@ -7561,11 +7564,16 @@ function Mu(e, s, t, a, n, i) {
         t.full ? "ecs-data-list-item-full" : "",
         t.plain ? "plain" : "filled",
         t.indent ? "indent" : "",
+        t.condensed ? "condensed" : "",
         t.plain && t.bordered ? "bordered" : ""
       ]]),
       role: "listitem"
     }, [
-      i.hasIdentifier ? (o(), l("div", $u, [
+      i.hasIdentifier ? (o(), l("div", {
+        key: 0,
+        id: n.definitionId,
+        class: "ecs-data-list-identifier"
+      }, [
         D(x(t.identifier) + " ", 1),
         e.$slots.collapse ? (o(), y(r, {
           key: 0,
@@ -7576,14 +7584,16 @@ function Mu(e, s, t, a, n, i) {
           "aria-expanded": n.isVisible ? "true" : "false",
           onClick: i.toggleCollapse
         }, null, 8, ["active", "aria-controls", "aria-expanded", "onClick"])) : u("", !0)
-      ])) : u("", !0),
+      ], 8, $u)) : u("", !0),
       f("div", {
         class: v(["ecs-data-list-data", [
           t.escape ? "ecs-data-list-data-escape" : "",
           t.error ? "ecs-data-list-data-error" : "",
           i.typeClass
         ]]),
-        "aria-busy": t.loading || null
+        "aria-busy": t.loading || null,
+        role: "definition",
+        "aria-labelledby": n.definitionId
       }, [
         t.loading ? (o(), y(c, {
           key: 1,
@@ -7610,7 +7620,7 @@ function Mu(e, s, t, a, n, i) {
     ], 10, Tu)) : u("", !0)
   ]);
 }
-const Ly = /* @__PURE__ */ _(Iu, [["render", Mu], ["__scopeId", "data-v-f9d63974"]]);
+const Ly = /* @__PURE__ */ _(Iu, [["render", Mu], ["__scopeId", "data-v-99c893a3"]]);
 const Lu = {
   name: "ecs-dialog",
   emits: ["toggled", "cancel"],