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

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

@@ -15,15 +15,15 @@ const styles = css`
     position: relative;
     display: flex;
     align-items: stretch;
-    background-color: var(--flow-ui-panel-background-color);
-    border: solid var(--flow-ui-panel-border-width) var(--flow-ui-panel-border-color);
-    border-top-width: calc(var(--flow-ui-panel-border-width) * 3);
+    background-color: var(--flow-ui-alert-background-color);
+    border: solid var(--flow-ui-alert-border-width) var(--flow-ui-alert-border-color);
+    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-weight: var(--flow-ui-font-weight-normal);
     line-height: 1.6;
-    color: var(--flow-ui-color-neutral-700);
+    color: var(--flow-ui-alert-color);
     margin: inherit;
   }
 

package/dist/components/avatar/avatar.styles.mjs

@@ -8,6 +8,8 @@ const styles = css`
     display: inline-block;
 
     --size: 3rem;
+    --background-color: var(--flow-ui-avatar-background-color, var(--flow-ui-color-neutral-600));
+    --color: var(--flow-ui-avatar-color, var(--flow-ui-color-neutral-200));
   }
 
   .avatar {
@@ -17,11 +19,11 @@ const styles = css`
     position: relative;
     width: var(--size);
     height: var(--size);
-    background-color: var(--flow-ui-color-neutral-400);
+    background-color: var(--background-color);
     font-family: var(--flow-ui-font-sans);
     font-size: calc(var(--size) * 0.5);
     font-weight: var(--flow-ui-font-weight-normal);
-    color: var(--flow-ui-color-neutral-0);
+    color: var(--color);
     user-select: none;
     vertical-align: middle;
   }

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

@@ -6,6 +6,8 @@ const styles = css`
 
   :host {
     display: inline-flex;
+    --color: var(--flow-ui-color-primary-contrast);
+    --background-color: var(--flow-ui-color-primary-500);
   }
 
   .badge {
@@ -17,42 +19,45 @@ const styles = css`
     letter-spacing: var(--flow-ui-letter-spacing-normal);
     line-height: 1;
     border-radius: var(--flow-ui-border-radius-small);
-    border: solid 1px var(--flow-ui-color-neutral-0);
+    border: solid 1px var(--background-color);
     white-space: nowrap;
     padding: 0.35em 0.6em;
     user-select: none;
     cursor: inherit;
+
+    background-color: var(--background-color);
+    color: var(--color);
   }
 
   /* Variant modifiers */
-  .badge--primary {
-    background-color: var(--flow-ui-color-primary-500);
-    color: var(--flow-ui-color-neutral-0);
+  :host([variant='primary']) {
+    --color: var(--flow-ui-color-primary-contrast);
+    --background-color: var(--flow-ui-color-primary-500);
   }
 
-  .badge--secondary {
-    background-color: var(--flow-ui-color-secondary-500);
-    color: var(--flow-ui-color-neutral-0);
+  :host([variant='secondary']) {
+    --color: var(--flow-ui-color-secondary-contrast);
+    --background-color: var(--flow-ui-color-secondary-500);
   }
 
-  .badge--success {
-    background-color: var(--flow-ui-color-success-600);
-    color: var(--flow-ui-color-neutral-0);
+  :host([variant='success']) {
+    --color: var(--flow-ui-color-success-contrast);
+    --background-color: var(--flow-ui-color-success-500);
   }
 
-  .badge--neutral {
-    background-color: var(--flow-ui-color-neutral-600);
-    color: var(--flow-ui-color-neutral-0);
+  :host([variant='neutral']) {
+    --color: var(--flow-ui-color-neutral-contrast);
+    --background-color: var(--flow-ui-color-neutral-500);
   }
 
-  .badge--warning {
-    background-color: var(--flow-ui-color-warning-600);
-    color: var(--flow-ui-color-neutral-0);
+  :host([variant='warning']) {
+    --color: var(--flow-ui-color-warning-contrast);
+    --background-color: var(--flow-ui-color-warning-500);
   }
 
-  .badge--danger {
-    background-color: var(--flow-ui-color-danger-600);
-    color: var(--flow-ui-color-neutral-0);
+  :host([variant='danger']) {
+    --color: var(--flow-ui-color-danger-contrast);
+    --background-color: var(--flow-ui-color-danger-500);
   }
 
   /* Pill modifier */

package/dist/components/base-control/base-control.component.mjs

@@ -0,0 +1,188 @@
+import { html, nothing } from 'lit';
+import { query, state, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { boolean } from '../../internal/boolean.mjs';
+import { FlowRdfFormControl } from '../../internal/flow-ui-rdf-element.mjs';
+import { FormControlController } from '../../internal/form.mjs';
+import { HasSlotController } from '../../internal/slot.mjs';
+import { watch } from '../../internal/watch.mjs';
+import styles from './base-control.styles.mjs';
+
+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 FlowUiBaseControl extends FlowRdfFormControl {
+  constructor() {
+    super(...arguments);
+    this.formControlController = new FormControlController(this, {
+      assumeInteractionOn: ["flow-ui-blur", "flow-ui-input"]
+    });
+    this.hasSlotController = new HasSlotController(this, "help-text", "label");
+    this.hasFocus = false;
+    this.size = "medium";
+    this.filled = false;
+    this.pill = false;
+    this.label = "";
+    this.helpText = "";
+    this.disabled = false;
+    this.form = "";
+    this.required = false;
+    this.inline = false;
+    this.divider = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.disabled = boolean(this.disabled, true);
+    this.required = boolean(this.required, true);
+  }
+  /** Gets the validity state object */
+  get validity() {
+    return this.input.validity;
+  }
+  /** Gets the validation message */
+  get validationMessage() {
+    return this.input.validationMessage;
+  }
+  firstUpdated() {
+    this.formControlController.updateValidity();
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.emit("flow-ui-blur");
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit("flow-ui-focus");
+  }
+  handleDisabledChange() {
+    this.formControlController.setValidity(this.disabled);
+  }
+  /** Sets focus on the input. */
+  focus(options) {
+    this.input.focus(options);
+  }
+  /** Removes focus from the input. */
+  blur() {
+    this.input.blur();
+  }
+  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+  checkValidity() {
+    return this.input.checkValidity();
+  }
+  /** Gets the associated form, if one exists. */
+  getForm() {
+    return this.formControlController.getForm();
+  }
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  reportValidity() {
+    return this.input.reportValidity();
+  }
+  /** Sets a custom validation message. Pass an empty string to restore validity. */
+  setCustomValidity(message) {
+    this.input.setCustomValidity(message);
+    this.formControlController.updateValidity();
+  }
+  render() {
+    const hasLabelSlot = this.hasSlotController.test("label");
+    const hasHelpTextSlot = this.hasSlotController.test("help-text");
+    const hasLabel = this.label ? true : !!hasLabelSlot;
+    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
+    return html`
+      <div
+        part="form-control"
+        class=${classMap({
+      "form-control": true,
+      "form-control--small": this.size === "small",
+      "form-control--medium": this.size === "medium",
+      "form-control--large": this.size === "large",
+      "form-control--inline": this.inline,
+      "form-control--disabled": this.disabled,
+      "form-control--focused": this.hasFocus,
+      "form-control--has-label": hasLabel,
+      "form-control--has-help-text": hasHelpText,
+      "form-control--has-divider": this.divider,
+      "form-control--filled": this.filled,
+      "form-control--pill": this.pill
+    })}
+      >
+        <label
+          part="form-control-label"
+          class="form-control__label"
+          for="input"
+          aria-hidden=${hasLabel ? "false" : "true"}
+        >
+          <slot name="label">${this.label}</slot>
+        </label>
+
+        <slot
+          name="help-text"
+          part="form-control-help-text"
+          id="help-text"
+          class="form-control__help-text"
+          aria-hidden=${hasHelpText ? "false" : "true"}
+        >
+          ${this.helpText}
+        </slot>
+
+        <div part="form-control-input" class=${classMap({
+      "form-control__input": true
+    })}>
+            <input class="input__control" placeholder="Enter text" ?disabled=${this.disabled} ?required=${this.required} @focus=${this.handleFocus} @blur=${this.handleBlur}></input>
+        </div>
+        ${this.divider ? this.renderDivider() : nothing}
+        </div>
+
+      </div>
+    `;
+  }
+}
+FlowUiBaseControl.styles = styles;
+__decorateClass([
+  query(".input__control")
+], FlowUiBaseControl.prototype, "input", 2);
+__decorateClass([
+  state()
+], FlowUiBaseControl.prototype, "hasFocus", 2);
+__decorateClass([
+  property({ reflect: true })
+], FlowUiBaseControl.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiBaseControl.prototype, "filled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiBaseControl.prototype, "pill", 2);
+__decorateClass([
+  property()
+], FlowUiBaseControl.prototype, "label", 2);
+__decorateClass([
+  property({ attribute: "help-text" })
+], FlowUiBaseControl.prototype, "helpText", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiBaseControl.prototype, "disabled", 2);
+__decorateClass([
+  property({ reflect: true })
+], FlowUiBaseControl.prototype, "form", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiBaseControl.prototype, "required", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiBaseControl.prototype, "inline", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiBaseControl.prototype, "divider", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], FlowUiBaseControl.prototype, "handleDisabledChange", 1);
+
+export { FlowUiBaseControl as default };

package/dist/components/base-control/base-control.mjs

@@ -0,0 +1,5 @@
+import FlowUiBaseControl from './base-control.component.mjs';
+
+
+
+export { FlowUiBaseControl as default };

package/dist/components/base-control/base-control.styles.mjs

@@ -0,0 +1,39 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+import formControlStyles from '../../styles/form-control.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+  ${formControlStyles}
+
+  :host {
+    display: inline-block;
+  }
+
+  .form-control__input {
+    padding-inline: var(--control-spacing);
+  }
+
+  .form-control__input input {
+    flex: 1;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    height: 100%;
+    color: var(--control-color);
+    border: none;
+    background: none;
+    box-shadow: none;
+    padding: 0;
+    margin: 0;
+    cursor: inherit;
+    outline: none;
+    -webkit-appearance: none;
+  }
+
+  .form-control.form-control--inline input {
+    min-width: 15ch;
+  }
+`;
+
+export { styles as default };

package/dist/components/button/button.component.mjs

@@ -38,7 +38,7 @@ class FlowUiButton extends FlowRdfFormControl {
     this.hasSlotController = new HasSlotController(this, "[default]", "prefix", "suffix");
     this.localize = new LocalizeController(this);
     this.hasFocus = false;
-    this.title = "";
+    this.label = "";
     this.variant = "default";
     this.size = "medium";
     this.caret = false;
@@ -199,7 +199,7 @@ class FlowUiButton extends FlowRdfFormControl {
     })}
         ?disabled=${ifDefined(isLink ? void 0 : this.disabled)}
         type=${ifDefined(isLink ? void 0 : this.type)}
-        title=${this.title}
+        title=${this.label}
         name=${ifDefined(isLink ? void 0 : this.name)}
         value=${ifDefined(isLink ? void 0 : this.value)}
         href=${ifDefined(isLink ? this.href : void 0)}
@@ -236,7 +236,7 @@ __decorateClass([
 ], FlowUiButton.prototype, "hasFocus", 2);
 __decorateClass([
   property()
-], FlowUiButton.prototype, "title", 2);
+], FlowUiButton.prototype, "label", 2);
 __decorateClass([
   property({ reflect: true })
 ], FlowUiButton.prototype, "variant", 2);

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

