@aquera/nile-elements 0.1.8 → 0.1.9

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

@@ -1 +1,11 @@
-import{f as a,a as t}from"../fixture-8aa86bc9.esm.js";import{html as e}from"lit/static-html.js";import"lit/html.js";import"lit/directive-helpers.js";import"lit";import"lit/directives/unsafe-html.js";import"./nile-avatar.esm.js";import"tslib";import"lit/decorators.js";import"lit/directives/class-map.js";import"./nile-avatar.css.esm.js";import"../internal/nile-element.esm.js";describe("NileAvatar",(()=>{it("should display an image when the src is provided",(async()=>{const i=(await a(e`<nile-avatar src="https://example.com/avatar.png"></nile-avatar>`)).shadowRoot.querySelector("img");t(i).to.exist,t(i.getAttribute("src")).to.equal("https://example.com/avatar.png")})),it("should display initials when the image fails to load and name is provided",(async()=>{const i=await a(e`<nile-avatar name="John Doe"></nile-avatar>`);i.shadowRoot.querySelector("img").dispatchEvent(new Event("error")),await i.updateComplete;const r=i.shadowRoot.querySelector(".text__avatar");t(r).to.exist,t(r.textContent.trim()).to.equal("JD")})),it("should use provided background and text colors when bg-color and text-color are set",(async()=>{const i=await a(e`<nile-avatar name="John Doe" bg-color="#ff0000" text-color="#00ff00"></nile-avatar>`);i.shadowRoot.querySelector("img").dispatchEvent(new Event("error")),await i.updateComplete;const r=i.shadowRoot.querySelector(".text__avatar");t(r).to.have.style("background-color","rgb(255, 0, 0)"),t(r).to.have.style("color","rgb(0, 255, 0)")})),it("should apply the appropriate size class based on the size property",(async()=>{const i=(await a(e`<nile-avatar size="large"></nile-avatar>`)).shadowRoot.querySelector("img");t(i).to.have.class("avatar__large")})),it("should have rounded class when isRounded is true",(async()=>{const i=(await a(e`<nile-avatar isRounded></nile-avatar>`)).shadowRoot.querySelector("img");t(i).to.have.class("avatar__rounded")})),it("should display a default icon when image fails to load and no name is provided",(async()=>{const i=await a(e`<nile-avatar></nile-avatar>`);i.shadowRoot.querySelector("img").dispatchEvent(new Event("error")),await i.updateComplete;const r=i.shadowRoot.querySelector("nile-icon");t(r).to.exist,t(r.getAttribute("name")).to.equal("user")})),it("should reflect properties to attributes",(async()=>{const i=await a(e`<nile-avatar src="https://example.com/avatar.png" name="Jane Doe" bg-color="#123456" text-color="#654321" border-color="#abcdef" size="small" isRounded></nile-avatar>`);t(i.getAttribute("src")).to.equal("https://example.com/avatar.png"),t(i.getAttribute("name")).to.equal("Jane Doe"),t(i.getAttribute("bg-color")).to.equal("#123456"),t(i.getAttribute("text-color")).to.equal("#654321"),t(i.getAttribute("border-color")).to.equal("#abcdef"),t(i.getAttribute("size")).to.equal("small"),t(i.hasAttribute("isRounded")).to.be.true}))}));
+import{f as i,a as s}from"../fixture-8aa86bc9.esm.js";import{html as o}from"lit/static-html.js";import"lit/html.js";import"lit/directive-helpers.js";import"lit";import"lit/directives/unsafe-html.js";import"./nile-avatar.esm.js";import"../nile-icon/index.esm.js";import"tslib";import"lit/decorators.js";import"lit/directives/class-map.js";import"./nile-avatar.css.esm.js";import"../internal/nile-element.esm.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/actionworkflow.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/agents.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/anomaly.esm.js";import"../nile-icon/icons/svg/api.esm.js";import"../nile-icon/icons/svg/application.esm.js";import"../nile-icon/icons/svg/applications-2.esm.js";import"../nile-icon/icons/svg/applications.esm.js";import"../nile-icon/icons/svg/apply-filter.esm.js";import"../nile-icon/icons/svg/approve.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/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-square-03.esm.js";import"../nile-icon/icons/svg/bar-chart.esm.js";import"../nile-icon/icons/svg/bargraph.esm.js";import"../nile-icon/icons/svg/basic.esm.js";import"../nile-icon/icons/svg/bell-icon.esm.js";import"../nile-icon/icons/svg/bell.esm.js";import"../nile-icon/icons/svg/block-02.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-01.esm.js";import"../nile-icon/icons/svg/calendar.esm.js";import"../nile-icon/icons/svg/cancel.esm.js";import"../nile-icon/icons/svg/cases.esm.js";import"../nile-icon/icons/svg/caution.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/check.esm.js";import"../nile-icon/icons/svg/chevron-down.esm.js";import"../nile-icon/icons/svg/chevron-left-double.esm.js";import"../nile-icon/icons/svg/chevron-selector-vertical.esm.js";import"../nile-icon/icons/svg/chevron-up.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/columns-03.esm.js";import"../nile-icon/icons/svg/combo1.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/componentblock.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/continuous.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/custom.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-expression.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-persistent-variable.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/data-type-variable.esm.js";import"../nile-icon/icons/svg/database-1.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-1.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/deleteuser.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.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/dots-vertical.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/downarrow.esm.js";import"../nile-icon/icons/svg/downgrade.esm.js";import"../nile-icon/icons/svg/download-01.esm.js";import"../nile-icon/icons/svg/download-02.esm.js";import"../nile-icon/icons/svg/download.esm.js";import"../nile-icon/icons/svg/drag.esm.js";import"../nile-icon/icons/svg/draglist.esm.js";import"../nile-icon/icons/svg/droparrow.esm.js";import"../nile-icon/icons/svg/dropdown.esm.js";import"../nile-icon/icons/svg/edit-01.esm.js";import"../nile-icon/icons/svg/edit-1.esm.js";import"../nile-icon/icons/svg/edit-pencil.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/enabled.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/event.esm.js";import"../nile-icon/icons/svg/every.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-1.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-01.esm.js";import"../nile-icon/icons/svg/flow-h.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-aquera.esm.js";import"../nile-icon/icons/svg/flowmap-block.esm.js";import"../nile-icon/icons/svg/flowmap-cancel.esm.js";import"../nile-icon/icons/svg/flowmap-colorpalatte.esm.js";import"../nile-icon/icons/svg/flowmap-drag.esm.js";import"../nile-icon/icons/svg/flowmap-ellipsis.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-hand.esm.js";import"../nile-icon/icons/svg/flowmap-orchestration.esm.js";import"../nile-icon/icons/svg/flowmap-redo.esm.js";import"../nile-icon/icons/svg/flowmap-section.esm.js";import"../nile-icon/icons/svg/flowmap-text.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-01.esm.js";import"../nile-icon/icons/svg/folder.esm.js";import"../nile-icon/icons/svg/foreach.esm.js";import"../nile-icon/icons/svg/form.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/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-actions.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-functions.esm.js";import"../nile-icon/icons/svg/header-tasks.esm.js";import"../nile-icon/icons/svg/header-variable.esm.js";import"../nile-icon/icons/svg/headphones-01.esm.js";import"../nile-icon/icons/svg/help-1.esm.js";import"../nile-icon/icons/svg/help-circle.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/if.esm.js";import"../nile-icon/icons/svg/ifelse.esm.js";import"../nile-icon/icons/svg/image.esm.js";import"../nile-icon/icons/svg/immutable.esm.js";import"../nile-icon/icons/svg/info-circle.esm.js";import"../nile-icon/icons/svg/info-icon.esm.js";import"../nile-icon/icons/svg/info-icon1.esm.js";import"../nile-icon/icons/svg/info.esm.js";import"../nile-icon/icons/svg/info2.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/itemplaceholder.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/kill.esm.js";import"../nile-icon/icons/svg/laptop-01.esm.js";import"../nile-icon/icons/svg/layers-three-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/leftarrow.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/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/manageduser.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/multiple-user.esm.js";import"../nile-icon/icons/svg/mute.esm.js";import"../nile-icon/icons/svg/my-integration.esm.js";import"../nile-icon/icons/svg/next-down.esm.js";import"../nile-icon/icons/svg/next.esm.js";import"../nile-icon/icons/svg/nightingale-chart.esm.js";import"../nile-icon/icons/svg/nlp.esm.js";import"../nile-icon/icons/svg/no-anomaly.esm.js";import"../nile-icon/icons/svg/nomatch.esm.js";import"../nile-icon/icons/svg/not.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/notscheduled.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/ou-analysis-icon.esm.js";import"../nile-icon/icons/svg/override.esm.js";import"../nile-icon/icons/svg/palette.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/pen.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/personaldetails.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/placeholder-wf.esm.js";import"../nile-icon/icons/svg/play-circle.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-icon.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/prev-up.esm.js";import"../nile-icon/icons/svg/prev.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-cw-03.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/restart_alt.esm.js";import"../nile-icon/icons/svg/returnvalue.esm.js";import"../nile-icon/icons/svg/revocationcycle.esm.js";import"../nile-icon/icons/svg/revokation-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/rightarrow.esm.js";import"../nile-icon/icons/svg/rocket-02.esm.js";import"../nile-icon/icons/svg/role.esm.js";import"../nile-icon/icons/svg/rolemanager.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/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-lg.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-02.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/selectuser.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/sendprompt.esm.js";import"../nile-icon/icons/svg/sendreminder.esm.js";import"../nile-icon/icons/svg/server-03.esm.js";import"../nile-icon/icons/svg/setting.esm.js";import"../nile-icon/icons/svg/settings-02.esm.js";import"../nile-icon/icons/svg/settings-1.esm.js";import"../nile-icon/icons/svg/settings.esm.js";import"../nile-icon/icons/svg/shape.esm.js";import"../nile-icon/icons/svg/share.esm.js";import"../nile-icon/icons/svg/shield-01.esm.js";import"../nile-icon/icons/svg/smalltick.esm.js";import"../nile-icon/icons/svg/smartcode.esm.js";import"../nile-icon/icons/svg/sort.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-circle.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-1.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/themes.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/trash-01.esm.js";import"../nile-icon/icons/svg/trash-03.esm.js";import"../nile-icon/icons/svg/trash-no-fill.esm.js";import"../nile-icon/icons/svg/trash.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-1.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/uparrow.esm.js";import"../nile-icon/icons/svg/update.esm.js";import"../nile-icon/icons/svg/updateuser.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-01.esm.js";import"../nile-icon/icons/svg/user-03.esm.js";import"../nile-icon/icons/svg/user-analysis-icon.esm.js";import"../nile-icon/icons/svg/user-circle.esm.js";import"../nile-icon/icons/svg/user-group.esm.js";import"../nile-icon/icons/svg/user-inactive.esm.js";import"../nile-icon/icons/svg/user-selection.esm.js";import"../nile-icon/icons/svg/user-square.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-1.esm.js";import"../nile-icon/icons/svg/userremove-2.esm.js";import"../nile-icon/icons/svg/userremove.esm.js";import"../nile-icon/icons/svg/userremovegroup.esm.js";import"../nile-icon/icons/svg/users-01.esm.js";import"../nile-icon/icons/svg/users-02.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-1.esm.js";import"../nile-icon/icons/svg/variable-local.esm.js";import"../nile-icon/icons/svg/variable-new-1.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/while.esm.js";import"../nile-icon/icons/svg/whileloop.esm.js";import"../nile-icon/icons/svg/workflow-01.esm.js";import"../nile-icon/icons/svg/workflow-application.esm.js";import"../nile-icon/icons/svg/workflow-orchestration.esm.js";import"../nile-icon/icons/svg/workflow-section.esm.js";import"../nile-icon/icons/svg/workflow-solid.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/icons/svg/x-circle.esm.js";describe("NileAvatar",(()=>{it('should display an image when the src is provided and variant is "image"',(async()=>{const n=(await i(o`<nile-avatar src="https://example.com/avatar.png" variant="image"></nile-avatar>`)).shadowRoot.querySelector("img");s(n).to.exist,s(n.getAttribute("src")).to.equal("https://example.com/avatar.png")})),it('should fall back to text initials when image fails to load and variant is "text"',(async()=>{const n=await i(o`<nile-avatar name="John Doe" variant="image" src="https://example.com/avatar.png"></nile-avatar>`);n.shadowRoot.querySelector("img").dispatchEvent(new Event("error")),await n.updateComplete;const e=n.shadowRoot.querySelector("nile-icon");s(e).to.exist,s(e.getAttribute("name")).to.equal("user")})),it('should display initials when variant is "text" and name is provided',(async()=>{const n=(await i(o`<nile-avatar name="John Doe" variant="text"></nile-avatar>`)).shadowRoot.querySelector(".text__avatar");s(n).to.exist,s(n.textContent.trim()).to.equal("JD")})),it('should display an icon when variant is "icon"',(async()=>{const n=(await i(o`<nile-avatar variant="icon" icon="user"></nile-avatar>`)).shadowRoot.querySelector("nile-icon");s(n).to.exist,s(n.getAttribute("name")).to.equal("user")})),it("should apply the appropriate size class based on the size property",(async()=>{const n=await i(o`<nile-avatar size="lg"></nile-avatar>`),e=n.shadowRoot.querySelector(".text__avatar")||n.shadowRoot.querySelector("img");s(e).to.have.class("avatar__large")})),it("should have the rounded class when isRounded is true",(async()=>{const n=await i(o`<nile-avatar isRounded></nile-avatar>`),e=n.shadowRoot.querySelector(".text__avatar")||n.shadowRoot.querySelector("img");s(e).to.have.class("avatar__rounded")})),it("should reflect properties to attributes correctly",(async()=>{const n=await i(o`<nile-avatar
+        src="https://example.com/avatar.png"
+        name="Jane Doe"
+        bg-color="#123456"
+        text-color="#654321"
+        border-color="#abcdef"
+        size="sm"
+        isRounded
+        variant="image"
+        icon="user"
+      ></nile-avatar>`);s(n.getAttribute("src")).to.equal("https://example.com/avatar.png"),s(n.getAttribute("name")).to.equal("Jane Doe"),s(n.getAttribute("bg-color")).to.equal("#123456"),s(n.getAttribute("text-color")).to.equal("#654321"),s(n.getAttribute("border-color")).to.equal("#abcdef"),s(n.getAttribute("size")).to.equal("sm"),s(n.getAttribute("variant")).to.equal("image"),s(n.getAttribute("icon")).to.equal("user"),s(n.hasAttribute("isRounded")).to.be.true})),it("should use provided background and text colors when bg-color and text-color are set",(async()=>{const n=(await i(o`<nile-avatar name="John Doe" bg-color="#ff0000" text-color="#00ff00"></nile-avatar>`)).shadowRoot.querySelector(".text__avatar");s(n).to.have.style("background-color","rgb(255, 0, 0)"),s(n).to.have.style("color","rgb(0, 255, 0)")})),it('should display a default icon when variant is "icon" and icon is not provided',(async()=>{const n=(await i(o`<nile-avatar variant="icon"></nile-avatar>`)).shadowRoot.querySelector("nile-icon");s(n).to.exist,s(n.getAttribute("name")).to.equal("user")})),it('should use the default initials if name is not provided and variant is "text"',(async()=>{const n=(await i(o`<nile-avatar variant="text"></nile-avatar>`)).shadowRoot.querySelector(".text__avatar");s(n).to.exist,s(n.textContent.trim()).to.equal("")})),it("should handle image error gracefully by switching to fallback content",(async()=>{const n=await i(o`<nile-avatar variant="image" src="invalid_url"></nile-avatar>`);n.shadowRoot.querySelector("img").dispatchEvent(new Event("error")),await n.updateComplete;const e=n.shadowRoot.querySelector(".text__avatar")||n.shadowRoot.querySelector("nile-icon");s(e).to.exist}))}));

