@ukho/admiralty-core 4.1.0 → 4.1.1

package/dist/admiralty/admiralty.esm.js

@@ -1,2 +1,2 @@
-import{p as e,b as a}from"./p-71979ff5.js";export{s as setNonce}from"./p-71979ff5.js";import{g as i}from"./p-e1255160.js";var l=()=>{const a=import.meta.url;const i={};if(a!==""){i.resourcesUrl=new URL(".",a).href}return e(i)};l().then((async e=>{await i();return a([["p-80766998",[[2,"admiralty-autocomplete",{autoselect:[4],cssNamespace:[1,"css-namespace"],displayMenu:[1,"display-menu"],minLength:[2,"min-length"],name:[1],placeholder:[1],confirmOnBlur:[4,"confirm-on-blur"],showNoOptionsFound:[4,"show-no-options-found"],showAllValues:[4,"show-all-values"],required:[4],assistiveHint:[1,"assistive-hint"],menuAttributes:[8,"menu-attributes"],inputClasses:[1,"input-classes"],menuClasses:[1,"menu-classes"],label:[1],hint:[1],invalid:[4],invalidMessage:[1,"invalid-message"],disabled:[4],value:[1025],filterFunction:[16],focused:[32],hovered:[32],menuOpen:[32],options:[32],option:[32],query:[32],validChoiceMade:[32],selected:[32],ariaHint:[32]},null,{value:["onValueChange"],focused:["onFocusedChange"]}]]],["p-1e01bb1c",[[2,"admiralty-input",{name:[1],label:[1],hint:[1],disabled:[4],type:[1],placeholder:[1],width:[2],required:[4],invalid:[4],invalidMessage:[1,"invalid-message"],autocomplete:[1],value:[1032]},null,{value:["valueChanged"]}]]],["p-089c5469",[[6,"admiralty-select",{disabled:[4],invalid:[4],invalidMessage:[1,"invalid-message"],hint:[1],label:[1],width:[2],value:[1032]},null,{value:["valueChanged"]}]]],["p-f8e59c54",[[2,"admiralty-textarea",{label:[1],hint:[1],width:[2],disabled:[4],invalid:[4],invalidMessage:[1,"invalid-message"],value:[1032]},null,{value:["valueChanged"]}]]],["p-4b6b0163",[[6,"admiralty-radio-group",{name:[1],label:[1],hint:[1],disabled:[4],value:[1032],displayVertical:[4,"display-vertical"],invalid:[4],invalidMessage:[1,"invalid-message"]},null,{value:["valueChanged"],invalid:["invalidChanged"]}]]],["p-1ee163a0",[[6,"admiralty-colour-block",{width:[2],height:[2],heading:[1],colour:[1],href:[1],linkText:[1,"link-text"],suppressRedirect:[4,"suppress-redirect"],enableCardEvent:[4,"enable-card-event"],actionText:[1,"action-text"]}]]],["p-ee0d714b",[[6,"admiralty-error-summary",{heading:[1]}]]],["p-0d01b051",[[2,"admiralty-file-input",{label:[1],multiple:[4],invalid:[4],invalidMessage:[1,"invalid-message"],files:[32]}]]],["p-2d0123c2",[[6,"admiralty-filter",{filterTitle:[1,"filter-title"]}]]],["p-ae15e60d",[[6,"admiralty-filter-group",{groupTitle:[1,"group-title"]}]]],["p-d3ccf10f",[[2,"admiralty-paginator",{pages:[2],currentPage:[2,"current-page"],label:[1]}]]],["p-7580d6f4",[[6,"admiralty-breadcrumb",{active:[4],first:[4],href:[1]}]]],["p-f9a0ba9e",[[6,"admiralty-header",{headerTitle:[1,"header-title"],headerTitleUrl:[1,"header-title-url"],logoLinkUrl:[1,"logo-link-url"],logoImgUrl:[1,"logo-img-url"],logoAltText:[1,"logo-alt-text"],mobileMenuOpen:[32],displayHamburger:[32]}]]],["p-5cf15d73",[[2,"admiralty-pill",{text:[1],number:[1],label:[1],colour:[1],selected:[4]}]]],["p-a0466b05",[[2,"admiralty-progress-bar",{label:[1],progression:[2],error:[4],progressionValue:[32]},null,{progression:["progressionChanged"]}]]],["p-f9b7b9c4",[[6,"admiralty-read-more",{heading:[1],expanded:[32]}]]],["p-86def5ca",[[2,"admiralty-autocomplete-option",{value:[8]}]]],["p-f2bd7504",[[6,"admiralty-breadcrumbs"]]],["p-37d5653a",[[6,"admiralty-card",{heading:[1]}]]],["p-cc089471",[[2,"admiralty-checkbox",{checkboxRight:[4,"checkbox-right"],disabled:[4],name:[1],checked:[1540],value:[8],labelText:[1,"label-text"],labelHidden:[4,"label-hidden"]},null,{checked:["checkedChanged"]}]]],["p-304203b2",[[6,"admiralty-footer",{variant:[1],imageLink:[1,"image-link"],imageSrc:[1,"image-src"],imageAlt:[1,"image-alt"],text:[1],hasSlotContent:[32]},[[2,"slotchange","handleSlotChange"]]]]],["p-cd9ecb06",[[6,"admiralty-header-menu-item",{menuTitle:[1,"menu-title"],active:[4]}]]],["p-e9677a9c",[[6,"admiralty-header-menu-link",{menuTitle:[1,"menu-title"],active:[4],href:[1],suppressRedirect:[4,"suppress-redirect"]}]]],["p-6ab48ce9",[[2,"admiralty-header-profile",{isSignedIn:[4,"is-signed-in"],signedInText:[1,"signed-in-text"],signInOnly:[4,"sign-in-only"]}]]],["p-fd1fcc7b",[[6,"admiralty-header-sub-menu-item",{menuTitle:[1,"menu-title"],href:[1],suppressRedirect:[4,"suppress-redirect"]}]]],["p-63f82d75",[[2,"admiralty-hr"]]],["p-a9229ed5",[[6,"admiralty-link",{href:[1],newTab:[4,"new-tab"]}]]],["p-e056352f",[[6,"admiralty-modal-dialog",{heading:[1],label:[1],description:[1],show:[4]}]]],["p-d37fc718",[[4,"admiralty-paginator-wrapper",null,[[0,"pageChange","pageChangedHandler"]]]]],["p-972fd212",[[2,"admiralty-phase-banner",{phase:[1],link:[1]}]]],["p-9812a01a",[[6,"admiralty-radio",{name:[1],value:[1025],disabled:[4],checked:[1028],invalid:[4],buttonTabindex:[32],setButtonTabindex:[64]},null,{value:["valueChanged"]}]]],["p-2638a62a",[[6,"admiralty-side-nav",{label:[1]}]]],["p-fdfe8eea",[[2,"admiralty-side-nav-item",{sideNavItemId:[1,"side-nav-item-id"],headingTitle:[1,"heading-title"],navActive:[4,"nav-active"]}]]],["p-0d787491",[[4,"admiralty-side-nav-wrapper",null,[[0,"sideNavItemSelected","onSideNavItemSelected"]]]]],["p-38f0f379",[[2,"admiralty-skip-link",{href:[1]}]]],["p-bba95259",[[6,"admiralty-tab",{label:[1],tabLabelId:[1,"tab-label-id"],tabContentId:[1,"tab-content-id"]}]]],["p-f2f2c51d",[[6,"admiralty-tab-group",{selectedIndex:[1026,"selected-index"]}]]],["p-2c76b091",[[6,"admiralty-table",{caption:[1]}]]],["p-32d4bc23",[[6,"admiralty-table-body"]]],["p-1432feef",[[6,"admiralty-table-cell"]]],["p-7fe7c173",[[6,"admiralty-table-header"]]],["p-99a105e6",[[6,"admiralty-table-header-cell"]]],["p-9269a7c0",[[6,"admiralty-table-row"]]],["p-9f8541ad",[[1,"admiralty-icon",{iconName:[1,"icon-name"],iconPrefix:[1,"icon-prefix"]}]]],["p-6d123507",[[6,"admiralty-dialogue",{type:[1],heading:[1],sectionRole:[1,"section-role"]}]]],["p-1e574971",[[6,"admiralty-expansion",{heading:[1],expanded:[1540],alignHeadingRight:[4,"align-heading-right"],hideBorder:[4,"hide-border"]}]]],["p-a228de74",[[6,"admiralty-button",{variant:[1],icon:[1],disabled:[516],type:[1],form:[1],name:[1],value:[1]}]]],["p-438c6046",[[6,"admiralty-hint",{disabled:[4]}],[6,"admiralty-label",{disabled:[4],for:[1]}],[6,"admiralty-input-invalid"]]]],e)}));
+import{p as e,b as a}from"./p-71979ff5.js";export{s as setNonce}from"./p-71979ff5.js";import{g as i}from"./p-e1255160.js";var l=()=>{const a=import.meta.url;const i={};if(a!==""){i.resourcesUrl=new URL(".",a).href}return e(i)};l().then((async e=>{await i();return a([["p-80766998",[[2,"admiralty-autocomplete",{autoselect:[4],cssNamespace:[1,"css-namespace"],displayMenu:[1,"display-menu"],minLength:[2,"min-length"],name:[1],placeholder:[1],confirmOnBlur:[4,"confirm-on-blur"],showNoOptionsFound:[4,"show-no-options-found"],showAllValues:[4,"show-all-values"],required:[4],assistiveHint:[1,"assistive-hint"],menuAttributes:[8,"menu-attributes"],inputClasses:[1,"input-classes"],menuClasses:[1,"menu-classes"],label:[1],hint:[1],invalid:[4],invalidMessage:[1,"invalid-message"],disabled:[4],value:[1025],filterFunction:[16],focused:[32],hovered:[32],menuOpen:[32],options:[32],option:[32],query:[32],validChoiceMade:[32],selected:[32],ariaHint:[32]},null,{value:["onValueChange"],focused:["onFocusedChange"]}]]],["p-1e01bb1c",[[2,"admiralty-input",{name:[1],label:[1],hint:[1],disabled:[4],type:[1],placeholder:[1],width:[2],required:[4],invalid:[4],invalidMessage:[1,"invalid-message"],autocomplete:[1],value:[1032]},null,{value:["valueChanged"]}]]],["p-089c5469",[[6,"admiralty-select",{disabled:[4],invalid:[4],invalidMessage:[1,"invalid-message"],hint:[1],label:[1],width:[2],value:[1032]},null,{value:["valueChanged"]}]]],["p-f8e59c54",[[2,"admiralty-textarea",{label:[1],hint:[1],width:[2],disabled:[4],invalid:[4],invalidMessage:[1,"invalid-message"],value:[1032]},null,{value:["valueChanged"]}]]],["p-4b6b0163",[[6,"admiralty-radio-group",{name:[1],label:[1],hint:[1],disabled:[4],value:[1032],displayVertical:[4,"display-vertical"],invalid:[4],invalidMessage:[1,"invalid-message"]},null,{value:["valueChanged"],invalid:["invalidChanged"]}]]],["p-1ee163a0",[[6,"admiralty-colour-block",{width:[2],height:[2],heading:[1],colour:[1],href:[1],linkText:[1,"link-text"],suppressRedirect:[4,"suppress-redirect"],enableCardEvent:[4,"enable-card-event"],actionText:[1,"action-text"]}]]],["p-ee0d714b",[[6,"admiralty-error-summary",{heading:[1]}]]],["p-0d01b051",[[2,"admiralty-file-input",{label:[1],multiple:[4],invalid:[4],invalidMessage:[1,"invalid-message"],files:[32]}]]],["p-2d0123c2",[[6,"admiralty-filter",{filterTitle:[1,"filter-title"]}]]],["p-ae15e60d",[[6,"admiralty-filter-group",{groupTitle:[1,"group-title"]}]]],["p-d3ccf10f",[[2,"admiralty-paginator",{pages:[2],currentPage:[2,"current-page"],label:[1]}]]],["p-7580d6f4",[[6,"admiralty-breadcrumb",{active:[4],first:[4],href:[1]}]]],["p-f9a0ba9e",[[6,"admiralty-header",{headerTitle:[1,"header-title"],headerTitleUrl:[1,"header-title-url"],logoLinkUrl:[1,"logo-link-url"],logoImgUrl:[1,"logo-img-url"],logoAltText:[1,"logo-alt-text"],mobileMenuOpen:[32],displayHamburger:[32]}]]],["p-5cf15d73",[[2,"admiralty-pill",{text:[1],number:[1],label:[1],colour:[1],selected:[4]}]]],["p-a0466b05",[[2,"admiralty-progress-bar",{label:[1],progression:[2],error:[4],progressionValue:[32]},null,{progression:["progressionChanged"]}]]],["p-f9b7b9c4",[[6,"admiralty-read-more",{heading:[1],expanded:[32]}]]],["p-86def5ca",[[2,"admiralty-autocomplete-option",{value:[8]}]]],["p-f2bd7504",[[6,"admiralty-breadcrumbs"]]],["p-37d5653a",[[6,"admiralty-card",{heading:[1]}]]],["p-cc089471",[[2,"admiralty-checkbox",{checkboxRight:[4,"checkbox-right"],disabled:[4],name:[1],checked:[1540],value:[8],labelText:[1,"label-text"],labelHidden:[4,"label-hidden"]},null,{checked:["checkedChanged"]}]]],["p-304203b2",[[6,"admiralty-footer",{variant:[1],imageLink:[1,"image-link"],imageSrc:[1,"image-src"],imageAlt:[1,"image-alt"],text:[1],hasSlotContent:[32]},[[2,"slotchange","handleSlotChange"]]]]],["p-cd9ecb06",[[6,"admiralty-header-menu-item",{menuTitle:[1,"menu-title"],active:[4]}]]],["p-e9677a9c",[[6,"admiralty-header-menu-link",{menuTitle:[1,"menu-title"],active:[4],href:[1],suppressRedirect:[4,"suppress-redirect"]}]]],["p-6ab48ce9",[[2,"admiralty-header-profile",{isSignedIn:[4,"is-signed-in"],signedInText:[1,"signed-in-text"],signInOnly:[4,"sign-in-only"]}]]],["p-fd1fcc7b",[[6,"admiralty-header-sub-menu-item",{menuTitle:[1,"menu-title"],href:[1],suppressRedirect:[4,"suppress-redirect"]}]]],["p-63f82d75",[[2,"admiralty-hr"]]],["p-a9229ed5",[[6,"admiralty-link",{href:[1],newTab:[4,"new-tab"]}]]],["p-e056352f",[[6,"admiralty-modal-dialog",{heading:[1],label:[1],description:[1],show:[4]}]]],["p-d37fc718",[[4,"admiralty-paginator-wrapper",null,[[0,"pageChange","pageChangedHandler"]]]]],["p-972fd212",[[2,"admiralty-phase-banner",{phase:[1],link:[1]}]]],["p-9812a01a",[[6,"admiralty-radio",{name:[1],value:[1025],disabled:[4],checked:[1028],invalid:[4],buttonTabindex:[32],setButtonTabindex:[64]},null,{value:["valueChanged"]}]]],["p-2638a62a",[[6,"admiralty-side-nav",{label:[1]}]]],["p-fdfe8eea",[[2,"admiralty-side-nav-item",{sideNavItemId:[1,"side-nav-item-id"],headingTitle:[1,"heading-title"],navActive:[4,"nav-active"]}]]],["p-0d787491",[[4,"admiralty-side-nav-wrapper",null,[[0,"sideNavItemSelected","onSideNavItemSelected"]]]]],["p-38f0f379",[[2,"admiralty-skip-link",{href:[1]}]]],["p-bba95259",[[6,"admiralty-tab",{label:[1],tabLabelId:[1,"tab-label-id"],tabContentId:[1,"tab-content-id"]}]]],["p-f2f2c51d",[[6,"admiralty-tab-group",{selectedIndex:[1026,"selected-index"]}]]],["p-2c76b091",[[6,"admiralty-table",{caption:[1]}]]],["p-32d4bc23",[[6,"admiralty-table-body"]]],["p-1432feef",[[6,"admiralty-table-cell"]]],["p-7fe7c173",[[6,"admiralty-table-header"]]],["p-99a105e6",[[6,"admiralty-table-header-cell"]]],["p-9269a7c0",[[6,"admiralty-table-row"]]],["p-9f8541ad",[[1,"admiralty-icon",{iconName:[1,"icon-name"],iconPrefix:[1,"icon-prefix"]}]]],["p-6d123507",[[6,"admiralty-dialogue",{type:[1],heading:[1],sectionRole:[1,"section-role"]}]]],["p-1e574971",[[6,"admiralty-expansion",{heading:[1],expanded:[1540],alignHeadingRight:[4,"align-heading-right"],hideBorder:[4,"hide-border"]}]]],["p-258ebe18",[[6,"admiralty-button",{variant:[1],icon:[1],disabled:[516],type:[1],form:[1],name:[1],value:[1]}]]],["p-438c6046",[[6,"admiralty-hint",{disabled:[4]}],[6,"admiralty-label",{disabled:[4],for:[1]}],[6,"admiralty-input-invalid"]]]],e)}));
 //# sourceMappingURL=admiralty.esm.js.map

package/dist/admiralty/p-258ebe18.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as a,g as o}from"./p-71979ff5.js";const r=".visually-hidden.sc-admiralty-button:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}@media (max-width: 1023px){.desktop-only.sc-admiralty-button{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-button{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-button{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-button{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-button{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-button{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-button{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-button{display:none}}button.primary.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;height:44px;padding:10px 16px;white-space:nowrap;min-width:50px;background-color:var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast);border:2px solid var(--admiralty-colour-primary)}button.primary.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:12px 18px 8px}button.primary:focus.sc-admiralty-button-s>*,button.primary:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.primary.sc-admiralty-button:disabled{cursor:default}button.primary.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.primary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:10px 16px}@media (max-width: 1023px){button.primary.sc-admiralty-button{min-width:unset;max-width:200px;width:100%;height:44px;padding:10px 16px}}button.primary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-idiomatic-font-size, var(--admiralty-font-size-2));color:var(--admiralty-colour-primary);padding-left:15px}button.primary.sc-admiralty-button:hover{background-color:var(--admiralty-colour-primary-shade);border:2px solid var(--admiralty-colour-primary-shade);color:var(--admiralty-colour-primary-contrast);border-color:var(--admiralty-colour-primary-shade);padding:10px 16px}button.primary.sc-admiralty-button:hover:focus{padding:12px 18px 8px}button.primary.sc-admiralty-button:hover:focus:active{padding:10px 16px}button.primary.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-primary-contrast);border:2px solid var(--admiralty-colour-primary-contrast);color:var(--admiralty-colour-primary)}button.primary.sc-admiralty-button:enabled:active i.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.primary.sc-admiralty-button:enabled:active p.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.primary.sc-admiralty-button:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-disabled-colour)}button.secondary.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;height:44px;padding:10px 16px;white-space:nowrap;min-width:50px;background-color:var(--admiralty-colour-primary-contrast);color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary)}button.secondary.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:12px 18px 8px}button.secondary:focus.sc-admiralty-button-s>*,button.secondary:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.secondary.sc-admiralty-button:disabled{cursor:default}button.secondary.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.secondary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:10px 16px}@media (max-width: 1023px){button.secondary.sc-admiralty-button{min-width:unset;max-width:200px;width:100%;height:44px;padding:10px 16px}}button.secondary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-idiomatic-font-size, var(--admiralty-font-size-2));color:var(--admiralty-colour-primary);padding-left:15px}button.secondary.sc-admiralty-button:hover{background-color:var(--admiralty-hover-background-colour);color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary-shade);padding:10px 16px}button.secondary.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast)}button.secondary.sc-admiralty-button:enabled:active i.sc-admiralty-button{color:var(--admiralty-colour-primary-contrast)}button.secondary.sc-admiralty-button:enabled:active p.sc-admiralty-button{color:var(--admiralty-colour-primary-contrast)}button.secondary.sc-admiralty-button:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-disabled-colour)}button.secondary.sc-admiralty-button i.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.warning.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;height:44px;padding:10px 16px;white-space:nowrap;min-width:50px;background-color:var(--admiralty-colour-danger);color:var(--admiralty-colour-danger-contrast);border:2px solid var(--admiralty-colour-danger)}button.warning.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:12px 18px 8px}button.warning:focus.sc-admiralty-button-s>*,button.warning:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.warning.sc-admiralty-button:disabled{cursor:default}button.warning.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.warning.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:10px 16px}@media (max-width: 1023px){button.warning.sc-admiralty-button{min-width:unset;max-width:200px;width:100%;height:44px;padding:10px 16px}}button.warning.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-idiomatic-font-size, var(--admiralty-font-size-2));color:var(--admiralty-colour-primary);padding-left:15px}button.warning.sc-admiralty-button:hover{background-color:var(--admiralty-colour-danger-shade);color:var(--admiralty-colour-danger-contrast);border:2px solid var(--admiralty-colour-danger-shade);padding:10px 16px}button.warning.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-danger-contrast);border:2px solid var(--admiralty-colour-danger-contrast);color:var(--admiralty-colour-danger)}button.warning.sc-admiralty-button:enabled:active i.sc-admiralty-button{color:var(--admiralty-colour-danger)}button.warning.sc-admiralty-button:enabled:active p.sc-admiralty-button{color:var(--admiralty-colour-danger)}button.warning.sc-admiralty-button:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-disabled-colour)}button.warning.sc-admiralty-button:disabled>*.sc-admiralty-button{opacity:0.5}button.warning.sc-admiralty-button i.sc-admiralty-button{color:var(--admiralty-colour-danger-contrast)}button.text.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;color:var(--admiralty-colour-primary)}button.text.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:12px 18px 8px}button.text:focus.sc-admiralty-button-s>*,button.text:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.text.sc-admiralty-button:disabled{cursor:default}button.text.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.text.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:10px 16px}button.text.sc-admiralty-button:enabled:active{color:var(--admiralty-colour-primary)}button.text.sc-admiralty-button:enabled:active i.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.text.sc-admiralty-button:enabled:active p.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.text.sc-admiralty-button:disabled{color:var(--admiralty-disabled-colour)}button.text.sc-admiralty-button:disabled>*.sc-admiralty-button{opacity:0.5}button.text.sc-admiralty-button:focus{border:none;box-shadow:0 -2px var(--admiralty-focus-colour), 0 4px var(--admiralty-text-colour);text-decoration:none;padding:0}button.text:focus.sc-admiralty-button-s>*,button.text:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.text.sc-admiralty-button i.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.icon.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;min-height:44px;min-width:50px;background-color:var(--admiralty-background-colour-tint);color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary);padding:9px}button.icon.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:12px 18px 8px}button.icon:focus.sc-admiralty-button-s>*,button.icon:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.icon.sc-admiralty-button:disabled{cursor:default}button.icon.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.icon.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:10px 16px}button.icon.sc-admiralty-button:focus{padding:11px 11px 8px}button.icon.sc-admiralty-button:hover{background-color:var(--admiralty-colour-primary-contrast);border:2px solid var(--admiralty-colour-primary);padding:9px}button.icon.sc-admiralty-button admiralty-icon.icon-padding.sc-admiralty-button{padding-left:8px}button.icon.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast);border:2px solid var(--admiralty-colour-primary);border:2px solid transparent}button.icon.sc-admiralty-button:enabled:active admiralty-icon.sc-admiralty-button{color:var(--admiralty-colour-primary-contrast) !important}button.icon.sc-admiralty-button:disabled{background-color:var(--admiralty-background-colour-tint);border:2px solid var(--admiralty-colour-primary);opacity:0.3}button.icon.sc-admiralty-button:active:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-colour-primary);opacity:0.3}button.icon.sc-admiralty-button i.sc-admiralty-button{margin:auto;font-size:unset;color:unset;padding-left:unset}";const i=r;const n=class{constructor(a){t(this,a);this.variant="primary";this.icon=undefined;this.disabled=false;this.type="submit";this.form=undefined;this.name=undefined;this.value=undefined}render(){const t=this.el.textContent.trim().length>0;const{form:o,name:r,value:i}=this;const n=Object.assign(Object.assign(Object.assign({},o&&{form:o}),r&&{name:r}),i&&{value:i});return a("button",Object.assign({key:"a0f8dc60d81d091107a1aa7d3cb7fbeb66f10377",type:this.type,disabled:this.disabled,class:this.variant},n),a("slot",{key:"be4166fe61422f72ba76dd07c9f9e93bb6ab3c14"}),this.icon?a("admiralty-icon",{"icon-name":this.icon,class:`${t?"icon-padding":""}`}):undefined)}get el(){return o(this)}};n.style=i;export{n as admiralty_button};
+//# sourceMappingURL=p-258ebe18.entry.js.map

