Project import generated by Copybara.
GitOrigin-RevId: d9e9e3fb4e31372ec1fb43b178994ca78fa8fe70
diff --git a/static_src/elements/chops/chops-collapse/chops-collapse.js b/static_src/elements/chops/chops-collapse/chops-collapse.js
new file mode 100644
index 0000000..0df3e21
--- /dev/null
+++ b/static_src/elements/chops/chops-collapse/chops-collapse.js
@@ -0,0 +1,62 @@
+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {LitElement, html, css} from 'lit-element';
+
+/**
+ * `<chops-collapse>` displays a collapsible element.
+ *
+ */
+export class ChopsCollapse extends LitElement {
+ /** @override */
+ static get properties() {
+ return {
+ opened: {
+ type: Boolean,
+ reflect: true,
+ },
+ ariaHidden: {
+ attribute: 'aria-hidden',
+ type: Boolean,
+ reflect: true,
+ },
+ };
+ }
+
+ /** @override */
+ static get styles() {
+ return css`
+ :host, :host([hidden]) {
+ display: none;
+ }
+ :host([opened]) {
+ display: block;
+ }
+ `;
+ }
+
+ /** @override */
+ render() {
+ return html`
+ <slot></slot>
+ `;
+ }
+
+ /** @override */
+ constructor() {
+ super();
+
+ this.opened = false;
+ this.ariaHidden = true;
+ }
+
+ /** @override */
+ update(changedProperties) {
+ if (changedProperties.has('opened')) {
+ this.ariaHidden = !this.opened;
+ }
+ super.update(changedProperties);
+ }
+}
+customElements.define('chops-collapse', ChopsCollapse);