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

package/dist/components/color-mapper/color-mapper.styles.mjs

@@ -11,6 +11,10 @@ const styles = css`
 
   /*------- Color mode radio styles ------ */
 
+  .color-mode-radio-group {
+    width: 100%;
+  }
+
   .color-mode-radio {
     margin-bottom: var(--flow-ui-spacing-x-small);
   }
@@ -36,16 +40,11 @@ const styles = css`
     margin-inline-start: auto;
   }
 
-  flow-ui-select.color-mode-control {
-    /* Stretch attribute selector to fill available space */
-    flex: 1;
-  }
-
   /*------- Fixed color picker styles ------ */
 
   #fixed-color-picker::part(trigger) {
     /* match input box styling */
-    border-radius: var(--flow-ui-input-border-radius-small);
+    border-radius: var(--flow-ui-control-border-radius-small);
   }
 
   flow-ui-color-picker {
@@ -81,12 +80,11 @@ const styles = css`
   }
 
   .color-mapper--data-driven flow-ui-color-stop[data-user-invalid]::part(input) {
-    --flow-ui-input-border-color: var(--flow-ui-color-danger-500);
-    --flow-ui-input-border-color-hover: var(--flow-ui-color-danger-500);
-    --flow-ui-input-border-color-focus: var(--flow-ui-color-danger-500);
-    --flow-ui-input-focus-ring-color: var(--flow-ui-color-danger-100);
+    --flow-ui-control-border-color: var(--flow-ui-color-danger-500);
+    --flow-ui-control-border-color-hover: var(--flow-ui-color-danger-500);
+    --flow-ui-control-border-color-focus: var(--flow-ui-color-danger-500);
+    --flow-ui-control-focus-ring-color: var(--flow-ui-color-danger-100);
   }
-
 `;
 
 export { styles as default };

package/dist/components/color-picker/color-picker.styles.mjs

@@ -21,13 +21,13 @@ const styles = css`
     font-size: var(--flow-ui-font-size-medium);
     font-weight: var(--flow-ui-font-weight-normal);
     color: var(--color);
-    background-color: var(--flow-ui-panel-background-color);
+    background-color: var(--flow-ui-menu-background-color);
     border-radius: var(--flow-ui-border-radius-medium);
     user-select: none;
   }
 
   .color-picker--inline {
-    border: solid var(--flow-ui-panel-border-width) var(--flow-ui-panel-border-color);
+    border: solid var(--flow-ui-menu-border-width) var(--flow-ui-menu-border-color);
   }
 
   .color-picker--inline:focus-visible {
@@ -245,7 +245,11 @@ const styles = css`
       linear-gradient(45deg, transparent 75%, var(--flow-ui-color-neutral-300) 75%),
       linear-gradient(45deg, var(--flow-ui-color-neutral-300) 25%, transparent 25%);
     background-size: 10px 10px;
-    background-position: 0 0, 0 0, -5px -5px, 5px 5px;
+    background-position:
+      0 0,
+      0 0,
+      -5px -5px,
+      5px 5px;
   }
 
   .color-picker--disabled {
@@ -269,8 +273,8 @@ const styles = css`
 
   .color-dropdown::part(panel) {
     max-height: none;
-    background-color: var(--flow-ui-panel-background-color);
-    border: solid var(--flow-ui-panel-border-width) var(--flow-ui-panel-border-color);
+    background-color: var(--flow-ui-menu-background-color);
+    border: solid var(--flow-ui-menu-border-width) var(--flow-ui-menu-border-color);
     border-radius: var(--flow-ui-border-radius-medium);
     overflow: visible;
   }
@@ -286,20 +290,20 @@ const styles = css`
   }
 
   .color-dropdown__trigger.color-dropdown__trigger--small {
-    width: var(--flow-ui-input-height-small);
-    height: var(--flow-ui-input-height-small);
+    width: var(--flow-ui-control-height-small);
+    height: var(--flow-ui-control-height-small);
     border-radius: var(--flow-ui-border-radius-circle);
   }
 
   .color-dropdown__trigger.color-dropdown__trigger--medium {
-    width: var(--flow-ui-input-height-medium);
-    height: var(--flow-ui-input-height-medium);
+    width: var(--flow-ui-control-height-medium);
+    height: var(--flow-ui-control-height-medium);
     border-radius: var(--flow-ui-border-radius-circle);
   }
 
   .color-dropdown__trigger.color-dropdown__trigger--large {
-    width: var(--flow-ui-input-height-large);
-    height: var(--flow-ui-input-height-large);
+    width: var(--flow-ui-control-height-large);
+    height: var(--flow-ui-control-height-large);
     border-radius: var(--flow-ui-border-radius-circle);
   }
 
