igniteui-webcomponents 4.3.1 → 4.5.0-beta.1

package/components/navbar/themes/navbar.base.css.js

@@ -42,8 +42,12 @@ export const styles = css `:host {
   font-family: var(--ig-font-family);
   z-index: 4;
 }
+:host ::slotted(igc-icon) {
+  --ig-size: 3;
+}
 
 [part=base] {
+  --ig-size: 1;
   display: inherit;
   position: relative;
   -webkit-box-orient: horizontal;
@@ -108,18 +112,8 @@ export const styles = css `:host {
           margin-inline-end: 0.0625rem;
 }
 
-::slotted(igc-avatar[part=base]) {
-  max-width: 2rem;
-  max-height: 2rem;
-  min-height: 0;
-  min-width: 0;
-}
-
 ::slotted(igc-icon) {
   cursor: pointer;
-  width: 2rem;
-  height: 2rem;
-  font-size: 2rem;
   -webkit-transition: color 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   transition: color 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

package/components/navbar/themes/navbar.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"navbar.base.css.js","sourceRoot":"","sources":["../../../../src/components/navbar/themes/navbar.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyIvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n  --is-medium: min(\n      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n  );\n  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--ig-scrollbar-size);\n  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--ig-scrollbar-size);\n  height: var(--ig-scrollbar-size);\n  background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--ig-scrollbar-thumb-background);\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n:host {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  width: 100%;\n  min-height: 3.5rem;\n  max-height: 8rem;\n  padding: 0 1rem;\n  font-family: var(--ig-font-family);\n  z-index: 4;\n}\n\n[part=base] {\n  display: inherit;\n  position: relative;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n      -ms-flex-flow: row nowrap;\n          flex-flow: row nowrap;\n  -webkit-box-flex: 1;\n      -ms-flex-positive: 1;\n          flex-grow: 1;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n}\n\n[part=middle] {\n  display: -webkit-inline-box;\n  -webkit-line-clamp: 4;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  -webkit-user-select: text;\n     -moz-user-select: text;\n      -ms-user-select: text;\n          user-select: text;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-flex: 1;\n      -ms-flex-positive: 1;\n          flex-grow: 1;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  overflow: visible;\n}\n\n[part=start],\n[part=end] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  overflow: visible;\n}\n\n[name=start]::slotted(*) {\n  -webkit-margin-end: 1rem;\n          margin-inline-end: 1rem;\n  -webkit-margin-start: 0.0625rem;\n          margin-inline-start: 0.0625rem;\n}\n\n[name=end]::slotted(*) {\n  -webkit-margin-start: 1rem;\n          margin-inline-start: 1rem;\n  -webkit-margin-end: 0.0625rem;\n          margin-inline-end: 0.0625rem;\n}\n\n::slotted(igc-avatar[part=base]) {\n  max-width: 2rem;\n  max-height: 2rem;\n  min-height: 0;\n  min-width: 0;\n}\n\n::slotted(igc-icon) {\n  cursor: pointer;\n  width: 2rem;\n  height: 2rem;\n  font-size: 2rem;\n  -webkit-transition: color 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n  transition: color 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n\n::slotted(*) {\n  font-family: var(--ig-h6-font-family, var(--ig-font-family));\n  font-size: var(--ig-h6-font-size);\n  font-weight: var(--ig-h6-font-weight);\n  font-style: var(--ig-h6-font-style);\n  line-height: var(--ig-h6-line-height);\n  letter-spacing: var(--ig-h6-letter-spacing);\n  text-transform: var(--ig-h6-text-transform);\n  margin-top: var(--ig-h6-margin-top);\n  margin-bottom: var(--ig-h6-margin-bottom);\n  line-height: normal;\n  margin: 0;\n}`;\n"]}
+{"version":3,"file":"navbar.base.css.js","sourceRoot":"","sources":["../../../../src/components/navbar/themes/navbar.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmIvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n  --is-medium: min(\n      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n  );\n  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--ig-scrollbar-size);\n  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--ig-scrollbar-size);\n  height: var(--ig-scrollbar-size);\n  background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--ig-scrollbar-thumb-background);\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n:host {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  width: 100%;\n  min-height: 3.5rem;\n  max-height: 8rem;\n  padding: 0 1rem;\n  font-family: var(--ig-font-family);\n  z-index: 4;\n}\n:host ::slotted(igc-icon) {\n  --ig-size: 3;\n}\n\n[part=base] {\n  --ig-size: 1;\n  display: inherit;\n  position: relative;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n      -ms-flex-flow: row nowrap;\n          flex-flow: row nowrap;\n  -webkit-box-flex: 1;\n      -ms-flex-positive: 1;\n          flex-grow: 1;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n}\n\n[part=middle] {\n  display: -webkit-inline-box;\n  -webkit-line-clamp: 4;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  -webkit-user-select: text;\n     -moz-user-select: text;\n      -ms-user-select: text;\n          user-select: text;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-flex: 1;\n      -ms-flex-positive: 1;\n          flex-grow: 1;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  overflow: visible;\n}\n\n[part=start],\n[part=end] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  overflow: visible;\n}\n\n[name=start]::slotted(*) {\n  -webkit-margin-end: 1rem;\n          margin-inline-end: 1rem;\n  -webkit-margin-start: 0.0625rem;\n          margin-inline-start: 0.0625rem;\n}\n\n[name=end]::slotted(*) {\n  -webkit-margin-start: 1rem;\n          margin-inline-start: 1rem;\n  -webkit-margin-end: 0.0625rem;\n          margin-inline-end: 0.0625rem;\n}\n\n::slotted(igc-icon) {\n  cursor: pointer;\n  -webkit-transition: color 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n  transition: color 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n\n::slotted(*) {\n  font-family: var(--ig-h6-font-family, var(--ig-font-family));\n  font-size: var(--ig-h6-font-size);\n  font-weight: var(--ig-h6-font-weight);\n  font-style: var(--ig-h6-font-style);\n  line-height: var(--ig-h6-line-height);\n  letter-spacing: var(--ig-h6-letter-spacing);\n  text-transform: var(--ig-h6-text-transform);\n  margin-top: var(--ig-h6-margin-top);\n  margin-bottom: var(--ig-h6-margin-bottom);\n  line-height: normal;\n  margin: 0;\n}`;\n"]}

package/components/progress/themes/linear/linear.progress.base.css.js

