@cypress-design/vue-accordion 0.1.5 → 0.1.6

package/Accordion.vue

@@ -1,9 +1,9 @@
 <template>
-  <details ref="details">
+  <details ref="$details">
     <summary
       :class="[CssClasses.summary, headingClassName ?? CssClasses.summaryColor]"
     >
-      <div :class="CssClasses.summaryDiv">
+      <span :class="CssClasses.summaryDiv">
         <span :class="CssClasses.icon">
           <slot name="iconEl">
             <Icon />
@@ -13,16 +13,16 @@
           v-if="(props.icon || slots.iconEl) && separator"
           :class="CssClasses.separator"
         />
-        <div class="flex-grow pr-16px">
-          <div
+        <span class="flex-grow pr-16px">
+          <span
             :class="[
               titleClassName ? titleClassName : CssClasses.summaryTitleColor,
               CssClasses.summaryTitle,
             ]"
           >
             {{ title }}
-          </div>
-          <div
+          </span>
+          <span
             v-if="description"
             :class="[
               CssClasses.summaryDescription,
@@ -30,16 +30,16 @@
             ]"
           >
             {{ description }}
-          </div>
-        </div>
+          </span>
+        </span>
         <IconChevronDownSmall
           strokeColor="gray-300"
           class="open:icon-dark-gray-500"
           :class="CssClasses.chevron"
         />
-      </div>
+      </span>
     </summary>
-    <div ref="content" :class="CssClasses.contentWrapper">
+    <div ref="$content" :class="CssClasses.contentWrapper">
       <!-- @slot expandable body of the collapsible accordion -->
       <slot v-if="fullWidthContent" />
       <div v-else :class="CssClasses.content">
@@ -101,12 +101,12 @@ const props = defineProps<{
   fullWidthContent?: boolean
 }>()
 
