@emuanalytics/flow-rdf-ui 0.0.33 → 0.0.35

package/dist/index.cjs

@@ -27,6 +27,7 @@ const overlayscrollbars = require('overlayscrollbars');
 const unsafeHtml_js = require('lit/directives/unsafe-html.js');
 const when_js = require('lit/directives/when.js');
 const choose_js = require('lit/directives/choose.js');
+const flowRdfCore = require('@emuanalytics/flow-rdf-core');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
 
@@ -3256,8 +3257,11 @@ const buttonStyles = lit.css`
     white-space: nowrap;
     vertical-align: middle;
     padding: 0;
-    transition: var(--flow-ui-transition-x-fast) background-color, var(--flow-ui-transition-x-fast) color,
-      var(--flow-ui-transition-x-fast) border, var(--flow-ui-transition-x-fast) box-shadow;
+    transition:
+      var(--flow-ui-transition-x-fast) background-color,
+      var(--flow-ui-transition-x-fast) color,
+      var(--flow-ui-transition-x-fast) border,
+      var(--flow-ui-transition-x-fast) box-shadow;
     cursor: inherit;
   }
 
@@ -3641,35 +3645,51 @@ const buttonStyles = lit.css`
   }
 
   /*
-   * Circle modifier
+   * FAB modifier
    */
 
