@c2n/details 0.0.6 → 0.0.7

package/dist/details.js

@@ -1,11 +1,12 @@
 import { accordionContext } from "./details-context.js";
 import { LitElement, html, nothing, unsafeCSS } from "lit";
 import { consume } from "@lit/context";
-import { customElement, property, query, state } from "lit/decorators.js";
+import { property, query, state } from "lit/decorators.js";
+import { customElement } from "@c2n/core/element-helper.js";
 import { classMap } from "lit/directives/class-map.js";
 import { redispatchEvent } from "@c2n/core/dom-helper.js";
 //#region src/details.scss?inline
-var details_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: flex;\n}\n\n.c2-details {\n  flex: 1;\n  align-self: stretch;\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  overflow: clip;\n  background: var(--c2-details--background,rgb(255, 255, 255));\n  box-shadow: var(--c2-details--box-shadow);\n  border-top: var(--c2-details--border-top,1px solid rgb(213, 213, 213));\n  border-right: var(--c2-details--border-right,1px solid rgb(213, 213, 213));\n  border-bottom: var(--c2-details--border-bottom,1px solid rgb(213, 213, 213));\n  border-left: var(--c2-details--border-left,1px solid rgb(213, 213, 213));\n  border-top-left-radius: var(--c2-details--border-top-left-radius,8px);\n  border-top-right-radius: var(--c2-details--border-top-right-radius,8px);\n  border-bottom-left-radius: var(--c2-details--border-bottom-left-radius,8px);\n  border-bottom-right-radius: var(--c2-details--border-bottom-right-radius,8px);\n}\n\nsummary {\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  cursor: pointer;\n  user-select: none;\n  padding-top: var(--c2-details__header--padding-top,12px);\n  padding-right: var(--c2-details__header--padding-right,16px);\n  padding-bottom: var(--c2-details__header--padding-bottom,12px);\n  padding-left: var(--c2-details__header--padding-left,16px);\n  background: var(--c2-details__header--background);\n  color: var(--c2-details__header--color);\n  font-weight: var(--c2-details__header--font-weight,500);\n  font-size: var(--c2-details__header--font-size);\n  transition: background var(--c2-details--transition-duration,250ms) cubic-bezier(0.2, 0, 0, 1), color var(--c2-details--transition-duration,250ms) cubic-bezier(0.2, 0, 0, 1);\n}\nsummary::-webkit-details-marker, summary::marker {\n  display: none;\n  content: \"\";\n}\nsummary:hover {\n  background: var(--c2-details__header__hover--background,var(--c2-details__header--background,rgb(248, 248, 248)));\n  color: var(--c2-details__header__hover--color,var(--c2-details__header--color));\n}\nsummary:focus-visible {\n  outline: var(--c2-details__header__focus--outline,2px solid rgba(2, 101, 220, 0.4));\n  outline-offset: var(--c2-details__header__focus--outline-offset,-2px);\n}\n\n.c2-details-summary-row {\n  display: flex;\n  align-items: center;\n  gap: var(--c2-details__header--gap,12px);\n  flex-direction: var(--c2-details__header--flex-direction,row);\n}\n\n.c2-details-summary-content {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n}\n\n.c2-details-icons {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  color: var(--c2-details__header__icon--color,rgb(109, 109, 109));\n}\n.c2-details-icons .default-icon,\n.c2-details-icons ::slotted(*) {\n  display: block;\n  width: var(--c2-details__header__icon--width,20px);\n  height: var(--c2-details__header__icon--height,20px);\n  transition: transform var(--c2-details--transition-duration,250ms) cubic-bezier(0.2, 0, 0, 1);\n}\n.c2-details-icons slot[name=expanded-icon] {\n  display: none;\n}\n\n.c2-details-header-content {\n  margin-top: var(--c2-details__header__content--margin-top,4px);\n  color: var(--c2-details__header__content--color,rgb(109, 109, 109));\n  font-size: var(--c2-details__header__content--font-size,13px);\n  font-weight: var(--c2-details__header__content--font-weight,400);\n  cursor: auto;\n}\n.c2-details-header-content[hidden] {\n  display: none;\n}\n\n.c2-details-content {\n  flex: none;\n  min-height: 0;\n  transition-property: none;\n  transition-duration: var(--c2-details--transition-duration,250ms);\n  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);\n}\n\n.c2-details-body {\n  padding-top: var(--c2-details__content--padding-top,4px);\n  padding-right: var(--c2-details__content--padding-right,var(--c2-details__header--padding-right,16px));\n  padding-bottom: var(--c2-details__content--padding-bottom,var(--c2-details__header--padding-bottom,12px));\n  padding-left: var(--c2-details__content--padding-left,var(--c2-details__header--padding-left,16px));\n  color: var(--c2-details__content--color);\n  border-top: var(--c2-details__content--border-top);\n}\n\n.c2-details[open] summary {\n  background: var(--c2-details__header__open--background,var(--c2-details__header--background));\n  color: var(--c2-details__header__open--color,var(--c2-details__header--color));\n}\n.c2-details[open] summary:hover {\n  background: var(--c2-details__header__hover--background,var(--c2-details__header__open--background,var(--c2-details__header--background,rgb(248, 248, 248))));\n}\n.c2-details[open] .c2-details-icons .default-icon,\n.c2-details[open] .c2-details-icons slot[name=icon]::slotted(*) {\n  transform: rotate(var(--c2-details__header__icon--rotate,180deg));\n}\n.c2-details[open] .c2-details-icons.has-expanded-icon slot[name=icon] {\n  display: none;\n}\n.c2-details[open] .c2-details-icons.has-expanded-icon slot[name=expanded-icon] {\n  display: contents;\n}\n\n:host([disabled]) summary {\n  cursor: default;\n  opacity: var(--c2-details__header__disabled--opacity,0.38);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  summary,\n  .c2-details-icons .default-icon,\n  .c2-details-icons ::slotted(*) {\n    transition: none;\n  }\n  .c2-details-content {\n    transition-duration: 0s;\n  }\n}";
+var details_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: flex;\n}\n\n.c2-details {\n  flex: 1;\n  align-self: stretch;\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  overflow: clip;\n  background: var(--c2-details--background,rgb(255, 255, 255));\n  box-shadow: var(--c2-details--box-shadow);\n  border-top: var(--c2-details--border-top,1px solid rgb(213, 213, 213));\n  border-right: var(--c2-details--border-right,1px solid rgb(213, 213, 213));\n  border-bottom: var(--c2-details--border-bottom,1px solid rgb(213, 213, 213));\n  border-left: var(--c2-details--border-left,1px solid rgb(213, 213, 213));\n  border-top-left-radius: var(--c2-details--border-top-left-radius,8px);\n  border-top-right-radius: var(--c2-details--border-top-right-radius,8px);\n  border-bottom-left-radius: var(--c2-details--border-bottom-left-radius,8px);\n  border-bottom-right-radius: var(--c2-details--border-bottom-right-radius,8px);\n}\n\nsummary {\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  cursor: pointer;\n  user-select: none;\n  padding-top: var(--c2-details__header--padding-top,12px);\n  padding-right: var(--c2-details__header--padding-right,16px);\n  padding-bottom: var(--c2-details__header--padding-bottom,12px);\n  padding-left: var(--c2-details__header--padding-left,16px);\n  background: var(--c2-details__header--background);\n  color: var(--c2-details__header--color);\n  font-weight: var(--c2-details__header--font-weight,500);\n  font-size: var(--c2-details__header--font-size);\n  transition: background var(--c2-details--transition-duration,250ms) cubic-bezier(0.2, 0, 0, 1), color var(--c2-details--transition-duration,250ms) cubic-bezier(0.2, 0, 0, 1);\n}\nsummary::-webkit-details-marker, summary::marker {\n  display: none;\n  content: \"\";\n}\nsummary:hover {\n  background: var(--c2-details__header__hover--background,var(--c2-details__header--background,rgb(248, 248, 248)));\n  color: var(--c2-details__header__hover--color,var(--c2-details__header--color));\n}\nsummary:focus-visible {\n  outline: var(--c2-details__header__focus--outline,2px solid rgba(2, 101, 220, 0.4));\n  outline-offset: var(--c2-details__header__focus--outline-offset,-2px);\n}\n\n.c2-details-summary-row {\n  display: flex;\n  align-items: center;\n  gap: var(--c2-details__header--gap,12px);\n  flex-direction: var(--c2-details__header--flex-direction,row);\n}\n\n.c2-details-summary-content {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n}\n\n.c2-details-icons {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  color: var(--c2-details__header__icon--color,rgb(109, 109, 109));\n}\n.c2-details-icons .default-icon,\n.c2-details-icons ::slotted(*) {\n  display: block;\n  width: var(--c2-details__header__icon--width,20px);\n  height: var(--c2-details__header__icon--height,20px);\n  transform: rotate(var(--c2-details__header__icon--rotate-collapsed,0deg));\n  transition: transform var(--c2-details--transition-duration,250ms) cubic-bezier(0.2, 0, 0, 1);\n}\n.c2-details-icons slot[name=expanded-icon] {\n  display: none;\n}\n\n.c2-details-header-content {\n  margin-top: var(--c2-details__header__content--margin-top,4px);\n  color: var(--c2-details__header__content--color,rgb(109, 109, 109));\n  font-size: var(--c2-details__header__content--font-size,13px);\n  font-weight: var(--c2-details__header__content--font-weight,400);\n  cursor: auto;\n}\n.c2-details-header-content[hidden] {\n  display: none;\n}\n\n.c2-details-content {\n  flex: none;\n  min-height: 0;\n  transition-property: none;\n  transition-duration: var(--c2-details--transition-duration,250ms);\n  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);\n}\n\n.c2-details:not([open]) > .c2-details-content {\n  display: none;\n}\n\n.c2-details-body {\n  padding-top: var(--c2-details__content--padding-top,4px);\n  padding-right: var(--c2-details__content--padding-right,var(--c2-details__header--padding-right,16px));\n  padding-bottom: var(--c2-details__content--padding-bottom,var(--c2-details__header--padding-bottom,12px));\n  padding-left: var(--c2-details__content--padding-left,var(--c2-details__header--padding-left,16px));\n  color: var(--c2-details__content--color);\n  border-top: var(--c2-details__content--border-top);\n}\n\n.c2-details[open] summary {\n  background: var(--c2-details__header__open--background,var(--c2-details__header--background));\n  color: var(--c2-details__header__open--color,var(--c2-details__header--color));\n}\n.c2-details[open] summary:hover {\n  background: var(--c2-details__header__hover--background,var(--c2-details__header__open--background,var(--c2-details__header--background,rgb(248, 248, 248))));\n}\n.c2-details[open] .c2-details-icons .default-icon,\n.c2-details[open] .c2-details-icons slot[name=icon]::slotted(*) {\n  transform: rotate(var(--c2-details__header__icon--rotate,180deg));\n}\n.c2-details[open] .c2-details-icons.has-expanded-icon slot[name=icon] {\n  display: none;\n}\n.c2-details[open] .c2-details-icons.has-expanded-icon slot[name=expanded-icon] {\n  display: contents;\n}\n\n:host([disabled]) summary {\n  cursor: default;\n  opacity: var(--c2-details__header__disabled--opacity,0.38);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  summary,\n  .c2-details-icons .default-icon,\n  .c2-details-icons ::slotted(*) {\n    transition: none;\n  }\n  .c2-details-content {\n    transition-duration: 0s;\n  }\n}";
 //#endregion
 //#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
@@ -119,7 +120,7 @@ var Details = class Details extends LitElement {
 		if (this.disabled && (event.key === "Enter" || event.key === " ")) event.preventDefault();
 	}
 	handleDetailsToggle(event) {
-		this.expanded = this.detailsElement.open;
+		if (!this.closing) this.expanded = this.detailsElement.open;
 		redispatchEvent(this, event);
 	}
 	/** Opens or closes the panel. */

package/package.json

@@ -1,22 +1,34 @@
 {
   "name": "@c2n/details",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "type": "module",
   "main": "dist/details.js",
   "exports": {
     ".": {
-      "default": "./dist/details.js",
-      "types": "./types/src/details.d.ts"
+      "types": "./types/src/details.d.ts",
+      "default": "./dist/details.js"
     },
     "./details-context.js": {
-      "default": "./dist/details-context.js",
-      "types": "./types/src/details-context.d.ts"
+      "types": "./types/src/details-context.d.ts",
+      "default": "./dist/details-context.js"
+    },
+    "./react": {
+      "types": "./react.d.ts",
+      "default": "./react.js"
+    },
+    "./vue": {
+      "types": "./vue.d.ts",
+      "default": "./vue.js"
     },
     "./custom-elements.json": "./custom-elements.json"
   },
   "files": [
     "dist",
-    "types"
+    "types",
+    "react.d.ts",
+    "react.js",
+    "vue.d.ts",
+    "vue.js"
   ],
   "keywords": [
     "details",
@@ -52,7 +64,7 @@
     }
   },
   "dependencies": {
-    "@c2n/core": "0.0.6",
+    "@c2n/core": "0.0.7",
     "@lit/context": "1.1.6",
     "lit": "3.3.3"
   },
@@ -60,5 +72,5 @@
     "@c2n/config": "*"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "2921054bc75299da66dad11c1e374246ff88a51e"
+  "gitHead": "c8db398a27f7cd417d665fdf5da455fee2d4e910"
 }

