@aquera/nile-elements 0.1.46-beta-2.4 → 0.1.46-beta-2.5

package/dist/src/nile-slider/types/nile-slider.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=nile-slider.types.js.map

package/dist/src/nile-slider/types/nile-slider.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-slider.types.js","sourceRoot":"","sources":["../../../../src/nile-slider/types/nile-slider.types.ts"],"names":[],"mappings":"","sourcesContent":["export type TooltipPosition =\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end';\n"]}

package/dist/src/nile-slider/utils/nile-slider.utils.d.ts

@@ -0,0 +1,11 @@
+import NileSlider from '../nile-slider';
+export declare const getClampedPercent: (rect: DOMRect, x: number) => number;
+export declare const percentToValue: (percent: number, nileSlider: NileSlider) => number;
+export declare const valueToPercent: (value: number, nileSlider: NileSlider) => number;
+export declare const handleSingleSlider: (e: MouseEvent, rect: DOMRect, nileSlider: NileSlider) => void;
+export declare const handleRangeOne: (e: MouseEvent, rect: DOMRect, nileSlider: NileSlider) => void;
+export declare const handleRangeTwo: (e: MouseEvent, rect: DOMRect, nileSlider: NileSlider) => void;
+export declare const getHtmlElements: (nileSlider: NileSlider) => void;
+export declare const addMoveListeners: (nileSlider: NileSlider) => void;
+export declare const removeMoveListeners: (nileSlider: NileSlider) => void;
+export declare const handleTwoThumbClick: (value: number, nileSlider: NileSlider) => void;

package/dist/src/nile-slider/utils/nile-slider.utils.js

@@ -0,0 +1,86 @@
+export const getClampedPercent = (rect, x) => {
+    const clamped = Math.max(0, Math.min(x, rect.width));
+    return (clamped / rect.width) * 100;
+};
+export const percentToValue = (percent, nileSlider) => {
+    return Math.floor((percent / 100) * nileSlider.maxValue);
+};
+export const valueToPercent = (value, nileSlider) => {
+    return (value / nileSlider.maxValue) * 100;
+};
+export const handleSingleSlider = (e, rect, nileSlider) => {
+    const x = e.clientX - rect.left;
+    const percent = getClampedPercent(rect, x);
+    nileSlider.value = percentToValue(percent, nileSlider);
+    nileSlider.emit("nile-change" /* NileSliderEvents.NILE_CHANGE */, { value: nileSlider.value });
+    nileSlider.buttonOne.style.left = `${percent}%`;
+    nileSlider.completed.style.width = `${percent}%`;
+};
+export const handleRangeOne = (e, rect, nileSlider) => {
+    const x = e.clientX - rect.left;
+    const percent = getClampedPercent(rect, x);
+    nileSlider.rangeOneValue = percentToValue(percent, nileSlider);
+    nileSlider.emit("nile-button-first-change" /* NileSliderEvents.NILE_BUTTON_FIRST_CHANGE */, {
+        value: nileSlider.rangeOneValue,
+    });
+    if (nileSlider.rangeTwoValue > nileSlider.rangeOneValue)
+        nileSlider.buttonOne.style.left = `${percent}%`;
+};
+export const handleRangeTwo = (e, rect, nileSlider) => {
+    const x = e.clientX - rect.left;
+    const percent = getClampedPercent(rect, x);
+    nileSlider.rangeTwoValue = percentToValue(percent, nileSlider);
+    nileSlider.emit("nile-button-last-change" /* NileSliderEvents.NILE_BUTTON_LAST_CHANGE */, {
+        value: nileSlider.rangeTwoValue,
+    });
+    if (nileSlider.rangeTwoValue >= nileSlider.rangeOneValue)
+        nileSlider.buttonTwo.style.left = `${percent}%`;
+};
+export const getHtmlElements = (nileSlider) => {
+    nileSlider.range = nileSlider.renderRoot.querySelector('.range');
+    nileSlider.buttonOne = nileSlider.renderRoot.querySelector('.range-button');
+    nileSlider.buttonTwo = nileSlider.renderRoot.querySelector('.range-button-two');
+    nileSlider.completed = nileSlider.renderRoot.querySelector('.range-completed');
+    nileSlider.range.addEventListener('click', nileSlider.onMouseClick);
+    nileSlider.buttonOne?.addEventListener('mousedown', () => {
+        nileSlider.activeThumb = 'one';
+        addMoveListeners(nileSlider);
+    });
+    nileSlider.buttonTwo?.addEventListener('mousedown', () => {
+        nileSlider.activeThumb = 'two';
+        addMoveListeners(nileSlider);
+    });
+};
+export const addMoveListeners = (nileSlider) => {
+    nileSlider.range.addEventListener('mousemove', nileSlider.onMouseMove);
+    nileSlider.range.addEventListener('mouseup', nileSlider.onMouseUp);
+};
+export const removeMoveListeners = (nileSlider) => {
+    nileSlider.range.removeEventListener('mousemove', nileSlider.onMouseMove);
+    nileSlider.range.removeEventListener('mouseup', nileSlider.onMouseUp);
+};
+export const handleTwoThumbClick = (value, nileSlider) => {
+    const distToOne = Math.abs(value - nileSlider.rangeOneValue);
+    const distToTwo = Math.abs(value - nileSlider.rangeTwoValue);
+    if (distToOne <= distToTwo) {
+        nileSlider.rangeOneValue = Math.floor(nileSlider.checkValueValidity(value, nileSlider.minValue, nileSlider.maxValue));
+    }
+    else {
+        nileSlider.rangeTwoValue = Math.floor(nileSlider.checkValueValidity(value, nileSlider.minValue, nileSlider.maxValue));
+    }
+    const percentOne = valueToPercent(nileSlider.rangeOneValue, nileSlider);
+    const percentTwo = valueToPercent(nileSlider.rangeTwoValue, nileSlider);
+    nileSlider.buttonOne.style.left = `${percentOne}%`;
+    nileSlider.buttonTwo.style.left = `${percentTwo}%`;
+    const left = Math.min(percentOne, percentTwo);
+    const width = Math.abs(percentTwo - percentOne);
+    nileSlider.completed.style.left = `${left}%`;
+    nileSlider.completed.style.width = `${width}%`;
+    nileSlider.emit("nile-button-first-change" /* NileSliderEvents.NILE_BUTTON_FIRST_CHANGE */, {
+        value: nileSlider.rangeOneValue,
+    });
+    nileSlider.emit("nile-button-last-change" /* NileSliderEvents.NILE_BUTTON_LAST_CHANGE */, {
+        value: nileSlider.rangeTwoValue,
+    });
+};
+//# sourceMappingURL=nile-slider.utils.js.map