@@ -312,7 +316,9 @@ const styles = css`
     height: 100%;
     border-radius: inherit;
     background-color: currentColor;
-    box-shadow: inset 0 0 0 var(--flow-ui-input-border-width) var(--flow-ui-input-border-color), inset 0 0 0 4px var(--flow-ui-color-neutral-0);
+    box-shadow:
+      inset 0 0 0 var(--flow-ui-control-border-width) var(--flow-ui-control-border-color),
+      inset 0 0 0 4px var(--flow-ui-color-neutral-0);
   }
 
   .color-dropdown__trigger--empty:before {

package/dist/components/color-stop/color-stop.styles.mjs

@@ -28,32 +28,27 @@ const styles = css`
     min-width: 15em;
   }
 
-  .color-stop__input::part(input) {
-    /* remove 180px from input */
-    width: 0;
-  }
-
   .color-stop__input::part(suffix) {
     /* remove excessive space from suffix */
-    --flow-ui-input-spacing-small: var(--flow-ui-spacing-2x-small);
-    --flow-ui-input-spacing-medium: var(--flow-ui-spacing-x-small);
-    --flow-ui-input-spacing-large: var(--flow-ui-spacing-x-small);
+    --flow-ui-control-spacing-small: var(--flow-ui-spacing-2x-small);
+    --flow-ui-control-spacing-medium: var(--flow-ui-spacing-x-small);
+    --flow-ui-control-spacing-large: var(--flow-ui-spacing-x-small);
   }
 
   /* Sizes */
 
   .color-stop--small {
-    font-size: var(--flow-ui-input-font-size-small);
+    font-size: var(--flow-ui-control-font-size-small);
     --spacing: var(--flow-ui-spacing-x-small);
   }
 
   .color-stop--medium {
-    font-size: var(--flow-ui-input-font-size-medium);
+    font-size: var(--flow-ui-control-font-size-medium);
     --spacing: var(--flow-ui-spacing-x-small);
   }
 
   .color-stop--large {
-    font-size: var(--flow-ui-input-font-size-large);
+    font-size: var(--flow-ui-control-font-size-large);
     --spacing: var(--flow-ui-spacing-small);
   }
 
@@ -61,7 +56,7 @@ const styles = css`
 
   .color-stop__picker::part(trigger) {
     /* match input box styling */
-    border-radius: var(--flow-ui-input-border-radius-small);
+    border-radius: var(--flow-ui-control-border-radius-small);
   }
 
   /* Default variant */

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

@@ -60,6 +60,8 @@ class FlowUiDateTimePicker extends FlowRdfFormControl {
     this.helpText = "";
     this.form = "";
     this.required = false;
+    this.inline = false;
+    this.divider = false;
   }
   /** Gets the validity state object */
   get validity() {
@@ -287,7 +289,9 @@ class FlowUiDateTimePicker extends FlowRdfFormControl {
       "form-control--medium": this.size === "medium",
       "form-control--large": this.size === "large",
       "form-control--has-label": hasLabel,
-      "form-control--has-help-text": hasHelpText
+      "form-control--has-help-text": hasHelpText,
+      "form-control--has-divider": this.divider,
+      "form-control--inline": this.inline
     })}
       >
         <label
@@ -300,7 +304,17 @@ class FlowUiDateTimePicker extends FlowRdfFormControl {
           <slot name="label">${this.label}</slot>
         </label>
 
-        <div part="form-control-input" class="form-control-input">
+        <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="form-control__input">
           <flow-ui-popup
             class=${classMap({
       datepicker: true,
@@ -336,28 +350,31 @@ class FlowUiDateTimePicker extends FlowRdfFormControl {
             >
               <slot part="prefix" name="prefix" class="datepicker__prefix"></slot>
 
-              <input
-                part="display-input"
-                class="datepicker__display-input"
-                type="text"
-                placeholder=${this.placeholder}
-                .disabled=${this.disabled}
-                .value=${this.displayLabel}
-                autocomplete="off"
-                spellcheck="false"
-                autocapitalize="off"
-                readonly
-                aria-controls="listbox"
-                aria-expanded=${this.open ? "true" : "false"}
-                aria-haspopup="listbox"
-                aria-labelledby="label"
-                aria-disabled=${this.disabled ? "true" : "false"}
-                aria-describedby="help-text"
-                role="combobox"
-                tabindex="0"
-                @focus=${this.handleFocus}
-                @blur=${this.handleBlur}
-              />
+              <div class="input__wrapper">
+                <input
+                  part="display-input"
+                  class="datepicker__display-input"
+                  type="text"
+                  placeholder=${this.placeholder}
+                  .disabled=${this.disabled}
+                  .value=${this.displayLabel}
+                  autocomplete="off"
+                  spellcheck="false"
+                  autocapitalize="off"
+                  readonly
+                  aria-controls="listbox"
+                  aria-expanded=${this.open ? "true" : "false"}
+                  aria-haspopup="listbox"
+                  aria-labelledby="label"
+                  aria-disabled=${this.disabled ? "true" : "false"}
+                  aria-describedby="help-text"
+                  role="combobox"
+                  tabindex="0"
+                  @focus=${this.handleFocus}
+                  @blur=${this.handleBlur}
+                />
+                <span class="input__sizer">${this.displayLabel || this.placeholder}</span>
+              </div>
 
               <input
                 class="datepicker__value-input"
@@ -410,15 +427,7 @@ class FlowUiDateTimePicker extends FlowRdfFormControl {
           </flow-ui-popup>
         </div>
 
-        <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>
+        ${this.divider ? this.renderDivider() : nothing}
       </div>
     `;
   }