@@ -17,8 +17,8 @@ const buttonStyles = css`
     justify-content: center;
     width: 100%;
     border-style: solid;
-    border-width: var(--flow-ui-input-border-width);
-    font-family: var(--flow-ui-input-font-family);
+    border-width: var(--flow-ui-control-border-width);
+    font-family: var(--flow-ui-control-font-family);
     font-weight: var(--flow-ui-font-weight-semibold);
     text-decoration: none;
     text-transform: var(--flow-ui-button-text-transform, uppercase);
@@ -64,7 +64,6 @@ const buttonStyles = css`
     align-items: center;
     pointer-events: none;
   }
-
   .button__label {
     display: inline-block;
   }
@@ -79,7 +78,7 @@ const buttonStyles = css`
 
   /* Default */
   .button--standard.button--default {
-    background-color: var(--flow-ui-color-neutral-0);
+    background-color: var(--flow-ui-color-background);
     border-color: var(--flow-ui-color-neutral-300);
     color: var(--flow-ui-color-neutral-700);
   }
@@ -228,13 +227,13 @@ const buttonStyles = css`
   .button--outline.button--default.button--checked:not(.button--disabled) {
     border-color: var(--flow-ui-color-primary-500);
     background-color: var(--flow-ui-color-primary-500);
-    color: var(--flow-ui-color-neutral-0);
+    color: var(--flow-ui-color-background);
   }
 
   .button--outline.button--default:active:not(.button--disabled) {
     border-color: var(--flow-ui-color-primary-600);
     background-color: var(--flow-ui-color-primary-600);
-    color: var(--flow-ui-color-neutral-0);
+    color: var(--flow-ui-color-background);
   }
 
   /* Primary */
