@aquera/nile-elements 1.3.1-beta-1.5 → 1.3.2-beta-1.0

package/src/nile-stepper/nile-stepper.ts

@@ -1,152 +0,0 @@
-/**
- * Copyright Aquera Inc 2023
- *
- * This source code is licensed under the BSD-3-Clause license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { LitElement, html, CSSResultArray, TemplateResult, PropertyValueMap } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { styles } from './nile-stepper.css';
-import NileElement from '../internal/nile-element';
-import { watch } from '../internal/watch';
-import { classMap } from 'lit/directives/class-map.js';
-import { updateItemsInManualMode } from './stepper-utils';
-
-
-/**
- * Nile stepper component.
- *
- * @tag nile-stepper
- *
- */
-@customElement('nile-stepper')
-export class NileStepper extends NileElement {
-
-	@property({ type: Boolean, attribute: 'vertical' }) isVertical: boolean = false;
-	@property({ type: Boolean, attribute: true, reflect:true }) contentBelow: boolean = false;
-	@property({ type: Number, attribute: true, reflect:true }) currentStep: number = 0;
-	@property({ type: Number, attribute: true, reflect:true  }) completedStep: number = 0;
-	@property({ type: String, attribute: true, reflect:true  }) size: 'sm' | 'lg' = 'lg';
-	@property({ type: String, attribute: true, reflect:true  }) icon: string = 'tick';
-	@property({ type: Boolean, attribute: true, reflect:true }) manual: boolean = false;
-
-	protected update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void{
-    super.update(changedProperties);
-		if(changedProperties.has('currentStep') || changedProperties.has('completedStep') || changedProperties.has('manual')){
-			this.updateItems();
-		}
-	}
-
-	@watch('currentStep')
-	handleCurrentStepChanges() {
-		this.updateItems();
-		this.emit('nile-current-change', { value: this.currentStep });
-	}
-
-	@watch('completedStep')
-	handleCompletedStepChanges() {
-		this.updateItems()
-		this.emit('nile-completed-change', { value: this.completedStep });
-	}
-	
-	private updateItems() {
-		const items: any = [...this.querySelectorAll(this.isVertical ? 'nile-vertical-stepper-item' : 'nile-stepper-item')];
-		if (!items.length) return;
-		const haveFlex = items.length < 3;
-
-		if (this.manual) {
-			// Manual mode: use inline properties from each item
-			updateItemsInManualMode(items, {
-				icon: this.icon,
-				size: this.size,
-				contentBelow: this.contentBelow,
-				manual: this.manual,
-				isVertical: this.isVertical
-			}, haveFlex);
-		} else {
-			// Automatic mode: use currentStep and completedStep properties
-			const current = (this.currentStep == 0 || this.currentStep > items.length) ? 1 : this.currentStep;
-			const calculatedCompleted = this.completedStep > items.length ? current : this.completedStep < current ? current : this.completedStep;
-			const completed = this.completedStep > items.length ? 0 : this.completedStep;
-
-			items.forEach((el: any, index: number) => {
-				// set item is complete and is current values
-				if (index + 1 < current) {
-					el.isComplete = true;
-					el.isCurrent = false;
-				}
-				else if (index + 1 == current) {
-					if (index + 1 <= calculatedCompleted) el.isComplete = true;
-					else el.isComplete = false;
-					el.isCurrent = true;
-				}
-				else {
-					if (index + 1 <= calculatedCompleted) el.isComplete = true;
-					else el.isComplete = false;
-					el.isCurrent = false;
-				}
-
-				// Reset and set isLast and isFirst
-				el.isFirst = false;
-				el.isLast = false;
-				if (index == 0) el.isFirst = true;
-				if (index == items.length - 1) el.isLast = true;
-
-				// setting default values
-				el.currentStepValue = current;
-				el.calculatedCompletedStepValue = calculatedCompleted;
-				el.completedStepValue = completed;
-
-				el.icon = this.icon;
-				el.size = this.size;
-				el.value = index + 1;
-				el.contentBelow = this.contentBelow;
-				el.isManualMode = this.manual;
-				if (index == 0 || index == items.length - 1) {
-					el.haveFlex = haveFlex;
-				}
-			});
-		}
-	}
-
-	/**
-	 * The styles for nile-stepper
-	 * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
-	 */
-	public static get styles(): CSSResultArray {
-		return [styles];
-	}
-
-	/* #endregion */
-
-	/* #region Methods */
-
-	/**
-	 * Render method
-	 * @slot This is a slot test
-	 */
-	public render(): TemplateResult {
-		return html`
-			<div part="stepper" class=${classMap({
-				'nile-stepper':true,
-				'nile-stepper--horizontal':!this.isVertical,
-				'nile-stepper--vertical':this.isVertical
-			})}>
-				<slot
-					@slotchange=${this.updateItems}
-				></slot>
-			</div>
-			`;
-	}
-
-	/* #endregion */
-}
-
-export default NileStepper;
-
-declare global {
-	interface HTMLElementTagNameMap {
-		'nile-stepper': NileStepper;
-	}
-}