package/dist/admiralty/p-258ebe18.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["buttonCss","AdmiraltyButtonStyle0","ButtonComponent","render","hasTextContent","this","el","textContent","trim","length","form","name","value","props","Object","assign","h","key","type","disabled","class","variant","icon","undefined"],"sources":["src/components/button/button.scss?tag=admiralty-button&encapsulation=scoped","src/components/button/button.tsx"],"sourcesContent":["@import 'button.vars';\n\n@mixin button-defaults {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  font-size: $button-font-size;\n  line-height: $button-line-height;\n  font-weight: $button-font-weight;\n  background-color: unset;\n  cursor: pointer;\n\n  &:focus {\n    outline: none;\n    color: $button-focus-text-colour;\n    background-color: $button-focus-colour;\n    border: none;\n    border-bottom: 4px solid $button-focus-text-colour;\n    padding: 12px 18px 8px;\n\n    ::slotted(*) {\n      color: $button-focus-text-colour !important;\n    }\n  }\n\n  &:disabled {\n    cursor: default;\n    * {\n      pointer-events: none;\n    }\n  }\n\n  i {\n    display: inline-block;\n    font-size: $button-font-size;\n    color: $button-icon-colour;\n    padding: 10px 16px;\n  }\n}\n\n@mixin button {\n  @include button-defaults;\n  height: 44px;\n  padding: 10px 16px;\n  white-space: nowrap;\n  min-width: 50px;\n\n  @include not-desktop {\n    min-width: unset;\n    max-width: 200px;\n    width: 100%;\n    height: 44px;\n    padding: 10px 16px;\n  }\n\n  i {\n    display: inline-block;\n    font-size: $button-idiomatic-font-size;\n    color: $button-icon-colour;\n    padding-left: 15px;\n  }\n}\n\n/* Primary Buttons */\nbutton.primary {\n  @include button;\n  background-color: $button-colour-standard;\n  color: $button-text-colour-standard;\n  border: 2px solid $button-border-colour-standard;\n\n  &:hover {\n    background-color: $button-hover-colour-standard;\n    border: 2px solid $button-hover-colour-standard;\n    color: $button-hover-text-colour-standard;\n    border-color: $button-hover-border-colour-standard;\n    padding: 10px 16px;\n  }\n\n  &:hover:focus {\n    padding: 12px 18px 8px;\n  }\n\n  &:hover:focus:active {\n    padding: 10px 16px;\n  }\n\n  &:enabled:active {\n    background-color: $button-active-colour-standard;\n    border: 2px solid $button-active-border-colour-standard;\n    color: $button-active-text-colour-standard;\n\n    i {\n      color: $button-active-text-colour-standard;\n    }\n\n    p {\n      color: $button-active-text-colour-standard;\n    }\n  }\n\n  &:disabled {\n    background-color: $button-colour-deselected;\n    border: 2px solid $button-border-colour-deselected;\n  }\n}\n\n/* Secondary Buttons */\nbutton.secondary {\n  @include button;\n  background-color: $button-colour-secondary;\n  color: $button-text-colour-secondary;\n  border: 2px solid $button-border-colour-secondary;\n\n  &:hover {\n    background-color: $button-hover-colour-secondary;\n    color: $button-hover-text-colour-secondary;\n    border: 2px solid $button-hover-border-colour-secondary;\n    padding: 10px 16px;\n  }\n\n  &:enabled:active {\n    background-color: $button-active-colour-secondary;\n    border: 2px solid $button-active-border-colour-secondary;\n    color: $button-active-text-colour-secondary;\n\n    i {\n      color: $button-active-text-colour-secondary;\n    }\n\n    p {\n      color: $button-active-text-colour-secondary;\n    }\n  }\n\n  &:disabled {\n    background-color: $button-colour-deselected;\n    border: 2px solid $button-border-colour-deselected;\n  }\n\n  i {\n    color: $button-text-colour-secondary;\n  }\n}\n\n/* Warning Buttons */\nbutton.warning {\n  @include button;\n  background-color: $button-colour-warning;\n  color: $button-text-colour-warning;\n  border: 2px solid $button-border-colour-warning;\n\n  &:hover {\n    background-color: $button-hover-colour-warning;\n    color: $button-text-colour-warning;\n    border: 2px solid $button-hover-border-colour-warning;\n    padding: 10px 16px;\n  }\n\n  &:enabled:active {\n    background-color: $button-active-colour-warning;\n    border: 2px solid $button-active-border-colour-warning;\n    color: $button-active-text-colour-warning;\n\n    i {\n      color: $button-active-text-colour-warning;\n    }\n\n    p {\n      color: $button-active-text-colour-warning;\n    }\n  }\n\n  &:disabled {\n    background-color: $button-colour-deselected;\n    border: 2px solid $button-border-colour-deselected;\n    & > * {\n      opacity: 0.5;\n    }\n  }\n\n  i {\n    color: $button-text-colour-warning;\n  }\n}\n\n/* Text Buttons */\nbutton.text {\n  @include button-defaults;\n  color: $button-text-colour-secondary;\n\n  &:enabled:active {\n    color: $button-text-colour-secondary;\n\n    i {\n      color: $button-text-colour-secondary;\n    }\n\n    p {\n      color: $button-text-colour-secondary;\n    }\n  }\n\n  &:disabled {\n    color: $button-colour-deselected;\n    & > * {\n      opacity: 0.5;\n    }\n  }\n\n  &:focus {\n    border: none;\n    box-shadow:\n      0 -2px $button-focus-colour,\n      0 4px $button-focus-text-colour;\n    text-decoration: none;\n    padding: 0;\n    ::slotted(*) {\n      color: $button-focus-text-colour !important;\n    }\n  }\n\n  i {\n    color: $button-text-colour-secondary;\n  }\n}\n\n/* Icon Buttons */\nbutton.icon {\n  @include button-defaults;\n  min-height: 44px;\n  min-width: 50px;\n\n  background-color: $button-colour-icon;\n  color: $button-text-colour-icon;\n  border: 2px solid $button-border-colour-icon;\n  padding: 9px;\n\n  &:focus {\n    padding: 11px 11px 8px;\n  }\n\n  &:hover {\n    background-color: $button-hover-colour-icon;\n    border: 2px solid $button-hover-border-colour-icon;\n    padding: 9px;\n  }\n\n  admiralty-icon {\n    &.icon-padding {\n      padding-left: 8px;\n    }\n  }\n\n\n  &:enabled:active {\n    background-color: $button-active-colour-icon;\n    color: $button-active-text-colour-icon;\n    border: 2px solid $button-active-border-colour-icon;\n    border: 2px solid transparent;\n\n    admiralty-icon {\n      color: $button-active-text-colour-icon !important;\n    }\n  }\n\n  &:disabled {\n    background-color: $button-disabled-colour-icon;\n    border: 2px solid $button-active-border-colour-icon;\n    opacity: 0.3;\n  }\n\n  &:active:disabled {\n    background-color: $button-colour-deselected;\n    border: 2px solid $button-active-border-colour-icon;\n    opacity: 0.3;\n  }\n\n  i {\n    margin: auto;\n    font-size: unset;\n    color: unset;\n    padding-left: unset;\n  }\n}\n","import { Component, Prop, h, Element} from '@stencil/core';\nimport { ButtonVariant } from './button.types';\nimport { IconName } from '@fortawesome/fontawesome-svg-core';\n\n@Component({\n  tag: 'admiralty-button',\n  styleUrl: 'button.scss',\n  scoped: true,\n})\nexport class ButtonComponent {\n  @Element() el: HTMLElement;\n  /**\n   * The type of button to render. Valid values are `primary`, `secondary`, `warning`, `text` and `icon`.\n   * Default value is `primary`.\n   */\n  @Prop() variant: ButtonVariant = 'primary';\n  /**\n   * When passed Font Awesome Icon name, then an icon will be rendered.\n   */\n  @Prop() icon: IconName;\n  /**\n   * Determines whether the button is disabled. A button in disabled state will not fire click output events.\n   */\n  @Prop({ reflect: true }) disabled = false;\n  /**\n   * The default behavior of the button. Valid values are `button`, `submit` and `reset`.\n   * Default value is `submit`.\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'submit';\n  /**\n   * The `<form>` element to associate the button with (its form owner).\n   */\n  @Prop() form: string;\n  /**\n   * The name of the button, submitted as a pair with the button's value as part of the form data,\n   * when that button is used to submit the form.\n   */\n  @Prop() name: string;\n  /**\n   * Defines the value associated with the button's name when it's submitted with the form data.\n   * This value is passed to the server in params when the form is submitted using this button.\n   */\n  @Prop() value: string;\n\n  render() {\n    const hasTextContent = this.el.textContent.trim().length > 0;\n\n    const { form, name, value } = this;\n    const props = {\n      ...(form && { form }),\n      ...(name && { name }),\n      ...(value && { value }),\n    };\n\n    return (\n      <button type={this.type} disabled={this.disabled} class={this.variant} {...props}>\n        <slot></slot>\n        {this.icon ? <admiralty-icon icon-name={this.icon} class={`${hasTextContent? \"icon-padding\" : \"\"}`}></admiralty-icon> : undefined}\n      </button>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAY,mgZAClB,MAAAC,EAAeD,E,MCQFE,EAAe,M,sCAMO,U,kCAQG,M,UAKU,S,6DAgB9C,MAAAC,GACE,MAAMC,EAAiBC,KAAKC,GAAGC,YAAYC,OAAOC,OAAS,EAE3D,MAAMC,KAAEA,EAAIC,KAAEA,EAAIC,MAAEA,GAAUP,KAC9B,MAAMQ,EAAKC,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,GACLL,GAAQ,CAAEA,SACVC,GAAQ,CAAEA,SACVC,GAAS,CAAEA,UAGjB,OACEI,EAAA,SAAAF,OAAAC,OAAA,CAAAE,IAAA,2CAAQC,KAAMb,KAAKa,KAAMC,SAAUd,KAAKc,SAAUC,MAAOf,KAAKgB,SAAaR,GACzEG,EAAA,QAAAC,IAAA,6CACCZ,KAAKiB,KAAON,EAAA,8BAA2BX,KAAKiB,KAAMF,MAAO,GAAGhB,EAAgB,eAAiB,OAA0BmB,U","ignoreList":[]}

package/dist/cjs/admiralty-button.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2aa80b51.js');
 