@@ -349,6 +349,7 @@ export const styles = css `@-webkit-keyframes indeterminate-primary {
 [hidden] {
   display: none !important;
 }
+
 :host {
   --track-color: var(--ig-linear-bar-track-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
   --fill-color-default: var(--ig-linear-bar-fill-color-default, hsla(var(--ig-primary-500), var(--ig-primary-a)));

package/components/progress/themes/linear/linear.progress.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"linear.progress.base.css.js","sourceRoot":"","sources":["../../../../../src/components/progress/themes/linear/linear.progress.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgjBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`@-webkit-keyframes indeterminate-primary {\n  0% {\n    -webkit-transform: translateX(0);\n            transform: translateX(0);\n  }\n  20% {\n    -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.7017, 0.4958);\n            animation-timing-function: cubic-bezier(0.5, 0, 0.7017, 0.4958);\n    -webkit-transform: translateX(0);\n            transform: translateX(0);\n  }\n  59.15% {\n    -webkit-animation-timing-function: cubic-bezier(0.3024, 0.3813, 0.55, 0.9563);\n            animation-timing-function: cubic-bezier(0.3024, 0.3813, 0.55, 0.9563);\n    -webkit-transform: translateX(83.671%);\n            transform: translateX(83.671%);\n  }\n  100% {\n    -webkit-transform: translateX(200.611%);\n            transform: translateX(200.611%);\n  }\n}\n@keyframes indeterminate-primary {\n  0% {\n    -webkit-transform: translateX(0);\n            transform: translateX(0);\n  }\n  20% {\n    -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.7017, 0.4958);\n            animation-timing-function: cubic-bezier(0.5, 0, 0.7017, 0.4958);\n    -webkit-transform: translateX(0);\n            transform: translateX(0);\n  }\n  59.15% {\n    -webkit-animation-timing-function: cubic-bezier(0.3024, 0.3813, 0.55, 0.9563);\n            animation-timing-function: cubic-bezier(0.3024, 0.3813, 0.55, 0.9563);\n    -webkit-transform: translateX(83.671%);\n            transform: translateX(83.671%);\n  }\n  100% {\n    -webkit-transform: translateX(200.611%);\n            transform: translateX(200.611%);\n  }\n}\n@-webkit-keyframes indeterminate-primary-scale {\n  0% {\n    -webkit-transform: scaleX(0.08);\n            transform: scaleX(0.08);\n  }\n  36.65% {\n    -webkit-animation-timing-function: cubic-bezier(0.3347, 0.124, 0.7858, 1);\n            animation-timing-function: cubic-bezier(0.3347, 0.124, 0.7858, 1);\n    -webkit-transform: scaleX(0.08);\n            transform: scaleX(0.08);\n  }\n  69.15% {\n    -webkit-animation-timing-function: cubic-bezier(0.3347, 0.124, 0.7858, 1);\n            animation-timing-function: cubic-bezier(0.3347, 0.124, 0.7858, 1);\n    -webkit-transform: scaleX(0.6614);\n            transform: scaleX(0.6614);\n  }\n  100% {\n    -webkit-transform: scaleX(0.08);\n            transform: scaleX(0.08);\n  }\n}\n@keyframes indeterminate-primary-scale {\n  0% {\n    -webkit-transform: scaleX(0.08);\n            transform: scaleX(0.08);\n  }\n  36.65% {\n    -webkit-animation-timing-function: cubic-bezier(0.3347, 0.124, 0.7858, 1);\n            animation-timing-function: cubic-bezier(0.3347, 0.124, 0.7858, 1);\n    -webkit-transform: scaleX(0.08);\n            transform: scaleX(0.08);\n  }\n  69.15% {\n    -webkit-animation-timing-function: cubic-bezier(0.3347, 0.124, 0.7858, 1);\n            animation-timing-function: cubic-bezier(0.3347, 0.124, 0.7858, 1);\n    -webkit-transform: scaleX(0.6614);\n            transform: scaleX(0.6614);\n  }\n  100% {\n    -webkit-transform: scaleX(0.08);\n            transform: scaleX(0.08);\n  }\n}\n@-webkit-keyframes indeterminate-secondary {\n  0% {\n    -webkit-animation-timing-function: cubic-bezier(0.15, 0, 0.515, 0.4096);\n            animation-timing-function: cubic-bezier(0.15, 0, 0.515, 0.4096);\n    -webkit-transform: translateX(0);\n            transform: translateX(0);\n  }\n  25% {\n    -webkit-animation-timing-function: cubic-bezier(0.31, 0.284, 0.8, 0.7337);\n            animation-timing-function: cubic-bezier(0.31, 0.284, 0.8, 0.7337);\n    -webkit-transform: translateX(37.6519%);\n            transform: translateX(37.6519%);\n  }\n  48.35% {\n    -webkit-animation-timing-function: cubic-bezier(0.4, 0.627, 0.6, 0.902);\n            animation-timing-function: cubic-bezier(0.4, 0.627, 0.6, 0.902);\n    -webkit-transform: translateX(84.3861%);\n            transform: translateX(84.3861%);\n  }\n  100% {\n    -webkit-transform: translateX(160.2777%);\n            transform: translateX(160.2777%);\n  }\n}\n@keyframes indeterminate-secondary {\n  0% {\n    -webkit-animation-timing-function: cubic-bezier(0.15, 0, 0.515, 0.4096);\n            animation-timing-function: cubic-bezier(0.15, 0, 0.515, 0.4096);\n    -webkit-transform: translateX(0);\n            transform: translateX(0);\n  }\n  25% {\n    -webkit-animation-timing-function: cubic-bezier(0.31, 0.284, 0.8, 0.7337);\n            animation-timing-function: cubic-bezier(0.31, 0.284, 0.8, 0.7337);\n    -webkit-transform: translateX(37.6519%);\n            transform: translateX(37.6519%);\n  }\n  48.35% {\n    -webkit-animation-timing-function: cubic-bezier(0.4, 0.627, 0.6, 0.902);\n            animation-timing-function: cubic-bezier(0.4, 0.627, 0.6, 0.902);\n    -webkit-transform: translateX(84.3861%);\n            transform: translateX(84.3861%);\n  }\n  100% {\n    -webkit-transform: translateX(160.2777%);\n            transform: translateX(160.2777%);\n  }\n}\n@-webkit-keyframes indeterminate-secondary-scale {\n  0% {\n    -webkit-animation-timing-function: cubic-bezier(0.15, 0, 0.515, 0.4096);\n            animation-timing-function: cubic-bezier(0.15, 0, 0.515, 0.4096);\n    -webkit-transform: scaleX(0.08);\n            transform: scaleX(0.08);\n  }\n  19.15% {\n    -webkit-animation-timing-function: cubic-bezier(0.31, 0.284, 0.8, 0.7337);\n            animation-timing-function: cubic-bezier(0.31, 0.284, 0.8, 0.7337);\n    -webkit-transform: scaleX(0.4571);\n            transform: scaleX(0.4571);\n  }\n  44.15% {\n    -webkit-animation-timing-function: cubic-bezier(0.4, 0.627, 0.6, 0.902);\n            animation-timing-function: cubic-bezier(0.4, 0.627, 0.6, 0.902);\n    -webkit-transform: scaleX(0.727);\n            transform: scaleX(0.727);\n  }\n  100% {\n    -webkit-transform: scaleX(0.08);\n            transform: scaleX(0.08);\n  }\n}\n@keyframes indeterminate-secondary-scale {\n  0% {\n    -webkit-animation-timing-function: cubic-bezier(0.15, 0, 0.515, 0.4096);\n            animation-timing-function: cubic-bezier(0.15, 0, 0.515, 0.4096);\n    -webkit-transform: scaleX(0.08);\n            transform: scaleX(0.08);\n  }\n  19.15% {\n    -webkit-animation-timing-function: cubic-bezier(0.31, 0.284, 0.8, 0.7337);\n            animation-timing-function: cubic-bezier(0.31, 0.284, 0.8, 0.7337);\n    -webkit-transform: scaleX(0.4571);\n            transform: scaleX(0.4571);\n  }\n  44.15% {\n    -webkit-animation-timing-function: cubic-bezier(0.4, 0.627, 0.6, 0.902);\n            animation-timing-function: cubic-bezier(0.4, 0.627, 0.6, 0.902);\n    -webkit-transform: scaleX(0.727);\n            transform: scaleX(0.727);\n  }\n  100% {\n    -webkit-transform: scaleX(0.08);\n            transform: scaleX(0.08);\n  }\n}\n@-webkit-keyframes indeterminate-bar-fluent {\n  0% {\n    -webkit-transform: translateX(-100%);\n            transform: translateX(-100%);\n    -webkit-transform-origin: left;\n            transform-origin: left;\n  }\n  100% {\n    -webkit-transform: translateX(310%);\n            transform: translateX(310%);\n    -webkit-transform-origin: right;\n            transform-origin: right;\n  }\n}\n@keyframes indeterminate-bar-fluent {\n  0% {\n    -webkit-transform: translateX(-100%);\n            transform: translateX(-100%);\n    -webkit-transform-origin: left;\n            transform-origin: left;\n  }\n  100% {\n    -webkit-transform: translateX(310%);\n            transform: translateX(310%);\n    -webkit-transform-origin: right;\n            transform-origin: right;\n  }\n}\n@-webkit-keyframes indeterminate-bar-fluent-rtl {\n  0% {\n    -webkit-transform: translateX(-310%);\n            transform: translateX(-310%);\n    -webkit-transform-origin: right;\n            transform-origin: right;\n  }\n  100% {\n    -webkit-transform: translateX(100%);\n            transform: translateX(100%);\n    -webkit-transform-origin: left;\n            transform-origin: left;\n  }\n}\n@keyframes indeterminate-bar-fluent-rtl {\n  0% {\n    -webkit-transform: translateX(-310%);\n            transform: translateX(-310%);\n    -webkit-transform-origin: right;\n            transform-origin: right;\n  }\n  100% {\n    -webkit-transform: translateX(100%);\n            transform: translateX(100%);\n    -webkit-transform-origin: left;\n            transform-origin: left;\n  }\n}\n@-webkit-keyframes indeterminate-accordion {\n  0% {\n    stroke-dashoffset: calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * 2);\n    stroke-dasharray: calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * 9 / 10);\n  }\n  100% {\n    stroke-dashoffset: calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * 2 / 5);\n  }\n}\n@keyframes indeterminate-accordion {\n  0% {\n    stroke-dashoffset: calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * 2);\n    stroke-dasharray: calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * 9 / 10);\n  }\n  100% {\n    stroke-dashoffset: calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * 2 / 5);\n  }\n}\n@-webkit-keyframes indeterminate-accordion-rtl {\n  0% {\n    stroke-dashoffset: calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * -2);\n    stroke-dasharray: calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * 9 / 10);\n  }\n  100% {\n    stroke-dashoffset: calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * -2 / 5);\n  }\n}\n@keyframes indeterminate-accordion-rtl {\n  0% {\n    stroke-dashoffset: calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * -2);\n    stroke-dasharray: calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * 9 / 10);\n  }\n  100% {\n    stroke-dashoffset: calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * -2 / 5);\n  }\n}\n@-webkit-keyframes rotate-center {\n  0% {\n    -webkit-transform: rotate(0);\n            transform: rotate(0);\n  }\n  100% {\n    -webkit-transform: rotate(360deg);\n            transform: rotate(360deg);\n  }\n}\n@keyframes rotate-center {\n  0% {\n    -webkit-transform: rotate(0);\n            transform: rotate(0);\n  }\n  100% {\n    -webkit-transform: rotate(360deg);\n            transform: rotate(360deg);\n  }\n}\n:host {\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  font-family: var(--ig-font-family);\n  color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n}\n\n[part~=label] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  color: inherit;\n  font-weight: 600;\n}\n\n:host {\n  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n  --is-medium: min(\n      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n  );\n  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--ig-scrollbar-size);\n  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--ig-scrollbar-size);\n  height: var(--ig-scrollbar-size);\n  background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--ig-scrollbar-thumb-background);\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n:host {\n  --track-color: var(--ig-linear-bar-track-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --fill-color-default: var(--ig-linear-bar-fill-color-default, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --fill-color-danger: var(--ig-linear-bar-fill-color-danger, hsla(var(--ig-error-500), var(--ig-error-a)));\n  --fill-color-warning: var(--ig-linear-bar-fill-color-warning, hsla(var(--ig-warn-500), var(--ig-warn-a)));\n  --fill-color-info: var(--ig-linear-bar-fill-color-info, hsla(var(--ig-info-500), var(--ig-info-a)));\n  --fill-color-success: var(--ig-linear-bar-fill-color-success, hsla(var(--ig-success-500), var(--ig-success-a)));\n  --stripes-color: var(--ig-linear-bar-stripes-color, hsla(var(--ig-gray-50), 0.7));\n  --text-color: var(--ig-linear-bar-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --track-border-radius: var(--ig-linear-bar-track-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 0.5rem), 0.5rem));\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  width: 100%;\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: column;\n          flex-direction: column;\n  -webkit-box-flex: 1;\n      -ms-flex: 1 1 100%;\n          flex: 1 1 100%;\n  --track-size: 0.25rem;\n  --linear-animation-duration: 2000ms;\n}\n\n:host([dir=rtl][indeterminate]) [part~=track] {\n  -webkit-transform: rotateY(180deg);\n          transform: rotateY(180deg);\n}\n\n[part~=track] {\n  border-radius: var(--track-border-radius);\n  position: relative;\n  width: inherit;\n  height: var(--track-size);\n  background: hsla(var(--ig-gray-300), var(--ig-gray-a));\n  overflow: hidden;\n  z-index: 0;\n}\n\n[part~=fill] {\n  -webkit-transition: width var(--duration) linear, background-color var(--duration) linear;\n  transition: width var(--duration) linear, background-color var(--duration) linear;\n  position: relative;\n  height: inherit;\n}\n\n[part~=indeterminate],\n[part~=\"indeterminate secondary\"] {\n  width: 100% !important;\n  height: inherit;\n  position: absolute;\n  background: transparent;\n}\n[part~=indeterminate]::after,\n[part~=\"indeterminate secondary\"]::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  inset-inline-start: 0;\n  width: inherit;\n  height: inherit;\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden;\n}\n\n[part~=indeterminate]:not([part~=secondary]) {\n  -webkit-transform: scale3d(0, 1, 1);\n          transform: scale3d(0, 1, 1);\n  -webkit-animation: indeterminate-primary var(--linear-animation-duration) infinite linear;\n          animation: indeterminate-primary var(--linear-animation-duration) infinite linear;\n  left: -145.1666%;\n}\n[part~=indeterminate]:not([part~=secondary])::after {\n  -webkit-animation: indeterminate-primary-scale var(--linear-animation-duration) infinite linear;\n          animation: indeterminate-primary-scale var(--linear-animation-duration) infinite linear;\n}\n\n[part~=secondary] {\n  -webkit-animation: indeterminate-secondary var(--linear-animation-duration) infinite linear;\n          animation: indeterminate-secondary var(--linear-animation-duration) infinite linear;\n  left: -54.8888%;\n}\n[part~=secondary]::after {\n  -webkit-animation: indeterminate-secondary-scale var(--linear-animation-duration) infinite linear;\n          animation: indeterminate-secondary-scale var(--linear-animation-duration) infinite linear;\n  width: 100%;\n  height: inherit;\n}\n\n[part~=value] {\n  margin: 0;\n  color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n  font-size: 0.875em;\n  font-weight: 600;\n}\n\n[part~=primary]:not([part~=indeterminate]) {\n  background-color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n\n[part~=primary]::after {\n  background-color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n\n[part~=striped][part~=primary]:not([part~=indeterminate]) {\n  width: 100%;\n  height: 100%;\n  background: hsla(var(--ig-primary-500), var(--ig-primary-a)) repeating-linear-gradient(-45deg, hsla(var(--ig-primary-500), var(--ig-primary-a)), hsla(var(--ig-primary-500), var(--ig-primary-a)) 1rem, hsla(var(--ig-gray-50), 0.7) 1rem, hsla(var(--ig-gray-50), 0.7) 2rem);\n}\n\n[part~=striped][part~=primary]::after {\n  background: hsla(var(--ig-primary-500), var(--ig-primary-a)) repeating-linear-gradient(-45deg, hsla(var(--ig-primary-500), var(--ig-primary-a)), hsla(var(--ig-primary-500), var(--ig-primary-a)) 1rem, hsla(var(--ig-gray-50), 0.7) 1rem, hsla(var(--ig-gray-50), 0.7) 2rem);\n}\n\n[part~=danger]:not([part~=indeterminate]) {\n  background-color: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n\n[part~=danger]::after {\n  background-color: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n\n[part~=striped][part~=danger]:not([part~=indeterminate]) {\n  background: hsla(var(--ig-error-500), var(--ig-error-a)) repeating-linear-gradient(-45deg, hsla(var(--ig-error-500), var(--ig-error-a)), hsla(var(--ig-error-500), var(--ig-error-a)) 1rem, hsla(var(--ig-gray-50), 0.7) 1rem, hsla(var(--ig-gray-50), 0.7) 2rem);\n}\n\n[part~=striped][part~=danger]::after {\n  background: hsla(var(--ig-error-500), var(--ig-error-a)) repeating-linear-gradient(-45deg, hsla(var(--ig-error-500), var(--ig-error-a)), hsla(var(--ig-error-500), var(--ig-error-a)) 1rem, hsla(var(--ig-gray-50), 0.7) 1rem, hsla(var(--ig-gray-50), 0.7) 2rem);\n}\n\n[part~=warning]:not([part~=indeterminate]) {\n  background-color: hsla(var(--ig-warn-500), var(--ig-warn-a));\n}\n\n[part~=warning]::after {\n  background-color: hsla(var(--ig-warn-500), var(--ig-warn-a));\n}\n\n[part~=striped][part~=warning]:not([part~=indeterminate]) {\n  background: hsla(var(--ig-warn-500), var(--ig-warn-a)) repeating-linear-gradient(-45deg, hsla(var(--ig-warn-500), var(--ig-warn-a)), hsla(var(--ig-warn-500), var(--ig-warn-a)) 1rem, hsla(var(--ig-gray-50), 0.7) 1rem, hsla(var(--ig-gray-50), 0.7) 2rem);\n}\n\n[part~=striped][part~=warning]::after {\n  background: hsla(var(--ig-warn-500), var(--ig-warn-a)) repeating-linear-gradient(-45deg, hsla(var(--ig-warn-500), var(--ig-warn-a)), hsla(var(--ig-warn-500), var(--ig-warn-a)) 1rem, hsla(var(--ig-gray-50), 0.7) 1rem, hsla(var(--ig-gray-50), 0.7) 2rem);\n}\n\n[part~=info]:not([part~=indeterminate]) {\n  background-color: hsla(var(--ig-info-500), var(--ig-info-a));\n}\n\n[part~=info]::after {\n  background-color: hsla(var(--ig-info-500), var(--ig-info-a));\n}\n\n[part~=striped][part~=info]:not([part~=indeterminate]) {\n  background: hsla(var(--ig-info-500), var(--ig-info-a)) repeating-linear-gradient(-45deg, hsla(var(--ig-info-500), var(--ig-info-a)), hsla(var(--ig-info-500), var(--ig-info-a)) 1rem, hsla(var(--ig-gray-50), 0.7) 1rem, hsla(var(--ig-gray-50), 0.7) 2rem);\n}\n\n[part~=striped][part~=info]::after {\n  background: hsla(var(--ig-info-500), var(--ig-info-a)) repeating-linear-gradient(-45deg, hsla(var(--ig-info-500), var(--ig-info-a)), hsla(var(--ig-info-500), var(--ig-info-a)) 1rem, hsla(var(--ig-gray-50), 0.7) 1rem, hsla(var(--ig-gray-50), 0.7) 2rem);\n}\n\n[part~=success]:not([part~=indeterminate]) {\n  background-color: hsla(var(--ig-success-500), var(--ig-success-a));\n}\n\n[part~=success]::after {\n  background-color: hsla(var(--ig-success-500), var(--ig-success-a));\n}\n\n[part~=striped][part~=success]:not([part~=indeterminate]) {\n  background: hsla(var(--ig-success-500), var(--ig-success-a)) repeating-linear-gradient(-45deg, hsla(var(--ig-success-500), var(--ig-success-a)), hsla(var(--ig-success-500), var(--ig-success-a)) 1rem, hsla(var(--ig-gray-50), 0.7) 1rem, hsla(var(--ig-gray-50), 0.7) 2rem);\n}\n\n[part~=striped][part~=success]::after {\n  background: hsla(var(--ig-success-500), var(--ig-success-a)) repeating-linear-gradient(-45deg, hsla(var(--ig-success-500), var(--ig-success-a)), hsla(var(--ig-success-500), var(--ig-success-a)) 1rem, hsla(var(--ig-gray-50), 0.7) 1rem, hsla(var(--ig-gray-50), 0.7) 2rem);\n}\n\n:host([label-align=top]) [part~=label],\n:host([label-align=top-start]) [part~=label],\n:host([label-align=top-end]) [part~=label] {\n  -webkit-box-ordinal-group: 0;\n      -ms-flex-order: -1;\n          order: -1;\n}\n\n:host([label-align=top-start]) [part~=label],\n:host([label-align=bottom-start]) [part~=label],\n:host([label-align=start]) [part~=label] {\n  -ms-flex-item-align: start;\n      align-self: flex-start;\n}\n\n:host([label-align=bottom-end]) [part~=label],\n:host([label-align=top-end]) [part~=label],\n:host([label-align=end]) [part~=label] {\n  -ms-flex-item-align: end;\n      align-self: flex-end;\n}\n\n:host([label-align=top]) [part~=label],\n:host([label-align=bottom]) [part~=label] {\n  -ms-flex-item-align: center;\n      align-self: center;\n}\n\n[part~=hidden] {\n  display: none;\n}`;\n"]}
+{"version":3,"file":"linear.progress.base.css.js","sourceRoot":"","sources":["../../../../../src/components/progress/themes/linear/linear.progress.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAijBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`@-webkit-keyframes indeterminate-primary {\n  0% {\n    -webkit-transform: translateX(0);\n            transform: translateX(0);\n  }\n  20% {\n    -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.7017, 0.4958);\n            animation-timing-function: cubic-bezier(0.5, 0, 0.7017, 0.4958);\n    -webkit-transform: translateX(0);\n            transform: translateX(0);\n  }\n  59.15% {\n    -webkit-animation-timing-function: cubic-bezier(0.3024, 0.3813, 0.55, 0.9563);\n            animation-timing-function: cubic-bezier(0.3024, 0.3813, 0.55, 0.9563);\n    -webkit-transform: translateX(83.671%);\n            transform: translateX(83.671%);\n  }\n  100% {\n    -webkit-transform: translateX(200.611%);\n            transform: translateX(200.611%);\n  }\n}\n@keyframes indeterminate-primary {\n  0% {\n    -webkit-transform: translateX(0);\n            transform: translateX(0);\n  }\n  20% {\n    -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.7017, 0.4958);\n            animation-timing-function: cubic-bezier(0.5, 0, 0.7017, 0.4958);\n    -webkit-transform: translateX(0);\n            transform: translateX(0);\n  }\n  59.15% {\n    -webkit-animation-timing-function: cubic-bezier(0.3024, 0.3813, 0.55, 0.9563);\n            animation-timing-function: cubic-bezier(0.3024, 0.3813, 0.55, 0.9563);\n    -webkit-transform: translateX(83.671%);\n            transform: translateX(83.671%);\n  }\n  100% {\n    -webkit-transform: translateX(200.611%);\n            transform: translateX(200.611%);\n  }\n}\n@-webkit-keyframes indeterminate-primary-scale {\n  0% {\n    -webkit-transform: scaleX(0.08);\n            transform: scaleX(0.08);\n  }\n  36.65% {\n    -webkit-animation-timing-function: cubic-bezier(0.3347, 0.124, 0.7858, 1);\n            animation-timing-function: cubic-bezier(0.3347, 0.124, 0.7858, 1);\n    -webkit-transform: scaleX(0.08);\n            transform: scaleX(0.08);\n  }\n  69.15% {\n    -webkit-animation-timing-function: cubic-bezier(0.3347, 0.124, 0.7858, 1);\n            animation-timing-function: cubic-bezier(0.3347, 0.124, 0.7858, 1);\n    -webkit-transform: scaleX(0.6614);\n            transform: scaleX(0.6614);\n  }\n  100% {\n    -webkit-transform: scaleX(0.08);\n            transform: scaleX(0.08);\n  }\n}\n@keyframes indeterminate-primary-scale {\n  0% {\n    -webkit-transform: scaleX(0.08);\n            transform: scaleX(0.08);\n  }\n  36.65% {\n    -webkit-animation-timing-function: cubic-bezier(0.3347, 0.124, 0.7858, 1);\n            animation-timing-function: cubic-bezier(0.3347, 0.124, 0.7858, 1);\n    -webkit-transform: scaleX(0.08);\n            transform: scaleX(0.08);\n  }\n  69.15% {\n    -webkit-animation-timing-function: cubic-bezier(0.3347, 0.124, 0.7858, 1);\n            animation-timing-function: cubic-bezier(0.3347, 0.124, 0.7858, 1);\n    -webkit-transform: scaleX(0.6614);\n            transform: scaleX(0.6614);\n  }\n  100% {\n    -webkit-transform: scaleX(0.08);\n            transform: scaleX(0.08);\n  }\n}\n@-webkit-keyframes indeterminate-secondary {\n  0% {\n    -webkit-animation-timing-function: cubic-bezier(0.15, 0, 0.515, 0.4096);\n            animation-timing-function: cubic-bezier(0.15, 0, 0.515, 0.4096);\n    -webkit-transform: translateX(0);\n            transform: translateX(0);\n  }\n  25% {\n    -webkit-animation-timing-function: cubic-bezier(0.31, 0.284, 0.8, 0.7337);\n            animation-timing-function: cubic-bezier(0.31, 0.284, 0.8, 0.7337);\n    -webkit-transform: translateX(37.6519%);\n            transform: translateX(37.6519%);\n  }\n  48.35% {\n    -webkit-animation-timing-function: cubic-bezier(0.4, 0.627, 0.6, 0.902);\n            animation-timing-function: cubic-bezier(0.4, 0.627, 0.6, 0.902);\n    -webkit-transform: translateX(84.3861%);\n            transform: translateX(84.3861%);\n  }\n  100% {\n    -webkit-transform: translateX(160.2777%);\n            transform: translateX(160.2777%);\n  }\n}\n@keyframes indeterminate-secondary {\n  0% {\n    -webkit-animation-timing-function: cubic-bezier(0.15, 0, 0.515, 0.4096);\n            animation-timing-function: cubic-bezier(0.15, 0, 0.515, 0.4096);\n    -webkit-transform: translateX(0);\n            transform: translateX(0);\n  }\n  25% {\n    -webkit-animation-timing-function: cubic-bezier(0.31, 0.284, 0.8, 0.7337);\n            animation-timing-function: cubic-bezier(0.31, 0.284, 0.8, 0.7337);\n    -webkit-transform: translateX(37.6519%);\n            transform: translateX(37.6519%);\n  }\n  48.35% {\n    -webkit-animation-timing-function: cubic-bezier(0.4, 0.627, 0.6, 0.902);\n            animation-timing-function: cubic-bezier(0.4, 0.627, 0.6, 0.902);\n    -webkit-transform: translateX(84.3861%);\n            transform: translateX(84.3861%);\n  }\n  100% {\n    -webkit-transform: translateX(160.2777%);\n            transform: translateX(160.2777%);\n  }\n}\n@-webkit-keyframes indeterminate-secondary-scale {\n  0% {\n    -webkit-animation-timing-function: cubic-bezier(0.15, 0, 0.515, 0.4096);\n            animation-timing-function: cubic-bezier(0.15, 0, 0.515, 0.4096);\n    -webkit-transform: scaleX(0.08);\n            transform: scaleX(0.08);\n  }\n  19.15% {\n    -webkit-animation-timing-function: cubic-bezier(0.31, 0.284, 0.8, 0.7337);\n            animation-timing-function: cubic-bezier(0.31, 0.284, 0.8, 0.7337);\n    -webkit-transform: scaleX(0.4571);\n            transform: scaleX(0.4571);\n  }\n  44.15% {\n    -webkit-animation-timing-function: cubic-bezier(0.4, 0.627, 0.6, 0.902);\n            animation-timing-function: cubic-bezier(0.4, 0.627, 0.6, 0.902);\n    -webkit-transform: scaleX(0.727);\n            transform: scaleX(0.727);\n  }\n  100% {\n    -webkit-transform: scaleX(0.08);\n            transform: scaleX(0.08);\n  }\n}\n@keyframes indeterminate-secondary-scale {\n  0% {\n    -webkit-animation-timing-function: cubic-bezier(0.15, 0, 0.515, 0.4096);\n            animation-timing-function: cubic-bezier(0.15, 0, 0.515, 0.4096);\n    -webkit-transform: scaleX(0.08);\n            transform: scaleX(0.08);\n  }\n  19.15% {\n    -webkit-animation-timing-function: cubic-bezier(0.31, 0.284, 0.8, 0.7337);\n            animation-timing-function: cubic-bezier(0.31, 0.284, 0.8, 0.7337);\n    -webkit-transform: scaleX(0.4571);\n            transform: scaleX(0.4571);\n  }\n  44.15% {\n    -webkit-animation-timing-function: cubic-bezier(0.4, 0.627, 0.6, 0.902);\n            animation-timing-function: cubic-bezier(0.4, 0.627, 0.6, 0.902);\n    -webkit-transform: scaleX(0.727);\n            transform: scaleX(0.727);\n  }\n  100% {\n    -webkit-transform: scaleX(0.08);\n            transform: scaleX(0.08);\n  }\n}\n@-webkit-keyframes indeterminate-bar-fluent {\n  0% {\n    -webkit-transform: translateX(-100%);\n            transform: translateX(-100%);\n    -webkit-transform-origin: left;\n            transform-origin: left;\n  }\n  100% {\n    -webkit-transform: translateX(310%);\n            transform: translateX(310%);\n    -webkit-transform-origin: right;\n            transform-origin: right;\n  }\n}\n@keyframes indeterminate-bar-fluent {\n  0% {\n    -webkit-transform: translateX(-100%);\n            transform: translateX(-100%);\n    -webkit-transform-origin: left;\n            transform-origin: left;\n  }\n  100% {\n    -webkit-transform: translateX(310%);\n            transform: translateX(310%);\n    -webkit-transform-origin: right;\n            transform-origin: right;\n  }\n}\n@-webkit-keyframes indeterminate-bar-fluent-rtl {\n  0% {\n    -webkit-transform: translateX(-310%);\n            transform: translateX(-310%);\n    -webkit-transform-origin: right;\n            transform-origin: right;\n  }\n  100% {\n    -webkit-transform: translateX(100%);\n            transform: translateX(100%);\n    -webkit-transform-origin: left;\n            transform-origin: left;\n  }\n}\n@keyframes indeterminate-bar-fluent-rtl {\n  0% {\n    -webkit-transform: translateX(-310%);\n            transform: translateX(-310%);\n    -webkit-transform-origin: right;\n            transform-origin: right;\n  }\n  100% {\n    -webkit-transform: translateX(100%);\n            transform: translateX(100%);\n    -webkit-transform-origin: left;\n            transform-origin: left;\n  }\n}\n@-webkit-keyframes indeterminate-accordion {\n  0% {\n    stroke-dashoffset: calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * 2);\n    stroke-dasharray: calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * 9 / 10);\n  }\n  100% {\n    stroke-dashoffset: calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * 2 / 5);\n  }\n}\n@keyframes indeterminate-accordion {\n  0% {\n    stroke-dashoffset: calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * 2);\n    stroke-dasharray: calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * 9 / 10);\n  }\n  100% {\n    stroke-dashoffset: calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * 2 / 5);\n  }\n}\n@-webkit-keyframes indeterminate-accordion-rtl {\n  0% {\n    stroke-dashoffset: calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * -2);\n    stroke-dasharray: calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * 9 / 10);\n  }\n  100% {\n    stroke-dashoffset: calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * -2 / 5);\n  }\n}\n@keyframes indeterminate-accordion-rtl {\n  0% {\n    stroke-dashoffset: calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * -2);\n    stroke-dasharray: calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * 9 / 10);\n  }\n  100% {\n    stroke-dashoffset: calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * -2 / 5);\n  }\n}\n@-webkit-keyframes rotate-center {\n  0% {\n    -webkit-transform: rotate(0);\n            transform: rotate(0);\n  }\n  100% {\n    -webkit-transform: rotate(360deg);\n            transform: rotate(360deg);\n  }\n}\n@keyframes rotate-center {\n  0% {\n    -webkit-transform: rotate(0);\n            transform: rotate(0);\n  }\n  100% {\n    -webkit-transform: rotate(360deg);\n            transform: rotate(360deg);\n  }\n}\n:host {\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  font-family: var(--ig-font-family);\n  color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n}\n\n[part~=label] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  color: inherit;\n  font-weight: 600;\n}\n\n:host {\n  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n  --is-medium: min(\n      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n  );\n  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--ig-scrollbar-size);\n  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--ig-scrollbar-size);\n  height: var(--ig-scrollbar-size);\n  background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--ig-scrollbar-thumb-background);\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n\n:host {\n  --track-color: var(--ig-linear-bar-track-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --fill-color-default: var(--ig-linear-bar-fill-color-default, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --fill-color-danger: var(--ig-linear-bar-fill-color-danger, hsla(var(--ig-error-500), var(--ig-error-a)));\n  --fill-color-warning: var(--ig-linear-bar-fill-color-warning, hsla(var(--ig-warn-500), var(--ig-warn-a)));\n  --fill-color-info: var(--ig-linear-bar-fill-color-info, hsla(var(--ig-info-500), var(--ig-info-a)));\n  --fill-color-success: var(--ig-linear-bar-fill-color-success, hsla(var(--ig-success-500), var(--ig-success-a)));\n  --stripes-color: var(--ig-linear-bar-stripes-color, hsla(var(--ig-gray-50), 0.7));\n  --text-color: var(--ig-linear-bar-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --track-border-radius: var(--ig-linear-bar-track-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 0.5rem), 0.5rem));\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  width: 100%;\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: column;\n          flex-direction: column;\n  -webkit-box-flex: 1;\n      -ms-flex: 1 1 100%;\n          flex: 1 1 100%;\n  --track-size: 0.25rem;\n  --linear-animation-duration: 2000ms;\n}\n\n:host([dir=rtl][indeterminate]) [part~=track] {\n  -webkit-transform: rotateY(180deg);\n          transform: rotateY(180deg);\n}\n\n[part~=track] {\n  border-radius: var(--track-border-radius);\n  position: relative;\n  width: inherit;\n  height: var(--track-size);\n  background: hsla(var(--ig-gray-300), var(--ig-gray-a));\n  overflow: hidden;\n  z-index: 0;\n}\n\n[part~=fill] {\n  -webkit-transition: width var(--duration) linear, background-color var(--duration) linear;\n  transition: width var(--duration) linear, background-color var(--duration) linear;\n  position: relative;\n  height: inherit;\n}\n\n[part~=indeterminate],\n[part~=\"indeterminate secondary\"] {\n  width: 100% !important;\n  height: inherit;\n  position: absolute;\n  background: transparent;\n}\n[part~=indeterminate]::after,\n[part~=\"indeterminate secondary\"]::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  inset-inline-start: 0;\n  width: inherit;\n  height: inherit;\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden;\n}\n\n[part~=indeterminate]:not([part~=secondary]) {\n  -webkit-transform: scale3d(0, 1, 1);\n          transform: scale3d(0, 1, 1);\n  -webkit-animation: indeterminate-primary var(--linear-animation-duration) infinite linear;\n          animation: indeterminate-primary var(--linear-animation-duration) infinite linear;\n  left: -145.1666%;\n}\n[part~=indeterminate]:not([part~=secondary])::after {\n  -webkit-animation: indeterminate-primary-scale var(--linear-animation-duration) infinite linear;\n          animation: indeterminate-primary-scale var(--linear-animation-duration) infinite linear;\n}\n\n[part~=secondary] {\n  -webkit-animation: indeterminate-secondary var(--linear-animation-duration) infinite linear;\n          animation: indeterminate-secondary var(--linear-animation-duration) infinite linear;\n  left: -54.8888%;\n}\n[part~=secondary]::after {\n  -webkit-animation: indeterminate-secondary-scale var(--linear-animation-duration) infinite linear;\n          animation: indeterminate-secondary-scale var(--linear-animation-duration) infinite linear;\n  width: 100%;\n  height: inherit;\n}\n\n[part~=value] {\n  margin: 0;\n  color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n  font-size: 0.875em;\n  font-weight: 600;\n}\n\n[part~=primary]:not([part~=indeterminate]) {\n  background-color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n\n[part~=primary]::after {\n  background-color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n\n[part~=striped][part~=primary]:not([part~=indeterminate]) {\n  width: 100%;\n  height: 100%;\n  background: hsla(var(--ig-primary-500), var(--ig-primary-a)) repeating-linear-gradient(-45deg, hsla(var(--ig-primary-500), var(--ig-primary-a)), hsla(var(--ig-primary-500), var(--ig-primary-a)) 1rem, hsla(var(--ig-gray-50), 0.7) 1rem, hsla(var(--ig-gray-50), 0.7) 2rem);\n}\n\n[part~=striped][part~=primary]::after {\n  background: hsla(var(--ig-primary-500), var(--ig-primary-a)) repeating-linear-gradient(-45deg, hsla(var(--ig-primary-500), var(--ig-primary-a)), hsla(var(--ig-primary-500), var(--ig-primary-a)) 1rem, hsla(var(--ig-gray-50), 0.7) 1rem, hsla(var(--ig-gray-50), 0.7) 2rem);\n}\n\n[part~=danger]:not([part~=indeterminate]) {\n  background-color: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n\n[part~=danger]::after {\n  background-color: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n\n[part~=striped][part~=danger]:not([part~=indeterminate]) {\n  background: hsla(var(--ig-error-500), var(--ig-error-a)) repeating-linear-gradient(-45deg, hsla(var(--ig-error-500), var(--ig-error-a)), hsla(var(--ig-error-500), var(--ig-error-a)) 1rem, hsla(var(--ig-gray-50), 0.7) 1rem, hsla(var(--ig-gray-50), 0.7) 2rem);\n}\n\n[part~=striped][part~=danger]::after {\n  background: hsla(var(--ig-error-500), var(--ig-error-a)) repeating-linear-gradient(-45deg, hsla(var(--ig-error-500), var(--ig-error-a)), hsla(var(--ig-error-500), var(--ig-error-a)) 1rem, hsla(var(--ig-gray-50), 0.7) 1rem, hsla(var(--ig-gray-50), 0.7) 2rem);\n}\n\n[part~=warning]:not([part~=indeterminate]) {\n  background-color: hsla(var(--ig-warn-500), var(--ig-warn-a));\n}\n\n[part~=warning]::after {\n  background-color: hsla(var(--ig-warn-500), var(--ig-warn-a));\n}\n\n[part~=striped][part~=warning]:not([part~=indeterminate]) {\n  background: hsla(var(--ig-warn-500), var(--ig-warn-a)) repeating-linear-gradient(-45deg, hsla(var(--ig-warn-500), var(--ig-warn-a)), hsla(var(--ig-warn-500), var(--ig-warn-a)) 1rem, hsla(var(--ig-gray-50), 0.7) 1rem, hsla(var(--ig-gray-50), 0.7) 2rem);\n}\n\n[part~=striped][part~=warning]::after {\n  background: hsla(var(--ig-warn-500), var(--ig-warn-a)) repeating-linear-gradient(-45deg, hsla(var(--ig-warn-500), var(--ig-warn-a)), hsla(var(--ig-warn-500), var(--ig-warn-a)) 1rem, hsla(var(--ig-gray-50), 0.7) 1rem, hsla(var(--ig-gray-50), 0.7) 2rem);\n}\n\n[part~=info]:not([part~=indeterminate]) {\n  background-color: hsla(var(--ig-info-500), var(--ig-info-a));\n}\n\n[part~=info]::after {\n  background-color: hsla(var(--ig-info-500), var(--ig-info-a));\n}\n\n[part~=striped][part~=info]:not([part~=indeterminate]) {\n  background: hsla(var(--ig-info-500), var(--ig-info-a)) repeating-linear-gradient(-45deg, hsla(var(--ig-info-500), var(--ig-info-a)), hsla(var(--ig-info-500), var(--ig-info-a)) 1rem, hsla(var(--ig-gray-50), 0.7) 1rem, hsla(var(--ig-gray-50), 0.7) 2rem);\n}\n\n[part~=striped][part~=info]::after {\n  background: hsla(var(--ig-info-500), var(--ig-info-a)) repeating-linear-gradient(-45deg, hsla(var(--ig-info-500), var(--ig-info-a)), hsla(var(--ig-info-500), var(--ig-info-a)) 1rem, hsla(var(--ig-gray-50), 0.7) 1rem, hsla(var(--ig-gray-50), 0.7) 2rem);\n}\n\n[part~=success]:not([part~=indeterminate]) {\n  background-color: hsla(var(--ig-success-500), var(--ig-success-a));\n}\n\n[part~=success]::after {\n  background-color: hsla(var(--ig-success-500), var(--ig-success-a));\n}\n\n[part~=striped][part~=success]:not([part~=indeterminate]) {\n  background: hsla(var(--ig-success-500), var(--ig-success-a)) repeating-linear-gradient(-45deg, hsla(var(--ig-success-500), var(--ig-success-a)), hsla(var(--ig-success-500), var(--ig-success-a)) 1rem, hsla(var(--ig-gray-50), 0.7) 1rem, hsla(var(--ig-gray-50), 0.7) 2rem);\n}\n\n[part~=striped][part~=success]::after {\n  background: hsla(var(--ig-success-500), var(--ig-success-a)) repeating-linear-gradient(-45deg, hsla(var(--ig-success-500), var(--ig-success-a)), hsla(var(--ig-success-500), var(--ig-success-a)) 1rem, hsla(var(--ig-gray-50), 0.7) 1rem, hsla(var(--ig-gray-50), 0.7) 2rem);\n}\n\n:host([label-align=top]) [part~=label],\n:host([label-align=top-start]) [part~=label],\n:host([label-align=top-end]) [part~=label] {\n  -webkit-box-ordinal-group: 0;\n      -ms-flex-order: -1;\n          order: -1;\n}\n\n:host([label-align=top-start]) [part~=label],\n:host([label-align=bottom-start]) [part~=label],\n:host([label-align=start]) [part~=label] {\n  -ms-flex-item-align: start;\n      align-self: flex-start;\n}\n\n:host([label-align=bottom-end]) [part~=label],\n:host([label-align=top-end]) [part~=label],\n:host([label-align=end]) [part~=label] {\n  -ms-flex-item-align: end;\n      align-self: flex-end;\n}\n\n:host([label-align=top]) [part~=label],\n:host([label-align=bottom]) [part~=label] {\n  -ms-flex-item-align: center;\n      align-self: center;\n}\n\n[part~=hidden] {\n  display: none;\n}`;\n"]}