package/src/nile-stepper/stepper-utils.ts

@@ -1,49 +0,0 @@
-/**
- * Copyright Aquera Inc 2025
- *
- * This source code is licensed under the BSD-3-Clause license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-export interface StepperConfig {
-  icon: string;
-  size: 'sm' | 'lg';
-  contentBelow: boolean;
-  manual: boolean;
-  isVertical: boolean;
-}
-
-/**
- * Updates stepper items in manual mode
- * @param items - Array of stepper item elements
- * @param config - Stepper configuration
- * @param haveFlex - Whether items should have flex layout
- */
-export function updateItemsInManualMode(
-  items: any[],
-  config: StepperConfig,
-  haveFlex: boolean
-): void {
-  items.forEach((el: any, index: number) => {
-    el.isComplete = el.completed;
-    el.isCurrent = el.current;
-
-    el.isFirst = false;
-    el.isLast = false;
-    if (index === 0) el.isFirst = true;
-    if (index === items.length - 1) el.isLast = true;
-
-    el.currentStepValue = 0;
-    el.calculatedCompletedStepValue = 0;
-    el.completedStepValue = 0;
-
-    el.icon = config.icon;
-    el.size = config.size;
-    el.value = index + 1;
-    el.contentBelow = config.contentBelow;
-    el.isManualMode = config.manual;
-    if (index === 0 || index === items.length - 1) {
-      el.haveFlex = haveFlex;
-    }
-  });
-}

package/src/nile-stepper-item/index.ts

@@ -1 +0,0 @@
-export { NileStepperItem } from './nile-stepper-item';

package/src/nile-stepper-item/nile-stepper-item.css.ts