@@ -502,6 +511,12 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], FlowUiDateTimePicker.prototype, "required", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiDateTimePicker.prototype, "inline", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiDateTimePicker.prototype, "divider", 2);
 __decorateClass([
   watch(["value", "format", "timezone", "locale"])
 ], FlowUiDateTimePicker.prototype, "updateDisplayLabel", 1);

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

@@ -41,9 +41,9 @@ const styles = css`
     position: relative;
     align-items: center;
     justify-content: start;
-    font-family: var(--flow-ui-input-font-family);
-    font-weight: var(--flow-ui-input-font-weight);
-    letter-spacing: var(--flow-ui-input-letter-spacing);
+    font-family: var(--flow-ui-control-font-family);
+    font-weight: var(--flow-ui-control-font-weight);
+    letter-spacing: var(--flow-ui-control-letter-spacing);
     vertical-align: middle;
     overflow: hidden;
     cursor: pointer;
@@ -60,7 +60,7 @@ const styles = css`
     font: inherit;
     border: none;
     background: none;
-    color: var(--flow-ui-input-color);
+    color: var(--flow-ui-control-color);
     cursor: inherit;
     overflow: hidden;
     padding: 0;
@@ -69,13 +69,30 @@ const styles = css`
   }
 
   .datepicker:not(.datepicker--disabled):hover .datepicker__display-input {
-    color: var(--flow-ui-input-color-hover);
+    color: var(--flow-ui-control-color-hover);
   }
 
   .datepicker__display-input:focus {
     outline: none;
   }
 
+  /* Wrapper to allow display input to be sized based on its content */
+  .input__wrapper {
+    flex: 1;
+    display: grid;
+  }
+
+  .form-control--inline .input__wrapper {
+    grid-template-columns: min-content;
+  }
+
+  /* For measuring width of displayed option text */
+  .input__sizer {
+    white-space: pre;
+    height: 0;
+    overflow: hidden;
+  }
+
   .datepicker__value-input {
     position: absolute;
     top: 0;
@@ -88,15 +105,10 @@ const styles = css`
     z-index: -1;
   }
 