-  .button--circle {
+  .button--fab {
     padding-left: 0;
     padding-right: 0;
   }
 
-  .button--circle.button--small {
+  .button--fab.button--small {
     width: var(--flow-ui-input-height-small);
-    border-radius: 50%;
+    box-shadow: var(--flow-ui-shadow-small);
   }
 
-  .button--circle.button--medium {
+  .button--fab.button--medium {
     width: var(--flow-ui-input-height-medium);
-    border-radius: 50%;
+    box-shadow: var(--flow-ui-shadow-medium);
   }
 
-  .button--circle.button--large {
+  .button--fab.button--large {
     width: var(--flow-ui-input-height-large);
-    border-radius: 50%;
+    box-shadow: var(--flow-ui-shadow-large);
   }
 
-  .button--circle .button__prefix,
-  .button--circle .button__suffix,
-  .button--circle .button__caret {
+  .button--fab .button__prefix,
+  .button--fab .button__suffix,
+  .button--fab .button__caret {
     display: none;
   }
 
+  .button--circle {
+    border-radius: 50%;
+  }
+
+  .button--square.button--small {
+    border-radius: var(--flow-ui-border-radius-small);
+  }
+
+  .button--square.button--medium {
+    border-radius: var(--flow-ui-border-radius-medium);
+  }
+
+  .button--square.button--large {
+    border-radius: var(--flow-ui-border-radius-large);
+  }
+
   /*
    * Caret modifier
    */
@@ -3803,7 +3823,12 @@ const buttonStyles = lit.css`
    * buttons and we style them here instead.
    */
 
-  :host(.flow-ui-button-group__button--first:not(.flow-ui-button-group__button--last):not(.flow-ui-button-group__button--vertical)) .button {
+  :host(
+      .flow-ui-button-group__button--first:not(.flow-ui-button-group__button--last):not(
+          .flow-ui-button-group__button--vertical
+        )
+    )
+    .button {
     border-start-end-radius: 0;
     border-end-end-radius: 0;
   }
@@ -3812,13 +3837,21 @@ const buttonStyles = lit.css`
     border-radius: 0;
   }
 
-  :host(.flow-ui-button-group__button--last:not(.flow-ui-button-group__button--vertical, .flow-ui-button-group__button--first)) .button {
+  :host(
+      .flow-ui-button-group__button--last:not(
+          .flow-ui-button-group__button--vertical,
+          .flow-ui-button-group__button--first
+        )
+    )
+    .button {
     border-start-start-radius: 0;
     border-end-start-radius: 0;
   }
 
   /* All except the first */
-  :host(.flow-ui-button-group__button:not(.flow-ui-button-group__button--vertical, .flow-ui-button-group__button--first)) {
+  :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));
   }
 
@@ -3828,8 +3861,7 @@ const buttonStyles = lit.css`
           .flow-ui-button-group__button--first,
           .flow-ui-button-group__button--radio,
           .flow-ui-button-group__button--tool,
-          .flow-ui-button-group__button--vertical
-          [variant='default']
+          .flow-ui-button-group__button--vertical [variant='default']
         ):not(:hover)
     )
     .button:after {
@@ -3843,7 +3875,12 @@ const buttonStyles = lit.css`
   }
 
   /* Variants for vertical layout of button group */
-  :host(.flow-ui-button-group__button--vertical.flow-ui-button-group__button--first:not(.flow-ui-button-group__button--last)) .button {
+  :host(
+      .flow-ui-button-group__button--vertical.flow-ui-button-group__button--first:not(
+          .flow-ui-button-group__button--last
+        )
+    )
+    .button {
     border-end-start-radius: 0;
     border-end-end-radius: 0;
   }
@@ -3857,7 +3894,6 @@ const buttonStyles = lit.css`
     margin-block-start: calc(-1 * var(--flow-ui-input-border-width));
   }
 
-
   /* Bump hovered, focused, and checked buttons up so their focus ring isn't clipped */
   :host(.flow-ui-button-group__button--hover) {
     z-index: 1;
@@ -3868,7 +3904,8 @@ const buttonStyles = lit.css`
     z-index: 2;
   }
 
-  :host(.flow-ui-button-group__button--focus), :host(.flow-ui-button-group__button--focus[checked]) {
+  :host(.flow-ui-button-group__button--focus),
+  :host(.flow-ui-button-group__button--focus[checked]) {
     z-index: 3;
   }
 `;
@@ -3884,7 +3921,7 @@ var __decorateClass$R = (decorators, target, key, kind) => {
     __defProp$R(target, key, result);
   return result;
 };
-exports.FlowButton = class FlowButton extends FlowRdfElement {
+let FlowButton$1 = class FlowButton extends FlowRdfElement {
   constructor() {
     super(...arguments);
     this.formControlController = new FormControlController(this, {
@@ -3910,7 +3947,8 @@ exports.FlowButton = class FlowButton extends FlowRdfElement {
     this.loading = false;
     this.outline = false;
     this.pill = false;
-    this.circle = false;
+    this.fabCircle = false;
+    this.fabSquare = false;
     this.type = "button";
     this.name = "";
     this.value = "";
@@ -4039,7 +4077,9 @@ exports.FlowButton = class FlowButton extends FlowRdfElement {
       "button--medium": this.size === "medium",
       "button--large": this.size === "large",
       "button--caret": this.caret,
-      "button--circle": this.circle,
+      "button--fab": this.fabCircle || this.fabSquare,
+      "button--circle": this.fabCircle,
+      "button--square": this.fabSquare,
       "button--disabled": this.disabled,
       "button--focused": this.hasFocus,
       "button--loading": this.loading,
@@ -4081,88 +4121,94 @@ exports.FlowButton = class FlowButton extends FlowRdfElement {
     `;
   }
 };
-exports.FlowButton.styles = buttonStyles;
+FlowButton$1.styles = buttonStyles;
 __decorateClass$R([
   decorators_js.query(".button")
-], exports.FlowButton.prototype, "button", 2);
+], FlowButton$1.prototype, "button", 2);
 __decorateClass$R([
   decorators_js.state()
-], exports.FlowButton.prototype, "hasFocus", 2);
+], FlowButton$1.prototype, "hasFocus", 2);
 __decorateClass$R([
   decorators_js.state()
-], exports.FlowButton.prototype, "invalid", 2);
+], FlowButton$1.prototype, "invalid", 2);
 __decorateClass$R([
   decorators_js.property()
-], exports.FlowButton.prototype, "title", 2);
+], FlowButton$1.prototype, "title", 2);
 __decorateClass$R([
   decorators_js.property({ reflect: true })
-], exports.FlowButton.prototype, "variant", 2);
+], FlowButton$1.prototype, "variant", 2);
 __decorateClass$R([
   decorators_js.property({ reflect: true })
-], exports.FlowButton.prototype, "size", 2);
+], FlowButton$1.prototype, "size", 2);
 __decorateClass$R([
   decorators_js.property({ type: Boolean, reflect: true })
-], exports.FlowButton.prototype, "caret", 2);
+], FlowButton$1.prototype, "caret", 2);
 __decorateClass$R([
   decorators_js.property({ type: Boolean, reflect: true })
-], exports.FlowButton.prototype, "disabled", 2);
+], FlowButton$1.prototype, "disabled", 2);
 __decorateClass$R([
   decorators_js.property({ type: Boolean, reflect: true })
-], exports.FlowButton.prototype, "loading", 2);
+], FlowButton$1.prototype, "loading", 2);
 __decorateClass$R([
   decorators_js.property({ type: Boolean, reflect: true })
-], exports.FlowButton.prototype, "outline", 2);
+], FlowButton$1.prototype, "outline", 2);
 __decorateClass$R([
   decorators_js.property({ type: Boolean, reflect: true })
-], exports.FlowButton.prototype, "pill", 2);
+], FlowButton$1.prototype, "pill", 2);
 __decorateClass$R([
-  decorators_js.property({ type: Boolean, reflect: true })
-], exports.FlowButton.prototype, "circle", 2);
+  decorators_js.property({ type: Boolean, reflect: true, attribute: "fab-circle" })
+], FlowButton$1.prototype, "fabCircle", 2);
+__decorateClass$R([
+  decorators_js.property({ type: Boolean, reflect: true, attribute: "fab-square" })
+], FlowButton$1.prototype, "fabSquare", 2);
 __decorateClass$R([
   decorators_js.property()
-], exports.FlowButton.prototype, "type", 2);
+], FlowButton$1.prototype, "type", 2);
 __decorateClass$R([
   decorators_js.property()
-], exports.FlowButton.prototype, "name", 2);
+], FlowButton$1.prototype, "name", 2);
 __decorateClass$R([
   decorators_js.property()
-], exports.FlowButton.prototype, "value", 2);
+], FlowButton$1.prototype, "value", 2);
 __decorateClass$R([
   decorators_js.property()
-], exports.FlowButton.prototype, "href", 2);
+], FlowButton$1.prototype, "href", 2);
 __decorateClass$R([
   decorators_js.property()
-], exports.FlowButton.prototype, "target", 2);
+], FlowButton$1.prototype, "target", 2);
 __decorateClass$R([
   decorators_js.property()
-], exports.FlowButton.prototype, "rel", 2);
+], FlowButton$1.prototype, "rel", 2);
 __decorateClass$R([
   decorators_js.property()
-], exports.FlowButton.prototype, "download", 2);
+], FlowButton$1.prototype, "download", 2);
 __decorateClass$R([
   decorators_js.property()
-], exports.FlowButton.prototype, "form", 2);
+], FlowButton$1.prototype, "form", 2);
 __decorateClass$R([
   decorators_js.property({ attribute: "formaction" })
-], exports.FlowButton.prototype, "formAction", 2);
+], FlowButton$1.prototype, "formAction", 2);
 __decorateClass$R([
   decorators_js.property({ attribute: "formenctype" })
-], exports.FlowButton.prototype, "formEnctype", 2);
+], FlowButton$1.prototype, "formEnctype", 2);
 __decorateClass$R([
   decorators_js.property({ attribute: "formmethod" })
-], exports.FlowButton.prototype, "formMethod", 2);
+], FlowButton$1.prototype, "formMethod", 2);
 __decorateClass$R([
   decorators_js.property({ attribute: "formnovalidate", type: Boolean })
-], exports.FlowButton.prototype, "formNoValidate", 2);
+], FlowButton$1.prototype, "formNoValidate", 2);
 __decorateClass$R([
   decorators_js.property({ attribute: "formtarget" })
-], exports.FlowButton.prototype, "formTarget", 2);
+], FlowButton$1.prototype, "formTarget", 2);
 __decorateClass$R([
   watch("disabled", { waitUntilFirstUpdate: true })
-], exports.FlowButton.prototype, "handleDisabledChange", 1);
-exports.FlowButton = __decorateClass$R([
+], FlowButton$1.prototype, "handleDisabledChange", 1);
+FlowButton$1 = __decorateClass$R([
   decorators_js.customElement("flow-ui-button")
-], exports.FlowButton);
+], FlowButton$1);
+
+const FlowButton = FlowButton$1;
+FlowButton$1.define("flow-ui-button");
 
 const isUndefined = (val) => typeof val === "undefined";
 const isNull = (val) => val === null;