-const buttonCss = ".visually-hidden.sc-admiralty-button:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}@media (max-width: 1023px){.desktop-only.sc-admiralty-button{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-button{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-button{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-button{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-button{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-button{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-button{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-button{display:none}}button.primary.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;height:44px;padding:10px 16px;white-space:nowrap;min-width:50px;background-color:var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast);border:2px solid var(--admiralty-colour-primary)}button.primary.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:12px 18px 8px}button.primary:focus.sc-admiralty-button-s>*,button.primary:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.primary.sc-admiralty-button:disabled{cursor:default}button.primary.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.primary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:10px 16px}@media (max-width: 1023px){button.primary.sc-admiralty-button{min-width:unset;max-width:200px;width:100%;height:44px;padding:10px 16px}}button.primary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-idiomatic-font-size, var(--admiralty-font-size-2));color:var(--admiralty-colour-primary);padding-left:15px}button.primary.sc-admiralty-button:hover{background-color:var(--admiralty-colour-primary-shade);border:2px solid var(--admiralty-colour-primary-shade);color:var(--admiralty-colour-primary-contrast);border-color:var(--admiralty-colour-primary-shade);padding:10px 16px}button.primary.sc-admiralty-button:hover:focus{padding:12px 18px 8px}button.primary.sc-admiralty-button:hover:focus:active{padding:10px 16px}button.primary.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-primary-contrast);border:2px solid var(--admiralty-colour-primary-contrast);color:var(--admiralty-colour-primary)}button.primary.sc-admiralty-button:enabled:active i.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.primary.sc-admiralty-button:enabled:active p.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.primary.sc-admiralty-button:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-disabled-colour)}button.secondary.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;height:44px;padding:10px 16px;white-space:nowrap;min-width:50px;background-color:var(--admiralty-colour-primary-contrast);color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary)}button.secondary.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:12px 18px 8px}button.secondary:focus.sc-admiralty-button-s>*,button.secondary:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.secondary.sc-admiralty-button:disabled{cursor:default}button.secondary.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.secondary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:10px 16px}@media (max-width: 1023px){button.secondary.sc-admiralty-button{min-width:unset;max-width:200px;width:100%;height:44px;padding:10px 16px}}button.secondary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-idiomatic-font-size, var(--admiralty-font-size-2));color:var(--admiralty-colour-primary);padding-left:15px}button.secondary.sc-admiralty-button:hover{background-color:var(--admiralty-hover-background-colour);color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary-shade);padding:10px 16px}button.secondary.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast)}button.secondary.sc-admiralty-button:enabled:active i.sc-admiralty-button{color:var(--admiralty-colour-primary-contrast)}button.secondary.sc-admiralty-button:enabled:active p.sc-admiralty-button{color:var(--admiralty-colour-primary-contrast)}button.secondary.sc-admiralty-button:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-disabled-colour)}button.secondary.sc-admiralty-button i.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.warning.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;height:44px;padding:10px 16px;white-space:nowrap;min-width:50px;background-color:var(--admiralty-colour-danger);color:var(--admiralty-colour-danger-contrast);border:2px solid var(--admiralty-colour-danger)}button.warning.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:12px 18px 8px}button.warning:focus.sc-admiralty-button-s>*,button.warning:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.warning.sc-admiralty-button:disabled{cursor:default}button.warning.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.warning.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:10px 16px}@media (max-width: 1023px){button.warning.sc-admiralty-button{min-width:unset;max-width:200px;width:100%;height:44px;padding:10px 16px}}button.warning.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-idiomatic-font-size, var(--admiralty-font-size-2));color:var(--admiralty-colour-primary);padding-left:15px}button.warning.sc-admiralty-button:hover{background-color:var(--admiralty-colour-danger-shade);color:var(--admiralty-colour-danger-contrast);border:2px solid var(--admiralty-colour-danger-shade);padding:10px 16px}button.warning.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-danger-contrast);border:2px solid var(--admiralty-colour-danger-contrast);color:var(--admiralty-colour-danger)}button.warning.sc-admiralty-button:enabled:active i.sc-admiralty-button{color:var(--admiralty-colour-danger)}button.warning.sc-admiralty-button:enabled:active p.sc-admiralty-button{color:var(--admiralty-colour-danger)}button.warning.sc-admiralty-button:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-disabled-colour)}button.warning.sc-admiralty-button:disabled>*.sc-admiralty-button{opacity:0.5}button.warning.sc-admiralty-button i.sc-admiralty-button{color:var(--admiralty-colour-danger-contrast)}button.text.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;color:var(--admiralty-colour-primary)}button.text.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:12px 18px 8px}button.text:focus.sc-admiralty-button-s>*,button.text:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.text.sc-admiralty-button:disabled{cursor:default}button.text.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.text.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:10px 16px}button.text.sc-admiralty-button:enabled:active{color:var(--admiralty-colour-primary)}button.text.sc-admiralty-button:enabled:active i.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.text.sc-admiralty-button:enabled:active p.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.text.sc-admiralty-button:disabled{color:var(--admiralty-disabled-colour)}button.text.sc-admiralty-button:disabled>*.sc-admiralty-button{opacity:0.5}button.text.sc-admiralty-button:focus{border:none;box-shadow:0 -2px var(--admiralty-focus-colour), 0 4px var(--admiralty-text-colour);text-decoration:none;padding:0}button.text:focus.sc-admiralty-button-s>*,button.text:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.text.sc-admiralty-button i.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.icon.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;min-height:44px;min-width:50px;background-color:var(--admiralty-background-colour-tint);color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary);padding:9px}button.icon.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:12px 18px 8px}button.icon:focus.sc-admiralty-button-s>*,button.icon:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.icon.sc-admiralty-button:disabled{cursor:default}button.icon.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.icon.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:10px 16px}button.icon.sc-admiralty-button:focus{padding:12px 16px 8px}button.icon.sc-admiralty-button:hover{background-color:var(--admiralty-colour-primary-contrast);border:2px solid var(--admiralty-colour-primary);padding:9px}button.icon.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast);border:2px solid var(--admiralty-colour-primary);border:2px solid transparent}button.icon.sc-admiralty-button:enabled:active admiralty-icon.sc-admiralty-button{color:var(--admiralty-colour-primary-contrast) !important}button.icon.sc-admiralty-button:disabled{background-color:var(--admiralty-background-colour-tint);border:2px solid var(--admiralty-colour-primary);opacity:0.3}button.icon.sc-admiralty-button:active:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-colour-primary);opacity:0.3}button.icon.sc-admiralty-button i.sc-admiralty-button{margin:auto;font-size:unset;color:unset;padding-left:unset}";
+const buttonCss = ".visually-hidden.sc-admiralty-button:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}@media (max-width: 1023px){.desktop-only.sc-admiralty-button{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-button{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-button{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-button{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-button{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-button{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-button{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-button{display:none}}button.primary.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;height:44px;padding:10px 16px;white-space:nowrap;min-width:50px;background-color:var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast);border:2px solid var(--admiralty-colour-primary)}button.primary.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:12px 18px 8px}button.primary:focus.sc-admiralty-button-s>*,button.primary:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.primary.sc-admiralty-button:disabled{cursor:default}button.primary.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.primary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:10px 16px}@media (max-width: 1023px){button.primary.sc-admiralty-button{min-width:unset;max-width:200px;width:100%;height:44px;padding:10px 16px}}button.primary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-idiomatic-font-size, var(--admiralty-font-size-2));color:var(--admiralty-colour-primary);padding-left:15px}button.primary.sc-admiralty-button:hover{background-color:var(--admiralty-colour-primary-shade);border:2px solid var(--admiralty-colour-primary-shade);color:var(--admiralty-colour-primary-contrast);border-color:var(--admiralty-colour-primary-shade);padding:10px 16px}button.primary.sc-admiralty-button:hover:focus{padding:12px 18px 8px}button.primary.sc-admiralty-button:hover:focus:active{padding:10px 16px}button.primary.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-primary-contrast);border:2px solid var(--admiralty-colour-primary-contrast);color:var(--admiralty-colour-primary)}button.primary.sc-admiralty-button:enabled:active i.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.primary.sc-admiralty-button:enabled:active p.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.primary.sc-admiralty-button:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-disabled-colour)}button.secondary.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;height:44px;padding:10px 16px;white-space:nowrap;min-width:50px;background-color:var(--admiralty-colour-primary-contrast);color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary)}button.secondary.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:12px 18px 8px}button.secondary:focus.sc-admiralty-button-s>*,button.secondary:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.secondary.sc-admiralty-button:disabled{cursor:default}button.secondary.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.secondary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:10px 16px}@media (max-width: 1023px){button.secondary.sc-admiralty-button{min-width:unset;max-width:200px;width:100%;height:44px;padding:10px 16px}}button.secondary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-idiomatic-font-size, var(--admiralty-font-size-2));color:var(--admiralty-colour-primary);padding-left:15px}button.secondary.sc-admiralty-button:hover{background-color:var(--admiralty-hover-background-colour);color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary-shade);padding:10px 16px}button.secondary.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast)}button.secondary.sc-admiralty-button:enabled:active i.sc-admiralty-button{color:var(--admiralty-colour-primary-contrast)}button.secondary.sc-admiralty-button:enabled:active p.sc-admiralty-button{color:var(--admiralty-colour-primary-contrast)}button.secondary.sc-admiralty-button:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-disabled-colour)}button.secondary.sc-admiralty-button i.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.warning.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;height:44px;padding:10px 16px;white-space:nowrap;min-width:50px;background-color:var(--admiralty-colour-danger);color:var(--admiralty-colour-danger-contrast);border:2px solid var(--admiralty-colour-danger)}button.warning.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:12px 18px 8px}button.warning:focus.sc-admiralty-button-s>*,button.warning:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.warning.sc-admiralty-button:disabled{cursor:default}button.warning.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.warning.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:10px 16px}@media (max-width: 1023px){button.warning.sc-admiralty-button{min-width:unset;max-width:200px;width:100%;height:44px;padding:10px 16px}}button.warning.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-idiomatic-font-size, var(--admiralty-font-size-2));color:var(--admiralty-colour-primary);padding-left:15px}button.warning.sc-admiralty-button:hover{background-color:var(--admiralty-colour-danger-shade);color:var(--admiralty-colour-danger-contrast);border:2px solid var(--admiralty-colour-danger-shade);padding:10px 16px}button.warning.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-danger-contrast);border:2px solid var(--admiralty-colour-danger-contrast);color:var(--admiralty-colour-danger)}button.warning.sc-admiralty-button:enabled:active i.sc-admiralty-button{color:var(--admiralty-colour-danger)}button.warning.sc-admiralty-button:enabled:active p.sc-admiralty-button{color:var(--admiralty-colour-danger)}button.warning.sc-admiralty-button:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-disabled-colour)}button.warning.sc-admiralty-button:disabled>*.sc-admiralty-button{opacity:0.5}button.warning.sc-admiralty-button i.sc-admiralty-button{color:var(--admiralty-colour-danger-contrast)}button.text.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;color:var(--admiralty-colour-primary)}button.text.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:12px 18px 8px}button.text:focus.sc-admiralty-button-s>*,button.text:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.text.sc-admiralty-button:disabled{cursor:default}button.text.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.text.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:10px 16px}button.text.sc-admiralty-button:enabled:active{color:var(--admiralty-colour-primary)}button.text.sc-admiralty-button:enabled:active i.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.text.sc-admiralty-button:enabled:active p.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.text.sc-admiralty-button:disabled{color:var(--admiralty-disabled-colour)}button.text.sc-admiralty-button:disabled>*.sc-admiralty-button{opacity:0.5}button.text.sc-admiralty-button:focus{border:none;box-shadow:0 -2px var(--admiralty-focus-colour), 0 4px var(--admiralty-text-colour);text-decoration:none;padding:0}button.text:focus.sc-admiralty-button-s>*,button.text:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.text.sc-admiralty-button i.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.icon.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;min-height:44px;min-width:50px;background-color:var(--admiralty-background-colour-tint);color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary);padding:9px}button.icon.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:12px 18px 8px}button.icon:focus.sc-admiralty-button-s>*,button.icon:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.icon.sc-admiralty-button:disabled{cursor:default}button.icon.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.icon.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:10px 16px}button.icon.sc-admiralty-button:focus{padding:11px 11px 8px}button.icon.sc-admiralty-button:hover{background-color:var(--admiralty-colour-primary-contrast);border:2px solid var(--admiralty-colour-primary);padding:9px}button.icon.sc-admiralty-button admiralty-icon.icon-padding.sc-admiralty-button{padding-left:8px}button.icon.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast);border:2px solid var(--admiralty-colour-primary);border:2px solid transparent}button.icon.sc-admiralty-button:enabled:active admiralty-icon.sc-admiralty-button{color:var(--admiralty-colour-primary-contrast) !important}button.icon.sc-admiralty-button:disabled{background-color:var(--admiralty-background-colour-tint);border:2px solid var(--admiralty-colour-primary);opacity:0.3}button.icon.sc-admiralty-button:active:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-colour-primary);opacity:0.3}button.icon.sc-admiralty-button i.sc-admiralty-button{margin:auto;font-size:unset;color:unset;padding-left:unset}";
 const AdmiraltyButtonStyle0 = buttonCss;
 
 const ButtonComponent = class {
@@ -19,10 +19,12 @@ const ButtonComponent = class {
         this.value = undefined;
     }
     render() {
+        const hasTextContent = this.el.textContent.trim().length > 0;
         const { form, name, value } = this;
         const props = Object.assign(Object.assign(Object.assign({}, (form && { form })), (name && { name })), (value && { value }));
-        return (index.h("button", Object.assign({ key: 'c1f8179333c7e45f79b04504834a48ccb4c7cd43', type: this.type, disabled: this.disabled, class: this.variant }, props), index.h("slot", { key: '113862f33d21bbc41514110653ba432893786a40' }), this.icon ? index.h("admiralty-icon", { "icon-name": this.icon }) : undefined));
+        return (index.h("button", Object.assign({ key: 'a0f8dc60d81d091107a1aa7d3cb7fbeb66f10377', type: this.type, disabled: this.disabled, class: this.variant }, props), index.h("slot", { key: 'be4166fe61422f72ba76dd07c9f9e93bb6ab3c14' }), this.icon ? index.h("admiralty-icon", { "icon-name": this.icon, class: `${hasTextContent ? "icon-padding" : ""}` }) : undefined));
     }
+    get el() { return index.getElement(this); }
 };
 ButtonComponent.style = AdmiraltyButtonStyle0;
 

package/dist/cjs/admiralty-button.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"admiralty-button.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,i6YAAi6Y,CAAC;AACp7Y,8BAAe,SAAS;;MCQX,eAAe;;;uBAKO,SAAS;;wBAQN,KAAK;oBAKK,QAAQ;;;;;IAgBtD,MAAM;QACJ,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QACnC,MAAM,KAAK,kDACL,IAAI,IAAI,EAAE,IAAI,EAAE,KAChB,IAAI,IAAI,EAAE,IAAI,EAAE,KAChB,KAAK,IAAI,EAAE,KAAK,EAAE,EACvB,CAAC;QACF,QACEA,mFAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,IAAM,KAAK,GAC9EA,oEAAa,EACZ,IAAI,CAAC,IAAI,GAAGA,yCAA2B,IAAI,CAAC,IAAI,GAAmB,GAAG,SAAS,CACzE,EACT;KACH;;;;;;","names":["h"],"sources":["src/components/button/button.scss?tag=admiralty-button&encapsulation=scoped","src/components/button/button.tsx"],"sourcesContent":["@import 'button.vars';\n\n@mixin button-defaults {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  font-size: $button-font-size;\n  line-height: $button-line-height;\n  font-weight: $button-font-weight;\n  background-color: unset;\n  cursor: pointer;\n\n  &:focus {\n    outline: none;\n    color: $button-focus-text-colour;\n    background-color: $button-focus-colour;\n    border: none;\n    border-bottom: 4px solid $button-focus-text-colour;\n    padding: 12px 18px 8px;\n\n    ::slotted(*) {\n      color: $button-focus-text-colour !important;\n    }\n  }\n\n  &:disabled {\n    cursor: default;\n    * {\n      pointer-events: none;\n    }\n  }\n\n  i {\n    display: inline-block;\n    font-size: $button-font-size;\n    color: $button-icon-colour;\n    padding: 10px 16px;\n  }\n}\n\n@mixin button {\n  @include button-defaults;\n  height: 44px;\n  padding: 10px 16px;\n  white-space: nowrap;\n  min-width: 50px;\n\n  @include not-desktop {\n    min-width: unset;\n    max-width: 200px;\n    width: 100%;\n    height: 44px;\n    padding: 10px 16px;\n  }\n\n  i {\n    display: inline-block;\n    font-size: $button-idiomatic-font-size;\n    color: $button-icon-colour;\n    padding-left: 15px;\n  }\n}\n\n/* Primary Buttons */\nbutton.primary {\n  @include button;\n  background-color: $button-colour-standard;\n  color: $button-text-colour-standard;\n  border: 2px solid $button-border-colour-standard;\n\n  &:hover {\n    background-color: $button-hover-colour-standard;\n    border: 2px solid $button-hover-colour-standard;\n    color: $button-hover-text-colour-standard;\n    border-color: $button-hover-border-colour-standard;\n    padding: 10px 16px;\n  }\n\n  &:hover:focus {\n    padding: 12px 18px 8px;\n  }\n\n  &:hover:focus:active {\n    padding: 10px 16px;\n  }\n\n  &:enabled:active {\n    background-color: $button-active-colour-standard;\n    border: 2px solid $button-active-border-colour-standard;\n    color: $button-active-text-colour-standard;\n\n    i {\n      color: $button-active-text-colour-standard;\n    }\n\n    p {\n      color: $button-active-text-colour-standard;\n    }\n  }\n\n  &:disabled {\n    background-color: $button-colour-deselected;\n    border: 2px solid $button-border-colour-deselected;\n  }\n}\n\n/* Secondary Buttons */\nbutton.secondary {\n  @include button;\n  background-color: $button-colour-secondary;\n  color: $button-text-colour-secondary;\n  border: 2px solid $button-border-colour-secondary;\n\n  &:hover {\n    background-color: $button-hover-colour-secondary;\n    color: $button-hover-text-colour-secondary;\n    border: 2px solid $button-hover-border-colour-secondary;\n    padding: 10px 16px;\n  }\n\n  &:enabled:active {\n    background-color: $button-active-colour-secondary;\n    border: 2px solid $button-active-border-colour-secondary;\n    color: $button-active-text-colour-secondary;\n\n    i {\n      color: $button-active-text-colour-secondary;\n    }\n\n    p {\n      color: $button-active-text-colour-secondary;\n    }\n  }\n\n  &:disabled {\n    background-color: $button-colour-deselected;\n    border: 2px solid $button-border-colour-deselected;\n  }\n\n  i {\n    color: $button-text-colour-secondary;\n  }\n}\n\n/* Warning Buttons */\nbutton.warning {\n  @include button;\n  background-color: $button-colour-warning;\n  color: $button-text-colour-warning;\n  border: 2px solid $button-border-colour-warning;\n\n  &:hover {\n    background-color: $button-hover-colour-warning;\n    color: $button-text-colour-warning;\n    border: 2px solid $button-hover-border-colour-warning;\n    padding: 10px 16px;\n  }\n\n  &:enabled:active {\n    background-color: $button-active-colour-warning;\n    border: 2px solid $button-active-border-colour-warning;\n    color: $button-active-text-colour-warning;\n\n    i {\n      color: $button-active-text-colour-warning;\n    }\n\n    p {\n      color: $button-active-text-colour-warning;\n    }\n  }\n\n  &:disabled {\n    background-color: $button-colour-deselected;\n    border: 2px solid $button-border-colour-deselected;\n    & > * {\n      opacity: 0.5;\n    }\n  }\n\n  i {\n    color: $button-text-colour-warning;\n  }\n}\n\n/* Text Buttons */\nbutton.text {\n  @include button-defaults;\n  color: $button-text-colour-secondary;\n\n  &:enabled:active {\n    color: $button-text-colour-secondary;\n\n    i {\n      color: $button-text-colour-secondary;\n    }\n\n    p {\n      color: $button-text-colour-secondary;\n    }\n  }\n\n  &:disabled {\n    color: $button-colour-deselected;\n    & > * {\n      opacity: 0.5;\n    }\n  }\n\n  &:focus {\n    border: none;\n    box-shadow:\n      0 -2px $button-focus-colour,\n      0 4px $button-focus-text-colour;\n    text-decoration: none;\n    padding: 0;\n    ::slotted(*) {\n      color: $button-focus-text-colour !important;\n    }\n  }\n\n  i {\n    color: $button-text-colour-secondary;\n  }\n}\n\n/* Icon Buttons */\nbutton.icon {\n  @include button-defaults;\n  min-height: 44px;\n  min-width: 50px;\n\n  background-color: $button-colour-icon;\n  color: $button-text-colour-icon;\n  border: 2px solid $button-border-colour-icon;\n  padding: 9px;\n\n  &:focus {\n    padding: 12px 16px 8px;\n  }\n\n  &:hover {\n    background-color: $button-hover-colour-icon;\n    border: 2px solid $button-hover-border-colour-icon;\n    padding: 9px;\n  }\n\n  &:enabled:active {\n    background-color: $button-active-colour-icon;\n    color: $button-active-text-colour-icon;\n    border: 2px solid $button-active-border-colour-icon;\n    border: 2px solid transparent;\n\n    admiralty-icon {\n      color: $button-active-text-colour-icon !important;\n    }\n  }\n\n  &:disabled {\n    background-color: $button-disabled-colour-icon;\n    border: 2px solid $button-active-border-colour-icon;\n    opacity: 0.3;\n  }\n\n  &:active:disabled {\n    background-color: $button-colour-deselected;\n    border: 2px solid $button-active-border-colour-icon;\n    opacity: 0.3;\n  }\n\n  i {\n    margin: auto;\n    font-size: unset;\n    color: unset;\n    padding-left: unset;\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { ButtonVariant } from './button.types';\nimport { IconName } from '@fortawesome/fontawesome-svg-core';\n\n@Component({\n  tag: 'admiralty-button',\n  styleUrl: 'button.scss',\n  scoped: true,\n})\nexport class ButtonComponent {\n  /**\n   * The type of button to render. Valid values are `primary`, `secondary`, `warning`, `text` and `icon`.\n   * Default value is `primary`.\n   */\n  @Prop() variant: ButtonVariant = 'primary';\n  /**\n   * When passed Font Awesome Icon name, then an icon will be rendered.\n   */\n  @Prop() icon: IconName;\n  /**\n   * Determines whether the button is disabled. A button in disabled state will not fire click output events.\n   */\n  @Prop({ reflect: true }) disabled = false;\n  /**\n   * The default behavior of the button. Valid values are `button`, `submit` and `reset`.\n   * Default value is `submit`.\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'submit';\n  /**\n   * The `<form>` element to associate the button with (its form owner).\n   */\n  @Prop() form: string;\n  /**\n   * The name of the button, submitted as a pair with the button's value as part of the form data,\n   * when that button is used to submit the form.\n   */\n  @Prop() name: string;\n  /**\n   * Defines the value associated with the button's name when it's submitted with the form data.\n   * This value is passed to the server in params when the form is submitted using this button.\n   */\n  @Prop() value: string;\n\n  render() {\n    const { form, name, value } = this;\n    const props = {\n      ...(form && { form }),\n      ...(name && { name }),\n      ...(value && { value }),\n    };\n    return (\n      <button type={this.type} disabled={this.disabled} class={this.variant} {...props}>\n        <slot></slot>\n        {this.icon ? <admiralty-icon icon-name={this.icon}></admiralty-icon> : undefined}\n      </button>\n    );\n  }\n}\n"],"version":3}
+{"file":"admiralty-button.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,kgZAAkgZ,CAAC;AACrhZ,8BAAe,SAAS;;MCQX,eAAe;;;uBAMO,SAAS;;wBAQN,KAAK;oBAKK,QAAQ;;;;;IAgBtD,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;QAE7D,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QACnC,MAAM,KAAK,kDACL,IAAI,IAAI,EAAE,IAAI,EAAE,KAChB,IAAI,IAAI,EAAE,IAAI,EAAE,KAChB,KAAK,IAAI,EAAE,KAAK,EAAE,EACvB,CAAC;QAEF,QACEA,mFAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,IAAM,KAAK,GAC9EA,oEAAa,EACZ,IAAI,CAAC,IAAI,GAAGA,yCAA2B,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,cAAc,GAAE,cAAc,GAAG,EAAE,EAAE,GAAmB,GAAG,SAAS,CAC1H,EACT;KACH;;;;;;;","names":["h"],"sources":["src/components/button/button.scss?tag=admiralty-button&encapsulation=scoped","src/components/button/button.tsx"],"sourcesContent":["@import 'button.vars';\n\n@mixin button-defaults {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  font-size: $button-font-size;\n  line-height: $button-line-height;\n  font-weight: $button-font-weight;\n  background-color: unset;\n  cursor: pointer;\n\n  &:focus {\n    outline: none;\n    color: $button-focus-text-colour;\n    background-color: $button-focus-colour;\n    border: none;\n    border-bottom: 4px solid $button-focus-text-colour;\n    padding: 12px 18px 8px;\n\n    ::slotted(*) {\n      color: $button-focus-text-colour !important;\n    }\n  }\n\n  &:disabled {\n    cursor: default;\n    * {\n      pointer-events: none;\n    }\n  }\n\n  i {\n    display: inline-block;\n    font-size: $button-font-size;\n    color: $button-icon-colour;\n    padding: 10px 16px;\n  }\n}\n\n@mixin button {\n  @include button-defaults;\n  height: 44px;\n  padding: 10px 16px;\n  white-space: nowrap;\n  min-width: 50px;\n\n  @include not-desktop {\n    min-width: unset;\n    max-width: 200px;\n    width: 100%;\n    height: 44px;\n    padding: 10px 16px;\n  }\n\n  i {\n    display: inline-block;\n    font-size: $button-idiomatic-font-size;\n    color: $button-icon-colour;\n    padding-left: 15px;\n  }\n}\n\n/* Primary Buttons */\nbutton.primary {\n  @include button;\n  background-color: $button-colour-standard;\n  color: $button-text-colour-standard;\n  border: 2px solid $button-border-colour-standard;\n\n  &:hover {\n    background-color: $button-hover-colour-standard;\n    border: 2px solid $button-hover-colour-standard;\n    color: $button-hover-text-colour-standard;\n    border-color: $button-hover-border-colour-standard;\n    padding: 10px 16px;\n  }\n\n  &:hover:focus {\n    padding: 12px 18px 8px;\n  }\n\n  &:hover:focus:active {\n    padding: 10px 16px;\n  }\n\n  &:enabled:active {\n    background-color: $button-active-colour-standard;\n    border: 2px solid $button-active-border-colour-standard;\n    color: $button-active-text-colour-standard;\n\n    i {\n      color: $button-active-text-colour-standard;\n    }\n\n    p {\n      color: $button-active-text-colour-standard;\n    }\n  }\n\n  &:disabled {\n    background-color: $button-colour-deselected;\n    border: 2px solid $button-border-colour-deselected;\n  }\n}\n\n/* Secondary Buttons */\nbutton.secondary {\n  @include button;\n  background-color: $button-colour-secondary;\n  color: $button-text-colour-secondary;\n  border: 2px solid $button-border-colour-secondary;\n\n  &:hover {\n    background-color: $button-hover-colour-secondary;\n    color: $button-hover-text-colour-secondary;\n    border: 2px solid $button-hover-border-colour-secondary;\n    padding: 10px 16px;\n  }\n\n  &:enabled:active {\n    background-color: $button-active-colour-secondary;\n    border: 2px solid $button-active-border-colour-secondary;\n    color: $button-active-text-colour-secondary;\n\n    i {\n      color: $button-active-text-colour-secondary;\n    }\n\n    p {\n      color: $button-active-text-colour-secondary;\n    }\n  }\n\n  &:disabled {\n    background-color: $button-colour-deselected;\n    border: 2px solid $button-border-colour-deselected;\n  }\n\n  i {\n    color: $button-text-colour-secondary;\n  }\n}\n\n/* Warning Buttons */\nbutton.warning {\n  @include button;\n  background-color: $button-colour-warning;\n  color: $button-text-colour-warning;\n  border: 2px solid $button-border-colour-warning;\n\n  &:hover {\n    background-color: $button-hover-colour-warning;\n    color: $button-text-colour-warning;\n    border: 2px solid $button-hover-border-colour-warning;\n    padding: 10px 16px;\n  }\n\n  &:enabled:active {\n    background-color: $button-active-colour-warning;\n    border: 2px solid $button-active-border-colour-warning;\n    color: $button-active-text-colour-warning;\n\n    i {\n      color: $button-active-text-colour-warning;\n    }\n\n    p {\n      color: $button-active-text-colour-warning;\n    }\n  }\n\n  &:disabled {\n    background-color: $button-colour-deselected;\n    border: 2px solid $button-border-colour-deselected;\n    & > * {\n      opacity: 0.5;\n    }\n  }\n\n  i {\n    color: $button-text-colour-warning;\n  }\n}\n\n/* Text Buttons */\nbutton.text {\n  @include button-defaults;\n  color: $button-text-colour-secondary;\n\n  &:enabled:active {\n    color: $button-text-colour-secondary;\n\n    i {\n      color: $button-text-colour-secondary;\n    }\n\n    p {\n      color: $button-text-colour-secondary;\n    }\n  }\n\n  &:disabled {\n    color: $button-colour-deselected;\n    & > * {\n      opacity: 0.5;\n    }\n  }\n\n  &:focus {\n    border: none;\n    box-shadow:\n      0 -2px $button-focus-colour,\n      0 4px $button-focus-text-colour;\n    text-decoration: none;\n    padding: 0;\n    ::slotted(*) {\n      color: $button-focus-text-colour !important;\n    }\n  }\n\n  i {\n    color: $button-text-colour-secondary;\n  }\n}\n\n/* Icon Buttons */\nbutton.icon {\n  @include button-defaults;\n  min-height: 44px;\n  min-width: 50px;\n\n  background-color: $button-colour-icon;\n  color: $button-text-colour-icon;\n  border: 2px solid $button-border-colour-icon;\n  padding: 9px;\n\n  &:focus {\n    padding: 11px 11px 8px;\n  }\n\n  &:hover {\n    background-color: $button-hover-colour-icon;\n    border: 2px solid $button-hover-border-colour-icon;\n    padding: 9px;\n  }\n\n  admiralty-icon {\n    &.icon-padding {\n      padding-left: 8px;\n    }\n  }\n\n\n  &:enabled:active {\n    background-color: $button-active-colour-icon;\n    color: $button-active-text-colour-icon;\n    border: 2px solid $button-active-border-colour-icon;\n    border: 2px solid transparent;\n\n    admiralty-icon {\n      color: $button-active-text-colour-icon !important;\n    }\n  }\n\n  &:disabled {\n    background-color: $button-disabled-colour-icon;\n    border: 2px solid $button-active-border-colour-icon;\n    opacity: 0.3;\n  }\n\n  &:active:disabled {\n    background-color: $button-colour-deselected;\n    border: 2px solid $button-active-border-colour-icon;\n    opacity: 0.3;\n  }\n\n  i {\n    margin: auto;\n    font-size: unset;\n    color: unset;\n    padding-left: unset;\n  }\n}\n","import { Component, Prop, h, Element} from '@stencil/core';\nimport { ButtonVariant } from './button.types';\nimport { IconName } from '@fortawesome/fontawesome-svg-core';\n\n@Component({\n  tag: 'admiralty-button',\n  styleUrl: 'button.scss',\n  scoped: true,\n})\nexport class ButtonComponent {\n  @Element() el: HTMLElement;\n  /**\n   * The type of button to render. Valid values are `primary`, `secondary`, `warning`, `text` and `icon`.\n   * Default value is `primary`.\n   */\n  @Prop() variant: ButtonVariant = 'primary';\n  /**\n   * When passed Font Awesome Icon name, then an icon will be rendered.\n   */\n  @Prop() icon: IconName;\n  /**\n   * Determines whether the button is disabled. A button in disabled state will not fire click output events.\n   */\n  @Prop({ reflect: true }) disabled = false;\n  /**\n   * The default behavior of the button. Valid values are `button`, `submit` and `reset`.\n   * Default value is `submit`.\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'submit';\n  /**\n   * The `<form>` element to associate the button with (its form owner).\n   */\n  @Prop() form: string;\n  /**\n   * The name of the button, submitted as a pair with the button's value as part of the form data,\n   * when that button is used to submit the form.\n   */\n  @Prop() name: string;\n  /**\n   * Defines the value associated with the button's name when it's submitted with the form data.\n   * This value is passed to the server in params when the form is submitted using this button.\n   */\n  @Prop() value: string;\n\n  render() {\n    const hasTextContent = this.el.textContent.trim().length > 0;\n\n    const { form, name, value } = this;\n    const props = {\n      ...(form && { form }),\n      ...(name && { name }),\n      ...(value && { value }),\n    };\n\n    return (\n      <button type={this.type} disabled={this.disabled} class={this.variant} {...props}>\n        <slot></slot>\n        {this.icon ? <admiralty-icon icon-name={this.icon} class={`${hasTextContent? \"icon-padding\" : \"\"}`}></admiralty-icon> : undefined}\n      </button>\n    );\n  }\n}\n"],"version":3}

