chore(card): add boilerplate files

PiperOrigin-RevId: 576646068

Author: asyncLiz

labs/card/elevated-card.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {customElement} from 'lit/decorators.js';
+
+import {Card} from './internal/card.js';
+import {styles as elevatedStyles} from './internal/elevated-styles.css.js';
+import {styles as sharedStyles} from './internal/shared-styles.css.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'md-elevated-card': MdElevatedCard;
+  }
+}
+
+/**
+ * @final
+ * @suppress {visibility}
+ */
+@customElement('md-elevated-card')
+export class MdElevatedCard extends Card {
+  static override styles = [sharedStyles, elevatedStyles];
+}

labs/card/filled-card.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {customElement} from 'lit/decorators.js';
+
+import {Card} from './internal/card.js';
+import {styles as filledStyles} from './internal/filled-styles.css.js';
+import {styles as sharedStyles} from './internal/shared-styles.css.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'md-filled-card': MdFilledCard;
+  }
+}
+
+/**
+ * @final
+ * @suppress {visibility}
+ */
+@customElement('md-filled-card')
+export class MdFilledCard extends Card {
+  static override styles = [sharedStyles, filledStyles];
+}

labs/card/internal/_elevated-card.scss

@@ -0,0 +1,14 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use '../../../tokens';
+// go/keep-sorted end
+
+@mixin styles() {
+  $tokens: tokens.md-comp-elevated-card-values();
+
+  // TODO(b/261201808): add styles
+}

labs/card/internal/_filled-card.scss

@@ -0,0 +1,14 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use '../../../tokens';
+// go/keep-sorted end
+
+@mixin styles() {
+  $tokens: tokens.md-comp-filled-card-values();
+
+  // TODO(b/261201808): add styles
+}

labs/card/internal/_outlined-card.scss

@@ -0,0 +1,14 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use '../../../tokens';
+// go/keep-sorted end
+
+@mixin styles() {
+  $tokens: tokens.md-comp-outlined-card-values();
+
+  // TODO(b/261201808): add styles
+}

labs/card/internal/_shared.scss

@@ -0,0 +1,10 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin styles() {
+  :host {
+    display: flex;
+  }
+}

labs/card/internal/card.ts

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {html, LitElement} from 'lit';
+
+/**
+ * A card component.
+ */
+export class Card extends LitElement {
+  protected override render() {
+    return html`<slot></slot>`;
+  }
+}

labs/card/internal/elevated-styles.scss

@@ -0,0 +1,10 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use './elevated-card';
+// go/keep-sorted end
+
+@include elevated-card.styles;

labs/card/internal/filled-styles.scss

@@ -0,0 +1,10 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use './filled-card';
+// go/keep-sorted end
+
+@include filled-card.styles;

labs/card/internal/outlined-styles.scss

@@ -0,0 +1,10 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use './outlined-card';
+// go/keep-sorted end
+
+@include outlined-card.styles;