Project import generated by Copybara

PiperOrigin-RevId: 721404123

src/components/configurator/slot-settings.ts

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import '../ui-controls/config-section';
 import '../ui-controls/slot-size-input';
 import '../ui-controls/targeting-input';
 
@@ -95,17 +96,15 @@ export class SlotSettings extends LitElement {
         width: 100%;
       }
 
-      fieldset {
-        display: flex;
-        flex-flow: column wrap;
+      config-section {
         margin: 15px 0 0;
       }
 
       .slot {
         padding: 10px;
       }
 
-      .slot:nth-child(odd) {
+      .slot:nth-child(even) {
         background-color: lightgrey;
       }
 
@@ -126,8 +125,11 @@ export class SlotSettings extends LitElement {
       }
 
       .add-slot {
+        display: flex;
+        flex-direction: column;
         margin: 0 24px 0;
         text-align: center;
+        width: 100%;
       }
 
       .button {
@@ -159,7 +161,7 @@ export class SlotSettings extends LitElement {
   ];
 
   /**
-   * The title to display for the generated `<fieldset>`.
+   * The title to display for the generated `<config-section>`.
    */
   @property({attribute: 'title', type: String}) title = '';
 
@@ -488,16 +490,15 @@ export class SlotSettings extends LitElement {
     });
 
     return html`
-      <fieldset>
-        <legend>${this.title}</legend>
+      <config-section title="${this.title}">
         ${slots}
         <span
           class="material-icons md-24 add-slot button"
           title="${strings.addSlotTitle()}"
           @click="${this.addSlot}"
           >add</span
         >
-      </fieldset>
+      </config-section>
     `;
   }
 }

src/components/sample-configurator.ts

@@ -15,8 +15,9 @@
  */
 
 import './gpt-playground';
-import './ui-controls/targeting-input';
 import './configurator/slot-settings';
+import './ui-controls/config-section';
+import './ui-controls/targeting-input';
 
 import {localized, msg} from '@lit/localize';
 import {css, html, LitElement, TemplateResult} from 'lit';
@@ -91,35 +92,25 @@ export class SampleConfigurator extends LitElement {
       overflow: scroll;
     }
 