package/dist/collection/components/button/button.css

@@ -417,13 +417,16 @@ button.icon i {
   padding: 10px 16px;
 }
 button.icon:focus {
-  padding: 12px 16px 8px;
+  padding: 11px 11px 8px;
 }
 button.icon:hover {
   background-color: var(--admiralty-colour-primary-contrast);
   border: 2px solid var(--admiralty-colour-primary);
   padding: 9px;
 }
+button.icon admiralty-icon.icon-padding {
+  padding-left: 8px;
+}
 button.icon:enabled:active {
   background-color: var(--admiralty-colour-primary);
   color: var(--admiralty-colour-primary-contrast);

package/dist/collection/components/button/button.js

@@ -10,9 +10,10 @@ export class ButtonComponent {
         this.value = undefined;
     }
     render() {
+        const hasTextContent = this.el.textContent.trim().length > 0;
         const { form, name, value } = this;
         const props = Object.assign(Object.assign(Object.assign({}, (form && { form })), (name && { name })), (value && { value }));
-        return (h("button", Object.assign({ key: 'c1f8179333c7e45f79b04504834a48ccb4c7cd43', type: this.type, disabled: this.disabled, class: this.variant }, props), h("slot", { key: '113862f33d21bbc41514110653ba432893786a40' }), this.icon ? h("admiralty-icon", { "icon-name": this.icon }) : undefined));
+        return (h("button", Object.assign({ key: 'a0f8dc60d81d091107a1aa7d3cb7fbeb66f10377', type: this.type, disabled: this.disabled, class: this.variant }, props), h("slot", { key: 'be4166fe61422f72ba76dd07c9f9e93bb6ab3c14' }), this.icon ? h("admiralty-icon", { "icon-name": this.icon, class: `${hasTextContent ? "icon-padding" : ""}` }) : undefined));
     }
     static get is() { return "admiralty-button"; }
     static get encapsulation() { return "scoped"; }
@@ -164,5 +165,6 @@ export class ButtonComponent {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }
 //# sourceMappingURL=button.js.map

package/dist/collection/components/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AASnD,MAAM,OAAO,eAAe;;uBAKO,SAAS;;wBAQN,KAAK;oBAKK,QAAQ;;;;;IAgBtD,MAAM;QACJ,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QACnC,MAAM,KAAK,iDACN,CAAC,IAAI,IAAI,EAAE,IAAI,EAAE,CAAC,GAClB,CAAC,IAAI,IAAI,EAAE,IAAI,EAAE,CAAC,GAClB,CAAC,KAAK,IAAI,EAAE,KAAK,EAAE,CAAC,CACxB,CAAC;QACF,OAAO,CACL,6EAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,IAAM,KAAK;YAC9E,8DAAa;YACZ,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,mCAA2B,IAAI,CAAC,IAAI,GAAmB,CAAC,CAAC,CAAC,SAAS,CACzE,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\nimport { ButtonVariant } from './button.types';\nimport { IconName } from '@fortawesome/fontawesome-svg-core';\n\n@Component({\n  tag: 'admiralty-button',\n  styleUrl: 'button.scss',\n  scoped: true,\n})\nexport class ButtonComponent {\n  /**\n   * The type of button to render. Valid values are `primary`, `secondary`, `warning`, `text` and `icon`.\n   * Default value is `primary`.\n   */\n  @Prop() variant: ButtonVariant = 'primary';\n  /**\n   * When passed Font Awesome Icon name, then an icon will be rendered.\n   */\n  @Prop() icon: IconName;\n  /**\n   * Determines whether the button is disabled. A button in disabled state will not fire click output events.\n   */\n  @Prop({ reflect: true }) disabled = false;\n  /**\n   * The default behavior of the button. Valid values are `button`, `submit` and `reset`.\n   * Default value is `submit`.\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'submit';\n  /**\n   * The `<form>` element to associate the button with (its form owner).\n   */\n  @Prop() form: string;\n  /**\n   * The name of the button, submitted as a pair with the button's value as part of the form data,\n   * when that button is used to submit the form.\n   */\n  @Prop() name: string;\n  /**\n   * Defines the value associated with the button's name when it's submitted with the form data.\n   * This value is passed to the server in params when the form is submitted using this button.\n   */\n  @Prop() value: string;\n\n  render() {\n    const { form, name, value } = this;\n    const props = {\n      ...(form && { form }),\n      ...(name && { name }),\n      ...(value && { value }),\n    };\n    return (\n      <button type={this.type} disabled={this.disabled} class={this.variant} {...props}>\n        <slot></slot>\n        {this.icon ? <admiralty-icon icon-name={this.icon}></admiralty-icon> : undefined}\n      </button>\n    );\n  }\n}\n"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAC,MAAM,eAAe,CAAC;AAS3D,MAAM,OAAO,eAAe;;uBAMO,SAAS;;wBAQN,KAAK;oBAKK,QAAQ;;;;;IAgBtD,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;QAE7D,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QACnC,MAAM,KAAK,iDACN,CAAC,IAAI,IAAI,EAAE,IAAI,EAAE,CAAC,GAClB,CAAC,IAAI,IAAI,EAAE,IAAI,EAAE,CAAC,GAClB,CAAC,KAAK,IAAI,EAAE,KAAK,EAAE,CAAC,CACxB,CAAC;QAEF,OAAO,CACL,6EAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,IAAM,KAAK;YAC9E,8DAAa;YACZ,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,mCAA2B,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,cAAc,CAAA,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,EAAE,GAAmB,CAAC,CAAC,CAAC,SAAS,CAC1H,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Element} from '@stencil/core';\nimport { ButtonVariant } from './button.types';\nimport { IconName } from '@fortawesome/fontawesome-svg-core';\n\n@Component({\n  tag: 'admiralty-button',\n  styleUrl: 'button.scss',\n  scoped: true,\n})\nexport class ButtonComponent {\n  @Element() el: HTMLElement;\n  /**\n   * The type of button to render. Valid values are `primary`, `secondary`, `warning`, `text` and `icon`.\n   * Default value is `primary`.\n   */\n  @Prop() variant: ButtonVariant = 'primary';\n  /**\n   * When passed Font Awesome Icon name, then an icon will be rendered.\n   */\n  @Prop() icon: IconName;\n  /**\n   * Determines whether the button is disabled. A button in disabled state will not fire click output events.\n   */\n  @Prop({ reflect: true }) disabled = false;\n  /**\n   * The default behavior of the button. Valid values are `button`, `submit` and `reset`.\n   * Default value is `submit`.\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'submit';\n  /**\n   * The `<form>` element to associate the button with (its form owner).\n   */\n  @Prop() form: string;\n  /**\n   * The name of the button, submitted as a pair with the button's value as part of the form data,\n   * when that button is used to submit the form.\n   */\n  @Prop() name: string;\n  /**\n   * Defines the value associated with the button's name when it's submitted with the form data.\n   * This value is passed to the server in params when the form is submitted using this button.\n   */\n  @Prop() value: string;\n\n  render() {\n    const hasTextContent = this.el.textContent.trim().length > 0;\n\n    const { form, name, value } = this;\n    const props = {\n      ...(form && { form }),\n      ...(name && { name }),\n      ...(value && { value }),\n    };\n\n    return (\n      <button type={this.type} disabled={this.disabled} class={this.variant} {...props}>\n        <slot></slot>\n        {this.icon ? <admiralty-icon icon-name={this.icon} class={`${hasTextContent? \"icon-padding\" : \"\"}`}></admiralty-icon> : undefined}\n      </button>\n    );\n  }\n}\n"]}

package/dist/components/admiralty-button.js

@@ -1,4 +1,4 @@
-import { B as ButtonComponent, d as defineCustomElement$1 } from './p-9e69d221.js';
+import { B as ButtonComponent, d as defineCustomElement$1 } from './p-41685c4a.js';
 
 const AdmiraltyButton = ButtonComponent;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/admiralty-colour-block.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-7dd465c9.js';
-import { d as defineCustomElement$3 } from './p-9e69d221.js';
+import { d as defineCustomElement$3 } from './p-41685c4a.js';
 import { d as defineCustomElement$2 } from './p-91d406aa.js';
 
 const colourBlockCss = ".visually-hidden.sc-admiralty-colour-block:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}@media (max-width: 1023px){.desktop-only.sc-admiralty-colour-block{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-colour-block{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-colour-block{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-colour-block{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-colour-block{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-colour-block{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-colour-block{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-colour-block{display:none}}.colourBlock.sc-admiralty-colour-block{height:100%;width:100%;max-width:100%;padding:30px 18px;display:flex;flex-direction:column;box-sizing:border-box}.colourBlock.sc-admiralty-colour-block .content.sc-admiralty-colour-block{flex-grow:1}.colourBlock.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block{align-self:flex-end;cursor:pointer}.colourBlock.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block:focus *.sc-admiralty-colour-block{color:var(--admiralty-text-colour) !important}.colourBlock.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block span.sc-admiralty-colour-block{font-weight:var(--admiralty-colour-block-action-font-weight, var(--admiralty-font-weight-medium));font-size:var(--admiralty-colour-block-action-font-size, var(--admiralty-font-size-1));line-height:30px}@media (max-width: 1023px){.colourBlock.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block span.sc-admiralty-colour-block{font-size:var(--admiralty-colour-block-action-not-desktop-font-size, var(--admiralty-font-size-0));line-height:30px}}.colourBlock.admiralty-blue.sc-admiralty-colour-block{background-color:var(--admiralty-colour-primary)}.colourBlock.admiralty-blue.sc-admiralty-colour-block *.sc-admiralty-colour-block{color:var(--admiralty-colour-primary-contrast)}.colourBlock.teal.sc-admiralty-colour-block{background-color:var(--admiralty-colour-secondary)}.colourBlock.teal.sc-admiralty-colour-block *.sc-admiralty-colour-block{color:var(--admiralty-colour-secondary-contrast)}.colourBlock.bright-blue.sc-admiralty-colour-block{background-color:var(--admiralty-colour-tertiary);color:var(--admiralty-colour-primary)}.colourBlock.bright-blue.sc-admiralty-colour-block .clickAction.sc-admiralty-colour-block *.sc-admiralty-colour-block{color:var(--admiralty-colour-primary)}";

package/dist/components/admiralty-filter.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-7dd465c9.js';
-import { d as defineCustomElement$3 } from './p-9e69d221.js';
+import { d as defineCustomElement$3 } from './p-41685c4a.js';
 import { d as defineCustomElement$2 } from './p-91d406aa.js';
 
 const filterCss = ".visually-hidden.sc-admiralty-filter:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}@media (max-width: 1023px){.desktop-only.sc-admiralty-filter{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-filter{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-filter{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-filter{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-filter{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-filter{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-filter{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-filter{display:none}}.filter-heading.sc-admiralty-filter{display:flex;justify-content:space-between;align-items:baseline}.filter-heading.sc-admiralty-filter .filter-title.sc-admiralty-filter{color:var(--admiralty-colour-primary);font-weight:var(--admiralty-filter-title-font-weight, var(--admiralty-font-weight-medium));font-size:var(--admiralty-filter-title-font-size, var(--admiralty-font-size-5));line-height:48px;margin-bottom:18px}.filter-heading.sc-admiralty-filter .button-wrapper.sc-admiralty-filter{position:relative;margin-left:28px}.filter-heading.sc-admiralty-filter .button-wrapper.sc-admiralty-filter button.text-link.sc-admiralty-filter{background-color:unset;border:none;color:var(--admiralty-colour-primary);padding:0;min-width:unset;width:unset;height:unset;font-size:var(--admiralty-filter-reset-font-size, var(--admiralty-font-size-0));text-decoration:underline;font-weight:unset;cursor:pointer}.filter-heading.sc-admiralty-filter .button-wrapper.sc-admiralty-filter button.text-link.sc-admiralty-filter:hover{background-color:unset;border:unset}.filter-heading.sc-admiralty-filter .button-wrapper.sc-admiralty-filter button.text-link.sc-admiralty-filter:focus{outline:none}.filter-heading.sc-admiralty-filter .button-wrapper.sc-admiralty-filter button.text-link.sc-admiralty-filter:focus::after{content:\"\";position:absolute;top:-3px;bottom:0;right:-3px;left:-3px;box-shadow:0 0 0 3px var(--admiralty-focus-colour)}";

package/dist/components/admiralty-paginator.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-7dd465c9.js';
 import { a as faChevronRight, k as faChevronLeft, d as defineCustomElement$2 } from './p-91d406aa.js';
-import { d as defineCustomElement$3 } from './p-9e69d221.js';
+import { d as defineCustomElement$3 } from './p-41685c4a.js';
 
 const paginatorCss = "nav.standard.sc-admiralty-paginator{display:flex;flex-direction:row;align-items:center}nav.standard.sc-admiralty-paginator admiralty-button.sc-admiralty-paginator{margin:6px}nav.standard.sc-admiralty-paginator p.sc-admiralty-paginator{padding:0px 18px 0px 0px;margin-bottom:0px}";
 const AdmiraltyPaginatorStyle0 = paginatorCss;

package/dist/components/{p-9e69d221.js → p-41685c4a.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h } from './p-7dd465c9.js';
 import { d as defineCustomElement$1 } from './p-91d406aa.js';
 