@@ -246,13 +245,31 @@ const buttonStyles = css`
   .button--outline.button--primary:hover:not(.button--disabled),
   .button--outline.button--primary.button--checked:not(.button--disabled) {
     background-color: var(--flow-ui-color-primary-500);
-    color: var(--flow-ui-color-neutral-0);
+    color: var(--flow-ui-color-background);
   }
 
   .button--outline.button--primary:active:not(.button--disabled) {
     border-color: var(--flow-ui-color-primary-600);
     background-color: var(--flow-ui-color-primary-600);
-    color: var(--flow-ui-color-neutral-0);
+    color: var(--flow-ui-color-background);
+  }
+
+  /* Secondary */
+  .button--outline.button--secondary {
+    border-color: var(--flow-ui-color-secondary-500);
+    color: var(--flow-ui-color-secondary-500);
+  }
+
+  .button--outline.button--secondary:hover:not(.button--disabled),
+  .button--outline.button--secondary.button--checked:not(.button--disabled) {
+    background-color: var(--flow-ui-color-secondary-500);
+    color: var(--flow-ui-color-background);
+  }
+
+  .button--outline.button--secondary:active:not(.button--disabled) {
+    border-color: var(--flow-ui-color-secondary-600);
+    background-color: var(--flow-ui-color-secondary-600);
+    color: var(--flow-ui-color-background);
   }
 
   /* Success */
@@ -264,13 +281,13 @@ const buttonStyles = css`
   .button--outline.button--success:hover:not(.button--disabled),
   .button--outline.button--success.button--checked:not(.button--disabled) {
     background-color: var(--flow-ui-color-success-600);
-    color: var(--flow-ui-color-neutral-0);
+    color: var(--flow-ui-color-background);
   }
 
   .button--outline.button--success:active:not(.button--disabled) {
     border-color: var(--flow-ui-color-success-700);
     background-color: var(--flow-ui-color-success-700);
-    color: var(--flow-ui-color-neutral-0);
+    color: var(--flow-ui-color-background);
   }
 
   /* Neutral */
