diff --git a/CHANGELOG-1.x.md b/CHANGELOG-1.x.md
index 14af6b460c..0813caf1b7 100644
--- a/CHANGELOG-1.x.md
+++ b/CHANGELOG-1.x.md
@@ -1,5 +1,6 @@
# 1.11.0 (2021)
+- [](https://github.com/patternfly/patternfly-elements/commit/) feat: Adding variable hooks for pfe-card, overlay region
- [d3ea7fa](https://github.com/patternfly/patternfly-elements/commit/d3ea7facb0c36b7f3e20e2568bdc4bf2e5a5a852) feat: Graceful failure for component registry
- [](https://github.com/patternfly/patternfly-elements/commit/) fix: Accordion alignment with latest design kit
- [5f88c39](https://github.com/patternfly/patternfly-elements/commit/5f88c3963f8a6c13a9aeba6e9f664678453d46ce) fix: Jump links parseInt for IE11
@@ -15,7 +16,6 @@
- [c9c3b56](https://github.com/patternfly/patternfly-elements/commit/c9c3b5654ac05875eabfce0727c54af183e4ac09) chore: Minor testing updates
- [af4bc70](https://github.com/patternfly/patternfly-elements/commit/af4bc7063b995c316320f6df706b744133f1753d) feat: Jump links navigation rework to support panel customizations and elements in separate DOMs; horizontal designs aligned to kit
-
# 1.9.3 (2021-06-16)
- [b7fc80d](https://github.com/patternfly/patternfly-elements/commit/b7fc80d3417eb14be519c6e37895fcff639d1bbd) fix: set margin-top for ctas in footer on mobile
diff --git a/brand/styles.css b/brand/styles.css
index fcbd19d509..c2385229a6 100644
--- a/brand/styles.css
+++ b/brand/styles.css
@@ -21,6 +21,8 @@ pfe-card .img-link {
display: flex;
align-items: center;
justify-content: center;
+ width: 100%;
+ height: 100%;
}
pfe-card h2 {
diff --git a/docs/_data/todos.json b/docs/_data/todos.json
index d63cec681c..d0c942f00a 100644
--- a/docs/_data/todos.json
+++ b/docs/_data/todos.json
@@ -1 +1 @@
-[{"file":"elements/pfe-accordion/src/pfe-accordion-header.js","tag":"TODO","line":27,"ref":"","text":"Deprecated pfe-id in 1.0"},{"file":"elements/pfe-accordion/src/pfe-accordion-panel.js","tag":"TODO","line":28,"ref":"","text":"Deprecated pfe-id in 1.0"},{"file":"elements/pfe-accordion/src/pfe-accordion.js","tag":"TODO","line":37,"ref":"","text":"Deprecated pfe-disclosure in 1.0"},{"file":"elements/pfe-autocomplete/src/pfe-autocomplete.js","tag":"TODO","line":86,"ref":"","text":"Confirm this is translatable"},{"file":"elements/pfe-avatar/src/pfe-avatar.js","tag":"TODO","line":29,"ref":"","text":"Deprecated pfe-name in 1.0"},{"file":"elements/pfe-avatar/src/pfe-avatar.js","tag":"TODO","line":34,"ref":"","text":"Deprecated pfe-src in 1.0"},{"file":"elements/pfe-avatar/src/pfe-avatar.js","tag":"TODO","line":39,"ref":"","text":"Deprecated pfe-pattern in 1.0"},{"file":"elements/pfe-badge/src/pfe-badge.js","tag":"TODO","line":24,"ref":"","text":"Deprecated property in 1.0"},{"file":"elements/pfe-badge/src/pfe-badge.js","tag":"TODO","line":40,"ref":"","text":"Deprecated property in 1.0"},{"file":"elements/pfe-band/src/pfe-band.js","tag":"TODO","line":39,"ref":"","text":"Deprecated property in 1.0"},{"file":"elements/pfe-band/src/pfe-band.js","tag":"TODO","line":51,"ref":"","text":"Deprecated property in 1.0"},{"file":"elements/pfe-band/src/pfe-band.js","tag":"TODO","line":62,"ref":"","text":"Deprecated property in 1.0"},{"file":"elements/pfe-band/src/pfe-band.js","tag":"TODO","line":73,"ref":"","text":"Deprecated property in 1.0"},{"file":"elements/pfe-band/src/pfe-band.js","tag":"TODO","line":84,"ref":"","text":"Deprecated property in 1.0"},{"file":"elements/pfe-band/src/pfe-band.js","tag":"TODO","line":94,"ref":"","text":"Deprecated property in 1.0"},{"file":"elements/pfe-card/src/pfe-card.js","tag":"TODO","line":24,"ref":"","text":"How do we handle attributes for slotted content?"},{"file":"elements/pfe-card/src/pfe-card.js","tag":"TODO","line":34,"ref":"","text":"Deprecate property in 1.0"},{"file":"elements/pfe-card/src/pfe-card.js","tag":"TODO","line":46,"ref":"","text":"Deprecate property in 1.0"},{"file":"elements/pfe-card/src/pfe-card.js","tag":"TODO","line":57,"ref":"","text":"Deprecate property in 1.0"},{"file":"elements/pfe-card/src/pfe-card.js","tag":"TODO","line":68,"ref":"","text":"Deprecate property in 1.0"},{"file":"elements/pfe-codeblock/src/pfe-codeblock.js","tag":"TODO","line":111,"ref":"","text":"when we stop supporting IE11, the need to disconnect and"},{"file":"elements/pfe-collapse/src/pfe-collapse.js","tag":"TODO","line":192,"ref":"","text":"Deprecated"},{"file":"elements/pfe-collapse/src/pfe-collapse.js","tag":"TODO","line":212,"ref":"","text":"Deprecated"},{"file":"elements/pfe-collapse/src/pfe-collapse.js","tag":"TODO","line":303,"ref":"","text":"Deprecated"},{"file":"elements/pfe-content-set/src/pfe-content-set.js","tag":"TODO","line":68,"ref":"","text":"Deprecated for 1.0"},{"file":"elements/pfe-content-set/src/pfe-content-set.js","tag":"TODO","line":74,"ref":"","text":"Deprecated for 1.0"},{"file":"elements/pfe-content-set/src/pfe-content-set.js","tag":"TODO","line":94,"ref":"","text":"Deprecated pfe-disclosure in 1.0"},{"file":"elements/pfe-content-set/src/pfe-content-set.js","tag":"TODO","line":107,"ref":"","text":"Deprecated in 1.0"},{"file":"elements/pfe-content-set/src/pfe-content-set.js","tag":"TODO","line":118,"ref":"","text":"Deprecated in 1.0"},{"file":"elements/pfe-content-set/src/pfe-content-set.js","tag":"TODO","line":123,"ref":"","text":"Deprecated in 1.0"},{"file":"elements/pfe-content-set/src/pfe-content-set.js","tag":"TODO","line":355,"ref":"","text":"Build in some logic for injecting a single node rather than rebuild"},{"file":"elements/pfe-content-set/src/pfe-content-set.js","tag":"TODO","line":402,"ref":"","text":"Build in some logic for injecting a single node rather than rebuild"},{"file":"elements/pfe-content-set/src/pfe-content-set.js","tag":"TODO","line":461,"ref":"","text":"Add back a promise here post-IE11"},{"file":"elements/pfe-cta/src/pfe-cta.js","tag":"TODO","line":45,"ref":"","text":"Deprecated"},{"file":"elements/pfe-cta/src/pfe-cta.js","tag":"TODO","line":55,"ref":"","text":"Deprecated"},{"file":"elements/pfe-cta/src/pfe-cta.js","tag":"TODO","line":65,"ref":"","text":"Deprecated"},{"file":"elements/pfe-dropdown/src/pfe-dropdown.js","tag":"TODO","line":273,"ref":"","text":"Deprecated el.is_disabled"},{"file":"elements/pfe-icon/src/builtin-icon-sets.js","tag":"TODO","line":12,"ref":"","text":"Switch from access.redhat.com to another icon set."},{"file":"elements/pfe-icon/src/pfe-icon.js","tag":"TODO","line":84,"ref":"","text":"Deprecated for 1.0"},{"file":"elements/pfe-icon/src/pfe-icon.js","tag":"TODO","line":90,"ref":"","text":"Deprecated for 1.0"},{"file":"elements/pfe-icon/src/pfe-icon.js","tag":"TODO","line":96,"ref":"","text":"Deprecated for 1.0"},{"file":"elements/pfe-icon/src/pfe-icon.js","tag":"TODO","line":102,"ref":"","text":"Deprecated for 1.0"},{"file":"elements/pfe-jump-links/src/pfe-jump-links-nav.js","tag":"TODO","line":9,"ref":"","text":"This needs a click handler for if the accordion is stuck to the top"},{"file":"elements/pfe-jump-links/src/pfe-jump-links-nav.js","tag":"TODO","line":73,"ref":"","text":"Document this more"},{"file":"elements/pfe-jump-links/src/pfe-jump-links-nav.js","tag":"TODO","line":86,"ref":"","text":"Need to incorporate support for breakpoint customizations i.e., offset=\"@500px: 200, @800px: 150\""},{"file":"elements/pfe-jump-links/src/pfe-jump-links-nav.js","tag":"TODO","line":102,"ref":"","text":"note this in the documentation as a readonly property"},{"file":"elements/pfe-jump-links/src/pfe-jump-links-nav.js","tag":"TODO","line":113,"ref":"","text":"Deprecated in 2.0"},{"file":"elements/pfe-jump-links/src/pfe-jump-links-nav.js","tag":"TODO","line":118,"ref":"","text":"Deprecated in 2.0"},{"file":"elements/pfe-jump-links/src/pfe-jump-links-nav.js","tag":"TODO","line":123,"ref":"","text":"Deprecated in 2.0"},{"file":"elements/pfe-jump-links/src/pfe-jump-links-nav.js","tag":"TODO","line":148,"ref":"","text":"deprecating pfe-jump-links-nav--heading slot in 2.0"},{"file":"elements/pfe-jump-links/src/pfe-jump-links-nav.js","tag":"TODO","line":156,"ref":"","text":"deprecating pfe-jump-links-nav--cta slot in 2.0"},{"file":"elements/pfe-jump-links/src/pfe-jump-links-nav.js","tag":"TODO","line":164,"ref":"","text":"deprecating pfe-jump-links-nav--logo slot in 2.0"},{"file":"elements/pfe-jump-links/src/pfe-jump-links-nav.js","tag":"TODO","line":298,"ref":"","text":"It seems like the offset is 0 when non-horizontal jumps links are mobile"},{"file":"elements/pfe-jump-links/src/pfe-jump-links-nav.js","tag":"TODO","line":304,"ref":"","text":"deprecate --pfe-jump-links-panel--offset in 2.0 release"},{"file":"elements/pfe-jump-links/src/pfe-jump-links-nav.js","tag":"TODO","line":436,"ref":"","text":"would be good to set the last item as active if the visible nav is below this one"},{"file":"elements/pfe-jump-links/src/pfe-jump-links-nav.js","tag":"TODO","line":616,"ref":"","text":"should this processing even be happening?"},{"file":"elements/pfe-jump-links/src/pfe-jump-links-nav.js","tag":"TODO","line":629,"ref":"","text":"The next logic only works for scrolling down; need to reverse for scrolling up"},{"file":"elements/pfe-jump-links/src/pfe-jump-links-nav.js","tag":"TODO","line":698,"ref":"","text":"respond to URL change? Ensure anchor link alignment accounts for sticky nav(s)"},{"file":"elements/pfe-jump-links/src/pfe-jump-links-nav.js","tag":"TODO","line":719,"ref":"","text":"respond to URL change? Ensure anchor link alignment accounts for sticky nav(s)"},{"file":"elements/pfe-jump-links/src/pfe-jump-links-nav.js","tag":"TODO","line":764,"ref":"","text":"Do other items in the stack need to be unstuck?"},{"file":"elements/pfe-jump-links/src/pfe-jump-links-nav.js","tag":"TODO","line":903,"ref":"","text":"On page load, if an anchor exists, fire this event"},{"file":"elements/pfe-jump-links/src/pfe-jump-links-nav.js","tag":"TODO","line":1065,"ref":"","text":"Add a keyboard handler when focus is set on the parent via keyboard; should expand"},{"file":"elements/pfe-jump-links/src/pfe-jump-links-panel.js","tag":"TODO","line":50,"ref":"","text":"Deprecated in 1.0"},{"file":"elements/pfe-jump-links/src/pfe-jump-links-panel.js","tag":"TODO","line":55,"ref":"","text":"Deprecated in 1.0"},{"file":"elements/pfe-jump-links/src/pfe-jump-links.js","tag":"TODO","line":6,"ref":"","text":"Migrate pfe-jump-links-nav to pfe-jump-links in 2.0?"},{"file":"elements/pfe-markdown/src/pfe-markdown.js","tag":"TODO","line":64,"ref":"","text":"when we stop supporting IE11, the need to disconnect and"},{"file":"elements/pfe-page-status/src/pfe-page-status.js","tag":"TODO","line":39,"ref":"","text":"Deprecated in 1.0"},{"file":"elements/pfe-primary-detail/src/pfe-primary-detail.js","tag":"TODO","line":13,"ref":"","text":"Add keyboard controls for arrows?"},{"file":"elements/pfe-primary-detail/src/pfe-primary-detail.js","tag":"TODO","line":14,"ref":"","text":"Add functions to open a specific item by index or ID"},{"file":"elements/pfe-progress-indicator/src/pfe-progress-indicator.js","tag":"TODO","line":26,"ref":"","text":"Deprecated in 1.0"},{"file":"elements/pfe-progress-steps/src/pfe-progress-steps-item.js","tag":"TODO","line":160,"ref":"","text":"This needs AT"},{"file":"elements/pfe-progress-steps/src/pfe-progress-steps.js","tag":"TODO","line":102,"ref":"","text":"we have to do it in javascript until everyone supports"},{"file":"elements/pfe-select/src/pfe-select.js","tag":"TODO","line":19,"ref":"","text":"Do we need to rename this to remove the prefix?"},{"file":"elements/pfe-tabs/src/pfe-tab-panel.js","tag":"TODO","line":52,"ref":"","text":"Deprecated in 1.0"},{"file":"elements/pfe-tabs/src/pfe-tab.js","tag":"TODO","line":49,"ref":"","text":"Deprecated in 1.0"},{"file":"elements/pfe-tabs/src/pfe-tabs.js","tag":"TODO","line":104,"ref":"","text":"Deprecated for 1.0"},{"file":"elements/pfe-tabs/src/pfe-tabs.js","tag":"TODO","line":110,"ref":"","text":"Deprecated for 1.0"},{"file":"elements/pfe-tabs/src/pfe-tabs.js","tag":"TODO","line":116,"ref":"","text":"Deprecated for 1.0"},{"file":"elements/pfelement/src/pfelement.js","tag":"TODO","line":38,"ref":"","text":"the reference to _debugLog is for backwards compatibiilty and will be removed in 2.0"},{"file":"elements/pfelement/src/pfelement.js","tag":"TODO","line":60,"ref":"","text":"Add config validation in the future."},{"file":"elements/pfelement/src/pfelement.js","tag":"TODO","line":174,"ref":"","text":"Deprecated with 1.0"},{"file":"elements/pfelement/src/pfelement.js","tag":"TODO","line":378,"ref":"","text":"Deprecated for 1.0 release"},{"file":"elements/pfelement/src/pfelement.js","tag":"TODO","line":381,"ref":"","text":"Migrate this out of schema for 1.0"},{"file":"elements/pfelement/src/pfelement.js","tag":"TODO","line":603,"ref":"","text":"maybe we should use just the attribute instead of the class?"},{"file":"elements/pfelement/src/pfelement.js","tag":"TODO","line":634,"ref":"","text":"--theme will be deprecated in 2.0"},{"file":"elements/pfelement/src/pfelement.js","tag":"TODO","line":893,"ref":"","text":"add support for a validation function"},{"file":"elements/pfelement/src/pfelement.js","tag":"TODO","line":1043,"ref":"","text":"Should this error be reported to the console?"},{"file":"elements/pfelement/src/pfelement.js","tag":"TODO","line":1086,"ref":"","text":"add a warning when a component property conflicts with a global property."}]
+[{"file":"elements/pfe-accordion/src/pfe-accordion-header.js","tag":"TODO","line":27,"ref":"","text":"Deprecated pfe-id in 1.0"},{"file":"elements/pfe-accordion/src/pfe-accordion-panel.js","tag":"TODO","line":28,"ref":"","text":"Deprecated pfe-id in 1.0"},{"file":"elements/pfe-accordion/src/pfe-accordion.js","tag":"TODO","line":37,"ref":"","text":"Deprecated pfe-disclosure in 1.0"},{"file":"elements/pfe-autocomplete/src/pfe-autocomplete.js","tag":"TODO","line":86,"ref":"","text":"Confirm this is translatable"},{"file":"elements/pfe-avatar/src/pfe-avatar.js","tag":"TODO","line":29,"ref":"","text":"Deprecated pfe-name in 1.0"},{"file":"elements/pfe-avatar/src/pfe-avatar.js","tag":"TODO","line":34,"ref":"","text":"Deprecated pfe-src in 1.0"},{"file":"elements/pfe-avatar/src/pfe-avatar.js","tag":"TODO","line":39,"ref":"","text":"Deprecated pfe-pattern in 1.0"},{"file":"elements/pfe-badge/src/pfe-badge.js","tag":"TODO","line":24,"ref":"","text":"Deprecated property in 1.0"},{"file":"elements/pfe-badge/src/pfe-badge.js","tag":"TODO","line":40,"ref":"","text":"Deprecated property in 1.0"},{"file":"elements/pfe-band/src/pfe-band.js","tag":"TODO","line":39,"ref":"","text":"Deprecated property in 1.0"},{"file":"elements/pfe-band/src/pfe-band.js","tag":"TODO","line":51,"ref":"","text":"Deprecated property in 1.0"},{"file":"elements/pfe-band/src/pfe-band.js","tag":"TODO","line":62,"ref":"","text":"Deprecated property in 1.0"},{"file":"elements/pfe-band/src/pfe-band.js","tag":"TODO","line":73,"ref":"","text":"Deprecated property in 1.0"},{"file":"elements/pfe-band/src/pfe-band.js","tag":"TODO","line":84,"ref":"","text":"Deprecated property in 1.0"},{"file":"elements/pfe-band/src/pfe-band.js","tag":"TODO","line":94,"ref":"","text":"Deprecated property in 1.0"},{"file":"elements/pfe-card/src/pfe-card.js","tag":"TODO","line":24,"ref":"","text":"How do we handle attributes for slotted content?"},{"file":"elements/pfe-card/src/pfe-card.js","tag":"TODO","line":34,"ref":"","text":"Deprecate property in 1.0"},{"file":"elements/pfe-card/src/pfe-card.js","tag":"TODO","line":46,"ref":"","text":"Deprecate property in 1.0"},{"file":"elements/pfe-card/src/pfe-card.js","tag":"TODO","line":57,"ref":"","text":"Deprecate property in 1.0"},{"file":"elements/pfe-card/src/pfe-card.js","tag":"TODO","line":68,"ref":"","text":"Deprecate property in 1.0"},{"file":"elements/pfe-card/src/pfe-card.js","tag":"TODO","line":207,"ref":"","text":"needs to be migrated to a mixin of pfelement?"},{"file":"elements/pfe-card/src/pfe-card.js","tag":"TODO","line":226,"ref":"","text":"needs to be migrated to a mixin of pfelement?"},{"file":"elements/pfe-codeblock/src/pfe-codeblock.js","tag":"TODO","line":111,"ref":"","text":"when we stop supporting IE11, the need to disconnect and"},{"file":"elements/pfe-collapse/src/pfe-collapse.js","tag":"TODO","line":192,"ref":"","text":"Deprecated"},{"file":"elements/pfe-collapse/src/pfe-collapse.js","tag":"TODO","line":212,"ref":"","text":"Deprecated"},{"file":"elements/pfe-collapse/src/pfe-collapse.js","tag":"TODO","line":303,"ref":"","text":"Deprecated"},{"file":"elements/pfe-content-set/src/pfe-content-set.js","tag":"TODO","line":68,"ref":"","text":"Deprecated for 1.0"},{"file":"elements/pfe-content-set/src/pfe-content-set.js","tag":"TODO","line":74,"ref":"","text":"Deprecated for 1.0"},{"file":"elements/pfe-content-set/src/pfe-content-set.js","tag":"TODO","line":94,"ref":"","text":"Deprecated pfe-disclosure in 1.0"},{"file":"elements/pfe-content-set/src/pfe-content-set.js","tag":"TODO","line":107,"ref":"","text":"Deprecated in 1.0"},{"file":"elements/pfe-content-set/src/pfe-content-set.js","tag":"TODO","line":118,"ref":"","text":"Deprecated in 1.0"},{"file":"elements/pfe-content-set/src/pfe-content-set.js","tag":"TODO","line":123,"ref":"","text":"Deprecated in 1.0"},{"file":"elements/pfe-content-set/src/pfe-content-set.js","tag":"TODO","line":355,"ref":"","text":"Build in some logic for injecting a single node rather than rebuild"},{"file":"elements/pfe-content-set/src/pfe-content-set.js","tag":"TODO","line":402,"ref":"","text":"Build in some logic for injecting a single node rather than rebuild"},{"file":"elements/pfe-content-set/src/pfe-content-set.js","tag":"TODO","line":461,"ref":"","text":"Add back a promise here post-IE11"},{"file":"elements/pfe-cta/src/pfe-cta.js","tag":"TODO","line":45,"ref":"","text":"Deprecated"},{"file":"elements/pfe-cta/src/pfe-cta.js","tag":"TODO","line":55,"ref":"","text":"Deprecated"},{"file":"elements/pfe-cta/src/pfe-cta.js","tag":"TODO","line":65,"ref":"","text":"Deprecated"},{"file":"elements/pfe-dropdown/src/pfe-dropdown.js","tag":"TODO","line":273,"ref":"","text":"Deprecated el.is_disabled"},{"file":"elements/pfe-icon/src/builtin-icon-sets.js","tag":"TODO","line":12,"ref":"","text":"Switch from access.redhat.com to another icon set."},{"file":"elements/pfe-icon/src/pfe-icon.js","tag":"TODO","line":84,"ref":"","text":"Deprecated for 1.0"},{"file":"elements/pfe-icon/src/pfe-icon.js","tag":"TODO","line":90,"ref":"","text":"Deprecated for 1.0"},{"file":"elements/pfe-icon/src/pfe-icon.js","tag":"TODO","line":96,"ref":"","text":"Deprecated for 1.0"},{"file":"elements/pfe-icon/src/pfe-icon.js","tag":"TODO","line":102,"ref":"","text":"Deprecated for 1.0"},{"file":"elements/pfe-jump-links/src/pfe-jump-links-nav.js","tag":"TODO","line":9,"ref":"","text":"This needs a click handler for if the accordion is stuck to the top"},{"file":"elements/pfe-jump-links/src/pfe-jump-links-nav.js","tag":"TODO","line":73,"ref":"","text":"Document this more"},{"file":"elements/pfe-jump-links/src/pfe-jump-links-nav.js","tag":"TODO","line":86,"ref":"","text":"Need to incorporate support for breakpoint customizations i.e., offset=\"@500px: 200, @800px: 150\""},{"file":"elements/pfe-jump-links/src/pfe-jump-links-nav.js","tag":"TODO","line":102,"ref":"","text":"note this in the documentation as a readonly property"},{"file":"elements/pfe-jump-links/src/pfe-jump-links-nav.js","tag":"TODO","line":113,"ref":"","text":"Deprecated in 2.0"},{"file":"elements/pfe-jump-links/src/pfe-jump-links-nav.js","tag":"TODO","line":118,"ref":"","text":"Deprecated in 2.0"},{"file":"elements/pfe-jump-links/src/pfe-jump-links-nav.js","tag":"TODO","line":123,"ref":"","text":"Deprecated in 2.0"},{"file":"elements/pfe-jump-links/src/pfe-jump-links-nav.js","tag":"TODO","line":148,"ref":"","text":"deprecating pfe-jump-links-nav--heading slot in 2.0"},{"file":"elements/pfe-jump-links/src/pfe-jump-links-nav.js","tag":"TODO","line":156,"ref":"","text":"deprecating pfe-jump-links-nav--cta slot in 2.0"},{"file":"elements/pfe-jump-links/src/pfe-jump-links-nav.js","tag":"TODO","line":164,"ref":"","text":"deprecating pfe-jump-links-nav--logo slot in 2.0"},{"file":"elements/pfe-jump-links/src/pfe-jump-links-nav.js","tag":"TODO","line":298,"ref":"","text":"It seems like the offset is 0 when non-horizontal jumps links are mobile"},{"file":"elements/pfe-jump-links/src/pfe-jump-links-nav.js","tag":"TODO","line":304,"ref":"","text":"deprecate --pfe-jump-links-panel--offset in 2.0 release"},{"file":"elements/pfe-jump-links/src/pfe-jump-links-nav.js","tag":"TODO","line":436,"ref":"","text":"would be good to set the last item as active if the visible nav is below this one"},{"file":"elements/pfe-jump-links/src/pfe-jump-links-nav.js","tag":"TODO","line":616,"ref":"","text":"should this processing even be happening?"},{"file":"elements/pfe-jump-links/src/pfe-jump-links-nav.js","tag":"TODO","line":629,"ref":"","text":"The next logic only works for scrolling down; need to reverse for scrolling up"},{"file":"elements/pfe-jump-links/src/pfe-jump-links-nav.js","tag":"TODO","line":698,"ref":"","text":"respond to URL change? Ensure anchor link alignment accounts for sticky nav(s)"},{"file":"elements/pfe-jump-links/src/pfe-jump-links-nav.js","tag":"TODO","line":719,"ref":"","text":"respond to URL change? Ensure anchor link alignment accounts for sticky nav(s)"},{"file":"elements/pfe-jump-links/src/pfe-jump-links-nav.js","tag":"TODO","line":764,"ref":"","text":"Do other items in the stack need to be unstuck?"},{"file":"elements/pfe-jump-links/src/pfe-jump-links-nav.js","tag":"TODO","line":903,"ref":"","text":"On page load, if an anchor exists, fire this event"},{"file":"elements/pfe-jump-links/src/pfe-jump-links-nav.js","tag":"TODO","line":1065,"ref":"","text":"Add a keyboard handler when focus is set on the parent via keyboard; should expand"},{"file":"elements/pfe-jump-links/src/pfe-jump-links-panel.js","tag":"TODO","line":50,"ref":"","text":"Deprecated in 1.0"},{"file":"elements/pfe-jump-links/src/pfe-jump-links-panel.js","tag":"TODO","line":55,"ref":"","text":"Deprecated in 1.0"},{"file":"elements/pfe-jump-links/src/pfe-jump-links.js","tag":"TODO","line":6,"ref":"","text":"Migrate pfe-jump-links-nav to pfe-jump-links in 2.0?"},{"file":"elements/pfe-markdown/src/pfe-markdown.js","tag":"TODO","line":64,"ref":"","text":"when we stop supporting IE11, the need to disconnect and"},{"file":"elements/pfe-page-status/src/pfe-page-status.js","tag":"TODO","line":39,"ref":"","text":"Deprecated in 1.0"},{"file":"elements/pfe-primary-detail/src/pfe-primary-detail.js","tag":"TODO","line":13,"ref":"","text":"Add keyboard controls for arrows?"},{"file":"elements/pfe-primary-detail/src/pfe-primary-detail.js","tag":"TODO","line":14,"ref":"","text":"Add functions to open a specific item by index or ID"},{"file":"elements/pfe-progress-indicator/src/pfe-progress-indicator.js","tag":"TODO","line":26,"ref":"","text":"Deprecated in 1.0"},{"file":"elements/pfe-progress-steps/src/pfe-progress-steps-item.js","tag":"TODO","line":160,"ref":"","text":"This needs AT"},{"file":"elements/pfe-progress-steps/src/pfe-progress-steps.js","tag":"TODO","line":102,"ref":"","text":"we have to do it in javascript until everyone supports"},{"file":"elements/pfe-select/src/pfe-select.js","tag":"TODO","line":19,"ref":"","text":"Do we need to rename this to remove the prefix?"},{"file":"elements/pfe-tabs/src/pfe-tab-panel.js","tag":"TODO","line":52,"ref":"","text":"Deprecated in 1.0"},{"file":"elements/pfe-tabs/src/pfe-tab.js","tag":"TODO","line":49,"ref":"","text":"Deprecated in 1.0"},{"file":"elements/pfe-tabs/src/pfe-tabs.js","tag":"TODO","line":104,"ref":"","text":"Deprecated for 1.0"},{"file":"elements/pfe-tabs/src/pfe-tabs.js","tag":"TODO","line":110,"ref":"","text":"Deprecated for 1.0"},{"file":"elements/pfe-tabs/src/pfe-tabs.js","tag":"TODO","line":116,"ref":"","text":"Deprecated for 1.0"},{"file":"elements/pfelement/src/pfelement.js","tag":"TODO","line":38,"ref":"","text":"the reference to _debugLog is for backwards compatibiilty and will be removed in 2.0"},{"file":"elements/pfelement/src/pfelement.js","tag":"TODO","line":60,"ref":"","text":"Add config validation in the future."},{"file":"elements/pfelement/src/pfelement.js","tag":"TODO","line":174,"ref":"","text":"Deprecated with 1.0"},{"file":"elements/pfelement/src/pfelement.js","tag":"TODO","line":404,"ref":"","text":"Deprecated for 1.0 release"},{"file":"elements/pfelement/src/pfelement.js","tag":"TODO","line":407,"ref":"","text":"Migrate this out of schema for 1.0"},{"file":"elements/pfelement/src/pfelement.js","tag":"TODO","line":630,"ref":"","text":"maybe we should use just the attribute instead of the class?"},{"file":"elements/pfelement/src/pfelement.js","tag":"TODO","line":661,"ref":"","text":"--theme will be deprecated in 2.0"},{"file":"elements/pfelement/src/pfelement.js","tag":"TODO","line":946,"ref":"","text":"add support for a validation function"},{"file":"elements/pfelement/src/pfelement.js","tag":"TODO","line":1096,"ref":"","text":"Should this error be reported to the console?"},{"file":"elements/pfelement/src/pfelement.js","tag":"TODO","line":1139,"ref":"","text":"add a warning when a component property conflicts with a global property."}]
diff --git a/elements/pfe-band/README.md b/elements/pfe-band/README.md
index 2c25cc0222..5e1677ed20 100644
--- a/elements/pfe-band/README.md
+++ b/elements/pfe-band/README.md
@@ -87,7 +87,7 @@ The aside settings have defaults and if no attribute is defined on the element's
There are several powerful variables available to hook into and override default styles.
- **Vertical and horizontal padding**: `--pfe-band--Padding--vertical` and `--pfe-band--Padding--horizontal` accept size values such as px, em, rem, etc.
-- **Background color**: Though using the `pfe-color` attribute is strongly recommended when setting the background color for the band, you can also use completely custom colors by updating the `--pfe-band--BackgroundColor` variable. If you update this value manually, you should also update the `--context` context variable to invoke the right context on it and it's child elements. Supported contexts include: `light`, `dark`, and `saturated`.
+- **Background color**: Though using the `color` attribute is strongly recommended when setting the background color for the band, you can also use completely custom colors by updating the `--pfe-band--BackgroundColor` variable. If you update this value manually, you should also update the `--context` context variable to invoke the right context on it and it's child elements. Supported contexts include: `light`, `dark`, and `saturated`.
- **Background position**: This is designed for use with the `pfe-img-src` attribute to allow you to align your background image. Default value is `center center`.
- **Border**: This allows the customization of a border around the entire container and is primarily designed to be used to add a top and/or bottom border line. This variable accepts the entire border shorthand and is set to transparent by default.
- **Layout**: The band has a rudimentary layout system designed to be used inside the slot regions for the header, body, footer, and aside (see `use-grid` attribute details above). The regions themselves are also wrapped in a grid system that supports customization. All layouts appears "stacked" by default. Please note that the fallback for older browsers is a simple stacked layout (the aside position will be aligned using floats). Possible values include: `1fr 1fr`, `repeat(3, 1fr)`, `repeat(auto-fill, minmax(300px, 1fr))`. i.e., `--pfe-band--layout: repeat(auto-fill, minmax(300px, 1fr));`.
diff --git a/elements/pfe-band/src/pfe-band.js b/elements/pfe-band/src/pfe-band.js
index 76a5e98aba..561d4eec75 100644
--- a/elements/pfe-band/src/pfe-band.js
+++ b/elements/pfe-band/src/pfe-band.js
@@ -181,6 +181,8 @@ class PfeBand extends PFElement {
// Update the background image
_imgSrcChanged(oldVal, newVal) {
+ if (oldVal === newVal) return;
+
// Set the image as the background image
this.style.backgroundImage = newVal ? `url('${newVal}')` : ``;
}
diff --git a/elements/pfe-card/README.md b/elements/pfe-card/README.md
index ce39532be5..9ff7ef9502 100644
--- a/elements/pfe-card/README.md
+++ b/elements/pfe-card/README.md
@@ -13,16 +13,16 @@
```
## Slots
-All slots are optional. If the slot is not defined, the content will be added to the `body` region of the card.
+All slots are optional. If the slot is not defined, the content will be added to the `body` region of the card.
### Header
-If this slot is used, we expect a heading level tag (h1, h2, h3, h4, h5, h6). An icon, svg, or use of the icon component are also valid in this region.
+If this slot is used, we expect a heading level tag (h1, h2, h3, h4, h5, h6). An icon, svg, or use of the icon component are also valid in this region.
### Default slot (body)
Any content that is not designated for the `header` or `footer` slot, will go to this slot.
### Footer
-Use this slot for anything that you want to be stuck to the base of the card. This region is bottom-aligned.
+Use this slot for anything that you want to be stuck to the base of the card. This region is bottom-aligned.
## Attributes
@@ -59,10 +59,67 @@ There are several attributes available for customizing the visual treatment of t
## Variables
There are several powerful variables available to hook into and override default styles.
-- **Background color**: Though using the `pfe-color` attribute is strongly recommended when setting the background color for the band, you can also use completely custom colors by updating the `--pfe-band--BackgroundColor` variable. If you update this value manually, you should also update the `--context` context variable to invoke the right context on it and it's child elements. Supported contexts include: `light`, `dark`, and `saturated`.
-- **Background position**: This is designed for use with the `pfe-img-src` attribute to allow you to align your background image. Default value is `center center`. **Variable name:** `--pfe-card--BackgroundPosition`.
-- **Border**: This allows the customization of a border around the entire container. There is a variable for the entire border shorthand (transparent by default) or you can hook into the individual properties. **Variable name:** `--pfe-card--BorderRadius` and `--pfe-card--Border` or `--pfe-card--BorderWeight`, `--pfe-card--BorderStyle`, `--pfe-card--BorderColor`.
-- **Padding**: You can customize the padding around the outside of the card container by connecting to either the shortcut padding variable or just one or more of the individual padding regions. **Variable names:** `--pfe-card--Padding` or `--pfe-card--PaddingTop`, `--pfe-card--PaddingRight`, `--pfe-card--PaddingBottom`, `--pfe-card--PaddingLeft`.
+- **Background color**: Though using the `color` attribute is strongly recommended when setting the background color for the band, you can also use completely custom colors by updating the `--pfe-band--BackgroundColor` variable. If you update this value manually, you should also update the `--context` variable to invoke the right context on it and it's child elements. Supported contexts include: `light`, `dark`, and `saturated`.
+- **Background position**: This is designed for use with the `img-src` attribute to allow you to align your background image. Default value is `center center`.
+- **Border**: This allows the customization of a border around the entire container. There is a variable for the entire border shorthand (transparent by default) or you can hook into the individual properties. There is also a separate `border-top` property which is available to add an emphasis border at the top of the card; typically that would consist of setting the variable as follows: `--pfe-card--BorderTop: 4px solid #ee00`.
+- **Padding**: You can customize the padding around the outside of the card container by connecting to either the shortcut padding variable or just one or more of the individual padding regions. If you add a header slot to the card, note that the `padding-top` value will not be used, but rather, the `spacing--vertical` value; this is to maintain consistent padding around the text inside the card header.
+- **Spacing**: Spacing controls the internal padding for the card. There is a `spacing--vertical` property which controls spacing between regions of the card (header, body, footer) and a `spacing--horizontal` which controls spacing between items in the footer region.
+
+| Variable name | Fallback |
+| --- | --- |
+| **Display properties** |
+| `--pfe-card--AlignSelf` | stretch |
+| `--pfe-card--context` | `var(--pfe-theme--color--surface--base--context, light)` |
+| **Padding/spacing properties** |
+| `--pfe-card--PaddingTop` | `calc(--pfe-theme--container-spacer, 1rem) * 2` |
+| `--pfe-card--PaddingRight` | `calc(--pfe-theme--container-spacer, 1rem) * 2)` |
+| `--pfe-card--PaddingBottom` | `calc(--pfe-theme--container-spacer, 1rem) * 2)` |
+| `--pfe-card--PaddingLeft` | `calc(--pfe-theme--container-spacer, 1rem) * 2)` |
+| `--pfe-card--Padding` | Combination of the top, right, bottom, and left properties above |
+| `--pfe-card--region--spacing` | `var(--pfe-theme--container-spacer, 1rem)` |
+| `--pfe-card--spacing--vertical` | `var(--pfe-theme--content-spacer, 1.5rem)` |
+| `--pfe-card--spacing--horizontal` | `calc(var(--pfe-theme--content-spacer, 1.5rem) / 2)` |
+| **Border properties** |
+| `--pfe-card--BorderRadius` | `var(--pfe-theme--surface--border-radius, 3px)` |
+| `--pfe-card--BorderWidth` | 0 |
+| `--pfe-card--BorderStyle` | solid |
+| `--pfe-card--BorderColor` | var(--pfe-theme--color--surface--border, #d2d2d2) |
+| `--pfe-card--Border` | `--pfe-card--BorderWidth`, `--pfe-card--BorderStyle`, `--pfe-card--BorderColor` |
+| `--pfe-card--BorderTop` | `--pfe-card--Border` |
+| **Background properties** |
+| `--pfe-card--BackgroundColor` | `var(--pfe-theme--surface--base, #f0f0f0)` |
+| `--pfe-card--BackgroundImage` | |
+| `--pfe-card--BackgroundAttachment` | |
+| `--pfe-card--BackgroundPosition` | center center |
+| `--pfe-card--BackgroundRepeat` | |
+| `--pfe-card--BackgroundSize` | |
+| **General properties** |
+| `--pfe-card--TextAlign` | left |
+| **Overlay properties** |
+| `--pfe-card__overlay--BackgroundColor` | `rgba(0, 0, 0, var(--pfe-theme--opacity, 0.09))` |
+| **Header region properties** |
+| `--pfe-card__header--Display` | `flex` |
+| `--pfe-card__header--JustifyContent` | |
+| `--pfe-card__header--BackgroundColor` | `rgba(0, 0, 0, var(--pfe-theme--opacity, 0.09))` |
+| `--pfe-card__header--Color` | `var(--pfe-broadcasted--text, #3c3f42)` |
+| **Body region properties** |
+| `--pfe-card__body--FlexDirection` | column |
+| `--pfe-card__body--FlexWrap` | nowrap |
+| `--pfe-card__body--JustifyContent` | |
+| `--pfe-card__body--AlignItems` | |
+| **Footer region properties** |
+| `--pfe-card__footer--AlignItems` | |
+| `--pfe-card__footer--FlexDirection` | `row` |
+| `--pfe-card__footer--FlexWrap` | `wrap` |
+| `--pfe-card__footer--JustifyContent` | |
+| `--pfe-card__footer--spacing--horizontal` | `var(--pfe-theme--content-spacer, 1.5rem)` |
+
+
+### Usage notes
+
+#### Header region
+* The display property for the header region is very helpful in situations where you need to have the header content present in the DOM but want it visibly hidden from view. You can do that by setting that property to: `--pfe-card__header--Display: none`.
+* If you set the `background-color` of the header region to a color that requires a different context than the rest of the card, please be sure you update the value of the `--pfe-card__header--Color` property to use a font color that works for that `background-color`. There is no `--context` variable for this region at this time.
## Test
@@ -84,4 +141,4 @@ Card (and all PFElements) use [Prettier][prettier] to auto-format JS and JSON. T
[prettier]: https://github.com/prettier/prettier/
[prettier-ed]: https://prettier.io/docs/en/editors.html
-[web-component-tester]: https://github.com/Polymer/web-component-tester
+[web-component-tester]: https://github.com/Polymer/web-component-tester
\ No newline at end of file
diff --git a/elements/pfe-card/demo/demo.css b/elements/pfe-card/demo/demo.css
index d9628b1929..ebc0c6e7e0 100644
--- a/elements/pfe-card/demo/demo.css
+++ b/elements/pfe-card/demo/demo.css
@@ -1,33 +1,52 @@
-/* For demo only */
-.demo-cards {
- display: flex;
- flex-wrap: wrap;
+pfe-band {
+ --pfe-band--Width: auto;
}
-.demo-cards>* {
- margin: 0 16px 32px;
- min-width: 200px;
- width: calc(25% - 32px);
+/* Use this to test updating variables using global scope */
+#custom {
+ --pfe-card--Padding: 25px 15px;
+ --pfe-card--spacing--vertical: 10px;
+ --pfe-card--spacing--horizontal: 10px;
+
+ --pfe-card--BackgroundColor: papayawhip;
+ --context: light;
+}
+
+#custom pfe-card:not([color]) {
+ --pfe-card__header--BackgroundColor: rgb(233, 176, 85);
+}
+
+#custom pfe-cta[priority] {
+ --pfe-cta--Padding: 8px 16px;
+}
+
+#custom #custom-image {
+ --pfe-card--BackgroundImage: url("https://placekitten.com/150/80");
+ --pfe-card--BackgroundPosition: calc(100% - 10px) calc(100% - 10px);
+ --pfe-card--BackgroundRepeat: no-repeat;
+}
+
+#custom #custom-spacing {
+ --pfe-card--spacing--vertical: 20px;
+ --pfe-card--spacing--horizontal: 40px;
}
-.button-series {
- display: inline-block;
- margin-bottom: -15px;
- margin-left: -15px;
+#custom #custom-border {
+ --pfe-card--BorderColor: #151515;
+ --pfe-card--BorderWidth: 2px;
+ --pfe-card--BorderRadius: 20px;
}
-.button-series>* {
- display: inline-block;
- margin-left: 15px;
- margin-bottom: 15px;
+#custom #custom-header {
+ --pfe-card__header--BackgroundColor: #0477a4;
+ --pfe-card__header--Color: #fff;
}
-h2[slot="pfe-card--header"] {
- font-size: 1.1em;
- font-weight: bolder;
+#custom #custom-overlay {
+ --pfe-card__overlay--BackgroundColor: rgba(180, 82, 43, 0.1);
}
-.custom-border {
- --pfe-card--BorderColor: #eee;
- --pfe-card--BorderWeight: 1px;
+.pfe-jump-links-panel__section:not(:first-child) {
+ margin-top: 80px;
+ margin-bottom: 20px;
}
diff --git a/elements/pfe-card/demo/index.html b/elements/pfe-card/demo/index.html
index 41d091b99f..663b8e0d8b 100644
--- a/elements/pfe-card/demo/index.html
+++ b/elements/pfe-card/demo/index.html
@@ -15,8 +15,8 @@
-
+