@rolemodel/optics 2.3.1 → 2.4.0

package/dist/css/optics+phosphor_icons.css

@@ -1,11 +1,11 @@
 
 @import 'https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&family=Noto+Serif:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap';
-@import 'https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/style.css';
-@import 'https://unpkg.com/@phosphor-icons/web@2.1.1/src/thin/style.css';
-@import 'https://unpkg.com/@phosphor-icons/web@2.1.1/src/light/style.css';
-@import 'https://unpkg.com/@phosphor-icons/web@2.1.1/src/bold/style.css';
-@import 'https://unpkg.com/@phosphor-icons/web@2.1.1/src/fill/style.css';
-@import 'https://unpkg.com/@phosphor-icons/web@2.1.1/src/duotone/style.css';
+@import 'https://unpkg.com/@phosphor-icons/web@2.1.2/src/regular/style.css';
+@import 'https://unpkg.com/@phosphor-icons/web@2.1.2/src/thin/style.css';
+@import 'https://unpkg.com/@phosphor-icons/web@2.1.2/src/light/style.css';
+@import 'https://unpkg.com/@phosphor-icons/web@2.1.2/src/bold/style.css';
+@import 'https://unpkg.com/@phosphor-icons/web@2.1.2/src/fill/style.css';
+@import 'https://unpkg.com/@phosphor-icons/web@2.1.2/src/duotone/style.css';
 /* Third party Vendors */
 /* Box sizing rules */
 *,
@@ -88,7 +88,8 @@ Noto Sans supports:
 /* Noto Sans and Noto Serif */
 /*
   See all icons at: https://phosphoricons.com/
-  Current version: 2.1.1
+  See Changelog at: https://github.com/phosphor-icons/web/releases
+  Current version: 2.1.2
 */
 /* Note: the important tag is how Phosphor sets up the fonts which is why we replicate them here */
 /* Phosphor Icons */
@@ -2253,6 +2254,11 @@ small {
   flex-grow: 1;
 }
 /* Gap Properties */
+.gap-none {
+  gap: 0;
+
+  --op-gap: 0;
+}
 .gap-xxs {
   gap: var(--op-space-2x-small);
 
@@ -2501,28 +2507,168 @@ small {
 .op-stack {
   display: flex;
   flex-direction: column;
-}
-:where(.op-stack) {
-  gap: var(--op-space-medium);
+  margin-block: 0;
+  margin-inline: 0;
+
+  /* zero specificity. Lets utilities override */
+  :where(&) {
+    gap: var(--op-space-medium);
+  }
 }
 /* Equivalent to .flex.flex-wrap.items-center.gap-md */
 .op-cluster {
   display: flex;
   flex-wrap: wrap;
-}
-:where(.op-cluster) {
-  align-items: center;
-  gap: var(--op-space-medium);
+  margin-block: 0;
+  margin-inline: 0;
+
+  /* zero specificity. Lets utilities override */
+  :where(&) {
+    align-items: center;
+    gap: var(--op-space-medium);
+  }
 }
 /* Equivalent to .flex.flex-wrap.items-center.justify-between.gap-md */
 .op-split {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
+  margin-block: 0;
+  margin-inline: 0;
+
+  /* zero specificity. Lets utilities override */
+  :where(&) {
+    align-items: center;
+    gap: var(--op-space-medium);
+  }
 }
-:where(.op-split) {
-  align-items: center;
-  gap: var(--op-space-medium);
+/*
+  side by side layout with a small area and a large area
+  similar to .flex with a .flex-grow-1 within it, but with a more semantic name and wrap handling.
+
+  |[] [         ]|
+  |[         ] []| with end
+*/
+.op-flank {
+  display: flex;
+  margin-block: 0;
+  margin-inline: 0;
+
+  /* zero specificity. Lets utilities override */
+  :where(&) {
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--op-space-medium);
+  }
+
+  /* Small area */
+  &:not(.op-flank--end) > :first-child,
+  &.op-flank--end > :last-child {
+    flex-basis: auto;
+    flex-grow: 1;
+  }
+
+  /* Large area */
+  &:not(.op-flank--end) > :last-child,
+  &.op-flank--end > :first-child {
+    flex-basis: 0;
+    flex-grow: 999;
+  }
+}
+/* Grid Layout */
+.op-grid {
+  --_op-grid-min-column-size: var(--op-space-4x-large);
+  --_op-grid-max-column-size: 0px;
+
+  display: grid;
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(max(var(--_op-grid-min-column-size), var(--_op-grid-max-column-size)), 1fr)
+  );
+  margin-block: 0;
+  margin-inline: 0;
+
+  /* zero specificity. Lets utilities override */
+  :where(&) {
+    gap: var(--op-space-medium);
+  }
+
+  &.op-grid--2-column {
+    --_op-grid-max-column-size: calc(100% / 3);
+  }
+
+  &.op-grid--3-column {
+    --_op-grid-max-column-size: calc(100% / 4);
+  }
+
+  &.op-grid--4-column {
+    --_op-grid-max-column-size: calc(100% / 5);
+  }
+
+  &.op-grid--5-column {
+    --_op-grid-max-column-size: calc(100% / 6);
+  }
+
+  &.op-grid--6-column {
+    --_op-grid-max-column-size: calc(100% / 7);
+  }
+}
+/* Frame */
+@property --_op-frame-inline-size {
+  inherits: true;
+  initial-value: 100%;
+  syntax: '<length> | <percentage>';
+}
+.op-frame {
+  display: flex;
+  overflow: hidden;
+  border-radius: inherit;
+  aspect-ratio: 1 / 1;
+  margin-block: 0;
+  margin-inline: 0;
+  max-inline-size: var(--_op-frame-inline-size);
+
+  :where(&) {
+    align-items: center;
+    justify-content: center;
+  }
+
+  > img,
+  > video {
+    block-size: 100%;
+    inline-size: 100%;
+    object-fit: cover;
+  }
+
+  /* aspect ratio */
+
+  &.op-frame--square {
+    aspect-ratio: 1 / 1;
+  }
+
+  &.op-frame--landscape {
+    aspect-ratio: 16 / 9;
+  }
+
+  &.op-frame--portrait {
+    aspect-ratio: 9 / 16;
+  }
+
+  &.op-frame--4-3 {
+    aspect-ratio: 4 / 3;
+  }
+
+  &.op-frame--3-4 {
+    aspect-ratio: 3 / 4;
+  }
+
+  &.op-frame--3-2 {
+    aspect-ratio: 3 / 2;
+  }
+
+  &.op-frame--2-3 {
+    aspect-ratio: 2 / 3;
+  }
 }
 /* Components */
 .accordion {
@@ -2570,7 +2716,7 @@ small {
   }
 
   &[open] {
-    summary .accordion__marker {
+    > summary .accordion__marker {
       rotate: 0.25turn;
     }
 
@@ -5120,7 +5266,11 @@ dialog.modal {
 
   display: flex;
   flex-direction: column;
-  gap: var(--op-space-x-small);
+
+  /* zero specificity. Lets utilities override */
+  :where(&) {
+    gap: var(--op-space-x-small);
+  }
 
   &.text-pair--inline {
     flex-direction: row;