npm - @ulu/frontend - Versions diffs - 0.1.0-beta.31 → 0.1.0-beta.33 - Mend

@ulu/frontend 0.1.0-beta.31 → 0.1.0-beta.33

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 (174) hide show

package/CHANGELOG.md +32 -0
package/dist/ulu-frontend.min.css +1 -1
package/dist/ulu-frontend.min.js +11 -11
package/docs-dev/changelog/index.html +90 -10
package/docs-dev/demos/accordion/index.html +8 -8
package/docs-dev/demos/button/index.html +8 -8
package/docs-dev/demos/button-verbose/index.html +8 -8
package/docs-dev/demos/callout/index.html +26 -8
package/docs-dev/demos/captioned-figure/index.html +8 -8
package/docs-dev/demos/card/index.html +29 -33
package/docs-dev/demos/card-grid/index.html +12 -12
package/docs-dev/demos/css-icons/index.html +8 -8
package/docs-dev/demos/data-grid/index.html +8 -8
package/docs-dev/demos/data-table/index.html +33 -33
package/docs-dev/demos/details-group/index.html +8 -8
package/docs-dev/demos/file-save/index.html +8 -8
package/docs-dev/demos/flipcard/index.html +8 -8
package/docs-dev/demos/form-theme/index.html +8 -8
package/docs-dev/demos/index.html +8 -8
package/docs-dev/demos/list-inline/index.html +8 -8
package/docs-dev/demos/list-lines/index.html +8 -8
package/docs-dev/demos/menu-stack/index.html +8 -8
package/docs-dev/demos/modals/index.html +8 -8
package/docs-dev/demos/nav-strip/index.html +8 -8
package/docs-dev/demos/overlay-section/index.html +8 -8
package/docs-dev/demos/popovers/index.html +8 -8
package/docs-dev/demos/print/index.html +8 -8
package/docs-dev/demos/pull-quote/index.html +8 -8
package/docs-dev/demos/rule/index.html +8 -8
package/docs-dev/demos/scrollpoints/index.html +8 -8
package/docs-dev/demos/spoke-spinner/index.html +8 -8
package/docs-dev/demos/sticky-list/index.html +8 -8
package/docs-dev/demos/tabs/index.html +8 -8
package/docs-dev/demos/tag/index.html +8 -8
package/docs-dev/demos/theme-toggle/index.html +8 -8
package/docs-dev/demos/tiles/index.html +8 -8
package/docs-dev/demos/tooltip/index.html +8 -8
package/docs-dev/guide/building-stylesheet/index.html +8 -8
package/docs-dev/guide/developing-ulu-scss-module/index.html +8 -8
package/docs-dev/guide/index.html +8 -8
package/docs-dev/index.html +8 -8
package/docs-dev/javascript/events/index.html +8 -8
package/docs-dev/javascript/index.html +8 -8
package/docs-dev/javascript/settings/index.html +8 -8
package/docs-dev/javascript/ui-breakpoints/index.html +8 -8
package/docs-dev/javascript/ui-collapsible/index.html +8 -8
package/docs-dev/javascript/ui-details-group/index.html +8 -8
package/docs-dev/javascript/ui-dialog/index.html +8 -8
package/docs-dev/javascript/ui-flipcard/index.html +8 -8
package/docs-dev/javascript/ui-grid/index.html +8 -8
package/docs-dev/javascript/ui-modal-builder/index.html +8 -8
package/docs-dev/javascript/ui-overflow-scroller/index.html +8 -8
package/docs-dev/javascript/ui-overflow-scroller-pager/index.html +8 -8
package/docs-dev/javascript/ui-page/index.html +8 -8
package/docs-dev/javascript/ui-popover/index.html +8 -8
package/docs-dev/javascript/ui-print/index.html +8 -8
package/docs-dev/javascript/ui-print-details/index.html +8 -8
package/docs-dev/javascript/ui-programmatic-modal/index.html +8 -8
package/docs-dev/javascript/ui-proxy-click/index.html +8 -8
package/docs-dev/javascript/ui-resizer/index.html +8 -8
package/docs-dev/javascript/ui-scroll-slider/index.html +8 -8
package/docs-dev/javascript/ui-scrollpoint/index.html +8 -8
package/docs-dev/javascript/ui-slider/index.html +8 -8
package/docs-dev/javascript/ui-tabs/index.html +8 -8
package/docs-dev/javascript/ui-theme-toggle/index.html +8 -8
package/docs-dev/javascript/ui-tooltip/index.html +8 -8
package/docs-dev/javascript/utils-class-logger/index.html +8 -8
package/docs-dev/javascript/utils-dom/index.html +8 -8
package/docs-dev/javascript/utils-file-save/index.html +8 -8
package/docs-dev/javascript/utils-floating-ui/index.html +8 -8
package/docs-dev/javascript/utils-id/index.html +8 -8
package/docs-dev/javascript/utils-pause-youtube-video/index.html +8 -8
package/docs-dev/sass/base/color/index.html +8 -8
package/docs-dev/sass/base/elements/index.html +8 -8
package/docs-dev/sass/base/index/index.html +8 -8
package/docs-dev/sass/base/index.html +8 -8
package/docs-dev/sass/base/keyframes/index.html +8 -8
package/docs-dev/sass/base/layout/index.html +8 -8
package/docs-dev/sass/base/normalize/index.html +8 -8
package/docs-dev/sass/base/print/index.html +8 -8
package/docs-dev/sass/base/root/index.html +8 -8
package/docs-dev/sass/base/typography/index.html +8 -8
package/docs-dev/sass/components/accordion/index.html +8 -8
package/docs-dev/sass/components/adaptive-spacing/index.html +8 -8
package/docs-dev/sass/components/badge/index.html +8 -8
package/docs-dev/sass/components/basic-hero/index.html +8 -8
package/docs-dev/sass/components/button/index.html +8 -8
package/docs-dev/sass/components/button-verbose/index.html +46 -34
package/docs-dev/sass/components/callout/index.html +94 -35
package/docs-dev/sass/components/captioned-figure/index.html +8 -8
package/docs-dev/sass/components/card/index.html +18 -18
package/docs-dev/sass/components/card-grid/index.html +8 -8
package/docs-dev/sass/components/css-icon/index.html +8 -8
package/docs-dev/sass/components/data-grid/index.html +8 -8
package/docs-dev/sass/components/data-table/index.html +8 -8
package/docs-dev/sass/components/fill-context/index.html +8 -8
package/docs-dev/sass/components/flipcard/index.html +8 -8
package/docs-dev/sass/components/flipcard-grid/index.html +8 -8
package/docs-dev/sass/components/form-theme/index.html +8 -8
package/docs-dev/sass/components/hero/index.html +16 -16
package/docs-dev/sass/components/horizontal-rule/index.html +8 -8
package/docs-dev/sass/components/image-grid/index.html +8 -8
package/docs-dev/sass/components/index/index.html +8 -8
package/docs-dev/sass/components/index.html +8 -8
package/docs-dev/sass/components/links/index.html +8 -8
package/docs-dev/sass/components/list-inline/index.html +8 -8
package/docs-dev/sass/components/list-lines/index.html +8 -8
package/docs-dev/sass/components/list-ordered/index.html +8 -8
package/docs-dev/sass/components/list-unordered/index.html +8 -8
package/docs-dev/sass/components/menu-stack/index.html +8 -8
package/docs-dev/sass/components/modal/index.html +8 -8
package/docs-dev/sass/components/nav-strip/index.html +8 -8
package/docs-dev/sass/components/overlay-section/index.html +16 -16
package/docs-dev/sass/components/pager/index.html +8 -8
package/docs-dev/sass/components/placeholder-block/index.html +8 -8
package/docs-dev/sass/components/popover/index.html +8 -8
package/docs-dev/sass/components/pull-quote/index.html +8 -8
package/docs-dev/sass/components/ratio-box/index.html +16 -16
package/docs-dev/sass/components/rule/index.html +8 -8
package/docs-dev/sass/components/scroll-slider/index.html +8 -8
package/docs-dev/sass/components/skip-link/index.html +8 -8
package/docs-dev/sass/components/slider/index.html +8 -8
package/docs-dev/sass/components/spoke-spinner/index.html +10 -10
package/docs-dev/sass/components/sticky-list/index.html +8 -8
package/docs-dev/sass/components/tabs/index.html +8 -8
package/docs-dev/sass/components/tag/index.html +10 -10
package/docs-dev/sass/components/tile-button/index.html +8 -8
package/docs-dev/sass/components/tile-grid/index.html +8 -8
package/docs-dev/sass/components/tile-grid-overlay/index.html +8 -8
package/docs-dev/sass/components/vignette/index.html +16 -16
package/docs-dev/sass/components/wysiwyg/index.html +8 -8
package/docs-dev/sass/core/breakpoint/index.html +8 -8
package/docs-dev/sass/core/button/index.html +8 -8
package/docs-dev/sass/core/color/index.html +8 -8
package/docs-dev/sass/core/cssvar/index.html +8 -8
package/docs-dev/sass/core/element/index.html +188 -47
package/docs-dev/sass/core/index.html +8 -8
package/docs-dev/sass/core/layout/index.html +64 -45
package/docs-dev/sass/core/path/index.html +8 -8
package/docs-dev/sass/core/selector/index.html +8 -8
package/docs-dev/sass/core/typography/index.html +8 -8
package/docs-dev/sass/core/units/index.html +8 -8
package/docs-dev/sass/core/utils/index.html +272 -68
package/docs-dev/sass/helpers/color/index.html +8 -8
package/docs-dev/sass/helpers/display/index.html +8 -8
package/docs-dev/sass/helpers/index/index.html +8 -8
package/docs-dev/sass/helpers/index.html +8 -8
package/docs-dev/sass/helpers/print/index.html +8 -8
package/docs-dev/sass/helpers/typography/index.html +8 -8
package/docs-dev/sass/helpers/units/index.html +8 -8
package/docs-dev/sass/helpers/utilities/index.html +8 -8
package/docs-dev/sass/index.html +8 -8
package/js/ui/tooltip.js +2 -1
package/package.json +1 -1
package/scss/_breakpoint.scss +1 -1
package/scss/_element.scss +91 -0
package/scss/_layout.scss +6 -4
package/scss/_utils.scss +42 -0
package/scss/components/_button-verbose.scss +43 -32
package/scss/components/_callout.scss +112 -53
package/scss/components/_card.scss +7 -22
package/scss/components/_css-icon.scss +17 -17
package/scss/components/_data-grid.scss +2 -2
package/scss/components/_flipcard.scss +1 -1
package/scss/components/_form-theme.scss +12 -12
package/scss/components/_hero.scss +3 -10
package/scss/components/_overlay-section.scss +2 -5
package/scss/components/_popover.scss +11 -11
package/scss/components/_pull-quote.scss +1 -1
package/scss/components/_ratio-box.scss +2 -5
package/scss/components/_scroll-slider.scss +1 -1
package/scss/components/_spoke-spinner.scss +2 -2
package/scss/components/_vignette.scss +2 -5
package/types/ui/tooltip.d.ts.map +1 -1