-const buttonCss = ".visually-hidden.sc-admiralty-button:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}@media (max-width: 1023px){.desktop-only.sc-admiralty-button{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-button{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-button{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-button{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-button{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-button{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-button{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-button{display:none}}button.primary.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;height:44px;padding:10px 16px;white-space:nowrap;min-width:50px;background-color:var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast);border:2px solid var(--admiralty-colour-primary)}button.primary.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:12px 18px 8px}button.primary:focus.sc-admiralty-button-s>*,button.primary:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.primary.sc-admiralty-button:disabled{cursor:default}button.primary.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.primary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:10px 16px}@media (max-width: 1023px){button.primary.sc-admiralty-button{min-width:unset;max-width:200px;width:100%;height:44px;padding:10px 16px}}button.primary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-idiomatic-font-size, var(--admiralty-font-size-2));color:var(--admiralty-colour-primary);padding-left:15px}button.primary.sc-admiralty-button:hover{background-color:var(--admiralty-colour-primary-shade);border:2px solid var(--admiralty-colour-primary-shade);color:var(--admiralty-colour-primary-contrast);border-color:var(--admiralty-colour-primary-shade);padding:10px 16px}button.primary.sc-admiralty-button:hover:focus{padding:12px 18px 8px}button.primary.sc-admiralty-button:hover:focus:active{padding:10px 16px}button.primary.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-primary-contrast);border:2px solid var(--admiralty-colour-primary-contrast);color:var(--admiralty-colour-primary)}button.primary.sc-admiralty-button:enabled:active i.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.primary.sc-admiralty-button:enabled:active p.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.primary.sc-admiralty-button:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-disabled-colour)}button.secondary.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;height:44px;padding:10px 16px;white-space:nowrap;min-width:50px;background-color:var(--admiralty-colour-primary-contrast);color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary)}button.secondary.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:12px 18px 8px}button.secondary:focus.sc-admiralty-button-s>*,button.secondary:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.secondary.sc-admiralty-button:disabled{cursor:default}button.secondary.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.secondary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:10px 16px}@media (max-width: 1023px){button.secondary.sc-admiralty-button{min-width:unset;max-width:200px;width:100%;height:44px;padding:10px 16px}}button.secondary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-idiomatic-font-size, var(--admiralty-font-size-2));color:var(--admiralty-colour-primary);padding-left:15px}button.secondary.sc-admiralty-button:hover{background-color:var(--admiralty-hover-background-colour);color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary-shade);padding:10px 16px}button.secondary.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast)}button.secondary.sc-admiralty-button:enabled:active i.sc-admiralty-button{color:var(--admiralty-colour-primary-contrast)}button.secondary.sc-admiralty-button:enabled:active p.sc-admiralty-button{color:var(--admiralty-colour-primary-contrast)}button.secondary.sc-admiralty-button:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-disabled-colour)}button.secondary.sc-admiralty-button i.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.warning.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;height:44px;padding:10px 16px;white-space:nowrap;min-width:50px;background-color:var(--admiralty-colour-danger);color:var(--admiralty-colour-danger-contrast);border:2px solid var(--admiralty-colour-danger)}button.warning.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:12px 18px 8px}button.warning:focus.sc-admiralty-button-s>*,button.warning:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.warning.sc-admiralty-button:disabled{cursor:default}button.warning.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.warning.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:10px 16px}@media (max-width: 1023px){button.warning.sc-admiralty-button{min-width:unset;max-width:200px;width:100%;height:44px;padding:10px 16px}}button.warning.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-idiomatic-font-size, var(--admiralty-font-size-2));color:var(--admiralty-colour-primary);padding-left:15px}button.warning.sc-admiralty-button:hover{background-color:var(--admiralty-colour-danger-shade);color:var(--admiralty-colour-danger-contrast);border:2px solid var(--admiralty-colour-danger-shade);padding:10px 16px}button.warning.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-danger-contrast);border:2px solid var(--admiralty-colour-danger-contrast);color:var(--admiralty-colour-danger)}button.warning.sc-admiralty-button:enabled:active i.sc-admiralty-button{color:var(--admiralty-colour-danger)}button.warning.sc-admiralty-button:enabled:active p.sc-admiralty-button{color:var(--admiralty-colour-danger)}button.warning.sc-admiralty-button:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-disabled-colour)}button.warning.sc-admiralty-button:disabled>*.sc-admiralty-button{opacity:0.5}button.warning.sc-admiralty-button i.sc-admiralty-button{color:var(--admiralty-colour-danger-contrast)}button.text.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;color:var(--admiralty-colour-primary)}button.text.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:12px 18px 8px}button.text:focus.sc-admiralty-button-s>*,button.text:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.text.sc-admiralty-button:disabled{cursor:default}button.text.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.text.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:10px 16px}button.text.sc-admiralty-button:enabled:active{color:var(--admiralty-colour-primary)}button.text.sc-admiralty-button:enabled:active i.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.text.sc-admiralty-button:enabled:active p.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.text.sc-admiralty-button:disabled{color:var(--admiralty-disabled-colour)}button.text.sc-admiralty-button:disabled>*.sc-admiralty-button{opacity:0.5}button.text.sc-admiralty-button:focus{border:none;box-shadow:0 -2px var(--admiralty-focus-colour), 0 4px var(--admiralty-text-colour);text-decoration:none;padding:0}button.text:focus.sc-admiralty-button-s>*,button.text:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.text.sc-admiralty-button i.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.icon.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;min-height:44px;min-width:50px;background-color:var(--admiralty-background-colour-tint);color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary);padding:9px}button.icon.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:12px 18px 8px}button.icon:focus.sc-admiralty-button-s>*,button.icon:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.icon.sc-admiralty-button:disabled{cursor:default}button.icon.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.icon.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:10px 16px}button.icon.sc-admiralty-button:focus{padding:12px 16px 8px}button.icon.sc-admiralty-button:hover{background-color:var(--admiralty-colour-primary-contrast);border:2px solid var(--admiralty-colour-primary);padding:9px}button.icon.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast);border:2px solid var(--admiralty-colour-primary);border:2px solid transparent}button.icon.sc-admiralty-button:enabled:active admiralty-icon.sc-admiralty-button{color:var(--admiralty-colour-primary-contrast) !important}button.icon.sc-admiralty-button:disabled{background-color:var(--admiralty-background-colour-tint);border:2px solid var(--admiralty-colour-primary);opacity:0.3}button.icon.sc-admiralty-button:active:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-colour-primary);opacity:0.3}button.icon.sc-admiralty-button i.sc-admiralty-button{margin:auto;font-size:unset;color:unset;padding-left:unset}";
+const buttonCss = ".visually-hidden.sc-admiralty-button:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}@media (max-width: 1023px){.desktop-only.sc-admiralty-button{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-button{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-button{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-button{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-button{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-button{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-button{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-button{display:none}}button.primary.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;height:44px;padding:10px 16px;white-space:nowrap;min-width:50px;background-color:var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast);border:2px solid var(--admiralty-colour-primary)}button.primary.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:12px 18px 8px}button.primary:focus.sc-admiralty-button-s>*,button.primary:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.primary.sc-admiralty-button:disabled{cursor:default}button.primary.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.primary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:10px 16px}@media (max-width: 1023px){button.primary.sc-admiralty-button{min-width:unset;max-width:200px;width:100%;height:44px;padding:10px 16px}}button.primary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-idiomatic-font-size, var(--admiralty-font-size-2));color:var(--admiralty-colour-primary);padding-left:15px}button.primary.sc-admiralty-button:hover{background-color:var(--admiralty-colour-primary-shade);border:2px solid var(--admiralty-colour-primary-shade);color:var(--admiralty-colour-primary-contrast);border-color:var(--admiralty-colour-primary-shade);padding:10px 16px}button.primary.sc-admiralty-button:hover:focus{padding:12px 18px 8px}button.primary.sc-admiralty-button:hover:focus:active{padding:10px 16px}button.primary.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-primary-contrast);border:2px solid var(--admiralty-colour-primary-contrast);color:var(--admiralty-colour-primary)}button.primary.sc-admiralty-button:enabled:active i.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.primary.sc-admiralty-button:enabled:active p.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.primary.sc-admiralty-button:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-disabled-colour)}button.secondary.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;height:44px;padding:10px 16px;white-space:nowrap;min-width:50px;background-color:var(--admiralty-colour-primary-contrast);color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary)}button.secondary.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:12px 18px 8px}button.secondary:focus.sc-admiralty-button-s>*,button.secondary:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.secondary.sc-admiralty-button:disabled{cursor:default}button.secondary.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.secondary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:10px 16px}@media (max-width: 1023px){button.secondary.sc-admiralty-button{min-width:unset;max-width:200px;width:100%;height:44px;padding:10px 16px}}button.secondary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-idiomatic-font-size, var(--admiralty-font-size-2));color:var(--admiralty-colour-primary);padding-left:15px}button.secondary.sc-admiralty-button:hover{background-color:var(--admiralty-hover-background-colour);color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary-shade);padding:10px 16px}button.secondary.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast)}button.secondary.sc-admiralty-button:enabled:active i.sc-admiralty-button{color:var(--admiralty-colour-primary-contrast)}button.secondary.sc-admiralty-button:enabled:active p.sc-admiralty-button{color:var(--admiralty-colour-primary-contrast)}button.secondary.sc-admiralty-button:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-disabled-colour)}button.secondary.sc-admiralty-button i.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.warning.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;height:44px;padding:10px 16px;white-space:nowrap;min-width:50px;background-color:var(--admiralty-colour-danger);color:var(--admiralty-colour-danger-contrast);border:2px solid var(--admiralty-colour-danger)}button.warning.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:12px 18px 8px}button.warning:focus.sc-admiralty-button-s>*,button.warning:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.warning.sc-admiralty-button:disabled{cursor:default}button.warning.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.warning.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:10px 16px}@media (max-width: 1023px){button.warning.sc-admiralty-button{min-width:unset;max-width:200px;width:100%;height:44px;padding:10px 16px}}button.warning.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-idiomatic-font-size, var(--admiralty-font-size-2));color:var(--admiralty-colour-primary);padding-left:15px}button.warning.sc-admiralty-button:hover{background-color:var(--admiralty-colour-danger-shade);color:var(--admiralty-colour-danger-contrast);border:2px solid var(--admiralty-colour-danger-shade);padding:10px 16px}button.warning.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-danger-contrast);border:2px solid var(--admiralty-colour-danger-contrast);color:var(--admiralty-colour-danger)}button.warning.sc-admiralty-button:enabled:active i.sc-admiralty-button{color:var(--admiralty-colour-danger)}button.warning.sc-admiralty-button:enabled:active p.sc-admiralty-button{color:var(--admiralty-colour-danger)}button.warning.sc-admiralty-button:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-disabled-colour)}button.warning.sc-admiralty-button:disabled>*.sc-admiralty-button{opacity:0.5}button.warning.sc-admiralty-button i.sc-admiralty-button{color:var(--admiralty-colour-danger-contrast)}button.text.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;color:var(--admiralty-colour-primary)}button.text.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:12px 18px 8px}button.text:focus.sc-admiralty-button-s>*,button.text:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.text.sc-admiralty-button:disabled{cursor:default}button.text.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.text.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:10px 16px}button.text.sc-admiralty-button:enabled:active{color:var(--admiralty-colour-primary)}button.text.sc-admiralty-button:enabled:active i.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.text.sc-admiralty-button:enabled:active p.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.text.sc-admiralty-button:disabled{color:var(--admiralty-disabled-colour)}button.text.sc-admiralty-button:disabled>*.sc-admiralty-button{opacity:0.5}button.text.sc-admiralty-button:focus{border:none;box-shadow:0 -2px var(--admiralty-focus-colour), 0 4px var(--admiralty-text-colour);text-decoration:none;padding:0}button.text:focus.sc-admiralty-button-s>*,button.text:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.text.sc-admiralty-button i.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.icon.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;min-height:44px;min-width:50px;background-color:var(--admiralty-background-colour-tint);color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary);padding:9px}button.icon.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:12px 18px 8px}button.icon:focus.sc-admiralty-button-s>*,button.icon:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.icon.sc-admiralty-button:disabled{cursor:default}button.icon.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.icon.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:10px 16px}button.icon.sc-admiralty-button:focus{padding:11px 11px 8px}button.icon.sc-admiralty-button:hover{background-color:var(--admiralty-colour-primary-contrast);border:2px solid var(--admiralty-colour-primary);padding:9px}button.icon.sc-admiralty-button admiralty-icon.icon-padding.sc-admiralty-button{padding-left:8px}button.icon.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast);border:2px solid var(--admiralty-colour-primary);border:2px solid transparent}button.icon.sc-admiralty-button:enabled:active admiralty-icon.sc-admiralty-button{color:var(--admiralty-colour-primary-contrast) !important}button.icon.sc-admiralty-button:disabled{background-color:var(--admiralty-background-colour-tint);border:2px solid var(--admiralty-colour-primary);opacity:0.3}button.icon.sc-admiralty-button:active:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-colour-primary);opacity:0.3}button.icon.sc-admiralty-button i.sc-admiralty-button{margin:auto;font-size:unset;color:unset;padding-left:unset}";
 const AdmiraltyButtonStyle0 = buttonCss;
 
 const ButtonComponent = /*@__PURE__*/ proxyCustomElement(class ButtonComponent extends H {
@@ -17,10 +17,12 @@ const ButtonComponent = /*@__PURE__*/ proxyCustomElement(class ButtonComponent e
         this.value = undefined;
     }
     render() {
+        const hasTextContent = this.el.textContent.trim().length > 0;
         const { form, name, value } = this;
         const props = Object.assign(Object.assign(Object.assign({}, (form && { form })), (name && { name })), (value && { value }));
-        return (h("button", Object.assign({ key: 'c1f8179333c7e45f79b04504834a48ccb4c7cd43', type: this.type, disabled: this.disabled, class: this.variant }, props), h("slot", { key: '113862f33d21bbc41514110653ba432893786a40' }), this.icon ? h("admiralty-icon", { "icon-name": this.icon }) : undefined));
+        return (h("button", Object.assign({ key: 'a0f8dc60d81d091107a1aa7d3cb7fbeb66f10377', type: this.type, disabled: this.disabled, class: this.variant }, props), h("slot", { key: 'be4166fe61422f72ba76dd07c9f9e93bb6ab3c14' }), this.icon ? h("admiralty-icon", { "icon-name": this.icon, class: `${hasTextContent ? "icon-padding" : ""}` }) : undefined));
     }
+    get el() { return this; }
     static get style() { return AdmiraltyButtonStyle0; }
 }, [6, "admiralty-button", {
         "variant": [1],
@@ -52,4 +54,4 @@ function defineCustomElement() {
 
 export { ButtonComponent as B, defineCustomElement as d };
 
-//# sourceMappingURL=p-9e69d221.js.map
+//# sourceMappingURL=p-41685c4a.js.map

package/dist/{admiralty/p-a228de74.entry.js.map → components/p-41685c4a.js.map}

@@ -1 +1 @@
-{"version":3,"names":["buttonCss","AdmiraltyButtonStyle0","ButtonComponent","render","form","name","value","this","props","Object","assign","h","key","type","disabled","class","variant","icon","undefined"],"sources":["src/components/button/button.scss?tag=admiralty-button&encapsulation=scoped","src/components/button/button.tsx"],"sourcesContent":["@import 'button.vars';\n\n@mixin button-defaults {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  font-size: $button-font-size;\n  line-height: $button-line-height;\n  font-weight: $button-font-weight;\n  background-color: unset;\n  cursor: pointer;\n\n  &:focus {\n    outline: none;\n    color: $button-focus-text-colour;\n    background-color: $button-focus-colour;\n    border: none;\n    border-bottom: 4px solid $button-focus-text-colour;\n    padding: 12px 18px 8px;\n\n    ::slotted(*) {\n      color: $button-focus-text-colour !important;\n    }\n  }\n\n  &:disabled {\n    cursor: default;\n    * {\n      pointer-events: none;\n    }\n  }\n\n  i {\n    display: inline-block;\n    font-size: $button-font-size;\n    color: $button-icon-colour;\n    padding: 10px 16px;\n  }\n}\n\n@mixin button {\n  @include button-defaults;\n  height: 44px;\n  padding: 10px 16px;\n  white-space: nowrap;\n  min-width: 50px;\n\n  @include not-desktop {\n    min-width: unset;\n    max-width: 200px;\n    width: 100%;\n    height: 44px;\n    padding: 10px 16px;\n  }\n\n  i {\n    display: inline-block;\n    font-size: $button-idiomatic-font-size;\n    color: $button-icon-colour;\n    padding-left: 15px;\n  }\n}\n\n/* Primary Buttons */\nbutton.primary {\n  @include button;\n  background-color: $button-colour-standard;\n  color: $button-text-colour-standard;\n  border: 2px solid $button-border-colour-standard;\n\n  &:hover {\n    background-color: $button-hover-colour-standard;\n    border: 2px solid $button-hover-colour-standard;\n    color: $button-hover-text-colour-standard;\n    border-color: $button-hover-border-colour-standard;\n    padding: 10px 16px;\n  }\n\n  &:hover:focus {\n    padding: 12px 18px 8px;\n  }\n\n  &:hover:focus:active {\n    padding: 10px 16px;\n  }\n\n  &:enabled:active {\n    background-color: $button-active-colour-standard;\n    border: 2px solid $button-active-border-colour-standard;\n    color: $button-active-text-colour-standard;\n\n    i {\n      color: $button-active-text-colour-standard;\n    }\n\n    p {\n      color: $button-active-text-colour-standard;\n    }\n  }\n\n  &:disabled {\n    background-color: $button-colour-deselected;\n    border: 2px solid $button-border-colour-deselected;\n  }\n}\n\n/* Secondary Buttons */\nbutton.secondary {\n  @include button;\n  background-color: $button-colour-secondary;\n  color: $button-text-colour-secondary;\n  border: 2px solid $button-border-colour-secondary;\n\n  &:hover {\n    background-color: $button-hover-colour-secondary;\n    color: $button-hover-text-colour-secondary;\n    border: 2px solid $button-hover-border-colour-secondary;\n    padding: 10px 16px;\n  }\n\n  &:enabled:active {\n    background-color: $button-active-colour-secondary;\n    border: 2px solid $button-active-border-colour-secondary;\n    color: $button-active-text-colour-secondary;\n\n    i {\n      color: $button-active-text-colour-secondary;\n    }\n\n    p {\n      color: $button-active-text-colour-secondary;\n    }\n  }\n\n  &:disabled {\n    background-color: $button-colour-deselected;\n    border: 2px solid $button-border-colour-deselected;\n  }\n\n  i {\n    color: $button-text-colour-secondary;\n  }\n}\n\n/* Warning Buttons */\nbutton.warning {\n  @include button;\n  background-color: $button-colour-warning;\n  color: $button-text-colour-warning;\n  border: 2px solid $button-border-colour-warning;\n\n  &:hover {\n    background-color: $button-hover-colour-warning;\n    color: $button-text-colour-warning;\n    border: 2px solid $button-hover-border-colour-warning;\n    padding: 10px 16px;\n  }\n\n  &:enabled:active {\n    background-color: $button-active-colour-warning;\n    border: 2px solid $button-active-border-colour-warning;\n    color: $button-active-text-colour-warning;\n\n    i {\n      color: $button-active-text-colour-warning;\n    }\n\n    p {\n      color: $button-active-text-colour-warning;\n    }\n  }\n\n  &:disabled {\n    background-color: $button-colour-deselected;\n    border: 2px solid $button-border-colour-deselected;\n    & > * {\n      opacity: 0.5;\n    }\n  }\n\n  i {\n    color: $button-text-colour-warning;\n  }\n}\n\n/* Text Buttons */\nbutton.text {\n  @include button-defaults;\n  color: $button-text-colour-secondary;\n\n  &:enabled:active {\n    color: $button-text-colour-secondary;\n\n    i {\n      color: $button-text-colour-secondary;\n    }\n\n    p {\n      color: $button-text-colour-secondary;\n    }\n  }\n\n  &:disabled {\n    color: $button-colour-deselected;\n    & > * {\n      opacity: 0.5;\n    }\n  }\n\n  &:focus {\n    border: none;\n    box-shadow:\n      0 -2px $button-focus-colour,\n      0 4px $button-focus-text-colour;\n    text-decoration: none;\n    padding: 0;\n    ::slotted(*) {\n      color: $button-focus-text-colour !important;\n    }\n  }\n\n  i {\n    color: $button-text-colour-secondary;\n  }\n}\n\n/* Icon Buttons */\nbutton.icon {\n  @include button-defaults;\n  min-height: 44px;\n  min-width: 50px;\n\n  background-color: $button-colour-icon;\n  color: $button-text-colour-icon;\n  border: 2px solid $button-border-colour-icon;\n  padding: 9px;\n\n  &:focus {\n    padding: 12px 16px 8px;\n  }\n\n  &:hover {\n    background-color: $button-hover-colour-icon;\n    border: 2px solid $button-hover-border-colour-icon;\n    padding: 9px;\n  }\n\n  &:enabled:active {\n    background-color: $button-active-colour-icon;\n    color: $button-active-text-colour-icon;\n    border: 2px solid $button-active-border-colour-icon;\n    border: 2px solid transparent;\n\n    admiralty-icon {\n      color: $button-active-text-colour-icon !important;\n    }\n  }\n\n  &:disabled {\n    background-color: $button-disabled-colour-icon;\n    border: 2px solid $button-active-border-colour-icon;\n    opacity: 0.3;\n  }\n\n  &:active:disabled {\n    background-color: $button-colour-deselected;\n    border: 2px solid $button-active-border-colour-icon;\n    opacity: 0.3;\n  }\n\n  i {\n    margin: auto;\n    font-size: unset;\n    color: unset;\n    padding-left: unset;\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { ButtonVariant } from './button.types';\nimport { IconName } from '@fortawesome/fontawesome-svg-core';\n\n@Component({\n  tag: 'admiralty-button',\n  styleUrl: 'button.scss',\n  scoped: true,\n})\nexport class ButtonComponent {\n  /**\n   * The type of button to render. Valid values are `primary`, `secondary`, `warning`, `text` and `icon`.\n   * Default value is `primary`.\n   */\n  @Prop() variant: ButtonVariant = 'primary';\n  /**\n   * When passed Font Awesome Icon name, then an icon will be rendered.\n   */\n  @Prop() icon: IconName;\n  /**\n   * Determines whether the button is disabled. A button in disabled state will not fire click output events.\n   */\n  @Prop({ reflect: true }) disabled = false;\n  /**\n   * The default behavior of the button. Valid values are `button`, `submit` and `reset`.\n   * Default value is `submit`.\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'submit';\n  /**\n   * The `<form>` element to associate the button with (its form owner).\n   */\n  @Prop() form: string;\n  /**\n   * The name of the button, submitted as a pair with the button's value as part of the form data,\n   * when that button is used to submit the form.\n   */\n  @Prop() name: string;\n  /**\n   * Defines the value associated with the button's name when it's submitted with the form data.\n   * This value is passed to the server in params when the form is submitted using this button.\n   */\n  @Prop() value: string;\n\n  render() {\n    const { form, name, value } = this;\n    const props = {\n      ...(form && { form }),\n      ...(name && { name }),\n      ...(value && { value }),\n    };\n    return (\n      <button type={this.type} disabled={this.disabled} class={this.variant} {...props}>\n        <slot></slot>\n        {this.icon ? <admiralty-icon icon-name={this.icon}></admiralty-icon> : undefined}\n      </button>\n    );\n  }\n}\n"],"mappings":"2CAAA,MAAMA,EAAY,k6YAClB,MAAAC,EAAeD,E,MCQFE,EAAe,M,sCAKO,U,kCAQG,M,UAKU,S,6DAgB9C,MAAAC,GACE,MAAMC,KAAEA,EAAIC,KAAEA,EAAIC,MAAEA,GAAUC,KAC9B,MAAMC,EAAKC,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,GACLN,GAAQ,CAAEA,SACVC,GAAQ,CAAEA,SACVC,GAAS,CAAEA,UAEjB,OACEK,EAAA,SAAAF,OAAAC,OAAA,CAAAE,IAAA,2CAAQC,KAAMN,KAAKM,KAAMC,SAAUP,KAAKO,SAAUC,MAAOR,KAAKS,SAAaR,GACzEG,EAAA,QAAAC,IAAA,6CACCL,KAAKU,KAAON,EAAA,8BAA2BJ,KAAKU,OAA0BC,U","ignoreList":[]}
+{"file":"p-41685c4a.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,kgZAAkgZ,CAAC;AACrhZ,8BAAe,SAAS;;MCQX,eAAe;;;;uBAMO,SAAS;;wBAQN,KAAK;oBAKK,QAAQ;;;;;IAgBtD,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;QAE7D,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QACnC,MAAM,KAAK,kDACL,IAAI,IAAI,EAAE,IAAI,EAAE,KAChB,IAAI,IAAI,EAAE,IAAI,EAAE,KAChB,KAAK,IAAI,EAAE,KAAK,EAAE,EACvB,CAAC;QAEF,QACE,6EAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,IAAM,KAAK,GAC9E,8DAAa,EACZ,IAAI,CAAC,IAAI,GAAG,mCAA2B,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,cAAc,GAAE,cAAc,GAAG,EAAE,EAAE,GAAmB,GAAG,SAAS,CAC1H,EACT;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/button/button.scss?tag=admiralty-button&encapsulation=scoped","src/components/button/button.tsx"],"sourcesContent":["@import 'button.vars';\n\n@mixin button-defaults {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  font-size: $button-font-size;\n  line-height: $button-line-height;\n  font-weight: $button-font-weight;\n  background-color: unset;\n  cursor: pointer;\n\n  &:focus {\n    outline: none;\n    color: $button-focus-text-colour;\n    background-color: $button-focus-colour;\n    border: none;\n    border-bottom: 4px solid $button-focus-text-colour;\n    padding: 12px 18px 8px;\n\n    ::slotted(*) {\n      color: $button-focus-text-colour !important;\n    }\n  }\n\n  &:disabled {\n    cursor: default;\n    * {\n      pointer-events: none;\n    }\n  }\n\n  i {\n    display: inline-block;\n    font-size: $button-font-size;\n    color: $button-icon-colour;\n    padding: 10px 16px;\n  }\n}\n\n@mixin button {\n  @include button-defaults;\n  height: 44px;\n  padding: 10px 16px;\n  white-space: nowrap;\n  min-width: 50px;\n\n  @include not-desktop {\n    min-width: unset;\n    max-width: 200px;\n    width: 100%;\n    height: 44px;\n    padding: 10px 16px;\n  }\n\n  i {\n    display: inline-block;\n    font-size: $button-idiomatic-font-size;\n    color: $button-icon-colour;\n    padding-left: 15px;\n  }\n}\n\n/* Primary Buttons */\nbutton.primary {\n  @include button;\n  background-color: $button-colour-standard;\n  color: $button-text-colour-standard;\n  border: 2px solid $button-border-colour-standard;\n\n  &:hover {\n    background-color: $button-hover-colour-standard;\n    border: 2px solid $button-hover-colour-standard;\n    color: $button-hover-text-colour-standard;\n    border-color: $button-hover-border-colour-standard;\n    padding: 10px 16px;\n  }\n\n  &:hover:focus {\n    padding: 12px 18px 8px;\n  }\n\n  &:hover:focus:active {\n    padding: 10px 16px;\n  }\n\n  &:enabled:active {\n    background-color: $button-active-colour-standard;\n    border: 2px solid $button-active-border-colour-standard;\n    color: $button-active-text-colour-standard;\n\n    i {\n      color: $button-active-text-colour-standard;\n    }\n\n    p {\n      color: $button-active-text-colour-standard;\n    }\n  }\n\n  &:disabled {\n    background-color: $button-colour-deselected;\n    border: 2px solid $button-border-colour-deselected;\n  }\n}\n\n/* Secondary Buttons */\nbutton.secondary {\n  @include button;\n  background-color: $button-colour-secondary;\n  color: $button-text-colour-secondary;\n  border: 2px solid $button-border-colour-secondary;\n\n  &:hover {\n    background-color: $button-hover-colour-secondary;\n    color: $button-hover-text-colour-secondary;\n    border: 2px solid $button-hover-border-colour-secondary;\n    padding: 10px 16px;\n  }\n\n  &:enabled:active {\n    background-color: $button-active-colour-secondary;\n    border: 2px solid $button-active-border-colour-secondary;\n    color: $button-active-text-colour-secondary;\n\n    i {\n      color: $button-active-text-colour-secondary;\n    }\n\n    p {\n      color: $button-active-text-colour-secondary;\n    }\n  }\n\n  &:disabled {\n    background-color: $button-colour-deselected;\n    border: 2px solid $button-border-colour-deselected;\n  }\n\n  i {\n    color: $button-text-colour-secondary;\n  }\n}\n\n/* Warning Buttons */\nbutton.warning {\n  @include button;\n  background-color: $button-colour-warning;\n  color: $button-text-colour-warning;\n  border: 2px solid $button-border-colour-warning;\n\n  &:hover {\n    background-color: $button-hover-colour-warning;\n    color: $button-text-colour-warning;\n    border: 2px solid $button-hover-border-colour-warning;\n    padding: 10px 16px;\n  }\n\n  &:enabled:active {\n    background-color: $button-active-colour-warning;\n    border: 2px solid $button-active-border-colour-warning;\n    color: $button-active-text-colour-warning;\n\n    i {\n      color: $button-active-text-colour-warning;\n    }\n\n    p {\n      color: $button-active-text-colour-warning;\n    }\n  }\n\n  &:disabled {\n    background-color: $button-colour-deselected;\n    border: 2px solid $button-border-colour-deselected;\n    & > * {\n      opacity: 0.5;\n    }\n  }\n\n  i {\n    color: $button-text-colour-warning;\n  }\n}\n\n/* Text Buttons */\nbutton.text {\n  @include button-defaults;\n  color: $button-text-colour-secondary;\n\n  &:enabled:active {\n    color: $button-text-colour-secondary;\n\n    i {\n      color: $button-text-colour-secondary;\n    }\n\n    p {\n      color: $button-text-colour-secondary;\n    }\n  }\n\n  &:disabled {\n    color: $button-colour-deselected;\n    & > * {\n      opacity: 0.5;\n    }\n  }\n\n  &:focus {\n    border: none;\n    box-shadow:\n      0 -2px $button-focus-colour,\n      0 4px $button-focus-text-colour;\n    text-decoration: none;\n    padding: 0;\n    ::slotted(*) {\n      color: $button-focus-text-colour !important;\n    }\n  }\n\n  i {\n    color: $button-text-colour-secondary;\n  }\n}\n\n/* Icon Buttons */\nbutton.icon {\n  @include button-defaults;\n  min-height: 44px;\n  min-width: 50px;\n\n  background-color: $button-colour-icon;\n  color: $button-text-colour-icon;\n  border: 2px solid $button-border-colour-icon;\n  padding: 9px;\n\n  &:focus {\n    padding: 11px 11px 8px;\n  }\n\n  &:hover {\n    background-color: $button-hover-colour-icon;\n    border: 2px solid $button-hover-border-colour-icon;\n    padding: 9px;\n  }\n\n  admiralty-icon {\n    &.icon-padding {\n      padding-left: 8px;\n    }\n  }\n\n\n  &:enabled:active {\n    background-color: $button-active-colour-icon;\n    color: $button-active-text-colour-icon;\n    border: 2px solid $button-active-border-colour-icon;\n    border: 2px solid transparent;\n\n    admiralty-icon {\n      color: $button-active-text-colour-icon !important;\n    }\n  }\n\n  &:disabled {\n    background-color: $button-disabled-colour-icon;\n    border: 2px solid $button-active-border-colour-icon;\n    opacity: 0.3;\n  }\n\n  &:active:disabled {\n    background-color: $button-colour-deselected;\n    border: 2px solid $button-active-border-colour-icon;\n    opacity: 0.3;\n  }\n\n  i {\n    margin: auto;\n    font-size: unset;\n    color: unset;\n    padding-left: unset;\n  }\n}\n","import { Component, Prop, h, Element} from '@stencil/core';\nimport { ButtonVariant } from './button.types';\nimport { IconName } from '@fortawesome/fontawesome-svg-core';\n\n@Component({\n  tag: 'admiralty-button',\n  styleUrl: 'button.scss',\n  scoped: true,\n})\nexport class ButtonComponent {\n  @Element() el: HTMLElement;\n  /**\n   * The type of button to render. Valid values are `primary`, `secondary`, `warning`, `text` and `icon`.\n   * Default value is `primary`.\n   */\n  @Prop() variant: ButtonVariant = 'primary';\n  /**\n   * When passed Font Awesome Icon name, then an icon will be rendered.\n   */\n  @Prop() icon: IconName;\n  /**\n   * Determines whether the button is disabled. A button in disabled state will not fire click output events.\n   */\n  @Prop({ reflect: true }) disabled = false;\n  /**\n   * The default behavior of the button. Valid values are `button`, `submit` and `reset`.\n   * Default value is `submit`.\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'submit';\n  /**\n   * The `<form>` element to associate the button with (its form owner).\n   */\n  @Prop() form: string;\n  /**\n   * The name of the button, submitted as a pair with the button's value as part of the form data,\n   * when that button is used to submit the form.\n   */\n  @Prop() name: string;\n  /**\n   * Defines the value associated with the button's name when it's submitted with the form data.\n   * This value is passed to the server in params when the form is submitted using this button.\n   */\n  @Prop() value: string;\n\n  render() {\n    const hasTextContent = this.el.textContent.trim().length > 0;\n\n    const { form, name, value } = this;\n    const props = {\n      ...(form && { form }),\n      ...(name && { name }),\n      ...(value && { value }),\n    };\n\n    return (\n      <button type={this.type} disabled={this.disabled} class={this.variant} {...props}>\n        <slot></slot>\n        {this.icon ? <admiralty-icon icon-name={this.icon} class={`${hasTextContent? \"icon-padding\" : \"\"}`}></admiralty-icon> : undefined}\n      </button>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/admiralty-button.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h } from './index-60c25452.js';
+import { r as registerInstance, h, g as getElement } from './index-60c25452.js';
 
-const buttonCss = ".visually-hidden.sc-admiralty-button:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}@media (max-width: 1023px){.desktop-only.sc-admiralty-button{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-button{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-button{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-button{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-button{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-button{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-button{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-button{display:none}}button.primary.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;height:44px;padding:10px 16px;white-space:nowrap;min-width:50px;background-color:var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast);border:2px solid var(--admiralty-colour-primary)}button.primary.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:12px 18px 8px}button.primary:focus.sc-admiralty-button-s>*,button.primary:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.primary.sc-admiralty-button:disabled{cursor:default}button.primary.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.primary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:10px 16px}@media (max-width: 1023px){button.primary.sc-admiralty-button{min-width:unset;max-width:200px;width:100%;height:44px;padding:10px 16px}}button.primary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-idiomatic-font-size, var(--admiralty-font-size-2));color:var(--admiralty-colour-primary);padding-left:15px}button.primary.sc-admiralty-button:hover{background-color:var(--admiralty-colour-primary-shade);border:2px solid var(--admiralty-colour-primary-shade);color:var(--admiralty-colour-primary-contrast);border-color:var(--admiralty-colour-primary-shade);padding:10px 16px}button.primary.sc-admiralty-button:hover:focus{padding:12px 18px 8px}button.primary.sc-admiralty-button:hover:focus:active{padding:10px 16px}button.primary.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-primary-contrast);border:2px solid var(--admiralty-colour-primary-contrast);color:var(--admiralty-colour-primary)}button.primary.sc-admiralty-button:enabled:active i.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.primary.sc-admiralty-button:enabled:active p.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.primary.sc-admiralty-button:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-disabled-colour)}button.secondary.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;height:44px;padding:10px 16px;white-space:nowrap;min-width:50px;background-color:var(--admiralty-colour-primary-contrast);color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary)}button.secondary.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:12px 18px 8px}button.secondary:focus.sc-admiralty-button-s>*,button.secondary:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.secondary.sc-admiralty-button:disabled{cursor:default}button.secondary.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.secondary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:10px 16px}@media (max-width: 1023px){button.secondary.sc-admiralty-button{min-width:unset;max-width:200px;width:100%;height:44px;padding:10px 16px}}button.secondary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-idiomatic-font-size, var(--admiralty-font-size-2));color:var(--admiralty-colour-primary);padding-left:15px}button.secondary.sc-admiralty-button:hover{background-color:var(--admiralty-hover-background-colour);color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary-shade);padding:10px 16px}button.secondary.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast)}button.secondary.sc-admiralty-button:enabled:active i.sc-admiralty-button{color:var(--admiralty-colour-primary-contrast)}button.secondary.sc-admiralty-button:enabled:active p.sc-admiralty-button{color:var(--admiralty-colour-primary-contrast)}button.secondary.sc-admiralty-button:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-disabled-colour)}button.secondary.sc-admiralty-button i.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.warning.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;height:44px;padding:10px 16px;white-space:nowrap;min-width:50px;background-color:var(--admiralty-colour-danger);color:var(--admiralty-colour-danger-contrast);border:2px solid var(--admiralty-colour-danger)}button.warning.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:12px 18px 8px}button.warning:focus.sc-admiralty-button-s>*,button.warning:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.warning.sc-admiralty-button:disabled{cursor:default}button.warning.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.warning.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:10px 16px}@media (max-width: 1023px){button.warning.sc-admiralty-button{min-width:unset;max-width:200px;width:100%;height:44px;padding:10px 16px}}button.warning.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-idiomatic-font-size, var(--admiralty-font-size-2));color:var(--admiralty-colour-primary);padding-left:15px}button.warning.sc-admiralty-button:hover{background-color:var(--admiralty-colour-danger-shade);color:var(--admiralty-colour-danger-contrast);border:2px solid var(--admiralty-colour-danger-shade);padding:10px 16px}button.warning.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-danger-contrast);border:2px solid var(--admiralty-colour-danger-contrast);color:var(--admiralty-colour-danger)}button.warning.sc-admiralty-button:enabled:active i.sc-admiralty-button{color:var(--admiralty-colour-danger)}button.warning.sc-admiralty-button:enabled:active p.sc-admiralty-button{color:var(--admiralty-colour-danger)}button.warning.sc-admiralty-button:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-disabled-colour)}button.warning.sc-admiralty-button:disabled>*.sc-admiralty-button{opacity:0.5}button.warning.sc-admiralty-button i.sc-admiralty-button{color:var(--admiralty-colour-danger-contrast)}button.text.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;color:var(--admiralty-colour-primary)}button.text.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:12px 18px 8px}button.text:focus.sc-admiralty-button-s>*,button.text:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.text.sc-admiralty-button:disabled{cursor:default}button.text.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.text.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:10px 16px}button.text.sc-admiralty-button:enabled:active{color:var(--admiralty-colour-primary)}button.text.sc-admiralty-button:enabled:active i.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.text.sc-admiralty-button:enabled:active p.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.text.sc-admiralty-button:disabled{color:var(--admiralty-disabled-colour)}button.text.sc-admiralty-button:disabled>*.sc-admiralty-button{opacity:0.5}button.text.sc-admiralty-button:focus{border:none;box-shadow:0 -2px var(--admiralty-focus-colour), 0 4px var(--admiralty-text-colour);text-decoration:none;padding:0}button.text:focus.sc-admiralty-button-s>*,button.text:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.text.sc-admiralty-button i.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.icon.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;min-height:44px;min-width:50px;background-color:var(--admiralty-background-colour-tint);color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary);padding:9px}button.icon.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:12px 18px 8px}button.icon:focus.sc-admiralty-button-s>*,button.icon:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.icon.sc-admiralty-button:disabled{cursor:default}button.icon.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.icon.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:10px 16px}button.icon.sc-admiralty-button:focus{padding:12px 16px 8px}button.icon.sc-admiralty-button:hover{background-color:var(--admiralty-colour-primary-contrast);border:2px solid var(--admiralty-colour-primary);padding:9px}button.icon.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast);border:2px solid var(--admiralty-colour-primary);border:2px solid transparent}button.icon.sc-admiralty-button:enabled:active admiralty-icon.sc-admiralty-button{color:var(--admiralty-colour-primary-contrast) !important}button.icon.sc-admiralty-button:disabled{background-color:var(--admiralty-background-colour-tint);border:2px solid var(--admiralty-colour-primary);opacity:0.3}button.icon.sc-admiralty-button:active:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-colour-primary);opacity:0.3}button.icon.sc-admiralty-button i.sc-admiralty-button{margin:auto;font-size:unset;color:unset;padding-left:unset}";
+const buttonCss = ".visually-hidden.sc-admiralty-button:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}@media (max-width: 1023px){.desktop-only.sc-admiralty-button{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-button{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-button{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-button{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-button{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-button{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-button{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-button{display:none}}button.primary.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;height:44px;padding:10px 16px;white-space:nowrap;min-width:50px;background-color:var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast);border:2px solid var(--admiralty-colour-primary)}button.primary.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:12px 18px 8px}button.primary:focus.sc-admiralty-button-s>*,button.primary:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.primary.sc-admiralty-button:disabled{cursor:default}button.primary.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.primary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:10px 16px}@media (max-width: 1023px){button.primary.sc-admiralty-button{min-width:unset;max-width:200px;width:100%;height:44px;padding:10px 16px}}button.primary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-idiomatic-font-size, var(--admiralty-font-size-2));color:var(--admiralty-colour-primary);padding-left:15px}button.primary.sc-admiralty-button:hover{background-color:var(--admiralty-colour-primary-shade);border:2px solid var(--admiralty-colour-primary-shade);color:var(--admiralty-colour-primary-contrast);border-color:var(--admiralty-colour-primary-shade);padding:10px 16px}button.primary.sc-admiralty-button:hover:focus{padding:12px 18px 8px}button.primary.sc-admiralty-button:hover:focus:active{padding:10px 16px}button.primary.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-primary-contrast);border:2px solid var(--admiralty-colour-primary-contrast);color:var(--admiralty-colour-primary)}button.primary.sc-admiralty-button:enabled:active i.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.primary.sc-admiralty-button:enabled:active p.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.primary.sc-admiralty-button:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-disabled-colour)}button.secondary.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;height:44px;padding:10px 16px;white-space:nowrap;min-width:50px;background-color:var(--admiralty-colour-primary-contrast);color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary)}button.secondary.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:12px 18px 8px}button.secondary:focus.sc-admiralty-button-s>*,button.secondary:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.secondary.sc-admiralty-button:disabled{cursor:default}button.secondary.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.secondary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:10px 16px}@media (max-width: 1023px){button.secondary.sc-admiralty-button{min-width:unset;max-width:200px;width:100%;height:44px;padding:10px 16px}}button.secondary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-idiomatic-font-size, var(--admiralty-font-size-2));color:var(--admiralty-colour-primary);padding-left:15px}button.secondary.sc-admiralty-button:hover{background-color:var(--admiralty-hover-background-colour);color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary-shade);padding:10px 16px}button.secondary.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast)}button.secondary.sc-admiralty-button:enabled:active i.sc-admiralty-button{color:var(--admiralty-colour-primary-contrast)}button.secondary.sc-admiralty-button:enabled:active p.sc-admiralty-button{color:var(--admiralty-colour-primary-contrast)}button.secondary.sc-admiralty-button:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-disabled-colour)}button.secondary.sc-admiralty-button i.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.warning.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;height:44px;padding:10px 16px;white-space:nowrap;min-width:50px;background-color:var(--admiralty-colour-danger);color:var(--admiralty-colour-danger-contrast);border:2px solid var(--admiralty-colour-danger)}button.warning.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:12px 18px 8px}button.warning:focus.sc-admiralty-button-s>*,button.warning:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.warning.sc-admiralty-button:disabled{cursor:default}button.warning.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.warning.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:10px 16px}@media (max-width: 1023px){button.warning.sc-admiralty-button{min-width:unset;max-width:200px;width:100%;height:44px;padding:10px 16px}}button.warning.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-idiomatic-font-size, var(--admiralty-font-size-2));color:var(--admiralty-colour-primary);padding-left:15px}button.warning.sc-admiralty-button:hover{background-color:var(--admiralty-colour-danger-shade);color:var(--admiralty-colour-danger-contrast);border:2px solid var(--admiralty-colour-danger-shade);padding:10px 16px}button.warning.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-danger-contrast);border:2px solid var(--admiralty-colour-danger-contrast);color:var(--admiralty-colour-danger)}button.warning.sc-admiralty-button:enabled:active i.sc-admiralty-button{color:var(--admiralty-colour-danger)}button.warning.sc-admiralty-button:enabled:active p.sc-admiralty-button{color:var(--admiralty-colour-danger)}button.warning.sc-admiralty-button:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-disabled-colour)}button.warning.sc-admiralty-button:disabled>*.sc-admiralty-button{opacity:0.5}button.warning.sc-admiralty-button i.sc-admiralty-button{color:var(--admiralty-colour-danger-contrast)}button.text.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;color:var(--admiralty-colour-primary)}button.text.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:12px 18px 8px}button.text:focus.sc-admiralty-button-s>*,button.text:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.text.sc-admiralty-button:disabled{cursor:default}button.text.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.text.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:10px 16px}button.text.sc-admiralty-button:enabled:active{color:var(--admiralty-colour-primary)}button.text.sc-admiralty-button:enabled:active i.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.text.sc-admiralty-button:enabled:active p.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.text.sc-admiralty-button:disabled{color:var(--admiralty-disabled-colour)}button.text.sc-admiralty-button:disabled>*.sc-admiralty-button{opacity:0.5}button.text.sc-admiralty-button:focus{border:none;box-shadow:0 -2px var(--admiralty-focus-colour), 0 4px var(--admiralty-text-colour);text-decoration:none;padding:0}button.text:focus.sc-admiralty-button-s>*,button.text:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.text.sc-admiralty-button i.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.icon.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;min-height:44px;min-width:50px;background-color:var(--admiralty-background-colour-tint);color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary);padding:9px}button.icon.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:12px 18px 8px}button.icon:focus.sc-admiralty-button-s>*,button.icon:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.icon.sc-admiralty-button:disabled{cursor:default}button.icon.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.icon.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:10px 16px}button.icon.sc-admiralty-button:focus{padding:11px 11px 8px}button.icon.sc-admiralty-button:hover{background-color:var(--admiralty-colour-primary-contrast);border:2px solid var(--admiralty-colour-primary);padding:9px}button.icon.sc-admiralty-button admiralty-icon.icon-padding.sc-admiralty-button{padding-left:8px}button.icon.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast);border:2px solid var(--admiralty-colour-primary);border:2px solid transparent}button.icon.sc-admiralty-button:enabled:active admiralty-icon.sc-admiralty-button{color:var(--admiralty-colour-primary-contrast) !important}button.icon.sc-admiralty-button:disabled{background-color:var(--admiralty-background-colour-tint);border:2px solid var(--admiralty-colour-primary);opacity:0.3}button.icon.sc-admiralty-button:active:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-colour-primary);opacity:0.3}button.icon.sc-admiralty-button i.sc-admiralty-button{margin:auto;font-size:unset;color:unset;padding-left:unset}";
 const AdmiraltyButtonStyle0 = buttonCss;
 
 const ButtonComponent = class {
@@ -15,10 +15,12 @@ const ButtonComponent = class {
         this.value = undefined;
     }
     render() {
+        const hasTextContent = this.el.textContent.trim().length > 0;
         const { form, name, value } = this;
         const props = Object.assign(Object.assign(Object.assign({}, (form && { form })), (name && { name })), (value && { value }));
-        return (h("button", Object.assign({ key: 'c1f8179333c7e45f79b04504834a48ccb4c7cd43', type: this.type, disabled: this.disabled, class: this.variant }, props), h("slot", { key: '113862f33d21bbc41514110653ba432893786a40' }), this.icon ? h("admiralty-icon", { "icon-name": this.icon }) : undefined));
+        return (h("button", Object.assign({ key: 'a0f8dc60d81d091107a1aa7d3cb7fbeb66f10377', type: this.type, disabled: this.disabled, class: this.variant }, props), h("slot", { key: 'be4166fe61422f72ba76dd07c9f9e93bb6ab3c14' }), this.icon ? h("admiralty-icon", { "icon-name": this.icon, class: `${hasTextContent ? "icon-padding" : ""}` }) : undefined));
     }
+    get el() { return getElement(this); }
 };
 ButtonComponent.style = AdmiraltyButtonStyle0;
 

package/dist/esm/admiralty-button.entry.js.map

@@ -1 +1 @@
-{"file":"admiralty-button.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,i6YAAi6Y,CAAC;AACp7Y,8BAAe,SAAS;;MCQX,eAAe;;;uBAKO,SAAS;;wBAQN,KAAK;oBAKK,QAAQ;;;;;IAgBtD,MAAM;QACJ,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QACnC,MAAM,KAAK,kDACL,IAAI,IAAI,EAAE,IAAI,EAAE,KAChB,IAAI,IAAI,EAAE,IAAI,EAAE,KAChB,KAAK,IAAI,EAAE,KAAK,EAAE,EACvB,CAAC;QACF,QACE,6EAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,IAAM,KAAK,GAC9E,8DAAa,EACZ,IAAI,CAAC,IAAI,GAAG,mCAA2B,IAAI,CAAC,IAAI,GAAmB,GAAG,SAAS,CACzE,EACT;KACH;;;;;;","names":[],"sources":["src/components/button/button.scss?tag=admiralty-button&encapsulation=scoped","src/components/button/button.tsx"],"sourcesContent":["@import 'button.vars';\n\n@mixin button-defaults {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  font-size: $button-font-size;\n  line-height: $button-line-height;\n  font-weight: $button-font-weight;\n  background-color: unset;\n  cursor: pointer;\n\n  &:focus {\n    outline: none;\n    color: $button-focus-text-colour;\n    background-color: $button-focus-colour;\n    border: none;\n    border-bottom: 4px solid $button-focus-text-colour;\n    padding: 12px 18px 8px;\n\n    ::slotted(*) {\n      color: $button-focus-text-colour !important;\n    }\n  }\n\n  &:disabled {\n    cursor: default;\n    * {\n      pointer-events: none;\n    }\n  }\n\n  i {\n    display: inline-block;\n    font-size: $button-font-size;\n    color: $button-icon-colour;\n    padding: 10px 16px;\n  }\n}\n\n@mixin button {\n  @include button-defaults;\n  height: 44px;\n  padding: 10px 16px;\n  white-space: nowrap;\n  min-width: 50px;\n\n  @include not-desktop {\n    min-width: unset;\n    max-width: 200px;\n    width: 100%;\n    height: 44px;\n    padding: 10px 16px;\n  }\n\n  i {\n    display: inline-block;\n    font-size: $button-idiomatic-font-size;\n    color: $button-icon-colour;\n    padding-left: 15px;\n  }\n}\n\n/* Primary Buttons */\nbutton.primary {\n  @include button;\n  background-color: $button-colour-standard;\n  color: $button-text-colour-standard;\n  border: 2px solid $button-border-colour-standard;\n\n  &:hover {\n    background-color: $button-hover-colour-standard;\n    border: 2px solid $button-hover-colour-standard;\n    color: $button-hover-text-colour-standard;\n    border-color: $button-hover-border-colour-standard;\n    padding: 10px 16px;\n  }\n\n  &:hover:focus {\n    padding: 12px 18px 8px;\n  }\n\n  &:hover:focus:active {\n    padding: 10px 16px;\n  }\n\n  &:enabled:active {\n    background-color: $button-active-colour-standard;\n    border: 2px solid $button-active-border-colour-standard;\n    color: $button-active-text-colour-standard;\n\n    i {\n      color: $button-active-text-colour-standard;\n    }\n\n    p {\n      color: $button-active-text-colour-standard;\n    }\n  }\n\n  &:disabled {\n    background-color: $button-colour-deselected;\n    border: 2px solid $button-border-colour-deselected;\n  }\n}\n\n/* Secondary Buttons */\nbutton.secondary {\n  @include button;\n  background-color: $button-colour-secondary;\n  color: $button-text-colour-secondary;\n  border: 2px solid $button-border-colour-secondary;\n\n  &:hover {\n    background-color: $button-hover-colour-secondary;\n    color: $button-hover-text-colour-secondary;\n    border: 2px solid $button-hover-border-colour-secondary;\n    padding: 10px 16px;\n  }\n\n  &:enabled:active {\n    background-color: $button-active-colour-secondary;\n    border: 2px solid $button-active-border-colour-secondary;\n    color: $button-active-text-colour-secondary;\n\n    i {\n      color: $button-active-text-colour-secondary;\n    }\n\n    p {\n      color: $button-active-text-colour-secondary;\n    }\n  }\n\n  &:disabled {\n    background-color: $button-colour-deselected;\n    border: 2px solid $button-border-colour-deselected;\n  }\n\n  i {\n    color: $button-text-colour-secondary;\n  }\n}\n\n/* Warning Buttons */\nbutton.warning {\n  @include button;\n  background-color: $button-colour-warning;\n  color: $button-text-colour-warning;\n  border: 2px solid $button-border-colour-warning;\n\n  &:hover {\n    background-color: $button-hover-colour-warning;\n    color: $button-text-colour-warning;\n    border: 2px solid $button-hover-border-colour-warning;\n    padding: 10px 16px;\n  }\n\n  &:enabled:active {\n    background-color: $button-active-colour-warning;\n    border: 2px solid $button-active-border-colour-warning;\n    color: $button-active-text-colour-warning;\n\n    i {\n      color: $button-active-text-colour-warning;\n    }\n\n    p {\n      color: $button-active-text-colour-warning;\n    }\n  }\n\n  &:disabled {\n    background-color: $button-colour-deselected;\n    border: 2px solid $button-border-colour-deselected;\n    & > * {\n      opacity: 0.5;\n    }\n  }\n\n  i {\n    color: $button-text-colour-warning;\n  }\n}\n\n/* Text Buttons */\nbutton.text {\n  @include button-defaults;\n  color: $button-text-colour-secondary;\n\n  &:enabled:active {\n    color: $button-text-colour-secondary;\n\n    i {\n      color: $button-text-colour-secondary;\n    }\n\n    p {\n      color: $button-text-colour-secondary;\n    }\n  }\n\n  &:disabled {\n    color: $button-colour-deselected;\n    & > * {\n      opacity: 0.5;\n    }\n  }\n\n  &:focus {\n    border: none;\n    box-shadow:\n      0 -2px $button-focus-colour,\n      0 4px $button-focus-text-colour;\n    text-decoration: none;\n    padding: 0;\n    ::slotted(*) {\n      color: $button-focus-text-colour !important;\n    }\n  }\n\n  i {\n    color: $button-text-colour-secondary;\n  }\n}\n\n/* Icon Buttons */\nbutton.icon {\n  @include button-defaults;\n  min-height: 44px;\n  min-width: 50px;\n\n  background-color: $button-colour-icon;\n  color: $button-text-colour-icon;\n  border: 2px solid $button-border-colour-icon;\n  padding: 9px;\n\n  &:focus {\n    padding: 12px 16px 8px;\n  }\n\n  &:hover {\n    background-color: $button-hover-colour-icon;\n    border: 2px solid $button-hover-border-colour-icon;\n    padding: 9px;\n  }\n\n  &:enabled:active {\n    background-color: $button-active-colour-icon;\n    color: $button-active-text-colour-icon;\n    border: 2px solid $button-active-border-colour-icon;\n    border: 2px solid transparent;\n\n    admiralty-icon {\n      color: $button-active-text-colour-icon !important;\n    }\n  }\n\n  &:disabled {\n    background-color: $button-disabled-colour-icon;\n    border: 2px solid $button-active-border-colour-icon;\n    opacity: 0.3;\n  }\n\n  &:active:disabled {\n    background-color: $button-colour-deselected;\n    border: 2px solid $button-active-border-colour-icon;\n    opacity: 0.3;\n  }\n\n  i {\n    margin: auto;\n    font-size: unset;\n    color: unset;\n    padding-left: unset;\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { ButtonVariant } from './button.types';\nimport { IconName } from '@fortawesome/fontawesome-svg-core';\n\n@Component({\n  tag: 'admiralty-button',\n  styleUrl: 'button.scss',\n  scoped: true,\n})\nexport class ButtonComponent {\n  /**\n   * The type of button to render. Valid values are `primary`, `secondary`, `warning`, `text` and `icon`.\n   * Default value is `primary`.\n   */\n  @Prop() variant: ButtonVariant = 'primary';\n  /**\n   * When passed Font Awesome Icon name, then an icon will be rendered.\n   */\n  @Prop() icon: IconName;\n  /**\n   * Determines whether the button is disabled. A button in disabled state will not fire click output events.\n   */\n  @Prop({ reflect: true }) disabled = false;\n  /**\n   * The default behavior of the button. Valid values are `button`, `submit` and `reset`.\n   * Default value is `submit`.\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'submit';\n  /**\n   * The `<form>` element to associate the button with (its form owner).\n   */\n  @Prop() form: string;\n  /**\n   * The name of the button, submitted as a pair with the button's value as part of the form data,\n   * when that button is used to submit the form.\n   */\n  @Prop() name: string;\n  /**\n   * Defines the value associated with the button's name when it's submitted with the form data.\n   * This value is passed to the server in params when the form is submitted using this button.\n   */\n  @Prop() value: string;\n\n  render() {\n    const { form, name, value } = this;\n    const props = {\n      ...(form && { form }),\n      ...(name && { name }),\n      ...(value && { value }),\n    };\n    return (\n      <button type={this.type} disabled={this.disabled} class={this.variant} {...props}>\n        <slot></slot>\n        {this.icon ? <admiralty-icon icon-name={this.icon}></admiralty-icon> : undefined}\n      </button>\n    );\n  }\n}\n"],"version":3}
+{"file":"admiralty-button.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,kgZAAkgZ,CAAC;AACrhZ,8BAAe,SAAS;;MCQX,eAAe;;;uBAMO,SAAS;;wBAQN,KAAK;oBAKK,QAAQ;;;;;IAgBtD,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;QAE7D,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QACnC,MAAM,KAAK,kDACL,IAAI,IAAI,EAAE,IAAI,EAAE,KAChB,IAAI,IAAI,EAAE,IAAI,EAAE,KAChB,KAAK,IAAI,EAAE,KAAK,EAAE,EACvB,CAAC;QAEF,QACE,6EAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,IAAM,KAAK,GAC9E,8DAAa,EACZ,IAAI,CAAC,IAAI,GAAG,mCAA2B,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,cAAc,GAAE,cAAc,GAAG,EAAE,EAAE,GAAmB,GAAG,SAAS,CAC1H,EACT;KACH;;;;;;;","names":[],"sources":["src/components/button/button.scss?tag=admiralty-button&encapsulation=scoped","src/components/button/button.tsx"],"sourcesContent":["@import 'button.vars';\n\n@mixin button-defaults {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  font-size: $button-font-size;\n  line-height: $button-line-height;\n  font-weight: $button-font-weight;\n  background-color: unset;\n  cursor: pointer;\n\n  &:focus {\n    outline: none;\n    color: $button-focus-text-colour;\n    background-color: $button-focus-colour;\n    border: none;\n    border-bottom: 4px solid $button-focus-text-colour;\n    padding: 12px 18px 8px;\n\n    ::slotted(*) {\n      color: $button-focus-text-colour !important;\n    }\n  }\n\n  &:disabled {\n    cursor: default;\n    * {\n      pointer-events: none;\n    }\n  }\n\n  i {\n    display: inline-block;\n    font-size: $button-font-size;\n    color: $button-icon-colour;\n    padding: 10px 16px;\n  }\n}\n\n@mixin button {\n  @include button-defaults;\n  height: 44px;\n  padding: 10px 16px;\n  white-space: nowrap;\n  min-width: 50px;\n\n  @include not-desktop {\n    min-width: unset;\n    max-width: 200px;\n    width: 100%;\n    height: 44px;\n    padding: 10px 16px;\n  }\n\n  i {\n    display: inline-block;\n    font-size: $button-idiomatic-font-size;\n    color: $button-icon-colour;\n    padding-left: 15px;\n  }\n}\n\n/* Primary Buttons */\nbutton.primary {\n  @include button;\n  background-color: $button-colour-standard;\n  color: $button-text-colour-standard;\n  border: 2px solid $button-border-colour-standard;\n\n  &:hover {\n    background-color: $button-hover-colour-standard;\n    border: 2px solid $button-hover-colour-standard;\n    color: $button-hover-text-colour-standard;\n    border-color: $button-hover-border-colour-standard;\n    padding: 10px 16px;\n  }\n\n  &:hover:focus {\n    padding: 12px 18px 8px;\n  }\n\n  &:hover:focus:active {\n    padding: 10px 16px;\n  }\n\n  &:enabled:active {\n    background-color: $button-active-colour-standard;\n    border: 2px solid $button-active-border-colour-standard;\n    color: $button-active-text-colour-standard;\n\n    i {\n      color: $button-active-text-colour-standard;\n    }\n\n    p {\n      color: $button-active-text-colour-standard;\n    }\n  }\n\n  &:disabled {\n    background-color: $button-colour-deselected;\n    border: 2px solid $button-border-colour-deselected;\n  }\n}\n\n/* Secondary Buttons */\nbutton.secondary {\n  @include button;\n  background-color: $button-colour-secondary;\n  color: $button-text-colour-secondary;\n  border: 2px solid $button-border-colour-secondary;\n\n  &:hover {\n    background-color: $button-hover-colour-secondary;\n    color: $button-hover-text-colour-secondary;\n    border: 2px solid $button-hover-border-colour-secondary;\n    padding: 10px 16px;\n  }\n\n  &:enabled:active {\n    background-color: $button-active-colour-secondary;\n    border: 2px solid $button-active-border-colour-secondary;\n    color: $button-active-text-colour-secondary;\n\n    i {\n      color: $button-active-text-colour-secondary;\n    }\n\n    p {\n      color: $button-active-text-colour-secondary;\n    }\n  }\n\n  &:disabled {\n    background-color: $button-colour-deselected;\n    border: 2px solid $button-border-colour-deselected;\n  }\n\n  i {\n    color: $button-text-colour-secondary;\n  }\n}\n\n/* Warning Buttons */\nbutton.warning {\n  @include button;\n  background-color: $button-colour-warning;\n  color: $button-text-colour-warning;\n  border: 2px solid $button-border-colour-warning;\n\n  &:hover {\n    background-color: $button-hover-colour-warning;\n    color: $button-text-colour-warning;\n    border: 2px solid $button-hover-border-colour-warning;\n    padding: 10px 16px;\n  }\n\n  &:enabled:active {\n    background-color: $button-active-colour-warning;\n    border: 2px solid $button-active-border-colour-warning;\n    color: $button-active-text-colour-warning;\n\n    i {\n      color: $button-active-text-colour-warning;\n    }\n\n    p {\n      color: $button-active-text-colour-warning;\n    }\n  }\n\n  &:disabled {\n    background-color: $button-colour-deselected;\n    border: 2px solid $button-border-colour-deselected;\n    & > * {\n      opacity: 0.5;\n    }\n  }\n\n  i {\n    color: $button-text-colour-warning;\n  }\n}\n\n/* Text Buttons */\nbutton.text {\n  @include button-defaults;\n  color: $button-text-colour-secondary;\n\n  &:enabled:active {\n    color: $button-text-colour-secondary;\n\n    i {\n      color: $button-text-colour-secondary;\n    }\n\n    p {\n      color: $button-text-colour-secondary;\n    }\n  }\n\n  &:disabled {\n    color: $button-colour-deselected;\n    & > * {\n      opacity: 0.5;\n    }\n  }\n\n  &:focus {\n    border: none;\n    box-shadow:\n      0 -2px $button-focus-colour,\n      0 4px $button-focus-text-colour;\n    text-decoration: none;\n    padding: 0;\n    ::slotted(*) {\n      color: $button-focus-text-colour !important;\n    }\n  }\n\n  i {\n    color: $button-text-colour-secondary;\n  }\n}\n\n/* Icon Buttons */\nbutton.icon {\n  @include button-defaults;\n  min-height: 44px;\n  min-width: 50px;\n\n  background-color: $button-colour-icon;\n  color: $button-text-colour-icon;\n  border: 2px solid $button-border-colour-icon;\n  padding: 9px;\n\n  &:focus {\n    padding: 11px 11px 8px;\n  }\n\n  &:hover {\n    background-color: $button-hover-colour-icon;\n    border: 2px solid $button-hover-border-colour-icon;\n    padding: 9px;\n  }\n\n  admiralty-icon {\n    &.icon-padding {\n      padding-left: 8px;\n    }\n  }\n\n\n  &:enabled:active {\n    background-color: $button-active-colour-icon;\n    color: $button-active-text-colour-icon;\n    border: 2px solid $button-active-border-colour-icon;\n    border: 2px solid transparent;\n\n    admiralty-icon {\n      color: $button-active-text-colour-icon !important;\n    }\n  }\n\n  &:disabled {\n    background-color: $button-disabled-colour-icon;\n    border: 2px solid $button-active-border-colour-icon;\n    opacity: 0.3;\n  }\n\n  &:active:disabled {\n    background-color: $button-colour-deselected;\n    border: 2px solid $button-active-border-colour-icon;\n    opacity: 0.3;\n  }\n\n  i {\n    margin: auto;\n    font-size: unset;\n    color: unset;\n    padding-left: unset;\n  }\n}\n","import { Component, Prop, h, Element} from '@stencil/core';\nimport { ButtonVariant } from './button.types';\nimport { IconName } from '@fortawesome/fontawesome-svg-core';\n\n@Component({\n  tag: 'admiralty-button',\n  styleUrl: 'button.scss',\n  scoped: true,\n})\nexport class ButtonComponent {\n  @Element() el: HTMLElement;\n  /**\n   * The type of button to render. Valid values are `primary`, `secondary`, `warning`, `text` and `icon`.\n   * Default value is `primary`.\n   */\n  @Prop() variant: ButtonVariant = 'primary';\n  /**\n   * When passed Font Awesome Icon name, then an icon will be rendered.\n   */\n  @Prop() icon: IconName;\n  /**\n   * Determines whether the button is disabled. A button in disabled state will not fire click output events.\n   */\n  @Prop({ reflect: true }) disabled = false;\n  /**\n   * The default behavior of the button. Valid values are `button`, `submit` and `reset`.\n   * Default value is `submit`.\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'submit';\n  /**\n   * The `<form>` element to associate the button with (its form owner).\n   */\n  @Prop() form: string;\n  /**\n   * The name of the button, submitted as a pair with the button's value as part of the form data,\n   * when that button is used to submit the form.\n   */\n  @Prop() name: string;\n  /**\n   * Defines the value associated with the button's name when it's submitted with the form data.\n   * This value is passed to the server in params when the form is submitted using this button.\n   */\n  @Prop() value: string;\n\n  render() {\n    const hasTextContent = this.el.textContent.trim().length > 0;\n\n    const { form, name, value } = this;\n    const props = {\n      ...(form && { form }),\n      ...(name && { name }),\n      ...(value && { value }),\n    };\n\n    return (\n      <button type={this.type} disabled={this.disabled} class={this.variant} {...props}>\n        <slot></slot>\n        {this.icon ? <admiralty-icon icon-name={this.icon} class={`${hasTextContent? \"icon-padding\" : \"\"}`}></admiralty-icon> : undefined}\n      </button>\n    );\n  }\n}\n"],"version":3}

package/dist/types/components/button/button.d.ts

@@ -1,6 +1,7 @@
 import { ButtonVariant } from './button.types';
 import { IconName } from '@fortawesome/fontawesome-svg-core';
 export declare class ButtonComponent {
+    el: HTMLElement;
     /**
      * The type of button to render. Valid values are `primary`, `secondary`, `warning`, `text` and `icon`.
      * Default value is `primary`.

package/docs/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-02-21T12:07:43",
+  "timestamp": "2025-02-26T09:46:55",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.21.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukho/admiralty-core",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "Stencil Component Starter",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -72,5 +72,5 @@
   "license": "MIT",
   "url": "https://github.com/UKHO/admiralty-design-system",
   "repository": "git://github.com/UKHO/admiralty-design-system.git",
-  "gitHead": "0265dcd8746b60f021a89ed5f2615657271adbfb"
+  "gitHead": "309b1580ebed91f2ad4407a6985715b2569d24be"
 }

package/dist/admiralty/p-a228de74.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as a}from"./p-71979ff5.js";const o=".visually-hidden.sc-admiralty-button:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}@media (max-width: 1023px){.desktop-only.sc-admiralty-button{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-button{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-button{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-button{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-button{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-button{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-button{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-button{display:none}}button.primary.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;height:44px;padding:10px 16px;white-space:nowrap;min-width:50px;background-color:var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast);border:2px solid var(--admiralty-colour-primary)}button.primary.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:12px 18px 8px}button.primary:focus.sc-admiralty-button-s>*,button.primary:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.primary.sc-admiralty-button:disabled{cursor:default}button.primary.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.primary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:10px 16px}@media (max-width: 1023px){button.primary.sc-admiralty-button{min-width:unset;max-width:200px;width:100%;height:44px;padding:10px 16px}}button.primary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-idiomatic-font-size, var(--admiralty-font-size-2));color:var(--admiralty-colour-primary);padding-left:15px}button.primary.sc-admiralty-button:hover{background-color:var(--admiralty-colour-primary-shade);border:2px solid var(--admiralty-colour-primary-shade);color:var(--admiralty-colour-primary-contrast);border-color:var(--admiralty-colour-primary-shade);padding:10px 16px}button.primary.sc-admiralty-button:hover:focus{padding:12px 18px 8px}button.primary.sc-admiralty-button:hover:focus:active{padding:10px 16px}button.primary.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-primary-contrast);border:2px solid var(--admiralty-colour-primary-contrast);color:var(--admiralty-colour-primary)}button.primary.sc-admiralty-button:enabled:active i.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.primary.sc-admiralty-button:enabled:active p.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.primary.sc-admiralty-button:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-disabled-colour)}button.secondary.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;height:44px;padding:10px 16px;white-space:nowrap;min-width:50px;background-color:var(--admiralty-colour-primary-contrast);color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary)}button.secondary.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:12px 18px 8px}button.secondary:focus.sc-admiralty-button-s>*,button.secondary:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.secondary.sc-admiralty-button:disabled{cursor:default}button.secondary.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.secondary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:10px 16px}@media (max-width: 1023px){button.secondary.sc-admiralty-button{min-width:unset;max-width:200px;width:100%;height:44px;padding:10px 16px}}button.secondary.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-idiomatic-font-size, var(--admiralty-font-size-2));color:var(--admiralty-colour-primary);padding-left:15px}button.secondary.sc-admiralty-button:hover{background-color:var(--admiralty-hover-background-colour);color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary-shade);padding:10px 16px}button.secondary.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast)}button.secondary.sc-admiralty-button:enabled:active i.sc-admiralty-button{color:var(--admiralty-colour-primary-contrast)}button.secondary.sc-admiralty-button:enabled:active p.sc-admiralty-button{color:var(--admiralty-colour-primary-contrast)}button.secondary.sc-admiralty-button:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-disabled-colour)}button.secondary.sc-admiralty-button i.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.warning.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;height:44px;padding:10px 16px;white-space:nowrap;min-width:50px;background-color:var(--admiralty-colour-danger);color:var(--admiralty-colour-danger-contrast);border:2px solid var(--admiralty-colour-danger)}button.warning.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:12px 18px 8px}button.warning:focus.sc-admiralty-button-s>*,button.warning:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.warning.sc-admiralty-button:disabled{cursor:default}button.warning.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.warning.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:10px 16px}@media (max-width: 1023px){button.warning.sc-admiralty-button{min-width:unset;max-width:200px;width:100%;height:44px;padding:10px 16px}}button.warning.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-idiomatic-font-size, var(--admiralty-font-size-2));color:var(--admiralty-colour-primary);padding-left:15px}button.warning.sc-admiralty-button:hover{background-color:var(--admiralty-colour-danger-shade);color:var(--admiralty-colour-danger-contrast);border:2px solid var(--admiralty-colour-danger-shade);padding:10px 16px}button.warning.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-danger-contrast);border:2px solid var(--admiralty-colour-danger-contrast);color:var(--admiralty-colour-danger)}button.warning.sc-admiralty-button:enabled:active i.sc-admiralty-button{color:var(--admiralty-colour-danger)}button.warning.sc-admiralty-button:enabled:active p.sc-admiralty-button{color:var(--admiralty-colour-danger)}button.warning.sc-admiralty-button:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-disabled-colour)}button.warning.sc-admiralty-button:disabled>*.sc-admiralty-button{opacity:0.5}button.warning.sc-admiralty-button i.sc-admiralty-button{color:var(--admiralty-colour-danger-contrast)}button.text.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;color:var(--admiralty-colour-primary)}button.text.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:12px 18px 8px}button.text:focus.sc-admiralty-button-s>*,button.text:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.text.sc-admiralty-button:disabled{cursor:default}button.text.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.text.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:10px 16px}button.text.sc-admiralty-button:enabled:active{color:var(--admiralty-colour-primary)}button.text.sc-admiralty-button:enabled:active i.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.text.sc-admiralty-button:enabled:active p.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.text.sc-admiralty-button:disabled{color:var(--admiralty-disabled-colour)}button.text.sc-admiralty-button:disabled>*.sc-admiralty-button{opacity:0.5}button.text.sc-admiralty-button:focus{border:none;box-shadow:0 -2px var(--admiralty-focus-colour), 0 4px var(--admiralty-text-colour);text-decoration:none;padding:0}button.text:focus.sc-admiralty-button-s>*,button.text:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.text.sc-admiralty-button i.sc-admiralty-button{color:var(--admiralty-colour-primary)}button.icon.sc-admiralty-button{display:inline-flex;align-items:center;justify-content:center;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));line-height:24px;font-weight:var(--admiralty-button-font-weight, var(--admiralty-font-weight-medium));background-color:unset;cursor:pointer;min-height:44px;min-width:50px;background-color:var(--admiralty-background-colour-tint);color:var(--admiralty-colour-primary);border:2px solid var(--admiralty-colour-primary);padding:9px}button.icon.sc-admiralty-button:focus{outline:none;color:var(--admiralty-text-colour);background-color:var(--admiralty-focus-colour);border:none;border-bottom:4px solid var(--admiralty-text-colour);padding:12px 18px 8px}button.icon:focus.sc-admiralty-button-s>*,button.icon:focus .sc-admiralty-button-s>*{color:var(--admiralty-text-colour) !important}button.icon.sc-admiralty-button:disabled{cursor:default}button.icon.sc-admiralty-button:disabled *.sc-admiralty-button{pointer-events:none}button.icon.sc-admiralty-button i.sc-admiralty-button{display:inline-block;font-size:var(--admiralty-button-font-size, var(--admiralty-font-size-0));color:var(--admiralty-colour-primary);padding:10px 16px}button.icon.sc-admiralty-button:focus{padding:12px 16px 8px}button.icon.sc-admiralty-button:hover{background-color:var(--admiralty-colour-primary-contrast);border:2px solid var(--admiralty-colour-primary);padding:9px}button.icon.sc-admiralty-button:enabled:active{background-color:var(--admiralty-colour-primary);color:var(--admiralty-colour-primary-contrast);border:2px solid var(--admiralty-colour-primary);border:2px solid transparent}button.icon.sc-admiralty-button:enabled:active admiralty-icon.sc-admiralty-button{color:var(--admiralty-colour-primary-contrast) !important}button.icon.sc-admiralty-button:disabled{background-color:var(--admiralty-background-colour-tint);border:2px solid var(--admiralty-colour-primary);opacity:0.3}button.icon.sc-admiralty-button:active:disabled{background-color:var(--admiralty-disabled-colour);border:2px solid var(--admiralty-colour-primary);opacity:0.3}button.icon.sc-admiralty-button i.sc-admiralty-button{margin:auto;font-size:unset;color:unset;padding-left:unset}";const r=o;const i=class{constructor(a){t(this,a);this.variant="primary";this.icon=undefined;this.disabled=false;this.type="submit";this.form=undefined;this.name=undefined;this.value=undefined}render(){const{form:t,name:o,value:r}=this;const i=Object.assign(Object.assign(Object.assign({},t&&{form:t}),o&&{name:o}),r&&{value:r});return a("button",Object.assign({key:"c1f8179333c7e45f79b04504834a48ccb4c7cd43",type:this.type,disabled:this.disabled,class:this.variant},i),a("slot",{key:"113862f33d21bbc41514110653ba432893786a40"}),this.icon?a("admiralty-icon",{"icon-name":this.icon}):undefined)}};i.style=r;export{i as admiralty_button};
-//# sourceMappingURL=p-a228de74.entry.js.map

package/dist/components/p-9e69d221.js.map

@@ -1 +0,0 @@
-{"file":"p-9e69d221.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,i6YAAi6Y,CAAC;AACp7Y,8BAAe,SAAS;;MCQX,eAAe;;;;uBAKO,SAAS;;wBAQN,KAAK;oBAKK,QAAQ;;;;;IAgBtD,MAAM;QACJ,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QACnC,MAAM,KAAK,kDACL,IAAI,IAAI,EAAE,IAAI,EAAE,KAChB,IAAI,IAAI,EAAE,IAAI,EAAE,KAChB,KAAK,IAAI,EAAE,KAAK,EAAE,EACvB,CAAC;QACF,QACE,6EAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,IAAM,KAAK,GAC9E,8DAAa,EACZ,IAAI,CAAC,IAAI,GAAG,mCAA2B,IAAI,CAAC,IAAI,GAAmB,GAAG,SAAS,CACzE,EACT;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/button/button.scss?tag=admiralty-button&encapsulation=scoped","src/components/button/button.tsx"],"sourcesContent":["@import 'button.vars';\n\n@mixin button-defaults {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  font-size: $button-font-size;\n  line-height: $button-line-height;\n  font-weight: $button-font-weight;\n  background-color: unset;\n  cursor: pointer;\n\n  &:focus {\n    outline: none;\n    color: $button-focus-text-colour;\n    background-color: $button-focus-colour;\n    border: none;\n    border-bottom: 4px solid $button-focus-text-colour;\n    padding: 12px 18px 8px;\n\n    ::slotted(*) {\n      color: $button-focus-text-colour !important;\n    }\n  }\n\n  &:disabled {\n    cursor: default;\n    * {\n      pointer-events: none;\n    }\n  }\n\n  i {\n    display: inline-block;\n    font-size: $button-font-size;\n    color: $button-icon-colour;\n    padding: 10px 16px;\n  }\n}\n\n@mixin button {\n  @include button-defaults;\n  height: 44px;\n  padding: 10px 16px;\n  white-space: nowrap;\n  min-width: 50px;\n\n  @include not-desktop {\n    min-width: unset;\n    max-width: 200px;\n    width: 100%;\n    height: 44px;\n    padding: 10px 16px;\n  }\n\n  i {\n    display: inline-block;\n    font-size: $button-idiomatic-font-size;\n    color: $button-icon-colour;\n    padding-left: 15px;\n  }\n}\n\n/* Primary Buttons */\nbutton.primary {\n  @include button;\n  background-color: $button-colour-standard;\n  color: $button-text-colour-standard;\n  border: 2px solid $button-border-colour-standard;\n\n  &:hover {\n    background-color: $button-hover-colour-standard;\n    border: 2px solid $button-hover-colour-standard;\n    color: $button-hover-text-colour-standard;\n    border-color: $button-hover-border-colour-standard;\n    padding: 10px 16px;\n  }\n\n  &:hover:focus {\n    padding: 12px 18px 8px;\n  }\n\n  &:hover:focus:active {\n    padding: 10px 16px;\n  }\n\n  &:enabled:active {\n    background-color: $button-active-colour-standard;\n    border: 2px solid $button-active-border-colour-standard;\n    color: $button-active-text-colour-standard;\n\n    i {\n      color: $button-active-text-colour-standard;\n    }\n\n    p {\n      color: $button-active-text-colour-standard;\n    }\n  }\n\n  &:disabled {\n    background-color: $button-colour-deselected;\n    border: 2px solid $button-border-colour-deselected;\n  }\n}\n\n/* Secondary Buttons */\nbutton.secondary {\n  @include button;\n  background-color: $button-colour-secondary;\n  color: $button-text-colour-secondary;\n  border: 2px solid $button-border-colour-secondary;\n\n  &:hover {\n    background-color: $button-hover-colour-secondary;\n    color: $button-hover-text-colour-secondary;\n    border: 2px solid $button-hover-border-colour-secondary;\n    padding: 10px 16px;\n  }\n\n  &:enabled:active {\n    background-color: $button-active-colour-secondary;\n    border: 2px solid $button-active-border-colour-secondary;\n    color: $button-active-text-colour-secondary;\n\n    i {\n      color: $button-active-text-colour-secondary;\n    }\n\n    p {\n      color: $button-active-text-colour-secondary;\n    }\n  }\n\n  &:disabled {\n    background-color: $button-colour-deselected;\n    border: 2px solid $button-border-colour-deselected;\n  }\n\n  i {\n    color: $button-text-colour-secondary;\n  }\n}\n\n/* Warning Buttons */\nbutton.warning {\n  @include button;\n  background-color: $button-colour-warning;\n  color: $button-text-colour-warning;\n  border: 2px solid $button-border-colour-warning;\n\n  &:hover {\n    background-color: $button-hover-colour-warning;\n    color: $button-text-colour-warning;\n    border: 2px solid $button-hover-border-colour-warning;\n    padding: 10px 16px;\n  }\n\n  &:enabled:active {\n    background-color: $button-active-colour-warning;\n    border: 2px solid $button-active-border-colour-warning;\n    color: $button-active-text-colour-warning;\n\n    i {\n      color: $button-active-text-colour-warning;\n    }\n\n    p {\n      color: $button-active-text-colour-warning;\n    }\n  }\n\n  &:disabled {\n    background-color: $button-colour-deselected;\n    border: 2px solid $button-border-colour-deselected;\n    & > * {\n      opacity: 0.5;\n    }\n  }\n\n  i {\n    color: $button-text-colour-warning;\n  }\n}\n\n/* Text Buttons */\nbutton.text {\n  @include button-defaults;\n  color: $button-text-colour-secondary;\n\n  &:enabled:active {\n    color: $button-text-colour-secondary;\n\n    i {\n      color: $button-text-colour-secondary;\n    }\n\n    p {\n      color: $button-text-colour-secondary;\n    }\n  }\n\n  &:disabled {\n    color: $button-colour-deselected;\n    & > * {\n      opacity: 0.5;\n    }\n  }\n\n  &:focus {\n    border: none;\n    box-shadow:\n      0 -2px $button-focus-colour,\n      0 4px $button-focus-text-colour;\n    text-decoration: none;\n    padding: 0;\n    ::slotted(*) {\n      color: $button-focus-text-colour !important;\n    }\n  }\n\n  i {\n    color: $button-text-colour-secondary;\n  }\n}\n\n/* Icon Buttons */\nbutton.icon {\n  @include button-defaults;\n  min-height: 44px;\n  min-width: 50px;\n\n  background-color: $button-colour-icon;\n  color: $button-text-colour-icon;\n  border: 2px solid $button-border-colour-icon;\n  padding: 9px;\n\n  &:focus {\n    padding: 12px 16px 8px;\n  }\n\n  &:hover {\n    background-color: $button-hover-colour-icon;\n    border: 2px solid $button-hover-border-colour-icon;\n    padding: 9px;\n  }\n\n  &:enabled:active {\n    background-color: $button-active-colour-icon;\n    color: $button-active-text-colour-icon;\n    border: 2px solid $button-active-border-colour-icon;\n    border: 2px solid transparent;\n\n    admiralty-icon {\n      color: $button-active-text-colour-icon !important;\n    }\n  }\n\n  &:disabled {\n    background-color: $button-disabled-colour-icon;\n    border: 2px solid $button-active-border-colour-icon;\n    opacity: 0.3;\n  }\n\n  &:active:disabled {\n    background-color: $button-colour-deselected;\n    border: 2px solid $button-active-border-colour-icon;\n    opacity: 0.3;\n  }\n\n  i {\n    margin: auto;\n    font-size: unset;\n    color: unset;\n    padding-left: unset;\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { ButtonVariant } from './button.types';\nimport { IconName } from '@fortawesome/fontawesome-svg-core';\n\n@Component({\n  tag: 'admiralty-button',\n  styleUrl: 'button.scss',\n  scoped: true,\n})\nexport class ButtonComponent {\n  /**\n   * The type of button to render. Valid values are `primary`, `secondary`, `warning`, `text` and `icon`.\n   * Default value is `primary`.\n   */\n  @Prop() variant: ButtonVariant = 'primary';\n  /**\n   * When passed Font Awesome Icon name, then an icon will be rendered.\n   */\n  @Prop() icon: IconName;\n  /**\n   * Determines whether the button is disabled. A button in disabled state will not fire click output events.\n   */\n  @Prop({ reflect: true }) disabled = false;\n  /**\n   * The default behavior of the button. Valid values are `button`, `submit` and `reset`.\n   * Default value is `submit`.\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'submit';\n  /**\n   * The `<form>` element to associate the button with (its form owner).\n   */\n  @Prop() form: string;\n  /**\n   * The name of the button, submitted as a pair with the button's value as part of the form data,\n   * when that button is used to submit the form.\n   */\n  @Prop() name: string;\n  /**\n   * Defines the value associated with the button's name when it's submitted with the form data.\n   * This value is passed to the server in params when the form is submitted using this button.\n   */\n  @Prop() value: string;\n\n  render() {\n    const { form, name, value } = this;\n    const props = {\n      ...(form && { form }),\n      ...(name && { name }),\n      ...(value && { value }),\n    };\n    return (\n      <button type={this.type} disabled={this.disabled} class={this.variant} {...props}>\n        <slot></slot>\n        {this.icon ? <admiralty-icon icon-name={this.icon}></admiralty-icon> : undefined}\n      </button>\n    );\n  }\n}\n"],"version":3}