@@ -1,181 +0,0 @@
-/**
-* Copyright Aquera Inc 2023
-*
-* This source code is licensed under the BSD-3-Clause license found in the
-* LICENSE file in the root directory of this source tree.
-*/
-
-import { css } from 'lit';
-
-/**
- * StepperItem CSS
- */
-export const styles = css`
-	:host {
-		--stepper-flex-val:1;
-		--bulletin--dot--seperation:30%;
-		--lines-thickness: var(--nile-width-1px, var(--ng-border-width-2));
-		
-		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));
-	}
-	
-	.stepper__item {
-		margin: var( --nile-spacing-none, var(--ng-spacing-none)) -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-height-16px, var(--ng-line-height-text-sm) );
-		--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-height-18px, var(--ng-line-height-text-md) );
-		--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-height-22px, var(--ng-line-height-text-lg) );
-		--circle-height:26px;
-	}
-
-	.stepper__line__content {
-		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;
-	}
-
-	.stepper__line--hastitle {
-		display:flex;
-		align-items:center;
-	}
-
-	.stepper__line {
-		display: block;
-		border: 0;
-		border-top: var(--lines-thickness) solid var(--nile-colors-neutral-500, var(--ng-colors-border-secondary) );
-	}
-
-	.stepper__line--active {
-		border-top: var(--lines-thickness) solid var( --nile-colors-primary-600, var(--ng-colors-border-brand-alt) );
-	}
-
-	.stepper__item__content--above{
-		position: relative;
-		margin-right: var( --nile-spacing-md, var(--ng-spacing-md));
-	}
-
-	.stepper__item__content--above .stepper__content__subtitle{
-		position: absolute;
-    top: 100%;
-    white-space: nowrap;
-	}
-
-	.stepper__item__content--below {
-		margin-top: var(--item-spacing);
-		display:flex;
-		flex-direction:column;
-		align-items:center;
-	}
-	
-	.stepper__item__bulletin {
-		display:grid;
-		place-content:center;
-		margin: var( --nile-spacing-none, var(--ng-spacing-none)) -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-none, var(--ng-spacing-xxs));
-    	border: var(--nile-spacing-none, var(--ng-border-width-2)) solid var(--ng-colors-effects-focus-ring);
-    	border-radius: 50%;
-	}
-
-	.stepper__content__title {
-		color:var( --nile-colors-dark-900, var(--ng-colors-text-secondary-700));
-		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-semibold));
-	}
-
-	.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) );
-	}
-
-	.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-semibold));
-	}
-
-	.stepper__content__subtitle {
-		color:var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600) );
-		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));
-	}
-
-	.stepper__content__subtitle--active{
-		color:var( --nile-colors-primary-600, var(--ng-colors-text-brand-tertiary-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) );
-	}
-
-	.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) );
-		width: calc( var(--circle-height) + calc( var(--lines-thickness) * 2 ) );
-	}
-
-	.stepper__bulletin--icon {
-		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) );
-		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) );
-		overflow:hidden;
-	}
-	
-	.stepper__bulletin__icon--active {
-		border: 1px solid var( --nile-colors-primary-500, var(--ng-colors-bg-brand-solid) );
-		width: calc(var(--circle-height) + calc( var(--lines-thickness) * 2));
-	}
-`;
-export default [styles];

package/src/nile-stepper-item/nile-stepper-item.ts