-  .datepicker--standard .datepicker__combobox {
-    background-color: var(--flow-ui-input-background-color);
-    border: solid var(--flow-ui-input-border-width) var(--flow-ui-input-border-color);
-  }
-
   .datepicker--standard.datepicker--disabled .datepicker__combobox {
-    background-color: var(--flow-ui-input-background-color-disabled);
-    border-color: var(--flow-ui-input-border-color-disabled);
-    color: var(--flow-ui-input-color-disabled);
+    background-color: var(--flow-ui-control-background-color-disabled);
+    border-color: var(--flow-ui-control-border-color-disabled);
+    color: var(--flow-ui-control-color-disabled);
     opacity: 0.5;
     cursor: not-allowed;
     outline: none;
@@ -104,93 +116,93 @@ const styles = css`
 
   .datepicker--standard:not(.datepicker--disabled).datepicker--open .datepicker__combobox,
   .datepicker--standard:not(.datepicker--disabled).datepicker--focused .datepicker__combobox {
-    background-color: var(--flow-ui-input-background-color-focus);
-    border-color: var(--flow-ui-input-border-color-focus);
-    box-shadow: 0 0 0 var(--flow-ui-focus-ring-width) var(--flow-ui-input-focus-ring-color);
+    background-color: var(--flow-ui-control-background-color-focus);
+    border-color: var(--flow-ui-control-border-color-focus);
+    box-shadow: 0 0 0 var(--flow-ui-focus-ring-width) var(--flow-ui-control-focus-ring-color);
   }
 
   .datepicker--filled .datepicker__combobox {
     border: none;
-    background-color: var(--flow-ui-input-filled-background-color);
-    color: var(--flow-ui-input-color);
+    background-color: var(--flow-ui-control-filled-background-color);
+    color: var(--flow-ui-control-color);
   }
 
   .datepicker--filled:hover:not(.datepicker--disabled) .datepicker__combobox {
-    background-color: var(--flow-ui-input-filled-background-color-hover);
+    background-color: var(--flow-ui-control-filled-background-color-hover);
   }
 
   .datepicker--filled.datepicker--disabled .datepicker__combobox {
-    background-color: var(--flow-ui-input-filled-background-color-disabled);
+    background-color: var(--flow-ui-control-filled-background-color-disabled);
     opacity: 0.5;
     cursor: not-allowed;
   }
 
   .datepicker--filled:not(.datepicker--disabled).datepicker--open .datepicker__combobox,
   .datepicker--filled:not(.datepicker--disabled).datepicker--focused .datepicker__combobox {
-    background-color: var(--flow-ui-input-filled-background-color-focus);
+    background-color: var(--flow-ui-control-filled-background-color-focus);
     outline: var(--flow-ui-focus-ring);
   }
 
   /* Sizes */
   .datepicker--small .datepicker__combobox {
-    border-radius: var(--flow-ui-input-border-radius-small);
-    font-size: var(--flow-ui-input-font-size-small);
-    min-height: var(--flow-ui-input-height-small);
+    border-radius: var(--flow-ui-control-border-radius-small);
+    font-size: var(--flow-ui-control-font-size-small);
+    min-height: var(--flow-ui-control-height-small);
     padding-block: 0;
-    padding-inline: var(--flow-ui-input-spacing-small);
+    padding-inline: var(--flow-ui-control-spacing-small);
   }
 
   .datepicker--small .datepicker__clear {
-    margin-inline-start: var(--flow-ui-input-spacing-small);
+    margin-inline-start: var(--flow-ui-control-spacing-small);
   }
 
   .datepicker--small .datepicker__prefix::slotted(*) {
-    margin-inline-end: var(--flow-ui-input-spacing-small);
+    margin-inline-end: var(--flow-ui-control-spacing-small);
   }
 
   .datepicker--medium .datepicker__combobox {
-    border-radius: var(--flow-ui-input-border-radius-medium);
-    font-size: var(--flow-ui-input-font-size-medium);
-    min-height: var(--flow-ui-input-height-medium);
+    border-radius: var(--flow-ui-control-border-radius-medium);
+    font-size: var(--flow-ui-control-font-size-medium);
+    min-height: var(--flow-ui-control-height-medium);
     padding-block: 0;
-    padding-inline: var(--flow-ui-input-spacing-medium);
+    padding-inline: var(--flow-ui-control-spacing-medium);
   }
 
   .datepicker--medium .datepicker__clear {
-    margin-inline-start: var(--flow-ui-input-spacing-medium);
+    margin-inline-start: var(--flow-ui-control-spacing-medium);
   }
 
   .datepicker--medium .datepicker__prefix::slotted(*) {
-    margin-inline-end: var(--flow-ui-input-spacing-medium);
+    margin-inline-end: var(--flow-ui-control-spacing-medium);
   }
 
   .datepicker--large .datepicker__combobox {
-    border-radius: var(--flow-ui-input-border-radius-large);
-    font-size: var(--flow-ui-input-font-size-large);
-    min-height: var(--flow-ui-input-height-large);
+    border-radius: var(--flow-ui-control-border-radius-large);
+    font-size: var(--flow-ui-control-font-size-large);
+    min-height: var(--flow-ui-control-height-large);
     padding-block: 0;
-    padding-inline: var(--flow-ui-input-spacing-large);
+    padding-inline: var(--flow-ui-control-spacing-large);
   }
 
   .datepicker--large .datepicker__clear {
-    margin-inline-start: var(--flow-ui-input-spacing-large);
+    margin-inline-start: var(--flow-ui-control-spacing-large);
   }
 
   .datepicker--large .datepicker__prefix::slotted(*) {
-    margin-inline-end: var(--flow-ui-input-spacing-large);
+    margin-inline-end: var(--flow-ui-control-spacing-large);
   }
 
   /* Pills */
   .datepicker--pill.datepicker--small .datepicker__combobox {
-    border-radius: var(--flow-ui-input-height-small);
+    border-radius: var(--flow-ui-control-height-small);
   }
 
   .datepicker--pill.datepicker--medium .datepicker__combobox {
-    border-radius: var(--flow-ui-input-height-medium);
+    border-radius: var(--flow-ui-control-height-medium);
   }
 
   .datepicker--pill.datepicker--large .datepicker__combobox {
-    border-radius: var(--flow-ui-input-height-large);
+    border-radius: var(--flow-ui-control-height-large);
   }
 
   /* Prefix */
@@ -198,7 +210,7 @@ const styles = css`
     flex: 0;
     display: inline-flex;
     align-items: center;
-    color: var(--flow-ui-input-placeholder-color);
+    color: var(--flow-ui-control-placeholder-color);
   }
 
   /* Clear button */
