jfbrennan / m- Goto Github PK

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

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

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 */
}

Grid was built with Flexbox. Grid is and has been widely supported. Time to refactor. This will be a breaking change.

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

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

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.

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

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?

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]

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?

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

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?

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?

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.

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. :)

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

Documentation missing!

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

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?

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

Buttons need a stronger disabled look and not allowed cursor

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!

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

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)

Icon uses Material Symbols, which has so many great features and enables the smallest implementation possible, but the font file is huge (more than 300kb). Write instructions for subsetting the font and add it to the icon docs.

Goal is 100% coverage

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!

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:

As part of the goal to make Mdash CSS only, alert will have its JavaScript features removed:

• Defined pseudo slot for the dismiss button, developer owns it.
• Auto-dismiss is trivial for a developer to implement.

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/

Mdash is based on the TAC CSS methodology and as such will refactor menu to use the new Popover API.