@gcforms/editor 1.0.19 → 1.0.20

package/CHANGELOG.md

@@ -5,6 +5,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.0.20] - 2026-08-19
+
+- Updste collapsible / details extension styles
+
 ## [1.0.19] - 2026-08-17
 
 - Add collapsible extension

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gcforms/editor",
-  "version": "1.0.19",
+  "version": "1.0.20",
   "author": "Canadian Digital Service",
   "license": "MIT",
   "publishConfig": {

package/src/i18n/en.json

@@ -23,6 +23,6 @@
   "tooltipOutdent": "Outdent",
   "indent": "Indent",
   "outdent": "Outdent",
-  "tooltipInsertCollapsible": "Insert collapsible container",
+  "tooltipInsertCollapsible": "Details component",
   "insertCollapsible": "Insert collapsible container"
 }

package/src/i18n/fr.json

@@ -23,6 +23,6 @@
   "tooltipOutdent": "Suppression d'indentation",
   "indent": "Indentation",
   "outdent": "Suppression d'indentation",
-  "tooltipInsertCollapsible": "Insérer un conteneur réductible",
+  "tooltipInsertCollapsible": "Composant détails",
   "insertCollapsible": "Insérer un conteneur réductible"
 }

package/src/plugins/CollapsibleExtension/Collapsible.css

@@ -8,19 +8,20 @@
  */
 
 .Collapsible__container {
-  background: #fcfcfc;
-  border: 1px solid #eee;
-  border-radius: 10px;
   margin-bottom: 8px;
 }
 
 .Collapsible__title {
   cursor: pointer;
-  padding: 5px 5px 5px 20px;
+  padding: 5px 5px 5px 40px;
   position: relative;
-  font-weight: bold;
   list-style: none;
   outline: none;
+  font: var(--gcds-details-font-desktop);
+  text-decoration: underline;
+  color: var(--gcds-details-default-text);
+  text-decoration-thickness: var(--gcds-details-default-decoration-thickness);
+  text-underline-offset: var(--gcds-details-summary-underline-offset);
 }
 
 /* Lexical titles contain a paragraph. Remove its browser margin so the
@@ -43,65 +44,42 @@
 }
 
 .Collapsible__title:before {
-  border-style: solid;
-  border-color: transparent;
-  border-width: 4px 6px 4px 6px;
-  border-left-color: #000;
+  /* CSS triangle */
+  width: 0;
+  height: 0;
+  border-block: var(--gcds-details-summary-arrow-border-top-bottom) solid transparent;
+  border-inline-start: var(--gcds-details-summary-arrow-border-left) solid
+    var(--gcds-details-default-text);
   display: block;
   content: "";
   position: absolute;
-  left: 7px;
+  left: var(--gcds-details-summary-arrow-left);
   top: 50%;
-  transform-origin: 2px 50%;
   transform: translateY(-50%);
   transition: transform 0.3s ease;
 }
 
 .Collapsible__container[open] > .Collapsible__title:before {
+  /* CSS triangle */
   transform: translateY(-50%) rotate(90deg);
 }
 
 .Collapsible__content {
+  color: var(--gcds-text-role-primary);
+  font: var(--gcds-text-size-body-desktop);
   padding: 10px 5px 5px 20px;
   box-sizing: border-box;
+  border-left: 5px solid var(--gcds-details-panel-border-color);
   interpolate-size: allow-keywords;
   overflow: hidden;
   transition:
     height 0.3s ease-out,
     opacity 0.3s ease-out,
     visibility 0.3s ease-out allow-discrete;
+  margin-left: 10px;
+  min-height: 40px;
 }
 
-/* Chrome uses div with hidden attribute — override display to allow animation */
 .Collapsible__content[hidden] {
-  content-visibility: visible;
-  display: block;
-  height: 0;
-  opacity: 0;
-  visibility: hidden;
-  pointer-events: none;
-  transition:
-    height 0.3s ease-in,
-    opacity 0.3s ease-in,
-    visibility 0.3s ease-in allow-discrete;
-}
-
-/* Non-Chrome uses <details> — animate via ::details-content */
-details.Collapsible__container::details-content {
-  interpolate-size: allow-keywords;
-  overflow: hidden;
-  transition:
-    height 0.3s ease-out,
-    opacity 0.3s ease-out,
-    content-visibility 0.3s ease-out allow-discrete;
-}
-
-details.Collapsible__container:not([open])::details-content {
-  height: 0;
-  opacity: 0;
-  content-visibility: hidden;
-  transition:
-    height 0.3s ease-in,
-    opacity 0.3s ease-in,
-    content-visibility 0.3s ease-in allow-discrete;
+  border-left-color: transparent;
 }