@tylertech/forge 3.3.6 → 3.4.1
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 +82 -43
- package/dist/app-bar/forge-app-bar.css +2 -1
- package/dist/forge.css +12 -0
- package/dist/icon-button/forge-icon-button.css +1 -0
- package/dist/lib.js +1 -1
- package/dist/lib.js.map +3 -3
- package/dist/radio/forge-radio.css +16 -21
- package/dist/toolbar/forge-toolbar.css +2 -1
- package/dist/typography/forge-typography.css +12 -0
- package/dist/vscode.css-custom-data.json +17 -32
- package/dist/vscode.html-custom-data.json +8 -8
- package/esm/app-bar/app-bar/app-bar.d.ts +1 -0
- package/esm/app-bar/app-bar/app-bar.js +2 -1
- package/esm/button-area/button-area.js +1 -1
- package/esm/calendar/calendar-core.d.ts +1 -1
- package/esm/calendar/calendar-core.js +1 -1
- package/esm/calendar/calendar.js +1 -1
- package/esm/checkbox/checkbox.js +1 -1
- package/esm/date-range-picker/date-range-picker.d.ts +5 -0
- package/esm/date-range-picker/date-range-picker.js +5 -0
- package/esm/deprecated/icon-button/deprecated-icon-button.js +1 -1
- package/esm/field/field.js +1 -1
- package/esm/icon-button/icon-button.d.ts +1 -0
- package/esm/icon-button/icon-button.js +2 -1
- package/esm/popover/popover-adapter.js +3 -1
- package/esm/radio/radio/radio.d.ts +1 -4
- package/esm/radio/radio/radio.js +2 -5
- package/esm/switch/switch.js +1 -1
- package/esm/tabs/tab/tab-adapter.d.ts +3 -0
- package/esm/tabs/tab/tab-adapter.js +5 -0
- package/esm/tabs/tab/tab-core.d.ts +3 -0
- package/esm/tabs/tab/tab-core.js +5 -0
- package/esm/tabs/tab/tab.d.ts +6 -4
- package/esm/tabs/tab/tab.js +6 -5
- package/esm/tabs/tab-bar/tab-bar-core.js +1 -1
- package/esm/tabs/tab-bar/tab-bar.d.ts +4 -2
- package/esm/tabs/tab-bar/tab-bar.js +3 -3
- package/esm/text-field/text-field-core.js +7 -2
- package/esm/text-field/text-field.d.ts +1 -0
- package/esm/text-field/text-field.js +3 -0
- package/esm/toolbar/toolbar.d.ts +1 -0
- package/esm/toolbar/toolbar.js +2 -1
- package/esm/tooltip/tooltip.js +1 -1
- package/package.json +1 -1
- package/sass/app-bar/app-bar/_core.scss +1 -1
- package/sass/checkbox/_core.scss +1 -1
- package/sass/core/styles/tokens/app-bar/app-bar/_tokens.scss +1 -0
- package/sass/core/styles/tokens/field/_tokens.scss +2 -2
- package/sass/core/styles/tokens/icon-button/_tokens.scss +1 -0
- package/sass/core/styles/tokens/radio/_tokens.scss +2 -5
- package/sass/core/styles/tokens/tabs/tab/_tokens.scss +6 -6
- package/sass/core/styles/tokens/toolbar/_tokens.scss +2 -1
- package/sass/core/styles/tokens/typography/_tokens.label.scss +10 -0
- package/sass/icon-button/_core.scss +1 -0
- package/sass/radio/forge-radio.scss +3 -3
- package/sass/radio/radio/_core.scss +15 -21
- package/sass/switch/_core.scss +1 -1
- package/sass/tabs/tab/_core.scss +4 -19
- package/sass/tabs/tab/tab.scss +1 -25
- package/sass/tabs/tab-bar/_core.scss +1 -0
- package/sass/toolbar/_core.scss +1 -1
- package/sass/utils/_mixins.scss +1 -1
|
@@ -8,10 +8,12 @@ import { STATE_LAYER_CONSTANTS } from '../../state-layer';
|
|
|
8
8
|
import { BaseAdapter } from '../../core/base/base-adapter';
|
|
9
9
|
import { TAB_BAR_CONSTANTS } from '../tab-bar/tab-bar-constants';
|
|
10
10
|
import { TAB_CONSTANTS } from './tab-constants';
|
|
11
|
+
import { FOCUS_INDICATOR_CONSTANTS } from '../../focus-indicator';
|
|
11
12
|
export class TabAdapter extends BaseAdapter {
|
|
12
13
|
constructor(component) {
|
|
13
14
|
super(component);
|
|
14
15
|
this._tabIndicatorElement = getShadowElement(this._component, TAB_CONSTANTS.selectors.INDICATOR);
|
|
16
|
+
this._focusIndicatorElement = getShadowElement(this._component, FOCUS_INDICATOR_CONSTANTS.elementName);
|
|
15
17
|
this._stateLayerElement = getShadowElement(this._component, STATE_LAYER_CONSTANTS.elementName);
|
|
16
18
|
}
|
|
17
19
|
initialize() {
|
|
@@ -19,6 +21,9 @@ export class TabAdapter extends BaseAdapter {
|
|
|
19
21
|
this._component.setAttribute('role', 'tab');
|
|
20
22
|
this._component.setAttribute('aria-selected', this._component.selected ? 'true' : 'false');
|
|
21
23
|
}
|
|
24
|
+
activateFocusIndicator() {
|
|
25
|
+
this._focusIndicatorElement.active = true;
|
|
26
|
+
}
|
|
22
27
|
addInteractionListener(type, listener) {
|
|
23
28
|
this._component.addEventListener(type, listener);
|
|
24
29
|
}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
* Copyright Tyler Technologies, Inc.
|
|
4
4
|
* License: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
+
import { ExperimentalFocusOptions } from '../../constants';
|
|
6
7
|
import { ITabAdapter } from './tab-adapter';
|
|
7
8
|
export interface ITabCore {
|
|
8
9
|
disabled: boolean;
|
|
@@ -11,6 +12,7 @@ export interface ITabCore {
|
|
|
11
12
|
stacked: boolean;
|
|
12
13
|
secondary: boolean;
|
|
13
14
|
inverted: boolean;
|
|
15
|
+
setFocus(options?: ExperimentalFocusOptions): void;
|
|
14
16
|
}
|
|
15
17
|
export declare class TabCore implements ITabCore {
|
|
16
18
|
private _adapter;
|
|
@@ -24,6 +26,7 @@ export declare class TabCore implements ITabCore {
|
|
|
24
26
|
private _keydownListener;
|
|
25
27
|
constructor(_adapter: ITabAdapter);
|
|
26
28
|
initialize(): void;
|
|
29
|
+
setFocus(options?: ExperimentalFocusOptions): void;
|
|
27
30
|
private _onClick;
|
|
28
31
|
private _onKeydown;
|
|
29
32
|
private _dispatchSelectEvent;
|
package/esm/tabs/tab/tab-core.js
CHANGED
|
@@ -22,6 +22,11 @@ export class TabCore {
|
|
|
22
22
|
this._adapter.addInteractionListener('click', this._clickListener);
|
|
23
23
|
this._adapter.addInteractionListener('keydown', this._keydownListener);
|
|
24
24
|
}
|
|
25
|
+
setFocus(options) {
|
|
26
|
+
if (options?.focusVisible) {
|
|
27
|
+
this._adapter.activateFocusIndicator();
|
|
28
|
+
}
|
|
29
|
+
}
|
|
25
30
|
_onClick() {
|
|
26
31
|
if (this._disabled || this._selected) {
|
|
27
32
|
return;
|
package/esm/tabs/tab/tab.d.ts
CHANGED
|
@@ -4,13 +4,16 @@
|
|
|
4
4
|
* License: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
|
|
7
|
+
import { ExperimentalFocusOptions } from '../../constants';
|
|
7
8
|
export interface ITabComponent extends IBaseComponent {
|
|
8
9
|
disabled: boolean;
|
|
9
10
|
selected: boolean;
|
|
10
11
|
vertical: boolean;
|
|
11
12
|
stacked: boolean;
|
|
13
|
+
/** @deprecated This will be removed in a future version */
|
|
12
14
|
secondary: boolean;
|
|
13
15
|
inverted: boolean;
|
|
16
|
+
focus(options?: ExperimentalFocusOptions): void;
|
|
14
17
|
}
|
|
15
18
|
declare global {
|
|
16
19
|
interface HTMLElementTagNameMap {
|
|
@@ -37,7 +40,7 @@ declare global {
|
|
|
37
40
|
* @attribute [selected=false] - The selected state of the tab.
|
|
38
41
|
* @attribute [vertical=false] - Controls whether the tab is vertical or horizontal.
|
|
39
42
|
* @attribute [stacked=false] - Controls whether the tab is taller to allow for slotted leading/trailing elements.
|
|
40
|
-
* @attribute [secondary=false] - Controls whether the tab is styled as secondary tab navigation.
|
|
43
|
+
* @attribute [secondary=false] - Deprecated. Controls whether the tab is styled as secondary tab navigation.
|
|
41
44
|
* @attribute [inverted=false] - Controls whether the tab indicator is rendered on the opposite side of the tab.
|
|
42
45
|
*
|
|
43
46
|
* @event {CustomEvent<void>} forge-tab-select - Dispatched when the tab is selected. This event bubbles and it can be useful to capture it on the `<forge-tab-bar>` element.
|
|
@@ -53,8 +56,6 @@ declare global {
|
|
|
53
56
|
* @cssproperty --forge-tab-indicator-height - The height of the active tab indicator.
|
|
54
57
|
* @cssproperty --forge-tab-indicator-shape - The shape of the active tab indicator.
|
|
55
58
|
* @cssproperty --forge-tab-vertical-indicator-shape - The shape of the active tab indicator when vertical.
|
|
56
|
-
* @cssproperty --forge-tab-secondary-indicator-height - The height of the secondary tab indicator.
|
|
57
|
-
* @cssproperty --forge-tab-secondary-indicator-shape - The shape of the secondary tab indicator.
|
|
58
59
|
* @cssproperty --forge-tab-inverted-indicator-shape - The shape of the active tab indicator when inverted.
|
|
59
60
|
* @cssproperty --forge-tab-vertical-inverted-indicator-shape - The shape of the active tab indicator when vertical and inverted.
|
|
60
61
|
* @cssproperty --forge-tab-container-color - The color of the tab container.
|
|
@@ -65,7 +66,6 @@ declare global {
|
|
|
65
66
|
* @cssproperty --forge-tab-content-padding - The padding value for both block and inline of the tab content.
|
|
66
67
|
* @cssproperty --forge-tab-content-padding-block - The block padding of the tab content.
|
|
67
68
|
* @cssproperty --forge-tab-content-padding-inline - The inline padding of the tab content.
|
|
68
|
-
* @cssproperty --forge-tab-content-padding-inline-secondary - The inline padding of the tab content when secondary.
|
|
69
69
|
* @cssproperty --forge-tab-active-focus-icon-color - The color of the icon when the tab is active and focused.
|
|
70
70
|
* @cssproperty --forge-tab-active-hover-icon-color - The color of the icon when the tab is active and hovered.
|
|
71
71
|
* @cssproperty --forge-tab-active-icon-color - The color of the icon when the tab is active.
|
|
@@ -103,6 +103,8 @@ export declare class TabComponent extends BaseComponent implements ITabComponent
|
|
|
103
103
|
selected: boolean;
|
|
104
104
|
vertical: boolean;
|
|
105
105
|
stacked: boolean;
|
|
106
|
+
/** @deprecated This will be removed in a future version */
|
|
106
107
|
secondary: boolean;
|
|
107
108
|
inverted: boolean;
|
|
109
|
+
focus(options?: ExperimentalFocusOptions): void;
|
|
108
110
|
}
|
package/esm/tabs/tab/tab.js
CHANGED
|
@@ -12,7 +12,7 @@ import { BaseComponent } from '../../core/base/base-component';
|
|
|
12
12
|
import { FocusIndicatorComponent } from '../../focus-indicator/focus-indicator';
|
|
13
13
|
import { StateLayerComponent } from '../../state-layer/state-layer';
|
|
14
14
|
const template = '<template><div class=\"forge-tab\" part=\"container\"><span class=\"content\" part=\"content\"><slot name=\"start\"><slot name=\"leading\"></slot></slot><span class=\"label\" part=\"label\"><slot></slot></span><slot name=\"end\"><slot name=\"trailing\"></slot></slot><span class=\"indicator\" part=\"indicator\"></span></span><forge-state-layer exportparts=\"surface:state-layer\" target=\":host\"></forge-state-layer><forge-focus-indicator part=\"focus-indicator\" target=\":host\" inward></forge-focus-indicator></div></template>';
|
|
15
|
-
const styles = ':host{display:inline-flex;outline:0;-webkit-tap-highlight-color:transparent;vertical-align:middle}:host([hidden]){display:none}.forge-tab{--_tab-active-color:var(--forge-tab-active-color, var(--forge-theme-primary, #3f51b5));--_tab-inactive-color:var(--forge-tab-inactive-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_tab-height:var(--forge-tab-height, 48px);--_tab-stacked-height:var(--forge-tab-stacked-height, 64px);--_tab-padding-block:var(--forge-tab-padding-block, 0);--_tab-padding-inline:var(--forge-tab-padding-inline,
|
|
15
|
+
const styles = ':host{display:inline-flex;outline:0;-webkit-tap-highlight-color:transparent;vertical-align:middle}:host([hidden]){display:none}.forge-tab{--_tab-active-color:var(--forge-tab-active-color, var(--forge-theme-primary, #3f51b5));--_tab-inactive-color:var(--forge-tab-inactive-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_tab-height:var(--forge-tab-height, 48px);--_tab-stacked-height:var(--forge-tab-stacked-height, 64px);--_tab-padding-block:var(--forge-tab-padding-block, 0);--_tab-padding-inline:var(--forge-tab-padding-inline, 0);--_tab-disabled-opacity:var(--forge-tab-disabled-opacity, 0.38);--_tab-indicator-color:var(--forge-tab-indicator-color, var(--_tab-active-color));--_tab-indicator-height:var(--forge-tab-indicator-height, 3px);--_tab-indicator-shape:var(--forge-tab-indicator-shape, 3px 3px 0 0);--_tab-vertical-indicator-shape:var(--forge-tab-vertical-indicator-shape, 3px 0 0 3px);--_tab-secondary-indicator-height:var(--forge-tab-secondary-indicator-height, 2px);--_tab-secondary-indicator-shape:var(--forge-tab-secondary-indicator-shape, 0);--_tab-inverted-indicator-shape:var(--forge-tab-inverted-indicator-shape, 0 0 3px 3px);--_tab-vertical-inverted-indicator-shape:var(--forge-tab-vertical-inverted-indicator-shape, 0 3px 3px 0);--_tab-container-color:var(--forge-tab-container-color, transparent);--_tab-container-height:var(--forge-tab-container-height, var(--_tab-height));--_tab-container-shape:var(--forge-tab-container-shape, 0);--_tab-content-height:var(--forge-tab-content-height, var(--_tab-height));--_tab-content-spacing:var(--forge-tab-content-spacing, var(--forge-spacing-xsmall, 8px));--_tab-content-padding:var(--forge-tab-content-padding, var(--forge-spacing-xxsmall, 4px));--_tab-content-padding-block:var(--forge-tab-content-padding-block, var(--_tab-content-padding));--_tab-content-padding-inline:var(--forge-tab-content-padding-inline, var(--forge-spacing-medium, 16px));--_tab-content-padding-inline-secondary:var(--forge-tab-content-padding-inline-secondary, var(--forge-spacing-medium, 16px));--_tab-active-focus-icon-color:var(--forge-tab-active-focus-icon-color, var(--_tab-active-color));--_tab-active-hover-icon-color:var(--forge-tab-active-hover-icon-color, var(--_tab-active-color));--_tab-active-icon-color:var(--forge-tab-active-icon-color, var(--_tab-active-color));--_tab-active-pressed-icon-color:var(--forge-tab-active-pressed-icon-color, var(--_tab-active-color));--_tab-icon-size:var(--forge-tab-icon-size, 24px);--_tab-focus-icon-color:var(--forge-tab-focus-icon-color, var(--_tab-inactive-color));--_tab-hover-icon-color:var(--forge-tab-hover-icon-color, var(--_tab-inactive-color));--_tab-icon-color:var(--forge-tab-icon-color, var(--_tab-inactive-color));--_tab-pressed-icon-color:var(--forge-tab-pressed-icon-color, var(--_tab-inactive-color));--_tab-active-focus-label-text-color:var(--forge-tab-active-focus-label-text-color, var(--_tab-active-color));--_tab-active-hover-label-text-color:var(--forge-tab-active-hover-label-text-color, var(--_tab-active-color));--_tab-active-label-text-color:var(--forge-tab-active-label-text-color, var(--_tab-active-color));--_tab-active-pressed-label-text-color:var(--forge-tab-active-pressed-label-text-color, var(--_tab-active-color));--_tab-focus-label-text-color:var(--forge-tab-focus-label-text-color, var(--_tab-inactive-color));--_tab-hover-label-text-color:var(--forge-tab-hover-label-text-color, var(--_tab-inactive-color));--_tab-label-text-color:var(--forge-tab-label-text-color, var(--_tab-inactive-color));--_tab-pressed-label-text-color:var(--forge-tab-pressed-label-text-color, var(--_tab-inactive-color))}.forge-tab{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-button-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-button-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-button-font-size-scale, .875)));font-weight:var(--forge-typography-button-font-weight,500);line-height:var(--forge-typography-button-line-height, normal);letter-spacing:var(--forge-typography-button-letter-spacing, .0714285714em);text-transform:var(--forge-typography-button-text-transform,inherit);text-decoration:var(--forge-typography-button-text-decoration,inherit);display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:none;outline:0;user-select:none;-webkit-appearance:none;vertical-align:middle;background:0 0;text-decoration:none;width:100%;position:relative;padding-block:var(--_tab-padding-block);padding-inline:var(--_tab-padding-inline);margin:0;z-index:0;background-color:var(--_tab-container-color);color:var(--_tab-label-text-color);min-height:var(--_tab-container-height)}.forge-tab::-moz-focus-inner{padding:0;border:0}.forge-tab ::slotted([slot=leading]),.forge-tab ::slotted([slot=trailing]){display:inline-flex;position:relative;writing-mode:horizontal-tb;fill:currentColor;color:var(--_tab-icon-color);font-size:var(--_tab-icon-size);width:var(--_tab-icon-size);height:var(--_tab-icon-size)}.forge-tab:hover{color:var(--_tab-hover-label-text-color);cursor:pointer}.forge-tab:hover ::slotted([slot=leading]),.forge-tab:hover ::slotted([slot=trailing]){color:var(--_tab-hover-icon-color)}.forge-tab .content{position:relative;box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;white-space:nowrap;transition:150ms color linear;max-height:calc(var(--_tab-content-height) + 2 * var(--_tab-content-padding-block));min-height:var(--_tab-content-height);width:100%;padding-block:var(--_tab-content-padding-block);padding-inline:var(--_tab-content-padding-inline);gap:var(--_tab-content-spacing)}.forge-tab .content .label{display:inline-block;line-height:1}.forge-tab .indicator{position:absolute;box-sizing:border-box;z-index:-1;transform-origin:bottom left;background:var(--_tab-indicator-color);border-radius:var(--_tab-indicator-shape);height:var(--_tab-indicator-height);min-width:100%;inset:auto 0 0;opacity:0}::slotted(*),:host{white-space:nowrap}forge-focus-indicator{--forge-focus-indicator-color:var(--_tab-active-color);--forge-focus-indicator-shape:8px}forge-state-layer{--forge-state-layer-color:var(--_tab-inactive-color)}:host(:focus) .forge-tab{color:var(--_tab-focus-label-text-color)}:host(:focus) .forge-tab ::slotted([slot=leading]),:host(:focus) .forge-tab ::slotted([slot=trailing]){color:var(--_tab-focus-icon-color)}:host(:active) .forge-tab{color:var(--_tab-pressed-label-text-color);outline:0}:host(:active) .forge-tab ::slotted([slot=leading]),:host(:active) .forge-tab ::slotted([slot=trailing]){color:var(--_tab-pressed-icon-color)}:host([disabled]){cursor:not-allowed}:host([disabled]) .forge-tab{opacity:var(--_tab-disabled-opacity);pointer-events:none}:host([selected]) .forge-tab{color:var(--_tab-active-label-text-color)}:host([selected]) .forge-tab ::slotted([slot=end]),:host([selected]) .forge-tab ::slotted([slot=leading]),:host([selected]) .forge-tab ::slotted([slot=start]),:host([selected]) .forge-tab ::slotted([slot=trailing]){color:var(--_tab-active-icon-color)}:host([selected]) .forge-tab:hover{color:var(--_tab-active-hover-label-text-color)}:host([selected]) .forge-tab:hover ::slotted([slot=end]),:host([selected]) .forge-tab:hover ::slotted([slot=leading]),:host([selected]) .forge-tab:hover ::slotted([slot=start]),:host([selected]) .forge-tab:hover ::slotted([slot=trailing]){color:var(--_tab-active-hover-icon-color)}:host([selected]) .forge-tab .indicator{opacity:1}:host([selected]) forge-state-layer{--forge-state-layer-color:var(--_tab-active-color)}:host([selected]:not([vertical])) forge-focus-indicator{--forge-focus-indicator-offset-block:0 calc(var(--_tab-indicator-height) + 1px)}:host([selected]:focus) .forge-tab{color:var(--_tab-active-focus-label-text-color)}:host([selected]:focus) .forge-tab ::slotted([slot=leading]),:host([selected]:focus) .forge-tab ::slotted([slot=trailing]){color:var(--_tab-active-focus-icon-color)}:host([selected]:active) .forge-tab{color:var(--_tab-active-pressed-label-text-color)}:host([selected]:active) .forge-tab ::slotted([slot=leading]),:host([selected]:active) .forge-tab ::slotted([slot=trailing]){color:var(--_tab-active-pressed-icon-color)}:host([stacked]) .forge-tab{--_tab-height:var(--_tab-stacked-height)}:host([stacked]) .forge-tab .content{max-height:none;flex-direction:column;height:100%}:host([vertical]) .forge-tab{--_tab-padding-inline:var(--forge-tab-padding-inline, 0);width:100%;flex-direction:row;border-bottom:none}:host([vertical]) .forge-tab .content{width:100%;min-height:100%}:host([vertical]) .forge-tab .indicator{height:100%;min-width:var(--_tab-indicator-height);inset:0 0 0 auto}:host([vertical]) forge-focus-indicator{--forge-focus-indicator-offset-inline:0 calc(var(--_tab-indicator-height) + 1px)}:host([vertical]) .forge-tab{--_tab-indicator-shape:var(--_tab-vertical-indicator-shape)}:host([inverted]) .forge-tab{--_tab-indicator-shape:var(--_tab-inverted-indicator-shape)}:host([inverted]) .indicator{inset:0 0 auto;transform-origin:top left}:host([inverted][vertical]) .forge-tab{--_tab-indicator-shape:var(--_tab-vertical-inverted-indicator-shape)}:host([inverted][vertical]) .indicator{inset:0 auto 0 0}';
|
|
16
16
|
/**
|
|
17
17
|
* @tag forge-tab
|
|
18
18
|
*
|
|
@@ -30,7 +30,7 @@ const styles = ':host{display:inline-flex;outline:0;-webkit-tap-highlight-color:
|
|
|
30
30
|
* @attribute [selected=false] - The selected state of the tab.
|
|
31
31
|
* @attribute [vertical=false] - Controls whether the tab is vertical or horizontal.
|
|
32
32
|
* @attribute [stacked=false] - Controls whether the tab is taller to allow for slotted leading/trailing elements.
|
|
33
|
-
* @attribute [secondary=false] - Controls whether the tab is styled as secondary tab navigation.
|
|
33
|
+
* @attribute [secondary=false] - Deprecated. Controls whether the tab is styled as secondary tab navigation.
|
|
34
34
|
* @attribute [inverted=false] - Controls whether the tab indicator is rendered on the opposite side of the tab.
|
|
35
35
|
*
|
|
36
36
|
* @event {CustomEvent<void>} forge-tab-select - Dispatched when the tab is selected. This event bubbles and it can be useful to capture it on the `<forge-tab-bar>` element.
|
|
@@ -46,8 +46,6 @@ const styles = ':host{display:inline-flex;outline:0;-webkit-tap-highlight-color:
|
|
|
46
46
|
* @cssproperty --forge-tab-indicator-height - The height of the active tab indicator.
|
|
47
47
|
* @cssproperty --forge-tab-indicator-shape - The shape of the active tab indicator.
|
|
48
48
|
* @cssproperty --forge-tab-vertical-indicator-shape - The shape of the active tab indicator when vertical.
|
|
49
|
-
* @cssproperty --forge-tab-secondary-indicator-height - The height of the secondary tab indicator.
|
|
50
|
-
* @cssproperty --forge-tab-secondary-indicator-shape - The shape of the secondary tab indicator.
|
|
51
49
|
* @cssproperty --forge-tab-inverted-indicator-shape - The shape of the active tab indicator when inverted.
|
|
52
50
|
* @cssproperty --forge-tab-vertical-inverted-indicator-shape - The shape of the active tab indicator when vertical and inverted.
|
|
53
51
|
* @cssproperty --forge-tab-container-color - The color of the tab container.
|
|
@@ -58,7 +56,6 @@ const styles = ':host{display:inline-flex;outline:0;-webkit-tap-highlight-color:
|
|
|
58
56
|
* @cssproperty --forge-tab-content-padding - The padding value for both block and inline of the tab content.
|
|
59
57
|
* @cssproperty --forge-tab-content-padding-block - The block padding of the tab content.
|
|
60
58
|
* @cssproperty --forge-tab-content-padding-inline - The inline padding of the tab content.
|
|
61
|
-
* @cssproperty --forge-tab-content-padding-inline-secondary - The inline padding of the tab content when secondary.
|
|
62
59
|
* @cssproperty --forge-tab-active-focus-icon-color - The color of the icon when the tab is active and focused.
|
|
63
60
|
* @cssproperty --forge-tab-active-hover-icon-color - The color of the icon when the tab is active and hovered.
|
|
64
61
|
* @cssproperty --forge-tab-active-icon-color - The color of the icon when the tab is active.
|
|
@@ -120,6 +117,10 @@ let TabComponent = class TabComponent extends BaseComponent {
|
|
|
120
117
|
break;
|
|
121
118
|
}
|
|
122
119
|
}
|
|
120
|
+
focus(options) {
|
|
121
|
+
super.focus(options);
|
|
122
|
+
this._core.setFocus(options);
|
|
123
|
+
}
|
|
123
124
|
};
|
|
124
125
|
__decorate([
|
|
125
126
|
coreProperty()
|
|
@@ -94,7 +94,7 @@ export class TabBarCore {
|
|
|
94
94
|
this._selectTab(this._tabs[index]);
|
|
95
95
|
}
|
|
96
96
|
else {
|
|
97
|
-
this._tabs[index].focus({ preventScroll: true });
|
|
97
|
+
this._tabs[index].focus({ preventScroll: true, focusVisible: true });
|
|
98
98
|
await this._adapter.tryScrollTabIntoView(this._tabs[index]);
|
|
99
99
|
}
|
|
100
100
|
}
|
|
@@ -11,6 +11,7 @@ export interface ITabBarComponent extends IBaseComponent {
|
|
|
11
11
|
vertical: boolean;
|
|
12
12
|
clustered: boolean;
|
|
13
13
|
stacked: boolean;
|
|
14
|
+
/** @deprecated This will be removed in a future version */
|
|
14
15
|
secondary: boolean;
|
|
15
16
|
inverted: boolean;
|
|
16
17
|
autoActivate: boolean;
|
|
@@ -43,7 +44,7 @@ declare global {
|
|
|
43
44
|
* @property {boolean} [vertical=false] - Controls whether the tab bar is vertical or horizontal.
|
|
44
45
|
* @property {boolean} [clustered=false] - Controls whether the tabs stretch the full width of their container or cluster together at their minimum width.
|
|
45
46
|
* @property {boolean} [stacked=false] - Controls whether the tabs are taller to allow for slotted leading/trailing elements.
|
|
46
|
-
* @property {boolean} [secondary=false] - Controls whether the tabs are styled as secondary tab navigation.
|
|
47
|
+
* @property {boolean} [secondary=false] - Deprecated. Controls whether the tabs are styled as secondary tab navigation.
|
|
47
48
|
* @property {boolean} [inverted=false] - Controls whether the tabs are rendered inverted (tab indicator at top instead of bottom).
|
|
48
49
|
* @property {boolean} [autoActivate=false] - Controls whether the tabs are automatically activated when receiving focus.
|
|
49
50
|
* @property {boolean} [scrollButtons=false] - Controls whether scroll buttons are displayed when the tabs overflow their container.
|
|
@@ -53,7 +54,7 @@ declare global {
|
|
|
53
54
|
* @attribute {boolean} [vertical=false] - Controls whether the tab bar is vertical or horizontal.
|
|
54
55
|
* @attribute {boolean} [clustered=false] - Controls whether the tabs stretch the full width of their container or cluster together at their minimum width.
|
|
55
56
|
* @attribute {boolean} [stacked=false] - Controls whether the tabs are taller to allow for slotted leading/trailing elements.
|
|
56
|
-
* @attribute {boolean} [secondary=false] - Controls whether the tabs are styled as secondary tab navigation.
|
|
57
|
+
* @attribute {boolean} [secondary=false] - Deprecated. Controls whether the tabs are styled as secondary tab navigation.
|
|
57
58
|
* @attribute {boolean} [auto-activate=false] - Controls whether the tabs are automatically activated when receiving focus.
|
|
58
59
|
* @attribute {boolean} [scroll-buttons=false] - Controls whether scroll buttons are displayed when the tabs overflow their container.
|
|
59
60
|
* @attribute {string} [data-aria-label] - The ARIA label to forward to the internal tablist element.
|
|
@@ -80,6 +81,7 @@ export declare class TabBarComponent extends BaseComponent implements ITabBarCom
|
|
|
80
81
|
vertical: boolean;
|
|
81
82
|
clustered: boolean;
|
|
82
83
|
stacked: boolean;
|
|
84
|
+
/** @deprecated This will be removed in a future version */
|
|
83
85
|
secondary: boolean;
|
|
84
86
|
inverted: boolean;
|
|
85
87
|
autoActivate: boolean;
|
|
@@ -14,7 +14,7 @@ import { TAB_BAR_CONSTANTS } from './tab-bar-constants';
|
|
|
14
14
|
import { TabBarCore } from './tab-bar-core';
|
|
15
15
|
import { tylIconKeyboardArrowLeft, tylIconKeyboardArrowRight, tylIconKeyboardArrowUp, tylIconKeyboardArrowDown } from '@tylertech/tyler-icons/standard';
|
|
16
16
|
const template = '<template><div class=\"forge-tab-bar\" part=\"container\"><div role=\"tablist\" class=\"scroll-container\" part=\"scroll-container\"><slot></slot></div></div></template>';
|
|
17
|
-
const styles = ':host{position:relative;display:block}:host([hidden]){display:none}.forge-tab-bar{--_tab-bar-justify:var(--forge-tab-bar-justify, space-between);--_tab-bar-stretch:var(--forge-tab-bar-stretch, 1);--_tab-bar-divider-color:var(--forge-tab-bar-divider-color, var(--forge-theme-outline, #e0e0e0));--_tab-bar-divider-thickness:var(--forge-tab-bar-divider-thickness, 1px)}.forge-tab-bar{position:relative;display:grid;grid-template-columns:auto 1fr auto;max-width:100%;max-height:100%;align-items:center;border-bottom:var(--_tab-bar-divider-thickness) solid var(--_tab-bar-divider-color)}.scroll-container{position:relative;display:flex;justify-content:var(--_tab-bar-justify);align-items:flex-end;box-sizing:border-box;overflow:auto;scroll-behavior:smooth;scrollbar-width:none;grid-column:2}.scroll-container::-webkit-scrollbar{display:none}::slotted(*){flex:var(--_tab-bar-stretch)}::slotted([selected]){z-index:1}forge-icon-button{--forge-icon-button-shape-squared:0px}:host([vertical]) .forge-tab-bar{grid-template-columns:none;grid-template-rows:auto 1fr auto;align-items:initial;border-bottom:none;border-right:var(--_tab-bar-divider-thickness) solid var(--_tab-bar-divider-color);height:100%}:host([vertical]) .scroll-container{display:inline-flex;flex-direction:column;align-items:stretch;gap:0;grid-column:auto;grid-row:2}:host([vertical]) .scroll-button{justify-self:center}:host([inverted]:not([vertical])) .forge-tab-bar{border-bottom:none;border-top:variale(divider-thickness) solid var(--_tab-bar-divider-color)}:host([inverted][vertical]) .forge-tab-bar{border-bottom:none;border-top:var(--_tab-bar-divider-thickness) solid var(--_tab-bar-divider-color)}:host([clustered]) .forge-tab-bar{--_tab-bar-justify:var(--forge-tab-bar-justify, flex-start);--_tab-bar-stretch:var(--forge-tab-bar-stretch, 0)}:host([clustered=start]) .forge-tab-bar{--_tab-bar-justify:var(--forge-tab-bar-justify, flex-start)}:host([clustered=center]) .forge-tab-bar{--_tab-bar-justify:var(--forge-tab-bar-justify, center)}:host([clustered=end]) .forge-tab-bar{--_tab-bar-justify:var(--forge-tab-bar-justify, flex-end)}';
|
|
17
|
+
const styles = ':host{position:relative;display:block}:host([hidden]){display:none}.forge-tab-bar{--_tab-bar-justify:var(--forge-tab-bar-justify, space-between);--_tab-bar-stretch:var(--forge-tab-bar-stretch, 1);--_tab-bar-divider-color:var(--forge-tab-bar-divider-color, var(--forge-theme-outline, #e0e0e0));--_tab-bar-divider-thickness:var(--forge-tab-bar-divider-thickness, 1px)}.forge-tab-bar{position:relative;display:grid;grid-template-columns:auto 1fr auto;max-width:100%;max-height:100%;align-items:center;border-bottom:var(--_tab-bar-divider-thickness) solid var(--_tab-bar-divider-color)}.scroll-container{position:relative;display:flex;justify-content:var(--_tab-bar-justify);align-items:flex-end;box-sizing:border-box;overflow:auto;scroll-behavior:smooth;scrollbar-width:none;grid-column:2}.scroll-container::-webkit-scrollbar{display:none}::slotted(*){flex:var(--_tab-bar-stretch);align-self:stretch}::slotted([selected]){z-index:1}forge-icon-button{--forge-icon-button-shape-squared:0px}:host([vertical]) .forge-tab-bar{grid-template-columns:none;grid-template-rows:auto 1fr auto;align-items:initial;border-bottom:none;border-right:var(--_tab-bar-divider-thickness) solid var(--_tab-bar-divider-color);height:100%}:host([vertical]) .scroll-container{display:inline-flex;flex-direction:column;align-items:stretch;gap:0;grid-column:auto;grid-row:2}:host([vertical]) .scroll-button{justify-self:center}:host([inverted]:not([vertical])) .forge-tab-bar{border-bottom:none;border-top:variale(divider-thickness) solid var(--_tab-bar-divider-color)}:host([inverted][vertical]) .forge-tab-bar{border-bottom:none;border-top:var(--_tab-bar-divider-thickness) solid var(--_tab-bar-divider-color)}:host([clustered]) .forge-tab-bar{--_tab-bar-justify:var(--forge-tab-bar-justify, flex-start);--_tab-bar-stretch:var(--forge-tab-bar-stretch, 0)}:host([clustered=start]) .forge-tab-bar{--_tab-bar-justify:var(--forge-tab-bar-justify, flex-start)}:host([clustered=center]) .forge-tab-bar{--_tab-bar-justify:var(--forge-tab-bar-justify, center)}:host([clustered=end]) .forge-tab-bar{--_tab-bar-justify:var(--forge-tab-bar-justify, flex-end)}';
|
|
18
18
|
/**
|
|
19
19
|
* @tag forge-tab-bar
|
|
20
20
|
*
|
|
@@ -34,7 +34,7 @@ const styles = ':host{position:relative;display:block}:host([hidden]){display:no
|
|
|
34
34
|
* @property {boolean} [vertical=false] - Controls whether the tab bar is vertical or horizontal.
|
|
35
35
|
* @property {boolean} [clustered=false] - Controls whether the tabs stretch the full width of their container or cluster together at their minimum width.
|
|
36
36
|
* @property {boolean} [stacked=false] - Controls whether the tabs are taller to allow for slotted leading/trailing elements.
|
|
37
|
-
* @property {boolean} [secondary=false] - Controls whether the tabs are styled as secondary tab navigation.
|
|
37
|
+
* @property {boolean} [secondary=false] - Deprecated. Controls whether the tabs are styled as secondary tab navigation.
|
|
38
38
|
* @property {boolean} [inverted=false] - Controls whether the tabs are rendered inverted (tab indicator at top instead of bottom).
|
|
39
39
|
* @property {boolean} [autoActivate=false] - Controls whether the tabs are automatically activated when receiving focus.
|
|
40
40
|
* @property {boolean} [scrollButtons=false] - Controls whether scroll buttons are displayed when the tabs overflow their container.
|
|
@@ -44,7 +44,7 @@ const styles = ':host{position:relative;display:block}:host([hidden]){display:no
|
|
|
44
44
|
* @attribute {boolean} [vertical=false] - Controls whether the tab bar is vertical or horizontal.
|
|
45
45
|
* @attribute {boolean} [clustered=false] - Controls whether the tabs stretch the full width of their container or cluster together at their minimum width.
|
|
46
46
|
* @attribute {boolean} [stacked=false] - Controls whether the tabs are taller to allow for slotted leading/trailing elements.
|
|
47
|
-
* @attribute {boolean} [secondary=false] - Controls whether the tabs are styled as secondary tab navigation.
|
|
47
|
+
* @attribute {boolean} [secondary=false] - Deprecated. Controls whether the tabs are styled as secondary tab navigation.
|
|
48
48
|
* @attribute {boolean} [auto-activate=false] - Controls whether the tabs are automatically activated when receiving focus.
|
|
49
49
|
* @attribute {boolean} [scroll-buttons=false] - Controls whether scroll buttons are displayed when the tabs overflow their container.
|
|
50
50
|
* @attribute {string} [data-aria-label] - The ARIA label to forward to the internal tablist element.
|
|
@@ -71,8 +71,13 @@ export class TextFieldCore extends BaseFieldCore {
|
|
|
71
71
|
this._adapter.clearInput();
|
|
72
72
|
}
|
|
73
73
|
}
|
|
74
|
-
_onValueChange() {
|
|
75
|
-
|
|
74
|
+
_onValueChange(evt) {
|
|
75
|
+
let force;
|
|
76
|
+
// Handle the special case where a number input allows invalid characters
|
|
77
|
+
if (evt.target?.type === 'number' && (evt.data != null || evt.target.validity.badInput)) {
|
|
78
|
+
force = true;
|
|
79
|
+
}
|
|
80
|
+
this._tryFloatLabel(force);
|
|
76
81
|
this._toggleClearButtonVisibility();
|
|
77
82
|
}
|
|
78
83
|
_toggleClearButtonVisibility() {
|
|
@@ -64,6 +64,7 @@ export declare class TextFieldComponent extends BaseField<TextFieldCore> impleme
|
|
|
64
64
|
protected readonly _core: TextFieldCore;
|
|
65
65
|
constructor();
|
|
66
66
|
connectedCallback(): void;
|
|
67
|
+
disconnectedCallback(): void;
|
|
67
68
|
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
|
|
68
69
|
get popoverTargetElement(): HTMLElement;
|
|
69
70
|
showClear: boolean;
|
|
@@ -71,6 +71,9 @@ let TextFieldComponent = class TextFieldComponent extends BaseField {
|
|
|
71
71
|
connectedCallback() {
|
|
72
72
|
this._core.initialize();
|
|
73
73
|
}
|
|
74
|
+
disconnectedCallback() {
|
|
75
|
+
this._core.destroy();
|
|
76
|
+
}
|
|
74
77
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
75
78
|
super.attributeChangedCallback(name, oldValue, newValue);
|
|
76
79
|
switch (name) {
|
package/esm/toolbar/toolbar.d.ts
CHANGED
|
@@ -41,6 +41,7 @@ declare global {
|
|
|
41
41
|
* @cssproperty --forge-toolbar-padding - Controls the left and right padding using the padding-inline style.
|
|
42
42
|
* @cssproperty --forge-toolbar-padding-block - Controls the top and bottom padding using the padding-block style.
|
|
43
43
|
* @cssproperty --forge-toolbar-padding-inline - Controls the left and right padding using the padding-block style.
|
|
44
|
+
* @cssproperty --forge-toolbar-columns - The grid column track sizes.
|
|
44
45
|
*
|
|
45
46
|
* @csspart root - The root container element wrapping all slots and content.
|
|
46
47
|
* @csspart inner - The internal container element for the start, center, and end slots.
|
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;contain:layout}: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))}.forge-toolbar{display:grid;grid-template-columns:
|
|
11
|
+
const styles = ':host{display:block;contain:layout}: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
|
*
|
|
@@ -38,6 +38,7 @@ const styles = ':host{display:block;contain:layout}:host([hidden]){display:none}
|
|
|
38
38
|
* @cssproperty --forge-toolbar-padding - Controls the left and right padding using the padding-inline style.
|
|
39
39
|
* @cssproperty --forge-toolbar-padding-block - Controls the top and bottom padding using the padding-block style.
|
|
40
40
|
* @cssproperty --forge-toolbar-padding-inline - Controls the left and right padding using the padding-block style.
|
|
41
|
+
* @cssproperty --forge-toolbar-columns - The grid column track sizes.
|
|
41
42
|
*
|
|
42
43
|
* @csspart root - The root container element wrapping all slots and content.
|
|
43
44
|
* @csspart inner - The internal container element for the start, center, and end slots.
|
package/esm/tooltip/tooltip.js
CHANGED
|
@@ -15,7 +15,7 @@ import { WithDefaultAria } from '../core/mixins/internals/with-default-aria';
|
|
|
15
15
|
import { WithElementInternals } from '../core/mixins/internals/with-element-internals';
|
|
16
16
|
import { tryDismiss } from '../core/utils/dismissible-stack';
|
|
17
17
|
const template = '<template><div class=\"forge-tooltip\" part=\"surface\"><slot></slot><div class=\"arrow\" part=\"arrow\"></div></div></template>';
|
|
18
|
-
const styles = '@keyframes slidein{from{opacity:0;transform:translateX(var(--_tooltip-slidein-x)) translateY(var(--_tooltip-slidein-y))}to{opacity:1;transform:translateX(0) translateY(0)}}:host{display:contents;pointer-events:none}:host([hidden]){display:none}.forge-tooltip{--_tooltip-background:var(--forge-tooltip-background, var(--forge-theme-surface-inverse, #333333));--_tooltip-color:var(--forge-tooltip-color, var(--forge-theme-on-surface-inverse, #ffffff));--_tooltip-shape:var(--forge-tooltip-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_tooltip-padding:var(--forge-tooltip-padding, var(--forge-spacing-xsmall, 8px));--_tooltip-padding-block:var(--forge-tooltip-padding-block, var(--_tooltip-padding));--_tooltip-padding-inline:var(--forge-tooltip-padding-inline, var(--_tooltip-padding));--_tooltip-width:var(--forge-tooltip-width, max-content);--_tooltip-max-width:var(--forge-tooltip-max-width, 320px);--_tooltip-elevation:var(--forge-tooltip-elevation, var(--forge-theme-surface-bright-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)));--_tooltip-content-align:var(--forge-tooltip-content-align, center);--_tooltip-border-width:var(--forge-tooltip-border-width, 0);--_tooltip-border-style:var(--forge-tooltip-border-style, solid);--_tooltip-border-color:var(--forge-tooltip-border-color, var(--forge-theme-outline, #e0e0e0));--_tooltip-animation-timing:var(--forge-tooltip-animation-timing, var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1)));--_tooltip-animation-duration:var(--forge-tooltip-animation-duration, var(--forge-animation-duration-short3, 150ms));--_tooltip-animation-offset:var(--forge-tooltip-animation-offset, 24px);--_tooltip-arrow-size:var(--forge-tooltip-arrow-size, 8px);--_tooltip-arrow-height:var(--forge-tooltip-arrow-height, var(--_tooltip-arrow-size));--_tooltip-arrow-width:var(--forge-tooltip-arrow-width, var(--_tooltip-arrow-size));--_tooltip-arrow-shape:var(--forge-tooltip-arrow-shape, calc(var(--forge-shape-small, 2px) * var(--forge-shape-factor, 1)));--_tooltip-arrow-rotation:var(--forge-tooltip-arrow-rotation, 0deg);--_tooltip-arrow-top-rotation:var(--forge-tooltip-arrow-top-rotation, 315deg);--_tooltip-arrow-right-rotation:var(--forge-tooltip-arrow-right-rotation, 45deg);--_tooltip-arrow-bottom-rotation:var(--forge-tooltip-arrow-bottom-rotation, 135deg);--_tooltip-arrow-left-rotation:var(--forge-tooltip-arrow-left-rotation, 225deg)}.forge-tooltip{-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);text-decoration:var(--forge-typography-body1-text-decoration,inherit);position:relative;background:var(--_tooltip-background);color:var(--_tooltip-color);border-radius:var(--_tooltip-shape);border-width:var(--_tooltip-border-width);border-style:var(--_tooltip-border-style);border-color:var(--_tooltip-border-color);padding-block:var(--_tooltip-padding-block);padding-inline:var(--_tooltip-padding-inline);box-shadow:var(--_tooltip-elevation);width:var(--_tooltip-width);max-width:var(--_tooltip-max-width);pointer-events:none;text-align:var(--_tooltip-content-align);line-height:normal;white-space:normal;animation-duration:var(--_tooltip-animation-duration);animation-timing-function:var(--_tooltip-animation-timing);animation-name:slidein;animation-fill-mode:forwards}:host(:not([open])) .forge-tooltip{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:
|
|
18
|
+
const styles = '@keyframes slidein{from{opacity:0;transform:translateX(var(--_tooltip-slidein-x)) translateY(var(--_tooltip-slidein-y))}to{opacity:1;transform:translateX(0) translateY(0)}}:host{display:contents;pointer-events:none}:host([hidden]){display:none}.forge-tooltip{--_tooltip-background:var(--forge-tooltip-background, var(--forge-theme-surface-inverse, #333333));--_tooltip-color:var(--forge-tooltip-color, var(--forge-theme-on-surface-inverse, #ffffff));--_tooltip-shape:var(--forge-tooltip-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_tooltip-padding:var(--forge-tooltip-padding, var(--forge-spacing-xsmall, 8px));--_tooltip-padding-block:var(--forge-tooltip-padding-block, var(--_tooltip-padding));--_tooltip-padding-inline:var(--forge-tooltip-padding-inline, var(--_tooltip-padding));--_tooltip-width:var(--forge-tooltip-width, max-content);--_tooltip-max-width:var(--forge-tooltip-max-width, 320px);--_tooltip-elevation:var(--forge-tooltip-elevation, var(--forge-theme-surface-bright-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)));--_tooltip-content-align:var(--forge-tooltip-content-align, center);--_tooltip-border-width:var(--forge-tooltip-border-width, 0);--_tooltip-border-style:var(--forge-tooltip-border-style, solid);--_tooltip-border-color:var(--forge-tooltip-border-color, var(--forge-theme-outline, #e0e0e0));--_tooltip-animation-timing:var(--forge-tooltip-animation-timing, var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1)));--_tooltip-animation-duration:var(--forge-tooltip-animation-duration, var(--forge-animation-duration-short3, 150ms));--_tooltip-animation-offset:var(--forge-tooltip-animation-offset, 24px);--_tooltip-arrow-size:var(--forge-tooltip-arrow-size, 8px);--_tooltip-arrow-height:var(--forge-tooltip-arrow-height, var(--_tooltip-arrow-size));--_tooltip-arrow-width:var(--forge-tooltip-arrow-width, var(--_tooltip-arrow-size));--_tooltip-arrow-shape:var(--forge-tooltip-arrow-shape, calc(var(--forge-shape-small, 2px) * var(--forge-shape-factor, 1)));--_tooltip-arrow-rotation:var(--forge-tooltip-arrow-rotation, 0deg);--_tooltip-arrow-top-rotation:var(--forge-tooltip-arrow-top-rotation, 315deg);--_tooltip-arrow-right-rotation:var(--forge-tooltip-arrow-right-rotation, 45deg);--_tooltip-arrow-bottom-rotation:var(--forge-tooltip-arrow-bottom-rotation, 135deg);--_tooltip-arrow-left-rotation:var(--forge-tooltip-arrow-left-rotation, 225deg)}.forge-tooltip{-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);text-decoration:var(--forge-typography-body1-text-decoration,inherit);position:relative;background:var(--_tooltip-background);color:var(--_tooltip-color);border-radius:var(--_tooltip-shape);border-width:var(--_tooltip-border-width);border-style:var(--_tooltip-border-style);border-color:var(--_tooltip-border-color);padding-block:var(--_tooltip-padding-block);padding-inline:var(--_tooltip-padding-inline);box-shadow:var(--_tooltip-elevation);width:var(--_tooltip-width);max-width:var(--_tooltip-max-width);pointer-events:none;text-align:var(--_tooltip-content-align);line-height:normal;white-space:normal;animation-duration:var(--_tooltip-animation-duration);animation-timing-function:var(--_tooltip-animation-timing);animation-name:slidein;animation-fill-mode:forwards}:host(:not([open])) .forge-tooltip{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:fixed;width:1px;outline:0;-webkit-appearance:none;-moz-appearance:none}.arrow{position:absolute;contain:strict;background-color:inherit;height:var(--_tooltip-arrow-height);width:var(--_tooltip-arrow-width);box-shadow:inherit;border:inherit;border-end-start-radius:var(--_tooltip-arrow-shape);rotate:var(--_tooltip-arrow-rotation);clip-path:var(--_tooltip-arrow-clip-path);--_tooltip-arrow-translate-x:0;--_tooltip-arrow-translate-y:0;--_tooltip-arrow-clip-path:polygon(0 0, 0 100%, 100% 100%)}.forge-tooltip{--_tooltip-slidein-x:0;--_tooltip-slidein-y:0}forge-overlay[open][position-placement^=top] .forge-tooltip{--_tooltip-slidein-y:var(--forge-tooltip-slidein-y, var(--_tooltip-animation-offset))}forge-overlay[open][position-placement^=top] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-top-rotation);margin-block-end:var(--_tooltip-border-width)}forge-overlay[open][position-placement^=right] .forge-tooltip{--_tooltip-slidein-x:var(--forge-tooltip-slidein-x, calc(var(--_tooltip-animation-offset) * -1))}forge-overlay[open][position-placement^=right] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-right-rotation);margin-inline-start:var(--_tooltip-border-width)}forge-overlay[open][position-placement^=bottom] .forge-tooltip{--_tooltip-slidein-y:var(--forge-tooltip-slidein-y, calc(var(--_tooltip-animation-offset) * -1))}forge-overlay[open][position-placement^=bottom] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-bottom-rotation);margin-block-start:var(--_tooltip-border-width)}forge-overlay[open][position-placement^=left] .forge-tooltip{--_tooltip-slidein-x:var(--forge-tooltip-slidein-x, var(--_tooltip-animation-offset))}forge-overlay[open][position-placement^=left] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-left-rotation);margin-inline-end:var(--_tooltip-border-width)}';
|
|
19
19
|
/**
|
|
20
20
|
* @tag forge-tooltip
|
|
21
21
|
*
|
package/package.json
CHANGED
package/sass/checkbox/_core.scss
CHANGED
|
@@ -21,6 +21,7 @@ $tokens: (
|
|
|
21
21
|
logo-gap: utils.module-val(app-bar, logo-gap, spacing.variable(medium)),
|
|
22
22
|
logo-font-size: utils.module-val(app-bar, logo-font-size, typography.font-size-relative('2500')),
|
|
23
23
|
title-padding: utils.module-val(app-bar, title-padding, spacing.variable(xsmall)),
|
|
24
|
+
columns: utils.module-val(app-bar, columns, 1fr 1fr 1fr),
|
|
24
25
|
transition-duration: utils.module-val(app-bar, transition-duration, animation.variable(duration-short4)),
|
|
25
26
|
transition-timing: utils.module-val(app-bar, transition-timing, animation.variable(easing-standard))
|
|
26
27
|
) !default;
|
|
@@ -51,8 +51,8 @@ $tokens: (
|
|
|
51
51
|
popover-icon-open-rotation: utils.module-val(field, popover-icon-open-rotation, 180deg),
|
|
52
52
|
surface-animation-duration: utils.module-val(field, surface-animation-duration, animation.variable(duration-short4)),
|
|
53
53
|
surface-animation-timing: utils.module-val(field, surface-animation-timing, animation.variable(easing-standard)),
|
|
54
|
-
floating-animation-duration: utils.module-val(field, floating-animation-duration, animation.variable(duration-
|
|
55
|
-
floating-animation-timing: utils.module-val(field, floating-animation-timing, animation.variable(easing-
|
|
54
|
+
floating-animation-duration: utils.module-val(field, floating-animation-duration, animation.variable(duration-short2)),
|
|
55
|
+
floating-animation-timing: utils.module-val(field, floating-animation-timing, animation.variable(easing-linear)),
|
|
56
56
|
focus-indicator-width: utils.module-val(field, focus-indicator-width, focus-indicator.get(width)),
|
|
57
57
|
disabled-opacity: utils.module-val(field, disabled-opacity, theme.emphasis(medium-low)),
|
|
58
58
|
disabled-background: utils.module-val(field, disabled-background, theme.variable(surface-container-low)),
|
|
@@ -59,6 +59,7 @@ $tokens: (
|
|
|
59
59
|
// Density - large (default)
|
|
60
60
|
density-large-size: utils.module-ref(icon-button, density-large-size, size),
|
|
61
61
|
// Toggle (on)
|
|
62
|
+
toggle-on-background-color: utils.module-val(icon-button, toggle-on-background-color, theme.variable(primary-container)),
|
|
62
63
|
toggle-on-icon-color: utils.module-val(icon-button, toggle-on-icon-color, theme.variable(primary)),
|
|
63
64
|
// Toggle (on) outlined
|
|
64
65
|
outlined-toggle-on-background-color: utils.module-val(icon-button, outlined-toggle-on-background-color, theme.variable(primary-container)),
|
|
@@ -15,7 +15,7 @@ $tokens: (
|
|
|
15
15
|
primary-color: utils.module-val(radio, primary-color, theme.variable(tertiary)),
|
|
16
16
|
inactive-color: utils.module-val(radio, inactive-color, theme.variable(surface-container-high)),
|
|
17
17
|
size: utils.module-val(radio, size, 20px),
|
|
18
|
-
mark-size: utils.module-val(radio, mark-size,
|
|
18
|
+
mark-size: utils.module-val(radio, mark-size, 75%),
|
|
19
19
|
state-layer-size: utils.module-val(radio, state-layer-size, 40px),
|
|
20
20
|
state-layer-dense-size: utils.module-val(radio, state-layer-dense-size, 24px),
|
|
21
21
|
// Radio
|
|
@@ -29,10 +29,7 @@ $tokens: (
|
|
|
29
29
|
// Mark
|
|
30
30
|
mark-width: utils.module-ref(radio, mark-width, mark-size),
|
|
31
31
|
mark-height: utils.module-ref(radio, mark-height, mark-size),
|
|
32
|
-
mark-
|
|
33
|
-
mark-checked-color: utils.module-ref(radio, mark-checked-color, primary-color),
|
|
34
|
-
mark-unchecked-background: utils.module-val(radio, mark-unchecked-background, transparent),
|
|
35
|
-
mark-checked-background: utils.module-val(radio, mark-checked-background, transparent),
|
|
32
|
+
mark-color: utils.module-ref(radio, mark-color, primary-color),
|
|
36
33
|
// Label
|
|
37
34
|
gap: utils.module-val(radio, gap, 0),
|
|
38
35
|
justify: utils.module-val(radio, justify, start),
|
|
@@ -15,7 +15,7 @@ $tokens: (
|
|
|
15
15
|
height: utils.module-val(tab, height, 48px),
|
|
16
16
|
stacked-height: utils.module-val(tab, stacked-height, 64px),
|
|
17
17
|
padding-block: utils.module-val(tab, padding-block, 0),
|
|
18
|
-
padding-inline: utils.module-val(tab, padding-inline,
|
|
18
|
+
padding-inline: utils.module-val(tab, padding-inline, 0),
|
|
19
19
|
// Disabled
|
|
20
20
|
disabled-opacity: utils.module-val(tab, disabled-opacity, 0.38),
|
|
21
21
|
// Indicator
|
|
@@ -25,8 +25,8 @@ $tokens: (
|
|
|
25
25
|
// Indicator (vertical)
|
|
26
26
|
vertical-indicator-shape: utils.module-val(tab, vertical-indicator-shape, 3px 0 0 3px),
|
|
27
27
|
// Indicator (secondary)
|
|
28
|
-
secondary-indicator-height: utils.module-val(tab, secondary-indicator-height, 2px),
|
|
29
|
-
secondary-indicator-shape: utils.module-val(tab, secondary-indicator-shape, 0),
|
|
28
|
+
/** @deprecated */ secondary-indicator-height: utils.module-val(tab, secondary-indicator-height, 2px),
|
|
29
|
+
/** @deprecated */ secondary-indicator-shape: utils.module-val(tab, secondary-indicator-shape, 0),
|
|
30
30
|
// Indicator (inverted)
|
|
31
31
|
inverted-indicator-shape: utils.module-val(tab, inverted-indicator-shape, 0 0 3px 3px),
|
|
32
32
|
vertical-inverted-indicator-shape: utils.module-val(tab, vertical-inverted-indicator-shape, 0 3px 3px 0),
|
|
@@ -36,11 +36,11 @@ $tokens: (
|
|
|
36
36
|
container-shape: utils.module-val(tab, container-shape, 0),
|
|
37
37
|
// Content
|
|
38
38
|
content-height: utils.module-ref(tab, content-height, height),
|
|
39
|
-
content-spacing: utils.module-val(tab, content-spacing, spacing.variable(
|
|
39
|
+
content-spacing: utils.module-val(tab, content-spacing, spacing.variable(xsmall)),
|
|
40
40
|
content-padding: utils.module-val(tab, content-padding, spacing.variable(xxsmall)),
|
|
41
41
|
content-padding-block: utils.module-ref(tab, content-padding-block, content-padding),
|
|
42
|
-
content-padding-inline: utils.module-
|
|
43
|
-
content-padding-inline-secondary: utils.module-val(tab, content-padding-inline-secondary, spacing.variable(medium)),
|
|
42
|
+
content-padding-inline: utils.module-val(tab, content-padding-inline, spacing.variable(medium)),
|
|
43
|
+
/** @deprecated */ content-padding-inline-secondary: utils.module-val(tab, content-padding-inline-secondary, spacing.variable(medium)),
|
|
44
44
|
// Icon
|
|
45
45
|
active-focus-icon-color: utils.module-ref(tab, active-focus-icon-color, active-color),
|
|
46
46
|
active-hover-icon-color: utils.module-ref(tab, active-hover-icon-color, active-color),
|
|
@@ -29,7 +29,8 @@ $tokens: (
|
|
|
29
29
|
// Spacing
|
|
30
30
|
padding: utils.module-val(toolbar, padding, spacing.variable(medium)),
|
|
31
31
|
padding-block: utils.module-val(toolbar, padding-block, 0),
|
|
32
|
-
padding-inline: utils.module-ref(toolbar, padding-inline, padding)
|
|
32
|
+
padding-inline: utils.module-ref(toolbar, padding-inline, padding),
|
|
33
|
+
columns: utils.module-val(toolbar, columns, auto 1fr auto)
|
|
33
34
|
) !default;
|
|
34
35
|
|
|
35
36
|
@function get($key) {
|
|
@@ -27,6 +27,15 @@ $label2: utils.inherit-map(
|
|
|
27
27
|
)
|
|
28
28
|
) !default;
|
|
29
29
|
|
|
30
|
+
$label3: utils.inherit-map(
|
|
31
|
+
core.$base,
|
|
32
|
+
(
|
|
33
|
+
font-size: type-utils.font-size-relative(label, font-size, '0875'),
|
|
34
|
+
line-height: type-utils.font-size-relative(label, line-height, '1250'),
|
|
35
|
+
letter-spacing: type-utils.calc-letter-spacing(0.125, scale.value('0875'))
|
|
36
|
+
)
|
|
37
|
+
) !default;
|
|
38
|
+
|
|
30
39
|
$button: utils.inherit-map(
|
|
31
40
|
core.$base,
|
|
32
41
|
(
|
|
@@ -50,6 +59,7 @@ $overline: utils.inherit-map(
|
|
|
50
59
|
$tokens: (
|
|
51
60
|
label1: $label1,
|
|
52
61
|
label2: $label2,
|
|
62
|
+
label3: $label3,
|
|
53
63
|
button: $button,
|
|
54
64
|
overline: $overline
|
|
55
65
|
) !default;
|
|
@@ -71,12 +71,12 @@
|
|
|
71
71
|
@include core.background-checked;
|
|
72
72
|
|
|
73
73
|
// We use a radial gradient to create the circular mark, applying blur to anti-alias the edge
|
|
74
|
-
$mark-radius: calc(#{core.token(mark-size)} /
|
|
74
|
+
$mark-radius: calc(#{core.token(mark-size)} / 1.4);
|
|
75
75
|
$mark-blur: 0.2px;
|
|
76
76
|
background: radial-gradient(
|
|
77
77
|
circle,
|
|
78
|
-
#{core.token(mark-
|
|
79
|
-
#{core.token(mark-
|
|
78
|
+
#{core.token(mark-color)} 0%,
|
|
79
|
+
#{core.token(mark-color)} calc(#{$mark-radius} - #{$mark-blur}),
|
|
80
80
|
transparent calc(#{$mark-radius} + #{$mark-blur}),
|
|
81
81
|
transparent 100%
|
|
82
82
|
);
|