package/docs-dev/sass/base/root/index.html CHANGED Viewed

@@ -243,11 +243,11 @@
         <li class="nav-tree__item  ">
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
     <span class="nav-tree__text">
-      Card Grid
+      Card
     </span>
         </a>
@@ -258,11 +258,11 @@
         <li class="nav-tree__item  ">
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
     <span class="nav-tree__text">
-      Card New
+      Card Grid
     </span>
         </a>
@@ -2729,11 +2729,11 @@
         <li class="nav-tree__item  ">
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
     <span class="nav-tree__text">
-      Card Grid
+      Card
     </span>
         </a>
@@ -2744,11 +2744,11 @@
         <li class="nav-tree__item  ">
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
     <span class="nav-tree__text">
-      Card New
+      Card Grid
     </span>
         </a>

package/docs-dev/sass/base/typography/index.html CHANGED Viewed

@@ -243,11 +243,11 @@
         <li class="nav-tree__item  ">
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
     <span class="nav-tree__text">
-      Card Grid
+      Card
     </span>
         </a>
@@ -258,11 +258,11 @@
         <li class="nav-tree__item  ">
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
     <span class="nav-tree__text">
-      Card New
+      Card Grid
     </span>
         </a>
@@ -2729,11 +2729,11 @@
         <li class="nav-tree__item  ">
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
     <span class="nav-tree__text">
