npm - @ulu/frontend - Versions diffs - 0.1.0-beta.52 → 0.1.0-beta.54 - Mend

@ulu/frontend 0.1.0-beta.52 → 0.1.0-beta.54

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (153) hide show

package/CHANGELOG.md +13 -1
package/dist/ulu-frontend.min.css +1 -1
package/dist/ulu-frontend.min.js +2 -2
package/docs-dev/changelog/index.html +6236 -0
package/docs-dev/demos/accordion/index.html +5392 -0
package/docs-dev/demos/basic-hero/index.html +111 -0
package/docs-dev/demos/breakpoints-manager/index.html +5246 -0
package/docs-dev/demos/button/index.html +5214 -0
package/docs-dev/demos/button-verbose/index.html +5238 -0
package/docs-dev/demos/callout/index.html +5284 -0
package/docs-dev/demos/captioned-figure/index.html +5266 -0
package/docs-dev/demos/card/index.html +5262 -0
package/docs-dev/demos/card-grid/index.html +5357 -0
package/docs-dev/demos/counter-list/index.html +5224 -0
package/docs-dev/demos/css-icons/index.html +5855 -0
package/docs-dev/demos/data-grid/index.html +6109 -0
package/docs-dev/demos/data-table/index.html +5413 -0
package/docs-dev/demos/details-group/index.html +5267 -0
package/docs-dev/demos/file-save/index.html +5255 -0
package/docs-dev/demos/flipcard/index.html +5804 -0
package/docs-dev/demos/form-theme/index.html +5422 -0
package/docs-dev/demos/hero/index.html +309 -0
package/docs-dev/demos/image-grid/index.html +165 -0
package/docs-dev/demos/index.html +5193 -0
package/docs-dev/demos/list-inline/index.html +5220 -0
package/docs-dev/demos/list-lines/index.html +5210 -0
package/docs-dev/demos/menu-stack/index.html +5349 -0
package/docs-dev/demos/modals/index.html +5371 -0
package/docs-dev/demos/nav-strip/index.html +5305 -0
package/docs-dev/demos/overlay-section/index.html +5281 -0
package/docs-dev/demos/popovers/index.html +5453 -0
package/docs-dev/demos/print/index.html +5213 -0
package/docs-dev/demos/pull-quote/index.html +5212 -0
package/docs-dev/demos/rule/index.html +5274 -0
package/docs-dev/demos/scroll-slider/index.html +170 -0
package/docs-dev/demos/scrollpoints/index.html +5231 -0
package/docs-dev/demos/slider/index.html +172 -0
package/docs-dev/demos/spoke-spinner/index.html +5208 -0
package/docs-dev/demos/sticky-list/index.html +5223 -0
package/docs-dev/demos/tabs/index.html +5333 -0
package/docs-dev/demos/tag/index.html +5213 -0
package/docs-dev/demos/theme-toggle/index.html +5279 -0
package/docs-dev/demos/tile-grid-overlay/index.html +390 -0
package/docs-dev/demos/tiles/index.html +5462 -0
package/docs-dev/demos/tooltip/index.html +5241 -0
package/docs-dev/guide/building-stylesheet/index.html +5262 -0
package/docs-dev/guide/developing-ulu-scss-module/index.html +5314 -0
package/docs-dev/guide/index.html +5195 -0
package/docs-dev/index.html +5242 -0
package/docs-dev/javascript/events/index.html +5351 -0
package/docs-dev/javascript/index.html +5208 -0
package/docs-dev/javascript/settings/index.html +5400 -0
package/docs-dev/javascript/ui-breakpoints/index.html +5651 -0
package/docs-dev/javascript/ui-collapsible/index.html +5318 -0
package/docs-dev/javascript/ui-details-group/index.html +5322 -0
package/docs-dev/javascript/ui-dialog/index.html +5367 -0
package/docs-dev/javascript/ui-flipcard/index.html +5258 -0
package/docs-dev/javascript/ui-grid/index.html +5233 -0
package/docs-dev/javascript/ui-modal-builder/index.html +5461 -0
package/docs-dev/javascript/ui-overflow-scroller/index.html +5191 -0
package/docs-dev/javascript/ui-overflow-scroller-pager/index.html +5209 -0
package/docs-dev/javascript/ui-page/index.html +5206 -0
package/docs-dev/javascript/ui-popover/index.html +5241 -0
package/docs-dev/javascript/ui-print/index.html +5250 -0
package/docs-dev/javascript/ui-print-details/index.html +5221 -0
package/docs-dev/javascript/ui-programmatic-modal/index.html +5191 -0
package/docs-dev/javascript/ui-scroll-slider/index.html +5252 -0
package/docs-dev/javascript/ui-scrollpoint/index.html +5431 -0
package/docs-dev/sass/base/color/index.html +5224 -0
package/docs-dev/sass/base/elements/index.html +5395 -0
package/docs-dev/sass/base/index/index.html +5394 -0
package/docs-dev/sass/base/index.html +5202 -0
package/docs-dev/sass/base/keyframes/index.html +5226 -0
package/docs-dev/sass/base/layout/index.html +5386 -0
package/docs-dev/sass/base/normalize/index.html +5234 -0
package/docs-dev/sass/base/print/index.html +5230 -0
package/docs-dev/sass/base/root/index.html +5250 -0
package/docs-dev/sass/base/typography/index.html +5250 -0
package/docs-dev/sass/components/accordion/index.html +5552 -0
package/docs-dev/sass/components/adaptive-spacing/index.html +5495 -0
package/docs-dev/sass/components/badge/index.html +5443 -0
package/docs-dev/sass/components/basic-hero/index.html +5385 -0
package/docs-dev/sass/components/button/index.html +5379 -0
package/docs-dev/sass/components/button-verbose/index.html +5566 -0
package/docs-dev/sass/components/callout/index.html +5541 -0
package/docs-dev/sass/components/captioned-figure/index.html +5484 -0
package/docs-dev/sass/components/card/index.html +5799 -0
package/docs-dev/sass/components/card-grid/index.html +5393 -0
package/docs-dev/sass/components/counter-list/index.html +5458 -0
package/docs-dev/sass/components/css-icon/index.html +5497 -0
package/docs-dev/sass/components/data-grid/index.html +5632 -0
package/docs-dev/sass/components/data-table/index.html +5568 -0
package/docs-dev/sass/components/fill-context/index.html +5259 -0
package/docs-dev/sass/components/flipcard/index.html +5560 -0
package/docs-dev/sass/components/flipcard-grid/index.html +5380 -0
package/docs-dev/sass/components/form-theme/index.html +6105 -0
package/docs-dev/sass/components/hero/index.html +5429 -0
package/docs-dev/sass/components/horizontal-rule/index.html +5378 -0
package/docs-dev/sass/components/image-grid/index.html +5385 -0
package/docs-dev/sass/components/index/index.html +5433 -0
package/docs-dev/sass/components/index.html +5202 -0
package/docs-dev/sass/components/links/index.html +5229 -0
package/docs-dev/sass/components/list-inline/index.html +5399 -0
package/docs-dev/sass/components/list-lines/index.html +5420 -0
package/docs-dev/sass/components/list-ordered/index.html +5225 -0
package/docs-dev/sass/components/list-unordered/index.html +5229 -0
package/docs-dev/sass/components/menu-stack/index.html +5572 -0
package/docs-dev/sass/components/modal/index.html +5613 -0
package/docs-dev/sass/components/nav-strip/index.html +5479 -0
package/docs-dev/sass/components/overlay-section/index.html +5423 -0
package/docs-dev/sass/components/pager/index.html +5541 -0
package/docs-dev/sass/components/placeholder-block/index.html +5463 -0
package/docs-dev/sass/components/popover/index.html +5574 -0
package/docs-dev/sass/components/pull-quote/index.html +5437 -0
package/docs-dev/sass/components/ratio-box/index.html +5383 -0
package/docs-dev/sass/components/rule/index.html +5385 -0
package/docs-dev/sass/components/scroll-slider/index.html +5484 -0
package/docs-dev/sass/components/skip-link/index.html +5369 -0
package/docs-dev/sass/components/slider/index.html +5493 -0
package/docs-dev/sass/components/spoke-spinner/index.html +5443 -0
package/docs-dev/sass/components/sticky-list/index.html +5603 -0
package/docs-dev/sass/components/tabs/index.html +5519 -0
package/docs-dev/sass/components/tag/index.html +5544 -0
package/docs-dev/sass/components/tile-button/index.html +5424 -0
package/docs-dev/sass/components/tile-grid/index.html +5559 -0
package/docs-dev/sass/components/tile-grid-overlay/index.html +5360 -0
package/docs-dev/sass/components/vignette/index.html +5379 -0
package/docs-dev/sass/components/wysiwyg/index.html +5389 -0
package/docs-dev/sass/core/breakpoint/index.html +5996 -0
package/docs-dev/sass/core/button/index.html +6116 -0
package/docs-dev/sass/core/color/index.html +6099 -0
package/docs-dev/sass/core/cssvar/index.html +5991 -0
package/docs-dev/sass/core/element/index.html +6261 -0
package/docs-dev/sass/core/index.html +5189 -0
package/docs-dev/sass/core/layout/index.html +5968 -0
package/docs-dev/sass/core/path/index.html +5358 -0
package/docs-dev/sass/core/selector/index.html +5437 -0
package/docs-dev/sass/core/typography/index.html +6363 -0
package/docs-dev/sass/core/units/index.html +5402 -0
package/docs-dev/sass/core/utils/index.html +7697 -0
package/docs-dev/sass/helpers/color/index.html +5224 -0
package/docs-dev/sass/helpers/display/index.html +5229 -0
package/docs-dev/sass/helpers/index/index.html +5391 -0
package/docs-dev/sass/helpers/index.html +5202 -0
package/docs-dev/sass/helpers/typography/index.html +5252 -0
package/docs-dev/sass/helpers/units/index.html +5398 -0
package/docs-dev/sass/helpers/utilities/index.html +5229 -0
package/docs-dev/sass/index.html +5253 -0
package/js/ui/modal-builder.js +32 -3
package/package.json +1 -1
package/scss/components/_slider.scss +11 -13
package/types/ui/modal-builder.d.ts +85 -0
package/types/ui/modal-builder.d.ts.map +1 -1