@@ -282,13 +299,13 @@ const buttonStyles = css`
   .button--outline.button--neutral:hover:not(.button--disabled),
   .button--outline.button--neutral.button--checked:not(.button--disabled) {
     background-color: var(--flow-ui-color-neutral-600);
-    color: var(--flow-ui-color-neutral-0);
+    color: var(--flow-ui-color-background);
   }
 
   .button--outline.button--neutral:active:not(.button--disabled) {
     border-color: var(--flow-ui-color-neutral-700);
     background-color: var(--flow-ui-color-neutral-700);
-    color: var(--flow-ui-color-neutral-0);
+    color: var(--flow-ui-color-background);
   }
 
   /* Warning */
@@ -300,13 +317,13 @@ const buttonStyles = css`
   .button--outline.button--warning:hover:not(.button--disabled),
   .button--outline.button--warning.button--checked:not(.button--disabled) {
     background-color: var(--flow-ui-color-warning-600);
-    color: var(--flow-ui-color-neutral-0);
+    color: var(--flow-ui-color-background);
   }
 
   .button--outline.button--warning:active:not(.button--disabled) {
     border-color: var(--flow-ui-color-warning-700);
     background-color: var(--flow-ui-color-warning-700);
-    color: var(--flow-ui-color-neutral-0);
+    color: var(--flow-ui-color-background);
   }
 
   /* Danger */
