@aquera/nile-elements 0.1.39-beta-1.0 → 0.1.39-beta-1.2

package/dist/src/nile-tree-item/nile-tree-item.css.js

@@ -11,6 +11,9 @@ import { css } from 'lit';
 export const styles = css `
   :host {
     box-sizing: border-box;
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   :host *,

package/dist/src/nile-tree-item/nile-tree-item.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-tree-item.css.js","sourceRoot":"","sources":["../../../src/nile-tree-item/nile-tree-item.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmKxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * TreeItem CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    display: block;\n    outline: 0;\n    z-index: 0;\n  }\n\n  :host(:focus) {\n    outline: none;\n  }\n\n  slot:not([name])::slotted(nile-icon) {\n    margin-inline-end: var(--nile-spacing-md);\n  }\n\n  .tree-item {\n    position: relative;\n    display: flex;\n    align-items: stretch;\n    flex-direction: column;\n    color: var(--nile-colors-neutral-700);\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .tree-item__checkbox {\n    pointer-events: none;\n  }\n\n  .tree-item__expand-button,\n  .tree-item__checkbox,\n  .tree-item__label {\n    font-family: var(--nile-font-family-serif);\n    font-size: var(--nile-type-scale-4);\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .tree-item__checkbox::part(base) {\n    display: flex;\n    align-items: center;\n  }\n\n  .tree-item__indentation {\n    display: block;\n    width: 1em;\n    flex-shrink: 0;\n  }\n\n  .tree-item__expand-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: content-box;\n    color: var(--nile-colors-neutral-500);\n    padding: var(--nile-spacing-md);\n    width: 1rem;\n    height: 1rem;\n    flex-shrink: 0;\n    cursor: pointer;\n  }\n\n  .tree-item__expand-button {\n    transition: 250ms rotate ease;\n  }\n\n  .tree-item--expanded .tree-item__expand-button {\n    rotate: 90deg;\n  }\n\n  .tree-item--expanded.tree-item--rtl .tree-item__expand-button {\n    rotate: -90deg;\n  }\n\n  .tree-item--expanded slot[name='expand-icon'],\n  .tree-item:not(.tree-item--expanded) slot[name='collapse-icon'] {\n    display: none;\n  }\n\n  .tree-item:not(.tree-item--has-expand-button) .tree-item__expand-icon-slot {\n    display: none;\n  }\n\n  .tree-item__expand-button--visible {\n    cursor: pointer;\n  }\n\n  .tree-item__item {\n    display: flex;\n    align-items: center;\n    border-inline-start: solid 3px transparent;\n  }\n\n  .tree-item--disabled .tree-item__item {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n\n  :host(:focus-visible) .tree-item__item {\n    outline: solid 3px var(--nile-colors-neutral-500);\n    outline-offset: 1px;\n    z-index: 2;\n  }\n\n  :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {\n    background-color: var(--nile-colors-neutral-700);\n    border-inline-start-color: var(--nile-colors-primary-700);\n  }\n\n  :host(:not([aria-disabled='true'])) .tree-item__expand-button {\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .tree-item__label {\n    display: flex;\n    align-items: center;\n    transition: 150ms color;\n  }\n\n  .tree-item__children {\n    display: block;\n    font-size: calc(1em + var(--indent-size, 1rem));\n  }\n\n  /* Indentation lines */\n  .tree-item__children {\n    position: relative;\n  }\n\n  .tree-item__children::before {\n    content: '';\n    position: absolute;\n    top: var(--indent-guide-offset);\n    bottom: var(--indent-guide-offset);\n    left: calc(1em - (var(--indent-guide-width) / 2) - 1px);\n    border-inline-end: var(--indent-guide-width) var(--indent-guide-style) var(--indent-guide-color);\n    z-index: 1;\n  }\n\n  .tree-item--rtl .tree-item__children::before {\n    left: auto;\n    right: 1em;\n  }\n\n  @media (forced-colors: active) {\n    :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {\n      outline: dashed 1px SelectedItem;\n    }\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-tree-item.css.js","sourceRoot":"","sources":["../../../src/nile-tree-item/nile-tree-item.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsKxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * TreeItem CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    display: block;\n    outline: 0;\n    z-index: 0;\n  }\n\n  :host(:focus) {\n    outline: none;\n  }\n\n  slot:not([name])::slotted(nile-icon) {\n    margin-inline-end: var(--nile-spacing-md);\n  }\n\n  .tree-item {\n    position: relative;\n    display: flex;\n    align-items: stretch;\n    flex-direction: column;\n    color: var(--nile-colors-neutral-700);\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .tree-item__checkbox {\n    pointer-events: none;\n  }\n\n  .tree-item__expand-button,\n  .tree-item__checkbox,\n  .tree-item__label {\n    font-family: var(--nile-font-family-serif);\n    font-size: var(--nile-type-scale-4);\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .tree-item__checkbox::part(base) {\n    display: flex;\n    align-items: center;\n  }\n\n  .tree-item__indentation {\n    display: block;\n    width: 1em;\n    flex-shrink: 0;\n  }\n\n  .tree-item__expand-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: content-box;\n    color: var(--nile-colors-neutral-500);\n    padding: var(--nile-spacing-md);\n    width: 1rem;\n    height: 1rem;\n    flex-shrink: 0;\n    cursor: pointer;\n  }\n\n  .tree-item__expand-button {\n    transition: 250ms rotate ease;\n  }\n\n  .tree-item--expanded .tree-item__expand-button {\n    rotate: 90deg;\n  }\n\n  .tree-item--expanded.tree-item--rtl .tree-item__expand-button {\n    rotate: -90deg;\n  }\n\n  .tree-item--expanded slot[name='expand-icon'],\n  .tree-item:not(.tree-item--expanded) slot[name='collapse-icon'] {\n    display: none;\n  }\n\n  .tree-item:not(.tree-item--has-expand-button) .tree-item__expand-icon-slot {\n    display: none;\n  }\n\n  .tree-item__expand-button--visible {\n    cursor: pointer;\n  }\n\n  .tree-item__item {\n    display: flex;\n    align-items: center;\n    border-inline-start: solid 3px transparent;\n  }\n\n  .tree-item--disabled .tree-item__item {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n\n  :host(:focus-visible) .tree-item__item {\n    outline: solid 3px var(--nile-colors-neutral-500);\n    outline-offset: 1px;\n    z-index: 2;\n  }\n\n  :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {\n    background-color: var(--nile-colors-neutral-700);\n    border-inline-start-color: var(--nile-colors-primary-700);\n  }\n\n  :host(:not([aria-disabled='true'])) .tree-item__expand-button {\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .tree-item__label {\n    display: flex;\n    align-items: center;\n    transition: 150ms color;\n  }\n\n  .tree-item__children {\n    display: block;\n    font-size: calc(1em + var(--indent-size, 1rem));\n  }\n\n  /* Indentation lines */\n  .tree-item__children {\n    position: relative;\n  }\n\n  .tree-item__children::before {\n    content: '';\n    position: absolute;\n    top: var(--indent-guide-offset);\n    bottom: var(--indent-guide-offset);\n    left: calc(1em - (var(--indent-guide-width) / 2) - 1px);\n    border-inline-end: var(--indent-guide-width) var(--indent-guide-style) var(--indent-guide-color);\n    z-index: 1;\n  }\n\n  .tree-item--rtl .tree-item__children::before {\n    left: auto;\n    right: 1em;\n  }\n\n  @media (forced-colors: active) {\n    :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {\n      outline: dashed 1px SelectedItem;\n    }\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-vertical-stepper-item/nile-vertical-stepper-item.css.js

@@ -15,6 +15,9 @@ export const styles = css `
 		--bulletin--dot--seperation:30%;
 		--min-line-container-height:25px;
 		--lines-thickness: 1px;