-      Card Grid
+      Card
     </span>
         </a>
@@ -2744,11 +2744,11 @@
         <li class="nav-tree__item  ">
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
     <span class="nav-tree__text">
-      Card New
+      Card Grid
     </span>
         </a>

package/docs-dev/sass/components/accordion/index.html CHANGED Viewed

@@ -243,11 +243,11 @@
         <li class="nav-tree__item  ">
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
     <span class="nav-tree__text">
-      Card Grid
+      Card
     </span>
         </a>
@@ -258,11 +258,11 @@
         <li class="nav-tree__item  ">
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
     <span class="nav-tree__text">
-      Card New
+      Card Grid
     </span>
         </a>
@@ -2729,11 +2729,11 @@
         <li class="nav-tree__item  ">
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
     <span class="nav-tree__text">
-      Card Grid
+      Card
     </span>
         </a>
@@ -2744,11 +2744,11 @@
         <li class="nav-tree__item  ">
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
     <span class="nav-tree__text">
-      Card New
+      Card Grid
     </span>
         </a>

package/docs-dev/sass/components/adaptive-spacing/index.html CHANGED Viewed

@@ -243,11 +243,11 @@
         <li class="nav-tree__item  ">
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
     <span class="nav-tree__text">
-      Card Grid
+      Card
     </span>
         </a>
