@pod-os/elements 0.25.3-rc.aa3b162.0 → 0.25.3-rc.ba1a8fa.0

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.
@@ -1795,7 +1795,7 @@ Toast.style = {
1795
1795
  md: IonToastMdStyle0
1796
1796
  };
1797
1797
 
1798
- const posAddNewThingCss = ":host{font-family:var(--font-sans);display:block}button#new{cursor:pointer;display:flex;align-items:center;justify-content:center;border:none;width:var(--scale-5);height:var(--scale-5);background-color:var(--pos-primary-color);color:var(--pos-primary-text-color);font-size:var(--scale-6);border-radius:var(--radius-xs)}button#new:hover,button#new:focus{outline:none;filter:brightness(110%);box-shadow:var(--shadow-sm)}pos-new-thing-form{margin:var(--scale-3)}";
1798
+ const posAddNewThingCss = ":host{font-family:var(--font-sans);display:block}button#new{cursor:pointer;display:flex;align-items:center;justify-content:center;border:none;width:var(--scale-5);height:var(--scale-5);background-color:var(--pos-primary-color);color:var(--color-grey-50);font-size:var(--scale-6);border-radius:var(--radius-xs)}button#new:hover,button#new:focus{outline:none;filter:brightness(110%);box-shadow:var(--shadow-sm)}pos-new-thing-form{margin:var(--scale-3)}";
1799
1799
  const PosAddNewThingStyle0 = posAddNewThingCss;
1800
1800
 