package/dist/src/nile-slider/utils/nile-slider.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-slider.utils.js","sourceRoot":"","sources":["../../../../src/nile-slider/utils/nile-slider.utils.ts"],"names":[],"mappings":"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","sourcesContent":["import NileSlider from '../nile-slider';\nimport { NileSliderEvents } from '../types/nile-slider.enums';\n\nexport const getClampedPercent = (rect: DOMRect, x: number): number => {\n  const clamped = Math.max(0, Math.min(x, rect.width));\n  return (clamped / rect.width) * 100;\n};\n\nexport const percentToValue = (percent: number, nileSlider: NileSlider): number => {\n  return Math.floor((percent / 100) * nileSlider.maxValue);\n};\n\nexport const valueToPercent = (value: number, nileSlider: NileSlider): number => {\n  return (value / nileSlider.maxValue) * 100;\n};\n\nexport const handleSingleSlider = (\n  e: MouseEvent,\n  rect: DOMRect,\n  nileSlider: NileSlider\n): void => {\n  const x = e.clientX - rect.left;\n  const percent = getClampedPercent(rect, x);\n  nileSlider.value = percentToValue(percent, nileSlider);\n  nileSlider.emit(NileSliderEvents.NILE_CHANGE, { value: nileSlider.value });\n  nileSlider.buttonOne.style.left = `${percent}%`;\n  nileSlider.completed.style.width = `${percent}%`;\n};\n\nexport const handleRangeOne = (\n  e: MouseEvent,\n  rect: DOMRect,\n  nileSlider: NileSlider\n): void => {\n  const x = e.clientX - rect.left;\n  const percent = getClampedPercent(rect, x);\n  nileSlider.rangeOneValue = percentToValue(percent, nileSlider);\n  nileSlider.emit(NileSliderEvents.NILE_BUTTON_FIRST_CHANGE, {\n    value: nileSlider.rangeOneValue,\n  });\n  if (nileSlider.rangeTwoValue > nileSlider.rangeOneValue) nileSlider.buttonOne.style.left = `${percent}%`;\n};\n\nexport const handleRangeTwo = (\n  e: MouseEvent,\n  rect: DOMRect,\n  nileSlider: NileSlider\n): void => {\n  const x = e.clientX - rect.left;\n  const percent = getClampedPercent(rect, x);\n  nileSlider.rangeTwoValue = percentToValue(percent, nileSlider);\n  nileSlider.emit(NileSliderEvents.NILE_BUTTON_LAST_CHANGE, {\n    value: nileSlider.rangeTwoValue,\n  });\n  if (nileSlider.rangeTwoValue >= nileSlider.rangeOneValue) nileSlider.buttonTwo.style.left = `${percent}%`;\n};\n\nexport const getHtmlElements = (nileSlider: NileSlider) => {\n  nileSlider.range = nileSlider.renderRoot.querySelector('.range') as HTMLElement;\n  nileSlider.buttonOne = nileSlider.renderRoot.querySelector('.range-button') as HTMLElement;\n  nileSlider.buttonTwo = nileSlider.renderRoot.querySelector('.range-button-two') as HTMLElement;\n  nileSlider.completed = nileSlider.renderRoot.querySelector('.range-completed') as HTMLElement;\n\n  nileSlider.range.addEventListener('click', nileSlider.onMouseClick);\n\n  nileSlider.buttonOne?.addEventListener('mousedown', () => {\n    nileSlider.activeThumb = 'one';\n    addMoveListeners(nileSlider);\n  });\n\n  nileSlider.buttonTwo?.addEventListener('mousedown', () => {\n    nileSlider.activeThumb = 'two';\n    addMoveListeners(nileSlider);\n  });\n};\n\nexport const addMoveListeners = (nileSlider: NileSlider): void => {\n  nileSlider.range.addEventListener('mousemove', nileSlider.onMouseMove);\n  nileSlider.range.addEventListener('mouseup', nileSlider.onMouseUp);\n};\n\nexport const removeMoveListeners = (nileSlider: NileSlider): void => {\n  nileSlider.range.removeEventListener('mousemove', nileSlider.onMouseMove);\n  nileSlider.range.removeEventListener('mouseup', nileSlider.onMouseUp);\n};\n\nexport const handleTwoThumbClick = (\n  value: number,\n  nileSlider: NileSlider\n): void => {\n  const distToOne = Math.abs(value - nileSlider.rangeOneValue);\n  const distToTwo = Math.abs(value - nileSlider.rangeTwoValue);\n\n  if (distToOne <= distToTwo) {\n    nileSlider.rangeOneValue = Math.floor(nileSlider.checkValueValidity(value, nileSlider.minValue, nileSlider.maxValue));\n  } else {\n    nileSlider.rangeTwoValue = Math.floor(nileSlider.checkValueValidity(value, nileSlider.minValue, nileSlider.maxValue));\n  }\n\n  const percentOne = valueToPercent(nileSlider.rangeOneValue, nileSlider);\n  const percentTwo = valueToPercent(nileSlider.rangeTwoValue, nileSlider);\n\n  nileSlider.buttonOne.style.left = `${percentOne}%`;\n  nileSlider.buttonTwo.style.left = `${percentTwo}%`;\n\n  const left = Math.min(percentOne, percentTwo);\n  const width = Math.abs(percentTwo - percentOne);\n\n  nileSlider.completed.style.left = `${left}%`;\n  nileSlider.completed.style.width = `${width}%`;\n\n  nileSlider.emit(NileSliderEvents.NILE_BUTTON_FIRST_CHANGE, {\n    value: nileSlider.rangeOneValue,\n  });\n  nileSlider.emit(NileSliderEvents.NILE_BUTTON_LAST_CHANGE, {\n    value: nileSlider.rangeTwoValue,\n  });\n};\n"]}

package/dist/src/nile-spinner/nile-spinner.css.js

