tpl/tplimpl: Update details shortcode

- Remove localization of default summary value
- Add title attribute
- Reformat to be consistent with other embedded templates
- Simplify and improve integration test
- Update documentation

tpl/tplimpl/embedded/templates/shortcodes/details.html

@@ -1,68 +1,75 @@
 {{- /*
 Renders an HTML details element.
 
-@param {string} [summary] The content of the child summary element.
-@param {bool} [open=false] Whether to initially display the contents of the details element.
 @param {string} [class] The value of the element's class attribute.
 @param {string} [name] The value of the element's name attribute.
+@param {string} [summary] The content of the child summary element.
+@param {string} [title] The value of the element's title attribute.
+@param {bool} [open=false] Whether to initially display the content of the details element.
 
 @reference https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
 
 @examples
 
-    {{< details >}}
-    A basic collapsible section.
-    {{< /details >}}
+  {{< details >}}
+  A basic collapsible section.
+  {{< /details >}}
 
-    {{< details summary="Custom Summary Text" >}}
-    Showing custom `summary` text.
-    {{< /details >}}
+  {{< details summary="Custom Summary Text" >}}
+  Showing custom `summary` text.
+  {{< /details >}}
 
-    {{< details summary="Open Details" open=true >}}
-    Contents displayed initially by using `open`.
-    {{< /details >}}
+  {{< details summary="Open Details" open=true >}}
+  Contents displayed initially by using `open`.
+  {{< /details >}}
 
-    {{< details summary="Styled Content" class="my-custom-class" >}}
-    Content can be styled with CSS by specifying a `class`.
+  {{< details summary="Styled Content" class="my-custom-class" >}}
+  Content can be styled with CSS by specifying a `class`.
 
-    Target details element:
+  Target details element:
 
-    ```css
-    details.my-custom-class { }
-    ```
+  ```css
+  details.my-custom-class { }
+  ```
 
-    Target summary element:
+  Target summary element:
 
-    ```css
-    details.my-custom-class > summary > * { }
-    ```
+  ```css
+  details.my-custom-class > summary > * { }
+  ```
 
-    Target inner content:
+  Target inner content:
 
-    ```css
-    details.my-custom-class > :not(summary) { }
-    ```
-    {{< /details >}}
+  ```css
+  details.my-custom-class > :not(summary) { }
+  ```
+  {{< /details >}}
 
-    {{< details summary="Grouped Details" name="my-details" >}}
-    Specifying a `name` allows elements to be connected, with only one able to be open at a time.
-    {{< /details >}}
+  {{< details summary="Grouped Details" name="my-details" >}}
+  Specifying a `name` allows elements to be connected, with only one able to be open at a time.
+  {{< /details >}}
 
 */}}
 
 {{- /* Get arguments. */}}
-{{- $summary := or (.Get "summary") (T "shortcodes.details") "Details" }}
 {{- $class := or (.Get "class") "" }}
 {{- $name := or (.Get "name") "" }}
+{{- $summary := or (.Get "summary") "Details" }}
+{{- $title := or (.Get "title") "" }}
 {{- $open := false }}
 {{- if in (slice "false" false 0) (.Get "open") }}
-    {{- $open = false }}
-{{- else if in (slice "true" true 1) (.Get "open")}}
-    {{- $open = true }}
+  {{- $open = false }}
+{{- else if in (slice "true" true 1) (.Get "open") }}
+  {{- $open = true }}
 {{- end }}
 
 {{- /* Render. */}}
-<details{{- if $open }} open{{ end }}{{- if $name }} name="{{ $name }}"{{- end }}{{- if $class }} class="{{ $class }}"{{- end }}>
-    <summary>{{ $summary | .Page.RenderString }}</summary>
-    {{ .Inner | .Page.RenderString (dict "display" "block") -}}
-</details>
+<details
+  {{- with $class }} class="{{ . }}" {{- end }}
+  {{- with $name }} name="{{ . }}" {{- end }}
+  {{- with $open }} open {{- end }}
+  {{- with $title }} class="{{ . }}" {{- end -}}
+>
+  <summary>{{ $summary | .Page.RenderString }}</summary>
+  {{ .Inner | .Page.RenderString (dict "display" "block") -}}
+</details>