@@ -23377,7 +23423,7 @@ const translation = {
 };
 localize.registerTranslation(translation);
 
-const version = "0.0.33";
+const version = "0.0.34";
 
 const CONSOLE_HIGHLIGHT_STYLE = `
   padding: 2px 4px;
@@ -23393,6 +23439,7 @@ announce();
 exports.ChartJs = chart_js.Chart;
 exports.FlowAlert = FlowAlert;
 exports.FlowAnimation = SlAnimation;
+exports.FlowButton = FlowButton;
 exports.FlowCalendar = FlowCalendar;
 exports.FlowChart = FlowChart;
 exports.FlowDateTimePicker = FlowDatetimePicker;
@@ -23432,3 +23479,6 @@ exports.setBasePath = setBasePath;
 exports.setDefaultLocale = setDefaultLocale;
 exports.setDefaultTimeZone = setDefaultTimeZone;
 exports.unregisterIconLibrary = unregisterIconLibrary;
+Object.keys(flowRdfCore).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) exports[k] = flowRdfCore[k];
+});

package/dist/index.d.cts

@@ -4,6 +4,7 @@ import * as chartjs_chart_matrix from 'chartjs-chart-matrix';
 import * as chart_js from 'chart.js';
 import { Chart, ChartTypeRegistry, ChartOptions, ChartData, Plugin, ChartComponentLike } from 'chart.js';
 export { Chart as ChartJs } from 'chart.js';
+export * from '@emuanalytics/flow-rdf-core';
 
 type EventTypeRequiresDetail<T> = T extends keyof GlobalEventHandlersEventMap ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>> ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>> ? never : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail'] ? never : T : never : never;
 type EventTypeDoesNotRequireDetail<T> = T extends keyof GlobalEventHandlersEventMap ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>> ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>> ? T : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail'] ? T : never : T : T;
@@ -768,10 +769,8 @@ declare global {
 }
 
 /**
+ * @tagname flow-ui-button
  * @summary Buttons represent actions that are available to the user.
- * @documentation https://developer.emu-analytics.net/docs/flow-ui-rdf/components/button
- * @status stable
- * @since 2.0
  *
  * @dependency flow-ui-icon
  * @dependency flow-ui-spinner
@@ -814,10 +813,15 @@ declare class FlowButton extends FlowRdfElement implements FlowRdfFormControl {
     /** Draws a pill-style button with rounded edges. */
     pill: boolean;
     /**
-     * Draws a circular icon button. When this attribute is present, the button expects a single `<flow-ui-icon>` in the
+     * Draws a circular FAB. When this attribute is present, the button expects a single `<flow-ui-icon>` in the
+     * default slot.
+     */
+    fabCircle: boolean;
+    /**
+     * Draws a square FAB. When this attribute is present, the button expects a single `<flow-ui-icon>` in the
      * default slot.
      */
-    circle: boolean;
+    fabSquare: boolean;
     /**
      * The type of button. Note that the default value is `button` instead of `submit`, which is opposite of how native
      * `<button>` elements behave. When the type is `submit`, the button will submit the surrounding form.
@@ -892,6 +896,7 @@ declare class FlowButton extends FlowRdfElement implements FlowRdfFormControl {
     setCustomValidity(message: string): void;
     render(): lit.TemplateResult;
 }
+
 declare global {
     interface HTMLElementTagNameMap {
         'flow-ui-button': FlowButton;

package/dist/index.d.mts

@@ -4,6 +4,7 @@ import * as chartjs_chart_matrix from 'chartjs-chart-matrix';
 import * as chart_js from 'chart.js';
 import { Chart, ChartTypeRegistry, ChartOptions, ChartData, Plugin, ChartComponentLike } from 'chart.js';
 export { Chart as ChartJs } from 'chart.js';
+export * from '@emuanalytics/flow-rdf-core';
 
 type EventTypeRequiresDetail<T> = T extends keyof GlobalEventHandlersEventMap ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>> ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>> ? never : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail'] ? never : T : never : never;
 type EventTypeDoesNotRequireDetail<T> = T extends keyof GlobalEventHandlersEventMap ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>> ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>> ? T : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail'] ? T : never : T : T;
@@ -768,10 +769,8 @@ declare global {
 }
 
 /**
+ * @tagname flow-ui-button
  * @summary Buttons represent actions that are available to the user.
- * @documentation https://developer.emu-analytics.net/docs/flow-ui-rdf/components/button
- * @status stable
- * @since 2.0
  *
  * @dependency flow-ui-icon
  * @dependency flow-ui-spinner
@@ -814,10 +813,15 @@ declare class FlowButton extends FlowRdfElement implements FlowRdfFormControl {
     /** Draws a pill-style button with rounded edges. */
     pill: boolean;
     /**
-     * Draws a circular icon button. When this attribute is present, the button expects a single `<flow-ui-icon>` in the
+     * Draws a circular FAB. When this attribute is present, the button expects a single `<flow-ui-icon>` in the
+     * default slot.
+     */
+    fabCircle: boolean;
+    /**
+     * Draws a square FAB. When this attribute is present, the button expects a single `<flow-ui-icon>` in the
      * default slot.
      */
-    circle: boolean;
+    fabSquare: boolean;
     /**
      * The type of button. Note that the default value is `button` instead of `submit`, which is opposite of how native
      * `<button>` elements behave. When the type is `submit`, the button will submit the surrounding form.
@@ -892,6 +896,7 @@ declare class FlowButton extends FlowRdfElement implements FlowRdfFormControl {
     setCustomValidity(message: string): void;
     render(): lit.TemplateResult;
 }
+
 declare global {
     interface HTMLElementTagNameMap {
         'flow-ui-button': FlowButton;

package/dist/index.d.ts

@@ -4,6 +4,7 @@ import * as chartjs_chart_matrix from 'chartjs-chart-matrix';
 import * as chart_js from 'chart.js';
 import { Chart, ChartTypeRegistry, ChartOptions, ChartData, Plugin, ChartComponentLike } from 'chart.js';
 export { Chart as ChartJs } from 'chart.js';
+export * from '@emuanalytics/flow-rdf-core';
 
 type EventTypeRequiresDetail<T> = T extends keyof GlobalEventHandlersEventMap ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>> ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>> ? never : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail'] ? never : T : never : never;
 type EventTypeDoesNotRequireDetail<T> = T extends keyof GlobalEventHandlersEventMap ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>> ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>> ? T : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail'] ? T : never : T : T;
@@ -768,10 +769,8 @@ declare global {
 }
 
 /**
+ * @tagname flow-ui-button
  * @summary Buttons represent actions that are available to the user.
- * @documentation https://developer.emu-analytics.net/docs/flow-ui-rdf/components/button
- * @status stable
- * @since 2.0
  *
  * @dependency flow-ui-icon
  * @dependency flow-ui-spinner
@@ -814,10 +813,15 @@ declare class FlowButton extends FlowRdfElement implements FlowRdfFormControl {
     /** Draws a pill-style button with rounded edges. */
     pill: boolean;
     /**
-     * Draws a circular icon button. When this attribute is present, the button expects a single `<flow-ui-icon>` in the
+     * Draws a circular FAB. When this attribute is present, the button expects a single `<flow-ui-icon>` in the
+     * default slot.
+     */
+    fabCircle: boolean;
+    /**
+     * Draws a square FAB. When this attribute is present, the button expects a single `<flow-ui-icon>` in the
      * default slot.
      */
-    circle: boolean;
+    fabSquare: boolean;
     /**
      * The type of button. Note that the default value is `button` instead of `submit`, which is opposite of how native
      * `<button>` elements behave. When the type is `submit`, the button will submit the surrounding form.
@@ -892,6 +896,7 @@ declare class FlowButton extends FlowRdfElement implements FlowRdfFormControl {
     setCustomValidity(message: string): void;
     render(): lit.TemplateResult;
 }
+
 declare global {
     interface HTMLElementTagNameMap {
         'flow-ui-button': FlowButton;