package/components/progress/themes/linear/linear.progress.indigo.css.js

@@ -1,37 +1,5 @@
 import { css } from 'lit';
 export const styles = css `:host {
-  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);
-  --is-medium: min(
-      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),
-      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)
-  );
-  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);
-  position: relative;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  scrollbar-width: var(--ig-scrollbar-size);
-  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);
-}
-:host *,
-:host *::before,
-:host *::after {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-}
-:host ::-webkit-scrollbar {
-  width: var(--ig-scrollbar-size);
-  height: var(--ig-scrollbar-size);
-  background: var(--ig-scrollbar-track-background);
-}
-:host ::-webkit-scrollbar-thumb {
-  background: var(--ig-scrollbar-thumb-background);
-}
-
-:host([hidden]),
-[hidden] {
-  display: none !important;
-}
-:host {
   --track-color: var(--ig-linear-bar-track-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
   --fill-color-default: var(--ig-linear-bar-fill-color-default, hsla(var(--ig-primary-500), var(--ig-primary-a)));
   --fill-color-danger: var(--ig-linear-bar-fill-color-danger, hsla(var(--ig-error-500), var(--ig-error-a)));

package/components/progress/themes/linear/linear.progress.indigo.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"linear.progress.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/progress/themes/linear/linear.progress.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkDvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n  --is-medium: min(\n      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n  );\n  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--ig-scrollbar-size);\n  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--ig-scrollbar-size);\n  height: var(--ig-scrollbar-size);\n  background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--ig-scrollbar-thumb-background);\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n:host {\n  --track-color: var(--ig-linear-bar-track-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --fill-color-default: var(--ig-linear-bar-fill-color-default, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --fill-color-danger: var(--ig-linear-bar-fill-color-danger, hsla(var(--ig-error-500), var(--ig-error-a)));\n  --fill-color-warning: var(--ig-linear-bar-fill-color-warning, hsla(var(--ig-warn-500), var(--ig-warn-a)));\n  --fill-color-info: var(--ig-linear-bar-fill-color-info, hsla(var(--ig-info-500), var(--ig-info-a)));\n  --fill-color-success: var(--ig-linear-bar-fill-color-success, hsla(var(--ig-success-500), var(--ig-success-a)));\n  --stripes-color: var(--ig-linear-bar-stripes-color, hsla(var(--ig-gray-50), 0.45));\n  --text-color: var(--ig-linear-bar-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --track-border-radius: var(--ig-linear-bar-track-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 0.5rem), 0.5rem));\n}\n\n[part~=track] {\n  border-radius: var(--track-border-radius);\n}\n\n[part~=striped]:not([part~=indeterminate]) {\n  background: hsla(var(--ig-secondary-500), var(--ig-secondary-a)) repeating-linear-gradient(45deg, hsla(var(--ig-secondary-500), var(--ig-secondary-a)), hsla(var(--ig-secondary-500), var(--ig-secondary-a)) 0.375rem, hsla(var(--ig-gray-50), 0.7) 0.375rem, hsla(var(--ig-gray-50), 0.7) 0.875rem);\n}`;\n"]}
+{"version":3,"file":"linear.progress.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/progress/themes/linear/linear.progress.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;EAkBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --track-color: var(--ig-linear-bar-track-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --fill-color-default: var(--ig-linear-bar-fill-color-default, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --fill-color-danger: var(--ig-linear-bar-fill-color-danger, hsla(var(--ig-error-500), var(--ig-error-a)));\n  --fill-color-warning: var(--ig-linear-bar-fill-color-warning, hsla(var(--ig-warn-500), var(--ig-warn-a)));\n  --fill-color-info: var(--ig-linear-bar-fill-color-info, hsla(var(--ig-info-500), var(--ig-info-a)));\n  --fill-color-success: var(--ig-linear-bar-fill-color-success, hsla(var(--ig-success-500), var(--ig-success-a)));\n  --stripes-color: var(--ig-linear-bar-stripes-color, hsla(var(--ig-gray-50), 0.45));\n  --text-color: var(--ig-linear-bar-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --track-border-radius: var(--ig-linear-bar-track-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 0.5rem), 0.5rem));\n}\n\n[part~=track] {\n  border-radius: var(--track-border-radius);\n}\n\n[part~=striped]:not([part~=indeterminate]) {\n  background: hsla(var(--ig-secondary-500), var(--ig-secondary-a)) repeating-linear-gradient(45deg, hsla(var(--ig-secondary-500), var(--ig-secondary-a)), hsla(var(--ig-secondary-500), var(--ig-secondary-a)) 0.375rem, hsla(var(--ig-gray-50), 0.7) 0.375rem, hsla(var(--ig-gray-50), 0.7) 0.875rem);\n}`;\n"]}

