@aquera/nile-elements 1.1.3-beta-1.2 → 1.1.3-beta-2.0

package/dist/nile-badge/nile-badge.test.esm.js

@@ -1 +1 @@
-import{f as i,a as s}from"../fixture-985bba12.esm.js";import{html as n}from"lit/static-html.js";import"lit/html.js";import"lit/directive-helpers.js";import"lit";import"lit/directives/unsafe-html.js";import"./nile-badge.esm.js";import"tslib";import"./nile-badge.css.esm.js";import"../nile-icon-button/nile-icon-button.esm.js";import"lit/decorators.js";import"../nile-icon-button/nile-icon-button.css.esm.js";import"../nile-icon/index.esm.js";import"lit/directives/class-map.js";import"lit/directives/unsafe-svg.js";import"../nile-icon/icons/svg/index.esm.js";import"../nile-icon/icons/svg/access-request.esm.js";import"../nile-icon/icons/svg/accessreview.esm.js";import"../nile-icon/icons/svg/action.esm.js";import"../nile-icon/icons/svg/activity-logs.esm.js";import"../nile-icon/icons/svg/address.esm.js";import"../nile-icon/icons/svg/admin-users.esm.js";import"../nile-icon/icons/svg/agent.esm.js";import"../nile-icon/icons/svg/aggregation.esm.js";import"../nile-icon/icons/svg/alert-circle.esm.js";import"../nile-icon/icons/svg/alert.esm.js";import"../nile-icon/icons/svg/allapplication.esm.js";import"../nile-icon/icons/svg/allsearch.esm.js";import"../nile-icon/icons/svg/analytics.esm.js";import"../nile-icon/icons/svg/api.esm.js";import"../nile-icon/icons/svg/applications-2.esm.js";import"../nile-icon/icons/svg/apply-filter.esm.js";import"../nile-icon/icons/svg/apps.esm.js";import"../nile-icon/icons/svg/aquera.esm.js";import"../nile-icon/icons/svg/aquerasupport.esm.js";import"../nile-icon/icons/svg/array-loop.esm.js";import"../nile-icon/icons/svg/array-of-boolean.esm.js";import"../nile-icon/icons/svg/array-of-integer.esm.js";import"../nile-icon/icons/svg/array-of-string.esm.js";import"../nile-icon/icons/svg/array.esm.js";import"../nile-icon/icons/svg/arrayofobject.esm.js";import"../nile-icon/icons/svg/arrow-narrow-left.esm.js";import"../nile-icon/icons/svg/arrow.esm.js";import"../nile-icon/icons/svg/arrowdown.esm.js";import"../nile-icon/icons/svg/arrowdropdown.esm.js";import"../nile-icon/icons/svg/arrowdropup.esm.js";import"../nile-icon/icons/svg/arrowleft.esm.js";import"../nile-icon/icons/svg/arrowright.esm.js";import"../nile-icon/icons/svg/arrowup.esm.js";import"../nile-icon/icons/svg/attribute-map-analysis-icon.esm.js";import"../nile-icon/icons/svg/attribute.esm.js";import"../nile-icon/icons/svg/attributemap.esm.js";import"../nile-icon/icons/svg/automation-details.esm.js";import"../nile-icon/icons/svg/back.esm.js";import"../nile-icon/icons/svg/bar-and-line-chart.esm.js";import"../nile-icon/icons/svg/bar-chart-square-02.esm.js";import"../nile-icon/icons/svg/bar-chart.esm.js";import"../nile-icon/icons/svg/bargraph.esm.js";import"../nile-icon/icons/svg/block.esm.js";import"../nile-icon/icons/svg/bluedot.esm.js";import"../nile-icon/icons/svg/book-closed.esm.js";import"../nile-icon/icons/svg/boolean.esm.js";import"../nile-icon/icons/svg/border_all.esm.js";import"../nile-icon/icons/svg/box.esm.js";import"../nile-icon/icons/svg/bubble-chart.esm.js";import"../nile-icon/icons/svg/bulk-sync.esm.js";import"../nile-icon/icons/svg/button-loading-black.esm.js";import"../nile-icon/icons/svg/button-loading-blue-animated.esm.js";import"../nile-icon/icons/svg/button-loading-blue.esm.js";import"../nile-icon/icons/svg/button-loading-white.esm.js";import"../nile-icon/icons/svg/calendar.esm.js";import"../nile-icon/icons/svg/cases.esm.js";import"../nile-icon/icons/svg/cell-loader.esm.js";import"../nile-icon/icons/svg/certification.esm.js";import"../nile-icon/icons/svg/check-circle.esm.js";import"../nile-icon/icons/svg/check-done-01.esm.js";import"../nile-icon/icons/svg/check-done-02.esm.js";import"../nile-icon/icons/svg/chevron-left-double.esm.js";import"../nile-icon/icons/svg/chevron-up.esm.js";import"../nile-icon/icons/svg/class.esm.js";import"../nile-icon/icons/svg/clock-check.esm.js";import"../nile-icon/icons/svg/clock-rewind.esm.js";import"../nile-icon/icons/svg/clock.esm.js";import"../nile-icon/icons/svg/close.esm.js";import"../nile-icon/icons/svg/cloud-01.esm.js";import"../nile-icon/icons/svg/code-generator.esm.js";import"../nile-icon/icons/svg/collapse-1.esm.js";import"../nile-icon/icons/svg/collapse.esm.js";import"../nile-icon/icons/svg/color.esm.js";import"../nile-icon/icons/svg/column-02.esm.js";import"../nile-icon/icons/svg/column-add.esm.js";import"../nile-icon/icons/svg/columns-03.esm.js";import"../nile-icon/icons/svg/combo1.esm.js";import"../nile-icon/icons/svg/comment.esm.js";import"../nile-icon/icons/svg/compact.esm.js";import"../nile-icon/icons/svg/compare-tiles.esm.js";import"../nile-icon/icons/svg/compare.esm.js";import"../nile-icon/icons/svg/component-menu.esm.js";import"../nile-icon/icons/svg/component.esm.js";import"../nile-icon/icons/svg/components-icon.esm.js";import"../nile-icon/icons/svg/componenttext.esm.js";import"../nile-icon/icons/svg/condition.esm.js";import"../nile-icon/icons/svg/conditions.esm.js";import"../nile-icon/icons/svg/connect.esm.js";import"../nile-icon/icons/svg/connectivitymap.esm.js";import"../nile-icon/icons/svg/connectorrightarrow.esm.js";import"../nile-icon/icons/svg/copy-06.esm.js";import"../nile-icon/icons/svg/copy.esm.js";import"../nile-icon/icons/svg/cor-analysis.esm.js";import"../nile-icon/icons/svg/correlation.esm.js";import"../nile-icon/icons/svg/cost-analytics.esm.js";import"../nile-icon/icons/svg/create.esm.js";import"../nile-icon/icons/svg/createuser.esm.js";import"../nile-icon/icons/svg/dashboard.esm.js";import"../nile-icon/icons/svg/data-insight.esm.js";import"../nile-icon/icons/svg/data-type-array.esm.js";import"../nile-icon/icons/svg/data-type-boolean.esm.js";import"../nile-icon/icons/svg/data-type-json.esm.js";import"../nile-icon/icons/svg/data-type-null.esm.js";import"../nile-icon/icons/svg/data-type-number.esm.js";import"../nile-icon/icons/svg/data-type-string.esm.js";import"../nile-icon/icons/svg/data-type-unknown.esm.js";import"../nile-icon/icons/svg/database.esm.js";import"../nile-icon/icons/svg/databaseview.esm.js";import"../nile-icon/icons/svg/dataflow-03.esm.js";import"../nile-icon/icons/svg/dataflow-04.esm.js";import"../nile-icon/icons/svg/default-cursor.esm.js";import"../nile-icon/icons/svg/default.esm.js";import"../nile-icon/icons/svg/delegate.esm.js";import"../nile-icon/icons/svg/delete.esm.js";import"../nile-icon/icons/svg/deligateduser.esm.js";import"../nile-icon/icons/svg/directory.esm.js";import"../nile-icon/icons/svg/disabled.esm.js";import"../nile-icon/icons/svg/dock-to-right.esm.js";import"../nile-icon/icons/svg/document-new.esm.js";import"../nile-icon/icons/svg/done-02.esm.js";import"../nile-icon/icons/svg/done.esm.js";import"../nile-icon/icons/svg/dontmap.esm.js";import"../nile-icon/icons/svg/donut.esm.js";import"../nile-icon/icons/svg/dotpoints-02.esm.js";import"../nile-icon/icons/svg/dots-grid.esm.js";import"../nile-icon/icons/svg/doublearrowleft.esm.js";import"../nile-icon/icons/svg/doublearrowright.esm.js";import"../nile-icon/icons/svg/dowhileloop.esm.js";import"../nile-icon/icons/svg/downgrade.esm.js";import"../nile-icon/icons/svg/download.esm.js";import"../nile-icon/icons/svg/drag.esm.js";import"../nile-icon/icons/svg/edit-write.esm.js";import"../nile-icon/icons/svg/else.esm.js";import"../nile-icon/icons/svg/email.esm.js";import"../nile-icon/icons/svg/enable.esm.js";import"../nile-icon/icons/svg/entities.esm.js";import"../nile-icon/icons/svg/entitlement.esm.js";import"../nile-icon/icons/svg/error.esm.js";import"../nile-icon/icons/svg/escalate.esm.js";import"../nile-icon/icons/svg/exactmatch.esm.js";import"../nile-icon/icons/svg/execute.esm.js";import"../nile-icon/icons/svg/expand-03.esm.js";import"../nile-icon/icons/svg/expand-06.esm.js";import"../nile-icon/icons/svg/expand-2.esm.js";import"../nile-icon/icons/svg/expand.esm.js";import"../nile-icon/icons/svg/eye-off.esm.js";import"../nile-icon/icons/svg/eye.esm.js";import"../nile-icon/icons/svg/eyeclosed.esm.js";import"../nile-icon/icons/svg/featured-icon.esm.js";import"../nile-icon/icons/svg/file-06.esm.js";import"../nile-icon/icons/svg/file-check-02.esm.js";import"../nile-icon/icons/svg/file-shield-01.esm.js";import"../nile-icon/icons/svg/file-shield-02.esm.js";import"../nile-icon/icons/svg/file-type-icon.esm.js";import"../nile-icon/icons/svg/file.esm.js";import"../nile-icon/icons/svg/filter-1.esm.js";import"../nile-icon/icons/svg/filter.esm.js";import"../nile-icon/icons/svg/fingerprint-03.esm.js";import"../nile-icon/icons/svg/firewall.esm.js";import"../nile-icon/icons/svg/firewallagent.esm.js";import"../nile-icon/icons/svg/flow.esm.js";import"../nile-icon/icons/svg/flowmap-agent.esm.js";import"../nile-icon/icons/svg/flowmap-application.esm.js";import"../nile-icon/icons/svg/flowmap-colorpalatte.esm.js";import"../nile-icon/icons/svg/flowmap-firewall-agent.esm.js";import"../nile-icon/icons/svg/flowmap-firewall.esm.js";import"../nile-icon/icons/svg/flowmap-gateway.esm.js";import"../nile-icon/icons/svg/flowmap-orchestration.esm.js";import"../nile-icon/icons/svg/flowmap-undo.esm.js";import"../nile-icon/icons/svg/flowmap-workflow.esm.js";import"../nile-icon/icons/svg/flowmap.esm.js";import"../nile-icon/icons/svg/folder.esm.js";import"../nile-icon/icons/svg/foreach.esm.js";import"../nile-icon/icons/svg/format_align_justify.esm.js";import"../nile-icon/icons/svg/format_align_left.esm.js";import"../nile-icon/icons/svg/format_align_middle.esm.js";import"../nile-icon/icons/svg/format_align_right.esm.js";import"../nile-icon/icons/svg/format_bold.esm.js";import"../nile-icon/icons/svg/format_clear.esm.js";import"../nile-icon/icons/svg/format_italic.esm.js";import"../nile-icon/icons/svg/format_list_bulleted.esm.js";import"../nile-icon/icons/svg/format_list_numbered.esm.js";import"../nile-icon/icons/svg/format_underline.esm.js";import"../nile-icon/icons/svg/frequency.esm.js";import"../nile-icon/icons/svg/full-union.esm.js";import"../nile-icon/icons/svg/fullscreen.esm.js";import"../nile-icon/icons/svg/fullscreenexit.esm.js";import"../nile-icon/icons/svg/fullscreenshrink.esm.js";import"../nile-icon/icons/svg/function.esm.js";import"../nile-icon/icons/svg/funnel-02.esm.js";import"../nile-icon/icons/svg/funnel.esm.js";import"../nile-icon/icons/svg/gateway.esm.js";import"../nile-icon/icons/svg/gauge.esm.js";import"../nile-icon/icons/svg/general.esm.js";import"../nile-icon/icons/svg/generationphase.esm.js";import"../nile-icon/icons/svg/global-search.esm.js";import"../nile-icon/icons/svg/globe-03.esm.js";import"../nile-icon/icons/svg/globe.esm.js";import"../nile-icon/icons/svg/goto.esm.js";import"../nile-icon/icons/svg/graph.esm.js";import"../nile-icon/icons/svg/graphedit.esm.js";import"../nile-icon/icons/svg/greendot.esm.js";import"../nile-icon/icons/svg/greydot.esm.js";import"../nile-icon/icons/svg/greylightdot.esm.js";import"../nile-icon/icons/svg/grid-01.esm.js";import"../nile-icon/icons/svg/group-analysis-icon.esm.js";import"../nile-icon/icons/svg/group.esm.js";import"../nile-icon/icons/svg/groupby.esm.js";import"../nile-icon/icons/svg/groups.esm.js";import"../nile-icon/icons/svg/guide-01.esm.js";import"../nile-icon/icons/svg/guide.esm.js";import"../nile-icon/icons/svg/handtool.esm.js";import"../nile-icon/icons/svg/header-child-workflow.esm.js";import"../nile-icon/icons/svg/header-flows.esm.js";import"../nile-icon/icons/svg/header-tasks.esm.js";import"../nile-icon/icons/svg/headphones-01.esm.js";import"../nile-icon/icons/svg/help.esm.js";import"../nile-icon/icons/svg/helpandsupport.esm.js";import"../nile-icon/icons/svg/helpers.esm.js";import"../nile-icon/icons/svg/helpsupport.esm.js";import"../nile-icon/icons/svg/history.esm.js";import"../nile-icon/icons/svg/identitygraph.esm.js";import"../nile-icon/icons/svg/identityledger.esm.js";import"../nile-icon/icons/svg/ifelse.esm.js";import"../nile-icon/icons/svg/ifelsenew.esm.js";import"../nile-icon/icons/svg/image.esm.js";import"../nile-icon/icons/svg/image_2.esm.js";import"../nile-icon/icons/svg/immutable.esm.js";import"../nile-icon/icons/svg/info-icon.esm.js";import"../nile-icon/icons/svg/info.esm.js";import"../nile-icon/icons/svg/inner-union.esm.js";import"../nile-icon/icons/svg/inprogress.esm.js";import"../nile-icon/icons/svg/insert-at-cursor.esm.js";import"../nile-icon/icons/svg/integer.esm.js";import"../nile-icon/icons/svg/intersection.esm.js";import"../nile-icon/icons/svg/js.esm.js";import"../nile-icon/icons/svg/key-performance-indicator.esm.js";import"../nile-icon/icons/svg/keyboard-01.esm.js";import"../nile-icon/icons/svg/keyword.esm.js";import"../nile-icon/icons/svg/kill.esm.js";import"../nile-icon/icons/svg/laptop-01.esm.js";import"../nile-icon/icons/svg/layers-three-02.esm.js";import"../nile-icon/icons/svg/layout-alt-02.esm.js";import"../nile-icon/icons/svg/layout-alt-03.esm.js";import"../nile-icon/icons/svg/left-join.esm.js";import"../nile-icon/icons/svg/left-union.esm.js";import"../nile-icon/icons/svg/leftpointarrow.esm.js";import"../nile-icon/icons/svg/life-buoy-01.esm.js";import"../nile-icon/icons/svg/line.esm.js";import"../nile-icon/icons/svg/link.esm.js";import"../nile-icon/icons/svg/link_2.esm.js";import"../nile-icon/icons/svg/list-attribute.esm.js";import"../nile-icon/icons/svg/list.esm.js";import"../nile-icon/icons/svg/loader.esm.js";import"../nile-icon/icons/svg/loading.esm.js";import"../nile-icon/icons/svg/loading2.esm.js";import"../nile-icon/icons/svg/lock.esm.js";import"../nile-icon/icons/svg/log-info.esm.js";import"../nile-icon/icons/svg/log.esm.js";import"../nile-icon/icons/svg/logo-white.esm.js";import"../nile-icon/icons/svg/logout.esm.js";import"../nile-icon/icons/svg/logs.esm.js";import"../nile-icon/icons/svg/loop.esm.js";import"../nile-icon/icons/svg/manage.esm.js";import"../nile-icon/icons/svg/map.esm.js";import"../nile-icon/icons/svg/mapcreate.esm.js";import"../nile-icon/icons/svg/mapdont.esm.js";import"../nile-icon/icons/svg/maponcreate.esm.js";import"../nile-icon/icons/svg/maponupdate.esm.js";import"../nile-icon/icons/svg/mapper.esm.js";import"../nile-icon/icons/svg/mapupdate.esm.js";import"../nile-icon/icons/svg/marker-pin-01.esm.js";import"../nile-icon/icons/svg/maximize.esm.js";import"../nile-icon/icons/svg/menu.esm.js";import"../nile-icon/icons/svg/message-notification-square.esm.js";import"../nile-icon/icons/svg/minus.esm.js";import"../nile-icon/icons/svg/monitor-01.esm.js";import"../nile-icon/icons/svg/mouse.esm.js";import"../nile-icon/icons/svg/move-application.esm.js";import"../nile-icon/icons/svg/moveleft.esm.js";import"../nile-icon/icons/svg/moveright.esm.js";import"../nile-icon/icons/svg/mute.esm.js";import"../nile-icon/icons/svg/my-integration.esm.js";import"../nile-icon/icons/svg/new-calendar.esm.js";import"../nile-icon/icons/svg/ng-action.esm.js";import"../nile-icon/icons/svg/ng-activity.esm.js";import"../nile-icon/icons/svg/ng-alert-circle.esm.js";import"../nile-icon/icons/svg/ng-align-center.esm.js";import"../nile-icon/icons/svg/ng-annotation-x.esm.js";import"../nile-icon/icons/svg/ng-arrow-down.esm.js";import"../nile-icon/icons/svg/ng-arrow-narrow-down.esm.js";import"../nile-icon/icons/svg/ng-arrow-narrow-left.esm.js";import"../nile-icon/icons/svg/ng-arrow-narrow-right.esm.js";import"../nile-icon/icons/svg/ng-arrow-up.esm.js";import"../nile-icon/icons/svg/ng-bar-chart-12.esm.js";import"../nile-icon/icons/svg/ng-bell-01.esm.js";import"../nile-icon/icons/svg/ng-bell-ringing-04.esm.js";import"../nile-icon/icons/svg/ng-bold-01.esm.js";import"../nile-icon/icons/svg/ng-building-01.esm.js";import"../nile-icon/icons/svg/ng-building-05.esm.js";import"../nile-icon/icons/svg/ng-button-loading-blue-animated.esm.js";import"../nile-icon/icons/svg/ng-button-loading-blue.esm.js";import"../nile-icon/icons/svg/ng-calendar-plus-02.esm.js";import"../nile-icon/icons/svg/ng-calendar.esm.js";import"../nile-icon/icons/svg/ng-check-circle-broken.esm.js";import"../nile-icon/icons/svg/ng-check-circle.esm.js";import"../nile-icon/icons/svg/ng-check-square-broken.esm.js";import"../nile-icon/icons/svg/ng-check.esm.js";import"../nile-icon/icons/svg/ng-chevron-down.esm.js";import"../nile-icon/icons/svg/ng-chevron-left.esm.js";import"../nile-icon/icons/svg/ng-chevron-right.esm.js";import"../nile-icon/icons/svg/ng-chevron-selector-vertical.esm.js";import"../nile-icon/icons/svg/ng-chevron-up-double.esm.js";import"../nile-icon/icons/svg/ng-chevron-up.esm.js";import"../nile-icon/icons/svg/ng-copy-03.esm.js";import"../nile-icon/icons/svg/ng-dataflow-04.esm.js";import"../nile-icon/icons/svg/ng-dots-grid.esm.js";import"../nile-icon/icons/svg/ng-dots-vertical.esm.js";import"../nile-icon/icons/svg/ng-download-01.esm.js";import"../nile-icon/icons/svg/ng-dropdown.esm.js";import"../nile-icon/icons/svg/ng-edit-02.esm.js";import"../nile-icon/icons/svg/ng-edit-05.esm.js";import"../nile-icon/icons/svg/ng-expand-06.esm.js";import"../nile-icon/icons/svg/ng-eye-off.esm.js";import"../nile-icon/icons/svg/ng-eye.esm.js";import"../nile-icon/icons/svg/ng-file-02.esm.js";import"../nile-icon/icons/svg/ng-file-06.esm.js";import"../nile-icon/icons/svg/ng-file-check-02.esm.js";import"../nile-icon/icons/svg/ng-file-question-03.esm.js";import"../nile-icon/icons/svg/ng-filter-lines.esm.js";import"../nile-icon/icons/svg/ng-grid-01.esm.js";import"../nile-icon/icons/svg/ng-help-circle.esm.js";import"../nile-icon/icons/svg/ng-image-03.esm.js";import"../nile-icon/icons/svg/ng-image-user-left.esm.js";import"../nile-icon/icons/svg/ng-info-circle.esm.js";import"../nile-icon/icons/svg/ng-italic-01.esm.js";import"../nile-icon/icons/svg/ng-layers-three-01.esm.js";import"../nile-icon/icons/svg/ng-list.esm.js";import"../nile-icon/icons/svg/ng-lock-03.esm.js";import"../nile-icon/icons/svg/ng-log-out-01.esm.js";import"../nile-icon/icons/svg/ng-mail-01.esm.js";import"../nile-icon/icons/svg/ng-mail-04.esm.js";import"../nile-icon/icons/svg/ng-marker-pin-01.esm.js";import"../nile-icon/icons/svg/ng-menu-05.esm.js";import"../nile-icon/icons/svg/ng-message-text-square-01.esm.js";import"../nile-icon/icons/svg/ng-minimize-02.esm.js";import"../nile-icon/icons/svg/ng-minus.esm.js";import"../nile-icon/icons/svg/ng-plus.esm.js";import"../nile-icon/icons/svg/ng-refresh-cw-02.esm.js";import"../nile-icon/icons/svg/ng-rocket-02.esm.js";import"../nile-icon/icons/svg/ng-search-lg.esm.js";import"../nile-icon/icons/svg/ng-send-01.esm.js";import"../nile-icon/icons/svg/ng-settings-01.esm.js";import"../nile-icon/icons/svg/ng-share-04.esm.js";import"../nile-icon/icons/svg/ng-share-06.esm.js";import"../nile-icon/icons/svg/ng-stars-02.esm.js";import"../nile-icon/icons/svg/ng-trash-01.esm.js";import"../nile-icon/icons/svg/ng-trash-03.esm.js";import"../nile-icon/icons/svg/ng-trend-up-01.esm.js";import"../nile-icon/icons/svg/ng-underline-01.esm.js";import"../nile-icon/icons/svg/ng-upload-01.esm.js";import"../nile-icon/icons/svg/ng-upload-cloud-02.esm.js";import"../nile-icon/icons/svg/ng-user-01.esm.js";import"../nile-icon/icons/svg/ng-user-check-02-1.esm.js";import"../nile-icon/icons/svg/ng-user-check-02.esm.js";import"../nile-icon/icons/svg/ng-user-plus-02.esm.js";import"../nile-icon/icons/svg/ng-user-right-01.esm.js";import"../nile-icon/icons/svg/ng-users-01.esm.js";import"../nile-icon/icons/svg/ng-x-circle.esm.js";import"../nile-icon/icons/svg/ng-x-close.esm.js";import"../nile-icon/icons/svg/ng-x-square.esm.js";import"../nile-icon/icons/svg/nightingale-chart.esm.js";import"../nile-icon/icons/svg/nlp.esm.js";import"../nile-icon/icons/svg/nomatch.esm.js";import"../nile-icon/icons/svg/note.esm.js";import"../nile-icon/icons/svg/notification.esm.js";import"../nile-icon/icons/svg/notificationadd.esm.js";import"../nile-icon/icons/svg/notificationadded.esm.js";import"../nile-icon/icons/svg/null.esm.js";import"../nile-icon/icons/svg/number.esm.js";import"../nile-icon/icons/svg/numberinput.esm.js";import"../nile-icon/icons/svg/numbers.esm.js";import"../nile-icon/icons/svg/object.esm.js";import"../nile-icon/icons/svg/operators.esm.js";import"../nile-icon/icons/svg/options.esm.js";import"../nile-icon/icons/svg/orchestration-solid.esm.js";import"../nile-icon/icons/svg/orchestration.esm.js";import"../nile-icon/icons/svg/organization.esm.js";import"../nile-icon/icons/svg/other.esm.js";import"../nile-icon/icons/svg/otherdetails.esm.js";import"../nile-icon/icons/svg/override.esm.js";import"../nile-icon/icons/svg/palletemenu.esm.js";import"../nile-icon/icons/svg/paperclip.esm.js";import"../nile-icon/icons/svg/partner.esm.js";import"../nile-icon/icons/svg/partners.esm.js";import"../nile-icon/icons/svg/pause.esm.js";import"../nile-icon/icons/svg/pencil.esm.js";import"../nile-icon/icons/svg/peopletask.esm.js";import"../nile-icon/icons/svg/persistent-variable.esm.js";import"../nile-icon/icons/svg/persistentdata.esm.js";import"../nile-icon/icons/svg/phone.esm.js";import"../nile-icon/icons/svg/pie.esm.js";import"../nile-icon/icons/svg/pin.esm.js";import"../nile-icon/icons/svg/play.esm.js";import"../nile-icon/icons/svg/play_pause.esm.js";import"../nile-icon/icons/svg/plus.esm.js";import"../nile-icon/icons/svg/pluscircle.esm.js";import"../nile-icon/icons/svg/plussquare.esm.js";import"../nile-icon/icons/svg/policy.esm.js";import"../nile-icon/icons/svg/potentialmatch.esm.js";import"../nile-icon/icons/svg/poweron.esm.js";import"../nile-icon/icons/svg/predefined.esm.js";import"../nile-icon/icons/svg/preview.esm.js";import"../nile-icon/icons/svg/printer.esm.js";import"../nile-icon/icons/svg/priority-high.esm.js";import"../nile-icon/icons/svg/priority-highest.esm.js";import"../nile-icon/icons/svg/priority-low.esm.js";import"../nile-icon/icons/svg/priority-medium.esm.js";import"../nile-icon/icons/svg/privilage.esm.js";import"../nile-icon/icons/svg/privilege.esm.js";import"../nile-icon/icons/svg/privilegeobject.esm.js";import"../nile-icon/icons/svg/process.esm.js";import"../nile-icon/icons/svg/professionaldetails.esm.js";import"../nile-icon/icons/svg/question.esm.js";import"../nile-icon/icons/svg/radar.esm.js";import"../nile-icon/icons/svg/radio.esm.js";import"../nile-icon/icons/svg/radioactive.esm.js";import"../nile-icon/icons/svg/radiodone.esm.js";import"../nile-icon/icons/svg/read.esm.js";import"../nile-icon/icons/svg/readexpression.esm.js";import"../nile-icon/icons/svg/readonly.esm.js";import"../nile-icon/icons/svg/readonlyuser.esm.js";import"../nile-icon/icons/svg/readuser.esm.js";import"../nile-icon/icons/svg/reddot.esm.js";import"../nile-icon/icons/svg/redo-02.esm.js";import"../nile-icon/icons/svg/redo.esm.js";import"../nile-icon/icons/svg/refresh.esm.js";import"../nile-icon/icons/svg/reminder.esm.js";import"../nile-icon/icons/svg/resize.esm.js";import"../nile-icon/icons/svg/resource.esm.js";import"../nile-icon/icons/svg/resource_analysis.esm.js";import"../nile-icon/icons/svg/resource_graph.esm.js";import"../nile-icon/icons/svg/restart_alt.esm.js";import"../nile-icon/icons/svg/revocation-cycle.esm.js";import"../nile-icon/icons/svg/right-join.esm.js";import"../nile-icon/icons/svg/right-union.esm.js";import"../nile-icon/icons/svg/rocket-02.esm.js";import"../nile-icon/icons/svg/role.esm.js";import"../nile-icon/icons/svg/run.esm.js";import"../nile-icon/icons/svg/sankey.esm.js";import"../nile-icon/icons/svg/save.esm.js";import"../nile-icon/icons/svg/savings.esm.js";import"../nile-icon/icons/svg/scatter-plot.esm.js";import"../nile-icon/icons/svg/schedule.esm.js";import"../nile-icon/icons/svg/schema.esm.js";import"../nile-icon/icons/svg/script.esm.js";import"../nile-icon/icons/svg/search-steps-icon.esm.js";import"../nile-icon/icons/svg/search.esm.js";import"../nile-icon/icons/svg/section.esm.js";import"../nile-icon/icons/svg/select-02.esm.js";import"../nile-icon/icons/svg/select.esm.js";import"../nile-icon/icons/svg/selectapplication.esm.js";import"../nile-icon/icons/svg/selectattributes.esm.js";import"../nile-icon/icons/svg/semi-circle-donut-chart.esm.js";import"../nile-icon/icons/svg/send.esm.js";import"../nile-icon/icons/svg/sendemail.esm.js";import"../nile-icon/icons/svg/sendescalation.esm.js";import"../nile-icon/icons/svg/sendreminder.esm.js";import"../nile-icon/icons/svg/server-03.esm.js";import"../nile-icon/icons/svg/settings-02.esm.js";import"../nile-icon/icons/svg/settings.esm.js";import"../nile-icon/icons/svg/share.esm.js";import"../nile-icon/icons/svg/shield-01.esm.js";import"../nile-icon/icons/svg/smartcode.esm.js";import"../nile-icon/icons/svg/sort.esm.js";import"../nile-icon/icons/svg/sort_ascending.esm.js";import"../nile-icon/icons/svg/sort_descending.esm.js";import"../nile-icon/icons/svg/sortascending.esm.js";import"../nile-icon/icons/svg/sortdescending.esm.js";import"../nile-icon/icons/svg/sortdown.esm.js";import"../nile-icon/icons/svg/sortup.esm.js";import"../nile-icon/icons/svg/stacked-bar-chart.esm.js";import"../nile-icon/icons/svg/step_into.esm.js";import"../nile-icon/icons/svg/step_out.esm.js";import"../nile-icon/icons/svg/step_over.esm.js";import"../nile-icon/icons/svg/stop.esm.js";import"../nile-icon/icons/svg/storybook.esm.js";import"../nile-icon/icons/svg/string.esm.js";import"../nile-icon/icons/svg/stringinput.esm.js";import"../nile-icon/icons/svg/stringletters.esm.js";import"../nile-icon/icons/svg/support.esm.js";import"../nile-icon/icons/svg/swap.esm.js";import"../nile-icon/icons/svg/switch.esm.js";import"../nile-icon/icons/svg/sync.esm.js";import"../nile-icon/icons/svg/table.esm.js";import"../nile-icon/icons/svg/tag.esm.js";import"../nile-icon/icons/svg/test.esm.js";import"../nile-icon/icons/svg/text-02.esm.js";import"../nile-icon/icons/svg/text.esm.js";import"../nile-icon/icons/svg/textarea-expander.esm.js";import"../nile-icon/icons/svg/thumbsdown.esm.js";import"../nile-icon/icons/svg/thumbsup.esm.js";import"../nile-icon/icons/svg/thumsup.esm.js";import"../nile-icon/icons/svg/tick.esm.js";import"../nile-icon/icons/svg/timeupdate.esm.js";import"../nile-icon/icons/svg/timezone.esm.js";import"../nile-icon/icons/svg/transaction_monitor.esm.js";import"../nile-icon/icons/svg/trend-up-02.esm.js";import"../nile-icon/icons/svg/trigger.esm.js";import"../nile-icon/icons/svg/undo-02.esm.js";import"../nile-icon/icons/svg/undo.esm.js";import"../nile-icon/icons/svg/union.esm.js";import"../nile-icon/icons/svg/unmute.esm.js";import"../nile-icon/icons/svg/update.esm.js";import"../nile-icon/icons/svg/updown.esm.js";import"../nile-icon/icons/svg/upgrade.esm.js";import"../nile-icon/icons/svg/upload.esm.js";import"../nile-icon/icons/svg/user-group.esm.js";import"../nile-icon/icons/svg/user.esm.js";import"../nile-icon/icons/svg/useractive.esm.js";import"../nile-icon/icons/svg/useradd.esm.js";import"../nile-icon/icons/svg/useraddgroup.esm.js";import"../nile-icon/icons/svg/userfind.esm.js";import"../nile-icon/icons/svg/userimport.esm.js";import"../nile-icon/icons/svg/userimportgroup.esm.js";import"../nile-icon/icons/svg/usermixed.esm.js";import"../nile-icon/icons/svg/userremove.esm.js";import"../nile-icon/icons/svg/userremovegroup.esm.js";import"../nile-icon/icons/svg/users-plus.esm.js";import"../nile-icon/icons/svg/users-up.esm.js";import"../nile-icon/icons/svg/users.esm.js";import"../nile-icon/icons/svg/userupdate.esm.js";import"../nile-icon/icons/svg/validationexpression.esm.js";import"../nile-icon/icons/svg/variable-global.esm.js";import"../nile-icon/icons/svg/variable-local.esm.js";import"../nile-icon/icons/svg/variable-new.esm.js";import"../nile-icon/icons/svg/variable.esm.js";import"../nile-icon/icons/svg/video.esm.js";import"../nile-icon/icons/svg/view.esm.js";import"../nile-icon/icons/svg/virtualserver.esm.js";import"../nile-icon/icons/svg/virtualservergroup.esm.js";import"../nile-icon/icons/svg/visibility.esm.js";import"../nile-icon/icons/svg/visibilityoff.esm.js";import"../nile-icon/icons/svg/wait.esm.js";import"../nile-icon/icons/svg/warning-01.esm.js";import"../nile-icon/icons/svg/warning.esm.js";import"../nile-icon/icons/svg/whileloop.esm.js";import"../nile-icon/icons/svg/workflow-application.esm.js";import"../nile-icon/icons/svg/workflow-text.esm.js";import"../nile-icon/icons/svg/workflow.esm.js";import"../nile-icon/icons/svg/writeexpression.esm.js";import"../nile-icon/aliasmap.esm.js";import"lit/directives/if-defined.js";import"../internal/nile-element.esm.js";describe("NileBadge",(()=>{it("should display the default slot content",(async()=>{const o=await i(n`<nile-badge>Badge Content</nile-badge>`);s(o).shadowDom.to.equalSnapshot(),s(o.textContent).to.equal("Badge Content")})),it("should apply the correct variant class based on the variant property",(async()=>{const o=(await i(n`<nile-badge variant="success">Success Badge</nile-badge>`)).shadowRoot.querySelector("span");s(o).to.have.class("badge--success")})),it("should apply the rounded class when rounded is true",(async()=>{const o=(await i(n`<nile-badge rounded>Rounded Badge</nile-badge>`)).shadowRoot.querySelector("span");s(o).to.have.class("badge--rounded")})),it("should apply the pill-outline class when pilltype is pill-outline",(async()=>{const o=(await i(n`<nile-badge pilltype="pill-outline">Pill Outline Badge</nile-badge>`)).shadowRoot.querySelector("span");s(o).to.have.class("badge--pill-outline")})),it("should apply the badge-color class when pilltype is badge-color",(async()=>{const o=(await i(n`<nile-badge pilltype="badge-color">Badge Color Badge</nile-badge>`)).shadowRoot.querySelector("span");s(o).to.have.class("badge--badge-color")})),it("should apply the correct classes when multiple properties are set",(async()=>{const o=(await i(n`<nile-badge variant="warning" rounded pilltype="pill-color">Warning Badge</nile-badge>`)).shadowRoot.querySelector("span");s(o).to.have.class("badge--warning"),s(o).to.have.class("badge--rounded")})),it("should reflect properties to attributes",(async()=>{const o=await i(n`<nile-badge variant="error" rounded pilltype="pill-outline"></nile-badge>`);s(o.getAttribute("variant")).to.equal("error"),s(o.hasAttribute("rounded")).to.be.true,s(o.getAttribute("pilltype")).to.equal("pill-outline")}))}));
+import{f as i,a as s}from"../fixture-9871e8a9.esm.js";import{html as n}from"lit/static-html.js";import"lit/html.js";import"lit/directive-helpers.js";import"lit";import"lit/directives/unsafe-html.js";import"./nile-badge.esm.js";import"tslib";import"./nile-badge.css.esm.js";import"../nile-icon-button/nile-icon-button.esm.js";import"lit/decorators.js";import"../nile-icon-button/nile-icon-button.css.esm.js";import"../nile-icon/index.esm.js";import"lit/directives/class-map.js";import"lit/directives/unsafe-svg.js";import"../nile-icon/icons/svg/index.esm.js";import"../nile-icon/icons/svg/access-request.esm.js";import"../nile-icon/icons/svg/accessreview.esm.js";import"../nile-icon/icons/svg/action.esm.js";import"../nile-icon/icons/svg/activity-logs.esm.js";import"../nile-icon/icons/svg/address.esm.js";import"../nile-icon/icons/svg/admin-users.esm.js";import"../nile-icon/icons/svg/agent.esm.js";import"../nile-icon/icons/svg/aggregation.esm.js";import"../nile-icon/icons/svg/alert-circle.esm.js";import"../nile-icon/icons/svg/alert.esm.js";import"../nile-icon/icons/svg/allapplication.esm.js";import"../nile-icon/icons/svg/allsearch.esm.js";import"../nile-icon/icons/svg/analytics.esm.js";import"../nile-icon/icons/svg/api.esm.js";import"../nile-icon/icons/svg/applications-2.esm.js";import"../nile-icon/icons/svg/apply-filter.esm.js";import"../nile-icon/icons/svg/apps.esm.js";import"../nile-icon/icons/svg/aquera.esm.js";import"../nile-icon/icons/svg/aquerasupport.esm.js";import"../nile-icon/icons/svg/array-loop.esm.js";import"../nile-icon/icons/svg/array-of-boolean.esm.js";import"../nile-icon/icons/svg/array-of-integer.esm.js";import"../nile-icon/icons/svg/array-of-string.esm.js";import"../nile-icon/icons/svg/array.esm.js";import"../nile-icon/icons/svg/arrayofobject.esm.js";import"../nile-icon/icons/svg/arrow-narrow-left.esm.js";import"../nile-icon/icons/svg/arrow.esm.js";import"../nile-icon/icons/svg/arrowdown.esm.js";import"../nile-icon/icons/svg/arrowdropdown.esm.js";import"../nile-icon/icons/svg/arrowdropup.esm.js";import"../nile-icon/icons/svg/arrowleft.esm.js";import"../nile-icon/icons/svg/arrowright.esm.js";import"../nile-icon/icons/svg/arrowup.esm.js";import"../nile-icon/icons/svg/attribute-map-analysis-icon.esm.js";import"../nile-icon/icons/svg/attribute.esm.js";import"../nile-icon/icons/svg/attributemap.esm.js";import"../nile-icon/icons/svg/automation-details.esm.js";import"../nile-icon/icons/svg/back.esm.js";import"../nile-icon/icons/svg/bar-and-line-chart.esm.js";import"../nile-icon/icons/svg/bar-chart-square-02.esm.js";import"../nile-icon/icons/svg/bar-chart.esm.js";import"../nile-icon/icons/svg/bargraph.esm.js";import"../nile-icon/icons/svg/block.esm.js";import"../nile-icon/icons/svg/bluedot.esm.js";import"../nile-icon/icons/svg/book-closed.esm.js";import"../nile-icon/icons/svg/boolean.esm.js";import"../nile-icon/icons/svg/border_all.esm.js";import"../nile-icon/icons/svg/box.esm.js";import"../nile-icon/icons/svg/bubble-chart.esm.js";import"../nile-icon/icons/svg/bulk-sync.esm.js";import"../nile-icon/icons/svg/button-loading-black.esm.js";import"../nile-icon/icons/svg/button-loading-blue-animated.esm.js";import"../nile-icon/icons/svg/button-loading-blue.esm.js";import"../nile-icon/icons/svg/button-loading-white.esm.js";import"../nile-icon/icons/svg/calendar.esm.js";import"../nile-icon/icons/svg/cases.esm.js";import"../nile-icon/icons/svg/cell-loader.esm.js";import"../nile-icon/icons/svg/certification.esm.js";import"../nile-icon/icons/svg/check-circle.esm.js";import"../nile-icon/icons/svg/check-done-01.esm.js";import"../nile-icon/icons/svg/check-done-02.esm.js";import"../nile-icon/icons/svg/chevron-left-double.esm.js";import"../nile-icon/icons/svg/chevron-up.esm.js";import"../nile-icon/icons/svg/class.esm.js";import"../nile-icon/icons/svg/clock-check.esm.js";import"../nile-icon/icons/svg/clock-rewind.esm.js";import"../nile-icon/icons/svg/clock.esm.js";import"../nile-icon/icons/svg/close.esm.js";import"../nile-icon/icons/svg/cloud-01.esm.js";import"../nile-icon/icons/svg/code-generator.esm.js";import"../nile-icon/icons/svg/collapse-1.esm.js";import"../nile-icon/icons/svg/collapse.esm.js";import"../nile-icon/icons/svg/color.esm.js";import"../nile-icon/icons/svg/column-02.esm.js";import"../nile-icon/icons/svg/column-add.esm.js";import"../nile-icon/icons/svg/columns-03.esm.js";import"../nile-icon/icons/svg/combo1.esm.js";import"../nile-icon/icons/svg/comment.esm.js";import"../nile-icon/icons/svg/compact.esm.js";import"../nile-icon/icons/svg/compare-tiles.esm.js";import"../nile-icon/icons/svg/compare.esm.js";import"../nile-icon/icons/svg/component-menu.esm.js";import"../nile-icon/icons/svg/component.esm.js";import"../nile-icon/icons/svg/components-icon.esm.js";import"../nile-icon/icons/svg/componenttext.esm.js";import"../nile-icon/icons/svg/condition.esm.js";import"../nile-icon/icons/svg/conditions.esm.js";import"../nile-icon/icons/svg/connect.esm.js";import"../nile-icon/icons/svg/connectivitymap.esm.js";import"../nile-icon/icons/svg/connectorrightarrow.esm.js";import"../nile-icon/icons/svg/copy-06.esm.js";import"../nile-icon/icons/svg/copy.esm.js";import"../nile-icon/icons/svg/cor-analysis.esm.js";import"../nile-icon/icons/svg/correlation.esm.js";import"../nile-icon/icons/svg/cost-analytics.esm.js";import"../nile-icon/icons/svg/create.esm.js";import"../nile-icon/icons/svg/createuser.esm.js";import"../nile-icon/icons/svg/dashboard.esm.js";import"../nile-icon/icons/svg/data-insight.esm.js";import"../nile-icon/icons/svg/data-type-array.esm.js";import"../nile-icon/icons/svg/data-type-boolean.esm.js";import"../nile-icon/icons/svg/data-type-json.esm.js";import"../nile-icon/icons/svg/data-type-null.esm.js";import"../nile-icon/icons/svg/data-type-number.esm.js";import"../nile-icon/icons/svg/data-type-string.esm.js";import"../nile-icon/icons/svg/data-type-unknown.esm.js";import"../nile-icon/icons/svg/database.esm.js";import"../nile-icon/icons/svg/databaseview.esm.js";import"../nile-icon/icons/svg/dataflow-03.esm.js";import"../nile-icon/icons/svg/dataflow-04.esm.js";import"../nile-icon/icons/svg/default-cursor.esm.js";import"../nile-icon/icons/svg/default.esm.js";import"../nile-icon/icons/svg/delegate.esm.js";import"../nile-icon/icons/svg/delete.esm.js";import"../nile-icon/icons/svg/deligateduser.esm.js";import"../nile-icon/icons/svg/directory.esm.js";import"../nile-icon/icons/svg/disabled.esm.js";import"../nile-icon/icons/svg/dock-to-right.esm.js";import"../nile-icon/icons/svg/document-new.esm.js";import"../nile-icon/icons/svg/done-02.esm.js";import"../nile-icon/icons/svg/done.esm.js";import"../nile-icon/icons/svg/dontmap.esm.js";import"../nile-icon/icons/svg/donut.esm.js";import"../nile-icon/icons/svg/dotpoints-02.esm.js";import"../nile-icon/icons/svg/dots-grid.esm.js";import"../nile-icon/icons/svg/doublearrowleft.esm.js";import"../nile-icon/icons/svg/doublearrowright.esm.js";import"../nile-icon/icons/svg/dowhileloop.esm.js";import"../nile-icon/icons/svg/downgrade.esm.js";import"../nile-icon/icons/svg/download.esm.js";import"../nile-icon/icons/svg/drag.esm.js";import"../nile-icon/icons/svg/edit-write.esm.js";import"../nile-icon/icons/svg/else.esm.js";import"../nile-icon/icons/svg/email.esm.js";import"../nile-icon/icons/svg/enable.esm.js";import"../nile-icon/icons/svg/entities.esm.js";import"../nile-icon/icons/svg/entitlement.esm.js";import"../nile-icon/icons/svg/error.esm.js";import"../nile-icon/icons/svg/escalate.esm.js";import"../nile-icon/icons/svg/exactmatch.esm.js";import"../nile-icon/icons/svg/execute.esm.js";import"../nile-icon/icons/svg/expand-03.esm.js";import"../nile-icon/icons/svg/expand-06.esm.js";import"../nile-icon/icons/svg/expand-2.esm.js";import"../nile-icon/icons/svg/expand.esm.js";import"../nile-icon/icons/svg/eye-off.esm.js";import"../nile-icon/icons/svg/eye.esm.js";import"../nile-icon/icons/svg/eyeclosed.esm.js";import"../nile-icon/icons/svg/featured-icon.esm.js";import"../nile-icon/icons/svg/file-06.esm.js";import"../nile-icon/icons/svg/file-check-02.esm.js";import"../nile-icon/icons/svg/file-shield-01.esm.js";import"../nile-icon/icons/svg/file-shield-02.esm.js";import"../nile-icon/icons/svg/file-type-icon.esm.js";import"../nile-icon/icons/svg/file.esm.js";import"../nile-icon/icons/svg/filter-1.esm.js";import"../nile-icon/icons/svg/filter.esm.js";import"../nile-icon/icons/svg/fingerprint-03.esm.js";import"../nile-icon/icons/svg/firewall.esm.js";import"../nile-icon/icons/svg/firewallagent.esm.js";import"../nile-icon/icons/svg/flow.esm.js";import"../nile-icon/icons/svg/flowmap-agent.esm.js";import"../nile-icon/icons/svg/flowmap-application.esm.js";import"../nile-icon/icons/svg/flowmap-colorpalatte.esm.js";import"../nile-icon/icons/svg/flowmap-firewall-agent.esm.js";import"../nile-icon/icons/svg/flowmap-firewall.esm.js";import"../nile-icon/icons/svg/flowmap-gateway.esm.js";import"../nile-icon/icons/svg/flowmap-orchestration.esm.js";import"../nile-icon/icons/svg/flowmap-undo.esm.js";import"../nile-icon/icons/svg/flowmap-workflow.esm.js";import"../nile-icon/icons/svg/flowmap.esm.js";import"../nile-icon/icons/svg/folder.esm.js";import"../nile-icon/icons/svg/foreach.esm.js";import"../nile-icon/icons/svg/format_align_justify.esm.js";import"../nile-icon/icons/svg/format_align_left.esm.js";import"../nile-icon/icons/svg/format_align_middle.esm.js";import"../nile-icon/icons/svg/format_align_right.esm.js";import"../nile-icon/icons/svg/format_bold.esm.js";import"../nile-icon/icons/svg/format_clear.esm.js";import"../nile-icon/icons/svg/format_italic.esm.js";import"../nile-icon/icons/svg/format_list_bulleted.esm.js";import"../nile-icon/icons/svg/format_list_numbered.esm.js";import"../nile-icon/icons/svg/format_underline.esm.js";import"../nile-icon/icons/svg/frequency.esm.js";import"../nile-icon/icons/svg/full-union.esm.js";import"../nile-icon/icons/svg/fullscreen.esm.js";import"../nile-icon/icons/svg/fullscreenexit.esm.js";import"../nile-icon/icons/svg/fullscreenshrink.esm.js";import"../nile-icon/icons/svg/function.esm.js";import"../nile-icon/icons/svg/funnel-02.esm.js";import"../nile-icon/icons/svg/funnel.esm.js";import"../nile-icon/icons/svg/gateway.esm.js";import"../nile-icon/icons/svg/gauge.esm.js";import"../nile-icon/icons/svg/general.esm.js";import"../nile-icon/icons/svg/generationphase.esm.js";import"../nile-icon/icons/svg/global-search.esm.js";import"../nile-icon/icons/svg/globe-03.esm.js";import"../nile-icon/icons/svg/globe.esm.js";import"../nile-icon/icons/svg/goto.esm.js";import"../nile-icon/icons/svg/graph.esm.js";import"../nile-icon/icons/svg/graphedit.esm.js";import"../nile-icon/icons/svg/greendot.esm.js";import"../nile-icon/icons/svg/greydot.esm.js";import"../nile-icon/icons/svg/greylightdot.esm.js";import"../nile-icon/icons/svg/grid-01.esm.js";import"../nile-icon/icons/svg/group-analysis-icon.esm.js";import"../nile-icon/icons/svg/group.esm.js";import"../nile-icon/icons/svg/groupby.esm.js";import"../nile-icon/icons/svg/groups.esm.js";import"../nile-icon/icons/svg/guide-01.esm.js";import"../nile-icon/icons/svg/guide.esm.js";import"../nile-icon/icons/svg/handtool.esm.js";import"../nile-icon/icons/svg/header-child-workflow.esm.js";import"../nile-icon/icons/svg/header-flows.esm.js";import"../nile-icon/icons/svg/header-tasks.esm.js";import"../nile-icon/icons/svg/headphones-01.esm.js";import"../nile-icon/icons/svg/help.esm.js";import"../nile-icon/icons/svg/helpandsupport.esm.js";import"../nile-icon/icons/svg/helpers.esm.js";import"../nile-icon/icons/svg/helpsupport.esm.js";import"../nile-icon/icons/svg/history.esm.js";import"../nile-icon/icons/svg/identitygraph.esm.js";import"../nile-icon/icons/svg/identityledger.esm.js";import"../nile-icon/icons/svg/ifelse.esm.js";import"../nile-icon/icons/svg/ifelsenew.esm.js";import"../nile-icon/icons/svg/image.esm.js";import"../nile-icon/icons/svg/image_2.esm.js";import"../nile-icon/icons/svg/immutable.esm.js";import"../nile-icon/icons/svg/info-icon.esm.js";import"../nile-icon/icons/svg/info.esm.js";import"../nile-icon/icons/svg/inner-union.esm.js";import"../nile-icon/icons/svg/inprogress.esm.js";import"../nile-icon/icons/svg/insert-at-cursor.esm.js";import"../nile-icon/icons/svg/integer.esm.js";import"../nile-icon/icons/svg/intersection.esm.js";import"../nile-icon/icons/svg/js.esm.js";import"../nile-icon/icons/svg/key-performance-indicator.esm.js";import"../nile-icon/icons/svg/keyboard-01.esm.js";import"../nile-icon/icons/svg/keyword.esm.js";import"../nile-icon/icons/svg/kill.esm.js";import"../nile-icon/icons/svg/laptop-01.esm.js";import"../nile-icon/icons/svg/layers-three-02.esm.js";import"../nile-icon/icons/svg/layout-alt-02.esm.js";import"../nile-icon/icons/svg/layout-alt-03.esm.js";import"../nile-icon/icons/svg/left-join.esm.js";import"../nile-icon/icons/svg/left-union.esm.js";import"../nile-icon/icons/svg/leftpointarrow.esm.js";import"../nile-icon/icons/svg/life-buoy-01.esm.js";import"../nile-icon/icons/svg/line.esm.js";import"../nile-icon/icons/svg/link.esm.js";import"../nile-icon/icons/svg/link_2.esm.js";import"../nile-icon/icons/svg/list-attribute.esm.js";import"../nile-icon/icons/svg/list.esm.js";import"../nile-icon/icons/svg/loader.esm.js";import"../nile-icon/icons/svg/loading.esm.js";import"../nile-icon/icons/svg/loading2.esm.js";import"../nile-icon/icons/svg/lock.esm.js";import"../nile-icon/icons/svg/log-info.esm.js";import"../nile-icon/icons/svg/log.esm.js";import"../nile-icon/icons/svg/logo-white.esm.js";import"../nile-icon/icons/svg/logout.esm.js";import"../nile-icon/icons/svg/logs.esm.js";import"../nile-icon/icons/svg/loop.esm.js";import"../nile-icon/icons/svg/manage.esm.js";import"../nile-icon/icons/svg/map.esm.js";import"../nile-icon/icons/svg/mapcreate.esm.js";import"../nile-icon/icons/svg/mapdont.esm.js";import"../nile-icon/icons/svg/maponcreate.esm.js";import"../nile-icon/icons/svg/maponupdate.esm.js";import"../nile-icon/icons/svg/mapper.esm.js";import"../nile-icon/icons/svg/mapupdate.esm.js";import"../nile-icon/icons/svg/marker-pin-01.esm.js";import"../nile-icon/icons/svg/maximize.esm.js";import"../nile-icon/icons/svg/menu.esm.js";import"../nile-icon/icons/svg/message-notification-square.esm.js";import"../nile-icon/icons/svg/minus.esm.js";import"../nile-icon/icons/svg/monitor-01.esm.js";import"../nile-icon/icons/svg/mouse.esm.js";import"../nile-icon/icons/svg/move-application.esm.js";import"../nile-icon/icons/svg/moveleft.esm.js";import"../nile-icon/icons/svg/moveright.esm.js";import"../nile-icon/icons/svg/mute.esm.js";import"../nile-icon/icons/svg/my-integration.esm.js";import"../nile-icon/icons/svg/new-calendar.esm.js";import"../nile-icon/icons/svg/ng-action.esm.js";import"../nile-icon/icons/svg/ng-activity.esm.js";import"../nile-icon/icons/svg/ng-alert-circle.esm.js";import"../nile-icon/icons/svg/ng-align-center.esm.js";import"../nile-icon/icons/svg/ng-annotation-x.esm.js";import"../nile-icon/icons/svg/ng-arrow-down.esm.js";import"../nile-icon/icons/svg/ng-arrow-narrow-down.esm.js";import"../nile-icon/icons/svg/ng-arrow-narrow-left.esm.js";import"../nile-icon/icons/svg/ng-arrow-narrow-right.esm.js";import"../nile-icon/icons/svg/ng-arrow-up.esm.js";import"../nile-icon/icons/svg/ng-bar-chart-12.esm.js";import"../nile-icon/icons/svg/ng-bell-01.esm.js";import"../nile-icon/icons/svg/ng-bell-ringing-04.esm.js";import"../nile-icon/icons/svg/ng-bold-01.esm.js";import"../nile-icon/icons/svg/ng-building-01.esm.js";import"../nile-icon/icons/svg/ng-building-05.esm.js";import"../nile-icon/icons/svg/ng-button-loading-blue-animated.esm.js";import"../nile-icon/icons/svg/ng-button-loading-blue.esm.js";import"../nile-icon/icons/svg/ng-calendar-plus-02.esm.js";import"../nile-icon/icons/svg/ng-calendar.esm.js";import"../nile-icon/icons/svg/ng-check-circle-broken.esm.js";import"../nile-icon/icons/svg/ng-check-circle.esm.js";import"../nile-icon/icons/svg/ng-check-square-broken.esm.js";import"../nile-icon/icons/svg/ng-check.esm.js";import"../nile-icon/icons/svg/ng-chevron-down.esm.js";import"../nile-icon/icons/svg/ng-chevron-left.esm.js";import"../nile-icon/icons/svg/ng-chevron-right.esm.js";import"../nile-icon/icons/svg/ng-chevron-selector-vertical.esm.js";import"../nile-icon/icons/svg/ng-chevron-up-double.esm.js";import"../nile-icon/icons/svg/ng-chevron-up.esm.js";import"../nile-icon/icons/svg/ng-copy-03.esm.js";import"../nile-icon/icons/svg/ng-dataflow-04.esm.js";import"../nile-icon/icons/svg/ng-dots-grid.esm.js";import"../nile-icon/icons/svg/ng-dots-vertical.esm.js";import"../nile-icon/icons/svg/ng-download-01.esm.js";import"../nile-icon/icons/svg/ng-dropdown.esm.js";import"../nile-icon/icons/svg/ng-edit-02.esm.js";import"../nile-icon/icons/svg/ng-edit-05.esm.js";import"../nile-icon/icons/svg/ng-expand-06.esm.js";import"../nile-icon/icons/svg/ng-eye-off.esm.js";import"../nile-icon/icons/svg/ng-eye.esm.js";import"../nile-icon/icons/svg/ng-file-02.esm.js";import"../nile-icon/icons/svg/ng-file-06.esm.js";import"../nile-icon/icons/svg/ng-file-check-02.esm.js";import"../nile-icon/icons/svg/ng-file-question-03.esm.js";import"../nile-icon/icons/svg/ng-filter-lines.esm.js";import"../nile-icon/icons/svg/ng-grid-01.esm.js";import"../nile-icon/icons/svg/ng-help-circle.esm.js";import"../nile-icon/icons/svg/ng-image-03.esm.js";import"../nile-icon/icons/svg/ng-image-user-left.esm.js";import"../nile-icon/icons/svg/ng-info-circle.esm.js";import"../nile-icon/icons/svg/ng-italic-01.esm.js";import"../nile-icon/icons/svg/ng-layers-three-01.esm.js";import"../nile-icon/icons/svg/ng-list.esm.js";import"../nile-icon/icons/svg/ng-lock-03.esm.js";import"../nile-icon/icons/svg/ng-log-out-01.esm.js";import"../nile-icon/icons/svg/ng-mail-01.esm.js";import"../nile-icon/icons/svg/ng-mail-04.esm.js";import"../nile-icon/icons/svg/ng-marker-pin-01.esm.js";import"../nile-icon/icons/svg/ng-menu-05.esm.js";import"../nile-icon/icons/svg/ng-message-text-square-01.esm.js";import"../nile-icon/icons/svg/ng-minimize-02.esm.js";import"../nile-icon/icons/svg/ng-minus.esm.js";import"../nile-icon/icons/svg/ng-plus.esm.js";import"../nile-icon/icons/svg/ng-refresh-cw-02.esm.js";import"../nile-icon/icons/svg/ng-rocket-02.esm.js";import"../nile-icon/icons/svg/ng-search-lg.esm.js";import"../nile-icon/icons/svg/ng-send-01.esm.js";import"../nile-icon/icons/svg/ng-settings-01.esm.js";import"../nile-icon/icons/svg/ng-share-04.esm.js";import"../nile-icon/icons/svg/ng-share-06.esm.js";import"../nile-icon/icons/svg/ng-stars-02.esm.js";import"../nile-icon/icons/svg/ng-trash-01.esm.js";import"../nile-icon/icons/svg/ng-trash-03.esm.js";import"../nile-icon/icons/svg/ng-trend-up-01.esm.js";import"../nile-icon/icons/svg/ng-underline-01.esm.js";import"../nile-icon/icons/svg/ng-upload-01.esm.js";import"../nile-icon/icons/svg/ng-upload-cloud-02.esm.js";import"../nile-icon/icons/svg/ng-user-01.esm.js";import"../nile-icon/icons/svg/ng-user-check-02-1.esm.js";import"../nile-icon/icons/svg/ng-user-check-02.esm.js";import"../nile-icon/icons/svg/ng-user-plus-02.esm.js";import"../nile-icon/icons/svg/ng-user-right-01.esm.js";import"../nile-icon/icons/svg/ng-users-01.esm.js";import"../nile-icon/icons/svg/ng-x-circle.esm.js";import"../nile-icon/icons/svg/ng-x-close.esm.js";import"../nile-icon/icons/svg/ng-x-square.esm.js";import"../nile-icon/icons/svg/nightingale-chart.esm.js";import"../nile-icon/icons/svg/nlp.esm.js";import"../nile-icon/icons/svg/nomatch.esm.js";import"../nile-icon/icons/svg/note.esm.js";import"../nile-icon/icons/svg/notification.esm.js";import"../nile-icon/icons/svg/notificationadd.esm.js";import"../nile-icon/icons/svg/notificationadded.esm.js";import"../nile-icon/icons/svg/null.esm.js";import"../nile-icon/icons/svg/number.esm.js";import"../nile-icon/icons/svg/numberinput.esm.js";import"../nile-icon/icons/svg/numbers.esm.js";import"../nile-icon/icons/svg/object.esm.js";import"../nile-icon/icons/svg/operators.esm.js";import"../nile-icon/icons/svg/options.esm.js";import"../nile-icon/icons/svg/orchestration-solid.esm.js";import"../nile-icon/icons/svg/orchestration.esm.js";import"../nile-icon/icons/svg/organization.esm.js";import"../nile-icon/icons/svg/other.esm.js";import"../nile-icon/icons/svg/otherdetails.esm.js";import"../nile-icon/icons/svg/override.esm.js";import"../nile-icon/icons/svg/palletemenu.esm.js";import"../nile-icon/icons/svg/paperclip.esm.js";import"../nile-icon/icons/svg/partner.esm.js";import"../nile-icon/icons/svg/partners.esm.js";import"../nile-icon/icons/svg/pause.esm.js";import"../nile-icon/icons/svg/pencil.esm.js";import"../nile-icon/icons/svg/peopletask.esm.js";import"../nile-icon/icons/svg/persistent-variable.esm.js";import"../nile-icon/icons/svg/persistentdata.esm.js";import"../nile-icon/icons/svg/phone.esm.js";import"../nile-icon/icons/svg/pie.esm.js";import"../nile-icon/icons/svg/pin.esm.js";import"../nile-icon/icons/svg/play.esm.js";import"../nile-icon/icons/svg/play_pause.esm.js";import"../nile-icon/icons/svg/plus.esm.js";import"../nile-icon/icons/svg/pluscircle.esm.js";import"../nile-icon/icons/svg/plussquare.esm.js";import"../nile-icon/icons/svg/policy.esm.js";import"../nile-icon/icons/svg/potentialmatch.esm.js";import"../nile-icon/icons/svg/poweron.esm.js";import"../nile-icon/icons/svg/predefined.esm.js";import"../nile-icon/icons/svg/preview.esm.js";import"../nile-icon/icons/svg/printer.esm.js";import"../nile-icon/icons/svg/priority-high.esm.js";import"../nile-icon/icons/svg/priority-highest.esm.js";import"../nile-icon/icons/svg/priority-low.esm.js";import"../nile-icon/icons/svg/priority-medium.esm.js";import"../nile-icon/icons/svg/privilage.esm.js";import"../nile-icon/icons/svg/privilege.esm.js";import"../nile-icon/icons/svg/privilegeobject.esm.js";import"../nile-icon/icons/svg/process.esm.js";import"../nile-icon/icons/svg/professionaldetails.esm.js";import"../nile-icon/icons/svg/question.esm.js";import"../nile-icon/icons/svg/radar.esm.js";import"../nile-icon/icons/svg/radio.esm.js";import"../nile-icon/icons/svg/radioactive.esm.js";import"../nile-icon/icons/svg/radiodone.esm.js";import"../nile-icon/icons/svg/read.esm.js";import"../nile-icon/icons/svg/readexpression.esm.js";import"../nile-icon/icons/svg/readonly.esm.js";import"../nile-icon/icons/svg/readonlyuser.esm.js";import"../nile-icon/icons/svg/readuser.esm.js";import"../nile-icon/icons/svg/reddot.esm.js";import"../nile-icon/icons/svg/redo-02.esm.js";import"../nile-icon/icons/svg/redo.esm.js";import"../nile-icon/icons/svg/refresh.esm.js";import"../nile-icon/icons/svg/reminder.esm.js";import"../nile-icon/icons/svg/resize.esm.js";import"../nile-icon/icons/svg/resource.esm.js";import"../nile-icon/icons/svg/resource_analysis.esm.js";import"../nile-icon/icons/svg/resource_graph.esm.js";import"../nile-icon/icons/svg/restart_alt.esm.js";import"../nile-icon/icons/svg/revocation-cycle.esm.js";import"../nile-icon/icons/svg/right-join.esm.js";import"../nile-icon/icons/svg/right-union.esm.js";import"../nile-icon/icons/svg/rocket-02.esm.js";import"../nile-icon/icons/svg/role.esm.js";import"../nile-icon/icons/svg/run.esm.js";import"../nile-icon/icons/svg/sankey.esm.js";import"../nile-icon/icons/svg/save.esm.js";import"../nile-icon/icons/svg/savings.esm.js";import"../nile-icon/icons/svg/scatter-plot.esm.js";import"../nile-icon/icons/svg/schedule.esm.js";import"../nile-icon/icons/svg/schema.esm.js";import"../nile-icon/icons/svg/script.esm.js";import"../nile-icon/icons/svg/search-steps-icon.esm.js";import"../nile-icon/icons/svg/search.esm.js";import"../nile-icon/icons/svg/section.esm.js";import"../nile-icon/icons/svg/select-02.esm.js";import"../nile-icon/icons/svg/select.esm.js";import"../nile-icon/icons/svg/selectapplication.esm.js";import"../nile-icon/icons/svg/selectattributes.esm.js";import"../nile-icon/icons/svg/semi-circle-donut-chart.esm.js";import"../nile-icon/icons/svg/send.esm.js";import"../nile-icon/icons/svg/sendemail.esm.js";import"../nile-icon/icons/svg/sendescalation.esm.js";import"../nile-icon/icons/svg/sendreminder.esm.js";import"../nile-icon/icons/svg/server-03.esm.js";import"../nile-icon/icons/svg/settings-02.esm.js";import"../nile-icon/icons/svg/settings.esm.js";import"../nile-icon/icons/svg/share.esm.js";import"../nile-icon/icons/svg/shield-01.esm.js";import"../nile-icon/icons/svg/smartcode.esm.js";import"../nile-icon/icons/svg/sort.esm.js";import"../nile-icon/icons/svg/sort_ascending.esm.js";import"../nile-icon/icons/svg/sort_descending.esm.js";import"../nile-icon/icons/svg/sortascending.esm.js";import"../nile-icon/icons/svg/sortdescending.esm.js";import"../nile-icon/icons/svg/sortdown.esm.js";import"../nile-icon/icons/svg/sortup.esm.js";import"../nile-icon/icons/svg/stacked-bar-chart.esm.js";import"../nile-icon/icons/svg/step_into.esm.js";import"../nile-icon/icons/svg/step_out.esm.js";import"../nile-icon/icons/svg/step_over.esm.js";import"../nile-icon/icons/svg/stop.esm.js";import"../nile-icon/icons/svg/storybook.esm.js";import"../nile-icon/icons/svg/string.esm.js";import"../nile-icon/icons/svg/stringinput.esm.js";import"../nile-icon/icons/svg/stringletters.esm.js";import"../nile-icon/icons/svg/support.esm.js";import"../nile-icon/icons/svg/swap.esm.js";import"../nile-icon/icons/svg/switch.esm.js";import"../nile-icon/icons/svg/sync.esm.js";import"../nile-icon/icons/svg/table.esm.js";import"../nile-icon/icons/svg/tag.esm.js";import"../nile-icon/icons/svg/test.esm.js";import"../nile-icon/icons/svg/text-02.esm.js";import"../nile-icon/icons/svg/text.esm.js";import"../nile-icon/icons/svg/textarea-expander.esm.js";import"../nile-icon/icons/svg/thumbsdown.esm.js";import"../nile-icon/icons/svg/thumbsup.esm.js";import"../nile-icon/icons/svg/thumsup.esm.js";import"../nile-icon/icons/svg/tick.esm.js";import"../nile-icon/icons/svg/timeupdate.esm.js";import"../nile-icon/icons/svg/timezone.esm.js";import"../nile-icon/icons/svg/transaction_monitor.esm.js";import"../nile-icon/icons/svg/trend-up-02.esm.js";import"../nile-icon/icons/svg/trigger.esm.js";import"../nile-icon/icons/svg/undo-02.esm.js";import"../nile-icon/icons/svg/undo.esm.js";import"../nile-icon/icons/svg/union.esm.js";import"../nile-icon/icons/svg/unmute.esm.js";import"../nile-icon/icons/svg/update.esm.js";import"../nile-icon/icons/svg/updown.esm.js";import"../nile-icon/icons/svg/upgrade.esm.js";import"../nile-icon/icons/svg/upload.esm.js";import"../nile-icon/icons/svg/user-group.esm.js";import"../nile-icon/icons/svg/user.esm.js";import"../nile-icon/icons/svg/useractive.esm.js";import"../nile-icon/icons/svg/useradd.esm.js";import"../nile-icon/icons/svg/useraddgroup.esm.js";import"../nile-icon/icons/svg/userfind.esm.js";import"../nile-icon/icons/svg/userimport.esm.js";import"../nile-icon/icons/svg/userimportgroup.esm.js";import"../nile-icon/icons/svg/usermixed.esm.js";import"../nile-icon/icons/svg/userremove.esm.js";import"../nile-icon/icons/svg/userremovegroup.esm.js";import"../nile-icon/icons/svg/users-plus.esm.js";import"../nile-icon/icons/svg/users-up.esm.js";import"../nile-icon/icons/svg/users.esm.js";import"../nile-icon/icons/svg/userupdate.esm.js";import"../nile-icon/icons/svg/validationexpression.esm.js";import"../nile-icon/icons/svg/variable-global.esm.js";import"../nile-icon/icons/svg/variable-local.esm.js";import"../nile-icon/icons/svg/variable-new.esm.js";import"../nile-icon/icons/svg/variable.esm.js";import"../nile-icon/icons/svg/video.esm.js";import"../nile-icon/icons/svg/view.esm.js";import"../nile-icon/icons/svg/virtualserver.esm.js";import"../nile-icon/icons/svg/virtualservergroup.esm.js";import"../nile-icon/icons/svg/visibility.esm.js";import"../nile-icon/icons/svg/visibilityoff.esm.js";import"../nile-icon/icons/svg/wait.esm.js";import"../nile-icon/icons/svg/warning-01.esm.js";import"../nile-icon/icons/svg/warning.esm.js";import"../nile-icon/icons/svg/whileloop.esm.js";import"../nile-icon/icons/svg/workflow-application.esm.js";import"../nile-icon/icons/svg/workflow-text.esm.js";import"../nile-icon/icons/svg/workflow.esm.js";import"../nile-icon/icons/svg/writeexpression.esm.js";import"../nile-icon/aliasmap.esm.js";import"lit/directives/if-defined.js";import"../internal/nile-element.esm.js";describe("NileBadge",(()=>{it("should display the default slot content",(async()=>{const o=await i(n`<nile-badge>Badge Content</nile-badge>`);s(o).shadowDom.to.equalSnapshot(),s(o.textContent).to.equal("Badge Content")})),it("should apply the correct variant class based on the variant property",(async()=>{const o=(await i(n`<nile-badge variant="success">Success Badge</nile-badge>`)).shadowRoot.querySelector("span");s(o).to.have.class("badge--success")})),it("should apply the rounded class when rounded is true",(async()=>{const o=(await i(n`<nile-badge rounded>Rounded Badge</nile-badge>`)).shadowRoot.querySelector("span");s(o).to.have.class("badge--rounded")})),it("should apply the pill-outline class when pilltype is pill-outline",(async()=>{const o=(await i(n`<nile-badge pilltype="pill-outline">Pill Outline Badge</nile-badge>`)).shadowRoot.querySelector("span");s(o).to.have.class("badge--pill-outline")})),it("should apply the badge-color class when pilltype is badge-color",(async()=>{const o=(await i(n`<nile-badge pilltype="badge-color">Badge Color Badge</nile-badge>`)).shadowRoot.querySelector("span");s(o).to.have.class("badge--badge-color")})),it("should apply the correct classes when multiple properties are set",(async()=>{const o=(await i(n`<nile-badge variant="warning" rounded pilltype="pill-color">Warning Badge</nile-badge>`)).shadowRoot.querySelector("span");s(o).to.have.class("badge--warning"),s(o).to.have.class("badge--rounded")})),it("should reflect properties to attributes",(async()=>{const o=await i(n`<nile-badge variant="error" rounded pilltype="pill-outline"></nile-badge>`);s(o.getAttribute("variant")).to.equal("error"),s(o.hasAttribute("rounded")).to.be.true,s(o.getAttribute("pilltype")).to.equal("pill-outline")}))}));