@@ -207,7 +219,7 @@ const styles = css`
     align-items: center;
     justify-content: center;
     font-size: inherit;
-    color: var(--flow-ui-input-icon-color);
+    color: var(--flow-ui-control-icon-color);
     border: none;
     background: none;
     padding: 0;
@@ -216,7 +228,7 @@ const styles = css`
   }
 
   .datepicker__clear:hover {
-    color: var(--flow-ui-input-icon-color-hover);
+    color: var(--flow-ui-control-icon-color-hover);
   }
 
   .datepicker__clear:focus {
@@ -244,8 +256,8 @@ 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-panel-background-color);
-    border: solid var(--flow-ui-panel-border-width) var(--flow-ui-panel-border-color);
+    background: var(--flow-ui-menu-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);
     overflow: auto;

package/dist/components/details/details.styles.mjs

@@ -6,12 +6,21 @@ const styles = css`
 
   :host {
     display: block;
+
+    --border-color: var(--flow-ui-details-border-color);
+    --border-radius: var(--flow-ui-details-border-radius);
+    --border-width: var(--flow-ui-details-border-width);
+    --padding: var(--flow-ui-spacing-small);
+
+    --background-color: var(--flow-ui-details-background-color);
+    --color: var(--flow-ui-details-color);
   }
 
   .details {
-    border: solid 1px var(--flow-ui-color-neutral-200);
-    border-radius: var(--flow-ui-border-radius-medium);
-    background-color: var(--flow-ui-color-neutral-0);
+    border: solid var(--border-width) var(--border-color);
+    border-radius: var(--border-radius);
+    background-color: var(--background-color);
+    color: var(--color);
     overflow-anchor: none;
   }
 
@@ -23,7 +32,7 @@ const styles = css`
     display: flex;
     align-items: center;
     border-radius: inherit;
-    padding: var(--flow-ui-spacing-medium);
+    padding: var(--padding);
     user-select: none;
     cursor: pointer;
   }
@@ -52,6 +61,10 @@ const styles = css`
     align-items: center;
   }
 
+  .details__summary::slotted(*) {
+    margin-right: var(--flow-ui-spacing-small);
+  }
+
   .details__summary-icon {
     flex: 0 0 auto;
     display: flex;
@@ -78,7 +91,16 @@ const styles = css`
 
   .details__content {
     display: block;
-    padding: var(--flow-ui-spacing-medium);
+    padding: var(--padding);
+    padding-top: 0;
+  }
+
+  .details__content::slotted(:first-child) {
+    margin-top: 0;
+  }
+
+  .details__content::slotted(:last-child) {
+    margin-bottom: 0;
   }
 `;