@c2n/details 0.0.11 → 0.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/details.js +5 -5
  2. package/package.json +3 -3
  3. package/react.d.ts +9 -1
  4. package/types/src/details.d.ts +0 -2
  5. package/types/src/details.d.ts.map +1 -1
package/dist/details.js CHANGED
@@ -4,7 +4,7 @@ import { consume } from "@lit/context";
4
4
  import { property, query, state } from "lit/decorators.js";
5
5
  import { customElement } from "@c2n/core/element-helper.js";
6
6
  import { classMap } from "lit/directives/class-map.js";
7
- import { redispatchEvent } from "@c2n/core/dom-helper.js";
7
+ import { hasSlottedContent, redispatchEvent } from "@c2n/core/dom-helper.js";
8
8
  //#region src/details.scss?inline
9
9
  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}";
10
10
  //#endregion
@@ -40,6 +40,10 @@ var Details = class Details extends LitElement {
40
40
  this.closing = false;
41
41
  }
42
42
  willUpdate(changed) {
43
+ if (!this.hasUpdated) {
44
+ this.hasHeaderContent = hasSlottedContent(this, "header-content");
45
+ this.hasExpandedIcon = hasSlottedContent(this, "expanded-icon");
46
+ }
43
47
  if (changed.has("expanded") && this.hasUpdated) {
44
48
  if (this.expanded) this.closing = false;
45
49
  else if (changed.get("expanded")) this.closing = true;
@@ -92,10 +96,6 @@ var Details = class Details extends LitElement {
92
96
  if (!open) this.closing = false;
93
97
  }).catch(() => {});
94
98
  }
95
- /** `slotchange` does not fire for server-rendered slots, so read them once after the first render. */
96
- firstUpdated() {
97
- for (const slot of this.renderRoot.querySelectorAll("slot")) this.updateSlot(slot);
98
- }
99
99
  handleSlotChange(event) {
100
100
  this.updateSlot(event.target);
101
101
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@c2n/details",
3
- "version": "0.0.11",
3
+ "version": "0.0.12",
4
4
  "type": "module",
5
5
  "main": "dist/details.js",
6
6
  "exports": {
@@ -64,7 +64,7 @@
64
64
  }
65
65
  },
66
66
  "dependencies": {
67
- "@c2n/core": "0.0.11",
67
+ "@c2n/core": "0.0.12",
68
68
  "@lit/context": "1.1.6",
69
69
  "lit": "3.3.3"
70
70
  },
@@ -72,5 +72,5 @@
72
72
  "@c2n/config": "*"
73
73
  },
74
74
  "customElements": "custom-elements.json",
75
- "gitHead": "bf962fba5e49a0ac7555a082584e262949d323a5"
75
+ "gitHead": "43e38b42ac221ffeef99a773c42dd3356961d26a"
76
76
  }
package/react.d.ts CHANGED
@@ -6,17 +6,25 @@
6
6
  //
7
7
  // Register the elements at module scope before React renders, or React writes an object prop as an
8
8
  // attribute and it stringifies.
9
+ //
10
+ // On a server-rendered page (Next.js, React Router SSR) write a camelCase property by its kebab-case attribute
11
+ // name ('row-key', not rowKey): the server emits props verbatim, HTML lowercases them, and hydration does not
12
+ // set properties. Those names are listed next to the properties below.
9
13
 
10
14
  import type { DetailedHTMLProps, HTMLAttributes } from 'react'
11
15
  import type { Details } from '@c2n/details'
12
16
 
13
17
  /** Standard React host-element attributes plus the element's own public properties. */
14
18
  type C2Props<T> = DetailedHTMLProps<HTMLAttributes<T>, T> & Partial<Omit<T, keyof HTMLElement>>
19
+ /** What React writes to a custom element's attribute: true becomes the empty string, false removes it. */
20
+ type Attribute = string | number | boolean
15
21
 
16
22
  declare module 'react' {
17
23
  namespace JSX {
18
24
  interface IntrinsicElements {
19
- 'c2-details': C2Props<Details>
25
+ 'c2-details': C2Props<Details> & {
26
+ 'title-not-clickable'?: Attribute
27
+ }
20
28
  }
21
29
  }
22
30
  }
package/types/src/details.d.ts CHANGED
@@ -111,8 +111,6 @@ export declare class Details extends LitElement {
111
111
  * and `prefers-reduced-motion` both apply. Reversing mid-flight starts from the current rendered height.
112
112
  */
113
113
  private animateContent;
114
- /** `slotchange` does not fire for server-rendered slots, so read them once after the first render. */
115
- firstUpdated(): void;
116
114
  private handleSlotChange;
117
115
  private updateSlot;
118
116
  private handleSummaryClick;
package/types/src/details.d.ts.map CHANGED
@@ -1 +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;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;IAatB,SAAS,CAAC,UAAU;IAaX,MAAM;CA0BhB;AAqBD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,OAAO,CAAA;KACtB;CACF"}
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;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;IAaxC,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAO9C,OAAO,CAAC,uBAAuB;IAM/B;;;;OAIG;IACH,OAAO,CAAC,cAAc;IAmCtB,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;IAatB,SAAS,CAAC,UAAU;IAaX,MAAM;CA0BhB;AAqBD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,OAAO,CAAA;KACtB;CACF"}