package/dist/nile-button/nile-button.css.cjs.js

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var o,_templateObject,r;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){o=_lit.css;}],execute:function execute(){_export("s",r=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    display: inline-block;\n    position: relative;\n    width: auto;\n    cursor: pointer;\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  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-style: solid;\n    border-width: var(--nile-border-size-1, var(--ng-border-width-1));\n    font-style: normal;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    text-align: center;\n    letter-spacing: 0.2px;\n    text-decoration: none;\n    user-select: none;\n    white-space: nowrap;\n    vertical-align: middle;\n    transition: var(--nile-transition-duration-default, var(--ng-transition-duration-default)) background-color,\n      var(--nile-transition-duration-default, var(--ng-transition-duration-default)) color,\n      var(--nile-transition-duration-default, var(--ng-transition-duration-default)) border,\n      var(--nile-transition-duration-default, var(--ng-transition-duration-default)) box-shadow;\n    cursor: inherit;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));\n    border-radius: var(--nile-radius-base-standard, var(--ng-radius-md));\n    padding: var(--nile-spacing-10px, var(--ng-spacing-md-alt)) var(--nile-spacing-14px, var(--ng-spacing-lg));\n    gap: var(--nile-spacing-5px, var(--ng-spacing-xs));\n    line-height: var(--nile-type-scale-6, var(--ng-spacing-5));\n    box-sizing: border-box;\n    height: var(--nile-height-40px, var(--ng-height-40px));\n  }\n\n  .button::-moz-focus-inner {\n    border: 0;\n  }\n\n  .button:focus {\n    outline: none;\n  }\n\n  .button:focus-visible {\n    outline: var(--nile-outline-5px, --ng-outline-5px) auto var(--ng-colors-bg-brand-solid, -webkit-focus-ring-color);\n    outline-offset: var(--ng-outline-2px, --ng-outline-4px);\n  }\n\n  .button--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .button--disabled * {\n    pointer-events: none;\n  }\n\n  /* Primary */\n  .button--standard.button--primary {\n    background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    border-color: var(--nile-colors-primary-600, var(--ng-primary-standard));  \n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n    box-shadow: var(\n      --nile-textarea-standard-disabled-box-shadow,\n      var(--ng-shadow-xs-skeuomorphic)\n    ); //TODO: fix\n  }\n\n  .button--standard.button--primary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));\n    border-color: var(--nile-colors-primary-700, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  }\n\n  .button--standard.button--primary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid));\n    border-color: var(--nile-colors-primary-900, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  }\n\n  .button--standard.button--primary.button--disabled {\n    background-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  .button--standard.button--primary.button--disabled:hover,\n  .button--standard.button--primary.button--disabled:active {\n    background-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--primary:focus-visible:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    border-color: var(--nile-colors-primary-600, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n    box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring-shadow-xs-skeumorphic));\n  }\n\n  /*  Secondary */\n  .button--standard.button--secondary {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n  }\n\n  .button--standard.button--secondary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary-hover));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));\n  }\n\n  .button--standard.button--secondary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n  }\n\n  .button--standard.button--secondary.button--disabled {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary.button--disabled:hover,\n  .button--standard.button--secondary.button--disabled:active {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary:focus-visible:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring-shadow-xs-skeumorphic));\n  }\n\n  /* Tertiary */\n  .button--standard.button--tertiary {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n  }\n\n  .button--standard.button--tertiary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary-hover));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-hover));\n  }\n\n  .button--standard.button--tertiary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n  }\n\n  .button--standard.button--tertiary.button--disabled,\n  .button--standard.button--tertiary.button--disabled:hover,\n  .button--standard.button--tertiary.button--disabled:active {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  .button--standard.button--tertiary:focus-visible:not(.button--disabled) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n    box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring));\n  }\n\n  /* ghost  */\n  .button--standard.button--ghost {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-border-color-transparent, var(--ng-colors-bg-primary)) ;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n  }\n\n  .button--standard.button--ghost:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary-hover));\n    border-color:  var(--nile-border-color-transparent,  var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-hover));\n  }\n\n  .button--standard.button--ghost:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-border-color-transparent, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n  }\n\n  .button--standard.button--ghost.button--disabled,\n  .button--standard.button--ghost.button--disabled:hover,\n  .button--standard.button--ghost.button--disabled:active {\n    border-color: var(--nile-border-color-transparent,var(--ng-colors-bg-primary));\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-neutral-500,var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  \n\n  /* caution */\n  .button--standard.button--caution {\n    background-color: var(--nile-colors-red-500);\n    border-color: var(--nile-colors-red-500);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--caution:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700);\n    border-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--caution:active:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700);\n    border-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--caution.button--disabled,\n  .button--standard.button--caution.button--disabled:hover,\n  .button--standard.button--caution.button--disabled:active {\n    background-color: var(--nile-colors-neutral-500);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-neutral-400);\n  }\n\n  /* destructive */\n  .button--standard.button--destructive {\n    background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));\n    border-color:  var(--nile-colors-red-500, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs-skeuomorphic));\n  }\n\n  .button--standard.button--destructive:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700, var(--ng-colors-bg-error-solid-hover));\n    border-color: var(--nile-colors-red-700, var(--ng-primary-standard));\n    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs-skeuomorphic));\n  }\n\n  .button--standard.button--destructive:active:not(.button--disabled) {\n    background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));\n    border-color:  var(--nile-colors-red-500, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  }\n  .button--standard.button--destructive:focus-visible:not(.button--disabled) {\n    background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));\n    border-color:  var(--nile-colors-red-500, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n    box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring-error-shadow-xs-skeumorphic))\n  }\n\n  .button--standard.button--destructive.button--disabled {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  .button--standard.button--destructive.button--disabled:active {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-400, var(--ng-primary-standard));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--destructive.button--disabled:hover {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  /* secondary-Grey */\n  .button--standard.button--secondary-grey {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-primary-900);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-grey:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-100);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-dark-900);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-grey:active:not(.button--disabled) {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-primary-900);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(152, 162, 179, 0.14);\n  }\n\n  .button--standard.button--secondary-grey.button--disabled {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary-grey.button--disabled:hover,\n  .button--standard.button--secondary-grey.button--disabled:active {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  /* secondary-blue */\n  .button--standard.button--secondary-blue {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-primary-500);\n    color: var(--nile-colors-primary-700);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-blue:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-blue-100);\n    border-color: var(--nile-colors-primary-500);\n    color: var(--nile-colors-primary-700);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-blue:active:not(.button--disabled) {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-primary-500);\n    color: var(--nile-colors-primary-700);\n    box-shadow: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),\n      0px 0px 0px 4px rgba(0, 94, 166, 0.15);\n  }\n\n  .button--standard.button--secondary-blue.button--disabled {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary-blue.button--disabled:hover,\n  .button--standard.button--secondary-blue.button--disabled:active {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  /* Primary Variant - Nile Icon Fill */\n  .button--standard.button--primary ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-primary-icon)) !important;\n  }\n  .button--standard.button--primary:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--primary:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-primary-icon-hover)) !important;\n  }\n  .button--standard.button--primary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled-subtle)) !important;\n  }\n\n  /* Secondary Variant */\n  .button--standard.button--secondary ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400)) !important;\n  }\n  .button--standard.button--secondary:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--secondary:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-hover)) !important;\n  }\n  .button--standard.button--secondary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled-subtle)) !important;\n  }\n\n  /* Tertiary Variant */\n  .button--standard.button--tertiary ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400)) !important;\n  }\n  .button--standard.button--tertiary:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--tertiary:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-hover)) !important;\n  }\n  .button--standard.button--tertiary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-500, var(--ng-colors-fg-quaternary-400)) !important;\n  }\n\n  /* Ghost Variant */\n  .button--standard.button--ghost ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900) !important;\n  }\n  .button--standard.button--ghost:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--ghost:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900) !important;\n  }\n  .button--standard.button--ghost ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-500) !important;\n  }\n\n  /* Caution Variant */\n  .button--standard.button--caution ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base) !important;\n  }\n  .button--standard.button--caution:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--caution:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base) !important;\n  }\n  .button--standard.button--caution.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-400) !important;\n  }\n\n  /* destructive */\n  .button--standard.button--destructive ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-destructive-primary-icon)) !important;\n  }\n  .button--standard.button--destructive:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--caution:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-destructive-primary-icon-hover)) !important;\n  }\n  .button--standard.button--destructive.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-colors-fg-disabled-subtle)) !important;\n  }\n\n  /*\n   * Outline buttons\n   */\n\n  .button--outline {\n    background: none;\n    border: solid 2px;\n  }\n\n  /* Default */\n  .button--outline.button--secondary {\n    border-color: var(--nile-colors-neutral-300);\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .button--outline.button--secondary:hover:not(.button--disabled),\n  .button--outline.button--secondary.button--checked:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--secondary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Primary */\n  .button--outline.button--primary {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-primary-600);\n  }\n\n  .button--outline.button--primary:hover:not(.button--disabled),\n  .button--outline.button--primary.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--primary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Success */\n  .button--outline.button--success {\n    border-color: var(--nile-colors-green-600);\n    color: var(--nile-colors-green-600);\n  }\n\n  .button--outline.button--success:hover:not(.button--disabled),\n  .button--outline.button--success.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--success:active:not(.button--disabled) {\n    border-color: var(--nile-colors-green-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Neutral */\n  .button--outline.button--neutral {\n    border-color: var(--nile-colors-neutral-600);\n    color: var(--nile-colors-neutral-600);\n  }\n\n  .button--outline.button--neutral:hover:not(.button--disabled),\n  .button--outline.button--neutral.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--neutral:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Warning */\n  .button--outline.button--warning {\n    border-color: var(--nile-colors-orange-600);\n    color: var(--nile-colors-orange-600);\n  }\n\n  .button--outline.button--warning:hover:not(.button--disabled),\n  .button--outline.button--warning.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--warning:active:not(.button--disabled) {\n    border-color: var(--nile-colors-orange-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Danger */\n  .button--outline.button--danger {\n    border-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-red-600);\n  }\n\n  .button--outline.button--danger:hover:not(.button--disabled),\n  .button--outline.button--danger.button--checked:not(.button--disabled) {\n    background-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--danger:active:not(.button--disabled) {\n    border-color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* destructive  */\n  .button--outline.button--destructive {\n    border-color: var(--nile-colors-red-400, var(--ng-colors-effects-focus-ring-error));\n    color: var(--nile-colors-red-700);\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--destructive:hover:not(.button--disabled),\n  .button--outline.button--destructive.button--checked:not(.button--disabled) {\n    border-color: var(--nile-colors-red-400);\n    color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-red-100);\n  }\n\n  .button--outline.button--destructive:active:not(.button--disabled) {\n    border-color: var(--nile-colors-red-400);\n    color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-white-base);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n  }\n\n  /* destructive - focus-visible */\n  .button--outline.button--destructive:focus-visible:not(.button--disabled) {\n    border-color: var(--nile-colors-red-400, var(--ng-colors-effects-focus-ring-error));\n    color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-white-base);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n  }\n\n  /* secondary-grey  */\n  .button--outline.button--secondary-grey {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-grey:hover:not(.button--disabled),\n  .button--outline.button--secondary-grey.button--checked:not(\n      .button--disabled\n    ) {\n    color: var(--nile-colors-primary-900);\n    background-color: var(--nile-colors-neutral-100);\n  }\n\n  .button--outline.button--secondary-grey:active:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-grey:focus-visible:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  /* secondary-blue  */\n  .button--outline.button--secondary-blue {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-blue:hover:not(.button--disabled),\n  .button--outline.button--secondary-blue.button--checked:not(\n      .button--disabled\n    ) {\n    color: var(--nile-colors-primary-700);\n    background-color: var(--nile-colors-blue-100);\n  }\n\n  .button--outline.button--secondary-blue:active:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-blue:focus-visible:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  @media (forced-colors: active) {\n    .button.button--outline.button--checked:not(.button--disabled) {\n      outline: solid 2px transparent;\n    }\n  }\n\n  /*\n * Pill modifier\n */\n\n  .button--pill.button--small {\n    border-radius: var(--nile-radius-2xl);\n  }\n\n  .button--pill.button--medium {\n    border-radius: var(--nile-radius-2xl);\n  }\n\n  /*\n * Circle modifier\n */\n\n  .button--circle {\n    padding-left: var(--nile-spacing-none);\n    padding-right: var(--nile-spacing-none);\n  }\n\n  .button--circle.button--small {\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n  }\n\n  .button--circle.button--medium {\n    width: 38px;\n    height: 38px;\n    border-radius: 50%;\n  }\n\n  .button--circle .button__prefix,\n  .button--circle .button__suffix,\n  .button--circle .button__caret {\n    display: none;\n  }\n\n  /* Caret modifier */\n\n  .button--caret .button__suffix {\n    display: none;\n  }\n\n  .button--caret .button__caret {\n    height: auto;\n  }\n\n  /*\n * Loading modifier\n */\n\n  .button--loading {\n    position: relative;\n    cursor: wait;\n  }\n\n  .button--loading .button__prefix,\n  .button--loading .button__label,\n  .button--loading .button__suffix,\n  .button--loading .button__caret {\n    visibility: hidden;\n  }\n\n  .button--loading nile-spinner {\n    --indicator-color: currentColor;\n    position: absolute;\n    font-size: var(--nile-type-scale-3);\n    height: 1em;\n    width: 1em;\n    top: calc(50% - 0.5em);\n    left: calc(50% - 0.5em);\n  }\n  /*\n * Badges\n */\n\n  .button ::slotted(nile-badge) {\n    position: absolute;\n    top: 0;\n    right: 0;\n    translate: 50% -50%;\n    pointer-events: none;\n  }\n\n  /* outline with no border */\n  .button--outline.button--hideborder {\n    border: 0px;\n  }\n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var o,_templateObject,r;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){o=_lit.css;}],execute:function execute(){_export("s",r=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    display: inline-block;\n    position: relative;\n    width: auto;\n    cursor: pointer;\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  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-style: solid;\n    border-width: var(--nile-border-size-1, var(--ng-border-width-1));\n    font-style: normal;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    text-align: center;\n    letter-spacing: 0.2px;\n    text-decoration: none;\n    user-select: none;\n    white-space: nowrap;\n    vertical-align: middle;\n    transition: var(--nile-transition-duration-default, var(--ng-transition-duration-default)) background-color,\n      var(--nile-transition-duration-default, var(--ng-transition-duration-default)) color,\n      var(--nile-transition-duration-default, var(--ng-transition-duration-default)) border,\n      var(--nile-transition-duration-default, var(--ng-transition-duration-default)) box-shadow;\n    cursor: inherit;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));\n    border-radius: var(--nile-radius-base-standard, var(--ng-radius-md));\n    padding: var(--nile-spacing-10px, var(--ng-spacing-md-alt)) var(--nile-spacing-14px, var(--ng-spacing-lg));\n    gap: var(--nile-spacing-5px, var(--ng-spacing-xs));\n    line-height: var(--nile-type-scale-6, var(--ng-spacing-5));\n    box-sizing: border-box;\n    height: var(--nile-height-40px, var(--ng-height-40px));\n  }\n\n  .button::-moz-focus-inner {\n    border: 0;\n  }\n\n  .button:focus {\n    outline: none;\n  }\n\n  .button:focus-visible {\n    outline: var(--nile-outline-5px, --ng-outline-5px) auto var(--ng-colors-bg-brand-solid, -webkit-focus-ring-color);\n    outline-offset: var(--ng-outline-2px, --ng-outline-4px);\n  }\n\n  .button--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .button--disabled * {\n    pointer-events: none;\n  }\n\n  /* Primary */\n  .button--standard.button--primary {\n  position: relative;\n  overflow: hidden; \n  background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n  color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  border-color: var(--nile-colors-primary-600);\n  border-width: var(--nile-border-width-1, var(--ng-border-width-0));\n  border-style: var(--nile-border-style-solid, var(--ng-border-style-none));\n  box-shadow: var(--nile-textarea-standard-disabled-box-shadow, var(--ng-shadow-none));\n}\n\n.button--standard.button--primary::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  background:  var(--ng-skeuemorphic-gradient-border);\n  mask: var(--ng-mask-rim);\n  mask-composite: var(--ng-mask-composite-exclude);  \n  padding: var(--ng-spacing-xxs); \n}\n\n \n.button--standard.button--primary::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  box-shadow: var(--ng-shadow-xs-skeuomorphic)\n}\n\n\n  .button--standard.button--primary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));\n    border-color: var(--nile-colors-primary-700, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  }\n\n  .button--standard.button--primary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid));\n    border-color: var(--nile-colors-primary-900, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  }\n\n  .button--standard.button--primary.button--disabled {\n    background-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  .button--standard.button--primary.button--disabled:hover,\n  .button--standard.button--primary.button--disabled:active {\n    background-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--primary:focus-visible:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    border-color: var(--nile-colors-primary-600, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n    box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring-shadow-xs-skeumorphic));\n  }\n\n  /*  Secondary */\n  .button--standard.button--secondary {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-border-none));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    box-shadow: var(--nile-box-shadow-none,var(--ng-shadow-xs-skeuomorphic));\n    border-width:var(--nile-border-width-1, var(--ng-border-width-0));\n    border-style: var(--nile-border-style-solid, var(--ng-border-style-none));\n  }\n\n  .button--standard.button--secondary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary-hover));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));\n  }\n\n  .button--standard.button--secondary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n  }\n\n  .button--standard.button--secondary.button--disabled {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary.button--disabled:hover,\n  .button--standard.button--secondary.button--disabled:active {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary:focus-visible:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring-shadow-xs-skeumorphic));\n  }\n\n  /* Tertiary */\n  .button--standard.button--tertiary {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n  }\n\n  .button--standard.button--tertiary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary-hover));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-hover));\n  }\n\n  .button--standard.button--tertiary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n  }\n\n  .button--standard.button--tertiary.button--disabled,\n  .button--standard.button--tertiary.button--disabled:hover,\n  .button--standard.button--tertiary.button--disabled:active {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  .button--standard.button--tertiary:focus-visible:not(.button--disabled) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n    box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring));\n  }\n\n  /* ghost  */\n  .button--standard.button--ghost {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-border-color-transparent, var(--ng-colors-bg-primary)) ;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n  }\n\n  .button--standard.button--ghost:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary-hover));\n    border-color:  var(--nile-border-color-transparent,  var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-hover));\n  }\n\n  .button--standard.button--ghost:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-border-color-transparent, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n  }\n\n  .button--standard.button--ghost.button--disabled,\n  .button--standard.button--ghost.button--disabled:hover,\n  .button--standard.button--ghost.button--disabled:active {\n    border-color: var(--nile-border-color-transparent,var(--ng-colors-bg-primary));\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-neutral-500,var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  \n\n  /* caution */\n  .button--standard.button--caution {\n    background-color: var(--nile-colors-red-500);\n    border-color: var(--nile-colors-red-500);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--caution:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700);\n    border-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--caution:active:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700);\n    border-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--caution.button--disabled,\n  .button--standard.button--caution.button--disabled:hover,\n  .button--standard.button--caution.button--disabled:active {\n    background-color: var(--nile-colors-neutral-500);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-neutral-400);\n  }\n\n  /* destructive */\n  .button--standard.button--destructive {\n    position: relative;\n    overflow: hidden; \n    background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));\n    border-color: var(--nile-colors-red-500);\n    border-width: var(--nile-border-width-1, var(--ng-border-width-0));\n    border-style: var(--nile-border-style-solid, var(--ng-border-style-none));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-none));\n  }\n\n\n  .button--standard.button--destructive::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  background:  var(--ng-skeuemorphic-gradient-border);\n  mask: var(--ng-mask-rim);\n  mask-composite: var(--ng-mask-composite-exclude);  \n  padding: var(--ng-spacing-xxs); \n}\n\n \n.button--standard.button--destructive::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  box-shadow: var(--ng-shadow-xs-skeuomorphic)\n}\n\n  .button--standard.button--destructive:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700, var(--ng-colors-bg-error-solid-hover));\n    border-color: var(--nile-colors-red-700, var(--ng-primary-standard));\n    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs-skeuomorphic));\n  }\n\n  .button--standard.button--destructive:active:not(.button--disabled) {\n    background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));\n    border-color:  var(--nile-colors-red-500, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  }\n  .button--standard.button--destructive:focus-visible:not(.button--disabled) {\n    background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));\n    border-color:  var(--nile-colors-red-500, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n    box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring-error-shadow-xs-skeumorphic))\n  }\n\n  .button--standard.button--destructive.button--disabled {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  .button--standard.button--destructive.button--disabled:active {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-400, var(--ng-primary-standard));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--destructive.button--disabled:hover {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  /* secondary-Grey */\n  .button--standard.button--secondary-grey {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-primary-900);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-grey:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-100);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-dark-900);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-grey:active:not(.button--disabled) {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-primary-900);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(152, 162, 179, 0.14);\n  }\n\n  .button--standard.button--secondary-grey.button--disabled {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary-grey.button--disabled:hover,\n  .button--standard.button--secondary-grey.button--disabled:active {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  /* secondary-blue */\n  .button--standard.button--secondary-blue {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-primary-500);\n    color: var(--nile-colors-primary-700);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-blue:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-blue-100);\n    border-color: var(--nile-colors-primary-500);\n    color: var(--nile-colors-primary-700);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-blue:active:not(.button--disabled) {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-primary-500);\n    color: var(--nile-colors-primary-700);\n    box-shadow: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),\n      0px 0px 0px 4px rgba(0, 94, 166, 0.15);\n  }\n\n  .button--standard.button--secondary-blue.button--disabled {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary-blue.button--disabled:hover,\n  .button--standard.button--secondary-blue.button--disabled:active {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  /* Primary Variant - Nile Icon Fill */\n  .button--standard.button--primary ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-primary-icon)) !important;\n  }\n  .button--standard.button--primary:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--primary:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-primary-icon-hover)) !important;\n  }\n  .button--standard.button--primary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled-subtle)) !important;\n  }\n\n  /* Secondary Variant */\n  .button--standard.button--secondary ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400)) !important;\n  }\n  .button--standard.button--secondary:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--secondary:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-hover)) !important;\n  }\n  .button--standard.button--secondary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled-subtle)) !important;\n  }\n\n  /* Tertiary Variant */\n  .button--standard.button--tertiary ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400)) !important;\n  }\n  .button--standard.button--tertiary:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--tertiary:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-hover)) !important;\n  }\n  .button--standard.button--tertiary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-500, var(--ng-colors-fg-quaternary-400)) !important;\n  }\n\n  /* Ghost Variant */\n  .button--standard.button--ghost ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900) !important;\n  }\n  .button--standard.button--ghost:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--ghost:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900) !important;\n  }\n  .button--standard.button--ghost ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-500) !important;\n  }\n\n  /* Caution Variant */\n  .button--standard.button--caution ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base) !important;\n  }\n  .button--standard.button--caution:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--caution:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base) !important;\n  }\n  .button--standard.button--caution.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-400) !important;\n  }\n\n  /* destructive */\n  .button--standard.button--destructive ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-destructive-primary-icon)) !important;\n  }\n  .button--standard.button--destructive:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--caution:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-destructive-primary-icon-hover)) !important;\n  }\n  .button--standard.button--destructive.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-colors-fg-disabled-subtle)) !important;\n  }\n\n  /*\n   * Outline buttons\n   */\n\n  .button--outline {\n    background: none;\n    border: solid 2px;\n  }\n\n  /* Default */\n  .button--outline.button--secondary {\n    border-color: var(--nile-colors-neutral-300);\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .button--outline.button--secondary:hover:not(.button--disabled),\n  .button--outline.button--secondary.button--checked:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--secondary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Primary */\n  .button--outline.button--primary {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-primary-600);\n  }\n\n  .button--outline.button--primary:hover:not(.button--disabled),\n  .button--outline.button--primary.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--primary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Success */\n  .button--outline.button--success {\n    border-color: var(--nile-colors-green-600);\n    color: var(--nile-colors-green-600);\n  }\n\n  .button--outline.button--success:hover:not(.button--disabled),\n  .button--outline.button--success.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--success:active:not(.button--disabled) {\n    border-color: var(--nile-colors-green-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Neutral */\n  .button--outline.button--neutral {\n    border-color: var(--nile-colors-neutral-600);\n    color: var(--nile-colors-neutral-600);\n  }\n\n  .button--outline.button--neutral:hover:not(.button--disabled),\n  .button--outline.button--neutral.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--neutral:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Warning */\n  .button--outline.button--warning {\n    border-color: var(--nile-colors-orange-600);\n    color: var(--nile-colors-orange-600);\n  }\n\n  .button--outline.button--warning:hover:not(.button--disabled),\n  .button--outline.button--warning.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--warning:active:not(.button--disabled) {\n    border-color: var(--nile-colors-orange-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Danger */\n  .button--outline.button--danger {\n    border-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-red-600);\n  }\n\n  .button--outline.button--danger:hover:not(.button--disabled),\n  .button--outline.button--danger.button--checked:not(.button--disabled) {\n    background-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--danger:active:not(.button--disabled) {\n    border-color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* destructive  */\n  .button--outline.button--destructive {\n    border-color: var(--nile-colors-red-400, var(--ng-colors-effects-focus-ring-error));\n    color: var(--nile-colors-red-700);\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--destructive:hover:not(.button--disabled),\n  .button--outline.button--destructive.button--checked:not(.button--disabled) {\n    border-color: var(--nile-colors-red-400);\n    color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-red-100);\n  }\n\n  .button--outline.button--destructive:active:not(.button--disabled) {\n    border-color: var(--nile-colors-red-400);\n    color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-white-base);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n  }\n\n  /* destructive - focus-visible */\n  .button--outline.button--destructive:focus-visible:not(.button--disabled) {\n    border-color: var(--nile-colors-red-400, var(--ng-colors-effects-focus-ring-error));\n    color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-white-base);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n  }\n\n  /* secondary-grey  */\n  .button--outline.button--secondary-grey {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-grey:hover:not(.button--disabled),\n  .button--outline.button--secondary-grey.button--checked:not(\n      .button--disabled\n    ) {\n    color: var(--nile-colors-primary-900);\n    background-color: var(--nile-colors-neutral-100);\n  }\n\n  .button--outline.button--secondary-grey:active:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-grey:focus-visible:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  /* secondary-blue  */\n  .button--outline.button--secondary-blue {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-blue:hover:not(.button--disabled),\n  .button--outline.button--secondary-blue.button--checked:not(\n      .button--disabled\n    ) {\n    color: var(--nile-colors-primary-700);\n    background-color: var(--nile-colors-blue-100);\n  }\n\n  .button--outline.button--secondary-blue:active:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-blue:focus-visible:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  @media (forced-colors: active) {\n    .button.button--outline.button--checked:not(.button--disabled) {\n      outline: solid 2px transparent;\n    }\n  }\n\n  /*\n * Pill modifier\n */\n\n  .button--pill.button--small {\n    border-radius: var(--nile-radius-2xl);\n  }\n\n  .button--pill.button--medium {\n    border-radius: var(--nile-radius-2xl);\n  }\n\n  /*\n * Circle modifier\n */\n\n  .button--circle {\n    padding-left: var(--nile-spacing-none);\n    padding-right: var(--nile-spacing-none);\n  }\n\n  .button--circle.button--small {\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n  }\n\n  .button--circle.button--medium {\n    width: 38px;\n    height: 38px;\n    border-radius: 50%;\n  }\n\n  .button--circle .button__prefix,\n  .button--circle .button__suffix,\n  .button--circle .button__caret {\n    display: none;\n  }\n\n  /* Caret modifier */\n\n  .button--caret .button__suffix {\n    display: none;\n  }\n\n  .button--caret .button__caret {\n    height: auto;\n  }\n\n  /*\n * Loading modifier\n */\n\n  .button--loading {\n    position: relative;\n    cursor: wait;\n  }\n\n  .button--loading .button__prefix,\n  .button--loading .button__label,\n  .button--loading .button__suffix,\n  .button--loading .button__caret {\n    visibility: hidden;\n  }\n\n  .button--loading nile-spinner {\n    --indicator-color: currentColor;\n    position: absolute;\n    font-size: var(--nile-type-scale-3);\n    height: 1em;\n    width: 1em;\n    top: calc(50% - 0.5em);\n    left: calc(50% - 0.5em);\n  }\n  /*\n * Badges\n */\n\n  .button ::slotted(nile-badge) {\n    position: absolute;\n    top: 0;\n    right: 0;\n    translate: 50% -50%;\n    pointer-events: none;\n  }\n\n  /* outline with no border */\n  .button--outline.button--hideborder {\n    border: 0px;\n  }\n"]))));}};});
 //# sourceMappingURL=nile-button.css.cjs.js.map

package/dist/nile-button/nile-button.css.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-button.css.cjs.js","sources":["../../../src/nile-button/nile-button.css.ts"],"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 * Button CSS\n */\nexport const styles = css`\n  :host {\n    display: inline-block;\n    position: relative;\n    width: auto;\n    cursor: pointer;\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  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-style: solid;\n    border-width: var(--nile-border-size-1, var(--ng-border-width-1));\n    font-style: normal;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    text-align: center;\n    letter-spacing: 0.2px;\n    text-decoration: none;\n    user-select: none;\n    white-space: nowrap;\n    vertical-align: middle;\n    transition: var(--nile-transition-duration-default, var(--ng-transition-duration-default)) background-color,\n      var(--nile-transition-duration-default, var(--ng-transition-duration-default)) color,\n      var(--nile-transition-duration-default, var(--ng-transition-duration-default)) border,\n      var(--nile-transition-duration-default, var(--ng-transition-duration-default)) box-shadow;\n    cursor: inherit;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));\n    border-radius: var(--nile-radius-base-standard, var(--ng-radius-md));\n    padding: var(--nile-spacing-10px, var(--ng-spacing-md-alt)) var(--nile-spacing-14px, var(--ng-spacing-lg));\n    gap: var(--nile-spacing-5px, var(--ng-spacing-xs));\n    line-height: var(--nile-type-scale-6, var(--ng-spacing-5));\n    box-sizing: border-box;\n    height: var(--nile-height-40px, var(--ng-height-40px));\n  }\n\n  .button::-moz-focus-inner {\n    border: 0;\n  }\n\n  .button:focus {\n    outline: none;\n  }\n\n  .button:focus-visible {\n    outline: var(--nile-outline-5px, --ng-outline-5px) auto var(--ng-colors-bg-brand-solid, -webkit-focus-ring-color);\n    outline-offset: var(--ng-outline-2px, --ng-outline-4px);\n  }\n\n  .button--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .button--disabled * {\n    pointer-events: none;\n  }\n\n  /* Primary */\n  .button--standard.button--primary {\n    background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    border-color: var(--nile-colors-primary-600, var(--ng-primary-standard));  \n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n    box-shadow: var(\n      --nile-textarea-standard-disabled-box-shadow,\n      var(--ng-shadow-xs-skeuomorphic)\n    ); //TODO: fix\n  }\n\n  .button--standard.button--primary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));\n    border-color: var(--nile-colors-primary-700, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  }\n\n  .button--standard.button--primary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid));\n    border-color: var(--nile-colors-primary-900, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  }\n\n  .button--standard.button--primary.button--disabled {\n    background-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  .button--standard.button--primary.button--disabled:hover,\n  .button--standard.button--primary.button--disabled:active {\n    background-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--primary:focus-visible:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    border-color: var(--nile-colors-primary-600, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n    box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring-shadow-xs-skeumorphic));\n  }\n\n  /*  Secondary */\n  .button--standard.button--secondary {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n  }\n\n  .button--standard.button--secondary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary-hover));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));\n  }\n\n  .button--standard.button--secondary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n  }\n\n  .button--standard.button--secondary.button--disabled {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary.button--disabled:hover,\n  .button--standard.button--secondary.button--disabled:active {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary:focus-visible:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring-shadow-xs-skeumorphic));\n  }\n\n  /* Tertiary */\n  .button--standard.button--tertiary {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n  }\n\n  .button--standard.button--tertiary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary-hover));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-hover));\n  }\n\n  .button--standard.button--tertiary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n  }\n\n  .button--standard.button--tertiary.button--disabled,\n  .button--standard.button--tertiary.button--disabled:hover,\n  .button--standard.button--tertiary.button--disabled:active {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  .button--standard.button--tertiary:focus-visible:not(.button--disabled) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n    box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring));\n  }\n\n  /* ghost  */\n  .button--standard.button--ghost {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-border-color-transparent, var(--ng-colors-bg-primary)) ;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n  }\n\n  .button--standard.button--ghost:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary-hover));\n    border-color:  var(--nile-border-color-transparent,  var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-hover));\n  }\n\n  .button--standard.button--ghost:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-border-color-transparent, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n  }\n\n  .button--standard.button--ghost.button--disabled,\n  .button--standard.button--ghost.button--disabled:hover,\n  .button--standard.button--ghost.button--disabled:active {\n    border-color: var(--nile-border-color-transparent,var(--ng-colors-bg-primary));\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-neutral-500,var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  \n\n  /* caution */\n  .button--standard.button--caution {\n    background-color: var(--nile-colors-red-500);\n    border-color: var(--nile-colors-red-500);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--caution:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700);\n    border-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--caution:active:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700);\n    border-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--caution.button--disabled,\n  .button--standard.button--caution.button--disabled:hover,\n  .button--standard.button--caution.button--disabled:active {\n    background-color: var(--nile-colors-neutral-500);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-neutral-400);\n  }\n\n  /* destructive */\n  .button--standard.button--destructive {\n    background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));\n    border-color:  var(--nile-colors-red-500, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs-skeuomorphic));\n  }\n\n  .button--standard.button--destructive:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700, var(--ng-colors-bg-error-solid-hover));\n    border-color: var(--nile-colors-red-700, var(--ng-primary-standard));\n    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs-skeuomorphic));\n  }\n\n  .button--standard.button--destructive:active:not(.button--disabled) {\n    background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));\n    border-color:  var(--nile-colors-red-500, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  }\n  .button--standard.button--destructive:focus-visible:not(.button--disabled) {\n    background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));\n    border-color:  var(--nile-colors-red-500, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n    box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring-error-shadow-xs-skeumorphic))\n  }\n\n  .button--standard.button--destructive.button--disabled {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  .button--standard.button--destructive.button--disabled:active {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-400, var(--ng-primary-standard));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--destructive.button--disabled:hover {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  /* secondary-Grey */\n  .button--standard.button--secondary-grey {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-primary-900);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-grey:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-100);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-dark-900);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-grey:active:not(.button--disabled) {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-primary-900);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(152, 162, 179, 0.14);\n  }\n\n  .button--standard.button--secondary-grey.button--disabled {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary-grey.button--disabled:hover,\n  .button--standard.button--secondary-grey.button--disabled:active {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  /* secondary-blue */\n  .button--standard.button--secondary-blue {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-primary-500);\n    color: var(--nile-colors-primary-700);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-blue:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-blue-100);\n    border-color: var(--nile-colors-primary-500);\n    color: var(--nile-colors-primary-700);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-blue:active:not(.button--disabled) {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-primary-500);\n    color: var(--nile-colors-primary-700);\n    box-shadow: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),\n      0px 0px 0px 4px rgba(0, 94, 166, 0.15);\n  }\n\n  .button--standard.button--secondary-blue.button--disabled {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary-blue.button--disabled:hover,\n  .button--standard.button--secondary-blue.button--disabled:active {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  /* Primary Variant - Nile Icon Fill */\n  .button--standard.button--primary ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-primary-icon)) !important;\n  }\n  .button--standard.button--primary:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--primary:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-primary-icon-hover)) !important;\n  }\n  .button--standard.button--primary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled-subtle)) !important;\n  }\n\n  /* Secondary Variant */\n  .button--standard.button--secondary ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400)) !important;\n  }\n  .button--standard.button--secondary:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--secondary:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-hover)) !important;\n  }\n  .button--standard.button--secondary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled-subtle)) !important;\n  }\n\n  /* Tertiary Variant */\n  .button--standard.button--tertiary ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400)) !important;\n  }\n  .button--standard.button--tertiary:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--tertiary:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-hover)) !important;\n  }\n  .button--standard.button--tertiary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-500, var(--ng-colors-fg-quaternary-400)) !important;\n  }\n\n  /* Ghost Variant */\n  .button--standard.button--ghost ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900) !important;\n  }\n  .button--standard.button--ghost:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--ghost:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900) !important;\n  }\n  .button--standard.button--ghost ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-500) !important;\n  }\n\n  /* Caution Variant */\n  .button--standard.button--caution ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base) !important;\n  }\n  .button--standard.button--caution:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--caution:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base) !important;\n  }\n  .button--standard.button--caution.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-400) !important;\n  }\n\n  /* destructive */\n  .button--standard.button--destructive ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-destructive-primary-icon)) !important;\n  }\n  .button--standard.button--destructive:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--caution:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-destructive-primary-icon-hover)) !important;\n  }\n  .button--standard.button--destructive.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-colors-fg-disabled-subtle)) !important;\n  }\n\n  /*\n   * Outline buttons\n   */\n\n  .button--outline {\n    background: none;\n    border: solid 2px;\n  }\n\n  /* Default */\n  .button--outline.button--secondary {\n    border-color: var(--nile-colors-neutral-300);\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .button--outline.button--secondary:hover:not(.button--disabled),\n  .button--outline.button--secondary.button--checked:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--secondary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Primary */\n  .button--outline.button--primary {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-primary-600);\n  }\n\n  .button--outline.button--primary:hover:not(.button--disabled),\n  .button--outline.button--primary.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--primary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Success */\n  .button--outline.button--success {\n    border-color: var(--nile-colors-green-600);\n    color: var(--nile-colors-green-600);\n  }\n\n  .button--outline.button--success:hover:not(.button--disabled),\n  .button--outline.button--success.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--success:active:not(.button--disabled) {\n    border-color: var(--nile-colors-green-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Neutral */\n  .button--outline.button--neutral {\n    border-color: var(--nile-colors-neutral-600);\n    color: var(--nile-colors-neutral-600);\n  }\n\n  .button--outline.button--neutral:hover:not(.button--disabled),\n  .button--outline.button--neutral.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--neutral:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Warning */\n  .button--outline.button--warning {\n    border-color: var(--nile-colors-orange-600);\n    color: var(--nile-colors-orange-600);\n  }\n\n  .button--outline.button--warning:hover:not(.button--disabled),\n  .button--outline.button--warning.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--warning:active:not(.button--disabled) {\n    border-color: var(--nile-colors-orange-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Danger */\n  .button--outline.button--danger {\n    border-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-red-600);\n  }\n\n  .button--outline.button--danger:hover:not(.button--disabled),\n  .button--outline.button--danger.button--checked:not(.button--disabled) {\n    background-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--danger:active:not(.button--disabled) {\n    border-color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* destructive  */\n  .button--outline.button--destructive {\n    border-color: var(--nile-colors-red-400, var(--ng-colors-effects-focus-ring-error));\n    color: var(--nile-colors-red-700);\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--destructive:hover:not(.button--disabled),\n  .button--outline.button--destructive.button--checked:not(.button--disabled) {\n    border-color: var(--nile-colors-red-400);\n    color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-red-100);\n  }\n\n  .button--outline.button--destructive:active:not(.button--disabled) {\n    border-color: var(--nile-colors-red-400);\n    color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-white-base);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n  }\n\n  /* destructive - focus-visible */\n  .button--outline.button--destructive:focus-visible:not(.button--disabled) {\n    border-color: var(--nile-colors-red-400, var(--ng-colors-effects-focus-ring-error));\n    color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-white-base);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n  }\n\n  /* secondary-grey  */\n  .button--outline.button--secondary-grey {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-grey:hover:not(.button--disabled),\n  .button--outline.button--secondary-grey.button--checked:not(\n      .button--disabled\n    ) {\n    color: var(--nile-colors-primary-900);\n    background-color: var(--nile-colors-neutral-100);\n  }\n\n  .button--outline.button--secondary-grey:active:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-grey:focus-visible:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  /* secondary-blue  */\n  .button--outline.button--secondary-blue {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-blue:hover:not(.button--disabled),\n  .button--outline.button--secondary-blue.button--checked:not(\n      .button--disabled\n    ) {\n    color: var(--nile-colors-primary-700);\n    background-color: var(--nile-colors-blue-100);\n  }\n\n  .button--outline.button--secondary-blue:active:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-blue:focus-visible:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  @media (forced-colors: active) {\n    .button.button--outline.button--checked:not(.button--disabled) {\n      outline: solid 2px transparent;\n    }\n  }\n\n  /*\n * Pill modifier\n */\n\n  .button--pill.button--small {\n    border-radius: var(--nile-radius-2xl);\n  }\n\n  .button--pill.button--medium {\n    border-radius: var(--nile-radius-2xl);\n  }\n\n  /*\n * Circle modifier\n */\n\n  .button--circle {\n    padding-left: var(--nile-spacing-none);\n    padding-right: var(--nile-spacing-none);\n  }\n\n  .button--circle.button--small {\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n  }\n\n  .button--circle.button--medium {\n    width: 38px;\n    height: 38px;\n    border-radius: 50%;\n  }\n\n  .button--circle .button__prefix,\n  .button--circle .button__suffix,\n  .button--circle .button__caret {\n    display: none;\n  }\n\n  /* Caret modifier */\n\n  .button--caret .button__suffix {\n    display: none;\n  }\n\n  .button--caret .button__caret {\n    height: auto;\n  }\n\n  /*\n * Loading modifier\n */\n\n  .button--loading {\n    position: relative;\n    cursor: wait;\n  }\n\n  .button--loading .button__prefix,\n  .button--loading .button__label,\n  .button--loading .button__suffix,\n  .button--loading .button__caret {\n    visibility: hidden;\n  }\n\n  .button--loading nile-spinner {\n    --indicator-color: currentColor;\n    position: absolute;\n    font-size: var(--nile-type-scale-3);\n    height: 1em;\n    width: 1em;\n    top: calc(50% - 0.5em);\n    left: calc(50% - 0.5em);\n  }\n  /*\n * Badges\n */\n\n  .button ::slotted(nile-badge) {\n    position: absolute;\n    top: 0;\n    right: 0;\n    translate: 50% -50%;\n    pointer-events: none;\n  }\n\n  /* outline with no border */\n  .button--outline.button--hideborder {\n    border: 0px;\n  }\n`;\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-button.css.cjs.js","sources":["../../../src/nile-button/nile-button.css.ts"],"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 * Button CSS\n */\nexport const styles = css`\n  :host {\n    display: inline-block;\n    position: relative;\n    width: auto;\n    cursor: pointer;\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  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-style: solid;\n    border-width: var(--nile-border-size-1, var(--ng-border-width-1));\n    font-style: normal;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    text-align: center;\n    letter-spacing: 0.2px;\n    text-decoration: none;\n    user-select: none;\n    white-space: nowrap;\n    vertical-align: middle;\n    transition: var(--nile-transition-duration-default, var(--ng-transition-duration-default)) background-color,\n      var(--nile-transition-duration-default, var(--ng-transition-duration-default)) color,\n      var(--nile-transition-duration-default, var(--ng-transition-duration-default)) border,\n      var(--nile-transition-duration-default, var(--ng-transition-duration-default)) box-shadow;\n    cursor: inherit;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));\n    border-radius: var(--nile-radius-base-standard, var(--ng-radius-md));\n    padding: var(--nile-spacing-10px, var(--ng-spacing-md-alt)) var(--nile-spacing-14px, var(--ng-spacing-lg));\n    gap: var(--nile-spacing-5px, var(--ng-spacing-xs));\n    line-height: var(--nile-type-scale-6, var(--ng-spacing-5));\n    box-sizing: border-box;\n    height: var(--nile-height-40px, var(--ng-height-40px));\n  }\n\n  .button::-moz-focus-inner {\n    border: 0;\n  }\n\n  .button:focus {\n    outline: none;\n  }\n\n  .button:focus-visible {\n    outline: var(--nile-outline-5px, --ng-outline-5px) auto var(--ng-colors-bg-brand-solid, -webkit-focus-ring-color);\n    outline-offset: var(--ng-outline-2px, --ng-outline-4px);\n  }\n\n  .button--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .button--disabled * {\n    pointer-events: none;\n  }\n\n  /* Primary */\n  .button--standard.button--primary {\n  position: relative;\n  overflow: hidden; \n  background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n  color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  border-color: var(--nile-colors-primary-600);\n  border-width: var(--nile-border-width-1, var(--ng-border-width-0));\n  border-style: var(--nile-border-style-solid, var(--ng-border-style-none));\n  box-shadow: var(--nile-textarea-standard-disabled-box-shadow, var(--ng-shadow-none));\n}\n\n.button--standard.button--primary::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  background:  var(--ng-skeuemorphic-gradient-border);\n  mask: var(--ng-mask-rim);\n  mask-composite: var(--ng-mask-composite-exclude);  \n  padding: var(--ng-spacing-xxs); \n}\n\n \n.button--standard.button--primary::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  box-shadow: var(--ng-shadow-xs-skeuomorphic)\n}\n\n\n  .button--standard.button--primary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));\n    border-color: var(--nile-colors-primary-700, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  }\n\n  .button--standard.button--primary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid));\n    border-color: var(--nile-colors-primary-900, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  }\n\n  .button--standard.button--primary.button--disabled {\n    background-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  .button--standard.button--primary.button--disabled:hover,\n  .button--standard.button--primary.button--disabled:active {\n    background-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--primary:focus-visible:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    border-color: var(--nile-colors-primary-600, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n    box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring-shadow-xs-skeumorphic));\n  }\n\n  /*  Secondary */\n  .button--standard.button--secondary {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-border-none));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    box-shadow: var(--nile-box-shadow-none,var(--ng-shadow-xs-skeuomorphic));\n    border-width:var(--nile-border-width-1, var(--ng-border-width-0));\n    border-style: var(--nile-border-style-solid, var(--ng-border-style-none));\n  }\n\n  .button--standard.button--secondary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary-hover));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));\n  }\n\n  .button--standard.button--secondary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n  }\n\n  .button--standard.button--secondary.button--disabled {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary.button--disabled:hover,\n  .button--standard.button--secondary.button--disabled:active {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary:focus-visible:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring-shadow-xs-skeumorphic));\n  }\n\n  /* Tertiary */\n  .button--standard.button--tertiary {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n  }\n\n  .button--standard.button--tertiary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary-hover));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-hover));\n  }\n\n  .button--standard.button--tertiary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n  }\n\n  .button--standard.button--tertiary.button--disabled,\n  .button--standard.button--tertiary.button--disabled:hover,\n  .button--standard.button--tertiary.button--disabled:active {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  .button--standard.button--tertiary:focus-visible:not(.button--disabled) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n    box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring));\n  }\n\n  /* ghost  */\n  .button--standard.button--ghost {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-border-color-transparent, var(--ng-colors-bg-primary)) ;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n  }\n\n  .button--standard.button--ghost:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary-hover));\n    border-color:  var(--nile-border-color-transparent,  var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-hover));\n  }\n\n  .button--standard.button--ghost:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-border-color-transparent, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n  }\n\n  .button--standard.button--ghost.button--disabled,\n  .button--standard.button--ghost.button--disabled:hover,\n  .button--standard.button--ghost.button--disabled:active {\n    border-color: var(--nile-border-color-transparent,var(--ng-colors-bg-primary));\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-neutral-500,var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  \n\n  /* caution */\n  .button--standard.button--caution {\n    background-color: var(--nile-colors-red-500);\n    border-color: var(--nile-colors-red-500);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--caution:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700);\n    border-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--caution:active:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700);\n    border-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--caution.button--disabled,\n  .button--standard.button--caution.button--disabled:hover,\n  .button--standard.button--caution.button--disabled:active {\n    background-color: var(--nile-colors-neutral-500);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-neutral-400);\n  }\n\n  /* destructive */\n  .button--standard.button--destructive {\n    position: relative;\n    overflow: hidden; \n    background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));\n    border-color: var(--nile-colors-red-500);\n    border-width: var(--nile-border-width-1, var(--ng-border-width-0));\n    border-style: var(--nile-border-style-solid, var(--ng-border-style-none));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-none));\n  }\n\n\n  .button--standard.button--destructive::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  background:  var(--ng-skeuemorphic-gradient-border);\n  mask: var(--ng-mask-rim);\n  mask-composite: var(--ng-mask-composite-exclude);  \n  padding: var(--ng-spacing-xxs); \n}\n\n \n.button--standard.button--destructive::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  box-shadow: var(--ng-shadow-xs-skeuomorphic)\n}\n\n  .button--standard.button--destructive:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700, var(--ng-colors-bg-error-solid-hover));\n    border-color: var(--nile-colors-red-700, var(--ng-primary-standard));\n    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs-skeuomorphic));\n  }\n\n  .button--standard.button--destructive:active:not(.button--disabled) {\n    background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));\n    border-color:  var(--nile-colors-red-500, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  }\n  .button--standard.button--destructive:focus-visible:not(.button--disabled) {\n    background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));\n    border-color:  var(--nile-colors-red-500, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n    box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring-error-shadow-xs-skeumorphic))\n  }\n\n  .button--standard.button--destructive.button--disabled {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  .button--standard.button--destructive.button--disabled:active {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-400, var(--ng-primary-standard));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--destructive.button--disabled:hover {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  /* secondary-Grey */\n  .button--standard.button--secondary-grey {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-primary-900);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-grey:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-100);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-dark-900);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-grey:active:not(.button--disabled) {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-primary-900);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(152, 162, 179, 0.14);\n  }\n\n  .button--standard.button--secondary-grey.button--disabled {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary-grey.button--disabled:hover,\n  .button--standard.button--secondary-grey.button--disabled:active {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  /* secondary-blue */\n  .button--standard.button--secondary-blue {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-primary-500);\n    color: var(--nile-colors-primary-700);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-blue:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-blue-100);\n    border-color: var(--nile-colors-primary-500);\n    color: var(--nile-colors-primary-700);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-blue:active:not(.button--disabled) {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-primary-500);\n    color: var(--nile-colors-primary-700);\n    box-shadow: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),\n      0px 0px 0px 4px rgba(0, 94, 166, 0.15);\n  }\n\n  .button--standard.button--secondary-blue.button--disabled {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary-blue.button--disabled:hover,\n  .button--standard.button--secondary-blue.button--disabled:active {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  /* Primary Variant - Nile Icon Fill */\n  .button--standard.button--primary ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-primary-icon)) !important;\n  }\n  .button--standard.button--primary:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--primary:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-primary-icon-hover)) !important;\n  }\n  .button--standard.button--primary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled-subtle)) !important;\n  }\n\n  /* Secondary Variant */\n  .button--standard.button--secondary ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400)) !important;\n  }\n  .button--standard.button--secondary:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--secondary:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-hover)) !important;\n  }\n  .button--standard.button--secondary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled-subtle)) !important;\n  }\n\n  /* Tertiary Variant */\n  .button--standard.button--tertiary ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400)) !important;\n  }\n  .button--standard.button--tertiary:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--tertiary:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-hover)) !important;\n  }\n  .button--standard.button--tertiary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-500, var(--ng-colors-fg-quaternary-400)) !important;\n  }\n\n  /* Ghost Variant */\n  .button--standard.button--ghost ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900) !important;\n  }\n  .button--standard.button--ghost:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--ghost:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900) !important;\n  }\n  .button--standard.button--ghost ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-500) !important;\n  }\n\n  /* Caution Variant */\n  .button--standard.button--caution ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base) !important;\n  }\n  .button--standard.button--caution:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--caution:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base) !important;\n  }\n  .button--standard.button--caution.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-400) !important;\n  }\n\n  /* destructive */\n  .button--standard.button--destructive ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-destructive-primary-icon)) !important;\n  }\n  .button--standard.button--destructive:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--caution:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-destructive-primary-icon-hover)) !important;\n  }\n  .button--standard.button--destructive.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-colors-fg-disabled-subtle)) !important;\n  }\n\n  /*\n   * Outline buttons\n   */\n\n  .button--outline {\n    background: none;\n    border: solid 2px;\n  }\n\n  /* Default */\n  .button--outline.button--secondary {\n    border-color: var(--nile-colors-neutral-300);\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .button--outline.button--secondary:hover:not(.button--disabled),\n  .button--outline.button--secondary.button--checked:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--secondary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Primary */\n  .button--outline.button--primary {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-primary-600);\n  }\n\n  .button--outline.button--primary:hover:not(.button--disabled),\n  .button--outline.button--primary.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--primary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Success */\n  .button--outline.button--success {\n    border-color: var(--nile-colors-green-600);\n    color: var(--nile-colors-green-600);\n  }\n\n  .button--outline.button--success:hover:not(.button--disabled),\n  .button--outline.button--success.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--success:active:not(.button--disabled) {\n    border-color: var(--nile-colors-green-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Neutral */\n  .button--outline.button--neutral {\n    border-color: var(--nile-colors-neutral-600);\n    color: var(--nile-colors-neutral-600);\n  }\n\n  .button--outline.button--neutral:hover:not(.button--disabled),\n  .button--outline.button--neutral.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--neutral:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Warning */\n  .button--outline.button--warning {\n    border-color: var(--nile-colors-orange-600);\n    color: var(--nile-colors-orange-600);\n  }\n\n  .button--outline.button--warning:hover:not(.button--disabled),\n  .button--outline.button--warning.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--warning:active:not(.button--disabled) {\n    border-color: var(--nile-colors-orange-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Danger */\n  .button--outline.button--danger {\n    border-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-red-600);\n  }\n\n  .button--outline.button--danger:hover:not(.button--disabled),\n  .button--outline.button--danger.button--checked:not(.button--disabled) {\n    background-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--danger:active:not(.button--disabled) {\n    border-color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* destructive  */\n  .button--outline.button--destructive {\n    border-color: var(--nile-colors-red-400, var(--ng-colors-effects-focus-ring-error));\n    color: var(--nile-colors-red-700);\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--destructive:hover:not(.button--disabled),\n  .button--outline.button--destructive.button--checked:not(.button--disabled) {\n    border-color: var(--nile-colors-red-400);\n    color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-red-100);\n  }\n\n  .button--outline.button--destructive:active:not(.button--disabled) {\n    border-color: var(--nile-colors-red-400);\n    color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-white-base);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n  }\n\n  /* destructive - focus-visible */\n  .button--outline.button--destructive:focus-visible:not(.button--disabled) {\n    border-color: var(--nile-colors-red-400, var(--ng-colors-effects-focus-ring-error));\n    color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-white-base);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n  }\n\n  /* secondary-grey  */\n  .button--outline.button--secondary-grey {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-grey:hover:not(.button--disabled),\n  .button--outline.button--secondary-grey.button--checked:not(\n      .button--disabled\n    ) {\n    color: var(--nile-colors-primary-900);\n    background-color: var(--nile-colors-neutral-100);\n  }\n\n  .button--outline.button--secondary-grey:active:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-grey:focus-visible:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  /* secondary-blue  */\n  .button--outline.button--secondary-blue {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-blue:hover:not(.button--disabled),\n  .button--outline.button--secondary-blue.button--checked:not(\n      .button--disabled\n    ) {\n    color: var(--nile-colors-primary-700);\n    background-color: var(--nile-colors-blue-100);\n  }\n\n  .button--outline.button--secondary-blue:active:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-blue:focus-visible:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  @media (forced-colors: active) {\n    .button.button--outline.button--checked:not(.button--disabled) {\n      outline: solid 2px transparent;\n    }\n  }\n\n  /*\n * Pill modifier\n */\n\n  .button--pill.button--small {\n    border-radius: var(--nile-radius-2xl);\n  }\n\n  .button--pill.button--medium {\n    border-radius: var(--nile-radius-2xl);\n  }\n\n  /*\n * Circle modifier\n */\n\n  .button--circle {\n    padding-left: var(--nile-spacing-none);\n    padding-right: var(--nile-spacing-none);\n  }\n\n  .button--circle.button--small {\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n  }\n\n  .button--circle.button--medium {\n    width: 38px;\n    height: 38px;\n    border-radius: 50%;\n  }\n\n  .button--circle .button__prefix,\n  .button--circle .button__suffix,\n  .button--circle .button__caret {\n    display: none;\n  }\n\n  /* Caret modifier */\n\n  .button--caret .button__suffix {\n    display: none;\n  }\n\n  .button--caret .button__caret {\n    height: auto;\n  }\n\n  /*\n * Loading modifier\n */\n\n  .button--loading {\n    position: relative;\n    cursor: wait;\n  }\n\n  .button--loading .button__prefix,\n  .button--loading .button__label,\n  .button--loading .button__suffix,\n  .button--loading .button__caret {\n    visibility: hidden;\n  }\n\n  .button--loading nile-spinner {\n    --indicator-color: currentColor;\n    position: absolute;\n    font-size: var(--nile-type-scale-3);\n    height: 1em;\n    width: 1em;\n    top: calc(50% - 0.5em);\n    left: calc(50% - 0.5em);\n  }\n  /*\n * Badges\n */\n\n  .button ::slotted(nile-badge) {\n    position: absolute;\n    top: 0;\n    right: 0;\n    translate: 50% -50%;\n    pointer-events: none;\n  }\n\n  /* outline with no border */\n  .button--outline.button--hideborder {\n    border: 0px;\n  }\n`;\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

package/dist/nile-button/nile-button.css.esm.js

@@ -62,14 +62,38 @@ import{css as o}from"lit";const r=o`
 
   /* Primary */
   .button--standard.button--primary {
-    background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));
-    border-color: var(--nile-colors-primary-600, var(--ng-primary-standard));  
-    color: var(--nile-colors-white-base, var(--ng-colors-text-white));
-    box-shadow: var(
-      --nile-textarea-standard-disabled-box-shadow,
-      var(--ng-shadow-xs-skeuomorphic)
-    ); //TODO: fix
-  }
+  position: relative;
+  overflow: hidden; 
+  background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));
+  color: var(--nile-colors-white-base, var(--ng-colors-text-white));
+  border-color: var(--nile-colors-primary-600);
+  border-width: var(--nile-border-width-1, var(--ng-border-width-0));
+  border-style: var(--nile-border-style-solid, var(--ng-border-style-none));
+  box-shadow: var(--nile-textarea-standard-disabled-box-shadow, var(--ng-shadow-none));
+}
+
+.button--standard.button--primary::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  background:  var(--ng-skeuemorphic-gradient-border);
+  mask: var(--ng-mask-rim);
+  mask-composite: var(--ng-mask-composite-exclude);  
+  padding: var(--ng-spacing-xxs); 
+}
+
+ 
+.button--standard.button--primary::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  box-shadow: var(--ng-shadow-xs-skeuomorphic)
+}
+
 
   .button--standard.button--primary:hover:not(.button--disabled) {
     background-color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));
@@ -109,8 +133,11 @@ import{css as o}from"lit";const r=o`
   /*  Secondary */
   .button--standard.button--secondary {
     background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));