@@ -14,9 +14,6 @@ export const styles = css `
     --track-color: rgb(128 128 128 / 25%);
     --indicator-color: var(--nile-colors-white-base);
     --speed: 2s;
-    -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));
 
     display: inline-flex;
     width: 1em;

package/dist/src/nile-spinner/nile-spinner.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-spinner.css.js","sourceRoot":"","sources":["../../../src/nile-spinner/nile-spinner.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2DxB,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 * Spinner CSS\n */\nexport const styles = css`\n:host {\n    --track-width: 2px;\n    --track-color: rgb(128 128 128 / 25%);\n    --indicator-color: var(--nile-colors-white-base);\n    --speed: 2s;\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    display: inline-flex;\n    width: 1em;\n    height: 1em;\n  }\n\n  .spinner {\n    flex: 1 1 auto;\n    height: 100%;\n    width: 100%;\n  }\n\n  .spinner__track,\n  .spinner__indicator {\n    fill: none;\n    stroke-width: var(--track-width);\n    r: calc(0.5em - var(--track-width) / 2);\n    cx: 0.5em;\n    cy: 0.5em;\n    transform-origin: 50% 50%;\n  }\n\n  .spinner__track {\n    stroke: var(--track-color);\n    transform-origin: 0% 0%;\n  }\n\n  .spinner__indicator {\n    stroke: var(--indicator-color);\n    stroke-linecap: round;\n    stroke-dasharray: 150% 75%;\n    animation: spin var(--speed) linear infinite;\n  }\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n      stroke-dasharray: 0.01em, 2.75em;\n    }\n\n    50% {\n      transform: rotate(450deg);\n      stroke-dasharray: 1.375em, 1.375em;\n    }\n\n    100% {\n      transform: rotate(1080deg);\n      stroke-dasharray: 0.01em, 2.75em;\n    }\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-spinner.css.js","sourceRoot":"","sources":["../../../src/nile-spinner/nile-spinner.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDxB,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 * Spinner CSS\n */\nexport const styles = css`\n:host {\n    --track-width: 2px;\n    --track-color: rgb(128 128 128 / 25%);\n    --indicator-color: var(--nile-colors-white-base);\n    --speed: 2s;\n\n    display: inline-flex;\n    width: 1em;\n    height: 1em;\n  }\n\n  .spinner {\n    flex: 1 1 auto;\n    height: 100%;\n    width: 100%;\n  }\n\n  .spinner__track,\n  .spinner__indicator {\n    fill: none;\n    stroke-width: var(--track-width);\n    r: calc(0.5em - var(--track-width) / 2);\n    cx: 0.5em;\n    cy: 0.5em;\n    transform-origin: 50% 50%;\n  }\n\n  .spinner__track {\n    stroke: var(--track-color);\n    transform-origin: 0% 0%;\n  }\n\n  .spinner__indicator {\n    stroke: var(--indicator-color);\n    stroke-linecap: round;\n    stroke-dasharray: 150% 75%;\n    animation: spin var(--speed) linear infinite;\n  }\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n      stroke-dasharray: 0.01em, 2.75em;\n    }\n\n    50% {\n      transform: rotate(450deg);\n      stroke-dasharray: 1.375em, 1.375em;\n    }\n\n    100% {\n      transform: rotate(1080deg);\n      stroke-dasharray: 0.01em, 2.75em;\n    }\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-split-panel/nile-split-panel.css.js

@@ -27,9 +27,6 @@ export const styles = css `
     --max: 100%;
 
     display: grid;
-    -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));
   }
 
   .start,