package/dist/nile-code-editor/nile-code-editor.css.cjs.js

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var o,_templateObject,r;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}return{setters:[function(_lit){o=_lit.css;}],execute:function execute(){_export("s",r=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    display: block;\n  }\n\n  .code-mirror {\n    display: flex;\n    justify-content: flex-end;\n    flex-direction: row-reverse;\n    padding: 5px;\n    border-radius: 5px;\n    border: 1px solid rgb(204, 204, 204);\n  }\n\n  .no-scroller .cm-scroller{\n    scrollbar-width:none;\n  }\n\n  .error {\n    border-color: #e5434d;\n  }\n\n  .noborder {\n    border: none;\n  }\n\n  .cm-editor {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .\u037C1.cm-focused {\n    outline: none;\n  }\n\n  .code-editor__icon__container {\n    display: none;\n  }\n  \n  .code-mirror:hover > .code-editor__icon__container {\n    cursor: pointer;\n    display: flex;\n    align-self: start;\n    padding: 5px 5px 0px 0px;\n  }\n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var o,_templateObject,r;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}return{setters:[function(_lit){o=_lit.css;}],execute:function execute(){_export("s",r=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    display: block;\n  }\n\n  .code-mirror {\n    display: flex;\n    justify-content: flex-end;\n    flex-direction: row-reverse;\n    padding: 5px;\n    border-radius: 5px;\n    border: 1px solid rgb(204, 204, 204);\n  }\n\n  .no-scroller .cm-scroller{\n    scrollbar-width:none;\n  }\n\n  .error {\n    border-color: #e5434d;\n  }\n\n  .noborder {\n    border: none;\n  }\n\n  .cm-editor {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .\u037C1.cm-focused {\n    outline: none;\n  }\n\n  .code-editor__icon__container {\n    display: none;\n    cursor: pointer;\n    align-self: start;\n    padding: 5px 5px 0px 0px;\n  }\n  \n  .code-mirror:hover > .code-editor__icon__container {\n    display: flex;\n  }\n"]))));}};});
 //# sourceMappingURL=nile-code-editor.css.cjs.js.map

package/dist/nile-code-editor/nile-code-editor.css.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-code-editor.css.cjs.js","sources":["../../../src/nile-code-editor/nile-code-editor.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 * CodeEditor CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n  }\n\n  .code-mirror {\n    display: flex;\n    justify-content: flex-end;\n    flex-direction: row-reverse;\n    padding: 5px;\n    border-radius: 5px;\n    border: 1px solid rgb(204, 204, 204);\n  }\n\n  .no-scroller .cm-scroller{\n    scrollbar-width:none;\n  }\n\n  .error {\n    border-color: #e5434d;\n  }\n\n  .noborder {\n    border: none;\n  }\n\n  .cm-editor {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .ͼ1.cm-focused {\n    outline: none;\n  }\n\n  .code-editor__icon__container {\n    display: none;\n  }\n  \n  .code-mirror:hover > .code-editor__icon__container {\n    cursor: pointer;\n    display: flex;\n    align-self: start;\n    padding: 5px 5px 0px 0px;\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"iVAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-code-editor.css.cjs.js","sources":["../../../src/nile-code-editor/nile-code-editor.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 * CodeEditor CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n  }\n\n  .code-mirror {\n    display: flex;\n    justify-content: flex-end;\n    flex-direction: row-reverse;\n    padding: 5px;\n    border-radius: 5px;\n    border: 1px solid rgb(204, 204, 204);\n  }\n\n  .no-scroller .cm-scroller{\n    scrollbar-width:none;\n  }\n\n  .error {\n    border-color: #e5434d;\n  }\n\n  .noborder {\n    border: none;\n  }\n\n  .cm-editor {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .ͼ1.cm-focused {\n    outline: none;\n  }\n\n  .code-editor__icon__container {\n    display: none;\n    cursor: pointer;\n    align-self: start;\n    padding: 5px 5px 0px 0px;\n  }\n  \n  .code-mirror:hover > .code-editor__icon__container {\n    display: flex;\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"iVAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

package/dist/nile-code-editor/nile-code-editor.css.esm.js

@@ -35,12 +35,12 @@ import{css as o}from"lit";const r=o`
 
   .code-editor__icon__container {
     display: none;
+    cursor: pointer;
+    align-self: start;
+    padding: 5px 5px 0px 0px;
   }
   
   .code-mirror:hover > .code-editor__icon__container {
-    cursor: pointer;
     display: flex;
-    align-self: start;
-    padding: 5px 5px 0px 0px;
   }
 `;export{r as s};

package/dist/src/nile-accordion/nile-accordian.test.js

@@ -2,7 +2,6 @@ import { fixture, html, expect, oneEvent, elementUpdated } from '@open-wc/testin
 import './nile-accordion';
 import { NileAccordion } from './nile-accordion';
 import Sinon from 'sinon';
-const wait = (ms = 50000) => new Promise(resolve => setTimeout(resolve, ms));
 describe('NileAccordion', () => {
     it('should render correctly', async () => {
         const el = await fixture(html `<nile-accordion summary="Test Summary"></nile-accordion>`);
@@ -13,24 +12,23 @@ describe('NileAccordion', () => {
     it('should initialize closed by default', async () => {
         const el = await fixture(html `<nile-accordion summary="Test Summary"></nile-accordion>`);
         expect(el.open).to.be.false;
-        const body = el.shadowRoot?.querySelector('.details__body');
+        const body = el.shadowRoot?.querySelector('.accordian__body');
         expect(body?.hidden).to.be.true;
     });
     it('should open when clicked', async () => {
         const el = await fixture(html `<nile-accordion summary="Test Summary"></nile-accordion>`);
-        const header = el.shadowRoot?.querySelector('.details__header');
+        const header = el.shadowRoot?.querySelector('.accordian__header');
         header.click();
         await elementUpdated(el);
         expect(el.open).to.be.true;
-        const body = el.shadowRoot?.querySelector('.details__body');
+        const body = el.shadowRoot?.querySelector('.accordian__body');
         expect(body?.hidden).to.be.false;
     });
     it('should emit "nile-show" and "nile-after-show" when opened', async () => {
         const el = await fixture(html `<nile-accordion summary="Test Summary"></nile-accordion>`);
         const showSpy = Sinon.spy(el, 'emit');
-        const header = el.shadowRoot?.querySelector('.details__header');
+        const header = el.shadowRoot?.querySelector('.accordian__header');
         setTimeout(() => header.click());
-        // Wait for the "nile-show" and "nile-after-show" events to be emitted
         await oneEvent(el, 'nile-after-show');
         expect(showSpy.calledWith('nile-show')).to.be.true;
         expect(showSpy.calledWith('nile-after-show')).to.be.true;
@@ -38,40 +36,26 @@ describe('NileAccordion', () => {
     it('should emit "nile-hide" and "nile-after-hide" when closed', async () => {
         const el = await fixture(html `<nile-accordion summary="Test Summary" open></nile-accordion>`);
         const hideSpy = Sinon.spy(el, 'emit');
-        const header = el.shadowRoot?.querySelector('.details__header');
+        const header = el.shadowRoot?.querySelector('.accordian__header');
         setTimeout(() => header.click());
-        // Wait for the "nile-hide" and "nile-after-hide" events to be emitted
         await oneEvent(el, 'nile-after-hide');
         expect(hideSpy.calledWith('nile-hide')).to.be.true;
         expect(hideSpy.calledWith('nile-after-hide')).to.be.true;
     });
     it('should be disabled when the "disabled" property is set', async () => {
         const el = await fixture(html `<nile-accordion summary="Test Summary" disabled></nile-accordion>`);
-        const header = el.shadowRoot?.querySelector('.details__header');
+        const header = el.shadowRoot?.querySelector('.accordian__header');
         header.click();
         await elementUpdated(el);
         expect(el.open).to.be.false;
-        const body = el.shadowRoot?.querySelector('.details__body');
-        expect(body?.hidden).to.be.true;
-    });
-    it('should open when pressing "Enter"', async () => {
-        const el = await fixture(html `<nile-accordion summary="Test Summary"></nile-accordion>`);
-        const header = el.shadowRoot?.querySelector('.details__header');
-        // Simulate pressing the "Enter" key
-        const enterEvent = new KeyboardEvent('keydown', { key: 'Enter' });
-        header.dispatchEvent(enterEvent);
-        await elementUpdated(el);
-        expect(el.open).to.be.true;
     });
     it('should handle keyboard interaction (Enter and Space)', async () => {
         const el = await fixture(html `<nile-accordion summary="Test Summary"></nile-accordion>`);
-        const header = el.shadowRoot?.querySelector('.details__header');
-        // Simulate pressing the "Enter" key
+        const header = el.shadowRoot?.querySelector('.accordian__header');
         const enterEvent = new KeyboardEvent('keydown', { key: 'Enter' });
         header.dispatchEvent(enterEvent);
         await elementUpdated(el);
         expect(el.open).to.be.true;
-        // Simulate pressing the "Space" key
         const spaceEvent = new KeyboardEvent('keydown', { key: ' ' });
         header.dispatchEvent(spaceEvent);
         await elementUpdated(el);
@@ -79,27 +63,38 @@ describe('NileAccordion', () => {
     });
     it('should handle ArrowUp/ArrowLeft to close and ArrowDown/ArrowRight to open', async () => {
         const el = await fixture(html `<nile-accordion summary="Test Summary"></nile-accordion>`);
-        const header = el.shadowRoot?.querySelector('.details__header');
-        // Simulate pressing the "ArrowDown" key to open
+        const header = el.shadowRoot?.querySelector('.accordian__header');
         const arrowDownEvent = new KeyboardEvent('keydown', { key: 'ArrowDown' });
         header.dispatchEvent(arrowDownEvent);
         await elementUpdated(el);
         expect(el.open).to.be.true;
-        // Simulate pressing the "ArrowUp" key to close
         const arrowUpEvent = new KeyboardEvent('keydown', { key: 'ArrowUp' });
         header.dispatchEvent(arrowUpEvent);
         await elementUpdated(el);
         expect(el.open).to.be.false;
     });
+    it('should apply the "variant" class based on the variant property', async () => {
+        const el = await fixture(html `<nile-accordion summary="Test Summary" variant="dark"></nile-accordion>`);
+        const header = el.shadowRoot?.querySelector('.accordian__header');
+        expect(header).to.have.class('accordian__header--dark');
+    });
+    it('should apply the correct size class based on the size property', async () => {
+        const el = await fixture(html `<nile-accordion summary="Test Summary" size="lg"></nile-accordion>`);
+        const container = el.shadowRoot?.querySelector('.accordian');
+        expect(container).to.have.class('accordian--lg');
+    });
+    it('should apply the correct expand icon placement class based on the expandIconPlacement property', async () => {
+        const el = await fixture(html `<nile-accordion summary="Test Summary" expandIconPlacement="left"></nile-accordion>`);
+        const header = el.shadowRoot?.querySelector('.accordian__header');
+        expect(header).to.have.class('accordian__header--arrow-left');
+    });
     it('should animate when opening and closing', async () => {
         const el = await fixture(html `<nile-accordion summary="Test Summary"></nile-accordion>`);
         const animateSpy = Sinon.spy(el, 'handleOpenChange');
-        // Simulate opening
-        const header = el.shadowRoot?.querySelector('.details__header');
+        const header = el.shadowRoot?.querySelector('.accordian__header');
         header.click();
         await elementUpdated(el);
         expect(animateSpy.called).to.be.true;
-        // Simulate closing
         header.click();
         await elementUpdated(el);
         expect(animateSpy.calledTwice).to.be.true;

package/dist/src/nile-accordion/nile-accordian.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-accordian.test.js","sourceRoot":"","sources":["../../../src/nile-accordion/nile-accordian.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, html, expect, oneEvent, elementUpdated } from '@open-wc/testing';\nimport './nile-accordion';\nimport { NileAccordion } from './nile-accordion';\nimport Sinon from 'sinon';\nconst wait=(ms:number=50000)=>new Promise(resolve => setTimeout(resolve, ms))\n\n\ndescribe('NileAccordion', () => {\n  it('should render correctly', async () => {\n    const el = await fixture<NileAccordion>(html`<nile-accordion summary=\"Test Summary\"></nile-accordion>`);\n    expect(el).to.be.instanceOf(NileAccordion);\n    expect(el.shadowRoot).not.to.be.null;\n    expect(el.summary).to.equal('Test Summary');\n  });\n\n  it('should initialize closed by default', async () => {\n    const el = await fixture<NileAccordion>(html`<nile-accordion summary=\"Test Summary\"></nile-accordion>`);\n    expect(el.open).to.be.false;\n    const body = el.shadowRoot?.querySelector<any>('.details__body');\n    expect(body?.hidden).to.be.true;\n  });\n\n  it('should open when clicked', async () => {\n    const el = await fixture<NileAccordion>(html`<nile-accordion summary=\"Test Summary\"></nile-accordion>`);\n    \n    const header = el.shadowRoot?.querySelector('.details__header') as HTMLElement;\n    header.click();\n    \n    await elementUpdated(el);\n    \n    expect(el.open).to.be.true;\n    const body = el.shadowRoot?.querySelector<any>('.details__body');\n    expect(body?.hidden).to.be.false;\n  });\n\n  it('should emit \"nile-show\" and \"nile-after-show\" when opened', async () => {\n    const el = await fixture<NileAccordion>(html`<nile-accordion summary=\"Test Summary\"></nile-accordion>`);\n    \n    const showSpy = Sinon.spy(el, 'emit');\n    const header = el.shadowRoot?.querySelector('.details__header') as HTMLElement;\n\t\tsetTimeout(() => header.click());\n\n    // Wait for the \"nile-show\" and \"nile-after-show\" events to be emitted\n    await oneEvent(el, 'nile-after-show');\n\n    expect(showSpy.calledWith('nile-show')).to.be.true;\n    expect(showSpy.calledWith('nile-after-show')).to.be.true;\n  });\n\n  it('should emit \"nile-hide\" and \"nile-after-hide\" when closed', async () => {\n    const el = await fixture<NileAccordion>(html`<nile-accordion summary=\"Test Summary\" open></nile-accordion>`);\n    \n    const hideSpy = Sinon.spy(el, 'emit');\n    const header = el.shadowRoot?.querySelector('.details__header') as HTMLElement;\n\t\tsetTimeout(() => header.click());\n\n    // Wait for the \"nile-hide\" and \"nile-after-hide\" events to be emitted\n    await oneEvent(el, 'nile-after-hide');\n\n    expect(hideSpy.calledWith('nile-hide')).to.be.true;\n    expect(hideSpy.calledWith('nile-after-hide')).to.be.true;\n  });\n\n  it('should be disabled when the \"disabled\" property is set', async () => {\n    const el = await fixture<NileAccordion>(html`<nile-accordion summary=\"Test Summary\" disabled></nile-accordion>`);\n    \n    const header = el.shadowRoot?.querySelector('.details__header') as HTMLElement;\n    header.click();\n\n    await elementUpdated(el);\n    \n    expect(el.open).to.be.false;\n    const body = el.shadowRoot?.querySelector<any>('.details__body');\n    expect(body?.hidden).to.be.true;\n  });\n\n  it('should open when pressing \"Enter\"', async () => {\n    const el = await fixture<NileAccordion>(html`<nile-accordion summary=\"Test Summary\"></nile-accordion>`);\n    \n    const header = el.shadowRoot?.querySelector('.details__header') as HTMLElement;\n\n    // Simulate pressing the \"Enter\" key\n    const enterEvent = new KeyboardEvent('keydown', { key: 'Enter' });\n    header.dispatchEvent(enterEvent);\n\n    await elementUpdated(el);\n    expect(el.open).to.be.true;\n  });\n\n  it('should handle keyboard interaction (Enter and Space)', async () => {\n    const el = await fixture<NileAccordion>(html`<nile-accordion summary=\"Test Summary\"></nile-accordion>`);\n    \n    const header = el.shadowRoot?.querySelector('.details__header') as HTMLElement;\n\n    // Simulate pressing the \"Enter\" key\n    const enterEvent = new KeyboardEvent('keydown', { key: 'Enter' });\n    header.dispatchEvent(enterEvent);\n\n    await elementUpdated(el);\n    expect(el.open).to.be.true;\n\n    // Simulate pressing the \"Space\" key\n    const spaceEvent = new KeyboardEvent('keydown', { key: ' ' });\n    header.dispatchEvent(spaceEvent);\n\n    await elementUpdated(el);\n    expect(el.open).to.be.false;\n  });\n\n  it('should handle ArrowUp/ArrowLeft to close and ArrowDown/ArrowRight to open', async () => {\n    const el = await fixture<NileAccordion>(html`<nile-accordion summary=\"Test Summary\"></nile-accordion>`);\n    \n    const header = el.shadowRoot?.querySelector('.details__header') as HTMLElement;\n\n    // Simulate pressing the \"ArrowDown\" key to open\n    const arrowDownEvent = new KeyboardEvent('keydown', { key: 'ArrowDown' });\n    header.dispatchEvent(arrowDownEvent);\n\n    await elementUpdated(el);\n    expect(el.open).to.be.true;\n\n    // Simulate pressing the \"ArrowUp\" key to close\n    const arrowUpEvent = new KeyboardEvent('keydown', { key: 'ArrowUp' });\n    header.dispatchEvent(arrowUpEvent);\n\n    await elementUpdated(el);\n    expect(el.open).to.be.false;\n  });\n\n  it('should animate when opening and closing', async () => {\n    const el = await fixture<NileAccordion>(html`<nile-accordion summary=\"Test Summary\"></nile-accordion>`);\n    \n    const animateSpy = Sinon.spy(el, 'handleOpenChange');\n\n    // Simulate opening\n    const header = el.shadowRoot?.querySelector('.details__header') as HTMLElement;\n    header.click();\n    \n    await elementUpdated(el);\n    expect(animateSpy.called).to.be.true;\n\n    // Simulate closing\n    header.click();\n    await elementUpdated(el);\n    expect(animateSpy.calledTwice).to.be.true;\n  });\n});"]}
+{"version":3,"file":"nile-accordian.test.js","sourceRoot":"","sources":["../../../src/nile-accordion/nile-accordian.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, html, expect, oneEvent, elementUpdated } from '@open-wc/testing';\nimport './nile-accordion';\nimport { NileAccordion } from './nile-accordion';\nimport Sinon from 'sinon';\n\ndescribe('NileAccordion', () => {\n  it('should render correctly', async () => {\n    const el = await fixture<NileAccordion>(html`<nile-accordion summary=\"Test Summary\"></nile-accordion>`);\n    expect(el).to.be.instanceOf(NileAccordion);\n    expect(el.shadowRoot).not.to.be.null;\n    expect(el.summary).to.equal('Test Summary');\n  });\n\n  it('should initialize closed by default', async () => {\n    const el = await fixture<NileAccordion>(html`<nile-accordion summary=\"Test Summary\"></nile-accordion>`);\n    expect(el.open).to.be.false;\n    const body = el.shadowRoot?.querySelector<HTMLElement>('.accordian__body');\n    expect(body?.hidden).to.be.true;\n  });\n\n  it('should open when clicked', async () => {\n    const el = await fixture<NileAccordion>(html`<nile-accordion summary=\"Test Summary\"></nile-accordion>`);\n    const header = el.shadowRoot?.querySelector<HTMLElement>('.accordian__header') as HTMLElement;\n    header.click();\n    await elementUpdated(el);\n    expect(el.open).to.be.true;\n    const body = el.shadowRoot?.querySelector<HTMLElement>('.accordian__body');\n    expect(body?.hidden).to.be.false;\n  });\n\n  it('should emit \"nile-show\" and \"nile-after-show\" when opened', async () => {\n    const el = await fixture<NileAccordion>(html`<nile-accordion summary=\"Test Summary\"></nile-accordion>`);\n    const showSpy = Sinon.spy(el, 'emit');\n    const header = el.shadowRoot?.querySelector<HTMLElement>('.accordian__header') as HTMLElement;\n    setTimeout(() => header.click());\n    await oneEvent(el, 'nile-after-show');\n    expect(showSpy.calledWith('nile-show')).to.be.true;\n    expect(showSpy.calledWith('nile-after-show')).to.be.true;\n  });\n\n  it('should emit \"nile-hide\" and \"nile-after-hide\" when closed', async () => {\n    const el = await fixture<NileAccordion>(html`<nile-accordion summary=\"Test Summary\" open></nile-accordion>`);\n    const hideSpy = Sinon.spy(el, 'emit');\n    const header = el.shadowRoot?.querySelector<HTMLElement>('.accordian__header') as HTMLElement;\n    setTimeout(() => header.click());\n    await oneEvent(el, 'nile-after-hide');\n    expect(hideSpy.calledWith('nile-hide')).to.be.true;\n    expect(hideSpy.calledWith('nile-after-hide')).to.be.true;\n  });\n\n  it('should be disabled when the \"disabled\" property is set', async () => {\n    const el = await fixture<NileAccordion>(html`<nile-accordion summary=\"Test Summary\" disabled></nile-accordion>`);\n    const header = el.shadowRoot?.querySelector<HTMLElement>('.accordian__header') as HTMLElement;\n    header.click();\n    await elementUpdated(el);\n    expect(el.open).to.be.false;\n  });\n\n  it('should handle keyboard interaction (Enter and Space)', async () => {\n    const el = await fixture<NileAccordion>(html`<nile-accordion summary=\"Test Summary\"></nile-accordion>`);\n    const header = el.shadowRoot?.querySelector<HTMLElement>('.accordian__header') as HTMLElement;\n\n    const enterEvent = new KeyboardEvent('keydown', { key: 'Enter' });\n    header.dispatchEvent(enterEvent);\n    await elementUpdated(el);\n    expect(el.open).to.be.true;\n\n    const spaceEvent = new KeyboardEvent('keydown', { key: ' ' });\n    header.dispatchEvent(spaceEvent);\n    await elementUpdated(el);\n    expect(el.open).to.be.false;\n  });\n\n  it('should handle ArrowUp/ArrowLeft to close and ArrowDown/ArrowRight to open', async () => {\n    const el = await fixture<NileAccordion>(html`<nile-accordion summary=\"Test Summary\"></nile-accordion>`);\n    const header = el.shadowRoot?.querySelector<HTMLElement>('.accordian__header') as HTMLElement;\n\n    const arrowDownEvent = new KeyboardEvent('keydown', { key: 'ArrowDown' });\n    header.dispatchEvent(arrowDownEvent);\n    await elementUpdated(el);\n    expect(el.open).to.be.true;\n\n    const arrowUpEvent = new KeyboardEvent('keydown', { key: 'ArrowUp' });\n    header.dispatchEvent(arrowUpEvent);\n    await elementUpdated(el);\n    expect(el.open).to.be.false;\n  });\n\n  it('should apply the \"variant\" class based on the variant property', async () => {\n    const el = await fixture<NileAccordion>(html`<nile-accordion summary=\"Test Summary\" variant=\"dark\"></nile-accordion>`);\n    const header = el.shadowRoot?.querySelector<HTMLElement>('.accordian__header');\n    expect(header).to.have.class('accordian__header--dark');\n  });\n\n  it('should apply the correct size class based on the size property', async () => {\n    const el = await fixture<NileAccordion>(html`<nile-accordion summary=\"Test Summary\" size=\"lg\"></nile-accordion>`);\n    const container = el.shadowRoot?.querySelector<HTMLElement>('.accordian');\n    expect(container).to.have.class('accordian--lg');\n  });\n\n  it('should apply the correct expand icon placement class based on the expandIconPlacement property', async () => {\n    const el = await fixture<NileAccordion>(html`<nile-accordion summary=\"Test Summary\" expandIconPlacement=\"left\"></nile-accordion>`);\n    const header = el.shadowRoot?.querySelector<HTMLElement>('.accordian__header');\n    expect(header).to.have.class('accordian__header--arrow-left');\n  });\n\n  it('should animate when opening and closing', async () => {\n    const el = await fixture<NileAccordion>(html`<nile-accordion summary=\"Test Summary\"></nile-accordion>`);\n    const animateSpy = Sinon.spy(el, 'handleOpenChange');\n    const header = el.shadowRoot?.querySelector<HTMLElement>('.accordian__header') as HTMLElement;\n\n    header.click();\n    await elementUpdated(el);\n    expect(animateSpy.called).to.be.true;\n\n    header.click();\n    await elementUpdated(el);\n    expect(animateSpy.calledTwice).to.be.true;\n  });\n});\n"]}

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

@@ -28,77 +28,108 @@ export const styles = css `
     display: block;
   }
 
-  .details {
-    border: solid 1px hsl(240 5.9% 90%);
-    border-radius: 0.25rem;
+  .accordian {
+    border-top:solid 1px var(--nile-colors-neutral-500);
     background-color: #FFFFFF;
     overflow-anchor: none;
   }
 
-  .details--disabled {
+  .accordian--lg{
+    --accordian-text-size:var(--sm-tesx, 14px);
+    --accordian-heading-padding: 16px 12px;
+    --accordian-content-padding: 6px 12px 18px;
+  }
+
+  .accordian--md{
+    --accordian-text-size:var(--sm-tesx, 14px);
+    --accordian-heading-padding: 12px 12px;
+    --accordian-content-padding: 6px 12px 18px;
+  }
+
+  .accordian--sm{
+    --accordian-text-size:var(--sm-tesx, 12px);
+    --accordian-heading-padding: 6px 12px;
+    --accordian-content-padding: 6px 12px 12px;
+  }
+  
+  .accordian {
+    font-size: var(--accordian-text-size);
+  }
+
+  .accordian--disabled {
     opacity: 0.5;
   }
 
-  .details__header {
+  .accordian__header {
     display: flex;
+    gap:12px;
     align-items: center;
     border-radius: inherit;
-    padding: 1rem;
+    font-weight:500;
+    padding: var(--accordian-heading-padding);
     user-select: none;
     cursor: pointer;
   }
 
-  .details__header:focus {
+  .accordian__header--dark{
+    background-color:var(--nile-colors-dark-200);
+  }
+
+  .accordian__header--arrow-left{
+    flex-direction: row-reverse;
+  }
+
+  .accordian__header:focus {
     outline: none;
   }
 
-  .details__header:focus-visible {
+  .accordian__header:focus-visible {
     outline: solid 3px hsl(200.4, 98%, 39.4%);
     outline-offset: calc(1px + 1px);
   }
 
-  .details--disabled .details__header {
+  .accordian--disabled .accordian__header {
     cursor: not-allowed;
   }
 
-  .details--disabled .details__header:focus-visible {
+  .accordian--disabled .accordian__header:focus-visible {
     outline: none;
     box-shadow: none;
   }
 
-  .details__summary {
+  .accordian__summary {
     flex: 1 1 auto;
     display: flex;
     align-items: center;
   }
 
-  .details__summary-icon {
+  .accordian__summary-icon {
     flex: 0 0 auto;
     display: flex;
     align-items: center;
     transition: 250ms rotate ease;
   }
 
-  .details--open .details__summary-icon {
+  .accordian--open .accordian__summary-icon {
     rotate: 90deg;
   }
 
-  .details--open.details--rtl .details__summary-icon {
-    rotate: -90deg;
-  }
-
-  .details--open slot[name='expand-icon'],
-  .details:not(.details--open) slot[name='collapse-icon'] {
+  .accordian--open slot[name='expand-icon'],
+  .accordian:not(.accordian--open) slot[name='collapse-icon'] {
     display: none;
   }
 
-  .details__body {
+  .accordian__body {
     overflow: hidden;
   }
 
-  .details__content {
+  .accordian__content {
     display: block;
-    padding: 1rem;
+    padding: var(--accordian-content-padding);
+  }
+
+  .accordian__content--arrow-left{
+   margin-left:28px;
   }
 `;
 export default [styles];

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

@@ -1 +1 @@
-{"version":3,"file":"nile-accordion.css.js","sourceRoot":"","sources":["../../../src/nile-accordion/nile-accordion.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4FxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * Detail CSS\n */\nexport const styles = css`\n\n  :host {\n    box-sizing: border-box;\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    display: block;\n  }\n\n  .details {\n    border: solid 1px hsl(240 5.9% 90%);\n    border-radius: 0.25rem;\n    background-color: #FFFFFF;\n    overflow-anchor: none;\n  }\n\n  .details--disabled {\n    opacity: 0.5;\n  }\n\n  .details__header {\n    display: flex;\n    align-items: center;\n    border-radius: inherit;\n    padding: 1rem;\n    user-select: none;\n    cursor: pointer;\n  }\n\n  .details__header:focus {\n    outline: none;\n  }\n\n  .details__header:focus-visible {\n    outline: solid 3px hsl(200.4, 98%, 39.4%);\n    outline-offset: calc(1px + 1px);\n  }\n\n  .details--disabled .details__header {\n    cursor: not-allowed;\n  }\n\n  .details--disabled .details__header:focus-visible {\n    outline: none;\n    box-shadow: none;\n  }\n\n  .details__summary {\n    flex: 1 1 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .details__summary-icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    transition: 250ms rotate ease;\n  }\n\n  .details--open .details__summary-icon {\n    rotate: 90deg;\n  }\n\n  .details--open.details--rtl .details__summary-icon {\n    rotate: -90deg;\n  }\n\n  .details--open slot[name='expand-icon'],\n  .details:not(.details--open) slot[name='collapse-icon'] {\n    display: none;\n  }\n\n  .details__body {\n    overflow: hidden;\n  }\n\n  .details__content {\n    display: block;\n    padding: 1rem;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-accordion.css.js","sourceRoot":"","sources":["../../../src/nile-accordion/nile-accordion.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2HxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * Detail CSS\n */\nexport const styles = css`\n\n  :host {\n    box-sizing: border-box;\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    display: block;\n  }\n\n  .accordian {\n    border-top:solid 1px var(--nile-colors-neutral-500);\n    background-color: #FFFFFF;\n    overflow-anchor: none;\n  }\n\n  .accordian--lg{\n    --accordian-text-size:var(--sm-tesx, 14px);\n    --accordian-heading-padding: 16px 12px;\n    --accordian-content-padding: 6px 12px 18px;\n  }\n\n  .accordian--md{\n    --accordian-text-size:var(--sm-tesx, 14px);\n    --accordian-heading-padding: 12px 12px;\n    --accordian-content-padding: 6px 12px 18px;\n  }\n\n  .accordian--sm{\n    --accordian-text-size:var(--sm-tesx, 12px);\n    --accordian-heading-padding: 6px 12px;\n    --accordian-content-padding: 6px 12px 12px;\n  }\n  \n  .accordian {\n    font-size: var(--accordian-text-size);\n  }\n\n  .accordian--disabled {\n    opacity: 0.5;\n  }\n\n  .accordian__header {\n    display: flex;\n    gap:12px;\n    align-items: center;\n    border-radius: inherit;\n    font-weight:500;\n    padding: var(--accordian-heading-padding);\n    user-select: none;\n    cursor: pointer;\n  }\n\n  .accordian__header--dark{\n    background-color:var(--nile-colors-dark-200);\n  }\n\n  .accordian__header--arrow-left{\n    flex-direction: row-reverse;\n  }\n\n  .accordian__header:focus {\n    outline: none;\n  }\n\n  .accordian__header:focus-visible {\n    outline: solid 3px hsl(200.4, 98%, 39.4%);\n    outline-offset: calc(1px + 1px);\n  }\n\n  .accordian--disabled .accordian__header {\n    cursor: not-allowed;\n  }\n\n  .accordian--disabled .accordian__header:focus-visible {\n    outline: none;\n    box-shadow: none;\n  }\n\n  .accordian__summary {\n    flex: 1 1 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .accordian__summary-icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    transition: 250ms rotate ease;\n  }\n\n  .accordian--open .accordian__summary-icon {\n    rotate: 90deg;\n  }\n\n  .accordian--open slot[name='expand-icon'],\n  .accordian:not(.accordian--open) slot[name='collapse-icon'] {\n    display: none;\n  }\n\n  .accordian__body {\n    overflow: hidden;\n  }\n\n  .accordian__content {\n    display: block;\n    padding: var(--accordian-content-padding);\n  }\n\n  .accordian__content--arrow-left{\n   margin-left:28px;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-accordion/nile-accordion.d.ts

@@ -15,50 +15,65 @@ import type { CSSResultGroup } from 'lit';
  */
 export declare class NileAccordion extends NileElement {
     /**
-     * @summary Details show a brief summary and expand to show additional content.
+     * @summary Accordian show a brief summary and expand to show additional content.
      *
      * @dependency nile-icon
      *
-     * @slot - The details' main content.
-     * @slot summary - The details' summary. Alternatively, you can use the `summary` attribute.
+     * @slot - The accordian' main content.
+     * @slot summary - The accordian' summary. Alternatively, you can use the `summary` attribute.
      * @slot expand-icon - Optional expand icon to use instead of the default. Works best with `<nile-icon>`.
      * @slot collapse-icon - Optional collapse icon to use instead of the default. Works best with `<nile-icon>`.
      *
-     * @event nile-show - Emitted when the details opens.
-     * @event nile-after-show - Emitted after the details opens and all animations are complete.
-     * @event nile-hide - Emitted when the details closes.
-     * @event nile-after-hide - Emitted after the details closes and all animations are complete.
+     * @event nile-show - Emitted when the accordian opens.
+     * @event nile-after-show - Emitted after the accordian opens and all animations are complete.
+     * @event nile-hide - Emitted when the accordian closes.
+     * @event nile-after-hide - Emitted after the accordian closes and all animations are complete.
      *
      * @csspart base - The component's base wrapper.
      * @csspart header - The header that wraps both the summary and the expand/collapse icon.
      * @csspart summary - The container that wraps the summary.
      * @csspart summary-icon - The container that wraps the expand/collapse icons.
-     * @csspart content - The details content.
+     * @csspart content - The accordian content.
      *
-     * @animation details.show - The animation to use when showing details. You can use `height: auto` with this animation.
-     * @animation details.hide - The animation to use when hiding details. You can use `height: auto` with this animation.
+     * @animation accordian.show - The animation to use when showing accordian. You can use `height: auto` with this animation.
+     * @animation accordian.hide - The animation to use when hiding accordian. You can use `height: auto` with this animation.
      */
     static styles: CSSResultGroup;
-    details: HTMLElement;
+    accordian: HTMLElement;
     header: HTMLElement;
     body: HTMLElement;
     expandIconSlot: HTMLSlotElement;
     /**
-     * Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you
-     * can use the `show()` and `hide()` methods and this attribute will reflect the details' open state.
+     * Indicates whether or not the accordian is open. You can toggle this attribute to show and hide the accordian, or you
+     * can use the `show()` and `hide()` methods and this attribute will reflect the accordian' open state.
      */
     open: boolean;
+    /**
+     * Indicates the visual style of the accordian component. Accepted values are `'dark'` or `'light'`.
+     * Defaults to `'light'`.
+     */
+    variant: 'dark' | 'light';
+    /**
+     * Specifies the direction of the arrow indicator. Accepted values are `'left'` or `'right'`.
+     * Defaults to `'right'`.
+     */
+    expandIconPlacement: 'left' | 'right';
+    /**
+     * Specifies the size of the accordian component. Accepted values are `'sm'`, `'md'`, or `'lg'`.
+     * Defaults to `'md'`.
+     */
+    size: 'sm' | 'md' | 'lg';
     /** The summary to show in the header. If you need to display HTML, use the `summary` slot instead. */
     summary: string;
-    /** Disables the details so it can't be toggled. */
+    /** Disables the accordian so it can't be toggled. */
     disabled: boolean;
     firstUpdated(): void;
     private handleSummaryClick;
     private handleSummaryKeyDown;
     handleOpenChange(): Promise<void>;
-    /** Shows the details. */
+    /** Shows the accordian. */
     show(): Promise<void>;
-    /** Hides the details */
+    /** Hides the accordian */
     hide(): Promise<void>;
     render(): TemplateResult<1>;
 }