@tylertech/forge 3.0.0-next.22 → 3.0.0-next.24

package/esm/list/list-item/list-item.js

@@ -11,7 +11,7 @@ import { LIST_ITEM_CONSTANTS } from './list-item-constants';
 import { StateLayerComponent } from '../../state-layer';
 import { FocusIndicatorComponent } from '../../focus-indicator';
 const template = '<template><div class=\"forge-list-item\" tabindex=\"0\" part=\"root\"><slot name=\"leading\"></slot><slot name=\"avatar\"></slot><div class=\"text-container\" part=\"text-container\"><slot></slot><slot name=\"title\"></slot><slot name=\"primary-text\"></slot><slot name=\"subtitle\"></slot><slot name=\"secondary-text\"></slot><slot name=\"tertiary-text\"></slot><slot name=\"tertiary-title\"></slot></div><slot name=\"trailing\"></slot><forge-state-layer exportparts=\"surface:state-layer\"></forge-state-layer><forge-focus-indicator part=\"focus-indicator\" inward></forge-focus-indicator></div></template>';
-const styles = ':host{--_list-item-indent:var(--forge-list-item-indent, 56px);--_list-item-dense-indent:var(--forge-list-item-dense-indent, var(--forge-spacing-xxlarge, 48px))}:host{display:block;outline:0}:host([hidden]){display:none}.forge-list-item{--_list-item-background-color:var(--forge-list-item-background-color, transparent);--_list-item-shape:var(--forge-list-item-shape, 0);--_list-item-padding:var(--forge-list-item-padding, 0 var(--forge-spacing-medium, 16px));--_list-item-margin:var(--forge-list-item-margin, 0);--_list-item-height:var(--forge-list-item-height, 48px);--_list-item-dense-height:var(--forge-list-item-dense-height, 32px);--_list-item-cursor:var(--forge-list-item-cursor, pointer);--_list-item-gap:var(--forge-list-item-gap, var(--forge-spacing-xlarge, 32px));--_list-item-supporting-text-color:var(--forge-list-item-supporting-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_list-item-supporting-text-font-size:var(--forge-list-item-supporting-text-font-size, var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1))));--_list-item-supporting-text-font-weight:var(--forge-list-item-supporting-text-font-weight, var(--forge-typography-body2-font-weight, 400));--_list-item-supporting-text-line-height:var(--forge-list-item-supporting-text-line-height, 1.5rem);--_list-item-selected-color:var(--forge-list-item-selected-color, var(--forge-theme-primary, #3f51b5));--_list-item-selected-opacity:var(--forge-list-item-selected-opacity, 0.08);--_list-item-selected-leading-color:var(--forge-list-item-selected-leading-color, var(--_list-item-selected-color));--_list-item-selected-trailing-color:var(--forge-list-item-selected-trailing-color, var(--_list-item-selected-color));--_list-item-selected-supporting-text-color:var(--forge-list-item-selected-supporting-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_list-item-disabled-opacity:var(--forge-list-item-disabled-opacity, 0.38);--_list-item-disabled-cursor:var(--forge-list-item-disabled-cursor, not-allowed);--_list-item-one-line-height:var(--forge-list-item-one-line-height, var(--_list-item-height));--_list-item-two-line-height:var(--forge-list-item-two-line-height, var(--forge-list-item-height, 72px));--_list-item-three-line-height:var(--forge-list-item-three-line-height, var(--forge-list-item-height, 88px));--_list-item-dense-one-line-height:var(--forge-list-item-dense-one-line-height, var(--_list-item-dense-height));--_list-item-dense-two-line-height:var(--forge-list-item-dense-two-line-height, var(--forge-list-item-dense-height, 56px));--_list-item-dense-three-line-height:var(--forge-list-item-dense-three-line-height, var(--forge-list-item-dense-height, 72px));--_list-item-dense-font-size:var(--forge-list-item-dense-font-size, 0.875rem);--_list-item-dense-gap:var(--forge-list-item-dense-gap, var(--forge-spacing-xsmall, 8px));--_list-item-leading-selected-color:var(--forge-list-item-leading-selected-color, var(--_list-item-selected-color));--_list-item-trailing-selected-color:var(--forge-list-item-trailing-selected-color, var(--_list-item-selected-color));--_list-item-avatar-background-color:var(--forge-list-item-avatar-background-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_list-item-avatar-color:var(--forge-list-item-avatar-color, var(--forge-theme-on-primary, #ffffff));--_list-item-avatar-shape:var(--forge-list-item-avatar-shape, var(--forge-shape-round, 50%));--_list-item-avatar-size:var(--forge-list-item-avatar-size, 40px);--_list-item-wrap-padding:var(--forge-list-item-wrap-padding, var(--forge-spacing-xsmall, 8px) var(--forge-spacing-medium, 16px))}.forge-list-item{position:relative;display:-webkit-box;display:flex;gap:var(--_list-item-gap);-webkit-box-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;outline:0;text-decoration:none;background-color:var(--_list-item-background-color);border-radius:var(--_list-item-shape);-webkit-tap-highlight-color:transparent;height:var(--_list-item-height);min-height:var(--_list-item-height);padding:var(--_list-item-padding);margin:var(--_list-item-margin);cursor:var(--_list-item-cursor)}:host([non-interactive]) .forge-list-item{cursor:initial}:host([disabled]) .forge-list-item{cursor:var(--_list-item-disabled-cursor);opacity:var(--_list-item-disabled-opacity)}:host([two-line]) .forge-list-item{height:var(--_list-item-two-line-height);min-height:var(--_list-item-two-line-height)}:host([three-line]) .forge-list-item{height:var(--_list-item-three-line-height);min-height:var(--_list-item-three-line-height)}:host([dense]) .forge-list-item{--_list-item-gap:var(--_list-item-dense-gap);height:var(--_list-item-dense-one-line-height);min-height:var(--_list-item-dense-one-line-height)}:host([dense]) .text-container{font-size:var(--_list-item-dense-font-size)}:host([dense][indented]){-webkit-margin-start:var(--_list-item-dense-indent);margin-inline-start:var(--_list-item-dense-indent)}:host([dense][two-line]) .forge-list-item{height:var(--_list-item-dense-two-line-height);min-height:var(--_list-item-dense-two-line-height)}:host([dense][three-line]) .forge-list-item{height:var(--_list-item-dense-three-line-height);min-height:var(--_list-item-dense-three-line-height)}:host([selected]) .forge-list-item{color:var(--_list-item-selected-color)}:host([selected]) .forge-list-item::before{content:\"\";position:absolute;inset:0;border-radius:inherit;opacity:var(--_list-item-selected-opacity);background-color:var(--_list-item-selected-color)}:host([selected]) .forge-list-item ::slotted([slot=leading]),:host([selected]) .forge-list-item ::slotted([slot=trailing]){color:var(--_list-item-selected-color)}:host([selected]) .forge-list-item ::slotted([slot=leading]){color:var(--_list-item-leading-selected-color)}:host([selected]) .forge-list-item ::slotted([slot=trailing]){color:var(--_list-item-trailing-selected-color)}:host([selected]) .text-container{color:var(--_list-item-selected-color)}:host([selected]) forge-state-layer{--forge-state-layer-color:var(--_list-item-selected-color)}:host([indented]){-webkit-margin-start:var(--_list-item-indent);margin-inline-start:var(--_list-item-indent)}a.forge-list-item{color:inherit}.text-container{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));letter-spacing:var(--forge-typography-body2-letter-spacing, .015625em);text-transform:var(--forge-typography-body2-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-body2-text-decoration,inherit);text-decoration:var(--forge-typography-body2-text-decoration,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:var(--_list-item-supporting-text-font-size);font-weight:var(--_list-item-supporting-text-font-weight);line-height:var(--_list-item-supporting-text-line-height);-webkit-box-flex:1;flex:1}slot[name=secondary-text]::slotted(*),slot[name=subtitle]::slotted(*),slot[name=tertiary-text]::slotted(*),slot[name=tertiary-title]::slotted(*){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, .875)));font-weight:var(--forge-typography-body1-font-weight,400);line-height:var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));letter-spacing:var(--forge-typography-body1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-body1-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-body1-text-decoration,inherit);text-decoration:var(--forge-typography-body1-text-decoration,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--_list-item-supporting-text-color);display:block}:host([selected]) slot[name=secondary-text]::slotted(*),:host([selected]) slot[name=subtitle]::slotted(*),:host([selected]) slot[name=tertiary-text]::slotted(*),:host([selected]) slot[name=tertiary-title]::slotted(*){color:var(--_list-item-selected-supporting-text-color)}::slotted([slot=avatar]){background-color:var(--_list-item-avatar-background-color);color:var(--_list-item-avatar-color);display:-webkit-inline-box;display:inline-flex;flex-shrink:0;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;fill:currentColor;-webkit-margin-end:calc((var(--_list-item-gap)/ 2) * -1);margin-inline-end:calc((var(--_list-item-gap)/ 2) * -1);min-width:var(--_list-item-avatar-size);min-height:var(--_list-item-avatar-size);border-radius:var(--_list-item-avatar-shape)}::slotted([slot=leading]),::slotted([slot=trailing]){color:var(--_list-item-supporting-text-color);display:-webkit-inline-box;display:inline-flex;flex-shrink:0;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;fill:currentColor}:host([selected]) ::slotted([slot=leading]){color:var(--_list-item-leading-selected-color)}:host([selected]) ::slotted([slot=trailing]){color:var(--_list-item-trailing-selected-color)}:host([wrap]) .forge-list-item{--_list-item-padding:var(--_list-item-wrap-padding);height:auto}:host([wrap]) .text-container{white-space:normal;overflow:visible;text-overflow:clip;line-height:normal}:host([wrap]) slot[name=secondary-text]::slotted(*),:host([wrap]) slot[name=subtitle]::slotted(*),:host([wrap]) slot[name=tertiary-text]::slotted(*),:host([wrap]) slot[name=tertiary-title]::slotted(*){white-space:normal;overflow:visible;text-overflow:clip;line-height:normal}forge-focus-indicator{z-index:1;--forge-focus-indicator-shape:var(--forge-shape-medium, 4px)}forge-state-layer{border-radius:inherit}';
+const styles = ':host{--_list-item-indent:var(--forge-list-item-indent, 56px);--_list-item-dense-indent:var(--forge-list-item-dense-indent, var(--forge-spacing-xxlarge, 48px))}:host{display:block;outline:0}:host([hidden]){display:none}.forge-list-item{--_list-item-background:var(--forge-list-item-background, transparent);--_list-item-shape:var(--forge-list-item-shape, 0);--_list-item-padding:var(--forge-list-item-padding, 0 var(--forge-spacing-medium, 16px));--_list-item-margin:var(--forge-list-item-margin, 0);--_list-item-height:var(--forge-list-item-height, 48px);--_list-item-dense-height:var(--forge-list-item-dense-height, 32px);--_list-item-cursor:var(--forge-list-item-cursor, pointer);--_list-item-gap:var(--forge-list-item-gap, var(--forge-spacing-xlarge, 32px));--_list-item-text-color:var(--forge-list-item-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_list-item-text-font-size:var(--forge-list-item-text-font-size, var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1))));--_list-item-text-font-weight:var(--forge-list-item-text-font-weight, var(--forge-typography-body2-font-weight, 400));--_list-item-text-line-height:var(--forge-list-item-text-line-height, 1.5rem);--_list-item-selected-color:var(--forge-list-item-selected-color, var(--forge-theme-primary, #3f51b5));--_list-item-selected-opacity:var(--forge-list-item-selected-opacity, 0.08);--_list-item-selected-leading-color:var(--forge-list-item-selected-leading-color, var(--_list-item-selected-color));--_list-item-selected-trailing-color:var(--forge-list-item-selected-trailing-color, var(--_list-item-selected-color));--_list-item-selected-text-color:var(--forge-list-item-selected-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_list-item-disabled-opacity:var(--forge-list-item-disabled-opacity, 0.38);--_list-item-disabled-cursor:var(--forge-list-item-disabled-cursor, not-allowed);--_list-item-one-line-height:var(--forge-list-item-one-line-height, var(--_list-item-height));--_list-item-two-line-height:var(--forge-list-item-two-line-height, var(--forge-list-item-height, 72px));--_list-item-three-line-height:var(--forge-list-item-three-line-height, var(--forge-list-item-height, 88px));--_list-item-dense-one-line-height:var(--forge-list-item-dense-one-line-height, var(--_list-item-dense-height));--_list-item-dense-two-line-height:var(--forge-list-item-dense-two-line-height, var(--forge-list-item-dense-height, 56px));--_list-item-dense-three-line-height:var(--forge-list-item-dense-three-line-height, var(--forge-list-item-dense-height, 72px));--_list-item-dense-font-size:var(--forge-list-item-dense-font-size, 0.875rem);--_list-item-dense-gap:var(--forge-list-item-dense-gap, var(--forge-spacing-xsmall, 8px));--_list-item-leading-selected-color:var(--forge-list-item-leading-selected-color, var(--_list-item-selected-color));--_list-item-trailing-selected-color:var(--forge-list-item-trailing-selected-color, var(--_list-item-selected-color));--_list-item-avatar-background-color:var(--forge-list-item-avatar-background-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_list-item-avatar-color:var(--forge-list-item-avatar-color, var(--forge-theme-on-primary, #ffffff));--_list-item-avatar-shape:var(--forge-list-item-avatar-shape, var(--forge-shape-round, 50%));--_list-item-avatar-size:var(--forge-list-item-avatar-size, 40px);--_list-item-wrap-padding:var(--forge-list-item-wrap-padding, var(--forge-spacing-xsmall, 8px) var(--forge-spacing-medium, 16px))}.forge-list-item{position:relative;display:-webkit-box;display:flex;gap:var(--_list-item-gap);-webkit-box-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;outline:0;text-decoration:none;background-color:var(--_list-item-background);border-radius:var(--_list-item-shape);-webkit-tap-highlight-color:transparent;height:var(--_list-item-height);min-height:var(--_list-item-height);padding:var(--_list-item-padding);margin:var(--_list-item-margin);cursor:var(--_list-item-cursor)}:host([non-interactive]) .forge-list-item{cursor:initial}:host([disabled]) .forge-list-item{cursor:var(--_list-item-disabled-cursor);opacity:var(--_list-item-disabled-opacity)}:host([two-line]) .forge-list-item{height:var(--_list-item-two-line-height);min-height:var(--_list-item-two-line-height)}:host([three-line]) .forge-list-item{height:var(--_list-item-three-line-height);min-height:var(--_list-item-three-line-height)}:host([dense]) .forge-list-item{--_list-item-gap:var(--_list-item-dense-gap);height:var(--_list-item-dense-one-line-height);min-height:var(--_list-item-dense-one-line-height)}:host([dense]) .text-container{font-size:var(--_list-item-dense-font-size)}:host([dense][indented]){-webkit-margin-start:var(--_list-item-dense-indent);margin-inline-start:var(--_list-item-dense-indent)}:host([dense][two-line]) .forge-list-item{height:var(--_list-item-dense-two-line-height);min-height:var(--_list-item-dense-two-line-height)}:host([dense][three-line]) .forge-list-item{height:var(--_list-item-dense-three-line-height);min-height:var(--_list-item-dense-three-line-height)}:host([selected]) .forge-list-item{color:var(--_list-item-selected-color)}:host([selected]) .forge-list-item::before{content:\"\";position:absolute;inset:0;border-radius:inherit;opacity:var(--_list-item-selected-opacity);background-color:var(--_list-item-selected-color)}:host([selected]) .forge-list-item ::slotted([slot=leading]),:host([selected]) .forge-list-item ::slotted([slot=trailing]){color:var(--_list-item-selected-color)}:host([selected]) .forge-list-item ::slotted([slot=leading]){color:var(--_list-item-leading-selected-color)}:host([selected]) .forge-list-item ::slotted([slot=trailing]){color:var(--_list-item-trailing-selected-color)}:host([selected]) .text-container{color:var(--_list-item-selected-color)}:host([selected]) forge-state-layer{--forge-state-layer-color:var(--_list-item-selected-color)}:host([indented]){-webkit-margin-start:var(--_list-item-indent);margin-inline-start:var(--_list-item-indent)}a.forge-list-item{color:inherit}.text-container{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));letter-spacing:var(--forge-typography-body2-letter-spacing, .015625em);text-transform:var(--forge-typography-body2-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-body2-text-decoration,inherit);text-decoration:var(--forge-typography-body2-text-decoration,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:var(--_list-item-text-font-size);font-weight:var(--_list-item-text-font-weight);line-height:var(--_list-item-text-line-height);-webkit-box-flex:1;flex:1}slot[name=secondary-text]::slotted(*),slot[name=subtitle]::slotted(*),slot[name=tertiary-text]::slotted(*),slot[name=tertiary-title]::slotted(*){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, .875)));font-weight:var(--forge-typography-body1-font-weight,400);line-height:var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));letter-spacing:var(--forge-typography-body1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-body1-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-body1-text-decoration,inherit);text-decoration:var(--forge-typography-body1-text-decoration,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--_list-item-text-color);display:block}:host([selected]) slot[name=secondary-text]::slotted(*),:host([selected]) slot[name=subtitle]::slotted(*),:host([selected]) slot[name=tertiary-text]::slotted(*),:host([selected]) slot[name=tertiary-title]::slotted(*){color:var(--_list-item-selected-text-color)}::slotted([slot=avatar]){background-color:var(--_list-item-avatar-background-color);color:var(--_list-item-avatar-color);display:-webkit-inline-box;display:inline-flex;flex-shrink:0;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;fill:currentColor;-webkit-margin-end:calc((var(--_list-item-gap)/ 2) * -1);margin-inline-end:calc((var(--_list-item-gap)/ 2) * -1);min-width:var(--_list-item-avatar-size);min-height:var(--_list-item-avatar-size);border-radius:var(--_list-item-avatar-shape)}::slotted([slot=leading]),::slotted([slot=trailing]){color:var(--_list-item-text-color);display:-webkit-inline-box;display:inline-flex;flex-shrink:0;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;fill:currentColor}:host([selected]) ::slotted([slot=leading]){color:var(--_list-item-leading-selected-color)}:host([selected]) ::slotted([slot=trailing]){color:var(--_list-item-trailing-selected-color)}:host([wrap]) .forge-list-item{--_list-item-padding:var(--_list-item-wrap-padding);height:auto}:host([wrap]) .text-container{white-space:normal;overflow:visible;text-overflow:clip;line-height:normal}:host([wrap]) slot[name=secondary-text]::slotted(*),:host([wrap]) slot[name=subtitle]::slotted(*),:host([wrap]) slot[name=tertiary-text]::slotted(*),:host([wrap]) slot[name=tertiary-title]::slotted(*){white-space:normal;overflow:visible;text-overflow:clip;line-height:normal}forge-focus-indicator{z-index:1;--forge-focus-indicator-shape:var(--forge-shape-medium, 4px)}forge-state-layer{border-radius:inherit}';
 /**
  * @tag forge-list-item
  *
@@ -71,7 +71,7 @@ const styles = ':host{--_list-item-indent:var(--forge-list-item-indent, 56px);--
  * @csspart focus-indicator - The forwarded focus indicator's internal indicator element.
  * @csspart state-layer - The forwarded state layer's internal surface element.
  *
- * @cssproperty --forge-list-item-background-color - The background color.
+ * @cssproperty --forge-list-item-background - The background color.
  * @cssproperty --forge-list-item-shape - The shape of the list item.
  * @cssproperty --forge-list-item-padding - The padding inside of the container element.
  * @cssproperty --forge-list-item-wrap-padding - The padding inside of the container element when `wrap` is enabled.
@@ -81,13 +81,15 @@ const styles = ':host{--_list-item-indent:var(--forge-list-item-indent, 56px);--
  * @cssproperty --forge-list-item-indent - The margin inline state when in the indented state.
  * @cssproperty --forge-list-item-cursor - The cursor when interactive.
  * @cssproperty --forge-list-item-gap - The gap between the slotted content.
- * @cssproperty --forge-list-item-supporting-text-color - The text color of the supporting text.
- * @cssproperty --forge-list-item-supporting-line-height - The line height of the supporting text.
+ * @cssproperty --forge-list-item-text-color - The text color of the text.
+ * @cssproperty --forge-list-item-text-font-size - The font size of the text.
+ * @cssproperty --forge-list-item-text-font-weight - The font weight of the text.
+ * @cssproperty --forge-list-item-text-line-height - The line height of the text.
  * @cssproperty --forge-list-item-selected-color - The color when in the selected state.
  * @cssproperty --forge-list-item-opacity - The opacity of the background color when in the disabled state.
  * @cssproperty --forge-list-item-selected-leading-color - The color of the leading content when in the selected state.
  * @cssproperty --forge-list-item-selected-trailing-color - The color of the trailing content when in the selected state.
- * @cssproperty --forge-list-item-selected-supporting-text-color - The color of the supporting text when in the selected state.
+ * @cssproperty --forge-list-item-selected-text-color - The color of the text when in the selected state.
  * @cssproperty --forge-list-item-disabled-opacity - The opacity of the element when in the disabled state.
  * @cssproperty --forge-list-item-disabled-cursor - The cursor when in the disabled state.
  * @cssproperty --forge-list-item-one-line-height - The line height when in the one/single line state.

package/esm/open-icon/index.d.ts

@@ -3,8 +3,6 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-export * from './open-icon-adapter';
 export * from './open-icon-constants';
-export * from './open-icon-foundation';
 export * from './open-icon';
 export declare function defineOpenIconComponent(): void;

package/esm/open-icon/index.js

@@ -5,9 +5,7 @@
  */
 import { defineCustomElement } from '@tylertech/forge-core';
 import { OpenIconComponent } from './open-icon';
