@emuanalytics/flow-rdf-ui 4.1.0-preview.0 → 4.1.0-preview.11

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-size: var(--flow-ui-font-size-medium);
     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/badge/badge.styles.mjs

@@ -19,7 +19,7 @@ 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;
@@ -31,33 +31,33 @@ const styles = css`
 
   /* Variant modifiers */
   :host([variant='primary']) {
-    --color: var(--flow-ui-color-neutral-0);
+    --color: var(--flow-ui-color-primary-contrast);
     --background-color: var(--flow-ui-color-primary-500);
   }
 
   :host([variant='secondary']) {
-    --color: var(--flow-ui-color-neutral-0);
+    --color: var(--flow-ui-color-secondary-contrast);
     --background-color: var(--flow-ui-color-secondary-500);
   }
 
   :host([variant='success']) {
-    --background-color: var(--flow-ui-color-success-600);
-    --color: var(--flow-ui-color-neutral-0);
+    --color: var(--flow-ui-color-success-contrast);
+    --background-color: var(--flow-ui-color-success-500);
   }
 
   :host([variant='neutral']) {
-    --background-color: var(--flow-ui-color-neutral-600);
-    --color: var(--flow-ui-color-neutral-0);
+    --color: var(--flow-ui-color-neutral-contrast);
+    --background-color: var(--flow-ui-color-neutral-500);
   }
 
   :host([variant='warning']) {
-    --background-color: var(--flow-ui-color-warning-600);
-    --color: var(--flow-ui-color-neutral-0);
+    --color: var(--flow-ui-color-warning-contrast);
+    --background-color: var(--flow-ui-color-warning-500);
   }
 
   :host([variant='danger']) {
-    --background-color: var(--flow-ui-color-danger-600);
-    --color: var(--flow-ui-color-neutral-0);
+    --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

@@ -6,7 +6,6 @@ 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 formControlStyles from '../../styles/form-control.styles.mjs';
 import styles from './base-control.styles.mjs';
 
 var __defProp = Object.defineProperty;
@@ -28,7 +27,6 @@ class FlowUiBaseControl extends FlowRdfFormControl {
     });
     this.hasSlotController = new HasSlotController(this, "help-text", "label");
     this.hasFocus = false;
-    this.title = "";
     this.size = "medium";
     this.filled = false;
     this.pill = false;
@@ -146,16 +144,13 @@ class FlowUiBaseControl extends FlowRdfFormControl {
     `;
   }
 }
-FlowUiBaseControl.styles = [formControlStyles, styles];
+FlowUiBaseControl.styles = styles;
 __decorateClass([
   query(".input__control")
 ], FlowUiBaseControl.prototype, "input", 2);
 __decorateClass([
   state()
 ], FlowUiBaseControl.prototype, "hasFocus", 2);
-__decorateClass([
-  property()
-], FlowUiBaseControl.prototype, "title", 2);
 __decorateClass([
   property({ reflect: true })
 ], FlowUiBaseControl.prototype, "size", 2);

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

@@ -11,7 +11,7 @@ const styles = css`
   }
 
   .form-control__input {
-    padding-inline: var(--input-spacing);
+    padding-inline: var(--control-spacing);
   }
 
   .form-control__input input {
@@ -20,7 +20,7 @@ const styles = css`
     font-size: inherit;
     font-weight: inherit;
     height: 100%;
-    color: var(--input-color);
+    color: var(--control-color);
     border: none;
     background: none;
     box-shadow: none;

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.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,9 +78,9 @@ const buttonStyles = css`
 
   /* Default */
   .button--standard.button--default {
-    background-color: var(--flow-ui-color-neutral-0);
-    border-color: var(--flow-ui-color-neutral-300);
-    color: var(--flow-ui-color-neutral-700);
+    background-color: var(--flow-ui-color-background);
+    border-color: var(--flow-ui-color-neutral-600);
+    color: var(--flow-ui-color-neutral-800);
   }
 
   .button--standard.button--default:hover:not(.button--disabled) {
@@ -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

@@ -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-neutral-0);
-    background-color: var(--flow-ui-color-primary-500);
+    color: var(--flow-ui-color-background);
+    background-color: var(--day-color-selected);
   }
 
   .calendar__header {
@@ -111,11 +115,16 @@ 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(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.styles.mjs

@@ -5,10 +5,13 @@ const styles = css`
   ${componentStyles}
 
   :host {
-    --border-color: var(--flow-ui-color-neutral-200);
-    --border-radius: var(--flow-ui-border-radius-medium);
-    --border-width: 1px;
-    --padding: var(--flow-ui-spacing-large);
+    --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-card-padding);
+
+    --background-color: var(--flow-ui-card-background-color);
+    --color: var(--flow-ui-card-color);
 
     display: inline-block;
   }