package/docs-dev/demos/tile-grid-overlay/index.html CHANGED Viewed

@@ -0,0 +1,390 @@
+<!doctype html>
+<html lang="en" class="fullscreen-layout">
+	<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>
+    Tile Grid Overlay
+  </title>
+  <meta name="description" content="Modular Sass Theming Library">
+  <meta name="generator" content="Eleventy v3.0.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/frontend/assets/favicons/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/frontend/assets/favicons/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/frontend/assets/favicons/favicon-16x16.png">
+  <link rel="manifest" href="/frontend/assets/favicons/site.webmanifest">
+  <link rel="mask-icon" href="/frontend/assets/favicons/safari-pinned-tab.svg" color="#8455bd">
+  <link rel="shortcut icon" href="/frontend/assets/favicons/favicon.ico">
+  <meta name="msapplication-TileColor" content="#603cba">
+  <meta name="msapplication-config" content="/assets/favicons/browserconfig.xml">
+  <meta name="theme-color" content="#ffffff">
+  <link rel="stylesheet" href="/frontend/assets/fonts/inter/inter.css">
+</head>
+	<body class="page theme-light">
+		<header class="page__header header">
+  <div class="header__main">
+    <a class="header__logo" href="/frontend/">
+      <div class="logo">
+  <span class="logo__main">Ulu</span>
+  <span class="logo__subtitle">Frontend</span>
+</div>
+    </a>
+    <button class="button button--small button--icon button--secondary margin-left-auto" data-ulu-theme-toggle='{
+        "savePreference" : true,
+        "checkMediaQuery" : true,
+        "group" : "page"
+      }'>
+      <span class="hidden-visually">Toggle Theme to <span data-ulu-theme-toggle-label="">Dark</span></span>
+      <span class="fas fa-moon" data-ulu-theme-toggle-icon=""></span>
+    </button>
+    <a class="button button--small button--icon button--secondary" href="../" aria-label="Exit">
+      <span class="css-icon css-icon--close" aria-hidden="true"></span>
+    </a>
+  </div>
+</header>
+		<main id="main" class="page__body">
+  <div class="page__content-header">
+    <div class="container">
+      <div class="type-max-width">
+        <h1 class="page__title h1">Tile Grid Overlay</h1>
+          <div class="rule rule--short rule--accent"></div>
+          <p class="type-large type-light">
+            Tile grid with image overlay. Component that uses popover, tile-grid, tile-button and fill-context along with styles of it&#39;s own
+          </p>
+      </div>
+    </div>
+  </div>
+<div class="container">
+  <h2 class="h2">Default Example</h2>
+  <div class="tile-grid-overlay">
+    <div class="tile-grid-overlay__background-image fill-context fill-context--auto no-print">
+      <img src="/frontend/assets/placeholder/image-1.jpg" width="1024" height="683" loading="lazy">
+    </div>
+    <ul class="tile-grid tile-grid--no-gap tile-grid--static tile-grid-overlay__grid">
+<li class="tile-grid__item tile-grid-overlay__item">
+  <button class="tile-button tile-grid-overlay__button theme-dark" type="button" data-ulu-popover-trigger='{
+      "floating" : { "placement" : "bottom-end" }
+    }'>
+    <strong class="tile-button__row" data-ulu-popover-trigger-anchor="">Just Another Item</strong>
+    <span class="tile-button__row no-print">
+      <span class="fas fa-plus" aria-hidden="true"></span>
+    </span>
+  </button>
+  <div class="popover theme-light popover--large" data-ulu-popover-content="">
+    <div class="popover__inner">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius finibus dignissim. Aenean
+        ullamcorper sodales auctor. Aenean consectetur dignissim lacus, nec sodales nibh sodales nec. Sed vulputate
+        euismod orci, ut tristique ligula elementum id. Aenean pellentesque lorem at augue fringilla, vitae dapibus
+        nulla semper. Nam facilisis eleifend dui, ac dictum mauris maximus id.
+      </p>
+    </div>
+    <span class="popover__arrow" data-ulu-popover-arrow=""></span>
+  </div>
+</li>
+<li class="tile-grid__item tile-grid-overlay__item">
+  <button class="tile-button tile-grid-overlay__button theme-dark" type="button" data-ulu-popover-trigger='{
+      "floating" : { "placement" : "bottom-end" }
+    }'>
+    <strong class="tile-button__row" data-ulu-popover-trigger-anchor="">Item With an Image</strong>
+    <span class="tile-button__row no-print">
+      <span class="fas fa-plus" aria-hidden="true"></span>
+    </span>
+  </button>
+  <div class="popover theme-light popover--large" data-ulu-popover-content="">
+    <div class="popover__header popover__header--media">
+      <img src="/frontend/assets/placeholder/image-1.jpg" width="975" height="557" loading="lazy">
+    </div>
+    <div class="popover__inner">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius finibus dignissim. Aenean
+        ullamcorper sodales auctor. Aenean consectetur dignissim lacus, nec sodales nibh sodales nec. Sed vulputate
+        euismod orci, ut tristique ligula elementum id. Aenean pellentesque lorem at augue fringilla, vitae dapibus
+        nulla semper. Nam facilisis eleifend dui, ac dictum mauris maximus id.
+      </p>
+    </div>
+    <span class="popover__arrow" data-ulu-popover-arrow=""></span>
+  </div>
+</li>
+<li class="tile-grid__item tile-grid-overlay__item">
+  <button class="tile-button tile-grid-overlay__button theme-dark" type="button" data-ulu-popover-trigger='{
+      "floating" : { "placement" : "bottom-end" }
+    }'>
+    <strong class="tile-button__row" data-ulu-popover-trigger-anchor="">Just Another Item</strong>
+    <span class="tile-button__row no-print">
+      <span class="fas fa-plus" aria-hidden="true"></span>
+    </span>
+  </button>
+  <div class="popover theme-light popover--large" data-ulu-popover-content="">
+    <div class="popover__inner">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius finibus dignissim. Aenean
+        ullamcorper sodales auctor. Aenean consectetur dignissim lacus, nec sodales nibh sodales nec. Sed vulputate
+        euismod orci, ut tristique ligula elementum id. Aenean pellentesque lorem at augue fringilla, vitae dapibus
+        nulla semper. Nam facilisis eleifend dui, ac dictum mauris maximus id.
+      </p>
+    </div>
+    <span class="popover__arrow" data-ulu-popover-arrow=""></span>
+  </div>
+</li>
+<li class="tile-grid__item tile-grid-overlay__item">
+  <button class="tile-button tile-grid-overlay__button theme-dark" type="button" data-ulu-popover-trigger='{
+      "floating" : { "placement" : "bottom-end" }
+    }'>
+    <strong class="tile-button__row" data-ulu-popover-trigger-anchor="">Just Another Item</strong>
+    <span class="tile-button__row no-print">
+      <span class="fas fa-plus" aria-hidden="true"></span>
+    </span>
+  </button>
+  <div class="popover theme-light popover--large" data-ulu-popover-content="">
+    <div class="popover__inner">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius finibus dignissim. Aenean
+        ullamcorper sodales auctor. Aenean consectetur dignissim lacus, nec sodales nibh sodales nec. Sed vulputate
+        euismod orci, ut tristique ligula elementum id. Aenean pellentesque lorem at augue fringilla, vitae dapibus
+        nulla semper. Nam facilisis eleifend dui, ac dictum mauris maximus id.
+      </p>
+    </div>
+    <span class="popover__arrow" data-ulu-popover-arrow=""></span>
+  </div>
+</li>
+<li class="tile-grid__item tile-grid-overlay__item">
+  <button class="tile-button tile-grid-overlay__button theme-dark" type="button" data-ulu-popover-trigger='{
+      "floating" : { "placement" : "bottom-end" }
+    }'>
+    <strong class="tile-button__row" data-ulu-popover-trigger-anchor="">Just Another Item</strong>
+    <span class="tile-button__row no-print">
+      <span class="fas fa-plus" aria-hidden="true"></span>
+    </span>
+  </button>
+  <div class="popover theme-light popover--large" data-ulu-popover-content="">
+    <div class="popover__inner">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius finibus dignissim. Aenean
+        ullamcorper sodales auctor. Aenean consectetur dignissim lacus, nec sodales nibh sodales nec. Sed vulputate
+        euismod orci, ut tristique ligula elementum id. Aenean pellentesque lorem at augue fringilla, vitae dapibus
+        nulla semper. Nam facilisis eleifend dui, ac dictum mauris maximus id.
+      </p>
+    </div>
+    <span class="popover__arrow" data-ulu-popover-arrow=""></span>
+  </div>
+</li>
+<li class="tile-grid__item tile-grid-overlay__item">
+  <button class="tile-button tile-grid-overlay__button theme-dark" type="button" data-ulu-popover-trigger='{
+      "floating" : { "placement" : "bottom-end" }
+    }'>
+    <strong class="tile-button__row" data-ulu-popover-trigger-anchor="">Just Another Item</strong>
+    <span class="tile-button__row no-print">
+      <span class="fas fa-plus" aria-hidden="true"></span>
+    </span>
+  </button>
+  <div class="popover theme-light popover--large" data-ulu-popover-content="">
+    <div class="popover__inner">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius finibus dignissim. Aenean
+        ullamcorper sodales auctor. Aenean consectetur dignissim lacus, nec sodales nibh sodales nec. Sed vulputate
+        euismod orci, ut tristique ligula elementum id. Aenean pellentesque lorem at augue fringilla, vitae dapibus
+        nulla semper. Nam facilisis eleifend dui, ac dictum mauris maximus id.
+      </p>
+    </div>
+    <span class="popover__arrow" data-ulu-popover-arrow=""></span>
+  </div>
+</li>
+    </ul>
+  </div>
+</div>
+<div class="container">
+  <h2 class="h2">Wide Example</h2>
+  <p>Note: This needs to match up with the tile grids.</p>
+  <div class="tile-grid-overlay">
+    <div class="tile-grid-overlay__background-image fill-context fill-context--auto no-print">
+      <img src="/frontend/assets/placeholder/image-1.jpg" width="1024" height="683" loading="lazy">
+    </div>
+    <ul class="tile-grid tile-grid--no-gap tile-grid--static-wide tile-grid-overlay__grid tile-grid-overlay__grid--wide">
+<li class="tile-grid__item tile-grid-overlay__item">
+  <button class="tile-button tile-grid-overlay__button theme-dark" type="button" data-ulu-popover-trigger='{
+      "floating" : { "placement" : "bottom-end" }
+    }'>
+    <strong class="tile-button__row" data-ulu-popover-trigger-anchor="">Just Another Item</strong>
+    <span class="tile-button__row no-print">
+      <span class="fas fa-plus" aria-hidden="true"></span>
+    </span>
+  </button>
+  <div class="popover theme-light popover--large" data-ulu-popover-content="">
+    <div class="popover__inner">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius finibus dignissim. Aenean
+        ullamcorper sodales auctor. Aenean consectetur dignissim lacus, nec sodales nibh sodales nec. Sed vulputate
+        euismod orci, ut tristique ligula elementum id. Aenean pellentesque lorem at augue fringilla, vitae dapibus
+        nulla semper. Nam facilisis eleifend dui, ac dictum mauris maximus id.
+      </p>
+    </div>
+    <span class="popover__arrow" data-ulu-popover-arrow=""></span>
+  </div>
+</li>
+<li class="tile-grid__item tile-grid-overlay__item">
+  <button class="tile-button tile-grid-overlay__button theme-dark" type="button" data-ulu-popover-trigger='{
+      "floating" : { "placement" : "bottom-end" }
+    }'>
+    <strong class="tile-button__row" data-ulu-popover-trigger-anchor="">Item With an Image</strong>
+    <span class="tile-button__row no-print">
+      <span class="fas fa-plus" aria-hidden="true"></span>
+    </span>
+  </button>
+  <div class="popover theme-light popover--large" data-ulu-popover-content="">
+    <div class="popover__header popover__header--media">
+      <img src="/frontend/assets/placeholder/image-1.jpg" width="975" height="557" loading="lazy">
+    </div>
+    <div class="popover__inner">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius finibus dignissim. Aenean
+        ullamcorper sodales auctor. Aenean consectetur dignissim lacus, nec sodales nibh sodales nec. Sed vulputate
+        euismod orci, ut tristique ligula elementum id. Aenean pellentesque lorem at augue fringilla, vitae dapibus
+        nulla semper. Nam facilisis eleifend dui, ac dictum mauris maximus id.
+      </p>
+    </div>
+    <span class="popover__arrow" data-ulu-popover-arrow=""></span>
+  </div>
+</li>
+<li class="tile-grid__item tile-grid-overlay__item">
+  <button class="tile-button tile-grid-overlay__button theme-dark" type="button" data-ulu-popover-trigger='{
+      "floating" : { "placement" : "bottom-end" }
+    }'>
+    <strong class="tile-button__row" data-ulu-popover-trigger-anchor="">Just Another Item</strong>
+    <span class="tile-button__row no-print">
+      <span class="fas fa-plus" aria-hidden="true"></span>
+    </span>
+  </button>
+  <div class="popover theme-light popover--large" data-ulu-popover-content="">
+    <div class="popover__inner">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius finibus dignissim. Aenean
+        ullamcorper sodales auctor. Aenean consectetur dignissim lacus, nec sodales nibh sodales nec. Sed vulputate
+        euismod orci, ut tristique ligula elementum id. Aenean pellentesque lorem at augue fringilla, vitae dapibus
+        nulla semper. Nam facilisis eleifend dui, ac dictum mauris maximus id.
+      </p>
+    </div>
+    <span class="popover__arrow" data-ulu-popover-arrow=""></span>
+  </div>
+</li>
+<li class="tile-grid__item tile-grid-overlay__item">
+  <button class="tile-button tile-grid-overlay__button theme-dark" type="button" data-ulu-popover-trigger='{
+      "floating" : { "placement" : "bottom-end" }
+    }'>
+    <strong class="tile-button__row" data-ulu-popover-trigger-anchor="">Just Another Item</strong>
+    <span class="tile-button__row no-print">
+      <span class="fas fa-plus" aria-hidden="true"></span>
+    </span>
+  </button>
+  <div class="popover theme-light popover--large" data-ulu-popover-content="">
+    <div class="popover__inner">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius finibus dignissim. Aenean
+        ullamcorper sodales auctor. Aenean consectetur dignissim lacus, nec sodales nibh sodales nec. Sed vulputate
+        euismod orci, ut tristique ligula elementum id. Aenean pellentesque lorem at augue fringilla, vitae dapibus
+        nulla semper. Nam facilisis eleifend dui, ac dictum mauris maximus id.
+      </p>
+    </div>
+    <span class="popover__arrow" data-ulu-popover-arrow=""></span>
+  </div>
+</li>
+<li class="tile-grid__item tile-grid-overlay__item">
+  <button class="tile-button tile-grid-overlay__button theme-dark" type="button" data-ulu-popover-trigger='{
+      "floating" : { "placement" : "bottom-end" }
+    }'>
+    <strong class="tile-button__row" data-ulu-popover-trigger-anchor="">Just Another Item</strong>
+    <span class="tile-button__row no-print">
+      <span class="fas fa-plus" aria-hidden="true"></span>
+    </span>
+  </button>
+  <div class="popover theme-light popover--large" data-ulu-popover-content="">
+    <div class="popover__inner">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius finibus dignissim. Aenean
+        ullamcorper sodales auctor. Aenean consectetur dignissim lacus, nec sodales nibh sodales nec. Sed vulputate
+        euismod orci, ut tristique ligula elementum id. Aenean pellentesque lorem at augue fringilla, vitae dapibus
+        nulla semper. Nam facilisis eleifend dui, ac dictum mauris maximus id.
+      </p>
+    </div>
+    <span class="popover__arrow" data-ulu-popover-arrow=""></span>
+  </div>
+</li>
+<li class="tile-grid__item tile-grid-overlay__item">
+  <button class="tile-button tile-grid-overlay__button theme-dark" type="button" data-ulu-popover-trigger='{
+      "floating" : { "placement" : "bottom-end" }
+    }'>
+    <strong class="tile-button__row" data-ulu-popover-trigger-anchor="">Just Another Item</strong>
+    <span class="tile-button__row no-print">
+      <span class="fas fa-plus" aria-hidden="true"></span>
+    </span>
+  </button>
+  <div class="popover theme-light popover--large" data-ulu-popover-content="">
+    <div class="popover__inner">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius finibus dignissim. Aenean
+        ullamcorper sodales auctor. Aenean consectetur dignissim lacus, nec sodales nibh sodales nec. Sed vulputate
+        euismod orci, ut tristique ligula elementum id. Aenean pellentesque lorem at augue fringilla, vitae dapibus
+        nulla semper. Nam facilisis eleifend dui, ac dictum mauris maximus id.
+      </p>
+    </div>
+    <span class="popover__arrow" data-ulu-popover-arrow=""></span>
+  </div>
+</li>
+    </ul>
+  </div>
+</div>
+		</main>
+		<footer></footer>
+  <script src="http://localhost:5173/@vite/client" type="module"></script>
+  <script src="http://localhost:5173/docs-src/src/main.js" type="module"></script>
+	</body>
+</html>