@@ -258,11 +258,11 @@
         <li class="nav-tree__item  ">
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
     <span class="nav-tree__text">
-      Card New
+      Card Grid
     </span>
         </a>
@@ -2729,11 +2729,11 @@
         <li class="nav-tree__item  ">
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
     <span class="nav-tree__text">
-      Card Grid
+      Card
     </span>
         </a>
@@ -2744,11 +2744,11 @@
         <li class="nav-tree__item  ">
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
     <span class="nav-tree__text">
-      Card New
+      Card Grid
     </span>
         </a>

package/docs-dev/sass/components/badge/index.html CHANGED Viewed

@@ -243,11 +243,11 @@
         <li class="nav-tree__item  ">
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
     <span class="nav-tree__text">
-      Card Grid
+      Card
     </span>
         </a>
@@ -258,11 +258,11 @@
         <li class="nav-tree__item  ">
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
     <span class="nav-tree__text">
-      Card New
+      Card Grid
     </span>
         </a>
@@ -2729,11 +2729,11 @@
         <li class="nav-tree__item  ">
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
     <span class="nav-tree__text">
-      Card Grid
+      Card
     </span>
         </a>
@@ -2744,11 +2744,11 @@
         <li class="nav-tree__item  ">
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
     <span class="nav-tree__text">
-      Card New
+      Card Grid
     </span>
         </a>

package/docs-dev/sass/components/basic-hero/index.html CHANGED Viewed

@@ -243,11 +243,11 @@
         <li class="nav-tree__item  ">
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
     <span class="nav-tree__text">
-      Card Grid
+      Card
     </span>
         </a>
@@ -258,11 +258,11 @@
         <li class="nav-tree__item  ">
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
     <span class="nav-tree__text">
-      Card New
+      Card Grid
     </span>
         </a>