-const content = ref(null)
-const details = ref(null)
+const $content = ref(null)
+const $details = ref(null)
 
 onMounted(function () {
-  if (details.value && content.value) {
-    new DetailsAnimation(details.value, content.value)
+  if ($details.value && $content.value) {
+    new DetailsAnimation($details.value, $content.value)
   }
 })
 

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @cypress-design/vue-accordion
 
+## 0.1.6
+
+### Patch Changes
+
+- [`34a646b`](https://github.com/cypress-io/cypress-design/commit/34a646bbb5ae613d3ede0f63ac62c8a6bf31dd82) Thanks [@elevatebart](https://github.com/elevatebart)! - replace div with spans inside summary for html5 validation
+
 ## 0.1.5
 
 ### Patch Changes

package/dist/index.es.mjs

@@ -1,8 +1,8 @@
-import { h as g, defineComponent as b, useSlots as w, ref as x, onMounted as N, openBlock as p, createElementBlock as y, createElementVNode as i, normalizeClass as s, unref as o, renderSlot as C, createVNode as h, createCommentVNode as k, toDisplayString as v } from "vue";
-import { DetailsAnimation as D } from "@cypress-design/details-animation";
-import * as z from "@cypress-design/icon-registry";
-import { ICON_COLOR_PROP_NAMES as E } from "@cypress-design/icon-registry";
-const t = {
+import { h as v, defineComponent as b, useSlots as w, ref as x, onMounted as N, openBlock as p, createElementBlock as y, createElementVNode as i, normalizeClass as s, unref as o, renderSlot as C, createVNode as h, createCommentVNode as k, toDisplayString as g } from "vue";
+import { DetailsAnimation as $ } from "@cypress-design/details-animation";
+import * as D from "@cypress-design/icon-registry";
+import { ICON_COLOR_PROP_NAMES as z } from "@cypress-design/icon-registry";
+const n = {
   summary: "details-none card open:rounded-b-none",
   summaryDiv: "flex flex-row py-12px px-24px flex-nowrap items-center min-h-63px",
   summaryColor: "bg-white",
@@ -15,15 +15,15 @@ const t = {
   chevron: "flex-shrink-0 transition transform rotate-0 open:rotate-180",
   contentWrapper: "border border-gray-100 rounded-b-md border-t-0",
   content: "px-24px py-16px"
-}, O = ({
+}, E = ({
   body: e,
-  compiledClasses: n,
+  compiledClasses: t,
   size: r,
   class: l,
   interactiveColorsOnGroup: d,
   ...u
 }) => {
-  const c = Object.keys(u).reduce((m, a) => (E.includes(a) || (m[a] = u[a]), m), {}), f = {
+  const c = Object.keys(u).reduce((m, a) => (!z.includes(a) && a !== "name" && (m[a] = u[a]), m), {}), f = {
     width: r,
     height: r,
     viewBox: `0 0 ${r} ${r}`,
@@ -31,17 +31,17 @@ const t = {
     innerHTML: e,
     ...c
   };
-  return n.length && (f.class = n.join(" ")), f;
-}, $ = (e) => {
-  const { sizeWithDefault: n, compiledClasses: r } = z.getComponentAttributes({ ...e, availableSizes: ["8", "16"] }), l = {
+  return t.length && (f.class = t.join(" ")), f;
+}, O = (e) => {
+  const { sizeWithDefault: t, compiledClasses: r } = D.getComponentAttributes({ ...e, availableSizes: ["8", "16"] }), l = {
     8: '<path d="m1 2.5 3 3 3-3" stroke="currentColor" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
     16: '<path d="m4 6 4 4 4-4" stroke="currentColor" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'
-  }[n];
+  }[t];
   if (!l)
-    throw Error(`Icon "chevron-down-small" is not available in size ${n}`);
-  return g("svg", O({
+    throw Error(`Icon "chevron-down-small" is not available in size ${t}`);
+  return v("svg", E({
     ...e,
-    size: n,
+    size: t,
     body: l,
     compiledClasses: r
   }));
@@ -58,63 +58,63 @@ const t = {
     fullWidthContent: { type: Boolean }
   },
   setup(e) {
-    const n = e, r = w(), l = x(null), d = x(null);
+    const t = e, r = w(), l = x(null), d = x(null);
     N(function() {
-      d.value && l.value && new D(d.value, l.value);
+      d.value && l.value && new $(d.value, l.value);
     });
-    const u = n.icon;
+    const u = t.icon;
     return (c, f) => {
       var m, a;
       return p(), y("details", {
-        ref_key: "details",
+        ref_key: "$details",
         ref: d
       }, [
         i("summary", {
-          class: s([o(t).summary, (m = e.headingClassName) != null ? m : o(t).summaryColor])
+          class: s([o(n).summary, (m = e.headingClassName) != null ? m : o(n).summaryColor])
         }, [
-          i("div", {
-            class: s(o(t).summaryDiv)
+          i("span", {
+            class: s(o(n).summaryDiv)
           }, [
             i("span", {
-              class: s(o(t).icon)
+              class: s(o(n).icon)
             }, [
               C(c.$slots, "iconEl", {}, () => [
                 h(o(u))
               ])
             ], 2),
-            (n.icon || o(r).iconEl) && e.separator ? (p(), y("hr", {
+            (t.icon || o(r).iconEl) && e.separator ? (p(), y("hr", {
               key: 0,
-              class: s(o(t).separator)
+              class: s(o(n).separator)
             }, null, 2)) : k("", !0),
-            i("div", B, [
-              i("div", {
+            i("span", B, [
+              i("span", {
                 class: s([
-                  e.titleClassName ? e.titleClassName : o(t).summaryTitleColor,
-                  o(t).summaryTitle
+                  e.titleClassName ? e.titleClassName : o(n).summaryTitleColor,
+                  o(n).summaryTitle
                 ])
-              }, v(e.title), 3),
-              e.description ? (p(), y("div", {
+              }, g(e.title), 3),
+              e.description ? (p(), y("span", {
                 key: 0,
                 class: s([
-                  o(t).summaryDescription,
-                  (a = e.descriptionClassName) != null ? a : o(t).summaryDescriptionColor
+                  o(n).summaryDescription,
+                  (a = e.descriptionClassName) != null ? a : o(n).summaryDescriptionColor
                 ])
-              }, v(e.description), 3)) : k("", !0)
+              }, g(e.description), 3)) : k("", !0)
             ]),
-            h(o($), {
+            h(o(O), {
               strokeColor: "gray-300",
-              class: s(["open:icon-dark-gray-500", o(t).chevron])
+              class: s(["open:icon-dark-gray-500", o(n).chevron])
             }, null, 8, ["class"])
           ], 2)
         ], 2),
         i("div", {
-          ref_key: "content",
+          ref_key: "$content",
           ref: l,
-          class: s(o(t).contentWrapper)
+          class: s(o(n).contentWrapper)
         }, [
           e.fullWidthContent ? C(c.$slots, "default", { key: 0 }) : (p(), y("div", {
             key: 1,
-            class: s(o(t).content)
+            class: s(o(n).content)
           }, [
             C(c.$slots, "default")
           ], 2))