@@ -16,7 +19,8 @@ const styles = css`
   .card {
     display: flex;
     flex-direction: column;
-    background-color: var(--flow-ui-panel-background-color);
+    background-color: var(--background-color);
+    color: var(--color);
     box-shadow: var(--flow-ui-shadow-x-small);
     border: solid var(--border-width) var(--border-color);
     border-radius: var(--border-radius);
@@ -68,6 +72,15 @@ const styles = css`
   .card:not(.card--has-footer) .card__footer {
     display: none;
   }
+
+  /* Remove margin from first and last child of default slot */
+  ::slotted(:nth-child(1 of :not([slot]))) {
+    margin-top: 0;
+  }
+
+  ::slotted(:nth-last-child(1 of :not([slot]))) {
+    margin-bottom: 0;
+  }
 `;
 
 export { styles as default };

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

@@ -10,7 +10,6 @@ import { FormControlController } from '../../internal/form.mjs';
 import { HasSlotController } from '../../internal/slot.mjs';
 import { watch } from '../../internal/watch.mjs';
 import styles from './checkbox.styles.mjs';
-import formControlStyles from '../../styles/form-control.styles.mjs';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -33,13 +32,14 @@ class FlowUiCheckbox extends FlowRdfFormControl {
       setValue: (control, checked) => control.checked = checked
     });
     this.hasFocus = false;
-    this.title = "";
+    this.label = "";
     this.name = "";
     this.size = "medium";
     this.disabled = false;
     this.checked = false;
     this.indeterminate = false;
     this.defaultChecked = false;
+    this.reverse = false;
     this.form = "";
     this.required = false;
   }
@@ -49,6 +49,7 @@ class FlowUiCheckbox extends FlowRdfFormControl {
     this.indeterminate = boolean(this.indeterminate, true);
     this.disabled = boolean(this.disabled, true);
     this.required = boolean(this.required, true);
+    this.reverse = boolean(this.reverse, true);
   }
   /** Gets the validity state object */
   get validity() {
@@ -133,13 +134,14 @@ class FlowUiCheckbox extends FlowRdfFormControl {
       "checkbox--indeterminate": this.indeterminate,
       "checkbox--small": this.size === "small",
       "checkbox--medium": this.size === "medium",
-      "checkbox--large": this.size === "large"
+      "checkbox--large": this.size === "large",
+      "checkbox--reverse": this.reverse
     })}
       >
         <input
           class="checkbox__input"
           type="checkbox"
-          title=${this.title}
+          title=${this.label}
           name=${this.name}
           value=${ifDefined(this.value)}
           .indeterminate=${live(this.indeterminate)}
@@ -185,7 +187,7 @@ class FlowUiCheckbox extends FlowRdfFormControl {
     `;
   }
 }
-FlowUiCheckbox.styles = [formControlStyles, styles];
+FlowUiCheckbox.styles = styles;
 __decorateClass([
   query('input[type="checkbox"]')
 ], FlowUiCheckbox.prototype, "input", 2);
@@ -194,7 +196,7 @@ __decorateClass([
 ], FlowUiCheckbox.prototype, "hasFocus", 2);
 __decorateClass([
   property()
-], FlowUiCheckbox.prototype, "title", 2);
+], FlowUiCheckbox.prototype, "label", 2);
 __decorateClass([
   property()
 ], FlowUiCheckbox.prototype, "name", 2);
@@ -216,6 +218,9 @@ __decorateClass([
 __decorateClass([
   defaultValue("checked")
 ], FlowUiCheckbox.prototype, "defaultChecked", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiCheckbox.prototype, "reverse", 2);
 __decorateClass([
   property({ reflect: true })
 ], FlowUiCheckbox.prototype, "form", 2);