@@ -2729,11 +2729,11 @@
         <li class="nav-tree__item  ">
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
     <span class="nav-tree__text">
-      Card Grid
+      Card
     </span>
         </a>
@@ -2744,11 +2744,11 @@
         <li class="nav-tree__item  ">
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
     <span class="nav-tree__text">
-      Card New
+      Card Grid
     </span>
         </a>

package/docs-dev/sass/components/button/index.html CHANGED Viewed

@@ -243,11 +243,11 @@
         <li class="nav-tree__item  ">
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
     <span class="nav-tree__text">
-      Card Grid
+      Card
     </span>
         </a>
@@ -258,11 +258,11 @@
         <li class="nav-tree__item  ">
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
     <span class="nav-tree__text">
-      Card New
+      Card Grid
     </span>
         </a>
@@ -2729,11 +2729,11 @@
         <li class="nav-tree__item  ">
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
     <span class="nav-tree__text">
-      Card Grid
+      Card
     </span>
         </a>
@@ -2744,11 +2744,11 @@
         <li class="nav-tree__item  ">
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
     <span class="nav-tree__text">
-      Card New
+      Card Grid
     </span>
         </a>

package/docs-dev/sass/components/button-verbose/index.html CHANGED Viewed

@@ -243,11 +243,11 @@
         <li class="nav-tree__item  ">
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
     <span class="nav-tree__text">
-      Card Grid
+      Card
     </span>
         </a>
@@ -258,11 +258,11 @@
         <li class="nav-tree__item  ">
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
     <span class="nav-tree__text">
-      Card New
+      Card Grid
     </span>
         </a>
@@ -2729,11 +2729,11 @@
         <li class="nav-tree__item  ">
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
     <span class="nav-tree__text">
-      Card Grid
+      Card
     </span>
         </a>
@@ -2744,11 +2744,11 @@
         <li class="nav-tree__item  ">
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
     <span class="nav-tree__text">
-      Card New
+      Card Grid
     </span>
         </a>
@@ -5101,7 +5101,7 @@
 <pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$config</span></span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
   <span class="pjs-token pjs-string">"background-color"</span> <span class="pjs-token pjs-punctuation">:</span> white<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"background-color-hover"</span> <span class="pjs-token pjs-punctuation">:</span> #F7F8F7<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"border-radius"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"border-radius"</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"border-radius"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">true</span><span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"box-shadow"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">true</span><span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"box-shadow-hover"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">true</span><span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"color"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"type"</span><span class="pjs-token pjs-punctuation">,</span>
@@ -5113,15 +5113,21 @@
   <span class="pjs-token pjs-string">"margin"</span> <span class="pjs-token pjs-punctuation">:</span> 1em<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"margin-inline"</span> <span class="pjs-token pjs-punctuation">:</span> 0.75em<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"min-width"</span><span class="pjs-token pjs-punctuation">:</span> 20rem<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"padding-x"</span><span class="pjs-token pjs-punctuation">:</span> 0.65em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"padding-x"</span><span class="pjs-token pjs-punctuation">:</span> 0.75em<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"padding-y"</span><span class="pjs-token pjs-punctuation">:</span> 1em<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"title-color"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"link"</span><span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"title-margin"</span> <span class="pjs-token pjs-punctuation">:</span> 0.5em<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"title-color-hover"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"link-hover"</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"left-cap"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">false</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"left-cap-color"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"link"</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"left-cap-color-hover"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"link-hover"</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"left-cap-width"</span> <span class="pjs-token pjs-punctuation">:</span> 0.5rem
+  <span class="pjs-token pjs-string">"cap"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">false</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"cap-side"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"left"</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"cap-match-radius"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">true</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"cap-options"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
+    <span class="pjs-token pjs-string">"color"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"link"</span><span class="pjs-token pjs-punctuation">,</span>
+    <span class="pjs-token pjs-string">"size"</span> <span class="pjs-token pjs-punctuation">:</span> 0.5rem<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"cap-options-hover"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
+    <span class="pjs-token pjs-string">"color"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"link-hover"</span>
+  <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
 <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
 <details>
   <summary>File Information</summary>