package/components/radio/radio.d.ts

@@ -1,11 +1,12 @@
 import { LitElement } from 'lit';
 import { Constructor } from '../common/mixins/constructor.js';
+import { Validator } from '../common/validators.js';
 export interface IgcRadioEventMap {
     igcChange: CustomEvent<boolean>;
     igcFocus: CustomEvent<void>;
     igcBlur: CustomEvent<void>;
 }
-declare const IgcRadioComponent_base: import("../common/mixins/constructor.js").AbstractConstructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcRadioEventMap>> & Constructor<LitElement>;
+declare const IgcRadioComponent_base: Constructor<import("../common/mixins/form-associated-required.js").FormRequiredInterface & import("../common/mixins/form-associated.js").FormAssociatedElementInterface> & import("../common/mixins/constructor.js").AbstractConstructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcRadioEventMap>> & Constructor<LitElement>;
 /**
  * @element igc-radio
  *
@@ -23,6 +24,7 @@ export default class IgcRadioComponent extends IgcRadioComponent_base {
     static readonly tagName = "igc-radio";
     protected static styles: import("lit").CSSResult;
     private static readonly increment;
+    protected validators: Validator<this>[];
     private inputId;
     private labelId;
     protected input: HTMLInputElement;
@@ -30,72 +32,46 @@ export default class IgcRadioComponent extends IgcRadioComponent_base {
     private _tabIndex;
     private focused;
     protected hideLabel: boolean;
-    /**
-     * The name attribute of the control.
-     * @attr
-     */
-    name: string;
+    private get radioGroup();
+    protected setDefaultValue(): void;
     /**
      * The value attribute of the control.
      * @attr
      */
     value: string;