@@ -1,166 +0,0 @@
-/**
- * Copyright Aquera Inc 2023
- *
- * This source code is licensed under the BSD-3-Clause license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { LitElement, nothing, html, CSSResultArray, TemplateResult, PropertyValues } from 'lit';
-import { customElement, property, state, query } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { styles } from './nile-stepper-item.css';
-import NileElement from '../internal/nile-element';
-
-
-/**
- * Nile stepper-item component.
- *
- * @tag nile-stepper-item
- *
- */
-@customElement('nile-stepper-item')
-export class NileStepperItem extends NileElement {
-
-	@query('.stepper__item__content--above .stepper__content__title') absoluteTitle:HTMLDivElement;
-	@query('.stepper__item__content--above .stepper__content__subtitle') absoluteSubtitle:HTMLDivElement;
-
-	/* Properties passed directly */
-	@property({attribute: true, reflect: true}) title: string = '';
-	@property({attribute: true, reflect: true}) subtitle: string = '';
-	@property({attribute: true, reflect: true}) completed: boolean = false;
-	@property({attribute: true, reflect: true}) current: boolean = false;
-
-	/* Properties passed to parent component: NileStepper */
-	@state() private contentBelow = false;
-	@state() private size : 'sm' | 'lg' = 'lg';
-	@state() private icon = 'tick';
-
-
-	/* Properties Computed at parent level component NileStepper */
-	@state() private isFirst = false;
-	@state() private isLast = false;
-
-	@state() private isComplete = false;
-	@state() private isCurrent = false;
-	@state() private isManualMode = false;
-	@state() private currentStepValue :Number;
-	@state() private completedStepValue :Number;
-	@state() private calculatedCompletedStepValue :Number;
-
-	@state() private value :Number;
-	@state() private haveFlex :Boolean=true;
-
-	/**
-	 * The styles for nile-stepper-item
-	 * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
-	 */
-	public static get styles(): CSSResultArray {
-		return [styles];
-	}
-
-	protected updated(_changedProperties: PropertyValues): void {
-		if(_changedProperties.has('subtitle') && this.isLast && !this.contentBelow && this.subtitle){
-			const subtitleWidth=this.absoluteSubtitle?.scrollWidth as number ?? '0';
-			this.absoluteTitle.style.minWidth=subtitleWidth+"px"
-		}
-	}
-
-	/* #endregion */
-
-	/* #region Methods */
-
-	/**
-	 * Render method
-	 * @slot This is a slot test
-	 */
-	public render(): TemplateResult {
-
-		if (!this.haveFlex) this.style.setProperty('--stepper-flex-val', `0`);
-		const isCurrent = this.isManualMode ? this.current : this.isCurrent;
-		const isComplete = this.isManualMode ? this.completed : this.isComplete;
-
-		let showCompletedIcon = false;
-		if (isComplete && !isCurrent || this.completedStepValue == this.value) showCompletedIcon = true;
-
-		let suffixStepperLineActive = false;
-		if (isComplete) {
-			suffixStepperLineActive = true;
-			if (this.calculatedCompletedStepValue == this.value) suffixStepperLineActive = false;
-		}
-		return html`
-			<div part="item" class="${classMap({
-				'stepper__item':true,
-				'stepper__item--selected':isCurrent,
-				'stepper__item--sm':this.size=='sm',
-				'stepper__item--lg':this.size=='lg',
-			})}">
-				<div part="line-content" class="stepper__line__content">
-					<div class="stepper__line__container">
-						${this.isFirst ? nothing : html`
-							<hr class="${classMap({
-								'stepper__line':true,
-								'stepper__line--active':isComplete || isCurrent
-							})}"/>
-						`}
-					</div>
-
-					<div part="bulletin" class=${classMap({ 'stepper__item__bulletin':true, 'stepper__item__bulletin--inline': !this.contentBelow })}>
-						${showCompletedIcon ? 
-							html`<div part="bulletin-icon" class="${classMap({ 'stepper__bulletin--icon':true, 'stepper__bulletin__icon--active':isCurrent })}">${this.getSvg()}</div>`
-							: html`<div part="bulletin-dot" class="${classMap({ 'stepper__bulletin--dot':true, 'stepper__bulletin__dot--active':isCurrent })}"></div>`
-						}
-					</div>
-					
-					<div part="line-container" class="${classMap({
-						'stepper__line__container':true,
-						'stepper__line--hastitle':!this.contentBelow
-					})}">
-						${this.contentBelow || !this.title ? nothing:html`
-
-							<div part="content-above" class="stepper__item__content--above">
-								<div part="title_above" class="${classMap({ 'stepper__content__title':true, 'stepper__content__title--active':isCurrent })}">
-									${this.title}
-								</div>
-								<div class="${classMap({ 'stepper__content__subtitle':true, 'stepper__content__subtitle--active':isCurrent })}">${this.subtitle}</div>
-							</div>
-						`}
-						${this.isLast ? nothing : html`
-							<hr part="line" class="${classMap({
-								'stepper__line':true,
-								'stepper__line--active':suffixStepperLineActive
-							})}" style="flex-grow:1;"/>
-						`}
-					</div>
-				</div>
-				${this.contentBelow?
-					html`
-					<div part="content-below" class="stepper__item__content--below">
-						<div part="title_below" class="${classMap({ 'stepper__content__title':true, 'stepper__content__title--active':isCurrent })}">
-							${this.title}
-						</div>
-						<div part="subtitle_below" class="${classMap({ 'stepper__content__subtitle':true, 'stepper__content__subtitle--active':isCurrent })}">${this.subtitle}</div>
-					</div>
-				`:nothing}
-			</div>
-		`;
-	}
-
-	getSvg():TemplateResult{
-		let iconSize = this.size == 'sm' ? 20 : this.size == 'lg' ? 24 : 28;
-		return html`
-		<svg width="${iconSize}" height="${iconSize}" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-			<path fill-rule="evenodd" clip-rule="evenodd" d="M22.7953 9.85334L13.2487 19.0667L10.7153 16.36C10.2487 15.92 9.51534 15.8933 8.982 16.2667C8.462 16.6533 8.31534 17.3333 8.63534 17.88L11.6353 22.76C11.9287 23.2133 12.4353 23.4933 13.0087 23.4933C13.5553 23.4933 14.0753 23.2133 14.3687 22.76C14.8487 22.1333 24.0087 11.2133 24.0087 11.2133C25.2087 9.98668 23.7553 8.90668 22.7953 9.84001V9.85334Z" fill="white"/>
-		</svg>
-		`
-	}
-
-	/* #endregion */
-}
-
-export default NileStepperItem;
-
-declare global {
-	interface HTMLElementTagNameMap {
-		'nile-stepper-item': NileStepperItem;
-	}
-}