@@ -43,8 +40,8 @@ export const styles = css `
     position: relative;
     align-items: center;
     justify-content: center;
-    background-color: var(--nile-colors-neutral-400 , var(--ng-colors-bg-quaternary));
-    color: var(--nile-colors-dark-900,var(--ng-colors-text-primary-900));
+    background-color: var(--nile-colors-neutral-100);
+    color: var(--nile-colors-dark-900);
     z-index: 1;
   }
 
@@ -53,8 +50,8 @@ export const styles = css `
   }
 
   :host(:not([disabled])) .divider:focus-visible {
-    background-color: var(--nile-colors-blue-500, var(--ng-componentcolors-utility-brand-50));
-    color: var(--nile-colors-white-base, var(--ng-colors-text-white));
+    background-color: var(--nile-colors-blue-500);
+    color: var(--nile-colors-white-base);
   }
 
   :host([disabled]) .divider {

package/dist/src/nile-split-panel/nile-split-panel.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-split-panel.css.js","sourceRoot":"","sources":["../../../src/nile-split-panel/nile-split-panel.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyFxB,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 * SplitPanel CSS\n */\nexport const styles = css`\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    box-sizing: border-box;\n    --divider-width: 4px;\n    --divider-hit-area: 12px;\n    --min: 0%;\n    --max: 100%;\n\n    display: grid;\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  .start,\n  .end {\n    overflow: hidden;\n  }\n\n  .divider {\n    flex: 0 0 var(--divider-width);\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: center;\n    background-color: var(--nile-colors-neutral-400 , var(--ng-colors-bg-quaternary));\n    color: var(--nile-colors-dark-900,var(--ng-colors-text-primary-900));\n    z-index: 1;\n  }\n\n  .divider:focus {\n    outline: none;\n  }\n\n  :host(:not([disabled])) .divider:focus-visible {\n    background-color: var(--nile-colors-blue-500, var(--ng-componentcolors-utility-brand-50));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  }\n\n  :host([disabled]) .divider {\n    cursor: not-allowed;\n  }\n\n  /* Horizontal */\n  :host(:not([vertical], [disabled])) .divider {\n    cursor: col-resize;\n  }\n\n  :host(:not([vertical])) .divider::after {\n    display: flex;\n    content: '';\n    position: absolute;\n    height: 100%;\n    left: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);\n    width: var(--divider-hit-area);\n  }\n\n  /* Vertical */\n  :host([vertical]) {\n    flex-direction: column;\n  }\n\n  :host([vertical]:not([disabled])) .divider {\n    cursor: row-resize;\n  }\n\n  :host([vertical]) .divider::after {\n    content: '';\n    position: absolute;\n    width: 100%;\n    top: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);\n    height: var(--divider-hit-area);\n  }\n\n  @media (forced-colors: active) {\n    .divider {\n      outline: solid 1px transparent;\n    }\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-split-panel.css.js","sourceRoot":"","sources":["../../../src/nile-split-panel/nile-split-panel.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsFxB,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 * SplitPanel CSS\n */\nexport const styles = css`\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    box-sizing: border-box;\n    --divider-width: 4px;\n    --divider-hit-area: 12px;\n    --min: 0%;\n    --max: 100%;\n\n    display: grid;\n  }\n\n  .start,\n  .end {\n    overflow: hidden;\n  }\n\n  .divider {\n    flex: 0 0 var(--divider-width);\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: center;\n    background-color: var(--nile-colors-neutral-100);\n    color: var(--nile-colors-dark-900);\n    z-index: 1;\n  }\n\n  .divider:focus {\n    outline: none;\n  }\n\n  :host(:not([disabled])) .divider:focus-visible {\n    background-color: var(--nile-colors-blue-500);\n    color: var(--nile-colors-white-base);\n  }\n\n  :host([disabled]) .divider {\n    cursor: not-allowed;\n  }\n\n  /* Horizontal */\n  :host(:not([vertical], [disabled])) .divider {\n    cursor: col-resize;\n  }\n\n  :host(:not([vertical])) .divider::after {\n    display: flex;\n    content: '';\n    position: absolute;\n    height: 100%;\n    left: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);\n    width: var(--divider-hit-area);\n  }\n\n  /* Vertical */\n  :host([vertical]) {\n    flex-direction: column;\n  }\n\n  :host([vertical]:not([disabled])) .divider {\n    cursor: row-resize;\n  }\n\n  :host([vertical]) .divider::after {\n    content: '';\n    position: absolute;\n    width: 100%;\n    top: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);\n    height: var(--divider-hit-area);\n  }\n\n  @media (forced-colors: active) {\n    .divider {\n      outline: solid 1px transparent;\n    }\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -15,21 +15,18 @@ export const styles = css `
 	:host {
 		display:block;
 		height:100%;
-		-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));
 	}
 	.nile-stepper--horizontal{
 		display:flex;
 		align-items:center;
-		padding: var( --nile-spacing-2xl, var(--ng-spacing-2xl));
+		padding: var(--nile-spacing-spacing-3xl);
 	}
 
 	.nile-stepper--vertical{
 		height:100%;
 		display:flex;
 		flex-direction:column;
-		padding: var( --nile-spacing-2xl, var(--ng-spacing-2xl));
+		padding: var(--nile-spacing-spacing-3xl);
 	}
 `;
 export default [styles];

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

@@ -1 +1 @@
-{"version":3,"file":"nile-stepper.css.js","sourceRoot":"","sources":["../../../src/nile-stepper/nile-stepper.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;CAuBxB,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 * Stepper CSS\n */\nexport const styles = css`\n\t*{\n\t\tbox-sizing:border-box;\n\t}\n\t:host {\n\t\tdisplay:block;\n\t\theight:100%;\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\t.nile-stepper--horizontal{\n\t\tdisplay:flex;\n\t\talign-items:center;\n\t\tpadding: var( --nile-spacing-2xl, var(--ng-spacing-2xl));\n\t}\n\n\t.nile-stepper--vertical{\n\t\theight:100%;\n\t\tdisplay:flex;\n\t\tflex-direction:column;\n\t\tpadding: var( --nile-spacing-2xl, var(--ng-spacing-2xl));\n\t}\n`;\n\nexport default [styles];"]}
+{"version":3,"file":"nile-stepper.css.js","sourceRoot":"","sources":["../../../src/nile-stepper/nile-stepper.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;CAoBxB,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 * Stepper CSS\n */\nexport const styles = css`\n\t*{\n\t\tbox-sizing:border-box;\n\t}\n\t:host {\n\t\tdisplay:block;\n\t\theight:100%;\n\t}\n\t.nile-stepper--horizontal{\n\t\tdisplay:flex;\n\t\talign-items:center;\n\t\tpadding: var(--nile-spacing-spacing-3xl);\n\t}\n\n\t.nile-stepper--vertical{\n\t\theight:100%;\n\t\tdisplay:flex;\n\t\tflex-direction:column;\n\t\tpadding: var(--nile-spacing-spacing-3xl);\n\t}\n`;\n\nexport default [styles];"]}

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

@@ -12,41 +12,38 @@ export const styles = css `
 	:host {
 		--stepper-flex-val:1;
 		--bulletin--dot--seperation:30%;
-		--lines-thickness: var(--nile-width-1px, var(--ng-border-width-2));
+		--lines-thickness: 1px;
 		
 		display: inline-block;
 		flex-grow:var(--stepper-flex-val);
-		min-width: 200px;
-		-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));
+		min-width:var(--nile-stepper-min-width);
 	}
 	
 	.stepper__item {
-		margin: var( --nile-spacing-none, var(--ng-spacing-none)) -1px;
+		margin: 0 -1px;
 	}
 
 	.stepper__item--sm {
-		--item-spacing: var( --nile-spacing-md, var(--ng-spacing-md));
-		--stepper-item-title-size: var( --nile-type-scale-2, var(--ng-font-size-text-sm) );
-		--stepper-item-subtitle-size: var( --nile-type-scale-1, var(--ng-font-size-text-sm) );
-		--stepper-item-text-line-height: var( --nile-line-height-xsmall, var(--ng-line-height-text-sm) );
+		--item-spacing: var(--nile-spacing-spacing-md);
+		--stepper-item-title-size:12px;
+		--stepper-item-subtitle-size:10.24px;
+		--stepper-item-text-line-height:16px;
 		--circle-height:18px;
 	}
 
 	.stepper__item--lg {
-		--item-spacing: var( --nile-spacing-md, var(--ng-spacing-lg));
-		--stepper-item-title-size: var( --nile-type-scale-3, var(--ng-font-size-text-sm) );
-		--stepper-item-subtitle-size: var( --nile-type-scale-2, var(--ng-font-size-text-sm) );
-		--stepper-item-text-line-height: var( --nile-line-height-small, var(--ng-line-height-text-md) );
+		--item-spacing: var(--nile-spacing-spacing-md);
+		--stepper-item-title-size:14px;
+		--stepper-item-subtitle-size:12px;
+		--stepper-item-text-line-height:18px;
 		--circle-height:22px;
 	}
 
 	.stepper__item--xl {
-		--item-spacing: var( --nile-spacing-lg, var(--ng-spacing-lg));
-		--stepper-item-title-size: var( --nile-type-scale-4, var(--ng-font-size-text-md) );
-		--stepper-item-subtitle-size: var( --nile-type-scale-3, var(--ng-font-size-text-md) );
-		--stepper-item-text-line-height: var( --nile-line-height-medium, var(--ng-line-height-text-lg) );
+		--item-spacing: var(--nile-spacing-spacing-lg);
+		--stepper-item-title-size:16px;
+		--stepper-item-subtitle-size:14px;
+		--stepper-item-text-line-height:22px;
 		--circle-height:26px;
 	}
 
@@ -54,12 +51,11 @@ export const styles = css `
 		display:flex;
 		width:100%;
 		align-items:center;
-		gap: var(--nile-spacing-none, var(--ng-spacing-lg));
 	}
 
 	.stepper__line__container {
 		flex-grow:1;
-		padding: var( --nile-spacing-none, var(--ng-spacing-none)) 1px;
+		padding:0 1px;
 	}
 
 	.stepper__line--hastitle {
@@ -70,16 +66,16 @@ export const styles = css `
 	.stepper__line {
 		display: block;
 		border: 0;
-		border-top: var(--lines-thickness) solid var(--nile-colors-neutral-500, var(--ng-colors-border-secondary) );
+		border-top: var(--lines-thickness) solid var(--nile-colors-neutral-500);
 	}
 
 	.stepper__line--active {
-		border-top: var(--lines-thickness) solid var( --nile-colors-primary-600, var(--ng-colors-border-brand-alt) );
+		border-top: var(--lines-thickness) solid var(--nile-colors-primary-600);
 	}
 
 	.stepper__item__content--above{
 		position: relative;
-		margin-right: var( --nile-spacing-md, var(--ng-spacing-md));
+		margin-right: var(--nile-spacing-spacing-md);
 	}
 
 	.stepper__item__content--above .stepper__content__subtitle{
@@ -98,81 +94,71 @@ export const styles = css `
 	.stepper__item__bulletin {
 		display:grid;
 		place-content:center;
-		margin: var( --nile-spacing-none, var(--ng-spacing-none)) -1px;
+		margin:0 -1px;
 	}
 
 	.stepper__item__bulletin{
-		margin-left: var( --nile-spacing-sm, var(--ng-spacing-none));
-		margin-right: var( --nile-spacing-sm, var(--ng-spacing-none));
-	}
-	
-	.stepper__item__bulletin--inline{
-		margin-right: var( --nile-spacing-sm, var(--ng-spacing-sm));
-	}
-
-	.stepper__item--selected .stepper__item__bulletin{
-		padding: var(--nile-spacing-2px, var(--ng-spacing-xxs));
-    border: var(--nile-border-size-2, var(--ng-border-width-2)) solid var(--ng-colors-effects-focus-ring);
-    border-radius: 50%;
+		margin-left: 6px;
+		margin-right: 6px;
 	}
 
 	.stepper__content__title {
-		color:var( --nile-colors-dark-900, var(--ng-colors-text-secondary-700));
+		color:var(--nile-colors-dark-900);
 		font-size: var(--stepper-item-title-size);
 		line-height: var(--stepper-item-text-line-height);
-		font-family: var(--nile-font-family-medium, var(--ng-font-family-body));
-		font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-600));
+		font-family: var(--nile-font-family-medium);
+		font-weight: 400;
 	}
 
 	.stepper__content__title--inline{
-		padding: var( --nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-md, var(--ng-spacing-md));
-		color:var( --nile-colors-dark-900, var(--ng-colors-text-secondary-700) );
+		padding: 0 8px;
+		color:var(--nile-colors-dark-900);
 	}
 
 	.stepper__content__title--active{
-		color:var( --nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700) );
-		font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-600));
+		color:var(--nile-colors-primary-600);
+		font-weight: 600;
 	}
 
 	.stepper__content__subtitle {
-		color:var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600) );
+		color:var(--nile-colors-dark-500);
 		font-size: var(--stepper-item-subtitle-size);
 		line-height: var(--stepper-item-text-line-height);