-    /**
-     * Makes the control a required field.
-     * @attr
-     */
-    required: boolean;
     /**
      * The checked state of the control.
      * @attr
      */
     checked: boolean;
-    /**
-     * Disables the radio control.
-     * @attr
-     */
-    disabled: boolean;
-    /**
-     * Controls the validity of the control.
-     * @attr
-     */
-    invalid: boolean;
     /**
      * The label position of the radio control.
      * @attr label-position
      */
     labelPosition: 'before' | 'after';
-    /**
-     * Sets the aria-labelledby attribute for the radio control.
-     * @attr
-     */
-    ariaLabelledby: string;
+    constructor();
     /** Simulates a click on the radio control. */
     click(): void;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    protected handleKeyUp(): void;
     /** Sets focus on the radio control. */
     focus(options?: FocusOptions): void;
     /** Removes focus from the radio control. */
     blur(): void;
-    /** Checks for validity of the control and shows the browser message if it invalid. */
-    reportValidity(): boolean;
-    /** Checks for validity of the control and emits the invalid event if it invalid. */
-    checkValidity(): boolean;
     /**
      * Sets a custom validation message for the control.
      * As long as `message` is not empty, the control is considered invalid.
      */
     setCustomValidity(message: string): void;
+    protected requiredChange(): void;
+    private _updateCheckedState;
+    private _updateUncheckedState;
+    protected checkedChanged(): void;
     protected handleMouseDown(event: PointerEvent): void;
     protected handleClick(): void;
     protected handleBlur(): void;
     protected handleFocus(): void;
