diff --git a/common/changes/c2pa-wc/CAI-3405_2023-02-14-16-41.json b/common/changes/c2pa-wc/CAI-3405_2023-02-14-16-41.json
new file mode 100644
index 00000000..74734024
--- /dev/null
+++ b/common/changes/c2pa-wc/CAI-3405_2023-02-14-16-41.json
@@ -0,0 +1,10 @@
+{
+ "changes": [
+ {
+ "packageName": "c2pa-wc",
+ "comment": "making L2 keyboard focusable",
+ "type": "patch"
+ }
+ ],
+ "packageName": "c2pa-wc"
+}
\ No newline at end of file
diff --git a/packages/c2pa-wc/src/components/L2/L2.ts b/packages/c2pa-wc/src/components/L2/L2.ts
new file mode 100644
index 00000000..c634a267
--- /dev/null
+++ b/packages/c2pa-wc/src/components/L2/L2.ts
@@ -0,0 +1,74 @@
+/**
+ * Copyright 2023 Adobe
+ * All Rights Reserved.
+ *
+ * NOTICE: Adobe permits you to use, modify, and distribute this file in
+ * accordance with the terms of the Adobe license agreement accompanying
+ * it.
+ */
+
+import { L2ManifestStore } from 'c2pa';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import '../../../assets/svg/color/info.svg';
+import { defaultStyles } from '../../styles';
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'cai-l2': L2;
+ }
+
+ namespace JSX {
+ interface IntrinsicElements {
+ 'cai-l2': any;
+ }
+ }
+}
+
+@customElement('cai-l2')
+export class L2 extends LitElement {
+ /**
+ * Image source - if set to undefined/null it will show a broken image icon
+ */
+ static get styles() {
+ return [
+ defaultStyles,
+ css`
+ .popover {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ }
+ `,
+ ];
+ }
+
+ manifestStore: L2ManifestStore | undefined;
+
+ viewMoreURL: string | undefined;
+
+ render() {
+ if (!this.manifestStore) {
+ return null;
+ }
+ console.log('this.manifeststore', this.manifestStore);
+ return html`
+
+
+
+
+
+ `;
+ }
+}
diff --git a/packages/c2pa-wc/src/components/L2/index.ts b/packages/c2pa-wc/src/components/L2/index.ts
new file mode 100644
index 00000000..9c80f73f
--- /dev/null
+++ b/packages/c2pa-wc/src/components/L2/index.ts
@@ -0,0 +1,10 @@
+/**
+ * Copyright 2023 Adobe
+ * All Rights Reserved.
+ *
+ * NOTICE: Adobe permits you to use, modify, and distribute this file in
+ * accordance with the terms of the Adobe license agreement accompanying
+ * it.
+ */
+
+export * from './L2';
diff --git a/packages/c2pa-wc/src/components/ManifestSummary/ManifestSummary.ts b/packages/c2pa-wc/src/components/ManifestSummary/ManifestSummary.ts
index 345f3c9b..4c9c4b93 100644
--- a/packages/c2pa-wc/src/components/ManifestSummary/ManifestSummary.ts
+++ b/packages/c2pa-wc/src/components/ManifestSummary/ManifestSummary.ts
@@ -7,22 +7,22 @@
* it.
*/
+import { L2ManifestStore } from 'c2pa';
import { css, html, LitElement, nothing } from 'lit';
import { customElement, property } from 'lit/decorators.js';
+import { Configurable } from '../../mixins/configurable';
import { defaultStyles } from '../../styles';
import { defaultDateFormatter, hasChanged } from '../../utils';
-import { L2ManifestStore } from 'c2pa';
import type { EditsAndActivityConfig } from '../EditsAndActivity';
import type { MinimumViableProvenanceConfig } from '../MinimumViableProvenance';
-import { Configurable } from '../../mixins/configurable';
import defaultStringMap from './ManifestSummary.str.json';
import '../AssetsUsed';
+import '../EditsAndActivity';
+import '../MinimumViableProvenance';
import '../ProducedBy';
import '../ProducedWith';
import '../SocialMedia';
-import '../EditsAndActivity';
-import '../MinimumViableProvenance';
declare global {
interface HTMLElementTagNameMap {
@@ -156,8 +156,8 @@ export class ManifestSummary extends Configurable(LitElement, defaultConfig) {
return null;
}
- return html`
-
+ return html`
+
${this.arrow ? html`` : null}
-
+
+
diff --git a/packages/c2pa-wc/src/index.ts b/packages/c2pa-wc/src/index.ts
index 9b748e49..a8d4550e 100644
--- a/packages/c2pa-wc/src/index.ts
+++ b/packages/c2pa-wc/src/index.ts
@@ -7,11 +7,11 @@
* it.
*/
-export * as utils from './utils';
export * from './components/AssetsUsed';
export * from './components/EditsAndActivity';
export * from './components/Icon';
export * from './components/Indicator';
+export * from './components/L2';
export * from './components/ManifestSummary';
export * from './components/MinimumViableProvenance';
export * from './components/PanelSection';
@@ -21,3 +21,4 @@ export * from './components/ProducedWith';
export * from './components/SocialMedia';
export * from './components/Thumbnail';
export * from './components/Tooltip';
+export * as utils from './utils';