@@ -318,13 +335,13 @@ const buttonStyles = css`
   .button--outline.button--danger:hover:not(.button--disabled),
   .button--outline.button--danger.button--checked:not(.button--disabled) {
     background-color: var(--flow-ui-color-danger-600);
-    color: var(--flow-ui-color-neutral-0);
+    color: var(--flow-ui-color-background);
   }
 
   .button--outline.button--danger:active:not(.button--disabled) {
     border-color: var(--flow-ui-color-danger-700);
     background-color: var(--flow-ui-color-danger-700);
-    color: var(--flow-ui-color-neutral-0);
+    color: var(--flow-ui-color-background);
   }
 
   @media (forced-colors: active) {
@@ -367,34 +384,34 @@ const buttonStyles = css`
 
   .button--x-small {
     height: auto;
-    min-height: var(--flow-ui-input-height-small);
+    min-height: var(--flow-ui-control-height-small);
     font-size: var(--flow-ui-button-font-size-x-small);
-    line-height: calc(var(--flow-ui-input-height-small) - var(--flow-ui-input-border-width) * 2);
-    border-radius: var(--flow-ui-input-border-radius-small);
+    line-height: calc(var(--flow-ui-control-height-small) - var(--flow-ui-control-border-width) * 2);
+    border-radius: var(--flow-ui-control-border-radius-small);
   }
 
   .button--small {
     height: auto;
-    min-height: var(--flow-ui-input-height-small);
+    min-height: var(--flow-ui-control-height-small);
     font-size: var(--flow-ui-button-font-size-small);
-    line-height: calc(var(--flow-ui-input-height-small) - var(--flow-ui-input-border-width) * 2);
-    border-radius: var(--flow-ui-input-border-radius-small);
+    line-height: calc(var(--flow-ui-control-height-small) - var(--flow-ui-control-border-width) * 2);
+    border-radius: var(--flow-ui-control-border-radius-small);
   }
 
   .button--medium {
     height: auto;
-    min-height: var(--flow-ui-input-height-medium);
+    min-height: var(--flow-ui-control-height-medium);
     font-size: var(--flow-ui-button-font-size-medium);
-    line-height: calc(var(--flow-ui-input-height-medium) - var(--flow-ui-input-border-width) * 2);
-    border-radius: var(--flow-ui-input-border-radius-medium);
+    line-height: calc(var(--flow-ui-control-height-medium) - var(--flow-ui-control-border-width) * 2);
+    border-radius: var(--flow-ui-control-border-radius-medium);
   }
 
   .button--large {
     height: auto;
-    min-height: var(--flow-ui-input-height-large);
+    min-height: var(--flow-ui-control-height-large);
     font-size: var(--flow-ui-button-font-size-large);
-    line-height: calc(var(--flow-ui-input-height-large) - var(--flow-ui-input-border-width) * 2);
-    border-radius: var(--flow-ui-input-border-radius-large);
+    line-height: calc(var(--flow-ui-control-height-large) - var(--flow-ui-control-border-width) * 2);
+    border-radius: var(--flow-ui-control-border-radius-large);
   }
 
   /*
@@ -402,15 +419,15 @@ const buttonStyles = css`
    */
 
   .button--pill.button--small {
-    border-radius: var(--flow-ui-input-height-small);
+    border-radius: var(--flow-ui-control-height-small);
   }
 
   .button--pill.button--medium {
-    border-radius: var(--flow-ui-input-height-medium);
+    border-radius: var(--flow-ui-control-height-medium);
   }
 
   .button--pill.button--large {
-    border-radius: var(--flow-ui-input-height-large);
+    border-radius: var(--flow-ui-control-height-large);
   }
 
   /*
@@ -428,19 +445,19 @@ const buttonStyles = css`
   }
 
   .button--fab.button--small {
-    width: var(--flow-ui-input-height-small);
+    width: var(--flow-ui-control-height-small);
     box-shadow: var(--flow-ui-shadow-small);
     font-size: var(--flow-ui-font-size-medium);
   }
 
   .button--fab.button--medium {
-    width: var(--flow-ui-input-height-medium);
+    width: var(--flow-ui-control-height-medium);
     box-shadow: var(--flow-ui-shadow-medium);
     font-size: var(--flow-ui-font-size-large);
   }
 
   .button--fab.button--large {
-    width: var(--flow-ui-input-height-large);
+    width: var(--flow-ui-control-height-large);
     box-shadow: var(--flow-ui-shadow-large);
     font-size: var(--flow-ui-font-size-large);
   }
@@ -629,7 +646,7 @@ const buttonStyles = css`
   :host(
       .flow-ui-button-group__button:not(.flow-ui-button-group__button--vertical, .flow-ui-button-group__button--first)
     ) {
-    margin-inline-start: calc(-1 * var(--flow-ui-input-border-width));
+    margin-inline-start: calc(-1 * var(--flow-ui-control-border-width));
   }
 
   /* Add a visual separator between solid buttons */
