[6.x] inertia sections settings index

packages/craftcms-cp/src/components/input/input.ts

@@ -9,6 +9,8 @@ export default class CraftInput extends LionInput {
   }
 
   @property({type: Number, reflect: true}) size?: string;
+  @property({reflect: true, type: Boolean}) small = false;
+  @property({reflect: true, type: Boolean}) center = false;
 
   override connectedCallback() {
     super.connectedCallback();

packages/craftcms-cp/src/components/select/select.styles.ts

@@ -8,6 +8,10 @@ export default css`
     width: 100%;
   }
 
+  :host([small]) .input-group__input {
+    --c-input-height: calc(var(--c-size-control-sm) - 2px);
+  }
+
   ::slotted(.form-control) {
     width: 100%;
     height: 100%;

packages/craftcms-cp/src/components/select/select.ts

@@ -3,12 +3,15 @@ import {LionSelect} from '@lion/ui/select.js';
 import {html} from 'lit';
 import '../option/option.js';
 import '../icon/icon.js';
+import {property} from 'lit/decorators.js';
 
 export default class CraftSelect extends LionSelect {
   static override get styles() {
     return [...super.styles, styles];
   }
 
+  @property({reflect: true, type: Boolean}) small = false;
+
   // eslint-disable-next-line class-methods-use-this
   override _inputGroupInputTemplate() {
     return html`

packages/craftcms-cp/src/styles/form.styles.ts

@@ -59,4 +59,12 @@ export const inputStyles = css`
   ::slotted([slot='input']) {
     ${baseInputStyles}
   }
+
+  :host([small]) ::slotted([slot='input']) {
+    --c-input-height: var(--c-size-control-sm);
+    --c-input-spacing-inline: var(--c-spacing-sm);
+  }
+  :host([center]) ::slotted([slot='input']) {
+    text-align: center;
+  }
 `;

packages/craftcms-cp/src/styles/shared/base.css

@@ -178,3 +178,12 @@ Modify with `cp-table--auto` to apply table-layout: auto
     padding-block: var(--c-spacing-sm);
   }
 }
+
+.cp-table-header,
+.cp-table-footer {
+  padding: var(--c-spacing-md);
+  background-color: var(--c-color-neutral-bg-normal);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}

packages/craftcms-cp/src/styles/shared/tokens.css

@@ -24,6 +24,14 @@
   --c-fg-on-accent-subtle: var(--color-slate-800);
   --c-fg-on-sunken: var(--c-fg-text);
 
+  /* Elevations */
+  --c-elevation-surface-sunken: var(--color-slate-100);
+  --c-elevation-surface-raised: var(--color-white);
+  --c-elevation-surface-overlay: var(--color-white);
+  --c-elevation-shadow-sunken: var(--inset-shadow-sm);
+  --c-elevation-shadow-raised: var(--shadow-sm);
+  --c-elevation-shadow-overlay: var(--shadow-lg);
+
   /* Semantic colors */
   --c-color-neutral-bg-emphasis: var(--color-slate-600);
   --c-color-neutral-bg-normal: var(--color-slate-100);