1801
1801
  const PosAddNewThing = class {
@@ -3459,7 +3459,7 @@ const PosLoginForm = class {
3459
3459
  };
3460
3460
  PosLoginForm.style = PosLoginFormStyle0;
3461
3461
 
3462
- const posMakeFindableCss = "button.main {\n display: flex;\n transition:\n width 200ms,\n background-color 500ms,\n color 500ms,\n border-color 500ms;\n max-width: var(--size-40);\n flex-direction: row;\n overflow: hidden;\n height: var(--size-8);\n width: var(--size-8);\n align-items: center;\n justify-content: center;\n border-radius: var(--radius-xs);\n color: var(--pos-subtle-text-color);\n border: var(--size-px) dashed var(--pos-subtle-text-color);\n background-color: var(--pos-background-color);\n\n p {\n padding: 0;\n margin: 0;\n display: none;\n white-space: nowrap;\n }\n\n &.success {\n color: var(--color-green-700);\n border-color: var(--color-green-700);\n border-style: solid;\n background-color: var(--color-green-100);\n }\n\n &:active {\n transform: scale(0.99);\n filter: brightness(90%);\n }\n}\n\n.options {\n position: absolute;\n animation: fadeIn 300ms;\n padding: 0;\n margin-top: var(--size-1);\n z-index: var(--layer-top);\n\n ol {\n display: flex;\n flex-direction: column;\n box-shadow: var(--shadow-md);\n backdrop-filter: var(--blur-md);\n border-radius: var(--radius-xs);\n overflow: hidden;\n color: var(--color-grey-900);\n background-color: var(--color-grey-200);\n padding: 0;\n margin: 0;\n list-style: none;\n label {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n transition: all 300ms var(--ease-in-out-sine);\n margin: 0;\n border: none;\n outline: none;\n padding: var(--size-2);\n width: var(--size-full);\n\n &:hover,\n &:focus {\n filter: brightness(80%);\n }\n\n &:active {\n filter: brightness(90%);\n }\n }\n }\n label:has(input:checked) {\n background-color: var(--color-green-100);\n }\n}\n\nsvg {\n display: inline-block;\n height: var(--size-6);\n flex-shrink: 0;\n flex-grow: 0;\n width: var(--size-6);\n}\n\nbutton.main:hover,\nbutton.open {\n &.success {\n background: var(--color-green-200);\n }\n width: var(--size-full);\n height: var(--size-8);\n background: var(--pos-background-color);\n color: var(--pos-normal-text-color);\n\n p {\n display: inline-block;\n }\n}\n\n@keyframes fadeIn {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n";
3462
+ const posMakeFindableCss = "button.main {\n display: flex;\n transition:\n width 200ms,\n background-color 500ms,\n color 500ms,\n border-color 500ms;\n max-width: var(--size-40);\n flex-direction: row;\n overflow: hidden;\n height: var(--size-8);\n width: var(--size-8);\n align-items: center;\n justify-content: center;\n border-radius: var(--radius-xs);\n color: var(--color-grey-500);\n border: var(--size-px) dashed var(--color-grey-500);\n background: none;\n\n p {\n padding: 0;\n margin: 0;\n display: none;\n white-space: nowrap;\n }\n\n &.success {\n color: var(--color-green-700);\n border-color: var(--color-green-700);\n border-style: solid;\n background-color: var(--color-green-100);\n }\n\n &:active {\n transform: scale(0.99);\n filter: brightness(90%);\n }\n}\n\n.options {\n position: absolute;\n animation: fadeIn 300ms;\n padding: 0;\n margin-top: var(--size-1);\n z-index: var(--layer-top);\n\n ol {\n display: flex;\n flex-direction: column;\n box-shadow: var(--shadow-md);\n backdrop-filter: var(--blur-md);\n border-radius: var(--radius-xs);\n overflow: hidden;\n background-color: var(--color-grey-200);\n padding: 0;\n margin: 0;\n list-style: none;\n label {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n transition: all 300ms var(--ease-in-out-sine);\n margin: 0;\n border: none;\n outline: none;\n padding: var(--size-2);\n width: var(--size-full);\n\n &:hover,\n &:focus {\n filter: brightness(80%);\n }\n\n &:active {\n filter: brightness(90%);\n }\n }\n }\n label:has(input:checked) {\n background-color: var(--color-green-100);\n }\n}\n\nsvg {\n display: inline-block;\n height: var(--size-6);\n flex-shrink: 0;\n flex-grow: 0;\n width: var(--size-6);\n}\n\nbutton.main:hover,\nbutton.open {\n &.success {\n background: var(--color-green-200);\n }\n width: var(--size-full);\n height: var(--size-8);\n background: var(--color-grey-200);\n color: var(--color-grey-700);\n\n p {\n display: inline-block;\n }\n}\n\n@keyframes fadeIn {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n";
3463
3463
  const PosMakeFindableStyle0 = posMakeFindableCss;
3464
3464
 
3465
3465
  const PosMakeFindable = class {
@@ -3799,7 +3799,7 @@ const PosResource = class {
3799
3799
  };
3800
3800
  PosResource.style = PosResourceStyle0;
3801
3801
 
3802
- const posRichLinkCss = ":host {\n --background-color: inherit;\n --label-color: var(--pos-normal-text-color);\n --description-color: var(--pos-normal-text-color);\n --uri-color: var(--pos-subtle-text-color);\n --font-family: var(--font-sans);\n}\n\np.content {\n background-color: var(--background-color);\n line-height: var(--line-xs);\n margin: 0;\n display: flex;\n flex-direction: column;\n align-items: baseline;\n gap: var(--size-1);\n\n .url {\n font-size: var(--scale-fluid-1);\n color: var(--pos-subtle-text-color);\n }\n}\n\na {\n color: var(--label-color);\n max-width: var(--prose-lg);\n text-decoration: underline;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n text-decoration-thickness: var(--size-px);\n}\n\npos-label {\n color: var(--label-color);\n font-size: var(--scale-fluid-2);\n margin-bottom: var(--size-1);\n}\n\npos-description {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n text-overflow: ellipsis;\n overflow: hidden;\n font-weight: var(--weight-light);\n color: var(--description-color);\n font-size: var(--scale-fluid-2);\n}\n\n@media (min-width: 640px) {\n pos-label {\n font-size: var(--scale-fluid-0);\n }\n pos-description {\n font-size: var(--scale-fluid-1);\n }\n\n p.content {\n .url {\n font-size: var(--scale-fluid-000);\n }\n }\n}\n";
3802
+ const posRichLinkCss = ":host {\n --background-color: inherit;\n --label-color: var(--pos-normal-text-color);\n --description-color: var(--pos-normal-text-color);\n --uri-color: var(--pos-subtle-text-color);\n --font-family: var(--font-sans);\n}\n\np.content {\n background-color: var(--background-color);\n line-height: var(--line-xs);\n margin: 0;\n display: flex;\n flex-direction: column;\n align-items: baseline;\n gap: var(--size-1);\n\n .url {\n font-size: var(--scale-fluid-1);\n color: var(--color-grey-500);\n }\n}\n\na {\n color: var(--label-color);\n max-width: var(--prose-lg);\n text-decoration: underline;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n text-decoration-thickness: var(--size-px);\n}\n\npos-label {\n color: var(--label-color);\n font-size: var(--scale-fluid-2);\n margin-bottom: var(--size-1);\n}\n\npos-description {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n text-overflow: ellipsis;\n overflow: hidden;\n font-weight: var(--weight-light);\n color: var(--description-color);\n font-size: var(--scale-fluid-2);\n}\n\n@media (min-width: 640px) {\n pos-label {\n font-size: var(--scale-fluid-0);\n }\n pos-description {\n font-size: var(--scale-fluid-1);\n }\n\n p.content {\n .url {\n font-size: var(--scale-fluid-000);\n }\n }\n}\n";
3803
3803
  const PosRichLinkStyle0 = posRichLinkCss;
3804
3804
 
3805
3805
  const PosRichLink = class {