+		-webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
 	}
 
 	.stepper__item {

package/dist/src/nile-vertical-stepper-item/nile-vertical-stepper-item.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-vertical-stepper-item.css.js","sourceRoot":"","sources":["../../../src/nile-vertical-stepper-item/nile-vertical-stepper-item.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiJxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * VerticalStepperItem CSS\n */\nexport const styles = css`\n\t:host {\n\t\t--vertical-stepper-flex-val:1;\n\t\tflex-grow:var(--vertical-stepper-flex-val);\n\t\t--bulletin--dot--seperation:30%;\n\t\t--min-line-container-height:25px;\n\t\t--lines-thickness: 1px;\n\t}\n\n\t.stepper__item {\n\t\tdisplay:flex;\n\t\tcolumn-gap:var(--item-spacing);\n\t\theight: 100%;\n\t}\n\n\t.stepper__item--sm {\n\t\t--item-spacing: var(--nile-spacing-md, var(--ng-spacing-md));\n\t\t--stepper-item-title-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n\t\t--stepper-item-subtitle-size: var(--nile-type-scale-1,var(--ng-font-size-text-sm));\n\t\t--stepper-item-text-line-height:var(--nile-line-height-xsmall,var(--ng-line-height-text-sm));\n\t\t--circle-height:18px;\n\t}\n\n\t.stepper__item--lg {\n\t\t--item-spacing: var(--nile-spacing-md, var(--ng-spacing-md));\n\t\t--stepper-item-title-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n\t\t--stepper-item-subtitle-size: var(--nile-type-scale-2, var(--ng-font-size-text-md));\n\t\t--stepper-item-text-line-height:var(--nile-line-height-small, var(--ng-line-height-text-md));\n\t\t--circle-height: 22px;\n\t}\n\n\t.stepper__item--xl {\n\t\t--item-spacing: var(--nile-type-scale-2, var(--ng-spacing-2xl));\n\t\t--stepper-item-title-size: var( --nile-type-scale-4, var(--ng-font-size-text-md));\n\t\t--stepper-item-subtitle-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n\t\t--stepper-item-text-line-height:var(--nile-line-height-medium, var(--ng-line-height-text-lg));\n\t\t--circle-height:26px;\n\t}\n\n\t.stepper-item__connector-content{\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n\n\t.stepper__item__bulletin {\n\t\tdisplay:grid;\n\t\tplace-content:center;\n\t\t\n\t\tmargin-top: var(--nile-spacing-one-half-x, var(--ng-spacing-none));\n\t\tmargin-bottom: var(--nile-spacing-one-half-x, var(--ng-spacing-none));\n\t}\n\n\t.stepper__item--selected .stepper-item__connector-content{\n\t\tmargin-left: var(--nile-spacing-none, calc( var(--ng-spacing-xxs) * -1 ))\n\t}\n\n\t.stepper__item--selected .stepper__item__bulletin{\n\t\tpadding: 1px;\n\t\tborder: 1px solid var(--ng-colors-effects-focus-ring);\n\t\tborder-radius: 50%;\n\t}\n\n\t.stepper__bulletin--dot {\n\t\twidth: var(--circle-height);\n\t\taspect-ratio: 1 / 1;\n\t\tborder-radius: 50%;\n\t\tbackground: radial-gradient(var(--nile-colors-neutral-500, var(--ng-colors-border-secondary)) var(--bulletin--dot--seperation), var(--nile-colors-dark-200, var(--ng-colors-bg-primary)) var(--bulletin--dot--seperation));\n\t\tborder: var(--lines-thickness) solid var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));\n\t}\n\n\t.stepper__bulletin__dot--active{\n\t\tbackground: radial-gradient(var(--nile-colors-white-base, var(--ng-colors-bg-primary)) var(--bulletin--dot--seperation), var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid)) var(--bulletin--dot--seperation));\n\t\tborder: var(--lines-thickness) solid var(--nile-colors-primary-500,var(--ng-colors-bg-brand-solid));\n\t\twidth: calc( var(--circle-height) + calc( var(--lines-thickness) * 2 ) );\n\t}\n\n\t.stepper__bulletin--icon {\n\t\tdisplay:grid;\n\t\tplace-content:center;\n\t\twidth: var(--circle-height);\n\t\tborder: var(--lines-thickness) solid var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n\t\taspect-ratio: 1 / 1;\n\t\tborder-radius: 50%;\n\t\tbackground-color:var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n\t\toverflow:hidden;\n\t}\n\t\n\t.stepper__bulletin__icon--active {\n\t\tborder: var(--lines-thickness) solid var(--nile-colors-primary-500,var(--ng-colors-border-brand));\n\t\twidth: calc(var(--circle-height) + calc( var(--lines-thickness) * 2));\n\t}\n\n\t.stepper__item__line__container{\n\t\tflex-grow: 1;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\tpadding: 2px;\n\t\tmin-height: var(--min-line-container-height);\n\t}\n\n\t.stepper__item__line{\n\t\theight:100%;\n\t\tborder-left: var(--lines-thickness) solid var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));\n\t}\n\t.stepper__item__line--active{\n\t\tborder-left: var(--lines-thickness) solid var(--nile-colors-primary-600, var(--ng-colors-border-brand-alt));\n\t}\n\n\t.stepper__item__content{\n\t\tdisplay:flex;\n\t\tflex-direction:column;\n\t\tjustify-content:start;\n\t}\n\t.stepper__content__title {\n\t\tcolor:var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n\t\tfont-size: var(--stepper-item-title-size);\n\t\tline-height: var(--stepper-item-text-line-height);\n\t\tfont-family: var(--nile-font-family-medium, var(--ng-font-family-body));\n\t\tfont-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n\t}\n\n\t.stepper__content__title--alone{\n\t\tmargin-top: 25%;\n\t}\n\n\t.stepper__content__subtitle--alone{\n\t\tmargin-top: 6.25%;\n\t}\n\n\t.stepper__content__title--active{\n\t\tcolor:var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n\t\tfont-weight: var(--nile-font-weight-semi-bold,var(--ng-font-weight-semi-bold));\n\t}\n\n\t.stepper__content__subtitle {\n\t\tcolor:var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n\t\tfont-size: var(--stepper-item-subtitle-size);\n\t\tline-height: var(--stepper-item-text-line-height);\n\t\tfont-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n\t\tfont-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n\t}\n\n\t.stepper__content__subtitle--active{\n\t\tcolor:var(--nile-colors-primary-600, var(--ng-colors-text-brand-tertiary-600));\n\t}\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-vertical-stepper-item.css.js","sourceRoot":"","sources":["../../../src/nile-vertical-stepper-item/nile-vertical-stepper-item.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoJxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * VerticalStepperItem CSS\n */\nexport const styles = css`\n\t:host {\n\t\t--vertical-stepper-flex-val:1;\n\t\tflex-grow:var(--vertical-stepper-flex-val);\n\t\t--bulletin--dot--seperation:30%;\n\t\t--min-line-container-height:25px;\n\t\t--lines-thickness: 1px;\n\t\t-webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n\t}\n\n\t.stepper__item {\n\t\tdisplay:flex;\n\t\tcolumn-gap:var(--item-spacing);\n\t\theight: 100%;\n\t}\n\n\t.stepper__item--sm {\n\t\t--item-spacing: var(--nile-spacing-md, var(--ng-spacing-md));\n\t\t--stepper-item-title-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n\t\t--stepper-item-subtitle-size: var(--nile-type-scale-1,var(--ng-font-size-text-sm));\n\t\t--stepper-item-text-line-height:var(--nile-line-height-xsmall,var(--ng-line-height-text-sm));\n\t\t--circle-height:18px;\n\t}\n\n\t.stepper__item--lg {\n\t\t--item-spacing: var(--nile-spacing-md, var(--ng-spacing-md));\n\t\t--stepper-item-title-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n\t\t--stepper-item-subtitle-size: var(--nile-type-scale-2, var(--ng-font-size-text-md));\n\t\t--stepper-item-text-line-height:var(--nile-line-height-small, var(--ng-line-height-text-md));\n\t\t--circle-height: 22px;\n\t}\n\n\t.stepper__item--xl {\n\t\t--item-spacing: var(--nile-type-scale-2, var(--ng-spacing-2xl));\n\t\t--stepper-item-title-size: var( --nile-type-scale-4, var(--ng-font-size-text-md));\n\t\t--stepper-item-subtitle-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n\t\t--stepper-item-text-line-height:var(--nile-line-height-medium, var(--ng-line-height-text-lg));\n\t\t--circle-height:26px;\n\t}\n\n\t.stepper-item__connector-content{\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n\n\t.stepper__item__bulletin {\n\t\tdisplay:grid;\n\t\tplace-content:center;\n\t\t\n\t\tmargin-top: var(--nile-spacing-one-half-x, var(--ng-spacing-none));\n\t\tmargin-bottom: var(--nile-spacing-one-half-x, var(--ng-spacing-none));\n\t}\n\n\t.stepper__item--selected .stepper-item__connector-content{\n\t\tmargin-left: var(--nile-spacing-none, calc( var(--ng-spacing-xxs) * -1 ))\n\t}\n\n\t.stepper__item--selected .stepper__item__bulletin{\n\t\tpadding: 1px;\n\t\tborder: 1px solid var(--ng-colors-effects-focus-ring);\n\t\tborder-radius: 50%;\n\t}\n\n\t.stepper__bulletin--dot {\n\t\twidth: var(--circle-height);\n\t\taspect-ratio: 1 / 1;\n\t\tborder-radius: 50%;\n\t\tbackground: radial-gradient(var(--nile-colors-neutral-500, var(--ng-colors-border-secondary)) var(--bulletin--dot--seperation), var(--nile-colors-dark-200, var(--ng-colors-bg-primary)) var(--bulletin--dot--seperation));\n\t\tborder: var(--lines-thickness) solid var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));\n\t}\n\n\t.stepper__bulletin__dot--active{\n\t\tbackground: radial-gradient(var(--nile-colors-white-base, var(--ng-colors-bg-primary)) var(--bulletin--dot--seperation), var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid)) var(--bulletin--dot--seperation));\n\t\tborder: var(--lines-thickness) solid var(--nile-colors-primary-500,var(--ng-colors-bg-brand-solid));\n\t\twidth: calc( var(--circle-height) + calc( var(--lines-thickness) * 2 ) );\n\t}\n\n\t.stepper__bulletin--icon {\n\t\tdisplay:grid;\n\t\tplace-content:center;\n\t\twidth: var(--circle-height);\n\t\tborder: var(--lines-thickness) solid var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n\t\taspect-ratio: 1 / 1;\n\t\tborder-radius: 50%;\n\t\tbackground-color:var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n\t\toverflow:hidden;\n\t}\n\t\n\t.stepper__bulletin__icon--active {\n\t\tborder: var(--lines-thickness) solid var(--nile-colors-primary-500,var(--ng-colors-border-brand));\n\t\twidth: calc(var(--circle-height) + calc( var(--lines-thickness) * 2));\n\t}\n\n\t.stepper__item__line__container{\n\t\tflex-grow: 1;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\tpadding: 2px;\n\t\tmin-height: var(--min-line-container-height);\n\t}\n\n\t.stepper__item__line{\n\t\theight:100%;\n\t\tborder-left: var(--lines-thickness) solid var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));\n\t}\n\t.stepper__item__line--active{\n\t\tborder-left: var(--lines-thickness) solid var(--nile-colors-primary-600, var(--ng-colors-border-brand-alt));\n\t}\n\n\t.stepper__item__content{\n\t\tdisplay:flex;\n\t\tflex-direction:column;\n\t\tjustify-content:start;\n\t}\n\t.stepper__content__title {\n\t\tcolor:var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n\t\tfont-size: var(--stepper-item-title-size);\n\t\tline-height: var(--stepper-item-text-line-height);\n\t\tfont-family: var(--nile-font-family-medium, var(--ng-font-family-body));\n\t\tfont-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n\t}\n\n\t.stepper__content__title--alone{\n\t\tmargin-top: 25%;\n\t}\n\n\t.stepper__content__subtitle--alone{\n\t\tmargin-top: 6.25%;\n\t}\n\n\t.stepper__content__title--active{\n\t\tcolor:var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n\t\tfont-weight: var(--nile-font-weight-semi-bold,var(--ng-font-weight-semi-bold));\n\t}\n\n\t.stepper__content__subtitle {\n\t\tcolor:var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n\t\tfont-size: var(--stepper-item-subtitle-size);\n\t\tline-height: var(--stepper-item-text-line-height);\n\t\tfont-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n\t\tfont-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n\t}\n\n\t.stepper__content__subtitle--active{\n\t\tcolor:var(--nile-colors-primary-600, var(--ng-colors-text-brand-tertiary-600));\n\t}\n`;\n\nexport default [styles];\n"]}