package/src/nile-switcher/nile-switcher.css.ts

@@ -1,125 +0,0 @@
-/**
- * Copyright Aquera Inc 2023
- *
- * This source code is licensed under the BSD-3-Clause license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { css } from 'lit';
-
-/**
- * FieldGenerator CSS
- */
-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 {
-    cursor: pointer;
-  }
-  .pointer-cursor-not-allowed {
-    pointer-events: none;
-  }
-
-  .switcher__label {
-    display: flex;
-    align-items: center;
-    color: inherit;
-    color: var(--nile-colors-dark-900);
-    font-family:var(--nile-font-family-serif);
-    font-size: var(--nile-type-scale-3);
-    font-style: normal;
-    font-weight: var(--nile-font-weight-regular);
-    line-height: var(--nile-line-height-xsmall);
-    letter-spacing: 0.2px;
-  }
-
-  switcher-object-mapper:hover {
-    display: flex;
-  }
-
-  .switcher-icon-container.current {
-    background: var(--nile-colors-primary-100);
-  }
-
-  .switcher-container {
-    display: flex;
-  }
-
-  .switcher-inline {
-    gap: var(--nile-spacing-md);
-  }
-
-  .switcher-block {
-    flex-direction: column;
-  }
-
-  .switcher-inline > :nth-child(2) {
-    flex: 1;
-    min-width: 0;
-  }
-
-  .switcher-icons-container {
-    display: flex;
-    margin-left: auto;
-    gap: var(--nile-spacing-md);
-    max-height: 38px;
-    align-items: center;
-  }
-
-  .switcher-block > .switcher-icons-container {
-    margin-left: auto;
-  }
-
-  .label-container {
-    display: flex;
-  }
-
-  .switcher-icon-container {
-    cursor: pointer;
-    justify-content: center;
-    display: flex;
-    align-items: center;
-    margin-bottom: var(--nile-spacing-sm);
-    height: 28px;
-    width: 28px;
-    border-radius: var(--nile-radius-sm);
-  }
-  nile-radio {
-    display: inline-block;
-    padding-right: var(--nile-spacing-lg);
-  }
-
-  .switcher-object-mapper-icon {
-    display: none;
-  }
-  .switcher-object-mapper:hover > .switcher-object-mapper-icon {
-    display: block;
-  }
-  .switcher-object-mapper::part(input) {
-    color: var(--nile-colors-primary-600);
-    cursor: pointer;
-  }
-
-  .switcher-input--noborder::part(base) {
-    border: none;
-  }
-  .switcher-object-mapper--noborder::part(base) {
-    border: none;
-  }
-
-  .switcher-dropdown--noborder::part(combobox) {
-    border: none;
-  }
-
-  .switcher-dropdown--noborder::part(expand-icon) {
-    display: none;
-  }
-`;
-
-export default [styles];