-export * from './open-icon-adapter';
 export * from './open-icon-constants';
-export * from './open-icon-foundation';
 export * from './open-icon';
 export function defineOpenIconComponent() {
     defineCustomElement(OpenIconComponent);

package/esm/open-icon/open-icon-constants.d.ts

@@ -5,16 +5,20 @@
  */
 export declare const OPEN_ICON_CONSTANTS: {
     elementName: "forge-open-icon";
-    classes: {
-        ICON: string;
-        ICON_OPEN: string;
+    observedAttributes: {
+        OPEN: string;
+        ORIENTATION: string;
+        ROTATION: string;
     };
     attributes: {
         OPEN: string;
         ORIENTATION: string;
+        ROTATION: string;
     };
-    strings: {
-        ORIENTATION_VERTICAL: string;
-        ORIENTATION_HORIZONTAL: string;
+    defaults: {
+        ORIENTATION: OpenIconOrientation;
+        ROTATION: OpenIconRotation;
     };
 };
+export type OpenIconOrientation = 'vertical' | 'horizontal' | 'vertical-half' | 'horizontal-half';
+export type OpenIconRotation = 'full' | 'half';

package/esm/open-icon/open-icon-constants.js

@@ -5,21 +5,19 @@
  */
 import { COMPONENT_NAME_PREFIX } from '../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}open-icon`;
-const classes = {
-    ICON: 'forge-open-icon',
-    ICON_OPEN: 'forge-open-icon--open'
-};
-const attributes = {
+const observedAttributes = {
     OPEN: 'open',
-    ORIENTATION: 'orientation'
+    ORIENTATION: 'orientation',
+    ROTATION: 'rotation'
 };
-const strings = {
-    ORIENTATION_VERTICAL: 'vertical',
-    ORIENTATION_HORIZONTAL: 'horizontal'
+const attributes = Object.assign({}, observedAttributes);
+const defaults = {
+    ORIENTATION: 'vertical',
+    ROTATION: 'full'
 };
 export const OPEN_ICON_CONSTANTS = {
     elementName,
-    classes,
+    observedAttributes,
     attributes,
-    strings
+    defaults
 };

package/esm/open-icon/open-icon.d.ts

@@ -3,10 +3,12 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { OpenIconOrientation, OpenIconRotation } from './open-icon-constants';
 import { BaseComponent, IBaseComponent } from '../core/base/base-component';
 export interface IOpenIconComponent extends IBaseComponent {
     open: boolean;
-    orientation: string;
+    orientation: OpenIconOrientation;
+    rotation: OpenIconRotation;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -14,21 +16,44 @@ declare global {
     }
 }
 /**
- * The web component class behind the `<forge-open-icon>` custom element.
- *
  * @tag forge-open-icon
+ *
+ * @summary Open icons are used to indicate whether a section is open or closed.
+ *
+ * @property {boolean} open - Whether the icon is open or closed.
+ * @property {OpenIconOrientation} orientation - The orientation of the rotation.
+ * @property {OpenIconRotation} rotation - The rotation amount.
+ *
+ * @attribute {boolean} open - Whether the icon is open or closed.
+ * @attribute {OpenIconOrientation} orientation - The orientation of the rotation.
+ * @attribute {OpenIconRotation} rotation - The rotation amount.
+ *
+ * @cssproperty --forge-open-icon-color - The color of the icon.
+ * @cssproperty --forge-open-icon-size - The size of the icon.
+ * @cssproperty --forge-open-icon-height - The height of the icon. Defaults to `size`.
+ * @cssproperty --forge-open-icon-width - The width of the icon. Defaults to `size`.
+ * @cssproperty --forge-open-icon-initial-rotation - The initial rotation of the icon.
+ * @cssproperty --forge-open-icon-open-rotation - The rotation of the icon when open.
+ * @cssproperty --forge-open-icon-animation-duration - The duration of the open animation.
+ * @cssproperty --forge-open-icon-half-animation-duration - The duration of the open animation when in a half orientation.
+ * @cssproperty --forge-open-icon-animation-timing - The timing function of the open animation.
+ *
+ * @csspart root - The root element of the icon.
+ * @csspart icon - The icon element.
+ *
+ * @slot - The icon to display when open.
  */
 export declare class OpenIconComponent extends BaseComponent implements IOpenIconComponent {
     static get observedAttributes(): string[];
-    private _foundation;
+    private _open;
+    private _orientation;
+    private _rotation;
     constructor();
-    initializedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    /** Controls the open state of the icon. */
-    open: boolean;
-    /**
-     * Gets/sets the orientation of the icon.
-     * Valid values are 'vertical' (default) or 'horizontal'.
-     */
-    orientation: string;
+    get open(): boolean;
+    set open(value: boolean);
+    get orientation(): OpenIconOrientation;
+    set orientation(value: OpenIconOrientation);
+    get rotation(): OpenIconRotation;
+    set rotation(value: OpenIconRotation);
 }

package/esm/open-icon/open-icon.js

@@ -4,35 +4,55 @@
  * License: Apache-2.0
  */
 import { __decorate } from "tslib";
-import { CustomElement, attachShadowTemplate, coerceBoolean, FoundationProperty } from '@tylertech/forge-core';
+import { CustomElement, attachShadowTemplate, coerceBoolean } from '@tylertech/forge-core';
 import { tylIconKeyboardArrowRight, tylIconKeyboardArrowDown } from '@tylertech/tyler-icons/standard';
-import { OpenIconFoundation } from './open-icon-foundation';
-import { OpenIconAdapter } from './open-icon-adapter';
 import { OPEN_ICON_CONSTANTS } from './open-icon-constants';
 import { IconRegistry, IconComponent } from '../icon';
 import { BaseComponent } from '../core/base/base-component';
-const template = '<template><span class=\"forge-open-icon\" part=\"root\"><forge-icon class=\"icon\" part=\"icon\"></forge-icon></span></template>';
-const styles = '.forge-open-icon{color:#757575;color:var(--forge-theme-icon-color,#757575)}.forge-open-icon .icon{-webkit-transition:-webkit-transform .4s;transition:-webkit-transform .4s;transition:transform .4s;transition:transform .4s,-webkit-transform .4s}.forge-open-icon.forge-open-icon--open .icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}:host{line-height:.5}:host([hidden]){display:none}';
+const template = '<template><span class=\"forge-open-icon\" part=\"root\"><slot><forge-icon class=\"icon\" part=\"icon\" name=\"keyboard_arrow_down\"></forge-icon></slot></span></template>';
+const styles = ':host{display:-webkit-inline-box;display:inline-flex}:host([hidden]){display:none}.forge-open-icon{--_open-icon-color:var(--forge-open-icon-color, var(--forge-theme-text-high, rgba(0, 0, 0, 0.87)));--_open-icon-size:var(--forge-open-icon-size, 24px);--_open-icon-height:var(--forge-open-icon-height, var(--_open-icon-size));--_open-icon-width:var(--forge-open-icon-width, var(--_open-icon-size));--_open-icon-initial-rotation:var(--forge-open-icon-initial-rotation, 0);--_open-icon-open-rotation:var(--forge-open-icon-open-rotation, 180deg);--_open-icon-animation-duration:var(--forge-open-icon-animation-duration, var(--forge-animation-duration-medium4, 400ms));--_open-icon-half-animation-duration:var(--forge-open-icon-half-animation-duration, var(--forge-animation-duration-short4, 200ms));--_open-icon-animation-timing:var(--forge-open-icon-animation-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)))}.forge-open-icon{height:var(--_open-icon-height);width:var(--_open-icon-width);color:var(--_open-icon-color);rotate:var(--_open-icon-initial-rotation);-webkit-transition:rotate var(--_open-icon-animation-duration) var(--_open-icon-animation-timing);transition:rotate var(--_open-icon-animation-duration) var(--_open-icon-animation-timing)}::slotted(forge-icon),forge-icon{--forge-icon-size:var(--_open-icon-size)}:host([open]) .forge-open-icon{rotate:var(--_open-icon-open-rotation)}:host([orientation=horizontal]) .forge-open-icon{--_open-icon-initial-rotation:var(--forge-open-icon-initial-rotation, -90deg);--_open-icon-open-rotation:var(--forge-open-icon-open-rotation, 90deg)}:host([rotation=half]) .forge-open-icon{--_open-icon-open-rotation:var(--forge-open-icon-open-rotation, -90deg);--_open-icon-animation-duration:var(--_open-icon-half-animation-duration)}:host([orientation=horizontal][rotation=half]) .forge-open-icon{--_open-icon-initial-rotation:var(--forge-open-icon-initial-rotation, -90deg);--_open-icon-open-rotation:var(--forge-open-icon-open-rotation, 0);--_open-icon-animation-duration:var(--_open-icon-half-animation-duration)}@media prefers-reduced-motion{.forge-open-icon{-webkit-transition:none;transition:none}}';
 /**
- * The web component class behind the `<forge-open-icon>` custom element.
- *
  * @tag forge-open-icon
+ *
+ * @summary Open icons are used to indicate whether a section is open or closed.
+ *
+ * @property {boolean} open - Whether the icon is open or closed.
+ * @property {OpenIconOrientation} orientation - The orientation of the rotation.
+ * @property {OpenIconRotation} rotation - The rotation amount.
+ *
+ * @attribute {boolean} open - Whether the icon is open or closed.
+ * @attribute {OpenIconOrientation} orientation - The orientation of the rotation.
+ * @attribute {OpenIconRotation} rotation - The rotation amount.
+ *
+ * @cssproperty --forge-open-icon-color - The color of the icon.
+ * @cssproperty --forge-open-icon-size - The size of the icon.
+ * @cssproperty --forge-open-icon-height - The height of the icon. Defaults to `size`.
+ * @cssproperty --forge-open-icon-width - The width of the icon. Defaults to `size`.
+ * @cssproperty --forge-open-icon-initial-rotation - The initial rotation of the icon.
+ * @cssproperty --forge-open-icon-open-rotation - The rotation of the icon when open.
+ * @cssproperty --forge-open-icon-animation-duration - The duration of the open animation.
+ * @cssproperty --forge-open-icon-half-animation-duration - The duration of the open animation when in a half orientation.
+ * @cssproperty --forge-open-icon-animation-timing - The timing function of the open animation.
+ *
+ * @csspart root - The root element of the icon.
+ * @csspart icon - The icon element.
+ *
+ * @slot - The icon to display when open.
  */
 let OpenIconComponent = class OpenIconComponent extends BaseComponent {
     static get observedAttributes() {
-        return [
-            OPEN_ICON_CONSTANTS.attributes.OPEN,
-            OPEN_ICON_CONSTANTS.attributes.ORIENTATION
-        ];
+        return Object.values(OPEN_ICON_CONSTANTS.observedAttributes);
     }
     constructor() {
         super();
-        IconRegistry.define([tylIconKeyboardArrowRight, tylIconKeyboardArrowDown]);
+        this._open = false;
+        this._orientation = OPEN_ICON_CONSTANTS.defaults.ORIENTATION;
+        this._rotation = OPEN_ICON_CONSTANTS.defaults.ROTATION;
+        IconRegistry.define([
+            tylIconKeyboardArrowRight,
+            tylIconKeyboardArrowDown
+        ]);
         attachShadowTemplate(this, template, styles);
-        this._foundation = new OpenIconFoundation(new OpenIconAdapter(this));
-    }
-    initializedCallback() {
-        this._foundation.initialize();
     }
     attributeChangedCallback(name, oldValue, newValue) {
         switch (name) {
@@ -42,15 +62,40 @@ let OpenIconComponent = class OpenIconComponent extends BaseComponent {
             case OPEN_ICON_CONSTANTS.attributes.ORIENTATION:
                 this.orientation = newValue;
                 break;
+            case OPEN_ICON_CONSTANTS.attributes.ROTATION:
+                this.rotation = newValue;
+                break;
+        }
+    }
+    get open() {
+        return this._open;
+    }
+    set open(value) {
+        value = Boolean(value);
+        if (this._open !== value) {
+            this._open = value;
+            this.toggleAttribute(OPEN_ICON_CONSTANTS.attributes.OPEN, value);
+        }
+    }
+    get orientation() {
+        return this._orientation;
+    }
+    set orientation(value) {
+        if (this._orientation !== value) {
+            this._orientation = value;
+            this.setAttribute(OPEN_ICON_CONSTANTS.attributes.ORIENTATION, value);
+        }
+    }
+    get rotation() {
+        return this._rotation;
+    }
+    set rotation(value) {
+        if (this._rotation !== value) {
+            this._rotation = value;
+            this.setAttribute(OPEN_ICON_CONSTANTS.attributes.ROTATION, value);
         }
     }
 };
-__decorate([
-    FoundationProperty()
-], OpenIconComponent.prototype, "open", void 0);
-__decorate([
-    FoundationProperty()
-], OpenIconComponent.prototype, "orientation", void 0);
 OpenIconComponent = __decorate([
     CustomElement({
         name: OPEN_ICON_CONSTANTS.elementName,

package/esm/paginator/paginator-adapter.d.ts

@@ -6,7 +6,6 @@
 import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
 import { ISelectOption } from '../select';
 import { IPaginatorComponent } from './paginator';
-import { PaginatorAlternativeAlignment } from './paginator-constants';
 export type PaginatorFieldIdentifier = 'first' | 'last' | 'previous' | 'next' | 'page-size';
 export interface IPaginatorAdapter extends IBaseAdapter {
     setLabel(value: string): void;
@@ -20,49 +19,30 @@ export interface IPaginatorAdapter extends IBaseAdapter {
     showLastPageButton(): void;
     hideLastPageButton(): void;
     attachPageSizeChangeListener(listener: (evt: CustomEvent) => void): void;
-    attachFirstPageListener(listener: (evt: Event) => void): void;
-    attachPreviousPageListener(listener: (evt: Event) => void): void;
-    attachNextPageListener(listener: (evt: Event) => void): void;
-    attachLastPageListener(listener: (evt: Event) => void): void;
     detachPageSizeChangeListener(listener: (evt: CustomEvent) => void): void;
-    detachFirstPageListener(listener: (evt: Event) => void): void;
-    detachPreviousPageListener(listener: (evt: Event) => void): void;
-    detachNextPageListener(listener: (evt: Event) => void): void;
-    detachLastPageListener(listener: (evt: Event) => void): void;
-    disableFirstPageButton(): void;
-    enableFirstPageButton(): void;
-    disablePreviousPageButton(): void;
-    enablePreviousPageButton(): void;
-    disableNextPageButton(): void;
-    enableNextPageButton(): void;
-    disablePageSizeSelect(): void;
-    enablePageSizeSelect(): void;
+    attachFirstPageListener(listener: EventListener): void;
+    attachPreviousPageListener(listener: EventListener): void;
+    attachNextPageListener(listener: EventListener): void;
+    attachLastPageListener(listener: EventListener): void;
+    setFirstPageButtonEnabled(enabled: boolean): void;
+    setPreviousPageButtonEnabled(enabled: boolean): void;
+    setNextPageButtonEnabled(enabled: boolean): void;
+    setLastPageButtonEnabled(enabled: boolean): void;
+    setPageSizeSelectEnabled(enabled: boolean): void;
     setPageSizeVisibility(visible: boolean): void;
-    disableLastPageButton(): void;
-    enableLastPageButton(): void;
-    setAlternative(alternative: boolean): void;
-    setAlignment(alignment: PaginatorAlternativeAlignment): void;
-    hasFocus(): boolean;
     setFocus(options?: FocusOptions): void;
-    getFocusedField(): PaginatorFieldIdentifier | null;
     tryDisableFields(fieldsToDisable: PaginatorFieldIdentifier[]): void;
 }
-/**
- * Provides facilities for interacting with the internal DOM of `PaginatorComponent`.
- */
 export declare class PaginatorAdapter extends BaseAdapter<IPaginatorComponent> implements IPaginatorAdapter {
     private _labelElement;
-    private _root;
     private _pageSizeSelect;
     private _rangeLabel;
     private _rangeLabelAlternative;
     private _firstPageButton;
-    private _firstPageIconButton;
-    private _firstPagePlaceholder;
     private _previousPageButton;
     private _nextPageButton;
     private _lastPageButton;
-    private _lastPageIconButton;
+    private _firstPagePlaceholder;
     private _lastPagePlaceholder;
     constructor(component: IPaginatorComponent);
     setLabel(value: string): void;
@@ -76,31 +56,18 @@ export declare class PaginatorAdapter extends BaseAdapter<IPaginatorComponent> i
     showLastPageButton(): void;
     hideLastPageButton(): void;
     attachPageSizeChangeListener(listener: (evt: CustomEvent) => void): void;
-    attachFirstPageListener(listener: (evt: Event) => void): void;
-    attachPreviousPageListener(listener: (evt: Event) => void): void;
-    attachNextPageListener(listener: (evt: Event) => void): void;
-    attachLastPageListener(listener: (evt: Event) => void): void;
     detachPageSizeChangeListener(listener: (evt: CustomEvent) => void): void;
-    detachFirstPageListener(listener: (evt: Event) => void): void;
-    detachPreviousPageListener(listener: (evt: Event) => void): void;
-    detachNextPageListener(listener: (evt: Event) => void): void;
-    detachLastPageListener(listener: (evt: Event) => void): void;
-    disableFirstPageButton(): void;
-    enableFirstPageButton(): void;
-    disablePreviousPageButton(): void;
-    enablePreviousPageButton(): void;
-    disableNextPageButton(): void;
-    enableNextPageButton(): void;
-    disablePageSizeSelect(): void;
-    enablePageSizeSelect(): void;
+    attachFirstPageListener(listener: EventListener): void;
+    attachPreviousPageListener(listener: EventListener): void;
+    attachNextPageListener(listener: EventListener): void;
+    attachLastPageListener(listener: EventListener): void;
+    setFirstPageButtonEnabled(enabled: boolean): void;
+    setPreviousPageButtonEnabled(enabled: boolean): void;
+    setNextPageButtonEnabled(enabled: boolean): void;
+    setLastPageButtonEnabled(enabled: boolean): void;
+    setPageSizeSelectEnabled(enabled: boolean): void;
     setPageSizeVisibility(visible: boolean): void;
-    disableLastPageButton(): void;
-    enableLastPageButton(): void;
-    setAlternative(alternative: boolean): void;
-    setAlignment(alignment: PaginatorAlternativeAlignment): void;
-    hasFocus(): boolean;
     setFocus(options?: FocusOptions): void;
-    getFocusedField(): PaginatorFieldIdentifier | null;
     tryDisableFields(fieldsToDisable: PaginatorFieldIdentifier[]): void;
     private _tryFocus;
 }