@universal-material/web
Version:
Material web components
1,364 lines (1,363 loc) • 841 kB
JSON
{
"schemaVersion": "1.0.0",
"readme": "",
"modules": [
{
"kind": "javascript-module",
"path": "src/config.ts",
"declarations": [
{
"kind": "variable",
"name": "config",
"default": "_config"
}
],
"exports": [
{
"kind": "js",
"name": "config",
"declaration": {
"name": "config",
"module": "src/config.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/index.ts",
"declarations": [],
"exports": [
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./app-bar/top-app-bar.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./badge/badge.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./button/button.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./button/button-base.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./button/button-set.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./button/fab.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./button/icon-button.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./button-field/button-field.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./calendar/calendar.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./calendar/range-calendar.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./card/card.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./card/card-content.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./card/card-media.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./chip/chip.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./chip-field/chip-field.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./chip/chip-set.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./dialog/dialog.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./dialog/dialog-builder.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./dialog/confirm-dialog-builder.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./dialog/message-dialog-builder.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./checkbox/checkbox.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./radio/radio.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./search/search.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./switch/switch.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./switch/switch-list-item.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./elevation/elevation.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./field/field.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./text-field/text-field.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./text-area/text-area.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./select/select.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./list/list.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./list/list-item.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./icon/icon.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./menu/menu.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./menu/menu-item.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./navigation/drawer.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./navigation/drawer-item.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./navigation/drawer-headline.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./navigation/side-navigation.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./overflow-menu/overflow-menu.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./overflow-menu/overflow-menu-item.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./progress/circular-progress.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./progress/progress-bar.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./ripple/ripple.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./snackbar/snackbar.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./tab-bar/tab-bar.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./tab-bar/tab.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./theme/theme-builder.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./typeahead/highlight.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./typeahead/typeahead.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/app-bar/top-app-bar.styles.ts",
"declarations": [
{
"kind": "variable",
"name": "styles",
"default": "css ` :host { display: block; } slot[name=leading-icon]::slotted(u-icon-button) { color: inherit; } .container { background-color: var(--u-top-app-bar-container-color, var(--u-color-body, var(--u-color-surface, rgb(254, 247, 255)))); color: var(--u-top-app-bar-text-color, var(--u-color-on-surface, rgb(29, 27, 32))); transition: background-color 100ms, inset 375ms cubic-bezier(0.19, 1, 0.22, 1); } .scrolled { background-color: var(--u-top-app-bar-on-scroll-container-color, var(--u-color-surface-container, rgb(243, 237, 247))); } .leading-icon, .trailing-icon { display: none; align-items: center; gap: var(--u-top-app-bar-icons-gap, 8px); } .has-leading-icon .leading-icon, .has-trailing-icon .trailing-icon { display: inline-flex; } .absolute { position: absolute; } .fixed { position: fixed; inset-inline: 0; inset-block-start: 0; inset-inline-start: var(--u-app-bar-offset, 0); } .absolute, .fixed { z-index: var(--u-fixed-app-bar-z-index, 1010); } .spacing { padding-top: var(--_content-height); } .extended-content { display: flex; align-items: flex-end; padding-inline: var(--u-extended-content-inline-padding, 16px); } .medium + .extended-content { font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\")); line-height: var(--u-extended-content-medium-line-height, var(--u-headline-s-line-height, 2rem)); font-size: var(--u-extended-content-medium-font-size, var(--u-headline-s-font-size, 1.5rem)); letter-spacing: var(--u-extended-content-medium-letter-spacing, var(--u-headline-s-letter-spacing, 0rem)); font-weight: var(--u-extended-content-medium-font-weight, var(--u-headline-s-font-weight, var(--u-font-weight-regular, 400))); height: var(--u-extended-content-medium-height, 3.5rem); padding-bottom: var(--u-extended-content-medium-padding-bottom, 24px); } .large + .extended-content { font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\")); line-height: var(--u-extended-content-large-line-height, var(--u-headline-m-line-height, 2.25rem)); font-size: var(--u-extended-content-large-font-size, var(--u-headline-m-font-size, 1.75rem)); letter-spacing: var(--u-extended-content-large-letter-spacing, var(--u-headline-m-letter-spacing, 0rem)); font-weight: var(--u-extended-content-large-font-weight, var(--u-headline-m-font-weight, var(--u-font-weight-regular, 400))); height: var(--u-extended-content-medium-large, 6rem); padding-bottom: var(--u-extended-content-large-padding-bottom, 28px); } .content { display: flex; align-items: center; background-color: inherit; transition: inherit; min-height: var(--u-top-app-bar-min-height, 56px); } @media (min-width: 840px) { .content { min-height: var(--u-top-app-bar-extended-min-height, 64px); } } .headline { overflow: hidden; font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\")); line-height: var(--u-top-app-bar-headline-line-height, var(--u-title-l-line-height, 1.75rem)); font-size: var(--u-top-app-bar-headline-font-size, var(--u-title-l-font-size, 1.375rem)); letter-spacing: var(--u-top-app-bar-headline-letter-spacing, var(--u-title-l-letter-spacing, 0rem)); font-weight: var(--u-top-app-bar-headline-font-weight, var(--u-title-l-font-weight, var(--u-font-weight-regular, 400))); margin-inline: var(--u-headline-margin, 16px); } .has-leading-icon .headline { margin-inline-start: 0; } .leading-icon { margin-inline: var(--u-leading-icon-margin, 8px); } .trailing-icon { padding-inline: var(--u-trailing-icon-margin, 8px); margin-inline-start: auto; } `"
}
],
"exports": [
{
"kind": "js",
"name": "styles",
"declaration": {
"name": "styles",
"module": "src/app-bar/top-app-bar.styles.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/app-bar/top-app-bar.ts",
"declarations": [
{
"kind": "class",
"description": "",
"name": "UmTopAppBar",
"members": [
{
"kind": "field",
"name": "_hasLeadingIcon",
"type": {
"text": "boolean"
},
"privacy": "private",
"default": "false"
},
{
"kind": "field",
"name": "_hasTrailingIcon",
"type": {
"text": "boolean"
},
"privacy": "private",
"default": "false"
},
{
"kind": "field",
"name": "position",
"type": {
"text": "'fixed' | 'absolute' | 'static'"
},
"default": "'fixed'",
"attribute": "position",
"reflects": true
},
{
"kind": "field",
"name": "size",
"type": {
"text": "'small' | 'medium' | 'large'"
},
"default": "'small'",
"attribute": "size",
"reflects": true
},
{
"kind": "field",
"name": "headline",
"type": {
"text": "string"
},
"default": "''",
"attribute": "headline"
},
{
"kind": "field",
"name": "scrollContainer",
"type": {
"text": "'none' | 'window' | string | undefined"
},
"attribute": "scrollContainer",
"reflects": true
},
{
"kind": "field",
"name": "containerScrolled",
"type": {
"text": "boolean"
},
"default": "false"
},
{
"kind": "field",
"name": "assignedLeadingIcons",
"type": {
"text": "HTMLElement[]"
},
"privacy": "private",
"readonly": true
},
{
"kind": "field",
"name": "assignedTrailingIcons",
"type": {
"text": "HTMLElement[]"
},
"privacy": "private",
"readonly": true
},
{
"kind": "field",
"name": "_container",
"type": {
"text": "HTMLElement"
},
"privacy": "private",
"readonly": true
},
{
"kind": "field",
"name": "_extendedContent",
"type": {
"text": "HTMLElement"
},
"privacy": "private",
"readonly": true
},
{
"kind": "field",
"name": "_headlineElement",
"type": {
"text": "HTMLElement"
},
"privacy": "private",
"readonly": true
},
{
"kind": "field",
"name": "containerSizeObserver",
"type": {
"text": "ResizeObserver | null"
},
"privacy": "private",
"default": "null"
},
{
"kind": "field",
"name": "scrollContainerElement",
"type": {
"text": "{\n addEventListener: typeof window.addEventListener;\n removeEventListener: typeof window.removeEventListener;\n } | null"
},
"privacy": "private",
"default": "null"
},
{
"kind": "method",
"name": "getScrollContainer",
"privacy": "private",
"return": {
"type": {
"text": "| {\n addEventListener: typeof window.addEventListener;\n removeEventListener: typeof window.removeEventListener;\n }\n | undefined"
}
},
"parameters": [
{
"name": "idOrElement",
"type": {
"text": "string | HTMLElement | undefined"
}
}
]
},
{
"kind": "method",
"name": "#handleLeadingIconSlotChange",
"privacy": "private"
},
{
"kind": "method",
"name": "#handleTrailingIconSlotChange",
"privacy": "private"
},
{
"kind": "field",
"name": "#updateScroll",
"privacy": "private",
"readonly": true
},
{
"kind": "method",
"name": "_getScrollTop",
"privacy": "private",
"static": true,
"return": {
"type": {
"text": "number"
}
},
"parameters": [
{
"name": "container",
"type": {
"text": "HTMLElement & Window"
}
}
]
},
{
"kind": "method",
"name": "#setContentHeightProperty",
"privacy": "private"
}
],
"attributes": [
{
"name": "position",
"type": {
"text": "'fixed' | 'absolute' | 'static'"
},
"default": "'fixed'",
"fieldName": "position"
},
{
"name": "size",
"type": {
"text": "'small' | 'medium' | 'large'"
},
"default": "'small'",
"fieldName": "size"
},
{
"name": "headline",
"type": {
"text": "string"
},
"default": "''",
"fieldName": "headline"
},
{
"name": "scrollContainer",
"type": {
"text": "'none' | 'window' | string | undefined"
},
"fieldName": "scrollContainer"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "u-top-app-bar",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "UmTopAppBar",
"declaration": {
"name": "UmTopAppBar",
"module": "src/app-bar/top-app-bar.ts"
}
},
{
"kind": "custom-element-definition",
"name": "u-top-app-bar",
"declaration": {
"name": "UmTopAppBar",
"module": "src/app-bar/top-app-bar.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/button/button-base.styles.ts",
"declarations": [
{
"kind": "variable",
"name": "styles",
"default": "css ` :host { --_morph-duration: var(--u-button-morph-duration, 125ms); } .container { transition: background-color var(--_morph-duration) linear, border-radius var(--_morph-duration) linear, color var(--_morph-duration) linear; } .icon { display: flex; justify-content: center; align-items: center; width: 1em; height: 1em; line-height: 1em; } ::slotted([slot=icon]) { display: inline-block; } `"
}
],
"exports": [
{
"kind": "js",
"name": "styles",
"declaration": {
"name": "styles",
"module": "src/button/button-base.styles.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/button/button-base.ts",
"declarations": [
{
"kind": "class",
"description": "",
"name": "UmButtonBase",
"members": [
{
"kind": "field",
"name": "formAssociated",
"type": {
"text": "boolean"
},
"static": true,
"readonly": true,
"default": "true"
},
{
"kind": "field",
"name": "type",
"type": {
"text": "string"
},
"default": "'submit'",
"attribute": "type"
},
{
"kind": "field",
"name": "value",
"type": {
"text": "string"
},
"default": "''",
"attribute": "value",
"reflects": true
},
{
"kind": "field",
"name": "form",
"type": {
"text": "HTMLFormElement | null"
},
"readonly": true
},
{
"kind": "field",
"name": "#elementInternals",
"privacy": "private",
"type": {
"text": "ElementInternals"
},
"readonly": true
},
{
"kind": "method",
"name": "_handleClick",
"privacy": "protected",
"return": {
"type": {
"text": "void"
}
},
"parameters": [
{
"name": "_",
"type": {
"text": "UIEvent"
}
}
],
"inheritedFrom": {
"name": "UmButtonWrapper",
"module": "src/shared/button-wrapper.ts"
}
},
{
"kind": "field",
"name": "disabled",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Whether the button is disabled or not.",
"attribute": "disabled",
"reflects": true,
"inheritedFrom": {
"name": "UmButtonWrapper",
"module": "src/shared/button-wrapper.ts"
}
},
{
"kind": "field",
"name": "renderRipple",
"type": {
"text": "boolean"
},
"default": "true",
"inheritedFrom": {
"name": "UmButtonWrapper",
"module": "src/shared/button-wrapper.ts"
}
},
{
"kind": "field",
"name": "href",
"type": {
"text": "string | undefined"
},
"description": "The URL that the link button points to.",
"attribute": "href",
"inheritedFrom": {
"name": "UmButtonWrapper",
"module": "src/shared/button-wrapper.ts"
}
},
{
"kind": "field",
"name": "target",
"type": {
"text": "string | undefined"
},
"description": "Where to display the linked `href` URL for a link button. Common options\ninclude `_blank` to open in a new tab.",
"attribute": "target",
"inheritedFrom": {
"name": "UmButtonWrapper",
"module": "src/shared/button-wrapper.ts"
}
},
{
"kind": "field",
"name": "name",
"type": {
"text": "string | undefined"
},
"attribute": "name",
"inheritedFrom": {
"name": "UmButtonWrapper",
"module": "src/shared/button-wrapper.ts"
}
},
{
"kind": "field",
"name": "buttonElement",
"type": {
"text": "HTMLElement"
},
"readonly": true,
"inheritedFrom": {
"name": "UmButtonWrapper",
"module": "src/shared/button-wrapper.ts"
}
},
{
"kind": "field",
"name": "_ripple",
"type": {
"text": "UmRipple"
},
"privacy": "private",
"readonly": true,
"inheritedFrom": {
"name": "UmButtonWrapper",
"module": "src/shared/button-wrapper.ts"
}
},
{
"kind": "field",
"name": "innerRole",
"type": {
"text": "string | null"
},
"privacy": "protected",
"default": "null",
"inheritedFrom": {
"name": "UmButtonWrapper",
"module": "src/shared/button-wrapper.ts"
}
},
{
"kind": "field",
"name": "pathname",
"type": {
"text": "string"
},
"readonly": true,
"inheritedFrom": {
"name": "UmButtonWrapper",
"module": "src/shared/button-wrapper.ts"
}
},
{
"kind": "method",
"name": "_getContainerClasses",
"privacy": "protected",
"return": {
"type": {
"text": "Record<string, boolean>"
}
},
"inheritedFrom": {
"name": "UmButtonWrapper",
"module": "src/shared/button-wrapper.ts"
}
},
{
"kind": "method",
"name": "#renderButton",
"privacy": "private",
"inheritedFrom": {
"name": "UmButtonWrapper",
"module": "src/shared/button-wrapper.ts"
}
},
{
"kind": "method",
"name": "#renderLink",
"privacy": "private",
"inheritedFrom": {
"name": "UmButtonWrapper",
"module": "src/shared/button-wrapper.ts"
}
},
{
"kind": "method",
"name": "_renderContent",
"privacy": "protected",
"return": {
"type": {
"text": "HTMLTemplateResult"
}
},
"inheritedFrom": {
"name": "UmButtonWrapper",
"module": "src/shared/button-wrapper.ts"
}
},
{
"kind": "method",
"name": "focus",
"inheritedFrom": {
"name": "UmButtonWrapper",
"module": "src/shared/button-wrapper.ts"
}
},
{
"kind": "method",
"name": "blur",
"inheritedFrom": {
"name": "UmButtonWrapper",
"module": "src/shared/button-wrapper.ts"
}
},
{
"kind": "method",
"name": "getAriaLabel",
"privacy": "protected",
"return": {
"type": {
"text": "string | null"
}
},
"inheritedFrom": {
"name": "UmButtonWrapper",
"module": "src/shared/button-wrapper.ts"
}
},
{
"kind": "method",
"name": "#innerFocusHandler",
"privacy": "private",
"return": {
"type": {
"text": "void"
}
},
"inheritedFrom": {
"name": "UmButtonWrapper",
"module": "src/shared/button-wrapper.ts"
}
},
{
"kind": "method",
"name": "#innerClickHandler",
"privacy": "private",
"return": {
"type": {
"text": "void"
}
},
"parameters": [
{
"name": "event",
"type": {
"text": "MouseEvent"
}
}
],
"inheritedFrom": {
"name": "UmButtonWrapper",
"module": "src/shared/button-wrapper.ts"
}
}
],
"attributes": [
{
"name": "type",
"type": {
"text": "string"
},
"default": "'submit'",
"fieldName": "type"
},
{
"name": "value",
"type": {
"text": "string"
},
"default": "''",
"fieldName": "value"
},
{
"name": "disabled",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Whether the button is disabled or not.",
"fieldName": "disabled",
"inheritedFrom": {
"name": "UmButtonWrapper",
"module": "src/shared/button-wrapper.ts"
}
},
{
"name": "href",
"type": {
"text": "string | undefined"
},
"description": "The URL that the link button points to.",
"fieldName": "href",
"inheritedFrom": {
"name": "UmButtonWrapper",
"module": "src/shared/button-wrapper.ts"
}
},
{
"name": "target",
"type": {
"text": "string | undefined"
},
"description": "Where to display the linked `href` URL for a link button. Common options\ninclude `_blank` to open in a new tab.",
"fieldName": "target",
"inheritedFrom": {
"name": "UmButtonWrapper",
"module": "src/shared/button-wrapper.ts"
}
},
{
"name": "name",
"type": {
"text": "string | undefined"
},
"fieldName": "name",
"inheritedFrom": {
"name": "UmButtonWrapper",
"module": "src/shared/button-wrapper.ts"
}
}
],
"superclass": {
"name": "UmButtonWrapper",
"module": "/src/shared/button-wrapper.js"
}
}
],
"exports": [
{
"kind": "js",
"name": "UmButtonBase",
"declaration": {
"name": "UmButtonBase",
"module": "src/button/button-base.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/button/button-set.styles.ts",
"declarations": [
{
"kind": "variable",
"name": "styles",
"default": "css ` :host([stack][alignment=start]) { align-items: flex-start; } :host([stack][alignment=center]) { align-items: center; } :host([stack][alignment=end]) { align-items: flex-end; } :host([stack]) { flex-direction: column; justify-content: flex-start; } `"
}
],
"exports": [
{
"kind": "js",
"name": "styles",
"declaration": {
"name": "styles",
"module": "src/button/button-set.styles.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/button/button-set.ts",
"declarations": [
{
"kind": "class",
"description": "",
"name": "UmButtonSet",
"members": [
{
"kind": "field",
"name": "stack",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Whether to render the buttons stacked or not",
"attribute": "stack",
"reflects": true
},
{
"kind": "field",
"name": "alignment",
"type": {
"text": "'start' | 'center' | 'end'"
},
"default": "'end'",
"description": "Set the alignment of the set at the `start`, `center` or at the `end`.",
"attribute": "alignment",
"reflects": true,
"inheritedFrom": {
"name": "UmSetBase",
"module": "src/shared/sets/set-base.ts"
}
}
],
"attributes": [
{
"name": "stack",
"type": {
"text": "boolean"
},
"default": "false",
"description": "Whether to render the buttons stacked or not",
"fieldName": "stack"
},
{
"name": "alignment",
"type": {
"text": "'start' | 'center' | 'end'"
},
"default": "'start'",
"description": "Set the alignment of the set at the `start`, `center` or at the `end`.",
"fieldName": "alignment",
"inheritedFrom": {
"name": "UmSetBase",
"module": "src/shared/sets/set-base.ts"
}
}
],
"superclass": {
"name": "UmSetBase",
"module": "/src/shared/sets/set-base.js"
},
"tagName": "u-button-set",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "UmButtonSet",
"declaration": {
"name": "UmButtonSet",
"module": "src/button/button-set.ts"
}
},
{
"kind": "custom-element-definition",
"name": "u-button-set",
"declaration": {
"name": "UmButtonSet",
"module": "src/button/button-set.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/button/button.styles.ts",
"declarations": [
{
"kind": "variable",
"name": "styles",
"default": "css ` :host { --u-common-button-line-height: var(--u-label-large-line-height, 1.25rem); --u-common-button-font-size: var(--u-label-large-font-size, .875rem); --u-common-button-font-weight: var(--u-font-weight-medium, 500); --_common-button-padding: var(--u-common-button-padding, 16px); --_extra-small-font-size: var(--u-common-button-extra-small-font-size, .875rem); --_small-font-size: var(--u-common-button-small-font-size, .875rem); --_medium-font-size: var(--u-common-button-medium-font-size, 1rem); --_large-font-size: var(--u-common-button-large-font-size, 1.5rem); --_extra-large-font-size: var(--u-common-button-extra-large-font-size, 2rem); --_extra-small-font-weight: var(--u-common-button-extra-small-font-weight, var(--u-font-weight-medium, 500)); --_small-font-weight: var(--u-common-button-small-font-weight, var(--u-font-weight-medium, 500)); --_medium-font-weight: var(--u-common-button-medium-font-weight, var(--u-font-weight-medium, 500)); --_large-font-weight: var(--u-common-button-large-font-weight, var(--u-font-weight-regular, 400)); --_extra-large-font-weight: var(--u-common-button-extra-large-font-weight, var(--u-font-weight-regular, 400)); --_extra-small-size: var(--u-common-button-extra-small-height, 32px); --_small-size: var(--u-common-button-small-height, 40px); --_medium-size: var(--u-common-button-medium-height, 56px); --_large-size: var(--u-common-button-large-height, 96px); --_extra-large-size: var(--u-common-button-extra-large-height, 136px); --_extra-small-icon-size: var(--u-icon-button-extra-small-icon-size, 1.25rem); --_small-icon-size: var(--u-icon-button-small-icon-size, 1.25rem); --_medium-icon-size: var(--u-icon-button-medium-icon-size, 1.5rem); --_large-icon-size: var(--u-icon-button-large-icon-size, 2rem); --_extra-large-icon-size: var(--u-icon-button-extra-large-icon-size, 2.5rem); --_extra-small-icon-margin: var(--u-icon-button-extra-small-icon-margin, 8px); --_small-icon-margin: var(--u-icon-button-small-icon-margin, 8px); --_medium-icon-margin: var(--u-icon-button-medium-icon-margin, 8px); --_large-icon-margin: var(--u-icon-button-large-icon-margin, 12px); --_extra-large-icon-margin: var(--u-icon-button-extra-large-icon-margin, 16px); --_extra-small-padding: var(--u-common-button-extra-small-padding, 12px); --_small-padding: var(--u-common-button-small-padding, 16px); --_medium-padding: var(--u-common-button-medium-padding, 24px); --_large-padding: var(--u-common-button-large-padding, 48px); --_extra-large-padding: var(--u-common-button-extra-large-padding, 64px); --_extra-small-square-shape-corner: var(--u-common-button-extra-small-square-shape-corner, 12px); --_small-square-shape-corner: var(--u-common-button-small-square-shape-corner, 12px); --_medium-square-shape-corner: var(--u-common-button-medium-square-shape-corner, 16px); --_large-square-shape-corner: var(--u-common-button-large-square-shape-corner, 28px); --_extra-large-square-shape-corner: var(--u-common-button-extra-large-square-shape-corner, 28px); --_extra-small-pressed-shape-corner: var(--u-common-button-extra-small-pressed-shape-corner, 8px); --_small-pressed-shape-corner: var(--u-common-button-small-pressed-shape-corner, 8px); --_medium-pressed-shape-corner: var(--u-common-button-medium-pressed-shape-corner, 12px); --_large-pressed-shape-corner: var(--u-common-button-large-pressed-shape-corner, 16px); --_extra-large-pressed-shape-corner: var(--u-common-button-extra-large-pressed-shape-corner, 16px); --_font-size: var(--_small-font-size); --_font-weight: var(--_small-font-weight); --_padding: var(--_small-padding); --_icon-margin: var(--_small-icon-margin); --_round-shape-corner: var(--u-common-button-round-shape-corner, calc(var(--_size) / 2)); } .extra-small { --_font-size: var(--_extra-small-font-size); --_font-weight: var(--_extra-small-font-weight); --_padding: var(--_extra-small-padding); --_icon-margin: var(--_extra-small-icon-margin); } .medium { --_font-size: var(--_medium-font-size); --_font-weight: var(--_medium-font-weight); --_padding: var(--_medium-padding); --_icon-margin: var(--_medium-icon-margin); } .large { --_font-size: var(--_large-font-size); --_font-weight: var(--_large-font-weight); --_padding: var(--_large-padding); --_icon-margin: var(--_large-icon-margin); } .extra-large { --_font-size: var(--_extra-large-font-size); --_font-weight: var(--_extra-large-font-weight); --_padding: var(--_extra-large-padding); --_icon-margin: var(--_extra-large-icon-margin); } .container { font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"); font-size: var(--_font-size); font-weight: var(--_font-weight); padding-inline: var(--_padding); box-sizing: border-box; } .filled.primary, .filled.primary.selected { background-color: var(--u-filled-button-primary-container-color, var(--u-color-primary, rgb(103, 80, 164))); color: var(--u-filled-button-primary-text-color, var(--u-color-on-primary, rgb(255, 255, 255))); } .filled.secondary, .filled.secondary.selected { background-color: var(--u-filled-button-secondary-container-color, var(--u-color-secondary, rgb(98, 91, 113))); color: var(--u-filled-button-secondary-text-color, var(--u-color-on-secondary, rgb(255, 255, 255))); } .filled.tertiary, .filled.tertiary.selected { background-color: var(--u-filled-button-tertiary-container-color, var(--u-color-tertiary, rgb(125, 82, 96))); color: var(--u-filled-button-tertiary-text-color, var(--u-color-on-tertiary, rgb(255, 255, 255))); } .filled.error, .filled.error.selected { background-color: var(--u-filled-button-error-container-color, var(--u-color-error, rgb(179, 38, 30))); color: var(--u-filled-button-error-text-color, var(--u-color-on-error, rgb(255, 255, 255))); } .filled.toggle { background-color: var(--u-filled-button-container-unselected-color, var(--u-color-surface-container, rgb(243, 237, 247))); color: var(--u-filled-button-unselected-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79))); } .tonal { background-color: var(--u-tonal-button-container-color, var(--u-color-secondary-container, rgb(232, 222, 248))); color: var(--u-tonal-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43))); } .tonal.selected { background-color: var(--u-tonal-button-container-selected-color, var(--u-color-secondary, rgb(98, 91, 113))); color: var(--u-tonal-button-text-selected-color, var(--u-color-on-secondary, rgb(255, 255, 255))); } .elevated { background-color: var(--u-elevated-button-container-color, var(--u-color-surface-container-low, rgb(247, 242, 250))); color: var(--u-elevated-button-text-color, var(--u-color-primary, rgb(103, 80, 164))); } .elevated.selected { background-color: var(--u-elevated-button-container-selected-color, var(--u-color-primary, rgb(103, 80, 164))); color: var(--u-elevated-button-text-selected-color, var(--u-color-on-primary, rgb(255, 255, 255))); } @media (hover: hover) { .filled:hover:not(:focus-within):not(:active), .tonal:hover:not(:focus-within):not(:active) { --u-elevation-level: var(--u-filled-button-hover-elevation-level, 1); } } .text { color: var(--u-text-button-text-color, var(--_color-primary)); } .outlined { color: var(--u-outlined-button-text-color, var(--u-text-button-text-color, var(--_color-primary))); border: 1px solid var(--u-outlined-button-outline-color, var(--u-color-outline, rgb(121, 116, 126))); } .outlined.selected { background-color: var(--u-outlined-button-container-selected-color, var(--u-color-inverse-surface, rgb(50, 47, 53))); color: var(--u-outlined-button-text-selected-color, var(--u-color-on-inverse-surface, rgb(245, 239, 247))); } .outlined.disabled { border-color: var(--u-outlined-button-disabled-border-color, color-mix(in srgb, var(--u-color-on-surface, rgb(29, 27, 32)) var(--u-outlined-button-disabled-border-opacity, 12%), transparent)) !important; } .outlined.disabled:not(.selected) { background-color: transparent !important; } .elevated { --u-elevation-level: var(--u-elevated-button-elevation-level, 1); color: var(--u-elevated-button-text-color, var(--_color-primary)); } @media (hover: hover) { .elevated:hover { --u-elevation-level: var(--u-elevated-button-hover-elevation-level, 2); } } .container:not(.has-icon) .icon-container { display: none; } .content { gap: var(--_icon-margin); } .icon { font-size: var(--_icon-size); } .trailing-icon .content { flex-direction: row-reverse; } #label { display: inline-block; } .label { display: inline-block; inset-inline-start: 0; transition-duration: calc(var(--_morph-duration) * 0.7); } .label-container { position: relative; } .label-container.animate { transition: width var(--_morph-duration) linear; } .label-default { opacity: 1; transition-delay: calc(var(--_morph-duration) / 2); } .label-selected { position: absolute; opacity: 0; transition-delay: 0ms; } .selected.has-selection-label .label-default { position: absolute; opacity: 0; transition-delay: 0ms; } .selected.has-selection-label .label-selected { position: static; opacity: 1; transition-delay: calc(var(--_morph-duration) / 2); } `"
}
],
"exports": [
{
"kind": "js",
"name": "styles",
"declaration": {
"name": "styles",
"module": "src/button/button.styles.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/button/button.ts",
"declarations": [
{
"kind": "class",
"description": "",
"name": "UmButton",
"members": [
{
"kind": "field",
"name": "variant",
"type": {
"text": "UmButtonVariant"
},
"default": "'filled'",
"description": "The Button variant to render",
"attribute": "variant"
},
{
"kind": "field",
"name": "color",
"type": {
"text": "UmButtonColor"
},
"default": "'primary'",
"description": "The Button color",
"attribute": "color"
},
{
"kind": "field",
"name": "trailingIcon",
"type": {
"text": "boolean"
},
"default": "false",
"attribute": "trailing-icon",
"reflects": true
},
{
"kind": "field",
"name": "_hasIcon",
"type": {
"text": "boolean"
},
"privacy": "private",
"default": "false"
},
{
"kind": "field",
"name": "_hasSelectionLabel",
"type": {
"text": "boolean"
},
"privacy": "private",
"default": "false"
},
{
"kind": "field",
"name": "animateTextChange",
"type": {
"text": "boolean"
},
"default": "false"
},
{
"kind": "field",
"name": "_textWrapper",
"type": {
"text": "HTMLElement"
},
"privacy": "private",
"readonly": true
},
{
"kind": "field",
"name": "_text",
"type": {
"text": "HTMLElement"
},
"privacy": "private",
"readonly": true
},
{
"kind": "field",
"name": "#textSizeObserver",
"privacy": "private",
"type": {
"text": "ResizeObserver | null"
}
},
{
"kind": "method",
"name": "#setTextWrapperWidth",
"privacy": "private",
"return": {
"type": {
"text": "void"
}
}
},
{
"kind": "method",
"name": "_getContainerClasses",
"privacy": "protected",
"return": {
"type": {
"text": "Record<string, boolean>"
}
},
"inheritedFrom": {
"name": "UmButtonWrapper",
"module": "src/shared/button-wrapper.ts"
}
},
{
"kind": "method",