-    protected handleChange(): void;
-    protected getSiblings(): IgcRadioComponent[];
-    protected getAllInGroup(): IgcRadioComponent[];
-    protected firstUpdated(): Promise<void>;
+    protected handleKeyUp(): void;
+    protected handleKeyDown(event: KeyboardEvent): void;
+    protected handleSlotChange(): void;
     protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/components/radio/radio.js

@@ -14,57 +14,119 @@ import { alternateName } from '../common/decorators/alternateName.js';
 import { blazorTwoWayBind } from '../common/decorators/blazorTwoWayBind.js';
 import { watch } from '../common/decorators/watch.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
-import { createCounter, partNameMap } from '../common/util.js';
+import { any, createCounter, isLTR, partNameMap, wrap, } from '../common/util.js';
 import { styles } from './themes/light/radio.base.css.js';
 import { styles as bootstrap } from './themes/light/radio.bootstrap.css.js';
 import { styles as fluent } from './themes/light/radio.fluent.css.js';
 import { styles as indigo } from './themes/light/radio.indigo.css.js';
 import { styles as material } from './themes/light/radio.material.css.js';
-let IgcRadioComponent = IgcRadioComponent_1 = class IgcRadioComponent extends EventEmitterMixin(LitElement) {
+import { FormAssociatedRequiredMixin } from '../common/mixins/form-associated-required.js';
+import messages from '../common/localization/validation-en.js';
+const arrowKeys = new Set(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']);
+const arrowKeyDelta = new Map(Object.entries({
+    ArrowUp: () => -1,
+    ArrowLeft: (ltr) => (ltr ? -1 : 1),
+    ArrowRight: (ltr) => (ltr ? 1 : -1),
+    ArrowDown: () => 1,
+}));
+let IgcRadioComponent = IgcRadioComponent_1 = class IgcRadioComponent extends FormAssociatedRequiredMixin(EventEmitterMixin(LitElement)) {
+    get radioGroup() {
+        const radios = Array.from(document.querySelectorAll(`${this.tagName}[name='${this.name}']`));
+        const nonDisabled = [];
+        const siblings = [];
+        for (const radio of radios) {
+            if (!radio.disabled) {
+                nonDisabled.push(radio);
+            }
+            if (!radio.isSameNode(this)) {
+                siblings.push(radio);
+            }
+        }
+        return { radios, nonDisabled, siblings };
+    }
+    setDefaultValue() {
+        const firstChecked = this.radioGroup.radios.find((r) => r.checked);
+        if (firstChecked && firstChecked.isSameNode(this)) {
+            this._defaultValue = true;
+        }
+        else {
+            this._defaultValue = false;
+        }
+    }
     constructor() {
-        super(...arguments);
+        super();
+        this.validators = [
+            {
+                key: 'valueMissing',
+                message: messages.required,
+                isValid: () => {
+                    const { radios } = this.radioGroup;
+                    return any(radios, 'required') ? any(radios, 'checked') : true;
+                },
+            },
+        ];
         this.inputId = `radio-${IgcRadioComponent_1.increment()}`;
         this.labelId = `radio-label-${this.inputId}`;
         this._tabIndex = 0;
         this.focused = false;
         this.hideLabel = false;
-        this.required = false;
         this.checked = false;
-        this.disabled = false;
-        this.invalid = false;
         this.labelPosition = 'after';
+        this.addEventListener('keyup', this.handleKeyUp);
+        this.addEventListener('keydown', this.handleKeyDown);
     }
     click() {
         this.input.click();
     }
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener('keyup', this.handleKeyUp);
-    }
-    disconnectedCallback() {
-        this.removeEventListener('keyup', this.handleKeyUp);
-        super.disconnectedCallback();
-    }
-    handleKeyUp() {
-        if (!this.focused) {
-            this.focused = true;
-        }
-    }
     focus(options) {
         this.input.focus(options);
     }
     blur() {
         this.input.blur();
     }
-    reportValidity() {
-        return this.input.reportValidity();
+    setCustomValidity(message) {
+        const { radios } = this.radioGroup;
+        for (const radio of radios) {
+            radio.updateValidity(message);
+            radio.setInvalidState();
+        }
     }
-    checkValidity() {
-        return this.input.checkValidity();
+    requiredChange() {
+        const { radios } = this.radioGroup;
+        for (const radio of radios) {
+            radio.updateValidity();
+            radio.setInvalidState();
+        }
     }
-    setCustomValidity(message) {
-        this.input.setCustomValidity(message);
-        this.invalid = !this.input.checkValidity();
+    _updateCheckedState() {
+        var _a;
+        const siblings = this.radioGroup.siblings;
+        this.setFormValue(this.value || 'on');
+        this.updateValidity();
+        this.setInvalidState();
+        this._tabIndex = 0;
+        (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus();
+        for (const radio of siblings) {
+            radio.checked = false;
+            radio._tabIndex = -1;
+            radio.updateValidity();
+            radio.setInvalidState();
+        }
+    }
+    _updateUncheckedState() {
+        const siblings = this.radioGroup.siblings;
+        this.setFormValue(null);
+        this.updateValidity();
+        this.setInvalidState();
+        if (this.hasUpdated) {
+            this._tabIndex = -1;
+        }
+        for (const radio of siblings) {
+            radio.updateValidity();
+        }
+    }
+    checkedChanged() {
+        this.checked ? this._updateCheckedState() : this._updateUncheckedState();
     }
     handleMouseDown(event) {
         event.preventDefault();
@@ -73,6 +135,7 @@ let IgcRadioComponent = IgcRadioComponent_1 = class IgcRadioComponent extends Ev
     }
     handleClick() {
         this.checked = true;
+        this.emitEvent('igcChange', { detail: this.checked });
     }
     handleBlur() {
         this.emitEvent('igcBlur');
@@ -81,79 +144,66 @@ let IgcRadioComponent = IgcRadioComponent_1 = class IgcRadioComponent extends Ev
     handleFocus() {
         this.emitEvent('igcFocus');
     }
-    handleChange() {
-        if (this.checked) {
-            this.getSiblings().forEach((radio) => {
-                radio.checked = false;
-                radio._tabIndex = -1;
-            });
-            this.input.focus();
-            this._tabIndex = 0;
-            this.emitEvent('igcChange', { detail: this.checked });
-        }
-        else {
-            if (this.required) {
-                this.required = false;
-                this.getAllInGroup()[0].required = true;
-            }
+    handleKeyUp() {
+        if (!this.focused) {
+            this.focused = true;
         }
     }
-    getSiblings() {
-        return this.getAllInGroup().filter((radio) => radio.name === this.name && radio !== this);
-    }
-    getAllInGroup() {
-        const group = this.closest('igc-radio-group');
-        if (!group)
-            return [];
-        return Array.from(group.querySelectorAll('igc-radio'));
+    handleKeyDown(event) {
+        if (!arrowKeys.has(event.key))
+            return;
+        event.preventDefault();
+        const { nonDisabled } = this.radioGroup;
+        const LTR = isLTR(this);
+        const idx = wrap(0, nonDisabled.length - 1, nonDisabled.indexOf(this) + arrowKeyDelta.get(event.key)(LTR));
+        const target = nonDisabled[idx];
+        target.focus();
+        target.checked = true;
+        target.emitEvent('igcChange', { detail: target.checked });
     }
-    async firstUpdated() {
-        if (this.label.length === 0) {
-            this.hideLabel = true;
-        }
-        await this.updateComplete;
+    handleSlotChange() {
+        this.hideLabel = this.label.length < 1;
     }
     render() {
+        const labelledBy = this.getAttribute('aria-labelledby');
         return html `
       <label
-        part="${partNameMap({
+        part=${partNameMap({
             base: true,
             checked: this.checked,
             focused: this.focused,
-        })}"
-        for="${this.inputId}"
-        @pointerdown="${this.handleMouseDown}"
+        })}
+        for=${this.inputId}
+        @pointerdown=${this.handleMouseDown}
       >
         <input
-          id="${this.inputId}"
+          id=${this.inputId}
           type="radio"
-          name="${ifDefined(this.name)}"
-          value="${ifDefined(this.value)}"
-          .required="${this.required}"
-          .disabled="${this.disabled}"
-          .checked="${live(this.checked)}"
+          name=${ifDefined(this.name)}
+          value=${ifDefined(this.value)}
+          .required=${this.required}
+          .disabled=${this.disabled}
+          .checked=${live(this.checked)}
           tabindex=${this._tabIndex}
-          aria-checked="${this.checked ? 'true' : 'false'}"
-          aria-disabled="${this.disabled ? 'true' : 'false'}"
-          aria-labelledby="${this.ariaLabelledby
-            ? this.ariaLabelledby
-            : this.labelId}"
-          @click="${this.handleClick}"
-          @blur="${this.handleBlur}"
-          @focus="${this.handleFocus}"
+          aria-checked=${this.checked ? 'true' : 'false'}
+          aria-disabled=${this.disabled ? 'true' : 'false'}
+          aria-labelledby=${labelledBy ? labelledBy : this.labelId}
+          @click=${this.handleClick}
+          @blur=${this.handleBlur}
+          @focus=${this.handleFocus}
         />
-        <span part="${partNameMap({ control: true, checked: this.checked })}">
+        <span part=${partNameMap({ control: true, checked: this.checked })}>
           <span
-            .hidden="${this.disabled}"
-            part="${partNameMap({ ripple: true, checked: this.checked })}"
+            .hidden=${this.disabled}
+            part=${partNameMap({ ripple: true, checked: this.checked })}
           ></span>
         </span>
         <span
-          .hidden="${this.hideLabel}"
-          part="${partNameMap({ label: true, checked: this.checked })}"
-          id="${this.labelId}"
+          .hidden=${this.hideLabel}
+          part=${partNameMap({ label: true, checked: this.checked })}
+          id=${this.labelId}
         >
-          <slot></slot>
+          <slot @slotchange=${this.handleSlotChange}></slot>
         </span>
       </label>
     `;
@@ -163,7 +213,7 @@ IgcRadioComponent.tagName = 'igc-radio';
 IgcRadioComponent.styles = styles;
 IgcRadioComponent.increment = createCounter();
 __decorate([
-    query('input[type="radio"]', true)
+    query('input[type="radio"]')
 ], IgcRadioComponent.prototype, "input", void 0);
 __decorate([
     queryAssignedNodes({ flatten: true })
@@ -177,31 +227,16 @@ __decorate([
 __decorate([
     state()
 ], IgcRadioComponent.prototype, "hideLabel", void 0);
-__decorate([
-    property()
-], IgcRadioComponent.prototype, "name", void 0);
 __decorate([
     property()
 ], IgcRadioComponent.prototype, "value", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], IgcRadioComponent.prototype, "required", void 0);
 __decorate([
     property({ type: Boolean }),
     blazorTwoWayBind('igcChange', 'detail')
 ], IgcRadioComponent.prototype, "checked", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], IgcRadioComponent.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], IgcRadioComponent.prototype, "invalid", void 0);
 __decorate([
     property({ reflect: true, attribute: 'label-position' })
 ], IgcRadioComponent.prototype, "labelPosition", void 0);
-__decorate([
-    property({ reflect: true, attribute: 'aria-labelledby' })
-], IgcRadioComponent.prototype, "ariaLabelledby", void 0);
 __decorate([
     alternateName('focusComponent')
 ], IgcRadioComponent.prototype, "focus", null);
@@ -209,8 +244,11 @@ __decorate([
     alternateName('blurComponent')
 ], IgcRadioComponent.prototype, "blur", null);
 __decorate([
-    watch('checked', { waitUntilFirstUpdate: true })
-], IgcRadioComponent.prototype, "handleChange", null);
+    watch('required', { waitUntilFirstUpdate: true })
+], IgcRadioComponent.prototype, "requiredChange", null);
+__decorate([
+    watch('checked')
+], IgcRadioComponent.prototype, "checkedChanged", null);
 IgcRadioComponent = IgcRadioComponent_1 = __decorate([
     themes({ material, bootstrap, fluent, indigo })
 ], IgcRadioComponent);