package/react.d.ts

@@ -0,0 +1,24 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// JSX types for the custom elements of @c2n/details. Import once, anywhere in the program:
+//
+//     import '@c2n/details/react'
+//
+// Register the elements at module scope before React renders, or React writes an object prop as an
+// attribute and it stringifies.
+
+import type { DetailedHTMLProps, HTMLAttributes } from 'react'
+import type { Details } from '@c2n/details'
+
+/** Standard React host-element attributes plus the element's own public properties. */
+type C2Props<T> = DetailedHTMLProps<HTMLAttributes<T>, T> & Partial<Omit<T, keyof HTMLElement>>
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'c2-details': C2Props<Details>
+    }
+  }
+}
+
+export {}

package/react.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}

package/types/src/details.d.ts

@@ -1,4 +1,13 @@
 import { LitElement, type PropertyValues } from 'lit';
+import type { TypedAddEventListener, TypedRemoveEventListener } from '@c2n/core/event-helper.js';
+/** Events fired by {@link Details}, keyed for `addEventListener`. */
+export interface DetailsEventMap {
+    toggle: ToggleEvent;
+}
+export interface Details {
+    addEventListener: TypedAddEventListener<Details, DetailsEventMap>;
+    removeEventListener: TypedRemoveEventListener<Details, DetailsEventMap>;
+}
 /**
  * Collapsible disclosure built on native `<details>` / `<summary>`, so keyboard access, screen-reader semantics and
  * find-in-page auto-expand come from the browser. Panels that share a `name` form an exclusive accordion. Open and
@@ -44,7 +53,8 @@ import { LitElement, type PropertyValues } from 'lit';
  *
  * @cssproperty {pixel} [--c2-details__header__icon--width=20px]
  * @cssproperty {pixel} [--c2-details__header__icon--height=20px]
- * @cssproperty {pixel} [--c2-details__header__icon--rotate=180deg]
+ * @cssproperty {pixel} [--c2-details__header__icon--rotate=180deg] - Icon angle while open.
+ * @cssproperty {pixel} [--c2-details__header__icon--rotate-collapsed=0deg] - Icon angle while closed. `-90deg` with the default chevron gives the nav idiom: right when closed, down when open.
  * @cssproperty {color} [--c2-details__header__icon--color=rgb(109, 109, 109)]
  *
  * @cssproperty {pixel} [--c2-details__header__content--margin-top=4px]

package/types/src/details.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"details.d.ts","sourceRoot":"","sources":["../../src/details.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAQ/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,0BAAoB;IAExB,SAAS,CAAC,cAAc,EAAG,kBAAkB,CAAA;IACjC,OAAO,CAAC,cAAc,CAAc;IACvC,OAAO,CAAC,WAAW,CAAc;IAE5D,iEAAiE;IACrB,QAAQ,UAAQ;IAE5D,kDAAkD;IACtC,KAAK,SAAK;IAEtB;;;OAGG;IACS,IAAI,EAAE,MAAM,GAAG,SAAS,CAAY;IAEhD,wEAAwE;IACM,iBAAiB,UAAQ;IAEvG,kEAAkE;IACtB,QAAQ,UAAQ;IAEnD,OAAO,CAAC,gBAAgB,CAAQ;IAChC,OAAO,CAAC,eAAe,CAAQ;IACxC,yHAAyH;IAChH,OAAO,CAAC,OAAO,CAAQ;IAEhC,OAAO,CAAC,iBAAiB,CAAkB;IAG3C,OAAO,CAAC,SAAS,CAA8B;IAEtC,oBAAoB;IAOpB,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAOxC,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAO9C,OAAO,CAAC,uBAAuB;IAM/B;;;;OAIG;IACH,OAAO,CAAC,cAAc;IAmCtB,sGAAsG;IAC7F,YAAY;IAIrB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,kBAAkB;IAe1B,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,mBAAmB;IAK3B,iCAAiC;IACjC,MAAM,CAAC,KAAK,CAAC,EAAE,OAAO;IAKtB,SAAS,CAAC,UAAU;IAaX,MAAM;CA0BhB;AAqBD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,OAAO,CAAA;KACtB;CACF"}
+{"version":3,"file":"details.d.ts","sourceRoot":"","sources":["../../src/details.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAK/E,OAAO,KAAK,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAA;AAKhG,qEAAqE;AACrE,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,WAAW,CAAA;CACpB;AAED,MAAM,WAAW,OAAO;IACtB,gBAAgB,EAAE,qBAAqB,CAAC,OAAO,EAAE,eAAe,CAAC,CAAA;IACjE,mBAAmB,EAAE,wBAAwB,CAAC,OAAO,EAAE,eAAe,CAAC,CAAA;CACxE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,0BAAoB;IAExB,SAAS,CAAC,cAAc,EAAG,kBAAkB,CAAA;IACjC,OAAO,CAAC,cAAc,CAAc;IACvC,OAAO,CAAC,WAAW,CAAc;IAE5D,iEAAiE;IACrB,QAAQ,UAAQ;IAE5D,kDAAkD;IACtC,KAAK,SAAK;IAEtB;;;OAGG;IACS,IAAI,EAAE,MAAM,GAAG,SAAS,CAAY;IAEhD,wEAAwE;IACM,iBAAiB,UAAQ;IAEvG,kEAAkE;IACtB,QAAQ,UAAQ;IAEnD,OAAO,CAAC,gBAAgB,CAAQ;IAChC,OAAO,CAAC,eAAe,CAAQ;IACxC,yHAAyH;IAChH,OAAO,CAAC,OAAO,CAAQ;IAEhC,OAAO,CAAC,iBAAiB,CAAkB;IAG3C,OAAO,CAAC,SAAS,CAA8B;IAEtC,oBAAoB;IAOpB,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAOxC,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAO9C,OAAO,CAAC,uBAAuB;IAM/B;;;;OAIG;IACH,OAAO,CAAC,cAAc;IAmCtB,sGAAsG;IAC7F,YAAY;IAIrB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,kBAAkB;IAe1B,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,mBAAmB;IAM3B,iCAAiC;IACjC,MAAM,CAAC,KAAK,CAAC,EAAE,OAAO;IAKtB,SAAS,CAAC,UAAU;IAaX,MAAM;CA0BhB;AAqBD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,OAAO,CAAA;KACtB;CACF"}

package/vue.d.ts

@@ -0,0 +1,34 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// Vue template types for the custom elements of @c2n/details. Import once, anywhere in the program:
+//
+//     import '@c2n/details/vue'
+//
+// Tell the compiler about the tags as well, or every c2-* tag is resolved as a Vue component and renders
+// nothing: template.compilerOptions.isCustomElement = (tag) => tag.startsWith('c2-') in vite.config.ts.
+
+import type { DefineComponent, HTMLAttributes } from 'vue'
+import type { Details, DetailsEventMap } from '@c2n/details'
+
+/** The element's own public properties, plus every attribute Vue understands on a host element. */
+type C2Props<T> = Partial<Omit<T, keyof HTMLElement>> & HTMLAttributes
+
+declare module 'vue' {
+  interface GlobalComponents {
+    'c2-details': DefineComponent<
+      C2Props<Details> & {
+        'title-not-clickable'?: unknown
+        onToggle?: (event: DetailsEventMap['toggle']) => void
+      }
+    >
+  }
+}
+
+declare module '@vue/runtime-dom' {
+  interface HTMLAttributes {
+    /** Vue's own definition omits it, and slotting a plain element into a component needs it. */
+    slot?: string
+  }
+}
+
+export {}

package/vue.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}