@@ -5129,8 +5135,8 @@
 <li><strong>File:</strong> _button-verbose.scss</li>
 <li><strong>Group:</strong> button-verbose</li>
 <li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 30-54</li>
-<li><strong>Lines (code):</strong> 56-80</li>
+<li><strong>Lines (comments):</strong> 30-55</li>
+<li><strong>Lines (code):</strong> 57-87</li>
 </ul>
 </details>
 <h4 id="map-properties" tabindex="-1">Map Properties</h4>
@@ -5259,28 +5265,34 @@
 <td style="text-align:left">Margin for the button's title.</td>
 </tr>
 <tr>
-<td style="text-align:left">left-cap</td>
+<td style="text-align:left">cap</td>
 <td style="text-align:left">Boolean</td>
 <td style="text-align:left">false</td>
 <td style="text-align:left">Enable left cap style</td>
 </tr>
 <tr>
-<td style="text-align:left">left-cap-color</td>
+<td style="text-align:left">cap-side</td>
 <td style="text-align:left">Color</td>
-<td style="text-align:left">&quot;link&quot;</td>
-<td style="text-align:left">The color for the left cap</td>
+<td style="text-align:left">&quot;left&quot;</td>
+<td style="text-align:left">The side that gets the cap</td>
 </tr>
 <tr>
-<td style="text-align:left">left-cap-color-hover</td>
-<td style="text-align:left">color</td>
-<td style="text-align:left">&quot;link-hover&quot;</td>
-<td style="text-align:left">The color for the left cap when the button is hovered</td>
+<td style="text-align:left">cap-match-radius</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">true</td>
+<td style="text-align:left">The cap should have be rounded to match the parent's border radius</td>
 </tr>
 <tr>
-<td style="text-align:left">left-cap-color-hover</td>
-<td style="text-align:left">Number</td>
-<td style="text-align:left">0.5rem</td>
-<td style="text-align:left">Width of the cap</td>
+<td style="text-align:left">cap-options</td>
+<td style="text-align:left">Map</td>
+<td style="text-align:left"></td>
+<td style="text-align:left">The options for cap (see element.cap for options)</td>
+</tr>
+<tr>
+<td style="text-align:left">cap-options-hover</td>
+<td style="text-align:left">Map</td>
+<td style="text-align:left"></td>
+<td style="text-align:left">The options for cap when hovered</td>
 </tr>
 </tbody>
 </table>
@@ -5298,8 +5310,8 @@
 <li><strong>File:</strong> _button-verbose.scss</li>
 <li><strong>Group:</strong> button-verbose</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 82-85</li>
-<li><strong>Lines (code):</strong> 87-89</li>
+<li><strong>Lines (comments):</strong> 89-92</li>
+<li><strong>Lines (code):</strong> 94-96</li>
 </ul>
 </details>
 <h4 id="examples" tabindex="-1">Examples</h4>
@@ -5338,8 +5350,8 @@
 <li><strong>File:</strong> _button-verbose.scss</li>
 <li><strong>Group:</strong> button-verbose</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 101-109</li>
-<li><strong>Lines (code):</strong> 111-192</li>
+<li><strong>Lines (comments):</strong> 108-116</li>
+<li><strong>Lines (code):</strong> 118-203</li>
 </ul>
 </details>
 <h4 id="examples-1" tabindex="-1">Examples</h4>
@@ -5376,8 +5388,8 @@
 <li><strong>File:</strong> _button-verbose.scss</li>
 <li><strong>Group:</strong> button-verbose</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 91-94</li>
-<li><strong>Lines (code):</strong> 96-99</li>
+<li><strong>Lines (comments):</strong> 98-101</li>
+<li><strong>Lines (code):</strong> 103-106</li>
 </ul>
 </details>
 <h4 id="examples-2" tabindex="-1">Examples</h4>