jfbrennan / m- Goto Github PK

https://m-docs.org/accordion

The accordion (summary and details) example on the page does not have visible focus indicators.

They are being overridden in the theme with

button:active, button:focus, details>summary:focus {
    outline: 0;
}

Additionally (sorry to mix reports) there is an error in the JS on the page.

Uncaught SyntaxError: Invalid or unexpected token. File: accordion: 171

<code-sample readonly="readonly">
  // Imperative
  <script>
    const handleToggle = e => \{ <---- this is leaking into the DOM

Chrome latest stable 92.0.4515.131

I understand that the example does not auto close other items and is just wrapped summary and details elements, so I don't think it has any impact of the page functionality but I thought I would let you know!

It would be useful to have components for simple (static is fine) pie, doughnut, line, and bar charts/graphs. This is a fantastic library and concept and with charts/graphs, it would have everything I need to build web interfaces.

Home doc page says:

Installation

CDN

Development: https://unpkg.com/[email protected]/dist/dev.[css|js]

But these files are not found on unpkg

Cannot find "/dist/dev.css" in [email protected]

Goal is 100% coverage

The m-autocomplete, m-menu, and m-dialog components are creating event listeners during connectedCallback phase, but not releasing on disconnectedCallback. This keeps the actual instance of the element in the memory even after it's no longer exists in the DOM.

Documentation missing!

Like the subject says, when you move/drag drop elements in the DOM, the connectedCallback will run again.

Add an option for horizontal scrollable Tabs. This could be the addition of a scroll-x helper class or maybe a scroll boolean attribute unique to Tabs.

Also, this is the rare case where the scrollbar should be removed, which is done like this:

/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

Hello,
I am trying to use this library for my project, I have 2 issues:

1. I cannot find in the docs the description of "bg-white" class, I understand it defines background color, but when I apply for example it to a span element it does not work; is there a way to do something like this:

<span class="bg-red">1</span>

2. Is there a way to have a bigger "badge" (and maybe a square one?); doing something like this will cut the text:

<m-badge count="2" class="txt-lg">

while doing this will make it a rounded rectangle instead of a circle:

<m-badge count="2" class="txt-lg mar-all-sm">

Thank you!
Camillo

This seems like a really cool lite weight library and I love how its framework agnostic and seems like a good option for building a design system on top of. I'm wondering if there is a recommended way to change the value of some of the tokens so I can try to "theme" m-dash to my liking?

I'm new to css variables so if there's an obvious solution it eludes me. I thought that perhaps you could just create your own css file in your project and assign new values to the tokens you defined, but again not sure if that's the way to go. Any thoughts?

SSL certificate for https://m-docs.org/ appears to have expired.

Switch is doable as a CSS-only single checkbox element.

The icons showcase is not working. The page shows this error:

Uncaught DOMException: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet

For colourblind people (especially those with Protanopia), the current Ace editor theme (ace-monokai) used in the Documentation has #F92672 on black which suffers from a low contrast ratio and is very difficult to read (even when highlighting).

I'd suggest something like solarized dark or merbivore, or if you want to get customised, ayu-theme: https://github.com/ayu-theme/ayu-ace

Obviously this is just my opinion, so you're free to discard at will, however I will say that's it's currently quite difficult to read the demo code. :)

I looked thorough the documentation and could not find how to make my ui in a “dark mode” instead of “light mode” please help my eyes burn

I'm more of a backend but i am intrigued by the promise m- can work with any technology.

Can m- work with tailwind as well?

See https://dev.to/open-wc/introducing-custom-elements-manifest-gkk

Could you please provide in the docs of the size of tailwind? I would love to see the comparison.
Here:

Editorial opinion, worth exactly what you paid for it:

I appreciate and agree with a lot of what you have to say about modern web development (especially the J2EE comparison) but I wonder if some people might find it alienating. I used to be more aggressive with my messaging around htmx/intercooler.js, but I dialed it back over time and have had more success, fwiw.

For the docs site, I'm not sure how you are hosting it, but I am using netlify for htmx and it has worked really well. I am using the eleventy static site building system, which is OK, but is supported by netlify OOTB (including layouts, etc.) You get https almost for free, which is also nice.

Finally, my first impression of m- is concern about the custom tags. I know that custom tags are a thing, but I just don't have a lot of experience with them. I see them briefly mentioned (https://developer.mozilla.org/en-US/docs/Web/API/Window/customElements) but for someone like me, a bit more information on them would help me get comfortable with them.

Good luck w/ the project!

The border width utility class docs state that the class follows the form brd-width-[sm|md] but the actual classes are:

On the home page, there's a section heading called "Where did Mdash come from" that says in part:

It was during this time the TAC methodology was created with Mdash being the first open-source implementation.

The phrase "TAC methodology" is linked with an anchor tag but there is no HREF. Should this be pointing to something?

Buttons need a stronger disabled look and not allowed cursor

On the page https://m-docs.org/autocomplete this happens when I try out the State Autocomple example under the More Autocomplete! header.

This is on with Firefox v99, Windows 10.

I don't know enough CSS to figure out why it happens though. Maybe some bad z-index values?

Icons are not displaying in the icons docs page here: http://m-docs.org/icons

Tested in Firefox, Safari, and iOS Safari.

Looks like this:

Hi! I really love the project! I feel it's the closest I have seen to a UI system I would like.

I found one obvious accessibility issue with buttons. When navigating with tab on the keyboard, there is not way of knowing if a button is focused or not because the outline seems to be completely removed.

Could we add some focus styles to buttons?

There is full-width, a full-height class is also a pretty common need.

Menus need to be viewport aware and reposition as they go out of view (scrolling, left edge, right edge).

Going to add support for repositioning if bottom or right edge exceed viewport (not applicable on top and left edges)

M-Alert takes all children, creates a div and places everything inside.
Seems like a proper usage of <slot> could solve it.

It also breaks interoperability with other libraries by mutating the DOM. Example:

Lib X has a component that uses m-alert.
Render phase complete, then m-alert alters the DOM.
Lib X Might break.

Autocomplete needs some additional attributes and more keyboard support for a11y. See https://www.w3.org/WAI/PF/aria-1.1/states_and_properties#aria-autocomplete and https://adamsilver.io/articles/building-an-accessible-autocomplete-control/