@@ -668,7 +685,7 @@ const buttonStyles = css`
   }
 
   :host(.flow-ui-button-group__button--vertical:not(.flow-ui-button-group__button--first)) {
-    margin-block-start: calc(-1 * var(--flow-ui-input-border-width));
+    margin-block-start: calc(-1 * var(--flow-ui-control-border-width));
   }
 
   /* Bump hovered, focused, and checked buttons up so their focus ring isn't clipped */

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

@@ -124,6 +124,8 @@ class FlowUiCalendar extends FlowRdfElement {
           @click=${() => this.stepDisplayDate({ month: -1 })}
         ></flow-ui-icon-button>
         <flow-ui-select
+          inline
+          sync="width"
           class="calendar__month-select calendar__header-select"
           value=${this._displayDate.month}
           @flow-ui-change=${this.handleHeaderSelectChange}
@@ -135,6 +137,8 @@ class FlowUiCalendar extends FlowRdfElement {
     )}
         </flow-ui-select>
         <flow-ui-select
+          inline
+          sync="width"
           class="calendar__year-select calendar__header-select"
           value=${this._displayDate.year}
           @flow-ui-change=${this.handleHeaderSelectChange}

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

@@ -88,19 +88,13 @@ const styles = css`
   }
 
   .calendar__day--selected {
-    color: var(--flow-ui-color-neutral-0);
+    color: var(--flow-ui-color-background);
     background-color: var(--flow-ui-color-primary-500);
   }
 
-  .calendar__header-select::part(combobox) {
-    background-color: inherit;
-    border: none;
-    min-height: auto;
-    gap: var(--flow-ui-spacing-x-small);
-  }
-
-  .calendar__header-select::part(expand-icon) {
-    margin: 0;
+  .calendar__header {
+    justify-content: space-between;
+    padding-inline: var(--flow-ui-spacing-small);
   }
 
   .calendar__header-select::part(listbox) {
@@ -117,7 +111,7 @@ const styles = css`
     flex: 1;
     /* Allow the input to shrink to accommodate narrow calendars in sidebars */
     min-width: 0;
-    --flow-ui-input-spacing-medium: var(--flow-ui-spacing-small);
+    --flow-ui-control-spacing-medium: var(--flow-ui-spacing-small);
   }
 
   .calendar__time-input::part(input) {