@emuanalytics/flow-rdf-ui 4.1.0-preview.2 → 4.1.0-preview.21

package/dist/components/alert/alert.styles.mjs

@@ -20,7 +20,7 @@ const styles = css`
     border-top-width: calc(var(--flow-ui-alert-border-width) * 3);
     border-radius: var(--flow-ui-border-radius-medium);
     font-family: var(--flow-ui-font-sans);
-    font-size: var(--flow-ui-font-size-small);
+    font-size: var(--flow-ui-font-size-medium);
     font-weight: var(--flow-ui-font-weight-normal);
     line-height: 1.6;
     color: var(--flow-ui-alert-color);

package/dist/components/badge/badge.component.mjs

@@ -20,6 +20,7 @@ class FlowUiBadge extends FlowRdfElement {
   constructor() {
     super(...arguments);
     this.variant = "primary";
+    this.size = "medium";
     this.pill = false;
     this.pulse = false;
   }
@@ -52,6 +53,9 @@ FlowUiBadge.styles = styles;
 __decorateClass([
   property({ reflect: true })
 ], FlowUiBadge.prototype, "variant", 2);
+__decorateClass([
+  property({ reflect: true })
+], FlowUiBadge.prototype, "size", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], FlowUiBadge.prototype, "pill", 2);

package/dist/components/badge/badge.styles.mjs

@@ -60,6 +60,19 @@ const styles = css`
     --background-color: var(--flow-ui-color-danger-500);
   }
 