-    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
+    border-color: var(--nile-colors-neutral-400, var(--ng-border-none));
     color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
+    box-shadow: var(--nile-box-shadow-none,var(--ng-shadow-xs-skeuomorphic));
+    border-width:var(--nile-border-width-1, var(--ng-border-width-0));
+    border-style: var(--nile-border-style-solid, var(--ng-border-style-none));
   }
 
   .button--standard.button--secondary:hover:not(.button--disabled) {
@@ -243,11 +270,38 @@ import{css as o}from"lit";const r=o`
 
   /* destructive */
   .button--standard.button--destructive {
+    position: relative;
+    overflow: hidden; 
     background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));
-    border-color:  var(--nile-colors-red-500, var(--ng-primary-standard));
+    border-color: var(--nile-colors-red-500);
+    border-width: var(--nile-border-width-1, var(--ng-border-width-0));
+    border-style: var(--nile-border-style-solid, var(--ng-border-style-none));
     color: var(--nile-colors-white-base, var(--ng-colors-text-white));
-    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs-skeuomorphic));
-  }
+    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-none));
+  }
+
+
+  .button--standard.button--destructive::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  background:  var(--ng-skeuemorphic-gradient-border);
+  mask: var(--ng-mask-rim);
+  mask-composite: var(--ng-mask-composite-exclude);  
+  padding: var(--ng-spacing-xxs); 
+}
+
+ 
+.button--standard.button--destructive::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  box-shadow: var(--ng-shadow-xs-skeuomorphic)
+}
 
   .button--standard.button--destructive:hover:not(.button--disabled) {
     background-color: var(--nile-colors-red-700, var(--ng-colors-bg-error-solid-hover));