-		font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
-		font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+		font-family: var(--nile-font-family-sans-serif);
+		font-weight: 400;
 	}
 
 	.stepper__content__subtitle--active{
-		color:var( --nile-colors-primary-600, var(--ng-colors-text-brand-tertiary-600) );
+		color:var(--nile-colors-primary-600);
 	}
 
 	.stepper__bulletin--dot {
 		width: var(--circle-height);
 		aspect-ratio: 1 / 1;
-		border-radius: var(--nile-radius-full, var(--ng-radius-full));
-		background: 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));
-		border: var(--lines-thickness) solid var(--nile-colors-neutral-500, var(--ng-colors-border-secondary) );
+		border-radius: 50%;
+		background: radial-gradient(var(--nile-colors-neutral-500) var(--bulletin--dot--seperation), var(--nile-colors-dark-200) var(--bulletin--dot--seperation));
+		border: var(--lines-thickness) solid var(--nile-colors-neutral-500);
 	}
 
 	.stepper__bulletin__dot--active{
-		background: 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));
-		border: var(--lines-thickness) solid var( --nile-colors-primary-500, var(--ng-colors-border-brand-alt) );
+		background: radial-gradient(var(--nile-colors-white-base) var(--bulletin--dot--seperation), var(--nile-colors-primary-600) var(--bulletin--dot--seperation));
+		border: var(--lines-thickness) solid var(--nile-colors-primary-500);
 		width: calc( var(--circle-height) + calc( var(--lines-thickness) * 2 ) );
 	}
 
 	.stepper__bulletin--icon {
-		display: grid;
+		display:grid;
 		place-content:center;
 		width: var(--circle-height);
-		border: var(--lines-thickness) solid var( --nile-colors-primary-600, var(--ng-colors-bg-brand-solid) );
+		border: var(--lines-thickness) solid var(--nile-colors-primary-600);
 		aspect-ratio: 1 / 1;
-		border-radius: var(--nile-radius-full, var(--ng-radius-full));
-		background-color:var( --nile-colors-primary-600, var(--ng-colors-bg-brand-solid) );
+		border-radius: 50%;
+		background-color:var(--nile-colors-primary-600);
 		overflow:hidden;
 	}
 	
 	.stepper__bulletin__icon--active {
-		border: 1px solid var( --nile-colors-primary-500, var(--ng-colors-bg-brand-solid) );
+		border: 1px solid var(--nile-colors-primary-500);
 		width: calc(var(--circle-height) + calc( var(--lines-thickness) * 2));
 	}
 `;

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

@@ -1 +1 @@
-{"version":3,"file":"nile-stepper-item.css.js","sourceRoot":"","sources":["../../../src/nile-stepper-item/nile-stepper-item.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuKxB,CAAC;AACF,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 * StepperItem CSS\n */\nexport const styles = css`\n\t:host {\n\t\t--stepper-flex-val:1;\n\t\t--bulletin--dot--seperation:30%;\n\t\t--lines-thickness: var(--nile-width-1px, var(--ng-border-width-2));\n\t\t\n\t\tdisplay: inline-block;\n\t\tflex-grow:var(--stepper-flex-val);\n\t\tmin-width: 200px;\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\t\n\t.stepper__item {\n\t\tmargin: var( --nile-spacing-none, var(--ng-spacing-none)) -1px;\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-lg));\n\t\t--stepper-item-title-size: var( --nile-type-scale-3, var(--ng-font-size-text-sm) );\n\t\t--stepper-item-subtitle-size: var( --nile-type-scale-2, var(--ng-font-size-text-sm) );\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-spacing-lg, var(--ng-spacing-lg));\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__line__content {\n\t\tdisplay:flex;\n\t\twidth:100%;\n\t\talign-items:center;\n\t\tgap: var(--nile-spacing-none, var(--ng-spacing-lg));\n\t}\n\n\t.stepper__line__container {\n\t\tflex-grow:1;\n\t\tpadding: var( --nile-spacing-none, var(--ng-spacing-none)) 1px;\n\t}\n\n\t.stepper__line--hastitle {\n\t\tdisplay:flex;\n\t\talign-items:center;\n\t}\n\n\t.stepper__line {\n\t\tdisplay: block;\n\t\tborder: 0;\n\t\tborder-top: var(--lines-thickness) solid var(--nile-colors-neutral-500, var(--ng-colors-border-secondary) );\n\t}\n\n\t.stepper__line--active {\n\t\tborder-top: var(--lines-thickness) solid var( --nile-colors-primary-600, var(--ng-colors-border-brand-alt) );\n\t}\n\n\t.stepper__item__content--above{\n\t\tposition: relative;\n\t\tmargin-right: var( --nile-spacing-md, var(--ng-spacing-md));\n\t}\n\n\t.stepper__item__content--above .stepper__content__subtitle{\n\t\tposition: absolute;\n    top: 100%;\n    white-space: nowrap;\n\t}\n\n\t.stepper__item__content--below {\n\t\tmargin-top: var(--item-spacing);\n\t\tdisplay:flex;\n\t\tflex-direction:column;\n\t\talign-items:center;\n\t}\n\t\n\t.stepper__item__bulletin {\n\t\tdisplay:grid;\n\t\tplace-content:center;\n\t\tmargin: var( --nile-spacing-none, var(--ng-spacing-none)) -1px;\n\t}\n\n\t.stepper__item__bulletin{\n\t\tmargin-left: var( --nile-spacing-sm, var(--ng-spacing-none));\n\t\tmargin-right: var( --nile-spacing-sm, var(--ng-spacing-none));\n\t}\n\t\n\t.stepper__item__bulletin--inline{\n\t\tmargin-right: var( --nile-spacing-sm, var(--ng-spacing-sm));\n\t}\n\n\t.stepper__item--selected .stepper__item__bulletin{\n\t\tpadding: var(--nile-spacing-2px, var(--ng-spacing-xxs));\n    border: var(--nile-border-size-2, var(--ng-border-width-2)) solid var(--ng-colors-effects-focus-ring);\n    border-radius: 50%;\n\t}\n\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-600));\n\t}\n\n\t.stepper__content__title--inline{\n\t\tpadding: var( --nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-md, var(--ng-spacing-md));\n\t\tcolor:var( --nile-colors-dark-900, var(--ng-colors-text-secondary-700) );\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-600));\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\t.stepper__bulletin--dot {\n\t\twidth: var(--circle-height);\n\t\taspect-ratio: 1 / 1;\n\t\tborder-radius: var(--nile-radius-full, var(--ng-radius-full));\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-border-brand-alt) );\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: var(--nile-radius-full, var(--ng-radius-full));\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: 1px 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`;\nexport default [styles];\n"]}
+{"version":3,"file":"nile-stepper-item.css.js","sourceRoot":"","sources":["../../../src/nile-stepper-item/nile-stepper-item.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyJxB,CAAC;AACF,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 * StepperItem CSS\n */\nexport const styles = css`\n\t:host {\n\t\t--stepper-flex-val:1;\n\t\t--bulletin--dot--seperation:30%;\n\t\t--lines-thickness: 1px;\n\t\t\n\t\tdisplay: inline-block;\n\t\tflex-grow:var(--stepper-flex-val);\n\t\tmin-width:var(--nile-stepper-min-width);\n\t}\n\t\n\t.stepper__item {\n\t\tmargin: 0 -1px;\n\t}\n\n\t.stepper__item--sm {\n\t\t--item-spacing: var(--nile-spacing-spacing-md);\n\t\t--stepper-item-title-size:12px;\n\t\t--stepper-item-subtitle-size:10.24px;\n\t\t--stepper-item-text-line-height:16px;\n\t\t--circle-height:18px;\n\t}\n\n\t.stepper__item--lg {\n\t\t--item-spacing: var(--nile-spacing-spacing-md);\n\t\t--stepper-item-title-size:14px;\n\t\t--stepper-item-subtitle-size:12px;\n\t\t--stepper-item-text-line-height:18px;\n\t\t--circle-height:22px;\n\t}\n\n\t.stepper__item--xl {\n\t\t--item-spacing: var(--nile-spacing-spacing-lg);\n\t\t--stepper-item-title-size:16px;\n\t\t--stepper-item-subtitle-size:14px;\n\t\t--stepper-item-text-line-height:22px;\n\t\t--circle-height:26px;\n\t}\n\n\t.stepper__line__content {\n\t\tdisplay:flex;\n\t\twidth:100%;\n\t\talign-items:center;\n\t}\n\n\t.stepper__line__container {\n\t\tflex-grow:1;\n\t\tpadding:0 1px;\n\t}\n\n\t.stepper__line--hastitle {\n\t\tdisplay:flex;\n\t\talign-items:center;\n\t}\n\n\t.stepper__line {\n\t\tdisplay: block;\n\t\tborder: 0;\n\t\tborder-top: var(--lines-thickness) solid var(--nile-colors-neutral-500);\n\t}\n\n\t.stepper__line--active {\n\t\tborder-top: var(--lines-thickness) solid var(--nile-colors-primary-600);\n\t}\n\n\t.stepper__item__content--above{\n\t\tposition: relative;\n\t\tmargin-right: var(--nile-spacing-spacing-md);\n\t}\n\n\t.stepper__item__content--above .stepper__content__subtitle{\n\t\tposition: absolute;\n    top: 100%;\n    white-space: nowrap;\n\t}\n\n\t.stepper__item__content--below {\n\t\tmargin-top: var(--item-spacing);\n\t\tdisplay:flex;\n\t\tflex-direction:column;\n\t\talign-items:center;\n\t}\n\t\n\t.stepper__item__bulletin {\n\t\tdisplay:grid;\n\t\tplace-content:center;\n\t\tmargin:0 -1px;\n\t}\n\n\t.stepper__item__bulletin{\n\t\tmargin-left: 6px;\n\t\tmargin-right: 6px;\n\t}\n\n\t.stepper__content__title {\n\t\tcolor:var(--nile-colors-dark-900);\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);\n\t\tfont-weight: 400;\n\t}\n\n\t.stepper__content__title--inline{\n\t\tpadding: 0 8px;\n\t\tcolor:var(--nile-colors-dark-900);\n\t}\n\n\t.stepper__content__title--active{\n\t\tcolor:var(--nile-colors-primary-600);\n\t\tfont-weight: 600;\n\t}\n\n\t.stepper__content__subtitle {\n\t\tcolor:var(--nile-colors-dark-500);\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);\n\t\tfont-weight: 400;\n\t}\n\n\t.stepper__content__subtitle--active{\n\t\tcolor:var(--nile-colors-primary-600);\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(--bulletin--dot--seperation), var(--nile-colors-dark-200) var(--bulletin--dot--seperation));\n\t\tborder: var(--lines-thickness) solid var(--nile-colors-neutral-500);\n\t}\n\n\t.stepper__bulletin__dot--active{\n\t\tbackground: radial-gradient(var(--nile-colors-white-base) var(--bulletin--dot--seperation), var(--nile-colors-primary-600) var(--bulletin--dot--seperation));\n\t\tborder: var(--lines-thickness) solid var(--nile-colors-primary-500);\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);\n\t\taspect-ratio: 1 / 1;\n\t\tborder-radius: 50%;\n\t\tbackground-color:var(--nile-colors-primary-600);\n\t\toverflow:hidden;\n\t}\n\t\n\t.stepper__bulletin__icon--active {\n\t\tborder: 1px solid var(--nile-colors-primary-500);\n\t\twidth: calc(var(--circle-height) + calc( var(--lines-thickness) * 2));\n\t}\n`;\nexport default [styles];"]}

package/dist/src/nile-switcher/nile-switcher.css.js

@@ -12,9 +12,6 @@ export const styles = css `
   :host {
     width: 100%;
     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));
   }
 
   .pointer-cursor {
@@ -30,10 +27,10 @@ export const styles = css `
     color: inherit;
     color: var(--nile-colors-dark-900);
     font-family:var(--nile-font-family-serif);
-    font-size: var(--nile-type-scale-3);
+    font-size: 14px;
     font-style: normal;
-    font-weight: var(--nile-font-weight-regular);
-    line-height: var(--nile-line-height-xsmall);
+    font-weight: 400;
+    line-height: 14px;
     letter-spacing: 0.2px;
   }
 
@@ -50,7 +47,7 @@ export const styles = css `
   }
 
   .switcher-inline {
-    gap: var(--nile-spacing-md);
+    gap: 0.5rem;
   }
 
   .switcher-block {
@@ -65,7 +62,7 @@ export const styles = css `
   .switcher-icons-container {
     display: flex;
     margin-left: auto;
-    gap: var(--nile-spacing-md);
+    gap: 0.5rem;
     max-height: 38px;
     align-items: center;
   }
@@ -83,14 +80,14 @@ export const styles = css `
     justify-content: center;
     display: flex;
     align-items: center;
-    margin-bottom: var(--nile-spacing-sm);
+    margin-bottom: 6px;
     height: 28px;
     width: 28px;
-    border-radius: var(--nile-radius-sm);
+    border-radius: 4px;
   }
   nile-radio {
     display: inline-block;
-    padding-right: var(--nile-spacing-lg);
+    padding-right: 10px;
   }
 
   .switcher-object-mapper-icon {

package/dist/src/nile-switcher/nile-switcher.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-switcher.css.js","sourceRoot":"","sources":["../../../src/nile-switcher/nile-switcher.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8GxB,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 * FieldGenerator CSS\n */\nexport const styles = css`\n  :host {\n    width: 100%;\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  .pointer-cursor {\n    cursor: pointer;\n  }\n  .pointer-cursor-not-allowed {\n    pointer-events: none;\n  }\n\n  .switcher__label {\n    display: flex;\n    align-items: center;\n    color: inherit;\n    color: var(--nile-colors-dark-900);\n    font-family:var(--nile-font-family-serif);\n    font-size: var(--nile-type-scale-3);\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular);\n    line-height: var(--nile-line-height-xsmall);\n    letter-spacing: 0.2px;\n  }\n\n  switcher-object-mapper:hover {\n    display: flex;\n  }\n\n  .switcher-icon-container.current {\n    background: var(--nile-colors-primary-100);\n  }\n\n  .switcher-container {\n    display: flex;\n  }\n\n  .switcher-inline {\n    gap: var(--nile-spacing-md);\n  }\n\n  .switcher-block {\n    flex-direction: column;\n  }\n\n  .switcher-inline > :nth-child(2) {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .switcher-icons-container {\n    display: flex;\n    margin-left: auto;\n    gap: var(--nile-spacing-md);\n    max-height: 38px;\n    align-items: center;\n  }\n\n  .switcher-block > .switcher-icons-container {\n    margin-left: auto;\n  }\n\n  .label-container {\n    display: flex;\n  }\n\n  .switcher-icon-container {\n    cursor: pointer;\n    justify-content: center;\n    display: flex;\n    align-items: center;\n    margin-bottom: var(--nile-spacing-sm);\n    height: 28px;\n    width: 28px;\n    border-radius: var(--nile-radius-sm);\n  }\n  nile-radio {\n    display: inline-block;\n    padding-right: var(--nile-spacing-lg);\n  }\n\n  .switcher-object-mapper-icon {\n    display: none;\n  }\n  .switcher-object-mapper:hover > .switcher-object-mapper-icon {\n    display: block;\n  }\n  .switcher-object-mapper::part(input) {\n    color: var(--nile-colors-primary-600);\n    cursor: pointer;\n  }\n\n  .switcher-input--noborder::part(base) {\n    border: none;\n  }\n  .switcher-object-mapper--noborder::part(base) {\n    border: none;\n  }\n\n  .switcher-dropdown--noborder::part(combobox) {\n    border: none;\n  }\n\n  .switcher-dropdown--noborder::part(expand-icon) {\n    display: none;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-switcher.css.js","sourceRoot":"","sources":["../../../src/nile-switcher/nile-switcher.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2GxB,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 * FieldGenerator CSS\n */\nexport const styles = css`\n  :host {\n    width: 100%;\n    box-sizing: border-box;\n  }\n\n  .pointer-cursor {\n    cursor: pointer;\n  }\n  .pointer-cursor-not-allowed {\n    pointer-events: none;\n  }\n\n  .switcher__label {\n    display: flex;\n    align-items: center;\n    color: inherit;\n    color: var(--nile-colors-dark-900);\n    font-family:var(--nile-font-family-serif);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n  }\n\n  switcher-object-mapper:hover {\n    display: flex;\n  }\n\n  .switcher-icon-container.current {\n    background: var(--nile-colors-primary-100);\n  }\n\n  .switcher-container {\n    display: flex;\n  }\n\n  .switcher-inline {\n    gap: 0.5rem;\n  }\n\n  .switcher-block {\n    flex-direction: column;\n  }\n\n  .switcher-inline > :nth-child(2) {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .switcher-icons-container {\n    display: flex;\n    margin-left: auto;\n    gap: 0.5rem;\n    max-height: 38px;\n    align-items: center;\n  }\n\n  .switcher-block > .switcher-icons-container {\n    margin-left: auto;\n  }\n\n  .label-container {\n    display: flex;\n  }\n\n  .switcher-icon-container {\n    cursor: pointer;\n    justify-content: center;\n    display: flex;\n    align-items: center;\n    margin-bottom: 6px;\n    height: 28px;\n    width: 28px;\n    border-radius: 4px;\n  }\n  nile-radio {\n    display: inline-block;\n    padding-right: 10px;\n  }\n\n  .switcher-object-mapper-icon {\n    display: none;\n  }\n  .switcher-object-mapper:hover > .switcher-object-mapper-icon {\n    display: block;\n  }\n  .switcher-object-mapper::part(input) {\n    color: var(--nile-colors-primary-600);\n    cursor: pointer;\n  }\n\n  .switcher-input--noborder::part(base) {\n    border: none;\n  }\n  .switcher-object-mapper--noborder::part(base) {\n    border: none;\n  }\n\n  .switcher-dropdown--noborder::part(combobox) {\n    border: none;\n  }\n\n  .switcher-dropdown--noborder::part(expand-icon) {\n    display: none;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-tab/nile-tab.css.js

@@ -15,13 +15,10 @@ export const styles = css `
 
   :host {
     display: inline-block;
-    --tab-border-radius: var(--nile-radius-md, var(--ng-radius-md));
-    --tab-padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-3px, var(--ng-spacing-xs)) var(--nile-spacing-lg, var(--ng--spacing-3)) var(--nile-spacing-3px, var(--ng-spacing-xs));
+    --tab-border-radius: 8px;
+    --tab-padding: 0px 3px 12px 3px;
     --tab-hover-background-color:transparent;
     --tab-active-background-color: transparent;
-    -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([centered]) {
@@ -34,25 +31,25 @@ export const styles = css `
     width: 100%;
     align-items: center;
     border-radius: var(--tab-border-radius);
-    color: var(--nile-colors-inherit, var(--ng-colors-text-quaternary-500));
+    color: var(--nile-colors-gray-light-mode-500);
     padding: var(--tab-padding);
     white-space: nowrap;
     user-select: none;
     cursor: pointer;
     transition: 0.2s box-shadow, 0.2s color;
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-family: var(--nile-font-family-serif);
+    font-size: 14px;
     font-style: normal;
-    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-600));
-    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));
+    font-weight: 600;
+    line-height: 20px;
     letter-spacing: 0.2px;