+  /* Size modifiers */
+  :host([size='small']) .badge {
+    font-size: var(--flow-ui-font-size-x-small);
+  }
+
+  :host([size='medium']) .badge {
+    font-size: var(--flow-ui-font-size-small);
+  }
+
+  :host([size='large']) .badge {
+    font-size: var(--flow-ui-font-size-medium);
+  }
+
   /* Pill modifier */
   .badge--pill {
     border-radius: var(--flow-ui-border-radius-pill);

package/dist/components/breadcrumb-item/breadcrumb-item.styles.mjs

@@ -14,7 +14,7 @@ const styles = css`
     font-family: var(--flow-ui-font-sans);
     font-size: var(--flow-ui-font-size-small);
     font-weight: var(--flow-ui-font-weight-semibold);
-    color: var(--flow-ui-color-neutral-600);
+    color: var(--flow-ui-color-neutral-800);
     line-height: var(--flow-ui-line-height-normal);
     white-space: nowrap;
   }

package/dist/components/button/button.styles.mjs

@@ -79,8 +79,8 @@ const buttonStyles = css`
   /* Default */
   .button--standard.button--default {
     background-color: var(--flow-ui-color-background);
-    border-color: var(--flow-ui-color-neutral-300);
-    color: var(--flow-ui-color-neutral-700);
+    border-color: var(--flow-ui-color-neutral-600);
+    color: var(--flow-ui-color-neutral-800);
   }
 
   .button--standard.button--default:hover:not(.button--disabled) {

package/dist/components/calendar/calendar.component.mjs

@@ -227,6 +227,7 @@ class FlowUiCalendar extends FlowRdfElement {
     return html`
       <div class="calendar__time-container">
         <flow-ui-input
+          filled
           type="number"
           size=${this.size === "small" ? "small" : "medium"}
           name="hour"
@@ -239,6 +240,7 @@ class FlowUiCalendar extends FlowRdfElement {
         ></flow-ui-input>
         <span class="calendar__time-separator">:</span>
         <flow-ui-input
+          filled
           type="number"
           size=${this.size === "small" ? "small" : "medium"}
           name="minute"
@@ -251,6 +253,7 @@ class FlowUiCalendar extends FlowRdfElement {
         ></flow-ui-input>
         <span class="calendar__time-separator">:</span>
         <flow-ui-input
+          filled
           type="number"
           size=${this.size === "small" ? "small" : "medium"}
           name="second"

package/dist/components/calendar/calendar.styles.mjs

@@ -9,6 +9,10 @@ const styles = css`
     --width: 300px;
     --font-size: var(--flow-ui-font-size-medium);
     --day-font-size: var(--flow-ui-font-size-small);
+    --day-color-filler: var(--flow-ui-calendar-day-color-filler);
+    --day-color-hover: var(--flow-ui-calendar-day-color-hover);
+    --day-color-selected: var(--flow-ui-calendar-day-color-selected);
+    --day-color-today: var(--flow-ui-calendar-day-color-today);
   }
 
   .calendar {
@@ -76,20 +80,20 @@ const styles = css`
   }
 
   .calendar__day:hover:not(.calendar__day--selected) {
-    background-color: var(--flow-ui-color-neutral-100);
+    background-color: var(--day-color-hover);
   }
 
   .calendar__day--filler {
-    color: var(--flow-ui-color-neutral-400);
+    color: var(--day-color-filler);
   }
 
   .calendar__day--today {
-    border: 1px solid var(--flow-ui-color-neutral-300);
+    border: 1px solid var(--day-color-today);
   }
 
   .calendar__day--selected {
     color: var(--flow-ui-color-background);
-    background-color: var(--flow-ui-color-primary-500);
+    background-color: var(--day-color-selected);
   }
 
   .calendar__header {
@@ -114,8 +118,13 @@ const styles = css`
     --flow-ui-control-spacing-medium: var(--flow-ui-spacing-small);
   }
 
+  .calendar__time-input::part(form-control-input) {
+    background-color: var(--flow-ui-calendar-time-color);
+  }
+
   .calendar__time-input::part(input) {
     /* Remove padding between spin controls to accommodate narrow calendars */
+
     padding-right: 0;
   }
 

package/dist/components/card/card.component.mjs

@@ -1,33 +1,53 @@
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
 import { HasSlotController } from '../../internal/slot.mjs';
 import styles from './card.styles.mjs';
+import { isStringFull } from '@emuanalytics/flow-rdf-core/utils';
+import { property } from 'lit/decorators.js';
 
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
 class FlowUiCard extends FlowRdfElement {
   constructor() {
     super(...arguments);
     this.hasSlotController = new HasSlotController(this, "footer", "header", "image");
+    this.title = "";
   }
   render() {
+    const hasHeader = isStringFull(this.title) ?? this.hasSlotController.test("title");
     return html`
       <div
         part="base"
         class=${classMap({
       card: true,
-      "card--has-footer": this.hasSlotController.test("footer"),
-      "card--has-image": this.hasSlotController.test("image"),
-      "card--has-header": this.hasSlotController.test("header")
+      "card--has-header": hasHeader
     })}
+        title=""
       >
-        <slot name="image" part="image" class="card__image"></slot>
-        <slot name="header" part="header" class="card__header"></slot>
+        ${hasHeader ? html`
+              <header part="header" class="card__header">
+                <span part="title" class="card__title"><slot name="title">${this.title}</slot></span>
+              </header>
+            ` : nothing}
+
         <slot part="body" class="card__body"></slot>
-        <slot name="footer" part="footer" class="card__footer"></slot>
       </div>
     `;
   }
 }
 FlowUiCard.styles = styles;
+__decorateClass([
+  property({ reflect: true })
+], FlowUiCard.prototype, "title", 2);
 
 export { FlowUiCard as default };

package/dist/components/card/card.styles.mjs

@@ -5,15 +5,15 @@ const styles = css`
   ${componentStyles}
 
   :host {
+    display: block;
+
     --border-color: var(--flow-ui-card-border-color);
     --border-radius: var(--flow-ui-card-border-radius);
     --border-width: var(--flow-ui-card-border-width);
-    --padding: var(--flow-ui-spacing-large);
+    --padding: var(--flow-ui-card-padding);
 
     --background-color: var(--flow-ui-card-background-color);
     --color: var(--flow-ui-card-color);
-
-    display: inline-block;
   }
 
   .card {
@@ -26,36 +26,9 @@ const styles = css`
     border-radius: var(--border-radius);
   }
 
-  .card__image {
-    display: flex;
-    border-top-left-radius: var(--border-radius);
-    border-top-right-radius: var(--border-radius);
-    margin: calc(-1 * var(--border-width));
-    overflow: hidden;
-  }
-
-  .card__image::slotted(img) {
-    display: block;
-    width: 100%;
-  }
-
-  .card:not(.card--has-image) .card__image {
-    display: none;
-  }
-
   .card__header {
-    display: block;
-    border-bottom: solid var(--border-width) var(--border-color);
     padding: calc(var(--padding) / 2) var(--padding);
-  }
-
-  .card:not(.card--has-header) .card__header {
-    display: none;
-  }
-
-  .card:not(.card--has-image) .card__header {
-    border-top-left-radius: var(--border-radius);
-    border-top-right-radius: var(--border-radius);
+    padding-bottom: 0;
   }
 
   .card__body {
@@ -63,14 +36,13 @@ const styles = css`
     padding: var(--padding);
   }
 
-  .card--has-footer .card__footer {
-    display: block;
-    border-top: solid var(--border-width) var(--border-color);
-    padding: var(--padding);
+  /* Remove margin from first and last child of default slot */
+  ::slotted(:nth-child(1 of :not([slot]))) {
+    margin-top: 0;
   }
 
-  .card:not(.card--has-footer) .card__footer {
-    display: none;
+  ::slotted(:nth-last-child(1 of :not([slot]))) {
+    margin-bottom: 0;
   }
 `;
 

package/dist/components/chart/chart.component.mjs

@@ -1,10 +1,12 @@
 import { Chart } from 'chart.js';
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
 import { watch } from '../../internal/watch.mjs';
 import styles from './chart.styles.mjs';
+import { HasSlotController } from '../../internal/slot.mjs';
+import { isStringFull } from '../../internal/type-checks.mjs';
 import { initializeChartJs } from './chartjs-support.mjs';
 
 var __defProp = Object.defineProperty;
@@ -21,7 +23,9 @@ var __decorateClass = (decorators, target, key, kind) => {
 class FlowUiChart extends FlowRdfElement {
   constructor() {
     super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "label");
     this._chartRef = createRef();
+    this.title = "";
     this.plugins = [];
   }
   /** The Chart.js chart instance. */
@@ -54,14 +58,26 @@ class FlowUiChart extends FlowRdfElement {
     }
   }
   render() {
+    const hasHeader = isStringFull(this.title) || this.hasSlotController.test("title");
     return html`
-      <div part="base" class="chart">
-        <canvas ${ref(this._chartRef)}></canvas>
+      <div part="base" class="chart" title="">
+        ${hasHeader ? html`
+              <header part="header" class="chart__header">
+                <span part="title" class="chart__title"><slot name="title">${this.title}</slot></span>
+              </header>
+            ` : nothing}
+
+        <div class="chart_container">
+          <canvas ${ref(this._chartRef)}></canvas>
+        </div>
       </div>
     `;
   }
 }
 FlowUiChart.styles = styles;
+__decorateClass([
+  property({ reflect: true })
+], FlowUiChart.prototype, "title", 2);
 __decorateClass([
   property()
 ], FlowUiChart.prototype, "type", 2);

package/dist/components/chart/chart.styles.mjs

@@ -66,14 +66,33 @@ const styles = css`
 
     --dataset-stroke-color-9: var(--flow-ui-chart-stroke-color-9, hsl(292.1 88.4% 57.7%));
     --dataset-fill-color-9: var(--flow-ui-chart-fill-color-9, hsl(292.1 88.4% 57.7%));
+
+    --header-padding: var(--flow-ui-chart-header-padding, var(--flow-ui-spacing-x-small));
+    --header-height: var(--flow-ui-chart-header-height, var(--flow-ui-control-height-medium));
+    --header-font-size: var(--flow-ui-chart-header-font-size, var(--flow-ui-font-size-medium));
+    --header-color: var(--flow-ui-chart-header-color, var(--flow-ui-color-text));
   }
 
   .chart {
+    height: 100%;
     background-color: var(--background-color);
+    display: flex;
+    flex-direction: column;
+  }
+
+  .chart__header {
+    flex: 0 0 auto;
+    padding: var(--header-padding);
+    height: var(--header-height);
+    font-size: var(--header-font-size);
+    color: var(--header-color);
+  }
+
+  .chart_container {
+    flex: 1;
     position: relative;
     width: 100%;
     height: 100%;
-    /* padding: var(--flow-ui-spacing-x-small); */
   }
 `;
 

package/dist/components/checkbox-group/checkbox-group.component.mjs

@@ -7,6 +7,7 @@ import { FormControlController, customErrorValidityState, valueMissingValiditySt
 import { HasSlotController } from '../../internal/slot.mjs';
 import { watch } from '../../internal/watch.mjs';
 import styles from './checkbox-group.styles.mjs';
+import { isNil } from '../../internal/type-checks.mjs';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -119,6 +120,9 @@ class FlowUiCheckboxGroup extends FlowRdfFormControl {
     this.syncCheckboxes();
   }
   handleValueChange() {
+    if (isNil(this.value)) {
+      this.value = [];
+    }
     if (this.hasUpdated) {
       this.updateCheckedState();
     }

package/dist/components/date-time-picker/date-time-picker.component.mjs

@@ -79,6 +79,7 @@ class FlowUiDateTimePicker extends FlowRdfFormControl {
     this.required = boolean(this.required, true);
     this.filled = boolean(this.filled, true);
     this.pill = boolean(this.pill, true);
+    this.inline = boolean(this.inline, true);
     this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);
     this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
     this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
@@ -288,6 +289,7 @@ class FlowUiDateTimePicker extends FlowRdfFormControl {
       "form-control--small": this.size === "small",
       "form-control--medium": this.size === "medium",
       "form-control--large": this.size === "large",
+      "form-control--filled": this.filled,
       "form-control--has-label": hasLabel,
       "form-control--has-help-text": hasHelpText,
       "form-control--has-divider": this.divider,

package/dist/components/date-time-picker/date-time-picker.styles.mjs

@@ -237,7 +237,7 @@ const styles = css`
 
   /* Mode icon (calendar/clock) */
   .datepicker__mode-icon {
-    color: var(--flow-ui-color-neutral-400);
+    color: var(--flow-ui-color-neutral-800);
     flex: 0 0 auto;
     display: flex;
     align-items: center;
@@ -256,7 +256,7 @@ const styles = css`
     font-size: var(--flow-ui-font-size-medium);
     font-weight: var(--flow-ui-font-weight-normal);
     box-shadow: var(--flow-ui-shadow-large);
-    background: var(--flow-ui-menu-background-color);
+    background: var(--flow-ui-calendar-background-color);
     border: solid var(--flow-ui-menu-border-width) var(--flow-ui-menu-border-color);
     border-radius: var(--flow-ui-border-radius-medium);
     padding: var(--flow-ui-spacing-x-small);

package/dist/components/dialog/dialog.component.mjs

@@ -32,7 +32,7 @@ class FlowUiDialog extends FlowRdfElement {
     this.hasSlotController = new HasSlotController(this, "footer");
     this.localize = new LocalizeController(this);
     this.open = false;
-    this.heading = "";
+    this.title = "";
     this.noHeader = false;
     this.tabbed = false;
   }
@@ -162,7 +162,7 @@ class FlowUiDialog extends FlowRdfElement {
     this.syncTabbedDialog();
   }
   syncTabbedDialog() {
-    this.heading = capitalize(this.tabGroup.activeTab?.panel) || "";
+    this.title = capitalize(this.tabGroup.activeTab?.panel) || "";
   }
   handleChildHide(ev) {
     ev.stopPropagation();
@@ -170,8 +170,8 @@ class FlowUiDialog extends FlowRdfElement {
   renderHeader(slot) {
     return html`
       <header slot=${ifDefined(slot)} part="header" class="dialog__header">
-        <h2 part="heading" class="dialog__heading" id="heading">
-          <slot name="heading">${this.heading.length > 0 ? this.heading : String.fromCharCode(65279)}</slot>
+        <h2 part="heading" class="dialog__title" id="heading">
+          <slot name="title">${this.title.length > 0 ? this.title : String.fromCharCode(65279)}</slot>
         </h2>
         <div part="header-actions" class="dialog__header-actions">
           <slot name="header-actions"></slot>
@@ -224,6 +224,7 @@ class FlowUiDialog extends FlowRdfElement {
       "dialog--open": this.open,
       "dialog--has-footer": this.hasSlotController.test("footer")
     })}
+        title=""
       >
         <div part="overlay" class="dialog__overlay" @click=${() => this.requestClose("overlay")} tabindex="-1"></div>
 
@@ -233,7 +234,7 @@ class FlowUiDialog extends FlowRdfElement {
           role="dialog"
           aria-modal="true"
           aria-hidden=${this.open ? "false" : "true"}
-          aria-label=${ifDefined(this.noHeader ? this.heading : void 0)}
+          aria-label=${ifDefined(this.noHeader ? this.title : void 0)}
           aria-labelledby=${ifDefined(!this.noHeader ? "title" : void 0)}
           tabindex="0"
         >
@@ -261,7 +262,7 @@ __decorateClass([
 ], FlowUiDialog.prototype, "open", 2);
 __decorateClass([
   property({ reflect: true })
-], FlowUiDialog.prototype, "heading", 2);
+], FlowUiDialog.prototype, "title", 2);
 __decorateClass([
   property({ attribute: "no-header", type: Boolean, reflect: true })
 ], FlowUiDialog.prototype, "noHeader", 2);

package/dist/components/dialog/dialog.styles.mjs

@@ -6,9 +6,9 @@ const styles = css`
 
   :host {
     --width: 31rem;
-    --header-spacing: var(--flow-ui-spacing-medium);
-    --body-spacing: var(--flow-ui-spacing-medium);
-    --footer-spacing: var(--flow-ui-spacing-medium);
+    --header-spacing: var(--flow-ui-spacing-large);
+    --body-spacing: var(--flow-ui-spacing-large);
+    --footer-spacing: var(--flow-ui-spacing-large);
 
     display: contents;
   }
@@ -18,6 +18,15 @@ const styles = css`
     --body-spacing: 0 var(--flow-ui-spacing-x-large);
   }
 
+  /* Remove margins from first and last items slotted into dialog body */
+  ::slotted(:nth-child(1 of :not([slot]))) {
+    margin-top: 0;
+  }
+
+  ::slotted(:nth-last-child(1 of :not([slot]))) {
+    margin-bottom: 0;
+  }
+
   .dialog {
     display: flex;
     align-items: center;
@@ -63,7 +72,7 @@ const styles = css`
     display: flex;
   }
 
-  .dialog__heading {
+  .dialog__title {
     flex: 1 1 auto;
     font: inherit;
     font-size: var(--flow-ui-font-size-large);
@@ -86,13 +95,13 @@ const styles = css`
     flex: 0 0 auto;
     display: flex;
     align-items: center;
-    font-size: var(--flow-ui-font-size-medium);
+    font-size: var(--flow-ui-font-size-large);
   }
 
   .dialog__body {
     flex: 1 1 auto;
     display: block;
-    padding: var(--body-spacing);
+    padding-inline: var(--body-spacing);
     overflow: auto;
     -webkit-overflow-scrolling: touch;
   }
@@ -104,7 +113,7 @@ const styles = css`
   }
 
   .dialog__footer ::slotted(flow-ui-button:not(:first-of-type)) {
-    margin-inline-start: var(--flow-ui-spacing-x-small);
+    margin-inline-start: var(--flow-ui-spacing-small);
   }
 
   .dialog:not(.dialog--has-footer) .dialog__footer {

package/dist/components/form-group/form-group.component.mjs

@@ -2,7 +2,7 @@ import { html } from 'lit';
 import { query, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { boolean } from '../../internal/boolean.mjs';
-import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
+import FlowRdfElement, { FlowRdfFormControl } from '../../internal/flow-ui-rdf-element.mjs';
 import { HasSlotController } from '../../internal/slot.mjs';
 import { watch } from '../../internal/watch.mjs';
 import styles from './form-group.styles.mjs';
@@ -25,14 +25,16 @@ class FlowUiFormGroup extends FlowRdfElement {
     this.label = "";
     this.size = "medium";
     this.helpText = "";
-    this.noDividers = false;
-    this.noBorder = false;
+    this.borders = false;
     this.variant = "default";
   }
   connectedCallback() {
     super.connectedCallback();
-    this.noDividers = boolean(this.noDividers, true);
-    this.noBorder = boolean(this.noBorder, true);
+    this.classList.add(FlowRdfFormControl.FLOW_UI_FORM_CONTROL_CLASS);
+    this.borders = boolean(this.borders, true);
+  }
+  handleClassChange() {
+    this.classList.add(FlowRdfFormControl.FLOW_UI_FORM_CONTROL_CLASS);
   }
   handleStyleChange() {
     this.syncControls();
@@ -42,7 +44,7 @@ class FlowUiFormGroup extends FlowRdfElement {
       const controls = this.getAllControls();
       controls.forEach((control, i) => {
         control.size = this.size;
-        control.divider = !this.noDividers && i < controls.length - 1;
+        control.divider = this.borders && i < controls.length - 1;
       });
     } else {
       customElements.whenDefined("flow-ui-form-group").then(() => this.syncControls());
@@ -72,8 +74,8 @@ class FlowUiFormGroup extends FlowRdfElement {
       "form-control--default": this.variant === "default",
       "form-control--warning": this.variant === "warning",
       "form-control--danger": this.variant === "danger",
-      "form-group--has-dividers": !this.noDividers,
-      "form-group--has-border": !this.noBorder
+      "form-group--has-dividers": this.borders,
+      "form-group--has-border": this.borders
     })}
         aria-labelledby="label"
         aria-describedby="help-text"
@@ -108,7 +110,10 @@ __decorateClass([
   query("slot:not([name])")
 ], FlowUiFormGroup.prototype, "defaultSlot", 2);
 __decorateClass([
-  property()
+  property({ reflect: true })
+], FlowUiFormGroup.prototype, "class", 2);
+__decorateClass([
+  property({ reflect: true })
 ], FlowUiFormGroup.prototype, "label", 2);
 __decorateClass([
   property({ reflect: true })
@@ -117,14 +122,14 @@ __decorateClass([
   property({ attribute: "help-text" })
 ], FlowUiFormGroup.prototype, "helpText", 2);
 __decorateClass([
-  property({ type: Boolean, attribute: "no-dividers", reflect: true })
-], FlowUiFormGroup.prototype, "noDividers", 2);
-__decorateClass([
-  property({ type: Boolean, attribute: "no-border", reflect: true })
-], FlowUiFormGroup.prototype, "noBorder", 2);
+  property({ type: Boolean, attribute: "borders", reflect: true })
+], FlowUiFormGroup.prototype, "borders", 2);
 __decorateClass([
   property({ reflect: true })
 ], FlowUiFormGroup.prototype, "variant", 2);
+__decorateClass([
+  watch("class")
+], FlowUiFormGroup.prototype, "handleClassChange", 1);
 __decorateClass([
   watch(["size", "noDividers", "noBorder"], { waitUntilFirstUpdate: true })
 ], FlowUiFormGroup.prototype, "handleStyleChange", 1);

package/dist/components/form-group/form-group.styles.mjs

@@ -15,10 +15,6 @@ const styles = css`
     margin-top: var(--flow-ui-spacing-x-large);
   }
 
-  :host(:first-child) {
-    margin-top: var(--flow-ui-spacing-x-small);
-  }
-
   .form-control {
     display: grid;
     grid-template-columns: 1fr;
@@ -28,10 +24,18 @@ const styles = css`
     font-size: inherit;
     font-weight: var(--flow-ui-control-font-weight);
     line-height: var(--flow-ui-line-height-dense);
+
+    --control-background-color: transparent;
+    --control-border-color: transparent;
+  }
+
+  .form-control.form-group--has-border {
+    --control-background-color: var(--flow-ui-form-group-background-color);
+    --control-border-color: var(--flow-ui-form-group-border-color);
   }
 
   .form-control.form-control--has-label .form-control__label {
-    color: var(--flow-ui-color-neutral-900);
+    color: var(--flow-ui-color-text);
     font-weight: var(--flow-ui-font-weight-semibold);
     margin-top: 0 !important;
     margin-bottom: 0 !important;
@@ -52,6 +56,7 @@ const styles = css`
     grid-template-columns: 1fr;
     grid-row-gap: var(--control-spacing);
     padding-block: calc(var(--control-spacing) / 2);
+    background-color: var(--control-background-color);
   }
 
   .form-control.form-group--has-dividers .form-group__content {