@tylertech/forge 3.4.1 → 3.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +8 -4
- package/dist/avatar/forge-avatar.css +0 -1
- package/dist/dialog/forge-dialog.css +0 -1
- package/dist/divider/forge-divider.css +0 -1
- package/dist/lib.js +1 -1
- package/dist/lib.js.map +2 -2
- package/dist/vscode.css-custom-data.json +8 -3
- package/dist/vscode.html-custom-data.json +2 -2
- package/esm/avatar/avatar.js +1 -1
- package/esm/backdrop/backdrop.js +1 -1
- package/esm/divider/divider.js +1 -1
- package/esm/drawer/drawer/drawer.js +1 -1
- package/esm/drawer/mini-drawer/mini-drawer.d.ts +1 -0
- package/esm/drawer/mini-drawer/mini-drawer.js +2 -1
- package/esm/linear-progress/linear-progress.js +1 -1
- package/esm/split-view/split-view/split-view.js +1 -1
- package/esm/split-view/split-view-panel/split-view-panel.js +1 -1
- package/esm/toolbar/toolbar.d.ts +2 -2
- package/esm/toolbar/toolbar.js +3 -3
- package/package.json +1 -1
- package/sass/avatar/_core.scss +0 -2
- package/sass/backdrop/_core.scss +0 -1
- package/sass/core/styles/tokens/drawer/mini/_tokens.scss +1 -0
- package/sass/divider/_core.scss +0 -1
- package/sass/drawer/base/_core.scss +1 -2
- package/sass/drawer/drawer/drawer.scss +3 -9
- package/sass/drawer/mini-drawer/_core.scss +1 -0
- package/sass/linear-progress/_core.scss +4 -1
- package/sass/split-view/split-view/_mixins.scss +0 -1
- package/sass/split-view/split-view-panel/_mixins.scss +2 -2
- package/sass/toolbar/_core.scss +0 -1
|
@@ -3483,13 +3483,13 @@
|
|
|
3483
3483
|
"values": []
|
|
3484
3484
|
},
|
|
3485
3485
|
{
|
|
3486
|
-
"name": "--forge-
|
|
3486
|
+
"name": "--forge-toolbar-height",
|
|
3487
3487
|
"description": "Controls the height.",
|
|
3488
3488
|
"values": []
|
|
3489
3489
|
},
|
|
3490
3490
|
{
|
|
3491
|
-
"name": "--forge-
|
|
3492
|
-
"description": "Controls the minimum height.",
|
|
3491
|
+
"name": "--forge-toolbar-min-height",
|
|
3492
|
+
"description": "Controls the minimum height. Defaults to the toolbar height.",
|
|
3493
3493
|
"values": []
|
|
3494
3494
|
},
|
|
3495
3495
|
{
|
|
@@ -4267,6 +4267,11 @@
|
|
|
4267
4267
|
"description": "The width of the drawer.",
|
|
4268
4268
|
"values": []
|
|
4269
4269
|
},
|
|
4270
|
+
{
|
|
4271
|
+
"name": "--forge-mini-drawer-min-width",
|
|
4272
|
+
"description": "The minimum width of the drawer. Defaults to match the width.",
|
|
4273
|
+
"values": []
|
|
4274
|
+
},
|
|
4270
4275
|
{
|
|
4271
4276
|
"name": "--forge-mini-drawer-hover-width",
|
|
4272
4277
|
"description": "The width of the drawer when hovered.",
|
|
@@ -2394,7 +2394,7 @@
|
|
|
2394
2394
|
},
|
|
2395
2395
|
{
|
|
2396
2396
|
"name": "forge-toolbar",
|
|
2397
|
-
"description": "Toolbars allow you to place titles and actions within a container and align them to the start, center, or end of the toolbar.\nThis component is useful as headers and footers within pages, dialogs, sections... etc. to ensure consistent layout and alignment.\n---\n\n\n### **Slots:**\n - **before-start** - The content to place before the start slot.\n- **start** - The content to place at the start of the toolbar.\n- **center** - The content to place in the center of the toolbar.\n- **end** - The content to place at the end of the toolbar.\n- **after-end** - The content to place after the end slot.\n\n### **CSS Properties:**\n - **--forge-
|
|
2397
|
+
"description": "Toolbars allow you to place titles and actions within a container and align them to the start, center, or end of the toolbar.\nThis component is useful as headers and footers within pages, dialogs, sections... etc. to ensure consistent layout and alignment.\n---\n\n\n### **Slots:**\n - **before-start** - The content to place before the start slot.\n- **start** - The content to place at the start of the toolbar.\n- **center** - The content to place in the center of the toolbar.\n- **end** - The content to place at the end of the toolbar.\n- **after-end** - The content to place after the end slot.\n\n### **CSS Properties:**\n - **--forge-toolbar-height** - Controls the height. _(default: undefined)_\n- **--forge-toolbar-min-height** - Controls the minimum height. Defaults to the toolbar height. _(default: undefined)_\n- **--forge-theme-surface** - Controls the background-color of the toolbar. _(default: undefined)_\n- **--forge-toolbar-divider-width** - Controls the divider width. _(default: undefined)_\n- **--forge-toolbar-divider-style** - Controls the divider style. _(default: undefined)_\n- **--forge-toolbar-divider-color** - Controls the divider color. _(default: undefined)_\n- **--forge-toolbar-shape** - Controls the border radius of the toolbar. _(default: undefined)_\n- **--forge-toolbar-start-start-shape** - Controls the border radius of the top left corner. _(default: undefined)_\n- **--forge-toolbar-start-end-shape** - Controls the border radius of the top right corner. _(default: undefined)_\n- **--forge-toolbar-end-start-shape** - Controls the border radius of the bottom left corner. _(default: undefined)_\n- **--forge-toolbar-end-end-shape** - Controls the border radius of the bottom right corner. _(default: undefined)_\n- **--forge-toolbar-padding** - Controls the left and right padding using the padding-inline style. _(default: undefined)_\n- **--forge-toolbar-padding-block** - Controls the top and bottom padding using the padding-block style. _(default: undefined)_\n- **--forge-toolbar-padding-inline** - Controls the left and right padding using the padding-block style. _(default: undefined)_\n- **--forge-toolbar-columns** - The grid column track sizes. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The root container element wrapping all slots and content.\n- **inner** - The internal container element for the start, center, and end slots.\n- **before-section-start** - The container element for the before-start slot.\n- **section-start** - The container element for the start slot.\n- **section-center** - The container element for the center slot.\n- **section-end** - The container element for the end slot.\n- **after-section-end** - The container element for the after-end slot.",
|
|
2398
2398
|
"attributes": [
|
|
2399
2399
|
{
|
|
2400
2400
|
"name": "inverted",
|
|
@@ -2918,7 +2918,7 @@
|
|
|
2918
2918
|
},
|
|
2919
2919
|
{
|
|
2920
2920
|
"name": "forge-mini-drawer",
|
|
2921
|
-
"description": "\n---\n\n\n### **Events:**\n - **forge-drawer-after-open** - Dispatched after the drawer has opened.\n- **forge-drawer-after-close** - Dispatched after the drawer has closed.\n\n### **Slots:**\n - _default_ - The content to display in the scrollable content container.\n- **header** - The header content above the main content.\n- **footer** - The footer content below the main content.\n\n### **CSS Properties:**\n - **--forge-mini-drawer-width** - The width of the drawer. _(default: undefined)_\n- **--forge-mini-drawer-hover-width** - The width of the drawer when hovered. _(default: undefined)_\n- **--forge-mini-drawer-transition-duration** - The transition duration of the drawer. _(default: undefined)_\n- **--forge-mini-drawer-transition-easing** - The transition timing function of the drawer. _(default: undefined)_\n- **--forge-mini-drawer-delay** - The delay before the drawer closes when the mouse leaves the drawer. _(default: undefined)_\n- **--forge-mini-drawer-hover-transition-duration** - The transition duration of the drawer when hovered. _(default: undefined)_\n- **--forge-mini-drawer-hover-transition-easing** - The transition timing function of the drawer when hovered. _(default: undefined)_\n- **--forge-mini-drawer-hover-transition-delay** - The delay before the drawer closes when the mouse leaves the drawer when hovered. _(default: undefined)_\n- **--forge-drawer-width** - The width of the drawer. _(default: undefined)_\n- **--forge-drawer-background** - The background color of the drawer. _(default: undefined)_\n- **--forge-drawer-border-color** - The border of the drawer. _(default: undefined)_\n- **--forge-drawer-border-width** - The border width of the drawer. _(default: undefined)_\n- **--forge-drawer-transition-duration** - The transition duration of the drawer. _(default: undefined)_\n- **--forge-drawer-transition-easing** - The transition timing function of the drawer. _(default: undefined)_\n- **--forge-drawer-duration-close** - The duration of the drawer closing animation. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The component's root element.\n- **container** - The container element around the content.\n- **content** - The content container element.",
|
|
2921
|
+
"description": "\n---\n\n\n### **Events:**\n - **forge-drawer-after-open** - Dispatched after the drawer has opened.\n- **forge-drawer-after-close** - Dispatched after the drawer has closed.\n\n### **Slots:**\n - _default_ - The content to display in the scrollable content container.\n- **header** - The header content above the main content.\n- **footer** - The footer content below the main content.\n\n### **CSS Properties:**\n - **--forge-mini-drawer-width** - The width of the drawer. _(default: undefined)_\n- **--forge-mini-drawer-min-width** - The minimum width of the drawer. Defaults to match the width. _(default: undefined)_\n- **--forge-mini-drawer-hover-width** - The width of the drawer when hovered. _(default: undefined)_\n- **--forge-mini-drawer-transition-duration** - The transition duration of the drawer. _(default: undefined)_\n- **--forge-mini-drawer-transition-easing** - The transition timing function of the drawer. _(default: undefined)_\n- **--forge-mini-drawer-delay** - The delay before the drawer closes when the mouse leaves the drawer. _(default: undefined)_\n- **--forge-mini-drawer-hover-transition-duration** - The transition duration of the drawer when hovered. _(default: undefined)_\n- **--forge-mini-drawer-hover-transition-easing** - The transition timing function of the drawer when hovered. _(default: undefined)_\n- **--forge-mini-drawer-hover-transition-delay** - The delay before the drawer closes when the mouse leaves the drawer when hovered. _(default: undefined)_\n- **--forge-drawer-width** - The width of the drawer. _(default: undefined)_\n- **--forge-drawer-background** - The background color of the drawer. _(default: undefined)_\n- **--forge-drawer-border-color** - The border of the drawer. _(default: undefined)_\n- **--forge-drawer-border-width** - The border width of the drawer. _(default: undefined)_\n- **--forge-drawer-transition-duration** - The transition duration of the drawer. _(default: undefined)_\n- **--forge-drawer-transition-easing** - The transition timing function of the drawer. _(default: undefined)_\n- **--forge-drawer-duration-close** - The duration of the drawer closing animation. _(default: undefined)_\n\n### **CSS Parts:**\n - **root** - The component's root element.\n- **container** - The container element around the content.\n- **content** - The content container element.",
|
|
2922
2922
|
"attributes": [
|
|
2923
2923
|
{
|
|
2924
2924
|
"name": "hover",
|
package/esm/avatar/avatar.js
CHANGED
|
@@ -10,7 +10,7 @@ import { AvatarCore } from './avatar-core';
|
|
|
10
10
|
import { AVATAR_CONSTANTS } from './avatar-constants';
|
|
11
11
|
import { BaseComponent } from '../core/base/base-component';
|
|
12
12
|
const template = '<template><div class=\"forge-avatar\" aria-hidden=\"true\" part=\"root\"><slot></slot></div></template>';
|
|
13
|
-
const styles = ':host{
|
|
13
|
+
const styles = ':host{display:inline-block}:host([hidden]){display:none}.forge-avatar{--_avatar-size:var(--forge-avatar-size, 40px);--_avatar-background:var(--forge-avatar-background, var(--forge-theme-tertiary, #3d5afe));--_avatar-color:var(--forge-avatar-color, var(--forge-theme-on-tertiary, #ffffff));--_avatar-transition-duration:var(--forge-avatar-transition-duration, var(--forge-animation-duration-short4, 200ms));--_avatar-transition-timing:var(--forge-avatar-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_avatar-shape:var(--forge-avatar-shape, calc(var(--forge-shape-round, 50%) * var(--forge-shape-factor, 1)))}.forge-avatar{display:flex;align-items:center;justify-content:center;overflow:hidden;transition:height var(--_avatar-transition-duration) var(--_avatar-transition-timing),width var(--_avatar-transition-duration) var(--_avatar-transition-timing);border-radius:var(--_avatar-shape);box-sizing:border-box;width:var(--_avatar-size);height:var(--_avatar-size);background-color:var(--_avatar-background);background-position:center;background-repeat:no-repeat;background-size:cover;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-subheading2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-subheading2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-subheading2-font-size-scale, 1)));font-weight:var(--forge-typography-subheading2-font-weight,400);line-height:var(--forge-typography-subheading2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-subheading2-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-subheading2-letter-spacing, normal);text-transform:var(--forge-typography-subheading2-text-transform,inherit);text-decoration:var(--forge-typography-subheading2-text-decoration,inherit);color:var(--_avatar-color)}.forge-avatar--image{background-color:inherit}';
|
|
14
14
|
/**
|
|
15
15
|
* @tag forge-avatar
|
|
16
16
|
*
|
package/esm/backdrop/backdrop.js
CHANGED
|
@@ -8,7 +8,7 @@ import { attachShadowTemplate, coerceBoolean, customElement, getShadowElement }
|
|
|
8
8
|
import { BaseComponent } from '../core/base/base-component';
|
|
9
9
|
import { BACKDROP_CONSTANTS } from './backdrop-constants';
|
|
10
10
|
const template = '<template><div class=\"forge-backdrop\" part=\"root\"></div></template>';
|
|
11
|
-
const styles = '@keyframes enter{from{opacity:0}to{opacity:var(--_backdrop-opacity)}}@keyframes exit{from{opacity:var(--_backdrop-opacity)}to{opacity:0}}:host{display:contents}:host([hidden]){display:none}.forge-backdrop{--_backdrop-background:var(--forge-backdrop-background, #000);--_backdrop-opacity:var(--forge-backdrop-opacity, 0.54);--_backdrop-z-index:var(--forge-backdrop-z-index, var(--forge-z-index-backdrop, 7));--_backdrop-enter-animation-duration:var(--forge-backdrop-enter-animation-duration, var(--forge-animation-duration-short4, 200ms));--_backdrop-enter-animation-easing:var(--forge-backdrop-enter-animation-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_backdrop-exit-animation-duration:var(--forge-backdrop-exit-animation-duration, var(--forge-animation-duration-short1, 50ms));--_backdrop-exit-animation-easing:var(--forge-backdrop-exit-animation-easing, var(--forge-animation-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15)))}.forge-backdrop{position:absolute;inset:0;
|
|
11
|
+
const styles = '@keyframes enter{from{opacity:0}to{opacity:var(--_backdrop-opacity)}}@keyframes exit{from{opacity:var(--_backdrop-opacity)}to{opacity:0}}:host{display:contents}:host([hidden]){display:none}.forge-backdrop{--_backdrop-background:var(--forge-backdrop-background, #000);--_backdrop-opacity:var(--forge-backdrop-opacity, 0.54);--_backdrop-z-index:var(--forge-backdrop-z-index, var(--forge-z-index-backdrop, 7));--_backdrop-enter-animation-duration:var(--forge-backdrop-enter-animation-duration, var(--forge-animation-duration-short4, 200ms));--_backdrop-enter-animation-easing:var(--forge-backdrop-enter-animation-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_backdrop-exit-animation-duration:var(--forge-backdrop-exit-animation-duration, var(--forge-animation-duration-short1, 50ms));--_backdrop-exit-animation-easing:var(--forge-backdrop-exit-animation-easing, var(--forge-animation-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15)))}.forge-backdrop{position:absolute;inset:0;z-index:var(--_backdrop-z-index);background:var(--_backdrop-background);opacity:0;animation-fill-mode:forwards}:host([fixed]) .forge-backdrop{position:fixed}:host([visible]) .forge-backdrop{opacity:var(--_backdrop-opacity)}:host([visible]) .forge-backdrop.entering{animation-name:enter;animation-duration:var(--_backdrop-enter-animation-duration);animation-timing-function:var(--_backdrop-enter-animation-easing)}:host([visible]) .forge-backdrop.exiting{animation-name:exit;animation-duration:var(--_backdrop-exit-animation-duration);animation-timing-function:var(--_backdrop-exit-animation-easing)}';
|
|
12
12
|
/**
|
|
13
13
|
* @tag forge-backdrop
|
|
14
14
|
*
|
package/esm/divider/divider.js
CHANGED
|
@@ -8,7 +8,7 @@ import { attachShadowTemplate, coerceBoolean, customElement } from '@tylertech/f
|
|
|
8
8
|
import { BaseComponent } from '../core/base/base-component';
|
|
9
9
|
import { DIVIDER_CONSTANTS } from './divider-constants';
|
|
10
10
|
const template = '<template><div class=\"forge-divider\" part=\"root\"></div></template>';
|
|
11
|
-
const styles = ':host{--_divider-margin:var(--forge-divider-margin, 0)}:host{display:block;
|
|
11
|
+
const styles = ':host{--_divider-margin:var(--forge-divider-margin, 0)}:host{display:block;margin:var(--_divider-margin)}:host([hidden]){display:none}.forge-divider{--_divider-color:var(--forge-divider-color, var(--forge-theme-outline, #e0e0e0));--_divider-width:var(--forge-divider-width, var(--forge-border-thin, 1px));--_divider-border-style:var(--forge-divider-border-style, solid)}.forge-divider{border:none;border-bottom-color:var(--_divider-color);border-bottom-width:var(--_divider-width);border-bottom-style:var(--_divider-border-style);height:0}:host([vertical]){display:inline-block;height:100%}:host([vertical]) .forge-divider{border:none;border-right-color:var(--_divider-color);border-right-width:var(--_divider-width);border-right-style:var(--_divider-border-style);height:100%;width:0}';
|
|
12
12
|
/**
|
|
13
13
|
* @tag forge-divider
|
|
14
14
|
*
|
|
@@ -8,7 +8,7 @@ import { customElement, attachShadowTemplate } from '@tylertech/forge-core';
|
|
|
8
8
|
import { DRAWER_CONSTANTS } from './drawer-constants';
|
|
9
9
|
import { BaseDrawerAdapter, BaseDrawerComponent, BaseDrawerCore } from '../base';
|
|
10
10
|
const template = '<template><div class=\"forge-drawer\" part=\"root\"><slot name=\"header\"></slot><div class=\"content\" part=\"content\"><slot></slot></div><slot name=\"footer\"></slot></div></template>';
|
|
11
|
-
const styles = ':host{display:
|
|
11
|
+
const styles = ':host{display:grid;box-sizing:border-box;height:100%;overflow:hidden!important;--forge-divider-margin:4px 0}.forge-drawer{--_drawer-background:var(--forge-drawer-background, var(--forge-theme-surface, #ffffff));--_drawer-border-color:var(--forge-drawer-border-color, var(--forge-theme-outline, #e0e0e0));--_drawer-width:var(--forge-drawer-width, 256px);--_drawer-border-width:var(--forge-drawer-border-width, var(--forge-border-thin, 1px));--_drawer-transition-duration:var(--forge-drawer-transition-duration, var(--forge-animation-duration-medium1, 250ms));--_drawer-transition-easing:var(--forge-drawer-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_drawer-transition-duration-close:var(--forge-drawer-transition-duration-close, var(--forge-animation-duration-short4, 200ms))}.forge-drawer{width:var(--_drawer-width);height:100%;box-sizing:border-box;overflow:hidden;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;background-color:var(--_drawer-background);border-color:var(--_drawer-border-color);transition-property:transform;transition-duration:var(--_drawer-transition-duration);transition-timing-function:var(--_drawer-transition-easing)}.forge-drawer ::slotted([slot=header]){grid-row:1}.forge-drawer ::slotted([slot=footer]){grid-row:3}.forge-drawer .content{overflow-x:auto;-webkit-overflow-scrolling:\"touch\";display:flex;flex-direction:column;grid-row:2}.forge-drawer .content::-webkit-scrollbar{height:var(--forge-scrollbar-height,16px);width:var(--forge-scrollbar-width,16px)}.forge-drawer .content::-webkit-scrollbar-track{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-track:hover{background-color:var(--forge-scrollbar-track-container-hover,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-corner{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-thumb{height:var(--forge-scrollbar-thumb-min-height,32px);width:var(--forge-scrollbar-thumb-min-width,32px);border-radius:var(--forge-scrollbar-border-radius,calc(var(--forge-shape-full,9999px) * var(--forge-shape-factor,1)));border-width:var(--forge-scrollbar-border-width,3px);border-style:solid;border-color:transparent;background-color:var(--forge-scrollbar-thumb-container,var(--forge-theme-surface-container-medium,#c2c2c2));background-clip:content-box}.forge-drawer .content::-webkit-scrollbar-thumb:hover{background-color:var(--forge-scrollbar-thumb-container-hover,var(--forge-theme-surface-container-high,#9e9e9e))}.forge-drawer.left{border-right-width:var(--_drawer-border-width);border-right-style:solid}.forge-drawer.right{border-left-width:var(--_drawer-border-width);border-left-style:solid}.forge-drawer.right.closing{transform:translateX(100%);right:0;left:auto;z-index:var(--forge-z-index-surface,1);position:absolute;top:0;right:0;transition-duration:var(--_drawer-transition-duration-close)}.forge-drawer.right.closed{transform:translateX(100%);right:0;left:auto;width:0;border:none}.forge-drawer.closing{transform:translateX(-100%);left:0;z-index:var(--forge-z-index-surface,1);position:absolute;top:0;right:0;transition-duration:var(--_drawer-transition-duration-close)}.forge-drawer.closed{transform:translateX(-100%);left:0;width:0;border:none}.forge-drawer.no-transition{transition:none!important}:host([open]){transform:translateZ(0)}';
|
|
12
12
|
/**
|
|
13
13
|
* @tag forge-drawer
|
|
14
14
|
*
|
|
@@ -20,6 +20,7 @@ declare global {
|
|
|
20
20
|
* @attribute {boolean} [hover=false] - The drawer will expand open when hovered.
|
|
21
21
|
*
|
|
22
22
|
* @cssproperty --forge-mini-drawer-width - The width of the drawer.
|
|
23
|
+
* @cssproperty --forge-mini-drawer-min-width - The minimum width of the drawer. Defaults to match the width.
|
|
23
24
|
* @cssproperty --forge-mini-drawer-hover-width - The width of the drawer when hovered.
|
|
24
25
|
* @cssproperty --forge-mini-drawer-transition-duration - The transition duration of the drawer.
|
|
25
26
|
* @cssproperty --forge-mini-drawer-transition-easing - The transition timing function of the drawer.
|
|
@@ -8,7 +8,7 @@ import { attachShadowTemplate, customElement } from '@tylertech/forge-core';
|
|
|
8
8
|
import { BaseDrawerAdapter, BaseDrawerComponent, BaseDrawerCore } from '../base';
|
|
9
9
|
import { MINI_DRAWER_CONSTANTS } from './mini-drawer-constants';
|
|
10
10
|
const template = '<template><div class=\"root\" part=\"root\"><div class=\"forge-drawer mini\" part=\"container\"><slot name=\"header\"></slot><div class=\"content\" part=\"content\"><slot></slot></div><slot name=\"footer\"></slot></div></div></template>';
|
|
11
|
-
const styles = ':host{--_mini-drawer-width:var(--forge-mini-drawer-width, 56px);--_mini-drawer-hover-width:var(--forge-mini-drawer-hover-width, var(--forge-drawer-width, 256px));--_mini-drawer-transition-duration:var(--forge-mini-drawer-transition-duration, var(--forge-animation-duration-short4, 200ms));--_mini-drawer-transition-easing:var(--forge-mini-drawer-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_mini-drawer-transition-delay:var(--forge-mini-drawer-transition-delay, 300ms);--_mini-drawer-hover-transition-duration:var(--forge-mini-drawer-hover-transition-duration, var(--forge-animation-duration-medium2, 300ms));--_mini-drawer-hover-transition-easing:var(--forge-mini-drawer-hover-transition-easing, var(--_mini-drawer-transition-easing));--_mini-drawer-hover-transition-delay:var(--forge-mini-drawer-hover-transition-delay, var(--forge-animation-duration-medium2, 300ms))}:host{display:
|
|
11
|
+
const styles = ':host{--_mini-drawer-width:var(--forge-mini-drawer-width, 56px);--_mini-drawer-min-width:var(--forge-mini-drawer-min-width, var(--_mini-drawer-width));--_mini-drawer-hover-width:var(--forge-mini-drawer-hover-width, var(--forge-drawer-width, 256px));--_mini-drawer-transition-duration:var(--forge-mini-drawer-transition-duration, var(--forge-animation-duration-short4, 200ms));--_mini-drawer-transition-easing:var(--forge-mini-drawer-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_mini-drawer-transition-delay:var(--forge-mini-drawer-transition-delay, 300ms);--_mini-drawer-hover-transition-duration:var(--forge-mini-drawer-hover-transition-duration, var(--forge-animation-duration-medium2, 300ms));--_mini-drawer-hover-transition-easing:var(--forge-mini-drawer-hover-transition-easing, var(--_mini-drawer-transition-easing));--_mini-drawer-hover-transition-delay:var(--forge-mini-drawer-hover-transition-delay, var(--forge-animation-duration-medium2, 300ms))}:host{display:grid;box-sizing:border-box;height:100%;overflow:hidden!important;width:var(--_mini-drawer-width);overflow:visible!important;--forge-divider-margin:4px 0}:host([direction=right]){min-width:var(--_mini-drawer-width);width:auto}:host([direction=right]) .root{position:relative}:host(:not([open])){display:none}:host([hover]) .right{position:absolute;right:0}:host([hover]) .forge-drawer:hover{width:var(--_mini-drawer-hover-width)!important;transition:width var(--_mini-drawer-hover-transition-duration) var(--_mini-drawer-hover-transition-easing) var(--_mini-drawer-hover-transition-delay)}:host([hover]) .forge-drawer:hover .content{overflow:auto;overflow:overlay}.forge-drawer{--_drawer-background:var(--forge-drawer-background, var(--forge-theme-surface, #ffffff));--_drawer-border-color:var(--forge-drawer-border-color, var(--forge-theme-outline, #e0e0e0));--_drawer-width:var(--forge-drawer-width, 256px);--_drawer-border-width:var(--forge-drawer-border-width, var(--forge-border-thin, 1px));--_drawer-transition-duration:var(--forge-drawer-transition-duration, var(--forge-animation-duration-medium1, 250ms));--_drawer-transition-easing:var(--forge-drawer-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_drawer-transition-duration-close:var(--forge-drawer-transition-duration-close, var(--forge-animation-duration-short4, 200ms))}.forge-drawer{width:var(--_drawer-width);height:100%;box-sizing:border-box;overflow:hidden;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;background-color:var(--_drawer-background);border-color:var(--_drawer-border-color);transition-property:transform;transition-duration:var(--_drawer-transition-duration);transition-timing-function:var(--_drawer-transition-easing)}.forge-drawer ::slotted([slot=header]){grid-row:1}.forge-drawer ::slotted([slot=footer]){grid-row:3}.forge-drawer .content{overflow-x:auto;-webkit-overflow-scrolling:\"touch\";display:flex;flex-direction:column;grid-row:2}.forge-drawer .content::-webkit-scrollbar{height:var(--forge-scrollbar-height,16px);width:var(--forge-scrollbar-width,16px)}.forge-drawer .content::-webkit-scrollbar-track{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-track:hover{background-color:var(--forge-scrollbar-track-container-hover,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-corner{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-thumb{height:var(--forge-scrollbar-thumb-min-height,32px);width:var(--forge-scrollbar-thumb-min-width,32px);border-radius:var(--forge-scrollbar-border-radius,calc(var(--forge-shape-full,9999px) * var(--forge-shape-factor,1)));border-width:var(--forge-scrollbar-border-width,3px);border-style:solid;border-color:transparent;background-color:var(--forge-scrollbar-thumb-container,var(--forge-theme-surface-container-medium,#c2c2c2));background-clip:content-box}.forge-drawer .content::-webkit-scrollbar-thumb:hover{background-color:var(--forge-scrollbar-thumb-container-hover,var(--forge-theme-surface-container-high,#9e9e9e))}.forge-drawer.left{border-right-width:var(--_drawer-border-width);border-right-style:solid}.forge-drawer.right{border-left-width:var(--_drawer-border-width);border-left-style:solid}.forge-drawer.right.closing{transform:translateX(100%);right:0;left:auto;z-index:var(--forge-z-index-surface,1);position:absolute;top:0;right:0;transition-duration:var(--_drawer-transition-duration-close)}.forge-drawer.right.closed{transform:translateX(100%);right:0;left:auto;width:0;border:none}.forge-drawer.closing{transform:translateX(-100%);left:0;z-index:var(--forge-z-index-surface,1);position:absolute;top:0;right:0;transition-duration:var(--_drawer-transition-duration-close)}.forge-drawer.closed{transform:translateX(-100%);left:0;width:0;border:none}.forge-drawer.no-transition{transition:none!important}.root{z-index:var(--forge-z-index-surface,1);height:100%;min-width:var(--_mini-drawer-min-width)}.forge-drawer.mini{width:var(--_mini-drawer-width);z-index:var(--forge-z-index-surface,1);transition:width var(--_mini-drawer-transition-duration) var(--_mini-drawer-transition-easing)}.forge-drawer.mini .content{overflow:hidden}.forge-drawer.closed{width:0}';
|
|
12
12
|
/**
|
|
13
13
|
* @tag forge-mini-drawer
|
|
14
14
|
*
|
|
@@ -17,6 +17,7 @@ const styles = ':host{--_mini-drawer-width:var(--forge-mini-drawer-width, 56px);
|
|
|
17
17
|
* @attribute {boolean} [hover=false] - The drawer will expand open when hovered.
|
|
18
18
|
*
|
|
19
19
|
* @cssproperty --forge-mini-drawer-width - The width of the drawer.
|
|
20
|
+
* @cssproperty --forge-mini-drawer-min-width - The minimum width of the drawer. Defaults to match the width.
|
|
20
21
|
* @cssproperty --forge-mini-drawer-hover-width - The width of the drawer when hovered.
|
|
21
22
|
* @cssproperty --forge-mini-drawer-transition-duration - The transition duration of the drawer.
|
|
22
23
|
* @cssproperty --forge-mini-drawer-transition-easing - The transition timing function of the drawer.
|
|
@@ -12,7 +12,7 @@ import { LinearProgressAdapter } from './linear-progress-adapter';
|
|
|
12
12
|
import { LINEAR_PROGRESS_CONSTANTS } from './linear-progress-constants';
|
|
13
13
|
import { LinearProgressCore } from './linear-progress-core';
|
|
14
14
|
const template = '<template><div class=\"forge-linear-progress forge-linear-progress--indeterminate\" part=\"progressbar\"><div class=\"dots\"></div><div class=\"track\"></div><div class=\"bar primary-bar\"><div class=\"bar-inner\"></div></div><div class=\"bar secondary-bar\"><div class=\"bar-inner\"></div></div></div></template>';
|
|
15
|
-
const styles = ':host{--_linear-progress-track-height:var(--forge-linear-progress-track-height, 4px)}:host{display:block;position:relative;min-inline-size:80px;block-size:var(--_linear-progress-track-height);content-visibility:auto;contain:strict}:host([hidden]){display:none}.forge-linear-progress{--_linear-progress-track-color:var(--forge-linear-progress-track-color, var(--forge-theme-tertiary-container, #d0d7ff));--_linear-progress-track-shape:var(--forge-linear-progress-track-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));--_linear-progress-indicator-color:var(--forge-linear-progress-indicator-color, var(--forge-theme-tertiary, #3d5afe));--_linear-progress-indicator-height:var(--forge-linear-progress-indicator-height, var(--_linear-progress-track-height));--_linear-progress-determinate-duration:var(--forge-linear-progress-determinate-duration, var(--forge-animation-duration-medium1, 250ms));--_linear-progress-determinate-easing:var(--forge-linear-progress-determinate-easing, cubic-bezier(0.4, 0, 0.6, 1));--_linear-progress-indeterminate-duration:var(--forge-linear-progress-indeterminate-duration, 2s);--_linear-progress-buffer-duration:var(--forge-linear-progress-buffer-duration, var(--forge-animation-duration-short4, 200ms));--_linear-progress-theme-transition-duration:var(--forge-linear-progress-theme-transition-duration, var(--forge-animation-duration-short3, 150ms));--_linear-progress-theme-transition-timing:var(--forge-linear-progress-theme-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_linear-progress-track-dot-size:calc(var(--_linear-progress-track-height) / 2);--_linear-progress-track-background-width:calc(var(--_linear-progress-track-dot-size) * 5);--_linear-progress-track-background:0/var(--_linear-progress-track-background-width) 100% radial-gradient(circle at calc(var(--_linear-progress-track-dot-size) * 2), var(--_linear-progress-track-color) 0, var(--_linear-progress-track-color) var(--_linear-progress-track-dot-size), transparent var(--_linear-progress-track-dot-size))}.forge-linear-progress{inset:0;outline:transparent solid 1px;border-radius:var(--_linear-progress-track-shape);overflow:hidden;display:flex;align-items:center}.bar,.bar-inner,.dots,.forge-linear-progress,.track{position:absolute}.dots{inset:0;animation:linear infinite var(--_linear-progress-buffer-duration);animation-name:buffering;background-color:var(--_linear-progress-track-color);background-repeat:repeat-x;mask-image:url(\"data:image/svg+xml,%3Csvg version=\'1.1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 5 2\' preserveAspectRatio=\'xMinYMin slice\'%3E%3Ccircle cx=\'1\' cy=\'1\' r=\'1\'/%3E%3C/svg%3E\");z-index:-1}.bar{animation:none;inline-size:100%;block-size:var(--_linear-progress-indicator-height);transform-origin:left center;will-change:transform;transition:transform var(--_linear-progress-determinate-duration) var(--_linear-progress-determinate-easing)}.secondary-bar{display:none}.bar-inner{inset:0;animation:none;transition:background-color var(--_linear-progress-theme-transition-duration) var(--_linear-progress-theme-transition-timing);background:var(--_linear-progress-indicator-color)}.track{inset:0;will-change:transform;background:var(--_linear-progress-track-color);transition:transform var(--_linear-progress-determinate-duration) var(--_linear-progress-determinate-easing),background-color var(--_linear-progress-theme-transition-duration) var(--_linear-progress-theme-transition-timing);transform-origin:left center}.forge-linear-progress--indeterminate .bar{transition:none}.forge-linear-progress--indeterminate .primary-bar{inset-inline-start:-145.167%;will-change:transform;animation:linear infinite var(--_linear-progress-indeterminate-duration);animation-name:primary-indeterminate-translate}.forge-linear-progress--indeterminate .secondary-bar{inset-inline-start:-54.8889%;display:block;will-change:transform;animation:linear infinite var(--_linear-progress-indeterminate-duration);animation-name:secondary-indeterminate-translate}.forge-linear-progress--indeterminate .dots{display:none}.forge-linear-progress--indeterminate .primary-bar>.bar-inner{will-change:transform;animation:linear infinite var(--_linear-progress-indeterminate-duration) primary-indeterminate-scale}.forge-linear-progress--indeterminate .secondary-bar>.bar-inner{will-change:transform;animation:linear infinite var(--_linear-progress-indeterminate-duration) secondary-indeterminate-scale}:host-context([dir=rtl]) .forge-linear-progress .bar{transform-origin:right center}:host-context([dir=rtl]) .forge-linear-progress .track{transform-origin:right center}:host-context([dir=rtl]) .forge-linear-progress .dots{animation-name:buffering-rtl}:host-context([dir=rtl]) .forge-linear-progress.forge-linear-progress--indeterminate .primary-bar{animation-name:primary-indeterminate-translate-rtl}:host-context([dir=rtl]) .forge-linear-progress.forge-linear-progress--indeterminate .secondary-bar{animation-name:secondary-indeterminate-translate-rtl}:host([dir=rtl]) .forge-linear-progress .bar{transform-origin:right center}:host([dir=rtl]) .forge-linear-progress .track{transform-origin:right center}:host([dir=rtl]) .forge-linear-progress .dots{animation-name:buffering-rtl}:host([dir=rtl]) .forge-linear-progress.forge-linear-progress--indeterminate .primary-bar{animation-name:primary-indeterminate-translate-rtl}:host([dir=rtl]) .forge-linear-progress.forge-linear-progress--indeterminate .secondary-bar{animation-name:secondary-indeterminate-translate-rtl}.forge-linear-progress:dir(rtl) .bar{transform-origin:right center}.forge-linear-progress:dir(rtl) .track{transform-origin:right center}.forge-linear-progress:dir(rtl) .dots{animation-name:buffering-rtl}.forge-linear-progress:dir(rtl).forge-linear-progress--indeterminate .primary-bar{animation-name:primary-indeterminate-translate-rtl}.forge-linear-progress:dir(rtl).forge-linear-progress--indeterminate .secondary-bar{animation-name:secondary-indeterminate-translate-rtl}:host([theme=primary]) .forge-linear-progress{--_linear-progress-indicator-color:var(--forge-linear-progress-indicator-color, var(--forge-theme-primary, #3f51b5));--_linear-progress-track-color:var(--forge-linear-progress-track-color, var(--forge-theme-primary-container, #d1d5ed))}:host([theme=secondary]) .forge-linear-progress{--_linear-progress-indicator-color:var(--forge-linear-progress-indicator-color, var(--forge-theme-secondary, #ffc107));--_linear-progress-track-color:var(--forge-linear-progress-track-color, var(--forge-theme-secondary-container, #fff0c3))}:host([theme=success]) .forge-linear-progress{--_linear-progress-indicator-color:var(--forge-linear-progress-indicator-color, var(--forge-theme-success, #2e7d32));--_linear-progress-track-color:var(--forge-linear-progress-track-color, var(--forge-theme-success-container, #cde0ce))}:host([theme=error]) .forge-linear-progress{--_linear-progress-indicator-color:var(--forge-linear-progress-indicator-color, var(--forge-theme-error, #b00020));--_linear-progress-track-color:var(--forge-linear-progress-track-color, var(--forge-theme-error-container, #ecc2c9))}:host([theme=warning]) .forge-linear-progress{--_linear-progress-indicator-color:var(--forge-linear-progress-indicator-color, var(--forge-theme-warning, #d14900));--_linear-progress-track-color:var(--forge-linear-progress-track-color, var(--forge-theme-warning-container, #f4d3c2))}:host([theme=info]) .forge-linear-progress{--_linear-progress-indicator-color:var(--forge-linear-progress-indicator-color, var(--forge-theme-info, #1565c0));--_linear-progress-track-color:var(--forge-linear-progress-track-color, var(--forge-theme-info-container, #c7daf0))}@media screen and (forced-colors:active){.forge-linear-progress{--_linear-progress-indicator-color:var(--forge-linear-progress-indicator-color, CanvasText);--_linear-progress-track-color:var(--forge-linear-progress-track-color, GrayText);border:1px solid CanvasText}.forge-linear-progress.forge-linear-progress--indeterminate{--_linear-progress-track-color:var(--forge-linear-progress-track-color, Canvas)}}@keyframes buffering{0%{transform:translateX(calc(1 * var(--_linear-progress-track-background-width)))}}@keyframes primary-indeterminate-translate{0%{transform:translateX(0)}20%{animation-timing-function:cubic-bezier(0.5,0,0.701732,0.495819);transform:translateX(0)}59.15%{animation-timing-function:cubic-bezier(0.302435,0.381352,0.55,0.956352);transform:translateX(calc(1 * 83.6714%))}100%{transform:translateX(calc(1 * 200.611%))}}@keyframes secondary-indeterminate-translate{0%{animation-timing-function:cubic-bezier(0.15,0,0.515058,0.409685);transform:translateX(0)}25%{animation-timing-function:cubic-bezier(0.31033,0.284058,0.8,0.733712);transform:translateX(calc(1 * 37.6519%))}48.35%{animation-timing-function:cubic-bezier(0.4,0.627035,0.6,0.902026);transform:translateX(calc(1 * 84.3862%))}100%{transform:translateX(calc(1 * 160.278%))}}@keyframes buffering-rtl{0%{transform:translateX(calc(-1 * var(--_linear-progress-track-background-width)))}}@keyframes primary-indeterminate-translate-rtl{0%{transform:translateX(0)}20%{animation-timing-function:cubic-bezier(0.5,0,0.701732,0.495819);transform:translateX(0)}59.15%{animation-timing-function:cubic-bezier(0.302435,0.381352,0.55,0.956352);transform:translateX(calc(-1 * 83.6714%))}100%{transform:translateX(calc(-1 * 200.611%))}}@keyframes secondary-indeterminate-translate-rtl{0%{animation-timing-function:cubic-bezier(0.15,0,0.515058,0.409685);transform:translateX(0)}25%{animation-timing-function:cubic-bezier(0.31033,0.284058,0.8,0.733712);transform:translateX(calc(-1 * 37.6519%))}48.35%{animation-timing-function:cubic-bezier(0.4,0.627035,0.6,0.902026);transform:translateX(calc(-1 * 84.3862%))}100%{transform:translateX(calc(-1 * 160.278%))}}@keyframes primary-indeterminate-scale{0%{transform:scaleX(.08)}36.65%{animation-timing-function:cubic-bezier(0.334731,0.12482,0.785844,1);transform:scaleX(.08)}69.15%{animation-timing-function:cubic-bezier(0.06,0.11,0.6,1);transform:scaleX(.661479)}100%{transform:scaleX(.08)}}@keyframes secondary-indeterminate-scale{0%{animation-timing-function:cubic-bezier(0.205028,0.057051,0.57661,0.453971);transform:scaleX(.08)}19.15%{animation-timing-function:cubic-bezier(0.152313,0.196432,0.648374,1.00432);transform:scaleX(.457104)}44.15%{animation-timing-function:cubic-bezier(0.257759,-0.003163,0.211762,1.38179);transform:scaleX(.72796)}100%{transform:scaleX(.08)}}';
|
|
15
|
+
const styles = ':host{--_linear-progress-track-height:var(--forge-linear-progress-track-height, 4px)}:host{display:block;position:relative;min-inline-size:80px;block-size:var(--_linear-progress-track-height);contain:strict;content-visibility:auto}:host([hidden]){display:none}.forge-linear-progress{--_linear-progress-track-color:var(--forge-linear-progress-track-color, var(--forge-theme-tertiary-container, #d0d7ff));--_linear-progress-track-shape:var(--forge-linear-progress-track-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));--_linear-progress-indicator-color:var(--forge-linear-progress-indicator-color, var(--forge-theme-tertiary, #3d5afe));--_linear-progress-indicator-height:var(--forge-linear-progress-indicator-height, var(--_linear-progress-track-height));--_linear-progress-determinate-duration:var(--forge-linear-progress-determinate-duration, var(--forge-animation-duration-medium1, 250ms));--_linear-progress-determinate-easing:var(--forge-linear-progress-determinate-easing, cubic-bezier(0.4, 0, 0.6, 1));--_linear-progress-indeterminate-duration:var(--forge-linear-progress-indeterminate-duration, 2s);--_linear-progress-buffer-duration:var(--forge-linear-progress-buffer-duration, var(--forge-animation-duration-short4, 200ms));--_linear-progress-theme-transition-duration:var(--forge-linear-progress-theme-transition-duration, var(--forge-animation-duration-short3, 150ms));--_linear-progress-theme-transition-timing:var(--forge-linear-progress-theme-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_linear-progress-track-dot-size:calc(var(--_linear-progress-track-height) / 2);--_linear-progress-track-background-width:calc(var(--_linear-progress-track-dot-size) * 5);--_linear-progress-track-background:0/var(--_linear-progress-track-background-width) 100% radial-gradient(circle at calc(var(--_linear-progress-track-dot-size) * 2), var(--_linear-progress-track-color) 0, var(--_linear-progress-track-color) var(--_linear-progress-track-dot-size), transparent var(--_linear-progress-track-dot-size))}.forge-linear-progress{inset:0;outline:transparent solid 1px;border-radius:var(--_linear-progress-track-shape);overflow:hidden;display:flex;align-items:center}.bar,.bar-inner,.dots,.forge-linear-progress,.track{position:absolute}.dots{inset:0;animation:linear infinite var(--_linear-progress-buffer-duration);animation-name:buffering;background-color:var(--_linear-progress-track-color);background-repeat:repeat-x;mask-image:url(\"data:image/svg+xml,%3Csvg version=\'1.1\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 5 2\' preserveAspectRatio=\'xMinYMin slice\'%3E%3Ccircle cx=\'1\' cy=\'1\' r=\'1\'/%3E%3C/svg%3E\");z-index:-1}.bar{animation:none;inline-size:100%;block-size:var(--_linear-progress-indicator-height);transform-origin:left center;will-change:transform;transition:transform var(--_linear-progress-determinate-duration) var(--_linear-progress-determinate-easing)}.secondary-bar{display:none}.bar-inner{inset:0;animation:none;transition:background-color var(--_linear-progress-theme-transition-duration) var(--_linear-progress-theme-transition-timing);background:var(--_linear-progress-indicator-color)}.track{inset:0;will-change:transform;background:var(--_linear-progress-track-color);transition:transform var(--_linear-progress-determinate-duration) var(--_linear-progress-determinate-easing),background-color var(--_linear-progress-theme-transition-duration) var(--_linear-progress-theme-transition-timing);transform-origin:left center}.forge-linear-progress--indeterminate .bar{transition:none}.forge-linear-progress--indeterminate .primary-bar{inset-inline-start:-145.167%;will-change:transform;animation:linear infinite var(--_linear-progress-indeterminate-duration);animation-name:primary-indeterminate-translate}.forge-linear-progress--indeterminate .secondary-bar{inset-inline-start:-54.8889%;display:block;will-change:transform;animation:linear infinite var(--_linear-progress-indeterminate-duration);animation-name:secondary-indeterminate-translate}.forge-linear-progress--indeterminate .dots{display:none}.forge-linear-progress--indeterminate .primary-bar>.bar-inner{will-change:transform;animation:linear infinite var(--_linear-progress-indeterminate-duration) primary-indeterminate-scale}.forge-linear-progress--indeterminate .secondary-bar>.bar-inner{will-change:transform;animation:linear infinite var(--_linear-progress-indeterminate-duration) secondary-indeterminate-scale}:host-context([dir=rtl]) .forge-linear-progress .bar{transform-origin:right center}:host-context([dir=rtl]) .forge-linear-progress .track{transform-origin:right center}:host-context([dir=rtl]) .forge-linear-progress .dots{animation-name:buffering-rtl}:host-context([dir=rtl]) .forge-linear-progress.forge-linear-progress--indeterminate .primary-bar{animation-name:primary-indeterminate-translate-rtl}:host-context([dir=rtl]) .forge-linear-progress.forge-linear-progress--indeterminate .secondary-bar{animation-name:secondary-indeterminate-translate-rtl}:host([dir=rtl]) .forge-linear-progress .bar{transform-origin:right center}:host([dir=rtl]) .forge-linear-progress .track{transform-origin:right center}:host([dir=rtl]) .forge-linear-progress .dots{animation-name:buffering-rtl}:host([dir=rtl]) .forge-linear-progress.forge-linear-progress--indeterminate .primary-bar{animation-name:primary-indeterminate-translate-rtl}:host([dir=rtl]) .forge-linear-progress.forge-linear-progress--indeterminate .secondary-bar{animation-name:secondary-indeterminate-translate-rtl}.forge-linear-progress:dir(rtl) .bar{transform-origin:right center}.forge-linear-progress:dir(rtl) .track{transform-origin:right center}.forge-linear-progress:dir(rtl) .dots{animation-name:buffering-rtl}.forge-linear-progress:dir(rtl).forge-linear-progress--indeterminate .primary-bar{animation-name:primary-indeterminate-translate-rtl}.forge-linear-progress:dir(rtl).forge-linear-progress--indeterminate .secondary-bar{animation-name:secondary-indeterminate-translate-rtl}:host([theme=primary]) .forge-linear-progress{--_linear-progress-indicator-color:var(--forge-linear-progress-indicator-color, var(--forge-theme-primary, #3f51b5));--_linear-progress-track-color:var(--forge-linear-progress-track-color, var(--forge-theme-primary-container, #d1d5ed))}:host([theme=secondary]) .forge-linear-progress{--_linear-progress-indicator-color:var(--forge-linear-progress-indicator-color, var(--forge-theme-secondary, #ffc107));--_linear-progress-track-color:var(--forge-linear-progress-track-color, var(--forge-theme-secondary-container, #fff0c3))}:host([theme=success]) .forge-linear-progress{--_linear-progress-indicator-color:var(--forge-linear-progress-indicator-color, var(--forge-theme-success, #2e7d32));--_linear-progress-track-color:var(--forge-linear-progress-track-color, var(--forge-theme-success-container, #cde0ce))}:host([theme=error]) .forge-linear-progress{--_linear-progress-indicator-color:var(--forge-linear-progress-indicator-color, var(--forge-theme-error, #b00020));--_linear-progress-track-color:var(--forge-linear-progress-track-color, var(--forge-theme-error-container, #ecc2c9))}:host([theme=warning]) .forge-linear-progress{--_linear-progress-indicator-color:var(--forge-linear-progress-indicator-color, var(--forge-theme-warning, #d14900));--_linear-progress-track-color:var(--forge-linear-progress-track-color, var(--forge-theme-warning-container, #f4d3c2))}:host([theme=info]) .forge-linear-progress{--_linear-progress-indicator-color:var(--forge-linear-progress-indicator-color, var(--forge-theme-info, #1565c0));--_linear-progress-track-color:var(--forge-linear-progress-track-color, var(--forge-theme-info-container, #c7daf0))}@media screen and (forced-colors:active){.forge-linear-progress{--_linear-progress-indicator-color:var(--forge-linear-progress-indicator-color, CanvasText);--_linear-progress-track-color:var(--forge-linear-progress-track-color, GrayText);border:1px solid CanvasText}.forge-linear-progress.forge-linear-progress--indeterminate{--_linear-progress-track-color:var(--forge-linear-progress-track-color, Canvas)}}@keyframes buffering{0%{transform:translateX(calc(1 * var(--_linear-progress-track-background-width)))}}@keyframes primary-indeterminate-translate{0%{transform:translateX(0)}20%{animation-timing-function:cubic-bezier(0.5,0,0.701732,0.495819);transform:translateX(0)}59.15%{animation-timing-function:cubic-bezier(0.302435,0.381352,0.55,0.956352);transform:translateX(calc(1 * 83.6714%))}100%{transform:translateX(calc(1 * 200.611%))}}@keyframes secondary-indeterminate-translate{0%{animation-timing-function:cubic-bezier(0.15,0,0.515058,0.409685);transform:translateX(0)}25%{animation-timing-function:cubic-bezier(0.31033,0.284058,0.8,0.733712);transform:translateX(calc(1 * 37.6519%))}48.35%{animation-timing-function:cubic-bezier(0.4,0.627035,0.6,0.902026);transform:translateX(calc(1 * 84.3862%))}100%{transform:translateX(calc(1 * 160.278%))}}@keyframes buffering-rtl{0%{transform:translateX(calc(-1 * var(--_linear-progress-track-background-width)))}}@keyframes primary-indeterminate-translate-rtl{0%{transform:translateX(0)}20%{animation-timing-function:cubic-bezier(0.5,0,0.701732,0.495819);transform:translateX(0)}59.15%{animation-timing-function:cubic-bezier(0.302435,0.381352,0.55,0.956352);transform:translateX(calc(-1 * 83.6714%))}100%{transform:translateX(calc(-1 * 200.611%))}}@keyframes secondary-indeterminate-translate-rtl{0%{animation-timing-function:cubic-bezier(0.15,0,0.515058,0.409685);transform:translateX(0)}25%{animation-timing-function:cubic-bezier(0.31033,0.284058,0.8,0.733712);transform:translateX(calc(-1 * 37.6519%))}48.35%{animation-timing-function:cubic-bezier(0.4,0.627035,0.6,0.902026);transform:translateX(calc(-1 * 84.3862%))}100%{transform:translateX(calc(-1 * 160.278%))}}@keyframes primary-indeterminate-scale{0%{transform:scaleX(.08)}36.65%{animation-timing-function:cubic-bezier(0.334731,0.12482,0.785844,1);transform:scaleX(.08)}69.15%{animation-timing-function:cubic-bezier(0.06,0.11,0.6,1);transform:scaleX(.661479)}100%{transform:scaleX(.08)}}@keyframes secondary-indeterminate-scale{0%{animation-timing-function:cubic-bezier(0.205028,0.057051,0.57661,0.453971);transform:scaleX(.08)}19.15%{animation-timing-function:cubic-bezier(0.152313,0.196432,0.648374,1.00432);transform:scaleX(.457104)}44.15%{animation-timing-function:cubic-bezier(0.257759,-0.003163,0.211762,1.38179);transform:scaleX(.72796)}100%{transform:scaleX(.08)}}';
|
|
16
16
|
/**
|
|
17
17
|
* @tag forge-linear-progress
|
|
18
18
|
*
|
|
@@ -11,7 +11,7 @@ import { SplitViewCore } from './split-view-core';
|
|
|
11
11
|
import { SPLIT_VIEW_CONSTANTS } from './split-view-constants';
|
|
12
12
|
import { SplitViewPanelComponent } from '../split-view-panel';
|
|
13
13
|
const template = '<template><div class=\"forge-split-view\" id=\"root\" part=\"root\"><slot></slot></div></template>';
|
|
14
|
-
const styles = '.forge-split-view{display:flex;width:100%;height:100%}:host{--forge-split-view-handle-width:8px;display:block;height:100%;width:100%;overflow:hidden
|
|
14
|
+
const styles = '.forge-split-view{display:flex;width:100%;height:100%}:host{--forge-split-view-handle-width:8px;display:block;height:100%;width:100%;overflow:hidden}:host([hidden]){display:none}:host([orientation=horizontal]) .forge-split-view{flex-direction:row}:host([orientation=vertical]) .forge-split-view{flex-direction:column}';
|
|
15
15
|
/**
|
|
16
16
|
* @tag forge-split-view
|
|
17
17
|
*/
|
|
@@ -13,7 +13,7 @@ import { SplitViewPanelCore } from './split-view-panel-core';
|
|
|
13
13
|
import { SplitViewPanelAdapter } from './split-view-panel-adapter';
|
|
14
14
|
import { IconComponent, IconRegistry } from '../../icon';
|
|
15
15
|
const template = '<template><div class=\"forge-split-view-panel\" id=\"root\" part=\"root\"><div class=\"forge-split-view-panel__handle\" id=\"handle\" part=\"handle\" role=\"separator\" aria-controls=\"content\" aria-grabbed=\"false\" tabindex=\"0\"><forge-icon class=\"forge-split-view-panel__icon\" id=\"icon\" part=\"icon\"></forge-icon><forge-state-layer target=\"handle\" id=\"state-layer\" exportparts=\"surface:state-layer\"></forge-state-layer><forge-focus-indicator inward target=\"handle\" part=\"focus-indicator\"></forge-focus-indicator></div><div class=\"forge-split-view-panel__content\" id=\"content\" part=\"content\" role=\"group\"><slot></slot></div></div></template>';
|
|
16
|
-
const styles = '.forge-split-view-panel{display:flex;width:100%;height:100%;overflow:hidden
|
|
16
|
+
const styles = '.forge-split-view-panel{display:flex;width:100%;height:100%;overflow:hidden}.forge-split-view-panel__handle{color:var(--forge-theme-text-medium,rgba(0,0,0,.6));background-color:var(--forge-theme-outline,#e0e0e0);position:relative;display:flex;flex-shrink:0;justify-content:center;align-items:center;outline:0}.forge-split-view-panel__content{flex:1;overflow:hidden}.forge-split-view-panel--closed{display:none}.forge-split-view-panel--disabled #handle{pointer-events:none}.forge-split-view-panel--disabled .forge-split-view-panel__icon{display:none}.forge-split-view-panel[orientation=horizontal]{min-width:var(--forge-split-view-handle-width,8px);width:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:row}.forge-split-view-panel[orientation=horizontal] .forge-split-view-panel__handle{width:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:umwsp8b;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes umwsp8b{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=start]{position:absolute;top:0;right:0;animation-name:umwsp8r;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes umwsp8r{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:umwsp92;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes umwsp92{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{position:absolute;top:0;right:0;animation-name:umwsp96;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes umwsp96{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=vertical]{min-height:var(--forge-split-view-handle-width,8px);height:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:column}.forge-split-view-panel[orientation=vertical] .forge-split-view-panel__handle{height:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:umwspa3;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes umwspa3{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=start]{position:absolute;bottom:0;left:0;animation-name:umwspac;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes umwspac{from{transform:none}to{transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:umwspba;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes umwspba{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{position:absolute;bottom:0;left:0;animation-name:umwspbd;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes umwspbd{from{transform:none}to{transform:translateY(100%)}}:host{z-index:var(--forge-split-view-animating-layer)!important;display:block;position:relative;height:100%;width:100%;flex:0}:host([hidden]){display:none}:host(:not([resizable=start],[resizable=end])){flex:1}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel{width:100%;height:100%;min-width:0;min-height:0}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel__handle{display:none}forge-focus-indicator{--forge-focus-indicator-active-width:2px}';
|
|
17
17
|
import { StateLayerComponent } from '../../state-layer';
|
|
18
18
|
import { FocusIndicatorComponent } from '../../focus-indicator';
|
|
19
19
|
/**
|
package/esm/toolbar/toolbar.d.ts
CHANGED
|
@@ -27,8 +27,8 @@ declare global {
|
|
|
27
27
|
* @attribute {boolean} no-padding - Sets the internal padding style to 0.
|
|
28
28
|
* @attribute {boolean} auto-height - Forces the internal container to use `height: auto` for dynamic content that doesn't fit the static height.
|
|
29
29
|
*
|
|
30
|
-
* @cssproperty --forge-
|
|
31
|
-
* @cssproperty --forge-
|
|
30
|
+
* @cssproperty --forge-toolbar-height - Controls the height.
|
|
31
|
+
* @cssproperty --forge-toolbar-min-height - Controls the minimum height. Defaults to the toolbar height.
|
|
32
32
|
* @cssproperty --forge-theme-surface - Controls the background-color of the toolbar.
|
|
33
33
|
* @cssproperty --forge-toolbar-divider-width - Controls the divider width.
|
|
34
34
|
* @cssproperty --forge-toolbar-divider-style - Controls the divider style.
|
package/esm/toolbar/toolbar.js
CHANGED
|
@@ -8,7 +8,7 @@ import { customElement, attachShadowTemplate, coerceBoolean } from '@tylertech/f
|
|
|
8
8
|
import { BaseComponent } from '../core/base/base-component';
|
|
9
9
|
import { TOOLBAR_CONSTANTS } from './toolbar-constants';
|
|
10
10
|
const template = '<template><div class=\"forge-toolbar\" part=\"root\"><div class=\"section\" part=\"before-section-start\"><slot name=\"before-start\"></slot></div><div class=\"inner center\" part=\"inner\"><div class=\"section\" part=\"section-start\"><slot name=\"start\"></slot><slot></slot></div><div class=\"section center\" part=\"section-center\"><slot name=\"center\"></slot></div><div class=\"section end\" part=\"section-end\"><slot name=\"end\"></slot></div></div><div class=\"section end\" part=\"after-section-end\"><slot name=\"after-end\"></slot></div></div></template>';
|
|
11
|
-
const styles = ':host{display:block
|
|
11
|
+
const styles = ':host{display:block}:host([hidden]){display:none}.forge-toolbar{--_toolbar-background:var(--forge-toolbar-background, var(--forge-theme-surface, #ffffff));--_toolbar-height:var(--forge-toolbar-height, 56px);--_toolbar-min-height:var(--forge-toolbar-min-height, var(--_toolbar-height));--_toolbar-divider-width:var(--forge-toolbar-divider-width, var(--forge-border-thin, 1px));--_toolbar-divider-style:var(--forge-toolbar-divider-style, solid);--_toolbar-divider-color:var(--forge-toolbar-divider-color, var(--forge-theme-outline, #e0e0e0));--_toolbar-shape:var(--forge-toolbar-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_toolbar-start-start-shape:var(--forge-toolbar-start-start-shape, var(--_toolbar-shape));--_toolbar-start-end-shape:var(--forge-toolbar-start-end-shape, var(--_toolbar-shape));--_toolbar-end-start-shape:var(--forge-toolbar-end-start-shape, 0);--_toolbar-end-end-shape:var(--forge-toolbar-end-end-shape, 0);--_toolbar-padding:var(--forge-toolbar-padding, var(--forge-spacing-medium, 16px));--_toolbar-padding-block:var(--forge-toolbar-padding-block, 0);--_toolbar-padding-inline:var(--forge-toolbar-padding-inline, var(--_toolbar-padding));--_toolbar-columns:var(--forge-toolbar-columns, auto 1fr auto)}.forge-toolbar{display:grid;grid-template-columns:var(--_toolbar-columns);height:var(--_toolbar-height);min-height:var(--_toolbar-min-height);box-sizing:border-box;padding-inline:0;border-block-end-width:var(--_toolbar-divider-width);border-block-end-style:var(--_toolbar-divider-style);border-block-end-color:var(--_toolbar-divider-color);border-start-start-radius:var(--_toolbar-start-start-shape);border-start-end-radius:var(--_toolbar-start-end-shape);border-end-start-radius:var(--_toolbar-end-start-shape);border-end-end-radius:var(--_toolbar-end-end-shape);background:var(--_toolbar-background)}.inner{display:grid;grid-template-columns:var(--_toolbar-columns);padding-inline:var(--_toolbar-padding-inline);padding-block:var(--_toolbar-padding-block);box-sizing:border-box}.section{display:flex;align-items:center;width:100%;box-sizing:border-box}.section.center{justify-content:center}.section.end{justify-content:end}:host([inverted]) .forge-toolbar{--_toolbar-start-start-shape:var(--forge-toolbar-start-start-shape, 0);--_toolbar-start-end-shape:var(--forge-toolbar-start-end-shape, 0);--_toolbar-end-start-shape:var(--_toolbar-shape);--_toolbar-end-end-shape:var(--_toolbar-shape);border-block-end:none;border-block-start-width:var(--_toolbar-divider-width);border-block-start-style:var(--_toolbar-divider-style);border-block-start-color:var(--_toolbar-divider-color)}:host(:is([no-divider],[no-border])) .forge-toolbar{border:none}:host([no-padding]) .forge-toolbar{--_toolbar-padding:var(--forge-toolbar-padding, 0)}:host([auto-height]) .forge-toolbar{--_toolbar-height:var(--forge-toolbar-height, auto)}::slotted(:is(h1,h2,h3,h4,h5,h6,p)){margin:0}';
|
|
12
12
|
/**
|
|
13
13
|
* @tag forge-toolbar
|
|
14
14
|
*
|
|
@@ -24,8 +24,8 @@ const styles = ':host{display:block;contain:layout}:host([hidden]){display:none}
|
|
|
24
24
|
* @attribute {boolean} no-padding - Sets the internal padding style to 0.
|
|
25
25
|
* @attribute {boolean} auto-height - Forces the internal container to use `height: auto` for dynamic content that doesn't fit the static height.
|
|
26
26
|
*
|
|
27
|
-
* @cssproperty --forge-
|
|
28
|
-
* @cssproperty --forge-
|
|
27
|
+
* @cssproperty --forge-toolbar-height - Controls the height.
|
|
28
|
+
* @cssproperty --forge-toolbar-min-height - Controls the minimum height. Defaults to the toolbar height.
|
|
29
29
|
* @cssproperty --forge-theme-surface - Controls the background-color of the toolbar.
|
|
30
30
|
* @cssproperty --forge-toolbar-divider-width - Controls the divider width.
|
|
31
31
|
* @cssproperty --forge-toolbar-divider-style - Controls the divider style.
|
package/package.json
CHANGED
package/sass/avatar/_core.scss
CHANGED
package/sass/backdrop/_core.scss
CHANGED
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
|
|
13
13
|
$tokens: (
|
|
14
14
|
width: utils.module-val(mini-drawer, width, 56px),
|
|
15
|
+
min-width: utils.module-ref(mini-drawer, min-width, width),
|
|
15
16
|
hover-width: utils.module-val(mini-drawer, hover-width, base-tokens.get(width)),
|
|
16
17
|
transition-duration: utils.module-val(mini-drawer, transition-duration, animation.variable(duration-short4)),
|
|
17
18
|
transition-easing: utils.module-val(mini-drawer, transition-easing, animation.variable(easing-standard)),
|
package/sass/divider/_core.scss
CHANGED
|
@@ -25,13 +25,7 @@
|
|
|
25
25
|
|
|
26
26
|
@include base-core.core-styles;
|
|
27
27
|
|
|
28
|
-
|
|
29
|
-
// Safari fix for triggering reflow after transition completes (as of Safari
|
|
30
|
-
|
|
31
|
-
@media not all and (min-resolution: 0.001dpcm) {
|
|
32
|
-
@supports (-webkit-appearance: none) and (stroke-color: transparent) {
|
|
33
|
-
:host([open]) {
|
|
34
|
-
transform: translateZ(0);
|
|
35
|
-
}
|
|
36
|
-
}
|
|
28
|
+
:host([open]) {
|
|
29
|
+
// Safari fix for triggering reflow after transition completes (as of Safari 17.6)
|
|
30
|
+
transform: translateZ(0);
|
|
37
31
|
}
|
|
@@ -13,8 +13,11 @@
|
|
|
13
13
|
position: relative;
|
|
14
14
|
min-inline-size: 80px;
|
|
15
15
|
block-size: #{token(track-height)};
|
|
16
|
-
|
|
16
|
+
|
|
17
|
+
// `contain` and `content-visibility` are performance optimizations important here because progress indicators
|
|
18
|
+
// are often used when a CPU=intensive task is underway so it's especially important to minimize their CPU consumption.
|
|
17
19
|
contain: strict;
|
|
20
|
+
content-visibility: auto;
|
|
18
21
|
}
|
|
19
22
|
|
|
20
23
|
@mixin progress {
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
* Copyright Tyler Technologies, Inc.
|
|
4
4
|
* License: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
+
@use 'sass:string';
|
|
6
7
|
@use '../../core/styles/animation';
|
|
7
8
|
@use '../../core/styles/theme';
|
|
8
9
|
@use './variables';
|
|
@@ -132,7 +133,6 @@
|
|
|
132
133
|
width: 100%;
|
|
133
134
|
height: 100%;
|
|
134
135
|
overflow: hidden;
|
|
135
|
-
contain: paint size;
|
|
136
136
|
}
|
|
137
137
|
|
|
138
138
|
@mixin base-horizontal() {
|
|
@@ -213,7 +213,7 @@
|
|
|
213
213
|
@mixin closing-animation($direction: right) {
|
|
214
214
|
@include animating-position($direction);
|
|
215
215
|
|
|
216
|
-
$animation-name: unique-id;
|
|
216
|
+
$animation-name: string.unique-id();
|
|
217
217
|
|
|
218
218
|
animation-name: $animation-name;
|
|
219
219
|
animation-duration: #{animation.variable(duration-medium2)};
|