-    gap: var(--nile-spacing-md, var(--ng-spacing-md));
+    gap: 8px;
     height: 36px;
     box-sizing: border-box;
   }
 
   .tab:hover:not(.tab--disabled) {
-    color: var(--nile-colors-primary-700, var(--ng-colors-text-brand-secondary-700));
+    color: var(--nile-colors-primary-700);
     background-color: var(--tab-hover-background-color);
   }
 
@@ -61,16 +58,16 @@ export const styles = css `
   }
 
   .tab:focus-visible:not(.tab--disabled) {
-    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
+    color: var(--nile-colors-primary-600);
   }
 
   .tab.tab--active:not(.tab--disabled) {
-    color: var(--nile-colors-primary-700, var(--ng-colors-text-brand-secondary-700));
+    color: var(--nile-colors-primary-700);
     background-color: var(--tab-active-background-color);
   }
 
   .tab.tab--closable {
-    padding-inline-end: var(--nile-spacing-xs, var(--ng-spacing-xs));
+    padding-inline-end: 4px;
   }
 
   .tab.tab--disabled {
@@ -79,12 +76,12 @@ export const styles = css `
   }
 
   .tab__close-button {
-    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-sm));
-    margin-inline-start: var(--nile-spacing-xs, var(--ng-spacing-xs));
+    font-size: 14px;
+    margin-inline-start: 4px;
   }
 
   .tab__close-button::part(base) {
-    padding: var(--nile-spacing-xs, var(--ng-spacing-xs));
+    padding: 3px;
   }
 
   @media (forced-colors: active) {