-    fieldset {
-      display: flex;
-      flex-flow: row wrap;
-    }
-
-    fieldset > fieldset,
-    fieldset > targeting-input {
-      margin: 15px 0 0;
-    }
-
-    fieldset label {
+    config-section label {
       display: block;
     }
 
-    fieldset input[type='checkbox'] {
+    config-section input[type='checkbox'] {
       float: left;
     }
 
-    fieldset select {
+    config-section select {
       float: right;
     }
 
-    fieldset.page div,
-    fieldset.privacy div {
+    config-section.page div,
+    config-section.privacy div {
       width: 33%;
       min-width: 200px;
     }
 
-    fieldset.template div {
+    config-section.template div {
       width: 50%;
       min-width: 200px;
     }
@@ -254,8 +245,7 @@ export class SampleConfigurator extends LitElement {
   private renderPageSettings() {
     const settings = this.config?.page;
 
-    return html` <fieldset class="page">
-      <legend>${configNames.page!()}</legend>
+    return html`<config-section class="page" title="${configNames.page!()}">
       ${this.checkbox('sra', pageConfigNames.sra!(), settings?.sra)}
       ${this.renderPrivacySettings()}
       <targeting-input
@@ -265,20 +255,22 @@ export class SampleConfigurator extends LitElement {
         @update="${this.updatePageTargeting}"
       >
       </targeting-input>
-    </fieldset>`;
+    </config-section>`;
   }
 
   private renderPrivacySettings() {
     const settings = this.config?.page?.privacy;
 
-    return html` <fieldset class="privacy">
-      <legend>${pageConfigNames.privacy!()}</legend>
+    return html`<config-section
+      class="privacy"
+      title="${pageConfigNames.privacy!()}"
+    >
       ${this.checkbox('tfcd', privacyConfigNames.tfcd!(), settings?.tfcd)}
       ${this.checkbox('ltd', privacyConfigNames.ltd!(), settings?.ltd)}
       ${this.checkbox('npa', privacyConfigNames.npa!(), settings?.npa)}
       ${this.checkbox('rdp', privacyConfigNames.rdp!(), settings?.rdp)}
       ${this.checkbox('tfua', privacyConfigNames.tfua!(), settings?.tfua)}
-    </fieldset>`;
+    </config-section>`;
   }
 
   private renderSlotSettings() {
@@ -307,16 +299,18 @@ export class SampleConfigurator extends LitElement {
         );
       });
 
-    return html` <fieldset class="template">
-      <legend>${configNames.template!()}</legend>
+    return html`<config-section
+      class="template"
+      title="${configNames.template!()}"
+    >
       <div>
         <select id="target" name="target" @change=${this.updateStringSettings}>
           <option value="">TypeScript</option>
           ${jsTargets}
         </select>
         <label for="target">${templateConfigNames.target!()}</label>
       </div>
-    </fieldset>`;
+    </config-section>`;
   }
 
   private renderConfigurator() {

src/components/ui-controls/config-section.ts

@@ -0,0 +1,60 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {localized} from '@lit/localize';
+import {css, html, LitElement} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+/**
+ * A named grouping of configuration settings.
+ */
+@localized()
+@customElement('config-section')
+export class ConfigSection extends LitElement {
+  static styles = css`
+    :host {
+      display: flex;
+      min-width: 0;
+      width: 100%;
+    }
+
+    fieldset {
+      display: flex;
+      flex-flow: row wrap;
+      min-width: 0;
+      width: 100%;
+    }
+
+    ::slotted(config-section),
+    ::slotted(targeting-input) {
+      margin: 15px 0 0;
+    }
+  `;
+
+  /**
+   * The name of the section.
+   */
+  @property({attribute: 'title', type: String}) title = '';
+
+  render() {
+    return html`
+      <fieldset>
+        <legend>${this.title}</legend>
+        <slot></slot>
+      </fieldset>
+    `;
+  }
+}

src/components/ui-controls/slot-size-input.ts

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+import './config-section';
+
 import {localized, msg} from '@lit/localize';
 import {css, html, LitElement, nothing, TemplateResult} from 'lit';
 import {customElement, property, state} from 'lit/decorators.js';
@@ -68,11 +70,6 @@ export class SlotSizeInput extends LitElement {
         width: 100%;
       }
 
-      fieldset {
-        display: flex;
-        flex-flow: row wrap;
-      }
-
       .size {
         align-items: center;
         display: flex;
@@ -82,12 +79,12 @@ export class SlotSizeInput extends LitElement {
         width: 100%;
       }
 
-      .size:nth-child(odd) {
+      .size:nth-child(even) {
         background-color: darkgrey;
         color: white;
       }
 
-      .size:nth-child(odd) .material-icons {
+      .size:nth-child(even) .material-icons {
         color: black;
       }
 
@@ -126,7 +123,7 @@ export class SlotSizeInput extends LitElement {
   ];
 
   /**
-   * The title to display for the generated `<fieldset>`.
+   * The title to display for the generated `<config-section>`.
    */
   @property({attribute: 'title', type: String}) title = '';
 
@@ -369,16 +366,15 @@ export class SlotSizeInput extends LitElement {
     });
 
     return html`
-      <fieldset>
-        <legend>${this.title}</legend>
+      <config-section title="${this.title}">
         ${sizes}
         <span
           class="material-icons md-24 add-size button"
           title="${strings.addSizeTitle()}"
           @click="${this.addSize}"
           >add</span
         >
-      </fieldset>
+      </config-section>
     `;
   }
 

src/components/ui-controls/targeting-input.ts

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+import './config-section';
+
 import {localized, msg} from '@lit/localize';
 import {css, html, LitElement, TemplateResult} from 'lit';
 import {customElement, property, state} from 'lit/decorators.js';
@@ -83,11 +85,6 @@ export class TargetingInput extends LitElement {
         width: 100%;
       }
 
-      fieldset {
-        display: flex;
-        flex-flow: row wrap;
-      }
-
       .header,
       .key-value {
         display: flex;
@@ -104,7 +101,7 @@ export class TargetingInput extends LitElement {
         margin-left: 24px;
       }
 
-      .key-value:nth-child(even) {
+      .key-value:nth-child(odd) {
         background-color: darkgrey;
       }
 
@@ -153,7 +150,7 @@ export class TargetingInput extends LitElement {
   ];
 
   /**
-   * The title to display for the generated `<fieldset>`.
+   * The title to display for the generated `<config-section>`.
    */
   @property({attribute: 'title', type: String}) title = '';
 
@@ -394,20 +391,19 @@ export class TargetingInput extends LitElement {
     });
 
     return html`
-      <fieldset>
+      <config-section title="${this.title}">
         <div class="header">
           <span>${strings.keyColumnHeader()}</span>
           <span>${strings.valuesColumnHeader()}</span>
         </div>
-        <legend>${this.title}</legend>
         ${keyValues}
         <span
           class="material-icons md-24 button add-key"
           @click="${this.addKey}"
           title="${strings.addKeyTitle()}"
           >add</span
         >
-      </fieldset>
+      </config-section>
     `;
   }