@rogieking/figui3 8.5.0 → 8.6.0

package/README.md

@@ -1342,9 +1342,11 @@ Defaults to `role="status"`, `aria-live="polite"`, and `aria-atomic="true"`. Use
 | `offset` | number | `16` | Distance from bottom |
 | `theme` | string | `"dark"` | `"dark"`, `"light"`, `"danger"`, `"brand"`, `"auto"` |
 | `live` | string | — | `"assertive"` for urgent announcements |
+| `icon` | string | — | Optional `fig-icon` name prepended when set; always rendered at full size |
+| `dismiss` | boolean | `false` | Appends a ghost close button that hides the toast |
 
 ```html
-<dialog is="fig-toast" id="myToast" theme="brand" duration="3000">
+<dialog is="fig-toast" id="myToast" theme="brand" icon="warning" dismiss="true" duration="3000">
   Settings saved!
 </dialog>
 <fig-button onclick="document.getElementById('myToast').showToast()">Show</fig-button>

package/components.css

@@ -394,9 +394,10 @@
   --icon-24-adjust: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.5 18C8.77614 18 9 17.7761 9 17.5V15.9492C10.141 15.7175 11 14.7094 11 13.5C11 12.2905 10.1411 11.2814 9 11.0498V6.5C9 6.22386 8.77614 6 8.5 6C8.22386 6 8 6.22386 8 6.5V11.0498C6.85886 11.2814 6 12.2905 6 13.5C6 14.7094 6.85895 15.7175 8 15.9492V17.5C8 17.7761 8.22386 18 8.5 18ZM15.5 18C15.7761 18 16 17.7761 16 17.5V12.9502C17.1411 12.7186 18 11.7095 18 10.5C18 9.29057 17.141 8.28247 16 8.05078V6.5C16 6.22386 15.7761 6 15.5 6C15.2239 6 15 6.22386 15 6.5V8.05078C13.859 8.28247 13 9.29057 13 10.5C13 11.7095 13.8589 12.7186 15 12.9502V17.5C15 17.7761 15.2239 18 15.5 18ZM15.5 12C14.6716 12 14 11.3284 14 10.5C14 9.67157 14.6716 9 15.5 9C16.3284 9 17 9.67157 17 10.5C17 11.3284 16.3284 12 15.5 12ZM8.5 15C7.67157 15 7 14.3284 7 13.5C7 12.6716 7.67157 12 8.5 12C9.32843 12 10 12.6716 10 13.5C10 14.3284 9.32843 15 8.5 15Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
   --icon-16-adjust: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5 13C5.77614 13 6 12.7761 6 12.5V11.5C6 11.478 5.99591 11.4568 5.99316 11.4355C6.85886 11.2156 7.5 10.4341 7.5 9.5C7.5 8.56581 6.85898 7.7833 5.99316 7.56348C5.99583 7.54257 6 7.52163 6 7.5V3.5C6 3.22386 5.77614 3 5.5 3C5.22386 3 5 3.22386 5 3.5V7.5C5 7.52158 5.00321 7.54261 5.00586 7.56348C4.14051 7.78362 3.5 8.56614 3.5 9.5C3.5 10.4338 4.14063 11.2153 5.00586 11.4355C5.00313 11.4567 5 11.4781 5 11.5V12.5C5 12.7761 5.22386 13 5.5 13ZM10.5 13C10.7761 13 11 12.7761 11 12.5V8.5C11 8.47837 10.9958 8.45743 10.9932 8.43652C11.859 8.2167 12.5 7.43419 12.5 6.5C12.5 5.56589 11.8589 4.78435 10.9932 4.56445C10.9959 4.54324 11 4.52196 11 4.5V3.5C11 3.22386 10.7761 3 10.5 3C10.2239 3 10 3.22386 10 3.5V4.5C10 4.52192 10.0031 4.54328 10.0059 4.56445C9.14063 4.78468 8.5 5.56622 8.5 6.5C8.5 7.43386 9.14051 8.21638 10.0059 8.43652C10.0032 8.45739 10 8.47842 10 8.5V12.5C10 12.7761 10.2239 13 10.5 13ZM10.5 7.5C9.94772 7.5 9.5 7.05228 9.5 6.5C9.5 5.94772 9.94772 5.5 10.5 5.5C11.0523 5.5 11.5 5.94772 11.5 6.5C11.5 7.05228 11.0523 7.5 10.5 7.5ZM5.5 10.5C4.94772 10.5 4.5 10.0523 4.5 9.5C4.5 8.94772 4.94772 8.5 5.5 8.5C6.05228 8.5 6.5 8.94772 6.5 9.5C6.5 10.0523 6.05228 10.5 5.5 10.5Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
   --icon-24-globe: url("data:image/svg+xml,%3Csvg%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M12%205C15.866%205%2019%208.13401%2019%2012C19%2015.866%2015.866%2019%2012%2019C8.13401%2019%205%2015.866%205%2012C5%208.13401%208.13401%205%2012%205ZM10.0107%2012.5C10.063%2014.1231%2010.364%2015.5434%2010.7979%2016.5557C11.0375%2017.1149%2011.2977%2017.5039%2011.5352%2017.7383C11.7682%2017.9681%2011.924%2018%2012%2018C12.076%2018%2012.2318%2017.9681%2012.4648%2017.7383C12.7023%2017.5039%2012.9625%2017.1149%2013.2021%2016.5557C13.636%2015.5434%2013.937%2014.1231%2013.9893%2012.5H10.0107ZM6.02246%2012.5C6.22856%2014.9975%207.96276%2017.0599%2010.2891%2017.751C9.56496%2016.5758%209.07556%2014.675%209.00977%2012.5H6.02246ZM14.9902%2012.5C14.9244%2014.6756%2014.4334%2016.5759%2013.709%2017.751C16.0362%2017.0605%2017.7714%2014.9981%2017.9775%2012.5H14.9902ZM10.29%206.24805C7.96315%206.93875%206.2286%209.00212%206.02246%2011.5H9.00879C9.0746%209.32423%209.56549%207.42306%2010.29%206.24805ZM12%206C11.924%206%2011.7682%206.03186%2011.5352%206.26172C11.2977%206.49608%2011.0375%206.88507%2010.7979%207.44434C10.364%208.4566%2010.063%209.87694%2010.0107%2011.5H13.9893C13.937%209.87694%2013.636%208.4566%2013.2021%207.44434C12.9625%206.88507%2012.7023%206.49608%2012.4648%206.26172C12.2318%206.03186%2012.076%206%2012%206ZM13.709%206.24805C14.4337%207.42303%2014.9254%209.32396%2014.9912%2011.5H17.9775C17.7714%209.00179%2016.0363%206.93848%2013.709%206.24805Z'%20fill%3D'black'%20fill-opacity%3D'0.9'%2F%3E%3C%2Fsvg%3E");
-  
   --icon-16-globe: url("data:image/svg+xml,%3Csvg%20width%3D'16'%20height%3D'16'%20viewBox%3D'0%200%2016%2016'%20fill%3D'none'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M8%203C10.7614%203%2013%205.23858%2013%208C13%2010.7614%2010.7614%2013%208%2013C5.23858%2013%203%2010.7614%203%208C3%205.23858%205.23858%203%208%203ZM7.01172%208.5C7.05823%209.57496%207.25084%2010.5045%207.51465%2011.1641C7.66771%2011.5467%207.82478%2011.7894%207.94824%2011.9199C7.96779%2011.9406%207.98583%2011.9553%208%2011.9678C8.01417%2011.9553%208.03221%2011.9406%208.05176%2011.9199C8.17522%2011.7894%208.33229%2011.5467%208.48535%2011.1641C8.74916%2010.5045%208.94177%209.57496%208.98828%208.5H7.01172ZM4.03223%208.5C4.22306%2010.0299%205.27727%2011.2898%206.69238%2011.7793C6.31652%2010.965%206.06265%209.80685%206.01074%208.5H4.03223ZM9.98926%208.5C9.93735%209.80705%209.68259%2010.965%209.30664%2011.7793C10.7222%2011.29%2011.7769%2010.0302%2011.9678%208.5H9.98926ZM9.30664%204.21973C9.6828%205.0341%209.93733%206.19252%209.98926%207.5H11.9678C11.7769%205.96968%2010.7223%204.70898%209.30664%204.21973ZM7.94824%204.08008C7.82478%204.21063%207.66771%204.45329%207.51465%204.83594C7.25084%205.49547%207.05823%206.42504%207.01172%207.5H8.98828C8.94177%206.42504%208.74916%205.49547%208.48535%204.83594C8.33229%204.45329%208.17522%204.21063%208.05176%204.08008C8.03198%204.05917%208.01427%204.04375%208%204.03125C7.98573%204.04375%207.96802%204.05917%207.94824%204.08008ZM6.69238%204.21973C5.27711%204.7092%204.22308%205.96999%204.03223%207.5H6.01074C6.06266%206.19272%206.31632%205.03408%206.69238%204.21973Z'%20fill%3D'black'%20fill-opacity%3D'0.9'%2F%3E%3C%2Fsvg%3E");
-    
+  --icon-24-warning: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.2568 6.0595C11.0214 4.7002 12.9785 4.70024 13.7431 6.0595L18.7832 15.0195C19.5331 16.3527 18.5697 17.9999 17.04 17.9999H6.95994C5.43033 17.9999 4.46687 16.3526 5.21677 15.0195L6.08787 15.5097C5.73649 16.1347 6.13844 16.8974 6.82029 16.9902L6.95994 16.9999H17.04C17.8048 16.9999 18.2868 16.1763 17.9121 15.5097L17.9111 15.5087L12.8711 6.54973C12.4887 5.87012 11.5112 5.87009 11.1289 6.54973L6.08787 15.5087L5.21677 15.0195L10.2568 6.0595ZM12 14.0029C12.414 14.0029 12.7497 14.3388 12.75 14.7529C12.75 15.1671 12.4142 15.5029 12 15.5029C11.5858 15.5028 11.25 15.1671 11.25 14.7529C11.2502 14.3389 11.5859 14.0029 12 14.0029ZM12 8.49993C12.4252 8.49993 12.7607 8.8609 12.7304 9.28508L12.499 12.5351C12.4803 12.7967 12.2623 12.9999 12 12.9999C11.7377 12.9999 11.5197 12.7967 11.501 12.5351L11.2695 9.28508C11.2392 8.86091 11.5747 8.49995 12 8.49993Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
+  --icon-16-warning: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.28478 2.91494C7.06157 1.62043 8.93759 1.62052 9.71446 2.91494L13.9488 9.9706C14.7487 11.3037 13.7876 12.9999 12.233 12.9999H3.76622C2.21173 12.9998 1.2506 11.3036 2.0504 9.9706L6.28478 2.91494ZM8.85704 3.42861C8.46851 2.78202 7.53064 2.78191 7.1422 3.42861H7.14122L2.90782 10.4853H2.9088C2.53393 11.11 2.93205 11.8944 3.62364 11.9901L3.76622 11.9999H12.233C13.0103 11.9999 13.4904 11.1518 13.0904 10.4853L8.85704 3.42861ZM7.99962 9.4999C8.41375 9.4999 8.74948 9.83581 8.74962 10.2499C8.74962 10.6641 8.41383 10.9999 7.99962 10.9999C7.58545 10.9999 7.24962 10.6641 7.24962 10.2499C7.24976 9.83584 7.58554 9.49995 7.99962 9.4999ZM8.07872 5.00381C8.46732 5.04556 8.76038 5.39199 8.72716 5.79092L8.49669 8.54092C8.47503 8.80006 8.25869 8.99996 7.99864 8.9999C7.73876 8.99965 7.52212 8.79994 7.5006 8.54092L7.27208 5.78994C7.23715 5.36476 7.57294 5.00004 7.99962 4.9999L8.07872 5.00381Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
+
   --tip-pointer: path("M8 6L2 0H14L8 6Z");
 
 
@@ -5570,6 +5571,14 @@ fig-menu-item {
   pointer-events: none;
   user-select: none;
 
+  &[direction="vertical"] {
+    align-self: stretch;
+    width: 1px;
+    height: auto;
+    min-height: var(--spacer-3);
+    margin: 0;
+  }
+
   &[borderless]:not([borderless="false"]) {
     background: transparent;